/* Generated by tooling/build-tokens.mjs. Do not edit. */
/* Geist Sans and Geist Mono 1.7.2 by Vercel, SIL Open Font License 1.1 (OFL.txt).
   The type roles in src/form/structure.form.json name these families. */
@font-face {
  font-family: "Geist Sans";
  src: url("fonts/Geist-Variable.a369fcf5.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Variable.fba8f577.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


[data-st-palette="phosphor"][data-st-theme="light"] {
  --st-color-surface-app: #edf2ed;
  --st-color-surface-panel: #e5ebe5;
  --st-color-surface-sidebar: #e8ede8;
  --st-color-surface-header: #e1e7e2;
  --st-color-surface-card: #dee3de;
  --st-color-surface-overlay: #d3dad4;
  --st-color-surface-scrim: rgba(12,26,16,0.34);
  --st-color-surface-secondary: #ccd2cc;
  --st-color-surface-muted: #c2c9c2;
  --st-color-surface-interactive: #d3dad4;
  --st-color-surface-selected: #bac2bb;
  --st-color-surface-input: #dbe1db;
  --st-color-surface-transparent: transparent;
  --st-color-layer-hover: rgba(12,26,16,0.1);
  --st-color-layer-pressed: rgba(12,26,16,0.16);
  --st-color-content-primary: #0C1A10;
  --st-color-content-secondary: #4b574d;
  --st-color-content-muted: #778279;
  --st-color-content-inverse: #EDF2ED;
  --st-color-content-on-primary: #EDF2ED;
  --st-color-content-on-interactive: #0C1A10;
  --st-color-content-on-overlay: #0C1A10;
  --st-color-content-on-warning: #EDF2ED;
  --st-color-border-default: #bac2bb;
  --st-color-border-subtle: #ced5cf;
  --st-color-border-strong: #7e8880;
  --st-color-border-sidebar: #c4cbc5;
  --st-color-border-input: #b0b8b1;
  --st-color-border-focus: #0F7A3D;
  --st-color-action-primary: #0F7A3D;
  --st-color-action-primary-hover: #00682c;
  --st-color-action-primary-content: #EDF2ED;
  --st-color-action-destructive: #B4322B;
  --st-color-state-positive: #0F7A3D;
  --st-color-state-warning: #7A6412;
  --st-color-state-warning-surface: #7A6412;
  --st-color-state-critical: #B4322B;
  --st-color-state-info: #0F6FA8;
  --st-color-state-idle: #677269;
  --st-color-state-disabled: #8a938b;
  --st-color-mode-live: #0F7A3D;
  --st-color-mode-paper: #5c685e;
  --st-color-data-positive: #0F7A3D;
  --st-color-data-negative: #B4322B;
  --st-color-data-neutral: #677269;
  --st-color-data-series-1: #0F7A3D;
  --st-color-data-series-2: #0F6FA8;
  --st-color-data-series-3: #8A6D1F;
  --st-color-data-series-4: #B4322B;
  --st-color-data-series-5: #6B45B0;
  --st-color-data-series-6: #A83880;
  --st-color-data-series-7: #4A7A17;
  --st-color-data-series-8: #0E6E8C;
  --st-color-data-series-primary: #0C1A10;
  --st-color-graph-canvas: #edf2ed;
  --st-color-graph-node: #dee3de;
  --st-color-graph-node-selected: #bac2bb;
  --st-color-graph-connection: #a2aaa3;
  --st-color-graph-connection-active: #0F7A3D;
  --st-color-graph-port: #677269;
  --st-color-graph-port-active: #0F7A3D;
  --st-color-graph-grid: #d3dad4;
  --st-color-graph-invalid: #B4322B;
  --st-type-module-title: 600 13px/18px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-body: 400 12px/18px "Geist Sans", ui-sans-serif, system-ui, sans-serif;
  --st-type-body-dense: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-label: 500 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-label-compact: 500 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-section-label: 600 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-technical-label: 500 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-caption: 400 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-table-header: 500 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-table-cell: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-code: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-inline-code: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-data-metric: 600 20px/24px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-data-value: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-tracking-eyebrow: 0.08em;
  --st-tracking-metric: -0.01em;
  --st-space-gap-adjacent: 2px;
  --st-space-gap-micro: 4px;
  --st-space-gap-icon: 6px;
  --st-space-gap-compact: 8px;
  --st-space-gap-section-compact: 10px;
  --st-space-gap-default: 12px;
  --st-space-gap-section: 16px;
  --st-space-inset-control-x: 10px;
  --st-space-inset-control-y: 6px;
  --st-space-inset-control-compact-x: 8px;
  --st-space-inset-control-compact-y: 3px;
  --st-space-inset-panel-dense: 12px;
  --st-space-inset-panel: 16px;
  --st-space-inset-row-x: 10px;
  --st-space-inset-row-y: 4px;
  --st-space-inset-inline-code: 2px;
  --st-space-inset-overlay: 8px;
  --st-size-control-compact: 20px;
  --st-size-control-dense: 24px;
  --st-size-control-default: 28px;
  --st-size-icon-small: 12px;
  --st-size-icon-default: 14px;
  --st-size-icon-row: 16px;
  --st-size-icon-control: 20px;
  --st-size-icon-canvas: 16px;
  --st-size-icon-empty: 40px;
  --st-size-target-minimum: 44px;
  --st-size-badge-default: 18px;
  --st-size-row-dense: 24px;
  --st-size-row-default: 28px;
  --st-size-graph-port: 8px;
  --st-size-canvas-grid: 32px;
  --st-size-pixel: 2px;
  --st-radius-structural: 0px;
  --st-radius-inline-code: 0px;
  --st-radius-full: 9999px;
  --st-stroke-icon: 1.25;
  --st-stroke-standard: 1px;
  --st-stroke-data-primary: 2px;
  --st-stroke-focus: 2px;
  --st-opacity-disabled: 0.5;
  --st-effect-focus: 0 0 0 var(--st-stroke-focus) #0F7A3D;
  --st-effect-layer-hover: linear-gradient(rgba(12,26,16,0.1), rgba(12,26,16,0.1));
  --st-effect-layer-pressed: linear-gradient(rgba(12,26,16,0.16), rgba(12,26,16,0.16));
  --st-effect-elevation-none: none;
  --st-effect-elevation-overlay: 0 0 0 var(--st-stroke-standard) #bac2bb;
  --st-motion-duration-interaction: 120ms;
  --st-motion-duration-sidebar: 160ms;
  --st-motion-duration-loading: 800ms;
  --st-motion-duration-tick: 1000ms;
  --st-motion-duration-feedback: 160ms;
  --st-motion-duration-feedback-hold: 1500ms;
  --st-motion-duration-tooltip-delay: 500ms;
  --st-motion-easing-default: cubic-bezier(0.2,0,0,1);
  --st-motion-easing-out: cubic-bezier(0,0,0.2,1);
  --st-motion-easing-emphasized: cubic-bezier(0.3,0,0,1);
  --st-motion-easing-pixel: steps(8, end);
  --st-motion-press-offset: 1px;
  --st-geometry-notch: 5px;
  --st-pattern-paper: repeating-linear-gradient(135deg, var(--st-pattern-ink, currentColor) 0 1px, transparent 1px 5px);
  color-scheme: light;
}

[data-st-palette="phosphor"][data-st-theme="dark"] {
  --st-color-surface-app: #05080a;
  --st-color-surface-panel: #090d0f;
  --st-color-surface-sidebar: #070b0d;
  --st-color-surface-header: #0b1011;
  --st-color-surface-card: #0d1214;
  --st-color-surface-overlay: #141a1b;
  --st-color-surface-scrim: rgba(0,0,0,0.6);
  --st-color-surface-secondary: #191f20;
  --st-color-surface-muted: #202727;
  --st-color-surface-interactive: #141a1b;
  --st-color-surface-selected: #262d2d;
  --st-color-surface-input: #0f1415;
  --st-color-surface-transparent: transparent;
  --st-color-layer-hover: rgba(216,240,220,0.1);
  --st-color-layer-pressed: rgba(216,240,220,0.16);
  --st-color-content-primary: #D8F0DC;
  --st-color-content-secondary: #8b9c90;
  --st-color-content-muted: #5e6b65;
  --st-color-content-inverse: #05080A;
  --st-color-content-on-primary: #05080A;
  --st-color-content-on-interactive: #D8F0DC;
  --st-color-content-on-overlay: #D8F0DC;
  --st-color-content-on-warning: #D9C127;
  --st-color-border-default: #262d2d;
  --st-color-border-subtle: #181e1e;
  --st-color-border-strong: #58645e;
  --st-color-border-sidebar: #1f2525;
  --st-color-border-input: #2e3634;
  --st-color-border-focus: #35D97A;
  --st-color-action-primary: #35D97A;
  --st-color-action-primary-hover: #51ed8d;
  --st-color-action-primary-content: #05080A;
  --st-color-action-destructive: #FF6B5E;
  --st-color-state-positive: #35D97A;
  --st-color-state-warning: #D9C127;
  --st-color-state-warning-surface: transparent;
  --st-color-state-critical: #FF6B5E;
  --st-color-state-info: #5AC8E8;
  --st-color-state-idle: #6e7c74;
  --st-color-state-disabled: #4d5954;
  --st-color-mode-live: #35D97A;
  --st-color-mode-paper: #79887f;
  --st-color-data-positive: #35D97A;
  --st-color-data-negative: #FF6B5E;
  --st-color-data-neutral: #6e7c74;
  --st-color-data-series-1: #35D97A;
  --st-color-data-series-2: #5AC8E8;
  --st-color-data-series-3: #D9C127;
  --st-color-data-series-4: #FF6B5E;
  --st-color-data-series-5: #B08CF0;
  --st-color-data-series-6: #E88BC4;
  --st-color-data-series-7: #8FD94F;
  --st-color-data-series-8: #4FA8D9;
  --st-color-data-series-primary: #D8F0DC;
  --st-color-graph-canvas: #05080a;
  --st-color-graph-node: #0d1214;
  --st-color-graph-node-selected: #262d2d;
  --st-color-graph-connection: #394240;
  --st-color-graph-connection-active: #35D97A;
  --st-color-graph-port: #6e7c74;
  --st-color-graph-port-active: #35D97A;
  --st-color-graph-grid: #141a1b;
  --st-color-graph-invalid: #FF6B5E;
  --st-type-module-title: 600 13px/18px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-body: 400 12px/18px "Geist Sans", ui-sans-serif, system-ui, sans-serif;
  --st-type-body-dense: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-label: 500 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-label-compact: 500 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-section-label: 600 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-technical-label: 500 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-caption: 400 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-table-header: 500 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-table-cell: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-code: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-inline-code: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-data-metric: 600 20px/24px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-data-value: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-tracking-eyebrow: 0.08em;
  --st-tracking-metric: -0.01em;
  --st-space-gap-adjacent: 2px;
  --st-space-gap-micro: 4px;
  --st-space-gap-icon: 6px;
  --st-space-gap-compact: 8px;
  --st-space-gap-section-compact: 10px;
  --st-space-gap-default: 12px;
  --st-space-gap-section: 16px;
  --st-space-inset-control-x: 10px;
  --st-space-inset-control-y: 6px;
  --st-space-inset-control-compact-x: 8px;
  --st-space-inset-control-compact-y: 3px;
  --st-space-inset-panel-dense: 12px;
  --st-space-inset-panel: 16px;
  --st-space-inset-row-x: 10px;
  --st-space-inset-row-y: 4px;
  --st-space-inset-inline-code: 2px;
  --st-space-inset-overlay: 8px;
  --st-size-control-compact: 20px;
  --st-size-control-dense: 24px;
  --st-size-control-default: 28px;
  --st-size-icon-small: 12px;
  --st-size-icon-default: 14px;
  --st-size-icon-row: 16px;
  --st-size-icon-control: 20px;
  --st-size-icon-canvas: 16px;
  --st-size-icon-empty: 40px;
  --st-size-target-minimum: 44px;
  --st-size-badge-default: 18px;
  --st-size-row-dense: 24px;
  --st-size-row-default: 28px;
  --st-size-graph-port: 8px;
  --st-size-canvas-grid: 32px;
  --st-size-pixel: 2px;
  --st-radius-structural: 0px;
  --st-radius-inline-code: 0px;
  --st-radius-full: 9999px;
  --st-stroke-icon: 1.25;
  --st-stroke-standard: 1px;
  --st-stroke-data-primary: 2px;
  --st-stroke-focus: 2px;
  --st-opacity-disabled: 0.5;
  --st-effect-focus: 0 0 0 var(--st-stroke-focus) #35D97A;
  --st-effect-layer-hover: linear-gradient(rgba(216,240,220,0.1), rgba(216,240,220,0.1));
  --st-effect-layer-pressed: linear-gradient(rgba(216,240,220,0.16), rgba(216,240,220,0.16));
  --st-effect-elevation-none: none;
  --st-effect-elevation-overlay: 0 0 0 var(--st-stroke-standard) #262d2d;
  --st-motion-duration-interaction: 120ms;
  --st-motion-duration-sidebar: 160ms;
  --st-motion-duration-loading: 800ms;
  --st-motion-duration-tick: 1000ms;
  --st-motion-duration-feedback: 160ms;
  --st-motion-duration-feedback-hold: 1500ms;
  --st-motion-duration-tooltip-delay: 500ms;
  --st-motion-easing-default: cubic-bezier(0.2,0,0,1);
  --st-motion-easing-out: cubic-bezier(0,0,0.2,1);
  --st-motion-easing-emphasized: cubic-bezier(0.3,0,0,1);
  --st-motion-easing-pixel: steps(8, end);
  --st-motion-press-offset: 1px;
  --st-geometry-notch: 5px;
  --st-pattern-paper: repeating-linear-gradient(135deg, var(--st-pattern-ink, currentColor) 0 1px, transparent 1px 5px);
  color-scheme: dark;
}

:root,
[data-st-theme="light"],
[data-st-palette="structure"][data-st-theme="light"] {
  --st-color-surface-app: #f7f6f2;
  --st-color-surface-panel: #efeeeb;
  --st-color-surface-sidebar: #f2f1ed;
  --st-color-surface-header: #ebebe7;
  --st-color-surface-card: #e7e7e3;
  --st-color-surface-overlay: #ddddda;
  --st-color-surface-scrim: rgba(21,24,28,0.34);
  --st-color-surface-secondary: #d6d5d3;
  --st-color-surface-muted: #cbcbc9;
  --st-color-surface-interactive: #ddddda;
  --st-color-surface-selected: #c4c4c2;
  --st-color-surface-input: #e5e4e1;
  --st-color-surface-transparent: transparent;
  --st-color-layer-hover: rgba(21,24,28,0.1);
  --st-color-layer-pressed: rgba(21,24,28,0.16);
  --st-color-content-primary: #15181C;
  --st-color-content-secondary: #545658;
  --st-color-content-muted: #818283;
  --st-color-content-inverse: #F7F6F2;
  --st-color-content-on-primary: #F7F6F2;
  --st-color-content-on-interactive: #15181C;
  --st-color-content-on-overlay: #15181C;
  --st-color-content-on-warning: #15181C;
  --st-color-border-default: #c4c4c2;
  --st-color-border-subtle: #d8d8d5;
  --st-color-border-strong: #888989;
  --st-color-border-sidebar: #cececc;
  --st-color-border-input: #babab9;
  --st-color-border-focus: #15181C;
  --st-color-action-primary: #15181C;
  --st-color-action-primary-hover: #282b2f;
  --st-color-action-primary-content: #F7F6F2;
  --st-color-action-destructive: #A52836;
  --st-color-state-positive: #00726C;
  --st-color-state-warning: #FECF00;
  --st-color-state-warning-surface: #FECF00;
  --st-color-state-critical: #A52836;
  --st-color-state-info: #0078C7;
  --st-color-state-idle: #717274;
  --st-color-state-disabled: #939494;
  --st-color-mode-live: #15181C;
  --st-color-mode-paper: #656769;
  --st-color-data-positive: #00726C;
  --st-color-data-negative: #A52836;
  --st-color-data-neutral: #717274;
  --st-color-data-series-1: #0078C7;
  --st-color-data-series-2: #27A74B;
  --st-color-data-series-3: #B2397C;
  --st-color-data-series-4: #CA6800;
  --st-color-data-series-5: #00A199;
  --st-color-data-series-6: #998700;
  --st-color-data-series-7: #8557C8;
  --st-color-data-series-8: #D24D45;
  --st-color-data-series-primary: #15181C;
  --st-color-graph-canvas: #f7f6f2;
  --st-color-graph-node: #e7e7e3;
  --st-color-graph-node-selected: #c4c4c2;
  --st-color-graph-connection: #abacab;
  --st-color-graph-connection-active: #15181C;
  --st-color-graph-port: #717274;
  --st-color-graph-port-active: #15181C;
  --st-color-graph-grid: #ddddda;
  --st-color-graph-invalid: #A52836;
  --st-type-module-title: 600 13px/18px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-body: 400 12px/18px "Geist Sans", ui-sans-serif, system-ui, sans-serif;
  --st-type-body-dense: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-label: 500 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-label-compact: 500 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-section-label: 600 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-technical-label: 500 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-caption: 400 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-table-header: 500 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-table-cell: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-code: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-inline-code: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-data-metric: 600 20px/24px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-data-value: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-tracking-eyebrow: 0.08em;
  --st-tracking-metric: -0.01em;
  --st-space-gap-adjacent: 2px;
  --st-space-gap-micro: 4px;
  --st-space-gap-icon: 6px;
  --st-space-gap-compact: 8px;
  --st-space-gap-section-compact: 10px;
  --st-space-gap-default: 12px;
  --st-space-gap-section: 16px;
  --st-space-inset-control-x: 10px;
  --st-space-inset-control-y: 6px;
  --st-space-inset-control-compact-x: 8px;
  --st-space-inset-control-compact-y: 3px;
  --st-space-inset-panel-dense: 12px;
  --st-space-inset-panel: 16px;
  --st-space-inset-row-x: 10px;
  --st-space-inset-row-y: 4px;
  --st-space-inset-inline-code: 2px;
  --st-space-inset-overlay: 8px;
  --st-size-control-compact: 20px;
  --st-size-control-dense: 24px;
  --st-size-control-default: 28px;
  --st-size-icon-small: 12px;
  --st-size-icon-default: 14px;
  --st-size-icon-row: 16px;
  --st-size-icon-control: 20px;
  --st-size-icon-canvas: 16px;
  --st-size-icon-empty: 40px;
  --st-size-target-minimum: 44px;
  --st-size-badge-default: 18px;
  --st-size-row-dense: 24px;
  --st-size-row-default: 28px;
  --st-size-graph-port: 8px;
  --st-size-canvas-grid: 32px;
  --st-size-pixel: 2px;
  --st-radius-structural: 0px;
  --st-radius-inline-code: 0px;
  --st-radius-full: 9999px;
  --st-stroke-icon: 1.25;
  --st-stroke-standard: 1px;
  --st-stroke-data-primary: 2px;
  --st-stroke-focus: 2px;
  --st-opacity-disabled: 0.5;
  --st-effect-focus: 0 0 0 var(--st-stroke-focus) #15181C;
  --st-effect-layer-hover: linear-gradient(rgba(21,24,28,0.1), rgba(21,24,28,0.1));
  --st-effect-layer-pressed: linear-gradient(rgba(21,24,28,0.16), rgba(21,24,28,0.16));
  --st-effect-elevation-none: none;
  --st-effect-elevation-overlay: 0 0 0 var(--st-stroke-standard) #c4c4c2;
  --st-motion-duration-interaction: 120ms;
  --st-motion-duration-sidebar: 160ms;
  --st-motion-duration-loading: 800ms;
  --st-motion-duration-tick: 1000ms;
  --st-motion-duration-feedback: 160ms;
  --st-motion-duration-feedback-hold: 1500ms;
  --st-motion-duration-tooltip-delay: 500ms;
  --st-motion-easing-default: cubic-bezier(0.2,0,0,1);
  --st-motion-easing-out: cubic-bezier(0,0,0.2,1);
  --st-motion-easing-emphasized: cubic-bezier(0.3,0,0,1);
  --st-motion-easing-pixel: steps(8, end);
  --st-motion-press-offset: 1px;
  --st-geometry-notch: 5px;
  --st-pattern-paper: repeating-linear-gradient(135deg, var(--st-pattern-ink, currentColor) 0 1px, transparent 1px 5px);
  color-scheme: light;
}

[data-st-theme="dark"],
[data-st-palette="structure"][data-st-theme="dark"] {
  --st-color-surface-app: #0a0b0d;
  --st-color-surface-panel: #0f1012;
  --st-color-surface-sidebar: #0d0e10;
  --st-color-surface-header: #121315;
  --st-color-surface-card: #141517;
  --st-color-surface-overlay: #1b1c1f;
  --st-color-surface-scrim: rgba(0,0,0,0.6);
  --st-color-surface-secondary: #212224;
  --st-color-surface-muted: #28292c;
  --st-color-surface-interactive: #1b1c1f;
  --st-color-surface-selected: #2e2f32;
  --st-color-surface-input: #161719;
  --st-color-surface-transparent: transparent;
  --st-color-layer-hover: rgba(231,233,236,0.1);
  --st-color-layer-pressed: rgba(231,233,236,0.16);
  --st-color-content-primary: #E7E9EC;
  --st-color-content-secondary: #97999c;
  --st-color-content-muted: #696b6d;
  --st-color-content-inverse: #0A0B0D;
  --st-color-content-on-primary: #0A0B0D;
  --st-color-content-on-interactive: #E7E9EC;
  --st-color-content-on-overlay: #E7E9EC;
  --st-color-content-on-warning: #FECF00;
  --st-color-border-default: #2e2f32;
  --st-color-border-subtle: #1f2022;
  --st-color-border-strong: #626466;
  --st-color-border-sidebar: #26282a;
  --st-color-border-input: #36373a;
  --st-color-border-focus: #E7E9EC;
  --st-color-action-primary: #E7E9EC;
  --st-color-action-primary-hover: #fbfdff;
  --st-color-action-primary-content: #0A0B0D;
  --st-color-action-destructive: #D9544B;
  --st-color-state-positive: #00A89F;
  --st-color-state-warning: #FECF00;
  --st-color-state-warning-surface: transparent;
  --st-color-state-critical: #D9544B;
  --st-color-state-info: #1A97F4;
  --st-color-state-idle: #797a7d;
  --st-color-state-disabled: #57595b;
  --st-color-mode-live: #E7E9EC;
  --st-color-mode-paper: #848689;
  --st-color-data-positive: #00A89F;
  --st-color-data-negative: #D9544B;
  --st-color-data-neutral: #797a7d;
  --st-color-data-series-1: #1A97F4;
  --st-color-data-series-2: #0E9A3F;
  --st-color-data-series-3: #DB5FA1;
  --st-color-data-series-4: #DC7100;
  --st-color-data-series-5: #00A89F;
  --st-color-data-series-6: #9F8D00;
  --st-color-data-series-7: #9769DC;
  --st-color-data-series-8: #D9544B;
  --st-color-data-series-primary: #E7E9EC;
  --st-color-graph-canvas: #0a0b0d;
  --st-color-graph-node: #141517;
  --st-color-graph-node-selected: #2e2f32;
  --st-color-graph-connection: #424446;
  --st-color-graph-connection-active: #E7E9EC;
  --st-color-graph-port: #797a7d;
  --st-color-graph-port-active: #E7E9EC;
  --st-color-graph-grid: #1b1c1f;
  --st-color-graph-invalid: #D9544B;
  --st-type-module-title: 600 13px/18px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-body: 400 12px/18px "Geist Sans", ui-sans-serif, system-ui, sans-serif;
  --st-type-body-dense: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-label: 500 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-label-compact: 500 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-section-label: 600 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-technical-label: 500 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-caption: 400 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-table-header: 500 11px/14px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-table-cell: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-code: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-inline-code: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-data-metric: 600 20px/24px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-type-data-value: 400 12px/16px "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --st-tracking-eyebrow: 0.08em;
  --st-tracking-metric: -0.01em;
  --st-space-gap-adjacent: 2px;
  --st-space-gap-micro: 4px;
  --st-space-gap-icon: 6px;
  --st-space-gap-compact: 8px;
  --st-space-gap-section-compact: 10px;
  --st-space-gap-default: 12px;
  --st-space-gap-section: 16px;
  --st-space-inset-control-x: 10px;
  --st-space-inset-control-y: 6px;
  --st-space-inset-control-compact-x: 8px;
  --st-space-inset-control-compact-y: 3px;
  --st-space-inset-panel-dense: 12px;
  --st-space-inset-panel: 16px;
  --st-space-inset-row-x: 10px;
  --st-space-inset-row-y: 4px;
  --st-space-inset-inline-code: 2px;
  --st-space-inset-overlay: 8px;
  --st-size-control-compact: 20px;
  --st-size-control-dense: 24px;
  --st-size-control-default: 28px;
  --st-size-icon-small: 12px;
  --st-size-icon-default: 14px;
  --st-size-icon-row: 16px;
  --st-size-icon-control: 20px;
  --st-size-icon-canvas: 16px;
  --st-size-icon-empty: 40px;
  --st-size-target-minimum: 44px;
  --st-size-badge-default: 18px;
  --st-size-row-dense: 24px;
  --st-size-row-default: 28px;
  --st-size-graph-port: 8px;
  --st-size-canvas-grid: 32px;
  --st-size-pixel: 2px;
  --st-radius-structural: 0px;
  --st-radius-inline-code: 0px;
  --st-radius-full: 9999px;
  --st-stroke-icon: 1.25;
  --st-stroke-standard: 1px;
  --st-stroke-data-primary: 2px;
  --st-stroke-focus: 2px;
  --st-opacity-disabled: 0.5;
  --st-effect-focus: 0 0 0 var(--st-stroke-focus) #E7E9EC;
  --st-effect-layer-hover: linear-gradient(rgba(231,233,236,0.1), rgba(231,233,236,0.1));
  --st-effect-layer-pressed: linear-gradient(rgba(231,233,236,0.16), rgba(231,233,236,0.16));
  --st-effect-elevation-none: none;
  --st-effect-elevation-overlay: 0 0 0 var(--st-stroke-standard) #2e2f32;
  --st-motion-duration-interaction: 120ms;
  --st-motion-duration-sidebar: 160ms;
  --st-motion-duration-loading: 800ms;
  --st-motion-duration-tick: 1000ms;
  --st-motion-duration-feedback: 160ms;
  --st-motion-duration-feedback-hold: 1500ms;
  --st-motion-duration-tooltip-delay: 500ms;
  --st-motion-easing-default: cubic-bezier(0.2,0,0,1);
  --st-motion-easing-out: cubic-bezier(0,0,0.2,1);
  --st-motion-easing-emphasized: cubic-bezier(0.3,0,0,1);
  --st-motion-easing-pixel: steps(8, end);
  --st-motion-press-offset: 1px;
  --st-geometry-notch: 5px;
  --st-pattern-paper: repeating-linear-gradient(135deg, var(--st-pattern-ink, currentColor) 0 1px, transparent 1px 5px);
  color-scheme: dark;
}

/*
 * Landing-local tokens. The marketing layer is monotone (LP-D015): neutral
 * surfaces and ink only, no accent hue. Product scenes keep the product
 * palette from @structure/tokens (LP-D016). Light values sit on the product's
 * paper neutrals, dark values on its near-black, so a scene never looks
 * pasted onto a foreign page.
 *
 * Tokens only, no rules: landing.css imports it, and the futures decoder
 * (tools/futures-decoder/scripts/build.ts) puts it into its own stylesheet.
 */
:root,
[data-st-theme="light"] {
  color-scheme: light;
  --lp-canvas: #fbfbf9;
  --lp-canvas-raised: #fefefc;
  --lp-well: #f4f3ef;
  --lp-ink: #121417;
  --lp-ink-2: #4a4c50;
  --lp-ink-3: #7c7e81;
  --lp-ink-4: #a7a8a8;
  --lp-rule: #e6e5e1;
  --lp-rule-2: #d4d3cf;
  --lp-rule-strong: #9d9e9c;
  --lp-hatch: rgba(18, 20, 23, 0.11);
  --lp-dot: rgba(18, 20, 23, 0.16);
  --lp-inverse-canvas: #0b0c0e;
  --lp-inverse-ink: #eceef0;
  --lp-shot-shadow:
    0 1px 0 rgba(18, 20, 23, 0.04),
    0 24px 48px -24px rgba(18, 20, 23, 0.22),
    0 64px 96px -48px rgba(18, 20, 23, 0.18);
  --lp-overlay-shadow:
    0 1px 0 rgba(18, 20, 23, 0.06),
    0 18px 40px -12px rgba(18, 20, 23, 0.28);
}

[data-st-theme="dark"] {
  color-scheme: dark;
  --lp-canvas: #08090a;
  --lp-canvas-raised: #0d0e10;
  --lp-well: #111214;
  --lp-ink: #eceef0;
  --lp-ink-2: #a3a6aa;
  --lp-ink-3: #6f7276;
  --lp-ink-4: #4a4c50;
  --lp-rule: #1a1b1e;
  --lp-rule-2: #25272a;
  --lp-rule-strong: #45474b;
  --lp-hatch: rgba(236, 238, 240, 0.07);
  --lp-dot: rgba(236, 238, 240, 0.12);
  --lp-inverse-canvas: #fbfbf9;
  --lp-inverse-ink: #121417;
  --lp-shot-shadow:
    0 0 0 1px rgba(236, 238, 240, 0.04),
    0 32px 64px -32px rgba(0, 0, 0, 0.9),
    0 80px 120px -60px rgba(0, 0, 0, 0.8);
  --lp-overlay-shadow:
    0 0 0 1px rgba(236, 238, 240, 0.06),
    0 24px 48px -16px rgba(0, 0, 0, 0.85);
}

:root {
  --lp-font-sans: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
  --lp-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --lp-font-display: var(--lp-font-sans);
  --lp-container: 1296px;
  --lp-gutter: clamp(20px, 4vw, 56px);
  --lp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --lp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --lp-control-height: 40px;
  --lp-control-radius: 0px;
  /*
   * Use instead of vh/svh. index.html replaces it with the window's height in
   * px, re-read on touch devices only when the width changes: Firefox for iOS
   * resizes every viewport unit, svh included, as its toolbars slide in and
   * out while scrolling, which stretched the hero field and shifted the page.
   */
  --lp-viewport-height: 100svh;
}

/*
 * Futures symbol decoder styles, in the Structure design language (stxr-ui):
 * monospace by default, 0px radius with notched panels, 1px rules instead of
 * shadows, stepped "pixel" motion. The fonts and every --st-* token (colours of
 * the default "structure" palette, type, spacing, sizes, motion) are the app's:
 * scripts/build.ts puts stxr-ui's built @structure/tokens/standalone.css ahead
 * of this file. The site's chrome (header, beta notice, footer, panels), the
 * call to action's copy, the page title and the buttons are marketing type and
 * use the site's --lp-* tokens (src/foundation/landing-tokens.css, LP-D142),
 * which the build puts between the two. Only the page-level values below are
 * the decoder's own.
 */

:root {
  --rule: var(--st-stroke-standard) solid var(--st-color-border-default);
  --page: 1040px;
  /* Space between the page's sections: results, month codes, pitch, footer. The app's spacing scale stops at 16px. */
  --section-space: 32px;
  /* The console's room above the input and below it. */
  --console-top: 28px;
  --console-bottom: 20px;
  /* The least room above the call to action (under the month codes) and below it (over the footer). */
  --pitch-space: 112px;
  /* The site's header height and muted ink (data-field.css `.lp-dir-data-field`). */
  --df-header-height: 52px;
  --df-ink-3: #66686b;
  /* The beta notice's height before src/chrome.ts measures it: site.css's estimate, one step per line. */
  --site-notice-height: 49px;
}

[data-st-theme="dark"] {
  --df-ink-3: #8a8d91;
}

@media (max-width: 1159px) {
  :root {
    --site-notice-height: 61px;
  }
}

@media (max-width: 649px) {
  :root {
    --site-notice-height: 81px;
  }
}

@media (max-width: 469px) {
  :root {
    --site-notice-height: 101px;
  }
}

@media (max-width: 389px) {
  :root {
    --site-notice-height: 121px;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--st-color-surface-app);
  color: var(--st-color-content-primary);
  font: var(--st-type-body-dense);
  /* In-page links (the notice's to the footer notes, the results' entries) land below the header and the notice, as on the site. */
  scroll-padding-top: calc(76px + var(--site-notice-height));
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main fills the room above the footer, so the pitch can sit centered in what is left under the month codes. It starts below the header and the notice pinned over it. */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--df-header-height) + var(--site-notice-height));
}

