:root {
  --navy-950: #111a2d;
  --navy-900: #17223b;
  --navy-800: #24314d;
  --navy-700: #33415e;
  --ink-muted: #5e625f;
  --ivory-50: #fffdf8;
  --ivory-100: #fbf7ef;
  --ivory-200: #f4efe6;
  --ivory-300: #e7ded0;
  --surface: #fffaf3;
  --white: #ffffff;
  --coral-600: #d95342;
  --coral-500: #e7654d;
  --coral-100: #fbe2da;
  --sage-500: #78977d;
  --sage-100: #dfe9dc;
  --lavender-500: #8277a8;
  --lavender-100: #e7e1f3;
  --blue-500: #4d789b;
  --blue-100: #dcebf5;
  --gold-500: #ad7b2d;
  --gold-100: #f4e6bf;
  --rose-500: #a8606a;
  --rose-100: #f3dfe2;
  --teal-500: #4d8580;
  --teal-100: #d8ebe7;
  --success: #2f7653;
  --success-soft: #e0f1e7;
  --error: #a43d32;
  --error-soft: #f9e3de;
  --focus: #2368d9;
  --shadow-sm: 0 2px 10px rgba(23, 34, 59, .06);
  --shadow-md: 0 16px 40px rgba(23, 34, 59, .1);
  --shadow-lg: 0 26px 70px rgba(23, 34, 59, .14);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --max-width: 1180px;
  --header-height: 84px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--ivory-200);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--navy-900);
  background:
    linear-gradient(rgba(23, 34, 59, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 34, 59, .025) 1px, transparent 1px),
    var(--ivory-200);
  background-size: 36px 36px;
  font-family: "Aptos", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }

button, select, a { -webkit-tap-highlight-color: transparent; }

button, [href], select { cursor: pointer; }

button { color: inherit; }

a { color: inherit; }

svg { display: block; }

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 {
  color: var(--navy-950);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.08;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 5.4vw, 5rem); letter-spacing: -.055em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.45rem); letter-spacing: -.035em; }
h3 { font-size: 1.25rem; letter-spacing: -.02em; }

::selection { background: var(--coral-100); color: var(--navy-950); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

main [tabindex="-1"]:focus { outline: none; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 16px;
  transform: translateY(-150%);
  border-radius: var(--radius-sm);
  color: white;
  background: var(--navy-900);
  font-weight: 800;
  transition: transform .2s var(--ease);
}

.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .28;
  pointer-events: none;
}

.ambient--one { top: 120px; right: -180px; background: var(--coral-100); }
.ambient--two { bottom: -220px; left: -170px; background: var(--sage-100); }

.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.icon--tiny { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }

.app-header {
  position: sticky;
  z-index: 50;
  top: 0;
  padding: 14px 18px 0;
}

.app-header__inner {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  width: min(100%, var(--max-width));
  min-height: 62px;
  margin: 0 auto;
  padding: 8px 10px 8px 16px;
  border: 1px solid rgba(23, 34, 59, .09);
  border-radius: 20px;
  background: rgba(255, 253, 248, .9);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
}

.header-center { display: flex; align-items: center; gap: 10px; }

.world-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid var(--ivory-300);
  border-radius: 12px;
  background: var(--ivory-200);
}

.world-switch button {
  min-height: 38px;
  padding: 7px 11px;
  border: 0;
  border-radius: 9px;
  color: var(--ink-muted);
  background: transparent;
  font-size: .74rem;
  font-weight: 850;
}

.world-switch button[aria-pressed="true"] { color: var(--white); background: var(--navy-900); box-shadow: var(--shadow-sm); }

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 9px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.brand__mark { width: 40px; height: 40px; color: var(--coral-500); }
.brand span { display: grid; line-height: 1; }
.brand strong { font-family: Georgia, serif; font-size: 1.08rem; letter-spacing: -.03em; }
.brand small { margin-top: 3px; color: var(--ink-muted); font-size: .67rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.main-nav { display: flex; align-items: center; gap: 4px; }

.nav-link {
  min-height: 44px;
  padding: 9px 15px;
  border: 0;
  border-radius: 10px;
  color: var(--ink-muted);
  background: transparent;
  font-size: .9rem;
  font-weight: 750;
  transition: color .2s, background .2s;
}

.nav-link:hover { color: var(--navy-900); background: rgba(23, 34, 59, .05); }
.nav-link.is-active { color: var(--navy-900); background: var(--white); box-shadow: 0 1px 6px rgba(23, 34, 59, .08); }

.header-actions { display: flex; align-items: center; justify-self: end; gap: 10px; }

.header-xp, .xp-chip, .quest-badge, .level-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--navy-900);
  background: var(--lavender-100);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .04em;
}

.icon-button {
  display: inline-grid;
  width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ivory-300);
  border-radius: 12px;
  background: var(--white);
  transition: border-color .2s, background .2s;
}

.icon-button:hover { border-color: var(--navy-700); background: var(--ivory-100); }

#app {
  width: min(100%, calc(var(--max-width) + 36px));
  min-height: calc(100vh - var(--header-height));
  margin: 0 auto;
  padding: 72px 18px 100px;
}

.view { animation: view-in .42s var(--ease) both; }
.view h1[tabindex="-1"], .view h2[tabindex="-1"] { scroll-margin-top: 120px; }

@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal { animation: reveal-in .65s var(--ease) both; }
.reveal--delay { animation-delay: .09s; }
.reveal--delay-2 { animation-delay: .18s; }

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  color: var(--coral-600);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr);
  align-items: center;
  gap: clamp(36px, 6vw, 84px);
  min-height: 450px;
}

.hero-copy { padding: 20px 0; }
.hero-copy h1 { max-width: 720px; margin-bottom: 26px; }
.hero-copy h1 em { color: var(--coral-600); font-weight: 400; }
.hero-copy__lead { max-width: 620px; color: var(--ink-muted); font-size: clamp(1.02rem, 1.7vw, 1.2rem); line-height: 1.75; }

.hero-proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 30px; }
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; color: var(--navy-700); font-size: .82rem; font-weight: 800; }
.hero-proof .icon { width: 18px; color: var(--coral-600); }

.quest-card {
  position: relative;
  padding: clamp(24px, 4vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(23, 34, 59, .12);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.quest-card::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  border-radius: 0 0 0 100%;
  background: var(--coral-100);
  content: '';
  opacity: .75;
}

.quest-card__header { position: relative; display: flex; justify-content: space-between; gap: 18px; }
.quest-card h2 { margin-bottom: 12px; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.quest-card > p { max-width: 48ch; color: var(--ink-muted); }
.quest-badge { align-self: flex-start; color: var(--white); background: var(--navy-900); }
.quest-badge--success { background: var(--success); color: var(--white); }
.quest-progress { margin: 24px 0; }
.quest-progress__label { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: .8rem; }
.quest-submastery { margin-top: 8px; color: var(--ink-muted); font-size: .82rem; }

.progress-line {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ivory-300);
}

.progress-line__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--coral-500);
  transition: width .55s var(--ease);
}

.quest-steps { display: flex; align-items: center; gap: 8px; margin: 0 0 26px; color: var(--ink-muted); font-size: .69rem; font-weight: 750; }
.quest-steps i { flex: 1; height: 1px; background: var(--ivory-300); }
.quest-steps .is-current { color: var(--coral-600); font-weight: 900; }
.quest-steps .is-done { color: var(--success); font-weight: 800; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 850;
  text-decoration: none;
  transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
}

.button .icon { transition: transform .2s var(--ease); }
.button:hover .icon { transform: translateX(3px); }
.button--wide { width: 100%; }
.button--primary { color: var(--white); background: var(--coral-500); box-shadow: 0 9px 22px rgba(217, 83, 66, .2); }
.button--primary:hover { background: var(--coral-600); box-shadow: 0 12px 28px rgba(217, 83, 66, .28); }
.button--secondary { border-color: var(--ivory-300); background: var(--white); }
.button--secondary:hover { border-color: var(--navy-700); }
.button--soft { min-height: 44px; padding: 8px 14px; border-color: var(--ivory-300); background: var(--white); font-size: .86rem; }
.button--danger { color: var(--white); background: var(--error); }

