/* Consumers override this contract with unlayered CSS. */
@layer armature.tokens, armature.base, armature.components;

@layer armature.tokens {
  :root {
    color-scheme: light;
    --armature-rail-surface: #173c32;
    --armature-rail-text: #deeadf;
    --armature-rail-muted: #c1d0c4;
    --armature-rail-divider: #496256;
    --armature-rail-current-surface: #e4eddb;
    --armature-rail-current-text: #163d30;
    --armature-rail-focus: #f1bf64;
    --armature-rail-current-focus: #845600;
    --armature-rail-width: 210px;
    --armature-rail-width-narrow: 155px;
    --armature-nav-width: 190px;
    --armature-space-shell: 28px;
    --armature-space-top-bar: 15px;
    --armature-space-nav: 9px;
    --armature-space-rail-gap: 5px;
    --armature-space-panel-content: 22px;
    --armature-text-brand: 24px;
    --armature-weight-brand: 750;
    --armature-tracking-brand: 1px;
    --armature-text-eyebrow: 10px;
    --armature-tracking-eyebrow: 1.6px;
    --armature-text-page-heading: 30px;
    --armature-shell-height: 100dvh;
    --armature-target-enhanced: 44px;
    --armature-ink: #233b34;
    --armature-muted: #58695e;
    --armature-accent: #245e49;
    --armature-on-accent: #fffefb;
    --armature-paper: #fffefb;
    --armature-canvas: #f4f2e9;
    --armature-line: #c5cfc2;
    --armature-control-border: #687c6c;
    --armature-input-border: #687c6c;
    --armature-focus: #845600;
    --armature-success-bg: #e6efe2;
    --armature-warning-bg: #fbefd6;
    --armature-error-bg: #fae6e0;
    --armature-success-emphasis: #2d5a3b;
    --armature-warning-emphasis: #6b4f12;
    --armature-error-emphasis: #9c3b2f;
    --armature-stripe: #f7f8f2;
    --armature-hover: #edf2e7;
    --armature-selected: #e2ecd9;
    --armature-selected-cue: #245e49;
    --armature-image-backdrop: #fafaf8;
    --armature-font-sans: "Barlow", system-ui, sans-serif;
    --armature-font-mono: ui-monospace, monospace;
    --armature-text-small: 0.75rem;
    --armature-text-base: 0.875rem;
    --armature-text-large: 1rem;
    --armature-text-heading: 1.25rem;
    --armature-line-height: 1.5;
    --armature-weight-normal: 400;
    --armature-weight-emphasis: 600;
    --armature-layout-min-width: 12rem;
    --armature-space-zero: 0px;
    --armature-space-1: 0.25rem;
    --armature-space-2: 0.5rem;
    --armature-space-3: 0.75rem;
    --armature-space-4: 1rem;
    --armature-space-6: 1.5rem;
    --armature-space-8: 2rem;
    --armature-radius-small: 0.25rem;
    --armature-radius-base: 0.3125rem;
    --armature-border-width: 1px;
    --armature-hidden-size: 1px;
    --armature-hidden-inset: 50%;
    --armature-duration-fast: 120ms;
    --armature-duration-base: 200ms;
    --armature-duration-reduced: 0s;
    --armature-iterations-reduced: 1;
    --armature-easing: ease-out;
    --armature-control-height: 36px;
    --armature-target-size: 24px;
    --armature-focus-width: 3px;
    --armature-focus-offset: 3px;
    --armature-text-micro: 0.6875rem;
    --armature-text-control: 0.8125rem;
    --armature-radius-panel: 0.375rem;
    --armature-space-half: 0.125rem;
    --armature-space-control: 0.375rem;
    --armature-space-input: 0.4375rem;
    --armature-space-detail: 0.625rem;
    --armature-space-notice: 0.6875rem;
    --armature-space-text: 0.875rem;
    --armature-space-panel: 1.25rem;
    --armature-control-height-compact: 32px;
    --armature-table-cell-padding: 0.75rem 1rem;
    --armature-table-cell-padding-compact: 0.375rem 1rem;
    --armature-table-row-height: 44px;
    --armature-table-row-height-compact: 34px;
    --armature-search-width: 15rem;
    --armature-inspector-width: 18.125rem;
    --armature-cue-width: 3px;
    --armature-chevron-size: 5px;
    --armature-chevron-angle: 45deg;
    --armature-chevron-stop: 50%;
    --armature-sort-opacity: 0.6;
    --armature-opacity-full: 1;
    --armature-press-offset: 1px;
    --armature-hover-mix: 5%;
  }

  /* Keep specificity equal to :root so later preference overrides win. */
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-armature-theme="light"])) {
      color-scheme: dark;
      --armature-rail-surface: #173c32;
    --armature-rail-text: #deeadf;
    --armature-rail-muted: #c1d0c4;
    --armature-rail-divider: #496256;
    --armature-rail-current-surface: #e4eddb;
    --armature-rail-current-text: #163d30;
    --armature-rail-focus: #f1bf64;
    --armature-rail-current-focus: #845600;
    --armature-rail-width: 210px;
    --armature-rail-width-narrow: 155px;
    --armature-nav-width: 190px;
    --armature-space-shell: 28px;
    --armature-space-top-bar: 15px;
    --armature-space-nav: 9px;
    --armature-space-rail-gap: 5px;
    --armature-space-panel-content: 22px;
    --armature-text-brand: 24px;
    --armature-weight-brand: 750;
    --armature-tracking-brand: 1px;
    --armature-text-eyebrow: 10px;
    --armature-tracking-eyebrow: 1.6px;
    --armature-text-page-heading: 30px;
    --armature-shell-height: 100dvh;
    --armature-target-enhanced: 44px;
    --armature-ink: #e1eadf;
      --armature-muted: #bbccbc;
      --armature-accent: #a8d3b4;
      --armature-on-accent: #172a23;
      --armature-paper: #20382f;
      --armature-canvas: #172a23;
      --armature-line: #657a6b;
      --armature-control-border: #9aaf9f;
      --armature-input-border: #9aaf9f;
      --armature-focus: #f1bf64;
      --armature-success-bg: #294a36;
      --armature-warning-bg: #514329;
      --armature-error-bg: #55332f;
      --armature-success-emphasis: #b5dcbf;
      --armature-warning-emphasis: #f0d08f;
      --armature-error-emphasis: #f4b3a7;
      --armature-stripe: #243d32;
      --armature-hover: #304f3e;
      --armature-selected: #365c43;
      --armature-selected-cue: #a8d3b4;
      --armature-image-backdrop: #1c3229;
      --armature-font-sans: "Barlow", system-ui, sans-serif;
      --armature-font-mono: ui-monospace, monospace;
      --armature-text-small: 0.75rem;
      --armature-text-base: 0.875rem;
      --armature-text-large: 1rem;
      --armature-text-heading: 1.25rem;
      --armature-line-height: 1.5;
      --armature-weight-normal: 400;
      --armature-weight-emphasis: 600;
      --armature-layout-min-width: 12rem;
    --armature-space-zero: 0px;
      --armature-space-1: 0.25rem;
      --armature-space-2: 0.5rem;
      --armature-space-3: 0.75rem;
      --armature-space-4: 1rem;
      --armature-space-6: 1.5rem;
      --armature-space-8: 2rem;
      --armature-radius-small: 0.25rem;
      --armature-radius-base: 0.3125rem;
      --armature-border-width: 1px;
      --armature-hidden-size: 1px;
      --armature-hidden-inset: 50%;
      --armature-duration-fast: 120ms;
      --armature-duration-base: 200ms;
      --armature-duration-reduced: 0s;
      --armature-iterations-reduced: 1;
      --armature-easing: ease-out;
      --armature-control-height: 36px;
      --armature-target-size: 24px;
      --armature-focus-width: 3px;
      --armature-focus-offset: 3px;
      --armature-text-micro: 0.6875rem;
      --armature-text-control: 0.8125rem;
      --armature-radius-panel: 0.375rem;
      --armature-space-half: 0.125rem;
      --armature-space-control: 0.375rem;
      --armature-space-input: 0.4375rem;
      --armature-space-detail: 0.625rem;
      --armature-space-notice: 0.6875rem;
      --armature-space-text: 0.875rem;
      --armature-space-panel: 1.25rem;
      --armature-control-height-compact: 32px;
      --armature-table-cell-padding: 0.75rem 1rem;
      --armature-table-cell-padding-compact: 0.375rem 1rem;
      --armature-table-row-height: 44px;
      --armature-table-row-height-compact: 34px;
      --armature-search-width: 15rem;
      --armature-inspector-width: 18.125rem;
      --armature-cue-width: 3px;
      --armature-chevron-size: 5px;
      --armature-chevron-angle: 45deg;
      --armature-chevron-stop: 50%;
      --armature-sort-opacity: 0.6;
      --armature-opacity-full: 1;
      --armature-press-offset: 1px;
    --armature-hover-mix: 5%;
    }
  }

  [data-armature-theme="dark"] {
    color-scheme: dark;
    --armature-rail-surface: #173c32;
    --armature-rail-text: #deeadf;
    --armature-rail-muted: #c1d0c4;
    --armature-rail-divider: #496256;
    --armature-rail-current-surface: #e4eddb;
    --armature-rail-current-text: #163d30;
    --armature-rail-focus: #f1bf64;
    --armature-rail-current-focus: #845600;
    --armature-rail-width: 210px;
    --armature-rail-width-narrow: 155px;
    --armature-nav-width: 190px;
    --armature-space-shell: 28px;
    --armature-space-top-bar: 15px;
    --armature-space-nav: 9px;
    --armature-space-rail-gap: 5px;
    --armature-space-panel-content: 22px;
    --armature-text-brand: 24px;
    --armature-weight-brand: 750;
    --armature-tracking-brand: 1px;
    --armature-text-eyebrow: 10px;
    --armature-tracking-eyebrow: 1.6px;
    --armature-text-page-heading: 30px;
    --armature-shell-height: 100dvh;
    --armature-target-enhanced: 44px;
    --armature-ink: #e1eadf;
    --armature-muted: #bbccbc;
    --armature-accent: #a8d3b4;
    --armature-on-accent: #172a23;
    --armature-paper: #20382f;
    --armature-canvas: #172a23;
    --armature-line: #657a6b;
    --armature-control-border: #9aaf9f;
    --armature-input-border: #9aaf9f;
    --armature-focus: #f1bf64;
    --armature-success-bg: #294a36;
    --armature-warning-bg: #514329;
    --armature-error-bg: #55332f;
    --armature-success-emphasis: #b5dcbf;
    --armature-warning-emphasis: #f0d08f;
    --armature-error-emphasis: #f4b3a7;
    --armature-stripe: #243d32;
    --armature-hover: #304f3e;
    --armature-selected: #365c43;
    --armature-selected-cue: #a8d3b4;
    --armature-image-backdrop: #1c3229;
    --armature-font-sans: "Barlow", system-ui, sans-serif;
    --armature-font-mono: ui-monospace, monospace;
    --armature-text-small: 0.75rem;
    --armature-text-base: 0.875rem;
    --armature-text-large: 1rem;
    --armature-text-heading: 1.25rem;
    --armature-line-height: 1.5;
    --armature-weight-normal: 400;
    --armature-weight-emphasis: 600;
    --armature-layout-min-width: 12rem;
    --armature-space-zero: 0px;
    --armature-space-1: 0.25rem;
    --armature-space-2: 0.5rem;
    --armature-space-3: 0.75rem;
    --armature-space-4: 1rem;
    --armature-space-6: 1.5rem;
    --armature-space-8: 2rem;
    --armature-radius-small: 0.25rem;
    --armature-radius-base: 0.3125rem;
    --armature-border-width: 1px;
    --armature-hidden-size: 1px;
    --armature-hidden-inset: 50%;
    --armature-duration-fast: 120ms;
    --armature-duration-base: 200ms;
    --armature-duration-reduced: 0s;
    --armature-iterations-reduced: 1;
    --armature-easing: ease-out;
    --armature-control-height: 36px;
    --armature-target-size: 24px;
    --armature-focus-width: 3px;
    --armature-focus-offset: 3px;
    --armature-text-micro: 0.6875rem;
    --armature-text-control: 0.8125rem;
    --armature-radius-panel: 0.375rem;
    --armature-space-half: 0.125rem;
    --armature-space-control: 0.375rem;
    --armature-space-input: 0.4375rem;
    --armature-space-detail: 0.625rem;
    --armature-space-notice: 0.6875rem;
    --armature-space-text: 0.875rem;
    --armature-space-panel: 1.25rem;
    --armature-control-height-compact: 32px;
    --armature-table-cell-padding: 0.75rem 1rem;
    --armature-table-cell-padding-compact: 0.375rem 1rem;
    --armature-table-row-height: 44px;
    --armature-table-row-height-compact: 34px;
    --armature-search-width: 15rem;
    --armature-inspector-width: 18.125rem;
    --armature-cue-width: 3px;
    --armature-chevron-size: 5px;
    --armature-chevron-angle: 45deg;
    --armature-chevron-stop: 50%;
    --armature-sort-opacity: 0.6;
    --armature-opacity-full: 1;
    --armature-press-offset: 1px;
    --armature-hover-mix: 5%;
  }

  /* Explicit light also works inside a dark-themed subtree. */
  [data-armature-theme="light"] {
    color-scheme: light;
    --armature-rail-surface: #173c32;
    --armature-rail-text: #deeadf;
    --armature-rail-muted: #c1d0c4;
    --armature-rail-divider: #496256;
    --armature-rail-current-surface: #e4eddb;
    --armature-rail-current-text: #163d30;
    --armature-rail-focus: #f1bf64;
    --armature-rail-current-focus: #845600;
    --armature-rail-width: 210px;
    --armature-rail-width-narrow: 155px;
    --armature-nav-width: 190px;
    --armature-space-shell: 28px;
    --armature-space-top-bar: 15px;
    --armature-space-nav: 9px;
    --armature-space-rail-gap: 5px;
    --armature-space-panel-content: 22px;
    --armature-text-brand: 24px;
    --armature-weight-brand: 750;
    --armature-tracking-brand: 1px;
    --armature-text-eyebrow: 10px;
    --armature-tracking-eyebrow: 1.6px;
    --armature-text-page-heading: 30px;
    --armature-shell-height: 100dvh;
    --armature-target-enhanced: 44px;
    --armature-ink: #233b34;
    --armature-muted: #58695e;
    --armature-accent: #245e49;
    --armature-on-accent: #fffefb;
    --armature-paper: #fffefb;
    --armature-canvas: #f4f2e9;
    --armature-line: #c5cfc2;
    --armature-control-border: #687c6c;
    --armature-input-border: #687c6c;
    --armature-focus: #845600;
    --armature-success-bg: #e6efe2;
    --armature-warning-bg: #fbefd6;
    --armature-error-bg: #fae6e0;
    --armature-success-emphasis: #2d5a3b;
    --armature-warning-emphasis: #6b4f12;
    --armature-error-emphasis: #9c3b2f;
    --armature-stripe: #f7f8f2;
    --armature-hover: #edf2e7;
    --armature-selected: #e2ecd9;
    --armature-selected-cue: #245e49;
    --armature-image-backdrop: #fafaf8;
    --armature-font-sans: "Barlow", system-ui, sans-serif;
    --armature-font-mono: ui-monospace, monospace;
    --armature-text-small: 0.75rem;
    --armature-text-base: 0.875rem;
    --armature-text-large: 1rem;
    --armature-text-heading: 1.25rem;
    --armature-line-height: 1.5;
    --armature-weight-normal: 400;
    --armature-weight-emphasis: 600;
    --armature-layout-min-width: 12rem;
    --armature-space-zero: 0px;
    --armature-space-1: 0.25rem;
    --armature-space-2: 0.5rem;
    --armature-space-3: 0.75rem;
    --armature-space-4: 1rem;
    --armature-space-6: 1.5rem;
    --armature-space-8: 2rem;
    --armature-radius-small: 0.25rem;
    --armature-radius-base: 0.3125rem;
    --armature-border-width: 1px;
    --armature-hidden-size: 1px;
    --armature-hidden-inset: 50%;
    --armature-duration-fast: 120ms;
    --armature-duration-base: 200ms;
    --armature-duration-reduced: 0s;
    --armature-iterations-reduced: 1;
    --armature-easing: ease-out;
    --armature-control-height: 36px;
    --armature-target-size: 24px;
    --armature-focus-width: 3px;
    --armature-focus-offset: 3px;
    --armature-text-micro: 0.6875rem;
    --armature-text-control: 0.8125rem;
    --armature-radius-panel: 0.375rem;
    --armature-space-half: 0.125rem;
    --armature-space-control: 0.375rem;
    --armature-space-input: 0.4375rem;
    --armature-space-detail: 0.625rem;
    --armature-space-notice: 0.6875rem;
    --armature-space-text: 0.875rem;
    --armature-space-panel: 1.25rem;
    --armature-control-height-compact: 32px;
    --armature-table-cell-padding: 0.75rem 1rem;
    --armature-table-cell-padding-compact: 0.375rem 1rem;
    --armature-table-row-height: 44px;
    --armature-table-row-height-compact: 34px;
    --armature-search-width: 15rem;
    --armature-inspector-width: 18.125rem;
    --armature-cue-width: 3px;
    --armature-chevron-size: 5px;
    --armature-chevron-angle: 45deg;
    --armature-chevron-stop: 50%;
    --armature-sort-opacity: 0.6;
    --armature-opacity-full: 1;
    --armature-press-offset: 1px;
    --armature-hover-mix: 5%;
  }

  @media (pointer: coarse), (max-width: 40rem) {
    :root, [data-armature-theme] {
      --armature-control-height: 44px;
      --armature-target-size: 44px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root, [data-armature-theme] {
      --armature-duration-fast: var(--armature-duration-reduced);
      --armature-duration-base: var(--armature-duration-reduced);
    }
  }

  @media (forced-colors: active) {
    :root, [data-armature-theme] {
      --armature-rail-surface: Canvas;
      --armature-rail-text: CanvasText;
      --armature-rail-muted: CanvasText;
      --armature-rail-divider: CanvasText;
      --armature-rail-current-surface: Canvas;
      --armature-rail-current-text: CanvasText;
      --armature-rail-focus: Highlight;
      --armature-rail-current-focus: Highlight;
      --armature-ink: CanvasText;
      --armature-muted: CanvasText;
      --armature-accent: LinkText;
      --armature-on-accent: Canvas;
      --armature-paper: Canvas;
      --armature-canvas: Canvas;
      --armature-line: CanvasText;
      --armature-control-border: ButtonText;
      --armature-input-border: ButtonText;
      --armature-focus: Highlight;
      --armature-success-bg: Canvas;
      --armature-warning-bg: Canvas;
      --armature-error-bg: Canvas;
      --armature-success-emphasis: CanvasText;
      --armature-warning-emphasis: CanvasText;
      --armature-error-emphasis: CanvasText;
      --armature-stripe: Canvas;
      --armature-hover: Canvas;
      --armature-selected: Canvas;
      --armature-selected-cue: Highlight;
      --armature-image-backdrop: Canvas;
    }
  }
}

