/* Generated by scripts/build-site-css.mjs — do not edit by hand.
 * Tokens pinned from pagespeed-optimizer website/src/styles/global.css
 * @ ffd3c554b030603184feca179a3ca820349329c7; see scripts/pinned-tokens.css for the re-pin recipe.
 * Verify freshness: node scripts/build-site-css.mjs --check */

/* Inter (SIL OFL 1.1: /fonts/Inter-OFL.txt), variable subset, with
   metric-matched fallbacks so the swap does not move text. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/inter-variable-subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 104.26%;
  ascent-override: 92.92%;
  descent-override: 23.14%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback Roboto';
  src: local('Roboto');
  size-adjust: 109.9%;
  ascent-override: 88.15%;
  descent-override: 21.95%;
  line-gap-override: 0%;
}
/* IBM Plex Mono (SIL OFL 1.1: /fonts/IBM-Plex-Mono-OFL.txt), weights 400/500/600,
   with metric-matched platform fallbacks. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/plex-mono-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono Fallback';
  src: local('Menlo'), local('DejaVu Sans Mono');
  size-adjust: 99.66%;
  ascent-override: 102.85%;
  descent-override: 27.59%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback Liberation';
  src: local('Liberation Mono'), local('Droid Sans Mono'), local('Courier New');
  size-adjust: 99.98%;
  ascent-override: 102.52%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}

:root {
  --font-sans: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', system-ui, sans-serif;
  /* IBM Plex Mono (OFL) carries ALL numerics, labels, code, status & logo.
     Falls back to platform mono until the self-hosted subset ships. */
  --font-mono:
    'IBM Plex Mono', 'IBM Plex Mono Fallback', 'IBM Plex Mono Fallback Liberation', ui-monospace,
    SFMono-Regular, Menlo, Consolas, monospace;

  /* Radius — tightened to an instrument-control feel. */
  --radius-control: 0.5rem; /* buttons */
  --radius-card: 0.625rem; /* surfaces (tightened from 0.75rem) */
  --radius-chip: 0.375rem; /* squared status chips, NOT pills */

  /* ===== DARK = HOME. Warm instrument-black; depth by luminance + finish. ===== */
  --color-bg-primary: #0b0c0e; /* ground.  body 16.2:1 */
  --color-bg-secondary: #121417; /* recessed panel */
  --color-bg-elevated: #191c20; /* raised bezel (cards/code) */
  --color-bg-recessed: #070809; /* engraved plate under display numerals */

  --color-text-body: #e8eaed; /* readout off-white. 16.2:1 */
  --color-text-muted: #a7aeb6; /* labels/eyebrows. AA small all surfaces */
  --color-text-annotation: #8a9099; /* AA normal all surfaces */

  --color-interactive: #5eb1c9; /* the ONE accent. 8.0:1 ground */
  --color-interactive-hover: #84c7db;
  --color-on-accent: #07080a; /* DARK ink on cyan fill (8.2:1). never white. */

  --color-success: #6fbf8f; /* improvement / HIT. 8.9:1, hue-distinct from cyan */
  --color-accent: #e0a24a; /* true caution only. 8.8:1 */
  --color-promo: #5eb1c9;

  --color-border: #2a2e34; /* decorative hairline / tick base */
  --color-border-strong: #3a3f47;
  --color-control-border: #646b73; /* hairline control boundary — clears 3:1 on bg-elevated (worst adjacent ground) */
  --color-tick: rgba(255, 255, 255, 0.12);
  --color-specular: rgba(255, 255, 255, 0.05);
  --color-grid-line: rgba(255, 255, 255, 0.045);

  /* Wash fills for state chips — see @theme for the surface rule. */
  --color-success-wash: #202929;
  --color-accent-wash: #292723;
  --color-interactive-wash: #1f282e;

  --color-bit-clear: #20242a;
  --color-bit-lit: #5eb1c9;

  --color-disabled-bg: #1a1d21;
  --color-disabled-text: #6a7077;
  --color-disabled-border: #2f343a;

  --color-focus-ring: #5eb1c9;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
