:root {
  --ink: #14213d;
  --ink-soft: #3d4a5e;
  --muted: #657183;
  --paper: #faf9f6;
  --surface: #ffffff;
  --line: #d4dcde;
  --coral: #c86154;
  --coral-dark: #a94d44;
  --teal: #2f7678;
  --gold: #7c879a;
  --blue: #6f7d91;
  --lilac: #dfe2e7;
  --lavender: #f1f3f4;
  --shadow: 0 8px 24px rgba(20, 33, 61, 0.055);
  --radius-lg: 18px;
  --radius-md: 13px;
  --radius-sm: 9px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: .08;
  background-image: none;
}

button, a { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(28, 174, 169, 0.45); outline-offset: 3px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 78px;
  padding: 0 46px;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
  color: #fff;
  font-size: 19px;
  font-weight: 760;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.brand em { color: #dfe5ef; font-style: normal; font-weight: 450; }
.brand-mark { display: inline-flex; align-items: center; gap: 3px; height: 30px; }
.brand-mark i, .mini-brand-mark i { display: block; width: 4px; border-radius: 4px; background: var(--coral); }
.brand-mark i:nth-child(1), .mini-brand-mark i:nth-child(1) { height: 14px; }
.brand-mark i:nth-child(2), .mini-brand-mark i:nth-child(2) { height: 26px; }
.brand-mark i:nth-child(3), .mini-brand-mark i:nth-child(3) { height: 19px; background: var(--gold); }
.brand-mark i:nth-child(4), .mini-brand-mark i:nth-child(4) { height: 29px; background: var(--teal); }
.brand-mark i:nth-child(5), .mini-brand-mark i:nth-child(5) { height: 11px; background: #82c8c4; }

.stage-nav { display: flex; align-items: stretch; justify-content: center; gap: 6px; flex: 1; height: 78px; }
.stage-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  color: #c8d1df;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 650;
  transition: color .2s ease, background .2s ease;
}
.stage-link:hover, .stage-link.is-active { color: #fff; }
.stage-link.is-active::after { display: none; }
.stage-link.is-active { font-weight: 800; }
.stage-icon { display: inline-flex; width: 21px; height: 21px; color: currentColor; }
.stage-icon svg { width: 100%; height: 100%; }
.profile-button { width: 34px; height: 34px; color: var(--ink); border: 0; border-radius: 50%; background: #f3f0ee; font-size: 13px; font-weight: 800; }

.page-shell { max-width: 1500px; margin: 0 auto; padding: 54px 46px 100px; }
.episode-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 42px; margin-bottom: 34px; }
.eyebrow, .section-kicker { margin: 0 0 10px; color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.episode-intro h1 { max-width: 760px; margin: 0; color: var(--ink); font-size: clamp(34px, 4vw, 58px); line-height: .98; letter-spacing: -.062em; }
.intro-copy { max-width: 650px; margin: 18px 0 19px; color: var(--ink-soft); font-size: 17px; line-height: 1.62; }
.episode-meta { display: flex; flex-wrap: wrap; gap: 18px; color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.episode-meta span { display: inline-flex; align-items: center; gap: 7px; }
.meta-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot-coral { background: var(--coral); } .dot-teal { background: var(--teal); } .dot-gold { background: var(--gold); }
.progress-summary { width: 260px; flex: 0 0 260px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255, 253, 250, .8); }
.progress-summary-top { display: flex; justify-content: space-between; margin-bottom: 13px; font-size: 13px; font-weight: 700; }
.progress-summary-top strong { color: var(--teal); }
.progress-track, .review-meter { overflow: hidden; height: 7px; border-radius: 99px; background: #e9e7e3; }
.progress-track span, .review-meter span { display: block; width: 8%; height: 100%; border-radius: inherit; background: var(--teal); transition: width .35s ease; }
.progress-summary p { margin: 11px 0 0; color: var(--muted); font-size: 13px; }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 24px; }
.main-column { display: grid; gap: 24px; min-width: 0; }
.side-column { position: sticky; top: 102px; display: grid; gap: 18px; }
.surface { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.media-surface, .transcript-surface, .practice-surface, .review-surface { padding: 27px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.compact-heading { margin-bottom: 14px; }
.section-heading h2 { margin: 0; color: var(--ink); font-size: 27px; line-height: 1.1; letter-spacing: -.04em; }
.section-kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.section-kicker span { display: inline-flex; width: 16px; height: 16px; }
.section-kicker svg { width: 100%; height: 100%; }
.text-button, .link-button { display: inline-flex; align-items: center; gap: 5px; padding: 3px 0; color: var(--teal); border: 0; background: transparent; font-size: 12px; font-weight: 750; }
.text-button svg, .link-button svg { width: 14px; height: 14px; }
.video-frame { overflow: hidden; position: relative; aspect-ratio: 16 / 8.5; border-radius: 17px; background: #0a162b; }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0a162b; }
.chapter-row { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.chapter-button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 12px; font-weight: 700; transition: all .2s ease; }
.chapter-button span { color: var(--muted); font-size: 10px; }
.chapter-button:hover, .chapter-button.is-current { color: var(--ink); border-color: #b7c7c8; background: #f4f7f7; }

.section-description { margin: -5px 0 17px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.heading-actions { display: flex; gap: 6px; }
.speaker-key { padding: 5px 9px; border-radius: 9px; font-size: 11px; font-weight: 800; }
.maya-key { color: #6e5865; background: #f3eef0; } .leo-key { color: #2f6c6f; background: #eef4f4; }
.transcript-list { display: grid; gap: 7px; }
.transcript-line { display: grid; grid-template-columns: 60px 1fr 34px; align-items: start; gap: 12px; padding: 13px 10px; border: 1px solid transparent; border-radius: 13px; transition: background .2s ease, border-color .2s ease; }
.transcript-line:hover { background: #fafbfb; border-color: var(--line); }
.transcript-line.is-current { border-color: #c9d7d8; background: #f4f7f7; }
.speaker-pill { display: inline-flex; justify-content: center; padding: 5px 8px; border-radius: 8px; font-size: 11px; font-weight: 800; }
.speaker-pill.maya { color: #6e5865; background: #f3eef0; } .speaker-pill.leo { color: #2f6c6f; background: #eef4f4; }
.transcript-text { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.62; }
.transcript-line.is-current .transcript-text { color: var(--ink); font-weight: 650; }
.line-play, .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--teal); border: 1px solid #cbd9da; border-radius: 50%; background: #fff; }
.line-play svg, .icon-button svg { width: 15px; height: 15px; }
.outline-button { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 13px; padding: 11px 15px; color: var(--ink-soft); border: 0; border-radius: 11px; background: #f4f6f6; font-size: 12px; font-weight: 750; }
.outline-button svg { width: 14px; height: 14px; }
.script-surface { padding: 27px; background: #f7f8f6; }
.script-scroll { max-height: 540px; overflow-y: auto; padding: 8px 8px 8px 2px; border-radius: 13px; background: #fff; scrollbar-color: #b7c7c8 #eef1ef; scrollbar-width: thin; }
.script-content { display: grid; gap: 3px; }
.script-line { display: grid; grid-template-columns: 56px 76px minmax(0, 1fr) 32px; align-items: start; gap: 12px; width: 100%; padding: 14px 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; }
.script-line:hover { background: #f7f7f3; }
.script-time { padding-top: 2px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700; }
.script-speaker { padding-top: 2px; font-size: 11px; font-weight: 800; }
.script-speaker.maya { color: #6e5865; }
.script-speaker.leo { color: #2f6c6f; }
.script-line p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.66; }
.script-term { display: inline; padding: 1px 3px; color: var(--ink); border: 0; border-bottom: 2px solid #b9d7d5; border-radius: 3px; background: #eef7f5; font-size: inherit; font-weight: 750; line-height: inherit; }
.script-term.phrase { border-bottom-color: #e2b0a8; background: #fff3ef; }
.script-term:hover, .script-term.is-selected { color: var(--ink); border-bottom-color: var(--coral); background: #ffe9e3; }
.term-detail { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; background: #eef5f3; }
.term-detail > div { display: grid; gap: 3px; }
.term-detail-label { color: var(--teal); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.term-detail strong { color: var(--ink); font-size: 17px; }
.term-detail p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.term-detail-play { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; color: var(--teal); border: 1px solid #c2d8d5; border-radius: 50%; background: #fff; }
.term-detail-play svg { width: 14px; height: 14px; }
.script-play { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; color: var(--teal); border: 1px solid #cbd9da; border-radius: 50%; background: #fff; }
.script-play svg { width: 14px; height: 14px; }

.study-surface { padding: 24px; }
.words-surface { padding-top: 28px; padding-bottom: 30px; }
.word-group + .word-group { margin-top: 30px; }
.word-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.word-group-heading h3 { margin: 0; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 20px; letter-spacing: -.025em; }
.word-group-heading span { color: var(--muted); font-size: 12px; font-weight: 750; }
.grammar-list { gap: 20px; }
.comprehension-surface { background: #f8fafb; }
.count-label { padding-top: 6px; color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.word-list, .grammar-list { display: grid; gap: 10px; }
.word-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 13px; border: 1px solid #e5e9ea; border-radius: 13px; background: #fff; }
.word-item > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.word-term-button { display: block; flex: 1 1 auto; min-width: 0; width: auto; height: auto; padding: 0; color: var(--ink); border: 0; border-radius: 0; background: transparent; font-size: 15px; font-weight: 800; line-height: 1.22; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.word-term-button:hover { color: var(--teal); }
.word-item em { color: var(--muted); font-size: 11px; font-style: normal; }
.word-item p { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.word-item .word-sound { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; padding: 0; color: var(--teal); border: 1px solid #cae9e7; border-radius: 50%; background: #eefaf8; }
.word-item .word-sound svg { width: 14px; height: 14px; }
.grammar-item { display: grid; grid-template-columns: 34px 1fr; gap: 13px; padding: 8px 0 17px; border: 0; border-radius: 0; background: transparent; }
.grammar-item + .grammar-item { margin-top: 8px; }
.grammar-number { color: var(--coral-dark); font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.grammar-item strong { display: block; margin-bottom: 7px; color: var(--ink); font-size: 16px; }
.grammar-item p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.grammar-example { display: block; margin-top: 9px; color: var(--coral-dark); font-size: 13px; font-style: italic; }

.practice-surface { background: #f8fafb; }
.practice-progress { padding: 7px 10px; border-radius: 8px; background: #f1eee8; font-size: 13px; font-weight: 800; }
.practice-progress .muted { color: var(--muted); font-weight: 650; }
.practice-stepper { display: flex; gap: 7px; margin-bottom: 18px; }
.practice-stepper span { display: block; width: 26px; height: 5px; border-radius: 9px; background: #e7e4dc; }
.practice-stepper span.is-current { width: 68px; background: var(--coral); }
.practice-card { display: grid; grid-template-columns: 132px 1fr; gap: 26px; align-items: center; padding: 23px; border: 1px solid #e1e6e8; border-radius: 18px; background: #fff; }
.practice-label { margin: 0 0 8px; color: var(--coral-dark); font-size: 10px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.practice-card h3 { margin: 0 0 17px; color: var(--ink); font-size: 25px; letter-spacing: -.04em; }
.audio-bubble { display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; margin: auto; color: #fff; border: 5px solid #f0e5e2; border-radius: 50%; background: var(--coral); box-shadow: none; }
.audio-bubble svg { width: 42px; height: 42px; margin-left: 4px; }
.practice-options { display: grid; gap: 9px; }
.practice-option { display: flex; align-items: center; gap: 11px; width: 100%; padding: 13px 14px; color: var(--ink-soft); border: 1px solid #d9e0e2; border-radius: 11px; background: #fff; text-align: left; font-size: 14px; line-height: 1.4; transition: .2s ease; }
.practice-option:hover, .practice-option.is-selected { border-color: #9eb9ba; background: #f5f8f8; }
.practice-option.is-correct { border-color: #49ad8a; background: #e9f8f0; } .practice-option.is-wrong { border-color: #e9937e; background: #fff0ec; }
.radio-dot { flex: 0 0 18px; width: 18px; height: 18px; border: 2px solid #b8c0c8; border-radius: 50%; }
.practice-option.is-selected .radio-dot { border: 5px solid var(--teal); } .practice-option.is-correct .radio-dot { border: 5px solid #49ad8a; }
.practice-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.feedback { color: var(--ink-soft); font-size: 12px; line-height: 1.45; } .feedback.good { color: #23815f; font-weight: 750; } .feedback.bad { color: var(--coral-dark); font-weight: 750; }
.primary-button, .small-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; background: var(--coral); color: #fff; font-size: 13px; font-weight: 800; transition: transform .2s ease, background .2s ease; }
.primary-button { width: 100%; margin-top: 19px; padding: 14px 17px; box-shadow: none; }
.primary-button:hover, .small-action.is-filled:hover { background: var(--coral-dark); transform: translateY(-1px); }
.primary-button svg { width: 18px; height: 18px; }
.primary-button svg:last-child { width: 15px; margin-left: auto; }

.review-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.flashcard { min-height: 215px; padding: 25px; border: 1px solid #dfe4e7; border-radius: 18px; background: #fafbfb; cursor: pointer; transition: border-color .2s ease; }
.flashcard:hover { border-color: #b9c6c9; }
.flashcard.is-flipped { border-color: #a6c0c0; background: #f1f7f7; box-shadow: none; }
.flashcard-top { display: flex; justify-content: space-between; color: #7c75a3; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.flashcard strong { display: block; margin-top: 38px; color: var(--ink); font-size: 31px; letter-spacing: -.05em; }
.flashcard p { max-width: 410px; margin: 10px 0 17px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.flashcard.is-flipped p { color: #197d7a; }
.flip-hint { color: #817aa8; font-size: 11px; font-weight: 700; }
.flashcard.is-flipped .flip-hint { color: #198c87; }
.flashcard-actions { display: flex; gap: 8px; margin-top: 11px; }
.small-action { min-height: 34px; padding: 8px 12px; color: var(--ink-soft); border: 1px solid var(--line); background: #fff; font-size: 11px; }
.small-action.is-filled { color: #fff; border-color: var(--teal); background: var(--teal); }
.review-note { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 15px; background: #f6f8f8; }
.review-note-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; color: var(--teal); border-radius: 12px; background: #e8f0f0; }
.review-note-icon svg { width: 19px; height: 19px; }
.review-note h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: -.02em; }
.review-note p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }

.journey-surface { padding: 22px; }
.journey-title { display: flex; align-items: center; gap: 10px; padding-bottom: 17px; font-size: 15px; font-weight: 800; letter-spacing: -.03em; }
.mini-brand-mark { display: inline-flex; align-items: center; gap: 2px; height: 23px; }
.mini-brand-mark i { width: 3px; }
.mini-brand-mark i:nth-child(1) { height: 11px; } .mini-brand-mark i:nth-child(2) { height: 22px; } .mini-brand-mark i:nth-child(3) { height: 15px; }
.journey-list { display: grid; gap: 3px; padding: 14px 0 0; }
.journey-item { display: grid; grid-template-columns: 34px 1fr 14px; align-items: center; gap: 10px; width: 100%; padding: 9px 5px; color: var(--ink-soft); border: 0; border-radius: 11px; background: transparent; text-align: left; transition: background .2s ease; }
.journey-item:hover, .journey-item.is-active { background: #f5f7f7; }
.journey-item strong, .journey-item small { display: block; }
.journey-item strong { margin-bottom: 2px; font-size: 13px; }
.journey-item small { color: var(--muted); font-size: 10px; }
.journey-item > svg { width: 14px; color: #aeb6c0; }
.journey-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; }
.journey-icon svg { width: 17px; height: 17px; }
.icon-coral, .icon-teal, .icon-lilac, .icon-blue, .icon-slate { color: var(--ink-soft); background: #eef1f2; }
.sidebar-card { padding: 21px; }
.sidebar-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.sidebar-card-heading h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; letter-spacing: -.025em; }
.sidebar-card-heading h3 svg { width: 18px; height: 18px; color: var(--ink); }
.side-word-list { display: grid; gap: 11px; }
.side-word-row { display: grid; grid-template-columns: 86px 1fr; gap: 8px; align-items: baseline; }
.side-word-row strong { font-size: 14px; } .side-word-row span { color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.quick-review-card { background: #f5f7f7; border-color: #dfe5e7; }
.quick-review-card p { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.review-meter { background: #e3e8e9; } .review-meter span { width: 0; background: var(--teal); }
.review-meter-label { display: block; margin-top: 9px; color: var(--muted); font-size: 11px; font-weight: 750; }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: 320px; padding: 13px 16px; color: #fff; border-radius: 12px; background: var(--ink); box-shadow: var(--shadow); font-size: 12px; font-weight: 700; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .25s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

/* Editorial refinement: cooler paper, quieter cards, more publication than dashboard. */
.brand > span:last-child,
.episode-intro h1,
.section-heading h2,
.practice-card h3,
.review-note h3,
.flashcard strong,
.journey-title {
  font-family: Georgia, "Times New Roman", serif;
}

.brand > span:last-child { font-size: 21px; letter-spacing: -.045em; }
.episode-intro h1 { max-width: 820px; line-height: .99; }
.surface { box-shadow: var(--shadow); }
.media-surface, .transcript-surface, .practice-surface, .review-surface, .study-surface { border-radius: 15px; }
.video-frame { border-radius: 12px; }
.chapter-button, .practice-option, .outline-button, .word-item, .grammar-item { border-radius: 8px; }
.word-item { background: #f8f9f9; }
.practice-surface { background: #f8fafb; }
.practice-card { border-color: #e1e6e8; background: rgba(255, 255, 255, .95); }
.quick-review-card { background: #f5f7f7; }
.progress-summary { background: rgba(255, 255, 255, .86); }
.review-note { background: #f1f7f8; }
.flashcard { border-color: #dfe4e7; background: #fafbfb; }
.flashcard.is-flipped { background: #edf7f6; }

@media (max-width: 1120px) {
  .topbar { padding: 0 26px; gap: 14px; }
  .brand { font-size: 17px; }
  .stage-link { padding: 0 9px; font-size: 12px; }
  .page-shell { padding-left: 26px; padding-right: 26px; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .practice-card { grid-template-columns: 108px 1fr; gap: 18px; }
  .audio-bubble { width: 92px; height: 92px; }
}

@media (max-width: 860px) {
  .topbar { position: relative; flex-wrap: wrap; min-height: auto; padding: 16px 20px 0; }
  .profile-button { margin-left: auto; }
  .stage-nav { order: 3; width: 100%; height: 57px; overflow-x: auto; justify-content: flex-start; }
  .stage-link { flex: 0 0 auto; height: 57px; padding: 0 12px; }
  .page-shell { padding: 32px 20px 72px; }
  .episode-intro { display: block; }
  .progress-summary { width: 100%; margin-top: 22px; }
  .workspace-grid { grid-template-columns: 1fr; }
  .side-column { position: static; grid-row: 1; }
  .journey-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .journey-item { grid-template-columns: 30px 1fr; padding: 8px; }
  .journey-item > svg { display: none; }
  .journey-item small { display: none; }
  .review-grid { grid-template-columns: 1fr; }
  .side-column { grid-template-columns: 1fr 1fr; }
  .journey-surface { grid-column: 1 / -1; }
}

@media (max-width: 580px) {
  .brand { font-size: 16px; }
  .episode-intro h1 { font-size: 40px; }
  .episode-meta { display: grid; gap: 8px; }
  .media-surface, .transcript-surface, .script-surface, .practice-surface, .review-surface, .study-surface { padding: 19px; }
  .section-heading h2 { font-size: 21px; }
  .video-frame { aspect-ratio: 16 / 10; border-radius: 12px; }
  .chapter-row { display: grid; grid-template-columns: 1fr 1fr; }
  .chapter-button { justify-content: flex-start; }
  .transcript-line { grid-template-columns: 48px 1fr 32px; gap: 8px; padding: 10px 6px; }
  .transcript-text { font-size: 13px; }
  .script-line { grid-template-columns: 44px 1fr 30px; gap: 8px; }
  .script-speaker { grid-column: 2; grid-row: 1; }
  .script-line p { grid-column: 2; grid-row: 2; font-size: 14px; }
  .script-play { grid-column: 3; grid-row: 1 / span 2; }
  .script-scroll { max-height: 480px; }
  .term-detail { align-items: flex-start; }
  .practice-card { grid-template-columns: 1fr; gap: 8px; padding: 17px; }
  .audio-bubble { width: 83px; height: 83px; }
  .practice-card h3 { font-size: 22px; }
  .practice-footer { align-items: flex-start; flex-direction: column; }
  .practice-footer .small-action { width: 100%; }
  .side-column { grid-template-columns: 1fr; }
  .journey-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flashcard-actions { flex-wrap: wrap; }
  .flashcard-actions .small-action { flex: 1; }
}

/* BBC-inspired editorial system: brighter, clearer, more human, with a restrained
   red brand accent and section-specific colour bands. This is an adaptation for
   Listen Now, not a copy of BBC branding or assets. */
:root {
  --ink: #1f1f1f;
  --ink-soft: #404040;
  --muted: #6a6a6a;
  --paper: #ffffff;
  --surface: #ffffff;
  --line: #d9d9d9;
  --coral: #b80000;
  --coral-dark: #8f0000;
  --teal: #087c83;
  --gold: #f2c94c;
  --blue: #2b5f9e;
  --lilac: #7b5aa6;
  --lavender: #f1eef7;
  --shadow: none;
  --radius-lg: 2px;
  --radius-md: 2px;
  --radius-sm: 0;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body { color: var(--ink); background: #fff; font-size: 16px; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(184, 0, 0, .34); outline-offset: 3px; }

.topbar {
  min-height: 74px;
  padding: 0 48px;
  color: var(--ink);
  background: #fff;
  border-bottom: 1px solid #d9d9d9;
  box-shadow: none;
}
.brand { color: var(--ink); font-size: 21px; }
.brand em { color: var(--ink-soft); }
.stage-nav { height: 74px; gap: 0; }
.stage-link { height: 74px; padding: 0 17px; color: #454545; font-size: 15px; }
.stage-link:hover, .stage-link.is-active { color: var(--coral); background: #fff; }
.stage-link.is-active { font-weight: 800; }
.stage-link.is-active::after { display: block; position: absolute; right: 12px; bottom: 0; left: 12px; height: 4px; content: ""; background: var(--coral); }
.profile-button { width: 38px; height: 38px; color: #fff; border-radius: 0; background: var(--ink); font-size: 14px; }

.page-shell { max-width: 1320px; padding: 34px 40px 100px; }
.episode-intro { align-items: flex-start; gap: 54px; margin-bottom: 32px; }
.eyebrow { margin-bottom: 12px; color: #666; font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.episode-intro h1 { max-width: 900px; color: #111; font-size: clamp(42px, 4.1vw, 64px); line-height: .99; letter-spacing: -.055em; }
.intro-copy { max-width: 760px; margin: 18px 0 20px; color: #4a4a4a; font-size: 19px; line-height: 1.52; }
.episode-meta { gap: 22px; color: #4a4a4a; font-size: 15px; }
.meta-dot { width: 9px; height: 9px; }
.progress-summary { width: 280px; flex-basis: 280px; padding: 18px 20px; border: 1px solid #d2d2d2; border-top: 4px solid var(--coral); border-radius: 0; background: #fff; }
.progress-summary-top { margin-bottom: 14px; font-size: 14px; }
.progress-summary p { font-size: 14px; }
.progress-track, .review-meter { height: 8px; border-radius: 0; background: #e5e5e5; }
.progress-track span, .review-meter span { border-radius: 0; background: var(--coral); }

.workspace-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
.main-column { gap: 30px; }
.side-column { top: 98px; gap: 22px; }
.surface { border: 1px solid #d7d7d7; border-radius: 0; background: #fff; box-shadow: none; }
.media-surface, .transcript-surface, .practice-surface, .review-surface { padding: 30px; }
.section-heading { margin-bottom: 20px; }
.section-heading h2 { color: #111; font-size: 32px; line-height: 1.08; letter-spacing: -.035em; }
.section-kicker { margin-bottom: 9px; color: #555; font-size: 13px; font-weight: 800; letter-spacing: .03em; }
.section-kicker span { width: 18px; height: 18px; color: var(--coral); }
.text-button, .link-button { color: var(--coral); font-size: 14px; font-weight: 800; }
.section-description { margin: -4px 0 20px; color: #4c4c4c; font-size: 16px; line-height: 1.6; }

.video-frame { border-radius: 0; }
.chapter-row { gap: 0; padding-top: 18px; }
.chapter-button { padding: 12px 15px; color: #252525; border: 1px solid #c9c9c9; border-radius: 0; background: #fff; font-size: 14px; }
.chapter-button + .chapter-button { border-left: 0; }
.chapter-button span { color: #777; font-size: 12px; }
.chapter-button:hover, .chapter-button.is-current { color: var(--coral); border-color: var(--coral); background: #fff4f1; }

.transcript-line { gap: 15px; padding: 16px 10px; border-radius: 0; border-bottom: 1px solid #e2e2e2; }
.transcript-line:hover { background: #fafafa; border-color: #d8d8d8; }
.transcript-line.is-current { border-color: #e7b5ad; border-left: 4px solid var(--coral); background: #fff5f2; }
.speaker-pill { padding: 5px 8px; border-radius: 0; font-size: 13px; }
.speaker-pill.maya { color: #8f0000; background: #f7dfdb; }
.speaker-pill.leo { color: #075c63; background: #dceef0; }
.transcript-text { color: #333; font-size: 17px; line-height: 1.62; }
.transcript-line.is-current .transcript-text { color: #111; }
.line-play, .icon-button { width: 34px; height: 34px; color: var(--coral); border: 0; border-radius: 0; background: transparent; }
.outline-button { margin-top: 17px; padding: 13px 15px; border: 1px solid #c8c8c8; border-radius: 0; color: #222; background: #fff; font-size: 14px; }

.script-surface { padding: 30px; background: #f4f4f4; border-color: #d7d7d7; }
.script-scroll { max-height: 540px; padding: 10px 12px 10px 4px; border-radius: 0; background: #fff; border: 1px solid #d7d7d7; scrollbar-color: #a5a5a5 #ededed; }
.script-line { padding: 15px 10px; border-radius: 0; }
.script-line:hover { background: #f7f7f7; }
.script-time { color: #777; font-size: 12px; }
.script-speaker { font-size: 13px; }
.script-line p { color: #333; font-size: 16px; line-height: 1.66; }
.script-term { border-radius: 0; background: #eaf4f4; }
.script-term.phrase { background: #fff1e9; }
.script-term:hover, .script-term.is-selected { background: #ffe0da; }
.term-detail { border-radius: 0; background: #e9f2f3; }

.study-surface { padding: 30px; }
.words-surface { padding-top: 32px; padding-bottom: 34px; background: #edf6f7; border-color: #c9e0e2; }
.word-group + .word-group { margin-top: 34px; }
.word-group-heading { margin-bottom: 0; padding-bottom: 10px; border-bottom: 3px solid var(--teal); }
.word-group-heading h3 { font-family: Georgia, "Times New Roman", serif; font-size: 25px; }
.word-group-heading span { color: #4a4a4a; font-size: 14px; }
.count-label { padding-top: 8px; color: #555; font-size: 14px; }
.word-list { gap: 0; }
.word-item { display: grid; grid-template-columns: 36px minmax(160px, 220px) minmax(0, 1fr); gap: 0 16px; align-items: start; padding: 17px 8px; border: 0; border-bottom: 1px solid #cfdfe1; border-radius: 0; background: #fff; }
.word-item > div { display: flex; grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.word-term-button { font-size: 18px; line-height: 1.22; }
.word-item em { color: #666; font-size: 13px; }
.word-item p { grid-column: 3; grid-row: 1; margin: 1px 0 0; color: #333; font-size: 15px; line-height: 1.55; }
.word-item .word-sound { grid-column: 1; grid-row: 1; width: 34px; height: 34px; color: var(--coral); border: 0; border-radius: 0; background: transparent; }
.word-item .word-sound svg { width: 18px; height: 18px; }

.grammar-section, #grammar-section { background: #f3edf7; border-color: #dfd2e9; }
.grammar-list { gap: 0; }
.grammar-item { grid-template-columns: 45px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid #dacfe2; }
.grammar-item:first-child { border-top: 0; }
.grammar-number { color: var(--lilac); font-size: 15px; }
.grammar-item strong { margin-bottom: 8px; font-size: 19px; }
.grammar-item p, .grammar-example { font-size: 15px; line-height: 1.6; }
.grammar-example { color: #69438d; }

.comprehension-surface { background: #eaf2fb; border-color: #c8dced; }
.practice-surface { background: #fff0e8; border-color: #ebd0c3; }
.practice-progress { padding: 0; border-radius: 0; color: var(--coral); background: transparent; font-size: 15px; }
.practice-stepper { gap: 0; margin-bottom: 21px; }
.practice-stepper span { width: 36px; height: 6px; border-radius: 0; background: #dfd1cb; }
.practice-stepper span + span { margin-left: 5px; }
.practice-stepper span.is-current { width: 70px; background: var(--coral); }
.practice-card { gap: 28px; padding: 26px; border: 1px solid #d9c4b8; border-radius: 0; background: #fff; }
.practice-label { font-size: 13px; letter-spacing: .08em; }
.practice-card h3 { margin-bottom: 18px; font-size: 28px; }
.audio-bubble { width: 104px; height: 104px; border: 0; border-radius: 50%; background: var(--coral); }
.practice-option { padding: 15px; border: 1px solid #d3d3d3; border-radius: 0; background: #fff; font-size: 16px; }
.practice-option:hover, .practice-option.is-selected { border-color: var(--coral); background: #fff8f4; }
.primary-button, .small-action { border-radius: 0; font-size: 15px; }
.primary-button { margin-top: 22px; padding: 15px 17px; background: var(--coral); }

.review-surface { background: #f1f4e9; border-color: #d9dec9; }
.flashcard { min-height: 230px; padding: 28px; border: 1px solid #d1d6c3; border-radius: 0; background: #fff; }
.flashcard-top { color: #5c6a2b; font-size: 12px; }
.flashcard strong { font-size: 36px; }
.flashcard p { font-size: 16px; }
.flip-hint { color: #68734a; font-size: 13px; }
.review-note { padding: 22px; border-radius: 0; background: #fff; border: 1px solid #d1d6c3; }
.review-note-icon { border-radius: 0; background: #e6ebd6; }
.review-note h3 { font-size: 18px; }
.review-note p { font-size: 15px; }

.journey-surface { padding: 24px; background: #f4f4f4; border-color: #d2d2d2; }
.journey-title { padding-bottom: 19px; font-size: 20px; }
.journey-list { gap: 0; padding-top: 0; }
.journey-item { grid-template-columns: 36px 1fr 14px; padding: 13px 8px; border-top: 1px solid #d5d5d5; border-radius: 0; }
.journey-item:hover, .journey-item.is-active { background: #fff; }
.journey-item.is-active { box-shadow: inset 4px 0 var(--coral); }
.journey-item strong { font-size: 15px; }
.journey-item small { font-size: 13px; }
.journey-icon { width: 32px; height: 32px; border-radius: 0; background: #fff; }
.journey-item:nth-child(1) .journey-icon { color: var(--coral); }
.journey-item:nth-child(2) .journey-icon { color: var(--teal); }
.journey-item:nth-child(3) .journey-icon { color: var(--blue); }
.journey-item:nth-child(4) .journey-icon { color: var(--lilac); }
.journey-item:nth-child(5) .journey-icon { color: #d26e2d; }
.journey-item:nth-child(6) .journey-icon { color: #65733e; }
.sidebar-card { padding: 24px; border-color: #d2d2d2; }
.sidebar-card-heading { margin-bottom: 19px; }
.sidebar-card-heading h3 { font-size: 18px; }
.sidebar-card-heading h3 svg { color: var(--coral); }
.side-word-list { gap: 0; }
.side-word-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; border-top: 1px solid #e1e1e1; }
.side-word-row strong { font-size: 16px; }
.side-word-row span { font-size: 14px; line-height: 1.45; }
.quick-review-card { background: #fff6d9; border-color: #eadba9; }
.quick-review-card p { color: #4f4b3c; font-size: 14px; }
.review-meter { background: #e9ddb2; }
.review-meter span { background: #9b7716; }
.review-meter-label { color: #5d542e; font-size: 13px; }

/* Original editorial illustration layer. The art is deliberately simple and
   human: flat colour fields, clear silhouettes, and one warm scene anchor. */
.episode-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
  align-items: end;
  gap: 42px;
}
.episode-intro-main { min-width: 0; }
.episode-intro-aside { display: grid; gap: 14px; align-self: stretch; align-content: end; }
.episode-intro-art {
  position: relative;
  min-height: 226px;
  overflow: hidden;
  background: #f8e8e2;
}
.episode-intro-art img {
  position: absolute;
  right: -8px;
  bottom: -12px;
  display: block;
  width: 112%;
  max-width: none;
  height: auto;
}
.art-kicker {
  position: absolute;
  top: 16px;
  left: 17px;
  z-index: 1;
  color: #1f1f1f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
.episode-intro-aside .progress-summary { width: auto; flex: none; }

@media (max-width: 1120px) {
  .topbar { padding: 0 28px; }
  .stage-link { padding: 0 11px; font-size: 14px; }
  .page-shell { padding-left: 28px; padding-right: 28px; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr) 270px; }
  .word-item { grid-template-columns: 34px minmax(135px, 190px) minmax(0, 1fr); gap: 0 12px; }
}

@media (max-width: 860px) {
  .topbar { padding: 16px 20px 0; }
  .stage-nav { height: 57px; }
  .stage-link { height: 57px; }
  .page-shell { padding: 30px 20px 72px; }
  .episode-intro h1 { font-size: 48px; }
  .episode-intro { grid-template-columns: 1fr; gap: 22px; }
  .episode-intro-aside { grid-template-columns: minmax(0, 1fr) 250px; align-items: stretch; }
  .episode-intro-art { min-height: 200px; }
  .workspace-grid { grid-template-columns: 1fr; }
  .side-column { position: static; }
}

@media (max-width: 580px) {
  .episode-intro h1 { font-size: 40px; }
  .intro-copy { font-size: 17px; }
  .episode-intro-aside { grid-template-columns: 1fr; }
  .episode-intro-art { min-height: 180px; }
  .media-surface, .transcript-surface, .script-surface, .practice-surface, .review-surface, .study-surface { padding: 21px; }
  .section-heading h2 { font-size: 26px; }
  .transcript-text { font-size: 16px; }
  .word-item { grid-template-columns: 32px minmax(0, 1fr); gap: 0 10px; padding: 15px 5px; }
  .word-item > div { grid-column: 2; grid-row: 1; }
  .word-item p { grid-column: 2; grid-row: 2; margin-top: 8px; }
  .word-item .word-sound { grid-column: 1; grid-row: 1; }
  .word-term-button { font-size: 18px; }
  .chapter-row { display: grid; grid-template-columns: 1fr 1fr; }
  .chapter-button + .chapter-button { border-left: 1px solid #c9c9c9; }
  .practice-card { padding: 20px; }
}

/* Editorial surfaces: use colour, spacing, and bottom rules instead of the
   boxed top/left treatment that makes the page feel like a generated UI. */
.surface,
.progress-summary,
.practice-card,
.flashcard,
.review-note,
.script-scroll {
  border-top: 0;
  border-left: 0;
}
.surface { border-right: 0; border-bottom: 0; }
.progress-summary { border-right: 0; border-bottom: 1px solid #d2d2d2; }
.transcript-line.is-current { border-left: 0; border-color: #e7b5ad; }
.grammar-item { border-top: 0; border-bottom: 1px solid #dacfe2; }
.grammar-item:last-child { border-bottom: 0; }
.journey-item { border-top: 0; border-bottom: 1px solid #d5d5d5; }
.side-word-row { border-top: 0; border-bottom: 1px solid #e1e1e1; }
.chapter-button + .chapter-button { border-left: 0; }
.chapter-button,
.practice-option,
.outline-button {
  border: 0;
  border-bottom: 1px solid #d3d3d3;
}
.chapter-button:hover,
.chapter-button.is-current { border-bottom-color: var(--coral); }
.practice-option:hover,
.practice-option.is-selected { border-bottom-color: var(--coral); }
.practice-option.is-correct { border-bottom-color: #49ad8a; }
.practice-option.is-wrong { border-bottom-color: #e9937e; }

/* Listen Now final readability pass: the lesson banner and stage labels must
   read like a publication masthead, not like small dashboard metadata. */
.topbar { min-height: 84px; padding-left: 48px; padding-right: 48px; }
.brand { font-size: 24px; }
.brand em { color: var(--coral); font-weight: 800; }
.brand > span:last-child { font-size: 24px; }
.stage-nav { height: 84px; }
.stage-link { height: 84px; font-size: 16px; }
.episode-intro .eyebrow { margin-bottom: 15px; color: var(--coral); font-size: 17px; font-weight: 850; letter-spacing: .03em; }
.episode-intro h1 { font-size: clamp(48px, 4.7vw, 74px); }
.episode-intro .intro-copy { font-size: 21px; }
.section-kicker { font-size: 15px; }
.section-heading h2 { font-size: 34px; }

@media (max-width: 1120px) {
  .topbar { padding-left: 28px; padding-right: 28px; }
  .brand, .brand > span:last-child { font-size: 21px; }
  .stage-link { font-size: 15px; }
}

@media (max-width: 580px) {
  .topbar { min-height: 74px; }
  .brand, .brand > span:last-child { font-size: 19px; }
  .stage-nav { height: 57px; }
  .stage-link { height: 57px; font-size: 14px; }
  .episode-intro .eyebrow { font-size: 15px; }
  .episode-intro h1 { font-size: 45px; }
  .episode-intro .intro-copy { font-size: 18px; }
  .section-kicker { font-size: 14px; }
  .section-heading h2 { font-size: 29px; }
}

/* Downloads are a separate paid layer, not another learning exercise. Keep
   the list open and editorial: one strong band, clear file rows, no nested
   card stack or fake progress UI. */
.downloads-surface {
  padding: 30px;
  color: #fff;
  background: #176b76;
}
.downloads-surface .section-kicker { color: #f2c34d; }
.downloads-surface .section-kicker span { color: #f2c34d; }
.downloads-surface .section-heading h2 { color: #fff; }
.downloads-surface .section-description { max-width: 760px; color: rgba(255, 255, 255, .88); }
.paid-label { display: inline-flex; align-items: center; gap: 6px; padding-top: 8px; color: #f2c34d; font-size: 14px; font-weight: 800; white-space: nowrap; }
.paid-label svg { width: 16px; height: 16px; }
.download-list { display: grid; margin-top: 24px; background: #fff; color: var(--ink); }
.download-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border-bottom: 1px solid #d6e1e2; }
.download-row:last-child { border-bottom: 0; }
.download-row.is-featured { background: #fff5d9; }
.download-file-mark { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--teal); background: #e8f3f2; }
.download-row.is-featured .download-file-mark { color: #9b6a00; background: #f9df91; }
.download-file-mark svg { width: 18px; height: 18px; }
.download-copy { min-width: 0; }
.download-title-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.download-title-line h3 { margin: 0; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 20px; letter-spacing: -.025em; }
.download-title-line span { color: #6a7379; font-size: 12px; font-weight: 750; }
.download-copy p { margin: 4px 0 0; color: #4b5860; font-size: 14px; line-height: 1.48; }
.download-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 126px; padding: 9px 0; color: var(--coral-dark); border: 0; border-bottom: 2px solid var(--coral); background: transparent; font-size: 13px; font-weight: 850; text-decoration: none; white-space: nowrap; }
.download-link svg { width: 16px; height: 16px; }
.download-link.is-locked { color: #69757a; border-bottom-color: #aebcbe; cursor: pointer; }
.download-footnote { display: flex; align-items: flex-start; gap: 8px; margin: 17px 0 0; color: rgba(255, 255, 255, .78); font-size: 12px; line-height: 1.5; }
.download-footnote svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; }

@media (max-width: 580px) {
  .downloads-surface { padding: 21px; }
  .download-row { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 15px 12px; }
  .download-link { grid-column: 2; justify-self: start; min-width: 0; margin-top: 4px; }
  .download-title-line h3 { font-size: 18px; }
  .download-copy p { font-size: 13px; }
}