# LexyDesign CSS para NotebookLM

Generado: 2026-05-13

Este archivo consolida una copia de lectura de los CSS locales encontrados en la app. Los archivos originales no se modifican.

## Como leerlo

- **CSS runtime de la app**: estilos que entran directamente en la aplicacion Next o son importados por componentes usados por la app.
- **Referencias**: CSS incluido en el repositorio como material de marca o comparacion, util para NotebookLM pero no necesariamente cargado globalmente por la app.
- Dependencias CSS externas mencionadas por imports, como `tw-animate-css`, `shadcn/tailwind.css` y `sonner/dist/styles.css`, no se expanden aca porque viven en paquetes.

## Indice de fuentes

- CSS runtime de la app: `src/app/globals.css` (330 lineas). Hoja global importada por src/app/layout.tsx. Importa tokens.css y define utilidades/componentes globales.
- CSS runtime de la app: `src/app/tokens.css` (1051 lineas). Tokens CSS principales de la app: colores, tipografia, espaciado, radios, sombras y aliases usados por Tailwind/componentes.
- CSS runtime de componente: `src/components/Grainient.css` (7 lineas). CSS local importado por src/components/Grainient.jsx.
- Referencia de marca incluida en el repo: `public/Design System/Lexy Design System (1)/colors_and_type.css` (326 lineas). CSS de referencia del manual/preview de marca. No es la hoja runtime principal de Next, pero documenta tokens de marca.
- Referencia Fluent exportada: `fluent2-docs/fluent-tokens.css` (3458 lineas). Export de tokens/estilos Fluent disponible en el repo para consulta comparativa.

## CSS completo

### src/app/globals.css

Grupo: CSS runtime de la app

Hoja global importada por src/app/layout.tsx. Importa tokens.css y define utilidades/componentes globales.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@import "./tokens.css";

@import "tw-animate-css";

@import "shadcn/tailwind.css";

@layer components {
  /* Envoltorio principal de página (reemplaza a los px- manuales) */
  .page-layout {
    @apply flex-1 min-w-0 flex flex-col bg-neutral-background-1 pb-page-bottom pt-[48px] px-[20px] lg:px-[32px] overflow-x-clip;
  }

  /* Contenedor principal para restringir el ancho y centrar el aire horizontal */
  .content-container {
    @apply w-full max-w-[1200px] mx-auto;
  }
}

@layer utilities {
  .home-bg {
    background-image: url('/chatgpt-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--colorNeutralBackground1);
  }

  .noise {
    --_noise-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'><defs><filter id='n' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='3' stitchTiles='stitch' result='t'/><feColorMatrix type='saturate' values='0' in='t' result='g'/><feComponentTransfer in='g' result='a'><feFuncA type='linear' slope='0.5'/></feComponentTransfer></filter></defs><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --_noise-size: 12%;
    background-image: var(--_noise-texture);
    background-size: var(--_noise-size);
    background-position: center;
    background-repeat: repeat;
  }

  .frosted-backdrop {
    backdrop-filter: blur(var(--_gradient-blur)) contrast(100%) brightness(100%);
    -webkit-backdrop-filter: blur(var(--_gradient-blur)) contrast(100%) brightness(100%);
  }
}

hr {
  border: none;
  border-top: 1px solid #ebebeb;
  margin: 0;
}

.hero-card {
  position: relative;
  border: 1px solid var(--colorNeutralStroke1);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.hero-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--colorBrandBackground) 0%, #7c6af6 50%, var(--colorBrandStroke2) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}

.hero-card:hover {
  border-color: transparent;
  box-shadow: 0 6px 24px rgba(70, 72, 212, 0.12);
}

.hero-card:hover::before {
  opacity: 1;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0;
}

@layer base {
  .theme {
    --font-heading: var(--font-geist-sans);
    --font-sans: var(--font-geist-sans);
  }
  :root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --chart-1: oklch(0.87 0 0);
    --chart-2: oklch(0.556 0 0);
    --chart-3: oklch(0.439 0 0);
    --chart-4: oklch(0.371 0 0);
    --chart-5: oklch(0.269 0 0);
    --radius: 0.625rem;
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
  }
  .dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --chart-1: oklch(0.87 0 0);
    --chart-2: oklch(0.556 0 0);
    --chart-3: oklch(0.439 0 0);
    --chart-4: oklch(0.371 0 0);
    --chart-5: oklch(0.269 0 0);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.556 0 0);
  }
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    @apply font-sans;
  }
}

/* Reset Tailwind preflight overrides that interfere with Fluent UI button/icon layout.
   Tailwind preflight forces `button { font-family: inherit; line-height: inherit }` and
   `svg { display: block; vertical-align: middle }`, both of which break Fluent's internal
   icon centering (especially the chevron in SplitButton/MenuButton). */
.fui-FluentProvider button {
  font-family: revert;
  line-height: revert;
}

.fui-FluentProvider svg,
[class*="fui-Icon"],
[class*="MenuButton__menuIcon"] svg {
  display: inline-block;
  vertical-align: baseline;
}

/* ---------------------------------------------------------------------------
 * Geist UI overrides — Lexy purple focus/active border.
 * Geist's Input adds a `.hover` class on both hover and focus; Select adds
 * `.active` when focused/open. We override the border color to Lexy purple.
 * ------------------------------------------------------------------------- */
.input-wrapper.hover,
.input-container:focus-within > .input-wrapper {
  border-color: #4648d4 !important;
}

.select.active,
.select:hover,
.select:focus,
.select:focus-within {
  border-color: #4648d4 !important;
}
.select.active .icon,
.select:hover .icon,
.select:focus .icon,
.select:focus-within .icon {
  color: #4648d4 !important;
}

/* Geist Snippet — usar la fuente Geist Mono dentro del bloque. */
.snippet,
.snippet pre {
  font-family: var(--font-geist-mono), ui-monospace, monospace;
}

/* Toolbar — peso ligero para coherencia con el resto del DS. */
.fui-Toolbar .fui-ToolbarButton,
.fui-Toolbar .fui-ToolbarToggleButton {
  font-weight: 450 !important;
}

/* ---------------------------------------------------------------------------
 * Sonner Toast — Lexy / Geist tuning.
 * Sonner por defecto es bastante compacto (padding 16px, font 13px). Lo subimos
 * para que se sienta del mismo peso visual que el resto del DS.
 * ------------------------------------------------------------------------- */
[data-sonner-toast].lexy-toast {
  padding: 18px 20px !important;
  min-height: 64px;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.005em;
  box-shadow:
    0 1px 2px rgba(15, 18, 45, 0.06),
    0 8px 24px rgba(15, 18, 45, 0.10);
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}

[data-sonner-toast].lexy-toast [data-title] {
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

[data-sonner-toast].lexy-toast [data-description] {
  font-size: 13.5px;
  line-height: 20px;
  color: #56565a;
  margin-top: 2px;
}

[data-sonner-toast].lexy-toast [data-icon] {
  width: 20px;
  height: 20px;
  margin-right: 12px;
}
[data-sonner-toast].lexy-toast [data-icon] svg {
  width: 20px;
  height: 20px;
}

[data-sonner-toast].lexy-toast [data-button] {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: #1f1f1f;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-geist-sans), sans-serif;
}
[data-sonner-toast].lexy-toast [data-button]:hover {
  background: #000000;
}

[data-sonner-toast].lexy-toast[data-type="success"] [data-button] {
  background: #4648d4;
}
[data-sonner-toast].lexy-toast[data-type="success"] [data-button]:hover {
  background: #313396;
}

/* ---------------------------------------------------------------------------
 * Lexy Button — patrón canónico Primary / Secondary con inversión en hover.
 *
 *   .lexy-btn-primary   → fondo Lexy Indigo (sólido) → en hover se vuelve ghost.
 *   .lexy-btn-secondary → ghost (borde + texto Indigo) → en hover se rellena.
 *
 * Aplican sobre el botón Geist (`.btn`) y usan !important porque Geist
 * inyecta sus estilos vía styled-jsx con alta especificidad.
 * ------------------------------------------------------------------------- */
.lexy-btn-primary .btn,
.lexy-btn-secondary .btn {
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease !important;
}

.lexy-btn-primary .btn {
  background: var(--colorBrandBackground) !important;
  color: #ffffff !important;
  border: 1px solid var(--colorBrandBackground) !important;
}
.lexy-btn-primary .btn:hover,
.lexy-btn-primary .btn:focus-visible {
  background: transparent !important;
  color: var(--colorBrandBackground) !important;
  border-color: var(--colorBrandBackground) !important;
}

.lexy-btn-secondary .btn {
  background: transparent !important;
  color: var(--colorBrandBackground) !important;
  border: 1px solid var(--colorBrandBackground) !important;
}
.lexy-btn-secondary .btn:hover,
.lexy-btn-secondary .btn:focus-visible {
  background: var(--colorBrandBackground) !important;
  color: #ffffff !important;
  border-color: var(--colorBrandBackground) !important;
}
```

### src/app/tokens.css

Grupo: CSS runtime de la app

Tokens CSS principales de la app: colores, tipografia, espaciado, radios, sombras y aliases usados por Tailwind/componentes.

```css
[data-theme=light] {
    --sidebar-width: 260px;
    --offscreen-sidebar-width: 324px;
    --side-padding: 32px;
    --sidebar-border-color: var(--colorNeutralBackground10)
}

[data-theme=light] {
    --astro-code-color-text: #000000;
    --astro-code-color-background: #ffffff;
    --astro-code-token-constant: #896e39;
    --astro-code-token-keyword: #527588;
    --astro-code-token-function: #527588;
    --astro-code-token-string-expression: #8069bc;
    --astro-code-token-punctuation: #000000
}

:root {
    --borderRadiusNone: 0;
    --borderRadiusSmall: 2px;
    --borderRadiusMedium: 4px;
    --borderRadiusLarge: 6px;
    --borderRadiusXLarge: 8px;
    --borderRadiusCircular: 10000px;
    --fontSizeBase100: 10px;
    --fontSizeBase200: 12px;
    --fontSizeBase300: 14px;
    --fontSizeBase400: 16px;
    --fontSizeBase500: 20px;
    --fontSizeBase600: 24px;
    --fontSizeHero700: 28px;
    --fontSizeHero800: 32px;
    --fontSizeHero900: 40px;
    --fontSizeHero1000: 68px;
    --lineHeightBase100: 14px;
    --lineHeightBase200: 16px;
    --lineHeightBase300: 20px;
    --lineHeightBase400: 22px;
    --lineHeightBase500: 28px;
    --lineHeightBase600: 32px;
    --lineHeightHero700: 36px;
    --lineHeightHero800: 40px;
    --lineHeightHero900: 52px;
    --lineHeightHero1000: 92px;
    --fontFamilyBase: var(--font-geist-sans), "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    --fontFamilyMonospace: Consolas, "Courier New", Courier, monospace;
    --fontFamilyNumeric: var(--font-geist-sans), Bahnschrift, "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    --fontWeightRegular: 400;
    --fontWeightMedium: 500;
    --fontWeightSemibold: 600;
    --fontWeightBold: 700;
    --strokeWidthThin: 1px;
    --strokeWidthThick: 2px;
    --strokeWidthThicker: 3px;
    --strokeWidthThickest: 4px;
    --spacingHorizontalNone: 0;
    --spacingHorizontalXXS: 2px;
    --spacingHorizontalXS: 4px;
    --spacingHorizontalSNudge: 6px;
    --spacingHorizontalS: 8px;
    --spacingHorizontalMNudge: 10px;
    --spacingHorizontalM: 12px;
    --spacingHorizontalL: 16px;
    --spacingHorizontalXL: 20px;
    --spacingHorizontalXXL: 24px;
    --spacingHorizontalXXXL: 32px;
    --spacingVerticalNone: 0;
    --spacingVerticalXXS: 2px;
    --spacingVerticalXS: 4px;
    --spacingVerticalSNudge: 6px;
    --spacingVerticalS: 8px;
    --spacingVerticalMNudge: 10px;
    --spacingVerticalM: 12px;
    --spacingVerticalL: 16px;
    --spacingVerticalXL: 20px;
    --spacingVerticalXXL: 24px;
    --spacingVerticalXXXL: 32px;
    --durationUltraFast: 50ms;
    --durationFaster: .1s;
    --durationFast: .15s;
    --durationNormal: .2s;
    --durationGentle: .25s;
    --durationSlow: .3s;
    --durationSlower: .4s;
    --durationUltraSlow: .5s;
    --curveAccelerateMax: cubic-bezier(.9, .1, 1, .2);
    --curveAccelerateMid: cubic-bezier(1, 0, 1, 1);
    --curveAccelerateMin: cubic-bezier(.8, 0, .78, 1);
    --curveDecelerateMax: cubic-bezier(.1, .9, .2, 1);
    --curveDecelerateMid: cubic-bezier(0, 0, 0, 1);
    --curveDecelerateMin: cubic-bezier(.33, 0, .1, 1);
    --curveEasyEaseMax: cubic-bezier(.8, 0, .2, 1);
    --curveEasyEase: cubic-bezier(.33, 0, .67, 1);
    --curveLinear: cubic-bezier(0, 0, 1, 1);
    --colorNeutralForeground1: #242424;
    --colorNeutralForeground1Hover: #242424;
    --colorNeutralForeground1Pressed: #242424;
    --colorNeutralForeground1Selected: #242424;
    --colorNeutralForeground2: #424242;
    --colorNeutralForeground2Hover: #242424;
    --colorNeutralForeground2Pressed: #242424;
    --colorNeutralForeground2Selected: #242424;
    --colorNeutralForeground2BrandHover: #4648d4;
    --colorNeutralForeground2BrandPressed: #4b41e1;
    --colorNeutralForeground2BrandSelected: #4648d4;
    --colorNeutralForeground3: #616161;
    --colorNeutralForeground3Hover: #424242;
    --colorNeutralForeground3Pressed: #424242;
    --colorNeutralForeground3Selected: #424242;
    --colorNeutralForeground3BrandHover: #4648d4;
    --colorNeutralForeground3BrandPressed: #4b41e1;
    --colorNeutralForeground3BrandSelected: #4648d4;
    --colorNeutralForeground4: #707070;
    --colorNeutralForegroundDisabled: #bdbdbd;
    --colorNeutralForegroundInvertedDisabled: rgba(255, 255, 255, .4);
    --colorBrandForegroundLink: #4b41e1;
    --colorBrandForegroundLinkHover: #3d3faf;
    --colorBrandForegroundLinkPressed: #313396;
    --colorBrandForegroundLinkSelected: #4b41e1;
    --colorNeutralForeground2Link: #424242;
    --colorNeutralForeground2LinkHover: #242424;
    --colorNeutralForeground2LinkPressed: #242424;
    --colorNeutralForeground2LinkSelected: #242424;
    --colorCompoundBrandForeground1: #4648d4;
    --colorCompoundBrandForeground1Hover: #4b41e1;
    --colorCompoundBrandForeground1Pressed: #3d3faf;
    --colorBrandForeground1: #4648d4;
    --colorBrandForeground2: #4b41e1;
    --colorBrandForeground2Hover: #3d3faf;
    --colorBrandForeground2Pressed: #0a2e4a;
    --colorNeutralForeground1Static: #242424;
    --colorNeutralForegroundStaticInverted: #ffffff;
    --colorNeutralForegroundInverted: #ffffff;
    --colorNeutralForegroundInvertedHover: #ffffff;
    --colorNeutralForegroundInvertedPressed: #ffffff;
    --colorNeutralForegroundInvertedSelected: #ffffff;
    --colorNeutralForegroundInverted2: #ffffff;
    --colorNeutralForegroundOnBrand: #ffffff;
    --colorNeutralForegroundInvertedLink: #ffffff;
    --colorNeutralForegroundInvertedLinkHover: #ffffff;
    --colorNeutralForegroundInvertedLinkPressed: #ffffff;
    --colorNeutralForegroundInvertedLinkSelected: #ffffff;
    --colorBrandForegroundInverted: #878aff;
    --colorBrandForegroundInvertedHover: #62abf5;
    --colorBrandForegroundInvertedPressed: #878aff;
    --colorBrandForegroundOnLight: #4648d4;
    --colorBrandForegroundOnLightHover: #4b41e1;
    --colorBrandForegroundOnLightPressed: #0e4775;
    --colorBrandForegroundOnLightSelected: #3d3faf;
    --colorNeutralBackground1: #ffffff;
    --colorNeutralBackground1Hover: #f5f5f5;
    --colorNeutralBackground1Pressed: #e0e0e0;
    --colorNeutralBackground1Selected: #ebebeb;
    --colorNeutralBackground2: #fafafa;
    --colorNeutralBackground2Hover: #f0f0f0;
    --colorNeutralBackground2Pressed: #dbdbdb;
    --colorNeutralBackground2Selected: #e6e6e6;
    --colorNeutralBackground3: #f5f5f5;
    --colorNeutralBackground3Hover: #ebebeb;
    --colorNeutralBackground3Pressed: #d6d6d6;
    --colorNeutralBackground3Selected: #e0e0e0;
    --colorNeutralBackground4: #f0f0f0;
    --colorNeutralBackground4Hover: #fafafa;
    --colorNeutralBackground4Pressed: #f5f5f5;
    --colorNeutralBackground4Selected: #ffffff;
    --colorNeutralBackground5: #ebebeb;
    --colorNeutralBackground5Hover: #f5f5f5;
    --colorNeutralBackground5Pressed: #f0f0f0;
    --colorNeutralBackground5Selected: #fafafa;
    --colorNeutralBackground6: #e6e6e6;
    --colorNeutralBackgroundInverted: #292929;
    --colorNeutralBackgroundStatic: #333333;
    --colorNeutralBackgroundAlpha: rgba(255, 255, 255, .5);
    --colorNeutralBackgroundAlpha2: rgba(255, 255, 255, .8);
    --colorSubtleBackground: transparent;
    --colorSubtleBackgroundHover: #f5f5f5;
    --colorSubtleBackgroundPressed: #e0e0e0;
    --colorSubtleBackgroundSelected: #ebebeb;
    --colorSubtleBackgroundLightAlphaHover: rgba(255, 255, 255, .7);
    --colorSubtleBackgroundLightAlphaPressed: rgba(255, 255, 255, .5);
    --colorSubtleBackgroundLightAlphaSelected: transparent;
    --colorSubtleBackgroundInverted: transparent;
    --colorSubtleBackgroundInvertedHover: rgba(0, 0, 0, .1);
    --colorSubtleBackgroundInvertedPressed: rgba(0, 0, 0, .3);
    --colorSubtleBackgroundInvertedSelected: rgba(0, 0, 0, .2);
    --colorTransparentBackground: transparent;
    --colorTransparentBackgroundHover: transparent;
    --colorTransparentBackgroundPressed: transparent;
    --colorTransparentBackgroundSelected: transparent;
    --colorNeutralBackgroundDisabled: #f0f0f0;
    --colorNeutralBackgroundInvertedDisabled: rgba(255, 255, 255, .1);
    --colorNeutralStencil1: #e6e6e6;
    --colorNeutralStencil2: #fafafa;
    --colorNeutralStencil1Alpha: rgba(0, 0, 0, .1);
    --colorNeutralStencil2Alpha: rgba(0, 0, 0, .05);
    --colorBackgroundOverlay: rgba(0, 0, 0, .4);
    --colorScrollbarOverlay: rgba(0, 0, 0, .5);
    --colorBrandBackground: #4648d4;
    --colorBrandBackgroundHover: #4b41e1;
    --colorBrandBackgroundPressed: #313396;
    --colorBrandBackgroundSelected: #3d3faf;
    --colorCompoundBrandBackground: #4648d4;
    --colorCompoundBrandBackgroundHover: #4b41e1;
    --colorCompoundBrandBackgroundPressed: #3d3faf;
    --colorBrandBackgroundStatic: #4648d4;
    --colorBrandBackground2: #ebf3fc;
    --colorBrandBackground2Hover: #cfe4fa;
    --colorBrandBackground2Pressed: #96c6fa;
    --colorBrandBackground3Static: #3d3faf;
    --colorBrandBackground4Static: #313396;
    --colorBrandBackgroundInverted: #ffffff;
    --colorBrandBackgroundInvertedHover: #ebf3fc;
    --colorBrandBackgroundInvertedPressed: #b4d6fa;
    --colorBrandBackgroundInvertedSelected: #cfe4fa;
    --colorNeutralCardBackground: #fafafa;
    --colorNeutralCardBackgroundHover: #ffffff;
    --colorNeutralCardBackgroundPressed: #f5f5f5;
    --colorNeutralCardBackgroundSelected: #ebebeb;
    --colorNeutralCardBackgroundDisabled: #f0f0f0;
    --colorNeutralStrokeAccessible: #616161;
    --colorNeutralStrokeAccessibleHover: #575757;
    --colorNeutralStrokeAccessiblePressed: #4d4d4d;
    --colorNeutralStrokeAccessibleSelected: #4648d4;
    --colorNeutralStroke1: #d1d1d1;
    --colorNeutralStroke1Hover: #c7c7c7;
    --colorNeutralStroke1Pressed: #b3b3b3;
    --colorNeutralStroke1Selected: #bdbdbd;
    --colorNeutralStroke2: #e0e0e0;
    --colorNeutralStroke3: #f0f0f0;
    --colorNeutralStrokeSubtle: #e0e0e0;
    --colorNeutralStrokeOnBrand: #ffffff;
    --colorNeutralStrokeOnBrand2: #ffffff;
    --colorNeutralStrokeOnBrand2Hover: #ffffff;
    --colorNeutralStrokeOnBrand2Pressed: #ffffff;
    --colorNeutralStrokeOnBrand2Selected: #ffffff;
    --colorBrandStroke1: #4648d4;
    --colorBrandStroke2: #b4d6fa;
    --colorBrandStroke2Hover: #77b7f7;
    --colorBrandStroke2Pressed: #4648d4;
    --colorBrandStroke2Contrast: #b4d6fa;
    --colorCompoundBrandStroke: #4648d4;
    --colorCompoundBrandStrokeHover: #4b41e1;
    --colorCompoundBrandStrokePressed: #3d3faf;
    --colorNeutralStrokeDisabled: #e0e0e0;
    --colorNeutralStrokeInvertedDisabled: rgba(255, 255, 255, .4);
    --colorTransparentStroke: transparent;
    --colorTransparentStrokeInteractive: transparent;
    --colorTransparentStrokeDisabled: transparent;
    --colorNeutralStrokeAlpha: rgba(0, 0, 0, .05);
    --colorNeutralStrokeAlpha2: rgba(255, 255, 255, .2);
    --colorStrokeFocus1: #ffffff;
    --colorStrokeFocus2: #000000;
    --colorNeutralShadowAmbient: rgba(0, 0, 0, .12);
    --colorNeutralShadowKey: rgba(0, 0, 0, .14);
    --colorNeutralShadowAmbientLighter: rgba(0, 0, 0, .06);
    --colorNeutralShadowKeyLighter: rgba(0, 0, 0, .07);
    --colorNeutralShadowAmbientDarker: rgba(0, 0, 0, .2);
    --colorNeutralShadowKeyDarker: rgba(0, 0, 0, .24);
    --colorBrandShadowAmbient: rgba(0, 0, 0, .3);
    --colorBrandShadowKey: rgba(0, 0, 0, .25);
    --colorPaletteRedBackground1: #fdf6f6;
    --colorPaletteRedBackground2: #f1bbbc;
    --colorPaletteRedBackground3: #d13438;
    --colorPaletteRedForeground1: #bc2f32;
    --colorPaletteRedForeground2: #751d1f;
    --colorPaletteRedForeground3: #d13438;
    --colorPaletteRedBorderActive: #d13438;
    --colorPaletteRedBorder1: #f1bbbc;
    --colorPaletteRedBorder2: #d13438;
    --colorPaletteGreenBackground1: #f1faf1;
    --colorPaletteGreenBackground2: #9fd89f;
    --colorPaletteGreenBackground3: #107c10;
    --colorPaletteGreenForeground1: #0e700e;
    --colorPaletteGreenForeground2: #094509;
    --colorPaletteGreenForeground3: #107c10;
    --colorPaletteGreenBorderActive: #107c10;
    --colorPaletteGreenBorder1: #9fd89f;
    --colorPaletteGreenBorder2: #107c10;
    --colorPaletteDarkOrangeBackground1: #fdf6f3;
    --colorPaletteDarkOrangeBackground2: #f4bfab;
    --colorPaletteDarkOrangeBackground3: #da3b01;
    --colorPaletteDarkOrangeForeground1: #c43501;
    --colorPaletteDarkOrangeForeground2: #7a2101;
    --colorPaletteDarkOrangeForeground3: #da3b01;
    --colorPaletteDarkOrangeBorderActive: #da3b01;
    --colorPaletteDarkOrangeBorder1: #f4bfab;
    --colorPaletteDarkOrangeBorder2: #da3b01;
    --colorPaletteYellowBackground1: #fffef5;
    --colorPaletteYellowBackground2: #fef7b2;
    --colorPaletteYellowBackground3: #fde300;
    --colorPaletteYellowForeground1: #817400;
    --colorPaletteYellowForeground2: #817400;
    --colorPaletteYellowForeground3: #fde300;
    --colorPaletteYellowBorderActive: #fde300;
    --colorPaletteYellowBorder1: #fef7b2;
    --colorPaletteYellowBorder2: #fde300;
    --colorPaletteBerryBackground1: #fdf5fc;
    --colorPaletteBerryBackground2: #edbbe7;
    --colorPaletteBerryBackground3: #c239b3;
    --colorPaletteBerryForeground1: #af33a1;
    --colorPaletteBerryForeground2: #6d2064;
    --colorPaletteBerryForeground3: #c239b3;
    --colorPaletteBerryBorderActive: #c239b3;
    --colorPaletteBerryBorder1: #edbbe7;
    --colorPaletteBerryBorder2: #c239b3;
    --colorPaletteLightGreenBackground1: #f2fbf2;
    --colorPaletteLightGreenBackground2: #a7e3a5;
    --colorPaletteLightGreenBackground3: #13a10e;
    --colorPaletteLightGreenForeground1: #11910d;
    --colorPaletteLightGreenForeground2: #0b5a08;
    --colorPaletteLightGreenForeground3: #13a10e;
    --colorPaletteLightGreenBorderActive: #13a10e;
    --colorPaletteLightGreenBorder1: #a7e3a5;
    --colorPaletteLightGreenBorder2: #13a10e;
    --colorPaletteMarigoldBackground1: #fefbf4;
    --colorPaletteMarigoldBackground2: #f9e2ae;
    --colorPaletteMarigoldBackground3: #eaa300;
    --colorPaletteMarigoldForeground1: #d39300;
    --colorPaletteMarigoldForeground2: #835b00;
    --colorPaletteMarigoldForeground3: #eaa300;
    --colorPaletteMarigoldBorderActive: #eaa300;
    --colorPaletteMarigoldBorder1: #f9e2ae;
    --colorPaletteMarigoldBorder2: #eaa300;
    --colorPaletteRedForegroundInverted: #dc5e62;
    --colorPaletteGreenForegroundInverted: #359b35;
    --colorPaletteYellowForegroundInverted: #fef7b2;
    --colorPaletteDarkRedBackground2: #d69ca5;
    --colorPaletteDarkRedForeground2: #420610;
    --colorPaletteDarkRedBorderActive: #750b1c;
    --colorPaletteCranberryBackground2: #eeacb2;
    --colorPaletteCranberryForeground2: #6e0811;
    --colorPaletteCranberryBorderActive: #c50f1f;
    --colorPalettePumpkinBackground2: #efc4ad;
    --colorPalettePumpkinForeground2: #712d09;
    --colorPalettePumpkinBorderActive: #ca5010;
    --colorPalettePeachBackground2: #ffddb3;
    --colorPalettePeachForeground2: #8f4e00;
    --colorPalettePeachBorderActive: #ff8c00;
    --colorPaletteGoldBackground2: #ecdfa5;
    --colorPaletteGoldForeground2: #6c5700;
    --colorPaletteGoldBorderActive: #c19c00;
    --colorPaletteBrassBackground2: #e0cea2;
    --colorPaletteBrassForeground2: #553e06;
    --colorPaletteBrassBorderActive: #986f0b;
    --colorPaletteBrownBackground2: #ddc3b0;
    --colorPaletteBrownForeground2: #50301a;
    --colorPaletteBrownBorderActive: #8e562e;
    --colorPaletteForestBackground2: #bdd99b;
    --colorPaletteForestForeground2: #294903;
    --colorPaletteForestBorderActive: #498205;
    --colorPaletteSeafoamBackground2: #a8f0cd;
    --colorPaletteSeafoamForeground2: #00723b;
    --colorPaletteSeafoamBorderActive: #00cc6a;
    --colorPaletteDarkGreenBackground2: #9ad29a;
    --colorPaletteDarkGreenForeground2: #063b06;
    --colorPaletteDarkGreenBorderActive: #0b6a0b;
    --colorPaletteLightTealBackground2: #a6e9ed;
    --colorPaletteLightTealForeground2: #00666d;
    --colorPaletteLightTealBorderActive: #00b7c3;
    --colorPaletteTealBackground2: #9bd9db;
    --colorPaletteTealForeground2: #02494c;
    --colorPaletteTealBorderActive: #038387;
    --colorPaletteSteelBackground2: #94c8d4;
    --colorPaletteSteelForeground2: #00333f;
    --colorPaletteSteelBorderActive: #005b70;
    --colorPaletteBlueBackground2: #a9d3f2;
    --colorPaletteBlueForeground2: #004377;
    --colorPaletteBlueBorderActive: #0078d4;
    --colorPaletteRoyalBlueBackground2: #9abfdc;
    --colorPaletteRoyalBlueForeground2: #002c4e;
    --colorPaletteRoyalBlueBorderActive: #004e8c;
    --colorPaletteCornflowerBackground2: #c8d1fa;
    --colorPaletteCornflowerForeground2: #2c3c85;
    --colorPaletteCornflowerBorderActive: #4f6bed;
    --colorPaletteNavyBackground2: #a3b2e8;
    --colorPaletteNavyForeground2: #001665;
    --colorPaletteNavyBorderActive: #0027b4;
    --colorPaletteLavenderBackground2: #d2ccf8;
    --colorPaletteLavenderForeground2: #3f3682;
    --colorPaletteLavenderBorderActive: #7160e8;
    --colorPalettePurpleBackground2: #c6b1de;
    --colorPalettePurpleForeground2: #341a51;
    --colorPalettePurpleBorderActive: #5c2e91;
    --colorPaletteGrapeBackground2: #d9a7e0;
    --colorPaletteGrapeForeground2: #4c0d55;
    --colorPaletteGrapeBorderActive: #881798;
    --colorPaletteLilacBackground2: #e6bfed;
    --colorPaletteLilacForeground2: #63276d;
    --colorPaletteLilacBorderActive: #b146c2;
    --colorPalettePinkBackground2: #f7c0e3;
    --colorPalettePinkForeground2: #80215d;
    --colorPalettePinkBorderActive: #e43ba6;
    --colorPaletteMagentaBackground2: #eca5d1;
    --colorPaletteMagentaForeground2: #6b0043;
    --colorPaletteMagentaBorderActive: #bf0077;
    --colorPalettePlumBackground2: #d696c0;
    --colorPalettePlumForeground2: #43002b;
    --colorPalettePlumBorderActive: #77004d;
    --colorPaletteBeigeBackground2: #d7d4d4;
    --colorPaletteBeigeForeground2: #444241;
    --colorPaletteBeigeBorderActive: #7a7574;
    --colorPaletteMinkBackground2: #cecccb;
    --colorPaletteMinkForeground2: #343231;
    --colorPaletteMinkBorderActive: #5d5a58;
    --colorPalettePlatinumBackground2: #cdd6d8;
    --colorPalettePlatinumForeground2: #3b4447;
    --colorPalettePlatinumBorderActive: #69797e;
    --colorPaletteAnchorBackground2: #bcc3c7;
    --colorPaletteAnchorForeground2: #202427;
    --colorPaletteAnchorBorderActive: #394146;
    --colorStatusSuccessBackground1: #f1faf1;
    --colorStatusSuccessBackground2: #9fd89f;
    --colorStatusSuccessBackground3: #107c10;
    --colorStatusSuccessForeground1: #0e700e;
    --colorStatusSuccessForeground2: #094509;
    --colorStatusSuccessForeground3: #107c10;
    --colorStatusSuccessForegroundInverted: #54b054;
    --colorStatusSuccessBorderActive: #107c10;
    --colorStatusSuccessBorder1: #9fd89f;
    --colorStatusSuccessBorder2: #107c10;
    --colorStatusWarningBackground1: #fff9f5;
    --colorStatusWarningBackground2: #fdcfb4;
    --colorStatusWarningBackground3: #f7630c;
    --colorStatusWarningForeground1: #bc4b09;
    --colorStatusWarningForeground2: #8a3707;
    --colorStatusWarningForeground3: #bc4b09;
    --colorStatusWarningForegroundInverted: #faa06b;
    --colorStatusWarningBorderActive: #f7630c;
    --colorStatusWarningBorder1: #fdcfb4;
    --colorStatusWarningBorder2: #bc4b09;
    --colorStatusDangerBackground1: #fdf3f4;
    --colorStatusDangerBackground2: #eeacb2;
    --colorStatusDangerBackground3: #c50f1f;
    --colorStatusDangerForeground1: #b10e1c;
    --colorStatusDangerForeground2: #6e0811;
    --colorStatusDangerForeground3: #c50f1f;
    --colorStatusDangerForegroundInverted: #dc626d;
    --colorStatusDangerBorderActive: #c50f1f;
    --colorStatusDangerBorder1: #eeacb2;
    --colorStatusDangerBorder2: #c50f1f;
    --colorStatusDangerBackground3Hover: #b10e1c;
    --colorStatusDangerBackground3Pressed: #960b18;
    --shadow2: 0 0 2px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .14);
    --shadow4: 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .14);
    --shadow8: 0 0 2px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .14);
    --shadow16: 0 0 2px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .14);
    --shadow28: 0 0 8px rgba(0, 0, 0, .12), 0 14px 28px rgba(0, 0, 0, .14);
    --shadow64: 0 0 8px rgba(0, 0, 0, .12), 0 32px 64px rgba(0, 0, 0, .14);
    --shadow2Brand: 0 0 2px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .25);
    --shadow4Brand: 0 0 2px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .25);
    --shadow8Brand: 0 0 2px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .25);
    --shadow16Brand: 0 0 2px rgba(0, 0, 0, .3), 0 8px 16px rgba(0, 0, 0, .25);
    --shadow28Brand: 0 0 8px rgba(0, 0, 0, .3), 0 14px 28px rgba(0, 0, 0, .25);
    --shadow64Brand: 0 0 8px rgba(0, 0, 0, .3), 0 32px 64px rgba(0, 0, 0, .25)
}

