/* ===========================================================================
   Practice Lab — the Ejercicios module.
   Built on the Music Lab design tokens (music-lab.css is loaded first): the
   same surfaces, lines, radii, note colours (--ml-root-*) and day/night
   palette. Nothing here redefines a colour; it only composes the tokens, so
   the module reads as the same product in both themes.
   =========================================================================== */

/* A segmented control, shared by the catalog filters and the player. */
.ml-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--ml-line); border-radius: 12px; background: var(--ml-surface); }
.ml-seg--sm { border-radius: 10px; }
.ml-seg__b {
  appearance: none; border: 0; background: transparent; color: var(--ml-muted);
  font: 600 13px Inter, sans-serif; padding: 7px 12px; border-radius: 9px; cursor: pointer;
  white-space: nowrap; transition: background .15s, color .15s;
}
.ml-seg--sm .ml-seg__b { padding: 6px 10px; font-size: 12.5px; }
.ml-seg__b:hover { color: var(--ml-text); }
.ml-seg__b.is-active { background: var(--ml-grad); color: #fff; }
.ml-seg__b:focus-visible { outline: 2px solid var(--ml-coral); outline-offset: 2px; }

.ml-input--num { width: 68px; }
/* 16px keeps iOS Safari from zooming the page when the select gets focus. */
.ml-input--sm { padding: 7px 10px; font-size: 16px; }

/* ── Catalog ──────────────────────────────────────────────────────────── */

.ml-cat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 22px; }
.ml-cat {
  display: flex; flex-direction: column; gap: 2px; padding: 13px 15px; border-radius: 14px;
  border: 1px solid var(--ml-line); background: var(--ml-surface); text-decoration: none; position: relative;
}
.ml-cat strong { font-family: "Space Grotesk", sans-serif; color: var(--ml-text); font-size: 15px; }
.ml-cat small { color: var(--ml-muted); font-size: 12.5px; }
.ml-cat--on { border-color: color-mix(in srgb, var(--ml-pink) 45%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ml-pink) 12%, transparent); }
.ml-cat--soon { opacity: .6; cursor: default; }
.ml-cat__soon { position: absolute; top: 10px; right: 12px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ml-dim); }

