/* ==========================================================================
   LingoMitra — design system
   --------------------------------------------------------------------------
   Every component below is an implementation of an approved source:
     · Watermelon UI     — ui.watermelon.sh (button, badge, alert, table,
                           separator, skeleton, spinner, progress, tooltip,
                           sheet, option-list, command-search, scroll-island,
                           scroll-fade, macos-sidebar, step-pager, text-gradient)
     · Kokonut UI        — kokonutui.com (control surfaces, micro-labels,
                           command-button, ai-text-loading, profile-dropdown)
     · Motion Primitives — motion-primitives.com (text-effect, text-shimmer,
                           scroll-progress, disclosure, in-view, animated-group)
     · Motion            — motion.dev (all orchestration, see js/motion-fx.js)
     · Realtime Colors   — palette + Inter
   21st.dev informs the September 2026 visual refresh; see DESIGN.md.
   ========================================================================== */

/* ── 0. Typeface — Inter Variable, self-hosted (SIL OFL, see fonts/inter.LICENSE).
   Self-hosted rather than CDN-linked so the PWA renders correctly offline and
   the first paint never waits on a third party. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-latin-opsz-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-latin-ext-opsz-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 1. Tokens ─────────────────────────────────────────────────────────────
   Realtime Colors:
   bg #050315 · text #fbfbfe · primary #2f27ce · secondary #dedcff · accent #433bff */

:root {
  color-scheme: dark;

  /* Brand — identical in both themes */
  --primary: #2f27ce;
  --primary-hover: #372fdb;
  --primary-active: #2820b4;
  --secondary: #dedcff;
  --accent: #433bff;

  /* Dark theme (default) */
  --bg: #050315;
  --fg: #fbfbfe;

  --surface-1: #100e20;
  --surface-2: #19172b;
  --surface-3: #242137;
  --surface-inset: rgba(251, 251, 254, 0.035);

  --fg-muted: rgba(251, 251, 254, 0.72);
  --fg-subtle: rgba(251, 251, 254, 0.62);
  --fg-faint: rgba(251, 251, 254, 0.26);
  --on-primary: #fbfbfe;

  --border: rgba(251, 251, 254, 0.12);
  --border-strong: rgba(251, 251, 254, 0.22);
  --border-loud: rgba(251, 251, 254, 0.28);

  --accent-wash: rgba(67, 59, 255, 0.14);
  --accent-line: rgba(67, 59, 255, 0.34);
  --accent-text: #a5a0ff;
  --secondary-text: var(--secondary);
  --fox-accent: #ffb37d;

  /* Functional — states only */
  --success: #34d399;
  --success-wash: rgba(52, 211, 153, 0.11);
  --success-line: rgba(52, 211, 153, 0.28);
  --warning: #fbbf24;
  --danger: #f87171;
  --danger-wash: rgba(248, 113, 113, 0.1);
  --danger-line: rgba(248, 113, 113, 0.28);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
  --shadow-pop: 0 32px 64px -15px rgba(0, 0, 0, 0.7);

  /* Radii — deliberately varied by element weight */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 26px;
  --r-full: 999px;

  /* Type */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Motion */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --measure: 39rem;
  --topbar-h: 60px;
  --rail-w: 292px;
  --gutter: 24px;
}

.theme-light {
  color-scheme: light;

  --bg: #fbfbfe;
  --fg: #050315;

  --surface-1: #ffffff;
  --surface-2: #f3f3f7;
  --surface-3: #eae9f1;
  --surface-inset: rgba(5, 3, 21, 0.03);

  --fg-muted: rgba(5, 3, 21, 0.70);
  --fg-subtle: rgba(5, 3, 21, 0.63);
  --fg-faint: rgba(5, 3, 21, 0.28);

  --border: rgba(5, 3, 21, 0.1);
  --border-strong: rgba(5, 3, 21, 0.22);
  --border-loud: rgba(5, 3, 21, 0.28);

  --accent-wash: rgba(67, 59, 255, 0.07);
  --accent-line: rgba(67, 59, 255, 0.22);
  --accent-text: #2f27ce;
  --secondary-text: #4b43c9;
  --fox-accent: #a74310;

  --success: #059669;
  --success-wash: rgba(5, 150, 105, 0.08);
  --success-line: rgba(5, 150, 105, 0.22);
  --warning: #b45309;
  --danger: #dc2626;
  --danger-wash: rgba(220, 38, 38, 0.06);
  --danger-line: rgba(220, 38, 38, 0.2);

  --shadow-xs: 0 1px 2px rgba(5, 3, 21, 0.05);
  --shadow-sm: 0 1px 4px rgba(5, 3, 21, 0.06);
  --shadow-md: 0 8px 24px -10px rgba(5, 3, 21, 0.16);
  --shadow-lg: 0 24px 60px -22px rgba(5, 3, 21, 0.22);
  --shadow-pop: 0 32px 64px -15px rgba(5, 3, 21, 0.14);
}

/* ── 2. Reset & base ─────────────────────────────────────────────────────── */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + env(safe-area-inset-top) + 24px);
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  font-variant-ligatures: contextual;
  overflow-x: clip;
  transition: background-color var(--dur-slow) var(--ease),
    color var(--dur-slow) var(--ease);
}

body.is-locked {
  overflow: hidden;
  /* Stop the page behind a sheet or the palette from rubber-banding. */
  overscroll-behavior: none;
}

/* Taps should feel immediate and not flash a grey box. */
@media (hover: none) {
  a, button, [role='button'], input, summary {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}
button { cursor: pointer; }

a {
  color: var(--accent-text);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover { text-decoration: underline; }

[v-cloak] { display: none !important; }

::selection {
  background: var(--accent);
  color: #fbfbfe;
}

/* Focus ring — Watermelon UI: focus-visible ring-[3px] + border-ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.btn:focus-visible,
.icon-btn:focus-visible,
.rail-item:focus-visible,
.island-topic:focus-visible,
.cmd-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px rgba(67, 59, 255, 0.32);
}

/* Scrollbar — Watermelon custom-scrollbar */
.scroll-y { overflow-y: auto; overscroll-behavior: contain; }
.scroll-y::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }
.scroll-y::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
}
.scroll-y::-webkit-scrollbar-thumb:hover { background: var(--border-loud); }
.scroll-y { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* ── 3. Typography ───────────────────────────────────────────────────────── */

.t-display {
  font-size: clamp(1.95rem, 1.4rem + 2.2vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.034em;
  font-weight: 620;
}
.t-h1 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem); line-height: 1.15; letter-spacing: -0.026em; font-weight: 600; }
.t-sm { font-size: 0.875rem; line-height: 1.55; }
.t-xs { font-size: 0.8125rem; line-height: 1.5; }

/* Kokonut UI micro-label: text-[11px] uppercase tracking-[0.14em] */
.t-micro {
  font-size: 0.6875rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.t-subtle { color: var(--fg-subtle); }
.t-num { font-variant-numeric: tabular-nums; }

/* Shared by text-shimmer below (Watermelon UI · text-gradient technique). */
@keyframes text-gradient-shift {
  from { background-position: 100% center; }
  to { background-position: 0% center; }
}

/* Motion Primitives · text-shimmer */
.text-shimmer {
  --shimmer-base: var(--fg-faint);
  --shimmer-peak: var(--fg);
  --spread: 44px;
  display: inline-block;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-repeat: no-repeat, padding-box;
  background-image:
    linear-gradient(90deg, transparent calc(50% - var(--spread)), var(--shimmer-peak), transparent calc(50% + var(--spread))),
    linear-gradient(var(--shimmer-base), var(--shimmer-base));
  background-size: 250% 100%, 100% 100%;
  animation: text-gradient-shift 2s linear infinite;
}

/* Motion Primitives · text-effect (per-word, preset "fade-in-blur").
   Motion drives the reveal; these are the resting/initial styles. */
.text-effect > .te-seg {
  display: inline-block;
  white-space: pre;
  will-change: transform, opacity, filter;
}
.text-effect[data-pending] > .te-seg {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(20px);
}

/* ── 4. Button — Watermelon UI · button ──────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: var(--r-md);
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: -0.008em;
  height: 38px;
  padding: 0 16px;
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease),
    opacity var(--dur) var(--ease);
}
.btn > svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }
.btn:active:not(:disabled) { transform: scale(0.975); }
.btn:disabled,
.btn[aria-disabled='true'] { pointer-events: none; opacity: 0.5; }

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--shadow-xs);
}
.btn--primary:hover { background: var(--primary-hover); }
.btn--primary:active:not(:disabled) { background: var(--primary-active); }

.btn--outline {
  background: var(--surface-1);
  border-color: var(--border-strong);
  color: var(--fg);
  box-shadow: var(--shadow-xs);
}
.btn--outline:hover { background: var(--surface-2); border-color: var(--border-loud); }

.btn--secondary {
  background: var(--surface-2);
  color: var(--fg);
  border-color: var(--border);
}
.btn--secondary:hover { background: var(--surface-3); }

.btn--ghost { color: var(--fg-muted); }
.btn--ghost:hover { background: var(--surface-inset); color: var(--fg); }

.btn--sm { height: 32px; padding: 0 12px; font-size: 0.8125rem; border-radius: var(--r-sm); gap: 6px; }
.btn--sm > svg { width: 14px; height: 14px; }

/* loading state */
.btn[data-loading='true'] { pointer-events: none; color: transparent; }
.btn[data-loading='true']::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--on-primary);
  animation: spin 900ms linear infinite;
}

