/* ==========================================================================
   TOKENS: every visual decision in the suite, in one place.
   Apps and components use these names, never raw values, so the whole suite
   restyles from this file. Values here reproduce the current look exactly;
   the design pass will rationalise the scales (for example, near-duplicate
   type sizes) by editing values, not rules.
   ========================================================================== */
:root {
  /* colour: light theme (the dark theme below redefines the same names) */
  --bg: #E7EAE3; --surface: #F2F4EF; --ink: #17231E; --ink-2: #4A5A52; --line: #C5CDC2;
  --felt: #1F3A2F; --felt-edge: #2C4A3D; --brass: #A8802F; --brass-hi: #C9A24E; --brass-ink: #7A5A1C; --sym: #7A5F2E;
  --chosen: #D3DAD1; --ivory: #F5F3EC; --ebony: #1B211E; --key-line: #9AA59C;
  /* instruments (from the owner's palette; adjustable in the style guide's colour editor): woodwinds a
     sage family; brass from Torchlight (trumpets) and Amber (horns) down to dark gold; strings Virtuosic
     Violence and Bella Cello (violins), Instruments of Torture (violas), Blood (cellos), Darkwood (basses);
     navy bass, deep forest guitar, amethyst piano, orchid pad */
  --c-bass: #24366E; --c-guitar: #17552A; --c-piano: #7D4DAD; --c-pad: #AF518A;
  --c-vln1: #B8390B; --c-vln2: #A61F0D; --c-vla: #7A1109; --c-vc: #3F0D10; --c-cb: #140A08;
  --c-fl: #A3D1B7; --c-ob: #72A17B; --c-cl: #427D70; --c-bsn: #404D2F;
  --c-tpt: #FFBB47; --c-hn: #D49A30; --c-tbn: #A97416; --c-tba: #7D5002;
  --lit-edge: rgba(232, 228, 216, 0.6); --swatch-edge: rgba(255, 255, 255, 0.22);
  --serif: "Newsreader", "Noto Music", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Atkinson Hyperlegible", "Noto Music", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --key-label: #6D766F; --key-label-lit: #FFFFFF;     /* keyboard key labels, same in both themes */

  /* type */
  --display: "Cormorant SC", "Noto Music", "Cormorant Garamond", var(--serif);
  --fs-72: 0.72rem;
  --fs-76: 0.76rem;
  --fs-78: 0.78rem;
  --fs-80: 0.8rem;
  --fs-82: 0.82rem;
  --fs-85: 0.85rem;
  --fs-86: 0.86rem;
  --fs-88: 0.88rem;
  --fs-90: 0.9rem;
  --fs-92: 0.92rem;
  --fs-95: 0.95rem;
  --fs-100: 1rem;
  --fs-105: 1.05rem;
  --fs-112: 1.12rem;
  --fs-115: 1.15rem;
  --fs-120: 1.2rem;
  --fs-140: 1.4rem;
  --fs-150: 1.5rem;
  --fs-155: 1.55rem;
  --fs-160: 1.6rem;
  --fs-165: 1.65rem;
  --fs-190: 1.9rem;
  --fs-200: 2rem;
  --fs-body: 1.0625rem;      /* 17px at the standard size; rem so the learner's text size scales it */
  --fs-9px: 9px;             /* inside the keyboard's drawing, which scales itself */
  --fs-body-sm: 1rem;
  --lh-100: 1;
  --lh-110: 1.1;
  --lh-115: 1.15;
  --lh-120: 1.2;
  --lh-125: 1.25;
  --lh-130: 1.3;
  --lh-140: 1.4;
  --lh-155: 1.55;
  --tracking-display: 0.04em; --tracking-heading: -0.01em;

  /* space: every step scales with --density (1 = the current look) */
  --density: 1;
  --space-4: calc(4px * var(--density));
  --space-5: calc(5px * var(--density));
  --space-6: calc(6px * var(--density));
  --space-7: calc(7px * var(--density));
  --space-8: calc(8px * var(--density));
  --space-9: calc(9px * var(--density));
  --space-10: calc(10px * var(--density));
  --space-12: calc(12px * var(--density));
  --space-13: calc(13px * var(--density));
  --space-14: calc(14px * var(--density));
  --space-16: calc(16px * var(--density));
  --space-18: calc(18px * var(--density));
  --space-20: calc(20px * var(--density));
  --space-22: calc(22px * var(--density));
  --space-24: calc(24px * var(--density));
  --space-26: calc(26px * var(--density));
  --space-30: calc(30px * var(--density));
  --space-40: calc(40px * var(--density));
  --space-48: calc(48px * var(--density));
  --space-64: calc(64px * var(--density));

  /* shape */
  --radius-3: 3px; --radius-4: 4px; --radius-7: 7px; --radius-8: 8px; --radius-10: 10px;
  --radius-pill: 999px; --radius-round: 50%;
  --ring-ink: inset 0 0 0 1px var(--ink); --ring-gold: inset 0 0 0 1px var(--brass);
  --shadow-menu: 0 10px 30px rgb(0 0 0 / 0.35);

  /* motion (only ever to show state; reduced-motion users get none) */
  --dur-1: .1s; --dur-2: .12s; --dur-3: .15s; --dur-ring: 1.6s; --dur-draw: .32s; --underline-lift: 2px; --dur-fade: .26s; --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* the keyboard's glow and degree labels */
  --key-glow: #FFF4D0; --glow-strength: 0.5; --dur-glow: .12s; --deg-ink: #1F1A10; --deg-halo: rgba(250, 247, 238, 0.82); --fs-deg: 8.5px;

  /* layout */
  --page-width: 47.5rem; --menu-width: 19rem; --kbd-wide: 73.75rem; --notation-w: 18.75rem; --intro-w: 1.75rem;   /* rem: they grow with the text size */
  --stepnav-min: 8.75rem; --stepnav-max: 15rem; --stepnav-w: 10.25rem; --fs-title: 1.45rem; --fs-title-sm: 1.25rem;     /* step boxes: narrowest, and widest before labels are shortened */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111A16; --surface: #17221D; --ink: #E3E8E0; --ink-2: #9DAAA2; --line: #2D3D35;
    --felt: #0B1410; --felt-edge: #1D3027; --brass: #D4B062; --brass-hi: #E2C27A; --brass-ink: #DDBC72; --sym: #BFA978;
    --chosen: #2B3A33; --ivory: #E9E6DC; --ebony: #141917; --key-line: #6E7A72;
    --c-bass: #293B74; --c-guitar: #1D5B30; --c-piano: #8F5FC0; --c-pad: #C6669F;
  }
}
:root[data-theme="dark"] {
  --bg: #111A16; --surface: #17221D; --ink: #E3E8E0; --ink-2: #9DAAA2; --line: #2D3D35;
  --felt: #0B1410; --felt-edge: #1D3027; --brass: #D4B062; --brass-hi: #E2C27A; --brass-ink: #DDBC72; --sym: #BFA978;
  --chosen: #2B3A33; --ivory: #E9E6DC; --ebony: #141917; --key-line: #6E7A72;
  --c-bass: #293B74; --c-guitar: #1D5B30; --c-piano: #8F5FC0; --c-pad: #C6669F;
}

/* hidden always wins: an element marked hidden never shows, whatever display a design gives it (an author's
   display rule would otherwise override the browser's own [hidden] rule) */
[hidden] { display: none !important; }
/* the scrollbar's room is always kept, so the page doesn't shift sideways between short and long pages
   (Windows draws scrollbars inside the window; overlay scrollbars are unaffected) */
html { scrollbar-gutter: stable; touch-action: manipulation; }   /* no double-tap zoom (pinch still zooms): taps come fast here */
/* ==========================================================================
   BASE: reset, page, type, buttons, header and tabs. Uses tokens.css.
   ========================================================================== */
:root {
  color-scheme: light dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-body)/var(--lh-155) var(--sans); }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.app { max-width: var(--page-width); margin: 0 auto; padding: var(--space-20) var(--space-22) var(--space-64); }

