*, *::before, *::after { box-sizing:border-box; }
:root { --pb-accent:#533AFD; --pb-mint:#0A8C6E; --pb-amber:#F59E0B; --pb-rule:#DDDDE8; --pb-ink:#1A1A2E; --pb-body:#3A3A52; --pb-canvas:#F5F5FA; --pb-surface:#FEFEFE; --pb-raised:#F0F0F8; --sans:'Inter',sans-serif; --mono:'JetBrains Mono',monospace; }
html[data-theme="night"] { --pb-rule:#3A3A52; --pb-ink:#F7F7FC; --pb-body:#D8D8E8; --pb-canvas:#0C0C18; --pb-surface:#151526; --pb-raised:#202035; --pb-accent:#8B7CFF; --pb-mint:#52D6B0; }
html[data-theme="hc"] { --pb-rule:#FFF; --pb-ink:#FFF; --pb-body:#FFF; --pb-canvas:#000; --pb-surface:#000; --pb-raised:#000; --pb-accent:#0FF; --pb-mint:#0F6; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { margin:0; color:var(--pb-ink); background:var(--pb-canvas); font:16px/1.6 var(--sans); }
a { color:inherit; }
a:focus-visible, button:focus-visible, canvas:focus-visible { outline:4px solid var(--pb-accent); outline-offset:3px; }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:9px 12px; color:#fff; background:#000; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.topbar { position:sticky; z-index:20; top:0; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:72px; padding:10px max(4vw,calc((100vw - 1320px)/2)); color:#fff; background:#151528; border-bottom:2px solid rgba(255,255,255,.2); }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand > span { display:grid; line-height:1.15; }
.brand strong { font-size:15px; }
.brand small { margin-top:4px; color:rgba(255,255,255,.62); font-size:10px; }
.topbar nav { display:flex; align-items:center; gap:22px; }
.topbar nav > a { color:rgba(255,255,255,.78); font-size:13px; font-weight:600; text-decoration:none; }
.topbar nav > a:hover { color:#fff; }
#ctlab-theme-mount button { min-height:44px; }
main { overflow:clip; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.62fr); align-items:end; gap:60px; padding:clamp(44px,6vw,84px) max(4vw,calc((100vw - 1320px)/2)); color:#F7F7FC; background:#0B1220; border-bottom:2px solid var(--pb-accent); }
.eyebrow, .section-label { margin:0 0 16px; color:#69D7A4; font:700 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
h1 { max-width:900px; margin:0; font-size:clamp(58px,8vw,112px); line-height:.86; letter-spacing:-.075em; }
h1 span { color:#69D7A4; }
.lede { max-width:700px; margin:32px 0 0; color:rgba(255,255,255,.72); font-size:clamp(19px,2.3vw,30px); line-height:1.35; }
.release-register { margin:0; border-top:2px solid #69D7A4; }
.release-register div { display:grid; grid-template-columns:1fr auto; gap:20px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.2); }
.release-register dt { color:rgba(255,255,255,.56); }
.release-register dd { margin:0; text-align:right; font:600 11px var(--mono); }
.play-lab, .physics-ledger, .evidence { max-width:1320px; margin:0 auto; padding:clamp(64px,8vw,112px) max(4vw,24px); }
.play-lab { display:grid; grid-template-columns:minmax(270px,.42fr) minmax(440px,.8fr); gap:clamp(32px,5vw,72px); align-items:start; padding-block:clamp(38px,5vw,72px); }
.game-copy { position:sticky; top:104px; }
h2 { margin:0; font-size:clamp(38px,5vw,72px); line-height:.98; letter-spacing:-.055em; }
.game-copy > p:not(.section-label), .physics-ledger header p:last-child, .evidence header p:last-child { max-width:62ch; color:var(--pb-body); }
.control-register { margin:28px 0 0; border-top:2px solid var(--pb-ink); }
.control-register div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; padding:12px 0; border-bottom:1px solid var(--pb-rule); }
.control-register dt, .control-register dd { margin:0; }
.control-register dd { color:var(--pb-body); }
kbd { display:inline-grid; min-width:30px; min-height:30px; place-items:center; padding:0 7px; color:var(--pb-ink); background:var(--pb-surface); border:1px solid var(--pb-rule); font:600 11px var(--mono); }
.boundary-note { padding:18px 0; border-bottom:2px solid var(--pb-amber); }
.game-stage { min-width:0; padding:clamp(14px,2vw,24px); background:#0B1220; border-left:6px solid #69D7A4; }
.stage-register { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:0 0 10px; background:rgba(255,255,255,.18); }
.stage-register div { min-width:0; padding:9px 10px; color:#F7F7FC; background:#151F31; }
.stage-register span { display:block; color:#9EABC0; font:600 8px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.stage-register strong { display:block; margin-top:3px; overflow-wrap:anywhere; font:700 16px/1.1 var(--sans); }
.canvas-shell { position:relative; max-width:720px; margin:0 auto; }
#game-canvas { display:block; width:100%; height:auto; background:#09111F; border:2px solid rgba(255,255,255,.5); cursor:pointer; touch-action:none; }
.state-overlay { position:absolute; right:18px; bottom:18px; display:grid; max-width:min(330px,calc(100% - 36px)); padding:12px 14px; color:#0B1220; background:#69D7A4; border-left:4px solid #F7F7FC; pointer-events:none; }
.state-overlay[hidden] { display:none; }
.state-overlay strong { font-size:18px; }
.state-overlay span { font-size:12px; }
.touch-controller { max-width:720px; margin:8px auto 0; padding:10px 12px 12px; color:#F7F7FC; background:#151F31; border:2px solid rgba(255,255,255,.5); }
.touch-controller-label { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:8px; }
.touch-controller-label strong { font:700 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.touch-controller-label span { color:#B8C2D2; font-size:11px; }
.touch-rail { --paddle-position:50%; position:relative; height:56px; overflow:hidden; background:#09111F; border:2px solid #69D7A4; cursor:ew-resize; touch-action:none; }
.touch-rail::before,.touch-rail::after { content:""; position:absolute; top:0; bottom:0; width:2px; background:rgba(255,255,255,.28); }
.touch-rail::before { left:25%; }
.touch-rail::after { right:25%; }
.touch-rail-track { position:absolute; left:12px; right:12px; top:50%; height:2px; background:#F7F7FC; transform:translateY(-50%); }
.touch-rail-track::after { content:""; position:absolute; left:50%; top:-27px; width:2px; height:56px; background:rgba(255,255,255,.28); transform:translateX(-50%); }
.touch-rail-thumb { position:absolute; left:var(--paddle-position); top:50%; width:30px; height:36px; background:#69D7A4; border:2px solid #F7F7FC; transform:translate(-50%,-50%); }
.touch-rail:focus-visible { outline:4px solid #F2B84B; outline-offset:3px; }
.game-controls { display:grid; grid-template-columns:1fr 1.2fr 1fr 1fr; gap:2px; max-width:720px; margin:8px auto 0; background:rgba(255,255,255,.2); }
.game-controls button { min-height:48px; padding:8px; color:#F7F7FC; background:#151F31; border:0; font:700 10px var(--mono); cursor:pointer; touch-action:none; }
.game-controls button:hover { color:#0B1220; background:#69D7A4; }
.game-controls button[data-action="launch"] { color:#0B1220; background:#69D7A4; }
.game-controls button:disabled { color:#7D899D; background:#101827; cursor:not-allowed; }
.game-controls button:disabled:hover { color:#7D899D; background:#101827; }
.physics-ledger { display:grid; grid-template-columns:minmax(0,.56fr) minmax(360px,.44fr); gap:clamp(40px,7vw,100px); border-top:2px solid var(--pb-rule); }
.physics-ledger dl { margin:0; border-top:2px solid var(--pb-ink); }
.physics-ledger dl div { display:grid; grid-template-columns:1fr auto; gap:20px; padding:14px 0; border-bottom:1px solid var(--pb-rule); }
.physics-ledger dd { margin:0; color:var(--pb-mint); text-align:right; font:600 11px var(--mono); }
.evidence { border-top:2px solid var(--pb-rule); }
.evidence header { display:grid; grid-template-columns:minmax(0,.7fr) minmax(280px,.3fr); gap:50px; align-items:end; }
.evidence header .section-label { grid-column:1/-1; color:var(--pb-mint); }
.evidence-ledger { display:grid; grid-template-columns:repeat(3,1fr); margin-top:52px; border-top:2px solid var(--pb-ink); border-bottom:2px solid var(--pb-ink); }
.evidence-ledger article { padding:28px; }
.evidence-ledger article + article { border-left:1px solid var(--pb-rule); }
.evidence-ledger span { color:var(--pb-accent); font:600 10px var(--mono); text-transform:uppercase; }
.evidence-ledger h3 { margin:32px 0 8px; font-size:22px; }
.evidence-ledger p { color:var(--pb-body); }
.evidence-ledger strong { display:block; margin-top:32px; color:var(--pb-mint); font:700 11px var(--mono); text-transform:uppercase; }
.attribution { display:grid; grid-template-columns:220px 1fr; gap:30px; padding:26px 0; border-bottom:1px solid var(--pb-rule); }
.attribution strong { font:700 11px var(--mono); text-transform:uppercase; }
.attribution p { margin:0; color:var(--pb-body); }
footer { display:flex; justify-content:space-between; gap:20px; padding:32px max(4vw,calc((100vw - 1320px)/2)); color:rgba(255,255,255,.65); background:#151528; font:11px var(--mono); }
footer strong { color:#fff; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:900px) { .topbar nav > a{display:none}.hero,.play-lab,.physics-ledger,.evidence header{grid-template-columns:1fr}.game-copy{position:static}.release-register{max-width:560px}.evidence-ledger{grid-template-columns:1fr}.evidence-ledger article+article{border-left:0;border-top:1px solid var(--pb-rule)}.attribution{grid-template-columns:1fr} }
@media (max-width:520px) { .hero{padding-top:42px;gap:32px}.hero h1{font-size:clamp(44px,16vw,64px)}.lede{font-size:18px}.release-register div{grid-template-columns:minmax(0,.45fr) minmax(0,1fr)}.play-lab,.physics-ledger,.evidence{padding-inline:16px}.game-stage{padding:10px}.stage-register{grid-template-columns:1fr 1fr}.game-controls{grid-template-columns:1fr 1fr}.control-register div{grid-template-columns:1fr}.control-register dd{text-align:left}.state-overlay{right:10px;bottom:10px;max-width:calc(100% - 20px)}.touch-controller-label{display:grid;gap:3px}.physics-ledger dl div{grid-template-columns:1fr}.physics-ledger dd{text-align:left}footer{display:grid} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }
@media print { .topbar,.touch-controller,.game-controls{display:none}.hero{color:#000;background:#fff}.hero span,.eyebrow{color:#000}.play-lab{grid-template-columns:1fr 1fr}.game-copy{position:static}.game-stage{break-inside:avoid} }