body {
  font-family: var(--font-sans);
  color: var(--color-text-body);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container { max-width: 44rem; margin: 0 auto; padding: 0 1.5rem; }
a { color: var(--color-interactive); }
a:hover { color: var(--color-interactive-hover); }
/* Links inside prose must be distinguishable without colour (axe
   link-in-text-block); standalone controls keep their own affordance. */
main p a:not(.tertiary):not(.btn-primary):not(.btn-secondary),
main li a:not(.btn-primary):not(.btn-secondary),
.site-footer p a { text-decoration: underline; text-underline-offset: 0.18em; }
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-elevated);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-chip);
  overflow-wrap: anywhere;
  color: var(--color-text-body);
}
main { flex: 1; padding: 2.5rem 0 3rem; }
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
p { color: var(--color-text-muted); line-height: 1.7; margin-top: 0.75rem; }
.subtitle { margin-top: 1rem; color: var(--color-text-muted); font-size: 1.125rem; line-height: 1.7; }
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.5rem 1rem;
  background: var(--color-interactive);
  color: var(--color-on-accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  z-index: 10;
}
.skip-link:focus { left: 0; }
.site-header { border-bottom: 1px solid var(--color-border); background: var(--color-bg-primary); }
.site-header-row { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }
.site-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--color-text-body);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}
.site-logo:hover { color: var(--color-text-body); }
.bitstrip { flex: none; }
.bitstrip rect { fill: var(--color-bit-clear); }
.bitstrip rect.lit { fill: var(--color-bit-lit); }
.site-nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.site-nav a:not(.btn-primary) {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-chip);
  transition: color 150ms ease, background-color 150ms ease;
}
.site-nav a:not(.btn-primary):hover { color: var(--color-text-body); background: var(--color-bg-secondary); }
.site-nav .btn-primary { margin-left: 0.75rem; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  min-height: 2.75rem;
  border-radius: var(--radius-control);
  background-color: var(--color-interactive);
  color: var(--color-on-accent);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn-primary:hover { background-color: var(--color-interactive-hover); color: var(--color-on-accent); }
.rule-ticked {
  height: 1px;
  border: 0;
  background:
    repeating-linear-gradient(90deg, var(--color-tick) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, var(--color-border-strong) 0 1px, transparent 1px 64px);
}
.crumbs { font-family: var(--font-mono); color: var(--color-text-annotation); font-size: 0.8125rem; padding: 0 0 1rem; }
.crumbs a { color: var(--color-text-annotation); text-decoration: none; }
.crumbs a:hover { color: var(--color-text-body); }
/* Term panel: a labelled channel for commands and config. The head line names
   the block, the body is a keyboard-reachable scroll region, and the copy
   button puts the commands on the clipboard exactly as printed. Layout lives
   in the critical block because the home page carries a captured-header
   panel above the fold: without these rules a late or blocked full sheet
   would paint it unstyled. */
.term-panel {
  margin-top: 1rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-recessed);
  overflow: hidden;
}
.term-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.term-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.25rem 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.term-copy:hover { border-color: var(--color-interactive); color: var(--color-interactive); }
pre.term-body {
  margin: 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  background: transparent;
}
pre.term-body code { font: inherit; background: none; padding: 0; border-radius: 0; color: inherit; overflow-wrap: normal; }
/* Home-page lead spacing (was two inline style attributes): the note under
   the hero actions, and the captured-header panel under the note. In the
   critical block so a late full sheet cannot shift them. */
.actions + .note { margin-top: 1rem; }
.note + .term-panel { margin-top: 1.5rem; }
/* The capture date never wraps mid-date ("2026-10-
09" at 390px). */
.capture-date { white-space: nowrap; }
@media (max-width: 860px) {
  /* Small screens keep the hub links: instead of hiding, the nav wraps onto
     its own full-width row under the logo, and the primary action stays
     compact at the end of that row instead of growing full-width. The band
     runs up to 860px because the single-row nav is wider than the 44rem
     column: between 761px and 860px it would overflow horizontally. */
  .site-header-row { flex-wrap: wrap; gap: 0.375rem 1rem; min-height: 0; padding: 0.625rem 0; }
  .site-nav { flex-wrap: wrap; width: 100%; margin-left: 0; }
  .site-nav .btn-primary { margin-left: auto; }
}
@media (max-width: 560px) {
  h1 { font-size: 1.625rem; }
}
@media (max-width: 420px) {
  .site-logo-word { font-size: 0.9375rem; }
  .site-nav .btn-primary { padding: 0.625rem 0.75rem; font-size: 0.75rem; min-height: 2.5rem; }
}

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

/* Section rhythm: ticked hairlines between channels, never background bands. */
main .rule-ticked { margin-top: 3rem; }
.section { padding-top: 2.25rem; }
.section > p:first-of-type { margin-top: 1rem; }
h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.5rem; }
.section h3 { margin-top: 1.5rem; }
.note { font-size: 0.8125rem; color: var(--color-text-annotation); line-height: 1.6; }

