/**
 * Do not edit directly
 * This file is autogenerated by The Design System Platforms Team using Style Dictionary.
 */

/**
 * Do not edit directly
 * This file is autogenerated by The Design System Platforms Team using Style Dictionary.
 */

:root {
  --ds-color-content-accent: rgb(166, 66, 0);
  --ds-color-content-brand: rgb(166, 66, 0);
  --ds-color-content-dark: rgb(20, 20, 20);
  --ds-color-content-default: rgb(20, 20, 20);
  --ds-color-content-informative: rgb(0, 105, 147);
  --ds-color-content-inverse: rgb(252, 252, 252);
  --ds-color-content-light: rgb(255, 255, 255);
  --ds-color-content-link-dark: rgb(20, 20, 20);
  --ds-color-content-link-default: rgb(20, 20, 20);
  --ds-color-content-link-emphasis: rgb(0, 90, 210);
  --ds-color-content-link-inverse: rgb(252, 252, 252);
  --ds-color-content-link-light: rgb(252, 252, 252);
  --ds-color-content-link-visited: rgb(134, 30, 227);
  --ds-color-content-link-visited-dark: rgb(82, 19, 142);
  --ds-color-content-link-visited-inverse: rgb(212, 174, 255);
  --ds-color-content-link-visited-light: rgb(212, 174, 255);
  --ds-color-content-muted: rgb(59, 61, 76);
  --ds-color-content-negative: rgb(189, 0, 0);
  --ds-color-content-non-essential: rgb(145, 146, 161);
  --ds-color-content-on-accent: rgb(62, 23, 0);
  --ds-color-content-on-brand: rgb(62, 23, 0);
  --ds-color-content-on-primary: rgb(252, 252, 252);
  --ds-color-content-positive: rgb(0, 113, 51);
  --ds-color-content-primary: rgb(0, 90, 210);
  --ds-color-content-subtle: rgb(113, 115, 132);
  --ds-color-content-warning: rgb(149, 80, 37);
  --ds-color-elevation-color-ambient: rgba(0, 0, 0, 0.1);
  --ds-color-elevation-color-key: rgba(0, 0, 0, 0.16);
  --ds-color-highlight-pink-default: rgb(215, 32, 84);
  --ds-color-highlight-pink-inverse: rgb(255, 229, 240);
  --ds-color-highlight-pink-muted: rgb(255, 140, 177);
  --ds-color-interactive-accent-enabled: rgb(255, 213, 2);
  --ds-color-interactive-accent-hovered: rgb(250, 196, 0);
  --ds-color-interactive-accent-pressed: rgb(239, 159, 0);
  --ds-color-interactive-accent-selected: rgb(245, 178, 0);
  --ds-color-interactive-accent-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-accent-subtle-hovered: rgb(255, 245, 173);
  --ds-color-interactive-accent-subtle-pressed: rgb(255, 230, 54);
  --ds-color-interactive-accent-subtle-selected: rgb(255, 239, 122);
  --ds-color-interactive-brand-enabled: rgb(255, 213, 2);
  --ds-color-interactive-brand-hovered: rgb(250, 196, 0);
  --ds-color-interactive-brand-pressed: rgb(239, 159, 0);
  --ds-color-interactive-brand-selected: rgb(245, 178, 0);
  --ds-color-interactive-brand-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-brand-subtle-hovered: rgb(255, 245, 173);
  --ds-color-interactive-brand-subtle-pressed: rgb(255, 230, 54);
  --ds-color-interactive-brand-subtle-selected: rgb(255, 239, 122);
  --ds-color-interactive-dark-enabled: rgba(0, 3, 24, 0.77);
  --ds-color-interactive-dark-hovered: rgba(0, 2, 21, 0.69);
  --ds-color-interactive-dark-pressed: rgba(0, 3, 23, 0.56);
  --ds-color-interactive-dark-selected: rgba(0, 3, 23, 0.56);
  --ds-color-interactive-dark-subtle-enabled: rgba(24, 25, 31, 0);
  --ds-color-interactive-dark-subtle-hovered: rgba(33, 38, 72, 0.06);
  --ds-color-interactive-dark-subtle-pressed: rgba(13, 20, 61, 0.11);
  --ds-color-interactive-dark-subtle-selected: rgba(13, 20, 61, 0.11);
  --ds-color-interactive-inverse-enabled: rgba(255, 255, 255, 0.85);
  --ds-color-interactive-inverse-hovered: rgba(255, 255, 255, 0.9);
  --ds-color-interactive-inverse-pressed: rgba(255, 255, 255, 0.94);
  --ds-color-interactive-inverse-selected: rgba(255, 255, 255, 0.93);
  --ds-color-interactive-inverse-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-inverse-subtle-hovered: rgba(255, 255, 255, 0.17);
  --ds-color-interactive-inverse-subtle-pressed: rgba(255, 255, 255, 0.34);
  --ds-color-interactive-inverse-subtle-selected: rgba(255, 255, 255, 0.26);
  --ds-color-interactive-light-enabled: rgba(255, 255, 255, 0.93);
  --ds-color-interactive-light-hovered: rgba(255, 255, 255, 0.9);
  --ds-color-interactive-light-pressed: rgba(255, 255, 255, 0.8);
  --ds-color-interactive-light-selected: rgba(255, 255, 255, 0.85);
  --ds-color-interactive-light-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-light-subtle-hovered: rgba(255, 255, 255, 0.17);
  --ds-color-interactive-light-subtle-pressed: rgba(255, 255, 255, 0.34);
  --ds-color-interactive-light-subtle-selected: rgba(255, 255, 255, 0.26);
  --ds-color-interactive-negative-enabled: rgb(221, 0, 0);
  --ds-color-interactive-negative-hovered: rgb(189, 0, 0);
  --ds-color-interactive-negative-pressed: rgb(117, 0, 2);
  --ds-color-interactive-negative-selected: rgb(155, 0, 0);
  --ds-color-interactive-negative-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-negative-subtle-hovered: rgb(253, 241, 242);
  --ds-color-interactive-negative-subtle-pressed: rgb(251, 222, 223);
  --ds-color-interactive-negative-subtle-selected: rgb(252, 232, 233);
  --ds-color-interactive-neutral-enabled: rgba(0, 8, 54, 0.08);
  --ds-color-interactive-neutral-hovered: rgba(13, 20, 61, 0.11);
  --ds-color-interactive-neutral-pressed: rgba(4, 9, 43, 0.21);
  --ds-color-interactive-neutral-selected: rgba(9, 14, 47, 0.16);
  --ds-color-interactive-neutral-selected-strong: rgba(0, 4, 28, 0.62);
  --ds-color-interactive-neutral-subtle-enabled: rgba(24, 25, 31, 0);
  --ds-color-interactive-neutral-subtle-hovered: rgba(33, 38, 72, 0.06);
  --ds-color-interactive-neutral-subtle-pressed: rgba(13, 20, 61, 0.11);
  --ds-color-interactive-neutral-subtle-selected: rgba(0, 8, 54, 0.08);
  --ds-color-interactive-positive-enabled: rgb(0, 132, 57);
  --ds-color-interactive-positive-hovered: rgb(0, 113, 51);
  --ds-color-interactive-positive-pressed: rgb(3, 70, 34);
  --ds-color-interactive-positive-selected: rgb(0, 93, 43);
  --ds-color-interactive-positive-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-positive-subtle-hovered: rgb(230, 245, 229);
  --ds-color-interactive-positive-subtle-pressed: rgb(208, 237, 207);
  --ds-color-interactive-positive-subtle-selected: rgb(219, 241, 218);
  --ds-color-interactive-primary-enabled: rgb(0, 90, 210);
  --ds-color-interactive-primary-hovered: rgb(0, 69, 183);
  --ds-color-interactive-primary-pressed: rgb(1, 28, 88);
  --ds-color-interactive-primary-selected: rgb(0, 50, 144);
  --ds-color-interactive-primary-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-primary-subtle-hovered: rgb(219, 237, 255);
  --ds-color-interactive-primary-subtle-pressed: rgb(189, 220, 253);
  --ds-color-interactive-primary-subtle-selected: rgb(229, 242, 255);
  --ds-color-stroke-dark: rgb(20, 20, 20);
  --ds-color-stroke-default: rgba(0, 4, 28, 0.43);
  --ds-color-stroke-disabled: rgba(0, 8, 54, 0.08);
  --ds-color-stroke-inverse: rgba(255, 255, 255, 0.9);
  --ds-color-stroke-light: rgb(252, 252, 252);
  --ds-color-stroke-muted: rgba(0, 6, 41, 0.26);
  --ds-color-stroke-strong: rgba(0, 3, 24, 0.77);
  --ds-color-stroke-subtle: rgba(13, 20, 61, 0.11);
  --ds-color-support-accent-default: rgb(255, 213, 2);
  --ds-color-support-accent-inverse: rgb(255, 245, 173);
  --ds-color-support-accent-muted: rgb(255, 213, 2);
  --ds-color-support-accent-strong: rgb(166, 66, 0);
  --ds-color-support-brand-default: rgb(255, 213, 2);
  --ds-color-support-brand-inverse: rgb(255, 245, 173);
  --ds-color-support-brand-muted: rgb(255, 230, 54);
  --ds-color-support-focused-default: rgb(70, 149, 240);
  --ds-color-support-focused-inner: rgb(255, 255, 255);
  --ds-color-support-focused-inverse: rgb(229, 242, 255);
  --ds-color-support-focused-muted: rgb(144, 194, 249);
  --ds-color-support-informative-default: rgb(0, 123, 170);
  --ds-color-support-informative-inverse: rgb(206, 241, 253);
  --ds-color-support-informative-muted: rgb(43, 189, 239);
  --ds-color-support-negative-default: rgb(221, 0, 0);
  --ds-color-support-negative-inverse: rgb(252, 232, 233);
  --ds-color-support-negative-muted: rgb(255, 85, 79);
  --ds-color-support-neutral-default: rgb(113, 115, 132);
  --ds-color-support-neutral-inverse: rgb(234, 235, 240);
  --ds-color-support-neutral-muted: rgb(145, 146, 161);
  --ds-color-support-neutral-strong: rgb(34, 36, 45);
  --ds-color-support-positive-default: rgb(0, 132, 57);
  --ds-color-support-positive-inverse: rgb(219, 241, 218);
  --ds-color-support-positive-muted: rgb(95, 196, 115);
  --ds-color-support-primary-default: rgb(0, 90, 210);
  --ds-color-support-primary-inverse: rgb(219, 237, 255);
  --ds-color-support-primary-muted: rgb(70, 149, 240);
  --ds-color-support-skeleton-base: rgb(234, 235, 240);
  --ds-color-support-skeleton-shimmer: rgb(215, 216, 225);
  --ds-color-support-warning-default: rgb(246, 130, 38);
  --ds-color-support-warning-inverse: rgb(254, 235, 220);
  --ds-color-support-warning-muted: rgb(252, 172, 109);
  --ds-color-surface-background-base-default: rgb(255, 255, 255);
  --ds-color-surface-background-base-layer-1: rgb(255, 255, 255);
  --ds-color-surface-background-base-layer-2: rgb(255, 255, 255);
  --ds-color-surface-background-base-muted: rgb(249, 249, 251);
  --ds-color-surface-background-dark: rgb(20, 20, 20);
  --ds-color-surface-background-inverse: rgb(20, 20, 20);
  --ds-color-surface-background-level-1-default: rgb(255, 255, 255);
  --ds-color-surface-background-level-1-layer-1: rgb(255, 255, 255);
  --ds-color-surface-background-level-1-layer-2: rgb(255, 255, 255);
  --ds-color-surface-background-level-1-muted: rgb(249, 249, 251);
  --ds-color-surface-background-light: rgb(255, 255, 255);
  --ds-color-surface-overlay-dark: rgba(0, 4, 28, 0.43);
  --ds-color-surface-overlay-dark-strong: rgba(0, 3, 23, 0.56);
  --ds-color-surface-overlay-light: rgba(255, 255, 255, 0.69);
  --ds-color-surface-overlay-light-strong: rgba(255, 255, 255, 0.8);
}

