/* Layout: dark-first docs shell. Sticky top bar, home = hero + ladder-style topic index + indicator library;
   articles = left section nav, centre article with annotated screenshot, right on-page contents. */
:root {
  color-scheme: dark;
  --bg: #0b0c0e;
  --surface: #131518;
  --surface-2: #1a1d21;
  --surface-3: #22262b;
  --line: #262a30;
  --line-strong: #353a41;
  --fg: #e4e5e7;
  --fg-2: #9ba2ab;
  --fg-3: #6c737d;
  --accent: #6fd3da;
  --accent-soft: rgba(111, 211, 218, 0.12);
  --accent-ink: #0b0c0e;
  --pin: #f2c14e;
  --pin-ink: #15120a;
  --buy: #5b9cf6;
  --sell: #f7525f;
  --ok: #7bcfba;
  --warn: #d8a64e;
  --shadow: 0 1px 0 rgba(255,255,255,0.03), 0 18px 40px -24px rgba(0,0,0,0.8);

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --top: env(safe-area-inset-top, 0px);
}
:root[data-hc="light"] {
  color-scheme: light;
  --bg: #f5f6f7;
  --surface: #ffffff;
  --surface-2: #eef0f2;
  --surface-3: #e4e7ea;
  --line: #dde0e4;
  --line-strong: #c7ccd2;
  --fg: #15181b;
  --fg-2: #535a63;
  --fg-3: #7d848d;
  --accent: #0a6f7a;
  --accent-soft: rgba(10, 111, 122, 0.09);
  --accent-ink: #ffffff;
  --pin: #f2c14e;
  --pin-ink: #15120a;
  --buy: #1f5fd6;
  --sell: #c53b45;
  --ok: #1f8a6e;
  --warn: #a5741c;
  --shadow: 0 1px 2px rgba(20,24,28,0.05), 0 18px 40px -26px rgba(20,24,28,0.35);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 84px; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-display); font-stretch: 108%; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
p, li, td, dd { text-wrap: pretty; }
kbd {
  font: 600 11.5px/1 var(--f-mono);
  padding: 3px 6px 4px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  background: var(--surface-2);
  color: var(--fg);
}
code { font: 13px var(--f-mono); background: var(--surface-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: 1320px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }

/* theme-swapped screenshots */
.shot-light { display: none; }
:root[data-hc="light"] .shot-dark { display: none; }
:root[data-hc="light"] .shot-light { display: block; }

/* ---------- top bar ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: var(--top); z-index: 30; background: var(--bg); }
.bar {
  position: sticky; top: var(--top); z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar .wrap { display: flex; align-items: center; gap: 16px; height: 60px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--fg); flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand svg { height: 18px; width: auto; display: block; }
.brand span {
  font: 600 11px/1 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2);
  padding-left: 12px; border-left: 1px solid var(--line-strong);
}
.bar-search { flex: 1; max-width: 460px; margin-left: auto; position: relative; }
.bar-search input { height: 36px; font-size: 14px; }
.bar-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  height: 36px; min-width: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--fg);
}
.icon-btn:hover { border-color: var(--line-strong); text-decoration: none; }
.icon-btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-primary:hover { opacity: 0.9; }
.theme-label { display: inline; }

/* search field + results */
.search { position: relative; }
.search input {
  width: 100%; height: 52px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--fg); padding: 0 92px 0 44px; font: 16px var(--f-body);
}
.search input::placeholder { color: var(--fg-3); }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search .lens { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--fg-3); pointer-events: none; }
.search .hint { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; pointer-events: none; }
.bar-search .search .lens { left: 12px; width: 15px; }
.bar-search .search input { padding-left: 36px; padding-right: 70px; }
.results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow);
  max-height: 360px; overflow: auto; padding: 6px;
}
.results a { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 9px 10px; border-radius: 7px; color: var(--fg); }
.results a:hover, .results a.active { background: var(--surface-2); text-decoration: none; }
.results small { color: var(--fg-3); font-size: 12px; }
.results .empty { padding: 12px; color: var(--fg-2); font-size: 14px; }