/* Icon button — Watermelon size="icon" */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  color: var(--fg-muted);
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.icon-btn > svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--surface-inset); color: var(--fg); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn--bordered { border-color: var(--border); background: var(--surface-1); }
.icon-btn--bordered:hover { border-color: var(--border-strong); background: var(--surface-2); }

/* ── 5. Badge — Watermelon UI · badge ────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: fit-content;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  padding: 2px 9px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
}
.badge > svg { width: 12px; height: 12px; }
.badge--accent { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-text); }
.badge--success { background: var(--success-wash); border-color: var(--success-line); color: var(--success); }

/* kbd — Watermelon command-search */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--fg-subtle);
  line-height: 1;
}

/* ── 8. Separator / Skeleton / Spinner — Watermelon UI ───────────────────── */

.separator { height: 1px; width: 100%; background: var(--border); flex-shrink: 0; border: 0; }

.skeleton {
  background: var(--surface-2);
  border-radius: var(--r-sm);
  animation: pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse { 50% { opacity: 0.45; } }

.spinner {
  width: 24px;
  height: 24px;
  color: var(--accent-text);
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Motion Primitives · scroll-progress */
.scroll-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 2px;
  z-index: 120;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

/* Tooltip — Watermelon UI · tooltip */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  translate: -50% 0;
  padding: 5px 9px;
  border-radius: var(--r-sm);
  background: var(--fg);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  scale: 0.94;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), scale var(--dur) var(--ease);
  z-index: 200;
}
.tip:hover::after,
.tip:focus-visible::after { opacity: 1; scale: 1; }

/* ── 9. App shell ────────────────────────────────────────────────────────── */

/* 100dvh tracks the browser chrome as it hides and shows; 100vh is the
   fallback for anything that does not support it. */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.shell {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  /* Landscape on a notched phone puts the cutout at the side. */
  padding: 0 max(var(--gutter), env(safe-area-inset-left)) 0 max(var(--gutter), env(safe-area-inset-right));
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.topbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  color: var(--fg);
  border-radius: var(--r-sm);
}
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.brand span {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.022em;
}

.topbar__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  white-space: nowrap;
  color: var(--fg-subtle);
  font-size: 0.8125rem;
}
.topbar__crumb svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.5; }
.topbar__crumb b {
  font-weight: 500;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Command trigger — Watermelon UI · command-search (collapsed) */
.cmd-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 8px 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--fg-subtle);
  font-size: 0.8125rem;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.cmd-trigger:hover { color: var(--fg); border-color: var(--border-strong); background: var(--surface-2); }
.cmd-trigger svg { width: 15px; height: 15px; opacity: 0.7; }
.cmd-trigger span { min-width: 92px; text-align: left; }

/* Language switcher — Watermelon UI · dropdown-menu / Kokonut profile-dropdown */
.lang-switch { position: relative; flex-shrink: 0; }
.lang-switch__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  font-size: 0.8125rem;
  font-weight: 520;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.lang-switch__btn:hover { border-color: var(--border-strong); background: var(--surface-2); }
.lang-switch__btn > svg:last-child {
  width: 14px; height: 14px; color: var(--fg-faint);
  transition: transform var(--dur) var(--ease);
}
.lang-switch__btn[aria-expanded='true'] > svg:last-child { transform: rotate(180deg); }

.flag {
  width: 18px;
  height: 18px;
  border-radius: var(--r-xs);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--border-strong) inset;
}
.flag--lg { width: 30px; height: 30px; border-radius: 7px; }

.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 232px;
  padding: 5px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-pop);
  z-index: 140;
  transform-origin: top right;
}
.menu__label { padding: 8px 10px 6px; }
.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  color: var(--fg-muted);
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.menu__item:hover { background: var(--surface-2); color: var(--fg); }
.menu__item svg { width: 16px; height: 16px; flex-shrink: 0; }
.menu__item[aria-current='true'] { color: var(--fg); font-weight: 550; }
.menu__item[aria-current='true'] .menu__check { opacity: 1; }
.menu__check { margin-left: auto; opacity: 0; color: var(--accent-text); }
.menu { max-height: min(70vh, 560px); overflow-y: auto; }

/* ── 10. Home ────────────────────────────────────────────────────────────── */

.home {
  position: relative;
  padding: clamp(28px, 4vw, 48px) 0 72px;
}

.home__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.home__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 48px;
  max-width: 1040px;
}
.home__intro { min-width: 0; max-width: 650px; align-self: end; }
.home__eyebrow { margin-bottom: 16px; color: var(--fox-accent); }
.fox-art { display: block; max-width: 100%; height: auto; object-fit: contain; pointer-events: none; user-select: none; }
.home__companion { grid-column: 2; grid-row: 1 / 3; width: 280px; margin: 0; }
.home__companion .fox-art { width: 100%; aspect-ratio: 1; }
.home__title {
  margin-bottom: 18px;
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 560;
  overflow-wrap: anywhere;
}
.home__title > span { display: block; color: var(--accent-text); }
.home__lede {
  grid-column: 1;
  align-self: start;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--fg-muted);
  max-width: 48ch;
}
.home__return { min-width: 0; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: center; padding: 18px 0; border-block: 1px solid var(--border); }
.home__return > p { color: var(--fg-muted); }

/* Keep the saved lesson a compact, easy-to-scan row. */
.resume {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-xs);
  text-align: left;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.resume:hover { border-color: var(--accent-line); background: var(--surface-2); }
