:root {
  --white: #ffffff;
  --black: #000000;
  --spacing-scale: 1;
  --typography-scale: 1;
  --spacing-none: 0;
  --spacing-3xs: calc(2px * var(--spacing-scale, 1));
  --spacing-2xs: calc(4px * var(--spacing-scale, 1));
  --spacing-xs: calc(8px * var(--spacing-scale, 1));
  --spacing-sm: calc(12px * var(--spacing-scale, 1));
  --spacing-md: calc(16px * var(--spacing-scale, 1));
  --spacing-lg: calc(20px * var(--spacing-scale, 1));
  --spacing-xl: calc(24px * var(--spacing-scale, 1));
  --spacing-2xl: calc(32px * var(--spacing-scale, 1));
  --spacing-3xl: calc(48px * var(--spacing-scale, 1));
  --spacing-4xl: calc(64px * var(--spacing-scale, 1));
  --spacing-5xl: calc(80px * var(--spacing-scale, 1));
  --spacing-6xl: calc(96px * var(--spacing-scale, 1));
  --spacing-7xl: calc(112px * var(--spacing-scale, 1));
  --spacing-8xl: calc(128px * var(--spacing-scale, 1));
  --font-family: "Open Sauce Two";
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --typography-font-size-display-1: calc(56px * var(--typography-scale, 1));
  --typography-line-height-display-1: calc(72px * var(--typography-scale, 1));
  --typography-letter-spacing-display-1: -0.0319em;
  --typography-font-weight-display-1: var(--font-weight-regular);
  --typography-font-size-display-2: calc(40px * var(--typography-scale, 1));
  --typography-line-height-display-2: calc(52px * var(--typography-scale, 1));
  --typography-letter-spacing-display-2: -0.0282em;
  --typography-font-weight-display-2: var(--font-weight-regular);
  --typography-font-size-title-1: calc(36px * var(--typography-scale, 1));
  --typography-line-height-title-1: calc(48px * var(--typography-scale, 1));
  --typography-letter-spacing-title-1: -0.027em;
  --typography-font-weight-title-1: var(--font-weight-semibold);
  --typography-font-size-title-2: calc(28px * var(--typography-scale, 1));
  --typography-line-height-title-2: calc(38px * var(--typography-scale, 1));
  --typography-letter-spacing-title-2: -0.0236em;
  --typography-font-weight-title-2: var(--font-weight-semibold);
  --typography-font-size-title-3: calc(24px * var(--typography-scale, 1));
  --typography-line-height-title-3: calc(32px * var(--typography-scale, 1));
  --typography-letter-spacing-title-3: -0.023em;
  --typography-font-weight-title-3: var(--font-weight-semibold);
  --typography-font-size-heading-1: calc(22px * var(--typography-scale, 1));
  --typography-line-height-heading-1: calc(30px * var(--typography-scale, 1));
  --typography-letter-spacing-heading-1: -0.0194em;
  --typography-font-weight-heading-1: var(--font-weight-semibold);
  --typography-font-size-heading-2: calc(20px * var(--typography-scale, 1));
  --typography-line-height-heading-2: calc(28px * var(--typography-scale, 1));
  --typography-letter-spacing-heading-2: -0.012em;
  --typography-font-weight-heading-2: var(--font-weight-semibold);
  --typography-font-size-headline-1: calc(18px * var(--typography-scale, 1));
  --typography-line-height-headline-1: calc(26px * var(--typography-scale, 1));
  --typography-letter-spacing-headline-1: -0.002em;
  --typography-font-weight-headline-1: var(--font-weight-semibold);
  --typography-font-size-headline-2: calc(17px * var(--typography-scale, 1));
  --typography-line-height-headline-2: calc(24px * var(--typography-scale, 1));
  --typography-letter-spacing-headline-2: 0em;
  --typography-font-weight-headline-2: var(--font-weight-semibold);
  --typography-font-size-body-1: calc(16px * var(--typography-scale, 1));
  --typography-line-height-body-1: calc(24px * var(--typography-scale, 1));
  --typography-letter-spacing-body-1: 0.0057em;
  --typography-font-weight-body-1: var(--font-weight-regular);
  --typography-font-size-body-2: calc(15px * var(--typography-scale, 1));
  --typography-line-height-body-2: calc(22px * var(--typography-scale, 1));
  --typography-letter-spacing-body-2: 0.0096em;
  --typography-font-weight-body-2: var(--font-weight-regular);
  --typography-font-size-label-1: calc(14px * var(--typography-scale, 1));
  --typography-line-height-label-1: calc(20px * var(--typography-scale, 1));
  --typography-letter-spacing-label-1: 0.0145em;
  --typography-font-weight-label-1: var(--font-weight-regular);
  --typography-font-size-label-2: calc(13px * var(--typography-scale, 1));
  --typography-line-height-label-2: calc(18px * var(--typography-scale, 1));
  --typography-letter-spacing-label-2: 0.0194em;
  --typography-font-weight-label-2: var(--font-weight-regular);
  --typography-font-size-caption-1: calc(12px * var(--typography-scale, 1));
  --typography-line-height-caption-1: calc(16px * var(--typography-scale, 1));
  --typography-letter-spacing-caption-1: 0.0252em;
  --typography-font-weight-caption-1: var(--font-weight-regular);
  --typography-font-size-caption-2: calc(11px * var(--typography-scale, 1));
  --typography-line-height-caption-2: calc(14px * var(--typography-scale, 1));
  --typography-letter-spacing-caption-2: 0.0311em;
  --typography-font-weight-caption-2: var(--font-weight-regular);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08), 0 0 4px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 20px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08), 0 0 8px rgba(0, 0, 0, 0.08);
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
}

@media (max-width: 1279px) {
  :root {
    --typography-scale: 0.9;
    --spacing-scale: 0.9;
  }
}
@media (max-width: 743px) {
  :root {
    --typography-scale: 0.82;
    --spacing-scale: 0.82;
  }
}
:root,
[data-color-mode=light] {
  --static-white: #FFFFFF;
  --static-black: #000000;
  --primary-normal: #0066FF;
  --primary-strong: #005EEB;
  --primary-heavy: #0054D1;
  --primary-subtle: #EAF2FE;
  --text-normal: #171719;
  --text-strong: #000000;
  --text-neutral: #474747;
  --text-alternative: rgba(55, 56, 60, 0.61);
  --text-medium: rgba(55, 56, 60, 0.61);
  --text-low: rgba(55, 56, 60, 0.28);
  --text-disable: rgba(55, 56, 60, 0.16);
  --text-assistive: rgba(55, 56, 60, 0.16);
  --text-label: rgba(46, 47, 51, 0.88);
  --background-normal: #FFFFFF;
  --background-normal-alternative: #f7f7f8;
  --background-elevated: #FFFFFF;
  --background-elevated-alternative: #f7f7f8;
  --interaction-inactive: #989ba2;
  --interaction-disable: #f4f4f5;
  --component-fill-normal: rgba(112, 115, 124, 0.08);
  --component-fill-strong: rgba(112, 115, 124, 0.16);
  --component-fill-alternative: rgba(112, 115, 124, 0.05);
  --inverse-normal: #70737c;
  --inverse-hover: #37383c;
  --inverse-press: #5a5c63;
  --inverse-primary: #3385FF;
  --inverse-background: #1b1c1e;
  --inverse-text: #f7f7f8;
  --border-normal-normal: rgba(112, 115, 124, 0.22);
  --border-normal-neutral: rgba(112, 115, 124, 0.16);
  --border-normal-alternative: rgba(112, 115, 124, 0.08);
  --border-solid-normal: #e1e2e4;
  --border-solid-neutral: #eaebec;
  --border-solid-alternative: #f4f4f5;
  --component-material-overlay: rgba(23, 23, 25, 0.52);
  --status-positive: #00BF40;
  --status-cautionary: #FF9200;
  --status-negative: #FF4242;
  --accent-background-red-orange: #FF5E00;
  --accent-background-lime: #58CF04;
  --accent-background-cyan: #00BBDE;
  --accent-background-light-blue: #00AEFF;
  --accent-background-violet: #6541F2;
  --accent-background-purple: #CB59FF;
  --accent-background-pink: #F553DA;
  --accent-foreground-red: #E52222;
  --accent-foreground-red-orange: #F55A00;
  --accent-foreground-orange: #D17600;
  --accent-foreground-lime: #429E00;
  --accent-foreground-green: #009632;
  --accent-foreground-cyan: #0098B2;
  --accent-foreground-light-blue: #008DCF;
  --accent-foreground-blue: #005EEB;
  --accent-foreground-violet: #5B37ED;
  --accent-foreground-purple: #AD36E3;
  --accent-foreground-pink: #E846CD;
}

