:root { color-scheme: dark; --bg: #101216; --fg: #d8dce4; --dim: #8a92a0; --accent: #6fb1ff; --panel: #1a1e26; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 14px/1.4 system-ui, sans-serif; }
body { display: flex; flex-direction: column; }
header { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 6px 16px; background: var(--panel); border-bottom: 1px solid #2a303b; }
header h1 { margin: 0; font-size: 15px; font-weight: 600; }
header .grow { flex: 1; }
button, select, label.btn { background: #252b36; color: var(--fg); border: 1px solid #3a4250; border-radius: 4px; padding: 3px 10px; font: inherit; cursor: pointer; }
button:hover, label.btn:hover { border-color: var(--accent); }
#status { color: var(--dim); font: 12px ui-monospace, monospace; }
#stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; background: #000; }
#screen { image-rendering: pixelated; background: #000; display: block; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(8, 10, 14, .86); text-align: center; padding: 16px; }
.overlay[hidden] { display: none; }
.overlay .box { max-width: 560px; }
#drop { border: 2px dashed #3a4250; border-radius: 8px; padding: 18px 24px; }
#drop.over { border-color: var(--accent); }
#msg { color: #ffb86b; min-height: 1.4em; }
.small { color: var(--dim); font-size: 12px; }
input[type=file] { display: none; }
table.keys { margin: 12px auto 0; border-collapse: collapse; text-align: left; font-size: 13px; }
table.keys th { padding: 3px 14px 3px 0; color: var(--accent); font-weight: 600; white-space: nowrap; vertical-align: top; }
table.keys td { padding: 3px 0; }
.note { margin: 10px auto 0; max-width: 520px; color: #ffd28a; font-size: 13px; }
#help .box { background: var(--panel); border: 1px solid #3a4250; border-radius: 8px; padding: 14px 22px; }
@media (max-width: 520px) { table.keys th { white-space: normal; } }
#stage.scroll { display: block; overflow: auto; }
#stage.scroll #screen { margin: 0 auto; }
.disks { display: inline-flex; align-items: center; gap: 4px; }
.disks button.on { border-color: var(--accent); background: #24406a; }
.disks .led { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: #3a2a10; border: 1px solid #5a4a30; }
.disks .led.on { background: #ffb020; border-color: #ffd070; box-shadow: 0 0 6px #ffb020; }
#warp { position: absolute; top: 10px; left: 10px; padding: 3px 9px; background: rgba(20, 20, 20, .8); color: #ffd020; font: bold 16px ui-monospace, monospace; border-radius: 4px; pointer-events: none; }
#warp[hidden] { display: none; }
#b-warp.on { border-color: #ffd020; color: #ffd020; }
#states .box { background: var(--panel); border: 1px solid #3a4250; border-radius: 8px; padding: 14px 22px; }
#states table.slots td { padding: 3px 8px 3px 0; }
#states button.main { border-color: var(--accent); }
button.start-big { font-size: 28px; font-weight: 600; padding: 18px 44px; border: 2px solid var(--accent); border-radius: 10px; background: #1d3a63; }
button.start-big:hover { background: #24497c; }

header .sound { display:inline-flex; align-items:center; gap:6px; }
header .sound label { display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
header .sound input[type=range] { width:90px; }
#states .box { background: var(--panel); border: 1px solid #3a4250; border-radius: 8px; padding: 14px 22px; }
#states table.slots td { padding: 3px 8px 3px 0; }
#states button.main { border-color: var(--accent); }