a {
  color: inherit;
  text-underline-offset: 2px;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: var(--st-stroke-focus) solid var(--st-color-border-focus);
  outline-offset: 2px;
}

.eyebrow {
  font: var(--st-type-section-label);
  letter-spacing: var(--st-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--st-color-content-secondary);
}

[hidden] {
  display: none !important;
}

.muted {
  color: var(--st-color-content-secondary);
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--st-space-inset-panel);
}

/* ---------- The site's header and beta notice ---------- */
/*
 * The site's header (src/directions/data-field/Header.tsx, data-field.css `.df-header*`) and beta notice
 * (src/site/SiteLayout.tsx, site.css `.site-notice*`) with the base controls they use (landing.css
 * `.lp-button`, `.lp-icon-button`, `.lp-theme-icon`, `.lp-link`, `.lp-wordmark`): the site's rules on its
 * --lp-* tokens, without landing.css's :where(), so they win over this file's `a` and `button` rules.
 */
.df-header,
.site-notice {
  color: var(--lp-ink);
  font: 400 16px/1.5 var(--lp-font-sans);
}

.lp-button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid var(--lp-rule-strong);
  border-radius: var(--lp-control-radius);
  color: var(--lp-ink);
  cursor: pointer;
  display: inline-flex;
  font: 500 14px/1 var(--lp-font-sans);
  gap: 10px;
  height: var(--lp-control-height);
  justify-content: center;
  letter-spacing: -0.005em;
  padding: 0 18px;
  text-decoration: none;
  transition:
    background-color 160ms var(--lp-ease-out),
    border-color 160ms var(--lp-ease-out),
    color 160ms var(--lp-ease-out),
    transform 160ms var(--lp-ease-out);
  white-space: nowrap;
}