@media (prefers-color-scheme: light) {
  :root {
    --ds-color-content-accent: rgb(166, 66, 0);
    --ds-color-content-brand: rgb(166, 66, 0);
    --ds-color-content-dark: rgb(20, 20, 20);
    --ds-color-content-default: rgb(20, 20, 20);
    --ds-color-content-informative: rgb(0, 105, 147);
    --ds-color-content-inverse: rgb(252, 252, 252);
    --ds-color-content-light: rgb(255, 255, 255);
    --ds-color-content-link-dark: rgb(20, 20, 20);
    --ds-color-content-link-default: rgb(20, 20, 20);
    --ds-color-content-link-emphasis: rgb(0, 90, 210);
    --ds-color-content-link-inverse: rgb(252, 252, 252);
    --ds-color-content-link-light: rgb(252, 252, 252);
    --ds-color-content-link-visited: rgb(134, 30, 227);
    --ds-color-content-link-visited-dark: rgb(82, 19, 142);
    --ds-color-content-link-visited-inverse: rgb(212, 174, 255);
    --ds-color-content-link-visited-light: rgb(212, 174, 255);
    --ds-color-content-muted: rgb(59, 61, 76);
    --ds-color-content-negative: rgb(189, 0, 0);
    --ds-color-content-non-essential: rgb(145, 146, 161);
    --ds-color-content-on-accent: rgb(62, 23, 0);
    --ds-color-content-on-brand: rgb(62, 23, 0);
    --ds-color-content-on-primary: rgb(252, 252, 252);
    --ds-color-content-positive: rgb(0, 113, 51);
    --ds-color-content-primary: rgb(0, 90, 210);
    --ds-color-content-subtle: rgb(113, 115, 132);
    --ds-color-content-warning: rgb(149, 80, 37);
    --ds-color-elevation-color-ambient: rgba(0, 0, 0, 0.1);
    --ds-color-elevation-color-key: rgba(0, 0, 0, 0.16);
    --ds-color-highlight-pink-default: rgb(215, 32, 84);
    --ds-color-highlight-pink-inverse: rgb(255, 229, 240);
    --ds-color-highlight-pink-muted: rgb(255, 140, 177);
    --ds-color-interactive-accent-enabled: rgb(255, 213, 2);
    --ds-color-interactive-accent-hovered: rgb(250, 196, 0);
    --ds-color-interactive-accent-pressed: rgb(239, 159, 0);
    --ds-color-interactive-accent-selected: rgb(245, 178, 0);
    --ds-color-interactive-accent-subtle-enabled: rgba(255, 255, 255, 0);
    --ds-color-interactive-accent-subtle-hovered: rgb(255, 245, 173);
    --ds-color-interactive-accent-subtle-pressed: rgb(255, 230, 54);
    --ds-color-interactive-accent-subtle-selected: rgb(255, 239, 122);
    --ds-color-interactive-brand-enabled: rgb(255, 213, 2);
    --ds-color-interactive-brand-hovered: rgb(250, 196, 0);
    --ds-color-interactive-brand-pressed: rgb(239, 159, 0);
    --ds-color-interactive-brand-selected: rgb(245, 178, 0);
    --ds-color-interactive-brand-subtle-enabled: rgba(255, 255, 255, 0);
    --ds-color-interactive-brand-subtle-hovered: rgb(255, 245, 173);
    --ds-color-interactive-brand-subtle-pressed: rgb(255, 230, 54);
    --ds-color-interactive-brand-subtle-selected: rgb(255, 239, 122);
    --ds-color-interactive-dark-enabled: rgba(0, 3, 24, 0.77);
    --ds-color-interactive-dark-hovered: rgba(0, 2, 21, 0.69);
    --ds-color-interactive-dark-pressed: rgba(0, 3, 23, 0.56);
    --ds-color-interactive-dark-selected: rgba(0, 3, 23, 0.56);
    --ds-color-interactive-dark-subtle-enabled: rgba(24, 25, 31, 0);
    --ds-color-interactive-dark-subtle-hovered: rgba(33, 38, 72, 0.06);
    --ds-color-interactive-dark-subtle-pressed: rgba(13, 20, 61, 0.11);
    --ds-color-interactive-dark-subtle-selected: rgba(13, 20, 61, 0.11);
    --ds-color-interactive-inverse-enabled: rgba(255, 255, 255, 0.85);
    --ds-color-interactive-inverse-hovered: rgba(255, 255, 255, 0.9);
    --ds-color-interactive-inverse-pressed: rgba(255, 255, 255, 0.94);
    --ds-color-interactive-inverse-selected: rgba(255, 255, 255, 0.93);
    --ds-color-interactive-inverse-subtle-enabled: rgba(255, 255, 255, 0);
    --ds-color-interactive-inverse-subtle-hovered: rgba(255, 255, 255, 0.17);
    --ds-color-interactive-inverse-subtle-pressed: rgba(255, 255, 255, 0.34);
    --ds-color-interactive-inverse-subtle-selected: rgba(255, 255, 255, 0.26);
    --ds-color-interactive-light-enabled: rgba(255, 255, 255, 0.93);
    --ds-color-interactive-light-hovered: rgba(255, 255, 255, 0.9);
    --ds-color-interactive-light-pressed: rgba(255, 255, 255, 0.8);
    --ds-color-interactive-light-selected: rgba(255, 255, 255, 0.85);
    --ds-color-interactive-light-subtle-enabled: rgba(255, 255, 255, 0);
    --ds-color-interactive-light-subtle-hovered: rgba(255, 255, 255, 0.17);
    --ds-color-interactive-light-subtle-pressed: rgba(255, 255, 255, 0.34);
    --ds-color-interactive-light-subtle-selected: rgba(255, 255, 255, 0.26);
    --ds-color-interactive-negative-enabled: rgb(221, 0, 0);
    --ds-color-interactive-negative-hovered: rgb(189, 0, 0);
    --ds-color-interactive-negative-pressed: rgb(117, 0, 2);
    --ds-color-interactive-negative-selected: rgb(155, 0, 0);
    --ds-color-interactive-negative-subtle-enabled: rgba(255, 255, 255, 0);
    --ds-color-interactive-negative-subtle-hovered: rgb(253, 241, 242);
    --ds-color-interactive-negative-subtle-pressed: rgb(251, 222, 223);
    --ds-color-interactive-negative-subtle-selected: rgb(252, 232, 233);
    --ds-color-interactive-neutral-enabled: rgba(0, 8, 54, 0.08);
    --ds-color-interactive-neutral-hovered: rgba(13, 20, 61, 0.11);
    --ds-color-interactive-neutral-pressed: rgba(4, 9, 43, 0.21);
    --ds-color-interactive-neutral-selected: rgba(9, 14, 47, 0.16);
    --ds-color-interactive-neutral-selected-strong: rgba(0, 4, 28, 0.62);
    --ds-color-interactive-neutral-subtle-enabled: rgba(24, 25, 31, 0);
    --ds-color-interactive-neutral-subtle-hovered: rgba(33, 38, 72, 0.06);
    --ds-color-interactive-neutral-subtle-pressed: rgba(13, 20, 61, 0.11);
    --ds-color-interactive-neutral-subtle-selected: rgba(0, 8, 54, 0.08);
    --ds-color-interactive-positive-enabled: rgb(0, 132, 57);
    --ds-color-interactive-positive-hovered: rgb(0, 113, 51);
    --ds-color-interactive-positive-pressed: rgb(3, 70, 34);
    --ds-color-interactive-positive-selected: rgb(0, 93, 43);
    --ds-color-interactive-positive-subtle-enabled: rgba(255, 255, 255, 0);
    --ds-color-interactive-positive-subtle-hovered: rgb(230, 245, 229);
    --ds-color-interactive-positive-subtle-pressed: rgb(208, 237, 207);
    --ds-color-interactive-positive-subtle-selected: rgb(219, 241, 218);
    --ds-color-interactive-primary-enabled: rgb(0, 90, 210);
    --ds-color-interactive-primary-hovered: rgb(0, 69, 183);
    --ds-color-interactive-primary-pressed: rgb(1, 28, 88);
    --ds-color-interactive-primary-selected: rgb(0, 50, 144);
    --ds-color-interactive-primary-subtle-enabled: rgba(255, 255, 255, 0);
    --ds-color-interactive-primary-subtle-hovered: rgb(219, 237, 255);
    --ds-color-interactive-primary-subtle-pressed: rgb(189, 220, 253);
    --ds-color-interactive-primary-subtle-selected: rgb(229, 242, 255);
    --ds-color-stroke-dark: rgb(20, 20, 20);
    --ds-color-stroke-default: rgba(0, 4, 28, 0.43);
    --ds-color-stroke-disabled: rgba(0, 8, 54, 0.08);
    --ds-color-stroke-inverse: rgba(255, 255, 255, 0.9);
    --ds-color-stroke-light: rgb(252, 252, 252);
    --ds-color-stroke-muted: rgba(0, 6, 41, 0.26);
    --ds-color-stroke-strong: rgba(0, 3, 24, 0.77);
    --ds-color-stroke-subtle: rgba(13, 20, 61, 0.11);
    --ds-color-support-accent-default: rgb(255, 213, 2);
    --ds-color-support-accent-inverse: rgb(255, 245, 173);
    --ds-color-support-accent-muted: rgb(255, 213, 2);
    --ds-color-support-accent-strong: rgb(166, 66, 0);
    --ds-color-support-brand-default: rgb(255, 213, 2);
    --ds-color-support-brand-inverse: rgb(255, 245, 173);
    --ds-color-support-brand-muted: rgb(255, 230, 54);
    --ds-color-support-focused-default: rgb(70, 149, 240);
    --ds-color-support-focused-inner: rgb(255, 255, 255);
    --ds-color-support-focused-inverse: rgb(229, 242, 255);
    --ds-color-support-focused-muted: rgb(144, 194, 249);
    --ds-color-support-informative-default: rgb(0, 123, 170);
    --ds-color-support-informative-inverse: rgb(206, 241, 253);
    --ds-color-support-informative-muted: rgb(43, 189, 239);
    --ds-color-support-negative-default: rgb(221, 0, 0);
    --ds-color-support-negative-inverse: rgb(252, 232, 233);
    --ds-color-support-negative-muted: rgb(255, 85, 79);
    --ds-color-support-neutral-default: rgb(113, 115, 132);
    --ds-color-support-neutral-inverse: rgb(234, 235, 240);
    --ds-color-support-neutral-muted: rgb(145, 146, 161);
    --ds-color-support-neutral-strong: rgb(34, 36, 45);
    --ds-color-support-positive-default: rgb(0, 132, 57);
    --ds-color-support-positive-inverse: rgb(219, 241, 218);
    --ds-color-support-positive-muted: rgb(95, 196, 115);
    --ds-color-support-primary-default: rgb(0, 90, 210);
    --ds-color-support-primary-inverse: rgb(219, 237, 255);
    --ds-color-support-primary-muted: rgb(70, 149, 240);
    --ds-color-support-skeleton-base: rgb(234, 235, 240);
    --ds-color-support-skeleton-shimmer: rgb(215, 216, 225);
    --ds-color-support-warning-default: rgb(246, 130, 38);
    --ds-color-support-warning-inverse: rgb(254, 235, 220);
    --ds-color-support-warning-muted: rgb(252, 172, 109);
    --ds-color-surface-background-base-default: rgb(255, 255, 255);
    --ds-color-surface-background-base-layer-1: rgb(255, 255, 255);
    --ds-color-surface-background-base-layer-2: rgb(255, 255, 255);
    --ds-color-surface-background-base-muted: rgb(249, 249, 251);
    --ds-color-surface-background-dark: rgb(20, 20, 20);
    --ds-color-surface-background-inverse: rgb(20, 20, 20);
    --ds-color-surface-background-level-1-default: rgb(255, 255, 255);
    --ds-color-surface-background-level-1-layer-1: rgb(255, 255, 255);
    --ds-color-surface-background-level-1-layer-2: rgb(255, 255, 255);
    --ds-color-surface-background-level-1-muted: rgb(249, 249, 251);
    --ds-color-surface-background-light: rgb(255, 255, 255);
    --ds-color-surface-overlay-dark: rgba(0, 4, 28, 0.43);
    --ds-color-surface-overlay-dark-strong: rgba(0, 3, 23, 0.56);
    --ds-color-surface-overlay-light: rgba(255, 255, 255, 0.69);
    --ds-color-surface-overlay-light-strong: rgba(255, 255, 255, 0.8);
  }
}