[data-theme=dark] {
    --borderRadiusNone: 0;
    --borderRadiusSmall: 2px;
    --borderRadiusMedium: 4px;
    --borderRadiusLarge: 6px;
    --borderRadiusXLarge: 8px;
    --borderRadiusCircular: 10000px;
    --fontSizeBase100: 10px;
    --fontSizeBase200: 12px;
    --fontSizeBase300: 14px;
    --fontSizeBase400: 16px;
    --fontSizeBase500: 20px;
    --fontSizeBase600: 24px;
    --fontSizeHero700: 28px;
    --fontSizeHero800: 32px;
    --fontSizeHero900: 40px;
    --fontSizeHero1000: 68px;
    --lineHeightBase100: 14px;
    --lineHeightBase200: 16px;
    --lineHeightBase300: 20px;
    --lineHeightBase400: 22px;
    --lineHeightBase500: 28px;
    --lineHeightBase600: 32px;
    --lineHeightHero700: 36px;
    --lineHeightHero800: 40px;
    --lineHeightHero900: 52px;
    --lineHeightHero1000: 92px;
    --fontFamilyBase: var(--font-geist-sans), "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    --fontFamilyMonospace: Consolas, "Courier New", Courier, monospace;
    --fontFamilyNumeric: var(--font-geist-sans), Bahnschrift, "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    --fontWeightRegular: 400;
    --fontWeightMedium: 500;
    --fontWeightSemibold: 600;
    --fontWeightBold: 700;
    --strokeWidthThin: 1px;
    --strokeWidthThick: 2px;
    --strokeWidthThicker: 3px;
    --strokeWidthThickest: 4px;
    --spacingHorizontalNone: 0;
    --spacingHorizontalXXS: 2px;
    --spacingHorizontalXS: 4px;
    --spacingHorizontalSNudge: 6px;
    --spacingHorizontalS: 8px;
    --spacingHorizontalMNudge: 10px;
    --spacingHorizontalM: 12px;
    --spacingHorizontalL: 16px;
    --spacingHorizontalXL: 20px;
    --spacingHorizontalXXL: 24px;
    --spacingHorizontalXXXL: 32px;
    --spacingVerticalNone: 0;
    --spacingVerticalXXS: 2px;
    --spacingVerticalXS: 4px;
    --spacingVerticalSNudge: 6px;
    --spacingVerticalS: 8px;
    --spacingVerticalMNudge: 10px;
    --spacingVerticalM: 12px;
    --spacingVerticalL: 16px;
    --spacingVerticalXL: 20px;
    --spacingVerticalXXL: 24px;
    --spacingVerticalXXXL: 32px;
    --durationUltraFast: 50ms;
    --durationFaster: .1s;
    --durationFast: .15s;
    --durationNormal: .2s;
    --durationGentle: .25s;
    --durationSlow: .3s;
    --durationSlower: .4s;
    --durationUltraSlow: .5s;
    --curveAccelerateMax: cubic-bezier(.9, .1, 1, .2);
    --curveAccelerateMid: cubic-bezier(1, 0, 1, 1);
    --curveAccelerateMin: cubic-bezier(.8, 0, .78, 1);
    --curveDecelerateMax: cubic-bezier(.1, .9, .2, 1);
    --curveDecelerateMid: cubic-bezier(0, 0, 0, 1);
    --curveDecelerateMin: cubic-bezier(.33, 0, .1, 1);
    --curveEasyEaseMax: cubic-bezier(.8, 0, .2, 1);
    --curveEasyEase: cubic-bezier(.33, 0, .67, 1);
    --curveLinear: cubic-bezier(0, 0, 1, 1);
    --colorNeutralForeground1: #ffffff;
    --colorNeutralForeground1Hover: #ffffff;
    --colorNeutralForeground1Pressed: #ffffff;
    --colorNeutralForeground1Selected: #ffffff;
    --colorNeutralForeground2: #d6d6d6;
    --colorNeutralForeground2Hover: #ffffff;
    --colorNeutralForeground2Pressed: #ffffff;
    --colorNeutralForeground2Selected: #ffffff;
    --colorNeutralForeground2BrandHover: #878aff;
    --colorNeutralForeground2BrandPressed: #2886de;
    --colorNeutralForeground2BrandSelected: #878aff;
    --colorNeutralForeground3: #adadad;
    --colorNeutralForeground3Hover: #d6d6d6;
    --colorNeutralForeground3Pressed: #d6d6d6;
    --colorNeutralForeground3Selected: #d6d6d6;
    --colorNeutralForeground3BrandHover: #878aff;
    --colorNeutralForeground3BrandPressed: #2886de;
    --colorNeutralForeground3BrandSelected: #878aff;
    --colorNeutralForeground4: #999999;
    --colorNeutralForegroundDisabled: #5c5c5c;
    --colorNeutralForegroundInvertedDisabled: rgba(255, 255, 255, .4);
    --colorBrandForegroundLink: #878aff;
    --colorBrandForegroundLinkHover: #62abf5;
    --colorBrandForegroundLinkPressed: #2886de;
    --colorBrandForegroundLinkSelected: #878aff;
    --colorNeutralForeground2Link: #d6d6d6;
    --colorNeutralForeground2LinkHover: #ffffff;
    --colorNeutralForeground2LinkPressed: #ffffff;
    --colorNeutralForeground2LinkSelected: #ffffff;
    --colorCompoundBrandForeground1: #878aff;
    --colorCompoundBrandForeground1Hover: #62abf5;
    --colorCompoundBrandForeground1Pressed: #2886de;
    --colorBrandForeground1: #878aff;
    --colorBrandForeground2: #62abf5;
    --colorBrandForeground2Hover: #96c6fa;
    --colorBrandForeground2Pressed: #ebf3fc;
    --colorNeutralForeground1Static: #242424;
    --colorNeutralForegroundStaticInverted: #ffffff;
    --colorNeutralForegroundInverted: #242424;
    --colorNeutralForegroundInvertedHover: #242424;
    --colorNeutralForegroundInvertedPressed: #242424;
    --colorNeutralForegroundInvertedSelected: #242424;
    --colorNeutralForegroundInverted2: #242424;
    --colorNeutralForegroundOnBrand: #ffffff;
    --colorNeutralForegroundInvertedLink: #ffffff;
    --colorNeutralForegroundInvertedLinkHover: #ffffff;
    --colorNeutralForegroundInvertedLinkPressed: #ffffff;
    --colorNeutralForegroundInvertedLinkSelected: #ffffff;
    --colorBrandForegroundInverted: #4648d4;
    --colorBrandForegroundInvertedHover: #4b41e1;
    --colorBrandForegroundInvertedPressed: #3d3faf;
    --colorBrandForegroundOnLight: #4648d4;
    --colorBrandForegroundOnLightHover: #4b41e1;
    --colorBrandForegroundOnLightPressed: #0e4775;
    --colorBrandForegroundOnLightSelected: #3d3faf;
    --colorNeutralBackground1: #292929;
    --colorNeutralBackground1Hover: #3d3d3d;
    --colorNeutralBackground1Pressed: #1f1f1f;
    --colorNeutralBackground1Selected: #383838;
    --colorNeutralBackground2: #1f1f1f;
    --colorNeutralBackground2Hover: #333333;
    --colorNeutralBackground2Pressed: #141414;
    --colorNeutralBackground2Selected: #2e2e2e;
    --colorNeutralBackground3: #141414;
    --colorNeutralBackground3Hover: #292929;
    --colorNeutralBackground3Pressed: #0a0a0a;
    --colorNeutralBackground3Selected: #242424;
    --colorNeutralBackground4: #0a0a0a;
    --colorNeutralBackground4Hover: #1f1f1f;
    --colorNeutralBackground4Pressed: #000000;
    --colorNeutralBackground4Selected: #1a1a1a;
    --colorNeutralBackground5: #000000;
    --colorNeutralBackground5Hover: #141414;
    --colorNeutralBackground5Pressed: #050505;
    --colorNeutralBackground5Selected: #0f0f0f;
    --colorNeutralBackground6: #333333;
    --colorNeutralBackgroundInverted: #ffffff;
    --colorNeutralBackgroundStatic: #3d3d3d;
    --colorNeutralBackgroundAlpha: rgba(26, 26, 26, .5);
    --colorNeutralBackgroundAlpha2: rgba(31, 31, 31, .7);
    --colorSubtleBackground: transparent;
    --colorSubtleBackgroundHover: #383838;
    --colorSubtleBackgroundPressed: #2e2e2e;
    --colorSubtleBackgroundSelected: #333333;
    --colorSubtleBackgroundLightAlphaHover: rgba(36, 36, 36, .8);
    --colorSubtleBackgroundLightAlphaPressed: rgba(36, 36, 36, .5);
    --colorSubtleBackgroundLightAlphaSelected: transparent;
    --colorSubtleBackgroundInverted: transparent;
    --colorSubtleBackgroundInvertedHover: rgba(0, 0, 0, .1);
    --colorSubtleBackgroundInvertedPressed: rgba(0, 0, 0, .3);
    --colorSubtleBackgroundInvertedSelected: rgba(0, 0, 0, .2);
    --colorTransparentBackground: transparent;
    --colorTransparentBackgroundHover: transparent;
    --colorTransparentBackgroundPressed: transparent;
    --colorTransparentBackgroundSelected: transparent;
    --colorNeutralBackgroundDisabled: #141414;
    --colorNeutralBackgroundInvertedDisabled: rgba(255, 255, 255, .1);
    --colorNeutralStencil1: #575757;
    --colorNeutralStencil2: #333333;
    --colorNeutralStencil1Alpha: rgba(255, 255, 255, .1);
    --colorNeutralStencil2Alpha: rgba(255, 255, 255, .05);
    --colorBackgroundOverlay: rgba(0, 0, 0, .5);
    --colorScrollbarOverlay: rgba(255, 255, 255, .6);
    --colorBrandBackground: #4b41e1;
    --colorBrandBackgroundHover: #4648d4;
    --colorBrandBackgroundPressed: #313396;
    --colorBrandBackgroundSelected: #3d3faf;
    --colorCompoundBrandBackground: #878aff;
    --colorCompoundBrandBackgroundHover: #62abf5;
    --colorCompoundBrandBackgroundPressed: #2886de;
    --colorBrandBackgroundStatic: #4648d4;
    --colorBrandBackground2: #082338;
    --colorBrandBackground2Hover: #313396;
    --colorBrandBackground2Pressed: #061724;
    --colorBrandBackground3Static: #3d3faf;
    --colorBrandBackground4Static: #313396;
    --colorBrandBackgroundInverted: #ffffff;
    --colorBrandBackgroundInvertedHover: #ebf3fc;
    --colorBrandBackgroundInvertedPressed: #b4d6fa;
    --colorBrandBackgroundInvertedSelected: #cfe4fa;
    --colorNeutralCardBackground: #333333;
    --colorNeutralCardBackgroundHover: #3d3d3d;
    --colorNeutralCardBackgroundPressed: #2e2e2e;
    --colorNeutralCardBackgroundSelected: #383838;
    --colorNeutralCardBackgroundDisabled: #141414;
    --colorNeutralStrokeAccessible: #adadad;
    --colorNeutralStrokeAccessibleHover: #bdbdbd;
    --colorNeutralStrokeAccessiblePressed: #b3b3b3;
    --colorNeutralStrokeAccessibleSelected: #878aff;
    --colorNeutralStroke1: #666666;
    --colorNeutralStroke1Hover: #757575;
    --colorNeutralStroke1Pressed: #6b6b6b;
    --colorNeutralStroke1Selected: #707070;
    --colorNeutralStroke2: #525252;
    --colorNeutralStroke3: #3d3d3d;
    --colorNeutralStrokeSubtle: #0a0a0a;
    --colorNeutralStrokeOnBrand: #292929;
    --colorNeutralStrokeOnBrand2: #ffffff;
    --colorNeutralStrokeOnBrand2Hover: #ffffff;
    --colorNeutralStrokeOnBrand2Pressed: #ffffff;
    --colorNeutralStrokeOnBrand2Selected: #ffffff;
    --colorBrandStroke1: #878aff;
    --colorBrandStroke2: #0e4775;
    --colorBrandStroke2Hover: #0e4775;
    --colorBrandStroke2Pressed: #0a2e4a;
    --colorBrandStroke2Contrast: #0e4775;
    --colorCompoundBrandStroke: #878aff;
    --colorCompoundBrandStrokeHover: #62abf5;
    --colorCompoundBrandStrokePressed: #2886de;
    --colorNeutralStrokeDisabled: #424242;
    --colorNeutralStrokeInvertedDisabled: rgba(255, 255, 255, .4);
    --colorTransparentStroke: transparent;
    --colorTransparentStrokeInteractive: transparent;
    --colorTransparentStrokeDisabled: transparent;
    --colorNeutralStrokeAlpha: rgba(255, 255, 255, .1);
    --colorNeutralStrokeAlpha2: rgba(255, 255, 255, .2);
    --colorStrokeFocus1: #000000;
    --colorStrokeFocus2: #ffffff;
    --colorNeutralShadowAmbient: rgba(0, 0, 0, .24);
    --colorNeutralShadowKey: rgba(0, 0, 0, .28);
    --colorNeutralShadowAmbientLighter: rgba(0, 0, 0, .12);
    --colorNeutralShadowKeyLighter: rgba(0, 0, 0, .14);
    --colorNeutralShadowAmbientDarker: rgba(0, 0, 0, .4);
    --colorNeutralShadowKeyDarker: rgba(0, 0, 0, .48);
    --colorBrandShadowAmbient: rgba(0, 0, 0, .3);
    --colorBrandShadowKey: rgba(0, 0, 0, .25);
    --colorPaletteRedBackground1: #3f1011;
    --colorPaletteRedBackground2: #751d1f;
    --colorPaletteRedBackground3: #d13438;
    --colorPaletteRedForeground1: #e37d80;
    --colorPaletteRedForeground2: #f1bbbc;
    --colorPaletteRedForeground3: #e37d80;
    --colorPaletteRedBorderActive: #e37d80;
    --colorPaletteRedBorder1: #d13438;
    --colorPaletteRedBorder2: #e37d80;
    --colorPaletteGreenBackground1: #052505;
    --colorPaletteGreenBackground2: #094509;
    --colorPaletteGreenBackground3: #107c10;
    --colorPaletteGreenForeground1: #54b054;
    --colorPaletteGreenForeground2: #9fd89f;
    --colorPaletteGreenForeground3: #9fd89f;
    --colorPaletteGreenBorderActive: #54b054;
    --colorPaletteGreenBorder1: #107c10;
    --colorPaletteGreenBorder2: #9fd89f;
    --colorPaletteDarkOrangeBackground1: #411200;
    --colorPaletteDarkOrangeBackground2: #7a2101;
    --colorPaletteDarkOrangeBackground3: #da3b01;
    --colorPaletteDarkOrangeForeground1: #e9835e;
    --colorPaletteDarkOrangeForeground2: #f4bfab;
    --colorPaletteDarkOrangeForeground3: #e9835e;
    --colorPaletteDarkOrangeBorderActive: #e9835e;
    --colorPaletteDarkOrangeBorder1: #da3b01;
    --colorPaletteDarkOrangeBorder2: #e9835e;
    --colorPaletteYellowBackground1: #4c4400;
    --colorPaletteYellowBackground2: #817400;
    --colorPaletteYellowBackground3: #fde300;
    --colorPaletteYellowForeground1: #feee66;
    --colorPaletteYellowForeground2: #fef7b2;
    --colorPaletteYellowForeground3: #fdea3d;
    --colorPaletteYellowBorderActive: #feee66;
    --colorPaletteYellowBorder1: #fde300;
    --colorPaletteYellowBorder2: #fdea3d;
    --colorPaletteBerryBackground1: #3a1136;
    --colorPaletteBerryBackground2: #6d2064;
    --colorPaletteBerryBackground3: #c239b3;
    --colorPaletteBerryForeground1: #da7ed0;
    --colorPaletteBerryForeground2: #edbbe7;
    --colorPaletteBerryForeground3: #d161c4;
    --colorPaletteBerryBorderActive: #da7ed0;
    --colorPaletteBerryBorder1: #c239b3;
    --colorPaletteBerryBorder2: #d161c4;
    --colorPaletteLightGreenBackground1: #063004;
    --colorPaletteLightGreenBackground2: #0b5a08;
    --colorPaletteLightGreenBackground3: #13a10e;
    --colorPaletteLightGreenForeground1: #5ec75a;
    --colorPaletteLightGreenForeground2: #a7e3a5;
    --colorPaletteLightGreenForeground3: #3db838;
    --colorPaletteLightGreenBorderActive: #5ec75a;
    --colorPaletteLightGreenBorder1: #13a10e;
    --colorPaletteLightGreenBorder2: #3db838;
    --colorPaletteMarigoldBackground1: #463100;
    --colorPaletteMarigoldBackground2: #835b00;
    --colorPaletteMarigoldBackground3: #eaa300;
    --colorPaletteMarigoldForeground1: #f2c661;
    --colorPaletteMarigoldForeground2: #f9e2ae;
    --colorPaletteMarigoldForeground3: #efb839;
    --colorPaletteMarigoldBorderActive: #f2c661;
    --colorPaletteMarigoldBorder1: #eaa300;
    --colorPaletteMarigoldBorder2: #efb839;
    --colorPaletteRedForegroundInverted: #d13438;
    --colorPaletteGreenForegroundInverted: #107c10;
    --colorPaletteYellowForegroundInverted: #817400;
    --colorPaletteDarkRedBackground2: #590815;
    --colorPaletteDarkRedForeground2: #d69ca5;
    --colorPaletteDarkRedBorderActive: #ac4f5e;
    --colorPaletteCranberryBackground2: #6e0811;
    --colorPaletteCranberryForeground2: #eeacb2;
    --colorPaletteCranberryBorderActive: #dc626d;
    --colorPalettePumpkinBackground2: #712d09;
    --colorPalettePumpkinForeground2: #efc4ad;
    --colorPalettePumpkinBorderActive: #df8e64;
    --colorPalettePeachBackground2: #8f4e00;
    --colorPalettePeachForeground2: #ffddb3;
    --colorPalettePeachBorderActive: #ffba66;
    --colorPaletteGoldBackground2: #6c5700;
    --colorPaletteGoldForeground2: #ecdfa5;
    --colorPaletteGoldBorderActive: #dac157;
    --colorPaletteBrassBackground2: #553e06;
    --colorPaletteBrassForeground2: #e0cea2;
    --colorPaletteBrassBorderActive: #c1a256;
    --colorPaletteBrownBackground2: #50301a;
    --colorPaletteBrownForeground2: #ddc3b0;
    --colorPaletteBrownBorderActive: #bb8f6f;
    --colorPaletteForestBackground2: #294903;
    --colorPaletteForestForeground2: #bdd99b;
    --colorPaletteForestBorderActive: #85b44c;
    --colorPaletteSeafoamBackground2: #00723b;
    --colorPaletteSeafoamForeground2: #a8f0cd;
    --colorPaletteSeafoamBorderActive: #5ae0a0;
    --colorPaletteDarkGreenBackground2: #063b06;
    --colorPaletteDarkGreenForeground2: #9ad29a;
    --colorPaletteDarkGreenBorderActive: #4da64d;
    --colorPaletteLightTealBackground2: #00666d;
    --colorPaletteLightTealForeground2: #a6e9ed;
    --colorPaletteLightTealBorderActive: #58d3db;
    --colorPaletteTealBackground2: #02494c;
    --colorPaletteTealForeground2: #9bd9db;
    --colorPaletteTealBorderActive: #4cb4b7;
    --colorPaletteSteelBackground2: #00333f;
    --colorPaletteSteelForeground2: #94c8d4;
    --colorPaletteSteelBorderActive: #4496a9;
    --colorPaletteBlueBackground2: #004377;
    --colorPaletteBlueForeground2: #a9d3f2;
    --colorPaletteBlueBorderActive: #5caae5;
    --colorPaletteRoyalBlueBackground2: #002c4e;
    --colorPaletteRoyalBlueForeground2: #9abfdc;
    --colorPaletteRoyalBlueBorderActive: #4a89ba;
    --colorPaletteCornflowerBackground2: #2c3c85;
    --colorPaletteCornflowerForeground2: #c8d1fa;
    --colorPaletteCornflowerBorderActive: #93a4f4;
    --colorPaletteNavyBackground2: #001665;
    --colorPaletteNavyForeground2: #a3b2e8;
    --colorPaletteNavyBorderActive: #546fd2;
    --colorPaletteLavenderBackground2: #3f3682;
    --colorPaletteLavenderForeground2: #d2ccf8;
    --colorPaletteLavenderBorderActive: #a79cf1;
    --colorPalettePurpleBackground2: #341a51;
    --colorPalettePurpleForeground2: #c6b1de;
    --colorPalettePurpleBorderActive: #9470bd;
    --colorPaletteGrapeBackground2: #4c0d55;
    --colorPaletteGrapeForeground2: #d9a7e0;
    --colorPaletteGrapeBorderActive: #b55fc1;
    --colorPaletteLilacBackground2: #63276d;
    --colorPaletteLilacForeground2: #e6bfed;
    --colorPaletteLilacBorderActive: #cf87da;
    --colorPalettePinkBackground2: #80215d;
    --colorPalettePinkForeground2: #f7c0e3;
    --colorPalettePinkBorderActive: #ef85c8;
    --colorPaletteMagentaBackground2: #6b0043;
    --colorPaletteMagentaForeground2: #eca5d1;
    --colorPaletteMagentaBorderActive: #d957a8;
    --colorPalettePlumBackground2: #5a003b;
    --colorPalettePlumForeground2: #d696c0;
    --colorPalettePlumBorderActive: #ad4589;
    --colorPaletteBeigeBackground2: #444241;
    --colorPaletteBeigeForeground2: #d7d4d4;
    --colorPaletteBeigeBorderActive: #afabaa;
    --colorPaletteMinkBackground2: #343231;
    --colorPaletteMinkForeground2: #cecccb;
    --colorPaletteMinkBorderActive: #9e9b99;
    --colorPalettePlatinumBackground2: #3b4447;
    --colorPalettePlatinumForeground2: #cdd6d8;
    --colorPalettePlatinumBorderActive: #a0adb2;
    --colorPaletteAnchorBackground2: #202427;
    --colorPaletteAnchorForeground2: #bcc3c7;
    --colorPaletteAnchorBorderActive: #808a90;
    --colorStatusSuccessBackground1: #052505;
    --colorStatusSuccessBackground2: #094509;
    --colorStatusSuccessBackground3: #107c10;
    --colorStatusSuccessForeground1: #54b054;
    --colorStatusSuccessForeground2: #9fd89f;
    --colorStatusSuccessForeground3: #9fd89f;
    --colorStatusSuccessBorderActive: #54b054;
    --colorStatusSuccessForegroundInverted: #0e700e;
    --colorStatusSuccessBorder1: #107c10;
    --colorStatusSuccessBorder2: #9fd89f;
    --colorStatusWarningBackground1: #4a1e04;
    --colorStatusWarningBackground2: #8a3707;
    --colorStatusWarningBackground3: #f7630c;
    --colorStatusWarningForeground1: #faa06b;
    --colorStatusWarningForeground2: #fdcfb4;
    --colorStatusWarningForeground3: #f98845;
    --colorStatusWarningBorderActive: #faa06b;
    --colorStatusWarningForegroundInverted: #bc4b09;
    --colorStatusWarningBorder1: #f7630c;
    --colorStatusWarningBorder2: #f98845;
    --colorStatusDangerBackground1: #3b0509;
    --colorStatusDangerBackground2: #6e0811;
    --colorStatusDangerBackground3: #c50f1f;
    --colorStatusDangerForeground1: #dc626d;
    --colorStatusDangerForeground2: #eeacb2;
    --colorStatusDangerForeground3: #eeacb2;
    --colorStatusDangerBorderActive: #dc626d;
    --colorStatusDangerForegroundInverted: #b10e1c;
    --colorStatusDangerBorder1: #c50f1f;
    --colorStatusDangerBorder2: #dc626d;
    --colorStatusDangerBackground3Hover: #b10e1c;
    --colorStatusDangerBackground3Pressed: #960b18;
    --shadow2: 0 0 2px rgba(0, 0, 0, .24), 0 1px 2px rgba(0, 0, 0, .28);
    --shadow4: 0 0 2px rgba(0, 0, 0, .24), 0 2px 4px rgba(0, 0, 0, .28);
    --shadow8: 0 0 2px rgba(0, 0, 0, .24), 0 4px 8px rgba(0, 0, 0, .28);
    --shadow16: 0 0 2px rgba(0, 0, 0, .24), 0 8px 16px rgba(0, 0, 0, .28);
    --shadow28: 0 0 8px rgba(0, 0, 0, .24), 0 14px 28px rgba(0, 0, 0, .28);
    --shadow64: 0 0 8px rgba(0, 0, 0, .24), 0 32px 64px rgba(0, 0, 0, .28);
    --shadow2Brand: 0 0 2px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .25);
    --shadow4Brand: 0 0 2px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .25);
    --shadow8Brand: 0 0 2px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .25);
    --shadow16Brand: 0 0 2px rgba(0, 0, 0, .3), 0 8px 16px rgba(0, 0, 0, .25);
    --shadow28Brand: 0 0 8px rgba(0, 0, 0, .3), 0 14px 28px rgba(0, 0, 0, .25);
    --shadow64Brand: 0 0 8px rgba(0, 0, 0, .3), 0 32px 64px rgba(0, 0, 0, .25)
}

