/* inlay  · Generated by scripts/build.mjs from tokens/inlay.tokens.json. Do not edit. */
@layer inlay.base, inlay.components;
/* Inter (text) and IBM Plex Mono (labels, numbers, code). Both SIL OFL 1.1. */
@font-face {
  font-family: Inter;
  src: url('../fonts/Inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/PlexMono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Generated by scripts/build.mjs from tokens/inlay.tokens.json. Do not edit. */
:root {
  --gray-0: #F8F9FA;
  --gray-1: #F1F3F5;
  --gray-2: #E9ECEF;
  --gray-3: #DEE2E6;
  --gray-4: #CED4DA;
  --gray-5: #ADB5BD;
  --gray-6: #868E96;
  --gray-7: #626B73;
  --gray-8: #495057;
  --gray-9: #343A40;
  --gray-10: #2B3035;
  --gray-11: #212529;
  --gray-12: #141619;
  --gray-13: #0D0F12;
  --gray-14: #08090B;
  --pink-100: #FCE8EB;
  --pink-200: #F7B9C0;
  --pink-300: #FFA7B2;
  --pink-400: #F78F9C;
  --pink-500: #F45B69;
  --pink-700: #A42D3C;
  --pink-900: #3A252A;
  --pink-950: #4A2930;
  --font-sans: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Plex Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans-features: 'cv11', 'ss01';
  --text-display: 400 44px/1.05 var(--font-sans);
  --text-display-size: 44px;
  --text-display-tracking: -0.045em;
  --text-title-1: 500 32px/1.1 var(--font-sans);
  --text-title-1-size: 32px;
  --text-title-1-tracking: -0.035em;
  --text-title-2: 500 24px/1.2 var(--font-sans);
  --text-title-2-size: 24px;
  --text-title-2-tracking: -0.025em;
  --text-title-3: 600 18px/1.3 var(--font-sans);
  --text-title-3-size: 18px;
  --text-title-3-tracking: -0.015em;
  --text-headline: 600 15px/1.35 var(--font-sans);
  --text-headline-size: 15px;
  --text-headline-tracking: -0.01em;
  --text-body-lg: 400 17px/1.55 var(--font-sans);
  --text-body-lg-size: 17px;
  --text-body-lg-tracking: -0.005em;
  --text-body: 400 15px/1.5 var(--font-sans);
  --text-body-size: 15px;
  --text-body-tracking: 0em;
  --text-body-sm: 400 13px/1.5 var(--font-sans);
  --text-body-sm-size: 13px;
  --text-body-sm-tracking: 0em;
  --text-caption: 400 12px/1.4 var(--font-sans);
  --text-caption-size: 12px;
  --text-caption-tracking: 0em;
  --text-reading: 500 30px/1 var(--font-sans);
  --text-reading-size: 30px;
  --text-reading-tracking: -0.05em;
  --text-label: 400 10px/1.4 var(--font-mono);
  --text-label-size: 10px;
  --text-label-tracking: 0.12em;
  --text-label-sm: 400 9px/1.3 var(--font-mono);
  --text-label-sm-size: 9px;
  --text-label-sm-tracking: 0.1em;
  --text-mono: 400 12px/1.5 var(--font-mono);
  --text-mono-size: 12px;
  --text-mono-tracking: 0.02em;
  --text-mono-sm: 400 11px/1.45 var(--font-mono);
  --text-mono-sm-size: 11px;
  --text-mono-sm-tracking: 0.02em;
  --text-code: 400 13px/1.6 var(--font-mono);
  --text-code-size: 13px;
  --text-code-tracking: 0em;
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-0_5: 2px;
  --space-1_5: 6px;
  --radius-segment: 1px;
  --radius-xs: 3px;
  --radius-tag: 5px;
  --radius-control: 8px;
  --radius-panel: 12px;
  --radius-overlay: 16px;
  --radius-sheet: 24px;
  --radius-full: 999px;
  --size-hairline: 1px;
  --size-touch: 44px;
  --size-control-sm: 32px;
  --size-control-md: 40px;
  --size-control-lg: 48px;
  --size-icon-sm: 16px;
  --size-icon: 20px;
  --size-icon-lg: 24px;
  --size-dot: 6px;
  --size-bar-top: 64px;
  --size-bar-bottom: 70px;
  --size-sidebar: 214px;
  --size-sheet-handle: 36px;
  --size-measure: 680px;
  --size-form: 480px;
  --dur-press: 90ms;
  --dur-quick: 160ms;
  --dur-surface: 200ms;
  --dur-page: 250ms;
  --dur-reading: 500ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-page: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --gutter: 20px;
}

:root,
[data-theme='light'] {
  color-scheme: light;
  --bg: #F1F3F5;
  --paper: #FFFFFF;
  --raised: #FFFFFF;
  --pale: #E9ECEF;
  --well: #F1F3F5;
  --dark: #212529;
  --terminal: #0D0F12;
  --ink: #212529;
  --muted: #626B73;
  --faint: #868E96;
  --on-ink: #FFFFFF;
  --on-dark: #F8F9FA;
  --on-dark-muted: #ADB5BD;
  --on-terminal: #F8F9FA;
  --on-terminal-muted: #ADB5BD;
  --line: #DEE2E6;
  --line-strong: #CED4DA;
  --signal: #F45B69;
  --signal-ink: #A42D3C;
  --signal-pale: #FCE8EB;
  --on-signal: #212529;
  --selection: #F7B9C0;
  --data-1: #212529;
  --data-2: #1C7ED6;
  --data-3: #2F9E44;
  --data-4: #7048E8;
  --hover: rgb(33 37 41 / 0.05);
  --press: rgb(33 37 41 / 0.09);
  --scrim: rgb(13 15 18 / 0.5);
  --shadow: rgb(0 0 0 / 0.22);
}

[data-theme='dark'] {
  color-scheme: dark;
  --bg: #141619;
  --paper: #212529;
  --raised: #2B3035;
  --pale: #2B3035;
  --well: #141619;
  --dark: #0D0F12;
  --terminal: #08090B;
  --ink: #F8F9FA;
  --muted: #ADB5BD;
  --faint: #6C757D;
  --on-ink: #212529;
  --on-dark: #F8F9FA;
  --on-dark-muted: #ADB5BD;
  --on-terminal: #F8F9FA;
  --on-terminal-muted: #ADB5BD;
  --line: #343A40;
  --line-strong: #495057;
  --signal: #F78F9C;
  --signal-ink: #FFA7B2;
  --signal-pale: #3A252A;
  --on-signal: #212529;
  --selection: #4A2930;
  --data-1: #F8F9FA;
  --data-2: #339AF0;
  --data-3: #2F9E44;
  --data-4: #9775FA;
  --hover: rgb(248 249 250 / 0.06);
  --press: rgb(248 249 250 / 0.1);
  --scrim: rgb(0 0 0 / 0.6);
  --shadow: rgb(0 0 0 / 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #141619;
    --paper: #212529;
    --raised: #2B3035;
    --pale: #2B3035;
    --well: #141619;
    --dark: #0D0F12;
    --terminal: #08090B;
    --ink: #F8F9FA;
    --muted: #ADB5BD;
    --faint: #6C757D;
    --on-ink: #212529;
    --on-dark: #F8F9FA;
    --on-dark-muted: #ADB5BD;
    --on-terminal: #F8F9FA;
    --on-terminal-muted: #ADB5BD;
    --line: #343A40;
    --line-strong: #495057;
    --signal: #F78F9C;
    --signal-ink: #FFA7B2;
    --signal-pale: #3A252A;
    --on-signal: #212529;
    --selection: #4A2930;
    --data-1: #F8F9FA;
    --data-2: #339AF0;
    --data-3: #2F9E44;
    --data-4: #9775FA;
    --hover: rgb(248 249 250 / 0.06);
    --press: rgb(248 249 250 / 0.1);
    --scrim: rgb(0 0 0 / 0.6);
    --shadow: rgb(0 0 0 / 0.5);
  }
}

/* Touch screens get bigger controls from the same components. */
@media (pointer: coarse) {
  :root {
    --size-control-sm: 40px;
    --size-control-md: 48px;
    --size-control-lg: 56px;
  }
}

@media (max-width: 379.98px) {
  :root { --gutter: 16px; }
}

@media (min-width: 600px) {
  :root { --gutter: 24px; }
}

@media (min-width: 1000px) {
  :root { --gutter: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms;
    --dur-quick: 0ms;
    --dur-surface: 0ms;
    --dur-page: 0ms;
    --dur-reading: 0ms;
  }
}

@layer inlay.base {
  .text-display { font: var(--text-display); letter-spacing: var(--text-display-tracking); }
  .text-title-1 { font: var(--text-title-1); letter-spacing: var(--text-title-1-tracking); }
  .text-title-2 { font: var(--text-title-2); letter-spacing: var(--text-title-2-tracking); }
  .text-title-3 { font: var(--text-title-3); letter-spacing: var(--text-title-3-tracking); }
  .text-headline { font: var(--text-headline); letter-spacing: var(--text-headline-tracking); }
  .text-body-lg { font: var(--text-body-lg); letter-spacing: var(--text-body-lg-tracking); }
  .text-body { font: var(--text-body); letter-spacing: var(--text-body-tracking); }
  .text-body-sm { font: var(--text-body-sm); letter-spacing: var(--text-body-sm-tracking); }
  .text-caption { font: var(--text-caption); letter-spacing: var(--text-caption-tracking); }
  .text-reading { font: var(--text-reading); letter-spacing: var(--text-reading-tracking); font-variant-numeric: tabular-nums; }
  .text-label { font: var(--text-label); letter-spacing: var(--text-label-tracking); text-transform: uppercase; font-variant-numeric: tabular-nums; }
  .text-label-sm { font: var(--text-label-sm); letter-spacing: var(--text-label-sm-tracking); text-transform: uppercase; font-variant-numeric: tabular-nums; }
  .text-mono { font: var(--text-mono); letter-spacing: var(--text-mono-tracking); font-variant-numeric: tabular-nums; }
  .text-mono-sm { font: var(--text-mono-sm); letter-spacing: var(--text-mono-sm-tracking); font-variant-numeric: tabular-nums; }
  .text-code { font: var(--text-code); letter-spacing: var(--text-code-tracking); font-variant-numeric: tabular-nums; }
}

/* inlay base: reset, type defaults, elevation and small utilities. */
@layer inlay.base {
  /* Declared on every theme scope so nested themes recompute them. */
  :root,
  [data-theme] {
    --elev-1: 0 0 0 1px var(--line), 0 1px 2px rgb(0 0 0 / 0.05);
    --elev-2: 0 0 0 1px var(--line), 0 14px 32px -14px var(--shadow);
    --elev-3: 0 -1px 0 var(--line), 0 -20px 48px -24px var(--shadow);
    --shadow-hard: 4px 5px 0 var(--shadow);
    --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--signal);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* The checkbox tick, drawn in on-ink for each theme. */
  :root,
  [data-theme='light'] {
    --check-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  [data-theme='dark'] {
    --check-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23212529' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      --check-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23212529' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    background: var(--bg);
  }

  body {
    margin: 0;
    min-height: 100svh;
    background: var(--bg);
    color: var(--ink);
    font: var(--text-body);
    font-feature-settings: var(--font-sans-features);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  ::selection {
    background: var(--selection);
    color: var(--ink);
  }

  h1, h2, h3, h4, p, figure, blockquote, dl, dd {
    margin: 0;
  }

  a {
    color: inherit;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
  }

  button, input, textarea, select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    touch-action: manipulation;
  }

  :disabled {
    cursor: default;
  }

  img, svg, video, canvas {
    display: block;
    max-width: 100%;
  }

  svg {
    flex-shrink: 0;
  }

  /* Keyboard focus is the signal color. Pointer and touch never see a ring. */
  :focus {
    outline: none;
  }

  :focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }

  /* ---- type helpers ---- */
  .label {
    font: var(--text-label);
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
    color: var(--muted);
  }

  .mono {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
  }

  .tnum {
    font-variant-numeric: tabular-nums;
  }

  .muted { color: var(--muted); }
  .faint { color: var(--faint); }
  .signal-text { color: var(--signal-ink); }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* ---- surfaces ---- */
  /* A faint dot grid, as behind Relay's hero panels. */
  .dot-grid {
    background-image: radial-gradient(circle at 5.5px 5.5px, var(--line) 0.8px, transparent 1.2px);
    background-size: 11px 11px;
  }

  .hairline {
    border: 1px solid var(--line);
  }
}

/* inlay components. Variants are data attributes, states are ARIA. Everything
   lives in the inlay.components layer, so unlayered project CSS always wins.
   Icons are Phosphor: inline SVG (React, sprites) or the web font (<i class="ph ph-x">);
   both are sized here. */
@layer inlay.components {
  /* ------------------------------------------------------------ button */
  .button {
    --h: var(--size-control-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--h);
    min-width: var(--h);
    padding: 0 16px;
    border-radius: var(--radius-control);
    background: var(--paper);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    font: 500 14px/1 var(--font-sans);
    letter-spacing: -0.005em;
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
    transition: background-color var(--dur-quick) var(--ease-out), transform var(--dur-press) var(--ease-out),
      box-shadow var(--dur-quick) var(--ease-out), opacity var(--dur-quick);
  }
  .button svg { width: 18px; height: 18px; fill: currentColor; }
  .button .ph { font-size: 18px; }
  .button:active:not(:disabled) { transform: translateY(1px); }
  .button[data-variant='primary'] { background: var(--ink); color: var(--on-ink); box-shadow: none; }
  .button[data-variant='ghost'] { background: transparent; box-shadow: none; }
  .button[data-variant='signal'] { background: var(--signal); color: var(--on-signal); box-shadow: none; }
  .button[data-variant='on-dark'] {
    background: rgb(248 249 250 / 0.08);
    color: var(--on-dark);
    box-shadow: inset 0 0 0 1px rgb(248 249 250 / 0.16);
  }
  @media (hover: hover) {
    .button:hover:not(:disabled) { background: color-mix(in srgb, var(--paper), var(--ink) 5%); }
    .button[data-variant='primary']:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
    .button[data-variant='ghost']:hover:not(:disabled) { background: var(--hover); }
    .button[data-variant='signal']:hover:not(:disabled) { background: color-mix(in srgb, var(--signal) 88%, var(--ink)); }
  }
  .button[data-size='sm'] { --h: var(--size-control-sm); padding: 0 12px; font-size: 13px; gap: 6px; }
  .button[data-size='sm'] svg { width: 16px; height: 16px; }
  .button[data-size='sm'] .ph { font-size: 16px; }
  .button[data-size='lg'] { --h: var(--size-control-lg); padding: 0 20px; font-size: 15px; }
  .button[data-shape='square'] { width: var(--h); padding: 0; }
  .button[data-block] { width: 100%; }
  .button:disabled { opacity: 0.4; }
  .button .kbd { margin-right: -6px; }
  .button[data-variant='primary'] .kbd { background: rgb(255 255 255 / 0.12); color: inherit; box-shadow: none; }
  @media (pointer: coarse) {
    .button { font-size: 15px; }
    .button[data-size='sm'] { font-size: 14px; }
  }

  /* ------------------------------------------------------------ kbd */
  .kbd {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--radius-xs);
    background: var(--paper);
    color: var(--muted);
    box-shadow: inset 0 0 0 1px var(--line);
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0;
    text-transform: none;
  }
  /* Phones have no keyboard shortcuts to advertise. */
  @media (pointer: coarse) { .kbd { display: none; } }

  /* ------------------------------------------------------------ dot */
  /* A 6px square status dot, as in Relay. */
  .dot {
    --dot: var(--line-strong);
    display: inline-block;
    flex: none;
    width: var(--size-dot);
    height: var(--size-dot);
    border-radius: 1px;
    background: var(--dot);
  }
  .dot[data-tone='ink'] { --dot: var(--ink); }
  .dot[data-tone='muted'] { --dot: var(--muted); }
  .dot[data-tone='signal'] { --dot: var(--signal); }
  .dot[data-tone='on-dark'] { --dot: var(--on-dark); }
  .dot[data-data='1'] { --dot: var(--data-1); }
  .dot[data-data='2'] { --dot: var(--data-2); }
  .dot[data-data='3'] { --dot: var(--data-3); }
  .dot[data-data='4'] { --dot: var(--data-4); }

  /* ------------------------------------------------------------ pill */
  .pill {
    --tone: var(--ink);
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--radius-tag);
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 20%, transparent);
    font: var(--text-label-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .pill::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--pill-dot, var(--tone));
  }
  .pill[data-tone='muted'] { --tone: var(--muted); }
  .pill[data-tone='signal'] { --tone: var(--signal-ink); --pill-dot: var(--signal); }
  .pill[data-tone='solid'] { background: var(--ink); color: var(--on-ink); box-shadow: none; --pill-dot: var(--on-ink); }
  .pill[data-dot='none']::before { display: none; }

  /* ------------------------------------------------------------ chip */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-tag);
    background: var(--pale);
    color: var(--ink);
    font: 500 13px/1 var(--font-sans);
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px transparent;
    transition: background-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);
  }
  .chip svg { width: 15px; height: 15px; fill: currentColor; }
  .chip .ph { font-size: 15px; }
  .chip[aria-pressed='true'] { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
  @media (pointer: coarse) { .chip { height: 36px; font-size: 14px; } }

  /* ------------------------------------------------------------ segmented */
  .segmented {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-control);
    background: var(--pale);
  }
  .segmented > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: calc(var(--size-control-md) - 6px);
    padding: 0 12px;
    border-radius: calc(var(--radius-control) - 3px);
    color: var(--muted);
    font: 500 13px/1 var(--font-sans);
    transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
  }
  .segmented > button svg { width: 16px; height: 16px; fill: currentColor; }
  .segmented > button .ph { font-size: 16px; }
  .segmented > button[aria-checked='true'] {
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--elev-1);
  }
  .segmented .kbd { height: 18px; min-width: 18px; font-size: 10px; }
  .segmented[data-block] { display: grid; width: 100%; }
  @media (pointer: coarse) { .segmented > button { font-size: 14px; } }

  /* ------------------------------------------------------------ switch */
  .switch {
    position: relative;
    display: inline-block;
    flex: none;
    width: 44px;
    height: 26px;
    border-radius: 13px;
    background: var(--line-strong);
    transition: background-color var(--dur-quick) var(--ease-out);
  }
  /* Grow the hit area to 44px without changing the drawing. */
  .switch::before { content: ''; position: absolute; inset: -9px 0; }
  .switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
    transition: transform var(--dur-quick) var(--ease-out);
  }
  .switch[aria-checked='true'] { background: var(--ink); }
  .switch[aria-checked='true']::after { transform: translateX(18px); }
  .switch:disabled { opacity: 0.4; }

  /* ------------------------------------------------------------ check / radio */
  .check,
  .radio {
    appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    background: var(--paper);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    transition: box-shadow var(--dur-press) var(--ease-out), background-color var(--dur-press) var(--ease-out);
    cursor: pointer;
  }
  .check { border-radius: 5px; }
  .radio { border-radius: 50%; }
  .check:checked {
    background: var(--ink) var(--check-glyph) center / 18px no-repeat;
    box-shadow: none;
  }
  .check:indeterminate {
    background: var(--ink) linear-gradient(var(--on-ink), var(--on-ink)) center / 10px 2px no-repeat;
    box-shadow: none;
  }
  .radio:checked {
    box-shadow: inset 0 0 0 1.5px var(--ink);
    background: radial-gradient(circle, var(--ink) 0 4.5px, transparent 5px), var(--paper);
  }
  .check:disabled, .radio:disabled { opacity: 0.4; }
  .choice { display: flex; align-items: center; gap: 12px; min-height: var(--size-touch); font-size: 15px; cursor: pointer; }

  /* ------------------------------------------------------------ field */
  .field { display: grid; gap: 8px; }
  .field > .label { display: flex; justify-content: space-between; gap: 12px; }
  .input {
    width: 100%;
    height: var(--size-control-md);
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--well);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line);
    font: var(--text-body);
    transition: box-shadow var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out);
  }
  .input::placeholder { color: var(--faint); }
  .input:focus { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); outline: none; }
  textarea.input { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
  @media (hover: hover) { .input:hover:not(:focus) { box-shadow: inset 0 0 0 1px var(--line-strong); } }
  /* iOS zooms into inputs under 16px. */
  @media (pointer: coarse) { .input { font-size: 16px; } }
  .input-group { position: relative; display: block; }
  .input-group .input { padding-right: 56px; }
  .input-group .affix {
    position: absolute;
    top: 0;
    right: 14px;
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--muted);
    font: var(--text-mono-sm);
    pointer-events: none;
  }
  /* A leading Phosphor icon, as in a search field. */
  .input-group .lead {
    position: absolute;
    top: 0;
    left: 13px;
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--muted);
    pointer-events: none;
  }
  .input-group .lead svg { width: 18px; height: 18px; fill: currentColor; }
  .input-group .lead .ph { font-size: 18px; }
  .input-group:has(.lead) .input { padding-left: 40px; }
  .hint { font: var(--text-caption); color: var(--muted); }
  .field[data-invalid] .input { box-shadow: inset 0 0 0 1px var(--signal); }
  .field[data-invalid] .hint { color: var(--signal-ink); }

  /* ------------------------------------------------------------ slider */
  .slider {
    --fill: calc(var(--value, 50) * 1%);
    appearance: none;
    width: 100%;
    height: 32px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
  }
  .slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--ink) var(--fill), var(--line-strong) var(--fill));
  }
  .slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--ink) var(--fill), var(--line-strong) var(--fill));
  }
  .slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--line-strong), 0 1px 3px rgb(0 0 0 / 0.16);
  }
  .slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--line-strong), 0 1px 3px rgb(0 0 0 / 0.16);
  }
  .slider:focus-visible { outline: none; }
  .slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }

  /* ------------------------------------------------------------ stepper */
  .stepper {
    display: inline-flex;
    align-items: stretch;
    height: var(--size-control-md);
    border-radius: var(--radius-control);
    background: var(--paper);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .stepper > button {
    display: grid;
    place-items: center;
    width: var(--size-control-md);
    color: var(--ink);
    border-radius: var(--radius-control);
  }
  .stepper > button svg { width: 16px; height: 16px; fill: currentColor; }
  .stepper > button .ph { font-size: 16px; }
  .stepper > button:active { background: var(--press); }
  .stepper > output {
    display: grid;
    place-items: center;
    min-width: 52px;
    padding: 0 4px;
    border-inline: 1px solid var(--line);
    font: 500 14px/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  /* ------------------------------------------------------------ meter */
  /* Relay's segmented meter. Set --value (0..100) and --segments (default 30). */
  .meter {
    --segments: 30;
    --gap: 3px;
    --fill-color: var(--ink);
    --period: calc((100% + var(--gap)) / var(--segments));
    height: 14px;
    background: linear-gradient(to right, var(--fill-color) calc(var(--value, 0) * 1%),
      color-mix(in srgb, var(--line) 80%, transparent) 0);
    mask: repeating-linear-gradient(to right, #000 0 calc(var(--period) - var(--gap)), transparent 0 var(--period));
    transition: --value var(--dur-reading) var(--ease-in-out);
  }
  .meter[data-size='sm'] { height: 8px; --gap: 2px; }
  .meter[data-state='alert'] { --fill-color: var(--signal); }
  .meter[data-data='2'] { --fill-color: var(--data-2); }
  .meter[data-data='3'] { --fill-color: var(--data-3); }
  .meter[data-data='4'] { --fill-color: var(--data-4); }

  /* A plain bar for progress. Add data-indeterminate when the size is unknown. */
  .progress {
    position: relative;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: color-mix(in srgb, var(--line) 80%, transparent);
  }
  .progress::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--value, 0) * 1%);
    border-radius: inherit;
    background: var(--ink);
    transition: width var(--dur-reading) var(--ease-in-out);
  }
  .progress[data-indeterminate]::before {
    width: 32%;
    animation: inlay-progress 1.4s var(--ease-in-out) infinite;
  }
  @keyframes inlay-progress { from { transform: translateX(-100%); } to { transform: translateX(320%); } }

  .spinner {
    --size: 16px;
    width: var(--size);
    height: var(--size);
    flex: none;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
    border-top-color: currentColor;
    animation: inlay-spin 0.8s linear infinite;
  }
  @keyframes inlay-spin { to { transform: rotate(360deg); } }

  .skeleton {
    border-radius: 4px;
    background: var(--pale);
    animation: inlay-pulse 1.6s var(--ease-in-out) infinite;
  }
  @keyframes inlay-pulse { 50% { opacity: 0.5; } }
  @media (prefers-reduced-motion: reduce) {
    .progress[data-indeterminate]::before, .spinner, .skeleton { animation-duration: 0s; animation-iteration-count: 1; }
  }

  /* ------------------------------------------------------------ section title */
  .section-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
    font: var(--text-headline);
    letter-spacing: var(--text-headline-tracking);
  }
  .section-title .num { font: var(--text-label); letter-spacing: var(--text-label-tracking); color: var(--ink); }
  .section-title .trail {
    margin-left: auto;
    font: var(--text-label-sm);
    letter-spacing: var(--text-label-sm-tracking);
    text-transform: uppercase;
    color: var(--muted);
  }

  /* ------------------------------------------------------------ panels */
  .panel {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--paper);
  }
  .panel[data-tone='pale'] { background: var(--pale); }
  .panel[data-tone='dark'] { background: var(--dark); border-color: transparent; color: var(--on-dark); }
  .panel[data-tone='dark'] .label, .panel[data-tone='dark'] .muted { color: var(--on-dark-muted); }
  .panel[data-pad='sm'] { padding: 14px; }
  @media (max-width: 379.98px) { .panel { padding: 16px; } }

  /* A Phosphor icon on a tile. 40 in rows and cards, 64 in heroes and empty states. */
  .tile {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-control);
    background: var(--pale);
    color: var(--ink);
  }
  .tile svg { width: 20px; height: 20px; fill: currentColor; }
  .tile .ph { font-size: 20px; }
  .tile[data-size='lg'] { width: 64px; height: 64px; border-radius: var(--radius-panel); }
  .tile[data-size='lg'] svg { width: 32px; height: 32px; }
  .tile[data-size='lg'] .ph { font-size: 32px; }
  .panel[data-tone='pale'] .tile { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
  .panel[data-tone='dark'] .tile {
    background: rgb(248 249 250 / 0.08);
    box-shadow: inset 0 0 0 1px rgb(248 249 250 / 0.18);
    color: var(--on-dark);
  }

  /* A dark card that leads somewhere. */
  .action-card {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    text-align: left;
    text-decoration: none;
    transition: transform var(--dur-press) var(--ease-out);
  }
  .action-card:active { transform: translateY(1px); }
  .action-card .title { display: block; font: 500 15px/1.3 var(--font-sans); letter-spacing: -0.02em; }
  .action-card .sub { display: block; margin-top: 4px; font: var(--text-mono-sm); color: var(--on-dark-muted); }
  .action-card > svg { margin-left: auto; width: 20px; height: 20px; fill: currentColor; }
  .action-card > .ph { margin-left: auto; font-size: 20px; }

  .empty-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 32px 20px;
    text-align: center;
  }
  .empty-state .tile { margin-bottom: 6px; }
  .empty-state .title { font: var(--text-title-3); letter-spacing: var(--text-title-3-tracking); }
  .empty-state p { max-width: 300px; color: var(--muted); font: var(--text-body-sm); }
  .empty-state .button { margin-top: 8px; }

  .banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-control);
    background: var(--signal-pale);
    color: var(--signal-ink);
    font: var(--text-body-sm);
  }
  .banner svg { width: 18px; height: 18px; margin-top: 1px; fill: currentColor; }
  .banner .ph { font-size: 18px; margin-top: 1px; }
  .banner[data-tone='neutral'] { background: var(--pale); color: var(--ink); }

  /* ------------------------------------------------------------ list */
  .list {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--paper);
  }
  .row {
    --inset: 16px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 10px 16px;
    color: var(--ink);
    text-align: left;
    text-decoration: none;
    transition: background-color var(--dur-quick) var(--ease-out);
  }
  .row:has(> .row-icon) { --inset: 54px; }
  .row:has(> .tile) { --inset: 70px; }
  .row + .row::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--inset);
    right: 0;
    border-top: 1px solid var(--line);
  }
  button.row:active, a.row:active { background: var(--press); }
  @media (hover: hover) { button.row:hover, a.row:hover { background: var(--hover); } }
  .row-icon { width: 24px; height: 24px; fill: var(--muted); }
  .row > .ph.row-icon { width: auto; height: auto; font-size: 24px; color: var(--muted); }
  .row-main { flex: 1; min-width: 0; }
  .row-title {
    display: block;
    overflow: hidden;
    font: 500 15px/1.3 var(--font-sans);
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .row-meta { display: block; margin-top: 3px; color: var(--muted); font: var(--text-mono-sm); }
  .row-trail { display: flex; align-items: center; gap: 8px; color: var(--muted); font: var(--text-mono); }
  .row-trail > svg { width: 16px; height: 16px; fill: currentColor; }
  .row-trail > .ph { font-size: 16px; }
  .row[data-tone='signal'] { color: var(--signal-ink); }
  .row[data-tone='signal'] .row-icon { fill: var(--signal-ink); color: var(--signal-ink); }

  /* ------------------------------------------------------------ bars */
  .topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: calc(var(--size-bar-top) + var(--safe-top));
    padding: var(--safe-top) var(--gutter) 0;
    border-bottom: 1px solid var(--line);
  }
  .topbar .title { font: var(--text-title-3); letter-spacing: var(--text-title-3-tracking); }
  .topbar .crumbs { display: flex; align-items: center; gap: 10px; }
  .topbar .spacer { flex: 1; }
  .wordmark { font: 700 24px/1 var(--font-sans); letter-spacing: -0.06em; }

  .tabbar {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    height: calc(var(--size-bar-bottom) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  .tab {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    color: var(--muted);
    font: 500 10px/1 var(--font-sans);
    text-decoration: none;
  }
  .tab svg { width: 24px; height: 24px; fill: currentColor; }
  .tab .ph, .tab .ph-fill { font-size: 24px; }
  .tab[aria-current='page'] { color: var(--ink); font-weight: 700; }
  .tab[aria-current='page']::before {
    content: '';
    position: absolute;
    top: -1px;
    width: 18px;
    height: 2px;
    background: var(--ink);
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    width: var(--size-sidebar);
    padding: 30px 18px 24px 22px;
    border-right: 1px solid var(--line);
    background: var(--paper);
  }
  .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border-radius: 7px;
    color: var(--ink);
    font: 400 13px/1.2 var(--font-sans);
    text-align: left;
    text-decoration: none;
  }
  .nav-item svg { width: 18px; height: 18px; fill: var(--muted); }
  .nav-item .ph { font-size: 18px; color: var(--muted); }
  .nav-item .num { margin-left: auto; font: var(--text-label-sm); color: var(--muted); }
  .nav-item[aria-current='page'] { background: var(--bg); font-weight: 600; }
  .nav-item[aria-current='page'] svg { fill: var(--ink); }
  .nav-item[aria-current='page'] .ph, .nav-item[aria-current='page'] .num { color: var(--ink); }
  @media (hover: hover) { .nav-item:hover:not([aria-current='page']) { background: var(--hover); } }

  /* ------------------------------------------------------------ overlays */
  .scrim { position: fixed; inset: 0; background: var(--scrim); }

  /* Bottom sheets replace menus, popovers and most dialogs on phones. */
  .sheet {
    padding: 8px var(--gutter) calc(16px + var(--safe-bottom));
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    background: var(--raised);
    box-shadow: var(--elev-3);
  }
  .sheet-handle {
    width: var(--size-sheet-handle);
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 2px;
    background: var(--line-strong);
  }
  .sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; }
  .sheet-header .title { font: var(--text-title-3); letter-spacing: var(--text-title-3-tracking); }
  .sheet .list { border: 0; border-radius: 0; background: transparent; margin: 0 calc(var(--gutter) * -1); }
  .sheet .row { padding-inline: var(--gutter); }

  .menu {
    min-width: 220px;
    padding: 6px;
    border-radius: var(--radius-overlay);
    background: var(--raised);
    box-shadow: var(--elev-2);
  }
  .menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    font: 400 13px/1 var(--font-sans);
    text-align: left;
  }
  .menu-item svg { width: 16px; height: 16px; fill: var(--muted); }
  .menu-item .ph { font-size: 16px; color: var(--muted); }
  .menu-item .kbd { margin-left: auto; }
  @media (pointer: coarse) { .menu-item { height: 44px; font-size: 15px; } }
  .menu-item[data-active], .menu-item:focus-visible { background: var(--hover); outline: none; }
  @media (hover: hover) { .menu-item:hover { background: var(--hover); } }
  .menu-item[data-tone='signal'] { color: var(--signal-ink); }
  .menu-item[data-tone='signal'] svg { fill: var(--signal-ink); }
  .menu-item[data-tone='signal'] .ph { color: var(--signal-ink); }
  .menu-sep { height: 1px; margin: 6px -6px; background: var(--line); }
  .menu .label { padding: 8px 10px 6px; }

  .dialog {
    width: min(400px, 100% - 2 * var(--gutter));
    padding: 24px;
    border-radius: var(--radius-overlay);
    background: var(--raised);
    box-shadow: var(--elev-2);
  }

  .toast {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 4px 6px 4px 16px;
    border-radius: var(--radius-control);
    background: var(--dark);
    color: var(--on-dark);
    box-shadow: 0 0 0 1px rgb(248 249 250 / 0.06), 0 14px 32px -12px var(--shadow);
    font: var(--text-body-sm);
  }
  .toast .grow { flex: 1; }
  .toast .button { --h: 36px; color: var(--on-dark); font: var(--text-label); letter-spacing: var(--text-label-tracking); text-transform: uppercase; }

  /* ------------------------------------------------------------ data */
  .reading { display: flex; align-items: baseline; gap: 4px; }
  .reading .value { font: var(--text-reading); letter-spacing: var(--text-reading-tracking); font-variant-numeric: tabular-nums; }
  .reading .unit { font: var(--text-mono-sm); color: var(--muted); }
  .reading[data-state='alert'] .value { color: var(--signal-ink); }

  .sparkline { width: 100%; height: 64px; overflow: visible; }
  .sparkline .grid { stroke: var(--line); stroke-width: 0.7; }
  .sparkline .line { fill: none; stroke: var(--spark, var(--ink)); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .sparkline .area { fill: var(--spark, var(--ink)); opacity: 0.16; }
  .sparkline .marker { fill: var(--spark, var(--ink)); }

  .terminal {
    padding: 14px 16px;
    overflow-x: auto;
    border-radius: var(--radius-control);
    background: var(--terminal);
    color: var(--on-terminal);
    font: var(--text-code);
  }
  .terminal .muted { color: var(--on-terminal-muted); }
}

@property --value {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}