@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrainsmono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrainsmono-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/outfit-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Brand tokens, the clean line system. This file is the only place raw colour values live.
   Two layers: primitives (--p-*) hold the palette, roles (--c-*, --fs-*, --s-*, --r-*, --d-*) are what a page consumes.
   Lines do the work: every container, divider and row is a 1 px hairline; there are no shadows except the focus ring,
   flat fills only. The landing page sets four of its sections on a full-bleed ground: sky 50 for two, ink 50 for one and the dark scope for the proof band.
   Verdict rule: green means the work was rerun and the changed lines ran. Not tested is amber, not checked is grey,
   failed is red. Blue is the action colour and never a verdict.
   The product name is one value (--brand-name) and the mark is one file (mark.svg, group id "wing"). */

:root {
  /* Name: the one value to change when the name is final. */
  --brand-name: "Product";

  /* Palette primitives. Ink is the neutral ramp, sky the one accent, then the three verdict hues. */
  --p-white: #FFFFFF;
  --p-ink-25: #FAFAFA;
  --p-ink-50: #F4F4F5;
  --p-line: #E8E8E6;
  --p-line-strong: #D4D4D1;
  --p-ink-400: #A1A1AA;
  /* Lightest grey allowed for text: 4.63 to 1 on white, the WCAG 1.4.3 floor with margin. ink-400 stays for non-text strokes. */
  --p-ink-450: #74747D;
  --p-ink-500: #71717A;
  --p-ink-700: #3F3F46;
  --p-ink-950: #0A0A0A;
  --p-dark-sunken: #111111;
  --p-dark-raised: #18181B;
  --p-dark-line: #222224;
  --p-dark-line-strong: #2E2E31;
  --p-dark-ink-2: #D4D4D8;
  --p-sky-50: #EEF2FE;
  --p-sky-400: #7C9BFF;
  --p-sky-500: #2B5CF0;
  --p-sky-600: #1E47C8;
  --p-sky-ring: rgb(43 92 240 / 0.28);
  --p-green-600: #16A34A;
  --p-green-700: #15803D;
  --p-green-400: #4ADE80;
  --p-green-tint: #F0FDF4;
  --p-green-tint-dark: #0D1F14;
  --p-green-line: rgb(22 163 74 / 0.06);
  --p-amber-700: #B45309;
  --p-amber-400: #FBBF24;
  --p-amber-tint: #FFFBEB;
  --p-amber-tint-dark: #221808;
  --p-amber-line: rgb(180 83 9 / 0.04);
  --p-amber-line-dark: rgb(251 191 36 / 0.07);
  --p-red-600: #DC2626;
  --p-red-700: #B91C1C;
  --p-red-400: #F87171;
  --p-red-tint: #FEF2F2;
  --p-red-tint-dark: #2A1111;
  --p-grey-tint-dark: #1C1C1F;

  /* Type. Inter for every interface and reading face, Outfit for the wordmark only, JetBrains Mono for evidence. */
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-text);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --stretch-display: 100%;
  /* The wordmark is Outfit 500 lowercase. */
  --font-wordmark: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --wordmark-weight: 500;
  --wordmark-track: -0.035em;
  --wordmark-track-long: -0.03em;

  /* One type scale. 12 px is the floor and only for chips and mono data, 13 px for labels, 14 px app body, 16 px landing body. */
  --fs-chip: 0.75rem;
  --fs-micro: 0.8125rem;
  --fs-0: 0.875rem;
  --fs-1: 1rem;
  --fs-2: 1.125rem;
  --fs-3: 1.25rem;
  --fs-4: 1.5rem;
  --fs-5: 2rem;
  --fs-6: 2.5rem;
  --fs-7: 3rem;
  --fs-8: 3.5rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.1;
  --lh-snug: 1.35;
  --lh-app: 1.4286;
  --lh-body: 1.625;
  --lh-code: 1.6;
  --track-display: -0.02em;
  --track-heading: -0.01em;
  --track-body: -0.006em;
  --track-label: 0;

  /* Space on a 4 px grid: 4, 8, 12, 16, 24, 32, 48, 64, 96. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Sizes. Controls are 32 px (36 on the landing), list rows 44 px, icons 16 px at a 1.5 px stroke. */
  --size-icon-s: 1rem;
  --size-icon-m: 1rem;
  --size-icon-l: 1.25rem;
  --size-control: 2rem;
  --size-control-l: 2.25rem;
  --size-row: 2.75rem;
  --size-touch: 2rem;
  --size-page: 75rem;
  --size-hairline: 1px;
  --size-stroke: 2px;
  --size-icon-stroke: 1.5px;
  --size-focus: 3px;
  --size-dot: 6px;
  --size-meter: 2px;

  /* Mark geometry, from the 32 unit construction grid: wing 10, gap 4, lift 4, on a 45 degree lattice. */
  --mark-ratio: 28 / 18;
  --mark-to-cap: 1.3;
  --mark-gap: 0.36em;
  --mark-clear: 0.56;

  /* Radius: 6 px controls and chips, 8 px containers, 12 px only for the product window frame. */
  --r-1: 6px;
  --r-2: 6px;
  --r-3: 8px;
  --r-frame: 12px;
  --r-icon: 22.5%;
  --r-pill: 999px;

  /* Motion: 150 ms, opacity and transform only. */
  --d-fast: 150ms;
  --d-strike: 150ms;
  --d-base: 150ms;
  --d-slow: 150ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-strike: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --strike-scale: 1;
}

:root,
[data-theme="light"] {
  --c-bg: var(--p-white);
  --c-surface: var(--p-ink-25);
  --c-surface-2: var(--p-ink-50);
  --c-tint: var(--p-ink-25);
  --c-line: var(--p-line);
  --c-line-strong: var(--p-line-strong);
  --c-ink: var(--p-ink-950);
  --c-ink-2: var(--p-ink-700);
  --c-ink-3: var(--p-ink-500);
  --c-ink-4: var(--p-ink-450);
  --c-accent: var(--p-sky-500);
  --c-accent-ink: var(--p-sky-500);
  --c-on-accent: var(--p-white);
  --c-accent-strong: var(--p-sky-600);
  --c-accent-soft: var(--p-sky-50);
  --c-focus: var(--p-sky-500);
  --c-ring: var(--p-sky-ring);
  --c-primary: var(--p-ink-950);
  --c-on-primary: var(--p-white);
  --c-brand-field: var(--p-sky-500);
  --c-on-brand-field: var(--p-white);

  /* Verdicts: the hue for dots and meters, -ink for chip text, -soft for the chip tint. */
  --c-verified: var(--p-green-600);
  --c-on-verified: var(--p-white);
  --c-verified-soft: var(--p-green-tint);
  --c-verified-ink: var(--p-green-700);
  --c-partial: var(--p-ink-400);
  --c-not-tested: var(--p-amber-700);
  --c-on-not-tested: var(--p-white);
  --c-not-tested-soft: var(--p-amber-tint);
  --c-not-tested-ink: var(--p-amber-700);
  --c-not-tested-mark: var(--p-amber-700);
  --c-unverified: var(--p-ink-500);
  --c-unverified-fill: var(--p-ink-500);
  --c-on-unverified: var(--p-white);
  --c-unverified-soft: var(--p-ink-50);
  --c-unverified-ink: var(--p-ink-700);
  --c-failed: var(--p-red-600);
  --c-on-failed: var(--p-white);
  --c-failed-soft: var(--p-red-tint);
  --c-failed-ink: var(--p-red-700);
  --c-unmeasured: var(--p-line-strong);
  --c-ran: var(--p-green-line);
  --c-unran-line: var(--p-amber-line);
  color-scheme: light;
}

[data-theme="dark"] {
  --c-bg: var(--p-ink-950);
  --c-surface: var(--p-dark-sunken);
  --c-surface-2: var(--p-dark-raised);
  --c-tint: var(--p-dark-sunken);
  --c-line: var(--p-dark-line);
  --c-line-strong: var(--p-dark-line-strong);
  --c-ink: var(--p-ink-25);
  --c-ink-2: var(--p-dark-ink-2);
  --c-ink-3: var(--p-ink-400);
  --c-ink-4: var(--p-ink-500);
  --c-accent: var(--p-sky-400);
  --c-accent-ink: var(--p-sky-400);
  --c-on-accent: var(--p-ink-950);
  --c-accent-strong: var(--p-sky-500);
  --c-accent-soft: var(--p-dark-raised);
  --c-focus: var(--p-sky-400);
  --c-ring: var(--p-sky-ring);
  --c-primary: var(--p-ink-25);
  --c-on-primary: var(--p-ink-950);
  --c-brand-field: var(--p-sky-500);
  --c-on-brand-field: var(--p-white);

  --c-verified: var(--p-green-400);
  --c-on-verified: var(--p-ink-950);
  --c-verified-soft: var(--p-green-tint-dark);
  --c-verified-ink: var(--p-green-400);
  --c-partial: var(--p-ink-500);
  --c-not-tested: var(--p-amber-400);
  --c-on-not-tested: var(--p-ink-950);
  --c-not-tested-soft: var(--p-amber-tint-dark);
  --c-not-tested-ink: var(--p-amber-400);
  --c-not-tested-mark: var(--p-amber-400);
  --c-unverified: var(--p-ink-400);
  --c-unverified-fill: var(--p-ink-500);
  --c-on-unverified: var(--p-ink-25);
  --c-unverified-soft: var(--p-grey-tint-dark);
  --c-unverified-ink: var(--p-dark-ink-2);
  --c-failed: var(--p-red-400);
  --c-on-failed: var(--p-ink-950);
  --c-failed-soft: var(--p-red-tint-dark);
  --c-failed-ink: var(--p-red-400);
  --c-unmeasured: var(--p-dark-line-strong);
  --c-ran: var(--p-green-tint-dark);
  --c-unran-line: var(--p-amber-line-dark);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0.01ms;
    --d-strike: 0.01ms;
    --d-base: 0.01ms;
    --d-slow: 0.01ms;
  }
}

/* Page-level tokens that extend brand/tokens.css, shared by the report app (b26/app), this site and the landing (b26/site4).
   The brand file stays a verbatim copy of b26/brand4/tokens.css; every value a page needs beyond it lives here, so
   components.css and each page.css hold no raw values. */
:root {
  /* Display sizes. The landing h1 and the stat numbers scale with the viewport; every other heading is fixed. */
  --fs-hero: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-stat: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  --fs-statement: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --fs-close: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-mono: 0.8125rem;

  /* Sizes */
  --size-stage: 31rem;
  --size-diff: 25rem;
  --size-cell: 1.375rem;
  --size-chip: 1.375rem;
  --size-num: 1.25rem;
  --size-bar: 2px;
  --size-swatch: 0.5rem;
  --size-mark: 1.125rem;
  --size-mark-small: 0.9375rem;
  --size-col: 18rem;
  --size-illo: 4.5rem;
  --size-gate: 9rem;
  --size-token: 2rem;
  --size-node: 0.5rem;
  --size-pill: 999px;
  --size-label: 7rem;
  --size-thumb: 7rem;
  --size-caret: 0.9em;
  --size-gap-bar: 2px;
  --size-knob: 0.875rem;
  --size-switch: 1.25rem;
  --size-area: 6rem;
  --size-menu: 15rem;
  --size-pop: 17.5rem;
  --size-dialog: 30rem;
  --size-cmdk: 36rem;
  --size-side: 15rem;
  --size-screen: 100svh;
  --o-disabled: 0.4;
  /* Focus: a 2 px accent ring held 2 px off the control; rows draw it inside their own edge */
  --size-focus-ring: 2px;
  --size-focus-offset: 2px;
  /* Overlays open from 98 percent scale at their origin */
  --scale-pop: 0.98;
  --d-caret: 900ms;
  --d-spin: 800ms;

  /* Motion: one autoplay step and one 150 ms entrance */
  /* Landing hero and liveliness: a larger display size, a press, a spring settle and one scroll reveal */
  --fs-display: clamp(2.5rem, 0.9rem + 4.4vw, 4.875rem);
  --track-hero: -0.03em;
  --size-tile-art: 16rem;
  --size-shot-float: 19rem;
  --d-press: 80ms;
  --scale-press: 0.98;
  --d-settle: 300ms;
  --d-swap: 4000ms;
  --d-scan: 2600ms;
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --shift-rise: 0.75rem;
  --tilt: 3deg;
  --shift-parallax: 0.375rem;
  --d-auto: 7000ms;
  --d-type: 28ms;
  --d-reveal: 150ms;
  --d-travel: 150ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shift-reveal: 0.5rem;
  --blur-reveal: 0;

  /* Landing ground, drifting glyphs and the closing panel */
  --size-dot-fade: 1.2px;
  --size-dot-fade-wide: 1.4px;
  --size-dot-pitch: 22px;
  --size-dot-pitch-panel: 20px;
  --size-icon-sm: 0.875rem;
  --size-proof-icon: 1.375rem;
  --size-proof-icon-small: 1.125rem;
  --size-glow: 32.5rem;
  --shift-glow-x: -10rem;
  --shift-glow-y: -13.75rem;
  --blur-glow: 0.625rem;
  --r-panel: 16px;
  --size-underline-offset: 3px;
  --fs-hero-cap: 4rem;
  --size-wpanel-min: 25rem;
  --s-10: 7.5rem;
  --em-swap-pad: 0.08em;
  --em-swap-blur: 0.12em;
  --d-sheen: 6s;
  --d-drift: 7s;
  --d-drift-a: 9s;
  --d-drift-b: 8s;
  --d-drift-c: 8.5s;
  --d-drift-d: 10s;
  --delay-drift-a: -3s;
  --delay-drift-b: -5s;
  --delay-drift-c: -2s;
  --delay-drift-d: -6s;
  --d-ix-fast: 90ms;
  --d-ix-press: 60ms;
}

/* Colour roles built from brand tokens. Declared on every theme scope so a dark region resolves its own values. */
:root, [data-theme] {
  /* Closing panel: a dark surface inside the light page, with its own text and edge roles */
  --c-mask: #000000;
  --c-panel-bg: #0B0C10;
  --c-panel-line: #1E2027;
  --c-panel-focus: #6F93FF;
  --c-panel-btn-hover: #E8EBF2;
  --c-panel-claim-ink: #E4E4E7;
  --c-panel-warn: #F59E0B;
  --c-btn-primary-hover: #26262B;
  --c-marker: var(--c-accent-soft);
  --c-page-tint: var(--c-bg);
  --c-diff-unran: var(--c-unran-line);
  --c-diff-ran: var(--c-ran);
  --c-scan: var(--c-ink);
  --c-scrim: color-mix(in srgb, var(--p-ink-950) 40%, transparent);
  --c-ring-error: color-mix(in srgb, var(--c-failed) 28%, transparent);
  /* The one elevation: menus, the command menu, dialogs and toasts only. A hairline does the edge; this soft, tight
     shadow only lifts the overlay off the page. Nothing else casts a shadow. */
  --elev-overlay: 0 4px 16px -4px color-mix(in srgb, var(--p-ink-950) 12%, transparent), 0 1px 2px color-mix(in srgb, var(--p-ink-950) 6%, transparent);
}
/* On black a light shadow vanishes, so the dark overlay shadow is deeper */
[data-theme="dark"] {
  --elev-overlay: 0 8px 24px -6px color-mix(in srgb, var(--p-ink-950) 80%, transparent), 0 1px 2px color-mix(in srgb, var(--p-ink-950) 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-reveal: 0.01ms; --d-travel: 0.01ms; --shift-reveal: 0; --shift-rise: 0; --tilt: 0deg; --shift-parallax: 0; --d-settle: 0.01ms; }
}

/* The component library shared by the report app and the landing: every reusable part. Values come from
   brand/tokens.css (a verbatim copy of b26/brand4/tokens.css) and css/tokens-site.css; media-query breakpoints are
   the one named exception, since they cannot read variables.
   Clean line rules: 1 px hairlines do all separation, flat fills only, no nested card, motion is opacity and transform
   at 150 ms. The only shadows are the text field focus ring and --elev-overlay on menus, dialogs and toasts. */

