/* trainers.css - the music trainers (includes/music/trainers.php, assets/music/trainers.js). Site tokens only; never
   red (a miss is amber, a right answer the study teal); keycaps with the house lip (brainlag.css --lip, the focus ring
   wraps the lip); answer keys 56 px and up, every other control 44 px. Notation and keyboards stay left to right in Arabic. */
.mtr-main{padding-top:10px;padding-bottom:40px}
.mtr-main .panel{background:var(--surface);border-radius:var(--r3);box-shadow:var(--shadow);padding:20px 22px;margin:16px 0}
@media (max-width:600px){.mtr-main .panel{padding:16px 14px}}
.mtr-main .tool-hero{margin:8px 0 4px}.mtr-main .tool-hero h1{margin:0 0 6px}.mtr-main .tool-hero p{margin:0;color:var(--ink-2);max-width:66ch}
.mtr-en{margin:0;text-align:end;font-size:14.5px}
.mtr-en a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2)}
.mtr-crumb{margin:6px 0 0;font-size:15px}
.mtr-crumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--study-ink);font-weight:700}

/* the hub */
.mtr-grp{margin:22px 0 0;font:700 19px var(--f-display);color:var(--ink)}
.mtr-cards{list-style:none;padding:0;align-items:stretch;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:14px 0}
.mtr-card{display:flex;gap:14px;align-items:center;height:100%;box-sizing:border-box;padding:14px 16px;min-height:84px;color:var(--ink);text-decoration:none;
  background:var(--surface);border:2px solid var(--rule-2);border-radius:18px;box-shadow:none;
  transition:border-color .15s cubic-bezier(.22,1,.36,1),transform .12s cubic-bezier(.22,1,.36,1),box-shadow .12s cubic-bezier(.22,1,.36,1)}
.mtr-card:hover{border-color:var(--study)}
.mtr-card:active{transform:scale(.98);box-shadow:0 0 0 var(--rule-2)}
.mtr-card:focus-visible{outline:3px solid var(--study-ink);outline-offset:3px}
.mtr-ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--study-tint);color:var(--study-ink)}
.mtr-ct{display:flex;flex-direction:column;gap:3px;min-width:0}
.mtr-ct b{font:700 18px var(--f-display)}
.mtr-ct span{font-size:15px;color:var(--ink-2)}
.mtr-rch .mt-sheet{overflow:hidden}.mtr-rch .mt-sheet svg{max-width:100%;height:auto}
.mtr-ct .mtr-lv{color:var(--study-ink);font-weight:700}
.mtr-ct .mtr-lv:empty{display:none}
/* (14 Oct 2026) each row: the trainer's Bravura glyph, its name, and one line of this browser's progress, "New" muted;
   the line is always there (a space until filled), so the row never moves. The play key is the quiet second action: an
   outline, so the row itself reads as the way in */
.mtr-ic .mtr-gly{width:42px;height:42px;color:var(--study-ink)}   /* one size for every trainer: the stave fills the tile */
.mtr-hero .mtr-ic .mtr-gly{width:46px;height:46px}   /* the heading's tile is 56 px */
.mtr-ct .mtr-lv{font-size:14.5px;line-height:1.3}
.mtr-ct .mtr-lv.is-new{color:var(--ink-3);font-weight:600}
.mtr-cw .mtr-demo{background:transparent;color:var(--study-ink);box-shadow:inset 0 0 0 2px var(--rule-2);transition:box-shadow .18s cubic-bezier(.22,1,.36,1)}
.mtr-cw .mtr-demo:hover,.mtr-cw.is-playing .mtr-demo{box-shadow:inset 0 0 0 2px var(--study)}
@media (prefers-reduced-motion:reduce){.mtr-cw .mtr-demo{transition:none}}

/* (14 Oct 2026) the start screen's worked sample: "Example" in plain muted text, then one row (the play key, the
   stave, the answers greyed with the right one outlined). A fixed height, so drawing it in moves nothing (CLS 0); on a
   phone the answers take a second line inside the same box */
/* its height from what it holds, held at least to its usual size from the first paint (P0 sweep, 19 Oct 2026: a fixed
   height with the overflow clipped cut option B off at 320 px) */
.mtr-ex{display:grid;grid-template-rows:auto 1fr;gap:6px;min-height:132px;min-width:0}
.mtr-ex[hidden]{display:none}
.mtr-ex-h{margin:0;font-size:14px;line-height:18px;font-weight:600;color:var(--ink-3)}
.mtr-ex-row{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:8px 14px;min-width:0;visibility:hidden;opacity:0}
.mtr-ex-row.is-ready{visibility:visible;opacity:1;transition:opacity .2s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.mtr-ex-row.is-ready{transition:none}}
.mtr-ex-play{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--study-ink);
  box-shadow:inset 0 0 0 2px var(--rule-2);cursor:pointer;touch-action:manipulation;transition:box-shadow .18s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1)}
.mtr-ex-play:hover,.mtr-ex-play.is-playing{box-shadow:inset 0 0 0 2px var(--study)}
.mtr-ex-play:active{transform:scale(.96)}
.mtr-ex-play:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
/* the white stave card (on navy too): the cards' 12 px radius, and paper round the music so the clef and a ledger-line
   note never meet the edge; drawn near full size, so the engine's ledger lines read at 1x */
