:root {
  color-scheme: dark;
  --bg: #141414;
  --surface: #1e1e1e;
  --surface-2: #262626;
  --line: #575044;
  --text: #fff8eb;
  --muted: #c4bdae;
  --blue: #f5c65d;
  --green: #52e08b;
  --green-dark: #173e2b;
  --red: #ff7f8c;
  --red-dark: #48232d;
  --focus: #ffe4a2;
}

.mastery-check{margin-top:1.15rem;padding:1.15rem;border:1px solid #575044;border-radius:1.15rem;background:linear-gradient(145deg,#262626,#1e1e1e);box-shadow:0 16px 34px rgba(0,0,0,.2)}.mastery-kicker{color:#f5c65d;font-size:.75rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.mastery-check h2{margin:.45rem 0 .5rem;font-size:1.2rem;line-height:1.3}.mastery-instruction{margin:0 0 1rem;color:#c4bdae;font-size:.92rem}.mastery-controls{display:flex;gap:.7rem;align-items:stretch}.record-button{flex:1;min-height:4.1rem;border:0;border-radius:1rem;background:linear-gradient(135deg,#f5c65d,#ffe4a2);color:#211706;font-size:1.05rem;font-weight:900;cursor:pointer;box-shadow:0 8px 20px rgba(245,198,93,.18)}.record-button.recording{background:linear-gradient(135deg,#ff9ca6,#ffcf8a);animation:pulse 1.2s ease-in-out infinite}.skip-button{min-height:4.1rem;padding:0 1rem;border:1px solid #575044;border-radius:1rem;background:#1e1e1e;color:#fff8eb;font-weight:750;cursor:pointer}.mastery-check textarea{width:100%;margin-top:.75rem;padding:.8rem;border:1px solid #575044;border-radius:.8rem;background:#141414;color:#fff8eb;resize:vertical;font:inherit;line-height:1.4}.submit-mastery{width:100%;min-height:3rem;margin-top:.7rem;border:1px solid #575044;border-radius:.8rem;background:#262626;color:#fff8eb;font-weight:800;cursor:pointer}.mastery-feedback{margin-top:.75rem;padding:.75rem;border-radius:.75rem;line-height:1.4;color:#fff8eb}.mastery-feedback.strong{background:#12392d;color:#a8f0cf}.mastery-feedback.detail{background:#3b3218;color:#f7d993}.mastery-feedback.notyet{background:#42252d;color:#ffc0c7}@keyframes pulse{50%{transform:scale(1.015);box-shadow:0 0 0 7px rgba(255,156,166,.12)}}@media(max-width:600px){.mastery-controls{flex-direction:column}.record-button,.skip-button{width:100%;min-height:4.5rem}.mastery-check{padding:1rem}.mastery-check h2{font-size:1.08rem}}
.mastery-toggle{display:flex;align-items:center;gap:.55rem;margin:0 0 .75rem;color:#fff8eb;font-size:.9rem;font-weight:800}.mastery-toggle input{width:1.2rem;height:1.2rem;accent-color:#f5c65d}.regular-mastery{width:100%;margin-top:.6rem;border:0;background:transparent;color:#c4bdae;text-decoration:underline;cursor:pointer;font-size:.88rem}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% -15%, rgba(245, 198, 93, .08), transparent 42rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

.shell {
  width: min(100%, 78rem);
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 2.5rem) max(2rem, env(safe-area-inset-bottom));
}

.topbar {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--text);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.brand b { color: var(--blue); }

.brand-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .65rem;
  color: #211706;
  background: linear-gradient(145deg, #ffe4a2, #f5c65d);
  box-shadow: 0 8px 20px rgba(245, 198, 93, .18);
  font-weight: 950;
}

.letter-filter {
  position: relative;
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .03em;
}

.letter-filter select {
  min-height: 2.35rem;
  padding: .48rem 2rem .48rem .72rem;
  border: 1px solid #575044;
  border-radius: .72rem;
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--blue) 50%) calc(100% - .9rem) calc(50% - .1rem) / .34rem .34rem no-repeat,
    linear-gradient(135deg, var(--blue) 50%, transparent 50%) calc(100% - .56rem) calc(50% - .1rem) / .34rem .34rem no-repeat,
    var(--surface);
  color: var(--text);
  cursor: pointer;
  font-weight: 750;
}

.letter-filter select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.session-progress {
  width: min(11rem, 38vw);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  text-align: right;
}