.resume__body { min-width: 0; flex: 1; }
.resume__title {
  display: block;
  font-size: 1.125rem;
  font-weight: 580;
  letter-spacing: -0.014em;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.resume__meta {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resume__go {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: var(--on-primary);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.resume__go svg { width: 16px; height: 16px; }
.resume:hover .resume__go { background: var(--accent-wash); color: var(--accent-text); transform: translateX(2px); }

/* 21st.dev gallery hierarchy, using the existing course options and controls. */
.picker { min-width: 0; }
.picker__toolbar {
  position: sticky;
  top: calc(var(--topbar-h) + env(safe-area-inset-top));
  z-index: 30;
  padding: 18px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.picker__head h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.025em; }
.picker .course-search { display: block; position: relative; width: 360px; max-width: 100%; margin: 0; }
.picker .course-search input { min-height: 48px; padding-left: 42px; padding-right: 12px; }
.course-search > svg { position: absolute; top: 15px; left: 14px; width: 18px; height: 18px; color: var(--fg-muted); pointer-events: none; }
.picker__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.course-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-inset); }
.course-filter {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 14px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--fg-muted); font-size: 0.8125rem; font-weight: 500;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.course-filter:hover { background: var(--surface-2); color: var(--fg); }
.course-filter[aria-pressed='true'] { background: var(--surface-1); border-color: var(--border-strong); color: var(--fg); box-shadow: var(--shadow-xs); }
.course-filter__count { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--fg-muted); }
.course-filter[aria-pressed='true'] .course-filter__count { color: var(--accent-text); }
.picker__count { flex-shrink: 0; color: var(--fg-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.lang-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  scroll-margin-top: calc(var(--topbar-h) + 170px);
}
@media (min-width: 640px) { .lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .lang-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lang-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  min-height: 114px;
  padding: 20px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  overflow: hidden;
  text-align: left;
  scroll-margin-block: 220px 24px;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lang-card__icon { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.lang-card__icon > .flag { width: 28px; height: 28px; }
.lang-card:hover { background: var(--surface-2); border-color: var(--border-loud); box-shadow: var(--shadow-sm); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lang-card:hover { transform: translateY(-2px); }
  .lang-card:active { transform: translateY(0); }
}
.lang-card[data-started='true'] { border-color: var(--accent-line); }
.lang-card:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; background: var(--surface-2); }
.lang-card__body { min-width: 0; flex: 1; }
.lang-card__heading { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lang-card__native { display: block; margin-top: 5px; font-size: 1rem; line-height: 1.75; color: var(--fg-muted); letter-spacing: normal; overflow-wrap: anywhere; }
.lang-card__status { font-size: 0.75rem; line-height: 1.5; color: var(--fg-muted); }
.lang-card__format { display: block; font-size: 0.75rem; line-height: 1.6; color: var(--fg-muted); }
.lang-card__progress { display: block; margin-top: 4px; color: var(--accent-text); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.course-status { margin: 10px 0 16px; color: var(--fg-muted); font-size: 0.875rem; line-height: 1.65; }
.prose code, .prose td, .prose th, bdi { unicode-bidi: isolate; }
.prose code:dir(rtl), .compare__text:dir(rtl), .answer-field input:dir(rtl), .turn__bubble:dir(rtl) { font-family: system-ui, sans-serif; letter-spacing: normal; line-height: 1.9; }
.lang-card__name {
  display: block;
  font-size: 1rem;
  font-weight: 580;
  letter-spacing: -0.016em;
  line-height: 1.4;
}
.lang-card__go {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--fg-subtle);
  transition: transform var(--dur-slow) var(--ease-out), color var(--dur) var(--ease);
}
.lang-card:hover .lang-card__go { color: var(--accent-text); transform: translateX(3px); }

/* Progress follows the bottom edge of its language option. */
.lang-card__meter {
  position: absolute;
  inset: auto auto 0 0;
  height: 2px;
  background: var(--accent-text);
  transition: width var(--dur-slow) var(--ease);
}

.catalogue-empty { padding: 48px 16px; text-align: center; border-bottom: 1px solid var(--border); }
.catalogue-empty__fox { width: 96px; margin: 0 auto 16px; }
.catalogue-empty h3 { font-size: 1rem; font-weight: 550; margin-bottom: 8px; }
.catalogue-empty p { color: var(--fg-muted); font-size: 0.875rem; line-height: 1.6; margin-bottom: 18px; }
.catalogue-note { max-width: 80ch; margin-top: 24px; font-size: 0.8125rem; line-height: 1.7; color: var(--fg-muted); }

/* Watermelon UI · progress */
.meter {
  position: relative;
  height: 3px;
  flex: 1;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}
.meter i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width var(--dur-slow) var(--ease);
}

/* ── 11. Reader ──────────────────────────────────────────────────────────── */

.reader {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  flex: 1;
}

/* No rail to show (loading, error, or a course that isn't written yet):
   one column, so the message is not squeezed into the rail's width. */
.reader--solo { grid-template-columns: minmax(0, 1fr); }

/* Lesson rail — Watermelon UI · macos-sidebar */
.rail {
  position: sticky;
  top: calc(var(--topbar-h) + env(safe-area-inset-top));
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  padding: 20px 14px 10px 20px;
  background: var(--surface-inset);
}
.rail__back { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; min-height: 40px; margin-bottom: 20px; padding: 0 8px; border-radius: var(--r-sm); color: var(--fg-muted); font-size: 0.8125rem; }
.rail__back > svg { width: 14px; height: 14px; }
.rail__back:hover { background: var(--surface-2); color: var(--fg); }
.rail__head { padding: 0 8px 14px; }
.rail__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  font-weight: 570;
  letter-spacing: -0.016em;
}
.rail__stats {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
}
.rail__list { flex: 1; margin: 0 -6px; padding: 4px 6px 24px; }

.rail-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--fg-muted);
  font-size: 0.875rem;
  line-height: 1.45;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rail-item:hover { background: var(--surface-inset); color: var(--fg-muted); }
.rail-item__n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-subtle);
}
.rail-item__t {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.rail-item[data-done='true'] .rail-item__n { color: var(--success); }
.rail-item[aria-current='true'] {
  color: var(--fg);
  font-weight: 550;
  background: var(--surface-2);
}
.rail-item[aria-current='true'] .rail-item__n { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.rail-item[aria-current='true']::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  translate: 0 -50%;
  width: 2px;
  height: 17px;
  border-radius: var(--r-full);
  background: var(--accent);
}

/* Main column */
.reader__main {
  min-width: 0;
  padding: 40px clamp(20px, 4vw, 64px) 120px;
}

.lesson-head { max-width: var(--measure); margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--border); }
.lesson-head--intro { display: flow-root; }
.lesson-head__fox { float: right; width: 120px; margin: 0 0 12px 20px; }
.lesson-head__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.lesson-head__title {
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.375rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 620;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.lesson-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  color: var(--fg-subtle);
  font-size: 0.8125rem;
}
.lesson-head__meta span { display: inline-flex; align-items: center; gap: 6px; }
.lesson-head__meta svg { width: 14px; height: 14px; opacity: 0.7; }

/* ── 12. Prose ───────────────────────────────────────────────────────────── */

/* Text holds the reading measure; a wide reference table is allowed to use
   the column it is actually in, so learners are not scrubbing sideways
   through four columns of vocabulary. */
.prose { font-size: 1.0625rem; line-height: 1.75; }
.prose > * { max-width: var(--measure); }
.prose > .table-wrap { max-width: min(100%, 62rem); }
.prose > * + * { margin-top: 1.15em; }

.prose h2 {
  font-size: 1.5rem;
  line-height: 1.22;
  letter-spacing: -0.022em;
  font-weight: 600;
  margin-top: 2.6em;
  padding-top: 1.5em;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--topbar-h) + env(safe-area-inset-top) + 24px);
}
.prose h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.018em;
  font-weight: 600;
  margin-top: 2.1em;
  scroll-margin-top: calc(var(--topbar-h) + env(safe-area-inset-top) + 24px);
}
.prose h4 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 1.9em;
  color: var(--fg-muted);
  scroll-margin-top: calc(var(--topbar-h) + env(safe-area-inset-top) + 24px);
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.prose p { color: var(--fg-muted); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose em { font-style: italic; }

.prose ul, .prose ol { padding-left: 1.3em; color: var(--fg-muted); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--fg-faint); }
.prose li + li { margin-top: 0.42em; }
.prose li > ul, .prose li > ol { margin-top: 0.42em; }

.prose blockquote {
  border-left: 2px solid var(--border-strong);
  padding: 2px 0 2px 18px;
  color: var(--fg-subtle);
}
.prose blockquote p { color: inherit; }

.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  border-radius: var(--r-xs);
  background: var(--accent-wash);
  color: var(--accent-text);
  white-space: nowrap;
}
.prose pre {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  overflow-x: auto;
}
.prose pre code {
  background: none;
  color: var(--fg-muted);
  padding: 0;
  white-space: pre;
  font-size: 0.8125rem;
}

.prose hr { height: 1px; border: 0; background: var(--border); margin: 2.4em 0; }

/* Heading anchor */
.prose .anchor {
  opacity: 0;
  margin-left: 0.4em;
  font-size: 0.72em;
  color: var(--fg-faint);
  vertical-align: middle;
  transition: opacity var(--dur) var(--ease);
}
.prose h2:hover .anchor,
.prose h3:hover .anchor,
.prose .anchor:focus-visible { opacity: 1; }

/* Tables — Watermelon UI · table. Allowed to exceed the measure. */
.table-wrap {
  position: relative;
  width: 100%;
  margin-top: 1.5em;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  overflow: hidden;
}
.table-scroll { overflow-x: auto; }

/* Watermelon UI · scroll-fade — a table wider than the column says so. */
.table-wrap::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 56px;
  pointer-events: none;
  opacity: 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: linear-gradient(90deg, transparent, var(--surface-1) 82%);
  transition: opacity var(--dur-slow) var(--ease);
}
.table-wrap[data-overflow='true']:not([data-end='true'])::after { opacity: 1; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.prose thead th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-weight: 550;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  white-space: nowrap;
}
.prose tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
  vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.prose tbody tr:hover { background: var(--surface-inset); }
.prose td strong { color: var(--fg); }
.prose td code { white-space: normal; }

/* Thinking point — Watermelon UI · alert (info) */
.prose .thinking {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 6px 12px;
  align-items: start;
  padding: 15px 17px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-wash);
  margin-top: 1.6em;
  font-size: 0.9375rem;
}
.prose .thinking > svg { width: 18px; height: 18px; color: var(--accent-text); transform: translateY(2px); }
.prose .thinking__title {
  grid-column: 2;
  font-weight: 570;
  letter-spacing: -0.012em;
  color: var(--accent-text);
}
.prose .thinking__body { grid-column: 2; color: var(--fg-muted); line-height: 1.62; }
.prose .thinking__body > * + * { margin-top: 0.7em; }
.prose .thinking__body ul, .prose .thinking__body ol { padding-left: 1.2em; }

/* Practice answers — Motion Primitives · disclosure (collapsed by default,
   so learners attempt the exercise before the answer is on screen) */
