/* ------------------------------------------------------------------------- *
   TYPE / TEACHER - ear training for better music prompts
   DR / Warp design language, shared 1:1 with type-website (styles.css) and
   the Flutter app (app/lib/theme/dr.dart). Source aesthetic: Designers
   Republic + Warp Records as a fictional Japanese audio-conglomerate product
   catalog. Black stock + red ink + signal white + electric cyan/magenta/
   safety swatches. Hard rules, hard 0-blur drop-shadows, faux regulatory
   authority.

   Display: Barlow Condensed. Body: Inter. Chrome/telemetry: Space Mono.

   Base tokens + chrome (corporate bar, masthead, sections, cues, footer) are
   carried over verbatim from the website so the offering reads as the same
   product. Everything under "TEACHER MODULES" down is new.
 * ------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* DR palette - exact match to class DR in dr.dart */
  --paper: #0A0A0A;
  --paper-hi: #1A1A1A;
  --module: #141414;
  --ink: #FF152E;
  --ink-faint: #E08A92;
  --body: #EDEAE0;
  --body-faint: #A8A49A;
  --warp: #FFFFFF;
  --warp-deep: #D8D8D8;
  --cyan: #7FD8F0;
  --magenta: #E91A8C;
  --safety-yellow: #F5D300;
  --safety-green: #00A65E;
  --on-ink: #0A0A0A;

  /* spacing grid (DRGrid) */
  --tick: 4px;
  --nib: 8px;
  --pica: 12px;
  --line: 16px;
  --em: 24px;
  --leaf: 32px;
  --page: 48px;

  /* borders (DRBorders) */
  --b-hair: 0.75px;
  --b-thin: 1px;
  --b-thick: 1.5px;
  --b-rule: 2px;

  /* hard 0-blur drop-shadows (DRShadow) */
  --shadow-hard: 6px 6px 0 0 var(--paper);
  --shadow-hard-sm: 3px 3px 0 0 var(--paper);

  --col: 1000px;

  /* per-lesson accent, overridden by .acc-* on the module */
  --acc: var(--cyan);
  --acc-on: var(--module);
}

::selection { background: var(--ink); color: var(--on-ink); }
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
}
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

.dr-inner { max-width: var(--col); margin: 0 auto; padding-left: var(--em); padding-right: var(--em); }
@media (max-width: 600px) { .dr-inner { padding-left: var(--line); padding-right: var(--line); } }

/* ---------- corporate bar ---------- */
.dr-corporate {
  background: var(--ink);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.5px; color: var(--on-ink); text-transform: uppercase;
}
.dr-corporate .dr-inner { display: flex; align-items: center; gap: var(--line); padding-top: var(--tick); padding-bottom: var(--tick); }
.dr-corporate .corp-mark { font-weight: 700; }
.dr-corporate .corp-mark .w { color: var(--warp); }
.dr-corporate .corp-spacer { flex: 1; }
.dr-corporate .corp-reg { color: var(--cyan); }
@media (max-width: 600px) { .dr-corporate .corp-reg { display: none; } }

/* ---------- masthead ---------- */
.dr-masthead { background: var(--paper-hi); border-bottom: var(--b-rule) solid var(--ink); }
.dr-masthead .dr-inner { display: flex; align-items: flex-start; gap: var(--nib); padding-top: var(--line); padding-bottom: var(--pica); }
.mh-titles { flex: 1; min-width: 0; }
.dr-masthead-title a { color: inherit; text-decoration: none; border-bottom: none; }
.dr-masthead-title a:hover { color: var(--warp); }
.dr-masthead-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 18px; line-height: 1;
  letter-spacing: 0.7px; text-transform: uppercase; color: var(--ink); margin: 0;
}
.dr-masthead-edition { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.dr-doccode { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--ink); white-space: nowrap; padding-top: 2px; }
.dr-doccode::before, .dr-doccode::after { content: "\266E"; color: var(--ink); margin: 0 6px; font-weight: 400; }

/* ---------- canvas ---------- */
.dr-canvas { padding-top: var(--line); padding-bottom: var(--page); }

/* ---------- hero strap ---------- */
.dr-strap { display: flex; align-items: center; gap: var(--nib); margin-bottom: var(--line); }
.dr-strap-num { background: var(--warp); color: var(--ink); font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 2px; padding: 2px var(--nib); }
.dr-strap-text { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .dr-strap { align-items: flex-start; }
  .dr-strap-text { white-space: normal; overflow: visible; text-overflow: unset; letter-spacing: 1.5px; line-height: 1.4; }
}

/* ---------- wordmark ---------- */
.dr-wordmark {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: clamp(56px, 12vw, 96px);
  line-height: 0.9; letter-spacing: -0.01em; color: var(--ink); text-transform: uppercase;
  display: flex; align-items: baseline; flex-wrap: wrap;
}
.dr-wordmark .slash { color: var(--warp); font-weight: 500; margin: 0 0.12em; }
.dr-wordmark .reg { font-family: 'Inter', sans-serif; font-size: 0.18em; margin-left: 0.04em; align-self: flex-start; }
.dr-wordmark .sup { font-family: 'Space Mono', monospace; font-size: 0.12em; font-weight: 700; color: var(--cyan); letter-spacing: 0.04em; margin-left: 0.06em; align-self: flex-start; }

.dr-valueprop { font-size: 15px; color: var(--body); letter-spacing: 0.05px; margin: var(--line) 0 0; }

/* ---------- dividers ---------- */
.dr-rule  { height: var(--b-rule); background: var(--ink); border: 0; margin: var(--em) 0; }
.dr-solid { height: 1px; background: var(--ink); border: 0; margin: var(--pica) 0; }

/* ---------- section header ---------- */
/* ---------- section tabs ---------- */
.tt-tabs { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: var(--nib); align-items: center; background: var(--paper); border-bottom: var(--b-rule) solid var(--ink); padding: var(--nib) 0; margin: 0 0 var(--line); }
.tt-tab { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-faint); background: transparent; border: var(--b-thin) solid var(--ink-faint); padding: 5px var(--pica); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 100ms ease, color 100ms ease; }
.tt-tab .tt-tab-num { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; opacity: 0.8; }
.tt-tab:hover { color: var(--ink); border-color: var(--ink); }
.tt-tab.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.tt-tab.on:hover { color: var(--on-ink); }
.tt-tab:focus-visible { outline: var(--b-thick) solid var(--warp); outline-offset: 2px; }
.tt-tab-panel { display: none; }
.tt-tab-panel.active { display: block; animation: tt-tab-in 160ms ease-out; }
@keyframes tt-tab-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .tt-tab { font-size: 14px; padding: 4px 8px; } .tt-tabs { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .tt-tab-panel.active { animation: none; } }

.dr-section { display: flex; align-items: center; gap: var(--pica); margin: var(--em) 0 var(--line); }
.dr-section-num { background: var(--ink); color: var(--paper); font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 18px; line-height: 1; letter-spacing: 0.7px; padding: var(--tick) var(--pica); }
.dr-section-title { flex: 1; font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: 0.96px; text-transform: uppercase; color: var(--ink); margin: 0; }
.dr-section-meta { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }

/* ---------- buttons (cues) ---------- */
.dr-cue {
  display: inline-flex; align-items: center; gap: 2px; border: var(--b-thin) solid var(--ink);
  padding: var(--nib) var(--pica); font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink); text-decoration: none;
  background: transparent; cursor: pointer; transition: background 110ms ease, color 110ms ease;
}
.dr-cue:hover { background: var(--ink); color: var(--paper); }
.dr-cue.back .chev { font-size: 14px; line-height: 1; }
.dr-cue-row { display: flex; flex-wrap: wrap; gap: var(--pica); align-items: center; }
.dr-cue.primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); font-size: 12px; letter-spacing: 2px; padding: var(--pica) var(--em); }
.dr-cue.primary:hover { background: var(--warp); color: var(--ink); border-color: var(--warp); }

/* ---------- callout ---------- */
.dr-callout { border: var(--b-thin) solid var(--ink); background: var(--paper-hi); margin: var(--line) 0; }
.dr-callout-head { background: var(--ink); padding: var(--tick) var(--pica); font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; }
.dr-callout-head.tone-warp { color: var(--warp); }
.dr-callout-head.tone-cyan { color: var(--cyan); }
.dr-callout-body { padding: var(--pica); font-size: 13px; color: var(--body); }
.dr-tag { display: inline-block; background: var(--cyan); color: var(--on-ink); padding: 1px 7px; margin-right: var(--nib); letter-spacing: 2px; }

/* ---------- data rows ---------- */
.dr-datarows { border: var(--b-thin) solid var(--ink); padding: var(--pica) var(--line); }
.dr-datarow { display: flex; gap: var(--nib); margin-bottom: 4px; font-family: 'Space Mono', monospace; font-size: 10px; text-transform: uppercase; }
.dr-datarow:last-child { margin-bottom: 0; }
.dr-datarow .k { width: 150px; flex-shrink: 0; font-size: 9px; color: var(--ink-faint); }
.dr-datarow .v { font-weight: 700; color: var(--body); }

/* ========================================================================= *
   TEACHER MODULES - new components, built on the DR tokens above
 * ========================================================================= */

/* per-module accent binding.
   --acc is the fill color (dark/white text sits on it). --acc-text is the same
   hue tuned for small text ON the dark stock, so it clears WCAG AA contrast.
   magenta as a fill is fine but as 12px text on #141414 it falls under 4.5:1,
   hence the lighter --acc-text override. */
.acc-cyan    { --acc: var(--cyan);          --acc-on: var(--module); --acc-text: var(--cyan); }
.acc-magenta { --acc: var(--magenta);       --acc-on: var(--warp);   --acc-text: #FF66B8; }
.acc-green   { --acc: var(--safety-green);  --acc-on: var(--warp);   --acc-text: #19C778; }
.acc-yellow  { --acc: var(--safety-yellow); --acc-on: var(--ink);    --acc-text: var(--safety-yellow); }

/* index of lessons (catalog before you dive in) */
.tt-index { border: var(--b-thick) solid var(--ink); background: var(--module); }
.tt-index-row { display: flex; align-items: stretch; border-top: var(--b-hair) solid var(--ink); text-decoration: none; color: inherit; transition: background 120ms ease; }
.tt-index-row:first-child { border-top: 0; }
.tt-index-row:hover { background: var(--paper-hi); }
.tt-index-num { flex-shrink: 0; width: 52px; display: flex; align-items: center; justify-content: center; background: var(--acc); color: var(--acc-on); font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 500; line-height: 1; }
.tt-index-main { flex: 1; min-width: 0; padding: var(--nib) var(--line); display: flex; flex-direction: column; justify-content: center; }
.tt-index-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 22px; line-height: 1; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink); }
.tt-index-sub { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-faint); margin-top: 3px; }
.tt-index-go { flex-shrink: 0; display: flex; align-items: center; padding: 0 var(--line); font-family: 'Space Mono', monospace; font-size: 16px; color: var(--ink-faint); }
.tt-index-row:hover .tt-index-go { color: var(--ink); }