/* header */
.top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12) var(--space-24); flex-wrap: wrap; padding-bottom: var(--space-14); border-bottom: 1px solid var(--line); }
.brand { font: 600 var(--fs-160)/var(--lh-110) var(--display); letter-spacing: var(--tracking-display); margin: 0; }
.tabs { display: flex; gap: var(--space-4); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tab { background: none; border: 0; padding: var(--space-6) var(--space-10) var(--space-5); border-bottom: 0; position: relative; white-space: nowrap; flex: none; color: var(--ink-2); border-radius: var(--radius-4) var(--radius-4) 0 0; }
.tab::after { content: ""; position: absolute; left: var(--space-10); right: var(--space-10); bottom: 0; height: 2px; background: var(--brass);
  transform: scaleX(0); transition: transform var(--dur-draw) var(--ease-out); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
@media (max-width: 480px) {
  .tab { padding-left: var(--space-6); padding-right: var(--space-6); }
}
@media (max-width: 400px) {
  .tab { font-size: var(--fs-92); padding-left: var(--space-5); padding-right: var(--space-5); }
  .tab::after { left: var(--space-5); right: var(--space-5); }
}
@media (max-width: 480px) {
  .tab::after { left: var(--space-6); right: var(--space-6); }
  .tabs { gap: 0; margin-left: calc(-1 * var(--space-6)); }
}

.panel { padding-top: var(--space-26); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: var(--tracking-heading); }
h1 { font-size: var(--fs-200); line-height: var(--lh-115); margin: 0 0 var(--space-6); }
.lede { color: var(--ink-2); max-width: 62ch; margin: 0 0 var(--space-22); }
.quiet { background: none; border: 0; padding: var(--space-4) 0; color: var(--ink-2); }
/* drawn underline: a quiet line always, a gold one drawing across on hover and focus */
.quiet, .step-open, .suite-account {
  text-decoration: none;
  background-image: linear-gradient(var(--brass), var(--brass)), linear-gradient(var(--line), var(--line));
  background-size: 0% 1px, 100% 1px; background-repeat: no-repeat;
  background-position: 0 calc(100% - var(--underline-lift)), 0 calc(100% - var(--underline-lift));
  transition: background-size var(--dur-draw) var(--ease-out), color var(--dur-2) ease-out;
}
.quiet:hover, .quiet:focus-visible, .step-open:hover, .step-open:focus-visible, .suite-account:hover, .suite-account:focus-visible { color: var(--ink); background-size: 100% 1px, 100% 1px; }
.btn { background: var(--surface); border: 1px solid var(--line); padding: var(--space-8) var(--space-14); border-radius: var(--radius-8); }
.btn:hover { border-color: var(--ink-2); }
.btn-primary { background: var(--felt); color: var(--ivory); border-color: var(--felt); }
.btn-primary:hover { border-color: var(--brass-hi); }


/* ==========================================================================
   COMPONENTS: step navigation, introductions, play area, answers, results,
   keyboard, path, observations, settings. Uses tokens.css.
   ========================================================================== */
/* level header: fixed. Both boxes one width, the title one size, always two lines (the name, then the
   step), so nothing moves or changes from one stop to the next */
.level { display: flex; flex-direction: column; gap: var(--space-8); }
.stepnav { display: grid; grid-template-columns: var(--stepnav-w) minmax(0, 1fr) var(--stepnav-w); align-items: center; gap: var(--space-16); }
.stepnav-here { margin: 0; min-width: 0; text-align: center; font-size: var(--fs-title); line-height: var(--lh-120); }
.stepnav-here > #lvTitle { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-stage { display: block; margin: 3px 0 0; font-family: var(--sans); font-size: var(--fs-95); font-weight: 400; color: var(--ink-2); line-height: var(--lh-130); }
.lv-stage[hidden] { display: none; }
.stepnav-btn { display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; min-width: 0; box-sizing: border-box; padding: var(--space-7) var(--space-12);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-8); color: var(--ink); font-size: var(--fs-92); line-height: var(--lh-125); }
.stepnav-btn:hover { border-color: var(--ink-2); }
.stepnav-btn.is-empty { visibility: hidden; }
.sn-prev { align-items: flex-start; text-align: left; }
.sn-next { align-items: flex-end; text-align: right; }
.sn-group { font-size: var(--fs-76); color: var(--ink-2); }
.sn-group, .sn-step { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stepnav-btn .arw { color: var(--brass); }
.lv-sub { color: var(--ink-2); margin: var(--space-4) 0 0; text-align: center; }
.lv-sub .wp { margin-right: var(--space-8); vertical-align: 0.1em; }
.lv-links { display: flex; justify-content: center; gap: var(--space-22); flex-wrap: wrap; }
.lv-links .quiet { white-space: nowrap; font-size: var(--fs-92); }
@media (max-width: 600px) {
  .stepnav { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .stepnav-here { grid-column: 1 / -1; grid-row: 1; font-size: var(--fs-title-sm); }
  .stepnav .sn-prev { grid-column: 1; grid-row: 2; }
  .stepnav .sn-next { grid-column: 2; grid-row: 2; }
}

.banner { margin: var(--space-22) 0 0; padding: var(--space-14) var(--space-16); background: var(--surface); border: 1px solid var(--brass); border-radius: var(--radius-8); text-align: center; }
.banner p { margin: 0 0 var(--space-10); }
.banner .row { display: flex; gap: var(--space-10); flex-wrap: wrap; justify-content: center; }

/* play */
.stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-22); margin: var(--space-30) 0 var(--space-30); }
.stage .play { grid-column: 2; }
.play { width: 104px; height: 104px; border-radius: var(--radius-round); border: 3px solid var(--brass-hi); background: radial-gradient(circle at 50% 42%, var(--felt-edge), var(--felt) 70%); display: grid; place-items: center; flex: none; transition: border-color var(--dur-3), transform var(--dur-1); }
.play:hover { border-color: var(--brass); }
.play:active { transform: scale(0.97); }
.play svg { width: 34px; height: 34px; margin-left: var(--space-5); fill: var(--ivory); }
.play.is-playing { animation: ring var(--dur-ring) ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brass-hi) 45%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.play-side { grid-column: 3; justify-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.play-status { color: var(--ink-2); font-size: var(--fs-85); }
#nextBtn.is-ready { color: var(--ink); text-decoration-color: var(--brass); }
.play-status:empty { display: none; }   /* the button sits in its own centre column, so nothing beside it moves it */

/* answers */
.ans-group { margin-bottom: var(--space-18); }
.ans-h { font: 400 var(--fs-95)/var(--lh-130) var(--sans); color: var(--ink-2); margin: 0 0 var(--space-8); letter-spacing: 0; text-align: center; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); justify-content: center; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; justify-content: center; margin-bottom: var(--space-10); }
.row-label { width: 100%; font-size: var(--fs-82); color: var(--ink-2); margin-bottom: -2px; text-align: center; }
.chip { background: var(--surface); border: 1px solid var(--line); padding: var(--space-8) var(--space-13); border-radius: var(--radius-8); min-height: 42px; text-align: left; line-height: var(--lh-120); transition: border-color var(--dur-2), background-color var(--dur-2); }
.chip:hover:not(:disabled) { border-color: var(--ink-2); }
.chip[aria-pressed="true"] { border-color: var(--ink); box-shadow: var(--ring-ink); }
.chip-sym { font-family: var(--serif); color: var(--sym); margin-left: var(--space-6); }
.chip:disabled { color: var(--ink-2); }
.chip.is-chosen { background: var(--chosen); color: var(--ink); }
.chip.is-played { border-color: var(--brass); box-shadow: var(--ring-gold); color: var(--brass-ink); }
.chip.is-played .chip-sym { color: var(--brass-ink); }
.waiting .chip { opacity: 0.55; }

/* result */
.result { min-height: 8px; }
.result-lines { display: grid; grid-template-columns: max-content max-content; justify-content: center; gap: var(--space-4) var(--space-14); align-items: baseline; margin: var(--space-6) 0 var(--space-8); }
.rk { color: var(--ink-2); font-size: var(--fs-92); }
.rv { font: 500 var(--fs-120)/var(--lh-130) var(--serif); }
.rv .sym { font-weight: 400; color: var(--sym); margin-left: var(--space-8); white-space: nowrap; }
.result-note { margin: var(--space-4) 0 var(--space-8); color: var(--ink-2); text-align: center; }
.result-actions { display: flex; gap: var(--space-10); align-items: center; justify-content: center; flex-wrap: wrap; margin: var(--space-8) 0 var(--space-4); }
.now { color: var(--ink-2); font-size: var(--fs-92); }
.detail { color: var(--ink-2); margin: var(--space-12) 0 var(--space-10); text-align: center; }

/* keyboard strip */
.kbd { background: var(--felt); border-radius: var(--radius-10); padding: var(--space-12) var(--space-12) var(--space-10); margin: var(--space-6) 0 var(--space-8); overflow-x: auto; }
.kbd svg { display: block; width: 100%; min-width: 420px; height: auto; }
.kbd .w { fill: var(--key-white, var(--ivory)); stroke: var(--key-line); stroke-width: 1; }
.kbd .b { fill: var(--key-black, var(--ebony)); }
.kbd .lbl { font: var(--fs-9px) var(--sans); fill: var(--key-label); }
.kbd .on { fill: var(--brass-hi); }
.kbd .b.on { fill: var(--brass); }
.kbd .is-bass { fill: var(--brass); }
.kbd .dot { fill: var(--ivory); stroke: var(--felt); stroke-width: 1.4; }
.kbd .lbl.on-lit { fill: var(--key-label-lit); fill-opacity: 0.9; }
.kbd .c-bass { fill: var(--c-bass); }
.kbd .c-guitar { fill: var(--c-guitar); }
.kbd .c-piano { fill: var(--c-piano); }
.kbd .c-pad { fill: var(--c-pad); }
.kbd .c-vln1 { fill: var(--c-vln1); }
.kbd .c-vln2 { fill: var(--c-vln2); }
.kbd .c-vla { fill: var(--c-vla); }
.kbd .c-vc { fill: var(--c-vc); }
.kbd .c-cb { fill: var(--c-cb); }
.kbd .c-fl { fill: var(--c-fl); }
.kbd .c-ob { fill: var(--c-ob); }
.kbd .c-cl { fill: var(--c-cl); }
.kbd .c-bsn { fill: var(--c-bsn); }
.kbd .c-tpt { fill: var(--c-tpt); }
.kbd .c-hn { fill: var(--c-hn); }
.kbd .c-tbn { fill: var(--c-tbn); }
.kbd .c-tba { fill: var(--c-tba); }
.kbd .band { stroke: none; }
/* a lit black key (or a band on one) gets a fine light edge: even a near-black colour reads as lit */
.kbd .b.on, .kbd .b.is-bass, .kbd .b[class*=" c-"], .kbd .band.on-b { stroke: var(--lit-edge); stroke-width: 0.9; }
/* living and playable: a key glows while it sounds or is pressed; degree labels on sounding keys */
.kbd .glow { fill: var(--key-glow); opacity: 0; pointer-events: none; transition: opacity var(--dur-glow) ease-out; }
.kbd .key.is-sounding .glow, .kbd .key.is-pressed .glow { opacity: var(--glow-strength); }
.kbd.is-playable .key { cursor: pointer; }
.kbd.is-playable .band:hover, .kbd.is-playable .key:hover > [data-inst]:not(.band) { stroke: var(--ink); stroke-width: 0.8; }
/* a keyboard spanning more than four octaves widens beyond the text column (never past the window) */
.kbd.is-wide { --kbd-w: min(var(--kbd-wide), calc(100vw - 2 * var(--space-22))); width: var(--kbd-w); max-width: none; margin-left: calc((100% - var(--kbd-w)) / 2); box-sizing: border-box; }
.kbd.is-playable svg { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.kbd .deg { font: 700 var(--fs-deg) var(--sans); fill: var(--deg-ink); text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--deg-halo); stroke-width: 2.4px; stroke-linejoin: round; }   /* a thin ivory halo: readable on any band */
@media (prefers-reduced-motion: reduce) { .kbd .glow { transition: none; } }
/* ensemble legend: one column per section, side by side; names and notes aligned; section name beneath */
.legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--space-18) var(--space-40); margin: var(--space-14) 0 0; }
.legend-col { display: flex; flex-direction: column; }
.legend-grid { display: grid; grid-template-columns: auto max-content max-content; column-gap: var(--space-8); row-gap: var(--space-5); align-items: baseline; }
.legend-grid .sw { align-self: center; transform: none; }
.legend-fam { margin-top: auto; padding-top: var(--space-6); border-top: 1px solid var(--line); font-family: var(--serif); font-style: italic; font-size: var(--fs-95); color: var(--ink-2); }
.sw { width: 12px; height: 12px; border-radius: var(--radius-3); display: inline-block; transform: translateY(1px); flex: none; box-shadow: inset 0 0 0 1px var(--swatch-edge); }
.sw.c-bass { background: var(--c-bass); }
.sw.c-guitar { background: var(--c-guitar); }
.sw.c-piano { background: var(--c-piano); }
.sw.c-pad { background: var(--c-pad); }
.sw.c-vln1 { background: var(--c-vln1); }
.sw.c-vln2 { background: var(--c-vln2); }
.sw.c-vla { background: var(--c-vla); }
.sw.c-vc { background: var(--c-vc); }
.sw.c-cb { background: var(--c-cb); }
.sw.c-fl { background: var(--c-fl); }
.sw.c-ob { background: var(--c-ob); }
.sw.c-cl { background: var(--c-cl); }
.sw.c-bsn { background: var(--c-bsn); }
.sw.c-tpt { background: var(--c-tpt); }
.sw.c-hn { background: var(--c-hn); }
.sw.c-tbn { background: var(--c-tbn); }
.sw.c-tba { background: var(--c-tba); }
.legend .ln { color: var(--ink-2); padding-left: var(--space-6); white-space: nowrap; }

