.tool[data-tool="metronome"] > noscript{display:none}.metronome{container:metronome / inline-size;display:grid;gap:var(--space-4);width:100%;max-width:46rem;margin-inline:auto}.metronome__stage{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}.metronome__pad{flex-direction:column;gap:var(--space-3);min-width:0;height:clamp(13rem,100vh - 22.5rem,25rem);height:clamp(13rem,100svh - 22.5rem,25rem);padding:var(--space-4);font-weight:400}.metronome[data-sounds] .metronome__pad{height:clamp(13rem,100vh - 28rem,25rem);height:clamp(13rem,100svh - 28rem,25rem)}.metronome__pad:active{transform:none}.metronome__mark{flex:none;font-size:var(--step--1);line-height:1.2}.metronome__face,.metronome__dots{flex:0 1 auto;width:100%;min-width:0;max-width:17.5rem;height:auto;min-height:0}.metronome__face{min-height:3.5rem}.metronome__dots{min-height:1.5rem}.metronome__num{font-family:var(--font-body);font-weight:500;font-variant-numeric:tabular-nums}.metronome__line{display:inline-flex;flex:none;align-items:center;gap:var(--space-2);font-size:var(--step-0);font-weight:600;line-height:1.2}.metronome__icon-play,.metronome__icon-pause{display:inline-flex}.metronome[data-state="idle"] .metronome__icon-pause,.metronome[data-state="running"] .metronome__icon-play{display:none}.metronome__row{display:flex;align-items:stretch;gap:var(--space-2)}.metronome__sign{flex:none;min-width:3.5rem;padding-inline:var(--space-3)}.metronome__sign-word{display:none}.metronome__box{position:relative;display:flex;flex:1 1 0;min-width:0}.metronome__field{min-height:3.5rem;padding-inline-end:5.25rem;font-size:var(--step-1);font-variant-numeric:tabular-nums}.metronome__unit{position:absolute;inset-block:0;inset-inline-end:var(--space-3);display:flex;align-items:center;color:var(--ink-muted);font-size:var(--step--1);pointer-events:none}.metronome__box[data-note] .metronome__unit{color:var(--warn)}.metronome__sound{max-width:20rem}.metronome__nojs{margin:0}@container metronome (min-width:34rem){.metronome__sign{padding-inline:var(--space-5)}.metronome__sign-word{display:inline}.metronome__face,.metronome__dots{max-width:22.5rem}}@container metronome (max-width:17rem){.metronome__sign{min-width:var(--tap);padding-inline:var(--space-2)}}@container metronome (max-width:15.5rem){.metronome__row{flex-wrap:wrap}.metronome__box{flex:1 0 100%;flex-direction:column-reverse;gap:var(--space-1);order:-1}.metronome__field{padding-inline-end:var(--space-3)}.metronome__unit{position:static}.metronome__sign{flex:1 1 0}}@media print{.tool[data-tool="metronome"]{display:none}}