.text-button, .quiet-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 7px 0;
  border: 0;
  color: var(--navy-800);
  background: transparent;
  font-size: .82rem;
  font-weight: 850;
}

.text-button .icon { width: 17px; transition: transform .2s var(--ease); }
.text-button:hover .icon { transform: translateX(4px); }
.quiet-button { color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--ivory-300); text-underline-offset: 4px; }
.quiet-button:hover { color: var(--navy-900); text-decoration-color: var(--coral-500); }

.metric-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 62px 0 88px;
  border: 1px solid rgba(23, 34, 59, .1);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 248, .78);
  box-shadow: var(--shadow-sm);
}

.metric { display: flex; align-items: center; gap: 15px; min-height: 100px; padding: 22px 28px; }
.metric + .metric { border-left: 1px solid var(--ivory-300); }
.metric__icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; }
.metric__icon--navy { color: white; background: var(--navy-900); }
.metric__icon--coral { color: var(--coral-600); background: var(--coral-100); }
.metric__icon--sage { color: var(--success); background: var(--sage-100); }
.metric div { display: grid; }
.metric strong { color: var(--navy-900); font-size: .95rem; }
.metric small { color: var(--ink-muted); font-size: .75rem; }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 26px;
}

.section-heading h2 { margin-bottom: 0; }

.track-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.track-grid--full { grid-template-columns: repeat(3, 1fr); }

.track-card {
  --track: var(--coral-500);
  --track-soft: var(--coral-100);
  position: relative;
  display: flex;
  min-height: 330px;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(23, 34, 59, .1);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 248, .9);
  box-shadow: var(--shadow-sm);
  transition: border-color .22s, box-shadow .22s, transform .22s var(--ease);
}

.track-card::before { position: absolute; inset: 0 0 auto; height: 5px; background: var(--track); content: ''; }
.track-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--track) 50%, white); box-shadow: var(--shadow-md); }
.track-card--sage { --track: var(--sage-500); --track-soft: var(--sage-100); }
.track-card--lavender { --track: var(--lavender-500); --track-soft: var(--lavender-100); }
.track-card--blue { --track: var(--blue-500); --track-soft: var(--blue-100); }
.track-card--gold { --track: var(--gold-500); --track-soft: var(--gold-100); }
.track-card--rose { --track: var(--rose-500); --track-soft: var(--rose-100); }
.track-card--teal { --track: var(--teal-500); --track-soft: var(--teal-100); }
.track-card__top { display: flex; align-items: flex-start; justify-content: space-between; }
.track-card__code { max-width: 120px; color: var(--track); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.track-card h3 { margin: 0 0 12px; font-size: 1.45rem; }
.track-card p:not(.eyebrow) { color: var(--ink-muted); font-size: .88rem; line-height: 1.65; }
.track-card .progress-line__fill { background: var(--track); }
.track-card .text-button { margin-top: 12px; color: var(--track); }

.mastery-orb {
  display: flex;
  width: 54px;
  height: 54px;
  align-items: baseline;
  justify-content: center;
  padding-top: 14px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--surface) 80%, transparent 81% 99%), conic-gradient(var(--track) calc(var(--mastery) * 1%), var(--track-soft) 0);
  color: var(--navy-900);
}

.mastery-orb strong { font-size: .88rem; }
.mastery-orb small { font-size: .58rem; }

.page-heading { max-width: 800px; margin: 24px 0 54px; }
.page-heading h1 { margin-bottom: 20px; font-size: clamp(2.6rem, 5vw, 4.5rem); }
.page-heading > p:not(.eyebrow), .page-heading > div > p:not(.eyebrow) { max-width: 65ch; color: var(--ink-muted); font-size: 1.05rem; }
.page-heading--split { display: flex; max-width: none; align-items: center; justify-content: space-between; }
.page-heading__art { width: 150px; height: 150px; color: var(--coral-500); opacity: .18; }

.session-view { width: min(100%, 880px); margin: 0 auto; }
.session-topbar { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 18px; margin-bottom: 32px; }
.session-progress > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: .78rem; }
.session-progress span { color: var(--ink-muted); font-weight: 700; }
.session-progress .progress-line__fill { background: var(--navy-900); }
.xp-chip { background: var(--lavender-100); }

.micro-lesson {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 18px;
  padding: 28px;
  border: 1px solid rgba(23, 34, 59, .1);
  border-radius: var(--radius-lg);
  background: var(--sage-100);
}

.micro-lesson h2 { margin-bottom: 10px; }
.micro-lesson p:not(.eyebrow) { margin: 0; color: var(--navy-700); }
.pattern-card { padding: 18px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .68); }
.pattern-card span { display: block; margin-bottom: 10px; color: var(--success); font-size: .7rem; font-weight: 900; letter-spacing: .08em; }
.pattern-card p { margin: 5px 0 !important; color: var(--navy-900) !important; font-size: .84rem; font-weight: 750; }

.exercise-card {
  min-height: 510px;
  padding: clamp(24px, 5vw, 46px);
  border: 1px solid rgba(23, 34, 59, .11);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.prompt-block { max-width: 700px; margin: 4px 0 28px; }
.prompt-block h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.25; }

.answer-options { display: grid; gap: 11px; }
.answer-option {
  display: grid;
  grid-template-columns: 36px 1fr 22px;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 58px;
  padding: 10px 15px;
  border: 1px solid var(--ivory-300);
  border-radius: 14px;
  background: var(--white);
  text-align: left;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.answer-option:hover:not(:disabled) { border-color: var(--navy-700); box-shadow: var(--shadow-sm); }
.answer-option.is-selected { border-color: var(--coral-500); background: var(--coral-100); box-shadow: 0 0 0 1px var(--coral-500); }
.answer-option.is-correct { border-color: var(--success); background: var(--success-soft); box-shadow: 0 0 0 1px var(--success); }
.answer-option.is-correct .answer-option__key { color: white; background: var(--success); }
.answer-option.is-correct .answer-option__check { color: var(--success); }
.answer-option.is-incorrect { border-color: var(--error); background: var(--error-soft); box-shadow: 0 0 0 1px var(--error); }
.answer-option.is-incorrect .answer-option__key { color: white; background: var(--error); }
.answer-option:disabled { cursor: default; }
.answer-option__key { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--ink-muted); background: var(--ivory-200); font-size: .72rem; font-weight: 900; }
.answer-option.is-selected .answer-option__key { color: white; background: var(--coral-500); }
.answer-option__check { width: 18px; color: transparent; }
.answer-option.is-selected .answer-option__check { color: var(--coral-600); }

.text-answer label { display: block; margin-bottom: 8px; font-size: .78rem; font-weight: 850; }
.text-answer input {
  width: 100%;
  min-height: 56px;
  padding: 13px 16px;
  border: 1px solid var(--ivory-300);
  border-radius: 13px;
  color: var(--navy-900);
  background: var(--white);
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.text-answer input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(35, 104, 217, .12); outline: 0; }
.text-answer small { display: block; margin-top: 8px; color: var(--ink-muted); }

.order-builder { display: grid; gap: 17px; }
.sentence-drop { min-height: 94px; padding: 15px 18px; border: 1px dashed var(--coral-500); border-radius: 14px; background: var(--coral-100); }
.sentence-drop__label { color: var(--coral-600); font-size: .66rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.sentence-drop p { margin: 8px 0 0; color: var(--navy-900); font-size: 1.08rem; font-weight: 750; }
.submitted-answer.is-correct { border: 1px solid var(--success); background: var(--success-soft); }
.submitted-answer.is-correct .sentence-drop__label { color: var(--success); }
.submitted-answer.is-revealed { border: 1px solid var(--error); background: var(--error-soft); }
.submitted-answer.is-revealed .sentence-drop__label { color: var(--error); }
.word-bank { display: flex; flex-wrap: wrap; gap: 9px; }
.word-chip { min-height: 44px; padding: 8px 13px; border: 1px solid var(--ivory-300); border-radius: 10px; background: var(--white); box-shadow: var(--shadow-sm); font-weight: 750; }
.word-chip:hover { border-color: var(--coral-500); }
.word-chip.is-used { opacity: .35; box-shadow: none; }
.word-chip:disabled { cursor: default; }
.word-chip:disabled:hover { border-color: var(--ivory-300); }

.reading-passage { margin: -10px 0 28px; padding: clamp(20px, 4vw, 30px); border-left: 4px solid var(--sage-500); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--sage-100); }
.reading-passage__label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--success); font-size: .68rem; font-weight: 900; letter-spacing: .14em; }
.reading-passage h3 { margin-bottom: 12px; font-size: 1.4rem; }
.reading-passage p { margin: 0; color: var(--navy-800); line-height: 1.78; }