/* Base: app density by default (14 px on 20); the landing sets its own 16 px on 26 on body.page */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s-9); }
body {
  margin: 0; background: var(--c-bg); color: var(--c-ink);
  font-family: var(--font-text); font-size: var(--fs-0); line-height: var(--lh-app); letter-spacing: var(--track-body);
  overflow-wrap: break-word; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: var(--track-display); text-wrap: balance; color: var(--c-ink); }
h2 { font-size: var(--fs-5); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-1); line-height: var(--lh-snug); letter-spacing: var(--track-heading); }
p, dd, dt, figcaption, li { text-wrap: pretty; }
p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code, .mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0; }
a { color: var(--c-accent); text-underline-offset: var(--s-1); text-decoration-thickness: var(--size-hairline); }
a:hover { color: var(--c-accent-strong); }
svg { flex: none; }
:focus-visible { outline: var(--size-focus-ring) solid var(--c-focus); outline-offset: var(--size-focus-offset); }
/* The ring draws in from a little further out, so focus moving is easy to follow */
:focus-visible { animation: focus-in var(--d-fast) var(--ease-out); }
@keyframes focus-in { from { outline-color: transparent; outline-offset: calc(var(--size-focus-offset) * 3); } }
@keyframes settle-in { from { opacity: 0; transform: translateY(var(--s-1)) scale(0.96); } }
.sr-only { position: absolute; width: var(--size-hairline); height: var(--size-hairline); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.muted { color: var(--c-ink-2); }
.meta { color: var(--c-ink-3); font-size: var(--fs-micro); }
.skip { position: absolute; left: var(--s-3); top: var(--s-3); transform: translateY(-300%); background: var(--c-primary); color: var(--c-on-primary); padding: var(--s-2) var(--s-4); border-radius: var(--r-1); z-index: 30; }
.skip:focus { transform: none; }

/* Page frame: a 1200 px container with 24 px gutters, 16 px on phones */
.wrap { width: 100%; max-width: var(--size-page); margin-inline: auto; padding-inline: var(--s-5); }
@media (max-width: 39.99rem) { .wrap { padding-inline: var(--s-4); } }
.section { padding-block: var(--s-9); border-top: var(--size-hairline) solid var(--c-line); }
@media (max-width: 39.99rem) { .section { padding-block: var(--s-8); } }
.section--tint { background: var(--c-bg); }
.head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); }
.head p { color: var(--c-ink-3); font-size: var(--fs-2); line-height: var(--lh-body); }
@media (min-width: 64rem) { .head { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--s-7); } }

/* Entrance for the first screen: a short rise on load. Content is visible without JS and with reduced motion. */
.js .reveal[data-pending] { opacity: 0; transform: translateY(var(--shift-reveal)); }
.reveal { transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); }

/* Wordmark: the mark file beside the name in Outfit 500 lowercase */
.wordmark { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-ink); text-decoration: none; font-family: var(--font-wordmark); font-weight: var(--wordmark-weight); font-size: var(--fs-3); letter-spacing: var(--wordmark-track); text-transform: lowercase; min-height: var(--size-control); }
.wordmark:hover { color: var(--c-ink); }
.wordmark svg, .mark { display: block; height: var(--size-mark); width: auto; aspect-ratio: var(--mark-ratio); color: var(--c-accent); }
.wordmark--small { font-size: var(--fs-2); }
.wordmark--small svg, .wordmark--small .mark { height: var(--size-mark-small); }

/* Buttons: 32 px, primary graphite, secondary a hairline, ghost text only */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--size-control); padding: 0 var(--s-3); border-radius: var(--r-1); border: var(--size-hairline) solid transparent; font: inherit; font-size: var(--fs-0); font-weight: var(--fw-medium); text-decoration: none; cursor: pointer; white-space: nowrap; color: var(--c-ink); background: transparent; transition: opacity var(--d-fast) var(--ease-standard), transform var(--d-press) var(--ease-standard), background-color var(--d-fast) var(--ease-standard), border-color var(--d-fast) var(--ease-standard); }
.btn:active { transform: scale(var(--scale-press)); }
.btn[data-copied] svg { color: var(--c-verified); animation: settle-in var(--d-settle) var(--ease-spring) both; }
.btn svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.btn--primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn--primary:hover { color: var(--c-on-primary); opacity: 0.86; }
.btn--outline, .btn--quiet { border-color: var(--c-line); background: var(--c-bg); color: var(--c-ink); }
.btn--outline:hover, .btn--quiet:hover { border-color: var(--c-line-strong); background: var(--c-surface); color: var(--c-ink); }
.btn--ghost { color: var(--c-ink-2); }
.btn--ghost:hover { color: var(--c-ink); background: var(--c-surface); }
.btn--small { min-height: var(--size-control); padding-inline: var(--s-3); }
.btn--large { min-height: var(--size-control-l); padding-inline: var(--s-4); }

/* Form field: 32 px, a strong hairline, the accent ring on focus */
.field { display: grid; gap: var(--s-2); }
.field__label { font-weight: var(--fw-medium); font-size: var(--fs-micro); color: var(--c-ink-2); }
.field__input { width: 100%; min-height: var(--size-control); padding: 0 var(--s-3); font: inherit; font-size: var(--fs-0); color: var(--c-ink); background: var(--c-bg); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-1); }
.field__input::placeholder { color: var(--c-ink-4); }
.field__input:hover { border-color: var(--c-ink-4); }
.field__input:focus { outline: 0; border-color: var(--c-accent); box-shadow: 0 0 0 var(--size-focus) var(--c-ring); }
.field__input[aria-invalid="true"] { border-color: var(--c-failed); }
.field__note { min-height: calc(var(--lh-app) * var(--fs-micro)); font-size: var(--fs-micro); color: var(--c-ink-3); }
.field__note[data-state="error"] { color: var(--c-failed-ink); }
.field__note[data-state="ok"] { color: var(--c-verified-ink); }

/* Card: a hairline container, never inside another card */
.card { background: var(--c-bg); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); padding: var(--s-5); }
.card .card { border: 0; padding: 0; }
.tag { display: inline-flex; align-items: center; padding: 0 var(--s-2); border-radius: var(--r-1); font-size: var(--fs-chip); font-weight: var(--fw-medium); line-height: var(--lh-body); }
.tag--next { background: var(--c-accent-soft); color: var(--c-accent); }
.pill { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0 var(--s-2); border-radius: var(--r-1); border: var(--size-hairline) solid var(--c-line); color: var(--c-ink-3); font-size: var(--fs-chip); line-height: var(--lh-body); }

/* Verdict chip: a 6 px dot and 12 px text on a faint tint. Not tested has a hollow amber ring and is never green. */
.chip { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--size-chip); padding: 0 var(--s-2); border-radius: var(--r-1); font-weight: var(--fw-medium); font-size: var(--fs-chip); line-height: 1; white-space: nowrap; letter-spacing: 0; }
.chip::before { content: ""; width: var(--size-dot); height: var(--size-dot); border-radius: 50%; background: currentColor; flex: none; }
.chip svg { display: none; }
.chip--verified { background: var(--c-verified-soft); color: var(--c-verified-ink); }
.chip--verified::before { background: var(--c-verified); }
.chip--failed { background: var(--c-failed-soft); color: var(--c-failed-ink); }
.chip--failed::before { background: var(--c-failed); }
.chip--unverified { background: var(--c-unverified-soft); color: var(--c-unverified-ink); }
.chip--unverified::before { background: var(--c-unverified); }
.chip--not-tested { background: var(--c-not-tested-soft); color: var(--c-not-tested-ink); }
.chip--not-tested::before { background: transparent; border: var(--size-hairline) solid var(--c-not-tested-mark); }
.chip--large { font-size: var(--fs-chip); }
.chip[data-strike] { animation: strike var(--d-slow) var(--ease-strike) both; }
@keyframes strike { from { opacity: 0; } to { opacity: 1; } }

/* Verdict list: one hairline row per claim */
.verdicts { display: grid; border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); }
.verdict { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: var(--size-hairline) solid var(--c-line); }
.verdict:first-child { border-top: 0; }
.verdict__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.verdict__claim { color: var(--c-ink); }
.verdict__why { color: var(--c-ink-3); font-size: var(--fs-micro); }
.verdicts--compact .verdict { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-3); min-height: var(--size-row); padding-block: var(--s-2); }
.verdicts--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-col)), 1fr)); }
.verdicts--row .verdict { border-top: 0; }

/* Autoplay tab: a named tab with a 2 px progress meter that fills over one step.
   The bar's animationend advances the set, so pausing the animation pauses the set. */
.step__bar { position: absolute; left: 0; right: 0; bottom: calc(var(--size-hairline) * -1); height: var(--size-meter); background: transparent; overflow: hidden; }
.step__bar span { display: block; height: 100%; width: 100%; background: var(--c-ink); transform: scaleX(0); transform-origin: left; }
[aria-selected="true"] > .step__bar span { transform: scaleX(1); }
[data-autoplay][data-running] [aria-selected="true"] > .step__bar span { animation: fill var(--d-auto) linear both; }
[data-autoplay][data-held] [aria-selected="true"] > .step__bar span { animation-play-state: paused; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Marker: a phrase picked out by a hairline underline, no fill */
.marker { text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: var(--size-hairline); text-underline-offset: var(--s-1); }
.marker__text[data-typing]::after { content: ""; display: inline-block; width: var(--size-hairline); height: var(--size-caret); margin-left: var(--s-1); vertical-align: baseline; background: var(--c-ink); animation: caret var(--d-caret) steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Code lines: a numbered gutter, a sign column and the text, in 12 px mono */
.code { display: grid; font-family: var(--font-mono); font-size: var(--fs-chip); line-height: var(--lh-code); overflow: hidden; letter-spacing: 0; }
.code__row { display: grid; grid-template-columns: var(--s-7) var(--s-5) 1fr auto; align-items: start; gap: 0; padding-right: var(--s-3); position: relative; }
.code__n { color: var(--c-ink-4); text-align: right; padding-right: var(--s-3); user-select: none; font-variant-numeric: tabular-nums; }
.code__sign { color: var(--c-ink-4); text-align: center; user-select: none; }
.code__t { white-space: pre-wrap; word-break: break-word; color: var(--c-ink-2); }
.code__tag { font-family: var(--font-text); font-size: var(--fs-chip); font-weight: var(--fw-medium); padding: 0 var(--s-2); border-radius: var(--r-1); align-self: center; opacity: 0; transition: opacity var(--d-base) var(--ease-standard); }
.code__row--file { color: var(--c-ink); background: var(--c-surface); padding-block: var(--s-2); grid-template-columns: 1fr; padding-left: var(--s-3); border-bottom: var(--size-hairline) solid var(--c-line); }
.code__row--hunk { height: var(--s-2); }
.code__row--removed .code__t { color: var(--c-ink-3); text-decoration: line-through; text-decoration-color: var(--c-line-strong); }
.code__row--added-none .code__t, .code__row--added-unran .code__t, .code__row--added-ran .code__t { color: var(--c-ink); }
/* An unrun line: a 4 percent amber tint, its gutter number and sign in amber with a hairline amber ring as the marker */
.code__row[data-cov="unran"] { background: var(--c-unran-line); }
.code__row[data-cov="unran"] .code__n, .code__row[data-cov="unran"] .code__sign { color: var(--c-not-tested-ink); }
.code__row[data-cov="unran"] .code__sign { position: relative; color: transparent; }
.code__row[data-cov="unran"] .code__sign::before { content: ""; position: absolute; left: 50%; top: calc(var(--lh-code) * var(--fs-chip) / 2); width: var(--size-dot); height: var(--size-dot); border-radius: 50%; border: var(--size-hairline) solid var(--c-not-tested-mark); transform: translate(-50%, -50%); }
.code__row[data-cov="unran"] .code__tag { opacity: 1; color: var(--c-not-tested-ink); }
.code__row[data-cov="ran"] { background: var(--c-diff-ran); }
.code__row[data-cov="ran"] .code__tag { opacity: 1; color: var(--c-verified-ink); }

/* Segmented filter: hairline buttons, the pressed one in ink */
.seg { display: inline-flex; gap: var(--s-1); }
.seg button { display: inline-flex; align-items: center; min-height: var(--size-control); padding: 0 var(--s-3); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-1); background: var(--c-bg); color: var(--c-ink-2); font: inherit; font-size: var(--fs-micro); cursor: pointer; }
.seg button:hover { border-color: var(--c-line-strong); color: var(--c-ink); }
.seg button[aria-pressed="true"] { border-color: var(--c-ink); color: var(--c-ink); font-weight: var(--fw-medium); }

/* Status mark for a run step: queued ring, running spinner, done check */
.status { width: var(--size-icon-m); height: var(--size-icon-m); border-radius: 50%; display: inline-grid; place-items: center; border: var(--size-hairline) solid var(--c-line-strong); color: var(--c-on-verified); }
.status svg { width: var(--size-icon-s); height: var(--size-icon-s); opacity: 0; }
[data-state="running"] > .status { border-color: var(--c-ink); border-right-color: transparent; animation: spin var(--d-spin) linear infinite; }
[data-state="done"] > .status { border-color: var(--c-verified); background: var(--c-verified); }
[data-state="done"] > .status svg { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* App bar: the wordmark and a few links, shared by every page of the report app */
.appbar { position: sticky; top: 0; z-index: 20; background: var(--c-bg); border-bottom: var(--size-hairline) solid var(--c-line); }
.appbar__row { display: flex; align-items: center; gap: var(--s-4); min-height: var(--s-8); }
.appbar__links { display: flex; margin-left: auto; gap: var(--s-1); }
.appbar__links a { display: inline-flex; align-items: center; min-height: var(--size-control); padding-inline: var(--s-3); color: var(--c-ink-3); text-decoration: none; border-radius: var(--r-1); font-size: var(--fs-micro); }
.appbar__links a:hover, .appbar__links a[aria-current="page"] { color: var(--c-ink); }

/* App page: the frame under the bar, with a title row */
.app { display: grid; gap: var(--s-5); padding-block: var(--s-6) var(--s-8); align-content: start; }
.app__title { display: grid; gap: var(--s-2); }
.app__title h1 { font-size: var(--fs-4); line-height: var(--lh-tight); }
.app__title p { color: var(--c-ink-3); }
.app h1 { margin: 0; }

/* Toolbar: search, filter and sort above a list */
.toolbar { display: grid; gap: var(--s-3); }
.toolbar__search { position: relative; }
.toolbar__search svg { position: absolute; left: var(--s-3); top: 50%; width: var(--size-icon-s); height: var(--size-icon-s); transform: translateY(-50%); color: var(--c-ink-3); pointer-events: none; }
.toolbar__search .field__input { padding-left: calc(var(--s-3) + var(--size-icon-s) + var(--s-2)); }
.toolbar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.toolbar__count { color: var(--c-ink-3); font-size: var(--fs-micro); }
.seg--wrap { flex-wrap: wrap; }
.seg button[aria-pressed="true"] .seg__n { color: var(--c-ink-2); }
.seg__n { margin-left: var(--s-2); color: var(--c-ink-3); font-family: var(--font-mono); font-size: var(--fs-chip); font-variant-numeric: tabular-nums; }
.field__input--select { width: auto; min-height: var(--size-control); padding-right: var(--s-6); }

/* Run row: one run in the runs list, a whole-row link 44 px high, hairline dividers, hover in the sunken grey */
.runlist { display: grid; border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); overflow: hidden; background: var(--c-bg); }
.runrow { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); color: var(--c-ink); text-decoration: none; border-top: var(--size-hairline) solid var(--c-line); min-height: var(--size-row); }
.runrow:first-child { border-top: 0; }
.runrow:hover, .runrow[data-active] { background: var(--c-surface); color: var(--c-ink); }
/* The row action: a chevron that slides in from the left while the row is hovered or active */
.runrow { position: relative; padding-right: var(--s-7); transition: background-color var(--d-fast) var(--ease-standard); }
.runrow__go { position: absolute; right: var(--s-4); top: 50%; display: inline-grid; place-items: center; color: var(--c-ink-3); opacity: 0; transform: translate(calc(var(--s-2) * -1), -50%); transition: opacity var(--d-fast) var(--ease-standard), transform var(--d-settle) var(--ease-spring); }
.runrow__go svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.runrow:hover .runrow__go, .runrow[data-active] .runrow__go, .runrow:focus-visible .runrow__go { opacity: 1; transform: translate(0, -50%); color: var(--c-ink); }
.runrow[data-active], .runrow[aria-selected="true"] { outline: var(--size-hairline) solid var(--c-ink); outline-offset: calc(var(--size-hairline) * -1); }
.runrow__repo { font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.runrow__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); color: var(--c-ink-3); font-size: var(--fs-micro); }
.runrow__counts { text-align: left; color: var(--c-ink-3); font-family: var(--font-mono); font-size: var(--fs-chip); font-variant-numeric: tabular-nums; }
@media (min-width: 40rem) {
  .runrow { grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1.8fr) var(--size-gate); justify-items: start; padding-block: var(--s-2); }
  .runrow .chip { justify-self: end; }
  .runrow__meta { grid-column: auto; }
  .runrow__counts { justify-self: end; text-align: right; }
}