.ml-ex-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 18px; }
.ml-ex-search { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; padding: 0 12px; border: 1px solid var(--ml-line-strong); border-radius: 11px; background: var(--ml-bg-2); color: var(--ml-muted); }
.ml-ex-search input { flex: 1; border: 0; background: transparent; color: var(--ml-text); font: inherit; font-size: 16px; padding: 11px 0; }
.ml-ex-search input:focus { outline: none; }
.ml-ex-filters { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ml-ex-filters .ml-chip { cursor: pointer; }

.ml-ex-empty { color: var(--ml-muted); text-align: center; padding: 30px 0; }

/* The filter hides cards with the hidden attribute; the flex display above
   would otherwise override it, so restore display:none explicitly. */
.ml-ex-card[hidden] { display: none; }

.ml-ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ml-ex-card {
  display: flex; flex-direction: column; gap: 9px; padding: 16px; border-radius: 16px;
  border: 1px solid var(--ml-line); background: var(--ml-surface); text-decoration: none;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.ml-ex-card:hover { border-color: color-mix(in srgb, var(--ml-pink) 45%, transparent); transform: translateY(-2px); box-shadow: var(--ml-shadow); }
.ml-ex-card__top { display: flex; align-items: center; justify-content: space-between; }
.ml-ex-card__pattern { display: inline-flex; gap: 4px; }
.ml-ex-card__pattern i {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  background: var(--ml-surface-2); color: var(--ml-text); font: 700 12px "Space Grotesk", sans-serif; font-style: normal;
}
.ml-ex-card__diff { font-size: 11.5px; font-weight: 700; color: var(--ml-accent, var(--ml-muted)); }
.ml-ex-card__name { font-family: "Space Grotesk", sans-serif; font-size: 16px; margin: 0; color: var(--ml-text); }
.ml-ex-card__sum { color: var(--ml-muted); font-size: 13.5px; line-height: 1.45; margin: 0; flex: 1; }
.ml-ex-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.ml-ex-card__bpm { font: 700 13px "Space Grotesk", sans-serif; color: var(--ml-text); }
.ml-ex-card__goals { display: inline-flex; gap: 5px; flex-wrap: wrap; }

/* ── Player: header ───────────────────────────────────────────────────── */

.ml-pl { max-width: 1180px; margin: 0 auto; padding: 22px 16px 120px; }
.ml-pl__head { margin-bottom: 16px; }
.ml-pl__title h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0; }
.ml-pl__ex { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; }
.ml-pl__ex strong { font: 600 1.15rem "Space Grotesk", sans-serif; color: var(--ml-text); }
.ml-pl__fav { border: 0; background: transparent; color: var(--ml-dim); cursor: pointer; padding: 2px; border-radius: 8px; display: inline-grid; place-items: center; }
.ml-pl__fav.is-on { color: var(--ml-coral); }
.ml-pl__fav:focus-visible { outline: 2px solid var(--ml-coral); }
.ml-pl__sum { color: var(--ml-muted); margin: 0 0 10px; max-width: 62ch; }
.ml-pl__badges { display: flex; flex-wrap: wrap; gap: 6px; }
/* .ml-badge is an absolutely positioned corner tag in music-lab.css (cards,
   page heads override it); in the player it is an inline chip. */
.ml-pl__badges .ml-badge { position: static; display: inline-block; border: 1px solid var(--ml-line); background: var(--ml-surface); color: var(--ml-accent, var(--ml-muted)); }

/* ── Player: layout ───────────────────────────────────────────────────── */

/* Phone first: DOM order is the reading order (setup → controls → board…).
   The desktop grid below moves the rail to a sticky side column. */
.ml-pl__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ml-pl__setup, .ml-pl__body { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* Setup bar. */
.ml-pl__config { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; padding: 14px 16px; border: 1px solid var(--ml-line); border-radius: 14px; background: var(--ml-surface); }
.ml-pl__field { display: flex; flex-direction: column; gap: 5px; }
.ml-pl__field > span { font-size: 12px; color: var(--ml-muted); font-weight: 600; }
.ml-pl__field--ex { flex: 1 1 240px; min-width: 0; }
.ml-pl__field--ex .ml-input { width: 100%; }
.ml-pl__field--wide { flex: 1 1 100%; }
.ml-pl__more { align-self: flex-end; margin-left: auto; }
.ml-pl__adv { display: flex; flex-wrap: wrap; gap: 16px; padding: 14px 16px; border: 1px solid var(--ml-line); border-radius: 14px; background: var(--ml-surface); }
.ml-pl__adv[hidden] { display: none; }
.ml-pl__switch { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ml-text); cursor: pointer; }
.ml-pl__switch input { width: 18px; height: 18px; accent-color: var(--ml-pink); }
.ml-pl__autobpm { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; width: 100%; font-size: 13px; color: var(--ml-muted); }
.ml-pl__autobpm[hidden] { display: none; }
.ml-pl__vols { display: grid; gap: 8px; max-width: 420px; }
.ml-pl__vols label { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ml-muted); }
.ml-pl__vols input { accent-color: var(--ml-pink); }

/* ── Player: rail (modes, transport, tempo, metronome) ────────────────── */

.ml-pl__rail { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ml-pl__modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--ml-line); border-radius: 14px; background: var(--ml-surface); }
.ml-pl__mode { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; border: 0; border-radius: 10px; background: transparent; color: var(--ml-muted); font: 600 12px Inter, sans-serif; cursor: pointer; min-height: 44px; }
.ml-pl__mode.is-active { background: var(--ml-grad); color: #fff; }
.ml-pl__mode--soon { opacity: .55; cursor: default; }
.ml-pl__mode-hint { font-size: 12.5px; color: var(--ml-muted); margin: 0; line-height: 1.45; }

.ml-pl__deck { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--ml-line); border-radius: 14px; background: var(--ml-surface); }
.ml-pl__transport { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ml-pl__play { flex: none; width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--ml-grad); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 26px color-mix(in srgb, var(--ml-pink) 40%, transparent); }
.ml-pl__play:focus-visible { outline: 3px solid var(--ml-coral); outline-offset: 2px; }
/* The UA sheet's [hidden] rule does not reach inline SVG in every engine. */
.ml-pl__play svg[hidden] { display: none; }
.ml-pl__tbtn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--ml-line-strong); background: var(--ml-surface); color: var(--ml-text); cursor: pointer; display: grid; place-items: center; flex: none; }
.ml-pl__tbtn:hover { background: var(--ml-surface-2); }
.ml-pl__tbtn.is-active, .ml-pl__tbtn[aria-pressed="true"] { background: var(--ml-grad); color: #fff; border-color: transparent; }
.ml-pl__tempo { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ml-pl__tempo-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ml-dim); font-weight: 600; }
.ml-pl__bpm-unit { font-size: 12px; color: var(--ml-dim); }
.ml-stepper--lg output { font: 700 1.5rem "Space Grotesk", sans-serif; min-width: 3ch; text-align: center; }
.ml-pl__range { width: 100%; accent-color: var(--ml-pink); margin: 0; }