.lp-button:hover {
  border-color: var(--lp-ink);
}

.lp-button:active {
  transform: translateY(1px);
}

.lp-button:focus-visible,
.lp-icon-button:focus-visible,
.lp-link:focus-visible {
  outline: 2px solid var(--lp-ink);
  outline-offset: 3px;
}

.lp-button[data-tone="primary"] {
  background: var(--lp-ink);
  border-color: var(--lp-ink);
  color: var(--lp-canvas);
}

.lp-button[data-tone="primary"]:hover {
  background: color-mix(in oklab, var(--lp-ink) 86%, var(--lp-canvas));
}

.lp-button[data-size="small"] {
  font-size: 13px;
  height: 32px;
  padding: 0 14px;
}

.lp-button__arrow {
  transition: transform 200ms var(--lp-ease-out);
}

.lp-button:hover .lp-button__arrow {
  transform: translateX(3px);
}

.lp-icon-button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid var(--lp-rule-2);
  border-radius: var(--lp-control-radius);
  color: var(--lp-ink-2);
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  padding: 0;
  transition: border-color 160ms var(--lp-ease-out), color 160ms var(--lp-ease-out);
  width: 32px;
}

.lp-icon-button:hover {
  border-color: var(--lp-ink);
  color: var(--lp-ink);
}

