/* =====================================================================
   SPOT THE TRAP — ONE DESIGN SYSTEM FOR EVERY CHALLENGE AND THE INDEX

   The site's interface is dark. Only simulated content (the fake message,
   page, call or sign) is light, always inside a device frame with a
   "Simulated" chip, so the light surface means "this is the fake thing".
   ===================================================================== */
:root{
  --stt-bg:#0B0B11;--stt-panel:#14141C;--stt-panel-2:#1B1B26;--stt-line:#2C2C3A;--stt-line-2:#3A3A4C;
  --stt-text:#ECECF2;--stt-muted:#A3A3B5;--stt-accent:#B98CFF;--stt-accent-ink:#D9C2FF;--stt-focus:#00D1FF;
  --stt-good:#3DDC97;--stt-bad:#FF6B7A;--stt-warn:#FFB020;
  --dev-bg:#F7F6F3;--dev-text:#1B2430;--dev-muted:#5B677D;--dev-line:#D9D6CC;--dev-accent:#6D28D9;
  --stt-r:10px;--stt-r-sm:8px;
  --stt-title:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;--stt-mono:'IBM Plex Mono',ui-monospace,monospace;
}
.stt-page [hidden],.stt-hub [hidden]{display:none!important}
.stt-page{--c:var(--stt-accent);max-width:980px;margin:0 auto;padding:20px 16px 56px;color:var(--stt-text);font-family:'IBM Plex Sans',system-ui,sans-serif;line-height:1.6}
.stt-page a{color:var(--stt-accent-ink)}
.stt-page p,.stt-page li,.stt-hub p{color:inherit;font-size:1rem;line-height:1.6;margin:0 0 12px}
.stt-page :focus-visible,.stt-hub :focus-visible{outline:3px solid var(--stt-focus);outline-offset:3px;border-radius:4px}
.stt-page h1,.stt-page h2,.stt-page h3{color:var(--stt-text);overflow-wrap:anywhere}
.stt-page h2:focus,.stt-page h1:focus{outline:none}
.stt-page h2:focus-visible,.stt-page h1:focus-visible{outline:2px solid var(--stt-focus);outline-offset:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Breadcrumb, progress, motion control ---------- */
.stt-crumbs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 14px;font-family:var(--stt-mono);font-size:.8rem;color:var(--stt-muted)}
.stt-crumbs nav ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.stt-crumbs nav li+li::before{content:'›';margin-inline-end:8px;color:var(--stt-line-2)}
[dir=rtl] .stt-crumbs nav li+li::before{content:'‹'}
.stt-crumbs a{color:var(--stt-muted);text-decoration:none;border-bottom:1px solid var(--stt-line-2)}
.stt-crumbs a:hover{color:var(--stt-text)}
.stt-crumbs [aria-current]{color:var(--c)}
.stt-progress{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.stt-crumbs nav{flex:1 1 auto}
.stt-progress li{width:14px;height:4px;border-radius:2px;background:var(--stt-line)}
.stt-progress li.is-past{background:var(--stt-line-2)}
.stt-progress li.is-now{background:var(--c)}
.stt-motion{display:flex;justify-content:flex-end}
.stt-motion label{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:.78rem;color:var(--stt-muted);cursor:pointer;font-family:'IBM Plex Sans',system-ui,sans-serif}
.stt-motion input{width:16px;height:16px;margin:0;accent-color:var(--stt-accent)}

/* ---------- The sheet ---------- */
.stt-sheet,.stt-page .paper{background:var(--stt-panel);border:1px solid var(--stt-line);border-top:3px solid var(--c);border-radius:var(--stt-r);padding:32px clamp(18px,4vw,40px);margin:0 0 18px;color:var(--stt-text);box-shadow:0 18px 48px #0006}
.stt-page .paper p,.stt-page .paper li{color:var(--stt-text)}
.stt-head{margin:0 0 22px}
.stt-num{font-family:var(--stt-mono);font-size:.82rem;letter-spacing:.06em;color:var(--c);margin:0 0 8px}
.stt-title,.stt-page h1.title{font-family:var(--stt-title);font-weight:700;font-size:clamp(1.85rem,4.4vw,2.6rem);letter-spacing:-.02em;line-height:1.12;margin:0 0 10px;color:var(--stt-text)}
.stt-sub{margin:0;font-size:1.06rem;color:var(--stt-muted);max-width:40em}
.stt-page h2{font-family:var(--stt-title);font-size:1.35rem;line-height:1.25;margin:28px 0 12px}
.stt-page h3{font-size:1.02rem;margin:20px 0 6px}
.stt-eyebrow,.pc-eyebrow{font-family:var(--stt-mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c);margin:0 0 6px}

/* ---------- Scenario: text beside the simulated device on wide screens ---------- */
.stt-scenario{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:0 0 8px}
@media(min-width:900px){.stt-scenario{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}.stt-scenario>.stt-scene-text{position:sticky;top:20px}}
.stt-scene-text p{margin:0 0 12px;font-size:1.04rem}
.stt-fiction,.pc-caption{font-size:.83rem;color:var(--stt-muted)}
.stt-note,.pc-account-note,.pc-object-response{border-inline-start:3px solid var(--c);padding:2px 0 2px 14px;margin:12px 0;color:var(--stt-text)}
[dir=rtl] .stt-note,[dir=rtl] .pc-account-note,[dir=rtl] .pc-object-response{padding:2px 14px 2px 0}

/* ---------- Device frame (simulated content, deliberately light) ---------- */
.stt-device,.pc-screen{position:relative;background:var(--dev-bg);color:var(--dev-text);border:1px solid var(--dev-line);border-radius:14px;margin:0;overflow:hidden;box-shadow:0 10px 30px #0005;overflow-wrap:anywhere}
.stt-page .stt-device p,.stt-page .stt-device li,.stt-page .pc-screen p{color:var(--dev-text)}
.stt-device-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#ECEAE4;border-bottom:1px solid var(--dev-line);min-height:44px}
.stt-device-icon{flex:none;width:22px;height:22px;color:var(--dev-accent)}
.stt-device-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stt-device-label,.pc-screen-label{flex:1;min-width:0;font-family:var(--stt-mono)!important;font-size:.86rem!important;font-weight:600;color:var(--dev-text)!important;margin:0!important;line-height:1.3!important}
.stt-page .stt-chip{flex:none;margin:0;line-height:1.4;font-family:var(--stt-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#4B3A80;background:#E4DCF7;border-radius:999px;padding:3px 9px}
.stt-device-body{padding:16px}
.pc-screen:not(.stt-device){padding:16px}
.stt-device-body>:first-child{margin-top:0}
.stt-device-body p{margin:0 0 10px}
.pc-message p{white-space:pre-line}
.stt-bubbles{display:flex;flex-direction:column;gap:10px}
.stt-bubble{background:#fff;border:1px solid var(--dev-line);border-radius:4px 14px 14px 14px;padding:10px 14px;max-width:34em;color:var(--dev-text)}
[dir=rtl] .stt-bubble{border-radius:14px 4px 14px 14px}
.stt-bubble p{margin:0}
.stt-from{font-weight:600;font-size:.86rem;color:var(--dev-muted);margin:0 0 4px!important}
.stt-typing{display:inline-flex;gap:4px;padding:10px 14px;background:#fff;border:1px solid var(--dev-line);border-radius:14px;width:max-content}
.stt-typing i{width:6px;height:6px;border-radius:50%;background:#9AA3B5}
.stt-device .sign{border-radius:3px;transition:background-color .3s,box-shadow .3s}
.stt-message.revealed .sign{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:#B4232F}
.stt-device .sign.is-focus{background:#FFE7A8;box-shadow:0 0 0 2px #FFE7A8}
.sign-n{font-family:var(--stt-mono);font-size:.7rem;font-weight:700;margin-inline-start:2px;color:#B4232F}
.pc-receipt{background:#fff;border:1px solid var(--dev-line);border-radius:10px;max-width:300px;padding:18px;margin:14px 0;box-shadow:0 3px 12px #0000000f}
.pc-receipt .pc-amount{font-family:var(--stt-mono);font-size:2rem;font-weight:700;margin:12px 0;direction:ltr;unicode-bidi:isolate}
.pc-receipt .pc-caption{color:var(--dev-muted)}
.pc-device-caption,.stt-device .pc-caption{color:var(--dev-muted)!important}
.pc-qr{display:grid;grid-template-columns:repeat(6,1fr);width:96px;height:96px;padding:8px;background:#fff;border:2px solid var(--dev-line);gap:3px;position:relative;overflow:hidden}
.pc-qr i{display:block}.pc-qr .pc-dark{background:#263046}
.pc-mock-controls{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.pc-mock-control{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:1px solid #B9B4A6;padding:8px 14px;border-radius:8px;font:inherit;font-weight:600;background:#fff;color:var(--dev-text);cursor:pointer}
.pc-mock-control::after{content:'';width:8px;height:8px;border:1.5px dashed #8A8576;border-radius:2px}
.pc-mock-control:hover{background:#F2EFE8}
.pc-mock-control[aria-expanded=true]{border-color:var(--dev-accent);box-shadow:0 0 0 1px var(--dev-accent)}
.stt-device :focus-visible{outline:3px solid #1D4ED8;outline-offset:2px}
.stt-page .stt-sim-note{margin:10px 0 0!important;padding:10px 12px;border-radius:8px;background:#EEE8FB;color:#2E2357!important;font-size:.9rem;border:1px dashed #8D74D6}
.pc-warning .stt-device-bar{background:#FCEBD4}
.pc-voice .stt-voice{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.stt-voice-play{flex:none;width:34px;height:34px;border-radius:50%;background:#2A3448;position:relative}
.stt-voice-play::after{content:'';position:absolute;left:13px;top:10px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
.stt-voice-wave{display:flex;align-items:center;gap:3px;height:30px;flex:1;min-width:0;overflow:hidden}
.stt-voice-wave i{flex:none;width:3px;border-radius:2px;background:#9AA3B5;transform-origin:center}

/* Stage A: arrival. Hidden only when scripting runs and motion is welcome;
   a fail-safe shows everything after three seconds if the script never
   arrives. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  html:not(.stt-still) [data-intro] [data-arrive]:not(.is-arrived){opacity:0;transform:translateY(8px);animation:stt-failsafe .01s 3s forwards}
  html:not(.stt-still) [data-intro].is-live [data-arrive]:not(.is-arrived){animation:none}
  html:not(.stt-still) [data-intro].is-live [data-arrive]{transition:opacity .42s ease,transform .42s cubic-bezier(.2,.7,.2,1)}
  html:not(.stt-still) [data-intro="scan"] .pc-qr::after{content:'';position:absolute;left:0;right:0;height:3px;top:0;background:#00D1FF;box-shadow:0 0 10px #00D1FF;opacity:0;animation:stt-scan 1.6s ease-in-out .5s 1 both}
  html:not(.stt-still) [data-intro="voice"] .stt-voice-wave i{animation:stt-wave 1.8s ease-in-out .4s 1 both}
  html:not(.stt-still) [data-intro="web"] .stt-loading i{animation:stt-load 1.4s ease-out .2s 1 both}
  html:not(.stt-still) [data-intro="call"] .stt-call-ring{animation:stt-ring 1.2s ease-out .1s 2 both}
}
@keyframes stt-failsafe{to{opacity:1;transform:none}}
@keyframes stt-scan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:calc(100% - 3px);opacity:0}}
@keyframes stt-wave{0%{transform:scaleY(.3);background:#9AA3B5}50%{background:#6D28D9}100%{transform:scaleY(1);background:#9AA3B5}}
@keyframes stt-load{from{width:0}to{width:68%}}
@keyframes stt-ring{0%{box-shadow:0 0 0 0 #6D28D966}100%{box-shadow:0 0 0 14px #6D28D900}}
.stt-typing{transition:opacity .3s}
[data-intro].is-done .stt-typing{display:none}
.stt-call{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 0 12px;border-radius:12px;background:#E9EEF7;border:1px solid #CBD5E6}
.stt-call-ring{flex:none;width:30px;height:30px;border-radius:50%;background:#2F7D55;display:grid;place-items:center}
.stt-call-ring svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2}
.stt-call-bars{display:flex;gap:5px}.stt-call-bars i{width:44px;height:6px;border-radius:3px;background:#B8C2D6}.stt-call-bars i+i{width:28px}
.stt-loading{height:6px;border-radius:3px;background:#E2DFD6;margin:0 0 14px;overflow:hidden}
.stt-loading i{display:block;height:100%;width:68%;background:#8D74D6;border-radius:3px}

/* ---------- Question panel ---------- */
.stt-page fieldset{border:0;padding:0;margin:26px 0 16px;min-width:0}
.stt-page legend{font-family:var(--stt-title);font-size:1.25rem;font-weight:700;color:var(--stt-text);margin:0 0 14px;padding:0}
.stt-choices,.pc-choices{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:720px){.stt-choices,.pc-choices{grid-template-columns:1fr 1fr}}
.stt-choice,.pc-choice{position:relative;display:flex;align-items:flex-start;gap:12px;min-height:64px;padding:14px 16px;border:1px solid var(--stt-line-2);border-radius:var(--stt-r-sm);background:var(--stt-panel-2);color:var(--stt-text);cursor:pointer;line-height:1.5;overflow-wrap:anywhere;transition:border-color .15s,background-color .15s}
.stt-choice:hover,.pc-choice:hover{border-color:#5B5B78;background:#20202D}
.stt-choice input,.pc-choice input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--stt-accent)}
.stt-choice:has(input:checked),.pc-choice:has(input:checked){border-color:var(--stt-accent);background:#241C38;box-shadow:inset 0 0 0 1px var(--stt-accent)}
.stt-choice:has(input:checked)::after,.pc-choice:has(input:checked)::after{content:'✓';position:absolute;top:8px;inset-inline-end:10px;font-size:.8rem;font-weight:700;color:var(--stt-accent-ink)}
.stt-choice:focus-within,.pc-choice:focus-within{outline:3px solid var(--stt-focus);outline-offset:2px}
.stt-choice input:focus-visible,.pc-choice input:focus-visible{outline:none}
.stt-key{font-family:var(--stt-mono);font-weight:600;color:var(--stt-accent-ink)}
.stt-need,[data-validation],[data-followup-validation]{min-height:1.4em;margin:8px 0 0;color:var(--stt-warn)}
[data-validation],[data-followup-validation]{border-inline-start:3px solid var(--stt-warn);padding-inline-start:12px}

/* ---------- Buttons and actions ---------- */
.stt-actions,.pc-actions,.pc-objects,.stt-reveal-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:18px 0}
.stt-button,.stt-btn,.pc-button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:46px;max-width:100%;padding:11px 20px;border:1.5px solid var(--stt-accent);border-radius:var(--stt-r-sm);background:transparent;color:var(--stt-text)!important;font:inherit;font-weight:600;text-align:center;text-decoration:none;cursor:pointer;white-space:normal;overflow-wrap:anywhere;transition:background-color .15s}
.stt-button:hover,.stt-btn:hover,.pc-button:hover{background:#B98CFF1F}
.stt-primary,#stt-reveal,.pc-button[data-action=reveal],.pc-button[data-action=followup-reveal]{background:var(--stt-accent);border-color:var(--stt-accent);color:#160B2A!important}
.stt-primary:hover,#stt-reveal:hover,.pc-button[data-action=reveal]:hover,.pc-button[data-action=followup-reveal]:hover{background:#CBA9FF}
.stt-button:disabled,.pc-button:disabled{opacity:.45;cursor:not-allowed}
.pc-objects button[aria-expanded=true]{background:var(--stt-accent);color:#160B2A!important}
@media(max-width:560px){.stt-actions .stt-button,.pc-actions .pc-button,.pc-objects .pc-button,.stt-reveal-row .stt-btn{width:100%}}

/* ---------- Result panel, dark ---------- */
.stt-page .answer-result{--answer-ink:#7FE7B7;--answer-line:#2F7D5A;--answer-fill:#0F2219;background:var(--answer-fill)!important;border:1px solid var(--answer-line)!important;border-inline-start-width:5px!important;color:var(--stt-text)!important;border-radius:var(--stt-r)!important}
.stt-page .answer-result.is-wrong{--answer-ink:#FF9AA4;--answer-line:#8C3A45;--answer-fill:#26131A}
.stt-page .answer-result p,.stt-page .answer-result li{color:var(--stt-text)!important}
.stt-page .answer-result h3:not(.answer-title){color:var(--answer-ink)!important}
.stt-page .answer-result .answer-title{color:var(--answer-ink)!important}
.stt-page .stt-verdict.is-right,.stt-page .stt-verdict.is-wrong{color:var(--stt-text)}

/* ---------- Disclosures ---------- */
.stt-page details,.stt-more{border:1px solid var(--stt-line);border-radius:var(--stt-r-sm);background:var(--stt-panel-2);padding:0 16px;margin:10px 0}
.stt-page summary{display:flex;align-items:center;min-height:48px;font-weight:600;cursor:pointer;color:var(--stt-text);list-style:none}
.stt-page summary::-webkit-details-marker{display:none}
.stt-page summary::before{content:'';flex:none;width:8px;height:8px;margin-inline-end:12px;border-right:2px solid var(--stt-accent);border-bottom:2px solid var(--stt-accent);transform:rotate(-45deg);transition:transform .2s}
[dir=rtl] .stt-page summary::before{transform:rotate(135deg)}
.stt-page details[open]>summary::before{transform:rotate(45deg)}
.stt-page details[open]{padding-bottom:12px}
.stt-options,.stt-details{padding-inline-start:20px}
.stt-options li,.stt-details li{margin-bottom:8px}
.pc-all-answers{list-style:none;padding:0;margin:0}
.pc-all-answers li{border-top:1px solid var(--stt-line);padding:12px 0}
.pc-all-answers h3{font-size:1rem;margin:0 0 6px}
.stt-review{font-family:var(--stt-mono);font-size:.78rem;color:var(--stt-muted)}

/* ---------- Stage B: how the trap works ---------- */
.stt-scene{margin:22px 0 10px;padding:18px;border:1px solid var(--stt-line);border-radius:var(--stt-r);background:linear-gradient(180deg,#151520,#111118)}
.stt-scene-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.stt-scene-head h3{margin:0!important;font-family:var(--stt-title);font-size:1.12rem!important;color:var(--stt-text)!important}
.stt-scene-stage{position:relative;aspect-ratio:9/5;width:100%;max-width:640px;margin:0 auto;border-radius:var(--stt-r-sm);background:#0D0D14;border:1px solid var(--stt-line)}
.stt-scene-art{display:block;width:100%;height:100%}
.stt-scene-controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 4px}
.stt-scene-controls .stt-button{min-height:40px;padding:8px 14px;font-size:.92rem}
.stt-scene-controls [aria-pressed=true] .l-play,.stt-scene-controls [aria-pressed=false] .l-pause{display:none}
.stt-scene-controls svg{width:14px;height:14px;fill:currentColor}
.stt-scene-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.stt-scene-steps li>p{margin:0;color:inherit}
.stt-scene-steps li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:var(--stt-r-sm);background:#1A1A25;border:1px solid transparent;color:var(--stt-muted)!important;line-height:1.5}
.stt-scene-steps li[aria-current]{color:var(--stt-text)!important;border-color:var(--c);background:#1E1A2C}
.stt-scene-n{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-family:var(--stt-mono);font-size:.78rem;font-weight:700;background:var(--stt-line);color:var(--stt-text)}
.stt-scene-steps li[aria-current] .stt-scene-n{background:var(--c);color:#0B0B11}
.stt-scene:not(.is-live) .stt-scene-controls{display:none}
/* SVG vocabulary: one symbol language for every scene */
.stt-scene-art{overflow:visible}
.stt-scene-art .s-guide{fill:none;stroke:none}
.stt-scene-art .s-panel{fill:#181824;stroke:#2E2E40;stroke-width:1.2}
.stt-scene-art .s-device{fill:#1F1F2C;stroke:#4A4A63;stroke-width:1.4}
.stt-scene-art .s-screen{fill:#151520}
.stt-scene-art .s-paper{fill:#F1EFEA;stroke:#CFCBBF}.stt-scene-art .s-paper2{fill:#DCE6F5;stroke:#9DB3D6}
.stt-scene-art .s-line{fill:none;stroke:#4A4A63;stroke-width:1.6;stroke-linecap:round}
.stt-scene-art .s-dash{stroke-dasharray:6 6}
.stt-scene-art .s-flow{fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round}
.stt-scene-art .s-flow.s-bad{stroke:var(--stt-bad)}.stt-scene-art .s-flow.s-good{stroke:var(--stt-good)}
.stt-scene-art .s-head{fill:context-stroke}
.stt-scene-art .s-loop{fill:none;stroke:var(--stt-bad);stroke-width:2;stroke-dasharray:4 4}
.stt-scene-art .s-pip{fill:var(--stt-bad);filter:drop-shadow(0 0 3px #FF6B7A)}
.stt-scene-art .s-badge circle{fill:var(--c);stroke:#0D0D14;stroke-width:2}
.stt-scene-art .s-badge text{font:700 11px var(--stt-mono);fill:#0B0B11}
.stt-scene-art .s-num{font:600 12px var(--stt-mono);fill:var(--stt-text)}.stt-scene-art .s-small{font-size:9px}
.stt-scene-art .s-tiny{font:700 7px var(--stt-mono);fill:#5B3D00}
.stt-scene-art .s-big{font:700 20px var(--stt-title);fill:var(--stt-text)}
.stt-scene-art .s-big.s-real{fill:var(--stt-good)}.stt-scene-art .s-big.s-dark{fill:#1B2430}
.stt-scene-art .s-neq{font:700 26px var(--stt-title);fill:var(--stt-bad)}
.stt-scene-art .s-mark{font:700 12px var(--stt-mono);fill:#0B0B11}.stt-scene-art .s-qmark{font-size:20px;fill:var(--stt-warn)}
.stt-scene-art .s-unknown{fill:var(--stt-warn)}
.stt-scene-art .s-bubble{fill:#2A2A3A;stroke:#3A3A52}
.stt-scene-art .s-bar,.stt-scene-art .s-field{fill:#2A2A3A}
.stt-scene-art .s-dot{fill:#4A4A63}
.stt-scene-art .s-chart{fill:#8C7CE0}
.stt-scene-art .s-bait{fill:#221B38;stroke:#8C7CE0;stroke-width:1.6}
.stt-scene-art .s-shine{fill:#fff;opacity:.16}
.stt-scene-art .s-ghost circle{fill:none;stroke:#B98CFF;stroke-width:1.4;stroke-dasharray:3 2}
.stt-scene-art .s-rod{fill:none;stroke:#8A7350;stroke-width:3;stroke-linecap:round}
.stt-scene-art .s-fishline{fill:none;stroke:#9AA3B8;stroke-width:1;stroke-dasharray:2 0}
.stt-scene-art .s-hook path{fill:none;stroke:#D7DEEC;stroke-width:2.6;stroke-linecap:round}
.stt-scene-art .s-hook-small path{stroke:var(--stt-bad);stroke-width:2}
.stt-scene-art .s-wallet rect{fill:#1C2A24;stroke:var(--stt-good);stroke-width:1.6}
.stt-scene-art .s-coin circle{fill:#FFCF5A;stroke:#B98A1D;stroke-width:1.2}.stt-scene-art .s-coin path{stroke:#7A5710;stroke-width:1.4}
.stt-scene-art .s-coinbig{fill:#FFCF5A;stroke:#B98A1D;stroke-width:1.4}
.stt-scene-art .s-lock path{stroke:var(--stt-bad);stroke-width:2.4}.stt-scene-art .s-lock rect{fill:var(--stt-bad)}
.stt-scene-art .s-clock circle{fill:#1A1A25;stroke:var(--stt-warn);stroke-width:2.2}.stt-scene-art .s-clock path{stroke:var(--stt-warn);stroke-width:2.2;stroke-linecap:round}
.stt-scene-art .s-clock .s-tick{stroke-width:1.4;opacity:.7}.stt-scene-art .s-clock .s-hub{fill:var(--stt-warn);stroke:none}
.stt-scene-art .s-glass path{fill:none;stroke:var(--stt-warn);stroke-width:2;stroke-linecap:round}
.stt-scene-art .s-sand{fill:#FFCF5A}
.stt-scene-art .s-urgent{fill:none;stroke:var(--stt-bad);stroke-width:1.6;stroke-dasharray:3 9;opacity:.8}
.stt-scene-art .s-person circle,.stt-scene-art .s-person path{fill:#8C9BB8}
.stt-scene-art .s-you circle,.stt-scene-art .s-you path{fill:#6FB7FF}
.stt-scene-art .s-staff circle,.stt-scene-art .s-staff path{fill:#7FD1AE}
.stt-scene-art .s-masked circle,.stt-scene-art .s-masked path{fill:#5A3340}.stt-scene-art .s-masked rect{fill:var(--stt-bad)}
.stt-scene-art .s-mask path{fill:var(--stt-bad);stroke:#FF9AA4;stroke-width:1}.stt-scene-art .s-mask .s-eye{fill:#0D0D14}
.stt-scene-art .s-tag{fill:#2B4C7E;stroke:#6E9AE0}
.stt-scene-art .s-ringwave{fill:none;stroke:#6E9AE0;stroke-width:1.6;opacity:.7}.stt-scene-art .s-goodring{stroke:var(--stt-good)}
.stt-scene-art .s-vault rect{fill:#1C2A24;stroke:var(--stt-good);stroke-width:1.6}.stt-scene-art .s-vault circle,.stt-scene-art .s-vault path{fill:none;stroke:var(--stt-good);stroke-width:1.6}
.stt-scene-art .s-trap{stroke:var(--stt-bad)}
.stt-scene-art .s-building path{fill:none;stroke:var(--stt-good);stroke-width:1.8;stroke-linejoin:round}
.stt-scene-art .s-wall{fill:var(--stt-bad)}
.stt-scene-art .s-buzz{fill:none;stroke:var(--stt-warn);stroke-width:2;stroke-linecap:round}
.stt-scene-art .s-string{fill:none;stroke:#B98CFF;stroke-width:1.2;stroke-dasharray:3 3}
.stt-scene-art .s-cross{stroke:var(--stt-bad);stroke-width:2.6;stroke-linecap:round}
.stt-scene-art .s-check{fill:none;stroke:var(--stt-good);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.stt-scene-art .s-good-fill{fill:#163428}
.stt-scene-art .s-shield path{fill:#1B2A44;stroke:#6E9AE0;stroke-width:1.8}
.stt-scene-art .s-shield-good path{fill:#163428;stroke:var(--stt-good);stroke-width:1.8}
.stt-scene-art .s-boundary{fill:none;stroke:#00D1FF;stroke-width:1.4;stroke-dasharray:6 5}
.stt-scene-art .s-checkbox{fill:#fff;stroke:#9AA3B5}
.stt-scene-art .s-doc{fill:#F1EFEA}.stt-scene-art .s-docline{stroke:#9AA3B5;stroke-width:1.4}
.stt-scene-art .s-keycap{fill:#2A2A3A;stroke:#6A6A88}.stt-scene-art .s-key{font:700 12px var(--stt-mono);fill:var(--stt-text)}
.stt-scene-art .s-termbox{fill:#090C10;stroke:var(--stt-bad);stroke-width:1.6}
.stt-scene-art .s-prompt{font:700 12px var(--stt-mono);fill:var(--stt-good)}.stt-scene-art .s-cursor{fill:var(--stt-good)}
.stt-scene-art .s-cmd{fill:var(--stt-bad)}.stt-scene-art .s-cmdline{fill:none;stroke:var(--stt-bad);stroke-width:3;stroke-linecap:round}
.stt-scene-art .s-gear circle,.stt-scene-art .s-gear path{fill:none;stroke:var(--stt-bad);stroke-width:2;stroke-linecap:round}
.stt-scene-art .s-clipb rect{fill:#2A2A3A;stroke:#6A6A88}
.stt-scene-art .s-chain{fill:none;stroke:#B0B6C6;stroke-width:3;stroke-dasharray:6 3;stroke-linecap:round}
.stt-scene-art .s-mail rect,.stt-scene-art .s-mail path{fill:#1F1F2C;stroke:#7C8BA8;stroke-width:1.6;stroke-linejoin:round}
.stt-scene-art .s-brief rect{fill:#6B4A2A;stroke:#D9A35B;stroke-width:1.4}.stt-scene-art .s-brief path{fill:none;stroke:#D9A35B;stroke-width:1.8}
.stt-scene-art .s-star{fill:#FFCF5A}
.stt-scene-art .s-dots{font:700 12px var(--stt-mono);fill:var(--stt-text)}
.stt-scene-art .s-keyicon circle,.stt-scene-art .s-keyicon path{fill:none;stroke:#FFCF5A;stroke-width:2;stroke-linecap:round}
.stt-scene-art .s-file{fill:#F1EFEA}.stt-scene-art .s-clip-icon{fill:none;stroke:#6A6A88;stroke-width:1.6}
.stt-scene-art .s-bug ellipse{fill:var(--stt-bad)}.stt-scene-art .s-bug path{stroke:var(--stt-bad);stroke-width:1.4;stroke-linecap:round}
.stt-scene-art .s-laptop rect,.stt-scene-art .s-laptop path{fill:#1F1F2C;stroke:#7C8BA8;stroke-width:1.6}
.stt-scene-art .s-card rect{fill:#2B4C7E}.stt-scene-art .s-card .s-stripe{fill:#14223A}.stt-scene-art .s-card .s-chip{fill:#FFCF5A}
.stt-scene-art .s-digit{fill:#6E9AE0}
.stt-scene-art .s-sim{fill:none;stroke:var(--stt-bad);stroke-width:1.6;stroke-dasharray:3 3}
.stt-scene-art .s-parcel rect,.stt-scene-art .s-parcel path{fill:#B98552;stroke:#7B5530;stroke-width:1.2}
.stt-scene-art .s-order{fill:#1C2A24;stroke:var(--stt-good);stroke-width:1.6}.stt-scene-art .s-orderline{stroke:var(--stt-good);stroke-width:1.6;stroke-linecap:round}
.stt-scene-art .s-road{fill:none;stroke:#3A3A52;stroke-width:2;stroke-dasharray:10 6}
.stt-scene-art .s-truck rect,.stt-scene-art .s-truck path{fill:#163428;stroke:var(--stt-good);stroke-width:1.4}.stt-scene-art .s-truck circle{fill:#0D0D14;stroke:var(--stt-good);stroke-width:1.4}
.stt-scene-art .s-divider{fill:none;stroke:#4A4A63;stroke-width:1.6;stroke-dasharray:4 4}
.stt-scene-art .s-pin-bad{fill:var(--stt-bad)}.stt-scene-art .s-pin-good{fill:var(--stt-good)}
.stt-scene-art .s-pixels rect{fill:none;stroke:var(--stt-bad);stroke-width:.6;opacity:.75}
.stt-scene-art .s-edit{fill:var(--stt-warn)}
.stt-scene-art .s-dupe{fill:none;stroke:#B98CFF;stroke-width:1.4;stroke-dasharray:5 4}
.stt-scene-art .s-empty{fill:none;stroke:var(--stt-bad);stroke-width:1.4;stroke-dasharray:4 3}
.stt-scene-art .s-empty-glow{fill:#FF6B7A1A;stroke:none}
.stt-scene-art .s-scanbar{fill:#00D1FF;opacity:.6}
.stt-scene-art .s-wave{fill:#8C9BB8}.stt-scene-art .s-wave.s-copy{fill:var(--stt-bad)}
.stt-scene-art .s-contact rect{fill:#163428;stroke:var(--stt-good);stroke-width:1.4}.stt-scene-art .s-contact circle{fill:#7FD1AE}.stt-scene-art .s-contact path{stroke:var(--stt-good);stroke-width:1.6;stroke-linecap:round}
.stt-scene-art .s-warnbox{fill:#3A1E22;stroke:var(--stt-bad);stroke-width:1.4}
.stt-scene-art .s-warnicon{fill:var(--stt-warn)}.stt-scene-art .s-warnmark{stroke:#3A1E22;stroke-width:2.4;stroke-linecap:round}
.stt-scene-art .s-wbtn{fill:#5A2A30;stroke:#FF9AA4;stroke-width:1}
.stt-scene-art .s-progressline{fill:none;stroke:var(--stt-warn);stroke-width:6;stroke-linecap:round}
.stt-scene-art .s-scope{fill:none;stroke:#00D1FF;stroke-width:2}
.stt-scene-art .s-hand path{fill:#C9A587;stroke:#8A6B52;stroke-width:1}
.stt-scene-art .s-head path{fill:none;stroke:#FF9AA4;stroke-width:2}.stt-scene-art .s-head rect{fill:#FF9AA4}
.stt-scene-art .s-sign{fill:#1F2C46;stroke:#6E9AE0;stroke-width:1.4}
.stt-scene-art .s-plogo{fill:#2F6FD6;stroke:#9DC0FF;stroke-width:1.2}.stt-scene-art .s-plogo-t{font:700 13px var(--stt-title);fill:#fff}
.stt-scene-art .s-qr{fill:#263046}.stt-scene-art .s-qr2{fill:#2F6FD6}
.stt-scene-art .s-beam{fill:#00D1FF;filter:drop-shadow(0 0 4px #00D1FF)}
.stt-scene-art .s-swirl{fill:none;stroke:var(--stt-bad);stroke-width:2;stroke-linecap:round}
.stt-scene-art .s-buoy circle{fill:#FF6B7A;stroke:#fff;stroke-width:1.2}.stt-scene-art .s-buoy .s-buoy-hole{fill:#0D0D14}.stt-scene-art .s-buoy path{stroke:#fff;stroke-width:3}
/* Beats: hidden until reached, once the scene is live. */
.stt-scene.is-live .sb{opacity:0;transform:translateY(4px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.stt-scene.is-live .sb.is-on{opacity:1;transform:none}
.stt-scene.is-live .sb.is-on .s-badge circle{animation:stt-pop .45s ease-out both}
@keyframes stt-pop{0%{r:3}70%{r:11}100%{r:9}}
html.stt-still .stt-scene *,html.stt-still [data-intro] *{transition:none!important;animation:none!important}

/* ---------- Pager and privacy ---------- */
.stt-pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:10px;margin:18px 0 10px}
.stt-pager a{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:56px;padding:10px 14px;border:1px solid var(--stt-line);border-radius:var(--stt-r-sm);background:var(--stt-panel);color:var(--stt-text);text-decoration:none;line-height:1.3}
.stt-pager a:hover{border-color:var(--stt-line-2);background:var(--stt-panel-2)}
.stt-pager .stt-pager-next{text-align:end;align-items:flex-end}
.stt-pager .stt-pager-all{align-items:center;justify-content:center;font-weight:600}
.stt-pager .stt-pager-n{font-family:var(--stt-mono);font-size:.74rem;color:var(--stt-muted)}
.stt-pager-prev .stt-pager-n::before{content:'← '}.stt-pager-next .stt-pager-n::after{content:' →'}
[dir=rtl] .stt-pager-prev .stt-pager-n::before{content:'→ '}[dir=rtl] .stt-pager-next .stt-pager-n::after{content:' ←'}
.stt-pager .stt-pager-t{font-weight:600;overflow-wrap:anywhere}
@media(max-width:620px){.stt-pager{grid-template-columns:1fr 1fr}.stt-pager .stt-pager-all{grid-column:1/-1;grid-row:2}}
.stt-privacy,.pc-privacy{text-align:center;font-size:.83rem;color:var(--stt-muted);margin:18px 0 0}
.stt-page .stt-share{border-top-color:var(--stt-line)}
.stt-share-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.stt-learn{margin:22px 0 0}.stt-learn-note{font-size:.84rem;color:var(--stt-muted)}
.pc-next{font-size:1.2rem;font-weight:700}
.pc-zone{border:1px solid var(--stt-line);border-radius:var(--stt-r-sm);padding:16px;margin:12px 0}

/* ---------- Index ---------- */
.stt-hub{--c:var(--stt-accent);max-width:940px;margin:0 auto;padding:40px 16px 64px;color:var(--stt-text)}
.stt-hub h1{font-family:var(--stt-title);color:var(--stt-text);font-size:clamp(2rem,5vw,3rem);margin:0 0 12px;text-align:center;letter-spacing:-.02em}
.stt-hub .stt-intro{text-align:center;color:var(--stt-muted);max-width:620px;margin:0 auto 10px}.stt-intro strong{color:var(--stt-text)}
.stt-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:30px;list-style:none;padding:0}
.stt-grid>li{display:flex}
@media(min-width:680px){.stt-grid{grid-template-columns:1fr 1fr}}
.stt-tile{position:relative;display:grid;flex:1;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr;gap:8px 14px;min-height:178px;padding:20px 22px;background:var(--stt-panel);border:1px solid var(--stt-line);border-top:3px solid var(--c);border-radius:var(--stt-r);color:var(--stt-text);text-decoration:none;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.stt-tile:hover,.stt-tile:focus-visible{transform:translateY(-2px);border-color:var(--c);background:var(--stt-panel-2)}
.stt-n{font-family:var(--stt-mono);color:var(--c);font-size:.84rem;align-self:center}
.stt-glyph{grid-column:2;grid-row:1;width:44px;height:42px;fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.stt-t{grid-column:1/-1;grid-row:2;align-self:start;font-family:var(--stt-title);font-size:1.3rem;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.stt-invitation{grid-column:1;grid-row:3;font-size:.95rem;line-height:1.5;color:var(--stt-muted);align-self:end}
.stt-go{grid-column:2;grid-row:3;align-self:end;font-size:1.4rem;color:var(--c);transition:transform .18s}
[dir=rtl] .stt-go{transform:scaleX(-1)}
.stt-tile:hover .stt-go,.stt-tile:focus-visible .stt-go{transform:translateX(3px)}
.stt-glyph .g-move{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.stt-tile:hover .g-move,.stt-tile:focus-visible .g-move{transform:translate(2px,-2px)}}
.stt-tile:focus-visible .g-move{transform:translate(2px,-2px)}
.stt-related{margin:34px auto 0;max-width:720px}
.stt-related h2{font-family:var(--stt-title);font-size:1rem;color:var(--stt-muted);text-align:center;font-weight:600;margin:0 0 12px}
.stt-related .stt-tile{min-height:0;grid-template-rows:auto;align-items:center}.stt-related .stt-t{grid-row:1;grid-column:1}.stt-related .stt-go{grid-row:1}
.stt-hub .stt-hub-note{margin:30px auto 0;text-align:center;font-size:.84rem;color:var(--stt-muted)}
.stt-hub-note a{color:var(--stt-accent-ink)}
@media(prefers-reduced-motion:reduce){.stt-tile,.stt-go,.stt-glyph .g-move,.stt-choice,.pc-choice{transition:none!important}.stt-tile:hover,.stt-tile:focus-visible{transform:none}.stt-tile:hover .g-move,.stt-tile:focus-visible .g-move{transform:none}}

/* ---------- Compact header shared by the challenge pages ---------- */
header.top{flex-wrap:nowrap!important}
@media(max-width:480px){
  header.top{padding:12px 14px!important;gap:10px!important}
  header.top .brand{min-width:0}
  header.top .wordmark{font-size:1.05rem}
  .lang-menu>summary{padding:8px 10px!important;gap:7px!important;min-height:44px}
  .lang-menu>summary .lang-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .lang-menu>summary::after{margin-inline-start:2px}
  .lang-menu .lang-drop{position:absolute!important;inset-inline-end:0;inset-inline-start:auto;margin-top:0;width:min(320px,calc(100vw - 28px))}
}

@media print{[data-arrive]{opacity:1!important;transform:none!important}.stt-scene .sb{opacity:1!important}.stt-page .stt-scene-steps li[hidden]{display:flex!important}.stt-scene-controls,.stt-motion{display:none!important}}

.stt-trick-link{text-align:center;margin:14px 0 0;font-size:.95rem}