/* ===========================================================================
   Ritmo — the rhythm laboratory of the Ejercicios module.
   Loaded after music-lab.css, practice-lab.css (the player shell, transport,
   fretboard), practice-chords.css (instrument tabs, chips, keyboard) and
   practice-scales.css (the exercise field, the wide layout, ahora/sigue,
   focus mode). This file adds the notation, the count, the step grids, the
   instrument stage, the groove, the variations and Evaluar. No colour is
   defined here: the shared tokens carry both the night and the day theme.
   =========================================================================== */

.ml-rt { --rt-cell: 40px; }
.ml-rt__aids[hidden], .ml-rt__eval[hidden], .ml-rt__legend[hidden], .ml-rt .ml-seg[hidden], .ml-rt .ml-seg__b[hidden] { display: none; }

/* ── Setup ────────────────────────────────────────────────────────────── */

.ml-rt__config { row-gap: 12px; }
.ml-rt__field--meter { flex: 0 1 110px; }
.ml-rt__tempo { flex: 0 0 auto; }
.ml-rt__tempo .ml-stepper { height: 42px; padding: 0 4px; border: 1px solid var(--ml-line-strong); border-radius: 11px; background: var(--ml-surface); }
.ml-rt__tempo output { min-width: 3.2ch; font-size: 17px; font-weight: 700; }
.ml-rt__switches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; flex: 1 1 auto; justify-content: flex-end; }
.ml-rt__switches .ml-pl__toggle { min-height: 42px; }

/* Modes: the four buttons and the hint side by side when there is room. */
.ml-rt__modes { display: grid; gap: 8px; }

/* ── Notation and count ───────────────────────────────────────────────── */

.ml-rt__score .ml-pl__seq-head, .ml-rt__pattern .ml-pl__seq-head, .ml-rt__groove .ml-pl__seq-head { flex-wrap: wrap; gap: 8px 12px; }
.ml-rt__score-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ml-rt__score-body { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; min-height: 120px; }
.ml-rt-system { max-width: 100%; }
.ml-rt-system.is-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ml-rt-system svg { display: block; }

.ml-rt-staff { overflow: visible; }
.ml-rt-staff__line { stroke: var(--ml-line-strong); stroke-width: 1.2; }
.ml-rt-staff__bar { stroke: var(--ml-muted); stroke-width: 1.2; }
.ml-rt-staff__thick, .ml-rt-staff__rdot { fill: var(--ml-muted); }
.ml-rt-staff__label { fill: var(--ml-dim); font: 700 10.5px Inter, sans-serif; letter-spacing: .04em; }
.ml-rt-staff__time { fill: var(--ml-text); font: 800 15px "Space Grotesk", sans-serif; }
.ml-rt-chord { fill: var(--ml-coral); font: 700 12px "Space Grotesk", sans-serif; }
.ml-rt-staff__head { fill: var(--ml-pink); opacity: 0; }
.ml-rt-staff__head.is-on { opacity: .55; }

.ml-rt-n { color: var(--ml-text); fill: var(--ml-text); transition: fill .08s; }
.ml-rt-n__head.is-hollow { fill: none; stroke: currentColor; stroke-width: 1.6; }
.ml-rt-n__x, .ml-rt-n__stem, .ml-rt-n__accent, .ml-rt-n__paren, .ml-rt-n__open { fill: none; stroke: currentColor; }
.ml-rt-n__stem { stroke-width: 1.3; }
.ml-rt-n__x { stroke-width: 1.8; stroke-linecap: round; }
.ml-rt-n__accent { stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ml-rt-n__paren { stroke-width: 1.2; opacity: .8; }
.ml-rt-n__open { stroke-width: 1.3; }
.ml-rt-n__flag path { fill: currentColor; }
.ml-rt-n.is-ghost { opacity: .6; }
.ml-rt-n__beam { fill: var(--ml-text); }
.ml-rt-n__dot { fill: var(--ml-text); }
.ml-rt-n__tie, .ml-rt-n__bracket { fill: none; stroke: var(--ml-text); stroke-width: 1.3; }
.ml-rt-n__tuplet { fill: var(--ml-text); font: 700 10.5px Inter, sans-serif; font-style: italic; }
.ml-rt-n__rest { fill: var(--ml-text); }
.ml-rt-n__qrest, .ml-rt-n__stroke { fill: none; stroke: var(--ml-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ml-rt-n.is-now { color: var(--ml-pink); fill: var(--ml-pink); }
.ml-rt-n.is-now .ml-rt-n__head { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ml-pink) 70%, transparent)); }

