:root{--bg:#0b0b12;--card-bg:#17171f;--card-border:#2a2a38;--input-bg:#12121a;--input-bg-hover:#1c1c28;--input-border:#34344a;--text:#f5f5f7;--text-muted:#9797ac;--text-faint:#6b6b80;--color-primary:#22d3ee;--color-primary-contrast:#04222a;--color-accent:#fb923c;--color-success:#34d399;--color-danger:#fb4570;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:18px/145% system-ui,Segoe UI,Roboto,sans-serif}body{margin:0}#root{flex-direction:column;height:100svh;display:flex}@media (width>=640px){#root{height:auto;min-height:100svh}}input[type=range],input[type=checkbox]{accent-color:var(--color-primary)}.tool-panel{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.3rem;min-height:0;display:flex}.bpm-display{align-items:center;gap:.3rem;display:flex}.bpm-btn{border:1px solid var(--input-border);background:var(--input-bg);width:1.4rem;height:1.4rem;color:var(--text);cursor:pointer;border-radius:50%;flex-shrink:0;font-size:.8rem;line-height:1}.bpm-btn:hover{background:var(--input-bg-hover);border-color:var(--color-primary)}.bpm-value{flex-direction:column;align-items:center;display:flex}.bpm-value input[type=number]{text-align:center;width:2.6rem;color:var(--text);-moz-appearance:textfield;background:0 0;border:none;font-size:1.1rem;font-weight:700}.bpm-value input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bpm-value input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bpm-label{letter-spacing:.1em;color:var(--text-muted);font-size:.5rem}.bpm-slider{width:100%;height:1rem}.beat-indicator{flex-wrap:wrap;justify-content:center;gap:.25rem;min-height:.7rem;display:flex}.beat-dot{background:var(--input-bg);border:2px solid var(--input-border);border-radius:50%;width:.55rem;height:.55rem;transition:background 50ms,transform 50ms}.beat-dot.accent{border-color:var(--color-accent)}.beat-dot.active{background:var(--color-primary);border-color:var(--color-primary);transform:scale(1.2)}.beat-dot.accent.active{background:var(--color-accent);border-color:var(--color-accent)}.countin-indicator{flex-direction:column;align-items:center;gap:.1rem;min-height:.7rem;display:flex}.countin-label{letter-spacing:.08em;color:var(--color-accent);text-transform:uppercase;font-size:.5rem;font-weight:700}.countin-count{font-size:.65rem;font-weight:600}.play-btn{background:var(--color-success);color:#04231a;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;width:3rem;height:3rem;font-size:.65rem;font-weight:700;transition:background .15s,transform .1s;box-shadow:0 0 #0000}.play-btn:hover{transform:scale(1.03)}.play-btn.playing{background:var(--color-danger);color:#2a0410}.tap-btn{border:1px solid var(--input-border);background:var(--input-bg);color:var(--text);cursor:pointer;border-radius:999px;flex-shrink:0;padding:.2rem .6rem;font-size:.6rem}.tap-btn:hover{background:var(--input-bg-hover);border-color:var(--color-primary)}.live-tempo{color:var(--color-accent);min-height:1.2em;font-size:.55rem;font-weight:600}.live-tempo.big{color:var(--text);font-size:.95rem;font-weight:700}.cadence-indicator{flex-wrap:wrap;justify-content:center;gap:.3rem;display:flex}.cadence-group{background:var(--input-bg);border-radius:.5rem;gap:.2rem;padding:.25rem;display:flex}.cadence-step{background:var(--text-faint);border:2px solid #0000;border-radius:50%;width:.5rem;height:.5rem;transition:background 50ms,transform 50ms,border-color 50ms}.cadence-step.cadence-rest{border:2px dashed var(--input-border);background:0 0}.cadence-step.cadence-accent{border-color:var(--color-accent);background:0 0}.cadence-step.active{transform:scale(1.4)}.cadence-step.cadence-hit.active{background:var(--color-primary)}.cadence-step.cadence-accent.active{background:var(--color-accent);border-color:var(--color-accent)}.controls{border-top:1px solid var(--card-border);flex-direction:column;gap:1rem;width:100%;margin-top:.5rem;padding-top:1rem;display:flex}.control-group{justify-content:space-between;align-items:center;gap:1rem;display:flex}.control-group label{color:var(--text-muted);white-space:nowrap;font-size:.9rem}.control-group input[type=range]{flex:1;min-width:0}.control-group select,.control-group input[type=number]{background:var(--input-bg);color:var(--text);border:1px solid var(--input-border);box-sizing:border-box;border-radius:.4rem;width:5rem;padding:.4rem .6rem}.sub-buttons{gap:.4rem;display:flex}.sub-btn{border:1px solid var(--input-border);background:var(--input-bg);color:var(--text);cursor:pointer;border-radius:.4rem;padding:.4rem .75rem}.sub-btn.active{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary)}.checkbox-group label{align-items:center;gap:.5rem;display:flex}.hint{color:var(--text-faint);margin-top:.5rem;font-size:.8rem}@media (width>=640px){.tool-panel{gap:1.25rem}.bpm-display{gap:1rem}.bpm-btn{width:3rem;height:3rem;font-size:1.5rem}.bpm-value input[type=number]{width:6rem;font-size:3rem}.bpm-label{font-size:.85rem}.beat-indicator{gap:.75rem;min-height:2rem}.beat-dot{width:1.5rem;height:1.5rem}.countin-indicator{gap:.25rem;min-height:2rem}.countin-label{letter-spacing:.1em;font-size:.8rem}.countin-count{font-size:1.1rem}.play-btn{width:8rem;height:8rem;font-size:1.25rem}.tap-btn{padding:.6rem 1.5rem;font-size:.95rem}.live-tempo{font-size:.9rem}.live-tempo.big{font-size:2rem}.cadence-indicator{gap:.6rem}.cadence-group{border-radius:.6rem;gap:.3rem;padding:.4rem}.cadence-step{width:.85rem;height:.85rem}}