.lp-theme-icon {
  display: inline-flex;
}

:root:not([data-st-theme="dark"]) .lp-theme-icon[data-theme-icon="dark"],
[data-st-theme="dark"] .lp-theme-icon[data-theme-icon="light"] {
  display: none;
}

.lp-link {
  color: inherit;
  text-decoration: none;
}

.lp-wordmark {
  align-items: center;
  color: var(--lp-ink);
  display: inline-flex;
  gap: 9px;
}

.lp-wordmark__text {
  font: 560 17px/1 var(--lp-font-sans);
  letter-spacing: -0.025em;
}

.df-header {
  height: 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.df-header__bar {
  align-items: center;
  backdrop-filter: blur(16px) saturate(1.1);
  background: color-mix(in oklab, var(--lp-canvas-raised) 78%, transparent);
  border-bottom: 1px solid var(--lp-rule-2);
  display: flex;
  gap: 8px;
  height: var(--df-header-height);
  inset-inline: 0;
  padding-inline: max(var(--lp-gutter), calc((100% - var(--lp-container)) / 2));
  position: absolute;
  top: 0;
}

.df-header__home {
  align-items: center;
  display: inline-flex;
  height: 36px;
  padding-inline: 4px 20px;
}

.df-header__home:focus-visible,
.df-header__link:focus-visible,
.df-header__sheet-link:focus-visible {
  outline: 2px solid var(--lp-ink);
  outline-offset: -2px;
}

.df-header__nav {
  align-items: center;
  border-inline-start: 1px solid var(--lp-rule-2);
  display: flex;
  height: 20px;
  padding-inline-start: 8px;
}

.df-header__link {
  align-items: center;
  color: var(--lp-ink-2);
  display: inline-flex;
  font: 450 14px/1 var(--lp-font-sans);
  height: 36px;
  letter-spacing: -0.005em;
  padding-inline: 12px;
  transition: color 160ms var(--lp-ease-out);
}

.df-header__link:hover {
  color: var(--lp-ink);
}

.df-header__actions {
  align-items: center;
  display: flex;
  margin-inline-start: auto;
}

.df-header__cta {
  --lp-control-height: 36px;
  margin-inline-end: 8px;
  min-width: 156px;
}

.df-header__icon.lp-icon-button {
  height: 36px;
  width: 36px;
}

.df-header__icon + .df-header__icon {
  margin-inline-start: -1px;
}

.df-header .df-header__menu-toggle {
  display: none;
}

.df-header__sheet {
  background: var(--lp-canvas-raised);
  border: 1px solid var(--lp-rule-2);
  box-shadow: var(--lp-overlay-shadow);
  display: grid;
  left: 50%;
  padding: 8px;
  position: absolute;
  top: calc(var(--df-header-height) + 8px);
  transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--lp-gutter) + 16px), calc(var(--lp-container) + 16px));
}

