:root{--shell: #c4bfb4;--shell-hi: #ddd8cd;--shell-lo: #a8a296;--shell-edge: #7c7669;--recess: #2b2d33;--recess-lip: #454951;--key: #2a2c32;--key-lo: #15161a;--key-face: #7c8290;--btn: #a8402c;--btn-lo: #6c2415;--etch: #8a8478;--pad: 14px;--bezel-pad: 10px;--wood: #6b4527;--wood-hi: #8a5c36;--wood-lo: #462c18;--cream: #e7e2d6;--amber: #ffc12e;--ember: #ff7a2f}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:#0b0c0f;overscroll-behavior:none}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--etch);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}#room-view{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px}#room-frame{position:relative;line-height:0;border-radius:3px;box-shadow:0 0 0 1px #21232a,0 24px 50px #0009}#room-screen{display:block;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:2px}#room-hotspots{position:absolute;inset:0}#room-hotspots button{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;border-radius:2px}#room-hotspots button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}#room-hint{font-size:11px;letter-spacing:.12em;color:#4d5561;text-transform:lowercase;text-align:center;max-width:34ch;line-height:1.5}#overlay{position:fixed;inset:0;z-index:10;background:#0b0c0f;display:flex;flex-direction:column;align-items:center;animation:rise .22s cubic-bezier(.2,.8,.3,1)}@keyframes rise{0%{opacity:0;transform:scale(.96)}}#overlay[hidden]{display:none}#back{flex:none;align-self:flex-start;margin:10px 0 0 12px;border:1px solid #22262f;background:transparent;color:var(--etch);font:inherit;font-size:11px;letter-spacing:.12em;padding:7px 12px;border-radius:3px;cursor:pointer}#back:hover{border-color:#39404d;color:#a8a296}#back:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.panel{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 10px 14px}.panel[hidden]{display:none}#device{display:flex;flex-direction:column;padding:var(--pad);background:var(--shell);border-radius:16px 16px 46px;box-shadow:inset 0 1px 0 var(--shell-hi),inset 0 -2px 0 var(--shell-lo),inset 0 0 0 1px var(--shell-edge),0 22px 44px #00000080;user-select:none}.deck{display:flex;align-items:center;gap:8px;height:22px;padding:0 2px}.led{width:7px;height:7px;border-radius:50%;background:#ff7a2f;box-shadow:0 0 5px #ff7a2fbf,inset 0 -1px #00000059}.plate{font-size:10px;letter-spacing:.22em;color:var(--etch);text-shadow:0 1px 0 rgba(255,255,255,.45)}.switch{margin-left:auto;display:flex;align-items:center;gap:6px;border:0;background:none;font:inherit;cursor:pointer;padding:2px}.switch .track{width:28px;height:13px;border-radius:7px;background:var(--shell-lo);box-shadow:inset 0 1px 2px #00000059;position:relative}.switch .knob{position:absolute;top:2px;left:15px;width:11px;height:9px;border-radius:3px;background:var(--shell-hi);box-shadow:0 1px 0 var(--shell-edge);transition:left .11s ease}.switch[aria-pressed=true] .knob{left:2px}.switch-label{font-size:9px;letter-spacing:.2em;color:var(--etch);text-shadow:0 1px 0 rgba(255,255,255,.45)}.switch:focus-visible{outline:2px solid #ff7a2f;outline-offset:3px;border-radius:4px}#bezel{margin:8px 0 10px;padding:var(--bezel-pad);background:var(--recess);border-radius:8px 8px 20px;box-shadow:inset 0 2px 4px #0000008c,inset 0 -1px 0 var(--recess-lip),0 1px 0 var(--shell-hi);display:flex;justify-content:center}#stage{position:relative;line-height:0;background:#05060a;touch-action:none;cursor:default}#screen{display:block;image-rendering:pixelated;image-rendering:crisp-edges}#scan{--px: 3;position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.26) 0,rgba(0,0,0,.26) 1px,transparent 1px,transparent calc(var(--px) * 2px))}.controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:2px 4px 0}.dpad{position:relative;width:84px;height:84px;flex:none}.dpad .stem{position:absolute;left:29px;top:0;width:26px;height:84px;background:var(--key);border-radius:5px;box-shadow:0 2px 0 var(--key-lo);pointer-events:none}.dpad .stem:after{content:"";position:absolute;left:9px;top:38px;width:8px;height:8px;border-radius:50%;background:#33363d}.dpad .arm{position:absolute;top:29px;width:42px;height:26px;border:0;padding:0;background:var(--key);box-shadow:0 2px 0 var(--key-lo);cursor:pointer}.dpad .arm.left{left:0;border-radius:5px 0 0 5px}.dpad .arm.right{right:0;border-radius:0 5px 5px 0}.dpad .arm:after{content:"";position:absolute;top:8px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent}.dpad .arm.left:after{left:9px;border-right:7px solid var(--key-face)}.dpad .arm.right:after{right:9px;border-left:7px solid var(--key-face)}.dpad .arm.on{background:#1c1e23;box-shadow:0 1px 0 var(--key-lo);transform:translateY(1px)}.face{position:relative;width:94px;height:66px;flex:none}.round{position:absolute;width:42px;height:42px;border:0;border-radius:50%;background:var(--btn);box-shadow:0 3px 0 var(--btn-lo),inset 0 1px #ffffff2e;cursor:pointer;font:inherit;font-size:10px;letter-spacing:.1em;color:#fff9;display:grid;place-items:center}.round.b{left:0;top:24px}.round.a{right:0;top:0}.round.on{background:#8d3423;box-shadow:0 1px 0 var(--btn-lo),inset 0 1px #ffffff1f;transform:translateY(2px)}.menu-row{display:flex;justify-content:center;gap:18px;padding:14px 0 10px}.pill{border:0;padding:0;width:52px;height:13px;border-radius:7px;background:var(--key);box-shadow:0 2px 0 var(--key-lo);transform:skew(-20deg);cursor:pointer;position:relative}.pill span{position:absolute;left:0;top:15px;width:100%;transform:skew(20deg);font-size:8px;letter-spacing:.18em;color:var(--etch);text-shadow:0 1px 0 rgba(255,255,255,.45)}.pill.on{background:#1c1e23;box-shadow:0 1px 0 var(--key-lo);transform:skew(-20deg) translateY(1px)}.foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:10px 2px 0;height:30px}.etch{font-size:11px;letter-spacing:.16em;color:var(--etch);text-shadow:0 1px 0 rgba(255,255,255,.45)}.grille{width:52px;height:18px;transform:skew(-22deg);background:repeating-linear-gradient(to right,var(--shell-lo) 0 3px,transparent 3px 9px);box-shadow:1px 0 #ffffff59}button:focus-visible{outline:2px solid #ff7a2f;outline-offset:3px}@media (max-height: 720px),(max-width: 420px){:root{--pad: 10px;--bezel-pad: 6px}#room{padding:8px 6px}.dpad{width:70px;height:70px}.dpad .stem{left:24px;width:22px;height:70px}.dpad .stem:after{left:7px;top:31px}.dpad .arm{top:24px;width:35px;height:22px}.dpad .arm:after{top:6px}.face{width:82px;height:58px}.round{width:37px;height:37px}.round.b{top:21px}.menu-row{padding:10px 0 6px}.foot{height:24px;padding-top:6px}.grille{width:42px;height:14px}}@media (prefers-reduced-motion: reduce){#scan{display:none}.switch .knob{transition:none}}#piano{width:min(560px,100%);background:var(--wood);border-radius:10px 10px 6px 6px;padding:12px;box-shadow:inset 0 1px 0 var(--wood-hi),inset 0 -3px 0 var(--wood-lo),inset 0 0 0 1px #2e1c0e,0 18px 40px #0000008c}.piano-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 10px}.nameplate{font-size:11px;letter-spacing:.3em;color:var(--amber);text-shadow:0 1px 0 #2e1c0e}.piano-readout{min-width:62px;text-align:center;font-size:12px;letter-spacing:.16em;color:#9fe6cf;background:#10231d;border:1px solid #2e1c0e;border-radius:3px;padding:4px 8px}.piano-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:0 4px 10px}.voices{display:flex;gap:5px}.tab{border:1px solid #2e1c0e;background:#4f3420;color:#c9b79a;font:inherit;font-size:9px;letter-spacing:.14em;padding:6px 9px;border-radius:3px;cursor:pointer}.tab[aria-pressed=true]{background:var(--amber);color:#2e1c0e;border-color:#8a5a12}.octave{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.14em;color:#c9b79a}.octave button{width:24px;height:24px;border:1px solid #2e1c0e;background:#4f3420;color:var(--cream);font:inherit;font-size:14px;line-height:1;border-radius:3px;cursor:pointer}.keybed{position:relative;height:min(200px,34dvh);background:#1b1008;border-radius:3px;padding:4px 4px 0;touch-action:none;overflow:hidden}.key{position:absolute;top:4px;border:0;padding:0;cursor:pointer;font:inherit;touch-action:none}.key.white{height:calc(100% - 4px);background:var(--cream);border-radius:0 0 4px 4px;box-shadow:inset -2px 0 #b9b3a4,inset 0 -4px #b9b3a4;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}.key.white .cap{font-size:9px;letter-spacing:.1em;color:#9d9789}.key.white.down{background:#cdc7b8;box-shadow:inset -2px 0 #a8a294,inset 0 -2px #a8a294}.key.black{height:60%;background:#15121a;border-radius:0 0 3px 3px;box-shadow:inset 0 -4px #000;z-index:2}.key.black.down{background:#2a2434;box-shadow:inset 0 -2px #000}.piano-help{padding:10px 4px 0;font-size:10px;letter-spacing:.1em;color:#b09776}#radio{width:min(460px,100%)}.radio-case{display:flex;gap:12px;background:var(--wood);border-radius:12px 12px 6px 6px;padding:14px;box-shadow:inset 0 1px 0 var(--wood-hi),inset 0 -3px 0 var(--wood-lo),inset 0 0 0 1px #2e1c0e,0 18px 40px #0000008c}.radio-speaker{flex:1 1 46%;min-height:116px;background:#241608;border-radius:6px;box-shadow:inset 0 2px 6px #0009;padding:10px;display:flex;align-items:flex-end;position:relative;overflow:hidden}.radio-speaker:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to right,#3b2712 0 2px,transparent 2px 6px);opacity:.55}.meter{position:relative;display:flex;align-items:flex-end;gap:3px;width:100%;height:100%}.meter span{flex:1;height:8%;background:#6b4a20;border-radius:1px;transition:height 90ms linear}#radio.on .meter span{background:var(--amber)}.radio-right{flex:1 1 54%;display:flex;flex-direction:column;gap:10px}.dial{position:relative;background:#ded0ab;border:1px solid #2e1c0e;border-radius:4px;padding:10px 8px 12px;text-align:center;overflow:hidden}.dial:before{content:"";position:absolute;left:8px;right:8px;top:6px;height:6px;background:repeating-linear-gradient(to right,#8a7448 0 1px,transparent 1px 7px)}.needle{position:absolute;top:3px;width:2px;height:13px;background:#b3402c;transition:left .2s ease}.dial-name{display:block;margin-top:10px;font-size:13px;letter-spacing:.16em;color:#2e1c0e}.dial-strap{display:block;font-size:9px;letter-spacing:.18em;color:#6b5433}.radio-knobs{display:flex;gap:8px;align-items:stretch}.radio-knobs button{flex:1;border:1px solid #2e1c0e;background:#4f3420;color:var(--cream);font:inherit;font-size:11px;letter-spacing:.14em;padding:9px 4px;border-radius:4px;cursor:pointer}.radio-knobs button[data-radio=power]{flex:1.6;background:var(--btn);border-color:var(--btn-lo)}.radio-knobs button[data-radio=power][aria-pressed=true]{background:#2f7a5f;border-color:#17513c}.stations{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.station{text-align:left;border:1px solid #22262f;background:#13151a;color:var(--etch);font:inherit;padding:9px 11px;border-radius:4px;cursor:pointer}.station b{display:block;font-size:11px;letter-spacing:.16em;font-weight:400;color:#c9c3b6}.station i{font-style:normal;font-size:9px;letter-spacing:.18em;color:#5b6474}.station[aria-current=true]{border-color:var(--amber)}.station[aria-current=true] b{color:var(--amber)}@media (max-width: 420px){.stations{grid-template-columns:1fr}.radio-case{flex-direction:column}.radio-speaker{min-height:74px}}#drums{width:min(660px,100%);background:#23252c;border-radius:10px;padding:14px;box-shadow:inset 0 1px #3c4049,inset 0 -3px #14161a,inset 0 0 0 1px #0d0e12,0 18px 40px #0000008c}.drum-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:12px}.transport{display:flex;gap:6px}.transport button{border:1px solid #0d0e12;background:#3a3e47;color:#cfd3da;font:inherit;font-size:10px;letter-spacing:.14em;padding:8px 12px;border-radius:3px;cursor:pointer}.transport button[data-drum=play]{background:var(--btn);border-color:var(--btn-lo);color:#fff;min-width:62px}.transport button[data-drum=play][aria-pressed=true]{background:#2f7a5f;border-color:#17513c}.tempo{display:flex;align-items:center;gap:12px;padding-bottom:12px;font-size:10px;letter-spacing:.14em;color:#8f96a3}.tempo b{color:var(--amber);font-weight:400}.tempo input{flex:1;accent-color:#d8873a}.playhead{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;margin-left:58px;margin-bottom:5px}.playhead span{height:3px;background:#2f333b;border-radius:1px}.playhead span.downbeat{background:#454a55}.playhead span.now{background:var(--amber)}.grid{display:flex;flex-direction:column;gap:4px}.row{display:flex;align-items:center;gap:6px}.row-label{width:52px;flex:none;font-size:9px;letter-spacing:.12em;color:#79808d}.lane{flex:1;display:grid;grid-template-columns:repeat(16,1fr);gap:3px}.cell{aspect-ratio:1;min-height:18px;border:1px solid #14161a;background:#2d313a;border-radius:2px;padding:0;cursor:pointer}.cell.downbeat{background:#363b45}.cell.on{background:#d8873a;border-color:#8a5118;box-shadow:inset 0 1px #f2b56d}.cell.lit{outline:1px solid #6fe0bc;outline-offset:-1px}.cell.on.lit{background:#ffd47a}.drum-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:14px}.drum-foot p{font-size:10px;letter-spacing:.1em;color:#6c7381}.drum-foot button{border:1px solid #3a3e47;background:transparent;color:var(--amber);font:inherit;font-size:10px;letter-spacing:.12em;padding:8px 12px;border-radius:3px;cursor:pointer}.dial-script{display:block;margin-top:8px;font-size:15px;line-height:1.2;color:#2e1c0e}.dial-script:empty{display:none}.station em{display:block;font-style:normal;font-size:12px;color:#8d8478;margin-top:1px}@media (max-width: 560px){.row-label{width:34px;font-size:8px}.playhead{margin-left:40px}.cell{min-height:14px}.lane,.playhead{gap:2px}}#photo{width:min(420px,100%);background:#23252c;border-radius:10px;padding:14px;box-shadow:inset 0 1px #3c4049,inset 0 -3px #14161a,inset 0 0 0 1px #0d0e12,0 18px 40px #0000008c}.photo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px}.viewfinder{position:relative;background:#0d0e12;border-radius:6px;padding:10px;box-shadow:inset 0 2px 6px #0009;display:flex;justify-content:center}.viewfinder canvas{display:block;width:100%;max-width:320px;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:2px}.finder-frame{position:absolute;inset:10px;pointer-events:none}.finder-frame:before,.finder-frame:after{content:"";position:absolute;width:14px;height:14px;border:2px solid rgba(255,193,46,.7)}.finder-frame:before{top:4px;left:4px;border-right:0;border-bottom:0}.finder-frame:after{bottom:4px;right:4px;border-left:0;border-top:0}.films{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px 0}.film{border:1px solid #0d0e12;background:#2d313a;border-radius:4px;padding:6px 4px;cursor:pointer;font:inherit}.film .swatch{display:flex;height:10px;border-radius:2px;overflow:hidden;margin-bottom:5px}.film .swatch i{flex:1}.film b{display:block;font-size:8px;letter-spacing:.12em;font-weight:400;color:#79808d}.film[aria-pressed=true]{border-color:var(--amber)}.film[aria-pressed=true] b{color:var(--amber)}.photo-actions{display:flex;gap:8px}.photo-actions button{border:1px solid #0d0e12;font:inherit;font-size:10px;letter-spacing:.14em;padding:11px 14px;border-radius:4px;cursor:pointer}.shutter{flex:1;background:var(--btn);border-color:var(--btn-lo);color:#fff}.keep{flex:1;background:#2f7a5f;border-color:#17513c;color:#fff}.ghost{background:#3a3e47;color:#cfd3da}.link{border:0;background:none;color:var(--amber);font:inherit;font-size:10px;text-decoration:underline;cursor:pointer;padding:0}#photo[data-mode=idle] .shutter,#photo[data-mode=denied] .shutter,#photo[data-mode=live] [data-photo=retake],#photo[data-mode=live] .keep,#photo[data-mode=idle] [data-photo=retake],#photo[data-mode=idle] .keep,#photo[data-mode=denied] [data-photo=retake],#photo[data-mode=denied] .keep,#photo[data-mode=review] .shutter{display:none}#photo[data-mode=denied] .films,#photo[data-mode=denied] [data-photo=flip]{opacity:.35;pointer-events:none}.photo-status{padding-top:12px;font-size:10px;letter-spacing:.1em;color:#9aa2ae;min-height:14px}.photo-small{padding-top:8px;font-size:10px;line-height:1.55;letter-spacing:.04em;color:#656c79}