[data-color-mode=dark] {
  --static-white: #FFFFFF;
  --static-black: #000000;
  --primary-normal: #3385FF;
  --primary-strong: #1A75FF;
  --primary-heavy: #0066FF;
  --primary-subtle: rgba(51, 133, 255, 0.16);
  --text-normal: #f7f7f8;
  --text-strong: #FFFFFF;
  --text-neutral: #B0B0B0;
  --text-alternative: rgba(174, 176, 182, 0.61);
  --text-assistive: rgba(174, 176, 182, 0.28);
  --text-disable: rgba(152, 155, 162, 0.16);
  --background-normal: #1b1c1e;
  --background-normal-alternative: #0f0f10;
  --background-elevated: #212225;
  --background-elevated-alternative: #141415;
  --interaction-inactive: #5a5c63;
  --interaction-disable: #2e2f33;
  --component-fill-normal: rgba(112, 115, 124, 0.08);
  --component-fill-strong: rgba(112, 115, 124, 0.16);
  --component-fill-alternative: rgba(112, 115, 124, 0.05);
  --inverse-hover: #c2c4c8;
  --inverse-press: #aeb0b6;
  --inverse-primary: #0066FF;
  --inverse-background: #FFFFFF;
  --inverse-text: #171719;
  --border-normal-normal: rgba(112, 115, 124, 0.35);
  --border-normal-neutral: rgba(112, 115, 124, 0.28);
  --border-normal-alternative: rgba(112, 115, 124, 0.22);
  --border-solid-normal: #37383c;
  --border-solid-neutral: #333438;
  --border-solid-alternative: #2e2f33;
  --component-material-overlay: rgba(23, 23, 25, 0.74);
  --status-positive: #1ED45A;
  --status-cautionary: #FFA938;
  --status-negative: #FF6363;
  --accent-background-red-orange: #FF7B2E;
  --accent-background-lime: #6BE016;
  --accent-background-cyan: #28D0ED;
  --accent-background-light-blue: #3DC2FF;
  --accent-background-violet: #7D5EF7;
  --accent-background-purple: #D478FF;
  --accent-background-pink: #FA73E3;
  --accent-foreground-red: #FF6363;
  --accent-foreground-red-orange: #FF7B2E;
  --accent-foreground-orange: #FF9200;
  --accent-foreground-lime: #58CF04;
  --accent-foreground-green: #1ED45A;
  --accent-foreground-cyan: #00BBDE;
  --accent-foreground-light-blue: #00AEFF;
  --accent-foreground-blue: #4F95FF;
  --accent-foreground-violet: #9E86FC;
  --accent-foreground-purple: #D478FF;
  --accent-foreground-pink: #FA73E3;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  color: var(--text-normal);
  font-family: var(--font-family-base), -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background-color: var(--background-normal);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

b,
strong {
  font-weight: var(--font-weight-bold);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

img,
svg {
  vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

* {
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.display-1 {
  font-family: var(--typography-font-family-display-1, var(--font-family));
  font-weight: var(--typography-font-weight-display-1);
  font-size: calc(var(--typography-font-size-display-1) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-display-1) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-display-1);
}

.display-2 {
  font-family: var(--typography-font-family-display-2, var(--font-family));
  font-weight: var(--typography-font-weight-display-2);
  font-size: calc(var(--typography-font-size-display-2) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-display-2) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-display-2);
}

.title-1 {
  font-family: var(--typography-font-family-title-1, var(--font-family));
  font-weight: var(--typography-font-weight-title-1);
  font-size: calc(var(--typography-font-size-title-1) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-title-1) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-title-1);
}

.title-2 {
  font-family: var(--typography-font-family-title-2, var(--font-family));
  font-weight: var(--typography-font-weight-title-2);
  font-size: calc(var(--typography-font-size-title-2) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-title-2) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-title-2);
}

.title-3 {
  font-family: var(--typography-font-family-title-3, var(--font-family));
  font-weight: var(--typography-font-weight-title-3);
  font-size: calc(var(--typography-font-size-title-3) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-title-3) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-title-3);
}

.heading-1 {
  font-family: var(--typography-font-family-heading-1, var(--font-family));
  font-weight: var(--typography-font-weight-heading-1);
  font-size: calc(var(--typography-font-size-heading-1) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-heading-1) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-heading-1);
}

.heading-2 {
  font-family: var(--typography-font-family-heading-2, var(--font-family));
  font-weight: var(--typography-font-weight-heading-2);
  font-size: calc(var(--typography-font-size-heading-2) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-heading-2) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-heading-2);
}

.headline-1 {
  font-family: var(--typography-font-family-headline-1, var(--font-family));
  font-weight: var(--typography-font-weight-headline-1);
  font-size: calc(var(--typography-font-size-headline-1) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-headline-1) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-headline-1);
}

.headline-2 {
  font-family: var(--typography-font-family-headline-2, var(--font-family));
  font-weight: var(--typography-font-weight-headline-2);
  font-size: calc(var(--typography-font-size-headline-2) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-headline-2) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-headline-2);
}

.body-1 {
  font-family: var(--typography-font-family-body-1, var(--font-family));
  font-weight: var(--typography-font-weight-body-1);
  font-size: calc(var(--typography-font-size-body-1) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-1) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-1);
}

.body-2 {
  font-family: var(--typography-font-family-body-2, var(--font-family));
  font-weight: var(--typography-font-weight-body-2);
  font-size: calc(var(--typography-font-size-body-2) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-2) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-2);
}

.label-1 {
  font-family: var(--typography-font-family-label-1, var(--font-family));
  font-weight: var(--typography-font-weight-label-1);
  font-size: calc(var(--typography-font-size-label-1) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-label-1) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-label-1);
}

.label-2 {
  font-family: var(--typography-font-family-label-2, var(--font-family));
  font-weight: var(--typography-font-weight-label-2);
  font-size: calc(var(--typography-font-size-label-2) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-label-2) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-label-2);
}

.caption-1 {
  font-family: var(--typography-font-family-caption-1, var(--font-family));
  font-weight: var(--typography-font-weight-caption-1);
  font-size: calc(var(--typography-font-size-caption-1) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-caption-1) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-caption-1);
}

.caption-2 {
  font-family: var(--typography-font-family-caption-2, var(--font-family));
  font-weight: var(--typography-font-weight-caption-2);
  font-size: calc(var(--typography-font-size-caption-2) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-caption-2) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-caption-2);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

.radius-none {
  border-radius: var(--radius-none);
}

.radius-xs {
  border-radius: var(--radius-xs);
}

.radius-sm {
  border-radius: var(--radius-sm);
}

.radius-md {
  border-radius: var(--radius-md);
}

.radius-lg {
  border-radius: var(--radius-lg);
}

.radius-xl {
  border-radius: var(--radius-xl);
}

.radius-2xl {
  border-radius: var(--radius-2xl);
}

.radius-3xl {
  border-radius: var(--radius-3xl);
}

.radius-full {
  border-radius: var(--radius-full);
}