/* Run header: the facts about one run and its primary action, ruled off by a hairline, not boxed */
.runhead { display: grid; gap: var(--s-5); padding-bottom: var(--s-5); border-bottom: var(--size-hairline) solid var(--c-line); }
.runhead__top { display: grid; gap: var(--s-4); }
.runhead__title { display: grid; gap: var(--s-2); min-width: 0; }
.runhead__title h1 { font-size: var(--fs-4); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.runhead__act { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.runhead__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
/* The report's verdict settles in and pulses once on load: a ring in its own colour grows and fades */
.runhead__verdict .chip { animation: settle-in var(--d-settle) var(--ease-spring) both, verdict-pulse calc(var(--d-settle) * 3) var(--ease-out) var(--d-settle) 1; outline: var(--size-stroke) solid transparent; outline-offset: 0; }
@keyframes verdict-pulse { from { outline-color: currentColor; outline-offset: 0; } to { outline-color: transparent; outline-offset: var(--s-2); } }
.claimrow__head .chip { animation: settle-in var(--d-settle) var(--ease-spring) both; }
.runhead__count { color: var(--c-ink-3); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }
@media (min-width: 64rem) { .runhead__top { grid-template-columns: 1fr auto; align-items: start; } .runhead__act { justify-content: flex-end; } }
.crumb { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--c-ink-3); text-decoration: none; font-size: var(--fs-micro); min-height: var(--size-control); justify-self: start; }
.crumb:hover { color: var(--c-ink); }
.crumb svg { width: var(--size-icon-s); height: var(--size-icon-s); }

/* Facts: a definition grid of label and value pairs; values in mono */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.facts dt { color: var(--c-ink-3); font-size: var(--fs-micro); }
.facts dd { color: var(--c-ink); overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0; }
@media (min-width: 64rem) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Claim rows: one hairline list; a row's head carries the verdict and line count, its panel the evidence */
.claimrows { display: grid; border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); overflow: hidden; }
.claimrow { border-top: var(--size-hairline) solid var(--c-line); background: var(--c-bg); }
.claimrow:first-child { border-top: 0; }
.claimrow__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--s-2) var(--s-4); align-items: center; width: 100%; padding: var(--s-2) var(--s-4); border: 0; background: transparent; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; min-height: var(--size-row); }
.claimrow__head:hover, .claimrow[data-active] .claimrow__head { background: var(--c-surface); }
.claimrow__head:focus-visible, .runrow:focus-visible { outline-offset: calc(var(--size-focus-ring) * -1); }
.claimrow[data-active] .claimrow__head { outline: var(--size-hairline) solid var(--c-ink); outline-offset: calc(var(--size-hairline) * -1); }
.claimrow__text { overflow-wrap: anywhere; font-weight: var(--fw-medium); }
.claimrow__lines { color: var(--c-ink-3); font-family: var(--font-mono); font-size: var(--fs-chip); font-variant-numeric: tabular-nums; text-align: right; }
.claimrow__caret { width: var(--size-icon-s); height: var(--size-icon-s); color: var(--c-ink-3); transition: transform var(--d-base) var(--ease-standard); }
.claimrow[data-open] .claimrow__caret { transform: rotate(90deg); }
.claimrow__head .chip { grid-row: 1; grid-column: 1; }
.claimrow__head .claimrow__text { grid-row: 1; grid-column: 2; }
.claimrow__head .claimrow__lines { grid-row: 1; grid-column: 3; }
.claimrow__head .claimrow__caret { grid-row: 1; grid-column: 4; }
@media (max-width: 39.99rem) {
  .claimrow__head { grid-template-columns: 1fr auto; padding-block: var(--s-3); }
  .claimrow__head .chip { grid-column: 1; justify-self: start; }
  .claimrow__head .claimrow__text { grid-row: 2; grid-column: 1 / -1; }
  .claimrow__head .claimrow__lines { grid-row: 3; grid-column: 1 / -1; text-align: left; }
  .claimrow__head .claimrow__caret { grid-column: 2; }
}
.claimrow__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5) var(--s-4); border-top: var(--size-hairline) solid var(--c-line); }
.claimrow__panel[hidden] { display: none; }
.claimrow__panel > .block { padding-top: var(--s-5); border-top: var(--size-hairline) solid var(--c-line); }
.claimrow__panel .diff { border: 0; border-radius: 0; }
.claimrow__panel .sites { border: 0; border-radius: 0; }
.claimrow__panel .cmd__box { padding: 0; border: 0; border-radius: 0; background: transparent; }
.claimrow__why { color: var(--c-ink-2); }
.block { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); min-width: 0; }
.block .meta { overflow-wrap: anywhere; }
.block h3 { font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-ink-3); letter-spacing: 0; }

/* Meter: a 2 px line, the share of changed lines that ran in green over an amber track for the lines that did not */
.meter { display: grid; gap: var(--s-2); }
.meter__bar { height: var(--size-meter); background: var(--c-not-tested); overflow: hidden; }
.meter__bar span { display: block; height: 100%; width: calc(var(--share, 0) * 100%); background: var(--c-verified); }
.meter__label { color: var(--c-ink-3); font-family: var(--font-mono); font-size: var(--fs-chip); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Diff view: the code rows inside a hairline frame, with a legend */
.diff { border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); overflow: hidden; }
.diff .code__row--added .code__t { color: var(--c-ink); }
.diff .code__row[data-cov="mocked"] { background: var(--c-surface); }
.diff .code__row[data-cov="mocked"] .code__tag { opacity: 1; color: var(--c-unverified-ink); }
.diff .code__t { overflow-wrap: anywhere; }
@media (max-width: 39.99rem) {
  .diff .code__row[data-cov] { grid-template-columns: var(--s-7) var(--s-5) minmax(0, 1fr); padding-bottom: var(--s-1); }
  .diff .code__row[data-cov] .code__tag { grid-column: 3; justify-self: start; padding-left: 0; }
}
.diff__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); color: var(--c-ink-3); font-size: var(--fs-micro); }
.legend__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.legend__swatch { width: var(--size-swatch); height: var(--size-swatch); border-radius: 50%; border: var(--size-hairline) solid var(--c-line-strong); background: var(--c-bg); }
.legend__swatch--ran { background: var(--c-verified); border-color: var(--c-verified); }
.legend__swatch--unran { background: transparent; border-color: var(--c-not-tested-mark); }
.legend__swatch--mocked { background: var(--c-unverified); border-color: var(--c-unverified); }

/* Call sites: one hairline row per changed call, with whether a test ran it */
.sites { display: grid; border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); }
.site { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-3); align-items: baseline; padding: var(--s-3) var(--s-4); border-top: var(--size-hairline) solid var(--c-line); }
.site:first-child { border-top: 0; }
.site__where { grid-column: 2; color: var(--c-ink-3); font-family: var(--font-mono); font-size: var(--fs-chip); overflow-wrap: anywhere; }
.site__text { overflow-wrap: anywhere; color: var(--c-ink); font-size: var(--fs-chip); }
.tag--ran { background: var(--c-verified-soft); color: var(--c-verified-ink); }
.tag--unran { background: var(--c-not-tested-soft); color: var(--c-not-tested-ink); }
.tag--mocked { background: var(--c-unverified-soft); color: var(--c-unverified-ink); }

/* Command block: the exact rerun command with its copy button, on the sunken grey */
.cmd { display: grid; gap: var(--s-2); }
.cmd__box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-4); border-radius: var(--r-3); background: var(--c-surface); border: var(--size-hairline) solid var(--c-line); color: var(--c-ink); }
.cmd__text { margin: 0; font-family: var(--font-mono); font-size: var(--fs-chip); line-height: var(--lh-code); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.kbd { display: inline-grid; place-items: center; min-width: var(--s-5); padding: 0 var(--s-1); border-radius: var(--r-1); border: var(--size-hairline) solid var(--c-line); font-family: var(--font-mono); font-size: var(--fs-chip); color: var(--c-ink-3); background: var(--c-bg); }
.btn .kbd { margin-left: var(--s-1); }
.btn--primary .kbd { background: transparent; color: inherit; border-color: currentColor; }
.keys { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); color: var(--c-ink-3); font-size: var(--fs-micro); }
.keys span { display: inline-flex; align-items: center; gap: var(--s-2); }

/* Notice: a plain statement of something the run could not do */
.notice { padding: var(--s-3) var(--s-4); border-radius: var(--r-3); background: var(--c-surface); color: var(--c-ink); border: var(--size-hairline) solid var(--c-line); }

/* Empty, error and loading states */
.state { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-8) var(--s-5); text-align: center; border: var(--size-hairline) dashed var(--c-line-strong); border-radius: var(--r-3); background: var(--c-bg); }
.state svg { width: var(--s-6); height: var(--s-6); color: var(--c-ink-3); }
.state h2 { font-size: var(--fs-2); letter-spacing: var(--track-heading); }
.state p { color: var(--c-ink-3); }
.skeleton { display: grid; border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); overflow: hidden; }
.skeleton span { display: block; height: var(--size-row); border-top: var(--size-hairline) solid var(--c-line); background: var(--c-surface); animation: pulse calc(var(--d-auto) / 5) var(--ease-standard) infinite alternate; }
.skeleton span:first-child { border-top: 0; }
@keyframes pulse { to { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .skeleton span { animation: none; } }

/* Toast: a short confirmation near the bottom of the screen */
.toast { position: fixed; left: 50%; bottom: var(--s-5); transform: translate(-50%, var(--s-3)); display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: var(--r-1); background: var(--c-primary); color: var(--c-on-primary); font-size: var(--fs-micro); opacity: 0; pointer-events: none; transition: opacity var(--d-base) var(--ease-standard), transform var(--d-base) var(--ease-standard); z-index: 40; box-shadow: var(--elev-overlay); }
.toast[data-show] { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: var(--size-icon-s); height: var(--size-icon-s); }

/* The hidden attribute wins over a button's display */
.btn[hidden] { display: none; }

/* States shared by every control: disabled reads as 40 percent ink and stops the pointer; busy holds the label width */
.btn:disabled, .btn[aria-disabled="true"], .field__input:disabled, .check:disabled, .switch:disabled { opacity: var(--o-disabled); cursor: not-allowed; }
.btn:disabled:active { transform: none; }
.btn--primary:disabled:hover { opacity: var(--o-disabled); }
.field__input:disabled { background: var(--c-surface); }
.field__input[aria-invalid="true"]:focus { border-color: var(--c-failed); box-shadow: 0 0 0 var(--size-focus) var(--c-ring-error); }
.btn--icon { width: var(--size-control); padding: 0; }
.btn--large.btn--icon { width: var(--size-control-l); }
.btn[aria-busy="true"] { position: relative; color: transparent; cursor: progress; pointer-events: none; }
.btn[aria-busy="true"] > :not(.spinner) { visibility: hidden; }
.btn[aria-busy="true"] > .spinner { position: absolute; inset: 0; margin: auto; color: var(--c-ink-2); }
.btn--primary[aria-busy="true"] > .spinner { color: var(--c-on-primary); }
.btn--danger { color: var(--c-failed-ink); border-color: var(--c-line); background: var(--c-bg); }
.btn--danger:hover { border-color: var(--c-failed); color: var(--c-failed-ink); }

/* Spinner: the loading mark for buttons, rows and panels; a hairline ring with one open quarter */
.spinner { display: inline-block; width: var(--size-icon-s); height: var(--size-icon-s); border-radius: 50%; border: var(--size-hairline) solid currentColor; border-right-color: transparent; animation: spin var(--d-spin) linear infinite; flex: none; }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: calc(var(--d-spin) * 4); } }

/* Textarea: the field input, grown to several lines */
.field__input--area { min-height: var(--size-area); padding-block: var(--s-2); line-height: var(--lh-app); resize: vertical; display: block; }
.field__row { display: flex; justify-content: space-between; gap: var(--s-3); }
.field__count { font-family: var(--font-mono); font-size: var(--fs-chip); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.field__unit { position: relative; display: grid; }
.field__unit .field__input { padding-right: var(--s-8); }
.field__unit span { position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--c-ink-3); font-size: var(--fs-micro); pointer-events: none; }

/* Checkbox, radio and switch: native inputs drawn in hairlines; checked fills in graphite, never a verdict colour */
.choice { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--size-control); cursor: pointer; color: var(--c-ink); }
.choice:has(:disabled) { cursor: not-allowed; color: var(--c-ink-3); }
.check { appearance: none; position: relative; display: inline-grid; place-items: center; width: var(--size-icon-s); height: var(--size-icon-s); margin: 0; border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-1); background: var(--c-bg); cursor: pointer; flex: none; transition: opacity var(--d-fast) var(--ease-standard); }
.check--radio { border-radius: 50%; }
.check:hover { border-color: var(--c-ink-4); }
.check:checked, .check:indeterminate { background: var(--c-primary); border-color: var(--c-primary); }
.check::after { content: ""; width: 100%; height: 100%; background: var(--c-on-primary); opacity: 0; }
.check:checked::after { opacity: 1; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5 5.5-6' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5 5.5-6' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.check:indeterminate::after { opacity: 1; width: 50%; height: var(--size-stroke); border-radius: var(--size-stroke); }
.check--radio:checked::after { width: var(--size-dot); height: var(--size-dot); border-radius: 50%; -webkit-mask: none; mask: none; }
.check[aria-invalid="true"] { border-color: var(--c-failed); }
.switch { appearance: none; position: relative; width: var(--s-6); height: var(--size-switch); margin: 0; border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--size-switch); background: var(--c-surface-2); cursor: pointer; flex: none; transition: background-color var(--d-fast) var(--ease-standard); }
.switch::after { content: ""; position: absolute; top: 50%; left: 0; width: var(--size-knob); height: var(--size-knob); margin-left: calc((var(--size-switch) - var(--size-knob)) / 2 - var(--size-hairline)); border-radius: 50%; background: var(--c-bg); border: var(--size-hairline) solid var(--c-line-strong); transform: translate(0, -50%); transition: transform var(--d-fast) var(--ease-standard); }
.switch:hover { border-color: var(--c-ink-4); }
.switch:checked { background: var(--c-primary); border-color: var(--c-primary); }
.switch:checked::after { border-color: var(--c-primary); transform: translate(calc(var(--s-6) - var(--size-switch)), -50%); }

/* Search hint: when a query matches nothing, the closest spelling is searched and said so in one line */
.hint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); color: var(--c-ink-3); font-size: var(--fs-micro); }
.hint strong { color: var(--c-ink); font-weight: var(--fw-medium); }
.hint button { padding: 0; border: 0; background: transparent; font: inherit; color: var(--c-accent); cursor: pointer; text-decoration: underline; text-decoration-thickness: var(--size-hairline); text-underline-offset: var(--s-1); }