/* Field-label eyebrow: mono, prefixed by a small cyan field-tick; a numbered
   channel carries a two-digit index instead of the tick. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
}
.eyebrow::before { content: ''; flex: none; width: 0.5rem; height: 2px; background-color: var(--color-interactive); }
.eyebrow:has(.eyebrow-index)::before { display: none; }
.eyebrow-index { color: var(--color-interactive); }
.section .eyebrow { margin: 0 0 0.375rem; }

.rule-ticked-scale {
  height: 10px;
  border: 0;
  background:
    repeating-linear-gradient(90deg, var(--color-tick) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, var(--color-border-strong) 0 1px, transparent 1px 64px);
  background-size: auto 5px, auto 10px;
  background-repeat: repeat-x;
  background-position: 0 100%;
}

/* Non-interactive surface: the card frame without a hover state. */
.panel {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-elevated);
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
}
.panel p { margin-top: 0.35rem; }
.panel p:first-child { margin-top: 0; }
.panel h3 { margin-top: 0; }

/* Buttons. The primary is the only full cyan fill in any viewport. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  min-height: 2.75rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-control-border);
  background-color: transparent;
  color: var(--color-text-body);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn-secondary:hover { border-color: var(--color-interactive); color: var(--color-interactive); }
.tertiary {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  color: var(--color-interactive);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
}
.tertiary:hover { color: var(--color-interactive-hover); }
.tertiary svg { margin-left: 0.25rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }
.actions .tertiary { margin-top: 0; }
@media (max-width: 480px) {
  .actions { flex-direction: column; }
  .actions a { text-align: center; }
}

/* Feature list with squared cyan markers. */
.features { list-style: none; margin-top: 1.25rem; }
.features li { position: relative; padding-left: 1.5rem; color: var(--color-text-muted); line-height: 1.7; margin-top: 0.5rem; }
.features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-interactive);
  border-radius: 1px;
}

/* Term panel syntax colours (the panel's layout rules live in the critical
   block above — the home page shows one above the fold). */
.term-body .c { color: var(--color-text-annotation); }
.term-body .k { color: var(--color-interactive); }

/* Share row. */
.share {
  margin-top: 2.5rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-secondary);
}
.share-head { display: flex; align-items: flex-start; gap: 0.625rem; }
.share-head svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.125rem; fill: var(--color-interactive); display: block; }
.share-title { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--color-text-body); line-height: 1.3; }
.share-sub { margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--color-text-annotation); }
.share-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.share a, .share button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  min-width: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-text-body);
  background: var(--color-bg-elevated);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.share a:hover, .share button:hover {
  border-color: var(--color-interactive);
  background: var(--color-interactive-wash);
  color: var(--color-interactive);
}
.share-btns a svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.share-copy {
  order: -1;
  width: 100%;
  gap: 0.5rem;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-interactive);
  border-color: color-mix(in srgb, var(--color-interactive) 45%, transparent);
}
.share-copy svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; display: block; }
@media (min-width: 640px) {
  .share { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
  .share-btns { margin-top: 0; flex-shrink: 0; }
  .share-copy { order: 0; width: auto; }
}

/* Definition-list FAQ (alternative page). */
.faq { margin-top: 1rem; }
.faq dt { font-weight: 600; color: var(--color-text-body); margin-top: 1.5rem; }
.faq dd { color: var(--color-text-muted); line-height: 1.7; margin-top: 0.5rem; }

/* Spec table (alternative page). */
.matrix { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: 0.875rem; }
.matrix th { text-align: left; font-weight: 600; color: var(--color-text-body); padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--color-border-strong); }
.matrix td { padding: 0.6rem 0.75rem 0.6rem 0; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); }
.matrix td code { font-size: 0.8125rem; }

/* Captured response-header line (values from scripts/telemetry-capture.json,
   with the capture date printed next to them). */
.capture-line { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-annotation); margin-top: 1.5rem; }
.capture-line code { color: var(--color-success); }

/* Footer. */
.site-footer { padding: 2rem 0 2.5rem; color: var(--color-text-annotation); font-size: 0.8125rem; line-height: 1.6; }
.site-footer .rule-ticked { margin-bottom: 1.5rem; }
.site-footer p { color: var(--color-text-annotation); font-size: 0.8125rem; margin-top: 0; }
.site-footer a { color: var(--color-text-muted); }
.site-footer a:hover { color: var(--color-text-body); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 0.75rem; }
.footer-links a { text-decoration: none; }
.footer-legal { margin-top: 1rem !important; }