:root {
  --ink:#292b2e;
  --muted:#73777c;
  --wine:#842b39;
  --line:#e8e7e6;
  --soft:#f9f3f3;
  --wash:#f8f8f7;
  --page-width:960px;
  --page-gutter:30px;
  --header-height:56px;
  --viewport-height:100svh;
  --chinese:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  color:var(--ink);
  background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none;
  color-scheme:light
}
@supports(height:100dvh) { :root { --viewport-height:100dvh; } }
@media(max-width:600px) { :root { --page-gutter:20px; --header-height:48px; } }
@media(max-height:600px) { :root { --header-height:44px; } }
* {
  box-sizing:border-box
}
body {
  margin:0;
  min-width:300px
}
button,input,select {
  font:inherit
}
button,a,input,select {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.4;
  cursor:default
}
a {
  color:var(--wine);
  text-underline-offset:3px
}
body[data-focus-mode="keyboard"] :is(button,a[href],input,select,summary,[role="button"]):focus-visible {
  outline:2px solid #797780;
  outline-offset:3px
}
body[data-focus-mode="pointer"] :is(button,a,input,select,summary,[tabindex]):focus { outline:none; }
/* Content destinations keep focus for navigation without a page-sized frame. */
main:focus,dialog:focus,.stage:focus,#stage-content:focus { outline:none; }
body[data-focus-mode="keyboard"] .stage:focus-within .stage-kicker { text-decoration:underline; text-underline-offset:6px; }

[hidden] {
  display:none!important
}
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%); white-space:nowrap; border:0!important; }
.skip-link {
  position:fixed;
  top:-50px;
  left:20px;
  background:#fff;
  padding:12px;
  z-index:20
}
.skip-link:focus {
  top:12px
}
.site-header {
  height:var(--header-height);
  max-width:var(--page-width);
  margin:auto;
  padding:0 var(--page-gutter);
  display:flex;
  align-items:center;
  gap:20px
}
.wordmark {
  font:700 24px var(--chinese);
  margin-right:auto;
  color:var(--ink);
  text-decoration:none;
  width:fit-content;
  white-space:nowrap
}
.wordmark span {
  color:var(--wine);
  display:inline-block;
  width:.5em
}
.header-links { display:flex; gap:20px; align-items:center; }
.header-links a,.header-links #home-settings { display:block; padding:10px 0; font-size:12px; text-decoration:none; color:var(--muted); }
.header-links a:hover { color:var(--wine); }
.quiet {
  border:0;
  background:transparent;
  padding:12px;
  color:var(--muted);
  font-size:13px
}
#account-open {
  justify-self:end;
  border-radius:8px;
  min-height:40px;
  padding:8px 14px;
  font-weight:500
}
#account-open:hover { background:var(--wash); }
#account-open[data-account-state="active"] { background:#e9f5ee; color:#2d6648; }
#account-open[data-account-state="active"]:hover { background:#dfefe5; }
.quiet:hover,.text-button:hover {
  color:var(--wine)
}
main {
  min-height:calc(100svh - 180px)
}
.home,.recap {
  max-width:790px;
  margin:0 auto;
  padding:72px 32px 35px
}
.home {
  max-width:700px;
  padding-top:56px
}
.home-kicker {
  font-size:10px;
  letter-spacing:.16em;
  color:var(--wine);
  font-weight:600;
  margin:0 0 24px;
  text-transform:uppercase
}
h1 {
  font-size:44px;
  font-weight:450;
  letter-spacing:-.035em;
  line-height:1.15;
  margin:0 0 22px
}
h2 {
  font-size:18px;
  letter-spacing:-.015em;
  font-weight:550;
  margin:0
}
.intro {
  font-size:17px;
  line-height:1.8;
  color:var(--muted);
  margin:0 0 24px
}
.word-preview {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin:32px 0 36px;
  font:36px/1.5 var(--chinese)
}
.word-preview button {
  border:0;
  padding:0;
  background:none;
  font:inherit;
  color:var(--ink)
}
.home-actions,.recap-actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}
.home-actions {
  gap:26px
}
.primary,.secondary {
  border-radius:7px;
  min-height:48px;
  padding:13px 22px;
  font-size:14px;
  font-weight:500;
  line-height:1.4
}
.primary {
  border:1px solid var(--wine);
  background:var(--wine);
  color:#fff
}
.primary:hover {
  background:#702330
}
.primary span {
  margin-left:26px
}
.secondary {
  border:1px solid var(--line);
  background:white;
  color:var(--ink)
}
.secondary:hover {
  background:var(--wash)
}
.muted {
  font-size:13px;
  color:var(--muted);
  line-height:1.7
}
.duration {
  margin:13px 0 0
}
.notice {
  font-size:13px;
  line-height:1.65;
  border:1px solid #ebdedf;
  border-radius:7px;
  background:var(--soft);
  padding:12px 16px;
  margin:20px 0;
  color:#72434a
}
.notice strong,.notice span {
  display:block
}
.notice strong {
  font-weight:600
}
.group-row {
  width:100%;
  display:grid;
  grid-template-columns:38px 1fr auto;
  gap:8px;
  align-items:center;
  padding:15px 0;
  border:0;
  border-bottom:1px solid var(--line);
  background:none;
  text-align:left
}
.group-row:hover {
  background:var(--wash)
}
.group-number {
  font-size:11px;
  color:#9d8e90
}
.group-words {
  font:17px var(--chinese);
  word-spacing:6px;
  line-height:1.65
}
.group-state {
  font-size:10px;
  color:var(--muted)
}
.text-button {
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:12px;
  padding:10px 0;
  min-height:40px
}
.lesson {
  max-width:850px;
  margin:auto;
  padding:20px 32px 0
}
.lesson-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.lesson-heading p {
  font-size:12px;
  color:var(--muted)
}
.phase-nav {
  display:flex;
  justify-content:center;
  gap:20px;
  color:#a0a0a0;
  font-size:10px
}
.stage {
  min-height:350px;
  padding:30px 8px 16px;
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  outline-offset:0!important
}
.stage-kicker {
  font-size:11px;
  letter-spacing:.08em;
  color:var(--muted);
  margin:0 0 26px;
  min-height:16px
}
.word-hanzi {
  font:76px/1.4 var(--chinese);
  margin:0;
  overflow-wrap:anywhere
}
.word-pinyin {
  font-size:23px;
  color:var(--muted);
  margin:12px 0 16px;
  font-weight:350
}
.word-meaning {
  font-size:22px;
  line-height:1.6;
  font-weight:400;
  margin:0
}
.sentence-hanzi {
  font:35px/1.9 var(--chinese);
  margin:0;
  max-width:690px;
  overflow-wrap:anywhere
}
/* Each pronunciation travels beneath its Chinese when lines wrap. */
body[data-screen="lesson"] .sentence-hanzi.with-pinyin {
  line-height:1.85;
  padding-bottom:.4em;
  margin-bottom:12px
}
.sentence-hanzi ruby {
  ruby-position:under;
  ruby-align:center;
  ruby-overhang:none;
  margin-inline:.04em
}
.sentence-hanzi rt {
  position:relative;
  top:12px;
  font:400 .4em/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--muted);
  letter-spacing:0;
  user-select:none;
  -webkit-user-select:none
}
.sentence-hanzi .sentence-unit { display:inline-block; max-width:100%; }
.sentence-hanzi.with-pinyin .lookup-word { max-width:100%; padding-block:.15em calc(.04em + 12px); }
.sentence-hanzi .current-word rt { color:var(--wine); }
.sentence-pinyin {
  font-size:18px;
  color:var(--muted);
  line-height:1.9;
  margin:16px 0 12px;
  max-width:660px
}
.sentence-meaning {
  font-size:17px;
  line-height:1.8;
  max-width:650px;
  margin:0;
  color:#5c6064
}
.lookup-word {
  font:inherit;
  color:inherit;
  padding:0;
  border:0;
  border-radius:3px;
  background:none;
  cursor:pointer;
  vertical-align:baseline
}
.lookup-word[data-definition-open] { background:var(--soft); }
.sentence-hanzi [data-reading-start] { border-radius:3px; transition:background-color 60ms ease-out; }
.sentence-hanzi .current-word { background:#f1e6e8; }
.sentence-hanzi .lookup-word[data-definition-open] { background:#ead7dc; }
@media(hover:hover) and (pointer:fine) {
  .lookup-word:hover { background:var(--soft); }
  .sentence-hanzi .lookup-word:hover { background:#ead7dc; }
}
@media (prefers-reduced-motion:reduce) {
  .sentence-hanzi [data-reading-start] { transition:none; }
}
.word-tooltip {
  position:fixed;
  z-index:20;
  width:min(320px,calc(100vw - 24px));
  max-height:min(300px,calc(100svh - 24px));
  overflow:auto;
  overscroll-behavior:contain;
  padding:18px 20px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 8px 28px #251a211a;
  color:var(--ink);
  text-align:left;
}
.word-tooltip .close { position:absolute; top:6px; right:6px; }
.word-tooltip .word-hanzi { margin:0 28px 4px 0; font-size:30px; line-height:1.4; }
.word-tooltip .word-pinyin { margin:0 0 8px; font-size:15px; line-height:1.5; color:var(--muted); }
.word-tooltip .word-meaning { margin:0; font-size:15px; line-height:1.6; overflow-wrap:anywhere; }
.word-tooltip .lookup-hint { margin:12px 0 0; font-size:11px; line-height:1.4; color:var(--muted); }
.definition-level { display:inline-block; margin-left:10px; padding:3px 7px; border-radius:5px; background:var(--soft); color:var(--wine); font:500 11px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:0; vertical-align:middle; white-space:nowrap; }
.lookup-word.target {
  color:var(--wine);
  box-shadow:0 2px 0 #c7909a
}
.stage-instruction {
  font-size:12px;
  color:var(--muted);
  margin:26px 0 0;
  min-height:20px
}
.stroke-box {
  width:184px;
  height:184px;
  margin:auto;
  background:linear-gradient(45deg,transparent 49.6%,#f3efef 49.7%,#f3efef 50.3%,transparent 50.4%),linear-gradient(-45deg,transparent 49.6%,#f3efef 49.7%,#f3efef 50.3%,transparent 50.4%);
  border:1px solid #eee7e8
}
.stroke-caption {
  font-size:16px;
  color:var(--muted);
  margin:20px 0 0
}
.player-dock {
  display:grid;
  grid-template-columns:1fr 1.4fr 1fr 1fr 1fr 1fr;
  justify-content:center;
  align-items:center;
  gap:12px;
  max-width:520px;
  margin:16px auto 0;
  border-top:1px solid var(--line);
  padding:16px 0 0
}
.dock-button {
  background:none;
  border:0;
  min-width:56px;
  min-height:52px;
  color:#686b70;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:5px
}
.dock-icon { width:20px; height:20px; flex:none; }
.dock-button small {
  font-size:10px;
  white-space:nowrap
}
.play-button {
  background:var(--wine);
  color:#fff;
  border:0;
  border-radius:28px;
  min-width:94px;
  height:52px;
  font-size:13px;
  padding:0 22px
}
.tap-hint {
  text-align:center;
  font-size:11px;
  line-height:1.6;
  color:#999;
  margin:16px 0 20px
}
.recap {
  text-align:center;
  padding-top:100px
}
.recap .word-preview,.recap-actions {
  justify-content:center
}
.recap>.muted {
  margin-top:26px
}
.loading {
  text-align:center;
  margin:110px auto;
  font-size:16px;
  color:var(--muted);
  padding:20px
}
.live-status {
  max-width:730px;
  margin:12px auto;
  font-size:12px;
  text-align:center;
  color:var(--muted);
  padding:0 20px;
  min-height:16px
}
.live-status:empty {
  display:none
}
.sheet {
  width:min(460px,calc(100% - 32px));
  max-height:calc(100svh - 60px);
  border:1px solid var(--line);
  border-radius:12px;
  padding:28px;
  color:var(--ink);
  background:#fff;
  box-shadow:0 24px 90px #251a2120
}
.sheet::backdrop {
  background:#24212655;
  backdrop-filter:blur(3px)
}
.dialog-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:20px
}
.dialog-heading h2 {
  font-size:20px
}
.close {
  border:0;
  background:none;
  font-size:27px;
  color:var(--muted);
  width:36px;
  height:36px;
  padding:0
}
.sheet label {
  display:block;
  font-size:13px;
  margin:19px 0;
  color:#555
}
.sheet select,.sheet input[type=number] {
  display:block;
  width:100%;
  margin-top:8px;
  border:1px solid #ddd;
  border-radius:6px;
  background:white;
  padding:11px 12px;
  color:var(--ink);
  font-size:14px
}
.sheet .check {
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.7
}
.check input {
  width:17px;
  height:17px;
  accent-color:var(--wine);
  flex:none
}
.full {
  width:100%;
  margin-top:10px
}
.sheet p {
  font-size:13px;
  line-height:1.8
}
.account-sheet {
  width:min(520px,calc(100% - 24px))
}
#account-widget iframe {
  border:0;
  width:100%;
  min-height:430px
}
.dictionary-sheet .word-hanzi {
  font-size:48px
}
.dictionary-sheet .word-pinyin {
  font-size:19px
}
.dictionary-sheet .word-meaning {
  font-size:17px
}
.error {
  border-color:#d29a9a
}
.recall-prompt {
  font-size:30px;
  font-weight:400;
  margin:12px 0;
  line-height:1.5
}
@media(max-width:600px) {
  .site-header {
    height:74px;
    padding:0 18px;
    gap:8px
  }
  .wordmark {
    font-size:24px
  }
  .quiet {
    padding:10px 2px;
    font-size:12px
  }
  .home,.recap {
    padding:44px 24px 20px
  }
  h1 {
    font-size:34px
  }
  .intro {
    font-size:15px
  }
  .word-preview {
    gap:19px;
    font-size:31px;
    margin:28px 0
  }
  .primary,.secondary {
    padding:12px 17px;
    font-size:13px
  }
  .primary span {
    margin-left:15px
  }
  .lesson {
    padding:8px 20px 0
  }
  .phase-nav {
    gap:15px;
    font-size:9px
  }
  .stage {
    min-height:310px;
    padding:25px 0 8px
  }
  .word-hanzi {
    font-size:65px
  }
  .word-pinyin {
    font-size:22px
  }
  .word-meaning {
    font-size:20px
  }
  .sentence-hanzi {
    font-size:33px;
    line-height:1.85
  }
  .sentence-pinyin {
    font-size:16px
  }
  .sentence-meaning {
    font-size:16px
  }
  .player-dock {
    gap:8px;
    margin-top:8px
  }
  .dock-button {
    min-width:49px
  }
  .play-button {
    min-width:84px;
    padding:0 16px
  }
  .tap-hint {
    margin-top:13px
  }
  .sheet {
    padding:23px
  }
  .recap {
    padding-top:75px
  }
}
.recent-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  text-align:left;
  transition:background .15s
}
.recent-row:hover:not(:disabled),.recent-row:focus-visible { background:var(--wash); }
.recent-description {
  min-width:0
}
.recent-description>span { display:block; }
.progress-sheet .recent-words {
  font:15px/1.55 var(--chinese);
  color:#60646a;
  word-spacing:3px;
  margin:0;
  overflow-wrap:anywhere
}
.recent-extra {
  font:12px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--muted);
  white-space:nowrap
}
.progress-sheet .recent-status {
  font-size:11px;
  color:var(--muted);
  line-height:1.4;
  margin:3px 0 0
}
.recent-action {
  flex:none;
  padding-left:4px;
  font-size:11px
}
.progress-sheet .recent-action { color:var(--wine); white-space:nowrap; }
@media(max-width:600px) {
  .recent-row {
    gap:12px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important
  }
}

