:root{
  --bg:#f7f9fb;--surface:#fff;--surface-2:#eef2f6;--border:#dbe3ea;--text:#16212b;
  --muted:#566673;--accent:#0b6e99;--accent-ink:#075a7e;--code-bg:#eef2f6;--code-ink:#1d3040;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#0d141a;--surface:#131d25;--surface-2:#19242e;--border:#263441;--text:#e5eef4;
  --muted:#95a6b3;--accent:#46b2d6;--accent-ink:#7fcbe6;--code-bg:#0f1a22;--code-ink:#cfe0ec;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
.layout{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;background:var(--surface);border-right:1px solid var(--border);padding:24px 18px}
.brand{display:block;font-weight:800;font-size:16px;color:var(--text);text-decoration:none;margin-bottom:18px;letter-spacing:-.01em}
.sidebar nav{display:flex;flex-direction:column;gap:2px}
.sidebar nav a{color:var(--muted);text-decoration:none;font-size:14px;padding:8px 11px;border-radius:8px;line-height:1.35}
.sidebar nav a:hover{background:var(--surface-2);color:var(--text)}
.sidebar nav a.active{background:var(--accent);color:#fff;font-weight:600}
.content{padding:44px clamp(20px,5vw,64px);max-width:920px}
.doc{font-size:16px}
.doc h1{font-size:clamp(26px,4vw,38px);letter-spacing:-.02em;line-height:1.12;margin:0 0 18px}
.doc h2{font-size:24px;letter-spacing:-.015em;margin:44px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.doc h3{font-size:18px;margin:28px 0 8px}
.doc h4{font-size:15px;margin:22px 0 6px;color:var(--accent-ink)}
.doc p,.doc li{max-width:74ch}
.doc a{color:var(--accent-ink)}
.doc code{font-family:var(--mono);background:var(--code-bg);color:var(--code-ink);padding:1.5px 6px;border-radius:5px;font-size:.88em;border:1px solid var(--border)}
.doc pre{background:var(--code-bg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;overflow-x:auto}
.doc pre code{background:none;border:0;padding:0}
.doc pre.mermaid{background:var(--surface);text-align:center}
.doc blockquote{margin:16px 0;padding:12px 18px;border-left:4px solid var(--accent);background:var(--surface);border-radius:0 10px 10px 0;color:var(--muted)}
.doc blockquote p{margin:.3em 0}
.doc table{border-collapse:collapse;width:100%;font-size:14px;margin:8px 0;display:block;overflow-x:auto}
.doc th,.doc td{border:1px solid var(--border);padding:9px 13px;text-align:left;vertical-align:top}
.doc thead th{background:var(--surface-2);font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.doc hr{border:0;border-top:1px solid var(--border);margin:32px 0}
.doc ul,.doc ol{padding-left:22px}
.doc li{margin:4px 0}
.foot{margin-top:56px;padding-top:20px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
.nav-btn{display:none}
@media(max-width:820px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed;z-index:20;width:270px;transform:translateX(-100%);transition:transform .2s}
  #nav-toggle:checked~.layout .sidebar{transform:none}
  .nav-btn{display:grid;place-items:center;position:fixed;top:14px;right:14px;z-index:30;width:44px;height:44px;border-radius:10px;background:var(--accent);color:#fff;font-size:20px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.2)}
  .content{padding-top:64px}
}