[data-mode='light'],
[data-mode='light']:root {
  --ds-color-content-accent: rgb(166, 66, 0);
  --ds-color-content-brand: rgb(166, 66, 0);
  --ds-color-content-dark: rgb(20, 20, 20);
  --ds-color-content-default: rgb(20, 20, 20);
  --ds-color-content-informative: rgb(0, 105, 147);
  --ds-color-content-inverse: rgb(252, 252, 252);
  --ds-color-content-light: rgb(255, 255, 255);
  --ds-color-content-link-dark: rgb(20, 20, 20);
  --ds-color-content-link-default: rgb(20, 20, 20);
  --ds-color-content-link-emphasis: rgb(0, 90, 210);
  --ds-color-content-link-inverse: rgb(252, 252, 252);
  --ds-color-content-link-light: rgb(252, 252, 252);
  --ds-color-content-link-visited: rgb(134, 30, 227);
  --ds-color-content-link-visited-dark: rgb(82, 19, 142);
  --ds-color-content-link-visited-inverse: rgb(212, 174, 255);
  --ds-color-content-link-visited-light: rgb(212, 174, 255);
  --ds-color-content-muted: rgb(59, 61, 76);
  --ds-color-content-negative: rgb(189, 0, 0);
  --ds-color-content-non-essential: rgb(145, 146, 161);
  --ds-color-content-on-accent: rgb(62, 23, 0);
  --ds-color-content-on-brand: rgb(62, 23, 0);
  --ds-color-content-on-primary: rgb(252, 252, 252);
  --ds-color-content-positive: rgb(0, 113, 51);
  --ds-color-content-primary: rgb(0, 90, 210);
  --ds-color-content-subtle: rgb(113, 115, 132);
  --ds-color-content-warning: rgb(149, 80, 37);
  --ds-color-elevation-color-ambient: rgba(0, 0, 0, 0.1);
  --ds-color-elevation-color-key: rgba(0, 0, 0, 0.16);
  --ds-color-highlight-pink-default: rgb(215, 32, 84);
  --ds-color-highlight-pink-inverse: rgb(255, 229, 240);
  --ds-color-highlight-pink-muted: rgb(255, 140, 177);
  --ds-color-interactive-accent-enabled: rgb(255, 213, 2);
  --ds-color-interactive-accent-hovered: rgb(250, 196, 0);
  --ds-color-interactive-accent-pressed: rgb(239, 159, 0);
  --ds-color-interactive-accent-selected: rgb(245, 178, 0);
  --ds-color-interactive-accent-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-accent-subtle-hovered: rgb(255, 245, 173);
  --ds-color-interactive-accent-subtle-pressed: rgb(255, 230, 54);
  --ds-color-interactive-accent-subtle-selected: rgb(255, 239, 122);
  --ds-color-interactive-brand-enabled: rgb(255, 213, 2);
  --ds-color-interactive-brand-hovered: rgb(250, 196, 0);
  --ds-color-interactive-brand-pressed: rgb(239, 159, 0);
  --ds-color-interactive-brand-selected: rgb(245, 178, 0);
  --ds-color-interactive-brand-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-brand-subtle-hovered: rgb(255, 245, 173);
  --ds-color-interactive-brand-subtle-pressed: rgb(255, 230, 54);
  --ds-color-interactive-brand-subtle-selected: rgb(255, 239, 122);
  --ds-color-interactive-dark-enabled: rgba(0, 3, 24, 0.77);
  --ds-color-interactive-dark-hovered: rgba(0, 2, 21, 0.69);
  --ds-color-interactive-dark-pressed: rgba(0, 3, 23, 0.56);
  --ds-color-interactive-dark-selected: rgba(0, 3, 23, 0.56);
  --ds-color-interactive-dark-subtle-enabled: rgba(24, 25, 31, 0);
  --ds-color-interactive-dark-subtle-hovered: rgba(33, 38, 72, 0.06);
  --ds-color-interactive-dark-subtle-pressed: rgba(13, 20, 61, 0.11);
  --ds-color-interactive-dark-subtle-selected: rgba(13, 20, 61, 0.11);
  --ds-color-interactive-inverse-enabled: rgba(255, 255, 255, 0.85);
  --ds-color-interactive-inverse-hovered: rgba(255, 255, 255, 0.9);
  --ds-color-interactive-inverse-pressed: rgba(255, 255, 255, 0.94);
  --ds-color-interactive-inverse-selected: rgba(255, 255, 255, 0.93);
  --ds-color-interactive-inverse-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-inverse-subtle-hovered: rgba(255, 255, 255, 0.17);
  --ds-color-interactive-inverse-subtle-pressed: rgba(255, 255, 255, 0.34);
  --ds-color-interactive-inverse-subtle-selected: rgba(255, 255, 255, 0.26);
  --ds-color-interactive-light-enabled: rgba(255, 255, 255, 0.93);
  --ds-color-interactive-light-hovered: rgba(255, 255, 255, 0.9);
  --ds-color-interactive-light-pressed: rgba(255, 255, 255, 0.8);
  --ds-color-interactive-light-selected: rgba(255, 255, 255, 0.85);
  --ds-color-interactive-light-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-light-subtle-hovered: rgba(255, 255, 255, 0.17);
  --ds-color-interactive-light-subtle-pressed: rgba(255, 255, 255, 0.34);
  --ds-color-interactive-light-subtle-selected: rgba(255, 255, 255, 0.26);
  --ds-color-interactive-negative-enabled: rgb(221, 0, 0);
  --ds-color-interactive-negative-hovered: rgb(189, 0, 0);
  --ds-color-interactive-negative-pressed: rgb(117, 0, 2);
  --ds-color-interactive-negative-selected: rgb(155, 0, 0);
  --ds-color-interactive-negative-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-negative-subtle-hovered: rgb(253, 241, 242);
  --ds-color-interactive-negative-subtle-pressed: rgb(251, 222, 223);
  --ds-color-interactive-negative-subtle-selected: rgb(252, 232, 233);
  --ds-color-interactive-neutral-enabled: rgba(0, 8, 54, 0.08);
  --ds-color-interactive-neutral-hovered: rgba(13, 20, 61, 0.11);
  --ds-color-interactive-neutral-pressed: rgba(4, 9, 43, 0.21);
  --ds-color-interactive-neutral-selected: rgba(9, 14, 47, 0.16);
  --ds-color-interactive-neutral-selected-strong: rgba(0, 4, 28, 0.62);
  --ds-color-interactive-neutral-subtle-enabled: rgba(24, 25, 31, 0);
  --ds-color-interactive-neutral-subtle-hovered: rgba(33, 38, 72, 0.06);
  --ds-color-interactive-neutral-subtle-pressed: rgba(13, 20, 61, 0.11);
  --ds-color-interactive-neutral-subtle-selected: rgba(0, 8, 54, 0.08);
  --ds-color-interactive-positive-enabled: rgb(0, 132, 57);
  --ds-color-interactive-positive-hovered: rgb(0, 113, 51);
  --ds-color-interactive-positive-pressed: rgb(3, 70, 34);
  --ds-color-interactive-positive-selected: rgb(0, 93, 43);
  --ds-color-interactive-positive-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-positive-subtle-hovered: rgb(230, 245, 229);
  --ds-color-interactive-positive-subtle-pressed: rgb(208, 237, 207);
  --ds-color-interactive-positive-subtle-selected: rgb(219, 241, 218);
  --ds-color-interactive-primary-enabled: rgb(0, 90, 210);
  --ds-color-interactive-primary-hovered: rgb(0, 69, 183);
  --ds-color-interactive-primary-pressed: rgb(1, 28, 88);
  --ds-color-interactive-primary-selected: rgb(0, 50, 144);
  --ds-color-interactive-primary-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-primary-subtle-hovered: rgb(219, 237, 255);
  --ds-color-interactive-primary-subtle-pressed: rgb(189, 220, 253);
  --ds-color-interactive-primary-subtle-selected: rgb(229, 242, 255);
  --ds-color-stroke-dark: rgb(20, 20, 20);
  --ds-color-stroke-default: rgba(0, 4, 28, 0.43);
  --ds-color-stroke-disabled: rgba(0, 8, 54, 0.08);
  --ds-color-stroke-inverse: rgba(255, 255, 255, 0.9);
  --ds-color-stroke-light: rgb(252, 252, 252);
  --ds-color-stroke-muted: rgba(0, 6, 41, 0.26);
  --ds-color-stroke-strong: rgba(0, 3, 24, 0.77);
  --ds-color-stroke-subtle: rgba(13, 20, 61, 0.11);
  --ds-color-support-accent-default: rgb(255, 213, 2);
  --ds-color-support-accent-inverse: rgb(255, 245, 173);
  --ds-color-support-accent-muted: rgb(255, 213, 2);
  --ds-color-support-accent-strong: rgb(166, 66, 0);
  --ds-color-support-brand-default: rgb(255, 213, 2);
  --ds-color-support-brand-inverse: rgb(255, 245, 173);
  --ds-color-support-brand-muted: rgb(255, 230, 54);
  --ds-color-support-focused-default: rgb(70, 149, 240);
  --ds-color-support-focused-inner: rgb(255, 255, 255);
  --ds-color-support-focused-inverse: rgb(229, 242, 255);
  --ds-color-support-focused-muted: rgb(144, 194, 249);
  --ds-color-support-informative-default: rgb(0, 123, 170);
  --ds-color-support-informative-inverse: rgb(206, 241, 253);
  --ds-color-support-informative-muted: rgb(43, 189, 239);
  --ds-color-support-negative-default: rgb(221, 0, 0);
  --ds-color-support-negative-inverse: rgb(252, 232, 233);
  --ds-color-support-negative-muted: rgb(255, 85, 79);
  --ds-color-support-neutral-default: rgb(113, 115, 132);
  --ds-color-support-neutral-inverse: rgb(234, 235, 240);
  --ds-color-support-neutral-muted: rgb(145, 146, 161);
  --ds-color-support-neutral-strong: rgb(34, 36, 45);
  --ds-color-support-positive-default: rgb(0, 132, 57);
  --ds-color-support-positive-inverse: rgb(219, 241, 218);
  --ds-color-support-positive-muted: rgb(95, 196, 115);
  --ds-color-support-primary-default: rgb(0, 90, 210);
  --ds-color-support-primary-inverse: rgb(219, 237, 255);
  --ds-color-support-primary-muted: rgb(70, 149, 240);
  --ds-color-support-skeleton-base: rgb(234, 235, 240);
  --ds-color-support-skeleton-shimmer: rgb(215, 216, 225);
  --ds-color-support-warning-default: rgb(246, 130, 38);
  --ds-color-support-warning-inverse: rgb(254, 235, 220);
  --ds-color-support-warning-muted: rgb(252, 172, 109);
  --ds-color-surface-background-base-default: rgb(255, 255, 255);
  --ds-color-surface-background-base-layer-1: rgb(255, 255, 255);
  --ds-color-surface-background-base-layer-2: rgb(255, 255, 255);
  --ds-color-surface-background-base-muted: rgb(249, 249, 251);
  --ds-color-surface-background-dark: rgb(20, 20, 20);
  --ds-color-surface-background-inverse: rgb(20, 20, 20);
  --ds-color-surface-background-level-1-default: rgb(255, 255, 255);
  --ds-color-surface-background-level-1-layer-1: rgb(255, 255, 255);
  --ds-color-surface-background-level-1-layer-2: rgb(255, 255, 255);
  --ds-color-surface-background-level-1-muted: rgb(249, 249, 251);
  --ds-color-surface-background-light: rgb(255, 255, 255);
  --ds-color-surface-overlay-dark: rgba(0, 4, 28, 0.43);
  --ds-color-surface-overlay-dark-strong: rgba(0, 3, 23, 0.56);
  --ds-color-surface-overlay-light: rgba(255, 255, 255, 0.69);
  --ds-color-surface-overlay-light-strong: rgba(255, 255, 255, 0.8);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ds-color-content-accent: rgb(255, 213, 2);
    --ds-color-content-brand: rgb(255, 213, 2);
    --ds-color-content-dark: rgb(20, 20, 20);
    --ds-color-content-default: rgb(252, 252, 252);
    --ds-color-content-informative: rgb(79, 203, 246);
    --ds-color-content-inverse: rgb(20, 20, 20);
    --ds-color-content-light: rgb(252, 252, 252);
    --ds-color-content-link-dark: rgb(20, 20, 20);
    --ds-color-content-link-default: rgb(252, 252, 252);
    --ds-color-content-link-emphasis: rgb(144, 194, 249);
    --ds-color-content-link-inverse: rgb(20, 20, 20);
    --ds-color-content-link-light: rgb(252, 252, 252);
    --ds-color-content-link-visited: rgb(212, 174, 255);
    --ds-color-content-link-visited-dark: rgb(82, 19, 142);
    --ds-color-content-link-visited-inverse: rgb(134, 30, 227);
    --ds-color-content-link-visited-light: rgb(212, 174, 255);
    --ds-color-content-muted: rgb(228, 229, 236);
    --ds-color-content-negative: rgb(255, 144, 144);
    --ds-color-content-non-essential: rgb(160, 161, 175);
    --ds-color-content-on-accent: rgb(62, 23, 0);
    --ds-color-content-on-brand: rgb(62, 23, 0);
    --ds-color-content-on-primary: rgb(252, 252, 252);
    --ds-color-content-positive: rgb(155, 218, 161);
    --ds-color-content-primary: rgb(167, 207, 251);
    --ds-color-content-subtle: rgb(188, 190, 200);
    --ds-color-content-warning: rgb(253, 191, 142);
    --ds-color-elevation-color-ambient: rgba(0, 0, 0, 0.2);
    --ds-color-elevation-color-key: rgba(0, 0, 0, 0.32);
    --ds-color-highlight-pink-default: rgb(253, 80, 130);
    --ds-color-highlight-pink-inverse: rgb(115, 15, 45);
    --ds-color-highlight-pink-muted: rgb(185, 24, 70);
    --ds-color-interactive-accent-enabled: rgb(255, 213, 2);
    --ds-color-interactive-accent-hovered: rgb(255, 230, 54);
    --ds-color-interactive-accent-pressed: rgb(255, 245, 173);
    --ds-color-interactive-accent-selected: rgb(255, 239, 122);
    --ds-color-interactive-accent-subtle-enabled: rgba(24, 25, 31, 0);
    --ds-color-interactive-accent-subtle-hovered: rgb(62, 23, 0);
    --ds-color-interactive-accent-subtle-pressed: rgb(138, 52, 0);
    --ds-color-interactive-accent-subtle-selected: rgb(105, 39, 0);
    --ds-color-interactive-brand-enabled: rgb(255, 213, 2);
    --ds-color-interactive-brand-hovered: rgb(255, 230, 54);
    --ds-color-interactive-brand-pressed: rgb(255, 245, 173);
    --ds-color-interactive-brand-selected: rgb(255, 239, 122);
    --ds-color-interactive-brand-subtle-enabled: rgba(24, 25, 31, 0);
    --ds-color-interactive-brand-subtle-hovered: rgb(62, 23, 0);
    --ds-color-interactive-brand-subtle-pressed: rgb(138, 52, 0);
    --ds-color-interactive-brand-subtle-selected: rgb(105, 39, 0);
    --ds-color-interactive-dark-enabled: rgba(0, 3, 24, 0.77);
    --ds-color-interactive-dark-hovered: rgba(0, 2, 21, 0.69);
    --ds-color-interactive-dark-pressed: rgba(0, 3, 23, 0.56);
    --ds-color-interactive-dark-selected: rgba(0, 3, 23, 0.56);
    --ds-color-interactive-dark-subtle-enabled: rgba(24, 25, 31, 0);
    --ds-color-interactive-dark-subtle-hovered: rgba(33, 38, 72, 0.06);
    --ds-color-interactive-dark-subtle-pressed: rgba(13, 20, 61, 0.11);
    --ds-color-interactive-dark-subtle-selected: rgba(13, 20, 61, 0.11);
    --ds-color-interactive-inverse-enabled: rgba(0, 4, 28, 0.62);
    --ds-color-interactive-inverse-hovered: rgba(0, 2, 21, 0.69);
    --ds-color-interactive-inverse-pressed: rgba(1, 3, 11, 0.87);
    --ds-color-interactive-inverse-selected: rgba(0, 3, 24, 0.77);
    --ds-color-interactive-inverse-subtle-enabled: rgba(24, 25, 31, 0);
    --ds-color-interactive-inverse-subtle-hovered: rgba(33, 38, 72, 0.06);
    --ds-color-interactive-inverse-subtle-pressed: rgba(13, 20, 61, 0.11);
    --ds-color-interactive-inverse-subtle-selected: rgba(0, 8, 54, 0.08);
    --ds-color-interactive-light-enabled: rgba(255, 255, 255, 0.93);
    --ds-color-interactive-light-hovered: rgba(255, 255, 255, 0.9);
    --ds-color-interactive-light-pressed: rgba(255, 255, 255, 0.8);
    --ds-color-interactive-light-selected: rgba(255, 255, 255, 0.85);
    --ds-color-interactive-light-subtle-enabled: rgba(255, 255, 255, 0);
    --ds-color-interactive-light-subtle-hovered: rgba(255, 255, 255, 0.17);
    --ds-color-interactive-light-subtle-pressed: rgba(255, 255, 255, 0.34);
    --ds-color-interactive-light-subtle-selected: rgba(255, 255, 255, 0.26);
    --ds-color-interactive-negative-enabled: rgb(221, 0, 0);
    --ds-color-interactive-negative-hovered: rgb(189, 0, 0);
    --ds-color-interactive-negative-pressed: rgb(117, 0, 2);
    --ds-color-interactive-negative-selected: rgb(155, 0, 0);
    --ds-color-interactive-negative-subtle-enabled: rgba(24, 25, 31, 0);
    --ds-color-interactive-negative-subtle-hovered: rgb(69, 3, 2);
    --ds-color-interactive-negative-subtle-pressed: rgb(155, 0, 0);
    --ds-color-interactive-negative-subtle-selected: rgb(117, 0, 2);
    --ds-color-interactive-neutral-enabled: rgba(255, 255, 255, 0.26);
    --ds-color-interactive-neutral-hovered: rgba(255, 255, 255, 0.34);
    --ds-color-interactive-neutral-pressed: rgba(255, 255, 255, 0.46);
    --ds-color-interactive-neutral-selected: rgba(255, 255, 255, 0.4);
    --ds-color-interactive-neutral-selected-strong: rgba(255, 255, 255, 0.85);
    --ds-color-interactive-neutral-subtle-enabled: rgba(255, 255, 255, 0);
    --ds-color-interactive-neutral-subtle-hovered: rgba(255, 255, 255, 0.17);
    --ds-color-interactive-neutral-subtle-pressed: rgba(255, 255, 255, 0.34);
    --ds-color-interactive-neutral-subtle-selected: rgba(255, 255, 255, 0.26);
    --ds-color-interactive-positive-enabled: rgb(0, 132, 57);
    --ds-color-interactive-positive-hovered: rgb(0, 151, 62);
    --ds-color-interactive-positive-pressed: rgb(53, 183, 91);
    --ds-color-interactive-positive-selected: rgb(0, 168, 67);
    --ds-color-interactive-positive-subtle-enabled: rgba(24, 25, 31, 0);
    --ds-color-interactive-positive-subtle-hovered: rgb(11, 41, 22);
    --ds-color-interactive-positive-subtle-pressed: rgb(0, 93, 43);
    --ds-color-interactive-positive-subtle-selected: rgb(3, 70, 34);
    --ds-color-interactive-primary-enabled: rgb(0, 111, 227);
    --ds-color-interactive-primary-hovered: rgb(39, 131, 235);
    --ds-color-interactive-primary-pressed: rgb(96, 165, 244);
    --ds-color-interactive-primary-selected: rgb(70, 149, 240);
    --ds-color-interactive-primary-subtle-enabled: rgba(24, 25, 31, 0);
    --ds-color-interactive-primary-subtle-hovered: rgb(1, 28, 88);
    --ds-color-interactive-primary-subtle-pressed: rgb(0, 69, 183);
    --ds-color-interactive-primary-subtle-selected: rgb(0, 50, 144);
    --ds-color-stroke-dark: rgb(20, 20, 20);
    --ds-color-stroke-default: rgba(255, 255, 255, 0.46);
    --ds-color-stroke-disabled: rgba(255, 255, 255, 0.17);
    --ds-color-stroke-inverse: rgba(0, 2, 21, 0.69);
    --ds-color-stroke-light: rgb(252, 252, 252);
    --ds-color-stroke-muted: rgba(255, 255, 255, 0.26);
    --ds-color-stroke-strong: rgba(255, 255, 255, 0.93);
    --ds-color-stroke-subtle: rgba(255, 255, 255, 0.17);
    --ds-color-support-accent-default: rgb(255, 213, 2);
    --ds-color-support-accent-inverse: rgb(105, 39, 0);
    --ds-color-support-accent-muted: rgb(245, 178, 0);
    --ds-color-support-accent-strong: rgb(255, 245, 173);
    --ds-color-support-brand-default: rgb(255, 213, 2);
    --ds-color-support-brand-inverse: rgb(105, 39, 0);
    --ds-color-support-brand-muted: rgb(245, 178, 0);
    --ds-color-support-focused-default: rgb(96, 165, 244);
    --ds-color-support-focused-inner: rgb(20, 20, 20);
    --ds-color-support-focused-inverse: rgb(0, 50, 144);
    --ds-color-support-focused-muted: rgb(0, 111, 227);
    --ds-color-support-informative-default: rgb(43, 189, 239);
    --ds-color-support-informative-inverse: rgb(0, 65, 92);
    --ds-color-support-informative-muted: rgb(0, 140, 192);
    --ds-color-support-negative-default: rgb(255, 85, 79);
    --ds-color-support-negative-inverse: rgb(69, 3, 2);
    --ds-color-support-negative-muted: rgb(189, 0, 0);
    --ds-color-support-neutral-default: rgb(188, 190, 200);
    --ds-color-support-neutral-inverse: rgb(78, 80, 98);
    --ds-color-support-neutral-muted: rgb(160, 161, 175);
    --ds-color-support-neutral-strong: rgb(249, 249, 251);
    --ds-color-support-positive-default: rgb(95, 196, 115);
    --ds-color-support-positive-inverse: rgb(3, 70, 34);
    --ds-color-support-positive-muted: rgb(0, 151, 62);
    --ds-color-support-primary-default: rgb(0, 111, 227);
    --ds-color-support-primary-inverse: rgb(0, 50, 144);
    --ds-color-support-primary-muted: rgb(0, 69, 183);
    --ds-color-support-skeleton-base: rgb(113, 115, 132);
    --ds-color-support-skeleton-shimmer: rgb(130, 131, 147);
    --ds-color-support-warning-default: rgb(250, 152, 75);
    --ds-color-support-warning-inverse: rgb(93, 49, 24);
    --ds-color-support-warning-muted: rgb(201, 105, 43);
    --ds-color-surface-background-base-default: rgb(24, 25, 31);
    --ds-color-surface-background-base-layer-1: rgb(34, 36, 45);
    --ds-color-surface-background-base-layer-2: rgb(43, 44, 57);
    --ds-color-surface-background-base-muted: rgb(20, 20, 20);
    --ds-color-surface-background-dark: rgb(20, 20, 20);
    --ds-color-surface-background-inverse: rgb(252, 252, 252);
    --ds-color-surface-background-level-1-default: rgb(43, 44, 57);
    --ds-color-surface-background-level-1-layer-1: rgb(59, 61, 76);
    --ds-color-surface-background-level-1-layer-2: rgb(78, 80, 98);
    --ds-color-surface-background-level-1-muted: rgb(34, 36, 45);
    --ds-color-surface-background-light: rgb(252, 252, 252);
    --ds-color-surface-overlay-dark: rgba(0, 4, 28, 0.43);
    --ds-color-surface-overlay-dark-strong: rgba(0, 3, 23, 0.56);
    --ds-color-surface-overlay-light: rgba(255, 255, 255, 0.69);
    --ds-color-surface-overlay-light-strong: rgba(255, 255, 255, 0.8);
  }
}

