:root{--f-ui:"PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;--f-se:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong","SimSun",serif;--sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px)}
html[data-theme=light]{--bg:#F1F3F7;--sf:#fff;--sf2:#F6F7FA;--ln:#E3E7EE;--tx:#131D35;--tx2:#566177;--tx3:#6F7A90;--pr:#25418A;--pb:#25418A;--prs:#E8EDFA;--hero:#1A2C5E;--ok:#177A5B;--oks:#E2F3EB;--ng:#B93A2F;--ngs:#FBE8E5;--gd:#9A6A16;--gds:#FAF0D9;--on:#fff;color-scheme:light}
html[data-theme=dark]{--bg:#0B1020;--sf:#131A2D;--sf2:#1A2238;--ln:#252F49;--tx:#E9EDF7;--tx2:#A3ADC4;--tx3:#8691AB;--pr:#9DB3F5;--pb:#4A66D6;--prs:#1C2848;--hero:#1D2E66;--ok:#4FCBA2;--oks:#0F2E27;--ng:#FF8F80;--ngs:#381B1B;--gd:#E3B65E;--gds:#2F260F;--on:#08120E;color-scheme:dark}
html[data-fs="0"]{--qs:16.5px;--os:15.5px}html[data-fs="1"]{--qs:18px;--os:16.5px}html[data-fs="2"]{--qs:20px;--os:18px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.6 var(--f-ui);-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
button:focus-visible,input:focus-visible{outline:2px solid var(--pr);outline-offset:2px}
h1,h2,h3,p{margin:0}
svg{display:block;flex:none}
[hidden]{display:none!important}
/* shell */
.page{max-width:640px;margin:0 auto;padding:calc(var(--st) + 18px) 16px calc(88px + var(--sb))}
.hd{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.hd h1{font:700 30px/1.2 var(--f-se);letter-spacing:.04em}
.brand{display:flex;align-items:center;gap:10px}
.seal{width:28px;height:28px;border-radius:7px;background:var(--pb);color:#fff;display:grid;place-items:center;font:700 16px var(--f-se);font-style:normal}
.sub{color:var(--tx2);margin:2px 0 16px}.sub b{color:var(--tx);font-variant-numeric:tabular-nums}
.gh{font-size:13px;font-weight:600;color:var(--tx2);margin:24px 4px 8px}
.mute{color:var(--tx2);font-size:14px}
.ib{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--tx);flex:none}
.ib:active{background:var(--sf2)}.ib.sm{width:40px;height:40px;color:var(--tx3)}
.btn{height:46px;border-radius:13px;padding:0 18px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center}
.btn.pri{background:var(--pb);color:#fff;flex:1}.btn.gh{border:1px solid var(--ln);background:var(--sf)}.btn.dg{background:var(--ng);color:var(--on)}
.btn.wide{width:100%;margin:12px 0}.btn[disabled]{opacity:.4;pointer-events:none}
/* tabs */
#tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--sf);border-top:1px solid var(--ln);padding-bottom:var(--sb)}
#tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;font-size:11.5px;color:var(--tx3);text-align:center;min-height:54px}
#tabs [aria-current=page]{color:var(--pr);font-weight:600}
/* home */
.resume{position:relative;overflow:hidden;display:block;width:100%;border-radius:20px;padding:18px 18px 20px;background:var(--hero);color:#fff;margin-bottom:12px}
.resume svg.deco{position:absolute;right:-46px;top:-46px;width:200px;height:200px;fill:none;stroke:#fff;opacity:.13}
.resume .rl{display:block;font-size:13px;opacity:.78}
.resume strong{display:block;font:700 22px/1.35 var(--f-se);margin:2px 0 2px;letter-spacing:.03em}
.resume .rp{display:block;font-size:13.5px;opacity:.9;font-variant-numeric:tabular-nums}
.resume .pg{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.25);margin-top:14px;width:calc(100% - 56px)}
.resume .pg i{display:block;height:100%;border-radius:2px;background:#fff}
.resume .go{position:absolute;right:16px;bottom:16px;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--hero);display:grid;place-items:center}
.qa2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qa{background:var(--sf);border-radius:16px;padding:14px;display:block;min-height:68px}
.qa b{display:block;font-size:15px}.qa small{color:var(--tx2);font-size:12.5px}.qa[disabled]{opacity:.55;pointer-events:none}
.grp{background:var(--sf);border-radius:16px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;min-height:66px;color:var(--tx)}
.row+.row,.grp>.qi+.qi{border-top:1px solid var(--ln)}.row:active{background:var(--sf2)}
.row>svg:last-child{color:var(--tx3)}
.rb{flex:1;min-width:0}.rn{display:block;font-size:16px;font-weight:600}.rs{display:block;font-size:12.5px;color:var(--tx2)}
.ra{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}.ra small{display:block;font-weight:400;font-size:11px;color:var(--tx3)}
.ring{width:42px;height:42px}.rt{fill:none;stroke:var(--ln);stroke-width:3.5}.rf{fill:none;stroke:var(--pr);stroke-width:3.5;stroke-linecap:round}
.ring text{font:600 10px var(--f-ui);fill:var(--tx2);font-variant-numeric:tabular-nums}
/* book / me */
.seg{display:flex;background:var(--sf2);border-radius:11px;padding:3px;gap:2px}
.grp .seg{background:var(--bg)}
.seg button{flex:1;padding:8px 12px;border-radius:9px;font-size:14px;color:var(--tx2);text-align:center;font-weight:600;white-space:nowrap}
.seg [aria-pressed=true]{background:var(--sf);color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.14)}
.seg.wide{margin:14px 0 4px;background:var(--sf)}.seg.wide [aria-pressed=true]{background:var(--prs);color:var(--pr);box-shadow:none}
.qi{display:flex;align-items:center}.qb{flex:1;min-width:0;padding:13px 4px 13px 14px}
.qm{display:block;font-size:12px;color:var(--tx3)}
.qt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:15.5px/1.6 var(--f-se)}
.empty{padding:56px 24px;text-align:center;color:var(--tx2)}.empty b{display:block;color:var(--tx);font-size:16px;margin-bottom:6px}
.kp{display:grid;grid-template-columns:repeat(3,1fr);background:var(--sf);border-radius:16px;padding:18px 0;margin-top:14px}
.kp div{text-align:center}.kp div+div{border-left:1px solid var(--ln)}
.kp b{display:block;font:700 26px/1.2 var(--f-se);font-variant-numeric:tabular-nums}.kp span{font-size:12px;color:var(--tx2)}
.wk{display:flex;gap:8px;height:128px;background:var(--sf);border-radius:16px;padding:14px 14px 10px}
.wk div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;font-size:11px;color:var(--tx3)}
.wk i{display:block;width:100%;max-width:26px;border-radius:6px;background:var(--pr);opacity:.85}.wk .t{color:var(--pr);font-weight:700}
.wk em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--tx2)}
.ac{display:flex;align-items:center;gap:12px;padding:11px 14px}.ac+.ac{border-top:1px solid var(--ln)}
.ac span{width:88px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac u{flex:1;height:6px;border-radius:3px;background:var(--ln);text-decoration:none;overflow:hidden}.ac u i{display:block;height:100%;background:var(--pr)}
.ac b{width:42px;text-align:right;font-size:14px;font-variant-numeric:tabular-nums}
.set{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;min-height:54px;width:100%}.set+.set{border-top:1px solid var(--ln)}
.set small{display:block;color:var(--tx2);font-size:12.5px}
.sw{width:46px;height:28px;border-radius:14px;background:var(--ln);position:relative;transition:background .2s;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sw[aria-checked=true]{background:var(--pb)}.sw[aria-checked=true]::after{transform:translateX(18px)}
.note{color:var(--tx3);font-size:12px;text-align:center;margin:26px 0 0}
/* quiz */
#quiz,#search{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column}
#search{z-index:45}
.qtop{display:flex;align-items:center;gap:2px;padding:calc(var(--st) + 4px) 6px 4px;background:var(--sf)}
.mid{flex:1;text-align:center;min-width:0}.mid b{font:600 16px var(--f-ui);font-variant-numeric:tabular-nums}
.mid span{display:block;font-size:11.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qbar{height:3px;background:var(--ln)}.qbar i{display:block;height:100%;background:var(--pr);transition:width .25s}
.qs{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.qc{max-width:680px;margin:0 auto;padding:16px 16px 32px}
.qf{background:var(--sf);border-top:1px solid var(--ln);padding:8px 12px calc(8px + var(--sb))}
.qf>div{max-width:680px;margin:0 auto;display:flex;gap:8px;align-items:center}
.qf .ib[aria-pressed=true]{color:var(--gd)}
.tags{display:flex;gap:8px;align-items:center;margin-bottom:10px;font-size:12.5px;color:var(--tx2)}
.tag{padding:2px 10px;border-radius:99px;background:var(--prs);color:var(--pr);font-weight:600}
.stem{font:var(--qs)/1.9 var(--f-se)}.stem p{margin:0 0 .35em}
.stem img,.mb img,.exp img{max-width:100%;height:auto;border-radius:8px;background:#fff;margin:8px 0;display:block;cursor:zoom-in}
.mat{margin-bottom:16px;padding:14px 16px 8px;background:var(--sf);border:1px solid var(--ln);border-radius:16px}
.mat .tt{font-size:12.5px;color:var(--tx2);font-weight:600;margin-bottom:6px}
.mb{font-size:15px;line-height:1.8}.mb p{margin:0 0 .5em}
.mat.clamp .mb{max-height:8.6em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.mx{display:block;margin:2px auto 0;color:var(--pr);font-weight:600;font-size:14px;padding:8px 16px}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;padding:13px 14px;margin-top:10px;background:var(--sf);border:1.5px solid var(--ln);border-radius:14px;font-size:var(--os);line-height:1.65;transition:border-color .15s,background .15s;text-align:left}
.opt span{flex:1;min-width:0;word-break:break-word;white-space:pre-wrap}
.bu{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--ln);font-weight:600;font-size:14px;color:var(--tx2)}
.opt.sel{border-color:var(--pr);background:var(--prs)}.opt.sel .bu{background:var(--pb);border-color:var(--pb);color:#fff}
.opt.right{border-color:var(--ok);background:var(--oks)}.opt.right .bu{background:var(--ok);border-color:var(--ok);color:var(--on)}
.opt.wrong{border-color:var(--ng);background:var(--ngs)}.opt.wrong .bu{background:var(--ng);border-color:var(--ng);color:var(--on)}
.jg{display:grid;grid-template-columns:1fr 1fr;gap:10px}.jg .opt{justify-content:center;align-items:center;font-weight:600;font-size:17px;gap:8px}
.hint{margin-top:14px;font-size:13.5px}
.res{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border-radius:14px;font-weight:600}
.res.ok{background:var(--oks);color:var(--ok)}.res.ng{background:var(--ngs);color:var(--ng)}.res.nt{background:var(--prs);color:var(--pr)}
.res small{display:block;font-weight:400;color:var(--tx2);font-size:13px}
.res .lk{margin-left:auto;display:flex;gap:4px;align-items:center;font-size:13px;font-weight:600;color:var(--tx2);padding:8px}
.exp{margin-top:16px;padding:16px;background:var(--sf);border-radius:16px}
.exp h3,.fast h3{font-size:14px;color:var(--tx2);margin-bottom:8px}
.exp p{margin:0 0 .6em;font-size:15.5px;line-height:1.85}
.fast{margin-top:12px;padding:16px;background:var(--gds);border-radius:16px}
.fast h3{color:var(--gd);display:flex;gap:8px;align-items:center}
.fast .mt{background:var(--gd);color:var(--on);border-radius:6px;padding:1px 8px;font-size:12px;font-weight:600}
.fast p{margin:0 0 .5em;font-size:15.5px;line-height:1.8}.fast .rc{font-size:14px;color:var(--tx2)}.fast .rc b{color:var(--tx)}
.mn{display:flex;gap:10px;align-items:baseline;font:17px/1.7 var(--f-se)}
.mn i{flex:none;font:600 12px var(--f-ui);font-style:normal;color:var(--gd);border:1.5px solid var(--gd);border-radius:5px;padding:0 6px;transform:rotate(-3deg)}
/* search */
.sbar{display:flex;gap:8px;align-items:center;padding:calc(var(--st) + 8px) 12px 8px}
.sbar input{flex:1;height:44px;border-radius:12px;border:1px solid var(--ln);background:var(--sf);color:var(--tx);font:16px var(--f-ui);padding:0 14px}
.sbar button{padding:10px 6px;color:var(--pr);font-weight:600}
.sr{flex:1;overflow:auto;padding:4px 16px calc(24px + var(--sb))}.sr mark{background:var(--gds);color:inherit;border-radius:3px}
/* sheet */
#sheet{position:fixed;inset:0;z-index:60;display:none}#sheet.on{display:block}
.bd{position:absolute;inset:0;background:rgba(8,12,24,.5);opacity:0;transition:opacity .2s}.in .bd{opacity:1}
.pn{position:absolute;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;max-height:84%;overflow:auto;background:var(--sf);border-radius:22px 22px 0 0;padding:8px 18px calc(18px + var(--sb));transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.in .pn{transform:none}
.grab{display:block;width:36px;height:4px;border-radius:2px;background:var(--ln);margin:0 auto 12px}
.sh h2{font:700 20px/1.4 var(--f-se)}.sh .mute{margin:2px 0 10px}
.it{display:flex;align-items:center;gap:12px;width:100%;padding:14px 12px;border-radius:14px;margin-top:4px}
.it span{flex:1}.it b{display:block;font-weight:600}.it small{color:var(--tx2);font-size:12.5px}.it svg{color:var(--tx3)}
.it:active{background:var(--sf2)}.it.first{background:var(--prs)}.it.first b{color:var(--pr)}
.ag{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px;margin-top:12px}
.ag button{height:44px;border-radius:12px;background:var(--sf2);color:var(--tx2);font-weight:600;font-variant-numeric:tabular-nums;text-align:center}
.ag .ok{background:var(--oks);color:var(--ok)}.ag .ng{background:var(--ngs);color:var(--ng)}.ag .cur{outline:2px solid var(--pr);outline-offset:1px}
.lg{display:flex;gap:14px;font-size:12.5px;color:var(--tx2);margin-top:2px}.lg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.sm3{display:grid;grid-template-columns:repeat(3,1fr);margin:14px 0 6px;text-align:center}.sm3 b{display:block;font:700 26px var(--f-se)}.sm3 span{font-size:12px;color:var(--tx2)}
.acts{display:flex;gap:10px;margin-top:14px}
#toast{position:fixed;left:50%;bottom:calc(96px + var(--sb));transform:translate(-50%,12px);opacity:0;background:var(--tx);color:var(--bg);padding:10px 18px;border-radius:99px;font-size:14px;z-index:90;transition:opacity .2s,transform .2s;pointer-events:none;max-width:86%;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
#zoom{position:fixed;inset:0;z-index:70;background:#000;overflow:auto;display:none}#zoom.on{display:block}
#zoom img{width:100%;display:block;background:#fff;cursor:zoom-in}#zoom img.big{width:240%;max-width:none}
#zoom button{position:fixed;top:calc(var(--st) + 8px);right:8px;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;width:44px;height:44px;display:grid;place-items:center}
@media(min-width:900px){body{padding-left:196px}.page{padding-top:36px;padding-bottom:48px}
#tabs{top:0;right:auto;width:196px;flex-direction:column;justify-content:flex-start;gap:4px;padding:28px 12px;border-top:0;border-right:1px solid var(--ln)}
#tabs button{flex:none;flex-direction:row;gap:12px;font-size:15px;padding:12px 14px;border-radius:12px;min-height:0}
#tabs [aria-current=page]{background:var(--prs)}#toast{bottom:40px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.boot{padding:40vh 0 0;text-align:center}
.pill{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:99px;background:var(--gds);color:var(--gd);font-size:12px;font-weight:600}