[data-theme=light] {
    --colorNeutralBackground7: #252423;
    --colorNeutralBackground8: #b3d4ff;
    --colorNeutralBackground9: #ffffff;
    --colorNeutralBackground10: #edebe9;
    --colorNeutralBackground11: #ffeff6;
    --colorNeutralBackground12Hover: #fae9ec;
    --colorNeutralBackground12Pressed: #fad6dc;
    --colorNeutralBackground13: #f1b8c0;
    --colorNeutralBackground14: #fafafa;
    --colorNeutralBackground14Hover: #3b5dae;
    --colorNeutralBackground14Pressed: #29417b;
    --colorNeutralBackground15: #faf9f8;
    --colorNeutralBackground16: #e5e8ff;
    --colorNeutralBackground17: #fbedef;
    --colorNeutralBackground18: #dff6dd;
    --colorNeutralBackground19: #fde7e9;
    --colorNeutralBackground20: #fff4ce;
    --colorNeutralBackground21: #4b5dff;
    --colorNeutralBackground22: #8082f4;
    --colorNeutralBackground23: #ae94d9;
    --colorNeutralBackground24: #ee1f5d;
    --colorNeutralBackground25: #ffb700;
    --colorNeutralBackground26: #ff98cb;
    --colorNeutralForeground5: #a63f50;
    --colorNeutralForeground6: #1b1a19;
    --colorNeutralForeground7: #9d4659;
    --colorNeutralForeground7Focus: #808080;
    --colorNeutralForeground8: #af4e63;
    --colorNeutralForeground8Alpha: #af4e6380;
    --colorNeutralForeground8Hover: #954355;
    --colorNeutralForeground8Pressed: #682f3d;
    --colorNeutralForeground9: #444444;
    --colorNeutralForeground10: #c43857;
    --colorNeutralForeground11: #605e5c;
    --colorNeutralForeground12: #0c0c0c;
    --colorNeutralForeground12Hover: #d9546a;
    --colorNeutralForeground13: #161514;
    --colorNeutralForeground14: #727272;
    --colorNeutralForeground15: #d6d6d6;
    --colorNeutralForeground16: #af4e63;
    --colorNeutralForegroundPro: #018a39;
    --colorNeutralForeground2Pro: #107c10;
    --colorNeutralForegroundCon: #c50f1f;
    --colorNeutralForeground3Link: #484644;
    --colorNeutralForeground3LinkPressed: #a63f50;
    --colorInfoTileStrongEnforce: #da3815;
    --colorNeutralBackground27: #ee5d1f;
    --colorNeutralBackground28: #ebebeb;
    --colorNeutralBackground29: #eeebf0;
    --colorNeutralBackground30: #f4f8f9;
    --colorHeroBackgroundInverted: #000000;
    --colorHeroForegroundInverted: #ffffff;
    --colorNeutralBackground31: #fdfefe;
    --colorSidebar: #ffffff;
    --colorTocHover: #fad6dc;
    --colorTocPressed: #994053;
    --brand-comm-blue: #0078d4;
    --brand-powerbi: #f2c811;
    --brand-office: #d83b01;
    --brand-powerpoint: #c43e1c;
    --brand-windows: #0078d4;
    --brand-publisher: #077568;
    --brand-cortana: #222222;
    --brand-stream: #bc1948;
    --brand-excel: #107c41;
    --brand-sway: #008272;
    --brand-groupme: #00bcf2;
    --brand-teams: #5b5fc7;
    --brand-onedrive: #0078d4;
    --brand-visio: #3955a3;
    --brand-planner: #107c41;
    --brand-word: #185abd;
    --brand-powerapps: #742774;
    --brand-booking: #00a99d;
    --docsearch-primary-color: var(--colorNeutralForeground16);
    --docsearch-highlight-color: var(--colorNeutralForeground16);
    --docsearch-muted-color: #444950;
    --docsearch-container-background: rgb(199 199 199 / 86%);
    --docsearch-logo-color: #000;
    --docsearch-modal-background: var(--colorNeutralBackgroundDisabled);
    --docsearch-key-gradient-override: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
    --docsearch-key-shadow-override: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, .4);
    --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, .5), 0 3px 8px 0 #00000040;
    --docsearch-hit-shadow: 0 1px 3px 0 #00000040;
    --docsearch-key-shadow: inset 0 -2px 0 0 #0000002b, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(91 91 92 / 40%)
}