.listening-panel { display: flex; align-items: center; gap: 22px; margin: -8px 0 18px; padding: 22px; border-radius: var(--radius-lg); background: var(--lavender-100); }
.listening-panel h3 { margin-bottom: 13px; }
.listening-panel__pulse { display: grid; width: 76px; height: 76px; flex: 0 0 auto; place-items: center; border: 8px solid rgba(130, 119, 168, .15); border-radius: 50%; color: var(--lavender-500); background: var(--white); }
.listening-panel__pulse .icon { width: 30px; height: 30px; }
.audio-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.transcript { margin: 12px 0 20px; padding: 16px; border: 1px solid var(--ivory-300); border-radius: 12px; background: var(--white); }
.transcript span { color: var(--ink-muted); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.transcript p { margin: 5px 0 0; font-weight: 700; }

.boss-banner { display: flex; align-items: center; gap: 14px; margin: -8px 0 28px; padding: 16px; border-radius: var(--radius-md); color: white; background: var(--navy-900); }
.boss-banner > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: var(--gold-100); background: rgba(255, 255, 255, .1); }
.boss-banner p { margin-bottom: 3px; color: var(--gold-100); }

.hint-box { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--gold-100); }
.hint-box strong { color: var(--gold-500); font-size: .72rem; text-transform: uppercase; }
.hint-box p { margin: 4px 0 0; }

.feedback { display: grid; grid-template-columns: 42px 1fr; gap: 14px; margin-top: 20px; padding: 17px; border-radius: 14px; }
.feedback--correct { color: var(--success); background: var(--success-soft); }
.feedback--retry, .feedback--revealed { color: var(--error); background: var(--error-soft); }
.feedback__icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; background: rgba(255, 255, 255, .65); }
.feedback__title { display: flex; justify-content: space-between; gap: 12px; }
.feedback p { margin: 3px 0; color: var(--navy-800); }
.feedback small { color: var(--ink-muted); }
.feedback__answer { font-weight: 850; }

.exercise-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--ivory-300); }
.exercise-help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.recap-view { width: min(100%, 850px); margin: 0 auto; text-align: center; }
.recap-hero { max-width: 680px; margin: 0 auto 38px; }
.recap-hero__mark { display: grid; width: 76px; height: 76px; place-items: center; margin: 0 auto 20px; border-radius: 50%; color: white; background: var(--success); box-shadow: 0 14px 30px rgba(47, 118, 83, .2); }
.recap-hero__mark .icon { width: 35px; height: 35px; }
.recap-hero .eyebrow { justify-content: center; }
.recap-hero h1 { font-size: clamp(2.5rem, 5vw, 4.2rem); }
.recap-hero p:last-child { color: var(--ink-muted); }
.recap-stats { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--ivory-300); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.recap-stats div { display: grid; padding: 26px 18px; }
.recap-stats div + div { border-left: 1px solid var(--ivory-300); }
.recap-stats strong { font-family: Georgia, serif; font-size: 1.6rem; }
.recap-stats span { color: var(--ink-muted); font-size: .75rem; }
.badge-earned { display: flex; align-items: center; gap: 18px; max-width: 600px; margin: 24px auto; padding: 20px; border-radius: var(--radius-lg); background: var(--gold-100); text-align: left; }
.badge-earned > span { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 16px; color: white; background: var(--gold-500); }
.badge-earned h2, .badge-earned p { margin-bottom: 3px; }
.recap-actions { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }

.weekly-pick { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 5vw, 58px); align-items: center; margin-bottom: 34px; padding: clamp(26px, 5vw, 48px); border-radius: var(--radius-xl); color: white; background: var(--navy-900); box-shadow: var(--shadow-lg); }
.weekly-pick h2 { margin-bottom: 12px; color: white; font-size: clamp(2rem, 4vw, 3.2rem); }
.weekly-pick p:not(.eyebrow) { max-width: 55ch; color: rgba(255, 255, 255, .75); }
.weekly-pick .eyebrow { color: var(--coral-100); }
.weekly-pick__art { display: grid; width: 190px; height: 190px; place-items: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; background: radial-gradient(circle, rgba(231, 101, 77, .45), rgba(231, 101, 77, .04) 62%); }
.weekly-pick__art .icon { width: 96px; height: 96px; color: var(--coral-100); }
.resource-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0; }
.resource-meta span { padding: 5px 9px; border: 1px solid currentColor; border-radius: 999px; font-size: .67rem; font-weight: 800; opacity: .75; }

