:root{--brand:#4118a9;--brand-soft:#efeafc;--bg:#fff;--fg:#1c1b22;--muted:#62606e;--line:#e6e4ee;--panel:#f7f6fb;--info:#e8f1ff;--info-line:#b9d3ff;--warn:#fff6e0;--warn-line:#f2d48a;--code:#f1eff8}
@media (prefers-color-scheme:dark){:root{--brand:#a48bff;--brand-soft:#26204a;--bg:#14131a;--fg:#ececf3;--muted:#a5a2b5;--line:#2c2a38;--panel:#1b1a24;--info:#16243d;--info-line:#2d4a7a;--warn:#33290f;--warn-line:#6b571c;--code:#232131}}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif}
a{color:var(--brand)}img{max-width:100%;height:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--bg);padding:8px;z-index:50}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;height:60px;padding:0 20px;background:var(--bg);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--fg);text-decoration:none}
.brand small{color:var(--muted);font-weight:500}
.logo{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--brand);color:#fff;font-weight:800}
.top-link{margin-left:auto;font-size:14px;text-decoration:none}
.menu-btn{display:none;background:none;border:0;font-size:22px;color:var(--fg);cursor:pointer}
.layout{display:grid;grid-template-columns:270px minmax(0,1fr) 240px;max-width:1380px;margin:0 auto}
.sidebar{position:sticky;top:60px;align-self:start;height:calc(100vh - 60px);overflow:auto;padding:20px 16px;border-right:1px solid var(--line)}
.sidebar ul,.toc ul{list-style:none;margin:0;padding:0}
.sidebar a{display:block;padding:7px 12px;border-radius:8px;color:var(--fg);text-decoration:none;font-size:15px}
.sidebar a:hover{background:var(--panel)}.sidebar a.active{background:var(--brand-soft);color:var(--brand);font-weight:600}
.nav-group{margin:18px 12px 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.filter{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--fg);font:inherit;font-size:14px}
.content{padding:36px clamp(20px,4vw,56px) 80px;min-width:0}
.content h1{font-size:2.2rem;line-height:1.2;margin:0 0 20px}
.content h2{font-size:1.6rem;margin:2.4em 0 .6em;padding-top:.4em;border-top:1px solid var(--line)}
.content h3{font-size:1.25rem;margin:1.8em 0 .5em}
.content p,.content li{max-width:78ch}
.content li{margin:.35em 0}
.content code{background:var(--code);padding:2px 6px;border-radius:5px;font-size:.9em}
.content table{border-collapse:collapse;width:100%;margin:1em 0;font-size:15px}
.content th,.content td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
.content th{background:var(--panel)}
.inline-toc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 22px;margin:0 0 28px}
.inline-toc h4{margin:0 0 6px;font-size:15px}.inline-toc ol{margin:4px 0;padding-left:22px}.inline-toc a{text-decoration:none}
.note,.warn{border-radius:10px;padding:14px 18px;margin:1.2em 0;border:1px solid}
.note{background:var(--info);border-color:var(--info-line)}.warn{background:var(--warn);border-color:var(--warn-line)}
.note strong:first-child,.warn strong:first-child{display:block;margin-bottom:2px}
figure{margin:1.2em 0}figure img{border:1px solid var(--line);border-radius:10px;display:block}
figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.shot{display:grid;place-items:center;min-height:150px;padding:16px;border:2px dashed var(--line);border-radius:10px;background:var(--panel);color:var(--muted);font-size:14px;text-align:center}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:1.4em 0}
.cards a{display:block;padding:18px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--fg);background:var(--panel)}
.cards a:hover{border-color:var(--brand)}.cards b{display:block;color:var(--brand);margin-bottom:4px}
.toc{position:sticky;top:60px;align-self:start;max-height:calc(100vh - 60px);overflow:auto;padding:36px 16px 20px 8px;font-size:14px}
.toc-title{font-weight:700;margin:0 0 10px}.toc a{display:block;padding:4px 10px;color:var(--muted);text-decoration:none;border-left:2px solid var(--line)}
.toc .l3 a{padding-left:22px}.toc a:hover,.toc a.on{color:var(--brand);border-left-color:var(--brand)}
.pn-row{display:flex;justify-content:space-between;gap:16px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.pn{display:block;max-width:48%;padding:14px 18px;border:1px solid var(--line);border-radius:12px;text-decoration:none;font-weight:600}
.pn span{display:block;font-size:12px;color:var(--muted);font-weight:500}.pn.next{margin-left:auto;text-align:right}
@media(max-width:1100px){.layout{grid-template-columns:250px minmax(0,1fr)}.toc{display:none}}
@media(max-width:800px){.layout{grid-template-columns:1fr}.menu-btn{display:block}
.sidebar{position:fixed;inset:60px 0 0 0;width:84%;max-width:320px;height:auto;background:var(--bg);transform:translateX(-105%);transition:transform .2s;z-index:25}
.sidebar.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}.content h1{font-size:1.7rem}.pn{max-width:100%}.pn-row{flex-direction:column}}