/* ============================================================================
 * design.css  —  The Grind Piano 2.0: one look, two layouts (Guided, Studio)
 * ----------------------------------------------------------------------------
 * Drawn over styles.css, which keeps every size and every rule about what
 * moves when (slots, the readout, the toolbar's one row). This sheet changes
 * the LOOK and adds the two layouts:
 *
 *   the page     light: a cool white ground (#eef1f6), white surfaces, navy
 *                (#14203a) for text, the main button and the black keys;
 *   the score    still paper, a warmer white;
 *   the keys     still an instrument: lacquer (#101a30) under the falling
 *                notes and the keyboard, whatever is around it.
 *
 * 2.1: every colour here is a token (the :root block), and a COLOUR SCHEME is
 * a set of tokens: <html data-theme="night|day|sepia|walnut|contrast">, chosen
 * on Guided's black keys or in Settings (the blocks at the end of this sheet).
 * Day is the look above; the others keep its rules and change only colours.
 *
 * Colour still means one thing each, and is never decoration:
 *   gold   the right hand, "now", and a section in progress
 *   lapis  the left hand, and "due for review"
 *   jade   you: your keys, a right note, a section mastered
 *   red    wrong — and on a section's note, "not clean yet"
 *
 * GUIDED (shell.js) is the app one thing at a time: a start page ("What
 * shall we play today?"), a menu that is a keyboard, a page per place, and a
 * practice view with only Mode and Hand. STUDIO is every control on one
 * screen, as before. <html data-layout="guided|studio" data-view="home|page|
 * practice"> says which is showing; nothing below hides a control from the
 * app — the same ones work in both.
 * ========================================================================== */

:root {
  /* DAY, the scheme 2.0 drew. Each scheme sets these (contrast checked: themes.js) */
  --scheme: light;             /* the browser's own parts: scrollbars, a select's list */
  --ground: #eef1f6;           /* the page */
  --surface: #ffffff;          /* cards, the toolbar, panels, dialogs */
  --raised: #ffffff;           /* the chosen option of a switch, sitting in its well */
  --tint: #f3f5f9;             /* a quiet row, a hovered item */
  --hover: #e9edf4;            /* a button under the pointer */
  --hover-soft: #f8f9fc;       /* a big row under the pointer */
  --sunk: #e2e7ef;             /* a switch's well */
  --selected: #dde4ef;
  --selected-soft: #eef2f8;
  --field: #ffffff;
  --text: #14203a;             /* 16.2:1 on white */
  --body: #2e3a52;             /* running text in a card or a dialog */
  --muted: #4f5b73;            /* 6.8:1 */
  --faint: #5d6880;            /* 4.9:1 on the ground, 5.6:1 on white */
  --placeholder: #6b7488;
  --line: #cdd4e0;
  --line-soft: #e4e9f1;
  --line-strong: #b7c0cf;
  --dot: #b5bdcc;              /* a status dot, off */
  --primary: #14203a;          /* the one button that does the main thing on a screen, and Play */
  --primary-hi: #22335a;
  --on-primary: #ffffff;
  --feature: #14203a;          /* the lesson's big card */
  --on-feature: #ffffff;
  --on-feature-dim: #c9d1e0;
  --bar: #14203a;              /* minutes a day */
  --bar-empty: #d3d9e4;
  --note-empty: #ffffff;       /* a section not played, on a staff */
  --note-empty-line: #848ea2;  /* 3.0:1: an empty note still reads */
  --staff-line: #b5bdcc;
  --key-face: #ffffff;         /* the menu's white keys */
  --key-face-hover: #f5f7fb;
  --key-face-line: #cdd4e0;
  --key-text: #14203a;
  --key-note: #4f5b73;
  --key-ebony: #14203a;        /* the menu's black keys */
  --key-ebony-hi: #22335a;
  --paper: #fdfbf6;            /* the score */
  --paper-line: #e5e1d6;
  --paper-ink: #000000;        /* the engraving (the score is drawn in black; other schemes recolour it) */
  --paper-text: #14203a;
  /* the score's cursor (2.5): a wash of the scheme's ink, its strength set so the band stands out from the page
     about as much in every scheme — 1.45 : 1 (2.4: #171d29 at 13 % everywhere, 1.30 : 1 on the light pages and
     1.00 : 1, invisible, on Night's and Walnut's dark ones) */
  --cursor-ink: #171d29;
  --cursor-alpha: .18;
  --lacquer: #101a30;          /* the instrument */
  --key-white: #fdfbf6;        /* the instrument's keys */
  --key-white-line: #b9b2a3;
  --key-black: #14203a;
  --key-black-line: #0b1222;
  --glass: rgba(255, 255, 255, .92);   /* the play bar */
  --glass-strong: rgba(255, 255, 255, .97);
  --track: #dfe4ec;
  --shadow: 20, 32, 58;        /* r, g, b of every shadow */
  --backdrop: rgba(20, 32, 58, .3);
  --gold: #e2b15c;             /* the colours that mean something: as marks (fills) and as text (-ink) */
  --gold-ink: #8a672a;         /* gold as text on white: 5.2:1 */
  --gold-line: rgba(138, 103, 42, .45);
  --gold-wash: #fbf5ea;
  --gold-hover: #edc57e;
  --gold-edge: #c99a45;
  --on-gold: #5a4317;
  --on-gold-text: #14203a;
  --lapis: #6c9be8;
  --lapis-ink: #2d5bd0;        /* 5.3:1 */
  --lapis-wash: #e3ebfb;
  --jade: #59c2a0;
  --jade-ink: #17765a;         /* 5.6:1 on white, 4.9:1 on the ground (#1b7f60 was 4.4:1 there) */
  --jade-wash: #eaf6f1;
  --jade-wash-hi: #dff1e9;
  --jade-line: #9fd0bd;
  --jade-line-hi: #6fb79c;
  --jade-glow: rgba(23, 118, 90, .16);
  --red: #b9473a;              /* 5.2:1 */
  --red-line: rgba(185, 71, 58, .45);
  --focus: #2d5bd0;
  --focus-wash: rgba(45, 91, 208, .28);
  --gear-hub: #ffffff;         /* the gear's little keyboard: its white keys, its black keys */
  --gear-key: currentColor;
  --navy: var(--text);         /* 2.0's name for the ink, kept for anything that still says it */
  --navy-hi: var(--primary-hi);

  /* the names styles.css draws with */
  --ink: var(--ground);
  --ink-raise: var(--surface);
  --ink-sunk: var(--sunk);
  --well: var(--lacquer);
  --rule: var(--line);
  --rule-soft: var(--line-soft);
  --fg: var(--text);
  --fg-dim: var(--muted);
  --fg-faint: var(--faint);
  --gold-deep: var(--gold-ink);
  --lapis-deep: var(--lapis-ink);
  --ok: var(--jade-ink);
  --warn: var(--gold-ink);
  --err: var(--red);
  --page-ink: var(--paper-text);
  --page-rule: var(--paper-line);
  --lift-1: 0 1px 2px rgba(var(--shadow), .06);
  --lift-2: 0 14px 34px -22px rgba(var(--shadow), .38);
  --lift-3: 0 22px 50px -30px rgba(var(--shadow), .42);
  --r-lg: 18px; --r-md: 12px; --r-sm: 9px;
  /* --mark (the icon's size, 40 px; 30 px in a window 900 px tall or less) is styles.css's: the name is set at
     the icon's height, as chosen in 1.3 */

  /* the instrument's own colours: the falling notes are drawn on lacquer (pianoroll-view.js reads these first) */
  --roll-well: var(--lacquer);
  --roll-rule: #26324c;
  --roll-err: #d2604f;
  --roll-warn: #d9a441;
  --roll-gold-deep: #8d6a2c;
  --roll-lapis-deep: #2f5490;
}

html { color-scheme: var(--scheme); }
html, body { background: var(--ground); color: var(--text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--focus-wash); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--focus-wash); }

/* inside the instrument the old, light-on-dark text stays (the heads-up over the falling notes) */
.instrument {
  --fg: #eae6dd; --fg-dim: #9aa4b5; --fg-faint: #828da1; --rule: #26324c; --rule-soft: #1a2333;
}

/* ============================================================ controls ==== */
.btn {
  color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.btn:hover:not(:disabled) { background: var(--hover); border-color: var(--line-strong); }
.btn--sm { border-radius: 9px; }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--tint); border-color: transparent; }
/* the one button that does the main thing on a screen: navy */
.btn--file, .btn--primary, .btn--ink {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 600; box-shadow: none;
}
.btn--file:hover, .btn--primary:hover:not(:disabled), .btn--ink:hover:not(:disabled) { background: var(--primary-hi); border-color: var(--primary-hi); }
.btn.is-on { background: var(--lapis-wash); border-color: var(--lapis-ink); color: var(--lapis-ink); }
.btn--paper { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn--paper:hover:not(:disabled) { background: var(--tint); border-color: var(--line-strong); }
.btn--next { border-color: var(--jade-line); color: var(--jade-ink); font-weight: 600; }
.btn--next:hover:not(:disabled) { background: var(--jade-wash); border-color: var(--jade-line-hi); }
.btn--drill { color: var(--jade-ink); border-color: var(--jade-line); background: var(--jade-wash); }
.btn--drill:hover { border-color: var(--jade-ink); color: var(--jade-ink); }
.rail__group--repeat.is-drill .num::placeholder { color: var(--jade-ink); }

.select, select {
  color-scheme: var(--scheme); color: var(--text); background: var(--surface); border: 1px solid var(--line);
}
select option, select optgroup { background-color: var(--surface); color: var(--text); }
select option:checked, select option:hover { background-color: var(--selected); color: var(--text); }
.select:hover { border-color: var(--line-strong); }

.seg { background: var(--sunk); border-color: transparent; border-radius: 12px; }
.seg__opt span { color: var(--muted); border-radius: 9px; }
.seg__opt:hover span { color: var(--text); }
.seg__opt input:checked + span { background: var(--raised); color: var(--text); box-shadow: 0 1px 2px rgba(var(--shadow), .16); }
.seg__opt input:focus-visible + span { outline-color: var(--focus); }

.chip { color: var(--muted); border-color: var(--line); background: var(--surface); }
.chip::before { background: var(--dot); }
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip:has(input:checked) { color: var(--text); border-color: var(--jade-line); background: var(--jade-wash); }
.chip:has(input:checked)::before { background: var(--jade-ink); box-shadow: none; }
.chip:has(input:focus-visible) { outline-color: var(--focus); }
.key { color: var(--muted); border-color: var(--line); background: var(--tint); }
.num { color: var(--text); background: var(--field); border-color: var(--line); color-scheme: var(--scheme); }
.num:focus-visible { outline-color: var(--focus); }
.range__word, .range__dash { color: var(--muted); }

/* labels in sentence case, as they are written — the small capitals belonged to the old board */
.rail__label, .knob__label, .readout__cell > span, .settings__summary, .log__stat span, .log__trendlabel,
.setgroup__title, .field__label, .typemap__title, .menu__head {
  text-transform: none; letter-spacing: 0;
}
.rail__label { font-size: 12.5px; font-weight: 500; color: var(--fg-faint); }
.knob__label { font-size: 12px; font-weight: 500; color: var(--fg-faint); }
.readout__cell > span { font: 500 12px/14px var(--ui); color: var(--fg-faint); }
.readout__cell > b { color: var(--muted); }
.readout__cell--bar > b { color: var(--text); }
.field__label { font-size: 12.5px; font-weight: 500; color: var(--muted); }
html:lang(ro) .rail__label, html:lang(es) .rail__label { letter-spacing: 0; }

/* the custom gear (Settings): a gear with a little keyboard at its hub, in the ink, its white keys light */
.gear { color: var(--text); }
.btn:hover .gear { color: var(--text); }
/* 2.2: a <label> or an <a> dressed as a button centres its text as a <button> does. "Open file…" is a label
   (for the hidden file input): a block, whose line starts at the top — in a touch-sized button, 44 px tall,
   its text sat 3.5 px above the middle while its neighbours' sat on it. */
label.btn, a.btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
/* 2.2: an icon beside a word is as tall as the word's capitals and stands on its baseline, as a capital letter
   would — the gear of Settings, the metronome, Support's cup. (Their viewBoxes are cropped to the drawing, so
   the drawing, not its box, is that tall.) 1cap is the font's own cap height; .7em first, for a browser
   without the unit. */
#btnSettings .gear { width: auto; height: .7em; height: 1cap; margin: 0 .38em 0 0; vertical-align: baseline; }
.gear__hub { fill: var(--gear-hub); }
.gear__key { fill: var(--gear-key); }

/* ============================================================ masthead ==== */
.app { gap: 12px; }
.masthead {
  border-bottom: none; padding: 2px 0 0; gap: 10px 12px; align-items: center; justify-content: flex-start;
}
.brand { gap: 12px; }
.brand__mark { width: var(--mark); height: var(--mark); border-radius: 10px; box-shadow: 0 6px 16px -10px rgba(var(--shadow), .7); }
/* 2.3: the icon is a button — Home (shell.js: brandHome). It lifts a little under the pointer and sinks when
   pressed, as the menu's keys do; the ring of the keyboard's focus stands off it. */
.brand__home {
  flex: none; display: block; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  line-height: 0; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--ease);
}
.brand__home .brand__mark { transition: box-shadow .16s var(--ease); }
.brand__home:hover { transform: translateY(-1px); }
.brand__home:hover .brand__mark { box-shadow: 0 10px 20px -10px rgba(var(--shadow), .85); }
.brand__home:active { transform: translateY(1px) scale(.96); }
.brand__home:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .brand__home, .brand__home .brand__mark { transition: none; }
  .brand__home:hover, .brand__home:active { transform: none; }
}
/* the name's letters are nine tenths of the icon's height (2.3; 2.2 made them all of it), centred on it —
   measured and set by shell.js (fitBrand) in the font the page really has. These are its values for Newsreader
   (letters 0.72 em tall, its baseline 0.74 em down a 1.01 em line), so that the first paint is already right, or
   within a pixel. */
