:root {
  color-scheme: light;
  --paper: #f5f2e9;
  --ink: #283226;
  --muted: #5e6b55;
  --line: #d7ddc9;
  --accent: #dce9a9;
  --visual-surface: #faf8f1;
  --visual-raised: #fffdf7;
  --visual-soft: #edf0e2;
  --visual-band: #e3ead5;
  --visual-subtle: #627057;
  --visual-strong: #3c5630;
  --visual-button: #364c2d;
  --visual-button-ink: #f5f6e9;
  --visual-selected: #dce8c9;
  --visual-selection-bg: #f2e4d3;
  --visual-selection-ink: #8b4b28;
  --visual-selection-border: #b4794c;
  --visual-dark: #263327;
  --visual-dark-ink: #eff2e5;
  --visual-dark-muted: #becbb0;
  --visual-dark-line: #52624a;
  --visual-plot: #f9f9ef;
  --visual-page-glow: #dce3cd33;
  --visual-shadow: #28331d09;
  --visual-cursor: #6f864b;
  --visual-cursor-halo: #92a76b22;
  --visual-stack-color: #e5e8d8;
}
html[data-visual-theme="mist"] {
  --paper: #edf2f5;
  --ink: #223a46;
  --muted: #526c7a;
  --line: #cbd9e0;
  --accent: #c9e5e8;
  --visual-surface: #f5f9fb;
  --visual-raised: #fbfdfe;
  --visual-soft: #e4edf1;
  --visual-band: #dce9ed;
  --visual-subtle: #556e7b;
  --visual-strong: #365c6b;
  --visual-button: #315664;
  --visual-button-ink: #f5fafb;
  --visual-selected: #d6e7eb;
  --visual-selection-bg: #e5dfd4;
  --visual-selection-ink: #7b5636;
  --visual-selection-border: #a7805b;
  --visual-dark: #253b46;
  --visual-dark-ink: #edf5f5;
  --visual-dark-muted: #b6ced6;
  --visual-dark-line: #516d7b;
  --visual-plot: #f3f7f6;
  --visual-page-glow: #c8dfe94d;
  --visual-shadow: #243d4d0a;
  --visual-cursor: #508c9c;
  --visual-cursor-halo: #8abccc25;
  --visual-stack-color: #dce7ed;
}
html[data-visual-theme="night"] {
  color-scheme: dark;
  --paper: #101b23;
  --ink: #ececde;
  --muted: #b0c2c4;
  --line: #344c58;
  --accent: #b4d4bd;
  --visual-surface: #182832;
  --visual-raised: #1b2e39;
  --visual-soft: #1b2e38;
  --visual-band: #243e45;
  --visual-subtle: #91acb3;
  --visual-strong: #b3d5c5;
  --visual-button: #b6d6c4;
  --visual-button-ink: #172c2d;
  --visual-selected: #304b50;
  --visual-selection-bg: #493e34;
  --visual-selection-ink: #f2c9a0;
  --visual-selection-border: #bb966d;
  --visual-dark: #0c1922;
  --visual-dark-ink: #f0f0e3;
  --visual-dark-muted: #abc2c4;
  --visual-dark-line: #3f5c64;
  --visual-plot: #e9efe8;
  --visual-page-glow: #29475338;
  --visual-shadow: #040b1038;
  --visual-cursor: #bddbc8;
  --visual-cursor-halo: #94c9bb25;
  --visual-stack-color: #233944;
}

html { scroll-padding-bottom: 160px; }
body {
  background: radial-gradient(ellipse at 90% 4%, var(--visual-page-glow), transparent 42%), var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--visual-selected); color: var(--ink); }