/* Tabs and saved views: the selected tab is a filled pill in ink, the rest quiet text; a count rides in mono */
.tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.tabs__tab { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--size-control); padding: 0 var(--s-3); border: var(--size-hairline) solid transparent; border-radius: var(--r-1); background: transparent; color: var(--c-ink-3); font: inherit; font-size: var(--fs-micro); text-decoration: none; cursor: pointer; white-space: nowrap; }
.tabs__tab:hover { color: var(--c-ink); background: var(--c-surface); }
.tabs__tab[aria-selected="true"], .tabs__tab[aria-current="page"] { color: var(--c-ink); background: var(--c-surface-2); font-weight: var(--fw-medium); }
.tabs__tab:active { transform: translateY(var(--size-hairline)); }
.tabs__tab:disabled { opacity: var(--o-disabled); cursor: not-allowed; }
.tabs__tab .seg__n { margin-left: 0; }
.tabs__tab svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.tabs--line { padding-bottom: var(--s-2); border-bottom: var(--size-hairline) solid var(--c-line); }

/* Count badge: a number in mono on the sunken grey */
.count { display: inline-grid; place-items: center; min-width: var(--size-chip); height: var(--size-chip); padding: 0 var(--s-1); border-radius: var(--r-1); background: var(--c-surface-2); color: var(--c-ink-2); font-family: var(--font-mono); font-size: var(--fs-chip); font-variant-numeric: tabular-nums; line-height: 1; }

/* Menu: a hairline panel of 32 px items, lifted by the one overlay elevation; opens from its trigger corner */
.menu { display: grid; gap: var(--s-1); width: var(--size-menu); padding: var(--s-1); background: var(--c-bg); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-3); z-index: 30; box-shadow: var(--elev-overlay); transform-origin: top left; animation: pop var(--d-fast) var(--ease-out) both; }
.menu--end { transform-origin: top right; }
@keyframes pop { from { opacity: 0; transform: scale(var(--scale-pop)); } }
.menu__item { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--size-control); padding: 0 var(--s-2); border: 0; border-radius: var(--r-1); background: transparent; color: var(--c-ink); font: inherit; font-size: var(--fs-0); text-align: left; text-decoration: none; cursor: pointer; }
.menu__item svg { width: var(--size-icon-s); height: var(--size-icon-s); color: var(--c-ink-3); }
.menu__item:hover, .menu__item[data-active] { background: var(--c-surface); color: var(--c-ink); }
.menu__item:focus-visible { outline: 0; box-shadow: none; background: var(--c-surface-2); }
.menu__item:disabled { opacity: var(--o-disabled); cursor: not-allowed; background: transparent; }
.menu__item .kbd, .menu__item .count { margin-left: auto; }
.menu__item .kbd { background: transparent; color: var(--c-ink-4); }
.menu__item--danger, .menu__item--danger svg { color: var(--c-failed-ink); }
.menu__label { padding: var(--s-2) var(--s-2) var(--s-1); color: var(--c-ink-3); font-size: var(--fs-chip); font-weight: var(--fw-medium); }
.menu__sep { height: var(--size-hairline); margin: var(--s-1) calc(var(--s-1) * -1); background: var(--c-line); border: 0; }
.menu__empty { padding: var(--s-5) var(--s-2); color: var(--c-ink-3); font-size: var(--fs-micro); text-align: center; }

/* Command menu: a search input over grouped commands, opened with Cmd K or / */
.cmdk { display: grid; width: min(100%, var(--size-cmdk)); background: var(--c-bg); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-3); overflow: hidden; box-shadow: var(--elev-overlay); transform-origin: top center; animation: pop var(--d-fast) var(--ease-out) both; }
.cmdk__search { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-4); border-bottom: var(--size-hairline) solid var(--c-line); color: var(--c-ink-3); }
.cmdk__search svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.cmdk__search input { flex: 1; min-width: 0; min-height: var(--s-7); border: 0; background: transparent; color: var(--c-ink); font: inherit; font-size: var(--fs-1); }
.cmdk__search input:focus { outline: 0; box-shadow: none; }
.cmdk__search input::placeholder { color: var(--c-ink-4); }
.cmdk .menu { width: auto; border: 0; border-radius: 0; padding: var(--s-2); box-shadow: none; animation: none; }
.cmdk .menu__item[data-active] { background: var(--c-surface-2); }
.cmdk__foot { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-2) var(--s-4); border-top: var(--size-hairline) solid var(--c-line); background: var(--c-surface); }

/* Dialog: a hairline panel over a flat scrim; a title, one short body and the actions at the end */
.scrim { position: fixed; inset: 0; display: grid; place-items: start center; padding: var(--s-9) var(--s-4) var(--s-4); background: var(--c-scrim); z-index: 50; }
.dialog { display: grid; gap: var(--s-4); width: min(100%, var(--size-dialog)); padding: var(--s-5); background: var(--c-bg); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-3); color: var(--c-ink); box-shadow: var(--elev-overlay); transform-origin: top center; animation: pop var(--d-fast) var(--ease-out) both; }
.dialog h2 { font-size: var(--fs-2); line-height: var(--lh-snug); letter-spacing: var(--track-heading); }
.dialog p { color: var(--c-ink-2); }
.dialog__act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); padding-top: var(--s-2); }
dialog.dialog { margin: auto; }
dialog.dialog::backdrop { background: var(--c-scrim); }

/* Toast with undo: the confirmation carries the one way back */
.toast__undo { display: inline-flex; align-items: center; gap: var(--s-1); margin-left: var(--s-2); padding: 0 var(--s-2); min-height: var(--size-chip); border: var(--size-hairline) solid currentColor; border-radius: var(--r-1); background: transparent; color: inherit; font: inherit; font-weight: var(--fw-medium); cursor: pointer; pointer-events: auto; }
.toast__undo:hover { opacity: 0.8; }
.toast[data-show] .toast__undo { pointer-events: auto; }

/* Tooltip: one short line in ink on graphite, shown on hover and focus after a beat */
.tip { display: inline-block; padding: var(--s-1) var(--s-2); border-radius: var(--r-1); background: var(--c-primary); color: var(--c-on-primary); font-size: var(--fs-chip); line-height: var(--lh-snug); white-space: nowrap; z-index: 40; }
.tip .kbd { margin-left: var(--s-1); background: transparent; color: inherit; border-color: currentColor; }
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + var(--s-2)); transform: translate(-50%, var(--s-1)); padding: var(--s-1) var(--s-2); border-radius: var(--r-1); background: var(--c-primary); color: var(--c-on-primary); font-size: var(--fs-chip); font-weight: var(--fw-regular); line-height: var(--lh-snug); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--d-fast) var(--ease-standard), transform var(--d-fast) var(--ease-standard); z-index: 40; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: var(--d-base); }

/* Table: 44 px rows on hairlines, numbers and hashes in mono right aligned, a select column for bulk actions */
.table-wrap { border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); overflow: hidden; background: var(--c-bg); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-0); }
.table th { height: var(--size-control-l); padding: 0 var(--s-4); background: var(--c-surface); color: var(--c-ink-3); font-size: var(--fs-micro); font-weight: var(--fw-medium); text-align: left; white-space: nowrap; border-bottom: var(--size-hairline) solid var(--c-line); }
.table td { height: var(--size-row); padding: var(--s-2) var(--s-4); border-top: var(--size-hairline) solid var(--c-line); vertical-align: middle; }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr:hover td { background: var(--c-surface); }
.table tr[aria-selected="true"] td { background: var(--c-surface); }
.table tr[aria-selected="true"] { outline: var(--size-hairline) solid var(--c-ink); outline-offset: calc(var(--size-hairline) * -1); }
.table tr:focus-visible { outline-offset: calc(var(--size-focus-ring) * -1); }
.table .num { font-family: var(--font-mono); font-size: var(--fs-micro); text-align: right; font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--c-ink-2); }
.table th.num { font-family: var(--font-text); }
.table__sel { width: var(--size-row); padding-right: 0; }
.table__act { width: var(--size-row); padding-left: 0; text-align: right; }
.table__act .btn { opacity: 0; }
.table tr:hover .table__act .btn, .table tr:focus-within .table__act .btn, .table__act .btn[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .table__act .btn { opacity: 1; } }
.table__sort { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.table__sort[aria-sort] { color: var(--c-ink); }
.table__sort svg { width: var(--size-icon-s); height: var(--size-icon-s); }
@media (max-width: 39.99rem) { .table .table__opt { display: none; } .table th, .table td { padding-inline: var(--s-3); } }

/* Bulk bar: replaces the toolbar row while rows are selected */
.bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-height: var(--size-row); padding: var(--s-1) var(--s-2) var(--s-1) var(--s-4); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-3); background: var(--c-surface); }
.bulkbar__n { font-weight: var(--fw-medium); margin-right: auto; font-variant-numeric: tabular-nums; }

/* Breadcrumb: the path to this record, each step a link, the current one in ink */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); color: var(--c-ink-3); font-size: var(--fs-micro); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--size-control); color: var(--c-ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--c-ink); }
.crumbs svg { width: var(--size-icon-s); height: var(--size-icon-s); color: var(--c-ink-4); }
.crumbs [aria-current="page"] { color: var(--c-ink); font-weight: var(--fw-medium); }

/* Pagination: the range in words, then previous and next; pages in mono */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); color: var(--c-ink-3); font-size: var(--fs-micro); }
.pager__pages { display: flex; align-items: center; gap: var(--s-1); }
.pager__page { display: inline-grid; place-items: center; min-width: var(--size-control); min-height: var(--size-control); padding: 0 var(--s-2); border: var(--size-hairline) solid transparent; border-radius: var(--r-1); background: transparent; color: var(--c-ink-2); font-family: var(--font-mono); font-size: var(--fs-micro); text-decoration: none; cursor: pointer; }
.pager__page:hover { background: var(--c-surface); color: var(--c-ink); }
.pager__page[aria-current="page"] { border-color: var(--c-ink); color: var(--c-ink); font-weight: var(--fw-medium); }

/* Sidebar navigation: sections of 32 px links; the current page is a filled row in ink, never an edge stripe */
.sidenav { display: grid; gap: var(--s-5); align-content: start; width: var(--size-side); padding: var(--s-4) var(--s-3); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); }
.sidenav__group { display: grid; gap: var(--s-1); }
.sidenav__label { padding: 0 var(--s-2) var(--s-1); color: var(--c-ink-3); font-size: var(--fs-chip); font-weight: var(--fw-medium); }
.sidenav a { display: flex; align-items: center; gap: var(--s-2); min-height: var(--size-control); padding: 0 var(--s-2); border-radius: var(--r-1); color: var(--c-ink-2); text-decoration: none; font-size: var(--fs-0); }
.sidenav a svg { width: var(--size-icon-s); height: var(--size-icon-s); color: var(--c-ink-3); }
.sidenav a:hover { background: var(--c-surface); color: var(--c-ink); }
.sidenav a[aria-current="page"] { background: var(--c-surface-2); color: var(--c-ink); font-weight: var(--fw-medium); }
.sidenav a[aria-current="page"] svg { color: var(--c-ink); }
.sidenav a .count { margin-left: auto; }

/* Error and no-permission states: the state frame in a solid hairline, with the one way forward */
.state--error, .state--locked { border-style: solid; }
.state__act { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); padding-top: var(--s-2); }

/* Settings: grouped rows of a label, one line on what it changes, and its control */
.settings { display: grid; border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); }
.setting { display: grid; gap: var(--s-3); padding: var(--s-4); border-top: var(--size-hairline) solid var(--c-line); }
.setting:first-child { border-top: 0; }
.setting__text { display: grid; gap: var(--s-1); }
.setting__text strong { font-weight: var(--fw-medium); }
.setting__text p { color: var(--c-ink-3); font-size: var(--fs-micro); }
.settings__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: var(--size-hairline) solid var(--c-line); background: var(--c-surface); border-radius: 0 0 var(--r-3) var(--r-3); }
@media (min-width: 40rem) { .setting { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .setting > :last-child { justify-self: end; } .setting > .field { justify-self: stretch; } }

/* App shell: a sidebar beside the page on wide screens, stacked above it on phones */
.shell { display: grid; gap: var(--s-5); padding-block: var(--s-6) var(--s-8); align-items: start; }
.shell .sidenav { width: auto; }
@media (min-width: 64rem) { .shell { grid-template-columns: var(--size-side) minmax(0, 1fr); gap: var(--s-6); } }

/* Sign in: one centred panel on the page, the wordmark above it */
.auth { display: grid; justify-items: center; align-content: start; gap: var(--s-6); min-height: var(--size-screen); padding: var(--s-9) var(--s-4) var(--s-6); }
.auth__panel { display: grid; gap: var(--s-4); width: min(100%, var(--size-dialog)); padding: var(--s-6); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); }
.auth__panel h1 { font-size: var(--fs-4); line-height: var(--lh-tight); }
.auth__or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); color: var(--c-ink-3); font-size: var(--fs-micro); }
.auth__or::before, .auth__or::after { content: ""; height: var(--size-hairline); background: var(--c-line); }
.auth__foot { color: var(--c-ink-3); font-size: var(--fs-micro); text-align: center; }
.btn--block { width: 100%; }

/* Verdict glyph: a 16 px mark in a 20 px box so it centres on a 20 px text line. Filled check verified, ring
   unverified, dashed ring not tested, filled cross failed; the glyph always sits beside the word, never alone. */
.vg { display: inline-grid; place-items: center; width: var(--size-icon-l); height: var(--size-icon-l); flex: none; }
.vg svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.vg--verified { color: var(--c-verified); }
.vg--unverified { color: var(--c-unverified); }
.vg--not-tested { color: var(--c-not-tested-mark); }
.vg--failed { color: var(--c-failed); }
.status-text { display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap; color: var(--c-ink-2); font-size: var(--fs-micro); }

/* Truncation: metadata holds one line with an ellipsis and carries the full value in its tooltip */
.trunc { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trunc[data-tip]::after { white-space: nowrap; }

/* Key hint inside a search field, pinned to its right edge */
.toolbar__search > .kbd { position: absolute; right: var(--s-2); top: 50%; transform: translateY(-50%); pointer-events: none; }
.toolbar__search:has(> .kbd) .field__input { padding-right: var(--s-7); }

/* Skeleton rows: bars placed on the real row's grid, so loading and loaded share one layout */
.skel { display: block; height: var(--s-2); border-radius: var(--r-1); background: var(--c-surface-2); animation: pulse calc(var(--d-auto) / 5) var(--ease-standard) infinite alternate; }
.skel--s { width: 30%; }
.skel--m { width: 55%; }
.skel--l { width: 80%; }
.skel--chip { width: var(--s-9); height: var(--size-chip); }
.skel-row { pointer-events: none; }
.skel-row:hover { background: transparent; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Diff header: the file path in mono, truncated, with its counts on the right */
.diff__head { display: flex; align-items: center; gap: var(--s-3); min-height: var(--size-control-l); padding: 0 var(--s-3); border-bottom: var(--size-hairline) solid var(--c-line); background: var(--c-surface); }
.diff__path { flex: 1; color: var(--c-ink); font-family: var(--font-mono); font-size: var(--fs-chip); }
.diff__stat { color: var(--c-ink-3); font-family: var(--font-mono); font-size: var(--fs-chip); font-variant-numeric: tabular-nums; }

/* Dialog head: the title and its close button on one line */
.dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.dialog__head .btn--icon { margin-top: calc(var(--s-1) * -1); margin-right: calc(var(--s-2) * -1); }

/* Menu extras: quiet mono data at the row's end, a flat menu shown in place, a hint row in the command menu */
.menu__meta { margin-left: auto; color: var(--c-ink-4); font-family: var(--font-mono); font-size: var(--fs-chip); font-variant-numeric: tabular-nums; }
.menu__item .trunc { flex: 1; }
.menu__item .status-text { gap: 0; }
.menu--flat { box-shadow: none; animation: none; }
.cmdk .hint { padding: var(--s-2) var(--s-2) var(--s-1); }
.menu__empty .spinner { color: var(--c-ink-3); }

/* Search field: a busy spinner where the key hint sits; the wide field in a toolbar row */
.toolbar__search > .spinner { position: absolute; right: var(--s-3); top: 50%; margin-top: calc(var(--size-icon-s) / -2); color: var(--c-ink-3); }
.toolbar__search--grow { flex: 1 1 var(--size-col); }

/* Table extras: the main cell truncates instead of wrapping, its link reads as text, times stay on one line */
.table td.table__main { max-width: 0; width: 45%; }
.table__link { color: var(--c-ink); font-weight: var(--fw-medium); text-decoration: none; }
.table__link:hover { color: var(--c-ink); text-decoration: underline; }
.table__time { white-space: nowrap; color: var(--c-ink-3); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }
.flip { transform: scaleX(-1); }

/* Meter with nothing to measure, and a taller skeleton bar for a title */
.meter__bar--empty { background: var(--c-unmeasured); }
.skel--h { height: var(--s-5); }

/* Page head: the page title and its actions on one row */
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); }
.pagehead > div:first-child { display: grid; gap: var(--s-1); }
.pagehead h1, .pagehead h2 { font-size: var(--fs-4); line-height: var(--lh-tight); }
.pagehead .h-sub { font-size: var(--fs-1); line-height: var(--lh-snug); }
.pagehead .row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Form grid: fields in columns that fold to one on phones; long fields and the actions take the full row */
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-col)), 1fr)); gap: var(--s-4); }
.formgrid > :nth-last-child(-n + 2) { grid-column: 1 / -1; }
.formgrid__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); padding-top: var(--s-4); border-top: var(--size-hairline) solid var(--c-line); }
.formgrid__act .meta { margin-right: auto; }
.field__input--mono { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0; }

