/* Generated by packages/design-tokens/scripts/build.ts. Do not edit. */

@layer properties, theme, base, dc-primitives, components, utilities;



/* ════════════════════════════════════════════════════════════════════

 * LAYER 1 — Semantic tokens (--dc-*)

 * ════════════════════════════════════════════════════════════════════ */

:root {
  --brand: rgb(199, 92, 59);
  --dc-fg-strong: rgb(27, 24, 19);
  --dc-fg: rgb(44, 40, 32);
  --dc-fg-secondary: rgb(86, 82, 74);
  --dc-fg-muted: rgb(147, 141, 128);
  --dc-fg-faint: rgba(27, 24, 19, 0.302);
  --dc-fg-on-primary: rgba(255, 255, 255, 0.949);
  --dc-border: rgba(27, 24, 19, 0.11);
  --dc-border-subtle: rgba(27, 24, 19, 0.078);
  --dc-border-strong: rgba(27, 24, 19, 0.18);
  --dc-canvas: rgb(242, 239, 232);
  --dc-surface-raised: rgb(250, 248, 242);
  --dc-surface-rail: rgb(237, 234, 227);
  --dc-surface-overlay: rgba(250, 248, 242, 0.969);
  --dc-surface-input: rgba(27, 24, 19, 0.039);
  --dc-surface-code-inline: rgba(27, 24, 19, 0.059);
  --dc-surface-code-block: rgba(27, 24, 19, 0.051);
  --dc-surface-control: rgb(255, 255, 255);
  --dc-surface-hover: rgba(27, 24, 19, 0.059);
  --dc-surface-pressed: rgba(27, 24, 19, 0.102);
  --dc-destructive: rgba(192, 57, 43, 0.851);
  --dc-destructive-subtle: rgba(192, 57, 43, 0.102);
  --dc-destructive-border: rgba(192, 57, 43, 0.2);
  --dc-success: rgba(47, 107, 67, 0.851);
  --dc-success-subtle: rgba(47, 107, 67, 0.102);
  --dc-success-border: rgba(47, 107, 67, 0.302);
  --dc-warning: rgba(161, 98, 7, 0.949);
  --dc-warning-subtle: rgba(161, 98, 7, 0.102);
  --dc-warning-border: rgba(161, 98, 7, 0.2);
  --dc-info: rgb(47, 94, 147);
  --dc-info-subtle: rgba(47, 94, 147, 0.102);
  --dc-info-border: rgba(47, 94, 147, 0.302);
  --dc-identity-1: rgb(216, 90, 48);
  --dc-identity-2: rgb(83, 74, 183);
  --dc-identity-3: rgb(153, 53, 86);
  --dc-identity-4: rgb(15, 110, 86);
  --dc-identity-5: rgb(24, 95, 165);
  --dc-identity-6: rgb(133, 79, 11);
  --dc-chart-2: rgb(83, 74, 183);
  --dc-chart-3: rgb(216, 90, 48);
  --dc-chart-4: rgb(136, 135, 128);
  --dc-chart-5: rgb(153, 53, 86);
  --dc-chart-6: rgb(24, 95, 165);
  --dc-scrollbar-thumb: rgba(27, 24, 19, 0.22);
  --dc-scrollbar-thumb-hover: rgba(27, 24, 19, 0.361);
  --dc-shade: rgb(0, 0, 0);
  --dc-accent: color-mix(in srgb, var(--brand) 85%, transparent);
  --dc-accent-subtle: color-mix(in srgb, var(--brand) 10%, transparent);
  --dc-accent-border: color-mix(in srgb, var(--brand) 30%, transparent);
  --dc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --dc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --dc-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  --dc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
  --dc-content-max: 1200px;
  --dc-measure: 760px;
  --dc-gutter: 32px;
  --dc-scale: 1;
  --dc-vh: calc(1vh / var(--dc-scale, 1));
  --dc-vw: calc(1vw / var(--dc-scale, 1));
  --dc-shell-bottom: 0px;
  --dc-safe-bottom: calc(var(--dc-shell-bottom, 0px) / var(--dc-scale, 1));
}

