:root{--blue:#1d4ed8;--ink:#1f2937;--muted:#6b7280;--line:#e5e7eb;--bg:#fff}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.layout{display:flex;min-height:100vh}
.sidebar{flex:0 0 280px;border-right:1px solid var(--line);padding:24px 16px;background:#f9fafb;overflow-y:auto}
.sidebar__brand a{font-weight:700;color:var(--ink);font-size:16px}
.sidebar ul{list-style:none;padding:0;margin:20px 0 0}
.sidebar li{margin:2px 0}
.sidebar li a{display:block;padding:8px 12px;border-radius:6px;color:var(--ink)}
.sidebar li a:hover{background:#eef2ff;text-decoration:none}
.sidebar li.active a{background:var(--blue);color:#fff}
.sidebar__group{margin:16px 0 4px;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.content{flex:1;max-width:820px;padding:40px 48px}
.content h1{color:var(--ink);margin-top:0}
.content h2{border-bottom:1px solid var(--line);padding-bottom:6px;margin-top:36px}
.content h3{margin-top:28px}
.content code{background:#f3f4f6;padding:2px 5px;border-radius:4px;font-size:.9em}
.content table{border-collapse:collapse;width:100%}
.content th,.content td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.content__footer{margin-top:48px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted)}
@media(max-width:720px){.layout{flex-direction:column}.sidebar{flex-basis:auto;border-right:0;border-bottom:1px solid var(--line)}.content{padding:24px}}