[data-theme=dark] {
    --colorNeutralBackground10: #121416;
    --colorNeutralBackground11: #260b0f;
    --colorNeutralBackground12Hover: #260b0f;
    --colorNeutralBackground12Pressed: #3d151c;
    --colorNeutralBackground13: #0e473f;
    --colorNeutralBackground14: #1a1a1a;
    --colorNeutralBackground14Hover: #c4a251;
    --colorNeutralBackground14Pressed: #d6be84;
    --colorNeutralBackground15: #050607;
    --colorNeutralBackground16: #1a1700;
    --colorNeutralBackground17: #041210;
    --colorNeutralBackground18: #200922;
    --colorNeutralBackground19: #021816;
    --colorNeutralBackground20: #000b31;
    --colorNeutralBackground21: #b4a200;
    --colorNeutralBackground22: #7f7d0b;
    --colorNeutralBackground23: #516b26;
    --colorNeutralBackground7: #141414;
    --colorNeutralBackground8: #4c2b00;
    --colorNeutralBackground9: #1f1f1f;
    --colorNeutralForeground11: #9fa1a3;
    --colorNeutralForeground12: #f3f3f3;
    --colorNeutralForeground12Hover: #db7488;
    --colorNeutralForeground13: #e9eaeb;
    --colorNeutralForeground14: #8d8d8d;
    --colorNeutralForeground3Link: #b7b9bb;
    --colorNeutralForeground3LinkPressed: #fd9fb0;
    --colorNeutralForeground6: #e4e5e6;
    --colorNeutralForeground7Focus: #7f7f7f;
    --colorNeutralForeground8: #db7488;
    --colorNeutralForeground8Hover: #6abcaa;
    --colorNeutralForeground8Pressed: #97d0c2;
    --colorNeutralForeground9: #bbbbbb;
    --colorNeutralForeground16: #cf4460;
    --colorNeutralForegroundPro: #fe75c6;
    --colorNeutralBackground28: #333333;
    --colorNeutralBackground29: #1f1f1f;
    --colorNeutralBackground30: #242424;
    --colorHeroBackgroundInverted: #ffffff;
    --colorHeroForegroundInverted: #424242;
    --colorNeutralBackground31: #292929;
    --colorSidebar: #141414;
    --colorTocHover: #6e2a37;
    --colorTocPressed: #db7488;
    --colorNeutralForeground2Pro: #109c10;
    --colorNeutralForegroundCon: #ff3232;
    --docsearch-key-gradient-override: linear-gradient(-26.5deg, #4a4a4a, #000000);
    --docsearch-key-shadow-override: inset 0 -2px 0 0 #1c1d25, inset 0 0 1px 1px #515461, 0 2px 2px 0 rgba(3, 4, 9, .3)
}

[data-theme=light] {
    font-family: Segoe UI, "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
    font-size: 1rem;
    --user-font-scale: 1rem - 16px;
    font-size: clamp(.875rem, .4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
    scroll-behavior: smooth;
    --link-color: #02767a
}

:root {
    color-scheme: light
}

[data-theme=dark] {
    color-scheme: dark
}
```

### src/components/Grainient.css

Grupo: CSS runtime de componente

CSS local importado por src/components/Grainient.jsx.

```css
.grainient-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
```

### public/Design System/Lexy Design System (1)/colors_and_type.css

Grupo: Referencia de marca incluida en el repo

CSS de referencia del manual/preview de marca. No es la hoja runtime principal de Next, pero documenta tokens de marca.

```css
/* =========================================================================
   Lexy · Design System — Base tokens (colors + type)
   Source of truth: Lexy Manual de Marca (see assets/Lexy-Manual-de-Marca.pdf)
   All values come straight from the brand guide. Do not invent new hex codes.
   ========================================================================= */

/* ---------- Webfonts (self-hosted) ---------- */

/* Host Grotesk — primary typeface, for graphics + UI */
@font-face {
  font-family: "Host Grotesk";
  src: url("fonts/HostGrotesk-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("fonts/HostGrotesk-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("fonts/HostGrotesk-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("fonts/HostGrotesk-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("fonts/HostGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("fonts/HostGrotesk-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("fonts/HostGrotesk-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("fonts/HostGrotesk-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* Archivo — complementary typeface, documents + long-form body */
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* Archivo Condensed — compressed display variant, used for subheaders in the brand book */
@font-face {
  font-family: "Archivo Condensed";
  src: url("fonts/ArchivoCondensed-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo Condensed";
  src: url("fonts/ArchivoCondensed-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo Condensed";
  src: url("fonts/ArchivoCondensed-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo Condensed";
  src: url("fonts/ArchivoCondensed-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* === BRAND PALETTE (from Manual de Marca p.16) === */
  /* Core Lexy */
  --lexy-ink:      #0B013C;  /* deep navy — primary dark, brand wordmark */
  --lexy-indigo:   #27198E;  /* indigo — secondary dark */
  --lexy-violet:   #4429CC;  /* primary brand violet — the "encendido" color */
  --lexy-lavender: #9D90FC;  /* soft lavender — the top-face of the isotipo */
  --lexy-gray:     #EFEFEF;  /* neutral background */

  /* Submarca accents */
  --lexy-magenta:  #9D1AEE;  /* Lexy Deudor */
  --lexy-teal:     #00B7B7;  /* Lexy Salud */

  /* === SEMANTIC COLOR TOKENS === */
  /* Surfaces */
  --surface-default:   #FFFFFF;
  --surface-muted:     var(--lexy-gray);
  --surface-inverse:   var(--lexy-ink);
  --surface-brand:     var(--lexy-violet);
  --surface-brand-soft:#EEEBFE;       /* 12% tint of lavender over white */
  --surface-overlay:   rgba(11, 1, 60, 0.72);

  /* Foreground / text */
  --fg-1:          var(--lexy-ink);     /* headings, primary text on light */
  --fg-2:          #3A3368;             /* body on light (ink @ ~70%) */
  --fg-3:          #706A92;             /* tertiary, captions */
  --fg-muted:      #A8A3C3;             /* disabled, placeholder */
  --fg-on-brand:   #FFFFFF;             /* text on violet / ink */
  --fg-on-inverse: #FFFFFF;
  --fg-inverse-2:  #C5BEF5;             /* secondary text on ink (lavender tint) */
  --fg-link:       var(--lexy-violet);
  --fg-link-hover: var(--lexy-indigo);

  /* Borders */
  --border-subtle:  #E6E4F2;
  --border-default: #D6D2EA;
  --border-strong:  var(--lexy-ink);
  --border-brand:   var(--lexy-violet);

  /* Status / semantic */
  --status-success: #00B7B7;            /* uses teal — Lexy Salud hue */
  --status-warning: #F5B544;
  --status-danger:  #E5484D;
  --status-info:    var(--lexy-violet);

  /* === SPACING (8pt grid with a 4pt half-step) === */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* === RADII === */
  /* Derived from the rounded-rectangle ends of the isotipo's arms and the
     pill used in the Lexy Salud badge. */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* === SHADOWS ===
     Low-elevation, slightly ink-tinted. The brand skews flat — use sparingly. */
  --shadow-xs: 0 1px 2px rgba(11, 1, 60, 0.06);
  --shadow-sm: 0 2px 6px rgba(11, 1, 60, 0.08);
  --shadow-md: 0 8px 20px rgba(11, 1, 60, 0.10);
  --shadow-lg: 0 18px 40px rgba(11, 1, 60, 0.14);
  --shadow-xl: 0 24px 48px rgba(11, 1, 60, 0.18);

  /* === MOTION === */
  --ease-standard:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-emphasized:  cubic-bezier(0.2, 0.9, 0.25, 1.15);
  --ease-out-soft:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;

  /* === TYPOGRAPHY FAMILIES === */
  --font-display:   "Host Grotesk", "Inter", system-ui, sans-serif;
  --font-body:      "Archivo", "Host Grotesk", system-ui, sans-serif;
  --font-condensed: "Archivo Condensed", "Archivo Narrow", "Archivo", system-ui, sans-serif;

  /* === TYPE SCALE ===
     Rooted in the brand book: titles 50pt Archivo, sub 26pt Archivo Condensed,
     body 18pt Archivo. Rounded to an 8px-ish ratio. */
  --fs-display:  72px;   /* hero / landing headlines */
  --fs-h1:       50px;
  --fs-h2:       36px;
  --fs-h3:       26px;
  --fs-h4:       20px;
  --fs-body-lg:  20px;
  --fs-body:     18px;
  --fs-body-sm:  16px;
  --fs-caption:  14px;
  --fs-micro:    12px;

  --lh-tight:   1.05;
  --lh-heading: 1.15;
  --lh-snug:    1.3;
  --lh-body:    1.5;
  --lh-relaxed: 1.65;

  --tracking-display: -0.02em;
  --tracking-heading: -0.015em;
  --tracking-body:    0;
  --tracking-eyebrow: 0.14em;  /* for all-caps eyebrow labels */
}

/* =========================================================================
   Semantic element styles — reset-friendly defaults for host pages.
   ========================================================================= */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--surface-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lexy-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}

/* NOTE: bare element selectors inherit color so tokens work on dark surfaces.
   The explicit ink color lives on the .lexy-* utility classes below. */
h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); color: inherit; margin: 0; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); color: inherit; margin: 0; }
h3 { font-family: var(--font-condensed); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); color: inherit; margin: 0; text-transform: uppercase; letter-spacing: 0.01em; }
h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); color: inherit; margin: 0; }
p  { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: inherit; margin: 0; text-wrap: pretty; }

/* Opinionated utility classes — these DO set the ink color on light surfaces.
   Use these when you want the brand's default foreground; skip them on dark. */
.lexy-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); color: var(--fg-1); margin: 0; }
.lexy-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); color: var(--fg-1); margin: 0; }
.lexy-h3 { font-family: var(--font-condensed); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg-1); margin: 0; text-transform: uppercase; letter-spacing: 0.01em; }
.lexy-h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--fg-1); margin: 0; }
.lexy-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0; text-wrap: pretty; }

.lexy-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}

.lexy-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}

.lexy-eyebrow {
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--lexy-violet);
}

/* The signature italic "fácil" treatment — pulled directly from the logo lockup */
.lexy-accent-italic {
  font-style: italic;
  font-weight: 700;
}

a, .lexy-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
a:hover, .lexy-link:hover {
  color: var(--fg-link-hover);
  border-bottom-color: currentColor;
}

code, .lexy-mono {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 0.95em;
  background: var(--surface-muted);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--lexy-indigo);
}

::selection {
  background: var(--lexy-lavender);
  color: var(--lexy-ink);
}
```

### fluent2-docs/fluent-tokens.css

Grupo: Referencia Fluent exportada

Export de tokens/estilos Fluent disponible en el repo para consulta comparativa.

```css
@charset "UTF-8";
@import"https://cdn.jsdelivr.net/npm/@docsearch/css@3";

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

:root,
[data-theme=light] {
    --sidebar-width: 260px;
    --offscreen-sidebar-width: 324px;
    --side-padding: 32px;
    --sidebar-border-color: var(--colorNeutralBackground10)
}

body {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: stretch;
    padding: 0;
    margin: 0;
    width: 100%;
    min-height: 100vh;
    overscroll-behavior: none
}

.content-width {
    margin: 0 auto;
    padding-left: var(--side-padding, 32px);
    padding-right: var(--side-padding, 32px);
    width: 100%
}

header {
    padding: 20px 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    position: sticky;
    top: 0;
    z-index: 2
}

@media(min-width: 1140px) {
    header {
        z-index: 3
    }
}

.wrap {
    padding: 20px var(--side-padding, 32px);
    flex: 1 0 auto
}

.footer-content {
    padding: 32px var(--side-padding, 32px)
}

.sidebar {
    position: fixed;
    z-index: 2;
    width: var(--offscreen-sidebar-width);
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--offscreen-sidebar-width));
    transition: left .3s cubic-bezier(.4, 0, .2, 1);
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    padding: 20px var(--side-padding, 32px);
    background-color: var(--colorSidebar);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    border-right: 1px solid var(--sidebar-border-color)
}

.sidebar-visible .sidebar {
    left: 0
}

.sidebar .sidebar-content {
    background-color: var(--colorSidebar)
}

.s-main {
    display: flex;
    justify-content: flex-start;
    column-gap: 60px
}

.content {
    flex-grow: 1;
    width: 100%;
    max-width: 768px;
    margin: auto
}

.toc {
    flex: 0 0 228px;
    display: none
}

#feedback-button {
    display: block
}

@media(min-width: 1140px) {
    .wrap {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        column-gap: 40px
    }

    .sidebar {
        background: none;
        overflow-y: unset;
        position: static;
        padding: 0;
        flex: 0 0 var(--sidebar-width);
        max-width: var(--sidebar-width);
        width: 100%;
        border: 0;
        min-height: 0;
        height: auto;
        -webkit-backdrop-filter: none;
        backdrop-filter: none
    }

    .sidebar-content {
        position: fixed;
        top: 76px;
        left: 0;
        overflow-y: auto;
        bottom: 0;
        width: 320px;
        padding: 0 28px 0 32px
    }

    #fluent2-footer {
        margin-left: 320px
    }

    .s-main {
        flex-grow: 1;
        padding-left: 15px
    }

    .content {
        margin: 0
    }
}

@media(min-width: 1440px) {
    .wrap {
        column-gap: 60px
    }

    .toc {
        display: block
    }

    .s-main {
        display: grid;
        grid-template-columns: 1fr 228px;
        padding-left: unset
    }

    .content {
        margin: 0 auto
    }

    #feedback-button {
        display: none
    }
}

@media(min-width: 1140px) {
    .hero-layout__main {
        padding-left: calc(var(--sidebar-width) + 28px + 32px)
    }
}

@media(forced-colors:active) {

    .focusable,
    a {
        border-radius: 2px
    }

    .focusable:focus,
    a:focus {
        border: .15rem solid CanvasText
    }

    .focusable:focus:not(:focus-visible),
    a:focus:not(:focus-visible) {
        border: none
    }
}

.flex {
    display: flex
}

.flex-mid {
    display: flex;
    align-items: center;
    justify-content: center
}

.focusable,
a {
    transition: opacity .1s, box-shadow .1s;
    border-radius: 2px
}

.focusable:focus,
a:focus {
    opacity: .8;
    outline: 0;
    box-shadow: 0 0 0 .15rem var(--colorStrokeFocus2)
}

.focusable:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    opacity: .8;
    outline: 0;
    box-shadow: none
}

img.rounded {
    border-radius: 22px
}

img.rounded-16 {
    border-radius: 16px
}

.mt-1 {
    margin-top: .5em
}

.m-0-wrap * {
    margin: 0
}

@font-face {
    font-family: Cascadia Code;
    src: url(/assets/fonts/CascadiaCode.ttf) format("truetype"), url(/assets/fonts/CascadiaCode-Regular.otf) format("opentype"), url(/assets/fonts/CascadiaCode.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Segoe UI;
    src: local("Segoe UI"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format("woff2"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format("woff"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format("truetype");
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: Segoe UI;
    src: local("Segoe UI Semibold"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format("woff2"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format("woff"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format("truetype");
    font-weight: 600;
    font-display: swap
}

@font-face {
    font-family: Segoe UI;
    src: local("Segoe UI Bold"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format("woff2"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format("woff"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format("truetype");
    font-weight: 900;
    font-display: swap
}

h1 {
    font-size: 68px;
    margin: 24px 0;
    font-weight: 600;
    line-height: 92px;
    letter-spacing: -.04em;
    font-style: normal
}

h1:first-child {
    margin-top: 0
}

h2,
h3,
h4,
h5,
h6 {
    margin: 1em 0;
    font-weight: 600
}

h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
    font-size: inherit
}

h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    margin: 40px 0
}

h3 {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    margin: 0 0 24px
}

p {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    margin: 0 0 40px
}

.muted {
    color: var(--colorNeutralForeground11)
}

.small {
    font-size: 14px;
    line-height: 21px
}

.two-columns .small {
    margin-bottom: 12px
}

.ok {
    color: var(--colorNeutralForeground2Pro)
}

.notok {
    color: var(--colorNeutralForegroundCon)
}

pre {
    padding: 1em;
    background-color: #faf9f8
}

.content li {
    line-height: 21px;
    padding-left: .5em
}

.content ul {
    list-style: disc;
    padding: 0;
    margin: 0 0 1.5em 1.5em
}

.content a:not(.codeSandboxLink):not(.fluent-react-link):not(.fui-BreadcrumbButton):not(.link-tile-anchor),
.content a:not(.codeSandboxLink):visited:not(.fluent-react-link):visited:not(.fui-BreadcrumbButton):visited:not(.link-tile-anchor):visited {
    color: var(--colorNeutralForeground6);
    text-decoration: underline
}

strong {
    font-weight: 600
}

strong.red {
    color: var(--colorInfoTileStrongEnforce)
}

strong.gray {
    color: var(--colorNeutralStroke1Selected)
}

.caption-2 {
    font-size: 10px;
    line-height: 14px
}

.caption-2-ios,
.caption-2-android,
.caption,
.caption-windows {
    font-size: 12px;
    line-height: 16px
}

.caption-macos {
    font-size: 10px;
    line-height: 13px
}

.caption-ios,
.caption-android {
    font-size: 13px;
    line-height: 18px
}

.body-2-ios {
    font-size: 15px;
    line-height: 20px
}

.body-2-android,
.body,
.body-windows {
    font-size: 14px;
    line-height: 20px
}

.body-macos {
    font-size: 13px;
    line-height: 16px
}

.body-ios {
    font-size: 17px;
    line-height: 22px
}

.body-android {
    font-size: 16px;
    line-height: 24px
}

.body-large-windows {
    font-size: 18px;
    line-height: 24px
}

.subtitle-2 {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600
}

.subtitle-2.light {
    font-weight: 400
}

.subtitle-2-macos {
    font-size: 11px;
    line-height: 14px;
    font-weight: 400
}

.subtitle-2-annotation {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--colorNeutralForeground3);
    margin-top: -12px
}

.subtitle {
    font-size: 20px;
    line-height: 26px;
    font-weight: 600
}

.subtitle-windows {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600
}

.subtitle-macos {
    font-size: 13px;
    line-height: 16px;
    font-weight: 700
}

.title-3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600
}

.title-3-macos {
    font-size: 15px;
    line-height: 20px;
    font-weight: 400
}

.title-3-ios {
    font-size: 20px;
    line-height: 25px;
    font-weight: 600
}

.title-3-android {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500
}

.title-2 {
    font-size: 28px;
    line-height: 36px;
    font-weight: 600
}

.title-2-macos {
    font-size: 17px;
    line-height: 22px;
    font-weight: 400
}

.title-2-ios {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600
}

.title-2-android {
    font-size: 20px;
    line-height: 24px;
    font-weight: 500
}

.title {
    font-size: 32px;
    line-height: 40px;
    font-weight: 600
}

.title-windows {
    font-size: 28px;
    line-height: 36px;
    font-weight: 600
}

.title-macos {
    font-size: 22px;
    line-height: 26px;
    font-weight: 400
}

.title-ios {
    font-size: 28px;
    line-height: 34px;
    font-weight: 700
}

.title-android {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700
}

.title-large,
.title-large-windows {
    font-size: 40px;
    line-height: 52px;
    font-weight: 600
}

.title-large-macos {
    font-size: 26px;
    line-height: 32px;
    font-weight: 400
}

.title-large-ios {
    font-size: 34px;
    line-height: 41px;
    font-weight: 700
}

.title-large-android {
    font-size: 34px;
    line-height: 44px;
    font-weight: 400
}

.display,
.display-windows {
    font-size: 68px;
    line-height: 92px;
    font-weight: 600
}

.display-macos {
    font-size: 30px;
    line-height: 40px;
    font-weight: 700
}

.display-ios {
    font-size: 60px;
    line-height: 70px;
    font-weight: 700
}

.display-android {
    font-size: 60px;
    line-height: 70px;
    font-weight: 400
}

.subtitle-paragraph,
.implementation-property-description {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--colorNeutralForeground6);
    margin-bottom: 24px
}

.subtitle-paragraph.ok,
.implementation-property-description.ok {
    color: var(--colorNeutralForeground2Pro);
    font-weight: 600
}

.subtitle-paragraph.notok,
.implementation-property-description.notok {
    color: var(--colorNeutralForegroundCon);
    font-weight: 600
}

.subtitle-paragraph.no-bottom,
.implementation-property-description.no-bottom {
    margin-bottom: 0
}

.subtitle-paragraph.no-margin,
.implementation-property-description.no-margin {
    margin: 0
}

.subtitle-paragraph.gray,
.implementation-property-description.gray {
    color: var(--colorNeutralForeground3)
}

.subtitle-paragraph.gray code,
.implementation-property-description.gray code {
    color: var(--colorNeutralForeground1)
}

.subtitle-paragraph code,
.implementation-property-description code {
    font-size: 16px
}

.subtitle-paragraph+div,
.subtitle-paragraph+img,
.subtitle-paragraph+table,
.subtitle-paragraph+a,
.subtitle-paragraph+hr,
.subtitle-paragraph+h2,
.subtitle-paragraph+h3,
.subtitle-paragraph+h4,
.implementation-property-description+div,
.implementation-property-description+img,
.implementation-property-description+table,
.implementation-property-description+a,
.implementation-property-description+hr,
.implementation-property-description+h2,
.implementation-property-description+h3,
.implementation-property-description+h4 {
    padding-top: 16px
}

.card-title,
.implementation-property-title,
.implementation-property-values,
.implementation-property-default {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--colorNeutralForeground1);
    margin-bottom: 12px
}

.card-title.ok,
.implementation-property-title.ok,
.implementation-property-values.ok,
.ok.implementation-property-default {
    color: var(--colorNeutralForeground2Pro)
}

.card-title.notok,
.implementation-property-title.notok,
.implementation-property-values.notok,
.notok.implementation-property-default {
    color: var(--colorNeutralForegroundCon)
}

.card-title.gray,
.implementation-property-title.gray,
.implementation-property-values.gray,
.gray.implementation-property-default {
    color: var(--colorNeutralForeground3)
}

.implementation-property-default {
    margin-bottom: 0
}

.implementation-property-default.none {
    font-style: normal;
    font-weight: 400;
    color: var(--colorNeutralForeground3);
    font-style: italic
}

.card-body {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0
}

.card-body.large {
    font-size: 16px;
    line-height: 24px
}

.card-body.gray {
    color: var(--colorNeutralForeground3)
}

code {
    font-family: Menlo, monospace;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -.2px
}

h1:focus {
    outline: none
}

ol.subtitle-paragraph {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 15px
}

ol.subtitle-paragraph li {
    padding-left: 0
}

ol.subtitle-paragraph li::marker {
    content: "•  "
}

ol.subtitle-paragraph.list-numbers {
    list-style-type: decimal;
    counter-reset: list
}

ol.subtitle-paragraph.list-numbers li {
    counter-increment: list
}

ol.subtitle-paragraph.list-numbers li::marker {
    content: counter(list) ". "
}

ol.subtitle-paragraph.indented {
    padding-left: 40px
}

ol.subtitle-paragraph.indented--half {
    padding-left: 20px
}

ol.subtitle-paragraph.no-marker {
    list-style-type: none;
    padding-left: 0
}

ol.subtitle-paragraph.no-marker li::marker {
    content: ""
}

.content hr {
    margin: 40px 0;
    border: 0;
    border-bottom: 1px solid var(--colorNeutralStroke3)
}

.content .inline-code-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 21px
}

table tr {
    height: 53px
}

table td,
table th {
    padding-left: 12px
}

table thead {
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--colorNeutralStroke3)
}

table tbody tr:nth-child(2n) {
    background-color: var(--colorNeutralBackground14)
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px
}

.nav .logo-search-container {
    display: flex;
    align-items: center;
    gap: 10px
}

.nav .toggle-login-container {
    display: flex;
    align-items: center;
    gap: 24px
}

.links {
    flex: 1 0 auto;
    align-items: center;
    justify-content: space-between
}

.fluent1-link {
    padding: 8px 15px;
    border-radius: 18px;
    color: var(--colorNeutralForeground12);
    border: 1px solid var(--colorNeutralForeground12);
    transition: color .1s, border-color .1s;
    font-size: 12px;
    font-font-weight: 600;
    line-height: 16px
}

.fluent1-link:hover {
    color: var(--colorNeutralForeground12Hover);
    border-color: var(--colorNeutralForeground12Hover)
}

@media(min-width: 1140px) {
    .nav .logo-search-container {
        column-gap: 75px
    }
}

#fluent2-footer {
    z-index: 110
}

.footer-top,
.footer-bottom {
    justify-content: space-between;
    align-items: center
}

.footer-top {
    justify-content: space-around;
    flex-wrap: wrap;
    row-gap: 1em;
    text-align: center
}

.footer-links a:not(:focus-visible),
.footer-links .footer-link:not(:focus-visible),
.footer-links button:not(:focus-visible),
.external-links a:not(:focus-visible),
.external-links .footer-link:not(:focus-visible),
.external-links button:not(:focus-visible) {
    text-decoration: none
}

.footer-links a:hover,
.footer-links .footer-link:hover,
.footer-links button:hover,
.external-links a:hover,
.external-links .footer-link:hover,
.external-links button:hover {
    text-decoration: underline
}

.footer-links a:focus,
.footer-links .footer-link:focus,
.footer-links button:focus,
.external-links a:focus,
.external-links .footer-link:focus,
.external-links button:focus {
    text-decoration-line: underline;
    text-decoration-style: double;
    text-decoration-thickness: var(--strokeWidthThin);
    text-decoration-color: var(--colorStrokeFocus2);
    box-shadow: none;
    opacity: 1
}

.footer-links {
    align-items: center;
    column-gap: 1em;
    font-size: 12px;
    line-height: 21px
}

.footer-links a {
    padding: 4px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--colorNeutralForeground3)
}

