:root{--green: #2e7d62;--ink: #0d3527;--rim: #1f6650;--grey: #9aa79f;--grey-pressed: #7c8981;--switch-track: #6f7a72;--lamp: #e8935a;--lamp-lit: #f7b184;--orange: #e0651f;--terracotta: #d17137;--ridge: #a8420f;--screen-outer: #12140f;--screen-border: #0b100d;--screen-inner: #0a0c08;--tick: #e8935a;--marker: #e4322b;--display-ink: #efe7db;--display-line: rgba(242, 236, 226, 1);--pill-bg: #0b1d16;--bar-track: #101713;--speaker-face: #54544a;--hole: #1e1d18;--bolt: #9fb0a2;--bolt-pin: #2c3a31;--button-ink: #12251c;--ground: #2c2e2b;color-scheme:dark}*{box-sizing:border-box}button{appearance:none;-webkit-appearance:none;font:inherit;color:inherit}body{margin:0;background:var(--ground);color:var(--display-ink);font:15px/1.45 Archivo,system-ui,sans-serif;padding-bottom:env(safe-area-inset-bottom);-webkit-text-size-adjust:100%}#app{padding:60px 12px 32px}.stage{display:grid;justify-items:center;gap:14px}.fit{position:relative;width:100%}.unit{position:relative;width:460px;left:50%;margin-left:-230px;transform-origin:top center;transform:scale(var(--scale, 1))}.unit,.unit *,.unit *:before,.unit *:after{box-sizing:content-box}.antenna-mast{position:absolute;top:-46px;right:54px;width:30px;height:56px;background:var(--grey);border:3px solid var(--ink);border-radius:4px 4px 0 0;transform-origin:bottom;transform:scaleY(.3);transition:transform .15s ease}.antenna-tip{position:absolute;top:-52px;right:48px;width:42px;height:12px;background:var(--grey);border:3px solid var(--ink);border-radius:3px;transform:translateY(39px);transition:transform .15s ease}.body{position:relative;background:var(--green);border:3px solid var(--ink);border-radius:26px;box-shadow:14px 14px #0d35278c;padding:20px 20px 22px;display:flex;flex-direction:column;gap:18px}.top{display:flex;gap:16px;align-items:flex-start}.power-col{display:flex;flex-direction:column;gap:14px;align-items:center;padding-top:4px}.lamp{position:relative;width:52px;height:52px;border-radius:50%;background:var(--lamp);border:3px solid var(--ink);overflow:hidden}.lamp-glow{position:absolute;inset:0;background:var(--lamp-lit);opacity:0;transition:opacity .25s}.power{width:54px;height:119px;border-radius:30px;background:var(--switch-track);border:3px solid var(--ink);padding:2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:pointer;-webkit-tap-highlight-color:transparent}.unit.on .power{justify-content:flex-start}.power:active{transform:translateY(1px)}.power-thumb{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--grey);box-shadow:inset 0 0 0 2px #0d352759;flex:none}.power-dot{width:22px;height:22px;border-radius:50%;background:var(--orange);opacity:.45}.unit.on .power-dot{opacity:1}.screen{flex:1;min-width:0;position:relative;overflow:hidden;background:var(--screen-outer);border:4px solid var(--screen-border);border-radius:14px;padding:12px 12px 12px 32px;box-shadow:inset 0 0 0 2px #ffffff0d}.screen-head{display:flex;align-items:flex-start;gap:10px}.note{font:500 22px/1 DM Mono,ui-monospace,monospace;color:var(--display-ink);opacity:.85}.ticks{flex:1;display:grid;grid-template-columns:repeat(var(--channels, 7),1fr);gap:6px}.tick{display:flex;flex-direction:column;align-items:center;gap:5px}.tick-num{font:400 13px/1.3 DM Mono,ui-monospace,monospace;color:var(--display-line);letter-spacing:.06em;border-bottom:2px solid var(--display-line);padding-bottom:2px}.tick-bar{width:100%;height:11px;border-radius:2px;background:var(--tick);opacity:.16;box-shadow:0 0 14px #e8935ad9}.unit.on .tick-bar{opacity:1}.dial{position:relative;margin-top:16px;height:132px}.dial-bg{position:absolute;inset:0 0 0 -14px;background:var(--screen-inner);border-radius:10px}.rule{position:absolute;background:var(--display-line)}.rule-h1{left:-14px;right:0;bottom:34px;height:2.5px}.rule-h2{left:-14px;right:0;bottom:26px;height:2.5px}.rule-v1{top:0;bottom:6px;left:0;width:2.5px}.rule-v2{top:0;bottom:6px;left:7px;width:2.5px}.stem{position:absolute;width:13px;bottom:6px;display:flex;flex-direction:column;align-items:center}.stem-head{width:13px;height:13px;border-radius:50%;border:3px solid var(--display-line);background:var(--screen-inner);flex:none}.stem-stick{width:2.5px;flex:1;background:var(--display-line)}.mask-h{position:absolute;left:-14px;right:0;bottom:28.5px;height:5.5px;background:var(--screen-inner)}.mask-v{position:absolute;left:2.5px;width:4.5px;top:0;bottom:6px;background:var(--screen-inner)}.marker{position:absolute;top:0;bottom:6px;width:4px;left:2.9px;background:var(--marker);box-shadow:0 0 8px #e4322bb3;transition:left .18s ease-out}.speaker{position:relative;display:grid;place-items:center;padding:6px 0 2px}.strut{position:absolute;left:50%;top:50%;width:274px;height:34px;margin-top:-18px;background:var(--rim);border:3px solid var(--ink);border-radius:17px;transform-origin:0 50%}.speaker-rim{position:relative;z-index:1;width:400px;height:400px;border-radius:50%;background:var(--rim);border:4px solid var(--ink);display:grid;place-items:center;overflow:hidden;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}.speaker-rim:active{transform:translateY(2px)}.speaker-rim:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.speaker-face{position:relative;width:362px;height:362px;border-radius:50%;overflow:hidden;background:var(--speaker-face);box-shadow:inset 0 0 0 9px var(--ink)}.hole{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--hole);box-shadow:0 1px #ffffff1a}.bolt{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--bolt);border:2px solid var(--ink);display:grid;place-items:center}.bolt-pin{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:var(--bolt-pin);transform:translate(-50%,-50%)}.tray{display:flex;align-items:center;gap:16px;background:var(--rim);border:3px solid var(--ink);border-radius:14px;padding:12px 14px}.wheel{position:relative;width:66px;height:66px;border-radius:50%;flex:none;background:var(--terracotta);border:3px solid var(--ink);cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}.wheel.turning{cursor:grabbing}.wheel:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.wheel-indicator{position:absolute;inset:0;transition:transform .12s ease-out}.wheel.turning .wheel-indicator{transition:none}.wheel-ridge{position:absolute;left:50%;top:50%;width:3px;height:9px;margin:-4.5px 0 0 -1.5px;border-radius:1px;background:var(--ridge)}.wheel-pointer{position:absolute;left:50%;top:50%;width:4px;height:26px;margin:-26px 0 0 -2px;border-radius:2px;background:var(--ink)}.vol{width:84px;flex:none;display:grid;gap:8px}.vol-pill{font:500 11px/1 DM Mono,ui-monospace,monospace;color:var(--display-ink);background:var(--pill-bg);border-radius:4px;padding:5px 7px;letter-spacing:.1em;justify-self:start}.vol-num{display:inline-block;width:3.5ch;text-align:right;padding-right:1px}.vol-bar{height:12px;border-radius:6px;background:var(--bar-track);border:2px solid var(--screen-border);overflow:hidden}.vol-fill{height:100%;background:var(--terracotta)}.rocker{flex:1;min-width:0;height:66px;padding:0;border-radius:10px;overflow:hidden;background:var(--ink);border:3px solid var(--ink);cursor:pointer;display:grid;grid-template-rows:1fr 1fr;gap:2px;-webkit-tap-highlight-color:transparent}.rocker-half{display:grid;place-items:center;font:700 10px/1 Archivo,system-ui,sans-serif;letter-spacing:.04em;background:var(--grey);box-shadow:0 2px #0d352773;color:var(--button-ink);transition:background .12s ease,box-shadow .12s ease}.rocker-half.real{border-radius:7px 7px 2px 2px}.rocker-half.game{border-radius:2px 2px 7px 7px}.rocker:not(.game) .real,.rocker.game .game{background:var(--grey-pressed);box-shadow:inset 0 4px 7px #0d35278c;color:var(--ink)}.seek{display:flex;gap:10px;flex:none}.step{width:56px;height:66px;padding:0;border-radius:10px;background:var(--grey);border:3px solid var(--ink);cursor:pointer;font:700 22px/1 Archivo,system-ui,sans-serif;color:var(--button-ink);-webkit-tap-highlight-color:transparent}.step:active{transform:translateY(2px)}.step:disabled{cursor:default;opacity:.55}.diagnostics{margin:0;max-width:460px;font-size:12px;text-align:center}.diagnostics:empty{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.unit *,.unit{transition:none!important}}