.button {
  --button-scale: 1;
  --button-padding-x: var(--spacing-md);
  --button-padding-y: var(--spacing-sm);
  --button-border-radius: 10px;
  --button-box-shadow: none;
  --button-font-size: var(--typography-font-size-body-2);
  --button-font-weight: var(--font-weight-semibold);
  --button-line-height: 150%;
  --button-letter-spacing: var(--typography-letter-spacing-body-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-icon-gap);
  height: auto;
  padding: calc(var(--button-padding-y) * var(--button-scale)) calc(var(--button-padding-x) * var(--button-scale));
  font-family: var(--button-font-family, var(--font-family));
  font-size: calc(var(--button-font-size) * var(--button-scale));
  font-weight: var(--button-font-weight);
  line-height: calc(var(--button-line-height) * var(--button-scale));
  letter-spacing: var(--button-letter-spacing);
  color: var(--button-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  user-select: none;
  border: 0 solid transparent;
  border-radius: var(--button-border-radius);
  background: var(--button-background);
  box-shadow: var(--button-box-shadow);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.button:hover {
  background: color-mix(in srgb, var(--button-color) 8%, var(--button-background, transparent));
}
.button:active, .button.is-pressed {
  filter: brightness(var(--button-pressed-brightness, 0.92));
}
.button:focus-visible {
  outline: var(--button-focus-outline-width, 2px) solid var(--primary-normal);
  outline-offset: var(--button-focus-outline-offset, 2px);
}
.button:disabled, .button.disabled, .button[aria-disabled=true] {
  opacity: var(--button-disabled-opacity, 0.4);
  cursor: not-allowed;
  pointer-events: none;
}
.button > svg,
.button .icon {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
}

.button-large {
  --button-scale: 1.2;
  --button-icon-gap: var(--spacing-sm);
  --button-icon-size: 20px;
}

.button-medium {
  --button-scale: 1;
  --button-icon-gap: var(--spacing-sm);
  --button-icon-size: 20px;
}

.button-small {
  --button-scale: 0.85;
  --button-icon-gap: var(--spacing-sm);
  --button-icon-size: 20px;
}

.button-square {
  --button-border-radius: 4px;
}

.button-rounded {
  --button-border-radius: 10px;
}

.button-pill {
  --button-border-radius: 9999px;
}

.button-primary {
  --button-background: var(--button-primary-background, var(--primary-normal));
  --button-color: var(--button-primary-color, var(--static-white));
  border-width: 0;
}

.button-secondary {
  --button-background: var(--button-secondary-background, transparent);
  --button-color: var(--button-secondary-color, var(--text-normal, currentColor));
  border-width: var(--button-secondary-border-width, 1px);
  border-color: var(--button-color);
}

.button-tertiary {
  --button-background: var(--button-tertiary-background, transparent);
  --button-color: var(--button-tertiary-color, var(--text-neutral));
  border-width: 0;
}

.button.is-icon-only {
  --button-padding-x: var(--button-padding-y);
  gap: 0;
}

.button.is-loading {
  color: transparent;
  pointer-events: none;
  position: relative;
}
.button.is-loading::after {
  content: "";
  position: absolute;
  width: var(--button-icon-size, 20px);
  height: var(--button-icon-size, 20px);
  border: 2px solid var(--button-color);
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spin 0.6s linear infinite;
}

.button.is-active {
  filter: brightness(var(--button-pressed-brightness, 0.92));
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}
.icon-btn {
  --ib-size: 24px;
  --ib-border-radius: 10px;
  --ib-icon-size: 24px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ib-size);
  height: var(--ib-size);
  padding: var(--ib-padding, 0);
  color: var(--ib-color);
  background: var(--ib-bg);
  border: var(--ib-border);
  border-radius: var(--ib-border-radius);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, border-radius 0.15s ease;
}
.icon-btn > svg,
.icon-btn .icon {
  display: flex;
  width: var(--ib-icon-size, 24px);
  height: var(--ib-icon-size, 24px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.icon-btn:hover {
  background: var(--ib-hover-bg);
  border: var(--ib-hover-border);
  border-radius: var(--ib-border-radius);
}
.icon-btn:active, .icon-btn.is-pressed {
  background: var(--ib-pressed-bg);
  border: var(--ib-pressed-border);
  border-radius: var(--ib-border-radius);
}
.icon-btn:focus-visible, .icon-btn.is-focused {
  outline: none;
  background: var(--ib-focus-bg);
  border-radius: var(--ib-border-radius);
  box-shadow: var(--ib-focus-shadow, 0 0 0 2px var(--primary-normal));
}
.icon-btn:disabled, .icon-btn.disabled, .icon-btn[aria-disabled=true] {
  opacity: var(--ib-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
  color: var(--ib-disabled-color);
  background: var(--ib-disabled-bg);
  border: var(--ib-disabled-border);
  border-radius: var(--ib-border-radius);
  box-shadow: none;
}
.icon-btn__badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(25%, -25%);
  width: 4px;
  height: 4px;
  min-width: 4px;
  max-width: 8px;
  min-height: 4px;
  max-height: 8px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--primary-normal);
  pointer-events: none;
}

.icon-btn.is-normal {
  --ib-bg: transparent;
  --ib-color: var(--primary-normal);
  --ib-border:none;
  --ib-hover-bg: var(--primary-strong);
  --ib-hover-border:var(--ib-border);
  --ib-pressed-bg: var(--primary-heavy);
  --ib-pressed-border:var(--ib-hover-border);
  --ib-focus-bg: var(--primary-heavy);
  --ib-focus-shadow:none;
  --ib-disabled-bg: var(--ib-bg);
  --ib-disabled-color: var(--text-disable);
  --ib-disabled-border: var(--ib-border);
  --ib-disabled-opacity:1;
}

.icon-btn.is-background {
  --ib-bg: var(--component-fill-normal);
  --ib-color: var(--interaction-inactive);
  --ib-border:none;
  --ib-hover-bg: var(--interaction-disable);
  --ib-hover-border:var(--ib-border);
  --ib-pressed-bg: var(--component-fill-neutral-hover);
  --ib-pressed-border:var(--ib-hover-border);
  --ib-focus-bg: var(--border-solid-normal);
  --ib-focus-shadow:none;
  --ib-disabled-bg: var(--component-fill-normal);
  --ib-disabled-color: var(--interaction-inactive);
  --ib-disabled-border: var(--ib-border);
  --ib-disabled-opacity:1;
}

.icon-btn.is-outlined {
  --ib-bg: transparent;
  --ib-color: var(--text-normal);
  --ib-border:none;
  --ib-hover-bg: var(--interaction-disable);
  --ib-hover-border:var(--ib-border);
  --ib-pressed-bg: var(--component-fill-neutral-hover);
  --ib-pressed-border:var(--ib-hover-border);
  --ib-focus-bg: var(--border-solid-normal);
  --ib-focus-shadow:none;
  --ib-disabled-bg: var(--ib-bg);
  --ib-disabled-color: var(--text-disable);
  --ib-disabled-border: var(--ib-border);
  --ib-disabled-opacity:1;
}

.icon-btn.is-solid {
  --ib-bg: var(--primary-normal);
  --ib-color: var(--static-white);
  --ib-border:none;
  --ib-hover-bg: var(--primary-strong);
  --ib-hover-border:var(--ib-border);
  --ib-pressed-bg: var(--primary-heavy);
  --ib-pressed-border:var(--ib-hover-border);
  --ib-focus-bg: var(--primary-strong);
  --ib-focus-shadow:none;
  --ib-disabled-bg: var(--component-fill-normal);
  --ib-disabled-color: var(--text-disable);
  --ib-disabled-border: var(--ib-border);
  --ib-disabled-opacity:1;
}

.icon-btn.is-normal {
  --ib-border-radius: 16px;
}

.icon-btn.is-background {
  --ib-border-radius: 16px;
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
}
.icon-btn.is-background > svg,
.icon-btn.is-background .icon {
  opacity: 0.61;
  mix-blend-mode: plus-darker;
}

.icon-btn.is-background.is-alternative {
  --ib-bg: var(--interaction-inverse-normal);
  --ib-color: var(--static-white);
  --ib-hover-bg: var(--interaction-inverse-press);
  --ib-focus-bg: var(--interaction-inverse-press);
  --ib-pressed-bg: var(--interaction-inverse-press);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0.88;
  border-radius: 16px;
}
.icon-btn.is-background.is-alternative > svg,
.icon-btn.is-background.is-alternative .icon {
  opacity: 0.88;
  mix-blend-mode: normal;
}
.icon-btn.is-background.is-alternative:focus-visible, .icon-btn.is-background.is-alternative.is-focused {
  color: var(--component-fill-normal);
}
.icon-btn.is-background.is-alternative:active, .icon-btn.is-background.is-alternative.is-pressed {
  color: var(--component-fill-normal);
}

.icon-btn.is-outlined {
  flex-direction: column;
  --ib-border-radius: 1000px;
  --ib-border-color: var(--border-normal-neutral);
  --ib-border: 1px solid var(--ib-border-color);
  --ib-color: var(--text-normal);
  --ib-padding: 10px;
  --ib-icon-size: 24px;
  --ib-size: calc(var(--ib-icon-size) + 2 * var(--ib-padding, 10px));
}
.icon-btn.is-outlined.is-small {
  --ib-padding: 7px;
}

.icon-btn.is-solid {
  flex-direction: column;
  --ib-border-radius: 1000px;
  --ib-border: none;
  --ib-color: var(--static-white);
  --ib-padding: 10px;
  --ib-icon-size: 24px;
  --ib-size: calc(var(--ib-icon-size) + 2 * var(--ib-padding, 10px));
}
.icon-btn.is-solid.is-small {
  --ib-padding: 7px;
}

.link {
  --link-color: var(--text-neutral);
  --link-hover-color: var(--primary-normal);
  --link-font-family: var(--typography-font-family-label-1, var(--font-family));
  --link-font-weight: var(--typography-font-weight-label-1);
  --link-font-size: var(--typography-font-size-label-1);
  --link-line-height: var(--typography-line-height-label-1);
  --link-letter-spacing: var(--typography-letter-spacing-label-1);
  background: none;
  border: none;
  padding: 0;
  font-family: var(--link-font-family);
  font-weight: var(--link-font-weight);
  font-size: var(--link-font-size);
  line-height: var(--link-line-height);
  letter-spacing: var(--link-letter-spacing);
  color: var(--link-color);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease;
}
.link:hover {
  color: var(--link-hover-color);
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-size, 24px);
  height: var(--icon-size, 24px);
  color: var(--icon-color, currentColor);
}
.icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.icon.is-xsmall {
  --icon-size: 12px;
}
.icon.is-small {
  --icon-size: 16px;
}
.icon.is-medium {
  --icon-size: 20px;
}
.icon.is-large {
  --icon-size: 24px;
}
.icon.is-xlarge {
  --icon-size: 32px;
}

.content-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid transparent;
}
.content-badge.is-xsmall {
  height: 20px;
  padding: 0 var(--spacing-sm);
  gap: 2px;
  font-family: var(--typography-font-family-caption-2-medium, var(--font-family));
  font-weight: var(--typography-font-weight-caption-2-medium);
  font-size: calc(var(--typography-font-size-caption-2-medium) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-caption-2-medium) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-caption-2-medium);
}
.content-badge.is-xsmall .content-badge__icon {
  width: 12px;
  height: 12px;
}
.content-badge.is-small {
  height: 24px;
  padding: 0 10px;
  gap: 3px;
  font-family: var(--typography-font-family-caption-1-medium, var(--font-family));
  font-weight: var(--typography-font-weight-caption-1-medium);
  font-size: calc(var(--typography-font-size-caption-1-medium) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-caption-1-medium) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-caption-1-medium);
}
.content-badge.is-small .content-badge__icon {
  width: 14px;
  height: 14px;
}
.content-badge.is-medium {
  height: 28px;
  padding: 0 var(--spacing-md);
  gap: var(--spacing-xs);
  font-family: var(--typography-font-family-label-2-medium, var(--font-family));
  font-weight: var(--typography-font-weight-label-2-medium);
  font-size: calc(var(--typography-font-size-label-2-medium) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-label-2-medium) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-label-2-medium);
}
.content-badge.is-medium .content-badge__icon {
  width: 16px;
  height: 16px;
}
.content-badge.is-neutral.is-solid {
  background: var(--component-fill-normal);
  color: var(--text-medium);
}
.content-badge.is-neutral.is-outlined {
  background: transparent;
  border-color: var(--border-normal-neutral);
  color: var(--text-medium);
}
.content-badge.is-accent.is-solid {
  background: var(--cb-accent-bg, var(--accent-background-cyan));
  color: var(--cb-accent-color, var(--accent-foreground-cyan));
}
.content-badge.is-accent.is-outlined {
  background: transparent;
  border-color: var(--cb-accent-bg, var(--accent-background-cyan));
  color: var(--cb-accent-color, var(--accent-foreground-cyan));
}
.content-badge__icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.content-badge__label {
  white-space: nowrap;
}

