:root {
  color-scheme: light;
  --page: #f9f9f9;
  --surface: #ffffff;
  --surface-muted: #f6f6f6;
  --surface-hover: #f4f4f4;
  --surface-active: #ededed;
  /* Overlay surfaces (menus, dialogs, tooltips). Light mode shares the card
     white; dark mode steps one lightness above --surface so floated chrome
     reads raised, not cut out. */
  --surface-raised: #ffffff;
  --ink: #242426;
  --ink-body: #303033;
  --on-ink: #ffffff;
  --muted: #6b6b6b;
  --muted-strong: #48484b;
  --hairline: 1px;
  /* Hairlines are translucent ink, not opaque grays: the same token composites
     correctly over the page, cards, and tinted fills, and edges read as depth
     rather than drawn outlines. Flattened on white these read #eaeaea /
     #dedede / #b0b0ae / #d2d2d2 — a hair lighter than the retired opaque
     #e8e8e8 / #dddddd / #aaa9a5 / #d0d0d0, which is the intended softening. */
  --line: rgb(17 17 17 / 9%);
  --line-strong: rgb(17 17 17 / 14%);
  --line-stronger: rgb(23 22 16 / 34%);
  --control-border: rgb(17 17 17 / 19%);
  --control-border-subtle: color-mix(in srgb, var(--line) 68%, transparent);
  --control-border-quiet: color-mix(in srgb, var(--line) 48%, transparent);
  --info-surface: #f4f7ff;
  --info-line: #c9d7ff;
  --info-ink: #17346f;
  --ok: #1f8a5b;
  --warn: #c47a1c;
  --danger: #b42318;
  --danger-surface: #fff1f0;
  --danger-line: #ffd1cc;
  --danger-line-strong: #f2b8b5;
  --danger-surface-strong: #ffe2df;
  --ok-surface: #ecf7f1;
  --ok-line: #cce9db;
  --warn-surface: #fdf5e9;
  --warn-line: #f1dcbb;
  --meter-fill: var(--accent);
  --chart-series-1: #6b8cce;
  --chart-series-2: #8e7cc3;
  --chart-series-3: #58a779;
  --chart-series-4: #d39a42;
  /* The "Other models" fold bucket: a low-chroma neutral that reads as
     accounting, never as a fifth named series. */
  --chart-series-other: #a3a3ab;
  --admin-mix-share: 0%;
  --admin-trend-requests: 0%;
  --admin-trend-errors: 0%;
  --unknown: #8a8a8a;
  --overlay: rgb(0 0 0 / 42%);
  --shadow-subtle: 0 1px 2px rgb(0 0 0 / 4%);
  --shadow-card: none;
  /* Floating chrome carries its edge inside the shadow stack (a 0.5px keyline
     ring) instead of a CSS border: the ring hugs the radius at every zoom and
     never adds a hard color stop against the panel fill. Menus and popovers
     are borderless and use --shadow-popover; dialogs keep a --line border and
     use --shadow-modal; the chat composer uses --shadow-composer. */
  --shadow-popover: 0 0 0 0.5px rgb(0 0 0 / 12%), 0 2px 6px rgb(0 0 0 / 5%),
    0 9px 24px rgb(0 0 0 / 9%);
  --shadow-modal: 0 0 0 0.5px rgb(0 0 0 / 7%), 0 4px 12px rgb(0 0 0 / 7%),
    0 24px 48px -12px rgb(0 0 0 / 22%);
  --shadow-composer: 0 0 0 0.5px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%),
    0 12px 44px rgb(0 0 0 / 6%);
  --brand-blue: #3157d5;
  --brand-dot: var(--brand-blue);
  --accent: #3157d5;
  --accent-surface: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-ink: var(--accent);
  /* Filled accent controls (the chat send circle). Decoupled from --accent so
     dark mode keeps its light link/focus accent while the fill stays a decisive
     cobalt under a white glyph in both themes. */
  --accent-fill: var(--accent);
  --on-accent-fill: #ffffff;
  --link-quiet: color-mix(in srgb, var(--accent) 42%, var(--muted-strong));
  --link-quiet-hover: color-mix(in srgb, var(--accent) 34%, var(--ink));
  --google-blue: #4285f4;
  --google-green: #34a853;
  --google-yellow: #fbbc05;
  --google-red: #ea4335;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica,
    Arial, ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-product-id: var(--font-sans);
  --tracking-tight: -0.01em;
  --font-size-base: 16px;
  --text-xs: 12px;
  --text-xs-line: 16px;
  --text-sm: 14px;
  --text-sm-line: 20px;
  --text-base: 16px;
  --text-base-line: 24px;
  --text-lg: 18px;
  --text-lg-line: 28px;
  --text-xl: 20px;
  --text-xl-line: 28px;
  --text-2xl: 24px;
  --text-2xl-line: 32px;
  --text-3xl: 36px;
  --text-3xl-line: 40px;
  --text-page-title: var(--text-3xl);
  --text-page-title-line: var(--text-3xl-line);
  --space-05: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;
  --space-17: 68px;
  --space-18: 72px;
  --space-19: 76px;
  --space-20: 80px;
  --space-21: 84px;
  --space-22: 88px;
  --space-23: 92px;
  --space-24: 96px;
  --sidebar-width: 260px;
  --sidebar-collapsed-width: var(--space-15);
  --sidebar-collapsed-glyph-size: var(--icon-size-sm);
  --content-max-width: 100%;
  --resource-panel-max-width: 1040px;
  --control-height: 44px;
  --control-height-compact: 36px;
  --control-height-toolbar: 32px;
  --control-height-pill: 28px;
  --resource-filter-chip-max-width: 240px;
  --form-control-height: var(--control-height-compact);
  --form-label-row: calc(var(--text-sm-line) + var(--space-2));
  --control-radius: var(--radius-md);
  --control-padding-x: var(--space-3);
  --control-gap: var(--space-2);
  /* Segmented pill controls (mode pickers): a borderless capsule track with
     a thumb one lightness step ABOVE it in both themes. The overlay ladder
     cannot provide this pair (dark hover/active sit above --surface-raised),
     hence dedicated aliases. */
  --segmented-track-bg: var(--surface-active);
  --segmented-thumb-bg: var(--surface);
  --segmented-control-height: var(--control-height-toolbar);
  --segmented-control-padding: var(--space-1);
  --segmented-control-gap: var(--space-1);
  --segmented-control-item-height: calc(
    var(--segmented-control-height) - (var(--segmented-control-padding) * 2)
  );
  --chip-action-size: 22px;
  --status-dot-size: 6px;
  --resource-search-min-width: 194px;
  --resource-search-fluid-width: 20vw;
  --resource-search-max-width: 280px;
  --resource-filter-menu-min-width: 172px;
  --resource-filter-field-menu-min-width: 260px;
  --resource-filter-group-gap: var(--space-2);
  --resource-filter-chip-gap: var(--space-1);
  --resource-filter-chip-padding-inline-start: var(--space-3);
  --resource-filter-chip-padding-inline-end: var(--space-1);
  --resource-window-chip-gap: var(--space-1);
  --resource-window-chip-padding-inline: var(--space-2);
  --resource-filter-check-size: var(--space-4);
  --resource-window-check-size: var(--icon-size-xs);
  --resource-sort-width: 190px;
  --org-switcher-menu-min-width: 240px;
  --project-switcher-role-gap: var(--space-2);
  --account-menu-trigger-height: var(--space-16);
  --account-menu-trigger-avatar-size: var(--space-10);
  --account-menu-popover-gap: var(--space-2);
  --shell-popover-mobile-max-width: 320px;
  --shell-popover-width: var(--shell-popover-mobile-max-width);
  --shell-popover-max-height: 680px;
  --shell-main-z-index: 0;
  --shell-sidebar-z-index: 220;
  --shell-popover-z-index: 320;
  /* Transient, pointer-events-none surfaces (portal tooltips) paint above
     popovers; briefly overlapping the sidebar edge is correct for them. */
  --shell-tooltip-z-index: 340;
  --empty-state-max-width: 520px;
  --panel-empty-state-max-width: var(--empty-state-max-width);
  --empty-table-stack-max-width: 420px;
  --state-block-skeleton-width: 320px;
  --state-block-skeleton-metric-width: 240px;
  --console-error-state-max-width: 640px;
  --mobile-project-width-min: 136px;
  --mobile-project-width-fluid: 38vw;
  --mobile-project-width-max: 188px;
  --mobile-project-width-compact: 112px;
  --mobile-project-width: clamp(
    var(--mobile-project-width-min),
    var(--mobile-project-width-fluid),
    var(--mobile-project-width-max)
  );
  --icon-size-xs: 14px;
  --icon-size-sm: 16px;
  --icon-size-md: 18px;
  --icon-size-lg: 20px;
  --icon-stroke-width: 1.75;
  --sidebar-toggle-icon-size: var(--icon-size-md);
  --spinner-size-sm: var(--icon-size-sm);
  --spinner-size-md: var(--icon-size-md);
  --spinner-border-width: 2px;
  --definition-label-width: 144px;
  --data-table-min-width: 640px;
  --table-action-column-width: 124px;
  --table-action-button-size: var(--space-7);
  --inline-copy-button-size: var(--space-7);
  --table-row-height: 45px;
  --table-header-height: 30px;
  --table-header-bg: var(--surface-muted);
  --table-header-weight: var(--weight-regular);
  --table-cell-ink: var(--muted-strong);
  --table-cell-padding-block: var(--space-2);
  --table-cell-padding-inline: var(--space-3);
  --skeleton-bg: var(--surface-muted);
  --table-cell-edge-padding: var(--space-5);
  --table-empty-padding-block: var(--space-8);
  --table-card-row-gap: 10px;
  --table-card-cell-padding-block: 6px;
  --table-card-label-gap: 1px;
  --table-card-label-min-width: 88px;
  --table-card-label-fluid-width: 34%;
  --table-card-label-track: minmax(
    var(--table-card-label-min-width),
    var(--table-card-label-fluid-width)
  );
  --mobile-touch-target-size: var(--control-height);
  --chip-touch-target-size: var(--mobile-touch-target-size);
  --metric-card-min-height: var(--space-20);
  --metric-card-column-min-width: 220px;
  --home-metric-card-column-min-width: 248px;
  --home-model-card-width: 262px;
  --home-model-card-band-height: 124px;
  --home-model-card-band-height-mobile: 96px;
  --home-model-card-body-min-height: 104px;
  --home-model-card-body-padding: var(--space-4);
  /* Home model sparklines (dormant, H-1 withdrawn 2026-07-09; the cards
     paint the edition band again): real 14-day per-model series drawn as
     micro-bars in the Pulse/Usage chart family (top corners carry the
     --radius-sm family radius scaled down to the mark). Ink derives from
     the usage-chart series hue at reduced strength; the translucent mix
     composites over either theme's surface (and --chart-series-1 already
     re-themes), so no dark override is needed. */
  --home-model-spark-height: 56px;
  --home-model-spark-bar-radius: calc(var(--radius-sm) / 4);
  --home-model-spark-bar-min-height: 2px;
  --home-model-spark-trail-ink: color-mix(in srgb, var(--chart-series-1) 45%, transparent);
  --home-model-spark-final-ink: color-mix(in srgb, var(--chart-series-1) 80%, transparent);
  --home-pulse-rail-width: 280px;
  --home-pulse-chart-height: 120px;
  --home-pulse-value-text: var(--text-3xl);
  --home-pulse-value-line: var(--text-3xl-line);
  --home-pulse-meter-track: var(--surface-active);
  --home-pulse-meter-fill-min-width: var(--space-05);
  --home-pulse-action-gap: var(--space-3);
  --home-pulse-action-row-margin-top: var(--space-1);
  --home-card-shadow: 0 0 0 0.5px rgb(0 0 0 / 3%),
    0 1px 2px rgb(0 0 0 / 4%), 0 8px 22px rgb(0 0 0 / 4%);
  --home-card-hover-shadow: 0 0 0 0.5px rgb(0 0 0 / 6%),
    0 2px 5px rgb(0 0 0 / 8%), 0 14px 32px rgb(0 0 0 / 8%);
  --home-card-hover-transform: translateY(calc(-1 * var(--space-05)));
  /* Edition bands: flat print ramp — the depth step encodes the tier
     (fast lightest .. frontier deepest). Paper ramp here; the dark theme
     block overrides to the dusk ramp. Motif is the engraved figure.
     Restored straight to the console Home cards (operator call 2026-07-09);
     the public docs model tiles keep deriving from the ramp colors. */
  --edition-band-fast-bg: #eaf0f5;
  --edition-band-efficient-bg: #d7e2ec;
  --edition-band-balanced-bg: #82a4c0;
  --edition-band-frontier-bg: #3f5f7d;
  --edition-band-motif-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpolyline points='14,32 23,27 32,22 41,17 50,12' fill='none' stroke='%2346617a' stroke-width='1' stroke-opacity='0.45'/%3E%3Ccircle cx='14' cy='32' r='2' fill='%2346617a' fill-opacity='0.85'/%3E%3Ccircle cx='23' cy='27' r='2' fill='%2346617a' fill-opacity='0.85'/%3E%3Ccircle cx='32' cy='22' r='2' fill='%2346617a' fill-opacity='0.85'/%3E%3Ccircle cx='41' cy='17' r='2' fill='%2346617a' fill-opacity='0.85'/%3E%3Ccircle cx='50' cy='12' r='2' fill='%2346617a' fill-opacity='0.85'/%3E%3C/svg%3E");
  --edition-band-keyline-paper: rgb(20 40 60 / 16%);
  --edition-band-keyline: rgb(20 40 60 / 16%);
  --edition-band-keyline-deep: rgb(240 246 252 / 26%);
  --edition-band-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpolyline points='14,32 23,27 32,22 41,17 50,12' fill='none' stroke='%2346617a' stroke-width='1' stroke-opacity='0.45'/%3E%3Ccircle cx='14' cy='32' r='2' fill='%2346617a' fill-opacity='0.85'/%3E%3Ccircle cx='23' cy='27' r='2' fill='%2346617a' fill-opacity='0.85'/%3E%3Ccircle cx='32' cy='22' r='2' fill='%2346617a' fill-opacity='0.85'/%3E%3Ccircle cx='41' cy='17' r='2' fill='%2346617a' fill-opacity='0.85'/%3E%3Ccircle cx='50' cy='12' r='2' fill='%2346617a' fill-opacity='0.85'/%3E%3C/svg%3E");
  --edition-band-motif-deep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpolyline points='14,32 23,27 32,22 41,17 50,12' fill='none' stroke='%23dfe9f2' stroke-width='1' stroke-opacity='0.45'/%3E%3Ccircle cx='14' cy='32' r='2' fill='%23dfe9f2' fill-opacity='0.85'/%3E%3Ccircle cx='23' cy='27' r='2' fill='%23dfe9f2' fill-opacity='0.85'/%3E%3Ccircle cx='32' cy='22' r='2' fill='%23dfe9f2' fill-opacity='0.85'/%3E%3Ccircle cx='41' cy='17' r='2' fill='%23dfe9f2' fill-opacity='0.85'/%3E%3Ccircle cx='50' cy='12' r='2' fill='%23dfe9f2' fill-opacity='0.85'/%3E%3C/svg%3E");
  --home-api-base-code-max-width: min(48vw, 420px);
  --admin-metric-card-column-min-width: var(--metric-card-column-min-width);
  --admin-health-ribbon-card-min-width: 180px;
  --admin-trend-card-min-width: 240px;
  --api-keys-table-min-width: 1202px;
  --api-keys-name-col-fluid-width: 16%;
  --api-keys-name-col-width: 260px;
  --api-keys-status-col-width: 96px;
  --api-keys-tracking-col-fluid-width: 13%;
  --api-keys-tracking-col-width: 172px;
  --api-keys-secret-col-fluid-width: 11%;
  --api-keys-secret-col-width: 136px;
  --api-keys-date-col-fluid-width: 9%;
  --api-keys-date-col-width: 132px;
  --api-keys-created-by-col-fluid-width: 12%;
  --api-keys-created-by-col-width: 148px;
  --api-keys-limits-col-fluid-width: 10%;
  --api-keys-limits-col-width: 150px;
  --api-key-empty-state-max-width: 360px;
  --api-key-empty-icon-size: 42px;
  --api-key-empty-icon-glyph-size: var(--icon-size-lg);
  --models-table-min-width: 960px;
  --models-table-card-breakpoint: 960px;
  --models-table-cell-vertical-align: middle;
  --models-model-col-width: 31%;
  --models-best-for-col-width: 21%;
  --models-context-col-width: 8%;
  --models-rate-col-width: 8%;
  --models-action-col-width: 160px;
  --models-action-button-min-width: 96px;
  --models-icon-action-size: var(--table-action-button-size);
  --models-framing-border-width: 0;
  --models-framing-border-color: transparent;
  --models-framing-bg: transparent;
  --models-framing-radius: 0;
  --models-framing-shadow: none;
  --models-framing-padding: var(--space-1) 0 var(--space-2);
  --models-framing-gap: var(--space-5);
  --models-framing-copy-max-width: 76ch;
  --logs-time-col-width: 160px;
  --logs-request-col-width: 168px;
  --logs-endpoint-col-width: 160px;
  --logs-model-col-width: 180px;
  --logs-status-col-width: 118px;
  --logs-number-col-width: 112px;
  --logs-action-col-width: var(--space-12);
  --logs-detail-action-size: var(--control-height-toolbar);
  --logs-detail-action-rest-opacity: 0.64;
  --logs-table-min-width: calc(
    var(--logs-time-col-width) + var(--logs-request-col-width) + var(--logs-endpoint-col-width)
      + var(--logs-model-col-width) + var(--logs-status-col-width)
      + var(--logs-number-col-width) + var(--logs-number-col-width)
      + var(--logs-number-col-width) + var(--logs-action-col-width)
  );
  --admin-logs-org-col-width: 172px;
  --admin-logs-key-col-width: 148px;
  --admin-logs-cost-col-width: 118px;
  --admin-logs-table-min-width: calc(
    var(--logs-time-col-width) + var(--admin-logs-org-col-width)
      + var(--logs-request-col-width) + var(--admin-logs-key-col-width)
      + var(--logs-endpoint-col-width) + var(--logs-model-col-width)
      + var(--logs-status-col-width) + var(--logs-number-col-width)
      + var(--logs-number-col-width) + var(--admin-logs-cost-col-width)
      + var(--logs-action-col-width)
  );
  --trace-kind-col-width: 96px;
  --trace-session-col-width: 200px;
  --trace-user-col-width: 180px;
  --trace-model-col-width: 220px;
  --trace-route-col-width: 88px;
  --trace-turns-col-width: var(--logs-number-col-width);
  --trace-requests-col-width: var(--logs-number-col-width);
  --trace-sessions-table-min-width: calc(
    var(--trace-kind-col-width) + var(--trace-session-col-width)
      + var(--admin-logs-org-col-width) + var(--trace-user-col-width)
      + var(--logs-time-col-width) + var(--logs-number-col-width)
      + var(--trace-turns-col-width) + var(--trace-requests-col-width)
      + var(--trace-model-col-width) + var(--logs-number-col-width)
      + var(--admin-logs-cost-col-width) + var(--logs-status-col-width)
  );
  --trace-requests-table-min-width: calc(
    var(--logs-time-col-width) + var(--admin-logs-org-col-width)
      + var(--logs-request-col-width) + var(--logs-endpoint-col-width)
      + var(--trace-model-col-width) + var(--trace-route-col-width)
      + var(--logs-status-col-width) + var(--logs-number-col-width)
      + var(--logs-number-col-width) + var(--admin-logs-cost-col-width)
  );
  --trace-rail-width: 320px;
  --trace-stage-marker-size: 20px;
  --trace-stage-rail-width: 1px;
  /* Bar fill widths are stamped inline by the trace renderer per entry
     (the --admin-mix-share pattern); 0% is the unstamped default. */
  --trace-gnn-size: 0%;
  --trace-latency-size: 0%;
  --trace-field-bar-height: 14px;
  --trace-field-gap: 2px;
  --trace-field-label-width: 148px;
  --trace-field-value-width: 44px;
  --people-detail-panel-min-width: 280px;
  --people-detail-panel-max-width: 340px;
  --people-detail-stack-breakpoint: 1180px;
  --people-roster-card-breakpoint: 820px;
  --roles-identity-col-width: 120px;
  --roles-access-col-width: 152px;
  --roles-count-col-width: 120px;
  --roster-card-label-track: minmax(7rem, 0.35fr);
  --roster-status-col-width: 132px;
  --roster-meta-col-width: 160px;
  --roster-actions-col-width: calc(2 * var(--table-action-column-width));
  --member-role-picker-width: 150px;
  --member-invite-role-min-width: 180px;
  --member-invite-role-max-width: 220px;
  --member-invite-role-menu-min-width: 320px;
  --admin-access-date-col-width: 112px;
  --admin-access-prior-col-width: 56px;
  --admin-access-actions-col-width: 172px;
  --admin-access-usecase-col-fluid-width: 26%;
  --admin-access-note-col-fluid-width: 30%;
  --avatar-size-sm: 28px;
  --avatar-surface: var(--surface-active);
  --avatar-ink: var(--muted-strong);
  --limits-step-marker-size: 20px;
  --limits-step-rail-width: 1px;
  --limits-meter-label-width-min: 120px;
  --limits-meter-label-width-max: 160px;
  --limits-meter-track-width-min: 80px;
  --limits-group-cell-min-width: 160px;
  --limits-summary-chip-min-width: 11rem;
  --limits-current-row-accent-width: 2px;
  --support-status-control-max-width: clamp(176px, 22vw, 248px);
  --support-panel-max-width: 720px;
  --support-address-label-width: 128px;
  --support-address-value-min-width: 12rem;
  --support-history-rail-min-width: 280px;
  --support-health-panel-track: 1.45fr;
  --support-health-history-track: 0.8fr;
  --support-health-row-min-height: var(--control-height-toolbar);
  --support-health-disclosure-icon-size: var(--icon-size-sm);
  --support-status-date-range-width: 220px;
  --support-incident-date-width: 112px;
  --support-incident-marker-size: var(--status-dot-size);
  --support-incident-row-gap: var(--space-3);
  --support-incident-link-target-size: var(--control-height-toolbar);
  --support-incident-field-column-min-width: 160px;
  --billing-record-table-min-width: 880px;
  --billing-record-compact-table-max-width: 720px;
  --billing-record-status-col-width: 152px;
  --billing-record-value-col-width: 144px;
  --billing-record-compact-status-col-width: 132px;
  --billing-record-compact-value-col-width: 120px;
  --billing-record-action-col-width: 96px;
  --billing-action-control-height: var(--control-height-compact);
  --settings-general-panel-max-width: var(--support-panel-max-width);
  --settings-general-definition-label-width: 112px;
  --settings-general-definition-column-gap: var(--space-3);
  --split-grid-column-min-width: 420px;
  --record-badge-padding-y: var(--space-05);
  --chat-editor-min-width: 680px;
  --chat-editor-column-min-width: 560px;
  --chat-editor-fluid-width: 37vw;
  --chat-editor-max-width: 760px;
  --chat-empty-state-max-width: 680px;
  --chat-compare-pane-min-width: 320px;
  --chat-compare-pane-min-height: 360px;
  --chat-compare-pane-conversation-min-height: 260px;
  --chat-editor-tablet-min-width: 360px;
  --chat-editor-tablet-max-width: 560px;
  --chat-label-width: 92px;
  --chat-picker-height: var(--control-height);
  --chat-menu-width: 430px;
  --chat-menu-max-height: 520px;
  --chat-menu-padding: var(--space-2);
  --chat-menu-top-offset: var(--space-13);
  --chat-menu-viewport-gutter: var(--space-12);
  --chat-model-menu-viewport-offset: 154px;
  --chat-model-menu-mobile-max-height: 460px;
  --chat-model-list-max-height: 462px;
  --chat-model-list-viewport-offset: 212px;
  --chat-model-row-gutter: var(--space-2);
  --chat-model-row-padding-x: var(--space-3);
  --chat-model-status-col-width: var(--space-18);
  --chat-model-option-min-height: 76px;
  --chat-inline-list-max-width: 520px;
  --chat-remove-button-size: 30px;
  --chat-pill-action-size: 24px;
  --chat-variable-name-min-width: 120px;
  --chat-variable-value-min-width: 160px;
  --chat-variable-action-width: var(--space-8);
  --chat-select-chevron-column-width: var(--space-5);
  --chat-textarea-large-min-height: 384px;
  --chat-textarea-large-mobile-min-height: 280px;
  --chat-textarea-small-min-height: 136px;
  --chat-message-card-min-height: 184px;
  --chat-conversation-min-height: 360px;
  --chat-conversation-mobile-min-height: 320px;
  --chat-test-pane-mobile-min-height: 620px;
  --chat-conversation-padding-start: var(--space-14);
  --chat-conversation-padding-inline: var(--space-10);
  --chat-conversation-padding-end: var(--space-10);
  --chat-conversation-message-gap: var(--space-6);
  --chat-scrollbar-size: 0.45rem;
  --chat-scrollbar-thumb: rgb(215 215 215 / 60%);
  --chat-scrollbar-track: var(--surface);
  --chat-empty-icon-size: var(--space-13);
  --chat-empty-icon-glyph-size: var(--space-6);
  --chat-turn-max-width: 980px;
  --chat-reading-column-max-width: 52.5rem;
  --chat-consumer-reading-column-max-width: 48rem;
  --chat-turn-content-max-width: var(--chat-reading-column-max-width);
  --chat-assistant-ink: var(--ink);
  --chat-assistant-line-height: 26px;
  --chat-composer-line-height: var(--chat-assistant-line-height);
  /* OpenAI's measured #8f8f8f tertiary label misses AA at 16px. This is the
     lightest neutral that preserves the same quieter hierarchy while keeping
     4.5:1 contrast on the white chat canvas. */
  --chat-activity-summary-ink: #767676;
  --chat-activity-summary-font-size: var(--text-base);
  --chat-activity-summary-line-height: var(--text-base-line);
  --chat-inline-code-font-size: var(--text-sm);
  --chat-turn-gap: 8px;
  --chat-user-bubble-max-width: 90%;
  --chat-user-bubble-radius: var(--space-6);
  --chat-user-bubble-padding-block: var(--space-4);
  --chat-user-bubble-padding-inline: var(--space-6);
  --chat-turn-action-size: var(--space-7);
  --chat-turn-action-gap: var(--space-1);
  --chat-turn-action-icon-stroke-width: var(--icon-stroke-width);
  --chat-action-tooltip-offset: var(--space-1);
  --chat-reasoning-gap: var(--space-2);
  --chat-reasoning-shimmer-base: var(--chat-activity-summary-ink);
  /* The glint is 75% page-white composed over the base verb color (reference-
     measured treatment), resolved per theme through the activity-summary ink.
     In dark it reads as a bright shine; in light the same mix lightens the
     glyphs toward the page, so the pass reads as a soft fade rather than a shine. */
  --chat-reasoning-shimmer-highlight: color-mix(
    in srgb,
    #ffffff 75%,
    var(--chat-reasoning-shimmer-base)
  );
  --chat-thinking-dot-gap: 5px;
  --chat-thinking-dot-size: 7px;
  --chat-jump-latest-bottom-offset: var(--space-12);
  --chat-jump-latest-size: var(--space-10);
  --chat-send-button-size: var(--control-height-compact);
  --chat-turn-meta-gap: var(--chat-turn-gap);
  --chat-turn-meta-padding-top: 0px;
  --chat-composer-max-width: var(--chat-reading-column-max-width);
  --chat-run-stats-gap: var(--chat-turn-gap);
  --chat-composer-radius: var(--radius-xl);
  --chat-composer-input-max-height: 180px;
  --chat-search-dialog-width: 640px;
  --chat-settings-dialog-height: 37.5rem;
  --chat-settings-dialog-mobile-height: 45rem;
  --chat-inline-add-button-y-offset: -0.5px;
  --chat-markdown-space: var(--space-2);
  --chat-inline-code-radius: 6px;
  --chat-code-radius: var(--space-4);
  --chat-code-header-height: var(--space-8);
  --chat-code-body-padding-block: var(--space-4);
  --chat-code-body-padding-inline: var(--space-5);
  --chat-code-line-height: var(--text-sm-line);
  --chat-code-collapsed-lines: 18;
  --chat-code-border: color-mix(in srgb, var(--line-strong) 30%, transparent);
  --chat-code-surface: var(--surface-muted);
  --chat-code-header-surface: var(--surface-active);
  --chat-table-min-width: 480px;
  --chat-hljs-comment: var(--muted);
  --chat-hljs-keyword: var(--accent);
  --chat-hljs-string: var(--ok);
  --chat-hljs-number: var(--warn);
  --chat-hljs-title: #7a58b5;
  --chat-hljs-attr: #8a5a20;
  --chat-hljs-built-in: #246f8f;
  --chat-hljs-literal: #9457a3;
  --chat-hljs-type: #1f6f5b;
  --chat-hljs-symbol: #9b5d35;
  --usage-records-table-min-width: 780px;
  --usage-record-time-col-width: 13%;
  --usage-record-status-col-width: 12%;
  --usage-record-key-col-width: 23%;
  --usage-record-number-col-width: 12%;
  --usage-record-money-col-width: 18%;
  --usage-record-action-col-width: 64px;
  --usage-analytics-rail-min-width: 304px;
  --usage-analytics-rail-fluid-width: 34vw;
  --usage-analytics-rail-max-width: 320px;
  --usage-chart-min-height: 300px;
  --usage-chart-body-min-height: 210px;
  --usage-chart-bars-min-height: 160px;
  --usage-chart-bar-min-height: 8%;
  --usage-chart-bar-fill-min-percent: 8;
  --usage-chart-bar-max-width: var(--space-10);
  --usage-chart-in-progress-opacity: 0.45;
  --usage-chart-skeleton-height-xs: 18%;
  --usage-chart-skeleton-height-sm: 30%;
  --usage-chart-skeleton-height-md: 46%;
  --usage-chart-skeleton-height-lg: 62%;
  --usage-chart-skeleton-height-xl: 78%;
  --usage-chart-empty-baseline-height: var(--space-2);
  --usage-chart-summary-max-width: 42rem;
  --usage-chart-tooltip-max-width: 220px;
  --usage-chart-tooltip-edge-padding: var(--space-3);
  --usage-chart-tooltip-offset: var(--space-2);
  --usage-chart-tooltip-min-half-width: 96px;
  --usage-chart-marker-min-top: var(--space-3);
  --usage-chart-marker-offset: var(--space-3);
  --usage-chart-marker-border-width: 2px;
  --usage-chart-marker-ring-width: 1px;
  --logs-note-accent-width: 3px;
  --usage-chart-segment-min-percent: 3;
  --usage-chart-segment-min-height: 2px;
  --usage-card-column-min-width: 240px;
  --usage-metric-card-min-height: 148px;
  --z-skip-link: 90;
  /* Modals are the top interaction layer: above the shell ladder (sidebar 220,
     popover 320, tooltip 340) so no chrome paints over an open dialog. */
  --z-modal: 360;
  --modal-width: 440px;
  --modal-md-width: 560px;
  --modal-wide-width: 720px;
  --create-key-action-min-width: 112px;
  --request-detail-modal-width: 1040px;
  --request-detail-rail-width: 320px;
  --limits-model-col-width: 24%;
  --limits-token-col-width: 30%;
  --limits-request-col-width: 26%;
  --limits-batch-col-width: 20%;
  --limits-model-table-min-width: 920px;
  --limits-tier-comparison-table-min-width: 680px;
  --limits-key-overrides-table-min-width: 960px;
  --limits-intro-border-width: 0;
  --limits-intro-border-color: transparent;
  --limits-intro-bg: transparent;
  --limits-intro-radius: 0;
  --limits-intro-shadow: none;
  --limits-intro-padding: var(--space-1) 0 var(--space-2);
  --limits-intro-gap: var(--space-3);
  --limits-intro-copy-max-width: 76ch;
  --limits-key-override-key-col-width: 18%;
  --limits-key-override-rate-col-width: 18%;
  --limits-key-override-spend-col-width: 17%;
  --limits-key-override-token-col-width: 19%;
  --limits-key-override-model-col-width: 20%;
  --limits-key-override-streaming-col-width: 8%;
  --focus-ring-color: var(--accent);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-halo-width: 3px;
  --focus-ring-halo: color-mix(in srgb, var(--focus-ring-color) 24%, transparent);
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --card-radius: var(--radius-md);
  /* Floating chrome sits one radius step above in-flow cards: menus and
     dialogs share the 12px tier so overlays read as one family. */
  --menu-radius: var(--radius-lg);
  --modal-radius: var(--radius-lg);
  --radius-pill: 999px;
  --auth-card-width: 432px;
  --auth-field-bg: var(--surface-muted);
  --auth-field-border: #858585;
  --auth-field-border-hover: #5f5f5f;
  /* Boundary-page control height. The auth family sits outside the console
     shell and runs one step above --form-control-height so a signed-out
     visitor meets full-size targets on every viewport; named here because
     four rules across the family share it. */
  --auth-control-height: var(--space-12);
  /* Boundary-page type ramp. The login card's three pairs sit between the
     console steps (28/36 title, 15/22 body and controls, 13/20 helper); they
     are named here, not repeated in component CSS. */
  --auth-login-title-size: 28px;
  --auth-login-title-line: 36px;
  --auth-login-body-size: 15px;
  --auth-login-body-line: 22px;
  --auth-login-helper-size: 13px;
  --auth-login-helper-line: 20px;
  --auth-login-panel-shadow: 0 24px 64px rgb(0 0 0 / 8%),
    0 2px 8px rgb(0 0 0 / 4%);
  --entry-offset: clamp(var(--space-12), 14vh, var(--space-24));
  --auth-access-entry-offset: clamp(var(--space-6), 8vh, var(--space-12));
  --auth-access-shell-padding: var(--space-6);
  --auth-access-shell-gap: var(--space-3);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --cta-bg: var(--ink);
  --cta-fg: var(--on-ink);
  --cta-border: var(--ink);
  --cta-hover-bg: #2a2a2a;
  /* Motion: durations and easings are tokens; component CSS never hardcodes them.
     Entrances settle, exits snap, one spinner, one skeleton shimmer, one thinking
     glint (see the design contract). */
  --motion-fast: 140ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --motion-exit: 0ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-spin: 900ms;
  --motion-shimmer: 1200ms;
  /* The thinking-verb glint runs its own, slower cycle than the skeleton
     shimmer: a linear sweep across the first ~60%, then a rest at the base
     color, so a minute-scale wait reads as a quiet word, not a loading bar. */
  --motion-thinking-shimmer: 2400ms;
  /* The thinking-dot pulse (label-less pre-admission state only) and the
     stagger between its three dots. */
  --motion-thinking-dot: 1050ms;
  --motion-thinking-dot-stagger: 140ms;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page: #141414;
  --surface: #1f1f1f;
  --surface-muted: #2a2a2a;
  --surface-hover: #343434;
  --surface-active: #3d3d3d;
  --surface-raised: #262626;
  --segmented-track-bg: var(--surface-muted);
  --segmented-thumb-bg: var(--surface-active);
  /* Chrome and placeholder fills need a wider lightness step than light mode:
     pane #1f1f1f < canvas #2a2a2a < header band #2e2e2e < skeleton #303030 < hover #343434. */
  --table-header-bg: #2e2e2e;
  --skeleton-bg: #303030;
  --ink: #f2f2f2;
  --ink-body: #e4e4e4;
  --on-ink: #111111;
  --muted: #a3a3a3;
  --muted-strong: #c6c6c6;
  --chat-assistant-ink: var(--ink-body);
  --chat-activity-summary-ink: var(--muted);
  /* Translucent light-on-dark hairlines: brighter over raised surfaces,
     quieter over the page, matching the light-theme ink-alpha strategy.
     Flattened on #1f1f1f these read #414141 / #555555 / #747474 / #626262 —
     a deliberate step quieter than the retired opaque #4a4a4a / #575757 /
     #767676 / #646464. */
  --line: rgb(255 255 255 / 15%);
  --line-strong: rgb(255 255 255 / 24%);
  --line-stronger: rgb(255 255 255 / 38%);
  --control-border: rgb(255 255 255 / 30%);
  --info-surface: #18213a;
  --info-line: #324778;
  --info-ink: #c9d7ff;
  --ok: #58c08a;
  --warn: #e5a84d;
  --danger: #ff8c82;
  --danger-surface: #3a1d1a;
  --danger-line: #6a302a;
  --danger-line-strong: #8a4039;
  --danger-surface-strong: #4a231f;
  --ok-surface: #1b2f27;
  --ok-line: #2e5142;
  --warn-surface: #33291a;
  --warn-line: #5c4826;
  --chart-series-1: #7f9ce0;
  --chart-series-2: #a697df;
  --chart-series-3: #73c99a;
  --chart-series-4: #e8b969;
  --chart-series-other: #8c8c96;
  --unknown: #7a7a7a;
  --overlay: rgb(0 0 0 / 62%);
  --shadow-subtle: 0 1px 2px rgb(0 0 0 / 28%);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 26%), 0 0 0 0.5px rgb(255 255 255 / 6%);
  /* Dark elevation carries a light outer keyline on the raised surface plus
     layered drops (the --shadow-card pattern). An inset rim reads better in
     principle but is occluded by scrolled option backgrounds in every
     scrollable menu, so the ring sits outside the box. */
  --shadow-popover: 0 0 0 0.5px rgb(255 255 255 / 9%),
    0 8px 24px rgb(0 0 0 / 40%), 0 2px 6px rgb(0 0 0 / 26%);
  --shadow-modal: 0 24px 56px rgb(0 0 0 / 52%), 0 4px 12px rgb(0 0 0 / 32%);
  --shadow-composer: 0 0 0 0.5px rgb(255 255 255 / 7%),
    0 2px 8px rgb(0 0 0 / 28%), 0 12px 44px rgb(0 0 0 / 22%);
  --auth-field-border: #767676;
  --auth-field-border-hover: #a3a3a3;
  --auth-login-panel-shadow: 0 24px 64px rgb(0 0 0 / 36%),
    0 0 0 0.5px rgb(255 255 255 / 8%);
  --home-card-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 26px rgb(0 0 0 / 16%),
    0 0 0 0.5px rgb(255 255 255 / 6%);
  --home-card-hover-shadow: 0 2px 4px rgb(0 0 0 / 36%),
    0 14px 36px rgb(0 0 0 / 24%), 0 0 0 0.5px rgb(255 255 255 / 10%);
  --brand-dot: #6b8cff;
  --accent: #9ab0ff;
  /* Filled accent controls keep a saturated cobalt in dark: the light --accent
     above reads washed as a fill. #486adf holds the white glyph at 4.77:1 and
     sits at 3.12:1 against the composer surface (#272727). */
  --accent-fill: #486adf;
  --on-accent-fill: #ffffff;
  --focus-ring-color: #9ab0ff;
  --focus-ring-halo: color-mix(in srgb, var(--focus-ring-color) 28%, transparent);
  --cta-bg: #f2f2f2;
  --cta-fg: #111111;
  --cta-border: #f2f2f2;
  --cta-hover-bg: #dedede;
  --chat-scrollbar-thumb: rgb(67 67 67 / 60%);
  --chat-scrollbar-track: var(--surface);
  --chat-code-border: color-mix(in srgb, var(--line-strong) 30%, transparent);
  --chat-code-surface: #181818;
  --chat-code-header-surface: #242424;
  --chat-hljs-comment: var(--muted);
  --chat-hljs-keyword: #9ab0ff;
  --chat-hljs-string: #73c99a;
  --chat-hljs-number: #e8b969;
  --chat-hljs-title: #b6a6ff;
  --chat-hljs-attr: #d7a865;
  --chat-hljs-built-in: #83c8df;
  --chat-hljs-literal: #d7a1e3;
  --chat-hljs-type: #8bd6bc;
  --chat-hljs-symbol: #e2ad83;
  /* Edition bands, dusk ramp: same hue family, tuned to sit a few lightness
     steps above the #1f1f1f card so the Pulse zone keeps the page. */
  --edition-band-fast-bg: #dfe7ef;
  --edition-band-efficient-bg: #43566b;
  --edition-band-balanced-bg: #283749;
  --edition-band-frontier-bg: #0a0f16;
  --edition-band-keyline: rgb(220 235 250 / 12%);
  --edition-band-keyline-deep: rgb(220 235 250 / 14%);
  --edition-band-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpolyline points='14,32 23,27 32,22 41,17 50,12' fill='none' stroke='%2392a9c0' stroke-width='1' stroke-opacity='0.45'/%3E%3Ccircle cx='14' cy='32' r='2' fill='%2392a9c0' fill-opacity='0.85'/%3E%3Ccircle cx='23' cy='27' r='2' fill='%2392a9c0' fill-opacity='0.85'/%3E%3Ccircle cx='32' cy='22' r='2' fill='%2392a9c0' fill-opacity='0.85'/%3E%3Ccircle cx='41' cy='17' r='2' fill='%2392a9c0' fill-opacity='0.85'/%3E%3Ccircle cx='50' cy='12' r='2' fill='%2392a9c0' fill-opacity='0.85'/%3E%3C/svg%3E");
  --edition-band-motif-deep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpolyline points='14,32 23,27 32,22 41,17 50,12' fill='none' stroke='%23a9c2d8' stroke-width='1' stroke-opacity='0.45'/%3E%3Ccircle cx='14' cy='32' r='2' fill='%23a9c2d8' fill-opacity='0.85'/%3E%3Ccircle cx='23' cy='27' r='2' fill='%23a9c2d8' fill-opacity='0.85'/%3E%3Ccircle cx='32' cy='22' r='2' fill='%23a9c2d8' fill-opacity='0.85'/%3E%3Ccircle cx='41' cy='17' r='2' fill='%23a9c2d8' fill-opacity='0.85'/%3E%3Ccircle cx='50' cy='12' r='2' fill='%23a9c2d8' fill-opacity='0.85'/%3E%3C/svg%3E");
}

/* Form controls grow to the 44px touch target on mobile/touch surfaces. */
@media (max-width: 760px) {
  :root {
    --form-control-height: var(--control-height);
  }
}