:root{
    --bg:#000000;
    --terminal-green:#3dff8c;
    --code-cyan:#37e6ff;
    --door-about:#ff9d45;
    --door-blue:#3a7bff;
    --mono:ui-monospace,'SF Mono','Cascadia Code','Fira Code',Menlo,Consolas,monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{background:var(--bg);color:#cfe8d8;font-family:var(--mono);overflow-x:hidden}
  body.locked{overflow:hidden}

  /* ---------- coming soon gate ---------- */
  #coming-soon{
    position:fixed;inset:0;z-index:200;background:#000;color:var(--terminal-green);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;text-align:center;padding:24px;
  }
  #coming-soon .cs-line{font-size:clamp(13px,1.8vw,16px)}
  #coming-soon .cs-cursor{display:inline-block;width:0.6em;height:1.1em;margin-left:2px;
    background:var(--terminal-green);vertical-align:text-bottom;animation:blink 0.9s steps(1) infinite}
  #coming-soon .cs-dim{color:#5c7a68;font-size:clamp(10px,1.3vw,12px);letter-spacing:0.3em;text-transform:uppercase}
  body.ws-live #coming-soon{display:none}

  /* everything below stays out of the DOM's visible/interactive flow until
     ?preview=alex unlocks the experience (adds .ws-live on body) */
  #scroll-space,#jungle-video,#terminal,#hud,#endcap,#flash,#whiteout,canvas#stage{display:none}
  body.ws-live #scroll-space{display:block}
  body.ws-live #jungle-video{display:block}
  body.ws-live #terminal{display:flex}
  body.ws-live #hud{display:block}
  body.ws-live #endcap{display:flex}
  body.ws-live #flash{display:block}
  body.ws-live #whiteout{display:block}
  body.ws-live canvas#stage{display:block}

  #scroll-space{height:1000vh;position:relative;z-index:0}

  canvas#stage{position:fixed;inset:0;width:100vw;height:100vh;z-index:1}

  /* ---------- terminal intro ---------- */
  #terminal{
    position:fixed;inset:0;z-index:50;background:#000;
    display:flex;align-items:center;justify-content:center;
    transition:opacity 1.2s ease;
  }
  #terminal.done{opacity:0;pointer-events:none}
  #term-inner{width:min(680px,88vw);font-size:clamp(12px,1.6vw,15px);line-height:1.75;color:var(--terminal-green)}
  #term-inner .dim{color:#5c7a68}
  #term-inner .cyan{color:var(--code-cyan)}
  #term-inner .white{color:#e8fff1}
  #cursor{display:inline-block;width:0.6em;height:1.1em;background:var(--terminal-green);
    vertical-align:text-bottom;animation:blink 0.9s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}

  /* ---------- overlays ---------- */
  #flash{position:fixed;inset:0;z-index:30;background:radial-gradient(circle at 50% 50%,#c9d4ff 0%,#5a4fae 40%,#141033 72%,#000 100%);
    opacity:0;pointer-events:none}
  #whiteout{position:fixed;inset:0;z-index:31;background:radial-gradient(circle at 50% 48%,#eaf2ff 0%,#9fb6d6 45%,#27324a 100%);opacity:0;pointer-events:none}

  #hud{position:fixed;inset:0;z-index:40;pointer-events:none}
  #scroll-hint{
    position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
    font-size:11px;letter-spacing:0.35em;color:#7fae92;opacity:0;
    transition:opacity 0.8s ease;text-transform:uppercase;text-align:center;
  }
  #scroll-hint.show{opacity:1}
  #scroll-hint .arrow{display:block;margin-top:8px;animation:drop 1.6s ease-in-out infinite;font-size:14px}
  @keyframes drop{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(6px);opacity:1}}

  #zone-label{
    position:absolute;top:38px;left:38px;font-size:11px;letter-spacing:0.3em;
    color:#6fa183;text-transform:uppercase;opacity:0;transition:opacity .6s ease;
  }
  #zone-label.show{opacity:1}
  #zone-label b{color:var(--terminal-green);font-weight:400}

  #endcap{
    position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;gap:14px;
    align-items:center;justify-content:center;opacity:0;pointer-events:none;
    transition:opacity 1s ease;color:#1c1a14;
  }
  #endcap.show{opacity:1}
  #endcap h2{font-size:clamp(20px,3.4vw,34px);font-weight:400;letter-spacing:0.12em}
  #endcap p{font-size:12px;letter-spacing:0.3em;color:#8a8470;text-transform:uppercase}

  @media (prefers-reduced-motion: reduce){
    #scroll-hint .arrow{animation:none}
    #cursor{animation:none}
  }