/* OORR AI — developer documentation, hosted by Radiant.
   ---------------------------------------------------------------------------
   Design: engineering terminal. Pure black, hairline white rules, monospace
   throughout, square corners, and exactly one accent — signal yellow — spent
   only on live state and active markers.

   Nothing glows and nothing is coloured for decoration. Structure is drawn the
   way a schematic is drawn: numbered index down the left, dotted routing lines
   between blocks, bracketed labels, and a wireframe globe as
   the one piece of instrumentation on the page.

   Motion is decorative throughout and every animation is disabled under
   `prefers-reduced-motion`, where each element resolves to its finished state.
   --------------------------------------------------------------------------- */

:root{
  /* canvas — true black, as measured off the reference */
  --bg:#000;

  /* ink: white headings, grey body, dim structure */
  --ink:#ededed;
  --text:#8c8c8c;
  --dim:#5a5a5a;
  --dimmer:#333;

  /* the only accent on the page */
  --accent:#e8f55e;
  --accent-dim:rgba(232,245,94,.42);

  /* structure */
  --line:rgba(255,255,255,.16);
  --line-soft:rgba(255,255,255,.08);
  --line-faint:rgba(255,255,255,.045);
  --panel:rgba(255,255,255,.012);

  --ease:cubic-bezier(.22,.8,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --bar:58px;
  --sidebar:250px;
  --gutter:clamp(18px,2.6vw,46px);
  --measure:82ch;
  --measure-wide:1080px;
  --toc:208px;

  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","DejaVu Sans Mono",monospace;
  --sans:"Helvetica Neue",Helvetica,Arial,ui-sans-serif,system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; background:var(--bg); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  /* the reference sets everything but the headline in monospace */
  font-family:var(--mono);
  font-size:13.5px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--accent); color:#000; }

a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--accent); }

:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0;
  background:#000; color:var(--ink); padding:10px 16px; z-index:60;
  border:1px solid var(--accent);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
.skip:focus{ left:12px; top:12px; }

/* ================================================================ top bar ===
   Left: slash-prefixed links. Centre: the wordmark. Right: bracketed actions. */

.topbar{
  position:sticky; top:0; z-index:40;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  height:var(--bar);
  padding:0 clamp(14px,2.4vw,28px);
  background:#000;
  border-bottom:1px solid var(--line);
}

.navset{ display:flex; align-items:center; gap:20px; min-width:0; }
.navlink{
  font-size:11px; letter-spacing:.06em;
  color:var(--text);
  white-space:nowrap;
}
.navlink::before{ content:"// "; color:var(--dimmer); }
.navlink:hover{ color:var(--ink); }
.navlink:hover::before{ color:var(--accent); }
.navlink.is-here{ color:var(--ink); }
.navlink.is-here::before{ color:var(--accent); }

.brand{ display:flex; align-items:center; gap:8px; justify-self:center; }
.brand:hover{ color:inherit; }
.brand img{ width:19px; height:auto; display:block; }
.brand b{
  font-family:var(--sans);
  font-size:15px; font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
  white-space:nowrap;
}
.brand b i{ font-style:normal; font-weight:400; color:var(--text); }

.topbar-end{ justify-self:end; display:flex; align-items:center; gap:10px; }

/* bracketed action, e.g. `.open {OORR.AI}` */
.bracket{
  display:inline-flex; align-items:center;
  border:1px solid var(--line);
  padding:7px 13px;
  font-size:10.5px; letter-spacing:.08em;
  color:var(--text);
  background:transparent;
  white-space:nowrap;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.bracket em{ font-style:normal; color:var(--ink); }
.bracket:hover{ color:var(--ink); border-color:var(--ink); text-decoration:none; }
.bracket:hover em{ color:var(--accent); }

.navtoggle{
  display:none;
  align-items:center; gap:8px;
  appearance:none; cursor:pointer;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.08em;
  padding:7px 12px;
  -webkit-tap-highlight-color:transparent;
}
.navtoggle:hover{ color:var(--ink); border-color:var(--ink); }
.navtoggle svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.4; }

/* ================================================================= layout === */

.layout{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,1fr);
  align-items:start;
}

/* ============================================================ index rail ===
   The reference lists its sections as bare numbers down the left edge, dim
   until current, with a tick rule drawn out to the active one. The docs need
   labels as well, so the number leads and the label follows. */