/* the module shell */
.lesson { border: var(--b-thick) solid var(--ink); background: var(--module); margin: var(--em) 0; scroll-margin-top: var(--line); }

.lesson-head { display: flex; align-items: stretch; border-bottom: var(--b-thick) solid var(--ink); }
.lesson-rail { flex-shrink: 0; width: 64px; display: flex; align-items: center; justify-content: center; background: var(--acc); color: var(--acc-on); font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 46px; line-height: 1; }
.lesson-headmain { flex: 1; min-width: 0; padding: var(--pica) var(--line); display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.lesson-toprow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pica); flex-wrap: wrap; }
.lesson-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 38px; line-height: 0.9; letter-spacing: -0.4px; text-transform: uppercase; color: var(--ink); margin: 0; }
.lesson-flow { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; padding: 3px var(--nib); background: var(--acc); color: var(--acc-on); }
.lesson-strap { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--body-faint); }

.lesson-body { padding: var(--line); }
.lesson-intro { font-size: 14px; line-height: 1.6; color: var(--body); max-width: 68ch; margin: 0 0 var(--line); }
.lesson-intro strong { color: var(--ink); font-weight: 700; }

/* sub-block label, used above demo / vocab / etc. */
.tt-block { margin-top: var(--em); }
.tt-block:first-child { margin-top: 0; }
.tt-label { display: flex; align-items: center; margin-bottom: var(--pica); }
.tt-label .txt { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- the A/B demo player ---------- */
.demo { border: var(--b-thin) solid var(--ink); background: var(--paper-hi); }
.demo-mech { padding: var(--nib) var(--pica); font-size: 12px; color: var(--body-faint); border-bottom: var(--b-hair) solid var(--ink); }
.demo-mech strong { color: var(--acc-text, var(--acc)); font-weight: 700; }

.demo-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.preset {
  appearance: none; cursor: pointer; text-align: left; background: var(--module); color: var(--body);
  border: 0; border-right: var(--b-hair) solid var(--ink); border-bottom: var(--b-hair) solid var(--ink);
  padding: var(--pica); display: flex; flex-direction: column; gap: 6px; transition: background 110ms ease, transform 80ms ease;
  position: relative; min-height: 92px;
}
.preset:hover { background: var(--paper-hi); }
.preset:active { transform: translateY(1px); }
.preset .p-top { display: flex; align-items: center; gap: var(--nib); }
.preset .p-play { width: 22px; height: 22px; flex-shrink: 0; border: var(--b-thin) solid var(--acc); display: flex; align-items: center; justify-content: center; color: var(--acc); font-size: 10px; }
.preset .p-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 22px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; color: var(--body); }
.preset .p-listen { font-size: 12px; line-height: 1.4; color: var(--body-faint); }
.preset.playing { background: var(--acc); color: var(--acc-on); }
.preset.playing .p-name { color: var(--acc-on); }
.preset.playing .p-listen { color: var(--acc-on); opacity: 0.85; }
.preset.playing .p-play { border-color: var(--acc-on); color: var(--acc-on); }
.preset .p-meter { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--acc-on); }

.demo-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--pica); padding: var(--nib) var(--pica); border-top: var(--b-hair) solid var(--ink); flex-wrap: wrap; }
.demo-now { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-faint); }
.demo-now b { color: var(--acc-text, var(--acc)); }
.demo-stop { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); background: transparent; border: var(--b-thin) solid var(--ink); padding: 4px var(--nib); cursor: pointer; }
.demo-stop:hover { background: var(--ink); color: var(--paper); }

/* extra control row (sliders / toggles some lessons add) */
.demo-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--line); padding: var(--pica); border-top: var(--b-hair) solid var(--ink); }
.tt-ctrl { display: flex; flex-direction: column; gap: 4px; min-width: 140px; flex: 1; }
.tt-ctrl label { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-faint); display: flex; justify-content: space-between; }
.tt-ctrl label em { font-style: normal; color: var(--acc-text, var(--acc)); font-weight: 700; }
.tt-range { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: var(--ink); outline: none; }
.tt-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 18px; background: var(--acc); border: var(--b-thin) solid var(--paper); cursor: pointer; }
.tt-range::-moz-range-thumb { width: 14px; height: 18px; background: var(--acc); border: var(--b-thin) solid var(--paper); cursor: pointer; border-radius: 0; }
.tt-toggle { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 6px var(--pica); border: var(--b-thin) solid var(--ink); background: transparent; color: var(--body-faint); cursor: pointer; }
.tt-toggle.on { background: var(--acc); color: var(--acc-on); border-color: var(--acc); }

/* step grid (rhythm) */
.tt-steps-wrap { position: relative; border-top: var(--b-hair) solid var(--ink); }
.tt-steps { display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; padding: var(--pica); }
.tt-step { aspect-ratio: 1; border: var(--b-hair) solid var(--ink); background: var(--module); transition: background 60ms ease; }
.tt-step.beat { border-color: var(--ink-faint); }
.tt-step.k { background: var(--acc); }                 /* kick cell */
.tt-step.s { background: var(--warp); }                /* snare cell */
.tt-playhead { position: absolute; top: var(--pica); bottom: var(--pica); left: var(--pica); width: 2px; background: var(--ink); opacity: 0; pointer-events: none; }
@keyframes tt-sweep { from { left: var(--pica); } to { left: calc(100% - var(--pica)); } }

/* ---------- "in a real song" lens ---------- */
.song-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: var(--b-thick) solid var(--ink); background: var(--module); }
.song-chip { appearance: none; cursor: pointer; text-align: left; background: var(--module); color: var(--body); border: 0; border-right: var(--b-hair) solid var(--ink); border-bottom: var(--b-hair) solid var(--ink); padding: var(--pica); display: flex; flex-direction: column; gap: 3px; transition: background 110ms ease; }
.song-chip:hover { background: var(--paper-hi); }
.song-chip.active { background: var(--acc); color: var(--acc-on); }
.song-chip .sc-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 19px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; }
.song-chip .sc-artist { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-faint); }
.song-chip.active .sc-artist { color: var(--acc-on); opacity: 0.8; }

.song-view { margin-top: var(--line); }
.song-meta { border: var(--b-thin) solid var(--ink); border-bottom: 0; background: var(--paper-hi); padding: var(--pica) var(--line); }
.sm-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pica); flex-wrap: wrap; }
.sm-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 30px; line-height: 0.9; letter-spacing: -0.3px; text-transform: uppercase; color: var(--ink); }
.sm-artist { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-faint); }
.sm-tag { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; }
.song-aspects .preset:first-child { grid-column: 1 / -1; }

/* ---------- song build-up: hear it stack one layer at a time ---------- */
.sb { border: var(--b-thin) solid var(--ink); background: var(--paper-hi); }
.sb-play {
  position: relative; appearance: none; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: center; gap: var(--pica); padding: var(--pica);
  background: var(--module); color: var(--body); border: 0; border-bottom: var(--b-hair) solid var(--ink);
  transition: background 110ms ease;
}
.sb-play:hover { background: var(--paper-hi); }
.sb-play:active { transform: translateY(1px); }
.sb-ico { width: 26px; height: 26px; flex-shrink: 0; border: var(--b-thin) solid var(--acc); display: flex; align-items: center; justify-content: center; color: var(--acc); font-size: 11px; }
.sb-txt { display: flex; flex-direction: column; gap: 2px; }
.sb-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 22px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; color: var(--body); }
.sb-cap { font-size: 12px; color: var(--body-faint); }
.sb-play.playing { background: var(--acc); color: var(--acc-on); }
.sb-play.playing .sb-name { color: var(--acc-on); }
.sb-play.playing .sb-cap { color: var(--acc-on); opacity: 0.85; }
.sb-play.playing .sb-ico { border-color: var(--acc-on); color: var(--acc-on); }
.sb-play .p-meter { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--acc-on); }
.sb-stages { display: grid; grid-template-columns: repeat(4, 1fr); }
.sb-stage {
  display: flex; align-items: center; gap: var(--nib); padding: var(--nib) var(--pica);
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-faint); border-right: var(--b-hair) solid var(--ink);
  transition: background 90ms ease, color 90ms ease;
}
.sb-stage:last-child { border-right: 0; }
.sb-stage-num { width: 16px; height: 16px; flex-shrink: 0; border: var(--b-hair) solid var(--ink-faint); display: flex; align-items: center; justify-content: center; font-size: 9px; }
.sb-stage.on { background: var(--acc); color: var(--acc-on); }
.sb-stage.on .sb-stage-num { border-color: var(--acc-on); color: var(--acc-on); }
@media (max-width: 560px) {
  .sb-stages { grid-template-columns: 1fr 1fr; }
  .sb-stage:nth-child(2) { border-right: 0; }
  .sb-stage:nth-child(1), .sb-stage:nth-child(2) { border-bottom: var(--b-hair) solid var(--ink); }
}

/* ---------- prompt vocabulary chips ---------- */
.vocab { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--nib); }
.chip { border: var(--b-thin) solid var(--ink); background: var(--paper-hi); padding: var(--nib) var(--pica); }
.chip .term { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--acc-text, var(--acc)); text-transform: lowercase; }
.chip .mean { font-size: 12px; color: var(--body); margin-top: 3px; line-height: 1.4; }
.chip .eg { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--body-faint); margin-top: 5px; border-top: var(--b-hair) solid var(--ink); padding-top: 5px; }
.chip .eg::before { content: "\201C"; }
.chip .eg::after { content: "\201D"; }