:root {
  /* space */
  --dc-space-0-5: 2px;
  --dc-space-1: 4px;
  --dc-space-1-5: 6px;
  --dc-space-2: 8px;
  --dc-space-2-5: 10px;
  --dc-space-3: 12px;
  --dc-space-3-5: 14px;
  --dc-space-4: 16px;
  --dc-space-5: 20px;
  --dc-space-6: 24px;
  --dc-space-8: 32px;
  --dc-space-10: 40px;
  --dc-space-12: 48px;
  --dc-space-16: 64px;
  --dc-space-20: 80px;
  --dc-space-24: 96px;
  /* radius */
  --dc-radius-xs: 4px;
  --dc-radius-sm: 6px;
  --dc-radius-md: 8px;
  --dc-radius-lg: 10px;
  --dc-radius-xl: 12px;
  --dc-radius-full: 9999px;
  /* control heights */
  --dc-control-xs: 20px;
  --dc-control-sm: 24px;
  --dc-control-md: 28px;
  --dc-control-lg: 32px;
  /* type: size, line height, weight */
  --dc-text-caption: 11px;
  --dc-text-caption-leading: 14px;
  --dc-text-small: 12px;
  --dc-text-small-leading: 16px;
  --dc-text-body: 13px;
  --dc-text-body-leading: 18px;
  --dc-text-title: 15px;
  --dc-text-title-leading: 20px;
  --dc-text-heading: 20px;
  --dc-text-heading-leading: 26px;
  --dc-text-display: 28px;
  --dc-text-display-leading: 34px;
  --dc-weight-regular: 400;
  --dc-weight-medium: 500;
  --dc-weight-semibold: 600;
  --dc-tracking-tight: -0.01em;
  --dc-measure-narrow: 46ch;
  /* icon sizes */
  --dc-icon-xs: 12px;
  --dc-icon-sm: 14px;
  --dc-icon-md: 16px;
  --dc-icon-lg: 20px;
  --dc-icon-xl: 24px;
  /* line · focus · opacity · motion */
  --dc-hairline: 1px;
  --dc-focus-width: 2px;
  --dc-focus-offset: 1px;
  --dc-opacity-disabled: 0.5;
  --dc-opacity-scrim: 0.3;
  --dc-duration-fast: 100ms;
  --dc-duration-base: 150ms;
  --dc-duration-slow: 250ms;
  --dc-duration-glide: 420ms;
  --dc-duration-ripple: 450ms;
  --dc-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dc-loop-spin: 900ms;
  --dc-loop-sweep: 1400ms;
  --dc-loop-blink: 1060ms;
  --dc-loop-think: 1600ms;
  /* layers (z-index; web-only) */
  --dc-layer-raised: 1;
  --dc-layer-sticky: 10;
  --dc-layer-dropdown: 50;
  --dc-layer-overlay: 100;
  --dc-layer-modal: 1000;
  /* elevation, by role (the values are per mode: --dc-shadow, --dc-shadow-lg) */
  --dc-shadow-raised: var(--dc-shadow);
  --dc-shadow-overlay: var(--dc-shadow-lg);
  /* the state language (src/state.ts) */
  --dc-state-control-face: var(--dc-surface-control);
  --dc-state-control-hover: var(--dc-surface-hover);
  --dc-state-control-pressed: var(--dc-surface-pressed);
  --dc-state-control-on: var(--dc-accent);
  --dc-state-control-on-text: var(--dc-fg-on-primary);
  --dc-state-item-hover: var(--dc-accent-subtle);
  --dc-state-item-hover-text: var(--dc-fg-strong);
  --dc-state-item-selected: var(--dc-surface-control);
  --dc-state-item-selected-text: var(--dc-fg-strong);
  --dc-state-item-selected-ring: var(--dc-border-subtle);
  --dc-state-primary-pressed-shade: 12%;
  --dc-state-destructive-hover: 20%;
  --dc-state-destructive-pressed: 25%;
  /* the primitives' specs (src/components.ts) */
  --dc-control-xs-height: var(--dc-control-xs);
  --dc-control-xs-padding-x: var(--dc-space-1-5);
  --dc-control-xs-icon-padding-x: var(--dc-space-1);
  --dc-control-xs-gap: var(--dc-space-1);
  --dc-control-xs-icon: var(--dc-icon-xs);
  --dc-control-xs-radius: var(--dc-radius-sm);
  --dc-control-xs-text: var(--dc-text-caption);
  --dc-control-xs-text-leading: var(--dc-text-caption-leading);
  --dc-control-xs-weight: var(--dc-weight-medium);
  --dc-control-sm-height: var(--dc-control-sm);
  --dc-control-sm-padding-x: var(--dc-space-2);
  --dc-control-sm-icon-padding-x: var(--dc-space-1-5);
  --dc-control-sm-gap: var(--dc-space-1);
  --dc-control-sm-icon: var(--dc-icon-sm);
  --dc-control-sm-radius: var(--dc-radius-sm);
  --dc-control-sm-text: var(--dc-text-small);
  --dc-control-sm-text-leading: var(--dc-text-small-leading);
  --dc-control-sm-weight: var(--dc-weight-medium);
  --dc-control-md-height: var(--dc-control-md);
  --dc-control-md-padding-x: var(--dc-space-3);
  --dc-control-md-icon-padding-x: var(--dc-space-2-5);
  --dc-control-md-gap: var(--dc-space-1-5);
  --dc-control-md-icon: var(--dc-icon-md);
  --dc-control-md-radius: var(--dc-radius-md);
  --dc-control-md-text: var(--dc-text-body);
  --dc-control-md-text-leading: var(--dc-text-body-leading);
  --dc-control-md-weight: var(--dc-weight-medium);
  --dc-control-lg-height: var(--dc-control-lg);
  --dc-control-lg-padding-x: var(--dc-space-3-5);
  --dc-control-lg-icon-padding-x: var(--dc-space-3);
  --dc-control-lg-gap: var(--dc-space-2);
  --dc-control-lg-icon: var(--dc-icon-md);
  --dc-control-lg-radius: var(--dc-radius-md);
  --dc-control-lg-text: var(--dc-text-body);
  --dc-control-lg-text-leading: var(--dc-text-body-leading);
  --dc-control-lg-weight: var(--dc-weight-medium);
  --dc-control-xl-height: var(--dc-space-12);
  --dc-control-xl-padding-x: var(--dc-space-5);
  --dc-control-xl-icon-padding-x: var(--dc-space-4);
  --dc-control-xl-gap: var(--dc-space-2);
  --dc-control-xl-icon: var(--dc-icon-md);
  --dc-control-xl-radius: var(--dc-radius-xl);
  --dc-control-xl-text: var(--dc-text-body);
  --dc-control-xl-text-leading: var(--dc-text-body-leading);
  --dc-control-xl-weight: var(--dc-weight-medium);
  --dc-field-sm-height: var(--dc-control-sm);
  --dc-field-sm-padding-x: var(--dc-space-2);
  --dc-field-sm-padding-y: var(--dc-space-1);
  --dc-field-sm-gap: var(--dc-space-1-5);
  --dc-field-sm-icon: var(--dc-icon-sm);
  --dc-field-sm-radius: var(--dc-radius-sm);
  --dc-field-sm-text: var(--dc-text-small);
  --dc-field-sm-text-leading: var(--dc-text-small-leading);
  --dc-field-md-height: var(--dc-control-md);
  --dc-field-md-padding-x: var(--dc-space-2-5);
  --dc-field-md-padding-y: var(--dc-space-1-5);
  --dc-field-md-gap: var(--dc-space-2);
  --dc-field-md-icon: var(--dc-icon-md);
  --dc-field-md-radius: var(--dc-radius-md);
  --dc-field-md-text: var(--dc-text-body);
  --dc-field-md-text-leading: var(--dc-text-body-leading);
  --dc-chip-sm-height: var(--dc-control-xs);
  --dc-chip-sm-padding-x: var(--dc-space-2);
  --dc-chip-sm-gap: var(--dc-space-1-5);
  --dc-chip-sm-icon: var(--dc-icon-sm);
  --dc-chip-sm-radius: var(--dc-radius-sm);
  --dc-chip-sm-text: var(--dc-text-caption);
  --dc-chip-sm-text-leading: var(--dc-text-caption-leading);
  --dc-chip-sm-weight: var(--dc-weight-medium);
  --dc-chip-md-height: var(--dc-control-sm);
  --dc-chip-md-padding-x: var(--dc-space-2-5);
  --dc-chip-md-gap: var(--dc-space-1-5);
  --dc-chip-md-icon: var(--dc-icon-sm);
  --dc-chip-md-radius: var(--dc-radius-sm);
  --dc-chip-md-text: var(--dc-text-small);
  --dc-chip-md-text-leading: var(--dc-text-small-leading);
  --dc-chip-md-weight: var(--dc-weight-medium);
  --dc-menu-radius: var(--dc-radius-lg);
  --dc-menu-padding: var(--dc-space-1);
  --dc-menu-min-width: 160px;
  --dc-menu-item-height: var(--dc-control-md);
  --dc-menu-item-padding-x: var(--dc-space-2);
  --dc-menu-item-padding-y: var(--dc-space-1);
  --dc-menu-item-gap: var(--dc-space-2);
  --dc-menu-item-icon: var(--dc-icon-md);
  --dc-menu-item-radius: var(--dc-radius-sm);
  --dc-menu-item-text: var(--dc-text-body);
  --dc-menu-item-text-leading: var(--dc-text-body-leading);
  --dc-menu-check: var(--dc-icon-sm);
  --dc-menu-label-padding-x: var(--dc-space-2);
  --dc-menu-label-padding-top: var(--dc-space-1-5);
  --dc-menu-label-padding-bottom: var(--dc-space-1);
  --dc-menu-label-text: var(--dc-text-caption);
  --dc-menu-label-text-leading: var(--dc-text-caption-leading);
  --dc-menu-label-weight: var(--dc-weight-semibold);
  --dc-menu-separator-margin-y: var(--dc-space-1);
  --dc-menu-shortcut-gap: var(--dc-space-4);
  --dc-menu-shortcut-text: var(--dc-text-small);
  --dc-menu-shortcut-text-leading: var(--dc-text-small-leading);
  --dc-row-height: var(--dc-control-md);
  --dc-row-padding-x: var(--dc-space-2);
  --dc-row-padding-y: var(--dc-space-1);
  --dc-row-gap: var(--dc-space-2);
  --dc-row-icon: var(--dc-icon-md);
  --dc-row-radius: var(--dc-radius-sm);
  --dc-row-text: var(--dc-text-body);
  --dc-row-text-leading: var(--dc-text-body-leading);
  --dc-tab-height: var(--dc-control-sm);
  --dc-tab-padding-x: var(--dc-space-2);
  --dc-tab-gap: var(--dc-space-1-5);
  --dc-tab-icon: var(--dc-icon-sm);
  --dc-tab-radius: var(--dc-radius-sm);
  --dc-tab-text: var(--dc-text-small);
  --dc-tab-text-leading: var(--dc-text-small-leading);
  --dc-tab-max-width: 160px;
  --dc-segmented-height: var(--dc-control-md);
  --dc-segmented-padding: var(--dc-space-0-5);
  --dc-segmented-gap: var(--dc-space-0-5);
  --dc-segmented-radius: var(--dc-radius-md);
  --dc-segmented-segment-radius: var(--dc-radius-sm);
  --dc-segmented-segment-padding-x: var(--dc-space-2-5);
  --dc-segmented-icon: var(--dc-icon-sm);
  --dc-segmented-icon-gap: var(--dc-space-1-5);
  --dc-segmented-text: var(--dc-text-body);
  --dc-segmented-text-leading: var(--dc-text-body-leading);
  --dc-segmented-weight: var(--dc-weight-medium);
  --dc-dialog-radius: var(--dc-radius-xl);
  --dc-dialog-padding: var(--dc-space-5);
  --dc-dialog-gap: var(--dc-space-4);
  --dc-dialog-width: 384px;
  --dc-dialog-title: var(--dc-text-title);
  --dc-dialog-title-leading: var(--dc-text-title-leading);
  --dc-dialog-title-weight: var(--dc-weight-semibold);
  --dc-dialog-footer-padding-y: var(--dc-space-3);
  --dc-popover-radius: var(--dc-radius-lg);
  --dc-popover-padding: var(--dc-space-3);
  --dc-popover-gap: var(--dc-space-3);
  --dc-popover-width: 288px;
  --dc-card-radius: var(--dc-radius-xl);
  --dc-card-padding: var(--dc-space-4);
  --dc-card-gap: var(--dc-space-4);
  --dc-card-title: var(--dc-text-title);
  --dc-card-title-leading: var(--dc-text-title-leading);
  --dc-alert-radius: var(--dc-radius-lg);
  --dc-alert-padding-x: var(--dc-space-3-5);
  --dc-alert-padding-y: var(--dc-space-3);
  --dc-alert-text: var(--dc-text-body);
  --dc-alert-text-leading: var(--dc-text-body-leading);
  --dc-empty-state-padding-x: var(--dc-space-6);
  --dc-empty-state-padding-y: var(--dc-space-5);
  --dc-empty-state-gap: var(--dc-space-2);
  --dc-empty-state-radius: var(--dc-radius-xl);
  --dc-empty-state-max-width: 420px;
  --dc-empty-state-icon: var(--dc-icon-lg);
  --dc-empty-state-title: var(--dc-text-title);
  --dc-empty-state-title-leading: var(--dc-text-title-leading);
  --dc-empty-state-message: var(--dc-text-body);
  --dc-empty-state-message-leading: var(--dc-text-body-leading);
  --dc-empty-state-detail: var(--dc-text-small);
  --dc-empty-state-detail-leading: var(--dc-text-small-leading);
  --dc-empty-state-actions-offset: var(--dc-space-2);
  --dc-empty-state-actions-gap: var(--dc-space-2);
  --dc-empty-state-inset: var(--dc-space-6);
  --dc-tooltip-radius: var(--dc-radius-sm);
  --dc-tooltip-padding-x: var(--dc-space-2);
  --dc-tooltip-padding-y: var(--dc-space-1);
  --dc-tooltip-text: var(--dc-text-small);
  --dc-tooltip-text-leading: var(--dc-text-small-leading);
  --dc-badge-height: var(--dc-control-xs);
  --dc-badge-padding-x: var(--dc-space-2);
  --dc-badge-gap: var(--dc-space-1);
  --dc-badge-icon: var(--dc-icon-xs);
  --dc-badge-text: var(--dc-text-caption);
  --dc-badge-text-leading: var(--dc-text-caption-leading);
  --dc-badge-weight: var(--dc-weight-medium);
  --dc-avatar-sm-size: var(--dc-control-xs);
  --dc-avatar-sm-text: var(--dc-text-caption);
  --dc-avatar-sm-text-leading: var(--dc-text-caption-leading);
  --dc-avatar-sm-weight: var(--dc-weight-semibold);
  --dc-avatar-md-size: var(--dc-control-md);
  --dc-avatar-md-text: var(--dc-text-body);
  --dc-avatar-md-text-leading: var(--dc-text-body-leading);
  --dc-avatar-md-weight: var(--dc-weight-semibold);
  --dc-avatar-lg-size: var(--dc-space-10);
  --dc-avatar-lg-text: var(--dc-text-title);
  --dc-avatar-lg-text-leading: var(--dc-text-title-leading);
  --dc-avatar-lg-weight: var(--dc-weight-semibold);
  --dc-checkbox-size: var(--dc-icon-md);
  --dc-checkbox-radius: var(--dc-radius-xs);
  --dc-checkbox-icon: var(--dc-icon-xs);
  --dc-toggle-width: 32px;
  --dc-toggle-height: 18px;
  --dc-toggle-padding: var(--dc-space-0-5);
  --dc-toggle-thumb: var(--dc-icon-sm);
  --dc-slider-track-height: var(--dc-space-1-5);
  --dc-slider-track-radius: var(--dc-radius-full);
  --dc-slider-thumb-size: var(--dc-icon-md);
  --dc-slider-thumb-radius: var(--dc-radius-full);
  --dc-chart-line: 1.5px;
  --dc-chart-limit: 1px;
  --dc-chart-axis-text: var(--dc-text-caption);
  --dc-chart-axis-text-leading: var(--dc-text-caption-leading);
  --dc-chart-axis-gap: var(--dc-space-1-5);
  --dc-chart-marker-width: 3px;
  --dc-chart-marker-height: var(--dc-space-2);
  --dc-chart-legend-gap: var(--dc-space-3);
  --dc-chart-legend-swatch: var(--dc-space-3);
  --dc-chart-legend-text: var(--dc-text-small);
  --dc-chart-legend-text-leading: var(--dc-text-small-leading);
  --dc-chart-tooltip-padding-x: var(--dc-space-2);
  --dc-chart-tooltip-padding-y: var(--dc-space-1-5);
  --dc-chart-tooltip-radius: var(--dc-radius-md);
  --dc-chart-tooltip-text: var(--dc-text-small);
  --dc-chart-tooltip-text-leading: var(--dc-text-small-leading);
  --dc-chart-tooltip-gap: var(--dc-space-1);
  --dc-chart-bar-height: var(--dc-space-3-5);
  --dc-chart-bar-radius: var(--dc-radius-sm);
  --dc-chart-metric-padding-x: var(--dc-space-3);
  --dc-chart-metric-padding-y: var(--dc-space-2-5);
  --dc-chart-metric-radius: var(--dc-radius-md);
  --dc-chart-metric-label: var(--dc-text-small);
  --dc-chart-metric-label-leading: var(--dc-text-small-leading);
  --dc-chart-metric-value: var(--dc-text-title);
  --dc-chart-metric-value-leading: var(--dc-text-title-leading);
  --dc-chart-metric-weight: var(--dc-weight-medium);
  --dc-agent-cursor-size: 22px;
  --dc-agent-cursor-label-height: var(--dc-control-xs);
  --dc-agent-cursor-label-padding-x: var(--dc-space-1-5);
  --dc-agent-cursor-label-offset: var(--dc-space-4);
  --dc-agent-cursor-label-text: var(--dc-text-caption);
  --dc-agent-cursor-label-text-leading: var(--dc-text-caption-leading);
  --dc-agent-cursor-label-weight: var(--dc-weight-semibold);
  --dc-agent-ripple-size: 34px;
  --dc-agent-ripple-width: 2px;
  --dc-agent-highlight-radius: var(--dc-radius-sm);
  --dc-agent-highlight-width: 2px;
  --dc-agent-highlight-inset: 2px;
  --dc-agent-ring-width: 2px;
  --dc-agent-ring-radius: var(--dc-radius-xs);
  --dc-agent-badge-size: 8px;
  --dc-chrome-tab-strip: 40px;
  --dc-chrome-nav-bar: 44px;
  --dc-chrome-panel-header: 38px;
  --dc-chrome-sheet-header: 48px;
  --dc-chrome-dock: 50px;
  --dc-chrome-location-min-width: 200px;
  --dc-chrome-suggestions-min-width: 360px;
  --dc-chrome-suggestions-wide-at: 520px;
  --dc-chrome-suggestions-max-height: 460px;
  --dc-chrome-suggestions-column-min: 150px;
  --dc-chrome-crumb-max-width: 240px;
  --dc-chrome-rename-min-width: 120px;
  --dc-chrome-rename-max-width: 360px;
  --dc-chrome-find-field-max-width: 320px;
  --dc-chrome-share-card-width: 320px;
  --dc-chrome-share-card-height: 480px;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dc-duration-fast: 1ms;
    --dc-duration-base: 1ms;
    --dc-duration-slow: 1ms;
    --dc-duration-glide: 1ms;
    --dc-duration-ripple: 1ms;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: rgb(224, 122, 82);
    --dc-fg-strong: rgb(243, 239, 229);
    --dc-fg: rgb(232, 227, 215);
    --dc-fg-secondary: rgb(194, 188, 174);
    --dc-fg-muted: rgb(139, 133, 118);
    --dc-fg-faint: rgba(243, 239, 229, 0.302);
    --dc-fg-on-primary: rgba(255, 255, 255, 0.949);
    --dc-border: rgba(255, 252, 242, 0.11);
    --dc-border-subtle: rgba(255, 252, 242, 0.059);
    --dc-border-strong: rgba(255, 252, 242, 0.2);
    --dc-canvas: rgb(21, 19, 13);
    --dc-surface-raised: rgb(30, 27, 20);
    --dc-surface-rail: rgb(26, 24, 18);
    --dc-surface-overlay: rgba(30, 27, 20, 0.969);
    --dc-surface-input: rgba(255, 252, 242, 0.051);
    --dc-surface-code-inline: rgba(255, 252, 242, 0.078);
    --dc-surface-code-block: rgba(0, 0, 0, 0.2);
    --dc-surface-control: rgb(42, 39, 32);
    --dc-surface-hover: rgba(255, 252, 242, 0.071);
    --dc-surface-pressed: rgba(255, 252, 242, 0.122);
    --dc-destructive: rgba(240, 129, 110, 0.851);
    --dc-destructive-subtle: rgba(240, 129, 110, 0.102);
    --dc-destructive-border: rgba(240, 129, 110, 0.2);
    --dc-success: rgba(108, 196, 138, 0.851);
    --dc-success-subtle: rgba(108, 196, 138, 0.102);
    --dc-success-border: rgba(108, 196, 138, 0.302);
    --dc-warning: rgba(224, 184, 96, 0.949);
    --dc-warning-subtle: rgba(224, 184, 96, 0.102);
    --dc-warning-border: rgba(224, 184, 96, 0.2);
    --dc-info: rgb(158, 201, 251);
    --dc-info-subtle: rgba(158, 201, 251, 0.102);
    --dc-info-border: rgba(158, 201, 251, 0.302);
    --dc-identity-1: rgb(216, 90, 48);
    --dc-identity-2: rgb(83, 74, 183);
    --dc-identity-3: rgb(153, 53, 86);
    --dc-identity-4: rgb(15, 110, 86);
    --dc-identity-5: rgb(24, 95, 165);
    --dc-identity-6: rgb(133, 79, 11);
    --dc-chart-2: rgb(175, 169, 236);
    --dc-chart-3: rgb(240, 153, 123);
    --dc-chart-4: rgb(180, 178, 169);
    --dc-chart-5: rgb(237, 147, 177);
    --dc-chart-6: rgb(133, 183, 235);
    --dc-scrollbar-thumb: rgba(255, 252, 242, 0.22);
    --dc-scrollbar-thumb-hover: rgba(255, 252, 242, 0.361);
    --dc-shade: rgb(0, 0, 0);
    --dc-accent: color-mix(in srgb, var(--brand) 85%, transparent);
    --dc-accent-subtle: color-mix(in srgb, var(--brand) 10%, transparent);
    --dc-accent-border: color-mix(in srgb, var(--brand) 30%, transparent);
    --dc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --dc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --dc-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    --dc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
    --dc-content-max: 1200px;
    --dc-measure: 760px;
    --dc-gutter: 32px;
    --dc-scale: 1;
    --dc-vh: calc(1vh / var(--dc-scale, 1));
    --dc-vw: calc(1vw / var(--dc-scale, 1));
    --dc-shell-bottom: 0px;
    --dc-safe-bottom: calc(var(--dc-shell-bottom, 0px) / var(--dc-scale, 1));
  }
}

