:root{--bg:#14110E;--surface:#1E1A15;--surface-2:#241F18;--line:#352D23;--text:#F2EBDD;--muted:#9A8E7B;
  --amber:#FF8A3D;--amber-dim:#a85e2b;--teal:#5BE0C8;--teal-dim:#2c6c63;--radius:14px;}
*{box-sizing:border-box} html,body{margin:0}
body{background:radial-gradient(900px 520px at 80% -12%,#251d13 0%,transparent 60%),var(--bg);
  color:var(--text);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5}
.wrap{max-width:840px;margin:0 auto;padding:38px 22px 90px}
header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.mark{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:31px;letter-spacing:-.02em;line-height:1}
.mark b{color:var(--amber)}
.tag{color:var(--muted);font-size:13.5px;font-family:'JetBrains Mono',monospace}
.panel{margin-top:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
label.field{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-weight:600}
.sub{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:18px 0 9px;display:flex;justify-content:space-between;align-items:center}
.sub b{color:var(--text);font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11px}
textarea{width:100%;resize:vertical;min-height:72px;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font-family:'JetBrains Mono',monospace;font-size:15px;padding:12px 14px}
textarea:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:transparent}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{background:var(--surface-2);border:1px solid var(--line);color:var(--text);font-family:'JetBrains Mono',monospace;
  font-size:12.5px;padding:6px 11px;border-radius:999px;cursor:pointer;transition:border-color .15s,color .15s}
.chip:hover{border-color:var(--amber);color:var(--amber)}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
button{font-family:Inter,sans-serif;cursor:pointer;border-radius:10px;font-weight:600;font-size:15px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);padding:11px 16px;
  transition:transform .05s,background .15s,border-color .15s,color .15s}
button:active{transform:translateY(1px)}
button.primary{background:var(--amber);border-color:var(--amber);color:#1b0f04}
button.primary:hover{background:#ff9a55}
button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
button:disabled{opacity:.42;cursor:not-allowed}
button.on{border-color:var(--teal);color:var(--teal)}
select{background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:8px 10px;
  font-family:'JetBrains Mono',monospace;font-size:13px}
select:disabled{opacity:.45}
.keysel{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}
.readout{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:13px}
.readout div span{color:var(--muted);display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.readout div b{font-weight:500}
.viz{margin-top:18px;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg)}
canvas{width:100%;height:110px;display:block;border-radius:8px}
.barsel{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;margin:14px 0 10px}
.barbox{height:18px;border-radius:4px;background:var(--surface-2);border:1px solid transparent;cursor:pointer;transition:box-shadow .1s,border-color .1s,filter .1s}
.barbox.sel{border-color:var(--amber)}
.barbox.play{box-shadow:0 0 0 2px var(--amber-dim),0 0 9px var(--amber-dim);filter:brightness(1.35)}
.barbox.sel.play{box-shadow:0 0 0 2px var(--amber),0 0 9px var(--amber)}
.lanes{user-select:none;-webkit-user-select:none}
.lane{display:grid;grid-template-columns:50px 1fr;align-items:center;gap:10px;margin:5px 0}
.lane .name{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:.03em}
.steps{display:grid;grid-template-columns:repeat(16,1fr);gap:4px}
.cell{aspect-ratio:1/1;border-radius:3px;background:var(--surface-2);cursor:pointer;touch-action:none;transition:background .08s,box-shadow .08s}
.cell:hover{background:#3a3127}
.cell.on{background:var(--teal-dim)}
.cell.on:hover{background:#3a7a70}
.cell.hit{background:var(--teal);box-shadow:0 0 10px var(--teal)}
.cell.head{outline:1px solid var(--amber)}
.hint{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);margin-top:8px}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.tools button{font-family:'JetBrains Mono',monospace;font-size:12px;padding:8px 11px}
.tools .vb{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);margin-right:4px}
.glob{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:6px}
.glob .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;justify-content:space-between}
.glob .k b{color:var(--text);font-family:'JetBrains Mono',monospace;font-weight:500}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:5px;border-radius:999px;background:var(--surface-2);margin-top:8px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--amber);cursor:pointer;border:none}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--amber);cursor:pointer;border:none}
input[type=range]:disabled{opacity:.4}
.strips{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:8px}
.strip{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px}
.strip .m{width:100%;font-family:'JetBrains Mono',monospace;font-size:11.5px;padding:7px 6px;margin-bottom:9px}
.strip .m.off{opacity:.45;text-decoration:line-through}
.strip .k{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.realinst{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}
.realinst select{flex:0 1 220px}
.realinst .rihint{font-size:11px;color:var(--amber)}
.sound{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:6px}
.sound .c{display:flex;flex-direction:column;gap:6px}
.sound .c span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sound select{width:100%}
.fx{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-top:12px;align-items:end}
.takes{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.take{background:var(--surface-2);border:1px solid var(--line);color:var(--text);font-family:'JetBrains Mono',monospace;
  font-size:12px;padding:6px 10px;border-radius:8px;cursor:pointer}
.take:hover{border-color:var(--teal);color:var(--teal)}
footer{margin-top:22px;color:var(--muted);font-size:12.5px;font-family:'JetBrains Mono',monospace;line-height:1.7}
a{color:var(--amber)}
@media (max-width:640px){.lane{grid-template-columns:40px 1fr}.steps,.barsel{gap:3px}.glob,.sound,.fx{grid-template-columns:1fr 1fr}.strips{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.cell{transition:none}button:active{transform:none}}