:root{
  --bg:#0E1220; --panel:#151B2E; --line:#26304B;
  --ink:#E9EEF7; --dim:#8B97B4; --body-ink:#C6D0E4;
  --signal:#FFB020; --violet:#7C6BFF;
  --display:'Syne',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:300;
  padding:96px 0 22vh;opacity:1;transition:opacity .25s ease}
body.leaving{opacity:0}

/* ---------- top bar ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:30;background:rgba(14,18,32,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar-inner{display:flex;align-items:center;gap:28px;padding:16px 6vw;max-width:1200px;margin:0 auto}
.wordmark{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:17px;text-decoration:none;color:var(--ink)}
.bar nav{display:flex;gap:20px;margin-left:auto;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase}
.bar nav a{color:var(--dim);text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent}
.bar nav a:hover{color:var(--ink)}
.bar nav a[aria-current="page"]{color:var(--signal);border-color:var(--signal)}
#progress{height:2px;background:var(--signal);width:0;transition:width .1s linear}

/* ---------- type ---------- */
main{max-width:1200px;margin:0 auto;padding:0 6vw}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal)}
h1{font-family:var(--display);font-weight:800;font-size:clamp(38px,6.4vw,80px);line-height:.96;
  letter-spacing:-.025em;margin:.28em 0 .35em;max-width:17ch}
h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,40px);letter-spacing:-.015em;margin:0 0 .5em}
h3{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin:0 0 10px}
p{max-width:62ch;line-height:1.75;color:var(--body-ink);font-size:clamp(15px,1.15vw,17px)}
.lede{font-size:clamp(17px,1.5vw,21px);color:var(--ink);max-width:52ch}
section{padding:64px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0;padding-top:24px}
.mono{font-family:var(--mono);color:var(--signal)}
kbd{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--dim)}
a.inline{color:var(--violet)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:32px}
.card{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:20px}
.card p{font-size:15px;margin:0}
pre{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;overflow-x:auto;
  font-family:var(--mono);font-size:13px;color:#D5DEF0;line-height:1.6;max-width:820px}
.next{display:inline-flex;align-items:center;gap:10px;margin-top:48px;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--signal);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:12px 20px}
.next:hover{border-color:var(--signal)}

/* ---------- HUD (injected) ---------- */
#hud{position:fixed;right:20px;bottom:20px;width:248px;background:rgba(21,27,46,.88);
  backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:16px;overflow:hidden;z-index:40}
#stage{position:relative;aspect-ratio:4/3;background:#0A0E19}
#hud video,#hud canvas{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1)}
#hud video{object-fit:cover;opacity:.32}
.readout{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
#dot{width:8px;height:8px;border-radius:50%;background:#3A465F;flex:0 0 auto}
#dot.live{background:var(--signal);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,176,32,.45)}70%{box-shadow:0 0 0 9px rgba(255,176,32,0)}100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}}
#gesture{color:var(--ink)}
#start{position:absolute;inset:0;display:grid;place-content:center;gap:8px;text-align:center;background:#0A0E19;
  cursor:pointer;border:0;color:var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
#start small{color:var(--dim);text-transform:none;letter-spacing:0;font-size:11px}
#start:focus-visible,a:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

@media (max-width:760px){
  #hud{width:164px;right:12px;bottom:12px}
  .bar nav{gap:12px;font-size:10px}
  body{padding-top:104px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}#dot.live{animation:none}body{transition:none}}