/* ===========================================================================
   Lectura — the reading laboratory of the Ejercicios module.
   Loaded after music-lab.css, practice-lab.css (the player shell, transport,
   fretboard), practice-chords.css (instrument tabs, keyboard),
   practice-scales.css (the exercise field, the wide layout, focus mode) and
   practice-rhythm.css (config row, checks, deck, other instruments). This
   file adds the staff, the cursor and eye guide, the current note, the kit
   map, the recognition trainer, sight reading and the reading map. No
   colour is defined here: the shared tokens carry the night and day themes.
   =========================================================================== */

.ml-rd [hidden], .ml-rd .ml-seg__b[hidden] { display: none !important; }

/* ── Header ───────────────────────────────────────────────────────────── */

.ml-rd__others-link { align-self: center; font-size: 12.5px; font-weight: 600; color: var(--ml-coral); text-decoration: none; white-space: nowrap; }
.ml-rd__others-link:hover, .ml-rd__others-link:focus-visible { text-decoration: underline; }
.ml-rd__field--level { flex: 0 1 130px; }

/* Settings: always open from the tablet up; one foldable line on a phone. */
.ml-rd__settings > summary { list-style: none; }
.ml-rd__settings > summary::-webkit-details-marker { display: none; }
.ml-rd__settings-sum { display: none; }
@media (max-width: 759px) {
  .ml-rd__settings-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 14px; border: 1px solid var(--ml-line); border-radius: 14px; background: var(--ml-surface); cursor: pointer; font-weight: 700; }
  .ml-rd__settings-sum small { font-weight: 600; color: var(--ml-muted); text-align: right; }
  .ml-rd__settings-sum::after { content: "▾"; color: var(--ml-dim); }
  .ml-rd__settings[open] .ml-rd__settings-sum { margin-bottom: 10px; }
  .ml-rd__settings[open] .ml-rd__settings-sum::after { content: "▴"; }
  .ml-rd .ml-pl__sum { display: none; }
}

/* Five modes on one row. */
.ml-rd .ml-rd__mode-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ── The staff ────────────────────────────────────────────────────────── */

.ml-rd__score .ml-pl__seq-head { flex-wrap: wrap; gap: 8px 12px; }
.ml-rd__score-tools { flex-wrap: wrap; justify-content: flex-end; }
.ml-rd__staff-wrap { position: relative; margin-top: 8px; }
.ml-rd__staff { display: flex; flex-direction: column; gap: 2px; min-height: 150px; }
.ml-rd__system { max-width: 100%; }
.ml-rd__system.is-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ml-rd__system svg { display: block; overflow: visible; height: auto; }
.ml-rd__plain { margin: 0; padding-left: 20px; columns: 2; font-size: 13px; color: var(--ml-muted); }

.ml-st { color: var(--ml-text); }
.ml-st__line, .ml-st__tabline { stroke: var(--ml-line-strong); stroke-width: 1.1; }
.ml-st__bar { stroke: var(--ml-muted); stroke-width: 1.2; }
.ml-st__ledger { stroke: var(--ml-text); stroke-width: 1.2; opacity: .75; }
.ml-st__thick, .ml-st__glyph, .ml-st__beam path { fill: var(--ml-text); }
.ml-st__headglyph { fill: currentColor; }
.ml-st__stem { stroke: currentColor; stroke-width: 1.25; fill: none; }
.ml-st__x { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; fill: none; }
.ml-st__tie { fill: none; stroke: var(--ml-text); stroke-width: 1.2; }
.ml-st__accent { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ml-st__tuplet, .ml-st__barnum { fill: var(--ml-dim); font: italic 700 10.5px Inter, sans-serif; }
.ml-st__barnum { font-style: normal; font-weight: 600; }
.ml-st__hit { fill: transparent; cursor: pointer; }
.ml-rd[data-mode="sight"] .ml-st__hit, .ml-rd[data-mode="evaluate"] .ml-st__hit { cursor: default; }
/* A sight run is always the whole exercise: no bar loops. */
.ml-rd[data-mode="sight"] .ml-rd__loopseg { display: none; }
.ml-st__n { color: var(--ml-text); transition: color .08s; }
.ml-st__head.is-color { color: var(--note, currentColor); }
.ml-st__n .ml-st__head.is-color .ml-st__headglyph { fill: currentColor; }
/* The note colours come from the shared ml-root-* tokens (music-lab.css). */
.ml-st__head.is-color[class*="ml-root-"] .ml-st__headglyph { fill: currentColor; }
.ml-st__n.is-now { color: var(--ml-pink); }
.ml-st__n.is-now .ml-st__head .ml-st__headglyph { fill: var(--ml-pink); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ml-pink) 70%, transparent)); }
.ml-st__n.is-next .ml-st__head .ml-st__headglyph { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ml-coral) 70%, transparent)); }
.ml-st__n.is-next::after { content: ""; }
.ml-st__n.is-next .ml-st__hit { fill: color-mix(in srgb, var(--ml-coral) 10%, transparent); }
.ml-st__n.is-now .ml-st__hit { fill: color-mix(in srgb, var(--ml-pink) 12%, transparent); }
.ml-st__n:focus-visible .ml-st__hit, .ml-st__n:hover .ml-st__hit { fill: color-mix(in srgb, var(--ml-text) 6%, transparent); }

