@import "./house-tokens.css";

/* ==========================================================================
   oxagen.sh: the shared shell, in Oxide
   house-tokens.css above is the kit's own file, byte for byte. Oxide is the
   house system Mac set on 2026-10-09 (oxageninc/brand#111): soot and bone
   grounds with warm greys between, one gold, one rust, Space Grotesk 400 for
   hero copy and h1 to h3, Geist for every other line, Geist Mono for code,
   ids, figures, and eyebrows.

   Three layers: the kit's --ox-* table holds every hex, the --st-* stops
   below pick the soot or the bone value of each, and the --<name> roles
   alias those. Repoint an alias to reskin. A rule reads a role, and a raw
   --ox-* colour, shadow, or motion token appears only on the right of a
   custom property here.

   Gold is identity and the one action on a screen: the primary button, the
   agent dot in the mark, stella's asterisk, the first eyebrow's square, and
   the focus ring on soot. It never colours words, never fills a surface, and
   never marks a state. Rust marks where you are: link underlines and link
   words, the current page in the navigation, the ember glow on the canvas,
   the focus ring on bone, and the one accent word in a headline. A state is
   a glyph and a word in the state's own colour.

   Panels at rest are solid: 18px corners, a hairline, a lit top edge, and
   the soft deep shadow. Glass is for what floats: the header island, its
   menus, and the phone menu. The canvas carries the ember glow and the film
   grain. Buttons, chips, and filters are pills.

   Colours, corners, shadows, type sizes, spacing, and buttons read the kit's
   tokens, so a theme change reaches this site with no edit here. Spacing is
   calc(var(--ox-space) * n), and a .btn class reads only the --button-*
   roles. The brand literal guard (tools/scripts/lib/brand-literals.mjs)
   fails on any value written by hand in this file, and names each literal
   it keeps and why.
   ========================================================================== */

:root {
  /* ── LAYER 1 · STOPS ─────────────────────────────────────────────────────
     The kit stops this site uses, each a reference into house-tokens.css.
     These are the values on soot. The block after this one repoints each to
     its bone twin with light-dark(), so a browser without light-dark() keeps
     the dark site. Two diff washes have no kit stop, and they are named as
     such. */
  --st-void: var(--ox-void); /* one step above the canvas: fields, footer */
  --st-bg: var(--ox-ink); /* the canvas: soot */
  --st-panel: var(--ox-panel); /* panels, cards, code blocks */
  --st-hl: var(--ox-hl); /* a lifted row: hover and current */
  --st-border: var(--ox-border); /* hairlines */
  --st-rule: var(--ox-rule); /* a control's border */
  --st-text: var(--ox-text); /* primary text */
  --st-body: var(--ox-text-body); /* body text */
  --st-muted: var(--ox-muted); /* secondary text: labels, captions, eyebrows */
  --st-dim: var(--ox-dim); /* the quietest text: decoration only */
  --st-gold-mark: var(--ox-gold); /* gold as a mark: the agent dot, the asterisk, the eyebrow square */
  --st-gold-hover: var(--ox-gold-bright); /* the gold action under the pointer */
  --st-rust: var(--ox-rust); /* rust as a mark: underlines, the current page */
  --st-rust-text: var(--ox-rust-text); /* rust as words: links and the accent word */
  --st-ring: var(--ox-gold); /* the focus ring: gold on soot, rust ink on bone */
  --st-border-hover: var(--ox-muted); /* a control's border under the pointer */
  --st-nav-hover: var(--ox-panel); /* a navigation item under the pointer */
  --st-allowed: var(--ox-st-allowed);
  --st-allowed-text: var(--ox-st-allowed-text);
  --st-approval: var(--ox-st-approval);
  --st-approval-text: var(--ox-st-approval-text);
  --st-failed: var(--ox-st-failed);
  --st-failed-text: var(--ox-st-failed-text);
  /* The two diff washes the kit has no stop for: its allowed and failed
     marks laid over the canvas at low strength, so they move with the ramp. */
  --st-diff-add: color-mix(in srgb, var(--ox-st-allowed) 12%, var(--ox-ink));
  --st-diff-del: color-mix(in srgb, var(--ox-st-failed) 12%, var(--ox-ink));

  /* ── LAYER 2 · ROLES ─────────────────────────────────────────────────────
     The names the rest of this stylesheet and every page consume. */
  --ground: var(--st-bg);
  --void: var(--st-void);
  --panel: var(--st-panel);
  --raised: var(--st-hl);
  --line: var(--st-border);
  --rule: var(--st-rule);
  --ink: var(--st-text); /* headings and the words that matter most */
  --body: var(--st-body); /* paragraphs */
  --ink-2: var(--st-body); /* list items, table cells, figure values */
  --ink-3: var(--st-muted); /* labels, captions, help text */
  --muted: var(--st-muted);
  --faint: var(--st-muted); /* small labels in figures: secondary text, so they clear AA */
  --quiet: var(--st-dim); /* decoration only: an arrow, a placeholder, a hash */
  --gold: var(--ox-gold); /* the gold fill, the same in both themes */
  --on-gold: var(--ox-on-gold);
  --gold-mark: var(--st-gold-mark);
  --rust: var(--st-rust);
  --link: var(--st-rust-text);
  --accent-text: var(--st-rust-text);
  --ring: var(--st-ring);
  --focus-line: color-mix(in oklch, var(--ring) 75%, transparent);
  --focus-halo: color-mix(in oklch, var(--ring) 16%, transparent);
  --border-hover: var(--st-border-hover);
  --nav-hover: var(--st-nav-hover);
  --pass: var(--st-allowed); /* the allowed mark: dots, borders */
  --pass-ink: var(--st-allowed-text); /* allowed as words */
  --fail: var(--st-failed); /* the failed mark: dots, borders, washes */
  --fail-ink: var(--st-failed-text); /* failed as words */
  --warn: var(--st-failed);
  --warn-ink: var(--st-failed-text);
  --approval: var(--st-approval); /* routed to a person: the approval mark */
  --approval-ink: var(--st-approval-text);
  --add-bg: var(--st-diff-add);
  --del-bg: var(--st-diff-del);
  --glass-ring: color-mix(in srgb, var(--ink) var(--edge), transparent);

  /* ---- buttons: the roles @oxagen/uikit names (--button-primary-*,
     --button-default-*), so a .btn rule reads nothing else (the brand
     literal guard holds it to that). The primary action is the one gold
     pill on a screen: flat gold with the kit's ink on it, lighter under the
     pointer with the kit's glow, and on bone a thin edge that holds its
     shape. The default button is an outline pill that lifts one step under
     the pointer. ---- */
  --button-primary-bg: var(--ox-gold);
  --button-primary-fg: var(--ox-on-gold);
  --button-primary-border: transparent;
  --button-primary-shadow: var(--gold-shadow);
  --button-primary-hover-bg: var(--st-gold-hover);
  --button-primary-hover-shadow: var(--gold-shadow-hover);
  --button-default-bg: transparent;
  --button-default-fg: var(--ink);
  --button-default-border: var(--rule);
  --button-default-hover-bg: var(--raised);
  --button-default-hover-border: var(--border-hover);
  --button-default-hover-fg: var(--ink);
  --button-focus-line: var(--focus-line);
  --button-focus-halo: var(--focus-halo);

  /* ---- shape: the kit's corners. --r is the kit's 2xl step, the corner of
     a menu row and of a small box inside a figure. --r-lg is the website
     card corner (--ox-radius, 18px): cards, panels, figures, menus, and the
     phone menu. Buttons, chips, filters, and tags are pills. A text field
     takes the field corner. ---- */
  --r: var(--ox-radius-2xl);
  --r-lg: var(--ox-radius);
  --r-xl: var(--ox-radius);
  --r-pill: var(--ox-radius-pill);
  --r-field: var(--ox-radius-field);
  --r-badge: var(--ox-radius-badge);
  /* The page wrap is the kit's house wrap, 1180px since Mac's decision of
     2026-10-02 (oxageninc/brand#72). */
  --page-wrap: var(--ox-wrap);
  /* The header island floats 12px below the top and stands 56px tall; the
     page clears it with this. */
  --nav-h: 76px;

  /* ---- motion: the kit's control timings. Fills, borders, text, and
     underlines change over --motion-control. The press and the gold glow
     take --motion-press, and only the press moves on --ease. ---- */
  --ease: var(--ox-ease-control);
  --ease-enter: var(--ox-ease-enter);
  --ease-exit: var(--ox-ease-exit);
  --motion-control: var(--ox-motion-control);
  --motion-press: var(--ox-motion-press);
  --motion-orbit: var(--ox-motion-orbit);
  --motion-pop: var(--ox-motion-popover-enter);
  --motion-sheet: var(--ox-motion-drawer-enter);
  --pop-scale: var(--ox-motion-popover-scale);
  --press: var(--ox-press-scale);

  /* ---- type: the site's ramp, built on the kit's marketing scale, so a
     change to the scale's base in the kit reaches every size here. No rule
     on this site writes a size of its own (Mac, 2026-10-02,
     oxageninc/brand#83). Body copy is the scale's body, its base (16px by
     default). Secondary copy (cards, steps, lists, tables), buttons, and the
     top-level navigation take the base too. Small labels are one step under
     it (15px), and a lead under a heading one step over it (18px). The
     scale's micro step (14px by default) sets captions, notes, tags,
     eyebrows, table heads, and figure labels. A card heading is the scale's
     h4 (20px), the smallest size Space Grotesk takes, and a section heading
     tops out at 1.2 times its h2 (48px). ---- */
  --fs-micro: var(--ox-m-micro);
  --fs-ui: calc(var(--ox-m-body) * 15 / 16);
  --fs-small: var(--ox-m-body);
  --fs-nav: var(--ox-m-body);
  --fs-lead: calc(var(--ox-m-body) * 9 / 8);
  --fs-card: var(--ox-m-h4);
  /* Headings reach their kit step on a wide screen and shrink to the step
     below on a phone, because the kit's marketing scale has no phone steps. */
  --fs-h1: clamp(var(--ox-m-h2), 6vw, var(--ox-m-h1));
  --fs-h2: clamp(var(--ox-m-h3), 4vw, var(--ox-m-h2));

  /* ---- the theme switches for pictures: a page carries the kit's dark and
     light art side by side and shows the one for its theme. ---- */
  --show-dark: block;
  --show-light: none;
}

