:root {
  --bg: #000000;
  --surface: #141414;
  --surface-2: #1c1c1c;
  --border: #2a2a2a;
  --border-2: #383838;
  --text: #f5f5f5;
  --muted: #a0a0a0;
  --faint: #6b6b6b;
  --brand: #a855f7;
  --brand-deep: #1d043d;
  --action: #c084fc;
  --action-strong: #a855f7;
  --gold: #f2cf7e;
  --danger: #f87171;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --topbar-h: 54px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 24px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--action); text-decoration: none; }
a:hover { color: #d8b4fe; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 3px; }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--surface-2); color: var(--text);
  padding: 8px 14px; border: 1px solid var(--border-2); border-radius: 6px;
  transition: top .15s ease;
}
.skip:focus { top: 12px; }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 40; height: var(--topbar-h);
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: rgba(6,6,6,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand img { height: 26px; width: auto; display: block; }
.brand-sub { color: var(--muted); font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .13em; }
.aux { margin-left: auto; display: flex; gap: 20px; font-size: .88rem; }
.aux a { color: var(--muted); }
.aux a:hover { color: var(--text); }

/* "You are reading an old snapshot" bar. Archive builds only. Sticks under
   the topbar, so it stays true no matter how far the reader scrolls. */
.archived-banner {
  position: sticky; top: var(--topbar-h); z-index: 39;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  padding: 10px 20px; font-size: .86rem; color: var(--text);
  background: rgba(24,19,8,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(242,207,126,.28);
}
.archived-banner strong { color: var(--gold); font-weight: 700; }
.archived-banner a { color: var(--gold); font-weight: 600; white-space: nowrap; }
.archived-banner a:hover { text-decoration: underline; }
.menu-btn {
  display: none; flex-direction: column; gap: 4px;
  width: 34px; height: 34px; padding: 8px 6px;
  background: transparent; border: 1px solid var(--border-2); border-radius: 6px; cursor: pointer;
}
.menu-btn span { height: 2px; background: var(--text); border-radius: 2px; }

/* Shell */
.shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); max-width: 1320px; margin: 0 auto; }
.sidebar {
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h));
  display: flex; flex-direction: column;
  padding: 26px 16px 0 22px; border-right: 1px solid var(--border);
}
/* Only the nav scrolls: that keeps the version picker below it parked at the
   bottom of the sidebar instead of scrolling away with a long nav. */