.ml-rt-count { fill: var(--ml-dim); font: 600 12px Inter, sans-serif; }
.ml-rt-count.is-beat { fill: var(--ml-muted); }
.ml-rt-count.is-pulse { fill: var(--ml-text); font-weight: 800; font-size: 13px; }
.ml-rt-count.is-now { fill: var(--ml-coral); font-weight: 800; }

.ml-rt-tab__line { stroke: var(--ml-line-strong); stroke-width: 1; }
.ml-rt-tab__clef { fill: var(--ml-dim); font: 800 9px Inter, sans-serif; letter-spacing: .06em; }
.ml-rt-tab__mask { fill: var(--ml-bg-2); }
.ml-rt-tab__fret { fill: var(--ml-text); font: 700 10.5px "Space Grotesk", sans-serif; }
.ml-rt-tab__arrow { fill: none; stroke: var(--ml-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ml-rt-tab__ev.is-accent .ml-rt-tab__fret { font-weight: 900; }
.ml-rt-tab__ev.is-ghost { opacity: .6; }
.ml-rt-tab__ev.is-now .ml-rt-tab__fret { fill: var(--ml-pink); }
.ml-rt-tab__ev.is-now .ml-rt-tab__arrow { stroke: var(--ml-pink); }

/* Conteo: the syllables large, the notes marked under them. */
.ml-rt-countview { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.ml-rt-subview { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px 14px; }
.ml-rt-countbar { display: flex; flex-wrap: wrap; gap: 4px; padding-right: 14px; border-right: 2px solid var(--ml-line-strong); }
.ml-rt-syl { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 30px; padding: 6px 4px; border-radius: 10px; color: var(--ml-dim); font: 700 17px "Space Grotesk", sans-serif; }
.ml-rt-syl b { font-weight: inherit; }
.ml-rt-syl i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid transparent; }
.ml-rt-syl.is-pulse { color: var(--ml-text); font-size: 20px; }
.ml-rt-syl.is-hit i { background: var(--ml-text); }
.ml-rt-syl.is-accent i { width: 14px; height: 14px; background: var(--ml-coral); }
.ml-rt-syl.is-ghost i { background: transparent; border-color: var(--ml-muted); }
.ml-rt-syl.is-hold i { width: 22px; height: 4px; border-radius: 2px; background: var(--ml-line-strong); }
.ml-rt-syl.is-now { background: var(--ml-grad); color: #fff; }
.ml-rt-syl.is-now i { background: #fff; }

/* Subdivisión: each pulse a box cut into its parts. */
.ml-rt-subbar { --pulses: 4; display: grid; grid-template-columns: repeat(var(--pulses), minmax(0, 1fr)); gap: 5px; min-width: 0; }
.ml-rt-pulse { display: flex; flex: 1 1 auto; gap: 2px; padding: 3px; border: 1.5px solid var(--ml-line-strong); border-radius: 12px; }
.ml-rt-sub { display: grid; place-items: center; flex: 1 1 0; min-width: 0; height: 38px; border-radius: 8px; background: var(--ml-surface); color: var(--ml-dim); font: 700 13px "Space Grotesk", sans-serif; }
.ml-rt-sub.is-hit { background: color-mix(in srgb, var(--ml-pink) 28%, var(--ml-surface)); color: var(--ml-text); }
.ml-rt-sub.is-accent { background: color-mix(in srgb, var(--ml-coral) 45%, var(--ml-surface)); }
.ml-rt-sub.is-ghost { background: transparent; outline: 1.5px dashed var(--ml-muted); outline-offset: -3px; }
.ml-rt-sub.is-hold { background: color-mix(in srgb, var(--ml-pink) 12%, var(--ml-surface)); }
.ml-rt-sub.is-now { background: var(--ml-grad); color: #fff; }

.ml-rt__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; font-size: 12px; color: var(--ml-dim); }
.ml-rt__legend b { color: var(--ml-muted); font-weight: 800; margin-right: 3px; }

/* ── Step grids: the instrument's pattern on the count ────────────────── */

.ml-rt__lanes { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 10px; }
.ml-rt-grid { --steps: 8; display: grid; gap: 4px; flex: 1 1 100%; min-width: 0; }
.ml-rt-grid__row { display: grid; grid-template-columns: 30px repeat(var(--steps), minmax(0, 1fr)); gap: 3px; align-items: center; }
.ml-rt-grid__name { font: 700 10.5px Inter, sans-serif; color: var(--ml-dim); letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-rt-grid__row--count .ml-rt-grid__name { color: var(--ml-coral); font-size: 11px; }
.ml-rt-grid__count { text-align: center; font: 600 11.5px Inter, sans-serif; color: var(--ml-dim); border-radius: 6px; padding: 2px 0; }
.ml-rt-grid__count.is-pulse { color: var(--ml-text); font-weight: 800; }
.ml-rt-grid__count.is-now { background: var(--ml-grad); color: #fff; }

.ml-rt-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 0; height: var(--rt-cell); border-radius: 8px; background: var(--ml-surface); color: var(--ml-dim); line-height: 1.05; overflow: hidden; transition: background .06s, transform .06s; }
.ml-rt-cell.is-pulse { box-shadow: inset 2px 0 0 var(--ml-line-strong); }
.ml-rt-cell.is-on { background: color-mix(in srgb, var(--ml-pink) 24%, var(--ml-surface-2)); color: var(--ml-text); }
.ml-rt-cell.is-accent { background: color-mix(in srgb, var(--ml-coral) 40%, var(--ml-surface-2)); }
.ml-rt-cell.is-ghost { background: transparent; outline: 1.5px dashed var(--ml-muted); outline-offset: -3px; color: var(--ml-muted); }
.ml-rt-cell.is-hold { background: color-mix(in srgb, var(--ml-pink) 10%, var(--ml-surface)); }
.ml-rt-cell.is-hold::after { content: ""; position: absolute; left: -2px; right: 0; top: 50%; height: 4px; margin-top: -2px; background: color-mix(in srgb, var(--ml-pink) 45%, transparent); }
.ml-rt-cell.is-now { background: var(--ml-grad); color: #fff; transform: translateY(-2px); }
.ml-rt-cell__acc { position: absolute; top: 1px; right: 3px; font: 800 10px Inter, sans-serif; font-style: normal; color: inherit; }
.ml-rt-arrow { font: 800 18px Inter, sans-serif; }
.ml-rt-du { font: 800 12px "Space Grotesk", sans-serif; }
.ml-rt-arrow + .ml-rt-du { font-size: 10px; opacity: .85; }
.ml-rt-deg { font: 800 13px "Space Grotesk", sans-serif; }
.ml-rt-cell small { font-size: 9.5px; opacity: .85; }
/* The guitar's pendulum: the strokes in the air are drawn faintly. */
.ml-rt__lanes[data-instrument="guitarra"] .ml-rt-cell:not(.is-on):not(.is-ghost) .ml-rt-arrow,
.ml-rt__lanes[data-instrument="guitarra"] .ml-rt-cell:not(.is-on):not(.is-ghost) .ml-rt-du { opacity: .28; }
.ml-rt__lanes[data-instrument="guitarra"] { --rt-cell: 50px; }
.ml-rt__lanes[data-instrument="guitarra"] .ml-rt-cell.is-hold { background: var(--ml-surface); }
.ml-rt__lanes[data-instrument="guitarra"] .ml-rt-cell.is-hold::after { opacity: .35; }

/* ── The instrument ───────────────────────────────────────────────────── */

.ml-rt__stage-body { margin-top: 10px; }
.ml-rt-stage-row { display: flex; gap: 14px; align-items: center; }
.ml-rt-board { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.ml-rt-board .ml-fb { display: block; width: 100%; min-width: 320px; max-height: 240px; }
.ml-rt-stage-side { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
.ml-rt-stage-side svg { width: 96px; height: auto; }
.ml-rt-stroke { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; border: 1px solid var(--ml-line-strong); background: var(--ml-surface); color: var(--ml-muted); font: 800 34px Inter, sans-serif; }
.ml-rt-stroke.is-hit-soft, .ml-rt-stroke.is-hit-strong { color: #fff; background: var(--ml-grad); animation: ml-rt-flash .18s ease-out; }
.ml-rt-stroke.is-hit-strong { transform: scale(1.08); }
.ml-rt-keys { overflow-x: auto; }
.ml-rt-keys .ml-kb { display: block; width: 100%; min-width: 420px; }
.ml-rt-keys .ml-kb__key.is-now .ml-kb__white, .ml-rt-keys .ml-kb__key.is-now .ml-kb__black { fill: var(--ml-pink); }
.ml-rt-board .ml-fb__dot.is-now .ml-fb__halo { opacity: .35; }
.ml-rt-board .ml-fb__dot.is-now .ml-fb__disc { fill: currentColor; }
.ml-rt-board .ml-fb__dot.is-now .ml-fb__dtext { fill: #fff; }
.ml-rt-kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.ml-rt-pad { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 84px; border-radius: 50%; aspect-ratio: 1 / 1; max-width: 120px; margin: 0 auto; width: 100%; border: 2px solid var(--ml-line-strong); background: var(--ml-surface); color: var(--ml-muted); }
.ml-rt-pad strong { font: 800 18px "Space Grotesk", sans-serif; color: var(--ml-text); }
.ml-rt-pad small { font-size: 11px; }
.ml-rt-pad.is-hit-strong { background: var(--ml-grad); border-color: transparent; color: #fff; animation: ml-rt-flash .16s ease-out; }
.ml-rt-pad.is-hit-strong strong { color: #fff; }
.ml-rt-pad.is-hit-soft { background: color-mix(in srgb, var(--ml-pink) 30%, var(--ml-surface)); border-color: color-mix(in srgb, var(--ml-pink) 50%, transparent); }
.ml-rt__stage-legend { margin: 10px 0 0; font-size: 12.5px; color: var(--ml-dim); }

@keyframes ml-rt-flash { from { filter: brightness(1.5); } to { filter: none; } }

/* ── Ahora / Sigue ────────────────────────────────────────────────────── */

.ml-rt__bigcount { background: var(--ml-grad); color: #fff; font-family: "Space Grotesk", sans-serif; }
.ml-rt__now .ml-sc__bigdisc--next.ml-rt__bigcount { background: var(--ml-surface-2); color: var(--ml-text); border: 1px solid var(--ml-line-strong); }
.ml-rt__now.is-guided .ml-sc__nowcard--next { border-color: color-mix(in srgb, var(--ml-coral) 55%, transparent); }

/* ── Groove / loop ────────────────────────────────────────────────────── */

.ml-rt__bars { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.ml-rt__bar { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; min-height: 64px; padding: 8px 10px; border: 1px solid var(--ml-line); border-radius: 12px; background: var(--ml-surface); color: var(--ml-text); cursor: pointer; font: inherit; }
.ml-rt__bar strong { font: 700 15px "Space Grotesk", sans-serif; }
.ml-rt__bar small { font-size: 11.5px; color: var(--ml-coral); font-weight: 700; }
.ml-rt__bar-dots { display: flex; gap: 4px; }
.ml-rt__bar-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ml-line-strong); }
.ml-rt__bar-dots i.is-on { background: var(--ml-pink); }
.ml-rt__bar.is-current { border-color: color-mix(in srgb, var(--ml-pink) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ml-pink) 40%, transparent); }
.ml-rt__bar.is-loop { background: color-mix(in srgb, var(--ml-pink) 18%, var(--ml-surface)); }

/* ── Playback ─────────────────────────────────────────────────────────── */

.ml-rt__deck .ml-pl__deck { padding: 0; border: 0; background: transparent; }
.ml-rt__deck .ml-pl__transport { display: flex; align-items: center; gap: 12px; }
.ml-rt__beats { margin-left: 6px; }
.ml-rt__feel, .ml-rt__opts, .ml-rt__auto, .ml-rt__aids { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.ml-rt__check { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13.5px; color: var(--ml-text); cursor: pointer; }
.ml-rt__check input { width: 18px; height: 18px; accent-color: var(--ml-pink); }
.ml-rt__auto-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ml-muted); }
.ml-rt__auto-field .ml-input { width: auto; }
.ml-rt__deck .ml-sc__vols { margin-top: 12px; }

/* ── Variations ───────────────────────────────────────────────────────── */

.ml-rt__var-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ml-rt__var { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ml-line); border-radius: 12px; background: var(--ml-surface); color: var(--ml-text); font: 600 13px Inter, sans-serif; text-align: left; cursor: pointer; }
.ml-rt__var.is-active { border-color: transparent; background: color-mix(in srgb, var(--ml-pink) 20%, var(--ml-surface-2)); box-shadow: inset 0 0 0 1.5px var(--ml-pink); }
.ml-rt__var-mini { display: block; width: 100%; overflow: hidden; }
.ml-rt__var-mini svg { display: block; width: 100%; height: auto; max-height: 76px; }
.ml-rt__var-mini .ml-rt-count { font-size: 10px; }

/* ── Evaluar ──────────────────────────────────────────────────────────── */

.ml-rt__pad { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 128px; margin: 10px 0 12px; border: 2px dashed var(--ml-line-strong); border-radius: 18px; background: var(--ml-surface); color: var(--ml-text); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ml-rt__pad strong { font: 800 20px "Space Grotesk", sans-serif; }
.ml-rt__pad small { color: var(--ml-dim); }
.ml-rt__pad.is-ok { border-style: solid; border-color: var(--ml-emerald); background: color-mix(in srgb, var(--ml-emerald) 18%, var(--ml-surface)); }
.ml-rt__pad.is-off { border-style: solid; border-color: var(--ml-amber); background: color-mix(in srgb, var(--ml-amber) 14%, var(--ml-surface)); }
.ml-rt__eval-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ml-rt__eval-track { position: relative; height: 26px; margin: 6px 0 12px; border-radius: 13px; background: var(--ml-surface); border: 1px solid var(--ml-line); }
.ml-rt__eval-zero { position: absolute; left: 50%; top: 3px; bottom: 3px; width: 2px; background: var(--ml-muted); }
.ml-rt__eval-dot { position: absolute; top: 8px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ml-amber); opacity: .85; }
.ml-rt__eval-dot.is-ok { background: var(--ml-emerald); }
.ml-rt__eval-dot.is-miss { background: var(--ml-rose); }
.ml-rt__calib { display: grid; grid-template-columns: auto minmax(0, 1fr) 56px; align-items: center; gap: 10px; font-size: 13px; color: var(--ml-muted); }
.ml-rt__calib input { accent-color: var(--ml-pink); }

/* ── Other instruments ────────────────────────────────────────────────── */

.ml-rt__other-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ml-rt__other { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--ml-line); border-radius: 12px; background: var(--ml-surface); color: var(--ml-text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.ml-rt__other > strong { font-size: 13px; margin-bottom: 2px; }
.ml-rt__other.is-active { box-shadow: inset 0 0 0 1.5px var(--ml-pink); }
.ml-rt__mini-row, .ml-rt__mini-count { --steps: 8; display: grid; grid-template-columns: 22px repeat(var(--steps), minmax(0, 1fr)); gap: 2px; align-items: center; }
.ml-rt__mini-row em, .ml-rt__mini-count em { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--ml-dim); }
.ml-rt__mini-row i { display: grid; place-items: center; height: 18px; border-radius: 4px; background: var(--ml-surface-2); font: 700 10px Inter, sans-serif; font-style: normal; color: var(--ml-text); overflow: hidden; }
.ml-rt__mini-row i.is-on { background: color-mix(in srgb, var(--ml-pink) 30%, var(--ml-surface-2)); }
.ml-rt__mini-row i.is-accent { background: color-mix(in srgb, var(--ml-coral) 50%, var(--ml-surface-2)); }
.ml-rt__mini-count i { font-style: normal; text-align: center; font-size: 9px; color: var(--ml-dim); overflow: hidden; }

/* ── Theory ───────────────────────────────────────────────────────────── */

.ml-rt__theory { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; color: var(--ml-muted); font-size: 14px; line-height: 1.5; }
.ml-rt__tips .ml-btn svg { vertical-align: -3px; }

/* ── Focus mode: the notation, the pattern, the instrument, playback ─── */

.ml-rt.is-focus .ml-sc__head,
.ml-rt.is-focus .ml-sc__setup,
.ml-rt.is-focus .ml-rt__modes,
.ml-rt.is-focus .ml-rt__vars,
.ml-rt.is-focus .ml-rt__others,
.ml-rt.is-focus .ml-rt__tips,
.ml-rt.is-focus .ml-rt__groove { display: none; }

/* ── Layout ───────────────────────────────────────────────────────────── */

@media (min-width: 760px) {
  .ml-rt__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "setup setup"
      "modes modes"
      "score score"
      "pattern pattern"
      "stage now"
      "groove deck"
      "vars vars"
      "eval eval"
      "others others"
      "tips tips";
  }
  .ml-rt__grid .ml-rt__modes { grid-area: modes; }
  .ml-rt__grid .ml-rt__score { grid-area: score; }
  .ml-rt__grid .ml-rt__pattern { grid-area: pattern; }
  .ml-rt__grid .ml-rt__stage { grid-area: stage; }
  .ml-rt__grid .ml-rt__now { grid-area: now; grid-template-columns: minmax(0, 1fr); align-content: start; }
  .ml-rt__grid .ml-rt__groove { grid-area: groove; }
  .ml-rt__grid .ml-rt__deck { grid-area: deck; }
  .ml-rt__grid .ml-rt__vars { grid-area: vars; }
  .ml-rt__grid .ml-rt__eval { grid-area: eval; }
  .ml-rt__grid .ml-rt__others { grid-area: others; }
  .ml-rt__grid .ml-rt__tips { grid-area: tips; }
  .ml-rt__modes { grid-template-columns: minmax(360px, 520px) minmax(0, 1fr); align-items: center; column-gap: 16px; }
  .ml-rt__modes .ml-pl__mode-hint { margin: 0; }
  .ml-rt-grid { flex: 1 1 calc(50% - 8px); }
  .ml-rt__lanes[data-instrument="bateria"] .ml-rt-grid, .ml-rt__lanes[data-instrument="piano"] .ml-rt-grid { flex-basis: 100%; }
}

@media (min-width: 1100px) {
  .ml-rt__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "setup setup setup"
      "modes modes modes"
      "score score score"
      "pattern pattern now"
      "stage stage groove"
      "deck vars vars"
      "eval eval eval"
      "others others tips";
  }
  .ml-rt__grid .ml-rt__controls { grid-template-columns: none; }
  .ml-rt__modes .ml-pl__mode { flex-direction: row; gap: 8px; font-size: 13.5px; }
  .ml-rt__grid .ml-rt__now { align-self: start; }
}

@media (max-width: 759px) {
  .ml-rt { --rt-cell: 38px; }
  .ml-rt__config .ml-sc__field { flex: 1 1 42%; }
  .ml-rt__field--meter { flex: 1 1 42%; }
  .ml-rt__tempo { flex: 1 1 42%; }
  .ml-rt__tempo .ml-stepper { justify-content: space-between; }
  .ml-rt__switches { flex: 1 1 100%; justify-content: space-between; }
  .ml-rt__score-tools { width: 100%; }
  .ml-rt__score-tools .ml-seg { flex: 1; display: flex; min-width: 0; }
  .ml-rt__score-tools .ml-seg__b { flex: 1 1 auto; min-width: 0; padding-left: 3px; padding-right: 3px; font-size: 12.5px; }
  .ml-rt__score-tools .ml-sc__focus-btn { flex: 0 0 auto; }
  .ml-rt__pattern .ml-seg { display: flex; width: 100%; }
  .ml-rt__pattern .ml-seg__b { flex: 1; min-width: 0; }
  .ml-rt-grid__row { grid-template-columns: 24px repeat(var(--steps), minmax(0, 1fr)); gap: 2px; }
  .ml-rt-arrow { font-size: 15px; }
  .ml-rt-deg { font-size: 11.5px; }
  .ml-rt-cell small { display: none; }
  .ml-rt-grid__count { font-size: 10.5px; }
  .ml-rt-countbar { gap: 1px; padding-right: 8px; }
  .ml-rt-syl { min-width: 18px; padding: 5px 1px; font-size: 14px; }
  .ml-rt-syl.is-pulse { font-size: 17px; }
  .ml-rt-sub { height: 34px; font-size: 12px; }
  .ml-rt-pulse { padding: 2px; gap: 1px; }
  .ml-rt-subbar { gap: 3px; }
  .ml-rt-stage-row { flex-direction: column; align-items: stretch; }
  .ml-rt-stage-side { flex-direction: row; justify-content: center; }
  .ml-rt-stage-side svg { width: 84px; }
  .ml-rt__eval-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-rt__calib { grid-template-columns: minmax(0, 1fr) 56px; }
  .ml-rt__calib span { grid-column: 1 / -1; }
  .ml-rt__bar { min-width: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .ml-rt-cell, .ml-rt-n { transition: none; }
  .ml-rt-stroke.is-hit-soft, .ml-rt-stroke.is-hit-strong, .ml-rt-pad.is-hit-strong { animation: none; }
}