/* ── THEMES ────────────────────────────────────────────────────────────────
   Dark comes first. The page follows the OS until the footer's theme
   control pins it. The head script writes the resolved theme to
   <html data-theme>, so a pinned choice wins over the OS, and a page without
   script follows the OS on its own.
   Each colour stop above is repointed with light-dark(): the first value is
   the kit's stop on bone, the second its stop on soot. The tokens stay
   unregistered, so a subtree that sets its own color-scheme (the terminal)
   resolves them again for itself. */
:root {
  color-scheme: light dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}
@supports (color: light-dark(white, black)) {
  :root {
    --st-void: light-dark(var(--ox-paper-void), var(--ox-void));
    --st-bg: light-dark(var(--ox-paper), var(--ox-ink));
    --st-panel: light-dark(var(--ox-paper-panel), var(--ox-panel));
    --st-hl: light-dark(var(--ox-paper-hl), var(--ox-hl));
    --st-border: light-dark(var(--ox-paper-border), var(--ox-border));
    --st-rule: light-dark(var(--ox-paper-rule), var(--ox-rule));
    --st-text: light-dark(var(--ox-text-ink), var(--ox-text));
    --st-body: light-dark(var(--ox-text-ink-body), var(--ox-text-body));
    --st-muted: light-dark(var(--ox-muted-text-ink), var(--ox-muted));
    --st-dim: light-dark(var(--ox-dim-ink), var(--ox-dim));
    --st-gold-mark: light-dark(var(--ox-gold-deep), var(--ox-gold));
    --st-gold-hover: light-dark(var(--ox-gold-hover-ink), var(--ox-gold-bright));
    --st-rust: light-dark(var(--ox-rust-ink), var(--ox-rust));
    --st-rust-text: light-dark(var(--ox-rust-text-ink), var(--ox-rust-text));
    --st-ring: light-dark(var(--ox-rust-ink), var(--ox-gold));
    --st-border-hover: light-dark(var(--ox-dim-ink), var(--ox-muted));
    --st-nav-hover: light-dark(var(--ox-paper-hl), var(--ox-panel));
    --st-allowed: light-dark(var(--ox-st-allowed-ink), var(--ox-st-allowed));
    --st-allowed-text: light-dark(
      var(--ox-st-allowed-text-ink),
      var(--ox-st-allowed-text)
    );
    --st-approval: light-dark(var(--ox-st-approval-ink), var(--ox-st-approval));
    --st-approval-text: light-dark(
      var(--ox-st-approval-text-ink),
      var(--ox-st-approval-text)
    );
    --st-failed: light-dark(var(--ox-st-failed-ink), var(--ox-st-failed));
    --st-failed-text: light-dark(
      var(--ox-st-failed-text-ink),
      var(--ox-st-failed-text)
    );
    --st-diff-add: color-mix(in srgb, var(--st-allowed) 12%, var(--st-bg));
    --st-diff-del: color-mix(in srgb, var(--st-failed) 12%, var(--st-bg));
  }
}

/* What light-dark() cannot carry: shadows, the canvas, the glass levels, and
   the lit edge. These are the values on soot; the two blocks after this one
   hold the bone values, taken by a pinned light theme and by a page without
   script whose OS is light (no data-theme is stamped then). */
:root {
  --shadow-ui: var(--ox-shadow-ui);
  --shadow-pop: var(--ox-shadow-pop);
  --panel-shadow: var(--ox-shadow-panel);
  --gold-shadow: var(--ox-shadow-action);
  --gold-shadow-hover: var(--ox-shadow-action-hover);
  --lit-mix: var(--ox-glass-highlight);
  --lit: inset 0 1px 0
    color-mix(in srgb, var(--ox-paper-panel) var(--lit-mix), transparent);
  --edge: var(--ox-glass-edge);
  --bar-fill: var(--ox-glass-bar-fill);
  --bar-blur: var(--ox-glass-bar-blur);
  --pop-fill: var(--ox-glass-popover-fill);
  --pop-blur: var(--ox-glass-popover-blur);
  --sheet-fill: var(--ox-glass-sheet-fill);
  --sheet-blur: var(--ox-glass-sheet-blur);
  --glass-sat: var(--ox-glass-bar-saturate);
  --ember: var(--ox-rust);
  --ember-mix: var(--ox-glass-canvas-ember);
  --grain: var(--ox-glass-canvas-grain);
  --canvas:
    var(--grain),
    radial-gradient(
      820px 546.667px at 0% 0%,
      color-mix(in oklch, var(--ember) var(--ember-mix), transparent),
      transparent 70%
    );
}
:root[data-theme="light"] {
  --shadow-ui: var(--ox-shadow-ui-ink);
  --shadow-pop: var(--ox-shadow-pop-ink);
  --panel-shadow: var(--ox-shadow-panel-ink);
  --gold-shadow: var(--ox-shadow-action-ink);
  --gold-shadow-hover: var(--ox-shadow-action-hover-ink);
  --lit-mix: var(--ox-glass-highlight-ink);
  --edge: var(--ox-glass-edge-ink);
  --bar-fill: var(--ox-glass-bar-fill-ink);
  --bar-blur: var(--ox-glass-bar-blur-ink);
  --pop-fill: var(--ox-glass-popover-fill-ink);
  --pop-blur: var(--ox-glass-popover-blur-ink);
  --sheet-fill: var(--ox-glass-sheet-fill-ink);
  --sheet-blur: var(--ox-glass-sheet-blur-ink);
  --ember: var(--ox-rust-ink);
  --ember-mix: var(--ox-glass-canvas-ember-ink);
  --grain: var(--ox-glass-canvas-grain-ink);
  --show-dark: none;
  --show-light: block;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --shadow-ui: var(--ox-shadow-ui-ink);
    --shadow-pop: var(--ox-shadow-pop-ink);
    --panel-shadow: var(--ox-shadow-panel-ink);
    --gold-shadow: var(--ox-shadow-action-ink);
    --gold-shadow-hover: var(--ox-shadow-action-hover-ink);
    --lit-mix: var(--ox-glass-highlight-ink);
    --edge: var(--ox-glass-edge-ink);
    --bar-fill: var(--ox-glass-bar-fill-ink);
    --bar-blur: var(--ox-glass-bar-blur-ink);
    --pop-fill: var(--ox-glass-popover-fill-ink);
    --pop-blur: var(--ox-glass-popover-blur-ink);
    --sheet-fill: var(--ox-glass-sheet-fill-ink);
    --sheet-blur: var(--ox-glass-sheet-blur-ink);
    --ember: var(--ox-rust-ink);
    --ember-mix: var(--ox-glass-canvas-ember-ink);
    --grain: var(--ox-glass-canvas-grain-ink);
    --show-dark: none;
    --show-light: block;
  }
}