.keys-hint { color: var(--ink-2); font-size: var(--fs-85); margin-top: var(--space-26); text-align: center; }
.notice { background: var(--surface); padding: var(--space-12) var(--space-14); border-radius: var(--radius-8); }

/* path */
.tiers { list-style: none; padding: 0; margin: 0; counter-reset: tier; }
.tier { padding: var(--space-16) 0; border-top: 1px solid var(--line); }
.tier:first-child { border-top: 0; }
.tier-h { display: flex; align-items: baseline; gap: var(--space-6) var(--space-14); flex-wrap: wrap; margin-bottom: var(--space-10); }
.tier-h h3 { font-size: var(--fs-115); margin: 0; line-height: var(--lh-125); }
.tier-syms { color: var(--ink-2); font-family: var(--serif); font-size: var(--fs-95); }
.wp { font-size: var(--fs-78); color: var(--brass-ink); border: 1px solid var(--brass); border-radius: var(--radius-pill); padding: 1px var(--space-8); }
.check-group { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; width: 100%; margin-bottom: var(--space-6); }
.check-group .row-label { width: 100%; font-size: var(--fs-82); color: var(--ink-2); }
.steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--space-8); }
/* a step's introduction (or review): a slim stop of its own, just left of its step; every step one width */
.steps { display: flex; gap: var(--space-8); align-items: stretch; }
.stepcol { display: contents; }
.steps .step { flex: 1 1 0; min-width: 0; }
.step-intro { flex: 0 0 var(--intro-w); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); box-sizing: border-box;
  margin-right: calc(3px - var(--space-8));        /* joined to its step: a tight gap, where steps keep the full one */
  padding: var(--space-8) 0; background: none; border: 1px dashed var(--line); border-radius: var(--radius-8); color: var(--ink-2); font-size: var(--fs-72); letter-spacing: 0.04em; cursor: pointer; }
.step-intro > span:first-child { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }   /* reads upwards, like a tab */
.step-intro:hover { color: var(--ink); border-color: var(--ink-2); }
.step-intro.is-current { border-style: solid; border-color: var(--ink); color: var(--ink); box-shadow: var(--ring-ink); }
.step-intro.is-heard { border-style: solid; border-color: color-mix(in srgb, var(--brass) 45%, var(--line)); color: color-mix(in srgb, var(--brass-ink) 80%, var(--ink-2)); }   /* heard: a fine gilt line */
.step-intro.is-none { display: none; }
@media (max-width: 600px) {
  .steps { display: grid; grid-template-columns: 1fr 1fr; }
  .stepcol { display: flex; gap: 0; min-width: 0; }
  .stepcol .step { flex: 1 1 0; }
  .step-intro { margin-right: 3px; }
  .step-intro.is-none { display: block; visibility: hidden; }   /* every step the same width on a phone too */
}
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-8); padding: var(--space-9) var(--space-10) var(--space-8); display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.step.is-current { border-color: var(--ink); box-shadow: var(--ring-ink); }
.step-open { background: none; border: 0; padding: 0; text-align: left; font-weight: 700; font-size: var(--fs-92); line-height: var(--lh-125); color: var(--ink);  }
.step-open:hover { text-decoration-color: var(--brass); }
.bar { height: 6px; border-radius: var(--radius-3); background: color-mix(in srgb, var(--line) 75%, transparent); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: var(--radius-3); background: var(--brass); }
.step.is-known .bar > span { background: var(--brass-hi); }
.step-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); font-size: var(--fs-80); color: var(--ink-2); flex-wrap: wrap; }
.known { display: inline-flex; align-items: center; gap: var(--space-5); color: var(--ink); cursor: pointer; }
.known input { width: 15px; height: 15px; margin: 0; }