.tab {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  border-bottom: 1px solid var(--border-normal-alternative);
}
.tab.has-trailing-icon-button {
  gap: var(--spacing-20);
}
.tab.has-padding {
  padding: 0 var(--spacing-20);
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
}
.tab__list {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-20);
  min-width: 0;
  flex: 1 1 auto;
}
.tab.has-padding .tab-scroll, .tab.has-padding .tab__list {
  flex: 1 0 0;
  align-self: stretch;
}
.tab__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--spacing-48);
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--typography-font-family-headline-2-bold, var(--font-family));
  font-weight: var(--typography-font-weight-headline-2-bold);
  font-size: calc(var(--typography-font-size-headline-2-bold) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-headline-2-bold) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-headline-2-bold);
  color: var(--text-disable);
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.tab__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--spacing-2);
  border-radius: 999px;
  background: transparent;
  transition: background-color 0.15s ease;
}
.tab__item.is-active {
  color: var(--text-strong);
}
.tab__item.is-active::after {
  background: var(--text-strong);
}
.tab__item.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.tab__label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.tab__trailing {
  flex: 0 0 auto;
  align-self: center;
  --ib-color: var(--text-normal, #171719);
}
.tab__trailing-placeholder {
  width: var(--spacing-16);
  height: var(--spacing-16);
  border: 1.5px dashed currentColor;
  border-radius: var(--spacing-4);
}
.tab--hug .tab__list {
  gap: 24px;
}
.tab--hug .tab__item {
  flex: 0 0 auto;
}
.tab--fill .tab__list {
  display: flex;
  align-items: flex-start;
  flex: 1 0 0;
}
.tab--fill .tab__item {
  flex: 1 0 0;
}

.tab-scroll {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.tab-scroll::before, .tab-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tab-scroll.can-scroll-left::before {
  opacity: 1;
}
.tab-scroll.can-scroll-right::after {
  opacity: 1;
}
.tab-scroll::before {
  left: 0;
  background: linear-gradient(to right, var(--background-normal) 0%, color-mix(in srgb, var(--background-normal) 85.78%, transparent) 14.03%, color-mix(in srgb, var(--background-normal) 73.07%, transparent) 26.24%, color-mix(in srgb, var(--background-normal) 61.76%, transparent) 36.8%, color-mix(in srgb, var(--background-normal) 51.76%, transparent) 45.9%, color-mix(in srgb, var(--background-normal) 42.96%, transparent) 53.7%, color-mix(in srgb, var(--background-normal) 35.28%, transparent) 60.4%, color-mix(in srgb, var(--background-normal) 28.61%, transparent) 66.16%, color-mix(in srgb, var(--background-normal) 22.86%, transparent) 71.17%, color-mix(in srgb, var(--background-normal) 17.92%, transparent) 75.6%, color-mix(in srgb, var(--background-normal) 13.7%, transparent) 79.63%, color-mix(in srgb, var(--background-normal) 10.11%, transparent) 83.44%, color-mix(in srgb, var(--background-normal) 7.04%, transparent) 87.2%, color-mix(in srgb, var(--background-normal) 4.4%, transparent) 91.1%, color-mix(in srgb, var(--background-normal) 2.08%, transparent) 95.3%, transparent 100%);
}
.tab-scroll::after {
  right: 0;
  background: linear-gradient(to left, var(--background-normal) 0%, color-mix(in srgb, var(--background-normal) 85.78%, transparent) 14.03%, color-mix(in srgb, var(--background-normal) 73.07%, transparent) 26.24%, color-mix(in srgb, var(--background-normal) 61.76%, transparent) 36.8%, color-mix(in srgb, var(--background-normal) 51.76%, transparent) 45.9%, color-mix(in srgb, var(--background-normal) 42.96%, transparent) 53.7%, color-mix(in srgb, var(--background-normal) 35.28%, transparent) 60.4%, color-mix(in srgb, var(--background-normal) 28.61%, transparent) 66.16%, color-mix(in srgb, var(--background-normal) 22.86%, transparent) 71.17%, color-mix(in srgb, var(--background-normal) 17.92%, transparent) 75.6%, color-mix(in srgb, var(--background-normal) 13.7%, transparent) 79.63%, color-mix(in srgb, var(--background-normal) 10.11%, transparent) 83.44%, color-mix(in srgb, var(--background-normal) 7.04%, transparent) 87.2%, color-mix(in srgb, var(--background-normal) 4.4%, transparent) 91.1%, color-mix(in srgb, var(--background-normal) 2.08%, transparent) 95.3%, transparent 100%);
}
.tab-scroll .tab__list {
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.tab-scroll .tab__list::-webkit-scrollbar {
  display: none;
}

.tab--small .tab__item {
  min-height: var(--spacing-40);
  font-family: var(--typography-font-family-body-2-bold, var(--font-family));
  font-weight: var(--typography-font-weight-body-2-bold);
  font-size: calc(var(--typography-font-size-body-2-bold) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-2-bold) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-2-bold);
}

.tab--medium .tab__item {
  min-height: var(--spacing-48);
  font-family: var(--typography-font-family-headline-2-bold, var(--font-family));
  font-weight: var(--typography-font-weight-headline-2-bold);
  font-size: calc(var(--typography-font-size-headline-2-bold) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-headline-2-bold) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-headline-2-bold);
}

.tab--large .tab__item {
  min-height: var(--spacing-56);
  font-family: var(--typography-font-family-heading-2-bold, var(--font-family));
  font-weight: var(--typography-font-weight-heading-2-bold);
  font-size: calc(var(--typography-font-size-heading-2-bold) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-heading-2-bold) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-heading-2-bold);
}

.category-scroll {
  position: relative;
  overflow: hidden;
}
.category-scroll::before, .category-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.category-scroll.can-scroll-left::before {
  opacity: 1;
}
.category-scroll.can-scroll-right::after {
  opacity: 1;
}
.category-scroll::before {
  left: 0;
  background: linear-gradient(to right, var(--background-normal) 0%, color-mix(in srgb, var(--background-normal) 85.78%, transparent) 14.03%, color-mix(in srgb, var(--background-normal) 73.07%, transparent) 26.24%, color-mix(in srgb, var(--background-normal) 61.76%, transparent) 36.8%, color-mix(in srgb, var(--background-normal) 51.76%, transparent) 45.9%, color-mix(in srgb, var(--background-normal) 42.96%, transparent) 53.7%, color-mix(in srgb, var(--background-normal) 35.28%, transparent) 60.4%, color-mix(in srgb, var(--background-normal) 28.61%, transparent) 66.16%, color-mix(in srgb, var(--background-normal) 22.86%, transparent) 71.17%, color-mix(in srgb, var(--background-normal) 17.92%, transparent) 75.6%, color-mix(in srgb, var(--background-normal) 13.7%, transparent) 79.63%, color-mix(in srgb, var(--background-normal) 10.11%, transparent) 83.44%, color-mix(in srgb, var(--background-normal) 7.04%, transparent) 87.2%, color-mix(in srgb, var(--background-normal) 4.4%, transparent) 91.1%, color-mix(in srgb, var(--background-normal) 2.08%, transparent) 95.3%, transparent 100%);
}
.category-scroll::after {
  right: 0;
  background: linear-gradient(to left, var(--background-normal) 0%, color-mix(in srgb, var(--background-normal) 85.78%, transparent) 14.03%, color-mix(in srgb, var(--background-normal) 73.07%, transparent) 26.24%, color-mix(in srgb, var(--background-normal) 61.76%, transparent) 36.8%, color-mix(in srgb, var(--background-normal) 51.76%, transparent) 45.9%, color-mix(in srgb, var(--background-normal) 42.96%, transparent) 53.7%, color-mix(in srgb, var(--background-normal) 35.28%, transparent) 60.4%, color-mix(in srgb, var(--background-normal) 28.61%, transparent) 66.16%, color-mix(in srgb, var(--background-normal) 22.86%, transparent) 71.17%, color-mix(in srgb, var(--background-normal) 17.92%, transparent) 75.6%, color-mix(in srgb, var(--background-normal) 13.7%, transparent) 79.63%, color-mix(in srgb, var(--background-normal) 10.11%, transparent) 83.44%, color-mix(in srgb, var(--background-normal) 7.04%, transparent) 87.2%, color-mix(in srgb, var(--background-normal) 4.4%, transparent) 91.1%, color-mix(in srgb, var(--background-normal) 2.08%, transparent) 95.3%, transparent 100%);
}
.category-scroll .category {
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.category-scroll .category::-webkit-scrollbar {
  display: none;
}

.category {
  display: flex;
  align-items: flex-start;
}
.category.is-alternative .category__item.is-active {
  background: var(--primary-subtle);
  border: 1px solid var(--primary-normal);
}
.category.is-alternative .category__item.is-active .category__label {
  color: var(--primary-normal);
}
.category.is-small {
  gap: var(--spacing-4);
}
.category.is-small .category__item {
  padding: var(--spacing-4) var(--spacing-sm);
  border-radius: 6px;
}
.category.is-small .category__label {
  font-family: var(--typography-font-family-caption-1-medium, var(--font-family));
  font-weight: var(--typography-font-weight-caption-1-medium);
  font-size: calc(var(--typography-font-size-caption-1-medium) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-caption-1-medium) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-caption-1-medium);
  padding: 0 1px;
}
.category.is-medium {
  gap: var(--spacing-6);
}
.category.is-medium .category__item {
  padding: var(--spacing-6) var(--spacing-sm);
  border-radius: 8px;
}
.category.is-medium .category__label {
  font-family: var(--typography-font-family-label-1-medium, var(--font-family));
  font-weight: var(--typography-font-weight-label-1-medium);
  font-size: calc(var(--typography-font-size-label-1-medium) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-label-1-medium) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-label-1-medium);
  padding: 0 var(--spacing-2);
}
.category.is-large {
  gap: var(--spacing-sm);
}
.category.is-large .category__item {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 10px;
}
.category.is-large .category__label {
  font-family: var(--typography-font-family-body-2-medium, var(--font-family));
  font-weight: var(--typography-font-weight-body-2-medium);
  font-size: calc(var(--typography-font-size-body-2-medium) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-2-medium) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-2-medium);
  padding: 0 var(--spacing-2);
}
.category.is-xlarge {
  gap: var(--spacing-10);
}
.category.is-xlarge .category__item {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 10px;
}
.category.is-xlarge .category__label {
  font-family: var(--typography-font-family-body-2-medium, var(--font-family));
  font-weight: var(--typography-font-weight-body-2-medium);
  font-size: calc(var(--typography-font-size-body-2-medium) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-2-medium) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-2-medium);
  padding: 0 var(--spacing-2);
}
.category.has-padding {
  padding: 0 var(--spacing-20);
}
.category.has-vertical-padding {
  padding: var(--spacing-sm) var(--spacing-20);
}
.category__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--border-normal-neutral);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  background: transparent;
}
.category__item.is-active {
  background: var(--text-strong);
}
.category__item.is-active .category__label {
  color: var(--static-white);
}
.category__label {
  white-space: nowrap;
  color: var(--text-medium);
}

.popover__positioner {
  --z-index: 1002 !important;
}
.popover__content {
  box-sizing: border-box;
  background: var(--popover-background, var(--background-normal));
  border: var(--popover-border-width, 1px) solid var(--popover-border-color, var(--border-normal-normal));
  border-radius: var(--popover-border-radius, var(--radius-md));
  box-shadow: var(--popover-shadow, var(--shadow-lg));
  width: min(100vw - 16px, var(--popover-max-width, auto));
  max-width: var(--popover-max-width, auto);
  max-height: min(70vh, var(--popover-max-height, 400px));
  overflow: var(--popover-overflow, auto);
  padding: var(--popover-padding, var(--spacing-sm));
}