/* App shell: the page fills its column; on phones the sidebar gives way to the app bar's links */
.shell > .app { padding-block: 0; min-width: 0; }
@media (max-width: 63.99rem) { .shell > .sidenav { display: none; } }

/* Small screens: the pager's arrows are icons; search in the app bar folds to its icon; table verdicts keep the glyph */
.pager__page svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.table .num { white-space: nowrap; }
@media (max-width: 39.99rem) {
  .appbar__search { width: var(--size-control); padding: 0; }
  .appbar__search > span, .appbar__search > .kbd { display: none; }
  .table .status-text__word { position: absolute; width: var(--size-hairline); height: var(--size-hairline); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Key hints on the graphite toast read as outlines, like the primary button's; skeleton cells on a table's columns */
.toast .kbd { background: transparent; color: inherit; border-color: currentColor; opacity: 0.7; }
.field__unit > span > .spinner { position: static; display: block; }
.skel--box { width: var(--size-icon-s); height: var(--size-icon-s); }
.skel--end { margin-left: auto; }
/* A verdict glyph keeps its verdict colour inside menus and navigation, whose plain icons are muted */
.menu__item .vg svg, .sidenav a .vg svg { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  :focus-visible, .btn[data-copied] svg, .runhead__verdict .chip, .claimrow__head .chip { animation: none; }
  .btn:active { transform: none; }
}

/* The site header, one component for every page (home, demo, privacy, 404 and the report app): the lockup on the left,
   then Product demo, Runs and the Request a demo button. Up to 40rem the two links move into a panel that a menu button
   opens; the current page is marked by a filled pill, never an edge stripe. */
.nav { position: sticky; top: 0; z-index: 20; background: var(--c-bg); border-bottom: var(--size-hairline) solid var(--c-line); }
.nav__row { display: flex; align-items: center; gap: var(--s-3); min-height: var(--s-8); }
.brand { display: inline-flex; align-items: center; min-height: var(--size-control); }
.lockup { display: block; height: var(--s-5); width: auto; }
.nav__links { display: flex; gap: var(--s-1); margin-left: auto; }
.nav__link { display: inline-flex; align-items: center; min-height: var(--size-row); padding-inline: var(--s-3); border-radius: var(--r-2); color: var(--c-ink-2); font-size: var(--fs-0); font-weight: var(--fw-medium); text-decoration: none; }
.nav__link[aria-current="page"] { background: var(--c-surface-2); color: var(--c-ink); }
.nav__menu { display: none; align-items: center; justify-content: center; width: var(--size-row); height: var(--size-row); padding: 0; border: 0; border-radius: var(--r-2); background: transparent; color: var(--c-ink); }
.nav__menu svg { width: var(--size-icon-l); height: var(--size-icon-l); }
.nav__menu .nav__x { display: none; }
.nav--open .nav__menu .nav__x { display: block; }
.nav--open .nav__menu .nav__bars { display: none; }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover, .nav__menu:hover { background: var(--c-surface); color: var(--c-ink); }
  .nav__link[aria-current="page"]:hover { background: var(--c-surface-2); }
}
@media (max-width: 39.99rem) {
  .js .nav__menu { display: inline-flex; }
  .js .nav__cta { margin-left: auto; }
  .js .nav__links { display: none; position: absolute; top: 100%; inset-inline: 0; flex-direction: column; margin: 0; padding: var(--s-2) var(--s-4) var(--s-3); gap: var(--s-1); background: var(--c-bg); border-bottom: var(--size-hairline) solid var(--c-line); }
  .js .nav--open .nav__links { display: flex; }
  .js .nav__link { width: 100%; }
  .nav__row { flex-wrap: wrap; }
  .js .nav__row { flex-wrap: nowrap; }
}

/* The menu button keeps its full 44 px target and never shrinks; on the narrowest phones (under 360 px) the bar
   tightens its gap, lockup and button padding so everything fits without sideways scroll. */
.nav__menu { flex-shrink: 0; }
@media (max-width: 22.49rem) {
  .nav__row { gap: var(--s-2); }
  .lockup { height: var(--s-4); }
  .nav__cta { padding-inline: var(--s-3); }
}

/* Landing v5: the idea and a demo. Each section has its own treatment (hero with a live vignette, a step strip,
   the one dark block holding the product window, a stacked deck of cards with pictures, a bento grid, a centred form).
   Every value is a token from brand4/tokens.css or site3/css/tokens-site.css; hairlines separate, and only layers that float over others cast a shadow. */

body.page { font-size: var(--fs-1); line-height: var(--lh-body); }
.title { font-size: var(--fs-h2); line-height: var(--lh-tight); margin-bottom: var(--s-6); }
.section { padding-block: var(--s-6); }
.avatar { display: inline-grid; place-items: center; width: var(--size-token); height: var(--size-token); border-radius: 50%; border: var(--size-hairline) solid var(--c-line-strong); background: var(--c-surface); color: var(--c-ink-2); flex: none; }
.avatar svg { width: var(--size-icon-m); height: var(--size-icon-m); }
.avatar--s { width: var(--size-chip); height: var(--size-chip); }
.avatar--s svg { width: var(--s-3); height: var(--s-3); }
.vgl { width: var(--size-icon-m); height: var(--size-icon-m); }
.vgl--l { width: var(--size-icon-l); height: var(--size-icon-l); }
code { color: inherit; }
[hidden]:not(.wpanel):not(.a-panel):not(.dview__scan):not(.rail__suite) { display: none !important; }

/* Live status dot: a solid dot with a ring that grows and fades while work runs */
.pulse { position: relative; display: inline-block; width: var(--size-dot); height: var(--size-dot); border-radius: 50%; background: var(--c-ink-2); flex: none; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping calc(var(--d-fast) * 8) var(--ease-out) infinite; }
.pulse--still::after { animation: none; }
@keyframes ping { from { transform: scale(1); opacity: 0.7; } 70%, to { transform: scale(2.6); opacity: 0; } }
@keyframes settle { from { opacity: 0; transform: translateY(var(--s-1)) scale(0.96); } to { opacity: 1; transform: none; } }
[data-hide] { opacity: 0; transform: translateY(var(--s-1)); }

/* The footer lockup; the header and its lockup live in header.css */
.lockup--small { height: var(--size-mark); }

/* Window frame shared by the hero vignette and the demo: hairline chrome, 12 px radius, no shadow */
.win { margin: 0; border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-frame); background: var(--c-bg); overflow: hidden; font-size: var(--fs-0); line-height: var(--lh-app); }
.win__bar { display: flex; align-items: center; gap: var(--s-3); min-height: var(--size-row); padding: 0 var(--s-4); background: var(--c-surface); border-bottom: var(--size-hairline) solid var(--c-line); }
.win__title { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; color: var(--c-ink-2); font-size: var(--fs-micro); }
.win__title .mark { height: var(--size-mark-small); }
.win__dim { color: var(--c-ink-4); }
.win__ctl { display: inline-flex; gap: var(--s-1); margin-left: auto; }
.win__ctl .btn svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.dots { display: inline-flex; gap: var(--s-2); }
.dots i { width: var(--size-swatch); height: var(--size-swatch); border-radius: 50%; border: var(--size-hairline) solid var(--c-line-strong); }

/* 1. Hero: a centred headline whose last words resolve, then the product shot lit from behind on a fading dot grid.
   The hero's own light values derive from the sky primitive; ink-violet is sky turned a little toward violet and darkened. */
.hero {
  --hero-sky: color-mix(in oklch, var(--p-sky-400) 34%, transparent);
  --hero-violet: color-mix(in oklch, oklch(from var(--p-sky-600) calc(l - 0.08) c calc(h + 28)) 20%, transparent);
  --hero-dot: color-mix(in srgb, var(--c-ink) 13%, transparent);
  --hero-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --px: 0; --py: 0;
  position: relative; isolation: isolate; padding-block: var(--s-8); overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background-image: var(--hero-grain); opacity: 0.05; mix-blend-mode: multiply; }
.hero__grid { position: absolute; inset: 0; background-image: radial-gradient(var(--hero-dot) var(--size-hairline), transparent var(--size-dot-fade)); background-size: var(--s-5) var(--s-5); background-position: 50% 0; -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, var(--c-mask) 20%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, var(--c-mask) 20%, transparent 100%); }
.hero__proof { margin-top: var(--s-3); font-size: var(--fs-micro); color: var(--c-ink-3); text-wrap: pretty; }
.hero__proof b { font-weight: var(--fw-semibold); color: var(--c-ink-2); }
.hero__backed { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-micro); color: var(--c-ink-3); }
.hero__backed img { display: block; height: var(--s-6); width: auto; }

/* Spotlight: a soft sky disc follows a mouse or pen across the hero and, brighter, across the window surface.
   It moves by transform only; JS turns it on, so touch and reduced motion never see it. */
.spot { position: absolute; left: 0; top: 0; width: calc(var(--s-9) * 7); aspect-ratio: 1; margin: calc(var(--s-9) * -3.5) 0 0 calc(var(--s-9) * -3.5); border-radius: 50%; pointer-events: none; opacity: 0; transform: translate3d(var(--sx, -999px), var(--sy, -999px), 0); transition: opacity var(--d-settle) var(--ease-out); will-change: transform; }
.spot--hero { background: radial-gradient(closest-side, color-mix(in oklch, var(--p-sky-400) 34%, transparent), transparent); }
.spot--win { z-index: 1; width: calc(var(--s-9) * 5); margin: calc(var(--s-9) * -2.5) 0 0 calc(var(--s-9) * -2.5); background: radial-gradient(closest-side, color-mix(in oklch, var(--p-sky-400) 30%, transparent), transparent); mix-blend-mode: multiply; }
.hero[data-spot] .spot { opacity: 1; }
.hero__copy { display: grid; gap: var(--s-5); justify-items: center; text-align: center; }
.hero__title { font-size: var(--fs-display); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--track-hero); text-wrap: balance; }
.hero__sub { font-size: var(--fs-2); line-height: var(--lh-body); color: var(--c-ink-2); text-wrap: pretty; }
.hero__act { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); padding-top: var(--s-2); }
.hero__act svg { width: var(--size-icon-s); height: var(--size-icon-s); }

/* The swap: claims an agent makes appear in a muted tone, are struck through, and give way to "really done" */
.swap { display: inline-grid; white-space: nowrap; }
.swap > * { grid-area: 1 / 1; }
.swap__claim { position: relative; justify-self: start; color: var(--c-ink-4); font-weight: var(--fw-medium); opacity: 0; }
.swap__claim::after { content: ""; position: absolute; left: calc(var(--s-1) * -1); right: calc(var(--s-1) * -1); top: 55%; height: var(--size-stroke); border-radius: var(--r-pill); background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--d-settle) var(--ease-standard); }
.swap__claim[data-on] { opacity: 1; transition: opacity var(--d-fast) var(--ease-standard); }
.swap__claim[data-struck]::after { transform: scaleX(1); }
.swap__end { justify-self: center; padding-bottom: var(--em-swap-pad); background: linear-gradient(100deg, var(--p-sky-500) 8%, oklch(from var(--p-sky-600) calc(l - 0.14) calc(c * 0.8) calc(h + 12)) 62%, var(--c-ink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.swap[data-run] .swap__end { opacity: 0; transform: translateY(var(--shift-rise)); }
.swap[data-run] .swap__end { filter: blur(var(--em-swap-blur)); }
.swap[data-run][data-resolved] .swap__end { opacity: 1; transform: none; filter: none; transition: opacity calc(var(--d-settle) * 2) var(--ease-out), transform calc(var(--d-settle) * 2.4) var(--ease-spring), filter calc(var(--d-settle) * 2) var(--ease-out); }
.swap:not([data-run]) .swap__claim, .swap[data-resolved] .swap__claim { display: none; }

.hero__shot { position: relative; margin-top: var(--s-7); }
/* Light behind the window: a wide sky glow above centre and a fainter ink-violet glow lower right */
.glow { position: absolute; inset: calc(var(--s-9) * -1.5) calc(var(--s-8) * -1) 10%; z-index: -1; pointer-events: none; background: radial-gradient(48% 46% at 42% 30%, var(--hero-sky), transparent 72%), radial-gradient(40% 44% at 74% 52%, var(--hero-violet), transparent 70%); filter: blur(var(--s-6)); }
/* The stage holds the window and draws the sheen: a short sky arc on a conic gradient that circles the border every 6 s */
@property --sheen { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.stage { position: relative; border-radius: var(--r-frame); overflow: hidden; }
.sheen { position: absolute; inset: 0; z-index: 2; padding: var(--size-hairline); border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--sheen), transparent 0 74%, color-mix(in oklch, var(--p-sky-400) 40%, transparent) 78%, color-mix(in oklch, var(--p-sky-500) 70%, transparent) 80%, color-mix(in oklch, var(--p-sky-400) 30%, transparent) 82%, transparent 86%); -webkit-mask: linear-gradient(var(--c-mask) 0 0) content-box, linear-gradient(var(--c-mask) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--c-mask) 0 0) content-box exclude, linear-gradient(var(--c-mask) 0 0); animation: sheen var(--d-sheen) linear infinite; }
@keyframes sheen { to { --sheen: 360deg; } }
.hero[data-still] .sheen, .hero[data-still] .glyph, .hero[data-still] .pulse::after { animation-play-state: paused; }
.win--shot { position: relative; background: var(--c-bg); border-color: var(--c-line-strong); }
.stage { box-shadow: var(--elev-overlay), 0 var(--s-6) var(--s-8) calc(var(--s-5) * -1) color-mix(in oklch, var(--p-sky-600) 22%, transparent); }
.win--shot .win__bar { background: var(--c-surface); }
.win--shot .win__dim { color: var(--c-ink-3); font-size: var(--fs-micro); }
.spill { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--size-chip); margin-left: auto; padding: 0 var(--s-2); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-bg); font-size: var(--fs-chip); font-weight: var(--fw-medium); color: var(--c-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.spill > span { display: none; }
.spill[data-spill="run"] [data-spill-run], .spill[data-spill="done"] [data-spill-done] { display: inline; }
.spill[data-spill="run"] .pulse { background: var(--c-accent); }
.spill[data-spill="done"] .pulse { background: var(--c-verified); }
.spill b { font-weight: inherit; display: inline-block; }
.spill b[data-pop] { animation: pop calc(var(--d-settle) * 1.6) var(--ease-spring); color: var(--c-verified); }
@keyframes pop { from { transform: translateY(40%) scale(0.7); opacity: 0; } }
.spill[data-spill="done"] .pulse::after { animation: none; }
.shot { display: grid; gap: var(--size-hairline); background: var(--c-line); }
@media (min-width: 64rem) { .shot { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.shot__main, .shot__side { display: grid; align-content: start; gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-7); background: var(--c-bg); }
.shot__side { background: var(--c-surface); }
.sdiff { display: grid; gap: var(--s-2); }
.sdiff__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); font-size: var(--fs-micro); }
.sdiff__code { position: relative; overflow: hidden; padding-block: var(--s-2); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); }
.sdiff__code .code__t { overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.sdiff[data-scanning] .scanline { opacity: 0.7; }
.code__row[data-pending] { background: transparent; }
.code__row[data-pending] .code__tag { opacity: 0; }
.term--shot { height: auto; }
.term--shot .term__lines { gap: var(--s-1); }
.float { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--size-row); padding: 0 var(--s-3); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); box-shadow: var(--elev-overlay); font-size: var(--fs-0); font-weight: var(--fw-medium); white-space: nowrap; }
.float--a { left: var(--s-4); bottom: calc(var(--s-5) * -1); }
.float--b { right: var(--s-4); bottom: var(--s-6); }
@media (min-width: 80rem) { .float--a { left: calc(var(--s-5) * -1); } .float--b { right: calc(var(--s-5) * -1); } }
.js .float[data-wait] { opacity: 0; transform: translateY(var(--shift-rise)) scale(0.96); }
.float { transition: opacity var(--d-settle) var(--ease-out), transform var(--d-settle) var(--ease-spring); }
@media (max-width: 63.99rem) { .float--a { left: var(--s-3); } .float--b { right: var(--s-3); bottom: calc(var(--s-5) * -1); } }
@media (max-width: 47.99rem) { .float--b { display: none; } }

