.metronome-stage{min-width:0;padding:calc(.75rem + var(--safe-top,0px)) 1rem 0;flex:1;justify-content:center;display:flex;container:metronome/inline-size}.metronome-stage[data-embedded=false]{flex:1 0 auto;height:100svh;overflow:hidden;container-type:size}.metronome-stage[data-embedded=true]{border-radius:1rem;padding:.75rem 1rem}.metronome-face{flex-direction:column;gap:12px;width:100%;max-width:30rem;min-height:0;display:flex}.metronome-stage[data-embedded=false] .metronome-face{height:100%}.metronome-display{overscroll-behavior:contain;scrollbar-width:none;flex-direction:column;flex:auto;gap:12px;min-height:0;display:flex;overflow-y:auto}.metronome-display::-webkit-scrollbar{display:none}.metronome-display>*{flex-shrink:0}.metronome-controls{flex-direction:column;flex:none;gap:14px;padding:4px 0 18px;display:flex}.metronome-stage[data-embedded=true] .metronome-controls{padding-bottom:0}.metronome-topline{justify-content:space-between;align-items:center;min-height:22px;display:flex}.metronome-title{align-items:center;gap:8px;display:inline-flex}.metronome-led[data-state=signal]{animation:.24s cubic-bezier(.1,.7,.3,1) forwards metronome-led-pulse}.metronome-led[data-downbeat=true]{animation-name:metronome-led-downbeat}@keyframes metronome-led-pulse{0%{opacity:1;transform:scale(1.3)}to{opacity:.45;transform:scale(1)}}@keyframes metronome-led-downbeat{0%{opacity:1;transform:scale(1.6)}to{opacity:.45;transform:scale(1)}}.metronome-odometer{display:inline-flex}.metronome-odometer-column{height:1em;transition:color .2s;display:block;overflow:hidden}.metronome-odometer-column[data-leading=true]{color:var(--vi-ink-3)}.metronome-odometer-strip{transform:translateY(calc(var(--odometer-index,0) * -1em));display:block}.metronome-odometer-strip.is-rolling{transition:transform .28s var(--vi-ease-out)}.metronome-odometer-strip>span{text-align:center;height:1em;line-height:1em;display:block}.metronome-tempo{justify-content:space-between;align-items:flex-end;gap:12px;display:flex}.metronome-bpm{letter-spacing:-.01em;margin-left:-3px;font-size:clamp(3.5rem,min(30cqw,17svh),8.6rem);font-weight:800;font-stretch:68%}.metronome-stage[data-embedded=true] .metronome-bpm{font-size:5.5rem}.metronome-tempo-meta{text-align:right;flex-direction:column;align-items:flex-end;gap:4px;padding-bottom:12px;display:flex}.metronome-marking{font-family:var(--vi-mono);letter-spacing:.12em;text-transform:uppercase;animation:metronome-marking-in .2s var(--vi-ease-out);font-size:13px;font-weight:600}@keyframes metronome-marking-in{0%{opacity:0;transform:translateY(6px)}}.metronome-meta{font-family:var(--vi-mono);color:var(--vi-ink-2);font-variant-numeric:tabular-nums;font-size:11px}.metronome-measure{flex-direction:column;flex:1 1 0;gap:10px;min-height:104px;padding:10px 12px 8px;display:flex}.metronome-hint{color:var(--vi-ink-2);text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.metronome-rest{color:var(--vi-signal)}.metronome-chart-frame{--metronome-beat-gap:6px;flex-direction:column;flex:1;min-height:0;padding-left:22px;display:flex}.metronome-chart{grid-template-columns:repeat(var(--metronome-beats), minmax(0, 1fr));column-gap:var(--metronome-beat-gap);touch-action:none;flex:1;min-height:40px;display:grid;position:relative}.metronome-chart[data-dense=true]{--metronome-beat-gap:4px}.metronome-chart:after{background:var(--vi-ink-2);content:"";height:1px;position:absolute;bottom:0;left:0;right:0}.metronome-chart-axis{pointer-events:none;position:absolute;inset:0}.metronome-chart-axis>span{color:var(--vi-ink-3);pointer-events:none;font-size:10px;line-height:10px;position:absolute;left:-22px;transform:translateY(-5px)}.metronome-chart-line{border-top:1px dashed var(--vi-line);pointer-events:none;position:absolute;left:0;right:0}.metronome-beat{cursor:pointer;transform-origin:50% 100%;min-width:0;animation:metronome-beat-in .34s var(--vi-ease-out) backwards;animation-delay:calc(var(--metronome-beat-index,0) * 26ms);background:0 0;border:0;gap:2px;padding:0;display:flex;position:relative}.metronome-chart[data-dense=true] .metronome-beat{gap:1px}@keyframes metronome-beat-in{0%{opacity:0;transform:scaleY(0)}}.metronome-cell{flex:1;align-items:flex-end;min-width:0;display:flex}.metronome-bar{width:100%;height:var(--metronome-level,14%);background:var(--vi-ink);transition:height .32s var(--vi-ease-spring), opacity .2s, background-color 70ms;border-radius:2px 2px 0 0;display:block}.metronome-cell[data-step=subdivision] .metronome-bar{background:var(--vi-ink-3)}.metronome-beat[data-level="0"] .metronome-cell[data-step=subdivision] .metronome-bar{opacity:.35}.metronome-cell[data-on=true] .metronome-bar{background:var(--vi-signal)}.metronome-chart[data-resting=true] .metronome-bar{opacity:.25}.metronome-silent-mark{width:10px;height:10px;position:absolute;bottom:6px;left:50%;transform:translate(-50%)}.metronome-silent-mark:before,.metronome-silent-mark:after{background:var(--vi-ink-2);content:"";width:1.5px;height:12px;position:absolute;top:-1px;left:4.25px}.metronome-silent-mark:before{transform:rotate(45deg)}.metronome-silent-mark:after{transform:rotate(-45deg)}.metronome-playhead{background:var(--vi-signal);opacity:0;pointer-events:none;will-change:transform;width:2px;margin-left:-1px;transition:opacity .15s;position:absolute;top:-6px;bottom:-4px;left:0}.metronome-playhead[data-on=true]{opacity:1}.metronome-beat-numbers,.metronome-beat-groups{grid-template-columns:repeat(var(--metronome-beats), minmax(0, 1fr));column-gap:var(--metronome-beat-gap);display:grid}.metronome-beat-numbers>span{font-family:var(--vi-mono);color:var(--vi-ink-3);padding-top:4px;font-size:10px;line-height:1;transition:color .12s}.metronome-beat-numbers>span[data-current=true]{color:var(--vi-ink)}.metronome-beat-groups{height:18px;margin-top:4px}.metronome-beat-groups>span{border:1px solid var(--vi-ink-3);border-top:0;height:5px;position:relative}.metronome-beat-groups em{font-family:var(--vi-mono);color:var(--vi-ink-2);font-size:9px;font-style:normal;position:absolute;top:6px;left:50%;transform:translate(-50%)}.metronome-session{grid-template-columns:1fr .9fr 1.1fr auto;align-items:center;gap:8px;padding:9px 9px 9px 12px;display:grid;position:relative;overflow:hidden}.metronome-readout{flex-direction:column;gap:4px;min-width:0;display:flex}.metronome-readout-value{font-size:24px}.metronome-reset{border-radius:12px;width:44px;height:44px}.metronome-tap{background:var(--vi-panel);animation:metronome-tap-in .24s var(--vi-ease-out);align-items:center;gap:12px;padding:0 12px;display:flex;position:absolute;inset:0}@keyframes metronome-tap-in{0%{transform:translateY(105%)}}.metronome-tap-bars{flex:1;align-items:flex-end;gap:4px;height:30px;display:flex}.metronome-tap-bars>i{background:var(--vi-ink);transform-origin:50% 100%;max-width:18px;animation:metronome-tap-bar .26s var(--vi-ease-spring);border-radius:2px 2px 0 0;flex:1}.metronome-tap-bars>i:last-child{background:var(--vi-signal)}@keyframes metronome-tap-bar{0%{transform:scaleY(0)}}.metronome-tap-stats{font-family:var(--vi-mono);color:var(--vi-ink-2);text-align:right;white-space:nowrap;font-size:11px}.metronome-note{color:var(--vi-ink-2);margin:0;font-size:12px;line-height:1.4}.metronome-practice{flex-direction:column;gap:8px;padding:9px 12px 10px;display:flex}.metronome-practice canvas{width:100%;display:block}.metronome-practice-summary{text-overflow:ellipsis;overflow:hidden}.metronome-dial-row{align-items:stretch;gap:8px;display:flex}.metronome-step{border-radius:12px;width:44px}.metronome-dial{cursor:grab;touch-action:none;flex:1;height:66px;position:relative;overflow:hidden}.metronome-dial:active{cursor:grabbing}.metronome-dial canvas{width:100%;height:100%;position:absolute;inset:0}.metronome-dial-index{background:var(--vi-signal);pointer-events:none;width:2px;margin-left:-1px;position:absolute;top:22px;bottom:0;left:50%}.metronome-dial-index:before{border:6px solid #0000;border-top:7px solid var(--vi-signal);content:"";border-bottom:0;position:absolute;top:-1px;left:-5px}.metronome-keys{grid-template-columns:1fr auto 1fr;place-items:center;padding-top:2px;display:grid}.metronome-key-round{border-radius:50%;width:64px;height:64px}.metronome-key-play{border-radius:50%;width:88px;height:88px}.metronome-key-play svg{width:30px;height:30px}.metronome-key-flash{background:var(--vi-signal);opacity:0;pointer-events:none;position:absolute;inset:0}.metronome-sheet{background:0 0;flex-direction:column;gap:18px;display:flex}.metronome-sheet-group{flex-direction:column;gap:8px;display:flex}.metronome-sheet-keys{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.metronome-sheet-keys[data-columns="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}.metronome-sheet-key{letter-spacing:0;text-transform:none;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:6px;height:58px;display:flex}.metronome-sheet-key .vi-num{font-size:18px}.metronome-sheet-key small{font-family:var(--font-family-ui,sans-serif);color:var(--vi-ink-2);font-size:11px;line-height:1}.metronome-sheet-key small.vi-num{font-family:var(--vi-num);font-size:12px}.metronome-sheet-key strong{font-family:var(--font-family-ui,sans-serif);font-size:13px;font-weight:500}.metronome-sheet-key svg{width:36px;height:20px}.metronome-meter-dots{align-items:center;gap:2px;max-width:100%;display:flex}.metronome-meter-dots>i{background:var(--vi-ink-3);border-radius:50%;flex:none;width:4px;height:4px}.metronome-meter-dots>i[data-start=true]{background:var(--vi-ink)}.metronome-meter-dots>i[data-group=true]{margin-left:3px}.metronome-meter-dots[data-tight=true]{gap:1.5px}.metronome-meter-dots[data-tight=true]>i{width:3px;height:3px}.metronome-sheet-volume{align-items:center;gap:14px;display:flex}.metronome-sheet-volume-value{text-align:right;width:2.2em;font-size:18px}.metronome-sheet-mute{border-radius:12px;flex:none;width:44px;height:44px}.metronome-fader{cursor:pointer;touch-action:none;flex:1;height:46px;margin-inline:10px;position:relative}.metronome-fader-track,.metronome-fader-fill{height:2px;position:absolute;top:20px;left:0}.metronome-fader-track{background:var(--vi-ink-3);right:0}.metronome-fader-fill{width:var(--metronome-fader);background:var(--vi-ink)}.metronome-fader-tick{background:var(--vi-ink-3);width:1px;height:5px;position:absolute;top:30px}.metronome-fader-tick[data-major=true]{background:var(--vi-ink-2);height:8px}.metronome-fader-cap{top:5px;left:var(--metronome-fader);background:var(--vi-key);width:20px;height:32px;box-shadow:inset 0 0 0 1px var(--vi-line);border-radius:5px;margin-left:-10px;position:absolute}.metronome-fader-cap:after{background:var(--vi-ink);content:"";height:2px;position:absolute;top:15px;left:4px;right:4px}.metronome-sheet-practice{flex-direction:column;gap:6px;display:flex}.metronome-practice-row{flex-direction:column;gap:10px;padding:12px;display:flex}.metronome-practice-row-head{align-items:center;gap:12px;display:flex}.metronome-practice-row-head>div{flex-direction:column;gap:2px;min-width:0;display:flex}.metronome-practice-row-head strong{font-size:15px;font-weight:500}.metronome-practice-row-head span{color:var(--vi-ink-2);font-size:12px}.metronome-switch{cursor:pointer;background:var(--vi-key);border:0;border-radius:7px;flex:none;width:46px;height:26px;position:relative}.metronome-switch:after{background:var(--vi-ink-2);content:"";width:20px;height:20px;transition:transform .2s var(--vi-ease-out), background-color .2s;border-radius:5px;position:absolute;top:3px;left:3px}.metronome-switch[aria-checked=true]:after{background:var(--vi-signal);transform:translate(20px)}.metronome-practice-row-steps{flex-wrap:wrap;gap:8px;padding-left:58px;display:flex}.metronome-stepper{background:var(--vi-body);border-radius:9px;align-items:center;gap:4px;padding:3px;display:inline-flex}.metronome-stepper button{cursor:pointer;width:36px;height:36px;color:var(--vi-ink);background:var(--vi-key);border:0;border-radius:7px;place-items:center;display:grid}.metronome-stepper button svg{width:12px;height:12px}.metronome-stepper [role=spinbutton]{text-align:center;min-width:24px;font-size:17px}.metronome-stepper em{color:var(--vi-ink-2);padding-right:8px;font-size:12px;font-style:normal}@media (prefers-reduced-motion:reduce){.metronome-odometer-strip.is-rolling,.metronome-bar,.metronome-switch:after{transition:none}.metronome-beat,.metronome-marking,.metronome-tap,.metronome-tap-bars>i,.metronome-led[data-state=signal]{animation:none}}@container metronome (width>=560px) and (aspect-ratio>=23/20){.metronome-face{grid-template:"top top""tempo measure"minmax(0,1fr)"session measure""dial keys"/minmax(0,5fr) minmax(0,7fr);align-self:stretch;gap:14px 18px;max-width:68rem;padding-bottom:14px;display:grid}.metronome-face[data-practice=true]{grid-template-areas:"top top""tempo measure""session practice""dial keys"}.metronome-display,.metronome-controls{display:contents}.metronome-topline{grid-area:top}.metronome-tempo{background:var(--vi-panel);border-radius:12px;flex-direction:column;grid-area:tempo;justify-content:center;align-items:flex-start;gap:6px;padding:14px 18px 16px}.metronome-bpm{font-size:clamp(4rem,min(30cqh,15cqw),15rem)}.metronome-tempo-meta{text-align:left;flex-flow:wrap;align-items:baseline;column-gap:14px;padding:0}.metronome-measure{grid-area:measure;min-height:0;max-height:none}.metronome-session{grid-area:session}.metronome-practice{grid-area:practice}.metronome-note{grid-column:1/-1}.metronome-dial-row{grid-area:dial;align-self:center}.metronome-keys{grid-area:keys;grid-template-columns:repeat(3,auto);justify-content:center;gap:32px;padding:0}}@container metronome (width>=560px) and (aspect-ratio>=23/20) and (height>=560px){.metronome-stage[data-embedded=false] .metronome-face{border:1px solid var(--vi-line);background:var(--vi-case);width:min(100%,60rem);height:min(100%,38rem);box-shadow:var(--vi-case-shadow);border-radius:28px;align-self:center;padding:22px 26px 24px}}@container metronome (width>=560px) and (aspect-ratio>=23/20) and (height<=480px){.metronome-face{row-gap:10px}.metronome-tempo{flex-direction:row;justify-content:space-between;align-items:center;padding:8px 14px}.metronome-bpm{font-size:clamp(3rem,24cqh,5.5rem)}.metronome-tempo-meta{text-align:right;flex-direction:column;align-items:flex-end;padding:0}}@container metronome (width>=600px) and (height>=760px) and (aspect-ratio<=23/20){.metronome-measure{max-height:none}.metronome-stage[data-embedded=false] .metronome-face{border:1px solid var(--vi-line);background:var(--vi-case);height:min(100%,56rem);box-shadow:var(--vi-case-shadow);border-radius:32px;align-self:center;padding:22px 24px 4px}}@media (max-height:700px){.metronome-controls{gap:10px;padding-bottom:12px}.metronome-dial{height:60px}.metronome-key-round{width:56px;height:56px}.metronome-key-play{width:76px;height:76px}}@media (max-height:520px){.metronome-measure{min-height:96px}.metronome-tempo-meta{row-gap:1px;padding-bottom:4px}.metronome-marking{font-size:12px}.metronome-meta{font-size:10px}.metronome-dial{height:58px}.metronome-key-round{width:52px;height:52px}.metronome-key-play{width:72px;height:72px}}