@layer armature.base {
  :focus-visible {
    outline: var(--armature-focus-width) solid var(--armature-focus);
    outline-offset: var(--armature-focus-offset);
  }

  .armature-sr-only {
    position: absolute;
    width: var(--armature-hidden-size);
    height: var(--armature-hidden-size);
    padding: var(--armature-space-zero);
    border-width: var(--armature-space-zero);
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(var(--armature-hidden-inset));
  }

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

  @media (forced-colors: active) {
    /* Focus and selection both map to Highlight here, so they differ by shape:
       focus is a solid ring outside, selection a solid ring inside, and a
       focused selection a double ring outside. */
    [aria-selected="true"] {
      outline: var(--armature-focus-width) solid var(--armature-selected-cue);
      outline-offset: calc(var(--armature-focus-width) * -1);
    }

    [aria-selected="true"]:focus-visible {
      outline: calc(var(--armature-focus-width) * 2) double var(--armature-focus);
      outline-offset: var(--armature-focus-offset);
    }

    [aria-invalid="true"] {
      outline: var(--armature-border-width) dashed var(--armature-error-emphasis);
      outline-offset: var(--armature-focus-offset);
    }

    [aria-invalid="true"]:focus-visible {
      outline: var(--armature-focus-width) solid var(--armature-focus);
    }
  }
}