.dialog__backdrop {
  position: fixed;
  inset: 0;
  background: var(--dialog-backdrop-background, rgba(0, 0, 0, 0.4));
  z-index: var(--dialog-backdrop-z-index, 1000);
}
.dialog__positioner {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: var(--dialog-align, center);
  justify-content: var(--dialog-justify, center);
  z-index: var(--dialog-z-index, 1001);
  pointer-events: none;
}
.dialog__content {
  box-sizing: border-box;
  background: var(--dialog-background, var(--background-normal));
  border: var(--dialog-border-width, 1px) solid var(--dialog-border-color, var(--border-normal-normal));
  border-radius: var(--dialog-border-radius, var(--radius-md));
  box-shadow: var(--dialog-shadow, var(--shadow-lg));
  width: var(--dialog-width, auto);
  height: var(--dialog-height, auto);
  min-height: var(--dialog-min-height, auto);
  max-width: var(--dialog-max-width, 100vw);
  max-height: var(--dialog-max-height, 100vh);
  overflow: var(--dialog-overflow, auto);
  padding: var(--dialog-padding, var(--spacing-md));
  pointer-events: auto;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-normal);
  font-family: var(--typography-font-family-body-2-regular, var(--font-family));
  font-weight: var(--typography-font-weight-body-2-regular);
  font-size: calc(var(--typography-font-size-body-2-regular) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-2-regular) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-2-regular);
  transition: background-color 0.15s;
}
.menu-item:hover:not(.is-disabled), .menu-item[data-highlighted] {
  background: var(--component-fill-alternative);
}
.menu-item.is-selected, .menu-item[data-state=checked] {
  background: var(--menu-item-selected-background, var(--component-fill-alternative));
}
.menu-item.is-disabled, .menu-item[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.menu-item__label {
  flex: 1;
}
.menu-item__left, .menu-item__right {
  display: inline-flex;
  align-items: center;
  color: var(--text-medium);
}
.menu-item__right[data-state=unchecked] {
  opacity: 0;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.skeleton-text {
  display: flex;
  flex-direction: column;
  gap: var(--skeleton-text-gap, 8px);
}
.skeleton-text.is-align-leading {
  align-items: flex-start;
}
.skeleton-text.is-align-center {
  align-items: center;
}
.skeleton-text.is-align-trailing {
  align-items: flex-end;
}
.skeleton-text__bar {
  height: var(--skeleton-text-height, 22px);
  padding: 2px 0;
}
.skeleton-text__bar::after {
  content: "";
  display: block;
  height: var(--skeleton-text-bar-height, 18px);
  border-radius: var(--skeleton-text-radius, 3px);
  background: linear-gradient(90deg, var(--skeleton-text-color, rgba(112, 115, 124, 0.08)) 25%, color-mix(in srgb, var(--skeleton-text-color, rgba(112, 115, 124, 0.08)), white 30%) 50%, var(--skeleton-text-color, rgba(112, 115, 124, 0.08)) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}
.skeleton-text.is-length-100 .skeleton-text__bar {
  width: 100%;
}
.skeleton-text.is-length-75 .skeleton-text__bar {
  width: 75%;
}
.skeleton-text.is-length-50 .skeleton-text__bar {
  width: 50%;
}
.skeleton-text.is-length-25 .skeleton-text__bar {
  width: 25%;
}

.skeleton-rectangle {
  width: var(--skeleton-rectangle-width, 64px);
  height: var(--skeleton-rectangle-height, 64px);
  border-radius: var(--skeleton-rectangle-radius, 3px);
  background: linear-gradient(90deg, var(--skeleton-rectangle-color, rgba(112, 115, 124, 0.05)) 25%, color-mix(in srgb, var(--skeleton-rectangle-color, rgba(112, 115, 124, 0.05)), white 30%) 50%, var(--skeleton-rectangle-color, rgba(112, 115, 124, 0.05)) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-circle {
  width: var(--skeleton-circle-size, 64px);
  height: var(--skeleton-circle-size, 64px);
  border-radius: 50%;
  background: linear-gradient(90deg, var(--skeleton-circle-color, rgba(112, 115, 124, 0.05)) 25%, color-mix(in srgb, var(--skeleton-circle-color, rgba(112, 115, 124, 0.05)), white 30%) 50%, var(--skeleton-circle-color, rgba(112, 115, 124, 0.05)) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--form-field-gap, var(--spacing-sm));
  width: 100%;
}
.form-field__label {
  font-family: var(--typography-font-family-label-1-medium, var(--font-family));
  font-weight: var(--typography-font-weight-label-1-medium);
  font-size: calc(var(--typography-font-size-label-1-medium) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-label-1-medium) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-label-1-medium);
  font-size: var(--form-field-label-font-size);
  font-weight: var(--form-field-label-font-weight);
  color: var(--form-field-label-color, var(--text-strong));
}
.form-field__required {
  color: var(--form-field-required-color, var(--status-negative));
  margin-left: 2px;
}
.form-field__control {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.form-field__description {
  font-family: var(--typography-font-family-caption-1-regular, var(--font-family));
  font-weight: var(--typography-font-weight-caption-1-regular);
  font-size: calc(var(--typography-font-size-caption-1-regular) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-caption-1-regular) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-caption-1-regular);
  font-size: var(--form-field-description-font-size);
  font-weight: var(--form-field-description-font-weight);
  color: var(--form-field-description-color, var(--text-medium));
  margin: 0;
}
.form-field__error {
  font-family: var(--typography-font-family-caption-1-regular, var(--font-family));
  font-weight: var(--typography-font-weight-caption-1-regular);
  font-size: calc(var(--typography-font-size-caption-1-regular) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-caption-1-regular) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-caption-1-regular);
  font-size: var(--form-field-error-font-size);
  font-weight: var(--form-field-error-font-weight);
  color: var(--form-field-error-color, var(--status-negative));
  margin: 0;
}
.form-field.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.input {
  display: flex;
  align-items: stretch;
  width: 100%;
  cursor: text;
  overflow: hidden;
  background-color: var(--input-background, var(--component-fill-alternative));
  border: var(--input-border-width, 2px) solid var(--input-border-color, var(--border-normal-normal));
  border-radius: var(--input-border-radius, 12px);
  padding: 0 var(--input-padding-x, var(--spacing-md));
  transition: border-color 0.2s, background-color 0.2s, opacity 0.2s;
}
.input.is-sm {
  min-height: 40px;
  max-height: 40px;
}
.input.is-md {
  min-height: 48px;
  max-height: 48px;
}
.input.is-lg {
  min-height: 56px;
  max-height: 56px;
}
.input.is-focused {
  background-color: var(--input-focus-background, var(--background-normal));
  border-color: var(--input-focus-border-color, var(--primary-normal));
}
.input.is-disabled, .input.is-readonly {
  opacity: var(--input-disabled-opacity, 0.6);
  cursor: not-allowed;
}
.is-invalid .input {
  border-color: var(--input-invalid-border-color, var(--status-negative));
}
.input__field, .input__field::placeholder {
  font-family: var(--typography-font-family-body-1, var(--font-family));
  font-weight: var(--typography-font-weight-body-1);
  font-size: calc(var(--typography-font-size-body-1) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-1) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-1);
}
.input__field {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--input-text-color, var(--text-normal));
  padding: var(--input-padding-y, var(--spacing-sm)) 0;
}
.input__field::placeholder {
  color: var(--input-placeholder-color, var(--text-low));
}
.input__field:-webkit-autofill, .input__field:-webkit-autofill:hover, .input__field:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--input-text-color, var(--text-normal));
  -webkit-box-shadow: 0 0 0 1000px var(--input-background, var(--component-fill-alternative)) inset;
  transition: background-color 5000s ease-in-out 0s;
}
.input__prefix, .input__suffix {
  display: flex;
  align-items: center;
  color: var(--input-affix-color, var(--text-medium));
  flex-shrink: 0;
}
.input__prefix {
  padding-right: var(--input-affix-gap, var(--spacing-sm));
}
.input__suffix {
  padding-left: var(--input-affix-gap, var(--spacing-sm));
}

.textarea {
  flex-direction: column;
  overflow: visible;
}
.textarea__field {
  width: 100%;
  resize: vertical;
  min-height: 80px;
}
.textarea__counter {
  font-family: var(--typography-font-family-caption-2, var(--font-family));
  font-weight: var(--typography-font-weight-caption-2);
  font-size: calc(var(--typography-font-size-caption-2) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-caption-2) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-caption-2);
  color: var(--textarea-counter-color, var(--text-medium));
  align-self: flex-end;
  margin-top: var(--textarea-counter-gap, var(--spacing-2));
}

.select {
  width: 100%;
}
.select__trigger {
  align-items: center;
  justify-content: space-between;
  gap: var(--select-trigger-gap, var(--spacing-sm));
  cursor: pointer;
  text-align: left;
}
.select__trigger.is-open {
  background-color: var(--input-focus-background, var(--background-normal));
  border-color: var(--input-focus-border-color, var(--primary-normal));
}
.select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--typography-font-family-body-2-regular, var(--font-family));
  font-weight: var(--typography-font-weight-body-2-regular);
  font-size: calc(var(--typography-font-size-body-2-regular) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-2-regular) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-2-regular);
}
.select__value.is-placeholder {
  color: var(--select-placeholder-color, var(--text-low));
}
.select__chevron {
  display: inline-flex;
  align-items: center;
}
.is-open .select__chevron {
  transform: rotate(180deg);
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--checkbox-gap, var(--spacing-sm));
  cursor: pointer;
  user-select: none;
  font-family: var(--typography-font-family-body-2-regular, var(--font-family));
  font-weight: var(--typography-font-weight-body-2-regular);
  font-size: calc(var(--typography-font-size-body-2-regular) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-2-regular) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-2-regular);
}
.checkbox__control {
  width: var(--checkbox-control-size, 16px);
  height: var(--checkbox-control-size, 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--checkbox-control-border-radius, 4px);
  border: var(--checkbox-control-border-width, 2px) solid var(--checkbox-control-border-color, var(--border-normal-normal));
  background-color: var(--checkbox-control-background, var(--background-normal));
  color: var(--checkbox-icon-color, var(--inverse-text-normal));
  transition: background-color 0.15s, border-color 0.15s;
}
.checkbox.is-checked .checkbox__control, .checkbox.is-indeterminate .checkbox__control {
  background-color: var(--checkbox-checked-background, var(--primary-normal));
  border-color: var(--checkbox-checked-border-color, var(--primary-normal));
}
.checkbox.is-focused .checkbox__control {
  box-shadow: 0 0 0 3px var(--checkbox-focus-ring, var(--primary-alternative));
}
.checkbox.is-disabled {
  opacity: var(--checkbox-disabled-opacity, 0.6);
  cursor: not-allowed;
}
.checkbox__label {
  color: var(--checkbox-label-color, var(--text-normal));
}
.checkbox__icon {
  width: var(--checkbox-icon-size, 12px);
  height: var(--checkbox-icon-size, 12px);
}

