@import"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Noto+Serif+SC:wght@500;700&display=swap";:root{--paper: #f6f1e6;--surface: #fffcf5;--surface-2: #f0e9da;--line: #e3dbc8;--line-strong: #cfc4aa;--ink: #1d1b16;--ink-2: #4a463d;--muted: #857f72;--accent: #c7401d;--accent-ink: #fff7f2;--ok: #2f7a4f;--bad: #b3261e;--info: #2b5ea8;--gold: #b8860b;--serif: "Fraunces", "Noto Serif SC", "Songti SC", "Source Han Serif SC", Georgia, serif;--sans: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Noto Sans CJK SC", sans-serif;--r: 12px;--gap: 16px;color-scheme:light}@media(prefers-color-scheme:dark){:root{--paper: #151410;--surface: #1d1b16;--surface-2: #26231c;--line: #2f2b22;--line-strong: #46402f;--ink: #ece6d6;--ink-2: #c9c2b0;--muted: #8e877a;--accent: #ff7a50;--accent-ink: #1d1b16;--ok: #6fbf8a;--bad: #ff8a80;--info: #7fa6e0;--gold: #e0b34a;color-scheme:dark}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(1200px 600px at 10% -10%,rgba(199,64,29,.06),transparent 60%),radial-gradient(900px 500px at 110% 110%,rgba(43,94,168,.05),transparent 60%)}button{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:12px 16px;cursor:pointer;transition:transform .06s ease,background .15s,border-color .15s}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600;letter-spacing:.02em}button.accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}button.ghost{background:transparent;border-color:transparent;color:var(--ink-2);padding:8px 10px}button.ghost:hover{color:var(--ink)}input:not([type=checkbox]):not([type=range]){font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:12px 14px;width:100%}input:focus{outline:2px solid var(--accent);outline-offset:1px}input[type=range]{width:100%;accent-color:var(--accent)}input[type=checkbox]{accent-color:var(--accent)}a{color:var(--info)}.app{position:relative;max-width:560px;margin:0 auto;min-height:100%;padding:calc(14px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:var(--gap)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px}.topbar h1{font:600 20px/1.2 var(--serif);margin:0;letter-spacing:.01em}.brand{font:700 15px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}.brand:before{content:"◆ ";color:var(--accent);font-size:10px;vertical-align:2px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}.card.flat{background:transparent;border-style:dashed}.row{display:flex;gap:12px;align-items:center}.col{display:flex;flex-direction:column;gap:10px}.muted{color:var(--muted)}.small{font-size:13px}.serif{font-family:var(--serif)}.err{color:var(--bad)}.ok{color:var(--ok)}.hr{height:1px;background:var(--line)}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}.stat{padding:12px 14px;border-right:1px solid var(--line)}.stat:last-child{border-right:0}.stat b{display:block;font:600 26px/1.1 var(--serif);margin-top:2px}.stat b .muted{font:400 13px var(--sans)}.progress{height:3px;background:var(--line);border-radius:2px;overflow:hidden}.progress>i{display:block;height:100%;background:var(--ink);transition:width .25s ease}.timer{height:3px;background:var(--line);border-radius:2px;overflow:hidden}.timer>i{display:block;height:100%;background:var(--accent);transform-origin:left}.prompt{text-align:center;padding:34px 10px 26px;min-height:180px;display:flex;flex-direction:column;justify-content:center}.prompt .word{font:600 46px/1.1 var(--serif);letter-spacing:-.01em;font-variation-settings:"opsz" 144}.prompt .ipa{color:var(--muted);margin-top:8px;font-size:15px}.prompt .zh{font:700 36px/1.2 var(--serif)}.speaker{font-size:40px;line-height:1;background:transparent;border:0}.options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.options button{display:flex;align-items:center;gap:10px;text-align:left;min-height:64px;font-size:18px;line-height:1.3;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface)}.options button .key{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);display:inline-grid;place-items:center;font:600 11px var(--sans);color:var(--muted)}.options button:not(:disabled):hover{background:var(--surface-2)}.options button.correct{background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok)}.options button.correct .key{border-color:var(--ok);color:var(--ok)}.options button.wrong{background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad);text-decoration:line-through}.options button.wrong .key{border-color:var(--bad);color:var(--bad)}.reflex-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.reflex-actions button{min-height:84px;font-size:21px;border-radius:16px}.flash{text-align:center;font:600 30px/1.2 var(--serif);min-height:44px}.combo{color:var(--accent);font:600 14px var(--serif);letter-spacing:.04em}.chip{display:inline-block;align-self:flex-start;padding:3px 9px;border-radius:999px;border:1px solid var(--line-strong);font-size:12px;color:var(--ink-2);background:var(--surface)}.chip.accent{border-color:var(--accent);color:var(--accent)}.learn .word{font:600 38px/1.1 var(--serif)}.learn .full{font-size:18px}.learn .example{color:var(--ink-2);border-left:2px solid var(--accent);padding-left:12px;font-family:var(--serif);font-size:17px}.list{display:flex;flex-direction:column;gap:8px}.list .item{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}.heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(13px,1fr));gap:3px}.heat i{aspect-ratio:1;border-radius:2px;background:var(--line);display:block}.heat i.l1{background:#d9a08f}.heat i.l2{background:#a9c0d9}.heat i.l3{background:#8fbf9f}.heat i.l4{background:#e4b85a}.heat i.l5{background:var(--accent)}.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px;background:var(--line)}.feedback{text-align:center;font-size:18px;min-height:28px}.hero{padding:26px 0 6px}.hero h1{font:700 38px/1.1 var(--serif);margin:0 0 8px;letter-spacing:-.01em}.hero p{margin:0;color:var(--ink-2);font-size:15px}.fade{animation:fade .22s ease-out}@keyframes fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes shrink{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.big-num{font:600 54px/1 var(--serif)}.footer-note{color:var(--muted);font-size:12px;text-align:center}