.light {
  --brand: rgb(199, 92, 59);
  --dc-fg-strong: rgb(27, 24, 19);
  --dc-fg: rgb(44, 40, 32);
  --dc-fg-secondary: rgb(86, 82, 74);
  --dc-fg-muted: rgb(147, 141, 128);
  --dc-fg-faint: rgba(27, 24, 19, 0.302);
  --dc-fg-on-primary: rgba(255, 255, 255, 0.949);
  --dc-border: rgba(27, 24, 19, 0.11);
  --dc-border-subtle: rgba(27, 24, 19, 0.078);
  --dc-border-strong: rgba(27, 24, 19, 0.18);
  --dc-canvas: rgb(242, 239, 232);
  --dc-surface-raised: rgb(250, 248, 242);
  --dc-surface-rail: rgb(237, 234, 227);
  --dc-surface-overlay: rgba(250, 248, 242, 0.969);
  --dc-surface-input: rgba(27, 24, 19, 0.039);
  --dc-surface-code-inline: rgba(27, 24, 19, 0.059);
  --dc-surface-code-block: rgba(27, 24, 19, 0.051);
  --dc-surface-control: rgb(255, 255, 255);
  --dc-surface-hover: rgba(27, 24, 19, 0.059);
  --dc-surface-pressed: rgba(27, 24, 19, 0.102);
  --dc-destructive: rgba(192, 57, 43, 0.851);
  --dc-destructive-subtle: rgba(192, 57, 43, 0.102);
  --dc-destructive-border: rgba(192, 57, 43, 0.2);
  --dc-success: rgba(47, 107, 67, 0.851);
  --dc-success-subtle: rgba(47, 107, 67, 0.102);
  --dc-success-border: rgba(47, 107, 67, 0.302);
  --dc-warning: rgba(161, 98, 7, 0.949);
  --dc-warning-subtle: rgba(161, 98, 7, 0.102);
  --dc-warning-border: rgba(161, 98, 7, 0.2);
  --dc-info: rgb(47, 94, 147);
  --dc-info-subtle: rgba(47, 94, 147, 0.102);
  --dc-info-border: rgba(47, 94, 147, 0.302);
  --dc-identity-1: rgb(216, 90, 48);
  --dc-identity-2: rgb(83, 74, 183);
  --dc-identity-3: rgb(153, 53, 86);
  --dc-identity-4: rgb(15, 110, 86);
  --dc-identity-5: rgb(24, 95, 165);
  --dc-identity-6: rgb(133, 79, 11);
  --dc-chart-2: rgb(83, 74, 183);
  --dc-chart-3: rgb(216, 90, 48);
  --dc-chart-4: rgb(136, 135, 128);
  --dc-chart-5: rgb(153, 53, 86);
  --dc-chart-6: rgb(24, 95, 165);
  --dc-scrollbar-thumb: rgba(27, 24, 19, 0.22);
  --dc-scrollbar-thumb-hover: rgba(27, 24, 19, 0.361);
  --dc-shade: rgb(0, 0, 0);
  --dc-accent: color-mix(in srgb, var(--brand) 85%, transparent);
  --dc-accent-subtle: color-mix(in srgb, var(--brand) 10%, transparent);
  --dc-accent-border: color-mix(in srgb, var(--brand) 30%, transparent);
  --dc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --dc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --dc-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  --dc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
  --dc-content-max: 1200px;
  --dc-measure: 760px;
  --dc-gutter: 32px;
  --dc-scale: 1;
  --dc-vh: calc(1vh / var(--dc-scale, 1));
  --dc-vw: calc(1vw / var(--dc-scale, 1));
  --dc-shell-bottom: 0px;
  --dc-safe-bottom: calc(var(--dc-shell-bottom, 0px) / var(--dc-scale, 1));
}

