*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #1a1a1a;--surface: #2a2a2a;--border: #444;--accent: #f0a000;--accent-dim: #7a5200;--text: #e8e8e8;--text-dim: #888;--beat-dot: #444;--beat-active: #f0a000;--beat-accent-base: #e05000;--radius: 8px}body{background:var(--bg);color:var(--text);font-family:Courier New,Courier,monospace;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:24px 16px}.metronome{width:100%;max-width:480px;display:flex;flex-direction:column;gap:20px}.metronome-header h1{font-size:14px;letter-spacing:4px;text-transform:uppercase;color:var(--text-dim);text-align:center}.beat-indicator{display:flex;justify-content:center;gap:10px;min-height:28px;align-items:center}.beat-indicator--empty{color:var(--text-dim);font-size:20px}.beat-dot{width:20px;height:20px;border-radius:50%;background:var(--beat-dot);transition:background 60ms ease}.beat-dot--accent{background:var(--beat-accent-base);opacity:.5}.beat-dot--active{background:var(--beat-active)!important;opacity:1;box-shadow:0 0 8px var(--beat-active)}.tempo-display{text-align:center;padding:16px;background:var(--surface);border-radius:var(--radius);border:1px solid var(--border)}.bpm-number{font-size:80px;font-weight:700;line-height:1;letter-spacing:-2px;color:var(--accent)}.bpm-unit{font-size:13px;letter-spacing:3px;color:var(--text-dim);margin-top:4px}.tempo-name{font-size:15px;color:var(--text-dim);margin-top:6px;letter-spacing:1px}.tempo-controls{display:flex;gap:12px;justify-content:center;align-items:center}.tempo-btn{width:60px;height:60px;font-size:22px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.tempo-btn:active{background:var(--accent-dim)}.tap-btn{flex:1;max-width:160px;height:60px;font-size:16px;font-family:inherit;letter-spacing:3px;background:var(--surface);color:var(--accent);border:1px solid var(--accent-dim);border-radius:var(--radius);cursor:pointer;-webkit-user-select:none;user-select:none}.tap-btn:active{background:var(--accent-dim)}.transport-btn{width:100%;height:64px;font-size:18px;font-family:inherit;letter-spacing:3px;background:var(--surface);color:var(--text);border:2px solid var(--border);border-radius:var(--radius);cursor:pointer}.transport-btn--playing{border-color:var(--accent);color:var(--accent)}.transport-btn:active{opacity:.8}.controls-row{display:flex;gap:16px}.step-mode-selector{display:flex;flex-direction:column;gap:6px}.control-label{font-size:11px;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase}.btn-group{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.mode-btn{flex:1;padding:8px 6px;font-size:11px;font-family:inherit;letter-spacing:1px;background:var(--surface);color:var(--text-dim);border:none;cursor:pointer}.mode-btn+.mode-btn{border-left:1px solid var(--border)}.mode-btn--active{background:var(--accent-dim);color:var(--accent)}.beat-selector{flex:1;display:flex;flex-direction:column;gap:6px}.beat-btn-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.beat-btn{aspect-ratio:1;font-size:13px;font-family:inherit;background:var(--surface);color:var(--text-dim);border:1px solid var(--border);border-radius:4px;cursor:pointer}.beat-btn--active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-dim)}.rhythm-selector{display:flex;flex-direction:column;gap:6px}.rhythm-btn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.rhythm-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;font-family:inherit;background:var(--surface);color:var(--text-dim);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer}.rhythm-btn--active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-dim)}.rhythm-icon{font-size:16px}.rhythm-label{font-size:9px;letter-spacing:.5px;text-align:center;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}