.df-header__sheet-link {
  align-items: center;
  border-bottom: 1px solid var(--lp-rule);
  color: var(--lp-ink);
  display: flex;
  font: 400 20px/1 var(--lp-font-sans);
  gap: 16px;
  height: 56px;
  letter-spacing: -0.02em;
  padding-inline: 8px;
}

.df-header__sheet-index {
  color: var(--df-ink-3);
  font: 500 11px/1 var(--lp-font-mono);
  letter-spacing: 0.08em;
}

.df-header__sheet-cta {
  --lp-control-height: 48px;
  justify-content: space-between;
  margin-top: 16px;
}

@media (max-width: 899px) {
  .df-header__nav {
    display: none;
  }

  .df-header .df-header__menu-toggle {
    display: inline-flex;
  }
}

@media (max-width: 479px) {
  .df-header__home {
    padding-inline-end: 8px;
  }

  .df-header__cta {
    min-width: 0;
    padding-inline: 14px;
  }
}

.site-notice {
  height: 0;
  position: sticky;
  top: var(--df-header-height);
  /* Under the header, whose menu sheet opens over it. */
  z-index: 49;
}

/* One centred line where it fits; an empty first column balances the dismiss button so the text centres on the bar. */
.site-notice__bar {
  align-items: center;
  background: var(--lp-well);
  border-block-end: 1px solid var(--lp-rule);
  color: var(--lp-ink-2);
  display: grid;
  font-size: 15px;
  gap: 16px;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  inset-inline: 0;
  line-height: 20px;
  padding-block: 10px;
  padding-inline: max(var(--lp-gutter), calc((100% - var(--lp-container)) / 2));
  position: absolute;
  top: 0;
}