.ext {
    column-gap: 10px
}

.sep {
    margin: 24px 0;
    border: 0;
    height: 1px;
    display: block;
    background: var(--colorStrokeFocus2);
    opacity: .1
}

.social-links {
    margin-left: -6px;
    column-gap: 4px
}

.social-links a {
    display: flex;
    align-items: center;
    padding: 6px
}

.external-links {
    column-gap: .5em;
    font-size: 12px;
    margin-top: 1em;
    text-align: center;
    justify-content: right;
    row-gap: .5em;
    flex-wrap: wrap
}

.external-links a,
.external-links li,
.external-links button {
    color: var(--colorStrokeFocus2);
    line-height: 16px
}

.external-links li:last-child {
    padding-left: 4px
}

.external-links a,
.external-links button {
    padding: 3px 4px;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--colorNeutralStrokeAccessiblePressed)
}

.external-links button {
    border: none;
    background: none
}

@media(min-width: 440px) {
    .footer-top {
        justify-content: space-between
    }

    .footer-links {
        font-weight: 600;
        font-size: 16px;
        line-height: 21px
    }

    .footer-bottom {
        display: flex;
        column-gap: .5em
    }

    .external-links {
        margin: 0
    }

    .external-links a,
    .external-links button {
        padding: 0
    }
}

@media(min-width: 834px) {

    .external-links a,
    .external-links button {
        padding: 3px 4px
    }
}

.DocSearch-Commands-Key {
    background: var(--docsearch-key-gradient-override);
    box-shadow: var(--docsearch-key-shadow-override);
    color: var(--colorNeutralForeground3)
}

.DocSearch-Container {
    background-color: var(--colorBackgroundOverlay)
}

.DocSearch-Dropdown {
    background-color: var(--colorNeutralBackground2)
}

.DocSearch-Footer {
    background-color: var(--docsearch-searchbox-focus-background)
}

.DocSearch-Help {
    color: var(--colorNeutralForeground3)
}

.DocSearch-Hit-source {
    background: var(--colorNeutralBackground2)
}

.DocSearch-Input::placeholder {
    color: var(--colorNeutralForeground3)
}

.DocSearch-Label {
    color: var(--colorNeutralForeground3)
}

.DocSearch-Modal {
    box-shadow: var(--shadow64)
}

.DocSearch-SearchBar {
    background-color: var(--colorNeutralBackground2)
}

#docsearch {
    display: flex;
    vertical-align: middle;
    align-items: center;
    gap: 10px
}

#docsearch-a11y-status-message {
    border: 0px;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.docsearch-button-container {
    border: none;
    background: none;
    display: flex;
    align-items: center;
    gap: 5px;
    padding-top: 5px;
    padding-bottom: 5px
}

.docsearch-button-container .docsearch-button {
    background-color: var(--colorNeutralBackground28);
    font-size: 10px;
    line-height: 14px;
    color: var(--colorNeutralForeground3);
    border: none;
    border-radius: 6px;
    width: 62px;
    height: 20px;
    padding: 3px 6px;
    font-weight: 600;
    display: none
}

.docsearch-button-container .docsearch-button .text-container {
    display: flex;
    gap: 6px
}

.docsearch-button-container .docsearch-button .kbd-container {
    padding: 1px 3px;
    font-size: 10px;
    line-height: 9px;
    pointer-events: none;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    border-color: #6161615e
}

.docsearch-button-container .docsearch-button-icon {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.5%200.00012207C8.53757%200.00012207%2011%202.46256%2011%205.50012C11%206.83891%2010.5217%208.06598%209.72656%209.01974L13.8536%2013.1466C14.0488%2013.3418%2014.0488%2013.6584%2013.8536%2013.8537C13.68%2014.0272%2013.4106%2014.0465%2013.2157%2013.9115L13.1464%2013.8537L9.01962%209.72668C8.06586%2010.5218%206.83879%2011.0001%205.5%2011.0001C2.46243%2011.0001%200%208.53769%200%205.50012C0%202.46256%202.46243%200.00012207%205.5%200.00012207ZM5.5%201.00012C3.01472%201.00012%201%203.01484%201%205.50012C1%207.9854%203.01472%2010.0001%205.5%2010.0001C7.98528%2010.0001%2010%207.9854%2010%205.50012C10%203.01484%207.98528%201.00012%205.5%201.00012Z'%20fill='%23616161'/%3e%3c/svg%3e");
    -webkit-mask-size: cover;
    mask-image: url("data:image/svg+xml,%3csvg%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.5%200.00012207C8.53757%200.00012207%2011%202.46256%2011%205.50012C11%206.83891%2010.5217%208.06598%209.72656%209.01974L13.8536%2013.1466C14.0488%2013.3418%2014.0488%2013.6584%2013.8536%2013.8537C13.68%2014.0272%2013.4106%2014.0465%2013.2157%2013.9115L13.1464%2013.8537L9.01962%209.72668C8.06586%2010.5218%206.83879%2011.0001%205.5%2011.0001C2.46243%2011.0001%200%208.53769%200%205.50012C0%202.46256%202.46243%200.00012207%205.5%200.00012207ZM5.5%201.00012C3.01472%201.00012%201%203.01484%201%205.50012C1%207.9854%203.01472%2010.0001%205.5%2010.0001C7.98528%2010.0001%2010%207.9854%2010%205.50012C10%203.01484%207.98528%201.00012%205.5%201.00012Z'%20fill='%23616161'/%3e%3c/svg%3e");
    mask-size: cover;
    background-color: var(--colorNeutralForeground12);
    transition: background-color .1s
}

.docsearch-button-container:hover .docsearch-button-icon {
    background-color: var(--colorNeutralForeground12Hover)
}

@media(min-width: 1140px) {
    .docsearch-button-container .docsearch-button {
        display: block
    }
}

:root,
[data-theme=light] {
    --astro-code-color-text: #000000;
    --astro-code-color-background: #ffffff;
    --astro-code-token-constant: #896e39;
    --astro-code-token-keyword: #527588;
    --astro-code-token-function: #527588;
    --astro-code-token-string-expression: #8069bc;
    --astro-code-token-punctuation: #000000
}

.table-of-contents {
    padding-left: 8px;
    position: sticky;
    top: 94px
}

.table-of-contents .title {
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: -.01em;
    display: block;
    margin: 0 0 10px 8px;
    color: var(--colorNeutralForeground2)
}

.table-of-contents .list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    row-gap: 8px
}

.table-of-contents a {
    border-radius: 8px;
    padding: 6px 8px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    color: var(--colorNeutralForeground2);
    position: relative
}

.table-of-contents a:hover:before {
    background-color: var(--colorTocHover);
    transform: translateY(-50%) scale(1)
}

.table-of-contents .libraryIcons {
    padding-left: 8px;
    display: inline-flex;
    gap: 10px;
    margin: 0 0 9px
}

.table-of-contents .libraryIcons .libraryIcon img {
    height: 21px
}

.toc--dynamic a:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0);
    left: -7px;
    width: 3px;
    border-radius: 1.5px;
    height: 130%;
    content: "";
    transition: all .4s ease;
    z-index: -2
}

.toc--dynamic a.active {
    color: var(--colorNeutralForeground1);
    font-weight: 600;
    letter-spacing: -.2px
}

.toc--dynamic .toc-marker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

.toc--dynamic .toc-marker path {
    transition: all .2s ease
}

.link-tabs ul.tablist,
.tabs ul.tablist {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    column-gap: 16px
}

.link-tabs li.tab,
.tabs li.tab {
    margin: 0;
    padding: 0;
    position: relative
}

.link-tabs li.tab .tab-button,
.tabs li.tab .tab-button {
    text-decoration: none;
    color: var(--colorNeutralForeground2);
    margin: 0 0 -3px;
    border: 0;
    background: none;
    font-style: normal;
    font-size: 14px;
    line-height: 20px;
    padding: 4px 4px 14px
}

.link-tabs li.tab .tab-button:before,
.tabs li.tab .tab-button:before {
    display: block;
    content: attr(title);
    width: 100%;
    font-weight: 600;
    height: 0;
    overflow: hidden;
    visibility: hidden
}

.link-tabs li.tab .tab-button:after,
.tabs li.tab .tab-button:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    height: 3px;
    border-radius: 1.5px;
    width: 90%;
    content: ""
}

.link-tabs li.tab .tab-button[aria-selected=true],
.link-tabs li.tab .tab-button.selected,
.tabs li.tab .tab-button[aria-selected=true],
.tabs li.tab .tab-button.selected {
    font-weight: 600;
    color: var(--colorNeutralForeground1)
}

.link-tabs li.tab .tab-button[aria-selected=true]:after,
.link-tabs li.tab .tab-button.selected:after,
.tabs li.tab .tab-button[aria-selected=true]:after,
.tabs li.tab .tab-button.selected:after {
    background-color: var(--colorNeutralForeground3LinkPressed);
    outline: 2px solid transparent
}

.link-tabs li.tab .tab-button[aria-selected=true]:hover,
.link-tabs li.tab .tab-button.selected:hover,
.tabs li.tab .tab-button[aria-selected=true]:hover,
.tabs li.tab .tab-button.selected:hover {
    text-decoration: none
}

.link-tabs li.tab .tab-button[aria-selected=true]:hover:after,
.link-tabs li.tab .tab-button.selected:hover:after,
.tabs li.tab .tab-button[aria-selected=true]:hover:after,
.tabs li.tab .tab-button.selected:hover:after {
    background-color: var(--colorNeutralForeground3LinkPressed);
    outline: 2px solid transparent
}

.link-tabs li.tab .tab-button:hover,
.tabs li.tab .tab-button:hover {
    text-decoration: none
}

.link-tabs li.tab .tab-button:hover:after,
.tabs li.tab .tab-button:hover:after {
    background-color: var(--colorNeutralStroke1)
}

.link-tabs .tab-content .tab-panel,
.tabs .tab-content .tab-panel {
    display: none
}

.link-tabs .tab-content .tab-panel.active,
.tabs .tab-content .tab-panel.active {
    display: block
}