.custom { margin-top: var(--space-40); padding-top: var(--space-22); border-top: 1px solid var(--line); }
.custom h2 { font-size: var(--fs-150); margin: 0 0 var(--space-6); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--space-18); min-width: 0; }
legend { padding: 0; margin-bottom: var(--space-8); color: var(--ink-2); font-size: var(--fs-95); }
.checks { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.check { position: relative; }
.check input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.check span { display: inline-block; border: 1px solid var(--line); background: var(--surface); padding: var(--space-5) var(--space-10); border-radius: var(--radius-7); font-size: var(--fs-92); }
.check input:checked + span { border-color: var(--ink); box-shadow: var(--ring-ink); }
.check input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.check .serif { font-family: var(--serif); }
.custom-go { display: flex; gap: var(--space-14); align-items: center; flex-wrap: wrap; }
.custom-go.is-top { margin: 0 0 var(--space-22); }
.custom-msg { color: var(--ink-2); font-size: var(--fs-92); }

/* notes */
.notes-sec { margin-bottom: var(--space-30); }
.notes-sec h2 { font-size: var(--fs-140); margin: 0 0 var(--space-10); }
.notes-group { margin: 0 0 var(--space-14); }
.notes-group h3 { font: 600 var(--fs-100)/var(--lh-140) var(--sans); margin: 0 0 var(--space-4); letter-spacing: 0; }
.notes-group ul { margin: 0; padding-left: 1.1rem; }
.notes-group li { margin: 2px 0; }
.notes-group .why { color: var(--ink-2); }
.notes-modes { display: grid; gap: var(--space-12); }
.mode-row h3 { font: 600 var(--fs-100)/var(--lh-140) var(--sans); margin: 0 0 2px; letter-spacing: 0; }
.mode-row p { margin: 0; color: var(--ink-2); }
.mode-row p strong { color: var(--ink); font-weight: 400; }

/* settings */
.set-row { display: grid; grid-template-columns: minmax(0, 13rem) 1fr; gap: var(--space-6) var(--space-18); padding: var(--space-14) 0; border-top: 1px solid var(--line); align-items: center; }
.set-row:first-of-type { border-top: 0; }
.set-row label, .set-row .set-label { color: var(--ink); }
.set-hint { grid-column: 2; color: var(--ink-2); font-size: var(--fs-88); margin: 0; }
input[type="range"] { width: 100%; max-width: 280px; accent-color: var(--brass); }
.range-ends { display: flex; align-items: center; gap: var(--space-10); flex-wrap: wrap; font-size: var(--fs-88); color: var(--ink-2); }
.range-ends input[type="range"] { flex: 1 1 160px; max-width: 240px; }
.range-ends .btn { color: var(--ink); font-size: var(--fs-92); padding: var(--space-5) var(--space-12); }
input[type="checkbox"] { accent-color: var(--felt); width: 18px; height: 18px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-8); overflow: hidden; }
.seg button { background: var(--surface); border: 0; padding: var(--space-6) var(--space-12); border-left: 1px solid var(--line); }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--felt); color: var(--ivory); }
.danger-ish { border-color: var(--ink-2); }
.btn-row { display: flex; gap: var(--space-8); flex-wrap: wrap; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 600px) {
  body { font-size: var(--fs-body-sm); }
  .app { padding: var(--space-14) var(--space-16) var(--space-48); }
  h1 { font-size: var(--fs-165); }
  .stage { gap: var(--space-16); margin: var(--space-22) 0; }
  .play { width: 88px; height: 88px; }
  .set-row { grid-template-columns: 1fr; }
  .set-hint { grid-column: 1; }
  .keys-hint { display: none; }
  .result-lines { grid-template-columns: 1fr; gap: 0; }
  .rk { margin-top: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .play.is-playing { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brass-hi) 40%, transparent); }
  * { transition: none !important; }
}

/* introductions: hear the chords, inversions or voicings before naming them */
.intro { margin: var(--space-26) 0 0; text-align: center; }
.intro-h { font: 500 var(--fs-95)/var(--lh-130) var(--serif); color: var(--brass-ink); margin: 0 0 var(--space-6); }
.intro-lead { max-width: 58ch; margin: 0 auto var(--space-6); }
.intro-note { max-width: 58ch; margin: 0 auto var(--space-6); color: var(--ink-2); font-size: var(--fs-92); }
.intro-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); margin: var(--space-16) 0 0; }
.intro-fam { font-size: var(--fs-82); color: var(--ink-2); margin: var(--space-16) 0 var(--space-6); }
.intro-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-10); margin: var(--space-16) 0 0; text-align: left; }
/* three to a row; every card the same width, short rows centred */
.icard { flex: 0 0 calc((100% - 2 * var(--space-10)) / 3); box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-10); padding: var(--space-12) var(--space-14); display: flex; flex-direction: column; gap: var(--space-6); transition: border-color var(--dur-2); }
@media (max-width: 640px) { .icard { flex-basis: calc((100% - 10px) / 2); } }
@media (max-width: 420px) { .icard { flex-basis: 100%; } }
.icard:hover { border-color: var(--ink-2); }
.icard.is-active { border-color: var(--brass); box-shadow: var(--ring-gold); }
.icard-main { background: none; border: 0; padding: 0; margin: 0; color: inherit; text-align: left; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.icard-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-10); }
.icard-name { font: 500 var(--fs-112)/var(--lh-125) var(--serif); }
.icard-name .chip-sym { margin-left: var(--space-8); }
.icard-title { white-space: nowrap; }          /* a chord's name stays on one line; only its symbol may drop below */
.icard-play { width: 11px; height: 11px; fill: var(--brass); flex: none; align-self: center; }
.icard-sub { color: var(--ink-2); font-size: var(--fs-88); }
.icard-cue { margin: 0; font-size: var(--fs-90); }
.icard .quiet { align-self: flex-start; font-size: var(--fs-86); margin-top: auto; padding-top: var(--space-4); }   /* pinned to the bottom, level across a row */
.new-tag { font: 400 var(--fs-72)/var(--lh-100) var(--sans); color: var(--brass-ink); border: 1px solid var(--brass); border-radius: var(--radius-pill); padding: 2px var(--space-7); margin-left: var(--space-8); vertical-align: 0.15em; }
.intro-actions { display: flex; justify-content: center; align-items: baseline; gap: var(--space-10) var(--space-18); flex-wrap: wrap; margin: var(--space-16) 0 0; }
.intro-root { color: var(--ink-2); font-size: var(--fs-92); }
.intro-view { margin: var(--space-16) 0 0; }
.intro-view .detail { margin: var(--space-8) 0 0; }
.intro-hint { color: var(--ink-2); font-size: var(--fs-90); margin: 0; }
.intro-go { margin: var(--space-22) 0 0; }

/* suite bar: switch between apps, account (hidden when there is nothing to show) */
.suite-bar { display: flex; align-items: center; gap: var(--space-12); padding: 0 0 var(--space-10); font-size: var(--fs-88); color: var(--ink-2); }
.suite-bar[hidden] { display: none; }   /* display: flex would otherwise override the hidden attribute */
.suite-gap { flex: 1; }
.app-switch { position: relative; }
.app-switch > summary { list-style: none; cursor: pointer; padding: var(--space-4) var(--space-12); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.app-switch > summary::-webkit-details-marker { display: none; }
.app-switch > summary:hover, .app-switch[open] > summary { color: var(--ink); border-color: var(--brass); }
.app-menu { position: absolute; z-index: 20; top: calc(100% + var(--space-6)); left: 0; width: var(--menu-width); max-width: calc(100vw - 2 * var(--space-22));
  list-style: none; margin: 0; padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-10); box-shadow: var(--shadow-menu); }
