:root{--bg:#fbfbf9;--card:#fff;--fg:#1f2328;--muted:#656d76;--line:#e3e4e2;--accent:#0b5cad;--accent-bg:#eaf2fb;
--th:#f3f4f2;--code:#f3f4f2;--shadow:0 1px 2px rgba(0,0,0,.05);--radius:10px;--w:46rem;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--bg:#15171a;--card:#1c1f23;--fg:#e6e6e3;--muted:#9aa1a9;
--line:#2d3136;--accent:#6cb0ff;--accent-bg:#1d2a3a;--th:#23272c;--code:#23272c;--shadow:none;color-scheme:dark}}
:root[data-theme=dark]{--bg:#15171a;--card:#1c1f23;--fg:#e6e6e3;--muted:#9aa1a9;--line:#2d3136;--accent:#6cb0ff;
--accent-bg:#1d2a3a;--th:#23272c;--code:#23272c;--shadow:none;color-scheme:dark}
html{font-size:17px;-webkit-text-size-adjust:100%}
html[data-size=s1]{font-size:15px}html[data-size=s3]{font-size:19px}html[data-size=s4]{font-size:22px}
*{box-sizing:border-box}
body{margin:0;color:var(--fg);background:var(--bg);line-height:1.8;
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
header.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{max-width:72rem;margin:0 auto;padding:0 1rem;display:flex;align-items:center;gap:1rem;height:3.2rem}
.brand{font-weight:700;color:var(--fg);white-space:nowrap}
nav.main{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}nav.main::-webkit-scrollbar{display:none}
nav.main a{color:var(--fg);padding:.3rem .65rem;border-radius:6px;white-space:nowrap;font-size:.93rem}
nav.main a:hover,nav.main a.on{background:var(--accent-bg);color:var(--accent);text-decoration:none}
.tools{display:flex;gap:.3rem;white-space:nowrap;flex-shrink:0}
.tools button{font:inherit;font-size:.82rem;color:var(--fg);background:var(--card);border:1px solid var(--line);
border-radius:6px;padding:.15rem .5rem;cursor:pointer}
.tools select{font:inherit;font-size:.82rem;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:.1rem .3rem}
main{max-width:var(--w);margin:0 auto;padding:0 1rem 3rem;overflow-wrap:anywhere}
main.wide{max-width:72rem}
.crumb{font-size:.82rem;color:var(--muted);margin:1.2rem 0 0}.crumb a{color:var(--muted)}
h1{font-size:1.75rem;line-height:1.35;margin:.8rem 0 .5rem;letter-spacing:.01em}
h2{font-size:1.3rem;line-height:1.45;margin:2.2rem 0 .8rem;padding-bottom:.3rem;border-bottom:1px solid var(--line)}
h3{font-size:1.08rem;margin:1.6rem 0 .5rem}
.meta{color:var(--muted);font-size:.84rem;margin:.15rem 0 1rem}
ul.list{list-style:none;padding:0;margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
ul.list li{padding:.75rem 1rem;border-bottom:1px solid var(--line)}ul.list li:last-child{border-bottom:0}
ul.list li:hover{background:var(--accent-bg)}
ul.list li>a{display:block;color:var(--fg);font-weight:500}ul.list li>a:hover{color:var(--accent);text-decoration:none}
ul.list .meta{margin:.15rem 0 0}
.grid{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0}
.grid a.btn{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;
color:var(--fg);font-size:.92rem;box-shadow:var(--shadow)}
.grid a.btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.grid.big a.btn{border-radius:var(--radius);padding:.7rem 1.1rem;font-weight:600}
.idx{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:0}
.idx li{border-bottom:1px solid var(--line)!important}
article{font-size:1.02rem}
article p{margin:.9rem 0}
article a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.table-wrap{overflow-x:auto;margin:1.2rem 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table{border-collapse:collapse;font-size:.86rem;line-height:1.5;min-width:100%}
th,td{border-bottom:1px solid var(--line);padding:.45rem .7rem;vertical-align:top;text-align:left}
th{background:var(--th);font-weight:600;white-space:nowrap}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--th) 45%,transparent)}
blockquote{border-left:3px solid var(--accent);margin:1.2rem 0;padding:.2rem 1rem;color:var(--muted);background:var(--card)}
pre{overflow-x:auto;background:var(--code);border-radius:8px;padding:.8rem;font-size:.82rem;line-height:1.5}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--code);padding:.1em .3em;border-radius:4px}
pre code{background:none;padding:0}
img{max-width:100%;height:auto;border-radius:6px}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
details.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.2rem 1rem;margin:1rem 0}
summary{cursor:pointer;padding:.5rem 0;font-weight:600}
.toc ul{padding-left:1.1rem;margin:.2rem 0 .6rem;font-size:.9rem;line-height:1.7}
.toc a{color:var(--fg)}
.layout{display:block}
aside.side{display:none}
@media (min-width:1180px){main.doc{max-width:72rem}.layout{display:grid;grid-template-columns:minmax(0,46rem) 15rem;gap:3rem;justify-content:center}
aside.side{display:block}aside.side .toc{position:sticky;top:4.5rem;max-height:calc(100vh - 6rem);overflow:auto;font-size:.85rem;
border-left:1px solid var(--line);padding-left:1rem}aside.side .toc ul{padding-left:.8rem}
details.toc{display:none}}
.resume{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:12;background:var(--card);color:var(--fg);
border:1px solid var(--line);border-radius:999px;padding:.45rem .6rem .45rem 1rem;box-shadow:0 4px 16px rgba(0,0,0,.12);font-size:.9rem;white-space:nowrap}
.resume button{font:inherit;margin-left:.6rem;border:0;border-radius:999px;background:var(--accent);color:#fff;padding:.2rem .8rem;cursor:pointer}
.resume .x{margin-left:.5rem;color:var(--muted);cursor:pointer;padding:0 .3rem}
ul.list li.done>a{color:var(--muted);font-weight:400}.rd{color:var(--accent)}
ul.work li>a{font-weight:400;font-size:.95rem}
.wx{display:flex;gap:1rem;align-items:center;margin:2.4rem 0 1rem;padding:1rem;background:var(--card);
border:1px solid var(--line);border-radius:var(--radius)}.wx img{width:92px;height:92px;border-radius:6px;flex-shrink:0}
.wx b{display:block;font-size:1rem}.wx span{color:var(--muted);font-size:.86rem}
.wxline{margin:2.4rem 0 .6rem;padding-top:.8rem;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.wxline .fix{display:block;margin-top:.3rem}
.intro{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;margin:1rem 0 1.4rem}
.intro p{margin:.3rem 0}
.layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.8rem;margin:1rem 0}
.layers div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem}
.layers b{display:block;margin-bottom:.2rem}.layers span{color:var(--muted);font-size:.88rem}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:11}
footer{max-width:72rem;margin:3rem auto 0;padding:1.2rem 1rem 2rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
footer a{color:var(--muted);text-decoration:underline}
input.q{font:inherit;font-size:1.05rem;width:100%;padding:.7rem 1rem;border:1px solid var(--line);border-radius:var(--radius);
background:var(--card);color:var(--fg);outline:none}input.q:focus{border-color:var(--accent)}
@media (max-width:640px){html{font-size:16px}h1{font-size:1.45rem}.bar{gap:.5rem;padding:0 .6rem}.brand{display:none}
.tools .lbl{display:none}ul.list li{padding:.7rem .8rem}}