.dark {
  --brand: rgb(224, 122, 82);
  --dc-fg-strong: rgb(243, 239, 229);
  --dc-fg: rgb(232, 227, 215);
  --dc-fg-secondary: rgb(194, 188, 174);
  --dc-fg-muted: rgb(139, 133, 118);
  --dc-fg-faint: rgba(243, 239, 229, 0.302);
  --dc-fg-on-primary: rgba(255, 255, 255, 0.949);
  --dc-border: rgba(255, 252, 242, 0.11);
  --dc-border-subtle: rgba(255, 252, 242, 0.059);
  --dc-border-strong: rgba(255, 252, 242, 0.2);
  --dc-canvas: rgb(21, 19, 13);
  --dc-surface-raised: rgb(30, 27, 20);
  --dc-surface-rail: rgb(26, 24, 18);
  --dc-surface-overlay: rgba(30, 27, 20, 0.969);
  --dc-surface-input: rgba(255, 252, 242, 0.051);
  --dc-surface-code-inline: rgba(255, 252, 242, 0.078);
  --dc-surface-code-block: rgba(0, 0, 0, 0.2);
  --dc-surface-control: rgb(42, 39, 32);
  --dc-surface-hover: rgba(255, 252, 242, 0.071);
  --dc-surface-pressed: rgba(255, 252, 242, 0.122);
  --dc-destructive: rgba(240, 129, 110, 0.851);
  --dc-destructive-subtle: rgba(240, 129, 110, 0.102);
  --dc-destructive-border: rgba(240, 129, 110, 0.2);
  --dc-success: rgba(108, 196, 138, 0.851);
  --dc-success-subtle: rgba(108, 196, 138, 0.102);
  --dc-success-border: rgba(108, 196, 138, 0.302);
  --dc-warning: rgba(224, 184, 96, 0.949);
  --dc-warning-subtle: rgba(224, 184, 96, 0.102);
  --dc-warning-border: rgba(224, 184, 96, 0.2);
  --dc-info: rgb(158, 201, 251);
  --dc-info-subtle: rgba(158, 201, 251, 0.102);
  --dc-info-border: rgba(158, 201, 251, 0.302);
  --dc-identity-1: rgb(216, 90, 48);
  --dc-identity-2: rgb(83, 74, 183);
  --dc-identity-3: rgb(153, 53, 86);
  --dc-identity-4: rgb(15, 110, 86);
  --dc-identity-5: rgb(24, 95, 165);
  --dc-identity-6: rgb(133, 79, 11);
  --dc-chart-2: rgb(175, 169, 236);
  --dc-chart-3: rgb(240, 153, 123);
  --dc-chart-4: rgb(180, 178, 169);
  --dc-chart-5: rgb(237, 147, 177);
  --dc-chart-6: rgb(133, 183, 235);
  --dc-scrollbar-thumb: rgba(255, 252, 242, 0.22);
  --dc-scrollbar-thumb-hover: rgba(255, 252, 242, 0.361);
  --dc-shade: rgb(0, 0, 0);
  --dc-accent: color-mix(in srgb, var(--brand) 85%, transparent);
  --dc-accent-subtle: color-mix(in srgb, var(--brand) 10%, transparent);
  --dc-accent-border: color-mix(in srgb, var(--brand) 30%, transparent);
  --dc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --dc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --dc-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  --dc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
  --dc-content-max: 1200px;
  --dc-measure: 760px;
  --dc-gutter: 32px;
  --dc-scale: 1;
  --dc-vh: calc(1vh / var(--dc-scale, 1));
  --dc-vw: calc(1vw / var(--dc-scale, 1));
  --dc-shell-bottom: 0px;
  --dc-safe-bottom: calc(var(--dc-shell-bottom, 0px) / var(--dc-scale, 1));
}



/* ════════════════════════════════════════════════════════════════════

 * THE PRIMITIVES — CSS classes on the tokens (src/primitives.css)

 * ════════════════════════════════════════════════════════════════════ */

/*
 * THE PRIMITIVES, AS CSS CLASSES (design-system.md §2.2, §7 step 5).
 *
 * The web twin of the Mac's `macos-chrome/Primitives` and Windows' `Dc`: the same primitives, the
 * same sizes, the same states — drawn ONLY from the `--dc-*` tokens (the specs in src/components.ts,
 * the state language in src/state.ts). Any page that loads tokens.css can use them with no build
 * step and no framework: an app's plain markup, the hub, the website, our cloud admin, and the kit's
 * React components, which are these classes plus behaviour.
 *
 *   <button class="dc-button" data-variant="secondary" data-size="sm">Save</button>
 *   <button class="dc-icon-button" aria-label="Close"><svg …/></button>
 *   <input class="dc-field" placeholder="Search">
 *   <div class="dc-menu"><div class="dc-menu-item" data-highlighted>Rename</div></div>
 *
 * Every variant and size has a CLASS form too (`dc-button--secondary`, `dc-button--sm`, `dc-badge--neutral`,
 * `dc-field--sm`, `dc-panel--popup`), for callers that only have a class string to hand — the kit's
 * `buttonVariants()` and `badgeVariants()` return exactly that.
 *
 * ⚠ NO LITERALS. Every length, colour, duration and weight here is a `var(--dc-*)`; scripts/build.ts
 * refuses to emit this file if it finds a number with a unit. A primitive that needs a value no token
 * has is a token that is missing — add it to src/, never here.
 *
 * ⚠ THE LAYER. Everything sits in `@layer dc-primitives`, which the ORDER statement at the top of
 * tokens.css places after the kit's reset (`base`) and before its `components` and `utilities` —
 * so the reset never undoes a primitive, a kit utility can adjust one, and an app's own (unlayered)
 * CSS always wins.
 *
 * States follow the one language: a CONTROL (button, chip, segment, field) takes the neutral
 * translucent hover / pressed fills and the accent when on; an ITEM (menu item, row) takes the accent
 * wash under the pointer or the keyboard, and the SELECTED one is lifted onto the control's face with
 * a hairline and strong text — never bold. Disabled is `--dc-opacity-disabled`; keyboard focus is the
 * one ring (`--dc-focus-width` of accent, `--dc-focus-offset` outside the edge).
 *
 * THE POINTER is the arrow on every control and every row, as it is on the native chrome around the
 * page — the hand is for a link in running text, and nothing else. A disabled control still takes the
 * pointer, so its `title` (why it is disabled) shows: its state rules skip it instead, through
 * `:not(:where(…))`, which excludes without adding specificity.
 */