.ml-st__name { fill: var(--ml-muted); font: 700 11.5px "Space Grotesk", sans-serif; }
.ml-st__name.is-now { fill: var(--ml-pink); }
.ml-st__chord { fill: var(--ml-coral); font: 800 13px "Space Grotesk", sans-serif; }
.ml-st__interval { fill: var(--ml-cyan); font: 700 10.5px Inter, sans-serif; }
.ml-st__contour { font: 800 13px Inter, sans-serif; fill: var(--ml-dim); }
.ml-st__contour.is-sube { fill: var(--ml-emerald); }
.ml-st__contour.is-baja { fill: var(--ml-amber); }
.ml-st__landmark { stroke: var(--ml-cyan); stroke-width: 3; opacity: .16; }
.ml-st__landmark-name { fill: var(--ml-cyan); font: 700 9.5px Inter, sans-serif; opacity: .8; }

.ml-st__tabclef { fill: var(--ml-dim); font: 800 9.5px Inter, sans-serif; letter-spacing: .06em; }
.ml-st__tabmask { fill: var(--ml-bg-2); }
.ml-st__fret { fill: var(--ml-text); font: 700 11.5px "Space Grotesk", sans-serif; }
.ml-st__tabev { transition: opacity .2s; }
.ml-st__tabev.is-now .ml-st__fret { fill: var(--ml-pink); }
.ml-st__tabev.is-now { opacity: 1 !important; }

/* Cursor and eye guide: moved by the page with a transform. */
.ml-st__cursor { fill: var(--ml-pink); opacity: 0; will-change: transform; }
.ml-st__cursor.is-on { opacity: .75; }
.ml-st__guide { fill: var(--ml-cyan); opacity: 0; transition: opacity .15s; }
.ml-st__guide.is-on { opacity: .09; }

/* Mini staves: current note, kit map, trainer, heat map, other instruments. */
.ml-st--mini { display: block; width: 100%; height: auto; }
.ml-st--quiz { max-width: 260px; margin: 0 auto; }
.ml-st__n.is-heat-1 .ml-st__headglyph { fill: var(--ml-rose); }
.ml-st__n.is-heat-2 .ml-st__headglyph { fill: var(--ml-amber); }
.ml-st__n.is-heat-3 .ml-st__headglyph { fill: var(--ml-cyan); }
.ml-st__n.is-heat-4 .ml-st__headglyph { fill: var(--ml-emerald); }
.ml-st__n.is-heat-none .ml-st__headglyph { fill: var(--ml-line-strong); }

