.trainer-panel{width:100%;display:flex;flex-direction:column;gap:var(--sp-1);padding-top:var(--sp-3);border-top:1px solid var(--border-accent-subtle)}.trainer-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:44px}.trainer-row-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}.trainer-stepper{display:flex;align-items:center;gap:var(--sp-2)}.trainer-stepper-button{width:32px;height:32px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:var(--radius-full);background:var(--bg-elevated);border:1px solid var(--border-accent-emphasis);color:var(--text-secondary);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);-webkit-tap-highlight-color:transparent}.trainer-stepper-button svg{width:16px;height:16px;stroke-width:2}.trainer-stepper-button:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-accent-strong);color:var(--gold)}.trainer-stepper-button:active:not(:disabled){background:var(--bg-accent)}.trainer-stepper-button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}.trainer-stepper-button:disabled{opacity:.35;cursor:not-allowed}.trainer-stepper-value{min-width:76px;text-align:center;font-family:var(--font-mono);font-size:var(--text-base);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:var(--text-primary);white-space:nowrap}.trainer-stepper-unit{margin-left:.35em;font-size:var(--text-xs);color:var(--text-muted);letter-spacing:.06em}.trainer-summary{margin:var(--sp-3) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--border-accent-subtle);font-family:var(--font-body);font-size:var(--text-xs);line-height:1.5;color:var(--text-secondary);text-align:left}@media (prefers-reduced-motion:reduce){.trainer-stepper-button{transition:none}}.metronome{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);width:100%}.metronome-instrument{position:relative;isolation:isolate;display:grid;overflow:hidden;width:100%;border:1px solid var(--border-accent-emphasis);border-radius:var(--radius-xl);background:linear-gradient(145deg,var(--bg-accent-subtle),transparent 48%),var(--bg-surface);box-shadow:var(--shadow-md),inset 0 1px 0 var(--border-accent)}.metronome-instrument:before{position:absolute;z-index:-1;top:-140px;left:-110px;width:320px;height:320px;border-radius:var(--radius-full);background:radial-gradient(circle,var(--gold-glow),transparent 68%);content:"";pointer-events:none}.metronome-settings,.metronome-stage{min-width:0}.metronome-stage{align-items:center;padding:var(--sp-4) var(--sp-4) var(--sp-5)}.metronome-settings,.metronome-stage{display:flex;flex-direction:column;gap:var(--sp-3)}.metronome-settings{padding:var(--sp-3) var(--sp-4) var(--sp-4);border-top:1px solid var(--border-accent-subtle);background:color-mix(in srgb,var(--bg-elevated) 34%,transparent)}.metronome-click-settings-body{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}.metronome-beats{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);min-height:18px;max-width:100%;flex-wrap:wrap}.metronome-beat{width:12px;height:12px;flex-shrink:0;border:1.5px solid var(--gold-dim);border-radius:var(--radius-full);background:transparent;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),opacity var(--transition-fast)}.metronome-beat-accent{width:16px;height:16px;border-color:var(--gold)}.metronome-beat-active{border-color:var(--gold);background:var(--gold);box-shadow:0 0 10px var(--gold-glow-strong);transform:scale(1.08)}.metronome-beat-accent.metronome-beat-active{border-color:var(--gold-light);background:var(--gold-light)}.metronome-beats-silent .metronome-beat{border-style:dashed;opacity:.4}.metronome-status{width:100%;height:20px;min-height:20px;margin:calc(var(--sp-2) * -1) 0;overflow:hidden;color:var(--gold-muted);font-family:var(--font-mono);font-size:var(--text-xs);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;letter-spacing:.1em;line-height:20px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.metronome-tempo{display:flex;flex-direction:column;align-items:center;line-height:1}.metronome-tempo-slot{display:flex;align-items:center;justify-content:center;width:154px;height:88px;box-sizing:border-box}.metronome-tempo-display,.metronome-tempo-input{width:100%;height:100%;box-sizing:border-box;margin:0;padding:0;appearance:none;border:0;background:none;color:var(--text-primary);font-family:var(--font-heading);font-size:88px;font-style:italic;font-feature-settings:"lnum" 1,"tnum" 1,lining-nums tabular-nums;font-variant-numeric:lining-nums tabular-nums;line-height:1;text-align:center;transition:color var(--transition-fast);-moz-appearance:textfield}.metronome-tempo-display{cursor:pointer;-webkit-user-select:none;user-select:none}.metronome-tempo-display:hover{color:var(--gold-light)}.metronome-tempo-input{color:var(--gold);cursor:text;outline:none}.metronome-tempo-input::-webkit-inner-spin-button,.metronome-tempo-input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}.metronome-tempo-display-locked{display:flex;align-items:center;justify-content:center;color:var(--gold);cursor:default}.metronome-tempo-label{margin-top:var(--sp-1);color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.25em;text-transform:uppercase}.metronome-tempo-marking{min-height:1.3em;margin-top:var(--sp-1);color:var(--gold-muted);font-family:var(--font-heading);font-size:var(--text-base);font-style:italic;line-height:1.3}.metronome-slider-row{display:flex;align-items:center;gap:var(--sp-3);width:100%;max-width:300px}.metronome-slider-limit{width:28px;flex-shrink:0;color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-xs);text-align:center}.metronome-slider{flex:1 1;height:3px;appearance:none;border-radius:var(--radius-full);outline:none;background:var(--border-accent-emphasis);cursor:pointer;touch-action:none}.metronome-slider::-webkit-slider-thumb{width:22px;height:22px;appearance:none;border:2px solid var(--bg-surface);border-radius:var(--radius-full);background:var(--gold);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:2px solid var(--bg-surface);border-radius:var(--radius-full);background:var(--gold);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.12);box-shadow:0 0 0 2px var(--bg-surface),0 0 0 4px var(--gold),var(--shadow-sm)}.metronome-slider:focus-visible::-moz-range-thumb{transform:scale(1.12);box-shadow:0 0 0 2px var(--bg-surface),0 0 0 4px var(--gold),var(--shadow-sm)}.metronome-transport{--metronome-transport-size:60px;display:grid;grid-template-columns:repeat(2,var(--metronome-transport-size));align-items:center;gap:var(--sp-3)}.metronome-pill-tap,.metronome-transport .play-disc{width:var(--metronome-transport-size);height:var(--metronome-transport-size)}.metronome-tap-control{position:relative;display:flex;align-items:center;justify-content:center}.play-disc.metronome-disc-stopped{border-color:var(--gold);background:var(--gold);color:var(--bg-deep);box-shadow:var(--shadow-gold)}.play-disc.metronome-disc-stopped:hover{border-color:var(--gold-light);background:var(--gold-light);color:var(--bg-deep)}[data-theme=light] .play-disc.metronome-disc-stopped{border-color:var(--action-primary-end);background:linear-gradient(135deg,var(--action-primary-start),var(--action-primary-end));color:var(--text-on-primary);box-shadow:var(--action-primary-shadow)}[data-theme=light] .play-disc.metronome-disc-stopped:hover{border-color:var(--action-primary-hover-end);background:linear-gradient(135deg,var(--action-primary-hover-start),var(--action-primary-hover-end));color:var(--text-on-primary);box-shadow:var(--action-primary-hover-shadow)}.metronome-pill{display:inline-flex;align-items:center;justify-content:center;min-width:72px;min-height:44px;padding:var(--sp-2) var(--sp-4);border:1px solid var(--border-accent-emphasis);border-radius:var(--radius-full);background:var(--bg-elevated);color:var(--text-primary);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),transform var(--transition-fast)}.metronome-pill:hover{border-color:var(--gold-muted);background:var(--bg-hover);color:var(--gold-light)}.metronome-pill:active{background:var(--bg-accent);transform:scale(.97)}.metronome-pill-tap{min-width:var(--metronome-transport-size);min-height:var(--metronome-transport-size);padding:0;border-width:2px;letter-spacing:.18em}.metronome-tap-hint{position:absolute;top:calc(100% + var(--sp-1));left:50%;min-height:1.3em;color:var(--gold-muted);font-family:var(--font-mono);font-size:.65rem;letter-spacing:.14em;text-align:center;transform:translateX(-50%);white-space:nowrap}.metronome-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);width:100%}.metronome-picker{display:inline-grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;min-width:0;min-height:56px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--border-accent);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--text-primary);column-gap:var(--sp-2);row-gap:1px;text-align:left;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)}.metronome-picker:hover{border-color:var(--border-accent-strong);background:var(--bg-hover)}.metronome-picker:active{background:var(--bg-accent)}.metronome-picker-label,.metronome-section-label{color:var(--text-muted);font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}.metronome-picker-label{grid-row:1;grid-column:1}.metronome-picker-value{grid-row:2;grid-column:1;overflow:hidden;min-width:0;color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-base);line-height:1.15;text-overflow:ellipsis;white-space:nowrap}.metronome-picker-chevron{grid-row:1/span 2;grid-column:2;width:16px;height:16px;flex-shrink:0;color:var(--text-muted);stroke-width:1.8}.metronome-picker:hover .metronome-picker-chevron{color:var(--gold)}.metronome-subdivision{display:flex;flex-direction:column;gap:var(--sp-2)}.metronome-section-label{padding-left:var(--sp-1)}.metronome-segmented{--segment-count:1;--segment-index:0;position:relative;isolation:isolate;display:flex;width:100%;padding:3px;gap:2px;border:1px solid var(--border-accent);border-radius:var(--radius-lg);background:var(--bg-elevated)}.metronome-segmented:before{position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc((100% - 4px) / var(--segment-count) - 2px);border-radius:var(--radius-md);background:var(--gold);box-shadow:var(--shadow-gold);content:"";transform:translateX(calc(var(--segment-index) * (100% + 2px)));transition:transform var(--transition-base),background var(--transition-fast)}.metronome-segment{position:relative;z-index:1;flex:1 1;min-width:0;min-height:40px;padding:var(--sp-2) var(--sp-1);border:0;border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.03em;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast)}.metronome-segment:hover:not(.metronome-segment-selected){background:var(--bg-hover);color:var(--text-primary)}.metronome-segment-selected{background:transparent;color:var(--bg-deep);box-shadow:none}[data-theme=light] .metronome-segmented:before{background:linear-gradient(135deg,var(--action-primary-start),var(--action-primary-end));box-shadow:var(--action-primary-shadow)}[data-theme=light] .metronome-segment-selected{color:var(--text-on-primary)}.metronome-trainer-workspace{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid transparent;border-radius:var(--radius-lg);background:transparent;transition:gap var(--transition-base),padding var(--transition-base),border-color var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast)}.metronome-trainer-workspace-active{gap:var(--sp-2);padding:var(--sp-2);border-color:var(--border-accent-strong);background:var(--bg-accent-subtle);box-shadow:inset 3px 0 0 var(--gold-muted)}.metronome-trainer-row{display:flex;width:100%}.metronome-trainer-row .metronome-picker{flex:1 1}.metronome-trainer-panel-transition{overflow:hidden;transition:height var(--transition-base)}.metronome-picker:focus-visible,.metronome-pill:focus-visible,.metronome-segment:focus-visible,.metronome-tempo-display:focus-visible{outline:2px solid var(--gold);outline-offset:2px}@media (min-width:768px) and (pointer:fine),(min-width:768px) and (pointer:none){.metronome{gap:var(--sp-3)}.metronome-instrument{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}.metronome-stage{padding:var(--sp-8) var(--sp-5)}.metronome-settings,.metronome-stage{justify-content:center;gap:var(--sp-5)}.metronome-settings{padding:var(--sp-6) var(--sp-4);border-top:0;border-left:1px solid var(--border-accent-subtle)}.metronome-tempo-slot{width:200px;height:116px}.metronome-tempo-display,.metronome-tempo-input{font-size:116px}.metronome-click-settings-body{gap:var(--sp-5)}.metronome-tempo-label,.metronome-tempo-marking{margin-top:var(--sp-2)}.metronome-slider-row{max-width:360px}.metronome-transport{--metronome-transport-size:80px;gap:var(--sp-5)}.metronome-trainer-workspace-active{gap:var(--sp-3);padding:var(--sp-3)}}@media (max-width:380px){.metronome-settings,.metronome-stage{padding-right:var(--sp-4);padding-left:var(--sp-4)}.metronome-tempo-slot{width:180px;height:104px}.metronome-tempo-display,.metronome-tempo-input{font-size:104px}.metronome-controls{gap:var(--sp-2)}.metronome-picker{padding-right:var(--sp-2);padding-left:var(--sp-2)}.metronome-segment{font-size:.68rem}}@media (prefers-reduced-motion:reduce){.metronome-beat,.metronome-picker,.metronome-pill,.metronome-segment,.metronome-segmented:before,.metronome-trainer-panel-transition,.metronome-trainer-workspace{transition:none}.metronome-slider::-webkit-slider-thumb{-webkit-transition:none;transition:none}.metronome-slider::-moz-range-thumb{-moz-transition:none;transition:none}.metronome-beat-active,.metronome-pill:active{transform:none}.metronome-slider:focus-visible::-webkit-slider-thumb{transform:none}.metronome-slider:focus-visible::-moz-range-thumb{transform:none}}