:root{--bg:#fffdf8;--fg:#1f1a14;--muted:#6b5f52;--accent:#b5541c;--accent-2:#8a3b0c;--line:#e8dccb;--code:#f4ece0;--side:#f8f1e6}
@media (prefers-color-scheme:dark){:root{--bg:#161310;--fg:#efe7db;--muted:#a8998a;--accent:#e8884a;--accent-2:#f0a26f;--line:#332a22;--code:#221c16;--side:#1d1813}}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;line-height:1.6}
a{color:var(--accent)}a:hover{color:var(--accent-2)}
.top{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--line);background:var(--side);position:sticky;top:0;z-index:2}
.brand{font-weight:700;font-size:1.25rem;letter-spacing:.02em;text-decoration:none;color:var(--fg)}
.tag{color:var(--muted);font-size:.9rem}
.menu{margin-left:auto;display:none;background:none;border:1px solid var(--line);border-radius:6px;color:var(--fg);font-size:1.1rem;padding:.2rem .6rem}
.wrap{display:grid;grid-template-columns:15rem minmax(0,1fr);max-width:72rem;margin:0 auto}
.side{padding:1.5rem 1rem;border-right:1px solid var(--line);position:sticky;top:3.3rem;align-self:start;height:calc(100vh - 3.3rem);overflow:auto}
.side ul{list-style:none;margin:0;padding:0}
.side li a{display:block;padding:.4rem .6rem;border-radius:6px;text-decoration:none;color:var(--fg)}
.side li a:hover{background:var(--code)}
.side li a.active{background:var(--accent);color:#fff}
.side .small{font-size:.8rem;color:var(--muted);margin-top:1.5rem}
.content{padding:1.5rem 2rem 4rem;max-width:48rem}
h1{font-size:2rem;line-height:1.2;margin:.5rem 0 1rem}
h2{margin-top:2.2rem;padding-top:.5rem;border-top:1px solid var(--line)}
h3{margin-top:1.6rem}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
code{background:var(--code);padding:.1em .35em;border-radius:4px}
pre{background:var(--code);padding:.9rem 1rem;border-radius:8px;overflow:auto;border:1px solid var(--line)}
pre code{background:none;padding:0}
table{border-collapse:collapse;width:100%;display:block;overflow:auto}
th,td{border:1px solid var(--line);padding:.45rem .6rem;text-align:left;vertical-align:top}
th{background:var(--side)}
blockquote{margin:1rem 0;padding:.5rem 1rem;border-left:4px solid var(--accent);background:var(--side);color:var(--fg)}
.foot{margin-top:3rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
img{max-width:100%}
@media (max-width:52rem){
  .wrap{grid-template-columns:1fr}
  .menu{display:inline-block}
  .side{display:none;position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  body.nav-open .side{display:block}
  .content{padding:1rem 1rem 3rem}
}
.switch{margin-left:auto;font-size:.9rem;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.15rem .7rem;color:var(--fg)}
.switch:hover{background:var(--code);color:var(--fg)}
.top .menu{margin-left:0}
.wrap.landing{grid-template-columns:1fr}
.wrap.landing .content{max-width:60rem;margin:0 auto}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;margin:1.5rem 0}
.card{border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;background:var(--side)}
.card h2{margin:.2rem 0 .6rem;border:0;padding:0}
.card ul{padding-left:1.2rem;margin:.4rem 0}