.ml-pl__beats { display: flex; gap: 10px; justify-content: center; }
.ml-pl__beats i { width: 12px; height: 12px; border-radius: 50%; background: var(--ml-surface-2); border: 1px solid var(--ml-line-strong); transition: background .06s, transform .06s; }
.ml-pl__beats i:first-child { border-color: color-mix(in srgb, var(--ml-pink) 55%, transparent); }
.ml-pl__beats i.is-on { background: var(--ml-pink); transform: scale(1.25); }

.ml-pl__tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ml-pl__toggle { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid var(--ml-line-strong); border-radius: 11px; background: var(--ml-surface); color: var(--ml-text); font: 600 13px Inter, sans-serif; cursor: pointer; }
.ml-pl__toggle.is-active { background: var(--ml-grad); color: #fff; border-color: transparent; }
.ml-pl__count { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ml-muted); }
.ml-pl__count > span { white-space: nowrap; }
.ml-pl__audio-hint { font-size: 12.5px; color: var(--ml-muted); margin: 0; line-height: 1.45; }
.ml-pl__audio-hint[hidden] { display: none; }

/* ── Player: body ─────────────────────────────────────────────────────── */

/* Fretboard. */
.ml-pl__board { border: 1px solid var(--ml-line); border-radius: 16px; background: var(--ml-surface); padding: 14px; }
.ml-pl__board-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ml-pl__board-right { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ml-pl__switch--inline { font-weight: 600; }
.ml-pl__fretboard { width: 100%; overflow-x: auto; scrollbar-width: thin; }
.ml-fb { width: 100%; min-width: 520px; height: auto; display: block; }
.ml-fb__face { fill: color-mix(in srgb, var(--ml-bg-2) 70%, #2a1a10); }
.ml-fb__fret { stroke: var(--ml-line-strong); stroke-width: 1.5; }
.ml-fb__nut { stroke: var(--ml-text); stroke-width: 4; }
.ml-fb__string { stroke: color-mix(in srgb, var(--ml-muted) 60%, transparent); }
.ml-fb__inlay { fill: color-mix(in srgb, var(--ml-muted) 40%, transparent); }
.ml-fb__fnum { fill: var(--ml-dim); font: 600 11px Inter, sans-serif; }
.ml-fb__slabel { fill: var(--ml-text); font: 700 12px "Space Grotesk", sans-serif; }
.ml-fb__snum { fill: var(--ml-dim); font: 600 9px Inter, sans-serif; }

.ml-fb__dot { color: var(--ml-muted); }
.ml-fb__halo { fill: currentColor; opacity: 0; transition: opacity .18s, r .18s; }
.ml-fb__disc { fill: color-mix(in srgb, currentColor 22%, var(--ml-bg-2)); stroke: currentColor; stroke-width: 2; transition: transform .16s; }
.ml-fb__dtext { fill: var(--ml-text); font: 700 13px "Space Grotesk", sans-serif; }
.ml-fb__dsub { fill: var(--ml-muted); font: 600 8.5px Inter, sans-serif; }
.ml-fb__dot.is-active .ml-fb__halo { opacity: .28; }
.ml-fb__dot.is-active .ml-fb__disc { fill: currentColor; }
.ml-fb__dot.is-active .ml-fb__dtext { fill: #fff; }
.ml-fb__dot.is-active .ml-fb__dsub { fill: rgba(255, 255, 255, .85); }
/* Colour each dot by its note, via the shared root tokens. */
.ml-fb__dot.ml-root-c { color: var(--ml-root-c); } .ml-fb__dot.ml-root-cs { color: var(--ml-root-cs); }
.ml-fb__dot.ml-root-d { color: var(--ml-root-d); } .ml-fb__dot.ml-root-ds { color: var(--ml-root-ds); }
.ml-fb__dot.ml-root-e { color: var(--ml-root-e); } .ml-fb__dot.ml-root-f { color: var(--ml-root-f); }
.ml-fb__dot.ml-root-fs { color: var(--ml-root-fs); } .ml-fb__dot.ml-root-g { color: var(--ml-root-g); }
.ml-fb__dot.ml-root-gs { color: var(--ml-root-gs); } .ml-fb__dot.ml-root-a { color: var(--ml-root-a); }
.ml-fb__dot.ml-root-as { color: var(--ml-root-as); } .ml-fb__dot.ml-root-b { color: var(--ml-root-b); }

/* Now / next card. */
.ml-pl__now { display: flex; align-items: stretch; gap: 12px; }
.ml-pl__now-main, .ml-pl__now-next { border: 1px solid var(--ml-line); border-radius: 14px; background: var(--ml-surface); padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; }
.ml-pl__now-main { flex: 1; }
.ml-pl__now-next { min-width: 120px; }
.ml-pl__now-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-dim); font-weight: 600; }
.ml-pl__now-note { font: 700 2rem "Space Grotesk", sans-serif; line-height: 1.1; color: var(--ml-text); }
.ml-pl__now-note--next { font-size: 1.4rem; color: var(--ml-muted); }
.ml-pl__now-detail { font-size: 13px; color: var(--ml-muted); }

/* Sequence timeline. */
.ml-pl__seq, .ml-pl__tab, .ml-pl__tips, .ml-pl__progress { border: 1px solid var(--ml-line); border-radius: 16px; background: var(--ml-surface); padding: 14px 16px; }
.ml-pl__seq-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.ml-pl__seq-head h2, .ml-pl__progress h2 { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--ml-dim); margin: 0; }
.ml-pl__seq-sub { font-size: 12px; color: var(--ml-dim); }
.ml-pl__seq-track { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scroll-behavior: smooth; }
.ml-pl__cell {
  flex: none; width: 62px; display: grid; gap: 3px; justify-items: center; padding: 9px 6px; border-radius: 12px;
  border: 1px solid var(--ml-line); background: var(--ml-bg-2); transition: border-color .14s, background .14s, transform .14s;
}
.ml-pl__cell-note { font: 700 1.05rem "Space Grotesk", sans-serif; }
.ml-pl__cell-finger { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--ml-surface-2); font: 700 12px Inter, sans-serif; color: var(--ml-text); }
.ml-pl__cell-pick { font-size: 15px; color: var(--ml-muted); line-height: 1; }
.ml-pl__cell-beat { font: 600 10px Inter, sans-serif; color: var(--ml-dim); }
.ml-pl__cell.is-active { border-color: transparent; background: var(--ml-grad); transform: translateY(-2px); }
.ml-pl__cell.is-active .ml-pl__cell-note, .ml-pl__cell.is-active .ml-pl__cell-pick, .ml-pl__cell.is-active .ml-pl__cell-beat { color: #fff; }
.ml-pl__cell.is-active .ml-pl__cell-finger { background: rgba(255, 255, 255, .25); color: #fff; }

/* TAB. */
.ml-pl__tabgrid { display: flex; flex-direction: column; gap: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; }
.ml-pl__tabrow { display: flex; align-items: center; gap: 8px; }
.ml-pl__tabname { width: 18px; color: var(--ml-dim); font-size: 12px; flex: none; }
.ml-pl__tabline { display: flex; gap: 2px; }
.ml-pl__tabcell { flex: none; width: 22px; text-align: center; color: var(--ml-dim); font-size: 13px; padding: 2px 0; border-radius: 6px; }
.ml-pl__tabcell.is-note { color: var(--ml-text); font-weight: 700; }
.ml-pl__tabcell.is-active { background: var(--ml-grad); color: #fff; }

/* Tips. */
.ml-pl__tips-tabs { margin-bottom: 12px; }
.ml-pl__howto { color: var(--ml-text); margin: 0 0 10px; }
.ml-pl__mistakes { margin: 0 0 10px; padding-left: 18px; color: var(--ml-muted); display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ml-pl__care { font-size: 13px; color: var(--ml-dim); margin: 0; }
.ml-pl__facts { display: grid; gap: 10px; margin: 0; }
.ml-pl__facts div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ml-line); padding-bottom: 8px; }
.ml-pl__facts dt { color: var(--ml-muted); font-size: 13px; }
.ml-pl__facts dd { margin: 0; color: var(--ml-text); font-weight: 600; font-size: 13.5px; text-align: right; }

/* Progress. */
.ml-pl__progress h2 { margin-bottom: 6px; }
.ml-pl__progress-body { font-size: 13.5px; color: var(--ml-muted); margin: 0; line-height: 1.5; }

/* Mobile dock: an always-visible Play + tempo, created by the bundle. */
.ml-pl__dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--ml-bg-2) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--ml-line); }
.ml-pl__dock-play { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--ml-grad); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ml-pl__dock-info { display: flex; flex-direction: column; min-width: 0; }
.ml-pl__dock-info strong { color: var(--ml-text); font: 700 15px "Space Grotesk", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-pl__dock-info small { color: var(--ml-muted); font-size: 12px; }
/* The full dock (Escalas): tempo, metronome and loop beside Play. */
.ml-pl__dock--full .ml-pl__dock-info { flex: 1; }
.ml-pl__dock-tempo { display: inline-flex; gap: 4px; }
.ml-pl__dock-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ml-line-strong); border-radius: 12px; background: var(--ml-surface); color: var(--ml-text); font: 700 18px Inter, sans-serif; cursor: pointer; }
.ml-pl__dock-btn[aria-pressed="true"] { background: var(--ml-grad); color: #fff; border-color: transparent; }
.ml-pl__dock-btn:focus-visible, .ml-pl__dock-play:focus-visible { outline: 2px solid var(--ml-coral); outline-offset: 2px; }
@media (max-width: 380px) {
  .ml-pl__dock--full { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .ml-pl__dock--full .ml-pl__dock-btn { width: 40px; height: 40px; }
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (min-width: 980px) {
  /* Two columns: setup and body on the left, the rail sticky on the right.
     The rail spans both rows so it stays in reach while the body scrolls. */
  .ml-pl__grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto 1fr;
    grid-template-areas: "setup rail" "body rail";
    gap: 18px; align-items: start;
  }
  .ml-pl__setup { grid-area: setup; gap: 18px; }
  .ml-pl__body { grid-area: body; gap: 18px; }
  .ml-pl__rail { grid-area: rail; position: sticky; top: calc(var(--ml-nav-h, 64px) + 16px); gap: 14px; }
  .ml-pl__modes { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  /* Still 44px tall: an iPad in landscape gets this layout with a finger. */
  .ml-pl__mode { flex-direction: row; gap: 6px; padding: 9px; font-size: 13px; }
  .ml-pl__mode-hint { min-height: 34px; }
  .ml-pl__tempo { margin-left: 0; flex: 1 1 100%; }
}

@media (max-width: 720px) {
  .ml-pl { padding-bottom: 88px; }
  .ml-pl__now-note { font-size: 1.7rem; }
  /* The full transport sits above the fretboard; the fixed dock keeps Play
     one tap away once the sequence or the TAB has scrolled it out of view. */
  .ml-pl__dock { display: flex; }
  /* The Music Bot launcher is fixed to the same corner (music-bot.css); lift
     it above the dock here, as the song page's mini player does. */
  .ml-practice-player .mlb-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 400px) {
  .ml-pl__tempo { margin-left: 0; flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ml-pl__cell, .ml-fb__disc, .ml-fb__halo, .ml-pl__beats i { transition: none; }
  .ml-pl__seq-track { scroll-behavior: auto; }
}