/* The house faces, self-hosted from /fonts/ and copied from the kit. Space
   Grotesk 400 sets hero copy and every h1, h2, and h3, and takes no other
   weight. Geist sets h4 to h6 (at 600) and every other line. Geist Mono sets
   code, ids, figures, and eyebrows. Aeonik, Aeonik Mono, Aeonik Fono, and
   Monaspace Neon load as extra faces for a page that names them; no rule
   on this site does. */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("fonts/aeonik-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("fonts/aeonik-italic-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Mono";
  src: url("fonts/aeonik-mono-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Fono";
  src: url("fonts/aeonik-fono-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Monaspace Neon";
  src: url("fonts/monaspace-neon-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-sans: var(--ox-font);
  /* Hero copy and h1 to h3, and nothing else: Space Grotesk 400. */
  --font-heading: var(--ox-font-display);
  --font-display: var(--ox-font-display);
  /* A wordmark set as text. The kit holds it in Space Grotesk 400. */
  --font-wordmark: var(--ox-font-wordmark);
  --font-mono: var(--ox-font-mono);
}

/* ============ base ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* The canvas: soot or bone, the ember glow at the top left behind the mark,
   and the film grain over it. A panel covers both. */
body {
  margin: 0;
  background-color: var(--ground);
  background-image: var(--canvas);
  background-attachment: fixed;
  color: var(--body);
  font: 400 var(--ox-m-body) / var(--ox-m-body-leading) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection {
  background: color-mix(in srgb, var(--rust) 32%, transparent);
  color: var(--ink);
}
h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 400;
  text-wrap: balance;
}
h1 {
  line-height: var(--ox-m-h1-leading);
  letter-spacing: var(--ox-tracking-hero);
}
h2 {
  line-height: var(--ox-m-h2-leading);
  letter-spacing: var(--ox-tracking-title);
}
h3 {
  line-height: var(--ox-m-h3-leading);
  letter-spacing: var(--ox-tracking-headline);
}
h4,
h5,
h6 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: var(--ox-m-h4-leading);
  letter-spacing: var(--ox-tracking-heading);
}
p {
  margin: 0;
}
b,
strong {
  font-weight: 600;
}
/* The [hidden] attribute must win over any display:grid/flex an author rule
   sets on the same element — the UA's [hidden]{display:none} loses to an
   author declaration, so without this `el.hidden = true` leaves the element
   laid out (see .unlocked and .deck-panel below). */
[hidden] {
  display: none !important;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 0;
}
code,
kbd,
samp,
pre,
.mono {
  font-family: var(--font-mono);
}
.wrap {
  width: min(var(--page-wrap), calc(100% - 32px));
  margin-inline: auto;
}
/* The one accent word in a headline: upright, in rust words. */
.accent {
  color: var(--accent-text);
}
/* A link in running text: rust words over a rust underline, which turns
   to the word colour under the pointer. */
.link {
  color: var(--link);
  text-decoration: underline 1px var(--rust);
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--motion-control);
}
.link:hover {
  text-decoration-color: var(--link);
}
/* Focus is one thin line with a soft halo: gold on soot, rust ink on bone. */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px var(--focus-line),
    0 0 0 4px var(--focus-halo);
  border-radius: var(--ox-radius-sm);
}
.skip {
  position: fixed;
  left: 12px;
  top: -64px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 calc(var(--ox-space) * 5);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink);
  font-weight: 500;
  transition: top var(--motion-control);
}
.skip:focus {
  top: 12px;
}
/* Kit art that comes in a dark and a light file: the page shows the one for
   its theme. */
.art-dark {
  display: var(--show-dark);
}
.art-light {
  display: var(--show-light);
}

/* ============ eyebrow / section head ============
   An eyebrow is Geist Mono 500, uppercase, at the kit's eyebrow tracking, in
   secondary text, at the micro step. The first eyebrow on a page (.first)
   carries the 7px gold square with the smallest corner and a soft rust glow: the
   identity, not the action. The .sec-head form is listed so it outranks
   `.sec-head p`, which sets the lede's size. */
.eyebrow,
.sec-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ox-space) * 2.5);
  margin: 0;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ox-tracking-eyebrow);
  text-transform: uppercase;
}
.eyebrow.first::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--ox-radius-xs);
  background: var(--gold-mark);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--rust) 45%, transparent);
}
.hero .eyebrow {
  margin-bottom: calc(var(--ox-space) * 4);
}
.eyebrow a {
  transition: color var(--motion-control);
}
.eyebrow a:hover {
  color: var(--ink);
}
.sec {
  padding: calc(var(--ox-space) * 24) 0;
}
.sec-tight {
  padding: calc(var(--ox-space) * 16) 0;
}
.sec-head {
  max-width: 740px;
  margin-bottom: calc(var(--ox-space) * 13);
}
.sec-head h2 {
  font-size: var(--fs-h2);
  margin: calc(var(--ox-space) * 4) 0 calc(var(--ox-space) * 3.5);
}
.sec-head p {
  color: var(--ink-3);
  font-size: var(--fs-lead);
  max-width: 62ch;
}
/* An alternate section opens with a hairline, the house way to start a
   section. The canvas runs on under it, so the grain stays continuous. */
.sec-alt {
  border-block: 1px solid var(--line);
}

