:root{--bg:#14161a;--panel:#1d2026;--text:#e8eaed;--muted:#8a9099;--accent:#ff8a3d;--strong:#ff8a3d;--medium:#5fa8d3;--soft:#4a7a9a;--off:#2a2e35}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,sans-serif}#app{max-width:560px;margin:0 auto;padding:16px}.tab-bar{gap:8px;margin-bottom:24px;display:flex}.tab-bar button{background:var(--panel);color:var(--muted);cursor:pointer;border:0;border-radius:8px;flex:1;padding:10px;font-size:1rem}.tab-bar button[aria-selected=true]{background:var(--accent);color:#14161a;font-weight:600}.panel{flex-direction:column;align-items:center;gap:24px;display:flex}.panel[hidden]{display:none}button,input,select{font:inherit;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.bpm-row,.sig-row{align-items:center;gap:12px;display:flex}.bpm-input{text-align:center;appearance:textfield;background:0 0;border:0;width:4.5ch;padding:0;font-size:5rem;font-weight:700}.bpm-input::-webkit-inner-spin-button{appearance:none;margin:0}.bpm-input::-webkit-outer-spin-button{appearance:none;margin:0}.beats-input::-webkit-inner-spin-button{appearance:none;margin:0}.beats-input::-webkit-outer-spin-button{appearance:none;margin:0}.step-btn{background:var(--panel);cursor:pointer;border:0;border-radius:50%;width:48px;height:48px;font-size:1.5rem}.beats-input,.note-select{border:1px solid var(--off);background:var(--panel);text-align:center;border-radius:8px;width:4rem;padding:8px;font-size:1.25rem}.beats-input{appearance:textfield}.sig-slash{color:var(--muted);font-size:1.5rem}.beats-row{align-items:flex-end;gap:6px;width:100%;height:120px;display:flex}.beat-btn{min-width:0;color:var(--bg);cursor:pointer;border:2px solid #0000;border-radius:6px;flex:1;padding:0;font-weight:600;transition:height .1s}.beat-btn[data-accent=strong]{background:var(--strong);height:100%}.beat-btn[data-accent=medium]{background:var(--medium);height:70%}.beat-btn[data-accent=soft]{background:var(--soft);height:40%}.beat-btn[data-accent=off]{background:var(--off);height:12%;color:var(--muted)}.beat-btn.current{border-color:var(--text);filter:brightness(1.3)}.start-btn{background:var(--accent);color:#14161a;cursor:pointer;border:0;border-radius:12px;width:100%;padding:16px;font-size:1.5rem;font-weight:700}.tap-btn{border:1px solid var(--off);background:var(--panel);cursor:pointer;border-radius:12px;width:100%;padding:14px;font-size:1.125rem}#drums-panel{align-items:stretch;gap:16px}.drum-controls,.swing-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.drum-field{color:var(--muted)}.drum-bpm{border:1px solid var(--off);background:var(--panel);text-align:center;border-radius:8px;width:5rem;padding:8px;font-size:1.25rem}.swing-input{min-width:100px;accent-color:var(--accent);flex:1}.swing-value{text-align:right;min-width:3ch}.swing-note-btn,.preset-select,.add-sound-select{border:1px solid var(--off);background:var(--panel);cursor:pointer;border-radius:8px;padding:8px 12px}.swing-note-btn[aria-pressed=true]{background:var(--accent);color:#14161a;font-weight:600}.add-sound-select[hidden]{display:none}.drum-grid{flex-direction:column;gap:6px;display:flex;overflow-x:auto}.drum-row{grid-template-columns:auto minmax(0,1fr);align-items:center;min-width:max-content;display:grid}.drum-head{z-index:1;background:var(--bg);align-self:stretch;align-items:center;gap:6px;padding-right:6px;display:flex;position:sticky;left:0}.drum-label{text-overflow:ellipsis;white-space:nowrap;width:6.5rem;font-size:.875rem;overflow:hidden}.drum-remove{width:28px;height:28px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:50%;padding:0}.drum-steps{grid-template-columns:repeat(var(--steps), minmax(14px, 1fr));gap:3px;display:grid}.drum-step{background:var(--off);cursor:pointer;border:2px solid #0000;border-radius:4px;min-width:14px;height:32px;padding:0}.drum-step.beat-start{background:#3a3f48}.drum-step[aria-pressed=true]{background:var(--accent)}.drum-step.current{border-color:var(--text);filter:brightness(1.4)}