.mtr-ex-sheet{flex:0 1 auto;height:100px;padding:10px 14px;border-radius:12px;max-width:100%;box-sizing:border-box;min-width:0;min-height:0;overflow:hidden;direction:ltr}
.mtr-ex-sheet > div{height:100%;max-width:100%}
/* the stave at the box's height; a long one (the scale on a phone) narrows to the column and keeps its proportions */
.mtr-ex-sheet svg{display:block;height:100%!important;width:auto!important;max-width:100%!important;max-height:100%;min-width:0!important}
.mtr-ex-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;min-width:0}
.mtr-ex-c{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border-radius:10px;background:var(--sunk);color:var(--ink-2);font:600 14.5px var(--f-body);
  box-shadow:inset 0 0 0 1.5px var(--rule-2);cursor:default;user-select:none;-webkit-user-select:none}
.mtr-ex-c.is-ans{color:var(--ink-2);box-shadow:inset 0 0 0 2px var(--study);opacity:1}
.mtr-ex-o b{font:700 14.5px var(--f-display)}
.mtr-ex-sheet.is-opt{height:64px;padding:6px 10px}
.mtr-ex-o{padding:4px 4px 4px 10px;border-radius:16px}
@media (max-width:600px){
  .mtr-ex{min-height:172px}
  .mtr-ex-sheet{height:92px;padding:8px 12px}
  .mtr-ex-sheet.is-opt{height:60px;padding:6px 10px}
  /* the play key on its own line, the stave the column's full width under it (it had shared the line and narrowed to 4 px
     a stave space), then the answers (P0 sweep, 19 Oct 2026) */
  .mtr-ex-row{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:8px}
  .mtr-ex-chips{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.mtr-ex-play{transition:none}.mtr-ex-play:active{transform:none}}

/* the bar: grade, the meter of the last 10, the run, the grade picker */
.mtr-topics{margin:0 0 12px}
.mtr-topics[hidden]{display:none}
.mtr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 10px}
.mtr-grade{font:700 18px var(--f-display);color:var(--ink)}
.mtr-grade.lvup{animation:mtrUp .5s cubic-bezier(.22,1,.36,1)}
@keyframes mtrUp{0%{transform:scale(1)}35%{transform:scale(1.18);color:var(--study-ink)}100%{transform:scale(1)}}
.mtr-streak{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:var(--gold-tint);color:var(--gold-ink);font:700 14.5px var(--f-body);animation:mtrIn .3s cubic-bezier(.22,1,.36,1)}
.mtr-streak[hidden]{display:none}
@keyframes mtrIn{from{opacity:0;transform:translateY(4px)}}
.mtr-pick{margin-inline-start:auto}
.mtr-pick select{min-height:44px;min-width:12em}
.mtr-daily{margin:0 0 10px;font-weight:700;color:var(--study-ink)}
.mtr-stage{min-height:260px}
.mtr-q{font-size:20px;margin:6px 0 8px}
.mtr-qrow .mtr-play{margin:2px 0 0}

/* answer keys: keycaps with a lip */
.mtr-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
@media (max-width:420px){.mtr-choices{grid-template-columns:1fr 1fr}}
.mtr-ch{--lip:4px;--ring-r:19px;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:60px;padding:10px 14px;
  border:2px solid var(--rule-2);border-radius:14px;background:var(--surface);color:var(--ink);font:600 17px/1.25 var(--f-body);cursor:pointer;
  box-shadow:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:border-color .12s cubic-bezier(.22,1,.36,1),background-color .12s cubic-bezier(.22,1,.36,1),box-shadow .09s,transform .09s}
.mtr-ch:hover{border-color:var(--study)}
.mtr-ch:active{transform:scale(.98);box-shadow:0 0 0 var(--rule-2)}
.mtr-ch:focus-visible{outline:none}
.mtr-ch:focus-visible::after{content:"";position:absolute;inset:-5px -5px calc(-5px - var(--lip)) -5px;border:3px solid var(--study-ink);border-radius:var(--ring-r);pointer-events:none}
.mtr-ch .k{position:absolute;top:5px;inset-inline-start:7px;font:600 12px var(--f-mono,ui-monospace,Menlo,monospace);color:var(--ink-3);opacity:0;transition:opacity .15s}
.mtr-ch:hover .k,.mtr-ch:focus-visible .k{opacity:1}
/* the key that picks each answer, in its corner, once a key has been used, and always with a mouse or trackpad (owner, 12 Oct) */
html.mtr-keyed .mtr-ch .k{opacity:1}
@media (pointer:fine){.mtr-ch .k{opacity:1}}
.mtr-ch.ok{border-color:var(--study);background:var(--study-tint);box-shadow:none;animation:mtrPop .26s cubic-bezier(.22,1,.36,1)}
.mtr-ch.no{border-color:var(--gold);background:var(--gold-tint);box-shadow:none}
@keyframes mtrPop{0%{transform:scale(.97)}45%{transform:scale(1.04)}100%{transform:none}}
.mtr-ch:disabled{cursor:default;color:var(--ink)}
.mtr-ch:disabled:not(.ok):not(.no){opacity:.7}
.mtr-letters{display:grid;grid-template-columns:repeat(7,minmax(44px,1fr));gap:6px;margin:12px 0 0;direction:ltr}
.mtr-l{font:700 19px var(--f-display);padding:0;min-height:64px}
.mtr-l .t{white-space:nowrap}
@media (max-width:480px){.mtr-letters{grid-template-columns:repeat(4,minmax(44px,1fr));gap:8px}}
.mtr-acc{margin:10px 0 0;direction:ltr}
.mtr-acc button{font:700 20px var(--f-display);min-width:52px;min-height:48px}
.mtr-sheet{min-height:150px}
.mt-sheet,.mtr-kb,.mtr-rchoices{direction:ltr}
.mtr-time{height:8px;border-radius:999px;background:var(--sunk);overflow:hidden;margin:10px 0 0;direction:ltr}
.mtr-time span{display:block;height:100%;width:100%;background:var(--study);transition:width .1s linear}
.mtr-go{min-height:48px}
.mtr-pad{display:grid;place-items:center;width:min(100%,360px);height:180px;margin:14px auto 0;border:3px solid var(--study);border-radius:28px;background:var(--study-tint);color:var(--ink);
  font:700 26px var(--f-display);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;box-shadow:none;transition:transform .06s,box-shadow .06s}