.brand h1 { color: var(--text); font-size: calc(var(--mark) * 1.25); line-height: var(--mark); transform: translateY(calc(var(--mark) * .145)); }
.nowplaying { border-left: 1.5px solid var(--line); padding-left: 16px; }
.nowplaying__name { color: var(--text); }
.nowplaying__tempo { color: var(--muted); border-color: var(--line); }
.loaders { margin-left: auto; gap: 7px; }
.topbar { display: flex; align-items: center; gap: 6px; flex: none; }
.loaders + .topbar { margin-left: 0; }
.iconbtn { width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; }
.iconbtn svg { display: block; }
.iconbtn--round { border-radius: 50%; }
/* Support (2.2, for Ko-fi) is its cup alone (2.5), like Search and the account: its word stays for a screen
   reader (and the tooltip says it) */
.btn--support { display: inline-grid; place-items: center; }
.btn--support .cup-ico { display: block; width: auto; height: 18px; }
.btn--support .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.btn--pieces { display: inline-flex; align-items: center; gap: 6px; padding-right: 10px; }
.btn__chev { flex: none; display: block; opacity: .8; }
.pickwrap { display: inline-flex; }

.midichip { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.midichip::before { background: var(--dot); }
.midichip.is-on { border-color: var(--jade-line); color: var(--jade-ink); }
.midichip.is-on::before { background: var(--jade-ink); box-shadow: 0 0 0 3px var(--jade-glow); }
.midichip.is-warn { border-color: var(--gold-line); color: var(--gold-ink); }
.midichip.is-warn::before { background: var(--gold); }

/* ============================================================ toolbar ===== */
.rail {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--lift-1);
}
.rail__group + .rail__group { border-left-color: var(--line-soft); }
.rail__readout { color: var(--muted); }
.rail__group--repeat .rail__labeltext { text-decoration-color: var(--line); }
.rail__pass { color: var(--jade-ink); }
.rail.is-fingering .rail__label--edit { color: var(--lapis-ink); }
.menu {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px;
  box-shadow: 0 20px 44px -18px rgba(var(--shadow), .38);
}
.menu__item { color: var(--text); }
.menu__item:hover:not(:disabled), .menu__item:focus-visible { background: var(--tint); border-color: var(--line-soft); }
.menu__head { font-size: 12px; font-weight: 600; color: var(--muted); }
.menu__share, .menu__what { color: var(--muted); }
.menu__item[aria-checked="true"] b { color: var(--jade-ink); }
.menu__item[aria-checked="true"]::before { background: var(--jade-ink); box-shadow: none; }

/* ============================================================ stage ======= */
.paper {
  background: var(--paper); border: 1px solid var(--paper-line); border-radius: 18px; box-shadow: none;
}
.paper::before { display: none; }
.paper::after { background: linear-gradient(180deg, transparent, var(--paper)); }
/* the engraving is drawn in black (OSMD); a scheme with its own ink recolours what is black, and only that — a
   coloured notehead (right, wrong, held) keeps its colour, and turns back to the ink when cleared */
#sheetContainer svg [fill="#000000"] { fill: var(--paper-ink); }
#sheetContainer svg [stroke="#000000"] { stroke: var(--paper-ink); }
.firstrun__kicker { color: var(--gold-ink) !important; letter-spacing: .08em; text-transform: none; font-size: 12px !important; }
.nosheet { background: repeating-linear-gradient(135deg, var(--tint) 0 16px, var(--ground) 16px 32px); border-color: var(--line); }

.instrument { background: var(--lacquer); border: none; border-radius: 18px; box-shadow: var(--lift-2); }
.rollwrap, .kbwrap { background: var(--lacquer); }
.kbwrap::before { background: linear-gradient(180deg, color-mix(in srgb, var(--lacquer) 85%, transparent), transparent); }
body.is-empty .rollwrap::after { color: #8e9ab3; }

/* the keys: paper-white and navy in Day; each scheme has its own pair */
.pk--white { fill: var(--key-white); stroke: var(--key-white-line); }
.pk--black { fill: var(--key-black); stroke: var(--key-black-line); }
.pk.is-expected { stroke: var(--key-white); }
.pk-badge { fill: var(--key-white); stroke: var(--key-black-line); }
.pk-badge__text { fill: var(--key-black); }
@keyframes keyhold { from { fill: var(--key-white); } to { fill: var(--jade); } }
@keyframes keyholdb { from { fill: var(--key-black); } to { fill: var(--jade); } }

/* ============================================================ transport === */
.transport {
  background: var(--glass); border: 1px solid var(--line-soft); border-radius: 18px;
  box-shadow: 0 -12px 30px -26px rgba(var(--shadow), .4), var(--lift-1);
}
.tbtn { background: var(--surface); border: 1px solid var(--line); }
.tbtn:hover:not(:disabled) { background: var(--hover); border-color: var(--line-strong); }
.tbtn--play { background: var(--primary); border-color: var(--primary); box-shadow: 0 10px 22px -14px rgba(var(--shadow), .85); }
.tbtn--play:hover:not(:disabled) { background: var(--primary-hi); }
.ico--play { border-left-color: var(--on-primary); }
.ico--pause { border-left-color: var(--text); border-right-color: var(--text); }
.ico--stop { background: var(--text); }
.time { color: var(--muted); }
.time--total { color: var(--fg-faint); }
.knob__label em { color: var(--text); }
input[type="range"]::-webkit-slider-runnable-track { background: var(--track); }
input[type="range"]::-moz-range-track { background: var(--track); }
input[type="range"].scrubber::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--primary) calc(var(--p, 0) * 1%), var(--track) calc(var(--p, 0) * 1%));
}
input[type="range"].scrubber::-moz-range-progress { background: var(--primary); }
input[type="range"]::-webkit-slider-thumb { background: var(--primary); box-shadow: 0 1px 3px rgba(var(--shadow), .45); }
input[type="range"]::-moz-range-thumb { background: var(--primary); }
.waitmark { border-color: var(--jade-line); background: radial-gradient(circle at 50% 38%, var(--jade-wash), var(--jade-wash-hi) 70%); }
.waitmark__dot { background: var(--jade-ink); box-shadow: none; }
.scrub__loop { background: var(--jade-wash); border-color: var(--jade-line-hi); }
/* the piece's sections under the timeline: four colours, as in every small strip — in progress, mastered, due, not played */
.scrub__sections i { box-shadow: inset -1px 0 0 var(--surface); }
.scrub__sections i.is-new { --st: var(--line); }
.scrub__sections i.is-learning, .scrub__sections i.is-notes, .scrub__sections i.is-net,
.scrub__sections i.is-slow, .scrub__sections i.is-tempo { --st: var(--gold); }
.scrub__sections i.is-mastered { --st: var(--jade-ink); }
.scrub__sections i.is-review { --st: var(--lapis-ink); }

/* ============================================================ panels ====== */
.settings { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--lift-1); }
.settings__summary { font-size: 14px; font-weight: 600; color: var(--text); }
.settings__summary::marker { color: var(--muted); }
.settings__summary:hover { color: var(--body); }
.summary__hint { color: var(--jade-ink); font-size: 12px; letter-spacing: 0; }
.settings .btn.is-on { background: var(--jade-wash); border-color: var(--jade-line); color: var(--jade-ink); }

/* THE SECTIONS, AS NOTES (Studio's coach panel). A section is a notehead filled as far as it has come: empty
   not played, a red rim not clean yet, a quarter gold its notes known, half in time with stops, three quarters
   clean slower, full gold clean at tempo; jade mastered, lapis due for review. The same four colours as every
   small strip — the fill is the one thing added, where there is room to see it. */
.csec, .coach__key { --g-bg: var(--note-empty); --g-line: var(--note-empty-line); }
.csec.is-learning, .coach__key.is-learning { --g-line: var(--red); }
.csec.is-notes, .coach__key.is-notes { --g-bg: linear-gradient(to right, var(--gold) 0 25%, var(--note-empty) 25%); --g-line: var(--gold-ink); }
.csec.is-net, .coach__key.is-net { --g-bg: linear-gradient(to right, var(--gold) 0 50%, var(--note-empty) 50%); --g-line: var(--gold-ink); }
.csec.is-slow, .coach__key.is-slow { --g-bg: linear-gradient(to right, var(--gold) 0 75%, var(--note-empty) 75%); --g-line: var(--gold-ink); }
.csec.is-tempo, .coach__key.is-tempo { --g-bg: var(--gold); --g-line: var(--gold-ink); }
.csec.is-mastered, .coach__key.is-mastered { --g-bg: var(--jade-ink); --g-line: var(--jade-ink); }
.csec.is-review, .coach__key.is-review { --g-bg: var(--lapis-ink); --g-line: var(--lapis-ink); }
.coach__grid { gap: 8px; }
.csec {
  display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 0;
  align-items: center; justify-content: start; min-width: 0; min-height: 46px; padding: 5px 13px 5px 10px;
  border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text);
}
.csec::before {
  content: ""; grid-row: 1 / span 2; width: 20px; height: 14px; box-sizing: border-box; border-radius: 50%;
  transform: rotate(-20deg); background: var(--g-bg); border: 2px solid var(--g-line);
}
.csec__bars, .csec__state { grid-column: 2; }
.csec:hover { border-color: var(--line-strong); border-top-color: var(--line-strong); }
.csec:focus-visible { outline-color: var(--focus); }
.csec__state { color: var(--muted); font-weight: 500; }
.csec.is-learning .csec__state { color: var(--red); }
.csec.is-notes .csec__state, .csec.is-net .csec__state, .csec.is-slow .csec__state, .csec.is-tempo .csec__state { color: var(--gold-ink); }
.csec.is-mastered .csec__state { color: var(--jade-ink); }
.csec.is-review .csec__state { color: var(--lapis-ink); }
.coach__legend { gap: 8px 18px; font-size: 12.5px; color: var(--body); }
.coach__key::before {
  width: 17px; height: 12px; box-sizing: border-box; border-radius: 50%; transform: rotate(-20deg);
  background: var(--g-bg); border: 1.7px solid var(--g-line); margin-right: 7px; vertical-align: -2px;
}
.coach__drills { border-top-color: var(--line-soft); }
#coachDrillsDue { color: var(--lapis-ink); }