[data-theme=light],
:root {
    --borderRadiusNone: 0;
    --borderRadiusSmall: 2px;
    --borderRadiusMedium: 4px;
    --borderRadiusLarge: 6px;
    --borderRadiusXLarge: 8px;
    --borderRadiusCircular: 10000px;
    --fontSizeBase100: 10px;
    --fontSizeBase200: 12px;
    --fontSizeBase300: 14px;
    --fontSizeBase400: 16px;
    --fontSizeBase500: 20px;
    --fontSizeBase600: 24px;
    --fontSizeHero700: 28px;
    --fontSizeHero800: 32px;
    --fontSizeHero900: 40px;
    --fontSizeHero1000: 68px;
    --lineHeightBase100: 14px;
    --lineHeightBase200: 16px;
    --lineHeightBase300: 20px;
    --lineHeightBase400: 22px;
    --lineHeightBase500: 28px;
    --lineHeightBase600: 32px;
    --lineHeightHero700: 36px;
    --lineHeightHero800: 40px;
    --lineHeightHero900: 52px;
    --lineHeightHero1000: 92px;
    --fontFamilyBase: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    --fontFamilyMonospace: Consolas, "Courier New", Courier, monospace;
    --fontFamilyNumeric: Bahnschrift, "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    --fontWeightRegular: 400;
    --fontWeightMedium: 500;
    --fontWeightSemibold: 600;
    --fontWeightBold: 700;
    --strokeWidthThin: 1px;
    --strokeWidthThick: 2px;
    --strokeWidthThicker: 3px;
    --strokeWidthThickest: 4px;
    --spacingHorizontalNone: 0;
    --spacingHorizontalXXS: 2px;
    --spacingHorizontalXS: 4px;
    --spacingHorizontalSNudge: 6px;
    --spacingHorizontalS: 8px;
    --spacingHorizontalMNudge: 10px;
    --spacingHorizontalM: 12px;
    --spacingHorizontalL: 16px;
    --spacingHorizontalXL: 20px;
    --spacingHorizontalXXL: 24px;
    --spacingHorizontalXXXL: 32px;
    --spacingVerticalNone: 0;
    --spacingVerticalXXS: 2px;
    --spacingVerticalXS: 4px;
    --spacingVerticalSNudge: 6px;
    --spacingVerticalS: 8px;
    --spacingVerticalMNudge: 10px;
    --spacingVerticalM: 12px;
    --spacingVerticalL: 16px;
    --spacingVerticalXL: 20px;
    --spacingVerticalXXL: 24px;
    --spacingVerticalXXXL: 32px;
    --durationUltraFast: 50ms;
    --durationFaster: .1s;
    --durationFast: .15s;
    --durationNormal: .2s;
    --durationGentle: .25s;
    --durationSlow: .3s;
    --durationSlower: .4s;
    --durationUltraSlow: .5s;
    --curveAccelerateMax: cubic-bezier(.9, .1, 1, .2);
    --curveAccelerateMid: cubic-bezier(1, 0, 1, 1);
    --curveAccelerateMin: cubic-bezier(.8, 0, .78, 1);
    --curveDecelerateMax: cubic-bezier(.1, .9, .2, 1);
    --curveDecelerateMid: cubic-bezier(0, 0, 0, 1);
    --curveDecelerateMin: cubic-bezier(.33, 0, .1, 1);
    --curveEasyEaseMax: cubic-bezier(.8, 0, .2, 1);
    --curveEasyEase: cubic-bezier(.33, 0, .67, 1);
    --curveLinear: cubic-bezier(0, 0, 1, 1);
    --colorNeutralForeground1: #242424;
    --colorNeutralForeground1Hover: #242424;
    --colorNeutralForeground1Pressed: #242424;
    --colorNeutralForeground1Selected: #242424;
    --colorNeutralForeground2: #424242;
    --colorNeutralForeground2Hover: #242424;
    --colorNeutralForeground2Pressed: #242424;
    --colorNeutralForeground2Selected: #242424;
    --colorNeutralForeground2BrandHover: #0f6cbd;
    --colorNeutralForeground2BrandPressed: #115ea3;
    --colorNeutralForeground2BrandSelected: #0f6cbd;
    --colorNeutralForeground3: #616161;
    --colorNeutralForeground3Hover: #424242;
    --colorNeutralForeground3Pressed: #424242;
    --colorNeutralForeground3Selected: #424242;
    --colorNeutralForeground3BrandHover: #0f6cbd;
    --colorNeutralForeground3BrandPressed: #115ea3;
    --colorNeutralForeground3BrandSelected: #0f6cbd;
    --colorNeutralForeground4: #707070;
    --colorNeutralForegroundDisabled: #bdbdbd;
    --colorNeutralForegroundInvertedDisabled: rgba(255, 255, 255, .4);
    --colorBrandForegroundLink: #115ea3;
    --colorBrandForegroundLinkHover: #0f548c;
    --colorBrandForegroundLinkPressed: #0c3b5e;
    --colorBrandForegroundLinkSelected: #115ea3;
    --colorNeutralForeground2Link: #424242;
    --colorNeutralForeground2LinkHover: #242424;
    --colorNeutralForeground2LinkPressed: #242424;
    --colorNeutralForeground2LinkSelected: #242424;
    --colorCompoundBrandForeground1: #0f6cbd;
    --colorCompoundBrandForeground1Hover: #115ea3;
    --colorCompoundBrandForeground1Pressed: #0f548c;
    --colorBrandForeground1: #0f6cbd;
    --colorBrandForeground2: #115ea3;
    --colorBrandForeground2Hover: #0f548c;
    --colorBrandForeground2Pressed: #0a2e4a;
    --colorNeutralForeground1Static: #242424;
    --colorNeutralForegroundStaticInverted: #ffffff;
    --colorNeutralForegroundInverted: #ffffff;
    --colorNeutralForegroundInvertedHover: #ffffff;
    --colorNeutralForegroundInvertedPressed: #ffffff;
    --colorNeutralForegroundInvertedSelected: #ffffff;
    --colorNeutralForegroundInverted2: #ffffff;
    --colorNeutralForegroundOnBrand: #ffffff;
    --colorNeutralForegroundInvertedLink: #ffffff;
    --colorNeutralForegroundInvertedLinkHover: #ffffff;
    --colorNeutralForegroundInvertedLinkPressed: #ffffff;
    --colorNeutralForegroundInvertedLinkSelected: #ffffff;
    --colorBrandForegroundInverted: #479ef5;
    --colorBrandForegroundInvertedHover: #62abf5;
    --colorBrandForegroundInvertedPressed: #479ef5;
    --colorBrandForegroundOnLight: #0f6cbd;
    --colorBrandForegroundOnLightHover: #115ea3;
    --colorBrandForegroundOnLightPressed: #0e4775;
    --colorBrandForegroundOnLightSelected: #0f548c;
    --colorNeutralBackground1: #ffffff;
    --colorNeutralBackground1Hover: #f5f5f5;
    --colorNeutralBackground1Pressed: #e0e0e0;
    --colorNeutralBackground1Selected: #ebebeb;
    --colorNeutralBackground2: #fafafa;
    --colorNeutralBackground2Hover: #f0f0f0;
    --colorNeutralBackground2Pressed: #dbdbdb;
    --colorNeutralBackground2Selected: #e6e6e6;
    --colorNeutralBackground3: #f5f5f5;
    --colorNeutralBackground3Hover: #ebebeb;
    --colorNeutralBackground3Pressed: #d6d6d6;
    --colorNeutralBackground3Selected: #e0e0e0;
    --colorNeutralBackground4: #f0f0f0;
    --colorNeutralBackground4Hover: #fafafa;
    --colorNeutralBackground4Pressed: #f5f5f5;
    --colorNeutralBackground4Selected: #ffffff;
    --colorNeutralBackground5: #ebebeb;
    --colorNeutralBackground5Hover: #f5f5f5;
    --colorNeutralBackground5Pressed: #f0f0f0;
    --colorNeutralBackground5Selected: #fafafa;
    --colorNeutralBackground6: #e6e6e6;
    --colorNeutralBackgroundInverted: #292929;
    --colorNeutralBackgroundStatic: #333333;
    --colorNeutralBackgroundAlpha: rgba(255, 255, 255, .5);
    --colorNeutralBackgroundAlpha2: rgba(255, 255, 255, .8);
    --colorSubtleBackground: transparent;
    --colorSubtleBackgroundHover: #f5f5f5;
    --colorSubtleBackgroundPressed: #e0e0e0;
    --colorSubtleBackgroundSelected: #ebebeb;
    --colorSubtleBackgroundLightAlphaHover: rgba(255, 255, 255, .7);
    --colorSubtleBackgroundLightAlphaPressed: rgba(255, 255, 255, .5);
    --colorSubtleBackgroundLightAlphaSelected: transparent;
    --colorSubtleBackgroundInverted: transparent;
    --colorSubtleBackgroundInvertedHover: rgba(0, 0, 0, .1);
    --colorSubtleBackgroundInvertedPressed: rgba(0, 0, 0, .3);
    --colorSubtleBackgroundInvertedSelected: rgba(0, 0, 0, .2);
    --colorTransparentBackground: transparent;
    --colorTransparentBackgroundHover: transparent;
    --colorTransparentBackgroundPressed: transparent;
    --colorTransparentBackgroundSelected: transparent;
    --colorNeutralBackgroundDisabled: #f0f0f0;
    --colorNeutralBackgroundInvertedDisabled: rgba(255, 255, 255, .1);
    --colorNeutralStencil1: #e6e6e6;
    --colorNeutralStencil2: #fafafa;
    --colorNeutralStencil1Alpha: rgba(0, 0, 0, .1);
    --colorNeutralStencil2Alpha: rgba(0, 0, 0, .05);
    --colorBackgroundOverlay: rgba(0, 0, 0, .4);
    --colorScrollbarOverlay: rgba(0, 0, 0, .5);
    --colorBrandBackground: #0f6cbd;
    --colorBrandBackgroundHover: #115ea3;
    --colorBrandBackgroundPressed: #0c3b5e;
    --colorBrandBackgroundSelected: #0f548c;
    --colorCompoundBrandBackground: #0f6cbd;
    --colorCompoundBrandBackgroundHover: #115ea3;
    --colorCompoundBrandBackgroundPressed: #0f548c;
    --colorBrandBackgroundStatic: #0f6cbd;
    --colorBrandBackground2: #ebf3fc;
    --colorBrandBackground2Hover: #cfe4fa;
    --colorBrandBackground2Pressed: #96c6fa;
    --colorBrandBackground3Static: #0f548c;
    --colorBrandBackground4Static: #0c3b5e;
    --colorBrandBackgroundInverted: #ffffff;
    --colorBrandBackgroundInvertedHover: #ebf3fc;
    --colorBrandBackgroundInvertedPressed: #b4d6fa;
    --colorBrandBackgroundInvertedSelected: #cfe4fa;
    --colorNeutralCardBackground: #fafafa;
    --colorNeutralCardBackgroundHover: #ffffff;
    --colorNeutralCardBackgroundPressed: #f5f5f5;
    --colorNeutralCardBackgroundSelected: #ebebeb;
    --colorNeutralCardBackgroundDisabled: #f0f0f0;
    --colorNeutralStrokeAccessible: #616161;
    --colorNeutralStrokeAccessibleHover: #575757;
    --colorNeutralStrokeAccessiblePressed: #4d4d4d;
    --colorNeutralStrokeAccessibleSelected: #0f6cbd;
    --colorNeutralStroke1: #d1d1d1;
    --colorNeutralStroke1Hover: #c7c7c7;
    --colorNeutralStroke1Pressed: #b3b3b3;
    --colorNeutralStroke1Selected: #bdbdbd;
    --colorNeutralStroke2: #e0e0e0;
    --colorNeutralStroke3: #f0f0f0;
    --colorNeutralStrokeSubtle: #e0e0e0;
    --colorNeutralStrokeOnBrand: #ffffff;
    --colorNeutralStrokeOnBrand2: #ffffff;
    --colorNeutralStrokeOnBrand2Hover: #ffffff;
    --colorNeutralStrokeOnBrand2Pressed: #ffffff;
    --colorNeutralStrokeOnBrand2Selected: #ffffff;
    --colorBrandStroke1: #0f6cbd;
    --colorBrandStroke2: #b4d6fa;
    --colorBrandStroke2Hover: #77b7f7;
    --colorBrandStroke2Pressed: #0f6cbd;
    --colorBrandStroke2Contrast: #b4d6fa;
    --colorCompoundBrandStroke: #0f6cbd;
    --colorCompoundBrandStrokeHover: #115ea3;
    --colorCompoundBrandStrokePressed: #0f548c;
    --colorNeutralStrokeDisabled: #e0e0e0;
    --colorNeutralStrokeInvertedDisabled: rgba(255, 255, 255, .4);
    --colorTransparentStroke: transparent;
    --colorTransparentStrokeInteractive: transparent;
    --colorTransparentStrokeDisabled: transparent;
    --colorNeutralStrokeAlpha: rgba(0, 0, 0, .05);
    --colorNeutralStrokeAlpha2: rgba(255, 255, 255, .2);
    --colorStrokeFocus1: #ffffff;
    --colorStrokeFocus2: #000000;
    --colorNeutralShadowAmbient: rgba(0, 0, 0, .12);
    --colorNeutralShadowKey: rgba(0, 0, 0, .14);
    --colorNeutralShadowAmbientLighter: rgba(0, 0, 0, .06);
    --colorNeutralShadowKeyLighter: rgba(0, 0, 0, .07);
    --colorNeutralShadowAmbientDarker: rgba(0, 0, 0, .2);
    --colorNeutralShadowKeyDarker: rgba(0, 0, 0, .24);
    --colorBrandShadowAmbient: rgba(0, 0, 0, .3);
    --colorBrandShadowKey: rgba(0, 0, 0, .25);
    --colorPaletteRedBackground1: #fdf6f6;
    --colorPaletteRedBackground2: #f1bbbc;
    --colorPaletteRedBackground3: #d13438;
    --colorPaletteRedForeground1: #bc2f32;
    --colorPaletteRedForeground2: #751d1f;
    --colorPaletteRedForeground3: #d13438;
    --colorPaletteRedBorderActive: #d13438;
    --colorPaletteRedBorder1: #f1bbbc;
    --colorPaletteRedBorder2: #d13438;
    --colorPaletteGreenBackground1: #f1faf1;
    --colorPaletteGreenBackground2: #9fd89f;
    --colorPaletteGreenBackground3: #107c10;
    --colorPaletteGreenForeground1: #0e700e;
    --colorPaletteGreenForeground2: #094509;
    --colorPaletteGreenForeground3: #107c10;
    --colorPaletteGreenBorderActive: #107c10;
    --colorPaletteGreenBorder1: #9fd89f;
    --colorPaletteGreenBorder2: #107c10;
    --colorPaletteDarkOrangeBackground1: #fdf6f3;
    --colorPaletteDarkOrangeBackground2: #f4bfab;
    --colorPaletteDarkOrangeBackground3: #da3b01;
    --colorPaletteDarkOrangeForeground1: #c43501;
    --colorPaletteDarkOrangeForeground2: #7a2101;
    --colorPaletteDarkOrangeForeground3: #da3b01;
    --colorPaletteDarkOrangeBorderActive: #da3b01;
    --colorPaletteDarkOrangeBorder1: #f4bfab;
    --colorPaletteDarkOrangeBorder2: #da3b01;
    --colorPaletteYellowBackground1: #fffef5;
    --colorPaletteYellowBackground2: #fef7b2;
    --colorPaletteYellowBackground3: #fde300;
    --colorPaletteYellowForeground1: #817400;
    --colorPaletteYellowForeground2: #817400;
    --colorPaletteYellowForeground3: #fde300;
    --colorPaletteYellowBorderActive: #fde300;
    --colorPaletteYellowBorder1: #fef7b2;
    --colorPaletteYellowBorder2: #fde300;
    --colorPaletteBerryBackground1: #fdf5fc;
    --colorPaletteBerryBackground2: #edbbe7;
    --colorPaletteBerryBackground3: #c239b3;
    --colorPaletteBerryForeground1: #af33a1;
    --colorPaletteBerryForeground2: #6d2064;
    --colorPaletteBerryForeground3: #c239b3;
    --colorPaletteBerryBorderActive: #c239b3;
    --colorPaletteBerryBorder1: #edbbe7;
    --colorPaletteBerryBorder2: #c239b3;
    --colorPaletteLightGreenBackground1: #f2fbf2;
    --colorPaletteLightGreenBackground2: #a7e3a5;
    --colorPaletteLightGreenBackground3: #13a10e;
    --colorPaletteLightGreenForeground1: #11910d;
    --colorPaletteLightGreenForeground2: #0b5a08;
    --colorPaletteLightGreenForeground3: #13a10e;
    --colorPaletteLightGreenBorderActive: #13a10e;
    --colorPaletteLightGreenBorder1: #a7e3a5;
    --colorPaletteLightGreenBorder2: #13a10e;
    --colorPaletteMarigoldBackground1: #fefbf4;
    --colorPaletteMarigoldBackground2: #f9e2ae;
    --colorPaletteMarigoldBackground3: #eaa300;
    --colorPaletteMarigoldForeground1: #d39300;
    --colorPaletteMarigoldForeground2: #835b00;
    --colorPaletteMarigoldForeground3: #eaa300;
    --colorPaletteMarigoldBorderActive: #eaa300;
    --colorPaletteMarigoldBorder1: #f9e2ae;
    --colorPaletteMarigoldBorder2: #eaa300;
    --colorPaletteRedForegroundInverted: #dc5e62;
    --colorPaletteGreenForegroundInverted: #359b35;
    --colorPaletteYellowForegroundInverted: #fef7b2;
    --colorPaletteDarkRedBackground2: #d69ca5;
    --colorPaletteDarkRedForeground2: #420610;
    --colorPaletteDarkRedBorderActive: #750b1c;
    --colorPaletteCranberryBackground2: #eeacb2;
    --colorPaletteCranberryForeground2: #6e0811;
    --colorPaletteCranberryBorderActive: #c50f1f;
    --colorPalettePumpkinBackground2: #efc4ad;
    --colorPalettePumpkinForeground2: #712d09;
    --colorPalettePumpkinBorderActive: #ca5010;
    --colorPalettePeachBackground2: #ffddb3;
    --colorPalettePeachForeground2: #8f4e00;
    --colorPalettePeachBorderActive: #ff8c00;
    --colorPaletteGoldBackground2: #ecdfa5;
    --colorPaletteGoldForeground2: #6c5700;
    --colorPaletteGoldBorderActive: #c19c00;
    --colorPaletteBrassBackground2: #e0cea2;
    --colorPaletteBrassForeground2: #553e06;
    --colorPaletteBrassBorderActive: #986f0b;
    --colorPaletteBrownBackground2: #ddc3b0;
    --colorPaletteBrownForeground2: #50301a;
    --colorPaletteBrownBorderActive: #8e562e;
    --colorPaletteForestBackground2: #bdd99b;
    --colorPaletteForestForeground2: #294903;
    --colorPaletteForestBorderActive: #498205;
    --colorPaletteSeafoamBackground2: #a8f0cd;
    --colorPaletteSeafoamForeground2: #00723b;
    --colorPaletteSeafoamBorderActive: #00cc6a;
    --colorPaletteDarkGreenBackground2: #9ad29a;
    --colorPaletteDarkGreenForeground2: #063b06;
    --colorPaletteDarkGreenBorderActive: #0b6a0b;
    --colorPaletteLightTealBackground2: #a6e9ed;
    --colorPaletteLightTealForeground2: #00666d;
    --colorPaletteLightTealBorderActive: #00b7c3;
    --colorPaletteTealBackground2: #9bd9db;
    --colorPaletteTealForeground2: #02494c;
    --colorPaletteTealBorderActive: #038387;
    --colorPaletteSteelBackground2: #94c8d4;
    --colorPaletteSteelForeground2: #00333f;
    --colorPaletteSteelBorderActive: #005b70;
    --colorPaletteBlueBackground2: #a9d3f2;
    --colorPaletteBlueForeground2: #004377;
    --colorPaletteBlueBorderActive: #0078d4;
    --colorPaletteRoyalBlueBackground2: #9abfdc;
    --colorPaletteRoyalBlueForeground2: #002c4e;
    --colorPaletteRoyalBlueBorderActive: #004e8c;
    --colorPaletteCornflowerBackground2: #c8d1fa;
    --colorPaletteCornflowerForeground2: #2c3c85;
    --colorPaletteCornflowerBorderActive: #4f6bed;
    --colorPaletteNavyBackground2: #a3b2e8;
    --colorPaletteNavyForeground2: #001665;
    --colorPaletteNavyBorderActive: #0027b4;
    --colorPaletteLavenderBackground2: #d2ccf8;
    --colorPaletteLavenderForeground2: #3f3682;
    --colorPaletteLavenderBorderActive: #7160e8;
    --colorPalettePurpleBackground2: #c6b1de;
    --colorPalettePurpleForeground2: #341a51;
    --colorPalettePurpleBorderActive: #5c2e91;
    --colorPaletteGrapeBackground2: #d9a7e0;
    --colorPaletteGrapeForeground2: #4c0d55;
    --colorPaletteGrapeBorderActive: #881798;
    --colorPaletteLilacBackground2: #e6bfed;
    --colorPaletteLilacForeground2: #63276d;
    --colorPaletteLilacBorderActive: #b146c2;
    --colorPalettePinkBackground2: #f7c0e3;
    --colorPalettePinkForeground2: #80215d;
    --colorPalettePinkBorderActive: #e43ba6;
    --colorPaletteMagentaBackground2: #eca5d1;
    --colorPaletteMagentaForeground2: #6b0043;
    --colorPaletteMagentaBorderActive: #bf0077;
    --colorPalettePlumBackground2: #d696c0;
    --colorPalettePlumForeground2: #43002b;
    --colorPalettePlumBorderActive: #77004d;
    --colorPaletteBeigeBackground2: #d7d4d4;
    --colorPaletteBeigeForeground2: #444241;
    --colorPaletteBeigeBorderActive: #7a7574;
    --colorPaletteMinkBackground2: #cecccb;
    --colorPaletteMinkForeground2: #343231;
    --colorPaletteMinkBorderActive: #5d5a58;
    --colorPalettePlatinumBackground2: #cdd6d8;
    --colorPalettePlatinumForeground2: #3b4447;
    --colorPalettePlatinumBorderActive: #69797e;
    --colorPaletteAnchorBackground2: #bcc3c7;
    --colorPaletteAnchorForeground2: #202427;
    --colorPaletteAnchorBorderActive: #394146;
    --colorStatusSuccessBackground1: #f1faf1;
    --colorStatusSuccessBackground2: #9fd89f;
    --colorStatusSuccessBackground3: #107c10;
    --colorStatusSuccessForeground1: #0e700e;
    --colorStatusSuccessForeground2: #094509;
    --colorStatusSuccessForeground3: #107c10;
    --colorStatusSuccessForegroundInverted: #54b054;
    --colorStatusSuccessBorderActive: #107c10;
    --colorStatusSuccessBorder1: #9fd89f;
    --colorStatusSuccessBorder2: #107c10;
    --colorStatusWarningBackground1: #fff9f5;
    --colorStatusWarningBackground2: #fdcfb4;
    --colorStatusWarningBackground3: #f7630c;
    --colorStatusWarningForeground1: #bc4b09;
    --colorStatusWarningForeground2: #8a3707;
    --colorStatusWarningForeground3: #bc4b09;
    --colorStatusWarningForegroundInverted: #faa06b;
    --colorStatusWarningBorderActive: #f7630c;
    --colorStatusWarningBorder1: #fdcfb4;
    --colorStatusWarningBorder2: #bc4b09;
    --colorStatusDangerBackground1: #fdf3f4;
    --colorStatusDangerBackground2: #eeacb2;
    --colorStatusDangerBackground3: #c50f1f;
    --colorStatusDangerForeground1: #b10e1c;
    --colorStatusDangerForeground2: #6e0811;
    --colorStatusDangerForeground3: #c50f1f;
    --colorStatusDangerForegroundInverted: #dc626d;
    --colorStatusDangerBorderActive: #c50f1f;
    --colorStatusDangerBorder1: #eeacb2;
    --colorStatusDangerBorder2: #c50f1f;
    --colorStatusDangerBackground3Hover: #b10e1c;
    --colorStatusDangerBackground3Pressed: #960b18;
    --shadow2: 0 0 2px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .14);
    --shadow4: 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .14);
    --shadow8: 0 0 2px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .14);
    --shadow16: 0 0 2px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .14);
    --shadow28: 0 0 8px rgba(0, 0, 0, .12), 0 14px 28px rgba(0, 0, 0, .14);
    --shadow64: 0 0 8px rgba(0, 0, 0, .12), 0 32px 64px rgba(0, 0, 0, .14);
    --shadow2Brand: 0 0 2px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .25);
    --shadow4Brand: 0 0 2px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .25);
    --shadow8Brand: 0 0 2px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .25);
    --shadow16Brand: 0 0 2px rgba(0, 0, 0, .3), 0 8px 16px rgba(0, 0, 0, .25);
    --shadow28Brand: 0 0 8px rgba(0, 0, 0, .3), 0 14px 28px rgba(0, 0, 0, .25);
    --shadow64Brand: 0 0 8px rgba(0, 0, 0, .3), 0 32px 64px rgba(0, 0, 0, .25)
}

