/* ------------------------------------------------------------------------- *
   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; }

/* ---------- 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; }
.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; max-width: 60ch; 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 ---------- */
.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; gap: var(--nib); margin-bottom: var(--pica); }
.tt-label .bar { width: var(--line); height: var(--b-rule); background: var(--acc); }
.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; }

/* ---------- 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)); }

/* ---------- 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; }
.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); }
.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; }
  .demo-presets { grid-template-columns: 1fr 1fr; }
  .lesson-spec { white-space: normal; }
}