.prose .answers {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  margin-top: 1.6em;
  overflow: hidden;
}
.prose .answers > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  cursor: pointer;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--fg-muted);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.prose .answers > summary::-webkit-details-marker { display: none; }
.prose .answers > summary:hover { background: var(--surface-2); color: var(--fg); }
.prose .answers > summary svg { width: 15px; height: 15px; flex-shrink: 0; }
.prose .answers > summary .chev {
  margin-left: auto;
  color: var(--fg-faint);
  transition: transform var(--dur-slow) var(--ease);
}
.prose .answers[open] > summary { border-bottom: 1px solid var(--border); color: var(--fg); }
.prose .answers[open] > summary .chev { transform: rotate(180deg); }
.prose .answers__body { padding: 15px; font-size: 0.9375rem; }
.prose .answers__body > * + * { margin-top: 0.75em; }
.prose .answers__body ol, .prose .answers__body ul { padding-left: 1.25em; color: var(--fg-muted); }
.prose .answers__body em { color: var(--fg); font-style: normal; font-weight: 550; }
.prose .answers > summary .answers__hide { display: none; }
.prose .answers[open] > summary .answers__show { display: none; }
.prose .answers[open] > summary .answers__hide { display: inline; }

/* ── 13. Pager — Watermelon UI · step-pager ──────────────────────────────── */

.pager {
  max-width: var(--measure);
  margin-top: 72px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.pager__row { display: flex; align-items: center; gap: 14px; }
.pager__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--fg-muted);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.pager__btn svg { width: 19px; height: 19px; }
.pager__btn:hover:not(:disabled) { background: var(--surface-2); color: var(--fg); border-color: var(--border-strong); }
.pager__btn:active:not(:disabled) { transform: scale(0.94); }
.pager__btn:disabled { opacity: 0.32; cursor: not-allowed; }

.pager__mid { flex: 1; min-width: 0; text-align: center; }
.pager__label {
  font-size: 0.75rem;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.pager__next {
  display: block;
  width: 100%;
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: -0.015em;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pager__mark {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

/* ── 14. Scroll Island — Watermelon UI · scroll-island ───────────────────── */

.island-scrim {
  position: fixed;
  inset: 0;
  z-index: 148;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.island {
  position: fixed;
  z-index: 150;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 268px;
  padding: 0 6px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-lg);
  will-change: width, height, border-radius;
}
.theme-light .island { background: #ffffff; }
.island[data-open='true'] { width: 400px; border-radius: var(--r-xl); }

.island__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 6px 0 8px;
  width: 100%;
  user-select: none;
}
.island__ring {
  position: relative;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 1%), var(--surface-3) 0);
}
.island__ring::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--surface-1);
}
.theme-light .island__ring::after { background: #ffffff; }
.island__label {
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: -0.012em;
  white-space: nowrap;
}
.island__chev {
  width: 16px; height: 16px;
  color: var(--fg-faint);
  flex-shrink: 0;
  transition: transform var(--dur-slow) var(--ease);
}
.island[data-open='true'] .island__chev { transform: rotate(180deg); }
.island__bar:hover .island__chev { color: var(--fg-muted); }
.island__pct {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  flex-shrink: 0;
}

.island__panel { padding: 0 2px 10px; max-height: min(52vh, 380px); }
.island__panel .separator { margin: 0 6px 8px; }
.island-topic {
  display: block;
  width: 100%;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  text-align: left;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--fg-subtle);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.island-topic:hover { background: var(--surface-2); color: var(--fg); }
.island-topic[data-depth='3'] { padding-left: 26px; font-size: 0.8125rem; }
.island-topic[aria-current='true'] { color: var(--accent-text); font-weight: 550; }
.island__empty { padding: 14px 12px; font-size: 0.8125rem; color: var(--fg-faint); }

/* Below the width where the reading column clears it, the island docks to the
   bottom edge instead of floating over the text. */
@media (max-width: 1080px) {
  .island {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
  }
  .island[data-open='true'] { width: auto; }
  .island__panel { max-height: 46vh; }
}

/* ── 15. Command palette — Watermelon UI · command-search ────────────────── */

.cmd-scrim {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.cmd {
  position: fixed;
  z-index: 200;
  top: 14vh;
  left: 50%;
  translate: -50% 0;
  width: min(560px, calc(100vw - 32px));
  max-height: min(64vh, 520px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-pop);
}
.theme-light .cmd { background: #ffffff; }

.cmd__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cmd__head > svg { width: 18px; height: 18px; color: var(--fg-faint); flex-shrink: 0; }
.cmd__input {
  flex: 1;
  min-width: 0;
  /* Never below 16px: iOS zooms the page when a smaller input takes focus. */
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  outline: none;
}
.cmd__input::placeholder { color: var(--fg-faint); font-weight: 400; }

.cmd__body { flex: 1; padding: 6px; }
.cmd__group + .cmd__group { margin-top: 8px; }
.cmd__grouplabel { padding: 8px 10px 5px; }

.cmd-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--fg-muted);
  font-size: 0.875rem;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cmd-item > svg:first-child { width: 16px; height: 16px; flex-shrink: 0; color: var(--fg-faint); }
.cmd-item__t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.cmd-item__n {
  font-size: 0.75rem;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.cmd-item[data-active='true'] {
  background: var(--surface-2);
  color: var(--fg);
}
.cmd-item[data-active='true'] > svg:first-child { color: var(--accent-text); }
.cmd-item mark { background: none; color: var(--accent-text); font-weight: 620; }

.cmd__empty { padding: 44px 20px; text-align: center; color: var(--fg-subtle); font-size: 0.875rem; }
.cmd__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--fg-faint);
  flex-shrink: 0;
}
.cmd__foot span { display: inline-flex; align-items: center; gap: 6px; }

/* ── 16. Sheet (mobile lesson list) — Watermelon UI · sheet ──────────────── */

.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 160;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sheet {
  position: fixed;
  z-index: 170;
  inset: auto 0 0;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-strong);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--surface-1);
  box-shadow: var(--shadow-lg);
  padding-bottom: env(safe-area-inset-bottom);
}
.theme-light .sheet { background: #ffffff; }
.sheet__grip {
  width: 34px; height: 4px;
  border-radius: var(--r-full);
  background: var(--border-loud);
  margin: 9px auto 2px;
  flex-shrink: 0;
}
.sheet__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sheet__head .rail__title { flex: 1; min-width: 0; }
.sheet__list { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }

/* ── 17. Feedback states ─────────────────────────────────────────────────── */

.state {
  max-width: 460px;
  padding: 88px 0 120px;
}
.state__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--fg-subtle);
  margin-bottom: 20px;
}
.state__icon svg { width: 19px; height: 19px; }
.state__title { margin-bottom: 8px; }
.state__body { color: var(--fg-muted); line-height: 1.65; }
.state__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.state__detail {
  margin-top: 18px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg-subtle);
  word-break: break-word;
}

/* Loading — Watermelon skeleton + MP text-shimmer */
.loading { padding: 40px clamp(20px, 4vw, 64px) 120px; }
.loading > * { max-width: var(--measure); }
.loading__label { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.loading__lines > * + * { margin-top: 14px; }
.sk-line { height: 13px; border-radius: var(--r-xs); }
.sk-title { height: 30px; width: 62%; border-radius: var(--r-sm); margin-bottom: 30px; }
.sk-block { height: 128px; border-radius: var(--r-md); }

/* ── 17b. Practice ────────────────────────────────────────────────────────
   A focused production surface: one prompt, one attempt, then the course's
   answer. The answer is never on screen before the attempt — the same rule the
   in-lesson answer key follows, and the reason Language Transfer asks you to
   pause before it speaks. */

.practice {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px var(--gutter) 120px;
  min-height: calc(100vh - var(--topbar-h));
  min-height: calc(100dvh - var(--topbar-h));
  display: flex;
  flex-direction: column;
}

.practice__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  background: var(--bg);
}
.practice__head .t-micro { min-width: 0; }
.practice__head .practice__count { margin-left: auto; white-space: nowrap; }

/* Watermelon UI · labeled-progress-indicator */
.practice__meter {
  height: 3px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  overflow: hidden;
  margin-bottom: 24px;
}
.practice__meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width var(--dur-slow) var(--ease);
}

.practice__body { padding: 28px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface-1); box-shadow: var(--shadow-sm); }

.practice__instruction {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--fg-subtle);
  font-size: 0.8125rem;
}
.practice__instruction b { font-weight: 500; color: var(--fg-muted); }

.practice__prompt {
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: -0.024em;
  font-weight: 550;
  text-wrap: balance;
}
.practice__prompt-row { display: flex; gap: 20px; align-items: center; }
.practice__prompt-row .practice__prompt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.practice__fox { width: 80px; flex: 0 0 80px; }
.practice__hint {
  margin-top: 10px;
  color: var(--fg-subtle);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Watermelon UI · input, with the voice control docked inside it */
.answer-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding: 4px 4px 4px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.answer-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(67, 59, 255, 0.24);
}
.answer-field[data-state='correct'] { border-color: var(--success-line); }
.answer-field[data-state='close'] { border-color: var(--border-loud); }
.answer-field input {
  flex: 1;
  min-width: 0;
  height: 42px;
  font-size: 1.0625rem;
  outline: none;
}
.answer-field input::placeholder { color: var(--fg-subtle); }
.answer-field input:disabled { color: var(--fg-muted); }