[data-mode='dark'],
[data-mode='dark']:root {
  --ds-color-content-accent: rgb(255, 213, 2);
  --ds-color-content-brand: rgb(255, 213, 2);
  --ds-color-content-dark: rgb(20, 20, 20);
  --ds-color-content-default: rgb(252, 252, 252);
  --ds-color-content-informative: rgb(79, 203, 246);
  --ds-color-content-inverse: rgb(20, 20, 20);
  --ds-color-content-light: rgb(252, 252, 252);
  --ds-color-content-link-dark: rgb(20, 20, 20);
  --ds-color-content-link-default: rgb(252, 252, 252);
  --ds-color-content-link-emphasis: rgb(144, 194, 249);
  --ds-color-content-link-inverse: rgb(20, 20, 20);
  --ds-color-content-link-light: rgb(252, 252, 252);
  --ds-color-content-link-visited: rgb(212, 174, 255);
  --ds-color-content-link-visited-dark: rgb(82, 19, 142);
  --ds-color-content-link-visited-inverse: rgb(134, 30, 227);
  --ds-color-content-link-visited-light: rgb(212, 174, 255);
  --ds-color-content-muted: rgb(228, 229, 236);
  --ds-color-content-negative: rgb(255, 144, 144);
  --ds-color-content-non-essential: rgb(160, 161, 175);
  --ds-color-content-on-accent: rgb(62, 23, 0);
  --ds-color-content-on-brand: rgb(62, 23, 0);
  --ds-color-content-on-primary: rgb(252, 252, 252);
  --ds-color-content-positive: rgb(155, 218, 161);
  --ds-color-content-primary: rgb(167, 207, 251);
  --ds-color-content-subtle: rgb(188, 190, 200);
  --ds-color-content-warning: rgb(253, 191, 142);
  --ds-color-elevation-color-ambient: rgba(0, 0, 0, 0.2);
  --ds-color-elevation-color-key: rgba(0, 0, 0, 0.32);
  --ds-color-highlight-pink-default: rgb(253, 80, 130);
  --ds-color-highlight-pink-inverse: rgb(115, 15, 45);
  --ds-color-highlight-pink-muted: rgb(185, 24, 70);
  --ds-color-interactive-accent-enabled: rgb(255, 213, 2);
  --ds-color-interactive-accent-hovered: rgb(255, 230, 54);
  --ds-color-interactive-accent-pressed: rgb(255, 245, 173);
  --ds-color-interactive-accent-selected: rgb(255, 239, 122);
  --ds-color-interactive-accent-subtle-enabled: rgba(24, 25, 31, 0);
  --ds-color-interactive-accent-subtle-hovered: rgb(62, 23, 0);
  --ds-color-interactive-accent-subtle-pressed: rgb(138, 52, 0);
  --ds-color-interactive-accent-subtle-selected: rgb(105, 39, 0);
  --ds-color-interactive-brand-enabled: rgb(255, 213, 2);
  --ds-color-interactive-brand-hovered: rgb(255, 230, 54);
  --ds-color-interactive-brand-pressed: rgb(255, 245, 173);
  --ds-color-interactive-brand-selected: rgb(255, 239, 122);
  --ds-color-interactive-brand-subtle-enabled: rgba(24, 25, 31, 0);
  --ds-color-interactive-brand-subtle-hovered: rgb(62, 23, 0);
  --ds-color-interactive-brand-subtle-pressed: rgb(138, 52, 0);
  --ds-color-interactive-brand-subtle-selected: rgb(105, 39, 0);
  --ds-color-interactive-dark-enabled: rgba(0, 3, 24, 0.77);
  --ds-color-interactive-dark-hovered: rgba(0, 2, 21, 0.69);
  --ds-color-interactive-dark-pressed: rgba(0, 3, 23, 0.56);
  --ds-color-interactive-dark-selected: rgba(0, 3, 23, 0.56);
  --ds-color-interactive-dark-subtle-enabled: rgba(24, 25, 31, 0);
  --ds-color-interactive-dark-subtle-hovered: rgba(33, 38, 72, 0.06);
  --ds-color-interactive-dark-subtle-pressed: rgba(13, 20, 61, 0.11);
  --ds-color-interactive-dark-subtle-selected: rgba(13, 20, 61, 0.11);
  --ds-color-interactive-inverse-enabled: rgba(0, 4, 28, 0.62);
  --ds-color-interactive-inverse-hovered: rgba(0, 2, 21, 0.69);
  --ds-color-interactive-inverse-pressed: rgba(1, 3, 11, 0.87);
  --ds-color-interactive-inverse-selected: rgba(0, 3, 24, 0.77);
  --ds-color-interactive-inverse-subtle-enabled: rgba(24, 25, 31, 0);
  --ds-color-interactive-inverse-subtle-hovered: rgba(33, 38, 72, 0.06);
  --ds-color-interactive-inverse-subtle-pressed: rgba(13, 20, 61, 0.11);
  --ds-color-interactive-inverse-subtle-selected: rgba(0, 8, 54, 0.08);
  --ds-color-interactive-light-enabled: rgba(255, 255, 255, 0.93);
  --ds-color-interactive-light-hovered: rgba(255, 255, 255, 0.9);
  --ds-color-interactive-light-pressed: rgba(255, 255, 255, 0.8);
  --ds-color-interactive-light-selected: rgba(255, 255, 255, 0.85);
  --ds-color-interactive-light-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-light-subtle-hovered: rgba(255, 255, 255, 0.17);
  --ds-color-interactive-light-subtle-pressed: rgba(255, 255, 255, 0.34);
  --ds-color-interactive-light-subtle-selected: rgba(255, 255, 255, 0.26);
  --ds-color-interactive-negative-enabled: rgb(221, 0, 0);
  --ds-color-interactive-negative-hovered: rgb(189, 0, 0);
  --ds-color-interactive-negative-pressed: rgb(117, 0, 2);
  --ds-color-interactive-negative-selected: rgb(155, 0, 0);
  --ds-color-interactive-negative-subtle-enabled: rgba(24, 25, 31, 0);
  --ds-color-interactive-negative-subtle-hovered: rgb(69, 3, 2);
  --ds-color-interactive-negative-subtle-pressed: rgb(155, 0, 0);
  --ds-color-interactive-negative-subtle-selected: rgb(117, 0, 2);
  --ds-color-interactive-neutral-enabled: rgba(255, 255, 255, 0.26);
  --ds-color-interactive-neutral-hovered: rgba(255, 255, 255, 0.34);
  --ds-color-interactive-neutral-pressed: rgba(255, 255, 255, 0.46);
  --ds-color-interactive-neutral-selected: rgba(255, 255, 255, 0.4);
  --ds-color-interactive-neutral-selected-strong: rgba(255, 255, 255, 0.85);
  --ds-color-interactive-neutral-subtle-enabled: rgba(255, 255, 255, 0);
  --ds-color-interactive-neutral-subtle-hovered: rgba(255, 255, 255, 0.17);
  --ds-color-interactive-neutral-subtle-pressed: rgba(255, 255, 255, 0.34);
  --ds-color-interactive-neutral-subtle-selected: rgba(255, 255, 255, 0.26);
  --ds-color-interactive-positive-enabled: rgb(0, 132, 57);
  --ds-color-interactive-positive-hovered: rgb(0, 151, 62);
  --ds-color-interactive-positive-pressed: rgb(53, 183, 91);
  --ds-color-interactive-positive-selected: rgb(0, 168, 67);
  --ds-color-interactive-positive-subtle-enabled: rgba(24, 25, 31, 0);
  --ds-color-interactive-positive-subtle-hovered: rgb(11, 41, 22);
  --ds-color-interactive-positive-subtle-pressed: rgb(0, 93, 43);
  --ds-color-interactive-positive-subtle-selected: rgb(3, 70, 34);
  --ds-color-interactive-primary-enabled: rgb(0, 111, 227);
  --ds-color-interactive-primary-hovered: rgb(39, 131, 235);
  --ds-color-interactive-primary-pressed: rgb(96, 165, 244);
  --ds-color-interactive-primary-selected: rgb(70, 149, 240);
  --ds-color-interactive-primary-subtle-enabled: rgba(24, 25, 31, 0);
  --ds-color-interactive-primary-subtle-hovered: rgb(1, 28, 88);
  --ds-color-interactive-primary-subtle-pressed: rgb(0, 69, 183);
  --ds-color-interactive-primary-subtle-selected: rgb(0, 50, 144);
  --ds-color-stroke-dark: rgb(20, 20, 20);
  --ds-color-stroke-default: rgba(255, 255, 255, 0.46);
  --ds-color-stroke-disabled: rgba(255, 255, 255, 0.17);
  --ds-color-stroke-inverse: rgba(0, 2, 21, 0.69);
  --ds-color-stroke-light: rgb(252, 252, 252);
  --ds-color-stroke-muted: rgba(255, 255, 255, 0.26);
  --ds-color-stroke-strong: rgba(255, 255, 255, 0.93);
  --ds-color-stroke-subtle: rgba(255, 255, 255, 0.17);
  --ds-color-support-accent-default: rgb(255, 213, 2);
  --ds-color-support-accent-inverse: rgb(105, 39, 0);
  --ds-color-support-accent-muted: rgb(245, 178, 0);
  --ds-color-support-accent-strong: rgb(255, 245, 173);
  --ds-color-support-brand-default: rgb(255, 213, 2);
  --ds-color-support-brand-inverse: rgb(105, 39, 0);
  --ds-color-support-brand-muted: rgb(245, 178, 0);
  --ds-color-support-focused-default: rgb(96, 165, 244);
  --ds-color-support-focused-inner: rgb(20, 20, 20);
  --ds-color-support-focused-inverse: rgb(0, 50, 144);
  --ds-color-support-focused-muted: rgb(0, 111, 227);
  --ds-color-support-informative-default: rgb(43, 189, 239);
  --ds-color-support-informative-inverse: rgb(0, 65, 92);
  --ds-color-support-informative-muted: rgb(0, 140, 192);
  --ds-color-support-negative-default: rgb(255, 85, 79);
  --ds-color-support-negative-inverse: rgb(69, 3, 2);
  --ds-color-support-negative-muted: rgb(189, 0, 0);
  --ds-color-support-neutral-default: rgb(188, 190, 200);
  --ds-color-support-neutral-inverse: rgb(78, 80, 98);
  --ds-color-support-neutral-muted: rgb(160, 161, 175);
  --ds-color-support-neutral-strong: rgb(249, 249, 251);
  --ds-color-support-positive-default: rgb(95, 196, 115);
  --ds-color-support-positive-inverse: rgb(3, 70, 34);
  --ds-color-support-positive-muted: rgb(0, 151, 62);
  --ds-color-support-primary-default: rgb(0, 111, 227);
  --ds-color-support-primary-inverse: rgb(0, 50, 144);
  --ds-color-support-primary-muted: rgb(0, 69, 183);
  --ds-color-support-skeleton-base: rgb(113, 115, 132);
  --ds-color-support-skeleton-shimmer: rgb(130, 131, 147);
  --ds-color-support-warning-default: rgb(250, 152, 75);
  --ds-color-support-warning-inverse: rgb(93, 49, 24);
  --ds-color-support-warning-muted: rgb(201, 105, 43);
  --ds-color-surface-background-base-default: rgb(24, 25, 31);
  --ds-color-surface-background-base-layer-1: rgb(34, 36, 45);
  --ds-color-surface-background-base-layer-2: rgb(43, 44, 57);
  --ds-color-surface-background-base-muted: rgb(20, 20, 20);
  --ds-color-surface-background-dark: rgb(20, 20, 20);
  --ds-color-surface-background-inverse: rgb(252, 252, 252);
  --ds-color-surface-background-level-1-default: rgb(43, 44, 57);
  --ds-color-surface-background-level-1-layer-1: rgb(59, 61, 76);
  --ds-color-surface-background-level-1-layer-2: rgb(78, 80, 98);
  --ds-color-surface-background-level-1-muted: rgb(34, 36, 45);
  --ds-color-surface-background-light: rgb(252, 252, 252);
  --ds-color-surface-overlay-dark: rgba(0, 4, 28, 0.43);
  --ds-color-surface-overlay-dark-strong: rgba(0, 3, 23, 0.56);
  --ds-color-surface-overlay-light: rgba(255, 255, 255, 0.69);
  --ds-color-surface-overlay-light-strong: rgba(255, 255, 255, 0.8);
}

/**
 * Do not edit directly
 * This file is autogenerated by The Design System Platforms Team using Style Dictionary.
 */

:root {
  --ds-font-font-family: LEGO Typewell;
}

[data-mode='brand'],
[data-mode='brand']:root {
  --ds-font-font-family: LEGO Typewell;
}

[data-mode='legacy'],
[data-mode='legacy']:root {
  --ds-font-font-family: Cera Pro;
}

/**
 * Do not edit directly
 * This file is autogenerated by The Design System Platforms Team using Style Dictionary.
 */

:root {
  --ds-layout-blur-50: 4px;
  --ds-layout-blur-150: 12px;
  --ds-layout-blur-300: 24px;
  --ds-layout-radius-25: 2px; /* (sm ~16–28px) Precision & density Dense UI elements, table cells, compact data widgets */
  --ds-layout-radius-50: 4px; /* (sm~24–32px)  Compact control – Small tags, inputs */
  --ds-layout-radius-75: 6px; /* (sm / md ~28–36px) Small control – Utility buttons, tags, small inputs */
  --ds-layout-radius-100: 8px; /* (~36–44px) Medium control – Medium inputs, utility buttons, md */
  --ds-layout-radius-150: 12px; /* (md/lg ~44–56px) Large control / small surface – Large inputs, popovers, tooltips, inline alerts, utility buttons */
  --ds-layout-radius-200: 16px; /* (≥48px) Functional surface – Cards, menus, tables, modals, panels */
  --ds-layout-radius-400: 32px; /* (≥96px) Expressive surface – Feature areas, onboarding sections */
  --ds-layout-radius-600: 48px; /* (≥128px) Highly playful / brand surface – Kids experiences, campaigns, hero areas */
  --ds-layout-radius-pill: 999px; /* Emphasis & mode change – CTA buttons, content switchers */
  --ds-layout-radius-round: 999px; /* State & identity indicator – Avatars, pagination indicator, radio buttonswidth = height */
  --ds-layout-size-50: 4px;
  --ds-layout-size-100: 8px;
  --ds-layout-size-150: 12px;
  --ds-layout-size-200: 16px;
  --ds-layout-size-250: 20px;
  --ds-layout-size-300: 24px;
  --ds-layout-size-350: 28px;
  --ds-layout-size-400: 32px;
  --ds-layout-size-500: 40px;
  --ds-layout-size-600: 48px;
  --ds-layout-size-700: 56px;
  --ds-layout-size-800: 64px;
  --ds-layout-size-1000: 80px;
  --ds-layout-size-1200: 96px;
  --ds-layout-size-1400: 112px;
  --ds-layout-size-1600: 128px;
  --ds-layout-spacing-0: 0px;
  --ds-layout-spacing-10: 1px;
  --ds-layout-spacing-25: 2px;
  --ds-layout-spacing-35: 3px;
  --ds-layout-spacing-50: 4px;
  --ds-layout-spacing-75: 6px;
  --ds-layout-spacing-100: 8px;
  --ds-layout-spacing-150: 12px;
  --ds-layout-spacing-200: 16px;
  --ds-layout-spacing-250: 20px;
  --ds-layout-spacing-300: 24px;
  --ds-layout-spacing-400: 32px;
  --ds-layout-spacing-500: 40px;
  --ds-layout-spacing-600: 48px;
  --ds-layout-spacing-700: 56px;
  --ds-layout-spacing-800: 64px;
  --ds-layout-spacing-1000: 80px;
  --ds-layout-spacing-1200: 96px;
  --ds-layout-spacing-1400: 112px;
  --ds-layout-spacing-1600: 128px;
  --ds-layout-spacing-2000: 160px;
  --ds-layout-spacing-2800: 224px;
  --ds-layout-stroke-width-0: 0px;
  --ds-layout-stroke-width-10: 1px;
  --ds-layout-stroke-width-25: 2px;
  --ds-layout-stroke-width-50: 4px;
  --ds-layout-stroke-width-75: 6px;
  --ds-layout-stroke-width-100: 8px;
  --ds-layout-stroke-width-125: 10px;
}

