:root{--ink:#080a08;--paper:#eeeade;--soft:#aaa99f;--line:#30352e;--acid:#9eff93;--hot:#e1ff45;--mono:ui-monospace,"Cascadia Mono",Consolas,monospace;--sans:"Segoe UI Variable Display","Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}html{background:var(--ink);scroll-behavior:smooth}body{margin:0;color:var(--paper);background:radial-gradient(circle at 18% 8%,#172018 0,transparent 31rem),radial-gradient(circle at 90% 72%,#171216 0,transparent 36rem),var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;overflow-x:hidden}button,input{font:inherit}.grain{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.045;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.topbar{height:3.4rem;position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:0 clamp(1rem,4vw,3rem);border-bottom:1px solid var(--line);background:#080a08db;backdrop-filter:blur(14px)}.brand{font-size:1.1rem;font-weight:650;letter-spacing:-.05em;color:var(--paper);text-decoration:none}.brand b{color:var(--acid)}.mapping{display:flex;gap:clamp(.5rem,2.5vw,1.8rem);overflow:auto;color:var(--soft);font:600 .62rem/1 var(--mono);letter-spacing:.12em;white-space:nowrap}.mapping span:last-child{color:var(--acid)}
.shell{width:min(94rem,100%);margin:0 auto;padding:clamp(2.6rem,7vw,7rem) clamp(1rem,4vw,3rem)}.intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(16rem,.75fr);gap:clamp(1.5rem,5vw,5rem);align-items:end;margin-bottom:clamp(2rem,5vw,4rem)}.eyebrow{margin:0 0 1rem;color:var(--acid);font:700 .68rem/1 var(--mono);letter-spacing:.2em}h1,h2,h3,p{overflow-wrap:break-word}h1,h2,h3{margin:0;line-height:.96;letter-spacing:-.045em}h1{font-size:clamp(2.8rem,7vw,7rem);grid-column:1}.intro .eyebrow{grid-column:1}h1 em{font-style:normal;color:var(--acid)}.lede{grid-column:2;grid-row:1/3;margin:0;color:var(--soft);font-size:clamp(1rem,1.5vw,1.23rem);max-width:34rem}
.instrument{display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,25rem);column-gap:clamp(1.2rem,4vw,3.2rem);align-items:start}.stage{position:relative;grid-row:1/5;aspect-ratio:1;background:#030403;border:1px solid #3b4439;overflow:hidden;cursor:crosshair;touch-action:none;isolation:isolate;box-shadow:0 35px 110px #000b}#world{position:absolute;inset:0;width:100%;height:100%;display:block}
.start-layer{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:linear-gradient(180deg,transparent 58%,#030403d9);transition:opacity .35s,visibility .35s;pointer-events:none}.start-layer.hidden{opacity:0;visibility:hidden}.start-copy{display:grid;justify-items:center;align-self:end;margin-bottom:5%;padding:1rem;text-align:center;pointer-events:auto}.start-copy p{margin:0 0 .75rem;font:700 .62rem/1 var(--mono);letter-spacing:.2em}.start-copy button{border:1px solid var(--acid);background:#071007d9;color:var(--acid);padding:.82rem 1.25rem;text-transform:uppercase;font:800 .72rem/1 var(--mono);letter-spacing:.14em;cursor:pointer;box-shadow:0 0 45px #9eff9333}.start-copy button:hover{background:var(--acid);color:#071007}.start-copy small{margin-top:.65rem;color:var(--soft);font:500 .58rem/1.4 var(--mono);letter-spacing:.08em}
.phase-stamp{position:absolute;z-index:4;left:1rem;top:1rem;padding:.35rem .48rem;border:1px solid #9eff9344;background:#020502a8;color:var(--acid);font:600 .56rem/1 var(--mono);letter-spacing:.16em;pointer-events:none}.gesture-readout{position:absolute;z-index:4;right:1rem;bottom:1rem;display:flex;align-items:center;gap:.55rem;color:#f0ffe9;font:600 .57rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;pointer-events:none;text-shadow:0 0 14px #9eff93}.gesture-readout i{width:.5rem;height:.5rem;border-radius:50%;background:var(--acid);box-shadow:0 0 18px var(--acid);transform:scale(var(--gesture,.45));transition:transform .12s}
.hud{display:grid;gap:1.8rem;padding-top:.3rem}.hud>p{min-height:4.6em;margin:0;color:var(--soft);font:500 .72rem/1.6 var(--mono)}.score-block{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}.score-block div{padding:.85rem .5rem;border-right:1px solid var(--line);display:grid;gap:.38rem}.score-block div:last-child{border:0}.score-block span{font:500 .56rem/1 var(--mono);color:var(--soft);letter-spacing:.14em}.score-block strong{font:700 .78rem/1 var(--mono)}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:1.8rem}.controls button{border:1px solid var(--line);background:#0d100d;color:var(--soft);padding:.8rem .65rem;cursor:pointer;text-align:center;text-transform:uppercase;font:700 .61rem/1 var(--mono);letter-spacing:.1em}.controls button:hover,.controls button.active{border-color:var(--acid);color:var(--acid)}.controls button.active{background:#102010}.file-button{grid-column:1/-1;color:var(--paper)!important}.privacy{margin:.8rem 0 0;color:#777b75;font:500 .58rem/1.5 var(--mono)}
.rules{padding:clamp(5rem,12vw,11rem) 0 3rem}.rules h2{font-size:clamp(2rem,5vw,4.8rem);max-width:18ch}.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:3rem}.rule-grid article{background:#0b0d0b;padding:clamp(1.2rem,3vw,2.4rem);min-height:17rem}.rule-grid b{display:block;color:var(--acid);font:700 .68rem/1 var(--mono)}.rule-grid h3{margin:4rem 0 1rem;font-size:clamp(1.2rem,2vw,1.7rem)}.rule-grid p{margin:0;color:var(--soft);font-size:.92rem}footer{display:flex;justify-content:space-between;gap:1rem;padding:1.2rem clamp(1rem,4vw,3rem);border-top:1px solid var(--line);color:var(--soft);font:500 .6rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.painting-picker[hidden]{display:none}.painting-picker{position:fixed;inset:0;z-index:80;padding:clamp(.7rem,3vw,2rem);background:#030503e8;backdrop-filter:blur(12px);display:grid;place-items:center}.picker-panel{width:min(72rem,100%);height:min(52rem,94svh);background:#0a0d0a;border:1px solid var(--line);padding:clamp(1rem,3vw,2rem);display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:1rem;box-shadow:0 40px 120px #000}.picker-head{display:flex;justify-content:space-between;align-items:start;gap:1rem}.picker-head h2{font-size:clamp(1.65rem,4vw,3.2rem)}.picker-head .eyebrow{margin-bottom:.7rem}.picker-head button{border:0;background:none;color:var(--soft);font:700 .65rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:.5rem}.picker-head button:hover{color:var(--acid)}#paintingSearch{width:100%;border:1px solid var(--line);background:#030503;color:var(--paper);padding:.85rem 1rem;font:600 .75rem/1 var(--mono);letter-spacing:.06em;outline:none}#paintingSearch:focus{border-color:var(--acid)}.painting-grid{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(8.2rem,1fr));gap:.5rem;align-content:start}.painting-choice{border:1px solid var(--line);background:#050705;color:var(--paper);padding:0;cursor:pointer;text-align:left;display:grid;grid-template-rows:8rem auto;min-width:0}.painting-choice:hover,.painting-choice:focus-visible{border-color:var(--acid);color:var(--acid)}.painting-choice img{width:100%;height:8rem;object-fit:contain;background:#010201}.painting-choice span{padding:.55rem;font:600 .62rem/1.35 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.painting-empty{color:var(--soft);font:600 .75rem/1.5 var(--mono)}body.picker-open{overflow:hidden}
@media(max-width:57rem){.intro{grid-template-columns:1fr}.lede{grid-column:1;grid-row:auto}.instrument{grid-template-columns:1fr}.stage{grid-row:auto}.hud{margin-top:1.4rem}.controls{margin-top:1.3rem}.rule-grid{grid-template-columns:1fr}.rule-grid article{min-height:0}.rule-grid h3{margin-top:2rem}}@media(max-width:34rem){.mapping span:nth-child(2){display:none}.shell{padding-top:2.8rem}.stage{width:calc(100% + 2rem);margin-left:-1rem;border-inline:0}.score-block strong{font-size:.7rem}footer{flex-direction:column}.painting-picker{padding:0}.picker-panel{height:100svh;border:0}.painting-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.start-layer,.gesture-readout i{transition:none}}

.stage.node-hover{cursor:pointer}.stage canvas{cursor:inherit}

.start-copy strong{border:1px solid var(--acid);background:#071007d9;color:var(--acid);padding:.82rem 1.25rem;text-transform:uppercase;font:800 .72rem/1 var(--mono);letter-spacing:.14em;box-shadow:0 0 45px #9eff9333}.file-button.secondary{background:#0b0d0b;color:var(--soft)!important}

.volume-control{grid-column:1/-1;border:1px solid var(--line);background:#0a0d0a;padding:.72rem .8rem;display:grid;gap:.58rem}.volume-control label{display:flex;justify-content:space-between;align-items:center;color:var(--soft);font:700 .58rem/1 var(--mono);letter-spacing:.12em}.volume-control output{color:var(--acid)}.volume-control input{width:100%;accent-color:#9eff93;cursor:pointer}.volume-control:focus-within{border-color:var(--acid)}.start-copy strong{display:none}