:root{color-scheme:dark;--bg:#191821;--panel:#23212c;--line:#494452;--text:#f0e9de;--muted:#b3a7b6;--coral:#fa9e85;--gold:#e9ca81;--lav:#beb1f5}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 10%,#342636,transparent 65%),var(--bg);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text)}main{max-width:1200px;margin:auto;padding:18px 30px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px}.studio{letter-spacing:.16em;font-weight:750;font-size:12px}.studio small{color:var(--coral);font-size:10px;font-weight:400;letter-spacing:0}.sound{display:flex;align-items:center;gap:10px}input{width:66px;accent-color:var(--coral)}button{font:inherit;color:var(--text);background:#2e2b38;border:1px solid #5b5263;border-radius:5px;min-height:44px;padding:8px 12px;cursor:pointer;transition:background .12s,border-color .12s}button:hover:not(:disabled){background:#494052;border-color:var(--lav)}button:focus-visible,canvas:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{opacity:.4;cursor:default}.primary{background:var(--coral);color:#2c2027;border-color:var(--coral);font-weight:700}.primary:hover:not(:disabled){background:#ffbea3;border-color:#ffbea3}#sound{font-size:11px;min-height:32px}.mast{display:flex;align-items:flex-end;justify-content:space-between;padding:20px 0 17px;gap:25px}.eyebrow{font-size:9px;letter-spacing:.18em;font-weight:700;color:var(--coral);margin:0 0 8px}h1{font:600 clamp(36px,5vw,58px)/1 Georgia,serif;letter-spacing:-.055em;margin:0}h1 span{font-weight:400;color:var(--coral)}.mast>p{margin:0;font-size:12px;color:var(--muted)}.mast strong{font-weight:550;color:var(--text)}#rooms{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:14px}#rooms button{font-size:11px;text-align:left;position:relative;padding:9px 11px}#rooms button b{margin-right:8px;color:var(--coral)}#rooms button.active{border-color:var(--coral);background:#423038}#rooms button.done:after{content:'✓';position:absolute;right:7px;top:1px;color:var(--gold)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}.stage{background:#15151e;border:1px solid #5c4b59;border-radius:10px;overflow:hidden}.stage-top{display:flex;justify-content:space-between;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.09em}#readout{color:var(--coral);white-space:nowrap}.canvas-wrap{position:relative}canvas{display:block;width:100%;aspect-ratio:9/7;touch-action:manipulation;cursor:crosshair}.overlay{position:absolute;inset:15% 12%;padding:30px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:#231e2bf5;border:1px solid #796375;border-radius:8px;box-shadow:0 15px 60px #0008}.overlay h2{font:500 clamp(25px,3vw,38px)/1.1 Georgia,serif;margin:0 0 16px}.overlay p:not(.eyebrow){color:#c8becb;font-size:13px;margin:0 0 20px}.overlay small{color:var(--muted);font-size:10px;margin-top:12px}.legend{display:flex;gap:19px;padding:9px 15px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:7px}.legend i{display:inline-block;width:8px;height:8px}.echo-dot{background:var(--coral);border-radius:50%}.memory-dot{border:1px solid #95859e;border-radius:2px}.key-dot{border:1px solid var(--gold);transform:rotate(45deg)}#status{font-weight:600;font-size:13px;min-height:36px;padding:10px 15px 0}#status.bump{color:var(--gold)}#status.success{color:var(--gold)}#hint{font-size:11px;color:var(--muted);min-height:40px;padding:4px 15px 12px}aside{display:grid;gap:10px}.instrument,.inventory{padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:8px}.compass,.dpad{display:grid;grid-template-columns:44px 54px 44px;grid-template-rows:40px 40px 40px;gap:3px;justify-content:center;margin:7px 0 10px}.compass button,.dpad button{min-height:40px;padding:0;font-size:20px}.compass span,.dpad span{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;font-size:8px;letter-spacing:.1em;color:var(--muted)}[data-aim=N],[data-action=N]{grid-column:2;grid-row:1}[data-aim=W],[data-action=W]{grid-column:1;grid-row:2}[data-aim=E],[data-action=E]{grid-column:3;grid-row:2}[data-aim=S],[data-action=S]{grid-column:2;grid-row:3}.compass button.selected{border-color:var(--coral);color:var(--coral);background:#51343a}#emit{width:100%;font-size:12px}#signal-note{font-size:10px;color:var(--muted);margin:7px 0 0;min-height:15px}.history{display:flex;gap:6px}.history button{flex:1;font-size:11px}kbd{font:9px monospace;color:var(--muted);margin-left:3px}#next{width:100%;margin-top:8px;font-size:11px}.inventory .eyebrow{color:var(--gold)}#fragment{font:500 22px/1.2 Georgia,serif;color:#d4c7d5}.inventory.recovered{border-color:#b18f57;background:#342d28}.inventory.recovered #fragment{color:var(--gold)}#objective{font-size:11px;color:var(--muted);margin:9px 0 14px}.metrics{display:flex;gap:22px;border-top:1px solid var(--line);padding-top:8px;font-size:9px;color:var(--muted)}.metrics b{font-size:13px;color:var(--text);margin-left:5px;font-variant-numeric:tabular-nums}.collection{margin-top:17px;padding:12px 15px;border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;gap:25px}.collection .eyebrow{margin:0;white-space:nowrap;color:var(--muted)}.collection ol{display:flex;flex-wrap:wrap;list-style:none;gap:20px;padding:0;margin:0;font:13px Georgia,serif;color:#8e8394}.collection li.done{color:var(--gold)}footer{display:flex;justify-content:space-between;gap:20px;margin-top:14px;color:#a699ad;font-size:9px}[hidden]{display:none!important}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:850px){main{padding:16px}.workspace{grid-template-columns:1fr}aside{grid-template-columns:1fr 1fr}.inventory{grid-column:1/-1}.mast>p{max-width:240px}.collection{display:block}.collection ol{margin-top:10px}}
@media(max-width:480px){main{padding:12px}header{padding-bottom:9px}.studio{font-size:10px}.sound{gap:5px}input{width:43px}#sound{font-size:10px;padding:5px 8px}.mast{display:block;padding:17px 0 13px}h1{font-size:42px}.mast>p{margin-top:10px;max-width:none;font-size:11px}#rooms{grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:12px}#rooms button{font-size:9px;padding:7px 6px}#rooms button b{margin-right:4px}.workspace{gap:10px}.stage-top{font-size:8px;padding:9px 10px}.legend{font-size:8px;padding:8px 10px;gap:13px}#status{font-size:11px;padding:9px 10px 0}#hint{font-size:10px;padding:4px 10px 10px}aside{gap:7px}.instrument,.inventory{padding:11px 8px}.eyebrow{font-size:8px;letter-spacing:.11em}.compass,.dpad{grid-template-columns:36px 42px 36px;grid-template-rows:36px 36px 36px;gap:3px}.compass button,.dpad button{min-height:36px}#emit{font-size:10px;padding:6px 3px}#signal-note{font-size:9px}.history{gap:4px;flex-wrap:wrap}.history button{font-size:10px;padding:6px 4px;min-height:38px}kbd{display:none}.overlay{inset:6%;padding:16px}.overlay h2{font-size:24px;margin-bottom:10px}.overlay p:not(.eyebrow){font-size:10px;margin-bottom:12px}.overlay small{font-size:8px;margin-top:8px}.overlay .primary{font-size:11px;min-height:38px}.collection{padding:10px}.collection ol{gap:12px;font-size:12px}footer{display:block;font-size:8px}footer span{display:block;margin-top:4px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}