.site-notice__text {
  grid-column: 2;
  margin: 0;
  text-align: center;
  text-wrap: balance;
}

.site-notice strong {
  color: var(--lp-ink);
  font-weight: 500;
}

.site-notice sup {
  font-size: 0.75em;
  line-height: 0;
}

.site-notice a {
  color: var(--lp-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-notice sup a {
  padding-inline: 0.15em;
  text-decoration: none;
}

.site-notice__dismiss.lp-icon-button {
  block-size: 28px;
  inline-size: 28px;
}

/* ---------- Buttons (the site's type, LP-D142) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--st-space-gap-icon);
  height: var(--st-size-control-dense);
  padding: 0 var(--st-space-inset-control-x);
  border: var(--st-stroke-standard) solid var(--st-color-border-default);
  border-radius: 0;
  background: transparent;
  font: 500 14px/1 var(--lp-font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--st-motion-duration-interaction) var(--st-motion-easing-default);
}

.btn:hover {
  background-image: linear-gradient(var(--st-color-layer-hover), var(--st-color-layer-hover));
}

.btn:active {
  background-image: linear-gradient(var(--st-color-layer-pressed), var(--st-color-layer-pressed));
  transform: translateY(1px);
}

.btn.compact {
  height: var(--st-size-control-compact);
  padding: 0 var(--st-space-inset-control-compact-x);
  font: 500 13px/1 var(--lp-font-sans);
}

.btn.primary {
  background: var(--st-color-action-primary);
  border-color: var(--st-color-action-primary);
  color: var(--st-color-action-primary-content);
}

.btn.primary:hover {
  background: var(--st-color-action-primary-hover);
}

kbd {
  font: var(--st-type-caption);
  border: var(--rule);
  padding: 0 var(--st-space-gap-micro);
  color: var(--st-color-content-secondary);
}

/* ---------- Console ---------- */
.console {
  padding-top: var(--console-top);
  padding-bottom: var(--console-bottom);
}

.console h1 {
  font: 400 clamp(32px, 16px + 2.4vw, 52px) / 1.08 var(--lp-font-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0 0 var(--st-space-gap-section);
}

.field {
  margin-top: var(--st-space-gap-icon);
  display: flex;
  align-items: center;
  gap: var(--st-space-gap-compact);
  height: 52px;
  padding: 0 var(--st-space-gap-compact) 0 var(--st-space-inset-panel);
  background: var(--st-color-surface-input);
  border: var(--st-stroke-standard) solid var(--st-color-border-strong);
}

.field:focus-within {
  border-color: var(--st-color-border-focus);
  outline: var(--st-stroke-focus) solid var(--st-color-border-focus);
  outline-offset: 2px;
}

.field .prompt {
  font: var(--st-type-data-metric);
  color: var(--st-color-content-muted);
}

.field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--st-color-content-primary);
  font: var(--st-type-data-metric);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.field input::placeholder {
  color: var(--st-color-content-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* The format the input was written in: muted, at the right of the field. */
.field .format {
  flex: none;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: var(--st-type-caption);
  color: var(--st-color-content-muted);
}

.field .format select {
  max-width: 100%;
  font: inherit;
  color: var(--st-color-content-secondary);
  background: transparent;
  border: 0;
  border-bottom: var(--rule);
  cursor: pointer;
}

.choices .btn[aria-pressed="true"] {
  background: var(--st-color-surface-selected);
}

.examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--st-space-gap-micro) var(--st-space-gap-compact);
}

/* ---------- Panels ---------- */
.results {
  display: flex;
  flex-direction: column;
  gap: var(--st-space-gap-section);
  padding-bottom: var(--section-space);
}

.panel {
  background: var(--st-color-surface-card);
  border: var(--rule);
  border-radius: 0;
}

@supports (corner-shape: bevel) {
  .panel {
    border-radius: var(--st-geometry-notch);
    corner-shape: bevel;
  }
}

.panel-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--st-space-gap-compact) var(--st-space-gap-default);
  padding: var(--st-space-inset-panel-dense) var(--st-space-inset-panel);
  border-bottom: var(--rule);
}