/* ---------- views ---------- */
.view[hidden] { display: none !important; }
.eyebrow { font: 600 11px/1 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px;
  font: 600 10.5px/1 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--line-strong); color: var(--fg-2); white-space: nowrap;
}
.tag.beta { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.tag.addon { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* home hero */
/* Clip sideways only: the search results drop below the hero. */
.hero { padding-block: 56px 40px; border-bottom: 1px solid var(--line); overflow-x: clip; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.04; font-weight: 700; margin: 14px 0 16px; }
.hero p.lead { color: var(--fg-2); font-size: 17px; max-width: 46ch; margin: 0 0 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--line); background: transparent;
  font-size: 13px; color: var(--fg-2); cursor: pointer;
}
.chip:hover { color: var(--fg); border-color: var(--line-strong); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.hero-shot {
  position: relative; border-radius: 12px; border: 1px solid var(--line-strong); overflow: hidden; box-shadow: var(--shadow);
  aspect-ratio: 16 / 10; max-width: 100%;
}
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hero-shot figcaption {
  position: absolute; left: 12px; bottom: 12px; font: 600 11px var(--f-mono);
  background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--fg-2); padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line);
}

section.block { padding-block: 48px 8px; }
.block-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.block-head h2 { font-size: 26px; font-weight: 700; }
.block-head p { margin: 6px 0 0; color: var(--fg-2); max-width: 60ch; }

/* start here: real sequence */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: s; }
.step {
  display: block; padding: 18px 18px 20px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg);
}
.step:hover { border-color: var(--line-strong); text-decoration: none; }
.step .n { font: 600 12px var(--f-mono); color: var(--accent); }
.step h3 { font-size: 17px; margin: 10px 0 6px; font-weight: 650; }
.step p { margin: 0; color: var(--fg-2); font-size: 14px; }