.app-item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-8) var(--space-10); border-radius: var(--radius-8); color: var(--ink); text-decoration: none; }
a.app-item:hover { background: var(--chosen); }
.app-item[aria-current="page"] { box-shadow: var(--ring-gold); }
.app-item.is-soon { color: var(--ink-2); }
.app-name { font-family: var(--serif); font-size: var(--fs-105); }
.app-desc { color: var(--ink-2); font-size: var(--fs-85); }
.suite-account { color: var(--ink-2); }


/* the optional answering keyboard, under the answers */
.answer-kbd { margin: var(--space-14) 0 0; }
.answer-kbd[hidden] { display: none; }

/* notation: the chord on a grand staff, in the palette; noteheads glow in time and play when pressed */
.notation { display: flex; justify-content: center; margin: var(--space-10) 0 var(--space-4); }
.notation svg { width: var(--notation-w); max-width: 100%; height: auto; overflow: visible; }
.notation svg path, .notation svg rect, .notation svg text { fill: var(--ink); stroke: var(--ink); }
.notation svg .vf-stave path, .notation svg .vf-stave rect { fill: var(--ink-2); stroke: var(--ink-2); }
.notation .nh path { transition: fill var(--dur-glow) ease-out; }
.notation .nh.is-sounding path, .notation .nh.is-pressed path { fill: var(--brass-hi); stroke: var(--brass-hi); }
.notation.is-playable .nh { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .notation .nh path { transition: none; } }
.notation-missing { color: var(--ink-2); font-size: var(--fs-88); margin: 0; }

/* custom training: labels align with their options */
.custom .row-label { text-align: left; }

/* motion: quiet, and only to show state; none at all with reduced motion */
@keyframes arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.panel:not([hidden]) { animation: arrive var(--dur-fade) var(--ease-out); }
#result > *, #introView > *, .intro:not([hidden]), .banner:not([hidden]), .answer-kbd:not([hidden]) { animation: arrive var(--dur-fade) var(--ease-out); }
.chip, .btn, .icard, .step, .stepnav-btn, .app-switch > summary { transition: border-color var(--dur-3) ease-out, background-color var(--dur-3) ease-out, color var(--dur-3) ease-out, box-shadow var(--dur-3) ease-out; }
.bar span { transition: width var(--dur-draw) var(--ease-out); }
/* with nothing either side (custom training), the step boxes take no room */
.stepnav:has(.sn-prev.is-empty):has(.sn-next.is-empty) .stepnav-btn { display: none; }
@media (prefers-reduced-motion: reduce) {
  .panel:not([hidden]), #result > *, #introView > *, .intro:not([hidden]), .banner:not([hidden]), .answer-kbd:not([hidden]) { animation: none; }
  .quiet, .step-open, .suite-account, .tab::after, .chip, .btn, .icard, .step, .stepnav-btn, .bar span { transition: none; }
}

/* the learner's own ensembles */
.own-head { margin: var(--space-12) 0 var(--space-4); }
.own-list { display: flex; flex-direction: column; gap: var(--space-4); }
.own-ens { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.own-builder { margin-top: var(--space-12); padding: var(--space-14) var(--space-16); border: 1px solid var(--line); border-radius: var(--radius-8); background: var(--surface); }
.own-name { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-8) 0 var(--space-12); max-width: 26rem; }
.own-name input { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-6, 6px); padding: var(--space-6) var(--space-10); }
.own-name input:focus { outline: 1px solid var(--brass); border-color: var(--brass); }
.own-builder .custom-go { gap: var(--space-14); align-items: center; }

/* ==========================================================================
   LISTEN, LEFT-JUSTIFIED: everything under the header reads from the same left
   edge. The header keeps its step boxes either side of the title, equal in
   width, so the title never moves as you go along the path. (A keyboard wider
   than the column stays centred, as a figure.)
   ========================================================================== */
.lv-sub, .ans-h, .row-label, .result-note, .detail, .keys-hint, .intro, .banner, .intro-go { text-align: left; }
.intro-lead, .intro-note { margin-left: 0; margin-right: 0; }
.lv-links, .banner .row, .chips, .chip-row, .result-actions, .legend, .intro-tabs, .intro-cards, .intro-actions, .notation, .intro-go { justify-content: flex-start; }
.result-lines { justify-content: start; }
.stage { grid-template-columns: auto 1fr; }
.stage .play { grid-column: 1; }
.play-side { grid-column: 2; }

/* the Path page: a group warms under the pointer (a wash of lamplight, a gold line drawing down its edge) */
@media (hover: hover) {
  .tier { position: relative; }
  .tier::before, .tier::after { content: ""; position: absolute; pointer-events: none; }
  .tier::after { inset: 6px calc(-1 * var(--space-14)); border-radius: var(--radius-10); z-index: -1; opacity: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brass) 9%, transparent), color-mix(in srgb, var(--brass) 2%, transparent) 55%, transparent);
    transition: opacity var(--dur-fade) var(--ease-out); }
  .tier::before { left: calc(-1 * var(--space-14)); top: var(--space-16); bottom: var(--space-16); width: 2px; border-radius: 2px; background: var(--brass);
    transform: scaleY(0); transform-origin: top; transition: transform var(--dur-draw) var(--ease-out); }
  .tier:hover::after { opacity: 1; }
  .tier:hover::before { transform: scaleY(1); }
  .tier-h h3, .tier-syms { transition: color var(--dur-fade) var(--ease-out); }
  .tier:hover .tier-h h3 { color: var(--brass-ink); }
  .tier:hover .tier-syms { color: var(--sym); }
  .tiers { isolation: isolate; }                  /* the wash sits behind the group, above the page */
}
@media (prefers-reduced-motion: reduce) { .tier::before, .tier::after, .tier-h h3, .tier-syms { transition: none; } }


/* the Path page: a step (or its introduction) lifts and warms under the pointer */
@media (hover: hover) {
  .step { transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-3) ease-out, box-shadow var(--dur-3) ease-out, background-color var(--dur-3) ease-out; }
  .step:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brass) 45%, var(--line));
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); background-image: linear-gradient(180deg, color-mix(in srgb, var(--brass) 8%, transparent), transparent 65%); }
  .step:hover .bar { background: color-mix(in srgb, var(--brass) 18%, var(--line)); }
  .step-intro { transition: border-color var(--dur-3) ease-out, color var(--dur-3) ease-out, background-color var(--dur-3) ease-out; }
  .step-intro:hover { border-color: color-mix(in srgb, var(--brass) 55%, var(--line)); color: var(--ink); background-color: color-mix(in srgb, var(--brass) 6%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .step, .step:hover { transform: none; transition: none; } .step-intro { transition: none; } }

/* a legend swatch plays its section alone (a larger hit area than the square itself) */
.sw-play { position: relative; border: 0; padding: 0; cursor: pointer; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) ease-out; }
.sw-play::before { content: ""; position: absolute; inset: -7px; }
.sw-play:hover { transform: scale(1.3); box-shadow: inset 0 0 0 1px var(--swatch-edge), 0 0 0 2px color-mix(in srgb, var(--ink) 35%, transparent); }
.sw-play:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sw-play { transition: none; } .sw-play:hover { transform: none; } }

/* a whole section's swatch (striped with its players' colours), before its name */
.fam-play { display: inline-flex; align-items: center; gap: var(--space-8); padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.fam-play .sw-fam { width: 16px; height: 12px; transform: none; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) ease-out; }
.fam-play:hover { color: var(--ink); }
.fam-play:hover .sw-fam { transform: scale(1.25); box-shadow: inset 0 0 0 1px var(--swatch-edge), 0 0 0 2px color-mix(in srgb, var(--ink) 35%, transparent); }
.fam-play:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fam-play .sw-fam { transition: none; } .fam-play:hover .sw-fam { transform: none; } }

