:root{color-scheme:dark;--ink:#f5ead0;--night:#100f1c;--amber:#ffba45;--dim:#b7abc2}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% 0,#2a233b,#100f1c 55%);color:var(--ink);font:17px/1.5 Inter,system-ui,sans-serif;min-height:100vh}main{width:min(960px,94vw);margin:auto;padding:2rem 0 3rem}.eyebrow{color:var(--amber);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin:0}h1{font-size:clamp(2.4rem,8vw,5.5rem);letter-spacing:.04em;margin:0}header>p:last-child,aside{color:var(--dim)}.hud{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin:1rem 0}.hud span{background:linear-gradient(135deg,rgba(57,51,82,.7),rgba(24,21,40,.54));border:1px solid rgba(255,245,220,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 22px rgba(0,0,0,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:.4rem .7rem;border-radius:.55rem}.hud b{color:var(--amber)}button{margin-left:auto;background:linear-gradient(135deg,rgba(255,205,111,.96),rgba(255,166,51,.9));color:#241605;border:1px solid rgba(255,249,220,.6);border-radius:.55rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 22px rgba(0,0,0,.22);padding:.55rem .85rem;font:inherit;font-weight:700;cursor:pointer}.stage{position:relative;border:1px solid rgba(218,203,240,.46);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 50px #000;border-radius:.6rem;overflow:hidden}canvas{display:block;width:100%;height:auto;aspect-ratio:5/3;touch-action:none;-webkit-user-select:none;user-select:none;background:#0e0e17;cursor:crosshair;outline:none}button:focus-visible,canvas:focus-visible{outline:3px solid white;outline-offset:3px}aside{border-left:3px solid var(--amber);padding-left:1rem;margin-top:1.5rem}h2{color:var(--ink);font-size:1rem}kbd{background:#332b45;color:var(--ink);padding:.1rem .35rem;border-radius:.2rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media (max-width:600px){main{width:min(98vw,960px);padding-top:1rem}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.howto{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:clamp(.4rem,2vw,1rem);background:rgba(10,8,19,.76);pointer-events:none}.howto[hidden]{display:none}.howto-panel{width:min(100%,720px);max-height:100%;overflow:auto;padding:clamp(.45rem,2vw,1.25rem);border:1px solid rgba(255,205,111,.65);border-radius:.6rem;background:rgba(30,24,44,.96);box-shadow:0 12px 35px #0008}.howto h2{margin:0 0 .25rem;color:var(--amber);font-size:clamp(.85rem,2.6vw,1.6rem)}.howto ol{margin:.2rem 0;padding-left:1.35em;font-size:clamp(.67rem,1.75vw,1.12rem);line-height:1.3}.howto li+li{margin-top:.18rem}.howto p{margin:.3rem 0 0;color:var(--amber);font-size:clamp(.66rem,1.7vw,1rem);font-weight:700}@media(max-width:400px){.howto{padding:.25rem}.howto-panel{padding:.35rem .5rem}.howto ol{line-height:1.2}}