/* ---------- before / after prompt ---------- */
.ba { border: var(--b-thin) solid var(--ink); }
.ba-row { display: grid; grid-template-columns: 80px 1fr; align-items: stretch; }
.ba-row + .ba-row { border-top: var(--b-hair) solid var(--ink); }
.ba-tag { display: flex; align-items: center; justify-content: center; font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.ba-row.weak .ba-tag { background: var(--paper-hi); color: var(--ink-faint); border-right: var(--b-hair) solid var(--ink); }
.ba-row.strong .ba-tag { background: var(--acc); color: var(--acc-on); border-right: var(--b-hair) solid var(--ink); }
.ba-text { padding: var(--nib) var(--pica); font-family: 'Space Mono', monospace; font-size: 13px; line-height: 1.5; color: var(--body); }
.ba-row.weak .ba-text { color: var(--body-faint); }
.ba-why { padding: var(--nib) var(--pica); border-top: var(--b-hair) solid var(--ink); background: var(--paper-hi); font-size: 12px; color: var(--body-faint); }
.ba-why b { color: var(--acc-text, var(--acc)); font-weight: 700; }

/* ---------- ear check quiz ---------- */
.quiz { border: var(--b-thin) solid var(--ink); background: var(--paper-hi); }
.quiz-q { padding: var(--pica); font-size: 14px; color: var(--body); font-weight: 600; border-bottom: var(--b-hair) solid var(--ink); }
.quiz-q .n { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--ink-faint); letter-spacing: 1px; display: block; margin-bottom: 4px; text-transform: uppercase; }
.quiz-opts { display: flex; flex-direction: column; }
.quiz-opt { appearance: none; cursor: pointer; text-align: left; background: var(--module); color: var(--body); border: 0; border-bottom: var(--b-hair) solid var(--ink); padding: var(--nib) var(--pica); font-size: 13px; display: flex; align-items: center; gap: var(--nib); transition: background 110ms ease; }
.quiz-opt:hover:not(:disabled) { background: var(--paper-hi); }
.quiz-opt .mk { width: 18px; height: 18px; flex-shrink: 0; border: var(--b-thin) solid var(--ink-faint); display: flex; align-items: center; justify-content: center; font-family: 'Space Mono', monospace; font-size: 10px; color: var(--ink-faint); }
.quiz-opt.correct { background: var(--safety-green); color: var(--warp); }
.quiz-opt.correct .mk { border-color: var(--warp); color: var(--warp); }
.quiz-opt.wrong { background: var(--ink); color: var(--paper); }
.quiz-opt.wrong .mk { border-color: var(--paper); color: var(--paper); }
.quiz-opt:disabled { cursor: default; }
.quiz-explain { padding: var(--nib) var(--pica); font-size: 12px; color: var(--body-faint); border-top: var(--b-hair) solid var(--ink); display: none; }
.quiz-explain.show { display: block; }
.quiz-explain b { color: var(--acc-text, var(--acc)); }

/* ---------- copy-prompt button + STUDIO hand-off ---------- */
.ba-row.strong { grid-template-columns: 80px 1fr auto; }
.ba-copy {
  align-self: stretch; border: 0; border-left: var(--b-hair) solid var(--ink); background: transparent;
  color: var(--acc-text, var(--acc)); font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; padding: 0 var(--pica); cursor: pointer; white-space: nowrap;
  transition: background 110ms ease, color 110ms ease;
}
.ba-copy:hover { background: var(--acc); color: var(--acc-on); }
.ba-copy.copied { background: var(--safety-green); color: var(--warp); }
.ba-handoff {
  border-top: var(--b-hair) solid var(--ink); padding: var(--nib) var(--pica);
  font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint);
}

/* ---------- blind ear-check drill ---------- */
.drill { border: var(--b-thin) solid var(--ink); background: var(--paper-hi); }
.drill-q { padding: var(--pica); font-size: 14px; color: var(--body); font-weight: 600; border-bottom: var(--b-hair) solid var(--ink); }
.drill-q .n { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--ink-faint); letter-spacing: 1px; display: block; margin-bottom: 4px; text-transform: uppercase; }
.drill-bar { display: flex; align-items: center; gap: var(--pica); padding: var(--pica); border-bottom: var(--b-hair) solid var(--ink); flex-wrap: wrap; }
.tt-drill-btn {
  display: inline-flex; align-items: center; gap: var(--nib); border: var(--b-thin) solid var(--acc); background: transparent;
  color: var(--acc-text, var(--acc)); font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; padding: var(--nib) var(--line); cursor: pointer; transition: background 110ms ease, color 110ms ease;
}
.tt-drill-btn .dch { font-size: 10px; }
.tt-drill-btn:hover { background: var(--acc); color: var(--acc-on); }
.tt-drill-btn.playing { background: var(--acc); color: var(--acc-on); }
.drill-score { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-faint); }
.drill-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.tt-drill-opt {
  appearance: none; cursor: pointer; text-align: left; background: var(--module); color: var(--body); border: 0;
  border-right: var(--b-hair) solid var(--ink); border-bottom: var(--b-hair) solid var(--ink);
  padding: var(--nib) var(--pica); font-size: 13px; display: flex; align-items: center; gap: var(--nib); transition: background 110ms ease;
}
.tt-drill-opt:hover:not(:disabled) { background: var(--paper-hi); }
.tt-drill-opt .mk { width: 18px; height: 18px; flex-shrink: 0; border: var(--b-thin) solid var(--ink-faint); display: flex; align-items: center; justify-content: center; font-family: 'Space Mono', monospace; font-size: 10px; color: var(--ink-faint); }
.tt-drill-opt:disabled { cursor: default; opacity: 0.55; }
.tt-drill-opt.correct { background: var(--safety-green); color: var(--warp); opacity: 1; }
.tt-drill-opt.correct .mk { border-color: var(--warp); color: var(--warp); }
.tt-drill-opt.wrong { background: var(--ink); color: var(--paper); opacity: 1; }
.tt-drill-opt.wrong .mk { border-color: var(--paper); color: var(--paper); }
.drill-explain { padding: var(--nib) var(--pica); font-size: 12px; color: var(--body-faint); border-top: var(--b-hair) solid var(--ink); display: none; }
.drill-explain.show { display: block; }
.drill-explain.ok { border-left: var(--b-rule) solid var(--safety-green); }
.drill-explain.no { border-left: var(--b-rule) solid var(--ink); }
.drill-explain b { color: var(--acc-text, var(--acc)); }

/* ---------- index progress (trained meter + per-row ticks) ---------- */
.tt-progress { display: flex; align-items: center; gap: var(--pica); padding: var(--nib) var(--line); border-bottom: var(--b-hair) solid var(--ink); background: var(--paper-hi); }
.tt-progress-label { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.tt-progress-bar { flex: 1; height: 4px; background: var(--module); border: var(--b-hair) solid var(--ink); }
.tt-progress-fill { display: block; height: 100%; width: 0; background: var(--safety-green); transition: width 240ms ease; }
.tt-index-tick { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 22px; font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; color: var(--safety-green); }
.tt-index-row.trained .tt-index-name { color: var(--body); }

/* ---------- accessibility: visible keyboard focus ---------- */
.preset:focus-visible,
.quiz-opt:focus-visible,
.song-chip:focus-visible,
.tt-toggle:focus-visible,
.demo-stop:focus-visible,
.ba-copy:focus-visible,
.tt-drill-btn:focus-visible,
.tt-drill-opt:focus-visible,
.tt-index-row:focus-visible,
.dr-cue:focus-visible,
.dr-masthead-title a:focus-visible {
  outline: var(--b-thick) solid var(--warp);
  outline-offset: 2px;
}
.tt-range:focus-visible { outline: var(--b-thick) solid var(--warp); outline-offset: 4px; }

/* ---------- sound visualizer (multitrack + master scope) ---------- */
.viz { border: var(--b-thick) solid var(--ink); background: var(--module); }
.viz-row { display: flex; align-items: stretch; border-bottom: var(--b-hair) solid var(--ink); transition: opacity 120ms ease; }
.viz-row.silent { opacity: 0.38; }
.viz-head { flex-shrink: 0; width: 134px; display: flex; align-items: center; justify-content: space-between; gap: var(--nib); padding: var(--nib) var(--pica); border-right: var(--b-hair) solid var(--ink); }
.viz-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; color: var(--lc); }
.viz-ms { display: flex; gap: 3px; flex-shrink: 0; }
.viz-btn { width: 20px; height: 20px; border: var(--b-thin) solid var(--ink-faint); background: transparent; color: var(--ink-faint); font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; cursor: pointer; padding: 0; }
.viz-btn.mute.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.viz-btn.solo.on { background: var(--safety-yellow); color: var(--on-ink); border-color: var(--safety-yellow); }
.viz-lane { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; padding: var(--nib); }
.viz-cell { aspect-ratio: 1; border: var(--b-hair) solid var(--ink); background: var(--paper); }
.viz-cell.beat { border-color: var(--ink-faint); }
.viz-cell.hit { background: var(--lc); opacity: 0.5; }
.viz-cell.now { box-shadow: inset 0 0 0 2px var(--warp); }
.viz-cell.hit.fire { opacity: 1; animation: viz-fire 280ms ease-out; }
@keyframes viz-fire { from { filter: brightness(2); } to { filter: brightness(1); } }
.viz-scope { border-top: var(--b-thick) solid var(--ink); padding: var(--nib) var(--pica) var(--pica); background: var(--paper); }
.viz-scope-label { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.viz-canvas { display: block; width: 100%; height: 96px; color: var(--ink); }
.viz-foot { display: flex; align-items: center; gap: var(--line); padding: var(--nib) var(--pica); border-top: var(--b-hair) solid var(--ink); flex-wrap: wrap; }
.viz-play { display: inline-flex; align-items: center; gap: var(--nib); border: var(--b-thin) solid var(--ink); background: var(--ink); color: var(--on-ink); font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: var(--nib) var(--line); cursor: pointer; }
.viz-play .dch { font-size: 10px; }
.viz-play.on { background: var(--warp); color: var(--ink); border-color: var(--warp); box-shadow: 0 0 16px -4px var(--warp); }
.viz-meta { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-faint); }
.viz-btn:focus-visible, .viz-play:focus-visible { outline: var(--b-thick) solid var(--warp); outline-offset: 2px; }