/* the path: a group's name leads to where you are in it (or its start) */
.tier-open { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.tier-open:hover { color: var(--brass-ink); }
/* an introduction about one chord names it, above its cards */
.intro-chord { margin: var(--space-14) 0 0; font-family: var(--serif); font-size: var(--fs-115); color: var(--ink); }
.intro-chord .chip-sym { margin-left: var(--space-8); }

/* a wide keyboard on a narrow screen: two stacked rows, each fitting the screen */
.kbd.is-split svg + svg { margin-top: var(--space-6); }
@media (max-width: 600px) { .kbd svg { min-width: 0; } }
/* no keyboard shortcuts on a touch screen */
@media (hover: none) and (pointer: coarse) { .keys-hint { display: none; } }
/* phones: everything from the left edge, the title too (its step boxes sit beneath it) */
@media (max-width: 600px) {
  .stepnav-here { text-align: left; }
  .stepnav-here > #lvTitle { text-align: left; }
  .keys-hint { text-align: left; }
}

/* accidentals in text (core/js/typography.js wraps them): music fonts hang the sharp below the baseline */
.acc { position: relative; }
.acc-s { top: -0.16em; }
.acc-f { top: -0.04em; }

/* ==========================================================================
   DESIGN DIRECTIONS: three takes on "a library at night", for choosing.
   Each is a complete set of token values (colour, type, light, texture), switched on with data-design on <html> (in development:
   ?design=peacock, reading or orchestral; ?design=none returns to the
   current look). The chosen direction becomes the default tokens.
   ========================================================================== */

/* PEACOCK ROOM: lacquered deep blue-green, gold leaf, parchment ivory */
:root[data-design="peacock"] {
  --bg: #0B1719; --surface: #11262A; --ink: #ECE3CF; --ink-2: #A9A28E; --line: #234143;
  --felt: #0A1517; --felt-edge: #1D3D40; --brass: #C2A15A; --brass-hi: #D7BB78; --brass-ink: #D4B470; --sym: #C9AE73;
  --chosen: #1C383B; --ivory: #ECE3CF; --ebony: #0C1415; --key-line: #6A7A73;
  --heading: var(--serif); --label-font: var(--sans); --label-tracking: 0.02em;
  --rule: #6F6237; --rule-soft: #1F3A3C;
  --light: radial-gradient(ellipse 80% 45% at 50% 0%, rgba(90, 160, 150, 0.13), transparent 70%), radial-gradient(ellipse 120% 60% at 50% 110%, rgba(0, 0, 0, 0.55), transparent 70%);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.75 0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 .045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --lacquer: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 45%);
  --play-hi: #24504F;
  --bezel: 0 0 0 4px #0B1719, 0 0 0 5px #6F6237, 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 2px 10px rgba(255, 255, 255, 0.06);
  --kbd-case: linear-gradient(180deg, #0E1F21, #081113); --kbd-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 30px rgba(0, 0, 0, 0.45);
  --key-white: #E6DDC6; --key-black: #0E1617;
  --focus-halo: 0 0 0 4px rgba(194, 161, 90, 0.18);
}

/* READING ROOM: dark walnut and leather, warm lamplight, an old-world fleuron */
:root[data-design="reading"] {
  --bg: #14100D; --surface: #1D1712; --ink: #EEE3CB; --ink-2: #AFA38B; --line: #3A2E24;
  --felt: #110D0A; --felt-edge: #3A2A1E; --brass: #C9A45F; --brass-hi: #DCBC7C; --brass-ink: #D8B774; --sym: #CFB27C;
  --chosen: #2C231B; --ivory: #EEE3CB; --ebony: #120E0B; --key-line: #7A6E5E;
  --heading: "Cormorant Garamond", "Noto Music", var(--serif); --label-font: var(--sans); --label-tracking: 0.02em;
  --rule: #6E5A36; --rule-soft: #33281F;
  --light: radial-gradient(ellipse 70% 42% at 50% 14%, rgba(255, 186, 110, 0.12), transparent 72%), radial-gradient(ellipse 130% 70% at 50% 115%, rgba(0, 0, 0, 0.6), transparent 70%);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.8 0 0 0 0 0.6 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), repeating-linear-gradient(0deg, rgba(255, 230, 190, 0.012) 0 1px, transparent 1px 6px);
  --lacquer: linear-gradient(180deg, rgba(255, 220, 170, 0.035), rgba(255, 220, 170, 0) 50%);
  --play-hi: #4A3524;
  --bezel: 0 0 0 4px #14100D, 0 0 0 5px #6E5A36, 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 2px 10px rgba(255, 220, 170, 0.07);
  --kbd-case: linear-gradient(180deg, #221A13, #120E0A); --kbd-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.05), 0 12px 30px rgba(0, 0, 0, 0.5);
  --key-white: #EAE0C8; --key-black: #15100C;
  --focus-halo: 0 0 0 4px rgba(201, 164, 95, 0.18);
}

/* ORCHESTRAL: near-black and cinematic, restrained pale gold, a spotlight from above, more space */
:root[data-design="orchestral"] {
  --bg: #0A0B0C; --surface: #121416; --ink: #EEEDE8; --ink-2: #A2A6A8; --line: #24282B;
  --felt: #08090A; --felt-edge: #2A2E31; --brass: #B9A36E; --brass-hi: #CDB988; --brass-ink: #CDB988; --sym: #BFA978;
  --chosen: #1C2023; --ivory: #EEEDE8; --ebony: #0B0C0D; --key-line: #6E7275;
  --heading: var(--serif); --label-font: var(--sans); --label-tracking: 0.06em;
  --rule: #4A4434; --rule-soft: #1B1E20;
  --light: radial-gradient(ellipse 55% 38% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 72%), radial-gradient(ellipse 140% 70% at 50% 115%, rgba(0, 0, 0, 0.6), transparent 70%);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --lacquer: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 40%);
  --play-hi: #23272A;
  --bezel: 0 0 0 5px #0A0B0C, 0 0 0 6px #4A4434, 0 14px 40px rgba(0, 0, 0, 0.7);
  --kbd-case: linear-gradient(180deg, #141618, #0A0B0C); --kbd-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 36px rgba(0, 0, 0, 0.55);
  --key-white: #E8E6DF; --key-black: #0D0E0F;
  --focus-halo: 0 0 0 4px rgba(185, 163, 110, 0.16);
  --density: 1.12; --fs-190: 2.15rem; --fs-200: 2.2rem;
}

/* STUDIO: an overhaul of the layout (core/css/studio.css) on Orchestral's near-black and light: space
   demarcated by gentle borders, not filled boxes; one console; a wider page */
:root[data-design="studio"] {
  --bg: #0A0B0C; --surface: #0E0F11; --surface-2: #121416; --ink: #EEEDE8; --ink-2: #A2A6A8; --line: #24282B;
  --felt: #08090A; --felt-edge: #2A2E31; --brass: #C9A86A; --brass-hi: #DDBF85; --brass-ink: #D7B87B; --sym: #CDB07A;
  --chosen: #1C2023; --ivory: #EEEDE8; --ebony: #0B0C0D; --key-line: #6E7275;
  --heading: var(--serif); --label-font: var(--sans); --label-tracking: 0.12em;
  --rule: #4A4434; --rule-soft: #1B1E20; --edge: #202427;
  --light: radial-gradient(ellipse 55% 38% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 72%), radial-gradient(ellipse 140% 70% at 50% 115%, rgba(0, 0, 0, 0.6), transparent 70%);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --lacquer: none;
  --play-hi: #23272A;
  --bezel: 0 0 0 5px #0A0B0C, 0 0 0 6px #4A4434, 0 14px 40px rgba(0, 0, 0, 0.7);
  --kbd-case: linear-gradient(180deg, #141618, #0A0B0C); --kbd-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 36px rgba(0, 0, 0, 0.55);
  --key-white: #E8E6DF; --key-black: #0D0E0F;
  --focus-halo: 0 0 0 4px rgba(201, 168, 106, 0.16);
  --page-width: 56rem; --card-r: 16px; --console-pad: var(--space-24); --stage-w: 11rem;
}

/* ==========================================================================
   MATERIAL: texture, light and ornament ("a library at night").
   Active only when a design direction is set (data-design on <html>); every
   value comes from the direction's tokens in designs.css. Nothing here marks
   success or failure: material is the room, never a reward.
   ========================================================================== */
:root[data-design] { color-scheme: dark; }
:root[data-design] body { background-color: var(--bg); background-image: var(--light), var(--grain); background-attachment: fixed; }
:root[data-design] h1, :root[data-design] h2, :root[data-design] h3, :root[data-design] .stepnav-here { font-family: var(--heading); letter-spacing: var(--tracking-heading); }

/* gilt rule under the header */
:root[data-design] .top { position: relative; border-bottom-color: var(--rule); }
:root[data-design] .tier, :root[data-design] .sg-sec { border-top-color: var(--rule-soft); }

/* lacquer: a faint sheen across surfaces */
:root[data-design] .icard, :root[data-design] .step, :root[data-design] .chip, :root[data-design] .btn,
:root[data-design] .stepnav-btn, :root[data-design] .banner, :root[data-design] .notice, :root[data-design] .app-menu {
  background-image: var(--lacquer); border-color: var(--line); }
:root[data-design] .icard:hover, :root[data-design] .chip:hover:not(:disabled), :root[data-design] .stepnav-btn:hover { border-color: var(--rule); }
:root[data-design] .icard.is-active, :root[data-design] .chip.is-played { border-color: var(--brass); }
:root[data-design] .btn-primary { background: var(--felt); background-image: var(--lacquer); border-color: var(--rule); color: var(--ink); }

/* the play button: an instrument dial in a gilt bezel */
:root[data-design] .play { border: 2px solid var(--brass); background: radial-gradient(circle at 50% 30%, var(--play-hi), var(--felt) 72%); box-shadow: var(--bezel); }
:root[data-design] .play svg { fill: var(--ink); }

/* the keyboard, in its case */
:root[data-design] .kbd { background: var(--kbd-case); box-shadow: var(--kbd-shadow); border: 1px solid var(--rule-soft); }

/* focus: a soft halo of lamplight */
:root[data-design] :focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; box-shadow: var(--focus-halo); }

/* small type in small capitals where it labels rather than reads */
:root[data-design] .intro-h, :root[data-design] .ans-h, :root[data-design] .row-label, :root[data-design] .rk {
  font-family: var(--label-font); letter-spacing: var(--label-tracking); }

/* ==========================================================================
   STUDIO: an overhaul of the layout, active only with data-design="studio"
   (?design=studio). CSS only: the markup and behaviour are the same as every
   other design. The step header keeps its fixed layout.
   - Orchestral's near-black, light and grain; space demarcated by gentle
     borders (--edge), never filled boxes
   - Orchestral's header (the wordmark, the tabs, a gilt rule)
   - centred text; one console: the play button and its controls on the
     left, the answers centred on the right (stacked, centred, on phones)
   - the result as a bordered panel; below the keyboard, the staff with the
     legend (or the notes) beside it
   ========================================================================== */

/* ---- frame ---- */
:root[data-design="studio"] .app { padding-top: 0; }
:root[data-design="studio"] .level { margin-top: var(--space-26); }
:root[data-design="studio"] .stepnav-btn { background: transparent; border-color: transparent; }
:root[data-design="studio"] .stepnav-btn:not(.is-empty):hover { border-color: transparent; color: var(--brass-ink); }
:root[data-design="studio"] .lv-sub { color: var(--ink-2); }

/* ---- the console: listening on the left, answering on the right ---- */
:root[data-design="studio"] #testArea {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-40); row-gap: 0;
  position: relative; margin-top: calc(var(--console-pad) + var(--space-22));
}
:root[data-design="studio"] #testArea::before {
  content: ""; grid-row: 1; grid-column: 1 / -1; margin: calc(-1 * var(--console-pad)) 0;     /* the column's own width, like every panel */
  border: 1px solid var(--edge); border-radius: var(--card-r);
}
:root[data-design="studio"] #testArea > * { grid-column: 1 / -1; position: relative; }
:root[data-design="studio"] #testArea > .stage {
  grid-row: 1; grid-column: 1; margin: 0 0 0 var(--console-pad); align-self: center; width: var(--stage-w);   /* fixed: nothing moves when its links appear */
  display: flex; flex-direction: column; align-items: center; gap: var(--space-14);
}
:root[data-design="studio"] #testArea > .stage .play-side { flex-direction: row; justify-content: center; gap: var(--space-18); min-height: 2.1em; width: 100%; }
:root[data-design="studio"] #testArea > #answers { grid-row: 1; grid-column: 2; margin: 0 var(--console-pad) 0 0; align-self: center; padding-left: var(--space-30); border-left: 1px solid var(--edge); }
:root[data-design="studio"] #testArea > #answerKbd:not([hidden]), :root[data-design="studio"] #testArea > #result:not(:empty) { margin-top: calc(var(--console-pad) + var(--space-22)); }
:root[data-design="studio"] #testArea > .keys-hint { margin-top: calc(var(--console-pad) + var(--space-22)); }

