:root{color-scheme:dark;--bg:#030812;--ink:#dff7ff;--cyan:#39e7ff;--pink:#ff4fd8;--yellow:#ffe66b;--blue:#1677ff}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:"Courier New",ui-monospace,monospace}
body{min-height:100vh;display:grid;place-items:center;overflow-x:hidden}
main{width:min(100%,980px);padding:18px;text-align:center}
.eyebrow{margin:0 0 10px;color:#7184a5;font-size:12px;letter-spacing:.16em}.eyebrow a{color:#8ba5c9;text-decoration:none}.eyebrow a:hover{color:var(--cyan)}
.cabinet{position:relative;border:4px solid #0c2d72;background:#030812;box-shadow:0 0 0 2px #1677ff,0 0 42px #075dd655;aspect-ratio:20/13;overflow:hidden}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10%;background:#030812f2}
.overlay[hidden]{display:none}
h1{margin:0 0 24px;color:var(--cyan);font-size:clamp(24px,6vw,58px);letter-spacing:.08em;text-shadow:4px 4px #0b4e75}
.overlay p{max-width:620px;color:#fff;font-weight:700;letter-spacing:.08em;line-height:1.6}
button{font:inherit;font-weight:900;color:var(--bg);background:var(--yellow);border:0;box-shadow:5px 5px 0 #7f6400;padding:14px 20px;cursor:pointer;touch-action:none}
button:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #7f6400}
.overlay .secondary{margin-top:18px;color:var(--cyan);background:#071a2d;border:2px solid #15557b;box-shadow:4px 4px 0 #05101c}
.state{position:absolute;left:-10000px}
.controls{display:flex;justify-content:center;gap:20px;margin-top:18px}
.controls button{display:flex;flex-direction:column;gap:2px;min-width:112px;font-size:28px;background:var(--cyan);box-shadow:5px 5px 0 #075c69}
.controls span{font-size:13px;letter-spacing:.12em}
.hint{color:#7f91ad;font-size:13px}.hint kbd{color:#c6d8ef;border:1px solid #344760;padding:2px 5px}
.room-panel{margin:16px auto 0;display:grid;grid-template-columns:auto minmax(180px,1fr) auto;gap:10px;align-items:center;max-width:760px;color:var(--cyan);font-weight:900}.room-panel[hidden]{display:none}.room-panel input{min-width:0;padding:13px;color:#dff7ff;background:#07111f;border:2px solid #15557b;font:inherit}.room-panel button{padding:12px 15px;font-size:13px}
body[data-mode="stopped"] .cabinet{box-shadow:0 0 0 2px #20405e}
@media (min-width:800px) and (pointer:fine){.controls{display:none}}
@media (max-width:520px){main{padding:8px}.cabinet{border-width:2px}.hint{font-size:11px}.overlay p{font-size:12px}button{padding:12px 16px}.room-panel{grid-template-columns:1fr}.room-panel input{width:100%}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}