@font-face{
    font-family:"VT323";
    src:url("../lib/VT323.woff2") format("woff2");
    font-weight:400; font-style:normal; font-display:swap;
  }
  :root{
    color-scheme:dark;
    --accent:#57f2ff;
    --ink:#05040f;
    --text:#dfe4f7;
    --muted:#9aa4cf;
    --panel:rgba(8,7,26,.88);
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ margin:0; background:var(--ink); color:var(--text);
    font:400 18px/1.6 "VT323","Courier New",ui-monospace,monospace; }
  ::selection{ background:var(--accent); color:#050414; }

  #bg{ position:fixed; inset:0; width:100%; height:100%; z-index:0;
    image-rendering:pixelated; image-rendering:crisp-edges; }
  #bgGL{ position:fixed; inset:0; z-index:0; width:100% !important; height:100% !important; }
  body.fxgl #bg{ visibility:hidden; }
  body.fxgl::after{ display:none; }
  body::after{
    content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
    background:
      radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,8,.42) 100%),
      repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px);
  }
  @supports (height:100lvh){
    #bg{ height:100lvh; }
    #bgGL{ height:100lvh !important; }
    body::after{ height:100lvh; }
  }

  .hud{ position:fixed; top:0; left:0; right:0; z-index:20; pointer-events:none;
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:14px 18px; font-size:14px; letter-spacing:2px; color:var(--muted); }
  .hud b{ color:var(--accent); font-weight:700; }
  #hudSpeedBox{ text-align:right; }
  #hudSpeed{ display:block; font-size:19px; color:#fff; letter-spacing:1px;
    text-shadow:0 0 10px rgba(255,255,255,.25); }
  #speedBar{ display:block; width:110px; height:4px; margin-top:5px; margin-left:auto;
    background:rgba(255,255,255,.10); }
  #speedFill{ display:block; height:100%; width:10%; background:var(--accent);
    box-shadow:0 0 8px var(--accent); transition:width .12s linear; }
  #lapBar{ display:block; width:110px; height:4px; margin-top:6px;
    background:rgba(255,255,255,.10); }
  #lapFill{ display:block; height:100%; width:0%; background:var(--accent);
    box-shadow:0 0 8px var(--accent); }

  #nav{ position:fixed; right:16px; top:50%; transform:translateY(-50%);
    z-index:25; display:flex; flex-direction:column; gap:10px; }
  #nav a{ width:24px; height:24px; display:flex; align-items:center; justify-content:center;
    font-size:13px; letter-spacing:1px; text-decoration:none; color:#c6cdf0;
    border:1px solid rgba(154,164,207,.4); background:rgba(5,4,15,.82); }
  #nav a.on{ color:#050414; background:var(--accent); border-color:var(--accent);
    box-shadow:0 0 12px var(--accent); }
  #nav a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  @media (max-width:760px){
    #nav{ display:none; }
    #mot, #snd, #mus{ display:none; }
    body.playing #snd, body.playing #mus{ display:block; }
  }

  #sweep{ position:fixed; top:0; left:0; right:0; height:2px; z-index:40;
    pointer-events:none; background:linear-gradient(90deg, var(--accent), transparent 85%);
    box-shadow:0 0 12px var(--accent); transform:scaleX(0); transform-origin:left; opacity:0; }
  #sweep.go{ animation:sweep 1s cubic-bezier(.2,.8,.3,1) forwards; }
  @keyframes sweep{
    0%{ transform:scaleX(0); opacity:1; }
    60%{ transform:scaleX(1); opacity:1; }
    100%{ transform:scaleX(1); opacity:0; }
  }
  #hudCircuit.go #hudTrack{ display:inline-block; animation:hudIn .45s ease-out; }
  @keyframes hudIn{
    0%{ opacity:0; transform:translateY(5px); text-shadow:0 0 14px var(--accent); }
    100%{ opacity:1; transform:none; }
  }

  .chrome{
    color:#dff0ff;
    font-weight:400; text-transform:uppercase;
    filter:
      drop-shadow(0 0 1px rgba(5,7,22,1))
      drop-shadow(0 2px 0 rgba(5,7,22,.92))
      drop-shadow(0 0 14px rgba(110,170,255,.32));
  }
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .chrome{
      background:linear-gradient(180deg,#ffffff 0%,#eaf6ff 34%,#b6d9ff 48%,#6aa6f2 53%,#9ac6ff 62%,#e2f1ff 100%);
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
  }
  .rule{ display:block; height:3px; width:120px; margin-top:8px;
    background:linear-gradient(90deg,#ff5a3a,transparent); }

  main{ position:relative; z-index:10; }
  .sec{ min-height:92vh; display:flex; align-items:center; padding:9vh 20px; }
  .sec:first-of-type{ min-height:100vh; }
  .wrap{ width:100%; max-width:780px; margin:0 auto; }

  .eb{ font-size:15px; letter-spacing:4px; color:var(--accent); margin-bottom:14px;
    text-shadow:0 0 10px var(--accent), 0 1px 3px rgba(0,0,10,.95); }
  .panel{ position:relative; background:var(--panel); padding:30px 32px;
    border:1px solid rgba(154,164,207,.22); }
  .panel::before{ content:""; position:absolute; left:-1px; top:-1px; width:16px; height:16px;
    border-left:2px solid var(--accent); border-top:2px solid var(--accent); }
  .panel::after{ content:""; position:absolute; right:-1px; bottom:-1px; width:16px; height:16px;
    border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); }
  .panel h2{ margin:0 0 4px; font-size:clamp(22px,4vw,32px); letter-spacing:2px; }
  .panel h3{ margin:22px 0 6px; font-size:18px; letter-spacing:2px; color:#fff; }
  .panel p{ margin:10px 0; }
  .panel ul{ margin:8px 0; padding-left:20px; }
  .panel li{ margin:6px 0; }
  .muted{ color:var(--muted); font-size:16px; }
  .kv{ color:var(--accent); }

  #s0 .wrap{ text-align:left; background:rgba(5,4,15,.52);
    padding:26px 28px; border:1px solid rgba(154,164,207,.15); }
  h1.chrome{ margin:0; font-size:clamp(38px,8.5vw,80px); line-height:.95; letter-spacing:2px; }
  .role{ margin:16px 0 8px; font-size:clamp(18px,2.6vw,23px); letter-spacing:3px; color:#fff; }
  .pitch{ max-width:640px; color:var(--text); }
  .chips{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 26px; }
  .chip{ border:1px solid rgba(154,164,207,.35); padding:5px 12px; font-size:15px;
    letter-spacing:1px; background:rgba(5,4,15,.5); }
  .chip b{ color:var(--accent); font-weight:700; }
  .cta{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
  .cta .play{ padding:14px 34px; font-size:19px; }
  .heroNav{ display:flex; flex-wrap:wrap; gap:10px; }
  .heroNav a{ display:block; padding:9px 14px; font:700 14px "VT323","Courier New",monospace;
    letter-spacing:2px; text-transform:uppercase; text-decoration:none; color:var(--accent);
    border:1px solid rgba(87,242,255,.4); background:rgba(5,4,15,.45); }
  @media (hover:hover){
    .heroNav a:hover{ background:var(--accent); color:#050414; }
  }
  .heroNav a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
  @media (max-width:560px){
    .cta{ gap:12px; }
    .cta .play{ align-self:stretch; text-align:center; }
    .heroNav{ display:grid; grid-template-columns:1fr 1fr; width:100%; }
    .heroNav a{ text-align:center; padding:10px 6px; }
    .heroNav a:last-child:nth-child(odd){ grid-column:1 / -1; }
  }
  .btn{ display:inline-block; padding:11px 20px; font:700 16px "VT323","Courier New",monospace;
    letter-spacing:2px; text-decoration:none; text-transform:uppercase;
    background:var(--accent); color:#050414; border:1px solid var(--accent); }
  .btn.ghost{ background:transparent; color:var(--accent); }
  .btn.play{ animation:playGlow 1.6s ease-in-out infinite; }
  @keyframes playGlow{
    0%, 100%{ box-shadow:0 0 6px var(--accent); }
    50%{ box-shadow:0 0 22px var(--accent), 0 0 44px rgba(87,242,255,.35); }
  }
  .card .cardBtn{ display:inline-block; margin-top:10px; padding:5px 10px; font-size:13px; }
  .btn:hover{ filter:brightness(1.15); }
  .btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
  #scrollHint{ margin-top:3vh; font-size:14px; letter-spacing:3px; color:var(--muted);
    animation:bob 1.6s ease-in-out infinite; }
  @keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

  .xp{ display:flex; gap:18px; align-items:baseline; flex-wrap:wrap; }
  .xp .when{ color:var(--accent); font-weight:700; letter-spacing:1px; white-space:nowrap; }

  .grp{ margin-top:16px; }
  .grp .lab{ margin:0 0 8px; font-size:14px; font-weight:400; letter-spacing:3px; color:var(--muted); }
  .tags{ display:flex; flex-wrap:wrap; gap:8px; }
  .tag{ border:1px solid var(--accent); color:var(--text); padding:5px 11px; font-size:16px;
    background:rgba(5,4,15,.5); cursor:pointer; transition:transform .12s, background .12s, color .12s; }
  @media (hover:hover){
    .tag:hover{ background:var(--accent); color:#050414; transform:translateY(-2px); }
  }
  .tag:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .tag.x{ box-shadow:0 0 10px var(--accent); }

  .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-top:14px; }
  .card{ border:1px solid rgba(154,164,207,.25); padding:16px 16px 14px; background:rgba(5,4,15,.45);
    transition:transform .16s ease, border-color .16s, box-shadow .16s; }
  @media (hover:hover){
    .card:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:0 8px 24px rgba(0,0,0,.5); }
  }
  .card h3{ margin:0 0 6px; font-size:inherit; color:#fff; letter-spacing:1px; }
  .card span{ font-size:15px; color:var(--muted); }

  .clinks{ display:flex; flex-direction:column; gap:10px; margin:16px 0 6px; }
  .clinks a{ color:var(--accent); text-decoration:none; letter-spacing:1px; }
  .clinks a:hover{ text-decoration:underline; }
  .clinks a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  footer{ position:relative; z-index:10; text-align:center; padding:26px 16px 90px;
    font-size:14px; letter-spacing:2px; color:var(--muted); }

  #snd,#zen,#mot,#hlp,#mus{ position:fixed; bottom:16px; z-index:25; width:42px; height:42px;
    border:1px solid var(--accent); background:rgba(5,4,15,.7); color:var(--accent);
    font:700 14px "VT323","Courier New",monospace; letter-spacing:1px; cursor:pointer; }
  #snd{ right:16px; }
  #mot{ right:66px; }
  #mus{ right:116px; font-size:17px; }
  #zen{ left:16px; }
  #hlp{ left:66px; }
  #snd.off::after,#zen.off::after,#mot.off::after,#mus.off::after{ content:""; position:absolute; left:8px; top:20px; width:26px; height:2px;
    background:var(--accent); transform:rotate(-45deg); }
  #mus.na{ opacity:.45; cursor:not-allowed; }
  #snd:focus-visible,#zen:focus-visible,#mot:focus-visible,#hlp:focus-visible,#mus:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

  #helpBox{ position:fixed; left:16px; bottom:70px; z-index:45; max-width:360px;
    background:var(--panel); border:1px solid var(--accent); padding:16px 18px;
    font-size:15px; line-height:1.8; letter-spacing:1px; display:none; }
  #helpBox.on{ display:block; }
  #helpBox h2{ margin:0 0 8px; font-size:16px; letter-spacing:3px; color:var(--accent); }
  #helpBox ul{ margin:0; padding-left:16px; list-style:none; }
  #helpBox .kbd{ color:var(--accent); }
  @media (max-width:760px){ #helpBox{ bottom:100px; } }

  #results{ margin:14px 0 4px; padding:12px 14px; border:1px dashed var(--accent);
    font-size:16px; letter-spacing:1px; white-space:pre-line; color:#fff; min-height:1em; }

  #raceHud{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:26;
    display:none; font-size:16px; letter-spacing:2px; color:var(--muted); white-space:nowrap;
    background:rgba(5,4,15,.55); padding:6px 14px; border:1px solid rgba(154,164,207,.3); }
  #raceHud b{ color:#fff; font-weight:700; }
  #gameOver{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:46;
    display:none; text-align:center; background:var(--panel); border:1px solid var(--accent);
    padding:26px 34px; max-width:92vw; }
  #gameOver h2{ margin:0 0 10px; font-size:26px; letter-spacing:4px; color:var(--accent); }
  #gameOver .goRow{ font-size:18px; letter-spacing:2px; margin:4px 0; }
  #gameOver button{ margin-top:14px; }
  #gameOver p{ margin:10px 0 0; font-size:14px; }
  @media (max-width:560px){
    #raceHud{ font-size:13px; top:96px; padding:5px 10px; }
    #gameOver{ padding:24px 20px; min-width:86vw; }
    #gameOver h2{ font-size:34px; }
    #gameOver .goRow{ font-size:22px; }
    #gameOver p{ font-size:15px; }
  }
  #circuitFlash{ position:fixed; top:26vh; left:50%; transform:translateX(-50%); z-index:26;
    display:none; font-size:clamp(22px,4.5vw,42px); letter-spacing:6px; color:var(--accent);
    text-shadow:0 0 18px var(--accent), 0 2px 4px rgba(0,0,10,.9); white-space:nowrap;
    pointer-events:none; }
  #circuitFlash.go{ display:block; animation:cflash 1.8s ease-out forwards; }
  @keyframes cflash{
    0%{ opacity:0; transform:translateX(-50%) scale(1.25); }
    12%{ opacity:1; transform:translateX(-50%) scale(1); }
    75%{ opacity:1; }
    100%{ opacity:0; }
  }
  #countDown{ position:fixed; top:32vh; left:50%; transform:translateX(-50%); z-index:27;
    display:none; font-size:clamp(64px,15vw,150px); line-height:1; letter-spacing:8px;
    color:var(--accent); text-shadow:0 0 30px var(--accent), 0 4px 8px rgba(0,0,10,.9);
    pointer-events:none; }
  #countDown.go{ display:block; animation:cdpop .8s cubic-bezier(.2,.8,.3,1) forwards; }
  @keyframes cdpop{
    0%{ opacity:0; transform:translateX(-50%) scale(1.7); }
    18%{ opacity:1; transform:translateX(-50%) scale(1); }
    70%{ opacity:1; }
    100%{ opacity:0; transform:translateX(-50%) scale(.92); }
  }

  #boot{ position:fixed; inset:0; z-index:80; background:var(--ink);
    display:flex; flex-direction:column; gap:18px; align-items:center; justify-content:center;
    font-size:20px; letter-spacing:6px; color:var(--accent);
    transition:opacity .45s ease; }
  #boot .bar{ width:180px; height:6px; background:rgba(255,255,255,.08); }
  #boot #bootFill{ display:block; height:100%; width:0%; background:var(--accent);
    box-shadow:0 0 10px var(--accent); animation:bootfill 1.6s ease-out forwards; }
  @keyframes bootfill{ 0%{ width:0; } 60%{ width:76%; } 100%{ width:96%; } }
  #boot.done{ opacity:0; pointer-events:none; }

  #hlp{ display:none; }
  body.playing #hlp{ display:block; }
  body.playing #mot{ display:none; }
  body.playing #mus{ right:66px; }
  body.hero-visible:not(.playing) #zen{ display:none; }

  .skip{ position:fixed; left:16px; top:-60px; z-index:70; background:var(--accent); color:#050414;
    padding:10px 16px; font:700 16px "VT323","Courier New",monospace; letter-spacing:1px; text-decoration:none; }
  .skip:focus{ top:16px; }

  html.rv .panel, html.rv .card, html.rv .chip{
    opacity:0; transform:translateY(26px);
    transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.3,1); }
  html.rv .panel.in, html.rv .card.in, html.rv .chip.in{ opacity:1; transform:none; }
  main,#nav,footer{ transition:opacity .45s ease, visibility 0s linear 0s; }
  body.zen main,body.zen #nav,body.zen footer{ opacity:0; visibility:hidden;
    pointer-events:none; transition:opacity .45s ease, visibility 0s linear .45s; }
  body.playing, body.playing #bg, body.playing #bgGL{ touch-action:none; }

  @media (max-width:560px){
    .panel{ padding:22px 18px; }
    .hud{ font-size:13px; padding:10px 12px; }
    #speedBar{ width:80px; }
  }
  #hudBest{ display:block; font-size:12px; letter-spacing:2px; color:var(--muted); margin-top:3px; }
  @media (max-width:480px){
    .hud{ padding:8px 10px; font-size:11px; letter-spacing:1px; }
    #hudSpeed{ font-size:15px; }
    #speedBar{ width:64px; }
    #hudBest{ font-size:10px; }
  }
  @media print{
    #bg,#bgGL,.hud,#nav,#sweep,#snd,#zen,#mot,#hlp,#mus,#helpBox,#results,#raceHud,#gameOver,#circuitFlash,#countDown,#boot,.skip,.eb,footer,#scrollHint,.cta{ display:none !important; }
    main{ opacity:1 !important; visibility:visible !important; }
    main *{ opacity:1 !important; transform:none !important; transition:none !important; }
    body{ background:#fff; color:#111; font:400 12px/1.5 "Courier New",monospace; }
    body::after{ display:none; }
    .sec{ min-height:auto; padding:12px 0; display:block; }
    .panel{ background:#fff; border:1px solid #bbb; color:#111; padding:14px 16px; page-break-inside:avoid; }
    .panel::before,.panel::after{ display:none; }
    .chrome{ background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; color:#111 !important; filter:none !important; }
    h1.chrome{ font-size:30px; }
    .role,.pitch,.panel h3,.card h3{ color:#111 !important; }
    .xp .when,.chip b{ color:#111 !important; font-weight:700; }
    .lab{ color:#555 !important; }
    .muted,.card span{ color:#555; }
    .kv{ color:#111; font-weight:700; }
    .rule{ height:0; border-top:3px solid #c33; background:none; }
    .chip{ background:#fff; border-color:#999; }
    .tag{ border-color:#999; color:#111; background:#fff; }
    .card{ border-color:#ccc; background:#fff; box-shadow:none; }
    .clinks a{ color:#333; text-decoration:none; }
    .clinks a[target="_blank"]::after{ content:" — " attr(href); font-size:11px; color:#555; letter-spacing:0; }
    .card a[href^="http"]{ color:#333; text-decoration:none; border:none; background:none; padding:0; }
    .card a[href^="http"]::after{ content:" — " attr(href); font-size:11px; color:#555; letter-spacing:0; }
    #cCopy{ display:none !important; }
  }
  @media (prefers-reduced-motion: reduce){
    html:not(.fx-on){ scroll-behavior:auto; }
    html:not(.fx-on) *, html:not(.fx-on) *::before, html:not(.fx-on) *::after{
      animation:none !important; transition:none !important; }
  }
  html.fx-off{ scroll-behavior:auto; }
  html.fx-off *, html.fx-off *::before, html.fx-off *::after{
    animation:none !important; transition:none !important; }