.ml-rd__aidbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ml-line); }
.ml-rd__preview { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ml-muted); }
.ml-rd__preview .ml-input { width: auto; }
.ml-rd__adapted, .ml-rd__focus-note { margin: 8px 0 0; font-size: 13px; color: var(--ml-amber); }
.ml-rd__focus-note { color: var(--ml-cyan); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Sight reading: "Preparado", then the count-in over the staff. */
/* Before Empezar the score is hidden (first sight); it shows during the count-in. */
.ml-rd__sight { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ml-bg-2); border-radius: 12px; z-index: 2; }
.ml-rd__sight-box { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 360px; padding: 16px 20px; border: 1px solid var(--ml-line-strong); border-radius: 16px; background: var(--ml-bg-2); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.ml-rd__sight-box strong { font: 800 20px "Space Grotesk", sans-serif; }
.ml-rd__sight-box p { margin: 0; font-size: 13.5px; color: var(--ml-muted); }
.ml-rd__sight-count { font: 800 64px/1 "Space Grotesk", sans-serif; background: var(--ml-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ml-rd__sight-count:empty { display: none; }
.ml-rd__sight.is-counting { background: transparent; pointer-events: none; }
.ml-rd__sight.is-counting .ml-rd__sight-box { background: color-mix(in srgb, var(--ml-bg-2) 88%, transparent); }
.ml-rd__sight.is-counting p, .ml-rd__sight.is-counting button, .ml-rd__sight.is-counting strong { display: none; }

/* ── The current note ─────────────────────────────────────────────────── */

.ml-rd__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ml-fb__pick:focus-visible, .ml-rd-keys .ml-kb__key:focus-visible { outline: 2px solid var(--ml-coral); outline-offset: -2px; }

.ml-rd__now { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ml-rd__nowcard, .ml-rd__nextcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ml-rd__nextcard { padding-top: 10px; border-top: 1px solid var(--ml-line); }
.ml-rd__nowrow { display: flex; align-items: center; gap: 14px; }
.ml-rd__big { font: 800 2.1rem/1.05 "Space Grotesk", sans-serif; color: var(--ml-text); min-width: 0; }
.ml-rd__big.is-color { color: currentColor; }
.ml-rd__nowstaff { flex: 0 0 150px; max-width: 150px; margin-left: auto; }
.ml-rd__facts { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.ml-rd__facts dd { white-space: normal; }
.ml-rd__nowtools { display: flex; flex-wrap: wrap; gap: 8px; }
.ml-rd__nowtools .ml-btn svg { vertical-align: -3px; }
.ml-rd__next { font: 700 1.35rem "Space Grotesk", sans-serif; color: var(--ml-muted); }
.ml-rd__next-sub { color: var(--ml-dim); font-size: 12.5px; }

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

.ml-rd__stage-body { margin-top: 8px; }
.ml-rd-board .ml-fb { display: block; width: 100%; min-width: 360px; max-height: 260px; }
.ml-rd-board .ml-fb__dot.is-phrase { opacity: .38; }
.ml-rd-board .ml-fb__dot.is-out .ml-fb__disc { stroke-dasharray: 3 2; }
.ml-rd-board .ml-fb__dot.is-now, .ml-rd-board .ml-fb__dot.is-next { opacity: 1; }
.ml-rd-board .ml-fb__dot.is-now .ml-fb__halo { opacity: .35; }
.ml-rd-board .ml-fb__dot.is-now .ml-fb__disc { fill: currentColor; }
.ml-rd-board .ml-fb__dot.is-now .ml-fb__dtext { fill: #fff; }
.ml-rd-board .ml-fb__dot.is-next .ml-fb__disc { stroke-width: 3; stroke-dasharray: 4 3; }
.ml-rd-board .ml-fb__dot.is-quiz { color: var(--ml-pink); }
.ml-fb__pick { fill: transparent; cursor: pointer; }
.ml-fb__pick:hover { fill: color-mix(in srgb, var(--ml-pink) 14%, transparent); }
.ml-rd-board.is-inert .ml-fb__pick { pointer-events: none; cursor: default; }
.ml-rd__stage.is-mono .ml-fb__dot, .ml-rd__stage.is-mono .ml-kb__key { color: var(--ml-muted); }
.ml-rd-keys .ml-kb { min-width: 380px; }
.ml-rd-keys .ml-kb__key.is-now .ml-kb__white, .ml-rd-keys .ml-kb__key.is-now .ml-kb__black,
.ml-rd__refkeys .ml-kb__key.is-now .ml-kb__white, .ml-rd__refkeys .ml-kb__key.is-now .ml-kb__black { fill: currentColor; }
.ml-rd-keys .ml-kb__key.is-now:not([class*="ml-root-"]) .ml-kb__white, .ml-rd-keys .ml-kb__key.is-now:not([class*="ml-root-"]) .ml-kb__black { fill: var(--ml-pink); }
.ml-rd-keys .ml-kb__key.is-next .ml-kb__white { fill: color-mix(in srgb, var(--ml-coral) 30%, var(--ml-key-white)); }
.ml-rd-keys .ml-kb__key { cursor: default; }
.ml-rd[data-mode="evaluate"] .ml-rd-keys .ml-kb__key { cursor: pointer; }
.ml-rd__refkeys { margin-top: 10px; }
.ml-rd__refkeys-body { overflow-x: auto; }
.ml-rd__refkeys-body .ml-kb { max-width: 380px; min-width: 260px; }

.ml-rd-kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.ml-rd-pad { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 96px; padding: 8px 6px 4px; border: 1.5px solid var(--ml-line-strong); border-radius: 14px; background: var(--ml-surface); color: var(--ml-muted); font: inherit; cursor: pointer; }
.ml-rd-pad strong { font: 800 16px "Space Grotesk", sans-serif; color: var(--ml-text); }
.ml-rd-pad small { font-size: 11px; }
.ml-rd-pad__staff { display: block; width: 100%; max-width: 96px; }
.ml-rd-pad.is-used { border-color: color-mix(in srgb, var(--ml-pink) 40%, var(--ml-line-strong)); }
.ml-rd-pad.is-now { background: var(--ml-grad); border-color: transparent; color: #fff; }
.ml-rd-pad.is-now strong { color: #fff; }
.ml-rd-pad.is-now .ml-st__glyph, .ml-rd-pad.is-now .ml-st__headglyph { fill: #fff; }
.ml-rd-pad.is-now .ml-st__line { stroke: rgba(255, 255, 255, .6); }
.ml-rd-pad.is-now .ml-st { color: #fff; }
.ml-rd-pad.is-next { box-shadow: inset 0 0 0 2px var(--ml-coral); }
.ml-rd-pad.is-right { box-shadow: inset 0 0 0 2px var(--ml-emerald); }

/* ── Evaluar: the trainer ─────────────────────────────────────────────── */

.ml-rd__eval .ml-pl__seq-head { flex-wrap: wrap; gap: 8px; }
.ml-rd__quiz { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 12px; }
.ml-rd__prompt { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 120px; }
.ml-rd__where { margin: 18px 0 0; font: 800 22px "Space Grotesk", sans-serif; }
.ml-rd__ask { margin: 0; font-weight: 600; color: var(--ml-muted); }
.ml-rd__answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; width: 100%; max-width: 640px; }
.ml-rd__answer { min-height: 52px; padding: 8px 6px; border: 1.5px solid var(--ml-line-strong); border-radius: 12px; background: var(--ml-surface); color: var(--ml-text); font: 800 17px "Space Grotesk", sans-serif; cursor: pointer; touch-action: manipulation; }
.ml-rd__answer:hover { border-color: var(--ml-pink); }
.ml-rd__answer.is-right { border-color: var(--ml-emerald); background: color-mix(in srgb, var(--ml-emerald) 18%, var(--ml-surface)); }
.ml-rd__answer.is-wrong { border-color: var(--ml-rose); background: color-mix(in srgb, var(--ml-rose) 14%, var(--ml-surface)); }
.ml-rd__feedback { min-height: 1.5em; margin: 0; font-weight: 700; }
.ml-rd__feedback.is-ok { color: var(--ml-emerald); }
.ml-rd__feedback.is-off { color: var(--ml-amber); }
.ml-rd__eval-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ml-rd__eval-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0; }

/* ── Sight reading summary, information, progress ─────────────────────── */

.ml-rd__rate { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ml-rd__summary { border-color: color-mix(in srgb, var(--ml-pink) 45%, var(--ml-line)); }
.ml-rd__factors { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 6px; }
.ml-rd__factors li { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: 13px; color: var(--ml-muted); }
.ml-rd__factors i { position: relative; height: 7px; border-radius: 4px; background: var(--ml-surface-2); overflow: hidden; }
.ml-rd__factors i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: var(--ml-grad); }
.ml-rd__factors small { text-align: right; }
.ml-rd__landmarks { margin: 4px 0 10px; }
.ml-rd__landmarks .ml-st--mini { max-width: 320px; }
.ml-rd__seed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ml-muted); }
.ml-rd__seed code { padding: 2px 6px; border-radius: 6px; background: var(--ml-surface-2); color: var(--ml-text); }
.ml-rd__h3 { margin: 14px 0 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ml-dim); }
.ml-rd__heat-staff { overflow-x: auto; }
.ml-rd__heat-staff .ml-st--mini { width: auto; min-width: 100%; max-width: none; height: 150px; }
.ml-rd__heat-list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--ml-muted); display: grid; gap: 3px; }
.ml-rd__weak-list { margin: 0 0 8px; font-weight: 700; }
.ml-rd__other > span { font-size: 12.5px; color: var(--ml-muted); }
.ml-rd__other-staff { display: block; width: 100%; max-width: 220px; }

/* ── Focus mode: the staff, the note, the instrument, playback ────────── */

.ml-rd.is-focus .ml-sc__head,
.ml-rd.is-focus .ml-sc__setup,
.ml-rd.is-focus .ml-rd__modes,
.ml-rd.is-focus .ml-rd__others,
.ml-rd.is-focus .ml-rd__tips,
.ml-rd.is-focus .ml-rd__aidbar { display: none; }

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

.ml-rd__grid { grid-template-areas: none; }

@media (min-width: 760px) {
  .ml-rd__grid.ml-rt__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "setup setup"
      "modes modes"
      "score score"
      "eval eval"
      "summary summary"
      "stage now"
      "deck deck"
      "others others"
      "tips tips";
  }
  .ml-rd__grid .ml-rd__modes { grid-area: modes; }
  .ml-rd__grid .ml-rd__score { grid-area: score; }
  .ml-rd__grid .ml-rd__eval { grid-area: eval; }
  .ml-rd__grid .ml-rd__summary { grid-area: summary; }
  .ml-rd__grid .ml-rd__stage { grid-area: stage; }
  .ml-rd__grid .ml-rd__now { grid-area: now; align-self: start; }
  .ml-rd__grid .ml-rd__deck { grid-area: deck; }
  .ml-rd__grid .ml-rd__others { grid-area: others; }
  .ml-rd__grid .ml-rd__tips { grid-area: tips; }
  .ml-rd__modes { grid-template-columns: minmax(420px, 640px) minmax(0, 1fr); }
  /* No instrument (aid off): the note takes the row. */
  .ml-rd__grid:has(.ml-rd__stage[hidden]) .ml-rd__now { grid-column: 1 / -1; }
  .ml-rd[data-mode="evaluate"] .ml-rd__grid .ml-rd__stage { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .ml-rd__grid.ml-rt__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "setup setup setup"
      "modes modes modes"
      "score score score"
      "eval eval eval"
      "summary summary summary"
      "stage stage now"
      "deck deck now"
      "others others tips";
  }
  .ml-rd .ml-rd__mode-list .ml-pl__mode { flex-direction: row; gap: 8px; font-size: 13.5px; }
  .ml-rd__big { font-size: 2.4rem; }
}

/* iPad landscape and laptops: staff and instrument share the first screen. */
@media (min-width: 1000px) and (max-height: 900px) {
  .ml-rd__staff { min-height: 0; }
}

@media (max-width: 759px) {
  .ml-rd .ml-rd__mode-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .ml-rd .ml-rd__mode-list .ml-pl__mode { padding: 8px 2px; font-size: 11px; }
  .ml-rd .ml-rd__mode-list .ml-pl__mode span { white-space: normal; line-height: 1.15; text-align: center; }
  .ml-rd__score-tools { width: 100%; justify-content: space-between; }
  .ml-rd__score-tools .ml-seg { order: 3; flex: 1 1 100%; display: flex; }
  .ml-rd__score-tools .ml-seg__b { flex: 1; min-width: 0; padding-left: 3px; padding-right: 3px; font-size: 12px; }
  .ml-rd__nowrow { flex-wrap: wrap; }
  .ml-rd__big { font-size: 1.8rem; }
  .ml-rd__nowstaff { flex-basis: 120px; max-width: 120px; }
  .ml-rd__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-rd__eval-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-rd__factors li { grid-template-columns: minmax(0, 1fr) 80px 36px; }
  .ml-rd__answers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ml-rd__eval .ml-seg { display: flex; flex-wrap: wrap; width: 100%; }
  .ml-rd__eval .ml-seg__b { flex: 1 1 40%; }
  .ml-rd-board .ml-fb { min-width: 340px; }
  .ml-rd__aidbar { gap: 0 12px; }
  .ml-rd__plain { columns: 1; }
}

/* The sticky transport on a phone: previous, play, next, tempo, metronome
   (the loop stays on the page). */
@media (max-width: 440px) {
  .ml-reading-page .ml-pl__dock--full { gap: 6px; }
  .ml-reading-page .ml-pl__dock-tog[aria-label="Repetir en bucle"] { display: none; }
  .ml-reading-page .ml-pl__dock-info strong { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ml-st__cursor { transition: none !important; }
  .ml-st__n, .ml-st__tabev, .ml-st__guide { transition: none; }
}