/* Glyph chips: what agents claim to have touched, floating at three depths around the window. Each drifts a few
   pixels on its own and shifts with the pointer by its depth, deeper chips smaller, softer and slower. */
.glyph { --depth: 1; position: absolute; z-index: 3; display: grid; place-items: center; width: calc(var(--size-control) * 1.25); height: calc(var(--size-control) * 1.25); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-frame); background: color-mix(in srgb, var(--c-bg) 86%, transparent); -webkit-backdrop-filter: blur(var(--s-2)); backdrop-filter: blur(var(--s-2)); box-shadow: var(--elev-overlay); color: var(--c-accent); pointer-events: none; translate: calc(var(--px) * var(--depth) * var(--s-3)) calc(var(--py) * var(--depth) * var(--s-3)); transition: translate var(--d-settle) var(--ease-out); animation: drift var(--d-drift) ease-in-out infinite alternate; }
.glyph svg { width: var(--size-icon-m); height: var(--size-icon-m); }
.glyph--commit { --depth: 1.4; left: calc(var(--s-8) * -1.3); top: var(--s-7); }
.glyph--terminal { --depth: 0.6; left: calc(var(--s-8) * -0.9); top: calc(var(--s-9) * 2.6); scale: 0.82; opacity: 0.75; animation-duration: var(--d-drift-a); animation-delay: var(--delay-drift-a); color: var(--c-ink-3); }
.glyph--shield { --depth: 1; left: 26%; top: calc(var(--s-6) * -1); animation-duration: var(--d-drift-b); animation-delay: var(--delay-drift-b); }
.glyph--card { --depth: 1.2; right: calc(var(--s-8) * -1.2); top: calc(var(--s-6) * 1.2); animation-duration: var(--d-drift-c); animation-delay: var(--delay-drift-c); }
.glyph--record { --depth: 0.6; right: calc(var(--s-8) * -0.85); top: calc(var(--s-9) * 2.2); scale: 0.82; opacity: 0.75; animation-duration: var(--d-drift-d); animation-delay: var(--delay-drift-d); color: var(--c-ink-3); }
@keyframes drift { from { transform: translateY(calc(var(--s-1) * -1)) rotate(-2deg); } to { transform: translateY(var(--s-1)) rotate(2deg); } }
@media (max-width: 87.99rem) { .glyph--commit, .glyph--terminal { left: calc(var(--s-6) * -1); } .glyph--card, .glyph--record { right: calc(var(--s-6) * -1); } }
@media (max-width: 63.99rem) { .glyph--terminal, .glyph--record { display: none; } .glyph--commit { left: var(--s-3); top: calc(var(--s-6) * -1); } .glyph--card { right: var(--s-3); top: calc(var(--s-6) * -1); } }
@media (max-width: 39.99rem) { .glyph--shield { display: none; } .glyph { width: var(--size-control); height: var(--size-control); border-radius: var(--r-3); } .glyph--commit { left: var(--s-5); } .glyph--card { right: var(--s-5); } }

/* Reduced motion: the light stays, nothing moves. No sheen travel, drift, parallax, spotlight or blur-in. */
@media (prefers-reduced-motion: reduce) {
  .sheen { animation: none; background: none; }
  .glyph { animation: none; translate: none; transition: none; }
  .spot { display: none; }
  .swap[data-run] .swap__end { filter: none; }
}
@media (max-width: 39.99rem) { .hero { padding-top: var(--s-8); } .win--shot .win__dim, .spill { display: none; } .shot__main, .shot__side { padding: var(--s-4); } .sdiff__code .code__tag { display: none; } }

/* 2. How it works: one hairline strip of three cells */
.strip { display: grid; gap: var(--size-hairline); background: var(--c-line); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); overflow: hidden; }
@media (min-width: 48rem) { .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.strip__cell { display: grid; background: var(--c-bg); }
.strip__art { display: grid; place-items: center; min-height: calc(var(--s-9) * 1.75); padding: var(--s-5); background: var(--c-surface); }
.strip__label { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); font-weight: var(--fw-medium); color: var(--c-ink); border-top: var(--size-hairline) solid var(--c-line); }
.strip__n { display: inline-grid; place-items: center; width: var(--size-chip); height: var(--size-chip); border-radius: var(--r-1); border: var(--size-hairline) solid var(--c-line-strong); font-family: var(--font-mono); font-size: var(--fs-chip); color: var(--c-ink-3); }
.mini-bubble { display: flex; align-items: center; gap: var(--s-2); }
.mini-bubble__text { padding: var(--s-2) var(--s-3); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); font-size: var(--fs-0); font-weight: var(--fw-medium); }
.mini-term { display: grid; gap: var(--s-1); min-width: calc(var(--s-9) * 2); padding: var(--s-3); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); font-family: var(--font-mono); font-size: var(--fs-chip); line-height: var(--lh-code); color: var(--c-ink); }
.mini-term b { color: var(--c-ink-4); font-weight: var(--fw-regular); }
.mini-term__dim { color: var(--c-ink-3); }
.mini-term__ok { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-verified-ink); }
.mini-term__ok .pulse { background: var(--c-verified); }
.mini-verdicts { display: grid; gap: var(--s-2); justify-items: start; }

/* 3. The one dark block: the demo window */
.dark { background: var(--c-bg); color: var(--c-ink); padding-block: var(--s-9); }
@media (max-width: 39.99rem) { .dark { padding-block: var(--s-8); } }
.dark__head { display: grid; gap: var(--s-3); justify-items: center; text-align: center; margin-bottom: var(--s-7); }
.dark__head .title { margin: 0; }
.dark__head p { color: var(--c-ink-3); font-size: var(--fs-2); }
.dark__more { display: flex; justify-content: center; margin-top: var(--s-5); font-size: var(--fs-0); }
.dark__more a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--size-control); text-decoration: none; font-weight: var(--fw-medium); }
.dark__more svg { width: var(--size-icon-s); height: var(--size-icon-s); }

.win--demo { background: var(--c-surface); border-color: var(--c-line-strong); }
.win--demo .win__bar { background: var(--c-surface-2); border-color: var(--c-line); }
.wtabs { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; padding: 0 var(--s-2); border-bottom: var(--size-hairline) solid var(--c-line); background: var(--c-surface); }
.wtab { position: relative; display: inline-flex; align-items: center; min-height: var(--size-row); padding: 0 var(--s-4); border: 0; background: none; color: var(--c-ink-3); font: inherit; font-size: var(--fs-micro); font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap; transition: color var(--d-fast) var(--ease-standard); }
.wtab:hover { color: var(--c-ink); }
.wtab[aria-selected="true"] { color: var(--c-ink); }
.wtab__bar { position: absolute; left: var(--s-4); right: var(--s-4); bottom: 0; height: var(--size-bar); overflow: hidden; }
.wtab[aria-selected="true"] .wtab__bar { background: var(--c-ink-4); }
.wtab__bar span { display: block; height: 100%; background: var(--c-ink); transform: scaleX(0); transform-origin: left; }
.wtab[aria-selected="true"] .wtab__bar span { transform: scaleX(1); }
@media (max-width: 39.99rem) { .wtabs { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; } .wtab { justify-content: center; padding: 0 var(--s-2); } .wtab__bar { left: var(--s-2); right: var(--s-2); } }

.win__body { display: grid; gap: var(--size-hairline); background: var(--c-line); }
@media (min-width: 64rem) { .win__body { grid-template-columns: minmax(0, 1fr) var(--size-col); } }
.win__main { background: var(--c-surface); padding: var(--s-5); min-height: calc(var(--size-diff) + var(--s-6)); }
@media (max-width: 39.99rem) { .win__main { padding: var(--s-4); min-height: var(--size-stage); } }
/* Every panel sits in one grid cell, so the window takes the tallest panel's height on every tab. A panel that is not
   shown keeps its layout and is hidden with visibility, which also removes it from focus and the accessibility tree. */
.win__main { display: grid; }
.wpanel { grid-area: 1 / 1; min-width: 0; }
.wpanel[hidden], .wpanel--ghost { display: block !important; visibility: hidden; pointer-events: none; }
.dview__scan[hidden] { display: inline-flex; visibility: hidden; }

/* Claims rail */
.rail { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5) var(--s-4); background: var(--c-surface); }
.rail__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-ink-3); }
.rail__suite { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-ink); }
.rail__suite[hidden] { display: inline-flex; visibility: hidden; }
.rail__list { display: grid; gap: var(--s-2); }
@media (min-width: 40rem) and (max-width: 63.99rem) { .rail__list { grid-template-columns: 1fr 1fr; } }
.rclaim { display: grid; gap: var(--s-2); width: 100%; padding: var(--s-3); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); color: var(--c-ink); font: inherit; font-size: var(--fs-0); text-align: left; cursor: pointer; transition: opacity var(--d-fast) var(--ease-standard), transform var(--d-fast) var(--ease-standard); }
.rclaim:hover { border-color: var(--c-line-strong); }
.rclaim[aria-current] { border-color: var(--c-ink); }
.rclaim[data-state="hidden"] { opacity: 0; transform: translateY(var(--s-1)); }
.rclaim__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--size-chip); }
.rclaim__top code { font-size: var(--fs-chip); color: var(--c-ink-3); }
/* The waiting label and the verdict chip share one cell, so a claim keeps its width and height in every state. */
.rclaim__state { display: inline-grid; justify-items: end; font-size: var(--fs-chip); color: var(--c-ink-3); }
.rclaim__state > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: var(--s-2); visibility: hidden; }
.rclaim[data-state="waiting"] .rclaim__wait { visibility: visible; }
.rclaim[data-state="done"] .chip { visibility: visible; animation: settle calc(var(--d-fast) * 1.6) var(--ease-out) both; }
.rclaim__text { font-weight: var(--fw-medium); }
.rclaim__go { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-chip); color: var(--c-ink-3); }
.rclaim__go svg { width: var(--s-3); height: var(--s-3); transition: transform var(--d-fast) var(--ease-standard); }
.rclaim:hover .rclaim__go { color: var(--c-ink); }
.rclaim:hover .rclaim__go svg { transform: translateX(var(--s-1)); }

/* Pull request tab */
.pr { display: grid; gap: var(--s-4); align-content: start; }
.pr__head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.pr__title { font-size: var(--fs-3); letter-spacing: var(--track-heading); }
.pill { display: inline-flex; align-items: center; height: var(--size-chip); padding: 0 var(--s-2); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-pill); font-size: var(--fs-chip); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.pr__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--fs-micro); color: var(--c-ink-3); }
.pr__meta > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.pr__meta svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.pr__delta { font-family: var(--font-mono); font-size: var(--fs-chip); color: var(--c-ink-2); }
.pr__comment { display: flex; gap: var(--s-3); align-items: start; }
.pr__bubble { flex: 1; min-width: 0; border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); overflow: hidden; }
.pr__by { padding: var(--s-2) var(--s-3); border-bottom: var(--size-hairline) solid var(--c-line); background: var(--c-surface-2); font-size: var(--fs-micro); }
.pr__say { display: grid; gap: var(--s-1); }
.pr__list { display: grid; gap: var(--s-1); padding-inline-start: var(--s-5); list-style: disc; }
.pr__list li::marker { color: var(--c-ink-3); }
.pr__say p { margin: 0; }
.pr__say { padding: var(--s-3); font-size: var(--fs-0); color: var(--c-ink); min-height: calc(var(--s-7) + var(--s-1)); }
.pr__says { color: var(--c-ink-3); }
.typing::after { content: ""; display: inline-block; width: var(--size-hairline); height: var(--size-caret); margin-left: var(--size-hairline); vertical-align: text-bottom; background: var(--c-ink); animation: caret var(--d-caret) steps(1) infinite; }
.pr__found { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); color: var(--c-ink-2); transition: opacity var(--d-fast) var(--ease-standard), transform var(--d-fast) var(--ease-standard); }
.pr__found .mark { height: var(--size-mark-small); }
.pr__claims { display: grid; gap: var(--s-2); }
@media (min-width: 64rem) { .pr__claims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr__claim { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-height: var(--size-row); padding: 0 var(--s-3); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-1); background: var(--c-bg); transition: opacity calc(var(--d-fast) * 1.6) var(--ease-out), transform calc(var(--d-fast) * 1.6) var(--ease-out); }
.pr__n { font-size: var(--fs-chip); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.pr__text { font-weight: var(--fw-medium); }
.pr__claim code { font-size: var(--fs-chip); color: var(--c-ink-3); }
@media (max-width: 39.99rem) { .pr__claim { grid-template-columns: auto minmax(0, 1fr); padding-block: var(--s-2); } .pr__claim code { grid-column: 2; } }

/* Rerun tab: a terminal */
.term { display: grid; grid-template-rows: auto 1fr; height: 100%; border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); overflow: hidden; }
.term__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--size-row); padding: 0 var(--s-3); border-bottom: var(--size-hairline) solid var(--c-line); }
.cpill { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--size-chip); padding: 0 var(--s-2); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: var(--fs-chip); color: var(--c-ink-2); }
.cpill i { position: relative; width: var(--size-dot); height: var(--size-dot); border-radius: 50%; border: var(--size-hairline) solid var(--c-ink-3); }
.cpill[data-cstate="running"] i { background: var(--c-ink); border-color: var(--c-ink); }
.cpill[data-cstate="running"] i::after { content: ""; position: absolute; inset: calc(var(--size-hairline) * -1); border-radius: 50%; background: var(--c-ink); animation: ping calc(var(--d-fast) * 8) var(--ease-out) infinite; }
.cpill[data-cstate="exited"] i { background: var(--c-ink-3); }
.term__count { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--c-ink-3); }
.term__count b { color: var(--c-ink); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.term__lines { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4); font-family: var(--font-mono); font-size: var(--fs-chip); line-height: var(--lh-code); overflow: hidden; }
.term__line { display: grid; transition: opacity var(--d-fast) var(--ease-standard), transform var(--d-fast) var(--ease-standard); }
.term__cmd { color: var(--c-ink); word-break: break-all; }
.term__out { color: var(--c-ink-3); padding-left: var(--s-4); overflow-wrap: anywhere; }
.term__lines, .term__line { grid-template-columns: minmax(0, 1fr); }
.term__dots { color: var(--c-verified); letter-spacing: var(--track-display); word-break: break-all; }
.term__ok { color: var(--c-verified-ink); font-weight: var(--fw-medium); }