[data-mode='default'],
[data-mode='default']:root {
  --ds-layout-blur-50: 4px;
  --ds-layout-blur-150: 12px;
  --ds-layout-blur-300: 24px;
  --ds-layout-radius-25: 2px; /* (sm ~16–28px) Precision & density Dense UI elements, table cells, compact data widgets */
  --ds-layout-radius-50: 4px; /* (sm~24–32px)  Compact control – Small tags, inputs */
  --ds-layout-radius-75: 6px; /* (sm / md ~28–36px) Small control – Utility buttons, tags, small inputs */
  --ds-layout-radius-100: 8px; /* (~36–44px) Medium control – Medium inputs, utility buttons, md */
  --ds-layout-radius-150: 12px; /* (md/lg ~44–56px) Large control / small surface – Large inputs, popovers, tooltips, inline alerts, utility buttons */
  --ds-layout-radius-200: 16px; /* (≥48px) Functional surface – Cards, menus, tables, modals, panels */
  --ds-layout-radius-400: 32px; /* (≥96px) Expressive surface – Feature areas, onboarding sections */
  --ds-layout-radius-600: 48px; /* (≥128px) Highly playful / brand surface – Kids experiences, campaigns, hero areas */
  --ds-layout-radius-pill: 999px; /* Emphasis & mode change – CTA buttons, content switchers */
  --ds-layout-radius-round: 999px; /* State & identity indicator – Avatars, pagination indicator, radio buttonswidth = height */
  --ds-layout-size-50: 4px;
  --ds-layout-size-100: 8px;
  --ds-layout-size-150: 12px;
  --ds-layout-size-200: 16px;
  --ds-layout-size-250: 20px;
  --ds-layout-size-300: 24px;
  --ds-layout-size-350: 28px;
  --ds-layout-size-400: 32px;
  --ds-layout-size-500: 40px;
  --ds-layout-size-600: 48px;
  --ds-layout-size-700: 56px;
  --ds-layout-size-800: 64px;
  --ds-layout-size-1000: 80px;
  --ds-layout-size-1200: 96px;
  --ds-layout-size-1400: 112px;
  --ds-layout-size-1600: 128px;
  --ds-layout-spacing-0: 0px;
  --ds-layout-spacing-10: 1px;
  --ds-layout-spacing-25: 2px;
  --ds-layout-spacing-35: 3px;
  --ds-layout-spacing-50: 4px;
  --ds-layout-spacing-75: 6px;
  --ds-layout-spacing-100: 8px;
  --ds-layout-spacing-150: 12px;
  --ds-layout-spacing-200: 16px;
  --ds-layout-spacing-250: 20px;
  --ds-layout-spacing-300: 24px;
  --ds-layout-spacing-400: 32px;
  --ds-layout-spacing-500: 40px;
  --ds-layout-spacing-600: 48px;
  --ds-layout-spacing-700: 56px;
  --ds-layout-spacing-800: 64px;
  --ds-layout-spacing-1000: 80px;
  --ds-layout-spacing-1200: 96px;
  --ds-layout-spacing-1400: 112px;
  --ds-layout-spacing-1600: 128px;
  --ds-layout-spacing-2000: 160px;
  --ds-layout-spacing-2800: 224px;
  --ds-layout-stroke-width-0: 0px;
  --ds-layout-stroke-width-10: 1px;
  --ds-layout-stroke-width-25: 2px;
  --ds-layout-stroke-width-50: 4px;
  --ds-layout-stroke-width-75: 6px;
  --ds-layout-stroke-width-100: 8px;
  --ds-layout-stroke-width-125: 10px;
}

[data-mode='compact'],
[data-mode='compact']:root {
  --ds-layout-blur-50: 4px;
  --ds-layout-blur-150: 12px;
  --ds-layout-blur-300: 24px;
  --ds-layout-radius-25: 2px; /* (sm ~16–28px) Precision & density Dense UI elements, table cells, compact data widgets */
  --ds-layout-radius-50: 4px; /* (sm~24–32px)  Compact control – Small tags, inputs */
  --ds-layout-radius-75: 5px; /* (sm / md ~28–36px) Small control – Utility buttons, tags, small inputs */
  --ds-layout-radius-100: 7px; /* (~36–44px) Medium control – Medium inputs, utility buttons, md */
  --ds-layout-radius-150: 9px; /* (md/lg ~44–56px) Large control / small surface – Large inputs, popovers, tooltips, inline alerts, utility buttons */
  --ds-layout-radius-200: 14px; /* (≥48px) Functional surface – Cards, menus, tables, modals, panels */
  --ds-layout-radius-400: 24px; /* (≥96px) Expressive surface – Feature areas, onboarding sections */
  --ds-layout-radius-600: 34px; /* (≥128px) Highly playful / brand surface – Kids experiences, campaigns, hero areas */
  --ds-layout-radius-pill: 999px; /* Emphasis & mode change – CTA buttons, content switchers */
  --ds-layout-radius-round: 999px; /* State & identity indicator – Avatars, pagination indicator, radio buttonswidth = height */
  --ds-layout-size-50: 4px;
  --ds-layout-size-100: 8px;
  --ds-layout-size-150: 12px;
  --ds-layout-size-200: 16px;
  --ds-layout-size-250: 20px;
  --ds-layout-size-300: 24px;
  --ds-layout-size-350: 28px;
  --ds-layout-size-400: 32px;
  --ds-layout-size-500: 40px;
  --ds-layout-size-600: 48px;
  --ds-layout-size-700: 56px;
  --ds-layout-size-800: 64px;
  --ds-layout-size-1000: 80px;
  --ds-layout-size-1200: 96px;
  --ds-layout-size-1400: 112px;
  --ds-layout-size-1600: 128px;
  --ds-layout-spacing-0: 0px;
  --ds-layout-spacing-10: 1px;
  --ds-layout-spacing-25: 2px;
  --ds-layout-spacing-35: 3px;
  --ds-layout-spacing-50: 4px;
  --ds-layout-spacing-75: 5px;
  --ds-layout-spacing-100: 7px;
  --ds-layout-spacing-150: 9px;
  --ds-layout-spacing-200: 13px;
  --ds-layout-spacing-250: 17px;
  --ds-layout-spacing-300: 21px;
  --ds-layout-spacing-400: 26px;
  --ds-layout-spacing-500: 34px;
  --ds-layout-spacing-600: 42px;
  --ds-layout-spacing-700: 50px;
  --ds-layout-spacing-800: 52px;
  --ds-layout-spacing-1000: 68px;
  --ds-layout-spacing-1200: 84px;
  --ds-layout-spacing-1400: 100px;
  --ds-layout-spacing-1600: 104px;
  --ds-layout-spacing-2000: 136px;
  --ds-layout-spacing-2800: 190px;
  --ds-layout-stroke-width-0: 0px;
  --ds-layout-stroke-width-10: 1px;
  --ds-layout-stroke-width-25: 2px;
  --ds-layout-stroke-width-50: 4px;
  --ds-layout-stroke-width-75: 6px;
  --ds-layout-stroke-width-100: 8px;
  --ds-layout-stroke-width-125: 10px;
}

[data-mode='touch'],
[data-mode='touch']:root {
  --ds-layout-blur-50: 4px;
  --ds-layout-blur-150: 12px;
  --ds-layout-blur-300: 24px;
  --ds-layout-radius-25: 2px; /* (sm ~16–28px) Precision & density Dense UI elements, table cells, compact data widgets */
  --ds-layout-radius-50: 4px; /* (sm~24–32px)  Compact control – Small tags, inputs */
  --ds-layout-radius-75: 6px; /* (sm / md ~28–36px) Small control – Utility buttons, tags, small inputs */
  --ds-layout-radius-100: 8px; /* (~36–44px) Medium control – Medium inputs, utility buttons, md */
  --ds-layout-radius-150: 12px; /* (md/lg ~44–56px) Large control / small surface – Large inputs, popovers, tooltips, inline alerts, utility buttons */
  --ds-layout-radius-200: 16px; /* (≥48px) Functional surface – Cards, menus, tables, modals, panels */
  --ds-layout-radius-400: 32px; /* (≥96px) Expressive surface – Feature areas, onboarding sections */
  --ds-layout-radius-600: 48px; /* (≥128px) Highly playful / brand surface – Kids experiences, campaigns, hero areas */
  --ds-layout-radius-pill: 999px; /* Emphasis & mode change – CTA buttons, content switchers */
  --ds-layout-radius-round: 999px; /* State & identity indicator – Avatars, pagination indicator, radio buttonswidth = height */
  --ds-layout-size-50: 6px;
  --ds-layout-size-100: 12px;
  --ds-layout-size-150: 18px;
  --ds-layout-size-200: 24px;
  --ds-layout-size-250: 30px;
  --ds-layout-size-300: 36px;
  --ds-layout-size-350: 42px;
  --ds-layout-size-400: 48px;
  --ds-layout-size-500: 60px;
  --ds-layout-size-600: 72px;
  --ds-layout-size-700: 84px;
  --ds-layout-size-800: 96px;
  --ds-layout-size-1000: 120px;
  --ds-layout-size-1200: 144px;
  --ds-layout-size-1400: 168px;
  --ds-layout-size-1600: 192px;
  --ds-layout-spacing-0: 0px;
  --ds-layout-spacing-10: 2px;
  --ds-layout-spacing-25: 4px;
  --ds-layout-spacing-35: 5px;
  --ds-layout-spacing-50: 6px;
  --ds-layout-spacing-75: 9px;
  --ds-layout-spacing-100: 11px;
  --ds-layout-spacing-150: 18px;
  --ds-layout-spacing-200: 22px;
  --ds-layout-spacing-250: 25px;
  --ds-layout-spacing-300: 29px;
  --ds-layout-spacing-400: 43px;
  --ds-layout-spacing-500: 50px;
  --ds-layout-spacing-600: 58px;
  --ds-layout-spacing-700: 66px;
  --ds-layout-spacing-800: 86px;
  --ds-layout-spacing-1000: 100px;
  --ds-layout-spacing-1200: 116px;
  --ds-layout-spacing-1400: 131px;
  --ds-layout-spacing-1600: 171px;
  --ds-layout-spacing-2000: 200px;
  --ds-layout-spacing-2800: 280px;
  --ds-layout-stroke-width-0: 0px;
  --ds-layout-stroke-width-10: 1px;
  --ds-layout-stroke-width-25: 2px;
  --ds-layout-stroke-width-50: 5px;
  --ds-layout-stroke-width-75: 7px;
  --ds-layout-stroke-width-100: 9px;
  --ds-layout-stroke-width-125: 11px;
}

/**
 * Do not edit directly
 * This file is autogenerated by The Design System Platforms Team using Style Dictionary.
 */

:root {
  --ds-misc-elevation-lg-ambient-blur: 24px;
  --ds-misc-elevation-lg-ambient-spread: 0px;
  --ds-misc-elevation-lg-ambient-x: 0px;
  --ds-misc-elevation-lg-ambient-y: 12px;
  --ds-misc-elevation-lg-key-blur: 16px;
  --ds-misc-elevation-lg-key-spread: 0px;
  --ds-misc-elevation-lg-key-x: 0px;
  --ds-misc-elevation-lg-key-y: 8px;
  --ds-misc-elevation-md-ambient-blur: 12px;
  --ds-misc-elevation-md-ambient-spread: 1px;
  --ds-misc-elevation-md-ambient-x: 0px;
  --ds-misc-elevation-md-ambient-y: 6px;
  --ds-misc-elevation-md-key-blur: 8px;
  --ds-misc-elevation-md-key-spread: -3px;
  --ds-misc-elevation-md-key-x: 0px;
  --ds-misc-elevation-md-key-y: 4px;
  --ds-misc-elevation-sm-ambient-blur: 6px;
  --ds-misc-elevation-sm-ambient-spread: 0px;
  --ds-misc-elevation-sm-ambient-x: 0px;
  --ds-misc-elevation-sm-ambient-y: 3px;
  --ds-misc-elevation-sm-key-blur: 4px;
  --ds-misc-elevation-sm-key-spread: -2px;
  --ds-misc-elevation-sm-key-x: 0px;
  --ds-misc-elevation-sm-key-y: 2px;
  --ds-misc-elevation-xl-ambient-blur: 40px;
  --ds-misc-elevation-xl-ambient-spread: 4px;
  --ds-misc-elevation-xl-ambient-x: 0px;
  --ds-misc-elevation-xl-ambient-y: 16px;
  --ds-misc-elevation-xl-key-blur: 24px;
  --ds-misc-elevation-xl-key-spread: 0px;
  --ds-misc-elevation-xl-key-x: 0px;
  --ds-misc-elevation-xl-key-y: 12px;
  --ds-misc-elevation-xs-ambient-blur: 3px;
  --ds-misc-elevation-xs-ambient-spread: 0px;
  --ds-misc-elevation-xs-ambient-x: 0px;
  --ds-misc-elevation-xs-ambient-y: 1px;
  --ds-misc-elevation-xs-key-blur: 2px;
  --ds-misc-elevation-xs-key-spread: -1px;
  --ds-misc-elevation-xs-key-x: 0px;
  --ds-misc-elevation-xs-key-y: 1px;
  --ds-misc-opacity-10: 0.1; /* 0.1 */
  --ds-misc-opacity-30: 0.3; /* 0.3 */
  --ds-misc-opacity-50: 0.5; /* 0.5 */
  --ds-misc-opacity-70: 0.7; /* 0.7 */
  --ds-misc-opacity-90: 0.9; /* 0.9 */
  --ds-misc-z-index-z-base: 0; /* Default content layer All standard UI components */
  --ds-misc-z-index-z-critical: 9999; /* System-level override Global loader, forced interruption */
  --ds-misc-z-index-z-modal: 1000; /* Blocking UI layer Modal, drawer */
  --ds-misc-z-index-z-overlay: 100; /* Background blocking layer Behind modal/drawer */
  --ds-misc-z-index-z-raised: 10; /* Local elevation above base Dropdowns, menus, popovers, sticky elements */
  --ds-misc-z-index-z-toast: 1100; /* Passive system feedback Toasts, notifications */
  --ds-misc-z-index-z-tooltip: 1500; /* Contextual assistive UI Tooltips */
  --ds-misc-elevation-color-ambient: rgba(0, 0, 0, 0.1);
  --ds-misc-elevation-color-key: rgba(0, 0, 0, 0.16);
}

@media (prefers-color-scheme: light) {
  :root {
    --ds-misc-elevation-color-ambient: rgba(0, 0, 0, 0.1);
    --ds-misc-elevation-color-key: rgba(0, 0, 0, 0.16);
  }
}

[data-mode='light'],
[data-mode='light']:root {
  --ds-misc-elevation-color-ambient: rgba(0, 0, 0, 0.1);
  --ds-misc-elevation-color-key: rgba(0, 0, 0, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ds-misc-elevation-color-ambient: rgba(0, 0, 0, 0.2);
    --ds-misc-elevation-color-key: rgba(0, 0, 0, 0.32);
  }
}

[data-mode='dark'],
[data-mode='dark']:root {
  --ds-misc-elevation-color-ambient: rgba(0, 0, 0, 0.2);
  --ds-misc-elevation-color-key: rgba(0, 0, 0, 0.32);
}

/**
 * Do not edit directly
 * This file is autogenerated by The Design System Platforms Team using Style Dictionary.
 */