.practice__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.practice__actions .btn--ghost { margin-left: auto; }

/* Verdict — Watermelon UI · alert. Three states, and only one of them is a
   judgement: "close" and "different" show both lines and say nothing more,
   because the course lists one answer and a learner may have produced another
   good one. */
.verdict { margin-top: 24px; }
.verdict__line {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: -0.012em;
}
.verdict__line svg { width: 17px; height: 17px; flex-shrink: 0; }
.verdict[data-state='correct'] .verdict__line { color: var(--success); }
.verdict[data-state='close'] .verdict__line,
.verdict[data-state='different'] .verdict__line { color: var(--fg-muted); }
.verdict__note {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-subtle);
}

.compare {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  overflow: hidden;
}
.compare__row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
}
.compare__row + .compare__row { border-top: 1px solid var(--border); }
.compare__who { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.compare__text { font-size: 1.0625rem; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.compare__row--answer .compare__text { font-weight: 500; }
.compare__text del { text-decoration: none; color: var(--fg-subtle); }
.compare__text mark {
  background: var(--accent-wash);
  color: var(--accent-text);
  border-radius: var(--r-xs);
  padding: 0 3px;
}
.compare__roman {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--fg-subtle);
  margin-top: 3px;
}

/* Hear it — Watermelon UI · audio-player transport control */
.hear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--fg-muted);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.hear svg { width: 15px; height: 15px; }
.hear:hover { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-text); }
.hear:active { transform: scale(0.94); }
.hear[data-speaking='true'] { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-text); }
.hear:disabled { opacity: 0.35; cursor: not-allowed; }

/* Voice input — Kokonut UI · ai-voice */
.mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  color: var(--fg-subtle);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mic svg { width: 18px; height: 18px; }
.mic:hover { background: var(--surface-inset); color: var(--fg); }
.mic[data-listening='true'] { background: var(--accent-wash); color: var(--accent-text); }
.mic:disabled { opacity: 0.3; cursor: not-allowed; }

.listening {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 13px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-wash);
  font-size: 0.8125rem;
  color: var(--accent-text);
}
.wave { display: flex; align-items: center; gap: 2px; height: 16px; flex-shrink: 0; }
.wave i {
  width: 2px;
  height: 3px;
  border-radius: var(--r-full);
  background: currentColor;
  opacity: 0.7;
  animation: wave 1.1s ease-in-out infinite;
}
@keyframes wave {
  0%, 100% { height: 3px; }
  50% { height: 15px; }
}
.listening__text { flex: 1; min-width: 0; color: var(--fg-muted); }

/* Session summary. No score, no streak: Language Transfer is explicitly
   against conditioning, and a tally would be exactly that. */
.summary__welcome { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.summary__welcome > div { min-width: 0; }
.summary__welcome h2 { overflow-wrap: anywhere; }
.summary__eyebrow { color: var(--fox-accent); margin-bottom: 10px; }
.summary__encouragement { max-width: 28ch; margin-top: 12px; color: var(--fg-muted); font-size: 0.875rem; line-height: 1.6; }
.summary__fox { width: 144px; flex: 0 0 144px; }
.summary__stats {
  display: flex;
  gap: 26px;
  margin: 22px 0 26px;
}
.summary__stat b {
  display: block;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.summary__list { margin-top: 26px; }
.summary__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}
.summary__item p { font-size: 0.9375rem; }
.summary__item small { grid-column: 1; color: var(--fg-subtle); font-size: 0.8125rem; }

/* Entry point at the end of a lesson */
.practice-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: var(--measure);
  margin-top: 40px;
  padding: 15px 16px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background: var(--accent-wash);
  text-align: left;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.practice-cta:hover { border-color: var(--accent); }
.practice-cta__fox { width: 80px; flex: 0 0 80px; }
.practice-cta--fox { background: var(--surface-1); border-color: var(--border-strong); }
.practice-cta > svg:first-child { width: 20px; height: 20px; color: var(--accent-text); flex-shrink: 0; }
.practice-cta__body { flex: 1; min-width: 0; }
.practice-cta__title { display: block; font-size: 0.9375rem; font-weight: 550; letter-spacing: -0.014em; }
.practice-cta__meta { display: block; font-size: 0.8125rem; color: var(--fg-muted); }
.practice-cta__go { flex-shrink: 0; width: 16px; height: 16px; color: var(--accent-text); transition: transform var(--dur-slow) var(--ease-out); }
.practice-cta:hover .practice-cta__go { transform: translateX(3px); }

@media (max-width: 860px) {
  .practice { padding: 20px 16px calc(28px + env(safe-area-inset-bottom)); min-height: 0; }
  .practice__meter { margin-bottom: 26px; }
  .compare__row { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; }
  .summary__stats { gap: 20px; }
}

/* ── 17c. Conversation ────────────────────────────────────────────────────
   Speak-style voice-first practice, held inside the Thinking Method: the tutor
   converses but never teaches ahead of the course (see js/coach.js). Composer
   from Kokonut UI · ai-prompt; voice states from Watermelon UI ·
   voice-chat-disclosure; the round transport control from · contextual-ai-bar. */

.talk {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top));
  padding: 0 var(--gutter);
}

.talk__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 12px;
  flex-shrink: 0;
}
.talk__head .badge { margin-left: auto; }
.talk__welcome { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.talk__welcome .fox-art { width: 96px; flex: 0 0 96px; }
.talk__welcome > div { min-width: 0; }
.talk__welcome h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; }
.talk__welcome p { margin-top: 6px; font-size: 0.875rem; line-height: 1.6; color: var(--fg-muted); }

.talk__scroll {
  flex: 1;
  min-height: 0;
  padding: 6px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Once there are turns, sit them on the composer rather than stranding three
   bubbles at the top of a tall screen. `margin-top: auto` on the first child
   rather than `justify-content: flex-end`, which clips the top of an
   overflowing scroller. */
.talk__scroll--live > :first-child { margin-top: auto; }

/* A turn. The tutor sits left with the mascot; the learner right. */
.turn { display: flex; gap: 10px; align-items: flex-end; max-width: 88%; }
.turn--you { align-self: flex-end; flex-direction: row-reverse; }
.turn__who {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  display: grid;
  place-items: center;
}
.turn__who img { width: 22px; height: 22px; }

.turn__bubble {
  position: relative;
  padding: 11px 14px;
  border-radius: var(--r-lg);
  font-size: 1.0625rem;
  line-height: 1.5;
  border: 1px solid var(--border);
  background: var(--surface-1);
  overflow-wrap: anywhere;
}
.turn--you .turn__bubble {
  background: var(--accent-wash);
  border-color: var(--accent-line);
}
.turn__gloss {
  display: block;
  margin-top: 5px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--fg-subtle);
}
.turn__replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 7px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg-subtle);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.turn__replay svg { width: 13px; height: 13px; }
.turn__replay:hover { color: var(--accent-text); border-color: var(--accent-line); }

/* Kokonut UI · ai-loading — the tutor is composing */
.thinking-dots { display: inline-flex; gap: 4px; align-items: center; height: 20px; }
.thinking-dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--fg-faint);
  animation: dot 1.2s ease-in-out infinite;
}
.thinking-dots i:nth-child(2) { animation-delay: 0.15s; }
.thinking-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Composer — Kokonut UI · ai-prompt */
.composer {
  flex-shrink: 0;
  padding: 8px;
  margin-bottom: calc(14px + env(safe-area-inset-bottom));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: var(--surface-1);
  transition: border-color var(--dur) var(--ease);
}
.composer:focus-within { border-color: var(--accent); }
.composer__row { display: flex; align-items: center; gap: 8px; }
.composer input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 8px;
  /* 16px minimum, or iOS zooms the page on focus. */
  font-size: 1.0625rem;
  outline: none;
}
.composer input::placeholder { color: var(--fg-faint); }
.composer__send {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--on-primary);
  transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur) var(--ease);
}
.composer__send svg { width: 18px; height: 18px; }
.composer__send:hover { background: var(--primary-hover); }
.composer__send:active { transform: scale(0.94); }
.composer__send:disabled { opacity: 0.35; cursor: not-allowed; }

/* The primary voice control — Watermelon UI · voice-chat-disclosure */
.mic-big {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--fg-muted);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.mic-big svg { width: 19px; height: 19px; }
.mic-big:hover { color: var(--fg); border-color: var(--border-loud); }
.mic-big:active { transform: scale(0.94); }
.mic-big[data-listening='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fbfbfe;
}
.mic-big:disabled { opacity: 0.3; cursor: not-allowed; }

