:root{--bg:#fff;--fg:#1e293b;--muted:#64748b;--border:#e2e8f0;--accent:#334155;--sidebar:#f8fafc;--code:#f1f5f9;--brand:#2563eb}
@media(prefers-color-scheme:dark){:root{--bg:#0f172a;--fg:#e2e8f0;--muted:#94a3b8;--border:#1e293b;--accent:#cbd5e1;--sidebar:#0b1220;--code:#111a2e}}
:root[data-theme="light"]{--bg:#fff;--fg:#1e293b;--muted:#64748b;--border:#e2e8f0;--accent:#334155;--sidebar:#f8fafc;--code:#f1f5f9}
:root[data-theme="dark"]{--bg:#0f172a;--fg:#e2e8f0;--muted:#94a3b8;--border:#1e293b;--accent:#cbd5e1;--sidebar:#0b1220;--code:#111a2e}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-y:scroll}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.65;min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:10;min-height:56px;padding:0 20px;border-bottom:1px solid var(--border);background:var(--bg)}
/* Three-region grid so a centred logo stays centred no matter how wide the
   nav next to it is — `margin-left:auto` in a flex row cannot do that. The
   inner wrapper is what gets the max-width, so "contained" lines the logo up
   with the sidebar below it instead of sitting at the window edge. */
.topbar-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:56px;width:100%}
.topbar-inner.contained{max-width:1200px;margin:0 auto}
.topbar-inner.contained.toc-space{max-width:1440px}
.tb-start,.tb-center,.tb-end{display:flex;align-items:center;gap:20px;min-width:0}
.tb-start{justify-content:flex-start}
.tb-center{justify-content:center}
.tb-end{justify-content:flex-end}
.brand{font-weight:700;font-size:18px;color:var(--fg);text-decoration:none;display:flex;align-items:center;flex-shrink:0}
.brand-logo{height:28px;width:auto;max-width:220px;object-fit:contain;display:block}
.topnav{display:flex;gap:16px;flex-wrap:wrap}
.topnav a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500}
.topnav a:hover{color:var(--brand)}
/* ONE width for every page. The table of contents used to widen the shell from
   1200 to 1440px on pages that had one, so the sidebar and body visibly jumped
   when a reader moved between pages. The rail's column is now reserved for the
   whole SITE (`.toc-space`, set from the site setting) and simply left empty on
   pages that don't render one — the layout never moves. */
.shell{display:flex;max-width:1200px;width:100%;margin:0 auto;align-items:flex-start;flex:1}
.shell.toc-space{max-width:1440px}
.toc-gap{flex:0 0 240px}
.sidebar{flex:0 0 260px;position:sticky;top:56px;align-self:flex-start;max-height:calc(100vh - 56px);overflow-y:auto;padding:24px 12px;background:var(--sidebar);border-right:1px solid var(--border)}
.sidebar nav ul{list-style:none;margin:0;padding:0}
/* Children indent under their group and share a guide line, so depth is
   readable at a glance instead of every level looking like a sibling. */
.sidebar nav ul ul{margin:2px 0 2px 10px;padding-left:8px;border-left:1px solid var(--border)}
.sidebar li{margin:1px 0}
/* Group heading: the customer's own label, printed verbatim — no CSS
   uppercasing, so "Getting Started" stays "Getting Started". */
.sidebar .section-label{display:block;padding:5px 10px;font-size:14px;font-weight:650;color:var(--fg)}
.sidebar .section-label a{display:inline;padding:0;font-weight:inherit;font-size:inherit}
/* `.section-label` sets the `padding` shorthand and is MORE specific than
   `.sidebar details>summary`, so a bare `padding-left` here loses and the
   disclosure triangle ends up underneath the label text. Match on both classes
   so the indent actually applies. */
.sidebar details>summary.section-label{cursor:pointer;list-style:none;position:relative;padding-left:26px}
.sidebar details>summary::-webkit-details-marker{display:none}
.sidebar details>summary::before{content:"";position:absolute;left:8px;top:50%;width:0;height:0;
  border-left:4px solid var(--muted);border-top:4px solid transparent;border-bottom:4px solid transparent;
  transform:translateY(-50%);transition:transform .15s ease}
.sidebar details[open]>summary::before{transform:translateY(-50%) rotate(90deg)}
.sidebar details>summary:hover{background:var(--code);border-radius:6px}
.sidebar a{display:block;padding:4px 10px;border-radius:6px;color:var(--fg);text-decoration:none;font-size:14px}
.sidebar a:hover{background:var(--code)}
.sidebar a.active{background:var(--brand);color:#fff;font-weight:600}
.sidebar .section-label a.active{display:block;padding:4px 10px;margin:-4px -10px}
.content{flex:1;min-width:0;padding:32px 40px}
.content article{max-width:760px}
.content h1{font-size:2rem;margin-top:0}
.content h2{font-size:1.4rem;margin-top:2rem;border-bottom:1px solid var(--border);padding-bottom:.3rem}
.content h3{font-size:1.15rem;margin-top:1.6rem}
.content a{color:var(--brand)}
.content pre{background:var(--code);padding:14px 16px;border-radius:8px;overflow-x:auto}
.content code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.content :not(pre)>code{background:var(--code);padding:2px 5px;border-radius:4px}
.content img{max-width:100%}
.content table{border-collapse:collapse;width:100%;margin:1rem 0}
.content th,.content td{border:1px solid var(--border);padding:8px 12px;text-align:left}
.content blockquote{margin:1rem 0;padding:.4rem 1rem;border-left:3px solid var(--border);color:var(--muted)}
/* On-page contents rail. Sticky beside the article, hidden below 1180px where
   there is no room for a third column — the headings are still in the body. */
.toc{flex:0 0 240px;position:sticky;top:56px;align-self:flex-start;max-height:calc(100vh - 56px);overflow-y:auto;padding:32px 16px 24px}
.toc-title{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--border)}
.toc li{margin:0}
.toc a{display:block;padding:4px 0 4px 12px;margin-left:-1px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:13px;line-height:1.4}
.toc a:hover{color:var(--fg)}
.toc a.active{color:var(--brand);border-left-color:var(--brand);font-weight:600}
.toc .toc-l3 a{padding-left:24px;font-size:12.5px}
.toc .toc-l4 a{padding-left:36px;font-size:12.5px}
/* Anchored headings must clear the sticky top bar when jumped to. */
.content h2,.content h3,.content h4{scroll-margin-top:72px}
@media(max-width:1180px){.toc,.toc-gap{display:none}}
/* Reader theme switch. Which glyph shows is driven by `data-theme-choice` on
   <html>, set by the inline head script before first paint, so the button never
   flickers through the wrong icon. Default (no attribute) = follow the device. */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;flex-shrink:0}
.theme-toggle:hover{color:var(--brand);background:var(--code)}
.theme-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.th-ico{display:none}
.th-auto{display:block}
[data-theme-choice="light"] .th-sun{display:block}
[data-theme-choice="light"] .th-auto{display:none}
[data-theme-choice="dark"] .th-moon{display:block}
[data-theme-choice="dark"] .th-auto{display:none}
[data-theme-choice="system"] .th-auto{display:block}
/* Social icons. --icon-bg is the knock-out colour used INSIDE a filled glyph
   (the "in" of LinkedIn, the play triangle of YouTube) so the mark reads
   correctly against whichever surface it sits on. */
.social{display:flex;align-items:center;gap:8px;--icon-bg:var(--bg)}
.social a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--muted);background:transparent}
.social a:hover{color:var(--brand);background:var(--code)}
.social-footer{--icon-bg:var(--sidebar)}
/* Picture-and-text band. `order` swaps the sides so the DOM order stays
   image-then-copy for screen readers and for the stacked mobile layout. */