.sidebar > nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 28px; }
.nav-label { margin: 22px 0 8px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--faint); }
.nav-label:first-child { margin-top: 0; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li a {
  display: block; padding: 5px 10px; border-radius: 6px;
  color: var(--muted); font-size: .92rem; line-height: 1.4; border-left: 2px solid transparent;
}
.sidebar li a:hover { color: var(--text); }
.sidebar li a.active { color: var(--text); font-weight: 650; }
.has-children > ul { margin: 2px 0 2px 12px; padding-left: 8px; border-left: 1px solid var(--border); }
.has-children > ul a { font-size: .88rem; }

/* Sidebar foot: the two version-ish controls, parked below the nav where
   readers look for them. They answer different questions (which era of the web
   app UI is this, vs which release of the docs am I on) so they must not read
   as one control: each is its own labelled section with its own divider.

   Either can be absent (the toggle is web-app pages only, the picker needs an
   archive to exist), so the wrapper draws nothing itself and each section
   carries its own rule. With both gone the foot collapses to nothing. */
.sidebar-foot {
  flex: 0 0 auto; margin: 0 -16px 0 -22px; padding: 0 16px 0 22px;
  background: var(--bg);
}
.foot-sec { padding: 11px 0 13px; border-top: 1px solid var(--border); }
.foot-sec > .nav-label { margin: 0 0 7px; }

/* Release picker. Latest builds only, and only once an archive exists, so it
   is absent on a single-release site. Rendered last, so it holds the same spot
   on every page while the toggle above it comes and goes. */
.verpick { position: relative; }
.verpick > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--muted);
  font-size: .82rem; font-variant-numeric: tabular-nums;
}
.verpick > summary::-webkit-details-marker { display: none; }
.verpick > summary:hover, .verpick[open] > summary { border-color: var(--border-2); color: var(--text); }
/* Chevron points the way the menu opens: up when closed, down once open. */
.verpick > summary::after {
  content: ""; margin-left: auto; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-135deg); transform-origin: center;
}
.verpick[open] > summary::after { transform: rotate(45deg); }
/* Opens upward: the picker sits at the bottom of the viewport. */
.verpick ul {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 100%; max-height: 60vh; overflow-y: auto;
  margin: 0; padding: 5px; list-style: none;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.6);
}
.verpick li a {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  border-radius: 7px; color: var(--muted); font-size: .85rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.verpick li a:hover { background: var(--surface-2); color: var(--text); }
.verpick li a.is-current { color: var(--text); font-weight: 600; }
.ver-tag {
  padding: 1px 6px; border-radius: 5px; background: var(--surface-2);
  color: var(--faint); font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
}

/* Content */
.content { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 48px; padding: 44px 44px 80px; align-items: start; }
.content.no-toc { grid-template-columns: minmax(0, 1fr); }
article { max-width: 70ch; min-width: 0; }
article :where(h1, h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: calc(var(--topbar-h) + 24px);
}
article > :first-child { margin-top: 0; }
.eyebrow { margin: 0 0 10px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--brand); }
h1 { margin: 0 0 16px; font-size: 2.1rem; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.lead, article > p:first-of-type { font-size: 1.06rem; }
.lead { font-size: 1.12rem; color: #d8d8d8; margin: 0 0 8px; }
h2 { margin: 44px 0 14px; padding-top: 8px; font-size: 1.42rem; font-weight: 650; letter-spacing: -.01em; text-wrap: balance; border-top: 1px solid var(--border); padding-top: 28px; }
h2:first-of-type { }
h3 { margin: 32px 0 10px; font-size: 1.12rem; font-weight: 650; }
h4 { margin: 24px 0 8px; font-size: 1rem; font-weight: 650; color: #e8e8e8; }
p { margin: 0 0 16px; }
strong { color: #fff; font-weight: 650; }
article ul, article ol { margin: 0 0 16px; padding-left: 22px; }
article li { margin-bottom: 6px; }
hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }
article img { border-radius: 8px; }
article p > img { display: block; margin: 14px auto 24px; border: 1px solid var(--border); border-radius: 10px; }
/* Transparent light line-diagrams: brighten so they read on the black ground */
article img.diagram { filter: brightness(1.8) contrast(1.05); border: none; border-radius: 0; }

/* Version toggle (before / after the July 2026 UI rebuild) */
/* Web-app era toggle, in the sidebar foot. Stacked rather than the side-by-side
   bar it was as a content-area header: "Before July 2026" does not fit beside
   its sibling in a 250px column. Its label comes from .foot-sec > .nav-label. */
.verbar {
  display: flex; flex-direction: column; gap: 2px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
}
.verbar-opt { padding: 5px 9px; border-radius: 6px; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.verbar-opt.active { background: var(--surface-2); color: var(--text); font-weight: 600; }
a.verbar-opt:hover { color: var(--text); background: var(--surface-2); }

/* Link cards for section landing pages */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 8px; }
.cards .card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 15px 17px; color: var(--text); transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.cards .card:hover { border-color: var(--border-2); background: var(--surface-2); transform: translateY(-2px); color: var(--text); }
.cards .card .card-name { display: block; font-weight: 650; margin-bottom: 3px; }
.cards .card .card-desc { display: block; color: var(--muted); font-size: .9rem; line-height: 1.45; }

/* Anchor links on headings */
.headerlink { color: var(--faint); margin-left: 8px; opacity: 0; font-weight: 400; text-decoration: none; }
h2:hover .headerlink, h3:hover .headerlink { opacity: 1; }

/* Home hero + pole cards */
.pole-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin: 22px 0 8px; }
.pole-card {
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 18px 20px; text-align: center; color: var(--text);
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.pole-card:hover { border-color: var(--border-2); background: var(--surface-2); transform: translateY(-2px); color: var(--text); }
.pole-stack { position: relative; height: 360px; text-align: center; overflow: hidden; }
.pole-stack .base { height: 340px; width: auto; margin: 0 auto; filter: drop-shadow(0 0 10px rgba(120,120,120,.35)); display: block; }
.pole-stack .overlay { position: absolute; left: 50%; transform: translateX(-50%); width: auto; height: 340px; pointer-events: none; mix-blend-mode: screen; }
.pole-card h3 { margin: 14px 0 4px; font-size: 1.06rem; }
.pole-card p { margin: 0 0 12px; color: var(--muted); font-size: .9rem; }
.pole-card .btn { margin-top: auto; }

.btn {
  display: inline-block; padding: 7px 15px; border-radius: 7px;
  background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.32);
  color: var(--action); font-size: .86rem; font-weight: 550;
}
.btn:hover { background: rgba(59,130,246,.2); color: #bfdbfe; }

/* Generic split (image + text) rows used across pages */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; margin: 22px 0; }
.split img { border-radius: 10px; border: 1px solid var(--border); }
@media (max-width: 640px) { .split { grid-template-columns: 1fr; } }

/* Steps */
.steps { margin: 0 0 20px; padding-left: 0 !important; list-style: none; counter-reset: s; }
.steps li { position: relative; padding: 3px 0 3px 40px; margin-bottom: 8px; counter-increment: s; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 2px;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 50%;
  font-size: .8rem; font-weight: 600; color: var(--action); font-variant-numeric: tabular-nums;
}

/* Callouts: NO left-border accent stripe (uniform border + pill tag + subtle tint) */
.note { margin: 20px 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.note > :last-child { margin-bottom: 0; }
.note-tag { margin-right: 8px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.note p { margin: 0; color: #dcdcdc; font-size: .95rem; display: inline; }
.note-gold .note-tag { color: var(--gold); }
.note-red .note-tag { color: var(--danger); }

/* Code */
code { font-family: var(--mono); font-size: .86em; background: var(--surface-2); border: 1px solid var(--border); padding: .1em .4em; border-radius: 5px; color: #e6d3ec; }
pre { margin: 18px 0 22px; padding: 15px 16px; background: #0c0c0c; border: 1px solid var(--border); border-radius: 9px; overflow-x: auto; }
pre code { background: none; border: none; padding: 0; color: #d6d6d6; font-size: .86rem; line-height: 1.7; }

/* Tables */
article table { border-collapse: collapse; width: 100%; font-size: .92rem; margin: 18px 0 24px; display: block; overflow-x: auto; }
article th { text-align: left; padding: 10px 14px; background: var(--surface); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
article td { padding: 9px 14px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
article tr:last-child td { border-bottom: none; }

.doc-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); font-size: .85rem; color: var(--faint); flex-wrap: wrap; gap: 10px; }

/* Right TOC */
.toc-rail { position: sticky; top: calc(var(--topbar-h) + 44px); align-self: start; }
.toc-rail > .nav-label { margin-top: 0; }
.toc-rail ul { list-style: none; margin: 0; padding: 0; }
.toc-rail ul ul { padding-left: 12px; }
.toc-rail li a { display: block; padding: 4px 0 4px 12px; color: var(--muted); font-size: .85rem; border-left: 2px solid var(--border); }
.toc-rail li a:hover { color: var(--text); border-left-color: var(--border-2); }

/* Responsive */
@media (max-width: 1080px) { .content { grid-template-columns: minmax(0,1fr); padding: 36px 32px 70px; } .toc-rail { display: none; } }
@media (max-width: 760px) {
  .menu-btn { display: flex; }
  .shell { grid-template-columns: minmax(0,1fr); }
  .sidebar { position: fixed; top: var(--topbar-h); left: 0; z-index: 30; width: 270px; max-width: 82vw; background: #080808; transform: translateX(-102%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .content { padding: 28px 22px 60px; }
  h1 { font-size: 1.7rem; }
  .aux { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .pole-card, .skip { transition: none; } }

/* Expandable screenshots (hover to reveal Expand, click for lightbox) */
.zoomable-wrap {
  position: relative; display: block; width: fit-content; max-width: 100%;
  margin: 14px auto 24px; cursor: zoom-in;
}
.zoomable-wrap > img {
  display: block; margin: 0; max-width: 100%;
  border: 1px solid var(--border); border-radius: 10px;
}
.zoom-hint {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 7px;
  background: rgba(10,10,10,.72); color: #fff;
  font-size: .74rem; font-weight: 500;
  border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(-3px);
  transition: opacity .15s ease, transform .15s ease; pointer-events: none;
}
.zoomable-wrap:hover .zoom-hint,
.zoomable-wrap:focus-visible .zoom-hint { opacity: 1; transform: none; }
.zoom-hint svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0,0,0,.86); cursor: zoom-out;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.lightbox.open { visibility: visible; opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 96vw; max-height: 94vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) { .zoom-hint, .lightbox { transition: none; } }