:root { --bg:#12141a; --panel:#1b1f28; --line:#2b3140; --on:#4ade80; --on2:#22d3ee; --play:#f59e0b; }
* { box-sizing:border-box; }
body { margin:0; padding:16px; background:var(--bg); color:#e6e9ef; font:14px/1.4 system-ui,sans-serif; }
h1 { margin:0 0 12px; font-size:20px; letter-spacing:.06em; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
button, select, input[type=number] { background:var(--panel); color:#e6e9ef; border:1px solid var(--line); border-radius:6px; padding:6px 10px; font:inherit; }
button:hover { border-color:#4b5563; }
button.active { background:var(--on); color:#06210f; border-color:var(--on); font-weight:600; }
#grid { display:grid; grid-template-columns:110px repeat(16, 1fr); gap:4px; max-width:900px; }
.label { display:flex; align-items:center; font-size:12px; color:#9aa4b2; text-transform:uppercase; letter-spacing:.05em; }
.cell { aspect-ratio:1/1; background:var(--panel); border:1px solid var(--line); border-radius:5px; cursor:pointer; }
.cell.beat { border-color:#3b4354; }
.cell.on { background:var(--on); border-color:var(--on); }
.cell.on.tone { background:var(--on2); border-color:var(--on2); }
.cell.playing { box-shadow:inset 0 0 0 2px var(--play); }
.hint { color:#7c8798; font-size:12px; margin-top:12px; }