:root {
  --ds-screen-text-font-size-body-lg: 1.125rem;
  --ds-screen-text-font-size-body-md: 1rem;
  --ds-screen-text-font-size-body-sm: 0.875rem;
  --ds-screen-text-font-size-body-xs: 0.75rem;
  --ds-screen-text-font-size-display-lg: clamp(3.875rem, 1.081633rem + 11.918367vi, 13rem);
  --ds-screen-text-font-size-display-md: clamp(3.625rem, 1.17602rem + 10.44898vi, 11.625rem);
  --ds-screen-text-font-size-display-sm: clamp(3.1875rem, 1.3125rem + 8vi, 9.3125rem);
  --ds-screen-text-font-size-heading-2xl: clamp(1.5625rem, 1.294643rem + 1.142857vi, 2.4375rem);
  --ds-screen-text-font-size-heading-3xl: clamp(1.75rem, 1.348214rem + 1.714286vi, 3.0625rem);
  --ds-screen-text-font-size-heading-4xl: clamp(2rem, 1.445153rem + 2.367347vi, 3.8125rem);
  --ds-screen-text-font-size-heading-5xl: clamp(2.25rem, 1.484694rem + 3.265306vi, 4.75rem);
  --ds-screen-text-font-size-heading-6xl: clamp(2.5rem, 1.447704rem + 4.489796vi, 5.9375rem);
  --ds-screen-text-font-size-heading-lg: clamp(1.25rem, 1.154337rem + 0.408163vi, 1.5625rem);
  --ds-screen-text-font-size-heading-md: clamp(1.125rem, 1.086735rem + 0.163265vi, 1.25rem);
  --ds-screen-text-font-size-heading-sm: 1rem;
  --ds-screen-text-font-size-heading-xl: clamp(1.375rem, 1.202806rem + 0.734694vi, 1.9375rem);
  --ds-screen-text-font-size-label-lg: 1.125rem;
  --ds-screen-text-font-size-label-md: 1rem;
  --ds-screen-text-font-size-label-sm: 0.875rem;
  --ds-screen-text-font-size-label-xs: 0.75rem;
  --ds-screen-text-letter-spacing-body-lg: 0; /* 0 */
  --ds-screen-text-letter-spacing-body-md: 0; /* 0 */
  --ds-screen-text-letter-spacing-body-sm: 0.01em; /* 0.01em */
  --ds-screen-text-letter-spacing-body-xs: 0.01em; /* 0.01em */
  --ds-screen-text-letter-spacing-display-lg: -0.02em; /* -0.02em */
  --ds-screen-text-letter-spacing-display-md: -0.015em; /* -0.015em */
  --ds-screen-text-letter-spacing-display-sm: -0.02em; /* -0.02em */
  --ds-screen-text-letter-spacing-heading-2xl: 0; /* 0 */
  --ds-screen-text-letter-spacing-heading-3xl: 0; /* 0 */
  --ds-screen-text-letter-spacing-heading-4xl: 0; /* 0 */
  --ds-screen-text-letter-spacing-heading-5xl: 0; /* 0 */
  --ds-screen-text-letter-spacing-heading-6xl: -0.01em; /* -0.01em */
  --ds-screen-text-letter-spacing-heading-lg: 0; /* 0 */
  --ds-screen-text-letter-spacing-heading-md: 0; /* 0 */
  --ds-screen-text-letter-spacing-heading-sm: 0; /* 0 */
  --ds-screen-text-letter-spacing-heading-xl: 0; /* 0 */
  --ds-screen-text-letter-spacing-label-lg: 0; /* 0 */
  --ds-screen-text-letter-spacing-label-md: 0; /* 0 */
  --ds-screen-text-letter-spacing-label-sm: 0.01em; /* 0.01em */
  --ds-screen-text-letter-spacing-label-xs: 0.01em; /* 0.01em */
  --ds-screen-text-line-height-body-lg: 1.5; /* 1.5 */
  --ds-screen-text-line-height-body-md: 1.5; /* 1.5 */
  --ds-screen-text-line-height-body-sm: 1.62; /* 1.62 */
  --ds-screen-text-line-height-body-xs: 1.75; /* 1.75 */
  --ds-screen-text-line-height-display-lg: 1.15; /* 1.15 */
  --ds-screen-text-line-height-display-md: 1.15; /* 1.15 */
  --ds-screen-text-line-height-display-sm: 1.15; /* 1.15 */
  --ds-screen-text-line-height-heading-2xl: 1.35; /* 1.35 */
  --ds-screen-text-line-height-heading-3xl: 1.35; /* 1.35 */
  --ds-screen-text-line-height-heading-4xl: 1.15; /* 1.15 */
  --ds-screen-text-line-height-heading-5xl: 1.15; /* 1.15 */
  --ds-screen-text-line-height-heading-6xl: 1.15; /* 1.15 */
  --ds-screen-text-line-height-heading-lg: 1.35; /* 1.35 */
  --ds-screen-text-line-height-heading-md: 1.5; /* 1.5 */
  --ds-screen-text-line-height-heading-sm: 1.5; /* 1.5 */
  --ds-screen-text-line-height-heading-xl: 1.35; /* 1.35 */
  --ds-screen-text-line-height-label-lg: 1.5; /* 1.5 */
  --ds-screen-text-line-height-label-md: 1.5; /* 1.5 */
  --ds-screen-text-line-height-label-sm: 1.5; /* 1.5 */
  --ds-screen-text-line-height-label-xs: 1.75; /* 1.75 */
  --ds-screen-text-font-weight-bold: 700; /* 700 */
  --ds-screen-text-font-weight-medium: 500; /* 500 */
  --ds-screen-text-font-weight-regular: 400; /* 400 */
  --ds-screen-device: desktop;
  --ds-screen-layout-grid-column-count: clamp(0.25rem, 0.096939rem + 0.653061vi, 0.75rem);
  --ds-screen-layout-grid-gutter: clamp(1rem, 0.846939rem + 0.653061vi, 1.5rem);
  --ds-screen-layout-grid-margin: clamp(1rem, 0.693878rem + 1.306122vi, 2rem);
  --ds-screen-spacing-fluid-100-150: clamp(0.5rem, 0.423469rem + 0.326531vi, 0.75rem);
  --ds-screen-spacing-fluid-100-300: clamp(0.5rem, 0.193878rem + 1.306122vi, 1.5rem);
  --ds-screen-spacing-fluid-150-200: clamp(0.75rem, 0.673469rem + 0.326531vi, 1rem);
  --ds-screen-spacing-fluid-200-250: clamp(1rem, 0.923469rem + 0.326531vi, 1.25rem);
  --ds-screen-spacing-fluid-250-300: clamp(1.25rem, 1.173469rem + 0.326531vi, 1.5rem);
  --ds-screen-spacing-fluid-250-400: clamp(1.25rem, 1.020408rem + 0.979592vi, 2rem);
  --ds-screen-spacing-fluid-300-400: clamp(1.5rem, 1.346939rem + 0.653061vi, 2rem);
  --ds-screen-spacing-fluid-300-500: clamp(1.5rem, 1.193878rem + 1.306122vi, 2.5rem);
  --ds-screen-spacing-fluid-400-500: clamp(2rem, 1.846939rem + 0.653061vi, 2.5rem);
  --ds-screen-spacing-fluid-400-800: clamp(2rem, 1.387755rem + 2.612245vi, 4rem);
  --ds-screen-spacing-fluid-500-1000: clamp(2.5rem, 1.734694rem + 3.265306vi, 5rem);
  --ds-screen-viewport-height-default: clamp(41.6875rem, 36.081633rem + 23.918367vi, 60rem);
  --ds-screen-viewport-width-default: clamp(23.5rem, 0.081633rem + 99.918367vi, 100rem);
  --ds-screen-viewport-width-max: clamp(47.9375rem, 25.877551rem + 94.122449vi, 120rem);
  --ds-screen-viewport-width-min: clamp(20rem, -1.466837rem + 91.591837vi, 90.125rem);
}

/* Font face declarations for fonts from @lego assets */

@font-face {
  font-family: 'LEGO Typewell';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v6/typewell/LEGOTypewell-Black.woff2');
}

@font-face {
  font-family: 'LEGO Typewell';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v6/typewell/LEGOTypewell-BlackItalic.woff2');
}

@font-face {
  font-family: 'LEGO Typewell';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v6/typewell/LEGOTypewell-Bold.woff2');
}

@font-face {
  font-family: 'LEGO Typewell';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v6/typewell/LEGOTypewell-BoldItalic.woff2');
}

@font-face {
  font-family: 'LEGO Typewell';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v6/typewell/LEGOTypewell-Medium.woff2');
}

@font-face {
  font-family: 'LEGO Typewell';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v6/typewell/LEGOTypewell-MediumItalic.woff2');
}

@font-face {
  font-family: 'LEGO Typewell';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v6/typewell/LEGOTypewell-Italic.woff2');
}

@font-face {
  font-family: 'LEGO Typewell';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v6/typewell/LEGOTypewell-Regular.woff2');
}

@font-face {
  font-family: 'LEGO Typewell';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v6/typewell/LEGOTypewell-Light.woff2');
}

@font-face {
  font-family: 'LEGO Typewell';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v6/typewell/LEGOTypewell-LightItalic.woff2');
}

/* Font face declarations for fonts from @lego assets */

@font-face {
  font-family: 'Cera Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v3/cera-pro/CeraPro-Light.woff2');
}

@font-face {
  font-family: 'Cera Pro';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v3/cera-pro/CeraPro-MediumItalic.woff2');
}

@font-face {
  font-family: 'Cera Pro';
  font-style: italic;
  font-weight: normal;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v3/cera-pro/CeraPro-RegularItalic.woff2');
}

@font-face {
  font-family: 'Cera Pro';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v3/cera-pro/CeraPro-BlackItalic.woff2');
}

@font-face {
  font-family: 'Cera Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v3/cera-pro/CeraPro-Medium.woff2');
}

@font-face {
  font-family: 'Cera Pro';
  font-style: italic;
  font-weight: bold;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v3/cera-pro/CeraPro-BoldItalic.woff2');
}

@font-face {
  font-family: 'Cera Pro';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v3/cera-pro/CeraPro-ThinItalic.woff2');
}

@font-face {
  font-family: 'Cera Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v3/cera-pro/CeraPro-LightItalic.woff2');
}

@font-face {
  font-family: 'Cera Pro';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v3/cera-pro/CeraPro-Black.woff2');
}

@font-face {
  font-family: 'Cera Pro';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v3/cera-pro/CeraPro-Bold.woff2');
}

@font-face {
  font-family: 'Cera Pro';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v3/cera-pro/CeraPro-Regular.woff2');
}

@font-face {
  font-family: 'Cera Pro';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('https://assets.lego.com/fonts/v3/cera-pro/CeraPro-Thin.woff2');
}

/* Font face declarations for fonts from @lego assets */

