/*
 * Crystallize design tokens — GENERATED by build-tokens.mjs from tokens.json. Do not edit.
 * Light values on :root; dark values under .c-dark (the app's class) and [data-theme="dark"].
 * Every token whose resolved dark value differs is re-declared in the dark block, so aliases are
 * recomputed wherever the dark class is applied.
 */

:root {
  /* ---- primitive ---- */
  --ds-color-cyan-50: #eefdfc;
  --ds-color-cyan-100: #bff6f8;
  --ds-color-cyan-200: #acf1f5;
  --ds-color-cyan-300: #73e5ed;
  --ds-color-cyan-400: #33d0dd;
  --ds-color-cyan-500: #17b3c3;
  --ds-color-cyan-600: #1690a4;
  --ds-color-cyan-700: #197385;
  --ds-color-cyan-800: #1d5e6d;
  --ds-color-cyan-900: #1c4e5d;
  --ds-color-cyan-50-900: var(--ds-color-cyan-50);
  --ds-color-cyan-100-800: var(--ds-color-cyan-100);
  --ds-color-cyan-200-700: var(--ds-color-cyan-200);
  --ds-color-cyan-300-600: var(--ds-color-cyan-300);
  --ds-color-cyan-400-500: var(--ds-color-cyan-400);
  --ds-color-cyan-500-400: var(--ds-color-cyan-500);
  --ds-color-cyan-600-300: var(--ds-color-cyan-600);
  --ds-color-cyan-700-200: var(--ds-color-cyan-700);
  --ds-color-cyan-800-100: var(--ds-color-cyan-800);
  --ds-color-cyan-900-50: var(--ds-color-cyan-900);
  --ds-color-cyan-default: var(--ds-color-cyan-200);
  --ds-color-pink-50: #fef1f9;
  --ds-color-pink-100: #fee5f4;
  --ds-color-pink-200: #ffccec;
  --ds-color-pink-300: #ffa1db;
  --ds-color-pink-400: #ff66c0;
  --ds-color-pink-500: #fb39a4;
  --ds-color-pink-600: #eb1782;
  --ds-color-pink-700: #cd0966;
  --ds-color-pink-800: #a90b54;
  --ds-color-pink-900: #8d0e49;
  --ds-color-pink-50-900: var(--ds-color-pink-50);
  --ds-color-pink-100-800: var(--ds-color-pink-100);
  --ds-color-pink-200-700: var(--ds-color-pink-200);
  --ds-color-pink-300-600: var(--ds-color-pink-300);
  --ds-color-pink-400-500: var(--ds-color-pink-400);
  --ds-color-pink-500-400: var(--ds-color-pink-500);
  --ds-color-pink-600-300: var(--ds-color-pink-600);
  --ds-color-pink-700-200: var(--ds-color-pink-700);
  --ds-color-pink-800-100: var(--ds-color-pink-800);
  --ds-color-pink-900-50: var(--ds-color-pink-900);
  --ds-color-pink-default: var(--ds-color-pink-300);
  --ds-color-gray-50: #f5f5f6;
  --ds-color-gray-100: #e4e5e9;
  --ds-color-gray-200: #cccfd5;
  --ds-color-gray-300: #a9aeb7;
  --ds-color-gray-400: #7e8592;
  --ds-color-gray-500: #626778;
  --ds-color-gray-600: #545866;
  --ds-color-gray-700: #4c4f5a;
  --ds-color-gray-800: #40424a;
  --ds-color-gray-900: #393a40;
  --ds-color-gray-50-900: var(--ds-color-gray-50);
  --ds-color-gray-100-800: var(--ds-color-gray-100);
  --ds-color-gray-200-700: var(--ds-color-gray-200);
  --ds-color-gray-300-600: var(--ds-color-gray-300);
  --ds-color-gray-400-500: var(--ds-color-gray-400);
  --ds-color-gray-500-400: var(--ds-color-gray-500);
  --ds-color-gray-600-300: var(--ds-color-gray-600);
  --ds-color-gray-700-200: var(--ds-color-gray-700);
  --ds-color-gray-800-100: var(--ds-color-gray-800);
  --ds-color-gray-900-50: var(--ds-color-gray-900);
  --ds-color-gray-default: var(--ds-color-gray-700);
  --ds-color-purple-50: #f7f6f9;
  --ds-color-purple-100: #eeecf2;
  --ds-color-purple-200: #d8d5e2;
  --ds-color-purple-300: #b6b0c9;
  --ds-color-purple-400: #8e85ab;
  --ds-color-purple-500: #706691;
  --ds-color-purple-600: #5b5178;
  --ds-color-purple-700: #4b4262;
  --ds-color-purple-800: #403953;
  --ds-color-purple-900: #393347;
  --ds-color-purple-50-900: var(--ds-color-purple-50);
  --ds-color-purple-100-800: var(--ds-color-purple-100);
  --ds-color-purple-200-700: var(--ds-color-purple-200);
  --ds-color-purple-300-600: var(--ds-color-purple-300);
  --ds-color-purple-400-500: var(--ds-color-purple-400);
  --ds-color-purple-500-400: var(--ds-color-purple-500);
  --ds-color-purple-600-300: var(--ds-color-purple-600);
  --ds-color-purple-700-200: var(--ds-color-purple-700);
  --ds-color-purple-800-100: var(--ds-color-purple-800);
  --ds-color-purple-900-50: var(--ds-color-purple-900);
  --ds-color-purple-default: var(--ds-color-purple-50);
  --ds-color-green-50: #f3f8f8;
  --ds-color-green-100: #dfebee;
  --ds-color-green-200: #c3dade;
  --ds-color-green-300: #9abfc6;
  --ds-color-green-400: #699ca7;
  --ds-color-green-500: #528693;
  --ds-color-green-600: #436a77;
  --ds-color-green-700: #3b5863;
  --ds-color-green-800: #374b53;
  --ds-color-green-900: #314148;
  --ds-color-green-50-900: var(--ds-color-green-50);
  --ds-color-green-100-800: var(--ds-color-green-100);
  --ds-color-green-200-700: var(--ds-color-green-200);
  --ds-color-green-300-600: var(--ds-color-green-300);
  --ds-color-green-400-500: var(--ds-color-green-400);
  --ds-color-green-500-400: var(--ds-color-green-500);
  --ds-color-green-600-300: var(--ds-color-green-600);
  --ds-color-green-700-200: var(--ds-color-green-700);
  --ds-color-green-800-100: var(--ds-color-green-800);
  --ds-color-green-900-50: var(--ds-color-green-900);
  --ds-color-green-default: var(--ds-color-green-400);
  --ds-color-orange-50: #fff9eb;
  --ds-color-orange-100: #ffedc6;
  --ds-color-orange-200: #ffde99;
  --ds-color-orange-300: #ffbf4a;
  --ds-color-orange-400: #ffa520;
  --ds-color-orange-500: #f98107;
  --ds-color-orange-600: #dd5c02;
  --ds-color-orange-700: #b73d06;
  --ds-color-orange-800: #942e0c;
  --ds-color-orange-900: #7a270d;
  --ds-color-orange-50-900: var(--ds-color-orange-50);
  --ds-color-orange-100-800: var(--ds-color-orange-100);
  --ds-color-orange-200-700: var(--ds-color-orange-200);
  --ds-color-orange-300-600: var(--ds-color-orange-300);
  --ds-color-orange-400-500: var(--ds-color-orange-400);
  --ds-color-orange-500-400: var(--ds-color-orange-500);
  --ds-color-orange-600-300: var(--ds-color-orange-600);
  --ds-color-orange-700-200: var(--ds-color-orange-700);
  --ds-color-orange-800-100: var(--ds-color-orange-800);
  --ds-color-orange-900-50: var(--ds-color-orange-900);
  --ds-color-orange-default: #f2994a;
  --ds-color-s-red-50: #fef2f2;
  --ds-color-s-red-100: #ffe1e1;
  --ds-color-s-red-200: #ffc8c8;
  --ds-color-s-red-300: #ffadad;
  --ds-color-s-red-400: #fd6c6c;
  --ds-color-s-red-500: #f53e3e;
  --ds-color-s-red-600: #e22020;
  --ds-color-s-red-700: #be1717;
  --ds-color-s-red-800: #9d1717;
  --ds-color-s-red-900: #821a1a;
  --ds-color-s-red-50-900: var(--ds-color-s-red-50);
  --ds-color-s-red-100-800: var(--ds-color-s-red-100);
  --ds-color-s-red-200-700: var(--ds-color-s-red-200);
  --ds-color-s-red-300-600: var(--ds-color-s-red-300);
  --ds-color-s-red-400-500: var(--ds-color-s-red-400);
  --ds-color-s-red-500-400: var(--ds-color-s-red-500);
  --ds-color-s-red-600-300: var(--ds-color-s-red-600);
  --ds-color-s-red-700-200: var(--ds-color-s-red-700);
  --ds-color-s-red-800-100: var(--ds-color-s-red-800);
  --ds-color-s-red-900-50: var(--ds-color-s-red-900);
  --ds-color-s-red-default: var(--ds-color-s-red-400);
  --ds-color-s-orange-50: #fff7ed;
  --ds-color-s-orange-100: #ffedd5;
  --ds-color-s-orange-200: #ffd6a5;
  --ds-color-s-orange-300: #ffbb72;
  --ds-color-s-orange-400: #fd943a;
  --ds-color-s-orange-500: #fc7513;
  --ds-color-s-orange-600: #ed5909;
  --ds-color-s-orange-700: #c4420a;
  --ds-color-s-orange-800: #9c3410;
  --ds-color-s-orange-900: #7d2d11;
  --ds-color-s-orange-50-900: var(--ds-color-s-orange-50);
  --ds-color-s-orange-100-800: var(--ds-color-s-orange-100);
  --ds-color-s-orange-200-700: var(--ds-color-s-orange-200);
  --ds-color-s-orange-300-600: var(--ds-color-s-orange-300);
  --ds-color-s-orange-400-500: var(--ds-color-s-orange-400);
  --ds-color-s-orange-500-400: var(--ds-color-s-orange-500);
  --ds-color-s-orange-600-300: var(--ds-color-s-orange-600);
  --ds-color-s-orange-700-200: var(--ds-color-s-orange-700);
  --ds-color-s-orange-800-100: var(--ds-color-s-orange-800);
  --ds-color-s-orange-900-50: var(--ds-color-s-orange-900);
  --ds-color-s-orange-default: var(--ds-color-s-orange-300);
  --ds-color-s-yellow-50: #fefee8;
  --ds-color-s-yellow-100: #fdffb6;
  --ds-color-s-yellow-200: #fffe88;
  --ds-color-s-yellow-300: #fff744;
  --ds-color-s-yellow-400: #fee911;
  --ds-color-s-yellow-500: #eecf04;
  --ds-color-s-yellow-600: #cda201;
  --ds-color-s-yellow-700: #a47404;
  --ds-color-s-yellow-800: #875b0c;
  --ds-color-s-yellow-900: #734a10;
  --ds-color-s-yellow-50-900: var(--ds-color-s-yellow-50);
  --ds-color-s-yellow-100-800: var(--ds-color-s-yellow-100);
  --ds-color-s-yellow-200-700: var(--ds-color-s-yellow-200);
  --ds-color-s-yellow-300-600: var(--ds-color-s-yellow-300);
  --ds-color-s-yellow-400-500: var(--ds-color-s-yellow-400);
  --ds-color-s-yellow-500-400: var(--ds-color-s-yellow-500);
  --ds-color-s-yellow-600-300: var(--ds-color-s-yellow-600);
  --ds-color-s-yellow-700-200: var(--ds-color-s-yellow-700);
  --ds-color-s-yellow-800-100: var(--ds-color-s-yellow-800);
  --ds-color-s-yellow-900-50: var(--ds-color-s-yellow-900);
  --ds-color-s-yellow-default: var(--ds-color-s-yellow-200);
  --ds-color-s-green-50: #f2ffee;
  --ds-color-s-green-100: #deffd8;
  --ds-color-s-green-200: #caffbf;
  --ds-color-s-green-300: #8dfd78;
  --ds-color-s-green-400: #53f236;
  --ds-color-s-green-500: #2cdb0c;
  --ds-color-s-green-600: #1eb603;
  --ds-color-s-green-700: #1b8e07;
  --ds-color-s-green-800: #1a700b;
  --ds-color-s-green-900: #165b0c;
  --ds-color-s-green-50-900: var(--ds-color-s-green-50);
  --ds-color-s-green-100-800: var(--ds-color-s-green-100);
  --ds-color-s-green-200-700: var(--ds-color-s-green-200);
  --ds-color-s-green-300-600: var(--ds-color-s-green-300);
  --ds-color-s-green-400-500: var(--ds-color-s-green-400);
  --ds-color-s-green-500-400: var(--ds-color-s-green-500);
  --ds-color-s-green-600-300: var(--ds-color-s-green-600);
  --ds-color-s-green-700-200: var(--ds-color-s-green-700);
  --ds-color-s-green-800-100: var(--ds-color-s-green-800);
  --ds-color-s-green-900-50: var(--ds-color-s-green-900);
  --ds-color-s-green-default: var(--ds-color-s-green-300);
  --ds-color-s-blue-50: #eff5ff;
  --ds-color-s-blue-100: #dae7ff;
  --ds-color-s-blue-200: #bed5ff;
  --ds-color-s-blue-300: #a0c4ff;
  --ds-color-s-blue-400: #5d96fd;
  --ds-color-s-blue-500: #376ffa;
  --ds-color-s-blue-600: #214fef;
  --ds-color-s-blue-700: #193adc;
  --ds-color-s-blue-800: #1b31b2;
  --ds-color-s-blue-900: #1c2f8c;
  --ds-color-s-blue-50-900: var(--ds-color-s-blue-50);
  --ds-color-s-blue-100-800: var(--ds-color-s-blue-100);
  --ds-color-s-blue-200-700: var(--ds-color-s-blue-200);
  --ds-color-s-blue-300-600: var(--ds-color-s-blue-300);
  --ds-color-s-blue-400-500: var(--ds-color-s-blue-400);
  --ds-color-s-blue-500-400: var(--ds-color-s-blue-500);
  --ds-color-s-blue-600-300: var(--ds-color-s-blue-600);
  --ds-color-s-blue-700-200: var(--ds-color-s-blue-700);
  --ds-color-s-blue-800-100: var(--ds-color-s-blue-800);
  --ds-color-s-blue-900-50: var(--ds-color-s-blue-900);
  --ds-color-s-blue-default: var(--ds-color-s-blue-400);
  --ds-color-s-purple-50: #f4f3ff;
  --ds-color-s-purple-100: #ebe8ff;
  --ds-color-s-purple-200: #d9d5ff;
  --ds-color-s-purple-300: #bdb2ff;
  --ds-color-s-purple-400: #9d88fd;
  --ds-color-s-purple-500: #7e58fa;
  --ds-color-s-purple-600: #6f35f2;
  --ds-color-s-purple-700: #6023de;
  --ds-color-s-purple-800: #501dba;
  --ds-color-s-purple-900: #431a98;
  --ds-color-s-purple-50-900: var(--ds-color-s-purple-50);
  --ds-color-s-purple-100-800: var(--ds-color-s-purple-100);
  --ds-color-s-purple-200-700: var(--ds-color-s-purple-200);
  --ds-color-s-purple-300-600: var(--ds-color-s-purple-300);
  --ds-color-s-purple-400-500: var(--ds-color-s-purple-400);
  --ds-color-s-purple-500-400: var(--ds-color-s-purple-500);
  --ds-color-s-purple-600-300: var(--ds-color-s-purple-600);
  --ds-color-s-purple-700-200: var(--ds-color-s-purple-700);
  --ds-color-s-purple-800-100: var(--ds-color-s-purple-800);
  --ds-color-s-purple-900-50: var(--ds-color-s-purple-900);
  --ds-color-s-purple-default: var(--ds-color-s-purple-400);
  --ds-color-s-pink-50: #fff4ff;
  --ds-color-s-pink-100: #ffe7ff;
  --ds-color-s-pink-200: #ffc6ff;
  --ds-color-s-pink-300: #fea9fa;
  --ds-color-s-pink-400: #fc76f4;
  --ds-color-s-pink-500: #f342e7;
  --ds-color-s-pink-600: #d722c8;
  --ds-color-s-pink-700: #b219a1;
  --ds-color-s-pink-800: #921684;
  --ds-color-s-pink-900: #771869;
  --ds-color-s-pink-50-900: var(--ds-color-s-pink-50);
  --ds-color-s-pink-100-800: var(--ds-color-s-pink-100);
  --ds-color-s-pink-200-700: var(--ds-color-s-pink-200);
  --ds-color-s-pink-300-600: var(--ds-color-s-pink-300);
  --ds-color-s-pink-400-500: var(--ds-color-s-pink-400);
  --ds-color-s-pink-500-400: var(--ds-color-s-pink-500);
  --ds-color-s-pink-600-300: var(--ds-color-s-pink-600);
  --ds-color-s-pink-700-200: var(--ds-color-s-pink-700);
  --ds-color-s-pink-800-100: var(--ds-color-s-pink-800);
  --ds-color-s-pink-900-50: var(--ds-color-s-pink-900);
  --ds-color-s-pink-default: var(--ds-color-s-pink-300);
  --ds-color-elevate: #ffffff;
  --ds-color-overlay: rgba(0,0,0,0.3);
  --ds-color-error: #dd1367;
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;
  --ds-color-transparent: transparent;
  --ds-color-current: currentColor;
  --ds-color-inherit: inherit;
  --ds-color-stone-300: #d6d3d1;
  --ds-color-slate-200: #e2e8f0;
  --ds-color-legacy-gray-1: #333333;
  --ds-color-legacy-gray-3: #828282;
  --ds-color-legacy-gray-5: #e0e0e0;
  --ds-color-legacy-density: #4d525b;
  --ds-color-legacy-red: #eb5757;
  --ds-color-legacy-orange: #f2994a;
  --ds-color-legacy-frostbite: #4c505b;
  --ds-color-legacy-gray-text: #828a90;
  --ds-color-legacy-inactive-text: #b5b7bb;
  --ds-color-legacy-neptune-light: #d4f6f7;
  --ds-color-legacy-galaxy: #34535b;
  --ds-color-legacy-glacier: #8fdecb;
  --ds-color-legacy-glacier-light: #edfcfd;
  --ds-color-legacy-cosmos: #f3f4f6;
  --ds-color-legacy-jupiter: #eeeff1;
  --ds-color-legacy-light-grey: #fafafa;
  --ds-color-legacy-border: #dfdfdf;
  --ds-color-legacy-asteroid: #528693;
  --ds-color-legacy-link-hover: rgba(0, 0, 0, 0.02);
  --ds-color-legacy-link-active: rgba(0, 0, 0, 0.04);
  --ds-color-legacy-enrolment: #1F1934;
  --ds-font-family-sans: Roboto, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --ds-font-family-serif: "Roboto Slab", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --ds-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-bold: 700;
  --ds-font-size-2xs: 0.625rem;
  --ds-font-size-xs: 0.75rem;
  --ds-font-size-sm: 0.875rem;
  --ds-font-size-base: 1rem;
  --ds-font-size-lg: 1.125rem;
  --ds-font-size-xl: 1.25rem;
  --ds-font-size-2xl: 1.5rem;
  --ds-font-size-3xl: 1.875rem;
  --ds-font-size-4xl: 2.25rem;
  --ds-font-size-5xl: 3rem;
  --ds-font-size-native-control: 13.3333px;
  --ds-font-size-ua-h2: 1.5em;
  --ds-font-size-ua-h4: 1em;
  --ds-font-size-ua-h5: 0.83em;
  --ds-font-size-ua-h1: 2em;
  --ds-font-line-height-3: 0.75rem;
  --ds-font-line-height-4: 1rem;
  --ds-font-line-height-5: 1.25rem;
  --ds-font-line-height-6: 1.5rem;
  --ds-font-line-height-7: 1.75rem;
  --ds-font-line-height-8: 2rem;
  --ds-font-line-height-9: 2.25rem;
  --ds-font-line-height-10: 2.5rem;
  --ds-font-line-height-none: 1;
  --ds-font-line-height-tight: 1.25;
  --ds-font-line-height-snug: 1.375;
  --ds-font-line-height-normal: 1.5;
  --ds-font-line-height-relaxed: 1.625;
  --ds-font-letter-spacing-normal: 0em;
  --ds-font-letter-spacing-wide: 0.025em;
  --ds-font-letter-spacing-tight: -0.025em;
  --ds-font-style-italic: italic;
  --ds-font-style-normal: normal;
  --ds-font-numeric-tabular: tabular-nums;
  --ds-font-transform-uppercase: uppercase;
  --ds-space-0: 0px;
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-7: 1.75rem;
  --ds-space-8: 2rem;
  --ds-space-9: 2.25rem;
  --ds-space-10: 2.5rem;
  --ds-space-11: 2.75rem;
  --ds-space-12: 3rem;
  --ds-space-14: 3.5rem;
  --ds-space-16: 4rem;
  --ds-space-20: 5rem;
  --ds-space-24: 6rem;
  --ds-space-px: 0.0625rem;
  --ds-space-0_5: 0.125rem;
  --ds-space-1_5: 0.375rem;
  --ds-space-2_5: 0.625rem;
  --ds-space-ua-paragraph-margin-block: 1em;
  --ds-space-ua-h2-margin-block: 0.83em;
  --ds-space-ua-h4-margin-block: 1.33em;
  --ds-space-ua-h1-margin-block: 0.67em;
  --ds-size-container-3xs: 16rem;
  --ds-size-container-xs: 20rem;
  --ds-size-container-sm: 24rem;
  --ds-size-container-md: 28rem;
  --ds-size-container-lg: 32rem;
  --ds-size-container-xl: 36rem;
  --ds-size-container-2xl: 42rem;
  --ds-size-container-3xl: 48rem;
  --ds-size-container-4xl: 56rem;
  --ds-size-container-5xl: 64rem;
  --ds-size-container-7xl: 80rem;
  --ds-size-container-prose: 65ch;
  --ds-size-container-6xl: 72rem;
  --ds-size-screen-height: 100vh;
  --ds-breakpoint-sm: 40rem;
  --ds-breakpoint-md: 48rem;
  --ds-breakpoint-lg: 64rem;
  --ds-breakpoint-xl: 80rem;
  --ds-breakpoint-2xl: 96rem;
  --ds-breakpoint-wide: 1920px;
  --ds-radius-none: 0px;
  --ds-radius-xs: 2px;
  --ds-radius-sm: 4px;
  --ds-radius-md: 6px;
  --ds-radius-lg: 8px;
  --ds-radius-xl: 12px;
  --ds-radius-2xl: 16px;
  --ds-radius-3xl: 24px;
  --ds-radius-full: 9999px;
  --ds-border-width-0: 0px;
  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;
  --ds-border-width-4: 4px;
  --ds-border-style-solid: solid;
  --ds-border-style-dashed: dashed;
  --ds-border-style-none: none;
  --ds-shadow-none: none;
  --ds-shadow-xs: 0px 1px 2px 0px rgb(0 0 0 / 0.05);
  --ds-shadow-default: 0px 2px 4px 0px rgba(130, 138, 144, 0.15);
  --ds-shadow-md: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
  --ds-shadow-lg: 0px 10px 15px -3px rgb(0 0 0 / 0.1), 0px 4px 6px -4px rgb(0 0 0 / 0.1);
  --ds-shadow-tooltip: 0px 10px 18px -10px hsl(206 22% 7% / 15%), 0px 2px 20px -15px hsl(206 22% 7% / 10%);
  --ds-shadow-thumb: 0px 1px 2px 0px rgba(40, 41, 61, 0.2), 0px 2px 4px 0px rgba(96, 97, 112, 0.2);
  --ds-shadow-drop-hover: drop-shadow(0px 3px 4px rgba(77, 82, 91, 0.1));
  --ds-shadow-drop-active: drop-shadow(0px 1px 1px rgba(76, 79, 90, 0.1));
  --ds-opacity-0: 0;
  --ds-opacity-30: 0.3;
  --ds-opacity-40: 0.4;
  --ds-opacity-50: 0.5;
  --ds-opacity-60: 0.6;
  --ds-opacity-80: 0.8;
  --ds-opacity-100: 1;
  --ds-duration-0: 0ms;
  --ds-duration-75: 75ms;
  --ds-duration-100: 100ms;
  --ds-duration-150: 150ms;
  --ds-duration-200: 200ms;
  --ds-duration-300: 300ms;
  --ds-duration-400: 400ms;
  --ds-duration-500: 500ms;
  --ds-duration-1000: 1000ms;
  --ds-duration-2000: 2000ms;
  --ds-easing-linear: cubic-bezier(0, 0, 1, 1);
  --ds-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-easing-out: cubic-bezier(0, 0, 0.58, 1);
  --ds-easing-in: cubic-bezier(0.42, 0, 1, 1);
  --ds-easing-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-easing-pulse: cubic-bezier(0.4, 0, 0.6, 1);
  --ds-motion-distance-10: 10px;
  --ds-motion-distance-24: 24px;
  --ds-motion-keyframes-collapsible-open: collapsible-open;
  --ds-motion-keyframes-collapsible-close: collapsible-close;
  --ds-motion-keyframes-spin: spin;
  --ds-motion-keyframes-pulse: pulse;
  --ds-motion-keyframes-ping: ping;
  --ds-motion-keyframes-fade-slide: slideDown;
  --ds-motion-keyframes-select-bar-in: select-bar-in;
  --ds-motion-keyframes-shake: shake;
  --ds-motion-keyframes-pop: pop;
  --ds-motion-keyframes-reveal: reveal-time-value-animation;
  --ds-motion-keyframes-fade-slide-up: slideUp;
  --ds-motion-keyframes-processing-slide: animate-processing-slide;
  --ds-motion-keyframes-processing-rotate: animate-processing-rotate;
  --ds-motion-scale-pressed: 0.95;
  --ds-z-0: 0;
  --ds-z-1: 1;
  --ds-z-2: 2;
  --ds-z-3: 3;
  --ds-z-4: 4;
  --ds-z-5: 5;
  --ds-z-10: 10;
  --ds-z-20: 20;
  --ds-z-30: 30;
  --ds-z-40: 40;
  --ds-z-50: 50;
  --ds-z-99: 99;
  --ds-z-100: 100;
  --ds-z-101: 101;
  --ds-z-110: 110;
  --ds-z-150: 150;
  --ds-z-neg-1: -1;
  --ds-z-max: 999999999;
  --ds-icon-size-10: 10px;
  --ds-icon-size-12: 12px;
  --ds-icon-size-14: 14px;
  --ds-icon-size-16: 16px;
  --ds-icon-size-18: 18px;
  --ds-icon-size-20: 20px;
  --ds-icon-size-22: 22px;
  --ds-icon-size-25: 25px;
  --ds-icon-size-30: 30px;
  --ds-icon-size-36: 36px;
  --ds-icon-size-40: 40px;
  /* ---- semantic ---- */
  --ds-color-text-default: var(--ds-color-gray-700-200);
  --ds-color-text-strong: var(--ds-color-gray-800-100);
  --ds-color-text-secondary: var(--ds-color-gray-600-300);
  --ds-color-text-muted: var(--ds-color-gray-500-400);
  --ds-color-text-subtle: var(--ds-color-gray-400-500);
  --ds-color-text-disabled: var(--ds-color-gray-300-600);
  --ds-color-text-placeholder: var(--ds-color-gray-300-600);
  --ds-color-text-inverse: var(--ds-color-white);
  --ds-color-text-link: var(--ds-color-inherit);
  --ds-color-text-accent: var(--ds-color-purple-600-300);
  --ds-color-text-accent-muted: var(--ds-color-purple-500-400);
  --ds-color-text-accent-strong: var(--ds-color-purple-800-100);
  --ds-color-text-danger: var(--ds-color-pink-600-300);
  --ds-color-text-error: var(--ds-color-error);
  --ds-color-text-warning: var(--ds-color-s-orange-500-400);
  --ds-color-text-success: var(--ds-color-s-green-600-300);
  --ds-color-text-info: var(--ds-color-s-blue-600-300);
  --ds-color-text-selected: var(--ds-color-green-500-400);
  --ds-color-surface-canvas: var(--ds-color-gray-50-900);
  --ds-color-surface-raised: var(--ds-color-elevate);
  --ds-color-surface-subtle: var(--ds-color-purple-50-900);
  --ds-color-surface-sunken: var(--ds-color-purple-100-800);
  --ds-color-surface-neutral: var(--ds-color-gray-100-800);
  --ds-color-surface-hover: var(--ds-color-purple-50-900);
  --ds-color-surface-hover-strong: var(--ds-color-purple-100-800);
  --ds-color-surface-pressed: var(--ds-color-purple-100-800);
  --ds-color-surface-item-hover: var(--ds-color-gray-50-900);
  --ds-color-surface-overlay: var(--ds-color-overlay);
  --ds-color-surface-accent-subtle: var(--ds-color-cyan-50-900);
  --ds-color-surface-danger-subtle: var(--ds-color-pink-50-900);
  --ds-color-border-default: var(--ds-color-purple-100-800);
  --ds-color-border-strong: var(--ds-color-purple-200-700);
  --ds-color-border-emphasis: var(--ds-color-purple-300-600);
  --ds-color-border-hover: var(--ds-color-purple-200-700);
  --ds-color-border-focus: var(--ds-color-purple-200-700);
  --ds-color-border-neutral: var(--ds-color-gray-100-800);
  --ds-color-border-neutral-strong: var(--ds-color-gray-200-700);
  --ds-color-border-danger: var(--ds-color-error);
  --ds-color-border-inverse: var(--ds-color-white);
  --ds-color-interactive-primary-bg: var(--ds-color-cyan-100-800);
  --ds-color-interactive-primary-bg-pressed: var(--ds-color-cyan-200-700);
  --ds-color-interactive-primary-border-hover: var(--ds-color-cyan-300-600);
  --ds-color-interactive-primary-fg: var(--ds-color-gray-default);
  --ds-color-interactive-secondary-bg: var(--ds-color-purple-50-900);
  --ds-color-interactive-secondary-bg-pressed: var(--ds-color-purple-100-800);
  --ds-color-interactive-secondary-fg: var(--ds-color-gray-default);
  --ds-color-interactive-danger-fg: var(--ds-color-pink-600-300);
  --ds-color-interactive-danger-border-hover: var(--ds-color-pink-300-600);
  --ds-color-interactive-disabled-fg: var(--ds-color-gray-300-600);
  --ds-color-interactive-drop-target-border: var(--ds-color-cyan-400-500);
  --ds-color-control-checked-bg: var(--ds-color-cyan-200-700);
  --ds-color-control-checked-border: var(--ds-color-cyan-700-200);
  --ds-color-focus-ring: var(--ds-color-cyan-700-200);
  --ds-color-focus-outline: var(--ds-color-current);
  --ds-color-focus-native: #005fcc;
  --ds-color-status-positive-bg: var(--ds-color-s-green-100-800);
  --ds-color-status-positive-fg: var(--ds-color-s-green-600-300);
  --ds-color-status-positive-dot: var(--ds-color-s-green-600-300);
  --ds-color-status-caution-bg: var(--ds-color-s-orange-100-800);
  --ds-color-status-caution-fg: var(--ds-color-s-orange-600-300);
  --ds-color-status-negative-bg: var(--ds-color-pink-100-800);
  --ds-color-status-negative-fg: var(--ds-color-pink-600-300);
  --ds-color-status-neutral-bg: var(--ds-color-gray-100-800);
  --ds-color-status-neutral-fg: var(--ds-color-gray-600-300);
  --ds-color-status-info-bg: var(--ds-color-s-blue-50-900);
  --ds-color-status-info-fg: var(--ds-color-s-blue-800-100);
  --ds-color-feedback-success-bg: var(--ds-color-cyan-100-800);
  --ds-color-feedback-success-border: var(--ds-color-cyan-300-600);
  --ds-color-feedback-success-fg: var(--ds-color-green-600-300);
  --ds-color-feedback-error-bg: var(--ds-color-pink-100-800);
  --ds-color-feedback-error-border: var(--ds-color-pink-200-700);
  --ds-color-feedback-error-fg: var(--ds-color-pink-700-200);
  --ds-color-feedback-warning-bg: var(--ds-color-orange-100-800);
  --ds-color-feedback-warning-border: var(--ds-color-orange-200-700);
  --ds-color-feedback-warning-fg: var(--ds-color-green-600-300);
  --ds-color-feedback-info-bg: var(--ds-color-white);
  --ds-color-feedback-info-border: var(--ds-color-purple-200-700);
  --ds-color-feedback-info-fg: var(--ds-color-green-600-300);
  --ds-color-feedback-field-warning-fg: var(--ds-color-orange-200-700);
  --ds-color-selection-media-border: var(--ds-color-cyan-400-500);
  --ds-color-selection-asset-border: var(--ds-color-s-green-500-400);
  --ds-color-selection-highlight-bg: var(--ds-color-purple-100-800);
  --ds-color-selection-hover-border: var(--ds-color-purple-400-500);
  --ds-color-selection-nav-bg: var(--ds-color-legacy-neptune-light);
  --ds-color-selection-nav-border: var(--ds-color-legacy-asteroid);
  --ds-color-selection-nav-hover-bg: var(--ds-color-legacy-cosmos);
  --ds-color-selection-list-bg: rgba(0, 0, 0, 0.04);
  --ds-color-selection-list-hover-bg: rgba(0, 0, 0, 0.02);
  --ds-color-icon-stroke: var(--ds-color-green-500);
  --ds-color-icon-stroke-brand: var(--ds-color-purple-800);
  --ds-color-icon-fill: var(--ds-color-cyan-100);
  --ds-color-icon-fill-warning: var(--ds-color-orange-200);
  --ds-color-icon-stroke-muted: var(--ds-color-gray-400);
  --ds-color-icon-stroke-caret: var(--ds-color-gray-500);
  --ds-color-icon-highlight: var(--ds-color-white);
  --ds-color-icon-shortcut: var(--ds-color-orange-200);
  --ds-color-icon-current: var(--ds-color-current);
  --ds-color-icon-fill-error: var(--ds-color-pink-600);
  --ds-color-structure-1-bg: var(--ds-color-s-purple-100);
  --ds-color-structure-1-fg: var(--ds-color-s-purple-500);
  --ds-color-structure-1-border: var(--ds-color-s-purple-200);
  --ds-color-structure-2-bg: var(--ds-color-s-green-100);
  --ds-color-structure-2-fg: var(--ds-color-s-green-600);
  --ds-color-structure-2-border: var(--ds-color-s-green-300);
  --ds-color-structure-3-bg: var(--ds-color-s-blue-100);
  --ds-color-structure-3-fg: var(--ds-color-s-blue-500);
  --ds-color-structure-3-border: var(--ds-color-s-blue-200);
  --ds-color-structure-4-bg: var(--ds-color-green-100);
  --ds-color-structure-4-fg: var(--ds-color-green-500);
  --ds-color-structure-4-border: var(--ds-color-green-200);
  --ds-color-structure-5-bg: var(--ds-color-s-orange-100);
  --ds-color-structure-5-fg: var(--ds-color-s-orange-500);
  --ds-color-structure-5-border: var(--ds-color-s-orange-200);
  --ds-color-structure-6-bg: var(--ds-color-s-pink-100);
  --ds-color-structure-6-fg: var(--ds-color-s-pink-500);
  --ds-color-structure-6-border: var(--ds-color-s-pink-200);
  --ds-color-structure-7-bg: var(--ds-color-cyan-100);
  --ds-color-structure-7-fg: var(--ds-color-cyan-600);
  --ds-color-structure-7-border: var(--ds-color-cyan-300);
  --ds-color-chart-series-1: var(--ds-color-s-purple-500);
  --ds-color-chart-series-2: var(--ds-color-s-green-500);
  --ds-color-chart-series-3: var(--ds-color-s-blue-500);
  --ds-color-chart-series-4: var(--ds-color-green-500);
  --ds-color-chart-series-5: var(--ds-color-s-orange-500);
  --ds-color-chart-series-6: var(--ds-color-s-pink-500);
  --ds-color-chart-series-7: var(--ds-color-cyan-500);
  --ds-color-chart-sequential-purple-1: var(--ds-color-s-purple-900);
  --ds-color-chart-sequential-purple-2: var(--ds-color-s-purple-800);
  --ds-color-chart-sequential-purple-3: var(--ds-color-s-purple-700);
  --ds-color-chart-sequential-purple-4: var(--ds-color-s-purple-600);
  --ds-color-chart-sequential-purple-5: var(--ds-color-s-purple-500);
  --ds-color-chart-sequential-purple-6: var(--ds-color-s-purple-400);
  --ds-color-chart-sequential-purple-7: var(--ds-color-s-purple-300);
  --ds-color-chart-sequential-purple-8: var(--ds-color-s-purple-200);
  --ds-color-chart-sequential-purple-9: var(--ds-color-s-purple-100);
  --ds-color-chart-sequential-pink-1: var(--ds-color-s-pink-800);
  --ds-color-chart-sequential-pink-2: var(--ds-color-s-pink-700);
  --ds-color-chart-sequential-pink-3: var(--ds-color-s-pink-600);
  --ds-color-chart-sequential-pink-4: var(--ds-color-s-pink-500);
  --ds-color-chart-sequential-pink-5: var(--ds-color-s-pink-400);
  --ds-color-chart-sequential-pink-6: var(--ds-color-s-pink-300);
  --ds-color-chart-sequential-pink-7: var(--ds-color-s-pink-200);
  --ds-color-chart-sequential-pink-8: var(--ds-color-s-pink-100);
  --ds-color-chart-sequential-green-1: var(--ds-color-green-200);
  --ds-color-chart-sequential-green-2: var(--ds-color-green-300);
  --ds-color-chart-sequential-green-3: var(--ds-color-green-400);
  --ds-color-chart-sequential-green-4: var(--ds-color-green-500);
  --ds-color-chart-sequential-green-5: var(--ds-color-green-600);
  --ds-color-chart-sequential-green-6: var(--ds-color-green-700);
  --ds-color-chart-sequential-green-7: var(--ds-color-green-800);
  --ds-color-placeholder-native: #757575;
  --ds-color-illustration-stroke: var(--ds-color-green-500);
  --ds-color-illustration-stroke-on-dark: #201934;
  --ds-color-illustration-surface-dark: #332c51;
  --ds-color-illustration-surface-dark-deep: #251f3d;
  --ds-color-illustration-accent-pink: var(--ds-color-pink-500);
  --ds-color-illustration-accent-cyan: var(--ds-color-cyan-400);
  --ds-space-inset-field: var(--ds-space-3);
  --ds-space-inset-card: var(--ds-space-4);
  --ds-space-inset-dialog: var(--ds-space-14);
  --ds-space-inset-menu-item-x: var(--ds-space-4);
  --ds-space-inset-tooltip-y: var(--ds-space-2);
  --ds-space-inset-tooltip-x: var(--ds-space-4);
  --ds-space-inset-aside-x: var(--ds-space-4);
  --ds-space-inset-aside-header-left: var(--ds-space-6);
  --ds-space-inset-aside-header-right: var(--ds-space-4);
  --ds-space-inset-toolbar-end: var(--ds-space-4);
  --ds-space-inset-tree-row-y: var(--ds-space-1);
  --ds-space-inset-tree-row-left: var(--ds-space-6);
  --ds-space-inset-tree-row-right: var(--ds-space-10);
  --ds-space-inset-chip-x: var(--ds-space-2);
  --ds-space-inset-page-x: var(--ds-space-6);
  --ds-space-stack-2xs: var(--ds-space-0_5);
  --ds-space-stack-xs: var(--ds-space-1);
  --ds-space-stack-sm: var(--ds-space-2);
  --ds-space-stack-md: var(--ds-space-4);
  --ds-space-stack-lg: var(--ds-space-6);
  --ds-space-stack-xl: var(--ds-space-8);
  --ds-space-stack-page-top: var(--ds-space-10);
  --ds-space-stack-state-offset: 10rem;
  --ds-space-inline-2xs: var(--ds-space-0_5);
  --ds-space-inline-xs: var(--ds-space-1);
  --ds-space-inline-sm: var(--ds-space-2);
  --ds-space-inline-md: var(--ds-space-4);
  --ds-space-inline-lg: var(--ds-space-6);
  --ds-size-control-2xs: var(--ds-space-5);
  --ds-size-control-xs: var(--ds-space-6);
  --ds-size-control-sm: var(--ds-space-9);
  --ds-size-control-md: var(--ds-space-11);
  --ds-size-control-lg: var(--ds-space-14);
  --ds-size-field-sm: var(--ds-space-8);
  --ds-size-field-md: var(--ds-space-10);
  --ds-size-menu-item-height: var(--ds-size-field-md);
  --ds-size-tree-row: 36px;
  --ds-size-table-header: 26px;
  --ds-size-table-row: 34px;
  --ds-size-dialog-sm: var(--ds-size-container-sm);
  --ds-size-dialog-md: var(--ds-size-container-md);
  --ds-size-dialog-lg: var(--ds-size-container-lg);
  --ds-size-dialog-xl: var(--ds-size-container-2xl);
  --ds-size-dialog-max: 800px;
  --ds-radius-control: var(--ds-radius-sm);
  --ds-radius-card: var(--ds-radius-md);
  --ds-radius-container: var(--ds-radius-lg);
  --ds-radius-table: var(--ds-radius-xl);
  --ds-radius-feature: var(--ds-radius-2xl);
  --ds-radius-pill: var(--ds-radius-full);
  --ds-radius-indicator: var(--ds-radius-xs);
  --ds-radius-flush: var(--ds-radius-none);
  --ds-border-width-hairline: var(--ds-border-width-1);
  --ds-border-width-emphasis: var(--ds-border-width-2);
  --ds-border-width-accent: var(--ds-border-width-4);
  --ds-border-structural: var(--ds-border-width-hairline) var(--ds-border-style-solid) var(--ds-color-border-default);
  --ds-border-field: var(--ds-border-width-hairline) var(--ds-border-style-solid) var(--ds-color-border-strong);
  --ds-border-subtle: var(--ds-border-width-hairline) var(--ds-border-style-solid) var(--ds-color-border-neutral);
  --ds-border-placeholder: var(--ds-border-width-hairline) var(--ds-border-style-dashed) var(--ds-color-border-strong);
  --ds-border-hover-outline-offset: -1px;
  --ds-border-hover-outline: var(--ds-border-width-hairline) var(--ds-border-style-solid) var(--ds-color-border-hover);
  --ds-opacity-hidden: var(--ds-opacity-0);
  --ds-opacity-visible: var(--ds-opacity-100);
  --ds-opacity-disabled: var(--ds-opacity-40);
  --ds-opacity-dragging: var(--ds-opacity-40);
  --ds-opacity-muted: var(--ds-opacity-50);
  --ds-opacity-dimmed: var(--ds-opacity-60);
  --ds-opacity-busy: var(--ds-opacity-80);
  --ds-opacity-scrim: var(--ds-opacity-30);
  --ds-duration-instant: var(--ds-duration-75);
  --ds-duration-fast: var(--ds-duration-100);
  --ds-duration-base: var(--ds-duration-150);
  --ds-duration-moderate: var(--ds-duration-200);
  --ds-duration-slow: var(--ds-duration-300);
  --ds-duration-emphasis: var(--ds-duration-400);
  --ds-duration-deliberate: var(--ds-duration-500);
  --ds-duration-loop: var(--ds-duration-2000);
  --ds-easing-standard: var(--ds-easing-in-out);
  --ds-easing-enter: var(--ds-easing-out);
  --ds-easing-exit: var(--ds-easing-in);
  --ds-easing-emphasized: var(--ds-easing-expo-out);
  --ds-motion-transition-interactive: var(--ds-duration-base) var(--ds-easing-standard) 0ms;
  --ds-motion-transition-interactive-duration: var(--ds-duration-base);
  --ds-motion-transition-interactive-timing-function: var(--ds-easing-standard);
  --ds-motion-transition-layout: var(--ds-duration-moderate) var(--ds-easing-standard) 0ms;
  --ds-motion-transition-layout-duration: var(--ds-duration-moderate);
  --ds-motion-transition-layout-timing-function: var(--ds-easing-standard);
  --ds-motion-animation-disclosure: var(--ds-duration-base) var(--ds-easing-enter) 0ms;
  --ds-motion-animation-disclosure-duration: var(--ds-duration-base);
  --ds-motion-animation-disclosure-timing-function: var(--ds-easing-enter);
  --ds-motion-animation-disclosure-name: var(--ds-motion-keyframes-collapsible-open), var(--ds-motion-keyframes-collapsible-close);
  --ds-motion-animation-menu-enter: var(--ds-duration-emphasis) var(--ds-easing-emphasized) 0ms 1 var(--ds-motion-keyframes-fade-slide);
  --ds-motion-animation-menu-enter-duration: var(--ds-duration-emphasis);
  --ds-motion-animation-menu-enter-timing-function: var(--ds-easing-emphasized);
  --ds-motion-animation-menu-enter-name: var(--ds-motion-keyframes-fade-slide);
  --ds-motion-animation-spinner: var(--ds-duration-loop) var(--ds-easing-linear) 0ms infinite var(--ds-motion-keyframes-spin);
  --ds-motion-animation-spinner-duration: var(--ds-duration-loop);
  --ds-motion-animation-spinner-timing-function: var(--ds-easing-linear);
  --ds-motion-animation-spinner-name: var(--ds-motion-keyframes-spin);
  --ds-motion-animation-spinner-iteration-count: infinite;
  --ds-z-below: var(--ds-z-neg-1);
  --ds-z-base: var(--ds-z-0);
  --ds-z-raised: var(--ds-z-1);
  --ds-z-sticky: var(--ds-z-10);
  --ds-z-float: var(--ds-z-20);
  --ds-z-dropdown: var(--ds-z-50);
  --ds-z-overlay: var(--ds-z-99);
  --ds-z-chrome: var(--ds-z-100);
  --ds-z-modal: var(--ds-z-100);
  --ds-z-popover: var(--ds-z-101);
  --ds-z-tooltip: var(--ds-z-100);
  --ds-z-above-chrome: var(--ds-z-101);
  --ds-z-toast: var(--ds-z-max);
  --ds-icon-size-2xs: var(--ds-icon-size-10);
  --ds-icon-size-xs: var(--ds-icon-size-12);
  --ds-icon-size-sm: var(--ds-icon-size-14);
  --ds-icon-size-md: var(--ds-icon-size-16);
  --ds-icon-size-lg: var(--ds-icon-size-18);
  --ds-icon-size-xl: var(--ds-icon-size-20);
  --ds-icon-size-native: var(--ds-icon-size-22);
  --ds-icon-size-2xl: var(--ds-icon-size-25);
  --ds-icon-size-3xl: var(--ds-icon-size-30);
  --ds-icon-size-4xl: var(--ds-icon-size-36);
  --ds-icon-size-hero: var(--ds-icon-size-40);
  --ds-typography-display-font-family: var(--ds-font-family-serif);
  --ds-typography-display-font-size: var(--ds-font-size-3xl);
  --ds-typography-display-font-weight: var(--ds-font-weight-bold);
  --ds-typography-display-line-height: var(--ds-font-line-height-9);
  --ds-typography-display-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-heading-page-font-family: var(--ds-font-family-sans);
  --ds-typography-heading-page-font-size: var(--ds-font-size-3xl);
  --ds-typography-heading-page-font-weight: var(--ds-font-weight-bold);
  --ds-typography-heading-page-line-height: var(--ds-font-line-height-10);
  --ds-typography-heading-page-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-heading-dialog-font-family: var(--ds-font-family-serif);
  --ds-typography-heading-dialog-font-size: var(--ds-font-size-xl);
  --ds-typography-heading-dialog-font-weight: var(--ds-font-weight-bold);
  --ds-typography-heading-dialog-line-height: var(--ds-font-line-height-7);
  --ds-typography-heading-dialog-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-heading-section-font-family: var(--ds-font-family-sans);
  --ds-typography-heading-section-font-size: var(--ds-font-size-2xl);
  --ds-typography-heading-section-font-weight: var(--ds-font-weight-bold);
  --ds-typography-heading-section-line-height: var(--ds-font-line-height-8);
  --ds-typography-heading-section-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-heading-subsection-font-family: var(--ds-font-family-sans);
  --ds-typography-heading-subsection-font-size: var(--ds-font-size-base);
  --ds-typography-heading-subsection-font-weight: var(--ds-font-weight-medium);
  --ds-typography-heading-subsection-line-height: var(--ds-font-line-height-6);
  --ds-typography-heading-subsection-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-title-item-font-family: var(--ds-font-family-sans);
  --ds-typography-title-item-font-size: var(--ds-font-size-base);
  --ds-typography-title-item-font-weight: var(--ds-font-weight-bold);
  --ds-typography-title-item-line-height: var(--ds-font-line-height-6);
  --ds-typography-title-item-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-body-strong-font-family: var(--ds-font-family-sans);
  --ds-typography-body-strong-font-size: var(--ds-font-size-sm);
  --ds-typography-body-strong-font-weight: var(--ds-font-weight-medium);
  --ds-typography-body-strong-line-height: var(--ds-font-line-height-5);
  --ds-typography-body-strong-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-body-prose-font-family: var(--ds-font-family-sans);
  --ds-typography-body-prose-font-size: var(--ds-font-size-sm);
  --ds-typography-body-prose-font-weight: var(--ds-font-weight-regular);
  --ds-typography-body-prose-line-height: var(--ds-font-line-height-6);
  --ds-typography-body-prose-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-body-large-font-family: var(--ds-font-family-sans);
  --ds-typography-body-large-font-size: var(--ds-font-size-base);
  --ds-typography-body-large-font-weight: var(--ds-font-weight-regular);
  --ds-typography-body-large-line-height: var(--ds-font-line-height-6);
  --ds-typography-body-large-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-body-default-font-family: var(--ds-font-family-sans);
  --ds-typography-body-default-font-size: var(--ds-font-size-sm);
  --ds-typography-body-default-font-weight: var(--ds-font-weight-regular);
  --ds-typography-body-default-line-height: var(--ds-font-line-height-5);
  --ds-typography-body-default-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-label-strong-font-family: var(--ds-font-family-sans);
  --ds-typography-label-strong-font-size: var(--ds-font-size-xs);
  --ds-typography-label-strong-font-weight: var(--ds-font-weight-bold);
  --ds-typography-label-strong-line-height: var(--ds-font-line-height-4);
  --ds-typography-label-strong-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-label-default-font-family: var(--ds-font-family-sans);
  --ds-typography-label-default-font-size: var(--ds-font-size-xs);
  --ds-typography-label-default-font-weight: var(--ds-font-weight-medium);
  --ds-typography-label-default-line-height: var(--ds-font-line-height-4);
  --ds-typography-label-default-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-meta-font-family: var(--ds-font-family-sans);
  --ds-typography-meta-font-size: var(--ds-font-size-xs);
  --ds-typography-meta-font-weight: var(--ds-font-weight-regular);
  --ds-typography-meta-line-height: var(--ds-font-line-height-4);
  --ds-typography-meta-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-caption-font-family: var(--ds-font-family-sans);
  --ds-typography-caption-font-size: var(--ds-font-size-xs);
  --ds-typography-caption-font-weight: var(--ds-font-weight-regular);
  --ds-typography-caption-line-height: var(--ds-font-line-height-4);
  --ds-typography-caption-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-caption-font-style: var(--ds-font-style-italic);
  --ds-typography-micro-font-family: var(--ds-font-family-sans);
  --ds-typography-micro-font-size: var(--ds-font-size-2xs);
  --ds-typography-micro-font-weight: var(--ds-font-weight-medium);
  --ds-typography-micro-line-height: var(--ds-font-line-height-tight);
  --ds-typography-micro-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-overline-font-family: var(--ds-font-family-sans);
  --ds-typography-overline-font-size: var(--ds-font-size-2xs);
  --ds-typography-overline-font-weight: var(--ds-font-weight-bold);
  --ds-typography-overline-line-height: var(--ds-font-line-height-tight);
  --ds-typography-overline-letter-spacing: var(--ds-font-letter-spacing-wide);
  --ds-typography-overline-text-transform: var(--ds-font-transform-uppercase);
  --ds-typography-placeholder-font-family: var(--ds-font-family-sans);
  --ds-typography-placeholder-font-size: var(--ds-font-size-sm);
  --ds-typography-placeholder-font-weight: var(--ds-font-weight-regular);
  --ds-typography-placeholder-line-height: var(--ds-font-line-height-5);
  --ds-typography-placeholder-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-placeholder-font-style: var(--ds-font-style-italic);
  --ds-typography-input-value-font-family: var(--ds-font-family-sans);
  --ds-typography-input-value-font-size: var(--ds-font-size-base);
  --ds-typography-input-value-font-weight: var(--ds-font-weight-medium);
  --ds-typography-input-value-line-height: var(--ds-font-line-height-6);
  --ds-typography-input-value-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-button-font-family: var(--ds-font-family-sans);
  --ds-typography-button-font-size: var(--ds-font-size-sm);
  --ds-typography-button-font-weight: var(--ds-font-weight-bold);
  --ds-typography-button-line-height: var(--ds-font-line-height-5);
  --ds-typography-button-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-tree-item-font-family: var(--ds-font-family-sans);
  --ds-typography-tree-item-font-size: var(--ds-font-size-sm);
  --ds-typography-tree-item-font-weight: var(--ds-font-weight-regular);
  --ds-typography-tree-item-line-height: var(--ds-font-line-height-snug);
  --ds-typography-tree-item-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-table-header-font-family: var(--ds-typography-label-default-font-family);
  --ds-typography-table-header-font-size: var(--ds-typography-label-default-font-size);
  --ds-typography-table-header-font-weight: var(--ds-typography-label-default-font-weight);
  --ds-typography-table-header-line-height: var(--ds-typography-label-default-line-height);
  --ds-typography-table-header-letter-spacing: var(--ds-typography-label-default-letter-spacing);
  --ds-typography-code-font-family: var(--ds-font-family-mono);
  --ds-typography-code-font-size: var(--ds-font-size-xs);
  --ds-typography-code-font-weight: var(--ds-font-weight-regular);
  --ds-typography-code-line-height: var(--ds-font-line-height-4);
  --ds-typography-code-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-typography-numeric-emphasis-font-family: var(--ds-font-family-sans);
  --ds-typography-numeric-emphasis-font-size: var(--ds-font-size-lg);
  --ds-typography-numeric-emphasis-font-weight: var(--ds-font-weight-bold);
  --ds-typography-numeric-emphasis-line-height: var(--ds-font-line-height-7);
  --ds-typography-numeric-emphasis-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-layout-rail-width: 50px;
  --ds-layout-rail-width-expanded: 300px;
  --ds-layout-aside-width: 300px;
  --ds-layout-tree-width: 298px;
  --ds-layout-toolbar-height: 62px;
  --ds-layout-toolbar-gutter: 25px;
  --ds-layout-toolbar-height-with-secondary: 110px;
  --ds-layout-content-max-width: 1200px;
  --ds-layout-content-gutter: var(--ds-space-6);
  --ds-layout-settings-max-width: 800px;
  --ds-layout-settings-description-max-width: 700px;
  --ds-layout-dashboard-max-width: var(--ds-breakpoint-2xl);
  --ds-layout-panel-right-width: 320px;
  --ds-layout-panel-right-min-width: 240px;
  --ds-layout-panel-right-max-width: 640px;
  --ds-layout-prose-max-width: var(--ds-size-container-prose);
  --ds-layout-side-column-width: var(--ds-size-container-xs);
  --ds-layout-editor-bottom-runway: var(--ds-size-container-sm);
  --ds-elevation-flat: var(--ds-shadow-none);
  --ds-elevation-subtle: var(--ds-shadow-xs);
  --ds-elevation-raised: var(--ds-shadow-default);
  --ds-elevation-overlay: var(--ds-shadow-md);
  --ds-elevation-floating: var(--ds-shadow-lg);
  --ds-elevation-modal: var(--ds-shadow-default);
  --ds-elevation-toast: var(--ds-shadow-xs);
  --ds-elevation-tooltip: var(--ds-shadow-tooltip);
  /* ---- component ---- */
  --ds-component-tooltip-balloon-bg: #333333;
  --ds-component-tooltip-balloon-fg: #ffffff;
  --ds-component-tooltip-balloon-bg-error: var(--ds-color-pink-700);
  --ds-component-tooltip-balloon-width-sm: 80px;
  --ds-component-tooltip-balloon-width-md: 150px;
  --ds-component-tooltip-balloon-width-lg: 260px;
  --ds-component-tooltip-balloon-width-xl: 380px;
  --ds-component-tooltip-balloon-delay: 180ms;
  --ds-component-tooltip-balloon-radius: var(--ds-radius-sm);
  --ds-component-tooltip-balloon-padding-y: var(--ds-space-1_5);
  --ds-component-tooltip-balloon-padding-x: var(--ds-space-3);
  --ds-component-tooltip-balloon-offset: var(--ds-space-2_5);
  --ds-component-tooltip-balloon-arrow-size: 5px;
  --ds-component-tooltip-balloon-move: var(--ds-space-1);
  --ds-component-tooltip-balloon-z: var(--ds-z-10);
  --ds-component-tooltip-balloon-max-width: 600px;
  --ds-component-tooltip-balloon-duration: 180ms;
  --ds-component-data-grid-accent: var(--ds-color-s-pink-300);
  --ds-component-data-grid-accent-light: var(--ds-color-s-pink-50);
  --ds-component-data-grid-header-bg: var(--ds-color-purple-50);
  --ds-component-data-grid-header-bg-focus: var(--ds-color-s-pink-100);
  --ds-component-data-grid-header-fg-selected: var(--ds-color-s-pink-800);
  --ds-component-data-grid-header-fg: var(--ds-color-gray-500);
  --ds-component-data-grid-fg: var(--ds-color-gray-700);
  --ds-component-data-grid-border: var(--ds-color-gray-100);
  --ds-component-data-grid-bubble-bg: var(--ds-color-purple-50);
  --ds-component-data-grid-bubble-fg: var(--ds-color-purple-500);
  --ds-component-data-grid-row-odd: rgba(245,245,246,0.4);
  --ds-component-data-grid-search-hit: rgb(254,241,249);
  --ds-component-data-grid-locked-stripe: rgba(120,120,140,0.13);
  --ds-component-data-grid-cell-padding-x: var(--ds-space-2);
  --ds-component-data-grid-cell-padding-y: 3px;
  --ds-component-data-grid-bubble-bg-selected: #d8d5e288;
  --ds-component-data-grid-bubble-border: var(--ds-color-purple-200);
  --ds-component-data-grid-muted-fg: #9197a6;
  --ds-component-data-grid-cell-bg: var(--ds-color-white);
  --ds-component-data-grid-font-size: 0.8125rem;
  --ds-component-data-grid-editor-font-size: 0.8125rem;
  --ds-component-data-grid-header-font-size: 0.7rem;
  --ds-component-data-grid-header-font-weight: 600;
  --ds-component-data-grid-font-family: Inter, Roboto, -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Ubuntu, noto, arial, sans-serif;
  --ds-component-data-grid-line-height: 1.4;
  --ds-component-data-grid-marker-font-size: 9px;
  --ds-component-data-grid-text-medium: #737383;
  --ds-component-data-grid-text-light: #b2b2c0;
  --ds-component-data-grid-header-bg-hover: #efeff1;
  --ds-component-data-grid-group-header-fg: #313139bb;
  --ds-component-data-grid-highlight-changed: #ffde9933;
  --ds-component-data-grid-highlight-invalid: #eb178210;
  --ds-component-data-grid-highlight-drop: #73e5ed20;
  --ds-component-data-grid-row-height-roomy: var(--ds-space-10);
  --ds-component-data-grid-row-marker-width-sm: var(--ds-space-8);
  --ds-component-data-grid-row-marker-width-md: var(--ds-space-9);
  --ds-component-data-grid-row-marker-width-lg: var(--ds-space-11);
  --ds-component-data-grid-row-marker-width-xl: var(--ds-space-12);
  --ds-component-data-grid-column-min-width: 50px;
  --ds-component-data-grid-column-max-auto-width: 500px;
  --ds-component-data-grid-column-max-width: 2000px;
  --ds-component-data-grid-checkbox-size: var(--ds-icon-size-18);
  --ds-component-data-grid-hover-duration: 80ms;
  --ds-component-data-grid-hover-easing: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ds-component-data-grid-editor-shadow: 0px 0px 1px 0px rgba(62, 65, 86, 0.4), 0px 6px 12px 0px rgba(62, 65, 86, 0.15);
  --ds-component-data-grid-editor-padding-x: 8.5px;
  --ds-component-data-grid-editor-max-width: 400px;
  --ds-component-data-grid-editor-fade-duration: 60ms;
  --ds-component-data-grid-search-input-width: 220px;
  --ds-component-data-grid-search-status-font-size: 11px;
  --ds-component-data-grid-search-slide-distance: 400px;
  --ds-component-data-grid-menu-button-size: 30px;
  --ds-component-data-grid-header-menu-offset: 110px;
  --ds-component-data-grid-action-tooltip-offset: 30px;
  --ds-component-data-grid-locked-stripe-width: var(--ds-border-width-2);
  --ds-component-data-grid-locked-stripe-gap: var(--ds-space-2);
  --ds-component-data-grid-highlight-invalid-outline: var(--ds-color-pink-600);
  --ds-component-data-grid-highlight-changed-outline: var(--ds-color-orange-200);
  --ds-component-data-grid-highlight-drop-outline: var(--ds-color-cyan-300);
  --ds-component-hatch-default: rgba(120,120,140,0.25);
  --ds-component-striped-fg: var(--ds-color-purple-600-300);
  --ds-component-checkered-fg: var(--ds-color-gray-100);
  --ds-component-checkered-size: var(--ds-space-5);
  --ds-component-grid-paper-line: rgba(0,0,0,0.03);
  --ds-component-grid-paper-size: 15px;
  --ds-component-pipeline-minibar-stroke: var(--ds-color-purple-600);
  --ds-component-scrollbar-thumb: var(--ds-color-gray-200-700);
  --ds-component-scrollbar-tiny-size: 6px;
  --ds-component-switch-track-checked: var(--ds-color-cyan-100-800);
  --ds-component-switch-track-height-sm: var(--ds-space-6);
  --ds-component-switch-track-height-xs: var(--ds-space-5);
  --ds-component-switch-track-width-sm: 44px;
  --ds-component-switch-track-width-xs: 36px;
  --ds-component-switch-thumb-size-sm: var(--ds-space-4);
  --ds-component-switch-thumb-size-xs: 14px;
  --ds-component-switch-thumb-shadow: var(--ds-shadow-thumb);
  --ds-component-switch-border-checked: var(--ds-color-green-400-500);
  --ds-component-switch-thumb-translate-checked-sm: var(--ds-space-5);
  --ds-component-switch-thumb-translate-checked-xs: var(--ds-space-4);
  --ds-component-switch-thumb-translate-unset-sm: 11px;
  --ds-component-switch-thumb-translate-unset-xs: var(--ds-space-2);
  --ds-component-avatar-bg: var(--ds-color-cyan-200-700);
  --ds-component-avatar-size-md: 28px;
  --ds-component-avatar-size-lg: 36px;
  --ds-component-avatar-size-xl: 48px;
  --ds-component-avatar-size-2xl: 64px;
  --ds-component-avatar-fg: var(--ds-color-cyan-800-100);
  --ds-component-progress-fill: var(--ds-color-cyan-300-600);
  --ds-component-progress-track: var(--ds-color-gray-50-900);
  --ds-component-progress-fill-success: var(--ds-color-s-green-400-500);
  --ds-component-progress-label: var(--ds-color-cyan-500-400);
  --ds-component-progress-fill-subtle: var(--ds-color-cyan-100-800);
  --ds-component-progress-meter-usage: var(--ds-color-purple-600-300);
  --ds-component-progress-meter-prediction: var(--ds-color-s-orange-500-400);
  --ds-component-slider-range: var(--ds-color-gray-700-200);
  --ds-component-slider-width: 13rem;
  --ds-component-slider-length-vertical: 7rem;
  --ds-component-slider-thumb-size: var(--ds-space-4);
  --ds-component-slider-thumb-halo: color-mix(in oklab, var(--ds-color-gray-700-200) 30%, transparent);
  --ds-component-topic-dot-auto-1: var(--ds-color-s-red-300);
  --ds-component-topic-dot-auto-2: var(--ds-color-s-orange-200);
  --ds-component-topic-dot-auto-3: var(--ds-color-s-yellow-100);
  --ds-component-topic-dot-auto-4: var(--ds-color-s-green-200);
  --ds-component-topic-dot-auto-5: #9BF6FF;
  --ds-component-topic-dot-auto-6: var(--ds-color-s-blue-300);
  --ds-component-topic-dot-auto-7: var(--ds-color-s-purple-300);
  --ds-component-topic-dot-auto-8: var(--ds-color-s-pink-200);
  --ds-component-file-ribbon-1: #2f80ed;
  --ds-component-file-ribbon-2: #27ae60;
  --ds-component-file-ribbon-3: #56ccf2;
  --ds-component-file-ribbon-4: #9b51e0;
  --ds-component-file-ribbon-5: #eb5757;
  --ds-component-file-ribbon-6: #2d9cdb;
  --ds-component-file-ribbon-7: #219653;
  --ds-component-file-ribbon-8: #bb6bd9;
  --ds-component-file-ribbon-9: #f2994a;
  --ds-component-file-ribbon-10: #0e9da4;
  --ds-component-file-ribbon-11: #4c505b;
  --ds-component-file-ribbon-12: #828282;
  --ds-component-tooltip-typography-font-family: var(--ds-font-family-sans);
  --ds-component-tooltip-typography-font-size: var(--ds-font-size-xs);
  --ds-component-tooltip-typography-font-weight: var(--ds-font-weight-medium);
  --ds-component-tooltip-typography-line-height: var(--ds-font-line-height-none);
  --ds-component-tooltip-typography-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-component-tooltip-typography-font-style: var(--ds-font-style-italic);
  --ds-component-tooltip-shadow: var(--ds-elevation-tooltip);
  --ds-component-tooltip-delay: 800ms;
  --ds-component-tooltip-info-fg: var(--ds-color-text-muted);
  --ds-component-tooltip-side-offset: 5px;
  --ds-component-tooltip-grid-anchor-offset: 30px;
  --ds-component-tooltip-rich-width: var(--ds-size-container-3xs);
  --ds-component-tooltip-rich-max-width: 220px;
  --ds-component-dropdown-menu-item-typography-font-family: var(--ds-font-family-sans);
  --ds-component-dropdown-menu-item-typography-font-size: var(--ds-font-size-xs);
  --ds-component-dropdown-menu-item-typography-font-weight: var(--ds-font-weight-medium);
  --ds-component-dropdown-menu-item-typography-line-height: var(--ds-font-line-height-4);
  --ds-component-dropdown-menu-item-typography-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-component-dropdown-menu-label-typography-font-family: var(--ds-typography-overline-font-family);
  --ds-component-dropdown-menu-label-typography-font-size: var(--ds-typography-overline-font-size);
  --ds-component-dropdown-menu-label-typography-font-weight: var(--ds-typography-overline-font-weight);
  --ds-component-dropdown-menu-label-typography-line-height: var(--ds-typography-overline-line-height);
  --ds-component-dropdown-menu-label-typography-letter-spacing: var(--ds-typography-overline-letter-spacing);
  --ds-component-dropdown-menu-label-typography-text-transform: var(--ds-typography-overline-text-transform);
  --ds-component-dropdown-menu-label-font-size: 0.6875rem;
  --ds-component-dropdown-menu-side-offset: 5px;
  --ds-component-dropdown-menu-z-index: var(--ds-z-100);
  --ds-component-dropdown-menu-label-font-size: 0.6875rem;
  --ds-component-dropdown-menu-item-fg-disabled: color-mix(in oklab, var(--ds-color-gray-700-200) 50%, transparent);
  --ds-component-toast-title-typography-font-family: var(--ds-font-family-sans);
  --ds-component-toast-title-typography-font-size: var(--ds-font-size-sm);
  --ds-component-toast-title-typography-font-weight: var(--ds-font-weight-bold);
  --ds-component-toast-title-typography-line-height: var(--ds-font-line-height-5);
  --ds-component-toast-title-typography-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-component-toast-message-typography-font-family: var(--ds-font-family-sans);
  --ds-component-toast-message-typography-font-size: var(--ds-font-size-xs);
  --ds-component-toast-message-typography-font-weight: var(--ds-font-weight-medium);
  --ds-component-toast-message-typography-line-height: var(--ds-font-line-height-4);
  --ds-component-toast-message-typography-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-component-toast-message-font-size: 13px;
  --ds-component-toast-lifetime: 6000ms;
  --ds-component-toast-title-only-typography-font-family: var(--ds-font-family-sans);
  --ds-component-toast-title-only-typography-font-size: var(--ds-font-size-sm);
  --ds-component-toast-title-only-typography-font-weight: var(--ds-font-weight-medium);
  --ds-component-toast-title-only-typography-line-height: var(--ds-font-line-height-5);
  --ds-component-toast-title-only-typography-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-component-toast-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --ds-component-toast-focus-ring: 0px 4px 12px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 2px rgba(0, 0, 0, 0.2);
  --ds-component-toast-icon-size: 26px;
  --ds-component-toast-width: 356px;
  --ds-component-toast-gap: 14px;
  --ds-component-toast-viewport-offset: var(--ds-space-8);
  --ds-component-toast-mobile-offset: var(--ds-space-4);
  --ds-component-toast-mobile-bottom: var(--ds-space-5);
  --ds-component-toast-mobile-breakpoint: 600px;
  --ds-component-toast-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-component-toast-stack-scale-step: 0.05;
  --ds-component-toast-swipe-threshold: 20px;
  --ds-component-toast-visible-count: 12;
  --ds-component-toast-lifetime-short: 3000ms;
  --ds-component-toast-lifetime-long: 10000ms;
  --ds-component-toast-lifetime-actionable: 15000ms;
  --ds-component-toast-lifetime-page: 60000ms;
  --ds-component-button-font-size-xs: var(--ds-font-size-xs);
  --ds-component-button-font-size-sm: var(--ds-font-size-sm);
  --ds-component-button-font-size-md: var(--ds-font-size-base);
  --ds-component-button-font-size-lg: var(--ds-font-size-lg);
  --ds-component-button-padding-x-xs: var(--ds-space-4);
  --ds-component-button-padding-x-sm: var(--ds-space-6);
  --ds-component-button-padding-x-md: var(--ds-space-8);
  --ds-component-button-padding-x-lg: var(--ds-space-10);
  --ds-component-button-line-height-xs: 0;
  --ds-component-button-spinner-offset-xs: var(--ds-space-0_5);
  --ds-component-button-spinner-offset-default: var(--ds-space-1);
  --ds-component-button-spinner-offset-lg: var(--ds-space-2);
  --ds-component-button-spinner-size-xs: var(--ds-icon-size-2xs);
  --ds-component-button-spinner-size-sm: var(--ds-icon-size-xs);
  --ds-component-button-spinner-size-md: var(--ds-icon-size-sm);
  --ds-component-button-spinner-size-lg: var(--ds-icon-size-md);
  --ds-component-button-split-trigger-padding-x: var(--ds-space-3);
  --ds-component-button-split-divider-inset: var(--ds-space-2);
  --ds-component-tag-font-size-xxs: var(--ds-font-size-xs);
  --ds-component-tag-font-size-xs: var(--ds-font-size-xs);
  --ds-component-tag-font-size-sm: var(--ds-font-size-sm);
  --ds-component-tag-font-size-md: var(--ds-font-size-base);
  --ds-component-tag-font-size-lg: var(--ds-font-size-lg);
  --ds-component-tag-font-size-micro: 0.6875rem;
  --ds-component-tag-padding-x-sm: var(--ds-space-4);
  --ds-component-tag-padding-x-md: var(--ds-space-6);
  --ds-component-rich-text-paragraph-typography-font-family: var(--ds-font-family-sans);
  --ds-component-rich-text-paragraph-typography-font-size: var(--ds-font-size-sm);
  --ds-component-rich-text-paragraph-typography-font-weight: var(--ds-font-weight-regular);
  --ds-component-rich-text-paragraph-typography-line-height: var(--ds-font-line-height-6);
  --ds-component-rich-text-paragraph-typography-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-component-rich-text-h1-typography-font-family: var(--ds-font-family-sans);
  --ds-component-rich-text-h1-typography-font-size: var(--ds-font-size-xl);
  --ds-component-rich-text-h1-typography-font-weight: var(--ds-font-weight-medium);
  --ds-component-rich-text-h1-typography-line-height: var(--ds-font-line-height-6);
  --ds-component-rich-text-h1-typography-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-component-rich-text-h2-typography-font-family: var(--ds-font-family-sans);
  --ds-component-rich-text-h2-typography-font-size: var(--ds-font-size-lg);
  --ds-component-rich-text-h2-typography-font-weight: var(--ds-font-weight-medium);
  --ds-component-rich-text-h2-typography-line-height: var(--ds-font-line-height-6);
  --ds-component-rich-text-h2-typography-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-component-rich-text-h3-typography-font-family: var(--ds-font-family-sans);
  --ds-component-rich-text-h3-typography-font-size: var(--ds-font-size-lg);
  --ds-component-rich-text-h3-typography-font-weight: var(--ds-font-weight-medium);
  --ds-component-rich-text-h3-typography-line-height: var(--ds-font-line-height-6);
  --ds-component-rich-text-h3-typography-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-component-rich-text-h4-typography-font-family: var(--ds-font-family-sans);
  --ds-component-rich-text-h4-typography-font-size: var(--ds-font-size-base);
  --ds-component-rich-text-h4-typography-font-weight: var(--ds-font-weight-medium);
  --ds-component-rich-text-h4-typography-line-height: var(--ds-font-line-height-6);
  --ds-component-rich-text-h4-typography-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-component-rich-text-h5-typography-font-family: var(--ds-font-family-sans);
  --ds-component-rich-text-h5-typography-font-size: var(--ds-font-size-base);
  --ds-component-rich-text-h5-typography-font-weight: var(--ds-font-weight-medium);
  --ds-component-rich-text-h5-typography-line-height: var(--ds-font-line-height-6);
  --ds-component-rich-text-h5-typography-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-component-rich-text-h6-typography-font-family: var(--ds-font-family-sans);
  --ds-component-rich-text-h6-typography-font-size: var(--ds-font-size-base);
  --ds-component-rich-text-h6-typography-font-weight: var(--ds-font-weight-medium);
  --ds-component-rich-text-h6-typography-line-height: var(--ds-font-line-height-6);
  --ds-component-rich-text-h6-typography-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-component-rich-text-code-typography-font-family: var(--ds-font-family-mono);
  --ds-component-rich-text-code-typography-font-size: var(--ds-font-size-xs);
  --ds-component-rich-text-code-typography-font-weight: var(--ds-font-weight-regular);
  --ds-component-rich-text-code-typography-line-height: var(--ds-font-line-height-5);
  --ds-component-rich-text-code-typography-letter-spacing: var(--ds-font-letter-spacing-normal);
  --ds-component-rich-text-icon-size: var(--ds-icon-size-18);
  --ds-component-rich-text-icon-opacity-rest: var(--ds-opacity-60);
  --ds-component-rich-text-icon-opacity-active: var(--ds-opacity-100);
  --ds-component-rich-text-icon-opacity-disabled: 0.2;
  --ds-component-rich-text-line-height: 1.7;
  --ds-component-rich-text-min-height: 80px;
  --ds-component-rich-text-paragraph-font-size: 0.9375rem;
  --ds-component-rich-text-h4-font-size: 1.0625rem;
  --ds-component-rich-text-inherited-line-height: calc(1.25 / 0.875);
  --ds-component-rich-text-code-font-family: Menlo, Consolas, Monaco, monospace;
  --ds-component-rich-text-inline-code-font-size: 0.8125rem;
  --ds-component-rich-text-script-font-size: 0.8em;
  --ds-component-rich-text-code-gutter-min-width: 25px;
  --ds-component-rich-text-link-underline: var(--ds-color-s-blue-400);
  --ds-component-rich-text-selection-outline: #3c84f4;
  --ds-component-rich-text-hr-margin-block: 1em;
  --ds-component-rich-text-toolbar-collapse-width: 600px;
  --ds-component-rich-text-toolbar-divider: #eeeeee;
  --ds-component-rich-text-history-icon-width: var(--ds-space-4);
  --ds-component-rich-text-history-icon-glyph: 17px;
  --ds-component-rich-text-block-format-text-min-width: 150px;
  --ds-component-rich-text-code-language-item-min-width: 200px;
  --ds-component-rich-text-floating-toolbar-height: 43px;
  --ds-component-rich-text-floating-gap: 10px;
  --ds-component-rich-text-floating-offset-x: 5px;
  --ds-component-rich-text-link-editor-max-width: 400px;
  --ds-component-rich-text-link-preview-image-max-height: 250px;
  --ds-component-rich-text-glimmer-bg: #f9f9f9;
  --ds-component-rich-text-glimmer-height: 18px;
  --ds-component-rich-text-code-menu-height: 37px;
  --ds-component-rich-text-code-menu-bg: color-mix(in oklab, var(--ds-color-gray-100-800) 75%, transparent);
  --ds-component-rich-text-code-button-border-hover: color-mix(in oklab, var(--ds-color-gray-900-50) 30%, transparent);
  --ds-component-rich-text-code-button-border-active: color-mix(in oklab, var(--ds-color-gray-900-50) 50%, transparent);
  --ds-component-rich-text-table-margin-block: 30px;
  --ds-component-rich-text-table-controls-gutter: 25px;
  --ds-component-rich-text-table-cell-min-width: 75px;
  --ds-component-rich-text-table-cell-selected-bg: #c9dbf0;
  --ds-component-rich-text-syntax-comment: #708090;
  --ds-component-rich-text-syntax-punctuation: #999999;
  --ds-component-rich-text-syntax-property: #990055;
  --ds-component-rich-text-syntax-selector: #669900;
  --ds-component-rich-text-syntax-operator: #9a6e3a;
  --ds-component-rich-text-syntax-attr: #0077aa;
  --ds-component-rich-text-syntax-variable: #ee9900;
  --ds-component-rich-text-syntax-function: #dd4a68;
  --ds-component-checkbox-size: 14px;
  --ds-component-checkbox-focus-ring: 0 0 0 var(--ds-component-checkbox-focus-ring-offset) var(--ds-component-checkbox-focus-ring-offset-color), 0 0 0 2px var(--ds-color-focus-ring);
  --ds-component-checkbox-focus-ring-offset: 1px;
  --ds-component-checkbox-indicator-size: var(--ds-space-2);
  --ds-component-checkbox-focus-ring-offset-color: var(--ds-color-white);
  --ds-component-dialog-close-size: 48px;
  --ds-component-dialog-icon-well-size: var(--ds-size-control-md);
  --ds-component-dialog-min-width: 25%;
  --ds-component-dialog-icon-well-padding: 5px;
  --ds-component-dialog-type-icon-size: 34px;
  --ds-component-dialog-sectioned-width: min(90vw, 720px);
  --ds-component-dialog-sectioned-body-max-height: 60vh;
  --ds-component-dialog-aside-width: 360px;
  --ds-component-dialog-aside-width-compact: 280px;
  --ds-component-dialog-aside-max-width: 880px;
  --ds-component-dialog-aside-max-width-wide: 1040px;
  --ds-component-toolbar-dropdown-min-width: 102px;
  --ds-component-toolbar-actions-min-width: 114px;
  --ds-component-toolbar-cta-width: 144px;
  --ds-component-toolbar-view-max-width: 200px;
  --ds-component-toolbar-radius-bottom: var(--ds-radius-card);
  --ds-component-toolbar-input-label-fg: var(--ds-color-gray-300-600);
  --ds-component-toolbar-input-placeholder-fg: var(--ds-color-legacy-inactive-text);
  --ds-component-toolbar-input-label-height: 0.875rem;
  --ds-component-toolbar-input-floating-label-offset: 13px;
  --ds-component-toolbar-actions-dots-fill: #9095a8;
  --ds-component-toolbar-cta-check-highlight: #c4c4c4;
  --ds-component-chunk-border-width: var(--ds-border-width-hairline);
  --ds-component-chunk-radius: var(--ds-radius-card);
  --ds-component-chunk-accent-width: var(--ds-border-width-accent);
  --ds-component-chunk-empty-border: var(--ds-border-placeholder);
  --ds-component-chunk-empty-bg: var(--ds-color-surface-subtle);
  --ds-component-lightbox-scrim: rgb(0 0 0 / 0.6);
  --ds-component-lightbox-z: var(--ds-z-110);
  --ds-component-lightbox-sheet-max-width: 1600px;
  --ds-component-lightbox-control-size: var(--ds-space-10);
  --ds-component-lightbox-control-bg: color-mix(in oklab, var(--ds-color-white) 90%, transparent);
  --ds-component-lightbox-control-z: var(--ds-z-10);
  --ds-component-icon-theme-default-fill: var(--ds-color-white);
  --ds-component-icon-theme-default-stroke: var(--ds-color-purple-300-600);
  --ds-component-icon-theme-gray-fill: var(--ds-color-gray-200-700);
  --ds-component-icon-theme-gray-stroke: var(--ds-color-gray-600-300);
  --ds-component-icon-theme-s-purple-fill: var(--ds-color-s-purple-200-700);
  --ds-component-icon-theme-s-purple-stroke: var(--ds-color-s-purple-800-100);
  --ds-component-icon-theme-s-blue-fill: var(--ds-color-s-blue-200-700);
  --ds-component-icon-theme-s-blue-stroke: var(--ds-color-s-blue-800-100);
  --ds-component-icon-theme-cyan-fill: var(--ds-color-cyan-200-700);
  --ds-component-icon-theme-cyan-stroke: var(--ds-color-cyan-500-400);
  --ds-component-icon-theme-green-fill: var(--ds-color-green-200-700);
  --ds-component-icon-theme-green-stroke: var(--ds-color-green-500-400);
  --ds-component-icon-theme-s-pink-fill: var(--ds-color-s-pink-200-700);
  --ds-component-icon-theme-s-pink-stroke: var(--ds-color-s-pink-500-400);
  --ds-component-icon-theme-orange-fill: var(--ds-color-orange-100-800);
  --ds-component-icon-theme-orange-stroke: var(--ds-color-orange-500-400);
  --ds-component-icon-theme-s-green-fill: var(--ds-color-s-green-100-800);
  --ds-component-icon-theme-s-green-stroke: var(--ds-color-s-green-500-400);
  --ds-component-icon-theme-s-yellow-fill: var(--ds-color-s-yellow-100-800);
  --ds-component-icon-theme-s-yellow-stroke: var(--ds-color-s-yellow-500-400);
  --ds-component-icon-theme-pink-fill: var(--ds-color-pink-100-800);
  --ds-component-icon-theme-pink-stroke: var(--ds-color-pink-600-300);
  --ds-component-icon-theme-purple-fill: var(--ds-color-purple-100-800);
  --ds-component-icon-theme-purple-stroke: var(--ds-color-purple-600-300);
  --ds-component-dropzone-overlay-z: var(--ds-z-150);
  --ds-component-dropzone-media-overlay-z: 90;
  --ds-component-dropzone-tint-overlay-z: var(--ds-z-10);
  --ds-component-dropzone-page-overlay-z: var(--ds-z-50);
  --ds-component-dropzone-page-overlay-blur: 8px;
  --ds-component-dropzone-tint-overlay-opacity: 0.9;
  --ds-component-dropzone-tint-overlay-illustration-max-height: 150px;
  --ds-component-icon-button-focus-outline-offset: var(--ds-space-px);
  --ds-component-text-button-link-fg: var(--ds-color-cyan-700-200);
  --ds-component-text-button-link-subtle-fg: var(--ds-color-cyan-600-300);
  --ds-component-text-button-link-subtle-fg-hover: var(--ds-color-cyan-700-200);
  --ds-component-text-button-danger-fg-hover: var(--ds-color-pink-700-200);
  --ds-component-sidebar-toggle-size: var(--ds-space-10);
  --ds-component-sidebar-toggle-offset-bottom: var(--ds-space-11);
  --ds-component-sidebar-toggle-offset-bottom-narrow: 136px;
  --ds-component-sidebar-toggle-offset-left: var(--ds-layout-aside-width);
  --ds-component-sidebar-toggle-collapsed-shift: 275px;
  --ds-component-sidebar-toggle-seam-offset: var(--ds-space-5);
  --ds-component-sidebar-toggle-collapsed-inset: var(--ds-space-2);
  --ds-component-sidebar-toggle-border-hover-navigation: rgba(0, 0, 0, 0.4);
  --ds-component-sidebar-toggle-border-hover-plugin: var(--ds-color-gray-400-500);
  --ds-component-sidebar-toggle-icon-muted: rgba(0, 0, 0, 0.15);
  --ds-component-sidebar-toggle-icon-size-plugin: 15px;
  --ds-component-icon-native-caret: var(--ds-space-2);
  --ds-component-icon-native-drag-handle-width: 11px;
  --ds-component-icon-native-cancel: 34px;
  --ds-component-stack-icon-glyph-size: var(--ds-space-6);
  --ds-component-stack-icon-badge-size: var(--ds-icon-size-18);
  --ds-component-stack-icon-badge-glyph-size: var(--ds-icon-size-14);
  --ds-component-stack-icon-badge-bg: var(--ds-color-gray-50-900);
  --ds-component-stack-icon-badge-border: var(--ds-color-white);
  --ds-component-stack-icon-line-height: 0;
  --ds-component-file-icon-height-xs: var(--ds-space-5);
  --ds-component-file-icon-height-sm: var(--ds-space-8);
  --ds-component-file-icon-height-md: var(--ds-space-12);
  --ds-component-file-icon-height-lg: var(--ds-space-20);
  --ds-component-file-icon-font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ds-component-file-icon-grid-height-max: var(--ds-space-6);
  --ds-component-file-icon-grid-gap: var(--ds-space-1);
  --ds-component-file-icon-grid-offset: var(--ds-space-0_5);
  --ds-component-illustration-spot-max-height: 11rem;
  --ds-component-illustration-spot-canvas-max-width: 140px;
  --ds-component-illustration-hero-max-height-tall: 400px;
  --ds-component-illustration-status-size: var(--ds-size-container-xs);
  --ds-component-illustration-status-compact-width: 9rem;
  --ds-component-illustration-inline-height: 12rem;
  --ds-component-illustration-inline-max-height: 150px;
  --ds-component-illustration-inline-width: 130px;
  --ds-component-illustration-inline-box-width: 69px;
  --ds-component-illustration-inline-box-height: 90px;
  --ds-component-textarea-border-focus: var(--ds-color-purple-600-300);
  --ds-component-textarea-min-height-code: 140px;
  --ds-component-textarea-min-height-borderless: 12rem;
  --ds-component-numeric-input-disabled-bg-native: rgba(239, 239, 239, 0.3);
  --ds-component-numeric-input-prefix-shell-width: 11rem;
  --ds-component-radio-size: var(--ds-space-3);
  --ds-component-radio-indicator-size: var(--ds-space-1_5);
  --ds-component-spinner-size-10: var(--ds-icon-size-10);
  --ds-component-spinner-size-12: var(--ds-icon-size-12);
  --ds-component-spinner-size-14: var(--ds-icon-size-14);
  --ds-component-spinner-size-15: 15px;
  --ds-component-spinner-size-16: var(--ds-icon-size-16);
  --ds-component-spinner-size-20: var(--ds-icon-size-20);
  --ds-component-spinner-size-24: var(--ds-space-6);
  --ds-component-spinner-size-25: var(--ds-icon-size-25);
  --ds-component-spinner-size-30: var(--ds-icon-size-30);
  --ds-component-spinner-size-32: var(--ds-space-8);
  --ds-component-spinner-size-40: var(--ds-icon-size-40);
  --ds-component-spinner-label-gap: 15px;
  --ds-component-processing-width: 23px;
  --ds-component-processing-height: 22px;
  --ds-component-processing-paper: var(--ds-color-white);
  --ds-component-processing-accent: var(--ds-color-green-500);
  --ds-component-processing-accent-subtle: var(--ds-color-cyan-100);
  --ds-component-processing-easing: cubic-bezier(0.42, 0, 0.58, 1);
  --ds-component-processing-slide-hidden: 35px;
  --ds-component-processing-slide-shown: 2px;
  --ds-component-processing-back-offset: -4px;
  --ds-component-processing-rotate-origin-x: 35px;
  --ds-component-processing-rotate-origin-y: 145px;
  --ds-component-status-dot-hollow-border-width: 1.5px;
  --ds-component-status-dot-halo-gap: var(--ds-space-0_5);
  --ds-component-status-dot-halo-width: var(--ds-border-width-1);
  --ds-component-media-badge-bg-light: color-mix(in oklab, var(--ds-color-white) 90%, transparent);
  --ds-component-media-badge-bg-dark: color-mix(in oklab, var(--ds-color-black) 80%, transparent);
  --ds-component-media-badge-glyph-width-icon: var(--ds-space-2);
  --ds-component-media-badge-glyph-height-icon: var(--ds-icon-size-10);
  --ds-component-media-badge-glyph-width-label: var(--ds-icon-size-10);
  --ds-component-media-badge-glyph-height-label: var(--ds-icon-size-12);
  --ds-component-kbd-border: var(--ds-color-gray-300-600);
  --ds-component-kbd-font-family: monospace;
  --ds-component-link-focus-outline-offset: var(--ds-space-px);
  --ds-component-card-interactive-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  --ds-component-card-interactive-shadow-hover: 0px 0px 4px 0px rgba(130, 138, 144, 0.1), 0px 8px 16px 0px rgba(130, 138, 144, 0.1);
  --ds-component-choice-tile-tooltip-width: 14rem;
  --ds-component-choice-tile-add-new-min-height: 74px;
  --ds-component-choice-tile-add-new-bg-hover: rgba(255, 255, 255, 0.4);
  --ds-component-choice-tile-split-label-font-size: 13px;
  --ds-component-choice-tile-resource-size: 84px;
  --ds-component-choice-tile-resource-label-line-height: 14px;
  --ds-component-add-tile-column-height: 10rem;
  --ds-component-add-tile-tile-height: 233px;
  --ds-component-add-tile-tile-width: 13rem;
  --ds-component-divider-color: var(--ds-color-stone-300);
  --ds-component-divider-color-faint: var(--ds-color-purple-50-900);
  --ds-component-divider-toolbar-height: var(--ds-space-5);
  --ds-component-code-block-bg: var(--ds-color-white);
  --ds-component-code-block-fg: var(--ds-color-black);
  --ds-component-code-block-font-family: monospace;
  --ds-component-code-block-font-size-ua-default: 13px;
  --ds-component-code-block-padding-default: 30px;
  --ds-component-code-block-padding-file: var(--ds-space-4);
  --ds-component-code-block-margin-block: 1em;
  --ds-component-code-block-line-number-gap: 1em;
  --ds-component-code-block-line-number-digit-width: 1em;
  --ds-component-code-block-line-number-min-width-extra: 0.25em;
  --ds-component-code-block-line-number-min-width-file: 2.5em;
  --ds-component-code-block-line-number-fg-file: #b5b7bb;
  --ds-component-code-block-framed-max-height: 50vh;
  --ds-component-code-block-syntax-comment: #408080;
  --ds-component-code-block-syntax-keyword: #954121;
  --ds-component-code-block-syntax-number: #40a070;
  --ds-component-code-block-syntax-string: #219161;
  --ds-component-code-block-syntax-type: #19469d;
  --ds-component-code-block-syntax-params: #0000ff;
  --ds-component-code-block-syntax-title: #444488;
  --ds-component-code-block-syntax-tag: #000080;
  --ds-component-code-block-syntax-variable: #008080;
  --ds-component-code-block-syntax-regexp: #bb6688;
  --ds-component-code-block-syntax-symbol: #990073;
  --ds-component-code-block-syntax-built-in: #0086b3;
  --ds-component-code-block-syntax-meta: #999999;
  --ds-component-code-block-syntax-deletion-bg: #ffdddd;
  --ds-component-code-block-syntax-addition-bg: #ddffdd;
  --ds-component-form-field-width-fixed: 10rem;
  --ds-component-action-menu-dot-size-sm: 3px;
  --ds-component-action-menu-dot-gap-spread: 3px;
  --ds-component-dropdown-select-label-min-width: 100px;
  --ds-component-dropdown-select-tall-padding-y: 0.875rem;
  --ds-component-toolbar-select-item-font-size: 0.8125rem;
  --ds-component-toolbar-select-meta-menu-width: 186px;
  --ds-component-combobox-min-width: 200px;
  --ds-component-combobox-menu-max-height: 350px;
  --ds-component-combobox-scrollbar-size: 6px;
  --ds-component-combobox-tinted-width: 220px;
  --ds-component-combobox-tinted-menu-max-height: 40vh;
  --ds-component-combobox-tinted-item-font-size: 0.8125rem;
  --ds-component-combobox-tinted-item-bg-hover: color-mix(in oklab, var(--ds-color-purple-100-800) 50%, transparent);
  --ds-component-date-picker-caption-fg: hsl(224, 9%, 32.7%);
  --ds-component-date-picker-weekday-fg: #8b9898;
  --ds-component-date-picker-day-fg-disabled: color-mix(in oklab, var(--ds-color-gray-600-300) 50%, transparent);
  --ds-component-date-picker-day-padding: 0.7em;
  --ds-component-date-picker-day-line-height: 1.2rem;
  --ds-component-date-picker-week-height: var(--ds-space-10);
  --ds-component-date-picker-body-height: 241px;
  --ds-component-date-picker-nav-size: 1.25em;
  --ds-component-date-picker-nav-hover-opacity: var(--ds-opacity-80);
  --ds-component-date-picker-popover-line-height: calc(1 / 0.75);
  --ds-component-date-picker-embedded-band-inset: 3px;
  --ds-component-date-picker-embedded-end-size: 34px;
  --ds-component-date-picker-embedded-end-bg: var(--ds-color-cyan-500-400);
  --ds-component-date-picker-embedded-day-hover-bg: color-mix(in srgb, var(--ds-color-elevate) 60%, transparent);
  --ds-component-date-picker-embedded-nav-padding: 13px;
  --ds-component-date-tile-min-width: 90px;
  --ds-component-date-tile-theme-orange: var(--ds-color-orange-400-500);
  --ds-component-date-tile-theme-green: var(--ds-color-green-400-500);
  --ds-component-date-tile-theme-pink: var(--ds-color-pink-600-300);
  --ds-component-range-input-value-width-empty: var(--ds-space-5);
  --ds-component-range-input-value-width-base: 3px;
  --ds-component-range-input-value-char-width: 9px;
  --ds-component-range-input-tinted-max-width: 50px;
  --ds-component-range-input-attribute-width: 10rem;
  --ds-component-search-field-dialog-icon-size: 26px;
  --ds-component-inline-radio-track-padding: 3px;
  --ds-component-copy-field-command-font-family: monospace;
  --ds-component-radio-group-pill-key-line-height: 13px;
  --ds-component-radio-group-pill-caption-font-size: 0.6875rem;
  --ds-component-tabs-underline-padding-inline-start: var(--ds-space-1_5);
  --ds-component-tabs-underline-ua-border-width: var(--ds-border-width-2);
  --ds-component-tabs-text-fg-inactive: var(--ds-color-gray-300-600);
  --ds-component-tabs-nav-height: var(--ds-space-14);
  --ds-component-breadcrumbs-separator-subtle: var(--ds-color-gray-300-600);
  --ds-component-breadcrumbs-leaf-strong: var(--ds-color-gray-900-50);
  --ds-component-breadcrumbs-root-icon-size: 21px;
  --ds-component-breadcrumbs-tree-path-segment-max-width: 170px;
  --ds-component-breadcrumbs-tree-path-separator: var(--ds-color-green-200-700);
  --ds-component-steps-compact-track: var(--ds-color-green-400-500);
  --ds-component-steps-compact-done-bg: var(--ds-color-cyan-100-800);
  --ds-component-steps-compact-upcoming-bg: var(--ds-color-white);
  --ds-component-steps-compact-scheduled-border: var(--ds-color-s-purple-800-100);
  --ds-component-steps-compact-scheduled-bg: var(--ds-color-s-purple-200-700);
  --ds-component-steps-compact-warning-bg: var(--ds-color-orange-200-700);
  --ds-component-steps-compact-error-border: var(--ds-color-pink-400-500);
  --ds-component-steps-compact-error-bg: var(--ds-color-pink-50-900);
  --ds-component-steps-compact-check-size: 9px;
  --ds-component-steps-wizard-done: var(--ds-color-legacy-density);
  --ds-component-steps-wizard-upcoming: var(--ds-color-legacy-border);
  --ds-component-steps-wizard-padding-top: 30px;
  --ds-component-steps-wizard-margin-bottom: 50px;
  --ds-component-steps-wizard-margin-bottom-md: 25px;
  --ds-component-steps-wizard-bar-height: 6px;
  --ds-component-steps-wizard-bar-top: 5px;
  --ds-component-steps-wizard-bar-left: 27px;
  --ds-component-steps-wizard-bar-inset: 37px;
  --ds-component-steps-ring: var(--ds-color-purple-600);
  --ds-component-steps-pipeline-column-min-width: 150px;
  --ds-component-steps-pipeline-scrollbar-size: 6px;
  --ds-component-steps-pipeline-stripe-width: 5px;
  --ds-component-steps-dots-connector-max-width: 10px;
  --ds-component-nav-list-item-tree-line-height: 1.4;
  --ds-component-nav-list-item-tree-folder-padding-right: 68px;
  --ds-component-nav-list-item-tree-warning-min-width: 19px;
  --ds-component-nav-list-item-thumbnail-active-bg: var(--ds-color-purple-100-800);
  --ds-component-nav-list-item-archive-bg: var(--ds-color-purple-100-800);
  --ds-component-banner-z-index: 90;
  --ds-component-banner-text-inset: 7rem;
  --ds-component-banner-message-margin-block: var(--ds-font-size-sm);
  --ds-component-banner-inverse-bg: var(--ds-color-gray-800-100);
  --ds-component-callout-promo-illustration-size: 70px;
  --ds-component-callout-promo-arrow-size: 15px;
  --ds-component-toolbar-notice-strip-warning-bg: var(--ds-color-s-orange-200-700);
  --ds-component-toolbar-notice-strip-fg: var(--ds-color-green-500-400);
  --ds-component-toolbar-notice-stepper-chevron-size: var(--ds-space-6);
  --ds-component-empty-state-aside-max-width: 10rem;
  --ds-component-empty-state-hint-max-width: 280px;
  --ds-component-empty-state-banner-illustration-size: 170px;
  --ds-component-empty-state-card-icon-size: var(--ds-space-12);
  --ds-component-empty-state-panel-min-height: 420px;
  --ds-component-empty-state-message-illustration-width: 200px;
  --ds-component-empty-state-serif-column-width: 500px;
  --ds-component-empty-state-serif-illustration-width: 385px;
  --ds-component-error-state-card-icon-size: var(--ds-space-8);
  --ds-component-page-loader-glyph-rotate-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-component-aside-header-bar-title-font-size: 0.95rem;
  --ds-component-section-heading-legacy-label-font-size: 0.8125rem;
  --ds-component-collapsible-caret-size: 9px;
  --ds-component-popover-arrow-width: var(--ds-space-2_5);
  --ds-component-popover-arrow-height: 5px;
  --ds-component-description-list-term-min-width: 60px;
  --ds-component-description-list-term-max-width: 84px;
  --ds-component-description-list-neutral-term-width: 7rem;
  --ds-component-description-list-neutral-value-max-width: 270px;
  --ds-component-record-row-thumb-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-component-image-min-width: 38px;
  --ds-component-lightbox-button-icon-fill: var(--ds-color-gray-100-800);
  --ds-component-video-player-surface: var(--ds-color-black);
  --ds-component-video-player-fg: var(--ds-color-white);
  --ds-component-video-player-font-size: var(--ds-font-size-2xs);
  --ds-component-video-player-control-bar-bg: rgba(43, 51, 63, 0.7);
  --ds-component-video-player-control-bar-height: 30px;
  --ds-component-video-player-control-width: var(--ds-space-10);
  --ds-component-video-player-progress-height: 3px;
  --ds-component-video-player-progress-height-hover: 5px;
  --ds-component-video-player-progress-inset: var(--ds-space-2_5);
  --ds-component-video-player-progress-track: rgba(115, 133, 159, 0.5);
  --ds-component-video-player-play-button-size: 35px;
  --ds-component-video-player-play-button-radius: 9px;
  --ds-component-video-player-play-button-bg: var(--ds-color-white);
  --ds-component-video-player-play-button-glyph: var(--ds-color-gray-700);
  --ds-component-video-player-play-button-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-component-media-tile-selected-border: var(--ds-color-purple-500-400);
  --ds-component-media-tile-tray-selected-border: var(--ds-color-legacy-asteroid);
  --ds-component-media-tile-select-mode-hover-border: var(--ds-color-purple-800-100);
  --ds-component-media-tile-strip-size: 10rem;
  --ds-component-media-tile-list-height: 9rem;
  --ds-component-media-tile-thumb-size: var(--ds-space-14);
  --ds-component-media-tile-thumb-size-lg: var(--ds-space-20);
  --ds-component-media-tile-thumb-max-width: 142px;
  --ds-component-media-tile-check-bg: var(--ds-color-s-green-300-600);
  --ds-component-media-tile-check-fg: var(--ds-color-s-green-700-200);
  --ds-component-media-tile-placeholder-glyph: var(--ds-color-gray-300-600);
  --ds-component-media-tile-no-preview-glyph-height: 17px;
  --ds-component-thumbnail-radius-bordered: 3px;
  --ds-component-media-strip-max-width: 800px;
  --ds-component-media-strip-tile-size: 10rem;
  --ds-component-media-strip-placeholder-icon-size: var(--ds-space-6);
  --ds-component-file-preview-pdf-overhang: var(--ds-space-8);
  --ds-component-scroll-arrows-icon-size-default: 15px;
  --ds-component-carousel-overlay-slide-width: 80%;
  --ds-component-carousel-overlay-slide-width-wide: 50%;
  --ds-component-carousel-header-slide-width: 33.333333%;
  --ds-component-carousel-paged-min-height: 500px;
  --ds-component-carousel-paged-min-height-below-lg: 700px;
  --ds-component-carousel-paged-min-height-below-md: 600px;
  --ds-component-carousel-paged-slide-offset: 50px;
  --ds-component-carousel-paged-dots-bottom: 30px;
  --ds-component-carousel-paged-dots-bottom-below-lg: 15px;
  --ds-component-carousel-paged-dot-hover-bg: rgba(0, 0, 0, 0.05);
  --ds-component-carousel-paged-indicator-color: #c2e5e1;
  --ds-component-carousel-paged-indicator-height: 3px;
  --ds-component-carousel-paged-indicator-active-offset: 5px;
  --ds-component-carousel-paged-arrow-fg: #9095a8;
  --ds-component-drop-target-border: var(--ds-color-gray-400-500);
  --ds-component-drop-target-fg-hover: var(--ds-color-cyan-500-400);
  --ds-component-drop-target-list-size: 9rem;
  --ds-component-drop-target-panel-height: 18rem;
  --ds-component-drop-target-cart-min-height: 600px;
  --ds-component-drop-target-cart-illustration-width: 130px;
  --ds-component-drop-target-illustration-height-lg: 12rem;
  --ds-component-drop-target-illustration-height-md: 9rem;
  --ds-component-drop-target-lift-shadow: 0px 25px 50px -12px rgb(0 0 0 / 0.25);
  --ds-component-drop-target-inline-height: 50px;
  --ds-component-drag-selection-border: var(--ds-color-cyan-300-600);
  --ds-component-drag-selection-fill: color-mix(in oklab, var(--ds-color-cyan-100-800) 20%, transparent);
  --ds-component-chart-guide-stroke: #cccccc;
  --ds-component-chart-axis-tick-fg: #666666;
  --ds-component-chart-mark-outline: var(--ds-color-white);
  --ds-component-chart-height-sm: 12rem;
  --ds-component-chart-height-md: 15rem;
  --ds-component-chart-height-lg: 16rem;
  --ds-component-chart-plot-margin: 5px;
  --ds-component-chart-plot-margin-top: 30px;
  --ds-component-chart-x-axis-height: 30px;
  --ds-component-chart-pie-size: 100px;
  --ds-component-chart-draw-duration: 1500ms;
  --ds-component-chart-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-component-chart-tooltip-min-width: 120px;
  --ds-component-chart-tooltip-offset: var(--ds-space-2_5);
  --ds-component-stat-tile-kpi-min-width: 220px;
  --ds-component-stat-tile-cell-min-width: 200px;
  --ds-component-stat-tile-count-easing: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ds-component-stat-tile-loading-height: var(--ds-size-container-xs);
  --ds-component-stat-tile-pie-slot-width: 7rem;
  --ds-component-color-picker-trigger-width: 10rem;
  --ds-component-confirm-dialog-input-form-width: 100vw;
  --ds-component-confirm-dialog-list-max-height: 60vh;
  --ds-component-search-dialog-results-max-height: 400px;
  --ds-component-table-row-stripe-bg: color-mix(in oklab, var(--ds-color-purple-50-900) 30%, transparent);
  --ds-component-table-row-hover-bg: color-mix(in oklab, var(--ds-color-purple-50-900) 50%, transparent);
  --ds-component-table-scroll-row-hover-bg: color-mix(in oklab, var(--ds-color-purple-50-900) 60%, transparent);
  --ds-component-table-scroll-columns: minmax(52px, 62px) minmax(150px, 160px) minmax(180px, 15%) minmax(180px, 21%) minmax(80px, 100px) minmax(60px, 100px) 1fr;
  --ds-component-key-value-table-drag-handle-width: 7px;
  --ds-component-action-bar-enter-distance: var(--ds-space-2);
  --ds-component-action-bar-enter-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-component-action-bar-overlay-enter-duration: 180ms;
  --ds-component-search-filter-overlap: var(--ds-space-1);
  --ds-component-search-filter-column-min-width: 200px;
  --ds-component-search-filter-column-max-height: 15rem;
  --ds-component-search-filter-match-width: 150px;
  --ds-component-search-filter-option-tag-padding-y: 5px;
  --ds-component-search-filter-option-disabled-opacity: 0.7;
  --ds-component-nav-rail-shadow: 0px 2px 4px 0px rgba(77, 82, 91, 0.1);
  --ds-component-nav-rail-easing: cubic-bezier(0.41, 0.03, 0, 0.96);
  --ds-component-nav-rail-item-inset: 7px;
  --ds-component-nav-rail-group-heading-indent: 71px;
  --ds-component-nav-rail-logo-width: 27px;
  --ds-component-nav-rail-language-menu-min-width: 180px;
  --ds-component-nav-rail-language-filter-max-width: 100px;
  --ds-component-nav-rail-search-close-icon-size: 15px;
  --ds-component-nav-rail-search-min-width: 520px;
  --ds-component-nav-rail-search-type-row-min-height: 68px;
  --ds-component-aside-panel-duration: 250ms;
  --ds-component-view-content-disabled-opacity: 0.15;
  --ds-component-tree-navigator-track-height: 60vh;
  --ds-component-tree-navigator-slide-duration: 250ms;
  --ds-component-tree-navigator-level-exit-easing: cubic-bezier(0.25, 0.1, 0.35, 1);
  --ds-component-tree-navigator-drawer-height-collapsed: 130px;
  --ds-component-tree-navigator-drawer-height-open: 300px;
  --ds-component-tree-navigator-drawer-list-height: 400px;
  --ds-component-tree-navigator-drawer-radius: 10px;
  --ds-component-tree-navigator-drawer-header-max-height: 60px;
  --ds-component-tree-navigator-close-dash-radius: 3px;
  --ds-component-tree-navigator-close-dash-width: 15px;
  --ds-component-tree-navigator-close-dash-color: #f47f98;
  --ds-component-tree-navigator-count-shadow: 2px 4px 10px 0px rgba(0, 0, 0, 0.1);
  --ds-component-tree-navigator-count-scale: 1.1;
  --ds-component-tree-navigator-drop-offset: 150px;
  --ds-component-tree-navigator-drop-hint-width: 250px;
  --ds-component-tree-navigator-drop-hint-height: 70px;
  --ds-component-tree-navigator-drop-hint-border: color-mix(in oklab, var(--ds-color-black) 10%, transparent);
  --ds-component-tree-navigator-selection-row-hover-bg: color-mix(in oklab, var(--ds-color-black) 1%, transparent);
  --ds-component-tree-navigator-drawer-open-easing: cubic-bezier(0.79, -0.08, 0.37, 1.47);
  --ds-component-tree-navigator-drawer-close-easing: cubic-bezier(0, 1.28, 0.74, 0.7);
  --ds-component-tree-navigator-drop-highlight-duration: 700ms;
  --ds-component-tree-navigator-create-menu-item-gap: 15px;
  --ds-component-tree-navigator-create-menu-stagger: 50ms;
  --ds-component-tree-view-row-bg-hover: color-mix(in oklab, var(--ds-color-purple-100-800) 60%, transparent);
  --ds-component-tree-view-row-bg-selected: color-mix(in oklab, var(--ds-color-purple-100-800) 80%, transparent);
  --ds-component-tree-view-row-bg-drop: color-mix(in oklab, var(--ds-color-purple-100-800) 70%, transparent);
  --ds-component-tree-view-indent-step-explorer: 14px;
  --ds-component-tree-view-panel-indent-offset: 7px;
  --ds-component-resource-detail-panel-preference-list-scrollbar-size: 6px;
  --ds-component-media-editor-preview-size: 18rem;
  --ds-component-media-editor-rail-width: 74px;
  --ds-component-media-editor-rail-width-md: var(--ds-space-20);
  --ds-component-media-editor-rail-width-lg: 100px;
  --ds-component-media-editor-rail-width-2xl: 122px;
  --ds-component-media-editor-rail-height: 8rem;
  --ds-component-media-editor-add-area-width: var(--ds-space-20);
  --ds-component-media-editor-caption-min-height: 9rem;
  --ds-component-media-editor-caption-padding-x: 13px;
  --ds-component-media-editor-video-dialog-preview-height: 12rem;
  --ds-component-plugin-iframe-dialog-max-width: 80vw;
  --ds-component-plugin-iframe-dialog-max-height: 80vh;
  --ds-component-plugin-iframe-demote-fallback: 400ms;
  --ds-component-color-editor-min-width: 330px;
  --ds-component-color-editor-canvas-height: 200px;
  --ds-component-color-editor-saturation-basis: 14rem;
  --ds-component-color-editor-preset-list-max-height: 10rem;
  --ds-component-color-editor-canvas-inset-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
  --ds-component-color-editor-hue-gradient: linear-gradient(90deg, #ff0000 0, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000);
  --ds-component-color-editor-alpha-checker: color-mix(in oklab, var(--ds-color-black) 5%, transparent);
  --ds-component-color-editor-swatch-border: color-mix(in oklab, var(--ds-color-black) 20%, transparent);
  --ds-component-event-calendar-small-font-size: 0.6875rem;
  --ds-component-event-calendar-weekday-letter-spacing: 0.04em;
  --ds-component-event-calendar-cell-min-height: 60px;
  --ds-component-event-calendar-now-indicator-color: oklch(63.7% 0.237 25.331);
  --ds-component-event-calendar-event-shadow: 0px 1px 3px 0px rgb(0 0 0 / 0.1), 0px 1px 2px -1px rgb(0 0 0 / 0.1);
  --ds-component-event-calendar-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --ds-component-kanban-board-column-body-width: 308px;
  --ds-component-kanban-board-column-width-compact: var(--ds-size-container-xs);
  --ds-component-kanban-board-placeholder-height: 74px;
  --ds-component-kanban-board-column-drop-bg: color-mix(in oklab, var(--ds-color-white) 30%, transparent);
  --ds-component-kanban-board-remove-column-height: 100vh;
  --ds-component-kanban-board-enter-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-component-kanban-board-preview-tilt-step: 2deg;
  --ds-component-kanban-board-count-badge-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  --ds-component-detail-editor-view-hero-pull: 68px;
  --ds-component-detail-editor-view-hero-pull-published: 92px;
  --ds-component-auth-layout-art-padding-bottom: 7rem;
  --ds-component-auth-layout-tall-viewport-min-height: 1332px;
  --ds-component-error-page-result-illustration-size: 240px;
  --ds-component-error-page-result-max-width: 600px;
  --ds-component-error-page-result-offset: -200px;
  --ds-component-error-page-result-padding-x: 30px;
  --ds-component-wizard-loader-height: 14rem;
  --ds-component-command-palette-navigate-delay: 10ms;
  --ds-component-command-palette-idle-timeout: 3000ms;
  --ds-component-command-palette-icon-size: 24px;
  --ds-component-plugin-surfaces-panel-item-min-height: 80px;
  --ds-component-plugin-surfaces-bottom-bar-max-width: 90vw;
  --ds-component-plugin-surfaces-bottom-item-size-default: 240px;
  --ds-component-plugin-surfaces-bottom-item-size-min: 120px;
  --ds-component-plugin-surfaces-bottom-item-size-max: 320px;
  --ds-component-plugin-surfaces-inline-height-default: 200px;
  --ds-component-plugin-surfaces-inline-height-max: 1200px;
  --ds-component-plugin-surfaces-top-card-height-default: 500px;
  --ds-component-plugin-surfaces-top-card-height-min: 120px;
  --ds-component-plugin-surfaces-top-card-height-max: 1200px;
  --ds-component-plugin-surfaces-split-height-min: 80px;
  --ds-component-plugin-surfaces-split-height-max: 2000px;
}


/*
 * CONVENIENCE helper classes — not tokens. One class per typography composite, applying its
 * grouped properties. Prefer the --ds-typography-* properties in component CSS.
 */
.ds-text-display {
  font-family: var(--ds-typography-display-font-family);
  font-size: var(--ds-typography-display-font-size);
  font-weight: var(--ds-typography-display-font-weight);
  line-height: var(--ds-typography-display-line-height);
  letter-spacing: var(--ds-typography-display-letter-spacing);
}
.ds-text-heading-page {
  font-family: var(--ds-typography-heading-page-font-family);
  font-size: var(--ds-typography-heading-page-font-size);
  font-weight: var(--ds-typography-heading-page-font-weight);
  line-height: var(--ds-typography-heading-page-line-height);
  letter-spacing: var(--ds-typography-heading-page-letter-spacing);
}
.ds-text-heading-dialog {
  font-family: var(--ds-typography-heading-dialog-font-family);
  font-size: var(--ds-typography-heading-dialog-font-size);
  font-weight: var(--ds-typography-heading-dialog-font-weight);
  line-height: var(--ds-typography-heading-dialog-line-height);
  letter-spacing: var(--ds-typography-heading-dialog-letter-spacing);
}
.ds-text-heading-section {
  font-family: var(--ds-typography-heading-section-font-family);
  font-size: var(--ds-typography-heading-section-font-size);
  font-weight: var(--ds-typography-heading-section-font-weight);
  line-height: var(--ds-typography-heading-section-line-height);
  letter-spacing: var(--ds-typography-heading-section-letter-spacing);
}
.ds-text-heading-subsection {
  font-family: var(--ds-typography-heading-subsection-font-family);
  font-size: var(--ds-typography-heading-subsection-font-size);
  font-weight: var(--ds-typography-heading-subsection-font-weight);
  line-height: var(--ds-typography-heading-subsection-line-height);
  letter-spacing: var(--ds-typography-heading-subsection-letter-spacing);
}
.ds-text-title-item {
  font-family: var(--ds-typography-title-item-font-family);
  font-size: var(--ds-typography-title-item-font-size);
  font-weight: var(--ds-typography-title-item-font-weight);
  line-height: var(--ds-typography-title-item-line-height);
  letter-spacing: var(--ds-typography-title-item-letter-spacing);
}
.ds-text-body-strong {
  font-family: var(--ds-typography-body-strong-font-family);
  font-size: var(--ds-typography-body-strong-font-size);
  font-weight: var(--ds-typography-body-strong-font-weight);
  line-height: var(--ds-typography-body-strong-line-height);
  letter-spacing: var(--ds-typography-body-strong-letter-spacing);
}
.ds-text-body-prose {
  font-family: var(--ds-typography-body-prose-font-family);
  font-size: var(--ds-typography-body-prose-font-size);
  font-weight: var(--ds-typography-body-prose-font-weight);
  line-height: var(--ds-typography-body-prose-line-height);
  letter-spacing: var(--ds-typography-body-prose-letter-spacing);
}
.ds-text-body-large {
  font-family: var(--ds-typography-body-large-font-family);
  font-size: var(--ds-typography-body-large-font-size);
  font-weight: var(--ds-typography-body-large-font-weight);
  line-height: var(--ds-typography-body-large-line-height);
  letter-spacing: var(--ds-typography-body-large-letter-spacing);
}
.ds-text-body {
  font-family: var(--ds-typography-body-default-font-family);
  font-size: var(--ds-typography-body-default-font-size);
  font-weight: var(--ds-typography-body-default-font-weight);
  line-height: var(--ds-typography-body-default-line-height);
  letter-spacing: var(--ds-typography-body-default-letter-spacing);
}
.ds-text-label-strong {
  font-family: var(--ds-typography-label-strong-font-family);
  font-size: var(--ds-typography-label-strong-font-size);
  font-weight: var(--ds-typography-label-strong-font-weight);
  line-height: var(--ds-typography-label-strong-line-height);
  letter-spacing: var(--ds-typography-label-strong-letter-spacing);
}
.ds-text-label {
  font-family: var(--ds-typography-label-default-font-family);
  font-size: var(--ds-typography-label-default-font-size);
  font-weight: var(--ds-typography-label-default-font-weight);
  line-height: var(--ds-typography-label-default-line-height);
  letter-spacing: var(--ds-typography-label-default-letter-spacing);
}
.ds-text-meta {
  font-family: var(--ds-typography-meta-font-family);
  font-size: var(--ds-typography-meta-font-size);
  font-weight: var(--ds-typography-meta-font-weight);
  line-height: var(--ds-typography-meta-line-height);
  letter-spacing: var(--ds-typography-meta-letter-spacing);
}
.ds-text-caption {
  font-family: var(--ds-typography-caption-font-family);
  font-size: var(--ds-typography-caption-font-size);
  font-weight: var(--ds-typography-caption-font-weight);
  line-height: var(--ds-typography-caption-line-height);
  letter-spacing: var(--ds-typography-caption-letter-spacing);
  font-style: var(--ds-typography-caption-font-style);
}
.ds-text-micro {
  font-family: var(--ds-typography-micro-font-family);
  font-size: var(--ds-typography-micro-font-size);
  font-weight: var(--ds-typography-micro-font-weight);
  line-height: var(--ds-typography-micro-line-height);
  letter-spacing: var(--ds-typography-micro-letter-spacing);
}
.ds-text-overline {
  font-family: var(--ds-typography-overline-font-family);
  font-size: var(--ds-typography-overline-font-size);
  font-weight: var(--ds-typography-overline-font-weight);
  line-height: var(--ds-typography-overline-line-height);
  letter-spacing: var(--ds-typography-overline-letter-spacing);
  text-transform: var(--ds-typography-overline-text-transform);
}
.ds-text-placeholder {
  font-family: var(--ds-typography-placeholder-font-family);
  font-size: var(--ds-typography-placeholder-font-size);
  font-weight: var(--ds-typography-placeholder-font-weight);
  line-height: var(--ds-typography-placeholder-line-height);
  letter-spacing: var(--ds-typography-placeholder-letter-spacing);
  font-style: var(--ds-typography-placeholder-font-style);
}
.ds-text-input-value {
  font-family: var(--ds-typography-input-value-font-family);
  font-size: var(--ds-typography-input-value-font-size);
  font-weight: var(--ds-typography-input-value-font-weight);
  line-height: var(--ds-typography-input-value-line-height);
  letter-spacing: var(--ds-typography-input-value-letter-spacing);
}
.ds-text-button {
  font-family: var(--ds-typography-button-font-family);
  font-size: var(--ds-typography-button-font-size);
  font-weight: var(--ds-typography-button-font-weight);
  line-height: var(--ds-typography-button-line-height);
  letter-spacing: var(--ds-typography-button-letter-spacing);
}
.ds-text-tree-item {
  font-family: var(--ds-typography-tree-item-font-family);
  font-size: var(--ds-typography-tree-item-font-size);
  font-weight: var(--ds-typography-tree-item-font-weight);
  line-height: var(--ds-typography-tree-item-line-height);
  letter-spacing: var(--ds-typography-tree-item-letter-spacing);
}
.ds-text-table-header {
  font-family: var(--ds-typography-table-header-font-family);
  font-size: var(--ds-typography-table-header-font-size);
  font-weight: var(--ds-typography-table-header-font-weight);
  line-height: var(--ds-typography-table-header-line-height);
  letter-spacing: var(--ds-typography-table-header-letter-spacing);
}
.ds-text-code {
  font-family: var(--ds-typography-code-font-family);
  font-size: var(--ds-typography-code-font-size);
  font-weight: var(--ds-typography-code-font-weight);
  line-height: var(--ds-typography-code-line-height);
  letter-spacing: var(--ds-typography-code-letter-spacing);
}
.ds-text-numeric-emphasis {
  font-family: var(--ds-typography-numeric-emphasis-font-family);
  font-size: var(--ds-typography-numeric-emphasis-font-size);
  font-weight: var(--ds-typography-numeric-emphasis-font-weight);
  line-height: var(--ds-typography-numeric-emphasis-line-height);
  letter-spacing: var(--ds-typography-numeric-emphasis-letter-spacing);
}
.ds-text-tooltip {
  font-family: var(--ds-component-tooltip-typography-font-family);
  font-size: var(--ds-component-tooltip-typography-font-size);
  font-weight: var(--ds-component-tooltip-typography-font-weight);
  line-height: var(--ds-component-tooltip-typography-line-height);
  letter-spacing: var(--ds-component-tooltip-typography-letter-spacing);
  font-style: var(--ds-component-tooltip-typography-font-style);
}
.ds-text-dropdown-menu-item {
  font-family: var(--ds-component-dropdown-menu-item-typography-font-family);
  font-size: var(--ds-component-dropdown-menu-item-typography-font-size);
  font-weight: var(--ds-component-dropdown-menu-item-typography-font-weight);
  line-height: var(--ds-component-dropdown-menu-item-typography-line-height);
  letter-spacing: var(--ds-component-dropdown-menu-item-typography-letter-spacing);
}
.ds-text-dropdown-menu-label {
  font-family: var(--ds-component-dropdown-menu-label-typography-font-family);
  font-size: var(--ds-component-dropdown-menu-label-typography-font-size);
  font-weight: var(--ds-component-dropdown-menu-label-typography-font-weight);
  line-height: var(--ds-component-dropdown-menu-label-typography-line-height);
  letter-spacing: var(--ds-component-dropdown-menu-label-typography-letter-spacing);
  text-transform: var(--ds-component-dropdown-menu-label-typography-text-transform);
}
.ds-text-toast-title {
  font-family: var(--ds-component-toast-title-typography-font-family);
  font-size: var(--ds-component-toast-title-typography-font-size);
  font-weight: var(--ds-component-toast-title-typography-font-weight);
  line-height: var(--ds-component-toast-title-typography-line-height);
  letter-spacing: var(--ds-component-toast-title-typography-letter-spacing);
}
.ds-text-toast-message {
  font-family: var(--ds-component-toast-message-typography-font-family);
  font-size: var(--ds-component-toast-message-typography-font-size);
  font-weight: var(--ds-component-toast-message-typography-font-weight);
  line-height: var(--ds-component-toast-message-typography-line-height);
  letter-spacing: var(--ds-component-toast-message-typography-letter-spacing);
}
.ds-text-toast-title-only {
  font-family: var(--ds-component-toast-title-only-typography-font-family);
  font-size: var(--ds-component-toast-title-only-typography-font-size);
  font-weight: var(--ds-component-toast-title-only-typography-font-weight);
  line-height: var(--ds-component-toast-title-only-typography-line-height);
  letter-spacing: var(--ds-component-toast-title-only-typography-letter-spacing);
}
.ds-text-rich-text-paragraph {
  font-family: var(--ds-component-rich-text-paragraph-typography-font-family);
  font-size: var(--ds-component-rich-text-paragraph-typography-font-size);
  font-weight: var(--ds-component-rich-text-paragraph-typography-font-weight);
  line-height: var(--ds-component-rich-text-paragraph-typography-line-height);
  letter-spacing: var(--ds-component-rich-text-paragraph-typography-letter-spacing);
}
.ds-text-rich-text-h1 {
  font-family: var(--ds-component-rich-text-h1-typography-font-family);
  font-size: var(--ds-component-rich-text-h1-typography-font-size);
  font-weight: var(--ds-component-rich-text-h1-typography-font-weight);
  line-height: var(--ds-component-rich-text-h1-typography-line-height);
  letter-spacing: var(--ds-component-rich-text-h1-typography-letter-spacing);
}
.ds-text-rich-text-h2 {
  font-family: var(--ds-component-rich-text-h2-typography-font-family);
  font-size: var(--ds-component-rich-text-h2-typography-font-size);
  font-weight: var(--ds-component-rich-text-h2-typography-font-weight);
  line-height: var(--ds-component-rich-text-h2-typography-line-height);
  letter-spacing: var(--ds-component-rich-text-h2-typography-letter-spacing);
}
.ds-text-rich-text-h3 {
  font-family: var(--ds-component-rich-text-h3-typography-font-family);
  font-size: var(--ds-component-rich-text-h3-typography-font-size);
  font-weight: var(--ds-component-rich-text-h3-typography-font-weight);
  line-height: var(--ds-component-rich-text-h3-typography-line-height);
  letter-spacing: var(--ds-component-rich-text-h3-typography-letter-spacing);
}
.ds-text-rich-text-h4 {
  font-family: var(--ds-component-rich-text-h4-typography-font-family);
  font-size: var(--ds-component-rich-text-h4-typography-font-size);
  font-weight: var(--ds-component-rich-text-h4-typography-font-weight);
  line-height: var(--ds-component-rich-text-h4-typography-line-height);
  letter-spacing: var(--ds-component-rich-text-h4-typography-letter-spacing);
}
.ds-text-rich-text-h5 {
  font-family: var(--ds-component-rich-text-h5-typography-font-family);
  font-size: var(--ds-component-rich-text-h5-typography-font-size);
  font-weight: var(--ds-component-rich-text-h5-typography-font-weight);
  line-height: var(--ds-component-rich-text-h5-typography-line-height);
  letter-spacing: var(--ds-component-rich-text-h5-typography-letter-spacing);
}
.ds-text-rich-text-h6 {
  font-family: var(--ds-component-rich-text-h6-typography-font-family);
  font-size: var(--ds-component-rich-text-h6-typography-font-size);
  font-weight: var(--ds-component-rich-text-h6-typography-font-weight);
  line-height: var(--ds-component-rich-text-h6-typography-line-height);
  letter-spacing: var(--ds-component-rich-text-h6-typography-letter-spacing);
}
.ds-text-rich-text-code {
  font-family: var(--ds-component-rich-text-code-typography-font-family);
  font-size: var(--ds-component-rich-text-code-typography-font-size);
  font-weight: var(--ds-component-rich-text-code-typography-font-weight);
  line-height: var(--ds-component-rich-text-code-typography-line-height);
  letter-spacing: var(--ds-component-rich-text-code-typography-letter-spacing);
}