.log__stat span { font-size: 12px; font-weight: 500; color: var(--muted); }
.log__stat b { color: var(--text); }
.log__chart { background: var(--tint); border-color: var(--line-soft); }
.log__bar { background: linear-gradient(180deg, var(--jade), var(--jade-ink)); }
.log__bar--empty { background: var(--line-soft); }
.log__trend i { background: var(--line-soft); }
.log__trend i::after { background: var(--lapis); }
.log__trendlabel { font-size: 12px; font-weight: 500; }

/* ============================================================ dialogs ===== */
.sheetdlg {
  background: var(--surface); color: var(--text); border: 1px solid var(--line-soft); border-radius: 20px;
  box-shadow: 0 30px 70px -30px rgba(var(--shadow), .45);
}
.sheetdlg::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheetdlg__text { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--body); max-width: 60ch; }
.sheetdlg__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sheetdlg__acts .btn { min-height: 42px; padding: 0 18px; display: inline-flex; align-items: center; text-decoration: none; }
.setnav { border-right-color: var(--line-soft); }
.setnav__tab { color: var(--muted); }
.setnav__tab:hover { color: var(--text); background: var(--tint); }
.setnav__tab[aria-selected="true"] { color: var(--text); background: var(--selected-soft); border-color: var(--line-soft); box-shadow: inset 2px 0 0 var(--gold); }
.setpanes { scrollbar-color: var(--line) transparent; }
.setgroup { border-top-color: var(--line-soft); }
.setgroup__title { font-size: 14px; font-weight: 600; color: var(--text); }
.setgroup__hint { color: var(--muted); }
.langpick { background: var(--tint); border-color: var(--line-soft); }
.langpick__globe { stroke: var(--muted); }
.keys__note, .about, .typemap, .marks { border-top-color: var(--line-soft); }
.style { background: var(--tint); border-color: var(--line-soft); }
.style:hover { border-color: var(--line-strong); }
.style.is-on { border-color: var(--gold-line); background: var(--gold-wash); }
.style__badge { color: var(--jade-ink); border-color: var(--jade-line); }
.handdiff { background: var(--jade-wash); border-left-color: var(--jade-ink); }
.part { background: var(--tint); border-color: var(--line-soft); }
.typemap__row--black b { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.typemap__row--black i { border-color: var(--line); }
.typemap__row--white b { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.marks__list .mk-outline { stroke: var(--text); }
.marks__list .mk-faint { fill: var(--text); }
.marks__here { color: var(--jade-ink); border-color: var(--jade-line); }
.calib__pad { color: var(--text); }

.toast {
  background: var(--glass-strong); border: 1px solid var(--line-soft); color: var(--text);
  box-shadow: 0 18px 40px -20px rgba(var(--shadow), .45);
}
.toast::before { background: var(--dot); }
.toast--ok::before { background: var(--jade-ink); box-shadow: none; }
.toast--warn { border-color: var(--gold-line); }
.toast--warn::before { background: var(--gold); }
.toast--err { border-color: var(--red-line); }
.toast--err::before { background: var(--red); }
.toast__close { color: var(--muted); }
.toast__close:hover { color: var(--text); }
.dropzone { background: color-mix(in srgb, var(--ground) 92%, transparent); border-color: var(--jade-ink); }
.dropzone span { color: var(--jade-ink); }

/* the exercises: their own page, now white on the white app */
.drill {
  --st-bg-top: var(--surface); --st-bg-mid: var(--surface); --st-bg-bottom: var(--surface);
  --st-card: var(--tint); --st-btn: var(--surface); --st-btn-hover: var(--tint); --st-field: var(--field);
  --st-focus: var(--focus);
  border: 1px solid var(--line-soft); box-shadow: var(--lift-1); color-scheme: var(--scheme);
}
.drill::before { display: none; }

/* ============================================================ the layout == */
/* 2.4: one layout (2.0–2.3 had two, Guided and Studio; data-layout stays "guided", and these rules are the
   layout). The top bar keeps the name, search, support and the account; practising, the keyboard's connection,
   Open file and the Pieces menu too (Studio's, 2.x). The piece's own name is in the practice view; the
   shortcuts' window opens from Settings and with ?. */
html[data-layout="guided"] .nowplaying { flex: 0 0 0; padding: 0; border: 0; min-width: 0; overflow: hidden; }
html[data-layout="guided"] .nowplaying__title,
/* ? (2.5: back, between Support and the account): the shortcuts, the marks on the falling notes, the language */
html[data-layout="guided"]:not([data-view="practice"]) .loaders { display: none; }
html[data-layout="guided"] .topbar { margin-left: auto; }
html[data-layout="guided"][data-view="practice"] .loaders + .topbar { margin-left: 0; }
/* the piece's sections (Studio's, 2.x): under the play bar, a scroll away (2.4); not in the exercises */
html[data-layout="guided"]:not([data-view="practice"]) #coachPanel, body.is-drill #coachPanel { display: none !important; }
html[data-layout="guided"]:not([data-view="practice"]) .workspace { display: none !important; }
html[data-layout="guided"][data-view="practice"] .guide { display: none; }

/* 2.0 took the masthead out of the workspace (Guided shows it over its own pages too). The workspace still
   fills the window, less the masthead: --mast is the masthead's height and the gap under it, measured by
   shell.js — one row on most screens, two when narrow. Without it the keys slid under the play bar. */
.workspace, .guide { min-height: calc(100vh - 50px - var(--mast, 50px)); min-height: calc(100svh - 50px - var(--mast, 50px)); }
@media (max-height: 900px) {
  .workspace, .guide { min-height: calc(100vh - 32px - var(--mast, 50px)); min-height: calc(100svh - 32px - var(--mast, 50px)); }
}

/* the icon is 40 px (30 px in a window 900 px tall or less, or 1100 px wide or less). The piece's meter and tempo
   (the top bar's, hidden since 2.0) go under its name */
@media (min-width: 901px) {
  .nowplaying__title { flex-direction: column; align-items: flex-start; gap: 1px; }
  .nowplaying__name { max-width: 100%; }
  .nowplaying__tempo { display: block; padding: 0; border: none; border-radius: 0; font-size: 11.5px; line-height: 14px; }
}
@media (max-width: 1100px) { html[data-layout="guided"] { --mark: 30px; } }
/* Guided's practice view has the keyboard's connection on its row: up to 900 px wide the icon stands alone there
   (2.1 already wrapped to two rows there in a tall window) */
@media (max-width: 900px) and (min-width: 761px) {
  html[data-layout="guided"][data-view="practice"] .brand__text { display: none; }
}

/* --- the practice view: the way home, the piece, Mode and Hand — the rest is in Studio --- */
html[data-layout="guided"] .rail {
  flex-wrap: wrap; overflow: visible; align-items: center; gap: 10px 16px; padding: 8px 10px;
  -webkit-mask-image: none; mask-image: none;
}
html[data-layout="guided"]:not([data-tools="studio"]) .rail__group--repeat,
html[data-layout="guided"]:not([data-tools="studio"]) .rail__group--metro,
html[data-layout="guided"]:not([data-tools="studio"]) .rail__group--tools,
html[data-layout="guided"] .rail__label { display: none; }
/* 2.4: Studio — the rest of the bar's tools, in the bar, on a second row of its own under a hairline: Repeat (its
   word, and how many clean passes), the metronome's switch, and Simplify, Fingering and Settings at the right. In
   the first row nothing moves: the chip that says what repeats goes (Repeat says it, and has its Off), and the
   piece's name takes its room (the chip stands beside it, below) — Mode, Hand and the Studio button under the
   pointer stay where they were. */
html[data-layout="guided"][data-tools="studio"] .rail::after {
  content: ""; order: 4; flex: 0 0 100%; height: 1px; margin: 0 -10px; background: var(--line-soft);
}
html[data-layout="guided"][data-tools="studio"] .rail__group--repeat { order: 5; }
html[data-layout="guided"][data-tools="studio"] .rail__group--metro { order: 6; }
html[data-layout="guided"][data-tools="studio"] .rail__group--tools { order: 7; margin-left: auto; }
html[data-layout="guided"][data-tools="studio"] .rail__label--repeat { display: inline-flex; }
/* 2.5: Fingers, Cursor and Notices — Settings' own switches (View), at the head of the tools; they wait while
   fingers are edited, as Simplify does (the editing tools have the row) */
.showsw { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.showsw .chip { font-weight: 500; }
.rail.is-fingering .showsw { display: none; }
html[data-layout="guided"][data-tools="studio"] #btnGLoop { display: none; }
/* on a phone the tools follow the Studio button on its row (no hairline: the rows are short there), and Repeat
   takes one row more; the button itself stays where it was */
@media (max-width: 760px) {
  html[data-layout="guided"][data-tools="studio"] .rail::after { display: none; }
  html[data-layout="guided"][data-tools="studio"] .rail__group--tools { order: 4; margin-left: 0; }
}
/* editing fingers (the Fingering button, one of the Studio tools) takes the Studio row only: Repeat and the
   metronome wait, the editing tools fill the row; the first row — the piece, Mode, Hand, the Studio button — stays
   as it is (2.0–2.3's one-row toolbar hid Mode and Hand for room). The finger's scope, This note / Every one, is as
   tall as the row's buttons, so the bar keeps its height */
html[data-layout="guided"][data-tools="studio"] .rail.is-fingering > .rail__group:not(.rail__group--tools):not(.rail__group--repeat):not(.rail__group--metro) { display: flex; }
html[data-layout="guided"] .rail__group--tools .seg { padding: 1px; border-radius: 10px; }
html[data-layout="guided"] .rail__group--tools .seg__opt span { display: flex; align-items: center; height: 25px; padding: 0 11px; font-size: 13px; border-radius: 8px; }
@media (pointer: coarse) { html[data-layout="guided"] .rail__group--tools .seg__opt span { height: 40px; min-height: 0; } }
/* where the editing tools are wider than the window (a phone; a window under about 900 px) they scroll sideways in
   their row, Done first — the page itself never does (3 px of room for the focus rings the scrolling box would cut) */
html[data-layout="guided"] .rail.is-fingering .rail__group--tools { min-width: 0; overflow-x: auto; scrollbar-width: thin; padding: 3px; margin: -3px; }
@media (max-width: 760px) { html[data-layout="guided"][data-tools="studio"] .rail.is-fingering .rail__group--tools { flex: 1 1 100%; } }
.btn--studio[aria-pressed="true"] { background: var(--lapis-wash); border-color: var(--lapis-ink); color: var(--lapis-ink); }
.btn--studio[aria-pressed="true"]:hover:not(:disabled) { background: var(--lapis-wash); border-color: var(--lapis-ink); }
html[data-layout="guided"] .rail__group { padding: 0; }
html[data-layout="guided"] .rail__group + .rail__group { border-left: none; padding-left: 0; }
html[data-layout="guided"] .rail > .rail__group:last-child { padding-right: 0; }
html[data-layout="guided"] .seg__opt span { padding: 7px 13px; font-size: 13.5px; }
.rail__ghead { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 300px; }
.rail__gpiece { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rail__gtitle {
  margin: 0; font: 500 24px/1.1 var(--display); letter-spacing: -.015em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail__gline { margin: 0; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 2.5 — A NOTICE (Loaded…, Next…, Repeat off…) in the line under the piece's name, for a few seconds, then the line
   again: nothing over the score (2.4 put each in a card at the top right, over the score's last bars). The piece
   takes the head's width so a notice has the room the line could have. A problem (a warning, an error) keeps its
   card in the corner: it needs you. */
.rail__gpiece { position: relative; flex: 1 1 auto; }
.rail__gline { transition: opacity .25s var(--ease); }
.rail__gnote {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 13.5px; color: var(--text);
  opacity: 0; transform: translateY(3px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.rail__gnote::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--jade-ink); }
.rail__gnote span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__gnote b { font-weight: 600; }
.rail__gpiece.has-note .rail__gnote { opacity: 1; transform: none; pointer-events: auto; }
.rail__gpiece.has-note .rail__gline { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .rail__gnote, .rail__gline { transition: none; } }
/* the first row, in order: the piece, the passage repeating (its chip), Mode and Hand, the Studio button. The chip
   comes and goes with the passage on the piece's side, whose name gives it the room, so Mode, Hand and Studio stay
   put (2.0–2.3 had it after Hand, and Mode and Hand moved aside when a passage began or ended). The piece asks for
   180 px before the row wraps (its name ends in "…" when it has less), so the row is one line down to about 900 px.
   On a phone, where the row is three: the piece; Mode and Hand; Studio, then the chip — the same places with a
   passage or without */
.rail__gtail { display: contents; }
html[data-layout="guided"] #btnGLoop { order: 1; }
html[data-layout="guided"] .rail > .rail__group:not(.rail__group--repeat):not(.rail__group--metro):not(.rail__group--tools) { order: 2; }
html[data-layout="guided"] #btnStudio { order: 3; flex: none; }
@media (min-width: 761px) { html[data-layout="guided"] .rail__ghead { flex-basis: 180px; } }
@media (max-width: 760px) {
  html[data-layout="guided"] #btnStudio { order: 2; }
  html[data-layout="guided"] #btnGLoop { order: 3; }
}
.btn--back { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px 8px 9px; flex: none; }
.btn--back svg { display: block; flex: none; }
.btn--loopchip { color: var(--jade-ink); border-color: var(--jade-line); background: var(--jade-wash); }
.btn--loopchip:hover:not(:disabled) { background: var(--jade-wash-hi); border-color: var(--jade-ink); }
.btn--loopchip::after { content: "\00d7"; margin-left: 7px; font-weight: 600; }

/* the play bar: the bar you are in and how it is going; the rest of the score line — correct, wrong, missed,
   timing, length, the streak, points, the best — comes with the Studio tools (2.4; Studio's, 2.0–2.3), as much of it
   as the bar has room for (app.js: fitReadout) */
html[data-layout="guided"]:not([data-tools="studio"]) .readout__cell:not(.readout__cell--bar):not(.readout__cell--acc) { display: none; }
html[data-layout="guided"] #netChip { display: none; }

/* the falling notes come and go with the section (app.js fades them: "Auto") */
.fallbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 8px 6px 16px;
  background: var(--lacquer); border-bottom: 1px solid rgba(241, 236, 226, .08); flex: none;
}
.fallbar__label { font-size: 13px; font-weight: 600; color: #e4e8f0; }
.fallbar__note { flex: 1 1 auto; min-width: 0; font-size: 13px; color: #8e9ab3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fallbar__seg { display: inline-flex; gap: 2px; padding: 3px; background: rgba(241, 236, 226, .08); border-radius: 10px; }
.fallbar__seg button {
  height: 28px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: 500 13px var(--ui); color: #c9d1e0; transition: background .15s var(--ease), color .15s var(--ease);
}
.fallbar__seg button:hover { color: #fff; }
.fallbar__seg button[aria-pressed="true"] { background: #fff; color: #14203a; font-weight: 600; }
.fallbar__seg button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html[data-layout="guided"][data-fall="never"] #rollPanel { display: none; }
html[data-layout="guided"][data-fall="never"] .instrument { flex: none; min-height: 0; }
html[data-layout="guided"] .instrument { min-height: calc(var(--kb-h) + var(--roll-min) + 42px); }
html[data-layout="guided"] body.is-drill .fallbar { display: none; }
html[data-layout="guided"] body.is-drill .instrument { min-height: calc(var(--kb-h) + 2px); }

/* ============================================================ guided home = */
.guide { display: flex; flex-direction: column; }
.guide__view { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; max-width: 1040px; margin: 0 auto; }
.ghome { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; padding: 10px 0 0; }
.ghome__title {
  margin: 0; font: 400 clamp(42px, 5.6vw, 72px)/1.02 var(--display); letter-spacing: -.02em; color: var(--text);
  text-align: center; text-wrap: balance;
}
.ghome__cards { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 20px; }
.gcard {
  display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; box-sizing: border-box;
  background: var(--surface); border-radius: 22px; box-shadow: var(--lift-1); min-width: 0;
}
.gcard--resume { flex: 1 1 520px; max-width: 620px; }
.gcard--streak { flex: 0 1 300px; min-width: 260px; justify-content: space-between; }
.gcard__kicker { margin: 0; font-size: 15px; color: var(--muted); }
.gcard__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.gcard__what { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gcard__piece { margin: 0; font: 500 36px/1.05 var(--display); letter-spacing: -.015em; color: var(--text); overflow-wrap: anywhere; }
.gcard__line { margin: 0; font-size: 16px; line-height: 1.4; color: var(--body); }
.btn--lg { min-height: 50px; padding: 0 28px; border-radius: 14px; font-size: 16.5px; font-weight: 600; }
.gstreak__title { margin: 0; font: 400 28px/1.1 var(--display); color: var(--text); }
.gstreak__sub { margin: 0; font-size: 13.5px; color: var(--muted); }

/* the days: minutes a day, today's goal a dashed outline that fills as you play */
.week { display: grid; grid-template-columns: repeat(var(--days, 7), minmax(0, 1fr)); gap: 8px; align-items: end; height: 96px; }
.week--wide { height: 150px; gap: 10px; }
.week__day { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.week__bar { position: relative; width: 100%; height: var(--h, 4px); min-height: 4px; box-sizing: border-box; border-radius: 6px; background: var(--bar); }
.week__bar.is-empty { background: var(--bar-empty); }
.week__bar.is-today { background: transparent; border: 2px dashed var(--gold-ink); }
.week__bar.is-today i { position: absolute; left: 2px; right: 2px; bottom: 2px; height: var(--f, 0px); border-radius: 3px; background: var(--gold); }
.week__lbl { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1; }
.week__lbl.is-today { color: var(--text); font-weight: 700; }

/* a piece's progress, written as notes on a staff: the higher a note, the further its section has come; jade
   mastered, gold on its way, lapis due, empty not played. shell.js keeps it to the width it is given (a note
   stands for a run of sections when they are many); it never spills out of its card either way. */
.strip { position: relative; display: block; height: 40px; flex: none; max-width: 100%; overflow: hidden; }
.grow--piece .strip { justify-self: end; }
.strip::before {
  content: ""; position: absolute; left: 0; right: 0; top: 5.5px; height: 25px;
  background: repeating-linear-gradient(to bottom, var(--staff-line) 0, var(--staff-line) 1px, transparent 1px, transparent 6px);
}
.strip i { position: absolute; width: 12px; height: 9px; box-sizing: border-box; border-radius: 50%; transform: rotate(-20deg); border: 1.6px solid var(--note-empty-line); background: var(--note-empty); }
.strip i.s-w { background: var(--gold); border-color: var(--gold-ink); }
.strip i.s-m { background: var(--jade-ink); border-color: var(--jade-ink); }
.strip i.s-r { background: var(--lapis-ink); border-color: var(--lapis-ink); }

/* ============================================================ the keys menu */
.keysnav { width: 100%; max-width: 1040px; margin: 6px auto 30px; display: flex; flex-direction: column; gap: 10px; }
.keysnav__label { margin: 0; text-align: center; font-size: 15px; color: var(--muted); }
.keysnav__board { position: relative; }
.keysnav__keys { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; height: 224px; }
.gkey {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px;
  min-width: 0; padding: 0 5px 20px; box-sizing: border-box;
  background: var(--key-face); border: 1.5px solid var(--key-face-line); border-radius: 3px 3px 12px 12px;
  box-shadow: inset 0 -5px 0 rgba(var(--shadow), .07); color: var(--key-text); text-align: center; cursor: pointer;
  font: inherit; transition: background-color .18s var(--ease), transform .12s var(--ease);
}
.gkey:hover { background: var(--key-face-hover); }
.gkey:active { transform: translateY(2px); }
.gkey[aria-current="page"], .gkey.is-picked { background: var(--gold); border-color: var(--gold-edge); color: var(--on-gold-text); }
.gkey__note { font-size: 12px; font-weight: 500; color: var(--key-note); }
.gkey[aria-current="page"] .gkey__note, .gkey.is-picked .gkey__note { color: var(--on-gold); }
.gkey__name { display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; font: 500 20px/1.1 var(--display); }
.gkey__text { text-wrap: balance; overflow-wrap: break-word; }
/* a name with a sign before it (Metronome, Settings) is a line of text: the sign stands on the baseline, as
   tall as the capitals (2.2; in a flex row it was centred on the line box, whose middle in this serif is a
   tenth of an em under the capitals' — and it was 19 px against capitals of 13) */
.gkey__name:not(.is-sign) { display: block; text-wrap: balance; }
.gkey__name:not(.is-sign) > svg { display: inline-block; width: auto; height: .67em; height: 1cap; margin: 0 .3em 0 0; vertical-align: baseline; }
/* a heading the view focuses (for a screen reader) is not a control: no ring */
.ghome__title:focus, .gpage__title:focus, .rail__gtitle:focus { outline: none; }
.gkey__name .gear { flex: none; color: currentColor; --gear-hub: var(--key-face); --gear-key: currentColor; }
/* a sign on its own (a phone's Metronome and Settings) is drawn about as large as 2.1's, its viewBox now cropped */
.gkey__name.is-sign .gear, .gkey__name.is-sign .metro-ico, .gkey__name.is-sign .staff-ico { display: block; width: auto; height: 17px; flex: none; margin: 0; }
.gkey[aria-current="page"] .gear__hub, .gkey.is-picked .gear__hub { fill: var(--gold); }
/* the black keys (2.1): the colour schemes. Each shows its scheme's page and ink; the one in use stays down, its
   swatch ringed in gold */
.gkey__blk {
  position: absolute; top: -1px; width: 8.5%; height: 58%; margin: 0; padding: 0 0 13px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px;
  border: 0; border-radius: 0 0 8px 8px; background: var(--key-ebony); cursor: pointer;
  box-shadow: inset 0 -6px 0 rgba(255, 255, 255, .07), 0 4px 8px -3px rgba(var(--shadow), .4);
  transition: transform .08s var(--ease), background-color .12s var(--ease), box-shadow .12s var(--ease);
}
.gkey__blk:hover { background: var(--key-ebony-hi); }
.gkey__blk:active { transform: translateY(1.5px); }
.gkey__blk[aria-pressed="true"] { transform: translateY(2px); box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .07), 0 1px 2px rgba(var(--shadow), .3); }
.gkey__blk:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* on the start page each black key says its scheme, small, as a sticker would */
.gkey__blkname { display: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11px/1.2 var(--ui); color: rgba(255, 255, 255, .78); }
html[data-view="home"] .gkey__blkname { display: block; }
/* a scheme's swatch: its page and its ink, halved on the diagonal */
.swatch {
  display: inline-block; flex: none; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%;
  background: linear-gradient(135deg, var(--sw-a) 0 50%, var(--sw-b) 50% 100%);
  box-shadow: 0 0 0 1px var(--line-strong);
}
.gkey__blk .swatch { width: min(20px, 64%); height: auto; aspect-ratio: 1; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); }
.gkey__blk[aria-pressed="true"] .swatch { box-shadow: 0 0 0 2.5px var(--gold); }
/* on a page, and in the exercises, the menu is a short keyboard: the same keys, the page you are on in gold */
.keysnav.is-compact { margin: 22px auto 24px; }
.keysnav.is-compact .keysnav__label { display: none; }
.keysnav.is-compact .keysnav__keys { height: 74px; }
.keysnav.is-compact .gkey { padding-bottom: 11px; }
.keysnav.is-compact .gkey__note { display: none; }
.keysnav.is-compact .gkey__name { font-size: 17px; }
.keysnav.is-compact .gkey__blk { height: 50%; padding-bottom: 7px; }
.keysnav.is-compact .gkey__blk .swatch { width: min(13px, 60%); }
/* 2.2: on a page it stays at the foot of the window while the page scrolls under it — sticky, so at the end of
   a short page it sits where it would anyway. Its band is the page's colour and runs the app's full width (the
   app's side padding taken back), and the page fades into it. The app's own bottom padding goes: the band's
   padding is the foot of the page now, and the page fills the window from its top padding down. */
html[data-layout="guided"][data-view="page"] .app { padding-bottom: 0; }
html[data-layout="guided"][data-view="page"] .guide { min-height: calc(100vh - 20px - var(--mast, 50px)); min-height: calc(100svh - 20px - var(--mast, 50px)); }
@media (max-height: 900px), (max-width: 760px) {   /* the app's top padding is 14 px there */
  html[data-layout="guided"][data-view="page"] .guide { min-height: calc(100vh - 14px - var(--mast, 50px)); min-height: calc(100svh - 14px - var(--mast, 50px)); }
}
html[data-layout="guided"][data-view="page"] .keysnav {
  --bleed: clamp(14px, 3.2vw, 34px);
  position: sticky; bottom: 0; z-index: 30;
  width: auto; max-width: none; box-sizing: border-box;
  margin: 22px calc(-1 * var(--bleed)) 0; padding: 12px var(--bleed) max(16px, env(safe-area-inset-bottom));
  background: var(--ground);
}
html[data-layout="guided"][data-view="page"] .keysnav::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--ground));
}
html[data-layout="guided"][data-view="page"] .keysnav__board { width: 100%; max-width: 1040px; margin: 0 auto; }
@media (max-width: 760px) {   /* a phone's toasts come up from the foot: above the pinned menu */
  html[data-layout="guided"][data-view="page"] .toasts { bottom: calc(var(--keysnav-h, 92px) + 10px); }
}
/* 2.3.1: in the exercises (Guided only) the menu is under the instrument's keys, at the very end of the page
   (index.html), and shows only when you scroll to the end: past the end of the exercises' list, or with the wheel
   over the keys (shell.js: the menu under the keys). It never covers the keys. At the page's top the workspace
   fills the window exactly and the menu is below its edge; the page's own scrollbar is hidden (2.3 was asked for
   no second scrollbar), and the page rests at its top or at its end, never half way: snapped. (2.3 had the menu
   as a dock over the list, shown as you scrolled down.) */
.keysnav--drill { display: none; }
html[data-layout="guided"][data-view="practice"] body.is-drill .keysnav--drill { display: flex; }
.keysnav--drill.is-compact {
  width: 100%; max-width: 1040px; box-sizing: border-box; margin: 2px auto 0; padding: 8px;
  background: var(--glass); border-radius: 22px;
  box-shadow: 0 0 0 1px var(--line-soft), 0 18px 40px -22px rgba(var(--shadow), .5), 0 2px 6px rgba(var(--shadow), .06);
  scroll-snap-align: end; scroll-margin-bottom: max(14px, env(safe-area-inset-bottom));
}
html.in-drill[data-layout="guided"][data-view="practice"] { scroll-snap-type: y mandatory; scrollbar-width: none; }
html.in-drill[data-layout="guided"][data-view="practice"]::-webkit-scrollbar { display: none; }
html.in-drill[data-layout="guided"][data-view="practice"] .app { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
/* the page's top is the top bar's place to snap to (its margin reaches past the page's top, so the snap is at 0); a
   snap area as tall as the page let Chrome stop anywhere inside it */
html.in-drill[data-layout="guided"][data-view="practice"] .masthead { scroll-snap-align: start; scroll-margin-top: 100px; }
/* the workspace fills the window from the app's top padding down (the bottom padding is under the menu now) */
html.in-drill[data-layout="guided"][data-view="practice"] .workspace { min-height: calc(100vh - 20px - var(--mast, 50px)); min-height: calc(100svh - 20px - var(--mast, 50px)); }
@media (max-height: 900px), (max-width: 760px) {   /* the app's top padding is 14 px there */
  html.in-drill[data-layout="guided"][data-view="practice"] .workspace { min-height: calc(100vh - 14px - var(--mast, 50px)); min-height: calc(100svh - 14px - var(--mast, 50px)); }
}

/* ============================================================ guided pages */
.gpage { display: flex; flex-direction: column; gap: 20px; padding: 2px 0 0; flex: 1 0 auto; }
.gpage__head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.gpage__title { margin: 0; font: 400 clamp(40px, 4.6vw, 56px)/1 var(--display); letter-spacing: -.02em; color: var(--text); }
.gpage__lede { margin: -4px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 70ch; }
.gpage__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.gpage__acts .btn { min-height: 42px; padding: 0 18px; }
.gsection { display: flex; flex-direction: column; gap: 10px; }
.gsection__title { margin: 6px 0 0; font: 500 24px/1.2 var(--display); color: var(--text); }
.gsplit { display: flex; flex-wrap: wrap; align-items: stretch; gap: 18px; }
.gsplit > .glist { flex: 1 1 520px; }

/* rows: a step of the lesson, a piece, a setting */
.glist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.grow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px;
  padding: 14px 16px 14px 20px; background: var(--surface); border-radius: 18px; box-shadow: var(--lift-1);
}
.grow--step { grid-template-columns: 40px minmax(0, 1fr) auto; padding-left: 14px; }
.grow__n {
  width: 38px; height: 38px; box-sizing: border-box; display: grid; place-items: center;
  border: 2px solid var(--text); border-radius: 50%; font: 600 15px var(--data);
}
.grow__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.grow__title { font-size: 17px; font-weight: 600; color: var(--text); }
.grow__title--piece { font: 500 23px/1.15 var(--display); letter-spacing: -.01em; }
.grow__detail { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.grow__end { display: flex; align-items: center; justify-content: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.grow__status { font-size: 14px; font-weight: 600; text-align: right; color: var(--muted); }
.grow__status.is-w { color: var(--gold-ink); }
.grow__status.is-m { color: var(--jade-ink); }
.grow__status.is-r { color: var(--lapis-ink); }
.grow__val { font: 500 21px/1.2 var(--display); color: var(--text); text-align: right; }
.grow__min { font: 500 14px var(--data); color: var(--muted); white-space: nowrap; }
.grow .btn { min-height: 40px; padding: 0 16px; }
button.grow { width: 100%; border: 0; text-align: left; font: inherit; cursor: pointer; transition: background-color .15s var(--ease); }
button.grow:hover { background: var(--hover-soft); }
.grow--piece { grid-template-columns: minmax(0, 1fr) auto auto; }

/* the lesson's big card: today against the goal, and Start */
.gbig {
  flex: 0 1 300px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: 24px 26px; background: var(--feature); color: var(--on-feature); border-radius: 22px;
}
.gbig__k { margin: 0; font-size: 14px; color: var(--on-feature-dim); }
.gbig__v { margin: 0; font: 400 46px/1 var(--display); letter-spacing: -.01em; }
.gbig__v small { font-size: 22px; color: var(--on-feature-dim); }
.gbig__meter { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--on-feature) 16%, transparent); overflow: hidden; }
.gbig__meter i { display: block; height: 100%; width: var(--p, 0%); background: var(--gold); border-radius: 3px; }
.btn--gold { min-height: 54px; background: var(--gold); color: var(--on-gold-text); border-color: var(--gold); font-size: 17px; font-weight: 700; }
.btn--gold:hover:not(:disabled) { background: var(--gold-hover); border-color: var(--gold-hover); }
.btn--gold:focus-visible { outline-color: var(--on-feature); }

/* progress */
.gstats { display: flex; flex-wrap: wrap; gap: 16px; }
.gstat { flex: 1 1 200px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 20px 22px; background: var(--surface); border-radius: 20px; box-shadow: var(--lift-1); }
.gstat b { font: 400 54px/1 var(--display); color: var(--text); }
.gstat span { font-size: 14.5px; color: var(--muted); }
.gchart { padding: 20px 22px 16px; background: var(--surface); border-radius: 20px; box-shadow: var(--lift-1); display: flex; flex-direction: column; gap: 12px; }
.gchart__title { margin: 0; font: 500 21px/1.2 var(--display); }

/* settings rows: a name, a control */
.grow--set { min-height: 64px; padding: 8px 12px 8px 20px; }
.grow--set .grow__title { font-size: 16px; }
.gseg { display: inline-flex; gap: 2px; padding: 4px; background: var(--sunk); border-radius: 14px; flex-wrap: wrap; }
.gseg button {
  height: 34px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font: 600 14px var(--ui); color: var(--muted);
}
.gseg button:hover { color: var(--text); }
.gseg button[aria-pressed="true"] { background: var(--raised); color: var(--text); box-shadow: 0 1px 2px rgba(var(--shadow), .16); }
.grow--set .select { max-width: 260px; min-height: 40px; font-size: 14px; }
.grow__ok { color: var(--jade-ink); font-weight: 600; }

/* the colour scheme: five swatches with their names (Guided's Settings page) */
.gtheme { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.gtheme__opt {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text);
  font: 600 14px var(--ui); cursor: pointer;
}
.gtheme__opt:hover { border-color: var(--line-strong); }
.gtheme__opt[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
/* … and Studio's Settings → View */
.themepick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.themepick__opt {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 9px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text);
  font: 500 13px var(--ui); cursor: pointer;
}
.themepick__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.themepick__opt:hover { border-color: var(--line-strong); }
.themepick__opt:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); font-weight: 600; }
.themepick__opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.themepick__opt .swatch { width: 16px; height: 16px; }

/* ============================================================ the metronome */
/* a big tempo, the beats as dots (the first larger, gold when it sounds), Start and Tap; then how it sounds */
.gmetro { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; }
.gmetro__main {
  flex: 1 1 440px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 30px 24px 28px; background: var(--surface); border-radius: 22px; box-shadow: var(--lift-1);
}
.gmetro > .glist { flex: 1 1 380px; }
.gmetro__beats { display: flex; align-items: center; gap: 14px; height: 24px; }
.gmetro__beats i { width: 15px; height: 15px; border-radius: 50%; background: var(--bar-empty); transition: transform .09s ease-out, background-color .09s ease-out; }
.gmetro__beats i.is-one { width: 21px; height: 21px; }
.gmetro.is-on .gmetro__beats i.is-lit { background: var(--text); transform: scale(1.2); }
.gmetro.is-on .gmetro__beats i.is-one.is-lit { background: var(--gold); }
.gmetro__tempo { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); }
.gmetro__step {
  width: 56px; height: 56px; flex: none; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface);
  color: var(--text); font: 400 30px/1 var(--ui); cursor: pointer; transition: background-color .12s var(--ease);
}
.gmetro__step:hover { background: var(--hover); border-color: var(--line-strong); }
.gmetro__step:active { transform: translateY(1px); }
.gmetro__read { display: flex; flex-direction: column; align-items: center; min-width: 3.3ch; }
.gmetro__bpm { font: 400 100px/.92 var(--display); letter-spacing: -.035em; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.gmetro__unit { margin-top: 6px; font-size: 14px; color: var(--muted); }
.gmetro__slider { width: min(440px, 100%); }
.gmetro__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gmetro__go { min-width: 160px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.gmetro__goicon { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.gmetro.is-on .gmetro__goicon { width: 12px; height: 12px; border: 0; border-radius: 2px; background: currentColor; }
.gmetro__tap.is-hit { animation: tapHit .18s ease-out; }
@keyframes tapHit { from { transform: scale(.95); } to { transform: none; } }
.gmetro__vol { width: min(220px, 100%); }
/* 2.4: the same metronome in Settings → Metronome, smaller, on the dialog's own tint */
.gmetro--set { gap: 12px; margin-top: 10px; }
.gmetro--set .gmetro__main { flex: 1 1 300px; gap: 14px; padding: 18px 16px 18px; background: var(--tint); box-shadow: none; border-radius: 18px; }
.gmetro--set > .glist { flex: 1 1 100%; }
.gmetro--set .grow { background: var(--tint); box-shadow: none; }
.gmetro--set .gmetro__bpm { font-size: 64px; }
.gmetro--set .gmetro__step { width: 44px; height: 44px; font-size: 24px; }
.gmetro--set .gmetro__unit { font-size: 13px; }
.gmetro--set .gmetro__go { min-width: 120px; }
.gmetro--set .gmetro__slider { width: min(320px, 100%); }
.setmetro__with { display: inline-flex; margin-right: 6px; }

/* ============================================================ search ====== */
.palette {
  padding: 0; border: none; border-radius: 18px; width: min(640px, calc(100vw - 32px)); max-width: none;
  margin: 76px auto auto; background: var(--surface); color: var(--text); overflow: hidden;
  box-shadow: 0 24px 60px rgba(var(--shadow), .24);
}
.palette::backdrop { background: var(--backdrop); }
.palette__bar { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 10px 0 18px; border-bottom: 1px solid var(--line-soft); }
.palette__icon { flex: none; color: var(--muted); }
.palette__input {
  flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; outline: none;
  font: 400 18px var(--ui); color: var(--text);
}
.palette__input::placeholder { color: var(--placeholder); }
.palette__input::-webkit-search-cancel-button { display: none; }
.palette__esc { font-family: var(--data); font-size: 12px; color: var(--muted); }
.palette__count { margin: 10px 20px 4px; font-size: 13px; color: var(--muted); }
.palette__results { display: flex; flex-direction: column; padding: 2px 8px 10px; max-height: min(420px, 60vh); overflow-y: auto; }
.presult {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 46px;
  padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer;
  font: inherit; color: var(--text);
}
.presult:hover, .presult[aria-selected="true"] { background: var(--tint); }
.presult__label { font-size: 16px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.presult__kind { flex: none; font-size: 13px; color: var(--muted); }

/* ============================================================ transitions = */
/* between the start page, a page and the practice view: the top bar stays, the rest slides in;
   the menu's keys become the instrument's keys and back. Only while a change runs (html.vt), so nothing is
   composited the rest of the time. */
html.vt .masthead { view-transition-name: tgp-head; }
html.vt[data-layout="guided"]:not([data-view="practice"]) .guide__view,
html.vt[data-layout="guided"][data-view="practice"] .stage { view-transition-name: tgp-main; }
html.vt[data-layout="guided"]:not([data-view="practice"]) .keysnav__board,
html.vt #keyboardPanel { view-transition-name: tgp-keys; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; }
::view-transition-group(tgp-head) { animation-duration: .3s; }
::view-transition-group(tgp-main) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(tgp-main) { animation: tgpOut .18s ease both; }
::view-transition-new(tgp-main) { animation: tgpIn .42s cubic-bezier(.2, .8, .2, 1) both; }
html[data-vt="back"]::view-transition-new(tgp-main) { animation-name: tgpInBack; }
::view-transition-group(tgp-keys) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(tgp-keys), ::view-transition-new(tgp-keys) { height: 100%; }
::view-transition-old(tgp-keys) { animation: tgpFadeOut .28s ease both; }
::view-transition-new(tgp-keys) { animation: tgpFadeIn .34s ease .1s both; }
::view-transition-group(tgp-dest) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@keyframes tgpOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes tgpIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes tgpInBack { from { opacity: 0; transform: translateY(-12px); } }
@keyframes tgpFadeOut { to { opacity: 0; } }
@keyframes tgpFadeIn { from { opacity: 0; } }
html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.vt-theme::view-transition-new(root) { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .gkey, .gkey__blk, .fallbar__seg button { transition: none; }
}

/* ============================================================ narrower ==== */
@media (max-height: 900px) {
  .keysnav__keys { height: 190px; }
  .ghome { gap: 22px; }
}
@media (max-width: 1100px) {
  .ghome__title { font-size: clamp(40px, 6vw, 60px); }
  .grow--piece { grid-template-columns: minmax(0, 1fr) auto; }
  .grow--piece .strip { display: none; }
}
/* Open file's folder: a phone's one row has room for the sign alone (2.4: Open file and Pieces are on the practice
   view's row, Studio's in 2.x); the word stays for a screen reader */
.btn--file .file-ico { display: none; }
@media (max-width: 760px) {
  .brand__mark { width: 32px; height: 32px; }
  .topbar { gap: 6px; margin-left: auto; }
  .loaders .btn--file { width: 36px; padding: 0; justify-content: center; }
  .loaders .btn--file .file-ico { display: block; }
  .loaders .btn--file .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .loaders .btn--pieces { padding-left: 11px; padding-right: 8px; }
  .ghome { gap: 18px; justify-content: flex-start; padding-top: 18px; }
  .ghome__title { font-size: 40px; }
  .gcard { padding: 18px; border-radius: 18px; }
  .gcard--resume, .gcard--streak { flex-basis: 100%; max-width: none; min-width: 0; }
  .gcard__piece { font-size: 28px; }
  .gcard__row .btn--lg { flex: 1 1 auto; }
  .gstreak { flex-direction: row; align-items: center; }
  .keysnav { margin-bottom: 18px; }
  .keysnav__keys { height: 150px; gap: 3px; }
  .gkey { padding: 0 2px 14px; border-radius: 3px 3px 10px 10px; }
  .gkey__name { font-size: clamp(10.5px, 3vw, 13.5px); flex-direction: column; gap: 4px; }
  .gkey__text { white-space: nowrap; }
  .gkey__name.is-sign .gear, .gkey__name.is-sign .metro-ico, .gkey__name.is-sign .staff-ico { width: auto; height: 20px; }
  .gkey__blk { padding-bottom: 9px; }
  html[data-view="home"] .gkey__blkname { display: none; }
  .gkey__blk .swatch { width: min(15px, 70%); }
  .gmetro__main { padding: 22px 14px; }
  .gmetro__bpm { font-size: 76px; }
  .gmetro__step { width: 48px; height: 48px; }
  .gtheme { justify-content: flex-start; }
  html[data-layout="guided"] .loaders { flex-basis: auto; width: auto; margin-left: auto; }
  html[data-layout="guided"] .seg__opt span { padding: 6px 9px; font-size: 13px; }
  .gkey__note { font-size: 11px; }
  .keysnav.is-compact .keysnav__keys { height: 64px; }
  .keysnav.is-compact .gkey__name { font-size: 12.5px; }
  /* a short key keeps its word, or its sign where the sign is all it shows (Exercises, Metronome, Settings) */
  .keysnav.is-compact .gkey__name:not(.is-sign) .gear, .keysnav.is-compact .gkey__name:not(.is-sign) .metro-ico, .keysnav.is-compact .gkey__name:not(.is-sign) .staff-ico { display: none; }
  .keysnav.is-compact .gkey__name.is-sign .gear, .keysnav.is-compact .gkey__name.is-sign .metro-ico, .keysnav.is-compact .gkey__name.is-sign .staff-ico { width: auto; height: 16px; }
  html[data-layout="guided"][data-view="page"] .keysnav { --bleed: 12px; }
  .gpage__title { font-size: 38px; }
  .grow, .grow--piece { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .grow--step { grid-template-columns: 34px minmax(0, 1fr); }
  .grow--step .grow__end { grid-column: 1 / -1; justify-content: flex-start; }
  .grow__end { justify-content: flex-start; }
  .grow__status { text-align: left; }
  .gbig { flex-basis: 100%; }
  .rail__ghead { flex-basis: 100%; }
  .rail__gtitle { font-size: 20px; }
  /* a phone's practice view gives its height to the music: Support waits on the start page (the top bar is one
     row), and the falling notes' bar is one row (why they show is said on the Settings page) */
  html[data-layout="guided"][data-view="practice"] .btn--support { display: none; }
  /* and so does ? (2.5): with it the top bar took a second row; the start page and the pages have it */
  html[data-layout="guided"][data-view="practice"] #btnHelp { display: none; }
  /* the Studio tools on a phone: the switches on one line, Simplify, Fingering and Settings on the next (in one
     line they spilled 119 px sideways); editing fingers keeps its one scrolling row */
  html[data-layout="guided"][data-tools="studio"] .rail__group--tools { flex: 1 1 100%; min-width: 0; }
  html[data-layout="guided"][data-tools="studio"] .rail:not(.is-fingering) .rail__group--tools .rail__controls { flex-wrap: wrap; row-gap: 8px; }
  .fallbar__note { display: none; }
  html[data-layout="guided"] .rail { gap: 8px 10px; }
  .palette { margin-top: 16px; }
}
@media (max-width: 420px) {
  .brand__text { display: none; }
}

/* ============================================================ colour schemes */
/* 2.1: the five schemes on Guided's black keys (C♯ D♯ F♯ G♯ A♯) and in Settings. Day is the :root block at the
   top; each block below changes tokens and nothing else. The marks keep their meaning in every scheme — gold the
   right hand, lapis the left, jade you, red wrong — a shade lighter on a dark page, deeper in Contrast. Checked:
   tests/themes.js (every text on its real background, at 4.5:1 or more, in every scheme). */

/* NIGHT: a dark room. Not black (#0f131a) and not white text (#e1e4ea, 13:1 on a card — under the 16:1 of
   Day's), the accents a step lighter, the score dark paper with a light ink; the keys stay ivory, dimmed. */
:root[data-theme="night"] {
  --scheme: dark;
  --ground: #0f131a;
  --surface: #171c25;
  --raised: #262e3c;
  --tint: #1c222c;
  --hover: #232a36;
  --hover-soft: #1b212b;
  --sunk: #0b0e14;
  --selected: #283244;
  --selected-soft: #202734;
  --field: #11151c;
  --text: #e1e4ea;
  --body: #c4c9d2;
  --muted: #9ea6b4;
  --faint: #949dac;
  --placeholder: #8a93a2;
  --line: #2e3644;
  --line-soft: #232a35;
  --line-strong: #3e4857;
  --dot: #5d6779;
  --primary: #e4dfd4;
  --primary-hi: #f2eee6;
  --on-primary: #11151c;
  --feature: #1f2633;
  --on-feature: #e4dfd4;
  --on-feature-dim: #a9b1be;
  --bar: #c8ced9;
  --bar-empty: #2c3341;
  --note-empty: #171c25;
  --note-empty-line: #717b8d;
  --staff-line: #3c4555;
  --key-face: #b7b1a4;
  --key-face-hover: #c2bdb1;
  --key-face-line: #5c5a55;
  --key-text: #141821;
  --key-note: #3d4250;
  --key-ebony: #06080c;
  --key-ebony-hi: #141922;
  --on-gold-text: #1d1609;
  --paper: #161b24;
  --paper-line: #29303d;
  --paper-ink: #d8d3c8;
  --cursor-ink: #d8d3c8;
  --cursor-alpha: .15;
  --lacquer: #0b0f17;
  --key-white: #c8c3b7;
  --key-white-line: #86806f;
  --key-black: #0b0f17;
  --key-black-line: #000000;
  --glass: rgba(23,28,37,.93);
  --glass-strong: rgba(23,28,37,.97);
  --track: #2c3443;
  --shadow: 0, 0, 0;
  --backdrop: rgba(0,0,0,.55);
  --gold: #d9ab5c;
  --gold-ink: #e2ba6d;
  --gold-line: rgba(226,186,109,.45);
  --gold-wash: rgba(217,171,92,.14);
  --gold-hover: #e6c27f;
  --gold-edge: #b48a40;
  --on-gold: #2a1f0c;
  --lapis: #7aa2ea;
  --lapis-ink: #93b4f2;
  --lapis-wash: rgba(122,162,234,.16);
  --jade: #4fbf9a;
  --jade-ink: #64cfab;
  --jade-wash: rgba(79,191,154,.13);
  --jade-wash-hi: rgba(79,191,154,.2);
  --jade-line: rgba(100,207,171,.42);
  --jade-line-hi: rgba(100,207,171,.7);
  --jade-glow: rgba(100,207,171,.18);
  --red: #ee8b78;
  --red-line: rgba(238,139,120,.45);
  --focus: #93b4f2;
  --focus-wash: rgba(147,180,242,.3);
  --gear-hub: #e4dfd4;
  --gear-key: #11151c;
  --paper-text: #d8d3c8;
  --roll-err: #e0705d;
  --roll-warn: #dca94a;
  --roll-rule: #1d2433;
}

/* SEPIA: warm paper, like an old edition: brown ink on cream, an espresso button, the instrument walnut. */
:root[data-theme="sepia"] {
  --scheme: light;
  --ground: #efe6d6;
  --surface: #f9f4ea;
  --raised: #fffcf6;
  --tint: #f2eadc;
  --hover: #ebe1cf;
  --hover-soft: #f4ede1;
  --sunk: #e5dac6;
  --selected: #e2d6c0;
  --selected-soft: #eee4d2;
  --field: #fffcf6;
  --text: #2e2317;
  --body: #46382a;
  --muted: #665441;
  --faint: #6d5a46;
  --placeholder: #77644e;
  --line: #d6c8b0;
  --line-soft: #e5dbc8;
  --line-strong: #c1b093;
  --dot: #b6a487;
  --primary: #3a2c1e;
  --primary-hi: #4e3c29;
  --on-primary: #fbf6ec;
  --feature: #3a2c1e;
  --on-feature: #fbf6ec;
  --on-feature-dim: #d6c7ae;
  --bar: #3a2c1e;
  --bar-empty: #dccfb8;
  --note-empty: #f9f4ea;
  --note-empty-line: #938163;
  --staff-line: #c2b298;
  --key-face: #fffcf6;
  --key-face-hover: #f6efe2;
  --key-face-line: #d6c8b0;
  --key-text: #2e2317;
  --key-note: #665441;
  --key-ebony: #2e2317;
  --key-ebony-hi: #45362a;
  --on-gold-text: #2e2317;
  --paper: #fbf5e7;
  --paper-line: #e7dac3;
  --paper-ink: #2a1f14;
  --cursor-ink: #2a1f14;
  --cursor-alpha: .18;
  --lacquer: #231912;
  --key-white: #fbf5e7;
  --key-white-line: #bcab8e;
  --key-black: #2a1f14;
  --key-black-line: #140d08;
  --glass: rgba(249,244,234,.93);
  --glass-strong: rgba(249,244,234,.97);
  --track: #e1d5c0;
  --shadow: 58, 40, 20;
  --backdrop: rgba(46,35,23,.32);
  --gold: #d6a24a;
  --gold-ink: #7c5717;
  --gold-line: rgba(124,87,23,.45);
  --gold-wash: #f5e8cf;
  --gold-hover: #e0b463;
  --gold-edge: #b88a3a;
  --on-gold: #47310b;
  --lapis: #6a8fd0;
  --lapis-ink: #2e54a3;
  --lapis-wash: #e4e9f3;
  --jade: #55b08f;
  --jade-ink: #1b684e;
  --jade-wash: #e4efe5;
  --jade-wash-hi: #d7e9dc;
  --jade-line: #a0c9b1;
  --jade-line-hi: #6aa98a;
  --jade-glow: rgba(27,104,78,.16);
  --red: #a33e2b;
  --red-line: rgba(163,62,43,.45);
  --focus: #2e54a3;
  --focus-wash: rgba(46,84,163,.28);
  --gear-hub: #fffcf6;
  --gear-key: currentColor;
  --paper-text: #2e2317;
  --roll-err: #d2604f;
  --roll-warn: #d9a441;
  --roll-rule: #3a2c21;
}

/* WALNUT: the warm dark — the colour of a piano's case: browns, warm ivory text, the score dark with a warm ink. */
:root[data-theme="walnut"] {
  --scheme: dark;
  --ground: #16110d;
  --surface: #1f1813;
  --raised: #2e251d;
  --tint: #251d17;
  --hover: #2b221b;
  --hover-soft: #231b15;
  --sunk: #110d0a;
  --selected: #36291f;
  --selected-soft: #2a2019;
  --field: #19130f;
  --text: #ebe2d3;
  --body: #d2c5b1;
  --muted: #ae9f89;
  --faint: #a3947e;
  --placeholder: #978974;
  --line: #392d23;
  --line-soft: #2d241c;
  --line-strong: #4a3c2f;
  --dot: #6f604e;
  --primary: #ebe2d3;
  --primary-hi: #f6efe4;
  --on-primary: #19130f;
  --feature: #2a2019;
  --on-feature: #ebe2d3;
  --on-feature-dim: #b8aa94;
  --bar: #d8cbb6;
  --bar-empty: #372b21;
  --note-empty: #1f1813;
  --note-empty-line: #85765f;
  --staff-line: #4c3f31;
  --key-face: #bdb1a0;
  --key-face-hover: #c8bdad;
  --key-face-line: #5e554a;
  --key-text: #19130f;
  --key-note: #463b30;
  --key-ebony: #0b0806;
  --key-ebony-hi: #1a140f;
  --on-gold-text: #1f1508;
  --paper: #1d1712;
  --paper-line: #33291f;
  --paper-ink: #e2d7c5;
  --cursor-ink: #e2d7c5;
  --cursor-alpha: .15;
  --lacquer: #110c08;
  --key-white: #d3c8b4;
  --key-white-line: #8c806d;
  --key-black: #110c08;
  --key-black-line: #000000;
  --glass: rgba(31,24,19,.93);
  --glass-strong: rgba(31,24,19,.97);
  --track: #3a2e24;
  --shadow: 0, 0, 0;
  --backdrop: rgba(0,0,0,.55);
  --gold: #d9a650;
  --gold-ink: #e2b665;
  --gold-line: rgba(226,182,101,.45);
  --gold-wash: rgba(217,166,80,.14);
  --gold-hover: #e6bb6f;
  --gold-edge: #b48737;
  --on-gold: #2a1d08;
  --lapis: #7d9fe0;
  --lapis-ink: #98b3ee;
  --lapis-wash: rgba(125,159,224,.16);
  --jade: #58b996;
  --jade-ink: #6dc9a7;
  --jade-wash: rgba(88,185,150,.13);
  --jade-wash-hi: rgba(88,185,150,.2);
  --jade-line: rgba(109,201,167,.42);
  --jade-line-hi: rgba(109,201,167,.7);
  --jade-glow: rgba(109,201,167,.18);
  --red: #ec8e77;
  --red-line: rgba(236,142,119,.45);
  --focus: #98b3ee;
  --focus-wash: rgba(152,179,238,.3);
  --gear-hub: #ebe2d3;
  --gear-key: #19130f;
  --paper-text: #e2d7c5;
  --roll-err: #e0705d;
  --roll-warn: #dca94a;
  --roll-rule: #2a2018;
}

/* CONTRAST: black on white, every edge drawn, the marks at their deepest — for a bright room or tired eyes. */
:root[data-theme="contrast"] {
  --scheme: light;
  --ground: #ffffff;
  --surface: #ffffff;
  --raised: #ffffff;
  --tint: #f0f0f0;
  --hover: #e6e6e6;
  --hover-soft: #f2f2f2;
  --sunk: #e3e3e3;
  --selected: #d4d4d4;
  --selected-soft: #e8e8e8;
  --field: #ffffff;
  --text: #000000;
  --body: #000000;
  --muted: #2b2b2b;
  --faint: #333333;
  --placeholder: #474747;
  --line: #000000;
  --line-soft: #6e6e6e;
  --line-strong: #000000;
  --dot: #000000;
  --primary: #000000;
  --primary-hi: #262626;
  --on-primary: #ffffff;
  --feature: #000000;
  --on-feature: #ffffff;
  --on-feature-dim: #e6e6e6;
  --bar: #000000;
  --bar-empty: #bdbdbd;
  --note-empty: #ffffff;
  --note-empty-line: #000000;
  --staff-line: #4d4d4d;
  --key-face: #ffffff;
  --key-face-hover: #ededed;
  --key-face-line: #000000;
  --key-text: #000000;
  --key-note: #2b2b2b;
  --key-ebony: #000000;
  --key-ebony-hi: #262626;
  --on-gold-text: #000000;
  --paper: #ffffff;
  --paper-line: #000000;
  --paper-ink: #000000;
  --cursor-ink: #000000;
  --cursor-alpha: .16;
  --lacquer: #000000;
  --key-white: #ffffff;
  --key-white-line: #000000;
  --key-black: #000000;
  --key-black-line: #000000;
  --glass: rgba(255,255,255,1);
  --glass-strong: rgba(255,255,255,1);
  --track: #b3b3b3;
  --shadow: 0, 0, 0;
  --backdrop: rgba(0,0,0,.5);
  --gold: #f2b42c;
  --gold-ink: #5e4100;
  --gold-line: #5e4100;
  --gold-wash: #fff2d1;
  --gold-hover: #f6c454;
  --gold-edge: #000000;
  --on-gold: #000000;
  --lapis: #2f6fdb;
  --lapis-ink: #0a3c9e;
  --lapis-wash: #e1e9fb;
  --jade: #12a374;
  --jade-ink: #005538;
  --jade-wash: #dcf3e9;
  --jade-wash-hi: #c9ecdc;
  --jade-line: #005538;
  --jade-line-hi: #003322;
  --jade-glow: rgba(0,85,56,.2);
  --red: #9b0d00;
  --red-line: #9b0d00;
  --focus: #0a3c9e;
  --focus-wash: rgba(10,60,158,.3);
  --gear-hub: #ffffff;
  --gear-key: currentColor;
  --paper-text: #000000;
  --roll-err: #ff5a47;
  --roll-warn: #ffb31a;
  --roll-rule: #2e2e2e;
}

/* every scheme but Day writes the exercises' page in its own tokens (Day keeps the ones styles.css tuned) */
:root[data-theme]:not([data-theme="day"]) .drill {
  --st-ink: var(--text); --st-body: var(--body); --st-dim: var(--muted); --st-faint: var(--faint);
  --st-line: var(--muted); --st-rule: var(--line); --st-card-line: var(--line);
  --st-btn-line: var(--line-strong); --st-btn-line-hi: var(--muted);
  --st-strong: var(--text); --st-strong-text: var(--surface);
  --st-gold: var(--gold-ink); --st-gold-text: var(--gold-ink); --st-gold-line: var(--gold-line);
  --st-gold-wash: var(--gold-wash); --st-gold-sel: var(--gold-wash);
  --st-ok: var(--jade-ink); --st-ok-text: var(--jade-ink); --st-bad: var(--red); --st-bad-text: var(--red);
  --st-done: var(--faint); --st-empty: var(--faint); --st-due: var(--lapis-ink);
  --st-len: var(--gold-ink); --st-play: var(--lapis-ink);
}
/* Contrast draws every edge: a 3 px focus ring, and a border on every card */
:root[data-theme="contrast"] :focus-visible { outline-width: 3px; }
:root[data-theme="contrast"] .gcard, :root[data-theme="contrast"] .grow, :root[data-theme="contrast"] .gstat,
:root[data-theme="contrast"] .gchart, :root[data-theme="contrast"] .rail, :root[data-theme="contrast"] .settings,
:root[data-theme="contrast"] .transport { box-shadow: none; border: 1.5px solid #000; }


/* ============================================================ 2.3: the exercises' page, in Guided's style ====
   Asked for: the exercises' boxes "in this new modern style" — the style of Guided's pages. So: no outlines but a
   soft lift, the round corners of Guided's cards, headings in the display face and in sentence case (no small
   tracked capitals), the numbers in the interface's face rather than the typewriter's, each count with the dot of
   its colour (jade known and lapis due, as on the progress staff; red missed, as a wrong answer), and the lesson in the
   colours a lesson has on its own page: the feature card and its gold button. The class names and the words are
   the same, so drill-ui.js and the tests read them as before. Both layouts; in Guided the list also stands on the
   page itself, with no panel around it, as Guided's other pages do (its sets keep their panel, the staff's page). */
.drill {
  --st-chip: var(--hover);         /* a small label's pill, on a card (Studio's cards are the tint; Guided's, below, white) */
  --st-track: var(--track);        /* an empty meter */
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.drill__kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 5px;
  font: 500 14px/1.35 var(--ui); letter-spacing: 0; text-transform: none; color: var(--st-dim);
}
.drill__due {
  margin: 0; padding: 2px 10px; border-radius: 999px; font: 600 12.5px/1.4 var(--ui); letter-spacing: 0;
  color: var(--st-due); background: var(--lapis-wash);
}
.drill__due:empty { display: none; }
.drill__title { font-size: 30px; line-height: 1.12; }
.drill__cards { gap: 28px; }
.dgroup__title {
  margin: 0 0 12px; font: 500 22px/1.2 var(--display); letter-spacing: -.005em; text-transform: none; color: var(--st-ink);
}
.dgroup__cards { grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 14px; }

/* a card: an exercise */
.dcard {
  gap: 8px; padding: 16px 18px 15px; border: 0; border-radius: 18px;
  background: var(--st-card); box-shadow: var(--lift-1);
}
.dcard__top { align-items: flex-start; gap: 10px; }
.dcard__title { font-size: 20px; line-height: 1.2; color: var(--st-ink); }
.dcard__lvl {
  flex: none; margin-top: 1px; padding: 3px 9px; border-radius: 999px; background: var(--st-chip);
  font: 500 12px/1.35 var(--ui); font-variant-numeric: tabular-nums; color: var(--st-dim);
}
.dcard__what { font-size: 13.5px; line-height: 1.45; }
.dcard__level { font-size: 13.5px; }
.dcard__meter { height: 6px; margin-top: 2px; border-radius: 999px; background: var(--st-track); }
.dcard__meter i { border-radius: inherit; }
.dcard__stats {
  display: flex; flex-wrap: wrap; gap: 3px 12px;
  font: 12.5px/1.45 var(--ui); font-variant-numeric: tabular-nums; color: var(--st-dim);
}
.dstat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dstat::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--st-faint)); }
.dstat--known { --dot: var(--st-ok); }
.dstat--due { --dot: var(--st-due); }
.dstat--missed { --dot: var(--st-bad); }
.dstat--last::before { display: none; }
.dcard__acts { gap: 8px; padding-top: 8px; }
.dcard .btn--ink, .dhand .btn { min-height: 36px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
.dcard__sel { border-radius: 10px; font-size: 13px; }
.dcard__free { font-size: 12.5px; }

/* the lesson: the feature card, its button gold — as on the lesson's own page */
.dlesson {
  gap: 16px 32px; align-items: flex-end; padding: 22px 24px 24px; border: 0; border-radius: 22px;
  background: var(--feature); color: var(--on-feature); box-shadow: var(--lift-2);
}
.dlesson__text { gap: 6px; }
.dlesson__title { font-size: 26px; line-height: 1.15; color: var(--on-feature); }
.dlesson__what { font-size: 14px; line-height: 1.5; color: var(--on-feature-dim); max-width: 74ch; }
.dlesson__acts { gap: 10px; }
.dlesson .btn--ink {
  min-height: 46px; padding: 0 22px; border-radius: 12px; font-size: 15.5px; font-weight: 700;
  background: var(--gold); border-color: var(--gold); color: var(--on-gold-text);
}
.dlesson .btn--ink:hover:not(:disabled) { background: var(--gold-hover); border-color: var(--gold-hover); }
.dlesson .btn--ink:focus-visible, .dlesson .dlesson__min:focus-visible { outline-color: var(--on-feature); }
.dlesson .dlesson__min {
  min-height: 46px; padding-left: 14px; border-radius: 12px; font-size: 14px; color-scheme: dark;
  color: var(--on-feature); background-color: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .3);
}
.dlesson .dlesson__min:hover { border-color: rgba(255, 255, 255, .55); }

/* your hand: a card too */
.dhand {
  gap: 12px 20px; padding: 16px 18px 16px 20px; border: 0; border-radius: 18px;
  background: var(--st-card); box-shadow: var(--lift-1);
}
.dhand__text { font-size: 13.5px; line-height: 1.5; }

/* the two settings under the list */
.drill__opts { gap: 12px 28px; padding: 16px 0 6px; }
.drill .field__label { font-size: 13px; font-weight: 500; }
.drill .drill__opts .select--paper { min-height: 34px; border-radius: 10px; font-size: 13px; max-width: none; }

@media (pointer: coarse) {
  .dcard .btn--ink, .dcard__sel, .dhand .btn, .dlesson .btn--ink, .dlesson .dlesson__min, .drill .drill__opts .select--paper { min-height: 44px; }
}
@media (max-width: 760px) {
  .drill__title { font-size: 24px; }
  .dgroup__title { font-size: 20px; }
  .dlesson { padding: 18px 18px 20px; border-radius: 20px; }
  .dlesson__title { font-size: 22px; }
}

/* GUIDED: the list on the page itself. The panel goes (its background, edge and shadow); the cards are the page's
   white, as Guided's are; where the list scrolls its edges fade into the page (the top one once it has scrolled:
   shell.js marks it), and the focus a keyboard moves keeps clear of the dock. A set keeps its panel. */
html[data-layout="guided"] .drill:has(> .drill__home:not(.is-hidden)) {
  --st-card: var(--surface); --st-chip: var(--tint);
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: 4px 3px 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top, 0px), #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top, 0px), #000 calc(100% - 14px), transparent 100%);
}
html[data-layout="guided"] .drill.is-scrolled { --fade-top: 18px; }
html[data-layout="guided"] .drill__home .drill__head { padding: 0 2px; }
html[data-layout="guided"] .drill__home { padding-bottom: 16px; }

/* Contrast draws every edge (as its other cards): the cards outlined, no shadows */
:root[data-theme="contrast"] .dcard, :root[data-theme="contrast"] .dhand { box-shadow: none; border: 1.5px solid #000; }
:root[data-theme="contrast"] .dlesson { box-shadow: none; }
:root[data-theme="contrast"] .keysnav--drill.is-compact { box-shadow: 0 0 0 1.5px #000; }
/* the lesson's heading is in the ink of the others: the feature card under it says "this one" now */
.dgroup--lesson .dgroup__title { color: var(--st-ink); }

/* ============================================================ 2.4: dropdowns =========================
   Asked for: the dropdowns more refined in every scheme — readable, less boxy. The closed dropdown is a soft
   field: round corners, room on both sides, its own small chevron in the text's colour, the scheme's field and
   line. Its list, where the browser lets a page draw it (Chrome and Edge 135+, Safari 27+: `appearance:
   base-select`) and a mouse is the pointer, is a rounded panel in the scheme's colours: the option under the
   pointer tinted, the chosen one marked; elsewhere (Firefox, a phone's or a tablet's own picker) the browser's
   list, in the scheme's colours where it takes them. */
.select, select {
  -webkit-appearance: none; appearance: none;
  min-height: 34px; padding: 6px 32px 6px 12px; border-radius: 10px;
  font: 500 13.5px/1.25 var(--ui); color: var(--text);
  background-color: var(--field); border: 1px solid var(--line);
  /* the chevron: two 4 px squares, each crossed by a 1 px diagonal — the Pieces button's own, drawn in the
     text's colour (80 % of it, as that one's .8), so it follows every scheme without a picture per scheme */
  background-image: linear-gradient(45deg, transparent 40%, currentColor 40%, currentColor 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, currentColor 40%, currentColor 60%, transparent 60%);
  background-image: linear-gradient(45deg, transparent 40%, color-mix(in srgb, currentColor 80%, transparent) 40%, color-mix(in srgb, currentColor 80%, transparent) 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, color-mix(in srgb, currentColor 80%, transparent) 40%, color-mix(in srgb, currentColor 80%, transparent) 60%, transparent 60%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
  text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.select:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--line-strong); }
.select--inline { max-width: 240px; min-height: 32px; padding: 5px 30px 5px 11px; font-size: 13px; border-radius: 9px; background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px); }
/* room for the longest choice — an instrument ("Sintetizador sin conexión (sin internet)"); and the hand's reach,
   which 1.x held at 290 px for its 12 px text: "Entre una novena y una décima (promedio)" is 297 px in this field.
   A field held narrower ends its text in "…" where the browser draws the field, but is cut off mid-letter where
   the page draws the list (base-select, below; there the field takes the width of its choice) */
.select:not(.select--inline), .grow--set .select, #handReach { max-width: 320px; }
.dcard__sel { min-height: 36px; }
select:disabled { opacity: .5; cursor: default; }
@supports (appearance: base-select) {
  @media (pointer: fine) {
    .select, select, select::picker(select) { appearance: base-select; }
    /* its line centred, however tall the field */
    .select:not([hidden]), select:not([hidden]) { display: inline-flex; align-items: center; }
    /* a field that shows its choice through <selectedcontent> (an exercise card's level, drill-ui.js): the
       choice on one line, ending in "…" when the field is too narrow for it — the field's own label, without
       one, would be cut off mid-letter */
    select > button:first-child {
      display: block; flex: 1 1 auto; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: none;
      font: inherit; color: inherit; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    select > button:first-child > selectedcontent { display: inline; }
    /* the chevron stays the field's own (above), pointing up while the list is open */
    select::picker-icon { display: none; }
    select:open {
      background-image: linear-gradient(-45deg, transparent 40%, color-mix(in srgb, currentColor 80%, transparent) 40%, color-mix(in srgb, currentColor 80%, transparent) 60%, transparent 60%), linear-gradient(45deg, transparent 40%, color-mix(in srgb, currentColor 80%, transparent) 40%, color-mix(in srgb, currentColor 80%, transparent) 60%, transparent 60%);
      border-color: var(--line-strong);
    }
    select::picker(select) {
      margin: 4px 0; padding: 4px; border: 1px solid var(--line); border-radius: 12px;
      background: var(--surface); color: var(--text); font: 500 13.5px/1.3 var(--ui);
      box-shadow: 0 18px 40px -18px rgba(var(--shadow), .55), 0 2px 6px rgba(var(--shadow), .08);
    }
    select option { min-width: 0; padding: 8px 12px; border-radius: 8px; background: transparent; color: var(--text); gap: 10px; }
    select option:hover, select option:focus-visible { background: var(--hover); outline: none; }
    select option:checked { background: var(--selected); font-weight: 600; }
    select option::checkmark { color: var(--gold-ink); }
    select option:disabled { color: var(--faint); background: transparent; }
  }
}
/* the lesson's minutes, on the feature card: its own light chevron, and its list in the app's colours */
.dlesson .dlesson__min { padding-right: 32px; }
/* a finger's size on a touch screen (the rule above, pointer: coarse in styles.css), after the sizes above */
@media (pointer: coarse) { .select, .select--inline, .dcard__sel, .grow--set .select { min-height: 44px; } }
/* Settings' readouts on a phone wrap under their fields: on one line, the reach's ("llega a entre una novena y una
   décima · equilibrado sugerido") and the sound's pushed the pane 18 to 113 px sideways (so in 2.3.1 as well) */
@media (max-width: 760px) { .setgroup__row .rail__readout { white-space: normal; min-width: 0; } }

/* ============================================================ statistics (2.5.1) ====== */
/* THE QUESTION, ASKED ONCE. A card at the foot of the window, over whatever is there, until the visitor answers
   (consent.js shows it on thegrind.quest only, and only before a choice). Decline and Accept are the same button,
   side by side, the same size and weight: refusing must be as easy and as visible as agreeing, so neither is the
   navy "main thing" button. It does not take the focus or block the page: choosing nothing is a no. In the five
   schemes it is the dialogs' own surface, line, text and link colours. */
.consent {
  position: fixed; z-index: 70; left: 50%; transform: translateX(-50%);
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(560px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 16px 18px 14px; border-radius: 16px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  box-shadow: 0 24px 60px -24px rgba(var(--shadow), .55), 0 2px 6px rgba(var(--shadow), .08);
  font-family: var(--ui);
}
.consent[hidden] { display: none; }
.consent__title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--text); }
.consent__text { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--body); }
.consent__more { margin: 0; font-size: 13px; }
.consent__more a, .about--links a { color: var(--lapis-ink); text-decoration: underline; text-underline-offset: 2px; }
.consent__more a:hover, .about--links a:hover { text-decoration-thickness: 2px; }
.consent__acts { display: flex; gap: 10px; margin-top: 12px; }
.consent__btn { flex: 1 1 0; min-height: 42px; padding: 0 14px; font-size: 14px; font-weight: 600; }
.setgroup__note.consent__more { margin-top: 2px; }
/* on a page, a phone's pinned menu stays usable: the card sits above it, as the toasts do */
@media (max-width: 760px) {
  .consent { bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); padding: 14px 14px 12px; }
  html[data-layout="guided"][data-view="page"] .consent { bottom: calc(var(--keysnav-h, 92px) + 10px); }
}
/* the "?" window's foot: the privacy page and the licences, after the version */
.about--links { margin-top: 6px; padding-top: 0; border-top: 0; font-family: var(--ui); font-size: 12.5px; }
.about--links a + a::before { content: "·"; display: inline-block; margin: 0 8px; color: var(--muted); text-decoration: none; }