/* ============ buttons ============
   Pills, 44px tall (36px small). The gold one is the one action on a
   screen; every other button is an outline that lifts one step under the
   pointer. A pressed button sinks to the kit's press scale. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ox-space) * 2);
  height: 44px;
  padding: 0 calc(var(--ox-space) * 5);
  border: 1px solid var(--button-default-border);
  border-radius: var(--r-pill);
  background-color: var(--button-default-bg);
  color: var(--button-default-fg);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--motion-press) var(--ease),
    background-color var(--motion-control),
    border-color var(--motion-control),
    color var(--motion-control),
    box-shadow var(--motion-press);
}
.btn:hover {
  background-color: var(--button-default-hover-bg);
  border-color: var(--button-default-hover-border);
  color: var(--button-default-hover-fg);
}
.btn:active {
  transform: scale(var(--press));
}
.btn:focus-visible {
  border-color: var(--button-focus-line);
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 3px var(--button-focus-halo);
}
.btn-primary {
  background-color: var(--button-primary-bg);
  border-color: var(--button-primary-border);
  color: var(--button-primary-fg);
  box-shadow: var(--button-primary-shadow);
}
.btn-primary:hover {
  background-color: var(--button-primary-hover-bg);
  border-color: var(--button-primary-border);
  color: var(--button-primary-fg);
  box-shadow: var(--button-primary-hover-shadow);
}
.btn-sm {
  height: 36px;
  padding: 0 calc(var(--ox-space) * 4);
}
.btn .arr {
  transition: translate var(--motion-press) var(--ease);
}
.btn:hover .arr {
  translate: 3px 0;
}
.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

/* ============ nav ============
   The header is a glass pill that floats over the page: the kit's bar
   level, with its ring and lit edge. siteHeader() in scripts/lib/html.mjs
   writes it once; the build puts the same markup on every page.

   The glass sits on its own layer (.nav-glass), not on the island, and each
   menu draws its glass on a pseudo-element. An element with a backdrop
   filter becomes the backdrop for everything inside it, so a menu inside a
   filtered island would blur the island and not the page. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: calc(var(--ox-space) * 3) calc(var(--ox-space) * 4) 0;
  pointer-events: none;
}
.nav-isl {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: calc(var(--ox-space) * 4);
  width: min(calc(var(--page-wrap) - 140px), 100%);
  min-height: 56px;
  padding: calc(var(--ox-space) * 1.5) calc(var(--ox-space) * 1.5)
    calc(var(--ox-space) * 1.5) calc(var(--ox-space) * 5);
  border-radius: var(--r-pill);
  pointer-events: auto;
}
.nav-glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: color-mix(in srgb, var(--ground) var(--bar-fill), transparent);
  -webkit-backdrop-filter: blur(var(--bar-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--bar-blur)) saturate(var(--glass-sat));
  box-shadow:
    var(--lit),
    0 0 0 1px var(--glass-ring);
}

/* The brand slot holds the kit's lockup: the open ring, a gap, then the
   wordmark. The ring, the person, and the letters take the text colour. The
   agent dot takes the gold, and the kit's deep gold on bone. It is sized by
   height, and 26px tall keeps it above the kit's 120px minimum width. */
.brand {
  display: flex;
  align-items: center;
  flex: none;
  color: var(--ink);
}
.brand svg {
  width: auto;
  height: 22px;
}
.brand .gf,
.mark .gf {
  fill: var(--gold-mark);
}
.mark .gs {
  stroke: var(--gold-mark);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: calc(var(--ox-space) * 0.5);
  margin-inline: auto;
}
/* A megamenu centres on the island, so its item is not a containing block;
   the plain dropdown hangs from its own button. */
.nav-item--dd {
  position: relative;
}
/* Navigation items rise one step under the pointer and turn primary. The
   current page carries the rust underline. */
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ox-space) * 1.5);
  height: 40px;
  padding: 0 calc(var(--ox-space) * 3.5);
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  font-weight: 500;
  cursor: pointer;
  transition:
    color var(--motion-control),
    background-color var(--motion-control);
}
.chev {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
  transition: rotate var(--motion-press) var(--ease);
}
.nav-trigger:hover,
.nav-item[data-open="true"] > .nav-trigger,
.nav-item[data-current] > .nav-trigger,
.nav-trigger[aria-current="page"] {
  color: var(--ink);
}
.nav-trigger:hover,
.nav-item[data-open="true"] > .nav-trigger {
  background: var(--nav-hover);
}
.nav-item[data-current] > .nav-trigger,
.nav-trigger[aria-current="page"] {
  text-decoration: underline 2px var(--rust);
  text-underline-offset: 0.5em;
}
.nav-item[data-open="true"] > .nav-trigger .chev {
  rotate: 180deg;
  opacity: 1;
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--ox-space);
  flex: none;
}
.nav-cta .login {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 calc(var(--ox-space) * 3);
  color: var(--ink-3);
  font-size: var(--fs-nav);
  font-weight: 500;
  transition: color var(--motion-control);
}
.nav-cta .login:hover {
  color: var(--ink);
}
.ext::after {
  content: "↗";
  font-size: 0.8em;
  color: var(--quiet);
  margin-left: calc(var(--ox-space) * 0.75);
}

/* ---- menus ----
   A menu is in the markup on every page, hidden until its item opens:
   oxagen.js sets data-open on hover, click, or keyboard. Without script,
   hover and focus open it here. The pseudo-element under each menu holds its
   glass, the kit's popover level; the one above it bridges the gap to the
   island, so the pointer can cross from the button to the menu without
   closing it. */
.menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 110;
  display: none;
  isolation: isolate;
  width: min(940px, calc(100vw - 32px));
  border-radius: var(--r-lg);
  color: var(--ink);
  line-height: 1.4;
  text-align: left;
  translate: -50% 0;
}
.menu--dd {
  width: 320px;
}
.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: color-mix(in srgb, var(--panel) var(--pop-fill), transparent);
  -webkit-backdrop-filter: blur(var(--pop-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--pop-blur)) saturate(var(--glass-sat));
  box-shadow:
    var(--lit),
    0 0 0 1px var(--glass-ring),
    var(--shadow-pop);
}
.menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}
.nav-item[data-open="true"] > .menu {
  display: block;
  animation: menu-in var(--motion-pop) var(--ease-enter) both;
}
.nav-item[data-open="true"] > .menu::before,
.nav-item[data-open="true"] > .menu > .menu-in {
  animation: menu-fade var(--motion-pop) var(--ease-enter) both;
}
html:not(.js) .nav-item:is(:hover, :focus-within) > .menu {
  display: block;
}
@keyframes menu-in {
  from {
    transform: scale(var(--pop-scale));
    transform-origin: 50% 0;
  }
  to {
    transform: none;
  }
}
@keyframes menu-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.menu-in {
  padding: calc(var(--ox-space) * 4.5) calc(var(--ox-space) * 4.5) 0;
}
.mm-cols {
  display: grid;
  gap: calc(var(--ox-space) * 4.5);
}
.mm-cols--product {
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.95fr);
}
.mm-cols--research {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
}
.mm-cols--resources {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
}
.mm-col {
  display: grid;
  align-content: start;
  gap: calc(var(--ox-space) * 0.5);
}
.mm-h,
.dsec-h {
  padding: calc(var(--ox-space) * 2) calc(var(--ox-space) * 2.5)
    calc(var(--ox-space) * 2.5);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ox-tracking-eyebrow);
  text-transform: uppercase;
}
.mm-a {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  column-gap: calc(var(--ox-space) * 3);
  row-gap: calc(var(--ox-space) * 0.5);
  padding: calc(var(--ox-space) * 2.25) calc(var(--ox-space) * 2.5);
  border-radius: var(--r);
  transition: background-color var(--motion-control);
}
.mm-a:hover,
.mm-topic:hover,
.mm-post:hover,
.oss-sub a:hover {
  background: var(--raised);
}
.mm-a[aria-current="page"] {
  background: var(--raised);
  box-shadow: inset 2px 0 0 var(--rust);
}
.mm-ic {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--void);
  color: var(--ink-3);
  transition:
    color var(--motion-control),
    border-color var(--motion-control);
}
.mi {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mm-a:hover .mm-ic {
  color: var(--ink);
  border-color: var(--rule);
}
/* A long name keeps its line and its tag drops below it, so "Context Graph
   Protocol" does not break into three short lines beside its tag. */
.mm-t {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ox-space) calc(var(--ox-space) * 1.75);
  color: var(--ink);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.3;
}
.mm-d {
  color: var(--ink-3);
  font-size: var(--fs-micro);
  line-height: 1.4;
}
.mm-feat {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ox-space) * 2.5);
  padding: calc(var(--ox-space) * 4.5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--void);
  box-shadow: var(--lit);
  transition: border-color var(--motion-control);
}
.mm-feat:hover {
  border-color: var(--rule);
}
.mm-kick {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ox-tracking-eyebrow);
  text-transform: uppercase;
}
.mm-ft {
  color: var(--ink);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--ox-tracking-heading);
}
.mm-fd {
  color: var(--ink-3);
  font-size: var(--ox-m-micro);
  line-height: 1.5;
}
.mm-go {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ox-space) * 1.5);
  margin-top: auto;
  color: var(--ink);
  font-size: var(--ox-m-micro);
  font-weight: 500;
}
.mm-go .mi {
  width: 15px;
  height: 15px;
  transition: translate var(--motion-press) var(--ease);
}
.mm-feat:hover .mm-go .mi {
  translate: 3px 0;
}
.mm-stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ox-space) * 2.5);
}
.mm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--ox-space) * 2) calc(var(--ox-space) * 5);
  margin: calc(var(--ox-space) * 4) calc(var(--ox-space) * -4.5) 0;
  padding: calc(var(--ox-space) * 3.25) calc(var(--ox-space) * 7);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  color: var(--ink-3);
  font-size: var(--ox-m-micro);
}
.mm-foot a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ox-space) * 1.5);
  color: var(--ink-3);
  transition: color var(--motion-control);
}
.mm-foot a:hover {
  color: var(--ink);
}
.mm-foot .mi {
  width: 15px;
  height: 15px;
}
.mm-foot .end {
  margin-left: auto;
}
.mm-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ox-space) * 1.75);
  height: 32px;
  padding: 0 calc(var(--ox-space) * 3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: var(--fs-micro);
}
.mm-chip svg {
  width: 15px;
  height: 15px;
}
.mm-cmd {
  padding: calc(var(--ox-space) * 1.75) calc(var(--ox-space) * 3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--void);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}