@layer armature.components {
  .armature-app-shell { container: armature-shell / inline-size; min-height: var(--armature-shell-height); background: var(--armature-canvas); color: var(--armature-ink); font-family: var(--armature-font-sans); font-size: var(--armature-text-base); line-height: var(--armature-line-height); }
  .armature-app-shell-grid { display: grid; grid-template-columns: var(--armature-rail-width) minmax(0, 1fr); min-height: inherit; }
  .armature-app-shell *, .armature-panel, .armature-side-nav * { box-sizing: border-box; }
  .armature-app-shell-main, .armature-app-shell-content, .armature-panel { min-width: var(--armature-space-zero); }
  .armature-app-shell-content { padding: var(--armature-space-zero) var(--armature-space-shell) var(--armature-space-shell); }
  .armature-skip-link { position: absolute; z-index: 1; inset-inline-start: var(--armature-space-4); inset-block-start: var(--armature-space-4); padding: var(--armature-space-3); background: var(--armature-paper); color: var(--armature-ink); clip-path: inset(var(--armature-hidden-inset)); }
  .armature-skip-link:focus { clip-path: none; }
  .armature-eyebrow { font-family: var(--armature-font-sans); line-height: var(--armature-line-height); margin: var(--armature-space-zero); font-size: var(--armature-text-eyebrow); font-weight: var(--armature-weight-emphasis); letter-spacing: var(--armature-tracking-eyebrow); text-transform: uppercase; color: var(--armature-muted); }
  .armature-side-nav { display: flex; flex-direction: column; gap: var(--armature-space-rail-gap); padding: var(--armature-space-6) var(--armature-space-text); background: var(--armature-rail-surface); color: var(--armature-rail-text); font-family: var(--armature-font-sans); }
  .armature-side-nav-brand { padding: var(--armature-space-zero) var(--armature-space-3) var(--armature-space-6); margin-bottom: var(--armature-space-4); border-bottom: var(--armature-border-width) solid var(--armature-rail-divider); font-size: var(--armature-text-brand); font-weight: var(--armature-weight-brand); letter-spacing: var(--armature-tracking-brand); overflow-wrap: anywhere; }
  .armature-side-nav-brand > a { display: block; color: var(--armature-rail-text); font-size: inherit; font-weight: inherit; line-height: inherit; text-decoration: none; }
  .armature-side-nav-brand small { display: block; font-size: var(--armature-text-small); font-weight: var(--armature-weight-normal); letter-spacing: normal; color: var(--armature-rail-muted); }
  .armature-side-nav > .armature-eyebrow { color: var(--armature-rail-muted); padding: var(--armature-space-detail) var(--armature-space-3); }
  .armature-side-nav nav { display: flex; flex-direction: column; gap: var(--armature-space-rail-gap); }
  .armature-side-nav nav > a { display: flex; align-items: center; min-height: max(var(--armature-target-enhanced), var(--armature-target-size)); padding: var(--armature-space-nav) var(--armature-space-3); border-radius: var(--armature-radius-base); color: var(--armature-rail-text); text-decoration: none; transition: outline-color var(--armature-duration-fast) var(--armature-easing); }
  .armature-side-nav nav > a:hover { outline: var(--armature-border-width) solid var(--armature-rail-muted); outline-offset: calc(var(--armature-border-width) * -1); }
  .armature-side-nav nav > a[aria-current="page"] { background: var(--armature-rail-current-surface); color: var(--armature-rail-current-text); font-weight: var(--armature-weight-emphasis); }
  .armature-side-nav :focus-visible { outline-color: var(--armature-rail-focus); }
  .armature-side-nav nav > a[aria-current="page"]:focus-visible { outline-color: var(--armature-rail-current-focus); outline-offset: calc(var(--armature-focus-width) * -1); }
  .armature-side-nav nav > a:active { transform: translateY(var(--armature-press-offset)); }
  .armature-side-nav-footnote { margin-top: auto; padding: var(--armature-space-6) var(--armature-space-3) var(--armature-space-zero); font-size: var(--armature-text-micro); color: var(--armature-rail-muted); }
  .armature-top-bar { font-family: var(--armature-font-sans); line-height: var(--armature-line-height); padding: var(--armature-space-top-bar) var(--armature-space-shell); background: var(--armature-paper); border-bottom: var(--armature-border-width) solid var(--armature-line); font-size: var(--armature-text-micro); color: var(--armature-muted); }
  .armature-top-bar > .armature-cluster, .armature-page-heading > .armature-cluster, .armature-panel > .armature-cluster { justify-content: space-between; }
  .armature-page-heading { color: var(--armature-ink); font-family: var(--armature-font-sans); line-height: var(--armature-line-height); padding: var(--armature-space-6) var(--armature-space-shell) var(--armature-space-4); }
  .armature-page-heading .armature-eyebrow { margin-bottom: var(--armature-space-2); }
  .armature-page-heading h1 { margin: var(--armature-space-zero); font-size: var(--armature-text-page-heading); font-weight: var(--armature-weight-emphasis); overflow-wrap: anywhere; }
  .armature-theme-switch { color: var(--armature-muted); font-family: var(--armature-font-sans); font-size: var(--armature-text-micro); line-height: var(--armature-line-height); display: flex; flex-wrap: wrap; gap: var(--armature-space-2); align-items: center; }
  .armature-theme-switch select { min-width: var(--armature-space-zero); }
  .armature-panel { color: var(--armature-ink); font-family: var(--armature-font-sans); font-size: var(--armature-text-base); line-height: var(--armature-line-height); background: var(--armature-paper); border: var(--armature-border-width) solid var(--armature-line); border-radius: var(--armature-radius-panel); padding: var(--armature-space-panel-content); }
  .armature-panel h2 { font-size: var(--armature-text-heading); margin: var(--armature-space-zero); }
  .armature-panel > .armature-cluster { margin-bottom: var(--armature-space-4); }
  .armature-grouped-nav { color: var(--armature-ink); font-family: var(--armature-font-sans); font-size: var(--armature-text-base); line-height: var(--armature-line-height); }
  .armature-grouped-nav-links { border-inline-end: var(--armature-border-width) solid var(--armature-line); padding-inline-end: var(--armature-space-text); }
  .armature-grouped-nav-links section + section { margin-top: var(--armature-space-4); }
  .armature-grouped-nav-links .armature-eyebrow { font-size: var(--armature-text-micro); letter-spacing: var(--armature-tracking-brand); }
  .armature-grouped-nav-links a { display: flex; align-items: center; min-height: max(var(--armature-target-enhanced), var(--armature-target-size)); padding: var(--armature-space-input) var(--armature-space-nav); border-radius: var(--armature-radius-small); font-size: var(--armature-text-control); text-decoration: none; overflow-wrap: anywhere; }
  .armature-grouped-nav-links a:hover { background: var(--armature-hover); }
  .armature-grouped-nav-links a[aria-current="page"] { background: var(--armature-selected); font-weight: var(--armature-weight-emphasis); box-shadow: inset var(--armature-cue-width) 0 var(--armature-selected-cue); }
  .armature-grouped-nav-links a:active { transform: translateY(var(--armature-press-offset)); }
  .armature-grouped-nav-picker { display: none; }
  .armature-grouped-nav-picker p { margin: var(--armature-space-zero); color: var(--armature-muted); font-size: var(--armature-text-micro); }
  /* The content area is also the layout a grouped list collapses against: a
     list cannot tell from its own width whether it sits in a side column or
     is stacked across a narrow page. Consumers without an app shell can name
     an ancestor armature-nav-layout themselves. */
  .armature-app-shell-content { container: armature-content armature-nav-layout / inline-size; }
  .armature-catalogue-explorer { display: grid; grid-template-columns: var(--armature-nav-width) minmax(0, 1fr); gap: var(--armature-space-6); }
  .armature-catalogue-detail { min-width: var(--armature-space-zero); }
  .armature-catalogue-panels { container: armature-panels / inline-size; }
  .armature-catalogue-panel-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--armature-space-4); }
  @container armature-shell (width < 800px) {
    .armature-app-shell-grid { grid-template-columns: var(--armature-rail-width-narrow) minmax(0, 1fr); }
  }
  @container armature-nav-layout (width < 760px) {
    .armature-grouped-nav-links { display: none; }
    .armature-grouped-nav-picker { display: grid; gap: var(--armature-space-2); }
  }
  @container armature-content (width < 760px) {
    .armature-catalogue-explorer { grid-template-columns: minmax(0, 1fr); }
  }
  @container armature-panels (width < 760px) {
    .armature-catalogue-panel-items { grid-template-columns: minmax(0, 1fr); }
  }
  @container armature-shell (width < 520px) {
    .armature-app-shell-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .armature-side-nav { flex-direction: row; flex-wrap: wrap; padding: var(--armature-space-3); }
    .armature-side-nav-brand { flex-basis: 100%; padding: var(--armature-space-zero) var(--armature-space-3); margin: var(--armature-space-zero); border: none; }
    .armature-side-nav-brand small, .armature-side-nav > .armature-eyebrow, .armature-side-nav-footnote { display: none; }
    .armature-side-nav nav { flex-direction: row; flex-wrap: wrap; }
    .armature-app-shell-content { padding-inline: var(--armature-space-4); }
    .armature-page-heading, .armature-top-bar { padding-inline: var(--armature-space-4); }
  }
  @media (forced-colors: active) {
    .armature-grouped-nav-links a[aria-current="page"], .armature-side-nav a[aria-current="page"] { border: var(--armature-border-width) solid var(--armature-selected-cue); }
  }

  .armature-button, .armature-input, .armature-select, .armature-textarea {
    box-sizing: border-box;
    min-height: max(var(--armature-control-height), var(--armature-target-size));
    min-width: var(--armature-target-size);
    padding: var(--armature-space-input) var(--armature-space-detail);
    border: var(--armature-border-width) solid var(--armature-control-border);
    border-radius: var(--armature-radius-base);
    font-family: var(--armature-font-sans);
    font-size: var(--armature-text-control);
    line-height: var(--armature-line-height);
    color: var(--armature-ink);
    background: var(--armature-paper);
  }

  .armature-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--armature-space-control);
    min-height: max(var(--armature-control-height-compact), var(--armature-target-size));
    padding: var(--armature-space-control) var(--armature-space-3);
    cursor: pointer;
    font-weight: var(--armature-weight-emphasis);
    border-color: var(--armature-control-border);
    transition: box-shadow var(--armature-duration-fast) var(--armature-easing);
  }

  .armature-button-primary {
    color: var(--armature-on-accent);
    background: var(--armature-accent);
  }

  .armature-button:hover {
    background: color-mix(in srgb, var(--armature-paper), var(--armature-ink) var(--armature-hover-mix));
    box-shadow: inset var(--armature-space-zero) var(--armature-space-zero) var(--armature-space-zero) var(--armature-border-width) var(--armature-control-border);
  }

  .armature-button-primary:hover { background: color-mix(in srgb, var(--armature-accent), var(--armature-ink) var(--armature-hover-mix)); }
  .armature-button:active { transform: translateY(var(--armature-press-offset)); }

  /* Disabled looks the same for every variant: a primary fill would hide a
     dashed border drawn in its own colour. */
  .armature-button:disabled,
  .armature-button:disabled:hover {
    cursor: not-allowed;
    background: var(--armature-canvas);
    color: var(--armature-muted);
    border-color: var(--armature-control-border);
    border-style: dashed;
    box-shadow: none;
  }
  .armature-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--armature-target-size);
    min-width: var(--armature-target-size);
    color: var(--armature-accent);
    text-decoration: underline;
  }

  .armature-icon { display: inline-flex; vertical-align: middle; }
  .armature-icon svg { width: var(--armature-text-large); height: var(--armature-text-large); }
  .armature-input, .armature-select, .armature-textarea { max-width: 100%; }
  .armature-textarea { resize: vertical; }
  .armature-field, .armature-status, .armature-notice, .armature-link {
    font-family: var(--armature-font-sans);
    font-size: var(--armature-text-base);
    line-height: var(--armature-line-height);
  }

  .armature-field { color: var(--armature-ink); display: grid; gap: var(--armature-space-2); }

  /* A checkbox is a small box beside its label; the whole row meets the target size. */
  .armature-check {
    display: flex;
    align-items: center;
    gap: var(--armature-space-2);
    min-height: var(--armature-target-size);
  }

  .armature-check .armature-input {
    width: var(--armature-space-4);
    height: var(--armature-space-4);
    min-width: var(--armature-space-4);
    min-height: var(--armature-space-4);
    padding: var(--armature-space-zero);
    accent-color: var(--armature-accent);
  }

  .armature-input:disabled, .armature-select:disabled, .armature-textarea:disabled {
    cursor: not-allowed;
    background: var(--armature-canvas);
    color: var(--armature-muted);
    border-style: dashed;
  }

  /* Invalid controls take the error colour at double weight, so the state
     does not rest on a colour change alone; the message carries the words. */
  .armature-input[aria-invalid="true"],
  .armature-select[aria-invalid="true"],
  .armature-textarea[aria-invalid="true"] {
    border-color: var(--armature-error-emphasis);
    box-shadow: inset var(--armature-space-zero) var(--armature-space-zero) var(--armature-space-zero) var(--armature-border-width) var(--armature-error-emphasis);
  }
  .armature-label, .armature-notice-title { font-weight: var(--armature-weight-emphasis); }
  .armature-hint { color: var(--armature-muted); }
  .armature-errors { color: var(--armature-error-emphasis); }
  .armature-field p { margin: var(--armature-space-zero); }
  .armature-hint, .armature-errors, .armature-status { font-size: var(--armature-text-small); }
  .armature-status {
    font-size: var(--armature-text-micro);
    font-weight: var(--armature-weight-emphasis);
    white-space: nowrap;
    border: var(--armature-border-width) solid var(--armature-line);
    display: inline-flex;
    padding: var(--armature-space-half) var(--armature-space-input);
    border-radius: var(--armature-radius-small);
  }

  .armature-tone-neutral { color: var(--armature-ink); background: var(--armature-canvas); }
  .armature-tone-success { color: var(--armature-success-emphasis); background: var(--armature-success-bg); }
  .armature-tone-warning { color: var(--armature-warning-emphasis); background: var(--armature-warning-bg); }
  .armature-tone-error { color: var(--armature-error-emphasis); background: var(--armature-error-bg); }
  .armature-notice {
    background: none;
    color: var(--armature-ink);
    font-size: var(--armature-text-control);
    border-inline-start: var(--armature-cue-width) solid var(--armature-accent);
    padding: var(--armature-space-notice) var(--armature-space-text);
  }
  .armature-notice.armature-tone-warning { border-inline-start-color: var(--armature-warning-emphasis); }
  .armature-notice.armature-tone-error { border-inline-start-color: var(--armature-error-emphasis); }
  .armature-notice-title { margin: var(--armature-space-zero) var(--armature-space-zero) var(--armature-space-2); }
  .armature-notice-actions { margin-top: var(--armature-space-3); }
  .armature-stack { display: flex; flex-direction: column; gap: var(--armature-space-4); }
  .armature-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--armature-space-4); }
  .armature-grid { container: armature-grid / inline-size; }
  .armature-grid-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--armature-layout-min-width)), 1fr));
    gap: var(--armature-space-4);
  }

  @container armature-grid (width < 520px) {
    .armature-grid-items { grid-template-columns: minmax(0, 1fr); }
  }
  .armature-split { display: flex; flex-wrap: wrap; gap: var(--armature-space-4); }
  .armature-split > div { flex: 1 1 var(--armature-layout-min-width); min-width: var(--armature-space-zero); }
  .armature-table-inspector, .armature-table-toolbar, .armature-pagination,
  .armature-record-header, .armature-inspector, .armature-table-scroll {
    color: var(--armature-ink);
    font-family: var(--armature-font-sans);
    font-size: var(--armature-text-base);
    line-height: var(--armature-line-height);
  }

  .armature-table-scroll {
    overflow: auto;
    max-height: calc(var(--armature-control-height) * 12);
    padding: calc(var(--armature-focus-width) + var(--armature-focus-offset));
    scroll-padding: var(--armature-space-4);
  }

  .armature-table { width: 100%; white-space: nowrap; border-collapse: separate; border-spacing: var(--armature-space-zero); }
  .armature-table caption { white-space: normal; text-align: start; padding: var(--armature-space-3); font-weight: var(--armature-weight-emphasis); }
  .armature-table th, .armature-table td {
    padding: var(--armature-table-cell-padding);
    text-align: start;
    border-bottom: var(--armature-border-width) solid var(--armature-line);
  }
  .armature-table th { position: sticky; top: var(--armature-space-zero); background: var(--armature-canvas); color: var(--armature-muted); font-size: var(--armature-text-micro); font-weight: var(--armature-weight-emphasis); padding: var(--armature-space-detail) var(--armature-space-4); }
  /* During keyboard interaction, headings join the flow so they cannot obscure focus. */
  .armature-table-scroll:focus-within th { position: static; }
  .armature-table .armature-numeric { text-align: end; font-variant-numeric: tabular-nums; }
  .armature-table-striped tbody tr:nth-child(even) { background: var(--armature-stripe); }
  .armature-table tbody tr:hover, .armature-table tbody tr:focus-within { background: var(--armature-hover); }
  .armature-table tbody tr.armature-row-selected { background: var(--armature-selected); }
  .armature-sort, .armature-row-select {
    min-height: var(--armature-target-size);
    min-width: var(--armature-target-size);
    padding: var(--armature-space-zero) var(--armature-space-1);
    border: var(--armature-border-width) solid var(--armature-control-border);
    border-radius: var(--armature-radius-base);
    font: inherit;
    color: var(--armature-ink);
    background: var(--armature-paper);
    cursor: pointer;
  }
  .armature-sort:hover, .armature-row-select:hover { background: var(--armature-hover); }

  /* Sort headings read as heading text, not as boxed buttons. They keep the
     target size and the base focus ring; the hint marks unsorted columns. */
  .armature-sort {
    border-style: none;
    background: none;
    padding-inline: var(--armature-space-1);
    font-weight: var(--armature-weight-emphasis);
    display: inline-flex;
    align-items: center;
    gap: var(--armature-space-control);
    color: var(--armature-muted);
  }
  .armature-sort-hint {
    color: var(--armature-muted);
    opacity: var(--armature-sort-opacity);
  }
  .armature-table-toolbar, .armature-pagination, .armature-record-header,
  .armature-toolbar-actions, .armature-record-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--armature-space-3);
  }
  .armature-table-toolbar, .armature-pagination, .armature-record-header { justify-content: space-between; padding: var(--armature-space-3); }
  .armature-table-toolbar form, .armature-pagination form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--armature-space-2); }
  .armature-inspector {
    padding: var(--armature-space-panel);
    background: var(--armature-canvas);
    border: none;
    border-inline-start: var(--armature-border-width) solid var(--armature-line);
  }

  .armature-inspector:focus-visible { outline-offset: var(--armature-focus-offset); }
  .armature-inspector h2 { font-size: var(--armature-text-base); font-weight: var(--armature-weight-emphasis); margin: var(--armature-space-zero); }
  .armature-record-header h2 { font-size: var(--armature-text-heading); font-weight: var(--armature-weight-emphasis); margin: var(--armature-space-zero); }
  .armature-record-header p, .armature-table-empty { margin: var(--armature-space-zero); padding-block: var(--armature-space-3); }
  .armature-table-inspector > .armature-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--armature-target-size);
    margin: var(--armature-space-2) var(--armature-space-4);
  }
  .armature-table-inspector > .armature-split {
    margin-top: var(--armature-space-zero);
    gap: var(--armature-space-zero);
  }
  .armature-table-inspector > .armature-split > div {
    flex-basis: calc(var(--armature-layout-min-width) * 2);
  }

  .armature-catalogue-detail { overflow-wrap: anywhere; }
  .armature-catalogue-detail > section > h2 { font-size: var(--armature-text-large); }
  .armature-catalogue-detail ul a { min-width: var(--armature-target-size); }
  .armature-catalogue-panels article { min-width: var(--armature-space-zero); }
  .armature-catalogue-panels article:only-child { grid-column: 1 / -1; }
  .armature-catalogue-preview-scroll { overflow: auto; max-width: 100%; }
  .armature-catalogue-preview { box-sizing: content-box; border: var(--armature-border-width) solid var(--armature-line); height: var(--armature-shell-height); }
  .armature-catalogue-notes {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  /* A normalized select with a drawn chevron: two border strokes of a small
     rotated square on the wrapper, in token colours, never covering the control. */
  .armature-select-wrap { position: relative; display: inline-flex; max-width: 100%; }
  .armature-field .armature-select-wrap { display: flex; }
  .armature-field .armature-select-wrap .armature-select { flex: 1; }
  .armature-select {
    appearance: none;
    padding-inline-end: var(--armature-control-height-compact);
  }
  .armature-select-wrap::after {
    content: "";
    position: absolute;
    inset-inline-end: var(--armature-space-4);
    top: var(--armature-chevron-stop);
    width: var(--armature-chevron-size);
    height: var(--armature-chevron-size);
    margin-top: calc(var(--armature-chevron-size) * -0.75);
    border-style: solid;
    border-color: var(--armature-muted);
    border-width: var(--armature-space-zero) var(--armature-border-width) var(--armature-border-width) var(--armature-space-zero);
    transform: rotate(var(--armature-chevron-angle));
    pointer-events: none;
  }
  /* A multiple select is a list box: native appearance, no chevron. */
  .armature-select[multiple] { appearance: auto; padding-inline-end: var(--armature-space-detail); }
  .armature-select-wrap:has(> .armature-select[multiple])::after { content: none; }
  .armature-input:hover, .armature-select:hover, .armature-textarea:hover { border-color: var(--armature-accent); }
  .armature-table td { height: var(--armature-table-row-height); box-sizing: border-box; font-size: var(--armature-text-control); }
  .armature-table[data-density="compact"] td { padding: var(--armature-table-cell-padding-compact); height: var(--armature-table-row-height-compact); }
  .armature-table td small { display: block; color: var(--armature-muted); font-size: var(--armature-text-micro); }
  .armature-table tbody tr.armature-row-selected td:first-child { box-shadow: inset var(--armature-cue-width) var(--armature-space-zero) var(--armature-space-zero) var(--armature-accent); }


  .armature-sort:hover .armature-sort-hint { opacity: var(--armature-opacity-full); }
  th[aria-sort] .armature-sort { color: var(--armature-ink); }
  .armature-clickable-row { cursor: pointer; }
  .armature-clickable-row:focus-within {
    outline: var(--armature-focus-width) solid var(--armature-focus);
    outline-offset: calc(var(--armature-focus-width) * -1);
  }
  .armature-row-select {
    border: none;
    background: none;
    padding: var(--armature-space-zero);
    font: inherit;
    font-weight: var(--armature-weight-emphasis);
    text-align: start;
    color: inherit;
    min-height: var(--armature-target-size);
    min-width: var(--armature-target-size);
  }
  .armature-row-select:hover { background: none; }
  @media (pointer: coarse) {
    .armature-row-select { min-height: var(--armature-target-enhanced); min-width: var(--armature-target-enhanced); }
  }
  .armature-table-toolbar { padding: var(--armature-space-2) var(--armature-space-4); border-bottom: var(--armature-border-width) solid var(--armature-line); justify-content: start; }
  .armature-table-toolbar [role="status"] { color: var(--armature-muted); font-size: var(--armature-text-small); font-variant-numeric: tabular-nums; }
  .armature-toolbar-actions { margin-inline-start: auto; }
  .armature-table-toolbar form { max-width: 100%; min-width: var(--armature-space-zero); }
  .armature-search { display: flex; position: relative; align-items: center; width: var(--armature-search-width); max-width: 100%; }
  .armature-search > .armature-icon { position: absolute; inset-inline-start: var(--armature-space-detail); pointer-events: none; }
  .armature-search .armature-input { width: 100%; min-width: var(--armature-space-zero); min-height: max(var(--armature-control-height-compact), var(--armature-target-size)); padding-block: var(--armature-space-1); padding-inline: var(--armature-control-height-compact) calc(var(--armature-target-size) + var(--armature-space-2)); }
  .armature-search .armature-input::-webkit-search-cancel-button { appearance: none; }
  .armature-search .armature-button { position: absolute; inset-inline-end: var(--armature-border-width); min-width: var(--armature-target-size); min-height: var(--armature-target-size); padding: var(--armature-space-zero); border-style: none; background: none; color: var(--armature-muted); }
  .armature-pagination { padding: var(--armature-space-detail) var(--armature-space-4); border-top: var(--armature-border-width) solid var(--armature-line); font-size: var(--armature-text-small); color: var(--armature-muted); font-variant-numeric: tabular-nums; }
  .armature-pagination .armature-select { min-height: max(var(--armature-control-height-compact), var(--armature-target-size)); }
  .armature-pagination .armature-button { padding-inline: var(--armature-space-detail); }
  .armature-record-header { padding: var(--armature-space-panel); border-bottom: var(--armature-border-width) solid var(--armature-line); }
  .armature-record-header p { color: var(--armature-muted); font-size: var(--armature-text-small); padding-block: var(--armature-space-1); }

  .armature-table-inspector { container-type: inline-size; border: var(--armature-border-width) solid var(--armature-line); border-radius: var(--armature-radius-panel); background: var(--armature-paper); }


  .armature-table-inspector > .armature-split > div:first-child { flex: 1 1 calc(var(--armature-layout-min-width) * 2); }
  .armature-table-inspector > .armature-split > div:last-child { flex: 0 1 var(--armature-inspector-width); }
  .armature-table-inspector .armature-inspector { min-height: 100%; box-sizing: border-box; }
  .armature-inspector .armature-record-header { padding-inline: var(--armature-space-zero); }
  .armature-facts { display: grid; gap: var(--armature-space-detail); font-family: var(--armature-font-sans); font-size: var(--armature-text-base); line-height: var(--armature-line-height); color: var(--armature-ink); }
  .armature-facts dt { font-size: var(--armature-text-small); color: var(--armature-muted); }
  .armature-facts dd { margin: var(--armature-space-zero); font-weight: var(--armature-weight-emphasis); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .armature-catalogue-detail ul { list-style: none; padding: var(--armature-space-zero); margin: var(--armature-space-zero); }

  .armature-catalogue-detail h3 { font-size: var(--armature-text-base); font-weight: var(--armature-weight-emphasis); }
  .armature-catalogue-detail p { overflow-wrap: anywhere; }


  @media (forced-colors: active) {
    .armature-select { appearance: auto; }
    .armature-select-wrap::after { content: none; }
  }

  /* A narrow composition stacks even inside a wide consumer viewport. */
  @container (max-width: 44rem) {
    .armature-table-inspector > .armature-split > div:last-child { flex-basis: 100%; }
    .armature-table-inspector .armature-inspector { border-inline-start: none; border-top: var(--armature-border-width) solid var(--armature-line); }
  }

  .armature-token-statement { font-size: var(--armature-text-large); font-weight: var(--armature-weight-emphasis); }
  #catalogue-token-contract > .armature-panel { margin-block-start: var(--armature-space-4); }
  .armature-token-surface { padding: var(--armature-space-4); border: var(--armature-border-width) solid var(--armature-line); border-radius: var(--armature-radius-panel); background: var(--armature-paper); color: var(--armature-ink); }
  .armature-token-muted { color: var(--armature-muted); }
  .armature-token-image { background: var(--armature-image-backdrop); color: var(--armature-muted); padding: var(--armature-space-6); text-align: center; }
  .armature-token-space { height: var(--armature-space-4); max-width: 100%; background: var(--armature-accent); }
  .armature-token-type { font-family: var(--armature-font-sans); line-height: var(--armature-line-height); margin-block: var(--armature-space-2); overflow-wrap: anywhere; }
  .armature-token-label { font-size: var(--armature-text-small); font-weight: var(--armature-weight-normal); overflow-wrap: anywhere; }
  .armature-token-code { font-family: var(--armature-font-mono); }
  .armature-token-tabular { font-family: var(--armature-font-sans); font-variant-numeric: tabular-nums; }
  #catalogue-focus-sample { margin: var(--armature-space-2); outline: var(--armature-focus-width) solid var(--armature-focus); outline-offset: var(--armature-focus-offset); }
  .armature-token-rail { max-width: 100%; }
  .armature-token-rail-wide { width: var(--armature-rail-width); }
  .armature-token-rail-narrow { width: var(--armature-rail-width-narrow); }
  .armature-token-secondary-nav { width: var(--armature-nav-width); max-width: 100%; padding: var(--armature-space-nav); border: var(--armature-border-width) solid var(--armature-line); }
  #catalogue-token-pressed { transform: translateY(var(--armature-press-offset)); }
  #catalogue-token-hover { background: color-mix(in srgb, var(--armature-accent), var(--armature-ink) var(--armature-hover-mix)); }
  #catalogue-token-target { min-width: var(--armature-target-enhanced); min-height: var(--armature-target-enhanced); }
  #catalogue-token-control-default { min-height: var(--armature-control-height); }
  .armature-token-inspector { width: var(--armature-inspector-width); max-width: 100%; }
  .armature-token-reference, .armature-token-pairs { font-size: var(--armature-text-small); }
  .armature-token-reference tbody th, .armature-token-pairs tbody th { position: static; min-width: var(--armature-layout-min-width); max-width: var(--armature-layout-min-width); white-space: normal; }
  .armature-token-reference td, .armature-token-pairs td { font-size: var(--armature-text-small); padding: var(--armature-table-cell-padding-compact); }
  .armature-token-reference td:nth-child(3) { max-width: var(--armature-inspector-width); white-space: normal; }
  .armature-token-pairs { min-width: calc(var(--armature-layout-min-width) * 5); }
  .armature-token-reference th, .armature-token-reference td, .armature-token-pairs th, .armature-token-pairs td { overflow-wrap: anywhere; }
  .armature-token-reference caption, .armature-token-pairs caption { text-align: start; font-weight: var(--armature-weight-emphasis); }
  .armature-token-motion-track { padding: var(--armature-space-4); overflow: hidden; }
  .armature-token-motion-track span { display: inline-block; padding: var(--armature-space-2); background: var(--armature-selected); border-inline-start: var(--armature-cue-width) solid var(--armature-selected-cue); }
  .armature-token-motion-fast { transition: transform var(--armature-duration-fast) var(--armature-easing); }
  .armature-token-motion-base { transition: transform var(--armature-duration-base) var(--armature-easing); }
  #catalogue-motion-demo:is(:hover, :focus-within) .armature-token-motion-track span { transform: translateX(var(--armature-space-8)); animation: armature-token-feedback var(--armature-duration-base) var(--armature-easing) 1; }
  #catalogue-motion-demo:is(:hover, :focus-within) .armature-token-motion-fast { animation-duration: var(--armature-duration-fast); }
  @keyframes armature-token-feedback { from { opacity: var(--armature-sort-opacity); } to { opacity: var(--armature-opacity-full); } }
  @media (prefers-reduced-motion: reduce) {
    #catalogue-motion-demo .armature-token-motion-track span,
    #catalogue-motion-demo:is(:hover, :focus-within) .armature-token-motion-track span { transform: none; transition-duration: var(--armature-duration-reduced); animation-duration: var(--armature-duration-reduced); animation-iteration-count: var(--armature-iterations-reduced); }
  }
}