:root{--ink:#112d32;--muted:#607579;--line:#dce5e3;--paper:#f5f8f6;--lime:#cffb7c;--red:#ae412f;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #328799;outline-offset:4px}button{min-height:46px}header{height:92px;padding:0 4.5%;display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--line);background:white}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:32px;font-weight:750;letter-spacing:-1.5px}.logo{background:var(--ink);color:var(--lime);width:43px;height:46px;border-radius:12px;display:grid;place-items:center;font:30px serif}.brand-dot{color:#6b972f}.header-note{font-size:12px;letter-spacing:1.7px;color:var(--muted)}.local-badge{margin-left:auto;border:1px solid var(--line);border-radius:30px;padding:9px 13px;font-size:13px;color:var(--muted)}.layout{max-width:1500px;margin:auto;display:grid;grid-template-columns:235px 1fr;min-height:calc(100dvh - 92px)}aside{padding:42px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column}.eyebrow{font-size:12px;letter-spacing:1.8px;font-weight:700;color:var(--muted)}aside .eyebrow{margin:0 15px 20px}nav{display:grid;gap:9px}.nav{border:0;background:transparent;color:var(--muted);text-align:left;border-radius:12px;padding:15px;font-weight:600;display:flex;gap:13px;align-items:center}.nav span{font-size:23px;width:24px;line-height:1}.nav.active{background:var(--ink);color:white}.side-note{margin:100px 15px 20px}.side-note>span{font:70px serif;color:#b7cbc5}.side-note p{line-height:1.7;font-size:17px}.side-note small{color:var(--muted);font-size:12px}main{padding:42px clamp(24px,4vw,64px) 60px;min-width:0;max-width:1180px;width:100%;margin:auto}h1{font-size:clamp(28px,3.2vw,40px);letter-spacing:-1.3px;margin:9px 0 12px;font-weight:650}h2{font-size:23px;letter-spacing:-.5px}p{line-height:1.6}.intro{color:var(--muted);margin:0 0 28px}.topline{display:flex;align-items:center;justify-content:space-between;gap:16px}.counter{font-size:14px;color:var(--muted)}.filters{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 16px;margin-bottom:8px}.chip{border:1px solid var(--line);border-radius:30px;background:white;padding:10px 17px;white-space:nowrap;font-size:14px}.chip.active{background:var(--ink);color:white;border-color:var(--ink)}.study-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(220px,1fr);gap:24px}.flashcard{position:relative;background:white;border:1px solid var(--line);border-radius:22px;overflow:hidden;min-height:365px;display:flex;flex-direction:column;align-items:center;padding:23px}.card-meta{align-self:stretch;display:flex;justify-content:space-between;font-size:12px;letter-spacing:1.2px;color:var(--muted)}.character{font-family:"Kaiti SC","STKaiti","KaiTi","Noto Serif CJK SC",serif;font-size:138px;line-height:1.25;font-weight:400;margin:18px 0 8px}.pinyin{font-size:25px;color:var(--muted);letter-spacing:1px}.meaning{font-size:25px;font-weight:650;margin:10px 0}.reveal{margin:21px 0 8px}.card-foot{margin-top:auto;color:var(--muted);font-size:13px}.details{background:#e9efec;padding:26px;border-radius:20px;display:flex;flex-direction:column;justify-content:center}.details h2{font-weight:550;font-size:26px;line-height:1.25}.details p{color:#455f60;font-size:16px}.example{margin-top:18px;padding-top:20px;border-top:1px solid #ccdad5}.example strong{font:32px serif;display:block;margin-bottom:8px}.example small{font-size:14px;color:var(--muted)}.study-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:17px 0 29px}.actions{display:flex;gap:10px;flex-wrap:wrap}.primary,.secondary,.icon-button{border:0;border-radius:12px;padding:13px 21px;font-weight:600;background:var(--ink);color:white}.primary.lime{background:var(--lime);color:var(--ink)}.secondary,.icon-button{border:1px solid var(--line);background:white;color:var(--ink)}.icon-button{font-size:20px;padding:9px 18px}.known{background:#dfedcc;border-color:#bbcfaa}.small-caption{color:var(--muted);font-size:13px}.quiz-banner{display:flex;align-items:center;gap:22px;background:var(--ink);color:white;border-radius:18px;padding:24px 27px}.quiz-banner h2{margin:0 0 8px;font-size:21px}.quiz-banner p{font-size:14px;color:#b9cccc;margin:0}.quiz-banner button{margin-left:auto;flex-shrink:0}.panel{background:white;border:1px solid var(--line);border-radius:20px;padding:28px;margin-top:22px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:25px 0}label{display:grid;gap:9px;font-size:14px;font-weight:600}select{padding:14px;border:1px solid var(--line);border-radius:10px;background:white;color:var(--ink);min-width:0;width:100%;font-size:16px}.quiz-stage{max-width:680px;margin:24px auto}.quiz-stage .flashcard{min-height:270px;background:var(--ink);color:white}.quiz-stage .character{margin:10px 0}.quiz-stage .card-meta{color:#bad0cd}.bar{height:6px;border-radius:9px;background:#dce5e3;overflow:hidden;margin:16px 0 26px}.bar>span{height:100%;display:block;background:#74a642}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.answer{border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);min-height:68px;padding:14px;font-size:17px;text-align:left;display:flex;align-items:center;gap:13px}.answer .letter{font-size:12px;padding:6px 9px;background:var(--paper);border-radius:5px;color:var(--muted)}.answer.correct{background:#e2f2ce;border-color:#79a74c}.answer.wrong{background:#fff0eb;border-color:#c26752}.answer:disabled{opacity:1;cursor:default}.feedback{padding:18px 0;line-height:1.6;min-height:60px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:24px 0}.stat{padding:23px;background:white;border:1px solid var(--line);border-radius:16px}.stat strong{display:block;font-size:35px;font-weight:550;margin-bottom:8px}.stat span{font-size:14px;color:var(--muted)}.history-row,.review-row{padding:17px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px}.history-row:last-child,.review-row:last-child{border:0}.history-row small{display:block;color:var(--muted);margin-top:6px;font-size:13px}.score{background:#e7f2d8;padding:8px 12px;border-radius:9px;white-space:nowrap;font-weight:600}.review-char{font:36px serif;margin-right:13px}.result-score{font-size:65px;letter-spacing:-3px;margin:15px 0}.result-score small{font-size:25px;color:var(--muted);letter-spacing:0}.empty{padding:20px 0;color:var(--muted)}#toast{position:fixed;bottom:95px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;border-radius:12px;padding:15px 22px;z-index:8;box-shadow:0 6px 30px #0002;max-width:90vw;width:max-content;display:none;font-size:14px}dialog{max-width:480px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:20px;padding:26px;color:var(--ink)}dialog::backdrop{background:#112d3280}.warning{padding:15px;border-radius:10px;background:#fff0df;color:#874914;margin-bottom:18px}.quiet{color:var(--muted);font-size:14px}.quiz-source{font-family:serif;font-size:32px}.text-center{text-align:center}@media(hover:hover){button:hover{filter:brightness(.95)}.answer:not(:disabled):hover{border-color:#789797}}@media(max-width:1050px){.layout{grid-template-columns:190px 1fr}aside{padding:35px 12px}.study-grid{grid-template-columns:1fr}.details{padding:22px;display:block}.details h2{margin:12px 0;font-size:21px}.details p{margin:8px 0}.example{margin-top:15px;padding-top:15px}.header-note{display:none}.side-note{margin-top:90px}.flashcard{min-height:350px}}@media(max-width:640px){header{height:73px;padding:0 20px}.brand{font-size:28px}.logo{width:36px;height:39px;font-size:25px}.local-badge{font-size:12px;padding:7px 10px}.layout{display:block;min-height:calc(100dvh - 73px)}aside{position:fixed;bottom:0;left:0;right:0;background:white;z-index:5;border-right:0;border-top:1px solid var(--line);padding:8px 12px max(8px,env(safe-area-inset-bottom))}aside>.eyebrow,.side-note{display:none}nav{grid-template-columns:repeat(3,1fr);gap:5px}.nav{padding:8px 4px;display:flex;flex-direction:column;gap:6px;font-size:12px;border-radius:10px;align-items:center}.nav.active{background:#edf4e7;color:var(--ink)}.nav span{font-size:22px;width:auto}main{padding:27px 20px 125px}h1{font-size:30px}.intro{font-size:15px;margin-bottom:23px}.counter{font-size:12px}.study-grid{gap:15px}.flashcard{min-height:320px;padding:19px}.character{font-size:122px}.study-bottom{gap:8px;flex-wrap:wrap;margin-bottom:22px}.study-bottom .secondary{padding:12px 13px;font-size:14px}.study-bottom .small-caption{display:none}.quiz-banner{padding:23px;flex-wrap:wrap;gap:18px}.quiz-banner button{margin-left:0;width:100%}.details{padding:21px}.panel{padding:21px}.form-row{grid-template-columns:1fr}.stats{gap:8px}.stat{padding:16px 10px}.stat strong{font-size:28px}.stat span{font-size:12px}.answers{gap:9px}.answer{font-size:16px;padding:12px 10px;gap:8px;overflow-wrap:anywhere}.topline{gap:8px}.topline h2{font-size:21px}.history-row{font-size:14px}.quiz-stage{margin-top:16px}}@media(prefers-reduced-motion:no-preference){.flashcard{animation:appear .25s ease}@keyframes appear{from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}}
.chapters{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.chapter{display:flex;align-items:center;gap:13px;padding:18px;border:1px solid var(--line);border-radius:12px;cursor:pointer;min-width:0}.chapter.selected{background:#edf4e7;border-color:#8ba972}.chapter input{width:19px;height:19px;accent-color:var(--ink);flex-shrink:0}.chapter strong{display:block;margin-bottom:7px;font-size:15px}.chapter strong small{color:var(--muted);font-weight:400;margin-right:5px}.chapter .quiet{font-size:13px}.primary:disabled{opacity:.45;cursor:not-allowed}@media(max-width:640px){.chapters{grid-template-columns:1fr}.chapter{padding:15px}}
/* Night palette: restrained contrast, no pure white surfaces. */
.header-controls{margin-left:auto;display:flex;align-items:center;gap:12px}.theme-toggle{display:grid;place-items:center;width:46px;padding:0;border:1px solid var(--line);border-radius:50%;background:white;color:var(--ink);font-size:25px;line-height:1}
:root[data-theme="dark"]{--ink:#dce6e2;--muted:#9cb1b2;--line:#34474b;--paper:#101b20;--lime:#adc987;--red:#e2a293;background:var(--paper);color:var(--ink)}
[data-theme="dark"] header,[data-theme="dark"] aside,[data-theme="dark"] .flashcard,[data-theme="dark"] .panel,[data-theme="dark"] .stat,[data-theme="dark"] .chip,[data-theme="dark"] .secondary,[data-theme="dark"] .icon-button,[data-theme="dark"] .answer,[data-theme="dark"] select,[data-theme="dark"] dialog,[data-theme="dark"] .theme-toggle{background:#19292e;color:var(--ink)}
[data-theme="dark"] .logo{background:#2b4242;color:var(--lime)}[data-theme="dark"] .brand-dot{color:var(--lime)}
[data-theme="dark"] .nav.active,[data-theme="dark"] .chip.active{background:#304746;color:#e1e9dc;border-color:#52716b}
[data-theme="dark"] .details{background:#1c2e32}[data-theme="dark"] .details p{color:#b6c6c4}[data-theme="dark"] .example{border-color:var(--line)}[data-theme="dark"] .side-note>span{color:#52706c}
[data-theme="dark"] .primary{background:#abc5b8;color:#122321}[data-theme="dark"] .primary.lime{background:var(--lime);color:#192716}
[data-theme="dark"] .quiz-banner,[data-theme="dark"] .quiz-stage .flashcard{background:#20373a;color:#dce6e2}[data-theme="dark"] .quiz-banner p{color:#b2c6c5}
[data-theme="dark"] .known,[data-theme="dark"] .score,[data-theme="dark"] .chapter.selected{background:#2c4034;border-color:#587655;color:#dae7cf}
[data-theme="dark"] .bar{background:#2d4246}[data-theme="dark"] .bar>span{background:#93b978}
[data-theme="dark"] .answer.correct{background:#304633;border-color:#7a9e66;color:#e1edd9}[data-theme="dark"] .answer.wrong{background:#49332f;border-color:#b77a6a;color:#f0d5cd}
[data-theme="dark"] .warning{background:#45392a;color:#e5c59b}[data-theme="dark"] #toast{background:#344b4c;color:#edf2ed}[data-theme="dark"] dialog::backdrop{background:#020a10b3}
[data-theme="dark"] button:focus-visible,[data-theme="dark"] a:focus-visible,[data-theme="dark"] select:focus-visible{outline-color:#9bbfaf}
@media(max-width:640px){.header-controls{gap:8px}.header-controls .local-badge{display:none}}
.study-card{touch-action:pan-y pinch-zoom}