.composer__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 2px;
  font-size: 0.75rem;
  color: var(--fg-faint);
}
.composer__hint .wave { color: var(--accent-text); }

/* Scenario picker */
.scenarios { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.scenario {
  min-height: 44px;
  padding: 9px 15px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.scenario:hover { border-color: var(--accent-line); background: var(--surface-2); }
.scenario[aria-pressed='true'] {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* ── 17d. Tutor settings ─────────────────────────────────────────────────── */

.setup { width: 100%; max-width: 560px; margin: 0 auto; padding: 28px var(--gutter) 96px; }
.setup__section { margin-top: 30px; }
.setup__section > .t-micro { margin-bottom: 12px; display: block; }

.field { margin-top: 16px; }
.field > label { display: block; font-size: 0.875rem; font-weight: 550; margin-bottom: 6px; }
.field__hint { font-size: 0.8125rem; color: var(--fg-subtle); margin-top: 6px; line-height: 1.5; }
.field input,
.field select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font-size: 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-1);
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field select { appearance: none; cursor: pointer; padding-right: 34px; }
.field__select { position: relative; }
.field__select > svg {
  position: absolute;
  right: 12px;
  top: 50%;
  translate: 0 -50%;
  width: 15px; height: 15px;
  pointer-events: none;
  color: var(--fg-faint);
}
.field input:focus,
.field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(67, 59, 255, 0.22);
}
.field input[type='password'] { font-family: var(--font-mono); letter-spacing: 0.06em; }

.presets { display: flex; flex-wrap: wrap; gap: 8px; }

.notice {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 4px 12px;
  align-items: start;
  padding: 13px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-1);
  font-size: 0.875rem;
  line-height: 1.55;
  margin-top: 18px;
}
.notice > svg { width: 18px; height: 18px; transform: translateY(2px); color: var(--fg-subtle); }
.notice b { grid-column: 2; font-weight: 550; }
.notice p { grid-column: 2; color: var(--fg-muted); }
.notice--good { background: var(--success-wash); border-color: var(--success-line); }
.notice--good > svg { color: var(--success); }
.notice--bad { background: var(--danger-wash); border-color: var(--danger-line); }
.notice--bad > svg { color: var(--danger); }
.notice--accent { background: var(--accent-wash); border-color: var(--accent-line); }
.notice--accent > svg { color: var(--accent-text); }

/* Second opinion inside practice */
.second {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 4px 10px;
  align-items: start;
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  border: 1px dashed var(--border-strong);
  font-size: 0.875rem;
  line-height: 1.5;
}
.second > svg { width: 16px; height: 16px; transform: translateY(2px); color: var(--fg-subtle); }
.second b { grid-column: 2; font-weight: 550; }
.second p { grid-column: 2; color: var(--fg-muted); }
.second--ok { border-color: var(--success-line); background: var(--success-wash); }
.second--ok > svg, .second--ok b { color: var(--success); }
.second__from { grid-column: 2; font-size: 0.75rem; color: var(--fg-faint); margin-top: 3px; }

@media (max-width: 860px) {
  .talk { padding: 0 16px; }
  .turn { max-width: 92%; }
  .turn__bubble { font-size: 1rem; }
  .setup { padding: 20px 16px 80px; }
}

/* ── 18. Footer ──────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--border);
  padding: 26px 0;
  margin-top: auto;
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--fg-subtle);
}
.footer__hint { display: inline-flex; align-items: center; gap: 8px; }

/* Back to top */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 90;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--fg-muted);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease),
    visibility var(--dur-slow), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.to-top[data-visible='true'] { opacity: 1; visibility: visible; translate: 0 0; }
.to-top:hover { background: var(--surface-2); color: var(--fg); }
.to-top svg { width: 17px; height: 17px; }

/* Utilities */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Breakpoint utilities never assert a display value of their own — they only
   remove an element at the wrong size, so each keeps its own layout mode. */
@media (min-width: 861px) { .only-mobile { display: none !important; } }
@media (max-width: 860px) { .only-desktop { display: none !important; } }

/* Touch targets. On a pointer device these controls are sized for precision;
   on a touch screen they need ~44px of hit area, so the *box* grows while the
   painted control stays the same size. */
@media (hover: none) and (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .cmd-trigger,
  .lang-switch__btn { height: 44px; min-width: 44px; justify-content: center; }
  .hear { width: 44px; height: 44px; }
  .hear svg { width: 17px; height: 17px; }
  .mic { width: 46px; height: 46px; }
  .brand { padding: 9px 0; }
  .btn { height: 44px; }
  .btn--sm { height: 44px; padding: 0 16px; }
  .resume__go { width: 40px; height: 40px; }
  .island__bar { height: 56px; }
  .island-topic { padding-top: 11px; padding-bottom: 11px; }
  .menu__item { padding: 12px 10px; }
  .rail-item { padding-top: 11px; padding-bottom: 11px; }
  .cmd-item { padding-top: 11px; padding-bottom: 11px; }
  .lang-card { padding-top: 14px; padding-bottom: 14px; }
  .pager__btn { width: 48px; height: 48px; }
  /* A hover-only affordance is a 11px tap target on touch — hide it. */
  .prose .anchor { display: none; }
}

/* ── 19. Responsive ──────────────────────────────────────────────────────── */

/* Tablet — rail collapses to a narrower index, gutters tighten */
@media (max-width: 1080px) {
  :root { --rail-w: 232px; --gutter: 20px; }
  .rail { padding-left: 14px; }
  .cmd-trigger span { display: none; }
  .cmd-trigger { padding: 0 8px; }
}