@layer dc-primitives {
  /* ── Button · icon button ─────────────────────────────────────────────────────────────── */

  .dc-button,
  .dc-icon-button {
    --dc-button-height: var(--dc-control-md-height);
    --dc-button-padding-x: var(--dc-control-md-padding-x);
    --dc-button-icon-padding-x: var(--dc-control-md-icon-padding-x);
    --dc-button-gap: var(--dc-control-md-gap);
    --dc-button-icon: var(--dc-control-md-icon);
    --dc-button-radius: var(--dc-control-md-radius);
    --dc-button-text: var(--dc-control-md-text);
    --dc-button-leading: var(--dc-control-md-text-leading);
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: var(--dc-button-gap);
    height: var(--dc-button-height);
    padding-inline: var(--dc-button-padding-x);
    border: var(--dc-hairline) solid transparent;
    border-radius: var(--dc-button-radius);
    background-clip: padding-box;
    font-family: inherit;
    font-size: var(--dc-button-text);
    line-height: var(--dc-button-leading);
    font-weight: var(--dc-control-md-weight);
    white-space: nowrap;
    text-decoration: none;
    cursor: default;
    user-select: none;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: var(--dc-duration-base);
    transition-timing-function: var(--dc-ease-standard);
  }
  .dc-button:has(> [data-icon="inline-start"]) {
    padding-inline-start: var(--dc-button-icon-padding-x);
  }
  .dc-button:has(> [data-icon="inline-end"]) {
    padding-inline-end: var(--dc-button-icon-padding-x);
  }
  .dc-icon-button {
    width: var(--dc-button-height);
    padding: 0;
  }
  .dc-button svg,
  .dc-icon-button svg {
    width: var(--dc-button-icon);
    height: var(--dc-button-icon);
    flex-shrink: 0;
    pointer-events: none;
  }

  :is(.dc-button, .dc-icon-button):is([data-size="xs"], .dc-button--xs) {
    --dc-button-height: var(--dc-control-xs-height);
    --dc-button-padding-x: var(--dc-control-xs-padding-x);
    --dc-button-icon-padding-x: var(--dc-control-xs-icon-padding-x);
    --dc-button-gap: var(--dc-control-xs-gap);
    --dc-button-icon: var(--dc-control-xs-icon);
    --dc-button-radius: var(--dc-control-xs-radius);
    --dc-button-text: var(--dc-control-xs-text);
    --dc-button-leading: var(--dc-control-xs-text-leading);
  }
  :is(.dc-button, .dc-icon-button):is([data-size="sm"], .dc-button--sm) {
    --dc-button-height: var(--dc-control-sm-height);
    --dc-button-padding-x: var(--dc-control-sm-padding-x);
    --dc-button-icon-padding-x: var(--dc-control-sm-icon-padding-x);
    --dc-button-gap: var(--dc-control-sm-gap);
    --dc-button-icon: var(--dc-control-sm-icon);
    --dc-button-radius: var(--dc-control-sm-radius);
    --dc-button-text: var(--dc-control-sm-text);
    --dc-button-leading: var(--dc-control-sm-text-leading);
  }
  :is(.dc-button, .dc-icon-button):is([data-size="lg"], .dc-button--lg) {
    --dc-button-height: var(--dc-control-lg-height);
    --dc-button-padding-x: var(--dc-control-lg-padding-x);
    --dc-button-icon-padding-x: var(--dc-control-lg-icon-padding-x);
    --dc-button-gap: var(--dc-control-lg-gap);
    --dc-button-icon: var(--dc-control-lg-icon);
    --dc-button-radius: var(--dc-control-lg-radius);
    --dc-button-text: var(--dc-control-lg-text);
    --dc-button-leading: var(--dc-control-lg-text-leading);
  }
  /* xl — a marketing page's hero call to action (the website); nothing inside the app is this big. */
  :is(.dc-button, .dc-icon-button):is([data-size="xl"], .dc-button--xl) {
    --dc-button-height: var(--dc-control-xl-height);
    --dc-button-padding-x: var(--dc-control-xl-padding-x);
    --dc-button-icon-padding-x: var(--dc-control-xl-icon-padding-x);
    --dc-button-gap: var(--dc-control-xl-gap);
    --dc-button-icon: var(--dc-control-xl-icon);
    --dc-button-radius: var(--dc-control-xl-radius);
    --dc-button-text: var(--dc-control-xl-text);
    --dc-button-leading: var(--dc-control-xl-text-leading);
  }

  /* primary — the one main action: the accent, brand under the pointer, darker held down */
  :is(.dc-button, .dc-icon-button):where([data-variant="primary"], .dc-button--primary, :not([data-variant], .dc-button--secondary, .dc-button--outline, .dc-button--ghost, .dc-button--destructive, .dc-button--link)) {
    background-color: var(--dc-state-control-on);
    color: var(--dc-state-control-on-text);
  }
  :is(.dc-button, .dc-icon-button):where([data-variant="primary"], .dc-button--primary, :not([data-variant], .dc-button--secondary, .dc-button--outline, .dc-button--ghost, .dc-button--destructive, .dc-button--link)):is(:hover, [aria-expanded="true"]):not(:where(:disabled, [aria-disabled="true"])) {
    background-color: var(--brand);
  }
  :is(.dc-button, .dc-icon-button):where([data-variant="primary"], .dc-button--primary, :not([data-variant], .dc-button--secondary, .dc-button--outline, .dc-button--ghost, .dc-button--destructive, .dc-button--link)):active:not(:where(:disabled, [aria-disabled="true"])) {
    background-color: color-mix(in srgb, var(--brand), var(--dc-shade) var(--dc-state-primary-pressed-shade));
  }

  /* secondary — a raised control face; hover and press replace the face with the neutral fills */
  :is(.dc-button, .dc-icon-button):is([data-variant="secondary"], .dc-button--secondary) {
    border-color: var(--dc-border);
    background-color: var(--dc-state-control-face);
    color: var(--dc-fg);
    box-shadow: var(--dc-shadow-raised);
  }
  :is(.dc-button, .dc-icon-button):is([data-variant="secondary"], .dc-button--secondary):hover:not(:where(:disabled, [aria-disabled="true"])) {
    background-color: var(--dc-state-control-hover);
  }
  :is(.dc-button, .dc-icon-button):is([data-variant="secondary"], .dc-button--secondary):is(:active, [aria-expanded="true"]):not(:where(:disabled, [aria-disabled="true"])) {
    background-color: var(--dc-state-control-pressed);
    box-shadow: none;
  }

  /* outline — a stronger hairline and no face */
  :is(.dc-button, .dc-icon-button):is([data-variant="outline"], .dc-button--outline) {
    border-color: var(--dc-border-strong);
    background-color: transparent;
    color: var(--dc-fg);
  }

  /* ghost — nothing until the pointer arrives */
  :is(.dc-button, .dc-icon-button):is([data-variant="ghost"], .dc-button--ghost) {
    background-color: transparent;
    color: var(--dc-fg-secondary);
  }
  /* (A toggle that is ON keeps its accent ink under the pointer — excluded here rather than out-ranked
     below, so the order of the two rules can never decide it.) */
  :is(.dc-button, .dc-icon-button):is([data-variant="ghost"], .dc-button--ghost):is(:hover, [aria-expanded="true"]):not(:where(:disabled, [aria-disabled="true"], [aria-pressed="true"], [data-state="on"])) {
    color: var(--dc-fg);
  }

  :is(.dc-button, .dc-icon-button):is([data-variant="outline"], [data-variant="ghost"], .dc-button--outline, .dc-button--ghost):hover:not(:where(:disabled, [aria-disabled="true"])) {
    background-color: var(--dc-state-control-hover);
  }
  :is(.dc-button, .dc-icon-button):is([data-variant="outline"], [data-variant="ghost"], .dc-button--outline, .dc-button--ghost):is(:active, [aria-expanded="true"]):not(:where(:disabled, [aria-disabled="true"])) {
    background-color: var(--dc-state-control-pressed);
  }

  /* destructive — the destructive colour, strengthening behind itself */
  :is(.dc-button, .dc-icon-button):is([data-variant="destructive"], .dc-button--destructive) {
    background-color: var(--dc-destructive-subtle);
    color: var(--dc-destructive);
  }
  :is(.dc-button, .dc-icon-button):is([data-variant="destructive"], .dc-button--destructive):is(:hover, [aria-expanded="true"]):not(:where(:disabled, [aria-disabled="true"])) {
    background-color: color-mix(in srgb, var(--dc-destructive) var(--dc-state-destructive-hover), transparent);
  }
  :is(.dc-button, .dc-icon-button):is([data-variant="destructive"], .dc-button--destructive):active:not(:where(:disabled, [aria-disabled="true"])) {
    background-color: color-mix(in srgb, var(--dc-destructive) var(--dc-state-destructive-pressed), transparent);
  }

  /* link — accent text, no chrome */
  .dc-button:is([data-variant="link"], .dc-button--link) {
    height: auto;
    padding-inline: 0;
    border-width: 0;
    background-color: transparent;
    color: var(--dc-accent);
    text-underline-offset: var(--dc-space-1);
  }
  .dc-button:is([data-variant="link"], .dc-button--link):hover:not(:where(:disabled, [aria-disabled="true"])) {
    text-decoration: underline;
  }

  /* on — a toggle that is ON (a toolbar's Bold, the bookmark star): the variant's own face, the accent
     ink, pointer or not — the Mac's `isOn`, Windows' `Dc.SetOn`. Not the primary's: on the accent face
     the accent ink would vanish. */
  :is(.dc-button, .dc-icon-button):is([data-variant="secondary"], [data-variant="outline"], [data-variant="ghost"], [data-variant="link"], .dc-button--secondary, .dc-button--outline, .dc-button--ghost, .dc-button--link):is([aria-pressed="true"], [data-state="on"]) {
    color: var(--dc-accent);
  }

  :is(.dc-button, .dc-icon-button)[aria-invalid="true"] {
    border-color: var(--dc-destructive);
  }
  :is(.dc-button, .dc-icon-button):is(:disabled, [aria-disabled="true"]) {
    opacity: var(--dc-opacity-disabled);
  }
  a:is(.dc-button, .dc-icon-button)[aria-disabled="true"] {
    pointer-events: none;
  }

  /* ── Chip — a toggleable filter; pressed, so never a pill ─────────────────────────────── */

  .dc-chip {
    --dc-chip-height: var(--dc-chip-md-height);
    --dc-chip-padding-x: var(--dc-chip-md-padding-x);
    --dc-chip-text: var(--dc-chip-md-text);
    --dc-chip-leading: var(--dc-chip-md-text-leading);
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--dc-chip-md-gap);
    height: var(--dc-chip-height);
    padding-inline: var(--dc-chip-padding-x);
    border: var(--dc-hairline) solid var(--dc-border);
    border-radius: var(--dc-chip-md-radius);
    background-color: transparent;
    color: var(--dc-fg-secondary);
    font-family: inherit;
    font-size: var(--dc-chip-text);
    line-height: var(--dc-chip-leading);
    font-weight: var(--dc-chip-md-weight);
    white-space: nowrap;
    text-decoration: none;
    cursor: default;
    user-select: none;
    transition-property: color, background-color, border-color;
    transition-duration: var(--dc-duration-base);
    transition-timing-function: var(--dc-ease-standard);
  }
  .dc-chip:is([data-size="sm"], .dc-chip--sm) {
    --dc-chip-height: var(--dc-chip-sm-height);
    --dc-chip-padding-x: var(--dc-chip-sm-padding-x);
    --dc-chip-text: var(--dc-chip-sm-text);
    --dc-chip-leading: var(--dc-chip-sm-text-leading);
  }
  .dc-chip svg {
    width: var(--dc-chip-md-icon);
    height: var(--dc-chip-md-icon);
    flex-shrink: 0;
  }
  /* A chip that opens something (a picker's trigger) reads as held down while it is open — the
     button's `aria-expanded`, and the Mac's menu-trigger chip. */
  .dc-chip:not([aria-pressed="true"], [data-selected], :disabled, [aria-disabled="true"]):is(:hover, [aria-expanded="true"]) {
    background-color: var(--dc-state-control-hover);
    color: var(--dc-fg);
  }
  .dc-chip:not([aria-pressed="true"], [data-selected], :disabled, [aria-disabled="true"]):is(:active, [aria-expanded="true"]) {
    background-color: var(--dc-state-control-pressed);
  }
  .dc-chip:is([aria-pressed="true"], [data-selected]) {
    border-color: var(--dc-accent-border);
    background-color: var(--dc-accent-subtle);
    color: var(--dc-fg-strong);
  }
  .dc-chip:is(:disabled, [aria-disabled="true"]) {
    opacity: var(--dc-opacity-disabled);
  }

  /* ── Field — an input, a textarea, a select's trigger ─────────────────────────────────── */

  .dc-field {
    --dc-field-radius: var(--dc-field-md-radius);
    width: 100%;
    min-width: 0;
    height: var(--dc-field-md-height);
    padding-inline: var(--dc-field-md-padding-x);
    border: var(--dc-hairline) solid var(--dc-border);
    border-radius: var(--dc-field-radius);
    background-color: var(--dc-surface-input);
    color: var(--dc-fg);
    font-family: inherit;
    font-size: var(--dc-field-md-text);
    line-height: var(--dc-field-md-text-leading);
    transition-property: border-color, background-color;
    transition-duration: var(--dc-duration-base);
    transition-timing-function: var(--dc-ease-standard);
  }
  .dc-field:is([data-size="sm"], .dc-field--sm) {
    --dc-field-radius: var(--dc-field-sm-radius);
    height: var(--dc-field-sm-height);
    padding-inline: var(--dc-field-sm-padding-x);
    font-size: var(--dc-field-sm-text);
    line-height: var(--dc-field-sm-text-leading);
  }
  textarea.dc-field {
    height: auto;
    min-height: var(--dc-space-16);
    padding-block: var(--dc-field-md-padding-y);
  }
  .dc-field::placeholder {
    color: var(--dc-fg-muted);
  }
  .dc-field:hover {
    border-color: var(--dc-border-strong);
  }
  .dc-field[aria-invalid="true"] {
    border-color: var(--dc-destructive);
  }
  .dc-field:disabled {
    cursor: not-allowed;
    opacity: var(--dc-opacity-disabled);
  }
  /* A field that HOLDS its input — a search box with its glyph, a composer with its chips: the field's
     face on a container (the Mac's `.alexField`), a glyph at the field's own icon size, and the ring
     while the INPUT inside has keyboard focus — a button inside (Clear, Send) rings itself, not the
     field. The input inside gives up its own face. */
  .dc-field:not(input, textarea, select) {
    display: flex;
    align-items: center;
    gap: var(--dc-field-md-gap);
    cursor: text;
  }
  .dc-field:not(input, textarea, select):is([data-size="sm"], .dc-field--sm) {
    gap: var(--dc-field-sm-gap);
  }
  .dc-field:not(input, textarea, select) > svg {
    width: var(--dc-field-md-icon);
    height: var(--dc-field-md-icon);
    flex-shrink: 0;
    color: var(--dc-fg-muted);
  }
  .dc-field:not(input, textarea, select):is([data-size="sm"], .dc-field--sm) > svg {
    width: var(--dc-field-sm-icon);
    height: var(--dc-field-sm-icon);
  }
  .dc-field:not(input, textarea, select) > :is(input, textarea) {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: inherit;
    font: inherit;
    outline: none;
  }
  .dc-field:not(input, textarea, select) > :is(input, textarea)::placeholder {
    color: var(--dc-fg-muted);
  }

  /* ── Segmented — two to four views ────────────────────────────────────────────────────── */

  .dc-segmented {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--dc-segmented-gap);
    height: var(--dc-segmented-height);
    padding: var(--dc-segmented-padding);
    border-radius: var(--dc-segmented-radius);
    background-color: var(--dc-surface-input);
    color: var(--dc-fg-muted);
  }
  .dc-segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dc-segmented-icon-gap);
    height: 100%;
    padding-inline: var(--dc-segmented-segment-padding-x);
    border: 0;
    border-radius: var(--dc-segmented-segment-radius);
    background-color: transparent;
    color: var(--dc-fg-muted);
    font-family: inherit;
    font-size: var(--dc-segmented-text);
    line-height: var(--dc-segmented-text-leading);
    font-weight: var(--dc-segmented-weight);
    white-space: nowrap;
    cursor: default;
    transition-property: color, background-color, box-shadow;
    transition-duration: var(--dc-duration-base);
    transition-timing-function: var(--dc-ease-standard);
  }
  .dc-segment svg {
    width: var(--dc-segmented-icon);
    height: var(--dc-segmented-icon);
    flex-shrink: 0;
  }
  .dc-segment:not([aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], [data-selected]):hover {
    color: var(--dc-fg);
  }
  .dc-segment:is([aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], [data-selected]) {
    background-color: var(--dc-state-control-face);
    color: var(--dc-fg-strong);
    box-shadow: var(--dc-shadow-raised);
  }
  .dc-segment:is(:disabled, [aria-disabled="true"]) {
    pointer-events: none;
    opacity: var(--dc-opacity-disabled);
  }

  /* ── Menu and item — every floating list, and every row of a list ─────────────────────── */

  .dc-menu {
    min-width: var(--dc-menu-min-width);
    padding: var(--dc-menu-padding);
    border: var(--dc-hairline) solid var(--dc-border);
    border-radius: var(--dc-menu-radius);
    background-color: var(--dc-surface-overlay);
    color: var(--dc-fg);
    box-shadow: var(--dc-shadow-overlay);
    outline: none;
  }
  .dc-menu-item,
  .dc-item {
    position: relative;
    display: flex;
    width: 100%;
    min-height: var(--dc-menu-item-height);
    align-items: center;
    gap: var(--dc-menu-item-gap);
    padding: var(--dc-menu-item-padding-y) var(--dc-menu-item-padding-x);
    border: 0;
    border-radius: var(--dc-menu-item-radius);
    background-color: transparent;
    color: var(--dc-fg);
    font-family: inherit;
    font-size: var(--dc-menu-item-text);
    line-height: var(--dc-menu-item-text-leading);
    text-align: start;
    text-decoration: none;
    outline: none;
    cursor: default;
    user-select: none;
    transition-property: color, background-color, box-shadow;
    transition-duration: var(--dc-duration-base);
    transition-timing-function: var(--dc-ease-standard);
  }
  .dc-item {
    min-height: var(--dc-row-height);
    gap: var(--dc-row-gap);
    padding: var(--dc-row-padding-y) var(--dc-row-padding-x);
    border-radius: var(--dc-row-radius);
    font-size: var(--dc-row-text);
    line-height: var(--dc-row-text-leading);
  }
  /* A glyph anywhere in the row takes the row's icon size — except one inside a control that sits in the
     row (a row's own ✕ button), which keeps its control's. */
  :is(.dc-menu-item, .dc-item) svg:not(:where(.dc-button, .dc-icon-button, .dc-chip, .dc-badge, .dc-avatar) svg) {
    width: var(--dc-menu-item-icon);
    height: var(--dc-menu-item-icon);
    flex-shrink: 0;
    pointer-events: none;
  }
  /* A leading glyph is muted at rest and takes the row's ink when lit; a mark INSIDE a slot (a menu's
     accent check) keeps its own colour, which is why this is the direct child only. */
  :is(.dc-menu-item, .dc-item) > svg {
    color: var(--dc-fg-muted);
  }
  :is(.dc-menu-item, .dc-item):is(:hover, [data-highlighted]) > svg {
    color: inherit;
  }
  .dc-menu-item:is([data-inset], [data-indicator]) {
    padding-inline-start: calc(var(--dc-menu-item-padding-x) * 2 + var(--dc-menu-item-icon));
  }
  .dc-menu-item:is(:hover, [data-highlighted]),
  .dc-item:not([aria-selected="true"], [aria-current="page"], [aria-current="true"], [data-selected], [data-active="true"]):is(:hover, [data-highlighted]) {
    background-color: var(--dc-state-item-hover);
    color: var(--dc-state-item-hover-text);
  }
  /* Keyboard focus: a menu's item shows it as its highlight (the list moves it); a row in a page shows
     the one ring, drawn inside so a scroller never clips it. */
  .dc-menu-item:focus-visible {
    background-color: var(--dc-state-item-hover);
    color: var(--dc-state-item-hover-text);
  }
  .dc-item:focus-visible {
    outline: var(--dc-focus-width) solid var(--dc-accent);
    outline-offset: calc(var(--dc-focus-width) * -1);
  }
  /* SELECTED is a list's state, not a menu's: a menu marks its chosen option with the check, as the web's
     and the native menus do — so only `.dc-item` lifts. */
  .dc-item:is([aria-selected="true"], [aria-current="page"], [aria-current="true"], [data-selected], [data-active="true"]) {
    background-color: var(--dc-state-item-selected);
    color: var(--dc-state-item-selected-text);
    box-shadow: inset 0 0 0 var(--dc-hairline) var(--dc-state-item-selected-ring);
  }
  /* The selected row's leading glyph takes the accent — the settings rail's and the sidebar's mark. */
  .dc-item:is([aria-selected="true"], [aria-current="page"], [aria-current="true"], [data-selected], [data-active="true"]) > svg {
    color: var(--dc-accent);
  }
  :is(.dc-menu-item, .dc-item):is(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"])) {
    pointer-events: none;
    opacity: var(--dc-opacity-disabled);
  }
  .dc-menu-item[data-variant="destructive"] {
    color: var(--dc-destructive);
  }
  .dc-menu-item[data-variant="destructive"]:is(:hover, [data-highlighted]) {
    background-color: var(--dc-destructive-subtle);
    color: var(--dc-destructive);
  }
  .dc-menu-item[data-variant="destructive"] > svg {
    color: currentColor;
  }

  .dc-menu-label {
    padding: var(--dc-menu-label-padding-top) var(--dc-menu-label-padding-x) var(--dc-menu-label-padding-bottom);
    color: var(--dc-fg-muted);
    font-size: var(--dc-menu-label-text);
    line-height: var(--dc-menu-label-text-leading);
    font-weight: var(--dc-menu-label-weight);
  }
  .dc-menu-separator {
    height: var(--dc-hairline);
    margin-block: var(--dc-menu-separator-margin-y);
    margin-inline: calc(var(--dc-menu-padding) * -1);
    border: 0;
    background-color: var(--dc-border);
  }
  .dc-menu-shortcut {
    margin-inline-start: auto;
    padding-inline-start: var(--dc-menu-shortcut-gap);
    color: var(--dc-fg-muted);
    font-size: var(--dc-menu-shortcut-text);
    line-height: var(--dc-menu-shortcut-text-leading);
  }

  /* ── Badge — a count or a status: READ, so the one pill ───────────────────────────────── */

  .dc-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: var(--dc-badge-gap);
    height: var(--dc-badge-height);
    padding-inline: var(--dc-badge-padding-x);
    border: var(--dc-hairline) solid transparent;
    border-radius: var(--dc-radius-full);
    background-color: var(--dc-state-control-on);
    color: var(--dc-state-control-on-text);
    font-size: var(--dc-badge-text);
    line-height: var(--dc-badge-text-leading);
    font-weight: var(--dc-badge-weight);
    white-space: nowrap;
  }
  .dc-badge svg {
    width: var(--dc-badge-icon);
    height: var(--dc-badge-icon);
  }
  .dc-badge:is([data-tone="neutral"], .dc-badge--neutral) {
    background-color: var(--dc-surface-hover);
    color: var(--dc-fg-secondary);
  }
  .dc-badge:is([data-tone="destructive"], .dc-badge--destructive) {
    border-color: var(--dc-destructive-border);
    background-color: var(--dc-destructive-subtle);
    color: var(--dc-destructive);
  }
  .dc-badge:is([data-tone="warning"], .dc-badge--warning) {
    border-color: var(--dc-warning-border);
    background-color: var(--dc-warning-subtle);
    color: var(--dc-warning);
  }
  .dc-badge:is([data-tone="success"], .dc-badge--success) {
    border-color: var(--dc-success-border);
    background-color: var(--dc-success-subtle);
    color: var(--dc-success);
  }
  .dc-badge:is([data-tone="info"], .dc-badge--info) {
    border-color: var(--dc-info-border);
    background-color: var(--dc-info-subtle);
    color: var(--dc-info);
  }
  /* The accent TINTED — a status worth noticing in the product's own colour ("update available",
     "ahead"), where the default's solid accent is a count. (`data-tone="accent"` is that solid default,
     named — the Mac's and Windows' `accent`.) */
  .dc-badge:is([data-tone="accent-subtle"], .dc-badge--accent-subtle) {
    border-color: var(--dc-accent-border);
    background-color: var(--dc-accent-subtle);
    color: var(--dc-accent);
  }
  .dc-badge:is([data-tone="outline"], .dc-badge--outline) {
    border-color: var(--dc-border);
    background-color: transparent;
    color: var(--dc-fg-secondary);
  }

  /* ── Avatar — a person: an initial on a disc. READ, so round ──────────────────────────── */

  /* The member's accent tint behind the brand ink when the disc is YOU; `data-hue="1"`…`"6"` when it is
     somebody — the identity hue a hash of their id picked. An `<img>` inside fills the disc. */
  .dc-avatar {
    --dc-avatar-size: var(--dc-avatar-md-size);
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--dc-avatar-size);
    height: var(--dc-avatar-size);
    border-radius: var(--dc-radius-full);
    background-color: var(--dc-accent-subtle);
    color: var(--brand);
    font-size: var(--dc-avatar-md-text);
    line-height: var(--dc-avatar-md-text-leading);
    font-weight: var(--dc-avatar-md-weight);
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
  }
  .dc-avatar:is([data-size="sm"], .dc-avatar--sm) {
    --dc-avatar-size: var(--dc-avatar-sm-size);
    font-size: var(--dc-avatar-sm-text);
    line-height: var(--dc-avatar-sm-text-leading);
    font-weight: var(--dc-avatar-sm-weight);
  }
  .dc-avatar:is([data-size="lg"], .dc-avatar--lg) {
    --dc-avatar-size: var(--dc-avatar-lg-size);
    font-size: var(--dc-avatar-lg-text);
    line-height: var(--dc-avatar-lg-text-leading);
    font-weight: var(--dc-avatar-lg-weight);
  }
  /* Rounded itself rather than clipped by the disc, so a mark an app hangs off the disc's edge (a
     presence dot) still shows. */
  .dc-avatar > img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
  }
  .dc-avatar[data-hue] {
    color: var(--dc-fg-on-primary);
  }
  .dc-avatar[data-hue="1"] { background-color: var(--dc-identity-1); }
  .dc-avatar[data-hue="2"] { background-color: var(--dc-identity-2); }
  .dc-avatar[data-hue="3"] { background-color: var(--dc-identity-3); }
  .dc-avatar[data-hue="4"] { background-color: var(--dc-identity-4); }
  .dc-avatar[data-hue="5"] { background-color: var(--dc-identity-5); }
  .dc-avatar[data-hue="6"] { background-color: var(--dc-identity-6); }

  /* ── Panel — a popup, a dialog, a card ────────────────────────────────────────────────── */

  .dc-panel {
    border: var(--dc-hairline) solid var(--dc-border);
    border-radius: var(--dc-card-radius);
    background-color: var(--dc-surface-raised);
    color: var(--dc-fg);
  }
  .dc-panel:is([data-kind="popup"], .dc-panel--popup) {
    border-radius: var(--dc-menu-radius);
    background-color: var(--dc-surface-overlay);
    box-shadow: var(--dc-shadow-overlay);
  }
  .dc-panel:is([data-kind="dialog"], .dc-panel--dialog) {
    padding: var(--dc-dialog-padding);
    border-radius: var(--dc-dialog-radius);
    background-color: var(--dc-surface-overlay);
    box-shadow: var(--dc-shadow-overlay);
  }
  .dc-scrim {
    background-color: color-mix(in srgb, var(--dc-shade) calc(var(--dc-opacity-scrim) * 100%), transparent);
  }

  /* ── Tooltip — an inverse bubble ──────────────────────────────────────────────────────── */

  .dc-tooltip {
    padding: var(--dc-tooltip-padding-y) var(--dc-tooltip-padding-x);
    border-radius: var(--dc-tooltip-radius);
    background-color: var(--dc-fg-strong);
    color: var(--dc-canvas);
    font-size: var(--dc-tooltip-text);
    line-height: var(--dc-tooltip-text-leading);
    box-shadow: var(--dc-shadow-overlay);
  }

  /* ── Divider ──────────────────────────────────────────────────────────────────────────── */

  .dc-divider {
    height: var(--dc-hairline);
    border: 0;
    background-color: var(--dc-border);
  }
  .dc-divider[data-orientation="vertical"] {
    width: var(--dc-hairline);
    height: auto;
    align-self: stretch;
  }

  /* ── Switch — on / off ────────────────────────────────────────────────────────────────── */

  .dc-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    width: var(--dc-toggle-width);
    height: var(--dc-toggle-height);
    padding: var(--dc-toggle-padding);
    border: 0;
    border-radius: var(--dc-radius-full);
    background-color: var(--dc-border-strong);
    cursor: default;
    transition-property: background-color;
    transition-duration: var(--dc-duration-base);
    transition-timing-function: var(--dc-ease-standard);
  }
  .dc-switch:not([aria-checked="true"], [data-checked]):hover {
    background-color: var(--dc-fg-faint);
  }
  .dc-switch:not(:has(.dc-switch-thumb))::after,
  .dc-switch-thumb {
    content: "";
    display: block;
    flex-shrink: 0;
    pointer-events: none;
    width: var(--dc-toggle-thumb);
    height: var(--dc-toggle-thumb);
    border-radius: var(--dc-radius-full);
    background-color: var(--dc-fg-on-primary);
    box-shadow: var(--dc-shadow-raised);
    transition-property: transform;
    transition-duration: var(--dc-duration-base);
    transition-timing-function: var(--dc-ease-standard);
  }
  .dc-switch:is([aria-checked="true"], [data-checked]) {
    background-color: var(--dc-state-control-on);
  }
  .dc-switch:is([aria-checked="true"], [data-checked]):not(:has(.dc-switch-thumb))::after,
  .dc-switch:is([aria-checked="true"], [data-checked]) .dc-switch-thumb {
    transform: translateX(calc(var(--dc-toggle-width) - var(--dc-toggle-thumb) - var(--dc-toggle-padding) * 2));
  }
  .dc-switch:is(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"])) {
    cursor: not-allowed;
    opacity: var(--dc-opacity-disabled);
  }

  /* ── Slider — a range input ───────────────────────────────────────────────────────────── */
  /* One track pseudo-element on WebKit (no separate "filled" part), so the fill is a gradient split
     at `--dc-slider-fill` (a 0%–100% custom property the component sets from value/min/max — falls
     back to 0%, an empty track, when a caller forgets it). Firefox gets the same picture natively
     from `::-moz-range-progress`. The thumb is `fg-on-primary` with a raised shadow, like the
     switch's. */
  .dc-slider {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: var(--dc-slider-thumb-size);
    background: transparent;
    cursor: default;
  }
  .dc-slider::-webkit-slider-runnable-track {
    height: var(--dc-slider-track-height);
    border-radius: var(--dc-slider-track-radius);
    background: linear-gradient(
      to right,
      var(--dc-accent) var(--dc-slider-fill, 0%),
      var(--dc-surface-input) var(--dc-slider-fill, 0%)
    );
  }
  .dc-slider::-moz-range-track {
    height: var(--dc-slider-track-height);
    border-radius: var(--dc-slider-track-radius);
    background-color: var(--dc-surface-input);
  }
  .dc-slider::-moz-range-progress {
    height: var(--dc-slider-track-height);
    border-radius: var(--dc-slider-track-radius);
    background-color: var(--dc-accent);
  }
  .dc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: calc((var(--dc-slider-track-height) - var(--dc-slider-thumb-size)) / 2);
    width: var(--dc-slider-thumb-size);
    height: var(--dc-slider-thumb-size);
    border-radius: var(--dc-slider-thumb-radius);
    background-color: var(--dc-fg-on-primary);
    box-shadow: var(--dc-shadow-raised);
    cursor: default;
    transition-property: box-shadow;
    transition-duration: var(--dc-duration-base);
    transition-timing-function: var(--dc-ease-standard);
  }
  .dc-slider::-moz-range-thumb {
    width: var(--dc-slider-thumb-size);
    height: var(--dc-slider-thumb-size);
    border: 0;
    border-radius: var(--dc-slider-thumb-radius);
    background-color: var(--dc-fg-on-primary);
    box-shadow: var(--dc-shadow-raised);
    cursor: default;
    transition-property: box-shadow;
    transition-duration: var(--dc-duration-base);
    transition-timing-function: var(--dc-ease-standard);
  }
  .dc-slider:not(:disabled, [aria-disabled="true"]):hover::-webkit-slider-thumb,
  .dc-slider:not(:disabled, [aria-disabled="true"]):hover::-moz-range-thumb {
    box-shadow: var(--dc-shadow-raised), 0 0 0 var(--dc-hairline) var(--dc-border-strong);
  }
  .dc-slider:is(:disabled, [aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: var(--dc-opacity-disabled);
  }
  .dc-slider:is(:disabled, [aria-disabled="true"])::-webkit-slider-thumb,
  .dc-slider:is(:disabled, [aria-disabled="true"])::-moz-range-thumb {
    cursor: not-allowed;
  }

  /* ── The one focus ring ───────────────────────────────────────────────────────────────── */

  :is(.dc-button, .dc-icon-button, .dc-chip, .dc-field, .dc-segment, .dc-switch, .dc-slider):focus-visible,
  .dc-field:not(input, textarea, select):has(:is(input, textarea, select):focus-visible) {
    outline: var(--dc-focus-width) solid var(--dc-accent);
    outline-offset: var(--dc-focus-offset);
  }
  :is(.dc-button, .dc-icon-button, .dc-field)[aria-invalid="true"]:focus-visible {
    outline-color: var(--dc-destructive);
  }

  /* ── `hidden` still hides ─────────────────────────────────────────────────────────────── */
  /* A primitive sets `display`, and any author rule beats the browser's own `[hidden]` — so a hidden
     `.dc-button` would stay on screen. Last in the layer, and one attribute more specific than every
     `display` above it. */
  /* A REORDERABLE ROW (the kit's SortableList): the item's own face, and only the drag states on top.
     The row being carried dims like a disabled one; the row under the pointer says where the carried
     one will land with the accent wash and a hairline on the edge it will sit against. */
  .dc-sortable-row {
    position: relative;
  }
  .dc-sortable-row [data-slot="sortable-grip"] {
    cursor: grab;
  }
  .dc-sortable-row[data-dragging="true"] {
    opacity: var(--dc-opacity-disabled);
  }
  .dc-sortable-row[data-drop="before"] {
    background-color: var(--dc-accent-subtle);
    box-shadow: inset 0 var(--dc-hairline) 0 0 var(--dc-accent);
  }
  .dc-sortable-row[data-drop="after"] {
    background-color: var(--dc-accent-subtle);
    box-shadow: inset 0 calc(-1 * var(--dc-hairline)) 0 0 var(--dc-accent);
  }
  .dc-sortable-list[data-drop="end"] {
    box-shadow: inset 0 calc(-1 * var(--dc-hairline)) 0 0 var(--dc-accent);
  }
  /* ── Chart — values over time, a whole in parts, a headline number ───────────────────────── */
  /* An SVG the kit's `TimeSeriesChart` draws; these classes are all its LOOK. A series' colour is
     `--dc-chart-color`, set by `data-tone` (1 = the accent, for a one-series chart; 2–6 = --dc-chart-2…6, for a chart of several parts), so the same tone
     paints a line, its area, its legend key and its proportion segment. A GAP is time the thing was
     not running — shaded, never drawn as zero. Markers are short ticks on the bottom edge. */
  .dc-chart {
    position: relative;
    color: var(--dc-fg-muted);
    font-size: var(--dc-chart-axis-text);
    line-height: var(--dc-chart-axis-text-leading);
    user-select: none;
  }
  .dc-chart > svg {
    display: block;
    overflow: visible;
  }
  .dc-chart [data-tone="1"], .dc-chart-legend [data-tone="1"], .dc-proportion [data-tone="1"] { --dc-chart-color: var(--dc-accent); }
  .dc-chart [data-tone="2"], .dc-chart-legend [data-tone="2"], .dc-proportion [data-tone="2"] { --dc-chart-color: var(--dc-chart-2); }
  .dc-chart [data-tone="3"], .dc-chart-legend [data-tone="3"], .dc-proportion [data-tone="3"] { --dc-chart-color: var(--dc-chart-3); }
  .dc-chart [data-tone="4"], .dc-chart-legend [data-tone="4"], .dc-proportion [data-tone="4"] { --dc-chart-color: var(--dc-chart-4); }
  .dc-chart [data-tone="5"], .dc-chart-legend [data-tone="5"], .dc-proportion [data-tone="5"] { --dc-chart-color: var(--dc-chart-5); }
  .dc-chart [data-tone="6"], .dc-chart-legend [data-tone="6"], .dc-proportion [data-tone="6"] { --dc-chart-color: var(--dc-chart-6); }
  .dc-chart-grid {
    stroke: var(--dc-border);
    stroke-width: var(--dc-hairline);
  }
  .dc-chart-axis {
    fill: currentColor;
  }
  .dc-chart-series {
    fill: none;
    stroke: var(--dc-chart-color);
    stroke-width: var(--dc-chart-line);
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  .dc-chart-series[data-dash="dashed"] { stroke-dasharray: 5 3; }
  .dc-chart-series[data-dash="dotted"] { stroke-dasharray: 1 3; }
  .dc-chart-area {
    fill: color-mix(in srgb, var(--dc-chart-color) 14%, transparent);
    stroke: none;
  }
  .dc-chart-limit {
    stroke: var(--dc-fg-faint);
    stroke-width: var(--dc-chart-limit);
    stroke-dasharray: 5 4;
  }
  .dc-chart-gap {
    fill: var(--dc-surface-hover);
  }
  .dc-chart-gap-label {
    fill: var(--dc-fg-muted);
  }
  .dc-chart-marker { fill: var(--dc-fg-muted); }
  .dc-chart-marker[data-tone="warning"] { fill: var(--dc-warning); }
  .dc-chart-marker[data-tone="danger"] { fill: var(--dc-destructive); }
  .dc-chart-cross {
    stroke: var(--dc-border-strong);
    stroke-width: var(--dc-hairline);
  }
  .dc-chart-dot {
    fill: var(--dc-chart-color);
    stroke: var(--dc-canvas);
    stroke-width: var(--dc-chart-limit);
  }
  .dc-chart-tooltip {
    position: absolute;
    top: 0;
    z-index: 1;
    display: grid;
    gap: var(--dc-chart-tooltip-gap);
    padding: var(--dc-chart-tooltip-padding-y) var(--dc-chart-tooltip-padding-x);
    border-radius: var(--dc-chart-tooltip-radius);
    background-color: var(--dc-fg-strong);
    color: var(--dc-canvas);
    font-size: var(--dc-chart-tooltip-text);
    line-height: var(--dc-chart-tooltip-text-leading);
    box-shadow: var(--dc-shadow-overlay);
    white-space: nowrap;
    pointer-events: none;
  }
  .dc-chart-tooltip-row {
    display: flex;
    align-items: center;
    gap: var(--dc-chart-tooltip-gap);
  }
  .dc-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dc-chart-tooltip-gap) var(--dc-chart-legend-gap);
    color: var(--dc-fg-secondary);
    font-size: var(--dc-chart-legend-text);
    line-height: var(--dc-chart-legend-text-leading);
  }
  .dc-chart-key {
    display: inline-flex;
    align-items: center;
    gap: var(--dc-chart-tooltip-gap);
  }
  .dc-chart-key-swatch {
    flex: none;
    width: var(--dc-chart-legend-swatch);
    height: 0;
    border-top: var(--dc-chart-line) solid var(--dc-chart-color);
  }
  .dc-chart-key-swatch[data-dash="dashed"] { border-top-style: dashed; }
  .dc-chart-key-swatch[data-dash="dotted"] { border-top-style: dotted; }
  .dc-chart-key-swatch[data-kind="fill"] {
    height: var(--dc-chart-legend-swatch);
    border: 0;
    border-radius: var(--dc-chart-bar-radius);
    background-color: var(--dc-chart-color);
  }
  .dc-chart-key-swatch[data-kind="limit"] {
    border-top: var(--dc-chart-limit) dashed var(--dc-fg-faint);
  }
  .dc-chart-key-swatch[data-kind="gap"] {
    height: var(--dc-chart-legend-swatch);
    border: 0;
    background-color: var(--dc-surface-hover);
  }
  .dc-chart-key-swatch:is([data-kind="warning"], [data-kind="danger"]) {
    width: var(--dc-chart-marker-width);
    height: var(--dc-chart-marker-height);
    border: 0;
    background-color: var(--dc-warning);
  }
  .dc-chart-key-swatch[data-kind="danger"] { background-color: var(--dc-destructive); }
  .dc-proportion {
    display: flex;
    gap: var(--dc-hairline);
    height: var(--dc-chart-bar-height);
    border-radius: var(--dc-chart-bar-radius);
    overflow: hidden;
    background-color: var(--dc-surface-input);
  }
  .dc-proportion-segment {
    min-width: var(--dc-hairline);
    background-color: var(--dc-chart-color);
  }
  /* The SMALL track — a budget or progress line inside a list row (the kit's `Meter size="sm"`),
     where the chart's bar would outweigh the row's own words. */
  .dc-proportion[data-size="sm"] {
    height: var(--dc-space-1);
  }
  .dc-metric {
    display: grid;
    padding: var(--dc-chart-metric-padding-y) var(--dc-chart-metric-padding-x);
    border-radius: var(--dc-chart-metric-radius);
    background-color: var(--dc-surface-raised);
  }
  .dc-metric-label {
    color: var(--dc-fg-secondary);
    font-size: var(--dc-chart-metric-label);
    line-height: var(--dc-chart-metric-label-leading);
  }
  .dc-metric-value {
    color: var(--dc-fg-strong);
    font-size: var(--dc-chart-metric-value);
    line-height: var(--dc-chart-metric-value-leading);
    font-weight: var(--dc-chart-metric-weight);
    font-variant-numeric: tabular-nums;
  }
  .dc-metric-detail {
    color: var(--dc-fg-muted);
    font-size: var(--dc-chart-metric-label);
    line-height: var(--dc-chart-metric-label-leading);
  }

  :is(.dc-button, .dc-icon-button, .dc-chip, .dc-field, .dc-segmented, .dc-segment, .dc-menu, .dc-menu-item,
    .dc-item, .dc-badge, .dc-avatar, .dc-panel, .dc-tooltip, .dc-divider, .dc-switch, .dc-slider, .dc-chart, .dc-metric)[hidden] {
    display: none;
  }
}