.tag {
  padding: var(--ox-space) calc(var(--ox-space) * 2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  line-height: 1;
}
.mm-topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--ox-space) * 0.5);
}
.mm-topic,
.mm-post {
  display: block;
  padding: calc(var(--ox-space) * 2.25) calc(var(--ox-space) * 2.5);
  border-radius: var(--r);
  transition:
    background-color var(--motion-control),
    color var(--motion-control);
}
.mm-topic b {
  display: block;
  color: var(--ink);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.3;
}
.mm-topic span {
  display: block;
  margin-top: calc(var(--ox-space) * 0.5);
  color: var(--ink-3);
  font-size: var(--fs-micro);
  line-height: 1.4;
}
.mm-post {
  color: var(--ink-2);
  font-size: var(--fs-ui);
  font-weight: 500;
}
.mm-post:hover {
  color: var(--ink);
}
.mm-post small {
  display: block;
  margin-top: calc(var(--ox-space) * 0.75);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}
.oss {
  padding: calc(var(--ox-space) * 2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--void);
}
.oss + .oss {
  margin-top: calc(var(--ox-space) * 2.5);
}
.oss-sub {
  display: grid;
  gap: 1px;
  margin: calc(var(--ox-space) * 1.5) 0 0 calc(var(--ox-space) * 6.75);
  padding: 0 0 0 calc(var(--ox-space) * 5);
  border-left: 1px solid var(--rule);
  list-style: none;
}
.oss-sub a {
  display: flex;
  align-items: center;
  padding: calc(var(--ox-space) * 1.5) calc(var(--ox-space) * 2);
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: var(--ox-m-micro);
  transition:
    background-color var(--motion-control),
    color var(--motion-control);
}
.oss-sub a:hover {
  color: var(--ink);
}
.dd {
  display: grid;
  gap: calc(var(--ox-space) * 0.5);
  margin-top: calc(var(--ox-space) * -2.5);
  padding-bottom: calc(var(--ox-space) * 2.5);
}
.dd-row {
  display: flex;
  align-items: center;
  gap: calc(var(--ox-space) * 3.5);
  margin-top: calc(var(--ox-space) * 1.5);
  padding: calc(var(--ox-space) * 2.5) calc(var(--ox-space) * 1.5) 0
    calc(var(--ox-space) * 2.5);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-ui);
}
.dd-row > a {
  transition: color var(--motion-control);
}
.dd-row > a:hover {
  color: var(--ink);
}
.dd-social {
  display: flex;
  gap: calc(var(--ox-space) * 0.5);
  margin-left: auto;
}
.dd-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  color: var(--ink-3);
  transition:
    color var(--motion-control),
    background-color var(--motion-control);
}
.dd-social a:hover {
  color: var(--ink);
  background: var(--raised);
}
.dd-social svg {
  width: 17px;
  height: 17px;
}

/* ---- phone menu ---- */
.burger {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition:
    color var(--motion-control),
    border-color var(--motion-control),
    background-color var(--motion-control);
}
.burger:hover,
.burger[aria-expanded="true"] {
  color: var(--ink);
  border-color: var(--border-hover);
  background: var(--raised);
}
.burger i {
  position: relative;
  display: block;
  width: 15px;
  height: 1.4px;
  background: currentColor;
}
.burger i::before,
.burger i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 15px;
  height: 1.4px;
  background: currentColor;
}
.burger i::before {
  top: -5px;
}
.burger i::after {
  top: 5px;
}
.drawer {
  display: none;
}
@media (max-width: 1000px) {
  .nav-links,
  .nav-cta .login {
    display: none;
  }
  .burger {
    display: grid;
  }
  .nav-isl {
    gap: calc(var(--ox-space) * 2);
    min-height: 52px;
    padding: calc(var(--ox-space) * 1.5) calc(var(--ox-space) * 1.5)
      calc(var(--ox-space) * 1.5) calc(var(--ox-space) * 4.5);
  }
  .nav-cta {
    margin-left: auto;
    gap: calc(var(--ox-space) * 1.5);
  }
  /* The phone menu is its own sheet of glass under the island, at the kit's
     sheet level. It holds no nested glass, so its backdrop filter sits on
     the sheet itself. */
  .drawer {
    position: fixed;
    top: calc(var(--nav-h) - 2px);
    left: 16px;
    right: 16px;
    z-index: 99;
    display: block;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--panel) var(--sheet-fill), transparent);
    -webkit-backdrop-filter: blur(var(--sheet-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--sheet-blur)) saturate(var(--glass-sat));
    box-shadow:
      var(--lit),
      0 0 0 1px var(--glass-ring),
      var(--shadow-pop);
    transition:
      max-height var(--motion-sheet) var(--ease-enter),
      visibility var(--motion-sheet);
  }
  .drawer[data-open="true"] {
    max-height: calc(100dvh - var(--nav-h) - 16px);
    overflow: auto;
    visibility: visible;
  }
}
.drawer-in {
  padding: var(--ox-space) calc(var(--ox-space) * 4) calc(var(--ox-space) * 4);
}
.dsec {
  border-bottom: 1px solid var(--line);
}
.dsec > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 var(--ox-space);
  color: var(--ink);
  font-size: var(--fs-lead);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.dsec > summary::-webkit-details-marker {
  display: none;
}
.dsec > summary .chev {
  width: 18px;
  height: 18px;
}
.dsec[open] > summary .chev {
  rotate: 180deg;
}
.dsec-in {
  display: grid;
  padding: 0 0 calc(var(--ox-space) * 3);
}
.dsec-in a {
  display: flex;
  align-items: center;
  gap: calc(var(--ox-space) * 2.5);
  min-height: 44px;
  padding: 0 calc(var(--ox-space) * 2.5);
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: var(--fs-small);
  transition:
    color var(--motion-control),
    background-color var(--motion-control);
}
.dsec-in a:hover {
  color: var(--ink);
  background: var(--raised);
}
.dsec-h {
  padding: calc(var(--ox-space) * 3) calc(var(--ox-space) * 2.5)
    calc(var(--ox-space) * 0.5);
}
.dsec-in .dsec-group {
  color: var(--ink);
  font-weight: 500;
}
.dsec-group svg {
  width: 18px;
  height: 18px;
}
.dsec-sub {
  display: grid;
  margin-left: calc(var(--ox-space) * 3);
  padding-left: calc(var(--ox-space) * 3.5);
  border-left: 1px solid var(--rule);
}
.drawer-login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-top: calc(var(--ox-space) * 4);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
  transition:
    background-color var(--motion-control),
    border-color var(--motion-control);
}
.drawer-login:hover {
  background: var(--raised);
  border-color: var(--border-hover);
}

