/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 * ------------------------------------------- */

:root {
  color-scheme: dark;
/* Docs shell is at docs-shell; past it the shell grows and the gutter grid appears. */
  --breakpoint-lg: 1180px;
  /* Docs shell goes to three columns; task layout goes to two. */
  --breakpoint-md: 980px;
  --breakpoint-sm: 640px;
  /* Docs reading size steps up from 15 px to 17 px (font.size.lg), and a docs page sits on one centred column at the reading measure. */
  --breakpoint-xl: 1440px;
  /* The decision colour. One gold per decision, not per screen: a browsing grid has none, a product page has one, a carousel spends it on the last slide. */
  --color-accent: var(--palette-gold-500);
  /* Page background. */
  --color-bg: var(--palette-neutral-void);
  /* State only, never decoration, always with a word next to it. */
  --color-danger: var(--palette-coral-400);
  /* Body text. */
  --color-fg: var(--palette-neutral-mist);
  /* Paragraphs and lists of long-form text (blog posts, docs, articles). Headings, bold and code stay fg. 11.5:1 on bg. */
  --color-fg-reading: var(--palette-neutral-pewter);
  /* The 24 px grid, drawn in the gutters only, never behind content. */
  --color-grid: #3ab9bf1a;
  --color-illustration-azure: var(--palette-azure-400);
  --color-illustration-cyan: var(--palette-cyan-500);
  --color-illustration-dim: var(--palette-cyan-700);
  /* In artwork the gold is a shape, never a label and never a button. */
  --color-illustration-gold: var(--palette-gold-500);
  --color-illustration-lift: var(--palette-cyan-300);
  --color-illustration-rose: var(--palette-rose-400);
  --color-illustration-violet: var(--palette-violet-400);
  /* Rules, borders, dividers. */
  --color-line: var(--palette-neutral-void-line);
  /* A line the reader needs to see a shape: a diagram box outline, an axis, a separator that splits meaning. 3:1 or more on bg and on panel (WCAG 2.2 1.4.11), darker than muted so the words still lead. Never text. */
  --color-line-strong: var(--palette-neutral-void-edge);
  /* Secondary text, labels, captions. AA on bg and on panel. */
  --color-muted: var(--palette-neutral-ash);
  /* Text on a gold fill. */
  --color-on-accent: var(--palette-neutral-ink);
  /* Text on a cyan fill. */
  --color-on-primary: var(--palette-neutral-ink);
  /* Cards, code blocks, docs top bar, status strips. */
  --color-panel: var(--palette-neutral-void-panel);
  /* Structure: links, section numbers, corner brackets, rules, focus rings, active states, the primary chart series. If the cyan thins out, the identity is gone. */
  --color-primary: var(--palette-cyan-500);
  /* Cyan at rest: inactive nodes, ramp floor, disabled chrome. 3.7:1, never text. */
  --color-primary-dim: var(--palette-cyan-700);
  /* Cyan hover, and highlights on dark artwork. */
  --color-primary-lift: var(--palette-cyan-300);
  /* State only, never decoration, always with a word next to it. */
  --color-success: var(--palette-emerald-400);
  /* Cyan wash behind a ghost button, an active nav row or a selected cell. */
  --color-tint: #3ab9bf14;
  /* State only, never decoration, always with a word next to it. Lilac rather than amber: the warm band belongs to the accent. */
  --color-warning: var(--palette-lilac-300);
  /* Everything read. */
  --font-family-body: "Instrument Sans", system-ui, sans-serif;
  /* Titles, labels, buttons, tabs, eyebrows. Never body text, never long docs prose. */
  --font-family-display: "Chakra Petch", system-ui, sans-serif;
  /* Code, data, numbers, breadcrumbs, status strips. */
  --font-family-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
  --font-letter-spacing-button: 0.12em;
  --font-letter-spacing-display: 0.01em;
  --font-letter-spacing-eyebrow: 0.16em;
  --font-letter-spacing-lockup: 0.02em;
  --font-letter-spacing-mono-label: 0.08em;
  --font-letter-spacing-none: 0em;
  --font-line-height-body: 1.5;
  --font-line-height-code: 1.55;
  /* Long-form text: blog posts, docs, articles. */
  --font-line-height-reading: 1.7;
  /* Buttons, labels. */
  --font-line-height-snug: 1.2;
  --font-line-height-terminal: 1.7;
  /* Display. */
  --font-line-height-tight: 1.05;
  /* 28 px. Section title, small end. */
  --font-size-2xl: 1.75rem;
  /* 44 px. Section title, large end; page title, small end. */
  --font-size-3xl: 2.75rem;
  /* 56 px. Slide titles. */
  --font-size-4xl: 3.5rem;
  /* 88 px. Page title, large end. */
  --font-size-5xl: 5.5rem;
  /* 16 px. Body. */
  --font-size-base: 1rem;
  /* 17 px. Lead paragraphs. */
  --font-size-lg: 1.0625rem;
  /* 14 px. Card descriptions, captions. */
  --font-size-md: 0.875rem;
  /* 13 px. Mono data, table cells, nav. */
  --font-size-sm: 0.8125rem;
  /* 22 px. Sub-headings, the pairing line. */
  --font-size-xl: 1.375rem;
  /* 11 px. Labels, eyebrows, status strips. */
  --font-size-xs: 0.6875rem;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  /* Max width of a marketing or blog page. */
  --layout-content: 1120px;
  /* Docs nav column, at docs-shell. Grows with the shell up to docs-nav-max. */
  --layout-docs-nav: 232px;
  /* Docs nav column on a wide screen. */
  --layout-docs-nav-max: 288px;
  /* Docs three-column shell, up to the lg breakpoint. Past it the shell grows with the screen, keeping three grid cells of gutter on each side, up to docs-shell-max. Outside it, the gutter grid. */
  --layout-docs-shell: 1180px;
  /* Docs shell cap on wide screens. The nav and table of contents each take a quarter of the width the shell gains over docs-shell, the content column half. */
  --layout-docs-shell-max: 1440px;
  /* Docs table of contents column, at docs-shell. Grows with the shell up to docs-toc-max. */
  --layout-docs-toc: 200px;
  /* Docs table of contents column on a wide screen. */
  --layout-docs-toc-max: 256px;
  /* Docs top bar height. */
  --layout-docs-top: 56px;
  /* Gutter grid cell. Drawn outside the shell only; nothing aligns to it, so it is never off. */
  --layout-grid: 24px;
  /* Page side padding at phone width and up. */
  --layout-gutter: 24px;
  /* Reading measure of long-form text blocks, in em: about 69 characters of Instrument Sans. Code, tables and figures keep the column width. */
  --layout-measure: 32;
  /* Pause between the end of the turn and the missing piece landing in the slot. */
  --motion-duration-arrive-delay: 300ms;
  /* How long the piece stays in the slot before it leaves; the mark always ends with the slot empty. */
  --motion-duration-arrive-hold: 1200ms;
  /* Dimension line extends on hover. */
  --motion-duration-dimension: 350ms;
  /* One stroke draws itself in. Every stroke carries pathLength="1" so the duration holds whatever its real length (D review fix). */
  --motion-duration-draw-in: 1750ms;
  /* Delay between consecutive strokes of one drawing. */
  --motion-duration-draw-in-stagger: 600ms;
  /* Dimension lines and labels fade in once the drawing is done. */
  --motion-duration-fade: 900ms;
  /* From the first stroke to the fade: five staggered strokes plus one draw-in. */
  --motion-duration-fade-delay: 3850ms;
  /* Feedback to what someone does (hover, focus, press, copy): a colour, border or opacity change, every time it happens. */
  --motion-duration-feedback: 150ms;
  /* Something opening: a disclosure's content fades in. It takes its space at once and closes at once. */
  --motion-duration-open: 200ms;
  /* One scanline pass on reveal, then it stops. */
  --motion-duration-scan: 4000ms;
  /* The mark's quarter disc turns a quarter, once, on reveal (Missing Tile, 2026-09-23). */
  --motion-duration-turn: 600ms;
  /* One terminal line, stepped. */
  --motion-duration-type-in: 2400ms;
  --motion-duration-type-in-delay: 400ms;
  /* Scanline. */
  --motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  /* The only curve. Draw-in, dimension, fades. */
  --motion-easing-precise: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* The piece lands and leaves in one step, no slide. */
  --motion-steps-arrive: 1;
  /* One step per character of the demo line; in production, one per character. */
  --motion-steps-type-in: 38;
  /* Illustration secondary. 8.5:1. */
  --palette-azure-400: #83acef;
  /* Danger. 8.7:1. */
  --palette-coral-400: #fb8d8c;
  /* Lift: hover, highlights on dark artwork, the top step of a single-hue ramp. 13.1:1. */
  --palette-cyan-300: #8fe1e6;
  /* Cyan. Links, section numbers, brackets, rules, focus rings, the primary chart series. 8.3:1. */
  --palette-cyan-500: #3ab9bf;
  /* Dim: cyan at rest. Inactive nodes, the bottom of a ramp, disabled chrome. 3.7:1, non-text only. */
  --palette-cyan-700: #2d7579;
  /* Success. 10.5:1. */
  --palette-emerald-400: #5fd39a;
  /* Gold. One per decision. 12.2:1 on the field; ink on it reads 11.5:1. */
  --palette-gold-500: #fcc514;
  /* Warning. 11.0:1. Warm hues are the accent's own band, so warning moved off amber; it never carries the state alone (see color.warning). */
  --palette-lilac-300: #d6b4fc;
  /* Secondary text, labels, captions. 6.3:1 on the field, 5.3:1 on a panel. */
  --palette-neutral-ash: #8f929a;
  /* Text on a cyan or gold fill, and the ink of a one-colour print on a light hue. */
  --palette-neutral-ink: #141416;
  /* Body text. 15.9:1 on the field. */
  --palette-neutral-mist: #e6e8ec;
  /* Long-form reading text. 11.5:1 on the field. */
  --palette-neutral-pewter: #c4c7cd;
  /* The field. Every surface in the brand sits on it; assets that live on other people's surfaces carry it with them. */
  --palette-neutral-void: #0a0c11;
  /* A line the reader needs: a diagram box, an axis. 3.9:1 on the field, 3.5:1 on a panel, under the secondary text. */
  --palette-neutral-void-edge: #6c6f76;
  /* Hairlines, borders, dividers, the gutter grid. */
  --palette-neutral-void-line: #292c33;
  /* Panels: cards, code blocks, docs chrome, status strips. One step up from the field. */
  --palette-neutral-void-panel: #16181e;
  /* Paper: the one-colour proof on a dark garment, and the 'ink or paper' contrast test on illustration hues. */
  --palette-neutral-white: #fff;
  /* Illustration secondary. 7.9:1. */
  --palette-rose-400: #f083a7;
  /* Illustration secondary. 8.0:1. */
  --palette-violet-400: #c78fef;
  --radius-md: 6px;
  --radius-none: 0px;
  --radius-pill: 999px;
  --radius-sm: 3px;
  /* Corner bracket arm length. */
  --size-bracket: 12px;
  /* Icon buttons (theme toggle). */
  --size-control: 28px;
  --size-mark-lg: 160px;
  --size-mark-md: 32px;
  --size-mark-sm: 24px;
  --size-mark-xs: 16px;
  /* Numbered step circle. */
  --size-step: 22px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-18: 72px;
  /* Corner brackets, dimension lines, draw-in strokes, active nav edge. */
  --stroke-bracket: 1.5px;
  /* Mark as fine line: the tattoo test (viewBox 32). */
  --stroke-fine: 0.8px;
  /* Rules, borders, dividers. */
  --stroke-hairline: 1px;
  /* Sparse-mode illustrations at 240 wide. */
  --stroke-illustration: 1.25px;
  /* Mark and icons at UI sizes (viewBox 32). */
  --stroke-ui: 2px;
  --type-body: var(--type-body-font-weight) var(--type-body-font-size)/var(--type-body-line-height) var(--type-body-font-family);
  --type-body-font-family: var(--font-family-body);
  --type-body-font-size: var(--font-size-base);
  --type-body-font-weight: var(--font-weight-regular);
  --type-body-letter-spacing: var(--font-letter-spacing-none);
  --type-body-line-height: var(--font-line-height-body);
  /* Buttons, tabs, adjective badges. Uppercase. */
  --type-button: var(--type-button-font-weight) var(--type-button-font-size)/var(--type-button-line-height) var(--type-button-font-family);
  /* Buttons, tabs, adjective badges. Uppercase. */
  --type-button-font-family: var(--font-family-display);
  /* Buttons, tabs, adjective badges. Uppercase. */
  --type-button-font-size: var(--font-size-xs);
  /* Buttons, tabs, adjective badges. Uppercase. */
  --type-button-font-weight: var(--font-weight-semibold);
  /* Buttons, tabs, adjective badges. Uppercase. */
  --type-button-letter-spacing: var(--font-letter-spacing-button);
  /* Buttons, tabs, adjective badges. Uppercase. */
  --type-button-line-height: var(--font-line-height-snug);
  /* Page title. Uppercase. Fluid down to 3xl. */
  --type-display: var(--type-display-font-weight) var(--type-display-font-size)/var(--type-display-line-height) var(--type-display-font-family);
  /* Page title. Uppercase. Fluid down to 3xl. */
  --type-display-font-family: var(--font-family-display);
  /* Page title. Uppercase. Fluid down to 3xl. */
  --type-display-font-size: var(--font-size-5xl);
  /* Page title. Uppercase. Fluid down to 3xl. */
  --type-display-font-weight: var(--font-weight-bold);
  /* Page title. Uppercase. Fluid down to 3xl. */
  --type-display-letter-spacing: var(--font-letter-spacing-display);
  /* Page title. Uppercase. Fluid down to 3xl. */
  --type-display-line-height: var(--font-line-height-tight);
  /* Numbered section labels, nav group labels. Uppercase, muted, number in primary mono. */
  --type-eyebrow: var(--type-eyebrow-font-weight) var(--type-eyebrow-font-size)/var(--type-eyebrow-line-height) var(--type-eyebrow-font-family);
  /* Numbered section labels, nav group labels. Uppercase, muted, number in primary mono. */
  --type-eyebrow-font-family: var(--font-family-display);
  /* Numbered section labels, nav group labels. Uppercase, muted, number in primary mono. */
  --type-eyebrow-font-size: var(--font-size-xs);
  /* Numbered section labels, nav group labels. Uppercase, muted, number in primary mono. */
  --type-eyebrow-font-weight: var(--font-weight-semibold);
  /* Numbered section labels, nav group labels. Uppercase, muted, number in primary mono. */
  --type-eyebrow-letter-spacing: var(--font-letter-spacing-eyebrow);
  /* Numbered section labels, nav group labels. Uppercase, muted, number in primary mono. */
  --type-eyebrow-line-height: var(--font-line-height-snug);
  /* Card titles, docs h2. Uppercase. */
  --type-heading: var(--type-heading-font-weight) var(--type-heading-font-size)/var(--type-heading-line-height) var(--type-heading-font-family);
  /* Card titles, docs h2. Uppercase. */
  --type-heading-font-family: var(--font-family-display);
  /* Card titles, docs h2. Uppercase. */
  --type-heading-font-size: var(--font-size-xl);
  /* Card titles, docs h2. Uppercase. */
  --type-heading-font-weight: var(--font-weight-bold);
  /* Card titles, docs h2. Uppercase. */
  --type-heading-letter-spacing: var(--font-letter-spacing-display);
  /* Card titles, docs h2. Uppercase. */
  --type-heading-line-height: var(--font-line-height-tight);
  /* Docs lead paragraph, muted. */
  --type-lead: var(--type-lead-font-weight) var(--type-lead-font-size)/var(--type-lead-line-height) var(--type-lead-font-family);
  /* Docs lead paragraph, muted. */
  --type-lead-font-family: var(--font-family-body);
  /* Docs lead paragraph, muted. */
  --type-lead-font-size: var(--font-size-lg);
  /* Docs lead paragraph, muted. */
  --type-lead-font-weight: var(--font-weight-regular);
  /* Docs lead paragraph, muted. */
  --type-lead-letter-spacing: var(--font-letter-spacing-none);
  /* Docs lead paragraph, muted. */
  --type-lead-line-height: var(--font-line-height-body);
  /* Code blocks, data values. */
  --type-mono: var(--type-mono-font-weight) var(--type-mono-font-size)/var(--type-mono-line-height) var(--type-mono-font-family);
  /* Code blocks, data values. */
  --type-mono-font-family: var(--font-family-mono);
  /* Code blocks, data values. */
  --type-mono-font-size: var(--font-size-sm);
  /* Code blocks, data values. */
  --type-mono-font-weight: var(--font-weight-regular);
  /* Table headers, dimension labels, breadcrumbs, status strips. Uppercase where it labels. */
  --type-mono-label: var(--type-mono-label-font-weight) var(--type-mono-label-font-size)/var(--type-mono-label-line-height) var(--type-mono-label-font-family);
  /* Table headers, dimension labels, breadcrumbs, status strips. Uppercase where it labels. */
  --type-mono-label-font-family: var(--font-family-mono);
  /* Table headers, dimension labels, breadcrumbs, status strips. Uppercase where it labels. */
  --type-mono-label-font-size: var(--font-size-xs);
  /* Table headers, dimension labels, breadcrumbs, status strips. Uppercase where it labels. */
  --type-mono-label-font-weight: var(--font-weight-medium);
  /* Table headers, dimension labels, breadcrumbs, status strips. Uppercase where it labels. */
  --type-mono-label-letter-spacing: var(--font-letter-spacing-mono-label);
  /* Table headers, dimension labels, breadcrumbs, status strips. Uppercase where it labels. */
  --type-mono-label-line-height: var(--font-line-height-snug);
  /* Code blocks, data values. */
  --type-mono-letter-spacing: var(--font-letter-spacing-none);
  /* Code blocks, data values. */
  --type-mono-line-height: var(--font-line-height-code);
  --type-small: var(--type-small-font-weight) var(--type-small-font-size)/var(--type-small-line-height) var(--type-small-font-family);
  --type-small-font-family: var(--font-family-body);
  --type-small-font-size: var(--font-size-md);
  --type-small-font-weight: var(--font-weight-regular);
  --type-small-letter-spacing: var(--font-letter-spacing-none);
  --type-small-line-height: var(--font-line-height-body);
  /* Section title. Uppercase. Fluid down to 2xl. */
  --type-title: var(--type-title-font-weight) var(--type-title-font-size)/var(--type-title-line-height) var(--type-title-font-family);
  /* Section title. Uppercase. Fluid down to 2xl. */
  --type-title-font-family: var(--font-family-display);
  /* Section title. Uppercase. Fluid down to 2xl. */
  --type-title-font-size: var(--font-size-3xl);
  /* Section title. Uppercase. Fluid down to 2xl. */
  --type-title-font-weight: var(--font-weight-bold);
  /* Section title. Uppercase. Fluid down to 2xl. */
  --type-title-letter-spacing: var(--font-letter-spacing-display);
  /* Section title. Uppercase. Fluid down to 2xl. */
  --type-title-line-height: var(--font-line-height-tight);}