/* ════════════════════════════════════════════════════════════════════

 * LAYER 2 — Tailwind @theme (--dc-* under the Tailwind names; compile-time only)

 * ════════════════════════════════════════════════════════════════════ */

@theme inline {
  /* ── Typography: the families, and the type ramp as text-caption · small · body · title · heading · display ── */
  --font-sans: var(--dc-font-sans);
  --font-mono: var(--dc-font-mono);
  --text-caption: var(--dc-text-caption);
  --text-caption--line-height: var(--dc-text-caption-leading);
  --text-small: var(--dc-text-small);
  --text-small--line-height: var(--dc-text-small-leading);
  --text-body: var(--dc-text-body);
  --text-body--line-height: var(--dc-text-body-leading);
  --text-title: var(--dc-text-title);
  --text-title--line-height: var(--dc-text-title-leading);
  --text-heading: var(--dc-text-heading);
  --text-heading--line-height: var(--dc-text-heading-leading);
  --text-display: var(--dc-text-display);
  --text-display--line-height: var(--dc-text-display-leading);

  /* ── Radius: the product's scale UNDER Tailwind's own names — rounded-md is the product's md ── */
  --radius: 8px;
  --radius-xs: var(--dc-radius-xs);
  --radius-sm: var(--dc-radius-sm);
  --radius-md: var(--dc-radius-md);
  --radius-lg: var(--dc-radius-lg);
  --radius-xl: var(--dc-radius-xl);

  /* ── Control heights: h-control-md, size-control-sm, min-h-control-md ── */
  --spacing-control-xs: var(--dc-control-xs);
  --spacing-control-sm: var(--dc-control-sm);
  --spacing-control-md: var(--dc-control-md);
  --spacing-control-lg: var(--dc-control-lg);

  /* ── Elevation: shadow-raised (a control's face), shadow-overlay (popups, dialogs) ── */
  --shadow-raised: var(--dc-shadow);
  --shadow-overlay: var(--dc-shadow-lg);

  /* ── Motion: every transition-* utility runs on the tokens' duration and easing ── */
  --default-transition-duration: var(--dc-duration-base);
  --default-transition-timing-function: var(--dc-ease-standard);

  /* ── Colours: every --dc-* colour under its own name ── */
  --color-fg-strong: var(--dc-fg-strong);
  --color-fg: var(--dc-fg);
  --color-fg-secondary: var(--dc-fg-secondary);
  --color-fg-muted: var(--dc-fg-muted);
  --color-fg-faint: var(--dc-fg-faint);
  --color-fg-on-primary: var(--dc-fg-on-primary);
  --color-border: var(--dc-border);
  --color-border-subtle: var(--dc-border-subtle);
  --color-border-strong: var(--dc-border-strong);
  --color-canvas: var(--dc-canvas);
  --color-surface-raised: var(--dc-surface-raised);
  --color-surface-rail: var(--dc-surface-rail);
  --color-surface-overlay: var(--dc-surface-overlay);
  --color-surface-input: var(--dc-surface-input);
  --color-surface-code-inline: var(--dc-surface-code-inline);
  --color-surface-code-block: var(--dc-surface-code-block);
  --color-surface-control: var(--dc-surface-control);
  --color-surface-hover: var(--dc-surface-hover);
  --color-surface-pressed: var(--dc-surface-pressed);
  --color-destructive: var(--dc-destructive);
  --color-destructive-subtle: var(--dc-destructive-subtle);
  --color-destructive-border: var(--dc-destructive-border);
  --color-success: var(--dc-success);
  --color-success-subtle: var(--dc-success-subtle);
  --color-success-border: var(--dc-success-border);
  --color-warning: var(--dc-warning);
  --color-warning-subtle: var(--dc-warning-subtle);
  --color-warning-border: var(--dc-warning-border);
  --color-info: var(--dc-info);
  --color-info-subtle: var(--dc-info-subtle);
  --color-info-border: var(--dc-info-border);
  --color-identity-1: var(--dc-identity-1);
  --color-identity-2: var(--dc-identity-2);
  --color-identity-3: var(--dc-identity-3);
  --color-identity-4: var(--dc-identity-4);
  --color-identity-5: var(--dc-identity-5);
  --color-identity-6: var(--dc-identity-6);
  --color-chart-2: var(--dc-chart-2);
  --color-chart-3: var(--dc-chart-3);
  --color-chart-4: var(--dc-chart-4);
  --color-chart-5: var(--dc-chart-5);
  --color-chart-6: var(--dc-chart-6);
  --color-scrollbar-thumb: var(--dc-scrollbar-thumb);
  --color-scrollbar-thumb-hover: var(--dc-scrollbar-thumb-hover);
  --color-shade: var(--dc-shade);
  --color-accent: var(--dc-accent);
  --color-accent-subtle: var(--dc-accent-subtle);
  --color-accent-border: var(--dc-accent-border);
  --color-brand: var(--brand);

  /* ── shadcn slots — compatibility names, each a real colour ── */
  --color-background:             var(--dc-canvas);
  --color-foreground:             var(--dc-fg);
  --color-card:                   var(--dc-surface-raised);
  --color-card-foreground:        var(--dc-fg);
  --color-popover:                var(--dc-surface-overlay);
  --color-popover-foreground:     var(--dc-fg);
  --color-primary:                var(--dc-accent);
  --color-primary-foreground:     var(--dc-fg-on-primary);
  --color-secondary:              var(--dc-surface-control);
  --color-secondary-foreground:   var(--dc-fg);
  --color-muted:                  var(--dc-surface-input);
  --color-muted-foreground:       var(--dc-fg-muted);
  --color-accent-foreground:      var(--dc-fg-on-primary);
  --color-destructive-foreground: var(--dc-fg-on-primary);
  --color-input:                  var(--dc-border);
  --color-ring:                   var(--dc-accent);

  --color-sidebar:                transparent;
  --color-sidebar-foreground:     var(--dc-fg);
  --color-sidebar-primary:        var(--dc-accent);
  --color-sidebar-primary-foreground: var(--dc-fg-on-primary);
  --color-sidebar-accent:         var(--dc-surface-hover);
  --color-sidebar-accent-foreground: var(--dc-fg-strong);
  --color-sidebar-border:         var(--dc-border);
  --color-sidebar-ring:           var(--dc-accent);
}