/** * 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-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-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-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-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); } @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-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-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-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-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); } } [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-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-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-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-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); } @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-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-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-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-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, 0, 0, 0.42); } } [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-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-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-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-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, 0, 0, 0.42); } /** * 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-50: 4px; --ds-layout-radius-75: 6px; --ds-layout-radius-100: 8px; --ds-layout-radius-150: 12px; --ds-layout-radius-200: 16px; --ds-layout-radius-400: 32px; --ds-layout-radius-pill: 999px; --ds-layout-radius-round: 999px; /* 50% */ --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-800: 64px; --ds-layout-spacing-1000: 80px; --ds-layout-spacing-1200: 96px; --ds-layout-spacing-1400: 112px; --ds-layout-spacing-1600: 128px; --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-50: 4px; --ds-layout-radius-75: 6px; --ds-layout-radius-100: 8px; --ds-layout-radius-150: 12px; --ds-layout-radius-200: 16px; --ds-layout-radius-400: 32px; --ds-layout-radius-pill: 999px; --ds-layout-radius-round: 999px; /* 50% */ --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-800: 64px; --ds-layout-spacing-1000: 80px; --ds-layout-spacing-1200: 96px; --ds-layout-spacing-1400: 112px; --ds-layout-spacing-1600: 128px; --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-50: 4px; --ds-layout-radius-75: 5px; --ds-layout-radius-100: 7px; --ds-layout-radius-150: 9px; --ds-layout-radius-200: 14px; --ds-layout-radius-400: 23px; --ds-layout-radius-pill: 999px; --ds-layout-radius-round: 999px; /* 50% */ --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-800: 52px; --ds-layout-spacing-1000: 68px; --ds-layout-spacing-1200: 84px; --ds-layout-spacing-1400: 100px; --ds-layout-spacing-1600: 104px; --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-50: 4px; --ds-layout-radius-75: 6px; --ds-layout-radius-100: 8px; --ds-layout-radius-150: 12px; --ds-layout-radius-200: 16px; --ds-layout-radius-400: 32px; --ds-layout-radius-pill: 999px; --ds-layout-radius-round: 999px; /* 50% */ --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-800: 86px; --ds-layout-spacing-1000: 100px; --ds-layout-spacing-1200: 116px; --ds-layout-spacing-1400: 131px; --ds-layout-spacing-1600: 171px; --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-50: 0.5; /* 0.5 */ --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.176020rem + 10.448980vi, 11.625rem); --ds-screen-text-font-size-display-sm: clamp(3.1875rem, 1.312500rem + 8.000000vi, 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.35; /* 1.35 */ --ds-screen-text-line-height-display-md: 1.5; /* 1.5 */ --ds-screen-text-line-height-display-sm: 1.5; /* 1.5 */ --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-300: clamp(0.5rem, 0.193878rem + 1.306122vi, 1.5rem); --ds-screen-spacing-fluid-250-400: clamp(1.25rem, 1.020408rem + 0.979592vi, 2rem); --ds-screen-spacing-fluid-300-500: clamp(1.5rem, 1.193878rem + 1.306122vi, 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}.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)}.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)}.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)}.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)}.connect-fieldset-reset{margin:0;padding:0;border:0}.connect-input-reset{outline:none;border:none}.connect-text-field__input{border:none;padding:0;margin:0;outline:none}.connect-button-reset{border:none;padding:0;margin:0}.connect-button-reset:focus-visible{outline:none}@media(prefers-reduced-motion:reduce){.connect-reduced-motion{transition-duration:0ms!important}}.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__background{opacity:.15}.connect-progress-circle--colorful .connect-progress-circle__background{opacity:1}.connect-progress-circle__indicator{transition:stroke-dashoffset .24s cubic-bezier(.3,0,.3,1),stroke .24s cubic-bezier(.3,0,.3,1)}@media(prefers-reduced-motion:reduce){.connect-progress-circle__indicator{transition-duration:0!important}}.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}@media(prefers-reduced-motion:reduce){.connect-progress-circle--indeterminate .connect-progress-circle__trail-segment{animation:none!important}}.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}@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;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}