@font-face {
  font-family: 'Noto Sans SC';
  src: url('https://assets.lego.com/fonts/v3/noto-sans/NotoSansSC-Bold.woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('https://assets.lego.com/fonts/v3/noto-sans/NotoSansSC-Medium.woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('https://assets.lego.com/fonts/v3/noto-sans/NotoSansSC-Regular.woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('https://assets.lego.com/fonts/v3/noto-sans/NotoSansJP-Bold.woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('https://assets.lego.com/fonts/v3/noto-sans/NotoSansJP-Medium.woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('https://assets.lego.com/fonts/v3/noto-sans/NotoSansJP-Regular.woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans KR';
  src: url('https://assets.lego.com/fonts/v3/noto-sans/NotoSansKR-Bold.woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans KR';
  src: url('https://assets.lego.com/fonts/v3/noto-sans/NotoSansKR-Medium.woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans KR';
  src: url('https://assets.lego.com/fonts/v3/noto-sans/NotoSansKR-Regular.woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.connect-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.label-xs-regular{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:400;font-size:var(--ds-screen-text-font-size-label-xs);line-height:var(--ds-screen-text-line-height-label-xs);letter-spacing:var(--ds-screen-text-letter-spacing-label-xs)}.label-xs-medium{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:500;font-size:var(--ds-screen-text-font-size-label-xs);line-height:var(--ds-screen-text-line-height-label-xs);letter-spacing:var(--ds-screen-text-letter-spacing-label-xs)}.label-xs-bold{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-label-xs);line-height:var(--ds-screen-text-line-height-label-xs);letter-spacing:var(--ds-screen-text-letter-spacing-label-xs)}.label-sm-regular{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:400;font-size:var(--ds-screen-text-font-size-label-sm);line-height:var(--ds-screen-text-line-height-label-sm);letter-spacing:var(--ds-screen-text-letter-spacing-label-sm)}.label-sm-medium{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:500;font-size:var(--ds-screen-text-font-size-label-sm);line-height:var(--ds-screen-text-line-height-label-sm);letter-spacing:var(--ds-screen-text-letter-spacing-label-sm)}.label-sm-bold{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-label-sm);line-height:var(--ds-screen-text-line-height-label-sm);letter-spacing:var(--ds-screen-text-letter-spacing-label-sm)}.label-md-regular{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:400;font-size:var(--ds-screen-text-font-size-label-md);line-height:var(--ds-screen-text-line-height-label-md);letter-spacing:var(--ds-screen-text-letter-spacing-label-md)}.label-md-medium{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:500;font-size:var(--ds-screen-text-font-size-label-md);line-height:var(--ds-screen-text-line-height-label-md);letter-spacing:var(--ds-screen-text-letter-spacing-label-md)}.label-md-bold{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-label-md);line-height:var(--ds-screen-text-line-height-label-md);letter-spacing:var(--ds-screen-text-letter-spacing-label-md)}.label-lg-regular{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:400;font-size:var(--ds-screen-text-font-size-label-lg);line-height:var(--ds-screen-text-line-height-label-lg);letter-spacing:var(--ds-screen-text-letter-spacing-label-lg)}.label-lg-medium{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:500;font-size:var(--ds-screen-text-font-size-label-lg);line-height:var(--ds-screen-text-line-height-label-lg);letter-spacing:var(--ds-screen-text-letter-spacing-label-lg)}.label-lg-bold{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-label-lg);line-height:var(--ds-screen-text-line-height-label-lg);letter-spacing:var(--ds-screen-text-letter-spacing-label-lg)}.body-xs-regular{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:400;font-size:var(--ds-screen-text-font-size-body-xs);line-height:var(--ds-screen-text-line-height-body-xs);letter-spacing:var(--ds-screen-text-letter-spacing-body-xs)}.body-xs-medium{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:500;font-size:var(--ds-screen-text-font-size-body-xs);line-height:var(--ds-screen-text-line-height-body-xs);letter-spacing:var(--ds-screen-text-letter-spacing-body-xs)}.body-xs-bold{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-body-xs);line-height:var(--ds-screen-text-line-height-body-xs);letter-spacing:var(--ds-screen-text-letter-spacing-body-xs)}.body-sm-regular{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:400;font-size:var(--ds-screen-text-font-size-body-sm);line-height:var(--ds-screen-text-line-height-body-sm);letter-spacing:var(--ds-screen-text-letter-spacing-body-sm)}.body-sm-medium{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:500;font-size:var(--ds-screen-text-font-size-body-sm);line-height:var(--ds-screen-text-line-height-body-sm);letter-spacing:var(--ds-screen-text-letter-spacing-body-sm)}.body-sm-bold{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-body-sm);line-height:var(--ds-screen-text-line-height-body-sm);letter-spacing:var(--ds-screen-text-letter-spacing-body-sm)}.body-md-regular{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:400;font-size:var(--ds-screen-text-font-size-body-md);line-height:var(--ds-screen-text-line-height-body-md);letter-spacing:var(--ds-screen-text-letter-spacing-body-md)}.body-md-medium{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:500;font-size:var(--ds-screen-text-font-size-body-md);line-height:var(--ds-screen-text-line-height-body-md);letter-spacing:var(--ds-screen-text-letter-spacing-body-md)}.body-md-bold{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-body-md);line-height:var(--ds-screen-text-line-height-body-md);letter-spacing:var(--ds-screen-text-letter-spacing-body-md)}.body-lg-regular{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:400;font-size:var(--ds-screen-text-font-size-body-lg);line-height:var(--ds-screen-text-line-height-body-lg);letter-spacing:var(--ds-screen-text-letter-spacing-body-lg)}.body-lg-medium{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:500;font-size:var(--ds-screen-text-font-size-body-lg);line-height:var(--ds-screen-text-line-height-body-lg);letter-spacing:var(--ds-screen-text-letter-spacing-body-lg)}.body-lg-bold{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-body-lg);line-height:var(--ds-screen-text-line-height-body-lg);letter-spacing:var(--ds-screen-text-letter-spacing-body-lg)}.heading-sm{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-heading-sm);line-height:var(--ds-screen-text-line-height-heading-sm);letter-spacing:var(--ds-screen-text-letter-spacing-heading-sm)}.heading-md{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-heading-md);line-height:var(--ds-screen-text-line-height-heading-md);letter-spacing:var(--ds-screen-text-letter-spacing-heading-md)}.heading-lg{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-heading-lg);line-height:var(--ds-screen-text-line-height-heading-lg);letter-spacing:var(--ds-screen-text-letter-spacing-heading-lg)}.heading-xl{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-heading-xl);line-height:var(--ds-screen-text-line-height-heading-xl);letter-spacing:var(--ds-screen-text-letter-spacing-heading-xl)}.heading-2xl{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-heading-2xl);line-height:var(--ds-screen-text-line-height-heading-2xl);letter-spacing:var(--ds-screen-text-letter-spacing-heading-2xl)}.heading-3xl{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-heading-3xl);line-height:var(--ds-screen-text-line-height-heading-3xl);letter-spacing:var(--ds-screen-text-letter-spacing-heading-3xl)}.heading-4xl{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-heading-4xl);line-height:var(--ds-screen-text-line-height-heading-4xl);letter-spacing:var(--ds-screen-text-letter-spacing-heading-4xl)}.heading-5xl{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-heading-5xl);line-height:var(--ds-screen-text-line-height-heading-5xl);letter-spacing:var(--ds-screen-text-letter-spacing-heading-5xl)}.heading-6xl{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-heading-6xl);line-height:var(--ds-screen-text-line-height-heading-6xl);letter-spacing:var(--ds-screen-text-letter-spacing-heading-6xl)}.display-sm{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-display-sm);line-height:var(--ds-screen-text-line-height-display-sm);letter-spacing:var(--ds-screen-text-letter-spacing-display-sm)}.display-md{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-display-md);line-height:var(--ds-screen-text-line-height-display-md);letter-spacing:var(--ds-screen-text-letter-spacing-display-md)}.display-lg{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--ds-font-font-family);font-weight:700;font-size:var(--ds-screen-text-font-size-display-lg);line-height:var(--ds-screen-text-line-height-display-lg);letter-spacing:var(--ds-screen-text-letter-spacing-display-lg)}.elevation-xs{box-shadow:var(--ds-misc-elevation-xs-key-x) var(--ds-misc-elevation-xs-key-y) var(--ds-misc-elevation-xs-key-blur) var(--ds-misc-elevation-xs-key-spread) var(--ds-misc-elevation-color-key),var(--ds-misc-elevation-xs-ambient-x) var(--ds-misc-elevation-xs-ambient-y) var(--ds-misc-elevation-xs-ambient-blur) var(--ds-misc-elevation-xs-ambient-spread) var(--ds-misc-elevation-color-ambient)}.elevation-sm{box-shadow:var(--ds-misc-elevation-sm-key-x) var(--ds-misc-elevation-sm-key-y) var(--ds-misc-elevation-sm-key-blur) var(--ds-misc-elevation-sm-key-spread) var(--ds-misc-elevation-color-key),var(--ds-misc-elevation-sm-ambient-x) var(--ds-misc-elevation-sm-ambient-y) var(--ds-misc-elevation-sm-ambient-blur) var(--ds-misc-elevation-sm-ambient-spread) var(--ds-misc-elevation-color-ambient)}.elevation-md{box-shadow:var(--ds-misc-elevation-md-key-x) var(--ds-misc-elevation-md-key-y) var(--ds-misc-elevation-md-key-blur) var(--ds-misc-elevation-md-key-spread) var(--ds-misc-elevation-color-key),var(--ds-misc-elevation-md-ambient-x) var(--ds-misc-elevation-md-ambient-y) var(--ds-misc-elevation-md-ambient-blur) var(--ds-misc-elevation-md-ambient-spread) var(--ds-misc-elevation-color-ambient)}.elevation-lg{box-shadow:var(--ds-misc-elevation-lg-key-x) var(--ds-misc-elevation-lg-key-y) var(--ds-misc-elevation-lg-key-blur) var(--ds-misc-elevation-lg-key-spread) var(--ds-misc-elevation-color-key),var(--ds-misc-elevation-lg-ambient-x) var(--ds-misc-elevation-lg-ambient-y) var(--ds-misc-elevation-lg-ambient-blur) var(--ds-misc-elevation-lg-ambient-spread) var(--ds-misc-elevation-color-ambient)}.elevation-xl{box-shadow:var(--ds-misc-elevation-xl-key-x) var(--ds-misc-elevation-xl-key-y) var(--ds-misc-elevation-xl-key-blur) var(--ds-misc-elevation-xl-key-spread) var(--ds-misc-elevation-color-key),var(--ds-misc-elevation-xl-ambient-x) var(--ds-misc-elevation-xl-ambient-y) var(--ds-misc-elevation-xl-ambient-blur) var(--ds-misc-elevation-xl-ambient-spread) var(--ds-misc-elevation-color-ambient)}
.connect-icon{display:inline-block;background-color:currentColor;vertical-align:middle;mask-image:var(--connect-icon-mask-image);mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-image:var(--connect-icon-mask-image);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}.connect-icon--x-small{height:var(--ds-layout-size-200);width:var(--ds-layout-size-200)}.connect-icon--small{height:var(--ds-layout-size-250);width:var(--ds-layout-size-250)}.connect-icon--medium{height:var(--ds-layout-size-300);width:var(--ds-layout-size-300)}.connect-icon--large{height:var(--ds-layout-size-400);width:var(--ds-layout-size-400)}.connect-icon--x-large{height:var(--ds-layout-size-600);width:var(--ds-layout-size-600)}
.connect-visually-hidden:not(:focus):not(:active):not(:focus-within){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
.connect-progress-circle{position:relative;display:flex;align-items:center;justify-content:center;width:var(--ds-layout-size-500);height:var(--ds-layout-size-500);flex-shrink:0}.connect-progress-circle__content{transform:scale(.36);color:var(--ds-color-interactive-primary-enabled)}.connect-progress-circle__icon{width:var(--ds-layout-size-500);height:var(--ds-layout-size-500)}.connect-progress-circle--small{width:var(--ds-layout-size-300);height:var(--ds-layout-size-300)}.connect-progress-circle--small .connect-progress-circle__content{display:none}.connect-progress-circle--large{width:var(--ds-layout-size-800);height:var(--ds-layout-size-800)}.connect-progress-circle--large .connect-progress-circle__content{transform:scale(.57)}.connect-progress-circle--x-large{width:var(--ds-layout-size-1400);height:var(--ds-layout-size-1400)}.connect-progress-circle--x-large .connect-progress-circle__content{transform:scale(1)}.connect-progress-circle .connect-progress-circle__background,.connect-progress-circle .connect-progress-circle__indicator,.connect-progress-circle .connect-progress-circle__trail-segment{stroke:var(--ds-color-interactive-primary-enabled)}.connect-progress-circle--neutral .connect-progress-circle__background,.connect-progress-circle--neutral .connect-progress-circle__indicator,.connect-progress-circle--neutral .connect-progress-circle__trail-segment{stroke:var(--ds-color-support-neutral-default)}.connect-progress-circle--neutral .connect-progress-circle__content{color:var(--ds-color-support-neutral-default)}.connect-progress-circle--static-light .connect-progress-circle__background,.connect-progress-circle--static-light .connect-progress-circle__indicator,.connect-progress-circle--static-light .connect-progress-circle__trail-segment{stroke:var(--ds-color-interactive-light-enabled)}.connect-progress-circle--static-light .connect-progress-circle__content{color:var(--ds-color-interactive-light-enabled)}.connect-progress-circle--static-dark .connect-progress-circle__background,.connect-progress-circle--static-dark .connect-progress-circle__indicator,.connect-progress-circle--static-dark .connect-progress-circle__trail-segment{stroke:var(--ds-color-content-dark)}.connect-progress-circle--static-dark .connect-progress-circle__content{color:var(--ds-color-content-dark)}.connect-progress-circle--colorful{--connect-progress-circle-color-1: var(--ds-color-support-brand-muted);--connect-progress-circle-color-2: var(--ds-color-support-positive-muted);--connect-progress-circle-color-3: var(--ds-color-support-informative-muted);--connect-progress-circle-color-4: var(--ds-color-content-link-visited-light)}.connect-progress-circle--colorful .connect-progress-circle__background{stroke:var(--ds-color-interactive-neutral-subtle-selected)}.connect-progress-circle__bar{width:100%;height:100%;transform:rotate(-90deg);transform-origin:50% 50%;position:absolute;top:0;left:0}.connect-progress-circle .connect-progress-circle__background{opacity:.15}.connect-progress-circle--colorful .connect-progress-circle__background{opacity:1}.connect-progress-circle .connect-progress-circle__indicator{transition:stroke-dashoffset .24s cubic-bezier(.3,0,.3,1),stroke .24s cubic-bezier(.3,0,.3,1)}.connect-progress-circle--indeterminate .connect-progress-circle__indicator,.connect-progress-circle--indeterminate .connect-progress-circle__trail-segment{transform-origin:center;transform-box:fill-box;animation:connectProgressCircleRotateStroke 1.2s linear infinite}.connect-progress-circle--indeterminate .connect-progress-circle__trail-segment--1{animation-delay:.16s}.connect-progress-circle--indeterminate .connect-progress-circle__trail-segment--2{animation-delay:.12s}.connect-progress-circle--indeterminate .connect-progress-circle__trail-segment--3{animation-delay:80ms}.connect-progress-circle--indeterminate .connect-progress-circle__trail-segment--4{animation-delay:40ms}.connect-progress-circle--indeterminate.connect-progress-circle--colorful .connect-progress-circle__indicator{animation:connectProgressCircleRotateStroke 1.2s linear infinite,connectProgressCircleColorCycle 1.2s linear infinite}.connect-progress-circle--indeterminate.connect-progress-circle--colorful .connect-progress-circle__trail-segment{animation:connectProgressCircleRotateStroke 1.2s linear infinite,connectProgressCircleColorCycle 1.2s linear infinite;transition:stroke .24s cubic-bezier(.3,0,.3,1)}.connect-progress-circle--indeterminate.connect-progress-circle--colorful .connect-progress-circle__trail-segment--1{animation-delay:.16s,0ms}.connect-progress-circle--indeterminate.connect-progress-circle--colorful .connect-progress-circle__trail-segment--2{animation-delay:.12s,0ms}.connect-progress-circle--indeterminate.connect-progress-circle--colorful .connect-progress-circle__trail-segment--3{animation-delay:80ms,0ms}.connect-progress-circle--indeterminate.connect-progress-circle--colorful .connect-progress-circle__trail-segment--4{animation-delay:40ms,0ms}@media(prefers-reduced-motion:reduce){.connect-progress-circle .connect-progress-circle__bar .connect-progress-circle__indicator{transition-duration:0s;animation:none}}@media(prefers-reduced-motion:reduce){.connect-progress-circle--indeterminate .connect-progress-circle__bar .connect-progress-circle__trail-segment{animation:none}}@keyframes connectProgressCircleRotateStroke{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes connectProgressCircleColorCycle{0%{stroke:var(--connect-progress-circle-color-1)}15%{stroke:var(--connect-progress-circle-color-1)}25%{stroke:var(--connect-progress-circle-color-2)}40%{stroke:var(--connect-progress-circle-color-2)}50%{stroke:var(--connect-progress-circle-color-3)}60%{stroke:var(--connect-progress-circle-color-3)}75%{stroke:var(--connect-progress-circle-color-4)}90%{stroke:var(--connect-progress-circle-color-4)}to{stroke:var(--connect-progress-circle-color-1)}}
.connect-button{display:inline-flex;align-items:center;justify-content:center;border-width:0;width:fit-content;height:fit-content;text-decoration:none;transition:background-color .15s ease-in-out,color .15s ease-in-out,border-color .15s ease-in-out}.connect-button span{display:flex;align-items:center;justify-content:center}.connect-button:focus-visible:not([aria-disabled=true]){outline:var(--ds-layout-stroke-width-25) solid var(--ds-color-support-focused-muted);outline-offset:.0625rem}.connect-button:hover:not([aria-disabled=true]){cursor:pointer}.connect-button[aria-disabled=true]{cursor:not-allowed}.connect-button--full-width{width:100%;min-width:unset;overflow:hidden}.connect-button--full-width span{overflow:hidden}.connect-button--small{gap:var(--ds-layout-spacing-50);min-height:var(--ds-layout-size-400);min-width:var(--ds-layout-size-400);border-radius:var(--ds-layout-radius-pill);padding:calc(var(--ds-layout-spacing-25) - var(--ds-layout-stroke-width-25)) calc(var(--ds-layout-spacing-150) - var(--ds-layout-stroke-width-25))}.connect-button--medium{gap:var(--ds-layout-spacing-100);min-height:var(--ds-layout-size-500);min-width:var(--ds-layout-size-500);border-radius:var(--ds-layout-radius-pill);padding:calc(var(--ds-layout-spacing-50) - var(--ds-layout-stroke-width-25)) calc(var(--ds-layout-spacing-250) - var(--ds-layout-stroke-width-25))}.connect-button--large{gap:var(--ds-layout-spacing-150);min-height:var(--ds-layout-size-600);min-width:var(--ds-layout-size-600);border-radius:var(--ds-layout-radius-pill);padding:calc(var(--ds-layout-spacing-100) - var(--ds-layout-stroke-width-25)) calc(var(--ds-layout-spacing-300) - var(--ds-layout-stroke-width-25))}.connect-button--x-large{gap:var(--ds-layout-spacing-150);min-height:var(--ds-layout-size-700);min-width:var(--ds-layout-size-700);border-radius:var(--ds-layout-radius-pill);padding:calc(var(--ds-layout-spacing-150) - var(--ds-layout-stroke-width-25)) calc(var(--ds-layout-spacing-300) - var(--ds-layout-stroke-width-25))}.connect-button--small .connect-button__icon,.connect-button--small .connect-progress-circle{height:var(--ds-layout-size-200);width:var(--ds-layout-size-200)}.connect-button--medium .connect-button__icon,.connect-button--medium .connect-progress-circle{height:var(--ds-layout-size-250);width:var(--ds-layout-size-250)}.connect-button--large .connect-button__icon,.connect-button--large .connect-progress-circle{height:var(--ds-layout-size-300);width:var(--ds-layout-size-300)}.connect-button--x-large .connect-button__icon,.connect-button--x-large .connect-progress-circle{height:var(--ds-layout-size-400);width:var(--ds-layout-size-400)}.connect-button--icon-only{aspect-ratio:1 / 1;justify-content:center}.connect-button--icon-after{flex-direction:row-reverse}.connect-button--small.connect-button--icon-only{padding:calc(var(--ds-layout-spacing-25) - var(--ds-layout-stroke-width-25))}.connect-button--medium.connect-button--icon-only{padding:calc(var(--ds-layout-spacing-50) - var(--ds-layout-stroke-width-25))}.connect-button--large.connect-button--icon-only{padding:calc(var(--ds-layout-spacing-100) - var(--ds-layout-stroke-width-25))}.connect-button--x-large.connect-button--icon-only{padding:calc(var(--ds-layout-spacing-150) - var(--ds-layout-stroke-width-25))}.connect-button--small.connect-button--icon-only .connect-button__icon{height:var(--ds-layout-size-250);width:var(--ds-layout-size-250)}.connect-button--medium.connect-button--icon-only .connect-button__icon{height:var(--ds-layout-size-300);width:var(--ds-layout-size-300)}.connect-button--large.connect-button--icon-only .connect-button__icon{height:var(--ds-layout-size-350);width:var(--ds-layout-size-350)}.connect-button--x-large.connect-button--icon-only .connect-button__icon{height:var(--ds-layout-size-400);width:var(--ds-layout-size-400)}.connect-button--primary{color:var(--ds-color-content-on-primary);background-color:var(--ds-color-interactive-primary-enabled)}.connect-button--primary:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-primary-hovered)}.connect-button--primary:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-primary-pressed)}.connect-button--primary[aria-disabled=true]{background-color:var(--ds-color-interactive-primary-enabled);opacity:var(--ds-misc-opacity-50)}.connect-button--neutral{color:var(--ds-color-content-default);background-color:var(--ds-color-interactive-neutral-enabled)}.connect-button--neutral:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-neutral-hovered)}.connect-button--neutral:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-neutral-pressed)}.connect-button--neutral[aria-disabled=true]{background-color:var(--ds-color-interactive-neutral-enabled);opacity:var(--ds-misc-opacity-50)}.connect-button--inverse{color:var(--ds-color-content-default);background-color:var(--ds-color-interactive-inverse-enabled)}.connect-button--inverse:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-inverse-hovered)}.connect-button--inverse:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-inverse-pressed)}.connect-button--inverse[aria-disabled=true]{background-color:var(--ds-color-interactive-inverse-enabled);opacity:var(--ds-misc-opacity-50)}.connect-button--accent{color:var(--ds-color-content-on-accent);background-color:var(--ds-color-interactive-accent-enabled)}.connect-button--accent:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-accent-hovered)}.connect-button--accent:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-accent-pressed)}.connect-button--accent[aria-disabled=true]{background-color:var(--ds-color-interactive-accent-enabled);opacity:var(--ds-misc-opacity-50)}.connect-button--negative{color:var(--ds-color-content-light);background-color:var(--ds-color-interactive-negative-enabled)}.connect-button--negative:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-negative-hovered)}.connect-button--negative:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-negative-pressed)}.connect-button--negative[aria-disabled=true]{background-color:var(--ds-color-interactive-negative-enabled);opacity:var(--ds-misc-opacity-50)}.connect-button--static-dark{color:var(--ds-color-content-light);background-color:var(--ds-color-interactive-dark-enabled)}.connect-button--static-dark:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-dark-hovered)}.connect-button--static-dark:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-dark-pressed)}.connect-button--static-dark[aria-disabled=true]{background-color:var(--ds-color-interactive-dark-enabled);opacity:var(--ds-misc-opacity-50)}.connect-button--static-light{color:var(--ds-color-content-dark);background-color:var(--ds-color-interactive-light-enabled)}.connect-button--static-light:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-light-hovered)}.connect-button--static-light:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-light-pressed)}.connect-button--static-light[aria-disabled=true]{background-color:var(--ds-color-interactive-light-enabled);opacity:var(--ds-misc-opacity-50)}.connect-button--outline{background-color:transparent;border-style:solid;border-width:var(--ds-layout-stroke-width-25);color:var(--ds-color-content-default)}.connect-button--primary.connect-button--outline{border-color:var(--ds-color-interactive-primary-enabled)}.connect-button--primary.connect-button--outline:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-primary-subtle-hovered);border-color:var(--ds-color-interactive-primary-enabled)}.connect-button--primary.connect-button--outline:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-primary-subtle-pressed);border-color:var(--ds-color-interactive-primary-enabled)}.connect-button--neutral.connect-button--outline{color:var(--ds-color-content-muted);border-color:var(--ds-color-interactive-neutral-enabled)}.connect-button--neutral.connect-button--outline:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-neutral-subtle-hovered);border-color:var(--ds-color-interactive-neutral-enabled)}.connect-button--neutral.connect-button--outline:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-neutral-subtle-pressed);border-color:var(--ds-color-interactive-neutral-enabled)}.connect-button--inverse.connect-button--outline{border-color:var(--ds-color-interactive-inverse-enabled)}.connect-button--inverse.connect-button--outline:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-inverse-subtle-hovered);border-color:var(--ds-color-interactive-inverse-enabled)}.connect-button--inverse.connect-button--outline:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-inverse-subtle-pressed);border-color:var(--ds-color-interactive-inverse-enabled)}.connect-button--accent.connect-button--outline{border-color:var(--ds-color-interactive-accent-enabled)}.connect-button--accent.connect-button--outline:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-accent-subtle-hovered);border-color:var(--ds-color-interactive-accent-enabled)}.connect-button--accent.connect-button--outline:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-accent-subtle-pressed);border-color:var(--ds-color-interactive-accent-enabled)}.connect-button--negative.connect-button--outline{border-color:var(--ds-color-interactive-negative-enabled)}.connect-button--negative.connect-button--outline:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-negative-subtle-hovered);border-color:var(--ds-color-interactive-negative-enabled)}.connect-button--negative.connect-button--outline:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-negative-subtle-pressed);border-color:var(--ds-color-interactive-negative-enabled)}.connect-button--static-dark.connect-button--outline{color:var(--ds-color-content-dark);border-color:var(--ds-color-interactive-dark-enabled)}.connect-button--static-dark.connect-button--outline:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-dark-subtle-hovered);border-color:var(--ds-color-interactive-dark-enabled)}.connect-button--static-dark.connect-button--outline:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-dark-subtle-pressed);border-color:var(--ds-color-interactive-dark-enabled)}.connect-button--static-light.connect-button--outline{color:var(--ds-color-content-light);border-color:var(--ds-color-interactive-light-enabled)}.connect-button--static-light.connect-button--outline:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-light-subtle-hovered);border-color:var(--ds-color-interactive-light-enabled)}.connect-button--static-light.connect-button--outline:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-light-subtle-pressed);border-color:var(--ds-color-interactive-light-enabled)}.connect-button--ghost{background-color:transparent;border-style:solid;border-width:var(--ds-layout-stroke-width-25);border-color:transparent}.connect-button--primary.connect-button--ghost{color:var(--ds-color-content-primary)}.connect-button--primary.connect-button--ghost:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-primary-subtle-hovered)}.connect-button--primary.connect-button--ghost:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-primary-subtle-pressed)}.connect-button--neutral.connect-button--ghost{color:var(--ds-color-content-muted)}.connect-button--neutral.connect-button--ghost:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-neutral-subtle-hovered)}.connect-button--neutral.connect-button--ghost:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-neutral-subtle-pressed)}.connect-button--accent.connect-button--ghost{color:var(--ds-color-content-accent)}.connect-button--accent.connect-button--ghost:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-accent-subtle-hovered)}.connect-button--accent.connect-button--ghost:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-accent-subtle-pressed)}.connect-button--negative.connect-button--ghost{color:var(--ds-color-content-negative)}.connect-button--negative.connect-button--ghost:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-negative-subtle-hovered)}.connect-button--negative.connect-button--ghost:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-negative-subtle-pressed)}.connect-button--static-dark.connect-button--ghost{color:var(--ds-color-content-dark)}.connect-button--static-dark.connect-button--ghost:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-dark-subtle-hovered)}.connect-button--static-dark.connect-button--ghost:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-dark-subtle-pressed)}.connect-button--static-light.connect-button--ghost{color:var(--ds-color-content-light)}.connect-button--static-light.connect-button--ghost:hover:not([aria-disabled=true]){background-color:var(--ds-color-interactive-light-subtle-hovered)}.connect-button--static-light.connect-button--ghost:active:not([aria-disabled=true]){background-color:var(--ds-color-interactive-light-subtle-pressed)}.connect-button--primary.connect-button--outline[aria-disabled=true]{cursor:not-allowed;background-color:initial;opacity:var(--ds-misc-opacity-50);color:var(--ds-color-content-default)}.connect-button--neutral.connect-button--outline[aria-disabled=true]{cursor:not-allowed;background-color:initial;opacity:var(--ds-misc-opacity-50);color:var(--ds-color-content-muted)}.connect-button--inverse.connect-button--outline[aria-disabled=true],.connect-button--accent.connect-button--outline[aria-disabled=true],.connect-button--negative.connect-button--outline[aria-disabled=true]{cursor:not-allowed;background-color:initial;opacity:var(--ds-misc-opacity-50);color:var(--ds-color-content-default)}.connect-button--static-dark.connect-button--outline[aria-disabled=true]{cursor:not-allowed;background-color:initial;opacity:var(--ds-misc-opacity-50);color:var(--ds-color-content-dark)}.connect-button--static-light.connect-button--outline[aria-disabled=true]{cursor:not-allowed;background-color:initial;opacity:var(--ds-misc-opacity-50);color:var(--ds-color-content-light)}.connect-button--primary.connect-button--ghost[aria-disabled=true]{cursor:not-allowed;background-color:initial;opacity:var(--ds-misc-opacity-50);color:var(--ds-color-content-primary)}.connect-button--neutral.connect-button--ghost[aria-disabled=true]{cursor:not-allowed;background-color:initial;opacity:var(--ds-misc-opacity-50);color:var(--ds-color-content-muted)}.connect-button--inverse.connect-button--ghost[aria-disabled=true]{cursor:not-allowed;background-color:initial;opacity:var(--ds-misc-opacity-50);color:var(--ds-color-content-dark)}.connect-button--accent.connect-button--ghost[aria-disabled=true]{cursor:not-allowed;background-color:initial;opacity:var(--ds-misc-opacity-50);color:var(--ds-color-content-accent)}.connect-button--negative.connect-button--ghost[aria-disabled=true]{cursor:not-allowed;background-color:initial;opacity:var(--ds-misc-opacity-50);color:var(--ds-color-content-negative)}.connect-button--static-dark.connect-button--ghost[aria-disabled=true],.connect-button--static-light.connect-button--ghost[aria-disabled=true]{cursor:not-allowed;background-color:initial;opacity:var(--ds-misc-opacity-50);color:var(--ds-color-content-light)}.connect-button.connect-button--loading{opacity:.8}.connect-button.connect-button--spinner-only span{opacity:0}.connect-button.connect-button--spinner-only .connect-progress-circle{position:absolute}
/* Execution Detail Modal Overlay */
.execution-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.execution-detail-modal {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  max-width: 1200px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.execution-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem;
  border-bottom: 2px solid #dee2e6;
  background-color: #f8f9fa;
}

