:root{--bg:#f6f3ee;--surface:#fff;--surface-2:#efeae2;--ink:#1e1b18;--muted:#655e56;--line:#e2dbd0;--accent:#a2382a;--accent-ink:#fff;--accent-soft:#f5e4df;--good:#2c6a4c;--good-soft:#e2f0e8;--warn:#8a5a00;--warn-soft:#f7ecd2;--bad:brown;--bad-soft:#f8e1df;--info:#2b5c8a;--info-soft:#e1ecf6;--radius:16px;--shadow:0 1px 2px #1e1b180f, 0 6px 20px #1e1b180d;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--hz:"PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", "Heiti SC", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#141312;--surface:#1f1d1b;--surface-2:#2a2724;--ink:#f1ece4;--muted:#a79f94;--line:#36322d;--accent:#e58a76;--accent-ink:#1a0f0c;--accent-soft:#3a231e;--good:#7cc29c;--good-soft:#1d3026;--warn:#e2b866;--warn-soft:#352b15;--bad:#ee8f88;--bad-soft:#3a1f1d;--info:#8dbbe6;--info-soft:#1b2a38;--shadow:0 1px 2px #0006}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}html,body{background:var(--bg);height:100%;color:var(--ink);overscroll-behavior-y:none;margin:0}body{font:17px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}#root{height:100%}button{font:inherit;color:inherit;touch-action:manipulation;cursor:pointer}h1,h2,h3,p{margin:0}h1{letter-spacing:-.01em;font-size:26px;line-height:1.2}h2{font-size:20px;line-height:1.25}h3{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:13px;font-weight:600}.muted{color:var(--muted)}.small{font-size:14px}.center{text-align:center}.app{height:100vh;flex-direction:column;max-width:560px;height:100dvh;margin:0 auto;display:flex}.screen{-webkit-overflow-scrolling:touch;padding:calc(var(--sat) + 16px) calc(var(--sar) + 18px) 24px calc(var(--sal) + 18px);flex-direction:column;flex:1;gap:16px;display:flex;overflow-y:auto}.screen.focus{padding-top:12px}.stack{flex-direction:column;gap:12px;display:flex}.row{align-items:center;gap:12px;display:flex}.row.wrap{flex-wrap:wrap}.spread{justify-content:space-between}.grow{flex:1;min-width:0}.spacer{flex:1}.tabbar{border-top:1px solid var(--line);background:var(--surface);padding:6px calc(var(--sar) + 6px) calc(var(--sab) + 6px) calc(var(--sal) + 6px);display:flex}.tab{min-height:50px;color:var(--muted);background:0 0;border:0;border-radius:12px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:11px;display:flex;position:relative}.tab[aria-current=page]{color:var(--accent);font-weight:600}.tab svg{width:24px;height:24px}.badge{background:var(--accent);min-width:18px;height:18px;color:var(--accent-ink);text-align:center;border-radius:9px;padding:0 5px;font-size:11px;font-weight:700;line-height:18px;position:absolute;top:2px;left:calc(50% + 6px)}.topbar{padding:calc(var(--sat) + 8px) calc(var(--sar) + 12px) 8px calc(var(--sal) + 12px);align-items:center;gap:12px;display:flex}.iconbtn{background:var(--surface-2);border:0;border-radius:22px;flex:none;justify-content:center;align-items:center;width:44px;height:44px;display:inline-flex}.iconbtn svg{width:20px;height:20px}.progressbar{background:var(--surface-2);border-radius:4px;flex:1;height:8px;overflow:hidden}.progressbar>i{background:var(--accent);border-radius:4px;height:100%;transition:width .25s;display:block}.phase{color:var(--muted);text-align:right;min-width:64px;font-size:13px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.card.flat{box-shadow:none}.card.tint{background:var(--accent-soft);border-color:#0000}.card.center{flex-direction:column;align-items:center;gap:10px;display:flex}.notice{background:var(--warn-soft);color:var(--ink);border:1px solid #0000;border-radius:12px;padding:12px 14px;font-size:15px}.notice.bad{background:var(--bad-soft)}.notice.info{background:var(--info-soft)}.notice.good{background:var(--good-soft)}.btn{border:1px solid var(--line);background:var(--surface);text-align:center;border-radius:14px;justify-content:center;align-items:center;gap:8px;min-height:52px;padding:12px 18px;font-size:17px;font-weight:600;display:inline-flex}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:#0000}.btn.block{width:100%}.btn.quiet{color:var(--accent);background:0 0;border-color:#0000}.btn.small{min-height:44px;padding:8px 14px;font-size:15px}.btn:disabled{opacity:.45}.btn:active:not(:disabled),.tile:active,.iconbtn:active,.rate:active,.chip:active{transform:scale(.98)}:focus-visible{outline:3px solid var(--info);outline-offset:2px}.tiles{grid-template-columns:1fr 1fr;gap:12px;display:grid}.tile{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);flex-direction:column;justify-content:space-between;gap:6px;min-height:92px;padding:14px;display:flex}.tile b{font-size:16px}.tile .num{letter-spacing:-.02em;font-size:26px;font-weight:700}.stats{grid-template-columns:1fr 1fr;gap:12px;display:grid}.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}.stat .num{font-size:24px;font-weight:700}.stat .lbl{color:var(--muted);font-size:13px}.hz{font-family:var(--hz);font-weight:500;line-height:1.25}.hz.xl{font-size:72px}.hz.lg{font-size:44px}.hz.md{font-size:30px}.hz.sm{font-size:22px}.py{color:var(--accent);letter-spacing:.01em;font-size:20px}.py.sm{font-size:16px}.py-hide{border:1px dashed var(--line);min-height:44px;color:var(--muted);background:0 0;border-radius:10px;padding:6px 14px;font-size:15px}.en{font-size:19px}.en.lg{font-size:24px;font-weight:600;line-height:1.25}.tag{background:var(--surface-2);color:var(--muted);border-radius:8px;padding:2px 8px;font-size:12px;display:inline-block}.note{color:var(--muted);font-size:15px}.speak{align-items:center;gap:8px;display:inline-flex}.btn-audio{background:var(--accent);width:56px;height:56px;color:var(--accent-ink);border:0;border-radius:28px;flex:none;justify-content:center;align-items:center;display:inline-flex}.btn-audio svg{width:26px;height:26px}.btn-audio.sm{width:46px;height:46px}.btn-audio.sm svg{width:22px;height:22px}.btn-slow{border:1.5px solid var(--accent);min-width:64px;min-height:46px;color:var(--accent);background:0 0;border-radius:23px;padding:0 14px;font-size:15px;font-weight:600}.btn-audio.on,.btn-slow.on{box-shadow:0 0 0 4px var(--accent-soft), 0 0 0 6px var(--accent)}.recall{flex-direction:column;flex:1;gap:14px;display:flex}.recall .face{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;min-height:260px;display:flex}.answer{border-top:1px solid var(--line);flex-direction:column;align-items:center;gap:10px;width:100%;padding-top:14px;display:flex}.rates{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.rate{background:var(--surface);border:1.5px solid;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;min-height:64px;padding:6px 2px;font-size:15px;font-weight:700;display:flex}.rate small{opacity:.85;font-size:12px;font-weight:500}.rate.g1{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}.rate.g2{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}.rate.g3{border-color:var(--good);color:var(--good);background:var(--good-soft)}.rate.g4{border-color:var(--info);color:var(--info);background:var(--info-soft)}.footer{padding:10px calc(var(--sar) + 18px) calc(var(--sab) + 14px) calc(var(--sal) + 18px);flex-direction:column;gap:8px;display:flex}.chips{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.chip{border:1.5px solid var(--line);background:var(--surface);min-width:52px;min-height:52px;font-family:var(--hz);border-radius:12px;padding:6px 14px;font-size:24px}.chip.placed{background:var(--accent-soft);border-color:var(--accent)}.chip:disabled{opacity:.25}.slot{border:1.5px dashed var(--line);border-radius:14px;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-height:68px;padding:8px;display:flex}.opts{gap:8px;display:grid}.opt{border:1.5px solid var(--line);background:var(--surface);text-align:left;border-radius:12px;min-height:50px;padding:8px 14px;font-size:16px}.opt.right{border-color:var(--good);background:var(--good-soft)}.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}.list{flex-direction:column;display:flex}.item{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:12px 0;display:flex}.item:last-child{border-bottom:0}.lesson-row{text-align:left;border:0;border-bottom:1px solid var(--line);background:0 0;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 0;display:flex}.lesson-row:disabled{opacity:.5}.daynum{background:var(--surface-2);border-radius:18px;flex:none;justify-content:center;align-items:center;width:36px;height:36px;font-size:14px;font-weight:700;display:flex}.daynum.done{background:var(--good-soft);color:var(--good)}.daynum.now{background:var(--accent);color:var(--accent-ink)}.bars{align-items:flex-end;gap:6px;height:90px;display:flex}.bars>div{height:100%;color:var(--muted);flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:4px;font-size:11px;display:flex}.bars i{background:var(--accent);border-radius:4px 4px 0 0;width:100%;min-height:2px;display:block}.field{flex-direction:column;gap:6px;display:flex}.field label,.field .lbl{font-size:14px;font-weight:600}select,input[type=range],textarea{font:inherit;color:inherit}select{border:1px solid var(--line);background:var(--surface);border-radius:12px;width:100%;min-height:48px;padding:0 12px}textarea{border:1px solid var(--line);background:var(--surface);border-radius:12px;width:100%;min-height:180px;padding:12px;font:13px/1.4 ui-monospace,Menlo,monospace}input[type=range]{width:100%;height:44px;accent-color:var(--accent)}.seg{background:var(--surface-2);border-radius:12px;padding:3px;display:flex}.seg button{background:0 0;border:0;border-radius:10px;flex:1;min-height:44px;font-size:15px}.seg button[aria-pressed=true]{background:var(--surface);box-shadow:var(--shadow);font-weight:700}.banner{z-index:20;padding:calc(var(--sat) + 8px) 12px 0;pointer-events:none;position:fixed;top:0;left:0;right:0}.banner>div{pointer-events:auto;background:var(--ink);max-width:536px;color:var(--bg);border-radius:14px;flex-direction:column;gap:8px;margin:0 auto;padding:12px 14px;font-size:15px;display:flex;box-shadow:0 8px 30px #00000040}.banner .row button{min-height:40px;color:inherit;background:0 0;border:1px solid;border-radius:10px;padding:0 12px;font-size:14px;font-weight:600}.tones svg{width:100%;height:auto;display:block}.tones text{fill:var(--muted);font-size:11px}.tones path{stroke:var(--accent);fill:none;stroke-width:3px;stroke-linecap:round}.tones line{stroke:var(--line)}ol.steps,ul.plain{flex-direction:column;gap:6px;margin:0;padding-left:20px;display:flex}@media (prefers-reduced-motion:reduce){*{transition:none!important}}@media (max-width:350px){.hz.xl{font-size:60px}.tiles,.stats{gap:8px}}