:root{--bg:#f6fbf6;--side:#e8f2ea;--line:#d2e5d3;--text:#0f172a;--link:#10b981;--link-h:#059669}
@media(prefers-color-scheme:dark){:root{--bg:#0b1410;--side:#10201a;--line:#1b3329;--text:#e6f1ea;--link:#34d399;--link-h:#6ee7b7}}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh}
a{color:var(--link)}a:hover{color:var(--link-h)}
nav.side{width:16rem;flex:none;background:var(--side);border-right:1px solid var(--line);padding:1.5rem 1rem}
nav.side .brand{display:block;font-weight:700;font-size:1.25rem;text-decoration:none;margin-bottom:.25rem}
nav.side .sub{font-size:.85rem;opacity:.7;margin-bottom:1rem}
nav.side a.item{display:block;padding:.3rem .5rem;border-radius:.375rem;text-decoration:none}
nav.side a.item.on{background:var(--line);font-weight:600}
main{flex:1;max-width:48rem;padding:2rem 2.5rem}
h1,h2,h3,h4{font-weight:600;line-height:1.25}
h1{border-left:3px solid var(--link);padding-left:.75rem}
code{background:var(--side);padding:.1em .3em;border-radius:.25rem}
pre{background:var(--side);padding:1rem;overflow:auto;border-radius:.375rem}pre code{background:none;padding:0}
table{border-collapse:collapse;width:100%}th,td{border:1px solid var(--line);padding:.4rem .6rem;text-align:left}
blockquote{margin:1rem 0;padding-left:1rem;border-left:3px solid var(--line)}
@media(max-width:700px){body{flex-direction:column}nav.side{width:auto;border-right:0;border-bottom:1px solid var(--line)}main{padding:1.25rem}}