/**
 * Tutorial / SEO block shown below the widget on every captcha demo page.
 *
 * Lifted verbatim from the per-page HTML those pages used to carry inline, so
 * the copy now ships with the plugin instead of living in each page's editor.
 * The handful of rules that differed between pages are kept as .cskip-tut--<type>
 * overrides at the bottom rather than being flattened away.
 */

.cskip-tut { --cs-indigo:#4353ff;--cs-indigo-ink:#2f3bd9;--cs-indigo-soft:#eef0ff;--cs-green:#30e87a;--cs-green-2:#0fa25e;--cs-green-soft:#e7fbef;--cs-ink:#0f1222;--cs-body:#4a5063;--cs-muted:#8a90a2;--cs-line:#e7e8ef;--cs-surface:#ffffff;--cs-soft:#f6f7fb;--cs-code-bg:#0d1020;--cs-code-bar:#171a2e;--cs-code-line:#262a45;--cs-code-fg:#e6e8f2;--cs-c:#7c86a8;--cs-s:#7ee0a9;--cs-k:#9db4ff;--cs-fn:#7ad0ff;--cs-n:#f4b86a;--cs-radius:16px;--cs-radius-sm:12px;font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--cs-body);line-height:1.6;-webkit-font-smoothing:antialiased;max-width:100%;margin:0 auto;text-align:left;font-size:16px }
.cskip-tut * { box-sizing:border-box }
.cskip-tut h2,.cskip-tut h3,.cskip-tut h4 { color:var(--cs-ink);margin:0;padding:0;line-height:1.25;font-weight:800;letter-spacing:-.02em;text-transform:none }
.cskip-tut p { margin:0;padding:0 }
.cskip-tut button { margin:0;padding:0;border:0;background:#fff0;box-shadow:none;font-family:inherit;color:inherit;-webkit-appearance:none;appearance:none;line-height:1.15;text-transform:none;letter-spacing:normal;min-height:0;min-width:0;cursor:pointer }
.cskip-tut a { text-decoration:none }
.cskip-tut pre { margin:0;padding:0;border:0;border-radius:0;background:#fff0;box-shadow:none;font-size:inherit }
.cskip-tut code { margin:0;padding:0;border:0;background:#fff0;font-size:inherit;color:inherit }
.cskip-tut__head { text-align:left;margin-bottom:26px }
.cskip-tut__title { font-size:clamp(23px,3.4vw,31px)!important;line-height:1.2!important;margin:0 0 12px!important }
.cskip-tut__sub { font-size:16.5px;max-width:none;margin:0;color:var(--cs-body) }
.cskip-tut__sub strong { color:var(--cs-ink);font-weight:700 }
.cskip-method { background:var(--cs-surface);border:1px solid var(--cs-line);border-radius:var(--cs-radius);padding:26px 26px 28px;margin-bottom:22px;box-shadow:0 20px 44px -34px rgb(20 24 60 / .5) }
.cskip-method--ext { border-top:3px solid var(--cs-green) }
.cskip-method--api { border-top:3px solid var(--cs-indigo) }
.cskip-method__head { display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:8px }
.cskip-badge { display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:5px 10px;border-radius:999px;background:var(--cs-indigo-soft);color:var(--cs-indigo) }
.cskip-badge--green { background:var(--cs-green-soft);color:var(--cs-green-2) }
.cskip-method__title { font-size:19px!important;line-height:1.3!important;width:100% }
.cskip-method__desc { font-size:15.5px;margin:0 0 20px!important;color:var(--cs-body) }
.cskip-method__desc strong { color:var(--cs-ink);font-weight:700 }
.cskip-method__desc a { color:var(--cs-indigo);font-weight:700 }
.cskip-method__desc a:hover { text-decoration:underline }
.cskip-exsteps { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px }
.cskip-exstep { display:flex;gap:12px;align-items:flex-start;background:var(--cs-soft);border:1px solid var(--cs-line);border-radius:var(--cs-radius-sm);padding:15px 16px }
.cskip-exstep__n { flex:none;width:28px;height:28px;border-radius:8px;background:var(--cs-green-soft);color:var(--cs-green-2);font-weight:800;font-size:14px;display:grid;place-items:center }
.cskip-exstep h4 { font-size:14.5px!important;margin:0 0 3px!important }
.cskip-exstep p { font-size:13.5px;line-height:1.5;color:var(--cs-body) }
.cskip-btnrow { display:flex;flex-wrap:wrap;gap:10px }
/* The button row carries no top margin of its own (in Option 1 the block above
   it supplies the gap). After the API note, which has none, it needs one. */
.cskip-apinote + .cskip-btnrow { margin-top:22px }
/* One button shape across the whole page. The hero's buttons are the site's
   own: 11px corners, 600 weight, and a hover that answers with shadow and
   colour instead of moving. These were 999px pills at 700 that scaled on
   press, so "Download CapSkip" here and "Download for Windows" in the hero
   were two different buttons for the same action. Matched to .cskl-btn in the
   landing pages stylesheet, which is where that shape is defined.
   The primary is the brand green for the same reason: a page should have one
   primary colour, and indigo stays on this block's links, tabs and step
   numbers, which are not buttons. */
.cskip-btn { display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 22px;border:1px solid transparent;border-radius:11px;font-weight:600;font-size:14.5px;line-height:1;transition:box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease }
.cskip-btn svg { width:18px;height:18px }
.cskip-btn--primary { background:var(--cs-green);color:#06301a;box-shadow:0 10px 22px -12px rgb(48 232 122 / .8) }
.cskip-btn--primary:hover { background:var(--cs-green);color:#06301a;box-shadow:0 5px 16px -5px rgb(48 232 122 / .6) }
.cskip-btn--ghost { background:var(--cs-soft);color:var(--cs-ink);border-color:var(--cs-line) }
.cskip-btn--ghost:hover { border-color:var(--cs-green-2);color:var(--cs-green-2) }
.cskip-params { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px }
.cskip-param { background:var(--cs-soft);border:1px solid var(--cs-line);border-radius:var(--cs-radius-sm);padding:15px 16px;min-width:0 }
.cskip-param__label { display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--cs-muted);margin-bottom:9px }
.cskip-param__label svg { width:14px;height:14px;color:var(--cs-indigo);flex:none }
.cskip-copyfield { display:flex;align-items:center;gap:10px;background:var(--cs-surface);border:1px solid var(--cs-line);border-radius:10px;padding:8px 8px 8px 12px;overflow:hidden;min-width:0 }
.cskip-copyfield code { flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--cs-ink)!important;background:transparent!important;padding:0!important;border:0!important;overflow-x:auto;white-space:nowrap;scrollbar-width:thin }
.cskip-copyfield code::-webkit-scrollbar { height:5px }
.cskip-copyfield code::-webkit-scrollbar-thumb { background:#cfd2e2;border-radius:3px }
.cskip-mini { flex:none;display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 11px!important;background:var(--cs-indigo)!important;color:#fff!important;font-size:12.5px;font-weight:600;border-radius:8px;transition:background .18s,transform .1s }
.cskip-mini:hover { background:var(--cs-indigo-ink)!important }
.cskip-mini:active { transform:scale(.96) }
.cskip-mini.is-done { background:var(--cs-green-2)!important }
.cskip-mini svg { width:14px;height:14px;flex:none }
.cskip-note { display:flex;gap:14px;align-items:flex-start;background:var(--cs-soft);border:1px solid var(--cs-line);border-left:4px solid var(--cs-green);border-radius:var(--cs-radius-sm);padding:15px 18px;margin-bottom:24px }
.cskip-note__ico { flex:none;width:34px;height:34px;border-radius:9px;background:var(--cs-green-soft);color:var(--cs-green-2);display:grid;place-items:center }
.cskip-note__ico svg { width:19px;height:19px }
.cskip-note h4 { font-size:15px!important;margin:0 0 3px!important }
.cskip-note p { font-size:14px }
.cskip-note a { color:var(--cs-indigo);font-weight:600 }
.cskip-note a:hover { text-decoration:underline }
.cskip-kbd { font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:var(--cs-indigo-soft)!important;padding:2px 7px!important;border-radius:5px;color:var(--cs-indigo-ink)!important;border:0!important }
/* Squared off with the buttons: a pill segmented control sitting above 11px
   buttons was the last mixed shape on the page. The inner radius is the outer
   one minus the 6px padding, so the tabs sit concentric inside the bar. */
.cskip-langbar { display:flex;flex-wrap:wrap;gap:6px;background:var(--cs-soft);border:1px solid var(--cs-line);border-radius:15px;padding:6px;margin-bottom:22px }
.cskip-lang-tab { flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:108px;height:42px;padding:0!important;color:var(--cs-body);font-size:14.5px;font-weight:600;border-radius:9px;transition:background .18s,color .18s }
.cskip-lang-tab:hover { color:var(--cs-ink);background:var(--cs-surface) }
.cskip-lang-tab .dot { width:9px;height:9px;border-radius:50%;flex:none }
.cskip-lang-tab.is-active { background:var(--cs-indigo);color:#fff }
.cskip-lang-tab.is-active .dot { background:#fff!important }
.cskip-steps { position:relative }
.cskip-step { position:relative;padding:0 0 24px 60px }
.cskip-step:before { content:"";position:absolute;left:18px;top:6px;bottom:-6px;width:2px;background:var(--cs-line) }
.cskip-step:last-child { padding-bottom:0 }
.cskip-step:last-child:before { display:none }
.cskip-step__num { position:absolute;left:0;top:0;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--cs-indigo),#5b6bff);color:#fff;font-weight:800;font-size:15px;display:grid;place-items:center;box-shadow:0 8px 20px -10px rgb(67 83 255 / .7) }
.cskip-step__title { font-size:15.5px!important;margin:0 0 4px!important }
.cskip-step__desc { font-size:14.5px;margin:0 0 13px!important;color:var(--cs-body) }
.cskip-step__desc code { font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:var(--cs-soft)!important;border:1px solid var(--cs-line)!important;padding:1px 6px!important;border-radius:6px;color:var(--cs-indigo-ink)!important }
.cskip-block { border-radius:var(--cs-radius-sm);overflow:hidden;border:1px solid var(--cs-code-line);background:var(--cs-code-bg);box-shadow:0 18px 40px -30px rgb(13 16 32 / .9) }
.cskip-block__bar { display:flex;align-items:center;gap:10px;height:44px;padding:0 12px!important;background:var(--cs-code-bar)!important;border-bottom:1px solid var(--cs-code-line) }
.cskip-dots { display:flex;gap:6px;flex:none }
.cskip-dots i { width:11px;height:11px;border-radius:50%;display:block }
.cskip-dots i:nth-child(1) { background:#ff5f57 }
.cskip-dots i:nth-child(2) { background:#febc2e }
.cskip-dots i:nth-child(3) { background:#28c840 }
.cskip-block__file { font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:#aeb4d0;margin-left:4px;white-space:nowrap }
.cskip-block__spacer { flex:1 }
.cskip-copy { display:inline-flex;align-items:center;gap:6px;flex:none;height:30px;padding:0 12px!important;border:1px solid var(--cs-code-line)!important;background:transparent!important;color:#c3c8e2!important;font-size:12.5px;font-weight:600;border-radius:8px;transition:background .18s,color .18s,border-color .18s }
.cskip-copy:hover { background:rgb(255 255 255 / .06)!important;color:#fff!important }
.cskip-copy.is-done { color:var(--cs-green)!important;border-color:rgb(48 232 122 / .4)!important }
.cskip-copy svg { width:14px;height:14px;flex:none }
.cskip-block pre { margin:0!important;padding:16px 18px!important;overflow-x:auto;scrollbar-width:thin;background:var(--cs-code-bg)!important;border:0!important;border-radius:0!important }
.cskip-block pre::-webkit-scrollbar { height:8px }
.cskip-block pre::-webkit-scrollbar-thumb { background:#2f3454;border-radius:4px }
.cskip-block code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:13.5px;line-height:1.7;color:var(--cs-code-fg)!important;background:transparent!important;padding:0!important;border:0!important;white-space:pre;display:block;tab-size:2 }
.cskip-c { color:var(--cs-c)!important;font-style:italic }
.cskip-s { color:var(--cs-s)!important }
.cskip-k { color:var(--cs-k)!important }
.cskip-fn { color:var(--cs-fn)!important }
.cskip-n { color:var(--cs-n)!important }
.cskip-tut[data-lang="python"] .cskip-lang:not([data-lang="python"]),.cskip-tut[data-lang="node"] .cskip-lang:not([data-lang="node"]),.cskip-tut[data-lang="php"] .cskip-lang:not([data-lang="php"]),.cskip-tut[data-lang="csharp"] .cskip-lang:not([data-lang="csharp"]) { display:none!important }
.cskip-result { display:flex;align-items:center;gap:12px;margin-top:14px;background:var(--cs-green-soft);border:1px solid #bff0d3;border-radius:var(--cs-radius-sm);padding:12px 16px }
.cskip-result svg { width:20px;height:20px;color:var(--cs-green-2);flex:none }
.cskip-result p { font-size:14px;color:#0c6b3f }
.cskip-result code { font-family:ui-monospace,Menlo,Consolas,monospace;background:#d4f7e2!important;padding:1px 6px!important;border-radius:5px;color:#0a5c33!important;border:0!important }
.cskip-res { margin-top:26px;border-top:1px solid var(--cs-line);padding-top:22px }
.cskip-res__h { font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--cs-muted);font-weight:700;margin-bottom:14px }
.cskip-res__grid { display:flex;flex-wrap:wrap;gap:10px }
.cskip-chip { display:inline-flex;align-items:center;gap:9px;background:var(--cs-surface);border:1px solid var(--cs-line);border-radius:12px;padding:10px 14px;color:var(--cs-ink);font-weight:600;font-size:14px;transition:border-color .2s,box-shadow .2s,transform .1s }
.cskip-chip:hover { border-color:var(--cs-indigo);box-shadow:0 10px 24px -16px rgb(67 83 255 / .6);transform:translateY(-1px) }
.cskip-chip svg { width:17px;height:17px;color:var(--cs-indigo);flex:none }
.cskip-chip span small { display:block;font-weight:500;font-size:11.5px;color:var(--cs-muted);line-height:1.2 }
.cskip-seo { margin-top:22px;background:var(--cs-surface);border:1px solid var(--cs-line);border-radius:var(--cs-radius);padding:26px 26px 28px;box-shadow:0 20px 44px -34px rgb(20 24 60 / .5) }
.cskip-seo__h { font-size:19px!important;line-height:1.3!important;margin:0 0 12px!important }
.cskip-seo p { font-size:15px;line-height:1.65;margin:0 0 14px!important;color:var(--cs-body) }
.cskip-seo p:last-of-type { margin-bottom:0!important }
.cskip-seo a { color:var(--cs-indigo);font-weight:600 }
.cskip-seo a:hover { text-decoration:underline }
.cskip-faq { margin-top:20px;display:flex;flex-direction:column;gap:10px }
.cskip-faq__q { border:1px solid var(--cs-line);border-radius:var(--cs-radius-sm);background:var(--cs-soft);overflow:hidden }
.cskip-faq__q summary { list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-weight:700;color:var(--cs-ink);font-size:14.5px }
.cskip-faq__q summary::-webkit-details-marker { display:none }
.cskip-faq__q summary:after { content:"";flex:none;width:9px;height:9px;margin-right:2px;border-right:2px solid var(--cs-muted);border-bottom:2px solid var(--cs-muted);transform:rotate(45deg);transition:transform .2s }
.cskip-faq__q[open] summary:after { transform:rotate(-135deg) }
.cskip-faq__a { padding:0 16px 15px;font-size:14px;line-height:1.6;color:var(--cs-body) }
.cskip-faq__a a { color:var(--cs-indigo);font-weight:600 }
.cskip-adv { background:var(--cs-soft);border:1px solid var(--cs-line);border-radius:var(--cs-radius-sm);padding:20px 20px 22px;margin-top:47px;margin-bottom:4px }
.cskip-adv__head { display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap }
.cskip-adv__title { font-size:16px!important;line-height:1.3!important;margin:0!important }
.cskip-adv__desc { font-size:14.5px;margin:0 0 6px!important;color:var(--cs-body) }
.cskip-adv__desc code,.cskip-adv__list code { font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:var(--cs-surface)!important;border:1px solid var(--cs-line)!important;padding:1px 6px!important;border-radius:6px;color:var(--cs-indigo-ink)!important }
.cskip-adv__label { font-size:13px!important;font-weight:700!important;color:var(--cs-ink)!important;letter-spacing:0!important;margin:18px 0 8px!important }
.cskip-adv__note { font-size:13px;color:var(--cs-muted);margin:12px 0 0!important }
.cskip-adv__list { margin:10px 0 0!important;padding:0 0 0 20px;font-size:14px;line-height:1.6;color:var(--cs-body) }
.cskip-adv__list li { margin-bottom:7px }
.cskip-adv__list li:last-child { margin-bottom:0 }
.cskip-adv__list strong { color:var(--cs-ink);font-weight:700 }
.cskip-apinote { display:flex;gap:12px;align-items:flex-start;margin-top:18px;background:var(--cs-indigo-soft);border:1px solid #d5daff;border-radius:var(--cs-radius-sm);padding:14px 16px }
.cskip-apinote svg { flex:none;width:20px;height:20px;color:var(--cs-indigo);margin-top:1px }
.cskip-apinote p { font-size:14px;color:var(--cs-body) }
.cskip-apinote a { color:var(--cs-indigo);font-weight:700 }
.cskip-apinote a:hover { text-decoration:underline }
@media (max-width:640px) { .cskip-adv { padding:16px } .cskip-method { padding:20px 18px 22px } .cskip-exsteps { grid-template-columns:1fr } .cskip-params { grid-template-columns:1fr } .cskip-step { padding-left:50px } .cskip-step__num { width:34px;height:34px;border-radius:10px;font-size:14px } .cskip-step:before { left:16px } .cskip-lang-tab { min-width:auto;flex:1 1 40%;font-size:13.5px } .cskip-block__file { display:none } .cskip-btn { flex:1 1 auto;justify-content:center } }
.cskip-adv__desc code { font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:var(--cs-surface)!important;border:1px solid var(--cs-line)!important;padding:1px 6px!important;border-radius:6px;color:var(--cs-indigo-ink)!important }
.cskip-method__desc code { font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;background:var(--cs-soft)!important;border:1px solid var(--cs-line)!important;padding:1px 6px!important;border-radius:6px;color:var(--cs-indigo-ink)!important }
.cskip-fmt { background:var(--cs-surface);border:1px solid var(--cs-line);border-radius:10px;padding:9px 12px;overflow-x:auto;scrollbar-width:thin;min-width:0 }
.cskip-fmt::-webkit-scrollbar { height:5px }
.cskip-fmt::-webkit-scrollbar-thumb { background:#cfd2e2;border-radius:3px }
.cskip-fmt code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:var(--cs-ink)!important;background:transparent!important;padding:0!important;border:0!important;white-space:nowrap }
.cskip-fmt code b { color:var(--cs-indigo-ink);font-weight:600 }

/* ---- Per-type overrides (the rules that differed page to page) ---- */
.cskip-tut--recaptcha_v3 .cskip-params { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px }
.cskip-tut--text .cskip-params { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px }
.cskip-tut--turnstile .cskip-adv { background:var(--cs-soft);border:1px solid var(--cs-line);border-radius:var(--cs-radius-sm);padding:20px 20px 22px;margin-bottom:4px;margin-top:46px }
.cskip-tut--turnstile .cskip-adv__label { font-size:13px!important;font-weight:700!important;color:var(--cs-ink)!important;letter-spacing:0!important;margin:16px 0 8px!important }
.cskip-tut--text .cskip-apinote { display:flex;gap:12px;align-items:flex-start;margin-top:18px;background:var(--cs-indigo-soft);border:1px solid #d5daff;border-radius:var(--cs-radius-sm);padding:14px 16px;margin-bottom:20px }

/* Signal icons (capskip-icons, 2026-09-24): the stroke step for each rendered
   size, so every line stays 1.3 to 1.5px: 2.25 at 14px, 2 at 17 and 18px. */
.cskip-copy svg,.cskip-mini svg,.cskip-param__label svg{--csi-sw:2.25}
.cskip-chip svg,.cskip-btn svg{--csi-sw:2}