.panel-head .symbol {
  font: var(--st-type-data-metric);
  letter-spacing: var(--st-tracking-metric);
}

.panel-head .title {
  font: var(--st-type-module-title);
}

.panel-head .tags {
  margin-left: auto;
  display: flex;
  gap: var(--st-space-gap-micro);
  flex-wrap: wrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 var(--st-space-gap-icon);
  border: var(--rule);
  font: var(--st-type-caption);
  letter-spacing: var(--st-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--st-color-content-secondary);
  white-space: nowrap;
}

.section {
  padding: var(--st-space-gap-default) var(--st-space-inset-panel);
  border-bottom: var(--rule);
}

.section:last-child {
  border-bottom: 0;
}

.section.flush {
  padding: 0;
}

.section > .eyebrow {
  display: block;
  margin-bottom: var(--st-space-gap-compact);
}

.message {
  padding: var(--st-space-gap-default) var(--st-space-inset-panel);
}

/* Key-value grid with hairline dividers (stxr-ui KeyValueList). */
.kv {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  overflow: clip;
}

.kv > * {
  border-bottom: var(--rule);
  border-right: var(--rule);
  margin-right: calc(-1 * var(--st-stroke-standard));
  padding: var(--st-space-gap-compact) var(--st-space-inset-panel);
  min-width: 0;
}

.kv dt {
  font: var(--st-type-caption);
  color: var(--st-color-content-secondary);
  text-transform: uppercase;
  letter-spacing: var(--st-tracking-eyebrow);
}

.kv dd {
  margin: var(--st-space-gap-micro) 0 0;
  font: var(--st-type-label);
  overflow-wrap: anywhere;
}

.kv dd .big {
  font: var(--st-type-module-title);
}

/* The same contract on each platform: a key-value grid; each cell with a code is a button that copies it. */
.section.flush > .eyebrow {
  padding: var(--st-space-gap-default) var(--st-space-inset-panel) 0;
  margin-bottom: var(--st-space-gap-compact);
}

.platforms {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--rule);
}

.platform {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--st-space-gap-micro);
  border-top: 0;
  border-left: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: var(--st-type-label);
}

button.platform {
  cursor: copy;
}

button.platform:hover {
  background: var(--st-color-layer-hover);
}

button.platform:active {
  background: var(--st-color-layer-pressed);
}

button.platform:focus-visible {
  outline: var(--st-stroke-focus) solid var(--st-color-border-focus);
  outline-offset: -2px;
}

.platform .label {
  display: flex;
  width: 100%;
  font: var(--st-type-caption);
  color: var(--st-color-content-secondary);
  text-transform: uppercase;
  letter-spacing: var(--st-tracking-eyebrow);
}

.platform .copied {
  margin-left: auto;
  color: var(--st-color-state-positive);
}

.platform[data-done] .copied {
  animation: stamp var(--st-motion-duration-feedback) var(--st-motion-easing-pixel);
}

/* Bloomberg's switch month: both codes are valid, each copies on its own. */
.code-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--st-space-gap-compact);
}

.code-choice {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: copy;
}

.code-choice:hover {
  background: var(--st-color-layer-hover);
}

.code-choice:active {
  background: var(--st-color-layer-pressed);
}