/* ladder topic index: rows like a DOM, article count drawn as a volume bar */
.ladder { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.ladder-head, .ladder-row { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(0, 2.4fr) 120px; align-items: center; }
.ladder-head { font: 600 10.5px/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ladder-head div { padding: 10px 16px; }
.ladder-row { border-bottom: 1px solid var(--line); }
.ladder-row:last-child { border-bottom: 0; }
.ladder-row:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.ladder-row > div { padding: 14px 16px; min-width: 0; }
.ladder-row h3 { font-size: 15.5px; font-weight: 650; }
.ladder-row h3 a { color: var(--fg); }
.ladder-row .sub { color: var(--fg-3); font-size: 12.5px; margin-top: 2px; }
.ladder-row .links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.ladder-row .links a { color: var(--fg-2); }
.ladder-row .links a:hover { color: var(--accent); }
.vol { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.vol i { display: block; height: 14px; background: color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 2px; }
.vol b { font: 600 13px var(--f-mono); color: var(--fg); min-width: 22px; text-align: right; }

/* indicator library */
.lib-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ind { box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); background: var(--surface); padding: 16px 18px 18px; display: grid; gap: 6px; align-content: start; color: var(--fg); min-width: 0; }
.ind:hover { background: var(--surface-2); text-decoration: none; }
.ind .top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ind h3 { font-size: 15.5px; font-weight: 650; }
.ind p { margin: 0; color: var(--fg-2); font-size: 13.5px; line-height: 1.5; }
.ind .cat { font: 500 11.5px var(--f-mono); color: var(--fg-3); }

/* help strip */
.helpline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.helpline > div { padding: 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.helpline h3 { font-size: 16px; margin-bottom: 4px; }
.helpline p { margin: 0; color: var(--fg-2); font-size: 14px; }

footer.foot { margin-top: 56px; border-top: 1px solid var(--line); padding-block: 22px 40px; color: var(--fg-3); font-size: 13px; }
footer.foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- article shell ---------- */
.doc { display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; gap: 40px; padding-block: 28px 0; }
.side { position: sticky; top: calc(var(--top) + 84px); align-self: start; max-height: calc(100vh - 110px); overflow: auto; font-size: 14px; padding-right: 4px; }
.side .grp { margin-bottom: 18px; }
.side .grp > div { margin-bottom: 6px; }
.side a { display: block; padding: 5px 10px; border-radius: 6px; color: var(--fg-2); }
.side a:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; }
.side a[aria-current="page"] { background: var(--accent-soft); color: var(--fg); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.toc { position: sticky; top: calc(var(--top) + 84px); align-self: start; font-size: 13px; }
.toc a { display: block; color: var(--fg-2); padding: 4px 0 4px 12px; border-left: 1px solid var(--line); }
.toc a:hover { color: var(--fg); text-decoration: none; border-left-color: var(--fg-3); }
.toc .eyebrow { margin-bottom: 10px; }
.toc .open-app { margin-top: 20px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--fg-2); font-size: 12.5px; line-height: 1.5; }

article { min-width: 0; max-width: 760px; }
.crumbs { font-size: 13px; color: var(--fg-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crumbs a { color: var(--fg-2); }
article h1 { font-size: clamp(30px, 3.6vw, 40px); font-weight: 700; line-height: 1.08; margin: 14px 0 12px; }
article .lead { font-size: 17.5px; color: var(--fg-2); margin: 0 0 18px; max-width: 62ch; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--fg-3); padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.meta b { color: var(--fg-2); font-weight: 600; }
article h2 { font-size: 23px; font-weight: 700; margin: 44px 0 12px; }
article h3 { font-size: 17px; font-weight: 650; margin: 26px 0 8px; }
article p, article li { color: var(--fg); }
article p { margin: 0 0 14px; max-width: 68ch; }
article ol, article ul { padding-left: 22px; margin: 0 0 16px; }
article li { margin-bottom: 6px; }
article li::marker { color: var(--fg-3); font-family: var(--f-mono); font-size: 13px; }
.ui { font-weight: 650; color: var(--fg); background: var(--surface-2); padding: 0 5px; border-radius: 4px; border: 1px solid var(--line); white-space: nowrap; font-size: 0.94em; }

.note { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 14px 16px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); margin: 18px 0; font-size: 14.5px; }
.note svg { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.note.warn svg { color: var(--warn); }
.note p { margin: 0; color: var(--fg-2); }
.note p strong { color: var(--fg); }

/* annotated figure */
.fig { margin: 22px 0 8px; }
.fig-frame { position: relative; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: var(--surface); max-width: 100%; }
.fig-frame img { width: 100%; display: block; }
.fig-frame .shot-light { display: none; }
:root[data-hc="light"] .fig-frame .shot-dark { display: none; }
:root[data-hc="light"] .fig-frame .shot-light { display: block; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pin); color: var(--pin-ink); font: 700 11px/1 var(--f-mono);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4); cursor: pointer; border: 0; padding: 0;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pin.sm { width: 18px; height: 18px; font-size: 10px; }
.pin.hot, .pin:hover { transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 0 3px var(--fg), 0 2px 8px rgba(0,0,0,0.5); }
.fig figcaption { font-size: 13px; color: var(--fg-3); margin-top: 8px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.legend { list-style: none; padding: 0; margin: 14px 0 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; }
.legend li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 7px 8px; border-radius: 7px; margin: 0; cursor: default; }
.legend li.hot { background: var(--surface-2); }
.legend .num { width: 22px; height: 22px; border-radius: 50%; background: var(--pin); color: var(--pin-ink); font: 700 11px/22px var(--f-mono); text-align: center; }
.legend b { font-weight: 650; }
.legend span { color: var(--fg-2); font-size: 14px; }
.legend-group { grid-column: 1 / -1; padding: 10px 8px 4px !important; display: block !important; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin: 14px 0 20px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 520px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 10.5px/1.2 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
td:first-child { white-space: nowrap; }
td .col { font: 600 12.5px var(--f-mono); color: var(--fg); }
td.muted { color: var(--fg-2); }

.formula { font: 15px/1.5 var(--f-mono); padding: 16px 18px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); margin: 12px 0 18px; overflow-x: auto; }
.formula .frac { display: inline-grid; vertical-align: middle; text-align: center; margin-left: 8px; }
.formula .frac span:first-child { border-bottom: 1px solid var(--fg-3); padding: 0 6px 3px; }
.formula .frac span:last-child { padding: 3px 6px 0; }

.glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 26px; }
.glance > div { padding: 14px 16px; border-right: 1px solid var(--line); background: var(--surface); }
.glance > div:last-child { border-right: 0; }
.glance dt { font: 600 10.5px/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.glance dd { margin: 0; font-size: 14px; }

.related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.related a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--fg); background: var(--surface); font-weight: 600; font-size: 14.5px; }
.related a small { display: block; color: var(--fg-3); font-weight: 400; font-size: 12.5px; margin-top: 2px; }
.related a:hover { border-color: var(--line-strong); text-decoration: none; }

.helpful { margin-top: 36px; padding: 16px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.helpful p { margin: 0; font-weight: 600; }
.helpful .btns { display: flex; gap: 8px; }

/* opened-from-app banner */
.appbar { background: var(--accent-soft); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-size: 13.5px; }
.appbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; flex-wrap: wrap; padding-block: 6px; }
.appbar b { color: var(--fg); }
.appbar span { color: var(--fg-2); }

/* in-app spec */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); align-items: stretch; margin: 18px 0 24px; }
.flow .stage { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 14px; min-width: 0; }
.flow .stage .eyebrow { margin-bottom: 10px; }
.flow .arrow { display: grid; place-items: center; color: var(--fg-3); }
.flow .arrow svg { width: 20px; height: 20px; }
.mini-dlg { border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; font-size: 12.5px; background: var(--bg); }
.mini-dlg .hd { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-weight: 600; }
.mini-dlg .hd .q { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); display: grid; place-items: center; font: 700 11px var(--f-mono); box-shadow: 0 0 0 4px var(--accent-soft); }
.mini-dlg .row { display: flex; justify-content: space-between; padding: 7px 10px; color: var(--fg-2); border-bottom: 1px solid var(--line); }
.mini-dlg .row:last-child { border-bottom: 0; }
.url { font: 12.5px/1.5 var(--f-mono); word-break: break-all; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 10px; }
.url em { font-style: normal; color: var(--accent); }
.sim { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; z-index: 50; box-shadow: var(--shadow);
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .doc { grid-template-columns: 220px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .side { position: static; max-height: none; margin-bottom: 18px; display: none; }
  .ladder-head { display: none; }
  .ladder-row { grid-template-columns: minmax(0, 1fr) 90px; }
  .ladder-row .links { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
  .ladder-row > div.links { padding-top: 0; }
  .helpline { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flow .arrow { height: 34px; transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .bar-search, .theme-label, .open-label { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .legend { grid-template-columns: minmax(0, 1fr); }
  .glance { grid-template-columns: minmax(0, 1fr); }
  .glance > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .related { grid-template-columns: minmax(0, 1fr); }
  .pin { width: 16px; height: 16px; font-size: 8.5px; }
  .hero { padding-block: 32px 28px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- build additions ---------- */
.note.beta svg { color: var(--warn); }
.note p + p { margin-top: 8px; }
.fig-frame.placeholder { aspect-ratio: 16 / 9; display: grid; place-items: center; border-style: dashed; background: var(--surface); }
.fig-frame.placeholder div { text-align: center; color: var(--fg-3); font-size: 13.5px; padding: 18px; max-width: 46ch; }
.fig-frame.placeholder b { display: block; color: var(--fg-2); font: 600 11px/1 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.legend .num.off { background: var(--surface-3); color: var(--fg-3); }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.pager a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--fg); font-weight: 600; font-size: 14.5px; }
.pager a small { display: block; color: var(--fg-3); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 2px; }
.pager a.next { text-align: right; grid-column: 2; }
.pager a:hover { border-color: var(--line-strong); text-decoration: none; }
.sec-head { padding-block: 40px 24px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.sec-head h1 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; margin: 12px 0 8px; }
.sec-head p { color: var(--fg-2); margin: 0; font-size: 16.5px; }
.sec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); margin-top: 24px; }
.sec-list a { display: block; padding: 16px 18px; color: var(--fg); box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); min-width: 0; }
.sec-list a:hover { background: var(--surface-2); text-decoration: none; }
.sec-list a b { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-stretch: 108%; font-size: 16px; font-weight: 650; }
.sec-list a span { display: block; color: var(--fg-2); font-size: 14px; margin-top: 4px; }
.appbar .dismiss { height: 30px; }
.legend { margin-top: 10px; }
article table { min-width: 480px; }
article .glance dd { color: var(--fg); }
@media (max-width: 640px) {
  .sec-list { grid-template-columns: minmax(0, 1fr); }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager a.next { grid-column: 1; }
}
.fig-scroll { overflow-x: auto; border-radius: 10px; }
.fig-zoom-wrap + .fig-zoom-wrap { margin-top: 12px; }
.fig-pins { position: relative; height: 30px; }
.fig-pins .pin { top: 11px !important; }
.fig-pins .pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 8px; background: var(--pin); transform: translateX(-50%); }
@media (max-width: 640px) { .fig-pins .pin::after { height: 11px; } }
/* Images keep their own aspect ratio; width/height attributes only reserve space. */
.fig-frame img { height: auto; }
.fig-frame { margin-inline: 0; }

/* ---------- inside the app's help drawer (?embed=1, set by site.js) ----------
   No site header, side nav, contents or footer: the drawer has its own. The search stays at the
   top, and nothing scrolls sideways at any drawer width. The frame is as wide as the drawer, so
   these media queries follow its resize handle. */
:root[data-embed] { --top: 0px; }
:root[data-embed] body::before { display: none; }
:root[data-embed] :is(.bar .brand, .bar-actions, .appbar, .side, .toc, footer.foot, .pager, .meta) { display: none !important; }
:root[data-embed] .bar { top: 0; }
:root[data-embed] .bar .wrap { height: 56px; max-width: none; }
:root[data-embed] .bar-search { display: block; flex: 1; max-width: none; margin: 0; }
:root[data-embed] .bar-search .search input { padding-right: 12px; }
:root[data-embed] .search .hint { display: none; }
:root[data-embed], :root[data-embed] body { overflow-x: clip; }
:root[data-embed] .doc { display: block; padding: 14px 0 32px; }
:root[data-embed] .sec-head { padding-block: 22px 18px; }
:root[data-embed] article { max-width: none; overflow-wrap: break-word; }
:root[data-embed] :is(article h2, article h3) { scroll-margin-top: 72px; }
:root[data-embed] .ui { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:root[data-embed] code { overflow-wrap: anywhere; }
:root[data-embed] .formula { overflow: visible; white-space: normal; }
:root[data-embed] .fig-frame img { cursor: zoom-in; }
:root[data-embed] .table-wrap { overflow: visible; }
:root[data-embed] table { min-width: 0; }
:root[data-embed] td:first-child { white-space: normal; }
:root[data-embed] .arrived { animation: hc-arrived 2.4s ease; border-radius: 6px; }
@keyframes hc-arrived {
  0%, 45% { background: var(--accent-soft); box-shadow: 0 0 0 6px var(--accent-soft); }
  100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}
/* The default drawer is half the window: a centred reading column like the site. */
@media (min-width: 640px) {
  :root[data-embed] .wrap { max-width: 820px; padding-left: 32px; padding-right: 32px; }
  :root[data-embed] article { font-size: 15.5px; }
  :root[data-embed] article h1 { font-size: 30px; margin: 8px 0 10px; }
  :root[data-embed] article .lead { font-size: 16.5px; }
  :root[data-embed] article h2 { font-size: 21px; margin: 38px 0 10px; }
}
/* A narrow drawer: tighter type, one-column legends, wide tables as one block per row. */
@media (max-width: 639px) {
  :root[data-embed] .wrap { max-width: none; padding-left: 18px; padding-right: 18px; }
  :root[data-embed] .bar .wrap { height: 52px; padding: 0 14px; }
  :root[data-embed] article { font-size: 14.5px; }
  :root[data-embed] article h1 { font-size: 24px; margin: 6px 0 8px; }
  :root[data-embed] article .lead { font-size: 15px; margin-bottom: 16px; }
  :root[data-embed] article h2 { font-size: 18px; margin: 30px 0 8px; }
  :root[data-embed] article h3 { font-size: 15.5px; }
  :root[data-embed] .formula { font-size: 13.5px; padding: 12px 14px; }
  :root[data-embed] .legend { grid-template-columns: minmax(0, 1fr); }
  :root[data-embed] .sec-list { grid-template-columns: minmax(0, 1fr); }
  :root[data-embed] table { font-size: 13.5px; }
  :root[data-embed] :is(th, td) { padding: 8px 10px; }
  :root[data-embed] table.stacked thead { display: none; }
  :root[data-embed] :is(table.stacked, table.stacked tbody, table.stacked tr, table.stacked td) { display: block; width: auto; }
  :root[data-embed] table.stacked tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  :root[data-embed] table.stacked tr:last-child { border-bottom: 0; }
  :root[data-embed] table.stacked td { padding: 2px 0; border: 0; }
  :root[data-embed] table.stacked td:first-child { font-weight: 650; padding-bottom: 4px; }
  :root[data-embed] table.stacked td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font: 600 10px/1.4 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin-top: 4px; }
}