:root { --bg:#000; --fg:#e8e8e8; --dim:#888; --line:#333; --hot:#ff2d55; --kick:#ff2d55; --snare:#3fa7ff; --gap:#9a9a9a; }
:root[data-theme="light"] { --bg:#f4f4f0; --fg:#111; --dim:#666; --line:#bbb; --hot:#d0113a; --kick:#d0113a; --snare:#1769c4; --gap:#777; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.page { max-width:960px; margin:0 auto; padding:16px; }
.theme-toggle { position:fixed; top:12px; right:12px; background:none; border:1px solid var(--line); color:var(--fg); width:36px; height:36px; cursor:pointer; }
a { color:var(--fg); } h1 { letter-spacing:.08em; } h2 { font-size:1rem; letter-spacing:.06em; } .num { color:var(--hot); }
.lede, .hint, .status, .notes { color:var(--dim); } .hint { font-weight:normal; }
.moved { border:1px solid var(--hot); padding:10px 12px; margin:12px 0; } .moved a { text-decoration:none; font-weight:bold; letter-spacing:.06em; }
.bench { border-top:1px solid var(--line); padding:12px 0 20px; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
button, select, input { background:var(--bg); color:var(--fg); border:1px solid var(--line); padding:8px 10px; font:inherit; min-height:40px; }
button { cursor:pointer; } button:hover { border-color:var(--hot); }
input[type=number] { width:7em; } input[type=range] { width:100%; padding:0; min-height:28px; }
.knobs { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; }
.knobs label { display:block; color:var(--dim); }
.scope { width:100%; height:auto; border:1px solid var(--line); background:var(--bg); }
.readout { overflow-x:auto; color:var(--dim); margin:8px 0; white-space:pre; }
.grid { overflow-x:auto; }
.grid-row { display:grid; grid-template-columns:4.5em repeat(32, minmax(14px, 1fr)); gap:2px; margin:2px 0; min-width:560px; }
.grid-row span { color:var(--dim); font-size:12px; align-self:center; }
.cell { min-height:30px; padding:0; border:1px solid var(--line); }
.cell.beat { border-left-color:var(--fg); }
.cell[aria-pressed="true"] { background:var(--hot); border-color:var(--hot); }
.zone { min-height:10px; }
.zone.kick { background:var(--kick); } .zone.snare { background:var(--snare); } .zone.gap { background:transparent; border:1px solid var(--line); }
.matrix { overflow-x:auto; }
.matrix table { border-collapse:collapse; width:100%; min-width:560px; }
.matrix th, .matrix td { border:1px solid var(--line); padding:6px; text-align:left; vertical-align:top; }
.matrix th.kick { color:var(--kick); } .matrix th.snare { color:var(--snare); }
.matrix label { display:block; color:var(--dim); font-size:12px; }
.matrix input[type=range] { min-height:22px; }
.footer { color:var(--dim); text-align:center; margin-top:24px; }