/* One current session on home; syllabus coverage opens on demand. */
#home-title span {
  font-family:var(--chinese);
  white-space:nowrap;
}
#home-position {
  margin-bottom:0;
  font-size:15px;
}
.home-actions .primary {
  min-width:176px;
  display:flex;
  justify-content:space-between;
}
.home-actions .text-button {
  font-size:14px;
}
.word-journey {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:15px;
}
.home-journey {
  max-width:490px;
  margin:30px 0 32px;
}
.word-slot {
  display:grid;
  border:0;
  border-radius:4px;
  background:none;
  padding:6px 0;
  grid-template-rows:1fr 3px;
  gap:13px;
  text-align:center;
  color:#929094;
  min-width:0;
}
.word-slot>span:first-child {
  font:22px/1.5 var(--chinese);
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  align-self:end;
}
.word-slot>span.is-overflowing {
  text-align:left;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - .7em),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - .7em),transparent);
}
.home-journey .word-slot>span:first-child {
  font-size:32px;
}
.word-slot.current {
  color:var(--wine);
}
.word-slot.current>span:first-child {
  font-weight:550;
}
.word-slot.passed {
  color:#847375;
}
.word-track,.level-track {
  display:block;
  height:3px;
  background:var(--line);
  border-radius:2px;
  overflow:hidden;
}
.word-track>span,.level-track>span {
  display:block;
  height:100%;
  background:var(--wine);
  transition:width .25s;
}
.word-slot.passed .word-track>span {
  background:#b48a92;
}