.progress-track {
  height: .28rem;
  margin-top: .45rem;
  overflow: hidden;
  border-radius: 1rem;
  background: #38342d;
}

.progress-track span {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), #f5c65d);
  transition: width .35s ease;
}

.motivation{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:10px;margin:0 0 22px}.motivation-card,.motivation-tool{background:rgba(38,38,38,.95);border:1px solid #575044;border-radius:14px;padding:12px;color:#fff8eb}.stat-heading,.weekly-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.stat-heading span,.stat-kicker,.motivation-tool small{font-size:.72rem;color:#c4bdae;text-transform:uppercase;letter-spacing:.08em}.daily-goal-track{height:7px;background:#141414;border-radius:99px;overflow:hidden;margin:10px 0}.daily-goal-track span{display:block;height:100%;width:0;background:#f5c65d;border-radius:99px;transition:width .3s}.streak-card{display:flex;flex-direction:column;gap:5px}.streak-card strong{font-size:1.2rem}.streak-card small{color:#c4bdae}.motivation-tools{display:flex;gap:10px}.motivation-tool{flex:1;text-align:left;cursor:pointer}.motivation-tool span{display:block;font-weight:700}.continue-button{border:0;background:transparent;color:#f5c65d;padding:0;cursor:pointer;font-weight:700}.progress-map,.weekly-panel{grid-column:1/-1;background:rgba(30,30,30,.95);border:1px solid #575044;border-radius:14px;padding:12px}.progress-map{display:grid;grid-template-columns:repeat(13,1fr);gap:6px}.progress-map button{border:1px solid #575044;background:#262626;color:#fff8eb;border-radius:8px;padding:7px 0;cursor:pointer}.weekly-stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;color:#c4bdae}.weekly-stats strong{color:#fff8eb}@media(max-width:700px){.motivation{grid-template-columns:1fr 1fr}.daily-card{grid-column:1/-1}.motivation-tools{grid-column:1/-1}.progress-map{grid-template-columns:repeat(7,1fr)}}

.mode-strip {
  display: flex;
  justify-content: center;
  margin-top: .65rem;
}

.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 2.45rem;
  padding: .2rem;
  border: 1px solid #575044;
  border-radius: 999px;
  background: rgba(30, 30, 30, .95);
  color: var(--muted);
  cursor: pointer;
}

.mode-option {
  display: grid;
  place-items: center;
  min-width: 6.3rem;
  padding: .42rem .72rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}

.mode-toggle[aria-checked="false"] .word-mode,
.mode-toggle[aria-checked="true"] .hint-mode {
  background: linear-gradient(145deg, #ffe4a2, #f5c65d);
  color: #211706;
  box-shadow: 0 4px 14px rgba(245, 198, 93, .16);
}

.mode-toggle:hover { border-color: #8d7848; }
.mode-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.lesson {
  width: min(100%, 45rem);
  margin: clamp(1.25rem, 4vh, 3rem) auto 0;
}

h1 {
  margin: 0 0 clamp(.9rem, 2.5vh, 1.5rem);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.25rem, 10vw, 6.2rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .95;
  text-align: center;
}

.hint-area:empty { display: none; }

.skip-word-row { display: flex; justify-content: center; }
.skip-word { min-height: 44px; padding: 6px 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: .875rem; }
.skip-word span { display: block; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.skip-word:hover span { border-color: var(--blue); color: var(--text); }
.skip-word:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-radius: 999px; }

.image-panel {
  position: relative;
  margin: 0 0 .75rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(245, 198, 93, .06), transparent 55%),
    #141414;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: reveal .32s ease both;
}

.image-panel img {
  display: block;
  width: 100%;
  height: clamp(15rem, 35vh, 24rem);
  object-fit: contain;
  object-position: center;
}

.image-panel figcaption {
  padding: .78rem 1rem .9rem;
  color: #fff8eb;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.98rem, 2vw, 1.12rem);
  line-height: 1.42;
  text-align: center;
}

.image-panel figcaption strong { color: var(--blue); }

.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}