/* Mobile — rail becomes a sheet; island and pager move into thumb reach */
@media (max-width: 860px) {
  :root { --topbar-h: 54px; --gutter: 16px; }

  .reader { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .reader__main { padding: 26px 16px 132px; }

  .home { padding: 24px 0 56px; }
  .home__grid { gap: 24px; }
  .home__hero { grid-template-columns: minmax(0, 1fr) 144px; gap: 12px 20px; }
  .home__companion { width: 144px; grid-row: 1; align-self: center; }
  .home__title { margin-bottom: 0; }
  .home__lede { grid-column: 1 / -1; }
  .home__return { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 0; }
  .home__eyebrow { margin-bottom: 10px; }
  .home__lede { font-size: 0.9375rem; line-height: 1.55; }
  .lang-grid { gap: 12px; }
  .picker__toolbar { position: static; padding-top: 0; }
  .brand--compact span { display: none; }
  .topbar__actions { gap: 4px; }
  .topbar__actions > .icon-btn, .lang-switch__btn, .cmd-trigger { width: 44px; min-width: 44px; height: 44px; }
  .lang-switch__btn { justify-content: center; }
  .lang-switch__btn > svg:last-child { display: none; }

  /* Anchor to the full-width topbar, so the menu stays inside either screen
     edge even when its trigger is near the middle. Leave room for Contents. */
  .lang-switch { position: static; }
  .lang-switch > .menu {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    min-width: 0;
    max-height: min(560px, calc(100vh - var(--topbar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 96px));
    max-height: min(560px, calc(100dvh - var(--topbar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 96px));
    overscroll-behavior: contain;
  }
  .menu__item { min-height: 44px; }

  .lesson-head { margin-bottom: 26px; }
  .lesson-head__fox { width: 88px; margin-left: 12px; }
  .practice__prompt-row { gap: 12px; }
  .practice__fox { width: 64px; flex-basis: 64px; }
  .practice-cta__fox { width: 60px; flex-basis: 60px; }
  .summary__fox { width: 96px; flex-basis: 96px; }
  .talk__welcome { gap: 12px; }
  .talk__welcome .fox-art { width: 80px; flex-basis: 80px; }
  .prose { font-size: 1rem; }
  .prose h2 { margin-top: 2.1em; padding-top: 1.2em; }

  .cmd { top: 0; left: 0; translate: none; width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; }
  .cmd__body { flex: 1; }
  .cmd__foot { display: none; }

  .pager { margin-top: 52px; }
  .to-top { display: none; }

  .table-wrap { width: 100%; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 639px) {
  .picker__head { align-items: stretch; flex-direction: column; gap: 16px; }
  .picker .course-search { width: 100%; }
  .picker__controls { align-items: flex-start; flex-direction: column; gap: 12px; }
  .course-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 4px; }
  .course-filters .course-filter { min-height: 44px; justify-content: space-between; padding-inline: 12px; gap: 6px; }
  .lang-card { min-height: 100px; padding: 16px; scroll-margin-block: 80px 20px; }
  .lang-card__heading { flex-wrap: wrap; }
  .lang-card__status { flex-shrink: 0; }
  .practice__body { padding: 20px 16px; border-radius: var(--r-lg); }
}

@media (max-height: 520px) { .picker__toolbar { position: static; } }

@media (max-width: 480px) {
  .home__hero { grid-template-columns: minmax(0, 1fr) 108px; gap: 12px 12px; }
  .home__companion { width: 108px; }
  .home__title { font-size: 2.125rem; }
  .home__eyebrow { font-size: 0.75rem; letter-spacing: 0.035em; }
  /* The flag alone opens the menu; the chevron only costs width here. */
  .lang-switch__btn > svg:last-child { display: none; }
  .lang-switch__btn { padding: 0 7px; }
}

@media (max-width: 420px) {
  .topbar__crumb { font-size: 0.75rem; }
  .brand span { font-size: 0.875rem; }
  .topbar__inner { gap: 10px; }
}

/* ── 20. Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .text-effect[data-pending] > .te-seg { opacity: 1; filter: none; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --border: rgba(251, 251, 254, 0.24); --border-strong: rgba(251, 251, 254, 0.4); }
  .theme-light { --border: rgba(5, 3, 21, 0.24); --border-strong: rgba(5, 3, 21, 0.4); }
}

/* ── 21. Vue transition classes (exits only — enters are driven by Motion) ─ */

.fade-enter-active,
.fade-leave-active { transition: opacity var(--dur) var(--ease); }
.fade-enter-from,
.fade-leave-to { opacity: 0; }
/* Guided audio workspace. Keep all controls in normal flow on small screens. */
.audio-course{padding-block:28px 80px;min-height:calc(100dvh - var(--topbar-h));}
.audio-course__nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:32px;flex-wrap:wrap;}
.audio-mode{display:flex;border:1px solid var(--border);padding:4px;border-radius:12px;gap:4px;}
.audio-mode button{min-height:44px;padding:8px 18px;border-radius:8px;font-size:.95rem;color:var(--fg-muted);}
.audio-mode .audio-mode__active{background:var(--surface-1);color:var(--fg);box-shadow:inset 0 0 0 1px var(--border);}
.audio-course__layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;max-width:1100px;margin-inline:auto;}
.audio-syllabus{padding-top:4px;min-width:0;}
.audio-syllabus>label{display:block;margin:22px 0 8px;font-size:.875rem;}
.audio-syllabus select,.audio-speed select{max-width:100%;min-height:44px;border:1px solid var(--border);background:var(--surface-1);color:var(--fg);border-radius:10px;padding:10px;font:inherit;}
.audio-syllabus select{width:100%;text-overflow:ellipsis;font-size:.9rem;}
.audio-syllabus__note,.audio-voice-note{margin-top:20px;font-size:.875rem;line-height:1.65;color:var(--fg-muted);overflow-wrap:anywhere;}
.audio-voice-note{border-left:2px solid var(--fox-accent);padding-left:12px;}
.audio-workspace{min-width:0;max-width:720px;}
.audio-workspace h1{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.2;letter-spacing:-.025em;margin:12px 0 18px;overflow-wrap:anywhere;}
.audio-workspace h2{font-size:1.35rem;line-height:1.35;letter-spacing:-.015em;}
.audio-workspace p{line-height:1.65;overflow-wrap:anywhere;}
.audio-status{font-size:.95rem;color:var(--fg-muted);min-height:1.5em;margin-block:12px;}
.audio-alert{padding:16px 18px;border:1px solid var(--border);border-left:3px solid var(--fox-accent);border-radius:12px;background:var(--surface-1);}
.audio-alert p{margin:0 0 12px;}
.audio-welcome{text-align:center;padding:8px 16px 24px;}
.audio-welcome>.fox-art{width:176px;height:176px;display:block;margin:0 auto 12px;}
.audio-welcome>p{max-width:440px;margin:14px auto 22px;color:var(--fg-muted);}
.audio-welcome .audio-welcome__note{font-size:.875rem;margin:14px auto 4px;}
.audio-start{min-height:52px;min-width:210px;}
.audio-sequence{display:flex;gap:5px;margin:12px 0 24px;}
.audio-sequence span{height:5px;flex:1;min-width:0;border-radius:3px;background:var(--border);}
.audio-sequence span.is-done{background:var(--fox-accent);opacity:.55;}
.audio-sequence span.is-current{background:var(--fox-accent);}
.audio-now{display:flex;align-items:center;gap:20px;margin-bottom:20px;}
.audio-now>.fox-art{flex:0 0 124px;width:124px;height:124px;}
.audio-now>div{min-width:0;}
.audio-now h2{margin:6px 0;}
.audio-now p:last-child{margin:0;color:var(--fg-muted);}
.audio-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;}
.audio-play{border:1px solid var(--fox-accent);background:var(--fox-accent);color:#1b110c;min-width:110px;min-height:56px;border-radius:28px;font-size:1rem;font-weight:650;}
.theme-light .audio-play{color:#fff;}
.audio-speed{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:.875rem;}
.audio-speed select{font-size:1rem;}
.audio-caption-toggle{display:flex;gap:9px;align-items:center;font-size:.9rem;min-height:44px;margin:12px 0;color:var(--fg-muted);cursor:pointer;}
.audio-caption-toggle input{width:18px;height:18px;accent-color:var(--fox-accent);}
.audio-caption{padding:18px;background:var(--surface-1);border-radius:12px;font-size:1.05rem;white-space:pre-wrap;}
.audio-caption,.audio-question__prompt,.audio-model-answer,.audio-native p{overflow-wrap:anywhere;}
.audio-reading-note{font-size:.875rem;line-height:1.6;color:var(--fg-muted);margin:10px 0 14px;}
.audio-native{margin:10px 0;min-width:0;}
.audio-native summary{display:list-item;cursor:pointer;padding:10px 0;min-height:44px;box-sizing:border-box;font-size:.9rem;color:var(--fg-muted);}
.audio-native p{font-size:1rem;line-height:1.7;margin:4px 0 12px;white-space:pre-wrap;}
.audio-question{margin-top:8px;border-top:1px solid var(--border);padding-top:18px;}
.audio-question__prompt{font-size:1.25rem;font-weight:550;margin:0 0 20px;}
.audio-question>label{display:block;font-size:.875rem;margin-bottom:8px;}
.audio-question textarea{display:block;box-sizing:border-box;width:100%;max-width:100%;min-height:100px;resize:vertical;border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:var(--surface-1);color:var(--fg);font:inherit;line-height:1.6;}
.audio-answer-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0;}
.audio-privacy,.audio-transcript-notice{font-size:.875rem;color:var(--fg-muted);}
.audio-feedback{margin:22px 0;padding:18px 20px;border:1px solid var(--border);border-radius:14px;background:var(--surface-1);}
.audio-feedback h3{margin:0 0 10px;font-size:1rem;}
.audio-feedback p{margin:8px 0;}
.audio-feedback[data-verdict="correct"]{border-left:3px solid var(--fox-accent);}
.audio-model-answer{font-size:1.3rem;font-weight:550;}
.audio-finished{padding:20px 0;text-align:center;}
.audio-finished>.fox-art{display:block;margin:0 auto 16px;}
.audio-finished .audio-answer-actions{justify-content:center;}
.audio-bottom-nav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--border);margin-top:36px;padding-top:18px;}
.recap-mode{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px;}
.audio-course button:disabled{opacity:.48;cursor:not-allowed;}
.audio-course button,.audio-course a{white-space:normal;overflow-wrap:anywhere;}
.audio-course :focus-visible{outline:2px solid var(--fox-accent);outline-offset:4px;}
@media(max-width:860px){
  .audio-course{padding-block:20px 48px;}
  .audio-course__nav{margin-bottom:24px;}
  .audio-course__layout{grid-template-columns:minmax(0,1fr);gap:24px;}
  .audio-syllabus{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;}
  .audio-syllabus>.t-micro,.audio-syllabus__note{display:none;}
  .audio-syllabus>label{margin:0;}
  .audio-voice-note{margin:10px 0 0;}
  .audio-workspace{max-width:none;}
  .audio-now>.fox-art{flex-basis:88px;width:88px;height:88px;}
  .audio-now{gap:14px;}
  .audio-workspace h1{font-size:1.85rem;}
  .audio-welcome{padding-inline:0;}
}
@media(max-width:420px){.audio-now{align-items:flex-start;}.audio-now>.fox-art{flex-basis:68px;width:68px;height:68px;}.audio-controls{gap:8px;}.audio-speed{margin-left:0;}.audio-mode button{padding-inline:12px;}.audio-workspace h1{font-size:1.65rem;}}

/* Personal learning: one daily goal, with account details on a separate tab. */
.learning-trigger{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--r-md);font-size:.875rem;font-weight:600;white-space:nowrap;}
.learning-trigger:hover,.learning-trigger[aria-current="page"]{background:var(--surface-2);border-color:var(--border-strong);}
.learning-trigger>svg{width:20px;height:20px;}.learning-avatar{font-size:.875rem;letter-spacing:-.03em;}
.home-learning{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:16px 0;border-block:1px solid var(--border);font-size:.9375rem;color:var(--fg-muted);}
.home-learning strong{color:var(--fox-accent);font-weight:650;}.home-learning>span:last-child{display:flex;gap:12px;align-items:center;}.home-learning svg{width:18px;height:18px;}
.learning-page{max-width:1040px;padding-block:30px 64px;min-width:0;}
.learning-page .btn{min-height:44px;}
.learning-page h1{font-size:clamp(1.8rem,4vw,2.4rem);font-weight:650;letter-spacing:-.045em;line-height:1.2;margin-top:16px;}
.learning-page h2{font-size:1.125rem;font-weight:600;line-height:1.45;letter-spacing:-.02em;}
.learning-page p{font-size:1rem;line-height:1.6;}.learning-page a,.learning-page p,.learning-page strong{overflow-wrap:anywhere;}
.learning-page__heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;}
.learning-back{font-size:.875rem;color:var(--fg-muted);display:inline-flex;align-items:center;min-height:36px;}
.learning-back:hover{color:var(--fg);}.learning-greeting{color:var(--fg-muted);text-align:right;max-width:50%;}
.learning-tabs{display:flex;gap:26px;border-bottom:1px solid var(--border);margin:24px 0 30px;}
.learning-tabs a{min-height:48px;padding:12px 0;border-bottom:2px solid transparent;color:var(--fg-muted);font-size:.9375rem;font-weight:550;}
.learning-tabs a[aria-current="page"]{color:var(--fg);border-color:var(--fox-accent);}
.learning-today{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface-1);overflow:hidden;}
.learning-streak{display:flex;align-items:center;gap:12px;padding:28px;min-width:0;}
.learning-streak>div{flex:1;min-width:0;}.learning-streak>.fox-art{width:130px;height:130px;flex-shrink:0;object-fit:contain;}
.learning-streak .learning-streak__value{font-size:4rem;font-weight:600;letter-spacing:-.07em;line-height:1.05;margin:16px 0;color:var(--fox-accent);font-variant-numeric:tabular-nums;}
.learning-streak__value span{font-size:1.35rem;letter-spacing:-.03em;color:var(--fg);}.learning-streak p:not(.learning-streak__value){color:var(--fg-muted);}
.learning-streak .learning-best{font-size:.875rem;margin-top:12px;}
.learning-goal{border-left:1px solid var(--border);padding:28px;min-width:0;}
.learning-section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px 20px;flex-wrap:wrap;}
.learning-section-heading>a{display:inline-flex;align-items:center;min-height:36px;font-size:.875rem;color:var(--accent-text);}
.learning-section-heading>span{font-size:.8125rem;color:var(--fg-subtle);}
.learning-goal .learning-goal__count{margin:18px 0 12px;color:var(--fg-muted);}.learning-goal__count strong{font-size:1.5rem;color:var(--fg);font-variant-numeric:tabular-nums;}
.learning-goal progress{display:block;width:100%;height:8px;border:0;border-radius:var(--r-full);overflow:hidden;appearance:none;background:var(--surface-3);color:var(--fox-accent);}
.learning-goal progress::-webkit-progress-bar{background:var(--surface-3);border-radius:var(--r-full);}.learning-goal progress::-webkit-progress-value{background:var(--fox-accent);border-radius:var(--r-full);}.learning-goal progress::-moz-progress-bar{background:var(--fox-accent);border-radius:var(--r-full);}
.learning-page .learning-help{font-size:.875rem;line-height:1.65;color:var(--fg-muted);margin-top:10px;}
.learning-goal>.btn{margin-top:20px;min-height:44px;}
.learning-week{margin-top:34px;}.learning-calendar{list-style:none;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:16px 0 0;}
.learning-calendar li{display:flex;flex-direction:column;align-items:center;padding:14px 6px;gap:8px;border:1px solid var(--border);border-radius:var(--r-md);font-size:.875rem;color:var(--fg-muted);}
.learning-calendar li[data-active="true"]{background:var(--success-wash);border-color:var(--success-line);color:var(--fg);}.learning-calendar li[data-today="true"]{outline:2px solid var(--fox-accent);outline-offset:2px;}
.learning-calendar b{font-size:1.35rem;line-height:1.2;font-variant-numeric:tabular-nums;}.learning-calendar small{font-size:.75rem;}
.learning-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px 0;padding:24px 0;border-block:1px solid var(--border);}
.learning-totals>div{display:flex;flex-direction:column;gap:8px;}.learning-totals dt{font-size:.875rem;color:var(--fg-muted);}.learning-totals dd{margin:0;font-size:1.75rem;font-weight:550;letter-spacing:-.04em;font-variant-numeric:tabular-nums;}
.learning-lessons,.learning-visit-list{list-style:none;margin:12px 0 0;padding:0;}
.learning-lessons li+li,.learning-visit-list li+li{border-top:1px solid var(--border);}
.learning-lessons a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;min-height:76px;}
.learning-lessons a:hover strong{color:var(--accent-text);}.learning-lessons a>span:first-child{display:flex;flex-direction:column;gap:6px;min-width:0;}
.learning-lessons small{font-size:.8125rem;color:var(--fg-muted);}.learning-lessons strong{font-weight:550;font-size:1rem;line-height:1.5;}
.learning-lesson-action{display:flex;gap:8px;align-items:center;font-size:.875rem;color:var(--fg-muted);flex-shrink:0;}.learning-lesson-action svg{width:18px;height:18px;}
.learning-page .learning-footnote{font-size:.8125rem;color:var(--fg-subtle);line-height:1.65;margin-top:26px;}
.learning-identity{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:26px;border-bottom:1px solid var(--border);}.learning-identity p{color:var(--fg-muted);margin-top:4px;}.learning-identity>div{min-width:0;}
.learning-preferences{padding-top:28px;}.learning-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;}
.learning-form-grid label{font-size:.9375rem;font-weight:500;min-width:0;}.learning-form-grid select{display:block;width:100%;min-width:0;min-height:48px;margin-top:8px;padding:10px 12px;background:var(--surface-1);color:var(--fg);border:1px solid var(--border-strong);border-radius:var(--r-md);font:inherit;}
.learning-save-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:18px;}.learning-save-row p{font-size:.875rem;color:var(--fg-muted);}
.learning-options{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:28px 0;}.learning-options>.btn{white-space:normal;min-height:44px;}
.learning-visits{padding-top:26px;border-top:1px solid var(--border);}.learning-visit-list li{padding:20px 0;}.learning-visit-list li>div{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;}.learning-visit-list strong{font-size:.9375rem;font-weight:550;}
.learning-visit-list p{font-size:.875rem;color:var(--fg-muted);margin-top:6px;}.learning-visit-list .learning-help{margin-top:2px;}.learning-current{font-size:.75rem;color:var(--success);}
.learning-empty{text-align:center;padding:24px 0 32px;max-width:480px;margin:auto;}.learning-empty img{margin:0 auto 16px;display:block;}.learning-empty p{color:var(--fg-muted);margin:12px 0 24px;}
.learning-error{padding:18px;border:1px solid var(--danger-line);border-radius:var(--r-md);background:var(--danger-wash);margin-bottom:22px;}.learning-error .btn{margin-top:12px;}.learning-loading{padding:30px 0;color:var(--fg-muted);}
.learning-page :focus-visible,.learning-trigger:focus-visible,.home-learning:focus-visible{outline:2px solid var(--fox-accent);outline-offset:4px;}
@media(max-width:860px){.learning-trigger{width:44px;padding:8px;}.learning-today{grid-template-columns:minmax(0,1fr);}.learning-goal{border-left:0;border-top:1px solid var(--border);}.learning-streak{justify-content:space-between;}.learning-streak>.fox-art{width:136px;height:136px;}.learning-page{padding-block:20px 40px;}.learning-form-grid{grid-template-columns:minmax(0,1fr);}}
@media(max-width:480px){.learning-page__heading{align-items:flex-start;}.learning-greeting{padding-top:12px;font-size:.875rem!important;max-width:40%;}.learning-streak,.learning-goal{padding:22px;}.learning-streak>.fox-art{width:92px;height:92px;}.learning-streak .learning-streak__value{font-size:3.4rem;}.learning-calendar{gap:6px;}.learning-calendar li{padding:12px 2px;font-size:.75rem;}.learning-calendar b{font-size:1.15rem;}.learning-calendar small{font-size:.6875rem;}.learning-totals{gap:16px;}.learning-totals dt{font-size:.8125rem;}.learning-totals dd{font-size:1.5rem;}.learning-lessons a{gap:12px;}.learning-lesson-action{font-size:0;gap:0;}.learning-lesson-action svg{width:20px;height:20px;}.learning-identity{align-items:flex-start;}.learning-identity>.btn{flex-shrink:0;}.learning-tabs{gap:24px;margin-bottom:24px;}}