/* centred: the step's text, the console's answers, the result, the introduction, the keys line */
:root[data-design="studio"] .lv-sub, :root[data-design="studio"] .keys-hint, :root[data-design="studio"] #answers,
:root[data-design="studio"] .ans-h, :root[data-design="studio"] .row-label, :root[data-design="studio"] .result-note,
:root[data-design="studio"] .detail, :root[data-design="studio"] .intro-lead, :root[data-design="studio"] .intro-note,
:root[data-design="studio"] .intro-chord, :root[data-design="studio"] .intro-h, :root[data-design="studio"] .banner { text-align: center; }
:root[data-design="studio"] .lv-links, :root[data-design="studio"] .chips, :root[data-design="studio"] .chip-row,
:root[data-design="studio"] .result-actions, :root[data-design="studio"] .intro-tabs, :root[data-design="studio"] .intro-actions,
:root[data-design="studio"] .legend, :root[data-design="studio"] .banner .row { justify-content: center; }
:root[data-design="studio"] .result-lines { justify-content: center; }
:root[data-design="studio"] .keys-hint { opacity: 0.75; }
/* Arpeggiate, Skip, Next: plain words */
:root[data-design="studio"] .play-side .quiet { background-image: none; }
:root[data-design="studio"] .play-side .quiet:hover { color: var(--brass-ink); }

:root[data-design="studio"] .custom-go { justify-content: center; text-align: center; }   /* Custom Training's Practice this set, top and bottom */
:root[data-design="studio"] .custom-go .custom-msg:empty { display: none; }

/* labels: quiet, small, spaced */
:root[data-design="studio"] .ans-h { font: 600 var(--fs-72)/1.4 var(--sans); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--space-8); }
:root[data-design="studio"] .ans-group + .ans-group { margin-top: var(--space-18); }
:root[data-design="studio"] .row-label { letter-spacing: 0.06em; }

/* answer buttons: a line on the black; chosen fills, played rings (information, not reward) */
:root[data-design="studio"] .chip {
  border-radius: 10px; border: 1px solid var(--line); background: transparent;
  transition: border-color var(--dur-3) ease-out, transform var(--dur-3) var(--ease-out), background-color var(--dur-3) ease-out;
}
:root[data-design="studio"] .chip:hover:not(:disabled) { border-color: color-mix(in srgb, var(--brass) 50%, var(--line)); transform: translateY(-1px); }
:root[data-design="studio"] .chip[aria-pressed="true"] { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
:root[data-design="studio"] .chip.is-chosen { background: var(--chosen); }
:root[data-design="studio"] .chip.is-played { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
:root[data-design="studio"] .btn, :root[data-design="studio"] .btn-primary { background: transparent; border-color: var(--line); }
:root[data-design="studio"] .btn-primary { border-color: var(--rule); }
:root[data-design="studio"] .btn:hover { border-color: var(--brass); }

/* ---- the result: a bordered panel; the staff with the legend (or the notes) beside it ---- */
:root[data-design="studio"] #result:not(:empty) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); column-gap: var(--space-40); align-items: start;   /* a centred middle for the staff and legend; everything else full width */
  padding: var(--space-22) var(--console-pad) var(--space-26); border: 1px solid var(--edge); border-radius: var(--card-r);
}
:root[data-design="studio"] #result > * { grid-column: 1 / -1; }
:root[data-design="studio"] #result > .notation { grid-column: 2; margin: var(--space-14) 0 0; }
:root[data-design="studio"] #result > .notation + .legend,
:root[data-design="studio"] #result > .notation + .detail { grid-column: 3; align-self: center; margin-top: var(--space-14); }

:root[data-design="studio"] #result .kbd.is-wide { width: 100%; margin-left: 0; }
/* a panel holding a wide keyboard widens, centred like a figure, so the keyboard keeps its full size */
:root[data-design="studio"] #result:has(.kbd.is-wide) {
  --card-w: min(calc(var(--kbd-wide) + 2 * var(--console-pad)), calc(100vw - 2 * var(--space-22)));
  width: var(--card-w); max-width: none; box-sizing: border-box; margin-left: calc((100% - var(--card-w)) / 2);
}
:root[data-design="studio"] .result-lines .rk { letter-spacing: 0.04em; }

