*{box-sizing:border-box}
:root{--bg:#fff;--fg:#1a1a1a;--mut:#777;--line:#ccc;--accent:#0b66c3;--card:#f6f6f6;
 --side:#1e2530;--sidefg:#cdd6e0;--sideon:#fff}
@media(prefers-color-scheme:dark){:root{--bg:#161616;--fg:#e6e6e6;--mut:#999;--line:#3a3a3a;
 --accent:#6db3ff;--card:#1f1f1f;--side:#11161e}}
html,body{margin:0}
body{font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.55;color:var(--fg);background:var(--bg)}
.side{position:fixed;top:0;left:0;width:250px;height:100vh;overflow:auto;background:var(--side);padding:.6rem 0;font-size:.86rem}
.side a{display:block;color:var(--sidefg);text-decoration:none;padding:.42rem .9rem;border-left:3px solid transparent}
.side a:hover{background:rgba(255,255,255,.06)}
.side a.on{border-left-color:var(--accent);color:var(--sideon);background:rgba(255,255,255,.08);font-weight:600}
.content{margin-left:250px;max-width:900px;padding:1.4rem 1.6rem 4rem}
.menu{display:none}
h1{border-bottom:2px solid #888;padding-bottom:.2em;margin-top:.2em}
h2{border-bottom:1px solid var(--line);padding-bottom:.15em;margin-top:1.5em}
h3,h4,h5,h6{margin-top:1.2em}
a{color:var(--accent)}
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;margin:.8em 0;font-size:.9em}
th,td{border:1px solid var(--line);padding:.35em .55em;text-align:left;vertical-align:top}
th{background:var(--card)}
code{background:var(--card);padding:.08em .3em;border-radius:3px;font-size:.9em}
a.dlink code{color:var(--accent)}
pre{background:var(--card);padding:.7em;border-radius:6px;overflow-x:auto;font-size:.8em;line-height:1.35}
pre code{background:none;padding:0}
blockquote{margin:.7em 0;padding:.4em .9em;border-left:4px solid #8a93a0;background:var(--card)}
hr{border:none;border-top:1px solid var(--line);margin:1.4em 0}
.toc{columns:2;list-style:none;padding-left:0}
.toc li{margin:.2em 0;break-inside:avoid}
.meta{color:var(--mut);font-size:.85em}
.pn{display:flex;justify-content:space-between;gap:1rem;margin-top:2.5em;padding-top:1em;border-top:1px solid var(--line);font-size:.9em}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.8rem;margin-top:1rem}
.dcard{display:block;padding:.8rem;border:1px solid var(--line);border-radius:8px;text-decoration:none;background:var(--card);color:var(--fg)}
.dcard b{display:block;margin-bottom:.3em}.dcard span{color:var(--mut);font-size:.8em;font-family:monospace}
.dcard:hover{border-color:var(--accent)}
.pz-ctrl{display:flex;gap:.4rem;align-items:center;margin:.6rem 0;flex-wrap:wrap}
.pz-ctrl button{font-size:1rem;padding:.25rem .7rem;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);cursor:pointer}
.pz-ctrl button:hover{border-color:var(--accent)}.pz-ctrl .hint{color:var(--mut);font-size:.82em}
.panzoom{position:relative;overflow:hidden;height:78vh;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:grab;touch-action:none}
.panzoom.grabbing{cursor:grabbing}
.panzoom svg{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
@media(max-width:820px){
 .side{transform:translateX(-100%);transition:transform .2s;z-index:50;width:82%}
 body.navopen .side{transform:none}
 .content{margin-left:0}
 .menu{display:inline-block;position:sticky;top:0;margin:.4rem;padding:.4rem .8rem;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);z-index:40}
 .toc{columns:1}
}