.feature{--band-bg:var(--sidebar);--band-fg:var(--fg);background:var(--band-bg);color:var(--band-fg);padding:56px 20px;border-top:1px solid var(--border)}
.feature-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:48px;flex-wrap:wrap}
.feature-media{flex:1 1 320px;min-width:0;order:1}
.feature-media.right{order:3}
.feature-media img{width:100%;height:auto;border-radius:12px;display:block}
.feature-copy{flex:1 1 320px;min-width:0;order:2}
.feature-heading{margin:0;font-size:1.9rem;line-height:1.15;font-weight:700;border:0;padding:0;text-wrap:balance}
.feature-sub{margin-top:10px;font-size:1.05rem;font-weight:600;opacity:.85}
.feature-copy p{margin:12px 0 0;opacity:.9}
.feature-btn{display:inline-block;margin-top:20px;padding:10px 22px;border-radius:8px;background:var(--brand);color:#fff;text-decoration:none;font-weight:600}
.feature-btn:hover{opacity:.9}
/* Call-to-action band between the content and the footer. */
.promo{--promo-bg:var(--brand);--promo-fg:#fff;background-color:var(--promo-bg);background-size:cover;background-position:center;color:var(--promo-fg);padding:44px 20px}
.promo-inner{max-width:1200px;margin:0 auto}
.promo-headline{margin:0;font-size:1.7rem;line-height:1.25;font-weight:700;border:0;padding:0;text-wrap:balance}
.promo-sub{margin:8px 0 0;opacity:.9}
.promo-btn{display:inline-block;margin-top:18px;padding:10px 22px;border-radius:8px;background:var(--promo-fg);color:var(--promo-bg);text-decoration:none;font-weight:600}
.promo-btn:hover{opacity:.9}
.site-footer{border-top:1px solid var(--border);background:var(--sidebar);padding:20px}
.footer-cols{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;padding:12px 0 24px}
.footer-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.footer-col-title{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--fg);margin-bottom:2px}
.footer-col a{color:var(--muted);text-decoration:none;font-size:14px}
.footer-col a:hover{color:var(--brand)}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.footer-cols+.footer-inner{border-top:1px solid var(--border);padding-top:16px}
.footer-links{display:flex;flex-wrap:wrap;gap:16px}
.footer-links a{color:var(--muted);text-decoration:none;font-size:14px}
.footer-links a:hover{color:var(--brand)}
.footer-text{color:var(--muted);font-size:13px}
.search{position:relative;width:min(340px,42vw)}
#ds-input{width:100%;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--sidebar);color:var(--fg);font-size:14px}
#ds-input:focus{outline:none;border-color:var(--brand)}
.ds-results{display:none;position:absolute;top:44px;right:0;left:0;max-height:70vh;overflow-y:auto;background:var(--bg);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.18);z-index:20}
.ds-hit{display:block;padding:10px 12px;border-bottom:1px solid var(--border);text-decoration:none;color:var(--fg)}
.ds-hit:last-child{border-bottom:0}
.ds-hit:hover{background:var(--code)}
.ds-title{display:block;font-weight:600;font-size:14px}
.ds-snip{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.ds-snip mark{background:transparent;color:var(--fg);font-weight:700}
.ds-empty{padding:12px;font-size:13px;color:var(--muted)}
/* Narrow screens: the three-region top bar collapses to a single row (a centred
   logo has nowhere to be centred against), the sidebar stacks above the content,
   and the top-bar nav/social step aside for the search box. */
@media(max-width:820px){.shell{flex-direction:column}.sidebar{position:static;flex-basis:auto;width:100%;max-height:none;border-right:0;border-bottom:1px solid var(--border)}.content{padding:24px 20px}
.topbar{grid-template-columns:auto 1fr;gap:12px;padding:8px 14px}
.tb-center{justify-content:flex-end}.tb-end{grid-column:1 / -1;justify-content:flex-start}
.search{width:100%}.topnav{display:none}.social-topbar{display:none}
.promo{padding:32px 20px}.promo-headline{font-size:1.35rem}
.feature{padding:36px 20px}.feature-inner{gap:28px}.feature-heading{font-size:1.5rem}
/* Stacked: image first regardless of the chosen side — a picture below its own
   caption reads as belonging to the next block. */
.feature-media,.feature-media.right{order:1}.feature-copy{order:2}}