/* Glass turns opaque on its own ground where a browser has no backdrop
   filter, and for a reader who asks for less transparency or more
   contrast. The canvas drops its glow and grain there too. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-glass {
    background: var(--ground);
  }
  .menu::before,
  .drawer {
    background: var(--panel);
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body {
    background-image: none;
  }
  .nav-glass {
    background: var(--ground);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .menu::before,
  .drawer {
    background: var(--panel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-isl,
  .nav-glass,
  .menu,
  .menu::before,
  .menu-in,
  .drawer {
    animation: none;
    transition: none;
  }
}

/* ============ application window ============
   The chrome around a terminal: a bar in the lifted tone with three quiet
   window lights. */
.app-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--ox-space) * 2);
  padding: calc(var(--ox-space) * 2.25) calc(var(--ox-space) * 3.5);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--ink-3);
}
.app-bar .tl {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rule);
  flex: none;
}
/* The three window lights take the control-border grey, a house token. */
.app-bar .tl:nth-child(3) {
  margin-right: calc(var(--ox-space) * 1.5);
}
.app-bar .tl.live {
  animation: pulse var(--motion-orbit) ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
.app-bar .app-title {
  color: var(--ink-3);
}
.app-bar .app-meta {
  margin-left: auto;
  color: var(--ink-3);
}

.caret {
  display: inline-block;
  width: 7px;
  height: 1.05em;
  background: var(--rust);
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--ink-3);
  padding-top: calc(var(--ox-space) * 2.5);
  line-height: 1.6;
}
figcaption b {
  color: var(--ink-3);
  font-weight: 500;
}

/* ============ terminal (typed, no image) ============ */
/* A terminal is soot in both themes, the way a real one is: it sets its own
   color-scheme, so every token inside it resolves to its value on soot. */
.term {
  color-scheme: dark;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow:
    var(--lit),
    var(--panel-shadow);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.75;
  display: flex;
  flex-direction: column;
}
.term-body {
  padding: calc(var(--ox-space) * 4) calc(var(--ox-space) * 4.5);
  flex: 1;
}
.term-line {
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.75em;
}
.t-prompt {
  color: var(--ink-3);
}
.t-cmd {
  color: var(--ink);
}
.t-dim {
  color: var(--ink-3);
}
.t-note {
  color: var(--ink-3);
}
.t-diff {
  color: var(--ink-2);
}
.t-ok {
  color: var(--pass-ink);
}
.t-bad {
  color: var(--fail-ink);
}

/* ============ cards ============
   A card is a solid panel: 18px corners, a hairline, the lit top edge, and
   the soft deep shadow. Under the pointer its hairline steps up to the
   control border. */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--ox-space) * 5);
}
@media (max-width: 660px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow:
    var(--lit),
    var(--panel-shadow);
  padding: calc(var(--ox-space) * 6);
  overflow: hidden;
  transition: border-color var(--motion-control);
}
a.card:hover {
  border-color: var(--rule);
}
.card h3 {
  font-size: var(--fs-card);
  margin: calc(var(--ox-space) * 4) 0 calc(var(--ox-space) * 2);
}
.card p {
  color: var(--ink-3);
  font-size: var(--fs-small);
}
.card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--void);
  border: 1px solid var(--line);
}
.card-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--ink-2);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============ spec list: a machine-readable row ============ */
.spec {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow:
    var(--lit),
    var(--panel-shadow);
}
.spec > div {
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) 1fr;
  gap: calc(var(--ox-space) * 4.5);
  padding: calc(var(--ox-space) * 3.75) calc(var(--ox-space) * 4.5);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-ui);
}
.spec > div:last-child {
  border-bottom: 0;
}
.spec dt,
.spec .k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ox-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: calc(var(--ox-space) * 0.75);
}
.spec dd,
.spec .v {
  margin: 0;
  color: var(--ink-2);
}
.spec .v b {
  color: var(--ink);
  font-weight: 500;
}
@media (max-width: 620px) {
  .spec > div {
    grid-template-columns: 1fr;
    gap: calc(var(--ox-space) * 1.5);
  }
}

/* ============ two-up layout ============ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: calc(var(--ox-space) * 12);
  align-items: center;
}
.split-flip > *:first-child {
  order: 2;
}
@media (max-width: 960px) {
  .split {
    grid-template-columns: 1fr;
    gap: calc(var(--ox-space) * 9);
  }
  .split-flip > *:first-child {
    order: 0;
  }
}

/* ============ forms ============
   A text field is 44px tall with 12px corners, filled with void. Its
   border steps up under the pointer, and on focus it takes the ring's line
   with a soft halo. */
.lead-form {
  display: grid;
  gap: calc(var(--ox-space) * 3.5);
  max-width: 520px;
}
.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--ox-space) * 3.5);
}
@media (max-width: 560px) {
  .f-row {
    grid-template-columns: 1fr;
  }
}
.field {
  display: grid;
  gap: calc(var(--ox-space) * 1.5);
}
.field label {
  font-size: var(--fs-micro);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: var(--ox-tracking-eyebrow);
  text-transform: uppercase;
}
.field label .opt {
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
}
.field input,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: calc(var(--ox-space) * 2.5) calc(var(--ox-space) * 3.5);
  border: 1px solid var(--rule);
  border-radius: var(--r-field);
  background: var(--void);
  color: var(--ink);
  font-size: var(--fs-small);
  transition:
    border-color var(--motion-control),
    box-shadow var(--motion-control);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--quiet);
}
.field input:hover,
.field textarea:hover {
  border-color: var(--border-hover);
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--focus-line);
  border-radius: var(--r-field);
  box-shadow: 0 0 0 3px var(--focus-halo);
}
.field textarea {
  resize: vertical;
  min-height: 88px;
}
.hp-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.form-foot {
  display: flex;
  align-items: center;
  gap: calc(var(--ox-space) * 3.5);
  flex-wrap: wrap;
}
.form-status {
  font-size: var(--ox-m-micro);
  color: var(--ink-3);
  min-height: 1.5em;
}
.form-status.err {
  color: var(--fail-ink);
}
.form-status a {
  color: var(--link);
  text-decoration: underline 1px var(--rust);
  text-underline-offset: 0.22em;
}
/* The line under a lead form that says how Oxagen uses what it collects,
   with the privacy policy one click away. */
.form-note {
  font-size: var(--fs-micro);
  line-height: 1.55;
  color: var(--ink-3);
}
.form-note a {
  color: var(--link);
  text-decoration: underline 1px var(--rust);
  text-underline-offset: 0.22em;
}
.unlocked {
  display: grid;
  gap: calc(var(--ox-space) * 3.5);
  max-width: 520px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow:
    var(--lit),
    var(--panel-shadow);
  padding: calc(var(--ox-space) * 6);
}
.unlocked .ok-line {
  display: flex;
  align-items: center;
  gap: calc(var(--ox-space) * 2.5);
  color: var(--ink);
  font-weight: 500;
  font-size: var(--fs-lead);
}
.unlocked .ok-line .ok-dot {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--pass-ink);
  font-size: var(--fs-micro);
  border: 1px solid var(--pass);
  border-radius: 50%;
}
.unlocked p {
  color: var(--ink-3);
  font-size: var(--fs-ui);
}