.radio-group {
  display: flex;
  gap: var(--radio-group-gap, var(--spacing-md));
}
.radio-group.is-vertical {
  flex-direction: column;
}
.radio-group.is-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--radio-gap, var(--spacing-sm));
  cursor: pointer;
  user-select: none;
}
.is-sm .radio {
  --radio-control-size: 16px;
  font-family: var(--typography-font-family-label-1-regular, var(--font-family));
  font-weight: var(--typography-font-weight-label-1-regular);
  font-size: calc(var(--typography-font-size-label-1-regular) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-label-1-regular) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-label-1-regular);
}
.is-md .radio {
  --radio-control-size: 20px;
  font-family: var(--typography-font-family-body-2-regular, var(--font-family));
  font-weight: var(--typography-font-weight-body-2-regular);
  font-size: calc(var(--typography-font-size-body-2-regular) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-2-regular) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-2-regular);
}
.radio__control {
  width: var(--radio-control-size, 20px);
  height: var(--radio-control-size, 20px);
  border-radius: 9999px;
  border: var(--radio-control-border-width, 2px) solid var(--radio-control-border-color, var(--border-normal-normal));
  background-color: var(--radio-control-background, var(--background-normal));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.radio__indicator {
  width: 60%;
  height: 60%;
  border-radius: 9999px;
  background-color: transparent;
  transition: background-color 0.15s;
}
.radio.is-checked .radio__control {
  border-color: var(--radio-checked-border-color, var(--primary-normal));
}
.radio.is-checked .radio__indicator {
  background-color: var(--radio-checked-indicator-color, var(--primary-normal));
}
.radio.is-disabled {
  opacity: var(--radio-disabled-opacity, 0.6);
  cursor: not-allowed;
}
.radio__label {
  color: var(--radio-label-color, var(--text-normal));
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--switch-gap, var(--spacing-sm));
  cursor: pointer;
  user-select: none;
  font-family: var(--typography-font-family-body-2-regular, var(--font-family));
  font-weight: var(--typography-font-weight-body-2-regular);
  font-size: calc(var(--typography-font-size-body-2-regular) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-2-regular) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-2-regular);
}
.switch.is-sm {
  --switch-w: 32px;
  --switch-h: 18px;
  --switch-thumb: 14px;
}
.switch.is-md {
  --switch-w: 44px;
  --switch-h: 24px;
  --switch-thumb: 20px;
}
.switch__control {
  position: relative;
  width: var(--switch-w, 44px);
  height: var(--switch-h, 24px);
  border-radius: 9999px;
  background-color: var(--switch-track-background, var(--component-fill-alternative));
  transition: background-color 0.2s;
  flex-shrink: 0;
}
.switch__thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: var(--switch-thumb, 20px);
  height: var(--switch-thumb, 20px);
  border-radius: 50%;
  background-color: var(--switch-thumb-background, var(--background-normal));
  box-shadow: var(--switch-thumb-shadow, 0 1px 2px rgba(0, 0, 0, 0.2));
  transition: left 0.2s, transform 0.2s;
}
.switch.is-checked .switch__control {
  background-color: var(--switch-checked-track-background, var(--primary-normal));
}
.switch.is-checked .switch__thumb {
  left: calc(var(--switch-w, 44px) - var(--switch-thumb, 20px) - 2px);
}
.switch.is-focused .switch__control {
  box-shadow: 0 0 0 3px var(--switch-focus-ring, var(--primary-alternative));
}
.switch.is-disabled {
  opacity: var(--switch-disabled-opacity, 0.6);
  cursor: not-allowed;
}
.switch__label {
  color: var(--switch-label-color, var(--text-normal));
}

.number-input__steppers {
  display: none;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}
.number-input__increment, .number-input__decrement {
  display: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: var(--number-input-stepper-color, var(--text-medium));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.15s, color 0.15s;
}
.number-input__increment:hover:not(:disabled), .number-input__decrement:hover:not(:disabled) {
  color: var(--number-input-stepper-hover-color, var(--text-medium));
}
.number-input__increment:disabled, .number-input__decrement:disabled {
  opacity: 1;
  cursor: not-allowed;
}
.number-input__increment {
  transform: translateY(3px);
}
.number-input__decrement {
  transform: translateY(-3px);
}

.phone-input__prefix {
  padding-right: 0;
  border-right: 1px solid var(--input-border-color, var(--border-normal-neutral));
  margin-right: var(--input-affix-gap, var(--spacing-sm));
}
.phone-input__country-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-xs) 0 0;
  background: transparent;
  border: none;
  color: var(--input-text-color, var(--text-normal));
  cursor: pointer;
  outline: none;
}
.phone-input__country-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.phone-input__country-trigger .fi {
  width: 24px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
}
.phone-input__dial {
  font-family: var(--typography-font-family-body-1, var(--font-family));
  font-weight: var(--typography-font-weight-body-1);
  font-size: calc(var(--typography-font-size-body-1) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-1) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-1);
  color: var(--input-text-color, var(--text-normal));
}
.phone-input__popover {
  display: flex;
  flex-direction: column;
  min-width: 320px;
  max-width: 360px;
  max-height: 360px;
  overflow: hidden;
}
.phone-input__search {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-normal-alternative);
  color: var(--text-medium);
}
.phone-input__search-field {
  font-family: var(--typography-font-family-body-2, var(--font-family));
  font-weight: var(--typography-font-weight-body-2);
  font-size: calc(var(--typography-font-size-body-2) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-2) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-2);
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-normal);
}
.phone-input__search-field::placeholder {
  color: var(--text-low);
}
.phone-input__search-field::-webkit-search-cancel-button {
  appearance: none;
}
.phone-input__list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: var(--spacing-2xs) 0;
}
.phone-input__list-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  cursor: pointer;
  user-select: none;
  color: var(--text-normal);
}
.phone-input__list-item .fi {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  flex-shrink: 0;
}
.phone-input__list-item:hover, .phone-input__list-item.is-selected {
  background-color: var(--component-fill-normal);
}
.phone-input__list-name {
  font-family: var(--typography-font-family-body-2, var(--font-family));
  font-weight: var(--typography-font-weight-body-2);
  font-size: calc(var(--typography-font-size-body-2) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-2) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-2);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-input__list-dial {
  font-family: var(--typography-font-family-label-1, var(--font-family));
  font-weight: var(--typography-font-weight-label-1);
  font-size: calc(var(--typography-font-size-label-1) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-label-1) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-label-1);
  color: var(--text-medium);
  flex-shrink: 0;
}
.phone-input__empty {
  font-family: var(--typography-font-family-body-2, var(--font-family));
  font-weight: var(--typography-font-weight-body-2);
  font-size: calc(var(--typography-font-size-body-2) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-2) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-2);
  color: var(--text-medium);
  text-align: center;
  padding: var(--spacing-md);
}

.date-picker__input {
  cursor: pointer;
}
.date-picker__input:disabled {
  cursor: not-allowed;
}
.date-picker__trigger {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--date-picker-trigger-color, var(--text-medium));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.date-picker__trigger:disabled {
  opacity: var(--date-picker-trigger-disabled-opacity, 0.5);
  cursor: not-allowed;
}
.date-picker__calendar {
  min-width: 280px;
  max-width: none;
  width: max-content;
  padding: var(--date-picker-calendar-padding, var(--spacing-md));
}
.date-picker__calendars {
  display: flex;
  gap: var(--date-picker-calendars-gap, var(--spacing-md));
}
.date-picker__calendar-view {
  flex: 1 1 260px;
  min-width: 260px;
}
.date-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--date-picker-header-gap, var(--spacing-sm));
  margin-bottom: var(--date-picker-header-gap, var(--spacing-sm));
}
.date-picker__view-trigger {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--date-picker-view-trigger-gap, var(--spacing-xs));
  color: var(--date-picker-view-trigger-color, var(--text-strong));
}
.date-picker__view-trigger:hover:not(:disabled) {
  color: var(--date-picker-view-trigger-hover-color, var(--primary-normal));
}
.date-picker__title {
  font-family: var(--typography-font-family-body-1, var(--font-family));
  font-weight: var(--typography-font-weight-body-1);
  font-size: calc(var(--typography-font-size-body-1) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-1) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-1);
  font-weight: var(--font-weight-bold);
  color: inherit;
}
.date-picker__nav-group {
  display: inline-flex;
  gap: var(--date-picker-nav-group-gap, 4px);
}
.date-picker__nav {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--date-picker-nav-color, var(--text-normal));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.date-picker__nav:hover:not(:disabled) {
  background-color: var(--date-picker-nav-hover-background, var(--component-fill-alternative));
}
.date-picker__nav:disabled {
  opacity: var(--date-picker-nav-disabled-opacity, 0.4);
  cursor: not-allowed;
}
.date-picker__nav.is-placeholder {
  visibility: hidden;
  pointer-events: none;
}
.date-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--date-picker-weekdays-gap, var(--spacing-xs));
}
.date-picker__weekday {
  font-family: var(--typography-font-family-caption-1, var(--font-family));
  font-weight: var(--typography-font-weight-caption-1);
  font-size: calc(var(--typography-font-size-caption-1) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-caption-1) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-caption-1);
  color: var(--date-picker-weekday-color, var(--text-medium));
  text-align: center;
  padding: var(--date-picker-weekday-padding-y, var(--spacing-xs)) 0;
}
.date-picker__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.date-picker__months, .date-picker__years {
  display: flex;
  flex-direction: column;
  gap: var(--date-picker-grid-gap, var(--spacing-sm));
}
.date-picker__grid-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--date-picker-grid-gap, var(--spacing-sm));
}