.sidebar{
  position:sticky; top:var(--bar);
  height:calc(100svh - var(--bar));
  overflow-y:auto;
  padding:26px 14px 40px 0;
  border-right:1px solid var(--line);
  background:#000;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.14) transparent;
}
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); }

.sb-title{
  display:flex; align-items:center; gap:10px;
  margin:0 0 18px clamp(14px,1.6vw,22px);
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dimmer);
}
.sb-title::before{ content:"//"; color:var(--dimmer); }
.sb-title b{ margin-left:auto; margin-right:14px; font-weight:400; color:var(--dimmer); }

.sb-list{ list-style:none; margin:0; padding:0; }
.sb-list a{
  position:relative;
  display:grid; grid-template-columns:26px minmax(0,1fr); align-items:center;
  gap:12px;
  padding:8px clamp(14px,1.6vw,22px) 8px clamp(14px,1.6vw,22px);
  font-size:12.5px; letter-spacing:.02em;
  color:var(--dim);
  transition:color .2s var(--ease);
}
/* the tick rule that reaches out to the current entry */
.sb-list a::before{
  content:""; position:absolute;
  left:0; top:50%; width:0; height:1px;
  background:var(--ink);
  transition:width .3s var(--ease);
}
.sb-idx{
  font-style:normal;
  font-size:11px; letter-spacing:.04em;
  color:var(--dimmer);
  transition:color .2s var(--ease);
}
.sb-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.sb-list a:hover{ color:var(--ink); }
.sb-list a:hover .sb-idx{ color:var(--text); }
.sb-list a:hover::before{ width:8px; background:var(--dim); }

.sb-list a.is-current{ color:var(--ink); }
.sb-list a.is-current .sb-idx{ color:var(--ink); }
.sb-list a.is-current::before{ width:calc(clamp(14px,1.6vw,22px) - 4px); background:var(--ink); }

/* ----------------------------------------------------- routing connector ---
   A dotted line that leaves the index, turns a corner and carries on — the
   schematic routing the reference runs between its blocks. Used here as the
   divider between the index and the diagnostics module. */

.route{ display:block; margin:16px clamp(14px,1.6vw,22px) 14px 0; }
.route svg{ display:block; width:100%; height:auto; overflow:visible; }
.route path{
  fill:none; stroke:var(--line); stroke-width:1;
  stroke-dasharray:2 4;
  animation:routeFlow 14s linear infinite;
}
.route .node{ fill:none; stroke:var(--dim); stroke-width:1; }
.route .bolt{ fill:none; stroke:var(--dim); stroke-width:1; stroke-linecap:round; }
.route .pip{ fill:var(--accent); }

/* ========================================================= status legend ===
   A diagnostics block, drawn as an instrument: corner ticks, a bracketed
   heading, one row per state. The glyph behaves the way the state does — live
   pulses, pending sweeps a quarter turn, UI-only sits as an unwired outline —
   and each row traces its status through the page when pointed at. */

.legend{
  position:relative;
  margin:0 clamp(14px,1.6vw,22px) 0 clamp(14px,1.6vw,22px);
  padding:13px 12px 11px;
  border:1px solid var(--line-soft);
  background:var(--panel);
}
/* corner ticks, drawn rather than rounded */
.legend-frame{
  position:absolute; inset:-1px; pointer-events:none;
  background:
    linear-gradient(var(--ink),var(--ink)) left  0 top    0/7px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) left  0 top    0/1px 7px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right 0 top    0/7px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right 0 top    0/1px 7px no-repeat,
    linear-gradient(var(--ink),var(--ink)) left  0 bottom 0/7px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) left  0 bottom 0/1px 7px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right 0 bottom 0/7px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right 0 bottom 0/1px 7px no-repeat;
  opacity:.5;
}

.legend-head{ display:flex; align-items:center; gap:8px; margin:0 0 12px; }
.legend-title{
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text);
}
.legend-title::before{ content:"{ "; color:var(--dimmer); }
.legend-title::after{ content:" }"; color:var(--dimmer); }
.legend-led{
  margin-left:auto; width:4px; height:4px;
  background:var(--accent);
  animation:ledBlink 3.4s steps(1,end) infinite;
}

.legend-list{ list-style:none; margin:0; padding:0; }

.lg{
  position:relative;
  display:grid; grid-template-columns:16px minmax(0,1fr); align-items:center;
  gap:10px;
  width:100%;
  appearance:none; background:transparent; border:0;
  padding:7px 4px;
  text-align:left; cursor:pointer;
  font:inherit; color:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s var(--ease);
}
.lg:hover,.lg:focus-visible{ background:rgba(255,255,255,.04); }
.lg[aria-pressed="true"]{ background:rgba(255,255,255,.06); }

.lg-text{ display:grid; gap:1px; min-width:0; }
.lg-text b{
  font-weight:400;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tone,var(--ink));
}
.lg-text em{
  font-style:normal; font-size:9.5px; line-height:1.5;
  color:var(--dimmer);
}

.lg-glyph{ position:relative; display:block; width:16px; height:16px; }

/* three states, three tones — and the tones are only ever yellow, white, grey */
.lg--live{ --tone:var(--accent); }
.lg--pending{ --tone:var(--ink); }
.lg--ui{ --tone:var(--dim); }

/* live: a filled signal, pulsing */
.lg--live .g-core{
  position:absolute; inset:5px;
  background:var(--accent);
}
.lg--live .g-ring{
  position:absolute; inset:1px;
  border:1px solid var(--accent-dim);
  animation:ping 2.6s var(--ease-out) infinite;
}
.lg--live .g-ring--2{ animation-delay:1.3s; }

/* pending: an outline with one quarter drawn, sweeping round */
.lg--pending .g-orbit{
  position:absolute; inset:1px;
  border:1px solid rgba(255,255,255,.22);
}
.lg--pending .g-sat{
  position:absolute; inset:1px;
  border:1px solid transparent; border-top-color:var(--ink);
  animation:spin 4.5s steps(8,end) infinite;
}

/* UI only: an unwired outline, dashed and inert */
.lg--ui .g-wire{
  position:absolute; inset:2px;
  border:1px dashed rgba(255,255,255,.2);
}
.lg--ui .g-wire--2{
  inset:5px; border-style:solid; border-color:rgba(255,255,255,.12);
  animation:wireBlink 3.2s steps(1,end) infinite;
}

/* the pace of each track encodes the state: live runs, pending steps,
   UI-only never moves */
.lg-track{
  grid-column:2; height:1px; margin-top:5px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.lg-track i{
  display:block; width:30%; height:100%;
  background:var(--tone);
  animation:trackRun 3s linear infinite;
}
.lg--pending .lg-track i{ animation-duration:7s; opacity:.7; }
.lg--ui .lg-track i{
  width:100%; animation:none; opacity:.5;
  background:repeating-linear-gradient(90deg,var(--tone) 0 2px,transparent 2px 7px);
}

.legend-foot{
  margin:11px 4px 0;
  font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dimmer);
}
.legend-foot .kbd{ color:var(--text); border:1px solid var(--line-soft); padding:1px 5px; }

/* the trace: matched pills hold, everything else recedes */
body[data-trace] .pill{ opacity:.2; }
body[data-trace="live"] .pill--live,
body[data-trace="pending"] .pill--pending,
body[data-trace="ui"] .pill--ui{
  opacity:1;
  animation:pillBlink 1.4s steps(1,end) infinite;
}

/* ================================================================ content === */

.content{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0 clamp(24px,2.6vw,48px);
  padding:0 0 100px;
  max-width:1560px;
}

.page-head{ grid-column:1 / -1; }

.prose{ min-width:0; max-width:var(--measure-wide); padding:0 var(--gutter); }
.prose > p,
.prose > ul,
.prose > ol,
.prose > .note{ max-width:var(--measure); }

/* --------------------------------------------------------------- page head ---
   The hero of the reference: a grey section number, a heavy uppercase
   headline, a monospace standfirst, and the globe standing off to the right. */

.page-head{
  position:relative;
  padding:clamp(34px,5vw,64px) var(--gutter) clamp(30px,4vw,52px);
  min-height:clamp(330px,40vw,500px);
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.ph-num{
  margin:0 0 14px;
  font-size:13px; letter-spacing:.1em;
  color:var(--dim);
  animation:riseIn .6s var(--ease-out) both;
}
.ph-num b{ font-weight:400; color:var(--text); }
.ph-num i{ font-style:normal; color:var(--dimmer); }

h1{
  position:relative; z-index:1;
  font-family:var(--sans);
  font-size:clamp(30px,4.6vw,54px);
  line-height:1.06;
  letter-spacing:-.018em;
  font-weight:700;
  text-transform:uppercase;
  color:var(--ink);
  margin:0;
  max-width:16ch;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px;
  animation:riseIn .8s var(--ease-out) .06s both;
}

.lede{
  position:relative; z-index:1;
  font-size:13px;
  line-height:1.85;
  color:var(--text);
  max-width:56ch;
  margin:20px 0 0;
  animation:riseIn .8s var(--ease-out) .14s both;
}

/* the globe: the single instrument on the page */
.globe{
  position:absolute;
  top:50%; right:clamp(0px,1.6vw,34px);
  transform:translateY(-50%);
  width:clamp(280px,31vw,440px);
  height:clamp(280px,31vw,440px);
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity 1.2s var(--ease-out);
}
.globe.is-on{ opacity:1; }
@media (max-width:1180px){ .globe{ display:none; } }

/* -------------------------------------------------------------- typography --- */

h2{
  position:relative;
  font-family:var(--sans);
  font-size:clamp(17px,1.8vw,21px);
  line-height:1.2;
  letter-spacing:-.008em;
  font-weight:700;
  text-transform:uppercase;
  color:var(--ink);
  margin:54px 0 8px;
  padding-top:26px;
  border-top:1px solid var(--line-soft);
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px;
}
h2::after{
  content:""; position:absolute; top:-1px; left:0; width:34px; height:1px;
  background:var(--accent);
}

h3{
  position:relative;
  font-size:11.5px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink);
  margin:40px 0 12px;
  padding-left:22px;
  scroll-margin-top:80px;
}
h3::before{
  content:"//";
  position:absolute; left:0; top:0;
  color:var(--accent);
  transition:color .3s var(--ease);
}
.prose > h3:first-of-type{ margin-top:8px; }

h4{
  font-size:9.5px; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim);
  margin:28px 0 10px;
}

p{ margin:0 0 15px; color:var(--text); }
.content ul,.content ol{ margin:0 0 16px; padding-left:20px; color:var(--text); }
.content li{ margin:0 0 8px; }
.content li::marker{ color:var(--dimmer); }

strong{ color:var(--ink); font-weight:400; }
em{ font-style:normal; color:var(--ink); }

.prose a{ color:var(--ink); border-bottom:1px solid var(--line); }
.prose a:hover{ color:var(--accent); border-bottom-color:var(--accent); text-decoration:none; }

code{
  font-family:var(--mono);
  font-size:.94em;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-faint);
  padding:1px 5px;
  color:var(--ink);
  word-break:break-word;
}

/* ============================================================ status pills === */

.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 9px;
  border:1px solid var(--line);
  color:var(--text);
  vertical-align:middle;
  white-space:nowrap;
  transition:opacity .25s var(--ease);
}
.pill::before{ content:""; width:5px; height:5px; flex:0 0 auto; background:currentColor; }
.pill--live{ color:var(--accent); border-color:var(--accent-dim); }
.pill--live::before{ animation:softPulse 2.4s var(--ease) infinite; }
.pill--pending{ color:var(--ink); border-color:var(--line); }
.pill--pending::before{ background:transparent; border:1px solid currentColor; }
.pill--ui{ color:var(--dim); border-color:var(--line-soft); border-style:dashed; }
.pill--ui::before{ background:transparent; border:1px dashed currentColor; }
h1 .pill{ font-size:9px; position:relative; top:-2px; }

/* =============================================================== callouts === */

.note{
  position:relative;
  border:1px solid var(--line-soft);
  border-left:1px solid var(--ink);
  background:var(--panel);
  padding:16px 18px 16px 20px;
  margin:22px 0;
}
.note--warn{ border-left-color:var(--accent); }
.note > :last-child{ margin-bottom:0; }
.note-title{
  display:flex; align-items:center; gap:9px;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink);
  margin:0 0 9px;
}
.note-title::before{ content:"["; color:var(--dimmer); }
.note-title::after{ content:"]"; color:var(--dimmer); margin-left:auto; }
.note--warn .note-title{ color:var(--accent); }

/* ============================================================ code blocks ===
   A plain black terminal panel: hairline border, bracketed label, and a
   measured rule down the left of the source. */

.codewrap{
  position:relative;
  margin:18px 0 24px;
  border:1px solid var(--line-soft);
  background:#000;
}
.codehead{
  display:flex; align-items:center; gap:2px;
  padding:0 8px 0 0;
  border-bottom:1px solid var(--line-faint);
  min-height:36px;
}
.codelabel{
  display:inline-flex; align-items:center;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim);
  padding:0 0 0 14px;
  margin-right:auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.codelabel::before{ content:"// "; color:var(--dimmer); }

.tabs{ display:flex; margin-right:auto; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  position:relative;
  appearance:none; background:transparent; border:0;
  color:var(--dim);
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:12px 15px 11px;
  cursor:pointer; white-space:nowrap;
  transition:color .2s var(--ease);
}
.tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.tab:hover{ color:var(--text); }
.tab[aria-selected="true"]{ color:var(--ink); }
.tab[aria-selected="true"]::after{ transform:scaleX(1); }

.copy{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
  appearance:none;
  background:transparent;
  border:1px solid var(--line-soft);
  color:var(--dim);
  font-family:var(--mono);
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 10px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.copy:hover{ color:var(--ink); border-color:var(--ink); }
.copy.is-done{ color:var(--accent); border-color:var(--accent-dim); }
.copy svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

.codewrap pre{
  margin:0;
  padding:16px 18px 16px 24px;
  overflow-x:auto;
  font-family:var(--mono);
  font-size:12.3px;
  line-height:1.72;
  color:var(--text);
  tab-size:2;
  background:linear-gradient(90deg, var(--line-faint) 0 1px, transparent 1px) 12px 0/100% 100% no-repeat;
}
.codewrap pre[hidden]{ display:none; }
.codewrap code{
  background:none; border:0; padding:0; font-size:inherit; color:inherit;
  white-space:pre;
}

/* monochrome source, with the accent reserved for literal values */
.t-key{ color:var(--ink); }
.t-str{ color:var(--accent); }
.t-num{ color:var(--accent); }
.t-com{ color:var(--dimmer); }
.t-kw{ color:#c9c9c9; }
.t-fn{ color:var(--ink); }

/* ================================================================= tables === */

.tablewrap{
  overflow-x:auto;
  border:1px solid var(--line-soft);
  margin:18px 0 24px;
  -webkit-overflow-scrolling:touch;
}
table{ border-collapse:collapse; width:100%; min-width:520px; font-size:12.5px; }
thead th{
  text-align:left;
  font-size:9px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim);
  padding:11px 15px;
  border-bottom:1px solid var(--line-soft);
  white-space:nowrap;
}
tbody td{
  padding:12px 15px;
  border-bottom:1px solid var(--line-faint);
  color:var(--text);
  vertical-align:top;
}
tbody tr:last-child td{ border-bottom:0; }
tbody td:first-child{ color:var(--ink); white-space:nowrap; }
tbody td code{ white-space:nowrap; }
tbody tr{ transition:background .2s var(--ease); }
tbody tr:hover{ background:rgba(255,255,255,.028); }
tbody tr:hover td:first-child{ box-shadow:inset 1px 0 0 var(--accent); }

/* ======================================================= panels and cards === */

.panel,.stat,.price,.pager-link,.keyrow{
  position:relative;
  border:1px solid var(--line-soft);
  background:var(--panel);
  transition:border-color .25s var(--ease);
}
.stat:hover,.price:hover,.pager-link:hover,.keyrow:hover{ border-color:var(--line); }

.panel{ padding:20px; margin:20px 0; }
.panel-head{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 6px; }
.panel-head h3{ margin:0; }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:10px;
  margin:20px 0 24px;
}

.stat{ padding:15px 16px; }
.stat dt{
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim);
  margin:0 0 9px;
}
.stat dd{
  margin:0;
  font-size:19px;
  color:var(--dimmer);
}
.stat dd small{
  display:block;
  font-size:10.5px;
  letter-spacing:.02em;
  color:var(--dimmer);
  margin-top:8px;
  line-height:1.6;
}
/* a tile with nothing to report says so, rather than sitting blank */
.stat.is-idle dd{ font-size:0; }
.stat.is-idle dd::before{
  content:""; display:block; width:34px; height:1px; margin:8px 0 2px;
  background:repeating-linear-gradient(90deg,var(--dim) 0 3px,transparent 3px 8px);
  animation:idleShift 3.6s linear infinite;
}
.stat.is-idle dd small{ font-size:10.5px; }

