:root{color:#18211e;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--page:#eef0ec;--app:#f8f6f0;--surface:#fff;--surface-soft:#f1eee5;--ink:#18211e;--muted:#68716c;--line:#dedfd8;--red:#b3342b;--red-soft:#f6e3df;--jade:#2d7561;--jade-soft:#deeee8;--gold:#a26b12;background:#eef0ec;font-family:Inter,Segoe UI,PingFang SC,Microsoft YaHei,Arial,sans-serif}*{box-sizing:border-box}body{background:var(--page);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-color-scheme:dark){:root{color:#f1f4ef;--page:#111615;--app:#171c1a;--surface:#202623;--surface-soft:#262d29;--ink:#f1f4ef;--muted:#aeb8b2;--line:#36403a;--red:#ee7268;--red-soft:#472823;--jade:#75bfa8;--jade-soft:#213e35;--gold:#e1b35d;background:#111615}}#root{min-height:100vh}.app-shell{background:var(--app);width:min(100%,540px);min-height:100vh;color:var(--ink);flex-direction:column;margin:0 auto;display:flex;position:relative;box-shadow:0 18px 55px #18211e1f}.app-header{justify-content:space-between;align-items:center;gap:16px;padding:20px 20px 12px;display:flex}.brand{color:inherit;align-items:center;gap:11px;text-decoration:none;display:flex}.brand-seal{background:var(--red);color:#fff;border-radius:12px;place-items:center;width:40px;height:40px;font-family:KaiTi,STKaiti,serif;font-size:21px;display:grid}.brand strong,.brand small{display:block}.brand strong{font-weight:650}.brand small{color:var(--muted);margin-top:2px;font-size:12px}.header-icon{border:1px solid var(--line);background:var(--surface);width:42px;height:42px;color:var(--ink);border-radius:14px;place-items:center;display:grid}.app-content{flex:1;padding:0 18px 30px}.page-stack{gap:24px;display:grid}.welcome-block{padding-top:9px}.eyebrow{color:var(--muted);margin:0 0 6px;font-size:13px}h1{letter-spacing:-.04em;margin:0 0 18px;font-size:clamp(28px,7vw,36px);font-weight:700;line-height:1.12}h1 em{color:var(--red);font-style:normal}.search-field{border:1px solid var(--line);background:var(--surface);min-height:52px;color:var(--muted);border-radius:16px;align-items:center;gap:10px;padding:0 14px;display:flex}.search-field:focus-within{outline:3px solid color-mix(in srgb, var(--jade) 24%, transparent);border-color:var(--jade)}.search-field input{min-width:0;color:var(--ink);background:0 0;border:0;outline:0;flex:1;font-size:16px}.search-field input::placeholder{color:var(--muted)}.progress-panel{border:1px solid var(--line);background:var(--surface);border-radius:19px;padding:16px}.panel-heading,.skill-progress>div:first-child{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.panel-heading strong{font-size:15px}.panel-heading span,.skill-progress span{color:var(--muted);font-size:12px}.progress-track{background:var(--surface-soft);border-radius:999px;height:8px;margin-top:8px;display:block;overflow:hidden}.progress-track>span{border-radius:inherit;background:var(--jade);height:100%;display:block}.progress-track.compact{height:5px}.skill-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;display:grid}.skill-progress strong{font-size:12px}.section-heading{justify-content:space-between;align-items:center;margin-bottom:11px;display:flex}.section-heading h2{margin:0;font-size:17px}.section-heading button,.section-heading a{min-height:38px;color:var(--red);background:0 0;border:0;align-items:center;font-size:13px;text-decoration:none;display:inline-flex}.quick-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.quick-grid button,.quick-grid a{border:1px solid var(--line);background:var(--surface);min-height:94px;color:var(--ink);border-radius:17px;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:14px 10px;text-decoration:none;display:flex}.quick-grid svg{color:var(--jade)}.quick-grid span{font-size:13px;font-weight:650}.topic-list{gap:9px;display:grid}.topic-row{background:var(--surface-soft);width:100%;min-height:76px;color:var(--ink);text-align:left;border:0;border-radius:17px;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 13px;text-decoration:none;display:grid}.topic-glyph{background:var(--surface);width:46px;height:46px;color:var(--red);border-radius:14px;place-items:center;font-family:KaiTi,STKaiti,serif;font-size:21px;display:grid}.topic-copy{min-width:0}.topic-copy strong,.topic-copy small{display:block}.topic-copy strong{font-size:15px}.topic-copy small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-size:12px;overflow:hidden}.topic-copy .progress-track{margin-top:8px}.topic-count{color:var(--jade);align-items:center;gap:4px;font-size:12px;display:inline-flex}.sample-phrase{border:1px solid var(--line);background:var(--surface);border-radius:19px;justify-content:space-between;align-items:center;gap:16px;padding:16px;display:flex}.sample-phrase h2{margin:8px 0 2px;font-size:23px}.sample-phrase p{color:var(--muted);margin:0;font-size:14px}.sample-phrase .pinyin{color:var(--red);margin-bottom:8px}.sample-phrase>button{background:var(--red-soft);width:48px;height:48px;color:var(--red);border:0;border-radius:50%;flex:0 0 48px;place-items:center;display:grid}.status-learning{color:var(--gold);font-size:12px;font-weight:650;display:inline-flex}.bottom-nav{z-index:10;border-top:1px solid var(--line);background:color-mix(in srgb, var(--app) 94%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);grid-template-columns:repeat(4,1fr);gap:4px;min-height:78px;padding:8px 8px 10px;display:grid;position:sticky;bottom:0;left:0;right:0}.bottom-nav a{min-height:58px;color:var(--muted);background:0 0;border:0;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:11px;text-decoration:none;display:flex}.bottom-nav a.active{background:var(--red-soft);color:var(--red)}.bottom-nav svg{width:20px;height:20px}@media (width>=760px){.app-shell{border-radius:30px;min-height:calc(100vh - 48px);margin-block:24px;overflow:hidden}}@media (width<=350px){.app-content{padding-inline:14px}.app-header{padding-inline:15px}.offline-status{padding-inline:9px}.quick-grid button{padding-inline:8px}}.eyebrow-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.offline-pill{color:var(--jade);background:var(--jade-soft);border-radius:999px;align-items:center;gap:5px;padding:7px 10px;font-size:11px;font-weight:650;display:inline-flex}.continue-link{color:var(--red);margin-top:14px;font-size:13px;text-decoration:none;display:inline-flex}.topic-glyph.red{color:var(--red)}.topic-glyph.jade{color:var(--jade)}.topic-glyph.gold{color:var(--gold)}.dialogue-feature{background:var(--red);color:#fff;border-radius:19px;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;padding:17px;text-decoration:none;display:grid}.dialogue-feature-icon{background:#ffffff2e;border-radius:14px;place-items:center;width:46px;height:46px;display:grid}.dialogue-feature strong,.dialogue-feature small{display:block}.dialogue-feature small{opacity:.82;margin-top:4px}.page-intro{padding-top:10px}.page-intro h1{margin-bottom:10px}.page-intro>p:last-child{color:var(--muted);margin:0;line-height:1.55}.filter-section{gap:10px;display:grid}.filter-row{scrollbar-width:none;gap:8px;padding-bottom:2px;display:flex;overflow-x:auto}.filter-row::-webkit-scrollbar{display:none}.filter-row button,.manual-status button,.branch-row button,.count-row button{border:1px solid var(--line);background:var(--surface);min-height:40px;color:var(--ink);white-space:nowrap;border-radius:999px;padding:0 14px}.filter-row button.active,.manual-status button.active,.branch-row button.active,.count-row button.active{color:var(--app);background:var(--ink);border-color:var(--ink)}.select-field,.practice-setup>label,.auth-form label{color:var(--muted);gap:7px;font-size:13px;display:grid}.select-field select,.practice-setup select,.auth-form input{border:1px solid var(--line);background:var(--surface);width:100%;min-height:48px;color:var(--ink);border-radius:14px;padding:0 13px;font-size:16px}.result-heading{align-items:baseline;gap:7px;display:flex}.result-heading span{color:var(--muted);font-size:13px}.item-list{gap:10px;display:grid}.item-card{border:1px solid var(--line);background:var(--surface);border-radius:18px;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:10px;padding:14px;display:grid}.item-card-main{color:var(--ink);flex-direction:column;align-items:flex-start;min-width:0;text-decoration:none;display:flex}.item-card-top{justify-content:space-between;align-items:flex-start;gap:10px;width:100%;display:flex}.item-card-top strong{font-size:21px}.kind-label{color:var(--muted);background:var(--surface-soft);white-space:nowrap;border-radius:999px;padding:4px 8px;font-size:11px}.pinyin{color:var(--red)!important}.item-card .pinyin{margin-top:3px;font-size:13px}.item-meaning{color:var(--muted);margin-top:8px;font-size:14px}.status-badge{color:var(--muted);align-items:center;gap:5px;margin-top:10px;font-size:12px;display:inline-flex}.status-badge.learning{color:var(--gold)}.status-badge.learned{color:var(--jade)}.round-audio{width:46px;height:46px;color:var(--red);background:var(--red-soft);border:0;border-radius:50%;place-items:center;display:grid}.round-audio.small{width:36px;height:36px}.round-audio.small svg{width:17px}.empty-state{text-align:center;color:var(--muted);background:var(--surface-soft);border-radius:20px;padding:56px 26px}.empty-state>svg{width:42px;height:42px;color:var(--jade)}.empty-state strong{color:var(--ink);margin-top:14px;display:block}.empty-state p{margin:8px 0 16px;line-height:1.5}.empty-state a{color:var(--red);align-items:center;gap:7px;display:inline-flex}.back-link{min-height:42px;color:var(--ink);align-items:center;gap:7px;width:fit-content;text-decoration:none;display:inline-flex}.topic-hero{background:var(--surface-soft);border-radius:20px;grid-template-columns:auto 1fr;gap:14px;padding:17px;display:grid}.topic-glyph.large{width:58px;height:58px;font-size:27px}.topic-hero h1{margin:0 0 5px;font-size:28px}.topic-hero p{color:var(--muted);margin:0}.topic-progress{grid-column:1/-1;margin-top:3px}.dialogue-list{gap:10px;display:grid}.dialogue-card{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:18px;grid-template-columns:44px minmax(0,1fr) auto;align-items:start;gap:12px;padding:14px;text-decoration:none;display:grid}.dialogue-icon{background:var(--jade-soft);width:44px;height:44px;color:var(--jade);border-radius:14px;place-items:center;display:grid}.dialogue-icon.red{background:var(--red-soft);color:var(--red)}.dialogue-icon.gold{background:color-mix(in srgb, var(--gold) 18%, var(--surface));color:var(--gold)}.dialogue-copy{min-width:0}.dialogue-copy strong,.dialogue-copy small,.dialogue-copy>span{display:block}.dialogue-copy small{color:var(--muted);margin-top:4px;line-height:1.4}.dialogue-copy>span{color:var(--muted);margin-top:9px;font-size:12px}.dialogue-copy>span svg{vertical-align:-2px;margin-right:4px}.related-links{gap:8px;display:grid}.related-links a{background:var(--surface-soft);color:var(--ink);border-radius:15px;padding:12px;text-decoration:none}.related-links strong,.related-links span,.related-links small{display:block}.related-links span{color:var(--red);margin-top:2px;font-size:12px}.related-links small{color:var(--muted);margin-top:5px}.detail-toolbar{justify-content:space-between;align-items:center;display:flex}.icon-button{border:1px solid var(--line);background:var(--surface);width:44px;height:44px;color:var(--ink);border-radius:14px;place-items:center;display:grid}.icon-button.active{color:var(--red);background:var(--red-soft);border-color:#0000}.phrase-hero{text-align:center;padding:20px 8px 4px}.phrase-meta{color:var(--muted);justify-content:center;align-items:baseline;gap:14px;font-size:12px;display:flex}.phrase-meta .status-badge{margin:0}.phrase-hero h1{letter-spacing:.01em;margin:28px 0 10px;font-size:clamp(40px,12vw,54px)}.pinyin.large{font-size:18px}.meaning-large{margin:18px 0 5px;font-size:19px}.english-meaning{color:var(--muted);margin:0;font-size:14px}.audio-main{background:var(--red);color:#fff;border:0;border-radius:999px;align-items:center;gap:9px;min-height:54px;margin:24px auto 12px;padding:0 22px;font-weight:650;display:inline-flex}.audio-main.playing{background:var(--jade)}.audio-main:disabled{opacity:.78}.play-options{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.play-options>div{align-items:center;gap:5px;display:flex}.play-options span{color:var(--muted);margin-right:3px;font-size:12px}.play-options button,.rate-toggle button{border:1px solid var(--line);background:var(--surface);min-height:34px;color:var(--ink);border-radius:999px;padding:0 10px;font-size:12px}.play-options button.active,.rate-toggle button.active{background:var(--ink);color:var(--app);border-color:var(--ink)}.analysis-panel,.grammar-panel,.usage-note{border-radius:19px;padding:16px}.analysis-panel{background:var(--surface-soft)}.grammar-panel{background:var(--jade-soft)}.analysis-panel h2,.grammar-panel h2{margin:0 0 13px;font-size:18px}.grammar-panel>p:not(.eyebrow){color:var(--muted);line-height:1.55}.breakdown-list{display:grid}.breakdown-list>div{border-top:1px solid var(--line);grid-template-columns:minmax(58px,auto) minmax(80px,1fr) 1.4fr;align-items:baseline;gap:10px;padding:10px 0;display:grid}.breakdown-list>div:first-child{border-top:0}.breakdown-list strong{font-size:18px}.breakdown-list span{color:var(--muted);font-size:13px}.order-compare{grid-template-columns:36px 1fr;gap:8px;margin-top:14px;display:grid}.order-compare strong{color:var(--jade)}.mistake-note{background:var(--surface);border-radius:13px;gap:4px;margin-top:15px;padding:12px;display:grid}.mistake-note strong{color:var(--red)}.mistake-note span{color:var(--muted);font-size:13px}.substitution-list{flex-wrap:wrap;gap:7px;margin-top:15px;display:flex}.substitution-list>strong{flex:0 0 100%;font-size:13px}.substitution-list span{background:var(--surface);border-radius:999px;padding:7px 10px;font-size:13px}.skill-checks{gap:9px;display:grid}.recorder-panel{background:var(--red-soft);border-radius:19px;padding:16px}.recorder-panel h2{margin:2px 0 7px;font-size:19px}.recorder-panel p{color:var(--muted);margin:0;line-height:1.5}.recorder-actions{grid-template-columns:1fr 1fr;gap:9px;margin-top:14px;display:grid}.recorder-actions button{border:1px solid var(--line);background:var(--surface);min-height:48px;color:var(--ink);border-radius:15px;justify-content:center;align-items:center;gap:7px;display:flex}.recorder-actions button:first-child{background:var(--red);color:#fff;border-color:var(--red)}.recorder-actions button.recording{animation:1.2s ease-in-out infinite alternate pulse-record}.recording-playback{width:100%;margin-top:13px}.recorder-error{color:var(--red)!important;margin-top:10px!important}@keyframes pulse-record{to{opacity:.72}}@media (prefers-reduced-motion:reduce){.recorder-actions button.recording{animation:none}}.skill-checks .section-heading{margin:0}.skill-checks>button{border:1px solid var(--line);background:var(--surface);min-height:66px;color:var(--ink);text-align:left;border-radius:16px;grid-template-columns:36px 1fr 24px;align-items:center;gap:9px;padding:10px 13px;display:grid}.skill-checks>button.done{background:var(--jade-soft);border-color:#0000}.skill-checks>button>svg{color:var(--jade)}.skill-checks strong,.skill-checks small{display:block}.skill-checks small{color:var(--muted);margin-top:3px}.manual-status{gap:10px;display:grid}.manual-status>div{gap:8px;display:flex;overflow-x:auto}.dialogue-player{background:var(--red-soft);border-radius:19px;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;display:grid}.play-all{background:var(--red);color:#fff;border:0;border-radius:50%;place-items:center;width:58px;height:58px;display:grid}.dialogue-player strong,.dialogue-player span{display:block}.dialogue-player span{color:var(--muted);margin-top:4px;font-size:12px}.rate-toggle{gap:5px;display:flex}.branch-row{scrollbar-width:none;gap:8px;display:flex;overflow-x:auto}.branch-row button{align-items:center;gap:5px;display:inline-flex}.branch-description{color:var(--muted);margin:10px 0 0;font-size:13px}.transcript{gap:12px;display:grid}.dialogue-line{border-radius:16px;grid-template-columns:38px minmax(0,1fr) 38px;align-items:start;gap:10px;padding:11px;transition:background .2s;display:grid}.dialogue-line.learner{background:var(--jade-soft)}.dialogue-line.active{background:var(--red-soft)}.speaker-avatar{background:var(--surface-soft);width:38px;height:38px;color:var(--muted);border-radius:12px;place-items:center;font-size:11px;display:grid}.learner .speaker-avatar{background:var(--surface);color:var(--jade)}.line-copy{min-width:0}.line-copy span,.line-copy strong{display:block}.speaker-name{color:var(--muted);margin-bottom:4px;font-size:11px}.line-copy strong{font-size:18px;line-height:1.4}.line-copy .pinyin{margin-top:3px;font-size:12px}.line-meaning{color:var(--muted);margin-top:4px;font-size:13px;line-height:1.45}.line-copy a{color:var(--jade);margin-top:8px;font-size:12px;display:inline-flex}.dialogue-completion{background:var(--surface-soft);border-radius:19px;gap:12px;padding:16px;display:grid}.dialogue-completion strong,.dialogue-completion span{display:block}.dialogue-completion span{color:var(--muted);margin-top:4px;font-size:13px}.dialogue-completion>button,.primary-button,.practice-dialogue-link{background:var(--jade);color:#fff;border:0;border-radius:15px;justify-content:center;align-items:center;gap:8px;min-height:50px;padding:0 16px;font-weight:650;text-decoration:none;display:flex}.practice-dialogue-link{background:var(--red)}.practice-setup{gap:20px;display:grid}.practice-setup fieldset{border:0;margin:0;padding:0}.practice-setup legend{margin-bottom:9px;font-weight:650}.mode-grid{grid-template-columns:repeat(3,1fr);gap:9px;display:grid}.mode-grid button{border:1px solid var(--line);background:var(--surface);min-height:86px;color:var(--ink);border-radius:16px;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:13px;display:flex}.mode-grid button.active{background:var(--red-soft);color:var(--red);border-color:#0000}.count-row{gap:8px;display:flex}.session-heading{justify-content:space-between;align-items:center;display:flex}.session-heading button{min-height:42px;color:var(--ink);background:0 0;border:0;align-items:center;gap:6px;display:inline-flex}.session-progress{background:var(--surface-soft);border-radius:999px;height:6px;overflow:hidden}.session-progress span{background:var(--red);height:100%;display:block}.practice-card{border:1px solid var(--line);background:var(--surface);text-align:center;border-radius:24px;flex-direction:column;align-items:center;min-height:430px;padding:22px;display:flex}.practice-card>p{color:var(--muted)}.practice-card .phrase-meta{justify-content:space-between;width:100%}.listen-prompt{background:var(--red);color:#fff;border:0;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:7px;width:112px;height:112px;margin:75px 0 20px;display:flex}.listen-prompt svg{width:34px;height:34px}.prompt-label{margin-top:72px}.practice-card h2{margin:16px 0;font-size:26px}.reading-prompt{font-size:52px!important}.reveal-button{border:1px solid var(--line);background:var(--surface-soft);min-height:48px;color:var(--ink);border-radius:15px;align-items:center;gap:8px;margin-top:auto;padding:0 18px;display:inline-flex}.practice-answer{margin:35px 0 0}.practice-answer h2{font-size:38px}.practice-answer>button{background:var(--red-soft);min-height:44px;color:var(--red);border:0;border-radius:999px;align-items:center;gap:7px;padding:0 14px;display:inline-flex}.grade-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.grade-row button{border:1px solid var(--line);background:var(--surface);min-height:52px;color:var(--ink);border-radius:16px;justify-content:center;align-items:center;gap:8px;display:flex}.grade-row button.known{background:var(--jade);color:#fff;border-color:var(--jade)}.settings-card{border:1px solid var(--line);background:var(--surface);border-radius:18px;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:14px;display:grid}.settings-icon{background:var(--jade-soft);width:42px;height:42px;color:var(--jade);border-radius:13px;place-items:center;display:grid}.settings-card strong,.settings-card p{margin:0;display:block}.settings-card p{color:var(--muted);margin-top:4px;font-size:12px}.settings-ok,.settings-warn{white-space:nowrap;border-radius:999px;padding:6px 9px;font-size:11px}.settings-ok{color:var(--jade);background:var(--jade-soft)}.settings-warn{color:var(--gold);background:color-mix(in srgb, var(--gold) 14%, var(--surface))}.configuration-note{background:var(--red-soft);border-radius:17px;padding:15px}.configuration-note p{color:var(--muted);margin:6px 0 0;line-height:1.5}.auth-form,.sync-panel{gap:14px;display:grid}.auth-form h2{margin:0;font-size:19px}.text-button{min-height:40px;color:var(--red);font:inherit;cursor:pointer;background:0 0;border:0}.loading-state{color:var(--muted);text-align:center;padding:24px 0}.secondary-button{border:1px solid var(--line);background:var(--surface);min-height:48px;color:var(--ink);border-radius:15px;justify-content:center;align-items:center;gap:8px;display:flex}.form-message{color:var(--jade);background:var(--jade-soft);border-radius:14px;padding:12px}@media (width<=420px){.dialogue-player{grid-template-columns:52px 1fr}.rate-toggle{grid-column:1/-1;justify-content:center}.dialogue-card{grid-template-columns:40px minmax(0,1fr)}.dialogue-card>.status-badge{grid-column:2}.breakdown-list>div{grid-template-columns:52px 1fr}.breakdown-list>div>span:last-child{grid-column:2}}