.home-footnote {
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
  font-size:11px;
  color:var(--muted);
  line-height:1.6;
}
.home-footnote #save-label {
  margin:0;
  text-align:right;
  width:auto;
  flex:none;
}
.lesson-journey {
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:12px;
}
.lesson-journey .word-journey {
  max-width:580px;
  margin:auto;
}
.lesson-journey .phase-nav {
  margin-top:16px;
  gap:20px;
}
.lesson-journey .phase-nav button {
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:8px 4px;
  min-height:36px;
}
.lesson-journey .phase-nav button.active {
  color:var(--wine);
  font-weight:600;
}
.progress-sheet {
  width:min(720px,calc(100% - 32px));
  padding:26px 28px;
}
.progress-sheet .dialog-heading { margin-bottom:20px; align-items:center; }
.progress-heading-actions { display:flex; align-items:center; gap:12px; }
.progress-heading-actions .text-button { font-size:12px; padding:8px 0; white-space:nowrap; }
.progress-heading-actions .close { margin:0; }
.progress-stats { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.progress-sheet .progress-headline {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  line-height:1.3;
}
.progress-headline strong {
  font-size:34px;
  font-weight:500;
  color:var(--wine);
}
.progress-headline>span {
  font-size:16px;
  color:var(--muted);
}
.progress-headline small { display:block; font-size:11px; margin-top:3px; }
.progress-current { padding:3px 4px; background:var(--wash); border-radius:9px; margin-bottom:12px; }
.progress-current .recent-row { border:0; }
.progress-current .recent-row:hover:not(:disabled),.progress-current .recent-row:focus-visible { background:#f0efee; }
.progress-current .current-label { color:var(--wine); }
.progress-body { display:grid; grid-template-columns:1fr 1.15fr; gap:24px; margin-top:24px; }
.progress-body>section { min-width:0; }
.progress-body h3 { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; font-weight:500; margin:0 0 12px; }
.study-history { border-left:1px solid var(--line); padding-left:24px; }
.progress-body h3 span { font-size:10px; font-weight:400; color:var(--muted); }
.progress-sheet .level-row {
  display:grid;
  grid-template-columns:52px minmax(24px,1fr) 75px;
  gap:10px;
  align-items:center;
  min-height:28px;
  font-size:11px;
}
.level-row strong {
  color:var(--ink);
  font-weight:500;
  white-space:nowrap;
}
.level-row .level-track { height:3px; }
.level-count { font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.level-count span { color:var(--muted); }
.progress-sheet .availability-note {
  font-size:10px;
  color:var(--muted);
  line-height:1.5;
  margin:9px 0 0;
}
.browse-groups {
  border-top:1px solid var(--line);
}
.browse-groups summary {
  cursor:pointer;
  padding:16px 0;
  min-height:48px;
  font-size:13px;
  color:var(--ink);
}
.progress-sheet .recent-label {
  font-size:10px;
  line-height:1.4;
  color:var(--muted);
  margin:0 0 3px;
}
.recent-date { font-size:10px; white-space:nowrap; margin-left:5px; color:#868388; }
.study-history #recent-list,.study-history #older-list { margin:0 -10px; }
.study-history .recent-row + .recent-row { margin-top:2px; }
.progress-sheet #history-empty { font-size:12px; line-height:1.6; color:var(--muted); margin:16px 0; }
.progress-sheet details summary { cursor:pointer; font-size:11px; color:var(--muted); min-height:36px; padding:11px 0 8px; }
.progress-sheet #older-list { border-top:1px solid var(--line); padding-top:4px; }
@media(max-width:600px) {
  .progress-sheet { padding:22px; }
  .progress-sheet .dialog-heading { margin-bottom:16px; }
  .progress-sheet .dialog-heading h2 { font-size:21px; }
  .progress-heading-actions { gap:10px; }
  .progress-heading-actions .text-button { font-size:11px; }
  .progress-body { gap:20px; margin-top:16px; }
  .study-history { padding-left:16px; }
  .progress-sheet .level-row { min-height:25px; gap:6px; grid-template-columns:52px minmax(16px,1fr) 72px; }
  .progress-stats { margin-bottom:16px; }
}
@media(max-width:480px) {
  .progress-body { grid-template-columns:1fr; }
  .study-history { border-left:0; border-top:1px solid var(--line); padding:16px 0 0; }
  .progress-sheet .level-row { min-height:24px; grid-template-columns:52px minmax(24px,1fr) 83px; }
}
@media(max-width:370px) {
  .progress-sheet { padding:18px; }
  .progress-sheet .dialog-heading h2 { font-size:19px; }
  .progress-heading-actions { gap:5px; }
  .progress-stats { gap:12px; }
  .progress-headline strong { font-size:29px; }
  .progress-headline>span { font-size:14px; }
}
.account-progress {
  color:var(--wine);
  margin-bottom:14px;
}
@media(max-width:600px) {
  .home {
    padding-top:36px;
  }
  .home-journey {
    margin:26px 0;
  }
  .word-journey {
    gap:10px;
  }
  .home-journey .word-slot>span:first-child {
    font-size:28px;
  }
  .word-slot>span:first-child {
    font-size:20px;
  }

  .home-footnote {
    font-size:10px;
  }
  .home-footnote #save-label {
    font-size:10px;
  }
  .lesson-heading p {
    font-size:11px;
    text-align:center;
    line-height:1.6;
  }
  .lesson-journey .phase-nav {
    gap:15px;
  }
}

/* Clickable learning path; one compact playback row. */
.home-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.home-heading .home-kicker { margin:0; }
.home-heading .text-button { padding:0; }
.word-slot:hover:not(:disabled) { background:var(--soft); color:var(--wine); }
.word-slot:focus-visible { outline-offset:3px; }
.phase-nav button:hover:not(:disabled) { color:var(--wine); background:var(--soft); border-radius:4px; }
.path-neighbours { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:25px; padding-top:18px; border-top:1px solid var(--line); }
.path-neighbour { border:0; padding:6px 0; background:none; text-align:left; color:var(--muted); font-size:11px; line-height:1.7; }
.path-neighbour:last-child { text-align:right; }
.path-neighbour:disabled { opacity:.65; }
.path-neighbour:hover:not(:disabled) { color:var(--wine); }
.path-words { display:block; font:16px/1.8 var(--chinese); word-spacing:3px; margin-top:4px; }
.path-neighbour:disabled .path-words { font-family:inherit; font-size:11px; word-spacing:normal; }
#home-return { color:var(--wine); margin-top:6px; }
.account-button { white-space:nowrap; }
.stage { min-height:300px; }
@media(max-width:600px) {
  .home-heading { margin-bottom:18px; }
  .home-heading .home-kicker { font-size:9px; }
  .home-journey { margin:20px 0 24px; }
  .path-neighbours { gap:12px; }
  .path-words { font-size:14px; word-spacing:1px; }
  .lesson-journey .phase-nav { gap:8px; margin-top:9px; }
  .stage { min-height:270px; padding-top:20px; }
  .stage-kicker { margin-bottom:18px; }
  .account-button { font-size:11px; }
}

/* Coverage first, then a quiet carousel around the current set. */
.home { max-width:980px; padding-top:38px; padding-bottom:16px; }

.home-heading { margin:0 0 30px; }
.home-heading h1 { font-size:30px; letter-spacing:-1px; margin:0; }
.learning-carousel { display:grid; grid-template-columns:112px minmax(0,1fr) 112px; gap:24px; align-items:center; }
.current-set { min-width:0; text-align:center; }
.current-set .home-kicker { font-size:10px; margin:8px 0; }
.current-set #home-position { font-size:12px; margin:6px 0 0; }
.current-set .home-journey { margin:25px auto; }
.current-set .home-actions { justify-content:center; gap:18px; }
.current-set .duration { font-size:11px; margin:15px 0 0; }
.path-neighbour { align-self:stretch; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center!important; border-radius:12px; padding:16px 4px; gap:6px; }
.path-neighbour:hover:not(:disabled) { background:var(--wash); }
.neighbour-arrow { font-size:29px; line-height:1; width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--wine); }
.neighbour-label { font-size:10px; white-space:nowrap; }
.path-words { font-size:15px; max-width:98px; line-height:1.9; word-spacing:6px; }
.path-neighbour:disabled { visibility:hidden; }
#home-return { display:block; margin:22px auto 0; font-size:12px; }
.home-footnote { border-top:1px solid var(--line); margin-top:34px; padding-top:14px; }
.account-progress { display:flex; justify-content:space-between; align-items:center; width:100%; border:1px solid #e8d8dc; background:var(--soft); color:var(--wine); padding:18px; border-radius:10px; font-size:16px; font-weight:550; margin:20px 0; gap:16px; text-align:left; }
.account-progress:hover { border-color:var(--wine); }
.account-sheet .dialog-heading { margin-bottom:20px; }
.account-sheet h2 { margin:0; }
.account-identity { margin-bottom:18px; }
.account-identity strong { font-size:16px; font-weight:550; }
.account-identity strong[data-pro="true"] { color:#2d6648; }
.account-identity p { margin:6px 0 0; color:var(--muted); overflow-wrap:anywhere; }
.account-sheet .account-progress { margin:0 0 10px; padding:15px 16px; min-height:52px; font-size:14px; border-radius:8px; }
.account-manage { display:flex; align-items:center; justify-content:space-between; width:100%; gap:14px; padding:15px 16px; border:1px solid var(--line); border-radius:8px; background:white; text-align:left; color:var(--ink); font-size:14px; }
.account-manage small { display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.account-manage:hover { background:var(--wash); }
.account-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.account-links { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; }
.account-links .text-button { font-size:11px; margin:0; padding:6px 0; }
#sign-out { white-space:nowrap; min-height:42px; padding:10px 16px; font-size:13px; }
#account-back { margin:0 0 16px; font-size:12px; }
@media(max-width:420px) {
  .account-sheet { padding:22px; }
  .account-actions { gap:12px; }
  .account-links { align-items:flex-start; flex-direction:column; gap:0; }
}
.reset-link { display:block; color:var(--muted); margin:16px 0; font-size:12px; }
.stroke-settings { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sheet .settings-device-note { font-size:11px; margin-top:0; }
/* Side controls are steps; the single bottom row remains word navigation. */
.stage-navigation { display:grid; grid-template-columns:36px minmax(0,1fr) 36px; align-items:center; gap:12px; }
.step-edge { border:0; background:transparent; color:#a8a5a6; font-size:32px; height:64px; width:36px; border-radius:20px; padding:0; }
.step-edge:hover:not(:disabled) { background:var(--wash); color:var(--wine); }
.stage { touch-action:pan-y; }
.tap-hint span { margin:0 6px; }
.stroke-sequence { height:184px; position:relative; overflow:visible; margin:0 auto; }
.stroke-sequence .stroke-box { position:absolute; left:50%; top:0; margin:0 0 0 -92px; }
.stroke-past { position:absolute; display:grid; place-items:center; }
.stroke-box.arriving { animation:character-arrive .65s ease both; }
@keyframes character-arrive { from { transform:translateX(90px); opacity:0; } to { transform:translateX(0); opacity:1; } }
.lesson-intro { border:0; background:rgba(255,255,255,.95); color:var(--ink); width:min(560px,calc(100% - 28px)); max-height:calc(100svh - 28px); padding:42px 32px 25px; border-radius:20px; text-align:center; box-shadow:0 16px 80px #292b2e0c; }
.lesson-intro::backdrop { background:#ffffffa6; backdrop-filter:blur(6px); }
.lesson-intro h2 { font-size:28px; line-height:1.25; letter-spacing:-.8px; margin:18px 0; }
#intro-countdown { font-size:12px; min-height:18px; margin:16px 0 24px; }
@media(max-width:600px) {
  .home { padding:22px 20px; }

  .home-heading { margin-bottom:26px; }
  .home-heading h1 { font-size:26px; }
  .home-heading .text-button { font-size:12px; }
  .learning-carousel { grid-template-columns:30px minmax(0,1fr) 30px; gap:10px; }
  .neighbour-arrow { width:30px; height:42px; border:0; font-size:32px; }
  .neighbour-label,.path-neighbour .path-words { display:none; }
  .current-set .home-journey { margin:20px 0 24px; gap:7px; }
  .current-set .word-slot>span:first-child { font-size:25px; }
  .current-set .home-actions { flex-direction:column; gap:10px; }
  .current-set .home-actions .primary { min-width:170px; }
  .current-set .home-actions .text-button { font-size:12px; padding:5px; }
  .current-set .duration { font-size:10px; margin-top:10px; }
  .stage-navigation { grid-template-columns:20px minmax(0,1fr) 20px; gap:3px; margin:0 -12px; }
  .step-edge { width:20px; height:52px; font-size:25px; }
  .stage { overflow:hidden; }
  .tap-hint { font-size:9px; line-height:1.7; }
  .tap-hint span { margin:0 2px; }
  .stroke-settings { gap:12px; }
  .lesson-intro { padding:32px 20px 20px; }
  .lesson-intro h2 { font-size:25px; }
}
@media(max-width:370px) {

  .learning-carousel { grid-template-columns:22px minmax(0,1fr) 22px; gap:5px; }
  .current-set .word-slot>span:first-child { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) { .stroke-past,.stroke-box { animation:none!important; } }
.neighbour-set { display:none; }
@media(max-width:600px) { .neighbour-set { display:block; font-size:9px; line-height:1.4; color:var(--muted); } }
.stroke-placeholder { display:grid; place-items:center; width:184px; height:184px; font:145px/1 var(--chinese); color:#e9e5e6; }

/* Every activity uses the same frame. Only unusually long teaching content
   scrolls; labels, side arrows, instructions and playback controls stay put. */
.stage-navigation .stage {
  width:100%;
  min-width:0;
  height:clamp(400px,52svh,480px);
  min-height:0;
  padding:22px 8px 14px;
  display:grid;
  grid-template-rows:20px minmax(0,1fr) 40px;
  row-gap:12px;
  align-items:stretch;
  justify-content:normal;
  overflow:visible;
}
.stage .stage-kicker {
  margin:0;
  min-height:0;
  line-height:20px;
}
#stage-content {
  min-width:0;
  min-height:0;
  width:100%;
  padding:4px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable both-edges;
  overscroll-behavior-y:contain;
}
/* Equal flexible spacers center short content, and shrink to zero when a long
   example needs to scroll. Its first line always remains reachable. */
#stage-content::before,#stage-content::after { content:""; flex:1 0 0; }
#stage-content>* { flex:0 0 auto; min-width:0; max-width:100%; }
.stage-footer { min-height:0; display:grid; align-items:center; justify-items:center; }
.stage-footer>* { grid-area:1 / 1; }
.stage-scroll-hint { border:0; background:transparent; color:var(--muted); font:inherit; font-size:12px; min-height:28px; padding:2px 10px; cursor:pointer; }
#stage-content :is(.word-pinyin,.word-meaning,.sentence-pinyin,.sentence-meaning,.recall-prompt,.lookup-word) { overflow-wrap:anywhere; }
#stage-content .stroke-sequence { width:100%; height:184px; }
.stage .stage-instruction {
  margin:0;
  min-height:0;
  line-height:1.6;
  display:grid;
  align-content:center;
  overflow-y:auto;
}
@media(max-width:600px) {
  .stage-navigation .stage { height:clamp(420px,56svh,500px); padding:20px 0 12px; }
}
.neighbour-set { white-space:nowrap; }

/* One level, one selectable set at a time. Colour reflects practice, not mastery. */
.home-heading { align-items:flex-start; gap:24px; margin-bottom:24px; }
.home-heading h1 { max-width:650px; font-size:30px; line-height:1.25; }
.home-heading #home-settings { padding-top:7px; }

.path-neighbour .path-words { opacity:.48; transition:opacity .2s; }
.path-neighbour .neighbour-arrow { opacity:.72; transition:opacity .2s; }
.path-neighbour:hover .path-words,.path-neighbour:focus-visible .path-words,.path-neighbour:hover .neighbour-arrow,.path-neighbour:focus-visible .neighbour-arrow { opacity:1; }
.level-browser { margin:0; padding:0; border:0; }
.level-browser-heading { min-width:0; position:relative; }
.level-field { position:relative; min-width:0; }

.level-field::after { content:""; position:absolute; right:16px; top:50%; width:7px; height:7px; color:var(--muted); border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-70%) rotate(45deg); pointer-events:none; }
/* One scan line: description on the left, control on the right. */
#settings-dialog { --settings-control:168px; width:min(520px,calc(100% - 32px)); padding:16px 24px; max-height:calc(100svh - 24px); overflow-y:auto; }
#settings-dialog .dialog-heading { margin-bottom:6px; gap:12px; }
#settings-dialog h2 { margin:0; }
#settings-dialog .settings-heading-actions { display:flex; align-items:center; gap:12px; }
#settings-progress { margin:0; padding:8px 0; font-size:11px; white-space:nowrap; }
#settings-dialog .settings-group+.settings-group { border-top:1px solid var(--line); margin-top:6px; padding-top:6px; }
#settings-dialog h3 { color:var(--muted); font-size:11px; font-weight:600; line-height:14px; margin:0 0 2px; }
#settings-dialog .settings-row { display:grid; grid-template-columns:minmax(0,1fr) var(--settings-control); align-items:center; gap:16px; min-height:38px; margin:0; color:var(--ink); font-size:13px; line-height:1.25; cursor:pointer; }
#settings-dialog .settings-row>span { min-width:0; }
#settings-dialog small { display:block; color:var(--muted); font-size:10.5px; line-height:1.25; font-weight:400; margin-top:1px; }
#settings-dialog .level-field { display:block; margin:0; }
#settings-dialog select { appearance:none; -webkit-appearance:none; margin:0; height:32px; padding:0 32px 0 11px; border-color:var(--line); border-radius:7px; font-size:12px; cursor:pointer; }
#settings-dialog .level-field::after { right:13px; width:6px; height:6px; }
#settings-dialog .settings-toggle { display:block; position:relative; width:100%; height:32px; }
#settings-dialog .settings-switch { position:absolute; inset:0; z-index:1; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
#settings-dialog .settings-toggle-face { display:flex; align-items:center; justify-content:space-between; width:100%; height:100%; padding:0 11px; border:1px solid var(--line); border-radius:7px; background:white; color:var(--muted); font-size:12px; line-height:1; }
#settings-dialog .settings-toggle-on { display:none; }
#settings-dialog .settings-toggle-track { position:relative; width:26px; height:16px; flex:none; border-radius:10px; background:#d6d6d9; }
#settings-dialog .settings-toggle-track::before { content:""; position:absolute; width:12px; height:12px; top:2px; left:2px; border-radius:50%; background:white; box-shadow:0 1px 2px #0002; transition:transform .15s ease; }
#settings-dialog .settings-switch:checked+.settings-toggle-face { color:var(--wine); background:#fcf8f9; border-color:#dfcbd0; }
#settings-dialog .settings-switch:checked+.settings-toggle-face .settings-toggle-on { display:block; }
#settings-dialog .settings-switch:checked+.settings-toggle-face .settings-toggle-off { display:none; }
#settings-dialog .settings-switch:checked+.settings-toggle-face .settings-toggle-track { background:var(--wine); }
#settings-dialog .settings-switch:checked+.settings-toggle-face .settings-toggle-track::before { transform:translateX(10px); }
body[data-focus-mode="keyboard"] #settings-dialog .settings-switch:focus-visible+.settings-toggle-face { outline:2px solid var(--wine); outline-offset:2px; }
@media(max-width:600px) {
  #settings-dialog { --settings-control:132px; padding:16px 20px; }
  #settings-dialog .settings-row { gap:12px; }
}
@media(max-width:360px) {
  #settings-dialog { --settings-control:118px; padding:12px; max-height:calc(100svh - 16px); }
  #settings-dialog .settings-row { min-height:36px; gap:10px; font-size:12px; }
  #settings-dialog .settings-heading-actions { gap:8px; }
  #settings-dialog .dialog-heading { margin-bottom:6px; }
  #settings-dialog .settings-group+.settings-group { margin-top:6px; padding-top:6px; }
  #settings-dialog small { font-size:10px; }
  #settings-dialog select { padding-left:9px; padding-right:27px; font-size:11px; }
  #settings-dialog .settings-toggle-face { padding:0 9px; font-size:11px; }
  #settings-dialog .level-field::after { right:11px; }
}
@media(max-height:620px) { #settings-dialog .settings-row { min-height:36px; } }
@media(prefers-reduced-motion:reduce) { #settings-dialog .settings-toggle-track::before { transition:none; } }
@media(forced-colors:active) {
  #settings-dialog .settings-switch { appearance:auto; -webkit-appearance:auto; opacity:1; inset:auto 10px 8px auto; width:16px; height:16px; }
  #settings-dialog .settings-toggle-track { visibility:hidden; }
  #settings-dialog .settings-toggle-face { color:ButtonText; border-color:ButtonText; }
  #settings-dialog .settings-switch:checked+.settings-toggle-face { color:ButtonText; background:Canvas; border-color:ButtonText; }
}
#home-level { appearance:none; -webkit-appearance:none; font-family:inherit; font-size:13px; font-weight:500; line-height:1.4; color:var(--ink); background:white; border:1px solid var(--line); border-radius:8px; height:50px; padding:0 40px 0 14px; width:100%; max-width:100%; cursor:pointer; }
@media(forced-colors:active) {
  #home-level,#settings-dialog select { appearance:auto; -webkit-appearance:auto; }
  .level-field::after { display:none; }
}
.set-picker { min-width:0; position:relative; }

.set-map-key { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:6px; color:var(--muted); font-size:10px; }
.set-map-key-items { display:flex; flex-wrap:wrap; gap:8px 16px; }
.set-map-key-items>span { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.set-map-key>strong { color:var(--ink); font-size:inherit; font-weight:600; white-space:nowrap; }
.set-map-key i { width:8px; height:8px; display:block; border-radius:2px; background:#f1f0ef; border:1px solid #dfddda; }
.set-map-key i.finished-once { background:#e8cfd5; border-color:#e8cfd5; }
.set-map-key i.finished-three { background:var(--wine); border-color:var(--wine); }
.level-empty { text-align:center; padding:34px 18px 45px; }
.level-empty h2 { font-size:25px; font-weight:500; }
.level-empty p:not(.home-kicker) { color:var(--muted); font-size:14px; line-height:1.8; }
.level-empty button { color:var(--wine); margin-top:12px; }
/* A single countdown; playback choices stay in the dock and Settings. */
.lesson-intro { width:min(400px,calc(100% - 28px)); padding:22px 24px 30px; opacity:0; transition:opacity .16s ease,display .16s allow-discrete,overlay .16s allow-discrete; }
.lesson-intro[open] { opacity:1; }
.lesson-intro:not([open]) { pointer-events:none; }
@starting-style { .lesson-intro[open] { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .lesson-intro { transition:none; } }
.intro-heading { position:relative; display:flex; align-items:center; justify-content:center; min-height:36px; }
.intro-heading .home-kicker { margin:0; padding:0 24px; font-size:10px; }
#intro-back { position:absolute; right:-8px; top:0; display:grid; place-items:center; width:36px; height:36px; margin:0; padding:0; font-size:25px; }
.lesson-intro h2 { margin:18px 0 24px; font-size:25px; letter-spacing:-.5px; }
.countdown-disc { --countdown-progress:1; display:grid; place-items:center; width:100px; height:100px; padding:0; margin:0 auto; border:3px solid transparent; border-radius:50%; background:linear-gradient(white,white) padding-box,conic-gradient(var(--wine) calc(var(--countdown-progress) * 1turn),#eee7e9 0) border-box; color:var(--wine); font-family:inherit; font-size:34px; line-height:1; font-weight:500; font-variant-numeric:tabular-nums; }
.countdown-disc:hover { box-shadow:0 0 0 5px var(--soft); }
#intro-countdown { margin:22px 0 0; font-size:12px; line-height:1.5; }
@media(forced-colors:active) { .countdown-disc { border-color:ButtonText; } }
@media(max-width:600px) {
  .home-heading h1 { font-size:25px; }
  .home-heading { margin-bottom:22px; }
  .home-heading #home-settings { padding-top:4px; }
  #home-level { font-size:13px; }
  .set-map-key { gap:10px; font-size:9px; }
  .lesson-intro { padding:22px; }
  .lesson-intro h2 { font-size:24px; }
}
@media(max-width:390px) {

  .home-heading h1 { font-size:23px; }

}

/* Three compact cards keep the existing choices together at any screen height. */
.home {
  --home-radius:10px;
  --home-step-gap:16px;
  --home-card:#fff;
  --home-card-border:#e7e1e3;
  --home-card-shadow:0 3px 14px #45232d06;
  --home-next:#fcf7f8;
  --home-next-border:#ead9de;
  display:flex;
  flex-direction:column;
  min-height:calc(var(--viewport-height) - var(--header-height));
  max-width:var(--page-width);
  padding:14px var(--page-gutter) max(14px,env(safe-area-inset-bottom));
}
.home-overview { margin-bottom:18px; }
.coverage-bar {
  position:relative; isolation:isolate; overflow:hidden; width:100%; height:44px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0; padding:0 16px; border:1px solid #eae7e8; border-radius:8px;
  background:#f7f5f5; color:var(--ink); font-size:12px; text-align:left;
}
.coverage-bar:hover { background:#f1eeee; }
.coverage-fill { position:absolute; z-index:-1; inset:0 auto 0 0; background:#e5c8cf; pointer-events:none; }
.coverage-summary { min-width:0; font-variant-numeric:tabular-nums; }
.coverage-action { display:flex; align-items:center; gap:12px; flex:none; color:var(--wine); font-size:11px; white-space:nowrap; }
.coverage-bar:hover .coverage-action { text-decoration:underline; text-underline-offset:3px; }
.home-options { display:flex; flex-direction:column; flex:0 0 auto; }
.set-picker-heading { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.set-picker-heading .flow-step-title { margin:0; min-height:24px; }
.home-overview .home-heading { align-items:center; margin:0 0 14px; gap:24px; }
.home-overview .home-heading h1 { font-size:25px; max-width:650px; }

.learning-panel { padding:0; background:transparent; min-width:0; }
.home :is(.learning-panel,.course-controls,.level-browser) { display:flex; flex-direction:column; flex:0 0 auto; min-width:0; }
.level-browser-top { display:flex; flex-direction:column; flex:0 0 auto; gap:var(--home-step-gap); }
.level-browser-top > * { flex-shrink:0; min-width:0; }
.flow-step-title { display:flex; align-items:center; gap:10px; margin:0 0 10px; min-height:24px; font-size:14px; font-weight:500; color:var(--ink); }
.level-choice-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; margin-bottom:0; }
.level-choice-heading .flow-step-title { margin:0; }
.level-choice-heading #home-return { display:grid; place-items:center; flex:none; width:32px; min-height:32px; margin:0; padding:0; border-radius:8px; }
.level-choice-heading #home-return svg { width:18px; height:18px; }
.level-choice-heading #home-return:hover { background:var(--soft); }
.step-number { flex:none; display:inline-grid; place-items:center; width:24px; height:24px; border:1px solid #dbc9cd; border-radius:var(--home-radius); color:var(--wine); background:white; font-size:12px; font-weight:500; line-height:1; }
.step-hint { color:var(--muted); font-size:11px; font-weight:400; white-space:nowrap; margin-left:4px; }
.learning-panel #home-level { width:100%; height:44px; background:white; border-radius:var(--home-radius); }
.learning-panel .level-field { max-width:none; }
.learning-panel .level-field,.learning-panel .set-map-key { margin-left:0; }
.learning-panel .set-map-key { gap:8px 20px; margin-top:10px; font-size:11px; line-height:1.4; }
.learning-panel .set-map-key i { width:10px; height:10px; flex:none; }
/* Guests have no progress legend; do not reserve an empty block for it. */
.learning-panel .set-map-key[hidden] { display:none!important; }
/* Selected words and actions share the level and set pickers' left edge. */
.learning-panel .learning-carousel { display:flex; flex-direction:column; flex:0 0 auto; align-items:stretch; gap:0; margin-top:0; padding-top:0; border:0; }
.continue-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.continue-heading .flow-step-title { margin:0; flex:none; }
.continue-heading .duration { margin:0; font-size:10px; line-height:1.4; text-align:right; }
#current-set-title { margin:0; font-size:14px; font-weight:500; letter-spacing:0; }
.learning-panel .current-set { display:flex; flex-direction:column; flex:0 0 auto; margin-left:0; max-width:none; text-align:left; }
.current-set-detail { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-top:8px; }
.current-set .current-location { margin:0; color:var(--muted); font-size:12px; }
.learning-panel .current-set #home-position { margin:0; font-size:11px; line-height:1.5; }
.learning-panel .current-set #home-position:not(:empty) { padding-left:14px; border-left:1px solid var(--line); }
.learning-panel .current-set .home-journey { margin:8px 0 18px; max-width:none; }
.learning-panel .home-journey .word-slot { padding:4px 0; gap:7px; }
.learning-panel .home-journey .word-slot>span:first-child { font-size:26px; line-height:1.3; }
.learning-panel .current-set .home-actions { display:block; margin:0; }
.learning-panel .current-set .home-actions .primary { width:100%; min-width:0; min-height:44px; padding:10px 16px; border-radius:var(--home-radius); }
.learning-panel .current-set .home-actions .text-button { font-size:12px; }
.home .home-footnote { border:0; padding:0; margin-top:14px; justify-content:flex-end; font-size:10px; }
.home .cockpit-card {
  padding:20px 22px;
  border:1px solid var(--home-card-border);
  border-radius:16px;
  background:var(--home-card);
  box-shadow:var(--home-card-shadow);
}
.home .cockpit-card-lesson { background:var(--home-next); border-color:var(--home-next-border); }
.home .flow-step-title,.home #current-set-title { font-size:16px; font-weight:500; }
.home .step-number { width:28px; height:28px; border:0; border-radius:9px; background:var(--soft); font-size:13px; font-weight:600; }
.home .level-choice-heading { margin-bottom:8px; }
.home .learning-panel #home-level { height:46px; border-color:var(--home-card-border); }
.home .set-picker-heading { margin-bottom:4px; }
.home .continue-heading .duration { font-size:11px; }
.home .learning-panel .home-journey .word-slot>span:first-child { font-size:30px; }
.home .learning-panel .current-set .home-journey { margin:14px 0 18px; }
.home .learning-panel .current-set .home-actions .primary { min-height:46px; }
:root[data-theme="dark"] .home {
  --home-card:#202126;
  --home-card-border:#38353c;
  --home-card-shadow:none;
  --home-next:#2b232a;
  --home-next-border:#58404a;
}
@media(min-width:900px) and (max-height:760px) {
  .home { --home-step-gap:12px; padding-top:8px; padding-bottom:max(10px,env(safe-area-inset-bottom)); }
  .home .cockpit-card { padding:16px 20px; }
  .home-overview { margin-bottom:12px; }
  .home-overview .home-heading { margin-bottom:8px; }
  .home .home-footnote { margin-top:6px; }
}
@media(max-width:600px) {
  .site-header { height:var(--header-height); padding:0 var(--page-gutter); gap:16px; }
  .coverage-bar { padding:0 12px; font-size:11px; gap:8px; }
  .coverage-action { font-size:10px; gap:7px; }
  .header-links { gap:16px; }
  .header-links a,.header-links #home-settings { font-size:11px; }
  .home { --home-step-gap:12px; padding:12px var(--page-gutter) max(16px,env(safe-area-inset-bottom)); }
  .home .cockpit-card { padding:14px; border-radius:14px; }
  .home-overview { margin-bottom:16px; }
  .home-overview .home-heading { align-items:flex-start; gap:16px; }
  .home-overview .home-heading h1 { font-size:24px; }
  .home .flow-step-title,.home #current-set-title { font-size:14px; }
  .home .step-number { width:26px; height:26px; font-size:12px; border-radius:8px; }
  .home .level-choice-heading { margin-bottom:6px; }
  .home .learning-panel #home-level { height:44px; }

  .flow-step-title { font-size:13px; }

  .level-choice-heading { flex-wrap:wrap; gap:0 10px; }
  .level-choice-heading #home-return { margin-left:0; }
  .learning-panel .set-map-key { align-items:flex-start; flex-direction:column; gap:5px; font-size:11px; }
  .set-map-key-items { display:grid; grid-template-columns:repeat(2,max-content); gap:5px 20px; }
  .continue-heading { align-items:center; gap:8px; }
  .learning-panel .current-set { max-width:none; }
  .current-set-detail { display:block; margin-top:4px; }
  .learning-panel .current-set #home-position:not(:empty) { margin-top:6px; padding:0; border:0; }
  #current-set-title { font-size:13px; }
  .learning-panel .current-set .home-journey { margin:6px 0 14px; }
  .learning-panel .home-journey .word-slot>span:first-child { font-size:22px; }
  .home .learning-panel .home-journey .word-slot>span:first-child { font-size:25px; }
  .home .learning-panel .current-set .home-journey { margin:8px 0 14px; }
  .home .continue-heading { flex-wrap:wrap; gap:4px 8px; }
  .home .continue-heading .duration { margin-left:auto; font-size:10px; }
  .home .learning-panel .current-set .home-actions .primary { min-height:44px; }
}
@media(max-width:600px) and (max-height:740px) {
  .home { --home-step-gap:10px; padding-top:8px; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .home-overview { margin-bottom:12px; }
  .home-overview .home-heading { margin-bottom:10px; }
  .home .cockpit-card { padding:12px; }
  .home .step-number { width:24px; height:24px; }
  .home .learning-panel .current-set .home-journey { margin:6px 0 12px; }
}
@media(max-width:390px) {
  .home-overview .home-heading h1 { font-size:22px; }

  .learning-panel .current-set .word-slot>span:first-child { font-size:21px; }
}
@media(max-width:360px) {
  .home .learning-panel .home-journey .word-slot>span:first-child { font-size:21px; }
}
@media(max-width:370px) {
  .site-header #account-open { padding:8px 4px; }
}

/* Finished passes deepen in colour; they do not claim recall or mastery. */
.set-map-key i.finished-twice { background:#b36979; border-color:#b36979; }
.account-credits { display:block; margin:18px 0 8px; }

/* The viewport is the lesson frame. Navigation and the dock remain outside
   its flexible teaching area, so every step fits the same available space. */
body[data-screen="lesson"] { height:var(--viewport-height); overflow:hidden; }
body[data-screen="lesson"] .site-header { height:var(--header-height); padding:0 var(--page-gutter); }
body[data-screen="lesson"] main { height:calc(var(--viewport-height) - var(--header-height)); min-height:0; display:flex; flex-direction:column; }
body[data-screen="lesson"] .lesson {
  width:100%; max-width:var(--page-width); flex:1; min-height:0; margin:0 auto;
  padding:0 var(--page-gutter); display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
  grid-template-areas:"heading" "journey" "stage" "error" "dock" "hint";
}
.lesson-heading { grid-area:heading; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; }
.lesson-heading #leave { justify-self:start; }
.lesson-journey { grid-area:journey; }
.stage-navigation { grid-area:stage; }
#lesson-error { grid-area:error; }
.player-dock { grid-area:dock; }
.autoplay-toggle { display:flex; align-items:center; gap:8px; justify-self:end; min-height:44px; padding:0 8px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:11px; }
.autoplay-toggle:hover { background:var(--wash); }
.autoplay-track { position:relative; width:28px; height:16px; border:1px solid #bcb9ba; border-radius:10px; background:#dfdcdd; transition:background .15s,border-color .15s; }
.autoplay-track::after { content:""; position:absolute; width:10px; height:10px; left:2px; top:2px; background:white; border-radius:50%; transition:transform .15s; }
.autoplay-toggle[aria-checked="true"] .autoplay-track { background:var(--wine); border-color:var(--wine); }
.autoplay-toggle[aria-checked="true"] .autoplay-track::after { transform:translateX(12px); }
@media(prefers-reduced-motion:reduce) { .autoplay-track,.autoplay-track::after { transition:none; } }
@media(forced-colors:active) { .autoplay-track { border-color:ButtonText; } .autoplay-track::after { background:ButtonText; } .autoplay-toggle[aria-checked="true"] .autoplay-track { border-color:Highlight; } }
body[data-screen="lesson"] .lesson-heading { min-height:40px; }
body[data-screen="lesson"] .lesson-heading p { margin:0; }
body[data-screen="lesson"] .lesson-journey { margin-top:0; padding-top:10px; }
body[data-screen="lesson"] .lesson-journey .phase-nav { margin-top:5px; }
body[data-screen="lesson"] .word-slot { padding-top:4px; }
body[data-screen="lesson"] .stage-navigation { min-height:0; }
body[data-screen="lesson"] .stage-navigation .stage { height:100%; min-height:0; padding:10px 8px 4px; row-gap:8px; grid-template-rows:20px minmax(0,1fr) 32px; }
body[data-screen="lesson"] .player-dock { width:min(100%,600px); max-width:600px; grid-template-columns:1fr 1.4fr 1fr 1fr 1fr 1fr; gap:8px; margin:10px auto 0; padding:10px 0; }
body[data-screen="lesson"] .dock-button { min-width:0; min-height:48px; padding:3px 0; gap:5px; justify-content:center; }
body[data-screen="lesson"] .play-button { width:100%; max-width:140px; justify-self:center; height:44px; font-size:13px; background:#f2e8eb; color:#794452; }
body[data-screen="lesson"] .play-button:hover { background:#ead9df; }
body[data-screen="lesson"] .play-button:active { background:#e2cbd3; }
body[data-screen="lesson"] .autoplay-toggle[aria-checked="true"] .autoplay-track { background:#a56675; border-color:#a56675; }
body[data-screen="lesson"] .tap-hint { margin:0; font-size:10px; text-align:center; white-space:nowrap; }
.home .home-footnote:has(#save-label:empty) { display:none; }
body[data-screen="lesson"] .live-status { flex:none; margin:0 auto; padding:0 20px 6px; font-size:11px; max-height:42px; overflow:auto; }
body[data-screen="lesson"] .live-status:empty { padding:0; }
body[data-screen="lesson"] #lesson-error { margin:4px 0; padding:8px; max-height:65px; overflow:auto; }
/* Recap uses the same quiet centre, with equally sized actions. */
.recap { max-width:var(--page-width); min-height:calc(100svh - var(--header-height)); padding:40px var(--page-gutter); display:flex; flex-direction:column; justify-content:center; }
.recap .home-kicker { margin-bottom:14px; }
.recap h1 { margin:0 0 16px; }
.recap .intro { margin:0; }
.recap-carousel { display:grid; grid-template-columns:36px minmax(0,1fr) 36px; align-items:center; gap:20px; margin:30px 0; }
.recap-carousel .word-preview { margin:0; flex-wrap:wrap; }
.recap>.recap-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 auto; width:min(100%,540px); }
.recap>.recap-actions>button { min-width:0; padding:16px 10px; min-height:50px; font-size:13px; }
.recap-continuation { min-height:44px; margin-top:18px; display:flex; justify-content:center; align-items:center; gap:12px; }
.recap-continuation p,.recap-continuation button { margin:0; font-size:11px; }
.recap-continuation { text-align:left; }
.recap-continuation .countdown-small { width:48px; height:48px; flex:none; font-size:18px; border-width:2px; }
.recap-continuation .countdown-hint { color:var(--muted); font-size:10px; margin-top:4px; }
@media(max-width:600px) {
  .site-header { gap:10px; }
  .header-links { gap:12px; }
  #account-open { font-size:11px; padding-inline:8px; }
  body[data-screen="lesson"] .stage-navigation .stage { padding:8px 0 0; }
  body[data-screen="lesson"] .lesson-heading { grid-template-columns:auto minmax(0,1fr); gap:12px; }
  body[data-screen="lesson"] .lesson-heading p { font-size:10px; }
  body[data-screen="lesson"] .player-dock { gap:4px; margin-top:8px; padding:8px 0; }
  body[data-screen="lesson"] .play-button { min-width:0; padding:0 15px; }
  body[data-screen="lesson"] .tap-hint { display:none; }
  .recap { padding:28px var(--page-gutter); }
  .recap-carousel { gap:6px; margin:24px 0; }
  .recap-carousel .word-preview { font-size:30px; gap:10px; }
  .recap>.recap-actions { gap:7px; }
  .recap>.recap-actions>button { font-size:12px; padding:14px 5px; }
  .recap-continuation { flex-wrap:wrap; gap:10px; }
  .recap-continuation #recap-auto-toggle { flex-basis:100%; }
}
@media(max-height:600px) {
  body[data-screen="lesson"] .lesson-heading { min-height:34px; }
  body[data-screen="lesson"] .lesson-heading .text-button { min-height:34px; padding:5px 0; }
  body[data-screen="lesson"] .lesson-journey { padding-top:5px; }
  body[data-screen="lesson"] .word-slot>span:first-child { font-size:21px; }
  body[data-screen="lesson"] .lesson-journey .phase-nav { margin-top:0; }
  body[data-screen="lesson"] .lesson-journey .phase-nav button { min-height:30px; padding:5px 4px; }
  body[data-screen="lesson"] .player-dock { margin-top:6px; padding:6px 0; }
  body[data-screen="lesson"] .play-button { height:44px; }
  body[data-screen="lesson"] .dock-button { min-height:44px; }
  body[data-screen="lesson"] .tap-hint { margin:0; font-size:9px; }
}
/* At very short heights (landscape phones or high browser zoom), keep a whole
   character visible and allow page scrolling instead of clipping the lesson. */
@media(max-height:500px) {
  body[data-screen="lesson"] { height:auto; min-height:100svh; overflow:auto; }
  body[data-screen="lesson"] main { height:auto; min-height:calc(100svh - var(--header-height)); }
  body[data-screen="lesson"] .lesson { flex:none; grid-template-rows:auto auto 350px auto auto auto; }
}

/* The set navigator keeps the same footprint for ready and future lessons. */
.learning-panel .placeholder-word { color:transparent; }
.learning-panel .placeholder-word:hover { background:none; color:transparent; }
.placeholder-word>span:first-child { position:relative; }
.placeholder-word>span:first-child::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:28px; height:28px; border:1px dashed #dcd6d7; border-radius:6px; }
.placeholder-word .word-track { visibility:hidden; }
#home-carousel[data-preparing="true"] .home-actions .primary { background:#f1efef; color:#8d8587; opacity:1; }
#home-carousel[data-preparing="true"] .duration { max-width:160px; font-size:11px; line-height:1.5; }

@media(min-width:900px) and (max-height:760px) {
  .home-overview { margin-bottom:8px; }
  .home .home-footnote { margin-top:4px; }
  .learning-panel .set-nav-heading { height:28px; }
}

/* Keep the primary action in reach on short phones without shrinking tap targets. */
@media(max-width:600px) and (max-height:700px) {
  .home { --home-step-gap:14px; padding-top:6px; padding-bottom:max(8px,env(safe-area-inset-bottom)); }
  .home-overview { margin-bottom:8px; }
  .home-overview .home-heading { margin-bottom:6px; }
  .level-choice-heading { min-height:28px; }
  .set-picker-heading { gap:6px; }
  .flow-step-title { margin-bottom:6px; }
  .learning-panel .set-nav-heading { height:28px; }
  .learning-panel .set-nav-overview,.learning-panel .set-nav-range { height:44px; }
  .learning-panel .set-nav-marks { top:15px; bottom:15px; }
  .learning-panel .set-nav-card { height:52px; }
  .learning-panel .current-set .home-journey { margin:4px 0 12px; }
}
/* Narrow phones need room for advanced words and the part selector. Keep the
   same type sizes, a separate progress legend and 44px lesson/set targets. */
@media(max-width:360px) and (max-height:700px) {
  .home { --home-step-gap:10px; }
  .level-choice-heading { min-height:24px; }
  .set-picker-heading { gap:4px; }
  .learning-panel .set-nav-heading { height:24px; }
  .learning-panel .set-nav-card { height:44px; }
  .learning-panel .set-nav-cards { padding-block:2px; }
  .learning-panel .set-map-key { margin-top:6px; gap:3px; }
  .learning-panel .set-map-key-items { row-gap:3px; }
  .learning-panel .current-set .home-journey { margin:4px 0 8px; }
  .learning-panel .home-journey .word-slot { padding-block:3px; gap:5px; }
}

/* Set browsing sits quietly below playback, leaving the teaching area first. */
body[data-screen="lesson"] .lesson {
  grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
  grid-template-areas:"heading" "journey" "stage" "error" "dock" "sets";
}
body[data-screen="lesson"] .dock-button small { font-size:11px; line-height:14px; font-weight:400; }
.dock-label-short { display:none; }
body[data-screen="lesson"] .autoplay-toggle { justify-self:stretch; align-self:stretch; flex-direction:column; border-radius:8px; }
.autoplay-icon { height:20px; display:flex; align-items:center; }
.lesson-set-browser { grid-area:sets; display:grid; grid-template-columns:170px minmax(0,1fr); align-items:center; gap:16px; width:min(100%,600px); min-width:0; margin:0 auto; padding:10px 0 max(10px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.lesson-set-tools { display:block; min-width:0; }
.lesson-level-control { position:relative; }
.lesson-level-control::after { content:""; position:absolute; right:12px; top:50%; width:6px; height:6px; border:solid var(--muted); border-width:0 1.5px 1.5px 0; transform:translateY(-70%) rotate(45deg); pointer-events:none; }
#lesson-level { appearance:none; -webkit-appearance:none; width:100%; height:36px; padding:0 28px 0 10px; border:1px solid var(--line); border-radius:7px; background:white; color:var(--muted); font-size:11px; cursor:pointer; }
#lesson-level:hover { border-color:#c9b8bc; color:var(--ink); }
body[data-screen="lesson"] .lesson-heading { grid-template-columns:1fr; }
body[data-screen="lesson"] .lesson-journey { padding-top:5px; }
@media(max-width:600px) {
  body[data-screen="lesson"] .lesson-heading { grid-template-columns:auto minmax(0,1fr); gap:12px; }
  .lesson-set-browser { grid-template-columns:minmax(100px,40%) minmax(0,1fr); gap:10px; padding-top:10px; padding-bottom:max(18px,env(safe-area-inset-bottom)); }
  body[data-screen="lesson"] .dock-button small { font-size:10px; }
  body[data-screen="lesson"] .player-dock { grid-template-columns:1fr 1.3fr 1fr 1fr 1fr 1fr; }
  .dock-label-full { display:none; }
  .dock-label-short { display:inline; }
  body[data-screen="lesson"] .play-button { padding-inline:8px; font-size:12px; }
  body[data-screen="lesson"] .lesson-journey .word-slot>span:first-child { font-size:22px; }
  body[data-screen="lesson"] .lesson-journey .phase-nav { margin-top:2px; }
  body[data-screen="lesson"] .lesson-journey .phase-nav button { min-height:32px; }
}
@media(max-height:700px) {
  body[data-screen="lesson"] .lesson-journey .word-slot { padding-bottom:5px; }
  body[data-screen="lesson"] .player-dock { margin-top:6px; padding:6px 0; }
}
/* Small portrait phones keep the new rail and the whole teaching card visible. */
@media(max-width:600px) and (min-height:501px) and (max-height:700px) {
  body[data-screen="lesson"] { --header-height:44px; }
  body[data-screen="lesson"] .lesson-heading { min-height:32px; }
  body[data-screen="lesson"] .lesson-heading #leave { min-height:32px; padding-block:4px; }
  body[data-screen="lesson"] .lesson-journey { padding-top:3px; }
  body[data-screen="lesson"] .lesson-journey .word-slot { gap:4px; padding:3px 0; }
  body[data-screen="lesson"] .lesson-journey .word-slot>span:first-child { font-size:19px; line-height:1.4; }
  body[data-screen="lesson"] .lesson-journey .phase-nav { margin-top:1px; }
  body[data-screen="lesson"] .lesson-journey .phase-nav button { min-height:30px; padding:5px 4px; }
  body[data-screen="lesson"] .stage-navigation .stage { padding-top:4px; row-gap:4px; grid-template-rows:16px minmax(0,1fr) 28px; }
  body[data-screen="lesson"] .stage-kicker { font-size:9px; line-height:16px; }
  body[data-screen="lesson"] #stage-content .word-hanzi { font-size:54px; line-height:1.25; }
  body[data-screen="lesson"] #stage-content .word-pinyin { font-size:19px; margin:8px 0; }
  body[data-screen="lesson"] #stage-content .word-meaning { font-size:18px; line-height:1.4; }
  body[data-screen="lesson"] .sentence-hanzi { font-size:32px; line-height:1.5; }
  body[data-screen="lesson"] .sentence-pinyin { font-size:14px; line-height:1.5; margin:8px 0; }
  body[data-screen="lesson"] .sentence-meaning { font-size:14px; line-height:1.5; }
  body[data-screen="lesson"] #stage-content .stroke-sequence { height:146px; transform:scale(.79); transform-origin:center top; }
  body[data-screen="lesson"] .stroke-caption { margin-top:8px; font-size:14px; }
  body[data-screen="lesson"] .stage-instruction { font-size:10px; line-height:1.4; }
  body[data-screen="lesson"] .player-dock { padding-top:8px; }
  body[data-screen="lesson"] .play-button { height:44px; }
  body[data-screen="lesson"] .dock-button { min-height:44px; gap:4px; }
}
@media(max-height:500px) {
  body[data-screen="lesson"] .lesson { grid-template-rows:auto auto 350px auto auto auto; }
}

/* Match the News palette without changing the lesson's geometry. */
:root {
  --paper:#fff;
  --hsk-stroke:#842b39;
  --hsk-stroke-outline:#e9e5e6;
}
:root[data-theme="dark"] {
  --ink:#e4e6e9;
  --muted:#a1a7af;
  --wine:#e3a1b2;
  --line:#363b43;
  --soft:#362830;
  --wash:#24272d;
  --paper:#191b1f;
  --hsk-stroke:#e3a1b2;
  --hsk-stroke-outline:#41434b;
  color-scheme:dark;
  background:var(--paper);
}
:root[data-theme="dark"] :is(.skip-link,.secondary,.sheet,.word-tooltip,.account-manage,.step-number,#lesson-level) { background:var(--paper); }
:root[data-theme="dark"] :is(.sheet select,.sheet input[type="number"],#home-level) { background:var(--paper); border-color:var(--line); }
:root[data-theme="dark"] :is(.secondary:hover,.account-manage:hover) { background:var(--wash); }
:root[data-theme="dark"] :is(.sheet label,.sentence-meaning,.progress-sheet .recent-words) { color:#b9bec6; }
:root[data-theme="dark"] :is(.group-number,.phase-nav,.tap-hint,.recent-date,.word-slot,.step-edge,.dock-button) { color:var(--muted); }
:root[data-theme="dark"] :is(.phase-nav button.active,.phase-nav button:hover,.word-slot.current,.step-edge:hover) { color:var(--wine); }
:root[data-theme="dark"] .word-slot.passed { color:#c5a5ae; }
:root[data-theme="dark"] .word-slot.passed .word-track>span { background:#976a77; }
:root[data-theme="dark"] #account-open[data-account-state="active"] { background:#263d32; color:#b8ddc7; }
:root[data-theme="dark"] #account-open[data-account-state="active"]:hover { background:#304b3e; }
:root[data-theme="dark"] .account-identity strong[data-pro="true"] { color:#b8ddc7; }
:root[data-theme="dark"] :is(.primary,.play-button) { color:#26171d; }
:root[data-theme="dark"] .primary:hover { background:#edb8c5; }
:root[data-theme="dark"] .notice { color:#e3bdc6; border-color:#694552; }
:root[data-theme="dark"] .error { border-color:#b77d86; }
:root[data-theme="dark"] .sentence-hanzi .current-word { background:#694552; }
:root[data-theme="dark"] .sentence-hanzi .lookup-word[data-definition-open] { background:#45303a; }
@media(hover:hover) and (pointer:fine) {
  :root[data-theme="dark"] .sentence-hanzi .lookup-word:hover { background:#45303a; }
}
:root[data-theme="dark"] .lookup-word.target { box-shadow:0 2px 0 #b77d8d; }
:root[data-theme="dark"] .word-tooltip { box-shadow:0 8px 28px #0005; }
:root[data-theme="dark"] .sheet { box-shadow:0 24px 90px #0006; }
:root[data-theme="dark"] .sheet::backdrop { background:#07090ca6; }
:root[data-theme="dark"] .progress-current .recent-row:is(:hover,:focus-visible):not(:disabled) { background:#30353d; }
:root[data-theme="dark"] :is(.account-progress,.step-number) { border-color:#694552; }
:root[data-theme="dark"] .stroke-box {
  border-color:#363b43;
  background:linear-gradient(45deg,transparent 49.6%,#30343b 49.7%,#30343b 50.3%,transparent 50.4%),linear-gradient(-45deg,transparent 49.6%,#30343b 49.7%,#30343b 50.3%,transparent 50.4%);
}
:root[data-theme="dark"] .stroke-placeholder { color:var(--hsk-stroke-outline); }
:root[data-theme="dark"] .stroke-sequence .stroke-past { color:#79616a; }
:root[data-theme="dark"] .stroke-sequence .stroke-past.just-finished { animation-name:stroke-history-settle-dark; }
@keyframes stroke-history-settle-dark {
  from { transform:translate(var(--settle-from),0) scale(1); color:var(--wine); }
  to { transform:translate(var(--past-offset),calc(var(--past-row) * var(--past-step))) scale(var(--past-scale)); color:#79616a; }
}
:root[data-theme="dark"] .lesson-intro { background:#191b1ff5; box-shadow:0 16px 80px #0004; }
:root[data-theme="dark"] .lesson-intro::backdrop { background:#111318a6; }
:root[data-theme="dark"] .countdown-disc { background:linear-gradient(var(--paper),var(--paper)) padding-box,conic-gradient(var(--wine) calc(var(--countdown-progress) * 1turn),var(--line) 0) border-box; }
:root[data-theme="dark"] #settings-dialog .settings-toggle-face { background:var(--paper); }
:root[data-theme="dark"] #settings-dialog .settings-toggle-track { background:#555a63; }
:root[data-theme="dark"] #settings-dialog .settings-switch:checked+.settings-toggle-face { background:var(--soft); border-color:#694552; }
:root[data-theme="dark"] #settings-dialog .settings-switch:checked+.settings-toggle-face .settings-toggle-track { background:#a56675; }
:root[data-theme="dark"] .coverage-bar { background:#242126; border-color:var(--line); }
:root[data-theme="dark"] .coverage-bar:hover { background:#30262c; }
:root[data-theme="dark"] .coverage-fill { background:#694552; }
:root[data-theme="dark"] .set-map-key i { background:#303239; border-color:#555860; }
:root[data-theme="dark"] .set-map-key i.finished-once { background:#65424d; border-color:#65424d; }
:root[data-theme="dark"] .set-map-key i.finished-twice { background:#a76d7e; border-color:#a76d7e; }
:root[data-theme="dark"] .autoplay-track { background:#555a63; border-color:#727883; }
:root[data-theme="dark"] body[data-screen="lesson"] .play-button { background:#362830; color:#e3bdc6; }
:root[data-theme="dark"] body[data-screen="lesson"] .play-button:hover { background:#45303a; }
:root[data-theme="dark"] body[data-screen="lesson"] .play-button:active { background:#553943; }
:root[data-theme="dark"] .placeholder-word>span:first-child::after { border-color:#55515a; }
:root[data-theme="dark"] #home-carousel[data-preparing="true"] .home-actions .primary { background:#303239; color:var(--muted); }
:root[data-theme="dark"] #lesson-level:hover { border-color:#976a77; }

.header-links .theme-toggle { display:grid; place-items:center; flex:none; width:32px; min-height:40px; padding:0; }
.theme-toggle svg { display:block; width:18px; height:18px; }
.theme-toggle .theme-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .theme-moon { display:none; }
:root[data-theme="dark"] .theme-toggle .theme-sun { display:block; }

/* Keep all set controls available without squeezing phone touch targets. */
@media(max-width:480px) {
  body[data-screen="lesson"] .player-dock {
    grid-template-columns:1fr 1.3fr 1fr;
    grid-template-areas:"previous play next" "restart nextset auto";
    gap:3px 4px;
  }
  #previous-word { grid-area:previous; }
  #play { grid-area:play; }
  #skip-word { grid-area:next; }
  #restart-set { grid-area:restart; }
  #next-set { grid-area:nextset; }
  #autoplay-toggle { grid-area:auto; }
}

/* Keep definitions readable without covering most of a phone lesson. */
@media(max-width:600px) {
  .word-tooltip { width:min(280px,calc(100vw - 24px)); max-height:min(260px,calc(var(--viewport-height) * .44)); padding:14px 16px 12px; }
  .word-tooltip .word-hanzi { font-size:28px; line-height:1.3; margin-bottom:4px; }
  .word-tooltip .word-pinyin { font-size:14px; margin-bottom:6px; }
  .word-tooltip .word-meaning { font-size:14px; line-height:1.5; }
  .word-tooltip .lookup-hint { margin-top:8px; font-size:10px; }
}