/* transport: seek bar + time */
.viz-transport { display: flex; align-items: center; gap: var(--pica); padding: var(--nib) var(--pica); border-top: var(--b-hair) solid var(--ink); }
.viz-seek { flex: 1; height: 9px; background: var(--module); border: var(--b-thin) solid var(--ink); cursor: pointer; position: relative; touch-action: none; }
.viz-seek-fill { position: relative; height: 100%; width: 0; background: var(--ink); pointer-events: none; box-shadow: 0 0 8px -1px var(--ink); }
.viz-seek-fill::after { content: ""; position: absolute; right: -1px; top: 50%; width: 3px; height: 15px; transform: translateY(-50%); background: var(--warp); box-shadow: 0 0 7px 0 var(--ink); }
.viz-time { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1px; color: var(--body-faint); white-space: nowrap; min-width: 82px; text-align: right; }
/* volume */
.viz-vol { display: flex; align-items: center; gap: var(--nib); }
.viz-vol-ico { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: var(--ink-faint); }
.viz-vol-range { width: 84px; }

/* stage tile: a lit niche. resting depth via inset floor shadow; hover pulls
   the instrument's own colored spotlight up; solo locks it on with an outer glow. */
.stage-tile {
  cursor: pointer;
  box-shadow: inset 0 -22px 34px -26px rgba(0,0,0,0.95);
  transition: box-shadow 160ms ease, transform 120ms cubic-bezier(0.1, 0.8, 0.3, 1), background 300ms ease;
  z-index: 1;
  position: relative;
  transform: rotateX(calc(var(--tilt-y, 0) * -12deg)) rotateY(calc(var(--tilt-x, 0) * 12deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.stage-tile:hover { box-shadow: inset 0 0 64px -12px color-mix(in srgb, currentColor 24%, transparent), inset 0 -22px 34px -26px rgba(0,0,0,0.95); }
.stage-tile.soloed { box-shadow: inset 0 0 0 2px currentColor, inset 0 0 52px -14px color-mix(in srgb, currentColor 42%, transparent), inset 0 -22px 34px -26px rgba(0,0,0,0.95), 0 0 22px -8px currentColor; z-index: 2; }
/* a soft overhead key light across the whole rack */
.viz-stage {
  position: relative;
  overflow: hidden;
  background: radial-gradient(130% 78% at 50% -6%, rgba(255,255,255,0.06), transparent 56%);
  transition: background 500ms ease;
  will-change: transform, filter;
}
/* instrument + label sit above the lighting layers */
.stage-tile .stage-svg, .stage-tile .stage-label { position: relative; z-index: 1; }
/* reactive colored bloom behind the instrument on every hit: a tight core plus a
   wide halo, blended additively so overlapping hits stack into real light. */
.stage-tile::before { content: ""; position: absolute; inset: -1px; z-index: 0; pointer-events: none; mix-blend-mode: screen; filter: blur(1px);
  background: radial-gradient(circle at 50% 46%, currentColor, transparent 38%), radial-gradient(circle at 50% 46%, currentColor, transparent 64%); opacity: 0; }
.stage-tile.hit::before { animation: viz-glow 460ms ease-out; }
@keyframes viz-glow { 0% { opacity: 0; } 14% { opacity: 0.85; } 100% { opacity: 0; } }
/* soft contact shadow grounding each instrument */
.stage-tile::after { content: ""; position: absolute; left: 50%; bottom: 15%; width: 54%; height: 9px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 72%); z-index: 0; pointer-events: none; }

@media (max-width: 600px) { .viz-head { width: 96px; } .viz-name { font-size: 13px; } .viz-vol-range { width: 60px; } .viz-time { min-width: 72px; } }

/* ---------- visualizer: view toggle ---------- */
.viz-top { display: flex; align-items: center; gap: var(--nib); padding: var(--nib) var(--pica); border-bottom: var(--b-hair) solid var(--ink); }
.viz-top-label { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-faint); margin-right: var(--tick); }
.viz-top-spacer { flex: 1 1 auto; }

/* half labels: signpost the two halves (live audio stage vs midi composition map) */
.viz-half, .struct-half { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.viz-half em, .struct-half em { font-style: normal; font-weight: 400; letter-spacing: 1px; text-transform: none; color: var(--ink-faint); margin-left: 8px; }
.struct-half { padding: var(--nib) var(--pica); border-bottom: var(--b-hair) solid var(--ink); display: flex; align-items: center; flex-wrap: wrap; row-gap: 5px; white-space: normal; }
.struct-maptoggle { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: auto; justify-content: flex-end; }
.struct-mapbtn { font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); background: transparent; border: var(--b-thin) solid var(--ink-faint); padding: 2px 7px; cursor: pointer; }
.struct-mapbtn.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.struct-mapbtn:focus-visible { outline: var(--b-thin) solid var(--warp); outline-offset: 2px; }
.viz-vbtn { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px var(--pica); border: var(--b-thin) solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.viz-vbtn.on { background: var(--ink); color: var(--paper); }
.viz-vbtn:focus-visible { outline: var(--b-thick) solid var(--warp); outline-offset: 2px; }

/* ---------- visualizer: view switching (stage / grid / spectrum / freqmap) ---------- */
.viz-stage { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.viz-stage, .viz-grid, .viz-spectrum, .viz-freqmap { display: none; }
.viz.view-stage .viz-stage { display: grid; }
.viz.view-grid .viz-grid { display: block; }
.viz.view-spectrum .viz-spectrum { display: block; }
.viz.view-freqmap .viz-freqmap { display: block; }

/* spectrum view: live scrolling spectrogram of the mix */
.viz-spectrum { position: relative; height: 232px; border-bottom: var(--b-hair) solid var(--ink); background: #0a0a0a; }
.viz-spec-canvas { display: block; width: 100%; height: 100%; }
.viz-spec-lab { position: absolute; left: 4px; transform: translateY(-50%); font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700; letter-spacing: 0.5px; color: rgba(255,255,255,0.55); text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; }

/* freq-map view: static "who owns which band" occupancy + clash */
.viz-freqmap { border-bottom: var(--b-hair) solid var(--ink); background: #0d0d0d; }
.viz-freqmap-label { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-faint); padding: var(--nib) var(--pica) 0; }
.viz-freqmap-canvas { display: block; width: 100%; height: 220px; }
.stage-tile { position: relative; border-right: var(--b-hair) solid var(--ink); border-bottom: var(--b-hair) solid var(--ink); padding: var(--nib) var(--nib) var(--pica); display: flex; flex-direction: column; align-items: center; gap: 2px;
  background:
    radial-gradient(86% 56% at 50% 26%, color-mix(in srgb, currentColor 9%, transparent), transparent 72%),
    linear-gradient(180deg, #181818 0%, #111 50%, #0b0b0b 70%, rgba(255,255,255,0.05) 70.4%, #0d0d0d 71%, #131313 100%); }
.stage-svg { width: 100%; max-width: 150px; aspect-ratio: 1; display: block; overflow: visible; }
.stage-label { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lc, currentColor); }
.stage-label { color: currentColor; }

/* Per-instrument character animations: each hit moves the instrument the way it
   actually makes its sound, re-triggered per hit so they compound. */
.stage-tile { perspective: 520px; }
.stage-svg { transform-style: preserve-3d; transform-origin: 50% 62%; will-change: transform; }
.stage-svg .striker, .stage-svg .head, .stage-svg .cone, .stage-svg .top, .stage-svg .wires, .stage-svg .sweep, .stage-svg .screen, .stage-svg .wave { transform-box: fill-box; transform-origin: center; }

@keyframes viz-strike { 0% { transform: translate(0,0); } 35% { transform: translate(var(--sx,0), var(--sy,0)); } 100% { transform: translate(0,0); } }
.stage-tile.hit .striker { animation: viz-strike 180ms ease-out; }

/* cowbell: a metallic 3D pop toward you */
@keyframes viz-pop3d {
  0% { transform: translateZ(0) scale(1) rotateX(0deg) rotateY(0deg); }
  28% { transform: translateZ(46px) scale(1.13) rotateX(-15deg) rotateY(11deg); }
  58% { transform: translateZ(12px) scale(1.04) rotateX(6deg) rotateY(-5deg); }
  100% { transform: translateZ(0) scale(1) rotateX(0deg) rotateY(0deg); }
}
.stage-tile.inst-cowbell.hit .stage-svg { animation: viz-pop3d 380ms ease-out; }

/* kick: the head squashes in and the shell recoils */
@keyframes viz-thud { 0% { transform: scale(1); } 22% { transform: scale(1.1, 0.84); } 50% { transform: scale(0.97, 1.06); } 100% { transform: scale(1); } }
@keyframes viz-kick { 0% { transform: translateZ(0) scale(1); } 30% { transform: translateZ(20px) scale(1.05); } 100% { transform: translateZ(0) scale(1); } }
.stage-tile.inst-kick.hit .head { animation: viz-thud 220ms cubic-bezier(.2,.8,.3,1); }
.stage-tile.inst-kick.hit .stage-svg { animation: viz-kick 220ms ease-out; }

/* snare: a sharp crack and the wires rattle */
@keyframes viz-crack { 0%,100% { transform: translate(0,0); } 15% { transform: translate(-2px,-1px); } 30% { transform: translate(2px,1px); } 45% { transform: translate(-1.5px,0); } 60% { transform: translate(1px,0); } 80% { transform: translate(-0.5px,0); } }
@keyframes viz-rattle { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-1.5px); } 40% { transform: translateX(1.5px); } 60% { transform: translateX(-1px); } 80% { transform: translateX(0.8px); } }
.stage-tile.inst-snare.hit .stage-svg { animation: viz-crack 150ms ease-out; }
.stage-tile.inst-snare.hit .wires { animation: viz-rattle 180ms linear; }

/* hats: the top cymbal drops to clash and the brass shimmers */
@keyframes viz-hatdrop { 0% { transform: translateY(0) rotate(0); } 30% { transform: translateY(6px) rotate(-1.5deg); } 60% { transform: translateY(-2px) rotate(0.8deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes viz-shimmer { 0% { filter: brightness(1); } 12% { filter: brightness(1.9); } 40% { filter: brightness(1.2); } 100% { filter: brightness(1); } }
.stage-tile.inst-hats.hit .top { animation: viz-hatdrop 200ms ease-out; }
.stage-tile.inst-hats.hit .stage-svg { animation: viz-shimmer 240ms ease-out; }

/* 808: the cone pushes air toward you, heavy */
@keyframes viz-pump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes viz-push { 0% { transform: translateZ(0) scale(1); } 35% { transform: translateZ(34px) scale(1.08); } 100% { transform: translateZ(0) scale(1); } }
.stage-tile.inst-bass.hit .cone { animation: viz-pump 300ms cubic-bezier(.2,.7,.3,1); }
.stage-tile.inst-bass.hit .stage-svg { animation: viz-push 320ms ease-out; }

/* synth: the screen flares and the module swells as it holds notes */
@keyframes viz-syn { 0% { transform: scale(1); } 30% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes viz-syn-screen { 0% { filter: brightness(1); } 14% { filter: brightness(2.6); } 100% { filter: brightness(1); } }
.stage-tile.inst-synth.hit .stage-svg { animation: viz-syn 240ms ease-out; }
.stage-tile.inst-synth.hit .screen, .stage-tile.inst-synth.hit .wave { animation: viz-syn-screen 260ms ease-out; }

/* fx: the riser sweeps upward and flashes */
@keyframes viz-fx { 0% { transform: translateY(0); opacity: 1; } 42% { transform: translateY(-9px); opacity: 0.5; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes viz-fx-flash { 0% { filter: brightness(1); } 18% { filter: brightness(2.2); } 100% { filter: brightness(1); } }
.stage-tile.inst-fx.hit .sweep { animation: viz-fx 320ms ease-out; }
.stage-tile.inst-fx.hit .stage-svg { animation: viz-fx-flash 320ms ease-out; }

/* muted / not-soloed instruments fade back */
.stage-tile.dimmed { opacity: 0.32; }

/* vibration rings, sized per instrument (heavy + slow for the 808, fast for hats) */
.spawn-ring { fill: none; stroke: currentColor; stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; filter: drop-shadow(0 0 3px currentColor); animation: viz-spawn 600ms ease-out forwards; }
@keyframes viz-spawn { 0% { transform: scale(0.5); opacity: 0.85; } 100% { transform: scale(2.7); opacity: 0; } }
.inst-bass .spawn-ring { stroke-width: 3; animation: viz-spawn-big 760ms ease-out forwards; }
@keyframes viz-spawn-big { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(3.4); opacity: 0; } }
.inst-hats .spawn-ring { animation: viz-spawn-fast 380ms ease-out forwards; }
@keyframes viz-spawn-fast { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(2.1); opacity: 0; } }

/* stem-levels grid: a cell lit by its band's live energy, with a soft bloom */
.viz-cell.lit { background: var(--lc); box-shadow: 0 0 7px -1px var(--lc); }

@media (prefers-reduced-motion: reduce) { .stage-tile .stage-svg, .stage-tile .striker, .stage-tile .head, .stage-tile .cone, .stage-tile .top, .stage-tile .wires, .stage-tile::before, .spawn-ring { animation-duration: 1ms !important; } }

/* ---------- song structure (MIDI piano roll + arrangement) ---------- */
.struct { border: var(--b-thick) solid var(--ink); background: var(--module); }
.struct-facts { display: flex; flex-wrap: wrap; gap: var(--nib); padding: var(--nib) var(--pica); border-bottom: var(--b-hair) solid var(--ink); }
.struct-fact { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--body-faint); border: var(--b-thin) solid var(--ink-faint); padding: 2px 6px; }
.struct-fact:first-child { color: var(--ink); border-color: var(--ink); }
.struct-export { display: inline-flex; gap: var(--nib); margin-left: auto; align-items: center; }
.struct-dl { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); background: transparent; border: var(--b-thin) solid var(--ink); padding: 2px 8px; cursor: pointer; }
.struct-dl:hover { background: var(--ink); color: var(--on-ink); }
.struct-dl:focus-visible { outline: var(--b-thin) solid var(--warp); outline-offset: 2px; }

/* arrangement: the song as named sections, sized by real length */
.struct-arr { position: relative; display: flex; height: 34px; border-bottom: var(--b-hair) solid var(--ink); }
.struct-seg { position: relative; min-width: 0; border-right: var(--b-hair) solid var(--ink); cursor: pointer; overflow: hidden; display: flex; align-items: center; padding: 0 8px; transition: filter 120ms ease; }
.struct-seg:last-child { border-right: 0; }
.struct-seg.i0 { background: rgba(127,216,240,0.10); }
.struct-seg.i1 { background: rgba(255,255,255,0.07); }
.struct-seg.i2 { background: rgba(233,26,140,0.16); }
.struct-seg:hover { filter: brightness(1.45); }
.struct-seg.on { box-shadow: inset 0 2px 0 0 var(--warp); }
.struct-seg-lab { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--body); white-space: nowrap; }
.struct-seg-t { font-family: 'Space Mono', monospace; font-size: 8px; color: var(--ink-faint); margin-left: 6px; }
.struct-arr-head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--warp); box-shadow: 0 0 8px var(--ink); pointer-events: none; }

/* piano roll + energy ribbon */
.struct-roll-wrap { position: relative; }
.struct-roll { display: block; width: 100%; height: 232px; cursor: crosshair; }
.struct-density { display: block; width: 100%; height: 44px; border-top: var(--b-hair) solid var(--ink); cursor: crosshair; }

/* transport */
.struct-transport { display: flex; align-items: center; gap: var(--pica); padding: var(--nib) var(--pica); border-top: var(--b-hair) solid var(--ink); }
.struct-seek { flex: 1; height: 9px; background: var(--module); border: var(--b-thin) solid var(--ink); cursor: pointer; position: relative; touch-action: none; }
.struct-seek-fill { position: relative; height: 100%; width: 0; background: var(--ink); box-shadow: 0 0 8px -1px var(--ink); pointer-events: none; }
.struct-seek-fill::after { content: ""; position: absolute; right: -1px; top: 50%; width: 3px; height: 15px; transform: translateY(-50%); background: var(--warp); box-shadow: 0 0 7px 0 var(--ink); }
.struct-time { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1px; color: var(--body-faint); white-space: nowrap; min-width: 92px; text-align: right; }

/* foot: play + legend + meta */
.struct-foot { display: flex; align-items: center; gap: var(--line); padding: var(--nib) var(--pica); border-top: var(--b-hair) solid var(--ink); flex-wrap: wrap; }
.struct-play { display: inline-flex; align-items: center; gap: var(--nib); border: var(--b-thin) solid var(--ink); background: var(--ink); color: var(--on-ink); font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: var(--nib) var(--line); cursor: pointer; }
.struct-play.on { background: var(--warp); color: var(--ink); border-color: var(--warp); box-shadow: 0 0 16px -4px var(--warp); }
.struct-play .dch { font-size: 10px; }
.struct-vol { display: flex; align-items: center; gap: var(--nib); }
.struct-vol-ico { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: var(--ink-faint); }
.struct-vol-range { width: 84px; }
.struct-legend { display: flex; gap: var(--pica); flex-wrap: wrap; }
.struct-leg { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--body-faint); display: inline-flex; align-items: center; gap: 5px; }
.struct-leg .sw { width: 10px; height: 10px; display: inline-block; }
.struct-leg em { color: var(--ink-faint); font-style: normal; }
.struct-meta { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-faint); margin-left: auto; }
.struct-play:focus-visible { outline: var(--b-thick) solid var(--warp); outline-offset: 2px; }
/* combined mode: the visualizer above is the master transport, so hide ours and
   seam the two boxes into one continuous module */