.resource-toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 22px; padding: 16px; border: 1px solid var(--ivory-300); border-radius: var(--radius-md); background: rgba(255, 253, 248, .78); }
.resource-toolbar label { display: grid; gap: 4px; color: var(--ink-muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.resource-toolbar select, .setting-card select { min-width: 145px; min-height: 44px; padding: 8px 34px 8px 11px; border: 1px solid var(--ivory-300); border-radius: 9px; color: var(--navy-900); background: white; text-transform: none; }
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.resource-card { display: flex; min-height: 310px; flex-direction: column; padding: 22px; border: 1px solid rgba(23, 34, 59, .1); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
.resource-card:hover { border-color: var(--coral-500); box-shadow: var(--shadow-md); }
.resource-card__top { display: flex; justify-content: space-between; margin-bottom: 24px; color: var(--ink-muted); font-size: .68rem; font-weight: 800; }
.resource-type { color: var(--coral-600); text-transform: uppercase; }
.resource-card h2 { margin-bottom: 4px; font-size: 1.35rem; }
.resource-card__provider { color: var(--coral-600) !important; font-size: .75rem !important; font-weight: 800; }
.resource-card > p { color: var(--ink-muted); font-size: .84rem; }
.resource-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ivory-300); }
.resource-card__foot small { color: var(--ink-muted); }
.resource-card__foot a { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; color: white; background: var(--navy-900); }
.empty-state { grid-column: 1 / -1; padding: 50px; border: 1px dashed var(--ivory-300); border-radius: var(--radius-lg); text-align: center; }

.progress-overview { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-bottom: 58px; }
.level-panel, .streak-panel { display: flex; align-items: center; gap: 25px; min-height: 160px; padding: 28px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.level-panel__number { display: grid; width: 88px; height: 88px; flex: 0 0 auto; place-items: center; border-radius: 24px; color: white; background: var(--navy-900); }
.level-panel__number span { align-self: end; font-size: .6rem; font-weight: 900; letter-spacing: .13em; }
.level-panel__number strong { align-self: start; font-family: Georgia, serif; font-size: 2.4rem; line-height: 1; }
.level-panel > div:last-child { flex: 1; }
.level-panel h2, .streak-panel h2 { margin-bottom: 3px; }
.level-panel p, .streak-panel p { color: var(--ink-muted); }
.streak-panel > span { display: grid; width: 70px; height: 70px; place-items: center; border-radius: 20px; color: var(--coral-600); background: var(--coral-100); }
.streak-panel > span .icon { width: 34px; height: 34px; }
.threshold-note { color: var(--ink-muted); font-size: .78rem; }
.mastery-list { display: grid; gap: 10px; margin-bottom: 58px; }
.mastery-row { display: grid; grid-template-columns: 12px 1fr; gap: 17px; align-items: center; padding: 18px 20px; border: 1px solid var(--ivory-300); border-radius: var(--radius-md); background: rgba(255, 253, 248, .82); }
.mastery-row__dot { width: 10px; height: 42px; border-radius: 99px; background: var(--coral-500); }
.mastery-row__dot--sage { background: var(--sage-500); }.mastery-row__dot--lavender { background: var(--lavender-500); }.mastery-row__dot--blue { background: var(--blue-500); }.mastery-row__dot--gold { background: var(--gold-500); }.mastery-row__dot--rose { background: var(--rose-500); }.mastery-row__dot--teal { background: var(--teal-500); }
.mastery-row__heading { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.mastery-row h3 { margin: 0; font-family: inherit; font-size: .92rem; letter-spacing: 0; }
.mastery-row__heading span { color: var(--ink-muted); font-size: .73rem; font-weight: 800; }
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.badge-card { padding: 22px; border: 1px solid var(--ivory-300); border-radius: var(--radius-lg); color: var(--ink-muted); background: rgba(255, 253, 248, .55); opacity: .72; }
.badge-card > span { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 18px; border-radius: 13px; background: var(--ivory-300); }
.badge-card h3 { margin-bottom: 7px; color: var(--ink-muted); }
.badge-card p { min-height: 48px; font-size: .8rem; }
.badge-card small { font-weight: 900; text-transform: uppercase; }
.badge-card.is-earned { color: var(--navy-900); background: var(--gold-100); opacity: 1; }
.badge-card.is-earned > span { color: white; background: var(--gold-500); }
.badge-card.is-earned h3 { color: var(--navy-900); }

.settings-view { width: min(100%, 900px); }
.settings-list { display: grid; gap: 14px; }
.setting-card { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 22px; padding: 24px; border: 1px solid var(--ivory-300); border-radius: var(--radius-lg); background: var(--surface); }
.setting-card h2 { margin-bottom: 6px; font-size: 1.4rem; }
.setting-card p { margin: 0; color: var(--ink-muted); }
.setting-card label { display: grid; gap: 4px; color: var(--ink-muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.setting-card--danger { border-color: #e7bbb4; }

.confirm-dialog { width: min(calc(100% - 32px), 480px); padding: 0; border: 0; border-radius: var(--radius-lg); color: var(--navy-900); background: var(--surface); box-shadow: var(--shadow-lg); }
.confirm-dialog::backdrop { background: rgba(17, 26, 45, .65); backdrop-filter: blur(5px); }
.confirm-dialog form { padding: 30px; text-align: center; }
.confirm-dialog__mark { display: grid; width: 52px; height: 52px; place-items: center; margin: 0 auto 18px; border-radius: 50%; color: var(--error); background: var(--error-soft); font-weight: 900; }
.confirm-dialog p { color: var(--ink-muted); }
.confirm-dialog__actions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }

.mobile-nav { display: none; }

/* Deep English keeps the approved editorial palette, with a denser study rhythm. */
.deep-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  align-items: center;
  gap: clamp(36px, 6vw, 82px);
  min-height: 450px;
  margin-bottom: 54px;
}

.deep-hero__copy h1 { margin-bottom: 24px; }
.deep-hero__copy h1 em { color: var(--lavender-500); font-weight: 400; }
.deep-hero__copy > p:not(.eyebrow) { max-width: 62ch; color: var(--ink-muted); font-size: 1.08rem; }
.deep-proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; }
.deep-proof span { display: inline-flex; align-items: center; gap: 8px; color: var(--navy-700); font-size: .82rem; font-weight: 800; }
.deep-proof .icon { width: 18px; color: var(--lavender-500); }

.deep-mission {
  position: relative;
  padding: clamp(26px, 4vw, 40px);
  overflow: hidden;
  border-radius: var(--radius-xl);
  color: var(--white);
  background: var(--navy-900);
  box-shadow: var(--shadow-lg);
}

.deep-mission::after { position: absolute; top: -72px; right: -64px; width: 190px; height: 190px; border: 34px solid rgba(231, 225, 243, .08); border-radius: 50%; content: ''; }
.deep-mission .eyebrow { color: var(--lavender-100); }
.deep-mission h2 { position: relative; margin: 28px 0 14px; color: var(--white); font-size: clamp(2rem, 3.5vw, 3rem); }
.deep-mission > p:not(.eyebrow) { color: rgba(255, 255, 255, .72); }
.deep-mission__level { position: relative; z-index: 1; display: inline-flex; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; font-size: .7rem; font-weight: 850; }
.deep-mission__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.deep-mission__meta span { padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, .08); font-size: .72rem; font-weight: 800; }

.deep-overview { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 70px; padding: 18px 22px; border: 1px solid var(--ivory-300); border-radius: var(--radius-md); background: rgba(255, 253, 248, .8); }
.deep-overview span { color: var(--ink-muted); font-size: .82rem; }
.deep-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: -24px 0 16px; }
.deep-metrics article { display: grid; gap: 5px; min-height: 118px; padding: 20px; border: 1px solid var(--ivory-300); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.deep-metrics span { color: var(--ink-muted); font-size: .67rem; font-weight: 900; letter-spacing: .11em; }
.deep-metrics strong { font-family: Georgia, serif; font-size: 1.55rem; }
.deep-metrics small { align-self: end; color: var(--ink-muted); }
.deep-review-card { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin: -48px 0 70px; padding: clamp(22px, 4vw, 34px); border: 1px solid var(--ivory-300); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); }
.deep-review-card.is-ready { border-color: rgba(113, 88, 166, .3); background: var(--lavender-100); }
.deep-review-card h2 { margin-bottom: 7px; font-size: clamp(1.55rem, 3vw, 2.15rem); }
.deep-review-card p:not(.eyebrow) { max-width: 62ch; margin: 0; color: var(--ink-muted); }
.deep-review-card__clear { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: var(--success); font-weight: 850; }
.deep-review-card__clear .icon { width: 20px; }
.deep-academy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.deep-academy {
  --academy: var(--coral-500);
  display: flex;
  min-height: 410px;
  flex-direction: column;
  padding: 24px;
  border: 1px solid rgba(23, 34, 59, .1);
  border-top: 5px solid var(--academy);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 248, .92);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.deep-academy:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.deep-academy--sage { --academy: var(--sage-500); }
.deep-academy--blue { --academy: var(--blue-500); }
.deep-academy--lavender { --academy: var(--lavender-500); }
.deep-academy--gold { --academy: var(--gold-500); }
.deep-academy--rose { --academy: var(--rose-500); }
.deep-academy__top { display: flex; justify-content: space-between; margin-bottom: 34px; color: var(--ink-muted); font-size: .7rem; }
.deep-academy__top strong { color: var(--academy); }
.deep-academy h2 { margin-bottom: 10px; font-size: 1.6rem; }
.deep-academy p:not(.eyebrow) { color: var(--ink-muted); font-size: .84rem; }
.deep-academy .deep-progress { margin-top: auto; }
.deep-chapter-list { display: grid; gap: 9px; margin: 16px 0 0; padding: 0; list-style: none; }
.deep-chapter { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--ivory-300); border-radius: 12px; background: var(--ivory-50); }
.deep-chapter--resume { border-color: color-mix(in srgb, var(--academy) 45%, var(--ivory-300)); background: var(--surface); }
.deep-chapter__number { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; color: var(--navy-900); background: var(--ivory-300); font-size: .7rem; font-weight: 900; }
.deep-chapter--validated .deep-chapter__number { color: var(--white); background: var(--success); }
.deep-chapter strong { display: block; font-size: .78rem; line-height: 1.25; }
.deep-chapter small { display: block; margin-top: 3px; color: var(--ink-muted); font-size: .67rem; }
.deep-chapter .text-button { align-self: center; margin: 0; padding: 5px; font-size: .7rem; white-space: nowrap; }
.deep-chapter .text-button .icon { width: 14px; }
.deep-special-section { margin-top: 64px; }
.deep-special-section .section-heading p:not(.eyebrow) { max-width: 650px; margin-top: 8px; color: var(--ink-muted); }
.deep-special-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.deep-special-card { display: flex; min-height: 245px; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--ivory-300); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.deep-special-card h3 { margin: 4px 0 0; font-family: Georgia, serif; font-size: 1.25rem; }
.deep-special-card > p { color: var(--ink-muted); font-size: .84rem; }
.deep-special-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.deep-special-card small { color: var(--ink-muted); font-size: .72rem; }
.deep-special-card__state { color: var(--blue-700); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.deep-special-card__state .icon { width: 14px; vertical-align: -2px; }
.deep-capstones .deep-special-card { border-top: 4px solid var(--gold-500); }
.deep-special-card.is-locked { border-top-color: var(--ivory-400); background: color-mix(in srgb, var(--surface) 80%, var(--ivory-200)); }
.deep-lock-reason { padding: 9px 11px; border-radius: 10px; color: var(--navy-900) !important; background: var(--ivory-200); font-weight: 700; }
.deep-journey-status { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: -38px 0 48px; padding: 18px 20px; border-left: 4px solid var(--gold-500); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface); }
.deep-journey-status span { color: var(--ink-muted); font-size: .82rem; }
.deep-mission-source { max-height: 360px; overflow: auto; }
.deep-progress { width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: var(--ivory-300); }
.deep-progress span { display: block; height: 100%; border-radius: inherit; background: var(--lavender-500); transition: width .5s var(--ease); }
.deep-academy .deep-progress span { background: var(--academy); }