.choice {
  min-height: 4.2rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(42, 42, 42, .96), rgba(32, 32, 32, .96));
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .85rem;
  line-height: 1.35;
  text-align: left;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.choice:hover { border-color: #8d7848; transform: translateY(-1px); }
.choice:focus-visible, .next-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.choice-letter {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #575044;
  border-radius: .65rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

.choice.correct { border-color: var(--green); background: var(--green-dark); }
.choice.correct .choice-letter { border-color: var(--green); color: var(--green); }
.choice.incorrect { border-color: var(--red); background: var(--red-dark); }
.choice.incorrect .choice-letter { border-color: var(--red); color: var(--red); }
.choice:disabled { cursor: default; transform: none; }

.feedback {
  margin: .85rem 0 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.45;
}

.feedback.correct { color: var(--green); }
.feedback.incorrect { color: #ffabb3; }

.next-button {
  width: 100%;
  min-height: 3.6rem;
  margin-top: 1.15rem;
  border: 0;
  border-radius: .95rem;
  background: linear-gradient(135deg, #f5c65d, #ffe4a2);
  color: #211706;
  cursor: pointer;
  font-weight: 900;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(-.45rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .shell { padding: max(.75rem, env(safe-area-inset-top)) .75rem max(1rem, env(safe-area-inset-bottom)); }
  .topbar { min-height: 2.9rem; gap: .7rem; }
  .topbar-left { gap: .55rem; }
  .brand { gap: .45rem; font-size: .72rem; letter-spacing: .04em; }
  .brand-mark { width: 1.8rem; height: 1.8rem; }
  .letter-filter > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .letter-filter select { min-height: 2.2rem; max-width: 6.8rem; padding-left: .62rem; font-size: .78rem; }
  .session-progress { width: min(8rem, 30vw); }
  .mode-strip { margin-top: .5rem; }
  .mode-toggle { min-height: 2.25rem; }
  .mode-option { min-width: 5.7rem; padding: .38rem .58rem; font-size: .76rem; }
  .lesson { margin-top: .8rem; }
  h1 { margin-bottom: .9rem; }
  .choices { grid-template-columns: 1fr; gap: .65rem; }
  .choice { min-height: 3.75rem; padding: .72rem .85rem; }
  .image-panel { border-radius: 1rem; }
  .image-panel img { height: min(30vh, 18rem); }
  .image-panel figcaption { padding: .65rem .8rem .72rem; }
}

/* Keep the mobile dashboard compact so the word and choices dominate the first screen. */
@media (max-width: 600px) {
  .shell { padding-top: max(.45rem, env(safe-area-inset-top)); }
  .topbar { min-height: 2.35rem; gap: .35rem; }
  .topbar-left { gap: .35rem; }
  .brand { font-size: .68rem; }
  .brand-mark { width: 1.55rem; height: 1.55rem; border-radius: .48rem; }
  .letter-filter select { min-height: 1.95rem; max-width: 6.2rem; padding-top: .25rem; padding-bottom: .25rem; }
  .session-progress { font-size: .72rem; }
  .progress-track { margin-top: .25rem; }
  .motivation { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
  .motivation-card { border-radius: .72rem; }
  .daily-card { flex: 1 1 100%; padding: 7px 10px; }
  .daily-goal-track { margin: 5px 0 0; height: 5px; }
  .streak-card { flex: 1 1 42%; min-width: 0; padding: 7px 10px; gap: 2px; }
  .streak-card strong { font-size: .98rem; }
  .streak-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
  .motivation-tools { flex: 1 1 52%; gap: 6px; }
  .motivation-tool { min-width: 0; min-height: 58px; padding: 7px 8px; border-radius: .72rem; }
  .motivation-tool span { font-size: .92rem; }
  .motivation-tool small { font-size: .62rem; letter-spacing: .05em; }
  .mode-strip { margin-top: .25rem; }
  .mode-toggle { min-height: 2rem; }
  .mode-option { min-width: 0; padding: .3rem .4rem; font-size: .7rem; }
  .study-actions { gap: 5px; margin: 5px 0 7px; }
  .study-actions button { min-height: 2.55rem; padding: .35rem .4rem; font-size: .82rem; border-radius: .65rem; }
  .lesson { margin-top: .35rem; }
  h1 { margin-bottom: .55rem; }
}

.study-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin:.7rem 0 1.1rem}.study-actions button{border:1px solid #575044;border-radius:.75rem;background:#1e1e1e;color:#fff8eb;padding:.62rem .82rem;cursor:pointer;font-weight:750}.study-actions button:hover,.study-actions button:focus-visible{border-color:var(--blue);background:#262626}.session-recap{margin-top:1rem;padding:1rem;border:1px solid #315a52;border-radius:1rem;background:#102d2a;color:#d9f7eb;line-height:1.5}.session-recap strong{color:#6ee2b2}@media(max-width:600px){.study-actions{display:grid;grid-template-columns:1fr 1fr}.study-actions button:first-child{grid-column:1/-1}.study-actions button{min-height:44px;padding:.7rem .5rem;font-size:.9rem}}

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

/* Tablet and phone ergonomics: keep the study action prominent and controls easy to tap. */
html, body { overflow-x: hidden; }
button, select { touch-action: manipulation; }
.choice, .next-button, .mode-toggle, .motivation-tool, .progress-map button { min-height: 44px; }

@media (min-width: 601px) and (max-width: 900px) {
  .shell { padding-inline: max(1.15rem, env(safe-area-inset-left)) max(1.15rem, env(safe-area-inset-right)); }
  .motivation { grid-template-columns: 1.35fr 1fr; }
  .daily-card { grid-column: 1 / -1; }
  .motivation-tools { grid-column: 1 / -1; }
  .lesson { max-width: 50rem; margin-inline: auto; }
  .image-panel img { height: min(42svh, 25rem); }
}

@media (max-width: 600px) {
  .shell { padding-left: max(.6rem, env(safe-area-inset-left)); padding-right: max(.6rem, env(safe-area-inset-right)); }
  .topbar { flex-wrap: nowrap; align-items: center; gap: .35rem; }
  .topbar-left { flex: 1 1 auto; justify-content: flex-start; gap: .3rem; }
  .brand { gap: .3rem; font-size: .62rem; letter-spacing: .03em; }
  .brand-mark { width: 1.4rem; height: 1.4rem; border-radius: .42rem; }
  .letter-filter select { min-height: 1.8rem; max-width: 5.8rem; padding: .22rem 1.45rem .22rem .5rem; font-size: .7rem; }
  .session-progress { flex: 0 0 auto; width: 6.2rem; font-size: .62rem; text-align: right; }
  .progress-track { height: .18rem; margin-top: .18rem; }
  .motivation { display: grid; grid-template-columns: 1fr 1.55fr; gap: 5px; margin: 4px 0 6px; }
  .motivation-card, .motivation-tool { padding: 6px 8px; border-radius: .62rem; }
  .daily-card { grid-column: 1 / -1; }
  .stat-heading span, .stat-kicker, .motivation-tool small { font-size: .58rem; letter-spacing: .06em; }
  .stat-heading strong { font-size: .86rem; }
  .daily-goal-track { height: 4px; margin: 3px 0 0; }
  .streak-card { gap: 1px; min-height: 3.2rem; }
  .streak-card strong { font-size: .86rem; }
  .streak-card small { display: none; }
  .motivation-tools { gap: 5px; min-width: 0; }
  .motivation-tool { min-height: 3.2rem; padding: 5px 6px; }
  .motivation-tool span { font-size: .78rem; white-space: nowrap; }
  .mode-strip { width: 100%; margin-top: .2rem; }
  .mode-toggle { width: 100%; min-height: 1.85rem; justify-content: space-between; }
  .mode-option { flex: 1; min-width: 0; padding: .25rem .3rem; font-size: .66rem; text-align: center; }
  .study-actions { gap: 4px; margin: 4px 0 5px; }
  .study-actions button { min-height: 2.25rem; padding: .25rem .35rem; font-size: .72rem; border-radius: .55rem; }
  h1 { font-size: clamp(2.7rem, 16vw, 4.5rem); }
  .image-panel img { height: min(31svh, 15rem); }
  .image-panel figcaption { font-size: 1rem; }
  .choice { min-height: 4rem; font-size: 1rem; }
  .progress-map { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .progress-map button { padding-inline: 0; }
}

/* Ultra-compact phone dashboard: all four progress metrics share one thin row. */
@media (max-width: 600px) {
  .motivation { grid-template-columns: 1.2fr .85fr 1fr 1fr; gap: 4px; margin: 3px 0 5px; }
  .motivation-tools { display: contents; }
  .daily-card, .streak-card, .motivation-tool { min-width: 0; min-height: 3.15rem; padding: 5px 6px; border-radius: .55rem; }
  .daily-card { grid-column: auto; }
  .stat-heading { display: block; }
  .stat-heading span, .stat-kicker, .motivation-tool small { display: block; font-size: .5rem; line-height: 1.05; letter-spacing: .045em; }
  .stat-heading strong, .streak-card strong, .motivation-tool span { display: block; margin-top: 2px; font-size: .72rem; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .daily-goal-track { height: 3px; margin: 4px 0 0; }
  .motivation-tool { text-align: left; }
  .motivation-tool small { margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Explicit display rules must never override collapsed panels. */
[hidden] { display: none !important; }
.progress-map .map-close { grid-column: 1 / -1; justify-self: end; padding: 4px 10px; min-height: 32px; font-size: .875rem; }
@media (max-width: 600px) {
  .motivation { gap: 3px; margin: 2px 0 4px; }
  .motivation .daily-card, .motivation .streak-card, .motivation .motivation-tool {
    min-height: 0; padding: 3px 4px; border-radius: 6px; line-height: 1;
  }
  .motivation .streak-card { gap: 0; }
  .motivation .stat-heading span, .motivation .stat-kicker, .motivation .motivation-tool small {
    font-size: .625rem; line-height: 1; letter-spacing: 0;
  }
  .motivation .stat-heading strong, .motivation .streak-card strong, .motivation .motivation-tool span {
    font-size: .75rem; line-height: 1; margin-top: 1px;
  }
  .motivation .motivation-tool small { margin-top: 1px; }
  .motivation .daily-goal-track { height: 2px; margin: 2px 0 0; }
  .motivation .streak-card small { display: none; }
}

/* Phone hint lessons: reserve the first screen for the image and all four answers. */
@media (max-width: 600px) {
  .study-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 4px 0; }
  .study-actions button:first-child { grid-column: auto; }
  .study-actions button { min-height: 36px; padding: 4px; font-size: .875rem; line-height: 1.15; }
  .mode-toggle { min-height: 32px; padding: 2px; }
  .mode-option { padding: 4px 6px; font-size: .875rem; }

  .shell:has(#modeToggle[aria-checked="true"]) .lesson { margin-top: 4px; }
  .shell:has(#modeToggle[aria-checked="true"]) h1 {
    margin-bottom: 6px; font-size: clamp(2rem, 10vw, 2.75rem); overflow-wrap: anywhere;
  }
  .shell:has(#modeToggle[aria-checked="true"]) .image-panel { margin-bottom: 6px; border-radius: .75rem; }
  .shell:has(#modeToggle[aria-checked="true"]) .image-panel img { height: min(22svh, 11rem); }
  .shell:has(#modeToggle[aria-checked="true"]) .image-panel figcaption { padding: 5px 8px 7px; line-height: 1.25; }
  .shell:has(#modeToggle[aria-checked="true"]) .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .shell:has(#modeToggle[aria-checked="true"]) .choice {
    min-width: 0; min-height: 44px; padding: 7px; gap: 6px;
    border-radius: .65rem; align-items: flex-start; font-size: 1rem; line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .shell:has(#modeToggle[aria-checked="true"]) .choice-letter {
    width: 1.25rem; height: 1.25rem; border-radius: .35rem; font-size: .875rem;
  }
  .shell:has(#modeToggle[aria-checked="true"]) .choice > span:last-child { min-width: 0; }
}

/* Very narrow displays keep definitions readable; the page can scroll naturally. */
@media (max-width: 340px) {
  .shell:has(#modeToggle[aria-checked="true"]) .choices { grid-template-columns: 1fr; }
}


/* Learner profiles */
.profile-gate{min-height:100svh;display:grid;place-items:center;padding:24px;background:#141414;color:#f6f1e7}.profile-gate[hidden]{display:none}.profile-card{width:min(620px,100%);text-align:center;background:#1d1d1d;border:1px solid #3b3528;border-radius:24px;padding:clamp(28px,6vw,52px);box-shadow:0 24px 70px rgba(0,0,0,.35)}.profile-logo{width:64px;height:64px;margin:0 auto 18px;border-radius:18px;display:grid;place-items:center;background:#c8a84e;color:#141414;font:800 34px/1 Georgia,serif}.profile-kicker{margin:0 0 8px;color:#c8a84e;font-size:12px;font-weight:800;letter-spacing:.18em}.profile-card h1{margin:0;font-size:clamp(32px,7vw,52px);letter-spacing:-.04em}.profile-subtitle{max-width:480px;margin:12px auto 28px;color:#bcb6a9;line-height:1.5}.profile-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}.profile-choice{text-decoration:none;color:#f6f1e7;border:1px solid #4b4331;border-radius:18px;padding:24px 18px;display:flex;flex-direction:column;gap:6px;background:#24231f;transition:.16s ease}.profile-choice:hover,.profile-choice:focus-visible{transform:translateY(-2px);border-color:#c8a84e;outline:none}.profile-choice strong{font-size:26px}.profile-choice span{font-size:13px;color:#c8a84e}.learner-badge{margin-left:8px;padding:3px 8px;border:1px solid #7e6b37;border-radius:999px;color:#c8a84e;font-size:11px;text-transform:uppercase;letter-spacing:.08em}@media(max-width:520px){.profile-choices{grid-template-columns:1fr}.profile-card{padding:28px 18px}.profile-choice{padding:20px}}

/* Dense laptop hint mode: keep the complete question comfortably above the fold. */
@media (min-width: 901px) {
  .shell:has(#modeToggle[aria-checked="true"]) { padding-top: .45rem; }
  .shell:has(#modeToggle[aria-checked="true"]) .topbar { min-height: 2.55rem; }
  .shell:has(#modeToggle[aria-checked="true"]) .motivation { gap: 5px; margin: 2px 0 5px; }
  .shell:has(#modeToggle[aria-checked="true"]) .motivation-card,
  .shell:has(#modeToggle[aria-checked="true"]) .motivation-tool { padding: 5px 8px; border-radius: 9px; min-height: 0; }
  .shell:has(#modeToggle[aria-checked="true"]) .motivation .stat-heading span,
  .shell:has(#modeToggle[aria-checked="true"]) .motivation .stat-kicker,
  .shell:has(#modeToggle[aria-checked="true"]) .motivation .motivation-tool small { font-size: .62rem; line-height: 1; }
  .shell:has(#modeToggle[aria-checked="true"]) .motivation .stat-heading strong,
  .shell:has(#modeToggle[aria-checked="true"]) .motivation .streak-card strong,
  .shell:has(#modeToggle[aria-checked="true"]) .motivation .motivation-tool span { font-size: .82rem; line-height: 1.05; }
  .shell:has(#modeToggle[aria-checked="true"]) .motivation .streak-card { gap: 2px; }
  .shell:has(#modeToggle[aria-checked="true"]) .motivation .streak-card small { font-size: .68rem; line-height: 1.05; }
  .shell:has(#modeToggle[aria-checked="true"]) .daily-goal-track { height: 3px; margin: 4px 0 0; }
  .shell:has(#modeToggle[aria-checked="true"]) .mode-strip { margin-top: 3px; }
  .shell:has(#modeToggle[aria-checked="true"]) .mode-toggle { min-height: 1.8rem; padding: 2px; }
  .shell:has(#modeToggle[aria-checked="true"]) .mode-option { padding: 3px 9px; font-size: .72rem; }
  .shell:has(#modeToggle[aria-checked="true"]) .study-actions { gap: 5px; margin: 4px 0 5px; }
  .shell:has(#modeToggle[aria-checked="true"]) .study-actions button { padding: 4px 9px; min-height: 28px; border-radius: .55rem; font-size: .76rem; }
  .shell:has(#modeToggle[aria-checked="true"]) .lesson { margin-top: 4px; width: min(100%, 50rem); }
  .shell:has(#modeToggle[aria-checked="true"]) h1 { margin-bottom: 5px; font-size: clamp(3rem, 6vh, 4.6rem); }
  .shell:has(#modeToggle[aria-checked="true"]) .image-panel { margin-bottom: 5px; border-radius: .85rem; }
  .shell:has(#modeToggle[aria-checked="true"]) .image-panel img { height: min(31vh, 17rem); }
  .shell:has(#modeToggle[aria-checked="true"]) .image-panel figcaption { padding: 5px 9px 6px; font-size: .92rem; line-height: 1.2; }
  .shell:has(#modeToggle[aria-checked="true"]) .choices { gap: 6px; }
  .shell:has(#modeToggle[aria-checked="true"]) .choice { min-height: 42px; padding: 6px 9px; border-radius: .65rem; font-size: .9rem; line-height: 1.15; }
  .shell:has(#modeToggle[aria-checked="true"]) .skip-word { min-height: 28px; padding: 2px 8px; font-size: .72rem; }
  .shell:has(#modeToggle[aria-checked="true"]) .skip-word span { padding: 2px 9px; }
}

/* 2026-09-23 viewport-first rule: the complete active question should fit without scrolling. */
@media (min-width: 601px) and (max-width: 900px) {
  .shell { padding-top:max(.35rem,env(safe-area-inset-top)); padding-bottom:max(.5rem,env(safe-area-inset-bottom)); }
  .topbar { min-height:2.2rem; }
  .motivation { grid-template-columns:1.25fr .8fr 1.15fr; gap:4px; margin:3px 0 4px; }
  .daily-card,.streak-card,.motivation-tool { min-height:0; padding:4px 6px; border-radius:7px; }
  .daily-card { grid-column:auto; }
  .motivation-tools { grid-column:auto; gap:4px; }
  .streak-card small { display:none; }
  .mode-strip { margin-top:2px; }
  .mode-toggle { min-height:28px; padding:2px; }
  .mode-option { padding:3px 8px; font-size:.72rem; }
  .study-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:3px 0 4px; }
  .study-actions button { min-height:30px; padding:3px 5px; font-size:.72rem; }
  .lesson { margin-top:2px; }
  .shell:has(#modeToggle[aria-checked="true"]) h1 { font-size:clamp(2.3rem,6svh,3.6rem); margin-bottom:4px; }
  .shell:has(#modeToggle[aria-checked="true"]) .image-panel { margin-bottom:4px; }
  .shell:has(#modeToggle[aria-checked="true"]) .image-panel img { height:min(26svh,14rem); }
  .shell:has(#modeToggle[aria-checked="true"]) .image-panel figcaption { padding:4px 7px 5px; font-size:.82rem; line-height:1.15; }
  .shell:has(#modeToggle[aria-checked="true"]) .choices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
  .shell:has(#modeToggle[aria-checked="true"]) .choice { min-height:38px; padding:4px 6px; font-size:.78rem; line-height:1.1; }
  .shell:has(#modeToggle[aria-checked="true"]) .skip-word { min-height:24px; padding:1px 6px; font-size:.68rem; }
}

@media (max-width:600px) {
  .shell { padding-bottom:max(.35rem,env(safe-area-inset-bottom)); }
  .topbar { min-height:1.9rem; }
  .motivation { margin:2px 0 3px; }
  .motivation .daily-card,.motivation .streak-card,.motivation .motivation-tool { padding:2px 3px; }
  .mode-strip { margin-top:1px; }
  .mode-toggle { min-height:26px; }
  .mode-option { padding:2px 4px; font-size:.68rem; }
  .study-actions { gap:3px; margin:2px 0 3px; }
  .study-actions button { min-height:28px; padding:2px 3px; font-size:.68rem; }
  .shell:has(#modeToggle[aria-checked="true"]) .lesson { margin-top:2px; }
  .shell:has(#modeToggle[aria-checked="true"]) h1 { margin-bottom:3px; font-size:clamp(1.9rem,9vw,2.5rem); line-height:.95; }
  .shell:has(#modeToggle[aria-checked="true"]) .image-panel { margin-bottom:3px; }
  .shell:has(#modeToggle[aria-checked="true"]) .image-panel img { height:min(18svh,9rem); }
  .shell:has(#modeToggle[aria-checked="true"]) .image-panel figcaption { padding:3px 6px 4px; font-size:.72rem; line-height:1.1; }
  .shell:has(#modeToggle[aria-checked="true"]) .choices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
  .shell:has(#modeToggle[aria-checked="true"]) .choice { min-height:36px; padding:3px 5px; gap:4px; font-size:.72rem; line-height:1.08; }
  .shell:has(#modeToggle[aria-checked="true"]) .choice-letter { width:1.05rem;height:1.05rem;font-size:.7rem; }
  .shell:has(#modeToggle[aria-checked="true"]) .skip-word { min-height:22px; padding:1px 5px; margin-top:2px; font-size:.64rem; }
}

@media (max-width:600px) and (max-height:750px) {
  .brand > span:not(.brand-mark):not(.learner-badge) { font-size:0; }
  .brand > span:not(.brand-mark):not(.learner-badge)::after { content:"KV"; font-size:.62rem; }
  .motivation .stat-heading span,.motivation .stat-kicker,.motivation .motivation-tool small { display:none; }
  .motivation .daily-card,.motivation .streak-card,.motivation .motivation-tool { min-height:24px; display:flex; align-items:center; }
  .motivation .daily-goal-track { display:none; }
  .shell:has(#modeToggle[aria-checked="true"]) .image-panel img { height:min(15svh,7rem); }
}