/* Diff tab: the real diff with a scan line and live coverage marks */
.dview { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-3); height: 100%; }
.dview__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); font-size: var(--fs-micro); }
.dview__path { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-ink-2); }
.dview__path svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.dview__for { color: var(--c-ink-3); }
.dview__count { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.dview__count b { font-family: var(--font-mono); font-weight: var(--fw-medium); color: var(--c-ink); }
.dview__count[data-tone="unran"] b { color: var(--c-not-tested-ink); }
.dview__scan { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-chip); color: var(--c-ink-3); }
.dview__scan::before { content: ""; width: var(--size-dot); height: var(--size-dot); border-radius: 50%; background: var(--c-ink-2); animation: caret var(--d-caret) steps(1) infinite; }
.dview__code { position: relative; max-height: calc(var(--size-diff) - var(--s-7)); overflow: auto; padding-block: var(--s-2); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); overscroll-behavior: contain; }
.scanline { position: absolute; left: 0; right: 0; top: var(--s-2); height: var(--size-hairline); background: var(--c-scan); opacity: 0; pointer-events: none; z-index: 1; }
.scanline::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--s-5); background: color-mix(in srgb, var(--c-ink) 5%, transparent); }
.dview__code[data-scanning] .scanline { opacity: 0.7; }
.code__row[data-hit] { animation: settle calc(var(--d-fast) * 1.6) var(--ease-out) both; }
.dview__legend { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--fs-chip); color: var(--c-ink-3); }
.dview__legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.lg { width: var(--size-dot); height: var(--size-dot); border-radius: 50%; border: var(--size-hairline) solid var(--c-unmeasured); }
.lg--unran { border-color: var(--c-not-tested-mark); }
.lg--ran { background: var(--c-verified); border-color: var(--c-verified); }

@media (max-width: 39.99rem) {
  .dview__for, .dview__code .code__tag { display: none; }
  .dview__code .code { min-width: max-content; }
  .dview__code .code__t { white-space: pre; }
  .win__title .mono, .win__ctl .btn span { display: none; }
}

/* Verdict tab */
.vd { display: grid; gap: var(--s-4); align-content: start; }
.vd__list { display: grid; gap: var(--s-3); }
.vd__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-3); padding: var(--s-4); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); transition: opacity calc(var(--d-fast) * 1.6) var(--ease-out), transform calc(var(--d-fast) * 1.6) var(--ease-out); }
.vd__row[data-hide] { transform: translateY(var(--s-1)) scale(0.98); }
.vd__claim { font-size: var(--fs-1); font-weight: var(--fw-medium); }
.vd__why { grid-column: 2 / -1; font-size: var(--fs-chip); color: var(--c-ink-3); }
.ghc { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); }
.ghc__icon { display: inline-grid; place-items: center; width: var(--size-icon-l); height: var(--size-icon-l); flex: none; }
.ghc__icon svg { width: var(--size-icon-l); height: var(--size-icon-l); }
.ghc[data-gh="pending"] svg, .ghc[data-gh="done"] .pulse { display: none; }
.ghc[data-gh="done"] svg { animation: settle calc(var(--d-fast) * 1.6) var(--ease-out) both; }
.ghc__text { display: grid; flex: 1; min-width: 0; font-size: var(--fs-micro); }
.vd__note { font-size: var(--fs-chip); color: var(--c-ink-3); }
@media (max-width: 39.99rem) { .vd__row { grid-template-columns: auto minmax(0, 1fr); } .vd__row .chip { grid-column: 2; justify-self: start; } .ghc { flex-wrap: wrap; } }

/* 4. Where it runs: four cards in a two by two grid, each showing its picture, title and full explanation at once.
   White cards with a hairline edge; the picture sits inset on a quiet surface so all four read as one set. Phones
   get one column. */
.stack { display: grid; gap: var(--s-4); margin-top: var(--s-6); list-style: none; }
.stack__inner { display: grid; align-content: start; gap: var(--s-5); height: 100%; padding: var(--s-3) var(--s-3) var(--s-6); border: var(--size-hairline) solid var(--c-line); border-radius: calc(var(--r-frame) + var(--s-2)); background: var(--c-bg); }
.stack__scene { order: -1; border: 0; background: var(--c-surface); }
.stack__copy { display: grid; align-content: start; gap: var(--s-2); padding: 0 var(--s-4); }
.stack__copy h3 { font-size: var(--fs-3); line-height: var(--lh-tight); letter-spacing: var(--track-heading); text-wrap: balance; }
.stack__copy p { color: var(--c-ink-2); font-size: var(--fs-1); line-height: var(--lh-body); text-wrap: pretty; }
.stack .scene__ov { display: none; }
@media (min-width: 48rem) { .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .stack { gap: var(--s-5); } .stack__copy h3 { font-size: var(--fs-4); } }

/* A scene: the generated picture at 16:10 with interface elements placed in its own coordinates */
.scene { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-frame); background: var(--c-bg); }
.scene picture, .scene img { display: block; width: 100%; height: 100%; }
.scene img { object-fit: cover; }
.scene__ov { position: absolute; inset: 0; pointer-events: none; }
.ov { position: absolute; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--size-control); padding: 0 var(--s-2) 0 var(--s-3); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); box-shadow: var(--elev-overlay); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-ink); white-space: nowrap; }
.ov svg { width: var(--size-icon-s); height: var(--size-icon-s); flex: none; }
.ov__dim { color: var(--c-ink-3); font-weight: var(--fw-regular); }
.ov .chip { margin-left: var(--s-1); }
.ov--pr { right: 5%; bottom: 7%; }
.ov--gate { right: 4%; top: 10%; padding-right: var(--s-3); }
.ov--live { left: 5%; top: 31%; }
.ov--beyond { left: 33%; bottom: 9%; }
.ov--leads, .ov--hub { left: var(--s-4); top: var(--s-4); padding-right: var(--s-3); }
.ov--hash { left: var(--s-4); top: var(--s-4); gap: var(--s-2); padding-right: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-chip); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
.ov--report { left: 50%; bottom: var(--s-3); translate: -50% 0; padding-right: var(--s-3); }
.pulse--ok { background: var(--c-verified); }

@media (max-width: 39.99rem) { .ov { min-height: calc(var(--size-chip) + var(--s-1)); padding-left: var(--s-2); font-size: var(--fs-chip); } .ov .chip { margin-left: 0; } .ov--pr, .ov--gate { right: 3%; } .ov--live { left: 3%; top: 6%; } .ov--beyond { left: 20%; } }
@media (max-width: 47.99rem) { .ov--hub .ov__dim, .ov--gate .ov__dim { display: none; } }

/* 5. Built for: a bento of four tiles, each led by its scene, cover-cropped to one height, tilting under the pointer */
.bento { display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tile--wide { grid-column: span 2; } }
.tile { display: grid; grid-template-rows: auto auto 1fr; gap: var(--s-2); padding-bottom: var(--s-5); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-frame); background: var(--c-bg); overflow: hidden; transform: perspective(calc(var(--size-page) * 0.8)) rotateX(calc(var(--y, 0) * var(--tilt) * -1)) rotateY(calc(var(--x, 0) * var(--tilt))) translateY(calc(var(--share, 0) * var(--s-1) * -1)); transition: transform var(--d-settle) var(--ease-spring), border-color var(--d-fast) var(--ease-standard); }
.tile[data-live] { transition: transform var(--d-press) linear, border-color var(--d-fast) var(--ease-standard); }
.tile:hover { border-color: var(--c-line-strong); }
.tile h3 { padding: var(--s-4) var(--s-5) 0; font-size: var(--fs-2); }
.tile p { padding-inline: var(--s-5); color: var(--c-ink-3); text-wrap: pretty; }
.tile__art { position: relative; height: var(--size-tile-art); overflow: hidden; border-bottom: var(--size-hairline) solid var(--c-line); }
.scene--cover { position: absolute; left: 50%; top: var(--fy, 46%); width: max(100% + var(--s-5), calc(var(--size-tile-art) * 1.6 + var(--s-5))); border-radius: 0; transform: translate(calc(-50% - var(--x, 0) * var(--shift-parallax)), calc(var(--fy, 46%) * -1 - var(--y, 0) * var(--shift-parallax))); transition: transform var(--d-settle) var(--ease-spring); }
.tile[data-live] .scene--cover { transition: transform var(--d-press) linear; }

/* 6. Request a demo */
.close__inner { display: grid; justify-items: center; text-align: center; }
.close .title { margin-bottom: var(--s-3); }
.close__line { color: var(--c-ink-2); font-size: var(--fs-2); margin-bottom: var(--s-6); }
.req { display: grid; gap: var(--s-2) var(--s-4); width: min(100%, var(--size-cmdk)); text-align: left; }
@media (min-width: 40rem) { .req { grid-template-columns: 1fr 1fr; } }
.req .field__input { min-height: var(--size-control-l); }
.req__act { display: grid; padding-top: var(--s-2); }
@media (min-width: 40rem) { .req__act { grid-column: 1 / -1; } }
.req__done { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--size-control-l); padding: 0 var(--s-4); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); font-weight: var(--fw-medium); animation: settle calc(var(--d-fast) * 1.6) var(--ease-out) both; }
.req__done svg { width: var(--size-icon-m); height: var(--size-icon-m); }
.req__done:focus { outline: 0; }

/* 7. Footer: the lockup, then the company, privacy and the year on one baseline */
.foot { border-top: var(--size-hairline) solid var(--c-line); font-size: var(--fs-micro); line-height: var(--lh-app); color: var(--c-ink-3); }
.foot__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); min-height: var(--s-9); }
.foot__brand { display: inline-flex; align-items: center; min-height: var(--size-control); }
.foot__meta { display: flex; align-items: baseline; gap: var(--s-5); }
.foot__meta a { color: inherit; }
.foot__meta a:hover { color: var(--c-ink); }
@media (max-width: 39.99rem) {
  .foot__row { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-3); padding-block: var(--s-6); }
  .foot__meta { flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
}

/* Liveliness: presses, underlines, focus, reveals. Each explains or rewards an action; none blocks reading. */
/* Buttons press and the focus ring draws in from the shared library (components.css) */
.link, .dark__more a { position: relative; text-decoration: none; }
.link::after, .dark__more a span::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--size-hairline) * -2); height: var(--size-hairline); background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--d-settle) var(--ease-out); }
.dark__more a span { position: relative; }
.link:hover::after, .link:focus-visible::after, .dark__more a:hover span::after { transform: scaleX(1); }
[data-held] *, [data-held] *::before, [data-held] *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .js .float[data-wait] { opacity: 1; transform: none; }
  .tile, .scene--cover { transition: none; }
  .pulse::after, .cpill i::after, .typing::after, .dview__scan::before { animation: none; }
  .rclaim .chip, .code__row[data-hit], .ghc svg, .req__done, [data-sum-done] { animation: none; }
}

/* Privacy: one readable column of short sections */
.doc { padding-block: var(--s-9); }
.doc__inner { display: grid; gap: var(--s-4); }
.doc__title { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--track-display); margin-bottom: var(--s-2); }
.doc__lede { font-size: var(--fs-2); color: var(--c-ink-2); text-wrap: pretty; }
.doc h2 { margin-top: var(--s-5); font-size: var(--fs-3); letter-spacing: var(--track-heading); }
.doc p { color: var(--c-ink-2); text-wrap: pretty; }
.doc .link { color: var(--c-ink); }
.doc__meta { margin-top: var(--s-5); font-size: var(--fs-micro); }

/* Not found: centred, with the way home and the one action */
.lost { padding-block: var(--s-9); }
.lost__inner { display: grid; gap: var(--s-4); justify-items: center; text-align: center; min-height: calc(var(--size-stage) * 0.8); align-content: center; }
.lost__code { font-size: var(--fs-micro); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.lost__title { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--track-display); text-wrap: balance; }
.lost__line { color: var(--c-ink-2); font-size: var(--fs-2); }

/* Release merge: proof line and backer under the hero actions, a quiet report button, and a compact footer. */
.hero__proof { margin-top: var(--s-5); font-size: var(--fs-micro); color: var(--c-ink-3); text-wrap: pretty; }
.hero__proof b { font-weight: var(--fw-semibold); color: var(--c-ink-2); }
.hero__backed { display: inline-flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); font-size: var(--fs-micro); color: var(--c-ink-3); }
.hero__backed img { height: var(--s-6); width: auto; display: block; }
.dark__more .dark__btn { gap: var(--s-2); background: var(--c-bg); color: var(--c-ink); border: var(--size-hairline) solid transparent; }
.dark__more .dark__btn svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.foot__row { gap: var(--s-5); }
.foot__brand { margin-right: auto; }
@media (max-width: 39.99rem) { .foot__row { flex-direction: column; align-items: flex-start; gap: var(--s-2); padding-block: var(--s-6); min-height: 0; } }

/* Calm hero: no grain, dot grid, sheen, spotlight or floating glyphs; one soft glow behind the product window and a solid accent on "really done". */
.hero__bg::after, .sheen, .spot, .glyph { display: none !important; }
.hero__accent { color: var(--c-accent); }

/* Hero ground: a fine, even dot grid washed with a soft sky gradient, both fading out before the edges and the text. */
.hero__grid { display: block !important;
  background-image: radial-gradient(circle, color-mix(in oklch, var(--c-ink) 14%, transparent) var(--size-hairline), transparent var(--size-dot-fade-wide));
  background-size: var(--size-dot-pitch) var(--size-dot-pitch); background-position: center top;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 40%, var(--c-mask) 35%, transparent 82%); mask-image: radial-gradient(75% 65% at 50% 40%, var(--c-mask) 35%, transparent 82%); }

/* Request a demo: one compact panel, copy and live verdict chips on the left, the form on the right. */
.close__panel { display: grid; gap: var(--s-6); align-items: center; padding: var(--s-6); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-panel); background: var(--c-bg); }
@media (min-width: 64rem) { .close__panel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-7); padding: var(--s-7); } }
@media (max-width: 39.99rem) { .close__panel { padding: var(--s-5); gap: var(--s-5); } }
.close__copy { display: grid; align-content: space-between; gap: var(--s-5); text-align: left; }
.close__mark { display: block; height: var(--s-8); width: auto; }
@media (min-width: 64rem) { .close__panel { align-items: stretch; } .close__mark { height: var(--s-9); } }
.close__panel .title, .close__panel .close__line { margin-bottom: 0; }
.close__panel .req { width: 100%; gap: var(--s-1) var(--s-3); }
.close__panel .req .field__input { min-height: var(--size-control); background: var(--c-surface); }
.close__panel .field__note:empty { display: none; }

/* No coloured light on the hero: the white ground and the neutral dot grid carry it. */
.glow { display: none !important; }

/* The subline never runs wider than the headline: the copy block sizes to the title and the subline fills that width. */
.hero__copy { width: fit-content; max-width: 100%; margin-inline: auto; }
.hero__sub { width: 0; min-width: 100%; text-wrap: pretty; }

.proof__plain { display: grid; justify-items: center; gap: var(--s-3); margin-top: var(--s-6); font-size: var(--fs-micro); color: var(--c-ink-3); text-align: center; text-wrap: pretty; }
.proof__plain p { text-wrap: pretty; }
.repos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); list-style: none; }
.repo { display: inline-flex; align-items: center; gap: var(--s-1); height: var(--size-chip); padding: 0 var(--s-2); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-1); background: var(--c-bg); font-family: var(--font-mono); font-size: var(--fs-chip); line-height: 1; color: var(--c-ink-2); white-space: nowrap; }
.repo svg { width: var(--size-icon-s); height: var(--size-icon-s); flex: none; color: var(--c-ink-3); }

