:root{
    color-scheme: dark;
    --bg:#05070b; --ink:#fff; --dim:rgba(255,255,255,.60); --faint:rgba(255,255,255,.60);
    --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
    --cyan:#0095E0; --pink:#f80868; --green:#16A34A;
    --field-border:rgba(255,255,255,.36); --error:#ff6d96; --fact:#e0f4ff; --grid-line:rgba(255,255,255,.05);
    --mono:"JetBrains Mono",ui-monospace,monospace;
    --disp:"Barlow Condensed",system-ui,sans-serif;
    --body:"Space Grotesk",system-ui,sans-serif;
  }
  /* Light theme: neon accents are illegible on white, so they darken to passing
     values; the wordmark + RF monogram are logotypes (contrast-exempt) and keep
     their brand colors. Dark-native effects (glow, vignette, particles) soften. */
  html[data-theme="light"]{
    color-scheme: light;
    --bg:#eef1f6; --ink:#0A0E15; --dim:rgba(10,14,21,.74); --faint:rgba(10,14,21,.6);
    --line:rgba(10,14,21,.12); --line-2:rgba(10,14,21,.22);
    --cyan:#0a63a0; --pink:#c30a59; --green:#0a7344;
    --field-border:rgba(10,14,21,.45); --error:#c30a59; --fact:#0b3a5e; --grid-line:rgba(10,14,21,.05);
  }
  *{box-sizing:border-box}
  /* Paint the theme background on the page canvas (html) so it covers the FULL
     document in both themes. Previously body was a scroll container
     (height:100% + overflow-y:auto), so its background only painted the first
     viewport and the rest showed the old/base color until a scroll forced a
     repaint (the "half black on scroll / wrong color until it updates" bug). */
  /* The ambient glow lives on the ROOT background (propagated to the viewport
     canvas), which is the one layer iOS Safari paints edge-to-edge UNDER the status
     bar and home indicator. A position:fixed glow layer gets clamped to the
     safe-area box on iOS, leaving flat strips top+bottom (the "hard edge / black
     border"). background-attachment:fixed keeps the glow anchored to the viewport
     while the page scrolls. */
  html{min-height:100%; overflow-x:hidden; transition:background-color .35s ease;
    background-color:var(--bg);
    background-image:radial-gradient(42% 50% at 80% 16%, rgba(0,149,224,.20), transparent 60%),radial-gradient(44% 46% at 16% 92%, rgba(248,8,104,.15), transparent 60%);
    background-attachment:fixed; background-repeat:no-repeat}
  html,body{margin:0}
  body{background:var(--bg); color:var(--ink); font-family:var(--body); -webkit-font-smoothing:antialiased; min-height:100svh; transition:background-color .35s ease, color .35s ease}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit}

  .amb{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
  /* glow moved to the html canvas (above) so it fills the iOS safe areas; this
     element is retired but kept in markup harmlessly. */
  .amb .glow{display:none}
  .amb .grid{position:absolute; inset:0;
    background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
    background-size:56px 56px,56px 56px;
    -webkit-mask-image:radial-gradient(150% 130% at 50% 48%, #000 45%, transparent 100%);
    mask-image:radial-gradient(150% 130% at 50% 48%, #000 45%, transparent 100%)}
  .amb .fx{position:absolute; inset:0; width:100%; height:100%}
  .grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .vignette{position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(140% 120% at 50% 42%, transparent 64%, rgba(0,0,0,.55) 100%)}
  /* iOS safe-area coverage. A position:fixed; inset:0 layer is clamped to the
     SAFE-AREA box on iOS Safari (even with viewport-fit=cover), so the status-bar
     /notch strip and the home-indicator strip render as flat body background while
     the content area below carries the full glow + grid + constellation. That seam
     is the "hard edge / black border" reported at the top and bottom on mobile.
     Pull every full-screen fixed layer out past its safe-area insets so the ambient
     background covers the WHOLE screen. env() resolves to 0 where there are no
     insets, so this is a no-op on desktop and non-notch devices. inset:0 stays as
     the fallback for any engine without env() support. */
  .amb, .grain, .vignette, .flash{
    top:calc(0px - env(safe-area-inset-top,0px));
    right:calc(0px - env(safe-area-inset-right,0px));
    bottom:calc(0px - env(safe-area-inset-bottom,0px));
    left:calc(0px - env(safe-area-inset-left,0px))}

  .stage{position:relative; z-index:2; min-height:100svh; display:flex; flex-direction:column; padding:clamp(20px,3.4vh,34px) clamp(22px,5vw,72px);
    padding-top:max(clamp(20px,3.4vh,34px),env(safe-area-inset-top));
    padding-right:max(clamp(22px,5vw,72px),env(safe-area-inset-right));
    padding-bottom:max(clamp(20px,3.4vh,34px),env(safe-area-inset-bottom));
    padding-left:max(clamp(22px,5vw,72px),env(safe-area-inset-left))}
  .topbar{display:flex; align-items:center; justify-content:space-between; gap:16px}
  .kicker{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--dim)}
  .kicker .led{width:7px; height:7px; border-radius:50%; background:#0095E0; box-shadow:0 0 0 4px rgba(0,149,224,.16),0 0 14px rgba(0,149,224,.9); animation:beat 2.4s ease-in-out infinite}
  @keyframes beat{50%{opacity:.4}}
  .topbar .right{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}

  .grid-main{flex:1; display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,5vw,72px); align-items:start; padding:clamp(12px,3vh,30px) 0}
  @media (min-height:760px){ .grid-main{align-items:center} }

  .left,.right-col{min-width:0}   /* let grid columns shrink below content min-content (no 320px overflow) */
  .left{display:flex; flex-direction:column; gap:clamp(16px,2.6vh,26px); max-width:620px}
  .word{width:clamp(180px,22vw,280px); height:auto; filter:drop-shadow(0 10px 40px rgba(0,149,224,.22)); animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .tagline{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; margin-top:-8px; animation:rise .9s ease .12s both}
  .tagline b{font-style:normal; cursor:default}
  .tagline .c{color:var(--cyan)} .tagline .w{color:var(--ink)} .tagline .p{color:var(--pink)}
  .tagline .sep{color:var(--line-2)}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  h1{margin:0; font-family:var(--disp); font-style:italic; font-weight:800; text-transform:lowercase; line-height:.94; letter-spacing:-.01em;
    font-size:clamp(40px,5.2vw,82px); animation:rise .9s cubic-bezier(.2,.7,.2,1) .08s both}
  h1 .ch{display:inline-block; will-change:transform; cursor:default}
  .sub{margin:0; max-width:42ch; color:var(--dim); font-size:clamp(14px,1.45vw,16.5px); line-height:1.55; animation:rise .9s ease .16s both}
  .sub b{color:var(--ink); font-weight:600}

  .capture{animation:rise .9s ease .24s both; max-width:540px}
  form{position:relative}
  .field{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:6px 6px 6px 18px; border:1px solid var(--field-border); border-radius:14px; background:rgba(127,127,127,.04); transition:border-color .18s,box-shadow .18s,background .18s}
  .field:focus-within{border-color:var(--cyan); background:rgba(0,149,224,.06); box-shadow:0 0 0 4px rgba(0,149,224,.14)}
  .field.bad{border-color:var(--pink); background:rgba(248,8,104,.06); box-shadow:0 0 0 4px rgba(248,8,104,.12)}
  .field .at{font-family:var(--mono); color:var(--faint); font-size:14px}
  .field input{min-width:0; background:transparent; border:0; outline:0; color:var(--ink); font-family:var(--body); font-size:clamp(14px,1.5vw,16px); padding:13px 6px}
  .field input::placeholder{color:var(--faint)}
  .go{min-width:150px; border:0; cursor:pointer; border-radius:10px; padding:13px 20px; font-family:var(--disp); font-style:italic; font-weight:800; text-transform:uppercase; letter-spacing:.03em; font-size:clamp(15px,1.6vw,18px); color:#02131c; white-space:nowrap;
    background:#0095E0; background:linear-gradient(100deg,#0095E0,color-mix(in srgb,#0095E0 78%,#fff)); box-shadow:0 10px 30px rgba(0,149,224,.3),inset 0 1px 0 rgba(255,255,255,.45);
    display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:filter .2s,transform .1s,opacity .2s}
  .go:hover{filter:brightness(1.08)}
  .go:active{transform:translateY(1px)}
  .go[disabled]{opacity:.7; cursor:default}
  .spinner{width:15px;height:15px;border-radius:50%;border:2px solid rgba(2,19,28,.3);border-top-color:#02131c;animation:spin .7s linear infinite;display:none}
  @keyframes spin{to{transform:rotate(360deg)}}
  form.loading .spinner{display:inline-block}
  form.loading .go .label{display:none}
  .msg{min-height:18px; margin-top:11px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--faint)}
  .msg.bad{color:var(--error)}
  .consent{margin:13px 0 0; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
  .consent a{color:var(--dim); text-decoration:underline; text-underline-offset:2px; transition:color .15s}
  .consent a:hover{color:var(--ink)}
  .flinks{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  .success{display:none; flex-direction:column; gap:10px}
  .capture.is-done form{display:none}
  .capture.is-done .success{display:flex; animation:rise .6s ease both}
  .success .badge{align-self:flex-start; display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border-radius:999px; border:1px solid rgba(22,163,74,.4); background:rgba(22,163,74,.07); color:var(--green); font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase}
  .success .badge .led{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(22,163,74,.9)}
  .success h2{margin:0; font-family:var(--disp); font-style:italic; font-weight:800; text-transform:lowercase; font-size:clamp(26px,3.2vw,40px); line-height:1}
  .success p{margin:0; color:var(--dim); font-size:14px} .success p b{color:var(--ink); font-weight:600}

  /* US-only region gate: shown in place of the form when geo is not US (app.js
     toggles [hidden] off and hides the form). Dark, centered, brand-consistent. */
  #region-block{display:none; flex-direction:column; gap:10px; max-width:540px; padding:20px 22px;
    border:1px solid var(--line-2); border-left:2px solid var(--cyan); border-radius:14px;
    background:rgba(0,149,224,.05); text-align:left; animation:rise .6s ease both}
  #region-block:not([hidden]){display:flex}
  #region-block .k{display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
    font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan)}
  #region-block .k::before{content:""; width:6px; height:6px; border-radius:50%; background:#0095E0;
    box-shadow:0 0 0 3px rgba(0,149,224,.16),0 0 12px rgba(0,149,224,.8)}
  #region-block h2{margin:0; font-family:var(--disp); font-style:italic; font-weight:800; text-transform:lowercase;
    font-size:clamp(22px,2.6vw,30px); line-height:1.02; color:var(--ink)}
  #region-block p{margin:0; color:var(--dim); font-size:14px; line-height:1.55}
  #region-block p b{color:var(--ink); font-weight:600}
  #region-block a{color:var(--cyan); text-decoration:underline; text-underline-offset:2px}
  #region-block a:hover,#region-block a:focus-visible{color:var(--ink)}
  @media (prefers-reduced-motion:reduce){ #region-block{animation:none} }

  .social{display:flex; align-items:center; gap:14px; flex-wrap:wrap; animation:rise .9s ease .32s both}
  .social .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}
  .social .links{display:flex; gap:10px; flex-wrap:wrap}
  .social a{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:11px 16px; border-radius:999px; border:1px solid var(--line-2); color:var(--dim); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; transition:color .15s,border-color .15s,background .15s,transform .15s}
  .social a:hover{color:var(--ink); border-color:var(--line-2); background:rgba(127,127,127,.08); transform:translateY(-1px)}
  .social a svg{width:15px; height:15px; fill:currentColor}

  .right-col{position:relative; display:flex; flex-direction:column; gap:clamp(20px,3vh,34px); padding-left:clamp(20px,3vw,48px); border-left:1px solid var(--line); animation:rise 1s ease .2s both}
  .mono-wrap{position:relative; align-self:flex-start}
  .mono{position:relative; z-index:1; width:clamp(150px,17vw,230px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.5)); will-change:transform}
  /* mouse parallax: JS sets .mono + .glowfx transforms on mousemove; the slow
     ease-out transition gives the GSAP-style slow-decay trail. The mark moves
     OPPOSITE the cursor (see app.js). .glowfx keeps its centering translate. */
  .glowfx{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:-1; pointer-events:none; transition:transform .8s cubic-bezier(.2,.8,.2,1)}
  .protocol-label{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan)}
  .protocol-label .bar{height:1px; width:34px; background:var(--cyan)}
  .steps{display:flex; flex-direction:column; gap:clamp(12px,1.8vh,18px); counter-reset:s}
  .step{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start}
  .step>div{min-width:0} .step .d,.step .more{overflow-wrap:break-word}
  .step .n{counter-increment:s; font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.1em; padding-top:3px}
  .step .n::before{content:"0" counter(s)}
  .step .t{font-family:var(--disp); font-style:italic; font-weight:700; text-transform:lowercase; font-size:clamp(20px,2vw,27px); line-height:1.04; color:var(--ink)}
  .step .d{font-family:var(--body); font-size:13px; color:var(--dim); margin-top:3px; line-height:1.45}
  .step.pay .t{color:var(--pink)}
  .stance{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); flex-wrap:wrap}
  .stance .dot{color:var(--line-2)} .stance b{color:var(--dim); font-weight:500}

  .footer{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
  .footer a:hover{color:var(--ink)}

  /* ---- interactive monogram + reveal facts ---- */
  .mono-wrap{cursor:pointer}
  .mono{transition:transform .8s cubic-bezier(.2,.8,.2,1), filter .35s}
  .mono-wrap.buzz{animation:buzz .5s ease}
  @keyframes buzz{0%,100%{transform:translate(0,0) rotate(0)}15%{transform:translate(-4px,1px) rotate(-1.2deg)}30%{transform:translate(4px,-1px) rotate(1.2deg)}45%{transform:translate(-3px,1px) rotate(-.8deg)}60%{transform:translate(3px,-1px) rotate(.8deg)}80%{transform:translate(-1px,0) rotate(0)}}
  .monoslot{position:relative; min-height:46px; margin-top:-4px}
  .mono-hint,.monofact{position:absolute; left:0; top:0; right:0; max-width:300px}
  .mono-hint{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); display:inline-flex; align-items:center; gap:8px; transition:opacity .4s}
  .mono-hint::before{content:""; width:6px; height:6px; border-radius:50%; background:#0095E0; box-shadow:0 0 10px rgba(0,149,224,.9); animation:beat 2s ease-in-out infinite}
  .mono-hint.gone{opacity:0; pointer-events:none}
  .monofact{font-family:var(--mono); font-size:11.5px; line-height:1.5; color:var(--fact); opacity:0; transform:translateY(-4px); transition:opacity .35s, transform .35s}
  .monofact.show{opacity:1; transform:none}
  .monofact .k{display:block; color:var(--cyan); text-transform:uppercase; letter-spacing:.18em; font-size:9.5px; margin-bottom:5px}

  /* ---- expandable protocol steps ---- */
  .step{cursor:pointer; border-radius:10px; padding:5px 8px; margin:-5px -8px; transition:background .2s}
  .step:hover{background:rgba(255,255,255,.035)}
  .step .t{display:flex; align-items:center; gap:8px; min-height:44px}
  .step .t::after{content:"+"; margin-left:auto; font-family:var(--mono); font-style:normal; font-size:15px; color:var(--faint); transition:transform .3s, color .2s}
  .step:hover .t::after{color:var(--cyan)}
  .step.open .t::after{transform:rotate(45deg); color:var(--cyan)}
  .step .more{max-height:0; overflow:hidden; opacity:0; visibility:hidden; font-family:var(--body); font-size:12.5px; line-height:1.5; color:var(--cyan); transition:max-height .4s ease, opacity .3s ease, margin .3s ease, visibility 0s linear .4s}
  .step.open .more{max-height:90px; opacity:.92; margin-top:7px; visibility:visible; transition:max-height .4s ease, opacity .3s ease, margin .3s ease, visibility 0s linear 0s}

  /* ---- easter-egg reveal ---- */
  .flash{position:fixed; inset:0; z-index:25; pointer-events:none; opacity:0; box-shadow:inset 0 0 180px 40px rgba(0,149,224,.35), inset 0 0 180px 40px rgba(248,8,104,.28)}
  .flash.go{animation:flashk .6s ease}
  @keyframes flashk{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
  .egg{position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .4s}
  .egg.show{opacity:1; pointer-events:auto}
  .eggcard{position:relative; padding:30px 36px; border:1px solid var(--line-2); border-radius:18px; background:rgba(9,12,18,.9); backdrop-filter:blur(12px); box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(0,149,224,.18), 0 0 60px rgba(0,149,224,.15); text-align:center; max-width:460px; transform:scale(.95) translateY(8px); transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .egg.show .eggcard{transform:none}
  /* The egg card is an always-dark glassy modal in both themes, so its text is fixed light (not token-driven). */
  .eggcard .tag{font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:#ff6d96}
  .eggcard .big{font-family:var(--disp); font-style:italic; font-weight:800; text-transform:lowercase; font-size:clamp(26px,3.4vw,36px); line-height:1.04; margin:10px 0 0; color:#fff}
  .eggcard .sm{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:rgba(255,255,255,.62); margin-top:12px}

  @media (max-width:920px){
    .grid-main{grid-template-columns:1fr; gap:24px; align-content:center}
    .right-col{border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:24px}
    .mono-wrap,.monoslot{display:none}   /* desktop-only easter egg: hide the orphan "tap the mark" hint on mobile */
  }
  @media (max-width:560px){
    /* !important so the scramble-prep inline display:inline-block (app.js) cannot
       reveal "launching soon" on mobile - inline styles otherwise win specificity. */
    .topbar .right{display:none !important}
    .field{grid-template-columns:1fr; padding:10px; gap:10px} .field .at{display:none}
    .field input{padding:12px} .go{min-width:0; padding:14px}
    h1{font-size:clamp(38px,12vw,56px)}
  }
  @media (prefers-reduced-motion:reduce){
    .amb .glow,.kicker .led,.mono-hint::before,.spinner{animation:none}
    .word,h1,.sub,.capture,.social,.right-col,.tagline,.capture.is-done .success,.mono-wrap.buzz,.flash.go{animation:none}
    .eggcard,.monofact,.step .more,.mono-hint{transition:none}
  }
  /* Entrance is JS-driven so the fade-ins and the scramble start on the same
     clock. Everything below is hidden at parse (when scripting is enabled) and
     revealed by app.js; falls back to fully visible if scripting is off. */
  svg.word{cursor:default; overflow:visible}
  svg.word path{transform-box:fill-box; pointer-events:fill}
  @media (scripting: enabled){
    .word,.tagline,.stance,.kicker,.protocol-label,.topbar .right,.social .lbl,.social .links a,.mono-hint,
    h1,.sub,.capture,.social,.right-col,.footer{opacity:0;animation:none}
    h1,.sub,.capture,.social,.right-col,.footer{transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  }
  /* a11y: visually-hidden utility (SR-only live region + offscreen labels) */
  .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}
  /* a11y: the protocol label is an <h2> for heading navigation; keep the eyebrow look */
  h2.protocol-label{margin:0; font-weight:inherit; font-size:inherit}
  /* a11y: visible keyboard focus on every interactive control (2.4.7 / 2.4.13).
     No border-radius override - the ring follows each element's own corners; the
     3px offset lands it on the dark bg rather than the bright button fill. */
  a:focus-visible,button:focus-visible,.go:focus-visible,.step .t:focus-visible,.mono-wrap:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
  .go:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--cyan)}
  .step .t:focus-visible{outline-offset:2px}
  /* a11y: honor an explicit high-contrast preference beyond the AA baseline */
  @media (prefers-contrast:more){
    html[data-theme="dark"]{--dim:rgba(255,255,255,.92); --faint:rgba(255,255,255,.82); --line-2:rgba(255,255,255,.5); --field-border:rgba(255,255,255,.7)}
    html[data-theme="light"]{--dim:rgba(10,14,21,.95); --faint:rgba(10,14,21,.85); --line-2:rgba(10,14,21,.55); --field-border:rgba(10,14,21,.7)}
  }
  /* a11y: Windows High Contrast / forced-colors strips gradients + box-shadows,
     so repaint the CTA and focus/error states with system color keywords. */
  @media (forced-colors:active){
    .go{border:2px solid ButtonText; background:ButtonFace; color:ButtonText; box-shadow:none}
    .go:hover{filter:none}
    .go:focus-visible{outline:3px solid Highlight; outline-offset:2px; box-shadow:none}
    .field:focus-within{outline:2px solid Highlight; outline-offset:2px; box-shadow:none}
    .field.bad{outline:2px solid Mark; outline-offset:2px; box-shadow:none}
    .step.open .t::after{color:Highlight}
  }
  /* Light theme: soften dark-native effects (the neon glow/vignette/heavy grain
     read as grime on a light surface) and swap the cyan glow shadows for neutral. */
  /* light theme: dim the root-canvas glow so it stays subtle on the light bg
     (matches the old .amb .glow opacity:.4 treatment, now that the glow is on html). */
  html[data-theme="light"]{
    background-image:radial-gradient(42% 50% at 80% 16%, rgba(0,149,224,.08), transparent 60%),radial-gradient(44% 46% at 16% 92%, rgba(248,8,104,.06), transparent 60%)}
  html[data-theme="light"] .vignette{background:radial-gradient(140% 120% at 50% 42%, transparent 70%, rgba(10,14,21,.06) 100%)}
  html[data-theme="light"] .grain{opacity:.025}
  html[data-theme="light"] .word{filter:drop-shadow(0 8px 22px rgba(10,14,21,.14))}
  html[data-theme="light"] .mono{filter:drop-shadow(0 10px 26px rgba(10,14,21,.16))}
  /* Theme toggle: a 44px icon button (AAA target). Shown only with scripting,
     since it needs JS + localStorage to work. */
  .topbar-end{display:flex; align-items:center; gap:14px}
  .theme-toggle{display:none; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--dim); cursor:pointer; transition:color .15s,border-color .15s,background .15s}
  .theme-toggle:hover{color:var(--ink); border-color:var(--line-2); background:rgba(127,127,127,.1)}
  .theme-toggle svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2}
  html[data-theme="dark"] .theme-toggle .i-moon{display:none}
  html[data-theme="light"] .theme-toggle .i-sun{display:none}
  @media (scripting: enabled){ .theme-toggle{display:inline-flex} }
  @media (prefers-reduced-motion:reduce){ body{transition:none} }

/* honeypot field: off-screen, not focusable visually (was an inline style) */
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

/* age + privacy consent (required to submit) */
.agecheck{display:flex; align-items:center; gap:10px; margin:12px 2px 0; cursor:pointer;
  font-family:var(--mono); font-size:11px; line-height:1.5; letter-spacing:.04em; color:var(--faint)}
.agecheck input{flex:0 0 auto; width:24px; height:24px; margin:0; accent-color:var(--cyan); cursor:pointer}
.agecheck a{color:var(--faint); text-decoration:underline; text-underline-offset:2px}
.agecheck a:hover,.agecheck a:focus-visible{color:var(--ink)}
.agecheck input:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.agecheck input[aria-invalid="true"]{outline:2px solid var(--pink); outline-offset:2px}
@media (forced-colors:active){ .agecheck input:focus-visible{outline:2px solid Highlight} }

  /* a11y: skip-to-main link, hidden until keyboard focus (CSP-safe, in CSS not inline) */
  .skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--cyan);color:#02131c;font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:10px 16px;border-radius:0 0 8px 0;text-decoration:none}
  .skip-link:focus{left:0}