/* ---- introductions, the path, messages: bordered panels ---- */
:root[data-design="studio"] .intro:not([hidden]) {
  margin-top: var(--space-26); padding: var(--space-22) var(--console-pad) var(--space-26);
  border: 1px solid var(--edge); border-radius: var(--card-r);
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); column-gap: var(--space-24);
  grid-template-areas: "head head head head" "lead lead lead lead" "note note note note" "tabs tabs tabs tabs" "chord chord chord chord" "cards cards cards cards" ". actions go ." "view view view view";
}
:root[data-design="studio"] .intro-h { grid-area: head; }
:root[data-design="studio"] .intro-lead { grid-area: lead; max-width: none; text-wrap: pretty; }   /* fills the width; no lone last word */
:root[data-design="studio"] .intro-note { grid-area: note; max-width: none; text-wrap: pretty; }
:root[data-design="studio"] .intro-tabs { grid-area: tabs; }
:root[data-design="studio"] .intro-chord { grid-area: chord; }
:root[data-design="studio"] #introCards { grid-area: cards; }
:root[data-design="studio"] .intro-hint { text-align: center; }
:root[data-design="studio"] .intro-actions { grid-area: actions; align-self: center; margin-top: var(--space-16); }
:root[data-design="studio"] .intro-go { grid-area: go; align-self: center; margin: var(--space-16) 0 0; }
:root[data-design="studio"] #introView { grid-area: view; }
/* cards fill their row (two, three or four across); a short set, or a leftover card, sits centred */
:root[data-design="studio"] .intro-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-10); }
:root[data-design="studio"] .intro-cards .icard { flex: 1 1 12rem; max-width: calc((100% - 2 * var(--space-10)) / 3); background: transparent; border-color: var(--line); }
:root[data-design="studio"] .intro .kbd.is-wide { width: 100%; margin-left: 0; }
/* the introduction's staff with its notes beside it, as in the result */
:root[data-design="studio"] #introView:not(:empty) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); column-gap: var(--space-40); align-items: center; }
:root[data-design="studio"] #introView > * { grid-column: 1 / -1; }
:root[data-design="studio"] #introView > .notation { grid-column: 2; margin: var(--space-14) 0 0; }
:root[data-design="studio"] #introView > .notation + .detail { grid-column: 3; margin-top: var(--space-14); }

:root[data-design="studio"] .tier {
  border-top: 0; margin: 0 0 var(--space-14); padding: var(--space-18) var(--space-22) var(--space-22);
  border: 1px solid var(--edge); border-radius: var(--card-r); background: transparent;
}
:root[data-design="studio"] .tier::after { inset: 0; border-radius: var(--card-r); }       /* the hover's wash fills the panel */
:root[data-design="studio"] .tier::before { left: 0; top: var(--space-18); bottom: var(--space-18); }
:root[data-design="studio"] .step { background: transparent; border-color: var(--line); }
:root[data-design="studio"] .banner, :root[data-design="studio"] .notice { border-radius: var(--card-r); background: transparent; }
:root[data-design="studio"] .app-menu, :root[data-design="studio"] .own-builder { background: var(--bg); }

/* ---- phones: the console stacks; everything from the left edge ---- */
@media (max-width: 700px) {
  :root[data-design="studio"] { --console-pad: var(--space-16); }       /* the panels' corners stay on screen */
  :root[data-design="studio"] #testArea { grid-template-columns: minmax(0, 1fr); }
  :root[data-design="studio"] #testArea::before { grid-row: 1 / span 2; }
  :root[data-design="studio"] #testArea > .stage { grid-column: 1; margin: 0 var(--console-pad); flex-direction: column; align-items: center; gap: var(--space-12); }
  :root[data-design="studio"] #testArea > .stage .play-side { flex-direction: row; gap: var(--space-18); }
  :root[data-design="studio"] .stepnav-here, :root[data-design="studio"] .stepnav-here > #lvTitle, :root[data-design="studio"] .keys-hint { text-align: center; }
  :root[data-design="studio"] #testArea > #answers { grid-row: 2; grid-column: 1; padding-left: 0; border-left: 0; margin: var(--space-22) var(--console-pad) 0; }
  :root[data-design="studio"] #result:not(:empty) { grid-template-columns: minmax(0, 1fr); }
  :root[data-design="studio"] #result > .notation, :root[data-design="studio"] #result > .notation + .legend, :root[data-design="studio"] #result > .notation + .detail { grid-column: 1; justify-self: center; }
  :root[data-design="studio"] #introView:not(:empty) { grid-template-columns: minmax(0, 1fr); }
  :root[data-design="studio"] #introView > .notation, :root[data-design="studio"] #introView > .notation + .detail { grid-column: 1; justify-self: center; }
  :root[data-design="studio"] .intro:not([hidden]) { grid-template-areas: "head" "lead" "note" "tabs" "chord" "cards" "actions" "view" "go"; grid-template-columns: minmax(0, 1fr); }
  :root[data-design="studio"] #testArea > .stage { width: auto; }
  :root[data-design="studio"] .result-lines { justify-items: center; text-align: center; }
  :root[data-design="studio"] .intro-go { justify-self: center; text-align: center; }
  :root[data-design="studio"] .intro-cards .icard { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { :root[data-design="studio"] .chip:hover:not(:disabled) { transform: none; } }

/* ==========================================================================
   SITE: the portal's pages (landing, sign-in, join, account, admin), rendered
   by server/pages.mjs on top of the core stylesheets.
   ========================================================================== */
.site .brand a { color: inherit; text-decoration: none; }
.site .site-tab { text-decoration: none; }
.site .site-signout { display: inline; }
.site .site-signout .tab { cursor: pointer; }
.site-main { padding-top: var(--space-30); }
.site-hero { text-align: center; padding: var(--space-30) 0 var(--space-40); }
.site-tagline { margin: 0 0 var(--space-16); font: 500 var(--fs-190)/var(--lh-120) var(--heading, var(--serif)); color: var(--ink); text-wrap: balance; }
.site-lead { margin: 0 auto; max-width: 40rem; font-size: var(--fs-110); color: var(--ink-2); text-wrap: pretty; }
.site-cta { margin: var(--space-26) 0 0; display: flex; gap: var(--space-12); justify-content: center; flex-wrap: wrap; }
.site h2 { font: 500 var(--fs-150)/var(--lh-125) var(--heading, var(--serif)); margin: 0 0 var(--space-16); }
.site h3 { font: 500 var(--fs-118)/var(--lh-125) var(--heading, var(--serif)); margin: 0 0 var(--space-6); }
.site-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-14); }
.site-card { border: 1px solid var(--line); border-radius: var(--radius-10); padding: var(--space-18) var(--space-20) var(--space-20); display: flex; flex-direction: column; gap: var(--space-8); }
.site-card p { margin: 0 0 var(--space-10); color: var(--ink-2); flex: 1; }
.site-card.is-soon { opacity: 0.7; }
.site-card .tag { align-self: flex-start; }
.site-narrow { max-width: 32rem; margin: 0 auto; }
.site-form { display: flex; flex-direction: column; gap: var(--space-10); margin: var(--space-16) 0; }
.site-form label { color: var(--ink-2); font-size: var(--fs-92); }
.site-form input { font: inherit; padding: var(--space-8) var(--space-12); border: 1px solid var(--line); border-radius: var(--radius-8); background: var(--felt); color: var(--ink); }
.site-form input:focus-visible { outline: 1px solid var(--brass); box-shadow: var(--focus-halo); }
.site-inline { flex-direction: row; flex-wrap: wrap; align-items: center; }
.site-table { width: 100%; border-collapse: collapse; margin-top: var(--space-16); font-size: var(--fs-95); }
.site-table th, .site-table td { text-align: left; padding: var(--space-8) var(--space-10); border-bottom: 1px solid var(--rule-soft, var(--line)); }
.site-table th { color: var(--ink-2); font-weight: 400; }
.site a.btn, .site .tabs a { text-decoration: none; background-image: none; }

/* the owner's colours (dev/design/tokens.json) */
:root, :root[data-design], :root:not([data-theme="light"]), :root[data-theme] { --c-bass: #273972; --c-bsn: #1A1838; --c-cb: #300B13; --c-cl: #34336A; --c-fl: #A3A8C4; --c-guitar: #295B38; --c-hn: #C8B489; --c-ob: #535482; --c-pad: #754863; --c-piano: #4A326C; --c-tba: #5B4C20; --c-tbn: #897648; --c-tpt: #F7E6CA; --c-vc: #561320; --c-vla: #7D1E2B; --c-vln1: #B4554C; --c-vln2: #9E3438; }