.deep-intro { width: min(100%, 980px); margin: 0 auto; }
.deep-back { margin-bottom: 28px; }
.deep-back .icon { transform: rotate(180deg); }
.deep-intro__hero { max-width: 800px; margin-bottom: 42px; }
.deep-intro__hero h1 { margin-bottom: 20px; font-size: clamp(2.7rem, 5vw, 4.7rem); }
.deep-intro__hero > p:not(.eyebrow) { max-width: 62ch; color: var(--ink-muted); font-size: 1.06rem; }
.deep-intro__facts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.deep-intro__facts span { padding: 7px 11px; border: 1px solid var(--ivory-300); border-radius: 999px; background: var(--ivory-50); font-size: .74rem; font-weight: 800; }
.deep-phase-map { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.deep-phase-map li { min-height: 170px; padding: 18px; border: 1px solid var(--ivory-300); border-radius: var(--radius-md); background: var(--surface); }
.deep-phase-map li > span { display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: 28px; border-radius: 10px; color: var(--white); background: var(--navy-900); font-size: .75rem; font-weight: 900; }
.deep-phase-map strong { font-family: Georgia, serif; font-size: 1.05rem; }
.deep-phase-map p { margin: 5px 0 0; color: var(--ink-muted); font-size: .76rem; }
.deep-intro__action { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding: 22px; border-radius: var(--radius-lg); background: var(--lavender-100); }
.deep-intro__action p { margin: 0; color: var(--navy-700); }

.deep-session { width: min(100%, 920px); margin: 0 auto; }
.deep-session__top { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 18px; margin-bottom: 30px; }
.deep-session__meta { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--ink-muted); font-size: .72rem; font-weight: 850; letter-spacing: .08em; }
.deep-xp { padding: 7px 11px; border-radius: 999px; background: var(--lavender-100); font-size: .72rem; font-weight: 850; }
.deep-exercise { min-height: 560px; padding: clamp(24px, 5vw, 46px); border: 1px solid rgba(23, 34, 59, .11); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-md); }
.deep-exercise .prompt-block h1 { margin: 0; font-size: clamp(1.65rem, 3.2vw, 2.45rem); line-height: 1.2; letter-spacing: -.035em; }
.deep-reading { max-height: 330px; margin: -8px 0 28px; padding: 26px; overflow-y: auto; border-left: 4px solid var(--sage-500); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--sage-100); }
.deep-reading h2 { margin-bottom: 12px; font-size: 1.5rem; }
.deep-reading > p:last-child { margin: 0; color: var(--navy-800); line-height: 1.82; white-space: pre-line; }
.deep-listening { display: flex; align-items: center; gap: 22px; margin: -8px 0 18px; padding: 24px; border-radius: var(--radius-lg); background: var(--lavender-100); }
.deep-listening__mark { display: grid; width: 72px; height: 72px; flex: 0 0 auto; place-items: center; border-radius: 20px; color: var(--lavender-500); background: var(--white); }
.deep-listening__mark .icon { width: 30px; height: 30px; }
.deep-listening h2 { margin-bottom: 14px; font-size: 1.5rem; }
.text-answer textarea { width: 100%; min-height: 150px; resize: vertical; padding: 15px 16px; border: 1px solid var(--ivory-300); border-radius: 13px; color: var(--navy-900); background: var(--white); line-height: 1.65; }
.text-answer textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(35, 104, 217, .12); outline: 0; }
.deep-feedback { display: grid; grid-template-columns: 42px 1fr; gap: 14px; margin-top: 22px; padding: 18px; border-radius: 14px; background: var(--error-soft); }
.deep-feedback--correct { background: var(--success-soft); }
.deep-feedback--reflection { background: var(--lavender-100); }
.deep-feedback > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; background: rgba(255, 255, 255, .68); }
.deep-feedback p { margin: 4px 0 0; color: var(--navy-800); }
.deep-model-answer { margin-top: 14px; padding: 13px; border-radius: 10px; background: rgba(255, 255, 255, .64); }
.deep-model-answer small { color: var(--lavender-500); font-weight: 900; letter-spacing: .1em; }
.deep-recap { width: min(100%, 850px); margin: 0 auto; text-align: center; }
.deep-recap__hero { max-width: 680px; margin: 0 auto 38px; }
.deep-recap__hero > span { display: grid; width: 76px; height: 76px; place-items: center; margin: 0 auto 20px; border-radius: 22px; color: var(--white); background: var(--navy-900); }
.deep-recap__hero > span .icon { width: 34px; height: 34px; }
.deep-recap__hero .eyebrow { justify-content: center; }
.deep-recap__hero h1 { font-size: clamp(2.6rem, 5vw, 4.3rem); }
.deep-recap__hero > p:last-child { color: var(--ink-muted); }
.deep-recap__note { margin-top: 22px; padding: 20px; border-radius: var(--radius-lg); background: var(--lavender-100); }
.deep-recap__note p { margin: 5px 0 0; color: var(--navy-700); }
.deep-progress-view { width: min(100%, 1040px); }
.deep-progress-view .deep-metrics { margin: 0 0 58px; }
.recent-session-list { display: grid; gap: 10px; }
.recent-session-list > article { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border: 1px solid var(--ivory-300); border-radius: var(--radius-md); background: var(--surface); }
.recent-session-list > article div { display: grid; gap: 4px; }
.recent-session-list span { color: var(--ink-muted); font-size: .75rem; }
.recent-session-list b { color: var(--lavender-500); font-family: Georgia, serif; font-size: 1.35rem; }

/* Personal Tutor */
.tutor-gate { display: grid; min-height: min(650px, 68vh); place-items: center; }
.tutor-gate__card { width: min(100%, 640px); padding: clamp(28px, 6vw, 58px); border: 1px solid var(--ivory-300); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-lg); text-align: center; }
.tutor-gate__mark, .tutor-entry__icon { display: grid; width: 58px; height: 58px; place-items: center; margin: 0 auto 22px; border-radius: 18px; color: var(--white); background: var(--navy-900); }
.tutor-gate__mark .icon, .tutor-entry__icon .icon { width: 27px; height: 27px; }
.tutor-gate .eyebrow { justify-content: center; }
.tutor-gate h1 { margin: 8px 0 12px; font-size: clamp(2.25rem, 5vw, 3.6rem); }
.tutor-gate p { max-width: 52ch; margin: 0 auto; color: var(--ink-muted); line-height: 1.7; }
.tutor-unlock { margin-top: 28px; text-align: left; }
.tutor-unlock label, .tutor-composer label { display: block; margin-bottom: 8px; color: var(--navy-900); font-size: .78rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.tutor-unlock__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.tutor-unlock input, .tutor-composer textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--ivory-300); border-radius: 12px; color: var(--navy-900); background: var(--white); font: inherit; }
.tutor-unlock input:focus, .tutor-composer textarea:focus { border-color: var(--coral-500); outline: 3px solid rgba(232, 92, 76, .16); }
.tutor-status { min-height: 24px; margin-top: 14px; color: var(--ink-muted); font-size: .82rem; }
.tutor-status--error { color: var(--error); font-weight: 750; }