.struct.follow .struct-transport { display: none; }
.struct.struct-attached { border-top: 0; }

/* ---------- visualizer: phone layout ---------- */
@media (max-width: 600px) {
  .viz-stage { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
  .stage-svg { max-width: 96px; }
  .stage-label { font-size: 8px; letter-spacing: 1px; }
  .stage-tile { padding: var(--tick) var(--tick) var(--nib); }
  .viz-half em, .struct-half em { display: none; }
  .viz-top { flex-wrap: wrap; row-gap: var(--nib); }
  .struct-roll { height: 150px; }
  .viz-spectrum { height: 180px; }
  .struct-arr { height: 30px; }
  .struct-seg-lab { font-size: 11px; letter-spacing: 0.5px; }
  .struct-seg { padding: 0 5px; }
  .struct-facts { gap: 4px; }
  .struct-fact { padding: 2px 4px; }
  .struct-foot { flex-wrap: wrap; row-gap: var(--nib); }
  .struct-legend { gap: var(--nib); }
  .struct-meta, .viz-meta { display: none; }
}

/* ---------- module spec footer ---------- */
.lesson-specs { display: flex; flex-wrap: wrap; gap: var(--nib) var(--em); border-top: var(--b-thick) solid var(--ink); padding: var(--nib) var(--line); }
.lesson-spec { font-family: 'Space Mono', monospace; font-size: 9px; text-transform: uppercase; white-space: nowrap; }
.lesson-spec .k { color: var(--ink-faint); }
.lesson-spec .v { color: var(--body); font-weight: 700; margin-left: 6px; }

/* ---------- audio gate (browsers block audio until a click) ---------- */
.tt-gate { position: fixed; inset: 0; z-index: 50; background: rgba(10,10,10,0.94); display: flex; align-items: center; justify-content: center; padding: var(--line); }
.tt-gate.hidden { display: none; }
.hidden { display: none !important; }
.tt-gate-card { border: var(--b-thick) solid var(--ink); background: var(--module); max-width: 460px; width: 100%; }
.tt-gate-head { background: var(--ink); color: var(--on-ink); font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: var(--nib) var(--pica); }
.tt-gate-body { padding: var(--em) var(--line); text-align: center; }
.tt-gate-body .wm { font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 44px; line-height: 0.9; text-transform: uppercase; color: var(--ink); }
.tt-gate-body .wm .slash { color: var(--warp); margin: 0 0.1em; }
.tt-gate-body p { font-size: 13px; color: var(--body-faint); margin: var(--pica) 0 var(--line); }

/* ---------- footer ---------- */
.dr-footer { background: var(--paper-hi); border-top: var(--b-rule) solid var(--ink); margin-top: var(--page); }
.dr-footer .dr-inner { padding-top: var(--line); padding-bottom: var(--em); }
.dr-footer-top { display: flex; align-items: flex-end; gap: var(--em); }
.dr-footer-barcode { flex: 1; min-width: 0; }
.dr-barcode-svg { width: 100%; height: 48px; display: block; }
.dr-barcode-svg .b { fill: var(--ink); }
.dr-barcode-serial { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink); margin-top: 4px; }
.dr-stamp { border: var(--b-thin) solid var(--ink); background: var(--warp); padding: var(--pica) var(--line); flex-shrink: 0; }
.dr-stamp .lab { font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 18px; line-height: 1; letter-spacing: 0.72px; text-transform: uppercase; color: var(--ink); }
.dr-stamp .sub { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--ink); margin-top: 2px; }
.dr-disclaimer { border-top: var(--b-hair) solid var(--ink); margin-top: var(--pica); padding-top: var(--pica); font-family: 'Space Mono', monospace; font-size: 8px; line-height: 1.55; letter-spacing: 0.3px; text-transform: uppercase; color: var(--ink-faint); }
.dr-footer-nav { margin-top: var(--pica); display: flex; flex-wrap: wrap; gap: var(--nib); }