.mtr-pad.hit{background:var(--study);color:var(--on-study-btn,#fff);transform:translateY(5px);box-shadow:none}
.mtr-pad:disabled{opacity:.55;cursor:default}
.mtr-rchoices{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:760px){.mtr-rchoices{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.mtr-rch{justify-content:flex-start;padding:8px 10px;min-height:96px}
.mtr-rch .mt-sheet{flex:1;min-height:80px;min-width:0}
.mtr-rl{font:700 18px var(--f-display);color:var(--ink);min-width:24px}
.mtr-kb{margin:12px 0 0}
.mtr-act{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.mtr-act .b{min-height:48px}
.mtr-nextrow .b{min-width:9em}
.mtr-tune{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:var(--sunk)}
.mtr-tune summary{cursor:pointer;font-weight:700;color:var(--study-ink);min-height:44px;display:flex;align-items:center}
.mtr-tune p{margin:6px 0 0;color:var(--ink-2)}
.mtr-fb{min-height:1.4em;margin:12px 0 0;font-weight:700;font-size:17px}
.mtr-fb.ok{color:var(--study-ink)}
.mtr-fb.no{color:var(--ink)}
.mtr-sing{font:700 18px var(--f-display);margin:12px 0 0;min-height:1.4em}
.mtr-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 0}
.mtr-foot .mt-note{margin:0}

/* the locked grade: calm, no urgency (owner, 11 Oct 2026); the one character on the screen */
.mtr-lock,.mtr-sum{display:flex;gap:18px;align-items:flex-start;padding:18px 20px;border-radius:var(--r2,18px);background:var(--sunk)}
.mtr-char{flex:none;width:104px;height:auto}
.mtr-sum .mtr-char{width:120px}
@media (max-width:560px){.mtr-lock,.mtr-sum{flex-direction:column;align-items:stretch}.mtr-char{width:84px}.mtr-sum .mtr-char{width:96px}}
.mtr-lock-tx,.mtr-sum-tx{flex:1;min-width:0}
.mtr-lock h2,.mtr-sum h2{font-size:20px;margin:0 0 8px}
.mtr-lock p{margin:0 0 8px;color:var(--ink-2)}
.mtr-plans{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.mtr-plans li{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.mtr-plans b{color:var(--ink)}
.mtr-plans span{color:var(--ink-2);font-size:15px}
.mtr-lock-act{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
.mtr-lock-act .b{min-height:48px}
.mtr-lock-more{margin:12px 0 0!important}
.mtr-lock-more a{display:inline-flex;align-items:center;min-height:44px;color:var(--study-ink);font-weight:700}
.mtr-stats{list-style:none;margin:6px 0 4px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.mtr-stats li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--surface);animation:mtrIn .32s cubic-bezier(.22,1,.36,1) both}
.mtr-stats li:nth-child(2){animation-delay:.06s}.mtr-stats li:nth-child(3){animation-delay:.12s}.mtr-stats li:nth-child(4){animation-delay:.18s}
.mtr-stats b{font:700 26px/1.1 var(--f-display);color:var(--study-ink);font-variant-numeric:tabular-nums}
.mtr-stats span{font-size:14.5px;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.mtr-time span,.mtr-card,.mtr-ch,.mtr-pad{transition:none}.mtr-grade.lvup,.mtr-ch.ok,.mtr-streak,.mtr-stats li{animation:none}}
:root[data-motion=off] .mtr-grade.lvup,:root[data-motion=off] .mtr-ch.ok,:root[data-motion=off] .mtr-streak,:root[data-motion=off] .mtr-stats li{animation:none}

/* the folded sections under the trainer (owner, 12 Oct 2026): native details, short summaries 44 px tall with a chevron */
.mtr-secs{margin:18px 0 0;border-top:1px solid var(--rule)}
.mtr-sec{border-bottom:1px solid var(--rule)}
.mtr-sec summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 4px;cursor:pointer;list-style:none;font:700 17px var(--f-display);color:var(--ink)}
.mtr-sec summary::-webkit-details-marker{display:none}
.mtr-sec summary:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px;border-radius:8px}
.mtr-chev{flex:none;color:var(--ink-2);transition:transform .2s cubic-bezier(.22,1,.36,1)}
.mtr-sec[open] .mtr-chev{transform:rotate(180deg)}
.mtr-sb{padding:0 4px 14px;color:var(--ink-2);max-width:70ch}
.mtr-sb p{margin:0 0 8px}.mtr-sb ul{margin:0;padding-inline-start:20px}.mtr-sb li{margin:0 0 6px}
.mtr-keys{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;align-items:center}
.mtr-keys dt{margin:0;direction:ltr;text-align:start}.mtr-keys dd{margin:0}
.mtr-keys .kbd{display:inline-block;min-width:22px;text-align:center;padding:3px 6px;margin-inline-end:3px;border-radius:6px;border:1px solid rgba(var(--ink-rgb),.2);border-bottom-width:2px;background:var(--surface);color:var(--ink);font:600 12.5px/1.2 var(--f-mono,ui-monospace,Menlo,monospace)}
@media (prefers-reduced-motion:reduce){.mtr-chev{transition:none}}

/* the hub's mini demos: a play key on each card (beside the link, never inside it), the icon pulsing while it sounds */
.mtr-cw{position:relative}
.mtr-cw .mtr-card{padding-inline-end:66px}
.mtr-demo{--lip:3px;position:absolute;top:50%;inset-inline-end:14px;transform:translateY(-50%);display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;
  background:var(--study-btn,var(--study));color:var(--on-study-btn,#fff);box-shadow:none;cursor:pointer;touch-action:manipulation}
.mtr-demo:active{transform:translateY(calc(-50% + 3px));box-shadow:none}
.mtr-demo:focus-visible{outline:3px solid var(--study-ink);outline-offset:3px}
.mtr-demo svg{grid-area:1/1}
.mtr-eq{grid-area:1/1;display:none;align-items:flex-end;gap:2px;height:16px}
.mtr-eq i{width:3px;height:100%;border-radius:2px;background:currentColor;transform-origin:bottom;animation:mtrEq .7s ease-in-out infinite alternate}
.mtr-eq i:nth-child(2){animation-delay:-.25s}.mtr-eq i:nth-child(3){animation-delay:-.5s}
@keyframes mtrEq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.mtr-cw.is-playing .mtr-demo svg{display:none}
.mtr-cw.is-playing .mtr-eq{display:flex}
.mtr-cw.is-playing .mtr-ic{animation:mtrPulse .9s cubic-bezier(.22,1,.36,1) infinite alternate}
@keyframes mtrPulse{from{transform:scale(1)}to{transform:scale(1.08)}}
.mtr-hero{display:flex;align-items:center;gap:14px}
.mtr-hero .mtr-ic{width:56px;height:56px}
@media (prefers-reduced-motion:reduce){.mtr-eq i,.mtr-cw.is-playing .mtr-ic{animation:none}}
:root[data-motion=off] .mtr-eq i,:root[data-motion=off] .mtr-cw.is-playing .mtr-ic{animation:none}

/* Dictation: careful listening (owner, 12 Oct 2026). One big Play with the plays left; the tempo for rhythms; the
   answers appear after the first play */
.mtr-listen{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:4px 0 14px}

.mtr-tempo{font:700 18px var(--f-display);color:var(--ink);direction:ltr;unicode-bidi:isolate}
.mtr-lf{flex-basis:100%;margin:0}
.mtr-input[hidden],.mtr-choices[hidden],.mtr-rchoices[hidden]{display:none}
.mtr-input,.mtr-choices,.mtr-rchoices{animation:mtrIn .3s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.mtr-input,.mtr-choices,.mtr-rchoices{animation:none}}

/* ---------------------------------------------------------------- the landing and the focused flow (owner, 12 Oct
   2026: practice as Daily 5 does it). The landing: the topic, the grade with its meter and one line saying what it means,
   the lock or Start. The flow: no site header, footer or card; the X and the session's dots at the top, the settings
   behind an icon, Check or Next pinned at thumb reach with the safe area below it. */
.mtr-start{display:grid;gap:14px}
.mtr-lvl{display:grid;gap:8px}
.mtr-lvl-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.mtr-metert{margin:0}
.mtr-big{min-height:56px;font-size:18px;justify-content:center;width:100%;max-width:420px}
.mtr-start .mtr-big{justify-self:start}
.mtr-dots{display:flex;gap:6px;margin:0;padding:0;list-style:none;direction:ltr}
.mtr-dots[hidden]{display:none}
.mtr-d{flex:none;width:clamp(22px,calc((100vw - 32px - 54px) / 10),28px);height:clamp(22px,calc((100vw - 32px - 54px) / 10),28px);border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--rule-2);transition:background-color .25s ease,box-shadow .25s ease}
.mtr-d.is-cur{box-shadow:inset 0 0 0 2.5px var(--study-ink)}
.mtr-d.is-ok{background:var(--study);box-shadow:none}
.mtr-d.is-no{background:var(--warn-bg,#ffe9c2);box-shadow:inset 0 0 0 1.5px var(--warn-ink,#8a4b00)}
body.mtr-in .blh,body.mtr-in .blf,body.mtr-in .bl-tabs,body.mtr-in .mh-sub,body.mtr-in .bl-skip{display:none!important}
body.mtr-in .mtr-main{padding-top:0;padding-bottom:40px}
.mtr-flow{max-width:760px;margin:0 auto;min-height:100dvh}
.mtr-flow[hidden]{display:none}
.mtr-ftop{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;min-height:56px;padding:6px 0;background:var(--paper)}
.mtr-x,.mtr-setb{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer}
.mtr-x:hover,.mtr-setb:hover,.mtr-setb[aria-expanded="true"]{background:rgba(var(--ink-rgb),.08);color:var(--ink)}
.mtr-x:focus-visible,.mtr-setb:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.mtr-fmid{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
.mtr-ftools{display:flex;align-items:center;gap:2px}
.mtr-kbd .kbdm-pop{bottom:auto;top:calc(100% + 8px)}
.mtr-set{position:relative}
.mtr-setp{position:absolute;z-index:40;top:calc(100% + 8px);inset-inline-end:0;min-width:220px;width:max-content;max-width:min(90vw,420px);box-sizing:border-box;padding:14px;border-radius:var(--r2,18px);background:var(--surface);box-shadow:0 0 0 1px rgba(var(--ink-rgb),.1),0 14px 34px rgba(6,14,26,.22)}
.mtr-setp[hidden]{display:none}
.mtr-setp label{display:grid;gap:6px;font-weight:700;color:var(--ink)}
.mtr-setp select{min-height:44px;width:100%;max-width:100%;text-overflow:clip}   /* as wide as its longest option (the popover grows to fit, up to 90vw) */
.mtr-setp label span{overflow-wrap:anywhere}
.mtr-sess{justify-content:center;margin:2px 0 14px}
.mtr-flow .mtr-stage{min-height:0}
.mtr-fbar{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:20px 0 0}
.mtr-fbar[hidden]{display:none}
.mtr-fbar .mtr-big{width:auto;min-width:170px;max-width:none;min-height:48px;font-size:17px}
.mtr-fbar .mtr-big:disabled{opacity:.45;cursor:default}
/* one clean filled button: no lip, no border; the focus ring only for the keyboard */
.mtr-fbar .mtr-big{box-shadow:none;border:0;border-radius:14px}   /* the speaker's and the answer keys' corner: one radius in the bar */
.mtr-fbar .mtr-big:active{transform:scale(.98)}
.mtr-fbar .mtr-big:focus{outline:none}
.mtr-fbar .mtr-big:focus-visible{outline:3px solid var(--study-ink);outline-offset:3px}
.mtr-fbar .mtr-big:focus-visible::after{content:none}
.mtr-again{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;padding:0;border:2px solid var(--rule-2);border-radius:14px;background:var(--surface);color:var(--study-ink);cursor:pointer;touch-action:manipulation}
.mtr-again[hidden]{display:none}
.mtr-again:hover{border-color:var(--study)}
.mtr-again:active{transform:scale(.98)}
.mtr-again:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.mtr-again:disabled{opacity:.5;cursor:default}
/* phones (narrow and touch): pinned to the bottom with the safe area, the 56 px speaker then the primary filling the rest */
@media (max-width:600px) and (hover:none),(max-width:600px) and (pointer:coarse){
  .mtr-fbar{position:fixed;z-index:30;left:0;right:0;bottom:0;justify-content:stretch;padding:10px 16px max(12px, env(safe-area-inset-bottom));background:var(--paper);box-shadow:0 -1px 0 var(--rule)}
  .mtr-fbar .mtr-big{flex:1;min-width:0;height:56px;min-height:0;font-size:18px}
  .mtr-again{width:56px;height:56px}
  body.mtr-in .mtr-main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
/* note names: the accidental and the quaver of a tempo are Bravura glyphs, never text signs */
@font-face{font-family:"BL Bravura";src:url(/assets/music/vendor/fonts/bravura/bravura.woff2) format("woff2");font-display:block}
.mtr-acc{font:400 1.4em/0 "BL Bravura";margin:0 .05em 0 .04em;position:relative;vertical-align:baseline}
.mtr-oct{font-variant-numeric:tabular-nums}
.mtr-accb .mn-acc{font-size:30px}   /* the keys' glyphs are note-name.css's .mn-acc, centred there */
.mtr-qn{font-size:1.5em;top:-.2em}
/* dictation's stave across the width, with a slot for every note to write */
.mtr-dsheet{width:100%;min-height:0;overflow-x:auto;overflow-y:hidden}
.mtr-dsheet svg{display:block;width:100%!important;height:auto}
.mtr-slot{fill:#9aa9bb}
.mtr-slot.is-on{fill:#0d9aa7}
.mtr-input{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.mtr-kbw,.mtr-ihead{min-width:0}
.mtr-stage,.mtr-flow{min-width:0}
.mtr-clear{justify-self:end;min-height:44px;padding:0 14px;font-size:15px}
.mtr-kbw{position:relative}
.mtr-kbw.is-scroll::after{content:"";position:absolute;top:0;bottom:8px;inset-inline-end:0;width:36px;pointer-events:none;background:linear-gradient(to left,var(--paper),transparent);transition:opacity .2s}
.mtr-kbw.is-scroll.at-end::after{opacity:0}
.mtr-kbmore{margin:-4px 0 0;font-size:14px}
.mtr-kbmore[hidden]{display:none}
.mtr-kb .mtk-c{font-size:13px;color:#2c4a6b}
.mtr-kb .mtk-key.mtr-c4{box-shadow:none}
.mtr-kb .mtk-key.mtr-c4 .mtk-c{color:#08707a;font-weight:800}

@media (prefers-reduced-motion:reduce){.mtr-d{transition:none}}

/* Dictation's guesses (owner, 12 Oct): the time signature, then the key, each a row of chips; a tap shows the answer
   (teal, or amber beside the right one), Skip moves on; neither blocks the writing */
.mtr-steps{display:grid;gap:12px;margin:0 0 12px}
.mtr-guess{padding:16px;border-radius:14px;background:var(--sunk);animation:mtrIn .3s cubic-bezier(.22,1,.36,1)}
.mtr-gq{margin:0 0 8px;font:700 17px var(--f-display);color:var(--ink)}
.mtr-gchips{display:flex;flex-wrap:wrap;gap:8px}
.mtr-gchip{display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;padding:6px 14px;border:2px solid var(--rule-2);border-radius:14px;background:var(--surface);color:var(--ink);font:600 16px var(--f-body);cursor:pointer;touch-action:manipulation}
.mtr-gchip:hover{border-color:var(--study)}
.mtr-gchip:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.mtr-gchip:active{transform:scale(.98)}
.mtr-gchip.ok{border-color:var(--study);background:var(--study-tint)}
.mtr-gchip.no{border-color:var(--gold);background:var(--gold-tint)}
.mtr-gchip:disabled{cursor:default}
.mtr-gchip:disabled:not(.ok):not(.no){opacity:.6}
.mtr-ts{display:inline-flex;flex-direction:column;align-items:center;font:400 32px/1 "BL Bravura";direction:ltr}
.mtr-ts b{display:block;height:.5em;line-height:.5em;font-weight:400;overflow:visible}
.mtr-gmsg{margin:8px 0 0;font-weight:700;color:var(--ink);min-height:0}
.mtr-gmsg:empty{display:none}
.mtr-gskip{display:inline-flex;align-items:center;min-height:44px;margin:4px 0 0;padding:0 4px;border:0;background:none;color:var(--study-ink);font:700 15px var(--f-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.mtr-gskip[hidden]{display:none}
.mtr-write{margin:4px 0 8px;font-weight:700;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.mtr-guess{animation:none}}

/* the speaker (play and play again): secondary, beside the question; the badge counts the plays left */
.mtr-qrow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 14px}
.mtr-qtx{min-width:0}
.mtr-spk{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-width:56px;height:56px;padding:0 16px;border:2px solid var(--rule-2);border-radius:999px;background:var(--surface);color:var(--study-ink);font:700 17px var(--f-body);cursor:pointer;touch-action:manipulation}
.mtr-spk:hover{border-color:var(--study)}
.mtr-spk:active{transform:scale(.98)}
.mtr-spk:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.mtr-spk:disabled{opacity:.5;cursor:default}
.mtr-spk.is-first{background:var(--study-btn,var(--study));border-color:transparent;color:var(--on-study-btn,#fff)}
.mtr-spk:not(.is-first){width:56px;padding:0}
.mtr-spk-n{position:absolute;top:-6px;inset-inline-end:-6px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--study-btn,var(--study));color:var(--on-study-btn,#fff);font:700 13px/1 var(--f-body)}
.mtr-listen{gap:12px 16px}
.mtr-lock-price{font-weight:700;color:var(--ink)!important}

/* ---------------------------------------------------------------- the focus mode fills the screen (owner, 12 Oct:
   "bigger to use up more space?" at 1440, "use more of the space on mobile?" at 390). Top to bottom: the bar and the
   dots, the question and its hint, the listen hero centred in the free space (a big round play key that pulses while
   it sounds, "Play again" under it), the answers in the thumb zone, then Next. The hero is the only play control: the
   bar's speaker steps aside when there is one (Dictation keeps its counted speaker). Wider: an 880 px column, the
   question at heading size, four short answers in a row, else two by two, 72 px keys. Short phones: the hero shrinks
   first, nothing scrolls. */
.mtr-flow:has(.mtr-hplay) .mtr-again{display:none}
.mtr-hw{display:flex;flex-direction:column;align-items:center;gap:10px;margin:auto 0;padding:16px 0}
.mtr-hplay{position:relative;display:grid;place-items:center;width:120px;height:120px;border:0;border-radius:50%;background:var(--study-btn,var(--study));color:var(--on-study-btn,#fff);cursor:pointer;touch-action:manipulation;transition:transform .12s cubic-bezier(.22,1,.36,1),background-color .15s}
.mtr-hplay svg{width:48px;height:48px}
.mtr-hplay:hover{background:var(--study-btn-hover,var(--study))}
.mtr-hplay:active{transform:scale(.96)}
.mtr-hplay::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 color-mix(in srgb,var(--study) 45%,transparent);pointer-events:none}
.mtr-hplay.is-playing::after{animation:mtrPulse2 1.1s cubic-bezier(.22,1,.36,1) infinite}
@keyframes mtrPulse2{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--study) 45%,transparent)}100%{box-shadow:0 0 0 22px color-mix(in srgb,var(--study) 0%,transparent)}}
.mtr-hw-t{margin:0;font-size:14.5px;font-weight:600;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.mtr-hplay.is-playing::after{animation:none;box-shadow:0 0 0 6px color-mix(in srgb,var(--study) 30%,transparent)}}
:root[data-motion=off] .mtr-hplay.is-playing::after{animation:none;box-shadow:0 0 0 6px color-mix(in srgb,var(--study) 30%,transparent)}
.mtr-flow .mtr-ch{min-height:72px;font-size:19px;border-radius:16px}
/* phones: one screen tall above the pinned bar; the stage a column, the answers pushed to its foot */
@media (max-width:600px) and (hover:none),(max-width:600px) and (pointer:coarse){
  body.mtr-in .mtr-flow{display:flex;flex-direction:column;min-height:calc(100dvh - 96px - env(safe-area-inset-bottom))}
  body.mtr-in .mtr-flow > .mtr-stage{flex:1 1 auto;display:flex;flex-direction:column}
  body.mtr-in .mtr-flow .mtr-choices{margin-top:auto;grid-template-columns:1fr 1fr}
  body.mtr-in .mtr-flow .mtr-ch{min-height:76px}
  body.mtr-in .mtr-flow .mtr-qrow{margin:0 0 4px}
  body.mtr-in .mtr-flow .mtr-fb{min-height:0;margin:10px 0 0}
  body.mtr-in .mtr-flow.is-done{min-height:0}
}
@media (max-width:600px) and (max-height:700px){
  .mtr-hplay{width:84px;height:84px}.mtr-hplay svg{width:36px;height:36px}
  .mtr-hw{gap:6px;padding:8px 0}
  body.mtr-in .mtr-flow .mtr-ch{min-height:64px}
}
@media (min-width:761px) and (hover:hover),(min-width:761px) and (pointer:fine){
  .mtr-flow{max-width:880px;display:flex;flex-direction:column}
  .mtr-flow > .mtr-stage{margin-top:auto}
  .mtr-flow > .mtr-fbar{margin-bottom:auto;padding-bottom:6vh}
  .mtr-flow .mtr-q{font-size:clamp(30px,1.6vw + 18px,40px);line-height:1.12;margin:0 0 8px}
  .mtr-flow .mtr-qrow{justify-content:center;text-align:center;margin:0}
  .mtr-flow .mtr-qrow .mt-note{font-size:18px}
  .mtr-flow .mtr-hw{margin:0;padding:22px 0 26px}
  .mtr-flow .mtr-hplay{width:104px;height:104px}
  .mtr-flow .mtr-choices{gap:14px}
  .mtr-flow .mtr-choices.is-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mtr-flow .mtr-choices.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mtr-flow .mtr-ch{font-size:20px}
  .mtr-flow .mtr-fb{text-align:center;font-size:19px;margin-top:18px}
  .mtr-flow .mtr-fbar{justify-content:center}
  .mtr-flow .mtr-fbar .mtr-big{min-width:240px;min-height:56px;font-size:18px}
  .mtr-flow .mtr-tune{max-width:560px;margin-inline:auto}
}

/* ---------------------------------------------------------------- the session's end (Learn's result card: assets/learn/
   learn.css .eol-*): Bruno beside the title, the ring, one rewards row, one insight, the two buttons side by side, then
   one row of what next */
.mtr-flow.is-done .mtr-fb,.mtr-flow.is-done .mtr-fbar{display:none}
.mtr-res{display:flex;flex-direction:column;align-items:center;max-width:560px;margin:0 auto;padding:8px 0 24px;text-align:center}
.mtr-res-hero{display:flex;align-items:center;justify-content:center;gap:14px}
.mtr-res-hero .mtr-char{width:84px;height:auto;flex:none}
.mtr-res-ttl{text-align:start}
.mtr-res-hero h1{margin:0;font:700 17px/1.2 var(--f-body);color:var(--ink-2)}
.mtr-res-score{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin:2px 0 0;color:var(--ink)}
.mtr-res-score b{font:700 clamp(40px,2vw + 30px,56px)/1 var(--f-display);font-variant-numeric:tabular-nums}
.mtr-res-score span{font:700 16px/1.3 var(--f-body);color:var(--ink-2)}
.mtr-rw{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px}
.mtr-rw li{display:inline-flex;align-items:center;gap:6px;font:700 15px/1.2 var(--f-body);color:var(--ink-2);white-space:nowrap}
.mtr-rw svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mtr-rw .r-run{color:var(--study-ink)}
.mtr-rw .r-day{color:var(--gold-ink)}.mtr-rw .r-day svg{fill:var(--gold);stroke:var(--gold-ink);stroke-width:1.6}
.mtr-ins{align-self:stretch;margin:16px 0 0;padding:2px 14px;border-radius:16px;background:var(--sunk);text-align:start}
.mtr-ins p{display:flex;align-items:center;gap:10px;min-height:46px;margin:0;font-size:16px;line-height:1.35;color:var(--ink-2)}
.mtr-ins b{color:var(--ink);font-weight:700}
.mtr-ib{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%}
.mtr-ib.ok{background:color-mix(in srgb,var(--study) 18%,transparent);color:var(--study-ink)}
.mtr-ib.no{background:color-mix(in srgb,var(--gold) 26%,transparent);color:var(--gold-ink)}
.mtr-res-act{display:flex;gap:10px;align-self:stretch;justify-content:center;margin:18px 0 0}
.mtr-res-act .b{flex:1 1 0;max-width:260px;min-height:52px}
.mtr-wn{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:10px;align-self:stretch;margin:22px 0 0}
.mtr-wc{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;padding:10px 14px;border:2px solid var(--rule-2);border-radius:16px;background:var(--surface);color:var(--ink);text-align:start;text-decoration:none;font:inherit;cursor:pointer;transition:border-color .15s cubic-bezier(.22,1,.36,1),transform .1s}
.mtr-wc:hover{border-color:var(--study)}
.mtr-wc:active{transform:scale(.98)}
.mtr-wc-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.mtr-wc small{font-size:13.5px;font-weight:600;color:var(--ink-3)}
.mtr-wc b{font:700 16.5px/1.25 var(--f-display)}
.mtr-wc-go{flex:none;color:var(--study-ink)}
.mtr-wn-plus{margin:14px 0 0;font-size:14.5px}
.mtr-wn-plus a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){.mtr-wn{grid-auto-flow:row;grid-template-columns:1fr}.mtr-res-hero .mtr-char{width:72px}}
/* the answer bar (owner, 12 Oct): one row, one segment per question, never wrapping; right first time filled with a
   tick, right on a retry half filled, missed an outline only (shape as well as colour, never red); each segment a 44 px
   hit area; it fills left to right 60 ms a segment, a perfect run then gets one gold sweep; reduced motion: at once */
.sbar-w{display:flex;flex-direction:column;align-items:center;gap:6px;align-self:stretch;width:100%;margin:14px 0 0}
.sbar{position:relative;display:flex;gap:4px;width:100%;max-width:560px;margin:0;padding:0;list-style:none;overflow:hidden;border-radius:10px}
.sbar.is-thin{gap:2px}
.sbar li{flex:1 1 0;min-width:0;display:flex}
.sbar-s{flex:1;display:flex;align-items:center;min-width:0;height:44px;padding:0;border:0;background:none;color:inherit;text-decoration:none;cursor:default;-webkit-tap-highlight-color:transparent}
a.sbar-s,button.sbar-s{cursor:pointer}
.sbar-v{position:relative;display:grid;place-items:center;width:100%;height:20px;border-radius:6px;box-sizing:border-box;transform-origin:left center;animation:sbarIn .26s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 60ms)}
.sbar.is-thin .sbar-v{height:24px;border-radius:3px}
.sbar-s.ok .sbar-v{background:var(--study)}
.sbar-s.retry .sbar-v{background:linear-gradient(90deg,var(--study) 50%,transparent 50%);box-shadow:inset 0 0 0 2px var(--study)}
.sbar-s.miss .sbar-v{background:transparent;box-shadow:inset 0 0 0 2px var(--ink-3)}
.sbar-s.is-on .sbar-v{box-shadow:inset 0 0 0 2px var(--gold-ink)}
.sbar-v svg{width:14px;height:14px;fill:none;stroke:var(--on-study-btn,#fff);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes sbarIn{from{transform:scaleX(0);opacity:0}}
.sbar.is-all::after{content:"";position:absolute;top:12px;bottom:12px;left:0;width:30%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 75%,transparent),transparent);transform:translateX(-110%);animation:sbarSweep .7s ease-out forwards;animation-delay:calc(var(--n,8) * 60ms + 320ms);pointer-events:none}
@keyframes sbarSweep{to{transform:translateX(360%)}}
.sbar-go{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;border:0;background:none;color:var(--study-ink);font:700 15.5px var(--f-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sbar-said{min-height:1.3em;margin:0;font-weight:700;font-size:15px;color:var(--ink-2)}
.sbar-said:empty{display:none}
@media (prefers-reduced-motion:reduce){.sbar-v{animation:none}.sbar.is-all::after{display:none}}
html[data-motion="off"] .sbar-v{animation:none}
html[data-motion="off"] .sbar.is-all::after{display:none}
/* the session's end reads from the top (the question block is the one centred) */
.mtr-flow.is-done > .mtr-stage{margin-top:12px}
/* at the session's end the answer bar is the record: the dots at the top step aside */
.mtr-flow.is-done .mtr-sess{display:none}
.sbar{gap:clamp(1px,calc(60px / var(--n,10)),4px)}
.sbar li{min-width:2px}
/* the page's language as a row in the trainer's settings (owner, 12 Oct): not a line above the trainer */
.mtr-lang{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin-top:10px;padding-top:6px;border-top:1px solid var(--rule,rgba(0,0,0,.1));color:var(--ink);font-weight:700;text-decoration:none}
.mtr-lang svg{flex:none;color:var(--ink-3)}
[dir="rtl"] .mtr-lang svg{transform:scaleX(-1)}
.mtr-lang:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px;border-radius:8px}