@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
body{margin:0}
/* ---- static pages + homepage guide strip (the React app carries its own inline styles) ---- */
:root{--bg-void:#0B1E2D;--panel:#12293C;--text-primary:#E9F6FC;--text-muted:#8FB3C7;--dim:#3f5a6b;--accent:#E8A33D;--accent-rgb:232,163,61;--correct:#4FA88B;--border-rgb:220,238,245;color-scheme:dark}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg-void:#DBE0E2;--panel:#E9EBEC;--text-primary:#172834;--text-muted:#5C7282;--dim:#7E8A90;--accent:#AD6E14;--accent-rgb:173,110,20;--correct:#35896C;--border-rgb:35,52,64;color-scheme:light}}
:root[data-theme="light"]{--bg-void:#DBE0E2;--panel:#E9EBEC;--text-primary:#172834;--text-muted:#5C7282;--dim:#7E8A90;--accent:#AD6E14;--accent-rgb:173,110,20;--correct:#35896C;--border-rgb:35,52,64;color-scheme:light}
:root[data-theme="dark"]{--bg-void:#0B1E2D;--panel:#12293C;--text-primary:#E9F6FC;--text-muted:#8FB3C7;--dim:#3f5a6b;--accent:#E8A33D;--accent-rgb:232,163,61;--correct:#4FA88B;--border-rgb:220,238,245;color-scheme:dark}
html{background:var(--bg-void)}
.ctl{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--bg-void);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased}
.ctl a{color:var(--accent)}
.ctl .wrap{max-width:760px;margin:0 auto;padding:24px 16px 48px}
.ctl.wrap-wide,.ctl .wrap-wide{max-width:1056px;margin:0 auto;padding:0 16px 40px}
.ctl .brandbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;background:var(--panel);border:1px solid rgba(var(--border-rgb),.10);border-radius:10px;padding:12px 18px;margin-bottom:28px}
.ctl .brandbar a{text-decoration:none}
.ctl .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;color:var(--accent);margin-bottom:4px}
.ctl .brand{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:22px;color:var(--text-primary)}
.ctl nav.top{display:flex;gap:4px 14px;flex-wrap:wrap;align-items:center;font-size:13px;position:relative}
.ctl nav.top>a{color:var(--text-muted);text-decoration:none;padding:4px 0}
.ctl nav.top>a[aria-current],.ctl nav.top>a:hover{color:var(--text-primary)}
.ctl details.dd{position:static}
.ctl details.dd summary{list-style:none;cursor:pointer;color:var(--text-muted);padding:4px 0;user-select:none;display:inline-flex;align-items:center;gap:5px}
.ctl details.dd summary::-webkit-details-marker{display:none}
.ctl details.dd summary:hover,.ctl details.dd[open] summary{color:var(--text-primary)}
.ctl .dd-caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.ctl details.dd[open] .dd-caret{transform:rotate(225deg) translateY(-2px)}
.ctl .dd-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:240px;max-width:min(92vw,640px);background:var(--panel);border:1px solid rgba(var(--border-rgb),.16);border-radius:10px;box-shadow:0 14px 36px rgba(0,0,0,.28);padding:10px 12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px 18px}
.ctl .brandbar details.dd .dd-menu{left:auto;right:0}
@media (max-width:700px){.ctl .dd-menu{position:fixed;left:12px!important;right:12px!important;top:auto;max-width:none;max-height:70vh;overflow:auto}}
.ctl .dd-group{padding:4px 0}
.ctl .dd-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:4px 0 3px}
.ctl .dd-menu a{display:block;color:var(--text-muted);text-decoration:none;padding:3px 4px;border-radius:5px;font-size:13px;white-space:nowrap}
.ctl .dd-menu a:hover,.ctl .dd-menu a[aria-current]{color:var(--text-primary);background:rgba(var(--border-rgb),.08)}
.ctl .dd-all{grid-column:1/-1;border-top:1px solid rgba(var(--border-rgb),.12);margin-top:4px;padding-top:6px}
.ctl .dd-all a{color:var(--accent)}
.ctl nav.crumbs{font-size:12.5px;color:var(--text-muted);margin:-14px 0 18px}
.ctl nav.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px}
.ctl nav.crumbs li+li::before{content:'/';margin:0 6px 0 2px;opacity:.5}
.ctl nav.crumbs a{color:var(--text-muted);text-decoration:none}
.ctl nav.crumbs a:hover{color:var(--text-primary)}
.ctl.topstrip{max-width:1056px;margin:0 auto;padding:12px 16px 0;display:flex;justify-content:flex-end;background:transparent}
.ctl.topstrip nav.top{font-size:12.5px;gap:4px 16px}
.ctl.topstrip details.dd .dd-menu{left:auto;right:0}
.ctl .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:14px 0 8px;padding:0;list-style:none}
.ctl .cards li{background:var(--panel);border:1px solid rgba(var(--border-rgb),.10);border-radius:10px;padding:14px 16px}
.ctl .cards a{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;text-decoration:none;color:var(--text-primary);display:block;margin-bottom:4px}
.ctl .cards span{font-size:13px;color:var(--text-muted)}
.ctl .cards .n{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--accent);margin-top:6px}
.ctl .linkcloud{display:flex;flex-wrap:wrap;gap:6px 8px;margin:8px 0 14px;padding:0;list-style:none}
.ctl .linkcloud a{font-size:12.5px;color:var(--text-muted);text-decoration:none;border:1px solid rgba(var(--border-rgb),.14);border-radius:999px;padding:3px 10px}
.ctl .linkcloud a:hover{color:var(--text-primary);border-color:var(--accent)}
.ctl .examples{font-family:'IBM Plex Mono',monospace;font-size:13.5px;line-height:1.8;background:var(--panel);border:1px solid rgba(var(--border-rgb),.10);border-radius:12px;padding:12px 18px;margin:12px 0 18px;color:var(--text-muted);list-style:none}
.ctl .examples li::before{content:'·';color:var(--accent);margin-right:8px}
.ctl .faq h3{margin-top:18px}
.ctl .related{margin-top:36px}
.ctl h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,4.5vw,36px);line-height:1.2;margin:0 0 8px}
.ctl h2{font-family:'Space Grotesk',sans-serif;font-size:21px;margin:36px 0 10px}
.ctl h3{font-family:'Space Grotesk',sans-serif;font-size:16px;margin:24px 0 6px}
.ctl .lede{font-size:17px;color:var(--text-muted);margin:0 0 20px}
.ctl p{margin:0 0 14px}
.ctl code,.ctl .mono{font-family:'IBM Plex Mono',monospace;font-size:.92em;background:rgba(var(--border-rgb),.08);padding:1px 5px;border-radius:4px}
.ctl .sample{font-family:'IBM Plex Mono',monospace;font-size:15px;line-height:1.9;background:var(--panel);border:1px solid rgba(var(--border-rgb),.10);border-radius:12px;padding:16px 20px;margin:14px 0 18px;color:var(--text-muted);overflow-x:auto}
.ctl .sample b{color:var(--text-primary);font-weight:500}
.ctl .cta{display:inline-block;background:rgba(var(--accent-rgb),.15);border:1px solid var(--accent);color:var(--accent);border-radius:8px;padding:10px 16px;font-family:'IBM Plex Mono',monospace;font-size:14px;text-decoration:none;margin:6px 0 10px}
.ctl .cta:hover{background:rgba(var(--accent-rgb),.25)}
.ctl .tablewrap{overflow-x:auto;margin:12px 0 18px}
.ctl table{border-collapse:collapse;width:100%;font-size:14px;min-width:420px}
.ctl th,.ctl td{text-align:left;padding:8px 10px;border-bottom:1px solid rgba(var(--border-rgb),.12);vertical-align:top}
.ctl th{color:var(--text-muted);font-weight:500;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em}
.ctl .guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin:14px 0 8px;padding:0;list-style:none}
.ctl .guides li{background:var(--panel);border:1px solid rgba(var(--border-rgb),.10);border-radius:10px;padding:14px 16px}
.ctl .guides a{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;text-decoration:none;color:var(--text-primary);display:block;margin-bottom:4px}
.ctl .guides span{font-size:13px;color:var(--text-muted)}
.ctl footer.site{margin-top:40px;padding-top:16px;border-top:1px solid rgba(var(--border-rgb),.12);font-size:12.5px;color:var(--text-muted)}
.ctl footer.site a{color:var(--accent);text-decoration:none}
.ctl .eq{overflow-x:auto;overflow-y:hidden;padding:6px 0;margin:10px 0}
.ctl math{font-size:1.2em;overflow:visible}
.ctl figure.ctl-fig{margin:18px 0}
.ctl figure.ctl-fig figcaption{font-size:12.5px;color:var(--text-muted);margin-top:6px;text-align:center}
.ctl .dl dt{font-weight:600;margin-top:12px}
.ctl .dl dd{margin:2px 0 0 0;color:var(--text-muted)}
.ctl ul.plain{padding-left:20px;margin:0 0 14px}
.ctl ul.plain li{margin-bottom:6px}
.ctl .cta.preset{font-size:13px;padding:8px 12px;margin:4px 6px 4px 0}
.ctl .hint{font-size:12.5px;color:var(--text-muted);margin-top:-2px}
#guide-strip{padding-top:8px;padding-bottom:40px}
#guide-strip h2{margin-top:8px}