@media (max-width: 600px) {
  .lesson-rail { width: 46px; font-size: 32px; }
  .lesson-name { font-size: 30px; }
  .ba-row { grid-template-columns: 64px 1fr; }
  .ba-row.strong { grid-template-columns: 64px 1fr auto; }
  .demo-presets { grid-template-columns: 1fr 1fr; }
  .lesson-spec { white-space: normal; }
}

/* Background canvas for floating particles */
.viz-bg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Ambient glow transitions by intensity */
.viz-stage.intensity-0 {
  background:
    radial-gradient(130% 78% at 50% -6%, rgba(185, 139, 255, 0.08), transparent 60%),
    radial-gradient(80% 80% at 50% 100%, rgba(70, 224, 176, 0.03), transparent 70%);
}

.viz-stage.intensity-1 {
  background:
    radial-gradient(130% 78% at 50% -6%, rgba(255, 255, 255, 0.07), transparent 60%),
    radial-gradient(90% 90% at 50% 100%, rgba(231, 180, 184, 0.04), transparent 70%);
}

.viz-stage.intensity-2 {
  background:
    radial-gradient(130% 78% at 50% -6%, rgba(255, 21, 46, 0.15), transparent 65%),
    radial-gradient(90% 90% at 50% 100%, rgba(233, 26, 140, 0.08), transparent 70%);
}

/* Flash and camera shake transitions */
@keyframes stage-flash-anim {
  0% { filter: brightness(2.2) contrast(1.2); }
  100% { filter: brightness(1) contrast(1); }
}

@keyframes stage-shake-anim {
  0% { transform: translate(0, 0) scale(1.01); }
  20% { transform: translate(-2px, 1.5px) rotate(-0.15deg) scale(1.01); }
  40% { transform: translate(2px, -1.5px) rotate(0.15deg) scale(1.01); }
  60% { transform: translate(-1.5px, -1px) rotate(-0.08deg) scale(1.01); }
  80% { transform: translate(1.5px, 1px) rotate(0.08deg) scale(1.01); }
  100% { transform: translate(0, 0) scale(1); }
}

.viz-stage.flash {
  animation: stage-flash-anim 450ms cubic-bezier(0.1, 0.8, 0.3, 1);
}

.viz-stage.shake {
  animation: stage-shake-anim 400ms ease-out;
}

/* ---------------------------------------------------------- *
   Ear test ("Can you hear it?")
 * ---------------------------------------------------------- */
.ch-card {
  --acc: var(--cyan);
  --acc-on: var(--module);
  background: var(--module);
  border: var(--b-thin) solid var(--ink-faint);
  padding: var(--em);
  box-shadow: var(--shadow-hard-sm);
  max-width: 640px;
}
.ch-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--line); flex-wrap: wrap; }
.ch-q { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 30px; line-height: 1.05; letter-spacing: 0.3px; color: var(--warp); }
.ch-score { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.5px; color: var(--body-faint); white-space: nowrap; }
.ch-score b { color: var(--ink); font-weight: 700; }

.ch-ab { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nib); margin-top: var(--line); }
.ch-clip {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 26px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--body); background: var(--paper);
  border: var(--b-thin) solid var(--acc); padding: var(--pica) var(--line);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--nib);
  transition: background 100ms ease, color 100ms ease;
}
.ch-clip .ch-clip-ico { font-size: 12px; color: var(--acc); }
.ch-clip:hover { background: var(--paper-hi); }
.ch-clip:active { transform: translateY(1px); }
.ch-clip.playing { background: var(--acc); color: var(--acc-on); }
.ch-clip.playing .ch-clip-ico { color: var(--acc-on); }

.ch-ask { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--body-faint); margin: var(--line) 0 var(--nib); }
.ch-answers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nib); }
.ch-ans {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 1;
  color: var(--ink-faint); background: transparent; border: var(--b-thin) solid var(--ink-faint);
  padding: var(--pica) 0; cursor: pointer; transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.ch-ans:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }
.ch-ans:disabled { cursor: default; opacity: 0.9; }
.ch-ans.right { background: var(--safety-green); border-color: var(--safety-green); color: var(--warp); opacity: 1; }
.ch-ans.wrong { background: var(--ink); border-color: var(--ink); color: var(--on-ink); opacity: 1; }

.ch-result { min-height: var(--em); margin-top: var(--line); font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5; color: var(--body-faint); }
.ch-result b { color: var(--body); font-weight: 600; }
.ch-result.ok { color: var(--safety-green); }
.ch-result.ok b { color: var(--safety-green); }
.ch-result.no { color: var(--ink-faint); }
.ch-result.no b { color: var(--ink); }

.ch-foot { display: flex; align-items: center; gap: var(--line); flex-wrap: wrap; margin-top: var(--nib); }
.ch-next, .ch-share {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0.5px;
  text-transform: uppercase; cursor: pointer; padding: 6px var(--line); border: var(--b-thin) solid;
  transition: background 100ms ease, color 100ms ease;
}
.ch-next { color: var(--on-ink); background: var(--ink); border-color: var(--ink); }
.ch-next:hover { background: var(--warp); border-color: var(--warp); }
.ch-share { color: var(--ink-faint); background: transparent; border-color: var(--ink-faint); }
.ch-share:hover { color: var(--ink); border-color: var(--ink); }
.ch-learn { margin-left: auto; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.5px; color: var(--cyan); text-decoration: none; border-bottom: var(--b-hair) solid transparent; }
.ch-learn:hover { border-bottom-color: var(--cyan); }

.ch-clip:focus-visible, .ch-ans:focus-visible, .ch-next:focus-visible, .ch-share:focus-visible { outline: var(--b-thick) solid var(--warp); outline-offset: 2px; }

@media (max-width: 600px) {
  .ch-card { padding: var(--line); }
  .ch-q { font-size: 24px; }
  .ch-foot { gap: var(--nib); }
  .ch-learn { margin-left: 0; }
}

/* ---------------------------------------------------------- *
   Note training
 * ---------------------------------------------------------- */
.nt-card {
  --acc: var(--cyan);
  --acc-on: var(--module);
  background: var(--module);
  border: var(--b-thin) solid var(--ink-faint);
  padding: var(--em);
  box-shadow: var(--shadow-hard-sm);
  max-width: 680px;
}
.nt-modes { display: flex; flex-wrap: wrap; gap: var(--tick); margin-bottom: var(--line); }
.nt-mode {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ink-faint); background: transparent;
  border: var(--b-thin) solid var(--ink-faint); padding: 4px var(--pica); cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.nt-mode:hover { color: var(--ink); border-color: var(--ink); }
.nt-mode.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

.nt-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--line); flex-wrap: wrap; }
.nt-q { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 28px; line-height: 1.05; color: var(--warp); }
.nt-score { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.5px; color: var(--body-faint); white-space: nowrap; }
.nt-score b { color: var(--ink); font-weight: 700; }

