/* Writing Gym v2: isolated Wisteria silk design system. */
:root {
  color-scheme:dark; --bg:#090d13; --surface:#0d121b; --raised:#141b27;
  --hover:#1b2432; --line:#273141; --subtle:#1c2634; --text:#dce3ed;
  --muted:#9aa6b6; --faint:#748399; --accent:#c4acef; --bright:#d7c4f6;
  --peach:#f0c7b6; --success:#aad7c2; --danger:#f0adab;
  --hanzi:"Kaiti SC","STKaiti","KaiTi","Songti SC","Noto Serif CJK SC",serif;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; font-synthesis:none; -webkit-font-smoothing:antialiased;
}
* {box-sizing:border-box}
body {margin:0;min-width:280px;background:var(--bg);color:var(--text)}
button,input {font:inherit;max-width:100%}
button,a,input {-webkit-tap-highlight-color:transparent}
button {cursor:pointer;touch-action:manipulation;border:0;color:inherit}
button:disabled {cursor:not-allowed;opacity:.5}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible {outline:3px solid var(--bright);outline-offset:4px}
a {color:var(--accent);text-underline-offset:4px}
h1,h2,h3,p {margin-top:0}
h1,h2,h3 {font-weight:650;letter-spacing:-.04em;text-wrap:balance}
h1 {font-size:clamp(2rem,6vw,2.65rem);line-height:1.12;margin-bottom:15px}
h2 {font-size:1.6rem;line-height:1.2;margin-bottom:12px}
h3 {font-size:1.03rem;letter-spacing:-.02em;margin-bottom:8px}
p {line-height:1.6}
[hidden] {display:none!important}
.app-shell {max-width:520px;min-height:100dvh;margin:auto;display:flex;flex-direction:column;background:var(--surface)}
.app-header {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:max(22px,env(safe-area-inset-top)) 28px 20px;border-bottom:1px solid var(--subtle)}
.brand {display:inline-flex;align-items:center;gap:10px;font-size:.85rem;font-weight:650;letter-spacing:-.015em}
.brand::before {content:'字';font-family:var(--hanzi);font-size:1.4rem;font-weight:400;color:var(--accent)}
.save-status {display:inline-flex;align-items:center;gap:6px;text-align:right;color:var(--muted);font-size:.68rem;line-height:1.4;max-width:170px}
.save-status::before {content:'';width:5px;height:5px;flex:0 0 auto;border-radius:50%;background:var(--success)}
.save-status.error {color:var(--danger)}
.save-status.error::before {background:var(--danger)}
.save-status.saving::before {background:var(--peach)}
.screen {padding:32px 28px;flex:1;animation:enter .2s ease-out;min-width:0}
.eyebrow {margin-bottom:14px;color:var(--accent);font-size:.65rem;line-height:1.5;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.lede {margin-bottom:24px;color:var(--muted);font-size:.9rem;line-height:1.65}
.hero-card {position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:20px;min-height:162px;margin-bottom:21px;padding:25px 21px;border:1px solid #494057;border-radius:22px;background:#151623}
.hero-card::after {content:'';position:absolute;z-index:-1;width:160px;height:160px;right:-50px;top:-50px;border:1px solid #c4acef10;border-radius:50%;box-shadow:0 0 0 27px #c4acef05,0 0 0 55px #c4acef03}
.hero-card>div {flex:1;min-width:0}
.hero-card .eyebrow {font-size:.6rem;margin-bottom:9px}
.hero-card h2 {font-size:1.3rem;margin-bottom:9px}
.hero-card p {margin:0;color:var(--muted);font-size:.78rem}
.hero-glyph {font-family:var(--hanzi);font-size:4.5rem;color:var(--bright);padding-left:18px;border-left:1px solid #c4acef25;line-height:1.2}
.primary,.secondary,.quiet,.icon-button {display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:13px 19px;border-radius:13px;font-size:.85rem;font-weight:650;line-height:1.35;transition:background-color .15s,transform .15s}
.primary {background:var(--accent);color:#191421;box-shadow:0 2px 0 #84749f}
.primary:hover:not(:disabled) {background:var(--bright)}
.primary:active:not(:disabled) {transform:translateY(1px);box-shadow:0 1px 0 #84749f}
.secondary {background:#151d29;color:var(--text);border:1px solid #354054}
.secondary:hover:not(:disabled) {background:#202938}
.quiet,.icon-button {background:transparent;color:var(--muted);font-weight:550}
.quiet {padding-inline:10px}
.quiet:hover:not(:disabled),.icon-button:hover:not(:disabled) {background:var(--hover);color:var(--text)}
.icon-button {min-width:44px;min-height:44px;padding:8px;font-size:1rem}
.wide {width:100%}
.button-row {display:flex;gap:10px;flex-wrap:wrap}
.button-row>* {flex:1}
.home-action {margin-bottom:7px}
.section-heading {display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:29px 0 13px}
.section-heading h2 {font-size:1.08rem;letter-spacing:-.02em;margin:0}
.section-heading>span {color:var(--muted);font-size:.72rem}
.stats {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0 25px}
.stat {min-width:0;padding:18px;border:1px solid var(--line);border-radius:16px;background:#111823}
.stat strong {display:block;color:var(--bright);font-size:1.85rem;font-weight:600;letter-spacing:-.04em}
.stat span {display:block;color:var(--muted);font-size:.72rem;line-height:1.5;margin-top:5px}
.lesson-card {padding:19px;border:1px solid var(--line);border-radius:18px;background:#111823;margin-top:20px}
.lesson-card p {color:var(--muted);font-size:.8rem;margin:0}
.note {margin:17px 0;color:var(--muted);font-size:.72rem;line-height:1.65}
.bottom-nav {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;position:sticky;bottom:0;padding:11px 16px max(13px,env(safe-area-inset-bottom));border-top:1px solid var(--subtle);background:#0c1119f5;backdrop-filter:blur(14px);z-index:3}
.bottom-nav button {min-height:51px;padding:9px 4px;border-radius:12px;background:transparent;color:var(--muted);font-size:.72rem;font-weight:550}
.bottom-nav button.active {background:#c4acef0e;color:var(--bright)}
.bottom-nav button:hover {background:#c4acef15}
.nav-icon {display:block;margin-bottom:5px;font-size:1.08rem;line-height:1}
.word-list {display:grid;gap:0}
.word-row {display:flex;align-items:center;gap:13px;padding:16px 0;border-bottom:1px solid var(--subtle);width:100%;text-align:left;background:transparent;color:var(--text)}
button.word-row:hover {background:#c4acef09}
.word-row>.glyph {display:grid;place-items:center;min-width:49px;min-height:49px;flex:0 0 auto;max-width:110px;border-radius:12px;font-family:var(--hanzi);font-size:1.65rem;background:#1b202d;color:var(--bright);padding:3px 7px;overflow-wrap:anywhere}
.word-meta {flex:1;min-width:0}
.word-meta strong {display:block;font-size:.86rem;font-weight:600}
.word-meta span {display:block;margin-top:4px;font-size:.73rem;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.tag {flex:0 1 auto;border:1px solid #35404d;border-radius:6px;padding:4px 7px;font-size:.63rem;color:var(--muted);line-height:1.35;text-align:center}
.search {width:100%;min-height:48px;padding:12px 14px;background:#111823;color:var(--text);border:1px solid var(--line);border-radius:12px;margin:2px 0 12px}
.search::placeholder {color:var(--muted)}
.screen-exercise {padding-top:15px}
.lesson-top {display:flex;align-items:center;gap:14px;margin:0 -9px 24px}
.lesson-progress {flex:1;min-width:0}
.progress-track {height:6px;overflow:hidden;border-radius:99px;background:#253040}
.progress-track>span {display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width .3s}
.task-count {display:block;margin-top:8px;color:var(--muted);font-size:.68rem;font-variant-numeric:tabular-nums}
.task-label {color:var(--bright);font-size:.66rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;text-align:center;margin-bottom:11px}
.screen-exercise>h1 {font-size:1.45rem;letter-spacing:-.035em;text-align:center;margin-bottom:19px}
.prompt {text-align:center;margin-bottom:18px}
.prompt-pinyin {display:block;font-size:1.85rem;font-weight:600;letter-spacing:-.025em;line-height:1.3;overflow-wrap:anywhere}
.prompt-meaning {display:block;margin:5px 0 0;color:var(--muted);font-size:.88rem;line-height:1.5}
.word-position {display:flex;align-items:center;justify-content:center;gap:7px;margin:12px 0 7px}
.word-slot {display:grid;place-items:center;min-width:27px;height:29px;padding:0 3px;border:1px solid var(--line);border-radius:7px;color:var(--faint);font-size:.75rem}
.word-slot.current {color:var(--accent);border-color:#c4acef70;background:#c4acef0a}
.position-caption {display:block;color:var(--muted);font-size:.68rem;line-height:1.4}
.audio-button {margin:8px 0 0;min-height:44px;font-size:.73rem}
.writing-board {position:relative;isolation:isolate;display:grid;place-items:center;touch-action:none;width:min(100%,370px);aspect-ratio:1;margin-inline:auto;overflow:hidden;border:1px solid #3b3850;border-radius:24px;background:#101522;box-shadow:0 1px 0 #ffffff04 inset}
.writing-board::before,.writing-board::after {content:'';position:absolute;inset:16px;z-index:-1;pointer-events:none}
.writing-board::before {border-top:1px dashed #c4acef1b;top:50%;bottom:auto}
.writing-board::after {border-left:1px dashed #c4acef1b;left:50%;right:auto}
.grid-cross {position:absolute;inset:0;z-index:-1;background:linear-gradient(45deg,transparent calc(50% - .5px),#c4acef09 50%,transparent calc(50% + .5px)),linear-gradient(-45deg,transparent calc(50% - .5px),#c4acef09 50%,transparent calc(50% + .5px));pointer-events:none}
.writing-board #hanzi-target {position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.writing-board svg {max-width:100%;height:auto;display:block}
.finished-glyph {font-family:var(--hanzi);font-size:clamp(8rem,42vw,13rem);line-height:1;color:var(--bright)}
.board-caption {margin:11px 0 0;text-align:center;color:var(--muted);font-size:.71rem;line-height:1.55;min-height:2.9em}
.help-row {display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.help-row button {min-height:44px;font-size:.74rem}
.feedback {margin-top:17px;padding:16px;border:1px solid var(--line);border-radius:15px;background:#151b25;font-size:.8rem;line-height:1.55}
.feedback h2 {font-size:1.03rem;margin-bottom:6px;letter-spacing:-.02em}
.feedback p {color:var(--muted);font-size:.77rem;margin-bottom:8px}
.feedback span {font-size:.7rem;color:var(--muted)}
.feedback.success {border-color:#aad7c23b;background:#aad7c207}
.feedback.success h2 {color:var(--success)}
.feedback.help {border-color:#c4acef3d;background:#c4acef07}
.feedback.help h2 {color:var(--bright)}
.feedback.error,.error-card {border:1px solid #f0adab45;background:#f0adab06}
.feedback.error h2,.error-card h2 {color:var(--danger)}
.error-card {padding:18px;margin:16px 0;border-radius:16px}
.error-card h2 {font-size:1.08rem;letter-spacing:-.02em}
.error-card p {color:var(--muted);font-size:.8rem;margin-bottom:12px}
.error-card p:last-child {margin-bottom:0}
.global-notice {margin:14px 20px 0;font-size:.76rem;line-height:1.6}
.footer-actions {display:grid;gap:10px;margin-top:20px}
.footer-actions>button {width:100%}
.footer-actions .note {margin:0;text-align:center}
.summary-mark {display:grid;place-items:center;width:70px;height:70px;margin-bottom:24px;border:1px solid #c4acef40;border-radius:22px;background:#c4acef0c;font-size:2.3rem;color:var(--bright)}
.empty-state {text-align:center;padding:30px 8px}
.empty-state>.glyph {display:block;color:var(--accent);font-family:var(--hanzi);font-size:3.5rem;margin-bottom:18px}
.empty-state p {color:var(--muted);font-size:.85rem}
.empty-state h2 {font-size:1.3rem}
.modal-backdrop {position:fixed;z-index:20;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:#020509c9;backdrop-filter:blur(6px)}
.dialog {width:min(100%,380px);max-height:calc(100dvh - 48px);overflow:auto;padding:27px;border:1px solid #4b405e;border-radius:24px;background:#121822;box-shadow:0 30px 100px #0006}
.dialog h2 {font-size:1.5rem}
.dialog p {color:var(--muted);font-size:.85rem}
.dialog .button-row {flex-direction:column;align-items:stretch;margin-top:23px}
.dialog .button-row>* {width:100%}
.loading-page {max-width:520px;margin:12vh auto;padding:30px}
.loading-page .brand {margin-bottom:44px}
.loading-page p {color:var(--muted)}
.app-footer {color:var(--faint);font-size:.66rem;text-align:center;padding:12px 20px}
.app-footer a {color:var(--muted)}
.activity-strip {display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:5px;margin:20px 0 8px}
.activity-cell {aspect-ratio:1;border-radius:4px;background:#1b2330;border:1px solid #273141}
.activity-cell.active {background:#c4acef80;border-color:#c4acef90}
/* Keep the action in normal flow, but dock it to the visible viewport when the
   lesson is taller. It is outside the animated screen and inside modal inert. */
.lesson-shell .app-header {padding:10px 20px;padding-top:max(10px,env(safe-area-inset-top))}
.lesson-shell .screen-exercise {padding-top:8px;padding-bottom:16px}
.lesson-shell .lesson-top {margin-bottom:8px}
.lesson-shell .task-label {margin-bottom:5px}
.lesson-shell .screen-exercise>h1 {font-size:1.25rem;margin-bottom:8px}
.lesson-shell .prompt {margin-bottom:10px}
.lesson-shell .prompt-pinyin {font-size:1.6rem}
.prompt-meta {display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.prompt-meta .audio-button {margin:0}
.word-position {flex-wrap:wrap}
.lesson-shell .board-caption {min-height:0;margin-top:9px}
.lesson-shell .footer-actions {margin-top:10px}
.exercise-result .writing-board {width:min(100%,5.5rem);border-radius:16px;touch-action:auto}
.exercise-result .finished-glyph {font-size:3.8rem}
.exercise-result .feedback {margin-top:12px;scroll-margin-bottom:calc(6rem + env(safe-area-inset-bottom))}
.lesson-actions {position:sticky;bottom:0;flex:none;z-index:4;display:grid;
  padding:12px 28px max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--subtle);
  background:var(--surface);box-shadow:0 -8px 18px #090d131a}
.lesson-actions>button {width:100%;min-height:48px}
@keyframes enter {from{opacity:.65;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:600px) {.app-shell{margin:24px auto;min-height:calc(100dvh - 48px);border:1px solid #2b3342;border-radius:27px;overflow:hidden;box-shadow:0 28px 90px #0005}.bottom-nav{position:static}.screen{padding:34px}.screen-exercise{padding-top:17px}}
@media(min-width:600px) {.lesson-shell{overflow:visible}.lesson-shell .lesson-actions{border-radius:0 0 27px 27px}}
@media(max-width:360px) {.screen{padding:25px 18px}.screen-exercise{padding-top:13px}.app-header{padding-inline:19px}.hero-card{padding:20px 16px;gap:12px}.hero-glyph{font-size:3.2rem;padding-left:13px}.hero-card h2{font-size:1.12rem}.prompt-pinyin{font-size:1.65rem}.tag{font-size:.58rem}.word-row{gap:9px}.word-row>.glyph{min-width:42px;font-size:1.4rem}.writing-board{border-radius:19px}.save-status{font-size:.62rem}.stats{gap:9px}.stat{padding:15px}}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(prefers-contrast:more) {:root{--muted:#bdc6d3;--faint:#a4b1c4;--line:#596578;--subtle:#394558}.writing-board{border-color:var(--accent)}.primary,.secondary,.tag{border:1px solid currentColor}}