/* ===================================================================   Compri design system
   Neutral Daylight and Night, warm brown Paper, and blue Midnight palettes.
   Theme accents style surfaces and controls. Semantic colors retain their meaning.
   ========================================================================== */

.test-home-badge { display:inline-flex; text-decoration:none; color:var(--text); }
.test-home-badge span { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid color-mix(in srgb,#8b72d9 45%,var(--border)); border-radius:999px; background:color-mix(in srgb,#8b72d9 12%,var(--bg)); font-size:.8rem; }
:root,
.theme-light,
.theme-system {
  --bg: #f5f5f5;
  --bg-accent: #eeeeee;
  --surface: #ffffff;
  --home-glass-opacity: 53.2%; /* Light glass: 76% × .7; text stays opaque. */
  --surface-subtle: #eeeeee;
  --surface-hover: #f7f7f7;
  --sidebar: #fafafa;
  --text: #202020;
  --text-secondary: #515151;
  --muted: #707070;
  --border: #e2e2e2;
  --border-strong: #c9c9c9;
  --accent: #333333;
  --accent-hover: #181818;
  --accent-soft: #ebebeb;
  --accent-ink: #303030;
  --accent-text: #ffffff;
  --marigold: #8a8a8a;
  --marigold-soft: #eeeeee;
  --marigold-ink: #555555;
  --coral: #777777;
  --coral-soft: #e9e9e9;
  --sky: #666666;
  --sky-soft: #ececec;
  --secondary: #202020;
  --secondary-text: #ffffff;
  --focus: rgba(51, 51, 51, .24);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
  --shadow-raised: 0 2px 6px rgba(0, 0, 0, .06), 0 18px 48px rgba(0, 0, 0, .14);
  --highlight: #dedede;
  --selection: #d4d4d4;
  --scrim: rgba(0, 0, 0, .42);
  color-scheme: light;
}

/* Neutral Night palette, mirrored by Automatic's dark appearance below. */
:root[data-theme="dark"],
.theme-dark {
  --bg: #121212;
  --bg-accent: #181818;
  --surface: #1c1c1c;
  --home-glass-opacity: 82%;
  --surface-subtle: #242424;
  --surface-hover: #2b2b2b;
  --sidebar: #161616;
  --text: #ededed;
  --text-secondary: #bcbcbc;
  --muted: #969696;
  --border: #303030;
  --border-strong: #484848;
  --accent: #d6d6d6;
  --accent-hover: #eeeeee;
  --accent-soft: #303030;
  --accent-ink: #dedede;
  --accent-text: #181818;
  --marigold: #b8b8b8;
  --marigold-soft: #2e2e2e;
  --marigold-ink: #d0d0d0;
  --coral: #a3a3a3;
  --coral-soft: #2c2c2c;
  --sky: #c5c5c5;
  --sky-soft: #2d2d2d;
  --secondary: #ededed;
  --secondary-text: #161616;
  --focus: rgba(214, 214, 214, .3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .22);
  --shadow-raised: 0 2px 6px rgba(0, 0, 0, .3), 0 20px 50px rgba(0, 0, 0, .45);
  --highlight: #444444;
  --selection: #484848;
  --scrim: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"],
  .theme-system {
    --bg: #121212;
    --bg-accent: #181818;
    --surface: #1c1c1c;
    --home-glass-opacity: 82%;
    --surface-subtle: #242424;
    --surface-hover: #2b2b2b;
    --sidebar: #161616;
    --text: #ededed;
    --text-secondary: #bcbcbc;
    --muted: #969696;
    --border: #303030;
    --border-strong: #484848;
    --accent: #d6d6d6;
    --accent-hover: #eeeeee;
    --accent-soft: #303030;
    --accent-ink: #dedede;
    --accent-text: #181818;
    --marigold: #b8b8b8;
    --marigold-soft: #2e2e2e;
    --marigold-ink: #d0d0d0;
    --coral: #a3a3a3;
    --coral-soft: #2c2c2c;
    --sky: #c5c5c5;
    --sky-soft: #2d2d2d;
    --secondary: #ededed;
    --secondary-text: #161616;
    --focus: rgba(214, 214, 214, .3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .22);
    --shadow-raised: 0 2px 6px rgba(0, 0, 0, .3), 0 20px 50px rgba(0, 0, 0, .45);
    --highlight: #444444;
    --selection: #484848;
    --scrim: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

:root[data-theme="calm"],
.theme-calm {
  --bg: #f1eadc;
  --bg-accent: #e9ddca;
  --surface: #fbf7ee;
  --home-glass-opacity: 53.2%; /* Light glass: 76% × .7; text stays opaque. */
  --surface-subtle: #ece4d4;
  --surface-hover: #f6f0e3;
  --sidebar: #ece4d4;
  --text: #2e2a22;
  --text-secondary: #5b5446;
  --muted: #847b6b;
  --border: #ddd2bf;
  --border-strong: #c9bba3;
  --accent: #805b3f;
  --accent-hover: #67462f;
  --accent-soft: #eadcc8;
  --accent-ink: #624329;
  --accent-text: #ffffff;
  --marigold: #b78a55;
  --marigold-soft: #f1e3cd;
  --marigold-ink: #77552d;
  --coral: #9b6248;
  --coral-soft: #efddd1;
  --sky: #92745a;
  --sky-soft: #e9ded1;
  --secondary: #2e2a22;
  --secondary-text: #fbf7ee;
  --focus: rgba(128, 91, 63, .24);
  --shadow-sm: 0 1px 2px rgba(62, 49, 35, .06);
  --shadow: 0 1px 2px rgba(62, 49, 35, .05), 0 8px 24px rgba(62, 49, 35, .07);
  --shadow-raised: 0 2px 6px rgba(62, 49, 35, .08), 0 18px 46px rgba(62, 49, 35, .16);
  --highlight: #e4c99d;
  --selection: #dfc9aa;
  --scrim: rgba(46, 42, 34, .4);
  color-scheme: light;
}

:root[data-theme="tokyo-night"],
.theme-tokyo-night {
  --bg: #15161f;
  --bg-accent: #1a1d2c;
  --surface: #1b1d2a;
  --home-glass-opacity: 82%;
  --surface-subtle: #232638;
  --surface-hover: #292d42;
  --sidebar: #13141c;
  --text: #c8d0f5;
  --text-secondary: #a9b1d6;
  --muted: #7f88ad;
  --border: #2e3350;
  --border-strong: #434a6c;
  --accent: #7aa2f7;
  --accent-hover: #93b4fa;
  --accent-soft: #263255;
  --accent-ink: #a9c3fb;
  --accent-text: #11131c;
  --marigold: #e0af68;
  --marigold-soft: #3a3122;
  --marigold-ink: #ecc68f;
  --coral: #f7768e;
  --coral-soft: #3b2230;
  --sky: #7dcfff;
  --sky-soft: #1f3247;
  --secondary: #c8d0f5;
  --secondary-text: #15161f;
  --focus: rgba(122, 162, 247, .3);
  --shadow-sm: 0 1px 2px rgba(5, 5, 12, .3);
  --shadow: 0 1px 2px rgba(5, 5, 12, .3), 0 8px 24px rgba(5, 5, 12, .28);
  --shadow-raised: 0 2px 6px rgba(5, 5, 12, .35), 0 20px 50px rgba(5, 5, 12, .5);
  --highlight: #3d3a5c;
  --selection: #33466e;
  --scrim: rgba(5, 5, 12, .6);
  color-scheme: dark;
}

/* Status and identity colors are independent of decorative theme accents.
   Keep success green, errors red, and hints/corrections gold in every theme. */
:root,
.theme-light,
.theme-calm,
.theme-system {
  --xp: #a32bb4;
  --xp-soft: #f7e8fa;
  --success: #267347;
  --success-soft: #e4f3e9;
  --warning: #bd8414;
  --warning-soft: #fff3cf;
  --warning-ink: #805600;
  --danger: #bb3d36;
  --danger-soft: #fce9e6;
  --danger-text: #ffffff;
}
:root[data-theme="dark"],
:root[data-theme="tokyo-night"],
.theme-dark,
.theme-tokyo-night {
  --xp: #e69aef;
  --xp-soft: #39223e;
  --success: #78cb97;
  --success-soft: #163824;
  --warning: #eab75a;
  --warning-soft: #392d16;
  --warning-ink: #f4cc79;
  --danger: #f08c85;
  --danger-soft: #412521;
  --danger-text: #181818;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"],
  .theme-system {
    --xp: #e69aef;
    --xp-soft: #39223e;
    --success: #78cb97;
    --success-soft: #163824;
    --warning: #eab75a;
    --warning-soft: #392d16;
    --warning-ink: #f4cc79;
    --danger: #f08c85;
    --danger-soft: #412521;
    --danger-text: #181818;
  }
}
/* Experiences drawn over dark scrims (comics, role-play, Speaking Coach) keep the
   complete Night palette in every theme, so buttons, chips and word bubbles inside
   them stay readable on Daylight and Paper too. Their own rules later refine
   surfaces and borders for the glass look. */
.flashcard-stage.comic-stage, .roleplay-stage, .roleplay-panel, .reader-popup.coach-stage {
  --bg: #121212;
  --bg-accent: #181818;
  --surface: #1c1c1c;
  --surface-subtle: #242424;
  --surface-hover: #2b2b2b;
  --sidebar: #161616;
  --text: #ededed;
  --text-secondary: #bcbcbc;
  --muted: #969696;
  --border: #303030;
  --border-strong: #484848;
  --accent: #d6d6d6;
  --accent-hover: #eeeeee;
  --accent-soft: #303030;
  --accent-ink: #dedede;
  --accent-text: #181818;
  --marigold: #b8b8b8;
  --marigold-soft: #2e2e2e;
  --marigold-ink: #d0d0d0;
  --coral: #a3a3a3;
  --coral-soft: #2c2c2c;
  --sky: #c5c5c5;
  --sky-soft: #2d2d2d;
  --secondary: #ededed;
  --secondary-text: #161616;
  --focus: rgba(214, 214, 214, .3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .22);
  --shadow-raised: 0 2px 6px rgba(0, 0, 0, .3), 0 20px 50px rgba(0, 0, 0, .45);
  --highlight: #444444;
  --selection: #484848;
  --scrim: rgba(0, 0, 0, .6);
  --xp: #e69aef;
  --xp-soft: #39223e;
  --success: #78cb97;
  --success-soft: #163824;
  --warning: #eab75a;
  --warning-soft: #392d16;
  --warning-ink: #f4cc79;
  --danger: #f08c85;
  --danger-soft: #412521;
  --danger-text: #181818;
  color-scheme: dark;
}

:root {
  --avatar-start: #0f7a6a;
  --avatar-end: #397d5b;
  --avatar-text: #ffffff;
}

:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-reading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, "Noto Serif", Georgia, serif;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Base ---------- */
/* Keep artwork edge to edge; only controls consume these insets. Floating
   panels read the same resolved values when fitting the visual viewport. */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; }
html, body, #main { min-height: 100%; background: var(--bg); }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); line-height: 1.5; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--text); font-family: inherit; line-height: 1.2; }
h1 { margin-bottom: 10px; font-size: clamp(1.85rem, 3.2vw, 2.45rem); font-weight: 720; letter-spacing: -.028em; }
h2 { margin-bottom: 14px; font-size: 1.22rem; font-weight: 680; letter-spacing: -.015em; }
h3 { margin-bottom: 8px; font-size: 1.05rem; font-weight: 650; }
a { color: var(--accent); }
::selection { background: var(--selection); }
.theme-root { position: relative; isolation: isolate; min-height: 100vh; color: var(--text); background: var(--bg); transition: color .16s ease, background-color .16s ease; }
.shell-icon { display: block; flex: none; }

label { display: grid; gap: 7px; color: var(--text-secondary); font-size: .86rem; font-weight: 600; }
input, textarea, select { width: 100%; border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 13px; background: var(--surface); color: var(--text); font-weight: 450; transition: border-color .15s ease, box-shadow .15s ease; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { resize: vertical; line-height: 1.55; }
select { appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--accent); flex: none; }
input[type="range"] { padding: 0; border: 0; accent-color: var(--accent); }
input[type="number"] { max-width: 160px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: 10px; color: var(--text-secondary); font-size: .86rem; font-weight: 600; }

/* Reader words, practice tokens and inline links are buttons too, so the base
   rule stays border-free and only standard buttons get size and alignment. */
button { display: inline-flex; align-items: center; gap: 8px; width: fit-content; border: 0; border-radius: 10px; padding: 10px 17px; background: var(--accent); color: var(--accent-text); font-weight: 650; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease; }
button:not([class]), button.secondary, button.danger-solid, button.ghost:not(.menu-item) { justify-content: center; }
button:hover { background: var(--accent-hover); }
button:active { transform: translateY(1px); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button:disabled { cursor: default; opacity: .55; transform: none; }
button.secondary { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm); }
button.secondary:hover { background: var(--surface-hover); color: var(--text); }
.button-link.secondary { border-color: var(--border-strong); background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.button-link.secondary:hover { background: var(--surface-hover); color: var(--text); }
button.ghost, .button-link.ghost { padding: 8px 10px; background: transparent; color: var(--text-secondary); box-shadow: none; }
button.ghost:hover, .button-link.ghost:hover { background: var(--surface-subtle); color: var(--text); }
button.danger, .button-link.danger { color: var(--danger); }
button.ghost.danger:hover { background: var(--danger-soft); color: var(--danger); }
button.danger-solid { background: var(--danger); color: var(--danger-text); }
button.danger-solid:hover { background: color-mix(in srgb, var(--danger) 86%, black); }
button.icon-button, .icon-button { display: inline-grid; place-items: center; width: 38px; min-width: 38px; height: 38px; padding: 0; border-radius: 10px; background: transparent; color: var(--muted); }
button.icon-button:hover { background: var(--surface-subtle); color: var(--text); }
.icon-button.copy-text-button { width: 32px; min-width: 32px; height: 32px; flex: none; }
.copy-text-button > span { display: inline-flex; }
.sr-only, .copy-text-button > .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.copy-text-button .copy-text-check, .copy-text-button .copy-text-error { display: none; }
.copy-text-button[data-copy-state="copied"] .copy-text-icon, .copy-text-button[data-copy-state="error"] .copy-text-icon { display: none; }
.copy-text-button[data-copy-state="copied"] .copy-text-check { display: inline-flex; color: var(--success); }
.copy-text-button[data-copy-state="error"] .copy-text-error { display: inline-flex; color: var(--danger); }
.button-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; padding: 9px 17px; border: 1px solid transparent; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-weight: 650; line-height: 1.25; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; }
.button-link:hover { background: var(--accent-hover); }
.text-link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: .9rem; font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
a.nav-item, a.document-open { text-decoration: none; }

.muted { color: var(--muted); }
.error { color: var(--danger); }
p.error { padding: 10px 14px; border-radius: 10px; background: var(--danger-soft); font-size: .92rem; overflow-wrap: anywhere; }
.notice { margin-top: 14px; color: var(--success); font-weight: 600; }
hr { margin: 28px 0; border: 0; border-top: 1px solid var(--border); }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--accent-ink); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lede { max-width: 640px; color: var(--text-secondary); font-size: 1.02rem; line-height: 1.6; }
.field-label { margin: 0; color: var(--text-secondary); font-size: .86rem; font-weight: 600; }
.field-help { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 450; }
.pill, .tag { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: .74rem; font-weight: 650; }
.pill { padding: 4px 10px; }
.tag { margin-left: 8px; padding: 2px 9px; vertical-align: middle; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { padding: 6px 11px; border-radius: 999px; background: var(--surface-subtle); color: var(--text-secondary); font-size: .84rem; }
.chip strong { margin-right: 4px; color: var(--text); }
.chip.linked { color: var(--text-secondary); font-weight: 500; }
.chip.removable { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px 5px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 550; }
.chip.removable button { width: 24px; min-width: 24px; min-height: 24px; height: 24px; padding: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.chip.removable button:hover { background: var(--surface-subtle); color: var(--text); }
button.chip-button { min-height: 34px; padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: .86rem; font-weight: 550; }
.interest-emoji { font-size: 1rem; line-height: 1; }
button.chip-button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
button.chip-button.selected { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.meter { display: block; overflow: hidden; height: 6px; border-radius: 99px; background: var(--surface-subtle); }
.meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--marigold))); transition: width .4s var(--ease); }
.meter.small { height: 4px; }
.tip { display: flex; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--warning-soft); color: var(--warning-ink); font-size: .86rem; line-height: 1.5; }
.tip .shell-icon { margin-top: 1px; }
.loading-row { display: flex; align-items: center; gap: 12px; padding: 18px 2px; color: var(--muted); }
.loading-dots { display: inline-flex; gap: 5px; }
.loading-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: dot-bounce 1.1s infinite var(--ease); }
.loading-dots span:nth-child(2) { animation-delay: .15s; background: color-mix(in srgb, var(--accent) 60%, var(--marigold)); }
.loading-dots span:nth-child(3) { animation-delay: .3s; background: var(--marigold); }
@keyframes dot-bounce { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.confirm-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; color: var(--text-secondary); font-size: .88rem; }
.confirm-inline button { min-height: 34px; padding: 6px 12px; font-size: .86rem; }
.confirm-label { color: var(--text-secondary); font-size: .88rem; }

.switch-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; margin: 4px 0; padding: 14px 0; color: var(--text); font-weight: 500; cursor: pointer; }
.switch-row + .switch-row { border-top: 1px solid var(--border); }
.switch-row input[type="checkbox"] { position: relative; width: 40px; height: 24px; margin-top: 1px; border: 0; border-radius: 99px; background: var(--border-strong); appearance: none; cursor: pointer; transition: background-color .18s ease; }
.switch-row input[type="checkbox"]::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); content: ""; transition: transform .18s var(--ease); }
.switch-row input[type="checkbox"]:checked { background: var(--accent); }
.switch-row input[type="checkbox"]:checked::after { background: var(--accent-text); transform: translateX(16px); }
.switch-row input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 4px var(--focus); }
.switch-copy { display: grid; gap: 3px; }
.switch-copy strong { font-size: .95rem; font-weight: 600; }
.switch-copy small { color: var(--muted); font-size: .84rem; font-weight: 450; line-height: 1.45; }
.option-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--text); font-weight: 500; }
.option-row input { width: auto; }
.inline-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: end; }
.inline-control button { white-space: nowrap; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.form-actions.end { justify-content: flex-end; }
.field-group { display: grid; gap: 10px; }
.more-options { border-top: 1px solid var(--border); padding-top: 14px; }
.more-options summary, details.dictionary-context summary { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: .9rem; font-weight: 600; cursor: pointer; list-style: none; }
.more-options summary::-webkit-details-marker, details.dictionary-context summary::-webkit-details-marker { display: none; }
.more-options summary::before { content: "+"; display: inline-grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; background: var(--surface-subtle); color: var(--muted); font-weight: 700; }
.more-options[open] summary::before { content: "–"; }
.more-options[open] summary { margin-bottom: 12px; }
.developer-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 14px; padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--surface-subtle); font-size: .84rem; }
.developer-panel .option-row { margin: 0; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Brand ---------- */
/* Use the PNG's alpha as a mask: every theme can tint the same original logo. */
.wordmark { display: inline-block; flex: none; width: 132px; aspect-ratio: 947 / 306; vertical-align: middle; color: inherit; background-color: currentColor; -webkit-mask-image: var(--compri-logo); mask-image: var(--compri-logo); mask-mode: alpha; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.wordmark.small { width: 104px; }
.app-header .wordmark { width: 100px; }
@media (max-width: 600px) { .app-header .wordmark { width: 90px; } }
@media (max-width: 380px) { .app-header .wordmark { width: 80px; } }
@media (max-width: 340px) { .app-header .wordmark { width: 52px; } }
@media (max-width: 380px) { .entry-topbar .wordmark { width: 104px; } }
@media (forced-colors: active) { .wordmark { background-color: CanvasText; forced-color-adjust: none; } }

/* ---------- Entry screens: loading, sign-in, onboarding, profile gateway ---------- */
.entry-shell { display: flex; flex-direction: column; align-items: center; min-height: 100dvh; padding: 0 max(20px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: radial-gradient(120% 60% at 50% -10%, var(--bg-accent), transparent 60%), var(--bg); }
.entry-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(1040px, 100%); padding: max(22px, env(safe-area-inset-top)) 0 26px; }
/* The language choice is available before setup, through sign-in, and in Settings. */
.entry-topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.entry-language { position: relative; flex: none; }
.entry-language-display { display: flex; align-items: center; gap: 8px; max-width: min(240px, 48vw); min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: .88rem; pointer-events: none; }
.entry-language-display > svg { flex: none; }
.entry-language-display > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-language select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.entry-language:hover .entry-language-display { background: var(--surface-hover); }
.entry-language:focus-within .entry-language-display { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 700px) {
  .entry-topbar-with-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .entry-topbar-actions { display: contents; }
  .entry-topbar-actions > .entry-language { grid-column: 2; grid-row: 1; }
  .entry-topbar-actions > .entry-link { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
}
.entry-link { padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .88rem; font-weight: 600; box-shadow: var(--shadow-sm); }
.entry-link:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.entry-panel { width: min(520px, 100%); padding: clamp(26px, 5vw, 44px); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); }
.entry-panel h1 { font-size: clamp(1.8rem, 5vw, 2.3rem); }
.entry-panel form { display: grid; gap: 16px; margin-top: 22px; }
.entry-return { width: min(520px, 100%); }
.entry-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 0; width: min(1040px, 100%); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); }
.entry-split > .entry-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.entry-aside { position: relative; display: grid; align-content: center; gap: 28px; overflow: hidden; padding: 48px 44px; background: radial-gradient(circle at 15% 10%, rgba(236, 72, 153, .35), transparent 55%), linear-gradient(155deg, #5b4bd6, #33236f); color: #f1efff; }
.entry-aside::after { position: absolute; right: -70px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(14, 165, 233, .22); filter: blur(10px); content: ""; }
.entry-aside-title { position: relative; z-index: 1; max-width: 360px; margin: 0; color: #fff; font-size: 1.65rem; font-weight: 720; line-height: 1.2; letter-spacing: -.025em; }
.entry-aside-list { position: relative; z-index: 1; display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.entry-aside-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: center; line-height: 1.4; }
.entry-aside-list li > span:last-child { display: grid; min-width: 0; gap: 1px; }
.entry-aside-list small { color: #cfc8ff; font-size: .78rem; font-weight: 600; }
.entry-aside-list strong { overflow-wrap: anywhere; color: #fff; font-size: 1rem; font-weight: 650; }
.entry-aside-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; }
.auth-back { margin: -8px 0 18px -10px; }
.auth-resend { margin: 12px 0 0 -10px; }
.auth-error { margin: 20px 0 0; }
.auth-recovery h1 { font-size: clamp(1.6rem, 5vw, 2rem); }
.auth-recovery .auth-error { overflow-wrap: anywhere; }
.auth-recovery-actions { display: grid; gap: 10px; margin-top: 22px; }
.auth-recovery-actions button { width: 100%; }
.auth-card form button[type="submit"] { width: 100%; padding-block: 13px; }
.otp-input { font-size: 1.6rem; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .4em; text-align: center; }
.auth-loading-shell { justify-content: center; }
.auth-loading { display: grid; justify-items: center; gap: 16px; color: var(--muted); text-align: center; }
.auth-loading p { margin: 0; }
.auth-loading-mark { animation: gentle-float 1.8s ease-in-out infinite; }
.auth-loading-mark .wordmark { width: 196px; color: var(--text); }
@keyframes gentle-float { 50% { transform: translateY(-6px); } }

.onboarding-card { width: min(860px, 100%); overflow-x: clip; }
.onboarding-topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.onboarding-steps { display: grid; flex: 1; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; min-width: min(100%, 420px); margin: 0; padding: 0; list-style: none; }
.onboarding-steps li { display: grid; gap: 7px; color: var(--muted); font-size: .76rem; font-weight: 600; }
.onboarding-step-bar { height: 5px; border-radius: 99px; background: var(--border); transition: background-color .3s ease; }
.onboarding-steps li.complete .onboarding-step-bar { background: color-mix(in srgb, var(--success) 45%, var(--border)); }
.onboarding-steps li.active { color: var(--accent-ink); }
.onboarding-steps li.active .onboarding-step-bar { background: var(--accent); }
.onboarding-step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-back { margin-left: -10px; }
.onboarding-screen { min-width: 0; }
.onboarding-question, .onboarding-answer { will-change: opacity, transform; }
.onboarding-question { animation: onboarding-question-forward .2s var(--ease) both; }
.onboarding-answer { animation: onboarding-answer-forward .22s var(--ease) .1s both; }
@keyframes onboarding-question-forward { from { opacity: 0; transform: translate3d(14px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes onboarding-answer-forward { from { opacity: 0; transform: translate3d(20px, 0, 0); } to { opacity: 1; transform: none; } }
.onboarding-form { display: grid; gap: 16px; }
.progressive-onboarding { margin: 0; }
.onboarding-flow { display: grid; gap: 10px; }
.onboarding-active-question { display: grid; gap: 22px; margin: 4px 0; padding: clamp(22px, 5vw, 40px); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); animation: progressive-question-in .26s var(--ease) both; }
.onboarding-active-question .onboarding-question h1 { max-width: 640px; margin-bottom: 8px; font-size: clamp(1.75rem, 4.6vw, 2.5rem); }
.onboarding-active-question .onboarding-question .lede { max-width: 600px; margin-bottom: 0; }
.onboarding-compact-answer { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--text); text-align: start; animation: progressive-answer-in .2s var(--ease) both; }
.onboarding-compact-answer:hover { border-color: var(--border-strong); background: var(--surface); }
.onboarding-compact-copy { display: grid; min-width: 0; gap: 1px; }
.onboarding-compact-copy small { overflow: hidden; color: var(--muted); font-size: .76rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-compact-copy strong { overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-edit-label { color: var(--accent); font-size: .8rem; font-weight: 650; }
.onboarding-option-answer { display: grid; gap: 18px; }
.onboarding-continue { justify-self: end; justify-content: center; min-width: 140px; }
button.onboarding-skip { min-width: 0; padding-inline: 12px; }
button.onboarding-skip:hover { background: none; color: var(--text); }
.onboarding-review-screen { display: grid; gap: 22px; padding: clamp(22px, 5vw, 40px); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); animation: progressive-question-in .26s var(--ease) both; }
.onboarding-review-screen h1 { margin-bottom: 8px; font-size: clamp(1.75rem, 4.6vw, 2.5rem); }
.onboarding-review-screen h1:focus { outline: none; }
.onboarding-review-sections { display: grid; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-subtle); }
.onboarding-review-section { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.onboarding-review-section + .onboarding-review-section { border-top: 1px solid var(--border); }
.onboarding-review-copy { display: grid; min-width: 0; gap: 2px; }
.onboarding-review-copy h2 { margin: 0 0 2px; color: var(--muted); font-size: .78rem; font-weight: 600; }
.onboarding-review-copy p, .onboarding-review-copy > strong { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.onboarding-review-sections { overflow:hidden; }
.onboarding-review-clickable { position:relative; transition:background-color .15s ease; }
.onboarding-review-clickable:has(> .onboarding-review-row-action:hover:not(:disabled)) { background:var(--surface-hover); }
.onboarding-review-clickable:has(> .onboarding-review-row-action:focus-visible) { outline:2px solid var(--accent); outline-offset:-2px; }
.onboarding-review-row-action { position:absolute; inset:0; z-index:1; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
.onboarding-review-row-action:is(:hover,:active,:focus-visible) { background:none; box-shadow:none; outline:none; transform:none; }
.onboarding-review-remove { position:relative; z-index:2; }
.onboarding-review-language-section { display:block; }
.onboarding-review-language-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:0; }
.onboarding-review-language-header h2 { margin:0; color:var(--muted); font-size:.78rem; font-weight:600; }
.onboarding-review-language-header .icon-button { height:30px; }
.onboarding-review-language-list { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.onboarding-review-language-list > li { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:8px 0; }
.onboarding-review-language-list > li + li { border-top:1px solid var(--border); }
.onboarding-review-language-list > li:first-child { min-height:38px; padding-block:0; }
.onboarding-review-language-list p { min-width:0; margin:0; font-size:.95rem; overflow-wrap:anywhere; }
.onboarding-review-language-section .icon-button { flex:none; }
.onboarding-ui-language { display: grid; gap: 8px; }
.confirmation-submit { justify-self: end; justify-content: center; min-width: 180px; padding-block: 13px; }
@keyframes progressive-question-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes progressive-answer-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }

.language-picker { display: grid; gap: 24px; }
.reader-popup.language-journey { inset:0; width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; border:0; border-radius:0; background:transparent; color:#fff; box-shadow:none; }
.reader-popup.language-journey::backdrop { background:rgba(8,12,20,.86); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.language-journey > .reader-popup-heading { position:absolute; inset:0 0 auto; z-index:5; border:0; padding:max(18px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)); justify-content:flex-end; pointer-events:none; }
.language-journey > .reader-popup-heading h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.language-journey > .reader-popup-heading button { pointer-events:auto; color:#fff; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); width:46px; height:46px; border-radius:50%; }
/* Keep the list bounded through modal and embedded setup flex containers. */
.language-journey > .reader-popup-body { position:relative; display:flex; flex-direction:column; flex:1 1 0; min-height:0; height:auto; padding:0 28px max(48px,env(safe-area-inset-bottom)); overflow-y:hidden; isolation:isolate; }
.ukraine-donation-link { display:inline-block; max-width:100%; margin-block-start:.8rem; padding:.45rem .7rem; border-radius:8px; background:#172554; color:#ffdf00; font-size:1rem; font-weight:600; line-height:1.5; text-decoration:underline; text-underline-offset:.2em; overflow-wrap:anywhere; }
.ukraine-donation-link:visited { color:#ffdf00; }
.ukraine-donation-link:hover { color:#fff18a; background:#1e3a6d; }
.ukraine-donation-link:focus-visible { outline:3px solid #ffdf00; outline-offset:4px; }
.ukraine-donation-interstitial { width:min(640px,100%); min-height:65dvh; margin:auto; padding:clamp(24px,6vw,64px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:28px; }
.ukraine-donation-interstitial h1 { margin:0; font-size:clamp(24px,4vw,36px); line-height:1.4; }
.ukraine-donation-interstitial h1 .ukraine-donation-link { font-size:inherit; margin:0; }
.language-journey-search,.language-journey-varieties { position:relative; z-index:2; width:min(760px,100%); margin:0 auto; }
.language-journey-search { display:flex; flex-direction:column; flex:1 1 0; height:auto; min-height:0; padding-top:27dvh; }
.language-journey-search > :not(.language-journey-results) { flex-shrink:0; }
.language-journey-search > label { display:block; margin-bottom:20px; color:rgba(255,255,255,.82); font-size:clamp(20px,2.4vw,30px); font-weight:500; line-height:1.35; }
.language-journey .language-journey-input { display:block; width:100%; height:auto; padding:12px 0 18px; border:0; border-bottom:2px solid rgba(255,255,255,.36); border-radius:0; color:#fff; background:transparent; font-size:clamp(32px,5vw,60px); font-weight:600; line-height:1.2; letter-spacing:-.035em; box-shadow:none; }
.language-journey .language-journey-input:focus { outline:0; border-color:#fff; box-shadow:0 2px 0 rgba(255,255,255,.2); }
.language-journey .language-journey-input::placeholder { color:rgba(255,255,255,.32); }
.language-journey .language-journey-view-all { display:block; margin-top:20px; padding:6px 0; width:fit-content; color:rgba(255,255,255,.8); background:none; border:0; box-shadow:none; text-decoration:underline; text-underline-offset:5px; font-size:17px; font-weight:400; }
.language-journey .language-journey-view-all:hover { color:#fff; }
.language-journey-search[data-browse="true"] { display:flex; flex-direction:column; flex:1 1 0; height:auto; min-height:0; padding-top:max(78px,env(safe-area-inset-top)); }
.language-journey-search[data-browse="true"] > label { font-size:clamp(18px,2.4vw,26px); margin-bottom:10px; flex-shrink:0; }
.language-journey-search[data-browse="true"] > .language-journey-input { font-size:clamp(28px,4vw,42px); flex-shrink:0; }
.language-journey-search[data-browse="true"] > .language-journey-back { align-self:flex-start; margin-bottom:12px; flex-shrink:0; }
.language-journey-search > .language-journey-results { flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:20px 8px 16px 4px; align-content:start; scroll-padding-block:20px 16px; touch-action:pan-y pinch-zoom; -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 20px,#000 calc(100% - 12px),transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 20px,#000 calc(100% - 12px),transparent);
}
.language-journey-search > .language-journey-results + .language-journey-view-all { margin-top:16px; }
.language-journey-search > .language-journey-results { margin-top:8px; }
.language-journey-group { display:grid; gap:10px; }
.language-journey-group + .language-journey-group { margin-top:24px; }
.language-journey-support-heading { color:rgba(255,255,255,.85); font-size:18px; line-height:1.4; font-weight:600; margin:0 0 8px; }
.language-journey-results { display:grid; gap:10px; margin-top:28px; padding-bottom:20px; animation:language-results-arrive .3s ease both; }
.language-journey .language-journey-tile { display:flex; align-items:center; gap:20px; width:100%; padding:20px 24px; min-height:88px; border:1px solid rgba(255,255,255,.16); border-radius:18px; color:#fff; background:rgba(255,255,255,.07); text-align:start; box-shadow:none; transition:background .18s,border-color .18s,transform .18s; }
.language-journey .language-journey-tile:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); transform:translateY(-1px); }
.language-journey button:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.language-journey-names { display:grid; gap:4px; flex:1; min-width:0; }
.language-journey-names strong,.language-journey-region strong { font-size:clamp(20px,2.2vw,26px); font-weight:600; }
.language-journey-names small { color:rgba(255,255,255,.58); font-size:16px; font-weight:400; }
.language-journey-flags { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:clamp(4px,.6vw,8px); max-width:40%; font-size:clamp(24px,calc(18px + 2vw),44px); line-height:1.25; }
.language-journey-tile > svg { flex:none; opacity:.6; }
.language-journey-varieties { display:flex; flex-direction:column; flex:1 1 0; height:auto; min-height:0; padding-top:max(80px,13dvh); }
.language-journey-varieties > .language-journey-results { overflow-y:auto; min-height:0; scrollbar-gutter:stable; padding-inline:4px 8px; }
.language-journey-varieties > :not(.language-journey-results) { flex-shrink:0; }
.language-journey .language-journey-back { display:inline-flex; align-items:center; gap:10px; margin-bottom:28px; padding:8px 0; color:rgba(255,255,255,.75); background:none; border:0; box-shadow:none; }
.language-journey-varieties h1 { color:#fff; font-size:clamp(30px,4.3vw,48px); line-height:1.15; font-weight:600; letter-spacing:-.025em; margin:0 0 32px; }
.language-journey-varieties h1:focus { outline:none; }
.language-journey-region-flag { font-size:36px; }
.language-journey-region-name { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; flex:1; min-width:0; }
.language-uncommon-label { display:inline-block; flex:none; padding:3px 8px; border:1px solid currentColor; border-radius:999px; color:var(--muted); font-size:.7rem; font-weight:550; line-height:1.3; white-space:nowrap; }
.language-journey .language-uncommon-label { color:rgba(255,255,255,.65); }
.language-journey .language-support-notice { color:rgba(255,255,255,.65); }
.language-journey-empty { padding:20px 0; color:rgba(255,255,255,.8); font-size:20px; }
.language-journey .error { color:#ffb8b8; }
.language-journey .language-journey-suggest { margin-top:14px; padding:12px 26px; background:#fff; color:#141820; border:1px solid #fff; border-radius:12px; box-shadow:none; font-size:18px; }
.language-journey .language-journey-suggest:hover { background:#e6eaf0; }
.language-brainstorm { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; opacity:1; transition:opacity .45s; }
.language-brainstorm[data-active="false"] { opacity:0; }
.language-brainstorm-spark { position:absolute; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.54); font-size:clamp(18px,2.1vw,28px); font-weight:500; white-space:nowrap; opacity:0; transform:translateY(10px); transition:opacity 2.4s ease,transform 5.6s ease; }
.language-brainstorm-spark[data-visible="true"] { opacity:1; transform:translateY(0); }
.language-brainstorm-spark > span:first-child { font-size:1.2em; }
.language-brainstorm-spark[data-slot="0"] { left:12%; top:13%; }
.language-brainstorm-spark[data-slot="1"] { right:15%; top:17%; }
.language-brainstorm-spark[data-slot="2"] { left:40%; top:9%; }
.language-brainstorm-spark[data-slot="3"] { left:8%; top:57%; }
.language-brainstorm-spark[data-slot="4"] { right:9%; top:56%; }
.language-brainstorm-spark[data-slot="5"] { left:36%; top:66%; }
.language-brainstorm-spark[data-slot="6"] { left:17%; top:80%; }
.language-brainstorm-spark[data-slot="7"] { right:16%; top:82%; }
.language-brainstorm-spark[data-slot="8"] { left:46%; top:89%; }
.language-brainstorm-spark[data-slot="9"] { right:32%; top:47%; }
@keyframes language-results-arrive { from {opacity:0;transform:translateY(8px)} to {opacity:1;transform:none} }
@media(max-width:600px) {
  .language-journey > .reader-popup-body { padding-inline:22px; }
  .language-journey-search { padding-top:28dvh; }
  .language-journey .language-journey-tile { padding:16px; gap:12px; min-height:80px; }
  .language-brainstorm-spark[data-slot="2"],.language-brainstorm-spark[data-slot="8"],.language-brainstorm-spark[data-slot="9"] { display:none; }
  .language-brainstorm-spark[data-slot="1"] { top:20%;right:9%; }
  .language-brainstorm-spark[data-slot="4"] { top:65%; }
  .language-brainstorm-spark[data-slot="5"] { top:73%;left:8%; }
  .language-brainstorm-spark[data-slot="6"] { top:91%; }
}
@media(prefers-reduced-motion:reduce) {
  .language-brainstorm { display:none; }
  .language-journey-results { animation:none; }
  .language-journey .language-journey-tile { transition:none; transform:none; }
}
.language-search { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--muted); transition: border-color .15s ease, box-shadow .15s ease; }
.language-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); }
.language-search input, .language-search input:focus { min-width: 0; padding: 13px 0; border: 0; outline: 0; background: transparent; box-shadow: none; }
.language-section { display: grid; gap: 10px; }
.language-section h2 { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.language-support-heading { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.language-support-notice { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.language-card-names .language-support-note { margin-top: 4px; color: var(--muted); font-size: .75rem; line-height: 1.4; white-space: normal; overflow: visible; text-overflow: clip; }

.language-empty { margin: 0; padding: 18px 0; }
.language-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.language-grid.compact { max-height: 340px; padding: 2px; overflow-y: auto; }
.language-card { position: relative; display: grid; width: 100%; min-height: 68px; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-align: start; font-weight: 500; transition: border-color .14s ease, background-color .14s ease, transform .14s var(--ease), box-shadow .14s ease; }
.language-card:hover { border-color: var(--accent); background: var(--surface); box-shadow: var(--shadow); transform: translateY(-1px); }
.language-card.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.language-card-names { display: grid; gap: 2px; min-width: 0; }
.language-card-names strong, .language-card-names small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.language-card-names strong { font-weight: 650; }
.language-card-names small { color: var(--muted); font-weight: 500; }
.language-family { color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .08em; line-height: 1.1; text-transform: uppercase; }
.language-flags { display: flex; align-items: center; gap: 12px; margin-block: -16px; font-size: 4rem; line-height: 1; white-space: nowrap; }
.language-check { display: grid; grid-column: 3; grid-row: 1; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-text); }
.variety-selector { display: grid; gap: 8px; margin-top: 6px; }
.variety-grid { display: flex; flex-wrap: wrap; max-width: 100%; gap: 8px; padding: 2px; }
.variety-card { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .9rem; font-weight: 550; text-align: start; }
.variety-card:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.variety-card.selected { padding-inline-end: 36px; border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.variety-card .language-check { position: absolute; top: 50%; inset-inline-end: 9px; transform: translateY(-50%); }
.variety-flag { font-size: 1.1rem; }
.character-rendering-selector, .transliteration-selector { display: grid; gap: 8px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--border); }
.character-rendering-grid, .transliteration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.character-rendering-card, .transliteration-card { position: relative; display: grid; width: 100%; gap: 2px; padding-block: 12px; padding-inline: 14px 34px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-align: start; font-weight: 500; justify-content: stretch; justify-items: start; }
.character-rendering-card { grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.character-rendering-card:hover, .transliteration-card:hover { border-color: var(--accent); background: var(--surface); }
.character-rendering-card.selected, .transliteration-card.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.character-sample { font-size: 1.3rem; font-weight: 700; }
.transliteration-name { font-weight: 650; }
.transliteration-sample { color: var(--muted); font-size: .8rem; }
.transliteration-description { margin-top: 4px; color: var(--text-secondary); font-size: .8rem; font-weight: 400; line-height: 1.45; }

.profile-gateway { width: min(760px, 100%); }
.profile-gateway h1 { max-width: 560px; }
.profile-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 26px 0 18px; }
.profile-choice { display: grid; width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-align: start; font-weight: 500; }
.profile-choice:hover { border-color: var(--accent); background: var(--surface); box-shadow: var(--shadow); }
.profile-choice-copy { display: grid; gap: 2px; min-width: 0; }
.profile-choice-copy strong { font-size: 1.05rem; }
.profile-choice-copy small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.profile-choice-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: var(--accent-soft); font-size: 1.5rem; }
.profile-choice-arrow { color: var(--muted); }
.profile-choice:hover .profile-choice-arrow { color: var(--accent); }
.gateway-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.profile-variety-screen { display: grid; gap: 18px; margin-top: 24px; }
.profile-variety-screen > button { justify-self: end; }

/* Landing page: a painted welcome for the chosen language behind frosted
   glass, one story moment to read and tap, then the features in detail, and a
   start button that docks at the bottom once the hero's button scrolls away. */
.landing { --landing-glass: color-mix(in srgb, var(--surface) 72%, transparent); --landing-glass-strong: color-mix(in srgb, var(--surface) 84%, transparent); --landing-glass-border: color-mix(in srgb, var(--border) 60%, transparent); --landing-ink-glass: rgba(12, 13, 17, .66); --landing-ink-border: rgba(255, 255, 255, .18); position: relative; padding-bottom: 140px; overflow-x: clip; background: transparent; }
.landing[data-palette="dark"] { --landing-glass: color-mix(in srgb, var(--surface) 64%, transparent); --landing-glass-strong: color-mix(in srgb, var(--surface) 78%, transparent); }
button.entry-logo { min-height: 0; padding: 4px 2px; border: 0; background: none; box-shadow: none; color: inherit; cursor: pointer; }
button.entry-logo:hover { background: none; opacity: .8; }
.landing-topbar { position: relative; z-index: 3; }
.landing-topbar .entry-link, .landing-topbar .entry-language-display { background: var(--landing-glass-strong); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.landing-theme-toggle { display: inline-grid; place-items: center; width: 44px; min-height: 44px; padding: 0; }
.landing-theme-toggle .landing-theme-icon { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .3s ease, transform .4s var(--ease); }
.landing-theme-toggle .landing-theme-icon[data-shown="false"] { opacity: 0; transform: rotate(-60deg) scale(.6); }
/* Keep entry actions visible on one row, reducing the language control first. */
.landing .landing-topbar {display:flex;gap:8px;}
.landing-topbar .entry-logo {flex:0 1 132px;min-width:56px;}
.landing-topbar .wordmark {width:100%;max-width:132px;}
.landing .landing-header-actions {display:flex;align-items:center;gap:8px;flex:none;}
.landing-topbar .landing-sign-in {min-height:44px;white-space:nowrap;}
.landing-topbar .landing-theme-toggle {flex:none;}
@media (max-width:800px) {
  .landing .landing-header-actions {gap:6px;}
  .landing-topbar .entry-language-display {justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;}
  .landing-topbar .entry-language-display>span,.landing-topbar .entry-language-display>svg:last-child {display:none;}
  .landing-topbar .landing-sign-in {max-width:140px;white-space:normal;overflow-wrap:anywhere;}
}
@media (max-width:380px) {
  .landing-topbar .landing-sign-in {max-width:100px;padding-inline:10px;}
}

/* The painting sits behind everything and drifts more slowly than the page.
   Its lower edge and inline-start side dissolve into the page colour so copy
   and the sections below always have calm ground. */
.landing-backdrop { position: fixed; z-index: -1; top: 0; inset-inline: 0; height: 100dvh; overflow: hidden; pointer-events: none; background: radial-gradient(70% 60% at 80% 0%, color-mix(in srgb, var(--flag-2, var(--muted)) 16%, transparent), transparent 70%), radial-gradient(60% 50% at 10% 30%, color-mix(in srgb, var(--flag-1, var(--muted)) 10%, transparent), transparent 70%); transition: background .8s ease; }
.landing-backdrop-art { position: absolute; inset: 0; transform: translate3d(0, var(--landing-parallax, 0px), 0); animation: landing-backdrop-in .9s ease-in-out both; will-change: transform, opacity; }
/* Switching day and night cross-fades the two paintings and eases the page colours. */
.landing, .landing-glass-panel, .landing-topbar .entry-link, .landing-topbar .entry-language-display, .landing-reel { transition: background-color .6s ease, color .6s ease, border-color .6s ease; }
.landing-backdrop-art > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
/* A flat 30% wash of the page colour calms the painting behind the glass,
   before its lower and inline-start edges dissolve fully. */
.landing-backdrop-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(color-mix(in srgb, var(--bg) 30%, transparent), color-mix(in srgb, var(--bg) 30%, transparent)), linear-gradient(180deg, color-mix(in srgb, var(--bg) 20%, transparent) 0%, transparent 18%, transparent 45%, color-mix(in srgb, var(--bg) 55%, transparent) 72%, var(--bg) 100%), linear-gradient(90deg, color-mix(in srgb, var(--bg) 42%, transparent) 0%, transparent 45%); }
@keyframes landing-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .landing-backdrop-art { animation: none; transform: none; } }

/* Shared glass: the app's Home tiles on light surfaces, the comic reader's ink
   scrims over art. Panels fall back to solid surfaces without backdrop support. */
.landing-glass-panel { position: relative; border: 1px solid var(--landing-glass-border); border-radius: 28px; background: var(--surface); box-shadow: 0 24px 70px rgb(0 0 0 / .12), 0 2px 8px rgb(0 0 0 / .05); }
.landing-glass { position: relative; border: 1px solid var(--landing-ink-border); border-radius: 18px; background: #16171b; color: #f5f5f6; box-shadow: 0 10px 36px rgb(0 0 0 / .32); }
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .landing-glass-panel { background: var(--landing-glass); -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25); }
  .landing-glass { background: var(--landing-ink-glass); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
}
@media (prefers-reduced-transparency: reduce) { .landing-glass-panel { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } .landing-glass { background: #16171b; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ----- Hero ----- */
/* One rounded card: the glass copy joins the story stage edge to edge. */
.landing-account-card {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;width:min(1240px,100%);margin:clamp(8px,4vh,40px) 0 24px;padding:24px 32px}
.landing-account-card > div {min-width:0;overflow-wrap:anywhere;flex:1}
.landing-account-card strong {font-size:1.1rem}
.landing-account-card + .landing-hero {margin-top:0}
.landing .landing-account-card button.welcome-start {flex:none;width:auto;min-width:0;margin:0;justify-content:center}
@media(max-width:600px) {.landing-account-card {margin:8px 0 20px;padding:20px}.landing .landing-account-card button.welcome-start {width:100%;justify-content:center}}
.landing-hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0; align-items: stretch; width: min(1240px, 100%); margin: clamp(8px, 4vh, 40px) 0 clamp(72px, 10vw, 128px); overflow: hidden; border: 1px solid var(--landing-glass-border); border-radius: 28px; box-shadow: 0 30px 80px rgb(0 0 0 / .32), 0 2px 10px rgb(0 0 0 / .12); }
.landing-hero-copy { --landing-copy-pad: clamp(24px, 3.6vw, 44px); display: grid; align-content: center; gap: 14px; padding: var(--landing-copy-pad); border: 0; border-radius: 0; box-shadow: none; }
.landing-hero h1 { margin: 0; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.landing-hero-language { display: inline-flex; align-items: baseline; gap: .22em; padding: 0 .12em; border-radius: .25em; background: linear-gradient(120deg, color-mix(in srgb, var(--flag-1, var(--accent)) 26%, transparent), color-mix(in srgb, var(--flag-2, var(--accent)) 22%, transparent)); box-shadow: inset 0 -.14em color-mix(in srgb, var(--flag-1, var(--accent)) 55%, transparent); animation: landing-swap .55s var(--ease); }
.landing-hero-flag { font-size: .78em; line-height: 1; }
.landing-hero .lede { margin: 0; font-size: 1.08rem; line-height: 1.6; }
.landing-pick { margin: 8px 0 -4px; color: var(--text-secondary); font-size: .92rem; font-weight: 650; }
/* The headline's language reel: three copies of the popular languages drift
   under a fixed highlight, fading out at both edges to suggest the rest. */
.landing-reel { --landing-reel-fade: 16%; position: relative; display: flex; align-items: center; width: auto; height: 1.12em; margin: .06em calc(-1 * var(--landing-copy-pad, 0px)); overflow: hidden; background: color-mix(in srgb, var(--text) 7%, transparent); cursor: pointer; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--landing-reel-fade), #000 calc(100% - var(--landing-reel-fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--landing-reel-fade), #000 calc(100% - var(--landing-reel-fade)), transparent); -webkit-user-select: none; user-select: none; }
/* The fixed window in the middle; the active language carries its own pill through it. */
.landing-reel-highlight { position: absolute; z-index: 0; top: 50%; left: 50%; width: 5em; height: .92em; border: 1px solid color-mix(in srgb, var(--text) 28%, transparent); border-radius: .26em; background: color-mix(in srgb, var(--text) 5%, transparent); transform: translate(-50%, -50%); transition: width .35s var(--ease); pointer-events: none; }
.landing-reel-track { position: absolute; z-index: 1; top: 0; left: 0; display: flex; align-items: center; height: 100%; will-change: transform; }
button.landing-reel-item { display: inline-flex; flex: none; align-items: center; gap: .22em; min-height: 0; margin: 0 .18em; padding: .02em .32em; border: 0; border-radius: .24em; background: transparent; box-shadow: none; color: var(--text); font: inherit; font-size: .7em; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; white-space: nowrap; opacity: .38; transform: scale(.82); transition: opacity .3s ease, transform .3s var(--ease), background-color .3s ease, box-shadow .3s ease, color .6s ease; cursor: pointer; }
button.landing-reel-item:hover { opacity: .75; }
button.landing-reel-item[data-active="true"] { opacity: 1; transform: none; background: linear-gradient(120deg, color-mix(in srgb, var(--flag-1, var(--accent)) 26%, transparent), color-mix(in srgb, var(--flag-2, var(--accent)) 22%, transparent)); box-shadow: inset 0 -.12em color-mix(in srgb, var(--flag-1, var(--accent)) 55%, transparent); }
button.landing-reel-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.landing-reel-flag {flex:none;font-size:.8em;line-height:1;}
.landing-varieties { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 8px 0 12px; }
button.landing-variety { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; min-height: 44px; padding: 5px; border: 1px solid transparent; border-radius: 12px; background: transparent; box-shadow: none; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background-color .3s ease, border-color .3s ease; }
button.landing-variety[data-previewed="true"] { background: color-mix(in srgb, var(--flag-1, var(--accent)) 18%, transparent); border-color: var(--landing-glass-border); }
button.landing-variety[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 -3px var(--accent); }
button.landing-variety:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
button.landing-variety:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.landing-choose { display:flex; justify-content:center; width:100%; min-height:44px; margin:0; padding:12px 24px; border:0; background:var(--accent-text); box-shadow:none; color:var(--accent); font-size:.95rem; font-weight:600; text-align:center; }
button.landing-choose:hover { background:color-mix(in srgb,var(--accent-text) 90%,var(--accent)); color:var(--accent-hover); }
button.landing-choose:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.landing-hero .button-row { display:grid; gap:10px; justify-items:stretch; width:100%; max-width:100%; margin-top:14px; }
.landing-hero .button-row :is(.welcome-start,.landing-choose,.landing-language-count) { width:100%; }
.landing button.welcome-start { width: 100%; min-width: min(320px, 100%); justify-content: center; padding: 16px 30px; border: 0; background: var(--accent); color: var(--accent-text); font-size: 1.05rem; box-shadow: 0 12px 32px -12px rgb(0 0 0 / .45); }
.landing button.welcome-start:hover:not(:disabled) { background: var(--accent-hover); }
.landing-language-count { width: min(320px, 100%); margin: 0; color: var(--text-secondary); font-size: .85rem; text-align: center; }
.landing-closing .landing-language-count { margin-top: 10px; }
@keyframes landing-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ----- The reading moment: a picture-book page with a sentence on an ink scrim ----- */
.landing-hero-stage { position: relative; display: grid; min-width: 0; }
.landing-stage { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(460px, 50vw, 680px); height: 100%; overflow: hidden; background: #1b1c21; isolation: isolate; }
.landing-stage-art { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; background: radial-gradient(80% 70% at 70% 20%, color-mix(in srgb, var(--flag-2, #6b7280) 45%, #1b1c21), #15161a 75%); }
.landing-stage-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; animation: landing-backdrop-in 1s ease both; }
.landing-stage-painting, .landing-feature-painting { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(12, 13, 17, .55); color: #f5f5f6; font-size: .88rem; font-weight: 600; }
.landing-stage-painting .status-pulse, .landing-stage-loading .status-pulse, .landing-feature-painting .status-pulse { flex: none; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
.landing-stage-top { position: absolute; z-index: 2; inset: 16px 16px auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; pointer-events: none; }
.landing-stage-title { display: grid; gap: 1px; max-width: 70%; padding: 10px 16px; animation: landing-swap .5s var(--ease); }
.landing-stage-title strong { font-size: 1rem; line-height: 1.35; }
.landing-stage-title small { color: #d5d7de; font-size: .78rem; }
.landing-stage-panel { z-index: 2; margin: 14px; padding: clamp(14px, 2.4vw, 22px) clamp(16px, 2.6vw, 26px); border-radius: 22px; }
.landing-sentence { display: flex; flex-wrap: wrap; align-items: flex-end; row-gap: 10px; margin: 0; color: #fff; font-family: var(--font-reading); font-size: clamp(1.35rem, 2.6vw, 2.05rem); line-height: 1.3; }
.landing-sentence:is(:lang(zh), :lang(ja), :lang(ko), :lang(yue), :lang(th), :lang(ar), :lang(fa), :lang(he), :lang(hi)) { font-family: var(--font-sans); }
.landing-token { white-space: pre; }
.landing-unit { display: inline-flex; align-items: flex-end; }
.landing-unit > .landing-token { align-self: flex-start; }
button.landing-word { display: flex; flex-direction: column; align-items: center; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: inherit; font: inherit; line-height: inherit; text-align: center; cursor: pointer; transition: background .18s ease; }
button.landing-word:hover, button.landing-word[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
button.landing-word:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.landing-word-text { display: block; padding: 1px .08em; }
.landing-word-reading { display: none; min-height: 1.3em; padding: 2px 4px 0; color: #c9ccd6; font-family: var(--font-sans); font-size: max(.72rem, .42em); line-height: 1.3; }
.landing-sentence[data-readings="true"] .landing-word-reading { display: block; }
.landing-translation { margin: 10px 0 0; color: #e4e6ec; font-size: .98rem; line-height: 1.5; }
.landing-stage-loading { display: flex; align-items: center; gap: 10px; margin: 0; color: #f5f5f6; font-weight: 600; }
.landing-stage-lines { display: block; height: 56px; margin-top: 14px; border-radius: 6px; background: linear-gradient(100deg, rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .08) 70%) 0 0 / 200% 100%; animation: shimmer 1.6s linear infinite; }
.landing-stage-error { margin: 8px 0 12px; color: #d5d7de; font-size: .86rem; }
.landing-stage .secondary { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; }
.landing-stage .secondary:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }

/* The word bubble: the reader's word menu, reduced to what a visitor needs. */
.landing-bubble { position: absolute; z-index: 4; left: 16px; bottom: 120px; display: grid; gap: 6px; width: min(300px, calc(100% - 32px)); padding: 14px 16px; border: 1px solid var(--landing-ink-border); border-radius: 18px; background: #202226; color: #f5f5f6; box-shadow: 0 18px 50px rgb(0 0 0 / .45); opacity: 0; transition: opacity .25s ease; }
/* Frosted over the scene, so the painting shows through the word help. */
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) { .landing-bubble { background: rgba(12, 13, 17, .5); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); } .landing-bubble::after { background: rgba(12, 13, 17, .5); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); } }
@media (prefers-reduced-transparency: reduce) { .landing-bubble, .landing-bubble::after { background: #202226; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.landing-bubble[data-placed="true"] { opacity: 1; animation: landing-bubble-in .3s var(--ease); }
.landing-bubble::after { content: ""; position: absolute; left: calc(var(--landing-bubble-arrow, 50%) - 8px); bottom: -8px; width: 16px; height: 16px; border-right: 1px solid var(--landing-ink-border); border-bottom: 1px solid var(--landing-ink-border); background: #202226; transform: rotate(45deg); }
.landing-bubble[data-side="below"]::after { top: -8px; bottom: auto; border: 0; border-left: 1px solid var(--landing-ink-border); border-top: 1px solid var(--landing-ink-border); }
@keyframes landing-bubble-in { from { transform: translateY(6px); } to { transform: none; } }
.landing-bubble-header { display: flex; align-items: center; gap: 10px; }
.landing-bubble-header strong { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-reading); font-size: 1.35rem; line-height: 1.2; }
.landing-bubble-header .tag { margin: 0; background: rgba(255, 255, 255, .14); color: #e4e6ec; }
.landing-bubble-header .icon-button { width: 30px; min-width: 30px; height: 30px; margin-inline-start: auto; padding: 4px; color: #d5d7de; }
.landing-bubble-header .icon-button:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.landing-bubble p { margin: 0; }
.landing-bubble-reading { color: #c9ccd6; font-size: .9rem; }
.landing-bubble-meaning { font-size: 1.05rem; font-weight: 650; }
.landing-bubble-base { display: flex; align-items: baseline; gap: 8px; color: #c9ccd6; font-size: .86rem; }
.landing-bubble-base strong { color: #fff; font-family: var(--font-reading); font-size: 1rem; }
.landing-bubble-note { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .14); color: #e4e6ec; font-size: .86rem; line-height: 1.45; }
.landing-bubble-note svg { flex: none; margin-top: 2px; color: #ffd166; }

/* ----- Features: each a painting with a glimpse of the real controls on glass ----- */
.landing-features { position: relative; z-index: 1; display: grid; gap: clamp(56px, 9vw, 112px); width: min(1180px, 100%); margin: 0; scroll-margin-top: 32px; }
.landing-feature { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0; align-items: stretch; overflow: hidden; border: 1px solid var(--landing-glass-border); border-radius: 28px; box-shadow: 0 30px 80px rgb(0 0 0 / .18); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.landing-feature:is(:hover, :focus-within) { transform: translateY(-6px); border-color: var(--hue); box-shadow: 0 36px 88px rgb(0 0 0 / .26), 0 0 0 1px var(--hue); }
.landing-feature:has(.landing-feature-action:focus-visible) { outline: 3px solid var(--hue); outline-offset: 5px; }
button.landing-feature-action { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border-radius: inherit; background: transparent; box-shadow: none; }
button.landing-feature-action:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--hue) 5%, transparent); outline: none; }
.landing-feature-cta { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: var(--text); font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.landing-feature-cta .shell-icon { flex: none; color: var(--hue); }
.landing-feature:is(:hover, :focus-within) .landing-feature-cta { opacity: 1; transform: none; }
.landing-feature-painting:has(button) { z-index: 3; }
@media (hover: none) { .landing-feature-cta { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .landing-feature, .landing-feature-cta { transition: none; } .landing-feature:is(:hover, :focus-within) { transform: none; } }
.landing-feature.flipped .landing-feature-copy { order: -1; }
/* One rounded shape: the painting and the glass copy share edges with no gap. */
.landing-feature-copy { display: grid; align-content: center; padding: clamp(24px, 3.4vw, 40px); border: 0; border-radius: 0; box-shadow: none; }
.landing-feature-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--hue) 18%, transparent); color: var(--hue); transform: rotate(-6deg); }
.landing-feature h2, .landing-closing h2 { margin: 14px 0 10px; font-size: clamp(1.55rem, 3.2vw, 2.2rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.landing-feature .lede { margin: 0; }
.landing-feature ul { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.landing-feature li { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); }
.landing-feature li svg { flex: none; color: var(--hue); }
.landing-feature-art { position: relative; display: grid; place-items: center; min-height: clamp(280px, 34vw, 420px); overflow: hidden; border: 0; border-radius: 0; background: radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--hue) 42%, transparent), transparent 55%), radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--hue) 30%, transparent), transparent 50%), color-mix(in srgb, var(--hue) 8%, var(--surface)); }
.landing-feature-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: landing-backdrop-in 1s ease both; }
.landing-feature-painting { position: absolute; top: 16px; left: 16px; }
.landing-feature-art[data-ready="false"] .landing-feature-painting { background: color-mix(in srgb, var(--hue) 40%, rgba(12, 13, 17, .6)); }
.landing-vignette { position: absolute; right: 18px; bottom: 18px; display: grid; gap: 10px; width: min(340px, calc(100% - 36px)); padding: 16px 18px; border-radius: 20px; }
.landing-feature.flipped .landing-vignette { right: auto; left: 18px; }
.landing-reading { margin: 0; color: #fff; font-family: var(--font-reading); font-size: 1.25rem; line-height: 1.6; }
.landing-chunks { display: flex; flex-wrap: wrap; gap: 8px; }
.landing-chunk { display: grid; gap: 1px; padding: 8px 12px; border-bottom: 3px solid var(--hue); border-radius: 12px; background: color-mix(in srgb, var(--hue) 28%, rgba(255, 255, 255, .06)); }
.landing-chunk strong { font-family: var(--font-reading); font-size: 1.15rem; }
.landing-chunk small { color: color-mix(in srgb, var(--hue) 55%, #fff); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.landing-chunk span { color: #e4e6ec; font-size: .82rem; }
.landing-grammar-note { display: flex; gap: 8px; margin: 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .14); color: #e4e6ec; font-size: .86rem; line-height: 1.45; }
.landing-grammar-note svg { flex: none; margin-top: 2px; color: #ffd166; }
.landing-stage-goal { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; font-size: .9rem; }
.landing-stage-goal small { grid-column: 1; color: #c9ccd6; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.landing-stage-goal strong { grid-column: 1; }
.landing-stage-goal span { grid-row: 1 / 3; grid-column: 2; align-self: center; color: #c9ccd6; }
.landing-stage-caption { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); font-family: var(--font-reading); font-size: 1.1rem; }
.landing-stage-help { display: inline-flex; align-items: center; gap: 6px; justify-self: end; padding: 6px 10px; border: 1px solid var(--landing-ink-border); border-radius: 999px; font-size: .74rem; font-weight: 650; }
.landing-phone-status { display: inline-flex; align-items: center; gap: 8px; justify-self: center; margin: 0; padding: 6px 12px; border: 1px solid var(--landing-ink-border); border-radius: 999px; font-size: .8rem; font-weight: 600; }
.landing-phone-status span { width: 8px; height: 8px; border-radius: 50%; background: var(--hue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hue) 30%, transparent); }
.landing-vignette > small { justify-self: center; color: #c9ccd6; font-size: .72rem; }
.landing-phone-caption { margin: 0; font-size: 1.05rem; font-weight: 500; line-height: 1.4; text-align: center; }
.landing-phone-controls { display: flex; align-items: center; justify-content: center; gap: 14px; }
.landing-phone-controls span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.landing-phone-controls span.mic { width: 54px; height: 54px; background: var(--hue); color: #fff; }
.landing-spoken { color: #c9ccd6; }
.landing-speaking { padding: 1px 3px; border-radius: 5px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 -3px #7cc4ff; }
.landing-player { display: flex; align-items: center; gap: 14px; }
.landing-player .welcome-bubble-audio { display: grid; flex: none; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #fff; color: #16171b; }
.landing-player .tag { margin: 0; background: rgba(255, 255, 255, .14); color: #e4e6ec; }
.landing-wave { display: flex; flex: 1; align-items: center; gap: 4px; height: 28px; }
.landing-wave span { width: 4px; height: 40%; border-radius: 4px; background: var(--hue); animation: landing-wave 1.1s ease-in-out infinite; }
.landing-wave span:nth-child(2n) { animation-delay: .15s; }
.landing-wave span:nth-child(3n) { animation-delay: .3s; }
@keyframes landing-wave { 50% { height: 100%; } }
.landing-flashcard { display: grid; justify-items: center; gap: 6px; padding: 10px 0 4px; text-align: center; }
.landing-flashcard strong { font-family: var(--font-reading); font-size: 1.7rem; }
.landing-flashcard > span { color: #c9ccd6; }
.landing-flashcard-actions { display: flex; gap: 12px; margin-top: 8px; }
.landing-flashcard-actions span { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--landing-ink-border); border-radius: 50%; color: #e4e6ec; }
.landing-flashcard-actions span.good { border-color: var(--hue); background: var(--hue); color: #fff; }
.landing-goal { display: flex; align-items: center; justify-content: center; gap: 28px; }
.landing-ring { display: grid; width: 120px; height: 120px; place-items: center; align-content: center; border-radius: 50%; background: radial-gradient(closest-side, #202226 78%, transparent 79%), conic-gradient(var(--hue) calc(var(--progress) * 1%), rgba(255, 255, 255, .14) 0); }
.landing-ring strong { font-size: 1.8rem; line-height: 1; }
.landing-ring small { color: #c9ccd6; }
.landing-streak { display: grid; justify-items: center; gap: 4px; color: var(--hue); }
.landing-streak strong { font-size: 1.5rem; }

/* ----- Closing, catalog, dock ----- */
.landing-closing { position: relative; z-index: 1; display: grid; justify-items: center; width: min(760px, 100%); margin-top: clamp(56px, 9vw, 100px); padding: clamp(32px, 6vw, 56px); border-radius: 32px; background: linear-gradient(135deg, color-mix(in srgb, var(--flag-1, #ff7a59) 18%, transparent), color-mix(in srgb, var(--flag-2, #ec4899) 14%, transparent) 45%, color-mix(in srgb, var(--flag-3, #0ea5e9) 16%, transparent)), var(--landing-glass); text-align: center; }
.landing-closing .lede { margin: 0 0 24px; }
/* Extend the existing action over the card while keeping one keyboard target. */
.landing-closing { cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.landing-closing .welcome-start { position: static; transform: none; }
.landing-closing .welcome-start::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 32px; }
.landing-closing:hover { border-color: var(--border-strong); box-shadow: 0 28px 76px rgb(0 0 0 / .19), 0 3px 12px rgb(0 0 0 / .08); transform: translateY(-3px); }
.landing-closing:has(.welcome-start:focus-visible) { outline: 3px solid var(--focus); outline-offset: 5px; }
.landing-closing .welcome-start:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .landing-closing { transition: none; } .landing-closing:hover { transform: none; } }
.reader-popup.landing-language-list ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.landing-language-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.landing-language-list li:has(> .marketing-language-choice) { padding: 0; border: 0; }
button.marketing-language-choice { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: none; color: var(--text); text-align: start; }
button.marketing-language-choice:hover { border-color: var(--border-strong); background: var(--surface-hover); }
button.marketing-language-choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.landing-language-list li > span:last-child, .marketing-language-choice > span:last-child { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-width: 0; }
.landing-language-list strong, .landing-language-list small { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.landing-language-list small { color: var(--muted); white-space: normal; }
.landing-language-flags { flex: none; min-width: 2.4em; font-size: 1.1rem; letter-spacing: .1em; }
.landing-dock { position: fixed; z-index: 20; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; opacity: 0; pointer-events: none; transform: translate(-50%, 160%); transition: transform .45s cubic-bezier(.2, .9, .3, 1.15), opacity .3s ease; }
.landing-dock button.welcome-start { box-shadow: 0 14px 36px rgb(0 0 0 / .22); }
.landing[data-docked] .landing-dock { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
@media (max-width: 960px) {
  .landing-hero { grid-template-columns: 1fr; margin-top: 0; }
  .landing-hero-stage { order: -1; }
  /* Leave a visible stretch of artwork above the compact reading demonstration. */
  .landing-stage { min-height: clamp(440px, 100vw, 640px); padding-top: 180px; }
  .landing-stage-top { display: none; }
  .landing-stage-panel { padding: clamp(11.2px, 1.92vw, 17.6px) clamp(12.8px, 2.08vw, 20.8px); border-radius: 18px; }
  .landing-sentence { font-size: clamp(1.08rem, 2.08vw, 1.64rem); row-gap: 8px; }
  .landing-word-reading { font-size: max(.576rem, .42em); }
  .landing-translation { margin-top: 8px; font-size: .784rem; }
  .landing-bubble { width: min(240px, calc(100% - 32px)); gap: 5px; padding: 11px 13px; border-radius: 15px; }
  .landing-bubble-header { gap: 8px; }
  .landing-bubble-header strong { font-size: 1.08rem; }
  .landing-bubble-header .tag { padding: 2px 7px; font-size: .592rem; }
  .landing-bubble-header .icon-button { width: 24px; min-width: 24px; height: 24px; padding: 3px; }
  .landing-bubble-reading { font-size: .72rem; }
  .landing-bubble-meaning { font-size: .84rem; }
  .landing-bubble-note { gap: 6px; padding-top: 6px; font-size: .688rem; }
  .landing-stage :is(.landing-sentence-audio, .landing-bubble) .speech-button { width: 32px; height: 32px; min-width: 32px; }
  .landing-stage :is(.landing-sentence-audio, .landing-bubble) .speech-button .shell-icon { width: .8rem; height: .8rem; }
  .landing-feature { grid-template-columns: 1fr; }
  .landing-feature.flipped .landing-feature-copy { order: 0; }
}
@media (max-width: 600px) {
  .landing-hero-copy { padding: 22px 18px; }
  .landing button.welcome-start { width: 100%; }
  .landing-language-count { width: 100%; }
  .landing-stage-panel { margin: 10px; padding: 11px; border-radius: 15px; }
  .landing-vignette { right: 10px; bottom: 10px; width: calc(100% - 20px); padding: 12px 14px; }
  .landing-feature.flipped .landing-vignette { left: 10px; }
  .landing-dock { right: 16px; left: 16px; transform: translateY(160%); }
  .landing[data-docked] .landing-dock { transform: none; }
  .landing-dock button.welcome-start { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .landing-dock { transition: opacity .2s ease; } .landing-wave span, .landing-hero-language, .landing-reel-item, .landing-stage-title, .landing-stage-art > img, .landing-feature-art > img { animation: none; } }

/* ---------- App shell ---------- */
.app-shell { --header-height: calc(60px + env(safe-area-inset-top)); --sidebar-width: calc(256px + env(safe-area-inset-left) + env(safe-area-inset-right)); --content-inset-start: var(--sidebar-width); display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100dvh; padding-top: var(--header-height); }
.app-shell.sidebar-collapsed { --sidebar-width: calc(76px + env(safe-area-inset-left) + env(safe-area-inset-right)); }
.app-header { position: fixed; z-index: 86; inset: 0 0 auto; height: var(--header-height); display: flex; align-items: center; gap: 12px; padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--sidebar) 66%, transparent); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); }
.header-navigation { display: flex; flex: none; align-items: center; gap: 8px; }
.header-logo { display: inline-flex; align-items: center; flex: none; color: var(--text); border-radius: 4px; }
.header-logo:hover { color: var(--text); opacity: .8; }
.header-logo-home { gap: 8px; border-radius: 10px; }
.header-logo-home:hover { background: var(--surface-subtle); opacity: 1; }
.header-logo-home:hover .header-home { color: inherit; }
.header-logo[data-home-repeat-area="true"] { padding-inline-end: 48px; }
.header-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.header-screen-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.15rem; font-weight: 750; letter-spacing: -.025em; }
.header-home { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; color: var(--text-secondary); }
.app-shell button.shell-icon-button { display: inline-grid; place-items: center; flex: none; width: 40px; min-width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-secondary); }
.app-shell button.shell-icon-button:hover { background: var(--surface-subtle); color: var(--text); }
.header-home .shell-icon { fill: currentColor; }
.sidebar { position: fixed; z-index: 79; top: var(--header-height); bottom: 0; inset-inline-start: 0; width: var(--sidebar-width); display: flex; flex-direction: column; gap: 6px; padding: 16px max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-inline-end: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--sidebar) 66%, transparent); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); transition: width .2s var(--ease), transform .25s var(--ease); }
.app-header { transition: background-color .2s ease; }
:root[data-scrolled="true"] .app-header { background: color-mix(in srgb, var(--sidebar) 94%, transparent); }
@media (prefers-reduced-transparency: reduce) { .app-header, .sidebar { background: var(--sidebar); backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* Splash art occupies the trailing 65% of the window behind every screen;
   its left and lower edges dissolve into the page colour. */
.app-splash { position: fixed; z-index: -1; top: 0; inset-inline: 0; height: 100dvh; overflow: hidden; pointer-events: none; }
/* A faint wash remains behind loading art; Home also exposes download progress. */
.app-splash::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 60% at 85% 0%, color-mix(in srgb, var(--flag-2, var(--muted)) 12%, transparent), transparent 70%); opacity: .9; transition: opacity .6s ease; }
.app-splash[data-pending="true"]:not([data-ready="true"])::before { animation: home-splash-breathe 4.5s ease-in-out infinite; }
@keyframes home-splash-breathe { 50% { opacity: .55; } }
.app-splash-images { position: absolute; inset: 0; }
.app-splash-art { position: absolute; top: 0; inset-inline-end: 0; width: 65%; opacity: 0; transition: opacity 1s ease; }
.app-splash-art[data-visible="true"] { opacity: 1; }
/* Home alone moves the artwork and its edge fades together, behind the tiles. */
.app-splash[data-home-parallax="true"] .app-splash-art { transform: translate3d(0, var(--home-splash-offset, 0px), 0); transition: opacity 1s ease, transform .1s ease-out; }
@media (prefers-reduced-motion: reduce) { .app-splash[data-home-parallax="true"] .app-splash-art { transform: none; transition: none; } }
.app-splash-art > img { display: block; width: 100%; height: auto; }
.app-splash-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 20%, color-mix(in srgb, var(--bg) 45%, transparent) 40%, transparent 60%), linear-gradient(180deg, transparent 0%, transparent 18%, color-mix(in srgb, var(--bg) 30%, transparent) 45%, color-mix(in srgb, var(--bg) 72%, transparent) 74%, var(--bg) 100%); }
@media (prefers-reduced-motion: reduce) { .app-splash::before { animation: none; } .app-splash-art { transition: none; } }
@media (max-width: 760px) { .app-splash-art::after { background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 30%, color-mix(in srgb, var(--bg) 25%, transparent) 70%, transparent), linear-gradient(180deg, transparent 0%, transparent 25%, color-mix(in srgb, var(--bg) 60%, transparent) 65%, var(--bg) 100%); } }
.sidebar-context { margin-bottom: 10px; }
.sidebar-scrim { display: none; }
.sidebar-copy { min-width: 0; }
.sidebar-collapsed .sidebar-copy { display: none; }
.sidebar-collapsed .sidebar { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
.sidebar-nav { display: grid; gap: 2px; min-height: 0; overflow-y: auto; padding: 3px; margin: -3px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text-secondary); text-align: start; font-size: .95rem; font-weight: 600; transition: background-color .14s ease, color .14s ease; }
.nav-item .shell-icon { color: var(--muted); transition: color .14s ease; }
.sidebar-collapsed .nav-item { justify-content: center; padding-inline: 0; }
.nav-item:hover { background: var(--surface-subtle); color: var(--text); }
.nav-item:hover .shell-icon { color: var(--text-secondary); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-ink); }
.nav-item.active .shell-icon { color: var(--accent); }
.app-shell > .workspace { grid-column: 2; min-width: 0; }

.profile-menu { position: relative; }
.profile-menu.is-open { z-index: 40; }
.language-menu-backdrop { position: fixed; inset: 0; z-index: 28; }
.profile-menu.is-open > .profile-menu-trigger { z-index: 31; }
.profile-menu-trigger { position: relative; display: grid; width: 100%; gap: 3px; padding-block: 10px; padding-inline: 12px 34px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-align: start; font-weight: 500; box-shadow: var(--shadow-sm); justify-content: stretch; }
.profile-menu-trigger:hover { border-color: var(--border-strong); background: var(--surface); color: var(--text); }
.profile-menu-trigger small { overflow: hidden; color: var(--muted); font-size: .72rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-label, .source-switcher label { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.profile-menu .chevron { position: absolute; top: 50%; inset-inline-end: 11px; color: var(--muted); transform: translateY(-50%); }
.sidebar .learning-profile-trigger { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.profile-menu-copy { display: grid; gap: 1px; }
.profile-menu-copy strong { font-size: 1rem; font-weight: 680; }
.learning-profile-flag { display: grid; flex: none; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: var(--surface-subtle); font-size: 1.35rem; line-height: 1; }
.sidebar-collapsed .learning-profile-trigger { justify-content: center; width: 52px; min-height: 52px; padding: 6px; border-color: transparent; background: transparent; box-shadow: none; }
.profile-menu-popover { position: absolute; z-index: 32; top: calc(100% + 8px); inset-inline-start: 0; width: min(340px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 100px)); overflow-y: auto; padding: 8px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-raised); animation: popover-in .16s var(--ease) both; }
@keyframes popover-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.sidebar .profile-menu-popover { width: min(320px, calc(100vw - var(--sidebar-width) - 24px)); max-height: calc(100dvh - var(--header-height) - 40px); }
.sidebar-collapsed .sidebar .profile-menu .profile-menu-popover { top: 0; inset-inline-start: calc(100% + 12px); }
.profile-menu-list { display: grid; gap: 2px; margin: 0 0 6px; }
.profile-quick { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: start; font-weight: 500; }
.profile-quick:hover { background: var(--surface-subtle); }
.profile-quick.active { background: var(--accent-soft); color: var(--text); }
.profile-quick small { color: var(--muted); }
.menu-check { display: grid; color: var(--accent); }
.profile-menu-actions { display: grid; gap: 2px; padding-top: 6px; border-top: 1px solid var(--border); }
.menu-item { display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: 11px; min-height: 42px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-size: .92rem; font-weight: 550; text-align: start; text-decoration: none; }
.menu-item .shell-icon { color: var(--muted); }
.menu-item:hover { background: var(--surface-subtle); color: var(--text); }
.menu-item.danger, .menu-item.danger .shell-icon { color: var(--danger); }
.menu-item.danger:hover { background: var(--danger-soft); }
.language-menu-choice { display: flex; align-items: center; gap: 10px; min-width: 0; }
.language-menu-flag { flex: none; font-size: 1.25rem; }
.language-menu-names { display: grid; gap: 1px; min-width: 0; }
.language-menu-names strong { font-size: .92rem; font-weight: 650; }
.language-menu-names small { color: var(--muted); font-size: .76rem; }
.account-menu { flex: none; margin: 0; }
.app-header .header-daily-xp { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; margin-inline-start: auto; min-height: 40px; padding: 6px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--text-secondary); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-header .header-daily-xp:hover { background: var(--surface-subtle); color: var(--text); }
.app-header .header-daily-xp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.header-xp-ring { flex: none; color: var(--xp); }
.header-xp-track { stroke: var(--border-strong); }
.header-xp-fill { stroke: currentColor; transition: stroke-dasharray 350ms ease; }
.header-xp-goal, .header-xp-unit { color: var(--muted); font-weight: 450; }
@media (max-width: 380px) { .header-xp-goal { display: none; } }
@media (prefers-reduced-motion: reduce) { .header-xp-fill { transition: none; } }
.account-chip { display: flex; align-items: center; justify-content: center; width: 40px; min-height: 40px; padding: 2px; border: 0; border-radius: 50%; background: transparent; box-shadow: none; }
.account-chip:hover { background: var(--surface-subtle); }
.account-menu > .profile-menu-popover { inset-inline-end: 0; inset-inline-start: auto; max-height: min(720px, calc(100dvh - var(--header-height) - 16px)); }
/* The filtered header contains fixed descendants; extend dismissal over the page. */
.app-header .language-menu-backdrop { height: 100dvh; }
.account-menu-heading { display: flex; align-items: center; gap: 12px; padding: 8px 8px 12px; border-radius: var(--radius); color: var(--text); text-decoration: none; }
.account-menu-heading:hover { background: var(--surface-subtle); }
.account-menu-heading:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-menu-heading div { display: grid; min-width: 0; }
.account-menu-heading small { color: var(--muted); }
.profile-subscription-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.profile-subscription-summary > div { display: grid; gap: 4px; }
.profile-subscription-summary .field-label { color: var(--muted); font-size: .82rem; }
.profile-subscription-summary strong { font-size: 1.15rem; }
.account-menu .token-budget-badge { margin: 8px 0; }
.account-menu .source-switcher { margin: 0 0 4px; }
.account-menu .source-switcher > .profile-menu-trigger { box-shadow: none; }
.avatar { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: linear-gradient(140deg, var(--avatar-start), var(--avatar-end)); color: var(--avatar-text); font-size: .95rem; font-weight: 750; text-transform: uppercase; }
.source-switcher { display: grid; gap: 4px; }
.context-error { color: var(--danger); line-height: 1.35; }

/* Compact screen titles are managed once by shell/screen_header.js. */
.screen-docked-header { position:fixed; z-index:82; top:var(--header-height); inset-inline:var(--content-inset-start,0px) 0; min-height:48px; color:var(--text); border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--sidebar) 94%,transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease,visibility 0s .22s; }
.screen-docked-header[data-docked="true"] { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.screen-docked-inner { display:flex; align-items:center; gap:14px; width:min(1120px,100%); min-height:48px; margin-inline:auto; padding:6px clamp(20px,4.5vw,64px); }
.screen-docked-title { flex:1; min-width:0; margin:0; font-size:1.05rem; font-weight:720; line-height:1.3; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transform-origin:left top; }
.screen-docked-back { display:inline-flex; align-items:center; gap:5px; flex:0 1 auto; min-width:0; max-width:38%; min-height:36px; padding:5px 7px; margin-inline-start:-7px; border-radius:7px; background:transparent; color:var(--text-secondary); font-size:.85rem; font-weight:550; text-decoration:none; box-shadow:none; transform:translateY(-6px); transition:background-color .15s,color .15s,transform .22s ease; }
.screen-docked-back[hidden] { display:none; }
.screen-docked-back > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.screen-docked-back .shell-icon { flex:none; }
.screen-docked-header[data-docked="true"] .screen-docked-back { transform:none; }
.screen-docked-back:hover { color:var(--text); background:var(--surface-subtle); }
.screen-docked-back:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
[data-screen-docked-source="true"] { visibility:hidden !important; pointer-events:none; }
[dir="rtl"] .screen-docked-title { transform-origin:right top; }
[dir="rtl"] .screen-docked-back svg { transform:scaleX(-1); }
@media(prefers-reduced-motion:reduce) { .screen-docked-header,.screen-docked-back { transition:none; } }
@media(prefers-reduced-transparency:reduce) { .screen-docked-header { background:var(--sidebar); backdrop-filter:none; -webkit-backdrop-filter:none; } }

/* ---------- Page scaffolding ---------- */
.workspace { --workspace-gutter: clamp(20px, 4.5vw, 64px); --workspace-top: 44px; width: min(1120px, 100%); margin: 0 auto; padding: var(--workspace-top) max(var(--workspace-gutter), env(safe-area-inset-right)) max(88px, env(safe-area-inset-bottom)) max(var(--workspace-gutter), env(safe-area-inset-left)); }
.page-header { max-width: 760px; margin-bottom: 28px; }
.page-header .lede { margin-bottom: 0; }
.page-back { margin: 0 0 18px -10px; }
.surface { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.surface + .surface { margin-top: 18px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-heading h2 { margin: 0; }
.dashboard-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(340px, 1.2fr); gap: 18px; align-items: start; }
.empty-state { display: grid; justify-items: center; padding: 44px 16px; color: var(--muted); text-align: center; }
.empty-state h3 { margin: 0 0 6px; color: var(--text); font-size: 1.1rem; }
.empty-state p { max-width: 420px; margin: 0; line-height: 1.55; }
.empty-glyph { position: relative; display: grid; width: 64px; height: 64px; margin-bottom: 16px; place-items: center; border-radius: 20px; background: var(--accent-soft); color: var(--accent); }
.empty-bubble { position: absolute; top: -6px; right: -8px; width: 20px; height: 20px; border-radius: 50% 50% 50% 0; background: var(--marigold); }
.book-cover { position: relative; display: grid; flex: none; width: 64px; height: 84px; place-items: center; overflow: hidden; border-radius: 6px 12px 12px 6px; background: var(--cover-bg); color: var(--cover-ink); box-shadow: inset 4px 0 0 rgba(0, 0, 0, .08), var(--shadow-sm); }
.book-cover::after { position: absolute; top: 9px; right: 9px; width: 11px; height: 11px; border-radius: 50% 50% 50% 0; background: var(--cover-dot); content: ""; }
.book-cover-initial { font-family: var(--font-reading); font-size: 1.9rem; font-weight: 600; line-height: 1; }
.book-cover.small { width: 44px; height: 56px; border-radius: 5px 9px 9px 5px; }
.book-cover.small::after { top: 6px; right: 6px; width: 8px; height: 8px; }
.book-cover.small .book-cover-initial { font-size: 1.3rem; }
.cover-0 { --cover-bg: var(--accent-soft); --cover-ink: var(--accent-ink); --cover-dot: var(--marigold); }
.cover-1 { --cover-bg: var(--marigold-soft); --cover-ink: var(--marigold-ink); --cover-dot: var(--accent); }
.cover-2 { --cover-bg: var(--coral-soft); --cover-ink: color-mix(in srgb, var(--coral) 70%, var(--text)); --cover-dot: var(--marigold); }
.cover-3 { --cover-bg: var(--sky-soft); --cover-ink: color-mix(in srgb, var(--sky) 70%, var(--text)); --cover-dot: var(--coral); }

/* ---------- Home ---------- */
/* Home tints derive from the selected variety's flag colours (--flag-1..3 are
   set inline on .home-dashboard); the XP accent is reserved for progress. */
.home-dashboard { --home-hero-height: clamp(200px, 24vw, 272px); --home-tint-soft: color-mix(in srgb, var(--flag-1) 14%, var(--surface)); --home-tint-ink: color-mix(in srgb, var(--flag-1) 62%, var(--text)); position: relative; }
/* Home spans the whole content area so the hero art and flag wash reach both
   edges; a three-column grid keeps everything else in the usual centred column. */
.workspace:has(.home-dashboard) { width: 100%; max-width: none; padding-inline: 0; }
/* The centre column takes at least two thirds of the available width; the
   historical 1120px cap only applies on narrower windows. */
.home-dashboard { display: grid; grid-template-columns: minmax(max(var(--workspace-gutter, 24px), env(safe-area-inset-left)), 1fr) minmax(0, max(calc(1120px - 2 * var(--workspace-gutter, 24px)), 66.666%)) minmax(max(var(--workspace-gutter, 24px), env(safe-area-inset-right)), 1fr); }
.home-dashboard > :not(.home-flag-wash, .home-hero) { grid-column: 2; min-width: 0; }
/* A large, faded wash of the flag's colours spans the top of Home behind the
   hero's lower edge, the goal card and the first rows, then dissolves. */
.home-flag-wash { position: fixed; z-index: -1; top: var(--header-height, 60px); inset-inline: var(--content-inset-start, 0px) 0; height: calc(100dvh - var(--header-height, 60px)); pointer-events: none; background: radial-gradient(62% 48% at 12% 36%, color-mix(in srgb, var(--flag-1) 34%, transparent), transparent 72%), radial-gradient(58% 44% at 56% 52%, color-mix(in srgb, var(--flag-2) 30%, transparent), transparent 72%), radial-gradient(52% 46% at 96% 30%, color-mix(in srgb, var(--flag-3) 26%, transparent), transparent 72%); -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) 16%, #000 30%, #000 46%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) 16%, #000 30%, #000 46%, transparent 100%); }
.home-dashboard > :not(.home-flag-wash) { position: relative; }
/* The hero bleeds to the workspace edges; generated splash art sits behind the
   right side and dissolves into whatever lies beneath along its left and bottom. */
.home-hero { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-content: end; min-height: var(--home-hero-height); margin: calc(-1 * var(--workspace-top, 44px)) 0 0; padding: 42px 0 78px; }
.home-hero-copy { position: relative; z-index: 2; grid-column: 2; display: grid; gap: 6px; max-width: min(100%, 620px); }
/* The open language menu must rise above the goal card that overlaps the hero. */
.home-hero-copy:has(.profile-menu.is-open) { z-index: 41; }
.home-hero-eyebrow { margin: 0 0 4px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.home-hero h1 { display: flex; align-items: center; gap: 20px; margin: 0; font-size: clamp(2.5rem, 4.5vw, 3.5rem); line-height: 1.15; }
.home-flag { flex: none; font-size: 1.15em; line-height: 1; letter-spacing: 0; }
/* Draw-time blend: a horizontal mask on the layer and a vertical mask on the
   image fade the art's left and bottom edges into the page and flag wash. */
.home-splash-menu { position: absolute; z-index: 3; top: 14px; right: 16px; display:flex; align-items:center; gap:6px; }
.home-splash-loading {display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--muted);}
.home-splash-loading .word-illustration-spinner {width:12px;height:12px;border-width:2px;}
.home-hero .home-splash-regenerate { width: 32px; min-width: 32px; height: 32px; border-radius: 50%; color: var(--muted); opacity: .45; transition: opacity .2s ease, background-color .15s ease, color .15s ease; }
.home-hero:hover .home-splash-regenerate, .home-hero .home-splash-regenerate:focus-visible, .home-splash-menu.is-open .home-splash-regenerate { opacity: 1; }
.home-splash-menu > .profile-menu-popover, .home-suggestion-menu > .profile-menu-popover { inset-inline-end: 0; inset-inline-start: auto; width: 250px; }
.home-hero .home-splash-regenerate:hover { background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text); }
.home-hero .home-splash-regenerate[data-pending="true"] { opacity: .5; cursor: default; }

.home-hero .home-splash-regenerate[data-error="true"] { color: var(--danger); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .home-hero .home-splash-regenerate .shell-icon { animation: none; } }
@media (max-width: 760px) {
  .home-dashboard { --home-hero-height: 184px; }
  .home-hero { padding-top: 26px; padding-bottom: 64px; }
}
.search-field { display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 14px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); color: var(--muted); box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease; }
.search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); }
.search-field input, .search-field input:focus { flex: 1; min-width: 0; padding: 8px 0; border: 0; outline: 0; background: transparent; box-shadow: none; }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-field button { flex: none; min-height: 38px; padding: 8px 16px; }
.search-field.large { padding: 7px 7px 7px 18px; border-radius: 16px; }
.search-field.large input { padding: 10px 0; font-size: 1.08rem; }
.search-field.large button { min-height: 44px; padding: 10px 22px; border-radius: 11px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.home-grid.has-sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
.home-main { display: grid; gap: 28px; min-width: 0; }
.home-side { display: grid; gap: 18px; position: sticky; top: calc(var(--header-height) + 24px); }
.home-side .surface + .surface { margin-top: 0; }
.continue-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; min-height: 140px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--surface) 55%, var(--accent-soft)); color: var(--text); text-decoration: none; box-shadow: var(--shadow); transition: transform .16s var(--ease), box-shadow .16s ease, border-color .16s ease; }
.continue-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.continue-card.is-loading { background: linear-gradient(100deg, var(--surface) 30%, var(--surface-subtle) 50%, var(--surface) 70%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.continue-copy { display: grid; gap: 6px; min-width: 0; }
.continue-title { overflow: hidden; font-size: 1.35rem; font-weight: 700; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.continue-copy small { color: var(--muted); font-size: .88rem; }
.continue-copy .meter { max-width: 260px; margin-top: 4px; }
.continue-action { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 11px; background: var(--accent); color: var(--accent-text); font-weight: 650; }
.continue-card:hover .continue-action { background: var(--accent-hover); }
.first-story { position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 30px; align-items: center; overflow: hidden; padding: 30px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--surface) 40%, var(--accent-soft)); box-shadow: var(--shadow); }
.first-story h2 { margin: 8px 0 8px; font-size: 1.6rem; letter-spacing: -.02em; }
.first-story p:not(.eyebrow) { max-width: 520px; margin-bottom: 20px; color: var(--text-secondary); line-height: 1.6; }
.first-story-art { position: relative; height: 150px; }
.first-story-page { position: absolute; inset: 14px 30px 0 10px; border-radius: 8px 18px 18px 8px; background: var(--surface); box-shadow: var(--shadow-raised), inset 6px 0 0 var(--accent-soft); background-image: linear-gradient(var(--border) 2px, transparent 2px); background-size: 100% 18px; background-position: 0 30px; background-clip: content-box; padding: 24px 22px 18px 26px; }
.first-story-bubble { position: absolute; top: 0; right: 4px; width: 54px; height: 54px; border-radius: 50% 50% 50% 0; background: var(--marigold); box-shadow: var(--shadow); animation: gentle-float 2.4s ease-in-out infinite; }
.home-recent { display: grid; gap: 0; }
.home-recent .section-heading { margin-bottom: 10px; }
.home-resume .section-heading h2, .home-recent .section-heading h2, .home-activities h2, .home-side h2 { margin: 0; font-size: 1.05rem; }
.home-recent-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.home-recent-item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .14s ease, box-shadow .14s ease; }
.home-recent-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.home-recent-copy { display: grid; gap: 2px; min-width: 0; }
.home-recent-copy strong { overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.home-recent-copy small { color: var(--muted); font-size: .8rem; }
.home-activities { display: grid; gap: 12px; }
.activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.activity-tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .14s ease, box-shadow .14s ease, transform .14s var(--ease); }
.activity-tile:hover { border-color: var(--tone); box-shadow: var(--shadow); transform: translateY(-1px); }
.activity-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; background: var(--tone-soft); color: var(--tone); }
.activity-copy { display: grid; gap: 4px; min-width: 0; }
.activity-copy strong { font-size: 1rem; font-weight: 650; }
.activity-copy small { color: var(--text-secondary); font-size: .87rem; line-height: 1.45; }
.activity-arrow { align-self: center; color: var(--border-strong); transition: color .14s ease, transform .14s var(--ease); }
.activity-tile:hover .activity-arrow { color: var(--tone); transform: translateX(2px); }
.tone-jade { --tone: var(--accent); --tone-soft: var(--accent-soft); }
.tone-marigold { --tone: var(--marigold-ink); --tone-soft: var(--marigold-soft); }
.tone-coral { --tone: var(--coral); --tone-soft: var(--coral-soft); }
.tone-sky { --tone: var(--sky); --tone-soft: var(--sky-soft); }
.getting-started h2 { margin-bottom: 4px; }
.getting-started > p.muted { margin: 0 0 10px; font-size: .86rem; }
.checklist { display: grid; gap: 2px; margin: 16px 0 0; padding: 0; list-style: none; }
.checklist li { display: flex; align-items: center; gap: 11px; padding: 8px 0; color: var(--text); font-size: .92rem; }
.checklist li.done { color: var(--muted); }
.checklist li.done span:last-child { text-decoration: line-through; text-decoration-color: var(--border-strong); }
.checklist-mark { display: grid; flex: none; width: 22px; height: 22px; place-items: center; border: 2px solid var(--border-strong); border-radius: 50%; }
.checklist li.done .checklist-mark { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.checklist-link { color: var(--text); font-weight: 600; text-decoration: none; }
.checklist-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Dictionary ---------- */
.dictionary-search { display: grid; gap: 4px; }
.search-bar { display: block; }
.dictionary-context { margin: 12px 0 0; }
details.dictionary-context summary { min-height: 32px; }
.dictionary-context label { margin-top: 10px; }
.dictionary-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.search-results { display: grid; gap: 10px; margin-top: 18px; }
.search-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.search-results-heading p { margin: 0; font-size: .86rem; }
.search-result-with-audio { position: relative; display: flex; align-items: center; gap: 8px; padding: 14px 14px 14px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: border-color .14s ease, box-shadow .14s ease; }
.search-result-with-audio:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.search-result-with-audio > .search-result { flex: 1; min-width: 0; }
.search-result { display: grid; width: 100%; gap: 4px; padding: 0 4px; border: 0; border-radius: 0; background: transparent; color: inherit; text-align: start; }
/* Stretch the entry link over the card, with the independent audio control above it. */
a.search-result { text-decoration: none; }
a.search-result::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
a.search-result:focus-visible { outline: none; }
a.search-result:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 3px; }
.search-result-with-audio > .speech-control { position: relative; z-index: 1; }
.search-result strong { font-size: 1.12rem; }
.search-result b { color: var(--accent-ink); font-weight: 650; }
.search-result small { color: var(--muted); font-size: .88rem; }
.definition-controls { margin-top: 20px; }
.definition-context { margin-bottom: 0; }
.definition-context-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.meaning-section-title { margin: 24px 0 8px; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.entry-card { margin-top: 18px; }
.entry-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.entry-title h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -.02em; }
.metadata { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 22px; color: var(--muted); }
.metadata span + span::before { content: "·"; margin-right: 8px; }
.meaning { padding: 20px 0; border-top: 1px solid var(--border); }
.meaning h4 { margin: 0 0 10px; font-size: 1.1rem; line-height: 1.45; }
blockquote { margin: 14px 0; padding: 12px 16px; border-left: 3px solid var(--marigold); border-radius: 0 10px 10px 0; background: var(--surface-subtle); line-height: 1.55; }
blockquote small { display: block; margin-top: 5px; color: var(--muted); }
.word-list, .document-list { display: grid; }
.word-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-top: 1px solid var(--border); }
.word-row:first-child { border-top: 0; }
.word-row p { margin: 3px 0; color: var(--text-secondary); }
.word-row small { display: block; color: var(--muted); }
.variety-notes { display: grid; gap: 10px; margin: 18px 0 24px; padding: 17px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-subtle); }
.variety-notes h3 { margin: 0 0 3px; }
.variety-note { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.variety-note:first-of-type { padding-top: 0; border-top: 0; }
.variety-note p { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 9px; margin: 0; color: var(--text-secondary); font-size: .88rem; }
.variety-note p span { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Reading library and flows ---------- */
.reader-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; margin-bottom: 34px; }
.reader-action-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color .14s ease, box-shadow .14s ease, transform .14s var(--ease); }
.reader-action-card:hover { border-color: var(--tone, var(--accent)); box-shadow: var(--shadow); transform: translateY(-1px); }
.reader-action-card.generate { --tone: var(--accent); --tone-soft: var(--accent-soft); background: linear-gradient(135deg, var(--surface) 50%, var(--accent-soft)); }
.reader-action-card.import { --tone: var(--marigold-ink); --tone-soft: var(--marigold-soft); }
.reader-action-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; background: var(--tone-soft, var(--accent-soft)); color: var(--tone, var(--accent)); }
.reader-action-copy { display: grid; gap: 4px; min-width: 0; }
.reader-action-copy strong { font-size: 1.12rem; font-weight: 680; }
.reader-action-copy small { color: var(--text-secondary); font-size: .9rem; line-height: 1.45; }
.reader-action-arrow { color: var(--border-strong); transition: color .14s ease, transform .14s var(--ease); }
.reader-action-card:hover .reader-action-arrow { color: var(--tone, var(--accent)); transform: translateX(2px); }
.reader-library .section-heading h2 { font-size: 1.15rem; }
.document-list { gap: 10px; }
.document-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 12px 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); transition: border-color .14s ease, box-shadow .14s ease; }
.document-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.document-open { display: flex; flex: 1; align-items: center; gap: 14px; min-width: 0; padding: 0; border-radius: 0; background: transparent; color: inherit; text-align: start; }
.document-copy { display: grid; gap: 3px; min-width: 0; }
.document-copy strong { overflow: hidden; color: var(--text); font-size: 1.02rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.document-copy small { color: var(--muted); font-size: .84rem; }
.document-copy .meter { width: min(220px, 100%); margin-top: 4px; }
.reader-creation-popup .reader-flow-card {max-width:none;border:0;border-radius:0;box-shadow:none;padding:0;background:transparent}
.reader-creation-description {margin:0 0 24px;font-size:.95rem}
.reader-creation-popup .reader-popup-body {padding:24px}
@media(max-width:600px) {.reader-creation-popup .reader-popup-body {padding:16px}.reader-creation-popup .level-picker {grid-template-columns:repeat(2,minmax(0,1fr))}}
.reader-flow-card { max-width: 780px; }
.reader-flow-card > form, .compose form { display: grid; gap: 22px; margin-top: 0; }
.generation-context { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.generation-context > div { display: grid; gap: 1px; }
.generation-context small { color: var(--muted); font-size: .78rem; font-weight: 600; }
.generation-context strong { color: var(--text); font-size: 1.05rem; }
.generation-flag { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; background: var(--surface-subtle); font-size: 1.5rem; }
.document-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.document-type-option { position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 12px; min-width: 0; min-height: 116px; margin: 0; padding: 18px 8px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: border-color .14s ease, background-color .14s ease; }
.document-type-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.document-type-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.document-type-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.document-type-option:has(input:disabled) { opacity: .55; cursor: wait; }
.document-type-option:hover:not(:has(input:disabled)) { border-color: var(--accent); }
.document-type-label { display: flex; align-items: end; justify-content: center; min-height: 2.5em; font-size: clamp(.76rem, 2.5vw, .9rem); font-weight: 600; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.document-type-check { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-text); pointer-events: none; }
.idea-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.level-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.level-option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font-weight: 500; cursor: pointer; transition: border-color .14s ease, background-color .14s ease; }
.level-option:hover { border-color: var(--accent); }
.level-option.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.level-option input { position: absolute; opacity: 0; pointer-events: none; }
.level-option:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--focus); }
.level-code { display: grid; width: max-content; min-width:40px; padding-inline:6px; box-sizing:border-box; white-space:nowrap; height: 40px; place-items: center; border-radius: 11px; background: var(--surface-subtle); color: var(--text-secondary); font-size: .88rem; font-weight: 750; }
.level-option.selected .level-code { background: var(--accent); color: var(--accent-text); }
.level-copy { display: grid; gap: 1px; min-width: 0; }
.level-copy strong { font-size: .92rem; font-weight: 650; }
.level-copy small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.generation-status { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: var(--accent-ink); font-weight: 650; }
.status-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--marigold); box-shadow: 0 0 0 0 var(--marigold-soft); animation: status-pulse 1.4s infinite; }
@keyframes status-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marigold) 60%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- Settings and profiles ---------- */
.settings-layout { display: grid; gap: 18px; max-width: 860px; }
.progress-profile-banner { display:flex; align-items:center; gap:16px; padding:18px 22px; margin:20px 0 28px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.progress-profile-flag { display:grid; place-items:center; flex:none; width:52px; height:52px; border-radius:15px; background:var(--accent-soft); font-size:1.9rem; }
.progress-profile-banner > div { display:grid; gap:3px; min-width:0; }
.progress-profile-banner strong { font-size:1.3rem; }
.progress-profile-banner .muted { font-size:.82rem; }
.progress-profile-goal { margin-inline-start:auto; flex:0 0 190px; }
@media (max-width:550px) { .progress-profile-banner { flex-wrap:wrap; padding:16px; gap:12px; } .progress-profile-goal { margin-inline-start:0; flex-basis:100%; } }
.settings-layout .surface + .surface { margin-top: 0; }
.settings-card > form, .settings-language-fields { display: grid; gap: 20px; margin-top: 20px; }
.settings-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.settings-heading h2 { margin: 0; font-size: 1.12rem; }
.settings-heading p { margin: 3px 0 0; font-size: .88rem; }
.settings-heading-copy { flex: 1; min-width: 0; }
.settings-restore-defaults { flex: none; align-self: flex-start; width: 44px; height: 44px; margin: -3px -3px 0 0; color: var(--text-secondary); }
.settings-icon { display: grid; flex: none; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.advanced-settings > summary { list-style: none; cursor: pointer; }
.advanced-settings > summary::-webkit-details-marker { display: none; }
.advanced-settings > summary .settings-heading { margin-bottom: 0; }
.advanced-settings[open] > summary .settings-heading { margin-bottom: 8px; }
.advanced-settings .settings-icon { background: var(--surface-subtle); color: var(--muted); }
.settings-select-label { display: grid; max-width: 420px; gap: 7px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.theme-option { position: relative; display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px; align-items: start; justify-items: stretch; padding: 10px 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-align: start; font-weight: 500; }
.theme-option:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.theme-option.selected { border-color: var(--accent); background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-option-copy { display: grid; gap: 2px; padding: 0 2px; }
.theme-option-copy strong { font-size: .92rem; }
.theme-option-copy small { color: var(--muted); font-size: .76rem; font-weight: 450; line-height: 1.35; }
.theme-selected { position: absolute; top: 16px; right: 16px; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 2px var(--surface); }
.theme-preview { display: grid; width: 100%; height: 64px; grid-template-columns: 26% 1fr; overflow: hidden; border: 1px solid rgba(128, 128, 128, .3); border-radius: 9px; }
.theme-preview-sidebar { background: var(--preview-sidebar); }
.theme-preview-content { display: grid; align-content: center; gap: 6px; padding: 9px; background: var(--preview-bg); }
.theme-preview-line { width: 64%; height: 5px; border-radius: 99px; background: var(--preview-accent); }
.theme-preview-card { height: 20px; border: 1px solid var(--preview-border); border-radius: 5px; background: var(--preview-surface); }
.theme-preview-light { --preview-bg: #f5f5f5; --preview-sidebar: #fafafa; --preview-surface: #fff; --preview-border: #e2e2e2; --preview-accent: #333333; --preview-text: #202020; --preview-muted: #707070; }
.theme-preview-dark { --preview-bg: #121212; --preview-sidebar: #161616; --preview-surface: #242424; --preview-border: #484848; --preview-accent: #d6d6d6; --preview-text: #ededed; --preview-muted: #969696; }
.theme-preview-calm { --preview-bg: #f1eadc; --preview-sidebar: #ece4d4; --preview-surface: #fbf7ee; --preview-border: #ddd2bf; --preview-accent: #805b3f; --preview-text: #2e2a22; --preview-muted: #847b6b; }
.theme-preview-tokyo-night { --preview-bg: #15161f; --preview-sidebar: #13141c; --preview-surface: #232638; --preview-border: #434a6c; --preview-accent: #7aa2f7; --preview-text: #c8d0f5; --preview-muted: #7f88ad; }
.theme-preview-system { --preview-bg: linear-gradient(90deg, #f5f5f5 50%, #121212 50%); --preview-sidebar: #fafafa; --preview-surface: linear-gradient(90deg, #fff 50%, #242424 50%); --preview-border: rgba(128, 128, 128, .45); --preview-accent: linear-gradient(90deg, #333333 50%, #d6d6d6 50%); }
.theme-preview-system .theme-preview-content { background: var(--preview-bg); }
.theme-preview-system .theme-preview-line, .theme-preview-system .theme-preview-card { width: 100%; }
.theme-preview-system .theme-preview-card { background: var(--preview-surface); }
.account-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.language-profile-flag { display: grid; flex: none; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--surface-subtle); font-size: 1.35rem; }
.settings-add-language { border-style: dashed; }
.settings-fluent-varieties { display: grid; gap: 10px; }
.settings-languages-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.settings-spoken-language { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-subtle); }
.settings-spoken-language.is-explanation { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface-subtle)); }
.settings-language-header { display: flex; align-items: flex-start; gap: 4px; }
button.settings-language-disclosure { flex: 1; min-width: 0; padding: 4px 2px; min-height: 40px; gap: 9px; color: var(--text); background: transparent; text-align: start; }
button.settings-language-disclosure:hover:not(:disabled) { background: var(--surface-hover); }
button.settings-language-disclosure:disabled { opacity: 1; }
.settings-language-flag { flex: none; font-size: 1.25rem; line-height: 1.2; }
.settings-language-name { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.settings-language-name strong { font-size: .95rem; }
.settings-explanation-badge { color: var(--accent); font-size: .65rem; line-height: 1.3; font-weight: 650; }
.settings-language-chevron { flex: none; display: flex; margin-inline-start: auto; color: var(--muted); transition: transform .15s ease; }
.settings-language-chevron.expanded { transform: rotate(180deg); }
.settings-language-actions { flex: none; display: flex; align-items: center; gap: 1px; }
.settings-language-actions .icon-button { width: 38px; min-width: 38px; height: 40px; }
.settings-language-actions .settings-language-remove:hover { color: var(--danger); background: var(--danger-soft); }
.settings-language-summary { margin: 5px 2px 0; color: var(--muted); font-size: .78rem; line-height: 1.5; overflow-wrap: anywhere; }
.settings-language-options { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.settings-language-options > .field-label { margin-bottom: 8px; }
.selected-variety-summary { width: fit-content; margin: 0; padding: 10px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-subtle); color: var(--text-secondary); font-weight: 650; }
.add-profile-screen { max-width: 920px; }
.add-profile-screen .form-actions { margin-top: 18px; }
.experience-prompt { display: grid; gap: 4px; }
.experience-prompt p { margin: 0; font-weight: 400; }
.profile-form-actions { justify-content: space-between; }
.flashcard-learning-settings { display: grid; gap: 16px; }
.flashcard-learning-settings p.muted { margin: 0; }


/* ---------- Word readings ---------- */
.word-transliteration { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .45em; color: var(--text-secondary); font-size: .86rem; font-weight: 400; line-height: 1.45; }
.word-transliteration-text { font-family: inherit; }
.word-transliteration-readings { display: inline-flex; flex-direction: column; gap: 2px; }
.word-transliteration-context, .word-transliteration-base { display: inline-flex; align-items: baseline; gap: .4em; }
.word-reading-label { color: var(--muted); font-size: .78em; min-width: 4.5em; }
.word-reading-note { color: var(--muted); cursor: help; font-size: .8em; }
.word-spelling-and-reading { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.reader-word-gloss-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.reader-word-gloss { font-size: .9rem; font-weight: 650; overflow-wrap: anywhere; }
.entry > .word-transliteration { margin: -4px 0 10px; font-size: 1rem; }

/* ---------- Reader ---------- */
.reader-view { max-width: 920px; margin: 0 auto; }
.reader-text-editor > .ghost { margin-bottom: 18px; }
.reader-source-input { min-height: 320px; resize: vertical; line-height: 1.65; }
.reader-edit-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.reader-view .section-heading { align-items: flex-start; }
.reading-page { --reading-padding: clamp(22px, 5vw, 56px); margin-top: 22px; padding: 8px var(--reading-padding) var(--reading-padding); border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
/* Serif type suits Latin, Greek and Cyrillic pages; other scripts read best in their system sans. */
.progressive-reading:is(:lang(zh), :lang(ja), :lang(ko), :lang(yue), :lang(nan), :lang(hak), :lang(wuu), :lang(th), :lang(lo), :lang(km), :lang(my), :lang(ar), :lang(fa), :lang(ur), :lang(he), :lang(hi), :lang(bn), :lang(ta), :lang(te), :lang(ml), :lang(kn), :lang(gu), :lang(pa), :lang(si), :lang(am), :lang(ka), :lang(hy), :lang(bo)) { font-family: var(--font-sans); }
.reader-line { margin: 0; white-space: pre-wrap; font-family: inherit; font-size: 1.2rem; line-height: 1.9; }
.reader-word { display: inline; margin: 0; padding: 0; border-radius: 2px; background: transparent; color: inherit; font: inherit; font-weight: inherit; }
.reader-word, .grammar-tag { --grammar-color: #84909e; }
.reader-word { --word-progress-color: color-mix(in srgb, var(--muted) 45%, transparent); position: relative; border-radius: 4px; padding-bottom: 2px; background: color-mix(in srgb, var(--word-progress-color) var(--reader-progress-fill, 0%), transparent); }
/* Inset each word's progress line without spacing out its characters. Cloning
   the decoration keeps the inset on wrapped fragments, above any pronunciation. */
.reader-word-source {
    --progress-line-color: color-mix(in srgb, var(--word-progress-underline, transparent) var(--reader-progress-line, 100%), transparent);
    background-image: linear-gradient(var(--progress-line-color), var(--progress-line-color));
    background-size: calc(100% - .16em) 2px;
    background-position: center bottom;
    background-repeat: no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.reader-word[data-associated="true"] { background: color-mix(in srgb, var(--word-progress-color) 20%, transparent); }
.reader-word:hover, .reader-word:focus-visible { background: color-mix(in srgb, var(--word-progress-color) 35%, transparent); color: var(--text); }
.reader-word[aria-expanded="true"] { background: color-mix(in srgb, var(--word-progress-color) 55%, transparent); }
.reader-word:focus-visible { outline: 2px solid var(--word-progress-color); outline-offset: 1px; }
.grammar-noun { --grammar-color: #3299cf; }
.grammar-proper-noun { --grammar-color: #566bd9; }
.grammar-verb { --grammar-color: #d96470; }
.grammar-auxiliary { --grammar-color: #ce779f; }
.grammar-pronoun { --grammar-color: #a57bd9; }
.grammar-adjective { --grammar-color: #4aad85; }
.grammar-adverb { --grammar-color: #ca9c38; }
.grammar-particle { --grammar-color: #c08041; }
.grammar-determiner { --grammar-color: #819754; }
.grammar-article { --grammar-color: #a2a444; }
.grammar-preposition { --grammar-color: #49a5ad; }
.grammar-postposition { --grammar-color: #5a9d91; }
.grammar-conjunction { --grammar-color: #a58469; }
.grammar-interjection { --grammar-color: #d58856; }
.grammar-numeral { --grammar-color: #9a8ad3; }
.grammar-tag { background: color-mix(in srgb, var(--grammar-color) 18%, var(--surface)); color: color-mix(in srgb, var(--grammar-color) 55%, var(--text)); }
.reader-preparation { margin: 18px 0; padding: 20px 22px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(135deg, var(--surface), var(--accent-soft)); color: var(--text); }
.reader-preparation-heading { display: block; margin-bottom: 16px; font-size: .95rem; }
.reader-preparation-steps { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }
.reader-preparation-steps li { position: relative; display: flex; align-items: center; gap: 11px; min-height: 38px; font-size: .9rem; color: var(--muted); }
.reader-preparation-steps li:not(:last-child)::after { content: ''; position: absolute; width: 1px; height: 14px; background: var(--border-strong); inset-inline-start: 11.5px; top: 31px; }
.reader-preparation-circle { position: relative; display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border: 1.5px solid var(--border-strong); border-radius: 50%; box-sizing: border-box; background: var(--surface); font-weight: 700; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.reader-preparation-steps li[data-state="running"] { color: var(--text); font-weight: 650; }
.reader-preparation-steps li[data-state="running"] .reader-preparation-circle { border-color: var(--accent-soft); background: var(--accent-soft); }
.reader-preparation-steps li[data-state="running"] .reader-preparation-circle::after { content: ''; position: absolute; inset: -1.5px; border: 2px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent); border-radius: 50%; animation: preparation-spin 1s linear infinite; }
.reader-preparation-steps li[data-state="complete"] { color: var(--text-secondary); }
.reader-preparation-steps li[data-state="complete"] .reader-preparation-circle { background: var(--success); border-color: var(--success); color: white; }
.reader-preparation-steps li[data-state="failed"] .reader-preparation-circle { border-color: var(--warning); color: var(--warning-ink); background: var(--warning-soft); }
.reader-preparation-steps small { margin-inline-start: auto; color: var(--muted); font-size: .75rem; text-align: end; }
.reader-preparation-note { margin: 12px 0 0; color: var(--text-secondary); font-size: .8rem; }
.progressive-reading[data-finishing-analysis="true"] .chunk-progress { display: none; }
.reader-preparation .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes preparation-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .reader-preparation-circle { transition: none; } .reader-preparation-steps li[data-state="running"] .reader-preparation-circle::after { animation: none; } }
.reader-prep-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 14px; padding: 14px 16px; border-radius: 14px; background: var(--warning-soft); color: var(--warning-ink); }
.reader-prep-callout p { flex: 1; min-width: 220px; margin: 0; font-size: .92rem; line-height: 1.5; }
.reader-prep-callout strong { color: var(--text); }
.reader-prep-icon { display: grid; flex: none; }
.reader-prep-callout button { padding: 8px 14px; }
.progressive-reading { position: relative; font-family: var(--font-reading); }
.progressive-reading .reader-line { display: inline; }
.reader-synopsis-pending { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-subtle); color: var(--text); }
.reader-synopsis-pending .word-illustration-spinner { width: 22px; height: 22px; border-width: 3px; }
.reader-synopsis-pending strong { font-size: .95rem; font-weight: 600; }
.chunk-progress { display: inline-block; width: .22em; height: .22em; margin-inline: .3em; vertical-align: middle; border-radius: 50%; background: var(--accent); animation: reader-loading-pulse 1.4s ease-in-out infinite; }
@keyframes reader-loading-pulse { 0%, 100% { opacity: .4; transform: scale(.75); } 50% { opacity: 1; transform: scale(1); } }
.reader-word-bubble { position: fixed; z-index: 65; width: min(390px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow: auto; padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-raised); color: var(--text); font-family: var(--font-sans); font-size: .9rem; line-height: 1.5; }
.reader-word-bubble header { display: flex; align-items: center; gap: 8px; }
.reader-word-bubble header > strong { font-size: 1.15rem; }
.reader-word-bubble header .ghost { margin-left: auto; }
.reader-word-bubble p { margin: 10px 0; }
.reader-word-bubble.grammar-tooltip { pointer-events: none; width: min(330px, calc(100vw - 24px)); }
.reader-word-bubble .reader-word-header { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; align-items: start; }
.reader-word-bubble.reader-word-detail-bubble { padding: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.reader-word-fixed { container: word-bubble-header / inline-size; position: sticky; top: 0; z-index: 2; display: flow-root; padding: 18px 18px 0; background: var(--surface); }
.reader-word-fixed > .reader-word-header { padding-bottom: 10px; }
.reader-word-fixed::after { content: ''; position: absolute; inset: auto 18px 0; height: 1px; background: var(--border); opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.reader-word-detail-bubble[data-scrolled="true"] > .reader-word-fixed::after { opacity: 1; }
/* Keep an opaque fallback in WebViews without backdrop filtering. The sticky
   header adds blur without stacking a second opaque tint. Tint the
   surface rather than the whole bubble so text and controls stay crisp. */
@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
  .reader-word-bubble[data-frosted="true"] { background: color-mix(in srgb, var(--surface) var(--reader-bubble-opacity, 92%), transparent); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
  .reader-word-bubble[data-frosted="true"] > .reader-word-fixed { background: transparent; }
  .reader-word-bubble[data-frosted="true"][data-scrolled="true"] > .reader-word-fixed { background: transparent; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
@media (prefers-reduced-transparency: reduce) {
  .reader-word-bubble[data-frosted="true"], .reader-word-bubble[data-frosted="true"] > .reader-word-fixed,
  .reader-word-bubble[data-frosted="true"][data-scrolled="true"] > .reader-word-fixed { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.reader-word-body { padding: 0 18px 18px; }
.reader-word-fixed .word-learning-progress, .reader-word-body .word-model-options { border: 0; }
/* Word help opens compact. Grid tracks animate the actual content height so
   the existing floating observers can keep either reading surface on screen. */
.word-bubble-details-inner {min-width:0;}
.reader-word-title > .reader-character-title { display: inline-flex; flex-direction: column; gap: 4px; }
.reader-character-word { display: flex; flex-wrap: wrap; align-items: start; gap: 5px; }
.reader-character-cell { display: inline-grid; justify-items: center; align-items: start; gap: 3px; }
button.reader-subword-button.reader-title-character { display: grid; place-items: center; min-width: 38px; min-height: 40px; padding: 3px 7px; font-family: var(--font-reading); font-weight: 650; font-size: 1.55rem; line-height: 1.2; color: var(--text); }
.reader-title-literal { display: grid; place-items: center; min-height: 40px; padding-block: 3px; font-family: var(--font-reading); font-size: 1.55rem; font-weight: 650; line-height: 1.2; }
.reader-character-reading { max-width: 100%; color: var(--text-secondary); font-family: var(--font-sans); font-size: .76rem; font-weight: 400; line-height: 1.35; overflow-wrap: anywhere; text-align: center; }
.reader-character-shared-reading { text-align: start; }
.reader-word-title:has(.reader-character-title) { align-items: start; }
.reader-word-title:has(.reader-character-title) > .grammar-tag { margin-top: 6px; }
@media (max-height: 500px) {
  .word-info-bubble > .reader-word-fixed { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .word-bubble-details, .word-bubble-details[data-expanded="true"], .word-bubble-toggle .shell-icon { transition: none; }
}
.reader-word-help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 12px 4px; }
.reader-word-help-actions > button, .reader-word-help-actions .word-practice-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 7px 12px; font-size: .85rem; }
.reader-word-explanation { margin-top: 12px; }
.reader-explanation-placeholder { display: grid; gap: 12px; padding: 14px; border-radius: 12px; background: var(--surface-subtle); color: var(--muted); font-size: .85rem; }
.reader-explanation-skeleton { display: grid; gap: 8px; }
.reader-explanation-skeleton > span { height: 7px; border-radius: 4px; background: linear-gradient(100deg, var(--border) 30%, color-mix(in srgb, var(--border) 45%, white) 50%, var(--border) 70%) 0 0 / 200% 100%; animation: shimmer 1.6s linear infinite; }
.reader-explanation-skeleton > span:last-child { width: 65%; }
@media (prefers-reduced-motion: reduce) { .reader-explanation-skeleton > span { animation: none; background: var(--border); } }
.reader-word-description { margin-inline-start: calc(1.8rem + 8px); display: grid; gap: 6px; }
.word-practice-button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; font-size: .8rem; white-space: nowrap; }
.word-practice-menu { display: grid; gap: 4px; }
.word-practice-menu > button { display: flex; align-items: center; gap: 12px; padding: 12px; text-align: start; border-radius: 12px; }
.word-practice-menu > button > span { display: grid; gap: 3px; }
.word-practice-menu small { color: var(--muted); font-weight: 400; }
.word-practice-popup { width: min(540px, calc(100vw - 24px)); }
.word-practice-heading { text-align: center; padding: 4px 0 18px; }
.word-practice-heading > div { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.word-practice-heading > .word-practice-title { gap: 6px; margin-top: 0; }
.word-practice-title .icon-button { width: 32px; height: 32px; padding: 6px; }
.word-practice-heading strong { font-size: clamp(2rem, 7vw, 3rem); overflow-wrap: anywhere; }
.word-practice-heading .icon-button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.word-practice-heading p { margin: 4px 0 0; }
.word-practice-popup .writing-canvas-wrap { width: min(300px, 100%); }
.word-practice-speaking { display: grid; gap: 14px; }
.word-practice-speaking > p { margin: 0; text-align: center; }
.word-practice-speaking audio { width: 100%; }
.word-practice-feedback { padding: 16px; margin: 12px 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-subtle); animation: popover-in .18s var(--ease); }
.word-practice-feedback > strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.word-practice-feedback p { margin: 8px 0 0; }
.reader-word-body > button.secondary { margin: 8px 8px 0 0; }
@media (prefers-reduced-motion: reduce) { .reader-word-fixed::after { transition: none; } }
.reader-word-header > .speech-control { display: contents; }
.reader-word-header > .speech-control > .speech-button { grid-column: 1; grid-row: 1; margin: 2px 0 0; }
.reader-word-header > .speech-control > :not(.speech-button) { grid-column: 1 / -1; justify-self: start; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.reader-word-heading { grid-column: 2; grid-row: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.reader-word-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; max-width: 100%; }
.reader-word-title > strong { min-width: 0; overflow-wrap: anywhere; font-size: 1.65rem; line-height: 1.25; }
.reader-word-title > .tag { flex: none; margin: 0; }
.reader-word-header-actions { grid-column: 3; grid-row: 1; display: flex; flex: none; align-items: center; gap: 4px; }
.reader-word-header-actions > .copy-diagnostic:not(:empty) { position: absolute; inset-inline-end: 18px; top: 56px; }
.reader-word-header-actions > .icon-button { width: 32px; min-width: 32px; height: 34px; padding: 0; }
.reader-word-header-actions > .copy-diagnostic:empty { display: none; }
.reader-word-description > .reader-word-gloss-row, .guided-word-menu > .reader-word-gloss-row { flex-wrap: nowrap; align-items: center; }
.reader-word-gloss-row > .reader-word-gloss { flex: 1; min-width: 0; }
.reader-word-gloss-row > .reader-definition-expand { margin-inline-start: auto; }
/* Keep corner actions fixed while giving long titles the full row on phones. */
@container word-bubble-header (max-width: 300px) {
  .reader-word-bubble .reader-word-header { grid-template-columns: max-content minmax(0, 1fr); }
  .reader-word-header > .speech-control > .speech-button, .reader-word-heading { grid-row: 2; }
  .reader-word-header-actions { grid-column: 2; justify-self: end; }
}
.reader-word { touch-action: manipulation; }
.reader-word-form { flex-basis: 100%; min-width: 0; display: grid; gap: 4px; margin-top: 2px; }
.reader-word-base { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .85rem; }
.reader-word-base > .muted { font-size: .7rem; }
.reader-word-base .spoken-text { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.reader-word-base > .word-transliteration { margin: 0; }
.reader-word-form-info { display: inline-flex; align-items: center; }
.reader-word-form-info > .muted { font-size: .7rem; }
button.reader-word-form-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 0; border: 0; background: transparent; color: var(--muted); font-size: .7rem; font-weight: 400; white-space: normal; }
button.reader-word-form-trigger:is(:hover, :focus-visible, [aria-expanded="true"]) { color: var(--accent); background: transparent; }
.reader-word-form-trigger > svg { flex: none; }
.reader-form-keywords { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.reader-form-keywords > li { padding: 2px 7px; border-radius: 6px; background: var(--surface-subtle); color: var(--text-secondary); font-size: .7rem; line-height: 1.5; overflow-wrap: anywhere; }
.reader-word-header > .ghost { grid-column: 3; grid-row: 1; }
.reader-subwords { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
button.reader-subword-button { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 34px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-subtle); color: var(--text-secondary); font-size: .95rem; font-weight: 600; }
button.reader-subword-button:hover, button.reader-subword-button[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.reader-word-bubble.reader-subword-popup { z-index: 90; width: min(310px, calc(100vw - 24px)); padding: 14px; border-radius: 13px; }
.reader-subword-popup header > strong { min-width: 0; overflow-wrap: anywhere; font-size: 1.35rem; }
.reader-subword-popup header > [data-subword-close] { margin-inline-start: auto; flex: none; }
.reader-subword-popup .reader-word-gloss-row { margin-top: 7px; }
.reader-subword-popup p:last-child { margin-bottom: 0; }
.reader-subword-lemma { color: var(--text-secondary); }
.word-learning-progress { margin: 8px 0; padding: 7px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.word-progress-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.word-progress-row.with-word-lists { grid-template-columns: minmax(0, 1fr) auto auto; }
.word-progress-label { font-size: .73rem; font-weight: 500; }
.word-commonness { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-secondary); font-size: .75rem; font-weight: 500; }
.word-commonness-bars { display: flex; align-items: end; gap: 2px; flex: none; height: 14px; }
.word-commonness-bars > span { width: 3px; border-radius: 1px; background: var(--border); }
.word-commonness-bars > span.filled { background: var(--accent); }
button.word-progress-disclosure { display: flex; gap: 6px; min-width: 0; padding: 5px 0; background: transparent; color: var(--text); text-align: start; font-size: .8rem; font-weight: 650; }
.word-progress-disclosure .shell-icon { flex: none; transform: rotate(-90deg); transition: transform .15s ease; }
.word-progress-disclosure[aria-expanded="true"] .shell-icon { transform: none; }
button.word-progress-chip { display: grid; place-items: center; min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; font-size: .9rem; font-weight: 750; font-variant-numeric: tabular-nums; }
button.word-progress-chip.rated, .skills-score { background: hsl(var(--level-hue) 78% 48% / .3); color: var(--text); }
button.word-progress-chip.unrated { background: var(--surface-subtle); color: var(--muted); font-size: .7rem; font-weight: 500; }
button.word-progress-chip:hover:not(:disabled), button.word-progress-chip[aria-expanded="true"] { border-color: var(--text-secondary); }
.word-progress-picker { display: none; position: fixed; inset: auto; z-index: 110; width: max-content; max-width: calc(100vw - 24px); margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-raised); font-family: var(--font-sans); }
.word-progress-picker { max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; }
.word-progress-picker > .word-progress-disclosure { min-height: 32px; border-top: 1px solid var(--border); padding-top: 8px; font-size: .73rem; font-weight: 500; }
.word-progress-picker:popover-open, .word-progress-picker.open { display: grid; gap: 6px; animation: popover-in .12s var(--ease); }
.word-progress-levels { display: flex; gap: 4px; }
button.word-progress-level { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0 0 2px; border: 1px solid transparent; border-radius: 7px; background: hsl(var(--level-hue) 35% 50% / .08); color: var(--muted); font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; }
button.word-progress-level:hover:not(:disabled) { background: hsl(var(--level-hue) 65% 48% / .18); color: var(--text); }
button.word-progress-level.current { background: hsl(var(--level-hue) 78% 48% / .3); color: var(--text); font-weight: 800; }
button.word-progress-level.current::after { content: ""; position: absolute; bottom: 4px; left: 27%; right: 27%; height: 2px; border-radius: 1px; background: currentColor; }
button.word-progress-level:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.word-progress-unrated { justify-content: center; width: 100%; padding: 5px 8px; border: 1px solid transparent; border-radius: 7px; background: var(--surface-subtle); color: var(--text-secondary); font-size: .73rem; font-weight: 500; }
button.word-progress-unrated:hover, button.word-progress-unrated[aria-pressed="true"] { border-color: var(--border-strong); color: var(--text); }
.word-learning-skills .word-progress-row { margin-top: 4px; }
.word-learning-skills .word-progress-chip { height: 28px; font-size: .8rem; }
.word-learning-skills .word-progress-chip.unrated { font-size: .7rem; }
.word-progress-status { display: block; margin-top: 5px; color: var(--muted); font-size: .7rem; }
.reader-definition-expand { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-secondary); }
.reader-definition-expand:hover, .reader-definition-expand:focus-visible { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.reader-relation-arrow { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 61; color: var(--accent); overflow: visible; }
.reader-definition-layer { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; }
.reader-definition-scrim { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(2px); }
.reader-definition-dialog { position: relative; display: flex; flex-direction: column; width: min(850px, 100%); max-height: calc(100dvh - 48px); border: 1px solid var(--border); border-radius: 20px; background: var(--bg); box-shadow: var(--shadow-raised); overflow: hidden; }
.reader-definition-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.reader-definition-toolbar strong { flex: 1; overflow-wrap: anywhere; }
.reader-definition-content { overflow: auto; padding: 18px; }
@media (max-width: 600px) { .reader-definition-layer { padding: 10px; } .reader-definition-content { padding: 10px; } .reader-definition-toolbar { gap: 4px; padding: 8px; } }
.line-error { color: var(--danger); font-family: inherit; }
.reader-word.line-error { color: var(--danger); border: 0; box-shadow: none; cursor: help; }
.reader-error-tooltip { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: .85rem; line-height: 1.5; font-weight: 400; }
.reader-word-bubble.reader-error-tooltip { width: min(600px, calc(100vw - 24px)); max-height: min(65vh, 500px); overflow-y: auto; pointer-events: auto; }
.reader-chunk-retry { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 30px; margin-inline-start: 4px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--accent); font: inherit; font-size: .85em; vertical-align: middle; }
.reader-chunk-retry:disabled { opacity: .4; cursor: wait; }
.reader-retry-failed { margin-bottom: 12px; }
.reader-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; color: var(--muted); font-size: .88rem; }

.card-session { max-width: 720px; }
.flashcard { display: grid; min-height: 280px; margin: 22px 0; padding: 40px; place-items: center; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-subtle); text-align: center; }
.flashcard h2 { margin: 0; font-size: clamp(2.3rem, 7vw, 4rem); }
.answer { width: 100%; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 1.4rem; }
.rating-row, .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tab { padding: 8px 14px; border-radius: 999px; background: var(--surface-subtle); color: var(--text-secondary); }
.tab:hover { background: var(--surface-hover); }
.tab.active { background: var(--accent); color: var(--accent-text); }
.result { margin-top: 20px; line-height: 1.65; }
.generated { white-space: pre-wrap; }


.reader-group-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.35rem;
  padding: 0 0.15rem;
  margin-inline: 0.12rem;
  border: 1px solid transparent;
  border-radius: 0.3rem;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  vertical-align: 0.08em;
  cursor: pointer;
}
.reader-group-marker.paragraph-marker { color: var(--accent); font-weight: 700; }
.sentence-marker-dot { transform: scale(.55); }
.reader-selection-controls { position: fixed; z-index: 70; inset: auto auto calc(14px + env(safe-area-inset-bottom)) 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; width: max-content; max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); margin: 0; padding: 6px; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-raised); color: var(--text); }
.reader-selection-controls .icon-button { width: 44px; min-width: 44px; height: 44px; border-radius: 13px; color: var(--text-secondary); touch-action: manipulation; }
.reader-selection-controls .icon-button:disabled { opacity: .3; }
.reader-selection-divider { width: 1px; height: 22px; margin-inline: 2px; background: var(--border); }
.reader-selection-controls::backdrop { background: transparent; pointer-events: none; }
.reader-group-marker:hover, .reader-group-marker:focus-visible, .reader-group-marker[aria-expanded="true"] {
  background: var(--surface-subtle);
  border-color: currentColor;
  color: var(--accent);
}
.reader-group-outlines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.reader-group-outline { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; stroke-linecap: round; opacity: .65; }
.reader-group-outline[data-solid="true"] { stroke-width: 2; stroke-dasharray: none; opacity: .85; }
.reader-translation-text { white-space: pre-wrap; }
.reader-translation-bubble { max-height: min(60vh, 32rem); overflow-y: auto; }
.reader-group-fixed { padding-bottom: 12px; }
.reader-group-fixed header { flex-wrap: nowrap; }
.reader-group-fixed .speech-control { flex: none; }
.reader-group-fixed .speech-timing-notice { display: none; }
.reader-group-header-actions { display: flex; align-items: center; gap: 4px; flex: none; margin-inline-start: auto; }

/* Playback state belongs to the shared player, including during native requests. */
.speech-control { display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle; }
.speech-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; min-width: 2rem; padding: 0;
  margin-inline: .25rem; border: 0; border-radius: 50%;
  color: var(--accent); background: var(--accent-soft); font-size: .72rem;
  vertical-align: middle; cursor: pointer;
}
.speech-button:hover, .speech-button:focus-visible { background: var(--accent); color: var(--accent-text); }
.speech-button .shell-icon { width: 1rem; height: 1rem; }
.speech-button-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.speech-button .speech-play { display: inline-flex; }
.speech-button .speech-pause, .speech-button .speech-loading { display: none; }
.speech-button .speech-loading { width: 1rem; height: 1rem; align-items: center; justify-content: center; }
.speech-loading-dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.speech-button[data-state="playing"] .speech-play,
.speech-button[data-state="loading"] .speech-play { display: none; }
.speech-button[data-state="playing"] .speech-pause,
.speech-button[data-state="loading"] .speech-loading { display: inline-flex; }
.speech-button[data-state="loading"] { animation: speech-pulse 1s ease-in-out infinite; }
.speech-button[data-highlight-loading="true"] .speech-play,
.speech-button[data-highlight-loading="true"] .speech-pause { display: none; }
.speech-button[data-highlight-loading="true"] .speech-loading { display: inline-flex; animation: speech-pulse 1s ease-in-out infinite; }
.speech-button[data-state="error"] { color: var(--danger); border-color: var(--danger); }
.speech-error { color: var(--danger); font-size: .75rem; font-weight: 400; }
.speech-error:empty { display: none; }
.landing-sentence-audio { float: inline-end; margin-inline-start: 12px; margin-bottom: 8px; }
.landing-stage .speech-control { flex-wrap: wrap; }
.landing-stage .speech-button { width: 40px; height: 40px; min-width: 40px; margin: 0; color: #fff; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .3); }
.landing-stage .speech-button:hover, .landing-stage .speech-button:focus-visible { background: rgb(255 255 255 / .3); color: #fff; }
.landing-stage .speech-error { max-width: 180px; color: #ffb4ab; }
.landing-bubble-header .speech-control { margin-inline-start: auto; }
.speech-button-labeled { width: auto; height: auto; margin: 0; gap: 6px; padding: 4px 14px 4px 4px; border-radius: 999px; color: var(--accent-ink); font-size: .9rem; font-weight: 650; text-align: start; }
.speech-button-labeled > .speech-button-icon { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent); color: var(--accent-text); }
.speech-button-labeled:hover > .speech-button-icon { background: var(--accent-hover); }
.speech-button-labeled:has(.speech-timing-notice:not(:empty)) > .speech-button-label { display: none; }
.speech-button-labeled:hover .speech-timing-notice, .speech-button-labeled:focus-visible .speech-timing-notice { color: inherit; }
.search-result-with-audio { display: flex; align-items: center; gap: .35rem; }
.search-result-with-audio > .search-result { flex: 1; min-width: 0; }
.linked-word-with-audio { display: inline-flex; align-items: center; }
@keyframes speech-pulse { 0%, 100% { opacity: .45; box-shadow: 0 0 0 0 var(--accent-soft); } 50% { opacity: 1; box-shadow: 0 0 0 5px var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) {
    .speech-button[data-state="loading"], .speech-button[data-highlight-loading="true"] .speech-loading { animation: none; background: var(--accent-soft); }
}

.reader-group-translation { margin-top: 12px; }
.reader-translation-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reader-translation-disclosure { display: inline-flex; align-items: center; gap: 6px; padding-inline-start: 0; }

.reader-display-controls { margin: 20px 0 0; }
.reader-control-heading { margin: 0; font-size: .85rem; font-weight: 650; color: var(--text-secondary); }
.reader-display-toggles { display: grid; gap: 14px; margin: 16px 0 20px; }
.reader-font-size-control { display: flex; align-items: center; gap: 12px; }
.reader-font-size-control > label { flex: 1; min-width: 0; }
.reader-font-size-label { display: flex; justify-content: space-between; gap: 12px; }
.reader-font-size-label > span { color: var(--muted); font-variant-numeric: tabular-nums; }
.reader-font-size-control input { width: 100%; margin: 0; }
.reader-option-checkbox { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .9rem; font-weight: 500; cursor: pointer; }
.reader-option-checkbox input { flex: 0 0 16px; width: 16px; height: 16px; margin: 0; }
.reader-display-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; align-items: start; }
.reader-display-grid .switch-row { grid-column: 1 / -1; padding: 10px 0; }
.reader-display-grid > label:not(.option-row):not(.switch-row) { display: grid; gap: 6px; }
.reader-display-grid .option-row { margin: 0; }
@media (max-width: 600px) { .reader-display-grid { grid-template-columns: 1fr; } }

.reader-word-bubble > button.secondary { margin: 8px 8px 0 0; }

.model-control { display: inline-flex; flex-direction: column; gap: 5px; min-width: 130px; margin: 8px 12px 8px 0; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: 10px; font-size: .78rem; color: var(--muted); }
.model-control select { min-width: 120px; padding: 7px 10px; color: var(--text); }
.word-model-menu-button { float: right; letter-spacing: 2px; }
.word-model-options { clear: both; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.word-model-options .model-control { margin: 0; }

/* Scenarios */
.roleplay-library-section > h2 { margin: 30px 0 14px; font-size: 1.15rem; }
.scenario-library { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.scenario-library-card { display: grid; align-content: start; gap: 6px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .14s ease, box-shadow .14s ease; }
.scenario-library-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.scenario-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; }
.scenario-card-top .tag { margin: 0; background: var(--marigold-soft); color: var(--marigold-ink); }
.scenario-card-top .tag.done { background: var(--accent-soft); color: var(--accent-ink); }
.scenario-library-card h3 { margin: 4px 0 0; font-size: 1.08rem; line-height: 1.35; }
.scenario-library-card p { margin: 0 0 10px; font-size: .86rem; }
.scenario-library-card > .button-link, .scenario-library-card > .confirm-inline { margin-top: auto; }
.confirm-inline.start { justify-content: flex-start; }
.scenario-create { max-width:780px; }
.scenario-game-header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:12px 0 20px; }
.scenario-game-header h1 { margin:0; font-size:clamp(1.5rem,3vw,2.4rem); }
.scenario-progress { margin-bottom:18px; }
.scenario-progress progress { width:100%; accent-color:var(--accent); }
.scenario-pulse { height:4px; border-radius:4px; margin-top:16px; background:var(--accent); animation:scenario-pulse 1.4s ease-in-out infinite; }
@keyframes scenario-pulse { 50% {opacity:.25} }
.scenario-objective { display:flex; flex-wrap:wrap; gap:16px 30px; margin-bottom:20px; border-left:4px solid var(--accent); }
.scenario-objective h2 { font-size:1.1rem; margin:0; max-width:600px; }
.scenario-objective ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.scenario-objective li { display:flex; gap:10px; color:var(--muted); font-size:.88rem; }
.scenario-objective li.complete { color:var(--success,#358269); }
.scenario-game-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr); gap:22px; align-items:start; }
.scenario-world { min-width:0; }
.scenario-canvas { display:block; width:100%; aspect-ratio:5/3; border-radius:18px; border:1px solid var(--border); background:#e5eee2; cursor:pointer; }
.scenario-scene-caption { margin:16px 4px; }
.scenario-scene-caption h2 { margin:0; font-size:1.2rem; }
.scenario-scene-caption p { color:var(--muted); font-size:.9rem; line-height:1.5; }
.scenario-people,.scenario-inventory { padding:18px; margin-top:16px; }
.scenario-person { padding:12px 0; border-top:1px solid var(--border); }
.scenario-person p,.scenario-person details,.scenario-item p { font-size:.82rem; color:var(--muted); }
.scenario-person .selected { outline:2px solid var(--accent); outline-offset:2px; }
.scenario-item { padding:10px 0; display:flex; align-items:center; gap:10px; }
.scenario-item-art { width:48px; height:48px; object-fit:contain; flex:none; }
.scenario-item-placeholder { display:grid; place-items:center; border-radius:12px; background:var(--surface-subtle); color:var(--muted); font-size:1.8rem; }
.scenario-item p { margin:4px 0; }
.scenario-conversation { padding:20px; position:sticky; top:20px; }
.scenario-conversation h2 { font-size:1.1rem; margin:0 0 16px; }
.scenario-event-log { display:flex; flex-direction:column; gap:12px; max-height:460px; overflow:auto; padding-right:5px; }
.scenario-event { padding:12px 14px; border-radius:14px; background:var(--surface-subtle); font-size:.92rem; overflow-wrap:anywhere; }
.scenario-event small { font-weight:700; color:var(--muted); font-size:.72rem; }
.scenario-event p { margin:6px 0 0; white-space:pre-wrap; line-height:1.5; }
.scenario-event.event-player { margin-left:22px; background:var(--accent-soft,#e7edfc); }
.scenario-event.event-action,.scenario-event.event-feedback { border-left:3px solid var(--border-strong); font-size:.82rem; }
.scenario-event .speech-control { margin-top:7px; max-width:100%; }
.scenario-audio-settings { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:16px; }
.scenario-audio-settings .checkbox-field { display:flex; align-items:center; gap:.5rem; margin:0; }
.scenario-audio-settings input[type="checkbox"] { width:auto; margin:0; accent-color:var(--accent); }
.scenario-audio-settings small { flex-basis:100%; color:var(--muted); }
.scenario-audio-settings button[hidden] { display:none; }
.scenario-event.event-speech:has(.speech-button[data-state="playing"]) { box-shadow:inset 3px 0 var(--accent); background:var(--accent-soft); }
.scenario-input { margin-top:20px; border-top:1px solid var(--border); padding-top:16px; }
.scenario-input label { font-size:.82rem; }
.scenario-input p { font-size:.72rem; }
.scenario-victory { display:flex; gap:20px; align-items:center; background:#e4f3dd; color:#254c2d; padding:24px; border-radius:18px; margin-bottom:20px; }
.scenario-victory > span { font-size:3rem; color:#6d9842; }
.scenario-victory h2,.scenario-victory p { margin:4px 0; }
.scenario-asset-errors { font-size:.8rem; color:var(--muted); margin:16px 0; overflow-wrap:anywhere; }
.scenario-error { border:1px solid var(--danger); margin-bottom:16px; }
@media(max-width:1050px) { .scenario-game-layout {grid-template-columns:1fr;} .scenario-conversation {position:static;} .scenario-event-log {max-height:380px;} }
@media(max-width:620px) { .scenario-intro,.scenario-game-header {align-items:flex-start;flex-direction:column;} .scenario-create-options {grid-template-columns:1fr;} }
@media(prefers-reduced-motion:reduce) { .scenario-pulse {animation:none;} }

.token-budget-badge { display:grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; width:100%; text-align:left; padding:12px; color:var(--text); background:var(--warning-soft); border:0; border-radius:12px; font-weight: 500; }
.token-budget-badge:hover { background: color-mix(in srgb, var(--warning-soft) 80%, var(--warning)); }
.token-budget-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: var(--surface); color: var(--warning-ink); }
.token-budget-copy { display: grid; gap: 1px; min-width: 0; }
.token-budget-copy span,.token-budget-copy small { font-size:.74rem; color:var(--warning-ink); }
.token-budget-copy strong { font-size:1rem; color: var(--text); }
.account-token-budget,.token-usage-history { margin-top:24px; }
.token-budget-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.token-budget-heading h2 { margin:0; }
.token-budget-balance { margin:24px 0 12px; }
.token-budget-balance strong { font-size:2.25rem; letter-spacing:-.05em; }
.token-budget-balance span { color:var(--muted); }
.account-token-budget progress { width:100%; height:10px; accent-color:var(--accent); }
.token-tier-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0; }
.token-tier { border:1px solid var(--border); border-radius:16px; padding:20px; }
.token-tier.selected { border-color:var(--accent); background:var(--accent-soft); }
.token-tier h3 { margin:0; }
.token-tier p { font-size:.85rem; }
.token-tier button { width:100%; }
.subscription-settings { margin-top:24px; }
.billing-callout,.billing-ready-link,.billing-confirmation { padding:20px; margin:20px 0; border:1px solid var(--border); border-radius:16px; background:var(--accent-soft); }
.billing-callout p,.billing-ready-link p,.billing-confirmation p { margin:10px 0; line-height:1.6; }
.billing-current-plan { padding:24px 0; border-bottom:1px solid var(--border); }
.billing-current-plan > div:first-child { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.billing-current-plan h3 { margin:0; }
.billing-current-plan small,.billing-callout small { display:inline; font-size:inherit; }
.billing-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:16px 0; }
.billing-intervals { display:flex; width:fit-content; border:1px solid var(--border); border-radius:14px; padding:4px; gap:4px; margin-top:24px; }
.billing-price { min-height:36px; }
.billing-price strong { font-size:1.5rem; color:var(--text); }
.billing-price span { color:var(--muted); }
.billing-terms { font-size:.85rem; line-height:1.7; }
.billing-ready-link a { display:inline-block; padding:12px 18px; background:var(--accent); color:var(--accent-text); border-radius:12px; font-weight:700; text-decoration:none; }
.billing-ready-link a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.billing-activity { margin-top:24px; }
.billing-activity ul { padding-left:20px; }
.billing-activity li { margin:12px 0; }
.billing-activity small { display:block; color:var(--muted); margin-top:4px; }
@media(max-width:720px) { .billing-actions > button {width:100%;} .billing-ready-link a {display:block;text-align:center;} }
.token-explanation { margin-top:24px; color:var(--muted); font-size:.85rem; line-height:1.6; }
.token-usage-history { min-width:0; }
.token-history-table-wrap { overflow-x:auto; margin-top:20px; }
.token-history-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.token-history-table th { text-align:left; color:var(--muted); font-size:.75rem; }
.token-history-table th,.token-history-table td { padding:14px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
.token-history-table td:first-child { min-width:220px; max-width:450px; overflow-wrap:anywhere; }
.token-history-table td:nth-child(2) { overflow-wrap:anywhere; max-width:170px; }
.token-history-table td small { display:block; color:var(--muted); font-size:.72rem; margin:6px 0; }
.token-history-table details { margin-top:10px; color:var(--muted); }
.token-history-table details p { font-size:.75rem; }
.token-history-table .token-charge { font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
@media(max-width:720px) { .token-tier-options {grid-template-columns:1fr;} .token-budget-heading {align-items:flex-start;flex-wrap:wrap;} .token-budget-balance span {display:block;} }

.scenario-microphone { display: grid; gap: .65rem; padding: 1rem 0; border-top: 1px solid var(--border); }
.scenario-microphone-controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.scenario-microphone-controls button { touch-action: none; user-select: none; -webkit-user-select: none; }
.scenario-microphone-controls button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.scenario-microphone meter { width: 3.5rem; height: .7rem; }
.scenario-microphone small { display: block; line-height: 1.45; }
.scenario-microphone[data-state="transcribing"] meter { animation: scenario-mic-pulse 1s ease-in-out infinite; }
@keyframes scenario-mic-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .scenario-microphone[data-state="transcribing"] meter { animation: none; } }

.scenario-microphone .checkbox-field { display: flex; align-items: center; gap: .5rem; margin: 0; }
.scenario-microphone input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); }

/* Credit usage log and per-request details. */
button.credit-usage-charge { display: inline-flex; align-items: center; width: auto; min-height: 0; padding: 3px 7px; margin: 0 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-subtle); color: var(--text-secondary); font-size: .68rem; line-height: 1.35; font-weight: 500; vertical-align: middle; white-space: nowrap; cursor: pointer; }
button.credit-usage-charge:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.credit-usage-charge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scenario-completion-warning { margin: 16px 0; border-left: 4px solid var(--warning); }
.scenario-completion-warning h2 { font-size: 1.1rem; margin: 0 0 8px; }
.scenario-completion-warning p { line-height: 1.5; }
.scenario-warning-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.credit-usage-entry { padding: 18px 0; border-top: 1px solid var(--border); }
.credit-usage-entry h3 { font-size: 1rem; margin: 0 0 10px; overflow-wrap: anywhere; }
.credit-usage-entry > small { display: block; margin: 6px 0; color: var(--muted); }
.credit-usage-entry dl { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); gap: 8px 14px; font-size: .83rem; }
.credit-usage-entry dt { color: var(--muted); }
.credit-usage-entry dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .credit-usage-entry dl { grid-template-columns: 1fr; gap: 4px; } .credit-usage-entry dd { margin-bottom: 8px; } }

/* Markdown keeps semantic blocks while reader words remain interactive. */
.reader-markdown { font-size: calc(var(--reader-base-font-size, 1.15rem) * var(--reader-font-scale, 1)); line-height: 1.85; overflow-wrap: anywhere; }
.reader-unprocessed { color: var(--text-secondary); opacity: .5; }
.reader-markdown p { margin: 0 0 1em; }
.reader-markdown > :first-child { margin-top: 0; }
.reader-markdown > :last-child { margin-bottom: 0; }
.reader-markdown h1, .reader-markdown h2, .reader-markdown h3,
.reader-markdown h4, .reader-markdown h5, .reader-markdown h6 { margin: 1.3em 0 .55em; line-height: 1.4; font-weight: 700; letter-spacing: normal; }
.reader-markdown h1 { font-size: 1.65em; }
.reader-markdown h2 { font-size: 1.4em; }
.reader-markdown h3 { font-size: 1.2em; }
.reader-markdown h4, .reader-markdown h5, .reader-markdown h6 { font-size: 1em; }
.reader-markdown ul, .reader-markdown ol { margin: .65em 0 1em; padding-inline-start: 1.7em; }
.reader-markdown li { margin: .3em 0; }
.reader-markdown li > p { margin-bottom: .5em; }
.reader-markdown li > ul, .reader-markdown li > ol { margin-block: .25em; }
.reader-markdown blockquote { margin: 1em 0; padding: .25em 1em; border-inline-start: 3px solid var(--border-strong); color: var(--text-secondary); background: var(--surface-subtle); }
.reader-markdown blockquote > :last-child { margin-bottom: 0; }
.reader-markdown code { font-family: ui-monospace, monospace; font-size: .9em; padding: .12em .25em; border-radius: 4px; background: var(--surface-subtle); white-space: pre-wrap; }
.reader-markdown pre { margin: 1em 0; padding: 1em; border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; background: var(--surface-subtle); white-space: pre; }
.reader-markdown pre code { padding: 0; white-space: pre; }
.reader-markdown hr { border: 0; border-top: 1px solid var(--border-strong); margin: 1.5em 0; }
.reader-markdown-table { overflow-x: auto; margin: 1em 0; }
.reader-markdown table { width: 100%; border-collapse: collapse; }
.reader-markdown th, .reader-markdown td { border: 1px solid var(--border); padding: .4em .7em; text-align: start; }
.reader-markdown th { background: var(--surface-subtle); }
.reader-markdown-task { display: inline-block; width: 1em; margin-inline-end: .4em; vertical-align: baseline; }
.reader-markdown-link { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: .2em; }
.reader-markdown-open-link { display: inline-block; font-size: .7em; padding-inline: .25em; color: var(--accent); text-decoration: none; }
.reader-markdown-literal { white-space: pre-wrap; }
.reader-word-bubble .reader-markdown { font-size: inherit; line-height: 1.6; }
.reader-word-bubble { margin: 0; inset: auto; font-style: normal; font-weight: 400; line-height: 1.5; text-align: start; text-transform: none; letter-spacing: normal; }
.inline-reader, .inline-reader-text { display: inline; }
.inline-reader-text { white-space: pre-wrap; line-height: inherit; }
.inline-reader .reader-word { line-height: inherit; }
.inline-reader-loading { display: inline-block; margin-inline-start: .2em; color: var(--text-secondary); animation: scenario-pulse 1.2s ease-in-out infinite; }
.inline-reader-retry { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0 3px; margin: 0; background: transparent; color: var(--danger); font: inherit; font-size: .8em; vertical-align: baseline; }
.inline-reader-error-details { font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.5; text-align: start; }
.inline-reader-error-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.reader-definition-layer[popover] { position: fixed; inset: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; background: transparent; color: var(--text); box-sizing: border-box; }
.reader-relation-layer { position: fixed; inset: 0; margin: 0; padding: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; border: 0; background: transparent; pointer-events: none; overflow: visible; z-index: 61; }
.dictionary-link-expand { padding: 1px 4px; margin-inline-start: 4px; background: transparent; color: var(--text-secondary); font: inherit; }
@media (max-width: 600px) { .reading-page .reader-markdown { --reader-base-font-size: 1.08rem; } }

::highlight(compri-spoken-word) { background-color: #f9d766; color: #172238; }
.compri-speech-overlay { position: fixed; z-index: 10000; pointer-events: none; border-radius: 3px; background: rgba(246, 194, 43, .38); }
.speech-timing-notice { color: var(--muted); font-size: .75rem; font-weight: 400; }
.speech-timing-notice:empty { display: none; }

/* Document comprehension practice. */
.challenge-stars-total { color: var(--accent); font-weight: 750; }
.comprehension-stage .comprehension-session { grid-template-rows: auto minmax(0, 1fr); }
.comprehension-management { position: relative; z-index: 4; display: grid; gap: 14px; width: min(900px, 100%); justify-self: center; min-width: 0; }
.comprehension-stage .comprehension-topbar { min-height: 52px; padding-inline-start: 8px; gap: 8px; }
.challenge-navigation { display: flex; align-items: center; gap: 8px; padding: 0 6px; min-width: 0; color: #f3f4f6; }
.challenge-navigation > .icon-button { color: inherit; flex: none; }
.guided-progress.challenge-progress { flex: 1; }
.challenge-progress .guided-step { position: relative; cursor: pointer; }
.challenge-progress .guided-step::before { content: ""; position: absolute; inset: -10px 0; }
.challenge-question-translation { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; color: var(--text-secondary); font-size: 1rem; line-height: 1.65; }
.challenge-question-translation > .icon-button { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 50%; }
.challenge-question-translation > div { min-width: 0; padding-top: 4px; }
.challenge-question-translation p { margin: 0; }
.challenge-answer-actions > button[type="submit"] { margin-inline-start: auto; }
.comprehension-topbar > .icon-button { flex: none; }
.comprehension-topbar .study-source span { letter-spacing: .05em; }
.comprehension-topbar .challenge-question-menu { gap: 8px; }
.challenge-question-menu > button { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; text-align: start; font-size: .85rem; line-height: 1.5; }
.challenge-question-menu > button[aria-current="step"] { background: var(--accent-soft); color: var(--accent-ink); }
.challenge-question-number { color: var(--muted); font-variant-numeric: tabular-nums; }
.study-scene.comprehension-scene { width: min(900px, 100%); grid-template-rows: minmax(0, 1fr) auto; }
.comprehension-scene .study-card { height: auto; max-height: 100%; display: flex; flex-direction: column; }
.comprehension-scene .study-card-scroll { height: auto; min-height: 0; }
.comprehension-scene .challenge-prompt { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.65; font-weight: 550; }
.comprehension-scene .challenge-answer-dock { display: grid; gap: 10px; max-height: min(320px, calc(var(--study-height) * .48)); }
.challenge-answer-dock textarea { margin: 0; width: 100%; }
.challenge-answer-dock > p { margin: 0; font-size: .85rem; }
.challenge-answer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.challenge-answer-actions > button { font-size: .85rem; }
.challenge-answer-note { margin: 0 0 5px; font-size: .78rem; }
.challenge-navigation .icon-button { width: 40px; height: 40px; padding: 8px; }
.challenge-feedback { margin-top: 20px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-subtle); animation: challenge-reward .3s ease-out; }
.challenge-score { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.challenge-score span { font-size: 1.35rem; letter-spacing: 3px; }
.challenge-score .earned { color: var(--success); }
.challenge-score .unearned { color: var(--border-strong); }
.challenge-feedback h4 { margin: 0 0 12px; font-size: 1.05rem; }
.challenge-feedback p { margin: 12px 0; line-height: 1.6; }
.challenge-language { display: inline-flex; border-radius: 99px; padding: 4px 9px; font-size: .73rem; font-weight: 650; color: var(--text-secondary); background: var(--surface); }
.challenge-language.target { color: var(--success); border: 1px solid currentColor; }
.challenge-hint { border-left: 3px solid var(--warning); padding: 8px 12px; background: var(--surface); border-radius: 4px; }
.challenge-complete { padding: 13px 16px; border-radius: 10px; background: var(--success-soft); color: var(--success); font-weight: 700; line-height: 1.5; }
.challenge-history summary { color: var(--muted); cursor: pointer; font-size: .8rem; }
.challenge-history { margin-top: 16px; }
.challenge-history p { font-size: .8rem; overflow-wrap: anywhere; }
@keyframes challenge-reward { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .challenge-feedback { animation: none; } }
@media (max-width: 520px) {
    .comprehension-stage .comprehension-topbar { gap: 2px; }
    .comprehension-topbar .study-source span { font-size: .55rem; }
    .comprehension-topbar .study-menu > summary { padding-inline: 7px; }
    .comprehension-topbar .study-menu > summary .challenge-stars-total { display: none; }
    .comprehension-scene .study-card-scroll { --study-card-padding: 20px; }
    .comprehension-scene .study-card-header { padding-block: 14px; }
    .challenge-feedback { padding: 14px; }
}
@media (max-height: 560px) {
    .comprehension-stage .comprehension-topbar { min-height: 40px; padding-block: 2px; }
    .comprehension-topbar > .icon-button, .comprehension-management .challenge-navigation .icon-button { width: 32px; height: 32px; padding: 6px; }
    .comprehension-management { gap: 8px; }
    .comprehension-scene .challenge-answer-dock { gap: 6px; padding: 10px 14px; }
    .challenge-answer-dock textarea { height: 56px; }
    .comprehension-topbar .study-source span { display: block; font-size: .55rem; }
}

.reader-practice-launch { display: flex; flex-wrap: wrap; gap: 8px; }
.reader-practice-launch :is(button, .button-link) { padding: 8px 14px; font-size: .9rem; }
.reader-group-activities { display: grid; gap: 20px; margin-block: 18px; }
.reader-group-activity { display: grid; gap: 8px; }
/* Speaking practice shares the floating study stage; only the passage scrolls. */
.practice-session { grid-column: 1; grid-row: 1 / -1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px; min-height: 0; min-width: 0; height: 100%; }
.practice-studio .practice-topbar { gap: 8px; padding-inline-start: 8px; }
.practice-topbar h2 { flex: 1; min-width: 0; margin: 0; font-size: 1.05rem; line-height: 1.25; }
.practice-topbar > .icon-button { flex: none; }
.practice-loading { padding: 24px; margin: auto; }
.practice-reading-area { display: flex; flex-direction: column; gap: 14px; align-self: center; justify-self: center; width: min(1100px, 100%); max-height: 100%; min-height: 0; min-width: 0; }
.practice-progress { flex: none; }
.practice-progress .guided-progress-steps { flex-wrap: wrap; gap: 6px; }
.practice-progress .guided-progress-steps li { min-width: 10px; }
.practice-progress .guided-step { position: relative; height: 12px; border-radius: 6px; cursor: pointer; }
.practice-progress .guided-step::before { content: ""; position: absolute; inset: -8px 0; }
.practice-content { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: 0 12px 40px rgb(0 0 0 / .25); }
.practice-passage { min-height: 0; overflow-y: auto; overscroll-behavior: contain; font-size: 1.35rem; line-height: 1.8; padding: 2px; scrollbar-gutter: stable; }
.practice-sentence-row { display: grid; grid-template-columns: 3.3rem minmax(0, 1fr); align-items: baseline; gap: 10px; width: 100%; padding: 8px 10px; margin: 0 0 4px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text); font: inherit; text-align: start; box-shadow: none; }
.practice-sentence-row:last-child { margin-bottom: 0; }
.practice-sentence-row[data-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
@media (hover: hover) and (pointer: fine) { .practice-sentence-row:hover { background: var(--surface-subtle); } }
.practice-sentence-grade { justify-self: stretch; padding: 3px 5px; border-radius: 7px; font-size: .75rem; font-weight: 650; line-height: 1.6; text-align: center; font-variant-numeric: tabular-nums; }
.practice-ungraded { color: var(--muted); }
.practice-sentence-text { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.practice-reading-unit { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; margin-inline: 2px; }
.practice-reading-unit > .practice-unit-text { white-space: nowrap; }
.practice-reading { color: var(--muted); font-size: .55em; font-weight: 400; line-height: 1.4; white-space: nowrap; padding-bottom: 4px; }
.practice-word { font: inherit; line-height: 1.5; padding: 1px 0; margin: 0; border: 0; border-bottom: 3px solid transparent; border-radius: 4px; color: var(--text); background: transparent; display: inline; }
.practice-word.provisional { border-bottom-style: dotted; opacity: .72; }
.practice-studio .score-4 { background: #d8f4e5; color: #145437; border-bottom-color: #20824c; }
.practice-studio .score-3 { background: #fff1b8; color: #65520b; border-bottom-color: #c5a126; }
.practice-studio .score-2 { background: #ffe0bd; color: #784010; border-bottom-color: #c07124; }
.practice-studio .score-1 { background: #ffdade; color: #812737; border-bottom-color: #bc4560; }
.practice-studio .practice-dock { width: min(760px, 100%); overflow: hidden; padding: 14px 18px; }
.practice-dock-actions { display: flex; align-items: flex-start; gap: 12px; }
.practice-audio-hint { flex: none; }
.practice-dock-actions .practice-controls { flex: 1; min-width: 0; }
.practice-controls { display: grid; grid-template-columns: minmax(0, max-content) minmax(24px, 64px) auto; justify-content: center; align-items: center; gap: 6px 12px; }
.practice-controls[data-review="true"] { grid-template-columns: minmax(0, max-content) minmax(0, max-content); }
.practice-controls[data-review="true"] > :is(.practice-microphone, meter) { display: none; }
.practice-controls[data-review="true"] > button { min-width: 0; max-width: 100%; padding-inline: 12px; font-size: .85rem; }
.practice-controls meter { width: 100%; }
.practice-controls [role=status] { grid-column: 1 / -1; text-align: center; font-size: .78rem; color: var(--muted); }
.practice-controls [role=status]:empty { display: none; }
.practice-microphone { min-width: 0; }
.practice-microphone > :is(.practice-mic-idle, .practice-mic-recording, .practice-mic-busy) { display: none; flex: none; }
.practice-microphone[data-state="idle"] .practice-mic-idle,
.practice-microphone[data-state="recording"] .practice-mic-recording,
.practice-microphone[data-state="busy"] .practice-mic-busy { display: inline-flex; }
.practice-mic-busy { animation: word-image-spin 1.5s linear infinite; }
.practice-feedback-area { display: grid; gap: 8px; margin-top: 10px; }
.practice-feedback-area > p { margin: 0; font-size: .85rem; line-height: 1.5; }
.practice-transcript { padding: 8px 12px; background: var(--surface-subtle); border-radius: 10px; }
.practice-transcript strong { font-size: .75rem; color: var(--muted); }
.practice-transcript-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.practice-transcript-heading .speech-button-labeled { min-height: 30px; padding: 5px 9px; font-size: .75rem; }
.practice-transcript-heading .speech-control { flex: none; }
.practice-transcript p { margin: 2px 0 0; min-height: 1.5em; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.practice-feedback { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.practice-options, .practice-help { font-size: .9rem; line-height: 1.6; }
.practice-options summary { cursor: pointer; color: var(--muted); }
.practice-options > p:first-child, .practice-help > p:first-child { margin-top: 0; }
.practice-options > :last-child, .practice-help > :last-child { margin-bottom: 0; }
@media (max-width: 600px) {
    .practice-session { gap: 12px; }
    .practice-progress { flex-wrap: wrap; gap: 8px; }
    .practice-progress .guided-progress-steps { flex-basis: 100%; }
    .practice-topbar h2 { font-size: .95rem; }
    .practice-studio .practice-topbar { gap: 3px; }
    .practice-content { padding: 10px 6px; border-radius: 20px; }
    .practice-passage { font-size: 1.1rem; }
    .practice-sentence-row { grid-template-columns: 2.8rem minmax(0, 1fr); gap: 7px; padding: 7px; }
    .practice-studio .practice-dock { padding: 12px; }
    .practice-controls { grid-template-columns: minmax(0, max-content) minmax(16px, 40px) auto; gap: 6px 8px; }
    .practice-microphone { padding: 10px 12px; font-size: .85rem; }
}
@media (max-height: 500px) {
    .practice-session { gap: 8px; }
    .practice-studio .practice-topbar { padding-block: 2px; }
    .practice-studio .practice-dock { padding: 8px 12px; }
    .practice-controls { gap: 3px 8px; }
    .practice-microphone { padding-block: 6px; font-size: .8rem; }
    .practice-transcript { display: flex; align-items: baseline; gap: 10px; padding: 6px 10px; }
    .practice-transcript-heading { flex: none; }
    .practice-transcript p { margin: 0; font-size: .85rem; -webkit-line-clamp: 1; }
    .practice-feedback-area { gap: 4px; margin-top: 6px; }
    .practice-feedback { -webkit-line-clamp: 2; }
    .practice-content { padding-block: 8px; }
}
@media (prefers-reduced-motion: reduce) { .practice-mic-busy { animation: none; } }

/* Scenario lobby and character studio */
.scenario-lobby-actions { display:flex; gap:12px; align-items:center; margin:20px 0; }
.scenario-play-button { padding:16px 44px; font-size:1.15rem; }
.scenario-lobby-preview { border-radius:20px; overflow:hidden; max-height:52vh; background:#233e36; }
.scenario-lobby-preview .scenario-canvas { width:100%; max-height:52vh; }
.scenario-lobby-premise { margin-top:20px; }
.character-studio-layout { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(300px,1.2fr); gap:24px; margin:24px 0; }
.character-preview { text-align:center; background:radial-gradient(circle at 50% 35%,#e6f3e8,transparent 65%),var(--surface); }
.character-preview img { height:300px; width:250px; object-fit:contain; }
.character-preview p { color:var(--muted); font-size:.85rem; }
.character-placeholder { display: grid; justify-items: center; padding: 40px 0 20px; color: var(--accent); }
.character-prompt form { display:grid; gap:16px; }
.character-history { margin-top:24px; }
.character-version { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; border-top:1px solid var(--border); }
.character-version p { margin:6px 0; overflow-wrap:anywhere; }
.character-version small { color:var(--muted); }
.character-version button { flex-shrink:0; }
/* Full-window stage: DOM controls retain keyboard access over the Canvas world. */
.scenario-immersive { position:fixed; inset:0; z-index:110; height:100dvh; overflow:hidden; color:#fff; background:radial-gradient(ellipse at 50% 30%,#46675d,#102c2b); isolation:isolate; }
.scenario-stage-frame { position:absolute; width:min(100vw,calc(max(180px,100dvh - var(--scenario-dock-space,160px)) * 1.66667)); aspect-ratio:5/3; top:calc(max(180px,100dvh - var(--scenario-dock-space,160px)) / 2); left:50%; transform:translate(-50%,-50%); }
.scenario-stage-frame .scenario-canvas { display:block; width:100%; height:100%; border:0; border-radius:0; }
.scenario-glass { color:#f7fffb; background:rgba(15,37,34,.76); border:1px solid rgba(235,255,246,.22); border-radius:16px; backdrop-filter:blur(16px); box-shadow:0 8px 30px #03171124; }
.scenario-immersive button { color:inherit; background:rgba(234,255,242,.14); border:1px solid rgba(235,255,246,.24); padding:9px 13px; border-radius:10px; font-size:.8rem; }
.scenario-immersive button:hover:not(:disabled) { background:rgba(234,255,242,.27); }
.scenario-immersive button:focus-visible,.scenario-immersive summary:focus-visible { outline:3px solid #d5f780; outline-offset:3px; }
.scenario-immersive button:disabled { opacity:.44; cursor:default; }
.scenario-immersive .muted,.scenario-immersive small { color:#d5e7de; }
.scenario-immersive .error { color:#ffcebc; }
.scenario-objective-label { color:#cae897; font-size:.75rem; font-weight:700; }
.scenario-play-topbar { position:absolute; top:14px; left:16px; right:16px; display:flex; justify-content:space-between; align-items:start; gap:12px; pointer-events:none; }
.scenario-play-topbar > * { pointer-events:auto; }
.scenario-location { display:flex; align-items:center; gap:12px; padding:6px; max-width:34%; }
.scenario-location strong { font-size:.8rem; padding-right:12px; }
.scenario-play-tools { display:flex; gap:8px; }
.scenario-next-objective { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:min(420px,36vw); display:grid; grid-template-columns:1fr auto; padding:12px 14px; gap:4px 12px; }
.scenario-next-objective .scenario-objective-label { grid-column:1; margin:0; }
.scenario-next-objective strong { grid-column:1; font-size:.8rem; line-height:1.4; }
.scenario-next-objective button { grid-column:2; grid-row:1/3; align-self:center; }
.scenario-objective-intro { position:absolute; left:50%; top:15%; transform:translateX(-50%); width:min(500px,80vw); padding:26px; z-index:8; max-height:65vh; overflow-y:auto; }
.scenario-objective-intro h2 { color:#fff; margin:0 0 20px; }
.scenario-objective-intro p { font-size:.95rem; line-height:1.5; }
.scenario-objective-reveal { animation:scenario-objective-enter .45s ease both; }
@keyframes scenario-objective-enter { from {opacity:0;transform:translateY(12px)} to {opacity:1;transform:translateY(0)} }
.scenario-stage-markers,.scenario-actor-bubbles { position:absolute; inset:0; pointer-events:none; }
.scenario-immersive .scenario-place { position:absolute; transform:translate(-50%,-30%); pointer-events:auto; display:flex; align-items:center; gap:5px; padding:3px 7px; background:#184c39c9; border:1px solid #d9ffe6; border-radius:30px; font-size:clamp(.55rem,1vw,.7rem); white-space:nowrap; box-shadow:0 3px 10px #102c2b30; }
.scenario-place.locked { background:#384942bb; }
.scenario-actor-bubble { position:absolute; transform:translate(-50%,-100%); width:clamp(155px,23vw,310px); max-height:32vh; overflow-y:auto; pointer-events:auto; border-radius:16px; box-shadow:0 10px 28px #17382928; scrollbar-width:thin; }
.scenario-speech-bubble { padding:12px 15px; background:rgba(255,255,247,.94); color:#18372e; border-bottom:1px solid #32533b20; }
.scenario-speech-bubble p { margin:0; font-size:.84rem; line-height:1.5; }
.scenario-immersive .scenario-speech-bubble .speech-button { color:#275a3e; background:#d4e2ce6b; width:29px; height:29px; min-width:29px; margin-top:5px; padding:4px; }
.scenario-action-bubble { background:#284c3ce8; padding:9px 13px; font-size:.73rem; color:#edf6df; border-bottom:1px solid #ffffff18; }
.scenario-action-bubble p { margin:3px 0; line-height:1.4; }
.scenario-action-bubble small { font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; }
.scenario-inventory-panel { position:absolute; top:82px; right:16px; width:260px; padding:12px 15px; max-height:55vh; overflow-y:auto; z-index:5; }
.scenario-immersive summary { cursor:pointer; font-size:.8rem; font-weight:650; }
.scenario-inventory-panel p { font-size:.75rem; line-height:1.5; }
.scenario-inventory-stack { border-top:1px solid #ffffff26; margin-top:12px; padding-top:12px; }
.scenario-inventory-stack summary { display:flex; align-items:center; gap:10px; }
.scenario-inventory-stack summary::before { content:'▸'; }
.scenario-inventory-stack[open] summary::before { content:'▾'; }
.scenario-inventory-stack img { width:36px; height:36px; object-fit:contain; }
.scenario-inventory-stack summary strong { margin-left:auto; }
.scenario-inventory-stack label { font-size:.72rem; margin:10px 0; color:#f7fffb; }
.scenario-inventory-stack button { margin:5px 3px 0 0; }
.scenario-immersive input,.scenario-immersive textarea,.scenario-immersive select { color:#fff; background:#102c2ba8; border:1px solid #b3d1c35c; border-radius:9px; }
.scenario-immersive select option { color:#fff; background:#18372e; }
.scenario-history-wrap { position:absolute; left:16px; top:82px; width:290px; z-index:5; }
.scenario-history { padding:12px 15px; }
.scenario-history .scenario-event-log { max-height:43vh; height:auto; margin-top:12px; }
.scenario-history .scenario-event { font-size:.8rem; background:#ffffff0c; padding:10px; }
.scenario-history .scenario-event p { margin:5px 0; }
.scenario-history .scenario-audio-settings { border-color:#ffffff22; font-size:.7rem; }
.scenario-history .scenario-audio-settings label { color:#e4f7eb; }
.scenario-history .scenario-audio-settings small { font-size:.62rem; }
.scenario-play-bottom { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); width:min(820px,calc(100% - 32px)); max-height:55vh; overflow-y:auto; pointer-events:none; display:grid; gap:8px; z-index:6; }
.scenario-play-bottom > * { pointer-events:auto; }
.scenario-live-status { justify-self:center; padding:8px 16px; margin:0; font-size:.8rem; }
.scenario-play-bottom > .error,.scenario-play-bottom > div.scenario-glass { padding:12px; margin:0; }
.scenario-action-tray { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.scenario-action-tray button { max-width:240px; background:#193e32d9; }
.scenario-input-dock { padding:10px 16px; }
.scenario-nearby { font-size:.67rem; margin:0 0 6px; color:#d6e9dc; }
.scenario-voice-row { display:flex; align-items:start; gap:12px; }
.scenario-voice-row > .scenario-microphone { flex:1; min-width:0; border:0; padding:0; margin:0; background:transparent; }
.scenario-voice-row > button { flex-shrink:0; }
.scenario-voice-row .scenario-microphone small { font-size:.62rem; margin:3px 0 0; }
.scenario-voice-row .scenario-microphone-controls { gap:8px; }
.scenario-voice-row .scenario-microphone-controls meter { width:50px; }
.scenario-draft { margin:10px 0 0; padding:12px 0 0; border-top:1px solid #ffffff24; }
.scenario-draft label { color:#d6e9dc; font-size:.7rem; }
.scenario-draft .form-actions { justify-content:flex-end; margin:8px 0 0; }
.scenario-draft button[type=submit] { background:#dcf58c; color:#163a27; }
.scenario-transcript-review { padding:8px 12px; background:#ffffff0d; border-radius:8px; }
.scenario-transcript-review strong { font-size:.65rem; color:#d6e9dc; }
.scenario-transcript-review p { margin:4px 0; font-size:.95rem; }
.scenario-popup-backdrop { position:absolute; inset:0; display:grid; place-items:center; padding:24px; background:#061c2773; z-index:20; }
.scenario-play-popup { width:min(1100px,95vw); max-height:90dvh; overflow-y:auto; padding:24px; background:#18332ef0; }
.scenario-play-popup > header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.scenario-play-popup h2,.scenario-play-popup h3 { color:#fff; }
.scenario-play-popup li { padding:12px; line-height:1.5; }
.scenario-play-popup li.complete { color:#d6ed9d; }
.scenario-debug-tabs { display:flex; gap:8px; margin-bottom:18px; }
.scenario-debug-tabs button[aria-selected=true] { background:#dbef95; color:#19382b; }
.scenario-play-popup pre { color:#e0f2e7; background:#071f1b99; padding:18px; border-radius:12px; font-size:.72rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.scenario-debug-assets { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.scenario-debug-assets article { min-width:0; border:1px solid #ffffff20; padding:14px; border-radius:12px; }
.scenario-debug-assets img { width:100%; height:220px; object-fit:contain; background:repeating-conic-gradient(#ffffff15 0% 25%,#ffffff08 0% 50%) 50% / 20px 20px; border-radius:10px; }
@media (prefers-reduced-motion:reduce) { .scenario-objective-reveal {animation:none;} }
@media (max-width:800px) {
 .scenario-play-topbar {top:8px;left:8px;right:8px;}
 .scenario-location {max-width:60%;}.scenario-location strong {display:none;}
 .scenario-next-objective {top:58px;width:calc(100% - 32px);max-width:450px;}
 .scenario-inventory-panel {top:140px;right:8px;width:220px;max-height:40vh;}
 .scenario-history-wrap {top:140px;left:8px;width:220px;}
 .scenario-history-wrap:has(details:not([open])) {width:auto;}
 .scenario-inventory-panel:not([open]) {width:auto;}
 .scenario-actor-bubble {width:180px;max-height:25vh;}
 .scenario-actor-bubble p {font-size:.73rem;}
 .scenario-play-bottom {width:calc(100% - 16px);bottom:8px;}
 .scenario-voice-row {gap:8px;}.scenario-input-dock {padding:10px;}
 .scenario-immersive button {font-size:.72rem;padding:8px 10px;}
 .character-studio-layout {grid-template-columns:1fr;}.character-preview img {height:220px;}
}

.character-prompt .checkbox-field { display:flex; align-items:center; gap:10px; margin:16px 0; }
.character-prompt .checkbox-field input { width:auto; margin:0; }

.scenario-actor-bubble.player-bubble-left { transform:translate(calc(-100% - 55px),-100%); }
.scenario-actor-bubble.player-bubble-right { transform:translate(55px,-100%); }

/* Official provider marks remain legible across the app's themes. */
.social-sign-in-buttons { display: grid; gap: 12px; margin: 24px 0; }
.social-provider { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; width: 100%; border-radius: 8px; font-size: 1rem; font-weight: 500; }
.social-provider svg { flex: 0 0 auto; }
.social-provider-google { background: #fff; color: #1f1f1f; border: 1px solid #747775; }
.social-provider-google:hover:not(:disabled) { background: #f2f2f2; color: #1f1f1f; }
.social-provider-apple { background: #000; color: #fff; border: 1px solid #747775; }
.social-provider-apple:hover:not(:disabled) { background: #222; color: #fff; }
.social-provider:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.auth-divider { display: flex; align-items: center; gap: 16px; margin: 22px 0; color: var(--muted); font-size: .85rem; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--border); }
.social-provider-unavailable { font-size: .85rem; }
.social-provider-unavailable button { padding: 4px 8px; font-size: inherit; }

/* Each word reserves the width of its longer row, so neighboring readings do
   not overlap in scripts such as Chinese that normally have no word spaces. */
.reader-word[data-has-reading="true"] { display: inline-grid; grid-template-columns: minmax(0, max-content); justify-items: center; vertical-align: baseline; margin-inline: .14em; margin-bottom: .35em; max-width: 100%; line-height: 1.45; }
.reader-word-reading { display: block; max-width: 100%; font-size: calc(.65em / max(1, var(--reader-font-scale, 1))); font-weight: 400; line-height: 1.35; color: color-mix(in srgb, var(--text) var(--reader-transliteration-visibility, 45%), transparent); white-space: normal; overflow-wrap: anywhere; user-select: none; }
.reader-pronunciation-controls { margin: 0; }

/* Generated explanation markup is rendered as ordinary text and word controls. */
button.explanation-target-link { display: inline; padding: 0; margin: 0; border: 0; border-radius: 2px; background: none; color: var(--accent); font: inherit; line-height: inherit; letter-spacing: inherit; text-align: inherit; text-transform: none; vertical-align: baseline; box-shadow: none; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .18em; cursor: pointer; }
button.explanation-target-link:hover { background: var(--highlight); text-decoration-style: solid; }
button.explanation-target-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.target-word-popup { z-index: 90; }
.target-word-popup header > strong { min-width: 0; overflow-wrap: anywhere; }
.word-reading-note { position: relative; }
.word-reading-note > summary { cursor: pointer; list-style: none; }
.word-reading-note > summary::-webkit-details-marker { display: none; }
.word-reading-note[open] { flex-basis: 100%; }
.word-reading-note[open] > span { display: block; max-width: 32em; padding: .4em 0; color: var(--text-secondary); font-size: .85rem; }
.word-transliteration-context { flex-wrap: wrap; }
.scenario-action-option { display: flex; align-items: flex-start; gap: 4px; }
.scenario-action-help { max-width: 240px; padding: 10px; }
.scenario-action-help > summary { cursor: pointer; list-style: none; }
.scenario-action-help > summary::-webkit-details-marker { display: none; }
.scenario-action-help p { margin: 8px 0 0; font-size: .85rem; }

/* Contextual reader flashcards */
.reader-learning-heading { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; }
.reader-learning-label { flex: 1; }
.reader-progress-info { display: inline-flex; flex: none; color: var(--muted); }
.reader-learning-heading strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.reader-learning-track { display: flex; width: 100%; height: 12px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: var(--border-strong); }
.reader-learning-segment { flex: 0 0 auto; height: 100%; transition: width .35s ease; }
.reader-learning-segment[data-level="5"], .reader-learning-swatch[data-level="5"] { background: var(--success); }
.reader-learning-segment[data-level="4"], .reader-learning-swatch[data-level="4"] { background: #8bb45a; }
.reader-learning-segment[data-level="3"], .reader-learning-swatch[data-level="3"] { background: #e3c14e; }
.reader-learning-segment[data-level="2"], .reader-learning-swatch[data-level="2"] { background: var(--warning); }
.reader-learning-segment[data-level="1"], .reader-learning-swatch[data-level="1"] { background: var(--danger); }
.reader-learning-segment[data-level="0"], .reader-learning-swatch[data-level="0"] { background: var(--border-strong); }
.reader-learning-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; font-size: .8rem; color: var(--text-secondary); }
.reader-learning-legend li { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 10px; background: var(--surface-subtle); }
.reader-learning-legend li > span:nth-child(2) { flex: 1; }
@media (max-width: 600px) { .reader-learning-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reader-learning-legend strong { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.reader-learning-swatch { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.reader-learning-explanation { margin-top: 20px; color: var(--text-secondary); font-size: .8rem; }
.reader-learning-explanation h3 { margin: 0; color: var(--text); font-size: .9rem; }
.reader-learning-explanation summary { cursor: pointer; font-weight: 600; }
.reader-learning-popup-summary { margin: 0 0 14px; }
.reader-learning-popup-summary > strong { display: block; text-align: end; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.reader-popup .reader-learning-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; }
.reader-popup .reader-learning-legend li { padding: 0; background: none; gap: 6px; }
.reader-learning-explanation p { margin: 8px 0 0; font-size: .8rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .reader-learning-segment { transition: none; } }
.reader-flashcard-toolbar, .flashcard-answer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.reader-flashcard-toolbar > button:first-child { padding: 8px 14px; font-size: .9rem; }
.reader-flashcard-toolbar label { margin: 0; }
.flashcard-legend { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: .8rem; margin-top: 12px; }
.flashcard-legend-gradient { flex: 0 0 64px; height: 9px; border-radius: 5px; background: linear-gradient(90deg, hsl(0 72% 48% / .5), hsl(60 72% 48% / .5), hsl(120 72% 48% / .5)); }
.flashcard-page { width: min(860px, 100%); margin-inline: auto; }
.flashcard-back-link { margin-bottom: 14px; }
.flashcard-page-heading { max-width: none; }
.flashcard-page-heading h1:focus { outline: none; }
.flashcard-page-source { color: var(--text-secondary); font-size: 1.1rem; overflow-wrap: anywhere; margin-bottom: 8px; }
.flashcard-page-heading > .muted { font-size: .85rem; }
.flashcard-settings { margin: 20px 0; border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.flashcard-settings summary { cursor: pointer; font-weight: 650; }
.flashcard-settings > * + * { margin-top: 14px; }
.flashcard-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.flashcard-settings fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 10px; min-width: 0; }
.flashcard-settings legend { font-size: .8rem; font-weight: 650; }
.flashcard-settings .option-row { font-size: .8rem; align-items: flex-start; margin: 8px 0; }
.flashcard-settings input[type="number"] { width: 80px; }
.flashcard-session-progress { display: flex; align-items: center; gap: 16px; font-size: .8rem; color: var(--muted); margin-bottom: 22px; }
.flashcard-session-progress progress { flex: 1; min-width: 50px; height: 7px; accent-color: var(--accent); }
.flashcard-preparation { padding: 14px 16px; margin-bottom: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-subtle); font-size: .85rem; }
.flashcard-preparation p + p { margin-top: 6px; }
.flashcard-preparation progress { display: block; width: 100%; height: 6px; margin-top: 12px; accent-color: var(--accent); }
.flashcard-preparation button, .flashcard-preparation-error { margin-top: 12px; }
.flashcard-preparation-error { color: var(--text-secondary); overflow-wrap: anywhere; }
.flashcard-preparation-error summary { cursor: pointer; }
.flashcard-waiting { padding: clamp(20px, 4vw, 32px); font-size: 1rem; }
.flashcard-waiting h3 { margin: 8px 0 12px; font-size: 1.35rem; }
.flashcard-waiting > p:last-child { margin-top: 20px; font-size: .85rem; }
.reader-context-card { display: grid; gap: 20px; }
.flashcard-task > p + p { margin-top: 8px; font-size: .85rem; line-height: 1.5; }
.flashcard-task-summary { font-size: .85rem; color: var(--text-secondary); }
.flashcard-task-summary span { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; }
.flashcard-context { padding: 30px 12px; border-radius: 14px; background: var(--surface-subtle); text-align: center; font-size: clamp(1.25rem, 4vw, 1.9rem); line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.flashcard-neighbor { color: var(--muted); font-weight: 400; }
.flashcard-focus { color: var(--text); padding: 0 .15em; font-weight: 750; }
.flashcard-writing-meaning { font-size: 1.15rem; font-weight: 600; text-align: center; }
.flashcard-cue-label { margin: 0 0 8px; color: var(--text-secondary); font-size: .85rem; font-weight: 400; line-height: 1.5; text-align: center; }
.flashcard-context-label { margin-top: 24px; }
.flashcard-writing-blank { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; min-width: 3em; }
.flashcard-writing-reading { font-size: .9rem; line-height: 1.5; font-weight: 400; color: var(--text-secondary); }
.flashcard-cue { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 1.05rem; text-align: center; }
.flashcard-reading-help { display: grid; justify-items: center; gap: 10px; margin-top: -6px; }
.flashcard-study-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; }
.flashcard-study-controls > button { font-size: .8rem; }
.flashcard-audio-control { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; font-size: .85rem; color: var(--text-secondary); }
.flashcard-audio-control .speech-control { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.flashcard-audio-control .speech-button { flex-shrink: 0; margin: 0; white-space: nowrap; }
.flashcard-audio-control .speech-error { flex-basis: 100%; }
.flashcard-reading-hint { width: 100%; text-align: center; }
.flashcard-reading-context { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .45em; color: var(--text-secondary); font-size: 1.05rem; }
.flashcard-reading-context strong { color: var(--text); }
.flashcard-reading-context > * { min-width: 0; overflow-wrap: anywhere; }
.flashcard-response-method { display: flex; flex-wrap: wrap; gap: 8px; }
.flashcard-response-method button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.flashcard-answer-actions { justify-content: space-between; }
.flashcard-submit-pending { display: flex; align-items: center; justify-content: center; min-width: 88px; min-height: 40px; margin-inline-start: auto; }
.flashcard-feedback { display: grid; justify-items: start; gap: 12px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-subtle); }
.flashcard-feedback h3 { font-size: 1.8rem; }
.flashcard-adjusted-note { color: var(--text-secondary); font-size: .85rem; }
.flashcard-adjustment { flex: none; }
button.flashcard-adjustment-toggle { width: 44px; min-width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; }
.flashcard-adjustment-options { display: grid; gap: 18px; }
.flashcard-adjustment-options p { font-size: .85rem; line-height: 1.5; }
.flashcard-adjustment-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.flashcard-adjustment-actions button { font-size: .8rem; }
.flashcard-score-picker { display: grid; justify-items: start; gap: 12px; border: 0; padding: 0; margin: 0; min-width: 0; }
.flashcard-score-picker legend { font-weight: 650; margin-bottom: 8px; }
.flashcard-score-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; }
.flashcard-score-options label { position: relative; display: grid; place-items: center; margin: 0; min-height: 44px; padding: 10px 4px; border: 1px solid hsl(var(--score-hue) 72% 48% / .5); border-radius: 8px; background: hsl(var(--score-hue) 72% 48% / .18); color: var(--text); cursor: pointer; font-weight: 650; }
.flashcard-score-options label:hover { background: hsl(var(--score-hue) 72% 48% / .3); }
.flashcard-score-options label.selected { border-color: hsl(var(--score-hue) 72% 48%); background: hsl(var(--score-hue) 72% 48% / .35); box-shadow: inset 0 0 0 1px hsl(var(--score-hue) 72% 48%); font-weight: 800; }
.flashcard-score-options label:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 3px; }
.flashcard-score-options label:has(input:disabled) { opacity: .5; cursor: default; }
.flashcard-score-options input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.explanation-target-text { font-weight: 650; color: var(--text); }
.flashcard-score { --score-color: var(--warning-ink); width: min(100%, 320px); padding-bottom: 6px; }
.flashcard-score-low { --score-color: var(--danger); }
.flashcard-score-high { --score-color: var(--success); }
.flashcard-score-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; }
.flashcard-score-label { margin: 0; color: var(--text-secondary); font-size: .75rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.flashcard-score-value { display: flex; align-items: baseline; gap: 7px; margin: 2px 0 0; }
.flashcard-score-value strong { color: var(--score-color); font-size: 2rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.flashcard-score-value span { color: var(--text-secondary); font-size: .85rem; }
.flashcard-score-verdict { padding: 5px 10px; border-radius: 20px; color: var(--score-color); background: color-mix(in srgb, var(--score-color) 10%, var(--surface)); font-size: .8rem; font-weight: 650; }
.flashcard-score-scale { display: flex; gap: 5px; margin-top: 10px; }
.flashcard-score-scale span { flex: 1; height: 5px; border-radius: 3px; background: var(--border); }
.flashcard-score-scale .filled { background: var(--score-color); }
.flashcard-history { margin-top: 24px; }
.flashcard-history summary { cursor: pointer; color: var(--text-secondary); }
.flashcard-history-row { display: grid; gap: 5px; padding: 12px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.flashcard-history-row small { color: var(--muted); }
.flashcard-history-score { color: var(--text-secondary); font-size: .8rem; font-weight: 600; }
.flashcard-finished { display: grid; gap: 16px; padding-block: 14px; }
.reader-flashcard-microphone { display: grid; gap: 10px; }
.reader-flashcard-microphone [hidden] { display: none !important; }
.reader-flashcard-microphone meter { width: 75px; }
@media (max-width: 520px) {
  .flashcard-pairs { grid-template-columns: 1fr; }
  .reader-flashcard-toolbar { align-items: flex-start; }
}

.flashcard-hints { display: grid; gap: 12px; justify-items: start; margin: 8px 0 20px; }
button.flashcard-hint-toggle { width: 44px; min-width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; }
.flashcard-hint-menu { display: grid; gap: 10px; }
.flashcard-hint-menu p { margin: 0; font-size: .85rem; }
.flashcard-hint-menu button { font-size: .85rem; padding: 10px 14px; text-align: start; }
.flashcard-hint-note { font-size: .8rem; color: var(--text-secondary); }
.flashcard-revealed-hint { width: 100%; padding: 16px; border: 1px dashed var(--border); border-radius: 12px; display: grid; gap: 12px; }
.flashcard-revealed-hint > .muted { font-size: .8rem; }
.flashcard-listening-prompt { background: var(--surface-subtle); padding: 24px; border-radius: 14px; text-align: center; display: grid; gap: 16px; }

/* Introduction-first, continuous reader practice. */
.flashcard-learning-progress { margin: 24px 0; display: grid; gap: 10px; }
.flashcard-learning-progress summary { cursor: pointer; color: var(--text-secondary); }
.flashcard-learning-progress summary > strong { float: right; color: var(--text); font-variant-numeric: tabular-nums; }
.flashcard-learning-track { width: 100%; height: 9px; overflow: hidden; border-radius: 12px; background: var(--border); margin-top: 10px; }
.flashcard-learning-track > span { display: block; height: 100%; border-radius: inherit; transition: width .2s; }
.flashcard-dimension-progress { display: grid; gap: 16px; padding: 20px 0; }
.flashcard-dimension-row { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; }
.flashcard-dimension-row .flashcard-learning-track { grid-column: 1 / -1; }
.flashcard-learning-progress p { font-size: .8rem; line-height: 1.5; }
.flashcard-introduction { display: grid; gap: 18px; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-subtle); }
.flashcard-introduction h3 { font-size: 2rem; margin: 0; }
.flashcard-introduction-reading { color: var(--text-secondary); }
.flashcard-introduction-actions { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.flashcard-introduction-actions .flashcard-introduction-reading { min-width: 0; overflow-wrap: anywhere; text-align: start; }
.flashcard-introduction-contexts { display: grid; gap: 14px; }
.flashcard-introduction-sentence { display: grid; gap: 8px; padding: 14px; background: var(--surface); border-radius: 10px; }
.flashcard-introduction-sentence p { white-space: pre-wrap; overflow-wrap: anywhere; }
.flashcard-example-row { display: flex; align-items: flex-start; gap: 10px; }
.flashcard-example-text { flex: 1; min-width: 0; font-size: 1.1rem; line-height: 2; }
.flashcard-example-actions { display: flex; flex-wrap: wrap; gap: 4px; width: 36px; flex: none; }
.flashcard-example-actions .speech-button { margin: 0; }
.flashcard-example-translation { border-top: 1px solid var(--border); padding-top: 10px; color: var(--text-secondary); line-height: 1.5; }
.stacked-reading { display: inline-flex; flex-direction: column; vertical-align: top; align-items: center; margin-inline: .12em; padding-block: .2em; line-height: 1.5; }
.stacked-reading > small { font-size: .68em; font-weight: 400; color: var(--muted); line-height: 1.4; }
.flashcard-familiarity { border: 0; padding: 0; margin: 0; min-width: 0; }
.flashcard-familiarity legend { font-weight: 650; margin-bottom: 10px; }
.flashcard-familiarity-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, 1vw, 8px); margin-top: 14px; }
.flashcard-familiarity-options button { display: grid; grid-template-rows: auto 1fr; gap: 5px; align-items: start; width: 100%; min-width: 0; text-align: center; padding: 12px 4px; background: hsl(var(--familiarity-hue) 72% 48% / .18); border: 1px solid hsl(var(--familiarity-hue) 72% 48% / .5); color: var(--text); }
.flashcard-familiarity-options button:hover:not(:disabled) { background: hsl(var(--familiarity-hue) 72% 48% / .3); border-color: hsl(var(--familiarity-hue) 72% 48%); }
.flashcard-familiarity-options strong { font-size: 1.3rem; }
.flashcard-familiarity-options span { font-size: .75rem; line-height: 1.35; overflow-wrap: anywhere; }
.flashcard-learning-settings { display: grid; gap: 14px; }

/* Durable purchased and redeemed credit balances. */
.credit-pools { display: grid; gap: 18px; }
.credit-redemption { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
.credit-redemption label { flex: 1; min-width: 180px; }
.credit-pool-list { padding: 0; margin: 0; list-style: none; display: grid; gap: 12px; }
.credit-pool-row { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 18px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 12px; }
.credit-pool-summary { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.credit-pool-summary p { flex-basis: 100%; }
.credit-pool-expiry small { display: inline; font-size: inherit; }
.credit-pool-info-button { width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 1.1rem; }
.credit-pool-expired { color: var(--text-secondary); background: var(--border); }
.credit-pool-bubble { max-height: calc(100dvh - 32px); overflow-y: auto; position: absolute; z-index: 40; top: 58px; right: 12px; width: min(340px, calc(100% - 24px)); padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-raised); }
.credit-pool-bubble header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.credit-pool-bubble dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: .85rem; }
.credit-pool-bubble dt { color: var(--text-secondary); }
.credit-pool-bubble dd { margin: 0; overflow-wrap: anywhere; }
.credit-pool-bubble small { font-size: inherit; }

/* Contextual vocabulary lists. */
.vocabulary-list-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 18px; }
.vocabulary-list-link { display: inline-flex; gap: 10px; align-items: center; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: .9rem; font-weight: 600; text-decoration: none; }
.vocabulary-list-link:hover { border-color: var(--border-strong); color: var(--text); }
.vocabulary-list-link span { padding: 1px 8px; border-radius: 99px; background: var(--surface-subtle); font-size: .76rem; }
.vocabulary-list-link.active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.vocabulary-list-link.active span { background: var(--surface); }
button.vocabulary-list-link.new-list { gap: 6px; border-style: dashed; background: transparent; color: var(--text-secondary); }
.vocabulary-list-create { max-width: 620px; margin-bottom: 18px; }
.vocabulary-list-create form { display: grid; gap: 14px; }
.vocabulary-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 16px; }
.vocabulary-tools .search-field { flex: 1; min-width: min(260px, 100%); padding-block: 2px; }
.vocabulary-collection { display: grid; gap: 4px; }
.vocabulary-no-match { padding: 18px 0; }
.vocabulary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 18px; }
.vocabulary-word { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow-wrap: anywhere; }
.vocabulary-word p, .vocabulary-word h3 { margin: 0; }
.vocabulary-word blockquote { margin: 4px 0; font-size: .92rem; }
.vocabulary-word-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vocabulary-word-heading h3 { font-size: 1.3rem; letter-spacing: -.01em; }
.vocabulary-reading { color: var(--text-secondary); font-size: .9rem; }
.vocabulary-tags, .vocabulary-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vocabulary-tags .tag { margin: 0; text-decoration: none; }
.vocabulary-list-settings, .vocabulary-word-settings { margin: 4px 0 0; }
.vocabulary-word-settings > summary, .vocabulary-list-settings > summary { width: fit-content; color: var(--muted); font-size: .84rem; font-weight: 600; cursor: pointer; }
.vocabulary-list-settings { margin-bottom: 14px; }
.vocabulary-list-settings > label, .vocabulary-memberships { margin-top: 12px; }
.vocabulary-list-settings > label { max-width: 400px; }
.vocabulary-list-settings .vocabulary-actions { margin-top: 12px; }
.vocabulary-memberships .option-row { margin-top: 6px; }
.vocabulary-word-settings .vocabulary-actions { margin-top: 10px; }
.vocabulary-word-settings .vocabulary-actions button { padding: 7px 12px; font-size: .86rem; }
.vocabulary-actions + p { margin-top: 10px; font-size: .84rem; }
.vocabulary-empty { display: grid; justify-items: center; padding-bottom: 32px; }
.button-row.centered { justify-content: center; }
.vocabulary-save { position: relative; max-width: 100%; font-weight: normal; font-size: .9rem; }
.vocabulary-save > button { padding: 7px 13px; font-size: .86rem; }
.vocabulary-save > button.word-list-button { width: 32px; min-width: 32px; height: 32px; padding: 0; border-radius: 8px; }
.vocabulary-save > button.word-list-button.in-custom-list { background: var(--accent); color: var(--accent-text); }
.vocabulary-save > button.word-list-button.in-custom-list:hover { background: var(--accent-hover); }
.vocabulary-save-notice { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); margin: 0; color: var(--muted); font-size: .75rem; white-space: nowrap; }
.vocabulary-save > .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.anchored-popover { display: none; pointer-events: auto; position: fixed; inset: auto; z-index: 120; width: min(380px, calc(100vw - 24px)); height: max-content; max-height: calc(100dvh - 24px); box-sizing: border-box; margin: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-raised); font-family: var(--font-sans); font-size: .9rem; font-weight: normal; text-align: start; white-space: normal; }
.anchored-popover:popover-open, .anchored-popover.open { display: grid; align-content: start; gap: 12px; animation: popover-in .14s var(--ease); }
.anchored-popover-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.anchored-popover-heading h2 { flex: 1; min-width: 0; overflow-wrap: anywhere; margin: 0; font-size: 1rem; }
.anchored-popover-heading > button { flex: none; }
.anchored-popover-heading[data-title-hidden="true"] { justify-content: flex-end; }
.popover-title-info { flex: none; display: flex; }
.popover-title-info > .icon-button { width: 30px; height: 30px; padding: 6px; }
.vocabulary-save-menu { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; min-width: 0; }
.vocabulary-membership-options { display: grid; gap: 8px; max-height: min(40dvh, 300px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; }
button.vocabulary-membership-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-align: start; white-space: normal; box-shadow: none; }
.vocabulary-membership-option > span:not(.vocabulary-list-art) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vocabulary-membership-option > .vocabulary-list-art { flex: none; width: 30px; height: 30px; font-size: 1.25rem; border-radius: 7px; }
.vocabulary-membership-option > svg { flex: none; }
button.vocabulary-membership-option[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
button.vocabulary-membership-option:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
button.vocabulary-membership-option[aria-pressed="true"]:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.vocabulary-membership-saving { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; }
.vocabulary-membership-saving .word-illustration-spinner { width: 16px; height: 16px; }
.vocabulary-save-menu p { font-size: .85rem; margin: 0; line-height: 1.5; }
.vocabulary-inline-create { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; border-top: 1px solid var(--border); padding-top: 14px; }
.vocabulary-inline-create > label { flex: 1 1 140px; min-width: 0; }
.flashcard-introduction-step { display: grid; gap: 14px; }


/* ---------- Reading screen ---------- */
.reader-view { max-width: 860px; margin: 0 auto; }
.reader-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.reader-title h1 { flex: 1 1 300px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.2; }
.reader-document-actions { position: sticky; top: calc(var(--header-height) + var(--screen-header-offset, 0px)); z-index: 78; isolation: isolate; container: reader-toolbar / inline-size; display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0 calc(10px - var(--reading-padding)) 8px; padding-block: 4px; }
.reader-document-actions::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset-block: 0; left: calc(var(--reader-toolbar-sidebar, var(--sidebar-width)) - var(--reader-toolbar-x, 0px)); width: calc(var(--reader-toolbar-viewport, 100%) - var(--reader-toolbar-sidebar, var(--sidebar-width))); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--sidebar) 92%, transparent); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity .18s ease; }
.reader-document-actions[data-docked="true"]::before { opacity: 1; }
.reader-document-actions > .speech-control { min-width: 0; }
.reader-document-actions .speech-button-labeled { min-width: 0; }
.reader-display-actions { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.reader-document-actions > .reader-display-actions { flex-wrap: nowrap; min-width: 0; max-width: 100%; }
.reader-display-actions > button.icon-button { width: 44px; min-width: 44px; height: 44px; flex: none; color: var(--muted); background: transparent; }
/* Fit the actual reader width, including sidebars and embedded readers. */
.reader-document-actions > .speech-control { flex: none; }
@container reader-toolbar (max-width: 440px) {
    .speech-button-labeled > .speech-button-label { display: none; }
    .speech-button-labeled { width: 44px; height: 44px; padding: 4px; gap: 0; }
}
@container reader-toolbar (max-width: 350px) {
    .reader-display-actions { gap: 0; }
    .reader-display-actions > button.icon-button,
    .speech-button-labeled { width: calc((100cqi - 12px) / 7); min-width: 0; padding: 0; }
    .speech-button-labeled > .speech-button-icon { width: min(2.25rem, 100%); }
}
.reader-display-actions > button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-soft); }
/* Touch browsers can leave :hover active after tapping. Keep these controls'
   base colors above the generic icon hover rule; keyboard focus stays visible. */
@media (hover: hover) and (pointer: fine) {
    .reader-display-actions > button.icon-button:hover { color: var(--text); background: var(--surface-subtle); }
    .reader-display-actions > button[aria-pressed="true"]:hover { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
}
.reader-progress-icon { display: block; }
.reader-progress-toggle[aria-pressed="true"] .reader-progress-icon-low { stroke: var(--danger); }
.reader-progress-toggle[aria-pressed="true"] .reader-progress-icon-medium { stroke: var(--warning); }
.reader-progress-toggle[aria-pressed="true"] .reader-progress-icon-high { stroke: var(--success); }
.reader-progress-icon-underlines { transition: opacity .15s ease; }
.reader-progress-toggle[aria-pressed="false"] .reader-progress-icon-underlines { opacity: .4; }
.reader-readings-icon { display: block; }
.reader-readings-icon-romanization { transition: opacity .15s ease; }
.reader-readings-toggle[aria-pressed="false"] .reader-readings-icon-romanization { opacity: .4; }
@media (prefers-reduced-motion: reduce) { .reader-readings-icon-romanization { transition: none; } }
/* Keep secondary reader controls accessible without taking space from the text. */
.reader-popup { inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); width: min(640px, calc(100vw - 24px)); max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 0; overflow: clip; border: 1px solid var(--border); border-radius: 20px; color: var(--text); background: var(--surface); box-shadow: var(--shadow-raised); }
.reader-popup[open] { display: flex; flex-direction: column; }
.reader-popup[data-wide="true"] { width: min(1000px, calc(100vw - 24px)); }
.reader-popup::backdrop { background: var(--scrim); }
.reader-popup-heading { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.reader-popup-heading h2 { margin: 0; font-size: 1.1rem; }
.reader-popup-heading > button { flex: none; }
.reader-popup-body { min-height: 0; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.reader-popup .flashcard-progress-matrix { padding: 20px 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.reader-popup .reader-text-actions { margin-top: 0; }
.reader-popup.settings-popup { width: min(920px, calc(100vw - 24px)); max-height: min(900px, calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
.settings-popup .reader-popup-body { background: var(--bg); }
.settings-popup .settings-layout { max-width: none; }
@media (max-width: 600px) { .reader-popup-heading { padding: 10px 14px; } .reader-popup-body { padding: 16px; } }
.reader-enrichment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.reader-debug { min-width: 0; margin: 18px 0 0; padding: 16px; border-style: dashed; }
.reader-debug-output { max-width: 100%; max-height: min(50dvh, 420px); margin: 14px 0 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .75rem; }
.chip-toggle { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 12px 6px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: .86rem; font-weight: 600; cursor: pointer; }
.chip-toggle:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.chip-toggle input { width: 16px; height: 16px; }
.inline-select { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: .86rem; }
.inline-select select { width: auto; padding-block: 6px; }
.reader-page-count { font-variant-numeric: tabular-nums; }

/* ---------- Practice heroes (Words and Role-play) ---------- */
.practice-hero { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; overflow: hidden; padding: 26px 28px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--surface) 45%, var(--accent-soft)); box-shadow: var(--shadow); }
.practice-hero-copy { display: grid; gap: 6px; max-width: 560px; }
.practice-hero-copy h2 { margin: 2px 0 0; font-size: 1.5rem; letter-spacing: -.02em; }
.practice-hero-copy p:not(.eyebrow) { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.practice-hero-copy .button-row { margin-top: 12px; }
button.practice-hero-button { padding: 13px 22px; font-size: 1rem; box-shadow: var(--shadow); }
.roleplay-hero { padding-right: 200px; }
.roleplay-art { position: absolute; right: 26px; bottom: 0; top: 0; width: 170px; }
.roleplay-bubble { position: absolute; display: block; border-radius: 22px; box-shadow: var(--shadow); }
.roleplay-bubble.one { top: 26px; left: 0; width: 120px; height: 52px; border-bottom-left-radius: 4px; background: var(--surface); background-image: linear-gradient(var(--border) 3px, transparent 3px), linear-gradient(var(--border) 3px, transparent 3px); background-size: 70px 3px, 50px 3px; background-position: 18px 18px, 18px 30px; background-repeat: no-repeat; }
.roleplay-bubble.two { top: 92px; right: 0; width: 120px; height: 52px; border-bottom-right-radius: 4px; background: var(--accent); background-image: linear-gradient(rgba(255,255,255,.55) 3px, transparent 3px), linear-gradient(rgba(255,255,255,.55) 3px, transparent 3px); background-size: 74px 3px, 44px 3px; background-position: 18px 18px, 18px 30px; background-repeat: no-repeat; }
.roleplay-bubble.three { top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: var(--marigold); box-shadow: none; animation: gentle-float 2.6s ease-in-out infinite; }
.choice-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.choice-card { position: relative; display: grid; align-content: start; gap: 3px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font-weight: 500; cursor: pointer; }
.choice-card:hover { border-color: var(--accent); }
.choice-card.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--focus); }
.choice-card strong { font-size: .95rem; }
.choice-card small { color: var(--muted); font-size: .82rem; line-height: 1.4; }

/* ===================================================================   Responsive layout
   ========================================================================== */
@media (max-width: 1080px) {
  .home-grid.has-sidebar { grid-template-columns: minmax(0, 1fr); }
  .home-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
}

@media (max-width: 900px) {
  .entry-split { grid-template-columns: 1fr; width: min(520px, 100%); }
  .entry-aside { display: none; }
  .level-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reader-actions { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .roleplay-hero { padding-right: 28px; }
  .roleplay-art { display: none; }
  .choice-cards { grid-template-columns: 1fr; }
  .reader-display-grid { grid-template-columns: 1fr; }
  .practice-hero { padding: 22px; }
  .app-shell, .app-shell.sidebar-collapsed { --sidebar-width: min(300px, 86vw); --content-inset-start: 0px; grid-template-columns: minmax(0, 1fr); }
  .app-shell > .workspace { grid-column: 1; }
  .reader-document-actions { --reader-toolbar-sidebar: 0px; }
  .app-header { gap: 6px; padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); }
  /* Keep the drawer's frost on a dedicated layer so compositing its slide-in
     transition over the scrim does not flatten the page behind the blur. */
  .sidebar { z-index: 85; width: var(--sidebar-width); padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); box-shadow: var(--shadow-raised); transform: translateX(-104%); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sidebar::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--sidebar); pointer-events: none; }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sidebar::before { background: color-mix(in srgb, var(--sidebar) 88%, transparent); backdrop-filter: saturate(1.3) blur(24px); -webkit-backdrop-filter: saturate(1.3) blur(24px); }
  }
  .sidebar-collapsed .sidebar { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .sidebar-expanded .sidebar { transform: none; }
  .app-shell button.sidebar-scrim { display: none; }
  .sidebar-expanded button.sidebar-scrim { display: block; position: fixed; z-index: 84; inset: var(--header-height) 0 0; width: 100%; height: auto; padding: 0; border-radius: 0; background: var(--scrim); animation: fade-in .2s ease both; }
  .sidebar .profile-menu-popover, .sidebar-collapsed .sidebar .profile-menu .profile-menu-popover { top: calc(100% + 8px); inset-inline-start: 0; width: 100%; }
  .workspace { padding: 22px max(16px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .page-header { margin-bottom: 20px; }
  h1 { font-size: 1.8rem; }
  .home-hero h1 { gap: 14px; font-size: 2.25rem; }
  .activity-grid { grid-template-columns: 1fr; }
  .continue-card { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 18px; }
  .continue-action { grid-column: 1 / -1; justify-content: center; }
  .first-story { grid-template-columns: 1fr; gap: 10px; padding: 22px; }
  .first-story-art { height: 96px; max-width: 150px; }
  .reader-action-card { padding: 18px; }
  .entry-topbar { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: 18px; }
}

@media (max-width: 540px) {
  .surface { padding: 18px; border-radius: 14px; }
  .row, .inline-control { grid-template-columns: 1fr; }
  .inline-control button { width: 100%; }
  .language-card { min-height: 60px; gap: 10px; padding: 8px 12px; }
  .language-flags { gap: 8px; margin-block: -10px; font-size: 2.9rem; }
  .character-rendering-grid, .transliteration-grid { grid-template-columns: 1fr; }
  .level-picker { grid-template-columns: 1fr; }
  .entry-shell { padding: 0 max(12px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .entry-panel { padding: 24px 20px; border-radius: 18px; }
  .onboarding-active-question, .onboarding-review-screen { padding: 22px 16px; border-radius: 18px; }
  .onboarding-steps li:not(.active) .onboarding-step-label { visibility: hidden; }
  .search-field.large { padding-left: 14px; }
  .search-field.large input { font-size: 1rem; }
  .search-field.large button { padding: 10px 14px; }
  .document-row { padding: 10px; }
  .reading-page { --reading-padding: 18px; padding-block: 8px 20px; border-radius: 14px; }
  .reader-line { font-size: 1.12rem; }
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rating-row { display: grid; grid-template-columns: 1fr 1fr; }
  .rating-row button { width: 100%; }
  .gateway-actions { flex-direction: column; align-items: stretch; }
  .gateway-actions button { width: 100%; }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

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

/* Character practice: warm paper, quiet grid, jade ink and gold guidance. */
.writing-practice { margin: 1.4rem 0; padding: clamp(1rem, 3vw, 1.6rem); border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(145deg, var(--surface), var(--bg-accent)); }
.writing-slots-row { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 0 1.3rem; }
.writing-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; }
.writing-restart { flex: none; }
.writing-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 3rem; padding: .2rem .45rem; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 1.25rem; font-weight: 600; transition: background .22s, border-color .22s, color .22s, transform .22s, box-shadow .22s; }
.writing-slot.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); transform: translateY(-2px); }
.writing-slot.correct { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.writing-slot.assisted { background: var(--warning-soft); color: var(--warning-ink); border-color: var(--warning); }
.writing-slot.wrong { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.writing-slot.ghost { color: var(--warning-ink); background: var(--warning-soft); border: 1.5px dashed var(--warning); opacity: .68; }
.writing-slot.literal { border-color: transparent; background: transparent; min-width: .5rem; padding: .1rem; }
.writing-canvas-wrap { position: relative; max-width: 390px; margin: 0 auto 1rem; border: 1px solid var(--border-strong); border-radius: 20px; overflow: hidden; background: radial-gradient(ellipse at 25% 15%, var(--surface), var(--surface-subtle)); box-shadow: inset 0 0 40px var(--surface), var(--shadow); }
.writing-canvas { display: block; width: 100%; aspect-ratio: 1; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.writing-canvas-caption { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: .55rem; letter-spacing: .2em; color: var(--muted); pointer-events: none; opacity: .65; }
.writing-practice[data-disabled="true"] .writing-canvas { cursor: wait; opacity: .7; }
.writing-keyboard-label { display: flex; flex-direction: column; gap: .4rem; max-width: 390px; margin: 0 auto; }
.writing-keyboard { text-align: center; font-size: 1.2rem; padding: .9rem; }
.writing-keyboard[data-hinted="true"]::placeholder { color: var(--warning-ink); opacity: .7; }
.writing-practice[data-voice="true"] .writing-keyboard-label { display: none; }
.writing-status { text-align: center; min-height: 2.8em; color: var(--text-secondary); font-size: .9rem; margin: .8rem 0; }
.writing-status:empty { display: none; }
.writing-footer { display: flex; justify-content: flex-end; margin-top: 12px; }
.icon-button.writing-hint-button { border-radius: 50%; }
.writing-practice[data-kind="complete"] .writing-footer { display: none; }
.writing-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 1rem 0 .6rem; font-size: .75rem; }
.writing-key::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .35rem; }
.writing-key.correct::before { background: var(--success); }
.writing-key.wrong::before { background: var(--danger); }
.writing-key.assisted::before { background: var(--warning); }
.writing-help, .writing-scoring { font-size: .8rem; line-height: 1.55; }
.writing-scoring { display: grid; gap: 10px; color: var(--muted); }
.writing-scoring h4, .writing-scoring p { margin: 0; }
.writing-scoring h4 { font-size: inherit; }
.writing-complete { text-align: center; font-weight: 650; color: var(--success); padding: .8rem; }
.writing-unavailable { padding: 1rem; background: var(--surface-subtle); border-radius: 12px; }
.writing-practice [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .writing-slot { transition: none; } }

/* Default model choices are regular settings, independent of developer tools. */
.model-profile-heading { display: flex; align-items: center; gap: 8px; margin-top: 24px; margin-bottom: 10px; }
.model-profile-heading .field-label { margin: 0; }
.model-profile-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.model-profile-choices .model-profile-choice { width: 100%; min-width: 0; justify-content: center; padding: 12px 8px; }
.model-profile-choice[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent); }
.model-profile-cost { margin: 16px 0 4px; font-size: .9rem; font-weight: 650; }
.model-profile-cost-detail { max-width: 620px; margin: 0; }
.model-profile-info-name { margin: 0 0 16px; }
.model-profile-models { display: grid; gap: 4px; margin: 0; }
.model-profile-models dt { color: var(--text-secondary); font-size: .8rem; }
.model-profile-models dd { margin: 0 0 12px; font-weight: 600; overflow-wrap: anywhere; }
.model-profile-models .model-profile-info-group { font-weight: 700; color: var(--text); margin: 12px 0 4px; }
@media (max-width: 480px) { .model-profile-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.model-settings-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; margin-top: 24px; }
.model-settings-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.model-settings-group legend { margin-bottom: 8px; font-weight: 700; }
.model-settings-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.model-settings-row select { flex: 0 1 190px; min-width: 0; max-width: 100%; padding: 8px 10px; }
.reader-text-actions { margin: 12px 0; }
.reader-regenerate { position: relative; }
.reader-regenerate-menu { position: absolute; z-index: 20; inset-block-start: calc(100% + 6px); inset-inline-end: 0; width: min(320px, calc(100vw - 64px)); display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-raised); }
.reader-regenerate-menu label { display: grid; gap: 8px; }
.reader-regenerate-menu p { margin: 0; font-size: .8rem; }
.reader-regenerate-menu .button-row { margin: 0; }
.reader-word-help-model { margin: 0 0 16px; font-size: .82rem; overflow-wrap: anywhere; }
.reader-word-help-model > span { color: var(--text-secondary); }
@media (max-width: 600px) {
  .reader-regenerate:has(.reader-regenerate-menu) { width: 100%; }
  .reader-regenerate-menu { position: static; width: 100%; margin-top: 6px; }
}

.word-compounds { margin: .65rem 0; font-size: .85rem; font-weight: 400; }
.word-compounds-label { color: var(--muted); font-size: .75rem; }
.word-compounds ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.word-compounds li { display: flex; max-width: 220px; }
.word-compounds .explanation-target-link { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .35rem .6rem; border: 1px solid var(--border); border-radius: .6rem; font-weight: 600; text-decoration: none; }
.word-compound-meaning { color: var(--text-secondary); font-size: .75rem; font-weight: 400; }
.word-compound-group { margin-block: .4rem; }

/* Optional story illustrations sit at the sentence they depict. */
.reader-illustration-controls { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
.reader-illustration-controls p { font-size: .85rem; margin: 8px 0; }
.reader-illustration-controls label { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
.reader-illustration-status { display: flex; align-items: center; gap: 8px; color: var(--accent-ink); }
.reader-story-image { position: relative; margin: 1.4em auto; max-width: 900px; overflow: hidden; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); break-inside: avoid; }
.reader-story-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; animation: fade-in .5s ease; }
.reader-story-image-placeholder { display: grid; place-content: center; gap: 10px; padding: 24px; aspect-ratio: 3 / 2; min-height: 0; box-sizing: border-box; justify-items: center; text-align: center; font: .9rem/1.5 var(--font-sans); background: radial-gradient(ellipse at 30% 20%, var(--accent-soft), var(--surface-subtle)); }
.story-image-progress { width: 48px; height: 48px; fill: none; stroke-width: 3; }
.story-image-progress-track { stroke: var(--border); }
.story-image-progress-arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 35 91; transform-origin: center; animation: story-image-spin 1.5s linear infinite; }
@keyframes story-image-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .story-image-progress-arc { animation: none; } }

.story-image-toolbar { position: absolute; z-index: 1; color: #fff; background: rgb(20 25 32 / 32%); border: 1px solid rgb(255 255 255 / 24%); box-shadow: 0 2px 10px rgb(0 0 0 / 14%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.story-image-toolbar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.story-image-toolbar { bottom: 12px; right: 12px; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; font: .8rem/1.5 var(--font-sans); direction: ltr; }
.story-image-history { display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.story-image-history .muted { color: inherit; min-width: 36px; text-align: center; }
.story-image-toolbar button.icon-button { width: 36px; min-width: 36px; height: 36px; padding: 0; color: inherit; border: 0; box-shadow: none; background: transparent; }
.story-image-toolbar button.icon-button:hover:not(:disabled) { background: rgb(255 255 255 / 18%); color: #fff; }
.story-image-history + .story-image-regenerate { margin-left: 4px; }
.story-image-regenerate[data-regenerating="true"] .shell-icon { animation: story-image-spin 1.5s linear infinite; }
.reader-story-image .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.reader-story-image .story-image-error { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 68px; margin: 0; padding: 10px 12px; max-height: calc(100% - 128px); overflow: auto; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); font: .85rem/1.5 var(--font-sans); }
@media (prefers-reduced-motion: reduce) { .story-image-regenerate[data-regenerating="true"] .shell-icon { animation: none; } }

/* Meaning-specific illustrations shared by reader bubbles and flashcards. */
.word-illustration { position: relative; width: min(100%, 240px); margin: 16px auto; overflow: hidden; border-radius: 16px; background: var(--surface-subtle); }
.word-illustration > img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; animation: fade-in .3s ease both; }
.word-illustration-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 150px; padding: 16px; color: var(--text-secondary); font-size: .78rem; text-align: center; }
.word-illustration-spinner { width: 28px; height: 28px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: word-image-spin 1s linear infinite; }
.passage-illustration { width: 100%; }
.passage-illustration > img { aspect-ratio: 3 / 2; }
.word-illustration-error { min-height: 110px; }
.word-illustration-error-detail { max-height: 5em; overflow: auto; overflow-wrap: anywhere; }
.word-illustration-error button { font-size: .8rem; padding: 6px 10px; }
@keyframes word-image-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .word-illustration > img, .word-illustration-spinner { animation: none; } }

/* Full-screen study: the app remains visible, softly out of focus behind it. */
.flashcard-stage { --study-height: 100dvh; --study-top: 0px; position: fixed; inset: var(--study-top) 0 auto; width: 100%; max-width: none; height: var(--study-height); max-height: none; margin: 0; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border: 0; overflow: hidden; color: var(--text); background: transparent; }
.flashcard-stage::backdrop { background: rgb(8 12 18 / .68); backdrop-filter: blur(12px) saturate(.55); -webkit-backdrop-filter: blur(12px) saturate(.55); animation: study-backdrop-in .3s ease both; }
.flashcard-stage[open], .study-session { display: grid; grid-template-rows: 56px minmax(0, 1fr); gap: 20px; }
.study-session { min-height: 0; height: 100%; grid-row: 1 / -1; grid-column: 1; }
.study-loading { grid-row: 2; place-self: center; display: flex; align-items: center; gap: 12px; padding: 14px 22px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); }
.study-topbar { position: relative; z-index: 4; display: flex; align-items: center; gap: 16px; width: min(760px, 100%); justify-self: center; padding: 6px 8px 6px 20px; border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 8px 32px rgb(0 0 0 / .2); }
.study-source { min-width: 0; flex: 1; display: grid; gap: 1px; }
.study-source span { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-secondary); }
.study-source strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .85rem; font-weight: 650; }
.study-management { display: flex; align-items: center; gap: 4px; }
.study-close { flex: none; border-radius: 50%; }
.study-menu > summary { display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; list-style: none; padding: 10px; border-radius: 999px; font-size: .8rem; font-variant-numeric: tabular-nums; }
.study-menu > summary::-webkit-details-marker { display: none; }
.study-menu > summary:hover, .study-menu[open] > summary { background: var(--accent-soft); color: var(--accent-ink); }
.study-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.study-menu-panel { position: absolute; top: calc(100% + 12px); right: 0; width: min(420px, 100%); max-height: calc(var(--study-height) - 108px); overflow: auto; overscroll-behavior: contain; padding: 22px; display: grid; gap: 14px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: 0 20px 60px rgb(0 0 0 / .3); }
.study-menu-panel h3 { margin: 0; font-size: 1.05rem; }
.study-menu-panel > p { font-size: .85rem; }
.study-menu-panel .flashcard-learning-progress, .study-menu-panel .flashcard-settings, .study-menu-panel .flashcard-preparation { margin: 0; }
.study-menu-panel .flashcard-history-row { padding-top: 0; }
.flashcard-session-vocabulary { list-style: none; margin: 0; padding: 0; max-height: 55dvh; overflow-y: auto; overscroll-behavior: contain; }
.flashcard-session-vocabulary > li { display: grid; grid-template-columns: minmax(0, 1fr) 88px; align-items: center; gap: 16px; padding: 12px 0; }
.flashcard-session-vocabulary > li + li { border-top: 1px solid var(--border); }
.flashcard-session-word { display: grid; gap: 4px; overflow-wrap: anywhere; }
.flashcard-session-word > strong { font-size: 1.1rem; }
.flashcard-session-word > span { color: var(--text-secondary); font-size: .85rem; }
.flashcard-session-word-progress { display: grid; gap: 6px; text-align: end; font-size: .85rem; }
/* Reserve a stable answer area within each practice mode. */
.study-scene { grid-row: 2; min-width: 0; min-height: 0; width: min(660px, 100%); justify-self: center; container-type: inline-size; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, clamp(130px, 30%, 280px)); gap: 18px; }
.study-question { display: contents; }
.study-card { position: relative; width: 100%; height: 100%; max-height: 200cqw; align-self: center; min-height: 0; overflow: hidden; isolation: isolate; border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: 28px; background: var(--surface); box-shadow: 0 24px 70px rgb(0 0 0 / .28), 0 2px 8px rgb(0 0 0 / .1); animation: study-card-in .5s cubic-bezier(.16,1,.3,1) both; transform-origin: 50% 55%; }
.study-card::before { content: ''; position: absolute; z-index: 1; inset: 0 24px auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 22%, transparent), transparent); pointer-events: none; }
.study-card[data-kind="feedback"] { animation: study-card-flip .58s cubic-bezier(.2,.8,.2,1) both; }
.study-card-scroll { --study-card-padding: clamp(22px, 4vw, 36px); height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; overflow-wrap: anywhere; }
.study-card-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; border-radius: inherit; }
.study-card-body { padding: var(--study-card-padding); }
.study-card-header { position: sticky; top: 0; z-index: 3; padding: 22px var(--study-card-padding); background: var(--surface); }
.study-card-header::after { content: ''; position: absolute; inset: auto var(--study-card-padding) 0; height: 1px; background: var(--border); opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.study-card[data-scrolled="true"] .study-card-header::after { opacity: 1; }
.study-card-header .study-card-eyebrow { margin: 0; }
.study-card-header + .study-card-body { padding-top: 14px; }
.study-card:not(:has(.study-card-header)) .study-card-body { min-height: 100%; display: grid; }
.study-card-eyebrow { color: var(--text-secondary); font-size: .68rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 22px; text-align: center; }
.study-card .flashcard-context { background: none; padding: 16px 0 28px; font-size: clamp(1.4rem, 3.6vw, 2.1rem); }
.study-card .flashcard-cue { display: block; font-size: 1.1rem; }
.study-card .flashcard-introduction, .study-card .flashcard-feedback { border: 0; background: none; padding: 0; border-radius: 0; }
.study-card .flashcard-introduction { text-align: center; justify-items: center; gap: 14px; }
.study-card .flashcard-introduction h3, .study-card .flashcard-feedback h3 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.2; letter-spacing: -.02em; }
.study-card .flashcard-introduction .study-card-eyebrow { margin-bottom: 0; }
.study-card .flashcard-introduction-contexts { width: 100%; text-align: start; margin-top: 10px; }
.study-card .flashcard-introduction-contexts h4 { font-size: .8rem; color: var(--text-secondary); }
.study-card .flashcard-introduction-sentence { background: var(--surface-subtle); }
.study-card .word-illustration { width: min(100%, 180px); margin-block: 8px; overflow: visible; background: transparent; }
.study-card .word-illustration > img { border-radius: 16px; }
.study-card .word-illustration .story-image-toolbar { position: static; width: fit-content; max-width: 100%; margin: 10px auto 0; background: var(--surface-subtle); color: var(--text); border-color: var(--border); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.study-card .word-illustration .story-image-toolbar button.icon-button:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.study-card .word-illustration .story-image-toolbar button:focus-visible { outline-color: var(--accent); }
.study-card .flashcard-feedback { position: relative; }
.study-card .flashcard-score { width: 100%; }
.study-card .flashcard-task-summary { font-size: .76rem; }
.study-card .flashcard-hints { margin-bottom: 0; }
.study-card .flashcard-listening-prompt { background: var(--surface-subtle); }
.study-dock { align-self: end; justify-self: center; width: 100%; max-height: 100%; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 18px 22px; border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 12px 40px rgb(0 0 0 / .25); animation: study-dock-in .4s .1s ease both; }
/* Familiarity is a rapid sequence: keep answer targets stationary and usable
   immediately instead of replaying a delayed slide on every rating. */
.flashcard-session .study-introduction-dock { animation: none; }
.flashcard-session .study-card[data-kind="introduction"] { animation: study-familiarity-in .16s ease-out both; }
@keyframes study-familiarity-in { from { opacity: .6; } to { opacity: 1; } }
.study-dock-compact { width: fit-content; max-width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.study-dock button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.study-answer-dock { display: grid; gap: 12px; }
.study-dock .flashcard-task { display: flex; align-items: center; justify-content: center; gap: 6px; }
.study-dock .flashcard-task-title { font-size: 1rem; margin: 0; text-align: center; }
.study-dock .flashcard-task-info { flex: 0 0 32px; width: 32px; height: 32px; padding: 6px; }
.flashcard-answer-help { display: grid; gap: 12px; font-size: .85rem; line-height: 1.5; }
.flashcard-answer-input { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 8px 10px; }
.flashcard-answer-editor { position: relative; grid-column: 1; grid-row: 1; min-width: 0; }
.study-dock .flashcard-answer-editor :is(input, textarea) { display: block; width: 100%; margin: 0; }
.flashcard-answer-editor[data-recording="true"] :is(input, textarea) { visibility: hidden; }
.flashcard-dictation { display: contents; }
.flashcard-dictation .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.flashcard-dictation-preview { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px; overflow: auto; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-subtle); }
.flashcard-dictation-preview strong { display: flex; align-items: center; gap: 6px; font-size: .65rem; line-height: 1.2; color: var(--text-secondary); }
.flashcard-dictation-preview p { margin: 0; font-size: 1rem; line-height: 1.3; white-space: pre-wrap; overflow-wrap: anywhere; }
.study-dock .flashcard-dictation .flashcard-mic-button { touch-action: manipulation; }
.flashcard-dictation .flashcard-mic-button[data-state="recording"] { background: var(--danger); color: white; border-color: var(--danger); }
.flashcard-dictation .flashcard-mic-button[data-state="busy"] { background: var(--accent-soft); }
.study-dock .flashcard-answer-input :is(input, textarea) { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; }
.flashcard-pronunciation-input { min-height: 56px; font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.4; }
.reader-flashcard-microphone[data-compact="true"],
.reader-flashcard-microphone[data-compact="true"] .reader-flashcard-toolbar { display: contents; }
.study-dock .flashcard-mic-button { grid-column: 2; grid-row: 1; width: 44px; height: 44px; border-radius: 50%; padding: 0; touch-action: none; user-select: none; }
.reader-flashcard-microphone[data-recorded="true"] .flashcard-mic-button { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.reader-flashcard-microphone[data-state="hold"] .flashcard-mic-button { background: var(--danger); color: var(--danger-text); border-color: var(--danger); }
.reader-flashcard-microphone[data-compact="true"] meter { grid-column: 2; width: 44px; height: 4px; }
.reader-flashcard-microphone[data-compact="true"]:not([data-state="hold"]) meter { display: none; }
.reader-flashcard-microphone[data-compact="true"] .ghost { grid-column: 1; justify-self: end; padding: 4px 8px; font-size: .75rem; }
.reader-flashcard-microphone[data-compact="true"] small { grid-column: 1 / -1; color: var(--muted); font-size: .75rem; }
.reader-flashcard-microphone[data-compact="true"] small.error { color: var(--danger); }
.reader-flashcard-microphone[data-compact="true"] small:empty { display: none; }
.study-dock .flashcard-response-method { justify-content: center; }
.study-dock .flashcard-response-method button { font-size: .75rem; padding: 6px 12px; }
.study-dock label { font-size: .78rem; margin: 0; }
.study-dock textarea { min-height: 56px; max-height: 120px; margin-top: 6px; resize: vertical; }
.study-dock .flashcard-answer-actions { gap: 8px; }
.study-dock .flashcard-answer-actions button { padding: 10px 18px; font-size: .85rem; }
.study-dock .flashcard-familiarity { text-align: center; }
.study-dock .flashcard-familiarity legend { width: 100%; font-size: .9rem; margin-bottom: 4px; }
.study-dock .flashcard-familiarity > p { font-size: .75rem; }
.study-dock .flashcard-familiarity-options { margin-top: 12px; }
.study-dock .flashcard-familiarity-options button { display: grid; border-radius: 14px; transition: transform .18s, background .18s; }
.study-dock .flashcard-familiarity-options button:hover:not(:disabled) { transform: translateY(-3px); }
.study-dock .flashcard-familiarity-options button:active:not(:disabled) { transform: scale(.94); }
.flashcard-familiarity-heading { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.flashcard-session .study-introduction-dock .flashcard-familiarity-options button { transition: background .12s; }
.flashcard-session .study-introduction-dock .flashcard-familiarity-options button:is(:hover, :active):not(:disabled) { transform: none; }
.study-dock .flashcard-skills-toggle { flex: 0 0 38px; width: 38px; height: 38px; padding: 8px; border-radius: 10px; }
.flashcard-skills-toggle[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-soft); }
.study-scene:has(.study-introduction-dock[data-separate="true"]) { grid-template-rows: minmax(0, 1fr) minmax(0, auto); }
.study-introduction-dock[data-separate="true"] { max-height: min(60dvh, 350px); }
.flashcard-introduction-skills { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.flashcard-introduction-skill { display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center; gap: 8px; padding: 10px 6px; min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-subtle); }
.flashcard-introduction-skill > span { font-size: .75rem; line-height: 1.3; overflow-wrap: anywhere; }
.flashcard-introduction-skill .word-progress-chip { min-height: 36px; width: 100%; max-width: 90px; font-size: .8rem; }
.flashcard-introduction-confirm { display: flex; justify-content: flex-end; margin-top: 12px; }
.flashcard-introduction-confirm button { min-height: 42px; padding: 10px 20px; font-size: .85rem; }
.flashcard-introduction-confirm .word-illustration-spinner { width: 16px; height: 16px; }
@media (max-width: 520px) {
    .flashcard-introduction-skills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.study-welcome { display: flex; min-height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.study-welcome > h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -.025em; line-height: 1.2; }
.study-welcome > p { max-width: 440px; font-size: .95rem; color: var(--text-secondary); line-height: 1.65; }
.study-welcome .eyebrow { color: var(--accent-ink); font-size: .66rem; }
.study-welcome-icon { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 26px; background: var(--accent-soft); color: var(--accent-ink); transform: rotate(-8deg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent); }
.study-welcome .flashcard-preparation { border: 0; margin: 0; padding: 0; background: none; }
.study-ready { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--text-secondary); animation: study-ready-out .4s ease 1s forwards; }
@keyframes study-ready-out { to { opacity: 0; } }
.study-status { position: absolute; z-index: 5; top: 76px; left: 50%; transform: translateX(-50%); max-width: min(600px, calc(100% - 32px)); padding: 6px 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); font-size: .75rem; }
.study-transitions { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; perspective: 1000px; }
.study-departure { position: absolute; margin: 0; animation: none !important; pointer-events: none; }
.study-departure * { animation: none !important; }
@keyframes study-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes study-card-in { from { opacity: 0; transform: translateX(90px) rotate(4deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes study-card-flip { 0%, 30% { opacity: 0; transform: perspective(1000px) rotateY(-85deg) scale(.96); } 100% { opacity: 1; transform: perspective(1000px) rotateY(0) scale(1); } }
@keyframes study-dock-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
    .flashcard-stage { padding-inline: 10px; }
    .flashcard-stage[open], .study-session { gap: 14px; }
    .study-topbar { gap: 6px; padding-inline-start: 14px; }
    .study-management { gap: 0; }
    .study-menu > summary { padding: 9px; }
    .study-menu > summary span { font-size: .72rem; }
    .study-source strong { font-size: .76rem; }
    .study-scene { gap: 12px; }
    .study-card { border-radius: 23px; }
    .study-dock { border-radius: 20px; padding: 14px; }
    .study-dock .flashcard-familiarity-options span { font-size: .64rem; }
    .study-dock .flashcard-familiarity-options button { padding: 10px 2px; }
}
@media (max-height: 560px) {
    .flashcard-stage { padding-block: 8px; }
    .flashcard-stage[open], .study-session { grid-template-rows: 44px minmax(0, 1fr); gap: 10px; }
    .study-scene { gap: 10px; padding-top: 0; }
    .study-card-scroll { --study-card-padding: 24px; }
    .study-card-header { padding-block: 10px; }
    .study-card .study-card-header h3 { font-size: 1.5rem; }
    .study-card-header .flashcard-introduction { gap: 4px; }
    .study-card-body { padding-block: 18px; }
    .study-dock { padding: 12px 16px; }
    .study-dock .flashcard-task > .muted { display: none; }
    .study-source span { display: none; }
    .study-status { top: 56px; }
    .study-welcome { gap: 10px; }
    .study-welcome-icon { width: 50px; height: 50px; flex: none; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .flashcard-stage::backdrop, .flashcard-stage *, .flashcard-stage *::before { animation: none !important; transition: none !important; }
}
.study-dock .flashcard-familiarity-options .study-familiarity-selected { opacity: 1; box-shadow: 0 0 0 2px var(--accent), 0 0 24px var(--accent-soft); transform: translateY(-3px); }

.study-obscured { filter: blur(7px) saturate(.65); }

/* Writing belongs in the answer dock; cues and their hints stay on the card.
   Give the dock more room while keeping both surfaces usable in short windows. */
.study-scene:has(.study-writing-dock) { grid-template-rows: minmax(0, 1fr) minmax(0, min(60%, 500px)); }
.study-answer-fields { display: contents; }
.study-writing-dock { padding: 0; gap: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr) auto; }
.study-writing-dock .study-answer-fields { display: grid; gap: 14px; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 18px 22px 12px; }
.study-writing-dock > .flashcard-answer-actions { margin: 0; padding: 12px 22px; border-top: 1px solid var(--border); }
.study-writing-dock .writing-practice { margin: 0; padding: 0; min-width: 0; border: 0; background: none; }
.study-writing-dock .writing-slots-row { margin-bottom: 12px; gap: 6px; }
.study-writing-dock .writing-slots { gap: 6px; }
.study-writing-dock .writing-slot { min-width: 30px; height: 36px; font-size: 1rem; }
.study-writing-dock .writing-entry { min-width: 0; }
.study-writing-dock .writing-keyboard-label { margin: 0 auto; }
.study-writing-dock .writing-keyboard { margin: 0; padding: 10px 12px; font-size: 1rem; }
.study-writing-dock .writing-controls { min-width: 0; }
.study-writing-dock .writing-controls > .flashcard-response-method { margin-top: 10px; }
.study-writing-dock .writing-controls > .muted { font-size: .75rem; text-align: center; }
.study-writing-dock .writing-status { min-height: 1.5em; font-size: .75rem; margin: 8px 0; }
.study-writing-dock .flashcard-answer-actions .writing-hint-button { margin-inline-start: auto; width: 40px; height: 40px; padding: 8px; }
.study-writing-dock .writing-help, .study-writing-dock .writing-legend, .study-writing-dock .writing-scoring { font-size: .72rem; }
.study-writing-dock .writing-canvas-wrap { width: min(220px, 100%); margin-bottom: 0; }
.study-writing-dock .writing-practice[data-kind="stroke"] .writing-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
@media (max-width: 520px) {
    .study-writing-dock .study-answer-fields { padding: 14px 16px 10px; gap: 12px; }
    .study-writing-dock > .flashcard-answer-actions { padding: 10px 16px; }
    .study-writing-dock .writing-practice[data-kind="stroke"] .writing-workspace { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .study-writing-dock .writing-canvas-wrap { width: min(210px, 100%); }
}
@media (max-height: 560px) {
    .study-writing-dock .study-answer-fields { padding: 12px 16px; }
    .study-writing-dock > .flashcard-answer-actions { padding: 8px 16px; }
}

/* Grading turns only the card over; the learner's writing stays in its dock. */
.flashcard-back-heading { display: flex; align-items: flex-start; gap: 14px; }
.flashcard-card-list-action { position: absolute; top: 14px; right: 16px; }
.study-card-header:has(.flashcard-card-list-action) .flashcard-back-heading { padding-right: 44px; }
.study-card-header:has(.flashcard-card-list-action) > .flashcard-introduction { padding-inline: 44px; }
.flashcard-back-heading > :first-child { flex: none; margin-top: 4px; }
.flashcard-back-heading > div { min-width: 0; }
.study-card .flashcard-back-heading h3 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.2; overflow-wrap: anywhere; }
.flashcard-back-reading { margin: 8px 0 0; color: var(--text-secondary); font-size: 1rem; }
.study-scene:has(.study-feedback-actions) { grid-template-rows: minmax(100px, 1fr) minmax(0, auto) auto; }
.study-answer-dock[data-feedback="true"], .study-result-dock { max-height: min(38vh, 330px); }
.study-answer-feedback { display: grid; gap: 12px; font-size: .9rem; animation: study-dock-in .3s ease both; }
.study-answer-feedback p { margin: 0; }
.study-answer-feedback .flashcard-score { width: 100%; padding: 12px 16px; }
.study-submitted-answer { font-size: 1.1rem; }
.study-feedback-actions { animation: study-dock-in .4s .18s ease both; }
.study-writing-dock[data-feedback="true"] { overflow: auto; grid-template-rows: auto auto; }
.study-writing-dock[data-feedback="true"] .study-answer-fields { overflow: visible; }
.study-writing-dock > .study-answer-feedback { padding: 0 22px 18px; }
.study-writing-dock .flashcard-task, .study-writing-dock > .flashcard-answer-actions { max-height: 100px; opacity: 1; transition: opacity .22s, max-height .22s, padding .22s, border-color .22s; }
.study-writing-dock[data-complete="true"] .flashcard-task,
.study-writing-dock[data-complete="true"]:not([data-save-failed="true"]) > .flashcard-answer-actions,
.study-writing-dock[data-feedback="true"] .flashcard-task { opacity: 0; max-height: 0; padding-block: 0; overflow: hidden; pointer-events: none; border-color: transparent; visibility: hidden; transition: opacity .22s, max-height .22s, padding .22s, border-color .22s, visibility 0s .22s; }
.study-writing-dock[data-complete="true"] .study-answer-fields { gap: 0; }
.writing-workspace { max-height: 1000px; opacity: 1; transition: opacity .22s, max-height .22s; }
.writing-practice[data-kind="complete"] .writing-workspace { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; visibility: hidden; transition: opacity .22s, max-height .22s, visibility 0s .22s; }
.writing-practice[data-kind="complete"] .writing-slots-row { margin-bottom: 0; animation: writing-complete-in .25s ease both; }
.study-writing-dock .writing-practice[data-kind="complete"] .writing-slot { min-width: 38px; height: 46px; font-size: 1.5rem; }
@keyframes writing-complete-in { from { opacity: .8; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .writing-practice[data-kind="complete"] .writing-slots-row { animation: none; }
}
.study-answer-dock > [hidden] { display: none; }
.study-writing-dock[data-feedback="true"]:not([data-complete="true"]) .writing-workspace { display: none; }
.study-answer-dock .flashcard-answer-actions > [hidden] { display: none; }

/* Freehand character lookup: untouched ink beside eight selectable candidates. */
.writing-picker { display: grid; gap: 8px; min-width: 0; }
.writing-picker > input { width: 100%; min-width: 0; margin: 0; font-size: 1rem; }
.writing-candidate-area { position: relative; height: 108px; }
.writing-candidate-loading, .writing-lookup-message { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: auto; text-align: center; }
.writing-candidates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-height: 108px; align-content: start; }
.writing-candidates .writing-candidate { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 50px; padding: 5px 3px; border-radius: 12px; }
.writing-candidate > span { font-size: 1.6rem; line-height: 1.2; font-weight: 500; }
.writing-lookup-status { min-height: 1.2em; margin: 0; font-size: .75rem; color: var(--text-secondary); }
.writing-lookup-status:empty { display: none; }
.writing-ink-tools { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.writing-ink-tools button { padding: 6px 12px; font-size: .8rem; }
.writing-practice [hidden] { display: none !important; }
.writing-status:empty { display: none; }
.word-practice-popup .writing-practice[data-kind="stroke"] .writing-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 18px; }
@media (max-width: 620px) {
    .word-practice-popup .writing-practice[data-kind="stroke"] .writing-workspace { grid-template-columns: minmax(0, 1fr); }
    .study-scene:has(.study-writing-dock:not([data-feedback="true"])) { grid-template-rows: minmax(120px, 1fr) minmax(0, min(74%, 540px)); }
    .study-writing-dock .writing-canvas-wrap { width: min(160px, 100%); }
    .writing-candidates { min-height: 108px; }
    .writing-candidates .writing-candidate { min-height: 50px; }
}

/* Profile vocabulary: shared identities, with forms and contexts kept secondary. */
.vocabulary-progress-summary { margin-block: 0.75rem 1rem; }
.vocabulary-concept-link { color: inherit; text-decoration: none; }
.vocabulary-concept-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.vocabulary-concept-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.vocabulary-forms, .vocabulary-related, .vocabulary-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-block: 0.7rem; }
.vocabulary-related > .muted, .vocabulary-sources > .muted { flex-basis: 100%; }
.vocabulary-progress-summary .reader-learning-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }

/* Dictionary pages expand the same profile vocabulary identity used by the reader. */
.vocabulary-definition { display: grid; gap: 1rem; }
.vocabulary-entry-heading h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); }
.vocabulary-entry-topline, .vocabulary-entry-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vocabulary-entry-heading .entry-title { margin: .5rem 0; }
.vocabulary-entry-meaning { font-size: 1.15rem; margin-bottom: .25rem; }
.vocabulary-entry-actions { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
.vocabulary-entry-actions .word-progress-row { gap: 1.25rem; }
.dictionary-generation { display: flex; align-items: center; gap: .75rem; color: var(--muted); }

/* Guided reading: one sentence at a time inside the full-screen study stage.
   Role and grade hues are validated categorical/ordinal palettes; labels and
   scores always accompany them, so color is never the only signal. */
:is(.guided-stage, .comprehension-stage, .grammar-palette) {
  --role-subject-phrase: #2f8fd0; --role-key-verb: #d95462; --role-object-phrase: #9a6be0; --role-place-preposition: #119eaa;
  --role-time-preposition: #e07b2a; --role-adjective: #3fa46f; --role-adverb: #c99a12; --role-aux-verb: #d55fa0; --role-neutral: #858b94;
  --grade-1: #d64541; --grade-2: #e07b2a; --grade-3: #d4a20e; --grade-4: #3a9d5d; --grade-5: #2f86d6;
}
:root[data-theme="dark"] :is(.guided-stage, .comprehension-stage, .grammar-palette), :root[data-theme="tokyo-night"] :is(.guided-stage, .comprehension-stage, .grammar-palette), .theme-dark :is(.guided-stage, .comprehension-stage, .grammar-palette), .theme-tokyo-night :is(.guided-stage, .comprehension-stage, .grammar-palette) {
  --role-subject-phrase: #3b93d6; --role-key-verb: #e0606d; --role-object-phrase: #a07ae6; --role-place-preposition: #1aa7b2;
  --role-time-preposition: #d6741f; --role-adjective: #3fa877; --role-adverb: #b98500; --role-aux-verb: #d866a8; --role-neutral: #8d939c;
  --grade-1: #ef6b66; --grade-2: #e8873a; --grade-3: #d9ad2b; --grade-4: #4fb873; --grade-5: #5aa2e8;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] :is(.guided-stage, .comprehension-stage, .grammar-palette), .theme-system :is(.guided-stage, .comprehension-stage, .grammar-palette) {
    --role-subject-phrase: #3b93d6; --role-key-verb: #e0606d; --role-object-phrase: #a07ae6; --role-place-preposition: #1aa7b2;
    --role-time-preposition: #d6741f; --role-adjective: #3fa877; --role-adverb: #b98500; --role-aux-verb: #d866a8; --role-neutral: #8d939c;
    --grade-1: #ef6b66; --grade-2: #e8873a; --grade-3: #d9ad2b; --grade-4: #4fb873; --grade-5: #5aa2e8;
  }
}
.guided-role-subject-phrase { --role: var(--role-subject-phrase); }
.guided-role-key-verb { --role: var(--role-key-verb); }
.guided-role-aux-verb { --role: var(--role-aux-verb); }
.guided-role-object-phrase { --role: var(--role-object-phrase); }
.guided-role-place-preposition { --role: var(--role-place-preposition); }
.guided-role-time-preposition { --role: var(--role-time-preposition); }
.guided-role-adjective { --role: var(--role-adjective); }
.guided-role-adverb { --role: var(--role-adverb); }
/* Sentence structure slot categories reuse the guided reading role hues. */
.grammar-noun, .grammar-pronoun { --role: var(--role-subject-phrase); }
.grammar-verb { --role: var(--role-key-verb); }
.grammar-auxiliary { --role: var(--role-aux-verb); }
.grammar-adjective { --role: var(--role-adjective); }
.grammar-adverb { --role: var(--role-adverb); }
.grammar-preposition { --role: var(--role-place-preposition); }
.grammar-time { --role: var(--role-time-preposition); }
.grammar-conjunction { --role: var(--role-object-phrase); }
:is(.grammar-clause, .grammar-question-word, .grammar-determiner, .grammar-number, .grammar-measure-word, .grammar-particle, .grammar-other) { --role: var(--role-neutral); }
.guided-grade-1 { --grade: var(--grade-1); }
.guided-grade-2 { --grade: var(--grade-2); }
.guided-grade-3 { --grade: var(--grade-3); }
.guided-grade-4 { --grade: var(--grade-4); }
.guided-grade-5 { --grade: var(--grade-5); }

.guided-topbar-score { padding: 0 10px; font-size: .78rem; color: var(--text-secondary); white-space: nowrap; }
.guided-topbar-score strong { color: var(--text); font-size: .9rem; }
.guided-menu-panel .button-row, .guided-menu-panel > button { justify-self: start; }
.guided-error { display: flex; align-items: center; gap: 8px; top: auto; bottom: 18px; z-index: 6; color: var(--danger); }
.guided-error button { padding: 4px; color: inherit; }

.guided-scene { grid-row: 2; grid-column: 1; min-width: 0; min-height: 0; width: min(900px, 100%); justify-self: center; display: flex; flex-direction: column; gap: 14px; }
.guided-scene-message { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; color: #fff; }
.guided-scene-message p { display: flex; align-items: center; gap: 10px; }
.guided-scene-scroll { display: block; overflow: auto; overscroll-behavior: contain; border-radius: 28px; background: var(--surface); box-shadow: 0 24px 70px rgb(0 0 0 / .28); scrollbar-width: thin; }
.guided-top { flex: 0 1 auto; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-width: 0; min-height: 0; }

.guided-progress { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 6px; color: #f3f4f6; }
.guided-progress-label { flex: none; font-size: .72rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.guided-progress-steps { flex: 1; display: flex; gap: 3px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.guided-progress-steps li { flex: 1; min-width: 0; }
.guided-step { display: block; width: 100%; height: 8px; padding: 0; border: 0; border-radius: 4px; background: var(--step-background, rgb(255 255 255 / .22)); cursor: default; }
.guided-step.done { background: var(--grade); cursor: pointer; }
.guided-step.current { background: var(--step-current-background, rgb(255 255 255 / .7)); cursor: pointer; }
.guided-step.viewing { outline: 2px solid var(--step-outline, #fff); outline-offset: 2px; }
.guided-step:focus-visible { outline: 3px solid var(--step-outline, #fff); outline-offset: 2px; }
.guided-progress-meter { flex: 1; background: rgb(255 255 255 / .2); }

.guided-sentence-card { position: relative; max-height: min(52vh, calc(var(--study-height) * .52)); overflow: auto; overscroll-behavior: contain; padding: clamp(18px, 3.2vw, 32px); border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: 28px; background: var(--surface); box-shadow: 0 24px 70px rgb(0 0 0 / .28), 0 2px 8px rgb(0 0 0 / .1); scrollbar-width: thin;
  -webkit-mask-size: 230% 100%; mask-size: 230% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: guided-sentence-in .95s cubic-bezier(.2, .75, .2, 1) backwards; }
[dir="rtl"] .guided-sentence-card, .guided-sentence-card:dir(rtl) { animation-name: guided-sentence-in-rtl; }
@keyframes guided-sentence-in-rtl {
  from { opacity: 0; transform: translateX(-32px); -webkit-mask-image: linear-gradient(270deg, #000 45%, transparent 55%); mask-image: linear-gradient(270deg, #000 45%, transparent 55%); -webkit-mask-position: 0 0; mask-position: 0 0; filter: blur(3px); }
  60% { opacity: 1; filter: none; }
  to { opacity: 1; transform: none; -webkit-mask-image: linear-gradient(270deg, #000 45%, transparent 55%); mask-image: linear-gradient(270deg, #000 45%, transparent 55%); -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
@keyframes guided-sentence-in {
  from { opacity: 0; transform: translateX(32px); -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%); -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: blur(3px); }
  60% { opacity: 1; filter: none; }
  to { opacity: 1; transform: none; -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%); -webkit-mask-position: 0 0; mask-position: 0 0; }
}
.guided-sentence-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; color: var(--text-secondary); font-size: .68rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.guided-sentence-meta .speech-button { width: 2rem; height: 2rem; }
.guided-sentence-actions { letter-spacing: normal; text-transform: none; }
.guided-sentence { --gloss-lines: 0; --grammar-rows: 0; display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 16px; margin: 0; font-family: var(--font-reading); font-size: clamp(1.45rem, 3.8vw, 2.25rem); line-height: 1.3; color: var(--text); }
.guided-sentence:is(:lang(zh), :lang(ja), :lang(ko), :lang(yue), :lang(th), :lang(ar), :lang(fa), :lang(he), :lang(hi)) { font-family: var(--font-sans); }
.guided-token { display: inline-flex; flex-direction: column; align-items: stretch; min-width: 0; }
.guided-reading { display: block; height: 1.4em; max-width: 15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-sans); font-size: max(.72rem, .42em); font-weight: 400; line-height: 1.4; text-align: center; color: var(--muted); }
.guided-text { white-space: pre; }
.guided-gap .guided-text { padding: 1px 0; border-bottom: 3px solid transparent; }
.guided-word { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: auto; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: center; cursor: pointer; transition: background .18s, border-color .18s; }
.guided-word > .guided-text { display: block; padding: 1px .05em; border-bottom: 3px solid transparent; }
.guided-word:hover, .guided-word[aria-expanded="true"] { background: var(--accent-soft); }
.guided-word:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.guided-word-token[class*="guided-grade-"] .guided-word { background: color-mix(in srgb, var(--grade) 22%, transparent); }
.guided-word-token.pending .guided-word { animation: guided-pending 1.2s ease-in-out infinite; }
@keyframes guided-pending { 50% { background: var(--accent-soft); } }
.guided-gloss { display: flex; flex-direction: column; align-items: center; height: calc(var(--gloss-lines) * 1.3em + var(--gloss-lines) * 2px); max-width: 10em; min-width: 100%; overflow: hidden; font-family: var(--font-sans); font-size: max(.72rem, .34em); line-height: 1.3; text-align: center; }
.guided-gap .guided-gloss { min-width: 0; }
.guided-guess, .guided-meaning { display: block; max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 4px; }
.guided-guess { font-weight: 650; color: color-mix(in srgb, var(--grade, var(--text-secondary)) 70%, var(--text)); }
.guided-guess .loading-dots { margin-inline-start: 4px; vertical-align: middle; }
.guided-guess .loading-dots span { width: 4px; height: 4px; }
.guided-meaning { color: var(--text-secondary); font-style: italic; }
.guided-cells { display: flex; flex-direction: column; gap: 3px; margin-top: calc(min(var(--grammar-rows), 1) * 6px); }
.guided-cell { position: relative; display: block; height: 18px; white-space: nowrap; font-family: var(--font-sans); font-size: 10px; font-weight: 650; line-height: 18px; letter-spacing: .02em; color: var(--text); background: color-mix(in srgb, var(--role) 32%, var(--surface)); box-shadow: inset 0 2px 0 var(--role); cursor: pointer; transition: opacity .15s, box-shadow .15s; }
button.guided-cell { display: block; width: 100%; padding: 0; border-radius: 0; color: var(--text); background: color-mix(in srgb, var(--role) 32%, var(--surface)); }
.guided-cell-label { position: absolute; z-index: 2; inset-inline-start: 5px; top: 0; pointer-events: none; }
.guided-cell.solo .guided-cell-label { inset-inline-end: 3px; overflow: hidden; text-overflow: ellipsis; }
.guided-cell.empty { background: transparent; box-shadow: none; cursor: default; }
.guided-cell.start { margin-inline-start: 2px; border-start-start-radius: 4px; border-end-start-radius: 4px; }
.guided-cell.end { margin-inline-end: 2px; border-start-end-radius: 4px; border-end-end-radius: 4px; }
.guided-sentence[data-highlight="true"] .guided-cell:not(.empty):not(.active) { opacity: .35; }
.guided-cell.active { box-shadow: inset 0 2px 0 var(--role), inset 0 -2px 0 var(--role); }

.guided-word-menu { width: min(360px, calc(100vw - 24px)); padding: 14px; }
.guided-word-menu header { gap: 10px; }
.guided-word-menu header strong { font-size: 1.25rem; font-family: var(--font-reading); }
.guided-word-menu header > strong { min-width: 0; overflow-wrap: anywhere; }
.guided-word-menu > .guided-word-header { align-items: start; justify-content: space-between; }
.guided-word-header > .reader-word-title { flex: 1; }
.guided-word-header .reader-word-title > strong { font-size: 1.25rem; font-family: var(--font-reading); }
.guided-word-audio { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.guided-word-audio > .icon-button { width: 32px; height: 32px; padding: 4px; }
.guided-word-menu > .reader-word-gloss-row { margin-top: 8px; }
.guided-word-menu > .reader-word-form { margin-top: 6px; }
.guided-word-menu .reader-display-actions > .copy-text-button { width: 32px; min-width: 32px; height: 32px; }
.guided-word-menu p { margin: 6px 0; }
.guided-menu-guess { padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--grade, var(--muted)) 14%, var(--surface)); }
.guided-menu-guess > p:first-child { margin: 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.guided-menu-meaning strong { font-weight: 650; }
.guided-menu-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; margin-top: 10px; }
.guided-menu-guess-form { min-width: 0; margin: 0; }
.guided-menu-guess-input { width: 100%; min-width: 0; margin: 0; padding: 10px 12px; min-height: 44px; font-size: 1rem; }
.guided-menu-actions button { justify-content: flex-start; display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.guided-menu-actions small { margin-inline-start: auto; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.guided-word-help { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.guided-word-help .word-learning-progress { margin: 0; padding: 0; border: 0; }
.guided-score-chip { display: inline-block; margin-inline-start: 6px; padding: 0 7px; border-radius: 999px; background: var(--grade, var(--surface-subtle)); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.6; vertical-align: middle; }
.guided-grade-3 .guided-score-chip { color: #1f1a05; }

.guided-help { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 12px; padding: 2px; scrollbar-width: thin; border-radius: 22px; container-type: size; }
.guided-help:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.guided-panel { padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: 22px; background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 10px 34px rgb(0 0 0 / .2); animation: study-dock-in .35s ease both; }
.guided-panel h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.guided-panel p { margin: 6px 0; }
.guided-loading { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); }
.guided-swatch { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--role); }
.guided-grammar-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guided-grammar-heading h3 { margin: 0; }
.guided-part-words { min-width: 0; color: var(--text-secondary); font-family: var(--font-reading); font-size: 1rem; }
.guided-image { --guided-image-height: max(96px, calc(100cqh - 76px)); }
.guided-image-picture, .guided-image :is(.reader-story-image, .passage-illustration) > img { display: block; width: 100%; height: auto; max-height: var(--guided-image-height); aspect-ratio: auto; object-fit: contain; border-radius: 14px; }
.guided-image :is(.reader-story-image, .passage-illustration) { width: 100%; max-width: none; margin: 0; border: 0; box-shadow: none; }
.guided-image :is(.reader-story-image-placeholder, .word-illustration-placeholder) { max-height: var(--guided-image-height); }
.guided-image-placeholder { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 120px; border-radius: 14px; background: var(--surface-subtle); color: var(--text-secondary); font-size: .85rem; }

.guided-explainer { font-size: .9rem; line-height: 1.6; }
.guided-explainer > p:first-child { margin-top: 0; }
.guided-explainer > p:last-child { margin-bottom: 0; }
.guided-topbar > .icon-button { flex: none; }
.guided-response { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; max-height: calc(var(--study-height) * .55); width: 100%; }
.guided-feedback-panel { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; gap: 10px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: 0 12px 40px rgb(0 0 0 / .25); scrollbar-width: thin; animation: study-dock-in .3s ease both; }
.guided-feedback-panel .guided-feedback { margin: 0; animation: none; }
.guided-feedback-panel .guided-score-line { padding-inline: 4px; }
.guided-dock { flex: 0 1 auto; display: grid; gap: 10px; width: 100%; max-height: min(46vh, calc(var(--study-height) * .46)); }
.guided-feedback-panel + .guided-dock { flex-shrink: 0; max-height: min(46vh, calc(var(--study-height) * .55 - 76px)); }
.guided-dock-toolbar { display: flex; align-items: center; gap: 6px; }
.guided-dock-toolbar .guided-skip { margin-inline-start: auto; }
.guided-dock-toolbar > button { font-size: .8rem; padding: 7px 12px; }
.guided-hint-actions { flex: 0 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 10px; }
.guided-hint-actions .guided-hint-option { box-shadow: 0 10px 34px rgb(0 0 0 / .2); }
.guided-hint-option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-align: start; }
.guided-hint-option:hover:not(:disabled) { background: var(--surface-hover); }
.guided-hint-option[aria-busy="true"] { opacity: 1; cursor: progress; }
.guided-hint-option span:not(.guided-hint-cost) { display: grid; gap: 2px; }
.guided-hint-option small { color: var(--text-secondary); font-size: .75rem; font-weight: 400; }
.guided-hint-cost { font-size: .78rem; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.guided-translation { display: grid; gap: 8px; }
.guided-translation label { font-size: .78rem; font-weight: 650; }
.guided-answer-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; gap: 8px 10px; }
.guided-answer-row textarea { grid-column: 1; grid-row: 1 / span 2; min-width: 0; min-height: 56px; max-height: 120px; margin: 0; resize: vertical; font-size: 1rem; }
.guided-dock-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.guided-dock-actions button { padding: 10px 18px; font-size: .85rem; }
.guided-dock-actions small { opacity: .75; font-variant-numeric: tabular-nums; }
.guided-dock-review { display: grid; gap: 10px; }
.guided-dock-review p { margin: 0; font-size: .85rem; }
.guided-microphone [hidden] { display: none !important; }
.guided-microphone { display: contents; }
.guided-mic-button { grid-column: 2; grid-row: 1; width: 44px; height: 44px; padding: 0; border-radius: 50%; touch-action: none; user-select: none; -webkit-user-select: none; }
.guided-microphone meter { grid-column: 2; grid-row: 2; width: 44px; height: 4px; }
.guided-microphone .ghost { grid-column: 1 / -1; justify-self: end; }
.guided-mic-status { grid-column: 1 / -1; color: var(--text-secondary); font-size: .72rem; line-height: 1.3; }
.guided-mic-status:empty { display: none; }
.guided-feedback { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--grade, var(--muted)) 12%, var(--surface)); border-inline-start: 4px solid var(--grade, var(--border)); animation: study-dock-in .35s ease both; }
.guided-feedback p { margin: 0; font-size: .9rem; }
.guided-feedback > button { justify-self: start; font-size: .8rem; padding: 6px 10px; display: inline-flex; gap: 6px; align-items: center; }
.guided-reference { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface); }
.guided-reference span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: .7rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.guided-you-wrote span:first-child { color: var(--text-secondary); }
.guided-feedback-heading { display: flex; align-items: center; gap: 10px; }
.guided-grade-dots { display: inline-flex; gap: 3px; }
.guided-grade-dots span { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--grade, var(--muted)) 25%, var(--surface)); }
.guided-grade-dots span.on { background: var(--grade, var(--muted)); }
.guided-score-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: .8rem; }
.guided-score-total { font-variant-numeric: tabular-nums; }
.guided-score-total strong { font-size: 1.15rem; }
.guided-score-total::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; border-radius: 50%; background: var(--grade); }
.guided-score-info { flex: none; align-self: center; }

.guided-welcome, .guided-summary { display: grid; gap: 18px; max-width: 640px; margin: 0 auto; padding: clamp(24px, 5vw, 48px); }
.guided-welcome { justify-items: center; text-align: center; }
.guided-welcome h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -.02em; }
.guided-welcome > p { margin: 0; color: var(--text-secondary); line-height: 1.65; }
.guided-steps { display: grid; gap: 10px; width: 100%; margin: 0; padding: 0; list-style: none; text-align: start; }
.guided-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--surface-subtle); font-size: .9rem; }
.guided-steps .shell-icon { flex: none; color: var(--accent-ink); }
.guided-start { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; font-size: 1rem; }
.guided-last-score { display: flex; align-items: center; gap: 6px; margin: 0; }
.guided-scoring { width: 100%; text-align: start; font-size: .82rem; }
.guided-scoring ul { margin: 8px 0 0; padding-inline-start: 18px; color: var(--text-secondary); display: grid; gap: 4px; }

.guided-trend { width: 100%; margin: 0; }
.guided-trend figcaption { margin-bottom: 8px; color: var(--text-secondary); font-size: .75rem; font-weight: 650; text-align: start; }
.guided-trend-plot { position: relative; height: 140px; }
.guided-trend-area { position: absolute; inset: 20px 0 22px 30px; }
.guided-trend-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--border); }
.guided-trend-grid span { position: absolute; right: calc(100% + 6px); top: -.65em; color: var(--muted); font-size: .62rem; font-variant-numeric: tabular-nums; }
.guided-trend-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 8px; height: 100%; margin: 0; padding: 0; list-style: none; }
.guided-trend-bars li { flex: 1; max-width: 56px; height: 100%; display: flex; flex-direction: column; align-items: center; }
.guided-trend-column { position: relative; flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.guided-trend-bar { display: block; width: min(24px, 100%); border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--accent) 38%, var(--surface)); transition: background .15s; }
.guided-trend-bars li.latest .guided-trend-bar, .guided-trend-bars li:hover .guided-trend-bar { background: var(--accent); }
.guided-trend-value { margin-bottom: 3px; font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.guided-trend-label { position: absolute; bottom: 0; transform: translateY(100%); padding-top: 4px; color: var(--muted); font-size: .65rem; }
.guided-trend-bars li { position: relative; }

.guided-summary-hero { display: grid; justify-items: center; gap: 4px; text-align: center; }
.guided-hero { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.guided-hero strong { font-size: clamp(3rem, 9vw, 4.5rem); line-height: 1; letter-spacing: -.03em; }
.guided-hero span { color: var(--text-secondary); }
.guided-hero::before { content: ''; align-self: center; width: 14px; height: 14px; border-radius: 50%; background: var(--grade, var(--muted)); }
.guided-delta { margin: 0; font-size: .82rem; font-weight: 650; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.guided-delta.up { color: var(--success); }
.guided-delta.down { color: var(--danger); }
.guided-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.guided-stats > div { padding: 12px; border-radius: 14px; background: var(--surface-subtle); text-align: center; }
.guided-stats dt { color: var(--text-secondary); font-size: .72rem; }
.guided-stats dd { margin: 2px 0 0; font-size: 1.2rem; font-weight: 700; }
.guided-study, .guided-sentence-results { display: grid; gap: 10px; }
.guided-study h3, .guided-sentence-results h3 { margin: 0; font-size: 1rem; }
.guided-study > p { margin: 0; font-size: .82rem; }
.guided-study-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.guided-study-words li { display: grid; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; }
.guided-study-words strong { font-family: var(--font-reading); font-size: 1.05rem; }
.guided-study-words span { color: var(--text-secondary); font-size: .75rem; font-family: var(--font-sans); }
.guided-study .button-row button { display: inline-flex; align-items: center; gap: 8px; }
.guided-sentence-results ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.guided-sentence-results li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-subtle); font-size: .9rem; }
.guided-result-score { flex: none; min-width: 38px; padding: 2px 6px; border-radius: 8px; background: var(--grade); color: #fff; font-weight: 700; font-size: .8rem; text-align: center; font-variant-numeric: tabular-nums; }
.guided-grade-3.guided-result-score { color: #1f1a05; }
.guided-result-score.unread { background: var(--border); color: var(--text-secondary); }
.guided-result-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-reading); }
.guided-summary-actions { justify-content: center; }

/* Keep the sentence, hints, and full-width answer dock in one column. */
@media (min-width: 1100px) and (min-height: 560px) {
    .guided-scene:not(.guided-scene-scroll, .guided-scene-message) { width: min(1180px, 100%); }
}
@media (max-width: 520px) {
    .guided-scene { gap: 10px; }
    .guided-sentence-card { border-radius: 22px; padding: 16px; }
    .guided-sentence { font-size: clamp(1.3rem, 6.4vw, 1.7rem); row-gap: 12px; }
    .guided-topbar-score { display: none; }
    .guided-dock-toolbar span { display: none; }
    .guided-stats dd { font-size: 1rem; }
}
@media (max-height: 640px) {
    .guided-sentence-card { max-height: calc(var(--study-height) * .42); padding: 14px 18px; }
    .guided-sentence-meta { margin-bottom: 6px; }
}
/* On short screens, scroll the stack instead of shrinking text into slivers. */
@media (max-height: 500px) {
    .guided-scene:not(.guided-scene-scroll, .guided-scene-message) { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    .guided-top, .guided-help, .guided-response { flex: none; max-height: none; }
    .guided-help { container-type: normal; }
    .guided-image { --guided-image-height: 65vh; }
    .guided-sentence-card, .guided-dock, .guided-feedback-panel + .guided-dock { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
    .guided-sentence-card { animation: guided-fade .2s ease both; -webkit-mask-image: none; mask-image: none; }
    .guided-word-token.pending .guided-word { animation: none; }
}
@keyframes guided-fade { from { opacity: 0; } to { opacity: 1; } }

/* Learning history: neutral chrome, with semantic vocabulary colors preserved. */
.progress-page { max-width: 1080px; margin: 0 auto; display: grid; gap: 24px; }
.progress-page-heading { padding: 10px 0 4px; }
.progress-page-heading h1 { margin: 6px 0 10px; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.035em; }
.progress-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.progress-stat { min-width: 0; overflow-wrap: anywhere; }
.progress-languages-card { padding: 26px; }
.progress-language-list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.progress-language-row { display: flex; align-items: center; gap: 24px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; }
.progress-language-row[data-selected="true"] { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, transparent); }
.progress-language-identity { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.progress-language-flag { font-size: 1.7rem; flex-shrink: 0; }
.progress-language-identity h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.progress-language-identity small { display: block; margin-top: 5px; color: var(--muted); font-size: .73rem; }
.progress-language-metrics { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 24px; width: 53%; margin: 0; }
.progress-language-metrics dt { color: var(--muted); font-size: .75rem; line-height: 1.5; }
.progress-language-metrics dd { margin: 7px 0 0; font-size: 1.2rem; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.progress-language-xp { color: var(--xp); }
.progress-achieved-level { display: inline-flex; padding: 3px 9px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: .95rem; }
.progress-no-level { color: var(--muted); font-size: .85rem; font-weight: 400; }
.progress-vocabulary-explanation { margin-top: 12px; font-size: .8rem; }
.progress-vocabulary-explanation summary { cursor: pointer; color: var(--muted); }
.progress-vocabulary-explanation p { line-height: 1.65; max-width: 740px; }
@media (max-width: 1000px) { .progress-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .progress-languages-card { padding: 18px; }
  .progress-language-row { flex-direction: column; align-items: stretch; gap: 18px; padding: 16px; }
  .progress-language-metrics { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .progress-language-metrics dd { font-size: 1.05rem; }
}
.progress-page .surface { margin: 0; }
.progress-stat { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.progress-stat > span, .progress-stat > .progress-metric-label { font-size: .85rem; color: var(--muted); font-weight: 650; }
.progress-metric-label {display:flex;align-items:center;gap:6px;}
button.progress-metric-info {display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;padding:6px;color:var(--muted);border-radius:50%;}
.progress-metric-help {margin:0;line-height:1.65;color:var(--text-secondary);}
.progress-stat > strong { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.progress-stat strong span { font-size: .95rem; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.progress-stat small { font-size: .76rem; color: var(--muted); }
.progress-streak-details { display:grid; gap:6px; margin:0; font-size:.76rem; }
.progress-streak-details > div { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.progress-streak-details dt { color:var(--muted); }
.progress-streak-details dd { margin:0; color:var(--text); font-weight:650; font-variant-numeric:tabular-nums; }
.progress-calendar-card, .progress-chart-card { padding: 26px; }
.progress-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.progress-section-heading h2 { margin: 0 0 6px; font-size: 1.2rem; letter-spacing: -.02em; }
.progress-section-heading p { margin: 0; font-size: .85rem; max-width: 540px; }
.progress-section-heading > button { flex-shrink: 0; }
.progress-chart-title { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.progress-chart-title h2 { margin:0; }
.progress-graph-help { color:var(--text-secondary); font-size:.85rem; line-height:1.65; }
.progress-graph-help p { margin:0; }
.progress-graph-help p + p { margin-top:12px; }
button.progress-checked:disabled { opacity: 1; color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); border-color: transparent; }
.progress-calendar-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(200px, 1fr); gap: 32px; }
.progress-calendar-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.progress-calendar-heading h3 { margin: 0; font-size: .95rem; }
.progress-calendar-heading .icon-button { width: 34px; height: 34px; padding: 6px; }
.progress-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.progress-weekday { text-align: center; font-size: .7rem; color: var(--muted); padding-bottom: 5px; }
button.progress-calendar-day { width: 100%; position: relative; display: grid; place-items: center; min-height: 45px; padding: 10px 4px; border: 0; border-radius: 9px; background: var(--surface-subtle); color: var(--text-secondary); font-size: .85rem; box-shadow: none; isolation: isolate; overflow: hidden; }
button.progress-calendar-day::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); opacity: var(--activity-opacity, 0); z-index: -1; }
button.progress-calendar-day::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: var(--day-border-width, 0px) solid var(--day-border-color, transparent); box-sizing: border-box; pointer-events: none; }
button.progress-calendar-day.checked { background: var(--accent-soft); color: var(--text); --day-border-width: 1px; --day-border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
button.progress-calendar-day[data-strong="true"] { color: var(--accent-text); }
button.progress-calendar-day.today, button.progress-calendar-day.selected { --day-border-width: 2px; --day-border-color: var(--accent); }
button.progress-calendar-day:disabled { opacity: .28; }
.progress-day-icons { display:flex; gap:2px; min-height:12px; max-width:100%; justify-content:center; }
.progress-day-icons svg { width:clamp(8px, 2.2vw, 12px); height:12px; flex-shrink:1; min-width:0; }
.progress-calendar-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 14px; font-size:.75rem; color:var(--text-secondary); }
.progress-calendar-legend span { display:inline-flex; align-items:center; gap:5px; }
.progress-day-detail { background: var(--surface-subtle); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.progress-day-detail > strong { font-size: 2.7rem; letter-spacing: -.035em; }
.progress-day-detail strong span { font-size: 1rem; color: var(--muted); }
.progress-day-detail h3 { font-size: 1.1rem; margin: 16px 0 10px; }
.progress-day-detail p { font-size: .85rem; }
.progress-day-detail dl { margin: 12px 0 0; }
.progress-day-detail dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: .8rem; }
.progress-day-detail dd { margin: 0; font-variant-numeric: tabular-nums; }
.progress-footnote { margin: 18px 0 0; font-size: .75rem; color: var(--muted); line-height: 1.6; }
.progress-chart-filters { display: flex; gap: 10px; }
.progress-chart-filters label { display: grid; gap: 4px; font-size: .72rem; color: var(--muted); }
.progress-chart-filters select { min-width: 115px; padding: 7px 38px 7px 10px; font-size: .85rem; }
.progress-history-chart { min-width: 0; }
.progress-history-chart svg { width: 100%; height: 270px; display: block; overflow: visible; }
.progress-chart-gridline { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.progress-chart-label { fill: var(--muted); font-size: 12px; }
.progress-xp-bar { fill: var(--xp); opacity: .78; transition: opacity .15s; }
.progress-history-chart g:hover .progress-xp-bar, .progress-history-chart g:focus .progress-xp-bar { opacity: 1; }
.progress-history-chart g:focus { outline: 1px solid var(--accent); }
.progress-word-segment[data-level="5"] { fill: var(--success); }
.progress-word-segment[data-level="4"] { fill: #8bb45a; }
.progress-word-segment[data-level="3"] { fill: #e3c14e; }
.progress-word-segment[data-level="2"] { fill: var(--warning); }
.progress-word-segment[data-level="1"] { fill: var(--danger); }
.progress-word-segment[data-level="0"] { fill: var(--border-strong); }
.progress-chart-readout { min-height: 44px; padding: 10px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: .8rem; }
.progress-chart-readout > span:first-child { font-weight: 600; }
.progress-readout-level, .progress-chart-legend > span, .progress-chart-legend > button { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.progress-chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 10px 0 0; font-size: .76rem; color: var(--text-secondary); }
.progress-chart-legend .progress-unknown-toggle { border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; padding: 5px 4px; margin: -5px -4px; min-height: 32px; box-shadow: none; }
.progress-chart-legend .progress-unknown-toggle:hover { background: var(--surface-hover); color: var(--text); }
.progress-legend-hidden { text-decoration: line-through; opacity: .6; }
.progress-points-line, .progress-points-halo { fill: none; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.progress-points-line { stroke: var(--xp); stroke-width: 2.5; }
.progress-points-halo { stroke: var(--surface); stroke-width: 5; }
.progress-points-dot { fill: var(--xp); stroke: var(--surface); stroke-width: 1; pointer-events: none; }
.progress-points-swatch { width: 20px; height: 0; border-top: 3px solid var(--xp); }
.progress-chart-empty { font-size: .85rem; color: var(--muted); text-align: center; padding: 10px; }
@media (max-width: 760px) {
  .progress-page { gap: 16px; }
  .progress-summary { gap: 8px; }
  .progress-stat { padding: 15px 10px; }
  .progress-stat > strong { font-size: 1.7rem; }
  .progress-stat small { font-size: .68rem; }
  .progress-calendar-card, .progress-chart-card { padding: 18px 14px; }
  .progress-section-heading { flex-wrap: wrap; gap: 14px; }
  .progress-calendar-layout { grid-template-columns: 1fr; gap: 16px; }
  .progress-day-detail { padding: 16px; }
  .progress-day-detail:has(> h3) { display: none; }
  .progress-chart-filters { width: 100%; }
  .progress-chart-filters label { flex: 1; }
}

/* Saved, contextual phrase coaching shares the reader's text and controls. */
.how-to-say { width: 100%; max-width: 920px; margin-inline: auto; display: grid; gap: 22px; }
.how-to-say .surface + .surface { margin-top: 0; }
.saying-create { display: grid; gap: 16px; padding: clamp(18px, 3vw, 28px); border-radius: 22px; }
.saying-create-compose { display: grid; gap: 10px; }
.saying-compose-title { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 750; line-height: 1.2; margin: 0 0 4px; }
.saying-compose-title label { cursor: text; font: inherit; color: var(--text); }
.saying-input { width: 100%; min-width: 0; font-size: 1.05rem; }
.saying-setting-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.saying-setting-field legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.saying-settings-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.saying-setting-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; background: var(--surface); }
.saying-setting-tile[data-selected="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.saying-setting-tile:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.saying-setting-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.saying-setting-tile strong { font-size: .92rem; }
.saying-setting-tile span { color: var(--muted); font-size: .78rem; font-weight: 400; line-height: 1.35; }
.saying-custom-setting { display: grid; gap: 6px; margin-top: 10px; font-size: .9rem; font-weight: 600; }
.saying-custom-setting input { font-weight: 400; }
.saying-situation { padding: 14px 16px; border-radius: 18px; }
.saying-submit-row { display: flex; justify-content: flex-end; }
.saying-library h2 { font-size: 1.05rem; margin: 0 0 10px; }
.saying-library-list { display: grid; gap: 8px; }
.saying-library-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--text); border-radius: 14px; }
.saying-library-card > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.saying-library-card strong { overflow-wrap: anywhere; }
.saying-library-card .muted { font-size: .85rem; }
.saying-empty { display: flex; align-items: center; gap: 14px; border: 1px dashed var(--border-strong); border-radius: 18px; padding: 24px; color: var(--muted); }
.saying-document { gap: 14px; }
.saying-document .reader-document-actions { padding: 10px 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.saying-toolbar-label { color: var(--muted); font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saying-pairs { display: grid; gap: 12px; }
.saying-pair { padding: clamp(16px, 2.5vw, 24px); border-radius: 20px; min-width: 0; }
.saying-request { color: var(--text-secondary); font-size: 1rem; margin: 0 0 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.saying-entry-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.saying-entry-heading .saying-request { flex: 1; min-width: 0; margin: 0; }
.saying-entry-actions { display: flex; align-items: center; gap: 3px; flex: none; }
.saying-entry-actions .icon-button { width: 32px; height: 32px; }
.saying-details-form, .saying-entry-edit { display: grid; gap: 12px; }
.saying-details-form { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.saying-details-form .saying-settings-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.saying-details-form > p, .saying-entry-edit > p { margin: 0; font-size: .85rem; }
.saying-entry-edit textarea { width: 100%; min-height: 100px; resize: vertical; }
.saying-entry-edit .button-row { justify-content: flex-end; }
.saying-setting-field:disabled .saying-setting-tile { cursor: default; opacity: .6; }
.saying-translation { font-size: calc(1.5rem * var(--reader-font-scale, 1)); line-height: 1.8; overflow-wrap: anywhere; }
.saying-translation .inline-reader-text { white-space: pre-wrap; }
.saying-pair-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.saying-pair-actions .copy-text-button { margin-left: auto; }
.saying-composer { position: sticky; bottom: 12px; z-index: 5; padding: 16px; border-radius: 20px; box-shadow: var(--shadow); background: color-mix(in srgb, var(--surface) 95%, transparent); backdrop-filter: blur(16px); }
.saying-composer form { display: grid; gap: 8px; }
.saying-composer label { font-weight: 600; font-size: .9rem; }
.saying-compose-row { display: flex; align-items: center; gap: 12px; }
.saying-compose-row input { flex: 1; }
.saying-compose-row button { flex-shrink: 0; }
.saying-compose-row button.saying-create-submit { display: inline-grid; place-items: center; width: 48px; min-width: 48px; height: 48px; padding: 0; }
.saying-create-submit .word-illustration-spinner { width: 22px; height: 22px; border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; }
.saying-composer .error { margin: 12px 0 0; }
.document-delete { margin-top: 20px; }
.reader-popup.document-delete-confirmation { width: min(480px, calc(100vw - 24px)); }
.document-delete-confirmation .reader-popup-body > p:first-child { margin-top: 0; }
.document-delete-confirmation .button-row { justify-content: flex-end; }
@media (hover: hover) { .saying-library-card:hover, .saying-setting-tile:hover { background: var(--surface-hover); } }
@media (max-width: 600px) {
  .saying-settings-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saying-setting-tile { padding: 9px 10px; }
  .saying-partner { margin-inline-end: 0; }
  .saying-composer { padding: 14px; bottom: 8px; }
  .saying-compose-row { gap: 8px; }
  .saying-compose-row button { padding-inline: 12px; }
  .saying-toolbar-label { font-size: .8rem; }
}
.how-to-say .back-link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; }
.how-to-say .sr-only, .saying-reply-editor .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.saying-reply-attachment { display: flex; align-items: center; gap: 8px; min-width: 0; }
.saying-reply-button { min-width: 0; max-width: 100%; font-size: .9rem; }
.saying-reply-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 36ch; font-weight: normal; }
.saying-reply-editor { display: grid; gap: 12px; }
.saying-reply-editor p { margin: 0; }
.saying-reply-editor textarea { width: 100%; resize: vertical; min-height: 110px; }
.saying-incoming { margin: 0 0 20px; padding: 12px 16px; border-inline-start: 3px solid var(--border); background: var(--surface-subtle); border-radius: 0 12px 12px 0; }
.saying-reply-label { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.saying-incoming p { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Messages from the conversation partner sit on the opposite side, untranslated. */
.saying-draft-partner-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.saying-partner { min-width: 0; margin-inline-end: clamp(0px, 12%, 96px); padding: 10px 14px 12px; border-radius: 16px 16px 16px 4px; background: var(--surface-subtle); border: 1px solid var(--border); }
.saying-partner .saying-entry-heading { align-items: center; margin-bottom: 4px; }
.saying-partner-label { flex: 1; min-width: 0; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.saying-partner .saying-entry-actions .icon-button { width: 28px; height: 28px; }
.saying-partner-text { margin: 0; font-size: calc(1.1rem * var(--reader-font-scale, 1)); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.saying-partner-text .inline-reader-text { white-space: pre-wrap; }
.saying-partner-row { display: flex; }
.saying-partner-button { font-size: .9rem; }

/* Suggested replies: choose one to insert it, or edit its meaning first. */
.saying-suggestions { display: grid; gap: 8px; }
.saying-suggestions h2 { font-size: .9rem; font-weight: 600; margin: 0; color: var(--text-secondary); }
.saying-suggestion-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.saying-suggestion { display: flex; align-items: center; gap: 6px; padding-inline-end: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.saying-suggestion-choose { flex: 1; min-width: 0; display: grid; gap: 2px; justify-items: start; text-align: start; padding: 10px 14px; border: 0; border-radius: 14px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.saying-suggestion-choose:disabled { cursor: default; opacity: .6; }
.saying-suggestion-choose:hover, .saying-suggestion-choose:disabled:hover { background: transparent; color: var(--text); }
.saying-reply-editor .button-row { justify-content: flex-end; }
.saying-suggestion-choose:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.saying-suggestion-target { font-size: 1.1rem; line-height: 1.5; overflow-wrap: anywhere; }
.saying-suggestion-meaning { color: var(--muted); font-size: .85rem; line-height: 1.4; overflow-wrap: anywhere; }
.saying-suggestion .icon-button { flex: none; width: 34px; height: 34px; }
.saying-suggestions-loading { display: grid; gap: 8px; }
.saying-suggestion-skeleton { display: block; height: 58px; border-radius: 14px; background: linear-gradient(90deg, var(--surface-subtle), var(--surface-hover), var(--surface-subtle)); background-size: 200% 100%; animation: saying-suggestion-shimmer 1.4s ease-in-out infinite; }
@keyframes saying-suggestion-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .saying-suggestion-skeleton { animation: none; } }
.saying-suggestions-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.saying-suggestions-error .error { margin: 0; }
@media (hover: hover) { .saying-suggestion:has(.saying-suggestion-choose:not(:disabled)):hover { background: var(--surface-hover); } }

/* Translation rows retain source word controls and Markdown source offsets. */
.reader-sentence-translation { display: block; margin: .35em 0 1.1em; font-size: min(1rem, calc(1rem * var(--reader-font-scale, 1))); line-height: 1.65; font-weight: 400; font-style: normal; letter-spacing: normal; color: color-mix(in srgb, var(--text) var(--reader-translation-visibility, 55%), transparent); white-space: pre-wrap; }
.reader-translation-waiting { color: var(--muted); font-size: .85em; }
.reader-sentence-translation-error { color: var(--danger); font-size: .85em; }
.reader-translation-caret { display: inline-block; width: .35em; height: .9em; margin-inline-start: .25em; border-radius: 2px; background: var(--accent); animation: speech-pulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .reader-translation-caret { animation: none; } }

/* Compact XP receipts: a single pulse and ripple celebrate each award. */
.xp-celebration-host { position: fixed; z-index: 90; top: calc(var(--header-height, 60px) + 8px); inset-inline-end: max(16px, env(safe-area-inset-right)); width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.xp-celebration-host .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
button.xp-celebration { position: relative; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; width: auto; padding: 10px 16px; pointer-events: auto; border: 1px solid color-mix(in srgb, var(--xp) 35%, var(--surface)); border-radius: 999px; color: var(--xp); background: var(--xp-soft); box-shadow: 0 4px 18px #00000020; transform-origin: center; animation: xp-reward-arrive 480ms ease-out both, xp-reward-leave 200ms ease-in 2.6s forwards; }
button.xp-celebration:hover { color: var(--xp); background: color-mix(in srgb, var(--xp) 8%, var(--xp-soft)); }
button.xp-celebration:focus-visible { outline: 2px solid var(--xp); outline-offset: 4px; }
.xp-celebration::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--xp); border-radius: inherit; pointer-events: none; opacity: 0; animation: xp-reward-ripple 700ms ease-out 100ms both; }
.xp-reward-mark { display: grid; place-items: center; flex: none; }
.xp-reward-mark svg { width: 20px; height: 20px; }
.xp-reward-copy strong { font-size: 1.05rem; font-weight: 700; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xp-reward-copy strong span { margin-inline-start: 4px; font-size: .75rem; font-weight: 600; }
.xp-daily-meter { --xp-fill: var(--xp); display: grid; gap: 8px; min-width: 0; }
.xp-daily-label { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: .75rem; font-weight: 450; }
.xp-daily-label > span { color: var(--muted); }
.xp-daily-label strong { color: var(--xp); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.xp-daily-track { height: 4px; border-radius: 4px; overflow: hidden; background: var(--border); }
.xp-daily-track > span { display: block; height: 100%; border-radius: inherit; background: var(--xp-fill); }
.xp-session-total, .xp-earned-badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto; width: fit-content; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--xp); border: 1px solid color-mix(in srgb, var(--xp) 25%, var(--border)); background: var(--xp-soft); font-weight: 600; border-radius: 999px; }
.xp-session-total:hover, .xp-earned-badge:hover { color: var(--xp); border-color: var(--xp); background: var(--xp-soft); }
.xp-session-total:focus-visible, .xp-earned-badge:focus-visible { outline: 2px solid var(--xp); outline-offset: 3px; }
.xp-session-total { padding: 5px 9px; font-size: .75rem; }
.flashcard-stage:has(.xp-session-total), .study-session:has(.xp-session-total) { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.study-topbar:has(.xp-session-total) .study-source > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-earned-badge { padding: 5px 10px; font-size: .8rem; }
.xp-session-total svg, .xp-earned-badge svg { width: 15px; height: 15px; color: currentColor; }
.xp-details-popup { width: min(460px, calc(100vw - 32px)); }
.xp-details-total { display: grid; gap: 8px; margin: 4px 0 28px; }
.xp-details-total > span, .xp-details-total small { color: var(--muted); font-size: .85rem; }
.xp-details-total > strong { color: var(--xp); font-size: 3.5rem; line-height: 1.1; letter-spacing: -.04em; font-weight: 600; font-variant-numeric: tabular-nums; }
.xp-details-total strong span { font-size: 1.1rem; color: var(--muted); font-weight: 450; letter-spacing: 0; }
.xp-details-popup .xp-daily-track { height: 6px; }
.xp-details-remaining { margin: 10px 0 24px; color: var(--muted); font-size: .8rem; }
.xp-details-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; border-top: 1px solid var(--border); padding-top: 24px; margin: 0; }
.xp-details-stats[data-session="false"] > div:first-child { grid-column: 1 / -1; }
.xp-details-stats dt { color: var(--muted); font-size: .75rem; margin-bottom: 6px; }
.xp-details-stats dd { color: var(--xp); margin: 0; font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.xp-details-timezone { margin: 24px 0; color: var(--muted); font-size: .7rem; }
.xp-details-actions { display: flex; justify-content: flex-end; }
@keyframes xp-reward-arrive { 0% { opacity: 0; transform: translateY(-6px) scale(.85); } 55% { opacity: 1; transform: translateY(0) scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes xp-reward-ripple { from { opacity: .45; transform: scale(1); } to { opacity: 0; transform: scale(1.25, 1.55); } }
@keyframes xp-reward-leave { to { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 600px) {
  .xp-celebration-host { top: calc(var(--header-height, 60px) + 6px); }
  .xp-session-total { padding: 4px 7px; font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) { button.xp-celebration, .xp-celebration::after { animation: none; } }

.reader-preparation-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.writing-ink-tools { flex-wrap: wrap; align-items: center; }
.writing-ink-tools .writing-hint-button { width: 36px; height: 36px; padding: 7px; }
.writing-hint-button[aria-pressed="true"] { color: var(--warning-ink); background: var(--warning-soft); box-shadow: inset 0 0 0 1px var(--warning); }

/* Dictionary composition shares the practice canvas and candidate picker. */
.dictionary-search .search-field .icon-button { width: 42px; padding: 10px; }
.dictionary-writing { padding: 12px 0; }
.dictionary-writing > p { margin: 0 0 16px; }
.dictionary-writing .writing-workspace { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 24px; align-items: center; }
.dictionary-writing .writing-canvas-wrap { width: 100%; margin-bottom: 0; }
@media (max-width: 620px) {
    .dictionary-writing .writing-workspace { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .dictionary-writing .writing-canvas-wrap { max-width: 240px; }
}

.reader-library-heading, .reader-title-actions { display: inline-flex; align-items: center; gap: 10px; }
.reader-title-actions { flex-shrink: 0; }
.reader-title-translation { flex: 0 0 100%; color: color-mix(in srgb, var(--text) var(--reader-translation-visibility, 55%), transparent); font-size: 1.05rem; line-height: 1.5; overflow-wrap: anywhere; }
.document-title-translation { color: color-mix(in srgb, var(--text) var(--reader-translation-visibility, 55%), transparent); font-size: .92rem; line-height: 1.4; overflow-wrap: anywhere; }

.reader-sentence-translation .translation-block { display: block; }
.reader-sentence-translation .translation-block + .translation-block { margin-top: .5em; }
.reader-sentence-translation .translation-heading { display: block; font-weight: 650; font-size: 1.1em; }
.reader-sentence-translation .translation-item { display: list-item; margin-inline-start: 1.3em; }
.reader-sentence-translation .translation-quote { display: block; border-inline-start: 3px solid var(--border); padding-inline-start: .8em; }
.reader-sentence-translation .translation-code { display: block; white-space: pre-wrap; }
.reader-sentence-translation .translation-rule { display: block; border-top: 1px solid var(--border); margin: .7em 0; }

.guided-dictation-preview { grid-column: 1; grid-row: 1 / span 2; min-height: 76px; padding: 12px 14px; border-radius: 12px; background: var(--surface-subtle); }
.guided-dictation-preview strong { display: flex; align-items: center; gap: 8px; }
.guided-dictation-preview p { margin: 8px 0 0; white-space: pre-wrap; }
.guided-mic-button[data-state="recording"] { background: var(--danger); color: white; }

.guided-microphone .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.story-image-retry { background: var(--surface); box-shadow: var(--shadow-sm); }

.reader-sentence-translation .translation-ordered-list > .translation-item { display: block; counter-increment: translation-item; }
.reader-sentence-translation .translation-ordered-list > .translation-item::before { content: counter(translation-item) ". "; }
.reader-sentence-translation .translation-cell { display: inline-block; margin-inline-end: 1em; }

.reader-original-input dl { display: grid; gap: 8px; margin: 0; }
.reader-original-input dt { margin-top: 12px; font-size: .8rem; font-weight: 650; color: var(--text-secondary); }
.reader-original-input dt:first-child { margin-top: 0; }
.reader-original-input dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Personalized setup and first lesson. */
.interest-editor { display: grid; gap: 12px; margin: 12px 0; }
.interest-editor > .interest-continue-actions { margin-top:24px; }
.interest-options { display: flex; flex-wrap: wrap; gap: 8px; }
.interest-options button { display: inline-flex; align-items: center; gap: 6px; }
.interest-options button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.interest-custom-recommendation {margin:12px 0 0;color:#7550ad;color:light-dark(#7550ad,#d8c7ff);font-size:.9rem;line-height:1.55}
.interest-add-topic,button.interest-add-topic {border:0;border-radius:10px;box-shadow:inset 0 0 0 1px var(--border-strong),var(--shadow-sm);background:#d8c7ff;color:#352052;position:relative;justify-self:stretch;display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;min-width:0;max-width:100%;min-height:64px;margin-top:10px;padding:18px 24px;font-size:1rem;white-space:normal;overflow-wrap:anywhere;text-align:center}
.interest-custom-recommendation + .interest-add-topic {margin-top:0}
button.interest-add-topic:hover {background:#e4d8ff;color:#352052}
.interest-topic-composer {padding:8px 12px 8px 24px;gap:12px}
.interest-topic-composer:focus-within {outline:3px solid var(--focus);outline-offset:2px}
.interest-topic-composer > input {flex:1;min-width:0;width:100%;padding:8px 0;border:0;background:transparent;color:#352052;font-size:1.5rem;line-height:1.3;box-shadow:none;outline:none}
.interest-topic-composer > input::placeholder {color:#594371;opacity:1}
.interest-topic-composer > .interest-topic-send {display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border-radius:50%;background:#352052;color:#fff}
.interest-topic-composer > .interest-topic-send:hover {background:#4d316d;color:#fff}
.custom-interest-chip { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; padding: 3px 5px 3px 12px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: .9rem; }
.custom-interest-title { min-width: 0; overflow-wrap: anywhere; }
.custom-interest-chip > button.icon-button { flex: none; width: 28px; height: 28px; padding: 4px; color: inherit; }
.interest-topic-editor { display: grid; gap: 12px; min-width: 0; }
.interest-topic-editor input { width: 100%; min-width: 0; }
.interest-topic-editor > button { justify-self: end; }
.interest-topic-editor > small {overflow-wrap:anywhere}
.interest-topic-icon-controls {display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.interest-topic-icon {display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--border);border-radius:12px;font-size:1.6rem;color:var(--muted)}
.interest-topic-icon-controls>.secondary {display:inline-flex;align-items:center;gap:6px;padding:8px 12px;font-size:.85rem}
.interest-topic-editor>button .word-illustration-spinner {width:16px;height:16px;margin-inline-end:6px}
.experience-picker { display: grid; grid-template-columns: repeat(var(--experience-columns, 3), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; margin: 16px 0; }
.experience-choice-buttons {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0;}
.experience-choice-buttons button {position:relative;width:100%;height:100%;min-width:0;min-height:76px;justify-self:stretch;align-self:stretch;justify-content:flex-start;padding:16px 44px 16px 16px;text-align:start;white-space:normal;overflow-wrap:anywhere;}
.experience-choice-buttons .language-check {position:absolute;top:50%;inset-inline-end:16px;transform:translateY(-50%);}
.setup-experience-level-help {margin:20px 0 0;font-size:.9rem;}
.experience-picker button { width: 100%; min-width: 0; min-height: 112px; height: 100%; justify-self: stretch; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; text-align: start; justify-content: flex-start; gap: 6px; padding: 14px; white-space: normal; overflow-wrap: anywhere; }
.experience-picker button small { font-weight: 400; line-height: 1.45; color: var(--text-secondary); }
.experience-picker button[aria-checked="true"], .experience-choice-buttons button[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.profile-experience { grid-column: 1 / -1; }
@media (max-width: 600px) { .experience-picker { grid-template-columns: 1fr; } .experience-picker.setup-levels {grid-template-columns:repeat(2,minmax(0,1fr));} }

/* Core language skill practice. */
.skills-page { max-width: 1120px; margin: 0 auto; padding: clamp(16px, 4vw, 48px); }
.skills-intro { max-width: 720px; margin-bottom: 32px; }
.skills-intro h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); letter-spacing: -.05em; margin: 8px 0 14px; }
.skills-intro p { font-size: 1.06rem; line-height: 1.7; color: var(--text-secondary); }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 22px; }
.skills-grid:has([data-skill="tones"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-skill="tone-changes"] .skill-card-art { color: #a26f39; background: color-mix(in srgb, #d9aa6a 15%, var(--surface)); }
button.skill-launch-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 26px; text-align: start; white-space: normal; color: var(--text); background: var(--surface); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
button.skill-launch-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgb(0 0 0 / .1); }
.skill-card-art { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 30px; height: 170px; width: 100%; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); overflow: hidden; }
[data-skill="stroke-order"] .skill-card-art { color: #9b6a2c; background: color-mix(in srgb, #e7b75a 16%, var(--surface)); }
[data-skill="pronunciation"] .skill-card-art { color: #8c6ab1; background: color-mix(in srgb, #a992d3 16%, var(--surface)); }
[data-skill="tones"] .skill-card-art { color: #457aa7; background: color-mix(in srgb, #72a4cc 14%, var(--surface)); }
.skill-orbit { position: absolute; z-index: -1; border: 1px solid currentColor; opacity: .12; width: 220px; height: 220px; border-radius: 50%; right: -40px; top: 20px; box-shadow: 0 0 0 30px currentColor; }
.skill-sound-bars { display: flex; gap: 5px; align-items: center; }
.skill-sound-bars i { display: block; width: 5px; border-radius: 5px; background: currentColor; opacity: .5; }
.skill-art-strokes { font-size: 2rem; opacity: .65; }
.skill-card-copy { display: flex; flex-direction: column; flex: 1; padding: 26px; gap: 14px; }
.skill-card-copy h2 { font-size: 1.4rem; line-height: 1.2; letter-spacing: -.025em; }
.skill-card-copy p { font-weight: 400; font-size: .95rem; color: var(--text-secondary); line-height: 1.65; }
.skill-launch { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; font-size: .9rem; }
.skills-practice-area { grid-row: 2; width: min(760px, 100%); justify-self: center; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px; container-type: inline-size; }
.skills-round { display: contents; }
.skills-difficulty-area { grid-row: 2; width: min(680px, 100%); justify-self: center; align-self: center; min-height: 0; max-height: 100%; display: grid; }
.skills-difficulty-picker { display: grid; gap: 24px; }
.skills-difficulty-picker h2 { font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: -.025em; }
.skills-difficulty-options { display: grid; grid-auto-rows: 1fr; gap: 12px; }
button.skills-difficulty-option { display: grid; width: 100%; min-width: 0; height: 100%; grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 18px; align-items: center; padding: 20px; text-align: start; white-space: normal; border-radius: 18px; }
.skills-difficulty-option:hover, .skills-difficulty-option:focus-visible { background: var(--accent-soft); border-color: var(--accent); }
.skills-difficulty-option strong { display: block; font-size: 1.1rem; margin-bottom: 5px; }
.skills-difficulty-option p { font-size: .9rem; font-weight: 400; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.skills-level-bars { height: 30px; display: flex; align-items: end; gap: 4px; }
.skills-level-bars i { width: 7px; border-radius: 3px; background: var(--border); }
.skills-level-bars i[data-active="true"] { background: var(--accent); }
button.skills-current-level { display: inline-flex; gap: 6px; align-items: center; padding: 8px 12px; border-radius: 20px; font-size: .8rem; }
.skills-progress { display: flex; align-items: center; gap: 16px; color: #fff; font-size: .78rem; font-weight: 650; letter-spacing: .1em; padding: 2px 8px; }
.skills-segments { flex: 1; display: flex; gap: 7px; }
.skills-segments > span { flex: 1; height: 9px; border-radius: 20px; background: #ffffff38; }
.skills-segments > span[data-current="true"] { outline: 2px solid #fff; outline-offset: 3px; }
.skills-segments > span:not([data-score="0"]) { background: hsl(var(--level-hue) 65% 72%); }
.skills-exercise-card { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 24px; }
.skills-exercise-card > .muted { max-width: 440px; font-size: .9rem; line-height: 1.6; }
.skills-listen-cue { display: flex; flex-direction: column; align-items: center; gap: 25px; color: var(--accent); }
.skills-listen-cue .speech-action { min-height: 56px; }
.skills-spoken-words { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; font-size: clamp(1.9rem, 6cqw, 3rem); line-height: 1.5; }
.skills-spoken-words > span { border-bottom: 2px solid var(--border); padding-bottom: 6px; }
.skills-spoken-words small { display: block; color: var(--text-secondary); font-size: .9rem; margin-top: 6px; }
.skills-reference { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; padding-top: 18px; border-top: 1px solid var(--border); width: 100%; }
.skills-reference strong { font-size: 1.4rem; }.skills-reference p,.skills-reference small { color: var(--text-secondary); font-size: .85rem; margin: 3px 0; }
.skills-answer-dock { max-height: min(43dvh, 340px); }
.skills-answer-dock input { margin: 8px 0 14px; width: 100%; }
.skills-actions,.skills-summary-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.skills-actions .word-illustration-spinner { width: 20px; height: 20px; }
.skills-actions > p { font-size: .85rem; line-height: 1.5; }
.skills-answer-dock audio { display: block; width: 100%; max-height: 42px; margin: 10px 0; }
.skills-answer-dock .reader-flashcard-toolbar { margin: 0; }
.skills-answer-dock .reader-flashcard-microphone small:empty { display: none; }
.reader-flashcard-microphone .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Submitted listening syllables stay visible alongside the feedback. */
.skills-submitted-answer { margin-bottom: 16px; }
.skills-answer-playback { display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-block:8px 12px; }
.skills-answer-playback > button { display:inline-flex;align-items:center;gap:8px; }
.skills-answer-playback audio { height:32px;max-width:100%; }
.skills-answer-playback audio:not([src]),.skills-answer-playback small:empty { display:none; }
.skills-answer-playback small { flex-basis:100%;color:var(--muted); }

.skills-submitted-label { margin: 0 0 8px; color: var(--text-secondary); font-size: .8rem; }
.skills-submitted-syllables { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.skills-submitted-syllable { display: grid; align-content: start; gap: 4px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.skills-submitted-sounds { display: flex; align-items: baseline; gap: 6px; font-size: 1.05rem; font-weight: 600; }
.skills-submitted-tone { font-size: .7rem; }
.skills-submitted-verdict { font-size: .65rem; font-weight: 500; }
.skills-submitted-syllable[data-state="correct"] { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.skills-submitted-syllable[data-state="partial"] { color: var(--warning-ink); border-color: var(--warning); background: var(--warning-soft); }
.skills-submitted-syllable[data-state="incorrect"] { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.skills-submitted-tone[data-correct="false"] { color: var(--danger); }
.skills-submitted-tone[data-correct="true"] { color: var(--success); }
.skills-submitted-text { margin: 0; white-space: pre-wrap; }
.skills-feedback { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 16px; margin-bottom: 16px; font-size: .95rem; line-height: 1.6; }
.skills-feedback .muted { grid-column: 2; font-size: .8rem; }
.skills-score { display: inline-flex; align-items: baseline; gap: 5px; padding: 9px 12px; border-radius: 8px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.skills-score strong { font-size: 1.5rem; line-height: 1.2; }
.skills-score small { font-size: .75rem; font-weight: 500; opacity: .7; }
.skills-reward-score { display: grid; justify-items: center; gap: 8px; }
.skills-session-rewards { display: flex; align-items: center; gap: 6px; letter-spacing: normal; }
.skills-session-rewards:empty { display: none; }
.skills-session-rewards .word-illustration-spinner { width: 16px; height: 16px; }
.skills-session-rewards .xp-session-total { white-space: nowrap; }
button.skills-xp-retry { padding: 5px 8px; font-size: .7rem; display: inline-flex; align-items: center; gap: 4px; }
.skills-summary-score { display: grid; gap: 8px; justify-items: center; }
.skills-summary { text-align: center; display: grid; align-content: center; justify-items: center; gap: 20px; }
.skills-summary h2 { font-size: 2rem; letter-spacing: -.03em; }.skills-summary p { color: var(--text-secondary); }
.skills-summary-icon { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.skills-load-error { grid-row: 2; place-self: center; max-width: 560px; }
.skills-tone-card { gap: 12px; }
.skills-tone-card h2 { font-size: 1.35rem; }
.skills-tone-note { max-width: 440px; font-size: .8rem; color: var(--text-secondary); }
.skills-tone-syllables { display: grid; gap: 20px; width: 100%; margin-top: 8px; }
.skills-tone-syllable { min-width: 0; padding: 0; border: 0; text-align: start; }
.skills-tone-syllable legend { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.skills-tone-syllable legend strong { font-size: 1.7rem; }
.skills-tone-index { color: var(--muted); font-size: .8rem; }
.skills-tone-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.skills-tone-choice { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 5px; min-height: 104px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); text-align: center; cursor: pointer; }
.skills-tone-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.skills-tone-choice:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.skills-tone-choice strong { font-size: .9rem; }
.skills-tone-choice small { font-size: .68rem; line-height: 1.3; color: var(--text-secondary); }
.skills-tone-choice[data-selected="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.skills-tone-choice[data-correct="true"] { border-color: #278254; box-shadow: inset 0 0 0 1px #278254; background: color-mix(in srgb, #278254 12%, var(--surface)); }
.skills-tone-choice[data-incorrect="true"] { border-color: #b84236; box-shadow: inset 0 0 0 1px #b84236; background: color-mix(in srgb, #b84236 10%, var(--surface)); }
.skills-tone-syllable:disabled .skills-tone-choice { cursor: default; }
.skills-tone-syllable-feedback { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: .85rem; }
.skill-stroke-exercise { width: 100%; display: grid; justify-items: center; gap: 12px; }
.skill-stroke-exercise canvas { display: block; width: min(100%, 330px, 42dvh); aspect-ratio: 1; height: auto; touch-action: none; border: 1px solid var(--border); border-radius: 24px; background: var(--surface-subtle); }
.skill-stroke-exercise > p { min-height: 2.6em; font-size: .85rem; line-height: 1.3; }
.skill-stroke-tools { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.skill-stroke-tools button { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; font-size: .8rem; }
.skill-stroke-tools [hidden] { display: none; }
.skill-stroke-tools [aria-pressed="true"] { background: #ffe2a2; color: #6d4913; }
.skill-stroke-exercise > small { font-size: .72rem; color: var(--muted); }
.skill-stroke-exercise[data-complete="true"] .skill-stroke-tools, .skill-stroke-exercise[data-complete="true"] > small { display: none; }
.skill-stroke-exercise[data-demonstrating="true"] .skill-stroke-tools { display: flex; }
.skill-stroke-exercise[data-demonstrating="true"] .skill-stroke-tools > :not([data-stroke="demo"]) { display: none; }
.skills-rule-guide { display: grid; gap: 22px; line-height: 1.65; }
.skills-rule-guide h3 { margin-bottom: 6px; font-size: 1rem; }
.skills-rule-guide p { color: var(--text-secondary); }
.skills-rule-guide > a { font-size: .8rem; }
.skills-tone-change-card { display: grid; align-content: center; justify-items: center; gap: 28px; width: min(100%, 560px); margin: auto; text-align: center; }
.skills-tone-change-card h2 { font-size: 1.4rem; }
.skills-change-prompt { display: grid; gap: 10px; }
.skills-change-prompt p { margin: 0; font-size: .9rem; line-height: 1.6; }
.skills-change-prompt small { font-size: .75rem; }
.skills-change-segment { display: grid; justify-items: center; gap: 20px; width: 100%; min-width: 0; }
.skills-change-row { display: grid; justify-items: center; gap: 8px; width: 100%; }
.skills-change-segment header strong { font-size: 2rem; }
.skills-change-segment header p { font-size: .8rem; color: var(--text-secondary); margin-top: 4px; }
.skills-change-label { font-size: .72rem; font-weight: 650; color: var(--muted); margin: 0; }
.skills-change-syllables { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; }
.skills-change-syllables > span { padding: 10px 14px; border-radius: 12px; background: var(--surface-subtle); font-size: 1.1rem; }
.skills-change-syllables sup { margin-left: 3px; font-weight: 700; }
select.skills-change-select { width: auto; max-width: 100%; min-height: 48px; font-size: .9rem; padding: 12px 30px 12px 12px; border-radius: 12px; }
select.skills-change-select:disabled { opacity: 1; color: var(--text); }
select.skills-change-select[data-result="correct"], .skills-change-solution > span { border-color: #278254; background: color-mix(in srgb, #278254 12%, var(--surface)); }
select.skills-change-select[data-result="incorrect"] { border-color: #b84236; background: color-mix(in srgb, #b84236 10%, var(--surface)); }
.skills-change-explanation { margin: 0; line-height: 1.65; font-size: .88rem; text-align: start; }
@media (max-width: 520px) {
    button.skills-difficulty-option { padding: 14px; gap: 12px; }
    .skills-difficulty-picker { gap: 18px; }
    .skills-page { padding: 20px 14px; }.skills-grid { gap: 18px; }.skill-card-art { height: 130px; }
    .skills-grid:has([data-skill="tones"]) { grid-template-columns: 1fr; }
    .skills-practice-area { gap: 12px; }.skills-exercise-card { gap: 18px; }.skills-feedback { gap: 8px; font-size: .85rem; }
    .skills-stage .study-card-body { padding: 20px; }.skills-stage .study-dock { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { button.skill-launch-card { transition: none; } button.skill-launch-card:hover { transform: none; } }

/* Pronunciation is composed in syllables, independently of the hidden answer. */
.pronunciation-composer { min-width: 0; display: grid; gap: 9px; }
.pronunciation-system { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; color: var(--text-secondary); font-size: .78rem; }
.pronunciation-system > span { font-weight: 650; }
.pronunciation-system small { font-size: .7rem; }
.study-dock .pronunciation-composer input { width: 100%; min-height: 48px; margin: 0; font-size: 1.15rem; }
.pronunciation-sequence { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; max-height: 100px; overflow-y: auto; }
.pronunciation-chip { display: inline-flex; align-items: stretch; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; }
.pronunciation-chip[data-editing="true"] { border-color: var(--accent); background: var(--accent-soft); }
.study-dock .pronunciation-chip button { padding: 7px 9px; min-height: 36px; font-size: 1rem; border: 0; border-radius: 12px; box-shadow: none; }
.study-dock .pronunciation-chip .pronunciation-remove { padding: 7px; color: var(--text-secondary); }
.pronunciation-chip small, .pronunciation-suggestions button small { align-self: start; font-size: .6rem; color: var(--text-secondary); }
.pronunciation-suggestions { min-height: 86px; display: flex; flex-wrap: wrap; align-content: start; align-items: center; gap: 6px; }
.study-dock .pronunciation-suggestions button { min-height: 38px; padding: 7px 13px; border-radius: 10px; box-shadow: none; font-size: 1rem; }
.pronunciation-suggestions button[aria-selected="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.pronunciation-entry-help { color: var(--muted); font-size: .76rem; line-height: 1.5; padding: 8px 0; }
.pronunciation-tone-step { min-width: 0; outline: none; display: grid; gap: 8px; }
.pronunciation-tone-heading { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.pronunciation-tone-heading > span { color: var(--text-secondary); font-size: .8rem; }
.pronunciation-tone-heading > strong { font-size: 1.15rem; }
.study-dock .pronunciation-tone-heading button { padding: 7px 4px; font-size: .8rem; }
.pronunciation-tones { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 6px; }
.study-dock button.pronunciation-tone { flex-direction: column; gap: 3px; padding: 8px 4px; border-radius: 12px; min-height: 80px; box-shadow: none; }
.pronunciation-tone strong { font-size: 1.12rem; font-weight: 650; }
.pronunciation-tone small { font-size: .62rem; font-weight: 400; color: var(--text-secondary); }
.pronunciation-tone kbd { color: var(--text-secondary); font: inherit; font-size: .65rem; }
.flashcard-answer-editor[data-recording="true"] .pronunciation-composer { visibility: hidden; }
.skills-answer-dock:has(.pronunciation-composer) { max-height: min(52dvh, 460px); }
.skills-answer-dock .pronunciation-composer { margin-bottom: 12px; }
.skills-listen-cue .speech-control { flex-wrap: wrap; justify-content: center; }
.skills-listen-cue .speech-button { flex-shrink: 0; }
.skills-listen-cue .speech-error { flex-basis: 100%; }

/* Daily goals share tile styling across setup and Progress. */
.study-goal-choices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
button.study-goal-choice { display:flex; flex-direction:column; align-items:stretch; text-align:start; gap:12px; padding:18px; border:1px solid var(--border); border-radius:18px; min-width:0; }
button.study-goal-choice[aria-pressed="true"], button.study-goal-custom[aria-pressed="true"], button.progress-profile-goal { border-color:var(--xp); background:var(--xp-soft); color:var(--xp); box-shadow:inset 0 0 0 1px var(--xp); }
.study-goal-choice-heading { display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:24px; }
.study-goal-choice-heading strong { font-size:.95rem; }
.study-goal-xp { font-size:1.65rem; font-weight:700; font-variant-numeric:tabular-nums; }
.study-goal-xp span { font-size:.75rem; font-weight:500; }
.study-goal-choice small { color:var(--muted); font-size:.78rem; font-weight:400; }
.profile-study-goal { display:grid; gap:14px; padding-top:24px; border-top:1px solid var(--border); }
.profile-study-goal h2, .profile-study-goal p { margin:0; }
.profile-study-goal label { max-width:240px; }
.study-goal-custom { justify-self:start; }
a.home-daily-goal { position:relative; z-index:2; display:flex; align-items:center; gap:22px; margin:-52px 0 30px; padding:24px 26px; min-height:140px; border-radius:24px; border-color:color-mix(in srgb, var(--flag-1, var(--border)) 22%, var(--border)); text-decoration:none; color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 18px 46px color-mix(in srgb, var(--flag-1, var(--text)) 12%, transparent); transition:border-color .15s,box-shadow .15s,transform .16s var(--ease); }
a.home-daily-goal:hover { border-color:color-mix(in srgb, var(--flag-1, var(--border)) 40%, var(--border)); box-shadow:0 2px 4px rgba(0,0,0,.05), 0 22px 54px color-mix(in srgb, var(--flag-1, var(--text)) 18%, transparent); transform:translateY(-1px); }
.home-daily-goal .daily-goal-ring { width:104px; height:104px; flex-basis:104px; }
.home-daily-goal .daily-goal-ring circle { stroke-width:8; }
.home-daily-goal .daily-goal-ring > span { font-size:1.35rem; }
.home-daily-goal .daily-goal-copy h2 { font-size:1.45rem; letter-spacing:-.02em; }
.home-daily-goal .daily-goal-copy p { font-size:.95rem; }
.home-daily-goal .daily-goal-history { gap:5px; padding-left:26px; }
.daily-goal-streak { display:flex; align-items:center; gap:8px; }
.daily-goal-streak .shell-icon { color:var(--coral); }
.home-daily-goal .daily-goal-streak .shell-icon { color:#e8632f; }
.daily-goal-ring { position:relative; width:88px; height:88px; flex:0 0 88px; color:var(--xp); }
.daily-goal-ring > svg { width:100%; height:100%; transform:rotate(-90deg); }
.daily-goal-ring circle { fill:none; stroke-width:7; }
.daily-goal-track { stroke:var(--border); }
.daily-goal-fill { stroke:var(--xp); stroke-linecap:round; }
.daily-goal-ring > span { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; font-weight:750; font-size:1.1rem; }
.daily-goal-copy { flex:1; min-width:0; }
.daily-goal-copy h2 { font-size:1.2rem; margin:5px 0 8px; }
.daily-goal-copy p { margin:0; font-size:.85rem; line-height:1.6; }
.daily-goal-copy p strong { color:var(--xp); white-space:nowrap; }
.daily-goal-copy p span::before { content:" · "; }
.daily-goal-copy p span, .daily-goal-history small { color:var(--muted); }
.daily-goal-history { display:grid; gap:6px; font-size:.85rem; border-left:1px solid var(--border); padding-left:22px; }
.daily-goal-history strong { font-size:1.15rem; }
.daily-goal-open { display:flex; align-items:center; gap:8px; font-size:.8rem; font-weight:650; white-space:nowrap; }
@media (max-width:1050px) { a.home-daily-goal { flex-wrap:wrap; } .daily-goal-open { margin-left:auto; } }
@media (max-width:650px) {
  .study-goal-choices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  button.study-goal-choice { padding:14px; gap:8px; }
  /* Two compact rows: ring + goal, then history + the progress link. */
  a.home-daily-goal { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:12px; padding:16px; margin-top:-40px; min-height:0; }
  .home-daily-goal .daily-goal-ring { grid-column:1; grid-row:1; width:64px; height:64px; flex-basis:64px; }
  .home-daily-goal .daily-goal-ring > span { font-size:1rem; }
  .home-daily-goal .daily-goal-copy { grid-column:2/-1; grid-row:1; }
  .home-daily-goal:not(:has(.daily-goal-ring)) .daily-goal-copy { grid-column:1/-1; }
  .home-daily-goal .daily-goal-copy h2 { margin:0 0 4px; font-size:1.1rem; }
  .home-daily-goal .daily-goal-copy p { font-size:.8rem; line-height:1.45; }
  .home-daily-goal .daily-goal-history { grid-column:1/3; grid-row:2; min-width:0; padding:0; gap:3px; font-size:.75rem; }
  .home-daily-goal .daily-goal-streak { gap:5px; flex-wrap:wrap; }
  .home-daily-goal .daily-goal-history strong { font-size:.95rem; }
  .home-daily-goal .daily-goal-open { grid-column:3; grid-row:2; align-self:center; justify-self:end; margin:0; padding:0; gap:6px; font-size:.75rem; line-height:1.25; }
  .home-daily-goal .daily-goal-open > svg { flex:none; }
  .daily-goal-ring { width:70px; height:70px; flex-basis:70px; }
  .daily-goal-copy { flex-basis:calc(100% - 86px); }
  .daily-goal-copy p span { display:block; }
  .daily-goal-copy p span::before { content:none; }
  .daily-goal-history { border-left:0; padding:0; }
  .daily-goal-open { white-space:normal; }
}

/* Bundled language reference: readable lessons, persistent self-assessment. */
.textbook-page { max-width: 1120px; margin: 0 auto; }
.textbook-intro { margin-bottom: 1.8rem; }
.textbook-intro h1 { margin: .4rem 0; }
.textbook-intro > p { max-width: 75ch; }
.textbook-levels { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.textbook-levels button[aria-pressed="true"], .pinyin-soundboard .pronunciation-tone[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.textbook-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.textbook-filters input[type="search"] { flex: 1 1 260px; min-width: 0; }
.textbook-filters label { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.textbook-filters input[type="checkbox"] { width: auto; }
.textbook-level-group { margin-top: 2rem; }
.textbook-level-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 1rem; }
.textbook-level-heading h2 { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.textbook-level-code { color: var(--muted); font-size: .8em; font-weight: 500; }
.textbook-level-familiarity { display: inline-flex; align-items: center; gap: 9px; font-size: .78rem; color: var(--muted); }
.textbook-familiarity { color: light-dark(hsl(var(--level-hue) 55% 36%), hsl(var(--level-hue) 60% 65%)); font-weight: 750; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.textbook-translation-notice { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.textbook-translation-notice button { padding: 4px 8px; }
.textbook-translation-loading { width: 100%; box-sizing: border-box; min-height: 64px; padding: 16px 20px; margin: 1rem 0; gap: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text-secondary); line-height: 1.5; }
.textbook-translation-loading .word-illustration-spinner { flex: none; width: 22px; height: 22px; }
button.pronunciation-guide-tile { display: flex; align-items: center; gap: 18px; position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: 128px; padding: 24px; margin: 1.75rem 0; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); color: var(--text); box-shadow: none; text-align: start; }
button.pronunciation-guide-tile:hover { border-color: var(--accent); background: var(--accent-soft); }
.pronunciation-guide-symbol { display: grid; place-items: center; flex: none; width: 54px; height: 54px; color: var(--accent-ink); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.pronunciation-guide-copy { display: grid; gap: 8px; }
.pronunciation-guide-copy strong { font-size: 1.2rem; font-weight: 650; }
.pronunciation-guide-copy small { font-size: .85rem; font-weight: 400; line-height: 1.5; color: var(--text-secondary); }
.pronunciation-guide-art { flex: none; width: 200px; height: 80px; margin-inline-start: auto; color: var(--accent); opacity: .5; }
.pronunciation-guide-tile > .shell-icon { flex: none; margin-inline-start: auto; color: var(--accent-ink); }
@media (max-width: 700px) { button.pronunciation-guide-tile { padding: 20px; gap: 14px; } .pronunciation-guide-art { position: absolute; inset-inline-end: 25px; width: 150px; opacity: .12; z-index: -1; } .pronunciation-guide-copy small { max-width: 30ch; } }
.textbook-chapter-list { display: grid; grid-template-columns: minmax(0,1fr); gap: .75rem; }
.textbook-card { display: grid; grid-template-columns: minmax(0,1fr) 6.5rem; align-items: center; gap: 1.5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 16px; color: inherit; background: var(--surface); text-decoration: none; }
.textbook-card:hover { border-color: var(--accent); }
.textbook-card-copy { display: grid; gap: .4rem; min-width: 0; overflow-wrap: anywhere; }
.textbook-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.4; }
.textbook-card p { margin: 0; line-height: 1.5; color: var(--text-secondary); }
.textbook-card-state { display: flex; align-self: stretch; justify-content: center; align-items: center; padding-inline-start: 1.25rem; border-inline-start: 1px solid var(--border); text-align: center; overflow-wrap: anywhere; font-size: .85rem; }
@media (max-width: 600px) { .textbook-card { grid-template-columns: minmax(0,1fr) 5rem; gap: 1rem; padding: 1rem; } .textbook-card-state { padding-inline-start: .75rem; } }
.textbook-article { max-width: 76ch; margin: 0 auto; line-height: 1.75; overflow-wrap: anywhere; }
.textbook-article h1 { font-size: clamp(1.5rem,3vw,2.1rem); line-height: 1.25; margin-top: .6rem; }
.textbook-article h2 { font-size: 1.2rem; margin-top: 1.75rem; line-height: 1.4; }
.textbook-article ul, .textbook-article ol { padding-left: 1.5rem; }
.textbook-article li { margin: .5rem 0; }
.textbook-inline-link { display: inline; padding: 0 .15em; border: 0; border-radius: 3px; background: transparent; color: var(--accent); text-decoration: underline; text-underline-offset: .18em; font: inherit; cursor: pointer; }
.textbook-table { max-width: 100%; overflow-x: auto; }
.textbook-table table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.textbook-table td { padding: .65rem; border: 1px solid var(--border); vertical-align: top; }
.textbook-table thead { font-weight: 700; background: var(--surface); }
.textbook-progress { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; border-top: 1px solid var(--border); padding-top: 1.5rem; margin-top: 2rem; }
.textbook-rating { display: grid; gap: .65rem; }
.textbook-rating .word-progress-levels { display: flex; gap: .35rem; }
.textbook-rating .word-progress-level { width: 2.7rem; height: 2.7rem; }
.pronunciation-info { font-size: .85rem; justify-self: end; margin-bottom: .4rem; }
.pronunciation-guide > .textbook-levels { position: relative; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.pinyin-soundboard .pronunciation-tones { margin: 1rem 0; }
.pinyin-soundboard button.pronunciation-tone { width: 100%; flex-direction: column; justify-content: center; gap: 4px; min-height: 64px; padding: 10px 6px; }
.pinyin-soundboard .pronunciation-tone strong { white-space: nowrap; }
.soundboard-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(74px,1fr)); gap: .5rem; margin: 1rem 0; }
.soundboard-syllable { display: flex; flex-direction: column; gap: .2rem; padding: .75rem .35rem; min-height: 4.1rem; }
.soundboard-syllable strong { font-size: 1.15rem; }
.soundboard-syllable small { font-size: .75rem; opacity: .7; }
.soundboard-player { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1rem 0; padding: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.soundboard-player audio { max-width: 100%; width: 280px; }
.soundboard-player p { flex: 1; min-width: 150px; margin: 0; font-size: .9rem; }
.pinyin-soundboard details { border-top: 1px solid var(--border); padding-top: 1rem; font-size: .9rem; }
@media (max-width: 560px) { .textbook-progress { flex-direction: column; } .textbook-filters { align-items: stretch; } .pinyin-soundboard .pronunciation-tones { grid-template-columns: repeat(3,1fr); } }
.pronunciation-guide > .textbook-levels > button { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; text-align: start; }
.guide-section-status { font-size: .72rem; opacity: .8; }
.guide-section-status .textbook-familiarity { margin-inline-start: 8px; font-size: .85rem; }
.guide-rating { color: hsl(var(--level-hue) 55% 36%); }
/* Core skill estimates use a shared 0–100 axis and identifiable line patterns. */
.skill-history-period, .skill-inspect-date { display:grid; gap:6px; font-size:.8rem; color:var(--muted); }
.skill-history-period select, .skill-inspect-date select { padding:8px 38px 8px 10px; font-size:.85rem; }
.skill-history-legend { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:22px; }
button.skill-history-key { display:grid; width:100%; justify-items:start; gap:9px; min-width:0; padding:13px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-top:3px solid var(--skill-color); border-radius:12px; text-align:left; box-shadow:none; }
button.skill-history-key[aria-pressed="false"] { opacity:.5; background:var(--surface-subtle); }
.skill-key-name { display:flex; align-items:center; gap:7px; font-size:.83rem; font-weight:650; }
.skill-key-name svg { width:26px; height:10px; flex-shrink:0; }
.skill-key-name line { stroke:var(--skill-color); stroke-width:3; stroke-dasharray:var(--skill-dash); }
.skill-history-key small { font-size:.7rem; color:var(--muted); font-weight:400; }
.skill-rating-number { display:inline-flex; align-items:baseline; gap:2px; font-size:1.15rem; font-weight:750; font-variant-numeric:tabular-nums; color:hsl(var(--level-hue),48%,38%); background:color-mix(in srgb,hsl(var(--level-hue),55%,48%) 13%,var(--surface)); padding:5px 8px; border-radius:9px; }
.skill-rating-number small { font-size:.7rem; font-weight:500; color:var(--muted); }
.skill-history-chart .skill-history-line { fill:none; stroke:var(--skill-color); stroke-width:2.5; stroke-linejoin:round; stroke-dasharray:var(--skill-dash); }
.skill-history-chart .skill-history-dot { fill:var(--skill-color); stroke:var(--surface); stroke-width:1.5; }
.skill-history-chart > svg { height:255px; }
.skill-history-chart > svg:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.skill-inspect-date { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin:8px 0 14px; }
.skill-inspect-date select { width:auto; min-width:145px; }
.skill-history-readout { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:12px; min-height:105px; }
.skill-history-readout > div { display:flex; flex-wrap:wrap; align-content:flex-start; align-items:baseline; gap:8px; padding-left:10px; border-left:2px solid var(--skill-color); }
.skill-history-readout strong { flex-basis:100%; font-size:.8rem; }
.skill-history-readout small { color:var(--muted); font-size:.72rem; }
.skill-grade-breakdown { border-top:1px solid var(--border); margin-top:20px; padding-top:16px; font-size:.85rem; }
.skill-grade-breakdown summary { cursor:pointer; font-weight:650; }
.skill-grade-table-wrap { overflow-x:auto; }
.skill-grade-table-wrap table { width:100%; font-size:.8rem; }
.skill-grade-table-wrap caption { text-align:left; color:var(--muted); padding:14px 0; font-size:.75rem; }
.skill-grade-table-wrap th, .skill-grade-table-wrap td { padding:10px 8px; text-align:left; border-bottom:1px solid var(--border); }
.skill-grade-table-wrap small { display:block; color:var(--muted); margin-top:5px; }
.skill-history-empty { display:grid; justify-items:center; padding:30px 20px; color:var(--muted); text-align:center; }
.skill-history-empty p { max-width:440px; line-height:1.7; }
@media(max-width:600px) {
 .skill-history-legend { gap:8px; }
 button.skill-history-key { padding:10px; }
 .skill-key-name { font-size:.78rem; }
 .skill-history-period { width:100%; }
 .skill-history-readout { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.skill-history-cursor { stroke:var(--border-strong); stroke-width:1; }

.profile-quick-row { display: flex; align-items: center; gap: 4px; border-radius: 10px; }
.profile-quick-row:has(.profile-quick.active) { background: var(--accent-soft); }
.profile-quick-row .profile-quick { flex: 1; min-width: 0; }
.profile-quick-edit { flex: none; margin-right: 4px; width: 44px; height: 44px; }
.language-profile-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.language-profile-heading > div { flex: 1; min-width: 0; }
.language-profile-heading strong { font-size: 1.2rem; }
.language-profile-heading p { margin: 4px 0 0; font-size: .9rem; }
.language-profile-options { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 20px; }
.language-profile-options h3 { margin-top: 0; }
.language-profile-save-status { min-height: 1.5em; font-size: .85rem; margin: 16px 0; }
.language-profile-delete { display: grid; justify-items: start; gap: 8px; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 20px; }
.language-delete-warning { display: flex; align-items: flex-start; gap: 18px; margin: 8px 0 28px; }
.language-delete-warning h3 { margin: 0 0 12px; }
.language-delete-warning p { margin: 0; line-height: 1.6; }
.language-delete-icon { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 16px; color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); }
.language-delete-entry { display: grid; gap: 12px; }
.language-delete-name { width: fit-content; padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 1.25rem; user-select: text; }
.language-delete-entry input { width: 100%; }
.language-delete-actions { justify-content: flex-end; margin-top: 28px; flex-wrap: wrap; }
@media (max-width: 540px) {
  .language-delete-warning { gap: 12px; }
  .language-delete-icon { width: 42px; height: 42px; border-radius: 12px; }
}

button.progress-profile-goal svg { flex:none; }
.progress-total-xp > strong, .progress-day-detail > strong { color: var(--xp); }
.progress-today-value { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.progress-today-value > strong { font-size:clamp(2rem,4vw,2.8rem); line-height:1.15; color:var(--xp); font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.progress-today .daily-goal-ring { width:62px; height:62px; flex-basis:62px; }
.progress-today .daily-goal-ring > span { font-size:.8rem; }
.daily-goal-fill { transition:stroke-dasharray .3s ease; }

/* Daily quests */
.home-quests { display: grid; gap: 12px; margin-bottom: 28px; }
.home-quests-heading { gap: 12px 20px; flex-wrap: wrap; margin-bottom: 0; }
.home-quests-heading h2 { margin: 0; font-size: 1.05rem; }
.quest-timer { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quest-timer svg { color: var(--muted); }
.quest-timer[data-expired="true"] { color: var(--accent-ink); border-color: var(--border-strong); }
.quest-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; container: daily-quests / inline-size; }
.quest-card { --tone: var(--accent); --tone-soft: var(--accent-soft); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-width: 0; min-height: 88px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); font: inherit; text-align: start; box-shadow: none; cursor: default; }
.quest-card.tone-jade { --tone: var(--success); --tone-soft: color-mix(in srgb, var(--success) 14%, var(--surface)); }
.quest-card.tone-marigold { --tone: var(--marigold); --tone-soft: var(--marigold-soft); }
.quest-card.tone-coral { --tone: var(--coral); --tone-soft: var(--coral-soft); }
.quest-card.tone-sky { --tone: var(--sky); --tone-soft: var(--sky-soft); }
.quest-icon { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 15px; background: var(--tone-soft); color: var(--tone); }
.quest-icon .shell-icon { width: 24px; height: 24px; }
.quest-card[data-complete="true"] { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: color-mix(in srgb, var(--success) 6%, var(--surface)); }
.quest-card[data-complete="true"] .quest-icon { background: var(--success); color: #fff; }
.quest-copy { display: grid; gap: 3px; min-width: 0; }
.quest-copy strong { overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.quest-copy small { overflow: hidden; color: var(--muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.quest-meter { display: block; height: 4px; margin-top: 3px; border-radius: 4px; overflow: hidden; background: var(--border); }
.quest-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--tone); transition: width .35s ease; }
.quest-card[data-complete="true"] .quest-meter > span { background: var(--success); }
.quest-status { display: grid; gap: 4px; justify-items: end; flex: none; }
.quest-progress { color: var(--text-secondary); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quest-bonus { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--xp-soft); color: var(--xp); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.quest-card[data-complete="true"] .quest-bonus { background: color-mix(in srgb, var(--xp) 16%, var(--surface)); color: var(--xp); }
@container daily-quests (max-width: 700px) {
  .quest-card { grid-template-columns: 28px minmax(0,1fr); gap: 8px; min-height: 0; padding: 12px; align-items: start; }
  .quest-card .quest-icon { grid-column: 1; grid-row: 1; width: 28px; height: 28px; border-radius: 9px; }
  .quest-copy { grid-column: 1 / -1; grid-row: 1; gap: 6px; }
  .quest-copy strong { display: flex; align-items: center; min-height: 28px; padding-inline-start: 36px; font-size: .85rem; white-space: normal; overflow-wrap: anywhere; }
  .quest-copy small { font-size: .72rem; line-height: 1.35; white-space: normal; }
  .quest-status { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
  .quest-bonus { padding: 3px 6px; font-size: .68rem; }
}
.quest-loading { display: grid; justify-items: center; gap: 10px; min-height: 150px; padding: 22px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-secondary); text-align: center; align-content: center; }
.quest-loading strong { font-size: .95rem; }
.quest-loading .muted { font-size: .82rem; }
@media (max-width: 600px) {
  .home-quests { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) { .quest-meter > span { transition: none; } }
.study-goal-language { display:flex; align-items:center; gap:10px; margin:0 0 16px; }
.study-goal-language > span { font-size:1.5rem; }
@media (max-width:700px) {
  .progress-summary { grid-template-columns:1fr; }
  .progress-today-value > strong { font-size:1.7rem; }
}
@media (prefers-reduced-motion:reduce) { .daily-goal-fill { transition:none; } }

/* Vocabulary collections and the permanent word database. */
.vocabulary-collections { display: grid; gap: 12px; }
.vocabulary-collections .vocabulary-collection-row { margin-top: 0; }
.vocabulary-collection-row { display: flex; align-items: center; gap: 16px; padding: 18px 22px; }
.vocabulary-collection-open { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.vocabulary-collection-open > svg { margin-left: auto; }
.vocabulary-collection-copy { flex: 1; min-width: 0; }
.vocabulary-collection-copy h2, .vocabulary-collection-open h2 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.vocabulary-collection-copy p, .vocabulary-collection-open p { margin: 5px 0 12px; font-size: .875rem; }
.vocabulary-list-art { display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 18px; background: var(--surface-subtle); overflow: hidden; font-size: 30px; }
.vocabulary-list-art img { width: 100%; height: 100%; object-fit: cover; }
.vocabulary-study-icon { flex-shrink: 0; }
.vocabulary-create-trigger { margin-top: 20px; }
.vocabulary-create-actions { flex-wrap: wrap; justify-content: flex-start; }
.vocabulary-create-actions .vocabulary-create-trigger { margin-top: 20px; }
.generated-list-title { margin: 6px 0 14px; }
.generated-list-title input { font-weight: 600; }
.structure-suggestions { display: grid; max-height: 55dvh; margin: 12px 0 20px; overflow-y: auto; }
.structure-suggestion-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--border); }
.structure-suggestion-row > input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--accent); }
.structure-suggestion-copy { display: grid; gap: 10px; flex: 1; min-width: 0; }
.structure-suggestion-copy p { margin: 0; font-size: .84rem; }
.vocabulary-detail-heading { display: flex; align-items: center; gap: 16px; }
.vocabulary-detail-heading h2 { margin: 0; overflow-wrap: anywhere; }
.vocabulary-list-header { display: grid; gap: 20px; }
.vocabulary-list-header .vocabulary-progress-summary { margin: 0; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.vocabulary-list-header .reader-learning-heading { align-items: center; gap: 12px; flex-wrap: wrap; }
.vocabulary-list-header .reader-learning-heading strong { margin-left: auto; }
.vocabulary-database-search { margin: 24px 0; }
.vocabulary-suggestion-controls { display: flex; align-items: center; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.vocabulary-suggestions { display: grid; max-height: 50dvh; overflow-y: auto; }
.vocabulary-suggestion-row { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.vocabulary-suggestion-row input { width: 20px; height: 20px; flex-shrink: 0; }
.vocabulary-suggestion-row p { margin: 4px 0 0; font-size: .9rem; }
.vocabulary-suggestion-footer { display: flex; align-items: center; gap: 12px; padding-top: 20px; }
.vocabulary-suggestion-loading { display: flex; align-items: center; gap: 12px; padding: 24px 0; }
@media (max-width: 600px) {
    .vocabulary-collection-row { padding: 16px; gap: 8px; }
    .vocabulary-collection-open { gap: 12px; }
    .vocabulary-list-art { flex-basis: 48px; width: 48px; height: 48px; border-radius: 14px; font-size: 26px; }
}

/* Word suggestions keep fields, streamed results and actions in separate rows. */
.vocabulary-suggestion-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 180px); gap: 20px; margin-top: 24px; }
.vocabulary-suggestion-form label { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.vocabulary-suggestion-form .vocabulary-suggestion-footer { grid-column: 1 / -1; padding-top: 0; }
.vocabulary-suggestion-footer { justify-content: flex-end; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.vocabulary-add-status { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }
.vocabulary-suggestion-loading { min-height: 64px; padding: 18px 0; }
.vocabulary-suggestion-loading > .muted { margin-left: auto; white-space: nowrap; }
.vocabulary-suggestion-row > div { flex: 1; min-width: 0; }
.vocabulary-suggestion-controls { padding-top: 12px; border-top: 1px solid var(--border); }
.vocabulary-view-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 16px; }
.vocabulary-view-options [aria-pressed="true"] { background: var(--surface-subtle); box-shadow: inset 0 0 0 1px currentColor; }
.vocabulary-compact-list { padding: 0 18px; }
.vocabulary-compact-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.vocabulary-compact-row + .vocabulary-compact-row { border-top: 1px solid var(--border); }
/* Phrases and sentence structures list their entries like vocabulary words. */
.phrase-search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.phrase-search .search-field { flex: 1 1 260px; margin: 0; }
.phrase-search .option-row { margin: 0; white-space: nowrap; }
.phrase-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 0; }
.phrase-row + .phrase-row, .structure-rows .structure-card + .structure-card { border-top: 1px solid var(--border); }
.structure-rows .structure-card { padding: 20px 0; }
.structure-rows .structure-card:last-child { padding-bottom: 4px; }
.vocabulary-compact-link { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(80px, 1fr) minmax(80px, 1fr) minmax(100px, 2fr); gap: 12px; align-items: baseline; color: inherit; text-decoration: none; }
.vocabulary-compact-link > * { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .vocabulary-suggestion-form { grid-template-columns: 1fr; gap: 18px; }
  .vocabulary-compact-link { grid-template-columns: 1fr; gap: 3px; }
  .vocabulary-compact-link .muted { font-size: .85rem; }
  .vocabulary-compact-meaning { font-size: .9rem; }
}

.vocabulary-import-actions { margin-bottom: 1rem; flex-wrap: wrap; }
.standard-vocabulary-lists { display: grid; gap: 10px; }
button.standard-vocabulary-list { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 64px; padding: 16px; text-align: start; white-space: normal; }
.standard-vocabulary-list > span { display: grid; gap: 4px; }
.standard-vocabulary-list svg { flex: none; }
.standard-vocabulary-heading { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.standard-vocabulary-heading h2 { margin: 0; font-size: 1.1rem; }

.standard-vocabulary-words { max-height: min(45vh, 30rem); overflow-y: auto; overscroll-behavior: contain; }
.standard-list-source { margin: .75rem 0; overflow-wrap: anywhere; }
.standard-list-source p { margin: .5rem 0; }
.standard-list-license { white-space: pre-wrap; font-size: .75rem; color: var(--muted); }

/* A list has one compact word view, with editing in its own dialog. */
.vocabulary-title { display: flex; align-items: center; gap: 16px; }
.vocabulary-title h1 { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.vocabulary-title > .icon-button { flex-shrink: 0; }
.vocabulary-progress-summary.surface { display: grid; gap: 18px; margin: 0; }
.vocabulary-progress-summary .reader-learning-heading { margin: 0; }
.vocabulary-progress-summary h2 { font-size: 1.05rem; margin: 0; }
.vocabulary-practice-row { display: flex; justify-content: flex-end; }
.vocabulary-practice-button { min-height: 52px; min-width: 180px; font-size: 1.05rem; padding: 14px 28px; }
.vocabulary-between-cards { display: flex; justify-content: flex-end; margin: 22px 0; }
.vocabulary-words-card .vocabulary-database-search { margin: 0 0 12px; }
.vocabulary-words-card .vocabulary-compact-list { padding: 0; }
.vocabulary-word-progress { flex: 0 0 44px; min-width: 0; }
.vocabulary-word-progress > button.word-progress-chip { width: 100%; min-height: 36px; font-size: 1rem; }
.vocabulary-word-progress > button.word-progress-chip.unrated { background: transparent; color: var(--muted); font-weight: 600; }
.vocabulary-word-progress > button.word-progress-chip:hover:not(:disabled), .vocabulary-word-progress > button.word-progress-chip:focus-visible { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text); }
.vocabulary-list-settings { display: grid; gap: 20px; margin: 0; }
.vocabulary-list-settings > label { max-width: none; margin: 0; }
.vocabulary-list-settings .vocabulary-actions { margin: 0; justify-content: flex-end; }
@media (max-width: 600px) {
  .vocabulary-title { gap: 12px; }
  .vocabulary-title .vocabulary-list-art { width: 44px; height: 44px; }
  .vocabulary-compact-row { gap: 8px; }
  .vocabulary-word-progress { flex-basis: 40px; }
  .vocabulary-compact-link .muted:empty { display: none; }
}

.reader-photo { display: grid; gap: 24px; }
.reader-photo fieldset { margin: 0; }
.photo-upload { position: relative; overflow: hidden; min-height: 44px; }
.reader-photo .button-row button { min-height: 44px; }
.photo-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.photo-upload:focus-within { outline: 2px solid currentColor; outline-offset: 3px; }
.photo-preview, .photo-camera video { display: block; width: 100%; max-height: 380px; object-fit: contain; border-radius: 12px; background: var(--surface-subtle); }
.photo-camera[hidden] { display: none; }
.photo-camera .form-actions { margin-top: 16px; }
.photo-modes { display: grid; gap: 14px; }
.photo-mode { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.photo-mode:has(input:checked) { border-color: var(--text); background: var(--surface-subtle); }
.photo-mode input { width: auto; margin: 0; }
.photo-mode span { display: grid; gap: 4px; }
.photo-mode small { color: var(--muted); font-weight: 400; }
.photo-review { border-top: 1px solid var(--border); padding-top: 24px; }
.photo-review h2, .photo-review p { margin: 0; }

.reader-source { display: grid; gap: 6px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); font-size: .875rem; color: var(--muted); }
.reader-source a { overflow-wrap: anywhere; text-underline-offset: 3px; }

/* Audio coach library. */
.coach-setup { max-width: 820px; }
.coach-setup form { display: grid; gap: 16px; }
.coach-visual { display:flex; align-items:center; gap:7px; height:72px; color:var(--accent); }
.coach-visual span { width:4px; height:24px; border-radius:4px; background:currentColor; opacity:.5; }
.coach-visual span:nth-child(3),.coach-visual span:nth-child(5) {height:46px;opacity:.8;}
.coach-library,.coach-history {display:grid;gap:16px;}
.coach-library {margin-top:32px;}
.coach-session-link {display:flex;align-items:center;gap:20px;text-decoration:none;color:inherit;}
.coach-session-link strong {flex:1;}
.coach-session-text {flex:1;display:grid;gap:4px;min-width:0;}
.coach-session-text span {font-size:.85rem;}
.coach-session-link .tag {margin:0;}
.tag.coach-done {background:var(--surface-subtle);color:var(--text-secondary);}
.coach-tip {display:flex;gap:10px;align-items:flex-start;margin:0;}
.coach-back {display:inline-flex;align-items:center;gap:6px;width:fit-content;margin-bottom:12px;color:var(--text-secondary);text-decoration:none;font-size:.9rem;}
.coach-back:hover {color:var(--text);}
.coach-tip svg {flex-shrink:0;margin-top:3px;}
/* Role-play reuses the live controller's start button and caption. */
.coach-start {min-height:52px;padding:14px 24px;}
.coach-live-caption {min-height:3.3em;max-height:12em;overflow:auto;font-size:1.2rem;line-height:1.65;white-space:pre-wrap;margin:24px 0 0;}

/* Audio coach session: a full-screen, hands-free stage. Status sits top-center,
   the coach in the middle, and large controls bottom-center for a quick glance
   and an easy tap while moving. */
.reader-popup.coach-stage {position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;background:var(--bg);box-shadow:none;}
.coach-stage > .reader-popup-heading {position:absolute;z-index:2;top:0;left:0;right:0;justify-content:center;padding:max(18px,env(safe-area-inset-top)) 76px 0;border:0;background:none;pointer-events:none;}
.coach-stage > .reader-popup-heading h2 {max-width:100%;overflow:hidden;color:var(--text-secondary);font-size:.95rem;font-weight:600;text-align:center;text-overflow:ellipsis;white-space:nowrap;}
.coach-stage > .reader-popup-heading .icon-button {position:absolute;top:max(8px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:52px;height:52px;border-radius:50%;pointer-events:auto;}
.coach-stage > .reader-popup-body {position:absolute;inset:0;padding:0;overflow:hidden;}
.coach-stage-live {position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px;padding:calc(max(18px,env(safe-area-inset-top)) + 40px) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));}
.coach-stage-top {display:grid;justify-items:center;gap:8px;text-align:center;}
.coach-stage-status {display:inline-flex;align-items:center;gap:10px;min-height:40px;margin:0;padding:8px 18px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:1rem;font-weight:600;}
.coach-stage-status [role="status"]:empty::before {content:"\00a0";}
.coach-stage-dot {width:10px;height:10px;flex:none;border-radius:50%;background:var(--muted);}
[data-live="true"] .coach-stage-dot {background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.coach-stage-progress {margin:0;color:var(--muted);font-size:.85rem;}
.coach-stage-error {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;color:var(--danger);}
.coach-stage-error p {margin:0;}
.coach-stage-center {display:grid;grid-template-rows:minmax(140px,30dvh) minmax(0,1fr) auto;justify-items:center;gap:16px;width:100%;max-width:680px;min-height:0;margin:0 auto;text-align:center;}
.coach-stage-visual {display:grid;width:100%;place-items:center;}
.coach-stage-words {display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.coach-stage-foot {max-width:100%;min-width:0;display:grid;min-height:48px;justify-items:center;align-content:end;gap:12px;}
.coach-stage-hint {max-width:420px;margin:0;color:var(--text-secondary);line-height:1.6;}
.coach-stage-caption {max-width:640px;max-height:30dvh;margin:0;overflow-y:auto;font-size:clamp(1.25rem,3.6vw,1.75rem);font-weight:500;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;}
.coach-stage-caption:empty {display:none;}
.coach-stage-actions {display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.coach-stage-actions > :is(button,.button-link) {min-height:48px;display:inline-flex;align-items:center;gap:8px;}
.coach-stage .coach-now {display:grid;gap:10px;width:100%;}
.coach-line {display:flex;align-items:center;justify-content:center;gap:14px;}
.coach-line p {margin:0;font-size:1.05rem;line-height:1.6;color:var(--text-secondary);}
.coach-line.target p {color:var(--text);font-size:clamp(1.3rem,3.6vw,1.7rem);font-weight:600;}
.coach-reveal {max-width:100%;max-height:24dvh;overflow:auto;overflow-wrap:anywhere;display:grid;justify-items:center;gap:6px;padding:16px 22px;border:1px solid var(--border);border-radius:18px;background:var(--surface);}
.coach-reveal strong {font-size:1.5rem;}
.coach-reveal button,.coach-reveal-toggle {display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;}
.coach-stage .coach-confirm {display:grid;justify-items:center;gap:12px;padding:16px 22px;border:1px solid var(--accent);border-radius:18px;background:var(--surface);}
.coach-stage .coach-confirm p {margin:0;font-size:1.1rem;}

/* Speaking Coach artwork stays behind the live stage; content has comic-style scrims. */
.reader-popup.coach-stage {--text:#f5f5f6;--text-secondary:#dedee3;--muted:#c1c3cb;--border:rgba(255,255,255,.22);--border-strong:rgba(255,255,255,.4);--surface:rgba(28,29,33,.7);--accent:#eeeef2;--accent-ink:#eeeef2;--accent-text:#202126;--accent-soft:rgba(255,255,255,.12);background:#15161a;color:var(--text);isolation:isolate}
.coach-background-ambient {position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 20% 20%,#35494d,transparent 65%),radial-gradient(ellipse at 85% 80%,#4b3b50,transparent 65%),#181b22}
.coach-stage-live {z-index:1}
.coach-stage>.reader-popup-heading {z-index:3;padding-top:max(12px,env(safe-area-inset-top))}
.coach-stage .coach-glass,.coach-stage>.reader-popup-heading :is(h2,.icon-button) {
  border:1px solid var(--border);border-radius:20px;background:rgba(22,23,27,.68);color:var(--text);
  backdrop-filter:blur(10px) saturate(.9);-webkit-backdrop-filter:blur(10px) saturate(.9);box-shadow:0 8px 32px rgba(0,0,0,.12);
}
.coach-stage>.reader-popup-heading h2 {margin:0;padding:10px 18px}
.coach-stage>.reader-popup-heading .icon-button {border-radius:50%}
.coach-stage .coach-stage-status {border-radius:999px}
.coach-stage .coach-stage-progress {padding:6px 14px}
.coach-stage .coach-stage-error,.coach-stage .coach-stage-hint {padding:10px 16px}
.coach-stage .coach-stage-caption,.coach-stage .coach-now {padding:16px 22px}
.coach-stage .coach-starting {padding:20px 24px}
.coach-stage .coach-starting .coach-stage-hint {padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.coach-stage .coach-stage-controls {width:auto;max-width:100%;padding:12px 16px}
.coach-stage .coach-stage-actions {padding:8px}
.coach-stage .loading-row.coach-glass {padding:10px 16px}
.coach-stage .coach-round-label {color:var(--text)}
/* Nested forms need a solid surface above the translucent stage panels. */
.coach-stage :is(.anchored-popover,.reader-word-bubble) {--surface:#232429;}
.coach-stage .coach-reveal-toggle {background:rgba(22,23,27,.8);color:var(--text);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.coach-background-retry {position:absolute;z-index:2;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom))}
.coach-background-error {position:absolute;z-index:2;left:max(12px,env(safe-area-inset-left));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 48px);max-width:220px;font-size:.75rem}
@media(max-width:600px) {
  .coach-stage .coach-stage-controls {padding:10px 6px}
  .coach-stage .coach-stage-caption,.coach-stage .coach-now {padding:12px 16px}
  .coach-stage .coach-starting {padding:16px}
}
@media(prefers-reduced-transparency:reduce) {
  .coach-stage .coach-glass,.coach-stage>.reader-popup-heading :is(h2,.icon-button),.coach-stage .coach-reveal-toggle {background:#232429;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* The orb mirrors the live state set by the controller on the stage root. */
.coach-orb {position:relative;display:grid;flex:none;place-items:center;width:clamp(96px,22vmin,176px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 55%,white),var(--accent) 60%,color-mix(in srgb,var(--accent) 70%,black));color:var(--accent-text);opacity:.5;transition:opacity .3s ease,transform .3s ease;}
.coach-orb::after {content:"";position:absolute;inset:-14px;border:2px solid var(--accent);border-radius:50%;opacity:0;}
[data-live="true"] .coach-orb,.coach-orb.done {opacity:.9;}
[data-state="connecting"] .coach-orb,.coach-stage-live.starting .coach-orb {animation:coach-breathe 1.6s ease-in-out infinite;}
[data-state="ready"] .coach-orb::after {animation:coach-ring 2.2s ease-out infinite;}
[data-state="hearing"] .coach-orb {opacity:1;transform:scale(1.06);}
[data-state="hearing"] .coach-orb::after {animation:coach-ring 1s ease-out infinite;}
[data-state="thinking"] .coach-orb {animation:coach-breathe 1s ease-in-out infinite;}
[data-state="speaking"] .coach-orb {opacity:1;animation:coach-speak .45s ease-in-out infinite alternate;}
@keyframes coach-breathe {50% {opacity:.4;transform:scale(.92);}}
@keyframes coach-ring {from {opacity:.6;transform:scale(.9);} to {opacity:0;transform:scale(1.25);}}
@keyframes coach-speak {to {transform:scale(1.08);}}
@keyframes coach-spin {to {transform:rotate(360deg);}}

/* Startup steps: planning, microphone, then the live connection. */
/* Preparation contains the whole checklist, rather than the live stage's
   fixed orb/caption rows. Keep every message in flow and scroll short screens. */
.coach-stage-center.coach-stage-preparing {grid-template-rows:none;grid-auto-rows:max-content;align-content:start;align-content:safe center;overflow-y:auto;overscroll-behavior:contain;padding-block:16px;}
.coach-stage-preparing > .coach-starting {min-width:0;max-width:100%;}

.coach-starting {display:grid;justify-items:center;gap:22px;}
.coach-starting h2 {margin:0;font-size:clamp(1.3rem,4vw,1.7rem);}
.coach-steps {display:grid;gap:14px;min-width:min(300px,100%);margin:0;padding:0;list-style:none;text-align:start;}
.coach-steps li {display:flex;align-items:center;gap:12px;color:var(--muted);font-size:1.05rem;}
.coach-steps li:is(.active,.done) {color:var(--text);}
.coach-steps li.failed {color:var(--danger);}
.coach-step-mark {display:grid;flex:none;place-items:center;width:28px;height:28px;border:2px solid var(--border);border-radius:50%;}
.coach-steps .done .coach-step-mark {border-color:var(--accent);background:var(--accent);color:var(--accent-text);}
.coach-steps .active .coach-step-mark {border-color:var(--accent);}
.coach-steps .failed .coach-step-mark {border-color:var(--danger);}
.coach-step-spinner {width:14px;height:14px;border:2px solid var(--accent);border-right-color:transparent;border-radius:50%;animation:coach-spin .8s linear infinite;}

/* Bottom controls: large round targets with labels, the microphone in the middle. */
.coach-stage-bottom {display:grid;justify-items:center;gap:18px;}
.coach-stage-controls {display:flex;align-items:flex-start;justify-content:center;gap:clamp(4px,2vw,24px);width:100%;}
.coach-stage-controls[hidden] {display:none;}
button.coach-round,button.coach-mic {display:grid;justify-items:center;gap:8px;min-width:64px;min-height:0;padding:0;border:0;background:none;box-shadow:none;color:var(--text);}
button.coach-round:hover:not(:disabled),button.coach-mic:hover:not(:disabled) {background:none;}
.coach-round-icon {display:grid;place-items:center;width:64px;height:64px;border:1px solid var(--border);border-radius:50%;background:var(--surface);transition:border-color .15s ease,transform .15s ease;}
button.coach-round:hover:not(:disabled) .coach-round-icon {border-color:var(--accent);}
:is(button.coach-round,button.coach-mic):active:not(:disabled) .coach-round-icon {transform:scale(.94);}
:is(button.coach-round,button.coach-mic):focus-visible {outline:none;}
:is(button.coach-round,button.coach-mic):focus-visible .coach-round-icon {outline:3px solid var(--accent);outline-offset:3px;}
button.coach-round:disabled {opacity:.45;}
.coach-round-label {max-width:84px;color:var(--text-secondary);font-size:.85rem;font-weight:600;line-height:1.2;text-align:center;}
.coach-stage-controls > button.coach-round {margin-top:12px;}
.coach-mic .coach-round-icon {width:88px;height:88px;border:3px solid var(--accent);background:var(--accent);color:var(--accent-text);}
[data-live="true"] .coach-mic .coach-round-icon {background:var(--surface);color:var(--accent-ink);}
.coach-mic .coach-round-label {max-width:96px;color:var(--text);}
.coach-stage-live.starting .coach-stage-controls > button.coach-round {opacity:.35;pointer-events:none;}
@media (prefers-reduced-motion: reduce) {.coach-orb,.coach-orb::after,.coach-step-spinner {animation:none !important;}}

/* Session preferences: two switches, before a session and inside the details panel. */
.coach-preferences {display:grid;width:100%;text-align:start;}
.coach-preferences .switch-row {margin:0;padding:12px 0;}
.coach-preferences .switch-copy small {display:block;color:var(--text-secondary);line-height:1.45;}

/* Session details panel: typing, phrases, and the transcript. */
.reader-popup.coach-details {width:min(620px,calc(100vw - 24px));}
.coach-details > .reader-popup-body {display:grid;gap:28px;}
.coach-type,.coach-review,.coach-save-to,.coach-lookup {display:grid;gap:10px;}
.coach-review h3,.coach-history h3 {margin:0;}
.coach-inline-field {display:flex;gap:10px;}
.coach-inline-field input {flex:1;min-width:0;}
.coach-inline-field button {display:inline-flex;align-items:center;gap:8px;flex-shrink:0;}
.coach-phrase {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:16px 0;border-top:1px solid var(--border);}
.coach-phrase > .coach-phrase-copy {display:grid;gap:4px;min-width:0;overflow-wrap:anywhere;}
/* Phrase actions must not place buttons inside nested word bubbles or pickers. */
.coach-phrase > button,.coach-phrase > .coach-phrase-saved {grid-column:2;grid-row:1;align-self:center;}
.coach-lookup {padding-top:16px;border-top:1px solid var(--border);}
.coach-exchange p {white-space:pre-wrap;line-height:1.65;}
.coach-exchange.learner {border-color:color-mix(in srgb,var(--accent) 30%,var(--border));}
.coach-earlier summary {cursor:pointer;color:var(--text-secondary);}
.coach-earlier[open] {display:grid;gap:16px;}
.coach-details-end {display:flex;justify-content:flex-end;padding-top:18px;border-top:1px solid var(--border);}
.coach-details-end button {display:inline-flex;align-items:center;gap:8px;}
.coach-phrase-review {gap:12px}
.coach-save-help {margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.coach-phrase-tools {display:grid;gap:12px;padding:14px;border:1px solid var(--border);border-radius:16px;background:rgba(22,23,27,.85)}
.coach-phrase-destination {display:grid;gap:6px}
.coach-phrase-list-row,.coach-new-list {display:flex;gap:8px;align-items:center}
.coach-phrase-list-row>select,.coach-new-list>input {flex:1;min-width:0}
.coach-phrase-list-row>button,.coach-new-list>button {flex:none;white-space:nowrap}
.coach-phrase-bulk {display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.coach-save-notice {margin:0;color:#9be2b1;font-size:.85rem}
.coach-phrase-saved {display:inline-flex;align-items:center;gap:5px;color:#9be2b1;font-size:.85rem;font-weight:600}
.coach-phrase-tools .error {margin:0}
.coach-history>summary {cursor:pointer;font-weight:650;color:var(--muted)}
.coach-history[open] {display:grid;gap:14px}
@media(max-width:380px){.coach-phrase-list-row,.coach-new-list {flex-wrap:wrap}.coach-phrase-list-row>select,.coach-new-list>input {flex-basis:100%}}

@media(max-width:600px){.coach-session-link{gap:12px}.coach-round-icon{width:56px;height:56px}.coach-mic .coach-round-icon{width:76px;height:76px}.coach-stage-controls>button.coach-round{margin-top:10px}button.coach-round,button.coach-mic{min-width:0;flex:0 1 56px}.coach-stage-controls>button.coach-mic{flex-basis:76px}.coach-round-label{max-width:100%;overflow-wrap:anywhere;font-size:.78rem}}

@media(max-width:360px){.coach-round-icon{width:48px;height:48px}.coach-mic .coach-round-icon{width:64px;height:64px}.coach-stage-controls>button.coach-round{margin-top:8px}.coach-stage-controls>button.coach-mic{flex-basis:64px}}

/* Short screens keep the new scrims clear of one another. */
@media(max-height:600px) {
  .coach-stage-live {gap:8px;padding-top:54px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .coach-stage-top {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
  .coach-stage .coach-stage-status {min-height:32px;padding:6px 12px;font-size:.85rem}
  .coach-stage .coach-stage-progress {font-size:.75rem}
  .coach-stage .coach-stage-error {flex-basis:100%}
  .coach-stage-center:not(.coach-stage-preparing) {grid-template-rows:minmax(64px,14dvh) minmax(0,1fr) auto;gap:8px}
  .coach-stage-visual .coach-orb {width:64px}
  .coach-stage .coach-stage-caption {font-size:1rem;max-height:100%;padding:10px 12px}
  .coach-stage .coach-reveal {padding:10px 16px;gap:3px;max-height:22dvh;font-size:.85rem}
  .coach-stage .coach-reveal strong {font-size:1.2rem}
  .coach-stage .coach-stage-controls {padding:6px 10px;gap:8px}
  .coach-stage .coach-round-icon {width:40px;height:40px}
  .coach-stage .coach-mic .coach-round-icon {width:52px;height:52px}
  .coach-stage .coach-round-label {font-size:.7rem;max-width:64px}
  .coach-stage .coach-stage-controls>button.coach-round {margin-top:6px}
}
@media(max-height:600px) and (min-width:600px) {
  .coach-stage-center:not(.coach-stage-preparing) {max-width:960px;grid-template-columns:100px minmax(0,1fr) minmax(130px,200px);grid-template-rows:minmax(0,1fr);gap:16px;align-items:center}
  .coach-stage-visual {grid-column:1;grid-row:1}
  .coach-stage-words {grid-column:2;grid-row:1;max-height:100%}
  .coach-stage-foot {grid-column:3;grid-row:1;max-height:100%;align-content:center;overflow:auto}
  .coach-stage .coach-reveal {max-height:100%}
  .coach-stage-words .coach-starting {max-height:100%;overflow:auto;padding:12px}
}

/* Role-play: one room, one partner, a small set of practical outcomes. */
.roleplay-invitation,.roleplay-library-row,.roleplay-library-link{display:flex;align-items:center;gap:24px}
.roleplay-invitation{padding:32px}.roleplay-invitation>div:nth-child(2){flex:1}.roleplay-invitation h2{margin:0 0 10px}.roleplay-invitation p{margin:0;color:var(--muted)}
.roleplay-mark{display:grid;place-items:center;width:80px;height:80px;flex-shrink:0;border-radius:24px;background:var(--bg);color:var(--accent)}
.roleplay-library{display:grid;gap:14px;margin-top:28px}.roleplay-library-row{padding:20px 24px}.roleplay-library-link{flex:1;flex-wrap:wrap;min-width:0;color:inherit;text-decoration:none}.roleplay-library-link strong{flex:1}.roleplay-library-link span{font-size:.85rem}
.roleplay-task-panel{display:grid;gap:16px}
.roleplay-task{padding:24px}.roleplay-task-heading{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.roleplay-task-heading h3{flex:1;margin:0;font-size:1.05rem}.roleplay-task-heading .tag{font-size:.7rem}.roleplay-step{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;font-size:.8rem;flex-shrink:0}.roleplay-task>p{line-height:1.65;color:var(--muted);margin:16px 0 0}.roleplay-task form{margin-top:20px}.roleplay-task .form-actions{margin-top:16px}.roleplay-task.complete .roleplay-step{color:var(--accent);border-color:var(--accent)}.roleplay-task.available{border-color:color-mix(in srgb,var(--accent) 55%,var(--border))}
.roleplay-choices{display:grid;gap:10px;border:0;padding:0;margin:0}.roleplay-option{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:12px;padding:14px;cursor:pointer}.roleplay-option.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}.roleplay-option input{width:auto;flex-shrink:0;margin:0}.roleplay-task textarea,.roleplay-task input:not([type=radio]){width:100%}
.roleplay-result{border-top:1px solid var(--border);padding-top:16px;margin-top:20px;font-size:.9rem;line-height:1.65}.roleplay-result p{margin:0 0 8px}.roleplay-submitted{overflow-wrap:anywhere}.roleplay-result.correct{border-top-color:var(--accent)}.roleplay-result.retry{border-top-color:#9a9a9a}
.roleplay-transcript{margin-top:32px}.roleplay-line{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--border)}.roleplay-line strong{font-size:.85rem;color:var(--muted)}.roleplay-line p{margin:0;line-height:1.8;white-space:pre-wrap}.roleplay-line small{grid-column:2}.roleplay-line.learner p{color:var(--accent)}.roleplay-archive{margin-top:28px}.roleplay-archive-link{display:block;padding:12px 0;color:inherit}
.roleplay-library-heading{margin:8px 0 2px;font-size:1.15rem}
.roleplay-library-text{flex:1;display:grid;gap:4px;min-width:0}.roleplay-library-text span{font-size:.85rem}
.roleplay-library-link .tag{margin:0}.tag.roleplay-done{background:var(--surface-subtle);color:var(--text-secondary)}
.roleplay-panel-hint{margin:8px 0 4px}
.roleplay-panel .roleplay-task.locked{opacity:.7}
.roleplay-panel .roleplay-empty{color:var(--muted)}
.roleplay-type{display:flex;gap:10px;margin-top:14px}
.roleplay-type input{flex:1;min-width:0;color:var(--text);background:rgba(0,0,0,.38);border-color:var(--border-strong)}
.roleplay-stage .roleplay-type button{background:#f2f2f2;color:#111111;border-color:#f2f2f2;flex-shrink:0}
.roleplay-stage .roleplay-type button:disabled{opacity:.5}
.roleplay-stage .roleplay-type-toggle{margin-inline-start:auto;width:40px;height:40px;min-width:40px;padding:8px}
/* Preparation uses an abstract, slowly drifting field, never a placeholder room. */
.roleplay-imagination{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,#252629,#111214 75%)}
.roleplay-imagination span{position:absolute;width:85vmax;height:65vmax;left:-25%;top:-35%;border-radius:50%;background:radial-gradient(ellipse,rgba(225,226,233,.11),transparent 65%);filter:blur(35px);animation:roleplay-imagine 38s ease-in-out infinite alternate}
.roleplay-imagination span:nth-child(2){left:40%;top:20%;opacity:.6;animation-duration:49s;animation-delay:-17s}
.roleplay-imagination span:nth-child(3){left:15%;top:50%;width:55vmax;height:45vmax;opacity:.4;animation-duration:31s;animation-delay:-9s}
@keyframes roleplay-imagine{to{transform:translate(15%,18%) rotate(25deg) scale(1.12)}}
.roleplay-loading-frame{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.roleplay-loading-card{position:relative;width:min(440px,calc(100% - 32px));border-radius:24px;max-height:calc(100dvh - 170px);pointer-events:auto;isolation:isolate}
.roleplay-loading-scrim{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0}
.roleplay-loading-content{position:relative;z-index:1;display:grid;justify-items:center;gap:14px;padding:32px 28px;border-radius:inherit;text-align:center;max-height:inherit;overflow:auto;overscroll-behavior:contain}
.roleplay-loading-card h2{margin:0;font-size:1.4rem}
.roleplay-loading-mark{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#f2f2f2;color:#111111}
.roleplay-loading-mark::after{content:"";position:absolute;inset:-8px;border:2px solid #f2f2f2;border-radius:50%;animation:roleplay-loading-ring 1.8s ease-out infinite}
@keyframes roleplay-loading-ring{from{opacity:.7;transform:scale(.85)}to{opacity:0;transform:scale(1.3)}}
.roleplay-loading-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.roleplay-loading-tags .tag{margin:0;background:rgba(255,255,255,.12);color:var(--text)}
.roleplay-loading-bar{width:100%;height:8px;margin-top:8px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.14)}
.roleplay-loading-bar span{display:block;height:100%;border-radius:inherit;background:#f2f2f2;transition:width .4s ease}
.roleplay-loading-message{min-height:1.5em;margin:0;font-size:.95rem;animation:fade-in .4s ease}
.roleplay-loading-note{margin:0;color:var(--muted);font-size:.8rem}
.roleplay-loading-progress{width:100%;text-align:start}
.roleplay-loading-progress .comic-loading-steps{gap:12px}
.roleplay-loading-progress .comic-loading-steps li{gap:10px;font-size:.9rem}
.roleplay-loading-progress .comic-loading-steps li>span:nth-child(2){flex:1}
.roleplay-loading-progress .comic-loading-steps li small{font-size:.72rem;flex:none;font-weight:450;color:var(--muted)}
.roleplay-loading-progress .comic-loading-steps li.failed{color:var(--danger)}
.roleplay-loading-progress .comic-loading-steps li.failed .comic-loading-marker{border-color:var(--danger);color:var(--danger)}
.roleplay-loading-progress .comic-loading-detail{margin:10px 0 18px}
.roleplay-loading-steps{display:grid;width:100%;gap:12px;margin:4px 0 0;padding:0;list-style:none;text-align:start}
.roleplay-loading-steps li{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.9rem}
.roleplay-loading-steps li.done{color:var(--text)}
.roleplay-loading-steps li>span:nth-child(2){flex:1}
.roleplay-loading-steps li small{font-size:.72rem;flex:none}
.roleplay-loading-steps li.failed{color:var(--danger)}
.roleplay-loading-steps li.failed .roleplay-loading-step{border-color:var(--danger)}
.roleplay-library-spinner{display:inline-block;width:12px;height:12px;margin-inline-end:6px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:coach-spin .9s linear infinite}
.roleplay-loading-step{display:grid;place-items:center;width:20px;height:20px;flex:none;border:2px solid rgba(255,255,255,.3);border-radius:50%}
.roleplay-loading-steps li.done .roleplay-loading-step{border-color:#f2f2f2;background:#f2f2f2;color:#111111}
.roleplay-loading-steps li.active .roleplay-loading-step{border-color:#f2f2f2;border-right-color:transparent;animation:coach-spin .8s linear infinite}
.roleplay-loading .error{margin:0;color:var(--danger)}
.roleplay-loading-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.roleplay-loading-actions button{min-height:44px;padding:10px 20px;border-radius:12px}
.roleplay-loading-actions button:not(.secondary){background:#f2f2f2;color:#111111;border-color:#f2f2f2}
@media (prefers-reduced-motion:reduce){.roleplay-loading-mark::after,.roleplay-imagination span,.roleplay-loading-step,.roleplay-library-spinner{animation:none!important}.roleplay-loading-bar span{transition:none}}
/* The helper: a separate, warm-toned voice in the learner's language; the partner waits, dimmed. */
.roleplay-figure{transition:filter .4s ease}
.roleplay-stage.helper :is(.roleplay-figure,.roleplay-partner-art){filter:grayscale(.5) brightness(.55)}
.roleplay-stage button.roleplay-help{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:10px 16px;border:1px solid rgba(255,255,255,.45);border-radius:12px;background:rgba(255,255,255,.1);color:#f5f5f5;font-size:.85rem}
.roleplay-stage button.roleplay-help:hover:not(:disabled){background:rgba(255,255,255,.2)}
.roleplay-helper-asks{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:8px;max-width:100%}
.roleplay-helper-asks button{min-height:44px;padding:8px 16px;border:1px solid var(--border-strong);border-radius:999px}
.roleplay-helper-asks button:disabled{opacity:.5}
.roleplay-stage button.roleplay-helper-back{min-height:44px;margin:0;padding:8px 22px;border-radius:12px;background:#f2f2f2;border-color:#f2f2f2;color:#111111}
.roleplay-line.helper strong{color:#f2f2f2}
@media(max-width:700px){.roleplay-control-row{flex-wrap:wrap}}
@media(max-width:850px){.roleplay-invitation{flex-wrap:wrap;padding:24px}.roleplay-invitation .button-link{width:100%;justify-content:center}.roleplay-mark{width:56px;height:56px}.roleplay-task{padding:20px}.roleplay-line{grid-template-columns:1fr;gap:8px}.roleplay-line small{grid-column:1}}

/* Immersive role-play: one scene, centered conversation, quiet edge controls. */
.roleplay-stage,.roleplay-panel{--text:#f5f5f5;--muted:#bdbdbd;--border:rgba(255,255,255,.2);--border-strong:rgba(255,255,255,.4);--surface:rgba(28,28,28,.78);--bg:#1e1e1e;--accent:#e8e8e8;--danger:#ffc4b9;color:var(--text)}
:is(.roleplay-stage,.roleplay-panel) .reader-word-bubble {--surface:#1c1c1c;}
.reader-popup.roleplay-stage{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;background:#161616;isolation:isolate}
.roleplay-stage>.reader-popup-body{position:absolute;z-index:0;inset:0;padding:0;overflow:hidden;isolation:isolate}
.roleplay-environment,.roleplay-environment img,.roleplay-scene-shade{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.roleplay-environment img{object-fit:cover;object-position:center}
/* The partner shares the room's frame (preserveAspectRatio slice matches object-fit cover). */
.roleplay-scene-art,.roleplay-scene-art>svg{position:absolute;inset:0;width:100%;height:100%}
.roleplay-figure{filter:saturate(.85) brightness(.9)}
/* A drawn partner breathes and moves while talking; items fade in when shown. */
.roleplay-partner-art{transform-box:fill-box;transform-origin:50% 100%;animation:roleplay-breathe 5s ease-in-out infinite;transition:filter .4s ease}
.roleplay-stage:not(.helper):has([data-state="speaking"]) .roleplay-partner-art{animation:roleplay-speak .45s ease-in-out infinite alternate}
@keyframes roleplay-speak{to{transform:translateY(-3px) scale(1.012)}}
.roleplay-item{opacity:0;transform:translateY(14px);transform-box:fill-box;transition:opacity .5s ease,transform .5s ease}
.roleplay-figure-body{animation:roleplay-breathe 5s ease-in-out infinite;transform-box:fill-box}
.roleplay-figure-head{transform-box:fill-box;transform-origin:50% 100%;transition:transform .5s ease}
.roleplay-figure-eyes{transform-box:fill-box;transform-origin:center;animation:roleplay-blink 5.5s infinite}
.roleplay-figure-mouth{transform-box:fill-box;transform-origin:center}
.roleplay-stage:not(.helper):has([data-state="speaking"]) .roleplay-figure-mouth{animation:roleplay-talk .32s ease-in-out infinite alternate}
.roleplay-stage:not(.helper):has([data-state="hearing"]) .roleplay-figure-head{transform:rotate(-4deg)}
@keyframes roleplay-breathe{50%{transform:translateY(-2px)}}
@keyframes roleplay-blink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes roleplay-talk{from{transform:scale(1,1)}to{transform:scale(.8,3)}}
@media (prefers-reduced-motion:reduce){.roleplay-figure-body,.roleplay-figure-eyes,.roleplay-figure-mouth,.roleplay-partner-art{animation:none!important}.roleplay-item{transition:none}}
.roleplay-scene-shade{background:linear-gradient(180deg,rgba(0,0,0,.48),transparent 32%,rgba(0,0,0,.12) 58%,rgba(0,0,0,.75))}
.roleplay-glass,.roleplay-stage>.reader-popup-heading,.reader-popup.roleplay-panel{border:1px solid var(--border);background:rgba(18,18,18,.74);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);box-shadow:0 12px 40px rgba(0,0,0,.18);border-radius:18px;color:var(--text)}
.roleplay-stage>.reader-popup-heading{position:absolute;z-index:2;top:max(22px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));width:clamp(180px,22vw,300px);padding:10px 12px 10px 18px;gap:12px}
.roleplay-stage>.reader-popup-heading h2{font-size:.85rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.roleplay-stage button,.roleplay-stage .button-link,.roleplay-panel button{color:var(--text);border-color:var(--border);box-shadow:none}
.roleplay-stage button:hover:not(:disabled),.roleplay-panel button:hover:not(:disabled){background:rgba(255,255,255,.17)}
.roleplay-stage :is(button,a):focus-visible,.roleplay-panel :is(button,input,textarea,a):focus-visible{outline:3px solid #ffffff;outline-offset:4px}
.roleplay-stage .icon-button{width:44px;height:44px;min-width:44px;display:grid;place-items:center;padding:10px}
.roleplay-stage>.reader-popup-heading .icon-button{background:transparent;border:0}
button.roleplay-goal{position:absolute;top:max(22px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(490px,42vw);display:grid;grid-template-columns:1fr auto;gap:6px 20px;text-align:start;padding:16px 22px;white-space:normal}
.roleplay-goal .eyebrow{grid-column:1;font-size:.65rem;letter-spacing:.13em;color:#d6d6d6;margin:0}
.roleplay-goal strong{grid-column:1;font-size:.95rem;line-height:1.45;font-weight:600;max-height:4.4em;overflow:auto}
.roleplay-goal-progress{grid-column:2;grid-row:1/3;align-self:center;display:flex;align-items:center;gap:8px;font-size:.75rem;color:#d6d6d6;max-width:110px}
.roleplay-edge-tools{position:absolute;top:max(22px,env(safe-area-inset-top));right:max(22px,env(safe-area-inset-right));display:flex;gap:8px}
.roleplay-edge-tools button{position:relative}
.roleplay-ready-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:12px;background:#f2f2f2;color:#111111;font-size:.65rem;display:grid;place-items:center}
.roleplay-location{position:absolute;left:max(22px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;max-width:min(260px,20vw);padding:12px 16px;font-size:.75rem;line-height:1.5}
.roleplay-location svg{flex-shrink:0}.roleplay-location span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.roleplay-dock{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(680px,calc(100% - 48px));display:grid;gap:12px;justify-items:center;max-height:calc(100% - 170px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:4px}
.roleplay-partner{display:flex;align-items:center;gap:12px;padding:12px 20px;border-radius:40px;max-width:100%}
.roleplay-partner>div{display:grid;gap:2px;text-align:center}.roleplay-partner strong{font-size:1rem}.roleplay-partner span:not(.roleplay-presence){font-size:.75rem;color:var(--muted)}
.roleplay-presence{width:8px;height:8px;flex-shrink:0;border-radius:50%;background:#8a8a8a}.roleplay-presence.live{background:#ffffff;box-shadow:0 0 0 5px #ffffff26}
.roleplay-live-controls{width:100%;padding:18px 22px}.roleplay-live-controls.finished{display:none}
.roleplay-live-controls .coach-live-caption{font-size:1.1rem;line-height:1.6;text-align:center;max-height:24dvh;overflow-y:auto;margin:0 0 18px;padding:0 6px 18px;border-bottom:1px solid var(--border);white-space:pre-wrap;overflow-wrap:anywhere}
.roleplay-live-controls .coach-live-caption:empty{display:none}
.roleplay-control-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.roleplay-audio-state{display:flex;align-items:center;gap:10px;min-width:0}.roleplay-audio-state svg{flex-shrink:0;color:var(--muted)}
.roleplay-audio-state p{font-size:.75rem;line-height:1.5;margin:0;overflow-wrap:anywhere}
.roleplay-stage .coach-start,.roleplay-stage .button-link{background:#f2f2f2;color:#111111;border:1px solid #f2f2f2;padding:12px 20px;border-radius:12px;font-size:.85rem;flex-shrink:0}
.roleplay-stage .coach-start:hover:not(:disabled),.roleplay-stage .button-link:hover{background:#ffffff}
.roleplay-live-controls[data-live=true] .coach-start{color:var(--text);background:rgba(255,255,255,.08);border-color:var(--border)}
button.roleplay-action-ready{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 18px;color:#f2f2f2;font-size:.8rem}
.roleplay-finished{width:100%;padding:22px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px}.roleplay-finished>strong{flex:1}.roleplay-finished>svg{color:var(--accent)}
.reader-popup.roleplay-panel{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);margin:auto max(24px,env(safe-area-inset-right)) auto auto;background:rgba(20,20,20,.9)}
.roleplay-panel::backdrop{background:rgba(0,0,0,.3)}
.roleplay-panel>.reader-popup-body{padding:24px}.roleplay-panel p{line-height:1.65}.roleplay-panel-objective{font-size:1.15rem;margin:0}
.roleplay-panel .surface{background:rgba(255,255,255,.05);box-shadow:none;border-color:var(--border)}
.roleplay-panel .roleplay-task.available{border-color:#d9d9d9}.roleplay-panel :is(input:not([type=radio]),textarea){color:var(--text);background:rgba(0,0,0,.38);border-color:var(--border-strong)}
.roleplay-panel .roleplay-option.selected{background:rgba(255,255,255,.12)}.roleplay-panel .tag{background:rgba(255,255,255,.1);color:var(--muted)}
.roleplay-panel .level-picker{--accent-soft:rgba(255,255,255,.14);--accent-text:#171717}
.roleplay-panel .roleplay-line{grid-template-columns:1fr;gap:6px}.roleplay-panel .roleplay-line small{grid-column:1}
@media(max-width:1000px){.roleplay-location{display:none}.roleplay-stage>.reader-popup-heading{width:190px}.roleplay-edge-tools{flex-direction:column}button.roleplay-goal{width:min(450px,calc(100% - 520px));left:calc(50% + 55px)}.roleplay-goal-progress{grid-row:auto;grid-column:1}.roleplay-goal{gap:4px!important}}
@media(max-width:700px){.roleplay-stage>.reader-popup-heading{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));width:calc(100% - 184px);padding:7px 10px 7px 14px}.roleplay-edge-tools{top:max(19px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));flex-direction:row;gap:6px}.roleplay-stage .icon-button{width:40px;height:40px;min-width:40px;padding:8px}button.roleplay-goal{top:calc(max(12px,env(safe-area-inset-top)) + 76px);left:50%;width:calc(100% - 24px);padding:12px 16px;grid-template-columns:1fr auto}.roleplay-goal strong{font-size:.85rem;max-height:2.9em}.roleplay-goal-progress{grid-column:2;grid-row:1/3}.roleplay-dock{width:calc(100% - 24px);bottom:max(12px,env(safe-area-inset-bottom));max-height:calc(100% - 208px);gap:8px}.roleplay-partner{padding:10px 16px}.roleplay-live-controls{padding:14px}.roleplay-control-row{flex-wrap:wrap;justify-content:center;gap:12px}.roleplay-audio-state{justify-content:center;flex:1 1 100%;text-align:center}.roleplay-stage .coach-start{width:100%}.roleplay-live-controls .coach-live-caption{font-size:1rem;max-height:20dvh;margin-bottom:14px;padding-bottom:14px}.reader-popup.roleplay-panel{margin:auto;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.roleplay-panel>.reader-popup-body{padding:18px}.roleplay-environment img{object-position:57% center}}
@media(max-height:540px) and (min-width:701px){.roleplay-dock{bottom:12px;max-height:calc(100% - 120px);gap:6px}.roleplay-partner{padding:8px 16px}.roleplay-live-controls{padding:12px 18px}.roleplay-live-controls .coach-live-caption{max-height:15dvh;margin-bottom:10px;padding-bottom:10px}}

/* Assistant: a quiet, full-height conversation with native learning cards. */
.app-shell:has(.assistant-screen) { height: 100dvh; min-height: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; padding-bottom: 0; }
.workspace:has(.assistant-screen) { width: 100%; max-width: none; min-height: 0; overflow: hidden; padding: 0; }
.assistant-screen { height: var(--chat-height, calc(100dvh - var(--header-height, 60px))); min-height: 0; display: flex; flex-direction: column; position: relative; container: assistant / inline-size; }
/* Frost the full-screen chat without filtering its contents. A separate layer
   preserves viewport positioning for word popovers inside learning cards. */
.assistant-screen:not(.embedded) { --assistant-glass-opacity: 100%; --assistant-glass-filter: none; }
@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
    .assistant-screen:not(.embedded) { --assistant-glass-opacity: calc(var(--home-glass-opacity) + 6%); --assistant-glass-filter: saturate(1.15) blur(18px); }
}
.assistant-screen:not(.embedded) :is(.assistant-heading, .assistant-welcome, .assistant-user-text, .is-assistant > .assistant-message-content, .assistant-message-avatar, .assistant-composer, .assistant-editing, .assistant-connection, .assistant-send-error) { position: relative; isolation: isolate; background: transparent; }
.assistant-screen:not(.embedded) :is(.assistant-heading, .assistant-welcome, .assistant-user-text, .is-assistant > .assistant-message-content, .assistant-message-avatar, .assistant-composer, .assistant-history-panel, .assistant-editing, .assistant-connection, .assistant-send-error)::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: var(--surface); background: color-mix(in srgb, var(--surface) var(--assistant-glass-opacity), transparent); -webkit-backdrop-filter: var(--assistant-glass-filter); backdrop-filter: var(--assistant-glass-filter); }
.assistant-screen:not(.embedded) .assistant-welcome { margin-block: 8px 24px; padding: clamp(20px, 4vw, 32px); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-sm); }
.assistant-screen:not(.embedded) .is-assistant > .assistant-message-content { padding: 18px 20px; border: 1px solid var(--border); border-radius: 4px 22px 22px; box-shadow: var(--shadow-sm); }
.assistant-screen:not(.embedded) :is(.assistant-editing, .assistant-connection, .assistant-send-error) { margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
@media (prefers-reduced-transparency: reduce) {
    .assistant-screen:not(.embedded) { --assistant-glass-opacity: 100%; --assistant-glass-filter: none; }
}
.assistant-heading { display: flex; justify-content: space-between; align-items: center; flex: none; gap: 18px; padding: 20px clamp(18px, 4vw, 48px) 16px; border-bottom: 1px solid var(--border); }
.assistant-heading-copy { min-width: 0; flex: 1; }
.assistant-history-toggle { flex: none; }
.assistant-history-toggle[aria-expanded="true"] { background: var(--surface-subtle); color: var(--text); }
.assistant-body { display: flex; flex: 1; min-height: 0; position: relative; isolation: isolate; }
.assistant-conversation-pane { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.assistant-history-panel { position:relative;isolation:isolate;flex:0 0 0;width:0;min-width:0;overflow:hidden;overscroll-behavior:contain;padding:16px 0;background:var(--surface);border-inline-end:0 solid var(--border);opacity:0;visibility:hidden;pointer-events:none;transition:flex-basis .22s var(--ease),width .22s var(--ease),padding .22s var(--ease),opacity .16s ease,visibility 0s .22s; }
.assistant-screen:not(.embedded) .assistant-history-panel {background:transparent;}
.assistant-history-panel[data-open="true"] {flex-basis:280px;width:280px;padding-inline:16px;border-inline-end-width:1px;overflow-y:auto;opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;}
.assistant-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.assistant-history-heading h2 { margin: 0; font-size: .9rem; }
button.assistant-history-backdrop { display: none; }
@container assistant (max-width: 900px) {
    .assistant-history-panel { position:absolute;inset-block:0;inset-inline-start:0;flex:none;width:min(300px,calc(100% - 48px));padding:16px;border-inline-end-width:1px;z-index:2;box-shadow:8px 0 24px #0002;transform:translateX(-100%);transition:transform .22s var(--ease),opacity .16s ease,visibility 0s .22s; }
    .assistant-history-panel:dir(rtl) {transform:translateX(100%);}
    .assistant-history-panel[data-open="true"] {width:min(300px,calc(100% - 48px));transform:translateX(0);transition-delay:0s;}
    button.assistant-history-backdrop { display: block; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: #0005; z-index: 1; cursor: default;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s .22s; }
    button.assistant-history-backdrop[data-open="true"] {opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;}
    button.assistant-history-backdrop:active { transform: none; }
}
@media(prefers-reduced-motion:reduce) {.assistant-history-panel,button.assistant-history-backdrop {transition:none;}}
.assistant-heading h1 { font-size: 1.1rem; margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(50vw, 600px); }
.assistant-heading-actions { display: flex; align-items: center; gap: 8px; flex: none; }
/* "Ask about this": a compact chat in a popup, opened from anywhere in the app. */
.ask-about { flex: none; }
.ask-about.secondary { display: inline-flex; align-items: center; gap: 8px; }
.ask-about-popup .reader-popup-body, .ask-about-popup .popup-body { padding: 0; }
.assistant-screen.embedded { height: min(72dvh, 680px); }
.assistant-screen.embedded .assistant-thread { padding: 18px 20px 24px; }
.assistant-screen.embedded .assistant-welcome { padding: 0 0 12px; }
.assistant-embedded-actions { display: flex; justify-content: flex-end; flex: none; padding: 8px 16px 0; }
.assistant-embedded-actions .ghost { min-height: 32px; padding: 4px 10px; font-size: .82rem; }
.assistant-ask-welcome > p { margin: 14px 0; }
.assistant-context { display: grid; gap: 8px; max-width: 100%; margin: 0 0 10px; padding: 14px 16px; border: 1px solid var(--border); border-inline-start: 3px solid var(--accent); border-radius: 14px; background: var(--surface-subtle); text-align: start; }
.assistant-message.is-user .assistant-context { margin-inline-start: auto; }
.assistant-context p { margin: 0; overflow-wrap: anywhere; }
.assistant-context-label { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: .72rem; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; }
.assistant-context-title { font-size: .95rem; }
.assistant-context-text { font-size: 1.08rem; line-height: 1.6; }
.assistant-context-word { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 1.15rem; }
.assistant-context-note { font-size: .82rem; }
.assistant-context-prompt { font-weight: 600; }
.assistant-context-answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .9rem; overflow-wrap: anywhere; }
.assistant-context-answer > .muted:first-child { flex: none; font-size: .75rem; font-weight: 600; }
.assistant-context .structure-pattern { margin-top: 2px; }
.textbook-section-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.textbook-section-meta .ask-about { margin-inline-start: auto; }
.dictionary-meaning-actions, .structure-example-actions { align-items: center; margin: 8px 0 0; }
.assistant-new { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 12px; font-size: .8rem; }
.assistant-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.assistant-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.assistant-thread { width: min(800px, 100%); margin: 0 auto; padding: 24px 26px 36px; }
.assistant-welcome { padding: clamp(12px, 5vh, 64px) 0 24px; }
.assistant-brand { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border)); margin-bottom: 24px; }
.assistant-welcome h2 { font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.25; letter-spacing: -.025em; margin: 0 0 14px; }
.assistant-welcome > p { line-height: 1.65; max-width: 560px; }
.assistant-starters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 30px 0 24px; }
button.assistant-starter { display: flex; align-items: center; text-align: start; gap: 12px; padding: 18px; min-height: 78px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: none; font-size: .86rem; font-weight: 600; }
.assistant-starter > svg:first-child { color: var(--text-secondary); flex: none; }
.assistant-starter > svg:last-child { margin-inline-start: auto; opacity: .5; flex: none; }
button.assistant-starter:hover { border-color: var(--text-secondary); background: var(--surface-subtle); transform: translateY(-1px); }
.assistant-approval-note { display: flex; align-items: flex-start; gap: 8px; font-size: .76rem; color: var(--text-secondary); }
.assistant-approval-note svg { flex: none; margin-top: 3px; color: var(--accent); }
.assistant-message { display: flex; gap: 14px; margin: 0 0 30px; }
.assistant-message-avatar { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border: 1px solid var(--border); border-radius: 10px; color: var(--text-secondary); margin-top: 5px; }
.assistant-message-content { flex: 1; min-width: 0; }
.assistant-message.is-user { justify-content: flex-end; margin-top: 12px; }
.assistant-message.is-user .assistant-message-content { max-width: 86%; flex: initial; }
.assistant-user-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 20px 20px 4px 20px; padding: 14px 20px; line-height: 1.7; }
.assistant-markdown { line-height: 1.8; font-size: .94rem; overflow-wrap: anywhere; }
.assistant-markdown > :first-child { margin-top: 0; }
.assistant-markdown > :last-child { margin-bottom: 0; }
.assistant-markdown p { margin: 0 0 14px; }
.assistant-markdown h1,.assistant-markdown h2,.assistant-markdown h3 { font-size: 1.1rem; margin: 20px 0 10px; }
.assistant-markdown ul,.assistant-markdown ol { padding-inline-start: 24px; margin: 12px 0; }
.assistant-markdown li { margin: 5px 0; }
.assistant-markdown pre { padding: 16px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; white-space: pre; }
.assistant-markdown code { font-size: .85em; background: var(--surface-subtle); border-radius: 4px; padding: 2px 4px; }
.assistant-markdown pre code { padding: 0; background: none; }
.assistant-markdown blockquote { margin-inline: 0; padding-inline-start: 16px; border-inline-start: 3px solid var(--border); color: var(--text-secondary); }
.assistant-message-actions { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.assistant-message-actions .icon-button { width: 30px; min-width: 30px; height: 30px; border: 0; background: transparent; color: var(--text-secondary); }
.assistant-message.is-user .assistant-message-actions { justify-content: flex-end; }
.assistant-activity { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: .78rem; margin: 12px 0; }
.assistant-composer-area { position: relative; flex: none; width: min(800px, 100%); align-self: center; padding: 0 26px max(12px, env(safe-area-inset-bottom)); }
.assistant-composer { border: 1px solid var(--border); border-radius: 22px; background: var(--surface); padding: 10px 12px; box-shadow: 0 5px 24px #00000008; }
.assistant-composer:focus-within { border-color: color-mix(in srgb,var(--text-secondary) 60%,var(--border)); }
.assistant-composer textarea { display: block; width: 100%; min-height: 48px; max-height: 180px; height: 48px; padding: 10px 8px; resize: none; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font: inherit; line-height: 1.6; }
.assistant-composer textarea:focus { outline: none; box-shadow: none; }
.assistant-composer-toolbar { display: flex; gap: 8px; align-items: center; min-height: 40px; }
.assistant-composer-status { flex: 1; font-size: .66rem; color: var(--text-secondary); padding-inline-start: 6px; }
.assistant-composer .reader-flashcard-microphone { margin: 0; padding: 0; border: 0; background: transparent; flex: none; }
.assistant-composer .reader-flashcard-toolbar { margin: 0; gap: 0; }
.assistant-composer .reader-flashcard-toolbar meter { display: none; }
.assistant-composer .flashcard-mic-button { min-width: 38px; width: 38px; height: 38px; border: 0; background: transparent; box-shadow: none; }
.assistant-composer .flashcard-mic-button[aria-pressed="true"] { background: var(--surface-subtle); color: var(--danger); }
.assistant-composer .reader-flashcard-toolbar .ghost { padding: 6px 8px; min-height: 32px; font-size: .7rem; }
.assistant-composer:has(.reader-flashcard-microphone[data-state="hold"]) .assistant-composer-status { font-size: 0; }
button.assistant-send { display: grid; place-items: center; flex: none; width: 38px; height: 38px; min-width: 38px; padding: 0; border-radius: 50%; }
button.assistant-jump { position: absolute; top: -52px; inset-inline-start: calc(50% - 19px); width: 38px; min-width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 3px 15px #0002; }
button.assistant-jump[hidden] { display: none; }
.assistant-editing,.assistant-connection,.assistant-send-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .75rem; padding: 10px 4px; }
.assistant-send-error { color: var(--danger); }
.assistant-editing .ghost,.assistant-connection .ghost,.assistant-send-error .ghost { flex: none; font-size: .75rem; padding: 6px; }
.assistant-loading { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 80px 20px; color: var(--text-secondary); }
button.assistant-open-card { display: flex; width: 100%; align-items: center; text-align: start; gap: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin: 16px 0 4px; box-shadow: none; }
.assistant-open-card:hover { background: var(--surface-subtle); border-color: var(--text-secondary); }
.assistant-card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-subtle); display: grid; place-items: center; flex: none; }
.assistant-open-card > span:nth-child(2) { flex: 1; min-width: 0; }
.assistant-open-card strong { display: block; font-size: .87rem; line-height: 1.5; }
.assistant-open-card small { display: block; font-size: .74rem; line-height: 1.6; font-weight: 400; margin-top: 3px; }
.assistant-open-card > svg { flex: none; }
.assistant-target-text { margin: 16px 0; padding: 16px 18px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.assistant-target-text-context { margin: 0 0 10px; color: var(--text-secondary); font-size: .8rem; line-height: 1.6; overflow-wrap: anywhere; }
.assistant-target-text-content { font-size: 1.08rem; line-height: 2; overflow-wrap: anywhere; white-space: pre-wrap; }
.assistant-target-text-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.assistant-target-text-actions .speech-control { font-size: .78rem; }
.assistant-proposal { margin: 20px 0 12px; padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.assistant-proposal[data-status="pending"] { border-color: color-mix(in srgb,var(--accent) 35%,var(--border)); }
.assistant-proposal[data-status="declined"] { opacity: .65; }
.assistant-proposal-badge { display: inline-flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 600; color: var(--text-secondary); }
.assistant-proposal[data-status="accepted"] .assistant-proposal-badge { color: var(--accent); }
.assistant-proposal h3 { margin: 10px 0 16px; font-size: 1rem; line-height: 1.5; }
.assistant-proposal p { line-height: 1.7; font-size: .85rem; }
.assistant-proposal .assistant-proposal-note { font-size: .72rem; color: var(--text-secondary); }
.assistant-proposal-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 18px; }
.assistant-proposal-actions > small { flex: 1; min-width: 120px; font-size: .67rem; }
.assistant-proposal-actions > button { padding: 9px 14px; min-height: 38px; font-size: .8rem; }
.assistant-list-preview { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface-subtle); border-radius: 10px; }
.assistant-list-preview > span { font-size: 1.7rem; }
.assistant-goal-preview > strong { font-size: 2rem; font-variant-numeric: tabular-nums; color: var(--accent); }
.assistant-passage-preview summary { cursor: pointer; font-size: .8rem; color: var(--text-secondary); padding-bottom: 12px; }
.assistant-passage-preview > div { max-height: 320px; overflow-y: auto; white-space: pre-wrap; font-size: .92rem; line-height: 1.9; padding: 14px 16px; border-radius: 10px; background: var(--surface-subtle); }
.assistant-word-selection { display: flex; align-items: center; gap: 4px; font-size: .7rem; margin-bottom: 10px; }
.assistant-word-selection > span { flex: 1; color: var(--text-secondary); }
.assistant-word-selection > button { padding: 5px 7px; font-size: .7rem; }
.assistant-proposed-words { max-height: 350px; overflow-y: auto; }
:is(label, div).assistant-proposed-word { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--border); font-weight: 400; }
.assistant-proposed-word:last-child { border-bottom: 0; }
.assistant-proposed-word input { width: 17px; height: 17px; margin: 0; padding: 0; flex: none; accent-color: var(--accent); }
.assistant-proposed-word span { flex: 1; min-width: 0; font-size: .8rem; }
.assistant-proposed-word strong { display: block; font-size: .95rem; }
.assistant-proposed-word small { display: block; font-size: .7rem; margin-top: 4px; }
.assistant-history { display: grid; gap: 8px; }
button.assistant-history-item { display: flex; width: 100%; min-width: 0; text-align: start; align-items: center; gap: 10px; color: var(--text); background: transparent; border: 1px solid var(--border); box-shadow: none; padding: 12px; border-radius: 10px; }
.assistant-history-item > svg { flex: none; }
.assistant-history-item > strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
button.assistant-history-item[aria-current="page"] { background: var(--surface-subtle); }
#assistant-settings form .form-actions { margin-block-start: 16px; }
.assistant-archived-message { padding: 20px 0; border-top: 1px solid var(--border); }
.assistant-archived-message > strong { display: block; margin-bottom: 12px; font-size: .8rem; color: var(--text-secondary); }
button.assistant-archive-link { font-size: .72rem; color: var(--text-secondary); }
@media (max-width: 760px) {
    .app-shell > .workspace:has(.assistant-screen) { padding: 0; }
    .assistant-screen { min-height: 0; }
    .assistant-heading { padding: 12px 16px; gap: 8px; }
    .assistant-heading h1 { max-width: 100%; font-size: 1rem; }
    .assistant-heading-actions { gap: 3px; }
    .assistant-new { min-width: 36px; padding: 8px; }
    .assistant-new > span { display: none; }
    .assistant-thread { padding: 24px 16px; }
    .assistant-welcome { padding-top: 20px; }
    .assistant-brand { width: 52px; height: 52px; margin-bottom: 20px; }
    .assistant-starters { gap: 8px; margin-top: 24px; }
    button.assistant-starter { padding: 14px 12px; gap: 8px; font-size: .75rem; min-height: 80px; }
    .assistant-starter > svg:last-child { display: none; }
    .assistant-message { gap: 8px; }
    .assistant-message-avatar { width: 24px; height: 24px; }
    .assistant-screen:not(.embedded) .assistant-welcome { padding: 20px 16px; border-radius: 20px; }
    .assistant-screen:not(.embedded) .is-assistant > .assistant-message-content { padding: 14px; border-radius: 4px 18px 18px; }
    .assistant-message.is-user .assistant-message-content { max-width: 94%; }
    .assistant-composer-area { padding-inline: 10px; }
    .assistant-composer-status { font-size: .6rem; }
    .assistant-proposal { padding: 14px; }
    .assistant-word-selection { flex-wrap: wrap; }
    .assistant-proposal-actions > small { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    button.assistant-starter:hover { transform: none; }
}

/* Shared XP activity colors: identical in chart segments, legend and receipts. */
.xp-history-chart, .xp-log-card { --xp-flashcards: #428ec9; --xp-reading: var(--xp); --xp-skills: #aa78ca; --xp-quests: #d6a23a; }
[data-activity="flashcards"] { --xp-activity-color: var(--xp-flashcards); }
[data-activity="guided_reading"] { --xp-activity-color: var(--xp-reading); }
[data-activity="skills"] { --xp-activity-color: var(--xp-skills); }
[data-activity="quests"] { --xp-activity-color: var(--xp-quests); }
[data-activity="character_practice"] { --xp-activity-color: #3b9e7a; }
[data-activity="comprehension"] { --xp-activity-color: #cf718c; }
[data-activity="audio_coaching"] { --xp-activity-color: #d19a43; }
[data-activity="podcasts"] { --xp-activity-color: #4c9eae; }
[data-activity="other"] { --xp-activity-color: var(--muted); }
.xp-activity-segment { fill: var(--xp-activity-color); }
.xp-activity-swatch { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--xp-activity-color); }
.xp-chart-cursor { fill: var(--text); opacity: .06; }
.xp-chart-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 20px; font-size: .8rem; }
.xp-chart-total strong { color: var(--xp); font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.xp-chart-readout { justify-content: space-between; border-top: 1px solid var(--border); }
.xp-chart-legend { justify-content: flex-start; gap: 12px 24px; margin-top: 8px; }
.xp-chart-legend strong { margin-left: 4px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.xp-chart-loading { min-height: 360px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); }
.xp-log-scroll { max-height: 510px; overflow: auto; }
.xp-log-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.xp-log-table caption.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.xp-log-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); color: var(--muted); text-align: start; padding: 10px 12px; font-size: .72rem; font-weight: 600; }
.xp-log-table td { border-top: 1px solid var(--border); padding: 13px 12px; vertical-align: middle; }
.xp-log-table th:first-child, .xp-log-table td:first-child { padding-inline-start: 0; }
.xp-log-table th:last-child, .xp-log-table td:last-child { text-align: end; padding-inline-end: 0; }
.xp-log-table time { display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.xp-log-table time small { color: var(--muted); font-size: .72rem; }
.xp-log-activity { display: inline-flex; align-items: center; gap: 8px; }
.xp-log-amount { color: var(--xp); font-size: 1rem; font-variant-numeric: tabular-nums; }
.xp-log-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.xp-log-footer small { font-size: .75rem; }
@media (max-width: 600px) {
  .xp-log-table td { padding: 12px 8px; }
  .xp-log-table { font-size: .78rem; }
  .xp-chart-readout strong { font-size: .74rem; }
  .xp-chart-legend { font-size: .72rem; gap: 10px 14px; }
}
.xp-chart-loading .word-illustration-spinner { width: 20px; height: 20px; }
.xp-log-footer .word-illustration-spinner { width: 14px; height: 14px; }

/* Phrases: sentence collections and a focused recall practice surface. */
.phrases-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.phrases-heading h1 { margin-bottom: 8px; }
.phrases-heading p { margin: 0; font-size: .9rem; }
.phrases-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; }
.phrases-toolbar > button,.phrases-toolbar > a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; font-size: .85rem; }
.phrases-toolbar > a { margin-inline-start: auto; }
.phrase-list-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 20px 0 30px; }
a.phrase-list-card { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 6px 10px; padding: 22px; text-decoration: none; color: var(--text); transition: border-color .15s; }
.phrase-list-card > svg { grid-row: span 2; color: var(--accent); margin-top: 3px; }
.phrase-list-card strong { overflow-wrap: anywhere; font-size: .95rem; }
.phrase-list-card small { font-size: .76rem; }
a.phrase-list-card:hover { border-color: var(--accent); }
.phrase-list-create { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.phrase-list-create label { margin: 0; font-size: .75rem; }
.phrase-list-create input { margin-top: 6px; padding: 8px 10px; }
.phrase-list-create button { min-height: 32px; padding: 6px 12px; align-self: flex-start; font-size: .75rem; }
.phrase-filters { display: flex; align-items: center; gap: 20px; margin: 24px 0 18px; }
.phrase-filters > input { flex: 1; min-width: 0; margin: 0; }
.phrase-filters > label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8rem; font-weight: 400; white-space: nowrap; }
.phrase-filters input[type="checkbox"],.phrase-practice-status input[type="checkbox"],.phrase-suggestion-row > input { width: 17px; height: 17px; margin: 0; padding: 0; flex: none; accent-color: var(--accent); }
.phrase-entries { display: grid; gap: 14px; }
.phrase-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 24px; }
.phrase-card-copy { flex: 1; min-width: 0; }
:is(.phrase-card, .phrase-row) p { margin: 0 0 8px; overflow-wrap: anywhere; }
:is(.phrase-card, .phrase-row) p.muted { font-size: .8rem; }
.phrase-search input[type="checkbox"] { width: 17px; height: 17px; margin: 0; padding: 0; flex: none; accent-color: var(--accent); }
.phrase-sentence { font-size: 1.12rem; line-height: 1.8; letter-spacing: .005em; overflow-wrap: anywhere; }
.phrase-reading { font-size: .85rem; line-height: 1.7; }
.phrase-card-actions { display: flex; align-items: center; gap: 6px; flex: none; padding-top: 3px; }
.phrase-card-actions .speech-control { font-size: .78rem; }
.phrase-region-tags,.phrase-membership-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.phrase-region-tags .tag { font-size: .68rem; white-space: normal; text-align: start; }
.phrase-membership-tags { margin-top: 10px; }
.phrase-membership-tags .tag { font-size: .65rem; background: var(--surface-subtle); color: var(--text-secondary); }
.phrase-back,.phrase-source { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: .8rem; }
.phrase-source { margin-top: 8px; font-size: .72rem; }
.phrase-empty { padding: clamp(28px,5vw,56px); text-align: center; }
.phrase-empty > svg { color: var(--accent); margin-bottom: 16px; }
.phrase-empty h2 { font-size: 1.3rem; margin: 0 0 12px; }
.phrase-empty p { line-height: 1.8; font-size: .9rem; max-width: 480px; margin: 0 auto 20px; }
.phrase-empty > button,.phrase-empty > a { margin: 6px; }
.phrase-editor { display: grid; gap: 16px; }
.phrase-editor > label { margin: 0; font-size: .85rem; }
.phrase-editor textarea,.phrase-editor input { margin: 6px 0 0; }
.phrase-editor textarea { resize: vertical; }
.phrase-editor fieldset { min-width: 0; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.phrase-editor legend { padding-inline: 6px; font-size: .85rem; font-weight: 600; }
.phrase-editor fieldset > p { font-size: .8rem; }
.phrase-editor input[type="checkbox"] { margin: 0; }
.phrase-new-list { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.phrase-new-list input { min-width: 0; flex: 1; margin: 0; }
.phrase-new-list button { font-size: .75rem; padding: 8px 12px; flex: none; }
.phrase-region-editor { padding: 14px 0; border-block: 1px solid var(--border); }
.phrase-region-editor summary { cursor: pointer; font-size: .85rem; font-weight: 600; }
.phrase-region-editor > p { font-size: .78rem; line-height: 1.7; }
.phrase-region-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 10px 0; font-weight: 400; font-size: .8rem; }
.phrase-region-row select { width: 150px; margin: 0; padding: 8px; font-size: .8rem; }
.phrase-editor-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
button.phrase-starter-choice { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; padding: 20px; text-align: start; white-space: normal; color: var(--text); }
.phrase-starter-choice[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 8%,var(--surface)); }
.phrase-starter-choice strong { font-size: .95rem; }
.phrase-starter-choice small { color: var(--accent); font-size: .72rem; }
.phrase-starter-choice span { font-size: .78rem; font-weight: 400; line-height: 1.6; color: var(--text-secondary); }
.phrase-starter-preview { max-height: 44dvh; overflow: auto; border-block: 1px solid var(--border); margin-bottom: 20px; padding-inline-end: 12px; }
.phrase-starter-preview > div { padding: 16px 0; border-bottom: 1px solid var(--border); }
.phrase-starter-preview p { margin: 0 0 6px; }
.phrase-starter-preview p:not(.phrase-sentence) { font-size: .85rem; }
.phrase-suggestion-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 14px; margin: 24px 0; }
.phrase-suggestion-form label { margin: 0; font-size: .8rem; }
.phrase-suggestion-form input,.phrase-suggestion-form select { margin-bottom: 0; }
.phrase-suggestion-form > button { justify-self: end; }
.phrase-suggestions { margin: 16px 0 24px; }
label.phrase-suggestion-row { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-top: 1px solid var(--border); font-weight: 400; margin: 0; }
.phrase-suggestion-row > input { margin-top: 10px; }
.phrase-suggestion-row > div { flex: 1; min-width: 0; }
.phrase-suggestion-row p { margin: 0 0 6px; }
.phrase-suggestion-row p:not(.phrase-sentence) { font-size: .84rem; }
.phrase-practice { max-width: 760px; margin-inline: auto; }
.phrase-practice > .page-header { margin-top: 24px; }
.phrase-practice-status { display: flex; justify-content: space-between; gap: 16px; font-size: .8rem; color: var(--text-secondary); }
.phrase-practice-status label { display: flex; gap: 8px; align-items: center; font-size: .8rem; font-weight: 400; margin: 0; }
.phrase-practice > progress { width: 100%; height: 5px; accent-color: var(--accent); margin: 16px 0 28px; }
.phrase-practice-card { text-align: center; padding: clamp(24px,5vw,48px); }
.phrase-practice-card > .eyebrow { color: var(--text-secondary); font-size: .7rem; margin: 0 0 24px; }
.phrase-prompt { font-size: clamp(1.3rem,3vw,1.8rem); line-height: 1.8; margin: 24px 0 36px; overflow-wrap: anywhere; }
.phrase-practice-card > .phrase-sentence { margin-bottom: 24px; font-size: 1.4rem; line-height: 2; }
.phrase-practice-card .phrase-region-tags { justify-content: center; margin-bottom: 20px; }
.phrase-practice-card > .speech-control { margin: 8px 0 20px; }
.phrase-practice-card > p.muted { margin-top: 28px; font-size: .85rem; }
.phrase-ratings { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.phrase-ratings button { min-height: 48px; padding: 10px; }
@media (max-width: 900px) { .phrase-list-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) {
    .phrases-toolbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .phrases-toolbar > button,.phrases-toolbar > a { margin: 0; width: 100%; padding: 10px 8px; font-size: .75rem; }
    .phrase-list-grid { grid-template-columns: minmax(0,1fr); }
    .phrase-filters { align-items: stretch; flex-direction: column; gap: 12px; }
    .phrase-card { flex-direction: column; padding: 20px; gap: 12px; }
    .phrase-card-actions { align-self: flex-end; padding: 0; }
    .phrase-region-row { gap: 8px; }
    .phrase-region-row select { width: 140px; }
    .phrase-ratings { gap: 6px; }
    .phrase-ratings button { font-size: .78rem; padding-inline: 4px; }
}

@media(max-height:650px){.roleplay-loading-frame{align-items:start;padding-top:110px}.roleplay-loading-card{max-height:calc(100dvh - 130px)}.roleplay-loading-content{padding:24px}.roleplay-loading-mark{width:48px;height:48px}}

/* Saved helper notes stay at the scene edges; compact screens open the same notes in a panel. */
.roleplay-study-card{position:absolute;top:150px;width:clamp(190px,19vw,260px);max-height:calc(100% - 270px);overflow:auto;padding:18px;overscroll-behavior:contain}
.roleplay-study-card[data-kind="key_words"]{left:max(22px,env(safe-area-inset-left))}
.roleplay-study-card[data-kind="useful_phrases"]{right:max(22px,env(safe-area-inset-right))}
.roleplay-study-card h3{font-size:.9rem;margin:0 0 12px}
.roleplay-help-entries{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.roleplay-help-entries li{display:grid;gap:3px;overflow-wrap:anywhere}
.roleplay-help-entries strong{font-size:1.05rem;font-weight:650}
.roleplay-help-entries small{color:var(--muted);font-size:.85rem;line-height:1.4}
.roleplay-help-entries li>span{font-size:.85rem;line-height:1.5}
.roleplay-help-review+.roleplay-help-review{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.roleplay-stage .roleplay-study-open{display:grid}
.roleplay-partner>div{flex:1;min-width:0}
.roleplay-stage .roleplay-level-button{margin-inline-start:auto;padding:8px 10px;min-height:40px;display:flex;align-items:center;gap:8px;font-size:.8rem}
@media(max-width:1000px){.roleplay-study-card{display:none}.roleplay-stage .roleplay-study-open{display:grid}}
@media(max-width:700px){.roleplay-stage>.reader-popup-heading{width:calc(100% - 232px)}}

/* Role-play chrome stays anchored; captions never participate in dock layout.
   Each scrim filters the scene directly (no opaque parent surface). */
.roleplay-glass,.reader-popup.roleplay-panel,.roleplay-stage>.reader-popup-heading {
  background:rgba(18,18,18,.58);
  backdrop-filter:blur(32px) saturate(.85);
  -webkit-backdrop-filter:blur(32px) saturate(.85);
}
.roleplay-stage>.reader-popup-heading {
  top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));left:auto;
  width:auto;padding:6px;gap:0;border-radius:16px;
}
.roleplay-stage>.reader-popup-heading h2 {display:none}
.roleplay-edge-tools {
  top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:auto;
  flex-direction:row;gap:4px;padding:6px;border-radius:16px;
}
.roleplay-edge-tools .icon-button {background:transparent;border:0}
button.roleplay-goal {left:50%;width:min(490px,calc(100% - 450px));gap:6px 20px}
.roleplay-goal-progress {grid-column:2;grid-row:1/3}
.roleplay-dock {overflow:visible;max-height:none}
.roleplay-caption {
  position:absolute;bottom:calc(100% + 12px);left:4px;width:calc(100% - 8px);
  padding:16px 20px;display:grid;gap:10px;
}
.roleplay-caption:has(.coach-live-caption:empty):not(:has(button)) {display:none}
.roleplay-caption .coach-live-caption {
  min-height:0;margin:0;font-size:1.1rem;line-height:1.55;text-align:center;white-space:pre-wrap;
  overflow-wrap:anywhere;max-height:min(22dvh,180px);overflow-y:auto;overscroll-behavior:contain;
}
.roleplay-caption .coach-live-caption:empty {display:none}
.roleplay-objective-support {
  position:absolute;z-index:4;top:155px;width:clamp(210px,22vw,300px);
  display:grid;gap:10px;pointer-events:none;
}
.roleplay-objective-support[data-kind="key_words"] {left:max(22px,env(safe-area-inset-left));justify-items:start}
.roleplay-objective-support[data-kind="useful_phrases"] {right:max(22px,env(safe-area-inset-right));justify-items:end}
.roleplay-objective-support>* {pointer-events:auto}
.roleplay-stage .roleplay-support-toggle {display:flex;gap:10px;align-items:center;min-height:48px;padding:12px 16px;font-size:.85rem}
.roleplay-support-panel {width:100%;padding:18px;max-height:calc(100dvh - 300px);overflow:auto;overscroll-behavior:contain}
.roleplay-support-panel>header {display:flex;align-items:center;gap:8px;margin-bottom:14px}
.roleplay-support-panel h3 {flex:1;margin:0;font-size:.85rem;line-height:1.4;color:var(--muted)}
.roleplay-stage .roleplay-study-button {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:20px;background:#f2f2f2;color:#111;border-radius:12px}
.roleplay-help-entries .inline-reader {font-size:inherit}
/* Pending words stay readable on scene scrims, with only a slight dimming. */
:is(.roleplay-stage,.roleplay-panel) .reader-unprocessed {color:var(--text);opacity:.8}
:is(.roleplay-stage,.roleplay-panel) .inline-reader-loading {color:var(--muted)}
@media(max-width:1000px) {
  button.roleplay-goal {top:90px;width:min(490px,calc(100% - 32px))}
  .roleplay-objective-support {top:210px;width:min(300px,calc(100vw - 32px))}
  .roleplay-objective-support[data-kind="key_words"] {left:16px}
  .roleplay-objective-support[data-kind="useful_phrases"] {right:16px}
  .roleplay-support-panel {max-height:calc(100dvh - 370px);min-height:120px}
  .roleplay-objective-support:has(.roleplay-support-panel) {z-index:5}
}
@media(max-width:700px) {
  .roleplay-stage>.reader-popup-heading {left:auto;right:max(12px,env(safe-area-inset-right));width:auto;padding:6px;top:max(12px,env(safe-area-inset-top))}
  .roleplay-edge-tools {left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));right:auto}
  .roleplay-caption {padding:12px;bottom:calc(100% + 8px)}
  .roleplay-caption .coach-live-caption {font-size:1rem;max-height:16dvh}
  .roleplay-support-toggle {max-width:calc(50vw - 24px)}
}
@media(max-height:540px) and (min-width:701px) {
  button.roleplay-goal {top:16px;width:min(420px,calc(100% - 450px))}
  .roleplay-objective-support {top:110px;width:210px}
  .roleplay-support-panel {max-height:calc(100dvh - 190px);min-height:90px}
  .roleplay-caption .coach-live-caption {max-height:12dvh}
  .roleplay-caption {padding:10px 14px;gap:4px}
}

@media(max-height:600px) and (max-width:700px) {
  button.roleplay-goal {top:76px;padding:8px 12px}
  .roleplay-goal strong {font-size:.8rem;line-height:1.3;max-height:2.6em}
  .roleplay-dock {gap:6px}
  .roleplay-partner {padding:6px 12px}
  .roleplay-stage .roleplay-level-button {min-height:32px;padding:4px 8px}
  .roleplay-live-controls {padding:8px 12px}
  .roleplay-control-row {flex-wrap:nowrap;gap:8px;justify-content:space-between}
  .roleplay-audio-state {flex:0 1 auto;text-align:start}
  .roleplay-audio-state>svg {display:none}
  .roleplay-stage .coach-start {width:auto;min-height:40px;padding:8px 12px}
  .roleplay-stage button.roleplay-help {padding:8px;font-size:.75rem;min-height:40px}
  .roleplay-caption {padding:8px 12px;gap:2px}
  .roleplay-caption .coach-live-caption {font-size:.9rem;max-height:42px;line-height:1.4}
  .roleplay-objective-support {top:156px}
  .roleplay-stage .roleplay-support-toggle {padding:8px 12px;min-height:40px;font-size:.75rem}
  .roleplay-support-panel {max-height:calc(100dvh - 210px);min-height:90px;padding:12px}
}

@media(max-height:400px) and (max-width:700px) {
  .roleplay-partner>div>span {display:none}
  button.roleplay-goal {top:74px;padding:8px 12px}
  .roleplay-goal .eyebrow {display:none}
  .roleplay-goal strong {max-height:1.3em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
  .roleplay-goal-progress {grid-row:1}
  .roleplay-caption {left:50%;transform:translateX(-50%);width:max(170px,calc(100% - 280px));padding:8px 10px;gap:0}
  .roleplay-caption .coach-live-caption {max-height:36px;font-size:.8rem}
  .roleplay-objective-support {top:144px}
}

/* Stable role-play input dock: persistent typing, independent mic and transport. */
.roleplay-partner-controls {display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;width:100%;min-width:0}
.roleplay-partner-controls>.roleplay-partner {grid-column:2;min-width:0}
.roleplay-partner-controls>.roleplay-help {grid-column:3;justify-self:end}
.roleplay-stage .roleplay-display-toggles {grid-column:1;grid-row:1;justify-self:start;margin:0;gap:4px;padding:6px;border-radius:20px;--accent-ink:#f5f5f5;--accent-soft:rgba(255,255,255,.16)}
.roleplay-stage .roleplay-display-toggles>.icon-button {width:44px;height:44px;min-width:44px;padding:10px;border-radius:16px;color:var(--text)}
.roleplay-stage .roleplay-display-toggles>.icon-button[aria-pressed=true] {background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.roleplay-stage :is(.roleplay-partner-controls,.roleplay-caption,.coach-live-caption)[hidden] {display:none}
.roleplay-stage button.roleplay-help {min-height:48px;padding:10px 16px;border-radius:16px;white-space:nowrap}
.roleplay-live-controls .roleplay-control-row {display:flex;flex-wrap:nowrap;justify-content:center;gap:18px}
.roleplay-stage .roleplay-play {display:grid;place-items:center;width:68px;height:68px;min-width:68px;min-height:68px;padding:18px;border-radius:50%;background:#f2f2f2;color:#111}
.roleplay-stage .roleplay-play>span {grid-area:1/1;display:flex}
.roleplay-stage .roleplay-play .sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;margin:-1px}
.roleplay-stage .roleplay-play .roleplay-stop-icon {display:none}
.roleplay-live-controls[data-live=true] .roleplay-play .roleplay-play-icon {display:none}
.roleplay-live-controls[data-live=true] .roleplay-play .roleplay-stop-icon {display:flex}
.roleplay-voice-pulse {width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center}
.roleplay-voice-pulse::after {content:"";width:16px;height:16px;border-radius:50%;background:#b9e1cf;opacity:0;transform:scale(.75)}
.roleplay-live-controls[data-live=true] .roleplay-voice-pulse::after {opacity:1;animation:roleplay-voice-pulse 1.8s ease-in-out infinite}
@keyframes roleplay-voice-pulse {50% {transform:scale(1.15);box-shadow:0 0 0 8px rgba(185,225,207,.12)}}
.roleplay-stage .roleplay-mute {position:relative;width:44px;height:44px;min-width:44px;border-radius:50%;padding:11px}
.roleplay-mute-slash {display:none;position:absolute;width:24px;height:2px;background:currentColor;transform:rotate(-45deg);border-radius:2px}
.roleplay-mute[aria-pressed=true] .roleplay-mute-slash {display:block}
.roleplay-mute[aria-pressed=true] {background:rgba(255,255,255,.18)}
.roleplay-caption {display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px}
.roleplay-caption .coach-live-caption {grid-area:1/2}
.roleplay-caption-study {grid-area:1/2;min-width:0;max-height:min(30dvh,240px);overflow:auto;overscroll-behavior:contain;font-size:1.1rem;line-height:1.55;text-align:center}
.roleplay-caption-study .reader-sentence-translation {margin:.4em 0 0;color:var(--muted)}
.roleplay-caption-study .inline-reader-text {white-space:pre-wrap}
.roleplay-connection-error:not([hidden]) {color:#ffb5ae;margin:0 0 12px;font-size:.85rem}
@media(prefers-reduced-motion:reduce){.roleplay-live-controls[data-live=true] .roleplay-voice-pulse::after{animation:none;transform:none}}
@media(max-width:700px){
  .roleplay-partner-controls {grid-template-columns:1fr 1fr;gap:8px}
  .roleplay-partner-controls>.roleplay-partner {grid-area:1/1/2/3;justify-self:center;max-width:100%;padding:8px 12px}
  .roleplay-partner-controls>.roleplay-display-toggles {grid-area:2/1}
  .roleplay-partner-controls>.roleplay-help {grid-area:2/2}
  .roleplay-partner strong {overflow-wrap:anywhere}
  .roleplay-caption {padding:10px;gap:8px}
  .roleplay-type {gap:8px}
  .roleplay-stage .roleplay-type button {padding:10px 14px}
  .roleplay-type input {padding:10px 12px}
}
@media(max-height:600px){
  .roleplay-stage .roleplay-play {width:52px;height:52px;min-width:52px;min-height:52px;padding:12px}
  .roleplay-type {margin-top:8px}
  .roleplay-caption {left:4px;transform:none;width:calc(100% - 8px)}
}

/* Sound radiates behind the character only during partner audio playback. */
.roleplay-sound-waves {opacity:0;pointer-events:none;transition:opacity .25s ease}
.roleplay-sound-waves ellipse {fill:none;stroke:#d3e7df;stroke-width:1.5;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0}
.roleplay-stage:not(.helper):has(.roleplay-live-controls[data-state="speaking"]) .roleplay-sound-waves {opacity:1}
.roleplay-stage:not(.helper):has(.roleplay-live-controls[data-state="speaking"]) .roleplay-sound-waves ellipse {animation:roleplay-sound-ripple 2.8s ease-out infinite;animation-delay:var(--wave-delay,0s)}
.roleplay-stage .roleplay-sound-waves ellipse:nth-child(2) {--wave-delay:-.93s}
.roleplay-stage .roleplay-sound-waves ellipse:nth-child(3) {--wave-delay:-1.86s}
@keyframes roleplay-sound-ripple {0% {transform:scale(.85);opacity:0} 18% {opacity:.24} 100% {transform:scale(2.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.roleplay-sound-waves{display:none;transition:none}.roleplay-stage .roleplay-sound-waves ellipse{animation:none!important}}

/* The transcript itself is one accessible inspect action with a lighter scrim. */
.roleplay-stage .roleplay-caption {background:rgba(18,18,18,.32);border:0;box-shadow:none;color:var(--text);font-weight:400;text-transform:none;opacity:1}
.roleplay-stage .roleplay-caption:hover:not(:disabled) {background:rgba(18,18,18,.42)}
.roleplay-stage .roleplay-caption:has(.coach-live-caption:empty) {display:none}

/* Dictionary paradigms: grammar belongs to the headers, forms to the cells. */
.form-tables { display: grid; gap: 20px; min-width: 0; }
.form-table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.form-table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: start; font-size: .94rem; }
.form-table caption { padding: 16px 18px; text-align: start; background: var(--surface); }
.form-table caption strong { display: block; font-size: 1rem; color: var(--text); }
.form-table caption span { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; }
.form-table th, .form-table td { padding: 12px 16px; border-top: 1px solid var(--border); vertical-align: middle; text-align: start; }
.form-table thead th { background: var(--surface-subtle); color: var(--text-secondary); font-size: .78rem; font-weight: 650; }
.form-table tbody th { width: 1%; min-width: 100px; background: var(--surface-hover); color: var(--text-secondary); font-size: .84rem; font-weight: 550; }
.form-table th + th, .form-table td { border-inline-start: 1px solid var(--border); }
.form-table tr > th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; }
.form-cell { display: flex; flex-direction: column; gap: 8px; min-width: 115px; }
.form-control { display: flex; align-items: center; gap: 5px; }
button.form-word { display: flex; flex-direction: column; align-items: start; gap: 2px; padding: 7px 9px; border-radius: 8px; background: transparent; color: var(--text); text-align: start; white-space: normal; box-shadow: none; }
button.form-word:hover, button.form-word[aria-expanded="true"] { background: var(--surface-subtle); }
button.form-word strong { font-weight: 600; }
.form-control .speech-button { width: 30px; height: 30px; min-width: 30px; padding: 6px; }
.form-control .speech-button svg { width: 16px; height: 16px; }
.form-cell-empty { padding: 7px 9px; color: var(--muted); }
.form-example-popup { max-width: 600px; }
.form-example-text { font-size: 1.2rem; line-height: 1.8; }
.form-example-text > .speech-control { margin-inline-end: 8px; }
@media (max-width: 600px) {
  .form-table th, .form-table td { padding: 9px 10px; }
  .form-table tbody th { min-width: 65px; font-size: .78rem; }
  .form-table caption { padding: 14px; }
  .form-cell { min-width: 80px; }
  .form-control { flex-direction: column-reverse; align-items: flex-start; gap: 2px; }
  button.form-word { padding: 5px 3px; font-size: .88rem; }
  .form-control .speech-button { margin: 0; }
}

/* Error details keep the normal message small while exposing full diagnostics on demand. */
.error-message { display: inline-flex; align-items: baseline; gap: .35rem; max-width: 100%; }
.icon-button.error-details-button { width: 24px; min-width: 24px; height: 24px; flex: 0 0 auto; color: var(--danger, #c13d3d); padding: .2rem; align-self: center; }
.error-details-popup { max-width: min(46rem, calc(100vw - 2rem)); }
.error-details-id { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .8rem 0; }
.error-details-id code { font-size: 1rem; overflow-wrap: anywhere; user-select: all; }
.error-details-data { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; font-size: .8rem; line-height: 1.5; user-select: text; }
.unhandled-client-error { position: fixed; bottom: 1rem; right: 1rem; z-index: 10000; max-width: min(28rem, 90vw); background: var(--surface, white); color: var(--danger, #c13d3d); border: 1px solid currentColor; border-radius: .5rem; padding: .7rem; }

/* Sentence structures: patterns, a small slot editor, and word-pool practice. */
.structure-card { padding: 22px; }
.structure-open h2 { margin: 0 0 16px; font-size: 1.05rem; }
.structure-title { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; box-shadow: none; cursor: pointer; }
.structure-title:hover { background: transparent; color: var(--accent); }
.structure-open p { font-size: .8rem; line-height: 1.7; margin: 14px 0 0; }
.structure-pattern { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 8px; }
.structure-pattern + p { margin-top: 14px; }
/* Punctuation sits between the slot boxes, level with their text. */
.structure-punctuation { align-self: flex-start; margin-inline: -5px -3px; padding-top: 7px; color: var(--text); font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.structure-punctuation.before { margin-inline: -3px -5px; }
.structure-answer .structure-punctuation { padding-top: 16px; font-size: 1.25rem; }
.structure-pattern-translation { color: var(--text-secondary); font-size: .9rem !important; font-style: italic; }
.structure-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; max-width: 100%; }
.structure-slot-box { min-height: 0; max-width: 100%; padding: 7px 14px; border: 1.5px dashed color-mix(in srgb, var(--role) 60%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--role) 10%, var(--surface)); color: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; box-shadow: none; cursor: help; transition: background .15s var(--ease), border-color .15s var(--ease); }
.structure-slot-box.fixed { border-style: solid; background: color-mix(in srgb, var(--role) 20%, var(--surface)); }
.structure-slot-box:hover, .structure-slot.open .structure-slot-box { color: var(--text); border-color: var(--role); background: color-mix(in srgb, var(--role) 26%, var(--surface)); }
.structure-slot-filter { display: block; max-width: 22ch; overflow: hidden; color: var(--text-secondary); font-weight: 500; font-style: italic; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.structure-slot-term { min-height: 1.2em; max-width: 100%; color: color-mix(in srgb, var(--role, var(--text-secondary)) 72%, var(--text)); font-size: .72rem; font-weight: 600; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.structure-slot-details { position: absolute; z-index: 20; top: calc(100% + 6px); inset-inline-start: 0; display: none; width: max-content; max-width: min(300px, calc(100vw - 48px)); padding: 12px 14px; border: 1px solid var(--border); border-top: 3px solid var(--role); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-raised); color: var(--text); font-size: .8rem; line-height: 1.5; text-align: start; animation: popover-in .14s var(--ease) both; }
.structure-slot:hover .structure-slot-details, .structure-slot.open .structure-slot-details, .structure-slot-box:focus-visible + .structure-slot-term + .structure-slot-details { display: grid; gap: 6px; }
.structure-slot-details strong { display: flex; align-items: center; gap: 7px; font-size: .82rem; }
.structure-slot-details .guided-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--role); }
.structure-slot-details p { display: grid; gap: 1px; margin: 0 !important; font-size: .8rem !important; line-height: 1.45 !important; overflow-wrap: anywhere; }
.structure-slot-details p .muted { font-size: .7rem; }
.structure-slot-gloss { display: grid; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--border); font-size: .85rem; }
.structure-slot-gloss-word { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 1.15rem; font-weight: 700; }
.structure-slot-gloss-word small { color: var(--text-secondary); font-size: .85rem; font-weight: 500; }
.structure-sentence-part { border-bottom: 3px solid color-mix(in srgb, var(--role) 70%, transparent); padding-bottom: 1px; }
.structure-card-footer { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 18px; }
.structure-card-footer .button-row { margin: 0; flex: none; }
.structure-card-footer .secondary { min-height: 36px; padding: 7px 12px; font-size: .8rem; }
.structure-slot-editor { display: grid; gap: 12px; }
.structure-slot-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.structure-slot-row > .tag { margin-top: 28px; }
.structure-slot-row label { margin: 0; font-size: .75rem; }
.structure-slot-row select { min-width: 135px; }
.structure-slot-value { flex: 1; min-width: 0; }
.structure-slot-details-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) repeat(2, minmax(90px, 110px)); gap: 10px; margin-top: 10px; }
@media (max-width: 640px) { .structure-slot-details-row { grid-template-columns: 1fr 1fr; } }
.structure-slot-actions { display: flex; flex-direction: column; gap: 2px; }
.structure-slot-actions button { min-height: 28px; padding: 2px 10px; }
.structure-examples { display: grid; gap: 16px; margin-top: 24px; }
.structure-examples article { padding: 20px; }
.structure-examples p { margin: 0 0 12px; }
.structure-practice-stage .study-topbar { width: min(900px, 100%); }
.structure-practice-scene { grid-row: 2; width: min(900px, 100%); min-width: 0; min-height: 0; justify-self: center; display: grid; container-type: inline-size; }
.structure-practice-scene > div { display: contents; }
.structure-practice-stage .study-card { max-height: none; }
.structure-practice-stage .study-card .study-card-body { display: block; min-height: 0; }
.structure-practice { min-width: 0; }
.structure-practice-setup { display: grid; gap: 20px; }
.structure-practice-setup h2,.structure-practice-setup p,.structure-practice-setup label { margin: 0; }
.structure-selection { border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; display: grid; gap: 10px; max-height: 350px; overflow-y: auto; }
.structure-selection legend { font-size: .85rem; padding-inline: 6px; }
.structure-practice-progress { display: flex; align-items: center; gap: 18px; margin: 0 0 14px; font-size: .8rem; color: var(--text-secondary); }
.structure-practice-progress progress { flex: 1; height: 6px; accent-color: var(--accent); }
.structure-exercise { text-align: center; }
.structure-exercise h2 { font-size: .9rem; color: var(--text-secondary); font-weight: 500; }
.structure-translation { font-size: clamp(1.25rem,3vw,1.7rem); line-height: 1.6; margin: 28px 0; }
.structure-instructions { font-size: .78rem; line-height: 1.7; }
.structure-answer { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 14px 10px; margin: 30px 0 22px; }
.structure-answer-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; }
.structure-answer-cell.colored .structure-answer-slot { border-color: color-mix(in srgb, var(--role) 60%, transparent); background: color-mix(in srgb, var(--role) 9%, var(--surface)); }
.structure-answer-cell.colored .structure-answer-slot.prefilled { border-style: solid; background: color-mix(in srgb, var(--role) 18%, var(--surface)); }
.structure-answer-cell .structure-slot-term { font-size: .75rem; }
.structure-answer-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 80px; min-height: 62px; max-width: 100%; padding: 12px 16px; border: 2px dashed var(--border); border-radius: 12px; background: var(--surface-subtle); color: var(--text); font-size: 1.05rem; overflow-wrap: anywhere; }
.structure-answer-slot .muted { font-size: .8rem; }
.structure-answer-slot.prefilled { border-style: solid; border-color: transparent; font-weight: 600; }
.structure-answer-cell .structure-answer-slot.incorrect { border-color: var(--danger, #bd4949); }
.structure-answer-slot:disabled { opacity: 1; }
.structure-word-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 82px; padding: 20px 10px; border-top: 1px solid var(--border); }
.structure-word { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 10px; min-height: 44px; padding: 10px 16px; font-size: 1rem; cursor: grab; box-shadow: 0 3px 0 var(--border); overflow-wrap: anywhere; max-width: 100%; }
/* Explicit token colors prevent the generic button hover from hiding its text. */
.structure-word:is(:hover,:active,[aria-pressed="true"]) { background: var(--surface-hover); color: var(--text); border-color: var(--text-secondary); }
.structure-word[aria-pressed="true"] { box-shadow: inset 0 -3px var(--text-secondary); }
.structure-exercise :is(.structure-word,.structure-answer-slot) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.structure-word { touch-action: none; }
.structure-word[data-dragging="true"] { opacity: .4; }
.structure-answer-slot:is(:hover,:active) { color: var(--text); background: var(--surface-hover); }
.structure-answer-slot[data-drop-target="true"] { border-style: solid; border-color: var(--text); box-shadow: inset 0 0 0 2px var(--text); }
.structure-practice-stage .study-card-scroll:focus { outline: none; }
.structure-exercise[data-input="pointer"] button:focus { outline: none; }
.structure-exercise[data-input="keyboard"] button:focus { outline: 2px solid var(--text); outline-offset: 3px; }
.structure-drag-preview { position: fixed; z-index: 10; pointer-events: none; transform: translate(-50%, -120%); border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); max-width: 80vw; overflow-wrap: anywhere; }
.structure-exercise .button-row { justify-content: center; }
.structure-revealed { padding: 18px; background: var(--surface-subtle); border-radius: 12px; margin: 16px 0; }
@media (max-width: 600px) {
  .structure-slot-row { flex-wrap: wrap; }
  .structure-slot-value { flex-basis: 100%; order: 3; }
  .structure-slot-actions { flex-direction: row; margin-inline-start: auto; }
  .structure-card-footer { flex-wrap: wrap; }
  .structure-answer-slot { min-width: 65px; padding: 10px; }
  .phrase-filters { flex-wrap: wrap; }
  .phrase-filters > input { min-width: 160px; }
}


/* Referenced lists remain individually accessible and editable. */
.vocabulary-attachments.surface { margin: 22px 0; }
.vocabulary-attachments h2 { font-size: 1.05rem; margin: 0; }
.vocabulary-attachment-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.vocabulary-attachment-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.vocabulary-attachment-link > span:last-child { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.vocabulary-attachment-row > button { flex-shrink: 0; }
.vocabulary-attachment-form { display: flex; align-items: end; gap: 12px; margin-top: 18px; }
.vocabulary-attachment-form label { flex: 1; min-width: 0; margin: 0; }
.vocabulary-attachment-form select { width: 100%; }
@media (max-width: 600px) {
    .vocabulary-attachment-form { flex-direction: column; align-items: stretch; }
    .vocabulary-attachment-link .vocabulary-list-art { flex-basis: 40px; width: 40px; height: 40px; font-size: 24px; }
}

/* Interface direction and lesson direction are independent. Logical insets keep
   menus and the sidebar anchored to the reader's start edge. */
[dir="rtl"] .sidebar-toggle svg,
[dir="rtl"] .page-history-back svg { transform: scaleX(-1); }
@media (max-width: 760px) {
  [dir="rtl"] .sidebar { transform: translateX(104%); }
  [dir="rtl"] .sidebar-expanded .sidebar { transform: none; }
}

/* Word flash cards: four learning dimensions. */
.flashcard-modes { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.flashcard-mode-option { align-items: flex-start; gap: 10px; }
.flashcard-mode-option span { display: grid; gap: 2px; }
.flashcard-mode-option small { font-size: .78rem; line-height: 1.45; }
.flashcard-secondary-field { grid-column: 1 / -1; display: grid; gap: 6px; min-width: 0; }
.flashcard-secondary-field input { width: 100%; margin: 0; }
.flashcard-field-label { font-size: .75rem; font-weight: 650; color: var(--text-secondary); letter-spacing: .03em; text-transform: uppercase; }
.flashcard-answer-editor .flashcard-field-label { display: block; margin-bottom: 6px; }
.flashcard-speaking { display: grid; justify-items: center; gap: 12px; padding: 6px 0; }
.flashcard-speaking .reader-flashcard-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.flashcard-speaking .reader-flashcard-toolbar > button:first-child { min-width: 180px; min-height: 52px; font-size: 1rem; }
.flashcard-recording-ready { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--success); }
.flashcard-cannot-speak { grid-column: 1 / -1; justify-self: center; font-size: .85rem; }
.flashcard-secondary-answer { display: flex; flex-wrap: wrap; gap: 6px; }
.study-scene:has(.study-answer-dock[data-answer-step]) { grid-template-rows: minmax(0, 1fr) auto; }
.study-answer-dock[data-answer-step] { max-height: min(360px, calc(var(--study-height) * .6)); padding: 14px 18px; gap: 8px; }
.study-answer-dock[data-answer-step] .flashcard-task { gap: 6px; }
.study-answer-dock[data-answer-step] .flashcard-task-title { flex: 1; font-size: .95rem; }
.flashcard-answer-step { flex: none; color: var(--text-secondary); font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.study-dock .flashcard-answer-back { flex: 0 0 32px; width: 32px; height: 32px; padding: 6px; }
.pronunciation-system .pronunciation-info { margin: 0; padding: 2px 4px; font-size: .75rem; }
.study-answer-dock[data-answer-step] .pronunciation-suggestions { min-height: 0; }
.study-answer-dock[data-answer-step] .pronunciation-suggestions:empty { display: none; }
.study-answer-dock[data-answer-step] .pronunciation-tone-heading { min-height: 36px; }
.study-answer-dock[data-answer-step] button.pronunciation-tone { min-height: 64px; padding: 5px 3px; gap: 2px; }

/* Characters: library rows, editor and the stroke flash card. */
.character-rows { display: grid; }
.character-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.character-row:last-child { border-bottom: 0; }
.character-glyph { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--surface-subtle); border: 1px solid var(--border); font-size: 2.1rem; line-height: 1; }
.character-row[data-practicable="false"] .character-glyph { opacity: .6; }
.character-row-copy { flex: 1; min-width: 0; display: grid; gap: 3px; }
.character-row-copy p { margin: 0; overflow-wrap: anywhere; }
.character-reading { font-weight: 650; color: var(--accent-ink); }
.character-no-strokes { font-size: .78rem; }
.character-row-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.character-level-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 4px 9px; border-radius: 20px; font-size: .8rem; font-weight: 650; font-variant-numeric: tabular-nums; background: hsl(var(--level-hue) 72% 48% / .18); border: 1px solid hsl(var(--level-hue) 72% 48% / .55); color: var(--text); }
.character-level-chip.unrated { background: color-mix(in srgb, var(--muted) 15%, transparent); border-color: var(--border); color: var(--text-secondary); font-weight: 500; }
.character-editor-glyph { font-size: 1.6rem; max-width: 120px; text-align: center; }
.character-suggestion-row { align-items: center; }
.character-suggestion-row .character-glyph { width: 52px; height: 52px; font-size: 1.7rem; }
.character-card { display: grid; justify-items: center; gap: 14px; text-align: center; }
.character-card-pronunciation { display: flex; align-items: center; justify-content: center; gap: 12px; }
.character-card-reading { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 650; letter-spacing: .02em; margin: 0; }
.character-card-meaning { font-size: 1.15rem; margin: 0; }
.character-card-help { font-size: .8rem; }
.character-session-count { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; font-weight: 650; }
.study-scene:has(.character-dock) { grid-template-rows: minmax(0, 1fr) minmax(0, min(62%, 560px)); }
.character-dock { padding: 12px 16px; gap: 8px; overflow: auto; }
.character-stroke-exercise { gap: 8px; }
.character-stroke-exercise canvas { width: min(100%, 300px, 38dvh); }
.character-stroke-exercise > p { min-height: 2.2em; margin: 0; }
.character-stroke-exercise[data-complete="true"] .skill-stroke-tools, .character-stroke-exercise[data-complete="true"] > small { display: none; }
.character-stroke-exercise[data-demonstrating="true"] .skill-stroke-tools { display: none; }
.character-result-glyph { font-size: clamp(2.6rem, 9vw, 4rem); line-height: 1.1; margin: 0; }
.character-result { display: grid; gap: 14px; }
.character-result-progress { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-secondary); }

/* Home activity sections share the full dashboard width. */
.home-sections { display: grid; gap: 32px; min-width: 0; }
.home-feature-section { min-width: 0; container: discovery-layout / inline-size; }
.home-dashboard :is(.home-feature-section,.home-quests) > .section-heading {
  position:sticky;top:var(--header-height);z-index:12;align-self:start;
  margin-inline:-12px;padding:2px 12px;border-radius:0 0 14px 14px;
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
/* The heading backdrop only appears while the heading is pinned under the app
   header; home/sticky_headings.js tracks their position and the language dock. */
.home-dashboard :is(.home-feature-section,.home-quests) > .section-heading {
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:background-color .18s ease,backdrop-filter .18s ease,-webkit-backdrop-filter .18s ease;
}
.home-dashboard :is(.home-feature-section,.home-quests) > .section-heading[data-stuck="true"] {
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
/* Keep the linked heading's 44px touch target, without extra phone padding. */
@media(max-width:760px) {
  .home-dashboard :is(.home-feature-section,.home-quests) > .section-heading { padding-block:0; }
}
.home-feature-section > .section-heading h2 { margin: 0; font-size: 1.15rem; }
.home-feature-section > .section-heading h2:has(.home-section-link) {width:100%}
.home-content-grid { --discovery-card-height: 30rem; container: content-tiles / inline-size; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px; }
button.home-create-card {white-space:normal}
.home-section-link {display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:4px 0;color:inherit;text-decoration:none;border-radius:6px;transition:color .15s ease}
.home-section-link:hover {color:var(--accent);text-decoration:none}
.home-section-icon {display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:var(--surface-subtle);color:var(--text-secondary)}
.home-section-title {flex:1;min-width:0;overflow-wrap:anywhere}
.home-section-action {display:flex;align-items:center;gap:8px;flex:none;margin-inline-start:auto}
.home-section-view-all {font-size:.85rem;font-weight:500;opacity:0;transform:translateX(-4px);transition:opacity .15s ease,transform .15s ease}
.home-section-link:is(:hover,:focus-visible) .home-section-view-all {opacity:1;transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.home-section-link,.home-section-view-all {transition:none}.home-section-view-all {transform:none}}
.home-section-link:focus-visible {outline:2px solid var(--accent);outline-offset:4px}
/* Fixed outer heights prevent images, generated copy and button defaults from
   contributing different intrinsic sizes to the same discovery row. */
:is(.home-content-grid, .library-create-grid) > :is(.home-content-card, .home-suggestion, .home-create-column) { height: var(--discovery-card-height); min-height: 0; }
/* Home action tiles split their column or row equally. */
.home-create-column { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; min-height: 0; }
.home-create-column > .home-create-card { height: auto; }
/* Create tiles sit on quiet, checked-in artwork: faded solid shapes in the flag's first colour. */
.home-create-card { --tint: var(--flag-1, var(--accent)); position: relative; justify-items: center; align-content: center; color: var(--text); background: color-mix(in srgb, var(--tint) 4%, var(--surface)); }
.home-create-card:hover { background: color-mix(in srgb, var(--tint) 7%, var(--surface)); border-color: color-mix(in srgb, var(--tint) 24%, var(--border)); }
.home-create-art { position: absolute; inset: 0; display: block; color: var(--tint); opacity: .38; pointer-events: none; }
.home-create-art > svg { display: block; width: 100%; height: 100%; }
.coach-create-popup .coach-setup {padding:0;border:0;box-shadow:none;background:none}

.home-content-card { display: grid; align-items: stretch; align-content: start; gap: 0; width: 100%; min-width: 0; height: 100%; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); text-decoration: none; text-align: start; font: inherit; box-shadow: var(--shadow-sm); transition: border-color .15s ease, background-color .15s ease, box-shadow .18s ease, transform .18s var(--ease); }
.home-content-card:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.home-content-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.home-content-copy { display: grid; gap: 10px; min-width: 0; padding: 20px; }
.home-content-copy > strong { font-size: 1.1rem; line-height: 1.35; overflow-wrap: anywhere; }
.home-content-copy > .muted { font-size: .9rem; line-height: 1.5; }
/* Both content cards reserve the same text area and crop art to the remaining space. */
.home-recent-card { grid-template-rows: minmax(0, 1fr) var(--tile-caption-height, 14rem); }
.home-recent-card > .home-content-copy, .home-suggestion-card > .home-content-copy { min-height: 0; align-content: start; overflow: hidden; }
.home-recent-card .home-card-eyebrow { min-height: 28px; }
.home-recent-card > .home-content-copy { padding: 16px 20px; gap: 6px; }
:is(.home-recent-card, .home-suggestion-card, .home-create-card) .home-content-copy > :is(strong, .muted) { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
:is(.home-recent-card, .home-suggestion-card, .home-create-card) .home-content-copy > strong { -webkit-line-clamp: 2; }
:is(.home-recent-card, .home-suggestion-card, .home-create-card) .home-content-copy > .muted { -webkit-line-clamp: 3; }
/* The same width that stacks discovery cards also compacts their creation tile. */
@container content-tiles (max-width: 555px) {
  :is(.home-content-grid, .library-create-grid) > :is(.home-create-column, .home-create-card) { height: 11rem; }
  .home-create-card { align-content: center; height: auto; }
  /* Stacked: the creation tile and View all share one equally divided row. */
  .home-create-column { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); min-height: 0; }
  .home-create-column > .home-create-card { min-height: 0; }
}
/* Action labels and arrows stay on one row; optional copy uses the tile's
   actual width and height, including stacked and library layouts. */
.home-content-card:is(.home-create-card, .home-view-all-tile) { container: home-action / size; display: grid; grid-template-rows: minmax(0, 1fr); align-content: stretch; min-height: 0; padding: 0; }
.home-create-column > .home-view-all-tile { height: auto; }
.home-action-copy { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: center; gap: 10px 14px; width: 100%; min-width: 0; padding: 24px; text-align: start; }
.home-action-copy > strong { font-size: 1.1rem; line-height: 1.35; overflow-wrap: anywhere; }
.home-action-copy > .shell-icon { grid-column: 2; grid-row: 1; color: var(--muted); transition: transform .15s var(--ease); }
.home-content-card:is(.home-create-card, .home-view-all-tile):hover .home-action-copy > .shell-icon { transform: translateX(2px); }
.home-action-count { grid-column: 1; grid-row: 2; color: var(--muted); font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.home-action-copy > .muted { display: none; grid-column: 1; grid-row: 2; min-width: 0; font-size: .9rem; line-height: 1.5; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
@container home-action (min-width: 18rem) and (min-height: 12rem) {
  .home-action-copy > .muted { display: -webkit-box; }
}
@container home-action (min-width: 20rem) and (min-height: 10rem) {
  .home-action-copy > .muted { display: -webkit-box; }
}
@container home-action (max-width: 16rem) {
  .home-action-copy { padding: 16px; column-gap: 8px; }
  .home-action-copy > strong { font-size: 1rem; }
}
.home-card-eyebrow { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: .72rem; font-weight: 650; color: var(--text-secondary); }
.home-suggestion .home-card-eyebrow { padding: 5px 11px; border-radius: 999px; background: var(--home-tint-soft, var(--surface-subtle)); color: var(--home-tint-ink, var(--text-secondary)); }
.home-content-busy { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; background:#0009; color:#fff; font-size:.88rem; font-weight:650; }
.home-content-busy .word-illustration-spinner { width:18px; height:18px; }
.home-content-action { display: flex; align-items: center; gap: 8px; padding-top: 8px; color: var(--text); font-size: .88rem; font-weight: 650; }
.home-content-action .word-illustration-spinner { width: 18px; height: 18px; }
.home-suggestion { position: relative; min-width: 0; }
.home-suggestion-feedback { position: absolute; inset: auto 12px 12px; z-index: 3; display: grid; gap: 8px; max-height: 50%; overflow: auto; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.home-suggestion-feedback > * { margin: 0; }
/* The badge row shares the card's grid, keeping its menu outside the card's
   button and frosted/clipped surface so its dropdown can open over nearby tiles. */
.home-suggestion-tile {position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 44px calc(var(--tile-caption-height, 14rem) - 44px);min-width:0;min-height:0;height:100%}
.home-suggestion-card {grid-area:1 / 1 / 4 / 2;grid-template-rows:subgrid}
.home-suggestion-card:hover {transform:none}
.home-suggestion-card .home-suggestion-image {grid-row:1}
.home-suggestion-card .home-content-copy {grid-row:3;padding-top:6px}
.home-suggestion-heading {position:relative;grid-area:2 / 1 / 3 / 2;display:flex;align-items:center;gap:8px;min-width:0;margin:16px 20px 0;z-index:2;pointer-events:none}
.home-suggestion-heading .home-card-eyebrow {min-width:0;white-space:normal}
.home-suggestion-heading .home-card-eyebrow>.shell-icon {flex:none}
.home-suggestion-menu {position:static;flex:none;pointer-events:auto}
.home-suggestion-tile:has(.home-suggestion-menu.is-open) {z-index:40}
.home-suggestion-menu>.home-suggestion-popover {inset-inline-start:0;inset-inline-end:auto;width:min(250px,100%)}
/* The visible 28px control matches the badge, inside a 44px tap target. */
button.home-suggestion-refresh {position:relative;width:44px;min-width:44px;height:44px;margin:-8px;padding:0;background:transparent;border:0;box-shadow:none;color:var(--text)}
button.home-suggestion-refresh::before {content:"";position:absolute;inset:8px;background:color-mix(in srgb, var(--surface) 78%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb, var(--border) 60%, transparent);border-radius:9px;box-shadow:0 2px 8px #0002;pointer-events:none}
button.home-suggestion-refresh > .shell-icon {position:relative;width:18px;height:18px}
button.home-suggestion-refresh:hover:not(:disabled) {background:transparent;color:var(--text)}
button.home-suggestion-refresh:hover:not(:disabled)::before {background:var(--surface-hover);border-color:var(--border-strong)}
.home-recent-card > .home-recent-art, .home-suggestion-card > .home-suggestion-image { height: 100%; min-height: 0; aspect-ratio: auto; }
.home-suggestion-image, .home-recent-art { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; background: var(--surface-subtle); color: var(--text-secondary); overflow: hidden; }
.home-suggestion-image img, .home-recent-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-recent-art .book-cover { transform: rotate(-5deg); }
.home-thumbnail-action { position: absolute; top: 12px; right: 46px; left: 12px; min-height: 26px; z-index: 2; display: flex; align-items: center; justify-content: flex-end; color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: right; text-shadow: 0 2px 8px #000b, 0 0 24px #000e; pointer-events: none; opacity: 1; }


.home-content-pending { align-content: center; justify-items: center; gap: 14px; min-height: 260px; padding: 24px; color: var(--text-secondary); }
.home-image-retry { margin-top: 8px; }
/* Palette tokens mirror both explicit themes and Automatic's OS appearance. */
:root, .theme-light, .theme-calm, .theme-system { --tile-info-opacity: 60%; --tile-info-alpha: .6; --tile-theme-rgb: 255, 255, 255; --tile-theme-ink: #111; --tile-theme-secondary: #111d; --tile-theme-detail-rgb: 0, 0, 0; --tile-theme-shadow: none; }
:root[data-theme="dark"], :root[data-theme="tokyo-night"], .theme-dark, .theme-tokyo-night { --tile-info-opacity: 80%; --tile-info-alpha: .8; --tile-theme-rgb: 16, 21, 29; --tile-theme-ink: #fff; --tile-theme-secondary: #ffffffe0; --tile-theme-detail-rgb: 255, 255, 255; --tile-theme-shadow: 0 1px 3px #0008; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"], .theme-system { --tile-info-opacity: 80%; --tile-info-alpha: .8; --tile-theme-rgb: 16, 21, 29; --tile-theme-ink: #fff; --tile-theme-secondary: #ffffffe0; --tile-theme-detail-rgb: 255, 255, 255; --tile-theme-shadow: 0 1px 3px #0008; }
}
[data-content-style="image"] { --tile-scrim-rgb: 16, 21, 29; --tile-ink: #fff; --tile-secondary: #ffffffe0; --tile-detail-rgb: 255, 255, 255; --tile-title-shadow: 0 1px 3px #0008; }
[data-content-style="image"][data-scrim-theme="adaptive"] { --tile-scrim-rgb: var(--tile-theme-rgb); --tile-ink: var(--tile-theme-ink); --tile-secondary: var(--tile-theme-secondary); --tile-detail-rgb: var(--tile-theme-detail-rgb); --tile-title-shadow: var(--tile-theme-shadow); }
/* Artwork fills the card; its caption has a sharp, theme-matched frosted scrim. */
[data-content-style="image"] > :is(.home-content-grid, .library-create-grid) { --discovery-card-height: 20.5rem; }
[data-content-style="image"] :is(.home-recent-card, .home-suggestion-card) { position: relative; color: var(--tile-ink); background: #253139; }
[data-content-style="image"] .home-recent-card { grid-template-rows: minmax(0, 1fr) var(--tile-caption-height, 6.5rem); }
[data-content-style="image"] :is(.home-recent-card > .home-recent-art, .home-suggestion-card > .home-suggestion-image) { position: absolute; inset: 0; height: 100%; background: #253139; }
[data-content-style="image"] .home-recent-card > .home-content-copy { position: relative; z-index: 1; grid-row: 2; grid-template-rows: 28px auto; padding: 8px 16px 12px; gap: 4px; }
[data-content-style="image"] .home-recent-card .home-card-eyebrow { min-height: 28px; color: var(--tile-secondary); }
[data-content-style="image"] .home-content-copy > .home-content-description { color:var(--tile-secondary); -webkit-line-clamp:2; }
[data-content-style="image"] :is(.home-recent-card, .home-suggestion-card) .home-content-copy > strong { text-shadow: var(--tile-title-shadow); }
[data-content-style="image"] .home-suggestion-tile { grid-template-rows: minmax(0, 1fr) 36px calc(var(--tile-caption-height, 6.5rem) - 36px); }
/* Fade both the tint and backdrop blur so neither leaves a hard upper edge. */
[data-content-style="image"] :is(.home-recent-card, .home-suggestion-card)::after { content: ""; position: absolute; inset: auto 0 0; height: calc(var(--tile-caption-height, 6.5rem) + 5rem); background: linear-gradient(to top, rgba(var(--tile-scrim-rgb), var(--tile-info-alpha, .42)), rgba(var(--tile-scrim-rgb), calc(var(--tile-info-alpha, .42) * .667)) 60%, transparent); -webkit-backdrop-filter: blur(calc(var(--tile-info-alpha, .42) * 14px)); backdrop-filter: blur(calc(var(--tile-info-alpha, .42) * 14px)); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%); mask-image: linear-gradient(to bottom, transparent, #000 55%); pointer-events: none; }
[data-content-style="image"] .home-suggestion-card > .home-content-copy { position: relative; z-index: 1; padding: 4px 16px 12px; gap: 4px; }
[data-content-style="image"] .home-suggestion-heading { margin: 8px 16px 0; }
[data-content-style="image"] .home-suggestion-heading .home-card-eyebrow { color: var(--tile-ink); background: rgba(var(--tile-detail-rgb), .14); }
[data-content-style="image"] button.home-suggestion-refresh { color: var(--tile-ink); }
[data-content-style="image"] button.home-suggestion-refresh::before { background: rgba(var(--tile-detail-rgb), .12); border-color: rgba(var(--tile-detail-rgb), .25); }
[data-content-style="image"] button.home-suggestion-refresh:hover:not(:disabled) { color: var(--tile-ink); }
[data-content-style="image"] button.home-suggestion-refresh:hover:not(:disabled)::before { background: rgba(var(--tile-detail-rgb), .22); }
[data-content-style="image"] :is(.home-recent-card, .home-suggestion-card) .home-thumbnail-type { top: 12px; bottom: auto; }
[data-content-style="image"][data-scrim-edge="sharp"] :is(.home-recent-card, .home-suggestion-card)::after { height: var(--tile-caption-height, 6.5rem); background: rgba(var(--tile-scrim-rgb), var(--tile-info-alpha, .42)); -webkit-mask-image: none; mask-image: none; }
.home-stuff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-quick-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-width: 0; min-height: 88px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); background: var(--surface); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.home-quick-link:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-hover); }
.home-quick-link strong { overflow-wrap: anywhere; }
.home-quick-link > span { display: grid; gap: 4px; }
.home-quick-link small { color: var(--muted); font-size: .75rem; }
.home-skills { display: grid; gap: 16px; min-width: 0; }
.home-skills > button.pronunciation-guide-tile { margin: 0; }
.home-skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
button.home-skill-tile { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 80px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-align: start; white-space: normal; box-shadow: none; transition: border-color .15s ease, background-color .15s ease; }
button.home-skill-tile:hover, button.home-skill-tile:focus-visible { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text); }
.home-skill-tile .skill-card-art { width: 44px; height: 44px; border-radius: 12px; }
.home-skill-tile strong { font-size: 1rem; overflow-wrap: anywhere; }
.home-skill-tile > .shell-icon { color: var(--muted); }
@media (max-width:600px) {
  .home-sections { gap: 26px; }
  .home-quick-link { padding: 16px 12px; gap: 8px; }
  .home-quick-link > svg:last-child { display: none; }
}

/* The Home title and sidebar share the same language switcher. */
button.home-language-trigger { position: relative; z-index: 31; display: inline-flex; align-items: center; gap: 16px; width: max-content; max-width: calc(100% + 24px); margin: -8px -12px; padding: 8px 20px 8px 12px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--text); font: inherit; text-align: start; box-shadow: none; }
button.home-language-trigger:hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text); }
button.home-language-trigger:active { transform: none; }
.home-language-trigger > .shell-icon { flex: none; color: var(--muted); }
.home-language-trigger > span:not(.home-flag) { min-width:0; overflow-wrap:anywhere; }
.home-language-menu .profile-menu-popover { max-height: min(600px, calc(100dvh - 160px)); }
@media (max-width:600px) { button.home-language-trigger { gap: 12px; } }

/* History popups: previous splash art in a grid, previous suggestions in a list. */
.home-history-loading { display: grid; place-items: center; min-height: 120px; }
.home-splash-history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.home-history-card { display: grid; gap: 8px; }
.home-history-art { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 14px; background: var(--surface-subtle); color: var(--text-secondary); }
.home-history-art > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-history-card[data-current="true"] .home-history-art { box-shadow: 0 0 0 2px var(--success); }
.home-history-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; color: var(--muted); font-size: .82rem; }
.home-history-current { padding: 3px 9px; border-radius: 999px; background: var(--success-soft); color: var(--success); font-size: .72rem; font-weight: 650; }
button.home-history-use { min-height: 32px; padding: 5px 12px; font-size: .82rem; }
.home-suggestion-history-list { display: grid; gap: 12px; }
.home-suggestion-history-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.home-suggestion-history-item .home-history-art { aspect-ratio: 16 / 9; border-radius: 10px; }
.home-suggestion-history-copy { display: grid; gap: 4px; min-width: 0; }
.home-suggestion-history-copy strong { font-size: 1rem; overflow-wrap: anywhere; }
.home-suggestion-history-copy > .muted { font-size: .88rem; line-height: 1.45; }
.home-suggestion-history-copy > button { justify-self: start; margin-top: 6px; }
@media (max-width: 600px) { .home-suggestion-history-item { grid-template-columns: minmax(0, 1fr); } }

/* Home tools keep entry fields and recent sessions together. */
.home-tools-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.home-tool-card { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); }
.home-tool-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.home-tool-heading h3 { margin: 0; font-size: 1.1rem; }
.home-tool-heading .text-link { flex: none; }
.home-tool-heading button.text-link { width: auto; padding: 0; background: transparent; color: var(--text-secondary); border: 0; box-shadow: none; }
.home-tool-heading button.text-link:hover { background: transparent; color: var(--text); text-decoration: underline; }
.home-tool-form, .home-tool-form .search-field { min-width: 0; width: 100%; margin: 0; }
.home-tool-form .search-field input { min-width: 0; width: 0; flex: 1; }
.home-tool-form .search-field button { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.home-tool-new { display: inline-flex; align-items: center; gap: 8px; }
.home-tool-card > p { margin: 0; }
.home-tool-recent { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; transition: background .15s, border-color .15s; }
.home-tool-recent > span { display: grid; gap: 5px; min-width: 0; }
.home-tool-recent small { color: var(--text-secondary); }
.home-tool-recent strong { overflow-wrap: anywhere; }
.home-tool-recent > svg { flex: none; }
.home-tool-recent:hover, .home-tool-recent:focus-visible { background: var(--surface-subtle); border-color: var(--text-secondary); color: var(--text); }

.vocabulary-browse-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: 16px; }
.vocabulary-browse-controls > label { display: grid; gap: 6px; margin: 0; color: var(--text-secondary); font-size: .8rem; font-weight: 600; }
.vocabulary-browse-controls select { min-width: 180px; max-width: 100%; margin: 0; color: var(--text); }
.vocabulary-word-type { display: block; margin-top: 4px; color: var(--muted); font-size: .72rem; font-weight: 400; }
@media (max-width: 600px) { .vocabulary-browse-controls > label { flex: 1 1 180px; min-width: 0; } .vocabulary-browse-controls select { width: 100%; min-width: 0; } }

/* Home-first navigation; the optional menu reserves space only when enabled. */
.header-language-menu { flex: none; }
/* Light surfaces need less tint for the same visible glass effect.
   Every Home tile shares the daily-goal glass surface. Scope this to Home:
   discovery cards, quests and pronunciation tiles are also used elsewhere. */
.home-dashboard { --home-tile-opacity: 100%; --home-tile-filter: none; }
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .home-dashboard { --home-tile-opacity: var(--home-glass-opacity); --home-tile-filter: blur(14px); }
}
.home-dashboard :is(a.home-daily-goal, .quest-card, .home-content-card, .activity-tile, .home-quick-link, button.home-skill-tile, button.pronunciation-guide-tile, .home-tool-card) {
  background: var(--home-tile-surface, var(--surface));
  background: color-mix(in srgb, var(--home-tile-surface, var(--surface)) var(--home-tile-opacity), transparent);
  -webkit-backdrop-filter: var(--home-tile-filter);
  backdrop-filter: var(--home-tile-filter);
}
.home-dashboard :is(.home-content-card, .activity-tile, .home-quick-link, .home-skill-tile):is(:hover, :focus-visible) {
  --home-tile-surface: var(--surface-hover);
}
.home-dashboard .quest-card[data-complete="true"] {
  --home-tile-surface: color-mix(in srgb, var(--success) 6%, var(--surface));
}
.home-dashboard .pronunciation-guide-tile {
  --home-tile-surface: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
}
.home-dashboard .pronunciation-guide-tile:is(:hover, :focus-visible) {
  --home-tile-surface: var(--accent-soft);
}
@media (prefers-reduced-transparency: reduce) {
  .home-dashboard { --home-tile-opacity: 100%; --home-tile-filter: none; }
}

/* Header and account triggers share the same anchored theme picker. */
.header-theme-menu { flex: none; }
.theme-menu-options { display: grid; gap: 6px; }
.theme-menu-item { gap: 12px; border: 1px solid var(--preview-border); border-radius: 12px; background: var(--preview-bg); color: var(--preview-text, var(--text)); transition: border-color .12s ease, box-shadow .12s ease; }
.theme-menu-item:hover { background: var(--preview-bg); color: var(--preview-text, var(--text)); border-color: var(--preview-accent); }
.theme-menu-item[aria-checked="true"] { border-color: var(--preview-accent); box-shadow: inset 0 0 0 1px var(--preview-accent); }
.theme-menu-item.theme-preview-system { background: linear-gradient(100deg, #f5f5f5 80%, #121212 80%); border-color: #c9c9c9; --preview-text: #202020; --preview-muted: #707070; }
.theme-menu-item.theme-preview-system > .shell-icon { color: #d6d6d6; }
.theme-menu-copy { display: grid; flex: 1; gap: 1px; min-width: 0; }
.theme-menu-copy small { color: var(--preview-muted, var(--muted)); font-size: .76rem; font-weight: 450; }
.theme-menu-item > .shell-icon:last-child { color: var(--preview-accent); }
.theme-swatch, button.theme-swatch { position: relative; display: inline-block; flex: none; width: 22px; min-width: 22px; height: 22px; padding: 0; border: 1px solid rgba(128, 128, 128, .45); border-radius: 50%; background: var(--preview-bg); box-shadow: none; overflow: hidden; }
.theme-swatch::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--preview-accent); }
button.theme-swatch { cursor: pointer; transition: transform .12s var(--ease), box-shadow .12s ease; }
button.theme-swatch:hover { background: var(--preview-bg); transform: scale(1.1); }
button.theme-swatch[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
button.theme-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-theme-row { display: flex; align-items: center; gap: 11px; min-height: 42px; margin: 0 0 4px; padding: 6px 10px; color: var(--text); font-size: .92rem; font-weight: 550; }
.menu-theme-row > .shell-icon { color: var(--muted); }
.menu-theme-row > .menu-theme-label { flex: 1; min-width: 0; }
@media (max-width: 900px) { .header-theme-menu { display: none; } }
.header-language-menu > .profile-menu-popover { position: fixed; top: calc(var(--header-height) + 8px); inset-inline-start: auto; inset-inline-end: max(16px, env(safe-area-inset-right)); max-height: min(720px, calc(100dvh - var(--header-height) - 16px)); }
.app-header .header-language-trigger .learning-profile-flag { width: 34px; height: 34px; border-radius: 10px; }
@media (max-width: 380px) {
    .app-header { gap: 3px; }
    .app-header .header-home { width: 30px; }
    .app-shell .app-header button.sidebar-toggle, .app-shell .app-header button.header-language-trigger { width: 34px; min-width: 34px; }
}

/* Coach panels share a three-row stage: equal flexible outer rows keep the
   study card at screen center, while captions and the input dock stay separate. */
.roleplay-stage.helper .roleplay-caption,
.roleplay-caption[hidden],
.roleplay-stage.helper :is(.roleplay-partner,.roleplay-goal,.roleplay-objective-support),
.roleplay-coach-top[hidden] {display:none}
.roleplay-stage.helper>.reader-popup-body {
  display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);
  justify-items:center;gap:12px;
  padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.roleplay-coach-top {
  position:relative;z-index:3;grid-row:1;align-self:start;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  width:min(560px,100%);max-height:100%;min-height:0;text-align:center;
}
.roleplay-coach-heading {display:flex;align-items:center;gap:12px;flex:none;padding:10px 20px}
.roleplay-coach-heading h2 {margin:0;font-size:1.1rem}
.roleplay-coach-orb {padding:8px}
.roleplay-coach-orb .coach-orb {width:30px}
.roleplay-coach-orb .coach-orb::after {inset:-7px}
.roleplay-coach-caption {
  width:100%;min-height:0;margin:0;padding:14px 20px;overflow:auto;overscroll-behavior:contain;
  color:var(--text);font-size:1.05rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;
}
.roleplay-coach-caption:empty {display:none}
.roleplay-coach-phrase {
  position:relative;z-index:3;grid-row:2;width:min(460px,100%);max-height:30dvh;
  margin:0;text-align:center;padding:18px 24px;overscroll-behavior:contain;
}
.roleplay-coach-phrase strong {font-size:clamp(1.6rem,4vmin,2.5rem)}
.roleplay-stage.helper .roleplay-dock {
  position:relative;grid-row:3;align-self:end;inset:auto;transform:none;
  width:min(680px,100%);min-height:0;max-height:100%;overflow:auto;gap:10px;
}
/* Leave the header's side controls clear without pushing Coach down the page. */
.roleplay-stage.helper>.reader-popup-heading {width:auto;max-width:calc(50% - 100px);padding:6px}
.roleplay-stage.helper>.reader-popup-heading h2 {display:none}
@media(max-width:700px) {
  .roleplay-stage.helper .roleplay-edge-tools {flex-direction:column;gap:2px}
  .roleplay-coach-top {width:min(560px,calc(100% - 104px))}
  .roleplay-coach-heading {gap:8px;padding:6px 12px}
  .roleplay-coach-caption {padding:10px 12px;font-size:.95rem}
  .roleplay-coach-phrase {padding:14px 18px}
}
@media(min-width:701px) and (max-width:1100px) {
  .roleplay-coach-top {width:min(560px,calc(100% - 340px))}
}
@media(max-height:600px) {
  .roleplay-stage.helper>.reader-popup-body {gap:6px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .roleplay-coach-top {gap:6px}
  .roleplay-coach-heading {padding:4px 12px;gap:8px}
  .roleplay-coach-orb {padding:5px}
  .roleplay-coach-orb .coach-orb {width:22px}
  .roleplay-coach-caption {padding:8px 12px;font-size:.9rem;line-height:1.4}
  .roleplay-coach-phrase {padding:8px 18px;gap:2px;line-height:1.35}
  .roleplay-coach-phrase strong {font-size:1.5rem;line-height:1.2}
  .roleplay-coach-phrase small {font-size:.78rem}
  .roleplay-stage.helper .roleplay-dock {gap:6px;padding:0}
  .roleplay-helper-asks {padding:4px 6px}
  .roleplay-stage.helper .roleplay-live-controls {display:flex;align-items:center;gap:10px;padding:6px 10px;flex-wrap:wrap}
  .roleplay-stage.helper .roleplay-live-controls :is(.error,.roleplay-connection-error) {flex-basis:100%}
  .roleplay-stage.helper .roleplay-control-row {gap:4px}
  .roleplay-stage.helper .roleplay-voice-pulse {display:none}
  .roleplay-stage.helper .roleplay-type {flex:1;min-width:140px;margin:0;gap:6px}
  .roleplay-stage.helper .roleplay-play {width:44px;height:44px;min-width:44px;min-height:44px;padding:10px}
}

.roleplay-stage :is(.roleplay-speed,.roleplay-repeat) {display:flex;flex-direction:column;align-items:center;gap:4px;min-width:68px;padding:0;background:transparent;color:var(--text);border:0;box-shadow:none}
.roleplay-stage :is(.roleplay-speed,.roleplay-repeat) .coach-round-icon {display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border);border-radius:50%;background:rgba(255,255,255,.06)}
.roleplay-stage :is(.roleplay-speed,.roleplay-repeat):hover:not(:disabled) .coach-round-icon {background:rgba(255,255,255,.14)}
.roleplay-stage :is(.roleplay-speed,.roleplay-repeat) .coach-round-label {font-size:.75rem;line-height:1.2}

/* Comic pages fill the viewport; study controls sit in readable dark scrims. */
.flashcard-stage.comic-stage, .flashcard-stage.comic-stage[open] {background:#101114;display:block;padding:0;--surface:#202226;--surface-alt:#2b2d32;--text:#f5f5f6;--muted:#c1c3cb;--border:#53565f;color:var(--text)}
.comic-stage {--comic-footer-height:78px;-webkit-user-select:none;user-select:none}
.comic-stage :is(.comic-controls,.comic-interstitial,.guided-word-menu,.anchored-popover,.reader-subword-popup,.reader-popup,input,textarea,[contenteditable]) {-webkit-user-select:text;user-select:text}
.comic-background {position:absolute;inset:0;overflow:hidden;background:#000}
.comic-background,.comic-background img {-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.comic-stage[data-comic-letterboxed="true"] .comic-background::before {content:"";position:absolute;inset:-72px;background-image:var(--comic-scene-url);background-size:var(--comic-scene-fill-width) var(--comic-scene-fill-height);background-position:center;background-repeat:no-repeat;filter:blur(48px) brightness(.7);pointer-events:none}
.comic-background>img,.comic-page-layer>img {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;display:block}
.comic-page-stage,.comic-page-layer,.comic-page-placeholder,.comic-page-preloads {position:absolute;inset:0;pointer-events:none}
.comic-page-layer {isolation:isolate;transform-origin:center center}
.comic-page-layer::before {content:"";position:absolute;z-index:-1;inset:-72px;background-image:var(--comic-page-url);background-size:cover;background-position:center;filter:blur(48px) brightness(.7)}
.comic-page-stack[data-page-ready=true]>.comic-page-placeholder {display:none}
.comic-page-preloads>img {position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.comic-page-error {position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 32px);padding:12px 16px;border-radius:16px;background:rgba(12,13,17,.8);color:#fff;pointer-events:auto}
/* Physical left/right edge cues sit above the artwork and below all reader UI. */
.comic-edge-navigation {position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.comic-edge {position:absolute;top:0;bottom:0;width:25%;color:#fff}
.comic-edge[data-direction="previous"] {left:0}
.comic-edge[data-direction="next"] {right:0}
.comic-edge-preview,.comic-edge-feedback {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0}
.comic-edge[data-direction="previous"]>:is(.comic-edge-preview,.comic-edge-feedback) {justify-content:flex-start;padding-left:clamp(12px,6vw,96px)}
.comic-edge[data-direction="next"]>:is(.comic-edge-preview,.comic-edge-feedback) {justify-content:flex-end;padding-right:clamp(12px,6vw,96px)}
.comic-edge-preview {transition:opacity .16s ease}
.comic-edge-preview>.comic-edge-arrow {opacity:.85}
.comic-edge-arrow {display:flex;align-items:center;justify-content:center;flex:none;padding:12px;border-radius:50%;background:rgb(0 0 0 / .45)}
.comic-edge-arrow>svg {width:clamp(32px,4vw,56px);height:clamp(32px,4vw,56px)}
.comic-edge[data-direction="previous"] .comic-edge-arrow>svg {transform:rotate(180deg)}
.comic-edge-navigation[data-hover="previous"] .comic-edge[data-direction="previous"]:not([data-pulsing])>.comic-edge-preview,
.comic-edge-navigation[data-hover="next"] .comic-edge[data-direction="next"]:not([data-pulsing])>.comic-edge-preview {opacity:1}
.comic-stage[data-edge-hover] {cursor:pointer}
@media(prefers-reduced-motion:reduce) {.comic-edge-preview {transition:none}}
.comic-topbar {position:absolute;z-index:3;inset:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:max(16px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left));pointer-events:none;color:#fff}
.comic-topbar>strong {position:relative;min-width:0;font-size:1.05rem;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:12px 18px;max-width:calc(100% - 68px);border-radius:16px;pointer-events:auto}
.comic-topbar-actions {display:flex;gap:10px;flex-shrink:0;margin-inline-start:auto;pointer-events:none}
.comic-topbar .icon-button {position:relative;flex-shrink:0;width:48px;height:48px;border-radius:50%;pointer-events:auto}
.comic-topbar>strong,.comic-topbar .icon-button,.comic-control-scrim {background:rgba(12,13,17,.64);border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 24px #0003;backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%)}
.comic-controls {position:absolute;z-index:2;bottom:var(--comic-footer-height);left:max(20px,env(safe-area-inset-left),calc((100vw - 1120px)/2));right:max(20px,env(safe-area-inset-right),calc((100vw - 1120px)/2));padding:0;max-height:calc(var(--study-height,100dvh) - var(--comic-footer-height) - max(100px, calc(env(safe-area-inset-top) + 76px)));overflow:hidden;background:rgba(12,13,17,.68);border:1px solid rgba(255,255,255,.18);border-radius:22px;box-shadow:0 12px 48px #0004;backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);scrollbar-width:thin}
/* Clip a correctly aligned, blurred copy of the page beneath each scrim.
   This does not depend on backdrop-filter support or blur foreground content. */
.comic-controls-content {padding:clamp(8px,2dvh,18px) 28px;max-height:inherit;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.comic-controls[data-collapsed="true"] {left:calc(50% - 32px);right:auto;width:64px;height:40px;border-radius:999px}
.comic-controls[data-collapsed="true"]>.comic-controls-content {opacity:0;pointer-events:none}
button.comic-text-restore {position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;color:#fff;font-size:1.7rem;line-height:1;box-shadow:none}
button.comic-text-restore[hidden] {display:none}
button.comic-text-restore:hover {background:rgba(255,255,255,.12)}
.comic-topbar>strong,.comic-topbar .icon-button,.comic-control-scrim,.comic-controls {isolation:isolate}
.comic-scrim-backdrop {display:none;position:absolute;z-index:-1;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;background:#000}
.comic-stage[data-comic-art-ready="true"] .comic-scrim-backdrop {display:block}
.comic-scrim-backdrop::before {content:"";position:absolute;inset:-48px;background-image:var(--comic-scene-url);background-repeat:no-repeat;background-size:var(--comic-scene-width) var(--comic-scene-height);background-position:calc(var(--comic-scene-left) - var(--comic-scrim-x) + 48px) calc(var(--comic-scene-top) - var(--comic-scrim-y) + 48px);filter:blur(8px) saturate(1.2)}
.comic-scrim-fill {display:none;position:absolute;z-index:-1;inset:-108px;background-image:var(--comic-scene-url);background-size:var(--comic-scene-fill-width) var(--comic-scene-fill-height);background-position:calc(var(--comic-scene-fill-left) - var(--comic-scrim-x) + 108px) calc(var(--comic-scene-fill-top) - var(--comic-scrim-y) + 108px);background-repeat:no-repeat;filter:blur(50px) brightness(.7)}
.comic-stage[data-comic-letterboxed="true"] .comic-scrim-fill {display:block}
.comic-scrim-backdrop::after {content:"";position:absolute;inset:0;background:var(--comic-scrim-tint,rgba(12,13,17,.64))}
.comic-controls {--comic-scrim-tint:rgba(12,13,17,.68)}
.comic-stage[data-comic-art-ready="true"] :is(.comic-topbar>strong,.comic-topbar .icon-button,.comic-control-scrim,.comic-controls) {background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.comic-topbar .icon-button:hover {--comic-scrim-tint:rgba(12,13,17,.8)}
.comic-stage .icon-button {color:var(--text)}
.comic-stage .icon-button:hover:not(:disabled) {background:rgba(255,255,255,.14);color:#fff}
.comic-stage .comic-topbar .icon-button:hover:not(:disabled) {background:rgba(12,13,17,.8)}
.comic-control-scrim .icon-button[aria-pressed="true"] {background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.comic-sentence-row {display:flex;align-items:flex-start;gap:24px}
.comic-sentence-content {flex:1;min-width:0}
.comic-speaker {flex:0 0 80px;width:80px;margin:12px 0 0;text-align:center}
.comic-portrait {width:80px;height:80px;border-radius:20px;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2)}
.comic-portrait img {width:100%;height:100%;object-fit:cover;display:block}
.comic-speaker figcaption {font-size:.8rem;font-weight:650;line-height:1.35;margin-top:8px;overflow-wrap:anywhere;color:#fff}
.comic-narration {font-size:.75rem;color:var(--muted)}
.comic-control-scrim {position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:6px;border-radius:20px;pointer-events:auto;width:max-content;max-width:100%}
.comic-action-controls .speech-button {width:44px;height:44px;border-radius:16px;background:transparent;color:#fff}
.comic-action-controls .speech-button:hover {background:rgba(255,255,255,.14)}
.comic-control-scrim>.icon-button {width:44px;height:44px;border-radius:16px;flex-shrink:0}
.comic-display-controls {position:relative;justify-self:start;pointer-events:auto}
/* Hidden groups remain measurable, but cannot receive pointer or keyboard input. */
.comic-display-menu {position:absolute;visibility:hidden;pointer-events:none;max-width:none}
.comic-inline-toggles {margin-inline-start:0;max-width:none}
.comic-footer:is([data-layout="compact"],[data-layout="stacked"]) .comic-inline-toggles {position:absolute;visibility:hidden;pointer-events:none}
.comic-footer:is([data-layout="compact"],[data-layout="stacked"]) .comic-display-menu {position:relative;visibility:visible;pointer-events:auto}
#comic-display-popover {width:max-content;min-width:240px;color:var(--text);background:#202226;border-color:#53565f;pointer-events:auto}
.comic-toggle-options {display:flex;align-items:center;gap:8px;margin:0}
.comic-toggle-options .icon-button {width:44px;height:44px;border-radius:16px}
.comic-toggle-options .icon-button[aria-pressed="true"] {background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.comic-action-controls {justify-self:center}
.comic-footer {position:absolute;z-index:2;inset:auto 0 0;display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;gap:clamp(6px,1.5dvh,12px);padding:0 max(24px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));pointer-events:none}
.comic-controls .guided-sentence-card {background:none;border:0;border-radius:0;box-shadow:none;padding:clamp(2px,.8dvh,8px) 0;max-height:none;overflow:visible;animation:none;-webkit-mask-image:none;mask-image:none}
.comic-controls .guided-sentence-meta>span {display:none}
.comic-controls .guided-sentence-meta {justify-content:flex-end}
.comic-controls .guided-sentence {color:#fff;font-size:clamp(1.35rem,2.6vw,2.2rem)}
.comic-translation {font-size:1rem;color:#eef0f5;margin:clamp(4px,1dvh,10px) 0}
.comic-navigation {justify-self:end;padding:6px;gap:0}
.comic-navigation .icon-button.comic-step-target {width:88px;min-width:88px;height:44px}
.comic-sentence-count {min-width:64px;text-align:center;font-size:.85rem;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.comic-controls .secondary {background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22)}
.comic-controls .secondary:hover:not(:disabled) {background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.comic-empty {position:absolute;inset:80px 20px 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;color:#ddd}
.comic-stage .guided-scene-message {position:absolute;inset:80px 20px 20px;width:auto}
.comic-stage .guided-error {position:absolute;z-index:5;inset:auto auto max(18px,env(safe-area-inset-bottom)) 50%;width:min(600px,calc(100% - 40px));margin:0;background:#342226;color:#fff}
.comic-stage .guided-error > :is(.error-message,.offline-notice) {flex:1;min-width:0;overflow-wrap:anywhere}
@media(max-width:640px) {
    .comic-controls {left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));border-radius:18px}
    .comic-controls-content {padding:clamp(6px,1.2dvh,12px) 14px}
    .comic-topbar{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
    .comic-sentence-row{gap:12px}
    .comic-speaker{flex-basis:52px;width:52px;margin-top:4px}
    .comic-portrait{width:52px;height:52px;border-radius:14px}
    .comic-speaker figcaption{font-size:.7rem;margin-top:4px}
    .comic-footer{gap:6px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
}
@media(max-height:600px), (max-width:380px) {
    .comic-control-scrim {gap:4px;padding:4px;border-radius:16px}
    .comic-footer .comic-control-scrim>.icon-button,.comic-footer .comic-action-controls .speech-button {width:36px;min-width:36px;height:36px;border-radius:14px}
    .comic-controls-content {padding-block:6px}
    .comic-controls .guided-sentence-card {padding-block:2px}
    .comic-translation {margin-block:4px}
    .comic-footer {gap:4px;padding-bottom:max(4px,env(safe-area-inset-bottom))}
}
.comic-footer[data-layout="stacked"] {grid-template-columns:auto minmax(0,1fr)}
.comic-footer[data-layout="stacked"] .comic-display-controls {grid-column:1;grid-row:1}
.comic-footer[data-layout="stacked"] .comic-action-controls {grid-column:2;grid-row:1;justify-self:center}
.comic-footer[data-layout="stacked"] .comic-navigation {grid-column:1/-1;grid-row:2;justify-self:end}

/* Durable comic generation stages, with indeterminate planning and measured work. */
.comic-loading {width:min(100%,520px);text-align:left;margin:0 auto;color:var(--text)}
.comic-loading-heading {display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.comic-loading-heading strong {font-size:1.2rem}
.comic-loading-heading>span {font-size:.8rem;color:var(--muted);white-space:nowrap}
.comic-loading-bar {display:block;width:100%;height:8px;border:0;border-radius:999px;overflow:hidden;appearance:none;background:#34363d;accent-color:#d5d8e0}
.comic-loading-bar::-webkit-progress-bar {background:#34363d;border-radius:999px}
.comic-loading-bar::-webkit-progress-value {background:#d5d8e0;border-radius:999px;transition:width .35s ease}
.comic-loading-bar::-moz-progress-bar {background:#d5d8e0;border-radius:999px}
.comic-loading-bar:indeterminate {background:linear-gradient(90deg,#34363d 25%,#8f939e 50%,#34363d 75%);background-size:200% 100%;animation:comic-loading-sweep 1.8s linear infinite}
.comic-loading-bar:indeterminate::-webkit-progress-bar {background:transparent}
.comic-loading-detail {font-size:.85rem;color:var(--muted);line-height:1.6;margin:12px 0 22px}
.comic-loading-steps {list-style:none;padding:0;margin:0;display:grid;gap:18px}
.comic-loading-steps li {display:flex;align-items:center;gap:12px;font-size:.95rem;color:var(--muted)}
.comic-loading-steps li.active {color:var(--text);font-weight:600}
.comic-loading-steps li.pending {opacity:.6}
.comic-loading-marker {width:28px;height:28px;display:grid;place-items:center;flex-shrink:0;border:1px solid var(--border);border-radius:50%;font-size:.75rem}
.comic-loading-marker .status-pulse {margin:0}
.comic-loading-note {margin:26px 0 0;font-size:.8rem;line-height:1.6;color:var(--muted)}
.comic-preparing {overflow:auto;padding:24px 0;gap:16px;justify-content:flex-start}
.comic-preparing>.comic-preparation-card {display:flex;flex-direction:column;align-items:center;gap:16px;flex-shrink:0;margin-block:auto;width:min(100%,568px);padding:24px;border:1px solid rgba(255,255,255,.2);border-radius:22px;background:rgba(16,17,20,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.comic-preparation-message {max-width:100%;overflow-wrap:anywhere}
.comic-preparation-recovery {display:grid;justify-items:center;gap:16px;margin-top:24px;text-align:center}
.comic-preparation-recovery p {margin:0;overflow-wrap:anywhere}
.comic-preparation-card>.reader-illustration-controls {margin-top:24px}
.comic-loading.compact {width:100%;margin:0 0 18px}
.comic-loading.compact .comic-loading-heading {margin-bottom:8px}
.comic-loading.compact .comic-loading-heading strong {font-size:.85rem}
.comic-loading.compact .comic-loading-detail {margin:8px 0 0;font-size:.75rem}
@keyframes comic-loading-sweep {to {background-position:-200% 0}}
@media(prefers-reduced-motion:reduce) {.comic-loading-bar:indeterminate {animation:none}.comic-loading-bar::-webkit-progress-value {transition:none}}

/* A supplied cover replaces ambient preparation art once decoded successfully. */
.loading-cover-backdrop {position:absolute;inset:0;overflow:hidden;pointer-events:none;isolation:isolate}
.loading-cover-backdrop>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .35s ease}
.loading-cover-backdrop[data-ready="true"]>img {opacity:1}
.loading-cover-backdrop[data-ready="true"]::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.2) 45%,rgba(0,0,0,.5))}
.comic-stage:has(.loading-cover-backdrop[data-ready="true"]) .comic-preparing>.comic-preparation-card {
  padding:24px;border:1px solid rgba(255,255,255,.2);border-radius:22px;
  background:rgba(16,17,20,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
@media(prefers-reduced-motion:reduce) {.loading-cover-backdrop>img {transition:none}}
@media(prefers-reduced-transparency:reduce) {.comic-stage:has(.loading-cover-backdrop) .comic-preparing>.comic-preparation-card {background:#202226;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Quiet ambient comic pages behind preparation, without competing with the text. */
.comic-loading-backdrop {position:absolute;inset:0;overflow:hidden;pointer-events:none;isolation:isolate;background:radial-gradient(ellipse at 15% 30%,#1b2331 0,transparent 60%),radial-gradient(ellipse at 90% 85%,#251e30 0,transparent 55%),#101114}
.comic-loading-backdrop::after {content:"";position:absolute;inset:0;background:radial-gradient(circle,#b5b9cc 1px,transparent 1.5px);background-size:9px 9px;opacity:.035;mask-image:linear-gradient(135deg,#000,transparent 60%)}
.comic-loading-light {position:absolute;inset:-25%;background:radial-gradient(ellipse at 25% 25%,rgba(124,153,210,.09),transparent 42%),radial-gradient(ellipse at 75% 75%,rgba(174,136,190,.07),transparent 40%);animation:comic-light-drift 22s ease-in-out infinite alternate;will-change:transform}
.comic-loading-page {position:absolute;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1.3fr;gap:12px;width:clamp(150px,22vw,310px);aspect-ratio:3/4;padding:14px;border:1px solid rgba(184,197,220,.12);border-radius:9px;opacity:.5;animation:comic-page-drift 18s ease-in-out infinite alternate;will-change:transform}
.comic-loading-page>span {border:1px solid rgba(184,197,220,.1);border-radius:3px;background:linear-gradient(140deg,rgba(184,197,220,.025),transparent)}
.comic-loading-page>span:last-child {grid-column:1/-1}
.comic-loading-page.page-one {left:-5%;top:14%;--page-angle:-16deg;animation-delay:-6s}
.comic-loading-page.page-two {right:-4%;top:12%;--page-angle:14deg;animation-duration:23s;animation-delay:-12s}
.comic-loading-page.page-three {right:17%;bottom:-30%;--page-angle:-8deg;animation-duration:26s;animation-delay:-17s;opacity:.3}
.comic-stage .comic-preparing {z-index:1}
@keyframes comic-light-drift {from {transform:translate3d(-2%,-1%,0) scale(1)} to {transform:translate3d(3%,3%,0) scale(1.06)}}
@keyframes comic-page-drift {from {transform:translate3d(0,0,0) rotate(var(--page-angle))} to {transform:translate3d(10px,-24px,0) rotate(calc(var(--page-angle) + 3deg))}}
@media(max-width:600px) {.comic-loading-page {opacity:.3}.comic-loading-page.page-one {left:-20%}.comic-loading-page.page-two {right:-20%}.comic-loading-page.page-three {bottom:-18%;right:2%}}
@media(prefers-reduced-motion:reduce) {.comic-loading-light,.comic-loading-page {animation:none;will-change:auto}.comic-loading-page {transform:rotate(var(--page-angle))}.comic-loading-marker .status-pulse {animation:none}}

/* Character composition and local word lookup never require generated definitions. */
.word-component-characters { display:grid; gap:8px; margin:16px 0; }
.word-component-characters > span { font-size:.8rem; }
.word-component-characters .reader-subwords { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.word-component-characters .reader-subword-button { min-width:44px; min-height:44px; font-size:1.2rem; }
button.character-info-button { color:var(--text); background:var(--surface-subtle); }
button.character-info-button:hover { color:var(--text); background:var(--accent-soft); }
.character-info-heading { display:flex; align-items:center; gap:20px; }
.character-info-heading p { margin:4px 0 10px; }
.character-info-glyph { font-size:3.5rem; font-weight:500; }
.character-word-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.character-word-filters button[aria-pressed="true"] { background:var(--accent-soft); color:var(--text); border-color:var(--accent); }
.character-word-results { list-style:none; margin:0; padding:0; max-height:320px; overflow:auto; }
.character-word-result { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }
.character-word-result > div:first-of-type { flex:1; min-width:0; }
.character-word-result strong { font-size:1.15rem; margin-inline-end:12px; }
.character-word-result p { margin:5px 0 0; overflow-wrap:anywhere; }
.character-word-result .vocabulary-save { flex:none; }
.character-word-rank { min-width:1.5em; font-variant-numeric:tabular-nums; }
.character-word-suggestions { border-top:1px solid var(--border); margin-top:24px; padding-top:8px; }
.character-word-suggestions > p { font-size:.85rem; }

.character-stroke-details { display:grid; justify-items:center; gap:12px; margin:20px 0; }
.character-stroke-details > h3 { justify-self:start; margin:0; }
.character-stroke-preview { display:grid; justify-items:center; gap:8px; width:100%; }
.character-stroke-preview svg { display:block; width:min(100%, 280px, 38dvh); aspect-ratio:1; border:1px solid var(--border); border-radius:24px; background:var(--surface-subtle); }
.character-stroke-grid { fill:none; stroke:var(--text); opacity:.12; stroke-width:3; stroke-dasharray:12 24; }
.character-stroke-ghost, .character-stroke-trace { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.character-stroke-ghost { stroke:var(--text); stroke-width:28; opacity:.15; }
.character-stroke-trace { stroke:var(--accent); stroke-width:21; stroke-dasharray:1; stroke-dashoffset:1; animation:character-stroke-draw 750ms linear both; }
.character-stroke-preview[data-paused="true"] .character-stroke-trace { animation-play-state:paused; }
@keyframes character-stroke-draw { from { stroke-dashoffset:1; stroke:#b77a14; } 99% { stroke:#b77a14; } to { stroke-dashoffset:0; stroke:var(--accent); } }
@media(prefers-reduced-motion:reduce) { .character-stroke-trace { animation:none; stroke-dashoffset:0; } .character-stroke-pause { display:none; } }

.request-trace-button { display: inline-flex; align-items: center; gap: .4rem; margin-block: .4rem; }
.request-trace-section { min-width: 0; }
.request-trace-section > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.request-trace-section pre { max-height: 45vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; font-size: .8rem; user-select: text; }

/* Inline with the last translated character, including when the line wraps. */
.comic-translation { white-space: pre-wrap; }
.comic-translation-throbber { display: inline-block; width: .8em; height: .8em; margin-inline-start: .4em; vertical-align: -.05em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: word-image-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .comic-translation-throbber { animation: none; } }

.reader-word-emoji { display: block; font-size: .85em; line-height: 1.2; text-align: center; font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; pointer-events: none; user-select: none; }
.reader-word:has(.reader-word-emoji) { display: inline-grid; grid-template-columns: minmax(0, max-content); justify-items: center; vertical-align: baseline; }
.reader-emoji-toggle { position: relative; }
.reader-emoji-toggle[data-pending="true"] > svg { animation: speech-pulse 1s ease-in-out infinite; }
.reader-emoji-error { position: absolute; right: 2px; top: 0; font-size: .75rem; }
@media (prefers-reduced-motion: reduce) { .reader-emoji-toggle[data-pending="true"] > svg { animation: none; opacity: .6; } }
.reader-word-emoji { min-height: 1.2em; }
.guided-sentence:has(.reader-word-emoji) .guided-gap .guided-gloss { margin-top: 1.02em; }

.reader-cover-picker { margin-block: 1rem; }
.reader-cover-preview { display: block; width: min(100%, 240px); max-height: 160px; object-fit: cover; border-radius: 12px; }

/* Per-language daily goals share the header's compact ring. */
.compact-daily-goal {display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:inherit;font-weight:500;color:var(--text-secondary)}
.compact-daily-goal>svg {flex:none;color:var(--xp)}
.profile-quick .compact-daily-goal {font-size:.72rem;gap:5px}
.profile-quick .language-menu-choice {flex:1}
.profile-quick .language-menu-names strong {overflow-wrap:anywhere}
.profile-menu-popover:has(.compact-daily-goal) {width:min(430px,calc(100vw - 32px))}
.header-language-trigger,.home-language-trigger .home-flag {position:relative}
.profile-goal-notice {position:absolute;inset-inline-end:1px;top:1px;width:9px;height:9px;border-radius:50%;background:var(--xp);box-shadow:0 0 0 2px var(--surface);pointer-events:none}
.study-goal-choices[data-allow-break="true"] {grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:800px) {.study-goal-choices[data-allow-break="true"] {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px) {.profile-quick {gap:7px;padding-inline:6px}.profile-quick .compact-daily-goal {font-size:.66rem;gap:3px}.profile-quick .language-menu-flag {font-size:1.1rem}.profile-quick .language-menu-choice {gap:7px}}

.profile-quick .header-xp-goal {display:inline}
.profile-goal-error {display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:.75rem}
.study-goal-choices>button.study-goal-choice {width:100%}

/* The extra comic step keeps the final page visible behind a centered end card. */
.comic-topbar>strong {margin-inline-end:auto;min-width:0}
.comic-chapter-end {display:grid;justify-items:center;position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:min(540px,calc(100% - 40px));max-height:calc(100dvh - 160px);overflow:auto;padding:32px;border-radius:22px;text-align:center;color:var(--text)}
.comic-chapter-end h2 {margin:0 0 24px;font-size:clamp(1.5rem,4vw,2rem);line-height:1.3}
.comic-chapter-end-actions {width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.comic-chapter-end-actions>button {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;white-space:normal;border-radius:14px;padding:12px 18px}
.comic-chapter-end-actions>button:not(.secondary) {background:#f5f5f6;color:#202226;border-color:#f5f5f6}
.comic-chapter-end .secondary {color:var(--text);background:rgba(255,255,255,.09);border-color:var(--border)}
.comic-chapter-name {margin:16px 0 0;color:var(--muted);overflow-wrap:anywhere}
.comic-chapter-end-links {width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:20px}
.comic-chapter-end-links :is(button,a) {color:var(--muted);font-size:.85rem}
.comic-chapter-end-links>button {display:inline-flex;align-items:center;gap:6px;white-space:normal}
.comic-chapter-end .error {margin:16px 0;color:#ffc4b9}
@media(max-width:600px),(max-height:500px) {.comic-chapter-end {padding:22px}.comic-chapter-end h2 {margin-bottom:18px}.comic-chapter-end-links {margin-top:14px}}
@media(max-height:500px) {
  .comic-chapter-end {padding:18px}
  .comic-chapter-end h2 {font-size:1.5rem;margin-bottom:14px}
  .comic-chapter-end-actions>button {min-height:40px;padding:8px 14px}
  .comic-chapter-name {margin-top:12px;font-size:.85rem}
  .comic-chapter-end-links {margin-top:12px}
  .comic-chapter-end-links>button {min-height:32px;padding:6px 10px}
}

/* Reader creation: focused steps with a single-column choice list. */
.reader-story-wizard {display:grid;gap:20px;max-width:780px;margin-inline:auto}
.reader-wizard-steps {display:flex;flex-wrap:wrap;gap:12px 22px;list-style:none;padding:0;margin:0;color:var(--muted);font-size:.82rem}
.reader-wizard-steps li {display:flex;align-items:center;gap:7px}
.reader-wizard-steps li>span {display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-subtle)}
.reader-wizard-steps .current {color:var(--text);font-weight:700}
.reader-wizard-steps .current>span {background:var(--accent);color:var(--accent-text)}
.reader-wizard-heading {font-size:1.2rem;margin:0}
.reader-style-list,.reader-import-choices,.reader-synopsis-list {display:grid;gap:10px}
.reader-style-option {position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;cursor:pointer;margin:0}
.reader-style-option>span {display:grid;gap:3px;flex:1;min-width:0}
.reader-style-option small {color:var(--muted);font-weight:400;line-height:1.4}
.reader-style-option input {position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:inherit}
.reader-style-option:has(input:checked) {background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.reader-style-option:has(input:focus-visible) {outline:2px solid var(--accent);outline-offset:3px}
.reader-import-choices {border-top:1px solid var(--border);padding-top:18px}
.reader-import-choices h3 {font-size:1rem;margin:0 0 4px}
.reader-import-choice {justify-content:flex-start;text-align:start;width:100%;padding:13px 16px}
.reader-import-choice>svg:last-child {margin-inline-start:auto}
.reader-visual-options[open],.reader-story-wizard .more-options[open] {display:grid;gap:16px}
.compose .reader-synopsis-topic {display:grid;gap:8px}
.reader-topic-input {display:grid;gap:10px}
.reader-topic-input input {min-width:0;width:100%}
.reader-topic-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.reader-topic-actions>button {width:100%;min-width:0;min-height:44px;justify-content:center;text-align:center;white-space:normal;overflow-wrap:anywhere}
.reader-synopsis-option {width:100%;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:18px;text-align:start;white-space:normal}
.reader-synopsis-option>span {display:grid;gap:7px;min-width:0}
.reader-synopsis-option>span>span {font-weight:400;color:var(--text-secondary);line-height:1.5}
.reader-synopsis-option>svg {flex:none}
.reader-wizard-actions {border-top:1px solid var(--border);padding-top:18px}
@media(max-width:500px) {.reader-style-option {padding:12px;gap:12px}}
.reader-synopsis-status {display:flex;align-items:center;gap:10px;min-height:48px;font-size:.9rem}
.reader-story-wizard .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.reader-wizard-actions {position:sticky;bottom:-24px;z-index:1;background:var(--surface);padding-block:16px 24px}
@media(max-width:600px) {.reader-wizard-actions {bottom:-16px;padding-bottom:16px}}

.home-thumbnail-type {position:absolute;right:12px;top:12px;display:grid;place-items:center;color:#fff;pointer-events:none;filter:drop-shadow(0 1px 2px #0009) drop-shadow(0 0 3px #0004)}
.home-content-type-name {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Libraries share Home's discovery cards, followed by compact cover-art rows. */
.library-create-grid {--discovery-card-height:30rem;container:content-tiles / inline-size;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:16px;margin-bottom:30px;align-items:stretch}
.library-discovery {min-width:0;container:discovery-layout / inline-size}
/* Weight the creation column only when every discovery tile fits on one row. */
@container discovery-layout (min-width:556px) {
  :is(.home-content-grid,.library-create-grid):has(> :nth-child(2):last-child) {grid-template-columns:minmax(0,3fr) minmax(0,2fr);--create-art-aspect:32 / 27}
}
@container discovery-layout (min-width:842px) {
  :is(.home-content-grid,.library-create-grid):has(> :nth-child(3):last-child) {grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,2fr);--create-art-aspect:32 / 27}
}
/* With two content cards on the first row, both actions fill the row below.
   A single content card keeps its existing stacked action column beside it. */
@container discovery-layout (min-width:556px) and (width < 842px) {
  .home-content-grid > .home-create-column:nth-child(3):last-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); height: 11rem; min-height: 0; }
}
.library-content-list {display:grid;gap:14px}
article.library-content-card {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;min-width:0}
.library-content-open {display:grid;grid-template-columns:210px minmax(0,1fr);align-items:center;min-width:0;color:inherit;text-decoration:none}
.library-thumbnail {align-self:stretch;height:100%;min-height:128px;aspect-ratio:auto}
.library-thumbnail .book-cover {max-height:100px}
.library-content-copy {padding:20px;min-width:0;gap:9px}
.library-content-details {display:grid;justify-items:start;gap:9px;min-width:0;color:var(--text-secondary);font-size:.9rem}
.library-content-details .tag {margin:0}
.library-content-details .meter {width:100%}
.library-content-actions {display:flex;align-items:center;justify-content:center;padding:12px;min-width:0}
.library-content-actions .confirm-inline {flex-wrap:wrap;justify-content:flex-end}
.roleplay-archive .library-content-card {margin-top:12px}
@media(max-width:800px){.library-content-open {grid-template-columns:160px minmax(0,1fr)}.library-content-copy {padding:16px;gap:8px}}
@media(max-width:600px){.library-content-open {grid-template-columns:110px minmax(0,1fr)}.library-content-copy {padding:14px 12px}.library-content-copy>strong {font-size:1rem}.library-content-actions {padding:6px}.library-thumbnail {min-height:120px}.library-thumbnail .book-cover {transform:none;max-width:76px}.library-content-card:has(.confirm-inline) {grid-template-columns:minmax(0,1fr)}.library-content-actions:has(.confirm-inline) {justify-content:flex-end;border-top:1px solid var(--border);padding:10px}.library-content-actions .confirm-inline {justify-content:flex-start}}

/* Comic setup stays silent until the learner chooses to start or resume. */
.comic-welcome-scene {position:absolute;z-index:2;inset:90px 16px max(16px,env(safe-area-inset-bottom));display:grid;place-items:center;overflow:auto}
.comic-welcome {display:grid;justify-items:stretch;align-content:start;gap:16px;width:min(520px,100%);max-height:100%;overflow:auto;padding:26px;border-radius:22px;color:var(--text)}
.comic-welcome h2 {margin:0;font-size:1.6rem;line-height:1.25}
.comic-welcome p {margin:0;line-height:1.5}
.comic-welcome-options {display:grid;gap:8px;margin-inline-start:0}
.comic-welcome-option {display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;min-width:0}
.comic-welcome-option>.icon-button {width:44px;height:44px;border-radius:16px}
.comic-welcome-option>span {font-size:.95rem;line-height:1.4;overflow-wrap:anywhere}
.comic-welcome-actions {display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-top:4px}
.comic-welcome-actions>button {width:100%;min-height:44px;border-radius:14px;white-space:normal}
.comic-welcome-actions>button:not(.secondary) {background:#f5f5f6;color:#202226;border-color:#f5f5f6}
@media(max-width:600px),(max-height:600px){.comic-welcome-scene {inset:76px 10px max(10px,env(safe-area-inset-bottom))}.comic-welcome {padding:18px;gap:12px}.comic-welcome h2 {font-size:1.35rem}}

/* Comic checkpoints keep the question, feedback, and answer in separate cards.
   Scroll the whole stack on short screens so no card can squeeze another away. */
.comic-interstitial {position:absolute;z-index:3;inset:96px max(16px,calc((100vw - 960px)/2)) max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:20px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;pointer-events:auto;padding:2px}
.comic-question-panel,.comic-question-dock,.comic-question-feedback {flex:none;min-width:0;isolation:isolate;position:relative;color:var(--text);border-radius:22px;padding:24px;border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 36px #0003}
.comic-question-panel {width:min(760px,100%);margin-block:auto;display:grid;justify-content:stretch;gap:14px;text-align:center}
.comic-question-panel h2 {font-size:.85rem;letter-spacing:.03em;color:var(--muted);margin:0}
.comic-question-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:start}
.comic-question-explanation {font-size:clamp(1.25rem,3vw,1.8rem);line-height:1.4;margin:0;overflow-wrap:anywhere}
.comic-question-target {font-size:clamp(1rem,2.5vw,1.35rem);line-height:1.5;margin:0;color:var(--text-secondary);overflow-wrap:anywhere}
.comic-question-response {flex:none;width:min(760px,100%);display:grid;gap:12px;margin-top:auto}
.comic-question-dock {width:100%;display:grid;justify-content:stretch;justify-items:stretch;gap:16px}
.comic-question-dock>form.guided-translation {width:100%;max-width:none;margin:0;justify-self:stretch;gap:12px}
.comic-question-dock .guided-answer-row {grid-template-columns:minmax(0,1fr) 44px}
.comic-question-dock .guided-answer-row textarea {width:100%;max-height:160px;grid-row:1}
.comic-question-dock textarea {min-height:72px;resize:vertical}
/* The mic button already indicates recording; the tiny level meter reads as a stray square. */
.comic-question-dock .guided-microphone meter {display:none}
.comic-question-actions {display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;padding-top:4px}
.comic-question-actions .comic-question-back,.comic-question-actions .comic-question-skip {display:inline-flex;align-items:center;gap:6px;color:var(--text)}
.comic-question-actions .comic-question-back {margin-inline-end:auto}
.comic-question-feedback {width:100%;display:grid;gap:12px;justify-content:stretch;font-size:1rem;line-height:1.55;text-align:start;--grade-1:#ffaaa2;--grade-2:#ffc28a;--grade-3:#f5d66f;--grade-4:#8ce0aa;--grade-5:#85caff}
.comic-question-result {display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
.comic-question-score {display:flex;align-items:baseline;gap:6px;color:var(--grade);font-variant-numeric:tabular-nums;line-height:1}
.comic-question-score strong {font-size:clamp(2.5rem,6vw,3.25rem);font-weight:800}
.comic-question-score>span {font-size:1.3rem;font-weight:650}
.comic-question-stars {display:flex;gap:3px;font-size:1.4rem;color:var(--grade)}
.comic-question-stars .unearned {color:rgba(255,255,255,.2)}
.comic-question-feedback p {margin:0;overflow-wrap:anywhere}
.comic-question-hint {color:var(--text-secondary);padding-top:12px;border-top:1px solid var(--border)}
.comic-question-xp {display:inline-flex;align-items:center;gap:7px;margin-inline-start:auto;padding:8px 12px;border-radius:999px;background:rgba(219,160,255,.12);color:#e3b5ff;font-size:1rem;font-weight:750;white-space:nowrap}
.comic-question-xp svg {width:20px;height:20px}
.comic-submitted-answer {display:grid;gap:8px;min-width:0}
.comic-answer-label {font-size:.78rem;font-weight:650;color:var(--muted)}
.comic-submitted-answer p {margin:0;font-size:1.15rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.comic-answer-checking {display:flex;align-items:center;gap:10px;color:var(--text-secondary);font-size:.95rem}
.comic-answer-checking .word-illustration-spinner {flex:none;width:20px;height:20px}
.comic-question-dock .error {color:#ffc4b9;overflow-wrap:anywhere}
@media(max-width:600px),(max-height:600px){.comic-interstitial {inset:78px 10px max(10px,env(safe-area-inset-bottom));gap:14px}.comic-question-panel,.comic-question-dock,.comic-question-feedback {padding:16px;border-radius:18px}.comic-question-panel {gap:10px}.comic-question-dock {gap:12px}.comic-question-dock textarea {min-height:64px}.comic-question-dock .comic-question-actions button {padding:9px 12px}.comic-question-result {gap:10px}.comic-question-stars {font-size:1.15rem}.comic-question-xp {padding:6px 10px}}

/* Complete scene and matching mask always share the same crop and crossfade. */
.roleplay-raster-scene {position:absolute;inset:0;isolation:isolate}
.roleplay-pose {position:absolute;inset:0;opacity:0;transition:opacity 180ms ease;pointer-events:none;isolation:isolate;mix-blend-mode:plus-lighter}
.roleplay-pose[data-active="true"] {opacity:1}
.roleplay-pose img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.roleplay-character-mask {mix-blend-mode:plus-lighter;opacity:0}
.roleplay-stage:not(.helper):has(.roleplay-live-controls[data-state="speaking"]) .roleplay-character-mask {animation:roleplay-character-pulse 1100ms ease-in-out infinite}
@keyframes roleplay-character-pulse {0%,100% {opacity:0} 50% {opacity:.125}}
@media(prefers-reduced-motion:reduce){.roleplay-pose{transition:none}.roleplay-stage .roleplay-character-mask{animation:none!important}.roleplay-stage:not(.helper):has(.roleplay-live-controls[data-state="speaking"]) .roleplay-character-mask{opacity:.075}}

.roleplay-stage .roleplay-repeat {min-width:56px}
@media(max-width:700px){.roleplay-live-controls .roleplay-control-row{gap:8px}}

.coach-stage-center.coach-stage-checkpoint{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;overflow:auto}
.coach-stage-checkpoint>.coach-stage-visual,.coach-stage-checkpoint>.coach-stage-words,.coach-stage-checkpoint>.coach-stage-foot{display:none}
.coach-checkpoint-card{display:grid;justify-items:center;gap:16px;width:min(100%,480px);max-height:100%;overflow:auto;padding:30px;border-radius:24px}
.coach-checkpoint-card h2,.coach-checkpoint-card p{margin:0}
.coach-checkpoint-card>svg{width:40px;height:40px;color:var(--accent)}
.coach-checkpoint-bonus{color:var(--accent);font-size:1.2rem}
.coach-checkpoint-card small{color:var(--muted)}
@media(min-width:700px) and (max-height:520px){
  .coach-checkpoint-invitation{width:min(100%,640px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px;padding:14px 20px}
  .coach-checkpoint-invitation>svg{display:none}
  .coach-checkpoint-invitation h2{grid-column:1;grid-row:1;font-size:1.2rem}
  .coach-checkpoint-invitation>p:first-of-type{grid-column:1;grid-row:2}
  .coach-checkpoint-invitation>.coach-checkpoint-bonus{grid-column:1;grid-row:3;align-self:center}
  .coach-checkpoint-invitation>p:last-of-type{grid-column:2;grid-row:1 / 3;align-self:center}
  .coach-checkpoint-invitation>.coach-stage-actions{grid-column:2;grid-row:3;padding:0;gap:8px}
  .coach-checkpoint-invitation>small{grid-column:1 / -1;grid-row:4}
}

/* Listening shares Speaking's hands-free stage and has a separate podcast flow. */
.listening-difficulties {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}
.listening-difficulties>button {display:grid;align-content:start;gap:8px;text-align:start;white-space:normal;padding:18px;border:1px solid var(--border);border-radius:16px}
.listening-difficulties>button.selected {border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text);background:var(--surface-hover)}
.listening-difficulties>button>span {font-size:.9rem;font-weight:400;line-height:1.5;color:var(--text-secondary)}
.listening-topic-preview {padding:20px;border:1px solid var(--border);border-radius:16px;display:grid;gap:14px}
/* Podcast preparation card, shown before the player mounts. */
.listening-preparation-frame{position:absolute;inset:0;z-index:1;display:grid;place-items:center;overflow:auto;padding:100px 20px 30px}
.listening-preparation{width:min(580px,100%);padding:clamp(22px,5vw,40px);display:grid;gap:18px}
.listening-preparation :is(h2,p){margin:0}
.listening-loading-progress{padding:0;background:none;border:0;text-align:start}
.listening-loading-progress .comic-loading-steps{margin:14px 0 0}
/* Listening stage: the cover art is softened behind one focused player; the
   companion docks beside it on wide screens and slides up as a sheet on phones. */
.listening-stage .loading-cover-backdrop>img{transform:scale(1.12);filter:blur(28px) saturate(1.15) brightness(.72)}
.listening-stage .loading-cover-backdrop[data-ready="true"]::after{background:linear-gradient(180deg,rgba(8,10,14,.5),rgba(8,10,14,.28) 40%,rgba(8,10,14,.62))}
.listening-stage-live{grid-template-rows:minmax(0,1fr);gap:0;padding:calc(max(12px,env(safe-area-inset-top)) + 66px) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.listening-workspace{display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:620px;min-height:0;margin:0 auto}
.listening-stage :is(.listening-player,.listening-companion,.listening-preparation){background:rgba(18,22,28,.68);backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 60px #0004;border-radius:26px}
.listening-player{display:flex;flex-direction:column;gap:18px;min-height:0;padding:clamp(18px,3vw,28px);overflow:auto;overscroll-behavior:contain}
.listening-player :is(h2,h3,p){margin:0}
.listening-player h2{font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.2;text-wrap:balance}
.listening-player h3{font-size:clamp(1.15rem,2.4vw,1.4rem);line-height:1.4}
.listening-player small{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.listening-episode-heading{display:flex;align-items:center;gap:16px}
.listening-episode-copy{display:grid;gap:6px;min-width:0}
.listening-cover{width:72px;aspect-ratio:1;flex-shrink:0;display:grid;place-items:center;overflow:hidden;border-radius:16px;background:linear-gradient(140deg,#598089,#35304d);box-shadow:0 8px 30px #0004}
.listening-cover img{width:100%;height:100%;object-fit:cover}
.listening-progress-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;font-size:.8rem;color:var(--text-secondary)}
.listening-episode-progress{width:100%;height:4px;margin:0;accent-color:#c8e9dd}
.listening-hero{display:grid;flex:1 1 auto;align-content:center;gap:14px;min-height:96px}
.listening-caption{font-size:clamp(1.2rem,2.4vw,1.55rem);font-weight:500;line-height:1.6;overflow-wrap:anywhere}
.listening-status{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-secondary)}
.listening-status-dot{width:8px;height:8px;flex:none;border-radius:50%;background:currentColor;opacity:.7}
[data-state="speaking"] .listening-status-dot{background:#c8e9dd;opacity:1;animation:coach-breathe 1.2s ease-in-out infinite}
[data-state="thinking"] .listening-status-dot{animation:coach-breathe .9s ease-in-out infinite}
.listening-note{font-size:.85rem;line-height:1.5;color:var(--text-secondary)}
.listening-welcome{gap:16px}
.listening-welcome>p:first-child{font-size:1.05rem;line-height:1.6}
.listening-welcome .switch-row{margin:0;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.listening-welcome .switch-copy small{display:block;margin-top:2px;font-size:.85rem;font-weight:400;letter-spacing:0;line-height:1.5;text-transform:none;color:var(--text-secondary)}
.listening-start{width:100%;justify-content:center;gap:10px;min-height:54px;font-size:1.05rem}
.listening-answer{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--border);border-radius:16px;background:#0006}
.listening-answer input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;color:inherit}
.listening-score{display:flex;align-items:baseline;gap:14px;color:#ffc369}
.listening-score.good{color:#8fe0ac}
.listening-score>strong,.listening-earned{font-size:2rem;font-weight:750}
.listening-score>span,.listening-earned{color:#e6a5ef}
.listening-complete{justify-items:start}
.listening-transport{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.listening-transport button{min-height:50px;justify-content:center;gap:8px;padding-inline:12px;white-space:nowrap}
.listening-speed{font-weight:500;opacity:.8}
.listening-footer{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.listening-footer button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;font-size:.85rem}
.listening-footer .listening-end{margin-inline-start:auto}
.listening-error,.listening-notice{display:grid;gap:8px;padding:12px 14px;border-radius:14px;font-size:.9rem;line-height:1.5}
.listening-error{background:#613a3a66}
.listening-notice{background:#ffffff10;color:var(--text-secondary)}
.listening-companion{display:flex;flex-direction:column;gap:14px;min-height:0;padding:18px;overflow:hidden}
.listening-panel-tabs{display:flex;flex-shrink:0;align-items:center;gap:8px}
.listening-panel-tabs>button:not(.icon-button){flex:1}
.listening-panel-tabs>.icon-button{display:none;color:var(--text)}
.listening-conversation,.listening-transcript{flex:1;min-height:80px;overflow:auto;overscroll-behavior:contain;line-height:1.65}
.listening-exchange{border-bottom:1px solid var(--border);padding-block:12px}
.listening-exchange p{margin:0 0 12px;white-space:pre-wrap}
.listening-exchange .listening-learner{padding:10px 14px;background:#ffffff10;border-radius:14px;margin-inline-start:24px}
.listening-transcript section{padding:14px;border:1px solid transparent;border-radius:16px;margin-bottom:10px}
.listening-transcript section.current{border-color:#ffffff30;background:#ffffff08}
.listening-transcript h3{font-size:.85rem;color:var(--text-secondary);margin:0 0 10px}
.listening-transcript .current-sentence{color:#dcfff3;background:#c8e9dd15;border-radius:6px}
.listening-transcript p{margin:10px 0}
.listening-quick-questions{display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0}
.listening-quick-questions button{font-size:.78rem;min-height:36px;padding:8px 12px;white-space:normal}
.listening-type{display:flex;align-items:center;gap:6px;padding:6px;border:1px solid var(--border);border-radius:16px;background:#0006;flex-shrink:0}
.listening-type input{min-width:0;flex:1;background:transparent;border:0;box-shadow:none;color:inherit}
.listening-type .icon-button{color:var(--text)}
.listening-sheet-scrim{display:none}
@media(min-width:980px){
 .listening-footer .listening-open{display:none}
 .listening-workspace{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:20px;max-width:1120px}
}
@media(max-width:979px){
 .listening-sheet-scrim{display:block;position:fixed;inset:0;z-index:4;background:#0009;opacity:0;pointer-events:none;transition:opacity .25s ease}
 .listening-companion{position:fixed;z-index:5;inset:auto 0 0;background:rgba(18,22,28,.9);max-height:min(84dvh,calc(100dvh - 72px));padding-bottom:max(18px,env(safe-area-inset-bottom));border-bottom:0;border-radius:24px 24px 0 0;transform:translateY(105%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s}
 .listening-workspace[data-sheet="true"] .listening-companion{transform:none;visibility:visible;transition:transform .3s var(--ease)}
 .listening-workspace[data-sheet="true"] .listening-sheet-scrim{opacity:1;pointer-events:auto}
 .listening-panel-tabs>.icon-button{display:inline-grid}
}
@media(max-width:600px){
 .listening-stage-live{padding:calc(max(12px,env(safe-area-inset-top)) + 58px) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
 .listening-player{padding:16px;gap:14px;border-radius:22px}
 .listening-cover{width:64px;border-radius:14px}
 .listening-transport{grid-template-columns:minmax(0,1.5fr) auto auto}
 .listening-transport button{padding-inline:10px}
 .listening-difficulties{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.listening-companion,.listening-sheet-scrim{transition:none}.listening-status-dot{animation:none !important}}
@media(prefers-reduced-transparency:reduce){.listening-stage :is(.listening-player,.listening-companion,.listening-preparation){background:#232b31;backdrop-filter:none;-webkit-backdrop-filter:none}}


@media (max-width: 760px) and (prefers-reduced-transparency: reduce) {
  .sidebar::before { background: var(--sidebar); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- Channels and the feed ---------- */
.home-feed-sections { gap: 28px; }
.feed-section .section-heading { margin-bottom: 14px; }
/* Feed tiles: one column by default, two on ordinary windows, three only when
   the Home column is far wider than its old 1120px cap. Standard cards keep the
   fixed discovery height; compact cards use the aspect ratio defined below. */
.feed-grid { --discovery-card-height: 30rem; container: content-tiles / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@container discovery-layout (min-width: 620px) { .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container discovery-layout (min-width: 1360px) { .feed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feed-grid :is(.home-recent-card, .home-suggestion, .feed-flashcards-card, .feed-preparing) { height: var(--discovery-card-height); min-height: 0; }
.feed-grid .home-suggestion-tile { height: 100%; }
.feed-card { display: grid; gap: 8px; min-width: 0; }
.feed-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 0 4px; }
.feed-card-actions { display: flex; align-items: center; gap: 6px; }
.feed-content { display: grid; gap: 8px; min-width: 0; }
.feed-eyebrow-activity { color: var(--muted); font-weight: 550; }
.feed-loading, .feed-preparing { min-height: 160px; }
.feed-empty { display: grid; justify-items: center; gap: 12px; }
.feed-empty .empty-state { padding: 16px; }
.feed-empty-action { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.feed-flashcards-card { position: relative; align-content: center; justify-items: center; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.feed-flashcards-art { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); opacity: .18; pointer-events: none; }
.feed-flashcards-card .shell-icon { flex: none; }
.channel-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; min-height: 28px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: .78rem; font-weight: 650; text-decoration: none; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.channel-chip:hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text); }
.channel-chip-own { cursor: default; }
.channel-chip-icon { font-size: .95rem; line-height: 1; }
.channel-chip-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-chip-large { width: fit-content; font-size: .9rem; min-height: 44px; padding: 10px 14px; }
.channels-page, .channel-page { display: grid; gap: 24px; min-width: 0; }
.lists-page { display: grid; gap: 32px; min-width: 0; }
.lists-section { display: grid; gap: 16px; min-width: 0; }
.lists-section-heading { margin: 0; font-size: 1.35rem; }
.lists-view-all { color: inherit; text-decoration: none; justify-content: space-between; }
.lists-view-all .vocabulary-collection-copy { display: grid; gap: 4px; }
.lists-view-all small { font-size: .875rem; }
.lists-page .vocabulary-collection-copy p { margin-bottom: 0; }
.lists-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); max-width: 760px; }
.channels-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.channels-toolbar > button { display: inline-flex; align-items: center; gap: 8px; }
.channel-list { display: grid; gap: 12px; }
.channel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.channel-row-muted { background: color-mix(in srgb, var(--surface) 72%, transparent); border-color: color-mix(in srgb, var(--border) 72%, transparent); }
.channel-row-muted .channel-row-open { opacity: .72; }
.channel-row-open { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-width: 0; padding: 8px; border-radius: 12px; color: inherit; text-decoration: none; }
.channel-row-open:hover { background: var(--surface-hover); }
.channel-row-icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--surface-subtle); color: var(--text-secondary); font-size: 1.5rem; line-height: 1; }
.channel-row-copy { display: grid; gap: 2px; min-width: 0; }
.channel-row-copy strong { overflow-wrap: anywhere; }
.channel-row-switch { margin: 0; }
.channel-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; }
.channel-header-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.channel-header-icon { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 20px; background: var(--surface-subtle); color: var(--text-secondary); font-size: 2rem; line-height: 1; }
.channel-header-copy { display: grid; gap: 4px; min-width: 0; }
.channel-header-copy h1 { margin: 0; overflow-wrap: anywhere; }
.channel-header-copy .home-hero-eyebrow { margin: 0; }
.channel-topic { margin: 0; max-width: 60ch; }
.channel-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.channel-header-actions > button { display: inline-flex; align-items: center; gap: 8px; }
.topic-art-style { margin-block: 16px 24px; }
.art-style-field { display: grid; gap: 7px; width: min(100%, 480px); min-width: 0; }
.art-style-label { color: var(--text-secondary); font-size: .82rem; font-weight: 650; }
.art-style-picker { position: relative; }
.art-style-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 10px; text-align: start; }
.art-style-trigger span { flex: 1; }
.art-style-trigger img,.art-style-option img { display: block; flex: none; border-radius: 8px; object-fit: cover; }
.art-style-options { position: relative; margin-top: 4px; max-height: min(420px, 50dvh); overflow-y: auto; overscroll-behavior: contain; padding: 7px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.art-style-option { display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: start; }
.art-style-option span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.art-style-option svg { flex: none; }
.art-style-option:hover,.art-style-option.selected { background: var(--surface-subtle); }
.art-style-option:focus-visible,.art-style-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.channel-follow-switch { margin: 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.channel-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.channel-stat { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: .82rem; font-weight: 600; text-decoration: none; }
.channel-stat:hover { border-color: var(--border-strong); color: var(--text); }
.channel-filter-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.channel-filter { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; }
.channel-filter select { width: auto; min-width: 180px; }
.channel-filter-row .secondary, .channel-ideas-menu > button { display: inline-flex; align-items: center; gap: 6px; }
.channel-ideas-menu { position: relative; }
.channel-section .section-heading { margin-bottom: 12px; }
.channel-empty-note { margin: 0 0 12px; }
.channel-failure { display: grid; gap: 8px; margin-bottom: 12px; }
.channel-create-row { display: flex; flex-wrap: wrap; gap: 10px; }
.channel-create-row > button { display: inline-flex; align-items: center; gap: 8px; }
.channel-detach { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; }
.channel-editor { display: grid; gap: 14px; }
.channel-editor label { display: grid; gap: 6px; }
.channel-editor textarea { width: 100%; min-width: 0; resize: vertical; }
.channel-editor-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.channel-editor-delete { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: auto; }
.channel-icon-input { width: 80px; text-align: center; font-size: 1.2rem; }
.channel-create-icon {display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.channel-create-icon-preview {display:grid;place-items:center;flex:none;width:80px;height:80px;border:1px solid var(--border);border-radius:16px;background:var(--surface-subtle);}
.channel-create-icon-preview>.word-illustration-spinner {width:28px;height:28px;}
.channel-create-icon-controls {display:grid;gap:8px;}
.channel-suggest-form {display:grid;gap:14px;}
.channel-suggest-form p {margin:0;}
.profile-interests-help { margin: -6px 0 8px; font-size: .88rem; }
@media (max-width: 600px) {
  .channel-row { grid-template-columns: minmax(0, 1fr); }
  .channel-header-icon { width: 52px; height: 52px; font-size: 1.6rem; }
}

/* Discovery before signup shares the same channel controls as the signed-in feed. */
.channel-follow-button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);padding:.55rem .9rem;min-width:116px;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s}
.channel-follow-button.following{background:var(--text);color:var(--bg);border-color:var(--text)}
.channel-follow-button:hover:not(:disabled){background:var(--surface-hover);color:var(--text);border-color:var(--accent);transform:translateY(-1px)}
.channel-follow-button.following:hover:not(:disabled){background:var(--accent-hover);color:var(--accent-text);border-color:var(--accent-hover)}
.channel-follow-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.channel-vector-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.5em}
.channel-vector-icon img{width:100%;height:100%;object-fit:contain}
.channel-row-description{display:block;color:var(--muted);font-size:.9rem;line-height:1.45;margin:.25rem 0 .4rem}
.setup-channel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0}
.setup-channel{position:relative;min-width:0;overflow-wrap:anywhere;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;border:1px solid var(--border);border-radius:20px;padding:1.25rem;background:var(--surface);transition:background .15s,border-color .15s,opacity .15s}
.setup-channel.selected{border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}
.setup-channel h3,.setup-content-copy h3{margin:0;font-size:1.12rem;line-height:1.3}
.setup-channel p{margin:0 0 .5rem;color:var(--muted);line-height:1.55;font-size:.94rem;flex:1}
.setup-channel .channel-follow-button{margin-top:auto;font-weight:650}
.setup-channel .setup-channel-toggle{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:none;box-shadow:none;cursor:pointer;transform:none}
.setup-channel .setup-channel-toggle:is(:hover,:active,:focus-visible){background:none;box-shadow:none;outline:none;transform:none}
.setup-channel .setup-channel-toggle:disabled{cursor:default}
.setup-channel:has(>.setup-channel-toggle:disabled) .channel-follow-button{opacity:.55}
.setup-channel:has(>.setup-channel-toggle:hover:not(:disabled)){background:var(--surface-hover);border-color:var(--accent)}
.setup-channel:has(>.setup-channel-toggle:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.setup-channel .error-details-button{position:relative;z-index:2}
.setup-channel-icon-loading{display:grid;place-items:center;width:48px;height:48px;flex:none}
.setup-progress{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;list-style:none;padding:1rem 0;margin:0;color:var(--muted);font-size:.9rem}
.setup-progress li{display:flex;align-items:center;gap:.6rem}.setup-progress .done{color:var(--text)}
.setup-progress .word-illustration-spinner{width:16px;height:16px;flex-shrink:0}
.setup-step-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.5rem}
.setup-step-actions .onboarding-continue{margin-top:0}
.setup-content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.25rem 0}
.setup-content-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.setup-content-art{flex:none;aspect-ratio:4/3;display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,var(--surface)),var(--surface));overflow:hidden}
.setup-content-art img{grid-area:1/1;width:100%;height:100%;object-fit:cover}
.setup-content-art>.word-illustration-spinner{grid-area:1/1;z-index:1}
.setup-content-copy{flex:1;min-width:0;overflow-wrap:anywhere;padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.setup-content-title-loading{display:flex;align-items:center;min-height:2.8em}
.setup-content-channel{margin-top:auto;display:flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.8rem;line-height:1.35}
.setup-content-channel .channel-vector-icon{flex:none}
.setup-content-type{display:flex;align-items:center;gap:.35rem;color:var(--muted);font-size:.75rem}
.signup-preview{border-top:1px solid var(--border);margin-top:2rem;padding-top:1.5rem}
.signup-preview h2{font-size:1.45rem;margin:.5rem 0}.signup-preview .setup-content-grid{grid-template-columns:1fr}
.signup-preview .setup-content-card{display:grid;grid-template-columns:120px 1fr}.signup-preview .setup-content-art{aspect-ratio:auto;height:100%;min-height:130px}.signup-preview .setup-content-copy{min-width:0;overflow-wrap:anywhere;padding:.9rem}
.setup-retry{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin:1rem 0}
@media(max-width:650px){.setup-channel-grid,.setup-content-grid{grid-template-columns:1fr}.setup-step-actions{flex-wrap:wrap}.setup-step-actions .onboarding-continue{flex:1}.setup-content-card{display:grid;grid-template-columns:110px 1fr}.setup-content-art{aspect-ratio:auto;height:100%;min-height:150px}.setup-channel{padding:1rem}.channel-row-description{font-size:.82rem}}

.activation-tile{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr);gap:2rem;padding:clamp(1.4rem,4vw,2.5rem);margin:0 0 2rem;border-color:color-mix(in srgb,var(--accent) 45%,var(--border));background:linear-gradient(125deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface));border-radius:24px}
.activation-copy h2{font-size:clamp(1.4rem,2.7vw,2rem);line-height:1.2;margin:.6rem 0}.activation-copy p{max-width:52ch;line-height:1.65;color:var(--muted)}.activation-subscribe{margin-top:.5rem}
.activation-redeem{align-self:center;display:grid;gap:.75rem;min-width:0}.activation-redeem label{font-weight:650}.activation-code-row{display:flex;flex-wrap:wrap;gap:.6rem}.activation-code-row input{flex:1;min-width:140px;width:100%}.activation-redeem small{line-height:1.5}.activation-code-row button{white-space:nowrap}
.activation-card-label{position:absolute;left:12px;bottom:12px;right:12px;width:max-content;max-width:calc(100% - 24px);padding:6px 10px;border-radius:999px;background:rgba(15,20,30,.8);color:#fff;font-size:.75rem;backdrop-filter:blur(12px)}
.feed-idea .home-suggestion-card:disabled:not([aria-busy="true"]){opacity:1;cursor:default}
@media(max-width:720px){.activation-tile{grid-template-columns:1fr;gap:1.25rem}.activation-code-row button{flex:1}.activation-copy p{margin-bottom:.5rem}}

.page-history-back { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; margin: 0 0 14px; padding: 4px 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: .86rem; font-weight: 550; text-align: start; box-shadow: none; }
.page-history-back:hover { background: transparent; color: var(--text); }
.page-history-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.page-history-back > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account-subscription-plan { margin-inline-start: auto; color: var(--muted); font-size: .85rem; font-weight: 400; text-align: end; overflow-wrap: anywhere; }

/* Saved activity completion, anchored to the thumbnail like watch progress. */
.home-activity-progress { position:absolute;inset:auto 0 0;height:5px;z-index:4;background:rgba(0,0,0,.45);direction:ltr;pointer-events:none; }
.home-activity-progress > span { display:block;height:100%;background:var(--xp);box-shadow:0 0 1px rgba(0,0,0,.35); }

.feed-flashcards-art { position:relative; }

.feed-generate-channels {display:grid;justify-items:center;gap:12px;padding:32px 24px;margin:0 0 24px;text-align:center;}
.feed-generate-channels h3,.feed-generate-channels p {margin:0;}
.feed-generate-channels>button {display:flex;align-items:center;justify-content:center;gap:12px;min-height:60px;width:min(100%,420px);font-size:1.15rem;}
.channel-discovery-actions {display:flex;justify-content:flex-end;margin-top:24px;}
.channel-discovery-popup {max-width:1100px;}

.setup-discovery:has(> .channel-discovery-loading) {display:flex;flex-direction:column;min-height:min(600px,calc(100dvh - 220px));}
.channel-discovery-loading {display:grid;justify-items:center;gap:10px;margin-top:auto;padding:20px 8px 0;text-align:center;}
.channel-discovery-loading-label {display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:.9rem;}
.channel-discovery-loading>strong {font-size:1rem;line-height:1.5;max-width:36rem;}
.channel-discovery-spinner {display:block;flex:none;width:20px;height:20px;border-width:2px;}
.channel-discovery-progress {position:relative;width:min(100%,420px);height:8px;overflow:hidden;border-radius:999px;background:var(--surface-subtle);}
.channel-discovery-progress-fill {display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width .25s ease;}
.channel-discovery-progress-fill.indeterminate {width:35%;animation:channel-discovery-progress 1.4s ease-in-out infinite;}
.channel-discovery-save-spinner {display:inline-block;width:16px;height:16px;vertical-align:middle;margin-inline-end:8px;}
@keyframes channel-discovery-progress {from{transform:translateX(-110%)}to{transform:translateX(310%)}}
@media(prefers-reduced-motion:reduce){.channel-discovery-progress-fill{transition:none}.channel-discovery-progress-fill.indeterminate{animation:none;transform:translateX(90%)}}

.channel-more-footer {display:grid;justify-items:center;gap:12px;margin:24px 0;min-height:44px;}
.channel-more-footer>button,.channel-more-loading {display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;}
.channel-more-loading {color:var(--muted);}
.channel-more-loading>.word-illustration-spinner {display:inline-block;flex:none;width:22px;height:22px;}
.channel-more-form {display:grid;gap:14px;max-width:360px;padding:4px;}
.channel-more-form label {display:grid;gap:8px;}
.channel-more-form p {margin:0;font-size:.88rem;line-height:1.5;}
.channel-more-form input {width:100%;}
.channel-more-footer>.error {justify-self:stretch;}

/* Generation sits above the caption in both standard and image tile layouts. */
.activity-preparation-capsule {
  position:absolute; z-index:3; inset-inline:12px; bottom:12px;
  display:grid; gap:7px; padding:11px 14px; border-radius:22px;
  background:rgba(25,25,25,.88); color:#fff; border:1px solid #ffffff40;
  box-shadow:0 3px 18px #0003; backdrop-filter:blur(16px);
  text-align:start; font-size:.83rem; line-height:1.35; font-weight:600;
}
.activity-preparation-heading {display:flex; align-items:center; gap:9px; min-width:0;}
.activity-preparation-heading>span:last-child {overflow-wrap:anywhere;}
.activity-preparation-capsule .word-illustration-spinner {display:inline-block; flex:none; width:17px; height:17px;}
.activity-preparation-capsule progress {display:block; width:100%; height:5px; border:0; border-radius:8px; overflow:hidden; accent-color:#fff;}
.activity-preparation-capsule progress::-webkit-progress-bar {background:#ffffff35;}
.activity-preparation-capsule progress::-webkit-progress-value {background:#fff; border-radius:8px;}
.activity-preparation-capsule.failed {border-color:#f5b5a580; color:#ffd0c3;}
/* Share the thumbnail's grid row, so caption height never needs to be guessed. */
.home-content-card > .activity-preparation-capsule {
  position:relative; grid-row:1; grid-column:1; align-self:end; justify-self:stretch;
  inset:auto; margin:0 12px 12px; pointer-events:none;
}
.home-content-card:has(.activity-preparation-capsule) {grid-template-columns:minmax(0,1fr);}
.home-content-card > :is(.home-suggestion-image,.home-recent-art) {grid-column:1;grid-row:1;}
.home-content-card > .home-content-copy {grid-column:1;}
.home-history-art {position:relative;}

/* Compact activity tiles are slightly wider than tall at every column width.
   Size the outer suggestion wrapper so its badge row and title stay in subgrid. */
[data-content-style="image"] :is(.home-content-grid,.library-create-grid) > :is(.home-content-card,.home-suggestion),
[data-content-style="image"] .feed-grid :is(.home-recent-card,.home-suggestion,.feed-flashcards-card,.feed-preparing) {
  height:auto; min-height:0; aspect-ratio:10 / 9;
}
[data-content-style="image"] :is(.home-content-grid,.library-create-grid) > .home-create-column {height:100%;align-self:stretch;}

.home-language-controls {display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;min-width:0;}
.home-language-controls>.home-language-menu {min-width:0;max-width:100%;}
.home-target-level {min-width:0;max-width:100%;}
.home-target-level-control {display:flex;align-items:center;gap:8px;}
.home-target-level-button {display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-width:90px;min-height:40px;padding:7px 12px;border-radius:12px;font-size:.9rem;}
.home-target-level .word-illustration-spinner {display:inline-block;width:16px;height:16px;flex:none;}
.home-target-level-error {display:flex;align-items:center;gap:8px;max-width:300px;margin-top:6px;font-size:.8rem;}

/* Choose content difficulty with enough context to make an informed choice. */
.target-level-popup .reader-popup-body {display:grid;gap:18px;}
.target-level-explanation {margin:0;color:var(--text-secondary);font-size:.9rem;line-height:1.6;}
.target-level-options {display:grid;gap:8px;}
button.target-level-option {display:flex;align-items:center;gap:14px;width:100%;padding:14px;text-align:start;white-space:normal;}
.target-level-code {display:grid;place-items:center;flex:0 0 auto;min-width:48px;padding-inline:6px;box-sizing:border-box;white-space:nowrap;min-height:42px;border-radius:10px;background:var(--surface-subtle);font-size:1rem;font-weight:700;}
.target-level-copy {display:grid;gap:4px;flex:1;min-width:0;}
.target-level-copy strong {font-size:.95rem;}
.target-level-copy small {color:var(--text-secondary);font-size:.82rem;font-weight:400;line-height:1.45;}
.target-level-selected {display:flex;flex:0 0 20px;}
button.target-level-option[aria-pressed="true"], button.target-level-option[aria-pressed="true"]:hover {background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent);}
button.target-level-option[aria-pressed="true"] .target-level-code {background:var(--surface);}
@media(max-width:480px) {.target-level-popup .reader-popup-body {padding:16px;}button.target-level-option {gap:10px;padding:12px;}}


/* Caption visibility and opacity are independent of whether it overlays artwork. */
[data-content-style="standard"] {--tile-caption-height:14rem;}
[data-content-style="image"] {--tile-caption-height:6.5rem;}
[data-content-style="standard"][data-tile-descriptions="false"] {--tile-caption-height:8rem;}
[data-content-style="image"][data-tile-descriptions="true"] {--tile-caption-height:10.5rem;}
[data-tile-descriptions="false"] .home-content-copy>.home-content-description {display:none;}
.home-dashboard [data-content-style] :is(.home-recent-card,.home-suggestion-card),
[data-content-style] :is(.home-recent-card,.home-suggestion-card) {background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;}
[data-content-style="standard"] :is(.home-recent-card,.home-suggestion-card) {position:relative;isolation:isolate;}
[data-content-style="standard"] :is(.home-recent-card,.home-suggestion-card)::after {
  content:"";position:absolute;inset:auto 0 0;height:var(--tile-caption-height);pointer-events:none;
  background:color-mix(in srgb,var(--surface) var(--tile-info-opacity,76%),transparent);
  backdrop-filter:blur(calc(var(--tile-info-alpha,.76) * 14px));-webkit-backdrop-filter:blur(calc(var(--tile-info-alpha,.76) * 14px));
}
[data-content-style="standard"] :is(.home-recent-card,.home-suggestion-card)>.home-content-copy {position:relative;z-index:1;}

/* An interactive podcast: one quiet player, persistent transcript, contextual controls. */
.podcast-stage{display:grid;place-items:stretch center}
.podcast-player{width:min(820px,100%);min-height:0;display:flex;flex-direction:column;gap:14px;padding:clamp(16px,3vw,28px);border-radius:28px;background:rgba(18,22,28,.78);border:1px solid #ffffff24;backdrop-filter:blur(28px);box-shadow:0 24px 70px #0003;overflow:hidden}
.podcast-heading{display:flex;align-items:center;gap:14px;flex-shrink:0}
.podcast-heading-copy{flex:1;min-width:0}
.podcast-heading h2{font-size:clamp(1.05rem,2.6vw,1.5rem);line-height:1.25;margin:0 0 4px;text-wrap:balance}
.podcast-cover{width:56px;aspect-ratio:1;object-fit:cover;border-radius:14px}
.podcast-heading .icon-button{flex:none;color:inherit}
.podcast-section-button{padding:4px 0;min-height:30px;display:flex;gap:6px;max-width:100%;font-size:.82rem;text-align:start;color:var(--text-secondary)}
.podcast-section-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podcast-section-button svg{flex:none}
.podcast-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px;border-radius:16px;background:#0003;flex-shrink:0}
.podcast-modes button{border-radius:12px;min-height:38px;padding:8px;font-size:.85rem;white-space:normal}
.podcast-modes button[aria-pressed="true"]{background:#ffffff20;color:#fff;box-shadow:0 2px 8px #0002}
.podcast-transcript{flex:1;min-height:100px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:10px 6px 28px;line-height:1.75;overflow-wrap:anywhere;scroll-behavior:smooth}
.podcast-welcome{display:grid;align-content:center;justify-items:center;min-height:100%;text-align:center;gap:20px;padding:20px 4px}
.podcast-welcome p{margin:0;max-width:52ch}
.podcast-welcome>p:first-of-type{font-size:1.15rem}
.podcast-exchange:empty{display:none}
.podcast-line{padding:5px 12px;border-radius:12px;font-size:clamp(1rem,2vw,1.14rem);transition:background .2s,color .2s}
.podcast-line p{margin:0}
.podcast-line[data-active="true"]{background:#c8e9dd12;color:#dcfff3}
.podcast-line[data-target="true"]{font-weight:500}
.podcast-analyze{display:inline;padding:0;border:0;border-radius:4px;background:transparent;box-shadow:none;color:inherit;font:inherit;line-height:inherit;text-align:inherit;white-space:normal;min-height:0}
.podcast-analyze:hover{background:transparent;text-decoration:underline;text-decoration-color:#ffffff50;text-underline-offset:5px}
.podcast-listener{margin:18px 0 12px 15%;padding:10px 16px;border-radius:16px;background:#ffffff14;color:var(--text-secondary)}
.podcast-line .inline-reader-loading{display:inline-block;width:14px;height:14px;margin-inline-start:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;font-size:0;animation:coach-spin .8s linear infinite}
.podcast-controls{display:flex;justify-content:center;align-items:center;gap:10px;flex-shrink:0}
.podcast-controls>button{min-height:40px;font-size:.85rem;padding:8px 14px;white-space:normal}
.podcast-controls>.podcast-play{border-radius:50%;width:52px;height:52px;padding:12px;flex:none}
.podcast-status{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.8rem;color:var(--text-secondary);min-height:20px}
.podcast-review{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.podcast-review button{display:flex;gap:8px;align-items:center;font-size:.9rem}
.podcast-input{margin-top:2px}
.podcast-input button[aria-pressed="true"]{background:#c8e9dd30;color:#dcfff3}
.podcast-input input{font-size:1rem}
.podcast-outline{padding-inline-start:24px;max-width:440px}
.podcast-outline li{padding:12px;border-radius:12px}
.podcast-outline li.current{background:var(--surface-hover)}
.podcast-outline p{font-size:.88rem;color:var(--text-secondary);line-height:1.5;margin:6px 0 0}
.podcast-options{display:grid;gap:8px;min-width:220px}
.podcast-options>button{text-align:start;justify-content:flex-start}
.podcast-options .switch-row{padding:10px 0;margin:0;font-size:.9rem}
.podcast-finished{text-align:center;color:#c8e9dd;padding:24px}
@media(max-width:600px){.podcast-player{gap:10px;padding:14px;border-radius:22px}.podcast-cover{width:44px}.podcast-heading{gap:10px}.podcast-controls{gap:6px}.podcast-controls>button{padding:8px 10px}.podcast-line{padding-inline:5px}.podcast-input{gap:2px}.podcast-input button{padding:8px}}
@media(prefers-reduced-motion:reduce){.podcast-transcript{scroll-behavior:auto}.podcast-line{transition:none}.podcast-line .inline-reader-loading{animation:none}}

.listening-stage > .reader-popup-heading h2{visibility:hidden}
@media(max-height:540px){.podcast-player{overflow-y:auto}.podcast-transcript{flex:0 0 180px;min-height:180px}}

/* Topics: one coherent learning unit, with a clear ordered path through it. */
.topic-card{position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;height:auto;min-height:0;aspect-ratio:4/3;padding:0;overflow:hidden;color:var(--text);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.topic-card.surface{margin:0}
.topic-card:hover{border-color:var(--accent);box-shadow:0 4px 18px color-mix(in srgb,var(--text) 12%,transparent)}
.topic-card-art{position:absolute;inset:0;background:color-mix(in srgb,var(--accent) 9%,var(--surface));overflow:hidden}
/* Fill the tile directly, avoiding intrinsic grid sizing of percentage-height images in Safari. */
.topic-card-art>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.topic-card-art>.word-illustration-spinner{position:absolute;inset:0;margin:auto;z-index:1}
.topic-cover-loading>img,.topic-cover-loading>.word-illustration-spinner {grid-area:1/1;}
.topic-cover-loading>.word-illustration-spinner {z-index:1;}
.topic-cover-loading>img {width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.topic-card-image{position:relative;z-index:2;flex:1;min-height:0}
.topic-card-suggested{position:absolute;inset-block-end:.75rem;inset-inline-end:1.1rem;max-width:calc(100% - 2.2rem);display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border:1px solid #d7c3f4;border-radius:999px;background:#e8ddff;color:#513a7b;box-shadow:0 1px 6px #0002;font-size:.75rem;font-weight:650;line-height:1.25;pointer-events:none}
.topic-card-suggested>.shell-icon{flex:none}
.topic-card-type{position:absolute;z-index:2;inset-block-start:1rem;inset-inline-end:1.1rem;max-width:calc(100% - 2.2rem);display:flex;align-items:center;justify-content:flex-end;gap:.4rem;color:#fff;font-size:.8rem;font-weight:650;text-align:end;text-shadow:0 1px 3px rgb(0 0 0 / .95),0 2px 8px rgb(0 0 0 / .8);pointer-events:none}
.topic-card-type>.shell-icon{flex:none;filter:drop-shadow(0 1px 3px rgb(0 0 0 / .95))}
.topic-card-copy{position:relative;z-index:1;box-sizing:border-box;flex:none;margin-top:auto;padding:.85rem 1.2rem;display:flex;flex-direction:column;background:color-mix(in srgb,var(--surface) var(--tile-info-opacity,76%),transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
.topic-card-copy h3{margin:0;height:2.6em;font-size:1.1rem;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.topic-loading {display:flex;align-items:center;gap:12px;padding:24px;font-size:1rem}
.topic-loading .word-illustration-spinner {display:block;flex:none}
.topic-header{display:flex;align-items:center;gap:2rem;margin:1.5rem 0;padding:clamp(1.2rem,3vw,2rem);border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:var(--shadow);color:var(--text)}.topic-heading{min-width:0;overflow-wrap:anywhere}.topic-heading h1{margin:.4rem 0}.topic-heading p{margin:.6rem 0 0;line-height:1.6;color:var(--text-secondary)}
@supports ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))){.topic-header{background:color-mix(in srgb,var(--surface) var(--home-glass-opacity,82%),transparent);backdrop-filter:blur(20px) saturate(1.1);-webkit-backdrop-filter:blur(20px) saturate(1.1)}}
@media(prefers-reduced-transparency:reduce){.topic-header{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
.topic-cover{width:12rem;height:12rem;object-fit:cover;border-radius:24px;flex:none}
.topic-introduction{padding:1.6rem}.topic-introduction ol{display:grid;gap:1rem;padding-inline-start:1.5rem;margin:1.5rem 0}.topic-introduction li svg{vertical-align:middle;margin-inline-end:.7rem}
.topic-review-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin:1.5rem 0}.topic-review-bar .channel-stats{margin:0}
.topic-activities{display:flex;flex-direction:column;gap:1rem}.topic-activity{display:grid;grid-template-columns:7rem minmax(0,1fr) auto;align-items:center;gap:1.5rem;width:100%;padding:1.1rem;text-align:start;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:18px;white-space:normal}
.topic-activity:hover:not(:disabled){color:var(--text);background:color-mix(in srgb,var(--accent) 6%,var(--surface));border-color:var(--accent)}
/* Keep unavailable activities readable; the global button hover also matches disabled buttons. */
.topic-activity:disabled{opacity:1;color:var(--text-secondary);background:var(--surface);border-color:var(--border);cursor:default}
.topic-activity-icon{display:grid;place-items:center;width:7rem;height:7rem;border-radius:12px;background:var(--surface-subtle);color:var(--text-secondary)}.topic-activity-icon>svg{width:3.5rem;height:3.5rem}
.topic-activity-copy{display:flex;flex-direction:column;gap:.5rem;min-width:0;font-weight:400;line-height:1.5}.topic-activity-copy strong{font-size:1.1rem}.topic-activity-labels{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}.topic-activity-status{display:flex;align-items:center;gap:.4rem;font-size:.85rem}.topic-recommended{border-radius:999px;background:#d8c7ff;color:#352052;padding:.25rem .65rem;font-size:.75rem;font-weight:700}.topic-preparing{display:flex;align-items:center;gap:.65rem}
@media(max-width:600px){.topic-header{flex-direction:column;align-items:flex-start;gap:1rem}.topic-cover{width:5rem;height:5rem;border-radius:12px}.topic-activity{grid-template-columns:3.5rem minmax(0,1fr);gap:.8rem;padding:.8rem}.topic-activity-icon{width:3.5rem;height:3.5rem}.topic-activity>svg:last-child{display:none}.topic-activity-icon>svg{width:2rem;height:2rem}.topic-page .section-heading{flex-wrap:wrap;gap:1rem}.topic-more .form-actions{flex-wrap:wrap}}

/* Account setup uses the same continuous full-screen surface as language choice. */
.setup-journey { --surface:rgba(255,255,255,.06); --surface-subtle:rgba(255,255,255,.04); --surface-hover:rgba(255,255,255,.12); --border:rgba(255,255,255,.16); --border-strong:rgba(255,255,255,.32); }
/* Floating forms need opaque surfaces above the translucent setup cards. */
.setup-journey .anchored-popover { --surface:#1c1c1c; --surface-subtle:#242424; --surface-hover:#2b2b2b; }
.setup-journey > .reader-popup-body { overflow-y:auto; scrollbar-gutter:stable both-edges; }
.setup-journey > .reader-popup-body:has(.onboarding-shell[data-language-page="true"]) { overflow:hidden; scrollbar-gutter:stable both-edges; }
.setup-journey .entry-shell { background:none; min-height:0; width:min(1040px,100%); margin:0 auto; padding:90px 0 20px; color:var(--text); }
.setup-journey .onboarding-card { width:100%; overflow:visible; }
.setup-journey .onboarding-flow { display:block; }
.setup-journey :is(.onboarding-active-question,.onboarding-review-screen,.auth-card) { background:none; border:0; box-shadow:none; border-radius:0; padding:24px 0; margin:0; }
.setup-journey .onboarding-question h1,.setup-journey .onboarding-review-screen h1 { font-size:clamp(30px,4.6vw,48px); max-width:860px; }
.setup-journey .onboarding-question h1:focus { outline:none; }
.setup-journey .setup-page-back { display:inline-flex; align-items:center; gap:10px; color:var(--text-secondary); padding:8px 0; margin:0 0 14px; box-shadow:none; background:none; }
.setup-journey .setup-page-back:hover { color:var(--text); }
.setup-journey .setup-step-actions { justify-content:flex-end; }
.setup-journey .entry-return { width:min(600px,100%); margin:0 auto; }
.setup-journey .auth-card { width:100%; }
.setup-journey .onboarding-shell[data-language-page="true"] { flex:1 1 0; width:100%; height:auto; min-height:0; padding:0; overflow:hidden; }
.setup-journey .onboarding-shell[data-language-page="true"] :is(.onboarding-card,.onboarding-flow) { display:flex; flex-direction:column; flex:1 1 0; height:auto; min-height:0; }
.setup-journey .onboarding-shell[data-language-page="true"] .onboarding-notice { display:none; }
.setup-journey .setup-language-back { position:absolute; top:24px; left:28px; z-index:3; max-width:calc(100% - 130px); }
@media(max-height:600px) {
  .language-journey-search { padding-top:80px; }
  .language-journey-search > label { font-size:18px; margin-bottom:8px; }
  .language-journey .language-journey-input { font-size:30px; padding-block:6px 10px; }
  .language-journey .language-journey-view-all { margin-top:8px; }
  .language-journey-results { margin-top:14px; }
}

.topic-cover-loading {display:grid;place-items:center;background:var(--surface-subtle);}

/* Activity rows use type icons; the topic identity card shows cover art. */
.topic-activity {position:relative;isolation:isolate;overflow:hidden;}
.topic-activity:disabled::after {content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:rgba(var(--tile-theme-rgb),.25);}
.topic-more {margin-top:16px;}
.topic-activities > .topic-more {margin-top:0;}
.topic-activities-divider {width:100%;border:0;border-top:1px solid var(--border-strong);margin:1rem 0;}
.topic-more .channel-more-form select {padding-inline-end:38px;}

/* Flashcard setup controls remain comfortably tappable on small screens. */
.flashcard-mode-toggles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.flashcard-mode-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 18px; border-radius: 16px; }
.flashcard-mode-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.flashcard-word-count { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; }
.flashcard-autoplay { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.study-dock .flashcard-begin { min-width: min(320px, 65vw); min-height: 62px; padding: 18px 36px; font-size: 1.1rem; }
.flashcard-selection-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.flashcard-word-selection { display: grid; gap: 8px; max-height: min(52vh, 440px); overflow-y: auto; text-align: start; }
.flashcard-word-selection .option-row { align-items: center; padding: 12px; margin: 0; min-height: 56px; }
.flashcard-word-selection .flashcard-session-word { min-width: 0; overflow-wrap: anywhere; }
.flashcard-visualize { margin: 16px auto; min-height: 44px; }
.study-scene:has(.study-card[data-kind="setup"]) { grid-template-rows: minmax(0, 1fr) auto; }
/* Loading, preparation, ready, and retry share one reserved status area. */
.study-card[data-kind="setup"] { animation: none; }
.study-scene:has(.flashcard-setup-welcome) > .study-dock { animation: none; }
.flashcard-setup-welcome .flashcard-word-count { width: min(100%, 240px); font-variant-numeric: tabular-nums; }
.flashcard-setup-status { display: grid; gap: 10px; flex: none; width: min(100%, 440px); font-size: .95rem; line-height: 1.65; }
.flashcard-setup-status p { margin: 0; }
.flashcard-setup-message { display: grid; align-items: center; min-height: 3.3em; }
.flashcard-setup-state { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.flashcard-setup-status [data-active="false"] { visibility: hidden; pointer-events: none; }
.flashcard-setup-status .study-ready { animation: none; }
.flashcard-setup-status .study-ready[data-active="true"] { animation: study-ready-out .4s ease 1s forwards; }
.flashcard-setup-progress { width: 100%; height: 6px; margin: 0; }
.flashcard-setup-help { color: var(--text-secondary); }

@media (max-width: 480px) {
    .study-card[data-kind="setup"] .study-welcome { gap: 12px; }
    .study-card[data-kind="setup"] .study-welcome-icon { width: 56px; height: 56px; border-radius: 18px; }
}

.word-progress-inline { grid-column: 1 / -1; justify-self: start; }
.word-progress-chip[hidden] { display:none!important; }
.word-learning-progress:has(.word-progress-picker:popover-open) .word-progress-inline,
.word-learning-progress:has(.word-progress-picker.open) .word-progress-inline { display: none; }

.topic-vocabulary-progress { display:grid; gap:12px; margin:0; padding:20px 24px; }
.topic-flashcards { text-decoration:none; }
.topic-vocabulary-progress .reader-learning-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topic-vocabulary-progress h2 { margin: 0; font-size: 1.05rem; }
.topic-vocabulary-progress .reader-learning-track { margin: 0; }

.topic-channel-origin { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topic-channel-origin > span { flex: none; color: var(--text-secondary); font-size: .85rem; }

.content-opening-reader { min-height: 100%; display: flex; flex-direction: column; align-items: stretch; justify-content: safe center; gap: 20px; width: min(540px, 100%); margin: auto; padding: 90px 24px 32px; overflow-y: auto; }
.content-opening-reader .reader-preparation { background: var(--surface); color: var(--text); }
.content-opening-reader > .error { padding: 20px; border-radius: 16px; }

.collection-copy-button { margin-bottom: 20px; }
.collection-copy-form { display: grid; gap: 16px; }

/* Topics are a reading with supporting learning activities. */
.topic-main-title {font-size:clamp(1.25rem,2.6vw,2rem);font-weight:750;line-height:1.25;}
.topic-completion {display:flex;align-items:center;gap:.75rem;width:100%;margin-top:.4rem;}
.topic-completion-track {display:block;flex:1;height:6px;overflow:hidden;background:var(--border);border-radius:99px;}
.topic-completion-track>span {display:block;height:100%;background:var(--accent);border-radius:inherit;}
.topic-completion>small {font-size:.8rem;color:var(--text-secondary);font-variant-numeric:tabular-nums;}
.topic-vocabulary-progress .reader-learning-heading h2 {font-size:.9rem;color:var(--text-secondary);font-weight:400;}

/* Keep word navigation within the study dialog's own interactive layer. */
.guided-selection-controls {z-index:90;}
.guided-stage:has(.guided-selection-controls) :is(.comic-footer,.guided-response,.guided-hint-actions) {visibility:hidden;pointer-events:none;}
.guided-sentence-card:focus-visible {outline:2px solid var(--accent);outline-offset:4px;border-radius:10px;}

.language-level{display:inline-flex;align-items:center;flex:none;align-self:flex-start;border:1px solid currentColor;border-radius:.35rem;padding:.1rem .4rem;font-size:.75rem;font-weight:650;line-height:1.3;vertical-align:middle;white-space:nowrap}
.topic-card-type .language-level{align-self:center;background:rgb(0 0 0 / .35)}

.topic-card-container{display:grid;gap:8px;min-width:0}
.topic-card-generating{background:#e8ddff;color:#513a7b}
.topic-card-ready{background:#e0f2e6;color:#24633f;border-color:#b9ddc5}
.topic-card-failed{background:#f8e3dc;color:#873e2b;border-color:#eac3b6}
.topic-card-generating-label{animation:topic-generation-pulse 1.6s ease-in-out infinite}
.topic-generation-ring{display:block;flex:none;transform:rotate(-90deg)}
.topic-generation-track{opacity:.25}
.topic-generation-value{stroke-linecap:round;transition:stroke-dashoffset .3s ease}
.topic-generation-ring.indeterminate{animation:topic-generation-spin 1s linear infinite}
@keyframes topic-generation-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes topic-generation-spin{to{transform:rotate(270deg)}}
@media(prefers-reduced-motion:reduce){.topic-card-generating-label,.topic-generation-ring.indeterminate{animation:none}.topic-generation-value{transition:none}}

/* Compact topic identity, followed by channel/date and actionable activity rows. */
.topic-page {gap:clamp(10px,1.5vw,16px);}
.topic-page .topic-header {display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(12px,2vw,24px);margin:0;padding:clamp(12px,2vw,22px);border-radius:18px;}
.topic-header-leading {display:grid;justify-items:center;gap:8px;min-width:0;}
.topic-header-leading .topic-cover {display:grid;width:clamp(52px,8vw,88px);height:clamp(52px,8vw,88px);border-radius:12px;overflow:hidden;}
.topic-header-leading .topic-activity-labels {justify-content:center;gap:6px;}
.topic-header-leading .home-hero-eyebrow {margin:0;font-size:.65rem;}
.topic-page .topic-main-title {margin:0;min-width:0;overflow-wrap:anywhere;}
.topic-channel-origin {justify-content:space-between;gap:8px;margin:0;flex-wrap:wrap;}
.topic-channel-source {display:flex;align-items:center;gap:8px;min-width:0;flex:1;}
.topic-channel-source>span {flex:none;color:var(--text-secondary);font-size:.75rem;}
.topic-channel-source .channel-chip {min-width:0;max-width:100%;font-size:.8rem;padding:6px 10px;}
.topic-channel-source .channel-chip-title {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topic-age {flex:none;color:var(--text);font-size:.75rem;font-weight:550;white-space:nowrap;margin-inline-start:auto;text-shadow:0 1px 2px var(--bg),0 0 5px var(--bg);}
.topic-page .topic-art-style {margin:0;}
.topic-page .topic-review-bar {margin:2px 0 8px;gap:10px;}
.topic-page .home-feature-section>.section-heading {margin-bottom:10px;}
.topic-page .topic-activities {gap:12px;}
.topic-page .topic-full-reading {margin-top:12px;}
.topic-page .topic-activity {grid-template-columns:clamp(48px,6vw,72px) minmax(0,1fr) auto;gap:clamp(10px,1.5vw,18px);padding:clamp(12px,1.5vw,18px);}
.topic-page .topic-activity-icon {width:clamp(48px,6vw,72px);height:clamp(48px,6vw,72px);}
.topic-page .topic-activity-icon>svg {width:clamp(28px,3vw,38px);height:clamp(28px,3vw,38px);}
.topic-page .topic-activity-copy {gap:6px;}
.topic-page .topic-activity-labels {gap:6px;}
.topic-page .topic-activity-copy strong {font-size:1rem;line-height:1.35;}
.topic-page .topic-activity-copy>.muted {font-size:.85rem;}
.topic-page .topic-completion {margin-top:2px;}
.topic-page .topic-more {margin-top:0;}
.screen-docked-meta {display:flex;align-items:center;gap:6px;flex:none;}
.screen-docked-meta .topic-cover {display:grid;width:32px;height:32px;border-radius:6px;overflow:hidden;}
.screen-docked-meta .topic-activity-labels {display:grid;gap:2px;}
.screen-docked-meta .home-hero-eyebrow {margin:0;font-size:.55rem;}
.screen-docked-meta .language-level {font-size:.6rem;padding:1px 4px;justify-self:start;}
.screen-docked-header[data-topic="true"] .screen-docked-back>span {display:none;}
.screen-docked-header[data-topic="true"] .screen-docked-inner {gap:10px;}
/* Scrolling cancels touch hover until a new gesture or a real mouse movement. */
:root[data-topic-hover-suppressed] :is(.topic-activity,.topic-card):hover {background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:var(--shadow-sm);transform:none;transition:none;}
@media(max-width:600px),(max-height:650px) {
    .workspace:has(.topic-page) {padding-top:14px;}
    .topic-page .topic-header {padding:12px;gap:12px;margin-bottom:0;}
    .topic-page .topic-review-bar {margin:0 0 4px;}
    .topic-page .topic-activities {gap:10px;}
    .topic-page .topic-full-reading {margin-top:10px;}
    .topic-page .topic-activity {grid-template-columns:48px minmax(0,1fr);padding:12px;gap:10px;}
    .topic-page .topic-activity>svg:last-child {display:none;}
    .topic-page .topic-activity-icon {width:48px;height:48px;}
    .topic-page .topic-activity-status {font-size:.78rem;}
    .topic-page .topic-art-style {margin:0;}
    .topic-page .topic-activity-copy>.muted {font-size:.8rem;}
}

.guided-sentence-card[data-selected="true"] {outline:2px solid var(--accent);outline-offset:4px;border-radius:10px;}
/* Every connection/cache notice stays above the header, including online notices. */
.offline-banners { position: sticky; top: 0; z-index: 10000; }
.offline-banner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: max(.5rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .5rem max(1rem, env(safe-area-inset-left)); background: #f6e8bd; color: #4c4026; font-size: .875rem; line-height: 1.45; }
.offline-banner-copy { min-width: 0; }
button.offline-banner-refresh { display: inline-flex; align-items: center; justify-content: center; flex: none; width: calc(44px * 2 / 3); height: calc(44px * 2 / 3); min-height: calc(44px * 2 / 3); padding: 0; border: 1px solid #4c4026; border-radius: 50%; background: #4c4026; color: #fff; box-shadow: none; }
button.offline-banner-refresh svg { width: calc(20px * 2 / 3); height: calc(20px * 2 / 3); }
button.offline-banner-refresh:hover { background: #302819; border-color: #302819; color: #fff; }
button.offline-banner-refresh:focus-visible { outline: 2px solid #302819; outline-offset: 3px; }
.offline-storage-notice { display: flex; align-items: center; justify-content: center; gap: .75rem; line-height: 1.45; padding: .5rem 1rem; background: #f6e8bd; color: #4c4026; font-size: .8rem; text-align: center; }
.offline-storage-notice > span { min-width: 0; }
button.offline-storage-dismiss { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; min-height: 30px; padding: 0; border: none; border-radius: 50%; background: transparent; color: inherit; box-shadow: none; }
button.offline-storage-dismiss:hover { background: #4c40261a; }
button.offline-storage-dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.offline-storage-settings-warning { justify-content: flex-start; text-align: start; border-radius: 12px; padding: .85rem 1rem; margin-block: .75rem; }
.offline-notice { color: var(--muted, #777); font-weight: normal; }
.speech-button[data-offline-notice="true"] { color: var(--muted, #777); border-color: var(--border, #ddd); }
.offline-cache-total { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.offline-cache-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.offline-cache-table th, .offline-cache-table td { padding: .6rem .25rem; text-align: start; border-bottom: 1px solid var(--border, #ddd); }
.offline-cache-table th:first-child { font-weight: 500; }
.offline-cache-table td, .offline-cache-table th:not(:first-child) { text-align: end; font-variant-numeric: tabular-nums; }
.offline-cache-version-count { display: block; margin-top: .2rem; font-size: .8em; font-weight: 400; }
.offline-cache-table .offline-cache-detail th { padding-inline-start: 1.25rem; }
.offline-cache-table tr:not(.offline-cache-version-note) > td:last-child { white-space: nowrap; }
.offline-cache-detail { font-size: .9em; }
.offline-cache-table .offline-cache-version-note td { text-align: start; font-size: .9em; color: var(--muted); }
.error:has(.offline-notice) { color: var(--muted, #777); background: transparent; border-color: transparent; }
[data-offline] [data-online-required] { opacity: .65; }

/* Measure the full notice stack so online storage/update messages cannot sit
   behind the header and tint its backdrop blur. */
html:has(.offline-banners) .app-shell { --header-height: calc(60px + env(safe-area-inset-top) + var(--offline-banner-height, 0px)); padding-top: calc(var(--header-height) - var(--offline-banner-height, 0px)); min-height: calc(100dvh - var(--offline-banner-height, 0px)); }
html:has(.offline-banners) .app-header { top: var(--offline-banner-height, 0px); height: calc(var(--header-height) - var(--offline-banner-height, 0px)); }
html:has(.offline-banners) dialog.reader-popup[open] { margin-top: calc(var(--offline-banner-height, 0px) + 12px); max-height: calc(100dvh - var(--offline-banner-height, 0px) - 24px); }

/* Full-bleed topic identity and a shared entry point for the recommended activity. */
.topic-page .topic-header {position:relative;grid-template-columns:clamp(112px,22vw,200px) minmax(0,1fr);align-items:stretch;gap:0;padding:0;overflow:hidden;min-height:160px;}
.topic-page .topic-header-leading {display:block;position:relative;min-height:0;width:100%;}
.topic-page .topic-header-leading .topic-cover {position:absolute;inset:0;width:100%;height:100%;border-radius:0;}
.topic-header-leading .topic-cover img {width:100%;height:100%;object-fit:cover;}
.topic-primary-copy {display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0;padding:clamp(16px,2vw,28px);}
.topic-page .topic-primary-copy .topic-activity-labels {gap:8px;}
.topic-primary-copy .home-hero-eyebrow {margin:0;font-size:.7rem;}
.topic-primary-next {display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:.85rem;line-height:1.45;}
.topic-primary-next svg {flex:none;}
.topic-primary-recommendation {color:var(--text-secondary);font-size:.75rem;}
.topic-header-open {position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;box-shadow:none;}
.topic-header-open:hover:not(:disabled) {background:color-mix(in srgb,var(--accent) 5%,transparent);box-shadow:none;transform:none;}
.topic-header-open:focus-visible {outline:3px solid var(--accent);outline-offset:-3px;}
.topic-channel-origin>.topic-age {display:inline-flex;align-items:center;min-height:30px;padding:4px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);line-height:1.4;}
.topic-page .topic-review-bar {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;}
.topic-actions {margin-inline-start:auto;}
.topic-actions-trigger {border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;width:38px;height:38px;}
.topic-options-menu {width:min(380px,calc(100vw - 24px));}
.topic-options-menu .topic-art-style {margin:4px 0 16px;}
.topic-options-actions {display:grid;gap:6px;border-top:1px solid var(--border);padding-top:10px;}
.topic-options-actions>button {display:flex;align-items:center;gap:8px;width:100%;justify-content:flex-start;text-align:start;}
.art-style-popover {width:min(430px,calc(100vw - 24px));}
.art-style-popover .art-style-options {margin:0;padding:0;border:0;box-shadow:none;max-height:none;overflow:visible;}
.screen-docked-header[data-topic="true"],.screen-docked-header[data-topic="true"] .screen-docked-inner {min-height:96px;}
.screen-docked-header[data-topic="true"] .screen-docked-meta {align-self:stretch;padding-block:6px;}
.screen-docked-header[data-topic="true"] .screen-docked-meta .topic-cover {position:relative;width:72px;height:72px;border-radius:8px;}
@media(max-width:600px),(max-height:650px) {
    .topic-page .topic-header {padding:0;gap:0;min-height:144px;grid-template-columns:clamp(96px,28vw,140px) minmax(0,1fr);}
    .topic-primary-copy {padding:14px;gap:8px;}
    .topic-primary-copy .topic-main-title {font-size:1.15rem;}
    .topic-primary-next {font-size:.78rem;}
}
.topic-primary-next-title {color:var(--text-secondary);font-size:.82rem;line-height:1.4;}

/* Reading levels remain distinct over illustrated document headers. */
:root, .theme-light, .theme-calm, .theme-system {
  --reading-level-ink: #173e87;
  --reading-level-fill: #edf4ff;
  --reading-level-edge: #2563eb;
  --reading-level-label-shadow: 0 1px 1px #fff, 0 2px 5px #123c7a40;
  --reading-level-badge-shadow: 0 2px 7px #123c7a40;
}
:root[data-theme="dark"], :root[data-theme="tokyo-night"], .theme-dark, .theme-tokyo-night, .comic-stage {
  --reading-level-ink: #c7e3ff;
  --reading-level-fill: #142c4c;
  --reading-level-edge: #60a5fa;
  --reading-level-label-shadow: 0 1px 2px #000, 0 0 8px #459cff99;
  --reading-level-badge-shadow: 0 0 9px #459cff66, 0 2px 5px #0008;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"], .theme-system {
    --reading-level-ink: #c7e3ff;
    --reading-level-fill: #142c4c;
    --reading-level-edge: #60a5fa;
    --reading-level-label-shadow: 0 1px 2px #000, 0 0 8px #459cff99;
    --reading-level-badge-shadow: 0 0 9px #459cff66, 0 2px 5px #0008;
  }
}
.reader-reading-level {display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.85rem;font-weight:600;line-height:1.4;color:var(--reading-level-ink);text-shadow:var(--reading-level-label-shadow);}
.reader-reading-level .language-level {color:var(--reading-level-ink);background:var(--reading-level-fill);border-color:var(--reading-level-edge);font-weight:750;text-shadow:none;box-shadow:var(--reading-level-badge-shadow);}
.reader-import-level {display:grid;gap:12px;}
.reader-import-level>label:not(.switch-row) {max-width:360px;}

/* Reserve the actual caption row so artwork stays centered above it, including
   with larger fonts and localized titles. The default still fills the tile. */
[data-topic-image-through-title="false"] > .topic-card {display:grid;grid-template-rows:minmax(0,1fr) auto;}
[data-topic-image-through-title="false"] > .topic-card > .topic-card-art {position:relative;inset:auto;grid-area:1/1;min-width:0;min-height:0;}
[data-topic-image-through-title="false"] > .topic-card > .topic-card-image {grid-area:1/1;}
[data-topic-image-through-title="false"] > .topic-card > .topic-card-copy {grid-area:2/1;margin-top:0;}

/* Add Home metrics according to the tile's available width, including when a
   sidebar is open. Keep the compact goal and streak together on small screens. */
.home-daily-goal-container {container:home-goal / inline-size;margin:-52px 0 30px;}
a.home-daily-goal {display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px 12px;margin:0;padding:18px;min-height:0;}
.home-daily-goal .daily-goal-ring {grid-area:1/1;width:64px;height:64px;flex-basis:64px;}
.home-daily-goal .daily-goal-ring > span {font-size:1rem;}
.home-daily-goal .daily-goal-copy {grid-column:2/-1;grid-row:1;}
.home-daily-goal .daily-goal-copy h2 {margin:0 0 4px;font-size:1.15rem;}
.home-daily-goal .daily-goal-copy p {font-size:.85rem;}
.home-daily-goal .daily-goal-history {grid-column:1/3;grid-row:2;display:flex;align-items:center;gap:12px;padding:0;border:0;min-width:0;}
.home-daily-goal .daily-goal-streak {display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:2px 7px;min-width:0;}
.home-daily-goal .daily-goal-streak strong {font-size:1.5rem;font-weight:750;line-height:1.15;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.home-daily-goal .daily-goal-streak > span {font-size:.75rem;line-height:1.35;color:var(--text-secondary);}
.home-daily-goal .daily-goal-total-compact {grid-column:1/-1;font-size:.72rem;}
.home-daily-goal .daily-goal-open {grid-column:3;grid-row:2;align-self:center;justify-self:end;margin:0;}
.home-daily-goal .daily-goal-extra {display:none;min-width:0;border-inline-start:1px solid var(--border);padding-inline-start:24px;}
.home-daily-goal .daily-goal-extra strong {font-size:2rem;line-height:1.1;font-weight:750;letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.home-daily-goal .daily-goal-extra > span {color:var(--text-secondary);font-size:.8rem;line-height:1.4;}
.home-daily-goal .daily-goal-total-xp strong {color:var(--xp);}
.home-daily-goal:not(:has(.daily-goal-ring)) .daily-goal-copy {grid-column:1/-1;}
.goal-streak-icon {display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:15px;color:#df6029;background:color-mix(in srgb,#e8632f 10%,transparent);border:1px solid color-mix(in srgb,#e8632f 20%,transparent);}
.goal-streak-icon[data-active="true"] {color:#ed782d;background:radial-gradient(circle at 30% 20%,#ffcc6529,transparent 75%),color-mix(in srgb,#e8632f 13%,transparent);box-shadow:0 4px 18px #e8632f18,inset 0 1px 0 #ffc36824;}
.goal-streak-icon[data-active="true"] .shell-icon {filter:drop-shadow(0 2px 6px #e8632f38);}
.progress-streak-value {display:flex;align-items:center;flex-wrap:wrap;gap:14px;}
.progress-streak-value > strong {font-size:clamp(2rem,4vw,2.8rem);line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.04em;}
.progress-streak-value > strong > span {font-size:.95rem;font-weight:500;color:var(--muted);letter-spacing:normal;}
.progress-streak-value .goal-streak-icon {width:52px;height:52px;border-radius:18px;}
@media(max-width:650px) {.home-daily-goal-container {margin-top:-40px;}}
@container home-goal (min-width:700px) {
    a.home-daily-goal {grid-template-columns:88px minmax(0,1.2fr) minmax(0,1fr) auto;gap:22px;padding:24px 26px;min-height:140px;}
    .home-daily-goal .daily-goal-ring {width:88px;height:88px;}
    .home-daily-goal .daily-goal-ring > span {font-size:1.2rem;}
    .home-daily-goal .daily-goal-copy {grid-area:1/2;}
    .home-daily-goal .daily-goal-copy h2 {font-size:1.3rem;}
    .home-daily-goal .daily-goal-copy p {font-size:.95rem;}
    .home-daily-goal .daily-goal-history {grid-area:1/3;border-inline-start:1px solid var(--border);padding-inline-start:22px;gap:12px;}
    .home-daily-goal .daily-goal-streak {grid-template-columns:minmax(0,1fr);gap:4px;}
    .home-daily-goal .daily-goal-streak strong {font-size:2rem;}
    .home-daily-goal .daily-goal-open {grid-area:1/4;}
    .home-daily-goal:not(:has(.daily-goal-ring)) .daily-goal-copy {grid-column:1/-2;}
}
@container home-goal (min-width:820px) {
    a.home-daily-goal {grid-template-columns:88px minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,1fr) auto;}
    .home-daily-goal .daily-goal-total-xp {display:grid;gap:7px;grid-area:1/4;}
    .home-daily-goal .daily-goal-total-compact {display:none;}
    .home-daily-goal .daily-goal-open {grid-area:1/5;}
}
@container home-goal (min-width:1100px) {
    a.home-daily-goal {grid-template-columns:88px minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) auto;gap:26px;}
    .home-daily-goal .daily-goal-vocab {display:grid;gap:7px;grid-area:1/5;}
    .home-daily-goal .daily-goal-open {grid-area:1/6;}
}
.home-daily-goal .daily-goal-copy p strong {white-space:normal;overflow-wrap:anywhere;}

/* My Content is a stack of activity rows, with recent items before a pair of actions. */
.own-content-library {display:grid;gap:32px;}
.own-content-section {container:own-content / inline-size;min-width:0;}
.own-content-section .section-heading h2 {display:flex;align-items:center;gap:10px;}
.own-content-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:14px;}
.own-content-recent {min-width:0;}
.own-content-recent:nth-child(n+2) {display:none;}
.own-content-recent > .feed-content {height:100%;}
.own-content-recent .feed-content-card {width:100%;height:auto;min-height:100%;aspect-ratio:10/9;}
.own-content-actions {grid-column:-2/-1;display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;min-width:0;min-height:144px;}
.own-content-actions > button.own-content-action {display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:66px;padding:18px;text-align:start;white-space:normal;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-sm);}
button.own-content-action:hover:not(:disabled) {background:var(--surface-hover);border-color:var(--accent);}
.own-content-action > span {display:grid;gap:6px;min-width:0;}
.own-content-action strong {font-size:1rem;overflow-wrap:anywhere;}
.own-content-action small {font-weight:400;font-size:.8rem;line-height:1.4;color:var(--text-secondary);}
.own-content-action > .shell-icon {flex:none;}
.own-content-row[data-empty="true"] {display:block;}
.own-content-row[data-empty="true"] .own-content-actions {grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr;min-height:88px;}
.own-content-all {container:discovery-layout / inline-size;}
@container own-content (min-width:780px) {
    .own-content-row {grid-template-columns:repeat(3,minmax(0,1fr));}
    .own-content-recent:nth-child(2) {display:block;}
}
@container own-content (min-width:1200px) {
    .own-content-row {grid-template-columns:repeat(4,minmax(0,1fr));}
    .own-content-recent:nth-child(3) {display:block;}
}

/* Recorded credit charges, by activity and generation type. */
.credit-usage-controls { display: flex; flex-wrap: wrap; gap: 1rem; margin-block: .75rem; }
.credit-usage-controls label { display: grid; gap: .4rem; font-size: .85rem; color: var(--muted); }
.credit-usage-controls select { min-width: 150px; }
.credit-usage-chart { margin-top: 1.25rem; }
.credit-usage-total { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.credit-usage-total strong { font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.credit-usage-total span { color: var(--muted); font-size: .85rem; }
.credit-usage-cursor { fill: var(--text); opacity: .06; }
.credit-usage-legend, .credit-usage-day { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; font-size: .8rem; }
.credit-usage-legend { margin-top: .75rem; }
.credit-usage-legend > span, .credit-usage-day > span { display: inline-flex; align-items: center; gap: .35rem; }
.credit-usage-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; flex-shrink: 0; }
.credit-usage-day { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; }
.credit-usage-day > strong { flex-basis: 100%; }
@media (max-width: 480px) {
  .credit-usage-controls label { flex: 1; min-width: 0; }
  .credit-usage-controls select { min-width: 0; width: 100%; }
  .credit-usage-over-time .token-budget-heading { align-items: start; }
}

/* Content management controls stay outside each tile's navigation target. */
.managed-tile { position: relative; min-width: 0; }
.managed-tile > .home-content-card, .managed-tile > .topic-card { width: 100%; }
.tile-management { position: absolute; inset-inline-end: 10px; bottom: 10px; z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease; }
.managed-tile:hover > .tile-management, .managed-tile:focus-within > .tile-management, .tile-management[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; }
button.tile-management-trigger { width: 36px; height: 36px; min-height: 36px; padding: 7px; border: 1px solid var(--border); color: var(--text); background: var(--surface); box-shadow: 0 2px 10px #0002; }
.managed-tile .home-content-copy, .managed-tile .topic-card-copy { padding-inline-end: 56px; }
.tile-management-menu { min-width: 180px; }
.content-management-controls { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin: 24px 0 18px; }
.content-management-controls label { display: grid; gap: 8px; margin: 0; }
.content-management-controls label:first-child { flex: 1; min-width: min(240px, 100%); }
.content-management-controls input, .content-management-controls select { width: 100%; }
.content-management-grid { margin-top: 18px; }
@media (hover: none) { .tile-management { opacity: 1; visibility: visible; pointer-events: auto; } }
@media (max-width: 600px) { .content-management-controls label { flex: 1; min-width: min(240px, 100%); } }

/* Mount a blank comic shell immediately, even before showModal reaches the bridge. */
.flashcard-stage.comic-stage { z-index: 1000; }
.comic-opening-status { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1rem; font-weight: 600; }
.comic-preparing > .comic-preparation-card:has(.comic-opening-status) { max-width: 400px; }

/* Comic information is tucked into the toolbar; welcome keeps one preference. */
.comic-opening-topbar {justify-content:flex-end;}
.comic-welcome .comic-title-translation {color:var(--text-secondary);font-size:1rem;line-height:1.5;}
.comic-autoplay-toggle {width:100%;padding:6px;border:1px solid transparent;border-radius:16px;background:transparent;color:var(--text);text-align:start;white-space:normal;font-weight:500;}
.comic-autoplay-toggle:hover {background:rgba(255,255,255,.08);}
.comic-autoplay-icon {display:grid;place-items:center;width:44px;height:44px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid var(--border);}
.comic-autoplay-toggle[aria-pressed="true"] .comic-autoplay-icon {background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.45);}
.comic-info-menu {z-index:20;pointer-events:auto;width:min(420px,calc(100vw - 24px));}
.comic-info-menu .anchored-popover-heading {align-items:flex-start;}
.comic-info-menu .anchored-popover-heading h2 {font-size:1.15rem;line-height:1.4;}
.comic-info-menu .comic-title-translation {margin:0;color:var(--text-secondary);line-height:1.5;}
.comic-menu-progress {display:grid;gap:12px;min-width:0;padding-block:8px;}
.comic-menu-review {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;}
.comic-info-retry {display:grid;gap:8px;}

.comic-menu-progress .reader-learning-heading {justify-content:space-between;}

/* Keep audio available while the secondary actions fold into a measured overflow menu. */
.comic-action-controls.comic-control-scrim,.comic-inline-actions,.comic-action-options {gap:0}
.comic-audio-control,.comic-inline-actions,.comic-action-options {display:flex;align-items:center;width:max-content;flex-shrink:0}
.comic-inline-actions>.icon-button,.comic-action-options>.icon-button {width:44px;min-width:44px;height:44px;border-radius:16px;margin:0}
#comic-actions-popover {width:max-content;min-width:180px;background:#202226;color:var(--text);border-color:#53565f;pointer-events:auto}
.comic-controls-content {padding-inline-end:44px}
.comic-controls .comic-text-collapse {position:absolute;top:2px;right:6px;width:36px;height:28px;min-height:28px;padding:0;opacity:.5;z-index:1;background:transparent}
.comic-controls .comic-text-collapse:hover,.comic-controls .comic-text-collapse:focus-visible {opacity:1}
.comic-text-restore>svg {transform:rotate(180deg)}
@media(max-width:640px), (max-height:600px) {
    .comic-display-menu>.icon-button,.comic-action-controls .speech-button,.comic-action-controls>.icon-button,.comic-inline-actions>.icon-button {width:36px;min-width:36px;height:36px}
    .comic-navigation .icon-button.comic-step-target {width:72px;min-width:72px;height:36px}
}

.comic-audio-control .speech-error {max-width:180px}

/* Passive, centered feedback above readers and their full-screen dialogs. */
.toggle-feedback {position:fixed;inset:auto auto max(24px,env(safe-area-inset-bottom)) 50%;transform:translateX(-50%);margin:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;padding:16px 24px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(20,22,27,.86);color:#fff;box-shadow:0 8px 36px #0005;backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);font-size:1rem;font-weight:600;line-height:1.4;text-align:center;pointer-events:none;user-select:none;opacity:0}
.toggle-feedback[data-visible="true"] {opacity:1;animation:toggle-feedback-in .16s ease-out}
.toggle-feedback::backdrop {background:transparent;pointer-events:none}
.toggle-feedback>svg {width:28px;height:28px;flex:none}
.toggle-feedback>span {min-width:0;overflow-wrap:anywhere}
@keyframes toggle-feedback-in {from {opacity:0} to {opacity:1}}
@media(prefers-reduced-motion:reduce) {.toggle-feedback[data-visible="true"] {animation:none}}

/* Preparation reserves normal-flow space for the title above its centered status. */
.reader-popup.input-preparation {position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;background:var(--bg);box-shadow:none;}
.input-preparation > .reader-popup-heading {align-items:flex-start;gap:20px;padding:max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 18px max(20px,env(safe-area-inset-left));}
.input-preparation > .reader-popup-heading h2 {min-width:0;max-width:64ch;font-size:clamp(1rem,2vw,1.25rem);line-height:1.5;overflow-wrap:anywhere;}
.input-preparation > .reader-popup-heading .icon-button {width:44px;height:44px;}
.input-preparation > .reader-popup-body {display:flex;flex:1;padding:clamp(20px,5vw,64px) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));}
.input-preparation-status {display:flex;flex-direction:column;align-items:center;gap:20px;width:min(100%,540px);margin:auto;padding:clamp(24px,5vw,48px);border:1px solid var(--border);border-radius:24px;background:var(--surface);text-align:center;overflow-wrap:anywhere;}
.input-preparation-label {color:var(--muted);font-size:.8rem;}
.input-preparation-status > .word-illustration-spinner {display:block;flex:none;width:44px;height:44px;border-width:3px;}
.input-preparation-status h3 {margin:0;font-size:clamp(1.2rem,3vw,1.6rem);line-height:1.4;}
.input-preparation-status p {margin:0;max-width:38ch;color:var(--text-secondary);line-height:1.6;}

/* Comprehensible input shares the page splash, with themed glass around
   lesson controls and isolated cutout images. */
.input-setup {display:grid;gap:22px;}
.input-source-options {display:grid;gap:12px;}
.input-source-options .reader-synopsis-option {justify-content:flex-start;}
.input-source-options .reader-synopsis-option>span {flex:1;}
.input-source-options small {color:var(--muted);font-weight:400;line-height:1.5;}
.input-list-options,.input-word-options {max-height:320px;overflow-y:auto;overscroll-behavior:contain;}
.input-list-options {display:grid;gap:8px;padding:4px;}
.input-setup label {display:grid;gap:8px;}
.input-experience {--input-glass-opacity:100%;--input-glass-filter:none;isolation:isolate;position:fixed;inset:0;z-index:100;background:var(--bg);color:var(--text);overflow:auto;padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(20px,env(safe-area-inset-left));display:flex;flex-direction:column;}
.input-header {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;max-width:1200px;width:100%;margin:16px auto 12px;flex-shrink:0;}
.input-heading {text-align:center;min-width:0;}.input-heading small {color:var(--muted);}.input-heading h1 {overflow-wrap:anywhere;font-size:clamp(1rem,2vw,1.4rem);margin:4px 0;}
.input-progress {flex-shrink:0;display:flex;align-items:center;gap:12px;max-width:720px;width:100%;margin:0 auto;color:var(--muted);font-size:.8rem;}.input-progress progress {min-width:0;flex:1;height:5px;accent-color:var(--accent);}
.input-step-region {flex:1;display:flex;flex-direction:column;padding:24px 0 32px;}
.input-step {flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:1100px;width:100%;margin:auto;}
.input-review-badge {align-self:center;display:inline-flex;align-items:center;justify-content:center;padding:5px 14px;border-radius:999px;background:#d8c7ff;color:#382651;font-size:.8rem;font-weight:650;line-height:1.4;}
.input-stage {position:relative;display:flex;align-items:stretch;justify-content:center;gap:18px;width:100%;min-height:260px;height:clamp(260px,42dvh,520px);}
.input-picture {position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-width:0;border:2px solid transparent;border-radius:24px;background:transparent;padding:18px;box-shadow:none;}
.input-picture:disabled {opacity:1;cursor:default;}.input-picture img {width:100%;height:100%;object-fit:contain;}.input-stage[data-choices=true] .input-picture:hover:not(:disabled),.input-picture[data-selected=true] {border-color:var(--accent);}
.input-picture-number {position:absolute;bottom:10px;left:14px;font-size:.8rem;color:var(--muted);}.input-stage-loading {position:absolute;inset:0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;background:var(--bg);border-radius:24px;}
.input-caption {width:100%;text-align:center;}.input-target {display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.8;}.input-target .reader-word-help {text-align:start;}.input-instruction {display:flex;align-items:center;justify-content:center;gap:12px;font-size:1.1rem;}.input-instruction p {margin:8px 0;}
.input-answer {width:min(100%,620px);display:grid;gap:12px;}.input-answer textarea {width:100%;}.input-answer audio {width:100%;}.input-feedback {width:min(100%,700px);text-align:center;padding:20px;border:1px solid var(--border);border-radius:20px;}.input-feedback[data-correct=true] {border-color:var(--accent);}.input-feedback button {margin-top:16px;}.input-next {display:flex;align-items:center;gap:12px;}.input-complete,.input-loading {margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:40px 20px;}
@media(max-width:650px) {.input-stage[data-choices=true] {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:42dvh;gap:10px;}.input-picture {padding:10px;min-height:0;}.input-experience {padding-left:14px;padding-right:14px;}.input-step-region {padding-top:16px;}.input-step {gap:14px;}}

.input-practice {display:flex;flex-direction:column;align-items:center;gap:14px;width:min(100%,620px);text-align:center;}
.input-practice-actions {display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:12px;}
.input-practice .reader-flashcard-microphone,.input-practice .reader-flashcard-toolbar {display:contents;}
.input-practice-actions button {grid-row:1;}
.input-answer .reader-flashcard-toolbar {display:grid;grid-template-rows:auto;justify-content:center;gap:12px;}
.input-answer .reader-flashcard-toolbar button {grid-row:1;}
.input-step .reader-flashcard-toolbar > button:first-child {min-width:11rem;}
.input-practice-feedback {margin:0;line-height:1.6;}
.input-practice-feedback[data-outcome="partial"] {color:#936800;color:light-dark(#936800,#f5cd62);}
.input-practice-feedback[data-outcome="retry"] {color:#b72e37;color:light-dark(#b72e37,#ff8b94);}
.input-practice-feedback[data-outcome="success"] {color:#247345;color:light-dark(#247345,#90dfaf);}
.input-practice-celebration {display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.1rem;animation:input-practice-pop .45s ease-out;}
.input-practice-celebration svg {padding:6px;width:40px;height:40px;border-radius:50%;background:light-dark(#24734518,#90dfaf18);box-shadow:0 0 0 6px light-dark(#24734508,#90dfaf08);}
@keyframes input-practice-pop {0% {transform:scale(.85);opacity:0;} 65% {transform:scale(1.06);} 100% {transform:scale(1);opacity:1;}}
@media(prefers-reduced-motion:reduce) {.input-practice-celebration {animation:none;}}
@media(max-height:650px) {.input-stage {height:30dvh;min-height:160px;}.input-step {gap:12px;}.input-stage[data-choices=true] {height:30dvh;}}

.input-practice-feedback p {margin:8px 0 0;}

.input-answer-toast[data-correct="true"] > svg {color:#90dfaf;}
.input-answer-toast[data-correct="false"] > svg {color:#ff8b94;}
.input-recording {width:min(100%,620px);display:grid;gap:8px;text-align:center;}
.input-recording audio {width:100%;}

/* Match the Home page's palette and transparency, with solid fallbacks. */
@supports ((backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px))) {
  .input-experience {--input-glass-opacity:var(--home-glass-opacity,82%);--input-glass-filter:blur(18px) saturate(1.1);}
}
.input-experience :is(.input-header,.input-progress,.input-picture,.input-listening-caption,.input-response,.input-complete,.input-loading,.input-stage-loading) {
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) var(--input-glass-opacity),transparent);
  border:1px solid color-mix(in srgb,var(--border) 80%,transparent);
  border-radius:24px;
  box-shadow:0 8px 28px #0000000c;
  -webkit-backdrop-filter:var(--input-glass-filter);
  backdrop-filter:var(--input-glass-filter);
}
.input-experience > .app-splash {background:var(--bg);}
.input-progress {padding:10px 18px;}
.input-response {display:flex;flex-direction:column;align-items:center;gap:18px;width:min(100%,760px);padding:22px 24px;text-align:center;}
.input-listening-caption {width:fit-content;max-width:100%;padding:14px 24px;}
.input-experience .input-picture {border-width:2px;}
.input-stage[data-choices=true] .input-picture:hover:not(:disabled),.input-picture[data-selected=true] {border-color:var(--accent);}
.input-picture:focus-visible {outline:3px solid var(--accent);outline-offset:4px;}
.input-feedback {padding:0;border:0;}
.input-stage[aria-busy=true] .input-picture {visibility:hidden;}
.input-stage-loading {padding:24px;text-align:center;}
.input-complete,.input-loading {width:min(100%,700px);}
@media(prefers-reduced-transparency:reduce) {
  .input-experience {--input-glass-opacity:100%;--input-glass-filter:none;}
}
@media(max-width:650px) {
  .input-header {gap:8px;padding:12px;margin-top:12px;border-radius:20px;}
  .input-response,.input-listening-caption {padding:16px;gap:14px;}
  .input-instruction {font-size:1rem;}
  .input-experience .input-picture {border-radius:18px;}
}

.input-stage[aria-busy=true] {min-height:340px;}
.input-stage-loading {padding:20px;overflow:auto;}
.input-loading-title {margin:0;text-align:center;font-size:1rem;}
.input-loading-progress {width:min(100%,360px);display:grid;gap:10px;font-size:.85rem;}
.input-loading-row {display:grid;grid-template-columns:1fr auto;gap:5px 12px;}
.input-loading-row progress {grid-column:1 / -1;width:100%;height:5px;accent-color:var(--accent);}

.input-response {position:relative;}
.input-mode-toggle {position:absolute;top:12px;right:12px;margin:0;}
.input-response:has(.input-mode-toggle) .input-caption {padding-inline:36px;}
.input-answer textarea[hidden] {display:none;}
.input-feedback-summary {display:flex;align-items:center;justify-content:center;gap:10px;}
.input-feedback .input-feedback-summary button {margin:0;}
.input-feedback-popover {max-width:min(420px,calc(100vw - 28px));max-height:60dvh;overflow:auto;line-height:1.6;}
.input-feedback-summary[data-outcome="success"] {color:light-dark(#247345,#90dfaf);}
.input-feedback-summary[data-outcome="partial"] {color:light-dark(#936800,#f5cd62);}
.input-feedback-summary[data-outcome="retry"] {color:light-dark(#b72e37,#ff8b94);}

.app-update-toast {inset:auto auto max(24px,env(safe-area-inset-bottom)) 50%;transform:translateX(-50%);}

.input-playback-settings {display:grid;gap:16px;margin-bottom:24px;}
.input-playback-settings label {display:flex;align-items:center;gap:10px;}

/* Home's language controls dock above the independently sticky feed heading. */
.home-language-slot { min-width: 0; }
.home-language-controls { transition: background-color .2s ease, box-shadow .2s ease; }
.home-language-controls h1 { transition: font-size .2s ease, gap .2s ease; }
.home-dashboard[data-language-stuck="true"] > .home-hero { z-index: 40; }
.home-language-controls[data-stuck="true"] {
  position: fixed; top: var(--home-dock-top); left: var(--home-dock-left);
  width: var(--home-dock-width); box-sizing: border-box; z-index: 40;
  min-height: 48px; padding: 4px 12px; gap: 8px 16px;
  border-radius: 0 0 14px 14px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--border);
}
.home-language-controls[data-stuck="true"] h1 { font-size: 1.15rem; gap: 8px; }
.home-language-controls[data-stuck="true"] .home-language-menu { flex: 1; }
.home-language-controls[data-stuck="true"] .home-language-trigger { gap: 8px; margin: 0; padding: 4px; max-width: 100%; min-height: 40px; }
.home-language-controls[data-stuck="true"] .home-language-trigger > .shell-icon { width: 18px; height: 18px; }
.home-language-controls[data-stuck="true"] .home-target-level-button { min-width: 64px; min-height: 36px; padding: 4px 10px; }
.home-dashboard :is(.home-feature-section,.home-quests) > .section-heading {
  top: calc(var(--home-header-bottom, var(--header-height)) + var(--home-dock-height, 0px));
}
.home-dashboard .section-heading :is(h2,.home-section-icon) { transition: font-size .2s ease, width .2s ease, height .2s ease; }
.home-dashboard .section-heading[data-stuck="true"] h2 { font-size: 1rem; }
.home-dashboard .section-heading[data-stuck="true"] .home-section-icon { width: 28px; height: 28px; }
@media(prefers-reduced-motion:reduce) {
  .home-language-controls, .home-language-controls h1,
  .home-dashboard .section-heading, .home-dashboard .section-heading :is(h2,.home-section-icon) { transition: none; }
}

/* Second-stage docking folds the feed into the existing language bar. */
.home-docked-feed { display: none; }
.home-target-level-display { display: none; }
.home-language-controls[data-stuck="true"] { flex-wrap: nowrap; gap: 8px 16px; }
.home-language-controls[data-stuck="true"] > :not(.home-docked-feed,.home-language-menu,.home-target-level) { display: none; }
.home-language-controls[data-stuck="true"] .home-target-level-control { display: none; }
.home-language-controls[data-stuck="true"] .home-target-level-display {
  display: inline-flex; align-items: center; justify-content: center; min-height: 30px;
  padding: 2px 9px; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-secondary); font-size: .85rem; font-weight: 600; line-height: 1.2;
}
.home-language-controls[data-stuck="true"] > .home-target-level { flex: none; }
.home-language-controls[data-stuck="true"] .home-docked-feed {
  display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0;
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-size: 1rem; font-weight: 650; transform: translateY(6px);
  transition: max-width .22s ease, opacity .18s ease, transform .22s ease;
  margin-inline-end: -16px;
}
.home-docked-feed > .shell-icon { flex: none; }
.home-dashboard[data-feed-merged="true"] .home-docked-feed { max-width: 30rem; opacity: 1; transform: translateY(0); margin-inline-end: 0; }
.home-dashboard .feed-section > .section-heading { position: relative; top: auto; transition: opacity .18s ease, transform .22s ease; }
.home-dashboard[data-feed-merged="true"] .feed-section > .section-heading { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.home-language-controls[data-stuck="true"] .home-language-trigger { white-space: nowrap; }
.home-language-controls[data-stuck="true"] .home-language-trigger > span:not(.home-flag) {
  display: inline-block; max-width: 40rem; white-space: nowrap; overflow: hidden;
  transition: max-width .22s ease, opacity .18s ease;
}
.home-language-controls[data-flag-only="true"] .home-language-trigger > span:not(.home-flag) { max-width: 0; opacity: 0; }
.home-language-controls[data-flag-only="true"] .home-language-trigger { gap: 0; }
.home-language-controls[data-flag-only="true"] .home-language-trigger > .shell-icon { width: 0; opacity: 0; }
.home-language-controls[data-stuck="true"] .home-language-trigger > .shell-icon { transition: width .22s ease, opacity .18s ease; }
@media(prefers-reduced-motion:reduce) {
  .home-language-controls[data-stuck="true"] :is(.home-docked-feed,.home-language-trigger > span,.home-language-trigger > .shell-icon),
  .home-dashboard .feed-section > .section-heading { transition: none; }
}

/* Analysis advances over the existing text without adding width or line boxes. */
.reader-pending-character { border-radius: .12em; animation: reader-character-pulse 1.4s ease-in-out infinite; }
@keyframes reader-character-pulse {
  0%, 100% { background-color: color-mix(in srgb, var(--accent) 12%, transparent); }
  50% { background-color: color-mix(in srgb, var(--accent) 35%, transparent); }
}
@media(prefers-reduced-motion:reduce) {
  .reader-pending-character { animation: none; background-color: color-mix(in srgb, var(--accent) 22%, transparent); }
}

/* Keep sentence actions exposed; navigation gives up surplus width first. */
.comic-footer { grid-template-columns: auto minmax(max-content,1fr) auto; }
.comic-navigation { --comic-nav-ideal: 88; --comic-nav-min: 44; }
.comic-navigation .icon-button.comic-step-target { width: var(--comic-arrow-width,88px); min-width: var(--comic-arrow-width,88px); }
@media(max-width:640px) {
  .comic-navigation { --comic-nav-ideal: 72; --comic-nav-min: 36; }
  .comic-navigation .icon-button.comic-step-target { width: var(--comic-arrow-width,72px); min-width: var(--comic-arrow-width,72px); }
}

/* Interest topics share account identity while follows belong to the active language. */
.interest-topic-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin:16px 0 32px; }
.interest-general-topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:640px) {
  .interest-general-topic-grid { grid-template-columns:minmax(0,1fr); }
}
.interest-topic-card { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px; }
.interest-topic-card h3 { min-width:0; margin:0; }
.interest-topic-card .channel-chip { max-width:100%; white-space:normal; }
.interest-topic-card button { flex-shrink:0; }
.feed-section > .section-heading { display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; }
.feed-section > .section-heading h2 { margin-right:auto; }
.tile-management-menu .menu-item { display:flex; align-items:center; text-decoration:none; }

.interest-topic-card {position:relative; margin:0; flex-wrap:wrap;}
.interest-topic-grid > .interest-topic-card { margin:0; }
.interest-topic-tile-link,.interest-topic-name {display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:inherit;text-decoration:none;}
.interest-topic-tile-link::after {content:"";position:absolute;inset:0;border-radius:inherit;}
.interest-topic-tile-link:focus-visible {outline:3px solid var(--focus);outline-offset:6px;}
.interest-topic-tile-link span,.interest-topic-name span {font-size:1.8rem;}
.interest-topic-actions {display:flex;gap:8px;position:relative;z-index:1;}
.interest-topic-card:has(.interest-topic-tile-link):hover {border-color:var(--focus);}
.interest-topic-card>p {flex-basis:100%;}

/* Keep the feed timing readable over artwork in every theme. */
.feed-next-suggestion {color:var(--text);font-weight:550;text-shadow:0 1px 2px var(--bg),0 0 5px var(--bg);}

.art-style-preferences { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 8px; max-height: none; overflow: visible; overscroll-behavior: auto; box-shadow: none; }
.art-style-preferences img { width: 64px; height: 64px; }
.art-style-preferences .art-style-option { border: 1px solid var(--border); opacity: 1; }
.art-style-preferences .art-style-option.selected { border-color: var(--accent); }
/* A selected style can be locked because at least one must remain enabled.
   Dim excluded styles, independently of this temporary/last-style input lock. */
.art-style-preferences .art-style-option[aria-checked="false"] { color: var(--text-secondary); }
.art-style-preferences .art-style-option[aria-checked="false"] img { opacity: .55; filter: grayscale(.75); }

.app-version-gate { position: fixed; inset: 0; z-index: 2147483646; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); background: var(--bg, #111); color: var(--text); overflow-y: auto; }
/* Calm, theme-colored update progress. */
.version-loading {width:min(100%,360px);display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:24px;}
.version-loading-brand .wordmark {width:166px;color:var(--text);}
.version-loading-art {display:grid;place-items:center;width:128px;height:128px;margin:36px 0 32px;color:var(--accent,var(--text));}
.version-loading-throbber {width:56px;height:56px;animation:version-loading-spin 1s linear infinite;}
.version-loading-status {display:grid;gap:14px;width:100%;}
.version-loading-status h1 {font-size:1.15rem;line-height:1.45;font-weight:600;margin:0;color:var(--text);text-wrap:balance;}
.version-download-meter {height:7px;border-radius:99px;overflow:hidden;background:var(--border);margin-top:9px;}
.version-download-fill {display:block;position:relative;height:100%;width:var(--download-progress);border-radius:inherit;background:var(--accent,var(--text));transition:width .6s ease;overflow:hidden;}
.version-download-meter[data-determinate="false"] .version-download-fill {animation:version-download-sweep 2s ease-in-out infinite;}
.version-download-detail {display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:.82rem;color:var(--text-secondary);font-variant-numeric:tabular-nums;min-height:20px;}
.version-download-detail:has(> :only-child) {justify-content:center;}
.version-download-percent {font-weight:600;color:var(--text);}
.version-loading button.version-continue-offline {margin-top:64px;min-height:44px;padding:10px 16px;background:none;border:0;border-radius:6px;box-shadow:none;color:var(--muted);font-size:.85rem;font-weight:400;}
.version-loading button.version-continue-offline:hover {background:none;color:var(--text);text-decoration:underline;text-underline-offset:4px;transform:none;box-shadow:none;}
.version-loading button.version-continue-offline:focus-visible {outline:2px solid var(--accent);outline-offset:3px;}
/* Keep recovery reachable below the centered status, including phone safe areas. */
.app-version-gate {padding-bottom:max(96px,calc(76px + env(safe-area-inset-bottom)));}
.version-loading button.version-clear-cache {position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 48px);min-height:44px;padding:10px 16px;background:none;border:0;box-shadow:none;color:var(--muted);font-size:.85rem;font-weight:400;}
.version-loading button.version-clear-cache:hover {background:none;color:var(--text);text-decoration:underline;text-underline-offset:4px;transform:translateX(-50%);box-shadow:none;}
.version-loading button.version-clear-cache:focus-visible {outline:2px solid var(--accent);outline-offset:3px;}
.version-loading[data-phase="error"] .version-loading-art *,.version-loading[data-phase="error"] .version-download-fill {animation-play-state:paused;}
.version-loading[data-phase="error"] .version-download-meter {opacity:.45;}
@keyframes version-loading-spin {to {transform:rotate(360deg);}}
@keyframes version-download-sweep {0%,100% {transform:translateX(-5%);}50% {transform:translateX(195%);}}
@media (max-height:620px) {.version-loading-art {margin-block:20px;height:100px;}.version-loading button.version-continue-offline {margin-top:32px;}}
@media (prefers-reduced-motion:reduce) {.version-loading-art *,.version-download-fill {animation:none;transition:none;}}
html:has(.app-version-gate) { overflow: hidden; }
.theme-root:has(.app-version-gate) > :not(.app-version-gate) { pointer-events: none; }

/* Active click-to-record buttons breathe while waiting and spring with the voice. */
button.mic-listening {display:inline-flex;align-items:center;justify-content:center;gap:12px;}
button.mic-listening::before {content:"";flex:none;width:14px;height:14px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px color-mix(in srgb,currentColor 10%,transparent);animation:mic-listening-pulse 1.6s ease-in-out infinite;}
button.mic-listening[data-speaking="true"]::before {animation:mic-listening-bounce .36s cubic-bezier(.22,.68,.28,1.4) infinite alternate;}
@keyframes mic-listening-pulse {0%,100% {transform:scale(.8);opacity:.5;}50% {transform:scale(1);opacity:.95;}}
@keyframes mic-listening-bounce {0% {transform:translateY(2px) scaleX(calc(1 + var(--mic-energy,0) * .28)) scaleY(.8);border-radius:48% 52% 44% 56%;}100% {transform:translateY(calc(-2px - var(--mic-energy,0) * 4px)) scaleX(.9) scaleY(calc(1.05 + var(--mic-energy,0) * .45));border-radius:44% 56% 54% 46%;}}
@media(prefers-reduced-motion:reduce) {button.mic-listening::before,button.mic-listening[data-speaking="true"]::before {animation:none;transform:none;}button.mic-listening[data-speaking="true"]::before {box-shadow:0 0 0 5px color-mix(in srgb,currentColor 24%,transparent);}}

.input-progress.input-trail {position:relative;display:grid;max-width:960px;min-height:44px;}
.input-trail-toggle {position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:inherit;background:transparent;box-shadow:none;cursor:pointer;}
.input-trail-toggle:hover {background:color-mix(in srgb,var(--text) 4%,transparent);}
.input-trail-toggle:active {transform:none;}
.input-trail-toggle:focus-visible {outline:2px solid var(--accent);outline-offset:3px;}
.input-trail-popover .input-trail-legend {flex-direction:column;align-items:flex-start;gap:12px;font-size:.85rem;}
.input-trail-popover .input-trail-legend span::before {width:9px;height:9px;}
/* Shared reading trails: completion, readiness and current position are independent. */
.input-progress.input-trail,.guided-step-trail {color:#fff;background:rgba(14,16,20,.68);border:1px solid #ffffff1f;border-radius:14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.input-progress.input-trail {padding:10px 14px;}
.guided-step-trail {position:absolute;z-index:3;top:calc(max(16px,env(safe-area-inset-top)) + 60px);left:50%;transform:translateX(-50%);width:calc(100% - 48px);max-width:960px;padding:10px 12px;pointer-events:auto;}
.guided-step-trail .input-trail-toggle {border-radius:14px;}
.step-trail-track {display:flex;align-items:center;gap:3px;min-width:0;overflow-x:auto;padding:4px;scrollbar-width:none;}
.step-trail-track::-webkit-scrollbar {display:none;}
.step-trail-segment {position:relative;flex:1 0 5px;min-width:5px;height:8px;border-radius:999px;background:var(--trail-color,#ffffff26);transition:background-color .25s ease;}
:is(.step-trail-segment,.input-trail-legend span)[data-state="complete"] {--trail-color:#69c68e;}
:is(.step-trail-segment,.input-trail-legend span)[data-state="started"] {--trail-color:#e4b955;}
:is(.step-trail-segment,.input-trail-legend span)[data-state="loaded"] {--trail-color:#ffffff61;}
:is(.step-trail-segment,.input-trail-legend span)[data-state="loading"] {--trail-color:#ffffff38;}
:is(.step-trail-segment,.input-trail-legend span)[data-state="unloaded"],.input-trail-legend span[data-state="failed"] {--trail-color:#ffffff26;}
.step-trail-segment[aria-current="step"] {outline:1.5px solid #fff;outline-offset:1px;}
.step-trail-segment[data-loading="true"]::after {content:"";position:absolute;inset:0;border-radius:inherit;background:#ddd;animation:step-trail-loading 1.4s ease-in-out infinite;}
@keyframes step-trail-loading {0%,100% {opacity:.08;}50% {opacity:.55;}}
.step-trail-segment[data-failed="true"]::before {content:"";position:absolute;right:0;top:-2px;width:4px;height:4px;border-radius:50%;background:#f48c80;}
.step-trail-page-turn {flex:0 0 1px;width:1px;height:16px;background:#fff;margin-inline:3px;opacity:.9;}
.input-trail-legend {display:flex;justify-content:center;gap:8px 16px;flex-wrap:wrap;font-size:.68rem;color:inherit;}
.input-trail-legend span {display:inline-flex;align-items:center;gap:8px;}
.input-trail-legend span::before {content:"";width:18px;height:8px;border-radius:999px;background:var(--trail-color,#ffffff26);}
.input-trail-legend span[data-state="current"]::before {outline:2px solid #fff;outline-offset:2px;}
.input-trail-legend span[data-state="loading"]::before {animation:step-trail-loading 1.4s ease-in-out infinite;}
.input-trail-legend span[data-state="failed"]::before {box-shadow:inset -4px 0 #f48c80;}
.input-trail-legend .step-trail-page-legend::before {width:1px;height:16px;border-radius:0;background:#fff;margin-inline:8px;}
.input-trail-popover {background:#202226;color:#fff;color-scheme:dark;}
.input-trail-popover .input-trail-legend span::before {width:18px;height:8px;}
.input-trail-popover .input-trail-legend .step-trail-page-legend::before {width:1px;height:16px;}
@media(max-width:600px) {.guided-step-trail {width:calc(100% - 32px);}}
@media(prefers-reduced-motion:reduce) {.step-trail-segment,.step-trail-segment[data-loading="true"]::after,.input-trail-legend span[data-state="loading"]::before {transition:none;animation:none;}.step-trail-segment[data-loading="true"]::after {opacity:.28;}}

/* First picks keep three generous slots throughout both setup journeys. */
.setup-journey .entry-shell:has(.first-picks) {width:min(1240px,100%);min-width:0;flex-shrink:0;}
/* StateScope emits a flex item: constrain it before the carousel computes its tracks. */
.add-profile-journey > div {width:100%;min-width:0;}
.first-picks {width:100%;min-width:0;}
.first-picks .first-picks-grid {display:grid;grid-template-columns:repeat(3,minmax(min(300px,calc(100% - 4px)),1fr));grid-auto-flow:column;gap:20px;width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:2px;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;padding:4px 2px 14px;margin:20px 0;align-items:start;}
.first-picks-grid > * {min-width:0;scroll-snap-align:start;}
.first-picks-grid .topic-card {aspect-ratio:auto;min-height:380px;}
.first-picks-grid .topic-card-image,.first-picks-grid .topic-card-art {min-height:240px;}
.first-picks-grid .topic-card-type {flex-wrap:wrap;}
.first-picks-grid .feed-card-footer {flex-wrap:wrap;}
.first-picks .setup-content-card {display:flex;flex-direction:column;min-height:380px;}
.first-picks .setup-content-art {position:relative;aspect-ratio:auto;height:240px;min-height:240px;}
.first-picks .setup-content-copy {min-height:140px;padding:20px;}
.first-picks .setup-content-copy h3 {margin:0;line-height:1.35;overflow-wrap:anywhere;}
.first-pick-placeholder {min-height:380px;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--surface);}
.first-pick-placeholder-art {height:240px;background:var(--surface-subtle);}
.first-pick-placeholder-copy {display:grid;gap:14px;padding:24px;}
.first-pick-placeholder-copy span {height:14px;border-radius:5px;background:var(--border);}
.first-pick-placeholder-copy span:last-child {width:60%;}
.first-pick-placeholder,.first-picks .setup-content-art[data-loading="true"],.first-picks .topic-card-art:has(.word-illustration-spinner) {position:relative;isolation:isolate;}
.first-pick-placeholder::after,.first-picks .setup-content-art[data-loading="true"]::after,.first-picks .topic-card-art:has(.word-illustration-spinner)::after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 25%,rgb(255 255 255 / .12) 50%,transparent 75%) 0 0 / 200% 100%;animation:shimmer 1.6s linear infinite;}
.first-picks > .setup-step-actions {margin-top:20px;}
@media(prefers-reduced-motion:reduce) {.first-pick-placeholder::after,.first-picks .setup-content-art[data-loading="true"]::after,.first-picks .topic-card-art:has(.word-illustration-spinner)::after {animation:none;}}

/* Align the full language selector with the measured page content column. */
.header-actions { display: flex; flex: none; align-items: center; gap: 12px; margin-inline-start: auto; }
.header-language-trigger .learning-profile-flag { position: relative; }
.header-language-name { font-size: 1.05rem; font-weight: 650; }
.header-language-name, .header-language-trigger > .shell-icon {
  position: absolute; visibility: hidden; width: max-content; white-space: nowrap;
}
.app-header[data-home="true"] .header-language-menu { position: absolute; visibility: hidden; pointer-events: none; }
.app-header[data-language-room="true"] .header-language-menu {
  position: absolute; left: var(--header-language-left); top: calc(var(--header-language-top) - 20px);
}
.app-header[data-language-room="true"] .header-language-trigger {
  display: inline-flex; align-items: center; gap: 8px; width: max-content; min-width: 0;
  padding: 4px 8px; font-size: 1.05rem; font-weight: 650; color: var(--text); transform-origin: left center;
}
.app-header[data-language-room="true"] .header-language-trigger .learning-profile-flag { width: 28px; height: 28px; font-size: 1.35rem; }
.app-header[data-language-room="true"] .header-language-name,
.app-header[data-language-room="true"] .header-language-trigger > .shell-icon { position: static; visibility: inherit; }
.app-header[data-language-room="true"] .header-language-trigger > .shell-icon { color: var(--muted); flex: none; }
.app-header[data-language-room="true"] .header-language-menu > .profile-menu-popover {
  inset-inline-start: var(--header-language-left); inset-inline-end: auto;
}
.app-header[data-home="true"][data-language-docked="true"] .header-language-menu { visibility: visible; pointer-events: auto; }
.home-dashboard[data-language-in-header="true"] .home-language-controls {
  min-height: 0; padding: 0; gap: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.home-dashboard[data-language-in-header="true"] .home-language-controls > .home-language-menu {
  position: absolute; visibility: hidden; pointer-events: none;
}
.home-dashboard[data-language-in-header="true"] .home-language-controls > .home-target-level { display: none; }
.home-dashboard[data-language-in-header="true"][data-feed-merged="true"] .home-language-controls {
  min-height: 52px; padding: 8px 12px;
  background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 1px 0 var(--border);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
@media(max-width:760px) { .header-actions { gap: 6px; } }
@media(max-width:380px) { .header-actions { gap: 3px; } }

/* Question prompts sit between the picture and response surfaces. */
.input-step > .input-question {width:min(100%,960px);padding:0 12px;font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:700;line-height:1.4;text-align:center;}
.input-question p {margin:0;min-width:0;overflow-wrap:anywhere;}
.input-question .speech-control {flex:none;}

/* Prepared vocabulary introductions precede sentence playback in casual previews. */
.preview-preparation {display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.9rem;line-height:1.45;color:var(--text)}
.preview-preparation small {opacity:.8;font-variant-numeric:tabular-nums}
.comic-keyword-preview {animation:preview-panel-in 280ms ease-out both}
.comic-keyword-preview.is-leaving {animation:preview-panel-out 280ms ease-in both;pointer-events:none}
.comic-keyword-content {position:relative;padding:24px 28px 28px;max-height:inherit;overflow-y:auto;overscroll-behavior:contain}
.comic-keyword-content h2 {margin:0 0 20px;font-size:1.05rem;font-weight:650;letter-spacing:.015em}
.comic-keyword-grid {display:grid;grid-template-columns:repeat(var(--keyword-count),minmax(0,1fr));gap:24px;align-items:start}
.comic-keyword {display:grid;justify-items:center;align-content:start;gap:8px;min-width:0;text-align:center;animation:preview-word-in 360ms ease-out both}
.comic-keyword img {display:block;width:100%;height:clamp(100px,20vh,190px);object-fit:contain;user-select:none;-webkit-user-drag:none}
.comic-keyword strong {font-size:clamp(1.5rem,3vw,2.3rem);font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.comic-keyword-phonetic {font-size:clamp(1rem,1.8vw,1.3rem);line-height:1.4;opacity:.85;overflow-wrap:anywhere}
.comic-keyword .speech-control {margin-top:4px}
.comic-preview-sentence {animation:preview-panel-in 320ms ease-out both}
@keyframes preview-panel-in {from {opacity:0;transform:translateY(18px) scale(.985)} to {opacity:1;transform:none}}
@keyframes preview-panel-out {to {opacity:0;transform:translateY(-18px) scale(.985)}}
@keyframes preview-word-in {from {opacity:0;transform:translateY(10px) scale(.94)} to {opacity:1;transform:none}}
@media(max-width:600px){.comic-keyword-content {padding:18px 14px 20px}.comic-keyword-grid {gap:10px}.comic-keyword-content h2 {margin-bottom:12px}.comic-keyword strong {font-size:clamp(1.2rem,5vw,1.65rem)}.comic-keyword img {height:clamp(82px,16vh,145px)}}
@media(prefers-reduced-motion:reduce){.comic-keyword-preview,.comic-keyword-preview.is-leaving,.comic-keyword,.comic-preview-sentence {animation:none}}
@media(max-height:500px){.comic-keyword-content {padding:12px 16px}.comic-keyword-content h2 {margin-bottom:8px}.comic-keyword-grid {gap:16px}.comic-keyword {gap:3px}.comic-keyword img {height:60px}.comic-keyword strong {font-size:1.3rem}.comic-keyword-phonetic {font-size:.9rem}.comic-keyword .speech-button {width:32px;height:32px}}

.section-heading.topic-learning-heading { margin-top: 28px; }

.assistant-user-message-copy { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.assistant-user-message-copy[data-expanded="true"] { display: block; overflow: visible; }
button.assistant-user-message-expand { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 2px 0; min-height: 30px; font-size: .8rem; color: var(--text-secondary); text-decoration: none; white-space: normal; }

.assistant-list-preview { flex-wrap: wrap; }
.assistant-list-preview > small { margin-inline-start: auto; font-size: .85rem; white-space: nowrap; }

.assistant-user-message-chevron { display: inline-flex; transition: transform .15s ease; }
.assistant-user-message-chevron[data-expanded="true"] { transform: rotate(180deg); }

.character-row-actions .character-progress-inline { margin: 0; padding: 0; border: 0; }

.preview-preparation.error { color: var(--coral-ink, #c44b42); }
.comic-welcome .preview-preparation.error { color: #ffc4b9; }

button.reader-sentence-speaker { display:inline-flex; vertical-align:middle; margin:0 .5em .2em 0; padding:0; width:44px; height:44px; min-height:44px; border:0; border-radius:50%; background:transparent; color:var(--text); }
button.reader-sentence-speaker:hover:not(:disabled) { background:transparent; box-shadow:0 0 0 2px var(--border); }
.reader-sentence-speaker img,.reader-speaker-initial {width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;}
.reader-speaker-initial {display:inline-grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);}
.reader-character-profile { width:min(300px,calc(100vw - 32px)); }
.reader-character-profile figure { margin:0; text-align:center; }
.reader-character-profile-portrait {display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;}
.reader-character-profile figcaption {display:grid;gap:4px;margin-top:12px;text-align:center;}
.reader-character-name-reading {color:var(--text-secondary);font-size:.9rem;}

/* Standalone My Content reader learning and practice controls. */
/* Preview only this document's passage, without changing its display preference. */
.reader-view:has(> .reader-flashcard-panel > .reader-learning-progress:focus-visible) > .reading-page > .progressive-reading { --reader-progress-fill: 45%; --reader-progress-line: 0%; }
@media (hover: hover) {
    .reader-view:has(> .reader-flashcard-panel > .reader-learning-progress:hover) > .reading-page > .progressive-reading { --reader-progress-fill: 45%; --reader-progress-line: 0%; }
}
.reader-practice-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.reader-practice-panel > .reader-practice-launch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reader-practice-panel > .reader-practice-launch > :is(button, .button-link) { width: 100%; justify-content: flex-start; text-align: start; }
.reader-view > .reader-practice-panel { margin-top: 22px; }
.reader-view > .reader-practice-panel > .reader-practice-launch > :first-child { grid-column: 1 / -1; }
@media (max-width: 600px) { .reader-practice-panel > .reader-practice-launch { grid-template-columns: 1fr; } }
.reader-flashcard-panel { display: grid; gap: 12px; margin: 14px 0 0; }
.reader-practice-panel, button.reader-learning-progress { padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
button.reader-learning-progress { display: block; width: 100%; color: var(--text); text-align: start; }
button.reader-learning-progress:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.reader-practice-panel > p { margin: 10px 0 0; font-size: .86rem; }
.flashcard-progress-matrix { min-width: 0; margin-top: 18px; }
.flashcard-matrix-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.flashcard-progress-matrix p, .flashcard-matrix-pagination { font-size: .8rem; }
.flashcard-progress-matrix > p { margin-top: 12px; }
.flashcard-matrix-controls { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(130px, .65fr) minmax(160px, .8fr); gap: 8px; margin-bottom: 12px; }
.flashcard-matrix-controls input, .flashcard-matrix-controls select { min-width: 0; width: 100%; margin: 0; font-size: .8rem; }
@media (max-width: 700px) {
  .flashcard-matrix-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flashcard-matrix-search { grid-column: 1 / -1; }
}
.flashcard-matrix-scroll { max-width: 100%; max-height: min(65vh, 600px); overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.flashcard-matrix-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flashcard-matrix-table { width: 100%; min-width: 840px; border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.flashcard-matrix-table .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.flashcard-matrix-table th, .flashcard-matrix-table td { padding: 12px; border-bottom: 1px solid var(--border); border-inline-end: 1px solid var(--border); }
.flashcard-matrix-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-subtle); font-size: .75rem; text-align: center; }
button.flashcard-matrix-sort { display: flex; justify-content: center; gap: 6px; width: 100%; padding: 2px 0; background: transparent; color: var(--text-secondary); font-size: inherit; }
.flashcard-matrix-table thead th:first-child .flashcard-matrix-sort { justify-content: flex-start; }
button.flashcard-matrix-sort:hover, .flashcard-matrix-table th[aria-sort]:not([aria-sort="none"]) button { color: var(--text); }
.flashcard-matrix-table tr > :first-child { position: sticky; inset-inline-start: 0; z-index: 1; min-width: 180px; max-width: 260px; background: var(--surface); text-align: start; }
.flashcard-matrix-table thead th:first-child { z-index: 3; background: var(--surface-subtle); }
.flashcard-matrix-table tbody th { font-weight: 400; overflow-wrap: anywhere; }
.flashcard-matrix-meaning { display: block; color: var(--text-secondary); font-size: .75rem; margin-top: 4px; line-height: 1.4; }
.flashcard-matrix-table td { min-width: 100px; padding: 0; text-align: center; font-variant-numeric: tabular-nums; }
.flashcard-matrix-table td.flashcard-matrix-readonly { padding: 12px; }
button.flashcard-matrix-score { display: flex; flex-direction: column; justify-content: center; gap: 0; width: 100%; min-height: 70px; padding: 12px; border-radius: 0; background: transparent; color: var(--text); }
button.flashcard-matrix-score:hover:not(:disabled), button.flashcard-matrix-score[aria-expanded="true"] { background: rgb(128 128 128 / .15); box-shadow: inset 0 0 0 2px var(--accent); }
button.flashcard-matrix-score:focus-visible, button.flashcard-matrix-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
button.flashcard-matrix-score[aria-disabled="true"] { opacity: 1; cursor: progress; }
button.flashcard-matrix-score small { font-weight: 400; color: var(--text-secondary); }
.flashcard-matrix-table td strong { display: block; font-size: 1rem; }
.flashcard-matrix-table td small { display: block; margin-top: 4px; font-size: .7rem; }
.flashcard-matrix-table tr > :last-child { border-inline-end: 0; }
.flashcard-matrix-table tbody tr:last-child > * { border-bottom: 0; }
.flashcard-matrix-pagination { margin-top: 14px; justify-content: flex-start; }
.flashcard-matrix-pagination p { flex: 1; min-width: 160px; }
.flashcard-matrix-pagination button { padding: 8px 12px; font-size: .8rem; }
.flashcard-matrix-empty { padding: 18px 0; color: var(--text-secondary); }
/* Preview → Learn → Understand: one connected journey, with distinct activity art. */
.topic-core-activities { position:relative; gap:14px; isolation:isolate; }
.topic-core-activities::before { content:""; position:absolute; inset-block:34px; inset-inline-start:22px; width:2px; z-index:-1; background:linear-gradient(#8df5d2 8%,#ae83ee 50%,#83caff 92%); opacity:.75; }
.topic-activity-row[data-primary-step] { --step-color:#8df5d2; --step-ink:light-dark(#176b59,#9aefd4); display:grid; grid-template-columns:46px minmax(0,1fr); gap:22px; align-items:center; position:relative; }
.topic-activity-row[data-primary-step="learn"] { --step-color:#b68bff; --step-ink:light-dark(#6840a7,#c5a3ff); }
.topic-activity-row[data-primary-step="understand"] { --step-color:#85caff; --step-ink:light-dark(#246598,#8ed0ff); }
.content-step-marker { display:grid; place-items:center; width:44px; height:44px; box-sizing:border-box; border:2px solid var(--step-color); border-radius:50%; color:var(--step-ink); background:var(--bg); font-size:1rem; font-weight:650; z-index:1; }
[data-step-state="completed"] .content-step-marker { width:38px; height:38px; margin-inline:3px; color:#122f28; background:var(--step-color); box-shadow:0 0 18px color-mix(in srgb,var(--step-color) 35%,transparent); }
[data-step-state="current"] .content-step-marker { border-width:4px; background:color-mix(in srgb,var(--step-color) 25%,var(--bg)); box-shadow:0 0 20px color-mix(in srgb,var(--step-color) 30%,transparent); }
.topic-page [data-primary-step] .topic-activity { display:grid; grid-template-columns:minmax(180px,27%) minmax(0,1fr) minmax(180px,23%); gap:0; min-height:164px; padding:0; border-radius:21px; border:1px solid color-mix(in srgb,var(--step-color) 22%,var(--border)); background:linear-gradient(110deg,color-mix(in srgb,var(--step-color) 14%,transparent),transparent 48%),color-mix(in srgb,var(--surface) 94%,transparent); color:var(--text); box-shadow:0 5px 18px rgb(0 0 0 / .09); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.topic-page [data-primary-step][data-step-state="current"] .topic-activity { border-color:var(--step-color); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--step-color) 55%,transparent),0 0 25px color-mix(in srgb,var(--step-color) 13%,transparent); background:linear-gradient(110deg,color-mix(in srgb,var(--step-color) 18%,transparent),color-mix(in srgb,var(--step-color) 5%,transparent)),color-mix(in srgb,var(--surface) 94%,transparent); }
.topic-page [data-primary-step] .topic-activity:hover:not(:disabled) { border-color:var(--step-color); background-color:var(--surface); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--step-color) 50%,transparent),0 8px 24px rgb(0 0 0 / .12); }
.topic-page [data-primary-step] .topic-activity:focus-visible { outline:3px solid var(--step-ink); outline-offset:4px; }
.content-step-art { align-self:stretch; display:flex; align-items:center; justify-content:center; overflow:hidden; min-width:0; border-radius:20px 0 0 20px; }
.content-step-art img { display:block; width:100%; max-width:340px; height:164px; object-fit:cover; }
.topic-page [data-primary-step] .content-step-copy { gap:7px; padding:20px 26px 20px 16px; }
.content-step-eyebrow { color:var(--step-ink); font-size:.9rem; font-weight:650; }
.topic-page [data-primary-step] .content-step-copy strong { font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.3; font-weight:700; text-wrap:pretty; }
.content-step-description { color:var(--text-secondary); font-size:.9rem; line-height:1.45; }
.content-step-completed { display:inline-flex; align-items:center; align-self:flex-start; gap:8px; border:1px solid color-mix(in srgb,var(--step-color) 35%,var(--border)); border-radius:99px; padding:4px 10px 4px 5px; background:color-mix(in srgb,var(--step-color) 9%,transparent); color:var(--step-ink); font-size:.85rem; font-weight:550; }
.content-step-completed svg { border-radius:50%; background:var(--step-color); color:#14342a; padding:3px; box-sizing:content-box; }
.content-step-ready { display:flex; align-items:center; gap:9px; color:var(--step-ink); font-size:.85rem; }
.content-step-ready svg { border:1px solid currentColor; padding:3px; border-radius:50%; box-sizing:content-box; }
.content-step-copy .topic-completion { margin-top:5px; gap:16px; }
.content-step-copy .topic-completion-track { height:10px; background:color-mix(in srgb,var(--step-color) 10%,var(--border)); }
.content-step-copy .topic-completion-track > span { background:var(--step-color); }
.content-step-copy .topic-completion > small { color:var(--text-secondary); }
.content-step-copy .preview-preparation { flex-wrap:wrap; font-size:.85rem; }
.content-step-copy .status-pulse { background:var(--step-ink); }
.content-step-action { display:flex; align-items:center; justify-content:center; align-self:stretch; margin-block:26px; padding:18px 24px; border-inline-start:1px solid color-mix(in srgb,var(--text) 14%,transparent); }
.content-step-cta { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:44px; padding:9px 16px; border:1px solid var(--step-ink); border-radius:99px; color:var(--step-ink); background:color-mix(in srgb,var(--step-color) 6%,transparent); font-size:.9rem; font-weight:600; line-height:1.3; box-sizing:border-box; }
.content-step-cta svg { flex:none; }
.content-step-action[data-prominent="true"] .content-step-cta { color:#24123c; border-color:var(--step-color); background:var(--step-color); }
[data-primary-step="preview"] .content-step-action[data-prominent="true"] .content-step-cta { color:#13392f; }
[data-primary-step="understand"] .content-step-action[data-prominent="true"] .content-step-cta { color:#102f48; }
[data-primary-step] > .error { grid-column:2; }
@media (max-width:1000px) {
 .topic-activity-row[data-primary-step] { gap:14px; }
 .topic-page [data-primary-step] .topic-activity { grid-template-columns:170px minmax(0,1fr) 170px; }
 .topic-page [data-primary-step] .content-step-copy { padding-inline:8px 16px; }
 .content-step-action { padding-inline:16px; }
}
@media (max-width:760px) {
 .topic-core-activities::before { inset-inline-start:16px; inset-block:36px; }
 .topic-activity-row[data-primary-step] { grid-template-columns:34px minmax(0,1fr); gap:10px; }
 .content-step-marker { width:32px; height:32px; font-size:.8rem; }
 [data-step-state="completed"] .content-step-marker { width:30px; height:30px; margin-inline:1px; }
 [data-step-state="current"] .content-step-marker { border-width:3px; }
 .topic-page [data-primary-step] .topic-activity { grid-template-columns:minmax(90px,25%) minmax(0,1fr); }
 .content-step-art { grid-row:1 / 3; }
 .content-step-art img { height:150px; max-width:none; object-fit:contain; width:175px; flex:none; }
 .topic-page [data-primary-step] .content-step-copy { padding:18px 16px 12px 8px; gap:6px; }
 .content-step-action { grid-column:2; align-self:start; justify-content:flex-start; border:0; margin:0; padding:0 16px 18px 8px; }
 .content-step-cta { width:auto; min-width:150px; }
}
@media (prefers-reduced-transparency:reduce) {
 .topic-page [data-primary-step] .topic-activity { background-color:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media (prefers-reduced-motion:reduce) {
 .topic-page [data-primary-step] .topic-activity { transition:none; }
}

/* Vocabulary pages keep only the viewport mounted; fixed row geometry makes
   scrollbar jumps independent of library size. Full text remains on the word page. */
.vocabulary-window { height: min(70vh, 760px); min-height: 340px; overflow: auto; overscroll-behavior: contain; overflow-anchor: none; position: relative; }
.vocabulary-window-content { position: relative; }
.vocabulary-window .vocabulary-window-row { position: absolute; left: 0; right: 0; height: 112px; box-sizing: border-box; border-bottom: 1px solid var(--border); border-top: 0; }
.vocabulary-window .vocabulary-compact-link > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vocabulary-window .vocabulary-word-type { display: block; overflow: hidden; text-overflow: ellipsis; }
.vocabulary-window .vocabulary-word-progress { flex: 0 0 auto; max-width: 80px; }
.vocabulary-window .vocabulary-word-progress > button.word-progress-chip { width: auto; max-width: 80px; overflow: hidden; text-overflow: ellipsis; font-size: .75rem; }
.vocabulary-result-count { margin: 12px 0; }
.vocabulary-page-error { padding: 12px 0; }

/* Teaching introductions: look first, then listen, then respond. Keep the picture
   anchored as the two independently framed panels arrive underneath it. */
.input-step[data-introduction] { margin-block:0; }
.input-step[data-introduction]:not([data-reviewing="true"]) .input-stage[aria-busy="false"] .input-picture img { animation:input-image-arrive 360ms cubic-bezier(.2,.8,.25,1) both; }
.input-teaching-caption { width:min(100%,760px); padding:20px 24px; animation:input-panel-arrive 300ms ease-out both; }
.input-experience .input-teaching-caption { background:var(--surface); background:color-mix(in srgb,var(--surface) var(--input-glass-opacity),transparent); border:1px solid color-mix(in srgb,var(--border) 80%,transparent); border-radius:24px; box-shadow:0 8px 28px #0000000c; -webkit-backdrop-filter:var(--input-glass-filter); backdrop-filter:var(--input-glass-filter); }
.input-step[data-introduction] > .input-response { animation:input-panel-arrive 300ms ease-out both; }
@keyframes input-image-arrive { from { opacity:0; transform:translateY(10px) scale(.94); } 70% { opacity:1; transform:translateY(-2px) scale(1.015); } to { opacity:1; transform:none; } }
@keyframes input-panel-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media(max-width:650px) { .input-teaching-caption { padding:16px; } }
@media(prefers-reduced-motion:reduce) {
 .input-step[data-introduction]:not([data-reviewing="true"]) .input-stage[aria-busy="false"] .input-picture img,.input-teaching-caption,.input-step[data-introduction] > .input-response { animation:none; }
}

/* Retained visits keep their state in Rust, without hidden interactive controls. */
.input-step-cache:empty { display:none; }
.input-step-region { padding-bottom:110px; }
.input-experience .input-screen-previous,.input-experience .input-screen-next { position:fixed; bottom:max(22px,env(safe-area-inset-bottom)); z-index:120; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; margin:0; box-shadow:var(--shadow-sm); }
.input-experience .input-screen-previous { left:max(20px,env(safe-area-inset-left)); background:color-mix(in srgb,var(--surface) 94%,transparent); border:1px solid var(--border); color:var(--text-secondary); }
.input-experience .input-screen-next { right:max(20px,env(safe-area-inset-right)); }
.input-experience .input-screen-previous:disabled { opacity:.4; }
.input-step[data-reviewing="true"] :is(.input-picture img,.input-teaching-caption,.input-response) { animation:none; }
@media(max-width:650px) { .input-experience .input-screen-previous { left:14px; }.input-experience .input-screen-next { right:14px; } }

/* Picture hints stay beneath their word without intercepting word selection. */
.reader-preview-word-image { display: flex; align-items: center; justify-content: center; height: 1.8em; pointer-events: none; user-select: none; }
.reader-preview-word-image img { width: 1.8em; height: 1.8em; object-fit: contain; }

/* Keep the preview heading in its own compact scrim above the image panel. */
.comic-controls.comic-keyword-preview {display:flex;flex-direction:column;gap:10px;overflow:visible;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.comic-keyword-heading {position:relative;align-self:flex-start;flex:none;margin:0;padding:10px 16px;font-size:.9rem;font-weight:650;line-height:1.3;letter-spacing:.015em;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(12,13,17,.68);box-shadow:0 6px 20px #0003;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.comic-keyword-panel {position:relative;min-height:0;width:100%;padding:0;display:flex;flex-direction:column;align-items:stretch;border:1px solid rgba(255,255,255,.18);border-radius:22px;background:rgba(12,13,17,.68);box-shadow:0 12px 48px #0004;overflow:hidden;backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%)}
@media(max-width:600px){.comic-keyword-heading {padding:8px 12px;font-size:.85rem}.comic-keyword-panel {border-radius:18px}}
.feed-suggestion-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; width:100%; aspect-ratio:4/3; padding:28px; border:2px dashed var(--border-strong,var(--border)); border-radius:20px; background:color-mix(in srgb,var(--surface) 45%,transparent); color:var(--text); text-align:center; }
.feed-suggestion-placeholder:hover:not(:disabled) { border-color:var(--accent); background:color-mix(in srgb,var(--surface) 75%,transparent); }
.feed-suggestion-placeholder strong { font-size:1.15rem; }
.feed-suggestion-placeholder em { font-size:.9rem; font-weight:400; color:var(--muted); }
@container discovery-layout (width < 620px) {
 .feed-suggestion-placeholder { aspect-ratio:8/3; gap:6px; padding:10px; line-height:1.3; }
 .feed-suggestion-placeholder > .shell-icon { width:24px; height:24px; }
}
.feed-generation-topics { display:grid; gap:10px; max-height:250px; overflow:auto; padding:6px; }
.feed-generation-form { display:grid; gap:16px; }
.feed-generation-form fieldset { margin:0; }
.feed-generation-topics label.checkbox-row { display:flex; align-items:center; gap:10px; margin:0; }
.feed-generation-topics input[type="checkbox"] { width:20px; height:20px; margin:0; flex:none; }

/* Supporting activities use compact illustrations and quiet individual accents.
   Their icon-sized art frames preserve the existing row height. */
.topic-activity-row[data-support-activity] { --support-color:#e3bd71; --support-ink:light-dark(#85611e,#e4c077); }
.topic-activity-row[data-support-activity="coach"] { --support-color:#e5a47b; --support-ink:light-dark(#945336,#e9ad86); }
.topic-activity-row[data-support-activity="podcast"] { --support-color:#b3a0df; --support-ink:light-dark(#705998,#c3b2ed); }
.topic-activity-row[data-support-activity="reading"] { --support-color:#94bdd9; --support-ink:light-dark(#396b87,#a1cce5); }
.topic-activity-row[data-support-activity="read-aloud"] { --support-color:#d3a0b9; --support-ink:light-dark(#964e73,#dfb1c8); }
.topic-activity-row[data-support-activity="translate"] { --support-color:#8fc9bc; --support-ink:light-dark(#306e66,#a0d8cb); }
.topic-activity-row[data-support-activity="roleplay"] { --support-color:#d9af95; --support-ink:light-dark(#916047,#e1baa3); }
.topic-activity-row[data-support-activity="pictures"] { --support-color:#b4a0e8; --support-ink:light-dark(#6955a2,#c3b1ec); }
.topic-page [data-support-activity] .topic-activity { grid-template-columns:clamp(84px,10vw,128px) minmax(0,1fr) 34px; border-color:color-mix(in srgb,var(--support-color) 16%,var(--border)); background:linear-gradient(105deg,color-mix(in srgb,var(--support-color) 9%,transparent),transparent 42%),var(--surface); }
@supports ((backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px))) {
 .topic-page [data-support-activity] .topic-activity { background:linear-gradient(105deg,color-mix(in srgb,var(--support-color) 9%,transparent),transparent 42%),color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
}
.topic-page [data-support-activity] .topic-activity-icon { position:relative; width:100%; height:clamp(48px,6vw,72px); border-radius:0; background:none; overflow:visible; }
.topic-page [data-support-activity] .topic-activity-icon>img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(100% + 20px); height:calc(100% + 28px); max-width:none; object-fit:contain; pointer-events:none; }
.support-activity-action { display:grid; place-items:center; flex:none; width:34px; height:34px; border:1px solid color-mix(in srgb,var(--support-color) 35%,var(--border)); border-radius:50%; color:var(--support-ink); background:color-mix(in srgb,var(--support-color) 6%,transparent); }
.topic-page [data-support-activity] .topic-completion-track { background:color-mix(in srgb,var(--support-color) 7%,var(--border)); }
.topic-page [data-support-activity] .topic-completion-track>span { background:var(--support-color); }
:root:not([data-topic-hover-suppressed]) .topic-page [data-support-activity] .topic-activity:hover:not(:disabled) { border-color:color-mix(in srgb,var(--support-color) 55%,var(--border)); background-color:var(--surface-hover); box-shadow:var(--shadow); }
.topic-page [data-support-activity] .topic-activity:focus-visible { outline:2px solid var(--support-ink); outline-offset:4px; }
.topic-page [data-support-activity] .topic-activity:disabled { border-color:var(--border); color:var(--text-secondary); }
@media(max-width:600px),(max-height:650px) {
 .topic-page [data-support-activity] .topic-activity { grid-template-columns:48px minmax(0,1fr); }
 .topic-page [data-support-activity] .topic-activity-icon { height:48px; }
 .support-activity-action { display:none; }
 .topic-page [data-support-activity] .topic-activity-icon>img { width:76px; height:66px; }
}
@media(prefers-reduced-transparency:reduce) {
 .topic-page [data-support-activity] .topic-activity { background-color:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* Prefer touch wording whenever a touch-like pointing device is available,
   including touch laptops. The query also responds to input-device changes. */
.feed-generation-tap-hint { display:none; }
@media (any-pointer:coarse) {
 .feed-generation-click-hint { display:none; }
 .feed-generation-tap-hint { display:inline; }
}

/* Class notes: a quiet, readable board for shared lessons. */
.class-notes-library { max-width: 1000px; margin: 0 auto; }
.class-notes-create { display:flex; gap:12px; margin-top:28px; }
.class-notes-create input { flex:1; min-width:0; }
.class-notes-session-list { display:grid; gap:12px; margin-top:30px; }
.class-notes-session-card { display:flex; align-items:center; gap:18px; width:100%; padding:22px; text-align:start; color:var(--text); }
.class-notes-session-card > span { display:grid; gap:6px; flex:1; }
.class-notes-session-card strong { font-size:20px; }
.class-notes-session-card small { color:var(--muted); font-weight:400; }
.class-notes-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--muted); padding:80px 24px; gap:12px; }
.class-notes-empty h2 { color:var(--text); font-size:26px; margin:8px 0 0; }
.class-notes-empty p { max-width:480px; margin:0; }
dialog.reader-popup.class-notes-fullscreen:focus { outline:none; }
dialog.reader-popup.class-notes-fullscreen { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; inset:0; margin:0; border:0; border-radius:0; padding:0; background:var(--bg); box-shadow:none; }
.class-notes-fullscreen > .reader-popup-heading { display:none; }
.class-notes-fullscreen > .reader-popup-body { height:100%; max-height:none; overflow:hidden; padding:0; }
.class-notes-board { display:flex; flex-direction:column; height:100%; padding:0 32px; color:var(--text); }
.class-notes-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0 20px; border-bottom:1px solid var(--border); }
.class-notes-heading { min-width:0; }
.class-notes-heading .eyebrow { font-size:11px; letter-spacing:.16em; color:var(--muted); }
.class-notes-heading > div { display:flex; align-items:center; gap:10px; }
.class-notes-heading h1 { font-size:25px; line-height:1.35; margin:5px 0 0; overflow-wrap:anywhere; }
.class-notes-title-button { padding:0; border:0; background:none; color:inherit; font:inherit; text-align:start; cursor:pointer; overflow-wrap:anywhere; }
.class-notes-title-button:is(:hover,:active) { background:var(--surface-subtle); color:var(--text); }
.class-notes-title-button:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.class-notes-tools { display:flex; flex:none; gap:12px; align-items:center; }
.class-notes-tools .icon-button { width:44px; min-width:44px; height:44px; padding:6px; }
.class-notes-close { margin-left:0; }
.class-notes-selection-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:12px 0; border-bottom:1px solid var(--border); flex-shrink:0; }
.class-notes-selection-toolbar > strong { white-space:nowrap; }
.class-notes-selection-toolbar > .muted { font-size:13px; white-space:nowrap; }
.class-notes-selection-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-inline-start:auto; }
.class-notes-selection-actions button:not(.icon-button) { min-height:36px; padding:7px 11px; font-size:13px; }
.class-notes-selection-delete { color:var(--danger); }
.class-notes-column-headings { display:grid; gap:22px; padding:20px 6px 6px; font-size:10px; letter-spacing:.12em; color:var(--muted); overflow:hidden; flex-shrink:0; }
/* Always own vertical gestures, even for short lists. Contain prevents scroll
   chaining while preserving native rubber banding (unlike overscroll: none). */
.class-notes-rows { flex:1; overflow-x:hidden; overflow-y:scroll; min-width:0; min-height:0; padding:6px 0 12px; overscroll-behavior-y:contain; touch-action:pan-y pinch-zoom; }
.class-note-row { display:grid; align-items:center; column-gap:22px; padding:10px 6px; border-bottom:1px solid var(--border); min-width:650px; }
.class-note-row[data-pending="true"] { background:color-mix(in srgb,var(--accent) 3%,transparent); }
.class-note-target,.class-note-translation { min-width:0; overflow-wrap:anywhere; }
.class-note-text { font-size:var(--note-target-size); line-height:1.35; font-weight:550; }
.class-note-text .reader-word,.class-note-text .inline-reader { font-size:inherit; }
.class-note-text .reader-word-reading { font-size:var(--note-reading-size); }
.class-note-translation { font-size:var(--note-translation-size); line-height:1.35; }
.class-note-base { display:block; color:var(--muted); font-size:16px; margin-top:2px; }

.class-note-listen .speech-button { width:44px; height:44px; }
.class-note-listen .speech-timing-notice { font-size:10px; max-width:52px; }
.class-note-image { width:var(--note-image-size); display:grid; align-items:center; }
.class-note-image .word-illustration { width:100%; max-width:100%; margin:0; padding:0; border:0; background:transparent; }
.class-note-image .word-illustration-placeholder { min-height:var(--note-image-size); padding:8px; font-size:11px; }
.class-note-image img { width:var(--note-image-size); height:var(--note-image-size); object-fit:contain; }
.class-note-image .image-controls { opacity:0; }
.class-note-image:hover .word-image-controls,.class-note-image:focus-within .word-image-controls { opacity:1; }
.class-note-spinner { display:block; width:22px; height:22px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:class-note-spin 1s linear infinite; }
@keyframes class-note-spin { to { transform:rotate(360deg); } }
.class-notes-menu { position:relative; }
.class-notes-menu summary { list-style:none; cursor:pointer; }
.class-notes-menu summary::-webkit-details-marker { display:none; }
.class-notes-menu[open] > summary.icon-button { background:var(--accent); color:var(--accent-text); }
.class-notes-menu-items { position:absolute; right:0; top:calc(100% + 6px); min-width:220px; padding:6px; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:0 12px 36px #0002; z-index:20; }
.class-notes-menu-items :is(button,a.class-notes-export-download) { display:flex; align-items:center; justify-content:flex-start; gap:10px; width:100%; padding:12px; border:0; border-radius:8px; background:transparent; color:var(--text); font:inherit; font-weight:650; line-height:1.4; text-align:start; text-decoration:none; }
.class-notes-menu-items :is(button,a.class-notes-export-download):hover { background:var(--surface-subtle); }
.class-notes-menu-divider { border:0; border-top:1px solid var(--border); margin:6px 0; }
.class-notes-sortable { position:relative; padding-inline-start:28px; }
.class-notes-sortable.is-selected > .class-note-row { background:color-mix(in srgb,var(--accent) 10%,transparent); }
.class-notes-sortable.is-selected > .class-note-section { outline:2px solid var(--accent); outline-offset:-2px; }
.class-note-select { position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%); width:22px; height:22px; margin:0; accent-color:var(--accent); cursor:pointer; }
.class-note-move { position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%); width:24px; padding:6px 0; background:transparent; color:var(--muted); border:0; font-size:22px; line-height:1; cursor:grab; touch-action:none; user-select:none; }
.class-note-move:active { cursor:grabbing; transform:translateY(-50%); }
.class-note-move:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.class-notes-sortable.is-dragging { opacity:.45; }
.class-notes-sortable.drop-before::before,.class-notes-sortable.drop-after::after { content:""; position:absolute; inset-inline:0; height:3px; border-radius:2px; background:var(--accent); pointer-events:none; z-index:5; }
.class-notes-sortable.drop-before::before { top:0; }
.class-notes-sortable.drop-after::after { bottom:0; }
.class-notes-order-status { margin:0; font-size:12px; color:var(--muted); }
.class-note-section { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:8px 0 4px; padding:14px 18px; border-inline-start:4px solid var(--accent); border-radius:8px; background:var(--surface-subtle); }
.class-note-section-titles { min-width:0; overflow-wrap:anywhere; }
.class-note-section .eyebrow { font-size:11px; letter-spacing:.14em; color:var(--muted); }
.class-note-section h2 { font-size:var(--note-target-size); margin:4px 0; line-height:1.3; }
.class-note-section p { font-size:var(--note-translation-size); color:var(--muted); margin:0; line-height:1.35; }
.class-note-section-editor { display:grid; gap:18px; }
.class-note-section-editor label { display:grid; gap:8px; }
dialog.reader-popup#class-note-section-editor:focus { outline:none; }
dialog.reader-popup#class-note-section-editor { -webkit-user-select:none; user-select:none; }
dialog.reader-popup#class-note-section-editor input { -webkit-user-select:text; user-select:text; }
.class-notes-column-headings { margin-inline-start:28px; }
.class-notes-sharing { display:grid; gap:18px; }
.class-notes-sharing p { margin:0; }
.class-notes-sharing label { display:grid; gap:8px; }
.class-notes-sharing input { width:100%; min-width:0; }
.class-notes-share-actions { display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
.class-notes-share-actions .copy-text-button { display:inline-flex; align-items:center; gap:8px; }
.class-notes-rename-form { display:grid; gap:20px; }
.class-notes-rename-form label { display:grid; gap:8px; }
.class-notes-add-words-form { display:grid; gap:16px; }
.class-notes-add-words-form p { margin:0; }
.class-notes-add-words-form label { display:grid; gap:8px; }
.class-notes-add-words-form :is(input,select) { width:100%; min-width:0; }
.class-notes-composer { display:grid; grid-template-columns:1fr auto; gap:16px; padding:10px 0 max(10px,env(safe-area-inset-bottom)); background:var(--bg); }
.class-notes-composer input { font-size:24px; min-height:66px; min-width:0; padding:16px 20px; border-radius:14px; }
.class-notes-composer button { border-radius:14px; padding:16px 24px; font-size:17px; display:flex; align-items:center; gap:8px; }
.class-notes-settings,.class-note-editor { display:grid; gap:18px; }
.class-notes-settings label,.class-note-editor label { display:grid; gap:8px; }
.class-notes-setting-toggles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.class-notes-setting-toggle { display:flex; justify-content:flex-start; gap:9px; width:100%; min-height:46px; padding:10px 14px; text-align:start; border:1px solid var(--border-strong); border-radius:10px; background:transparent; color:var(--text); font-weight:600; }
.class-notes-setting-toggle:hover { background:var(--surface-subtle); }
.class-notes-setting-toggle[data-selected="true"] { border-color:var(--accent); background:var(--accent); color:var(--accent-text); }
.class-notes-setting-toggle[data-selected="true"]:hover { background:var(--accent-hover); }
.class-notes-setting-toggle svg { flex:none; }
.class-notes-setting-slider { display:grid; gap:8px; }
.class-notes-setting-slider-label { display:flex; justify-content:space-between; gap:16px; font-weight:600; }
.class-notes-setting-slider-label output { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.class-notes-setting-slider input[type="range"] { width:100%; margin:0; }
@media(max-width:600px) { .class-notes-setting-toggles { grid-template-columns:1fr; } }
.class-note-edit-field { display:grid; gap:8px; }
.class-note-edit-field > button { justify-self:end; }
.class-note-editor textarea { width:100%; }
.class-notes-import { display:grid; gap:18px; }
.class-notes-import-items { max-height:45vh; overflow:auto; border-block:1px solid var(--border); }
.class-notes-import-item { display:flex; align-items:center; gap:16px; padding:16px 4px; border-bottom:1px solid var(--border); }
.class-notes-import-item input { width:20px; height:20px; flex:none; }
.class-notes-import-item span { display:grid; gap:5px; }
.class-notes-import-item strong { font-size:20px; }
.class-notes-import-item small { color:var(--muted); }
.class-note-pattern-link { background:none; border:0; padding:0; color:var(--text); text-align:start; font-size:var(--note-target-size); }
.class-note-kind { display:block; font-size:11px; letter-spacing:.14em; color:var(--muted); margin-bottom:3px; }
.class-note-pattern-preview { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.class-note-pattern-preview span { border-bottom:2px solid currentColor; font-size:16px; padding:2px 4px; }
@media(max-width:760px) { .class-notes-board { padding:0 16px; } .class-notes-toolbar { padding-top:16px; gap:8px; } .class-notes-heading h1 { font-size:20px; } .class-notes-tools { gap:8px; } .class-notes-close { margin-left:0; } .class-notes-composer input { font-size:20px; } .class-notes-composer button { font-size:0; padding:12px; } .class-note-row { gap:16px; } }
@media(prefers-reduced-motion:reduce) { .class-note-spinner { animation:none; } }

.class-note-word-help { display:inline; background:none; border:0; padding:0; color:inherit; font:inherit; line-height:inherit; text-align:inherit; }
.class-note-word-help:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }


.class-note-image .story-image-ai,.class-note-image .story-image-toolbar { opacity:0; }
.class-note-image:hover .story-image-ai,.class-note-image:hover .story-image-toolbar,.class-note-image:focus-within .story-image-ai,.class-note-image:focus-within .story-image-toolbar { opacity:1; }
.reported-word-image {position:relative;display:block;max-width:100%;}
.reported-word-image > img {display:block;width:100%;height:auto;object-fit:contain;}
.reported-word-image .word-image-report {position:absolute;right:0;bottom:0;display:grid;place-items:center;width:28px;height:28px;min-width:0;min-height:0;padding:7px;border:0;border-radius:6px;background:transparent;color:#fff;box-shadow:none;cursor:pointer;opacity:.66;}
@media (any-hover:hover) and (any-pointer:fine) {
  .reported-word-image .word-image-report {opacity:0;}
  .reported-word-image:hover .word-image-report,.reported-word-image:focus-within .word-image-report {opacity:1;}
}
.reported-word-image .word-image-report:active {opacity:1;}
.reported-word-image .word-image-report svg {filter:drop-shadow(0 1px 2px rgb(0 0 0 / .65));}
.reported-word-image .word-image-report:hover {background:rgb(0 0 0 / .3);}
.word-image-report:focus-visible,.word-image-unhide:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}
.reported-word-image.word-image-hidden {display:grid;place-items:center;aspect-ratio:1;width:100%;}
.word-image-unhide {display:grid;place-items:center;padding:8px;background:transparent;color:var(--muted);border:0;box-shadow:none;cursor:pointer;}
.word-image-unhide:hover {background:var(--surface-subtle);color:var(--text);}
.word-image-confirmation {display:contents;}
.word-image-confirmation-actions {display:flex;justify-content:flex-end;gap:12px;margin-top:24px;}
.word-illustration > .reported-word-image > img {aspect-ratio:1;}
.comic-keyword > .reported-word-image {width:100%;min-height:0;}

/* Keep preview illustrations bounded after the shared reportable-image wrapper.
   Miniatures follow the text size; introduction cards follow the viewport. */
.reader-preview-word-image > .reported-word-image.miniature,
.reader-preview-word-image > .reported-word-image.miniature > img {
  width:1.8em;height:1.8em;min-width:0;max-width:1.8em;max-height:1.8em;aspect-ratio:1;
}
.comic-controls.comic-keyword-preview {
  --keyword-image-size:clamp(64px,min(19vw,24dvh),220px);
  --keyword-label-size:clamp(1.1rem,min(2.6vw,4.5dvh),2.3rem);
  --keyword-reading-size:clamp(.8rem,min(1.5vw,2.8dvh),1.2rem);
}
.comic-keyword-preview .comic-keyword-content {padding:clamp(12px,2dvh,24px) clamp(12px,2vw,28px);}
.comic-keyword-preview .comic-keyword-grid {gap:clamp(8px,2vw,24px);}
.comic-keyword-preview .comic-keyword {gap:clamp(4px,1dvh,8px);}
.comic-keyword-preview .comic-keyword > .reported-word-image {
  width:100%;height:var(--keyword-image-size);max-height:var(--keyword-image-size);aspect-ratio:auto;
}
.comic-keyword-preview .comic-keyword > .reported-word-image > img {
  width:100%;height:100%;max-height:100%;object-fit:contain;
}
.comic-keyword-preview .comic-keyword strong {font-size:var(--keyword-label-size);}
.comic-keyword-preview .comic-keyword-phonetic {font-size:var(--keyword-reading-size);}
.comic-keyword-preview .comic-keyword .speech-button {
  width:clamp(32px,5dvh,44px);height:clamp(32px,5dvh,44px);min-height:0;min-width:0;
}

.comic-navigation .comic-preview-playback {flex:none;width:44px;min-width:44px;height:44px;padding:10px;}

/* A story visit waits only for its own decoded artwork and prepared audio. */
.comic-step-loading {position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:16px;width:max-content;max-width:calc(100% - 48px);padding:24px 28px;border-radius:20px;background:rgba(16,17,20,.88);color:#fff;text-align:center;pointer-events:auto}
.comic-step-loading p {margin:0}
.comic-step-spinner {width:36px;height:36px;border:3px solid rgba(255,255,255,.24);border-top-color:var(--marigold);border-radius:50%;animation:comic-step-spin .8s linear infinite}
@keyframes comic-step-spin {to {transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce) {.comic-step-spinner {animation-duration:2s}}
.comic-step-loading-back {position:absolute;bottom:max(24px,var(--safe-area-bottom,0px));left:50%;transform:translateX(-50%);z-index:6}

/* Character recognition shares the pronunciation composer with word cards. */
.character-practice-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.character-practice-options button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.study-scene:has(.character-recognition-dock) { grid-template-rows: minmax(90px, 1fr) auto; }
.character-recognition-dock { max-height: calc(var(--study-height) * .72); overflow: auto; padding: 16px 20px; gap: 10px; }
.character-recognition-dock > label { display: grid; gap: 6px; }
.character-recognition-dock > .switch-row { display: flex; align-items: center; gap: 10px; }
.character-recognition-dock .switch-row input { flex: 0 0 40px; }
/* All library practice uses the same bounded study stage as vocabulary. */
.study-scene:has(.phrase-answer-dock) { grid-template-rows: minmax(100px, 1fr) auto; }
.phrase-answer-dock { max-height: calc(var(--study-height) * .6); overflow: auto; padding: 18px 20px; }
.phrase-answer-dock textarea { min-height: 88px; resize: vertical; }
.phrase-answer-dock .switch-row { margin: 0; padding: 4px 0; }
.structure-practice .flashcard-familiarity { margin-top: 24px; }
.phrase-session .study-welcome .phrase-sentence { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.55; color: var(--text); }

/* Compact notes: one shared relative scale, stacked until laptop widths. */
.class-notes-toolbar { padding:14px 0 12px; }
.class-notes-rows { padding-top:0; }
.class-note-row { min-width:0; grid-template-columns:var(--note-image-size) minmax(0,1fr) 32px; gap:2px 10px; padding:8px 0; align-items:start; }
.class-note-row[data-images="false"] { grid-template-columns:minmax(0,1fr) 32px; }
.class-note-image { grid-column:1; grid-row:1; align-self:center; }
.class-note-content { grid-column:2; grid-row:1; min-width:0; align-self:center; }
.class-note-row[data-images="false"] .class-note-content { grid-column:1; }
.class-note-target { grid-column:2; grid-row:1; display:flex; align-items:flex-start; gap:6px; }
.class-note-target-copy { min-width:0; flex:1; }
.class-note-listen { flex:none; }
.class-note-listen .speech-button { width:32px; height:32px; min-height:32px; padding:6px; }
.class-note-text { line-height:1.2; }
.class-note-text .reader-word { margin:0; padding-block:0; row-gap:1px; line-height:1.2; }
.class-note-text .reader-word-reading { line-height:1.2; margin:0; padding:0; }
.class-note-translation { grid-column:2; grid-row:2; margin-top:2px; padding-inline-start:38px; line-height:1.2; }
.class-note-actions { grid-column:3; grid-row:1; }
.class-note-actions > .icon-button { width:32px; min-width:32px; height:32px; padding:4px; }
.class-note-row[data-images="false"] :is(.class-note-target,.class-note-translation) { grid-column:1; }
.class-note-row[data-images="false"] .class-note-actions { grid-column:2; }
.class-note-section { padding:12px; margin-top:12px; }
.class-notes-composer { gap:8px; }
.class-notes-composer input { font-size:16px; min-height:46px; padding:10px 12px; }
.class-notes-composer button { padding:10px 14px; }
.class-notes-size-range { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; font-weight:400; }
@media(min-width:1100px) {
 .class-note-content { display:contents; }
 .class-note-row { grid-template-columns:var(--note-image-size) minmax(0,1.3fr) minmax(0,1fr) 32px; column-gap:18px; align-items:center; }
 .class-note-translation { grid-column:3; grid-row:1; padding:0; }
 .class-note-actions { grid-column:4; }
 .class-note-image,.class-note-actions { grid-row:1; }
 .class-note-row[data-images="false"] { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 32px; }
 .class-note-row[data-images="false"] .class-note-translation { grid-column:2; }
 .class-note-row[data-images="false"] .class-note-actions { grid-column:3; }
 .class-note-row:not(:has(.class-note-translation)) { grid-template-columns:var(--note-image-size) minmax(0,1fr) 32px; }
 .class-note-row:not(:has(.class-note-translation)) .class-note-actions { grid-column:3; }
 .class-note-row[data-images="false"]:not(:has(.class-note-translation)) { grid-template-columns:minmax(0,1fr) 32px; }
 .class-note-row[data-images="false"]:not(:has(.class-note-translation)) .class-note-actions { grid-column:2; }
}
@media(max-width:600px) {
 .class-notes-board { padding:0 12px; }
 .class-notes-heading > div { gap:2px; }
 .class-notes-tools { gap:8px; }
 .class-notes-sortable { padding-inline-start:22px; }
}

.class-note-reading { font-size:var(--note-reading-size); color:var(--muted); line-height:1.2; margin:2px 0 0; }

.class-notes-import-lists { display:grid; gap:8px; }
.class-notes-import-list { display:flex; align-items:center; gap:12px; width:100%; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); text-align:start; }
.class-notes-import-list:hover:not(:disabled) { background:var(--surface-hover); }
.class-notes-import-list > span:nth-child(2) { display:grid; gap:4px; flex:1; min-width:0; }
.class-notes-import-list strong { overflow-wrap:anywhere; }
.class-notes-import-list small { font-weight:400; color:var(--muted); }
.class-notes-import-list > svg { flex:none; }
.class-notes-import-heading { display:flex; align-items:center; gap:12px; }
.class-notes-import-heading button { display:inline-flex; align-items:center; gap:5px; }

/* Notes are routed pages; loading belongs to the same board as loaded content. */
/* The fixed notes page owns scrolling; do not leave the document behind it
   available to Safari's viewport scrolling/scrollbar. Released on navigation. */
html:has(.class-notes-page), body:has(.class-notes-page) { overflow:hidden; }
.class-notes-page { position:fixed; inset:0; z-index:120; height:100dvh; overflow:hidden; background:var(--bg); color:var(--text); }
.notes-loading { display:grid; gap:1px; overflow:hidden; }
.notes-loading-row { height:76px; border-bottom:1px solid var(--border); background:linear-gradient(90deg,var(--surface-subtle) 52px,transparent 52px) no-repeat 0 12px / 52px 52px; opacity:.55; }
.class-notes-session-list { gap:8px; margin-top:20px; }
.class-notes-session-list > .class-notes-session-card { margin:0; padding:16px; gap:12px; background:var(--surface); color:var(--text); -webkit-user-select:none; user-select:none; }
.class-notes-session-list > .class-notes-session-card:hover:not(:disabled),
.class-notes-session-list > .class-notes-session-card:active:not(:disabled) { background:var(--surface-hover); color:var(--text); }
.class-notes-session-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:600px) { .class-notes-create { gap:8px; } .class-notes-create button { padding-inline:12px; white-space:nowrap; } .class-notes-create input { width:0; } }

.class-notes-menu-items button.class-notes-delete-note { color:var(--danger); }

.class-note-image-placeholder { display:block; width:var(--note-image-size); height:var(--note-image-size); }

.class-note-image:has(.word-illustration) { min-height:var(--note-image-size); }

.content-preparation-summary { margin:12px 0; }
.content-preparation-summary > button { display:inline-flex; align-items:center; gap:8px; }
.content-preparation-assets { list-style:none; margin:12px 0; padding:0; }
.content-preparation-assets li { display:grid; gap:4px; padding:10px 0; border-bottom:1px solid var(--border); }
.content-preparation-assets li > span { color:var(--muted); }


/* Keep the recommended activity prominent; other steps remain fully actionable. */
.topic-page [data-primary-step]:not([data-step-state="current"]) .topic-activity { min-height:110px; }
[data-primary-step]:not([data-step-state="current"]) .content-step-art img { height:110px; }
.topic-page [data-primary-step]:not([data-step-state="current"]) .content-step-copy { padding-block:10px; gap:5px; }
/* Without an action pill, give the text the remaining desktop width. */
.topic-page [data-primary-step] .topic-activity:not(:has(.content-step-action)) { grid-template-columns:minmax(180px,27%) minmax(0,1fr); }
@media (max-width:1000px) {
 .topic-page [data-primary-step] .topic-activity:not(:has(.content-step-action)) { grid-template-columns:170px minmax(0,1fr); }
}
@media (max-width:760px) {
 .topic-page [data-primary-step] .topic-activity,
 .topic-page [data-primary-step] .topic-activity:not(:has(.content-step-action)) { grid-template-columns:clamp(64px,20vw,120px) minmax(0,1fr); }
 .content-step-art img { width:100%; height:auto; max-height:150px; }
 [data-primary-step]:not([data-step-state="current"]) .content-step-art img { height:auto; max-height:110px; }
 .content-step-cta { min-width:0; }
}



/* Opening must remain escapable before any reader toolbar or artwork is ready. */
.comic-stage > button.reader-opening-close {
 position:fixed; z-index:10; top:max(16px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right));
 display:grid; place-items:center; width:48px; height:48px; min-height:48px; padding:0;
 border:1px solid rgba(255,255,255,.4); border-radius:50%; background:rgba(12,13,17,.85); color:#fff;
 pointer-events:auto; box-shadow:0 4px 16px #0005;
}
.comic-stage > button.reader-opening-close:hover:not(:disabled) { background:#202226; color:#fff; }


.reader-preparation-steps li[data-state="running"] .reader-preparation-circle[data-determinate="true"]::after {
 inset:-1.5px; border:0; animation:none;
 background:conic-gradient(var(--accent) var(--step-progress),var(--border-strong) 0);
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
 mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
}

.topic-vocabulary-progress { padding:0; }
button.topic-vocabulary-open { display:grid; gap:12px; width:100%; padding:20px 24px; border:0; border-radius:inherit; background:transparent; color:var(--text); text-align:start; }
button.topic-vocabulary-open:hover:not(:disabled) { background:var(--surface-subtle); color:var(--text); }
.topic-vocabulary-label { font-size:.9rem; font-weight:600; color:var(--text-secondary); }
.vocabulary-familiarity-popup { height:min(760px,calc(100dvh - 32px)); }
.vocabulary-familiarity-popup > .reader-popup-body { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.vocabulary-familiarity-popup .vocabulary-window { flex:1; height:auto; min-height:0; }
.vocabulary-familiarity-footer { flex:none; display:flex; justify-content:flex-end; padding-top:16px; border-top:1px solid var(--border); }
.vocabulary-familiarity-footer button { display:inline-flex; align-items:center; gap:8px; }

/* Preview keeps the same display menu and navigation during words and sentences. */
.comic-footer[data-preview="true"] .comic-inline-actions { display:none; }
.comic-footer[data-preview="true"] .comic-audio-control { width:44px; min-height:44px; }
@media(max-width:640px), (max-height:600px) {
 .comic-footer[data-preview="true"] .comic-audio-control { width:36px; min-height:36px; }
}

/* Never expose native broken-image placeholders while cover artwork loads. */
.topic-card-art>img[data-art-state],.topic-cover-loading>img[data-art-state] {opacity:0;}
.topic-card-art>img[data-art-state="ready"],.topic-cover-loading>img[data-art-state="ready"] {opacity:1;}
.topic-card-art:has(>img[data-art-state="ready"])>.word-illustration-spinner,
.topic-card-art:has(>img[data-art-state="error"])>.word-illustration-spinner,
.topic-cover-loading:has(>img[data-art-state="ready"])>.word-illustration-spinner,
.topic-cover-loading:has(>img[data-art-state="error"])>.word-illustration-spinner {display:none;}

/* Existing keyword artwork shares the emoji hint row and visibility toggle. */
.reader-word-keyword-image img { display:block; width:2.8em; height:2.8em; max-width:96px; max-height:96px; object-fit:contain; }

.word-info-bubble .reader-definition-expand {width:auto;min-height:34px;padding:5px 12px;font-weight:600;}
.word-commonness:is(button) {width:fit-content;padding:6px;border:0;background:transparent;cursor:pointer;border-radius:8px;}
.word-info-bubble .reader-word-image .word-illustration {width:min(100%,120px);transition:width .25s ease;margin-block:12px;}
.word-info-bubble .reader-word-image[data-large="true"] .word-illustration {width:min(100%,var(--word-image-large,240px));}
@media(prefers-reduced-motion:reduce){.word-info-bubble .reader-word-image .word-illustration{transition:none}}

.word-commonness:is(button):hover {background:var(--surface-subtle);color:var(--text);}

.reader-word-help-actions .reader-definition-expand {gap:8px;height:auto;min-height:36px;}

/* The content identity expands in place; activities below are the entry points. */
.topic-primary-copy {background:var(--surface);}
.topic-primary-copy .topic-channel-origin {position:relative;z-index:3;justify-content:flex-start;gap:6px 10px;margin-top:4px;pointer-events:none;}
.topic-primary-copy .topic-channel-origin a {pointer-events:auto;}
.topic-primary-copy .topic-age {border:0;border-radius:0;background:none;padding:0;min-height:0;margin:0;color:var(--text-secondary);text-shadow:none;font-weight:400;white-space:normal;}
.topic-page .topic-header[data-expanded="true"] {grid-template-columns:minmax(0,1fr);}
.topic-page .topic-header[data-expanded="true"] .topic-header-leading {width:100%;height:auto;min-height:0;aspect-ratio:16/10;}
.topic-page .topic-header[data-expanded="true"] .topic-cover img {object-fit:contain;}
.topic-page .topic-header[data-expanded="true"] .topic-cover {background:var(--surface-subtle);}
.content-preparation-summary > .content-preparation-trigger {background:transparent;color:var(--text-secondary);border:0;box-shadow:none;padding:8px 0;font-weight:500;}
.content-preparation-summary > .content-preparation-trigger:hover {background:transparent;color:var(--text);box-shadow:none;}
.content-preparation-trigger .word-illustration-spinner {flex:none;width:18px;height:18px;}

.billing-scheduled-change {padding:12px 14px;border-radius:12px;background:var(--surface-subtle);font-weight:600;line-height:1.5;}

/* Preparation is one shared gate for the complete activity journey. */
.channel-stats[data-preparing="true"] {opacity:.4;filter:grayscale(1);}
.home-feature-section[data-preparing="true"] .topic-activity {opacity:.43;filter:grayscale(1);cursor:default;position:relative;overflow:hidden;}
.home-feature-section[data-preparing="true"] .topic-activity::after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#ffffff55 50%,transparent 70%);transform:translateX(-100%);animation:content-creation-sheen 2.8s ease-in-out infinite;}
.content-preparation-summary {display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .55s ease,opacity .4s ease,margin .55s ease;}
.content-preparation-summary[data-dismissed="true"] {grid-template-rows:0fr;opacity:0;margin:0;pointer-events:none;visibility:hidden;transition:grid-template-rows .55s ease,opacity .4s ease,margin .55s ease,visibility 0s .55s;}
.content-preparation-card {overflow:hidden;min-height:0;border-radius:20px;background:linear-gradient(115deg,#2677df20,#60baff13);color:var(--text);box-shadow:inset 0 0 0 1px #5098e63b;transition:background .5s ease;}
.content-preparation-card>.content-preparation-trigger {display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent!important;color:inherit!important;box-shadow:none;padding:20px 22px 14px;text-align:left;}
.content-preparation-trigger strong {font-size:1.05rem;font-weight:650;}
.content-preparation-percent {margin-left:auto;font-size:.85rem;font-variant-numeric:tabular-nums;opacity:.65;}
.content-preparation-trigger .word-illustration-spinner {width:20px;height:20px;flex:none;color:#438ce8;}
.content-creation-track {height:7px;margin:0 22px 22px;border-radius:99px;background:#528bd526;overflow:hidden;}
.content-creation-track>span {display:block;height:100%;min-width:2px;border-radius:inherit;background:linear-gradient(90deg,#377ae0,#5bbdf3);position:relative;overflow:hidden;transition:width .8s ease,background .5s ease;}
.content-creation-track>span::after {content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,#ffffff88,transparent);animation:content-creation-sheen 1.8s ease-in-out infinite;}
.content-preparation-summary[data-complete="true"] .content-preparation-card {background:#30a96519;color:#238a52;}
.content-preparation-summary[data-complete="true"] .content-creation-track>span {background:#35ae70;}
.content-preparation-summary[data-complete="true"] .content-preparation-trigger>svg {animation:content-complete-pop .4s ease-out;}
@keyframes content-creation-sheen {from {transform:translateX(-100%);}to {transform:translateX(100%);}}
@keyframes content-complete-pop {from {transform:scale(.5);opacity:0;}to {transform:scale(1);opacity:1;}}
@media(prefers-reduced-motion:reduce) {.content-preparation-summary,.content-creation-track>span {transition:none!important;}.content-creation-track>span::after,.home-feature-section[data-preparing="true"] .topic-activity::after,.content-preparation-summary[data-complete="true"] svg {animation:none!important;}}

.home-feature-section > .topic-vocabulary-progress {margin-top:24px;}
/* The highlight leaves the clipped track before wrapping back to its start. */
.content-creation-track>span::after {width:50%;inset:0 auto 0 0;animation:content-progress-sheen 2s linear infinite;}
@keyframes content-progress-sheen {from {transform:translateX(-110%);}to {transform:translateX(220%);}}

.topic-navigation-row {display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin-bottom:14px;}
.topic-navigation-row>.page-history-back {margin:0;}
.topic-navigation-row .topic-actions-trigger {background:var(--surface);color:var(--text);opacity:1;border:1px solid var(--border);box-shadow:none;width:38px;height:38px;}
.topic-page .topic-review-bar {grid-template-columns:minmax(0,1fr);}

/* Anchor artwork to its own viewport; intrinsic grid image sizing in Safari
   must not make the image box extend into the title/metadata area. */
.topic-header-leading .topic-cover>img {position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;object-position:center;}

.preview-download-progress {display:grid;gap:6px;margin-block:12px;font-size:.85rem;color:var(--text-muted);}
.preview-download-row {display:flex;align-items:center;gap:8px;}
.preview-download-row .comic-step-spinner {width:14px;height:14px;border-width:2px;flex:none;}
.preview-download-row small {margin-left:auto;font-variant-numeric:tabular-nums;}
.speech-loading-dot {width:1rem;height:1rem;box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;background:transparent;animation:comic-step-spin .8s linear infinite;}
.speech-button[data-state="loading"] .speech-pause {display:none;}

/* Three independent examples share one meaning; collapse preserves image size. */
.meaning-images {display:flex;justify-content:center;align-items:center;gap:12px;width:100%;min-width:0;}
.meaning-images .meaning-image {display:block;flex:0 1 33.333%;min-width:0;max-width:240px;padding:0;border:0;background:transparent;box-shadow:none;overflow:hidden;}
.meaning-images .meaning-image img {display:block;width:100%;height:clamp(90px,20dvh,190px);object-fit:contain;}
.meaning-image:hover,.meaning-image:active {background:transparent;color:inherit;}
.input-picture:has(.meaning-images) {width:100%;}
@media(max-width:600px){.meaning-images {gap:6px;}.meaning-images .meaning-image img {height:clamp(80px,16dvh,145px);}}
@media(prefers-reduced-motion:reduce){.meaning-images .meaning-image {transition:none;}}

.preview-preload-trigger {display:inline-flex;align-items:center;gap:9px;margin-block:12px;padding:4px 0;border:0;background:transparent;color:inherit;font:inherit;font-size:.85rem;box-shadow:none;}
.preview-preload-trigger:hover,.preview-preload-trigger:active {background:transparent;color:inherit;opacity:.85;}
.preview-preload-ring {width:24px;height:24px;flex:none;}
.preview-preload-ring svg {display:block;width:100%;height:100%;}
.preview-preload-track {stroke:currentColor;opacity:.2;}
.preview-preload-fill {stroke:currentColor;stroke-linecap:round;transition:stroke-dasharray .3s ease;}
@media(prefers-reduced-motion:reduce) {.preview-preload-fill {transition:none;}}

.keyword-sequence-progress {display:flex;justify-content:center;margin-top:12px;}
.keyword-sequence-progress .step-trail-track {justify-content:center;width:auto;gap:5px;padding:6px;}
.comic-navigation {--comic-nav-ideal:112;}
@media(max-width:600px) {.comic-navigation {--comic-nav-ideal:96;}}

.landing-legal-links {display:flex;justify-content:center;flex-wrap:wrap;gap:24px;padding:24px 16px 100px;font-size:.85rem;}
.landing-legal-links a {color:var(--text-secondary);text-underline-offset:3px;}

.auth-legal-agreement { display:flex; align-items:flex-start; gap:10px; margin:20px 0; font-weight:400; line-height:1.6; cursor:pointer; }
.auth-legal-agreement input[type="checkbox"] { margin-top:3px; cursor:pointer; }
.auth-legal-agreement a { color:var(--text); text-decoration:underline; text-underline-offset:3px; }