:root { color-scheme: light dark; --brand:#6366f1; --line:#88888833; --code:#88881a11; }
* { box-sizing: border-box; }
body { font-family: ui-sans-serif, system-ui, sans-serif; margin: 0; line-height: 1.65; display: flex; min-height: 100vh; }
#sidebar { width: 230px; flex-shrink: 0; border-right: 1px solid var(--line); padding: 22px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
#sidebar .logo { font-weight: 800; margin-bottom: 16px; display: block; text-decoration: none; color: inherit; }
#sidebar .logo span { color: var(--brand); }
#sidebar a { display: block; padding: 5px 8px; border-radius: 7px; color: inherit; text-decoration: none; font-size: .92rem; opacity: .8; }
#sidebar a:hover { background: #8881; opacity: 1; }
#sidebar a.active { background: #6366f122; color: var(--brand); opacity: 1; font-weight: 600; }
#sidebar .group { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .5; margin: 16px 0 4px; }
main { flex: 1; max-width: 760px; padding: 34px 40px 100px; }
h1 { font-size: 1.7rem; margin-top: 0; } h2 { font-size: 1.2rem; margin-top: 2.2em; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
h3 { font-size: 1rem; margin-top: 1.6em; }
code { background: #8881; padding: 1px 5px; border-radius: 5px; font-size: .88em; }
pre { background: #8881; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: .82rem; line-height: 1.5; }
pre code { background: none; padding: 0; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 14px 0; }
th, td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.note { border-left: 3px solid var(--brand); background: #6366f10d; padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 16px 0; font-size: .92rem; }
.warn { border-left-color: #dc2626; background: #dc26260d; }
a { color: var(--brand); }
.pill { font-size: .7rem; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line); vertical-align: middle; }
@media (max-width: 720px) { body { flex-direction: column; } #sidebar { width: 100%; height: auto; position: static; } }