/* Hanzi Garden — an ink-dark reading room. */
:root {
  color-scheme: dark;
  --page: #121612;
  --side: #101510;
  --paper: #1a211b;
  --paper-soft: #202920;
  --paper-deep: #151b16;
  --ink: #e9e4d6;
  --ink-soft: #cbd0c1;
  --muted: #a5ad9f;
  --muted-deep: #879384;
  --line: #384338;
  --line-soft: #2b362c;
  --gold: #c9ad7a;
  --gold-dim: #ad946e;
  --jade: #b0c8ad;
  --seal: #b87865;
  --serif: Georgia, "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --hanzi: "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font: 14px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .4; background: radial-gradient(ellipse at 78% 0%, #253126 0%, transparent 53%); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
button, .word { touch-action: manipulation; }
a { color: var(--gold); text-underline-offset: 3px; }
::selection { background: #5b6047; color: #fff9ec; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; }
h1 { font-size: clamp(39px, 4.8vw, 65px); line-height: 1.13; letter-spacing: -.035em; }
h2 { font-size: clamp(27px, 2.7vw, 37px); line-height: 1.25; letter-spacing: -.02em; }
p { line-height: 1.8; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

/* The left shelf and quiet main navigation. */
.app-shell { display: grid; grid-template-columns: 258px minmax(0, 1fr); min-height: 100vh; }
.sidebar { height: 100vh; position: sticky; top: 0; z-index: 22; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; background: var(--side); border-right: 1px solid var(--line); padding: 32px 18px 24px; }
.brand { display: flex; align-items: center; gap: 14px; padding: 1px 11px 35px; border-bottom: 1px solid var(--line-soft); }
.brand-stamp { width: 43px; height: 48px; display: grid; place-items: center; flex: none; border: 1px solid #a96b5b; color: #d69782; font: 28px var(--hanzi); position: relative; }
.brand-stamp::after { content: ""; position: absolute; inset: 3px; border: 1px solid #67493e; pointer-events: none; }
.brand-stamp.mini { width: 30px; height: 33px; font-size: 19px; }
.brand-type strong { font: 24px var(--hanzi); letter-spacing: .18em; display: block; line-height: 1.15; }
.brand-type small { display: block; margin-top: 7px; color: var(--gold-dim); font-size: 9px; letter-spacing: .18em; font-weight: 600; }
.primary-nav { display: flex; flex-direction: column; gap: 3px; padding-top: 26px; }
.nav-button { text-align: left; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 11px 10px 12px; min-height: 45px; color: var(--muted); background: none; border: 0; border-left: 2px solid transparent; font-size: 13px; transition: background .15s, color .15s; }
.nav-button:hover { color: var(--ink); background: #1d281e; }
.nav-button.active { color: var(--ink); border-left-color: var(--gold); background: #1b251d; }
.nav-icon { font: 18px var(--hanzi); width: 21px; color: var(--gold-dim); text-align: center; }
.nav-count { margin-left: auto; color: var(--gold); font-family: var(--serif); font-size: 14px; }
.side-label { display: flex; justify-content: space-between; margin: 35px 12px 11px; color: var(--gold-dim); font: 12px var(--serif); font-style: italic; }
.side-label span { color: var(--muted-deep); font-style: normal; font: 11px system-ui, sans-serif; }
.chapter-nav { display: grid; gap: 2px; }
.chapter-button { display: flex; gap: 13px; width: 100%; text-align: left; align-items: center; padding: 12px 11px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--ink-soft); }
.chapter-button:hover, .chapter-button.active { background: #1b251d; border-bottom-color: var(--line-soft); }
.chapter-symbol { align-self: center; font: italic 14px var(--serif); color: var(--gold-dim); width: 25px; }
.chapter-button strong { display: block; font-weight: 500; font-size: 12px; }
.chapter-button small { display: block; font: 11px var(--hanzi); margin-top: 4px; color: var(--muted-deep); }
.side-bottom { display: flex; flex-direction: column; gap: 8px; text-align: center; margin-top: auto; padding: 24px 5px 0; border-top: 1px solid var(--line-soft); }
.side-bottom span { font: 20px var(--hanzi); letter-spacing: .12em; color: var(--gold); }
.side-bottom small { color: var(--muted-deep); font: italic 12px/1.6 var(--serif); }

/* Reading room frame. */
.main-frame { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 72px; position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(25px, 5vw, 76px); background: rgba(18, 22, 18, .95); backdrop-filter: blur(13px); border-bottom: 1px solid var(--line-soft); }
.desktop-eyebrow { display: flex; align-items: center; gap: 13px; color: var(--muted); font: italic 13px var(--serif); }
.desktop-eyebrow > span:first-child { font: 17px var(--hanzi); color: var(--gold); }
.eyebrow-rule { width: 25px; height: 1px; background: var(--line); }
.top-actions { display: flex; align-items: center; gap: 15px; }
.account-button { min-height: 40px; padding: 7px 2px 7px 13px; background: transparent; color: var(--ink-soft); border: 0; border-left: 1px solid var(--line); font: 13px var(--serif); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-button:hover, .account-button.signed { color: var(--gold); }
.mobile-brand, .mobile-only { display: none; }
.icon-button { width: 43px; height: 43px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 20px; }
main { flex: 1; width: min(1270px, 100%); margin: 0 auto; padding: 43px clamp(25px, 5vw, 76px) 85px; }
.footer { border-top: 1px solid var(--line-soft); padding: 25px; display: flex; justify-content: center; align-items: center; gap: 14px; font: italic 12px var(--serif); color: var(--muted-deep); }
.footer > span:first-child { font: 14px var(--hanzi); color: var(--gold-dim); }
.footer-rule { width: 27px; height: 1px; background: var(--line); }
.overline { font-size: 11px; letter-spacing: .05em; color: var(--gold); font-family: var(--serif); font-style: italic; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin: 56px 0 22px; }
.section-heading h2 { margin: 8px 0 3px; }
.section-heading p { color: var(--muted); font-size: 13px; margin: 0; }
.minor-link { border: none; padding: 8px 0; background: none; white-space: nowrap; font: italic 13px var(--serif); color: var(--gold); }
.minor-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Editorial opening — no cards, chips, or dashboard chrome. */
.hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 49px 35px 52px 10px; min-height: 330px; border-bottom: 1px solid var(--line); }
.hero::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 1px; background: var(--gold); }
.hero-copy { position: relative; z-index: 1; max-width: 570px; }
.hero-kicker { color: var(--gold-dim); font: 14px var(--hanzi); letter-spacing: .035em; }
.hero-kicker span { margin: 0 7px; }
.hero h1 { margin: 24px 0 19px; font-size: clamp(48px, 5vw, 75px); line-height: 1.08; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--gold); }
.hero p { max-width: 425px; margin-bottom: 28px; font-size: 14px; color: var(--ink-soft); }
.hero-art { flex: 0 0 238px; height: 270px; position: relative; display: grid; place-items: center; }
.ink-circle { width: 185px; height: 185px; border-radius: 49% 52% 47% 51%; border: 1px solid #72715a; box-shadow: 0 0 0 18px rgba(136, 133, 98, .028), inset 0 0 35px rgba(185, 159, 104, .025); transform: rotate(-15deg); }
.ink-circle::after { content: ""; display: block; width: 90%; height: 90%; margin: 5%; border-radius: 50%; border: 1px solid #353c30; }
.art-character { position: absolute; font: 112px var(--hanzi); color: #a2b29b; transform: translateY(-8px); opacity: .87; }
.art-caption { position: absolute; right: 8px; top: 27px; writing-mode: vertical-rl; letter-spacing: .45em; font: 12px var(--hanzi); color: var(--gold-dim); }
.art-seal { position: absolute; right: 40px; bottom: 19px; border: 1px solid #8f5145; width: 30px; height: 30px; display: grid; place-items: center; font: 18px var(--hanzi); color: #b66b5b; }
.button-primary, .button-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 43px; padding: 10px 20px; border-radius: 2px; font-size: 13px; font-weight: 550; text-align: center; transition: background .15s, border-color .15s, color .15s; }
.button-primary { background: #a88d60; color: #111711; border: 1px solid #bda170; }
.button-primary:hover { background: #d3b783; border-color: #e0ca95; }
.button-secondary { background: transparent; color: var(--ink-soft); border: 1px solid #52604f; }
.button-secondary:hover { color: var(--ink); border-color: #a99b7b; background: #283128; }
.progress-summary { display: flex; border-bottom: 1px solid var(--line); padding: 28px 4px 32px; gap: 0; }
.progress-summary > div { display: flex; align-items: baseline; gap: 12px; padding: 0 31px; border-right: 1px solid var(--line); }
.progress-summary > div:first-child { padding-left: 0; }
.progress-summary > div:last-child { border: 0; }
.progress-summary strong { font: 28px var(--serif); color: var(--ink); white-space: nowrap; }
.progress-summary strong span { font-size: 15px; color: var(--muted-deep); }
.progress-summary small { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Chapter index and story ledger. */
.chapter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.chapter-card { text-align: left; position: relative; min-height: 212px; padding: 23px 25px 19px; background: linear-gradient(145deg, #1c251d, #181f19); border: 1px solid var(--line); color: var(--ink); border-radius: 2px; transition: background .18s, border-color .18s; }
.chapter-card:hover { border-color: #827b5e; background: #242e24; }
.number-tag { display: block; color: var(--gold-dim); font: 10px var(--serif); letter-spacing: .18em; }
.chapter-calligraphy { position: absolute; top: 21px; right: 20px; color: #687a66; opacity: .35; font: 27px var(--hanzi); writing-mode: vertical-rl; letter-spacing: .13em; }
.chapter-card strong { display: block; margin: 27px 0 5px; font: 27px var(--serif); font-weight: 400; }
.chapter-card small { display: block; max-width: 73%; color: var(--muted); font-size: 12px; }
.chapter-progress { margin-top: 23px; display: flex; align-items: center; gap: 18px; color: var(--muted-deep); font-size: 11px; }
.progress-track { width: 84px; height: 2px; background: #3b493b; overflow: hidden; }
.progress-fill { height: 100%; background: var(--gold); transition: width .3s; }
.story-total { font: italic 13px var(--serif); }
.chapter-story-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; border-top: 1px solid var(--line); }
.lesson-tile { display: flex; align-items: center; gap: 17px; width: 100%; min-width: 0; text-align: left; padding: 18px 5px; color: var(--ink); border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; }
.lesson-tile:hover { background: #1b241c; }
.lesson-no { flex: none; width: 25px; font: italic 15px var(--serif); color: var(--gold-dim); }
.lesson-tile.is-complete .lesson-no { color: var(--jade); }
.lesson-description { min-width: 0; }
.lesson-description strong { display: block; font: 19px var(--hanzi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson-description small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trail-icon { margin-left: auto; padding: 0 4px; color: var(--gold-dim); font-size: 14px; }

/* Curriculum is a continuous scholar's walking path, not a gamified dashboard. */
.path-invitation { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 31px 7px 26px; border-bottom: 1px solid var(--line); }
.path-invitation h2 { font-size: 27px; margin: 9px 0 3px; }
.path-invitation p { font-size: 13px; color: var(--muted); margin: 0; }
.hsk-section { margin: 35px 0 44px; }
.hsk-section .section-heading { margin: 0 0 19px; }
.hsk-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.hsk-level { background: var(--paper-deep); padding: 24px 25px 19px; }
.hsk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.hsk-top strong { font: 24px var(--serif); font-weight: 400; color: var(--gold); white-space: nowrap; }
.hsk-top span { color: var(--ink-soft); font-size: 12px; text-align: right; }
.hsk-level .progress-track { width: 100%; height: 3px; }
.hsk-level p { margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.hsk-note { margin: 12px 0 0; max-width: 780px; color: var(--muted); font: italic 12px/1.7 var(--serif); }
.path-heading { max-width: 870px; padding: 27px 0 35px; border-bottom: 1px solid var(--line); }
.path-heading h1 { margin: 12px 0 16px; }
.path-heading > p { font-size: 14px; max-width: 650px; color: var(--ink-soft); }
.path-overview { display: flex; align-items: center; gap: 25px; margin: 31px 0; }
.path-overview > strong { color: var(--ink); font: 35px var(--serif); font-weight: 400; white-space: nowrap; }
.path-overview > strong span { color: var(--muted-deep); font-size: 19px; }
.path-overview .progress-track { flex: 1; height: 3px; }
.path-overview .button-primary { flex: none; }
.volume-jump { display: flex; flex-wrap: wrap; gap: 7px 23px; }
.volume-jump button { display: flex; align-items: baseline; gap: 7px; color: var(--gold); border: 0; border-bottom: 1px solid transparent; background: transparent; padding: 9px 0; font: italic 17px var(--serif); }
.volume-jump button span { color: var(--muted); font: 12px system-ui, sans-serif; font-style: normal; }
.volume-jump button:hover { border-bottom-color: var(--gold); }
.path-volumes { max-width: 970px; }
.path-volume { display: grid; grid-template-columns: minmax(170px, 240px) minmax(0, 1fr); gap: clamp(22px,4vw,55px); padding-top: 64px; scroll-margin-top: 80px; }
.path-volume-head { align-self: start; position: sticky; top: 105px; }
.path-volume-number { font: 43px var(--hanzi); color: #73866d; opacity: .7; }
.path-volume-head .overline { margin-top: 14px; }
.path-volume-head h2 { margin: 9px 0 7px; font-size: 34px; }
.path-volume-head p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.path-volume-count { display: block; padding-top: 15px; color: var(--gold-dim); font: italic 13px var(--serif); border-top: 1px solid var(--line); }
.path-track { display: grid; padding: 0 0 16px 0; border-top: 1px solid var(--line); }
.path-step { position: relative; isolation: isolate; display: flex; align-items: center; gap: 18px; min-height: 75px; padding: 11px 6px 11px 2px; width: 100%; color: var(--ink); text-align: left; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; }
.path-step::before { content: ""; position: absolute; z-index: 0; width: 1px; height: 100%; background: #4a5947; left: 19px; top: 42px; }
.path-step:last-child::before { display: none; }
.path-step:hover { background: #1e291f; }
.path-step.next { background: linear-gradient(90deg,rgba(201,173,122,.09),transparent 75%); }
.path-marker { flex: none; position: relative; z-index: 1; display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #66715c; border-radius: 50%; color: var(--muted); background: #1c241d; font: italic 13px var(--serif); }
.path-step.completed .path-marker { border-color: #7f9c7b; color: #c7ddbd; background: #2d3f2e; font: 17px var(--serif); }
.path-step.next .path-marker { border: 2px solid var(--gold); color: var(--gold); background: #342f23; }
.path-step-name { min-width: 0; }
.path-step-name strong { display: block; font: 21px var(--hanzi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.path-step-name small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.path-step-state { margin-left: auto; flex: none; color: var(--muted-deep); font: italic 12px var(--serif); }
.path-step.completed .path-step-state { color: var(--jade); }
.path-step.next .path-step-state { color: var(--gold); }
.path-version { padding-top: 25px; max-width: 800px; border-top: 1px solid var(--line); font: italic 12px/1.7 var(--serif); color: var(--muted-deep); }

/* Story pages: generous type, quiet controls, dictionary margin notes. */
.back-link { border: 0; background: none; color: var(--gold); font: italic 13px var(--serif); padding: 1px 0; margin: 1px 0 32px; }
.back-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.reader-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 30px; }
.reader-head h1 { font: clamp(43px, 4.8vw, 69px)/1.35 var(--hanzi); letter-spacing: .02em; margin: 11px 0 6px; }
.reader-en { font-size: 13px; color: var(--muted); margin-bottom: 0; }
.story-counter { flex: none; padding-bottom: 4px; font: italic 12px var(--serif); color: var(--gold-dim); }
.reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) 255px; align-items: start; gap: 26px; }
.reader-left { min-width: 0; }
.reading-card { background: var(--paper); border: 1px solid var(--line); border-top: 2px solid #84775b; }
.reading-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--line); padding: 13px 22px; }
.tool-label { font: italic 13px var(--serif); color: var(--muted); white-space: nowrap; }
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pill-toggle { min-height: 37px; padding: 7px 9px; color: var(--muted); background: none; border: 1px solid transparent; border-bottom: 1px solid transparent; font-size: 11px; }
.pill-toggle span { color: var(--muted-deep); font-size: 10px; margin-left: 4px; }
.pill-toggle.active { color: var(--ink); border-bottom-color: var(--gold); }
.pill-toggle.active span { color: var(--gold); }
.pill-toggle:hover { background: #273127; }
.read-body { padding: 32px clamp(22px, 3vw, 42px) 40px; }
.read-hint { color: var(--muted); font: italic 12px var(--serif); margin-bottom: 26px; padding-left: 12px; border-left: 1px solid var(--gold-dim); }
.sentence { margin: 0 0 20px; font: 34px/2.45 var(--hanzi); letter-spacing: .028em; overflow-wrap: anywhere; }
.sentence:last-child { margin-bottom: 0; }
.word { display: inline-block; vertical-align: baseline; padding: 0 2px; margin: 0 1px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px dotted #586751; border-radius: 0; line-height: 1.7; font: inherit; white-space: nowrap; cursor: pointer; transition: background .12s; }
.word:hover { background: #364536; border-bottom-color: var(--gold); }
.word.selected { background: #4b4837; color: #fff1d5; border-bottom-color: var(--gold); }
.word ruby { ruby-position: over; }
.word rt { color: #adb8a7; font: 11px/1.5 system-ui, sans-serif; letter-spacing: 0; padding: 0 2px; white-space: nowrap; }
.hide-pinyin rt { visibility: hidden; height: 0; font-size: 0; }
.hide-pinyin .sentence { line-height: 1.9; }
.word-spaced .word { margin-right: .22em; }
.punct { white-space: pre-wrap; color: var(--ink); }
.sentence-translation { padding-left: 4px; margin: -4px 0 21px; color: var(--muted); font-size: 12px; }
.sentence-listen { display: block; margin: -15px 0 17px 4px; padding: 5px 0; background: transparent; color: var(--muted-deep); border: 0; font: italic 11px var(--serif); }
.sentence-listen:hover { color: var(--gold); text-decoration: underline; }
.reading-practice { padding: 15px 4px 0; border-top: 1px solid var(--line-soft); margin-top: 18px; }
.reading-practice strong { color: var(--gold); font: italic 14px var(--serif); font-weight: 400; }
.reading-practice p { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
.reader-card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); background: #1b241c; }
.tiny-note { color: var(--muted-deep); font-size: 11px; }
.small-voice { border: 0; background: none; color: var(--gold); padding: 8px 0; font: italic 13px var(--serif); }
.small-voice:hover { text-decoration: underline; }
.sidebar-info { background: transparent; padding: 18px 5px 0 20px; position: sticky; top: 97px; border-left: 1px solid var(--line); }
.info-leaf { font: 20px var(--hanzi); color: var(--gold); letter-spacing: .13em; margin-bottom: 22px; }
.sidebar-info h3 { font-size: 23px; margin-bottom: 12px; }
.sidebar-info p { font-size: 12px; color: var(--muted); margin-bottom: 18px; }
.focus-label { font: italic 13px var(--serif); color: var(--gold-dim); padding-top: 7px; margin: 19px 0 12px; border-top: 1px solid var(--line-soft); }
.focus-words { display: flex; flex-wrap: wrap; gap: 7px; }
.focus-word { padding: 6px 9px; border: 1px solid var(--line); background: #202b21; color: var(--ink); font: 17px var(--hanzi); }
.focus-word:hover { border-color: var(--gold); }
.quiz-card { margin-top: 22px; padding: 28px 29px; border: 1px solid var(--line); background: var(--paper-deep); }
.quiz-eyebrow { font: italic 13px var(--serif); color: var(--gold); }
.quiz-title { font-size: 24px; margin: 15px 0 20px; }
.quiz-options { display: grid; gap: 9px; }
.quiz-option { display: flex; align-items: center; gap: 14px; text-align: left; min-height: 48px; padding: 10px 13px; color: var(--ink-soft); border: 1px solid var(--line); background: var(--paper); }
.quiz-option:hover:not(:disabled) { border-color: #929477; background: #263028; }
.quiz-option.correct { border-color: #739276; background: #263c2a; color: #d4e8d0; }
.quiz-option.wrong { border-color: #996358; background: #382725; color: #e5beb3; }
.choice-letter { font: italic 14px var(--serif); color: var(--gold); }
.quiz-feedback { margin-top: 18px; color: var(--jade); font-size: 12px; }
.quiz-feedback.bad { color: #dfaa94; }
.reader-next { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.reader-next .button-primary, .reader-next .button-secondary { min-width: 120px; }

/* Word details are a margin note on desktop, a sheet on mobile. */
.word-panel { display: none; position: fixed; z-index: 32; top: 98px; right: 25px; width: 320px; max-height: calc(100vh - 120px); overflow-y: auto; padding: 29px; background: #202820; border: 1px solid #69715b; border-top: 3px solid var(--gold-dim); box-shadow: 0 20px 70px rgba(0, 0, 0, .45); }
.word-panel.open { display: block; animation: rise .18s ease-out; }
.word-panel .close-panel { position: absolute; right: 15px; top: 13px; background: transparent; color: var(--muted); border: 0; width: 34px; height: 34px; font-size: 24px; }
.word-label { color: var(--gold); font: italic 13px var(--serif); }
.word-big { font: 65px/1.4 var(--hanzi); margin: 14px 0 2px; }
.word-pinyin { font: 18px var(--serif); color: #d9bd8a; }
.word-pos { margin: 10px 0 0; color: var(--muted); font-size: 11px; text-transform: lowercase; }
.word-meaning { padding: 23px 0; margin-top: 10px; color: var(--ink); border-bottom: 1px solid var(--line); font: 22px/1.45 var(--serif); }
.word-actions { display: grid; gap: 9px; margin-top: 22px; }
.word-actions button { width: 100%; }
.saved-button.saved { background: #2b3f2d; color: var(--jade); border-color: #6d886d; }
.word-footnote { font: italic 12px/1.5 var(--serif); color: var(--muted); margin: 17px 0 0; }
.word-backdrop { position: fixed; inset: 0; z-index: 31; background: rgba(0, 0, 0, .65); }
@media (min-width: 661px) { .word-backdrop { display: none !important; } }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 28px; padding: 12px 20px; background: #344435; color: var(--ink); border: 1px solid #6d8269; box-shadow: 0 8px 30px rgba(0,0,0,.3); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .2s, transform .2s; font-size: 12px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Vocabulary room and study notes. */
.review-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.review-header h1 { margin: 15px 0 10px; }
.review-header p { margin: 0; }
.review-overview { margin: 30px 0; padding: 27px 30px; background: #1b281e; border-left: 2px solid #a48c64; }
.review-overview h2 { margin: 0 0 8px; font-size: 27px; }
.review-overview p { color: var(--muted); font-size: 13px; margin: 0; }
.review-card { max-width: 650px; margin: 25px auto; padding: 36px 28px; border: 1px solid var(--line); background: var(--paper); text-align: center; }
.review-char { font: clamp(65px, 9vw, 101px)/1.6 var(--hanzi); margin: 18px 0 10px; }
.review-reveal { margin: 20px 0; padding: 23px; background: #263028; color: var(--ink); }
.review-reveal strong { display: block; font: 21px var(--serif); color: var(--gold); margin-bottom: 7px; }
.review-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.vocab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.vocab-card { text-align: left; min-width: 0; padding: 17px 19px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.vocab-card:hover { border-color: var(--gold-dim); background: #222c23; }
.vocab-card strong { display: block; font: 30px var(--hanzi); margin: 5px 0 3px; }
.vocab-card small { color: var(--gold-dim); font-size: 12px; }
.vocab-card p { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.due-badge { float: right; font: italic 12px var(--serif); color: var(--muted-deep); }
.guide-intro { max-width: 730px; color: var(--ink-soft); font-size: 16px; }
.steps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 36px; border-top: 1px solid var(--line); }
.step-card { padding: 26px 5px 27px; border-bottom: 1px solid var(--line); }
.step-no { font: italic 13px var(--serif); color: var(--gold); }
.step-card h3 { font-size: 26px; margin: 13px 0 10px; }
.step-card p { font-size: 13px; color: var(--muted); margin: 0; }
.source-list { max-width: 800px; border-top: 1px solid var(--line); padding-left: 22px; }
.source-list li { border-bottom: 1px solid var(--line-soft); padding: 13px 4px; color: var(--muted); font-size: 12px; }
.empty-state { max-width: 690px; margin: 28px auto; padding: 40px 26px; border: 1px solid var(--line); text-align: center; background: var(--paper-deep); }
.empty-emoji { font: 45px var(--hanzi); color: var(--gold-dim); margin-bottom: 12px; }
.empty-state h3 { font-size: 27px; margin: 0 0 12px; }
.empty-state p { color: var(--muted); font-size: 13px; }

/* Account entry: a simple paper-and-ink dialog. */
.account-overlay { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; overflow-y: auto; background: rgba(3,8,4,.82); backdrop-filter: blur(6px); padding: 16px; }
.account-dialog { position: relative; max-height: min(94vh, 740px); overflow-y: auto; width: min(430px, 100%); padding: 34px 35px 32px; background: #1c251d; border: 1px solid #64735e; border-top: 2px solid var(--gold); box-shadow: 0 25px 90px rgba(0,0,0,.58); }
.account-close { position: absolute; top: 14px; right: 16px; color: var(--muted); border: none; background: transparent; font-size: 25px; width: 34px; height: 34px; }
.account-seal { border: 1px solid #aa6858; width: 46px; height: 49px; display: grid; place-items: center; color: #ce8c76; font: 25px var(--hanzi); margin-bottom: 23px; }
.account-dialog h2 { font-size: 35px; margin: 12px 0 9px; }
.account-description { color: var(--muted); font-size: 13px; margin-bottom: 23px; }
#accountForm label { display: block; color: var(--ink-soft); margin: 17px 0 8px; font-size: 12px; }
#accountForm input { display: block; width: 100%; min-height: 47px; padding: 12px 13px; border: 1px solid #526150; background: #121a14; color: var(--ink); border-radius: 2px; outline: none; }
#accountForm input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,173,122,.18); }
#accountForm input::placeholder { color: #798977; }
#accountForm .button-primary { width: 100%; margin-top: 25px; }
.account-text-button { display: block; margin: 19px auto 0; padding: 5px; background: transparent; border: 0; color: var(--gold); font: italic 13px var(--serif); }
.account-text-button:hover { text-decoration: underline; }
.auth-footnote { font-size: 11px; color: var(--muted-deep); text-align: center; margin: 18px 0 0; }
.auth-error { padding: 12px; margin: 17px 0 -3px; background: #422c26; color: #efbba7; border-left: 2px solid #b16d60; font-size: 12px; }
.signed-user { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding: 18px 0 23px; }
.signed-avatar { width: 44px; height: 47px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--gold); font: 25px var(--hanzi); }
.signed-user strong { display: block; font-size: 15px; }
.signed-user small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
#accountSignedIn .button-secondary { width: 100%; margin-top: 7px; }
#passwordResetToggle { margin: 4px auto 13px; }
#passwordResetForm { margin: 13px 0 21px; padding: 19px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#passwordResetForm[hidden], #passwordResetToggle[hidden] { display: none !important; }
.password-reset-note { color: var(--muted); font: italic 13px/1.6 var(--serif); }
#passwordResetForm label { display: block; margin: 14px 0 7px; color: var(--ink-soft); font-size: 12px; }
#passwordResetForm input { display: block; width: 100%; min-height: 46px; padding: 12px; background: #121a14; color: var(--ink); border: 1px solid #526150; border-radius: 2px; }
#passwordResetForm input:focus { border-color: var(--gold); outline: 1px solid var(--gold); }
#passwordResetSubmit { width: 100%; margin-top: 18px; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1220px) { .reading-layout { grid-template-columns: minmax(0, 1fr); } .sidebar-info { display: none; } .word-panel { right: 18px; top: 90px; } }
@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar { display: none; position: fixed; top: 0; left: 0; width: min(310px, 85vw); height: 100dvh; box-shadow: 0 0 0 100vmax rgba(0,0,0,.66), 14px 0 50px rgba(0,0,0,.3); }
  .sidebar.show { display: flex; }
  .topbar { height: 64px; padding: 0 25px; }
  .desktop-eyebrow { display: none; }
  .mobile-brand { display: flex; align-items: center; gap: 12px; font: 19px var(--serif); }
  .mobile-brand strong { font-weight: 400; }
  .mobile-only { display: inline-grid; place-items: center; }
  main { padding: 34px 25px 70px; }
  .hero { padding-right: 10px; }
  .path-volume { grid-template-columns: minmax(135px, 200px) minmax(0,1fr); gap: 25px; }
}
@media (max-width: 660px) {
  h1 { font-size: 40px; }
  .topbar { padding: 0 17px; }
  .top-actions { gap: 8px; }
  .account-button { font-size: 12px; max-width: 96px; padding-left: 9px; }
  main { padding: 25px 18px 55px; }
  .hero { min-height: 0; padding: 29px 2px 38px; }
  .hero h1 { font-size: clamp(46px, 10vw, 63px); margin-top: 20px; }
  .hero p { font-size: 13px; }
  .hero-art { display: none; }
  .progress-summary { padding: 22px 0; justify-content: space-between; gap: 6px; }
  .progress-summary > div { padding: 0 10px; display: block; border: 0; }
  .progress-summary > div:first-child { padding-left: 0; }
  .progress-summary strong { display: block; font-size: 25px; line-height: 1.25; }
  .progress-summary strong span { font-size: 12px; }
  .progress-summary small { display: block; font-size: 10px; margin-top: 5px; white-space: normal; line-height: 1.3; }
  .section-heading { margin-top: 43px; align-items: start; }
  .section-heading h2 { font-size: 29px; }
  .section-heading .minor-link, .story-total { font-size: 11px; }
  .chapter-grid { grid-template-columns: 1fr; gap: 10px; }
  .chapter-card { min-height: 0; padding: 19px 20px; }
  .chapter-card strong { margin-top: 18px; font-size: 25px; }
  .chapter-card small { max-width: 81%; }
  .chapter-progress { margin-top: 17px; }
  .chapter-story-list { grid-template-columns: 1fr; }
  .path-invitation { display: block; }
  .path-invitation .button-secondary { margin-top: 15px; }
  .hsk-grid { grid-template-columns: 1fr; }
  .hsk-level { padding: 21px 19px; }
  .hsk-top strong { font-size: 22px; }
  .hsk-top span { font-size: 11px; }
  .path-heading { padding-top: 13px; }
  .path-overview { flex-wrap: wrap; gap: 13px; }
  .path-overview > strong { font-size: 31px; }
  .path-overview .progress-track { min-width: 130px; }
  .path-overview .button-primary { width: 100%; }
  .volume-jump { gap: 4px 16px; }
  .volume-jump button span { font-size: 11px; }
  .path-volume { display: block; padding-top: 45px; scroll-margin-top: 63px; }
  .path-volume-head { position: static; display: grid; grid-template-columns: auto 1fr; gap: 0 16px; margin-bottom: 17px; }
  .path-volume-number { grid-row: span 2; font-size: 36px; }
  .path-volume-head .overline { margin-top: 0; }
  .path-volume-head h2 { font-size: 29px; margin: 4px 0; }
  .path-volume-head p { margin-bottom: 5px; }
  .path-volume-count { grid-column: 1 / -1; margin-top: 10px; }
  .path-step { gap: 13px; min-height: 72px; }
  .path-step-name strong { font-size: 19px; }
  .path-step-name small { font-size: 10px; }
  .path-step-state { font-size: 11px; }
  .reader-head { display: block; margin-bottom: 22px; }
  .reader-head h1 { font-size: 43px; }
  .story-counter { display: block; margin-top: 12px; }
  .reading-toolbar { padding: 12px 15px; }
  .tool-label { width: 100%; }
  .tool-actions { width: 100%; justify-content: space-between; gap: 2px; }
  .pill-toggle { flex: 1; padding: 9px 3px; font-size: 11px; white-space: nowrap; }
  .pill-toggle span { display: block; margin: 2px 0 0; }
  .read-body { padding: 24px 17px 30px; }
  .read-hint { margin-bottom: 24px; }
  .sentence { font-size: 29px; line-height: 2.5; margin-bottom: 17px; }
  .word rt { font-size: 10px; }
  .reader-card-foot { padding: 12px 16px; }
  .quiz-card { padding: 22px 18px; }
  .quiz-title { font-size: 23px; }
  .word-panel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: min(78dvh, 620px); padding: 28px 26px calc(25px + env(safe-area-inset-bottom)); border-left: none; border-right: none; border-bottom: none; }
  .word-big { font-size: 58px; }
  .word-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .word-actions .button-secondary { padding: 10px 8px; }
  .review-header { display: block; }
  .review-header .button-secondary { margin-top: 15px; }
  .review-overview { padding: 22px; }
  .vocab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .vocab-card { padding: 15px 13px; }
  .steps-grid { grid-template-columns: 1fr; }
  .account-dialog { padding: 29px 23px; }
  .footer { padding: 22px 12px; gap: 9px; font-size: 10px; }
}
@media (max-width: 370px) { main { padding-left: 13px; padding-right: 13px; } .hero h1 { font-size: 43px; } .progress-summary small { font-size: 9px; } .mobile-brand { font-size: 17px; } .section-heading .minor-link { max-width: 115px; white-space: normal; text-align: right; } .sentence { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }