/* Page-specific layouts. Shared tokens and components live in styles.css. */

/* ---- home ---- */
/* the hero leaves room under it for the "Tested with" strip (68px), so that shows on load too */
.hero { display: grid; grid-template-columns: 1fr 1.15fr; padding: 0; border-top: 0; min-height: min(680px, calc(100svh - var(--nav-h) - 68px)); }
.hero-copy { padding: var(--s6) var(--gutter) var(--s5); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hero h1 { font-size: var(--t-2xl); line-height: 1; letter-spacing: -.045em; font-weight: 500; margin-top: var(--s2); }
.hero h1 em { font-style: normal; color: var(--accent-text); }
.hero .lede { margin: var(--s3) 0 var(--s4); }
.cta { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.facts { display: flex; gap: var(--s4); margin-top: var(--s5); flex-wrap: wrap; }
.facts div { display: flex; flex-direction: column-reverse; }
.facts dt { font: 400 11px var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.facts dd { font: 500 var(--t-lg) var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.more { margin-top: var(--s3); }

/* the memory grid */
.grid-stage { background: var(--surface); padding: var(--s3); display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 420px; }
.mg-grid { flex: 1; min-height: 0; display: grid; gap: 1.5px; grid-template-columns: repeat(var(--cols, 22), var(--cell, 1fr)); align-content: center; justify-content: center; perspective: 700px; overflow: hidden; }
.mg-grid span { aspect-ratio: 1; display: grid; place-items: center; font: 600 clamp(12px, calc(var(--cell, 16px) * .8), 28px)/1 var(--mono); background: var(--sunken); color: transparent;
  transition: background var(--t-fast), color var(--t-fast), transform 450ms var(--ease), opacity 450ms var(--ease), box-shadow 400ms ease-out; }
.mg-grid span.p, .mg-grid span.a { animation: flip 180ms var(--ease) both; }
.mg-grid span.p { background: var(--fg); color: var(--bg); }
.mg-grid span.a { background: var(--accent); color: #fff; }
.mg-grid span.hot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent), 0 0 14px 2px color-mix(in srgb, var(--accent) 35%, transparent); transition: box-shadow 0s; position: relative; z-index: 1; }
.mg-grid span.gone { transform: scale(.2); opacity: 0; }
@keyframes flip { from { transform: rotateX(90deg); opacity: .4; } }
.mg-meters { display: flex; align-items: center; gap: 8px 22px; font: 11px var(--mono); color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; flex-wrap: wrap; }
.mg-meters b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; display: inline-block; min-width: 3ch; }
.mg-meters [data-disk] { color: var(--accent-text); }
.mg-phase { list-style: none; display: flex; margin-left: auto; position: relative; font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.mg-phase li { padding: 0 8px 6px; transition: color var(--t-fast); }
.mg-phase li.on { color: var(--fg); }
.mg-fill { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); width: 0; transition: width var(--t-slow) var(--ease); }

/* the token press (token-press.js): heading on top, then one strip, a rail for the prompt on the left third
   and a belt that never stops on the right two-thirds, with each token stamped by the press as it passes */
.mint-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s3); flex-wrap: wrap; }
.mint-head .more { margin: 0; }
.mint { margin-top: var(--s4); }
.mint-svg { display: block; width: 100%; height: 422px; overflow: visible; }
.mint-label { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--dim); }
.mint-rail { stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 2 6; }
.mint-piece { font: 15px var(--mono); fill: var(--fg); white-space: pre; }
/* the conveyor (drawn by token-press.js): dark rubber belt, its top face showing above its edge, on a steel
   side frame with bolts; pulleys at the left ends; stands with foot plates. Rubber stays dark in both themes. */
.mint-belt-face { fill: #23252b; }
.mint-belt-edge { fill: #121317; }
.mint-belt-slats { stroke: #3a3d46; stroke-width: 3; stroke-dasharray: 1.5 7.5; }
.mint-bend-slat { stroke: #3a3d46; stroke-width: 1.5; }
.mint-frame-rail { fill: var(--sunken); stroke: var(--line-strong); stroke-width: 1; }
.mint-frame-shine { stroke: var(--surface); stroke-width: 1; opacity: .7; }
/* the belt wrapping the pulley (its outer edge on the belt top and frame bottom), the drum inside it */
.mint-pulley-wrap { fill: none; stroke: #23252b; stroke-width: 3; }
.mint-drum { fill: var(--surface); stroke: var(--muted); stroke-width: 1.2; }
.mint-pulley path { stroke: var(--muted); stroke-width: 1.3; transform: rotate(var(--turn, 0deg)); }
.mint-hub { fill: var(--muted); }
.mint-stand { fill: var(--line-strong); }
.mint-strut { fill: none; stroke: var(--line-strong); stroke-width: 4; stroke-linecap: round; }
/* the feed hood where prompt words go in and tokens come out */
/* the tokenizer: a housing on the belt with an intake for words, an outlet for tokens, a panel and vents */
.mint-hood { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.mint-hood-panel { fill: var(--ink); stroke: var(--ink-line); stroke-width: 1; }
.mint-hood-label { font: 600 6px var(--mono); letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-dim); }
.mint-hood-led { fill: var(--bad); transition: fill var(--t-med); }
.mint.on .mint-hood-led { fill: var(--ok); }
.mint-hood-vent { stroke: var(--line-strong); stroke-width: 1.4; stroke-linecap: round; }
.mint-hood-mouth { fill: #121317; }
.mint-hood-lip, .mint-hood-skid { fill: var(--line-strong); }
/* the press: bolster and feet, bolted columns, a crown with a counter display and a pressure gauge,
   a hydraulic cylinder, and a ram (rod, platen on guide bushings, die) that strikes each token */
.mint-bolster, .mint-column, .mint-crown, .mint-cylinder, .mint-platen, .mint-guide { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.mint-bolt { fill: var(--line-strong); }
/* on while the press runs, off (red) while it waits off-screen */
.mint-lamp { fill: var(--bad); transition: fill var(--t-med); }
.mint.on .mint-lamp { fill: var(--ok); }
.mint-gauge { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.2; }
.mint-gauge-ticks { stroke: var(--dim); stroke-width: 1; fill: none; }
.mint-needle { stroke: var(--accent-text); stroke-width: 1.4; stroke-linecap: round; transform-origin: 38px 27px; transform: rotate(-55deg); transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.mint-plate { font: 500 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; fill: var(--dim); text-anchor: middle; }
.mint-plate tspan { fill: var(--fg); letter-spacing: .04em; }
.mint-rod { fill: var(--muted); transform-box: view-box; transform-origin: 0 58px; }
.mint-die { fill: var(--line-strong); }
.mint-die-edge { stroke: var(--accent); stroke-width: 1.5; }
/* down fast, up slower; token-press.js times the strike to match */
/* the ram drops 46px; the rod, 18px from cylinder to platen, stretches to 64px with it (scale 64/18) */
.mint-ram, .mint-rod { transition: transform 260ms cubic-bezier(.2, .7, .2, 1); }
.mint-press.down .mint-ram { transform: translateY(46px); transition: transform 80ms cubic-bezier(.7, 0, 1, .6); }
.mint-press.down .mint-rod { transform: scaleY(3.5556); transition: transform 80ms cubic-bezier(.7, 0, 1, .6); }
.mint-flash { fill: var(--accent); opacity: 0; transition: opacity 260ms ease-out; filter: blur(4px); }
.mint.hit .mint-flash { opacity: .55; transition: none; }
.mint-spark { stroke: var(--accent-text); stroke-width: 1.4; stroke-linecap: round; }
.mint.hit .mint-needle { transform: rotate(50deg); transition: transform 60ms ease-out; }
.mint.hit .mint-frame { transform: translateY(.8px); }
.mint-frame { transition: transform 120ms ease-out; }
/* a token: a coin lying on the belt (token-press.js draws its rim and top face for the angle it is seen at);
   blank ones are plain, stamped ones blue with their engraving */
.mint-rim { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; stroke-linejoin: round; transition: fill var(--t-fast), stroke var(--t-fast); }
.mint-top { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; transition: fill var(--t-fast), stroke var(--t-fast); }
.mint-ring, .mint-mark { visibility: hidden; }
.mint-token.stamped .mint-rim { fill: color-mix(in srgb, var(--accent) 35%, var(--surface)); stroke: var(--accent); }
.mint-token.stamped .mint-top { fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); stroke: var(--accent); }
.mint-token.stamped .mint-ring { visibility: visible; fill: none; stroke: var(--accent-text); stroke-width: 1; }
.mint-token.stamped .mint-mark { visibility: visible; fill: var(--accent-text); }
/* out of the LLM: the same stamped token, red */
.mint-token.out .mint-rim { fill: color-mix(in srgb, var(--bad) 35%, var(--surface)); stroke: var(--bad); }
.mint-token.out .mint-top { fill: color-mix(in srgb, var(--bad) 22%, var(--surface)); stroke: var(--bad); }
.mint-token.out .mint-ring { stroke: var(--bad); }
.mint-token.out .mint-mark { fill: var(--bad); }
/* the cache machine: its lens's beam and light flash as it kicks a token off, and "+1 cached token" rises */
.mint-lens { fill: #121317; stroke: var(--line-strong); stroke-width: 1; }
.mint-beam { stroke: var(--accent); stroke-width: 6; opacity: .12; }
.mint-cache-led { fill: var(--dim); }
.mint-beam.hot { animation: mint-beam 500ms ease-out; }
.mint-cache-led.hot { animation: mint-led 500ms ease-out; }
@keyframes mint-beam { from { opacity: .6; stroke: var(--warn); } }
@keyframes mint-led { from { fill: var(--warn); } }
.mint-pop { font: 500 10px var(--mono); fill: var(--warn); text-anchor: middle; animation: mint-pop 1s ease-out forwards; }
/* the zap: a crackling bolt (a wide glow under a thin core), electric sparks, a shock ring off the token, the head
   jolting, and the zapped token glowing as it flies */
.mint-zap path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.mint-zap .glow { stroke: var(--accent); stroke-width: 5; opacity: .35; }
.mint-zap .core { stroke: #eef1ff; stroke-width: 1.4; }
.mint-spark.zap { stroke: #b9c3ff; stroke-width: 1.2; }
.mint-shock { fill: none; stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: mint-shock 450ms ease-out forwards; }
@keyframes mint-shock { from { transform: scale(.3); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.mint-cache-head.zapped { animation: mint-jolt 240ms linear; }
@keyframes mint-jolt { 20% { transform: translate(1.5px, -1px); } 40% { transform: translate(-1.5px, 1px); } 60% { transform: translate(1px, .5px); } 80% { transform: translate(-.5px, -.5px); } }
.mint-token.zapped { filter: drop-shadow(0 0 4px var(--accent)); }
.mint-token.zapped .mint-rim, .mint-token.zapped .mint-top { stroke: var(--accent); }
@keyframes mint-pop { to { transform: translateY(-22px); opacity: 0; } }
/* the LLM's network: a token going through fires some of its nodes and the wires between them, layer by layer */
.mint-edge { stroke: var(--ink-line); stroke-width: .6; }
.mint-node { fill: var(--ink-dim); }
.mint-llm.think .mint-node.fire { animation: mint-node 600ms ease-out; }
.mint-llm.think .mint-edge.fire { animation: mint-edge 600ms ease-out; }
@keyframes mint-node { 25% { fill: var(--bad); } }
@keyframes mint-edge { 25% { stroke: var(--bad); stroke-width: 1; } }
.mint-odds { fill: var(--ink-dim); }
.mint-odds.pick { fill: var(--bad); }
.mint-brace { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linejoin: round; }
/* the LLM's lights run while the machine does */
.mint-llm-bar { fill: var(--ink-dim); }
.mint.on .mint-llm-bar { animation: mint-bar 900ms ease-in-out infinite alternate; }
@keyframes mint-bar { to { fill: var(--bad); } }
.compat { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) 0 var(--s3) var(--gutter); font: 400 14px var(--mono); color: var(--muted); border-top: 1px solid var(--line); }
.compat .eyebrow { flex: none; color: var(--dim); }
/* the tools scroll past continuously, fading out at both edges; hovering holds them still. Each copy is wider
   than the strip by more than the longest name, so a name leaves on the left before its twin comes in on the right */
.compat-track { flex: 1; min-width: 0; display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.compat-list { flex: none; min-width: calc(100% + 160px); display: flex; justify-content: space-around; gap: var(--s5); padding-right: var(--s5); list-style: none; animation: compat-scroll 32s linear infinite; }
.compat-list li { white-space: nowrap; transition: color var(--t-fast); }
.compat-list li:hover { color: var(--fg); }
.compat-track:hover .compat-list { animation-play-state: paused; }
@keyframes compat-scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .compat-track { mask-image: none; }
  .compat-list { flex-wrap: wrap; gap: var(--s2) var(--s4); }
  .compat-list[aria-hidden] { display: none; }
}

/* refused elsewhere, answered here (refusals.js): the topics, the prompt, then a typical refusal struck through
   beside our answer. Topics share one grid cell and each text sits on a hidden copy of itself, so nothing moves */
.rf { margin-top: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.rf-topics { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; border-bottom: 1px solid var(--line); }
.rf-stack, .rf-text { display: grid; }
.rf-item, .rf-text > span { grid-area: 1 / 1; }
.rf-item:not(.on), .rf-ghost { visibility: hidden; }
.rf-prompt { display: flex; gap: var(--s2); align-items: baseline; padding: var(--s3); border-bottom: 1px solid var(--line); font-size: var(--t-md); }
.rf-k { flex: none; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.rf-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rf-pane { padding: var(--s3); }
.rf-pane.them { background: var(--sunken); border-right: 1px solid var(--line); }
.rf-pane.us .rf-k { color: var(--accent-text); }
.rf-model { text-transform: none; letter-spacing: 0; }
.rf-text { margin-top: 10px; line-height: 1.6; }
.rf-pane.them .rf-text { color: var(--muted); }
.rf s { text-decoration: none; background: linear-gradient(var(--bad), var(--bad)) no-repeat 0 58% / 0 2px; transition: background-size 900ms var(--ease), color 400ms; }
.rf-item.struck s { background-size: 100% 2px; color: var(--dim); }
@media (max-width: 680px) {
  .rf-panes { grid-template-columns: minmax(0, 1fr); }
  .rf-pane.them { border-right: 0; border-bottom: 1px solid var(--line); }
  .rf-prompt { flex-direction: column; gap: 6px; }
}

/* the request tree: app → API → one model's GPUs and back. flow-tree.js draws right-angled wires between the panels */
.ft-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: end; }
.ft-head .lede { margin-top: 0; }
.ft { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s6); align-items: center; margin-top: var(--s5); }
.ft-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ft-wire { fill: none; stroke: var(--line); stroke-width: 1; }
.ft-lit { fill: none; stroke: var(--accent); stroke-width: 1.5; }
/* the active route stays blue both ways; the reply runs in the lighter blue */
.ft-lit.back { stroke: var(--accent-text); }
.ft-packet { fill: var(--accent); transition: opacity var(--t-fast); }
.ft-packet.back { fill: var(--accent-text); }
.ft-node { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.ft-head-row { display: flex; justify-content: space-between; gap: var(--s2); padding: 10px 14px; border-bottom: 1px solid var(--line); font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ft-head-row span:first-child { color: var(--muted); }
.ft-body { padding: 14px; }
.ft-req { font: 12.5px var(--mono); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-req b { font-weight: 500; color: var(--accent-text); }
.ft-prompt { margin-top: 8px; color: var(--muted); font-size: var(--t-s); line-height: 1.5; min-height: 3em; }
.ft-reply { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font: 12px var(--mono); color: var(--fg); min-height: 2.4em; }
.ft-log { list-style: none; display: grid; gap: 7px; font-size: var(--t-s); }
.ft-log li { display: grid; grid-template-columns: 5.5ch 1fr; gap: 10px; color: var(--dim); opacity: .45; transition: opacity var(--t-med), color var(--t-med); }
.ft-log li.on { opacity: 1; color: var(--fg); }
.ft-t { font: 11.5px/1.7 var(--mono); color: var(--dim); text-align: right; }
.ft-models { padding-bottom: 6px; }
.ft-fam-name { padding: 12px 14px 4px; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ft-leaf { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 7px 14px 6px; text-align: left; font: inherit; color: var(--muted); background: none; border: 0; border-left: 2px solid transparent; cursor: pointer; transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
.ft-leaf .dot { margin-right: 0; }
.ft-leaf:hover { color: var(--fg); background: var(--bg); }
.ft-leaf[aria-pressed="true"] { color: var(--fg); background: var(--bg); border-left-color: var(--accent); }
.ft-id { font: 13px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-price { font: 11px var(--mono); color: var(--dim); white-space: nowrap; }
/* the bar always takes its space, so lighting a model never moves the rows under the wires */
.ft-gpu { grid-column: 2 / -1; display: block; height: 2px; margin-top: 3px; overflow: hidden; background: var(--line); opacity: 0; transition: opacity var(--t-med); }
.ft-leaf[aria-pressed="true"] .ft-gpu { opacity: 1; }
.ft-gpu i { display: block; width: 0; height: 100%; background: var(--accent); }
.ft-leaf.busy .ft-gpu i { animation: ft-compute 1.5s linear forwards; }
.ft-leaf.done .ft-gpu i { width: 100%; background: var(--muted); }
@keyframes ft-compute { to { width: 100%; } }

.pane { border: 1px solid var(--line); background: var(--surface); font: 400 13px/1.8 var(--mono); min-width: 0; }
.pane header { padding: 10px var(--s2); border-bottom: 1px solid var(--line); font-size: var(--t-xs); letter-spacing: .08em; color: var(--muted); display: flex; justify-content: space-between; gap: var(--s2); }
.pane pre { padding: var(--s2); white-space: pre-wrap; color: var(--muted); font: inherit; overflow-wrap: anywhere; }
/* the comparison with a typical hosted API: theirs muted with a cross, ours a raised column with a tick */
.vs { margin-top: var(--s4); border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.vs th, .vs td { padding: 18px var(--s3); border-bottom: 1px solid var(--line); text-transform: none; letter-spacing: 0; white-space: normal; vertical-align: top; }
.vs thead th { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.vs thead td, .vs tbody th { width: 24%; }
.vs tbody th { font: 500 var(--t-sm) var(--sans); color: var(--fg); }
.vs td { position: relative; padding-left: calc(var(--s3) + 26px); font-size: var(--t-sm); }
.vs td .ico { position: absolute; left: var(--s3); top: 20px; }
.vs-no { color: var(--dim); }
.vs-no .ico { color: var(--bad); opacity: .8; }
.vs-yes { color: var(--fg); background: var(--bg); border-left: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); }
.vs-yes .ico { color: var(--ok); }
.vs thead th:last-child { position: relative; color: var(--accent-text); background: var(--bg); border: 1px solid var(--line-strong); border-bottom-color: var(--line); font-size: 12px; }
.vs thead th:last-child::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--accent); }
.vs tbody tr:last-child .vs-yes { border-bottom-color: var(--line-strong); }
.vs tbody tr { transition: background var(--t-fast); }
.vs-key { display: none; }
@media (max-width: 560px) {
  .vs-key { display: flex; flex-wrap: wrap; gap: 6px var(--s3); margin-top: var(--s3); font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
  .vs-key span { display: inline-flex; align-items: center; gap: 8px; }
  .vs-key .ico:first-child { color: var(--bad); }
  .vs-key span:last-child { color: var(--accent-text); }
  .vs-key span:last-child .ico { color: var(--ok); }
  .vs { margin-top: var(--s2); }
  .vs thead { display: none; }
  .vs, .vs tbody, .vs tr, .vs th, .vs td, .vs tbody th { display: block; width: auto; }
  .vs tr { padding: 12px 0 10px; margin-top: 8px; background: var(--surface); border: 1px solid var(--line); }
  .vs tbody th { padding: 0 14px 6px; border: 0; }
  .vs td { padding: 4px 14px 4px 40px; border: 0; background: none; }
  .vs td .ico { left: 14px; top: 6px; }
}
/* the token press caption: the running cost at one model's prices */
.mint-bill { margin-top: var(--s2); font-size: var(--t-s); color: var(--dim); }
.mint-bill b { font: 500 var(--t-s) var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; }

/* ---- models ---- */
.models-table { border-top: 0; }
.fam-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s4); }
.fam-filter button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; font: 500 var(--t-s) var(--sans); color: var(--muted); background: none; border: 1px solid var(--line-strong); cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.fam-filter button span { font: 400 11px var(--mono); color: var(--dim); }
.fam-filter button:hover { color: var(--fg); border-color: var(--fg); }
.fam-filter button[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.fam-filter button[aria-pressed="true"] span { color: inherit; opacity: .6; }
/* each family is a panel: its icon and name, then its table */
.fam { padding: var(--s3) var(--s3) var(--s1); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.fam + .fam { margin-top: var(--s3); }
.fam-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: var(--s2); }
.fam-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--accent-text); }
.fam-head h2 { font-size: var(--t-lg); font-weight: 500; letter-spacing: -.02em; }
.fam-head p { color: var(--muted); font-size: var(--t-s); }
.mtable th:first-child { width: 34%; }
.mrow { cursor: pointer; transition: background var(--t-fast); }
.mrow:hover, .mrow.open { background: var(--surface); }
.mrow td { vertical-align: middle; }
.mrow .id { font: 500 14px var(--mono); white-space: nowrap; }
.mrow .id .chip { margin-left: 8px; vertical-align: middle; }
.mrow .sub { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.mrow .unit { font-size: 11px; color: var(--dim); }
.chip { display: inline-block; font: 500 11px var(--mono); letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line-strong); padding: 2px 7px; white-space: nowrap; }
.row-toggle { width: 30px; height: 30px; display: inline-grid; place-items: center; background: none; border: 1px solid transparent; color: var(--dim); cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); }
.row-toggle svg { transition: transform var(--t-med) var(--ease); }
.mrow:hover .row-toggle { color: var(--fg); border-color: var(--line-strong); }
.row-toggle[aria-expanded="true"] { color: var(--fg); border-color: var(--line-strong); }
.row-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.detail td { background: var(--surface); padding: 0; border-bottom: 0; }
.detail.open td { border-bottom: 1px solid var(--line); }
.detail-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med) var(--ease); }
.detail-wrap > div { overflow: hidden; min-height: 0; }
.detail.open .detail-wrap { grid-template-rows: 1fr; }
.detail-grid { padding: var(--s3) 12px var(--s4); opacity: 0; transform: translateY(-4px); transition: opacity var(--t-med), transform var(--t-med) var(--ease); }
.detail.open .detail-grid { opacity: 1; transform: none; }
.detail-grid { display: grid; grid-template-columns: minmax(260px, 1fr) 1.5fr; gap: var(--s4); align-items: start; }
.detail-grid > * { min-width: 0; }
.detail-grid .code-tabs { margin: 0; }
.detail-text { margin-top: var(--s1); max-width: 48ch; }
.detail-facts { margin: var(--s3) 0; font: 400 13px/2.1 var(--mono); max-width: 360px; }
.detail-facts div { display: flex; justify-content: space-between; gap: var(--s2); border-bottom: 1px solid var(--line); }
.detail-facts dt { color: var(--dim); }
.detail-facts dd { text-align: right; }
.table-note { margin-top: var(--s3); font-size: 13px; color: var(--dim); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
code.ic, .doc code, .params code { font: 400 .88em var(--mono); background: var(--sunken); border: 1px solid var(--line); padding: 0 5px; color: var(--fg); }

/* ---- docs and API reference: sidebar + reading column ---- */
/* The sidebar sticks at the height of its links (up to the screen), so at the end of the page the footer
   pushes up only that list, not a screen-tall box whose top links slide under the navbar. Its column's
   background and border are painted on the grid, so they still run the full height of the page. */
.dx { --side: 296px; display: grid; grid-template-columns: var(--side) minmax(0, 1fr); align-items: start;
  background: linear-gradient(90deg, var(--surface) calc(var(--side) - 1px), var(--line) calc(var(--side) - 1px) var(--side), transparent var(--side)); }
.dx-side { position: sticky; top: var(--nav-h); }
.dx-toggle { display: none; }
.dx-side-body { max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overflow-x: hidden; padding: var(--s3) 14px var(--s4); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.dx-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 36px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--dim); transition: border-color var(--t-fast); }
.dx-search:focus-within { border-color: var(--accent); }
.dx-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--fg); font: 13px var(--sans); }
.dx-search input::-webkit-search-cancel-button { display: none; }
.dx-search kbd { font-size: 10px; padding: 0 5px; }
.dx-nav { margin-top: var(--s2); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.dx-group { display: flex; align-items: center; gap: 8px; margin: var(--s3) 0 6px; padding: 0 10px; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.dx-group-icon { font: 500 13px var(--sans); letter-spacing: 0; text-transform: none; color: var(--fg); margin-top: var(--s3); }
.dx-group-icon .ico { color: var(--muted); }
.dx-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 13.5px; color: var(--muted); border: 1px solid transparent; transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
.dx-link .ico { flex: none; color: var(--dim); transition: color var(--t-fast); }
.dx-link:hover { color: var(--fg); background: var(--bg); }
.dx-link[aria-current] { color: var(--fg); background: var(--bg); border-color: var(--line-strong); }
.dx-link[aria-current] .ico { color: var(--accent-text); }
.dx-ep { padding: 5px 10px 5px 14px; font: 12px var(--mono); gap: 8px; }
.dx-ep .m { flex: none; }
.dx-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-empty { padding: var(--s2) 10px; font-size: var(--t-s); color: var(--dim); }

/* endpoints the API doesn't serve yet */
/* what stays anonymous: a request's trip, and an account with no name behind it */
.anon-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s4); align-items: end; }
.anon-head .lede { margin: 0; }
/* the relay (relay.js): a request through our API to the GPUs and back, with its machines drawn like the token
   press's, and under it the hops, the one the request is at marked */
.relay { margin-top: var(--s5); }
.relay-svg { display: block; width: 100%; height: 296px; overflow: visible; }
.an-head { fill: var(--sunken); stroke: var(--line-strong); stroke-width: 1.5; }
.rl-label { font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--dim); }
.rl-pipe { fill: none; stroke: var(--line-strong); stroke-width: 7; stroke-linejoin: round; }
.rl-pipe-core { fill: none; stroke: var(--sunken); stroke-width: 3; stroke-linejoin: round; }
.rl-capsule { fill: var(--accent); }
.rl-inside { fill: var(--sunken); }
.rl-glass { fill: color-mix(in srgb, var(--accent) 5%, transparent); stroke: var(--line-strong); stroke-width: 1; }
.rl-beam { fill: var(--accent); opacity: 0; transition: opacity 150ms; }
.rl-beam.on { opacity: .22; }
.rl-blade { fill: var(--fg); }
.rl-display { font: 500 8px var(--mono); fill: var(--ink-dim); white-space: pre; }
.rl-display.done { fill: var(--ok); }
.rl-led { fill: var(--ink-dim); }
.relay.on .rl-led { animation: rl-led 1.3s steps(1) infinite; }
.relay.on .busy .rl-led { animation-duration: .25s; }
@keyframes rl-led { 50% { fill: var(--ok); } }
.rl-fan { fill: none; stroke: var(--ink-line); stroke-width: 1; }
.rl-cell { fill: var(--ink-line); }
.rl-cell.full { fill: var(--accent); }
.rl-mem { font: 500 7.5px var(--mono); fill: var(--ink-dim); }
.rl-mem.clear { fill: var(--ok); }
.rl-teeth { stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 2 2; }
.relay .busy .rl-teeth { animation: rl-teeth 150ms linear infinite; }
@keyframes rl-teeth { to { stroke-dashoffset: 4; } }
.rl-bin { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linejoin: round; }
.rl-bin-inside { fill: var(--sunken); }
.rl-pile, .rl-strip { fill: var(--dim); }
.rl-paper { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.rl-flap { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.rl-env-text { font: 500 8px var(--mono); fill: var(--fg); text-anchor: middle; white-space: pre; }
.rl-reply .rl-paper { fill: color-mix(in srgb, var(--bad) 18%, var(--surface)); stroke: var(--bad); }
.rl-reply .rl-flap { stroke: var(--bad); }
.rl-reply .rl-env-text { fill: var(--bad); }
.rl-string { stroke: var(--muted); stroke-width: 1; }
.rl-tag rect { fill: var(--sunken); stroke: var(--line-strong); stroke-width: 1; }
.rl-tag text { font: 8px var(--mono); fill: var(--muted); text-anchor: middle; }
.rl-screen { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.rl-title { font: 600 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; fill: var(--fg); }
.rl-head { font: 500 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--dim); }
.rl-rule { stroke: var(--line); }
.rl-none { font: 9px var(--mono); fill: var(--dim); }
.rl-row text { font: 9.5px var(--mono); fill: var(--muted); }
.rl-row.yours text:first-child { fill: var(--accent-text); }
.rl-row.new text { animation: rl-new 1.6s var(--ease); }
@keyframes rl-new { 0% { fill: var(--accent-text); opacity: 0; } 15% { opacity: 1; } 40% { fill: var(--accent-text); } }
.relay-hops { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.relay-hops li { padding-top: 12px; border-top: 2px solid var(--line); transition: border-color var(--t-med); }
.relay-hops li.on { border-top-color: var(--accent); }
.relay-hops .n { font: 12px var(--mono); color: var(--dim); }
.relay-hops b { display: block; margin-top: 4px; font-weight: 500; color: var(--muted); transition: color var(--t-med); }
.relay-hops li.on b { color: var(--fg); }
.relay-hops p { margin-top: 4px; font-size: var(--t-sm); color: var(--muted); }
@media (max-width: 760px) { .relay-hops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the mask keeps its own colours, a white face with black ink, so it reads the same in both themes */
.an-mask-face { fill: #f1ede4; stroke: #17181c; stroke-width: 1.2; }
.an-mask-ink { fill: #17181c; }
.an-mask-line { fill: none; stroke: #17181c; stroke-width: 1.4; stroke-linecap: round; }
.an-mask-cheek { fill: #d9706a; opacity: .45; }
.an-mask-strap { fill: none; stroke: #17181c; stroke-width: 3; stroke-linecap: round; }
.anon-points-lbl { margin-top: var(--s5); }
.anon .more { display: flex; flex-wrap: wrap; gap: 8px var(--s3); }
.anon-points { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: var(--s2); background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.anon-points li { display: flex; gap: 10px; align-items: flex-start; padding: var(--s3) var(--s2); background: var(--bg); font-size: var(--t-sm); }
.anon-points .ico { flex: none; margin-top: 3px; color: var(--accent-text); }
@media (max-width: 860px) {
  .anon-head { grid-template-columns: minmax(0, 1fr); }
  .anon-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .anon-points { grid-template-columns: minmax(0, 1fr); } }
/* the slip mixer (slip-mixer.js): belts like the token press's, a signer, a drum and an account */
.mix-wrap { padding-top: 0; border-top: 0; }
.mix-svg { display: block; width: 100%; height: 360px; overflow: visible; }
.mix-wrap .ax-note { margin-top: var(--s2); }
.mix-stand { fill: var(--line-strong); }
.mix-strut { fill: none; stroke: var(--line-strong); stroke-width: 5; stroke-linejoin: round; }
.mix-belt-face { fill: #23252b; }
.mix-belt-slats { stroke: #3a3d46; stroke-width: 3; stroke-dasharray: 1.5 7.5; }
.mix-pulley { fill: var(--muted); }
.mix-mouth { fill: #121317; }
.mix-box-body, .mix-term-body { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.mix-vent { stroke: var(--line-strong); stroke-width: 1.4; stroke-linecap: round; }
.mix-led { fill: var(--bad); opacity: .3; transition: opacity var(--t-fast); }
.mix-led.on { opacity: 1; transition: none; }
.mix-drum-back { fill: var(--sunken); }
.mix-drum-ring { fill: none; stroke: var(--line-strong); stroke-width: 7; }
.mix-paddles line { stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.mix-hub { fill: var(--muted); }
.mix-glass { fill: var(--fg); opacity: .03; }
.mix-slip rect { fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); stroke: var(--accent); stroke-width: 1.2; }
.mix-slip text { font: 600 11px var(--mono); fill: var(--accent-text); text-anchor: middle; }
.mix-tag rect { fill: var(--bg); stroke: var(--line-strong); stroke-dasharray: 3 2; }
.mix-lbl { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; fill: var(--dim); }
.mix-user { font: 11px var(--mono); fill: var(--fg); }
.mix-balance { font: 500 20px var(--sans); fill: var(--accent-text); }
.mix-balance.bump { animation: mix-bump 420ms var(--ease); }
@keyframes mix-bump { 30% { fill: var(--ok); } }
/* the anonymity page: the policies, the preset switch (radios, CSS only), slips and their timeline, payments */
/* the policies, as a spec sheet: each group's name on the left, its policies as rows of name and meaning */
.ax-policies { margin-top: var(--s4); border-top: 1px solid var(--line-strong); }
.ax-pol-group { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.4fr); gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line-strong); }
.ax-pol-group h3 { display: flex; gap: 12px; align-items: baseline; font: 500 var(--t-md) var(--sans); padding-top: 12px; }
.ax-pol-group h3 .n { font: 12px var(--mono); color: var(--dim); }
.ax-pol-group dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--s3); padding: 12px 0; }
.ax-pol-group dl > div + div { border-top: 1px solid var(--line); }
.ax-pol-group dt { font-weight: 500; }
.ax-pol-group dd { color: var(--muted); font-size: var(--t-s); line-height: 1.6; }
.ax-copy { margin-top: var(--s2); color: var(--muted); max-width: 52ch; }
.ax-presets { display: grid; gap: var(--s2); }
.ax-switch { display: flex; width: max-content; max-width: 100%; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.ax-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ax-switch label { padding: 6px 14px; border-radius: var(--r-pill); font: 500 12px var(--mono); color: var(--muted); cursor: pointer; transition: color var(--t-fast), background var(--t-fast); }
.ax-switch input:checked + label { background: var(--fg); color: var(--bg); }
.ax-switch input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.ax-rows { list-style: none; border-top: 1px solid var(--line-strong); }
.ax-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.ax-st { display: none; font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ax-st.raises { color: var(--warn); }
.ax-st.blocked { color: var(--dim); }
.ax-presets:has(#ax-standard:checked) [data-preset="standard"], .ax-presets:has(#ax-hardened:checked) [data-preset="hardened"], .ax-presets:has(#ax-maximum:checked) [data-preset="maximum"] { display: inline; }
.ax-note { font-size: var(--t-xs); color: var(--dim); }
.ax-banner { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: var(--s2); padding: 10px 14px; font-size: var(--t-s); background: color-mix(in srgb, #e8b417 20%, var(--bg)); border: 1px solid color-mix(in srgb, #e8b417 65%, transparent); border-radius: var(--r); }
.ax-banner b { font-weight: 500; }
.ax-list { list-style: none; border-top: 1px solid var(--line-strong); }
.ax-list li { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--t-sm); line-height: 1.6; }
.ax-list b { color: var(--fg); font-weight: 500; }
.ax-slips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.ax-slip { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line-strong); border-left: 2px dashed var(--line-strong); border-radius: var(--r); }
.ax-slip span { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ax-slip b { font: 500 var(--t-lg) var(--sans); color: var(--accent-text); }
.ax-timeline { width: 100%; height: auto; margin: var(--s3) 0 var(--s1); }
.ax-track { stroke: var(--line-strong); stroke-width: 2; }
.ax-track.dashed { stroke-dasharray: 4 6; }
.ax-lbl { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--dim); }
.ax-dot { fill: var(--fg); }
.ax-dot.redeem { fill: var(--accent); }
.ax-steps { margin-top: var(--s4); }
.ax-steps li { grid-template-columns: 44px 1fr; }
.ax-pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: var(--s4) 0 var(--s3); }
.ax-pay .pane header { text-transform: uppercase; }
.ax-pay .pane p { padding: var(--s2); font: 400 var(--t-sm)/1.6 var(--sans); color: var(--muted); }
.ax-h3 { margin-top: var(--s5); font: 500 var(--t-md) var(--sans); }
@media (max-width: 860px) {
  .ax-pay, .ax-pol-group { grid-template-columns: minmax(0, 1fr); }
  .ax-pol-group { gap: 4px; }
  /* on phones the group name heads its rows as a label, so it doesn't read as one of them */
  .ax-pol-group h3 { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
  .ax-pol-group dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 560px) { .ax-rows li { flex-direction: column; gap: 2px; } }
.soon { flex: none; display: inline-block; margin-left: 8px; padding: 1px 7px; font: 500 9.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: var(--r-pill); vertical-align: middle; }

/* HTTP method badges */
.m { flex: none; display: inline-block; min-width: 42px; padding: 2px 5px; font: 600 9.5px/1.4 var(--mono); letter-spacing: .04em; text-align: center; border: 1px solid currentColor; }
.m.get { color: var(--ok); }
.m.post { color: var(--accent-text); }
.m.delete { color: var(--bad); }

.dx-main { padding: var(--s5) var(--s5) var(--s6); max-width: 820px; min-width: 0; }
.dx-wide { max-width: 940px; }
.dx-head { padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.dx-title { font-size: 44px; line-height: 1.05; letter-spacing: -.035em; font-weight: 500; }
.dx-lede { margin-top: var(--s2); color: var(--muted); font-size: var(--t-md); max-width: 62ch; }
.dx-lede code { font: .85em var(--mono); background: var(--sunken); border: 1px solid var(--line); padding: 0 5px; color: var(--fg); }
.dx-sec { border-top: 0; padding: var(--s5) 0 0; scroll-margin-top: calc(var(--nav-h) + 16px); }
.dx-sec + .dx-sec { margin-top: var(--s4); border-top: 1px solid var(--line); }
.dx-sec h2 { font-size: 28px; letter-spacing: -.025em; font-weight: 500; margin-bottom: var(--s2); }
.dx-sec h3 { font: 500 var(--t-md) var(--sans); margin: var(--s4) 0 var(--s1); }
.dx-sec > p, .ep-body > p { color: var(--muted); font-size: var(--t-sm); line-height: 1.7; max-width: 66ch; margin-bottom: var(--s2); }
.dx-sec code, .ep-body > p code, .params code, .callout code, .facts-grid code { font: .86em var(--mono); background: var(--sunken); border: 1px solid var(--line); padding: 0 5px; color: var(--fg); }
.dx-sec .code { margin-bottom: var(--s2); }

/* callouts and numbered steps */
.callout { margin: var(--s3) 0; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.callout b { display: block; font-weight: 500; font-size: var(--t-sm); margin-bottom: 4px; }
.callout p { color: var(--muted); font-size: var(--t-s); line-height: 1.6; }
.callout-quiet { border-left-color: var(--line-strong); }
.steps { list-style: none; display: grid; gap: 10px; margin: var(--s3) 0; }
.step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 16px 18px; border: 1px solid var(--line); background: var(--surface); }
.step > div { min-width: 0; }
.step-n { width: 24px; height: 24px; display: grid; place-items: center; font: 600 12px var(--mono); background: var(--fg); color: var(--bg); }
.step b { display: block; font-weight: 500; font-size: var(--t-sm); margin-bottom: 4px; }
.step p { color: var(--muted); font-size: var(--t-s); line-height: 1.6; }
.step .code, .step .code-tabs { margin-top: 10px; margin-bottom: 0; }

/* code samples: language pills, or a language picker in a bar on top of the block */
.code-tabs { margin: var(--s1) 0 var(--s2); }
.code-bar { display: flex; align-items: center; background: var(--ink-2); border: 1px solid var(--ink); border-bottom-color: var(--ink-line); padding: 6px 8px; }
.code-bar + .copy-wrap .code, .code-bar ~ .code, .code-bar ~ .copy-wrap .code { border-top: 0; }
.lang-pick { position: relative; display: inline-flex; align-items: center; }
.lang-pick select { appearance: none; background: none; border: 1px solid var(--ink-line); color: var(--ink-fg); font: 500 12px var(--mono); padding: 5px 28px 5px 10px; cursor: pointer; transition: border-color var(--t-fast); }
.lang-pick select:hover { border-color: var(--ink-dim); }
/* a select matches :focus-visible on a mouse click too, so it marks focus with its border instead of the ring */
.lang-pick select:focus-visible { outline: none; border-color: var(--ink-fg); }
.lang-pick select option { background: var(--ink-2); color: var(--ink-fg); }
.lang-pick::after { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; border: solid var(--ink-dim); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.code-tabs .tabs { gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.code-tabs .tabs button { padding: 5px 11px; font: 500 12px var(--sans); letter-spacing: 0; color: var(--muted); border: 1px solid var(--line-strong); background: var(--bg); }
.code-tabs .tabs button:hover { color: var(--fg); border-color: var(--fg); }
.code-tabs .tabs button[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.code-tabs .tabs-ink { display: none; }
.code-tabs .code { margin: 0; }

.docs-next { margin-top: var(--s2); color: var(--muted); font-size: var(--t-s); }
.doc-points { margin: var(--s2) 0 0 18px; color: var(--muted); font-size: var(--t-sm); display: grid; gap: 6px; max-width: 64ch; line-height: 1.6; }
.doc-points li::marker { color: var(--accent-text); }

/* API overview facts */
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: var(--s3); }
.facts-grid div { padding: 14px 16px; border: 1px solid var(--line); background: var(--surface); }
.facts-grid dt { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.facts-grid dd { font-size: var(--t-s); line-height: 1.55; overflow-wrap: anywhere; }

/* endpoint cards: collapsed rows that open to the full reference */
.ep { border: 1px solid var(--line); background: var(--surface); margin-top: 10px; scroll-margin-top: calc(var(--nav-h) + 16px); transition: border-color var(--t-fast); }
.ep:hover, .ep[open] { border-color: var(--line-strong); }
.ep summary { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none; }
.ep summary::-webkit-details-marker { display: none; }
.ep summary .ep-path { font: 600 13.5px var(--mono); background: none; border: 0; padding: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-sum { color: var(--muted); font-size: var(--t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-auth { margin-left: auto; flex: none; font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line-strong); padding: 2px 6px; }
.ep-chev { flex: none; color: var(--muted); transition: transform var(--t-med) var(--ease); }
.ep[open] .ep-chev { transform: rotate(180deg); }
.ep::details-content { block-size: 0; overflow: hidden; transition: block-size var(--t-med) var(--ease), content-visibility var(--t-med) allow-discrete; }
.ep[open]::details-content { block-size: auto; }
.ep-body { padding: 4px 16px 18px; border-top: 1px solid var(--line); background: var(--bg); }
.ep-body > p:first-child { margin-top: var(--s2); }
.ep-lbl { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: var(--s3) 0 8px; }
.ep-anchor { margin-top: var(--s2); background: none; border: 0; padding: 0; font: 12px var(--mono); color: var(--muted); cursor: pointer; border-bottom: 1px solid var(--line-strong); }
.ep-anchor:hover { color: var(--accent-text); border-color: var(--accent); }

.endpoint { font: 400 14px var(--mono); border: 1px solid var(--line); display: inline-flex; gap: 12px; padding: 8px 12px; }
.params { margin: var(--s1) 0 var(--s2); font-size: 14px; background: var(--bg); }
.dx-sec .table-scroll .params, .ep-body .table-scroll .params { min-width: 520px; }
.params td { vertical-align: top; color: var(--muted); }
.params td:first-child { white-space: nowrap; }
.params td:nth-child(2) { font: 400 13px var(--mono); color: var(--dim); white-space: nowrap; }
.shapes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.shapes > div { min-width: 0; }
.shapes .code { white-space: pre-wrap; }
.events { list-style: none; counter-reset: ev; margin: var(--s1) 0; border-top: 1px solid var(--line); }
.events li { counter-increment: ev; display: grid; grid-template-columns: 30px 210px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.events li::before { content: counter(ev); font: 11px var(--mono); color: var(--dim); padding-top: 3px; }
.events code { color: var(--fg); background: none; border: 0; padding: 0; }

/* ---- pricing ---- */
.est-head { margin-bottom: var(--s4); }
/* the estimator reads as a sentence with its controls inline */
.est-sentence { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.6; letter-spacing: -.02em; }
.seg { display: inline-flex; vertical-align: middle; margin: 0 6px; border: 1px solid var(--line-strong); background: var(--surface); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label > span { display: block; padding: 8px 14px; font: 500 14px var(--mono); letter-spacing: 0; color: var(--muted); border-left: 1px solid var(--line); transition: background var(--t-fast), color var(--t-fast); }
.seg label:first-child > span { border-left: 0; }
.seg label:hover > span { color: var(--fg); background: var(--bg); }
.seg input:checked + span { background: var(--fg); color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.est-tokens { display: inline-block; min-width: 3.4ch; padding: 0 4px; font: 500 1em var(--mono); color: var(--accent-text); border-bottom: 2px solid var(--accent); text-align: center; font-variant-numeric: tabular-nums; }
/* the token slider: full width, the track filled in up to the thumb (--fill, set by pricing.js) */
.est-range { margin: var(--s3) 0 var(--s4); }
.est-range input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0; background: none; cursor: pointer; }
.est-range input[type=range]:focus-visible { outline: none; }
.est-range input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent) var(--fill, 10%), var(--sunken) var(--fill, 10%)); box-shadow: inset 0 0 0 1px var(--line); }
.est-range input[type=range]::-moz-range-track { height: 8px; border-radius: var(--r-pill); background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); }
.est-range input[type=range]::-moz-range-progress { height: 8px; border-radius: var(--r-pill); background: var(--accent); }
.est-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 2px 6px rgba(15,16,19,.25); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.est-range input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 2px 6px rgba(15,16,19,.25); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.est-range input[type=range]:hover::-webkit-slider-thumb, .est-range input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
.est-range input[type=range]:hover::-moz-range-thumb, .est-range input[type=range]:active::-moz-range-thumb { transform: scale(1.12); }
.est-range input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }
.est-range input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }
/* preset volumes sit under the track at their own spot on the log scale; the 11px inset matches the thumb's half-width */
.presets { position: relative; height: 30px; margin: 10px 11px 0; }
.presets button { position: absolute; left: var(--at); transform: translateX(-50%); padding: 4px 10px; font: 500 11px var(--mono); color: var(--muted); background: none; border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.presets button:first-child { transform: translateX(-11px); }
.presets button:last-child { transform: translateX(calc(-100% + 11px)); }
.presets button:hover { color: var(--fg); border-color: var(--line-strong); }
@media (max-width: 560px) {
  .presets button { padding: 3px 7px; }
  .presets button:nth-child(3) { display: none; }
}
.presets button[aria-pressed="true"] { color: var(--accent-text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--surface); }
.plan-card { display: flex; flex-direction: column; gap: 12px; padding: var(--s3); border-left: 1px solid var(--line); position: relative; transition: background var(--t-med); }
.plan-card:first-child { border-left: 0; }
.plan-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease); }
.plan-card.best { background: var(--bg); }
.plan-card.best::before { transform: none; }
.plan-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.plan-card h3 { font: 500 var(--t-sm) var(--sans); }
.plan-card .tag { font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.plan-total { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-total .amt { font: 500 clamp(26px, 2.6vw, 36px)/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan-total span { font: 12px var(--mono); color: var(--dim); }
.plan-card.best .amt { color: var(--accent-text); }
.plan-bar { display: block; height: 4px; background: var(--sunken); }
.plan-bar i { display: block; height: 100%; background: var(--line-strong); transition: width var(--t-slow) var(--ease), background var(--t-med); }
.plan-card.best .plan-bar i { background: var(--accent); }
.plan-detail { font-size: var(--t-s); color: var(--muted); flex: 1; }
.plan-card .btn { align-self: flex-start; }
.est-note { margin-top: var(--s2); font: 12px var(--mono); color: var(--dim); }

.cmp-head { margin-bottom: var(--s3); }
.cmp-wrap { border: 1px solid var(--line); }
.cmp { font-size: var(--t-sm); }
.cmp thead th { vertical-align: bottom; padding: 16px 16px 12px; border-bottom: 1px solid var(--line-strong); background: var(--surface); text-transform: none; letter-spacing: 0; }
.cmp-name { display: block; font: 500 var(--t-sm) var(--sans); color: var(--fg); }
.cmp-price { display: block; font: 12px var(--mono); color: var(--dim); margin-top: 2px; }
.cmp th[scope=row] { position: sticky; left: 0; background: var(--bg); text-align: left; font: 400 var(--t-sm) var(--sans); color: var(--muted); border-bottom: 1px solid var(--line); padding: 14px 16px; white-space: nowrap; }
.cmp td { padding: 14px 16px; font-family: var(--mono); font-size: 14px; }
.cmp tbody tr:hover td, .cmp tbody tr:hover th { background: var(--surface); }
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: 0; }

/* ways to pay: a hairline grid of cards, each with its icon */
.pay { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: var(--s4); background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.pay div { display: grid; gap: 10px; align-content: start; padding: var(--s3); background: var(--bg); }
.pay dt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.pay dt .soon { margin-left: 0; }
.pay-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--accent-text); }
.pay dd { color: var(--fg); font-size: var(--t-sm); line-height: 1.5; }

/* ---- privacy ---- */
.flow { list-style: none; border-top: 1px solid var(--line-strong); }
.flow li { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--s2); padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.fn { font: 400 var(--t-xs) var(--mono); color: var(--dim); }
.flow b { font-weight: 500; }
.flow p { color: var(--muted); font-size: var(--t-sm); margin-top: 2px; }
.disk { font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--line-strong); color: var(--dim); }
.disk.yes { color: var(--accent); border-color: var(--accent); }
.docs-links { list-style: none; border-top: 1px solid var(--line-strong); }
.docs-links a { display: flex; justify-content: space-between; gap: var(--s3); padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: color .15s; }
.docs-links a span { color: var(--dim); font-size: 14px; text-align: right; }
.docs-links a:hover { color: var(--accent); }

/* ---- faq ---- */
.faq-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: end; padding: var(--s6) var(--gutter) var(--s4); border-bottom: 1px solid var(--line); }
.faq-head .page-title { margin-top: 12px; }
.faq-head > * { min-width: 0; }
.faq-search { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-strong); padding: 0 var(--s2); font-family: var(--mono); color: var(--dim); transition: border-color .15s; }
.faq-search:focus-within { border-color: var(--muted); }
.faq-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--fg); font: 400 var(--t-sm) var(--sans); padding: 14px 0; }
.faq-search input::-webkit-search-cancel-button { display: none; }
.faq-search .n { font-size: 11px; white-space: nowrap; }
.faq-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.faq-cats { position: sticky; top: var(--nav-h); align-self: start; padding: var(--s3) 0; border-right: 1px solid var(--line); }
.faq-cats button, .faq-cats a { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; background: none; border: 0; border-left: 1px solid transparent; color: var(--muted); font: 400 var(--t-sm) var(--sans); padding: 10px var(--s3); cursor: pointer; text-align: left; transition: color .15s; }
.faq-cats button:hover, .faq-cats a:hover { color: var(--fg); }
.faq-cats button[aria-pressed="true"], .faq-cats a[aria-current] { color: var(--fg); border-left-color: var(--accent); }
/* on the policy pages the items are sections: the title takes the room, then any Soon pill, then the number */
.faq-cats a > span:first-child { flex: 1; min-width: 0; }
.faq-cats .soon { margin-left: 0; padding: 0 5px; font-size: 8.5px; }
.faq-cats i { font: 400 11px var(--mono); color: var(--dim); font-style: normal; }
.faq-list { padding: var(--s1) var(--s5) var(--s5); }
.grp { font: 400 var(--t-xs) var(--mono); letter-spacing: .1em; color: var(--dim); text-transform: uppercase; padding: var(--s4) 0 6px; }
#qs details { border-bottom: 1px solid var(--line); transition: background .6s; }
#qs details.flash { background: color-mix(in srgb, var(--accent) 7%, transparent); }
#qs summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 48px 1fr 24px; padding: 20px 0; font-size: var(--t-md); align-items: baseline; }
#qs summary::-webkit-details-marker { display: none; }
#qs summary .no { font: 400 11px var(--mono); color: var(--dim); transition: color .15s; }
#qs summary .ic { font: 400 16px var(--mono); color: var(--dim); text-align: right; transition: transform .2s, color .15s; }
#qs summary:hover .ic, #qs summary:hover .t { color: var(--fg); }
#qs details[open] summary .ic { transform: rotate(45deg); color: var(--accent); }
#qs details[open] summary .no { color: var(--accent); }
#qs details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--t-med) var(--ease), content-visibility var(--t-med) allow-discrete; }
#qs details[open]::details-content { block-size: auto; }
#qs details[open] .ans { animation: rise var(--t-med) var(--ease); }
@keyframes reveal { from { opacity: 0; transform: translateY(-6px); } }
.ans > div { padding: 0 0 var(--s3) 48px; }
.ans-text { color: var(--muted); max-width: 62ch; font-size: var(--t-sm); }
.ans .code { margin-top: var(--s2); max-width: 64ch; }
.ans-meta { display: flex; gap: var(--s3); margin-top: var(--s2); font: 400 var(--t-xs) var(--mono); flex-wrap: wrap; }
.ans-meta a, .copy-link { color: var(--dim); background: none; border: 0; border-bottom: 1px solid var(--line-strong); padding: 0 0 1px; font: inherit; cursor: pointer; transition: color .15s, border-color .15s; }
.ans-meta a:hover, .copy-link:hover { color: var(--fg); border-color: var(--fg); }
.faq-empty { padding: var(--s4) 0; color: var(--muted); }
.faq-stuck { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: var(--s5); border: 1px solid var(--line); padding: var(--s3); flex-wrap: wrap; }
.faq-stuck b { font-weight: 500; display: block; }
.faq-stuck span { color: var(--muted); font-size: 14px; }

/* ---- 404 ---- */
.nf { border-top: 0; padding: 0; min-height: 60vh; display: grid; grid-template-columns: 1fr 1fr; }
.nf-copy { padding: var(--s6) var(--gutter); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.nf-stage { justify-content: center; min-height: 0; }
.nf-stage .mg-grid { flex: none; }
.nf-stage .mg-grid span.a { animation-delay: calc(var(--d, 0) * 1ms); }
@media (max-width: 1023px) { .nf { grid-template-columns: 1fr; } .nf-copy { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s5) var(--gutter); } }
.nf .page-title { margin-top: 12px; max-width: 16ch; }
.nf .lede { margin-bottom: var(--s4); }

/* ---- responsive ---- */
@media (max-width: 1023px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s5) var(--gutter); }
  .grid-stage { min-height: 460px; padding: var(--s2); }
  .mg-phase { margin-left: 0; width: 100%; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-card:nth-child(3) { border-left: 0; }
  .plan-card:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-head, .ft { grid-template-columns: 1fr; gap: var(--s3); }
  .ft { gap: var(--s4); }
  .ft-models { margin-left: 32px; }
  .detail-grid { grid-template-columns: 1fr; }
  .events li { grid-template-columns: 28px minmax(0, 1fr); }
  .events li span { grid-column: 2; }
  .shapes { grid-template-columns: 1fr; }
  .faq-cats { scrollbar-width: none; }
  .faq-cats::-webkit-scrollbar { display: none; }
  .faq-head { grid-template-columns: 1fr; padding-top: var(--s5); }
  .faq-body { grid-template-columns: 1fr; }
  .faq-cats { display: flex; overflow-x: auto; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); background: var(--bg); z-index: 5; }
  .faq-cats button, .faq-cats a { width: auto; white-space: nowrap; border-left: 0; border-bottom: 1px solid transparent; gap: 8px; padding: 12px var(--s2); }
  .faq-cats button[aria-pressed="true"], .faq-cats a[aria-current] { border-bottom-color: var(--accent); }
  .faq-list { padding: 0 var(--gutter) var(--s5); }
  .docs-links a { flex-direction: column; gap: 2px; }
  .docs-links a span { text-align: left; }
}
@media (max-width: 560px) {
  .ans > div { padding-left: 0; }
  #qs summary { grid-template-columns: 36px 1fr 20px; }
  .flow li { grid-template-columns: 32px 1fr; }
  .flow .disk { grid-column: 2; justify-self: start; }
}

/* ---- status ---- */
.status-top { padding-top: var(--s4); padding-bottom: var(--s4); }
/* the floating arrow down to the model list: it bobs while there's more to see, and leaves once you're there */
.status-jump { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 16px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill); box-shadow: 0 14px 32px -14px rgba(0, 0, 0, .55); animation: jump-bob 2.2s ease-in-out infinite; transition: opacity var(--t-med), translate var(--t-med) var(--ease), border-color var(--t-fast); }
.status-jump:hover { border-color: var(--accent); }
.status-jump-arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; }
.status-jump.away { opacity: 0; translate: -50% 16px; pointer-events: none; }
@keyframes jump-bob { 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .status-jump { animation: none; } }
.status-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--s5); align-items: center; }
/* the rack: units with a status light and activity lights that flicker while the model serves */
.status-rack { width: 100%; height: auto; }
.rack-frame { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.rack-face { fill: var(--sunken); stroke: var(--line); }
.rack-id { font: 11px var(--mono); fill: var(--fg); }
.rack-led { fill: var(--ok); }
.rack-act { fill: var(--ok); opacity: .15; animation: rack-blink 1.7s steps(2, jump-none) infinite; }
.rack-unit.queued .rack-led { fill: var(--warn); }
.rack-unit.queued .rack-act { animation: none; fill: var(--line-strong); opacity: .5; }
.rack-unit.queued .rack-id { fill: var(--muted); }
@keyframes rack-blink { 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .rack-act { animation: none; opacity: .6; } }
@media (max-width: 860px) { .status-board { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } }
.overall-line { display: flex; align-items: center; gap: 14px; font-size: var(--t-lg); letter-spacing: -.02em; }
.overall-line b { font-weight: 500; }
.pulse { width: 10px; height: 10px; background: var(--ok); position: relative; flex: none; }
.pulse::after { content: ""; position: absolute; inset: -5px; border: 1px solid var(--ok); animation: pulse 2s var(--ease) infinite; }
.overall-line.degraded .pulse { background: var(--warn); }
.overall-line.degraded .pulse::after { border-color: var(--warn); }
@keyframes pulse { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }
.overall-note { font: 12px var(--mono); color: var(--dim); margin-top: 6px; }
.status-models { position: relative; }
.status-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.status-legend { display: flex; align-items: center; gap: 6px 12px; font: 11px var(--mono); color: var(--muted); flex-wrap: wrap; }
.status-legend i { width: 8px; height: 8px; background: var(--ok); display: inline-block; margin-right: -6px; }
.status-legend i.w { background: var(--warn); } .status-legend i.b { background: var(--bad); }
.status-legend span { color: var(--dim); margin-left: 8px; }
.status-rows { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 0 var(--s3); }
.srow { padding: var(--s3) 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.status-rows .srow:first-child { border-top: 0; }
.srow-head { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; align-items: baseline; }
.srow-id { font: 500 var(--t-sm) var(--mono); }
.srow-meta { font: 12px var(--mono); color: var(--muted); }
.srow-meta b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.bars { display: flex; gap: 2px; height: 34px; }
.bar { flex: 1; min-width: 1px; border: 0; padding: 0; background: var(--ok); cursor: default; opacity: .85; transition: opacity var(--t-fast), transform var(--t-fast) var(--ease); transform-origin: bottom; }
.bar.w { background: var(--warn); } .bar.b { background: var(--bad); }
.bar:hover, .bar:focus-visible { opacity: 1; transform: scaleY(1.18); outline-offset: 1px; }
.is-loaded .bar { animation: grow var(--t-slow) var(--ease) both; }
@keyframes grow { from { transform: scaleY(0); } }
.tip { position: absolute; left: 0; top: 0; z-index: 5; background: var(--ink); color: var(--ink-fg); font: 12px var(--mono); padding: 6px 9px; white-space: nowrap; pointer-events: none; }
/* incidents: a rail down the left with a dot per incident */
.incidents { list-style: none; margin-top: var(--s4); border-left: 1px solid var(--line-strong); margin-left: 4px; }
.incidents li { position: relative; display: grid; grid-template-columns: 90px 1fr auto; gap: var(--s3); padding: 0 0 var(--s3) var(--s3); align-items: baseline; }
.incidents li::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ok); }
.incidents b { font-weight: 500; }
.incidents p { color: var(--muted); font-size: var(--t-sm); margin-top: 4px; max-width: 64ch; }
.incidents li.inc-empty { display: block; color: var(--muted); }
.inc-date { font: 12px var(--mono); color: var(--dim); }
.inc-state { font: 500 10px/1.6 var(--mono); color: var(--ok); text-transform: uppercase; letter-spacing: .08em; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); border-radius: var(--r-pill); }

/* ---- changelog ---- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s4); }
.chips button { font: 500 12px var(--mono); letter-spacing: .04em; padding: 8px 14px; min-height: 40px; background: none; border: 1px solid var(--line-strong); color: var(--muted); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.chips button:hover { color: var(--fg); border-color: var(--fg); }
.chips button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
/* the entries hang off a rail, a dot per entry in its type's colour, each in a card */
.entries { max-width: 900px; }
.entry-month { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding: var(--s4) 0 var(--s2) 128px; }
.entry { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: var(--s3); padding-bottom: var(--s2); }
/* the line fills to --fill as you scroll (changelog.js), and an entry's dot fills once the line reaches it */
.entry { --dot: var(--accent); }
.entry[data-tag="API"] { --dot: var(--ok); }
.entry[data-tag="Pricing"] { --dot: var(--warn); }
.entry::before { content: ""; position: absolute; left: 117px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--accent) var(--fill, 100%), var(--line-strong) 0); }
.entry::after { content: ""; position: absolute; left: 112px; top: 20px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--dot); transition: background 300ms; }
.entry.reached::after { background: var(--dot); }
.entry.newest::after { animation: cl-ping 2s ease-out infinite; }
@keyframes cl-ping { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot) 55%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }
.entry time { font: 13px var(--mono); color: var(--muted); padding-top: 16px; text-align: right; padding-right: 14px; }
.entry-card { margin-left: 18px; padding: var(--s2) var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--t-fast); }
.entry-card:hover { border-color: var(--line-strong); }
.entry h3 { font-size: var(--t-lg); font-weight: 500; letter-spacing: -.02em; margin: 8px 0 6px; }
.entry p { color: var(--muted); max-width: 62ch; }
.entry .pv-tag { margin-bottom: 0; }
@media (max-width: 760px) {
  .entry-month { padding-left: 0; }
  .entry { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-left: 22px; }
  .entry::before { left: 5px; }
  .entry::after { left: 0; top: 4px; }
  .entry time { text-align: left; padding: 0; }
  .entry-card { margin-left: 0; }
}

@media (max-width: 760px) {
  .incidents li { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- privacy: the walkthrough (privacy.js), steps on the left, the scene kept in view on the right ---- */
.walk { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s5); align-items: start; }
.walk-steps { list-style: none; margin-top: var(--s4); }
/* each step is tall enough that scrolling past it takes a moment; the last needs only to reach the middle */
.walk-steps li { display: grid; grid-template-columns: 44px 1fr auto; gap: 4px var(--s2); align-content: start; min-height: 46vh; padding-top: var(--s2); border-top: 1px solid var(--line); opacity: .45; transition: opacity var(--t-med), border-color var(--t-med); }
.walk-steps li:last-child { min-height: 30vh; }
.walk-steps li.on { opacity: 1; border-top-color: var(--accent); }
.walk-steps b { font: 500 var(--t-md) var(--sans); }
.walk-steps p { grid-column: 2 / -1; color: var(--muted); font-size: var(--t-sm); max-width: 44ch; }
.walk-steps .disk { grid-column: 3; grid-row: 1; align-self: start; font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--line-strong); color: var(--muted); }
.walk-steps .disk.yes { border-color: var(--accent); color: var(--accent-text); }
.walk-stage { position: sticky; top: calc(var(--nav-h) + var(--s4)); padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.walk-svg { display: block; width: 100%; height: auto; overflow: visible; }
.walk-route { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 3 4; transition: stroke var(--t-med); }
.walk-route.on { stroke: var(--accent); stroke-dasharray: none; }
.walk-screen { font: 7px var(--mono); fill: var(--ink-fg); white-space: pre; }
.walk-screen.reply { fill: var(--bad); }
.walk-small { font: 500 8px var(--mono); fill: var(--dim); }
.walk-led { fill: var(--ink-dim); transition: fill var(--t-med); }
.walk-led.on { fill: var(--ok); }
.walk-led.busy { animation: rl-led .25s steps(1) infinite; }
.walk-lock rect { fill: var(--accent); }
.walk-shackle { fill: none; stroke: var(--accent); stroke-width: 1.6; transition: transform 300ms var(--ease); }
.walk-lock { transition: opacity 400ms 300ms; }
.walk-lock.open { opacity: 0; }
.walk-lock.open .walk-shackle { transform: translateY(-3px); }
.walk-token { fill: var(--bad); }
.walk-disk { fill: var(--sunken); stroke: var(--line-strong); stroke-width: 1.2; }
.walk-disk-top { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.walk-disk-note { font: 500 8.5px var(--mono); fill: var(--accent-text); }
.walk-ticket { fill: var(--surface); stroke: var(--accent); stroke-width: 1; }
.walk-ticket-lines { stroke: var(--accent-text); stroke-width: 1; }
.walk-value { font: 500 15px var(--mono); fill: var(--fg); }
.walk-value.ok { fill: var(--ok); }
.walk-bar { fill: var(--sunken); }
.walk-bar-fill { fill: var(--accent); }
/* where your data goes: a table of every part of a request against every place it could end up */
.map-key { list-style: none; display: flex; flex-wrap: wrap; gap: 8px var(--s3); align-self: end; font-size: var(--t-sm); color: var(--muted); }
.map-key li { display: flex; align-items: center; gap: 8px; }
.map-key i { width: 10px; height: 10px; border-radius: 2px; }
.map { width: 100%; margin-top: var(--s4); border-collapse: collapse; font-size: var(--t-sm); }
.map th, .map td { padding: 14px var(--s2) 14px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.map thead th { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border-bottom-color: var(--line-strong); }
.map tbody th { font: 500 var(--t-sm) var(--sans); letter-spacing: 0; text-transform: none; color: var(--fg); width: 18%; }
.map tbody tr { transition: background var(--t-fast); }
.map tbody tr:hover { background: var(--surface); }
.map td > span { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; padding-left: 14px; position: relative; }
.map td > span::before, .map-key i { content: ""; background: var(--c); }
.map td > span::before { position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 2px; }
.map-mem { --c: var(--accent); }
.map-hash { --c: var(--warn); }
.map-keep { --c: var(--fg); }
.map-none, .map-soon { --c: var(--line-strong); color: var(--dim); }
.map .soon { margin: 0; }
@media (max-width: 860px) {
  .walk { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  /* on phones the scene sits at the top of the screen while the steps scroll up under it */
  .walk-stage { order: -1; top: var(--nav-h); z-index: 2; padding: var(--s1); border-radius: 0; margin: 0 calc(-1 * var(--gutter)); border-width: 0 0 1px; }
  .walk-steps li { min-height: 34vh; }
  .map thead { display: none; }
  .map tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
  .map tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 6px; }
  .map th, .map td { border: 0; padding: 4px 0; }
  .map td { display: contents; }
  .map td::before { content: attr(data-col); color: var(--dim); font: 11px var(--mono); padding: 4px 0; }
}
.fn { font: 12px var(--mono); color: var(--dim); }

/* ---- legal layout: a centred header band, numbered contents beside the text ---- */
.legal-hero { border-bottom: 1px solid var(--line); }
/* centred on the title's capitals: "middle" centres it half an x-height above the baseline, and the capitals'
   middle is about .1em higher than that */
.legal-mark { display: inline-grid; place-items: center; width: .9em; height: .9em; margin-right: .25em; vertical-align: middle; translate: 0 -.1em; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--accent-text); }
.legal-mark .ico { width: .45em; height: .45em; }
.pill { display: inline-block; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-strong); padding: 3px 10px; background: var(--bg); }
.dx-link .soon { flex: none; margin-left: auto; padding: 0 5px; font-size: 8.5px; }
.legal-body { min-width: 0; }
.legal-meta { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.legal-body .callout { margin: var(--s3) 0 var(--s1); }
.legal-body section { border-top: 0; padding: var(--s4) 0 0; scroll-margin-top: calc(var(--nav-h) + 16px); }
.legal-body h2 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.015em; margin-bottom: 10px; }
.legal-body h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.legal-body h2 .n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sunken); border: 1px solid var(--line); font: 500 12px var(--mono); color: var(--muted); }
.legal-body p, .legal-body li { max-width: 80ch; color: var(--muted); font-size: var(--t-sm); line-height: 1.75; }
.legal-body p + p { margin-top: 10px; }
.legal-body b { color: var(--fg); font-weight: 500; }
.legal-body code { font: .86em var(--mono); background: var(--sunken); border: 1px solid var(--line); padding: 0 5px; color: var(--fg); }
.legal-body ul { margin: 10px 0 0 18px; display: grid; gap: 6px; }
.legal-body li::marker { color: var(--accent-text); }

/* ---- about ---- */
/* One column per stat, however many a page has. */
.stat-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.stat-strip div { display: flex; flex-direction: column-reverse; gap: 6px; padding: var(--s3) var(--gutter); border-left: 1px solid var(--line); }
.stat-strip div:first-child { border-left: 0; }
.stat-strip dt { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.stat-strip dd { font: 500 var(--t-xl)/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.about-copy { margin-top: var(--s2); color: var(--muted); max-width: 52ch; }
/* the timeline: a track running left to right, oldest first, through a dot per milestone; a stem from each dot
   down to its card; the newest dot filled and pulsing. Below 900px it turns to run down the left instead. */
.about-timeline { --dot: 16px; --rise: 30px; position: relative; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s2); margin-top: var(--s4); padding-top: var(--rise); }
.about-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--dot) / 2 - 1px); height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--line-strong), var(--accent)); }
.about-timeline li { position: relative; display: flex; flex-direction: column; }
.about-timeline li::before { content: ""; position: absolute; left: calc(16px + var(--dot) / 2 - 1px); top: calc(var(--dot) - var(--rise)); width: 2px; height: calc(var(--rise) - var(--dot)); background: var(--line-strong); }
.tl-dot { position: absolute; left: 16px; top: calc(-1 * var(--rise)); width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.tl-now .tl-dot { background: var(--accent); }
.tl-now .tl-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--accent); animation: pulse 2s var(--ease) infinite; }
.tl-card { flex: 1; display: grid; gap: 8px; align-content: start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--t-fast); }
.tl-card:hover, .tl-now .tl-card { border-color: var(--line-strong); }
.about-timeline time { font: 12px var(--mono); color: var(--dim); }
.about-timeline .pv-tag { justify-self: start; margin: 0; }
.about-timeline b { font-weight: 500; line-height: 1.35; }
@media (max-width: 900px) {
  .about-timeline { grid-auto-flow: row; grid-auto-columns: auto; padding: 0 0 0 var(--rise); }
  .about-timeline::before { left: calc(var(--dot) / 2 - 1px); right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--line-strong), var(--accent)); }
  .about-timeline li::before { left: calc(var(--dot) - var(--rise)); top: calc(16px + var(--dot) / 2 - 1px); width: calc(var(--rise) - var(--dot)); height: 2px; }
  .tl-dot { left: calc(-1 * var(--rise)); top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .tl-now .tl-dot::after { animation: none; } }
/* what we won't do: each statement big, struck through in red once it has wiped in, the reason beside it */
.about-wont { list-style: none; margin-top: var(--s4); border-top: 1px solid var(--line-strong); }
.about-wont li { display: grid; grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s3); align-items: baseline; padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.about-wont .n { font: 12px var(--mono); color: var(--dim); }
.about-wont b { justify-self: start; font: 500 var(--t-xl)/1.15 var(--sans); letter-spacing: -.03em; color: var(--muted);
  background: linear-gradient(color-mix(in srgb, var(--bad) 85%, transparent), color-mix(in srgb, var(--bad) 85%, transparent)) no-repeat 0 55% / 0 3px; transition: clip-path 700ms var(--ease), background-size 600ms var(--ease) 500ms; }
.about-wont b.in { background-size: 100% 3px; }
.about-wont p { color: var(--muted); font-size: var(--t-sm); line-height: 1.6; max-width: 46ch; }
@media (prefers-reduced-motion: reduce) { .about-wont b { background-size: 100% 3px; } }
.about-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: end; }
.about-contact .cta { margin-top: var(--s3); }
.about-mail { list-style: none; border-top: 1px solid var(--line-strong); }
.about-mail a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding: 14px 0; border-bottom: 1px solid var(--line); transition: color var(--t-fast); }
.about-mail span { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.about-mail code { font: 14px var(--mono); }
.about-mail a:hover { color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) { .about-link { animation: none; } }
@media (max-width: 560px) {
  .about-wont li { grid-template-columns: 32px minmax(0, 1fr); gap: 8px var(--s2); }
  .about-wont p { grid-column: 2; }
  .about-wont b { font-size: var(--t-lg); }
  .about-mail a { flex-direction: column; gap: 2px; }
}
.fact-list > div { display: grid; grid-template-columns: 110px 1fr; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line); }
.fact-k { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding-top: 4px; }
.fact-list p { color: var(--muted); }
.placeholder-note { padding: var(--s2) var(--gutter); font: 12px var(--mono); color: var(--dim); border-top: 1px solid var(--line); }

@media (max-width: 1023px) {
  .about-contact { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; }
  .stat-strip div:nth-child(4) { border-left: 0; }
  .stat-strip div:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .fact-list > div { grid-template-columns: 1fr; gap: 4px; }
}
.email { overflow-wrap: anywhere; }
.sk-q { padding: 22px 0; border-bottom: 1px solid var(--line); }
.faq-cats .sk-line { margin: 14px var(--s3); }
@media (max-width: 560px) {
  .est-sentence { font-size: 22px; line-height: 1.9; }
  .seg { display: flex; width: fit-content; margin: 6px 0; flex-wrap: wrap; }
  .seg label > span { padding: 8px 10px; font-size: 13px; }
  .plans { grid-template-columns: 1fr; }
  .plan-card { border-left: 0; }
  .plan-card + .plan-card { border-top: 1px solid var(--line); }
  .pay { grid-template-columns: 1fr; }
  .pay div, .pay div + div { padding-left: 0; padding-right: 0; border-right: 0; }
  .pay div + div { border-top: 1px solid var(--line); }
}

/* docs, API reference and legal on small screens: the sidebar becomes a "Contents" dropdown */
@media (max-width: 1023px) {
  .dx { grid-template-columns: 1fr; background: none; }
  .dx-side { z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); }
  .dx-toggle { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 var(--gutter); list-style: none; cursor: pointer; font-size: var(--t-sm); }
  .dx-toggle::-webkit-details-marker { display: none; }
  .dx-toggle::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform var(--t-med) var(--ease); }
  .dx-side[open] .dx-toggle::after { transform: rotate(225deg) translateY(-1px); }
  .dx-side-body { max-height: 65dvh; border-top: 1px solid var(--line); padding: var(--s2) var(--gutter) var(--s3); }
  .dx-main { padding: var(--s4) var(--gutter) var(--s5); }
  .dx-title { font-size: 34px; }

}
@media (max-width: 560px) {
  .ep summary { flex-wrap: wrap; gap: 6px 8px; }
  .ep summary .ep-path { flex: 0 1 auto; max-width: calc(100% - 150px); }
  .ep-sum { order: 4; flex-basis: 100%; white-space: normal; }
  .ep-auth { margin-left: auto; }
  .step { grid-template-columns: 1fr; gap: 10px; }
}

/* ---- rounded corners: page components ---- */
.pane, .callout, .step, .facts-grid div, .endpoint, .faq-stuck { border-radius: var(--r); }
.ep, .plans, .cmp-wrap { border-radius: var(--r); overflow: hidden; }
.seg { border-radius: var(--r-sm); overflow: hidden; }
.dx-search, .dx-link, .faq-search, .lang-pick select, .row-toggle { border-radius: var(--r-sm); }
.chip, .pill, .disk, .ep-auth, .fam-filter button, .chips button, .code-tabs .tabs button { border-radius: var(--r-pill); }
.m, code.ic, .doc code, .params code, .dx-sec code, .ep-body > p code, .callout code, .facts-grid code, .legal-body code, .dx-lede code { border-radius: 4px; }
.step-n { border-radius: 50%; }
.bar { border-radius: 2px; }
.status-legend i { border-radius: 50%; }
.mrow > td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.mrow > td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.mrow.open > td:first-child { border-bottom-left-radius: 0; }
.mrow.open > td:last-child { border-bottom-right-radius: 0; }
.detail.open td { border-radius: 0 0 var(--r-sm) var(--r-sm); }

/* ---- the developer pages' animations (dev-motion.js) ---- */
/* the docs' terminal: the request typed, the reply streaming in red like output tokens, the tally */
.term { margin-top: var(--s3); max-width: 760px; background: var(--ink); border: 1px solid var(--ink-line); border-radius: var(--r); overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--ink-line); }
.term-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-line); }
.term-bar span { margin-left: 8px; font: 500 11px var(--mono); color: var(--ink-dim); }
.term-body { margin: 0; padding: 14px 16px; min-height: calc(7 * 1.65em); font: 12.5px/1.65 var(--mono); color: var(--ink-fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.term-ps { color: var(--ok); }
.term-out { color: var(--bad); }
.term-done { color: var(--ink-dim); }
.term-caret { display: inline-block; width: 7px; height: 1.1em; vertical-align: -3px; background: var(--ink-fg); visibility: hidden; }
.term.typing .term-caret { visibility: visible; }
/* streaming: the raw events (newest at the bottom, each lit as it lands) beside the text they make */
.sse { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); margin: var(--s3) 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sse-pane { min-width: 0; padding: 12px 14px; background: var(--surface); }
.sse-pane:first-child { background: var(--ink); border-right: 1px solid var(--line); }
.sse-k { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.sse-wire { display: flex; flex-direction: column; justify-content: flex-end; height: 150px; margin-top: 8px; overflow: hidden; font: 11px/1.7 var(--mono); color: var(--ink-dim); }
.sse-wire span { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sse-wire .new { animation: sse-new 1s ease-out; }
@keyframes sse-new { from { color: var(--ink-fg); } }
.sse-text { margin-top: 8px; min-height: 3.2em; font-size: var(--t-md); }
.sse-usage { margin-top: 8px; font: 12px var(--mono); color: var(--ok); }
/* retries: tries and waits to scale, each filling over its real length */
.retry-wrap { margin: var(--s3) 0; }
.retry { display: flex; gap: 3px; }
.retry .seg { position: relative; min-width: 38px; height: 30px; background: var(--sunken); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.retry .seg::before { content: ""; position: absolute; inset: 0; background: var(--c); transform: scaleX(0); transform-origin: left; }
.retry .seg.on::before { transform: scaleX(1); transition: transform var(--ms) linear; }
.retry .bad { --c: color-mix(in srgb, var(--bad) 30%, transparent); }
.retry .ok { --c: color-mix(in srgb, var(--ok) 30%, transparent); }
.retry .wait { --c: color-mix(in srgb, var(--accent) 16%, transparent); border-style: dashed; }
.retry b { position: relative; display: grid; place-items: center; width: 100%; height: 100%; font: 500 11px var(--mono); color: var(--dim); white-space: nowrap; transition: color 150ms; }
.retry .on b { color: var(--fg); }
.retry .bad.on b { color: var(--bad); }
.retry .ok.on b { color: var(--ok); }
.retry-note { margin-top: 8px; font-size: 13px; color: var(--muted); }
/* the API reference's switchboard: a request runs to the API, then to the endpoint that lights */
.board { display: flex; align-items: center; margin-top: var(--s3); font: 12px var(--mono); }
.board-node { padding: 7px 12px; white-space: nowrap; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.board code { padding: 0; background: none; border: 0; font: inherit; }
.board-line { position: relative; flex: 0 1 56px; min-width: 20px; height: 1px; background: var(--line-strong); }
.board-line i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0; }
.board.go .board-line i { animation: board-run 500ms ease-in forwards; }
.board.go .board-line.second i { animation-delay: 500ms; }
@keyframes board-run { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
.board-eps { list-style: none; display: grid; gap: 4px; }
.board-eps li { display: flex; align-items: center; gap: 8px; padding: 5px 10px; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-sm); transition: color 200ms, border-color 200ms, background 200ms; }
.board-eps li.lit, .dx-link.lit { transition-delay: .9s; }
.board-eps li.lit { color: var(--fg); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.dx-link.lit { color: var(--fg); background: var(--bg); }
/* an endpoint's card answering: the request runs out along its summary's foot and back, then its status shows */
.ep summary { position: relative; }
.ep summary::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); opacity: 0; }
.ep summary.send::after { animation: ep-send 900ms var(--ease); }
@keyframes ep-send { 0% { transform: scaleX(0); transform-origin: left; opacity: 1; } 50% { transform: scaleX(1); transform-origin: left; opacity: 1; } 50.1% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; opacity: 1; } }
.ep-status { font: 500 11px var(--mono); color: var(--ok); white-space: nowrap; }
.ep-status:empty { display: none; }
/* rate limits: a plan's slots, each draining as its request runs; a request that finds none flashes the 429 */
.slots { margin-top: var(--s3); padding: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.slots-plans { display: flex; flex-wrap: wrap; gap: 4px; }
.slots-plans button, .rf-topics button { padding: 5px 10px; font: 500 12px var(--sans); color: var(--muted); background: none; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; }
.slots-plans button span { margin-left: 4px; font: 11px var(--mono); color: var(--dim); }
.slots-plans button[aria-pressed="true"], .rf-topics button[aria-pressed="true"] { color: var(--fg); background: var(--bg); border-color: var(--line-strong); }
.slots-k { margin-top: var(--s2); font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.slots-row { display: flex; gap: 6px; margin-top: 8px; }
.slots-row i { position: relative; flex: 1; max-width: 72px; height: 26px; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; }
.slots-row i::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 55%, transparent); transform: scaleX(0); transform-origin: left; }
.slots-row i.busy::before { animation: slot-run var(--ms, 2s) linear forwards; }
@keyframes slot-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.slots-note { margin-top: 8px; font: 500 12px var(--mono); color: var(--dim); }
.slots-note.flash { animation: slot-bounce 900ms ease-out; }
@keyframes slot-bounce { 0%, 40% { color: var(--bad); } }
@media (prefers-reduced-motion: reduce) {
  .slots-row i.busy::before { animation: none; transform: none; }
  .slots-note.flash { color: var(--bad); }
}
@media (max-width: 680px) {
  .sse { grid-template-columns: minmax(0, 1fr); }
  .sse-pane:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .board { flex-wrap: wrap; gap: 8px; }
  .board-line { display: none; }
  .retry b { font-size: 9.5px; }
  .retry .seg { min-width: 30px; }
}

/* ---- account pages: register, sign-in, account ---- */
.auth { max-width: 460px; margin-inline: auto; padding: var(--s5) var(--gutter) var(--s6); }
.auth .page-head { display: block; padding: 0; margin-bottom: var(--s4); }
.auth .page-head .page-title { font-size: var(--t-xl); }
.auth .page-head .lede { justify-self: start; margin-top: var(--s2); max-width: none; }
.auth-form { display: flex; flex-direction: column; gap: var(--s3); }
.auth-form[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 6px; font: 500 var(--t-s) var(--sans); color: var(--muted); }
.field input, .field textarea { font: 400 var(--t-sm) var(--sans); color: var(--fg); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 11px 12px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field textarea { font-family: var(--mono); font-size: var(--t-xs); line-height: 1.5; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.slip-move { margin-top: var(--s4); }
.slip-move > p { color: var(--muted); font-size: var(--t-s); margin-top: var(--s1); margin-bottom: var(--s2); }
.field-hint { font: 400 var(--t-xs) var(--sans); color: var(--dim); text-transform: none; letter-spacing: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font: 400 var(--t-s) var(--sans); color: var(--muted); line-height: 1.45; cursor: pointer; }
.check input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.auth-error { color: var(--bad); font: 400 var(--t-s) var(--sans); }
.auth-error[hidden] { display: none; }
.auth-alt { color: var(--muted); font-size: var(--t-s); margin-top: var(--s3); }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent-text); font: 500 var(--t-s) var(--sans); border-bottom: 1px solid var(--line-strong); }
.linklike:hover { border-color: var(--accent); }
.auth-codes { margin-top: var(--s4); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.auth-codes[hidden] { display: none; }
.auth-codes p { color: var(--muted); font-size: var(--t-s); margin-top: var(--s1); }
.code-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: var(--s3) 0; }
.code-grid code { display: block; font: 500 var(--t-sm) var(--mono); background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; text-align: center; letter-spacing: .04em; }
.auth-codes .check { margin: var(--s2) 0; }
.auth-codes .btn.primary { margin-top: var(--s2); }
.auth-codes .btn.primary[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.account-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.account-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: var(--s3); }
.account-facts { display: grid; gap: var(--s2); }
.account-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); border-bottom: 1px solid var(--line); padding-bottom: var(--s2); }
.account-facts dt { color: var(--muted); font-size: var(--t-s); }
.account-facts dd { font: 500 var(--t-md) var(--sans); }
.account-card[aria-busy="true"] .account-facts dd { color: var(--dim); }
.account-danger { margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--bad); border-radius: var(--r-sm); background: color-mix(in srgb, var(--bad) 8%, transparent); }
.account-danger[hidden] { display: none; }
.account-danger p { font-size: var(--t-s); margin-bottom: var(--s2); }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn.danger:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
.plan-list { list-style: none; display: grid; gap: var(--s2); margin-top: var(--s2); }
.plan-list li { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s2) var(--s3); }
.plan-list li.current { border-color: var(--accent); }
.plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.plan-head b { font-size: var(--t-md); }
.plan-price { color: var(--muted); font-size: var(--t-s); white-space: nowrap; }
.plan-list li > p { color: var(--muted); font-size: var(--t-s); margin: 6px 0 var(--s2); }
.plan-current { display: none; color: var(--accent-text); font: 500 var(--t-s) var(--sans); }
.plan-list li.current [data-select-plan] { display: none; }
.plan-list li.current .plan-current { display: inline; }
@media (max-width: 520px) { .code-grid { grid-template-columns: 1fr; } }