[data-theme=dark] {
    --borderRadiusNone: 0;
    --borderRadiusSmall: 2px;
    --borderRadiusMedium: 4px;
    --borderRadiusLarge: 6px;
    --borderRadiusXLarge: 8px;
    --borderRadiusCircular: 10000px;
    --fontSizeBase100: 10px;
    --fontSizeBase200: 12px;
    --fontSizeBase300: 14px;
    --fontSizeBase400: 16px;
    --fontSizeBase500: 20px;
    --fontSizeBase600: 24px;
    --fontSizeHero700: 28px;
    --fontSizeHero800: 32px;
    --fontSizeHero900: 40px;
    --fontSizeHero1000: 68px;
    --lineHeightBase100: 14px;
    --lineHeightBase200: 16px;
    --lineHeightBase300: 20px;
    --lineHeightBase400: 22px;
    --lineHeightBase500: 28px;
    --lineHeightBase600: 32px;
    --lineHeightHero700: 36px;
    --lineHeightHero800: 40px;
    --lineHeightHero900: 52px;
    --lineHeightHero1000: 92px;
    --fontFamilyBase: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    --fontFamilyMonospace: Consolas, "Courier New", Courier, monospace;
    --fontFamilyNumeric: Bahnschrift, "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    --fontWeightRegular: 400;
    --fontWeightMedium: 500;
    --fontWeightSemibold: 600;
    --fontWeightBold: 700;
    --strokeWidthThin: 1px;
    --strokeWidthThick: 2px;
    --strokeWidthThicker: 3px;
    --strokeWidthThickest: 4px;
    --spacingHorizontalNone: 0;
    --spacingHorizontalXXS: 2px;
    --spacingHorizontalXS: 4px;
    --spacingHorizontalSNudge: 6px;
    --spacingHorizontalS: 8px;
    --spacingHorizontalMNudge: 10px;
    --spacingHorizontalM: 12px;
    --spacingHorizontalL: 16px;
    --spacingHorizontalXL: 20px;
    --spacingHorizontalXXL: 24px;
    --spacingHorizontalXXXL: 32px;
    --spacingVerticalNone: 0;
    --spacingVerticalXXS: 2px;
    --spacingVerticalXS: 4px;
    --spacingVerticalSNudge: 6px;
    --spacingVerticalS: 8px;
    --spacingVerticalMNudge: 10px;
    --spacingVerticalM: 12px;
    --spacingVerticalL: 16px;
    --spacingVerticalXL: 20px;
    --spacingVerticalXXL: 24px;
    --spacingVerticalXXXL: 32px;
    --durationUltraFast: 50ms;
    --durationFaster: .1s;
    --durationFast: .15s;
    --durationNormal: .2s;
    --durationGentle: .25s;
    --durationSlow: .3s;
    --durationSlower: .4s;
    --durationUltraSlow: .5s;
    --curveAccelerateMax: cubic-bezier(.9, .1, 1, .2);
    --curveAccelerateMid: cubic-bezier(1, 0, 1, 1);
    --curveAccelerateMin: cubic-bezier(.8, 0, .78, 1);
    --curveDecelerateMax: cubic-bezier(.1, .9, .2, 1);
    --curveDecelerateMid: cubic-bezier(0, 0, 0, 1);
    --curveDecelerateMin: cubic-bezier(.33, 0, .1, 1);
    --curveEasyEaseMax: cubic-bezier(.8, 0, .2, 1);
    --curveEasyEase: cubic-bezier(.33, 0, .67, 1);
    --curveLinear: cubic-bezier(0, 0, 1, 1);
    --colorNeutralForeground1: #ffffff;
    --colorNeutralForeground1Hover: #ffffff;
    --colorNeutralForeground1Pressed: #ffffff;
    --colorNeutralForeground1Selected: #ffffff;
    --colorNeutralForeground2: #d6d6d6;
    --colorNeutralForeground2Hover: #ffffff;
    --colorNeutralForeground2Pressed: #ffffff;
    --colorNeutralForeground2Selected: #ffffff;
    --colorNeutralForeground2BrandHover: #479ef5;
    --colorNeutralForeground2BrandPressed: #2886de;
    --colorNeutralForeground2BrandSelected: #479ef5;
    --colorNeutralForeground3: #adadad;
    --colorNeutralForeground3Hover: #d6d6d6;
    --colorNeutralForeground3Pressed: #d6d6d6;
    --colorNeutralForeground3Selected: #d6d6d6;
    --colorNeutralForeground3BrandHover: #479ef5;
    --colorNeutralForeground3BrandPressed: #2886de;
    --colorNeutralForeground3BrandSelected: #479ef5;
    --colorNeutralForeground4: #999999;
    --colorNeutralForegroundDisabled: #5c5c5c;
    --colorNeutralForegroundInvertedDisabled: rgba(255, 255, 255, .4);
    --colorBrandForegroundLink: #479ef5;
    --colorBrandForegroundLinkHover: #62abf5;
    --colorBrandForegroundLinkPressed: #2886de;
    --colorBrandForegroundLinkSelected: #479ef5;
    --colorNeutralForeground2Link: #d6d6d6;
    --colorNeutralForeground2LinkHover: #ffffff;
    --colorNeutralForeground2LinkPressed: #ffffff;
    --colorNeutralForeground2LinkSelected: #ffffff;
    --colorCompoundBrandForeground1: #479ef5;
    --colorCompoundBrandForeground1Hover: #62abf5;
    --colorCompoundBrandForeground1Pressed: #2886de;
    --colorBrandForeground1: #479ef5;
    --colorBrandForeground2: #62abf5;
    --colorBrandForeground2Hover: #96c6fa;
    --colorBrandForeground2Pressed: #ebf3fc;
    --colorNeutralForeground1Static: #242424;
    --colorNeutralForegroundStaticInverted: #ffffff;
    --colorNeutralForegroundInverted: #242424;
    --colorNeutralForegroundInvertedHover: #242424;
    --colorNeutralForegroundInvertedPressed: #242424;
    --colorNeutralForegroundInvertedSelected: #242424;
    --colorNeutralForegroundInverted2: #242424;
    --colorNeutralForegroundOnBrand: #ffffff;
    --colorNeutralForegroundInvertedLink: #ffffff;
    --colorNeutralForegroundInvertedLinkHover: #ffffff;
    --colorNeutralForegroundInvertedLinkPressed: #ffffff;
    --colorNeutralForegroundInvertedLinkSelected: #ffffff;
    --colorBrandForegroundInverted: #0f6cbd;
    --colorBrandForegroundInvertedHover: #115ea3;
    --colorBrandForegroundInvertedPressed: #0f548c;
    --colorBrandForegroundOnLight: #0f6cbd;
    --colorBrandForegroundOnLightHover: #115ea3;
    --colorBrandForegroundOnLightPressed: #0e4775;
    --colorBrandForegroundOnLightSelected: #0f548c;
    --colorNeutralBackground1: #292929;
    --colorNeutralBackground1Hover: #3d3d3d;
    --colorNeutralBackground1Pressed: #1f1f1f;
    --colorNeutralBackground1Selected: #383838;
    --colorNeutralBackground2: #1f1f1f;
    --colorNeutralBackground2Hover: #333333;
    --colorNeutralBackground2Pressed: #141414;
    --colorNeutralBackground2Selected: #2e2e2e;
    --colorNeutralBackground3: #141414;
    --colorNeutralBackground3Hover: #292929;
    --colorNeutralBackground3Pressed: #0a0a0a;
    --colorNeutralBackground3Selected: #242424;
    --colorNeutralBackground4: #0a0a0a;
    --colorNeutralBackground4Hover: #1f1f1f;
    --colorNeutralBackground4Pressed: #000000;
    --colorNeutralBackground4Selected: #1a1a1a;
    --colorNeutralBackground5: #000000;
    --colorNeutralBackground5Hover: #141414;
    --colorNeutralBackground5Pressed: #050505;
    --colorNeutralBackground5Selected: #0f0f0f;
    --colorNeutralBackground6: #333333;
    --colorNeutralBackgroundInverted: #ffffff;
    --colorNeutralBackgroundStatic: #3d3d3d;
    --colorNeutralBackgroundAlpha: rgba(26, 26, 26, .5);
    --colorNeutralBackgroundAlpha2: rgba(31, 31, 31, .7);
    --colorSubtleBackground: transparent;
    --colorSubtleBackgroundHover: #383838;
    --colorSubtleBackgroundPressed: #2e2e2e;
    --colorSubtleBackgroundSelected: #333333;
    --colorSubtleBackgroundLightAlphaHover: rgba(36, 36, 36, .8);
    --colorSubtleBackgroundLightAlphaPressed: rgba(36, 36, 36, .5);
    --colorSubtleBackgroundLightAlphaSelected: transparent;
    --colorSubtleBackgroundInverted: transparent;
    --colorSubtleBackgroundInvertedHover: rgba(0, 0, 0, .1);
    --colorSubtleBackgroundInvertedPressed: rgba(0, 0, 0, .3);
    --colorSubtleBackgroundInvertedSelected: rgba(0, 0, 0, .2);
    --colorTransparentBackground: transparent;
    --colorTransparentBackgroundHover: transparent;
    --colorTransparentBackgroundPressed: transparent;
    --colorTransparentBackgroundSelected: transparent;
    --colorNeutralBackgroundDisabled: #141414;
    --colorNeutralBackgroundInvertedDisabled: rgba(255, 255, 255, .1);
    --colorNeutralStencil1: #575757;
    --colorNeutralStencil2: #333333;
    --colorNeutralStencil1Alpha: rgba(255, 255, 255, .1);
    --colorNeutralStencil2Alpha: rgba(255, 255, 255, .05);
    --colorBackgroundOverlay: rgba(0, 0, 0, .5);
    --colorScrollbarOverlay: rgba(255, 255, 255, .6);
    --colorBrandBackground: #115ea3;
    --colorBrandBackgroundHover: #0f6cbd;
    --colorBrandBackgroundPressed: #0c3b5e;
    --colorBrandBackgroundSelected: #0f548c;
    --colorCompoundBrandBackground: #479ef5;
    --colorCompoundBrandBackgroundHover: #62abf5;
    --colorCompoundBrandBackgroundPressed: #2886de;
    --colorBrandBackgroundStatic: #0f6cbd;
    --colorBrandBackground2: #082338;
    --colorBrandBackground2Hover: #0c3b5e;
    --colorBrandBackground2Pressed: #061724;
    --colorBrandBackground3Static: #0f548c;
    --colorBrandBackground4Static: #0c3b5e;
    --colorBrandBackgroundInverted: #ffffff;
    --colorBrandBackgroundInvertedHover: #ebf3fc;
    --colorBrandBackgroundInvertedPressed: #b4d6fa;
    --colorBrandBackgroundInvertedSelected: #cfe4fa;
    --colorNeutralCardBackground: #333333;
    --colorNeutralCardBackgroundHover: #3d3d3d;
    --colorNeutralCardBackgroundPressed: #2e2e2e;
    --colorNeutralCardBackgroundSelected: #383838;
    --colorNeutralCardBackgroundDisabled: #141414;
    --colorNeutralStrokeAccessible: #adadad;
    --colorNeutralStrokeAccessibleHover: #bdbdbd;
    --colorNeutralStrokeAccessiblePressed: #b3b3b3;
    --colorNeutralStrokeAccessibleSelected: #479ef5;
    --colorNeutralStroke1: #666666;
    --colorNeutralStroke1Hover: #757575;
    --colorNeutralStroke1Pressed: #6b6b6b;
    --colorNeutralStroke1Selected: #707070;
    --colorNeutralStroke2: #525252;
    --colorNeutralStroke3: #3d3d3d;
    --colorNeutralStrokeSubtle: #0a0a0a;
    --colorNeutralStrokeOnBrand: #292929;
    --colorNeutralStrokeOnBrand2: #ffffff;
    --colorNeutralStrokeOnBrand2Hover: #ffffff;
    --colorNeutralStrokeOnBrand2Pressed: #ffffff;
    --colorNeutralStrokeOnBrand2Selected: #ffffff;
    --colorBrandStroke1: #479ef5;
    --colorBrandStroke2: #0e4775;
    --colorBrandStroke2Hover: #0e4775;
    --colorBrandStroke2Pressed: #0a2e4a;
    --colorBrandStroke2Contrast: #0e4775;
    --colorCompoundBrandStroke: #479ef5;
    --colorCompoundBrandStrokeHover: #62abf5;
    --colorCompoundBrandStrokePressed: #2886de;
    --colorNeutralStrokeDisabled: #424242;
    --colorNeutralStrokeInvertedDisabled: rgba(255, 255, 255, .4);
    --colorTransparentStroke: transparent;
    --colorTransparentStrokeInteractive: transparent;
    --colorTransparentStrokeDisabled: transparent;
    --colorNeutralStrokeAlpha: rgba(255, 255, 255, .1);
    --colorNeutralStrokeAlpha2: rgba(255, 255, 255, .2);
    --colorStrokeFocus1: #000000;
    --colorStrokeFocus2: #ffffff;
    --colorNeutralShadowAmbient: rgba(0, 0, 0, .24);
    --colorNeutralShadowKey: rgba(0, 0, 0, .28);
    --colorNeutralShadowAmbientLighter: rgba(0, 0, 0, .12);
    --colorNeutralShadowKeyLighter: rgba(0, 0, 0, .14);
    --colorNeutralShadowAmbientDarker: rgba(0, 0, 0, .4);
    --colorNeutralShadowKeyDarker: rgba(0, 0, 0, .48);
    --colorBrandShadowAmbient: rgba(0, 0, 0, .3);
    --colorBrandShadowKey: rgba(0, 0, 0, .25);
    --colorPaletteRedBackground1: #3f1011;
    --colorPaletteRedBackground2: #751d1f;
    --colorPaletteRedBackground3: #d13438;
    --colorPaletteRedForeground1: #e37d80;
    --colorPaletteRedForeground2: #f1bbbc;
    --colorPaletteRedForeground3: #e37d80;
    --colorPaletteRedBorderActive: #e37d80;
    --colorPaletteRedBorder1: #d13438;
    --colorPaletteRedBorder2: #e37d80;
    --colorPaletteGreenBackground1: #052505;
    --colorPaletteGreenBackground2: #094509;
    --colorPaletteGreenBackground3: #107c10;
    --colorPaletteGreenForeground1: #54b054;
    --colorPaletteGreenForeground2: #9fd89f;
    --colorPaletteGreenForeground3: #9fd89f;
    --colorPaletteGreenBorderActive: #54b054;
    --colorPaletteGreenBorder1: #107c10;
    --colorPaletteGreenBorder2: #9fd89f;
    --colorPaletteDarkOrangeBackground1: #411200;
    --colorPaletteDarkOrangeBackground2: #7a2101;
    --colorPaletteDarkOrangeBackground3: #da3b01;
    --colorPaletteDarkOrangeForeground1: #e9835e;
    --colorPaletteDarkOrangeForeground2: #f4bfab;
    --colorPaletteDarkOrangeForeground3: #e9835e;
    --colorPaletteDarkOrangeBorderActive: #e9835e;
    --colorPaletteDarkOrangeBorder1: #da3b01;
    --colorPaletteDarkOrangeBorder2: #e9835e;
    --colorPaletteYellowBackground1: #4c4400;
    --colorPaletteYellowBackground2: #817400;
    --colorPaletteYellowBackground3: #fde300;
    --colorPaletteYellowForeground1: #feee66;
    --colorPaletteYellowForeground2: #fef7b2;
    --colorPaletteYellowForeground3: #fdea3d;
    --colorPaletteYellowBorderActive: #feee66;
    --colorPaletteYellowBorder1: #fde300;
    --colorPaletteYellowBorder2: #fdea3d;
    --colorPaletteBerryBackground1: #3a1136;
    --colorPaletteBerryBackground2: #6d2064;
    --colorPaletteBerryBackground3: #c239b3;
    --colorPaletteBerryForeground1: #da7ed0;
    --colorPaletteBerryForeground2: #edbbe7;
    --colorPaletteBerryForeground3: #d161c4;
    --colorPaletteBerryBorderActive: #da7ed0;
    --colorPaletteBerryBorder1: #c239b3;
    --colorPaletteBerryBorder2: #d161c4;
    --colorPaletteLightGreenBackground1: #063004;
    --colorPaletteLightGreenBackground2: #0b5a08;
    --colorPaletteLightGreenBackground3: #13a10e;
    --colorPaletteLightGreenForeground1: #5ec75a;
    --colorPaletteLightGreenForeground2: #a7e3a5;
    --colorPaletteLightGreenForeground3: #3db838;
    --colorPaletteLightGreenBorderActive: #5ec75a;
    --colorPaletteLightGreenBorder1: #13a10e;
    --colorPaletteLightGreenBorder2: #3db838;
    --colorPaletteMarigoldBackground1: #463100;
    --colorPaletteMarigoldBackground2: #835b00;
    --colorPaletteMarigoldBackground3: #eaa300;
    --colorPaletteMarigoldForeground1: #f2c661;
    --colorPaletteMarigoldForeground2: #f9e2ae;
    --colorPaletteMarigoldForeground3: #efb839;
    --colorPaletteMarigoldBorderActive: #f2c661;
    --colorPaletteMarigoldBorder1: #eaa300;
    --colorPaletteMarigoldBorder2: #efb839;
    --colorPaletteRedForegroundInverted: #d13438;
    --colorPaletteGreenForegroundInverted: #107c10;
    --colorPaletteYellowForegroundInverted: #817400;
    --colorPaletteDarkRedBackground2: #590815;
    --colorPaletteDarkRedForeground2: #d69ca5;
    --colorPaletteDarkRedBorderActive: #ac4f5e;
    --colorPaletteCranberryBackground2: #6e0811;
    --colorPaletteCranberryForeground2: #eeacb2;
    --colorPaletteCranberryBorderActive: #dc626d;
    --colorPalettePumpkinBackground2: #712d09;
    --colorPalettePumpkinForeground2: #efc4ad;
    --colorPalettePumpkinBorderActive: #df8e64;
    --colorPalettePeachBackground2: #8f4e00;
    --colorPalettePeachForeground2: #ffddb3;
    --colorPalettePeachBorderActive: #ffba66;
    --colorPaletteGoldBackground2: #6c5700;
    --colorPaletteGoldForeground2: #ecdfa5;
    --colorPaletteGoldBorderActive: #dac157;
    --colorPaletteBrassBackground2: #553e06;
    --colorPaletteBrassForeground2: #e0cea2;
    --colorPaletteBrassBorderActive: #c1a256;
    --colorPaletteBrownBackground2: #50301a;
    --colorPaletteBrownForeground2: #ddc3b0;
    --colorPaletteBrownBorderActive: #bb8f6f;
    --colorPaletteForestBackground2: #294903;
    --colorPaletteForestForeground2: #bdd99b;
    --colorPaletteForestBorderActive: #85b44c;
    --colorPaletteSeafoamBackground2: #00723b;
    --colorPaletteSeafoamForeground2: #a8f0cd;
    --colorPaletteSeafoamBorderActive: #5ae0a0;
    --colorPaletteDarkGreenBackground2: #063b06;
    --colorPaletteDarkGreenForeground2: #9ad29a;
    --colorPaletteDarkGreenBorderActive: #4da64d;
    --colorPaletteLightTealBackground2: #00666d;
    --colorPaletteLightTealForeground2: #a6e9ed;
    --colorPaletteLightTealBorderActive: #58d3db;
    --colorPaletteTealBackground2: #02494c;
    --colorPaletteTealForeground2: #9bd9db;
    --colorPaletteTealBorderActive: #4cb4b7;
    --colorPaletteSteelBackground2: #00333f;
    --colorPaletteSteelForeground2: #94c8d4;
    --colorPaletteSteelBorderActive: #4496a9;
    --colorPaletteBlueBackground2: #004377;
    --colorPaletteBlueForeground2: #a9d3f2;
    --colorPaletteBlueBorderActive: #5caae5;
    --colorPaletteRoyalBlueBackground2: #002c4e;
    --colorPaletteRoyalBlueForeground2: #9abfdc;
    --colorPaletteRoyalBlueBorderActive: #4a89ba;
    --colorPaletteCornflowerBackground2: #2c3c85;
    --colorPaletteCornflowerForeground2: #c8d1fa;
    --colorPaletteCornflowerBorderActive: #93a4f4;
    --colorPaletteNavyBackground2: #001665;
    --colorPaletteNavyForeground2: #a3b2e8;
    --colorPaletteNavyBorderActive: #546fd2;
    --colorPaletteLavenderBackground2: #3f3682;
    --colorPaletteLavenderForeground2: #d2ccf8;
    --colorPaletteLavenderBorderActive: #a79cf1;
    --colorPalettePurpleBackground2: #341a51;
    --colorPalettePurpleForeground2: #c6b1de;
    --colorPalettePurpleBorderActive: #9470bd;
    --colorPaletteGrapeBackground2: #4c0d55;
    --colorPaletteGrapeForeground2: #d9a7e0;
    --colorPaletteGrapeBorderActive: #b55fc1;
    --colorPaletteLilacBackground2: #63276d;
    --colorPaletteLilacForeground2: #e6bfed;
    --colorPaletteLilacBorderActive: #cf87da;
    --colorPalettePinkBackground2: #80215d;
    --colorPalettePinkForeground2: #f7c0e3;
    --colorPalettePinkBorderActive: #ef85c8;
    --colorPaletteMagentaBackground2: #6b0043;
    --colorPaletteMagentaForeground2: #eca5d1;
    --colorPaletteMagentaBorderActive: #d957a8;
    --colorPalettePlumBackground2: #5a003b;
    --colorPalettePlumForeground2: #d696c0;
    --colorPalettePlumBorderActive: #ad4589;
    --colorPaletteBeigeBackground2: #444241;
    --colorPaletteBeigeForeground2: #d7d4d4;
    --colorPaletteBeigeBorderActive: #afabaa;
    --colorPaletteMinkBackground2: #343231;
    --colorPaletteMinkForeground2: #cecccb;
    --colorPaletteMinkBorderActive: #9e9b99;
    --colorPalettePlatinumBackground2: #3b4447;
    --colorPalettePlatinumForeground2: #cdd6d8;
    --colorPalettePlatinumBorderActive: #a0adb2;
    --colorPaletteAnchorBackground2: #202427;
    --colorPaletteAnchorForeground2: #bcc3c7;
    --colorPaletteAnchorBorderActive: #808a90;
    --colorStatusSuccessBackground1: #052505;
    --colorStatusSuccessBackground2: #094509;
    --colorStatusSuccessBackground3: #107c10;
    --colorStatusSuccessForeground1: #54b054;
    --colorStatusSuccessForeground2: #9fd89f;
    --colorStatusSuccessForeground3: #9fd89f;
    --colorStatusSuccessBorderActive: #54b054;
    --colorStatusSuccessForegroundInverted: #0e700e;
    --colorStatusSuccessBorder1: #107c10;
    --colorStatusSuccessBorder2: #9fd89f;
    --colorStatusWarningBackground1: #4a1e04;
    --colorStatusWarningBackground2: #8a3707;
    --colorStatusWarningBackground3: #f7630c;
    --colorStatusWarningForeground1: #faa06b;
    --colorStatusWarningForeground2: #fdcfb4;
    --colorStatusWarningForeground3: #f98845;
    --colorStatusWarningBorderActive: #faa06b;
    --colorStatusWarningForegroundInverted: #bc4b09;
    --colorStatusWarningBorder1: #f7630c;
    --colorStatusWarningBorder2: #f98845;
    --colorStatusDangerBackground1: #3b0509;
    --colorStatusDangerBackground2: #6e0811;
    --colorStatusDangerBackground3: #c50f1f;
    --colorStatusDangerForeground1: #dc626d;
    --colorStatusDangerForeground2: #eeacb2;
    --colorStatusDangerForeground3: #eeacb2;
    --colorStatusDangerBorderActive: #dc626d;
    --colorStatusDangerForegroundInverted: #b10e1c;
    --colorStatusDangerBorder1: #c50f1f;
    --colorStatusDangerBorder2: #dc626d;
    --colorStatusDangerBackground3Hover: #b10e1c;
    --colorStatusDangerBackground3Pressed: #960b18;
    --shadow2: 0 0 2px rgba(0, 0, 0, .24), 0 1px 2px rgba(0, 0, 0, .28);
    --shadow4: 0 0 2px rgba(0, 0, 0, .24), 0 2px 4px rgba(0, 0, 0, .28);
    --shadow8: 0 0 2px rgba(0, 0, 0, .24), 0 4px 8px rgba(0, 0, 0, .28);
    --shadow16: 0 0 2px rgba(0, 0, 0, .24), 0 8px 16px rgba(0, 0, 0, .28);
    --shadow28: 0 0 8px rgba(0, 0, 0, .24), 0 14px 28px rgba(0, 0, 0, .28);
    --shadow64: 0 0 8px rgba(0, 0, 0, .24), 0 32px 64px rgba(0, 0, 0, .28);
    --shadow2Brand: 0 0 2px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .25);
    --shadow4Brand: 0 0 2px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .25);
    --shadow8Brand: 0 0 2px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .25);
    --shadow16Brand: 0 0 2px rgba(0, 0, 0, .3), 0 8px 16px rgba(0, 0, 0, .25);
    --shadow28Brand: 0 0 8px rgba(0, 0, 0, .3), 0 14px 28px rgba(0, 0, 0, .25);
    --shadow64Brand: 0 0 8px rgba(0, 0, 0, .3), 0 32px 64px rgba(0, 0, 0, .25)
}

