.metronome{flex-direction:column;gap:var(--sp-5);padding:var(--sp-6) 0 var(--sp-4)}.metronome,.metronome-beats{display:flex;align-items:center}.metronome-beats{justify-content:center;gap:var(--sp-3);min-height:18px;flex-wrap:wrap;max-width:100%}.metronome-beat{width:12px;height:12px;border-radius:var(--radius-full);border:1.5px solid var(--gold-dim);background:transparent;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);flex-shrink:0}.metronome-beat-accent{width:16px;height:16px;border-color:var(--gold)}.metronome-beat-active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px var(--gold-glow-strong)}.metronome-beat-accent.metronome-beat-active{background:var(--gold-light);border-color:var(--gold-light)}@media (prefers-reduced-motion:reduce){.metronome-beat{transition:none}}.metronome-tempo{display:flex;flex-direction:column;align-items:center;line-height:1}.metronome-tempo-slot{width:220px;height:128px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.metronome-tempo-display,.metronome-tempo-input{font-family:var(--font-heading);font-style:italic;font-size:128px;line-height:1;color:var(--text-primary);background:none;border:none;padding:0;margin:0;cursor:pointer;text-align:center;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1,lining-nums tabular-nums;transition:color var(--transition-fast);-webkit-tap-highlight-color:transparent;width:100%;height:100%;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:textfield}.metronome-tempo-display{user-select:none;-webkit-user-select:none}.metronome-tempo-display:hover{color:var(--gold-light)}.metronome-tempo-input{cursor:text;color:var(--gold);outline:none}.metronome-tempo-input::-webkit-inner-spin-button,.metronome-tempo-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.metronome-tempo-label{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.25em;color:var(--text-muted);text-transform:uppercase;margin-top:var(--sp-2)}.metronome-slider-row{display:flex;align-items:center;gap:var(--sp-3);width:100%;max-width:360px;padding:0 var(--sp-2)}.metronome-slider-limit{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);flex-shrink:0;width:28px;text-align:center}.metronome-slider{appearance:none;flex:1 1;height:2px;background:var(--border-accent-emphasis);border-radius:var(--radius-full);outline:none;cursor:pointer;touch-action:none}.metronome-slider::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:var(--radius-full);background:var(--gold);border:2px solid var(--bg-deep);box-shadow:0 0 0 1px var(--gold-dim),var(--shadow-sm);cursor:pointer;-webkit-transition:transform var(--transition-fast);transition:transform var(--transition-fast)}.metronome-slider::-moz-range-thumb{width:22px;height:22px;border-radius:var(--radius-full);background:var(--gold);border:2px solid var(--bg-deep);box-shadow:0 0 0 1px var(--gold-dim),var(--shadow-sm);cursor:pointer;-moz-transition:transform var(--transition-fast);transition:transform var(--transition-fast)}.metronome-slider:focus-visible::-webkit-slider-thumb{transform:scale(1.1)}.metronome-slider:focus-visible::-moz-range-thumb{transform:scale(1.1)}@media (prefers-reduced-motion:reduce){.metronome-slider::-moz-range-thumb,.metronome-slider::-webkit-slider-thumb,.metronome-slider:focus-visible::-moz-range-thumb,.metronome-slider:focus-visible::-webkit-slider-thumb{-webkit-transition:none;-moz-transition:none;transition:none;transform:none}}.play-disc.metronome-disc-stopped{background:var(--gold);border-color:var(--gold);color:var(--bg-deep);box-shadow:var(--shadow-gold)}.play-disc.metronome-disc-stopped:hover{background:var(--gold-light);border-color:var(--gold-light);color:var(--bg-deep)}.metronome-controls{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;width:100%;max-width:360px}.metronome-pill{min-height:44px;min-width:72px;padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-full);background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-accent);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.1em;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2)}.metronome-pill:hover{background:var(--bg-hover);border-color:var(--border-accent-strong)}.metronome-pill:active{background:var(--bg-accent)}.metronome-pill-tap{letter-spacing:.25em;min-width:80px}.metronome-picker{flex:1 1;min-height:52px;min-width:0;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-accent);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast);-webkit-tap-highlight-color:transparent;display:inline-grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:var(--sp-2);row-gap:1px;align-items:center;text-align:left}.metronome-picker:hover{background:var(--bg-hover);border-color:var(--border-accent-strong)}.metronome-picker:active{background:var(--bg-accent)}.metronome-picker-label{grid-column:1;grid-row:1;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}.metronome-picker-value{grid-column:1;grid-row:2;font-family:var(--font-body);font-size:var(--text-base);color:var(--text-primary);line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.metronome-picker-chevron{grid-column:2;grid-row:1/span 2;color:var(--text-muted);flex-shrink:0}.metronome-picker:hover .metronome-picker-chevron{color:var(--gold)}.metronome-segmented{display:flex;width:100%;max-width:360px;background:var(--bg-elevated);border:1px solid var(--border-accent);border-radius:var(--radius-full);padding:3px;gap:2px}.metronome-segment{flex:1 1;min-height:40px;padding:var(--sp-2) var(--sp-2);background:transparent;border:none;border-radius:var(--radius-full);color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.05em;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);-webkit-tap-highlight-color:transparent;min-width:0}.metronome-segment:hover:not(.metronome-segment-selected){color:var(--text-primary);background:var(--bg-hover)}.metronome-segment-selected{background:var(--gold);color:var(--bg-deep);box-shadow:var(--shadow-gold)}@media (prefers-reduced-motion:reduce){.metronome-picker,.metronome-segment{transition:none}}.metronome-tap-hint{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.2em;color:var(--gold-muted);text-align:center;min-height:1.2em}@media (max-width:360px){.metronome-tempo-slot{width:180px;height:104px}.metronome-tempo-display,.metronome-tempo-input{font-size:104px}}