/* Shared color variables keep layout independent of theme and accent choices. */
:root{color-scheme:light;--bg:#fff;--panel:#f7f8fa;--text:#242832;--muted:#626b79;--border:#e1e5eb;--accent:#4258d0;--highlight:#eceffe;--code:#f0f2f6}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg:#11141b;--panel:#171b24;--text:#e4e7ee;--muted:#a2aabd;--border:#2b3241;--accent:#a4b1ff;--highlight:#252d4b;--code:#1b2130}}
:root[data-theme=dark]{color-scheme:dark;--bg:#11141b;--panel:#171b24;--text:#e4e7ee;--muted:#a2aabd;--border:#2b3241;--accent:#a4b1ff;--highlight:#252d4b;--code:#1b2130}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.75 system-ui,-apple-system,sans-serif}a{color:var(--accent);text-underline-offset:3px}header{height:76px;position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:20px}.brand{display:flex;align-items:center;gap:13px;font-size:19px;font-weight:700;text-decoration:none;color:var(--text);line-height:1.3}.brand img{width:40px;height:40px;object-fit:contain}.controls{display:flex;gap:8px}button{background:var(--panel);border:1px solid var(--border);color:var(--text);padding:8px 13px;border-radius:8px;cursor:pointer}#menu-toggle{display:none}.layout{display:grid;grid-template-columns:260px minmax(0,1fr) 230px;width:100%;margin:0}nav{border-right:1px solid var(--border);height:calc(100vh - 76px);overflow:auto;position:sticky;top:76px;padding:28px 20px;background:var(--panel)}nav section{margin-bottom:25px}nav h2{font-size:14px;margin:0 0 8px}nav a{display:block;font-size:14px;text-decoration:none;color:var(--muted);padding:5px 12px;border-radius:6px}nav a:hover,nav a[aria-current]{background:var(--highlight);color:var(--accent)}main{min-width:0;padding:48px clamp(24px,4vw,64px);max-width:950px;width:100%;margin:auto}h1{font-size:clamp(30px,4vw,44px);line-height:1.2;letter-spacing:-.035em;margin:12px 0 20px}h2,h3,h4,h5{line-height:1.4;scroll-margin-top:100px}article h2{font-size:26px;margin-top:42px}article h3{font-size:21px;margin-top:32px}article h5{font-size:16px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--accent)}.page-heading{border-bottom:1px solid var(--border);padding-bottom:22px;margin-bottom:30px}.page-heading p,.hero p{color:var(--muted)}pre{padding:20px;background:var(--code);border:1px solid var(--border);border-radius:9px;overflow:auto;font-size:14px;line-height:1.6}code{font-family:ui-monospace,monospace}p code,li code{background:var(--code);padding:2px 5px;border-radius:4px;overflow-wrap:anywhere}blockquote{margin:24px 0;padding:2px 22px;border-left:3px solid var(--accent);background:var(--panel)}hr{border:0;border-top:1px solid var(--border);margin:28px 0}table{display:block;overflow:auto;border-collapse:collapse}th,td{border:1px solid var(--border);padding:10px 14px}th{background:var(--panel)}article img{max-width:100%;height:auto}aside{position:sticky;top:76px;height:calc(100vh - 76px);overflow:auto;padding:40px 22px;font-size:12px;border-left:1px solid var(--border)}aside strong{font-size:13px}aside ul{padding-left:14px;list-style:none}aside a{color:var(--muted);text-decoration:none}aside li{margin:9px 0}footer{margin-top:60px;border-top:1px solid var(--border);padding-top:20px;font-size:12px;color:var(--muted)}.home .layout{grid-template-columns:260px minmax(0,1fr)}.home main{max-width:1100px}.hero{padding:24px 0 38px}.hero h1{font-size:clamp(42px,7vw,70px);max-width:850px}.hero p{font-size:21px;max-width:700px}.home article{max-width:800px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:45px}.card{border:1px solid var(--border);border-radius:12px;background:var(--panel);padding:24px}.card h2{font-size:20px;margin:0 0 15px}.card a{display:flex;justify-content:space-between;gap:10px;padding:7px 0;text-decoration:none;font-size:14px}.skip{position:fixed;top:-100px;z-index:30;background:var(--bg);padding:10px}.skip:focus{top:0}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* The desktop sidebar stays flush left; mobile navigation becomes an overlay. */
@media(min-width:1600px){.layout{grid-template-columns:280px minmax(0,1fr) 250px}}@media(max-width:1150px){.layout{grid-template-columns:240px minmax(0,1fr)}aside{display:none}}@media(max-width:760px){header{padding:0 16px;height:68px}.brand{font-size:15px}.brand img{width:30px;height:30px}#menu-toggle{display:block}.layout{display:block}nav{display:none;position:fixed;top:68px;left:0;bottom:0;width:min(320px,90vw);height:calc(100vh - 68px);z-index:9;box-shadow:8px 0 30px #0003}nav.open{display:block}main{padding:32px 22px}.hero{padding-top:10px}.controls button{font-size:12px;padding:7px 9px}}

/* Native details/summary keeps accordion groups usable without JavaScript. */
nav details{margin-bottom:16px}nav summary{font-size:14px;font-weight:650;cursor:pointer;padding:6px 0;user-select:none}nav details>div{margin-top:7px}.code-block{position:relative;margin:24px 0}.code-block pre{margin:0;padding-top:48px}.copy-code{position:absolute;right:10px;top:8px;font-size:12px;padding:4px 10px}.copy-status{font-size:12px;color:var(--muted)}
@media(max-width:760px){.home .layout{display:block}}

/* Each accent has matching light and dark variants. Blue uses the defaults above. */
:root[data-accent=green]{--accent:#18734a;--highlight:#e6f5ed}
:root[data-accent=green][data-theme=dark]{--accent:#9be2ba;--highlight:#193b2c}
@media(prefers-color-scheme:dark){:root[data-accent=green]:not([data-theme=light]){--accent:#9be2ba;--highlight:#193b2c}}

:root[data-accent=amber]{--accent:#936000;--highlight:#fff3d8}
:root[data-accent=amber][data-theme=dark]{--accent:#f3cb7a;--highlight:#40321b}
@media(prefers-color-scheme:dark){:root[data-accent=amber]:not([data-theme=light]){--accent:#f3cb7a;--highlight:#40321b}}

:root[data-accent=purple]{--accent:#7541b4;--highlight:#f3ebff}
:root[data-accent=purple][data-theme=dark]{--accent:#d0b0ff;--highlight:#342347}
@media(prefers-color-scheme:dark){:root[data-accent=purple]:not([data-theme=light]){--accent:#d0b0ff;--highlight:#342347}}

:root[data-accent=rose]{--accent:#ab365a;--highlight:#ffedf3}
:root[data-accent=rose][data-theme=dark]{--accent:#ffafc8;--highlight:#422431}
@media(prefers-color-scheme:dark){:root[data-accent=rose]:not([data-theme=light]){--accent:#ffafc8;--highlight:#422431}}

.pagination{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}.pagination a{padding:18px;border:1px solid var(--border);border-radius:9px;text-decoration:none}.pagination a[rel=next]{text-align:right}.pagination span,.pagination strong{display:block}.pagination span{font-size:13px;color:var(--muted)}

.code-language{position:absolute;left:20px;top:12px;right:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px/1.5 ui-monospace,monospace;color:var(--muted)}

/* Empty menus use a centered content column instead of a blank sidebar. */
.no-menu .layout{display:block}.no-menu main{max-width:1000px}.no-menu aside{display:none}