:root {
  /* Sub-brand of Music With TemmyKeys — see docs/brand/tokens.md */
  --violet: #7C3AED;      /* MWT purple: brand chrome, headings, note labels */
  --brand-dark: #5B21B6;  /* purple hover / pressed */
  --gold: #F59E0B;        /* MWT gold: sparing accent (reads only on dark) */
  --coral: #D85A30;       /* product SIGNAL: everything interactive / sound */
  --lav: #EEEDFE;
  --ink: #2C2C2A;
  --muted: #5F5E5A;
  --soft: #F4F3FB;
}
@font-face {
  font-family: "Bravura";
  src: url("../fonts/Bravura.otf") format("opentype");
}
@font-face {
  /* Inter — MWT brand face. Self-hosted (SIL OFL); see fonts/inter/LICENSE-OFL.txt */
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-variable.woff2") format("woff2");
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink); background: #fff;
}
header.site {
  background: var(--violet); color: #fff; padding: 22px 24px 22px;
}
header.site .lockup { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
header.site .lockup .logo { background: #fff; border-radius: 10px; padding: 5px; display: flex; flex: none; }
header.site .lockup .logo img { width: 38px; height: 38px; display: block; }
header.site .lockup .mark small { display: block; font-size: 11px; letter-spacing: 2px; color: #D9CCF7; font-family: Arial, sans-serif; }
header.site .lockup .mark b { font-size: 16px; font-weight: 700; letter-spacing: .2px; }
header.site .lockup .beta { font: 700 10px Arial, sans-serif; letter-spacing: 1.5px; text-transform: uppercase;
  color: #fff; background: var(--coral); padding: 3px 8px; border-radius: 20px; align-self: center; }
header.site .brand { font-size: 13px; letter-spacing: 2px; color: #D9CCF7; margin: 0 0 6px; font-family: Arial, sans-serif; }
header.site h1 { margin: 0; font-size: 30px; letter-spacing: -.01em; color: #fff; }
header.site p { margin: 6px 0 0; color: var(--lav); }
/* mobile-audio recovery prompt — unobtrusive, but impossible to miss when audio
   silently drops. Full-width tap target; the whole page also resumes on any tap. */
header.site .audio-prompt { display: block; width: 100%; text-align: left; cursor: pointer;
  margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; font: 600 13px inherit; line-height: 1.4;
  color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); }
header.site .audio-prompt[hidden] { display: none; }
header.site .audio-prompt:hover { background: rgba(255,255,255,.26); }
main { max-width: 780px; margin: 0 auto; padding: 28px 20px 60px; }

.kicker { font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;
  letter-spacing: 2px; color: var(--coral); margin: 8px 0 4px; }
h1 { color: var(--violet); font-size: 32px; margin: 0 0 10px; }
p.body { font-size: 18px; line-height: 1.6; margin: 0 0 18px; }

.figure { background: var(--soft); border: 1px solid #DDD9F0; border-radius: 12px;
  padding: 18px; margin: 12px 0 18px; }
.figure svg { display: block; width: 100%; height: auto; }

.notehead { cursor: pointer; }
.notehead.mute { cursor: default; }
.notehead:focus-visible ellipse { outline: none; stroke: var(--coral); stroke-width: 3; }
.notehead.flash ellipse { fill: var(--coral); }
.note-label { font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; }
.keylabel, .note-label, .blacklabel { pointer-events: none; } /* B5: labels never swallow a tap */

/* B4: achievement feedback — gold pulse, sparkle burst, and a safe shake */
.pkey.celebrate, .notehead.celebrate ellipse, ellipse.celebrate { animation: gold-pulse .6s ease; }
@keyframes gold-pulse { 0% {} 35% { fill: var(--gold); } 100% {} }
.pkey.shake, .notehead.shake, ellipse.shake, .opt.shake { animation: shake .34s ease; transform-box: fill-box; transform-origin: center; }
.opt.celebrate { animation: opt-pop .6s ease; }
@keyframes opt-pop { 0% {} 35% { background: var(--gold); color: #fff; border-color: var(--gold); } 100% {} }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.burst { opacity: 0; transform-box: fill-box; transform-origin: center; animation: burst .6s ease-out forwards; pointer-events: none; }
.burst-ring { fill: none; stroke: var(--gold); stroke-width: 2.5; }
.burst-ray { stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; }
@keyframes burst { 0% { opacity: .95; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.6); } }

/* B3: low/high range hint under a keyboard */
.range-hint { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 2px 0;
  height: 20px; border-radius: 6px; padding: 0 12px; font: 600 13px inherit; color: #fff;
  background: linear-gradient(90deg, var(--violet), var(--coral)); }

/* B2: gated collection counter */
.collect-bar { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
.collect-count { font: 700 15px inherit; color: var(--violet); }
.collect-msg { font-size: 14px; color: var(--muted); min-height: 20px; }
/* ear training's calm home marker: a soft sky tint + a "home" label. Declared
   BEFORE .found/.pressed so playing the home key still shows those states. */
.pkey.home-key { fill: #EAF3FA; }
.home-label { font: 700 9px Arial, sans-serif; fill: #2f7fb8; pointer-events: none; letter-spacing: .04em; }
/* chord tones (Module 4): soft lavender, the ROOT deeper and labelled. Its own
   colour on purpose — coral means "press this", gold means "correct", sky means
   "home". Declared BEFORE .found/.pressed so playing a chord tone still shows
   those states. */
.pkey.chord-key { fill: #EDE7FB; }
.pkey.chord-root { fill: #D9C9F7; }
.root-label { font: 700 9px Arial, sans-serif; fill: var(--violet); pointer-events: none; letter-spacing: .04em; }
.pkey.found { fill: var(--gold); }
/* scale-play: coral glow on the next expected key */
.pkey.glow { animation: glow 1.1s ease-in-out infinite; }
@keyframes glow { 0%, 100% { fill: #fff; } 50% { fill: #F4C4AC; } }
.pkey.black.glow { animation: glow-b 1.1s ease-in-out infinite; }
@keyframes glow-b { 0%, 100% { fill: var(--ink); } 50% { fill: var(--coral); } }
.tiny { font-family: Arial, sans-serif; font-size: 11px; }
.qmark { font-family: Georgia, serif; font-size: 26px; font-weight: bold; }
.keylabel { font-family: Arial, sans-serif; font-size: 15px; font-weight: bold; }
.pkey { cursor: pointer; transition: fill 0.15s ease, transform .08s ease; transform-box: fill-box; }
.pkey.pressed { fill: var(--lav); transform: translateY(2.5px); }  /* key visibly depresses */
.pkey.black.pressed { fill: var(--coral); }

/* sharps/flats zoomed illustration */
.sf-label { font: 700 40px Arial, sans-serif; }
.sf-sign { font: 700 46px Arial, sans-serif; }
.sf-signlabel { font: 600 15px Arial, sans-serif; }
/* names revealed on keys as a collection gate is solved (A2) */
.reveal-label { font: 700 12px Arial, sans-serif; pointer-events: none; }

/* interval counter (Module 3): the big ticking number above the keyboard */
.count-holder { text-align: center; margin: 2px auto 8px; }
.count-num { display: inline-block; min-width: 64px; font: 800 46px Arial, sans-serif; color: var(--coral);
  line-height: 1; letter-spacing: -.02em; }
.count-cap { font: 700 11px Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-top: 2px; }

/* the two-families map (Module 3, Lesson 3.3): the organizing picture */
.family-map { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 6px auto 8px; max-width: 460px; }
.fm-col { flex: 1 1 180px; border-radius: 14px; padding: 14px 12px; text-align: center; border: 1.5px solid; }
.fm-mm { background: #FBEDE7; border-color: #E8C4B4; }
.fm-perfect { background: #EAF3FA; border-color: #CBE0F0; }
.fm-title { font: 800 13px Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.fm-mm .fm-title { color: var(--coral); }
.fm-perfect .fm-title { color: #2f7fb8; }
.fm-nums { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.fm-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 10px; background: #fff; font: 800 20px Arial, sans-serif; color: var(--ink); }
.fm-mm .fm-num { box-shadow: inset 0 0 0 2px #E8C4B4; }
.fm-perfect .fm-num { box-shadow: inset 0 0 0 2px #CBE0F0; }
/* 4.3 four-quality recap (familymap-wide): felt handle + build chips + outer span.
   Wraps 2x2 on narrow, 4-across when there's room. */
/* Anchor-free interval reference: 12 cells, semitone count + name, tinted by family
   (major/minor/perfect/tritone). Distances only, no C landmark. */
.interval-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 560px; margin: 8px auto; }
.im-cell { border-radius: 10px; padding: 8px 6px; text-align: center; border: 1.5px solid; }
.im-num { font: 800 18px Arial, sans-serif; line-height: 1; }
.im-name { font-size: 11px; margin-top: 3px; color: var(--ink); }
.im-maj { background: #FBEDE7; border-color: #E8C4B4; } .im-maj .im-num { color: var(--coral); }
.im-min { background: #FFF; border-color: #E4E1F5; } .im-min .im-num { color: var(--muted); }
.im-perf { background: #EAF3FA; border-color: #CBE0F0; } .im-perf .im-num { color: #2f7fb8; }
.im-tri { background: #FDECEC; border-color: #F0BEBE; } .im-tri .im-num { color: #C0392B; }
@media (max-width: 480px) { .interval-map { grid-template-columns: repeat(3, 1fr); } }
.family-map-wide { max-width: 720px; }
.family-map-wide .fm-col { flex: 1 1 148px; }
.fm-sub { font: 700 11px Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.fm-foot { margin-top: 8px; font-size: 12px; color: var(--muted); }
.fm-happy { background: #FBEDE7; border-color: #E8C4B4; } .fm-happy .fm-title { color: var(--coral); }
.fm-sad { background: #EAF3FA; border-color: #CBE0F0; } .fm-sad .fm-title { color: #2f7fb8; }
.fm-tense { background: #FDECEC; border-color: #F0BEBE; } .fm-tense .fm-title { color: #C0392B; }
.fm-dreamy { background: #F0EBFB; border-color: #D6C9F0; } .fm-dreamy .fm-title { color: var(--violet); }
.fm-happy .fm-num { box-shadow: inset 0 0 0 2px #E8C4B4; }
.fm-sad .fm-num { box-shadow: inset 0 0 0 2px #CBE0F0; }
.fm-tense .fm-num { box-shadow: inset 0 0 0 2px #F0BEBE; }
.fm-dreamy .fm-num { box-shadow: inset 0 0 0 2px #D6C9F0; }

/* the light two-families-of-keys map (Module 2, Lesson 2.2) */
.keymap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 6px auto 8px; max-width: 480px; }
.km-side { font: 800 12px Arial, sans-serif; letter-spacing: .1em; color: var(--muted); }
.km-flatside { align-self: flex-start; color: #2f7fb8; }
.km-sharpside { align-self: flex-end; color: var(--coral); }
.km-keys { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap; }
.km-key { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 46px; padding: 8px 4px;
  border-radius: 10px; border: 1.5px solid; }
.km-name { font: 800 19px Arial, sans-serif; }
.km-tag { font: 700 10px Arial, sans-serif; letter-spacing: .04em; margin-top: 2px; }
.km-flat { background: #EAF3FA; border-color: #CBE0F0; color: #2f7fb8; }
.km-sharp { background: #FBEDE7; border-color: #E8C4B4; color: var(--coral); }
.km-neutral { background: #fff; border-color: var(--ink); color: var(--ink); }
.km-ell { font: 800 18px Arial, sans-serif; color: var(--muted); padding: 0 2px; }

/* the major-scale formula bar (T · T · S · T · T · T · S) */
.formula-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 4px; margin: 4px auto 6px; max-width: 100%; }
.f-token { display: inline-flex; align-items: center; justify-content: center; min-width: 34px;
  padding: 7px 10px; border-radius: 10px; font: 800 17px Arial, sans-serif; letter-spacing: .5px;
  background: var(--lav); color: var(--violet); border: 2px solid transparent; transition: background .2s, color .2s, box-shadow .2s; }
.f-token.f-semitone { background: #FBEDE7; color: var(--coral); }
.f-dot { color: var(--muted); font-weight: 700; padding: 0 1px; }
.f-token.done { background: var(--violet); color: #fff; }
.f-token.f-semitone.done { background: var(--coral); color: #fff; }
.f-token.active { box-shadow: 0 0 0 3px rgba(216,90,48,.9); animation: f-pulse 1.15s ease-in-out infinite; }
@keyframes f-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(216,90,48,.9); } 50% { box-shadow: 0 0 0 6px rgba(216,90,48,.3); } }
.f-token.flash { animation: f-flash .5s ease; }
@keyframes f-flash { 0% { transform: scale(1); } 32% { transform: scale(1.22); } 100% { transform: scale(1); } }
.formula-cap { text-align: center; font-size: 15px; color: var(--ink); min-height: 22px; margin: 0 auto 6px; max-width: 520px; }

/* "Key of X major" context badge (Fix 4b) */
.key-badge { display: block; width: fit-content; margin: 0 auto 10px; font: 700 12px Arial, sans-serif; letter-spacing: .5px;
  text-transform: uppercase; color: var(--violet); background: var(--lav); border: 1px solid #E3E0F0;
  padding: 5px 12px; border-radius: 20px; }

/* degree reference table (Fix 6) */
.reftable-wrap { display: block; width: fit-content; margin: 4px auto; }
.reftable { border-collapse: collapse; margin: 0 auto; font-size: 15px; }
.reftable th { font: 700 11px Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 6px 12px; border-bottom: 2px solid var(--lav); }
.reftable td { padding: 7px 12px; text-align: center; color: var(--ink); border-bottom: 1px solid var(--soft); }
.reftable td:nth-child(4) { text-align: left; color: var(--muted); }
.reftable .tonic-row td { background: #FBEDE7; color: var(--coral); font-weight: 700; }
.reftable .tonic-row td:nth-child(4) { color: var(--coral); }

/* ---- Ear training mode (its own calm sky-blue identity) ---- */
body.ear-mode header.site { background: #2f7fb8; }        /* distinct from lesson violet */
.ear-picker { max-width: 560px; margin: 0 auto; padding: 4px 20px 40px; }
.ear-intro { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 8px 0 20px; }
.ear-level-btn { display: block; width: 100%; text-align: left; cursor: pointer; margin: 0 0 12px;
  background: #EAF3FA; border: 1.5px solid #CBE0F0; border-radius: 14px; padding: 14px 16px; }
.ear-level-btn:hover { border-color: #2f7fb8; }
.ear-lvl-n { display: inline-block; font: 700 11px Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #2f7fb8; }
.ear-lvl-name { display: block; font-size: 19px; font-weight: 700; color: var(--ink); margin: 2px 0 2px; }
.ear-lvl-blurb { display: block; font-size: 14px; color: var(--muted); }
.ear-lvl-best { display: inline-block; margin-top: 6px; font: 700 12px Arial, sans-serif; color: #2f7fb8; }
#ear { max-width: 720px; margin: 0 auto; padding: 8px 16px 40px; text-align: center; }
.ear-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 18px; }
.ear-drone { display: inline-flex; align-items: center; gap: 7px; font: 600 13px inherit; color: #2f7fb8;
  background: #EAF3FA; border: 1px solid #CBE0F0; border-radius: 20px; padding: 5px 12px; }
.ear-drone-dot { width: 9px; height: 9px; border-radius: 50%; background: #2f7fb8; animation: ear-hum 1.6s ease-in-out infinite; }
@keyframes ear-hum { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
.ear-prog { font: 700 13px Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ear-board { margin: 0 auto; }
/* "not your turn": the board recedes but stays clickable (a stray press still
   sounds). Dimming is applied PER KEY, never on the container, so the home
   marker can be EXEMPTED — a parent's opacity cannot be undone by a child.
   .home-key and .home-label are deliberately absent from these selectors. */
.ear-board.dimmed .pkey:not(.home-key),
.ear-board.dimmed .keylabel,
.ear-board.dimmed .guide-chevron { opacity: .42; }
/* the action line: what to do right now, made to dominate the step */
.ear-cap { font-size: 20px; font-weight: 600; color: var(--ink); min-height: 26px; margin: 14px auto 4px; max-width: 560px; }
.ear-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 0; }
.ear-play-btn { font: 600 15px inherit; padding: 10px 18px; border-radius: 20px; cursor: pointer; border: 1px solid #2f7fb8; background: #fff; color: #2f7fb8; }
.ear-hint-btn { font: 600 15px inherit; padding: 10px 18px; border-radius: 20px; cursor: pointer; border: 1px solid var(--muted); background: #fff; color: var(--muted); }
.ear-play-btn:hover, .ear-hint-btn:hover { background: #EAF3FA; }
.ear-exit-btn { font: 600 14px inherit; padding: 10px 16px; border-radius: 20px; cursor: pointer; border: none; background: none; color: var(--muted); }
.ear-results { max-width: 520px; margin: 24px auto; text-align: center; }
.ear-res-main { font: 700 20px inherit; color: #2f7fb8; line-height: 1.4; }
.ear-res-sub { font-size: 16px; color: var(--ink); margin: 8px 0 4px; }
.ear-res-best { font: 700 14px Arial, sans-serif; color: var(--muted); margin: 6px 0 16px; }
.ear-res-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ear-res-btns button { font: 600 15px inherit; padding: 11px 20px; border-radius: 10px; cursor: pointer; border: 1px solid #2f7fb8; background: #fff; color: #2f7fb8; }
.ear-res-btns .ear-primary { background: #2f7fb8; color: #fff; }

/* two-track picker */
.ear-track-btn { display: block; width: 100%; text-align: left; cursor: pointer; margin: 0 0 14px;
  background: #EAF3FA; border: 1.5px solid #CBE0F0; border-radius: 14px; padding: 18px; }
.ear-track-btn:hover { border-color: #2f7fb8; }
.ear-track-name { font-size: 22px; font-weight: 800; color: #2f7fb8; }
.ear-track-blurb { font-size: 15px; color: var(--ink); margin-top: 4px; }
.ear-track-tag { font: 700 13px Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #2f7fb8; }
/* the concept explainer (first run, skippable, re-openable) */
.ear-explain { max-width: 560px; margin: 0 auto; text-align: center; }
.ear-explain-step { font: 700 12px Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ear-explain-line { font-size: 21px; font-weight: 600; line-height: 1.5; color: var(--ink); margin: 0 auto 10px; max-width: 520px; }
.ear-explain-sub { font-size: 16px; line-height: 1.5; color: var(--ink); margin: 0 auto 14px; max-width: 500px; }
.ear-explain-board { margin: 8px auto 4px; max-width: 380px; }
.ear-explain-board svg { display: block; width: 100%; height: auto; }
.ear-explain-nav { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.ear-explain-nav .ear-primary { font: 700 15px inherit; padding: 11px 22px; border-radius: 20px; cursor: pointer; border: 1px solid #2f7fb8; background: #2f7fb8; color: #fff; }
.ear-explain-skip { display: block; margin: 12px auto 0; font: 600 14px inherit; padding: 8px 14px; border-radius: 20px; cursor: pointer; border: none; background: none; color: var(--muted); }
.ear-explain-open { display: block; margin: 14px auto 0; font: 600 14px inherit; padding: 10px 16px; border-radius: 20px; cursor: pointer; border: 1px solid #CBE0F0; background: #fff; color: #2f7fb8; }

/* drone pill + live volume slider (Track B) */
.ear-drone-wrap { display: inline-flex; align-items: center; gap: 10px; }
.ear-vol { width: 84px; accent-color: #2f7fb8; cursor: pointer; }
/* multiple-choice interval names (Track D) */
.ear-opts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 520px; margin: 18px auto 0; opacity: .5; pointer-events: none; }
.ear-opts.live { opacity: 1; pointer-events: auto; }
.ear-opt-btn { font: 700 16px inherit; padding: 12px 18px; min-width: 130px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid #CBE0F0; background: #fff; color: #2f7fb8; transition: transform .08s ease; }
.ear-opt-btn:hover { border-color: #2f7fb8; background: #EAF3FA; }
.ear-opt-btn:active { transform: scale(.97); }
.ear-opt-btn.opt-correct { border-color: #2e7d32; background: #E7F4E8; color: #2e7d32; }
.ear-opt-btn.opt-wrong { border-color: #C0392B; background: #FBEAE7; color: #C0392B; }
/* the full-palette capstone (D5) keeps all twelve options on screen: tighten
   the grid so picking from EVERYTHING stays the test without a six-row wall */
.ear-opts.dense { gap: 7px; max-width: 560px; }
.ear-opts.dense .ear-opt-btn { min-width: 102px; padding: 9px 8px; font-size: 14px; }
/* lesson -> ear-training recommendation card (in the practice panel) */
.ear-rec { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px;
  background: #EAF3FA; border: 1.5px solid #CBE0F0; border-radius: 12px; padding: 13px 15px; }
.ear-rec .ear-ic { font-size: 22px; flex: none; }
.ear-rec p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.45; }
.ear-rec a { margin-left: auto; flex: none; text-decoration: none; font: 700 14px inherit; color: #fff;
  background: #2f7fb8; padding: 8px 14px; border-radius: 20px; }
.ear-rec a:hover { filter: brightness(1.05); }

/* home-page Ear training card */
.ear-home { margin: 10px 0 6px; }
.ear-card { display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: #EAF3FA; border: 1.5px solid #CBE0F0; border-radius: 14px; padding: 16px 18px; }
.ear-card:hover { border-color: #2f7fb8; }
.ear-card .ear-ic { font-size: 26px; flex: none; }
.ear-card b { display: block; color: var(--ink); font-size: 18px; }
.ear-card small { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.ear-card .ear-badge { margin-left: auto; flex: none; font: 700 11px Arial, sans-serif; letter-spacing: .5px;
  text-transform: uppercase; color: #2f7fb8; background: #fff; border: 1px solid #CBE0F0; padding: 4px 10px; border-radius: 20px; }

/* quiet legal footer (attribution) on every page */
.site-foot { text-align: center; padding: 26px 16px 34px; margin-top: 20px; }
.site-foot a { color: var(--muted); font-size: 13px; text-decoration: none; }
.site-foot a:hover { color: var(--violet); text-decoration: underline; }
.site-foot .foot-sep { color: var(--muted); font-size: 13px; margin: 0 8px; }
.site-foot .teach-link.active { color: var(--coral); font-weight: 600; }
.site-foot .teach-note { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }
/* credits page */
.credits { max-width: 640px; margin: 0 auto; padding: 8px 20px 40px; }
.credits section { margin: 0 0 22px; }
.credits h2 { font-size: 18px; color: var(--violet); margin: 0 0 6px; }
.credits p { color: var(--ink); line-height: 1.6; margin: 0; }
.credits a { color: var(--violet); }
.sf-caption { font: 700 19px Arial, sans-serif; opacity: 0; animation: sf-fade .5s ease .35s forwards; }
/* the arrow + its head fade in as a group (re-triggered on "Hear it again").
   Base opacity stays 1 so the arrow is visible even if the animation never runs. */
.sf-arrowgroup { animation: sf-fade .5s ease .15s both; }
@keyframes sf-fade { from { opacity: 0; } to { opacity: 1; } }
.pkey.linked { fill: var(--coral); }
.pkey.black.linked { fill: var(--coral); }

/* mapping figure: dashed connector lines, brighten when the pair is active */
.connector { stroke: var(--coral); stroke-width: 1.4; stroke-dasharray: 4 5;
  opacity: 0.3; transition: opacity 0.15s ease, stroke-width 0.15s ease; }
.connector.on { opacity: 1; stroke-width: 2.4; }
.notehead.sel ellipse { stroke: var(--coral); stroke-width: 3; }

.strands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 10px 0 16px; }
.strand-card { background: var(--soft); border: 1px solid #DDD9F0; border-radius: 12px; padding: 14px; }
.strand-card h3 { margin: 0 0 6px; color: var(--violet); font-size: 17px; }
.strand-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.checkpoint { font-style: italic; font-weight: bold; color: var(--violet); text-align: center; }

/* Part 4: the practice section is unmistakably its own thing */
.practice-panel { background: var(--lav); border: 1px solid #D9CFF7; border-radius: 16px; padding: 22px 24px; text-align: left; }
.practice-head { display: flex; align-items: center; gap: 11px; margin: 0 0 8px; }
.practice-panel .practice-head svg { width: 26px; height: 26px; color: var(--violet); flex: none; }
.practice-head h2 { margin: 0; font-size: 21px; color: var(--violet); letter-spacing: -.01em; }
.practice-intro { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.practice-panel .strand-card { background: #fff; }
.practice-panel .checkpoint { text-align: left; margin-bottom: 0; }
.practice-challenge { margin: 16px 0 2px; text-align: center; }
.challenge-btn { font: 700 16px inherit; padding: 11px 22px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--violet), var(--coral)); color: #fff; }
.challenge-btn:hover { filter: brightness(1.06); }

/* speed round (a game, not an exam) */
.speed { text-align: center; }
.speed-bar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 16px; }
.speed-score { font: 700 22px inherit; color: var(--violet); }
/* the countdown: large, tabular, calm brand blue; a warm (not alarming) amber
   in the last ten seconds */
.speed-timer { font-weight: 800; font-size: 30px; color: var(--brand-600, #2b4c8c); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.speed-timer.low { color: #B26A00; }
/* free-reading cue, shown until the first note starts the clock */
.speed-cue { font: 500 13px inherit; color: var(--muted); margin: -8px 0 14px; }
.speed-prompt { font-size: 22px; font-weight: 600; margin: 0 0 12px; }
.speed-q svg { display: block; width: 100%; max-width: 520px; margin: 0 auto; height: auto; }
.speed-options { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.speed-end { padding: 18px 0; }
.speed-endscore { font: 700 24px inherit; color: var(--violet); }
.speed-endsub { color: var(--muted); margin: 8px 0; font-size: 16px; }
.speed-best { font-size: 15px; color: var(--ink); margin-bottom: 16px; }
.speed-endbtns { display: flex; justify-content: center; gap: 12px; }
.speed-endbtns button { font: 600 15px inherit; padding: 10px 20px; border-radius: 9px; border: 1px solid var(--violet); background: #fff; color: var(--violet); cursor: pointer; }
.speed-endbtns .primary { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }

.nav { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; }
.nav button { font-family: Arial, sans-serif; font-size: 15px; padding: 9px 18px;
  border-radius: 8px; border: 1px solid var(--violet); background: #fff; color: var(--violet); cursor: pointer; }
.nav button:hover:not(:disabled) { background: var(--lav); }
.nav button:disabled { opacity: 0.4; cursor: default; }
.dots { display: flex; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--violet);
  background: #fff; padding: 0; cursor: pointer; }
.dot.on { background: var(--coral); border-color: var(--coral); }

/* Learning path (home) */
.path { list-style: none; padding: 0; margin: 22px 0 8px; }
.path .mod { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid #E3E0F0; border-radius: 12px; margin: 0 0 12px; background: #fff;
  cursor: default; } /* cards are not links yet — no clickable affordance */
.path .num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid;
  place-items: center; font-weight: 700; font-size: 15px; background: var(--lav); color: var(--violet); }
.path .mod-body { flex: 1; min-width: 0; }
.path .mod-body h2 { margin: 0; font-size: 17px; color: var(--ink); font-weight: 600; }
.path .badge.start { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #fff; background: var(--coral); padding: 3px 9px; border-radius: 20px; margin: 0 0 5px; }
.path .mod-note { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.path .lock { color: var(--muted); width: 20px; height: 20px; flex: none; }

/* the current, open module — lists its ready lessons */
.path .mod.open { border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); align-items: flex-start; }
.path .mod.open .num { margin-top: 2px; }
.lesson-links { list-style: none; padding: 0; margin: 10px 0 2px; }
.lesson-links li { margin: 6px 0; }
.lesson-links a { display: inline-block; color: var(--violet); font-size: 15px; font-weight: 600;
  text-decoration: none; padding: 2px 0; }
.lesson-links a:hover { color: var(--coral); }
/* locked modules — clearly muted, not interactive */
.path .mod.locked { background: var(--soft); border-style: dashed; }
.path .mod.locked .num { background: #E8E6F0; color: var(--muted); }
.path .mod.locked .mod-body h2 { color: var(--muted); font-weight: 500; }

/* engine template / preview — separated from the student path */
.preview-sep { margin: 28px 0 12px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); border-top: 1px solid #E3E0F0; padding-top: 16px; }
.preview-list { list-style: none; padding: 0; margin: 0; }
.preview-list li { margin: 8px 0; }
.preview-list a { color: var(--violet); font-size: 16px; text-decoration: none; font-weight: 600; }
.preview-list a:hover { color: var(--coral); }
.preview-list .hint { display: block; font-size: 13px; color: var(--muted); font-weight: 400; margin-top: 2px; }

/* per-step guidance — a pulsing coral RING, never a fill (fill = correct only) */
.notehead ellipse { transition: fill .18s ease, opacity .18s ease; }
.notehead.spot ellipse { fill: var(--coral); }
.has-spot .notehead:not(.spot) ellipse { opacity: .28; }
.pkey { transition: fill .18s ease; }
.pkey.guide { stroke: var(--coral); animation: guide-pulse 1.15s ease-in-out infinite; }
.pkey.guide.guide-strong { animation-duration: .7s; }
@keyframes guide-pulse { 0%, 100% { stroke-width: 2.5; } 50% { stroke-width: 5; } }
.guide-chevron { fill: var(--coral); animation: guide-pulse-op 1.15s ease-in-out infinite; pointer-events: none; }
@keyframes guide-pulse-op { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* escalation line + hint button */
.gate-hint { margin: 10px auto 0; max-width: 520px; font-size: 15px; color: var(--coral); font-weight: 600; }
.hint-btn { display: inline-block; margin: 10px 0 0; font: 600 14px inherit; padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--violet); background: #fff; color: var(--violet); cursor: pointer; }
.hint-btn:hover { background: var(--lav); }
.hint-btn.pulse { animation: hint-pulse 1.1s ease-in-out infinite; border-color: var(--coral); color: var(--coral); }
@keyframes hint-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(216,90,48,0); } 50% { box-shadow: 0 0 0 5px rgba(216,90,48,.18); } }

/* ── Exercise set (quick check) ── */
.ex-intro { font-size: 15px; line-height: 1.5; color: var(--muted); font-style: italic;
  margin: 0 0 14px; padding: 10px 14px; background: var(--soft); border-radius: 10px; }
.ex-prog { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ex-prompt { font-size: 18px; font-weight: 500; line-height: 1.5; margin: 6px 0 14px; }
.ex-stage svg { display: block; width: 100%; height: auto; margin: 6px 0 12px; }
.ex-stage .pkey, .ex-hit { cursor: pointer; }
.ex-play { margin: 0 0 6px; }
.ex-play button, .ex-controls button, .ex-results button {
  font: 600 15px inherit; padding: 9px 18px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--violet); background: #fff; color: var(--violet); }
.ex-play button:hover, .ex-controls button:hover, .ex-results button:hover { background: var(--lav); }
.ex-options { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; justify-content: center; }
/* definition-recall options carry sentences, so stack them full-width (Fix 5) */
.ex-options-wide { flex-direction: column; align-items: stretch; max-width: 460px; margin-left: auto; margin-right: auto; }
.ex-options-wide .opt { width: 100%; font-size: 16px; text-align: center; }
.opt { font: 700 18px inherit; min-width: 64px; padding: 12px 18px; border-radius: 10px;
  border: 1px solid var(--violet); background: #fff; color: var(--violet); cursor: pointer; }
.opt:hover { background: var(--lav); }
.opt { position: relative; }
.burst-dom { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid var(--gold); border-radius: 50%; pointer-events: none; animation: burst-dom .55s ease-out forwards; }
@keyframes burst-dom { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.6); } }
.ex-results .primary { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.ex-fb { min-height: 46px; margin: 8px 0; font-size: 16px; line-height: 1.5; }
.ex-fb.ok { color: #2E7D32; font-weight: 600; }
.ex-fb.miss { color: var(--ink); }
.ex-controls { margin-top: 6px; }
.ex-results { text-align: center; padding: 18px 0 6px; }
.ex-score { font-size: 20px; font-weight: 700; color: var(--violet); line-height: 1.4; }
.ex-sub { color: var(--muted); margin: 8px 0 14px; font-size: 16px; }
.ex-results button { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.ex-results button:hover { background: var(--violet); }

/* ── Card layout (Part D) — one step per screen ── */
.card-top { display: flex; align-items: center; gap: 14px; margin: 4px 0 8px; }
.outline-btn { flex: none; width: 40px; height: 40px; border-radius: 9px; border: 1px solid #E3E0F0;
  background: #fff; color: var(--violet); font-size: 18px; cursor: pointer; }
.outline-btn:hover { background: var(--lav); }
.progress { flex: 1; height: 8px; border-radius: 5px; background: var(--lav); overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--coral); border-radius: 5px; transition: width .25s ease; }
.card-kicker { flex: none; font: 700 12px Arial, sans-serif; letter-spacing: 1.5px; color: var(--coral); }

.card-stage { min-height: 58vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12px 0 4px; transition: opacity .17s ease; }
.card-stage.fading { opacity: 0; }
.card-figure { width: 100%; max-width: 640px; margin: 0 auto; transition: opacity .15s ease, filter .15s ease; }
.card-figure svg { display: block; width: 100%; height: auto; }
/* keyboard shown but no input wanted yet: dim it as a "not now" cue. Still
   clickable (opacity/filter don't block clicks), so a stray press still sounds. */
.card-figure.kb-dim { opacity: .5; filter: saturate(.55); }
/* the action line: one clear instruction per step, made to dominate the card */
.card-say { font-size: 23px; line-height: 1.5; color: var(--ink); font-weight: 600; max-width: 640px; margin: 22px auto 0; }

.card-nav { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 40px; }
.card-nav button { font: 600 16px inherit; padding: 11px 22px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--violet); background: #fff; color: var(--violet); }
.card-nav .continue { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.card-nav button:hover:not(:disabled) { filter: brightness(1.05); }
.card-nav .back:hover:not(:disabled) { background: var(--lav); }
.card-nav button:disabled { opacity: .35; cursor: default; }

/* outline drawer (old transcript, demoted to navigation) */
.drawer { position: fixed; inset: 0 auto 0 0; width: min(320px, 84vw); background: #fff; z-index: 40;
  box-shadow: 2px 0 24px rgba(38,33,92,.18); overflow-y: auto; padding: 18px 16px 40px; }
.drawer[hidden] { display: none; }
.drawer-scrim { position: fixed; inset: 0; background: rgba(20,16,40,.35); z-index: 39; }
.drawer-scrim[hidden] { display: none; }
.drawer h3 { margin: 0 0 12px; font-size: 15px; color: var(--violet); letter-spacing: 1px; text-transform: uppercase; }
.drawer .d-section { margin: 0 0 4px; font: 700 11px Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 8px 8px 2px; }
.drawer .d-step { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font: 400 14px inherit; line-height: 1.4; color: var(--muted); padding: 6px 10px; border-radius: 7px; border-left: 3px solid transparent; }
.drawer .d-step:hover { background: var(--soft); color: var(--ink); }
.drawer .d-step.on { background: var(--lav); color: var(--ink); border-left-color: var(--coral); font-weight: 500; }

/* ---- lesson-header nav (Part 1a): logo links home + "All lessons" ---- */
header.site .lockup { flex-wrap: wrap; }
header.site .lockup-home { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
header.site .lockup-home:hover .mark b { text-decoration: underline; }
header.site .all-lessons { margin-left: auto; color: #fff; font: 600 14px inherit; text-decoration: none;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.34); padding: 7px 14px; border-radius: 20px; }
header.site .all-lessons:hover { background: rgba(255,255,255,.26); }
/* Web MIDI affordance. Lives in the page chrome, matching .all-lessons, because
   connecting a device is not part of the lesson flow. Never rendered at all
   where Web MIDI does not exist (Safari/iOS): midi.js returns null. */
header.site .midi-chip { color: #fff; font: 600 13px inherit; cursor: pointer; margin-left: 8px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.34); padding: 6px 12px; border-radius: 20px; }
header.site .midi-chip:hover:not(:disabled) { background: rgba(255,255,255,.26); }
header.site .midi-chip.on { background: rgba(255,255,255,.30); border-color: rgba(255,255,255,.62); }
header.site .midi-chip:disabled { cursor: default; }

/* ---- drawer: jump-to-any-lesson list (Part 1b) ---- */
.drawer .d-outline-head { margin-top: 22px; }
.drawer .d-lessons { display: flex; flex-direction: column; gap: 2px; margin: 0 0 6px; }
.drawer .d-lesson { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-decoration: none; font: 500 14px inherit; color: var(--violet);
  padding: 9px 10px; border-radius: 8px; border-left: 3px solid transparent; }
.drawer .d-lesson:hover { background: var(--soft); }
.drawer .d-lesson.current { background: var(--lav); color: var(--ink); border-left-color: var(--coral); cursor: default; }
.drawer .d-here { font: 700 10px Arial, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: var(--coral); flex: none; }
/* section headers are now jumpable buttons (reset button chrome, keep the label look) */
.drawer .d-section { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; }
.drawer .d-section:hover { color: var(--violet); }

/* ---- "Hear it again" replay (Part 2) ---- */
.replay-row { text-align: center; margin: 14px 0 0; }
.replay-btn { font: 600 14px inherit; padding: 8px 16px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--coral); background: #fff; color: var(--coral); }
.replay-btn:hover { background: #FBEDE7; }

/* ---- home-page speed-round chip (Part 1c) ---- */
/* scoped under .lesson-links so it out-specifies `.lesson-links a` (which else
   forces the chip text violet instead of the coral signal colour). */
.lesson-links a.speed-chip { display: inline-block; margin-left: 10px; vertical-align: middle;
  font: 700 12px Arial, sans-serif; letter-spacing: .3px; text-decoration: none;
  color: var(--coral); background: #FBEDE7; border: 1px solid #EBC7B8; padding: 3px 10px; border-radius: 20px; }
.lesson-links a.speed-chip:hover { background: var(--coral); color: #fff; border-color: var(--coral); }

@media (max-width: 640px) {
  .strands { grid-template-columns: 1fr; }
  h1 { font-size: 26px; }
  .ex-prompt { font-size: 16px; }
  .card-say { font-size: 19px; }
  .card-kicker { display: none; }
  .card-stage { min-height: 52vh; }
  header.site .all-lessons { margin-left: 0; margin-top: 10px; }
  .speed-chip { margin-left: 0; margin-top: 4px; }
  .lesson-links a:first-child { display: block; }
}

/* ============================================================
   TEACH MODE (presenter view) — only active on body.teach, set
   by ?teach=1. Pure presentation; no figure logic touched. The
   whole block is inert for students (no teach class, no styles).
   ============================================================ */

/* Always-on "you are presenting" ribbon, out of the content flow. */
.teach-ribbon { position: fixed; top: 0; right: 0; z-index: 60;
  background: var(--coral); color: #fff; font: 700 12px/1 Arial, sans-serif;
  letter-spacing: 2px; text-transform: uppercase; padding: 8px 14px;
  border-bottom-left-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* Big-screen layout: wider column, larger reading + instruction text. */
body.teach main { max-width: 1200px; }
body.teach .card-say { font-size: 26px; line-height: 1.4; max-width: 30ch; }

/* Scale the projected visuals. The figures are SVG in .card-figure; we scale
   the container's rendered width (they lay out fluid inside), no JS changes. */
body.teach .card-figure { width: 100%; }
body.teach .card-figure svg { width: 100%; height: auto; max-width: 1000px; }
/* Formula bar + counters read larger on a big screen. */
body.teach .formula-holder, body.teach .count-holder { transform: scale(1.15); transform-origin: center; }
/* Replay buttons: large and unmissable during a demo. */
body.teach .replay-row { gap: 14px; }
body.teach .replay-btn { font-size: 18px; padding: 12px 20px; }

/* "checkpoint — students do this solo" flag on assessment steps. The [hidden]
   guard must follow — this display rule otherwise out-specifies UA [hidden]. */
body.teach .teach-flag { display: inline-block; margin: 0 auto 10px; padding: 5px 12px;
  background: #FEF3C7; color: #92400E; border: 1px solid #F59E0B; border-radius: 999px;
  font: 700 13px Arial, sans-serif; letter-spacing: .3px; }
body.teach .teach-flag[hidden] { display: none; }
body.teach .teach-notes[hidden] { display: none; }

/* Archived teacher notes panel — teacher-facing, never in the student build. */
body.teach .teach-notes { max-width: 820px; margin: 18px auto 0; text-align: left;
  background: var(--soft); border: 1px solid #E4E1F5; border-left: 4px solid var(--violet);
  border-radius: 10px; padding: 16px 20px; color: var(--ink); }
body.teach .teach-notes h4 { margin: 14px 0 6px; color: var(--violet);
  font-size: 15px; letter-spacing: .2px; }
body.teach .teach-notes h4:first-child { margin-top: 0; }
body.teach .teach-notes p { margin: 6px 0; font-size: 15px; line-height: 1.55; }
body.teach .teach-notes ul { margin: 6px 0 6px 18px; }
body.teach .teach-notes li { font-size: 15px; line-height: 1.5; margin: 3px 0; }
body.teach .teach-notes code { background: #EDE9FE; padding: 1px 5px; border-radius: 4px;
  font-size: 13px; }

@media (max-width: 640px) {
  body.teach .card-say { font-size: 20px; }
  body.teach .teach-ribbon { font-size: 10px; padding: 6px 10px; }
}

/* Owner-facing progress view (Slice 3, ?progress=1). Diagnostic only; never on the
   student path. Neutral tones; strands inform, never gate. */
.owner-progress { max-width: 720px; margin: 8px auto 40px; padding: 0 20px; }
.owner-progress h2 { color: var(--violet); font-size: 22px; margin: 8px 0 4px; }
.owner-progress .op-note { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.op-strands { display: grid; gap: 12px; }
.op-strand { border: 1.5px solid #E4E1F5; border-radius: 12px; padding: 12px 14px; background: var(--soft); }
.op-strand.op-on { border-color: #CBE0F0; background: #fff; }
.op-label { font: 700 15px inherit; color: var(--ink); }
.op-ev { color: var(--muted); font-size: 12px; margin-top: 2px; }
.op-empty { color: var(--muted); font-size: 13px; margin-top: 6px; font-style: italic; }
.op-sig { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-top: 6px; color: var(--ink); }
.op-sig span:first-child { color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.op-actions { margin-top: 16px; display: flex; gap: 10px; }
.op-actions button { font: 600 13px inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--brand-dark); background: var(--brand-600, #2b4c8c); color: #fff; cursor: pointer; }
.op-actions button:hover { background: var(--brand-dark); }
#op-json { margin-top: 12px; background: #0b1220; color: #cfe3ff; padding: 12px; border-radius: 8px; font-size: 11px; overflow-x: auto; max-height: 300px; }