body > header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(18px, 2.6vw, 40px);
  border-color: var(--line);
  position: relative;
  z-index: 15;
}
body > header > nav { justify-self: center; }
header nav .active::after { background: var(--visual-strong); height: 2px; }
.brand { font-weight: 600; letter-spacing: -.5px; }
.brand span { color: var(--muted); }
.visual-header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 24px; min-width: 0; }
.visual-header-tools .edition { font-size: 9px; letter-spacing: 1.1px; color: var(--visual-subtle); white-space: nowrap; }
.visual-appearance { position: relative; }
.visual-appearance-trigger { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--visual-surface); white-space: nowrap; }
.visual-appearance-trigger:hover, .visual-appearance-trigger[aria-expanded="true"] { border-color: var(--visual-subtle); background: var(--visual-soft); }
.visual-appearance-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--visual-button); border: 2px solid var(--visual-surface); box-shadow: 0 0 0 1px var(--line); }
.visual-appearance-panel { position: absolute; right: 0; top: calc(100% + 12px); z-index: 30; width: 285px; max-width: calc(100vw - 32px); padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--visual-raised); box-shadow: 0 15px 45px #0a1b2721; }
.visual-appearance-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.visual-appearance-heading strong { font-size: 13px; font-weight: 500; }
.visual-appearance-heading > span { font-size: 10px; color: var(--visual-subtle); }
.visual-theme-options { border: 0; margin: 0; padding: 0; display: grid; gap: 7px; }
.visual-theme-option { position: relative; display: flex; align-items: center; gap: 11px; min-height: 59px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
.visual-theme-option:has(input:checked) { border-color: var(--visual-strong); background: var(--visual-soft); }
.visual-theme-option > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.visual-theme-option:has(input:focus-visible) { outline: 2px solid var(--visual-strong); outline-offset: 3px; }
.visual-theme-option b { font-size: 12px; font-weight: 500; display: block; line-height: 1.6; }
.visual-theme-option small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.visual-theme-swatch { width: 31px; height: 34px; flex-shrink: 0; border-radius: 4px; overflow: hidden; display: flex; align-items: flex-end; border: 1px solid #62726422; }
.visual-theme-swatch i { display: block; height: 9px; width: 100%; }
.visual-theme-swatch-paper { background: #f5f2e9; }.visual-theme-swatch-paper i { background: #74864b; }
.visual-theme-swatch-mist { background: #e8f0f4; }.visual-theme-swatch-mist i { background: #658f9f; }
.visual-theme-swatch-night { background: #152732; }.visual-theme-swatch-night i { background: #aecfbe; }
.visual-theme-check { margin-left: auto; color: var(--visual-strong); opacity: 0; font-size: 14px; }
.visual-theme-option:has(input:checked) .visual-theme-check { opacity: 1; }
.visual-effect-options { border-top: 1px solid var(--line); padding-top: 11px; margin-top: 13px; display: grid; gap: 5px; }
.visual-effect-options label { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; font-size: 12px; color: var(--muted); cursor: pointer; }
.visual-effect-options input { width: 16px; height: 16px; accent-color: var(--visual-strong); }

.home-intro { padding-top: clamp(34px, 4vw, 58px); padding-bottom: 36px; }
.home-intro h1 { line-height: 1.25; letter-spacing: -.035em; text-wrap: balance; }
.home-v2 .home-intro > p { color: var(--muted); line-height: 1.9; }
.home-feature { background: var(--visual-dark); color: var(--visual-dark-ink); box-shadow: 0 13px 32px var(--visual-shadow); border: 1px solid var(--line); border-radius: 9px; }
.home-feature-copy h2 { line-height: 1.12; letter-spacing: -.035em; overflow-wrap: anywhere; }
.home-feature-copy h3 { line-height: 1.6; text-wrap: pretty; }
.home-v2 .home-description, .home-artist { color: var(--visual-dark-muted); }
.live-pill { color: var(--accent); border-color: var(--visual-dark-line); }
.feature-kicker { color: var(--visual-dark-muted); }
.home-v2 .section-label { color: var(--ink); margin-top: 42px; }
.home-v2 .section-label small { color: var(--muted); }
.home-v2 .song-card > h3 { color: var(--ink); line-height: 1.55; }
.home-v2 .song-card > p:not(.card-question) { color: var(--muted); }
.home-v2 .song-card .card-question { color: var(--ink); line-height: 1.8; }
.home-v2 .song-card .tag { color: var(--visual-strong); border-color: var(--line); }
.song-card .record-cover { border-radius: 7px; }
.footer-note, .footer-note button { color: var(--muted); }
.lv-breadcrumb { border-color: var(--line); }
.lv-breadcrumb > button, .song-heading small { color: var(--muted); }
.song-heading strong { color: var(--ink); font-weight: 500; }
.song-navigation { border-color: var(--line); background: var(--visual-soft); }
.song-navigation button { color: var(--muted); }
.song-navigation button.selected { background: var(--visual-button); color: var(--visual-button-ink); }
.topic-line { color: var(--visual-strong); }
.topic-line span { color: var(--muted); background: var(--visual-soft); border-color: var(--line); }
.guide-progress::before { background: var(--line); }
.guide-progress button { color: var(--muted); background: var(--paper); }
.guide-progress button span { border-color: var(--line); }
.guide-progress button.current { color: var(--ink); }
.guide-progress button.current span { color: var(--visual-button-ink); background: var(--visual-button); border-color: var(--visual-button); }
.lv-instruction h1 { font-size: clamp(31px, 3.2vw, 45px); line-height: 1.42; letter-spacing: -.025em; text-wrap: pretty; }
.chapter-eyebrow { color: var(--visual-subtle); }
.lv-task { color: var(--muted); line-height: 1.95; text-wrap: pretty; }
.knowledge-anchor { color: var(--visual-strong); border-color: var(--line); }
.knowledge-anchor:hover { color: var(--ink); border-color: var(--visual-strong); }
.lv-next-row { border-color: var(--line); padding-top: 24px; margin-top: 30px; }
.lv-back { color: var(--muted); }
.lv-primary { background: var(--accent); color: var(--visual-dark); }
.lv-primary:hover { background: var(--accent); filter: brightness(.96); }
.lv-next-row .lv-primary { background: var(--visual-button); color: var(--visual-button-ink); }
.lv-primary:disabled { background: var(--visual-soft); color: var(--visual-subtle); }
.takeaway { background: var(--visual-band); border: 1px solid var(--line); border-radius: 6px; padding: 23px 25px; }
.takeaway > span { color: var(--visual-subtle); letter-spacing: .8px; font-size: 11px; }
.takeaway p { color: var(--visual-strong); line-height: 1.9; }

.song-overview { background: var(--visual-soft); border-color: var(--line); border-radius: 8px; box-shadow: 0 3px 0 var(--visual-shadow); }
.overview-head h2 { color: var(--ink); font-weight: 500; }
.overview-head p, .timeline-ticks { color: var(--muted); }
.overview-head time, .overview-head > .mono, .overview-head > span { color: var(--visual-strong); }
.full-timeline { background: var(--visual-plot); border-color: var(--line); }
.timeline-window { background: #80936526; border-color: #70895377; }
.timeline-window:hover { background: #98ac7a5e; border-color: #597548; }
.timeline-window.selected { background: #c879463d; border-color: #a75d35; }
.timeline-legend button { background: var(--visual-surface); color: var(--ink); border-color: var(--line); }
.timeline-legend button.selected { background: var(--visual-selection-bg); color: var(--visual-selection-ink); border-color: var(--visual-selection-border); }
.timeline-legend time, .timeline-legend small { color: var(--muted); }
.timeline-legend button.selected time { color: var(--visual-selection-ink); }
.timeline-note { color: var(--muted); }
.lv-deck { background: var(--visual-dark); color: var(--visual-dark-ink); box-shadow: 0 9px 26px var(--visual-shadow); border: 1px solid var(--visual-dark-line); border-radius: 9px; }
.deck-heading, .deck-foot, .deck-play small { color: var(--visual-dark-muted); }
.stem-caption { color: var(--visual-dark-muted); }
.deck-play { color: var(--visual-dark-ink); }
.play-glyph { background: var(--accent); color: var(--visual-dark); }
.deck-loop { color: var(--visual-dark-muted); border-color: var(--visual-dark-line); }
.deck-loop.selected { color: var(--visual-dark); background: var(--accent); border-color: var(--accent); }
.stem-lane > label, .stem-lane > span { color: var(--visual-dark-ink); }
.stem-lane.off > label, .stem-lane.off > span { color: #9aa99a; }
.stem-lane .track-status { color: var(--visual-dark-muted); }
.mix-grid button, .source-tabs button { color: var(--visual-dark-muted); border-color: var(--visual-dark-line); }
.mix-grid button.selected, .source-tabs button.selected { color: var(--visual-dark); background: var(--accent); border-color: var(--accent); }
.mix-grid button.off { color: #93a095; background: transparent; border-color: var(--visual-dark-line); }
.mix-hint { color: var(--visual-dark-muted); }
.mute-switch { color: var(--ink); background: var(--visual-band); border-color: var(--line); }
.mute-switch.off { color: var(--muted); background: var(--visual-surface); border-color: var(--line); }
.mute-switch .switch-track { background: var(--visual-strong); }
.mute-switch.off .switch-track { background: var(--visual-subtle); }
.comparison-row button, .compare-actions button, .arrange-choices button { color: var(--ink); background: var(--visual-surface); border-color: var(--line); }
.comparison-row button > span, .comparison-row small, .comparison-row b, .compare-state, .arrange-choices small { color: var(--muted); }
.comparison-row button.selected, .comparison-row .selected { background: var(--visual-selection-bg); border-color: var(--visual-selection-border); }
.comparison-row .selected > span, .comparison-row .selected strong, .comparison-row .selected small { color: var(--visual-selection-ink); }
.compare-actions button.playing, .arrange-choices button.active { background: var(--visual-button); color: var(--visual-button-ink); border-color: var(--visual-button); }
.arrange-choices .active small { color: inherit; }
.compare-state { line-height: 1.8; }
.map-return, .listen-again { color: var(--visual-strong); background: var(--visual-band); border-color: var(--line); }
.listen-again { box-shadow: inset 3px 0 var(--visual-subtle); }
.listen-again p { color: var(--visual-strong); }
.listen-again button { color: var(--visual-strong); background: var(--visual-raised); border-color: var(--visual-subtle); }
.listen-again button:hover { background: var(--visual-selected); }
.map-title-row h1, .map-inspector h2 { color: var(--ink); }
.map-title-row > p, .map-inspector > p { color: var(--muted); }

.theory-panel { padding: clamp(22px, 2.5vw, 34px); margin-top: 37px; background: var(--visual-soft); border-color: var(--line); border-radius: 9px; box-shadow: 0 5px 0 var(--visual-shadow); }
.theory-heading h2 { color: var(--ink); line-height: 1.6; letter-spacing: -.025em; max-width: 34em; text-wrap: pretty; }
.theory-heading > span, .theory-heading .eyebrow, .theory-heading .kicker { color: var(--visual-subtle); }
.term-card { background: var(--visual-raised); border-color: var(--line); padding: 20px 21px; border-radius: 6px; }
.term-card h3, .term-card > strong { color: var(--visual-strong); font-weight: 500; }
.term-card h3 small, .term-card > strong small { color: var(--visual-subtle); }
.term-card p, .theory-explanation p, .theory-explanation li { color: var(--muted); line-height: 1.95; }
.term-card em { color: var(--visual-selection-ink); }
.theory-explanation { border-color: var(--line); gap: 26px; }
.theory-explanation h3, .theory-explanation strong { color: var(--visual-strong); font-weight: 500; }
.theory-takeaway, .theory-summary { background: var(--visual-band); color: var(--visual-strong); border-color: var(--visual-subtle); }
.theory-figure { background: #f5f6ed; border-color: #c9d4bb; color: #334629; }
.theory-figure h3 { color: #415a32; }
.theory-figure figcaption, .theory-figure .figure-caption, .theory-figure > p { color: #5d7150; }
.theory-figure .concept-note { color: #5e6f51; }
.synth-panel { background: var(--visual-soft); border-color: var(--line); border-radius: 8px; }
.synth-kicker, .synth-legend, .synth-status, .synth-help { color: var(--muted); }
.synth-panel svg { background: #f4f5e9; color-scheme: light; border: 1px solid #d4ddc9; }
.synth-choices button { color: var(--ink); background: var(--visual-surface); border-color: var(--line); }
.synth-choices small { color: var(--muted); }
.synth-choices button.selected { background: var(--visual-button); color: var(--visual-button-ink); border-color: var(--visual-button); }
.synth-choices .selected small { color: inherit; }

#player { background: var(--visual-dark); color: var(--visual-dark-ink); border-color: var(--visual-dark-line); box-shadow: 0 -6px 28px #09121618; }
#player .player-btn { background: var(--accent); color: var(--visual-dark); }
#player .player-title small, #player .time, #player .player-bottom { color: var(--visual-dark-muted); }
#player .timeline input, #player .volume { accent-color: var(--accent); }
#player .player-ask { color: var(--visual-dark-ink); border-color: var(--visual-dark-line); background: #ffffff03; }
#player .player-ask:hover { background: #ffffff0a; border-color: var(--accent); }
#player .marker-row button { color: var(--accent); }
.listening-atlas { border: 1px solid var(--line); box-shadow: 0 16px 45px var(--visual-shadow); }
html[data-visual-theme="mist"] .listening-atlas::before { background: radial-gradient(ellipse at 20% 15%, #43647342, transparent 55%), linear-gradient(135deg, #142732, #182630 74%); }
html[data-visual-theme="night"] .listening-atlas::before { background: radial-gradient(ellipse at 28% 22%, #28485454, transparent 58%), linear-gradient(130deg, #111f2b, #0d1a27 75%); }
.listening-atlas .atlas-heading h1 { letter-spacing: .045em; }

.drawer, .mq-drawer { background: var(--visual-surface); color: var(--ink); }
.drawer p, .drawer .fine { color: var(--muted); }
.drawer .source-link { color: var(--visual-strong); }
.mq-drawer { scrollbar-color: var(--visual-subtle) var(--visual-soft); }
.mq-topline, .mq-material, .mq-recent { border-color: var(--line); }
.mq-topline, .mq-section-line > span, .mq-intro, .mq-eyebrow, .mq-evidence, .mq-listen, .mq-more p, .mq-foot { color: var(--muted); }
.mq-close { color: var(--visual-strong); background: var(--visual-soft); border-color: var(--line); }
.mq-drawer h2 { color: var(--ink); }
.mq-drawer h2 > span { color: var(--visual-subtle); }
.mq-location { background: var(--visual-band); border-color: var(--line); }
.mq-clock { color: var(--visual-strong); border-color: var(--line); }
.mq-location > div > span { color: var(--muted); }
.mq-drawer textarea { color: var(--ink); background: var(--visual-raised); border-color: var(--line); }
.mq-drawer textarea::placeholder { color: var(--visual-subtle); }
.mq-submit { color: var(--visual-button-ink); background: var(--visual-button); border-color: var(--visual-button); }
.mq-submit-row > span, .mq-status { color: var(--muted); }
.mq-status[data-kind="error"] { color: var(--visual-selection-ink); }
.mq-status[data-kind="success"] { color: var(--visual-strong); }
.mq-material-topic, .mq-more summary, .mq-recent summary, .mq-saved-answer { color: var(--visual-strong); }
.mq-terms button { color: var(--muted); background: var(--visual-soft); border-color: var(--line); }
.mq-terms button[aria-pressed="true"] { color: var(--visual-strong); background: var(--visual-selected); border-color: var(--visual-subtle); }
.mq-definition { background: var(--visual-soft); color: var(--ink); border-color: var(--visual-subtle); }
.mq-definition p { color: var(--muted); }
.mq-evidence > b, .mq-listen > b, .mq-recent h3, .mq-recent article > span { color: var(--visual-subtle); }
.mq-more { border-color: var(--line); }
.mq-answer { background: var(--visual-band); border-color: var(--line); }
.mq-answer h3 { color: var(--visual-strong); }
.mq-recent article { border-color: var(--visual-subtle); }

.song-recs { border-color: var(--line); }
.song-recs-heading h2 { color: var(--ink); }
.song-recs-eyebrow, .song-recs-heading > p { color: var(--muted); }
.song-recs-eyebrow::before { background: var(--visual-subtle); }
.song-recs-tabs { border-color: var(--line); }
.song-recs-tab { color: var(--muted); }
.song-recs-tab > span { color: var(--visual-subtle); }
.song-recs-tab:hover { color: var(--visual-strong); background: var(--visual-soft); }
.song-recs-tab[aria-selected="true"] { background: var(--visual-selected); color: var(--visual-strong); border-color: var(--visual-subtle); }
.song-recs-tab[aria-selected="true"] > span { color: var(--visual-strong); }
.song-recs-prompt { color: var(--visual-strong); }
.song-recs-card { background: var(--visual-surface); border-color: var(--line); box-shadow: 0 4px 0 var(--visual-shadow); }
.song-recs-card h3 { color: var(--ink); }
.song-recs-number, .song-recs-artist { color: var(--visual-subtle); }
.song-recs-mark { color: var(--visual-subtle); opacity: .65; }
.song-recs-reason { color: var(--muted); }
.song-recs-links { border-color: var(--line); }
.song-recs-listen, .song-recs-sources a:hover { color: var(--visual-strong); }
.song-recs-search, .song-recs-sources { color: var(--muted); }

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline-color: var(--visual-strong); }
.lv-deck button:focus-visible, #player button:focus-visible, #player input:focus-visible { outline-color: var(--accent); }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (max-width: 1180px) {
  .visual-header-tools .edition { display: none; }
}
@media (max-width: 760px) {
  body > header { grid-template-columns: 1fr auto; gap: 0 18px; height: auto; min-height: 106px; padding: 17px 0 0; }
  body > header > .brand { grid-column: 1; grid-row: 1; }
  .visual-header-tools { grid-column: 2; grid-row: 1; }
  body > header > nav { grid-column: 1 / -1; grid-row: 2; justify-self: start; height: 48px; gap: 25px; }
  body > header > nav button { font-size: 12px; letter-spacing: .6px; }
  .brand { font-size: 24px; }
  .brand span { display: inline-block; font-size: 10px; }
  .visual-appearance-panel { top: calc(100% + 10px); }
  .home-intro { padding-top: 30px; }
  .home-intro h1 { font-size: clamp(34px, 6.5vw, 43px); }
  .theory-panel { padding: 23px 20px; }
  .theory-heading h2 { font-size: 24px; }
  .term-card { padding: 18px; }
  .takeaway { padding: 20px; }
  .takeaway p { font-size: 16px; }
  .song-recs-tab { border-color: var(--line); }
}
@media (max-width: 420px) {
  .brand { flex-direction: row; gap: 10px; align-items: center; }
  .brand span { display: inline-block; font-size: 9px; max-width: 93px; white-space: normal; line-height: 1.45; }
  .visual-appearance-trigger { padding: 8px 9px; font-size: 11px; gap: 6px; }
  .lv-instruction h1 { font-size: 31px; }
  .theory-panel { padding: 21px 17px; }
  .theory-heading h2 { font-size: 23px; }
  .term-card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}