.nt-play-row { display: flex; gap: var(--nib); margin-top: var(--line); }
.nt-play {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--body); background: var(--paper);
  border: var(--b-thin) solid var(--acc); padding: var(--nib) var(--em);
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--nib); flex: 1;
  justify-content: center; transition: background 100ms ease, color 100ms ease;
}
.nt-play .nt-play-ico { font-size: 11px; color: var(--acc); }
.nt-play:hover { background: var(--acc); color: var(--acc-on); }
.nt-play:hover .nt-play-ico { color: var(--acc-on); }
.nt-play:active { transform: translateY(1px); }
.nt-replay {
  font-family: 'Space Mono', monospace; font-size: 18px; line-height: 1; color: var(--acc);
  background: var(--paper); border: var(--b-thin) solid var(--acc); width: 48px; cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.nt-replay:hover { background: var(--acc); color: var(--acc-on); }

.nt-ask { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--body-faint); margin: var(--line) 0 var(--nib); }
.nt-answers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--nib); }
.nt-answers.nt-grid-wide { grid-template-columns: repeat(2, 1fr); }
.nt-ans {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.1;
  color: var(--ink-faint); background: transparent; border: var(--b-thin) solid var(--ink-faint);
  padding: var(--nib) 6px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.3px;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.nt-ans:hover:not(.locked) { color: var(--ink); border-color: var(--ink); }
.nt-ans.locked { cursor: default; }
.nt-ans.right { background: var(--safety-green); border-color: var(--safety-green); color: var(--warp); }
.nt-ans.wrong { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
/* melody options: a play chip on the left, the solfège on the right */
.nt-grid-wide .nt-ans { display: flex; align-items: center; gap: var(--nib); text-transform: none; font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: 0.5px; }
.nt-opt-play { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border: var(--b-thin) solid var(--acc); color: var(--acc); font-size: 9px; }
.nt-ans.right .nt-opt-play, .nt-ans.wrong .nt-opt-play { border-color: currentColor; color: inherit; }
.nt-opt-lab { flex: 1; text-align: left; }

.nt-result { min-height: var(--em); margin-top: var(--line); font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5; color: var(--body-faint); }
.nt-result b { color: var(--body); font-weight: 600; }
.nt-result.ok { color: var(--safety-green); }
.nt-result.ok b { color: var(--safety-green); }
.nt-result.no { color: var(--ink-faint); }
.nt-result.no b { color: var(--ink); }

.nt-foot { display: flex; align-items: center; gap: var(--line); flex-wrap: wrap; margin-top: var(--nib); }
.nt-next {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0.5px;
  text-transform: uppercase; cursor: pointer; padding: 6px var(--line);
  color: var(--on-ink); background: var(--ink); border: var(--b-thin) solid var(--ink);
  transition: background 100ms ease, border-color 100ms ease;
}
.nt-next:hover { background: var(--warp); border-color: var(--warp); }
.nt-learn { margin-left: auto; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.5px; color: var(--cyan); text-decoration: none; border-bottom: var(--b-hair) solid transparent; }
.nt-learn:hover { border-bottom-color: var(--cyan); }

.nt-mode:focus-visible, .nt-play:focus-visible, .nt-replay:focus-visible, .nt-ans:focus-visible, .nt-opt-play:focus-visible, .nt-next:focus-visible {
  outline: var(--b-thick) solid var(--warp); outline-offset: 2px;
}

@media (max-width: 600px) {
  .nt-card { padding: var(--line); }
  .nt-q { font-size: 22px; }
  .nt-answers { grid-template-columns: repeat(2, 1fr); }
  .nt-answers.nt-grid-wide { grid-template-columns: 1fr; }
  .nt-foot { gap: var(--nib); }
  .nt-learn { margin-left: 0; }
}

/* ---------------------------------------------------------- *
   Rhythm (fruit-word mnemonics)
 * ---------------------------------------------------------- */
.rt-card {
  --acc: var(--cyan);
  --acc-on: var(--module);
  background: var(--module);
  border: var(--b-thin) solid var(--ink-faint);
  padding: var(--em);
  box-shadow: var(--shadow-hard-sm);
  max-width: 680px;
}
.rt-lab { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--body-faint); margin-bottom: var(--nib); }

.rt-ref { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tick); }
.rt-ref-chip {
  display: flex; align-items: center; gap: var(--nib); text-align: left;
  background: var(--paper); border: var(--b-thin) solid var(--ink-faint);
  padding: 6px var(--nib); cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
.rt-ref-chip:hover { background: var(--paper-hi); border-color: var(--acc); }
.rt-ref-chip:active { transform: translateY(1px); }
.rt-ref-ico { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border: var(--b-thin) solid var(--acc); color: var(--acc); font-size: 8px; }
.rt-ref-fruit { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--body); }
.rt-ref-syll { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.5px; color: var(--body-faint); margin-left: auto; }

.rt-div { border: 0; border-top: var(--b-thin) dashed var(--ink-faint); opacity: 0.5; margin: var(--em) 0 var(--line); }

.rt-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--line); flex-wrap: wrap; }
.rt-q { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 28px; line-height: 1.05; color: var(--warp); }
.rt-score { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.5px; color: var(--body-faint); white-space: nowrap; }
.rt-score b { color: var(--ink); font-weight: 700; }

.rt-play-row { display: flex; gap: var(--nib); margin-top: var(--line); }
.rt-play {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--body); background: var(--paper);
  border: var(--b-thin) solid var(--acc); padding: var(--nib) var(--em);
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--nib); flex: 1;
  justify-content: center; transition: background 100ms ease, color 100ms ease;
}
.rt-play .rt-play-ico { font-size: 11px; color: var(--acc); }
.rt-play:hover { background: var(--acc); color: var(--acc-on); }
.rt-play:hover .rt-play-ico { color: var(--acc-on); }
.rt-play:active { transform: translateY(1px); }
.rt-replay {
  font-family: 'Space Mono', monospace; font-size: 18px; line-height: 1; color: var(--acc);
  background: var(--paper); border: var(--b-thin) solid var(--acc); width: 48px; cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.rt-replay:hover { background: var(--acc); color: var(--acc-on); }

.rt-ask { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--body-faint); margin: var(--line) 0 var(--nib); }
.rt-answers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--nib); }
.rt-ans {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.1;
  color: var(--ink-faint); background: transparent; border: var(--b-thin) solid var(--ink-faint);
  padding: var(--nib) 6px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.3px;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.rt-ans:hover:not(.locked) { color: var(--ink); border-color: var(--ink); }
.rt-ans.locked { cursor: default; }
.rt-ans.right { background: var(--safety-green); border-color: var(--safety-green); color: var(--warp); }
.rt-ans.wrong { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.rt-result { min-height: var(--em); margin-top: var(--line); font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5; color: var(--body-faint); }
.rt-result b { color: var(--body); font-weight: 600; }
.rt-result.ok { color: var(--safety-green); }
.rt-result.ok b { color: var(--safety-green); }
.rt-result.no { color: var(--ink-faint); }
.rt-result.no b { color: var(--ink); }

.rt-foot { display: flex; align-items: center; gap: var(--line); flex-wrap: wrap; margin-top: var(--nib); }
.rt-next {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0.5px;
  text-transform: uppercase; cursor: pointer; padding: 6px var(--line);
  color: var(--on-ink); background: var(--ink); border: var(--b-thin) solid var(--ink);
  transition: background 100ms ease, border-color 100ms ease;
}
.rt-next:hover { background: var(--warp); border-color: var(--warp); }
.rt-learn { margin-left: auto; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.5px; color: var(--cyan); text-decoration: none; border-bottom: var(--b-hair) solid transparent; }
.rt-learn:hover { border-bottom-color: var(--cyan); }

.rt-ref-chip:focus-visible, .rt-play:focus-visible, .rt-replay:focus-visible, .rt-ans:focus-visible, .rt-next:focus-visible {
  outline: var(--b-thick) solid var(--warp); outline-offset: 2px;
}

@media (max-width: 600px) {
  .rt-card { padding: var(--line); }
  .rt-q { font-size: 22px; }
  .rt-ref { grid-template-columns: 1fr; }
  .rt-answers { grid-template-columns: repeat(2, 1fr); }
  .rt-foot { gap: var(--nib); }
  .rt-learn { margin-left: 0; }
}

/* ---------------------------------------------------------- *
   Train (merged ear + read trainer)
 * ---------------------------------------------------------- */
.tr-card {
  --acc: var(--cyan);
  --acc-on: var(--module);
  background: var(--module);
  border: var(--b-thin) solid var(--ink-faint);
  padding: var(--em);
  box-shadow: var(--shadow-hard-sm);
  max-width: 720px;
}
.tr-modes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tick); margin-bottom: var(--line); }
.tr-group { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--body-faint); padding: 0 var(--nib) 0 var(--tick); }
.tr-group:first-child { padding-left: 0; }
.tr-mode {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ink-faint); background: transparent;
  border: var(--b-thin) solid var(--ink-faint); padding: 4px var(--pica); cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.tr-mode:hover { color: var(--ink); border-color: var(--ink); }
.tr-mode.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

.nt-stim { display: flex; justify-content: center; background: var(--paper); border: var(--b-thin) solid var(--ink-faint); padding: var(--nib); margin-top: var(--line); }
.tr-staff { display: block; width: 240px; max-width: 100%; height: auto; }
.tr-staff .tr-line { stroke: var(--body-faint); stroke-width: 1; }
.tr-staff .tr-ledger { stroke: var(--body); stroke-width: 1.4; }
.tr-staff .tr-stem { stroke: var(--body); stroke-width: 1.6; }
.tr-staff .tr-head { fill: var(--cyan); }
.tr-staff .tr-clef { fill: var(--body); font-size: 56px; font-family: 'Inter', 'Segoe UI Symbol', serif; dominant-baseline: alphabetic; }

.tr-foot { display: flex; margin-top: var(--line); }
.tr-learn { margin-left: auto; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.5px; color: var(--cyan); text-decoration: none; border-bottom: var(--b-hair) solid transparent; }
.tr-learn:hover { border-bottom-color: var(--cyan); }
.tr-mode:focus-visible, .tr-learn:focus-visible { outline: var(--b-thick) solid var(--warp); outline-offset: 2px; }

@media (max-width: 600px) { .tr-card { padding: var(--line); } }

/* ---------------------------------------------------------- *
   Play along (rhythm reader)
 * ---------------------------------------------------------- */
.rr-card {
  --acc: var(--cyan);
  --acc-on: var(--module);
  background: var(--module);
  border: var(--b-thin) solid var(--ink-faint);
  padding: var(--em);
  box-shadow: var(--shadow-hard-sm);
  max-width: 720px;
}
.rr-presets { display: flex; flex-wrap: wrap; gap: var(--tick); margin-bottom: var(--line); }
.rr-preset {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--ink-faint); background: transparent;
  border: var(--b-thin) solid var(--ink-faint); padding: 4px var(--nib); cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.rr-preset:hover { color: var(--ink); border-color: var(--ink); }
.rr-preset.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

.rr-staffwrap { background: var(--paper); border: var(--b-thin) solid var(--ink-faint); padding: var(--nib) var(--pica); overflow-x: auto; }
.rr-staff { display: block; width: 100%; height: auto; min-width: 460px; }
.rr-staff .rr-head { fill: var(--body); transition: fill 60ms linear; }
.rr-staff .rr-head.lit { fill: var(--cyan); }
.rr-staff .rr-stem, .rr-staff .rr-beam { fill: var(--body); stroke: var(--body); }
.rr-staff .rr-stem { stroke-width: 1.6; }
.rr-staff .rr-beam { stroke: none; }
.rr-staff .rr-bar { stroke: var(--body-faint); stroke-width: 1; }
.rr-staff .rr-tick { stroke: var(--body-faint); stroke-width: 1; opacity: 0.5; }
.rr-staff .rr-beatnum { fill: var(--body-faint); font-family: 'Space Mono', monospace; font-size: 11px; text-anchor: middle; }
.rr-staff .rr-rest circle { fill: var(--body-faint); }
.rr-staff .rr-rest line { stroke: var(--body-faint); stroke-width: 2.2; stroke-linecap: round; }
.rr-staff .rr-trip line { stroke: var(--ink-faint); stroke-width: 1.1; }
.rr-staff .rr-tripbg { fill: var(--module); }
.rr-staff .rr-tripnum { fill: var(--ink-faint); font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; text-anchor: middle; }
.rr-staff .rr-ph { stroke: var(--ink); stroke-width: 2; }