.code-choice:focus-visible {
  outline: var(--st-stroke-focus) solid var(--st-color-border-focus);
  outline-offset: 2px;
}

/* Spaces are part of some codes (Databento's ICE "KC  FMH0027!"), so they are kept. */
.platform code {
  font: var(--st-type-label);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
}

@keyframes stamp {
  from {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  font: var(--st-type-table-header);
  text-transform: uppercase;
  letter-spacing: var(--st-tracking-eyebrow);
  color: var(--st-color-content-secondary);
  text-align: left;
  padding: var(--st-space-inset-control-y) var(--st-space-inset-panel);
  border-bottom: var(--rule);
  white-space: nowrap;
}

td {
  padding: 0 var(--st-space-inset-panel);
  height: var(--st-size-row-dense);
  border-bottom: var(--st-stroke-standard) solid var(--st-color-border-subtle);
  white-space: nowrap;
}

tbody tr {
  cursor: pointer;
}

tbody tr:hover td {
  background: var(--st-color-layer-hover);
}

td.num,
th.num {
  text-align: right;
}

td b {
  font-weight: 600;
}

/* ---------- Reference ---------- */
.reference {
  padding-top: 0;
  padding-bottom: var(--section-space);
  display: flex;
  flex-direction: column;
  gap: var(--st-space-gap-default);
}

.reference h2 {
  font: var(--st-type-module-title);
  text-transform: uppercase;
  letter-spacing: var(--st-tracking-eyebrow);
  margin: 0;
}

.codes {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border-left: var(--rule);
  border-top: var(--rule);
}

.codes div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--st-space-gap-section-compact) 0;
  border-right: var(--rule);
  border-bottom: var(--rule);
}

.codes b {
  font: var(--st-type-data-metric);
}

.codes span {
  font: var(--st-type-caption);
  color: var(--st-color-content-secondary);
  text-transform: uppercase;
}

/* The months of the contracts entered, in the selected-state colour the reading pickers use. */
.codes .on {
  background: var(--st-color-surface-selected);
}

.codes .on span {
  color: var(--st-color-content-primary);
}

/* ---------- Pitch ---------- */
/*
 * Centered between the month codes and the footer: the auto margins share any free space, and the
 * padding keeps at least --pitch-space above and below it when there is none (the footer is taller
 * than the viewport's leftover room on most screens).
 */
.pitch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--st-space-gap-default) var(--st-space-gap-section);
  margin-block: auto;
  padding-block: var(--pitch-space);
}

/* The copy is marketing, in the site's type: its closing title scaled down, its support line and fine print (cursor-structure.css). */
.pitch h2 {
  font: 400 clamp(28px, 16px + 2vw, 40px) / 1.1 var(--lp-font-display);
  letter-spacing: -0.03em;
  color: var(--lp-ink);
  text-wrap: balance;
  margin: 0 0 var(--st-space-gap-compact);
}

.pitch .pitch-line {
  margin: 0 0 var(--st-space-gap-micro);
  font: 400 clamp(17px, 14.4px + 0.35vw, 20px) / 1.5 var(--lp-font-sans);
  letter-spacing: -0.012em;
  color: var(--lp-ink-2);
}

.pitch .pitch-sub {
  margin: 0;
  font: 400 13px / 1.5 var(--lp-font-sans);
  color: var(--lp-ink-2);
}

/* Narrow enough that the button fits beside it on desktop. */
.pitch-body {
  flex: 1 1 420px;
  max-width: 620px;
}

.btn.large {
  height: 32px;
  padding: 0 var(--st-space-inset-panel);
  text-decoration: none;
}

/* ---------- Footer ---------- */
/*
 * The site's footer (src/site/SiteLayout.tsx), built from its data by scripts/build.ts and styled
 * like it (site.css `.site-footer*`, cursor-structure.css `.cs-footer*`) on the --lp-* tokens:
 * wordmark and link columns, the footnotes under a rule, then the legal lines beside Cookie
 * settings and the theme toggle under another. It keeps the page's width (`.wrap`).
 */
.site-footer {
  margin-top: auto;
  padding-block: 56px 32px;
  border-top: 1px solid var(--lp-rule);
  background: var(--lp-canvas);
  color: var(--lp-ink);
  font: 400 16px/1.5 var(--lp-font-sans);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px 16px;
}

.site-footer__brand {
  grid-column: 1 / span 4;
  align-self: start;
  justify-self: start;
  text-decoration: none;
}

.site-footer__brand:focus-visible,
.site-footer__link:focus-visible {
  outline: 2px solid var(--lp-ink);
  outline-offset: 4px;
}

.site-footer__columns {
  grid-column: 5 / span 8;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 16px;
}

.site-footer__title {
  margin: 0 0 14px;
  color: var(--lp-ink-3);
  font: 500 11px/16px var(--lp-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer__links {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__link {
  color: var(--lp-ink-2);
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}

.site-footer__link:hover {
  color: var(--lp-ink);
}

.site-footer__notes {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--lp-rule);
  color: var(--lp-ink-2);
  font-size: 13px;
}

.site-footer__notes p {
  margin: 0;
  line-height: 20px;
}

.site-footer__notes sup {
  font-size: 0.75em;
  line-height: 0;
}

/* The controls line up with the address, the legal block's last line. */
.site-footer__base {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--lp-rule);
  color: var(--lp-ink-2);
  font-size: 13px;
}

.site-footer__legal {
  display: grid;
  gap: 4px;
}

.site-footer__legal a {
  color: var(--lp-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Cookie settings, then the theme toggle at the far right. */
.site-footer__controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-footer__cookies {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lp-ink-2);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

@media (max-width: 1023px) {
  .site-footer__brand,
  .site-footer__columns {
    grid-column: 1 / -1;
  }
}

/* Copyright and address, then Cookie settings (consent regions only) at the left and the theme toggle at the right. */
@media (max-width: 767px) {
  .site-footer__base {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .site-footer__controls {
    justify-content: flex-end;
  }

  .site-footer__cookies {
    margin-inline-end: auto;
  }

  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Cookie consent ---------- */
/* The site's banner (site.css `.site-banner`, buttons landing.css `.lp-button` primary small), pinned to the bottom of the window. */
.consent {
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  z-index: 50;
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 16px 20px;
  background: var(--lp-canvas-raised);
  border: 1px solid var(--lp-rule-2);
  box-shadow: var(--lp-overlay-shadow);
  color: var(--lp-ink);
  font: 400 16px/1.5 var(--lp-font-sans);
}

.consent p {
  margin: 0;
  color: var(--lp-ink-2);
  font-size: 14px;
  line-height: 20px;
}

.consent p a {
  color: var(--lp-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 760px) {
  .kv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .codes {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  /* Esc means nothing on touch screens; the room goes to the symbol and its format. */
  .field kbd {
    display: none;
  }

  .field .format {
    max-width: 30%;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}