:root { --bg:#000; --fg:#e8e8e8; --dim:#888; --line:#333; --hot:#ff2d55; }
:root[data-theme="light"] { --bg:#f4f4f0; --fg:#111; --dim:#666; --line:#bbb; --hot:#d0113a; }
* { 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:760px; 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; } .num { color:var(--hot); }
.lede, .hint { color:var(--dim); }
.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:8em; } input[type=range] { width:100%; padding:0; }
.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; }
.fxlist { padding-left:1.5em; } .fxlist li { margin:4px 0; }
.footer { color:var(--dim); text-align:center; margin-top:24px; }
/* layered kick */
:root { --ok:#2fd27a; } :root[data-theme="light"] { --ok:#0b7a3f; }
.sub-h { font-size:15px; letter-spacing:.08em; margin:18px 0 6px; }
.seg { display:inline-flex; flex-wrap:wrap; gap:4px; }
.seg button[aria-pressed="true"] { border-color:var(--hot); color:var(--hot); }
.layers { display:grid; gap:6px; }
.layer { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; border:1px solid var(--line); padding:6px 8px; }
.layer label { color:var(--dim); display:flex; gap:6px; align-items:center; }
.layer input[type=number] { width:5.5em; }
.layer .lv input[type=range] { width:120px; }
.layer .name { color:var(--fg); min-width:6em; }
.layer .name { font-weight:bold; letter-spacing:.06em; }
.layer .ctl { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; grid-column:1 / -1; }
.layer .ctl label { color:var(--dim); display:flex; gap:6px; align-items:center; }
.layer .ctl input[type=range] { width:120px; }
.layer .chosen { color:var(--dim); font-size:13px; }
.layer.off { opacity:.5; }
.knobs .val { color:var(--fg); }
.file input { max-width:100%; }
.targets { width:100%; border-collapse:collapse; font-size:13px; }
.targets td, .targets th { border-bottom:1px solid var(--line); padding:4px 6px; text-align:left; vertical-align:top; }
.targets .ok { color:var(--ok); } .targets .out { color:var(--hot); }
.targets .ref { color:var(--dim); }
@media (max-width:420px) { .layer .lv input[type=range] { width:96px; } .targets { font-size:12px; } }
.knobs input[type=text] { width:100%; }