@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');/* Foundation */:root {
  --dimension-0x: 0;
  --dimension-0-25x: 0.0625rem;
  --dimension-0-5x: 0.125rem;
  --dimension-1x: 0.25rem;
  --dimension-1-5x: 0.375rem;
  --dimension-2x: 0.5rem;
  --dimension-3x: 0.75rem;
  --dimension-3-5x: 0.875rem;
  --dimension-4x: 1rem;
  --dimension-4-5x: 1.125rem;
  --dimension-5x: 1.25rem;
  --dimension-6x: 1.5rem;
  --dimension-7x: 1.75rem;
  --dimension-8x: 2rem;
  --dimension-9x: 2.25rem;
  --dimension-10x: 2.5rem;
  --dimension-11x: 2.75rem;
  --dimension-12x: 3rem;
  --dimension-13x: 3.25rem;
  --dimension-14x: 3.5rem;
  --dimension-15x: 3.75rem;
  --dimension-16x: 4rem;
  --dimension-17x: 4.25rem;
  --dimension-18x: 4.5rem;
  --dimension-19x: 4.75rem;
  --dimension-20x: 5rem;
}:root {
  --device-name: desktop;
  --layout-grid-columns: 0.75rem;
  --layout-grid-margin: var(--dimension-8x);
  --layout-grid-gutter: var(--dimension-6x);
  --layout-sidebar-width: 17.5rem;
  --typography-display1-size: var(--dimension-15x);
  --typography-display1-line-height: var(--dimension-17x);
  --typography-display2-size: var(--dimension-12x);
  --typography-display2-line-height: var(--dimension-14x);
  --typography-display3-size: var(--dimension-10x);
  --typography-display3-line-height: var(--dimension-11x);
  --typography-title1-size: var(--dimension-8x);
  --typography-title1-line-height: var(--dimension-9x);
  --typography-title2-size: var(--dimension-6x);
  --typography-title2-line-height: var(--dimension-7x);
  --typography-title3-size: var(--dimension-5x);
  --typography-title3-line-height: var(--dimension-6x);
  --spacing-stack-1x: var(--dimension-1x);
  --spacing-stack-2x: var(--dimension-2x);
  --spacing-stack-3x: var(--dimension-4x);
  --spacing-stack-4x: var(--dimension-6x);
  --spacing-stack-5x: var(--dimension-8x);
  --spacing-stack-6x: var(--dimension-10x);
  --spacing-stack-7x: var(--dimension-12x);
  --spacing-stack-none: var(--dimension-0x);
  --spacing-inset-1x: var(--dimension-1x);
  --spacing-inset-2x: var(--dimension-2x);
  --spacing-inset-3x: var(--dimension-4x);
  --spacing-inset-4x: var(--dimension-6x);
  --spacing-inset-5x: var(--dimension-8x);
  --spacing-inset-6x: var(--dimension-10x);
  --spacing-inset-7x: var(--dimension-12x);
  --spacing-inset-none: var(--dimension-0x);
  --spacing-component-1x: var(--dimension-0-5x);
  --spacing-component-2x: var(--dimension-1x);
  --spacing-component-3x: var(--dimension-1-5x);
  --spacing-component-4x: var(--dimension-2x);
  --spacing-component-5x: var(--dimension-3x);
  --spacing-component-6x: var(--dimension-4x);
  --spacing-component-7x: var(--dimension-5x);
  --spacing-component-8x: var(--dimension-6x);
  --spacing-component-none: var(--dimension-0x);

  --radius-full: 624.9375rem;
  --radius-xs: var(--dimension-1x);
  --radius-sm: var(--dimension-2x);
  --radius-md: var(--dimension-3x);
  --radius-lg: var(--dimension-4x);
  --radius-xl: var(--dimension-6x);
}/* stack bottom */.spacing-stack-b-1 {
  margin-bottom: var(--spacing-stack-1x);
}.spacing-stack-b-2 {
  margin-bottom: var(--spacing-stack-2x);
}.spacing-stack-b-3 {
  margin-bottom: var(--spacing-stack-3x);
}.spacing-stack-b-4 {
  margin-bottom: var(--spacing-stack-4x);
}.spacing-stack-b-5 {
  margin-bottom: var(--spacing-stack-5x);
}.spacing-stack-b-6 {
  margin-bottom: var(--spacing-stack-6x);
}.spacing-stack-b-7 {
  margin-bottom: var(--spacing-stack-7x);
}.spacing-stack-b-none {
  margin-bottom: var(--spacing-stack-none);
}/* stack top */.spacing-stack-t-1 {
  margin-top: var(--spacing-stack-1x);
}.spacing-stack-t-2 {
  margin-top: var(--spacing-stack-2x);
}.spacing-stack-t-3 {
  margin-top: var(--spacing-stack-3x);
}.spacing-stack-t-4 {
  margin-top: var(--spacing-stack-4x);
}.spacing-stack-t-5 {
  margin-top: var(--spacing-stack-5x);
}.spacing-stack-t-6 {
  margin-top: var(--spacing-stack-6x);
}.spacing-stack-t-7 {
  margin-top: var(--spacing-stack-7x);
}.spacing-stack-t-none {
  margin-top: var(--spacing-stack-none);
}/* inset left */.spacing-inset-l-1 {
  padding-left: var(--spacing-inset-1x);
}.spacing-inset-l-2 {
  padding-left: var(--spacing-inset-2x);
}.spacing-inset-l-3 {
  padding-left: var(--spacing-inset-3x);
}.spacing-inset-l-4 {
  padding-left: var(--spacing-inset-4x);
}.spacing-inset-l-5 {
  padding-left: var(--spacing-inset-5x);
}.spacing-inset-l-6 {
  padding-left: var(--spacing-inset-6x);
}.spacing-inset-l-7 {
  padding-left: var(--spacing-inset-7x);
}.spacing-inset-l-none {
  padding-left: var(--spacing-inset-none);
}/* inset right */.spacing-inset-r-1 {
  padding-right: var(--spacing-inset-1x);
}.spacing-inset-r-2 {
  padding-right: var(--spacing-inset-2x);
}.spacing-inset-r-3 {
  padding-right: var(--spacing-inset-3x);
}.spacing-inset-r-4 {
  padding-right: var(--spacing-inset-4x);
}.spacing-inset-r-5 {
  padding-right: var(--spacing-inset-5x);
}.spacing-inset-r-6 {
  padding-right: var(--spacing-inset-6x);
}.spacing-inset-r-7 {
  padding-right: var(--spacing-inset-7x);
}.spacing-inset-r-none {
  padding-right: var(--spacing-inset-none);
}/* component bottom */.spacing-component-b-1 {
  padding-bottom: var(--spacing-component-1x) !important;
}.spacing-component-b-2 {
  padding-bottom: var(--spacing-component-2x)!important;
}.spacing-component-b-3 {
  padding-bottom: var(--spacing-component-3x)!important;
}.spacing-component-b-4 {
  padding-bottom: var(--spacing-component-4x)!important;
}.spacing-component-b-5 {
  padding-bottom: var(--spacing-component-5x)!important;
}.spacing-component-b-6 {
  padding-bottom: var(--spacing-component-6x)!important;
}.spacing-component-b-7 {
  padding-bottom: var(--spacing-component-7x)!important;
}.spacing-component-b-8 {
  padding-bottom: var(--spacing-component-8x)!important;
}.spacing-component-b-none {
  padding-bottom: var(--spacing-component-none)!important;
}/* component left */.spacing-component-l-1 {
  padding-left: var(--spacing-component-1x)!important;
}.spacing-component-l-2 {
  padding-left: var(--spacing-component-2x)!important;
}.spacing-component-l-3 {
  padding-left: var(--spacing-component-3x)!important;
}.spacing-component-l-4 {
  padding-left: var(--spacing-component-4x)!important;
}.spacing-component-l-5 {
  padding-left: var(--spacing-component-5x)!important;
}.spacing-component-l-6 {
  padding-left: var(--spacing-component-6x)!important;
}.spacing-component-l-7 {
  padding-left: var(--spacing-component-7x)!important;
}.spacing-component-l-8 {
  padding-left: var(--spacing-component-8x)!important;
}.spacing-component-l-none {
  padding-left: var(--spacing-component-none)!important;
}/* component right */.spacing-component-r-1 {
  padding-right: var(--spacing-component-1x)!important;
}.spacing-component-r-2 {
  padding-right: var(--spacing-component-2x)!important;
}.spacing-component-r-3 {
  padding-right: var(--spacing-component-3x)!important;
}.spacing-component-r-4 {
  padding-right: var(--spacing-component-4x)!important;
}.spacing-component-r-5 {
  padding-right: var(--spacing-component-5x)!important;
}.spacing-component-r-6 {
  padding-right: var(--spacing-component-6x)!important;
}.spacing-component-r-7 {
  padding-right: var(--spacing-component-7x)!important;
}.spacing-component-r-8 {
  padding-right: var(--spacing-component-8x)!important;
}.spacing-component-r-none {
  padding-right: var(--spacing-component-none)!important;
}/* component top */.spacing-component-t-1 {
  padding-top: var(--spacing-component-1x)!important;
}.spacing-component-t-2 {
  padding-top: var(--spacing-component-2x)!important;
}.spacing-component-t-3 {
  padding-top: var(--spacing-component-3x)!important;
}.spacing-component-t-4 {
  padding-top: var(--spacing-component-4x)!important;
}.spacing-component-t-5 {
  padding-top: var(--spacing-component-5x)!important;
}.spacing-component-t-6 {
  padding-top: var(--spacing-component-6x)!important;
}.spacing-component-t-7 {
  padding-top: var(--spacing-component-7x)!important;
}.spacing-component-t-8 {
  padding-top: var(--spacing-component-8x)!important;
}.spacing-component-t-none {
  padding-top: var(--spacing-component-none)!important;
}/* component all */.spacing-component-1 {
  padding: var(--spacing-component-1x);
}.spacing-component-2 {
  padding: var(--spacing-component-2x);
}.spacing-component-3 {
  padding: var(--spacing-component-3x);
}.spacing-component-4 {
  padding: var(--spacing-component-4x);
}.spacing-component-5 {
  padding: var(--spacing-component-5x);
}.spacing-component-6 {
  padding: var(--spacing-component-6x);
}.spacing-component-7 {
  padding: var(--spacing-component-7x);
}.spacing-component-8 {
  padding: var(--spacing-component-8x);
}.spacing-component-none {
  padding: var(--spacing-component-none);
}/* radius */.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-full {
  border-radius: var(--radius-full);
}:root {
  --color-l-max: 100%;
  --color-l-100: 96%;
  --color-l-200: 91%;
  --color-l-300: 86%;
  --color-l-400: 80%;
  --color-l-500: 74%;
  --color-l-600: 66%;
  --color-l-700: 59%;
  --color-l-800: 54%;
  --color-l-900: 48%;
  --color-l-1000: 42%;
  --color-l-1100: 36%;
  --color-l-1200: 30%;
  --color-l-1300: 24%;
  --color-l-1400: 17%;
  --color-l-1500: 10%;
  --color-l-min: 0%;
  --color-c-base: 64; /* 64 */
  /* brand */
  --color-brand-c: var(--color-c-base);
  --color-brand-h: 52;
  --color-brand-ch: var(--color-brand-c) var(--color-brand-h);
	--color-brand-100: lch(var(--color-l-100) var(--color-brand-ch));
	--color-brand-200: lch(var(--color-l-200) var(--color-brand-ch));
	--color-brand-300: lch(var(--color-l-300) var(--color-brand-ch));
	--color-brand-400: lch(var(--color-l-400) var(--color-brand-ch));
	--color-brand-500: lch(var(--color-l-500) var(--color-brand-ch));
	--color-brand-600: lch(var(--color-l-600) var(--color-brand-ch));
	--color-brand-700: lch(var(--color-l-700) var(--color-brand-ch));
	--color-brand-800: lch(var(--color-l-800) var(--color-brand-ch));
	--color-brand-900: lch(var(--color-l-900) var(--color-brand-ch));
	--color-brand-1000: lch(var(--color-l-1000) var(--color-brand-ch));
	--color-brand-1100: lch(var(--color-l-1100) var(--color-brand-ch));
	--color-brand-1200: lch(var(--color-l-1200) var(--color-brand-ch));
	--color-brand-1300: lch(var(--color-l-1300) var(--color-brand-ch));
	--color-brand-1400: lch(var(--color-l-1400) var(--color-brand-ch));
	--color-brand-1500: lch(var(--color-l-1500) var(--color-brand-ch));
  /* Grey */
  --color-grey-c: 2;
  --color-grey-h: var(--color-brand-h);
  --color-grey-ch: var(--color-grey-c) var(--color-grey-h);
	--color-grey-100: lch(var(--color-l-100) var(--color-grey-ch));
	--color-grey-200: lch(var(--color-l-200) var(--color-grey-ch));
	--color-grey-300: lch(var(--color-l-300) var(--color-grey-ch));
	--color-grey-400: lch(var(--color-l-400) var(--color-grey-ch));
	--color-grey-500: lch(var(--color-l-500) var(--color-grey-ch));
	--color-grey-600: lch(var(--color-l-600) var(--color-grey-ch));
	--color-grey-700: lch(var(--color-l-700) var(--color-grey-ch));
	--color-grey-800: lch(var(--color-l-800) var(--color-grey-ch));
	--color-grey-900: lch(var(--color-l-900) var(--color-grey-ch));
	--color-grey-1000: lch(var(--color-l-1000) var(--color-grey-ch));
	--color-grey-1100: lch(var(--color-l-1100) var(--color-grey-ch));
	--color-grey-1200: lch(var(--color-l-1200) var(--color-grey-ch));
	--color-grey-1300: lch(var(--color-l-1300) var(--color-grey-ch));
	--color-grey-1400: lch(var(--color-l-1400) var(--color-grey-ch));
	--color-grey-1500: lch(var(--color-l-1500) var(--color-grey-ch));
  /* Green */
  --color-green-c: var(--color-c-base);
  --color-green-h: 156;
  --color-green-ch: var(--color-green-c) var(--color-green-h);
	--color-green-100: lch(var(--color-l-100) var(--color-green-ch));
	--color-green-200: lch(var(--color-l-200) var(--color-green-ch));
	--color-green-300: lch(var(--color-l-300) var(--color-green-ch));
	--color-green-400: lch(var(--color-l-400) var(--color-green-ch));
	--color-green-500: lch(var(--color-l-500) var(--color-green-ch));
	--color-green-600: lch(var(--color-l-600) var(--color-green-ch));
	--color-green-700: lch(var(--color-l-700) var(--color-green-ch));
	--color-green-800: lch(var(--color-l-800) var(--color-green-ch));
	--color-green-900: lch(var(--color-l-900) var(--color-green-ch));
	--color-green-1000: lch(var(--color-l-1000) var(--color-green-ch));
	--color-green-1100: lch(var(--color-l-1100) var(--color-green-ch));
	--color-green-1200: lch(var(--color-l-1200) var(--color-green-ch));
	--color-green-1300: lch(var(--color-l-1300) var(--color-green-ch));
	--color-green-1400: lch(var(--color-l-1400) var(--color-green-ch));
	--color-green-1500: lch(var(--color-l-1500) var(--color-green-ch));
  /* Red */
  --color-red-c: calc(var(--color-c-base));
  --color-red-h: 28;
  --color-red-ch: var(--color-red-c) var(--color-red-h);
	--color-red-100: lch(var(--color-l-100) var(--color-red-ch));
	--color-red-200: lch(var(--color-l-200) var(--color-red-ch));
	--color-red-300: lch(var(--color-l-300) var(--color-red-ch));
	--color-red-400: lch(var(--color-l-400) var(--color-red-ch));
	--color-red-500: lch(var(--color-l-500) var(--color-red-ch));
	--color-red-600: lch(var(--color-l-600) var(--color-red-ch));
	--color-red-700: lch(var(--color-l-700) var(--color-red-ch));
	--color-red-800: lch(var(--color-l-800) var(--color-red-ch));
	--color-red-900: lch(var(--color-l-900) var(--color-red-ch));
	--color-red-1000: lch(var(--color-l-1000) var(--color-red-ch));
	--color-red-1100: lch(var(--color-l-1100) var(--color-red-ch));
	--color-red-1200: lch(var(--color-l-1200) var(--color-red-ch));
	--color-red-1300: lch(var(--color-l-1300) var(--color-red-ch));
	--color-red-1400: lch(var(--color-l-1400) var(--color-red-ch));
	--color-red-1500: lch(var(--color-l-1500) var(--color-red-ch));
  /* Yellow */
  --color-yellow-c: calc(var(--color-c-base));
  --color-yellow-h: 94;
  --color-yellow-ch: var(--color-yellow-c) var(--color-yellow-h);
	--color-yellow-100: lch(var(--color-l-100) var(--color-yellow-ch));
	--color-yellow-200: lch(var(--color-l-200) var(--color-yellow-ch));
	--color-yellow-300: lch(var(--color-l-300) var(--color-yellow-ch));
	--color-yellow-400: lch(var(--color-l-400) var(--color-yellow-ch));
	--color-yellow-500: lch(var(--color-l-500) var(--color-yellow-ch));
	--color-yellow-600: lch(var(--color-l-600) var(--color-yellow-ch));
	--color-yellow-700: lch(var(--color-l-700) var(--color-yellow-ch));
	--color-yellow-800: lch(var(--color-l-800) var(--color-yellow-ch));
	--color-yellow-900: lch(var(--color-l-900) var(--color-yellow-ch));
	--color-yellow-1000: lch(var(--color-l-1000) var(--color-yellow-ch));
	--color-yellow-1100: lch(var(--color-l-1100) var(--color-yellow-ch));
	--color-yellow-1200: lch(var(--color-l-1200) var(--color-yellow-ch));
	--color-yellow-1300: lch(var(--color-l-1300) var(--color-yellow-ch));
	--color-yellow-1400: lch(var(--color-l-1400) var(--color-yellow-ch));
	--color-yellow-1500: lch(var(--color-l-1500) var(--color-yellow-ch));
  /* blue */
  --color-blue-c: calc(var(--color-c-base) );
  --color-blue-h: 280;
  --color-blue-ch: var(--color-blue-c) var(--color-blue-h);
	--color-blue-100: lch(var(--color-l-100) var(--color-blue-ch));
	--color-blue-200: lch(var(--color-l-200) var(--color-blue-ch));
	--color-blue-300: lch(var(--color-l-300) var(--color-blue-ch));
	--color-blue-400: lch(var(--color-l-400) var(--color-blue-ch));
	--color-blue-500: lch(var(--color-l-500) var(--color-blue-ch));
	--color-blue-600: lch(var(--color-l-600) var(--color-blue-ch));
	--color-blue-700: lch(var(--color-l-700) var(--color-blue-ch));
	--color-blue-800: lch(var(--color-l-800) var(--color-blue-ch));
	--color-blue-900: lch(var(--color-l-900) var(--color-blue-ch));
	--color-blue-1000: lch(var(--color-l-1000) var(--color-blue-ch));
	--color-blue-1100: lch(var(--color-l-1100) var(--color-blue-ch));
	--color-blue-1200: lch(var(--color-l-1200) var(--color-blue-ch));
	--color-blue-1300: lch(var(--color-l-1300) var(--color-blue-ch));
	--color-blue-1400: lch(var(--color-l-1400) var(--color-blue-ch));
	--color-blue-1500: lch(var(--color-l-1500) var(--color-blue-ch));

  /* solid */
  --color-black: lch(var(--color-l-min) 0 0);
  --color-white: lch(var(--color-l-max) 0 0);
}:root {
  /* brand */
  --color-brand: var(--color-brand-500);

  /* page */
  --color-page: var(--color-white);

  /* text */
  --color-text-secondary-opacity: 0.6;
  --color-text-tertiary-opacity: 0.5;
  --color-text-quaternary-opacity: 0.4;

  --color-text-primary: var(--color-black);
  --color-text-primary-inverted: var(--color-white);
  --color-text-secondary: lch(from var(--color-text-primary) l c h / var(--color-text-secondary-opacity));
  --color-text-secondary-inverted: lch(from var(---color-text-primary-inverted) l c h / var(--color-text-secondary-opacity));
  --color-text-tertiary: lch(from var(--color-text-primary) l c h / var(--color-text-tertiary-opacity));
  --color-text-tertiary-inverted: lch(from var(---color-text-primary-inverted) l c h / var(--color-text-tertiary-opacity));
  --color-text-quaternary: lch(from var(--color-text-primary) l c h / var(--color-text-quaternary-opacity));
  --color-text-quaternary-inverted: lch(from var(---color-text-primary-inverted) l c h / var(--color-text-quaternary-opacity));
  /* text system */
  --color-text-system-secondary-opacity: 0.65;
  --color-text-system-tertiary-opacity: 0.55;
  --color-text-system-quaternary-opacity: 0.45;

  --color-text-brand-primary: var(--color-brand-1200);
  --color-text-brand-secondary: var(--color-brand-900);
  --color-text-brand-tertiary: var(--color-brand-600);
  --color-text-brand-quaternary: var(--color-brand-300);

  --color-text-positive-primary: var(--color-green-1200);
  --color-text-positive-secondary: var(--color-green-900);
  --color-text-positive-tertiary: var(--color-green-600);
  --color-text-positive-quaternary: var(--color-green-300);

  --color-text-negative-primary: var(--color-red-1200);
  --color-text-negative-secondary: var(--color-red-900);
  --color-text-negative-tertiary: var(--color-red-600);
  --color-text-negative-quaternary: var(--color-red-300);

  --color-text-warning-primary: var(--color-yellow-1200);
  --color-text-warning-secondary: var(--color-yellow-900);
  --color-text-warning-tertiary: var(--color-yellow-600);
  --color-text-warning-quaternary: var(--color-yellow-300);

  --color-text-info-primary: var(--color-blue-1200);
  --color-text-info-secondary: var(--color-blue-900);
  --color-text-info-tertiary: var(--color-blue-600);
  --color-text-info-quaternary: var(--color-blue-300);


  /* surface */
  --color-surface-level1: var(--color-grey-100);
  --color-surface-level2: var(--color-page);
  --color-surface-level3: var(--color-grey-100);
  --color-surface-negative-level1: var(--color-red-100);
  --color-surface-negative-level2: var(--color-red-200);
  --color-surface-negative-level3: var(--color-red-100);
  --color-surface-positive-level1: var(--color-green-100);
  --color-surface-positive-level2: var(--color-green-200);
  --color-surface-positive-level3: var(--color-green-100);
  --color-surface-warning-level1: var(--color-yellow-100);
  --color-surface-warning-level2: var(--color-yellow-200);
  --color-surface-warning-level3: var(--color-yellow-100);
  --color-surface-info-level1: var(--color-blue-100);
  --color-surface-info-level2: var(--color-blue-200);
  --color-surface-info-level3: var(--color-blue-100);
  --color-surface-brand-level1: var(--color-brand-100);
  --color-surface-brand-level2: var(--color-brand-200);
  --color-surface-brand-level3: var(--color-brand-100);

  /* interaction */
  --color-interaction-background-brand-primary: var(--color-brand-1000);
  --color-interaction-background-brand-secondary: var(--color-brand-800);
  --color-interaction-background-brand-tertiary: var(--color-brand-500);
  --color-interaction-background-brand-quaternary: var(--color-brand-300);
  --color-interaction-background-brand-quinary: var(--color-brand-200);

  --color-interaction-background-neutrals-primary: var(--color-grey-1000);
  --color-interaction-background-neutrals-secondary: var(--color-grey-800);
  --color-interaction-background-neutrals-tertiary: var(--color-grey-500);
  --color-interaction-background-neutrals-quaternary: var(--color-grey-300);
  --color-interaction-background-neutrals-quinary: var(--color-grey-200);

  --color-interaction-background-positive-primary: var(--color-green-1000);
  --color-interaction-background-positive-secondary: var(--color-green-800);
  --color-interaction-background-positive-tertiary: var(--color-green-500);
  --color-interaction-background-positive-quaternary: var(--color-green-300);
  --color-interaction-background-positive-quinary: var(--color-green-200);

  --color-interaction-background-negative-primary: var(--color-red-1000);
  --color-interaction-background-negative-secondary: var(--color-red-800);
  --color-interaction-background-negative-tertiary: var(--color-red-500);
  --color-interaction-background-negative-quaternary: var(--color-red-300);
  --color-interaction-background-negative-quinary: var(--color-red-200);

  --color-interaction-background-warning-primary: var(--color-yellow-1000);
  --color-interaction-background-warning-secondary: var(--color-yellow-800);
  --color-interaction-background-warning-tertiary: var(--color-yellow-500);
  --color-interaction-background-warning-quaternary: var(--color-yellow-300);
  --color-interaction-background-warning-quinary: var(--color-yellow-200);

  --color-interaction-background-info-primary: var(--color-blue-1000);
  --color-interaction-background-info-secondary: var(--color-blue-800);
  --color-interaction-background-info-tertiary: var(--color-blue-500);
  --color-interaction-background-info-quaternary: var(--color-blue-300);
  --color-interaction-background-info-quinary: var(--color-blue-200);

  --color-interaction-stroke-brand-primary: var(--color-brand-1500);
  --color-interaction-stroke-brand-secondary: var(--color-brand-900);
  --color-interaction-stroke-brand-tertiary: var(--color-brand-800);
  --color-interaction-stroke-brand-quaternary: var(--color-brand-600);
  --color-interaction-stroke-brand-quinary: var(--color-brand-400);
  --color-interaction-stroke-neutrals-primary: var(--color-grey-1500);
  --color-interaction-stroke-neutrals-secondary: var(--color-grey-900);
  --color-interaction-stroke-neutrals-tertiary: var(--color-grey-800);
  --color-interaction-stroke-neutrals-quaternary: var(--color-grey-600);
  --color-interaction-stroke-neutrals-quinary: var(--color-grey-400);
  --color-interaction-stroke-positive-primary: var(--color-green-1500);
  --color-interaction-stroke-positive-secondary: var(--color-green-900);
  --color-interaction-stroke-positive-tertiary: var(--color-green-800);
  --color-interaction-stroke-positive-quaternary: var(--color-green-600);
  --color-interaction-stroke-positive-quinary: var(--color-green-400);
  --color-interaction-stroke-negative-primary: var(--color-red-1500);
  --color-interaction-stroke-negative-secondary: var(--color-red-900);
  --color-interaction-stroke-negative-tertiary: var(--color-red-800);
  --color-interaction-stroke-negative-quaternary: var(--color-red-600);
  --color-interaction-stroke-negative-quinary: var(--color-red-400);
  --color-interaction-stroke-warning-primary: var(--color-yellow-1500);
  --color-interaction-stroke-warning-secondary: var(--color-yellow-900);
  --color-interaction-stroke-warning-tertiary: var(--color-yellow-800);
  --color-interaction-stroke-warning-quaternary: var(--color-yellow-600);
  --color-interaction-stroke-warning-quinary: var(--color-yellow-400);
  --color-interaction-stroke-info-primary: var(--color-blue-1500);
  --color-interaction-stroke-info-secondary: var(--color-blue-900);
  --color-interaction-stroke-info-tertiary: var(--color-blue-800);
  --color-interaction-stroke-info-quaternary: var(--color-blue-600);
  --color-interaction-stroke-info-quinary: var(--color-blue-400);
  --color-interaction-icon-brand-primary: var(--color-brand-1000);
  --color-interaction-icon-brand-secondary: var(--color-brand-900);
  --color-interaction-icon-brand-tertiary: var(--color-brand-800);
  --color-interaction-icon-brand-quaternary: var(--color-brand-600);
  --color-interaction-icon-brand-quinary: var(--color-brand-400);
  --color-interaction-icon-neutrals-primary: var(--color-grey-1000);
  --color-interaction-icon-neutrals-secondary: var(--color-grey-900);
  --color-interaction-icon-neutrals-tertiary: var(--color-grey-800);
  --color-interaction-icon-neutrals-quaternary: var(--color-grey-600);
  --color-interaction-icon-neutrals-quinary: var(--color-grey-400);
  --color-interaction-icon-positive-primary: var(--color-green-1000);
  --color-interaction-icon-positive-secondary: var(--color-green-900);
  --color-interaction-icon-positive-tertiary: var(--color-green-800);
  --color-interaction-icon-positive-quaternary: var(--color-green-600);
  --color-interaction-icon-positive-quinary: var(--color-green-400);
  --color-interaction-icon-negative-primary: var(--color-red-1000);
  --color-interaction-icon-negative-secondary: var(--color-red-900);
  --color-interaction-icon-negative-tertiary: var(--color-red-800);
  --color-interaction-icon-negative-quaternary: var(--color-red-600);
  --color-interaction-icon-negative-quinary: var(--color-red-400);
  --color-interaction-icon-warning-primary: var(--color-yellow-1000);
  --color-interaction-icon-warning-secondary: var(--color-yellow-900);
  --color-interaction-icon-warning-tertiary: var(--color-yellow-800);
  --color-interaction-icon-warning-quaternary: var(--color-yellow-600);
  --color-interaction-icon-warning-quinary: var(--color-yellow-400);
  --color-interaction-icon-info-primary: var(--color-blue-1000);
  --color-interaction-icon-info-secondary: var(--color-blue-900);
  --color-interaction-icon-info-tertiary: var(--color-blue-800);
  --color-interaction-icon-info-quaternary: var(--color-blue-600);
  --color-interaction-icon-info-quinary: var(--color-blue-400);

  /* shadows */
  --color-shadows-level1-layer1: var(--color-interaction-background-neutrals-primary);
  --color-shadows-level1-layer2: var(--color-interaction-background-neutrals-primary);
  --shadow-level1: 0 0 2px 0 lch(from var( --color-shadows-level1-layer2) l c h / 0.05), 0 2px 16px 0 lch(from var(--color-shadows-level1-layer2) l c h / 0.08);

}/* dark mode */[data-theme="dark"] {
  --color-l-max: 4%;
  --color-l-100: 8%;
  --color-l-200: 12%;
  --color-l-300: 18%;
  --color-l-400: 23%;
  --color-l-500: 29%;
  --color-l-600: 35%;
  --color-l-700: 41%;
  --color-l-800: 47%;
  --color-l-900: 53%;
  --color-l-1000: 59%;
  --color-l-1100: 65%;
  --color-l-1200: 71%;
  --color-l-1300: 77%;
  --color-l-1400: 83%;
  --color-l-1500: 89%;
  --color-l-min: 92%;
  color-scheme:dark;
   --shadow-level1: none;
}.black {
  background: var(--color-black);
}.white {
  background: var(--color-white);
}/* text */.text {
  color: var(--color-text-primary);
}.text-inverted {
  color: var(--color-text-primary-inverted);
}.text-secondary {
  color: var(--color-text-secondary);
}.text-secondary-inverted {
  color: var(--color-text-secondar-inverted);
}.text-tertiary {
  color: var(--color-text-tertiary);
}.text-tertiary-inverted {
  color: var(--color-text-tertiary-inverted);
}.text-quaternary {
  color: var(--color-text-quaternary);
}.text-quaternary-inverted {
  color: var(--color-text-quaternary-inverted);
}.text-brand {
  color: var(--color-text-brand-primary);
}.text-brand-secondary {
  color: var(--color-text-brand-secondary);
}.text-brand-tertiary {
  color: var(--color-text-brand-tertiary);
}.text-brand-quaternary {
  color: var(--color-text-brand-quaternary);
}.text-positive {
  color: var(--color-text-positive-primary);
}.text-positive-secondary {
  color: var(--color-text-positive-secondary);
}.text-positive-tertiary {
  color: var(--color-text-positive-tertiary);
}.text-positive-quaternary {
  color: var(--color-text-positive-quaternary);
}.text-negative {
  color: var(--color-text-negative-primary);
}.text-negative-secondary {
  color: var(--color-text-negative-secondary);
}.text-negative-tertiary {
  color: var(--color-text-negative-tertiary);
}.text-negative-quaternary {
  color: var(--color-text-negative-quaternary);
}.text-warning {
  color: var(--color-text-warning-primary);
}.text-warning-secondary {
  color: var(--color-text-warning-secondary);
}.text-warning-tertiary {
  color: var(--color-text-warning-tertiary);
}.text-warning-quaternary {
  color: var(--color-text-warning-quaternary);
}.text-info {
  color: var(--color-text-info-primary);
}.text-info-secondary {
  color: var(--color-text-info-secondary);
}.text-info-tertiary {
  color: var(--color-text-info-tertiary);
}.text-info-quaternary {
  color: var(--color-text-info-quaternary);
}/* surface */.surface-1 {
  background: var(--color-surface-level1);
}.surface-2 {
  background: var(--color-surface-level2);
}.surface-3 {
  background: var(--color-surface-level3);
}.surface-negative-1 {
  background: var(--color-surface-negative-level1);
}.surface-negative-2 {
  background: var(--color-surface-negative-level2);
}.surface-negative-3 {
  background: var(--color-surface-negative-level3);
}.surface-positive-1 {
  background: var(--color-surface-positive-level1);
}.surface-positive-2 {
  background: var(--color-surface-positive-level2);
}.surface-positive-3 {
  background: var(--color-surface-positive-level3);
}.surface-warning-1 {
  background: var(--color-surface-warning-level1);
}.surface-warning-2 {
  background: var(--color-surface-warning-level2);
}.surface-warning-3 {
  background: var(--color-surface-warning-level3);
}.surface-info-1 {
  background: var(--color-surface-info-level1);
}.surface-info-2 {
  background: var(--color-surface-info-level2);
}.surface-info-3 {
  background: var(--color-surface-info-level3);
}.surface-brand-1 {
  background: var(--color-surface-brand-level1);
}.surface-brand-2 {
  background: var(--color-surface-brand-level2);
}.surface-brand-3 {
  background: var(--color-surface-brand-level3);
}/* interaction */.interaction-background-brand {
  background: var(--color-interaction-background-brand-primary);
}.interaction-background-brand-secondary {
  background: var(--color-interaction-background-brand-secondary);
}.interaction-background-brand-tertiary {
  background: var(--color-interaction-background-brand-tertiary);
}.interaction-background-brand-quaternary {
  background: var(--color-interaction-background-brand-quaternary);
}.interaction-background-brand-quinary {
  background: var(--color-interaction-background-brand-quinary);
}.interaction-background-neutrals {
  background: var(--color-interaction-background-neutrals-primary);
}.interaction-background-neutrals-secondary {
  background: var(--color-interaction-background-neutrals-secondary);
}.interaction-background-neutrals-tertiary {
  background: var(--color-interaction-background-neutrals-tertiary);
}.interaction-background-neutrals-quaternary {
  background: var(--color-interaction-background-neutrals-quaternary);
}.interaction-background-neutrals-quinary {
  background: var(--color-interaction-background-neutrals-quinary);
}.interaction-background-positive {
  background: var(--color-interaction-background-positive-primary);
}.interaction-background-positive-secondary {
  background: var(--color-interaction-background-positive-secondary);
}.interaction-background-positive-tertiary {
  background: var(--color-interaction-background-positive-tertiary);
}.interaction-background-positive-quaternary {
  background: var(--color-interaction-background-positive-quaternary);
}.interaction-background-positive-quinary {
  background: var(--color-interaction-background-positive-quinary);
}.interaction-background-negative {
  background: var(--color-interaction-background-negative-primary);
}.interaction-background-negative-secondary {
  background: var(--color-interaction-background-negative-secondary);
}.interaction-background-negative-tertiary {
  background: var(--color-interaction-background-negative-tertiary);
}.interaction-background-negative-quaternary {
  background: var(--color-interaction-background-negative-quaternary);
}.interaction-background-negative-quinary {
  background: var(--color-interaction-background-negative-quinary);
}.interaction-background-warning {
  background: var(--color-interaction-background-warning-primary);
}.interaction-background-warning-secondary {
  background: var(--color-interaction-background-warning-secondary);
}.interaction-background-warning-tertiary {
  background: var(--color-interaction-background-warning-tertiary);
}.interaction-background-warning-quaternary {
  background: var(--color-interaction-background-warning-quaternary);
}.interaction-background-warning-quinary {
  background: var(--color-interaction-background-warning-quinary);
}.interaction-background-info {
  background: var(--color-interaction-background-info-primary);
}.interaction-background-info-secondary {
  background: var(--color-interaction-background-info-secondary);
}.interaction-background-info-tertiary {
  background: var(--color-interaction-background-info-tertiary);
}.interaction-background-info-quaternary {
  background: var(--color-interaction-background-info-quaternary);
}.interaction-background-info-quinary {
  background: var(--color-interaction-background-info-quinary);
}.interaction-stroke-brand {
  stroke: var(--color-interaction-stroke-brand-primary);
}.interaction-stroke-brand-secondary {
  stroke: var(--color-interaction-stroke-brand-secondary);
}.interaction-stroke-brand-tertiary {
  stroke: var(--color-interaction-stroke-brand-tertiary);
}.interaction-stroke-brand-quaternary {
  stroke: var(--color-interaction-stroke-brand-quaternary);
}.interaction-stroke-brand-quinary {
  stroke: var(--color-interaction-stroke-brand-quinary);
}.interaction-stroke-neutrals {
  stroke: var(--color-interaction-stroke-neutrals-primary);
}.interaction-stroke-neutrals-secondary {
  stroke: var(--color-interaction-stroke-neutrals-secondary);
}.interaction-stroke-neutrals-tertiary {
  stroke: var(--color-interaction-stroke-neutrals-tertiary);
}.interaction-stroke-neutrals-quaternary {
  stroke: var(--color-interaction-stroke-neutrals-quaternary);
}.interaction-stroke-neutrals-quinary {
  stroke: var(--color-interaction-stroke-neutrals-quinary);
}.interaction-stroke-positive {
  stroke: var(--color-interaction-stroke-positive-primary);
}.interaction-stroke-positive-secondary {
  stroke: var(--color-interaction-stroke-positive-secondary);
}.interaction-stroke-positive-tertiary {
  stroke: var(--color-interaction-stroke-positive-tertiary);
}.interaction-stroke-positive-quaternary {
  stroke: var(--color-interaction-stroke-positive-quaternary);
}.interaction-stroke-positive-quinary {
  stroke: var(--color-interaction-stroke-positive-quinary);
}.interaction-stroke-negative {
  stroke: var(--color-interaction-stroke-negative-primary);
}.interaction-stroke-negative-secondary {
  stroke: var(--color-interaction-stroke-negative-secondary);
}.interaction-stroke-negative-tertiary {
  stroke: var(--color-interaction-stroke-negative-tertiary);
}.interaction-stroke-negative-quaternary {
  stroke: var(--color-interaction-stroke-negative-quaternary);
}.interaction-stroke-negative-quinary {
  stroke: var(--color-interaction-stroke-negative-quinary);
}.interaction-stroke-warning {
  stroke: var(--color-interaction-stroke-warning-primary);
}.interaction-stroke-warning-secondary {
  stroke: var(--color-interaction-stroke-warning-secondary);
}.interaction-stroke-warning-tertiary {
  stroke: var(--color-interaction-stroke-warning-tertiary);
}.interaction-stroke-warning-quaternary {
  stroke: var(--color-interaction-stroke-warning-quaternary);
}.interaction-stroke-warning-quinary {
  stroke: var(--color-interaction-stroke-warning-quinary);
}.interaction-stroke-info {
  stroke: var(--color-interaction-stroke-info-primary);
}.interaction-stroke-info-secondary {
  stroke: var(--color-interaction-stroke-info-secondary);
}.interaction-stroke-info-tertiary {
  stroke: var(--color-interaction-stroke-info-tertiary);
}.interaction-stroke-info-quaternary {
  stroke: var(--color-interaction-stroke-info-quaternary);
}.interaction-stroke-info-quinary {
  stroke: var(--color-interaction-stroke-info-quinary);
}.interaction-icon-brand {
  color: var(--color-interaction-icon-brand-primary);
}.interaction-icon-brand-secondary {
  color: var(--color-interaction-icon-brand-secondary);
}.interaction-icon-brand-tertiary {
  color: var(--color-interaction-icon-brand-tertiary);
}.interaction-icon-brand-quaternary {
  color: var(--color-interaction-icon-brand-quaternary);
}.interaction-icon-brand-quinary {
  color: var(--color-interaction-icon-brand-quinary);
}.interaction-icon-neutrals {
  color: var(--color-interaction-icon-neutrals-primary);
}.interaction-icon-neutrals-secondary {
  color: var(--color-interaction-icon-neutrals-secondary);
}.interaction-icon-neutrals-tertiary {
  color: var(--color-interaction-icon-neutrals-tertiary);
}.interaction-icon-neutrals-quaternary {
  color: var(--color-interaction-icon-neutrals-quaternary);
}.interaction-icon-neutrals-quinary {
  color: var(--color-interaction-icon-neutrals-quinary);
}.interaction-icon-positive {
  color: var(--color-interaction-icon-positive-primary);
}.interaction-icon-positive-secondary {
  color: var(--color-interaction-icon-positive-secondary);
}.interaction-icon-positive-tertiary {
  color: var(--color-interaction-icon-positive-tertiary);
}.interaction-icon-positive-quaternary {
  color: var(--color-interaction-icon-positive-quaternary);
}.interaction-icon-positive-quinary {
  color: var(--color-interaction-icon-positive-quinary);
}.interaction-icon-negative {
  color: var(--color-interaction-icon-negative-primary);
}.interaction-icon-negative-secondary {
  color: var(--color-interaction-icon-negative-secondary);
}.interaction-icon-negative-tertiary {
  color: var(--color-interaction-icon-negative-tertiary);
}.interaction-icon-negative-quaternary {
  color: var(--color-interaction-icon-negative-quaternary);
}.interaction-icon-negative-quinary {
  color: var(--color-interaction-icon-negative-quinary);
}.interaction-icon-warning {
  color: var(--color-interaction-icon-warning-primary);
}.interaction-icon-warning-secondary {
  color: var(--color-interaction-icon-warning-secondary);
}.interaction-icon-warning-tertiary {
  color: var(--color-interaction-icon-warning-tertiary);
}.interaction-icon-warning-quaternary {
  color: var(--color-interaction-icon-warning-quaternary);
}.interaction-icon-warning-quinary {
  color: var(--color-interaction-icon-warning-quinary);
}.interaction-icon-info {
  color: var(--color-interaction-icon-info-primary);
}.interaction-icon-info-secondary {
  color: var(--color-interaction-icon-info-secondary);
}.interaction-icon-info-tertiary {
  color: var(--color-interaction-icon-info-tertiary);
}.interaction-icon-info-quaternary {
  color: var(--color-interaction-icon-info-quaternary);
}.interaction-icon-info-quinary {
  color: var(--color-interaction-icon-info-quinary);
}/* shadow */.shadow-level1 {
  box-shadow: var(--shadow-level1);
}.box {
  width: 10rem;
  padding: 0.5rem;
}:root {
  --font-family: "Inter", sans-serif;
  --font-weights-regular: 400;
  --font-weights-medium: 500;
  --font-weights-bold: 700;
  --letter-spacing-0: -0.001875rem;
  --letter-spacing-1: -0.00125rem;
  --letter-spacing-2: -0.000625rem;
  --paragraph-spacing-0: 0;
  --display-display-1: normal var(--font-weights-medium) var(--dimension-15x)/var(--dimension-17x) var(--font-family) ;
  --display-display-2: normal var(--font-weights-medium) var(--dimension-12x)/var(--dimension-14x) var(--font-family) ;
  --display-display-3: normal var(--font-weights-medium) var(--dimension-10x)/var(--dimension-11x) var(--font-family) ;
  --title-title-1: normal var(--font-weights-medium) var(--dimension-8x)/var(--dimension-9x) var(--font-family) ;
  --title-title-2: normal var(--font-weights-medium) var(--dimension-6x)/var(--dimension-7x) var(--font-family) ;
  --title-title-3: normal var(--font-weights-medium) var(--dimension-5x)/var(--dimension-6x) var(--font-family) ;
  --subtitle-base-default: normal var(--font-weights-medium) var(--dimension-4-5x)/var(--dimension-6x) var(--font-family) ;
  --subtitle-small-default: normal var(--font-weights-medium) var(--dimension-4x)/var(--dimension-4-5x) var(--font-family) ;
  --body-base-default: normal var(--font-weights-regular) var(--dimension-4x)/var(--dimension-6x) var(--font-family) ;
  --body-base-strong: normal var(--font-weights-bold) var(--dimension-4x)/var(--dimension-6x) var(--font-family) ;
  --body-base-narrow-default: normal var(--font-weights-regular) var(--dimension-4x)/var(--dimension-5x) var(--font-family) ;
  --body-base-narrow-strong: normal var(--font-weights-bold) var(--dimension-4x)/var(--dimension-5x) var(--font-family) ;
  --body-large-default: normal var(--font-weights-regular) var(--dimension-4-5x)/var(--dimension-6x) var(--font-family) ;
  --body-large-strong: normal var(--font-weights-bold) var(--dimension-4-5x)/var(--dimension-6x) var(--font-family) ;
  --body-large-narrow-default: normal var(--font-weights-regular) var(--dimension-4-5x)/var(--dimension-5x) var(--font-family) ;
  --body-large-narrow-strong: normal var(--font-weights-bold) var(--dimension-4-5x)/var(--dimension-5x) var(--font-family) ;
  --descriptive-default: normal var(--font-weights-regular) var(--dimension-3-5x)/var(--dimension-5x) var(--font-family) ;
  --descriptive-strong: normal var(--font-weights-bold) var(--dimension-3-5x)/var(--dimension-5x) var(--font-family) ;
  --label-large-default: normal var(--font-weights-medium) var(--dimension-4x)/var(--dimension-4x) var(--font-family) ;
  --label-large-weak: normal var(--font-weights-regular) var(--dimension-4x)/var(--dimension-4x) var(--font-family) ;
  --label-large-uppercase-default: normal var(--font-weights-medium) var(--dimension-4x)/var(--dimension-4x) var(--font-family) ;
  --label-large-uppercase-weak: normal var(--font-weights-regular) var(--dimension-4x)/var(--dimension-4x) var(--font-family) ;
  --label-base-default: normal var(--font-weights-medium) var(--dimension-3-5x)/var(--dimension-3-5x) var(--font-family) ;
  --label-base-weak: normal var(--font-weights-regular) var(--dimension-3-5x)/var(--dimension-3-5x) var(--font-family) ;
  --label-base-uppercase-default: normal var(--font-weights-medium) var(--dimension-3-5x)/var(--dimension-3-5x) var(--font-family) ;
  --label-base-uppercase-weak: normal var(--font-weights-regular) var(--dimension-3-5x)/var(--dimension-3-5x) var(--font-family) ;
  --label-small-default: normal var(--font-weights-medium) var(--dimension-3x)/var(--dimension-3x) var(--font-family) ;
  --label-small-weak: normal var(--font-weights-regular) var(--dimension-3x)/var(--dimension-3x) var(--font-family) ;
  --label-small-uppercase-default: normal var(--font-weights-medium) var(--dimension-3x)/var(--dimension-3x) var(--font-family) ;
  --label-small-uppercase-weak: normal var(--font-weights-bold) var(--dimension-3x)/var(--dimension-3x) var(--font-family) ;
  --caption-base-default: normal var(--font-weights-medium) var(--dimension-3-5x)/var(--dimension-4x) var(--font-family) ;
  --caption-base-weak: normal var(--font-weights-regular) var(--dimension-3-5x)/var(--dimension-4x) var(--font-family) ;
  --caption-base-uppercase-default: normal var(--font-weights-medium) var(--dimension-3-5x)/var(--dimension-4x) var(--font-family) ;
  --caption-base-uppercase-weak: normal var(--font-weights-regular) var(--dimension-3-5x)/var(--dimension-4x) var(--font-family) ;
  --caption-small-default: normal var(--font-weights-medium) var(--dimension-3x)/var(--dimension-3-5x) var(--font-family) ;
  --caption-small-weak: normal var(--font-weights-regular) var(--dimension-3x)/var(--dimension-3-5x) var(--font-family) ;
  --caption-small-uppercase-default: normal var(--font-weights-medium) var(--dimension-3x)/var(--dimension-3-5x) var(--font-family) ;
  --caption-small-uppercase-weak: normal var(--font-weights-regular) var(--dimension-3x)/var(--dimension-3-5x) var(--font-family) ;
  --text-case-none: none;
  --text-case-uppercase: uppercase;
  --text-decoration-none: none;
  --paragraph-indent-0: 0;
}.display1 {
  font: var(--display-display-1);
  letter-spacing: var(--letter-spacing-0);
}.display2 {
  font: var(--display-display-2);
  letter-spacing: var(--letter-spacing-0);
}.display3 {
  font: var(--display-display-3);
  letter-spacing: var(--letter-spacing-0);
}.title1 {
  font: var(--title-title-1);
  letter-spacing: var(--letter-spacing-1);
}.title2 {
  font: var(--title-title-2);
  letter-spacing: var(--letter-spacing-1);
}.title3 {
  font: var(--title-title-3);
  letter-spacing: var(--letter-spacing-1);
}.subtitle {
  font: var(--subtitle-base-default);
  letter-spacing: var(--letter-spacing-2);
}.subtitle-small {
  font: var(--subtitle-small-default);
  letter-spacing: var(--letter-spacing-2);
  
}.body {
  font: var(--body-base-default);
  letter-spacing: var(--letter-spacing-2);
}.body-strong {
  font: var(--body-base-strong);
  letter-spacing: var(--letter-spacing-2);
}.body-narrow {
  font: var(--body-base-narrow-default);
  letter-spacing: var(--letter-spacing-2);
}.body-narrow-strong {
  font: var(--body-base-narrow-strong);
  letter-spacing: var(--letter-spacing-2);
}.body-large {
  font: var(--body-large-default);
  letter-spacing: var(--letter-spacing-2);
}.body-large-strong {
  font: var(--body-large-strong);
  letter-spacing: var(--letter-spacing-2);
}.body-large-narrow {
  font: var(--body-large-narrow-default);
  letter-spacing: var(--letter-spacing-2);
}.body-large-narrow-strong {
  font: var(--body-large-narrow-strong);
  letter-spacing: var(--letter-spacing-2);
}.descriptive {
  font: var(--descriptive-default);
  letter-spacing: var(--letter-spacing-2);
}.descriptive-strong {
  font: var(--descriptive-strong);
  letter-spacing: var(--letter-spacing-2);
}.label-large {
  font: var(--label-large-default);
  letter-spacing: var(--letter-spacing-2);
}.label-large-weak {
  font: var(--label-large-weak);
  letter-spacing: var(--letter-spacing-2);
}.label-large-uppercase {
  font: var(--label-large-uppercase-default);
  letter-spacing: var(--letter-spacing-2);
  text-transform: uppercase;
}.label-large-uppercase-weak {
  font: var(--label-large-uppercase-weak);
  letter-spacing: var(--letter-spacing-2);
  text-transform: uppercase;
}.label {
  font: var(--label-base-default);
  letter-spacing: var(--letter-spacing-2);
}.label-weak {
  font: var(--label-base-weak);
  letter-spacing: var(--letter-spacing-2);
}.label-uppercase {
  font: var(--label-base-uppercase-default);
  letter-spacing: var(--letter-spacing-2);
  text-transform: uppercase;
}.label-uppercase-weak {
  font: var(--label-base-uppercase-weak);
  letter-spacing: var(--letter-spacing-2);
  text-transform: uppercase;
}.label-small {
  font: var(--label-small-default);
  letter-spacing: var(--letter-spacing-2);
}.label-small-weak {
  font: var(--label-small-weak);
  letter-spacing: var(--letter-spacing-2);
}.label-small-uppercase {
  font: var(--label-small-uppercase-default);
  letter-spacing: var(--letter-spacing-2);
  text-transform: uppercase;
}.label-small-uppercase-weak {
  font: var(--label-small-uppercase-weak);
  letter-spacing: var(--letter-spacing-2);
  text-transform: uppercase;
}.caption {
  font: var(--caption-base-default);
  letter-spacing: var(--letter-spacing-2);
}.caption-weak {
  font: var(--caption-base-weak);
  letter-spacing: var(--letter-spacing-2);
}.caption-uppercase {
  font: var(--caption-base-uppercase-default);
  letter-spacing: var(--letter-spacing-2);
  text-transform: uppercase;
}.caption-uppercase-weak {
  font: var(--caption-base-uppercase-weak);
  letter-spacing: var(--letter-spacing-2);
  text-transform: uppercase;
}.caption-small {
  font: var(--caption-small-default);
  letter-spacing: var(--letter-spacing-2);
}.caption-small-weak {
  font: var(--caption-small-weak);
  letter-spacing: var(--letter-spacing-2);
}.caption-small-uppercase {
  font: var(--caption-small-uppercase-default);
  letter-spacing: var(--letter-spacing-2);
  text-transform: uppercase;
}.caption-small-uppercase-weak {
  font: var(--caption-small-uppercase-weak);
  letter-spacing: var(--letter-spacing-2);
  text-transform: uppercase;
}.kirbyText {
  & h1, h2, h3 {
    margin-bottom: var(--spacing-stack-1x);
  }
  & p {
    margin-bottom: var(--spacing-stack-2x);
  }
}*, 
*:after, 
*:before {
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
    box-sizing: border-box;
    margin: 0;
    padding:0
}html, body {
    font-family: var(--font-family);
    font-size: inherit;
    font-weight:inherit;
    background: var(--color-page);
    color: var(--color-text-primary);
    width: 100%;
    height: 100%;
}a {
    color: currentColor;
    text-decoration:none
}a:hover > * {
    opacity: 0.8;
}a:active > * {
    opacity: 0.6;
}audio, canvas, embed, figure, iframe, img, object, svg, video {
    display: block;
    vertical-align: middle;
}body {
    overflow-x:hidden
}button {
    font: inherit;
    background: none;
    color: currentColor;
    cursor: pointer;
    line-height:inherit
}button::-moz-focus-inner {
    border: 0;
    padding: 0
}h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight:inherit;
}img {
    max-width: 100%;
    width: 100%;
    height: auto;
    transform-style:preserve-3d;
}input, textarea {
    font:inherit;
}ol, ul {
    list-style:none;
}strong, b {
    font-weight: 700
}h1 {
    font: var(--title-title-1);
}h2 {
    font: var(--title-title-2);
}h3 {
    font: var(--title-title-3);
}h4 {
    font: var(--subtitle-base-default);
}.sidebarLayoutGrid {
  display: grid;
  grid-template-columns: var(--c-sidebar-width) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: 
    "sidebar header"
    "sidebar content";

  @media (width < 768px) {
   grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
    grid-template-areas: 
    "header"
    "content";
  }
}:root {
  --c-sidebar-width: 16rem;
}.c-sidebar {
  width: var(--c-sidebar-width);
  background: var(--color-page);
  height: 100vh;
  grid-area: sidebar;
  border-right: 1px solid var(--color-grey-200);
    overflow: hidden;
  overscroll-behavior: none;
  & .header {
    display: flex;
    padding-left: var(--dimension-4x);
    align-items: center;
    border-bottom: 1px solid var(--color-grey-200);
    height: 6rem;
  }
  & ._backButton {
    
     margin: var(--dimension-8x) var(--dimension-4x) 0;
  }

   @media (width < 768px) {
    display: none;
  }
}.c-sidebarNav {
  padding: var(--dimension-4x) var(--dimension-4x);
  & * > a {
    width: 100%;
    justify-content: start;
  }
}.c-header {
  grid-area: header;

}.c-content {
  display: block;
  grid-area: content;
  padding: var(--dimension-8x);
  height: 100%;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  @media (width < 768px) {
    padding: var(--dimension-4x);
  }
}.c-breadcrumb {
 padding: var(--spacing-component-5x);
 /* background-color: var(--color-surface-level1); */
  border-bottom: 1px solid var(--color-grey-200);
}.c-breadcrumbList {
   display: flex;
   flex-wrap: wrap;
   & li:not(:last-child):after {
    content: "\00a0/\00a0"
   }
   & li:last-child > a {
    font-weight: var(--font-weights-bold);
   }
}:root {
  /* Base Brand/CTA values */
  --c-button-bg-enabled: var(--color-brand-500);
  --c-button-text-enabled: var(--color-black);
  --c-button-border-enabled: var(--color-grey-500);
  --c-button-bg-disabled: var(--color-grey-200);
  --c-button-text-disabled: var(--color-text-quaternary);
  --c-button-border-disabled: var(--color-grey-300);
  --c-button-border-radius: var(--dimension-2x);
  --c-button-border-size: var(--dimension-0-25x);
  --c-button-horizontal-padding: var(--dimension-4-5x);
  --c-button-vertical-padding: var(--dimension-3x);
}.c-button {
  display: inline-flex;
  padding: var(--c-button-vertical-padding) var(--c-button-horizontal-padding);
  align-items: center;
  justify-content: center;
  font: var(--label-large-default);
  color: var(--c-button-text-enabled);
  cursor: pointer;
  border-radius: var(--c-button-border-radius);
  white-space: nowrap;
  background: var(--c-button-bg-enabled);
  width: -moz-fit-content;
  width: fit-content;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  &:hover {
    opacity: 0.8;
  }

  &:active {
    opacity: 0.6;
  }
  
  &:disabled, 
  &.disabled {
    --c-button-bg-enabled: var(--color-grey-200) !important;
    --c-button-text-enabled: var(--color-text-quaternary) !important;
    cursor: not-allowed;
    pointer-events: none;
  }

  &[data-button-type="primary"] {
    --c-button-bg-enabled: light-dark(var(--color-black), var(--color-grey-1300));
    --c-button-text-enabled: var(--color-grey-200);
  }

  &[data-button-type="secondary"] {
    --c-button-bg-enabled: none;
    --c-button-text-enabled: var(--color-grey-1100);
    box-shadow: inset 0 0 0 var(--c-button-border-size) var( --c-button-border-enabled);
    
    &:disabled, 
    &.disabled {
     --c-button-bg-enabled: none !important;
     box-shadow: inset 0 0 0 var(--c-button-border-size) var( --c-button-border-disabled);
    }
  }

  &[data-button-type="tertiary"] {
    --c-button-bg-enabled: none;
    --c-button-text-enabled: var(--color-brand-1000);
    
    &:disabled, 
    &.disabled {
     --c-button-bg-enabled: none !important;
    }
  }

  &[data-button-type="tertiary-no-padding"] {
    --c-button-bg-enabled: none;
    --c-button-text-enabled: var(--color-brand-1000);
    padding: 0;
    
    &:disabled, 
    &.disabled {
     --c-button-bg-enabled: none !important;
    }
  }


  &[data-button-type="accent"] {
    --c-button-bg-enabled: none;
    --c-button-text-enabled: var(--color-text-secondary);
    &:hover {
      --c-button-bg-enabled: lch(from var(--color-brand-500) l c h / 0.5);
      --c-button-text-enabled: lch(from var(--color-brand-1400) l c h / 0.7)
    }

    &:active {
      --c-button-bg-enabled: lch(from var(--color-brand-500) l c h / 0.7);
      --c-button-text-enabled: lch(from var(--color-brand-1400) l c h / 0.7)
    }
  }



  &[data-button-type="accent"] + [data-button-selection="true"] {
    --c-button-bg-enabled: lch(from var(--color-brand-500) l c h / 0.3);
    --c-button-text-enabled: lch(from var(--color-brand-1400) l c h / 0.7);
    font: var(--label-large-weak);
  }


}.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: light-dark(var(--color-grey-300), var(--color-grey-400));
  transition: .4s;
  border-radius: 24px;
}.slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--color-white);
  transition: .4s;
  border-radius: 50%;
}input:checked+.slider {
  background: var(--color-green-800);
}input:checked+.slider::before {
  transform: translateX(26px);
}:root{}.c-sampleCard {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-level1);
  padding: var(--dimension-4x);
  gap: var(--dimension-4x);
  background: var(--color-white);
  & ._imageContainer {
    
    aspect-ratio: 16/9;
    background: red;;
  }
  & img {
    -o-object-fit: contain;
    object-fit: contain;
    aspect-ratio: 21/9;
    width: 100%;
    background: var(--color-grey-1000);
  }
}.l-content-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: var(--dimension-4x);
  width: 100%;
  @media (width < 1124px) {
    grid-template-columns: repeat(8, 1fr);
  }
  @media (width < 768px) {
    grid-template-columns: 1fr;
  }
}.text-one-line {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inherit;
}.block {
  display: block;
}.width100 {
  width: 100%;
}.height100 {
  height: 100%;
}.width50 {
  width: 50%;
}.fit-content {
  width: -moz-fit-content;
  width: fit-content;
}/* text */.text-align-left {
  text-align: left;
}.text-align-center {
  text-align: center;
}.text-align-right {
  text-align: right;
}/* Grid */.grid-item-full {
  grid-column: -1/1;
}.grid-span-1 {
  grid-column: span 1;
}.grid-span-2 {
  grid-column: span 2;
}.grid-span-3 {
  grid-column: span 3;
}.grid-span-4 {
  grid-column: span 4;
}.grid-span-5 {
  grid-column: span 5;
}.grid-span-6 {
  grid-column: span 6;
}.grid-span-7 {
  grid-column: span 7;
}.grid-span-8 {
  grid-column: span 8;
}.grid-span-9 {
  grid-column: span 9;
}.grid-span-10 {
  grid-column: span 10;
}.grid-span-11 {
  grid-column: span 11;
}.grid-span-12 {
  grid-column: span 12;
}/* Flex */.flex {
  --gap: 0;
  display: flex;
}.flex > * + * {
  margin-left: var(--gap);
}.flex-column {
  flex-direction: column;
}.flex-wrap {
  flex-wrap: wrap;
}.items-start {
  align-items: flex-start;
}.items-end {
  align-items: flex-end;
}.items-center {
  align-items: center;
}.items-baseline {
  align-items: baseline;
}.items-stretch {
  align-items: stretch;
}.justify-center {
  justify-content: center;
}.justify-between {
  justify-content: space-between;
}.justify-start {
  justify-content: flex-start;
}.justify-end {
  justify-content: flex-end;
}.justify-around {
  justify-content: space-around;
}.justify-space-evenly {
  justify-content: space-evenly;
}.gap-1 {
  gap: var(--spacing-inset-1x);
}.gap-2 {
  gap: var(--spacing-inset-2x);
}.gap-3 {
  gap: var(--spacing-inset-3x);
}.gap-4 {
  gap: var(--spacing-inset-4x);
}.gap-5 {
  gap: var(--spacing-inset-5x);
}.gap-6 {
  gap: var(--spacing-inset-6x);
}.gap-7 {
  gap: var(--spacing-inset-7x);
}.gap-none {
  gap: var(--spacing-inset-none);
}/* accessibility */.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}/* text */.line-clamp-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}.line-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}