/* Hybrid hero: headline, subline and actions on top, the interactive demo directly under them so it sits in the
   first view (whole window within 900 px at 1440, its top within the first screen on phones). */
.hero { padding-block: var(--s-7) var(--s-8); }
.hero .hero__copy { gap: var(--s-4); }
.hero .proof__plain { margin-top: var(--s-2); }
.hero__demo { margin-top: var(--s-7); text-align: left; scroll-margin-top: var(--s-8); }
.demo__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); }
.demo__open { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--size-control); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-ink); }
.demo__open svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.term__fail { color: var(--c-failed-ink); font-weight: var(--fw-medium); padding-left: var(--s-4); white-space: pre-wrap; }
.term__bad { color: var(--c-failed-ink); }
.dview__path b { font-weight: var(--fw-medium); color: var(--c-ink); }
@media (max-width: 39.99rem) { .hero { padding-block: var(--s-6) var(--s-7); } .hero__demo { margin-top: var(--s-6); } }
@media (min-width: 64rem) {
  .hero { padding-top: var(--s-6); }
  .hero .hero__title { font-size: min(var(--fs-display), var(--fs-hero-cap)); }
  .hero__demo { margin-top: var(--s-6); }
  .hero .win__main { min-height: 0; padding: var(--s-4) var(--s-5); }
  .hero .wpanel { min-height: var(--size-wpanel-min); }
  .hero .rail { padding: var(--s-4); gap: var(--s-2); }
  .hero .rclaim { gap: var(--s-1); padding: var(--s-2) var(--s-3); }
  .hero .rclaim__go { display: none; }
  .hero .vd { gap: var(--s-3); }
  .hero .vd__list { gap: var(--s-2); }
  .hero .vd__row { padding: var(--s-3) var(--s-4); }
  .hero .pr { gap: var(--s-3); }
}
/* Phones: the claims rail becomes one compact row per claim (claim left, its state right), and the rerun header
   keeps its pill and counter on single lines. */
.cpill, .term__count { white-space: nowrap; }
@media (max-width: 39.99rem) {
  .term__head { flex-wrap: wrap; padding-block: var(--s-2); }
  .hero .rail { padding: var(--s-3) var(--s-4) var(--s-4); gap: var(--s-2); }
  .hero .rclaim { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); }
  .hero .rclaim__top { display: contents; }
  .hero .rclaim__top code, .hero .rclaim__go { display: none; }
  .hero .rclaim__text { order: -1; font-size: var(--fs-micro); }
}

/* Hero at desktop: one centred column (headline, subline, actions, proof) with the demo below it. */
@media (min-width: 64rem) {
  .hero { padding-top: var(--s-6); padding-bottom: var(--s-7); }
  .hero .hero__title { font-size: min(var(--fs-display), var(--fs-hero-cap)); line-height: 1.04; }
  .hero__demo { margin-top: var(--s-6); }
}

/* Setup and trust: the title beside a list of disclosure rows on wide screens, stacked on phones. */
.faq { display: grid; gap: var(--s-5); }
@media (min-width: 64rem) { .faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-8); align-items: start; } }
.faq .title { margin-bottom: 0; }
.faq__list { border-top: var(--size-hairline) solid var(--c-line); }
.qa { border-bottom: var(--size-hairline) solid var(--c-line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--size-row); padding-block: var(--s-3); font-weight: var(--fw-medium); color: var(--c-ink); cursor: pointer; list-style: none; text-wrap: pretty; border-radius: var(--r-1); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary svg { width: var(--size-icon-l); height: var(--size-icon-l); flex: none; color: var(--c-ink-3); transition: transform var(--d-fast) var(--ease-standard); }
.qa[open] summary svg { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .qa summary:hover svg { color: var(--c-ink); } }
.qa summary:focus-visible { outline: var(--size-focus) solid var(--c-ring); outline-offset: var(--size-stroke); }
.qa p { padding-bottom: var(--s-4); color: var(--c-ink-2); text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .qa summary svg { transition: none; } }

/* Product demo page: the title, then the player slot and the interactive demo at the page's full width */
.pghead { padding-top: var(--s-8); padding-bottom: var(--s-6); }
.pghead__title { font-size: var(--fs-hero); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--track-display); }
.pv { border-top: 0; padding-block: 0 var(--s-8); }
@media (max-width: 39.99rem) { .pghead { padding-top: var(--s-7); } .pv { padding-bottom: var(--s-7); } }

/* Carry into every later release: the hero column is as wide as the two-line headline, so the subline and proof line wrap inside it, never wider. */
@media (min-width: 64rem) { .hero .hero__copy { width: min(100%, 50rem); } }

/* Small footer links still give a 24 px tap target. */
a.meta { display: inline-flex; align-items: center; min-height: var(--s-5); }

/* The product video player: a native video under a hairline control panel. The panel floats over the picture, fades after
   2 s without pointer movement while playing and returns on movement or focus. Sky is the progress colour; every control
   is a 44 px target (--size-row). */
.player { display: grid; gap: var(--s-4); }
.player__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-frame); background: var(--c-ink); outline: none; }
.player__stage:fullscreen { border: 0; border-radius: 0; aspect-ratio: auto; }
.player__video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--c-ink); }
.player--idle .player__stage { cursor: none; }

.player__big { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: var(--size-illo); height: var(--size-illo); padding: 0; border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-bg); color: var(--c-ink); transition: opacity var(--d-fast) var(--ix-ease), transform var(--d-fast) var(--ix-ease); }
.player__big svg { width: var(--size-token); height: var(--size-token); margin-left: var(--s-1); }
.player--playing .player__big, .player--started .player__big { opacity: 0; pointer-events: none; transform: scale(var(--scale-pop)); }
.player--started.player--paused .player__big { opacity: 1; pointer-events: auto; transform: none; }
.player--scrubbing .player__big { opacity: 0; }

.player__cc { position: absolute; inset-inline: var(--s-4); bottom: var(--s-4); display: flex; justify-content: center; pointer-events: none; transition: bottom var(--d-fast) var(--ix-ease); }
.player__cc span { padding: var(--s-1) var(--s-3); border-radius: var(--r-1); background: var(--c-bg); color: var(--c-ink); font-size: var(--fs-0); line-height: var(--lh-snug); text-align: center; text-wrap: pretty; }
.player__cc:empty { display: none; }
.player:not(.player--idle) .player__cc { bottom: calc(var(--size-row) * 2 + var(--s-6)); }

.player__resume { position: absolute; left: var(--s-4); top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-3); background: var(--c-bg); color: var(--c-ink); font-size: var(--fs-0); }
.player__resume[hidden] { display: none; }

.player__panel { position: absolute; inset-inline: var(--s-3); bottom: var(--s-3); padding: 0 var(--s-2); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-3); background: color-mix(in oklch, var(--c-bg) 94%, transparent); color: var(--c-ink); transition: opacity var(--d-fast) var(--ix-ease), transform var(--d-fast) var(--ix-ease); }
.player--idle .player__panel { opacity: 0; transform: translateY(var(--s-2)); pointer-events: none; }
.player--idle:focus-within .player__panel { opacity: 1; transform: none; pointer-events: auto; }
.player--idle.player--keep .player__panel { opacity: 1; transform: none; pointer-events: auto; }

.player__scrub { position: relative; display: flex; align-items: center; height: var(--size-row); touch-action: none; cursor: pointer; border-radius: var(--r-1); }
.player__track { position: relative; width: 100%; height: var(--size-dot); border-radius: var(--r-pill); background: var(--c-line); overflow: hidden; }
.player__buf, .player__done { position: absolute; inset-block: 0; left: 0; width: 0; }
.player__buf { background: var(--c-line-strong); }
.player__done { background: var(--c-accent); }
.player__mark { position: absolute; top: 0; bottom: 0; width: var(--size-gap-bar); background: var(--c-bg); }
.player__knob { position: absolute; top: 50%; left: 0; width: var(--size-knob); height: var(--size-knob); margin: calc(var(--size-knob) / -2) 0 0 calc(var(--size-knob) / -2); border-radius: var(--r-pill); background: var(--c-accent); border: var(--size-stroke) solid var(--c-bg); transform: scale(0); transition: transform var(--d-fast) var(--ix-ease); pointer-events: none; }
.player__scrub:hover .player__knob, .player__scrub:focus-visible .player__knob, .player--scrubbing .player__knob { transform: scale(1); }
.player__tip { position: absolute; bottom: calc(100% - var(--s-2)); left: 0; padding: var(--s-1) var(--s-2); border-radius: var(--r-1); background: var(--c-ink); color: var(--c-bg); font-size: var(--fs-chip); line-height: var(--lh-snug); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(-50%); }
.player__scrub.is-hover .player__tip, .player--scrubbing .player__tip { opacity: 1; }
.player__tip b { font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.player__scrub:focus-visible { box-shadow: var(--ix-ring); }

.player__row { display: flex; align-items: center; gap: var(--s-1); height: var(--size-row); }
.player__btn { display: inline-grid; place-items: center; min-width: var(--size-row); height: var(--size-row); padding: 0 var(--s-2); border: 0; border-radius: var(--r-2); background: transparent; color: var(--c-ink); font-size: var(--fs-0); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.player__btn svg { width: var(--size-icon-l); height: var(--size-icon-l); }
.player__btn[aria-pressed="true"] { background: var(--c-surface-2); }
.player__btn[hidden] { display: none; }
.player__time { padding-inline: var(--s-2); color: var(--c-ink-2); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player__gap { flex: 1; }
.player__vol { width: 0; opacity: 0; accent-color: var(--c-accent); transition: width var(--d-fast) var(--ix-ease), opacity var(--d-fast) var(--ix-ease); height: var(--size-row); margin: 0; }
.player__voll:hover .player__vol, .player__voll:focus-within .player__vol { width: calc(var(--size-control) * 2); opacity: 1; }
.player__voll { display: inline-flex; align-items: center; }
.player__pip[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .player__btn:hover { background: var(--c-surface); } .player__big:hover { background: var(--c-surface); } .player__btn[aria-pressed="true"]:hover { background: var(--c-surface-2); } }
.player__btn:focus-visible, .player__big:focus-visible, .player__chap:focus-visible { box-shadow: var(--ix-ring); }

.player__chapters { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.player__chap { display: grid; grid-template-columns: var(--size-illo) 1fr; align-items: center; width: 100%; min-height: var(--size-row); padding: var(--s-1) var(--s-3); border: var(--size-hairline) solid transparent; border-radius: var(--r-2); background: transparent; color: var(--c-ink-2); font-size: var(--fs-0); text-align: left; }
.player__chap time { color: var(--c-ink-3); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }
.player__chap[aria-current="true"] { border-color: var(--c-line); background: var(--c-accent-soft); color: var(--c-ink); font-weight: var(--fw-medium); }
@media (hover: hover) and (pointer: fine) { .player__chap:hover { background: var(--c-surface); } .player__chap[aria-current="true"]:hover { background: var(--c-accent-soft); } }
@media (min-width: 48rem) { .player__chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: var(--s-1) var(--s-5); } }

@media (max-width: 39.99rem) {
  .player__panel { inset-inline: var(--s-2); bottom: var(--s-2); padding: 0 var(--s-1); }
  .player__voll .player__vol, .player__pip { display: none; }
  .player__chap { grid-template-columns: var(--size-illo) 1fr; }
  .player__time { padding-inline: var(--s-1); }
  .player:not(.player--idle) .player__cc { bottom: calc(var(--size-row) * 2 + var(--s-5)); }
}
@media (max-width: 22.49rem) { .player__btn { min-width: var(--size-control-l); padding-inline: 0; } }
@media (prefers-reduced-motion: reduce) { .player__panel, .player__big, .player__knob, .player__vol, .player__cc { transition: none; } }

/* The /demo page: intro, the player with its chapter list beside it at wide widths, then the two actions. */
.dp-head { display: grid; gap: var(--s-4); padding-bottom: var(--s-6); }
.dp-lede { margin: 0; color: var(--c-ink-2); font-size: var(--fs-2); line-height: var(--lh-body); text-wrap: pretty; }
.dp-actions { border-top: 0; }
.dp-actions__row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 39.99rem) { .dp-actions__row .btn { flex: 1 1 100%; } }

.pv .player { display: grid; gap: var(--s-4); }
@media (min-width: 80rem) {
  .pv .player:not(.player--empty) { grid-template-columns: minmax(0, 1fr) calc(var(--size-illo) * 4); align-items: start; gap: var(--s-5); }
  .pv .player__chapters { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: var(--s-1); }
}

.player--empty .player__stage { display: grid; place-items: center; background-color: var(--c-surface); background-size: cover; background-position: center; }
.player__pending { margin: 0; padding: var(--s-2) var(--s-4); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-3); background: var(--c-bg); color: var(--c-ink); font-size: var(--fs-0); text-align: center; text-wrap: pretty; }

/* Interaction states for every control on the site and in the report app.
   Pointer only where something acts; hover styles only on devices that hover, so touch never sticks;
   press is a small, fast squeeze; focus shows a ring for keyboard users only. One easing and one set of
   durations for all of it. */
:root {
  --ix-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ix-fast: var(--d-ix-fast);
  --ix-press: var(--d-ix-press);
  --ix-ring: 0 0 0 var(--size-stroke) var(--c-bg), 0 0 0 calc(var(--size-stroke) * 2) var(--c-accent);
}

html { -webkit-tap-highlight-color: transparent; }
a, button, [role="tab"], [role="button"], summary, select, label[for], .runrow, .rclaim, .acc__btn { cursor: pointer; touch-action: manipulation; }
input, textarea { cursor: text; }
button:disabled, [aria-disabled="true"], .btn[disabled] { cursor: not-allowed; }

.btn, .wtab, .acc__btn, .runrow, .rclaim, .field__input, a {
  transition: background-color var(--ix-fast) var(--ix-ease), border-color var(--ix-fast) var(--ix-ease),
              color var(--ix-fast) var(--ix-ease), box-shadow var(--ix-fast) var(--ix-ease),
              text-decoration-color var(--ix-fast) var(--ix-ease), transform var(--ix-press) ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background-color: var(--c-btn-primary-hover); }
  .btn--outline:hover, .btn--ghost:hover, .win__bar button:hover { background-color: var(--c-surface); border-color: var(--c-line-strong); }
  .dark .btn--outline:hover, .dark__btn:hover { background-color: var(--p-ink-50); }
  .wtab:hover { color: var(--c-ink-2); }
  .acc__btn:hover, .rclaim:hover { color: var(--c-ink); }
  .runrow:hover { background-color: var(--c-surface); }
  .tile:hover { border-color: var(--c-line-strong); }
  .field__input:hover { border-color: var(--c-ink-4); }
  a:not(.btn):not(.brand):not(.foot__brand):not(.runrow):not(.nav__link):hover { color: var(--c-ink); text-decoration-color: currentColor; }
}

.btn:active, .wtab:active, .win__bar button:active { transform: scale(0.98); }
.runrow:active, .rclaim:active { transform: scale(0.995); }

:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ix-ring); border-radius: var(--r-1); }
.field__input:focus-visible { box-shadow: 0 0 0 var(--size-focus) color-mix(in oklch, var(--c-accent) 22%, transparent); border-color: var(--c-accent); }

a:not(.btn):not(.brand):not(.foot__brand):not(.runrow):not(.nav__link) { text-decoration-line: underline; text-decoration-thickness: var(--size-hairline); text-underline-offset: var(--size-underline-offset); text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); }
nav a { text-decoration-line: none; }

@media (prefers-reduced-motion: reduce) {
  .btn, .wtab, .acc__btn, .runrow, .rclaim, .tile, .field__input, .chip, a { transition: none; }
  .btn:active, .wtab:active, .runrow:active, .rclaim:active { transform: none; }
}

/* Cards that are not links do not react to the pointer beyond a hairline; only things that act respond. */
.tile { transform: none !important; }