[data-scope=date-picker][data-part=table-cell-trigger][data-view=day] {
  border: none;
  min-height: 36px;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--date-picker-day-text-color, var(--text-normal));
  font-family: var(--typography-font-family-body-2, var(--font-family));
  font-weight: var(--typography-font-weight-body-2);
  font-size: calc(var(--typography-font-size-body-2) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-2) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-2);
  transition: background-color 0.15s, color 0.15s;
  position: relative;
  z-index: 0;
}
[data-scope=date-picker][data-part=table-cell-trigger][data-view=month], [data-scope=date-picker][data-part=table-cell-trigger][data-view=year] {
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: var(--date-picker-cell-padding-y, var(--spacing-sm)) var(--date-picker-cell-padding-x, var(--spacing-sm));
  color: var(--date-picker-cell-color, var(--text-normal));
  font-family: var(--typography-font-family-body-2, var(--font-family));
  font-weight: var(--typography-font-weight-body-2);
  font-size: calc(var(--typography-font-size-body-2) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-2) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-2);
  text-align: center;
  transition: background-color 0.15s, color 0.15s;
  position: relative;
  z-index: 0;
}
[data-scope=date-picker][data-part=table-cell-trigger] > * {
  position: relative;
  z-index: 2;
}
[data-scope=date-picker][data-part=table-cell-trigger][data-in-range]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--date-picker-day-in-range-background, var(--primary-subtle));
  z-index: 0;
}
[data-scope=date-picker][data-part=table-cell-trigger][data-range-start]::before {
  left: 50%;
  right: 0;
}
[data-scope=date-picker][data-part=table-cell-trigger][data-range-end]::before {
  left: 0;
  right: 50%;
}
[data-scope=date-picker][data-part=table-cell-trigger][data-selected]::after, [data-scope=date-picker][data-part=table-cell-trigger][data-range-start]::after, [data-scope=date-picker][data-part=table-cell-trigger][data-range-end]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--date-picker-day-selected-background, var(--primary-normal));
  z-index: 1;
}
[data-scope=date-picker][data-part=table-cell-trigger]:hover:not(:disabled):not([data-selected]):not([data-range-start]):not([data-range-end]):not([data-in-range]) {
  background-color: var(--date-picker-day-hover-background, var(--component-fill-alternative));
}
[data-scope=date-picker][data-part=table-cell-trigger][data-outside-range] {
  color: var(--date-picker-day-outside-color, var(--text-low));
}
[data-scope=date-picker][data-part=table-cell-trigger][data-today]:not([data-selected]):not([data-range-start]):not([data-range-end]) {
  background-color: var(--date-picker-day-today-background, var(--primary-subtle));
  color: var(--date-picker-day-today-color, var(--primary-normal));
}
[data-scope=date-picker][data-part=table-cell-trigger][data-selected], [data-scope=date-picker][data-part=table-cell-trigger][data-range-start], [data-scope=date-picker][data-part=table-cell-trigger][data-range-end] {
  color: var(--date-picker-day-selected-color, var(--static-white));
}
[data-scope=date-picker][data-part=table-cell-trigger][data-disabled] {
  opacity: var(--date-picker-day-disabled-opacity, 0.4);
  cursor: not-allowed;
}