/* ============ footer ============ */
footer {
  border-top: 1px solid var(--line);
  background: var(--void);
  padding: calc(var(--ox-space) * 15) 0 calc(var(--ox-space) * 9);
}
/* The brand block, then one column per link group, side by side. Each group
   gets its own column however many a page carries (three on the home page,
   four on the blog), because the brand sets the first track and every group
   after it lands in an implicit one. Below 860px the brand takes its own row
   above the groups. */
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: calc(var(--ox-space) * 9.5);
}
@media (max-width: 860px) {
  .foot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: calc(var(--ox-space) * 8) calc(var(--ox-space) * 6);
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.foot-brand p {
  color: var(--ink-3);
  font-size: var(--fs-ui);
  margin-top: calc(var(--ox-space) * 3.25);
  max-width: 30ch;
}
.foot-col h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ox-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 calc(var(--ox-space) * 3.75);
}
.foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(var(--ox-space) * 2.5);
}
.foot-col a,
.foot-col li {
  font-size: var(--fs-ui);
  color: var(--ink-3);
}
.foot-col a {
  transition: color var(--motion-control);
}
.foot-col a:hover {
  color: var(--ink);
}
.foot-col address {
  font-style: normal;
  font-size: var(--fs-ui);
  color: var(--ink-3);
  line-height: 1.7;
}
.socials {
  display: flex;
  gap: calc(var(--ox-space) * 2.5);
  margin-top: calc(var(--ox-space) * 4);
}
.socials a {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  transition:
    color var(--motion-control),
    border-color var(--motion-control),
    background-color var(--motion-control);
}
.socials a:hover {
  color: var(--ink);
  border-color: var(--border-hover);
  background: var(--raised);
}
.socials svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.foot-base {
  margin-top: calc(var(--ox-space) * 11);
  padding-top: calc(var(--ox-space) * 5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--ox-space) * 3);
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-micro);
  color: var(--ink-3);
}
.foot-base .mono {
  font-size: var(--fs-micro);
}
.foot-base a {
  color: var(--link);
  text-decoration: underline 1px var(--rust);
  text-underline-offset: 0.22em;
}
.foot-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--ox-space) * 4);
}

/* ============ theme control ============
   Three icon buttons in one pill: System, Light, Dark. The chosen one sits
   on a lifted chip; the others are secondary until hovered. It is a radio
   group, so one tab stop reaches it and the arrow keys move the choice
   (oxagen.js). */
.theme-switch {
  display: inline-flex;
  gap: calc(var(--ox-space) * 0.5);
  padding: calc(var(--ox-space) * 0.75);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ground);
}
.theme-switch button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition:
    color var(--motion-control),
    background-color var(--motion-control);
}
.theme-switch button:hover {
  color: var(--ink);
}
.theme-switch button[aria-checked="true"] {
  background: var(--raised);
  color: var(--ink);
}
.theme-switch button:focus-visible {
  border-radius: var(--r-pill);
}
.theme-switch svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Without script the buttons could not do anything, and the page already
   follows the OS, so the control is not drawn. */
html:not(.js) .theme-switch {
  display: none;
}
/* Nothing fades while the theme swaps (oxagen.js adds this for one frame). */
.theme-swap,
.theme-swap *,
.theme-swap *::before,
.theme-swap *::after {
  transition: none !important;
}

/* ============ diagrams ============
   The home and product pages explain the product with figures drawn in HTML
   and inline SVG from the product's own vocabulary: no screenshots, and one
   terminal on the whole site (the installer's output on the home page, where
   the output is the thing being shown). A figure is a solid panel with a
   lifted bar along its top.
   State is carried by border shape, so it survives grayscale and print:
     .is-ok    double: allowed, held, matched, proven
     .is-wait  dashed: pending, waiting on a person
     .is-no    single, in the failed mark: denied, broken, an exception
   The dot beside a label is a second signal, never the only one. A piece
   marked .dg-in arrives in order (--i) once its .reveal figure is in view.
   Anything that loops is a .dg-loop and runs only while its [data-live] host
   is on screen (.playing, toggled in oxagen.js). Without script, nothing is
   hidden and nothing moves. */
.dg {
  position: relative;
  margin: 0;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow:
    var(--lit),
    var(--panel-shadow);
  overflow: hidden;
}
.dg-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--ox-space) * 2.5);
  padding: calc(var(--ox-space) * 2.75) calc(var(--ox-space) * 4.5);
  background: var(--raised);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-micro);
  color: var(--ink-3);
}
.dg-bar b {
  color: var(--ink);
  font-weight: 500;
}
.dg-bar .end {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-align: right;
}
@media (max-width: 520px) {
  .dg-bar .end {
    display: none;
  }
}
.dg-body {
  padding: calc(var(--ox-space) * 4.5);
  display: grid;
  gap: calc(var(--ox-space) * 3.5);
}
.dg-foot {
  padding: calc(var(--ox-space) * 2.75) calc(var(--ox-space) * 4.5);
  border-top: 1px solid var(--line);
  background: var(--raised);
  font-size: var(--fs-micro);
  color: var(--ink-3);
}
.dg-k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ox-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}
.dg-m {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}
.dg-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ox-space) * 1.75);
  padding: calc(var(--ox-space) * 0.75) calc(var(--ox-space) * 2.75);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--void);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--ink-2);
  white-space: nowrap;
}
.is-ok {
  border: 3px double var(--ink-3);
}
.dg-tag.is-ok {
  padding: 1px calc(var(--ox-space) * 2.25);
}
.is-wait {
  border-style: dashed;
  border-color: var(--ink-3);
}
.is-no {
  border-color: var(--fail);
}
.dg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  flex: none;
}
.dg-dot.ok {
  background: var(--pass);
}
.dg-dot.wait {
  background: var(--approval);
}
.dg-dot.no {
  background: var(--fail);
}
.dg-track {
  height: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--void);
  overflow: hidden;
}
.dg-fill {
  height: 100%;
  width: calc(var(--w, 0.5) * 100%);
  background: var(--ink-3);
  transform-origin: left;
}
/* a share split into parts: shades of the text colour, labelled in a
   legend, so the parts never need a hue */
.dg-stack {
  display: flex;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.dg-stack > span {
  width: calc(var(--w) * 100%);
  transform-origin: left;
}
.dg-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--ox-space) * 1.25) calc(var(--ox-space) * 4.5);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--ink-3);
}
.dg-legend > li {
  display: flex;
  align-items: center;
  gap: calc(var(--ox-space) * 2);
  min-width: 0;
}
.dg-legend > li::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: var(--ox-radius-xs);
  flex: none;
}
.dg-legend b {
  margin-left: auto;
  color: var(--ink-2);
  font-weight: 500;
}
.dg-stack > [data-s="1"],
.dg-legend > [data-s="1"]::before {
  background: color-mix(in srgb, var(--ink) 80%, var(--ground));
}
.dg-stack > [data-s="2"],
.dg-legend > [data-s="2"]::before {
  background: color-mix(in srgb, var(--ink) 54%, var(--ground));
}
.dg-stack > [data-s="3"],
.dg-legend > [data-s="3"]::before {
  background: color-mix(in srgb, var(--ink) 32%, var(--ground));
}
.dg-stack > [data-s="4"],
.dg-legend > [data-s="4"]::before {
  background: color-mix(in srgb, var(--ink) 18%, var(--ground));
}
.in-view .dg-in {
  animation: dgIn 0.5s var(--ease) calc(var(--i, 0) * 110ms + 0.15s) both;
}
.in-view .dg-fill,
.in-view .dg-stack > span {
  animation: dgGrow 1s var(--ease) calc(var(--i, 0) * 110ms + 0.35s) both;
}
@keyframes dgIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes dgGrow {
  from {
    transform: scaleX(0);
  }
}
/* !important because each loop sets its own `animation` shorthand, which
   resets the play state, and a page's own \3c style> comes after this file */