.tutor-home { width: min(100%, 1120px); }
.tutor-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 38px; }
.tutor-hero > div { max-width: 720px; }
.tutor-hero h1 { margin: 8px 0 18px; }
.tutor-hero h1 em { color: var(--coral-500); font-weight: 500; }
.tutor-hero > div > p:last-child { max-width: 64ch; color: var(--ink-muted); font-size: 1.04rem; line-height: 1.7; }
.tutor-lock-button { flex: 0 0 auto; }
.tutor-entry-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.tutor-entry { min-height: 310px; padding: 30px; border: 1px solid var(--ivory-300); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); }
.tutor-entry--free { background: linear-gradient(145deg, var(--surface), var(--coral-100)); }
.tutor-entry--lesson { background: linear-gradient(145deg, var(--surface), var(--lavender-100)); }
.tutor-entry__icon { width: 48px; height: 48px; margin: 0 0 24px; border-radius: 14px; }
.tutor-entry--lesson .tutor-entry__icon { background: var(--lavender-500); }
.tutor-entry h2 { margin: 8px 0; font-size: 1.7rem; }
.tutor-entry > p:not(.eyebrow) { min-height: 58px; color: var(--ink-muted); line-height: 1.65; }
.tutor-entry .button { margin-top: 20px; }
.tutor-roleplay-heading { margin-top: 58px; }
.tutor-roleplay-heading > span { color: var(--ink-muted); font-size: .82rem; font-weight: 750; }
.tutor-scenario-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tutor-scenario { position: relative; display: grid; min-height: 126px; grid-template-columns: 42px 1fr 24px; gap: 4px 14px; align-items: center; padding: 20px; border: 1px solid var(--ivory-300); border-radius: var(--radius-lg); color: var(--navy-900); background: rgba(255, 253, 248, .86); text-align: left; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.tutor-scenario:hover { border-color: var(--coral-500); background: var(--white); box-shadow: var(--shadow-sm); }
.tutor-scenario > span { display: grid; width: 42px; height: 42px; grid-row: 1 / 3; place-items: center; border-radius: 12px; color: var(--coral-500); background: var(--coral-100); }
.tutor-scenario strong { align-self: end; font-size: .98rem; }
.tutor-scenario small { align-self: start; color: var(--ink-muted); line-height: 1.45; }
.tutor-scenario__arrow { grid-column: 3; grid-row: 1 / 3; }

.tutor-chat { width: min(100%, 860px); }
.tutor-chat__header { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin-bottom: 26px; }
.tutor-chat__header > div { text-align: center; }
.tutor-chat__header .eyebrow { justify-content: center; }
.tutor-chat__header h1 { margin: 5px 0 0; font-size: clamp(2rem, 5vw, 3.1rem); }
.tutor-chat__header > button:last-child { justify-self: end; }
.tutor-lesson-context { display: grid; grid-template-columns: .7fr 1fr 1.3fr; gap: 1px; margin-bottom: 14px; overflow: hidden; border: 1px solid var(--ivory-300); border-radius: var(--radius-lg); background: var(--ivory-300); }
.tutor-lesson-context > div { padding: 14px 16px; background: var(--surface); }
.tutor-lesson-context span { display: block; margin-bottom: 5px; color: var(--ink-muted); font-size: .65rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.tutor-lesson-context strong, .tutor-lesson-context p { margin: 0; color: var(--navy-900); font-size: .88rem; line-height: 1.5; }
.tutor-thread { display: grid; min-height: 300px; max-height: 56vh; gap: 14px; overflow-y: auto; padding: 22px; border: 1px solid var(--ivory-300); border-radius: var(--radius-xl) var(--radius-xl) 10px 10px; background: rgba(255, 253, 248, .74); scroll-behavior: smooth; }
.tutor-empty { max-width: 520px; place-self: center; text-align: center; }
.tutor-empty > span { display: grid; width: 52px; height: 52px; place-items: center; margin: 0 auto 16px; border-radius: 16px; color: var(--coral-500); background: var(--coral-100); }
.tutor-empty h2 { margin: 0 0 8px; }
.tutor-empty p { margin: 0; color: var(--ink-muted); line-height: 1.65; }
.tutor-turn { max-width: 74ch; padding: 16px 18px; border-radius: 17px; }
.tutor-turn > span { display: block; margin-bottom: 6px; font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.tutor-turn > p { margin: 0; white-space: pre-wrap; line-height: 1.68; }
.tutor-turn--learner { justify-self: end; max-width: min(86%, 620px); color: var(--white); background: var(--navy-900); border-bottom-right-radius: 5px; }
.tutor-turn--learner > span { color: rgba(255,255,255,.66); }
.tutor-turn--assistant { justify-self: start; border: 1px solid var(--ivory-300); background: var(--white); border-bottom-left-radius: 5px; box-shadow: var(--shadow-sm); }
.tutor-turn--assistant > span { color: var(--coral-500); }
.tutor-turn--thinking { color: var(--ink-muted); box-shadow: none; }
.tutor-turn__clean { margin-top: 12px !important; color: var(--success); font-size: .82rem; font-weight: 750; }
.tutor-corrections { margin-top: 16px; border-top: 1px solid var(--ivory-300); }
.tutor-corrections summary { padding: 13px 0 5px; color: var(--navy-800); font-size: .82rem; font-weight: 850; cursor: pointer; }
.tutor-corrections ol { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.tutor-corrections li { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px; border-radius: 11px; background: var(--ivory-100); }
.tutor-corrections li span { color: var(--ink-muted); font-size: .64rem; font-weight: 900; letter-spacing: .07em; }
.tutor-corrections li p { margin: 3px 0 0; line-height: 1.45; }
.tutor-corrections li small { grid-column: 1 / -1; color: var(--ink-muted); line-height: 1.5; }
.tutor-next { margin-top: 15px !important; padding-top: 13px; border-top: 1px solid var(--ivory-300); color: var(--navy-700); }
.tutor-composer { padding: 18px; border: 1px solid var(--ivory-300); border-top: 0; border-radius: 10px 10px var(--radius-xl) var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-md); }
.tutor-composer textarea { min-height: 104px; resize: vertical; line-height: 1.65; }
.tutor-composer__meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 10px; }
.tutor-composer__meta small { color: var(--ink-muted); }

.quick-tutor-launchers {
  position: fixed;
  z-index: 70;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.quick-tutor-launcher {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  color: var(--white);
  background: var(--navy-900);
  box-shadow: var(--shadow-lg);
  font: inherit;
  font-size: .88rem;
  font-weight: 850;
  cursor: pointer;
}
.quick-tutor-launcher:hover { background: var(--navy-800); transform: translateY(-2px); }
.quick-tutor-launcher .icon { width: 19px; height: 19px; color: var(--coral-300); }
.quick-tutor-launcher--voice { color: var(--navy-900); background: var(--coral-100); border-color: var(--coral-200); }
.quick-tutor-launcher--voice:hover { color: var(--white); background: var(--coral-600); }
.quick-tutor-launcher--voice .icon { color: currentColor; }
.quick-tutor-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(100%, 540px);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: var(--navy-900);
  background: var(--surface);
  box-shadow: -18px 0 55px rgba(23, 34, 59, .18);
}
.quick-tutor-panel::backdrop { background: rgba(23, 34, 59, .38); backdrop-filter: blur(3px); }
.quick-tutor-drawer { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr); }
.quick-tutor-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 22px 18px; border-bottom: 1px solid var(--ivory-300); }
.quick-tutor-header .eyebrow { margin: 0 0 4px; }
.quick-tutor-header h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.quick-tutor-header__actions { display: flex; align-items: center; gap: 7px; }
.quick-tutor-body { display: flex; min-height: 0; flex-direction: column; overflow: hidden; }
.quick-tutor-context { padding: 13px 20px; border-bottom: 1px solid var(--ivory-300); background: var(--ivory-100); }
.quick-tutor-context > span { color: var(--coral-600); font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.quick-tutor-context p { margin: 5px 0 0; font-size: .88rem; line-height: 1.5; }
.quick-tutor-context small { display: block; margin-top: 6px; color: var(--ink-muted); }
.quick-tutor-thread { display: grid; min-height: 0; flex: 1; align-content: start; gap: 12px; overflow-y: auto; padding: 20px; background: rgba(244, 239, 230, .38); }
.quick-tutor-empty { max-width: 360px; place-self: center; padding: 38px 18px; text-align: center; }
.quick-tutor-empty > .icon { width: 30px; height: 30px; color: var(--coral-500); }
.quick-tutor-empty h3 { margin: 14px 0 7px; }
.quick-tutor-empty p { margin: 0; color: var(--ink-muted); line-height: 1.6; }
.quick-tutor-composer { padding: 16px 20px 20px; border-top: 1px solid var(--ivory-300); background: var(--surface); }
.quick-tutor-composer label, .quick-tutor-unlock label { display: block; margin-bottom: 7px; font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.quick-tutor-composer textarea, .quick-tutor-unlock input { width: 100%; padding: 12px 13px; border: 1px solid var(--ivory-300); border-radius: 12px; color: var(--navy-900); background: var(--white); font: inherit; }
.quick-tutor-composer textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.quick-tutor-composer textarea:focus, .quick-tutor-unlock input:focus { border-color: var(--coral-500); outline: 3px solid rgba(232, 92, 76, .16); }
.quick-tutor-composer__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; }
.quick-tutor-composer__meta small { color: var(--ink-muted); font-size: .68rem; line-height: 1.4; }
.quick-tutor-status { min-height: 22px; padding: 0 20px; color: var(--ink-muted); font-size: .78rem; }
.quick-tutor-status--error { color: var(--error); font-weight: 750; }
.quick-tutor-gate { margin: auto; width: min(100%, 420px); padding: 34px 26px; text-align: center; }
.quick-tutor-gate h3 { margin: 0 0 9px; font-size: 1.55rem; }
.quick-tutor-gate > p { margin: 0; color: var(--ink-muted); line-height: 1.6; }
.quick-tutor-unlock { display: grid; gap: 10px; margin-top: 24px; text-align: left; }
.quick-tutor-unlock .button { width: 100%; }

.tutor-chat__actions { display: flex; justify-self: end; gap: 8px; }
.voice-tutor {
  width: min(calc(100% - 32px), 620px);
  max-width: 620px;
  max-height: min(760px, calc(100dvh - 32px));
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--radius-xl);
  color: var(--navy-900);
  background: var(--surface);
  box-shadow: 0 28px 90px rgba(23, 34, 59, .28);
}
.voice-tutor::backdrop { background: rgba(23, 34, 59, .52); backdrop-filter: blur(4px); }
.voice-tutor__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; border-bottom: 1px solid var(--ivory-300); }
.voice-tutor__header .eyebrow { margin: 0 0 4px; }
.voice-tutor__header h2 { margin: 0; font-size: 1.65rem; }
.voice-tutor__header small { display: block; max-width: 46ch; margin-top: 5px; overflow: hidden; color: var(--ink-muted); text-overflow: ellipsis; white-space: nowrap; }
.voice-tutor__empty, .voice-session { padding: 34px 28px 30px; text-align: center; }
.voice-tutor__empty { display: grid; justify-items: center; gap: 12px; }
.voice-tutor__empty h3 { margin: 4px 0 0; font-size: 1.55rem; }
.voice-tutor__empty p { max-width: 48ch; margin: 0; color: var(--ink-muted); line-height: 1.6; }
.voice-tutor__mark, .voice-orb { display: grid; width: 76px; height: 76px; place-items: center; border-radius: 50%; color: var(--white); background: var(--coral-500); box-shadow: 0 0 0 10px var(--coral-100); }
.voice-tutor__mark .icon, .voice-orb .icon { width: 30px; height: 30px; }
.voice-privacy { font-size: .78rem; }
.voice-tutor__actions, .voice-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 12px; }
.voice-session { display: grid; justify-items: center; gap: 20px; }
.voice-orb--listening { animation: voice-pulse 2.4s ease-in-out infinite; }
.voice-orb--thinking { background: var(--lavender-500); box-shadow: 0 0 0 10px var(--lavender-100); }
.voice-orb--speaking { background: var(--navy-800); box-shadow: 0 0 0 10px rgba(23, 34, 59, .1); }
.voice-orb--paused { color: var(--ink-muted); background: var(--ivory-300); box-shadow: none; }
.voice-status { display: flex; align-items: center; gap: 14px; font-size: 1.05rem; }
.voice-status time { min-width: 64px; padding: 6px 9px; border-radius: 999px; color: var(--navy-700); background: var(--ivory-100); font-variant-numeric: tabular-nums; }
.voice-status time.is-warning { color: var(--error); background: rgba(185, 55, 55, .09); font-weight: 850; }
.voice-prompt { margin: 0; color: var(--ink-muted); }
.voice-transcript { width: 100%; max-height: 180px; overflow: auto; padding: 14px 16px; border: 1px solid var(--ivory-300); border-radius: var(--radius-lg); background: var(--ivory-100); text-align: left; }
.voice-transcript p { margin: 0; line-height: 1.55; }
.voice-transcript p + p { margin-top: 8px; }
.voice-feedback { width: 100%; padding: 18px; border-radius: var(--radius-lg); background: var(--lavender-100); text-align: left; }
.voice-feedback h3 { margin: 4px 0 8px; }
.voice-feedback ul { display: grid; gap: 8px; padding: 0; list-style: none; }
.voice-feedback li { display: grid; gap: 4px; }
.voice-feedback li strong { color: var(--success); }
.voice-feedback li small { color: var(--ink-muted); }
.voice-stop { color: var(--error); }
@keyframes voice-pulse { 50% { box-shadow: 0 0 0 17px rgba(232, 92, 76, .08); transform: scale(1.03); } }

