/* GENERATED from the Pixels Design System Figma variables by tools/build-tokens.js. Do not edit by hand.
   Collections: Primitives (Default), Brand (Pixels / Mono), Color (Light / Dark / Light · Mono / Dark · Mono), Dimension (Desktop / Tablet / Mobile), Locale (en · LTR / ar · RTL), Density (Default / Compact / Comfortable), Component (Default).
   Dark: <html data-px-theme="dark">   Mono brand: <html data-px-brand="mono">   RTL: <html dir="rtl">
   Density: <html data-px-density="compact|comfortable">   Tablet <= 1023px, mobile <= 599px. */
:root {
  --px-font-size-12: 12px;
  --px-font-size-14: 14px;
  --px-font-size-16: 16px;
  --px-font-size-18: 18px;
  --px-font-size-20: 20px;
  --px-font-size-24: 24px;
  --px-font-size-28: 28px;
  --px-font-size-36: 36px;
  --px-font-size-40: 40px;
  --px-letter-spacing-0: 0px;
  --px-font-family-poppins: 'Poppins', system-ui, sans-serif;
  --px-line-height-16: 16px;
  --px-line-height-20: 20px;
  --px-line-height-24: 24px;
  --px-line-height-28: 28px;
  --px-line-height-32: 32px;
  --px-line-height-36: 36px;
  --px-line-height-40: 40px;
  --px-line-height-44: 44px;
  --px-line-height-48: 48px;
  --px-line-height-52: 52px;
  --px-line-height-56: 56px;
  --px-line-height-60: 60px;
  --px-line-height-64: 64px;
  --px-font-style-semibold: 600;
  --px-font-style-regular: 400;
  --px-font-style-medium: 500;
  --px-font-style-light: 300;
  --px-font-style-bold: 700;
  --px-font-style-solid: 900;
  --px-font-family-font-awesome-6-pro: 'Font Awesome 6 Pro';
  --px-shadow-offset-0: 0px;
  --px-shadow-offset-2: 2px;
  --px-shadow-offset-4: 4px;
  --px-shadow-offset-8: 8px;
  --px-shadow-offset-12: 12px;
  --px-shadow-spread-0: 0px;
  --px-shadow-spread-2: 2px;
  --px-shadow-spread-4: 4px;
  --px-shadow-spread-minus-4: -4px;
  --px-shadow-spread-minus-2: -2px;
  --px-blur-2: 2px;
  --px-blur-8: 8px;
  --px-blur-16: 16px;
  --px-blur-20: 20px;
  --px-blur-24: 24px;
  --px-blur-40: 40px;
  --px-blur-90: 90px;
  --px-radius-0: 0px;
  --px-radius-2: 2px;
  --px-radius-4: 4px;
  --px-radius-8: 8px;
  --px-radius-12: 12px;
  --px-radius-16: 16px;
  --px-radius-20: 20px;
  --px-radius-24: 24px;
  --px-radius-999: 999px;
  --px-border-width-4: 4px;
  --px-border-width-0-5: 0.5px;
  --px-spacing-0: 0px;
  --px-spacing-4: 4px;
  --px-spacing-8: 8px;
  --px-spacing-12: 12px;
  --px-spacing-16: 16px;
  --px-spacing-20: 20px;
  --px-spacing-24: 24px;
  --px-spacing-28: 28px;
  --px-spacing-32: 32px;
  --px-spacing-36: 36px;
  --px-spacing-40: 40px;
  --px-spacing-44: 44px;
  --px-spacing-48: 48px;
  --px-spacing-52: 52px;
  --px-spacing-56: 56px;
  --px-color-blue-25: #f5faff;
  --px-spacing-60: 60px;
  --px-color-blue-50: #eff6ff;
  --px-color-blue-100: #dbeafe;
  --px-color-blue-200: #bfdbfe;
  --px-color-blue-300: #93c5fd;
  --px-color-blue-400: #60a5fa;
  --px-color-blue-500: #2563eb;
  --px-color-blue-600: #1d4ed8;
  --px-color-blue-700: #1e40af;
  --px-color-blue-800: #1e3a8a;
  --px-color-gray-50: #f9fafb;
  --px-color-blue-900: #0f286f;
  --px-color-gray-100: #f2f4f7;
  --px-color-gray-200: #eaecf0;
  --px-color-gray-300: #d0d5dd;
  --px-color-gray-400: #98a2b3;
  --px-color-gray-500: #667085;
  --px-color-gray-600: #475467;
  --px-color-gray-700: #344054;
  --px-color-gray-800: #1d2939;
  --px-color-gray-900: #101828;
  --px-color-black: #000000;
  --px-color-white: #ffffff;
  --px-color-amber-50: #fffaeb;
  --px-color-amber-200: #fedf89;
  --px-color-amber-300: #fec84b;
  --px-color-amber-400: #fdb022;
  --px-color-amber-500: #f79009;
  --px-color-amber-600: #dc6803;
  --px-color-amber-700: #b54708;
  --px-color-amber-800: #93370d;
  --px-color-amber-900: #7a2e0e;
  --px-color-green-50: #ecfdf3;
  --px-color-green-200: #a6f4c5;
  --px-color-green-300: #6ce9a6;
  --px-color-green-400: #32d583;
  --px-color-green-500: #12b76a;
  --px-color-green-600: #039855;
  --px-color-green-700: #027a48;
  --px-color-green-800: #05603a;
  --px-color-red-50: #fef3f2;
  --px-color-green-900: #054f31;
  --px-color-red-100: #fee4e2;
  --px-color-red-200: #fecdca;
  --px-color-red-300: #fda29b;
  --px-color-red-400: #f97066;
  --px-color-red-500: #f04438;
  --px-color-red-600: #d92d20;
  --px-color-red-700: #b42318;
  --px-color-red-800: #912018;
  --px-color-red-900: #7a271a;
  --px-color-pink-300: #f9a7d4;
  --px-color-pink-400: #f471b7;
  --px-color-pink-500: #ec4899;
  --px-color-pink-600: #db2877;
  --px-color-pink-700: #be195d;
  --px-color-purple-300: #d8b4fe;
  --px-color-purple-400: #c084fc;
  --px-color-purple-500: #a855f7;
  --px-color-purple-700: #7e22ce;
  --px-color-indigo-300: #a5b4fd;
  --px-color-indigo-400: #818cf8;
  --px-color-indigo-500: #6466f1;
  --px-color-indigo-700: #4338ca;
  --px-color-rose-300: #fda4af;
  --px-color-rose-400: #fb7185;
  --px-color-rose-500: #f43f5f;
  --px-color-rose-700: #be133c;
  --px-color-lime-300: #bef264;
  --px-color-lime-400: #a3e635;
  --px-color-lime-500: #84cc16;
  --px-color-lime-700: #4d7c0f;
  --px-color-gradient-orange-100: #f68b2e;
  --px-color-gradient-orange-200: #f6bb5c;
  --px-color-gradient-yellow-100: #fbd029;
  --px-color-gradient-yellow-200: #eacc81;
  --px-color-gradient-yellow-300: #f0c966;
  --px-color-alpha-black-20: #00000033;
  --px-color-alpha-black-30: #0000004d;
  --px-color-alpha-black-40: #00000066;
  --px-color-alpha-black-50: #00000080;
  --px-color-alpha-black-60: #00000099;
  --px-color-alpha-black-70: #000000b3;
  --px-color-alpha-white-30: #ffffff4d;
  --px-font-size-44: 44px;
  --px-font-size-54: 54px;
  --px-border-width-1: 1px;
  --px-border-width-2: 2px;
  --px-border-width-3: 3px;
  --px-color-alpha-black-4: #0000000a;
  --px-color-alpha-black-8: #00000014;
  --px-color-alpha-black-12: #0000001f;
  --px-color-alpha-black-16: #00000029;
  --px-grid-columns-4: 4;
  --px-grid-columns-8: 8;
  --px-grid-columns-12: 12;
  --px-size-300: 300px;
  --px-size-320: 320px;
  --px-size-400: 400px;
  --px-size-440: 440px;
  --px-size-560: 560px;
  --px-size-600: 600px;
  --px-size-700: 700px;
  --px-size-744: 744px;
  --px-size-960: 960px;
  --px-size-1000: 1000px;
  --px-size-1128: 1128px;
  --px-size-1440: 1440px;
  --px-size-2000: 2000px;
  --px-font-family-readex-pro: 'Noto Sans Arabic', Tahoma, sans-serif;
  --px-font-family-mono-geist-mono: 'Geist Mono', ui-monospace, monospace;
  --px-letter-spacing-1: 1px;
  --px-spacing-2: 2px;
  --px-color-gray-dark-50: #f4f4f5;
  --px-color-gray-dark-200: #d4d4d8;
  --px-color-gray-dark-300: #b4b4ba;
  --px-color-gray-dark-400: #8d8d94;
  --px-color-gray-dark-500: #6b6b72;
  --px-color-gray-dark-600: #4b4b51;
  --px-color-gray-dark-700: #323236;
  --px-color-gray-dark-800: #222225;
  --px-color-gray-dark-900: #161618;
  --px-shadow-offset-1: 1px;
  --px-line-height-76: 76px;
  --px-line-height-72: 72px;
  --px-line-height-80: 80px;
  --px-line-height-68: 68px;
  --px-spacing-64: 64px;
  --px-spacing-280: 280px;
  --px-spacing-80: 80px;
  --px-spacing-96: 96px;
  --px-spacing-120: 120px;
  --px-radius-32: 32px;
  --px-radius-100: 100px;
  --px-spacing-240: 240px;
  --px-spacing-236: 236px;
  --px-spacing-288: 288px;
  --px-spacing-72: 72px;
  --px-spacing-128: 128px;
  --px-spacing-192: 192px;
  --px-spacing-200: 200px;
  --px-spacing-160: 160px;
  --px-spacing-168: 168px;
  --px-spacing-88: 88px;
  --px-shadow-spread-1: 1px;
  --px-size-264: 264px;
  --px-font-size-10: 10px;
  --px-line-height-12: 12px;
  --px-color-alpha-gray-3: #10182808;
  --px-color-alpha-gray-5: #1018280d;
  --px-color-alpha-gray-6: #1018280f;
  --px-color-alpha-gray-8: #10182814;
  --px-color-alpha-gray-10: #1018281a;
  --px-color-alpha-gray-20: #10182833;
  --px-color-alpha-black-10: #0000001a;
  --px-color-alpha-black-24: #0000003d;
  --px-color-alpha-slate-20: #2d364333;
  --px-color-alpha-blue-gray-20: #26323833;
  --px-elevation-xs: 0 4px 8px 0 #0000000a;
  --px-elevation-sm: 0 2px 8px 0 #00000014;
  --px-elevation-md: 0 4px 8px -2px #0000001f;
  --px-elevation-lg: 0 8px 20px -4px #00000029;
  --px-elevation-xl: 0 12px 20px -4px #00000033;
  --px-elevation-2xl: 0 12px 40px -2px #0000004d;
  --px-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb;
  --px-fontsize-0: 10px;
  --px-fontsize-1: 11px;
  --px-fontsize-2: 12px;
  --px-fontsize-3: 14px;
  --px-fontsize-4: 16px;
  --px-fontsize-5: 20px;
  --px-fontsize-6: 24px;
  --px-fontsize-7: 30px;
  --px-fontsize-8: 36px;
  --px-fontsize-9: 44px;
  --px-fontsize-10: 54px;
  --px-fontsize-11: 64px;
  --px-letterspacing-0: 0px;
  --px-letterspacing-1: 1px;
  --px-paragraphspacing-0: 0px;
  --px-text-body-sm-light-font-family: var(--px-font-family-sans);
  --px-text-body-sm-light-font-weight: var(--px-font-weight-light);
  --px-text-body-sm-light-font-size: var(--px-fontsize-2);
  --px-text-body-sm-light-line-height: var(--px-typography-body-sm-line-height);
  --px-text-body-sm-light-letter-spacing: var(--px-letterspacing-0);
  --px-text-body-sm-light-text-transform: var(--px-textcase-none);
  --px-text-body-sm-light-text-decoration: var(--px-textdecoration-none);
  --px-text-body-sm-light: var(--px-text-body-sm-light-font-weight) var(--px-text-body-sm-light-font-size) / var(--px-text-body-sm-light-line-height) var(--px-text-body-sm-light-font-family);
  --px-text-body-sm-regular-font-family: var(--px-font-family-sans);
  --px-text-body-sm-regular-font-weight: var(--px-font-weight-regular);
  --px-text-body-sm-regular-font-size: var(--px-fontsize-2);
  --px-text-body-sm-regular-line-height: var(--px-typography-body-sm-line-height);
  --px-text-body-sm-regular-letter-spacing: var(--px-letterspacing-0);
  --px-text-body-sm-regular-text-transform: var(--px-textcase-none);
  --px-text-body-sm-regular-text-decoration: var(--px-textdecoration-none);
  --px-text-body-sm-regular: var(--px-text-body-sm-regular-font-weight) var(--px-text-body-sm-regular-font-size) / var(--px-text-body-sm-regular-line-height) var(--px-text-body-sm-regular-font-family);
  --px-text-body-sm-medium-font-family: var(--px-font-family-sans);
  --px-text-body-sm-medium-font-weight: var(--px-font-weight-medium);
  --px-text-body-sm-medium-font-size: var(--px-fontsize-2);
  --px-text-body-sm-medium-line-height: var(--px-typography-body-sm-line-height);
  --px-text-body-sm-medium-letter-spacing: var(--px-letterspacing-0);
  --px-text-body-sm-medium-text-transform: var(--px-textcase-none);
  --px-text-body-sm-medium-text-decoration: var(--px-textdecoration-none);
  --px-text-body-sm-medium: var(--px-text-body-sm-medium-font-weight) var(--px-text-body-sm-medium-font-size) / var(--px-text-body-sm-medium-line-height) var(--px-text-body-sm-medium-font-family);
  --px-text-body-sm-semibold-font-family: var(--px-font-family-sans);
  --px-text-body-sm-semibold-font-weight: var(--px-font-weight-semibold);
  --px-text-body-sm-semibold-font-size: var(--px-fontsize-2);
  --px-text-body-sm-semibold-line-height: var(--px-typography-body-sm-line-height);
  --px-text-body-sm-semibold-letter-spacing: var(--px-letterspacing-0);
  --px-text-body-sm-semibold-text-transform: var(--px-textcase-none);
  --px-text-body-sm-semibold-text-decoration: var(--px-textdecoration-none);
  --px-text-body-sm-semibold: var(--px-text-body-sm-semibold-font-weight) var(--px-text-body-sm-semibold-font-size) / var(--px-text-body-sm-semibold-line-height) var(--px-text-body-sm-semibold-font-family);
  --px-text-body-md-regular-font-family: var(--px-font-family-sans);
  --px-text-body-md-regular-font-weight: var(--px-font-weight-regular);
  --px-text-body-md-regular-font-size: var(--px-fontsize-3);
  --px-text-body-md-regular-line-height: var(--px-typography-body-md-line-height);
  --px-text-body-md-regular-letter-spacing: var(--px-letterspacing-0);
  --px-text-body-md-regular-text-transform: var(--px-textcase-none);
  --px-text-body-md-regular-text-decoration: var(--px-textdecoration-none);
  --px-text-body-md-regular: var(--px-text-body-md-regular-font-weight) var(--px-text-body-md-regular-font-size) / var(--px-text-body-md-regular-line-height) var(--px-text-body-md-regular-font-family);
  --px-text-body-md-medium-font-family: var(--px-font-family-sans);
  --px-text-body-md-medium-font-weight: var(--px-font-weight-medium);
  --px-text-body-md-medium-font-size: var(--px-fontsize-3);
  --px-text-body-md-medium-line-height: var(--px-typography-body-md-line-height);
  --px-text-body-md-medium-letter-spacing: var(--px-letterspacing-0);
  --px-text-body-md-medium-text-transform: var(--px-textcase-none);
  --px-text-body-md-medium-text-decoration: var(--px-textdecoration-none);
  --px-text-body-md-medium: var(--px-text-body-md-medium-font-weight) var(--px-text-body-md-medium-font-size) / var(--px-text-body-md-medium-line-height) var(--px-text-body-md-medium-font-family);
  --px-text-body-md-semibold-font-family: var(--px-font-family-sans);
  --px-text-body-md-semibold-font-weight: var(--px-font-weight-semibold);
  --px-text-body-md-semibold-font-size: var(--px-fontsize-3);
  --px-text-body-md-semibold-line-height: var(--px-typography-body-md-line-height);
  --px-text-body-md-semibold-letter-spacing: var(--px-letterspacing-0);
  --px-text-body-md-semibold-text-transform: var(--px-textcase-none);
  --px-text-body-md-semibold-text-decoration: var(--px-textdecoration-none);
  --px-text-body-md-semibold: var(--px-text-body-md-semibold-font-weight) var(--px-text-body-md-semibold-font-size) / var(--px-text-body-md-semibold-line-height) var(--px-text-body-md-semibold-font-family);
  --px-text-body-lg-regular-font-family: var(--px-font-family-sans);
  --px-text-body-lg-regular-font-weight: var(--px-font-weight-regular);
  --px-text-body-lg-regular-font-size: var(--px-fontsize-4);
  --px-text-body-lg-regular-line-height: var(--px-typography-body-lg-line-height);
  --px-text-body-lg-regular-letter-spacing: var(--px-letterspacing-0);
  --px-text-body-lg-regular-text-transform: var(--px-textcase-none);
  --px-text-body-lg-regular-text-decoration: var(--px-textdecoration-none);
  --px-text-body-lg-regular: var(--px-text-body-lg-regular-font-weight) var(--px-text-body-lg-regular-font-size) / var(--px-text-body-lg-regular-line-height) var(--px-text-body-lg-regular-font-family);
  --px-text-body-lg-medium-font-family: var(--px-font-family-sans);
  --px-text-body-lg-medium-font-weight: var(--px-font-weight-medium);
  --px-text-body-lg-medium-font-size: var(--px-fontsize-4);
  --px-text-body-lg-medium-line-height: var(--px-typography-body-lg-line-height);
  --px-text-body-lg-medium-letter-spacing: var(--px-letterspacing-0);
  --px-text-body-lg-medium-text-transform: var(--px-textcase-none);
  --px-text-body-lg-medium-text-decoration: var(--px-textdecoration-none);
  --px-text-body-lg-medium: var(--px-text-body-lg-medium-font-weight) var(--px-text-body-lg-medium-font-size) / var(--px-text-body-lg-medium-line-height) var(--px-text-body-lg-medium-font-family);
  --px-text-body-lg-semibold-font-family: var(--px-font-family-sans);
  --px-text-body-lg-semibold-font-weight: var(--px-font-weight-semibold);
  --px-text-body-lg-semibold-font-size: var(--px-fontsize-4);
  --px-text-body-lg-semibold-line-height: var(--px-typography-body-lg-line-height);
  --px-text-body-lg-semibold-letter-spacing: var(--px-letterspacing-0);
  --px-text-body-lg-semibold-text-transform: var(--px-textcase-none);
  --px-text-body-lg-semibold-text-decoration: var(--px-textdecoration-none);
  --px-text-body-lg-semibold: var(--px-text-body-lg-semibold-font-weight) var(--px-text-body-lg-semibold-font-size) / var(--px-text-body-lg-semibold-line-height) var(--px-text-body-lg-semibold-font-family);
  --px-text-body-lg-bold-font-family: var(--px-font-family-sans);
  --px-text-body-lg-bold-font-weight: var(--px-font-weight-bold);
  --px-text-body-lg-bold-font-size: var(--px-fontsize-4);
  --px-text-body-lg-bold-line-height: var(--px-typography-body-lg-line-height);
  --px-text-body-lg-bold-letter-spacing: var(--px-letterspacing-0);
  --px-text-body-lg-bold-text-transform: var(--px-textcase-none);
  --px-text-body-lg-bold-text-decoration: var(--px-textdecoration-none);
  --px-text-body-lg-bold: var(--px-text-body-lg-bold-font-weight) var(--px-text-body-lg-bold-font-size) / var(--px-text-body-lg-bold-line-height) var(--px-text-body-lg-bold-font-family);
  --px-text-button-md-font-family: var(--px-font-family-sans);
  --px-text-button-md-font-weight: 500;
  --px-text-button-md-font-size: var(--px-fontsize-3);
  --px-text-button-md-line-height: var(--px-typography-body-md-line-height);
  --px-text-button-md-letter-spacing: var(--px-letterspacing-0);
  --px-text-button-md-text-transform: var(--px-textcase-none);
  --px-text-button-md-text-decoration: var(--px-textdecoration-none);
  --px-text-button-md: var(--px-text-button-md-font-weight) var(--px-text-button-md-font-size) / var(--px-text-button-md-line-height) var(--px-text-button-md-font-family);
  --px-text-button-sm-medium-font-family: var(--px-font-family-sans);
  --px-text-button-sm-medium-font-weight: 500;
  --px-text-button-sm-medium-font-size: var(--px-fontsize-2);
  --px-text-button-sm-medium-line-height: var(--px-typography-body-sm-line-height);
  --px-text-button-sm-medium-letter-spacing: var(--px-letterspacing-0);
  --px-text-button-sm-medium-text-transform: var(--px-textcase-none);
  --px-text-button-sm-medium-text-decoration: var(--px-textdecoration-none);
  --px-text-button-sm-medium: var(--px-text-button-sm-medium-font-weight) var(--px-text-button-sm-medium-font-size) / var(--px-text-button-sm-medium-line-height) var(--px-text-button-sm-medium-font-family);
  --px-text-button-lg-medium-font-family: var(--px-font-family-sans);
  --px-text-button-lg-medium-font-weight: 500;
  --px-text-button-lg-medium-font-size: var(--px-fontsize-4);
  --px-text-button-lg-medium-line-height: var(--px-typography-body-lg-line-height);
  --px-text-button-lg-medium-letter-spacing: var(--px-letterspacing-0);
  --px-text-button-lg-medium-text-transform: var(--px-textcase-none);
  --px-text-button-lg-medium-text-decoration: var(--px-textdecoration-none);
  --px-text-button-lg-medium: var(--px-text-button-lg-medium-font-weight) var(--px-text-button-lg-medium-font-size) / var(--px-text-button-lg-medium-line-height) var(--px-text-button-lg-medium-font-family);
  --px-text-headline-sm-medium-font-family: var(--px-font-family-sans);
  --px-text-headline-sm-medium-font-weight: var(--px-font-weight-medium);
  --px-text-headline-sm-medium-font-size: var(--px-fontsize-4);
  --px-text-headline-sm-medium-line-height: var(--px-typography-body-lg-line-height);
  --px-text-headline-sm-medium-letter-spacing: var(--px-letterspacing-0);
  --px-text-headline-sm-medium-text-transform: var(--px-textcase-none);
  --px-text-headline-sm-medium-text-decoration: var(--px-textdecoration-none);
  --px-text-headline-sm-medium: var(--px-text-headline-sm-medium-font-weight) var(--px-text-headline-sm-medium-font-size) / var(--px-text-headline-sm-medium-line-height) var(--px-text-headline-sm-medium-font-family);
  --px-text-headline-sm-semibold-font-family: var(--px-font-family-sans);
  --px-text-headline-sm-semibold-font-weight: var(--px-font-weight-semibold);
  --px-text-headline-sm-semibold-font-size: var(--px-fontsize-4);
  --px-text-headline-sm-semibold-line-height: var(--px-typography-body-lg-line-height);
  --px-text-headline-sm-semibold-letter-spacing: var(--px-letterspacing-0);
  --px-text-headline-sm-semibold-text-transform: var(--px-textcase-none);
  --px-text-headline-sm-semibold-text-decoration: var(--px-textdecoration-none);
  --px-text-headline-sm-semibold: var(--px-text-headline-sm-semibold-font-weight) var(--px-text-headline-sm-semibold-font-size) / var(--px-text-headline-sm-semibold-line-height) var(--px-text-headline-sm-semibold-font-family);
  --px-text-headline-sm-bold-font-family: var(--px-font-family-sans);
  --px-text-headline-sm-bold-font-weight: var(--px-font-weight-bold);
  --px-text-headline-sm-bold-font-size: var(--px-fontsize-4);
  --px-text-headline-sm-bold-line-height: var(--px-typography-body-lg-line-height);
  --px-text-headline-sm-bold-letter-spacing: var(--px-letterspacing-0);
  --px-text-headline-sm-bold-text-transform: var(--px-textcase-none);
  --px-text-headline-sm-bold-text-decoration: var(--px-textdecoration-none);
  --px-text-headline-sm-bold: var(--px-text-headline-sm-bold-font-weight) var(--px-text-headline-sm-bold-font-size) / var(--px-text-headline-sm-bold-line-height) var(--px-text-headline-sm-bold-font-family);
  --px-text-headline-md-medium-font-family: var(--px-font-family-sans);
  --px-text-headline-md-medium-font-weight: var(--px-font-weight-medium);
  --px-text-headline-md-medium-font-size: var(--px-fontsize-5);
  --px-text-headline-md-medium-line-height: var(--px-typography-headline-md-line-height);
  --px-text-headline-md-medium-letter-spacing: var(--px-letterspacing-0);
  --px-text-headline-md-medium-text-transform: var(--px-textcase-none);
  --px-text-headline-md-medium-text-decoration: var(--px-textdecoration-none);
  --px-text-headline-md-medium: var(--px-text-headline-md-medium-font-weight) var(--px-text-headline-md-medium-font-size) / var(--px-text-headline-md-medium-line-height) var(--px-text-headline-md-medium-font-family);
  --px-text-headline-md-semibold-font-family: var(--px-font-family-sans);
  --px-text-headline-md-semibold-font-weight: var(--px-font-weight-semibold);
  --px-text-headline-md-semibold-font-size: var(--px-fontsize-5);
  --px-text-headline-md-semibold-line-height: var(--px-typography-headline-md-line-height);
  --px-text-headline-md-semibold-letter-spacing: var(--px-letterspacing-0);
  --px-text-headline-md-semibold-text-transform: var(--px-textcase-none);
  --px-text-headline-md-semibold-text-decoration: var(--px-textdecoration-none);
  --px-text-headline-md-semibold: var(--px-text-headline-md-semibold-font-weight) var(--px-text-headline-md-semibold-font-size) / var(--px-text-headline-md-semibold-line-height) var(--px-text-headline-md-semibold-font-family);
  --px-text-headline-lg-medium-font-family: var(--px-font-family-sans);
  --px-text-headline-lg-medium-font-weight: var(--px-font-weight-medium);
  --px-text-headline-lg-medium-font-size: var(--px-fontsize-6);
  --px-text-headline-lg-medium-line-height: var(--px-typography-headline-lg-line-height);
  --px-text-headline-lg-medium-letter-spacing: var(--px-letterspacing-0);
  --px-text-headline-lg-medium-text-transform: var(--px-textcase-none);
  --px-text-headline-lg-medium-text-decoration: var(--px-textdecoration-none);
  --px-text-headline-lg-medium: var(--px-text-headline-lg-medium-font-weight) var(--px-text-headline-lg-medium-font-size) / var(--px-text-headline-lg-medium-line-height) var(--px-text-headline-lg-medium-font-family);
  --px-text-headline-lg-semibold-font-family: var(--px-font-family-sans);
  --px-text-headline-lg-semibold-font-weight: var(--px-font-weight-semibold);
  --px-text-headline-lg-semibold-font-size: var(--px-fontsize-6);
  --px-text-headline-lg-semibold-line-height: var(--px-typography-headline-lg-line-height);
  --px-text-headline-lg-semibold-letter-spacing: var(--px-letterspacing-0);
  --px-text-headline-lg-semibold-text-transform: var(--px-textcase-none);
  --px-text-headline-lg-semibold-text-decoration: var(--px-textdecoration-none);
  --px-text-headline-lg-semibold: var(--px-text-headline-lg-semibold-font-weight) var(--px-text-headline-lg-semibold-font-size) / var(--px-text-headline-lg-semibold-line-height) var(--px-text-headline-lg-semibold-font-family);
  --px-text-headline-xl-semibold-font-family: var(--px-font-family-sans);
  --px-text-headline-xl-semibold-font-weight: var(--px-font-weight-semibold);
  --px-text-headline-xl-semibold-font-size: var(--px-fontsize-7);
  --px-text-headline-xl-semibold-line-height: var(--px-typography-headline-xl-line-height);
  --px-text-headline-xl-semibold-letter-spacing: var(--px-letterspacing-0);
  --px-text-headline-xl-semibold-text-transform: var(--px-textcase-none);
  --px-text-headline-xl-semibold-text-decoration: var(--px-textdecoration-none);
  --px-text-headline-xl-semibold: var(--px-text-headline-xl-semibold-font-weight) var(--px-text-headline-xl-semibold-font-size) / var(--px-text-headline-xl-semibold-line-height) var(--px-text-headline-xl-semibold-font-family);
  --px-text-display-sm-bold-font-family: var(--px-font-family-sans);
  --px-text-display-sm-bold-font-weight: var(--px-font-weight-bold);
  --px-text-display-sm-bold-font-size: var(--px-fontsize-8);
  --px-text-display-sm-bold-line-height: var(--px-typography-display-sm-line-height);
  --px-text-display-sm-bold-letter-spacing: var(--px-letterspacing-0);
  --px-text-display-sm-bold-text-transform: var(--px-textcase-none);
  --px-text-display-sm-bold-text-decoration: var(--px-textdecoration-none);
  --px-text-display-sm-bold: var(--px-text-display-sm-bold-font-weight) var(--px-text-display-sm-bold-font-size) / var(--px-text-display-sm-bold-line-height) var(--px-text-display-sm-bold-font-family);
  --px-text-display-sm-semibold-font-family: var(--px-font-family-sans);
  --px-text-display-sm-semibold-font-weight: var(--px-font-weight-semibold);
  --px-text-display-sm-semibold-font-size: var(--px-fontsize-8);
  --px-text-display-sm-semibold-line-height: var(--px-typography-display-sm-line-height);
  --px-text-display-sm-semibold-letter-spacing: var(--px-letterspacing-0);
  --px-text-display-sm-semibold-text-transform: var(--px-textcase-none);
  --px-text-display-sm-semibold-text-decoration: var(--px-textdecoration-none);
  --px-text-display-sm-semibold: var(--px-text-display-sm-semibold-font-weight) var(--px-text-display-sm-semibold-font-size) / var(--px-text-display-sm-semibold-line-height) var(--px-text-display-sm-semibold-font-family);
  --px-text-display-md-regular-font-family: var(--px-font-family-sans);
  --px-text-display-md-regular-font-weight: var(--px-font-weight-regular);
  --px-text-display-md-regular-font-size: var(--px-fontsize-9);
  --px-text-display-md-regular-line-height: var(--px-typography-display-md-line-height);
  --px-text-display-md-regular-letter-spacing: var(--px-letterspacing-0);
  --px-text-display-md-regular-text-transform: var(--px-textcase-none);
  --px-text-display-md-regular-text-decoration: var(--px-textdecoration-none);
  --px-text-display-md-regular: var(--px-text-display-md-regular-font-weight) var(--px-text-display-md-regular-font-size) / var(--px-text-display-md-regular-line-height) var(--px-text-display-md-regular-font-family);
  --px-text-display-md-semibold-font-family: var(--px-font-family-sans);
  --px-text-display-md-semibold-font-weight: var(--px-font-weight-semibold);
  --px-text-display-md-semibold-font-size: var(--px-fontsize-9);
  --px-text-display-md-semibold-line-height: var(--px-typography-display-md-line-height);
  --px-text-display-md-semibold-letter-spacing: var(--px-letterspacing-0);
  --px-text-display-md-semibold-text-transform: var(--px-textcase-none);
  --px-text-display-md-semibold-text-decoration: var(--px-textdecoration-none);
  --px-text-display-md-semibold: var(--px-text-display-md-semibold-font-weight) var(--px-text-display-md-semibold-font-size) / var(--px-text-display-md-semibold-line-height) var(--px-text-display-md-semibold-font-family);
  --px-text-display-xl-semibold-font-family: var(--px-font-family-sans);
  --px-text-display-xl-semibold-font-weight: var(--px-font-weight-semibold);
  --px-text-display-xl-semibold-font-size: var(--px-fontsize-11);
  --px-text-display-xl-semibold-line-height: var(--px-typography-display-xl-line-height);
  --px-text-display-xl-semibold-letter-spacing: var(--px-letterspacing-0);
  --px-text-display-xl-semibold-text-transform: var(--px-textcase-none);
  --px-text-display-xl-semibold-text-decoration: var(--px-textdecoration-none);
  --px-text-display-xl-semibold: var(--px-text-display-xl-semibold-font-weight) var(--px-text-display-xl-semibold-font-size) / var(--px-text-display-xl-semibold-line-height) var(--px-text-display-xl-semibold-font-family);
  --px-text-display-lg-semibold-font-family: var(--px-font-family-sans);
  --px-text-display-lg-semibold-font-weight: var(--px-font-weight-semibold);
  --px-text-display-lg-semibold-font-size: var(--px-fontsize-10);
  --px-text-display-lg-semibold-line-height: var(--px-typography-display-lg-line-height);
  --px-text-display-lg-semibold-letter-spacing: var(--px-letterspacing-0);
  --px-text-display-lg-semibold-text-transform: var(--px-textcase-none);
  --px-text-display-lg-semibold-text-decoration: var(--px-textdecoration-none);
  --px-text-display-lg-semibold: var(--px-text-display-lg-semibold-font-weight) var(--px-text-display-lg-semibold-font-size) / var(--px-text-display-lg-semibold-line-height) var(--px-text-display-lg-semibold-font-family);
  --px-text-label-sm-regular-font-family: var(--px-font-family-sans);
  --px-text-label-sm-regular-font-weight: var(--px-font-weight-regular);
  --px-text-label-sm-regular-font-size: var(--px-fontsize-2);
  --px-text-label-sm-regular-line-height: var(--px-typography-body-sm-line-height);
  --px-text-label-sm-regular-letter-spacing: var(--px-letterspacing-0);
  --px-text-label-sm-regular-text-transform: var(--px-textcase-none);
  --px-text-label-sm-regular-text-decoration: var(--px-textdecoration-none);
  --px-text-label-sm-regular: var(--px-text-label-sm-regular-font-weight) var(--px-text-label-sm-regular-font-size) / var(--px-text-label-sm-regular-line-height) var(--px-text-label-sm-regular-font-family);
  --px-text-label-sm-medium-font-family: var(--px-font-family-sans);
  --px-text-label-sm-medium-font-weight: var(--px-font-weight-medium);
  --px-text-label-sm-medium-font-size: var(--px-fontsize-2);
  --px-text-label-sm-medium-line-height: var(--px-typography-body-sm-line-height);
  --px-text-label-sm-medium-letter-spacing: var(--px-letterspacing-0);
  --px-text-label-sm-medium-text-transform: var(--px-textcase-none);
  --px-text-label-sm-medium-text-decoration: var(--px-textdecoration-none);
  --px-text-label-sm-medium: var(--px-text-label-sm-medium-font-weight) var(--px-text-label-sm-medium-font-size) / var(--px-text-label-sm-medium-line-height) var(--px-text-label-sm-medium-font-family);
  --px-text-label-sm-semibold-font-family: var(--px-font-family-sans);
  --px-text-label-sm-semibold-font-weight: var(--px-font-weight-semibold);
  --px-text-label-sm-semibold-font-size: var(--px-fontsize-2);
  --px-text-label-sm-semibold-line-height: var(--px-typography-body-sm-line-height);
  --px-text-label-sm-semibold-letter-spacing: var(--px-letterspacing-0);
  --px-text-label-sm-semibold-text-transform: var(--px-textcase-none);
  --px-text-label-sm-semibold-text-decoration: var(--px-textdecoration-none);
  --px-text-label-sm-semibold: var(--px-text-label-sm-semibold-font-weight) var(--px-text-label-sm-semibold-font-size) / var(--px-text-label-sm-semibold-line-height) var(--px-text-label-sm-semibold-font-family);
  --px-text-label-md-regular-font-family: var(--px-font-family-sans);
  --px-text-label-md-regular-font-weight: var(--px-font-weight-regular);
  --px-text-label-md-regular-font-size: var(--px-fontsize-3);
  --px-text-label-md-regular-line-height: var(--px-typography-body-md-line-height);
  --px-text-label-md-regular-letter-spacing: var(--px-letterspacing-0);
  --px-text-label-md-regular-text-transform: var(--px-textcase-none);
  --px-text-label-md-regular-text-decoration: var(--px-textdecoration-none);
  --px-text-label-md-regular: var(--px-text-label-md-regular-font-weight) var(--px-text-label-md-regular-font-size) / var(--px-text-label-md-regular-line-height) var(--px-text-label-md-regular-font-family);
  --px-text-label-md-medium-font-family: var(--px-font-family-sans);
  --px-text-label-md-medium-font-weight: var(--px-font-weight-medium);
  --px-text-label-md-medium-font-size: var(--px-fontsize-3);
  --px-text-label-md-medium-line-height: var(--px-typography-body-md-line-height);
  --px-text-label-md-medium-letter-spacing: var(--px-letterspacing-0);
  --px-text-label-md-medium-text-transform: var(--px-textcase-none);
  --px-text-label-md-medium-text-decoration: var(--px-textdecoration-none);
  --px-text-label-md-medium: var(--px-text-label-md-medium-font-weight) var(--px-text-label-md-medium-font-size) / var(--px-text-label-md-medium-line-height) var(--px-text-label-md-medium-font-family);
  --px-text-label-md-semibold-font-family: var(--px-font-family-sans);
  --px-text-label-md-semibold-font-weight: var(--px-font-weight-semibold);
  --px-text-label-md-semibold-font-size: var(--px-fontsize-3);
  --px-text-label-md-semibold-line-height: var(--px-typography-body-md-line-height);
  --px-text-label-md-semibold-letter-spacing: var(--px-letterspacing-0);
  --px-text-label-md-semibold-text-transform: var(--px-textcase-none);
  --px-text-label-md-semibold-text-decoration: var(--px-textdecoration-none);
  --px-text-label-md-semibold: var(--px-text-label-md-semibold-font-weight) var(--px-text-label-md-semibold-font-size) / var(--px-text-label-md-semibold-line-height) var(--px-text-label-md-semibold-font-family);
  --px-text-label-lg-regular-font-family: var(--px-font-family-sans);
  --px-text-label-lg-regular-font-weight: var(--px-font-weight-regular);
  --px-text-label-lg-regular-font-size: var(--px-fontsize-4);
  --px-text-label-lg-regular-line-height: var(--px-typography-body-lg-line-height);
  --px-text-label-lg-regular-letter-spacing: var(--px-letterspacing-0);
  --px-text-label-lg-regular-text-transform: var(--px-textcase-none);
  --px-text-label-lg-regular-text-decoration: var(--px-textdecoration-none);
  --px-text-label-lg-regular: var(--px-text-label-lg-regular-font-weight) var(--px-text-label-lg-regular-font-size) / var(--px-text-label-lg-regular-line-height) var(--px-text-label-lg-regular-font-family);
  --px-text-label-lg-medium-font-family: var(--px-font-family-sans);
  --px-text-label-lg-medium-font-weight: var(--px-font-weight-medium);
  --px-text-label-lg-medium-font-size: var(--px-fontsize-4);
  --px-text-label-lg-medium-line-height: var(--px-typography-body-lg-line-height);
  --px-text-label-lg-medium-letter-spacing: var(--px-letterspacing-0);
  --px-text-label-lg-medium-text-transform: var(--px-textcase-none);
  --px-text-label-lg-medium-text-decoration: var(--px-textdecoration-none);
  --px-text-label-lg-medium: var(--px-text-label-lg-medium-font-weight) var(--px-text-label-lg-medium-font-size) / var(--px-text-label-lg-medium-line-height) var(--px-text-label-lg-medium-font-family);
  --px-text-label-lg-semibold-font-family: var(--px-font-family-sans);
  --px-text-label-lg-semibold-font-weight: var(--px-font-weight-semibold);
  --px-text-label-lg-semibold-font-size: var(--px-fontsize-4);
  --px-text-label-lg-semibold-line-height: var(--px-typography-body-lg-line-height);
  --px-text-label-lg-semibold-letter-spacing: var(--px-letterspacing-0);
  --px-text-label-lg-semibold-text-transform: var(--px-textcase-none);
  --px-text-label-lg-semibold-text-decoration: var(--px-textdecoration-none);
  --px-text-label-lg-semibold: var(--px-text-label-lg-semibold-font-weight) var(--px-text-label-lg-semibold-font-size) / var(--px-text-label-lg-semibold-line-height) var(--px-text-label-lg-semibold-font-family);
  --px-text-caption-regular-font-family: var(--px-font-family-sans);
  --px-text-caption-regular-font-weight: var(--px-font-weight-regular);
  --px-text-caption-regular-font-size: var(--px-fontsize-2);
  --px-text-caption-regular-line-height: var(--px-typography-body-sm-line-height);
  --px-text-caption-regular-letter-spacing: var(--px-letterspacing-0);
  --px-text-caption-regular-text-transform: var(--px-textcase-none);
  --px-text-caption-regular-text-decoration: var(--px-textdecoration-none);
  --px-text-caption-regular: var(--px-text-caption-regular-font-weight) var(--px-text-caption-regular-font-size) / var(--px-text-caption-regular-line-height) var(--px-text-caption-regular-font-family);
  --px-text-caption-medium-font-family: var(--px-font-family-sans);
  --px-text-caption-medium-font-weight: var(--px-font-weight-medium);
  --px-text-caption-medium-font-size: var(--px-fontsize-2);
  --px-text-caption-medium-line-height: var(--px-typography-body-sm-line-height);
  --px-text-caption-medium-letter-spacing: var(--px-letterspacing-0);
  --px-text-caption-medium-text-transform: var(--px-textcase-none);
  --px-text-caption-medium-text-decoration: var(--px-textdecoration-none);
  --px-text-caption-medium: var(--px-text-caption-medium-font-weight) var(--px-text-caption-medium-font-size) / var(--px-text-caption-medium-line-height) var(--px-text-caption-medium-font-family);
  --px-text-overline-regular-font-family: var(--px-font-family-sans);
  --px-text-overline-regular-font-weight: var(--px-font-weight-medium);
  --px-text-overline-regular-font-size: var(--px-fontsize-1);
  --px-text-overline-regular-line-height: var(--px-typography-body-sm-line-height);
  --px-text-overline-regular-letter-spacing: var(--px-letterspacing-1);
  --px-text-overline-regular-text-transform: var(--px-textcase-uppercase);
  --px-text-overline-regular-text-decoration: var(--px-textdecoration-none);
  --px-text-overline-regular: var(--px-text-overline-regular-font-weight) var(--px-text-overline-regular-font-size) / var(--px-text-overline-regular-line-height) var(--px-text-overline-regular-font-family);
  --px-text-overline-semibold-font-family: var(--px-font-family-sans);
  --px-text-overline-semibold-font-weight: var(--px-font-weight-semibold);
  --px-text-overline-semibold-font-size: var(--px-fontsize-1);
  --px-text-overline-semibold-line-height: var(--px-typography-body-sm-line-height);
  --px-text-overline-semibold-letter-spacing: var(--px-letterspacing-1);
  --px-text-overline-semibold-text-transform: var(--px-textcase-uppercase);
  --px-text-overline-semibold-text-decoration: var(--px-textdecoration-none);
  --px-text-overline-semibold: var(--px-text-overline-semibold-font-weight) var(--px-text-overline-semibold-font-size) / var(--px-text-overline-semibold-line-height) var(--px-text-overline-semibold-font-family);
  --px-text-code-sm-font-family: var(--px-font-family-mono);
  --px-text-code-sm-font-weight: var(--px-font-weight-regular);
  --px-text-code-sm-font-size: var(--px-fontsize-2);
  --px-text-code-sm-line-height: var(--px-typography-body-sm-line-height);
  --px-text-code-sm-letter-spacing: var(--px-letterspacing-0);
  --px-text-code-sm-text-transform: var(--px-textcase-none);
  --px-text-code-sm-text-decoration: var(--px-textdecoration-none);
  --px-text-code-sm: var(--px-text-code-sm-font-weight) var(--px-text-code-sm-font-size) / var(--px-text-code-sm-line-height) var(--px-text-code-sm-font-family);
  --px-text-code-md-font-family: var(--px-font-family-mono);
  --px-text-code-md-font-weight: var(--px-font-weight-regular);
  --px-text-code-md-font-size: var(--px-fontsize-3);
  --px-text-code-md-line-height: var(--px-typography-body-md-line-height);
  --px-text-code-md-letter-spacing: var(--px-letterspacing-0);
  --px-text-code-md-text-transform: var(--px-textcase-none);
  --px-text-code-md-text-decoration: var(--px-textdecoration-none);
  --px-text-code-md: var(--px-text-code-md-font-weight) var(--px-text-code-md-font-size) / var(--px-text-code-md-line-height) var(--px-text-code-md-font-family);
  --px-text-chart-axis-xs-font-family: var(--px-font-family-sans);
  --px-text-chart-axis-xs-font-weight: 400;
  --px-text-chart-axis-xs-font-size: var(--px-fontsize-0);
  --px-text-chart-axis-xs-line-height: var(--px-line-height-12);
  --px-text-chart-axis-xs-letter-spacing: var(--px-letterspacing-0);
  --px-text-chart-axis-xs-text-transform: var(--px-textcase-none);
  --px-text-chart-axis-xs-text-decoration: var(--px-textdecoration-none);
  --px-text-chart-axis-xs: var(--px-text-chart-axis-xs-font-weight) var(--px-text-chart-axis-xs-font-size) / var(--px-text-chart-axis-xs-line-height) var(--px-text-chart-axis-xs-font-family);
  --px-textcase-none: none;
  --px-textcase-uppercase: uppercase;
  --px-textdecoration-none: none;
  --px-paragraphindent-0: 0px;
}
:root {
  --px-color-brand-25: var(--px-color-blue-25);
  --px-color-brand-50: var(--px-color-blue-50);
  --px-color-brand-100: var(--px-color-blue-100);
  --px-color-brand-200: var(--px-color-blue-200);
  --px-color-brand-300: var(--px-color-blue-300);
  --px-color-brand-400: var(--px-color-blue-400);
  --px-color-brand-500: var(--px-color-blue-500);
  --px-color-brand-600: var(--px-color-blue-600);
  --px-color-brand-700: var(--px-color-blue-700);
  --px-color-brand-800: var(--px-color-blue-800);
  --px-color-brand-900: var(--px-color-blue-900);
}
:root {
  --px-layout-frame-width: var(--px-size-1440);
  --px-layout-show-menu: 0;
  --px-layout-show-buttons: 1;
  --px-layout-show-menu-icon: 0;
  --px-layout-show-filler: 0;
  --px-layout-breakpoint: large;
  --px-layout-margin: var(--px-spacing-44);
  --px-layout-gutter: var(--px-spacing-32);
  --px-layout-max-width: var(--px-size-2000);
  --px-layout-min-width: var(--px-size-960);
  --px-layout-container-width: var(--px-size-1128);
  --px-layout-columns: var(--px-grid-columns-12);
  --px-layout-video-width: var(--px-size-1000);
  --px-font-size-body-sm: var(--px-font-size-12);
  --px-font-size-body-md: var(--px-font-size-14);
  --px-font-size-body-lg: var(--px-font-size-16);
  --px-font-size-label-sm: var(--px-font-size-12);
  --px-font-size-label-md: var(--px-font-size-14);
  --px-font-size-label-lg: var(--px-font-size-16);
  --px-font-size-headline-sm: var(--px-font-size-16);
  --px-font-size-headline-md: var(--px-font-size-20);
  --px-font-size-headline-lg: var(--px-font-size-24);
  --px-font-size-display-sm: var(--px-font-size-36);
  --px-font-size-display-md: var(--px-font-size-44);
  --px-font-size-display-lg: var(--px-font-size-54);
  --px-font-size-button-sm: var(--px-font-size-12);
  --px-font-size-button-md: var(--px-font-size-14);
  --px-font-size-button-lg: var(--px-font-size-16);
  --px-line-height-label-sm: var(--px-line-height-16);
  --px-line-height-label-md: var(--px-line-height-20);
  --px-line-height-label-lg: var(--px-line-height-24);
  --px-line-height-headline-sm: var(--px-line-height-24);
  --px-line-height-headline-md: var(--px-line-height-28);
  --px-line-height-headline-lg: var(--px-line-height-32);
  --px-line-height-display-sm: var(--px-line-height-44);
  --px-line-height-display-md: var(--px-line-height-52);
  --px-line-height-display-lg: var(--px-line-height-64);
  --px-line-height-button-sm: var(--px-line-height-16);
  --px-line-height-button-md: var(--px-line-height-20);
  --px-line-height-button-lg: var(--px-line-height-24);
  --px-line-height-body-sm: var(--px-line-height-16);
  --px-line-height-body-md: var(--px-line-height-20);
  --px-line-height-body-lg: var(--px-line-height-24);
  --px-spacing-xs: var(--px-spacing-4);
  --px-spacing-sm: var(--px-spacing-8);
  --px-spacing-md: var(--px-spacing-12);
  --px-spacing-lg: var(--px-spacing-16);
  --px-spacing-xl: var(--px-spacing-20);
  --px-spacing-2xl: var(--px-spacing-24);
  --px-spacing-3xl: var(--px-spacing-28);
  --px-spacing-4xl: var(--px-spacing-32);
  --px-spacing-5xl: var(--px-spacing-36);
  --px-spacing-6xl: var(--px-spacing-40);
  --px-spacing-7xl: var(--px-spacing-44);
  --px-spacing-8xl: var(--px-spacing-48);
  --px-spacing-9xl: var(--px-spacing-52);
  --px-spacing-10xl: var(--px-spacing-56);
  --px-spacing-11xl: var(--px-spacing-60);
  --px-spacing-none: var(--px-spacing-0);
  --px-blur-sm: var(--px-blur-8);
  --px-blur-md: var(--px-blur-16);
  --px-blur-2xl: var(--px-blur-24);
  --px-blur-xl: var(--px-blur-20);
  --px-blur-3xl: var(--px-blur-40);
  --px-blur-4xl: var(--px-blur-90);
  --px-radius-none: var(--px-radius-0);
  --px-radius-xs: var(--px-radius-2);
  --px-radius-sm: var(--px-radius-4);
  --px-radius-md: var(--px-radius-8);
  --px-radius-lg: var(--px-radius-12);
  --px-radius-xl: var(--px-radius-16);
  --px-radius-2xl: var(--px-radius-20);
  --px-radius-3xl: var(--px-radius-24);
  --px-radius-full: var(--px-radius-999);
  --px-border-width-xs: var(--px-border-width-0-5);
  --px-border-width-md: var(--px-border-width-2);
  --px-border-width-lg: var(--px-border-width-3);
  --px-border-width-xl: var(--px-border-width-4);
  --px-border-width-sm: var(--px-border-width-1);
  --px-line-height-ar-body-sm: var(--px-line-height-20);
  --px-line-height-ar-body-md: var(--px-line-height-24);
  --px-line-height-ar-body-lg: var(--px-line-height-28);
  --px-line-height-ar-label-sm: var(--px-line-height-20);
  --px-line-height-ar-label-md: var(--px-line-height-24);
  --px-line-height-ar-label-lg: var(--px-line-height-28);
  --px-line-height-ar-button-sm: var(--px-line-height-20);
  --px-line-height-ar-button-md: var(--px-line-height-24);
  --px-line-height-ar-button-lg: var(--px-line-height-28);
  --px-line-height-ar-headline-sm: var(--px-line-height-24);
  --px-line-height-ar-headline-md: var(--px-line-height-32);
  --px-line-height-ar-headline-lg: var(--px-line-height-36);
  --px-line-height-ar-display-sm: var(--px-line-height-52);
  --px-line-height-ar-display-md: var(--px-line-height-60);
  --px-line-height-ar-display-lg: var(--px-line-height-76);
  --px-elevation-xs-offset-y: var(--px-shadow-offset-4);
  --px-elevation-xs-blur: var(--px-blur-8);
  --px-elevation-xs-spread: var(--px-shadow-spread-0);
  --px-elevation-sm-offset-y: var(--px-shadow-offset-2);
  --px-elevation-sm-blur: var(--px-blur-8);
  --px-elevation-sm-spread: var(--px-shadow-spread-0);
  --px-elevation-md-offset-y: var(--px-shadow-offset-4);
  --px-elevation-md-blur: var(--px-blur-8);
  --px-elevation-md-spread: var(--px-shadow-spread-minus-2);
  --px-elevation-lg-offset-y: var(--px-shadow-offset-8);
  --px-elevation-lg-blur: var(--px-blur-20);
  --px-elevation-lg-spread: var(--px-shadow-spread-minus-4);
  --px-elevation-xl-offset-y: var(--px-shadow-offset-12);
  --px-elevation-xl-blur: var(--px-blur-20);
  --px-elevation-xl-spread: var(--px-shadow-spread-minus-4);
  --px-elevation-2xl-offset-y: var(--px-shadow-offset-12);
  --px-elevation-2xl-blur: var(--px-blur-40);
  --px-elevation-2xl-spread: var(--px-shadow-spread-minus-2);
  --px-font-size-display-xl: 64px;
  --px-line-height-display-xl: var(--px-line-height-72);
  --px-line-height-ar-display-xl: var(--px-line-height-80);
  --px-font-size-headline-xl: 30px;
  --px-line-height-headline-xl: var(--px-line-height-40);
  --px-line-height-ar-headline-xl: var(--px-line-height-40);
  --px-font-size-overline: 11px;
  --px-line-height-overline: var(--px-line-height-16);
  --px-line-height-ar-overline: var(--px-line-height-20);
  --px-font-size-code-sm: 12px;
  --px-line-height-code-sm: var(--px-line-height-16);
  --px-line-height-ar-code-sm: var(--px-line-height-20);
  --px-font-size-code-md: 14px;
  --px-line-height-code-md: var(--px-line-height-20);
  --px-line-height-ar-code-md: var(--px-line-height-20);
}
:root {
  --px-color-content-brand-default: var(--px-color-brand-500);
  --px-color-content-brand-hover: var(--px-color-brand-600);
  --px-color-content-brand-pressed: var(--px-color-brand-700);
  --px-color-content-neutral-primary: var(--px-color-gray-900);
  --px-color-content-neutral-tertiary: var(--px-color-gray-500);
  --px-color-content-neutral-secondary: var(--px-color-gray-600);
  --px-color-content-neutral-placeholder: var(--px-color-gray-500);
  --px-color-content-danger-default: var(--px-color-red-700);
  --px-color-content-danger-hover: var(--px-color-red-800);
  --px-color-content-danger-pressed: var(--px-color-red-900);
  --px-color-content-success-default: var(--px-color-green-700);
  --px-color-content-success-hover: var(--px-color-green-800);
  --px-color-content-warning-default: var(--px-color-amber-700);
  --px-color-content-warning-hover: var(--px-color-amber-800);
  --px-color-content-info-default: var(--px-color-blue-600);
  --px-color-content-info-hover: var(--px-color-blue-700);
  --px-color-content-accent-blue: var(--px-color-blue-700);
  --px-color-content-accent-pink: var(--px-color-pink-700);
  --px-color-content-accent-purple: var(--px-color-purple-700);
  --px-color-content-accent-indigo: var(--px-color-indigo-700);
  --px-color-content-accent-rose: var(--px-color-rose-700);
  --px-color-content-accent-lime: var(--px-color-lime-700);
  --px-color-content-accent-green: var(--px-color-green-700);
  --px-color-content-accent-red: var(--px-color-red-700);
  --px-color-content-accent-amber: var(--px-color-amber-700);
  --px-color-content-danger-disabled: var(--px-color-red-300);
  --px-color-content-neutral-disabled: var(--px-color-gray-400);
  --px-color-content-brand-disabled: var(--px-color-brand-300);
  --px-color-content-static-black: var(--px-color-black);
  --px-color-content-on-color: var(--px-color-white);
  --px-color-background-brand-default: var(--px-color-brand-500);
  --px-color-background-brand-hover: var(--px-color-brand-600);
  --px-color-background-brand-pressed: var(--px-color-brand-700);
  --px-color-background-brand-subtle: var(--px-color-brand-50);
  --px-color-background-brand-subtle-hover: var(--px-color-brand-100);
  --px-color-background-brand-subtle-pressed: var(--px-color-brand-200);
  --px-color-background-neutral-default: var(--px-color-gray-100);
  --px-color-background-neutral-hover: var(--px-color-gray-200);
  --px-color-background-neutral-pressed: var(--px-color-gray-300);
  --px-color-background-neutral-bold: var(--px-color-gray-400);
  --px-color-background-neutral-bold-pressed: var(--px-color-gray-500);
  --px-color-background-danger-default: var(--px-color-red-600);
  --px-color-background-danger-hover: var(--px-color-red-700);
  --px-color-background-danger-pressed: var(--px-color-red-800);
  --px-color-background-danger-subtle: var(--px-color-red-50);
  --px-color-background-success-default: var(--px-color-green-700);
  --px-color-background-success-hover: var(--px-color-green-800);
  --px-color-background-success-pressed: var(--px-color-green-900);
  --px-color-background-success-subtle: var(--px-color-green-50);
  --px-color-background-warning-default: var(--px-color-amber-500);
  --px-color-background-warning-hover: var(--px-color-amber-400);
  --px-color-background-warning-pressed: var(--px-color-amber-600);
  --px-color-background-warning-subtle: var(--px-color-amber-50);
  --px-color-background-info-default: var(--px-color-blue-600);
  --px-color-background-info-hover: var(--px-color-blue-700);
  --px-color-background-info-pressed: var(--px-color-blue-800);
  --px-color-background-info-subtle: var(--px-color-blue-50);
  --px-color-background-accent-blue: var(--px-color-blue-500);
  --px-color-background-accent-pink: var(--px-color-pink-500);
  --px-color-background-accent-purple: var(--px-color-purple-500);
  --px-color-background-accent-indigo: var(--px-color-indigo-500);
  --px-color-background-accent-rose: var(--px-color-rose-500);
  --px-color-background-accent-lime: var(--px-color-lime-500);
  --px-color-background-accent-green: var(--px-color-green-500);
  --px-color-background-accent-red: var(--px-color-red-500);
  --px-color-background-accent-amber: var(--px-color-amber-400);
  --px-color-background-danger-disabled: var(--px-color-red-200);
  --px-color-background-neutral-disabled: var(--px-color-gray-200);
  --px-color-background-brand-disabled: var(--px-color-brand-200);
  --px-color-background-scrim: var(--px-color-alpha-black-50);
  --px-color-background-static-black: var(--px-color-black);
  --px-color-background-static-white: var(--px-color-white);
  --px-color-background-gradient-brand-start: var(--px-color-gradient-orange-100);
  --px-color-background-gradient-brand-end: var(--px-color-gradient-orange-200);
  --px-color-background-gradient-accent-start: var(--px-color-gradient-yellow-100);
  --px-color-background-gradient-accent-mid: var(--px-color-gradient-yellow-200);
  --px-color-background-gradient-accent-end: var(--px-color-gradient-yellow-300);
  --px-color-border-brand-default: var(--px-color-brand-500);
  --px-color-border-brand-hover: var(--px-color-brand-600);
  --px-color-border-focus: var(--px-color-brand-500);
  --px-color-border-brand-pressed: var(--px-color-brand-700);
  --px-color-border-brand-subtle: var(--px-color-brand-200);
  --px-color-border-neutral-default: var(--px-color-gray-200);
  --px-color-border-neutral-hover: var(--px-color-gray-300);
  --px-color-border-neutral-subtle: var(--px-color-gray-100);
  --px-color-border-neutral-strong: var(--px-color-gray-500);
  --px-color-border-neutral-bold: var(--px-color-gray-700);
  --px-color-border-danger-default: var(--px-color-red-500);
  --px-color-border-danger-hover: var(--px-color-red-600);
  --px-color-border-danger-pressed: var(--px-color-red-700);
  --px-color-border-danger-subtle: var(--px-color-red-200);
  --px-color-border-success-default: var(--px-color-green-500);
  --px-color-border-success-hover: var(--px-color-green-600);
  --px-color-border-success-pressed: var(--px-color-green-700);
  --px-color-border-success-subtle: var(--px-color-green-200);
  --px-color-border-warning-default: var(--px-color-amber-500);
  --px-color-border-warning-hover: var(--px-color-amber-600);
  --px-color-border-warning-pressed: var(--px-color-amber-700);
  --px-color-border-warning-subtle: var(--px-color-amber-200);
  --px-color-border-info-default: var(--px-color-blue-500);
  --px-color-border-info-hover: var(--px-color-blue-600);
  --px-color-border-info-pressed: var(--px-color-blue-700);
  --px-color-border-info-subtle: var(--px-color-blue-200);
  --px-color-border-accent-blue: var(--px-color-blue-500);
  --px-color-border-accent-pink: var(--px-color-pink-500);
  --px-color-border-accent-purple: var(--px-color-purple-500);
  --px-color-border-accent-indigo: var(--px-color-indigo-500);
  --px-color-border-accent-rose: var(--px-color-rose-500);
  --px-color-border-accent-lime: var(--px-color-lime-500);
  --px-color-border-accent-green: var(--px-color-green-600);
  --px-color-border-danger-disabled: var(--px-color-red-200);
  --px-color-border-neutral-disabled: var(--px-color-gray-300);
  --px-color-border-brand-disabled: var(--px-color-brand-200);
  --px-color-border-static-black: var(--px-color-black);
  --px-color-border-static-white: var(--px-color-white);
  --px-color-surface-default: var(--px-color-white);
  --px-color-shadow-xs: var(--px-color-alpha-black-4);
  --px-color-shadow-sm: var(--px-color-alpha-black-8);
  --px-color-shadow-md: var(--px-color-alpha-black-12);
  --px-color-shadow-lg: var(--px-color-alpha-black-16);
  --px-color-shadow-xl: var(--px-color-alpha-black-20);
  --px-color-content-on-warning: var(--px-color-gray-900);
  --px-color-content-inverse: var(--px-color-white);
  --px-color-content-static-white: var(--px-color-white);
  --px-color-content-link-default: var(--px-color-brand-500);
  --px-color-content-link-visited: var(--px-color-purple-700);
  --px-color-surface-raised: var(--px-color-white);
  --px-color-surface-sunken: var(--px-color-gray-50);
  --px-color-surface-overlay: var(--px-color-white);
  --px-color-surface-inverse: var(--px-color-gray-900);
  --px-color-shadow-2xl: var(--px-color-alpha-black-30);
  --px-color-background-danger-subtle-hover: var(--px-color-red-100);
  --px-color-background-inverse-default: var(--px-color-gray-900);
  --px-color-background-inverse-hover: var(--px-color-gray-800);
  --px-color-background-inverse-pressed: var(--px-color-gray-700);
  --px-color-background-danger-subtle-pressed: var(--px-color-red-200);
  --px-color-border-on-color-subtle: var(--px-color-alpha-white-30);
  --px-color-content-inverse-muted: var(--px-color-gray-400);
  --px-on-brand: #ffffff;
}
:root {
  --px-locale-direction: ltr;
  --px-locale-language: en;
  --px-locale-is-rtl: 0;
  --px-font-family-sans: var(--px-font-family-poppins);
  --px-font-weight-light: var(--px-font-style-light);
  --px-font-weight-regular: var(--px-font-style-regular);
  --px-font-weight-medium: var(--px-font-style-medium);
  --px-font-weight-semibold: var(--px-font-style-semibold);
  --px-font-weight-bold: var(--px-font-style-bold);
  --px-letter-spacing-body: var(--px-letter-spacing-0);
  --px-letter-spacing-heading: var(--px-letter-spacing-0);
  --px-typography-body-sm-font-size: var(--px-font-size-body-sm);
  --px-typography-body-sm-line-height: var(--px-line-height-body-sm);
  --px-typography-body-md-font-size: var(--px-font-size-body-md);
  --px-typography-body-md-line-height: var(--px-line-height-body-md);
  --px-typography-body-lg-font-size: var(--px-font-size-body-lg);
  --px-typography-body-lg-line-height: var(--px-line-height-body-lg);
  --px-typography-label-sm-font-size: var(--px-font-size-label-sm);
  --px-typography-label-sm-line-height: var(--px-line-height-label-sm);
  --px-typography-label-md-font-size: var(--px-font-size-label-md);
  --px-typography-label-md-line-height: var(--px-line-height-label-md);
  --px-typography-label-lg-font-size: var(--px-font-size-label-lg);
  --px-typography-label-lg-line-height: var(--px-line-height-label-lg);
  --px-typography-button-sm-font-size: var(--px-font-size-button-sm);
  --px-typography-button-sm-line-height: var(--px-line-height-button-sm);
  --px-typography-button-md-font-size: var(--px-font-size-button-md);
  --px-typography-button-md-line-height: var(--px-line-height-button-md);
  --px-typography-button-lg-font-size: var(--px-font-size-button-lg);
  --px-typography-button-lg-line-height: var(--px-line-height-button-lg);
  --px-typography-headline-sm-font-size: var(--px-font-size-headline-sm);
  --px-typography-headline-sm-line-height: var(--px-line-height-headline-sm);
  --px-typography-headline-md-font-size: var(--px-font-size-headline-md);
  --px-typography-headline-md-line-height: var(--px-line-height-headline-md);
  --px-typography-headline-lg-font-size: var(--px-font-size-headline-lg);
  --px-typography-headline-lg-line-height: var(--px-line-height-headline-lg);
  --px-typography-display-sm-font-size: var(--px-font-size-display-sm);
  --px-typography-display-sm-line-height: var(--px-line-height-display-sm);
  --px-typography-display-md-font-size: var(--px-font-size-display-md);
  --px-typography-display-md-line-height: var(--px-line-height-display-md);
  --px-typography-display-lg-font-size: var(--px-font-size-display-lg);
  --px-typography-display-lg-line-height: var(--px-line-height-display-lg);
  --px-typography-display-xl-font-size: var(--px-font-size-display-xl);
  --px-typography-display-xl-line-height: var(--px-line-height-display-xl);
  --px-typography-headline-xl-font-size: var(--px-font-size-headline-xl);
  --px-typography-headline-xl-line-height: var(--px-line-height-headline-xl);
  --px-typography-overline-font-size: var(--px-font-size-overline);
  --px-typography-overline-line-height: var(--px-line-height-overline);
  --px-typography-code-sm-font-size: var(--px-font-size-code-sm);
  --px-typography-code-sm-line-height: var(--px-line-height-code-sm);
  --px-typography-code-md-font-size: var(--px-font-size-code-md);
  --px-typography-code-md-line-height: var(--px-line-height-code-md);
  --px-font-family-mono: var(--px-font-family-mono-geist-mono);
  --px-letter-spacing-overline: var(--px-letter-spacing-1);
}
:root {
  --px-control-height-sm: var(--px-spacing-32);
  --px-control-height-md: var(--px-spacing-40);
  --px-control-height-lg: var(--px-spacing-48);
  --px-control-padding-x-sm: var(--px-spacing-12);
  --px-control-padding-x-md: var(--px-spacing-16);
  --px-control-padding-x-lg: var(--px-spacing-20);
  --px-control-gap: var(--px-spacing-8);
  --px-size-touch-target-min: var(--px-spacing-44);
  --px-control-height-xl: var(--px-spacing-56);
  --px-control-padding-x-xl: var(--px-spacing-24);
}
:root {
  --px-input-content-placeholder: var(--px-color-content-neutral-placeholder);
  --px-input-content-label: var(--px-color-content-neutral-secondary);
  --px-input-content-hint: var(--px-color-content-neutral-tertiary);
  --px-input-content-error: var(--px-color-content-danger-default);
  --px-input-radius: var(--px-radius-12);
  --px-input-height-md: var(--px-spacing-40);
  --px-input-padding-x: var(--px-spacing-12);
  --px-button-gap: var(--px-control-gap);
  --px-spinner-brand-track: var(--px-color-border-brand-subtle);
  --px-spinner-brand-indicator: var(--px-color-border-brand-default);
  --px-spinner-neutral-track: var(--px-color-border-neutral-subtle);
  --px-spinner-neutral-indicator: var(--px-color-content-neutral-secondary);
  --px-spinner-on-color-track: var(--px-color-border-on-color-subtle);
  --px-spinner-on-color-indicator: var(--px-color-content-on-color);
  --px-spinner-danger-track: var(--px-color-border-danger-subtle);
  --px-spinner-danger-indicator: var(--px-color-border-danger-default);
  --px-button-group-radius: var(--px-radius-12);
  --px-link-gap: var(--px-spacing-xs);
  --px-selection-gap: var(--px-spacing-sm);
  --px-checkbox-size-sm: var(--px-spacing-16);
  --px-checkbox-size-md: var(--px-spacing-20);
  --px-checkbox-radius: var(--px-radius-4);
  --px-radio-size-sm: var(--px-spacing-16);
  --px-radio-size-md: var(--px-spacing-20);
  --px-radio-radius: var(--px-radius-full);
  --px-radio-dot-sm: var(--px-spacing-8);
  --px-radio-dot-md: var(--px-spacing-8);
  --px-toggle-width-sm: 28px;
  --px-toggle-height-sm: var(--px-spacing-16);
  --px-toggle-knob-sm: 12px;
  --px-toggle-width-md: 36px;
  --px-toggle-height-md: var(--px-spacing-20);
  --px-toggle-knob-md: 16px;
  --px-toggle-width-lg: 44px;
  --px-toggle-height-lg: var(--px-spacing-24);
  --px-toggle-knob-lg: 20px;
  --px-toggle-padding: 2px;
  --px-toggle-radius: var(--px-radius-full);
  --px-segmented-padding: var(--px-spacing-4);
  --px-segmented-radius: var(--px-radius-12);
  --px-segmented-item-radius: var(--px-radius-8);
  --px-input-height-sm: var(--px-spacing-36);
  --px-input-height-lg: var(--px-control-height-lg);
  --px-input-gap: var(--px-spacing-8);
  --px-input-field-gap: var(--px-spacing-8);
  --px-input-width: 320px;
  --px-textarea-height: 120px;
  --px-code-input-size-md: var(--px-spacing-48);
  --px-code-input-size-lg: 64px;
  --px-code-input-radius: var(--px-radius-12);
  --px-badge-neutral-subtle-content: var(--px-color-content-neutral-secondary);
  --px-badge-success-subtle-content: var(--px-color-content-success-default);
  --px-badge-danger-subtle-content: var(--px-color-content-danger-default);
  --px-badge-radius: var(--px-radius-full);
  --px-badge-gap: var(--px-spacing-4);
  --px-badge-count-size-sm: 16px;
  --px-badge-count-size-md: 20px;
  --px-tag-background: var(--px-color-surface-default);
  --px-tag-border: var(--px-color-border-neutral-default);
  --px-tag-content: var(--px-color-content-neutral-secondary);
  --px-tag-icon: var(--px-color-content-neutral-placeholder);
  --px-tag-radius: var(--px-radius-sm);
  --px-tag-gap: var(--px-spacing-xs);
  --px-chip-content: var(--px-color-content-neutral-primary);
  --px-chip-selected-content: var(--px-color-content-brand-default);
  --px-chip-height-sm: var(--px-spacing-24);
  --px-chip-height-md: var(--px-spacing-28);
  --px-chip-radius: var(--px-radius-8);
  --px-chip-padding-x: var(--px-spacing-12);
  --px-menu-background: var(--px-color-surface-overlay);
  --px-menu-border: var(--px-color-border-neutral-subtle);
  --px-menu-item-background-hover: var(--px-color-background-neutral-default);
  --px-menu-item-background-selected: var(--px-color-background-brand-subtle);
  --px-menu-item-content-selected: var(--px-color-content-brand-default);
  --px-menu-item-content-destructive: var(--px-color-content-danger-default);
  --px-menu-item-icon: var(--px-color-content-neutral-secondary);
  --px-menu-section: var(--px-color-content-neutral-tertiary);
  --px-menu-radius: var(--px-radius-12);
  --px-menu-item-radius: var(--px-radius-8);
  --px-menu-padding: var(--px-spacing-xs);
  --px-menu-item-padding-x: var(--px-spacing-12);
  --px-menu-item-gap: var(--px-spacing-sm);
  --px-menu-item-height-sm: var(--px-control-height-sm);
  --px-menu-item-height-md: var(--px-control-height-md);
  --px-menu-width: 240px;
  --px-slider-track-height: var(--px-spacing-8);
  --px-slider-thumb-size: var(--px-spacing-20);
  --px-progress-track: var(--px-color-surface-sunken);
  --px-progress-fill: var(--px-color-background-brand-default);
  --px-progress-height: 8px;
  --px-progress-radius: var(--px-radius-full);
  --px-progress-label: var(--px-color-content-neutral-primary);
  --px-file-upload-icon: var(--px-color-content-neutral-secondary);
  --px-file-upload-radius: var(--px-radius-16);
  --px-file-upload-padding: var(--px-spacing-24);
  --px-date-picker-day-size: var(--px-spacing-36);
  --px-date-picker-day-radius: var(--px-radius-12);
  --px-date-picker-day-background-hover: var(--px-color-background-neutral-default);
  --px-date-picker-day-background-selected: var(--px-color-background-brand-default);
  --px-date-picker-day-background-range: var(--px-color-background-brand-subtle);
  --px-date-picker-radius: var(--px-radius-16);
  --px-date-picker-padding: var(--px-spacing-12);
  --px-date-picker-weekday: var(--px-color-content-neutral-secondary);
  --px-avatar-size-xs: 24px;
  --px-avatar-size-sm: 32px;
  --px-avatar-size-md: 40px;
  --px-avatar-size-lg: 48px;
  --px-avatar-size-xl: 56px;
  --px-avatar-size-2xl: 64px;
  --px-avatar-radius: var(--px-radius-full);
  --px-avatar-background-neutral: var(--px-color-background-neutral-default);
  --px-avatar-content-neutral: var(--px-color-content-neutral-secondary);
  --px-avatar-ring: var(--px-color-surface-default);
  --px-tooltip-radius: var(--px-radius-md);
  --px-tooltip-padding-x: var(--px-spacing-md);
  --px-tooltip-padding-y: var(--px-spacing-sm);
  --px-alert-radius: var(--px-radius-16);
  --px-alert-padding: var(--px-spacing-16);
  --px-alert-width: 560px;
  --px-toast-radius: var(--px-radius-16);
  --px-banner-brand-background: var(--px-color-background-brand-default);
  --px-banner-brand-content: var(--px-color-content-on-color);
  --px-banner-brand-icon: var(--px-color-content-on-color);
  --px-banner-neutral-background: var(--px-color-surface-inverse);
  --px-banner-neutral-content: var(--px-color-content-inverse);
  --px-banner-neutral-icon: var(--px-color-content-inverse);
  --px-banner-warning-background: var(--px-color-background-warning-subtle);
  --px-banner-warning-content: var(--px-color-content-neutral-primary);
  --px-banner-warning-icon: var(--px-color-content-warning-default);
  --px-skeleton-radius: var(--px-radius-sm);
  --px-empty-state-icon-background: var(--px-color-background-brand-subtle);
  --px-empty-state-icon-content: var(--px-color-content-brand-default);
  --px-empty-state-title: var(--px-color-content-neutral-primary);
  --px-empty-state-body: var(--px-color-content-neutral-secondary);
  --px-modal-divider: var(--px-color-border-neutral-subtle);
  --px-modal-radius: var(--px-radius-xl);
  --px-modal-padding: var(--px-spacing-2xl);
  --px-modal-width-sm: 400px;
  --px-modal-width-md: 560px;
  --px-modal-width-lg: 720px;
  --px-drawer-width: 400px;
  --px-popover-background: var(--px-color-surface-overlay);
  --px-popover-radius: var(--px-radius-16);
  --px-popover-padding: var(--px-spacing-12);
  --px-popover-width: 320px;
  --px-command-width: 640px;
  --px-command-hint: var(--px-color-content-neutral-tertiary);
  --px-divider-color: var(--px-color-border-neutral-subtle);
  --px-list-item-meta: var(--px-color-content-neutral-tertiary);
  --px-list-item-radius: var(--px-radius-md);
  --px-accordion-background-hover: var(--px-color-background-neutral-default);
  --px-card-border: var(--px-color-border-neutral-subtle);
  --px-card-radius: var(--px-radius-20);
  --px-card-padding: var(--px-spacing-20);
  --px-stat-label: var(--px-color-content-neutral-secondary);
  --px-stepper-complete: var(--px-color-background-brand-default);
  --px-stepper-current-ring: var(--px-color-border-brand-default);
  --px-stepper-current-background: var(--px-color-background-brand-subtle);
  --px-stepper-upcoming-border: var(--px-color-border-neutral-strong);
  --px-stepper-connector: var(--px-color-border-neutral-default);
  --px-table-header-background: var(--px-color-surface-sunken);
  --px-table-header-content: var(--px-color-content-neutral-secondary);
  --px-table-border: var(--px-color-border-neutral-subtle);
  --px-table-content: var(--px-color-content-neutral-secondary);
  --px-table-radius: var(--px-radius-16);
  --px-table-header-height: var(--px-spacing-40);
  --px-table-row-height: var(--px-spacing-56);
  --px-table-cell-padding-x: var(--px-spacing-2xl);
  --px-tab-indicator: var(--px-color-border-brand-default);
  --px-tab-height-sm: var(--px-control-height-sm);
  --px-tab-height-md: var(--px-spacing-32);
  --px-tab-indicator-width: var(--px-border-width-md);
  --px-breadcrumb-separator: var(--px-color-content-neutral-placeholder);
  --px-pagination-content-default: var(--px-color-content-neutral-secondary);
  --px-pagination-size: var(--px-spacing-36);
  --px-pagination-radius: var(--px-radius-12);
  --px-nav-border: var(--px-color-border-neutral-subtle);
  --px-nav-item-icon: var(--px-color-content-neutral-tertiary);
  --px-nav-item-radius: var(--px-radius-12);
  --px-nav-item-height: var(--px-spacing-40);
  --px-sidebar-width: var(--px-size-264);
  --px-top-bar-background: var(--px-color-surface-default);
  --px-top-bar-border: var(--px-color-border-neutral-subtle);
  --px-top-bar-height: 72px;
  --px-glass-light-bg: #ffffff73;
  --px-glass-light-border: #ffffff8c;
  --px-glass-light-chip: #ffffff73;
  --px-glass-light-fg: var(--px-color-gray-900);
  --px-glass-light-fg-muted: var(--px-color-gray-800);
  --px-glass-light-cta-bg: var(--px-color-background-brand-default);
  --px-glass-light-cta-fg: var(--px-color-content-static-white);
  --px-glass-dark-bg: #0a0f1f80;
  --px-glass-dark-border: #ffffff29;
  --px-glass-dark-chip: #ffffff1a;
  --px-glass-dark-fg: var(--px-color-content-static-white);
  --px-glass-dark-fg-muted: #ffffffd9;
  --px-glass-dark-cta-bg: var(--px-color-background-static-white);
  --px-glass-dark-cta-fg: var(--px-color-gray-900);
  --px-glass-brand-bg: #1c4dccbd;
  --px-glass-brand-border: #ffffff4d;
  --px-glass-brand-chip: #ffffff14;
  --px-glass-brand-fg: var(--px-color-content-static-white);
  --px-glass-brand-fg-muted: #ffffffe6;
  --px-glass-brand-cta-bg: var(--px-color-background-static-white);
  --px-glass-brand-cta-fg: var(--px-color-blue-700);
  --px-glass-blur: var(--px-blur-24);
  --px-glass-dark-danger: var(--px-color-red-100);
  --px-glass-brand-danger: var(--px-color-red-50);
  --px-glass-light-danger: var(--px-color-red-900);
  --px-glass-light-field-bg: #ffffff73;
  --px-glass-dark-field-bg: #ffffff00;
  --px-glass-brand-field-bg: #ffffff00;
  --px-button-md-height: var(--px-spacing-40);
  --px-button-md-padding-x: var(--px-spacing-16);
  --px-button-md-radius: var(--px-radius-12);
  --px-button-md-icon: var(--px-spacing-20);
  --px-button-sm-height: var(--px-spacing-36);
  --px-button-sm-padding-x: var(--px-spacing-12);
  --px-button-sm-radius: var(--px-radius-12);
  --px-button-sm-icon: var(--px-spacing-16);
  --px-button-xs-height: var(--px-spacing-32);
  --px-button-xs-padding-x: var(--px-spacing-12);
  --px-button-xs-radius: var(--px-radius-8);
  --px-button-xs-icon: var(--px-spacing-16);
  --px-button-effect-drop: #0000002e;
  --px-button-effect-drop-subtle: #0000000f;
  --px-button-effect-highlight: #ffffff38;
  --px-button-effect-highlight-danger: #ffffff33;
  --px-button-gradient-start: #ffffff24;
  --px-button-gradient-end: #ffffff00;
  --px-button-disabled-opacity: 0.45;
  --px-button-group-item-padding-x: var(--px-spacing-16);
  --px-button-group-item-height: var(--px-spacing-36);
  --px-textarea-padding-x: var(--px-spacing-12);
  --px-textarea-padding-y: var(--px-spacing-12);
  --px-segmented-gap: var(--px-spacing-2);
  --px-segmented-item-height-md: var(--px-spacing-32);
  --px-segmented-item-height-sm: var(--px-spacing-28);
  --px-segmented-item-padding-x: var(--px-spacing-12);
  --px-segmented-item-gap: var(--px-spacing-8);
  --px-chip-gap: var(--px-spacing-8);
  --px-badge-height: var(--px-spacing-20);
  --px-badge-padding-x: var(--px-spacing-8);
  --px-kbd-height: var(--px-spacing-20);
  --px-kbd-padding-x: var(--px-spacing-8);
  --px-kbd-radius: var(--px-radius-8);
  --px-icon-button-close-size: var(--px-spacing-24);
  --px-icon-button-close-radius: var(--px-radius-8);
  --px-icon-size-xs: var(--px-spacing-12);
  --px-icon-size-sm: var(--px-spacing-16);
  --px-icon-size-md: var(--px-spacing-20);
  --px-file-upload-padding-y: var(--px-spacing-32);
  --px-accordion-padding-x: var(--px-spacing-20);
  --px-accordion-padding-y: var(--px-spacing-16);
  --px-accordion-gap: var(--px-spacing-16);
  --px-alert-gap: var(--px-spacing-8);
  --px-toast-padding: var(--px-spacing-16);
  --px-toast-gap: var(--px-spacing-12);
  --px-tab-radius: var(--px-radius-8);
  --px-tab-padding-x: var(--px-spacing-12);
  --px-tabs-list-padding: var(--px-spacing-4);
  --px-tabs-list-radius: var(--px-radius-12);
  --px-tabs-list-gap: var(--px-spacing-4);
  --px-social-button-height: var(--px-spacing-40);
  --px-social-button-padding-x: var(--px-spacing-16);
  --px-social-button-gap: var(--px-spacing-12);
  --px-social-button-radius: var(--px-radius-12);
  --px-social-button-icon: var(--px-spacing-20);
  --px-sidebar-padding: var(--px-spacing-12);
  --px-sidebar-gap: var(--px-spacing-12);
  --px-sidebar-radius: var(--px-radius-20);
  --px-nav-item-padding-x: var(--px-spacing-12);
  --px-nav-item-gap: var(--px-spacing-12);
  --px-input-focus-halo: #2563eb2e;
  --px-effect-drop-subtle: #0000000d;
  --px-effect-drop-tab: #00000014;
  --px-effect-inset-strong: #00000033;
  --px-effect-inset-soft: #0000001f;
  --px-control-highlight: #ffffff40;
  --px-toggle-gap: var(--px-spacing-12);
  --px-effect-drop-strong: #00000040;
  --px-card-gap: var(--px-spacing-16);
  --px-page-padding: var(--px-spacing-12);
  --px-page-gap: var(--px-spacing-16);
  --px-panel-radius: var(--px-radius-20);
  --px-panel-padding: var(--px-spacing-28);
  --px-panel-gap: var(--px-spacing-20);
  --px-block-radius: var(--px-radius-20);
  --px-block-padding: var(--px-spacing-20);
  --px-block-gap: var(--px-spacing-16);
  --px-trend-height: var(--px-spacing-24);
  --px-trend-padding-x: var(--px-spacing-8);
  --px-trend-radius: var(--px-radius-8);
  --px-glass-light-shadow: #0f17291f;
  --px-glass-light-highlight: #ffffff80;
  --px-glass-dark-shadow: #0f17294d;
  --px-glass-dark-highlight: #ffffff2e;
  --px-glass-brand-shadow: #0f17293d;
  --px-glass-brand-highlight: #ffffff2e;
}
/* Legacy: still used by older site CSS, no longer in Figma (tools/tokens/legacy.json). */
:root {
  --px-line-height-18: 18px;
  --px-line-height-26: 26px;
  --px-line-height-30: 30px;
  --px-line-height-50: 50px;
  --px-color-green-25: #f6fef9;
  --px-color-green-100: #d1fadf;
  --px-color-purple-100: #fae8ff;
  --px-color-purple-200: #f5d0fe;
  --px-color-purple-600: #9334e9;
  --px-color-purple-800: #6b21a8;
  --px-color-purple-900: #581c87;
  --px-color-rose-100: #ffe4e6;
  --px-color-rose-200: #fecdd3;
  --px-color-rose-600: #e11d48;
  --px-color-rose-800: #9f1339;
  --px-color-rose-900: #881337;
  --px-color-teal-400: #34d399;
  --px-line-height-74: 74px;
  --px-input-background-default: var(--px-color-surface-default);
  --px-input-background-disabled: var(--px-color-background-neutral-disabled);
  --px-input-border-default: var(--px-color-border-neutral-default);
  --px-input-border-hover: var(--px-color-border-neutral-hover);
  --px-input-border-focus: var(--px-color-border-focus);
  --px-input-border-error: var(--px-color-border-danger-default);
  --px-input-border-disabled: var(--px-color-border-neutral-disabled);
  --px-input-content-value: var(--px-color-content-neutral-primary);
  --px-input-content-disabled: var(--px-color-content-neutral-disabled);
  --px-button-primary-background-default: var(--px-color-background-brand-default);
  --px-button-primary-background-hover: var(--px-color-background-brand-hover);
  --px-button-primary-background-pressed: var(--px-color-background-brand-pressed);
  --px-button-primary-background-disabled: var(--px-color-background-brand-disabled);
  --px-button-primary-content-default: var(--px-color-content-on-color);
  --px-button-primary-content-disabled: var(--px-color-content-on-color);
  --px-button-secondary-background-default: var(--px-color-surface-default);
  --px-button-secondary-background-hover: var(--px-color-background-brand-subtle);
  --px-button-secondary-background-pressed: var(--px-color-background-brand-subtle);
  --px-button-secondary-background-disabled: var(--px-color-surface-default);
  --px-button-secondary-border-default: var(--px-color-border-brand-default);
  --px-button-secondary-border-hover: var(--px-color-border-brand-default);
  --px-button-secondary-border-disabled: var(--px-color-border-brand-subtle);
  --px-button-secondary-content-default: var(--px-color-content-brand-default);
  --px-button-secondary-content-disabled: var(--px-color-content-brand-disabled);
  --px-button-tertiary-background-hover: var(--px-color-background-neutral-default);
  --px-button-tertiary-background-pressed: var(--px-color-background-neutral-default);
  --px-button-tertiary-content-default: var(--px-color-content-neutral-secondary);
  --px-button-tertiary-content-disabled: var(--px-color-content-neutral-disabled);
  --px-button-height-sm: var(--px-button-xs-height);
  --px-button-padding-x-sm: var(--px-button-xs-padding-x);
  --px-button-height-md: var(--px-button-md-height);
  --px-button-padding-x-md: var(--px-button-md-padding-x);
  --px-button-height-lg: var(--px-control-height-lg);
  --px-button-padding-x-lg: var(--px-control-padding-x-lg);
  --px-button-height-xl: var(--px-control-height-xl);
  --px-button-padding-x-xl: var(--px-control-padding-x-xl);
  --px-button-radius: var(--px-button-md-radius);
  --px-button-border-width: var(--px-border-width-sm);
  --px-button-focus-offset: var(--px-border-width-md);
  --px-button-focus-outer: var(--px-border-width-xl);
  --px-button-group-background-default: var(--px-color-surface-default);
  --px-button-group-content-default: var(--px-color-content-neutral-primary);
  --px-button-group-background-hover: var(--px-color-background-neutral-default);
  --px-button-group-background-pressed: var(--px-color-background-neutral-hover);
  --px-button-group-background-selected: var(--px-color-background-brand-subtle);
  --px-button-group-content-selected: var(--px-color-content-brand-default);
  --px-button-group-content-disabled: var(--px-color-content-neutral-disabled);
  --px-link-brand-content-default: var(--px-color-content-link-default);
  --px-link-brand-content-hover: var(--px-color-content-brand-hover);
  --px-link-brand-content-disabled: var(--px-color-content-brand-disabled);
  --px-link-neutral-content-default: var(--px-color-content-neutral-secondary);
  --px-link-neutral-content-hover: var(--px-color-content-neutral-primary);
  --px-link-danger-content-default: var(--px-color-content-danger-default);
  --px-link-danger-content-hover: var(--px-color-content-danger-hover);
  --px-selection-background-off-default: var(--px-color-surface-default);
  --px-selection-background-off-hover: var(--px-color-background-neutral-default);
  --px-selection-background-off-disabled: var(--px-color-background-neutral-disabled);
  --px-selection-background-on-default: var(--px-color-background-brand-default);
  --px-selection-background-on-hover: var(--px-color-background-brand-hover);
  --px-selection-background-on-disabled: var(--px-color-background-brand-disabled);
  --px-selection-background-on-error: var(--px-color-background-danger-default);
  --px-selection-border-off-default: var(--px-color-border-neutral-hover);
  --px-selection-border-off-hover: var(--px-color-border-neutral-strong);
  --px-selection-border-off-disabled: var(--px-color-border-neutral-disabled);
  --px-selection-border-error: var(--px-color-border-danger-default);
  --px-selection-indicator: var(--px-color-content-on-color);
  --px-selection-label-default: var(--px-color-content-neutral-primary);
  --px-selection-label-disabled: var(--px-color-content-neutral-disabled);
  --px-selection-hint-default: var(--px-color-content-neutral-secondary);
  --px-selection-hint-error: var(--px-color-content-danger-default);
  --px-toggle-track-off-default: var(--px-color-background-neutral-bold-pressed);
  --px-toggle-track-off-hover: var(--px-color-content-neutral-secondary);
  --px-toggle-track-off-disabled: var(--px-color-background-neutral-disabled);
  --px-toggle-track-on-default: var(--px-color-background-brand-default);
  --px-toggle-track-on-hover: var(--px-color-background-brand-hover);
  --px-toggle-track-on-disabled: var(--px-color-background-brand-disabled);
  --px-toggle-knob: var(--px-color-background-static-white);
  --px-segmented-track: var(--px-color-background-neutral-default);
  --px-segmented-item-background-selected: var(--px-color-surface-default);
  --px-segmented-item-background-hover: var(--px-color-background-neutral-hover);
  --px-segmented-item-content-default: var(--px-color-content-neutral-secondary);
  --px-segmented-item-content-selected: var(--px-color-content-neutral-primary);
  --px-segmented-item-content-disabled: var(--px-color-content-neutral-disabled);
  --px-segmented-height-sm: var(--px-control-height-sm);
  --px-segmented-height-md: var(--px-control-height-md);
  --px-input-content-icon: var(--px-color-content-neutral-placeholder);
  --px-input-content-required: var(--px-color-content-danger-default);
  --px-badge-neutral-subtle-background: var(--px-color-background-neutral-default);
  --px-badge-neutral-subtle-border: var(--px-color-border-neutral-default);
  --px-badge-neutral-solid-background: var(--px-color-background-inverse-default);
  --px-badge-neutral-solid-content: var(--px-color-content-inverse);
  --px-badge-neutral-outline-border: var(--px-color-border-neutral-default);
  --px-badge-brand-subtle-background: var(--px-color-background-brand-subtle);
  --px-badge-brand-subtle-content: var(--px-color-content-brand-default);
  --px-badge-brand-subtle-border: var(--px-color-border-brand-subtle);
  --px-badge-brand-solid-background: var(--px-color-background-brand-default);
  --px-badge-brand-solid-content: var(--px-color-content-on-color);
  --px-badge-brand-outline-border: var(--px-color-border-brand-default);
  --px-badge-success-subtle-background: var(--px-color-background-success-subtle);
  --px-badge-success-subtle-border: var(--px-color-border-success-subtle);
  --px-badge-success-solid-background: var(--px-color-background-success-default);
  --px-badge-success-solid-content: var(--px-color-content-on-color);
  --px-badge-success-outline-border: var(--px-color-border-success-default);
  --px-badge-warning-subtle-background: var(--px-color-background-warning-subtle);
  --px-badge-warning-subtle-content: var(--px-color-content-warning-default);
  --px-badge-warning-subtle-border: var(--px-color-border-warning-subtle);
  --px-badge-warning-solid-background: var(--px-color-background-warning-default);
  --px-badge-warning-solid-content: var(--px-color-content-on-warning);
  --px-badge-warning-outline-border: var(--px-color-border-warning-default);
  --px-badge-danger-subtle-background: var(--px-color-background-danger-subtle);
  --px-badge-danger-subtle-border: var(--px-color-border-danger-subtle);
  --px-badge-danger-solid-background: var(--px-color-background-danger-default);
  --px-badge-danger-solid-content: var(--px-color-content-on-color);
  --px-badge-danger-outline-border: var(--px-color-border-danger-default);
  --px-badge-info-subtle-background: var(--px-color-background-info-subtle);
  --px-badge-info-subtle-content: var(--px-color-content-info-default);
  --px-badge-info-subtle-border: var(--px-color-border-info-subtle);
  --px-badge-info-solid-background: var(--px-color-background-info-default);
  --px-badge-info-solid-content: var(--px-color-content-on-color);
  --px-badge-info-outline-border: var(--px-color-border-info-default);
  --px-chip-background-default: var(--px-color-surface-default);
  --px-chip-background-hover: var(--px-color-background-neutral-default);
  --px-chip-background-pressed: var(--px-color-background-neutral-hover);
  --px-chip-background-disabled: var(--px-color-background-neutral-disabled);
  --px-chip-selected-background-default: var(--px-color-background-brand-subtle);
  --px-chip-selected-background-hover: var(--px-color-background-brand-subtle-hover);
  --px-chip-border: var(--px-color-border-neutral-default);
  --px-chip-selected-border: var(--px-color-border-brand-default);
  --px-chip-border-disabled: var(--px-color-border-neutral-disabled);
  --px-chip-content-disabled: var(--px-color-content-neutral-disabled);
  --px-menu-divider: var(--px-color-border-neutral-subtle);
  --px-menu-item-content-default: var(--px-color-content-neutral-primary);
  --px-menu-item-content-disabled: var(--px-color-content-neutral-disabled);
  --px-menu-item-shortcut: var(--px-color-content-neutral-tertiary);
  --px-select-content-icon: var(--px-color-content-neutral-secondary);
  --px-slider-track: var(--px-color-background-neutral-default);
  --px-slider-fill: var(--px-color-background-brand-default);
  --px-slider-fill-disabled: var(--px-color-background-neutral-disabled);
  --px-slider-thumb: var(--px-color-surface-default);
  --px-slider-thumb-border: var(--px-color-border-brand-default);
  --px-slider-thumb-border-disabled: var(--px-color-border-neutral-disabled);
  --px-file-upload-background: var(--px-color-surface-default);
  --px-file-upload-background-hover: var(--px-color-background-brand-subtle);
  --px-file-upload-background-disabled: var(--px-color-background-neutral-disabled);
  --px-file-upload-border: var(--px-color-border-neutral-default);
  --px-file-upload-border-hover: var(--px-color-border-brand-default);
  --px-file-upload-border-error: var(--px-color-border-danger-default);
  --px-date-picker-day-content-default: var(--px-color-content-neutral-primary);
  --px-date-picker-day-content-selected: var(--px-color-content-on-color);
  --px-date-picker-day-content-muted: var(--px-color-content-neutral-placeholder);
  --px-date-picker-day-content-disabled: var(--px-color-content-neutral-disabled);
  --px-date-picker-day-today: var(--px-color-content-brand-default);
  --px-date-picker-background: var(--px-color-surface-overlay);
  --px-date-picker-border: var(--px-color-border-neutral-subtle);
  --px-date-picker-width: 320px;
  --px-avatar-background: var(--px-color-background-brand-subtle);
  --px-avatar-content: var(--px-color-content-brand-default);
  --px-avatar-border: var(--px-color-border-neutral-subtle);
  --px-avatar-status-online: var(--px-color-background-success-default);
  --px-avatar-status-offline: var(--px-color-background-neutral-bold);
  --px-tooltip-dark-background: var(--px-color-surface-inverse);
  --px-tooltip-dark-title: var(--px-color-content-inverse);
  --px-tooltip-light-background: var(--px-color-surface-overlay);
  --px-tooltip-light-title: var(--px-color-content-neutral-primary);
  --px-tooltip-light-body: var(--px-color-content-neutral-secondary);
  --px-tooltip-light-border: var(--px-color-border-neutral-subtle);
  --px-tooltip-max-width: 320px;
  --px-alert-info-background: var(--px-color-background-info-subtle);
  --px-alert-info-border: var(--px-color-border-info-subtle);
  --px-alert-info-icon: var(--px-color-content-info-default);
  --px-alert-success-background: var(--px-color-background-success-subtle);
  --px-alert-success-border: var(--px-color-border-success-subtle);
  --px-alert-success-icon: var(--px-color-content-success-default);
  --px-alert-warning-background: var(--px-color-background-warning-subtle);
  --px-alert-warning-border: var(--px-color-border-warning-subtle);
  --px-alert-warning-icon: var(--px-color-content-warning-default);
  --px-alert-danger-background: var(--px-color-background-danger-subtle);
  --px-alert-danger-border: var(--px-color-border-danger-subtle);
  --px-alert-danger-icon: var(--px-color-content-danger-default);
  --px-alert-neutral-background: var(--px-color-surface-default);
  --px-alert-neutral-border: var(--px-color-border-neutral-default);
  --px-alert-neutral-icon: var(--px-color-content-neutral-secondary);
  --px-alert-title: var(--px-color-content-neutral-primary);
  --px-alert-body: var(--px-color-content-neutral-secondary);
  --px-toast-background: var(--px-color-surface-inverse);
  --px-toast-content: var(--px-color-content-inverse);
  --px-toast-action: var(--px-color-content-inverse);
  --px-toast-icon-success: var(--px-color-background-success-default);
  --px-toast-icon-danger: var(--px-color-background-danger-default);
  --px-toast-icon-neutral: var(--px-color-content-inverse);
  --px-skeleton-base: var(--px-color-background-neutral-default);
  --px-skeleton-highlight: var(--px-color-background-neutral-hover);
  --px-overlay-scrim: var(--px-color-background-scrim);
  --px-modal-background: var(--px-color-surface-overlay);
  --px-modal-title: var(--px-color-content-neutral-primary);
  --px-modal-body: var(--px-color-content-neutral-secondary);
  --px-popover-border: var(--px-color-border-neutral-subtle);
  --px-command-input: var(--px-color-content-neutral-primary);
  --px-divider-label: var(--px-color-content-neutral-tertiary);
  --px-list-item-background-hover: var(--px-color-background-neutral-default);
  --px-list-item-background-selected: var(--px-color-background-brand-subtle);
  --px-list-item-title: var(--px-color-content-neutral-primary);
  --px-list-item-supporting: var(--px-color-content-neutral-secondary);
  --px-accordion-divider: var(--px-color-border-neutral-subtle);
  --px-accordion-title: var(--px-color-content-neutral-primary);
  --px-accordion-body: var(--px-color-content-neutral-secondary);
  --px-accordion-icon: var(--px-color-content-neutral-tertiary);
  --px-card-background: var(--px-color-surface-default);
  --px-card-title: var(--px-color-content-neutral-primary);
  --px-card-body: var(--px-color-content-neutral-secondary);
  --px-stat-value: var(--px-color-content-neutral-primary);
  --px-stat-trend-up: var(--px-color-content-success-default);
  --px-stat-trend-down: var(--px-color-content-danger-default);
  --px-stat-trend-neutral: var(--px-color-content-neutral-secondary);
  --px-table-row-background: var(--px-color-surface-default);
  --px-table-row-hover: var(--px-color-background-neutral-default);
  --px-table-row-selected: var(--px-color-background-brand-subtle);
  --px-table-content-strong: var(--px-color-content-neutral-primary);
  --px-tab-content-default: var(--px-color-content-neutral-secondary);
  --px-tab-content-hover: var(--px-color-content-neutral-primary);
  --px-tab-content-selected: var(--px-color-content-brand-default);
  --px-tab-content-disabled: var(--px-color-content-neutral-disabled);
  --px-tab-track: var(--px-color-border-neutral-subtle);
  --px-tab-pill-selected: var(--px-color-background-brand-subtle);
  --px-tab-pill-hover: var(--px-color-background-neutral-default);
  --px-breadcrumb-content-default: var(--px-color-content-neutral-secondary);
  --px-breadcrumb-content-hover: var(--px-color-content-neutral-primary);
  --px-breadcrumb-content-current: var(--px-color-content-brand-default);
  --px-breadcrumb-background-hover: var(--px-color-background-neutral-default);
  --px-pagination-content-selected: var(--px-color-content-brand-default);
  --px-pagination-background-hover: var(--px-color-background-neutral-default);
  --px-pagination-background-selected: var(--px-color-background-brand-subtle);
  --px-nav-background: var(--px-color-surface-default);
  --px-nav-item-content: var(--px-color-content-neutral-secondary);
  --px-nav-item-content-selected: var(--px-color-content-neutral-primary);
  --px-nav-item-background-hover: var(--px-color-background-neutral-default);
  --px-nav-item-background-selected: var(--px-color-background-neutral-default);
  --px-button-primary-destructive-background-default: var(--px-color-background-danger-default);
  --px-button-primary-destructive-background-hover: var(--px-color-background-danger-hover);
  --px-button-primary-destructive-background-pressed: var(--px-color-background-danger-pressed);
  --px-button-primary-destructive-background-disabled: var(--px-color-background-neutral-disabled);
  --px-button-primary-destructive-content-default: var(--px-color-content-on-color);
  --px-button-primary-destructive-content-disabled: var(--px-color-content-neutral-disabled);
  --px-button-secondary-destructive-background-default: var(--px-color-surface-default);
  --px-button-secondary-destructive-background-hover: var(--px-color-background-danger-subtle);
  --px-button-secondary-destructive-background-pressed: var(--px-color-background-danger-subtle-hover);
  --px-button-secondary-destructive-border-default: var(--px-color-border-danger-default);
  --px-button-secondary-destructive-border-hover: var(--px-color-border-danger-hover);
  --px-button-secondary-destructive-content-default: var(--px-color-content-danger-default);
  --px-button-secondary-gray-background-default: var(--px-color-surface-default);
  --px-button-secondary-gray-background-hover: var(--px-color-background-neutral-default);
  --px-button-secondary-gray-background-pressed: var(--px-color-background-neutral-hover);
  --px-button-secondary-gray-background-disabled: var(--px-color-surface-default);
  --px-button-secondary-gray-border-default: var(--px-color-border-neutral-default);
  --px-button-secondary-gray-border-hover: var(--px-color-border-neutral-hover);
  --px-button-secondary-gray-border-disabled: var(--px-color-border-neutral-default);
  --px-button-secondary-gray-content-default: var(--px-color-content-neutral-primary);
  --px-button-secondary-gray-content-disabled: var(--px-color-content-neutral-disabled);
  --px-button-secondary-brand-background-default: var(--px-color-background-brand-subtle);
  --px-button-secondary-brand-background-hover: var(--px-color-background-brand-subtle-hover);
  --px-button-secondary-brand-background-pressed: var(--px-color-background-brand-subtle-pressed);
  --px-button-secondary-brand-background-disabled: var(--px-color-background-brand-subtle);
  --px-button-secondary-brand-content-default: var(--px-color-content-brand-default);
  --px-button-secondary-brand-content-disabled: var(--px-color-content-brand-disabled);
  --px-button-tertiary-destructive-background-hover: var(--px-color-background-danger-subtle);
  --px-button-tertiary-destructive-background-pressed: var(--px-color-background-danger-subtle-hover);
  --px-button-tertiary-destructive-content-default: var(--px-color-content-danger-default);
  --px-button-tertiary-brand-background-hover: var(--px-color-background-brand-subtle);
  --px-button-tertiary-brand-background-pressed: var(--px-color-background-brand-subtle-hover);
  --px-button-tertiary-brand-content-default: var(--px-color-content-brand-default);
  --px-button-tertiary-brand-content-disabled: var(--px-color-content-brand-disabled);
  --px-button-link-content-default: var(--px-color-content-neutral-secondary);
  --px-button-link-content-hover: var(--px-color-content-neutral-primary);
  --px-button-link-content-disabled: var(--px-color-content-neutral-disabled);
  --px-button-link-brand-content-default: var(--px-color-content-brand-default);
  --px-button-link-brand-content-hover: var(--px-color-content-brand-hover);
  --px-button-link-brand-content-disabled: var(--px-color-content-brand-disabled);
  --px-button-inverse-background-default: var(--px-color-background-inverse-default);
  --px-button-inverse-background-hover: var(--px-color-background-inverse-hover);
  --px-button-inverse-background-pressed: var(--px-color-background-inverse-pressed);
  --px-button-inverse-background-disabled: var(--px-color-background-neutral-disabled);
  --px-button-inverse-content-default: var(--px-color-content-inverse);
  --px-button-inverse-content-disabled: var(--px-color-content-neutral-disabled);
  --px-button-focus-ring-color: var(--px-color-border-focus);
  --px-button-focus-ring-gap: var(--px-color-surface-default);
  --px-button-group-divider: var(--px-color-border-neutral-default);
  --px-button-group-container-border: var(--px-color-border-neutral-default);
}
@media (max-width: 1023px) {
  :root {
    --px-layout-frame-width: var(--px-size-744);
    --px-layout-show-menu: 1;
    --px-layout-breakpoint: medium;
    --px-layout-margin: var(--px-spacing-24);
    --px-layout-gutter: var(--px-spacing-24);
    --px-layout-max-width: var(--px-size-960);
    --px-layout-min-width: var(--px-size-560);
    --px-layout-container-width: var(--px-size-700);
    --px-layout-columns: var(--px-grid-columns-8);
    --px-layout-video-width: var(--px-size-600);
    --px-font-size-headline-md: var(--px-font-size-16);
    --px-font-size-headline-lg: var(--px-font-size-20);
    --px-font-size-display-sm: var(--px-font-size-28);
    --px-font-size-display-md: var(--px-font-size-40);
    --px-font-size-display-lg: var(--px-font-size-44);
    --px-line-height-headline-md: var(--px-line-height-24);
    --px-line-height-headline-lg: var(--px-line-height-28);
    --px-line-height-display-sm: var(--px-line-height-36);
    --px-line-height-display-md: var(--px-line-height-48);
    --px-line-height-display-lg: var(--px-line-height-52);
    --px-spacing-2xl: var(--px-spacing-20);
    --px-spacing-3xl: var(--px-spacing-24);
    --px-spacing-4xl: var(--px-spacing-28);
    --px-spacing-5xl: var(--px-spacing-32);
    --px-spacing-6xl: var(--px-spacing-36);
    --px-spacing-7xl: var(--px-spacing-40);
    --px-spacing-8xl: var(--px-spacing-44);
    --px-spacing-9xl: var(--px-spacing-48);
    --px-spacing-10xl: var(--px-spacing-52);
    --px-spacing-11xl: var(--px-spacing-56);
    --px-line-height-ar-headline-md: var(--px-line-height-24);
    --px-line-height-ar-headline-lg: var(--px-line-height-32);
    --px-line-height-ar-display-sm: var(--px-line-height-40);
    --px-line-height-ar-display-md: var(--px-line-height-56);
    --px-line-height-ar-display-lg: var(--px-line-height-60);
    --px-font-size-display-xl: 52px;
    --px-line-height-display-xl: var(--px-line-height-60);
    --px-line-height-ar-display-xl: var(--px-line-height-68);
    --px-font-size-headline-xl: 26px;
    --px-line-height-headline-xl: var(--px-line-height-36);
    --px-line-height-ar-headline-xl: var(--px-line-height-36);
  }
}
@media (max-width: 599px) {
  :root {
    --px-layout-frame-width: var(--px-size-440);
    --px-layout-show-menu: 1;
    --px-layout-show-menu-icon: 1;
    --px-layout-show-filler: 1;
    --px-layout-breakpoint: small;
    --px-layout-margin: var(--px-spacing-8);
    --px-layout-gutter: var(--px-spacing-8);
    --px-layout-max-width: var(--px-size-560);
    --px-layout-min-width: var(--px-size-320);
    --px-layout-container-width: var(--px-size-400);
    --px-layout-columns: var(--px-grid-columns-4);
    --px-layout-video-width: var(--px-size-300);
    --px-font-size-headline-md: var(--px-font-size-16);
    --px-font-size-headline-lg: var(--px-font-size-18);
    --px-font-size-display-sm: var(--px-font-size-24);
    --px-font-size-display-md: var(--px-font-size-36);
    --px-font-size-display-lg: var(--px-font-size-40);
    --px-line-height-headline-md: var(--px-line-height-24);
    --px-line-height-headline-lg: var(--px-line-height-28);
    --px-line-height-display-sm: var(--px-line-height-32);
    --px-line-height-display-md: var(--px-line-height-44);
    --px-line-height-display-lg: var(--px-line-height-48);
    --px-spacing-2xl: var(--px-spacing-16);
    --px-spacing-3xl: var(--px-spacing-20);
    --px-spacing-4xl: var(--px-spacing-24);
    --px-spacing-5xl: var(--px-spacing-28);
    --px-spacing-6xl: var(--px-spacing-32);
    --px-spacing-7xl: var(--px-spacing-36);
    --px-spacing-8xl: var(--px-spacing-40);
    --px-spacing-9xl: var(--px-spacing-44);
    --px-spacing-10xl: var(--px-spacing-48);
    --px-spacing-11xl: var(--px-spacing-52);
    --px-line-height-ar-headline-md: var(--px-line-height-24);
    --px-line-height-ar-headline-lg: var(--px-line-height-28);
    --px-line-height-ar-display-sm: var(--px-line-height-36);
    --px-line-height-ar-display-md: var(--px-line-height-52);
    --px-line-height-ar-display-lg: var(--px-line-height-56);
    --px-font-size-display-xl: 44px;
    --px-line-height-display-xl: var(--px-line-height-52);
    --px-line-height-ar-display-xl: var(--px-line-height-60);
    --px-font-size-headline-xl: 24px;
    --px-line-height-headline-xl: var(--px-line-height-32);
    --px-line-height-ar-headline-xl: var(--px-line-height-36);
  }
}
:root[data-px-theme='dark'], [data-px-theme='dark'] {
  --px-color-content-brand-default: var(--px-color-brand-400);
  --px-color-content-brand-hover: var(--px-color-brand-300);
  --px-color-content-brand-pressed: var(--px-color-brand-200);
  --px-color-content-neutral-primary: var(--px-color-gray-dark-50);
  --px-color-content-neutral-tertiary: var(--px-color-gray-dark-400);
  --px-color-content-neutral-secondary: var(--px-color-gray-dark-300);
  --px-color-content-neutral-placeholder: var(--px-color-gray-dark-400);
  --px-color-content-danger-default: var(--px-color-red-300);
  --px-color-content-danger-hover: var(--px-color-red-200);
  --px-color-content-danger-pressed: var(--px-color-red-100);
  --px-color-content-success-default: var(--px-color-green-400);
  --px-color-content-success-hover: var(--px-color-green-300);
  --px-color-content-warning-default: var(--px-color-amber-400);
  --px-color-content-warning-hover: var(--px-color-amber-300);
  --px-color-content-info-default: var(--px-color-blue-300);
  --px-color-content-info-hover: var(--px-color-blue-200);
  --px-color-content-accent-blue: var(--px-color-blue-300);
  --px-color-content-accent-pink: var(--px-color-pink-300);
  --px-color-content-accent-purple: var(--px-color-purple-300);
  --px-color-content-accent-indigo: var(--px-color-indigo-300);
  --px-color-content-accent-rose: var(--px-color-rose-300);
  --px-color-content-accent-lime: var(--px-color-lime-300);
  --px-color-content-accent-green: var(--px-color-green-300);
  --px-color-content-accent-red: var(--px-color-red-300);
  --px-color-content-accent-amber: var(--px-color-amber-300);
  --px-color-content-danger-disabled: var(--px-color-red-700);
  --px-color-content-neutral-disabled: var(--px-color-gray-dark-600);
  --px-color-content-brand-disabled: var(--px-color-brand-700);
  --px-color-background-brand-subtle: var(--px-color-brand-900);
  --px-color-background-brand-subtle-hover: var(--px-color-brand-800);
  --px-color-background-brand-subtle-pressed: var(--px-color-brand-700);
  --px-color-background-neutral-default: var(--px-color-gray-dark-800);
  --px-color-background-neutral-hover: var(--px-color-gray-dark-700);
  --px-color-background-neutral-pressed: var(--px-color-gray-dark-600);
  --px-color-background-neutral-bold: var(--px-color-gray-dark-500);
  --px-color-background-neutral-bold-pressed: var(--px-color-gray-dark-400);
  --px-color-background-danger-subtle: var(--px-color-red-900);
  --px-color-background-success-subtle: var(--px-color-green-900);
  --px-color-background-warning-default: var(--px-color-amber-400);
  --px-color-background-warning-hover: var(--px-color-amber-300);
  --px-color-background-warning-pressed: var(--px-color-amber-500);
  --px-color-background-warning-subtle: var(--px-color-amber-900);
  --px-color-background-info-default: var(--px-color-blue-500);
  --px-color-background-info-hover: var(--px-color-blue-600);
  --px-color-background-info-pressed: var(--px-color-blue-700);
  --px-color-background-info-subtle: var(--px-color-blue-900);
  --px-color-background-accent-blue: var(--px-color-blue-400);
  --px-color-background-accent-pink: var(--px-color-pink-400);
  --px-color-background-accent-purple: var(--px-color-purple-400);
  --px-color-background-accent-indigo: var(--px-color-indigo-400);
  --px-color-background-accent-rose: var(--px-color-rose-400);
  --px-color-background-accent-lime: var(--px-color-lime-400);
  --px-color-background-accent-green: var(--px-color-green-400);
  --px-color-background-accent-red: var(--px-color-red-400);
  --px-color-background-danger-disabled: var(--px-color-red-800);
  --px-color-background-neutral-disabled: var(--px-color-gray-dark-800);
  --px-color-background-brand-disabled: var(--px-color-brand-800);
  --px-color-background-scrim: var(--px-color-alpha-black-70);
  --px-color-border-brand-default: var(--px-color-brand-400);
  --px-color-border-brand-hover: var(--px-color-brand-300);
  --px-color-border-focus: var(--px-color-brand-400);
  --px-color-border-brand-pressed: var(--px-color-brand-500);
  --px-color-border-brand-subtle: var(--px-color-brand-800);
  --px-color-border-neutral-default: var(--px-color-gray-dark-700);
  --px-color-border-neutral-hover: var(--px-color-gray-dark-600);
  --px-color-border-neutral-subtle: var(--px-color-gray-dark-800);
  --px-color-border-neutral-strong: var(--px-color-gray-dark-400);
  --px-color-border-neutral-bold: var(--px-color-gray-dark-300);
  --px-color-border-danger-default: var(--px-color-red-400);
  --px-color-border-danger-hover: var(--px-color-red-300);
  --px-color-border-danger-pressed: var(--px-color-red-500);
  --px-color-border-danger-subtle: var(--px-color-red-800);
  --px-color-border-success-default: var(--px-color-green-400);
  --px-color-border-success-hover: var(--px-color-green-300);
  --px-color-border-success-pressed: var(--px-color-green-500);
  --px-color-border-success-subtle: var(--px-color-green-800);
  --px-color-border-warning-default: var(--px-color-amber-400);
  --px-color-border-warning-hover: var(--px-color-amber-300);
  --px-color-border-warning-pressed: var(--px-color-amber-500);
  --px-color-border-warning-subtle: var(--px-color-amber-800);
  --px-color-border-info-default: var(--px-color-blue-400);
  --px-color-border-info-hover: var(--px-color-blue-300);
  --px-color-border-info-pressed: var(--px-color-blue-500);
  --px-color-border-info-subtle: var(--px-color-blue-800);
  --px-color-border-accent-blue: var(--px-color-blue-400);
  --px-color-border-accent-pink: var(--px-color-pink-400);
  --px-color-border-accent-purple: var(--px-color-purple-400);
  --px-color-border-accent-indigo: var(--px-color-indigo-400);
  --px-color-border-accent-rose: var(--px-color-rose-400);
  --px-color-border-accent-lime: var(--px-color-lime-400);
  --px-color-border-accent-green: var(--px-color-green-400);
  --px-color-border-danger-disabled: var(--px-color-red-900);
  --px-color-border-neutral-disabled: var(--px-color-gray-dark-800);
  --px-color-border-brand-disabled: var(--px-color-brand-800);
  --px-color-surface-default: #111112;
  --px-color-shadow-xs: var(--px-color-alpha-black-20);
  --px-color-shadow-sm: var(--px-color-alpha-black-30);
  --px-color-shadow-md: var(--px-color-alpha-black-40);
  --px-color-shadow-lg: var(--px-color-alpha-black-50);
  --px-color-shadow-xl: var(--px-color-alpha-black-60);
  --px-color-content-on-warning: var(--px-color-gray-dark-900);
  --px-color-content-inverse: var(--px-color-gray-dark-900);
  --px-color-content-link-default: var(--px-color-brand-400);
  --px-color-content-link-visited: var(--px-color-purple-300);
  --px-color-surface-raised: #19191b;
  --px-color-surface-sunken: #0b0b0c;
  --px-color-surface-overlay: var(--px-color-gray-dark-800);
  --px-color-surface-inverse: var(--px-color-gray-dark-50);
  --px-color-shadow-2xl: var(--px-color-alpha-black-70);
  --px-color-background-danger-subtle-hover: var(--px-color-red-800);
  --px-color-background-inverse-default: var(--px-color-gray-dark-50);
  --px-color-background-inverse-hover: var(--px-color-gray-dark-200);
  --px-color-background-inverse-pressed: var(--px-color-gray-dark-300);
  --px-color-background-danger-subtle-pressed: var(--px-color-red-700);
  --px-color-content-inverse-muted: var(--px-color-gray-dark-600);
}
:root[data-px-brand='mono'], [data-px-brand='mono'] {
  --px-color-brand-25: #fafafa;
  --px-color-brand-50: #f4f4f5;
  --px-color-brand-100: #e4e4e7;
  --px-color-brand-200: #d4d4d8;
  --px-color-brand-300: #a1a1aa;
  --px-color-brand-400: #71717a;
  --px-color-brand-500: #3f3f46;
  --px-color-brand-600: #27272a;
  --px-color-brand-700: #18181b;
  --px-color-brand-800: #111113;
  --px-color-brand-900: #09090b;
}
:root[data-px-brand='mono'], [data-px-brand='mono'] {
  --px-color-content-brand-default: #111113;
  --px-color-content-brand-hover: #27272a;
  --px-color-background-brand-default: #111113;
  --px-color-background-brand-hover: #27272a;
  --px-color-background-brand-pressed: #3f3f46;
  --px-color-background-brand-subtle: #f4f4f5;
  --px-color-background-brand-subtle-hover: #e4e4e7;
  --px-color-background-brand-subtle-pressed: #d4d4d8;
  --px-color-border-brand-default: #111113;
  --px-color-border-focus: #111113;
  --px-color-border-brand-subtle: #d4d4d8;
  --px-color-content-link-default: #111113;
}
[data-px-theme='dark'][data-px-brand='mono'], [data-px-theme='dark'] [data-px-brand='mono'] {
  --px-color-content-brand-default: #f4f4f5;
  --px-color-content-brand-hover: #ffffff;
  --px-color-content-brand-pressed: var(--px-color-brand-200);
  --px-color-content-neutral-primary: var(--px-color-gray-dark-50);
  --px-color-content-neutral-tertiary: var(--px-color-gray-dark-400);
  --px-color-content-neutral-secondary: var(--px-color-gray-dark-300);
  --px-color-content-neutral-placeholder: var(--px-color-gray-dark-400);
  --px-color-content-danger-default: var(--px-color-red-300);
  --px-color-content-danger-hover: var(--px-color-red-200);
  --px-color-content-danger-pressed: var(--px-color-red-100);
  --px-color-content-success-default: var(--px-color-green-400);
  --px-color-content-success-hover: var(--px-color-green-300);
  --px-color-content-warning-default: var(--px-color-amber-400);
  --px-color-content-warning-hover: var(--px-color-amber-300);
  --px-color-content-info-default: var(--px-color-blue-300);
  --px-color-content-info-hover: var(--px-color-blue-200);
  --px-color-content-accent-blue: var(--px-color-blue-300);
  --px-color-content-accent-pink: var(--px-color-pink-300);
  --px-color-content-accent-purple: var(--px-color-purple-300);
  --px-color-content-accent-indigo: var(--px-color-indigo-300);
  --px-color-content-accent-rose: var(--px-color-rose-300);
  --px-color-content-accent-lime: var(--px-color-lime-300);
  --px-color-content-accent-green: var(--px-color-green-300);
  --px-color-content-accent-red: var(--px-color-red-300);
  --px-color-content-accent-amber: var(--px-color-amber-300);
  --px-color-content-danger-disabled: var(--px-color-red-700);
  --px-color-content-neutral-disabled: var(--px-color-gray-dark-600);
  --px-color-content-brand-disabled: var(--px-color-brand-700);
  --px-color-background-brand-default: #f4f4f5;
  --px-color-background-brand-hover: #e4e4e7;
  --px-color-background-brand-pressed: #d4d4d8;
  --px-color-background-brand-subtle: #27272a;
  --px-color-background-brand-subtle-hover: #323236;
  --px-color-background-brand-subtle-pressed: #3f3f46;
  --px-color-background-neutral-default: var(--px-color-gray-dark-800);
  --px-color-background-neutral-hover: var(--px-color-gray-dark-700);
  --px-color-background-neutral-pressed: var(--px-color-gray-dark-600);
  --px-color-background-neutral-bold: var(--px-color-gray-dark-500);
  --px-color-background-neutral-bold-pressed: var(--px-color-gray-dark-400);
  --px-color-background-danger-subtle: var(--px-color-red-900);
  --px-color-background-success-subtle: var(--px-color-green-900);
  --px-color-background-warning-default: var(--px-color-amber-400);
  --px-color-background-warning-hover: var(--px-color-amber-300);
  --px-color-background-warning-pressed: var(--px-color-amber-500);
  --px-color-background-warning-subtle: var(--px-color-amber-900);
  --px-color-background-info-default: var(--px-color-blue-500);
  --px-color-background-info-hover: var(--px-color-blue-600);
  --px-color-background-info-pressed: var(--px-color-blue-700);
  --px-color-background-info-subtle: var(--px-color-blue-900);
  --px-color-background-accent-blue: var(--px-color-blue-400);
  --px-color-background-accent-pink: var(--px-color-pink-400);
  --px-color-background-accent-purple: var(--px-color-purple-400);
  --px-color-background-accent-indigo: var(--px-color-indigo-400);
  --px-color-background-accent-rose: var(--px-color-rose-400);
  --px-color-background-accent-lime: var(--px-color-lime-400);
  --px-color-background-accent-green: var(--px-color-green-400);
  --px-color-background-accent-red: var(--px-color-red-400);
  --px-color-background-danger-disabled: var(--px-color-red-800);
  --px-color-background-neutral-disabled: var(--px-color-gray-dark-800);
  --px-color-background-brand-disabled: var(--px-color-brand-800);
  --px-color-background-scrim: var(--px-color-alpha-black-70);
  --px-color-border-brand-default: #f4f4f5;
  --px-color-border-brand-hover: var(--px-color-brand-300);
  --px-color-border-focus: #d4d4d8;
  --px-color-border-brand-pressed: var(--px-color-brand-500);
  --px-color-border-brand-subtle: #3f3f46;
  --px-color-border-neutral-default: var(--px-color-gray-dark-700);
  --px-color-border-neutral-hover: var(--px-color-gray-dark-600);
  --px-color-border-neutral-subtle: var(--px-color-gray-dark-800);
  --px-color-border-neutral-strong: var(--px-color-gray-dark-400);
  --px-color-border-neutral-bold: var(--px-color-gray-dark-300);
  --px-color-border-danger-default: var(--px-color-red-400);
  --px-color-border-danger-hover: var(--px-color-red-300);
  --px-color-border-danger-pressed: var(--px-color-red-500);
  --px-color-border-danger-subtle: var(--px-color-red-800);
  --px-color-border-success-default: var(--px-color-green-400);
  --px-color-border-success-hover: var(--px-color-green-300);
  --px-color-border-success-pressed: var(--px-color-green-500);
  --px-color-border-success-subtle: var(--px-color-green-800);
  --px-color-border-warning-default: var(--px-color-amber-400);
  --px-color-border-warning-hover: var(--px-color-amber-300);
  --px-color-border-warning-pressed: var(--px-color-amber-500);
  --px-color-border-warning-subtle: var(--px-color-amber-800);
  --px-color-border-info-default: var(--px-color-blue-400);
  --px-color-border-info-hover: var(--px-color-blue-300);
  --px-color-border-info-pressed: var(--px-color-blue-500);
  --px-color-border-info-subtle: var(--px-color-blue-800);
  --px-color-border-accent-blue: var(--px-color-blue-400);
  --px-color-border-accent-pink: var(--px-color-pink-400);
  --px-color-border-accent-purple: var(--px-color-purple-400);
  --px-color-border-accent-indigo: var(--px-color-indigo-400);
  --px-color-border-accent-rose: var(--px-color-rose-400);
  --px-color-border-accent-lime: var(--px-color-lime-400);
  --px-color-border-accent-green: var(--px-color-green-400);
  --px-color-border-danger-disabled: var(--px-color-red-900);
  --px-color-border-neutral-disabled: var(--px-color-gray-dark-800);
  --px-color-border-brand-disabled: var(--px-color-brand-800);
  --px-color-surface-default: #111112;
  --px-color-shadow-xs: var(--px-color-alpha-black-20);
  --px-color-shadow-sm: var(--px-color-alpha-black-30);
  --px-color-shadow-md: var(--px-color-alpha-black-40);
  --px-color-shadow-lg: var(--px-color-alpha-black-50);
  --px-color-shadow-xl: var(--px-color-alpha-black-60);
  --px-color-content-on-warning: var(--px-color-gray-dark-900);
  --px-color-content-inverse: var(--px-color-gray-dark-900);
  --px-color-content-link-default: #f4f4f5;
  --px-color-content-link-visited: var(--px-color-purple-300);
  --px-color-surface-raised: #19191b;
  --px-color-surface-sunken: #0b0b0c;
  --px-color-surface-overlay: var(--px-color-gray-dark-800);
  --px-color-surface-inverse: var(--px-color-gray-dark-50);
  --px-color-shadow-2xl: var(--px-color-alpha-black-70);
  --px-color-background-danger-subtle-hover: var(--px-color-red-800);
  --px-color-background-inverse-default: var(--px-color-gray-dark-50);
  --px-color-background-inverse-hover: var(--px-color-gray-dark-200);
  --px-color-background-inverse-pressed: var(--px-color-gray-dark-300);
  --px-color-background-danger-subtle-pressed: var(--px-color-red-700);
  --px-color-content-inverse-muted: var(--px-color-gray-dark-600);
  --px-on-brand: #0b0b0c;
}
[dir='rtl'], :root[lang='ar'] {
  --px-locale-direction: rtl;
  --px-locale-language: ar;
  --px-locale-is-rtl: 1;
  --px-font-family-sans: var(--px-font-family-readex-pro);
  --px-typography-body-sm-line-height: var(--px-line-height-ar-body-sm);
  --px-typography-body-md-line-height: var(--px-line-height-ar-body-md);
  --px-typography-body-lg-line-height: var(--px-line-height-ar-body-lg);
  --px-typography-label-sm-line-height: var(--px-line-height-ar-label-sm);
  --px-typography-label-md-line-height: var(--px-line-height-ar-label-md);
  --px-typography-label-lg-line-height: var(--px-line-height-ar-label-lg);
  --px-typography-button-sm-line-height: var(--px-line-height-ar-button-sm);
  --px-typography-button-md-line-height: var(--px-line-height-ar-button-md);
  --px-typography-button-lg-line-height: var(--px-line-height-ar-button-lg);
  --px-typography-headline-sm-line-height: var(--px-line-height-ar-headline-sm);
  --px-typography-headline-md-line-height: var(--px-line-height-ar-headline-md);
  --px-typography-headline-lg-line-height: var(--px-line-height-ar-headline-lg);
  --px-typography-display-sm-line-height: var(--px-line-height-ar-display-sm);
  --px-typography-display-md-line-height: var(--px-line-height-ar-display-md);
  --px-typography-display-lg-line-height: var(--px-line-height-ar-display-lg);
  --px-typography-display-xl-line-height: var(--px-line-height-ar-display-xl);
  --px-typography-headline-xl-line-height: var(--px-line-height-ar-headline-xl);
  --px-typography-overline-line-height: var(--px-line-height-ar-overline);
  --px-typography-code-sm-line-height: var(--px-line-height-ar-code-sm);
  --px-typography-code-md-line-height: var(--px-line-height-ar-code-md);
  --px-letter-spacing-overline: var(--px-letter-spacing-0);
}
[data-px-density='compact'] {
  --px-control-height-sm: var(--px-spacing-28);
  --px-control-height-md: var(--px-spacing-32);
  --px-control-height-lg: var(--px-spacing-40);
  --px-control-padding-x-sm: var(--px-spacing-8);
  --px-control-padding-x-md: var(--px-spacing-12);
  --px-control-padding-x-lg: var(--px-spacing-16);
  --px-control-gap: var(--px-spacing-4);
  --px-control-height-xl: var(--px-spacing-48);
  --px-control-padding-x-xl: var(--px-spacing-20);
}
[data-px-density='comfortable'] {
  --px-control-height-sm: var(--px-spacing-36);
  --px-control-height-md: var(--px-spacing-44);
  --px-control-height-lg: var(--px-spacing-52);
  --px-control-padding-x-sm: var(--px-spacing-16);
  --px-control-padding-x-md: var(--px-spacing-20);
  --px-control-padding-x-lg: var(--px-spacing-24);
  --px-control-gap: var(--px-spacing-12);
  --px-control-height-xl: var(--px-spacing-60);
  --px-control-padding-x-xl: var(--px-spacing-28);
}
:root {
  --px-shadow-xs: 0 1px 2px var(--px-color-shadow-xs);
  --px-shadow-sm: 0 var(--px-elevation-sm-offset-y) var(--px-elevation-sm-blur) var(--px-elevation-sm-spread) var(--px-color-shadow-sm);
  --px-shadow-md: 0 var(--px-elevation-md-offset-y) var(--px-elevation-md-blur) var(--px-elevation-md-spread) var(--px-color-shadow-md);
  --px-shadow-lg: 0 var(--px-elevation-lg-offset-y) var(--px-elevation-lg-blur) var(--px-elevation-lg-spread) var(--px-color-shadow-lg);
  --px-shadow-xl: 0 var(--px-elevation-xl-offset-y) var(--px-elevation-xl-blur) var(--px-elevation-xl-spread) var(--px-color-shadow-xl);
  --px-shadow-2xl: 0 var(--px-elevation-2xl-offset-y) var(--px-elevation-2xl-blur) var(--px-elevation-2xl-spread) var(--px-color-shadow-2xl);
}
/* Text styles from the Figma typography tokens */
.px-text-body-sm-light { font: var(--px-text-body-sm-light); letter-spacing: var(--px-text-body-sm-light-letter-spacing); text-transform: var(--px-text-body-sm-light-text-transform); text-decoration: var(--px-text-body-sm-light-text-decoration); }
.px-text-body-sm-regular { font: var(--px-text-body-sm-regular); letter-spacing: var(--px-text-body-sm-regular-letter-spacing); text-transform: var(--px-text-body-sm-regular-text-transform); text-decoration: var(--px-text-body-sm-regular-text-decoration); }
.px-text-body-sm-medium { font: var(--px-text-body-sm-medium); letter-spacing: var(--px-text-body-sm-medium-letter-spacing); text-transform: var(--px-text-body-sm-medium-text-transform); text-decoration: var(--px-text-body-sm-medium-text-decoration); }
.px-text-body-sm-semibold { font: var(--px-text-body-sm-semibold); letter-spacing: var(--px-text-body-sm-semibold-letter-spacing); text-transform: var(--px-text-body-sm-semibold-text-transform); text-decoration: var(--px-text-body-sm-semibold-text-decoration); }
.px-text-body-md-regular { font: var(--px-text-body-md-regular); letter-spacing: var(--px-text-body-md-regular-letter-spacing); text-transform: var(--px-text-body-md-regular-text-transform); text-decoration: var(--px-text-body-md-regular-text-decoration); }
.px-text-body-md-medium { font: var(--px-text-body-md-medium); letter-spacing: var(--px-text-body-md-medium-letter-spacing); text-transform: var(--px-text-body-md-medium-text-transform); text-decoration: var(--px-text-body-md-medium-text-decoration); }
.px-text-body-md-semibold { font: var(--px-text-body-md-semibold); letter-spacing: var(--px-text-body-md-semibold-letter-spacing); text-transform: var(--px-text-body-md-semibold-text-transform); text-decoration: var(--px-text-body-md-semibold-text-decoration); }
.px-text-body-lg-regular { font: var(--px-text-body-lg-regular); letter-spacing: var(--px-text-body-lg-regular-letter-spacing); text-transform: var(--px-text-body-lg-regular-text-transform); text-decoration: var(--px-text-body-lg-regular-text-decoration); }
.px-text-body-lg-medium { font: var(--px-text-body-lg-medium); letter-spacing: var(--px-text-body-lg-medium-letter-spacing); text-transform: var(--px-text-body-lg-medium-text-transform); text-decoration: var(--px-text-body-lg-medium-text-decoration); }
.px-text-body-lg-semibold { font: var(--px-text-body-lg-semibold); letter-spacing: var(--px-text-body-lg-semibold-letter-spacing); text-transform: var(--px-text-body-lg-semibold-text-transform); text-decoration: var(--px-text-body-lg-semibold-text-decoration); }
.px-text-body-lg-bold { font: var(--px-text-body-lg-bold); letter-spacing: var(--px-text-body-lg-bold-letter-spacing); text-transform: var(--px-text-body-lg-bold-text-transform); text-decoration: var(--px-text-body-lg-bold-text-decoration); }
.px-text-button-md { font: var(--px-text-button-md); letter-spacing: var(--px-text-button-md-letter-spacing); text-transform: var(--px-text-button-md-text-transform); text-decoration: var(--px-text-button-md-text-decoration); }
.px-text-button-sm-medium { font: var(--px-text-button-sm-medium); letter-spacing: var(--px-text-button-sm-medium-letter-spacing); text-transform: var(--px-text-button-sm-medium-text-transform); text-decoration: var(--px-text-button-sm-medium-text-decoration); }
.px-text-button-lg-medium { font: var(--px-text-button-lg-medium); letter-spacing: var(--px-text-button-lg-medium-letter-spacing); text-transform: var(--px-text-button-lg-medium-text-transform); text-decoration: var(--px-text-button-lg-medium-text-decoration); }
.px-text-headline-sm-medium { font: var(--px-text-headline-sm-medium); letter-spacing: var(--px-text-headline-sm-medium-letter-spacing); text-transform: var(--px-text-headline-sm-medium-text-transform); text-decoration: var(--px-text-headline-sm-medium-text-decoration); }
.px-text-headline-sm-semibold { font: var(--px-text-headline-sm-semibold); letter-spacing: var(--px-text-headline-sm-semibold-letter-spacing); text-transform: var(--px-text-headline-sm-semibold-text-transform); text-decoration: var(--px-text-headline-sm-semibold-text-decoration); }
.px-text-headline-sm-bold { font: var(--px-text-headline-sm-bold); letter-spacing: var(--px-text-headline-sm-bold-letter-spacing); text-transform: var(--px-text-headline-sm-bold-text-transform); text-decoration: var(--px-text-headline-sm-bold-text-decoration); }
.px-text-headline-md-medium { font: var(--px-text-headline-md-medium); letter-spacing: var(--px-text-headline-md-medium-letter-spacing); text-transform: var(--px-text-headline-md-medium-text-transform); text-decoration: var(--px-text-headline-md-medium-text-decoration); }
.px-text-headline-md-semibold { font: var(--px-text-headline-md-semibold); letter-spacing: var(--px-text-headline-md-semibold-letter-spacing); text-transform: var(--px-text-headline-md-semibold-text-transform); text-decoration: var(--px-text-headline-md-semibold-text-decoration); }
.px-text-headline-lg-medium { font: var(--px-text-headline-lg-medium); letter-spacing: var(--px-text-headline-lg-medium-letter-spacing); text-transform: var(--px-text-headline-lg-medium-text-transform); text-decoration: var(--px-text-headline-lg-medium-text-decoration); }
.px-text-headline-lg-semibold { font: var(--px-text-headline-lg-semibold); letter-spacing: var(--px-text-headline-lg-semibold-letter-spacing); text-transform: var(--px-text-headline-lg-semibold-text-transform); text-decoration: var(--px-text-headline-lg-semibold-text-decoration); }
.px-text-headline-xl-semibold { font: var(--px-text-headline-xl-semibold); letter-spacing: var(--px-text-headline-xl-semibold-letter-spacing); text-transform: var(--px-text-headline-xl-semibold-text-transform); text-decoration: var(--px-text-headline-xl-semibold-text-decoration); }
.px-text-display-sm-bold { font: var(--px-text-display-sm-bold); letter-spacing: var(--px-text-display-sm-bold-letter-spacing); text-transform: var(--px-text-display-sm-bold-text-transform); text-decoration: var(--px-text-display-sm-bold-text-decoration); }
.px-text-display-sm-semibold { font: var(--px-text-display-sm-semibold); letter-spacing: var(--px-text-display-sm-semibold-letter-spacing); text-transform: var(--px-text-display-sm-semibold-text-transform); text-decoration: var(--px-text-display-sm-semibold-text-decoration); }
.px-text-display-md-regular { font: var(--px-text-display-md-regular); letter-spacing: var(--px-text-display-md-regular-letter-spacing); text-transform: var(--px-text-display-md-regular-text-transform); text-decoration: var(--px-text-display-md-regular-text-decoration); }
.px-text-display-md-semibold { font: var(--px-text-display-md-semibold); letter-spacing: var(--px-text-display-md-semibold-letter-spacing); text-transform: var(--px-text-display-md-semibold-text-transform); text-decoration: var(--px-text-display-md-semibold-text-decoration); }
.px-text-display-xl-semibold { font: var(--px-text-display-xl-semibold); letter-spacing: var(--px-text-display-xl-semibold-letter-spacing); text-transform: var(--px-text-display-xl-semibold-text-transform); text-decoration: var(--px-text-display-xl-semibold-text-decoration); }
.px-text-display-lg-semibold { font: var(--px-text-display-lg-semibold); letter-spacing: var(--px-text-display-lg-semibold-letter-spacing); text-transform: var(--px-text-display-lg-semibold-text-transform); text-decoration: var(--px-text-display-lg-semibold-text-decoration); }
.px-text-label-sm-regular { font: var(--px-text-label-sm-regular); letter-spacing: var(--px-text-label-sm-regular-letter-spacing); text-transform: var(--px-text-label-sm-regular-text-transform); text-decoration: var(--px-text-label-sm-regular-text-decoration); }
.px-text-label-sm-medium { font: var(--px-text-label-sm-medium); letter-spacing: var(--px-text-label-sm-medium-letter-spacing); text-transform: var(--px-text-label-sm-medium-text-transform); text-decoration: var(--px-text-label-sm-medium-text-decoration); }
.px-text-label-sm-semibold { font: var(--px-text-label-sm-semibold); letter-spacing: var(--px-text-label-sm-semibold-letter-spacing); text-transform: var(--px-text-label-sm-semibold-text-transform); text-decoration: var(--px-text-label-sm-semibold-text-decoration); }
.px-text-label-md-regular { font: var(--px-text-label-md-regular); letter-spacing: var(--px-text-label-md-regular-letter-spacing); text-transform: var(--px-text-label-md-regular-text-transform); text-decoration: var(--px-text-label-md-regular-text-decoration); }
.px-text-label-md-medium { font: var(--px-text-label-md-medium); letter-spacing: var(--px-text-label-md-medium-letter-spacing); text-transform: var(--px-text-label-md-medium-text-transform); text-decoration: var(--px-text-label-md-medium-text-decoration); }
.px-text-label-md-semibold { font: var(--px-text-label-md-semibold); letter-spacing: var(--px-text-label-md-semibold-letter-spacing); text-transform: var(--px-text-label-md-semibold-text-transform); text-decoration: var(--px-text-label-md-semibold-text-decoration); }
.px-text-label-lg-regular { font: var(--px-text-label-lg-regular); letter-spacing: var(--px-text-label-lg-regular-letter-spacing); text-transform: var(--px-text-label-lg-regular-text-transform); text-decoration: var(--px-text-label-lg-regular-text-decoration); }
.px-text-label-lg-medium { font: var(--px-text-label-lg-medium); letter-spacing: var(--px-text-label-lg-medium-letter-spacing); text-transform: var(--px-text-label-lg-medium-text-transform); text-decoration: var(--px-text-label-lg-medium-text-decoration); }
.px-text-label-lg-semibold { font: var(--px-text-label-lg-semibold); letter-spacing: var(--px-text-label-lg-semibold-letter-spacing); text-transform: var(--px-text-label-lg-semibold-text-transform); text-decoration: var(--px-text-label-lg-semibold-text-decoration); }
.px-text-caption-regular { font: var(--px-text-caption-regular); letter-spacing: var(--px-text-caption-regular-letter-spacing); text-transform: var(--px-text-caption-regular-text-transform); text-decoration: var(--px-text-caption-regular-text-decoration); }
.px-text-caption-medium { font: var(--px-text-caption-medium); letter-spacing: var(--px-text-caption-medium-letter-spacing); text-transform: var(--px-text-caption-medium-text-transform); text-decoration: var(--px-text-caption-medium-text-decoration); }
.px-text-overline-regular { font: var(--px-text-overline-regular); letter-spacing: var(--px-text-overline-regular-letter-spacing); text-transform: var(--px-text-overline-regular-text-transform); text-decoration: var(--px-text-overline-regular-text-decoration); }
.px-text-overline-semibold { font: var(--px-text-overline-semibold); letter-spacing: var(--px-text-overline-semibold-letter-spacing); text-transform: var(--px-text-overline-semibold-text-transform); text-decoration: var(--px-text-overline-semibold-text-decoration); }
.px-text-code-sm { font: var(--px-text-code-sm); letter-spacing: var(--px-text-code-sm-letter-spacing); text-transform: var(--px-text-code-sm-text-transform); text-decoration: var(--px-text-code-sm-text-decoration); }
.px-text-code-md { font: var(--px-text-code-md); letter-spacing: var(--px-text-code-md-letter-spacing); text-transform: var(--px-text-code-md-text-transform); text-decoration: var(--px-text-code-md-text-decoration); }
.px-text-chart-axis-xs { font: var(--px-text-chart-axis-xs); letter-spacing: var(--px-text-chart-axis-xs-letter-spacing); text-transform: var(--px-text-chart-axis-xs-text-transform); text-decoration: var(--px-text-chart-axis-xs-text-decoration); }