:root{--bg:#f6f1e8;--bg-grad:radial-gradient(1200px 600px at 85% -10%,#f3e4d3 0%,transparent 60%),radial-gradient(900px 500px at -10% 110%,#ece4f0 0%,transparent 55%);--surface:#fdfbf7;--surface-2:#f4eee3;--surface-3:#ece4d4;--ink:#241f1c;--ink-2:#4c443e;--muted:#877c72;--line:#e2d8c8;--line-2:#d1c4ae;--brand:#b4322a;--brand-rgb:180,50,42;--brand-deep:#8e241e;--brand-soft:#f7e3de;--brand-ink:#fff6f0;--gold:#b07d2b;--gold-soft:#f5e8cd;--jade:#2f8f5b;--jade-soft:#ddefe2;--blue:#3a6fc4;--blue-soft:#dfe8f7;--violet:#7a5bb5;--violet-soft:#e9e2f5;--teal:#177e89;--teal-soft:#dceff0;--warn:#b8860b;--danger:#c03530;--t1:#d5443c;--t2:#bd8a12;--t3:#2f8f5b;--t4:#3a6fc4;--t0:#7a7f88;--chart:#b4322a;--shadow-s:0 1px 2px rgba(60,40,20,0.06),0 2px 8px rgba(60,40,20,0.05);--shadow-m:0 2px 6px rgba(60,40,20,0.07),0 10px 28px rgba(60,40,20,0.09);--shadow-l:0 6px 16px rgba(50,30,15,0.1),0 24px 60px rgba(50,30,15,0.14);--r-s:8px;--r-m:14px;--r-l:22px;--f-ui:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--f-mono:"Cascadia Mono","SFMono-Regular",Consolas,monospace;--f-serif:"Palatino Linotype",Palatino,"Songti SC","SimSun",Georgia,serif;--f-hz:"Kaiti SC","STKaiti","KaiTi","BiauKai","DFKai-SB","Noto Serif CJK SC","Songti SC","SimSun","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",serif;--f-hz-ui:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;--nav-w:252px}[data-theme=dark]{--teal:#6fc6ce;--teal-soft:#1c363b;--bg:#141216;--bg-grad:radial-gradient(1100px 560px at 85% -10%,#221a20 0%,transparent 60%),radial-gradient(900px 500px at -10% 110%,#1a1c26 0%,transparent 55%);--surface:#1e1b20;--surface-2:#26222a;--surface-3:#2e2933;--ink:#f0e9df;--ink-2:#c9c0b4;--muted:#93897d;--line:#332e38;--line-2:#443d4a;--brand:#d84b40;--brand-rgb:216,75,64;--brand-deep:#b4322a;--brand-soft:#3a2422;--brand-ink:#fff6f0;--gold:#d3a145;--gold-soft:#352b18;--jade:#3fae74;--jade-soft:#1d3226;--blue:#5e93de;--blue-soft:#1f2a3d;--violet:#9d7fd4;--violet-soft:#2c2438;--warn:#d3a145;--danger:#e05348;--t1:#e05348;--t2:#b98a1e;--t3:#35a06a;--t4:#5e93de;--t0:#9aa0a8;--chart:#d84b40;--shadow-s:0 1px 2px rgba(0,0,0,0.3),0 2px 8px rgba(0,0,0,0.25);--shadow-m:0 2px 6px rgba(0,0,0,0.35),0 10px 28px rgba(0,0,0,0.35);--shadow-l:0 6px 16px rgba(0,0,0,0.4),0 24px 60px rgba(0,0,0,0.5)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{font-family:var(--f-ui);background:var(--bg);background-image:var(--bg-grad);background-attachment:fixed;color:var(--ink);line-height:1.55;font-size:calc(15px * var(--fs, 1));min-height:100vh;overflow-x:hidden}.hz,:lang(zh){font-family:var(--f-hz-ui)}.hz-cal{font-family:var(--f-hz)}::selection{background:var(--brand);color:#fff}button{color:inherit;background:none;border:none;cursor:pointer}button,input,select,textarea{font-family:inherit;font-size:inherit}input,select,textarea{color:var(--ink)}img,svg{display:block;max-width:100%}a{color:var(--brand)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:2px solid var(--bg)}::-webkit-scrollbar-track{background:transparent}:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.skip-link{position:fixed;top:-100px;left:16px;z-index:130;padding:10px 14px;border-radius:var(--r-s);background:var(--brand);color:var(--brand-ink);font-weight:700}.skip-link:focus-visible{top:12px}.app{min-height:100vh}.app,.main{display:flex}.main{flex:1 1;min-width:0;flex-direction:column}.content{flex:1 1;padding:26px clamp(16px,3.5vw,42px) 90px;max-width:1120px;width:100%;margin:0 auto}.sidebar>nav{display:contents}.sidebar{width:var(--nav-w);flex:0 0 var(--nav-w);background:linear-gradient(180deg,var(--surface) 0,var(--surface-2) 100%);border-right:1px solid var(--line);position:-webkit-sticky;position:sticky;top:0;height:100vh;overflow-y:auto;padding:20px 14px 16px;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin;z-index:30}.brand{gap:12px;padding:4px 8px 16px}.brand,.brand .seal{display:flex;align-items:center}.brand .seal{width:46px;height:46px;border-radius:11px;flex:0 0 46px;background:linear-gradient(145deg,var(--brand) 0,var(--brand-deep) 100%);color:#fff7ee;justify-content:center;font-family:var(--f-hz);font-size:29px;font-weight:700;box-shadow:inset 0 0 0 2px rgba(255,245,230,.28),var(--shadow-s)}.brand h1{font-family:var(--f-serif);font-size:20px;letter-spacing:.3px;line-height:1.15}.brand small{display:block;font-family:var(--f-ui);font-size:11px;color:var(--muted);font-weight:400;letter-spacing:.6px}.nav-group{margin-top:10px}.nav-group>span{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.4px;color:var(--muted);text-transform:uppercase;padding:4px 12px 6px}.nav-item{line-height:normal;display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:10px;color:var(--ink-2);font-size:14px;font-weight:500;text-align:left;text-decoration:none;transition:background .15s,color .15s,transform .1s;position:relative}.nav-item svg{width:19px;height:19px;flex:0 0 19px;opacity:.85}.nav-item:hover{background:var(--surface-3);color:var(--ink)}.nav-item.active{background:var(--brand);color:var(--brand-ink);box-shadow:var(--shadow-s)}.nav-item.active svg{opacity:1}.nav-item .count{margin-left:auto;background:var(--brand);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:flex;align-items:center;justify-content:center}.nav-item.active .count{background:rgba(255,255,255,.25)}.navigation-pending{position:absolute;inset:auto 4px 0;border-bottom:3px solid var(--brand);overflow:hidden;font-size:0;pointer-events:none}.side-profile{margin-top:auto;padding:12px;border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line)}.side-profile .lvl-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:6px}.side-profile .lvl-row b{font-size:13px}.xp-bar{height:7px;background:var(--surface-3);border-radius:4px;overflow:hidden}.xp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--brand));border-radius:4px;transition:width .5s cubic-bezier(.22,1,.36,1)}.side-profile .streak-row{display:flex;gap:10px;margin-top:9px;font-size:12px;color:var(--ink-2)}.side-profile .streak-row b{color:var(--ink)}.topbar{display:none;position:-webkit-sticky;position:sticky;top:0;z-index:25;align-items:center;gap:10px;padding:10px 14px;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.topbar .seal{width:34px;height:34px;border-radius:9px;font-size:21px;flex:0 0 34px;background:linear-gradient(145deg,var(--brand),var(--brand-deep));color:#fff7ee;display:flex;align-items:center;justify-content:center;font-family:var(--f-hz)}.topbar h1{font-family:var(--f-serif);font-size:17px}.topbar .top-stats{margin-left:auto;display:flex;gap:8px;align-items:center;font-size:12.5px;font-weight:600;color:var(--ink-2)}.topbar .top-stats .pill{padding:3px 10px;display:flex;gap:5px;align-items:center}.audio-pill,.topbar .top-stats .pill{background:var(--surface-2);border:1px solid var(--line);border-radius:20px}.audio-pill{cursor:pointer;font-size:15px;line-height:1;padding:4px 9px;transition:transform .12s}.audio-pill:hover{transform:scale(1.1)}.audio-pill svg{display:inline-block;vertical-align:-3px}.view{animation:viewIn .3s ease}@keyframes viewIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.view-head{margin-bottom:20px}.view-head h2{font-family:var(--f-serif);font-size:clamp(22px,3vw,28px);letter-spacing:.2px;display:flex;align-items:center;gap:10px}.view-head h2 .zh{font-family:var(--f-hz);color:var(--brand);font-size:.85em}.view-head p{color:var(--muted);font-size:14px;margin-top:3px;max-width:640px}.bottombar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:40;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom));grid-template-columns:repeat(5,1fr);gap:2px}.bb-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:10px;color:var(--muted);font-size:10.5px;font-weight:600;position:relative;text-decoration:none}.bb-item svg{width:21px;height:21px}.bb-item.active{color:var(--brand)}.bb-item .count{position:absolute;top:0;right:calc(50% - 22px);background:var(--brand);color:#fff;font-size:9.5px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}.sheet-veil{position:fixed;inset:0;background:rgba(20,12,8,.45);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}.sheet-veil.open{opacity:1;pointer-events:auto}.sheet{position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--surface);border-radius:20px 20px 0 0;padding:14px 16px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .28s cubic-bezier(.22,1,.36,1);max-height:78vh;overflow-y:auto;box-shadow:var(--shadow-l)}.sheet.open{transform:none}.sheet .grab{width:40px;height:4px;border-radius:3px;background:var(--line-2);margin:0 auto 14px}.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;gap:10px}.sheet-item{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-2);text-decoration:none}.sheet-item svg{width:22px;height:22px}.sheet-item.active{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}@media (max-width:900px){.sidebar{display:none}.topbar{display:flex}.bottombar{display:grid}.content{padding-top:18px}}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:18px;box-shadow:var(--shadow-s)}.card.pad-l{padding:24px}.card-title{font-size:13px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px}.card-title svg{flex:0 0 auto}.grid{display:grid;grid-gap:14px;gap:14px}.grid.c2{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}@media (max-width:980px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}.row,.spread{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}.muted{color:var(--muted)}.small{font-size:12.5px}.mt8{margin-top:8px}.mt14{margin-top:14px}.mt20{margin-top:20px}.mt28{margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:11px;font-weight:600;font-size:14px;border:1px solid transparent;text-decoration:none;line-height:normal;transition:transform .12s,box-shadow .15s,background .15s,border-color .15s;-moz-user-select:none;user-select:none;-webkit-user-select:none}.btn:active{transform:scale(.97)}.btn.primary{background:linear-gradient(160deg,var(--brand) 0,var(--brand-deep) 100%);color:var(--brand-ink);box-shadow:var(--shadow-s)}.btn.primary:hover{box-shadow:var(--shadow-m)}.btn.soft{background:var(--brand-soft);color:var(--brand)}.btn.ghost{border-color:var(--line-2);color:var(--ink-2);background:var(--surface)}.btn.ghost:hover{border-color:var(--brand);color:var(--brand)}.btn.gold{background:linear-gradient(160deg,#c8963a,var(--gold));color:#fff;box-shadow:var(--shadow-s)}.btn.jade{background:var(--jade);color:#fff}.btn.big{padding:13px 26px;font-size:15.5px;border-radius:13px}.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:9px}.btn.block{width:100%}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-icon{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);transition:all .15s;flex:0 0 38px}.btn-icon:hover{color:var(--brand);border-color:var(--brand)}.btn-icon svg{width:18px;height:18px}.btn-icon.playing{color:var(--brand);border-color:var(--brand);background:var(--brand-soft);animation:pulse 1s infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 0 rgba(180,50,42,.35)}50%{box-shadow:0 0 0 6px rgba(180,50,42,0)}}.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:12.5px;font-weight:600;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);transition:all .15s}.chip.on,.chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}.chip.static:hover{border-color:var(--line);color:var(--ink-2);background:var(--surface-2)}.tag{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.4px}.tag.lv1{background:var(--jade-soft);color:var(--jade)}.tag.lv2{background:var(--blue-soft);color:var(--blue)}.tag.lv3{background:var(--violet-soft);color:var(--violet)}.tag.lv4{background:var(--gold-soft);color:var(--gold)}.tag.lv5{background:var(--brand-soft);color:var(--brand)}.tag.lv6{background:var(--teal-soft);color:var(--teal)}.tag.gold{background:var(--gold-soft);color:var(--gold)}.tag.red{background:var(--brand-soft);color:var(--brand)}.tn1{color:var(--t1)}.tn2{color:var(--t2)}.tn3{color:var(--t3)}.tn4{color:var(--t4)}.tn0{color:var(--t0)}[data-tones=off] .tn0,[data-tones=off] .tn1,[data-tones=off] .tn2,[data-tones=off] .tn3,[data-tones=off] .tn4{color:inherit}.notice{padding:12px 16px;border-radius:12px;background:var(--gold-soft);color:var(--gold);font-size:13.5px;font-weight:500;display:flex;gap:9px;align-items:flex-start}.notice.blue{background:var(--blue-soft);color:var(--blue)}.notice svg{width:17px;height:17px;flex:0 0 17px;margin-top:1px}kbd{background:var(--surface-2);border:solid var(--line-2);border-width:1px 1px 2px;border-radius:6px;padding:1px 7px;font-family:inherit;font-size:11px;font-weight:700}.kbd-hints{display:flex;gap:14px;justify-content:center;margin-top:16px;font-size:12px;color:var(--muted);flex-wrap:wrap}.select,input.num-input{padding:8px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);font-size:13.5px;outline:none;max-width:210px}input[type=range]{accent-color:var(--brand);width:150px}.switch{position:relative;width:46px;height:26px;flex:0 0 46px}.switch input{opacity:0;width:100%;height:100%;position:absolute;cursor:pointer;z-index:2;margin:0}.switch i{position:absolute;inset:0;background:var(--surface-3);border-radius:14px;transition:background .2s;border:1px solid var(--line-2)}.switch i:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--shadow-s);transition:transform .2s}.switch input:checked+i{background:var(--brand);border-color:var(--brand)}.switch input:checked+i:after{transform:translateX(20px)}.ic-chip{width:46px;height:46px;border-radius:14px;flex:0 0 46px;display:inline-flex;align-items:center;justify-content:center;color:var(--icc,var(--brand));background:color-mix(in srgb,var(--icc,var(--brand)) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--icc,var(--brand)) 28%,transparent);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s}.card:hover>.ic-chip,.course-card:hover .ic-chip,.dlg-list-card:hover .ic-chip,.game-card:hover .ic-chip{transform:scale(1.08) rotate(-4deg);box-shadow:0 4px 12px color-mix(in srgb,var(--icc,var(--brand)) 25%,transparent)}.done-ico{width:74px;height:74px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:var(--icc,var(--brand));background:color-mix(in srgb,var(--icc,var(--brand)) 12%,var(--surface));border:1.5px solid color-mix(in srgb,var(--icc,var(--brand)) 30%,transparent);animation:popIn .45s cubic-bezier(.34,1.56,.64,1)}@keyframes popIn{0%{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}.done-screen{text-align:center;padding:46px 20px}.done-screen .big-ic{font-size:64px;margin-bottom:12px;line-height:1}.done-screen h3{font-family:var(--f-serif);font-size:24px;margin-bottom:8px}.done-screen p{color:var(--muted);max-width:400px;margin:0 auto 20px}.star-btn{position:absolute;top:14px;left:14px;z-index:2;color:var(--muted)}.star-btn.on{color:var(--gold);border-color:var(--gold);background:var(--gold-soft)}.star-btn.on svg{fill:var(--gold)}.modal-veil{position:fixed;inset:0;background:rgba(20,12,8,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:80;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;pointer-events:none;transition:opacity .2s}.modal-veil.open{opacity:1;pointer-events:auto}.modal{background:var(--surface);border-radius:var(--r-l);max-width:520px;width:100%;max-height:min(86vh,720px);overflow-y:auto;padding:26px;position:relative;box-shadow:var(--shadow-l);transform:translateY(14px) scale(.98);transition:transform .22s cubic-bezier(.22,1,.36,1);border:1px solid var(--line)}.modal-veil.open .modal{transform:none}.modal .close-x{position:absolute;top:14px;right:14px;z-index:2}.toasts{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:92vw}@media (min-width:901px){.toasts{bottom:26px}}.toast{background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:24px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-m);display:flex;gap:8px;align-items:center;animation:toastIn .3s cubic-bezier(.22,1,.36,1);max-width:92vw}.toast.xp{background:linear-gradient(140deg,var(--gold),#8f6520);color:#fff}.toast.badge{background:linear-gradient(140deg,var(--brand),var(--brand-deep));color:#fff}.toast.out{animation:toastOut .3s forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.94)}}.confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:140}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes sheen{0%,55%{background-position:130% 0}85%,to{background-position:-40% 0}}@keyframes shake{0%,to{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.course-path>.course-card:nth-child(-n+6),.dlg-list-card:nth-child(-n+6),.grid>.card,.stat-tiles .stat-tile,.word-grid>.word-card:nth-child(-n+6){animation:fadeUp .4s cubic-bezier(.22,1,.36,1) both}.course-path>:first-child,.grid>:first-child,.stat-tiles>:first-child,.word-grid>:first-child{animation-delay:.02s}.course-path>:nth-child(2),.grid>:nth-child(2),.stat-tiles>:nth-child(2),.word-grid>:nth-child(2){animation-delay:.06s}.course-path>:nth-child(3),.grid>:nth-child(3),.stat-tiles>:nth-child(3),.word-grid>:nth-child(3){animation-delay:.1s}.course-path>:nth-child(4),.grid>:nth-child(4),.stat-tiles>:nth-child(4),.word-grid>:nth-child(4){animation-delay:.14s}.course-path>:nth-child(5),.grid>:nth-child(5),.word-grid>:nth-child(5){animation-delay:.18s}.course-path>:nth-child(6),.grid>:nth-child(6),.word-grid>:nth-child(6){animation-delay:.22s}.xp-bar i{position:relative;overflow:hidden}.xp-bar i:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:220% 100%;animation:sheen 3.2s ease-in-out infinite}.btn.gold,.btn.primary{position:relative;overflow:hidden}.btn.gold:after,.btn.primary:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);background-size:250% 100%;background-position:130% 0;transition:background-position .6s}.btn.gold:hover:after,.btn.primary:hover:after{background-position:-40% 0}.bb-item svg,.nav-item svg{transition:transform .18s}.nav-item:hover svg{transform:scale(1.12)}.bb-item.active svg{transform:translateY(-2px) scale(1.12)}@media (prefers-reduced-motion:reduce){.hero:before,.xp-bar i:after{animation:none}}.hero{border-radius:var(--r-l);padding:26px 28px;position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,var(--brand-deep) 0,var(--brand) 55%,#c9503f 100%);color:#fff7f0;box-shadow:var(--shadow-m);display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}.hero:after{content:"汉語";right:-14px;bottom:-38px;font-family:var(--f-hz);font-size:150px;opacity:.12;line-height:1;letter-spacing:-8px}.hero:after,.hero:before{position:absolute;pointer-events:none}.hero:before{content:"";inset:0;z-index:0;background:linear-gradient(115deg,transparent 42%,rgba(255,247,238,.14) 50%,transparent 58%);background-size:260% 100%;background-position:120% 0;animation:sheen 5.5s ease-in-out infinite}.hero>*{position:relative;z-index:1}.hero h3{font-family:var(--f-serif);font-size:clamp(20px,2.6vw,26px);margin-bottom:6px}.hero p{opacity:.85;font-size:14px;max-width:430px}.hero .hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.hero .btn.light{background:#fff7ee;color:var(--brand-deep)}.hero .btn.outline{border:1.5px solid rgba(255,247,238,.55);color:#fff7ee}.hero-ring{position:relative;z-index:1}.stat-tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:14px;gap:14px;margin-top:16px}@media (max-width:860px){.stat-tiles{grid-template-columns:repeat(2,1fr)}}.stat-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:15px 16px;box-shadow:var(--shadow-s)}.stat-tile .ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:9px}.stat-tile .ic svg{width:18px;height:18px}.stat-tile b{font-size:22px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;display:block;line-height:1.1}.stat-tile span{font-size:12px;color:var(--muted);font-weight:600}.ring-wrap{width:132px;height:132px;position:relative}.ring-wrap svg{transform:rotate(-90deg)}.ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff7ee}.ring-txt b{font-size:26px;line-height:1}.ring-txt span{font-size:11px;opacity:.8;margin-top:3px}.chart-box{height:190px;position:relative}.chart-tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;white-space:nowrap;transform:translate(-50%,-120%);opacity:0;transition:opacity .12s;z-index:5}.badge-strip{display:flex;gap:10px;flex-wrap:wrap}.badge-medal{padding:0;cursor:pointer;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--surface-2);border:1.5px dashed var(--line-2);filter:grayscale(1);opacity:.45;transition:all .2s;position:relative;color:var(--muted)}.badge-medal svg{width:22px;height:22px}.badge-medal.won{filter:none;opacity:1;border:1.5px solid var(--gold);background:var(--gold-soft);box-shadow:var(--shadow-s);color:var(--gold)}.tip-day{border-left:3px solid var(--gold);padding:2px 0 2px 14px}.tip-day .zh{font-family:var(--f-hz);font-size:22px}.hm-wrap{overflow-x:auto;padding-bottom:4px}.hm-col,.hm-wrap{display:flex;gap:3px}.hm-col{flex-direction:column}.hm-cell{width:12px;height:12px;border-radius:3px;display:inline-block}.hm-cell,.hm0{background:var(--surface-3)}.hm1{background:color-mix(in srgb,var(--chart) 25%,var(--surface-2))}.hm2{background:color-mix(in srgb,var(--chart) 50%,var(--surface-2))}.hm3{background:color-mix(in srgb,var(--chart) 75%,var(--surface-2))}.hm4{background:var(--chart)}.hm-legend{display:flex;align-items:center;gap:4px;margin-top:8px}@media (max-width:900px){.hero{padding:22px 20px}.hero:after{font-size:100px}}.filter-bar{gap:10px;flex-wrap:wrap;margin-bottom:16px}.filter-bar,.search-box{display:flex;align-items:center}.search-box{flex:1 1;min-width:200px;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 14px}.search-box svg{width:17px;height:17px;color:var(--muted);flex:0 0 17px}.search-box input{flex:1 1;border:none;outline:none;background:transparent;font-size:14px;min-width:0}.word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:12px;gap:12px}.word-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;cursor:pointer;transition:all .16s;position:relative;box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:2px;text-align:left}.word-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--line-2)}.word-card .top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.word-card .hanzi{font-family:var(--f-hz);font-size:27px;line-height:1.25}.word-card .py{font-size:13.5px;font-weight:600}.word-card .mean{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.word-card .st{position:absolute;top:10px;right:12px;width:8px;height:8px;border-radius:50%}.word-card .st.new{background:var(--line-2)}.word-card .st.learning{background:var(--gold)}.word-card .st.known{background:var(--jade)}.legend-dots{display:flex;gap:14px;font-size:12px;color:var(--muted);margin:10px 2px}.legend-dots i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}.wd-hanzi{font-family:var(--f-hz);font-size:64px;line-height:1.15;margin:6px 0 2px}.wd-hanzi,.wd-py{text-align:center}.wd-py{font-size:20px;font-weight:600;margin-bottom:2px}.wd-hv{font-size:13px;color:var(--gold);font-weight:700;letter-spacing:1.5px;text-transform:uppercase}.wd-hv,.wd-mean{text-align:center}.wd-mean{font-size:16px;color:var(--ink-2);margin-top:10px}.wd-section{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line-2)}.wd-section h4{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:9px}.ex-line{display:flex;gap:10px;align-items:flex-start}.ex-line .txt{flex:1 1}.ex-line .zh{font-family:var(--f-hz-ui);font-size:17.5px}.ex-line .py,.ex-line .vi{font-size:13px;margin-top:1px}.ex-line .vi{color:var(--muted)}.char-break{display:flex;gap:10px;flex-wrap:wrap}.char-cell{border:1px solid var(--line);border-radius:10px;padding:8px 12px;text-align:center;min-width:64px;background:var(--surface-2)}.char-cell .c{font-family:var(--f-hz);font-size:26px}.char-cell .hv{font-size:10.5px;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.5px}.learn-stage{max-width:600px;margin:0 auto}.progress-line{height:8px;background:var(--surface-3);border-radius:5px;overflow:hidden;margin-bottom:22px}.progress-line i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--brand));transition:width .35s cubic-bezier(.22,1,.36,1);border-radius:5px}.teach-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:34px 28px;text-align:center;box-shadow:var(--shadow-m)}.teach-card .hanzi{font-family:var(--f-hz);font-size:76px;line-height:1.2}.teach-card .py{font-size:24px;font-weight:600;margin-top:2px}.teach-card .hv{font-size:12.5px;color:var(--gold);font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-top:4px}.teach-card .mean{font-size:18px;color:var(--ink-2);margin-top:12px}.teach-card .ex{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2);font-size:14px;color:var(--muted)}.teach-card .ex .zh{font-family:var(--f-hz-ui);font-size:16.5px;color:var(--ink)}.quiz-q{text-align:center;margin-bottom:20px}.quiz-q .prompt{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.5px;text-transform:uppercase}.quiz-q .big{font-family:var(--f-hz);font-size:56px;margin-top:8px;line-height:1.2}.quiz-q .big.latin{font-family:var(--f-ui);font-size:30px;font-weight:700}.quiz-opts{display:grid;grid-gap:10px;gap:10px}.quiz-opts.two{grid-template-columns:1fr 1fr}@media (max-width:520px){.quiz-opts.two{grid-template-columns:1fr}}.quiz-opt{padding:14px 18px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-size:15.5px;font-weight:500;text-align:center;transition:all .15s;position:relative}.quiz-opt .hz-opt{font-family:var(--f-hz-ui);font-size:22px}.quiz-opt:hover:not(:disabled){border-color:var(--brand);transform:translateY(-1px)}.quiz-opt.correct{border-color:var(--jade);background:var(--jade-soft);color:var(--jade);font-weight:700}.quiz-opt.wrong{border-color:var(--danger);background:var(--brand-soft);color:var(--danger);animation:shake .35s}.feedback-bar{margin-top:18px;padding:13px 16px;border-radius:12px;font-size:14px;display:none;align-items:center;gap:10px}.feedback-bar.ok{display:flex;background:var(--jade-soft);color:var(--jade);font-weight:600}.feedback-bar.bad{display:flex;background:var(--brand-soft);color:var(--danger);font-weight:600}