body[data-world="deep"][data-deep-mode="intro"] .main-nav,
body[data-world="deep"][data-deep-mode="intro"] .mobile-nav,
body[data-world="deep"][data-deep-mode="session"] .main-nav,
body[data-world="deep"][data-deep-mode="session"] .mobile-nav,
body[data-world="deep"][data-deep-mode="recap"] .main-nav,
body[data-world="deep"][data-deep-mode="recap"] .mobile-nav { display: none; }

.loading-view { display: grid; min-height: 60vh; place-items: center; align-content: center; color: var(--ink-muted); }
.loading-view span { width: 38px; height: 38px; border: 3px solid var(--ivory-300); border-top-color: var(--coral-500); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

@media (max-width: 980px) {
  .app-header__inner { grid-template-columns: 1fr auto auto; }
  .main-nav { display: none; }
  .home-hero { grid-template-columns: 1fr; }
  .deep-hero { grid-template-columns: 1fr; }
  .deep-mission { max-width: 720px; }
  .deep-academy-grid { grid-template-columns: repeat(2, 1fr); }
  .deep-phase-map { grid-template-columns: repeat(3, 1fr); }
  .hero-copy { max-width: 760px; }
  .quest-card { max-width: 680px; }
  .track-grid, .track-grid--full, .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-strip { margin-top: 46px; }
  .weekly-pick { grid-template-columns: 150px 1fr; }
  .weekly-pick__art { width: 140px; height: 140px; }
  .weekly-pick__art .icon { width: 70px; height: 70px; }
  .badge-grid { grid-template-columns: repeat(2, 1fr); }
  .tutor-entry-grid { grid-template-columns: 1fr; }
  .mobile-nav {
    position: fixed;
    z-index: 50;
    right: 14px;
    bottom: 12px;
    left: 14px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: 66px;
    padding: 7px;
    border: 1px solid rgba(23, 34, 59, .12);
    border-radius: 19px;
    background: rgba(255, 253, 248, .95);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
  }
  .mobile-nav button { display: grid; min-height: 50px; place-items: center; align-content: center; gap: 2px; border: 0; border-radius: 12px; color: var(--ink-muted); background: transparent; font-size: .65rem; font-weight: 800; }
  .mobile-nav button.is-active { color: var(--navy-900); background: var(--ivory-200); }
  .mobile-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  #app { padding-bottom: 120px; }
}

@media (max-width: 720px) {
  :root { --header-height: 76px; }
  .app-header { padding: 8px 10px 0; }
  .app-header__inner { min-height: 58px; padding-left: 10px; border-radius: 16px; }
  .header-center { justify-self: center; }
  .world-switch button { min-height: 36px; padding: 6px 9px; font-size: .69rem; }
  .brand__mark { width: 35px; height: 35px; }
  .brand strong { font-size: 1rem; }
  .header-xp { display: none; }
  #app { padding: 48px 14px 112px; }
  h1 { font-size: clamp(2.45rem, 13vw, 3.8rem); }
  .home-hero { gap: 28px; }
  .hero-copy { padding-top: 0; }
  .hero-proof { gap: 12px; }
  .quest-card { padding: 23px; border-radius: var(--radius-lg); }
  .quest-card__header { display: block; }
  .quest-badge { position: absolute; top: 0; right: 0; }
  .quest-card h2 { max-width: 70%; }
  .quest-steps { overflow-x: auto; padding-bottom: 4px; }
  .quest-steps i { min-width: 12px; }
  .metric-strip { grid-template-columns: 1fr; margin: 32px 0 66px; }
  .metric + .metric { border-top: 1px solid var(--ivory-300); border-left: 0; }
  .metric { min-height: 84px; padding: 17px 20px; }
  .section-heading { align-items: start; }
  .section-heading .text-button { display: none; }
  .track-grid, .track-grid--full, .resource-grid, .badge-grid { grid-template-columns: 1fr; }
  .deep-academy-grid, .deep-phase-map { grid-template-columns: 1fr; }
  .deep-academy { min-height: 290px; }
  .deep-phase-map li { display: grid; min-height: 0; grid-template-columns: 38px 1fr; gap: 12px; padding: 15px; }
  .deep-phase-map li > span { margin: 0; }
  .deep-intro__action { align-items: stretch; flex-direction: column; }
  .deep-intro__action .button { width: 100%; }
  .deep-session__top { grid-template-columns: 44px 1fr; }
  .deep-xp { display: none; }
  .deep-exercise { min-height: 500px; padding: 22px 18px; }
  .deep-listening { align-items: flex-start; }
  .deep-listening__mark { width: 54px; height: 54px; }
  .deep-overview { align-items: flex-start; flex-direction: column; }
  .deep-metrics { grid-template-columns: 1fr; margin-top: 0; }
  .deep-metrics article { min-height: 94px; }
  .deep-review-card { align-items: stretch; flex-direction: column; margin-top: -40px; }
  .deep-review-card .button { width: 100%; }
  .deep-special-grid { grid-template-columns: 1fr; }
  .deep-special-card > div, .deep-journey-status { align-items: stretch; flex-direction: column; }
  .deep-special-card .button { width: 100%; }
  .deep-journey-status { margin-top: -28px; }
  .track-card { min-height: 295px; }
  .page-heading { margin-top: 0; margin-bottom: 38px; }
  .page-heading--split { display: block; }
  .page-heading__art { display: none; }
  .session-topbar { grid-template-columns: 44px 1fr; }
  .session-topbar .xp-chip { display: none; }
  .micro-lesson { grid-template-columns: 1fr; padding: 22px; }
  .exercise-card { min-height: 480px; padding: 22px 18px; border-radius: var(--radius-lg); }
  .listening-panel { align-items: flex-start; }
  .listening-panel__pulse { width: 54px; height: 54px; border-width: 5px; }
  .listening-panel__pulse .icon { width: 23px; height: 23px; }
  .audio-actions { gap: 5px; }
  .audio-actions .button { padding: 8px 10px; }
  .exercise-actions { align-items: stretch; flex-direction: column-reverse; }
  .exercise-actions .button { width: 100%; }
  .exercise-actions .quiet-button { align-self: center; }
  .exercise-help-actions { align-items: stretch; flex-direction: column; }
  .weekly-pick { grid-template-columns: 1fr; padding: 26px; }
  .weekly-pick__art { display: none; }
  .resource-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .resource-toolbar label:last-child { grid-column: 1 / -1; }
  .resource-toolbar select { width: 100%; min-width: 0; }
  .progress-overview { grid-template-columns: 1fr; }
  .level-panel, .streak-panel { min-height: 135px; padding: 20px; }
  .recap-stats { grid-template-columns: 1fr; }
  .recap-stats div + div { border-top: 1px solid var(--ivory-300); border-left: 0; }
  .recap-actions, .confirm-dialog__actions { flex-direction: column; }
  .recap-actions .button { width: 100%; }
  .setting-card { grid-template-columns: 1fr; }
  .setting-card select, .setting-card .button { width: 100%; }
  .tutor-hero { align-items: stretch; flex-direction: column; }
  .tutor-lock-button { align-self: flex-start; }
  .tutor-scenario-grid { grid-template-columns: 1fr; }
  .tutor-chat__header { grid-template-columns: 1fr 1fr; }
  .tutor-chat__header > div { grid-column: 1 / -1; grid-row: 1; }
  .tutor-chat__header > button:first-child { grid-column: 1; grid-row: 2; justify-self: start; }
  .tutor-chat__header > button:last-child, .tutor-chat__actions { grid-column: 2; grid-row: 2; }
  .tutor-chat__actions { align-items: flex-end; flex-direction: column; }
  .tutor-lesson-context { grid-template-columns: 1fr; }
  .tutor-thread { min-height: 260px; max-height: none; padding: 14px; }
  .tutor-turn--learner { max-width: 92%; }
  .tutor-corrections li { grid-template-columns: 1fr; }
  .tutor-corrections li small { grid-column: auto; }
  .tutor-composer__meta, .tutor-unlock__row { display: flex; align-items: stretch; flex-direction: column; }
  .tutor-composer__meta .button, .tutor-unlock__row .button { width: 100%; }
  .quick-tutor-launchers { right: 18px; bottom: 92px; }
  .quick-tutor-launcher { min-height: 46px; padding: 10px 13px; }
  .quick-tutor-launcher--voice span { display: none; }
  .quick-tutor-panel { inset: 0; width: 100%; height: 100dvh; }
  .quick-tutor-header { padding: 16px 14px 13px; }
  .quick-tutor-context { padding: 11px 14px; }
  .quick-tutor-thread { padding: 14px; }
  .quick-tutor-composer { padding: 12px 14px max(14px, env(safe-area-inset-bottom)); }
  .quick-tutor-composer__meta { align-items: stretch; flex-direction: column; }
  .quick-tutor-composer__meta .button { width: 100%; }
  .voice-tutor { width: 100%; max-height: 100dvh; border-radius: 0; }
  .voice-tutor__header { padding: 17px 16px 14px; }
  .voice-tutor__empty, .voice-session { padding: 28px 16px max(24px, env(safe-area-inset-bottom)); }
  .voice-controls { align-items: stretch; flex-direction: column; width: 100%; }
  .voice-controls .button { width: 100%; }
}

@media (max-width: 420px) {
  .brand small { display: none; }
  .brand__mark { width: 32px; }
  .world-switch button { padding-right: 7px; padding-left: 7px; }
  .header-actions { gap: 5px; }
  .header-actions .icon-button { width: 40px; min-height: 40px; }
  .header-xp { font-size: .68rem; }
  .hero-proof { display: grid; }
  .quest-card h2 { max-width: none; padding-right: 82px; }
  .resource-toolbar { grid-template-columns: 1fr; }
  .resource-toolbar label:last-child { grid-column: auto; }
  .mastery-row { padding: 15px; }
  .mastery-row__heading { display: grid; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}