.time-picker__input {
  cursor: pointer;
}
.time-picker__input:disabled {
  cursor: not-allowed;
}
.time-picker__body-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--time-picker-gap, var(--spacing-sm));
  padding: var(--time-picker-padding, var(--spacing-md));
  min-width: 240px;
}
.time-picker__body {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: var(--time-picker-body-gap, var(--spacing-sm));
}
.time-picker__column {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: var(--time-picker-column-max-height, 220px);
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.time-picker__column::-webkit-scrollbar {
  display: none;
}
.time-picker__cell {
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: var(--time-picker-cell-padding-y, var(--spacing-xs)) var(--time-picker-cell-padding-x, var(--spacing-sm));
  color: var(--time-picker-cell-color, var(--text-normal));
  font-family: var(--typography-font-family-body-2, var(--font-family));
  font-weight: var(--typography-font-weight-body-2);
  font-size: calc(var(--typography-font-size-body-2) * var(--typography-scale, 1));
  line-height: calc(var(--typography-line-height-body-2) * var(--typography-scale, 1));
  letter-spacing: var(--typography-letter-spacing-body-2);
  transition: background-color 0.15s, color 0.15s;
  text-align: center;
}
.time-picker__cell:hover:not(:disabled):not(.is-active) {
  background-color: var(--time-picker-cell-hover-background, var(--component-fill-alternative));
}
.time-picker__cell:disabled {
  opacity: var(--time-picker-cell-disabled-opacity, 0.4);
  cursor: not-allowed;
}
.time-picker__cell.is-active {
  background-color: var(--time-picker-cell-active-background, var(--primary-subtle));
  color: var(--time-picker-cell-active-color, var(--primary-normal));
}

.slider {
  --slider-track-size: 4px;
  --slider-thumb-size: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.slider__labels {
  display: flex;
  justify-content: space-between;
}
.slider__control {
  position: relative;
  width: 100%;
  height: var(--slider-thumb-size);
}
.slider__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: var(--slider-track-size);
  border-radius: 9999px;
  background-color: var(--slider-track-color, var(--component-fill-strong));
}
.slider__range {
  position: absolute;
  height: var(--slider-track-size);
  border-radius: 9999px;
  background-color: var(--slider-range-color, var(--primary-normal));
}
.slider__thumb {
  top: 0;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border-radius: 50%;
  background-color: var(--slider-thumb-color, var(--primary-normal));
  cursor: grab;
  outline: none;
}
.slider__thumb:focus-visible {
  box-shadow: 0 0 0 4px var(--slider-thumb-focus-ring, var(--primary-subtle));
}
.slider__thumb:active {
  cursor: grabbing;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

@media (max-width: 1279px) {
  .tablet-flex {
    display: flex;
  }
  .tablet-grid {
    display: grid;
  }
}
@media (max-width: 743px) {
  .mobile-flex {
    display: flex;
  }
  .mobile-grid {
    display: grid;
  }
  .mobile-hidden {
    display: none !important;
  }
}
.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

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

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

@media (max-width: 1279px) {
  .tablet-flex-row {
    flex-direction: row;
  }
  .tablet-flex-col {
    flex-direction: column;
  }
  .tablet-flex-row-reverse {
    flex-direction: row-reverse;
  }
  .tablet-flex-col-reverse {
    flex-direction: column-reverse;
  }
  .tablet-items-start {
    align-items: flex-start;
  }
  .tablet-items-center {
    align-items: center;
  }
  .tablet-items-end {
    align-items: flex-end;
  }
  .tablet-items-stretch {
    align-items: stretch;
  }
  .tablet-justify-start {
    justify-content: flex-start;
  }
  .tablet-justify-center {
    justify-content: center;
  }
  .tablet-justify-end {
    justify-content: flex-end;
  }
  .tablet-justify-between {
    justify-content: space-between;
  }
  .tablet-justify-around {
    justify-content: space-around;
  }
}
@media (max-width: 743px) {
  .mobile-flex-row {
    flex-direction: row !important;
  }
  .mobile-flex-col {
    flex-direction: column !important;
  }
  .mobile-flex-row-reverse {
    flex-direction: row-reverse !important;
  }
  .mobile-flex-col-reverse {
    flex-direction: column-reverse !important;
  }
  .mobile-items-start {
    align-items: flex-start !important;
  }
  .mobile-items-center {
    align-items: center !important;
  }
  .mobile-items-end {
    align-items: flex-end !important;
  }
  .mobile-items-stretch {
    align-items: stretch !important;
  }
  .mobile-justify-start {
    justify-content: flex-start !important;
  }
  .mobile-justify-center {
    justify-content: center !important;
  }
  .mobile-justify-end {
    justify-content: flex-end !important;
  }
  .mobile-justify-between {
    justify-content: space-between !important;
  }
  .mobile-justify-around {
    justify-content: space-around !important;
  }
}
.gap-none {
  gap: var(--spacing-none);
}

.gap-3xs {
  gap: var(--spacing-3xs);
}

.gap-2xs {
  gap: var(--spacing-2xs);
}

.gap-xs {
  gap: var(--spacing-xs);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

.gap-2xl {
  gap: var(--spacing-2xl);
}

.gap-3xl {
  gap: var(--spacing-3xl);
}

.gap-4xl {
  gap: var(--spacing-4xl);
}

.gap-5xl {
  gap: var(--spacing-5xl);
}

.gap-6xl {
  gap: var(--spacing-6xl);
}

.gap-7xl {
  gap: var(--spacing-7xl);
}

.gap-8xl {
  gap: var(--spacing-8xl);
}

.py-none {
  padding-top: var(--spacing-none);
  padding-bottom: var(--spacing-none);
}

.px-none {
  padding-left: var(--spacing-none);
  padding-right: var(--spacing-none);
}

.py-3xs {
  padding-top: var(--spacing-3xs);
  padding-bottom: var(--spacing-3xs);
}

.px-3xs {
  padding-left: var(--spacing-3xs);
  padding-right: var(--spacing-3xs);
}

.py-2xs {
  padding-top: var(--spacing-2xs);
  padding-bottom: var(--spacing-2xs);
}

.px-2xs {
  padding-left: var(--spacing-2xs);
  padding-right: var(--spacing-2xs);
}

.py-xs {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

.px-xs {
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
}

.py-sm {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.px-sm {
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

.py-md {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.px-md {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.py-lg {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.px-lg {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.py-xl {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

.px-xl {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}

.py-2xl {
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}

.px-2xl {
  padding-left: var(--spacing-2xl);
  padding-right: var(--spacing-2xl);
}

.py-3xl {
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-3xl);
}

.px-3xl {
  padding-left: var(--spacing-3xl);
  padding-right: var(--spacing-3xl);
}

.py-4xl {
  padding-top: var(--spacing-4xl);
  padding-bottom: var(--spacing-4xl);
}

.px-4xl {
  padding-left: var(--spacing-4xl);
  padding-right: var(--spacing-4xl);
}

.py-5xl {
  padding-top: var(--spacing-5xl);
  padding-bottom: var(--spacing-5xl);
}

.px-5xl {
  padding-left: var(--spacing-5xl);
  padding-right: var(--spacing-5xl);
}

.py-6xl {
  padding-top: var(--spacing-6xl);
  padding-bottom: var(--spacing-6xl);
}

.px-6xl {
  padding-left: var(--spacing-6xl);
  padding-right: var(--spacing-6xl);
}

.py-7xl {
  padding-top: var(--spacing-7xl);
  padding-bottom: var(--spacing-7xl);
}

.px-7xl {
  padding-left: var(--spacing-7xl);
  padding-right: var(--spacing-7xl);
}

.py-8xl {
  padding-top: var(--spacing-8xl);
  padding-bottom: var(--spacing-8xl);
}

.px-8xl {
  padding-left: var(--spacing-8xl);
  padding-right: var(--spacing-8xl);
}

@media (max-width: 1279px) {
  .tablet-gap-none {
    gap: var(--spacing-none);
  }
  .tablet-py-none {
    padding-top: var(--spacing-none);
    padding-bottom: var(--spacing-none);
  }
  .tablet-px-none {
    padding-left: var(--spacing-none);
    padding-right: var(--spacing-none);
  }
  .tablet-gap-3xs {
    gap: var(--spacing-3xs);
  }
  .tablet-py-3xs {
    padding-top: var(--spacing-3xs);
    padding-bottom: var(--spacing-3xs);
  }
  .tablet-px-3xs {
    padding-left: var(--spacing-3xs);
    padding-right: var(--spacing-3xs);
  }
  .tablet-gap-2xs {
    gap: var(--spacing-2xs);
  }
  .tablet-py-2xs {
    padding-top: var(--spacing-2xs);
    padding-bottom: var(--spacing-2xs);
  }
  .tablet-px-2xs {
    padding-left: var(--spacing-2xs);
    padding-right: var(--spacing-2xs);
  }
  .tablet-gap-xs {
    gap: var(--spacing-xs);
  }
  .tablet-py-xs {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
  }
  .tablet-px-xs {
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
  }
  .tablet-gap-sm {
    gap: var(--spacing-sm);
  }
  .tablet-py-sm {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
  }
  .tablet-px-sm {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
  .tablet-gap-md {
    gap: var(--spacing-md);
  }
  .tablet-py-md {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
  }
  .tablet-px-md {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
  .tablet-gap-lg {
    gap: var(--spacing-lg);
  }
  .tablet-py-lg {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }
  .tablet-px-lg {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
  .tablet-gap-xl {
    gap: var(--spacing-xl);
  }
  .tablet-py-xl {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }
  .tablet-px-xl {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
  }
  .tablet-gap-2xl {
    gap: var(--spacing-2xl);
  }
  .tablet-py-2xl {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
  }
  .tablet-px-2xl {
    padding-left: var(--spacing-2xl);
    padding-right: var(--spacing-2xl);
  }
  .tablet-gap-3xl {
    gap: var(--spacing-3xl);
  }
  .tablet-py-3xl {
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl);
  }
  .tablet-px-3xl {
    padding-left: var(--spacing-3xl);
    padding-right: var(--spacing-3xl);
  }
  .tablet-gap-4xl {
    gap: var(--spacing-4xl);
  }
  .tablet-py-4xl {
    padding-top: var(--spacing-4xl);
    padding-bottom: var(--spacing-4xl);
  }
  .tablet-px-4xl {
    padding-left: var(--spacing-4xl);
    padding-right: var(--spacing-4xl);
  }
  .tablet-gap-5xl {
    gap: var(--spacing-5xl);
  }
  .tablet-py-5xl {
    padding-top: var(--spacing-5xl);
    padding-bottom: var(--spacing-5xl);
  }
  .tablet-px-5xl {
    padding-left: var(--spacing-5xl);
    padding-right: var(--spacing-5xl);
  }
  .tablet-gap-6xl {
    gap: var(--spacing-6xl);
  }
  .tablet-py-6xl {
    padding-top: var(--spacing-6xl);
    padding-bottom: var(--spacing-6xl);
  }
  .tablet-px-6xl {
    padding-left: var(--spacing-6xl);
    padding-right: var(--spacing-6xl);
  }
  .tablet-gap-7xl {
    gap: var(--spacing-7xl);
  }
  .tablet-py-7xl {
    padding-top: var(--spacing-7xl);
    padding-bottom: var(--spacing-7xl);
  }
  .tablet-px-7xl {
    padding-left: var(--spacing-7xl);
    padding-right: var(--spacing-7xl);
  }
  .tablet-gap-8xl {
    gap: var(--spacing-8xl);
  }
  .tablet-py-8xl {
    padding-top: var(--spacing-8xl);
    padding-bottom: var(--spacing-8xl);
  }
  .tablet-px-8xl {
    padding-left: var(--spacing-8xl);
    padding-right: var(--spacing-8xl);
  }
}
@media (max-width: 743px) {
  .mobile-gap-none {
    gap: var(--spacing-none);
  }
  .mobile-py-none {
    padding-top: var(--spacing-none);
    padding-bottom: var(--spacing-none);
  }
  .mobile-px-none {
    padding-left: var(--spacing-none);
    padding-right: var(--spacing-none);
  }
  .mobile-gap-3xs {
    gap: var(--spacing-3xs);
  }
  .mobile-py-3xs {
    padding-top: var(--spacing-3xs);
    padding-bottom: var(--spacing-3xs);
  }
  .mobile-px-3xs {
    padding-left: var(--spacing-3xs);
    padding-right: var(--spacing-3xs);
  }
  .mobile-gap-2xs {
    gap: var(--spacing-2xs);
  }
  .mobile-py-2xs {
    padding-top: var(--spacing-2xs);
    padding-bottom: var(--spacing-2xs);
  }
  .mobile-px-2xs {
    padding-left: var(--spacing-2xs);
    padding-right: var(--spacing-2xs);
  }
  .mobile-gap-xs {
    gap: var(--spacing-xs);
  }
  .mobile-py-xs {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
  }
  .mobile-px-xs {
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
  }
  .mobile-gap-sm {
    gap: var(--spacing-sm);
  }
  .mobile-py-sm {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
  }
  .mobile-px-sm {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
  .mobile-gap-md {
    gap: var(--spacing-md);
  }
  .mobile-py-md {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
  }
  .mobile-px-md {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
  .mobile-gap-lg {
    gap: var(--spacing-lg);
  }
  .mobile-py-lg {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }
  .mobile-px-lg {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
  .mobile-gap-xl {
    gap: var(--spacing-xl);
  }
  .mobile-py-xl {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }
  .mobile-px-xl {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
  }
  .mobile-gap-2xl {
    gap: var(--spacing-2xl);
  }
  .mobile-py-2xl {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
  }
  .mobile-px-2xl {
    padding-left: var(--spacing-2xl);
    padding-right: var(--spacing-2xl);
  }
  .mobile-gap-3xl {
    gap: var(--spacing-3xl);
  }
  .mobile-py-3xl {
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl);
  }
  .mobile-px-3xl {
    padding-left: var(--spacing-3xl);
    padding-right: var(--spacing-3xl);
  }
  .mobile-gap-4xl {
    gap: var(--spacing-4xl);
  }
  .mobile-py-4xl {
    padding-top: var(--spacing-4xl);
    padding-bottom: var(--spacing-4xl);
  }
  .mobile-px-4xl {
    padding-left: var(--spacing-4xl);
    padding-right: var(--spacing-4xl);
  }
  .mobile-gap-5xl {
    gap: var(--spacing-5xl);
  }
  .mobile-py-5xl {
    padding-top: var(--spacing-5xl);
    padding-bottom: var(--spacing-5xl);
  }
  .mobile-px-5xl {
    padding-left: var(--spacing-5xl);
    padding-right: var(--spacing-5xl);
  }
  .mobile-gap-6xl {
    gap: var(--spacing-6xl);
  }
  .mobile-py-6xl {
    padding-top: var(--spacing-6xl);
    padding-bottom: var(--spacing-6xl);
  }
  .mobile-px-6xl {
    padding-left: var(--spacing-6xl);
    padding-right: var(--spacing-6xl);
  }
  .mobile-gap-7xl {
    gap: var(--spacing-7xl);
  }
  .mobile-py-7xl {
    padding-top: var(--spacing-7xl);
    padding-bottom: var(--spacing-7xl);
  }
  .mobile-px-7xl {
    padding-left: var(--spacing-7xl);
    padding-right: var(--spacing-7xl);
  }
  .mobile-gap-8xl {
    gap: var(--spacing-8xl);
  }
  .mobile-py-8xl {
    padding-top: var(--spacing-8xl);
    padding-bottom: var(--spacing-8xl);
  }
  .mobile-px-8xl {
    padding-left: var(--spacing-8xl);
    padding-right: var(--spacing-8xl);
  }
}
.w-full {
  width: 100%;
}

.w-fit {
  width: fit-content;
}

@media (max-width: 1279px) {
  .tablet-w-full {
    width: 100%;
  }
  .tablet-w-fit {
    width: fit-content;
  }
}
@media (max-width: 743px) {
  .mobile-w-full {
    width: 100%;
  }
  .mobile-w-fit {
    width: fit-content;
  }
}
.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

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

.grid-cols-7 {
  grid-template-columns: repeat(7, 1fr);
}

.grid-cols-8 {
  grid-template-columns: repeat(8, 1fr);
}

.grid-cols-9 {
  grid-template-columns: repeat(9, 1fr);
}

.grid-cols-10 {
  grid-template-columns: repeat(10, 1fr);
}

.grid-cols-11 {
  grid-template-columns: repeat(11, 1fr);
}

.grid-cols-12 {
  grid-template-columns: repeat(12, 1fr);
}

@media (max-width: 1279px) {
  .tablet-grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .tablet-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .tablet-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tablet-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .tablet-grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .tablet-grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .tablet-grid-cols-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .tablet-grid-cols-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .tablet-grid-cols-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .tablet-grid-cols-10 {
    grid-template-columns: repeat(10, 1fr);
  }
  .tablet-grid-cols-11 {
    grid-template-columns: repeat(11, 1fr);
  }
  .tablet-grid-cols-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}
@media (max-width: 743px) {
  .mobile-grid-cols-1 {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .mobile-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .mobile-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .mobile-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .mobile-grid-cols-5 {
    grid-template-columns: repeat(5, 1fr) !important;
  }
  .mobile-grid-cols-6 {
    grid-template-columns: repeat(6, 1fr) !important;
  }
  .mobile-grid-cols-7 {
    grid-template-columns: repeat(7, 1fr) !important;
  }
  .mobile-grid-cols-8 {
    grid-template-columns: repeat(8, 1fr) !important;
  }
  .mobile-grid-cols-9 {
    grid-template-columns: repeat(9, 1fr) !important;
  }
  .mobile-grid-cols-10 {
    grid-template-columns: repeat(10, 1fr) !important;
  }
  .mobile-grid-cols-11 {
    grid-template-columns: repeat(11, 1fr) !important;
  }
  .mobile-grid-cols-12 {
    grid-template-columns: repeat(12, 1fr) !important;
  }
}
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.overflow-visible {
  overflow: visible;
}

.overflow-hidden {
  overflow: hidden;
}