.rr-bar-row { display: flex; align-items: center; gap: var(--nib); margin-top: var(--line); flex-wrap: wrap; }
.rr-play {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 20px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--body); background: var(--paper);
  border: var(--b-thin) solid var(--acc); padding: var(--nib) var(--em); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--nib);
  transition: background 100ms ease, color 100ms ease;
}
.rr-play .rr-play-ico { font-size: 11px; color: var(--acc); }
.rr-play:hover { background: var(--acc); color: var(--acc-on); }
.rr-play:hover .rr-play-ico { color: var(--acc-on); }
.rr-play.playing { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.rr-play.playing .rr-play-ico { color: var(--on-ink); }
.rr-loop {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ink-faint); background: transparent;
  border: var(--b-thin) solid var(--ink-faint); padding: 6px var(--pica); cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.rr-loop:hover { color: var(--ink); border-color: var(--ink); }
.rr-loop.on { background: var(--safety-green); border-color: var(--safety-green); color: var(--warp); }
.rr-tempo { display: inline-flex; border: var(--b-thin) solid var(--ink-faint); }
.rr-tempo-btn {
  font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ink-faint); background: transparent; border: 0;
  border-right: var(--b-thin) solid var(--ink-faint); padding: 7px var(--pica); cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.rr-tempo-btn:last-child { border-right: 0; }
.rr-tempo-btn:hover { color: var(--ink); }
.rr-tempo-btn.on { background: var(--acc); color: var(--acc-on); }
.rr-count { margin-left: auto; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; color: var(--cyan); min-width: 26px; text-align: center; }

.rr-hint { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.5; color: var(--body-faint); margin: var(--line) 0 0; }
.rr-hint b { color: var(--body); font-weight: 600; }
.rr-foot { display: flex; margin-top: var(--pica); }
.rr-learn { margin-left: auto; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.5px; color: var(--cyan); text-decoration: none; border-bottom: var(--b-hair) solid transparent; }
.rr-learn:hover { border-bottom-color: var(--cyan); }

.rr-preset:focus-visible, .rr-play:focus-visible, .rr-loop:focus-visible, .rr-tempo-btn:focus-visible { outline: var(--b-thick) solid var(--warp); outline-offset: 2px; }

@media (max-width: 600px) {
  .rr-card { padding: var(--line); }
  .rr-count { margin-left: var(--nib); }
}

/* ---------------------------------------------------------- *
   Solresol ("speak in music")
 * ---------------------------------------------------------- */
.sl-card {
  --acc: var(--cyan);
  --acc-on: var(--module);
  background: var(--module);
  border: var(--b-thin) solid var(--ink-faint);
  padding: var(--em);
  box-shadow: var(--shadow-hard-sm);
  max-width: 720px;
}
.sl-input {
  width: 100%; box-sizing: border-box; background: var(--paper);
  border: var(--b-thin) solid var(--ink-faint); color: var(--warp);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 26px;
  letter-spacing: 0.5px; padding: var(--nib) var(--pica);
}
.sl-input:focus { outline: none; border-color: var(--acc); }
.sl-input::placeholder { color: var(--body-faint); }

.sl-chips { display: flex; flex-wrap: wrap; gap: var(--line); margin-top: var(--line); min-height: 30px; }
.sl-word { display: flex; flex-wrap: wrap; gap: var(--tick); }
.sl-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  padding: 3px 7px; min-width: 14px; transition: transform 80ms ease, box-shadow 80ms ease;
}
.sl-chip.lit { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--warp); }
.sl-empty { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--body-faint); }

.sl-staffwrap { background: var(--paper); border: var(--b-thin) solid var(--ink-faint); padding: var(--nib) var(--pica); margin-top: var(--line); overflow-x: auto; }
.sl-staff { display: block; width: 100%; height: auto; min-width: 320px; }
.sl-staff .sl-line, .sl-staff .sl-ledger { stroke: var(--body-faint); stroke-width: 1; }
.sl-staff .sl-ledger { stroke: var(--body); }
.sl-staff .sl-stem { stroke: var(--body); stroke-width: 1.5; }
.sl-staff .sl-head { transition: stroke-width 60ms linear; stroke: transparent; stroke-width: 0; }
.sl-staff .sl-head.lit { stroke: var(--warp); stroke-width: 2; }

.sl-controls { display: flex; align-items: center; gap: var(--nib); flex-wrap: wrap; margin-top: var(--line); }
.sl-speak {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 20px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--body); background: var(--paper);
  border: var(--b-thin) solid var(--acc); padding: var(--nib) var(--em); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--nib); transition: background 100ms ease, color 100ms ease;
}
.sl-speak .sl-speak-ico { font-size: 11px; color: var(--acc); }
.sl-speak:hover { background: var(--acc); color: var(--acc-on); }
.sl-speak:hover .sl-speak-ico { color: var(--acc-on); }
.sl-share {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ink-faint); background: transparent;
  border: var(--b-thin) solid var(--ink-faint); padding: 6px var(--pica); cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.sl-share:hover { color: var(--ink); border-color: var(--ink); }
.sl-presets { display: inline-flex; flex-wrap: wrap; gap: var(--tick); margin-left: auto; }
.sl-preset {
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.5px; text-transform: lowercase;
  color: var(--body-faint); background: transparent; border: var(--b-hair) solid var(--ink-faint);
  padding: 3px var(--nib); cursor: pointer; transition: color 100ms ease, border-color 100ms ease;
}
.sl-preset:hover { color: var(--acc); border-color: var(--acc); }

.sl-cap { font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.55; color: var(--body-faint); margin: var(--line) 0 0; }
.sl-foot { display: flex; align-items: center; gap: var(--line); margin-top: var(--pica); }
.sl-tag { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--ink-faint); }
.sl-learn { margin-left: auto; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.5px; color: var(--cyan); text-decoration: none; border-bottom: var(--b-hair) solid transparent; }
.sl-learn:hover { border-bottom-color: var(--cyan); }

.sl-input:focus-visible, .sl-speak:focus-visible, .sl-share:focus-visible, .sl-preset:focus-visible { outline: var(--b-thick) solid var(--warp); outline-offset: 2px; }

@media (max-width: 600px) {
  .sl-card { padding: var(--line); }
  .sl-input { font-size: 22px; }
  .sl-presets { margin-left: 0; }
  .sl-chips { gap: var(--pica); }
}

/* ---- Golden Phyllotaxis Mode ---- */
.pl-wrapper {
  background: rgba(15, 11, 28, 0.65);
  border: var(--b-thin) solid rgba(147, 51, 234, 0.25);
  border-radius: var(--pica);
  padding: var(--pica);
  margin-top: var(--line);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.pl-controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--line);
  margin-bottom: var(--line);
}
.pl-control-card {
  flex: 1;
  min-width: 280px;
  background: rgba(25, 18, 52, 0.5);
  border: var(--b-thin) solid rgba(147, 51, 234, 0.15);
  border-radius: var(--nib);
  padding: var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pl-control-card.text-right {
  align-items: flex-end;
  gap: var(--nib);
}
.pl-control-card label {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--warp);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.pl-slider-wrap {
  display: flex;
  align-items: center;
  gap: var(--line);
}
.pl-slider-wrap input[type="range"] {
  flex: 1;
  accent-color: var(--warp);
  cursor: pointer;
}
.pl-angle-val {
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: #fbbf24;
  min-width: 90px;
  text-align: right;
}
.pl-slider-desc {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--body-faint);
  line-height: 1.45;
  margin-top: 8px;
}
.pl-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px var(--pica);
  border-radius: var(--tick);
  cursor: pointer;
  transition: all 120ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pl-btn-arp {
  background: transparent;
  color: #fbbf24;
  border: var(--b-thin) solid #fbbf24;
}
.pl-btn-arp:hover {
  background: #fbbf24;
  color: #111;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}
.pl-btn-arp.playing {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
  animation: pl-pulse 1s infinite alternate;
}
@keyframes pl-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.02); }
}
.pl-preset-row {
  display: flex;
  gap: 4px;
}
.pl-preset-btn {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--body-faint);
  background: transparent;
  border: var(--b-thin) solid rgba(147, 51, 234, 0.25);
  padding: 3px 8px;
  border-radius: var(--tick);
  cursor: pointer;
  transition: all 100ms ease;
}
.pl-preset-btn:hover {
  color: var(--warp);
  border-color: var(--warp);
}
.pl-preset-btn.on {
  color: var(--on-ink);
  background: var(--warp);
  border-color: var(--warp);
  box-shadow: 0 0 8px rgba(147, 51, 234, 0.35);
}
.pl-visualizer-container {
  background: #0a0810;
  border: var(--b-thin) solid rgba(147, 51, 234, 0.15);
  border-radius: var(--nib);
  margin-bottom: var(--line);
  overflow: hidden;
  position: relative;
}
.pl-canvas {
  display: block;
  width: 100%;
  height: 320px;
}
.pl-keyboard-label {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--body-faint);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--nib);
}
.pl-keyboard {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--nib);
}
.pl-key {
  background: rgba(30, 24, 64, 0.45);
  border: var(--b-thin) solid rgba(147, 51, 234, 0.25);
  border-radius: var(--tick);
  padding: var(--nib) var(--tick);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pl-key::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--warp);
  opacity: 0;
  transition: opacity 100ms ease;
}
.pl-key:hover {
  background: rgba(147, 51, 234, 0.15);
  border-color: var(--warp);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.2);
}
.pl-key:hover::after {
  opacity: 0.7;
}
.pl-key.active {
  background: var(--warp) !important;
  border-color: var(--warp) !important;
  color: white !important;
  transform: scale(0.96) !important;
  box-shadow: 0 0 16px var(--warp) !important;
}
.pl-key.active * {
  color: white !important;
}
.pl-key-index {
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #fbbf24;
}
.pl-key-fraction {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--body);
}
.pl-key-cents {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--cyan);
}
.pl-key-desc {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--body-faint);
  margin-top: 4px;
}

@media (max-width: 768px) {
  .pl-keyboard {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--line);
  }
}
@media (max-width: 480px) {
  .pl-keyboard {
    grid-template-columns: repeat(2, 1fr);
  }
  .pl-controls-row {
    flex-direction: column;
  }
  .pl-control-card.text-right {
    align-items: flex-start;
  }
}