:root,
[data-theme=light] {
    --colorNeutralBackground7: #252423;
    --colorNeutralBackground8: #b3d4ff;
    --colorNeutralBackground9: #ffffff;
    --colorNeutralBackground10: #edebe9;
    --colorNeutralBackground11: #ffeff6;
    --colorNeutralBackground12Hover: #fae9ec;
    --colorNeutralBackground12Pressed: #fad6dc;
    --colorNeutralBackground13: #f1b8c0;
    --colorNeutralBackground14: #fafafa;
    --colorNeutralBackground14Hover: #3b5dae;
    --colorNeutralBackground14Pressed: #29417b;
    --colorNeutralBackground15: #faf9f8;
    --colorNeutralBackground16: #e5e8ff;
    --colorNeutralBackground17: #fbedef;
    --colorNeutralBackground18: #dff6dd;
    --colorNeutralBackground19: #fde7e9;
    --colorNeutralBackground20: #fff4ce;
    --colorNeutralBackground21: #4b5dff;
    --colorNeutralBackground22: #8082f4;
    --colorNeutralBackground23: #ae94d9;
    --colorNeutralBackground24: #ee1f5d;
    --colorNeutralBackground25: #ffb700;
    --colorNeutralBackground26: #ff98cb;
    --colorNeutralForeground5: #a63f50;
    --colorNeutralForeground6: #1b1a19;
    --colorNeutralForeground7: #9d4659;
    --colorNeutralForeground7Focus: #808080;
    --colorNeutralForeground8: #af4e63;
    --colorNeutralForeground8Alpha: #af4e6380;
    --colorNeutralForeground8Hover: #954355;
    --colorNeutralForeground8Pressed: #682f3d;
    --colorNeutralForeground9: #444444;
    --colorNeutralForeground10: #c43857;
    --colorNeutralForeground11: #605e5c;
    --colorNeutralForeground12: #0c0c0c;
    --colorNeutralForeground12Hover: #d9546a;
    --colorNeutralForeground13: #161514;
    --colorNeutralForeground14: #727272;
    --colorNeutralForeground15: #d6d6d6;
    --colorNeutralForeground16: #af4e63;
    --colorNeutralForegroundPro: #018a39;
    --colorNeutralForeground2Pro: #107c10;
    --colorNeutralForegroundCon: #c50f1f;
    --colorNeutralForeground3Link: #484644;
    --colorNeutralForeground3LinkPressed: #a63f50;
    --colorInfoTileStrongEnforce: #da3815;
    --colorNeutralBackground27: #ee5d1f;
    --colorNeutralBackground28: #ebebeb;
    --colorNeutralBackground29: #eeebf0;
    --colorNeutralBackground30: #f4f8f9;
    --colorHeroBackgroundInverted: #000000;
    --colorHeroForegroundInverted: #ffffff;
    --colorNeutralBackground31: #fdfefe;
    --colorSidebar: #ffffff;
    --colorTocHover: #fad6dc;
    --colorTocPressed: #994053;
    --brand-comm-blue: #0078d4;
    --brand-powerbi: #f2c811;
    --brand-office: #d83b01;
    --brand-powerpoint: #c43e1c;
    --brand-windows: #0078d4;
    --brand-publisher: #077568;
    --brand-cortana: #222222;
    --brand-stream: #bc1948;
    --brand-excel: #107c41;
    --brand-sway: #008272;
    --brand-groupme: #00bcf2;
    --brand-teams: #5b5fc7;
    --brand-onedrive: #0078d4;
    --brand-visio: #3955a3;
    --brand-planner: #107c41;
    --brand-word: #185abd;
    --brand-powerapps: #742774;
    --brand-booking: #00a99d;
    --docsearch-primary-color: var(--colorNeutralForeground16);
    --docsearch-highlight-color: var(--colorNeutralForeground16);
    --docsearch-muted-color: #444950;
    --docsearch-container-background: rgb(199 199 199 / 86%);
    --docsearch-logo-color: #000;
    --docsearch-modal-background: var(--colorNeutralBackgroundDisabled);
    --docsearch-key-gradient-override: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
    --docsearch-key-shadow-override: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, .4);
    --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, .5), 0 3px 8px 0 #00000040;
    --docsearch-hit-shadow: 0 1px 3px 0 #00000040;
    --docsearch-key-shadow: inset 0 -2px 0 0 #0000002b, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(91 91 92 / 40%)
}

[data-theme=dark] {
    --colorNeutralBackground10: #121416;
    --colorNeutralBackground11: #260b0f;
    --colorNeutralBackground12Hover: #260b0f;
    --colorNeutralBackground12Pressed: #3d151c;
    --colorNeutralBackground13: #0e473f;
    --colorNeutralBackground14: #1a1a1a;
    --colorNeutralBackground14Hover: #c4a251;
    --colorNeutralBackground14Pressed: #d6be84;
    --colorNeutralBackground15: #050607;
    --colorNeutralBackground16: #1a1700;
    --colorNeutralBackground17: #041210;
    --colorNeutralBackground18: #200922;
    --colorNeutralBackground19: #021816;
    --colorNeutralBackground20: #000b31;
    --colorNeutralBackground21: #b4a200;
    --colorNeutralBackground22: #7f7d0b;
    --colorNeutralBackground23: #516b26;
    --colorNeutralBackground7: #141414;
    --colorNeutralBackground8: #4c2b00;
    --colorNeutralBackground9: #1f1f1f;
    --colorNeutralForeground11: #9fa1a3;
    --colorNeutralForeground12: #f3f3f3;
    --colorNeutralForeground12Hover: #db7488;
    --colorNeutralForeground13: #e9eaeb;
    --colorNeutralForeground14: #8d8d8d;
    --colorNeutralForeground3Link: #b7b9bb;
    --colorNeutralForeground3LinkPressed: #fd9fb0;
    --colorNeutralForeground6: #e4e5e6;
    --colorNeutralForeground7Focus: #7f7f7f;
    --colorNeutralForeground8: #db7488;
    --colorNeutralForeground8Hover: #6abcaa;
    --colorNeutralForeground8Pressed: #97d0c2;
    --colorNeutralForeground9: #bbbbbb;
    --colorNeutralForeground16: #cf4460;
    --colorNeutralForegroundPro: #fe75c6;
    --colorNeutralBackground28: #333333;
    --colorNeutralBackground29: #1f1f1f;
    --colorNeutralBackground30: #242424;
    --colorHeroBackgroundInverted: #ffffff;
    --colorHeroForegroundInverted: #424242;
    --colorNeutralBackground31: #292929;
    --colorSidebar: #141414;
    --colorTocHover: #6e2a37;
    --colorTocPressed: #db7488;
    --colorNeutralForeground2Pro: #109c10;
    --colorNeutralForegroundCon: #ff3232;
    --docsearch-key-gradient-override: linear-gradient(-26.5deg, #4a4a4a, #000000);
    --docsearch-key-shadow-override: inset 0 -2px 0 0 #1c1d25, inset 0 0 1px 1px #515461, 0 2px 2px 0 rgba(3, 4, 9, .3)
}

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

* {
    box-sizing: border-box;
    margin: 0
}

:root,
[data-theme=light] {
    font-family: Segoe UI, "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
    font-size: 1rem;
    --user-font-scale: 1rem - 16px;
    font-size: clamp(.875rem, .4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
    scroll-behavior: smooth;
    --link-color: #02767a
}

header a,
.sidebar a,
.toc a {
    text-decoration: none
}

body {
    background: var(--colorNeutralBackground9);
    color: var(--colorStrokeFocus2)
}

@media(min-width: 1140px) {
    body .sidebar-blur {
        position: fixed;
        z-index: -5;
        top: 0;
        left: 0;
        height: 100vh;
        width: calc(var(--sidebar-width) + 2 * var(--side-padding) - 4px);
        background-color: var(--colorSidebar);
        border-right: 1px solid var(--colorNeutralStroke2)
    }
}

footer {
    background: var(--colorNeutralBackground3)
}

img {
    max-width: 100%;
    height: auto
}

button {
    cursor: pointer
}

h2:target,
h3:target {
    scroll-margin: 100px
}

pre.astro-code {
    background: var(--colorNeutralBackground7) !important;
    border-radius: 22px;
    border: none
}

pre.astro-code code {
    font-family: Cascadia Code;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px
}

.body-bg {
    overflow: hidden;
    z-index: -10
}

@media(min-width: 1140px) {
    .body-bg {
        position: absolute;
        inset: 0
    }

    .body-bg .circle {
        position: absolute;
        border-radius: 50%;
        -webkit-filter: blur(200px);
        filter: blur(190px)
    }

    .body-bg .circle-left {
        position: absolute;
        width: 1235px;
        height: 980px;
        left: -709px;
        top: -646px;
        background: #c989e838
    }

    .body-bg .circle-right {
        width: 1235px;
        height: 980px;
        top: -611px;
        right: -961px;
        background: var(--colorNeutralBackground8);
        opacity: .6
    }
}

[data-theme=light],
:root {
    color-scheme: light
}

[data-theme=dark] {
    color-scheme: dark
}

[data-theme=dark] .dimmed-image img {
    filter: brightness(70%)
}

a[data-astro-cid-s7zbvxmx] {
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    max-width: 29px;
    padding: 3px;
    gap: 12px
}

@media(min-width: 300px) {
    a[data-astro-cid-s7zbvxmx] {
        white-space: unset;
        overflow: visible;
        max-width: none;
        direction: row
    }
}

._svg_fqnn1_1 {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

._svg_fqnn1_1 svg {
    color: currentColor;
    width: auto
}

._svg_fqnn1_1:not(._default_fqnn1_10) svg {
    height: 1em
}

.toggler[data-astro-cid-puy3spgu] {
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    cursor: pointer
}

.toggler[data-astro-cid-puy3spgu]:hover {
    opacity: .8
}

@media(min-width: 1140px) {
    .toggler[data-astro-cid-puy3spgu] {
        display: none
    }
}

.theme-switcher-tooltip {
    border-radius: 20px !important;
    margin-top: 10px !important
}

.theme-switcher {
    margin-left: auto;
    position: relative;
    width: 30px;
    display: block
}

.theme-switcher-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap
}

.theme-switcher-label {
    position: relative;
    width: 100%;
    height: 18px;
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 20px;
    border: 2px solid var(--colorHeroBackgroundInverted);
    margin: 0
}

.theme-switcher-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin .3s ease-in 0s
}

.theme-switcher-switch {
    display: block;
    width: 9px;
    margin: 2.5px;
    background: var(--colorHeroBackgroundInverted);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 12px;
    border-radius: 20px;
    transition: all .3s ease-in 0s
}

.theme-switcher-checkbox:checked+.theme-switcher-label .theme-switcher-switch {
    right: 0
}

.theme-switcher-checkbox:checked+.theme-switcher-label:after {
    content: "";
    background-color: #000;
    width: 8px;
    height: 9px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 20px
}

.signin-text {
    color: var(--colorNeutralForeground2)
}

.login-button {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 5px 12px 5px 8px;
    border: 1px solid transparent
}

.login-button:hover {
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 8px
}

.dropdown {
    list-style: none;
    position: relative;
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralForeground8);
    border-radius: 8px;
    height: 32px;
    cursor: pointer;
    padding: 0;
    margin: 8px 0
}

.dropdown:hover {
    background: var(--colorNeutralBackground11);
    border: 1px solid var(--colorNeutralForeground8)
}

.dropdown:active,
.dropdown:focus,
.dropdown.open {
    background: var(--colorNeutralBackground11);
    border: 2px solid var(--colorNeutralForeground8)
}

.dropdown__label {
    position: absolute;
    top: -9px;
    left: 15px;
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground9);
    font-size: .8em;
    font-family: Lato, sans-serif
}

.dropdown__arrow {
    position: absolute;
    right: 10px;
    top: 50%
}

.dropdown__list {
    width: 100%;
    position: absolute;
    left: 0;
    top: 4px;
    border: 1px solid var(--colorNeutralStroke1);
    box-shadow: 0 8px 16px #00000024;
    backdrop-filter: blur(5px);
    border-radius: 8px;
    z-index: 100;
    background: var(--colorNeutralBackgroundAlpha2)
}

.dropdown__list.open {
    transition: opacity .1s cubic-bezier(.7, 0, 1, .5), max-height .1s cubic-bezier(.7, 0, 1, .5);
    opacity: 1;
    overflow: auto;
    max-height: 15rem
}

.dropdown__list.closed {
    transition: opacity .1s cubic-bezier(.7, 0, 1, .5), max-height .1s cubic-bezier(.7, 0, 1, .5);
    opacity: 0;
    overflow: hidden;
    max-height: 0
}

.dropdown__list-container {
    position: relative
}

.dropdown__list-container[aria-expanded=true] {
    visibility: visible
}

.dropdown__list-container[aria-expanded=false] {
    visibility: hidden
}

.dropdown ul {
    list-style: none;
    margin: 0;
    padding: 4px
}

.dropdown__list-item:first-of-type {
    margin-top: 0
}

.dropdown__list-item {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--colorNeutralForeground2);
    transition: padding-left .1s cubic-bezier(.7, 0, 1, .5);
    color: var(--colorNeutralForeground9);
    list-style-position: inside;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 6px 6px 32px;
    position: relative;
    border-radius: 4px;
    margin-top: 2px
}

.dropdown__list-item .selected-icon {
    display: none
}

.dropdown__list-item:hover,
.dropdown__list-item:focus {
    background-color: var(--colorNeutralBackground11);
    color: var(--colorNeutralForeground8);
    padding-left: 38px;
    transition: padding-left .1s cubic-bezier(.7, 0, 1, .5)
}

.dropdown__list-item.selected {
    color: var(--colorNeutralForeground8);
    font-weight: 600
}

.dropdown__list-item.selected .selected-icon {
    display: block;
    position: absolute;
    left: 12px;
    top: 12px
}

.dropdown__list-item.disabled {
    color: var(--colorNeutralForegroundDisabled);
    cursor: not-allowed;
    transition: none
}

.dropdown__list-item.disabled:hover,
.dropdown__list-item.disabled:focus {
    background-color: inherit;
    color: var(--colorNeutralForegroundDisabled);
    padding-left: 32px;
    transition: none
}

.dropdown__list-item:focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 .1rem var(--colorStrokeFocus2)
}

.dropdown #dropdown__selected {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    padding-top: 4px;
    padding-bottom: 5px;
    padding-left: 36px;
    color: var(--colorNeutralForeground8);
    list-style-position: inside;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 30px
}

.dropdown #dropdown__selected:focus-visible {
    outline: 0
}

.dropdown #dropdown__selected .menu-icon {
    position: absolute;
    left: 12px;
    top: 8px
}

.dropdown #dropdown__selected .down-arrow-icon {
    position: absolute;
    right: 10px;
    top: 12px
}

.dropdown #dropdown__selected .preview-tag {
    position: absolute;
    right: 28px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    line-height: 14px;
    font-weight: 600;
    display: inline-block;
    background-color: #ebebeb;
    color: #616161;
    z-index: 1
}

@media(forced-colors:active) {
    .dropdown #dropdown__selected {
        color: #dd617b
    }
}

nav {
    font-size: 14px;
    line-height: 19px;
    margin-top: 20px
}

.main-item {
    position: relative;
    padding-top: 2px;
    padding-bottom: 2px
}

.main-item:first-child {
    padding-top: 0
}

.main-item:not(:first-child):not(.no-divider):before {
    content: "";
    position: absolute;
    height: 1px;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--colorNeutralStroke3)
}

.main-item.sub-item {
    height: auto
}

.main-item.sub-item>a {
    padding: 6px 12px;
    justify-content: flex-start
}

.main-item.no-divider .menu-toggle {
    margin-top: 0
}

.submenu-container {
    position: relative;
    left: -3px;
    width: calc(100% + 6px);
    overflow: hidden;
    height: 0;
    visibility: hidden;
    transition: height .3s cubic-bezier(.4, 0, .2, 1), visibility .3s cubic-bezier(.4, 0, .2, 1)
}

[aria-expanded=true]+.submenu-container,
.expanded .submenu-container {
    height: var(--s-height, auto);
    visibility: visible
}

.sub {
    left: 3px;
    right: 3px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 8px
}

.sub-item:last-child {
    margin-bottom: 12px
}

.sub-item a {
    padding: 6px 36px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    color: var(--colorNeutralForeground3Link)
}

.sub-item a span {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sub-item a:hover {
    background: var(--colorNeutralBackground11);
    color: var(--colorNeutralForeground3LinkPressed)
}

.sub-item a:hover .preview-tag {
    background-color: #fff
}

.sub-item a.active {
    outline: 2px solid transparent;
    background: var(--colorNeutralBackground12Pressed);
    font-weight: 600;
    color: var(--colorNeutralForeground3LinkPressed)
}

.sub-item a.indented {
    margin-left: 35px
}

.sub-item .sub-sub-items {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    row-gap: 8px
}

.menu-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    column-gap: 11px;
    border: 0;
    background: none;
    padding: 8px 14px;
    margin: 8px 0;
    cursor: pointer;
    color: var(--colorNeutralForeground6);
    font-weight: 600;
    border-radius: 8px
}

.menu-toggle:hover {
    background: var(--colorNeutralBackground12Hover)
}

.menu-toggle:hover .preview-tag {
    background-color: #fff
}

.menu-toggle .nav-arrow {
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    transform: rotate(-90deg);
    font-size: 8px;
    margin-top: 2px
}

.menu-toggle .nav-arrow img {
    width: 11px;
    height: 8px
}

.menu-toggle[aria-expanded=true] span {
    transform: none
}

.offscreen-top[data-astro-cid-ssfzsv2f] {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 46px;
    height: 39px
}

.offscreen-top[data-astro-cid-ssfzsv2f] .logo-search-container[data-astro-cid-ssfzsv2f] {
    display: flex;
    align-items: center;
    column-gap: 100px
}

@media(min-width: 1140px) {
    .offscreen-top[data-astro-cid-ssfzsv2f] {
        display: none
    }

    .sidebar-content[data-astro-cid-ssfzsv2f] {
        margin-top: -2px;
        border-top: 1px solid var(--colorNeutralStroke3);
        background-color: var(--colorSidebar);
        border-right: 1px solid var(--colorNeutralStroke2)
    }
}

.page-timestamp[data-astro-cid-675xpvwb] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 14px;
    color: var(--colorNeutralForeground2)
}

.page-timestamp[data-astro-cid-675xpvwb] .timestamp-label[data-astro-cid-675xpvwb] {
    font-weight: 500
}

.page-timestamp[data-astro-cid-675xpvwb] .timestamp-date[data-astro-cid-675xpvwb] {
    color: var(--colorNeutralForeground2)
}

.page-timestamp[data-astro-cid-675xpvwb].header-placement {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 14px
}

@media(max-width: 768px) {
    .page-timestamp[data-astro-cid-675xpvwb].header-placement {
        position: static;
        margin-top: .5rem;
        font-size: .875rem
    }
}

.page-timestamp[data-astro-cid-675xpvwb].inline {
    display: inline
}

.page-timestamp[data-astro-cid-675xpvwb].inline:before {
    content: " • ";
    margin: 0 .25rem
}

.page-timestamp[data-astro-cid-675xpvwb].footer-placement {
    justify-self: end;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--colorNeutralStroke2);
    width: 100%;
    text-align: right
}

.feedback {
    overflow: hidden;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
    background-color: var(--colorNeutralBackground3);
    box-shadow: 0 0 2px #0000001f, 0 8px 16px #00000024;
    width: 320px
}

.feedback .feedback-label {
    display: flex;
    align-items: center;
    padding: 0 23px;
    font-size: 20px;
    font-weight: 600;
    height: 0;
    width: 100%;
    transition: height .3s linear, visibility 0s linear .3s
}

.feedback .feedback-internal-button {
    box-shadow: #444 0 0 4px -2px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    background-color: var(--colorNeutralBackground3);
    border: none;
    display: none;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    width: 100%;
    transition: height .3s ease-in .15s, visibility 0s linear .3s, font-size .3s ease-in, padding .3s ease-in
}

.feedback .feedback-internal-button .arrow {
    transform: rotate(-180deg);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    margin-top: 2px;
    width: 12px
}

.feedback .feedback-content {
    padding: 0 23px;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 0;
    transition: height .3s ease-in, visibility .3s ease-out .3s
}

.feedback .feedback-content .desc {
    margin-top: 8px;
    margin-bottom: 7px
}

.feedback .feedback-content input,
.feedback .feedback-content textarea {
    width: 100%
}

.feedback .feedback-content textarea {
    height: 121px
}

.feedback .feedback-content .form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px
}

.feedback .feedback-content .form-buttons button {
    min-width: 70px
}

.feedback .feedback-content .form-buttons button:focus {
    outline: none;
    border: 1px solid var(--colorNeutralForeground1)
}

.feedback .feedback-message {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 23px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    height: 0;
    width: 100%;
    transition: height .3s ease-out;
    overflow: hidden
}

.feedback .feedback-message .container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -30px;
    margin-bottom: 33px
}

.feedback .feedback-message .container .message-icon {
    width: 16px
}

.feedback .feedback-message .container .message-close-button {
    background: none;
    border: none;
    margin-left: auto
}

.feedback .feedback-message .container .message-close-button img {
    display: block;
    width: 20px
}

.feedback .feedback-message.loading {
    padding: 45px 23px 0
}

.feedback.open .feedback-label {
    height: 58px;
    transition: height .3s ease-in, visibility 0s ease-in .3s
}

.feedback.open .feedback-internal-button {
    padding: 0 23px;
    font-size: 20px;
    border-bottom: 1px solid var(--colorNeutralStroke3);
    transition: height .3s ease-in .3s, font-size .3s ease-in, padding .3s ease-in, visibility 0s ease-in .3s
}

.feedback.open .feedback-internal-button .arrow {
    transform: rotate(0)
}

.feedback.open .feedback-content {
    height: 567px;
    max-height: 80vh;
    overflow-y: auto
}

.feedback.open .feedback-content.invalid {
    height: 592px
}

.feedback.open:not(.sending) .feedback-content {
    transition: height .3s ease-out, visibility .3s ease-out .3s
}

.feedback.sending {
    width: 320px
}

.feedback.sending .feedback-internal-button,
.feedback.sending .feedback-content,
.feedback.sending .feedback-label {
    height: 0;
    visibility: hidden
}

.feedback.sending .feedback-message {
    height: 44px;
    transition: height .3s ease-in 1s, padding .3s ease-out 1s
}

@media(min-width: 0) {
    .feedback {
        width: 113px;
        transition: width .3s ease-out .3s
    }

    .feedback .feedback-label {
        display: none
    }

    .feedback .feedback-internal-button {
        display: flex
    }

    .feedback.open {
        width: 320px;
        transition: width .3s ease-in
    }

    .feedback.open .feedback-label {
        display: none
    }

    .feedback.open:not(.sending) .feedback-content {
        transition: height .3s ease-out .3s, visibility .3s ease-out .3s
    }
}

.content-container[data-astro-cid-eribfrav] {
    position: relative
}

.content-container[data-astro-cid-eribfrav] .content-header[data-astro-cid-eribfrav] {
    position: relative;
    min-height: 2.5rem
}
```