/* Keep tempo numerals visually consistent and compact before the mobile breakpoint. */
.stepper strong {
  font-variant-numeric: tabular-nums;
}

/*
 * 721-1040px iframe width is the app's own "tablet" breakpoint (see .metronome-shell
 * in index-CpYy79Pd.css): the card is pinned to a FIXED 640px width there regardless
 * of how wide the surrounding browser window gets. A viewport-relative (vw) font-size
 * in that zone was the actual bug - it kept growing as the window widened toward
 * 1040px even though the card itself never grew past 640px, so the number visibly
 * ballooned relative to its own unchanging container on a "squished" desktop window.
 * The fix is a flat size for this band, not a wider vw range.
 *
 * Past 1040px the shell switches to its own fixed 1000px two-column desktop layout,
 * which already renders the app's original 90px digit correctly - so this rule must
 * stop at 1040px and leave anything wider untouched.
 */
@media screen and (min-width: 721px) and (max-width: 1040px) {
  .stepper strong,
  .stepper strong.is-three-digit {
    font-size: 52px !important;
    line-height: 72px;
  }
}