/* price cards: the figure is the loudest thing on the page after the headline */
.price{ padding:20px; }
.price dt{
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim);
  margin:0 0 12px;
}
.price dd{ margin:0; }
.price .amount{
  font-family:var(--sans);
  font-size:clamp(28px,3.6vw,38px);
  font-weight:700;
  letter-spacing:-.025em;
  color:var(--ink);
  display:block;
  font-variant-numeric:tabular-nums;
}
.price .per{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
  display:block; margin-top:8px;
}
.price::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease-out);
}
.price.is-lit::after{ transform:scaleX(1); }

/* ====================================================== api keys (UI shell) === */

.keys{ margin:20px 0 6px; }
.keyrow{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,.8fr) auto;
  align-items:center;
  gap:14px;
  padding:13px 15px;
  margin-bottom:8px;
}
.keyrow > div{ min-width:0; }
.keyname{ font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.keymask{ font-size:11.5px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.keymeta{ font-size:10px; letter-spacing:.08em; color:var(--dimmer); }
.keyacts{ display:flex; gap:6px; flex-wrap:wrap; }

.btn{
  appearance:none;
  background:transparent;
  border:1px solid var(--line-soft);
  color:var(--dim);
  font-family:var(--mono);
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 12px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover:not(:disabled){ color:var(--ink); border-color:var(--ink); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn--primary{ color:var(--ink); border-color:var(--line); }
.btn--danger:hover:not(:disabled){ color:var(--accent); border-color:var(--accent-dim); }

.usage-history td:first-child{ font-size:11.5px; white-space:nowrap; }

.empty{
  position:relative;
  border:1px dashed var(--line-soft);
  padding:26px 20px;
  text-align:center;
  color:var(--dimmer);
  font-size:12px;
  overflow:hidden;
}
.empty p{ max-width:52ch; margin:0 auto; color:var(--dimmer); }

.scrim{ display:none; }

/* ============================================================ on this page === */

.toc{
  display:none;
  position:sticky; top:calc(var(--bar) + 26px);
  align-self:start;
  max-height:calc(100svh - 120px);
  overflow-y:auto;
  padding-left:18px;
  padding-right:8px;
}
.toc::before{
  content:""; position:absolute; left:0; top:26px; bottom:4px; width:1px;
  background:var(--line-faint);
}
.toc-dot{
  position:absolute; left:0; top:var(--y,26px);
  width:5px; height:1px;
  background:var(--accent);
  opacity:0;
  transition:top .3s var(--ease), opacity .25s var(--ease);
}
.toc.is-active .toc-dot{ opacity:1; }

.toc-title{
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dimmer);
  margin:0 0 12px;
}
.toc-title::before{ content:"// "; }
.toc ul{ list-style:none; margin:0; padding:0; }
.toc a{
  display:block;
  padding:5px 0;
  font-size:10.5px;
  line-height:1.55;
  color:var(--dim);
  overflow-wrap:anywhere;
  transition:color .2s var(--ease);
}
.toc a:hover{ color:var(--ink); text-decoration:none; }
.toc a.is-current{ color:var(--accent); }

/* ============================================================= prev / next === */

.pager{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:62px;
  padding-top:26px;
  border-top:1px solid var(--line-soft);
}
.pager-link{ display:flex; flex-direction:column; gap:7px; padding:16px 18px; }
.pager-link:hover{ text-decoration:none; }
.pager-link span{
  display:inline-flex; align-items:center; gap:8px;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dimmer);
}
.pager-link b{
  font-family:var(--sans);
  font-size:15px; font-weight:700; letter-spacing:-.01em; text-transform:uppercase;
  color:var(--ink);
}
.pager-link:hover b{ color:var(--accent); }
.pager-link svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.pager-next{ text-align:right; align-items:flex-end; }

/* ================================================================= footer === */

.docfoot{
  position:relative; z-index:1;
  border-top:1px solid var(--line);
  margin:0;
  padding:22px clamp(18px,2.6vw,46px) 26px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dimmer);
  background:#000;
}
.docfoot a{ color:var(--dim); }
.docfoot a:hover{ color:var(--accent); text-decoration:none; }
.docfoot .dot{ width:8px; height:1px; background:var(--dimmer); }

/* ========================================================= reveal on scroll ===
   Applied only from script, and only where motion is welcome — with scripting
   off, or motion reduced, the article renders finished. */

.rv{
  opacity:0;
  transform:translateY(14px);
  transition:
    opacity .6s var(--ease-out) calc(var(--d,0) * 60ms),
    transform .6s var(--ease-out) calc(var(--d,0) * 60ms);
}
.rv-in{ opacity:1; transform:none; }

/* ============================================================== keyframes === */

@keyframes riseIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
@keyframes routeFlow{ to{ stroke-dashoffset:-120; } }
@keyframes softPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.3; }
}
@keyframes ping{
  0%{ transform:scale(.4); opacity:.9; }
  70%{ opacity:0; }
  100%{ transform:scale(1.4); opacity:0; }
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes ledBlink{
  0%,58%{ opacity:1; }
  60%,64%{ opacity:.1; }
  66%,100%{ opacity:1; }
}
@keyframes wireBlink{
  0%,70%{ opacity:1; }
  72%,80%{ opacity:.25; }
  82%,100%{ opacity:1; }
}
@keyframes trackRun{
  0%{ transform:translateX(-110%); }
  100%{ transform:translateX(360%); }
}
@keyframes pillBlink{
  0%,70%{ opacity:1; }
  75%,82%{ opacity:.45; }
  86%,100%{ opacity:1; }
}
@keyframes idleShift{ to{ background-position:8px 0; } }

/* ============================================================= responsive === */

@media (min-width:1400px){
  .content{ grid-template-columns:minmax(0,1fr) var(--toc); }
  .toc.is-active{ display:block; }
}

@media (max-width:1120px){ :root{ --sidebar:228px; } }

@media (max-width:820px){
  .layout{ grid-template-columns:minmax(0,1fr); z-index:auto; }

  .navtoggle{ display:inline-flex; }
  .navset,.topbar > .bracket,.topbar-end > .bracket{ display:none; }
  .topbar{ grid-template-columns:1fr auto; }
  .brand{ justify-self:start; }

  .sidebar{
    position:fixed;
    top:0; bottom:0; left:0;
    width:min(300px,84vw);
    height:auto; max-height:none;
    z-index:50;
    border-right:1px solid var(--line);
    background:#000;
    padding:22px 0 calc(34px + env(safe-area-inset-bottom));
    overscroll-behavior:contain;
    transform:translateX(-100%);
    transition:transform .3s var(--ease);
    visibility:hidden;
  }
  .sidebar.is-open{ transform:translateX(0); visibility:visible; }

  .scrim{
    display:block;
    position:fixed; inset:0; z-index:45;
    background:rgba(0,0,0,.72);
    opacity:0; visibility:hidden;
    transition:opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .scrim.is-open{ opacity:1; visibility:visible; }

  .sb-list a{ padding:11px clamp(14px,1.6vw,22px); font-size:13.5px; }

  :root{ --gutter:clamp(16px,4vw,24px); }
  .page-head{ min-height:0; padding:30px var(--gutter) 26px; }
  .content{ padding-bottom:76px; }
  h1{ max-width:none; }

  .pager{ grid-template-columns:minmax(0,1fr); }
  .keyrow{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .keyacts{ margin-top:4px; }
}

@media (max-width:560px){
  :root{ --bar:52px; }
  body{ font-size:13px; }
  .brand b{ font-size:13.5px; }
  .brand img{ width:17px; }
  .codewrap pre{ font-size:11.6px; padding:14px 14px 14px 20px; }
  .tab{ padding:11px 12px 10px; }
  section[id]{ scroll-margin-top:60px; }
}

/* ================================================================== print === */

@media print{
  .globe,.sidebar,.toc,.route{ display:none !important; }
  .rv{ opacity:1 !important; transform:none !important; }
  .layout{ display:block; }
  body{ background:#fff; color:#111; }
  .prose{ padding:0; }
  .content{ padding:0; max-width:none; }
  h1,h2,h3,h4,strong,tbody td:first-child{ color:#000; }
  p,li,tbody td{ color:#222; }
  .codewrap,.tablewrap,.note,.panel,.stat,.price{ break-inside:avoid; border-color:#ccc; }
  .codewrap pre{ color:#111; background:none; }
}

/* =========================================================== reduced motion === */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .globe{ opacity:1; }
}