.execution-detail-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #212529;
}

.execution-arn {
  margin: 0.5rem 0 0 0;
  font-size: 0.875rem;
  font-family: monospace;
  color: #6c757d;
  word-break: break-all;
}

.close-button-x {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6c757d;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}

.close-button-x:hover {
  background-color: #e9ecef;
  color: #212529;
}

/* Content Area */
.execution-detail-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.execution-detail-content section {
  margin-bottom: 2rem;
}

.execution-detail-content section:last-child {
  margin-bottom: 0;
}

.execution-detail-content h3 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #212529;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 0.5rem;
}

/* Execution Summary */
.execution-summary {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.summary-item label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-item span {
  font-size: 1rem;
  color: #212529;
}

.execution-detail-status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: rgba(0, 0, 0, 0.05);
}

/* Steps Section */
.execution-detail-steps-section {
  margin-top: 2rem;
}

.execution-detail-no-steps {
  text-align: center;
  padding: 2rem;
  color: #6c757d;
  font-style: italic;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.execution-detail-steps-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.execution-detail-step-card {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.execution-detail-step-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.execution-detail-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.execution-detail-step-name-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.execution-detail-step-name-status h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
}

.execution-detail-step-timing {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.execution-detail-step-duration {
  font-size: 0.875rem;
  color: #6c757d;
  font-weight: 500;
}

.execution-detail-step-details {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.execution-detail-step-timestamps {
  display: flex;
  gap: 2rem;
  font-size: 0.875rem;
  color: #6c757d;
}

.execution-detail-step-data {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.execution-detail-step-data label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #495057;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.execution-detail-step-error {
  background-color: #fff5f5;
  border: 1px solid #f8d7da;
  border-radius: 4px;
  padding: 1rem;
}

.execution-detail-step-error label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #dc3545;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 0.5rem;
}

.execution-detail-error-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.execution-detail-error-type {
  font-weight: 600;
  color: #dc3545;
  margin: 0;
}

.execution-detail-error-message {
  color: #721c24;
  margin: 0;
}

.execution-detail-error-cause {
  margin: 0.5rem 0 0 0;
  padding: 0.75rem;
  background-color: #f8d7da;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #721c24;
  overflow-x: auto;
}

/* JSON Output */
.execution-detail-json-output {
  margin: 0;
  padding: 1rem;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #212529;
  max-height: 300px;
  overflow-y: auto;
}

/* Execution I/O Section */
.execution-detail-execution-io {
  margin-top: 1.5rem;
}

/* Footer */
.execution-detail-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #dee2e6;
  background-color: #f8f9fa;
  display: flex;
  justify-content: flex-end;
}

.execution-detail-close-button {
  padding: 0.5rem 1.5rem;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 0.2s;
}

.execution-detail-close-button:hover {
  background-color: #5a6268;
}

/* Loading and Error States */
.execution-detail-loading,
.execution-detail-error {
  text-align: center;
  padding: 3rem;
}

.execution-detail-error h3 {
  color: #dc3545;
  margin-bottom: 1rem;
}

.execution-detail-error button {
  margin-top: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .execution-detail-overlay {
    padding: 10px;
  }

  .execution-detail-modal {
    max-height: 95vh;
  }

  .execution-detail-header {
    padding: 1rem;
  }

  .execution-detail-header h2 {
    font-size: 1.25rem;
  }

  .execution-detail-content {
    padding: 1rem;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .execution-detail-step-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .execution-detail-step-timestamps {
    flex-direction: column;
    gap: 0.5rem;
  }

  .execution-detail-json-output {
    font-size: 0.75rem;
    padding: 0.75rem;
  }
}
.execution-history-container {
  width: 100%;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin-top: 1rem;
}

.execution-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.execution-history-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #495057;
}

.execution-history-loading,
.execution-history-error {
  text-align: center;
  padding: 2rem;
  background-color: white;
  border-radius: 8px;
  margin: 1rem 0;
}

.execution-history-error h3 {
  color: #dc3545;
  margin-bottom: 1rem;
}

.execution-history-error button {
  padding: 0.5rem 1.5rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 1rem;
}

.execution-history-error button:hover {
  background-color: #0056b3;
}

.execution-history-no-executions {
  text-align: center;
  padding: 2rem;
  color: #6c757d;
  font-style: italic;
  background-color: white;
  border-radius: 8px;
}

.execution-history-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.execution-history-table thead {
  background-color: #e9ecef;
  border-bottom: 2px solid #dee2e6;
}

.execution-history-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: #495057;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.execution-history-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;
  vertical-align: middle;
  font-size: 0.9rem;
}

.execution-history-table tbody tr:hover {
  background-color: #f8f9fa;
}

.execution-history-table tbody tr.execution-history-execution-row:hover {
  background-color: #e3f2fd;
  cursor: pointer;
}

.execution-history-table tbody tr:last-child td {
  border-bottom: none;
}

.execution-history-execution-name {
  font-family: monospace;
  font-size: 0.85rem;
  color: #495057;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.execution-history-execution-status {
  font-size: 0.85rem;
}

.execution-history-status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.execution-history-execution-date {
  font-size: 0.85rem;
  color: #6c757d;
  white-space: nowrap;
}

.execution-history-execution-duration {
  font-weight: 500;
  color: #495057;
  font-size: 0.85rem;
}

.execution-history-execution-trigger {
  font-size: 0.85rem;
}

.execution-history-trigger-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background-color: #e9ecef;
  border-radius: 4px;
  color: #495057;
  font-weight: 500;
  text-transform: capitalize;
}

.execution-history-refresh-button {
  padding: 0.4rem 0.8rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background-color 0.2s;
}

.execution-history-refresh-button:hover {
  background-color: #0056b3;
}

/* Responsive design */
@media (max-width: 1024px) {
  .execution-history-table {
    font-size: 0.8rem;
  }

  .execution-history-table th,
  .execution-history-table td {
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 768px) {
  .execution-history-container {
    padding: 0.5rem;
  }

  .execution-history-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .execution-history-table {
    display: block;
    overflow-x: auto;
  }

  .execution-history-table th,
  .execution-history-table td {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
  }
}
.jobs-list-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
}

.jobs-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.jobs-list-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.jobs-list-refresh-button {
  padding: 0.5rem 1rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.jobs-list-refresh-button:hover {
  background-color: #0056b3;
}

.jobs-list-loading,
.jobs-list-error {
  text-align: center;
  padding: 3rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin: 2rem 0;
}

.jobs-list-error h3 {
  color: #dc3545;
  margin-bottom: 1rem;
}

.jobs-list-error button {
  padding: 0.5rem 1.5rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 1rem;
}

.jobs-list-error button:hover {
  background-color: #0056b3;
}

.jobs-list-no-jobs {
  text-align: center;
  padding: 2rem;
  color: #6c757d;
  font-style: italic;
}

.jobs-list-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.jobs-list-table thead {
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}

.jobs-list-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: #495057;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.jobs-list-table td {
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
  vertical-align: middle;
}

.jobs-list-table tbody tr:hover {
  background-color: #f8f9fa;
}

.jobs-list-table tbody tr.jobs-list-selected-row {
  background-color: #e3f2fd;
  border-left: 4px solid #007bff;
}

.jobs-list-table tbody tr.jobs-list-selected-row:hover {
  background-color: #d1e7fd;
}

.jobs-list-table tbody tr:last-child td {
  border-bottom: none;
}

.jobs-list-job-id {
  font-family: monospace;
  font-weight: 500;
  color: #495057;
}

.jobs-list-job-description {
  color: #212529;
}

.jobs-list-job-schedule code {
  background-color: #f8f9fa;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 0.85rem;
  color: #495057;
}

.jobs-list-no-schedule {
  color: #6c757d;
  font-style: italic;
  font-size: 0.9rem;
}

.jobs-list-last-run {
  font-size: 0.9rem;
  color: #6c757d;
}

.jobs-list-job-status {
  font-size: 0.9rem;
}

.jobs-list-status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.jobs-list-no-execution {
  color: #6c757d;
  font-style: italic;
  font-size: 0.85rem;
}

.jobs-list-job-actions {
  text-align: right;
}

.jobs-list-run-button {
  padding: 0.5rem 1rem;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.jobs-list-run-button:hover:not(:disabled) {
  background-color: #218838;
}

.jobs-list-run-button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Responsive design */
@media (max-width: 1024px) {
  .jobs-list-table {
    font-size: 0.875rem;
  }

  .jobs-list-table th,
  .jobs-list-table td {
    padding: 0.75rem 0.5rem;
  }
}

@media (max-width: 768px) {
  .jobs-list-container {
    padding: 0.5rem;
  }

  .jobs-list-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .jobs-list-table {
    font-size: 0.8rem;
  }

  .jobs-list-table th,
  .jobs-list-table td {
    padding: 0.5rem 0.25rem;
  }

  .jobs-list-run-button {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
}
.table-container {
  padding: 20px;
  max-width: 100%;
  overflow-x: auto;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.table-header h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.date-filters {
  display: flex;
  gap: 16px;
  align-items: center;
}

.date-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #333;
}

.date-filters input[type="date"] {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
  cursor: pointer;
}

.date-filters input[type="date"]:hover {
  border-color: #888;
}

.date-filters input[type="date"]:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.date-filters select {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
  cursor: pointer;
  background-color: white;
}

.date-filters select:hover {
  border-color: #888;
}

.date-filters select:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.table-info {
  color: #666;
  font-size: 0.9rem;
  margin: 0;
}

.table-wrapper {
  overflow-x: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 16px;
}

.delivery-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.delivery-table thead {
  background-color: #f8f9fa;
  position: sticky;
  top: 0;
  z-index: 10;
}

.delivery-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #dee2e6;
  white-space: nowrap;
}

.sortable-header {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-align: left;
}

.sortable-header:hover {
  color: #007bff;
}

.sortable-header:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.delivery-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #dee2e6;
}

.delivery-table tbody tr:hover {
  background-color: #f8f9fa;
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.table-pagination button {
  padding: 6px 12px;
  border: 1px solid #dee2e6;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.table-pagination button:hover:not(:disabled) {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.table-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-info {
  font-size: 0.9rem;
  color: #495057;
  margin: 0 8px;
}

.table-pagination select {
  padding: 6px 12px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-size: 0.9rem;
}

.table-loading,
.table-error {
  padding: 40px;
  text-align: center;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 20px;
}

.table-error {
  background: #fff3cd;
  border: 1px solid #ffc107;
}

.table-error button {
  margin-top: 12px;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.table-error button:hover {
  background: #0056b3;
}

@media (max-width: 768px) {
  .table-container {
    padding: 10px;
  }

  .delivery-table th,
  .delivery-table td {
    padding: 8px;
    font-size: 0.85rem;
  }

  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}