:root {
  --bg:#f2f0ea;--paper:#f8f6f0;--ink:#10110f;--muted:#74756f;--soft:#a2a39d;
  --line:rgba(16,17,15,.13);--line-strong:rgba(16,17,15,.30);--ghost:rgba(16,17,15,.05);
  --blue:#2f81f7;--violet:#8250df;--teal:#00a98f;--gold:#bc6b00;--cyan:#00a7c4;--green:#2da44e;
  --max:1280px;--sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
html[data-theme="dark"] {
  --bg:#0b0c0d;--paper:#111315;--ink:#f1efe9;--muted:#96978f;--soft:#666862;
  --line:rgba(241,239,233,.13);--line-strong:rgba(241,239,233,.30);--ghost:rgba(241,239,233,.055);
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:light dark}
body{
  margin:0;color:var(--ink);font-family:var(--sans);line-height:1.5;text-rendering:optimizeLegibility;
  background:linear-gradient(to right,var(--line) 1px,transparent 1px) 0 0/min(25vw,320px) 100%,var(--bg)
}
a{color:inherit;text-decoration:none}button{color:inherit;font:inherit}button,canvas{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip-link{position:fixed;left:16px;top:10px;z-index:100;padding:9px 12px;background:var(--ink);color:var(--bg);transform:translateY(-160%)}
.skip-link:focus-visible{transform:none}
.arcade-header{
  position:sticky;top:0;z-index:20;width:min(calc(100% - 64px),var(--max));height:76px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px)
}
.wordmark{font-weight:820;letter-spacing:-.055em;font-size:1.08rem}
nav{display:flex;gap:28px;color:var(--muted);font-size:.78rem}
nav a{padding:10px 0;border-bottom:1px solid transparent}
nav a:hover,nav a.active{color:var(--ink);border-color:var(--ink)}
.header-actions{justify-self:end;display:flex;gap:8px}
.header-actions button,.action-row button{
  border:1px solid var(--line);border-radius:999px;background:var(--paper);padding:8px 12px;cursor:pointer;
  transition:transform .18s ease,border-color .18s ease
}
.header-actions button:hover,.action-row button:hover{border-color:var(--line-strong);transform:translateY(-1px)}
main{width:min(calc(100% - 64px),var(--max));margin:0 auto}
.arcade-hero{
  min-height:410px;padding:92px 0 70px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;
  align-items:center;border-bottom:1px solid var(--line)
}
.eyebrow{margin:0 0 24px;color:var(--muted);font-size:.65rem;font-weight:760;letter-spacing:.18em}
h1{margin:0;font-size:clamp(4rem,8vw,8rem);line-height:.82;letter-spacing:-.075em;font-weight:720}
.lede{max-width:760px;margin:34px 0 0;color:var(--muted);font-size:clamp(1rem,1.6vw,1.3rem)}
.hero-mark{position:relative;aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%}
.hero-mark::before,.hero-mark::after{content:"";position:absolute;inset:18%;border:1px solid var(--line-strong);border-radius:50%}
.hero-mark::before{transform:scaleY(.35) rotate(22deg);animation:orbit 13s linear infinite}
.hero-mark::after{transform:scaleY(.35) rotate(92deg);animation:orbit 19s linear infinite reverse}
.hero-mark span{z-index:2;font-size:5rem;font-weight:760;letter-spacing:-.09em}
.hero-mark i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--teal);animation:pulse 1.8s ease-in-out infinite}
.hero-mark b{position:absolute;bottom:18%;color:var(--muted);font:600 .65rem/1 var(--mono)}
.game-shell{padding:70px 0 100px}
.game-tabs{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-bottom:0}
.game-tab{
  min-height:112px;padding:18px;text-align:left;cursor:pointer;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;
  gap:2px 12px;border:0;border-right:1px solid var(--line);background:color-mix(in srgb,var(--paper) 55%,transparent)
}
.game-tab:last-child{border-right:0}.game-tab span{grid-row:1/span 2;color:var(--soft);font:700 .62rem/1 var(--mono);padding-top:3px}
.game-tab b{font-size:.86rem}.game-tab small{color:var(--muted);font-size:.66rem}.game-tab:hover{background:var(--ghost)}
.game-tab.active{background:var(--ink);color:var(--bg)}.game-tab.active span,.game-tab.active small{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.game-stage{border:1px solid var(--line-strong);background:var(--paper)}
.stage-head{min-height:100px;padding:20px 24px;display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line)}
.stage-index{margin:0 0 8px;color:var(--soft);font:700 .6rem/1 var(--mono);letter-spacing:.12em}
h2{margin:0;font-size:clamp(1.5rem,3vw,2.6rem);letter-spacing:-.045em;line-height:1}
.scoreboard{display:flex;gap:22px;text-align:right}.scoreboard span{display:grid;gap:4px}
.scoreboard small{color:var(--soft);font:700 .56rem/1 var(--mono);letter-spacing:.12em}.scoreboard b{font:750 1.25rem/1 var(--mono)}
.canvas-frame{position:relative;width:100%;background:var(--bg);overflow:hidden}
canvas{display:block;width:100%;height:auto;aspect-ratio:900/560;cursor:crosshair;touch-action:none}
.canvas-overlay{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(5px);text-align:center
}
.canvas-overlay[hidden]{display:none}.canvas-overlay strong{font-size:clamp(2rem,5vw,4rem);letter-spacing:-.06em}.canvas-overlay span{color:var(--muted)}
.stage-controls{padding:18px 24px;display:flex;justify-content:space-between;gap:24px;align-items:center;border-top:1px solid var(--line)}
.control-copy p{margin:0;font-size:.73rem}.control-copy .muted{margin-top:5px;color:var(--soft);font-size:.65rem}.action-row{display:flex;gap:8px}
.touch-pad{display:none;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,44px);gap:6px;justify-content:center;padding:0 24px 22px}
.touch-pad button{border:1px solid var(--line);background:var(--ghost);border-radius:8px}
.touch-pad [data-dir="up"]{grid-column:2}.touch-pad [data-dir="left"]{grid-column:1;grid-row:2}
.touch-pad [data-dir="down"]{grid-column:2;grid-row:2}.touch-pad [data-dir="right"]{grid-column:3;grid-row:2}
.arcade-notes{padding:0 0 110px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.arcade-notes article{min-height:240px;padding:30px 30px 20px 0;border-right:1px solid var(--line)}
.arcade-notes article+article{padding-left:30px}.arcade-notes article:last-child{border-right:0}
.arcade-notes span{color:var(--soft);font:700 .62rem/1 var(--mono)}.arcade-notes h3{margin:42px 0 14px;font-size:1rem}
.arcade-notes p{margin:0;color:var(--muted);font-size:.8rem;max-width:34em}
footer{width:min(calc(100% - 64px),var(--max));margin:0 auto;padding:28px 0 44px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:.72rem}
@keyframes orbit{to{rotate:360deg}}@keyframes pulse{50%{transform:scale(1.8);opacity:.45}}
@media(max-width:820px){
  .arcade-header,main,footer{width:min(calc(100% - 32px),var(--max))}.arcade-header{grid-template-columns:1fr auto}.arcade-header nav{display:none}
  .arcade-hero{grid-template-columns:1fr;padding-top:64px}.hero-mark{width:min(70vw,300px);justify-self:center}
  .game-tabs{grid-template-columns:repeat(2,1fr)}.game-tab:nth-child(2){border-right:0}.game-tab:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .stage-controls{align-items:flex-start;flex-direction:column}.touch-pad{display:grid}.arcade-notes{grid-template-columns:1fr}
  .arcade-notes article,.arcade-notes article+article{padding:26px 0;border-right:0;border-bottom:1px solid var(--line);min-height:0}
  .arcade-notes article:last-child{border-bottom:0}.arcade-notes h3{margin:20px 0 10px}
}
@media(max-width:520px){
  h1{font-size:3.5rem}.game-tabs{grid-template-columns:1fr}.game-tab{min-height:82px;border-right:0;border-bottom:1px solid var(--line)}
  .game-tab:last-child{border-bottom:0}.stage-head{align-items:flex-start;gap:18px;flex-direction:column}.scoreboard{width:100%;justify-content:flex-start;text-align:left}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}