[data-live]:not(.playing) .dg-loop {
  animation-play-state: paused !important;
}

/* the copy column beside a figure */
.dg-copy h2 {
  font-size: var(--fs-h2);
  margin: calc(var(--ox-space) * 3.5) 0;
}
.dg-copy .lede {
  color: var(--ink-3);
  font-size: var(--fs-lead);
  max-width: 56ch;
}
.dg-copy ul {
  list-style: none;
  margin: calc(var(--ox-space) * 5.5) 0 0;
  padding: 0;
  display: grid;
  gap: calc(var(--ox-space) * 2.75);
}
.dg-copy li {
  position: relative;
  padding-left: calc(var(--ox-space) * 5);
  color: var(--ink-2);
  font-size: var(--fs-small);
  max-width: 60ch;
}
.dg-copy li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
}

/* ============ reveal ============ */
/* Gated on .js: without the head script (blocked, failed, or an old browser)
   nothing is hidden, so a broken script costs the animation, not the content. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s var(--ease-enter),
    transform 0.6s var(--ease-enter);
}
.js .reveal.in-view {
  opacity: 1;
  transform: none;
}
.js .reveal-d1 {
  transition-delay: 0.07s;
}
.js .reveal-d2 {
  transition-delay: 0.14s;
}
.js .reveal-d3 {
  transition-delay: 0.21s;
}

/* ============ reduced motion ============
   Every transition and animation drops. Hover and press still apply at
   once. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
  /* the stagger's delay is not a duration, so the rule above leaves it; drop
     the arrival animations so every figure is simply there */
  .in-view .dg-in,
  .in-view .dg-fill,
  .in-view .dg-stack > span {
    animation: none;
  }
  .caret {
    animation: none;
  }
}

/* ============ supported agents: logo chips and the support matrix ============
   Third-party marks are drawn in currentColor so they sit in the neutral ramp;
   only stella's asterisk keeps its gold, because it is a house mark. Support is
   shown by the shape of a mark, never by colour: a solid disc is yes, a half
   disc is partly, an empty ring is no. The words beside it say which. */
.logo-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--ox-space) * 2.5);
}
.logo-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ox-space) * 2.25);
  height: 40px;
  padding: 0 calc(var(--ox-space) * 4) 0 calc(var(--ox-space) * 3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel);
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.logo-chip svg,
.matrix thead svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.works-with {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--ox-space) * 2.5) calc(var(--ox-space) * 3.5);
  margin-top: calc(var(--ox-space) * 6.5);
}
.works-with > span {
  font-size: var(--fs-micro);
  color: var(--ink-3);
}
.matrix-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow:
    var(--lit),
    var(--panel-shadow);
  overflow-x: auto;
}
table.matrix {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: var(--fs-ui);
}
.matrix th,
.matrix td {
  padding: calc(var(--ox-space) * 3) calc(var(--ox-space) * 4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.matrix thead th {
  background: var(--raised);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.matrix thead th > span {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ox-space) * 2);
}
.matrix tbody th {
  width: 30%;
  font-weight: 500;
  color: var(--ink);
}
.matrix td {
  color: var(--ink-2);
}
.matrix tbody tr:last-child > * {
  border-bottom: 0;
}
.matrix td small {
  display: block;
  margin-top: calc(var(--ox-space) * 0.75);
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--ink-3);
}
.sup {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ox-space) * 2);
  color: var(--ink);
  white-space: nowrap;
}
.sup::before {
  content: "";
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  flex: none;
}
.sup.y::before {
  background: var(--ink);
}
.sup.p::before {
  box-shadow: inset 4px 0 0 var(--ink);
}
.sup.n {
  color: var(--ink-3);
}
.sup.n::before {
  border-color: var(--ink-3);
}
.matrix-key {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--ox-space) * 2) calc(var(--ox-space) * 5);
  margin-top: calc(var(--ox-space) * 3.5);
  font-size: var(--fs-micro);
  color: var(--ink-3);
}
.matrix-note {
  margin-top: calc(var(--ox-space) * 2.5);
  font-size: var(--ox-m-micro);
  color: var(--ink-3);
  max-width: 78ch;
}

/* ============ the operator's loop: numbered steps ============ */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--ox-space) * 4);
  counter-reset: step;
}
@media (max-width: 1060px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }
}
.steps > li {
  counter-increment: step;
  padding: calc(var(--ox-space) * 5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow:
    var(--lit),
    var(--panel-shadow);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: calc(var(--ox-space) * 3.5);
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.steps b {
  display: block;
  margin-bottom: calc(var(--ox-space) * 1.5);
  font-size: var(--fs-lead);
  font-weight: 600;
  letter-spacing: var(--ox-tracking-heading);
  color: var(--ink);
}
.steps p {
  font-size: var(--fs-small);
  color: var(--ink-3);
}
/* coming soon: dashed, the pending shape */
.soon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--ox-space) * 2) calc(var(--ox-space) * 3.5);
  margin-top: calc(var(--ox-space) * 4);
  padding: calc(var(--ox-space) * 4) calc(var(--ox-space) * 5);
  border: 1px dashed var(--rule);
  border-radius: var(--r-lg);
  font-size: var(--fs-ui);
  color: var(--ink-3);
}
.soon b {
  color: var(--ink);
  font-weight: 600;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* a logo row inside the copy column keeps its chips, not the list bullets */
.dg-copy ul.logo-row {
  display: flex;
  gap: calc(var(--ox-space) * 2.5);
}
.dg-copy .logo-row > li {
  padding: 0 calc(var(--ox-space) * 4) 0 calc(var(--ox-space) * 3);
  font-size: var(--fs-ui);
  color: var(--ink);
  max-width: none;
}
.dg-copy .logo-row > li::before {
  content: none;
}
/* one fixed first column, then four equal agent columns */
table.matrix {
  table-layout: fixed;
}
.matrix thead th:first-child,
.matrix tbody th {
  width: 26%;
}
/* on a narrow screen the table scrolls sideways; the row labels stay put */
.matrix tbody th,
.matrix thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--panel);
}
.matrix thead th:first-child {
  background: var(--raised);
}

/* ============ the orbit field: the still ornament of a hero ==============
   Mac set it on 2026-10-09 for every page header and hero. It sits behind
   the content's top right, 600px square, 170px past the right edge and 250px
   above the top, on the kit's 64 grid. orbit-field.svg holds only the
   geometry (the two rings and the mark's open ring) as a mask, so the strokes
   take the theme's rule colour here. The rust dot sits at the agent's
   place, (46.849, 17.151) on the grid, with no glow behind it. */
.orbit-host {
  position: relative;
  isolation: isolate;
}
:is(section, header, div):has(> .orbit-host) {
  overflow: clip;
}
.orbit-field {
  --orbit-unit: calc(var(--ox-space) * 150 / 64);
  position: absolute;
  top: calc(var(--ox-space) * -62.5);
  right: calc(var(--ox-space) * -42.5);
  z-index: -1;
  width: calc(var(--orbit-unit) * 64);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(
    circle calc(var(--orbit-unit) * 0.8) at 73.2016% 26.7984%,
    var(--rust) 96%,
    transparent
  );
}
.orbit-field::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--rule);
  -webkit-mask: url("orbit-field.svg") center / 100% 100% no-repeat;
  mask: url("orbit-field.svg") center / 100% 100% no-repeat;
}
@media (forced-colors: active) {
  .orbit-field {
    display: none;
  }
}