:root {
  --primitive-color-black: oklch(0 0 0);
  --primitive-color-white: oklch(1 0 0);
  --primitive-color-gray-50: oklch(0.97 0 0);
  --primitive-color-gray-100: oklch(0.93 0 0);
  --primitive-color-gray-200: oklch(0.88 0 0);
  --primitive-color-gray-300: oklch(0.80 0 0);
  --primitive-color-gray-400: oklch(0.70 0 0);
  --primitive-color-gray-500: oklch(0.60 0 0);
  --primitive-color-gray-600: oklch(0.51 0 0);
  --primitive-color-gray-700: oklch(0.42 0 0);
  --primitive-color-gray-800: oklch(0.32 0 0);
  --primitive-color-gray-900: oklch(0.22 0 0);
  --primitive-color-purple-50: oklch(0.97 0.017 292.209);
  --primitive-color-purple-100: oklch(0.93 0.043 291.611);
  --primitive-color-purple-200: oklch(0.88 0.09 290.251);
  --primitive-color-purple-300: oklch(0.80 0.186 284.567);
  --primitive-color-purple-400: oklch(0.70 0.19 278.846);
  --primitive-color-purple-500: oklch(0.60 0.118 280.644);
  --primitive-color-purple-600: oklch(0.51 0.1 281.395);
  --primitive-color-purple-700: oklch(0.42 0.082 282.423);
  --primitive-color-purple-800: oklch(0.32 0.062 283.903);
  --primitive-color-purple-900: oklch(0.22 0.041 287.021);
  --primitive-color-pink-50: oklch(0.97 0.024 354.284);
  --primitive-color-pink-100: oklch(0.93 0.061 357.51);
  --primitive-color-pink-200: oklch(0.88 0.127 0.003);
  --primitive-color-pink-300: oklch(0.80 0.19 3.538);
  --primitive-color-pink-400: oklch(0.70 0.221 6.474);
  --primitive-color-pink-500: oklch(0.60 0.239 9.566);
  --primitive-color-pink-600: oklch(0.51 0.254 16.626);
  --primitive-color-pink-700: oklch(0.42 0.215 16.014);
  --primitive-color-pink-800: oklch(0.32 0.174 15.009);
  --primitive-color-pink-900: oklch(0.22 0.13 13.064);
  --primitive-color-blue-50: oklch(0.97 0.027 285.097);
  --primitive-color-blue-100: oklch(0.93 0.069 284.088);
  --primitive-color-blue-200: oklch(0.88 0.144 281.475);
  --primitive-color-blue-300: oklch(0.80 0.218 276.885);
  --primitive-color-blue-400: oklch(0.70 0.252 273.552);
  --primitive-color-blue-500: oklch(0.60 0.275 270.486);
  --primitive-color-blue-600: oklch(0.51 0.312 264.075);
  --primitive-color-blue-700: oklch(0.42 0.264 264.082);
  --primitive-color-blue-800: oklch(0.32 0.213 264.093);
  --primitive-color-blue-900: oklch(0.22 0.158 264.114);
  --primitive-color-green-50: oklch(0.97 0.021 158.247);
  --primitive-color-green-100: oklch(0.93 0.052 157.46);
  --primitive-color-green-200: oklch(0.88 0.103 155.902);
  --primitive-color-green-300: oklch(0.80 0.191 151.588);
  --primitive-color-green-400: oklch(0.70 0.203 148.868);
  --primitive-color-green-500: oklch(0.60 0.14 149.363);
  --primitive-color-green-600: oklch(0.51 0.116 149.694);
  --primitive-color-green-700: oklch(0.42 0.09 150.23);
  --primitive-color-green-800: oklch(0.32 0.063 151.418);
  --primitive-color-green-900: oklch(0.22 0.043 153.713);
  --primitive-color-yellow-50: oklch(0.97 0.019 91.436);
  --primitive-color-yellow-100: oklch(0.93 0.046 91.61);
  --primitive-color-yellow-200: oklch(0.88 0.09 91.639);
  --primitive-color-yellow-300: oklch(0.80 0.127 91.064);
  --primitive-color-yellow-400: oklch(0.70 0.154 89.335);
  --primitive-color-yellow-500: oklch(0.60 0.163 86.856);
  --primitive-color-yellow-600: oklch(0.51 0.152 85.734);
  --primitive-color-yellow-700: oklch(0.42 0.126 86.127);
  --primitive-color-yellow-800: oklch(0.32 0.098 86.786);
  --primitive-color-yellow-900: oklch(0.22 0.068 88.181);
  --primitive-color-brown-50: oklch(0.97 0.015 41.19);
  --primitive-color-brown-100: oklch(0.93 0.059 40.943);
  --primitive-color-brown-200: oklch(0.88 0.124 40.648);
  --primitive-color-brown-300: oklch(0.80 0.186 38.946);
  --primitive-color-brown-400: oklch(0.70 0.17 37.551);
  --primitive-color-brown-500: oklch(0.60 0.116 38.211);
  --primitive-color-brown-600: oklch(0.51 0.097 38.614);
  --primitive-color-brown-700: oklch(0.42 0.077 39.393);
  --primitive-color-brown-800: oklch(0.32 0.056 41.356);
  --primitive-color-brown-900: oklch(0.22 0.033 48.665);
  --primitive-color-red-50: oklch(0.97 0.021 4.878);
  --primitive-color-red-100: oklch(0.93 0.053 5.862);
  --primitive-color-red-200: oklch(0.88 0.112 8.017);
  --primitive-color-red-300: oklch(0.80 0.171 11.214);
  --primitive-color-red-400: oklch(0.70 0.219 16.101);
  --primitive-color-red-500: oklch(0.60 0.244 22.773);
  --primitive-color-red-600: oklch(0.51 0.205 22.32);
  --primitive-color-red-700: oklch(0.42 0.165 21.562);
  --primitive-color-red-800: oklch(0.32 0.122 20.025);
  --primitive-color-red-900: oklch(0.22 0.075 15.388);
  --primitive-color-success-500: oklch(0.60 0.181 143.399);
  --primitive-color-error-500: oklch(0.60 0.143 25.074);
  --primitive-color-warning-500: oklch(0.60 0.171 106.05);
  --primitive-color-facebook: oklch(0.60 0.108 263.58);
  --primitive-color-instagram-blue: oklch(0.60 0.085 244.612);
  --primitive-color-instagram-purple: oklch(0.60 0.195 310.162);
  --primitive-color-linkedin: oklch(0.60 0.13 242.274);
  --primitive-color-paypal-blue: oklch(0.60 0.144 237.468);
  --primitive-color-paypal-blue-dark: oklch(0.60 0.153 261.333);
  --primitive-color-pinterest: oklch(0.60 0.236 25.536);
  --primitive-color-twitter: oklch(0.60 0.107 240.795);
  --primitive-color-whatsapp-green: oklch(0.60 0.187 147.061);
  --primitive-color-whatsapp-green-dark: oklch(0.60 0.175 142.527);
  --primitive-color-youtube: oklch(0.60 0.209 27.019);
}

:root {
  --primitive-space-base: 0.5rem;
  --primitive-space-0: 0;
  --primitive-space-1: calc(1 * var(--primitive-space-base));
  --primitive-space-2: calc(2 * var(--primitive-space-base));
  --primitive-space-3: calc(3 * var(--primitive-space-base));
  --primitive-space-4: calc(4 * var(--primitive-space-base));
  --primitive-space-5: calc(5 * var(--primitive-space-base));
  --primitive-space-6: calc(6 * var(--primitive-space-base));
  --primitive-space-7: calc(7 * var(--primitive-space-base));
  --primitive-space-8: calc(8 * var(--primitive-space-base));
  --primitive-space-9: calc(9 * var(--primitive-space-base));
  --primitive-space-10: calc(10 * var(--primitive-space-base));
  --primitive-space-12: calc(12 * var(--primitive-space-base));
  --primitive-space-14: calc(14 * var(--primitive-space-base));
  --primitive-space-16: calc(16 * var(--primitive-space-base));
  --primitive-space-20: calc(20 * var(--primitive-space-base));
  --primitive-space-24: calc(24 * var(--primitive-space-base));
  --primitive-space-0-5: calc(0.5 * var(--primitive-space-base));
  --primitive-space-1-5: calc(1.5 * var(--primitive-space-base));
  --primitive-space-2-5: calc(2.5 * var(--primitive-space-base));
}

:root {
  --primitive-font-family-space-grotesk-regular: "Google-Space-Grotesk--regular", Arial, sans-serif;
  --primitive-font-family-space-grotesk-bold: "Google-Space-Grotesk--bold", Arial, sans-serif;
  --primitive-font-family-syne-medium: "Google-Syne--medium", Arial, sans-serif;
  --primitive-font-family-syne-bold: "Google-Syne--bold", Arial, sans-serif;
  --primitive-font-family-mono: "Courier New", Courier, monospace;
  --primitive-font-size-xs: clamp(0.64rem, 0.61rem + 0.14vw, 0.72rem);
  --primitive-font-size-sm: clamp(0.8rem, 0.76rem + 0.18vw, 0.9rem);
  --primitive-font-size-base: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --primitive-font-size-md: clamp(1.25rem, 1.19rem + 0.24vw, 1.406rem);
  --primitive-font-size-lg: clamp(1.563rem, 1.49rem + 0.3vw, 1.758rem);
  --primitive-font-size-xl: clamp(1.953rem, 1.86rem + 0.37vw, 2.197rem);
  --primitive-font-size-2xl: clamp(1.875rem, 1.63rem + 1.05vw, 2.747rem);
  --primitive-font-size-3xl: clamp(2.125rem, 1.75rem + 1.6vw, 3.433rem);
  --primitive-font-size-4xl: clamp(2.5rem, 1.9rem + 2.57vw, 4.291rem);
  --primitive-line-height-tight: 1;
  --primitive-line-height-snug: 1.2;
  --primitive-line-height-normal: 1.5;
  --primitive-line-height-relaxed: 1.65;
  --primitive-line-height-loose: 2;
  --primitive-font-weight-regular: 400;
  --primitive-font-weight-medium: 500;
  --primitive-font-weight-semibold: 600;
  --primitive-font-weight-bold: 700;
  --primitive-font-weight-black: 900;
  --primitive-letter-spacing-tight: -0.02em;
  --primitive-letter-spacing-normal: 0;
  --primitive-letter-spacing-wide: 0.06em;
  --primitive-letter-spacing-wider: 0.1em;
  --primitive-letter-spacing-display: -0.03em;
  --primitive-fluid-font-display: clamp(3.5rem, 3rem + 2.5vw, 5rem);
}

:root {
  --primitive-size-1: calc(2 * var(--primitive-space-base));
  --primitive-size-2: calc(3 * var(--primitive-space-base));
  --primitive-size-3: calc(4 * var(--primitive-space-base));
  --primitive-size-4: calc(5 * var(--primitive-space-base));
  --primitive-size-5: calc(6 * var(--primitive-space-base));
  --primitive-size-6: calc(8 * var(--primitive-space-base));
  --primitive-size-7: calc(10 * var(--primitive-space-base));
  --primitive-size-8: calc(12 * var(--primitive-space-base));
  --primitive-size-9: calc(14 * var(--primitive-space-base));
  --primitive-size-10: calc(16 * var(--primitive-space-base));
  --primitive-width-full: 100%;
  --primitive-width-screen: 100vw;
  --primitive-width-min: min-content;
  --primitive-width-max: max-content;
  --primitive-width-fit: fit-content;
  --primitive-height-full: 100%;
  --primitive-height-screen: 100vh;
  --primitive-height-min: min-content;
  --primitive-height-max: max-content;
  --primitive-height-fit: fit-content;
}

:root {
  --primitive-border-width-0: 0;
  --primitive-border-width-1: 1px;
  --primitive-border-width-2: 2px;
  --primitive-border-width-4: 4px;
  --primitive-border-width-8: 8px;
  --primitive-border-radius-none: 0;
  --primitive-border-radius-sm: calc(0.5 * var(--primitive-space-base));
  --primitive-border-radius-md: calc(1 * var(--primitive-space-base));
  --primitive-border-radius-lg: calc(1.5 * var(--primitive-space-base));
  --primitive-border-radius-xl: calc(2 * var(--primitive-space-base));
  --primitive-border-radius-2xl: calc(3 * var(--primitive-space-base));
  --primitive-border-radius-full: 9999px;
  --primitive-border-radius-circle: 50%;
}

:root {
  --primitive-shadow-none: none;
  --primitive-shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
  --primitive-shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px 0 oklch(0 0 0 / 0.06);
  --primitive-shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -1px oklch(0 0 0 / 0.06);
  --primitive-shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -2px oklch(0 0 0 / 0.05);
  --primitive-shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 10px 10px -5px oklch(0 0 0 / 0.04);
  --primitive-shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.25);
  --primitive-shadow-inner: inset 0 2px 4px 0 oklch(0 0 0 / 0.06);
  --primitive-opacity-0: 0;
  --primitive-opacity-5: 0.05;
  --primitive-opacity-10: 0.1;
  --primitive-opacity-20: 0.2;
  --primitive-opacity-25: 0.25;
  --primitive-opacity-30: 0.3;
  --primitive-opacity-40: 0.4;
  --primitive-opacity-50: 0.5;
  --primitive-opacity-60: 0.6;
  --primitive-opacity-70: 0.7;
  --primitive-opacity-75: 0.75;
  --primitive-opacity-80: 0.8;
  --primitive-opacity-90: 0.9;
  --primitive-opacity-95: 0.95;
  --primitive-opacity-100: 1;
}

:root {
  --primitive-fluid-space-xs: clamp(0.25rem, 0.16rem + 0.38vw, 0.5rem);
  --primitive-fluid-space-sm: clamp(0.5rem, 0.32rem + 0.75vw, 1rem);
  --primitive-fluid-space-md: clamp(1rem, 0.82rem + 0.75vw, 1.5rem);
  --primitive-fluid-space-lg: clamp(1.5rem, 1.32rem + 0.75vw, 2rem);
  --primitive-fluid-space-xl: clamp(2rem, 1.65rem + 1.5vw, 3rem);
  --primitive-fluid-space-xxl: clamp(3rem, 2.65rem + 1.5vw, 4rem);
  --primitive-fluid-font-body: var(--primitive-font-size-base);
  --primitive-fluid-font-h6: var(--primitive-font-size-md);
  --primitive-fluid-font-h5: var(--primitive-font-size-lg);
  --primitive-fluid-font-h4: var(--primitive-font-size-xl);
  --primitive-fluid-font-h3: var(--primitive-font-size-2xl);
  --primitive-fluid-font-h2: var(--primitive-font-size-3xl);
  --primitive-fluid-font-h1: var(--primitive-font-size-4xl);
}

:root {
  --semantic-color-primary: var(--primitive-color-purple-500);
  --semantic-color-secondary: var(--primitive-color-pink-500);
  --semantic-color-tertiary: var(--primitive-color-blue-500);
  --semantic-color-quaternary: var(--primitive-color-green-500);
  --semantic-color-quinary: var(--primitive-color-yellow-500);
  --semantic-color-primary-text: var(--semantic-color-primary);
  --semantic-color-secondary-text: var(--semantic-color-secondary);
  --semantic-color-tertiary-text: var(--semantic-color-tertiary);
  --semantic-color-quaternary-text: var(--semantic-color-quaternary);
  --semantic-color-quinary-text: var(--semantic-color-quinary);
}

@supports (color: oklch(from red l c h)) {
  :root {
    --semantic-brand-text-lightness: 0.45;
    --semantic-color-primary-text: oklch(from var(--semantic-color-primary) var(--semantic-brand-text-lightness) c h);
    --semantic-color-secondary-text: oklch(from var(--semantic-color-secondary) var(--semantic-brand-text-lightness) c h);
    --semantic-color-tertiary-text: oklch(from var(--semantic-color-tertiary) var(--semantic-brand-text-lightness) c h);
    --semantic-color-quaternary-text: oklch(from var(--semantic-color-quaternary) var(--semantic-brand-text-lightness) c h);
    --semantic-color-quinary-text: oklch(from var(--semantic-color-quinary) var(--semantic-brand-text-lightness) c h);
  }
}
:root {
  --semantic-color-bg-primary: var(--primitive-color-white);
  --semantic-color-bg-secondary: var(--primitive-color-pink-50);
  --semantic-color-bg-tertiary: var(--primitive-color-gray-50);
  --semantic-color-bg-inverse: var(--primitive-color-black);
  --semantic-color-text-primary: var(--primitive-color-purple-500);
  --semantic-color-text-secondary: var(--primitive-color-gray-700);
  --semantic-color-text-tertiary: var(--primitive-color-gray-500);
  --semantic-color-text-inverse: var(--primitive-color-white);
  --semantic-color-text-disabled: var(--primitive-color-gray-300);
  --semantic-color-border-default: var(--primitive-color-gray-300);
  --semantic-color-border-subtle: var(--primitive-color-gray-200);
  --semantic-color-border-strong: var(--primitive-color-gray-400);
  --semantic-color-border-focus: var(--primitive-color-pink-500);
  --semantic-color-link-default: var(--primitive-color-pink-500);
  --semantic-color-link-hover: var(--primitive-color-purple-500);
  --semantic-color-link-visited: var(--primitive-color-purple-500);
  --semantic-color-link-active: var(--primitive-color-pink-500);
  --semantic-color-state-hover-primary: var(--primitive-color-pink-500);
  --semantic-color-state-hover-secondary: var(--primitive-color-purple-500);
  --semantic-color-state-hover-tertiary: var(--primitive-color-pink-500);
  --semantic-color-state-hover-quaternary: var(--primitive-color-pink-500);
  --semantic-focus-ring-color: var(--primitive-color-pink-500);
  --semantic-color-state-active: var(--primitive-color-purple-500);
  --semantic-color-state-disabled: var(--primitive-color-gray-300);
  --semantic-tone-success-bg: var(--primitive-color-success-500);
  --semantic-tone-error-bg: var(--primitive-color-error-500);
  --semantic-tone-warning-bg: var(--primitive-color-warning-500);
  --semantic-tone-info-bg: var(--primitive-color-blue-500);
  --semantic-color-success: var(--semantic-tone-success-bg);
  --semantic-color-error: var(--semantic-tone-error-bg);
  --semantic-color-warning: var(--semantic-tone-warning-bg);
  --semantic-color-info: var(--semantic-tone-info-bg);
  --semantic-color-state-focus: var(--primitive-color-pink-500);
  --semantic-color-state-success: var(--semantic-tone-success-bg);
  --semantic-color-state-error: var(--semantic-tone-error-bg);
  --semantic-color-state-warning: var(--semantic-tone-warning-bg);
  --semantic-color-state-info: var(--semantic-tone-info-bg);
  --semantic-color-selection-text: var(--primitive-color-white);
  --semantic-color-selection-bg: var(--primitive-color-purple-500);
  --semantic-color-placeholder: var(--primitive-color-purple-500);
}

:root {
  --semantic-font-family-primary: var(--primitive-font-family-space-grotesk-regular);
  --semantic-font-family-primary-bold: var(--primitive-font-family-space-grotesk-bold);
  --semantic-font-family-heading: var(--primitive-font-family-syne-bold);
  --semantic-font-family-heading-md: var(--primitive-font-family-syne-medium);
  --semantic-font-family-mono: "Courier New", Courier, monospace;
  --semantic-font-size-overline: var(--primitive-font-size-xs);
  --semantic-font-size-caption: var(--primitive-font-size-xs);
  --semantic-font-size-body-small: var(--primitive-font-size-sm);
  --semantic-font-size-body: var(--primitive-font-size-base);
  --semantic-font-size-body-large: var(--primitive-font-size-md);
  --semantic-font-size-body-sm: var(--primitive-font-size-sm);
  --semantic-font-size-h6: var(--primitive-font-size-md);
  --semantic-font-size-h5: var(--primitive-font-size-lg);
  --semantic-font-size-h4: var(--primitive-font-size-xl);
  --semantic-font-size-h3: var(--primitive-font-size-2xl);
  --semantic-font-size-h2: var(--primitive-font-size-3xl);
  --semantic-font-size-h1: var(--primitive-font-size-4xl);
  --semantic-line-height-tight: var(--primitive-line-height-tight);
  --semantic-line-height-snug: var(--primitive-line-height-snug);
  --semantic-line-height-normal: var(--primitive-line-height-normal);
  --semantic-line-height-relaxed: var(--primitive-line-height-relaxed);
  --semantic-line-height-body: var(--primitive-line-height-relaxed);
  --semantic-line-height-heading: var(--primitive-line-height-snug);
  --semantic-line-height-caption: var(--primitive-line-height-normal);
  --semantic-font-weight-regular: var(--primitive-font-weight-regular);
  --semantic-font-weight-medium: var(--primitive-font-weight-medium);
  --semantic-font-weight-bold: var(--primitive-font-weight-bold);
  --semantic-font-weight-black: var(--primitive-font-weight-black);
  --semantic-letter-spacing-tight: var(--primitive-letter-spacing-tight);
  --semantic-letter-spacing-normal: var(--primitive-letter-spacing-normal);
  --semantic-letter-spacing-wide: var(--primitive-letter-spacing-wide);
  --semantic-letter-spacing-wider: var(--primitive-letter-spacing-wider);
}

:root {
  --semantic-space-layout-xs: var(--primitive-fluid-space-xs);
  --semantic-space-layout-sm: var(--primitive-fluid-space-sm);
  --semantic-space-layout-md: var(--primitive-fluid-space-md);
  --semantic-space-layout-lg: var(--primitive-fluid-space-lg);
  --semantic-space-layout-xl: var(--primitive-fluid-space-xl);
  --semantic-space-layout-xxl: var(--primitive-fluid-space-xxl);
  --semantic-space-component-xs: var(--primitive-fluid-space-xs);
  --semantic-space-component-sm: var(--primitive-fluid-space-sm);
  --semantic-space-component-md: var(--primitive-fluid-space-md);
  --semantic-space-component-lg: var(--primitive-fluid-space-lg);
  --semantic-space-component-xl: var(--primitive-fluid-space-xl);
  --semantic-space-inline-xs: var(--primitive-space-1);
  --semantic-space-inline-sm: var(--primitive-space-2);
  --semantic-space-inline-md: var(--primitive-space-3);
  --semantic-space-inline-lg: var(--primitive-space-4);
  --semantic-space-stack-xs: var(--primitive-space-1);
  --semantic-space-stack-sm: var(--primitive-space-2);
  --semantic-space-stack-md: var(--primitive-space-3);
  --semantic-space-stack-lg: var(--primitive-space-4);
  --semantic-space-stack-xl: var(--primitive-space-6);
  --semantic-z-index-base: 0;
  --semantic-z-index-dropdown: 100;
  --semantic-z-index-sticky: 200;
  --semantic-z-index-overlay: 300;
  --semantic-z-index-drawer: 400;
  --semantic-z-index-modal: 500;
  --semantic-z-index-toast: 600;
  --semantic-z-index-skip-link: 9999;
}

:root {
  --semantic-border-width-none: var(--primitive-border-width-0);
  --semantic-border-width-thin: var(--primitive-border-width-1);
  --semantic-border-width-default: var(--primitive-border-width-2);
  --semantic-border-width-thick: var(--primitive-border-width-4);
  --semantic-border-radius-none: var(--primitive-border-radius-none);
  --semantic-border-radius-sm: var(--primitive-border-radius-sm);
  --semantic-border-radius-default: var(--primitive-border-radius-md);
  --semantic-border-radius-lg: var(--primitive-border-radius-lg);
  --semantic-border-radius-xl: var(--primitive-border-radius-xl);
  --semantic-border-radius-2xl: var(--primitive-border-radius-2xl);
  --semantic-border-radius-full: var(--primitive-border-radius-full);
  --semantic-border-radius-circle: var(--primitive-border-radius-circle);
}

:root {
  --semantic-shadow-none: var(--primitive-shadow-none);
  --semantic-shadow-xs: var(--primitive-shadow-xs);
  --semantic-shadow-sm: var(--primitive-shadow-sm);
  --semantic-shadow-md: var(--primitive-shadow-md);
  --semantic-shadow-lg: var(--primitive-shadow-lg);
  --semantic-shadow-xl: var(--primitive-shadow-xl);
  --semantic-shadow-focus: 0 0 0.313rem 0 var(--semantic-focus-ring-color);
  --semantic-shadow-inner: var(--primitive-shadow-inner);
  --semantic-shadow-card: 0 1px 3px oklch(0 0 0 / 0.04), 0 4px 12px oklch(0 0 0 / 0.03);
  --semantic-shadow-hard-color: var(--semantic-color-border-strong);
  --semantic-shadow-hard-offset: 0.25rem;
  --semantic-shadow-hard-sm: calc(var(--semantic-shadow-hard-offset) / 2) calc(var(--semantic-shadow-hard-offset) / 2) 0 0 var(--semantic-shadow-hard-color);
  --semantic-shadow-hard: var(--semantic-shadow-hard-offset) var(--semantic-shadow-hard-offset) 0 0 var(--semantic-shadow-hard-color);
  --semantic-shadow-hard-lg: calc(var(--semantic-shadow-hard-offset) * 1.5) calc(var(--semantic-shadow-hard-offset) * 1.5) 0 0 var(--semantic-shadow-hard-color);
  --semantic-bg-grid-size: 1.5rem;
  --semantic-bg-grid-color: transparent;
  --semantic-bg-grid-width: 1px;
  --semantic-bg-grid: repeating-linear-gradient( to right, var(--semantic-bg-grid-color) 0, var(--semantic-bg-grid-color) var(--semantic-bg-grid-width), transparent var(--semantic-bg-grid-width), transparent var(--semantic-bg-grid-size) ), repeating-linear-gradient( to bottom, var(--semantic-bg-grid-color) 0, var(--semantic-bg-grid-color) var(--semantic-bg-grid-width), transparent var(--semantic-bg-grid-width), transparent var(--semantic-bg-grid-size) );
}

:root {
  --semantic-duration-instant: 0.08s;
  --semantic-duration-fast: 0.15s;
  --semantic-duration-base: 0.25s;
  --semantic-duration-slow: 0.4s;
  --semantic-easing-standard: ease;
  --semantic-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
  --semantic-easing-in-out: ease-in-out;
  --semantic-easing-linear: linear;
  --semantic-focus-ring-width: 0.125rem;
  --semantic-focus-ring-offset: 0.125rem;
  --semantic-focus-ring-style: solid;
}

@media (prefers-reduced-motion: reduce) {
  :root:root {
    --semantic-duration-instant: 0.01ms;
    --semantic-duration-fast: 0.01ms;
    --semantic-duration-base: 0.01ms;
    --semantic-duration-slow: 0.01ms;
  }
}
:root {
  --semantic-filter-primary: brightness(0) saturate(100%) invert(18%) sepia(47%) saturate(1200%) hue-rotate(228deg) brightness(95%) contrast(95%);
  --semantic-filter-secondary: brightness(0) saturate(100%) invert(42%) sepia(95%) saturate(1200%) hue-rotate(313deg) brightness(105%) contrast(101%);
  --semantic-filter-state-ok: brightness(0) saturate(100%) invert(28%) sepia(80%) saturate(800%) hue-rotate(100deg) brightness(95%) contrast(95%);
  --semantic-filter-state-ko: brightness(0) saturate(100%) invert(22%) sepia(60%) saturate(900%) hue-rotate(340deg) brightness(90%) contrast(95%);
  --semantic-filter-state-warning: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(600%) hue-rotate(20deg) brightness(105%) contrast(95%);
  --semantic-filter-white: brightness(0) invert(1);
  --semantic-filter-black: brightness(0);
}

:root {
  --component-button-primary-color: var(--semantic-color-primary-text);
  --component-button-primary-bg: transparent;
  --component-button-primary-border: var(--semantic-color-primary);
  --component-button-primary-color-hover: var(--semantic-color-state-hover-primary);
  --component-button-primary-bg-hover: color-mix(in srgb, var(--semantic-color-primary) 10%, transparent);
  --component-button-primary-border-hover: var(--semantic-color-state-hover-primary);
  --component-button-primary-filled-color: var(--semantic-color-text-inverse);
  --component-button-primary-filled-bg: var(--semantic-color-primary);
  --component-button-primary-filled-border: var(--semantic-color-primary);
  --component-button-primary-filled-color-hover: var(--semantic-color-text-inverse);
  --component-button-primary-filled-bg-hover: var(--semantic-color-state-hover-primary);
  --component-button-primary-filled-border-hover: var(--semantic-color-state-hover-primary);
  --component-button-secondary-color: var(--semantic-color-secondary-text);
  --component-button-secondary-bg: transparent;
  --component-button-secondary-border: var(--semantic-color-secondary);
  --component-button-secondary-color-hover: var(--semantic-color-state-hover-secondary);
  --component-button-secondary-bg-hover: color-mix(in srgb, var(--semantic-color-secondary) 10%, transparent);
  --component-button-secondary-border-hover: var(--semantic-color-state-hover-secondary);
  --component-button-secondary-filled-color: var(--semantic-color-text-inverse);
  --component-button-secondary-filled-bg: var(--semantic-color-secondary);
  --component-button-secondary-filled-border: var(--semantic-color-secondary);
  --component-button-secondary-filled-color-hover: var(--semantic-color-text-inverse);
  --component-button-secondary-filled-bg-hover: var(--semantic-color-state-hover-secondary);
  --component-button-secondary-filled-border-hover: var(--semantic-color-state-hover-secondary);
  --component-button-tertiary-color: var(--semantic-color-tertiary-text);
  --component-button-tertiary-bg: transparent;
  --component-button-tertiary-border: var(--semantic-color-tertiary);
  --component-button-tertiary-color-hover: var(--semantic-color-state-hover-tertiary);
  --component-button-tertiary-bg-hover: color-mix(in srgb, var(--semantic-color-tertiary) 10%, transparent);
  --component-button-tertiary-border-hover: var(--semantic-color-state-hover-tertiary);
  --component-button-tertiary-filled-color: var(--semantic-color-text-inverse);
  --component-button-tertiary-filled-bg: var(--semantic-color-tertiary);
  --component-button-tertiary-filled-border: var(--semantic-color-tertiary);
  --component-button-tertiary-filled-color-hover: var(--semantic-color-text-inverse);
  --component-button-tertiary-filled-bg-hover: var(--semantic-color-state-hover-tertiary);
  --component-button-tertiary-filled-border-hover: var(--semantic-color-state-hover-tertiary);
  --component-button-quaternary-color: var(--semantic-color-quaternary-text);
  --component-button-quaternary-bg: transparent;
  --component-button-quaternary-border: var(--semantic-color-quaternary);
  --component-button-quaternary-color-hover: var(--semantic-color-state-hover-quaternary);
  --component-button-quaternary-bg-hover: color-mix(in srgb, var(--semantic-color-quaternary) 10%, transparent);
  --component-button-quaternary-border-hover: var(--semantic-color-state-hover-quaternary);
  --component-button-quaternary-filled-color: var(--semantic-color-text-inverse);
  --component-button-quaternary-filled-bg: var(--semantic-color-quaternary);
  --component-button-quaternary-filled-border: var(--semantic-color-quaternary);
  --component-button-quaternary-filled-color-hover: var(--semantic-color-text-inverse);
  --component-button-quaternary-filled-bg-hover: var(--semantic-color-state-hover-quaternary);
  --component-button-quaternary-filled-border-hover: var(--semantic-color-state-hover-quaternary);
  --component-button-padding-x: var(--semantic-space-component-lg);
  --component-button-padding-y: var(--semantic-space-component-sm);
  --component-button-gap: var(--semantic-space-inline-sm);
  --component-button-font-family: var(--semantic-font-family-primary-bold);
  --component-button-font-size: var(--semantic-font-size-body);
  --component-button-line-height: var(--semantic-line-height-snug);
  --component-button-border-width: var(--semantic-border-width-default);
  --component-button-border-radius: var(--semantic-border-radius-default);
  --component-button-shadow-focus: var(--semantic-shadow-focus);
  --component-button-size-sm: var(--semantic-space-component-sm);
  --component-button-font-size-sm: var(--semantic-font-size-body-sm);
  --component-button-size-md: var(--semantic-space-component-md);
  --component-button-font-size-md: var(--semantic-font-size-body);
  --component-button-size-lg: var(--semantic-space-component-lg);
  --component-button-font-size-lg: var(--semantic-font-size-h6);
  --component-button-border-radius-circle: var(--semantic-border-radius-circle);
  --component-button-border-style: solid;
  --component-button-shadow: var(--semantic-shadow-none);
  --component-button-shadow-hover: var(--semantic-shadow-none);
  --component-button-shadow-active: var(--semantic-shadow-none);
  --component-button-transition-duration: var(--semantic-duration-base);
  --component-button-transition-easing: var(--semantic-easing-standard);
  --component-button-active-offset-x: 0;
  --component-button-active-offset-y: 1px;
  --component-button-transition-duration-active: 0.1s;
  --component-btn-group-gap: 1rem;
  --component-button-disabled-bg: var(--semantic-color-state-disabled);
  --component-button-disabled-border: var(--semantic-color-state-disabled);
  --component-button-disabled-color: var(--semantic-color-text-disabled);
  --component-button-disabled-filled-color: var(--semantic-color-text-inverse);
}

:root {
  --component-form-field-color: var(--semantic-color-text-primary);
  --component-form-field-bg: var(--semantic-color-bg-primary);
  --component-form-field-border: var(--semantic-color-border-default);
  --component-form-field-border-focus: var(--semantic-color-border-focus);
  --component-form-field-placeholder: var(--semantic-color-placeholder);
  --component-form-field-padding-x: var(--semantic-space-component-sm);
  --component-form-field-padding-y: var(--semantic-space-component-sm);
  --component-form-field-min-height: calc(6 * var(--semantic-space-component-xs));
  --component-form-field-gap: var(--semantic-space-component-sm);
  --component-form-field-margin-bottom: var(--semantic-space-stack-md);
  --component-form-field-icon-size: var(--semantic-space-component-md);
  --component-form-field-icon-position-right: var(--semantic-space-inline-md);
  --component-form-field-msg-margin-top: var(--semantic-space-stack-xs);
  --component-form-field-msg-font-size: var(--semantic-font-size-caption);
  --component-form-field-msg-line-height: var(--semantic-line-height-caption);
  --component-form-field-label-margin-bottom: var(--semantic-space-stack-xs);
  --component-form-field-font-family: var(--semantic-font-family-primary-bold);
  --component-form-field-font-size: var(--semantic-font-size-body);
  --component-form-field-font-size-sm: var(--semantic-font-size-body-small);
  --component-form-field-line-height: var(--semantic-line-height-normal);
  --component-form-field-border-width: var(--semantic-border-width-default);
  --component-form-field-border-radius: var(--semantic-border-radius-default);
  --component-form-field-shadow-focus: var(--semantic-shadow-focus);
  --component-form-field-color-disabled: var(--semantic-color-state-disabled);
  --component-form-field-bg-disabled: var(--semantic-color-bg-tertiary);
  --component-form-field-success-color: var(--semantic-color-state-success);
  --component-form-field-success-border: var(--semantic-color-state-success);
  --component-form-field-error-color: var(--semantic-color-state-error);
  --component-form-field-error-border: var(--semantic-color-state-error);
  --component-form-field-warning-color: var(--semantic-color-state-warning-text, var(--semantic-color-state-warning));
  --component-form-field-warning-border: var(--semantic-color-state-warning);
  --component-form-group-gap: var(--semantic-space-component-sm);
  --component-form-group-margin-bottom: var(--semantic-space-component-sm);
  --component-check-size: var(--semantic-space-component-md);
  --component-check-gap: var(--semantic-space-inline-sm);
  --component-check-line-height: var(--semantic-line-height-normal);
  --component-check-icon-size: var(--semantic-space-component-sm);
  --component-check-border-width: var(--semantic-border-width-default);
  --component-check-border-radius: var(--semantic-border-radius-default);
  --component-check-border-color: var(--semantic-color-border-default);
  --component-check-border-color-hover: var(--semantic-color-primary);
  --component-check-color-checked: var(--semantic-color-primary);
  --component-check-bg-checked: var(--semantic-color-primary);
  --component-check-bg: var(--semantic-color-bg-primary);
  --component-check-shadow-focus: var(--semantic-shadow-focus);
  --component-check-icon-image: var(--lc-icon-check);
  --component-radio-size: var(--semantic-space-component-md);
  --component-radio-gap: var(--semantic-space-inline-sm);
  --component-radio-line-height: var(--semantic-line-height-normal);
  --component-radio-checked-size: var(--semantic-space-component-xs);
  --component-radio-border-width: var(--semantic-border-width-default);
  --component-radio-border-color: var(--semantic-color-border-default);
  --component-radio-border-color-hover: var(--semantic-color-primary);
  --component-radio-color-checked: var(--semantic-color-primary);
  --component-radio-bg-checked: var(--semantic-color-primary);
  --component-radio-bg: var(--semantic-color-bg-primary);
  --component-switch-width: calc(6 * var(--semantic-space-component-xs));
  --component-switch-height: calc(3.5 * var(--semantic-space-component-xs));
  --component-switch-slider-size: calc(2.5 * var(--semantic-space-component-xs));
  --component-switch-slider-bg: var(--semantic-color-bg-primary);
  --component-switch-slider-radius: var(--semantic-border-radius-circle);
  --component-switch-bg-off: var(--semantic-color-bg-tertiary);
  --component-switch-bg-on: var(--semantic-color-state-success);
  --component-switch-border-color: var(--semantic-color-border-default);
  --component-switch-status-disabled-opacity: 0.5;
  --component-switch-status-color-on: var(--semantic-color-state-success);
  --component-switch-status-color-off: var(--semantic-color-state-error);
  --component-switch-icon-on: var(--lc-icon-check);
  --component-switch-icon-off: var(--lc-icon-x);
  --component-switch-status-icon-filter: brightness(0) invert(1);
  --component-form-field-transition-duration: var(--semantic-duration-fast);
  --component-form-field-transition-easing: var(--semantic-easing-standard);
  --component-check-mark-width: 0.3125rem;
  --component-check-mark-height: 0.5625rem;
  --component-check-mark-thickness: var(--primitive-border-width-2);
  --component-check-mark-rotation: 45deg;
  --component-check-transition-duration: var(--semantic-duration-fast);
  --component-check-transition-easing: var(--semantic-easing-out);
  --component-check-status-disabled-opacity: var(--primitive-opacity-50);
  --component-radio-border-radius: var(--semantic-border-radius-circle);
  --component-radio-dot-border-radius: var(--semantic-border-radius-circle);
  --component-radio-transition-duration: var(--semantic-duration-fast);
  --component-radio-transition-easing: var(--semantic-easing-out);
  --component-radio-status-disabled-opacity: var(--primitive-opacity-50);
  --component-switch-border-radius: var(--semantic-border-radius-full);
  --component-switch-slider-shadow: var(--semantic-shadow-sm);
  --component-switch-transition-duration: var(--semantic-duration-base);
  --component-switch-transition-easing: var(--semantic-easing-out);
  --component-form-field-error-shadow-focus: 0 0 0 1px var(--component-form-field-error-border);
  --component-form-field-set-min-width: 12.5rem;
}

:root {
  --component-breadcrumb-gap: var(--semantic-space-inline-md);
  --component-breadcrumb-item-padding-x: var(--semantic-space-inline-sm);
  --component-breadcrumb-icon-margin-right: calc(-2.5 * var(--semantic-space-component-xs));
  --component-breadcrumb-icon-size: var(--semantic-space-component-sm);
  --component-breadcrumb-font-size: var(--semantic-font-size-body-small);
  --component-breadcrumb-color: var(--semantic-color-primary-text);
  --component-breadcrumb-color-hover: var(--semantic-color-link-hover);
  --component-breadcrumb-color-active: var(--semantic-color-text-inverse);
  --component-breadcrumb-bg-active: var(--semantic-color-primary);
  --component-breadcrumb-icon-filter: var(--semantic-filter-primary);
  --component-pagination-gap: var(--semantic-space-inline-sm);
  --component-pagination-item-size: calc(5 * var(--semantic-space-component-xs));
  --component-pagination-icon-size: var(--semantic-space-component-md);
  --component-pagination-font-family: var(--semantic-font-family-primary);
  --component-pagination-font-size: var(--semantic-font-size-body-small);
  --component-pagination-border-width: var(--semantic-border-width-default);
  --component-pagination-border-radius: var(--semantic-border-radius-default);
  --component-pagination-border-color: transparent;
  --component-pagination-border-color-hover: var(--semantic-color-primary);
  --component-pagination-color: var(--semantic-color-primary-text);
  --component-pagination-color-hover: var(--semantic-color-primary);
  --component-pagination-color-active: var(--semantic-color-text-inverse);
  --component-pagination-bg-active: var(--semantic-color-primary);
  --component-pagination-color-disabled: var(--semantic-color-state-disabled);
  --component-pagination-bg-disabled: var(--semantic-color-state-disabled);
  --component-pagination-shadow-focus: var(--semantic-shadow-focus);
  --component-pagination-icon-prev: var(--lc-icon-chevron-left);
  --component-pagination-icon-next: var(--lc-icon-chevron-right);
  --component-pagination-icon-first: var(--lc-icon-chevrons-left);
  --component-pagination-icon-last: var(--lc-icon-chevrons-right);
}

:root {
  --component-list-ordered-margin-top: 0;
  --component-list-ordered-margin-bottom: 0;
  --component-list-ordered-gap: var(--semantic-space-stack-xl);
  --component-list-ordered-item-margin-top: var(--semantic-space-stack-lg);
  --component-list-ordered-counter-size: var(--semantic-space-component-lg);
  --component-list-ordered-counter-font-size: var(--semantic-font-size-body-sm);
  --component-list-ordered-counter-line-height: var(--semantic-space-component-lg);
  --component-list-lvl1-gap: var(--semantic-space-stack-md);
  --component-list-item-margin-top: var(--semantic-space-stack-sm);
  --component-list-icon-size: var(--semantic-space-component-sm);
  --component-list-lvl2-margin-left: var(--semantic-space-component-sm);
  --component-list-lvl2-gap: var(--semantic-space-stack-xl);
  --component-list-lvl3-margin-left: var(--semantic-space-component-sm);
  --component-list-lvl3-gap: var(--semantic-space-stack-xl);
}

:root {
  --component-table-th-font-size: var(--semantic-font-size-body);
  --component-table-th-line-height: var(--semantic-space-component-lg);
  --component-table-th-font-family: var(--semantic-font-family-primary-bold);
  --component-table-cell-padding-x: var(--semantic-space-component-sm);
  --component-table-cell-padding-y: var(--semantic-space-component-xs);
  --component-table-bg-th: var(--semantic-color-primary);
  --component-table-color-th: var(--semantic-color-text-inverse);
  --component-table-bg-tfoot: var(--semantic-color-bg-tertiary);
  --component-table-border-width: var(--semantic-border-width-default);
  --component-table-border-color: var(--semantic-color-border-subtle);
  --component-table-state-hover-bg: var(--semantic-color-state-hover-primary);
  --component-table-state-hover-border-color: var(--semantic-color-primary);
  --component-table-state-hover-shadow: var(--semantic-shadow-focus);
  --component-table-sticky-active-bg: var(--semantic-color-primary);
  --component-table-sticky-active-color: var(--semantic-color-text-inverse);
  --component-table-sticky-max-height: 450px;
  --component-table-min-width: 44rem;
  --component-table-scroll-mask: var(--semantic-color-bg-primary);
  --component-table-scroll-hint: color-mix(in srgb, var(--semantic-color-text-primary) 14%, transparent);
}

:root {
  --component-title-h1: var(--semantic-font-size-h1);
  --component-title-h2: var(--semantic-font-size-h2);
  --component-title-h3: var(--semantic-font-size-h3);
  --component-title-h4: var(--semantic-font-size-h4);
  --component-title-h5: var(--semantic-font-size-h5);
  --component-title-h6: var(--semantic-font-size-h6);
  --component-title-font-family: var(--semantic-font-family-heading);
  --component-title-line-height: var(--semantic-line-height-heading);
  --component-title-color: var(--semantic-color-text-primary);
  --component-title-margin-bottom: var(--semantic-space-stack-sm);
}

:root {
  --component-link-color: var(--semantic-color-link-default);
  --component-link-color-hover: var(--semantic-color-link-hover);
  --component-link-color-active: var(--semantic-color-link-active);
  --component-link-color-visited: var(--semantic-color-link-visited);
  --component-link-decoration-thickness: var(--semantic-border-width-thin);
  --component-link-decoration-color: var(--semantic-color-primary);
  --component-link-primary-color: var(--semantic-color-primary-text);
  --component-link-primary-color-hover: var(--semantic-color-text-inverse);
  --component-link-primary-bg-hover: var(--semantic-color-primary);
  --component-link-primary-shadow-focus: var(--semantic-shadow-focus);
}

:root {
  --component-label-padding-sm: var(--semantic-space-component-xs);
  --component-label-padding-md: var(--semantic-space-component-sm);
  --component-label-padding-lg: var(--semantic-space-component-md);
  --component-label-border-radius: var(--semantic-border-radius-default);
  --component-label-font-size: var(--semantic-font-size-body-small);
  --component-label-line-height: var(--semantic-line-height-normal);
  --component-label-group-gap: 0.5rem;
  --component-evidence-padding: 0.1em 0.5em;
}

:root {
  --component-header-height: calc(3.5 * var(--semantic-space-component-xs));
  --component-header-padding-y: var(--semantic-space-component-md);
  --component-header-z-index: 5;
  --component-header-control-height: 2.75rem;
  --component-header-control-radius: var(--component-button-border-radius);
  --component-header-control-border-width: var(--component-button-border-width);
  --component-header-bg: transparent;
  --component-header-bg-scrolled: var(--semantic-color-bg-primary);
  --component-sidenav-width: calc(15 * var(--semantic-space-component-xs));
  --component-sidenav-z-index: 500;
  --component-sidenav-bg: var(--semantic-color-bg-primary);
  --component-sidenav-shadow: 0.625rem 0 0.313rem -0.188rem var(--semantic-color-primary);
  --component-header-logo-icon: var(--icon-logo);
  --component-header-logo-color: var(--semantic-color-primary-text);
  --component-header-logo-color-hover: var(--semantic-color-secondary);
  --component-header-logo-padding-left: calc(3.2 * var(--semantic-space-component-xs));
  --component-header-logo-padding-left-md: var(--semantic-space-component-lg);
  --component-header-logo-icon-size: calc(2.5 * var(--semantic-space-component-xs));
  --component-header-logo-icon-size-md: calc(3.25 * var(--semantic-space-component-xs));
  --component-sidenav-link-padding-y: calc(1.4 * var(--semantic-space-component-xs));
  --component-sidenav-link-padding-x: var(--semantic-space-component-md);
  --component-sidenav-link-font-weight: var(--semantic-font-weight-bold);
  --component-sidenav-link-arrow-size: calc(2.6 * var(--semantic-space-component-xs));
  --component-header-social-gap: var(--semantic-space-inline-xs);
  --component-header-social-icon-size: var(--semantic-space-component-xl);
}

:root {
  --component-icon-size-sm: 1rem;
  --component-icon-size-md: 1.5rem;
  --component-icon-size-lg: 2rem;
  --component-icon-size-xl: 2.5rem;
  --component-icon-color: currentColor;
  --component-icon-source: none;
}

:root {
  --component-feature-card-bg: var(--semantic-color-bg-primary);
  --component-feature-card-border-width: var(--semantic-border-width-thin);
  --component-feature-card-border-style: solid;
  --component-feature-card-border-color: var(--semantic-color-border-subtle);
  --component-feature-card-border-radius: var(--semantic-border-radius-lg);
  --component-feature-card-shadow: var(--semantic-shadow-none);
  --component-feature-card-border-color-hover: var(--semantic-color-primary);
  --component-feature-card-shadow-hover: 0 8px 24px color-mix(in srgb, var(--semantic-color-primary) 10%, transparent);
  --component-feature-card-hover-lift: -2px;
  --component-feature-card-row-span: 3;
  --component-theme-card-bg: var(--semantic-color-bg-primary);
  --component-theme-card-border-width: var(--semantic-border-width-thin);
  --component-theme-card-border-style: solid;
  --component-theme-card-border-color: var(--semantic-color-border-subtle);
  --component-theme-card-border-radius: var(--semantic-border-radius-lg);
  --component-theme-card-shadow: var(--semantic-shadow-none);
  --component-theme-card-border-color-active: var(--semantic-color-primary);
  --component-theme-card-shadow-hover: 0 8px 24px color-mix(in srgb, var(--semantic-color-primary) 14%, transparent);
  --component-theme-card-hover-lift: -3px;
  --component-theme-card-swatch-height: 4.5rem;
  --component-theme-card-swatch-border-radius: var(--semantic-border-radius-none);
  --component-theme-card-check-bg: oklch(1 0 0);
  --component-theme-card-check-border-radius: var(--semantic-border-radius-circle);
  --component-theme-card-dot-border-radius: var(--semantic-border-radius-circle);
  --component-theme-card-dot-border-width: var(--semantic-border-width-thin);
  --component-theme-card-dot-border-color: var(--semantic-color-border-subtle);
  --component-theme-card-swatch-angle: 135deg;
  --component-code-snippet-border-width: var(--semantic-border-width-thin);
  --component-code-snippet-border-style: solid;
  --component-code-snippet-border-color: var(--semantic-color-border-subtle);
  --component-code-snippet-border-radius: var(--semantic-border-radius-lg);
  --component-code-snippet-shadow: var(--semantic-shadow-none);
  --component-code-snippet-header-bg: var(--semantic-color-bg-secondary);
  --component-code-snippet-header-border-width: var(--semantic-border-width-thin);
  --component-theme-card-swatch-01-from: oklch(0.60 0.23 276.966);
  --component-theme-card-swatch-01-to: oklch(0.60 0.165 70.08);
  --component-theme-card-swatch-02-from: oklch(0.60 0.247 293.009);
  --component-theme-card-swatch-02-to: oklch(0.60 0.241 6.902);
  --component-theme-card-swatch-03-from: oklch(0.60 0.181 22.839);
  --component-theme-card-swatch-03-to: oklch(0.60 0.171 70.604);
  --component-theme-card-swatch-04-from: oklch(0.60 0.182 151.711);
  --component-theme-card-swatch-04-to: oklch(0.60 0.136 154.449);
  --component-theme-card-swatch-05-from: oklch(0.60 0.074 256.04);
  --component-theme-card-swatch-05-to: oklch(0.60 0.139 91.059);
  --component-theme-card-swatch-06-from: oklch(0.75 0.15 190);
  --component-theme-card-swatch-06-to: oklch(0.65 0.25 300);
  --component-theme-card-dot-01-a: var(--component-theme-card-swatch-01-from);
  --component-theme-card-dot-01-b: var(--component-theme-card-swatch-01-to);
  --component-theme-card-dot-02-a: var(--component-theme-card-swatch-02-from);
  --component-theme-card-dot-02-b: var(--component-theme-card-swatch-02-to);
  --component-theme-card-dot-03-a: var(--component-theme-card-swatch-03-from);
  --component-theme-card-dot-03-b: var(--component-theme-card-swatch-03-to);
  --component-theme-card-dot-04-a: var(--component-theme-card-swatch-04-from);
  --component-theme-card-dot-04-b: var(--component-theme-card-swatch-04-to);
  --component-theme-card-dot-05-a: var(--component-theme-card-swatch-05-from);
  --component-theme-card-dot-05-b: var(--component-theme-card-swatch-05-to);
  --component-theme-card-dot-06-a: var(--component-theme-card-swatch-06-from);
  --component-theme-card-dot-06-b: var(--component-theme-card-swatch-06-to);
  --component-code-snippet-ok-border-color: var(--semantic-color-state-success);
  --component-code-snippet-ok-header-bg: var(--primitive-color-green-50);
  --component-code-snippet-ok-header-border-color: var(--primitive-color-green-200);
  --component-code-snippet-ok-label-color: var(--primitive-color-green-700);
  --component-code-snippet-ko-border-color: var(--semantic-color-state-error);
  --component-code-snippet-ko-header-bg: var(--primitive-color-red-50);
  --component-code-snippet-ko-header-border-color: var(--primitive-color-red-200);
  --component-code-snippet-ko-label-color: var(--primitive-color-red-700);
  --component-theme-card-swatch-sketch-bg: oklch(1 0 0);
  --component-theme-card-swatch-sketch-image: repeating-linear-gradient(to right, oklch(0.498 0.282 266.24 / 0.16) 0 1px, transparent 1px 12px), repeating-linear-gradient(to bottom, oklch(0.498 0.282 266.24 / 0.16) 0 1px, transparent 1px 12px);
  --component-theme-card-dot-sketch-a: oklch(0.498 0.282 266.24);
  --component-theme-card-dot-sketch-b: oklch(0.753 0.129 173);
  --component-theme-grid-min: 16rem;
}

:root {
  --component-pill-border-radius: var(--semantic-border-radius-full);
  --component-pill-border-width: var(--semantic-border-width-thin);
  --component-pill-border-style: solid;
  --component-pill-line-height: var(--primitive-line-height-tight);
  --component-pill-font-size: var(--semantic-font-size-overline);
  --component-pill-primary-bg: var(--primitive-color-blue-50);
  --component-pill-primary-color: var(--primitive-color-blue-600);
  --component-pill-primary-border-color: var(--primitive-color-blue-200);
  --component-pill-secondary-bg: var(--primitive-color-purple-50);
  --component-pill-secondary-color: var(--primitive-color-purple-600);
  --component-pill-secondary-border-color: var(--primitive-color-purple-200);
  --component-pill-success-bg: var(--primitive-color-green-50);
  --component-pill-success-color: var(--primitive-color-green-600);
  --component-pill-success-border-color: var(--primitive-color-green-200);
  --component-pill-warning-bg: var(--primitive-color-yellow-50);
  --component-pill-warning-color: var(--primitive-color-yellow-700);
  --component-pill-warning-border-color: var(--primitive-color-yellow-200);
  --component-pill-danger-bg: var(--primitive-color-red-50);
  --component-pill-danger-color: var(--primitive-color-red-600);
  --component-pill-danger-border-color: var(--primitive-color-red-200);
  --component-pill-neutral-bg: var(--semantic-color-bg-tertiary);
  --component-pill-neutral-color: var(--semantic-color-text-secondary);
  --component-pill-neutral-border-color: var(--semantic-color-border-subtle);
  --component-pill-dark-bg: var(--primitive-color-gray-900);
  --component-pill-dark-color: oklch(1 0 0);
  --component-pill-dark-border-color: var(--primitive-color-gray-900);
  --component-pill-subtle-bg: transparent;
  --component-pill-subtle-color: var(--semantic-color-text-tertiary);
  --component-pill-subtle-border-color: var(--semantic-color-border-default);
  --component-feature-icon-size: 3rem;
  --component-feature-icon-border-radius: var(--semantic-border-radius-lg);
  --component-feature-icon-border-width: var(--semantic-border-width-none);
  --component-feature-icon-border-style: solid;
  --component-feature-icon-border-color: transparent;
  --component-feature-icon-shadow: var(--semantic-shadow-none);
  --component-feature-icon-atom-bg: var(--primitive-color-blue-50);
  --component-feature-icon-atom-color: var(--primitive-color-blue-600);
  --component-feature-icon-molecule-bg: var(--primitive-color-purple-50);
  --component-feature-icon-molecule-color: var(--primitive-color-purple-600);
  --component-feature-icon-organism-bg: var(--primitive-color-green-50);
  --component-feature-icon-organism-color: var(--primitive-color-green-600);
  --component-feature-icon-token-bg: var(--primitive-color-blue-50);
  --component-feature-icon-token-color: var(--primitive-color-blue-600);
  --component-feature-icon-layer-bg: var(--primitive-color-yellow-50);
  --component-feature-icon-layer-color: var(--primitive-color-yellow-700);
  --component-feature-icon-mixin-bg: var(--primitive-color-red-50);
  --component-feature-icon-mixin-color: var(--primitive-color-red-600);
  --component-pill-gap: 0.375rem;
  --component-docs-badge-layout-bg: var(--semantic-color-bg-tertiary);
  --component-docs-badge-layout-color: var(--semantic-color-text-primary);
  --component-docs-badge-layout-border: var(--semantic-color-border-default);
  --component-docs-badge-atom-bg: var(--semantic-color-bg-secondary);
  --component-docs-badge-atom-color: var(--semantic-color-text-primary);
  --component-docs-badge-atom-border: var(--semantic-color-border-default);
  --component-docs-badge-molecule-bg: var(--semantic-color-bg-tertiary);
  --component-docs-badge-molecule-color: var(--semantic-color-text-primary);
  --component-docs-badge-molecule-border: var(--semantic-color-border-strong);
  --component-docs-badge-organism-bg: var(--semantic-color-bg-inverse);
  --component-docs-badge-organism-color: var(--semantic-color-text-inverse);
  --component-docs-badge-organism-border: var(--semantic-color-bg-inverse);
}

:root {
  --component-blockquote-bg: var(--primitive-color-gray-50);
  --component-blockquote-color: var(--primitive-color-gray-600);
  --component-blockquote-border-width: var(--primitive-border-width-4);
  --component-blockquote-border-style: solid;
  --component-blockquote-border-color: var(--semantic-color-primary);
  --component-blockquote-border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
  --component-hr-thickness: var(--primitive-border-width-1);
  --component-hr-color: var(--primitive-color-gray-200);
  --component-hr-style: solid;
  --component-code-inline-bg: var(--primitive-color-gray-100);
  --component-code-inline-color: var(--primitive-color-red-600);
  --component-code-inline-border-radius: 0.25rem;
  --component-code-inline-border-width: var(--semantic-border-width-thin);
  --component-code-inline-border-color: var(--semantic-color-border-subtle);
  --component-code-inline-font-size: 0.9em;
  --component-code-bg: var(--primitive-color-gray-900);
  --component-code-color: var(--primitive-color-gray-100);
  --component-code-border-radius: var(--theme-radius);
  --component-code-border-width: var(--semantic-border-width-thin);
  --component-code-border-color: var(--semantic-color-border-subtle);
  --component-code-font-size: 0.8125rem;
  --component-code-line-height: 1.7;
  --component-table-base-border-width: var(--primitive-border-width-1);
  --component-table-base-border-color: var(--primitive-color-gray-200);
  --component-table-base-th-bg: var(--primitive-color-gray-50);
  --component-table-base-th-color: var(--primitive-color-gray-800);
  --component-table-base-th-border-width: var(--primitive-border-width-2);
  --component-table-base-th-border-color: var(--primitive-color-gray-300);
  --component-table-base-state-hover-bg: var(--primitive-color-gray-50);
  --component-code-syntax-tag: var(--semantic-color-primary);
  --component-code-syntax-attr: var(--semantic-color-secondary);
  --component-code-syntax-val: var(--semantic-color-tertiary);
  --component-code-syntax-comment: var(--semantic-color-text-disabled);
  --component-code-syntax-fn: var(--semantic-color-quaternary);
}

:root {
  --component-section-title-font-size: clamp(1.75rem, 4vw, 2.75rem);
  --component-section-title-weight: var(--semantic-font-weight-black);
  --component-section-title-tracking: -0.025em;
  --component-section-title-leading: var(--semantic-line-height-heading);
  --component-section-title-max-width: 30ch;
  --component-section-divider-width: var(--semantic-border-width-thin);
  --component-section-divider-color: var(--semantic-color-border-subtle);
  --component-section-bg: transparent;
  --component-section-bg-image: none;
  --component-section-padding-inline: var(--semantic-space-layout-md);
  --component-section-padding-block: var(--semantic-space-layout-xl);
  --component-section-align: center;
  --component-section-justify: center;
  --component-section-header-margin-inline: auto;
  --component-section-header-max-width: none;
  --component-section-rule-width: 0;
  --component-section-rule-color: var(--semantic-color-border-strong);
  --component-section-rule-spacing: 0;
  --component-section-index-content: none;
  --component-section-index-font: var(--semantic-font-family-mono);
  --component-section-index-size: var(--semantic-font-size-overline);
  --component-section-index-color: var(--semantic-color-text-tertiary);
  --component-section-index-gap: 0.75rem;
  --component-section-tick-width: 0;
  --component-section-tick-color: var(--semantic-color-border-default);
  --component-section-tick-height: 0.5rem;
  --component-section-overline-bg: initial;
  --component-section-overline-border-width: initial;
  --component-section-overline-padding: initial;
  --component-section-overline-color: initial;
  --component-hero-text-align: center;
  --component-hero-justify: center;
  --component-hero-content-margin: 0 auto;
  --component-hero-content-inline: auto;
  --component-hero-padding-block-start: calc(var(--semantic-space-layout-xl) * 1.5);
  --component-hero-scroll-hint-align: center;
  --component-grid-gutter: var(--semantic-space-component-md);
  --component-token-layer-badge-width: 10rem;
  --component-hero-columns: 1fr;
  --component-hero-column-gap: 0;
  --component-hero-figure: none;
  --component-hero-figure-opacity: 1;
  --component-hero-figure-build-duration: 0.9s;
  --component-hero-figure-size: contain;
  --component-hero-figure-min-height: 0;
  --component-hero-figure-row-span: 20;
  --component-hero-columns-wide: var(--component-hero-columns);
  --component-hero-column-gap-wide: var(--component-hero-column-gap);
  --component-hero-figure-display-wide: none;
  --component-hero-backdrop: radial-gradient( ellipse at 50% 0%, color-mix(in srgb, var(--semantic-color-primary) 18%, transparent) 0%, transparent 70% );
  --component-hero-backdrop-width: min(900px, 120vw);
  --component-hero-backdrop-height: min(600px, 80vw);
  --component-hero-backdrop-top: 0;
  --component-hero-backdrop-left: 50%;
  --component-hero-backdrop-translate: translateX(-50%);
  --component-hero-headline-font-size: clamp(2.5rem, 7vw, 5rem);
  --component-hero-headline-weight: var(--semantic-font-weight-black);
  --component-hero-headline-leading: 1.05;
  --component-hero-headline-tracking: -0.03em;
  --component-hero-headline-max-width: 18ch;
  --component-hero-accent-bg: linear-gradient( 135deg, var(--semantic-color-primary) 0%, var(--semantic-color-secondary) 100% );
  --component-hero-accent-fill: transparent;
  --component-hero-accent-color: inherit;
  --component-hero-accent-decoration-line: none;
  --component-hero-accent-decoration-color: currentColor;
  --component-hero-accent-decoration-thickness: auto;
  --component-hero-accent-decoration-offset: auto;
  --component-hero-sub-font-size: clamp(1rem, 2.5vw, 1.25rem);
  --component-hero-sub-max-width: 52ch;
  --component-hero-stats-border-width: var(--semantic-border-width-thin);
  --component-hero-stats-border-color: var(--semantic-color-border-subtle);
  --component-cta-bg: linear-gradient( 135deg, var(--semantic-color-primary) 0%, var(--semantic-color-secondary) 100% );
  --component-cta-color: var(--semantic-color-text-inverse);
  --component-cta-overline-color: color-mix(in srgb, var(--semantic-color-text-inverse) 75%, transparent);
  --component-cta-sub-color: color-mix(in srgb, var(--semantic-color-text-inverse) 80%, transparent);
  --component-cta-headline-font-size: clamp(1.75rem, 4vw, 3rem);
  --component-cta-decor-bg: color-mix(in srgb, var(--semantic-color-text-inverse) 8%, transparent);
  --component-cta-decor-size: 20rem;
  --component-cta-decor-radius: var(--semantic-border-radius-circle);
  --component-cta-decor-top: -4rem;
  --component-cta-decor-right: -4rem;
  --component-cta-code-bg: color-mix(in srgb, oklch(0 0 0) 20%, transparent);
  --component-cta-code-border-width: var(--semantic-border-width-thin);
  --component-cta-code-border-color: color-mix(in srgb, var(--semantic-color-text-inverse) 20%, transparent);
  --component-cta-code-border-radius: 0.5rem;
  --component-cta-code-color: var(--semantic-color-text-inverse);
  --component-cta-shadow-hard-color: var(--semantic-shadow-hard-color);
  --component-cta-border-block-width: 0;
  --component-cta-border-color: var(--semantic-color-border-strong);
  --component-layer-item-bg: var(--semantic-color-bg-primary);
  --component-layer-item-border-width: var(--semantic-border-width-thin);
  --component-layer-item-border-color: var(--semantic-color-border-subtle);
  --component-layer-item-border-radius: 0.5rem;
  --component-layer-item-accent-width: 3px;
  --component-layer-item-gap: 0.375rem;
  --component-layer-item-shadow-hover: -4px 0 0 var(--semantic-color-primary), 0 2px 8px oklch(0 0 0 / 0.08);
  --component-layer-utilities-accent: var(--semantic-color-primary);
  --component-layer-utilities-color: var(--semantic-color-primary-text);
  --component-layer-utilities-bg: color-mix(in srgb, var(--semantic-color-primary) 5%, var(--semantic-color-bg-primary));
  --component-layer-organisms-accent: var(--primitive-color-green-500);
  --component-layer-organisms-color: var(--primitive-color-green-600);
  --component-layer-molecules-accent: var(--primitive-color-purple-400);
  --component-layer-molecules-color: var(--primitive-color-purple-600);
  --component-layer-atoms-accent: var(--primitive-color-blue-400);
  --component-layer-atoms-color: var(--primitive-color-blue-600);
  --component-layer-tokens-accent: var(--primitive-color-yellow-400);
  --component-layer-tokens-color: var(--primitive-color-yellow-700);
  --component-layer-base-accent: var(--primitive-color-gray-400);
  --component-layer-base-color: var(--primitive-color-gray-600);
  --component-layer-reset-accent: var(--primitive-color-gray-300);
  --component-layer-reset-color: var(--primitive-color-gray-500);
  --component-footer-bg: var(--semantic-color-bg-primary);
  --component-footer-border-width: var(--semantic-border-width-thin);
  --component-footer-border-color: var(--semantic-color-border-subtle);
  --component-token-layer-bg: var(--semantic-color-bg-primary);
  --component-token-layer-border-width: 1.5px;
  --component-token-layer-border-color: var(--semantic-color-border-default);
  --component-token-layer-border-radius: var(--theme-radius);
  --component-token-layer-shadow-hover: 0 8px 32px oklch(0 0 0 / 0.1);
  --component-token-layer-hover-lift: -2px;
  --component-token-layer-stripe-width: 4px;
  --component-token-step-radius: var(--semantic-border-radius-full);
  --component-token-step-color: var(--semantic-color-text-inverse);
  --component-token-badge-radius: var(--semantic-border-radius-full);
  --component-token-badge-border-width: var(--semantic-border-width-thin);
  --component-token-primitive-accent: var(--primitive-color-blue-500);
  --component-token-primitive-badge-bg: color-mix(in srgb, var(--component-token-primitive-accent) 12%, transparent);
  --component-token-primitive-badge-color: var(--component-token-primitive-accent);
  --component-token-primitive-badge-border: color-mix(in srgb, var(--component-token-primitive-accent) 25%, transparent);
  --component-token-primitive-step-color: var(--component-token-step-color);
  --component-token-theme-accent: var(--primitive-color-yellow-500);
  --component-token-theme-badge-bg: color-mix(in srgb, var(--component-token-theme-accent) 12%, transparent);
  --component-token-theme-badge-color: var(--primitive-color-yellow-700);
  --component-token-theme-badge-border: color-mix(in srgb, var(--component-token-theme-accent) 25%, transparent);
  --component-token-theme-step-color: var(--semantic-color-text-primary);
  --component-token-semantic-accent: var(--primitive-color-green-500);
  --component-token-semantic-badge-bg: color-mix(in srgb, var(--component-token-semantic-accent) 12%, transparent);
  --component-token-semantic-badge-color: var(--primitive-color-green-600);
  --component-token-semantic-badge-border: color-mix(in srgb, var(--component-token-semantic-accent) 25%, transparent);
  --component-token-semantic-step-color: var(--component-token-step-color);
  --component-token-component-accent: var(--semantic-color-primary);
  --component-token-component-badge-bg: color-mix(in srgb, var(--semantic-color-primary) 10%, transparent);
  --component-token-component-badge-color: var(--semantic-color-primary-text);
  --component-token-component-badge-border: color-mix(in srgb, var(--semantic-color-primary) 20%, transparent);
  --component-token-component-step-color: var(--component-token-step-color);
  --component-token-connector-line: linear-gradient( to bottom, var(--semantic-color-border-default), var(--semantic-color-primary) );
  --component-token-connector-opacity: 0.35;
  --component-token-connector-arrow-color: var(--semantic-color-primary-text);
  --component-token-rule-bg: color-mix(in srgb, var(--semantic-color-primary) 6%, transparent);
  --component-token-rule-border-width: 1.5px;
  --component-token-rule-border-color: var(--semantic-color-primary);
  --component-token-rule-border-radius: var(--theme-radius);
  --component-token-rule-icon-bg: var(--semantic-color-primary);
  --component-token-rule-icon-color: var(--semantic-color-text-inverse);
  --component-token-rule-icon-radius: var(--semantic-border-radius-circle);
  --component-score-size: 2rem;
  --component-ranking-max-offset: 0.35em;
  --component-ranking-medal-icon-size: 1.75rem;
  --component-ranking-medal-size: 3.5rem;
  --component-ranking-columns: 2.5ch minmax(11ch, 14ch) 1fr auto;
  --component-score-1-bg: var(--semantic-color-bg-primary);
  --component-score-1-color: var(--semantic-color-text-tertiary);
  --component-score-1-border: var(--semantic-color-border-default);
  --component-score-2-bg: var(--primitive-color-blue-100);
  --component-score-2-color: var(--semantic-color-text-primary);
  --component-score-2-border: var(--primitive-color-blue-200);
  --component-score-3-bg: var(--primitive-color-blue-200);
  --component-score-3-color: var(--semantic-color-text-primary);
  --component-score-3-border: var(--primitive-color-blue-300);
  --component-score-4-bg: var(--primitive-color-blue-400);
  --component-score-4-color: oklch(1 0 0);
  --component-score-4-border: var(--primitive-color-blue-400);
  --component-score-5-bg: var(--primitive-color-blue-600);
  --component-score-5-color: oklch(1 0 0);
  --component-score-5-border: var(--primitive-color-blue-600);
}

:root {
  --semantic-color-bg-primary: var(--primitive-color-white);
  --semantic-color-bg-secondary: var(--primitive-color-gray-50);
  --semantic-color-bg-tertiary: var(--primitive-color-gray-100);
  --semantic-color-border-default: var(--primitive-color-gray-300);
  --semantic-color-border-subtle: var(--primitive-color-gray-200);
  --semantic-color-border-strong: var(--primitive-color-gray-400);
  --semantic-color-text-primary: var(--primitive-color-gray-900);
  --semantic-color-text-secondary: var(--primitive-color-gray-600);
  --semantic-color-text-tertiary: var(--primitive-color-gray-400);
  --semantic-color-text-inverse: var(--primitive-color-white);
  --semantic-color-text-on-primary: var(--primitive-color-white);
  --reset-html-font: normal normal 500 16px/18px var(--semantic-font-family-primary);
  --reset-body-color: var(--semantic-color-text-primary);
  --reset-body-background-color: var(--semantic-color-bg-secondary);
  --reset-body-font-size: var(--semantic-font-size-body);
  --reset-body-line-height: calc(3 * var(--primitive-space-base));
  --reset-selection-color: var(--semantic-color-selection-text);
  --reset-selection-bg: var(--semantic-color-selection-bg);
  --reset-h-font-family: var(--semantic-font-family-heading);
  --reset-h1-size: var(--semantic-font-size-h1);
  --reset-h1-line-height: var(--semantic-line-height-tight);
  --reset-h1-letter-spacing: var(--semantic-letter-spacing-tight);
  --reset-h2-size: var(--semantic-font-size-h2);
  --reset-h2-line-height: var(--semantic-line-height-snug);
  --reset-h2-letter-spacing: var(--semantic-letter-spacing-normal);
  --reset-h3-size: var(--semantic-font-size-h3);
  --reset-h3-line-height: var(--semantic-line-height-snug);
  --reset-h3-letter-spacing: var(--semantic-letter-spacing-normal);
  --reset-h4-size: var(--semantic-font-size-h4);
  --reset-h4-line-height: var(--semantic-line-height-snug);
  --reset-h4-letter-spacing: var(--semantic-letter-spacing-normal);
  --reset-h5-size: var(--semantic-font-size-h5);
  --reset-h5-line-height: var(--semantic-line-height-snug);
  --reset-h5-letter-spacing: var(--semantic-letter-spacing-normal);
  --reset-h6-size: var(--semantic-font-size-h6);
  --reset-h6-line-height: var(--semantic-line-height-snug);
  --reset-h6-letter-spacing: var(--semantic-letter-spacing-normal);
}

:root {
  --base-measure: var(--primitive-space-base);
  --semantic-border-focus: var(--semantic-color-border-focus);
  --font-family-1: var(--semantic-font-family-primary);
  --font-family-2: var(--semantic-font-family-primary-bold);
  --font-weight-1: var(--font-family-1);
  --font-weight-2: var(--font-family-2);
  --font-bold: var(--semantic-font-family-primary-bold);
  --layout-max-width: inherit;
  --layout-gap-1: var(--primitive-space-1);
  --layout-gap-2: var(--primitive-space-2);
  --layout-gap-3: var(--primitive-space-3);
  --layout-gap-4: var(--primitive-space-4);
  --layout-gap-5: var(--primitive-space-6);
  --layout-pad-1: var(--primitive-space-1);
  --layout-pad-2: var(--primitive-space-2);
  --layout-pad-3: var(--primitive-space-3);
  --layout-pad-4: var(--primitive-space-4);
  --layout-pad-5: var(--primitive-space-6);
  --layout-pad-6: var(--primitive-space-8);
  --gap-1: var(--primitive-space-1);
  --inner-1: var(--primitive-space-1);
  --font-size-1: var(--semantic-font-size-body);
  --font-size-2: var(--semantic-font-size-h5);
  --font-size-3: var(--semantic-font-size-h4);
  --font-size-4: var(--semantic-font-size-h3);
  --font-size-5: var(--semantic-font-size-h2);
  --dimension-1: var(--primitive-size-1);
  --dimension-2: var(--primitive-size-2);
  --dimension-3: var(--primitive-size-3);
  --dimension-4: var(--primitive-size-4);
  --dimension-5: var(--primitive-size-5);
  --scope-1: var(--font-size-1);
  --scope-2: var(--font-size-2);
  --scope-3: var(--font-size-3);
  --scope-4: var(--font-size-4);
  --scope-5: var(--font-size-5);
  --theme-focus: var(--semantic-shadow-focus);
  --theme-radius: var(--semantic-border-radius-default);
  --theme-w-border: calc(.4 * var(--primitive-space-base));
  --btn-primary-font-color: var(--semantic-color-primary);
  --btn-primary-filled-font-color: var(--component-button-primary-filled-color);
  --btn-secondary-font-color: var(--semantic-color-secondary);
  --btn-secondary-filled-font-color: var(--component-button-secondary-filled-color);
  --btn-tertiary-font-color: var(--semantic-color-tertiary);
  --btn-tertiary-filled-font-color: var(--component-button-tertiary-filled-color);
  --btn-quaternary-font-color: var(--semantic-color-quaternary);
  --btn-quaternary-filled-font-color: var(--component-button-quaternary-filled-color);
  --breadcrumb-gap: var(--component-breadcrumb-gap);
  --breadcrumb-item-highlighted-p-x: var(--component-breadcrumb-item-padding-x);
  --breadcrumb-item-icon-margin-r: var(--component-breadcrumb-icon-margin-right);
  --breadcrumb-item-icon-size: var(--component-breadcrumb-icon-size);
  --pagination-gap: var(--component-pagination-gap);
  --pagination-item-size: var(--component-pagination-item-size);
  --pagination-icon-size: var(--component-pagination-icon-size);
  --check-gap: var(--component-check-gap);
  --check-line-height: var(--component-check-line-height);
  --check-uncheck-size: var(--component-check-size);
  --check-checked-icon-size: var(--component-check-size);
  --form-font-family: var(--component-form-field-font-family);
  --form-font-size: var(--component-form-field-font-size);
  --form-line-height: var(--component-form-field-line-height);
  --form-inner-field: var(--component-form-field-padding-x);
  --form-height-size: var(--component-form-field-min-height);
  --radio-gap: var(--component-radio-gap);
  --radio-line-height: var(--component-radio-line-height);
  --radio-uncheck-size: var(--component-radio-size);
  --radio-checked-size: var(--component-radio-checked-size);
  --switch-w-size: var(--component-switch-width);
  --switch-h-size: var(--component-switch-height);
  --switch-slider-w-size: var(--component-switch-slider-size);
  --switch-slider-h-size: var(--component-switch-slider-size);
  --switch-slider-background-color: var(--component-switch-slider-bg);
  --switch-slider-radius: var(--component-switch-slider-radius);
  --switch-status-disabled: var(--component-switch-status-disabled-opacity);
  --cont-group-form-field-m-b: var(--component-form-group-margin-bottom);
  --cont-group-form-field-icon-p-r: var(--semantic-space-component-xs);
  --cont-group-form-field-icon-size: var(--semantic-size-icon-sm, var(--primitive-size-1));
  --list-ordered-m-t: var(--component-list-ordered-margin-top);
  --list-ordered-m-b: var(--component-list-ordered-margin-bottom);
  --list-ordered-gap: var(--component-list-ordered-gap);
  --list-ordered-item-m-t: var(--component-list-ordered-item-margin-top);
  --list-ordered-counter-size: var(--component-list-ordered-counter-size);
  --list-ordered-counter-font-size: var(--component-list-ordered-counter-font-size);
  --list-ordered-counter-line-height: var(--component-list-ordered-counter-line-height);
  --list-lvl1-gap: var(--component-list-lvl1-gap);
  --list-item-m-t: var(--component-list-item-margin-top);
  --list-icon-size: var(--component-list-icon-size);
  --list-lvl2-m-l: var(--component-list-lvl2-margin-left);
  --list-lvl2-gap: var(--component-list-lvl2-gap);
  --list-lvl3-m-l: var(--component-list-lvl3-margin-left);
  --list-lvl3-gap: var(--component-list-lvl3-gap);
  --table-th-font-size: var(--component-table-th-font-size);
  --table-th-line-height: var(--component-table-th-line-height);
  --txt-m-b: var(--semantic-space-stack-sm);
}

@layer syx.reset, syx.base, syx.tokens, syx.atoms, syx.molecules, syx.organisms, syx.utilities;
:root {
  --icon-rrss-facebook: url('data:image/svg+xml;utf-8,<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.06662 18V9.80075H8.83078L9.24459 6.59145H6.06662V4.54737C6.06662 3.62042 6.32402 2.98875 7.65332 2.98875L9.33803 2.98798V0.126074C9.04489 0.0871274 8.03918 0 6.86907 0C4.42621 0 2.75379 1.49119 2.75379 4.22969V6.59145H0V9.80075H2.75379V18H6.06662Z" fill="black"/></svg>');
  --icon-rrss-github: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.24658C9.6255 2.24668 7.32849 3.0917 5.51999 4.63043C3.71149 6.16916 2.50953 8.3012 2.12916 10.6451C1.74879 12.9889 2.21485 15.3917 3.44393 17.4233C4.67301 19.455 6.58491 20.9831 8.83755 21.7341C9.33755 21.8216 9.52505 21.5216 9.52505 21.2591C9.52505 21.0216 9.51254 20.2341 9.51254 19.3966C7.00003 19.8591 6.35003 18.7841 6.15003 18.2216C5.9281 17.6745 5.5763 17.1897 5.12503 16.8091C4.77503 16.6216 4.27503 16.1591 5.11252 16.1466C5.4323 16.1813 5.73901 16.2926 6.00666 16.471C6.2743 16.6494 6.49499 16.8897 6.65003 17.1716C6.7868 17.4173 6.97071 17.6336 7.19122 17.8081C7.41173 17.9826 7.6645 18.1118 7.93506 18.1885C8.20562 18.2651 8.48864 18.2876 8.76791 18.2547C9.04717 18.2218 9.3172 18.134 9.56251 17.9966C9.6058 17.4882 9.83237 17.0129 10.2 16.6591C7.97503 16.4091 5.65003 15.5466 5.65003 11.7216C5.63597 10.7278 6.00271 9.76619 6.67503 9.03411C6.36931 8.17033 6.40508 7.2224 6.77503 6.38411C6.77503 6.38411 7.6125 6.1216 9.52503 7.40911C11.1613 6.95909 12.8887 6.95909 14.525 7.40911C16.4375 6.10911 17.275 6.38411 17.275 6.38411C17.645 7.22238 17.6808 8.17034 17.375 9.03411C18.0494 9.76494 18.4164 10.7273 18.4 11.7216C18.4 15.5591 16.0625 16.4091 13.8375 16.6591C14.0762 16.901 14.26 17.1914 14.3764 17.5106C14.4929 17.8298 14.5393 18.1704 14.5125 18.5091C14.5125 19.8466 14.5 20.9216 14.5 21.2591C14.5 21.5216 14.6875 21.8341 15.1875 21.7341C17.4362 20.977 19.3426 19.4453 20.5664 17.4126C21.7903 15.3799 22.2519 12.9784 21.8689 10.6368C21.4859 8.29523 20.2832 6.16595 18.4755 4.62909C16.6678 3.09223 14.3727 2.24782 12 2.24658Z" fill="black"/></svg>');
  --icon-rrss-instagram: url('data:image/svg+xml;utf-8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99998 1.80184C12.6701 1.80184 12.9864 1.812 14.0408 1.86011C15.0158 1.90461 15.5453 2.06752 15.8977 2.20443C16.3644 2.38583 16.6976 2.60257 17.0475 2.95248C17.3974 3.30239 17.6142 3.63555 17.7955 4.10229C17.9325 4.4547 18.0954 4.98419 18.1399 5.95914C18.188 7.01364 18.1982 7.32989 18.1982 10C18.1982 12.6701 18.188 12.9864 18.1399 14.0409C18.0954 15.0158 17.9325 15.5453 17.7955 15.8978C17.6142 16.3645 17.3974 16.6976 17.0475 17.0476C16.6976 17.3975 16.3644 17.6142 15.8977 17.7956C15.5453 17.9325 15.0158 18.0954 14.0408 18.1399C12.9865 18.188 12.6703 18.1982 9.99998 18.1982C7.32969 18.1982 7.01344 18.188 5.95914 18.1399C4.98415 18.0954 4.45466 17.9325 4.10229 17.7956C3.63551 17.6142 3.30235 17.3975 2.95244 17.0476C2.60253 16.6976 2.38579 16.3645 2.20443 15.8978C2.06748 15.5453 1.90457 15.0158 1.86007 14.0409C1.81196 12.9864 1.8018 12.6701 1.8018 10C1.8018 7.32989 1.81196 7.01364 1.86007 5.95918C1.90457 4.98419 2.06748 4.4547 2.20443 4.10229C2.38579 3.63555 2.60253 3.30239 2.95244 2.95248C3.30235 2.60257 3.63551 2.38583 4.10229 2.20443C4.45466 2.06752 4.98415 1.90461 5.9591 1.86011C7.0136 1.812 7.32985 1.80184 9.99998 1.80184ZM9.99998 0C7.28412 0 6.94362 0.0115116 5.87701 0.0601777C4.81259 0.108764 4.08569 0.277786 3.44958 0.525007C2.79199 0.780564 2.23432 1.1225 1.67839 1.67843C1.12246 2.23436 0.780524 2.79203 0.524967 3.44962C0.277746 4.08573 0.108725 4.81263 0.060138 5.87705C0.0114719 6.94362 0 7.28416 0 10C0 12.7159 0.0114719 13.0564 0.060138 14.123C0.108725 15.1874 0.277746 15.9143 0.524967 16.5504C0.780524 17.208 1.12246 17.7657 1.67839 18.3216C2.23432 18.8775 2.79199 19.2195 3.44958 19.475C4.08569 19.7223 4.81259 19.8913 5.87701 19.9399C6.94362 19.9885 7.28412 20 9.99998 20C12.7158 20 13.0564 19.9885 14.1229 19.9399C15.1874 19.8913 15.9143 19.7223 16.5504 19.475C17.208 19.2195 17.7656 18.8775 18.3216 18.3216C18.8775 17.7657 19.2194 17.208 19.475 16.5504C19.7222 15.9143 19.8912 15.1874 19.9398 14.123C19.9885 13.0564 20 12.7159 20 10C20 7.28416 19.9885 6.94362 19.9398 5.87705C19.8912 4.81263 19.7222 4.08573 19.475 3.44962C19.2194 2.79203 18.8775 2.23436 18.3216 1.67843C17.7656 1.1225 17.208 0.780564 16.5504 0.525007C15.9143 0.277786 15.1874 0.108764 14.1229 0.0601777C13.0564 0.0115116 12.7158 0 9.99998 0ZM9.99998 4.86487C7.16393 4.86487 4.86483 7.16397 4.86483 10C4.86483 12.8361 7.16393 15.1352 9.99998 15.1352C12.836 15.1352 15.1351 12.8361 15.1351 10C15.1351 7.16397 12.836 4.86487 9.99998 4.86487ZM9.99998 13.3334C8.15904 13.3334 6.66663 11.841 6.66663 10C6.66663 8.15908 8.15904 6.66667 9.99998 6.66667C11.8409 6.66667 13.3333 8.15908 13.3333 10C13.3333 11.841 11.8409 13.3334 9.99998 13.3334ZM16.538 4.66199C16.538 5.32474 16.0008 5.86201 15.338 5.86201C14.6753 5.86201 14.138 5.32474 14.138 4.66199C14.138 3.99924 14.6753 3.462 15.338 3.462C16.0008 3.462 16.538 3.99924 16.538 4.66199Z" fill="black"/></svg>');
  --icon-rrss-linkedin: url('data:image/svg+xml;utf-8,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.95238 0C2.67915 0 0 2.67915 0 5.95238V44.0476C0 47.3209 2.67915 50 5.95238 50H44.0476C47.3209 50 50 47.3209 50 44.0476V5.95238C50 2.67915 47.3209 0 44.0476 0H5.95238ZM5.95238 2.38095H44.0476C46.0339 2.38095 47.619 3.96609 47.619 5.95238V44.0476C47.619 46.0339 46.0339 47.619 44.0476 47.619H5.95238C3.96609 47.619 2.38095 46.0339 2.38095 44.0476V5.95238C2.38095 3.96609 3.96609 2.38095 5.95238 2.38095ZM11.9048 8.34728C10.6009 8.34728 9.42764 8.737 8.55887 9.46801C7.6901 10.199 7.15681 11.2911 7.15681 12.4605C7.15681 14.6833 9.08486 16.4162 11.5374 16.5876L11.542 16.5899C11.6589 16.6298 11.7813 16.651 11.9048 16.6527C14.6107 16.6527 16.6527 14.7572 16.6527 12.4605C16.6525 12.4395 16.6517 12.4186 16.6504 12.3977C16.5293 10.1355 14.5124 8.34728 11.9048 8.34728ZM11.9048 10.7003C13.5622 10.7003 14.2166 11.4405 14.288 12.4907C14.2736 13.51 13.643 14.2997 11.9048 14.2997C10.2555 14.2997 9.50986 13.455 9.50986 12.4605C9.50986 11.9632 9.69131 11.5884 10.0725 11.2677C10.4538 10.9469 11.0657 10.7003 11.9048 10.7003ZM8.33333 17.8571C8.01761 17.8572 7.71483 17.9826 7.49157 18.2059C7.26832 18.4291 7.14289 18.7319 7.14286 19.0476V41.6667C7.14289 41.9824 7.26832 42.2852 7.49157 42.5084C7.71483 42.7317 8.01761 42.8571 8.33333 42.8571H15.4762C15.7919 42.8571 16.0947 42.7317 16.3179 42.5084C16.5412 42.2852 16.6666 41.9824 16.6667 41.6667V34.6842V19.0476C16.6666 18.7319 16.5412 18.4291 16.3179 18.2059C16.0947 17.9826 15.7919 17.8572 15.4762 17.8571H8.33333ZM19.0476 17.8571C18.7319 17.8572 18.4291 17.9826 18.2059 18.2059C17.9826 18.4291 17.8572 18.7319 17.8571 19.0476V41.6667C17.8572 41.9824 17.9826 42.2852 18.2059 42.5084C18.4291 42.7317 18.7319 42.8571 19.0476 42.8571H26.1905C26.5062 42.8571 26.809 42.7317 27.0322 42.5084C27.2555 42.2852 27.3809 41.9824 27.381 41.6667V29.7619C27.381 28.7742 27.6505 27.7917 28.125 27.1484C28.5995 26.5052 29.1982 26.1191 30.3362 26.1393C31.5097 26.1595 32.131 26.5615 32.6009 27.1926C33.0709 27.8237 33.3333 28.7698 33.3333 29.7619V41.6667C33.3334 41.9824 33.4588 42.2852 33.6821 42.5084C33.9053 42.7317 34.2081 42.8571 34.5238 42.8571H41.6667C41.9824 42.8571 42.2852 42.7317 42.5084 42.5084C42.7317 42.2852 42.8571 41.9824 42.8571 41.6667V28.883C42.8571 25.3574 41.8128 22.5647 40.0228 20.6752C38.2327 18.7858 35.7431 17.8571 33.1101 17.8571C30.6077 17.8571 28.7034 18.6963 27.381 19.5522V19.0476C27.3809 18.7319 27.2555 18.4291 27.0322 18.2059C26.809 17.9826 26.5062 17.8572 26.1905 17.8571H19.0476ZM9.52381 20.2381H14.2857V34.6842V40.4762H9.52381V20.2381ZM20.2381 20.2381H25V22.0959C25.0001 22.3455 25.0786 22.5888 25.2245 22.7914C25.3704 22.9939 25.5763 23.1455 25.813 23.2247C26.0497 23.3038 26.3054 23.3066 26.5438 23.2325C26.7821 23.1585 26.9912 23.0114 27.1415 22.812C27.1415 22.812 29.0109 20.2381 33.1101 20.2381C35.1974 20.2381 36.9873 20.9316 38.2952 22.3121C39.6031 23.6926 40.4762 25.8194 40.4762 28.883V40.4762H35.7143V29.7619C35.7143 28.373 35.3815 26.937 34.5122 25.7696C33.6429 24.6022 32.1808 23.7894 30.3781 23.7584C28.5661 23.7262 27.0804 24.5559 26.2091 25.7371C25.3378 26.9182 25 28.3687 25 29.7619V40.4762H20.2381V20.2381Z" fill="black"/></svg>');
  --icon-rrss-pinterest: url('data:image/svg+xml;utf-8,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.3 0.4C4.77452 0.4 0.300049 4.87447 0.300049 10.4C0.300049 14.6342 2.92768 18.2529 6.6514 19.7093C6.56131 18.9135 6.48624 17.7123 6.68143 16.8414C6.86161 16.0607 7.8526 11.8715 7.8526 11.8715C7.8526 11.8715 7.5523 11.2709 7.5523 10.385C7.5523 8.98859 8.36311 7.95255 9.3541 7.95255C10.21 7.95255 10.6154 8.5982 10.6154 9.36396C10.6154 10.2198 10.0748 11.5111 9.78954 12.6973C9.5493 13.6883 10.285 14.4991 11.276 14.4991C13.0478 14.4991 14.4142 12.6222 14.4142 9.91952C14.4142 7.53213 12.6874 5.85045 10.24 5.85045C7.40215 5.85045 5.72047 7.98258 5.72047 10.1898C5.72047 11.0456 6.0508 11.9766 6.47122 12.4721C6.5463 12.5772 6.56131 12.6523 6.5463 12.7574C6.47122 13.0727 6.30605 13.7483 6.27602 13.8835C6.23098 14.0637 6.12588 14.1087 5.94569 14.0186C4.69945 13.433 3.91867 11.6162 3.91867 10.1447C3.91867 6.99159 6.21596 4.09369 10.5253 4.09369C13.9937 4.09369 16.6814 6.57117 16.6814 9.85946C16.6814 13.2979 14.5043 16.0757 11.5012 16.0757C10.4952 16.0757 9.53428 15.5502 9.20395 14.9345C9.20395 14.9345 8.70846 16.8414 8.58834 17.3069C8.36311 18.1778 7.7475 19.2589 7.34209 19.9345C8.27302 20.2198 9.26401 20.385 10.3 20.385C15.8256 20.385 20.3 15.9105 20.3 10.385C20.3 4.87447 15.8256 0.4 10.3 0.4Z" fill="black"/></svg>');
  --icon-rrss-snapchat: url('data:image/svg+xml;utf-8,<svg width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.8575 14.3339C16.9903 13.8616 15.7063 10.9334 15.6532 10.8085L15.6473 10.7976C15.482 10.528 15.4446 10.1994 15.5449 9.89932C15.7368 9.44573 16.3754 9.24304 16.7955 9.10923C16.9018 9.07577 17.0002 9.04429 17.0789 9.0128C17.8414 8.71271 17.9969 8.39982 17.9929 8.19123C17.9516 7.92557 17.7548 7.71107 17.4931 7.6481L17.4862 7.64613C17.3731 7.60087 17.252 7.57726 17.13 7.57726C17.0228 7.57529 16.9155 7.59694 16.8172 7.64023C16.519 7.79077 16.1953 7.88129 15.8618 7.90589C15.6699 7.91081 15.482 7.84784 15.3314 7.7278L15.3639 7.19747L15.3678 7.13253C15.5607 5.78554 15.479 4.41296 15.1278 3.09746C14.2826 1.16798 12.3629 -0.0688099 10.2554 -0.0422439L9.85294 -0.0373243C7.74931 -0.0629063 5.83361 1.1729 4.98941 3.10041C4.63815 4.41395 4.5555 5.78553 4.74736 7.13154C4.76114 7.33128 4.77294 7.53003 4.78377 7.72977C4.61748 7.85965 4.40988 7.92262 4.19932 7.90786C3.84609 7.8931 3.49975 7.80159 3.18489 7.64023C3.10815 7.60579 3.02451 7.58907 2.93989 7.59103C2.58371 7.57726 2.25804 7.79176 2.13013 8.12432C2.04846 8.5543 2.66243 8.86718 3.03632 9.01477C3.11602 9.04724 3.21441 9.07774 3.31969 9.1112C3.74179 9.24501 4.37937 9.44671 4.57124 9.90129C4.6716 10.2014 4.63421 10.53 4.46891 10.7996L4.46301 10.8104C4.18653 11.4126 3.82739 11.9724 3.39447 12.4733C2.60831 13.4513 1.49549 14.1125 0.260671 14.3358C0.139648 14.3565 0.0540471 14.4637 0.0609345 14.5857C0.0629024 14.63 0.0737255 14.6743 0.0904522 14.7156C0.267558 15.1269 1.14915 15.4654 2.64373 15.6966C2.78345 15.7182 2.8415 15.9465 2.92415 16.3184C2.95662 16.468 2.99007 16.6235 3.0373 16.7838C3.06977 16.9304 3.20752 17.0288 3.35708 17.0121C3.49975 17.0042 3.64143 16.9846 3.78115 16.9521C4.14914 16.8714 4.52401 16.8291 4.90085 16.8252C5.17143 16.8261 5.44201 16.8488 5.70964 16.893C6.27343 17.0357 6.79786 17.3033 7.24456 17.6772C7.99825 18.3207 8.94478 18.6936 9.93461 18.7369C9.96806 18.7369 10.0015 18.7359 10.035 18.733C10.0753 18.735 10.1304 18.7369 10.1855 18.7369C11.1763 18.6936 12.1229 18.3207 12.8775 17.6772C13.3232 17.3043 13.8467 17.0367 14.4105 16.893C14.6771 16.8488 14.9477 16.8261 15.2183 16.8252C15.5951 16.8271 15.97 16.8665 16.338 16.9442C16.4777 16.9747 16.6204 16.9924 16.763 16.9973H16.7867C16.9264 17.0082 17.0523 16.9147 17.0818 16.7769C17.1251 16.6244 17.1635 16.47 17.196 16.3145C17.2766 15.9436 17.3357 15.7163 17.4764 15.6946C18.97 15.4644 19.8535 15.1249 20.0277 14.7166C20.0454 14.6753 20.0562 14.631 20.0602 14.5867C20.0671 14.4647 19.9805 14.3565 19.8604 14.3368L19.8575 14.3339Z" fill="black"/></svg>');
  --icon-rrss-twitter: url('data:image/svg+xml;utf-8,<svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.919922 0L15.582 21.375L1.23047 38H4.41016L16.9863 23.4219L26.9863 38H39L23.6816 15.6699L37.1992 0H34.0293L22.2754 13.6172L12.9336 0H0.919922ZM4.7168 2H11.8809L35.2031 36H28.0391L4.7168 2Z" fill="black"/></svg>');
  --icon-rrss-whatsapp: url('data:image/svg+xml;utf-8,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.1794 0C4.75336 0 0.358744 4.39462 0.358744 9.82063C0.358744 11.6704 0.87444 13.4081 1.7713 14.8879L0 20.1457L5.43722 18.4081C6.83857 19.1816 8.46413 19.63 10.1794 19.63C15.6054 19.63 20 15.2354 20 9.80942C19.9888 4.39462 15.6054 0 10.1794 0ZM10.1794 17.9821C8.52018 17.9821 6.97309 17.4888 5.68386 16.6256L2.54484 17.6345L3.56502 14.5964C2.58969 13.2511 2.00673 11.5919 2.00673 9.80942C2.00673 5.30269 5.67265 1.63677 10.1794 1.63677C14.6861 1.63677 18.352 5.30269 18.352 9.80942C18.352 14.3161 14.6861 17.9821 10.1794 17.9821ZM14.7758 12.0404C14.5291 11.9058 13.3184 11.2556 13.0942 11.1659C12.87 11.0762 12.7018 11.0314 12.5224 11.2668C12.343 11.5135 11.8498 12.0516 11.6928 12.2197C11.5359 12.3767 11.3901 12.3991 11.1435 12.2646C10.8969 12.13 10.1009 11.8386 9.1704 10.9417C8.46413 10.2578 7.99327 9.41704 7.85874 9.15919C7.72422 8.90135 7.85874 8.76682 7.99327 8.65471C8.10538 8.5426 8.25112 8.37444 8.38565 8.2287C8.52018 8.08296 8.56502 7.98206 8.65471 7.82511C8.74439 7.65695 8.71076 7.51121 8.65471 7.38789C8.59865 7.26457 8.13901 6.00897 7.94843 5.50448C7.75785 5 7.54484 5.06726 7.3991 5.06726C7.25336 5.06726 7.0852 5.03363 6.91704 5.03363C6.74888 5.02242 6.47982 5.07848 6.23318 5.32511C5.99776 5.57175 5.32511 6.1435 5.28027 7.37668C5.23543 8.60987 6.08744 9.83184 6.21076 10.0112C6.33408 10.1794 7.83632 12.8587 10.3475 13.9574C12.8587 15.0561 12.87 14.7197 13.3296 14.6973C13.7892 14.6749 14.8318 14.148 15.0673 13.565C15.3027 12.9933 15.3139 12.4888 15.2578 12.3767C15.1906 12.2534 15.0224 12.1749 14.7758 12.0404Z" fill="black"/></svg>');
  --icon-rrss-youtube: url('data:image/svg+xml;utf-8,<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.00007 10V3.99987L13.196 7.0001L8.00007 10ZM19.5822 2.18597C19.3522 1.32561 18.6746 0.647822 17.814 0.417833C16.2543 0 10 0 10 0C10 0 3.74584 0 2.18613 0.417833C1.32561 0.647822 0.647987 1.32561 0.417997 2.18597C0 3.74584 0 6.99993 0 6.99993C0 6.99993 0 10.2542 0.417997 11.8139C0.647987 12.6743 1.32561 13.3522 2.18613 13.582C3.74584 14 10 14 10 14C10 14 16.2543 14 17.814 13.582C18.6746 13.3522 19.3522 12.6743 19.5822 11.8139C20 10.2542 20 6.99993 20 6.99993C20 6.99993 20 3.74584 19.5822 2.18597Z" fill="black"/></svg>');
  --filter-color-black: invert(0%) sepia(40%) saturate(20%) hue-rotate(356deg) brightness(90%) contrast(104%);
  --filter-color-white: invert(99%) sepia(1%) saturate(4%) hue-rotate(355deg) brightness(103%) contrast(104%);
}

:root {
  --primitive-space-base: 0.25rem;
  --primitive-color-gray-50: oklch(0.975 0.005 258.3);
  --primitive-color-gray-100: oklch(0.940 0.008 262);
  --primitive-color-gray-200: oklch(0.895 0.012 265);
  --primitive-color-gray-300: oklch(0.830 0.015 265);
  --primitive-color-gray-400: oklch(0.730 0.020 265);
  --primitive-color-gray-500: oklch(0.630 0.025 265);
  --primitive-color-gray-600: oklch(0.520 0.030 265);
  --primitive-color-gray-700: oklch(0.409 0.036 265.9);
  --primitive-color-gray-800: oklch(0.300 0.032 262);
  --primitive-color-gray-900: oklch(0.221 0.039 258.3);
  --primitive-color-ink: oklch(0.239 0.014 267);
  --primitive-color-blue-50: oklch(0.950 0.024 270.3);
  --primitive-color-blue-100: oklch(0.910 0.043 268);
  --primitive-color-blue-200: oklch(0.840 0.079 267);
  --primitive-color-blue-300: oklch(0.740 0.133 267);
  --primitive-color-blue-400: oklch(0.620 0.204 266.5);
  --primitive-color-blue-500: oklch(0.498 0.282 266.24);
  --primitive-color-blue-600: oklch(0.440 0.260 266);
  --primitive-color-blue-700: oklch(0.380 0.220 265);
  --primitive-color-blue-800: oklch(0.310 0.160 264);
  --primitive-color-blue-900: oklch(0.250 0.100 262);
  --primitive-color-green-50: oklch(0.965 0.022 174);
  --primitive-color-green-100: oklch(0.930 0.045 174);
  --primitive-color-green-200: oklch(0.880 0.075 173.5);
  --primitive-color-green-300: oklch(0.820 0.105 173);
  --primitive-color-green-400: oklch(0.753 0.129 173);
  --primitive-color-green-500: oklch(0.690 0.134 172);
  --primitive-color-green-600: oklch(0.600 0.119 170);
  --primitive-color-green-700: oklch(0.500 0.102 168);
  --primitive-color-green-800: oklch(0.400 0.084 166);
  --primitive-color-green-900: oklch(0.310 0.065 165);
  --primitive-color-success-500: oklch(0.500 0.102 168);
  --primitive-color-error-500: oklch(0.520 0.215 27.5);
  --primitive-color-warning-500: oklch(0.660 0.150 72);
  --primitive-color-disabled: oklch(0.730 0.020 265);
  --primitive-font-family-space-grotesk-light: "Google-Space-Grotesk--light", Arial, sans-serif;
  --primitive-font-family-space-grotesk-regular: "Google-Space-Grotesk--regular", Arial, sans-serif;
  --primitive-font-family-space-grotesk-medium: "Google-Space-Grotesk--medium", Arial, sans-serif;
  --primitive-font-family-space-grotesk-bold: "Google-Space-Grotesk--bold", Arial, sans-serif;
  --primitive-font-family-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --primitive-icon-arrow-default: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.8299 11.2897L10.5899 7.0497C10.497 6.95598 10.3864 6.88158 10.2645 6.83081C10.1427 6.78004 10.012 6.75391 9.87994 6.75391C9.74793 6.75391 9.61723 6.78004 9.49537 6.83081C9.37351 6.88158 9.26291 6.95598 9.16994 7.0497C8.98369 7.23707 8.87915 7.49052 8.87915 7.7547C8.87915 8.01889 8.98369 8.27234 9.16994 8.4597L12.7099 11.9997L9.16994 15.5397C8.98369 15.7271 8.87915 15.9805 8.87915 16.2447C8.87915 16.5089 8.98369 16.7623 9.16994 16.9497C9.26338 17.0424 9.3742 17.1157 9.49604 17.1655C9.61787 17.2152 9.74834 17.2405 9.87994 17.2397C10.0115 17.2405 10.142 17.2152 10.2638 17.1655C10.3857 17.1157 10.4965 17.0424 10.5899 16.9497L14.8299 12.7097C14.9237 12.6167 14.9981 12.5061 15.0488 12.3843C15.0996 12.2624 15.1257 12.1317 15.1257 11.9997C15.1257 11.8677 15.0996 11.737 15.0488 11.6151C14.9981 11.4933 14.9237 11.3827 14.8299 11.2897Z" fill="black"/></svg>');
  --primitive-icon-arrow-double: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.46002 8.28978C8.27172 8.09617 8.01422 7.98529 7.74416 7.98154C7.47411 7.97779 7.21363 8.08147 7.02002 8.26978C6.82641 8.45808 6.71554 8.71558 6.71179 8.98564C6.70804 9.25569 6.81172 9.51617 7.00002 9.70978L9.34002 11.9998L7.00002 14.2898C6.90629 14.3827 6.8319 14.4933 6.78113 14.6152C6.73036 14.7371 6.70422 14.8678 6.70422 14.9998C6.70422 15.1318 6.73036 15.2625 6.78113 15.3844C6.8319 15.5062 6.90629 15.6168 7.00002 15.7098C7.09298 15.8035 7.20359 15.8779 7.32545 15.9287C7.4473 15.9794 7.57801 16.0056 7.71002 16.0056C7.84203 16.0056 7.97274 15.9794 8.0946 15.9287C8.21646 15.8779 8.32706 15.8035 8.42002 15.7098L11.42 12.7098C11.5138 12.6168 11.5881 12.5062 11.6389 12.3844C11.6897 12.2625 11.7158 12.1318 11.7158 11.9998C11.7158 11.8678 11.6897 11.7371 11.6389 11.6152C11.5881 11.4933 11.5138 11.3827 11.42 11.2898L8.46002 8.28978ZM16.96 11.2898L13.96 8.28978C13.7717 8.10147 13.5163 7.99569 13.25 7.99569C12.9837 7.99569 12.7283 8.10147 12.54 8.28978C12.3517 8.47808 12.2459 8.73348 12.2459 8.99978C12.2459 9.26608 12.3517 9.52147 12.54 9.70978L14.84 11.9998L12.54 14.2898C12.4463 14.3827 12.3719 14.4933 12.3211 14.6152C12.2704 14.7371 12.2442 14.8678 12.2442 14.9998C12.2442 15.1318 12.2704 15.2625 12.3211 15.3844C12.3719 15.5062 12.4463 15.6168 12.54 15.7098C12.633 15.8035 12.7436 15.8779 12.8654 15.9287C12.9873 15.9794 13.118 16.0056 13.25 16.0056C13.382 16.0056 13.5127 15.9794 13.6346 15.9287C13.7565 15.8779 13.8671 15.8035 13.96 15.7098L16.96 12.7098C17.0564 12.6195 17.134 12.511 17.1882 12.3906C17.2424 12.2701 17.2723 12.1401 17.276 12.0081C17.2797 11.8761 17.2572 11.7446 17.2099 11.6213C17.1625 11.498 17.0912 11.3854 17 11.2898H16.96Z" fill="black"/></svg>');
  --primitive-icon-content-bars: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 8H21C21.2652 8 21.5196 7.89464 21.7071 7.70711C21.8946 7.51957 22 7.26522 22 7C22 6.73478 21.8946 6.48043 21.7071 6.29289C21.5196 6.10536 21.2652 6 21 6H3C2.73478 6 2.48043 6.10536 2.29289 6.29289C2.10536 6.48043 2 6.73478 2 7C2 7.26522 2.10536 7.51957 2.29289 7.70711C2.48043 7.89464 2.73478 8 3 8ZM21 16H3C2.73478 16 2.48043 16.1054 2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 11H3C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11Z" fill="black"/></svg>');
  --primitive-icon-rrss-email: url('data:image/svg+xml;utf-8,<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.125 4.69112L12.219 10.375H12.214C11.6352 10.95 10.8505 11.2487 9.98582 11.2487C9.12152 11.2487 8.33677 10.95 7.75685 10.375H7.74135L1.875 4.6949V2.53153C4.2241 4.85363 8.49967 9 8.49967 9H8.50103C8.88358 9.4 9.40435 9.56993 9.979 9.56993C10.5877 9.56993 11.1355 9.325 11.523 8.9H11.5257L18.125 2.50128V4.69112ZM17.7874 0H0V13.425C0 14.6452 0.989025 15.625 2.20922 15.625H20C20 15.625 20 2.18857 20 2.15745C20 0.93745 19.0081 0 17.7874 0Z" fill="black"/></svg>');
  --primitive-icon-ui-cancel: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.4099 12.0002L17.7099 7.71019C17.8982 7.52188 18.004 7.26649 18.004 7.00019C18.004 6.73388 17.8982 6.47849 17.7099 6.29019C17.5216 6.10188 17.2662 5.99609 16.9999 5.99609C16.7336 5.99609 16.4782 6.10188 16.2899 6.29019L11.9999 10.5902L7.70994 6.29019C7.52164 6.10188 7.26624 5.99609 6.99994 5.99609C6.73364 5.99609 6.47824 6.10188 6.28994 6.29019C6.10164 6.47849 5.99585 6.73388 5.99585 7.00019C5.99585 7.26649 6.10164 7.52188 6.28994 7.71019L10.5899 12.0002L6.28994 16.2902C6.19621 16.3831 6.12182 16.4937 6.07105 16.6156C6.02028 16.7375 5.99414 16.8682 5.99414 17.0002C5.99414 17.1322 6.02028 17.2629 6.07105 17.3848C6.12182 17.5066 6.19621 17.6172 6.28994 17.7102C6.3829 17.8039 6.4935 17.8783 6.61536 17.9291C6.73722 17.9798 6.86793 18.006 6.99994 18.006C7.13195 18.006 7.26266 17.9798 7.38452 17.9291C7.50638 17.8783 7.61698 17.8039 7.70994 17.7102L11.9999 13.4102L16.2899 17.7102C16.3829 17.8039 16.4935 17.8783 16.6154 17.9291C16.7372 17.9798 16.8679 18.006 16.9999 18.006C17.132 18.006 17.2627 17.9798 17.3845 17.9291C17.5064 17.8783 17.617 17.8039 17.7099 17.7102C17.8037 17.6172 17.8781 17.5066 17.9288 17.3848C17.9796 17.2629 18.0057 17.1322 18.0057 17.0002C18.0057 16.8682 17.9796 16.7375 17.9288 16.6156C17.8781 16.4937 17.8037 16.3831 17.7099 16.2902L13.4099 12.0002Z" fill="black"/></svg>');
  --primitive-icon-ui-exclamation: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 16C11.8022 16 11.6089 16.0587 11.4444 16.1686C11.28 16.2784 11.1518 16.4346 11.0761 16.6173C11.0004 16.8001 10.9806 17.0011 11.0192 17.1951C11.0578 17.3891 11.153 17.5673 11.2929 17.7071C11.4327 17.847 11.6109 17.9422 11.8049 17.9808C11.9989 18.0194 12.2 17.9996 12.3827 17.9239C12.5654 17.8482 12.7216 17.72 12.8315 17.5556C12.9414 17.3911 13 17.1978 13 17C13 16.7348 12.8946 16.4805 12.7071 16.2929C12.5196 16.1054 12.2652 16 12 16ZM22.67 17.47L14.62 3.47003C14.3598 3.00354 13.9798 2.61498 13.5192 2.3445C13.0586 2.07401 12.5341 1.9314 12 1.9314C11.4659 1.9314 10.9414 2.07401 10.4808 2.3445C10.0202 2.61498 9.64019 3.00354 9.38 3.47003L1.38 17.47C1.1108 17.924 0.966143 18.441 0.960644 18.9688C0.955146 19.4966 1.089 20.0166 1.34869 20.4761C1.60837 20.9356 1.9847 21.3185 2.43968 21.5861C2.89466 21.8536 3.41219 21.9964 3.94 22H20.06C20.5921 22.0053 21.1159 21.8689 21.5779 21.6049C22.0399 21.341 22.4234 20.9589 22.689 20.4978C22.9546 20.0368 23.0928 19.5134 23.0895 18.9814C23.0862 18.4493 22.9414 17.9277 22.67 17.47ZM20.94 19.47C20.8523 19.626 20.7245 19.7556 20.5697 19.8453C20.4149 19.935 20.2389 19.9815 20.06 19.98H3.94C3.76111 19.9815 3.5851 19.935 3.43032 19.8453C3.27554 19.7556 3.14765 19.626 3.06 19.47C2.97223 19.318 2.92603 19.1456 2.92603 18.97C2.92603 18.7945 2.97223 18.622 3.06 18.47L11.06 4.47003C11.1439 4.30623 11.2714 4.16876 11.4284 4.07277C11.5855 3.97678 11.766 3.92599 11.95 3.92599C12.134 3.92599 12.3145 3.97678 12.4716 4.07277C12.6286 4.16876 12.7561 4.30623 12.84 4.47003L20.89 18.47C20.9892 18.6199 21.0462 18.7937 21.055 18.9732C21.0638 19.1527 21.0241 19.3312 20.94 19.49V19.47ZM12 8.00003C11.7348 8.00003 11.4804 8.10538 11.2929 8.29292C11.1054 8.48046 11 8.73481 11 9.00003V13C11 13.2652 11.1054 13.5196 11.2929 13.7071C11.4804 13.8947 11.7348 14 12 14C12.2652 14 12.5196 13.8947 12.7071 13.7071C12.8946 13.5196 13 13.2652 13 13V9.00003C13 8.73481 12.8946 8.48046 12.7071 8.29292C12.5196 8.10538 12.2652 8.00003 12 8.00003Z" fill="black"/></svg>');
  --primitive-icon-ui-home: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0001 7.99952L14.0001 2.73952C13.4501 2.24756 12.738 1.97559 12.0001 1.97559C11.2622 1.97559 10.5501 2.24756 10.0001 2.73952L4.00009 7.99952C3.68246 8.28359 3.42899 8.63207 3.25657 9.02176C3.08414 9.41145 2.99671 9.8334 3.00009 10.2595V18.9995C3.00009 19.7952 3.31617 20.5582 3.87877 21.1208C4.44138 21.6834 5.20445 21.9995 6.00009 21.9995H18.0001C18.7957 21.9995 19.5588 21.6834 20.1214 21.1208C20.684 20.5582 21.0001 19.7952 21.0001 18.9995V10.2495C21.0021 9.82508 20.9139 9.40506 20.7416 9.0172C20.5692 8.62934 20.3165 8.28247 20.0001 7.99952ZM14.0001 19.9995H10.0001V14.9995C10.0001 14.7343 10.1055 14.4799 10.293 14.2924C10.4805 14.1049 10.7349 13.9995 11.0001 13.9995H13.0001C13.2653 13.9995 13.5197 14.1049 13.7072 14.2924C13.8947 14.4799 14.0001 14.7343 14.0001 14.9995V19.9995ZM19.0001 18.9995C19.0001 19.2647 18.8947 19.5191 18.7072 19.7066C18.5197 19.8942 18.2653 19.9995 18.0001 19.9995H16.0001V14.9995C16.0001 14.2039 15.684 13.4408 15.1214 12.8782C14.5588 12.3156 13.7957 11.9995 13.0001 11.9995H11.0001C10.2044 11.9995 9.44138 12.3156 8.87877 12.8782C8.31616 13.4408 8.00009 14.2039 8.00009 14.9995V19.9995H6.00009C5.73488 19.9995 5.48052 19.8942 5.29299 19.7066C5.10545 19.5191 5.00009 19.2647 5.00009 18.9995V10.2495C5.00027 10.1075 5.03069 9.96721 5.08931 9.8379C5.14794 9.70858 5.23343 9.59323 5.3401 9.49952L11.3401 4.24952C11.5226 4.0892 11.7572 4.00078 12.0001 4.00078C12.243 4.00078 12.4776 4.0892 12.6601 4.24952L18.6601 9.49952C18.7668 9.59323 18.8523 9.70858 18.9109 9.8379C18.9695 9.96721 18.9999 10.1075 19.0001 10.2495V18.9995Z" fill="black"/></svg>');
  --primitive-icon-ui-tick: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.7099 7.20986C18.617 7.11613 18.5064 7.04174 18.3845 6.99097C18.2627 6.9402 18.132 6.91406 17.9999 6.91406C17.8679 6.91406 17.7372 6.9402 17.6154 6.99097C17.4935 7.04174 17.3829 7.11613 17.29 7.20986L9.83995 14.6699L6.70995 11.5299C6.61343 11.4366 6.49949 11.3633 6.37463 11.3141C6.24978 11.2649 6.11645 11.2408 5.98227 11.2431C5.84809 11.2454 5.71568 11.2741 5.5926 11.3276C5.46953 11.3811 5.35819 11.4583 5.26495 11.5549C5.17171 11.6514 5.0984 11.7653 5.04919 11.8902C4.99999 12.015 4.97586 12.1484 4.97818 12.2825C4.9805 12.4167 5.00923 12.5491 5.06272 12.6722C5.11622 12.7953 5.19343 12.9066 5.28995 12.9999L9.12995 16.8399C9.22291 16.9336 9.33351 17.008 9.45537 17.0588C9.57723 17.1095 9.70794 17.1357 9.83995 17.1357C9.97196 17.1357 10.1027 17.1095 10.2245 17.0588C10.3464 17.008 10.457 16.9336 10.55 16.8399L18.7099 8.67986C18.8115 8.58622 18.8925 8.47257 18.9479 8.34607C19.0033 8.21957 19.0319 8.08296 19.0319 7.94486C19.0319 7.80676 19.0033 7.67015 18.9479 7.54365C18.8925 7.41715 18.8115 7.3035 18.7099 7.20986Z" fill="black"/></svg>');
  --primitive-filter-brown: invert(18%) sepia(39%) saturate(2629%) hue-rotate(357deg) brightness(95%) contrast(92%);
  --primitive-filter-blue: brightness(0) saturate(100%) invert(19%) sepia(94%) saturate(6000%) hue-rotate(238deg) brightness(103%) contrast(112%);
  --primitive-filter-success: brightness(0) saturate(100%) invert(38%) sepia(64%) saturate(600%) hue-rotate(129deg) brightness(95%) contrast(101%);
  --primitive-filter-error: invert(26%) sepia(84%) saturate(6466%) hue-rotate(356deg) brightness(76%) contrast(131%);
  --primitive-filter-warning: invert(35%) sepia(55%) saturate(1731%) hue-rotate(33deg) brightness(92%);
  --primitive-filter-disabled: grayscale(1);
  --base-measure: var(--primitive-space-base);
  --icon-arrow-default: var(--primitive-icon-arrow-default);
  --icon-arrow-double: var(--primitive-icon-arrow-double);
  --icon-content-bars: var(--primitive-icon-content-bars);
  --icon-rrss-email: var(--primitive-icon-rrss-email);
  --icon-user-interface-cancel: var(--primitive-icon-ui-cancel);
  --icon-user-interface-exclamation-mark: var(--primitive-icon-ui-exclamation);
  --icon-user-interface-home: var(--primitive-icon-ui-home);
  --icon-user-interface-tick: var(--primitive-icon-ui-tick);
  --font-weight-1: var(--primitive-font-family-space-grotesk-medium);
  --font-weight-2: var(--primitive-font-family-space-grotesk-bold);
  --font-bold: var(--font-weight-2);
  --semantic-color-quinary: var(--primitive-color-error-500);
  --semantic-color-senary: initial;
  --semantic-color-septenary: initial;
  --semantic-color-text-disabled: var(--primitive-color-gray-400);
  --semantic-color-border-focus: var(--semantic-color-primary);
  --semantic-border-width: 1px;
  --semantic-outline-width: var(--theme-focus-ring-width);
  --semantic-color-state-hover-tertiary: var(--primitive-color-ink);
  --semantic-color-state-hover-quaternary: var(--primitive-color-blue-800);
  --semantic-color-state-active: var(--primitive-color-blue-700);
  --semantic-color-state-disabled: var(--primitive-color-disabled);
  --semantic-color-state-focus: var(--semantic-color-primary);
  --semantic-color-selection-text: oklch(1 0 0);
  --semantic-color-selection-bg: var(--semantic-color-primary);
  --reset-selection-color: var(--semantic-color-selection-text);
  --reset-selection-bg: var(--semantic-color-selection-bg);
  --semantic-border-radius-none: 0;
  --semantic-border-radius-sm: 0.125rem;
  --semantic-border-radius-default: 0.25rem;
  --semantic-border-radius-lg: 0.375rem;
  --semantic-border-radius-xl: 0.5rem;
  --semantic-border-radius-2xl: 0.5rem;
  --semantic-border-radius-full: 9999px;
  --semantic-border-radius-circle: 50%;
  --semantic-shadow-hard-offset: 0.25rem;
  --semantic-shadow-inner: none;
  --semantic-shadow-focus: 0 0 0 0.1875rem color-mix(in srgb, var(--semantic-focus-ring-color) 35%, transparent);
  --semantic-bg-grid-size: 1.5rem;
  --semantic-bg-grid-width: 1px;
  --semantic-duration-instant: 0.06s;
  --semantic-duration-fast: 0.1s;
  --semantic-duration-base: 0.16s;
  --semantic-duration-slow: 0.28s;
  --semantic-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --semantic-easing-out: cubic-bezier(0.2, 0, 0, 1);
  --semantic-focus-ring-width: 0.1875rem;
  --semantic-focus-ring-offset: 0.125rem;
  --theme-focus-ring-width: 0.1875rem;
  --semantic-font-family-primary: var(--primitive-font-family-space-grotesk-regular);
  --semantic-font-family-primary-bold: var(--primitive-font-family-space-grotesk-bold);
  --semantic-font-family-heading: var(--primitive-font-family-space-grotesk-bold);
  --semantic-font-family-heading-md: var(--primitive-font-family-space-grotesk-medium);
  --semantic-font-family-mono: var(--primitive-font-family-mono);
  --filter-primary: var(--primitive-filter-blue);
  --filter-secondary: var(--primitive-filter-success);
  --filter-state-ok: var(--primitive-filter-success);
  --filter-state-warning: var(--primitive-filter-warning);
  --filter-state-disabled: var(--primitive-filter-disabled);
  --filter-color-brown: initial;
  --filter-color-blue: var(--primitive-filter-blue);
  --reset-body-background-color: var(--semantic-color-bg-primary);
  --reset-html-font: normal normal 400 16px/24px var(--semantic-font-family-primary);
  --reset-body-font-size: var(--semantic-font-size-body);
  --reset-body-line-height: var(--primitive-line-height-relaxed);
  --reset-h-font-family: var(--semantic-font-family-heading);
  --reset-h1-size: var(--semantic-font-size-h1);
  --reset-h1-line-height: var(--primitive-line-height-tight);
  --reset-h1-letter-spacing: var(--primitive-letter-spacing-display);
  --reset-h2-size: var(--semantic-font-size-h2);
  --reset-h2-line-height: var(--primitive-line-height-snug);
  --reset-h2-letter-spacing: var(--primitive-letter-spacing-tight);
  --reset-h3-size: var(--semantic-font-size-h3);
  --reset-h3-line-height: var(--primitive-line-height-snug);
  --reset-h3-letter-spacing: var(--primitive-letter-spacing-tight);
  --reset-h4-size: var(--semantic-font-size-h4);
  --reset-h4-line-height: var(--primitive-line-height-snug);
  --reset-h4-letter-spacing: var(--primitive-letter-spacing-tight);
  --reset-h5-size: var(--semantic-font-size-h5);
  --reset-h5-line-height: var(--primitive-line-height-snug);
  --reset-h5-letter-spacing: var(--primitive-letter-spacing-normal);
  --reset-h6-size: var(--semantic-font-size-h6);
  --reset-h6-line-height: var(--primitive-line-height-snug);
  --reset-h6-letter-spacing: var(--primitive-letter-spacing-normal);
  --layout-max-width: calc(360 * var(--base-measure));
  --layout-pad-1: calc(2 * var(--base-measure));
  --layout-gap-1: calc(var(--base-measure));
  --layout-pad-2: calc(3 * var(--base-measure));
  --layout-gap-2: calc(3 * var(--base-measure));
  --layout-pad-3: calc(4 * var(--base-measure));
  --layout-gap-3: calc(4 * var(--base-measure));
  --layout-pad-4: calc(6 * var(--base-measure));
  --layout-gap-4: calc(6 * var(--base-measure));
  --layout-pad-5: calc(8 * var(--base-measure));
  --layout-gap-5: calc(8 * var(--base-measure));
  --gap-1: calc(2 * var(--base-measure));
  --inner-1: calc(var(--base-measure));
  --scope-1: calc(2 * var(--base-measure));
  --scope-2: calc(2.5 * var(--base-measure));
  --scope-3: calc(3 * var(--base-measure));
  --scope-4: calc(4 * var(--base-measure));
  --scope-5: calc(5 * var(--base-measure));
  --scope-6: calc(5.4 * var(--base-measure));
  --theme-focus: 0 0 0 var(--semantic-focus-ring-width) var(--semantic-focus-ring-color);
  --theme-w-border: 1px;
  --theme-radius: var(--semantic-border-radius-default);
  --component-button-border-width: 0.125rem;
  --component-button-border-style: solid;
  --component-button-border-radius: var(--semantic-border-radius-default);
  --component-button-border-radius-circle: var(--semantic-border-radius-circle);
  --component-button-shadow: var(--semantic-shadow-hard-sm);
  --component-button-shadow-hover: var(--semantic-shadow-hard);
  --component-button-shadow-active: none;
  --component-button-active-offset-x: 0.125rem;
  --component-button-active-offset-y: 0.125rem;
  --component-button-transition-duration: var(--semantic-duration-base);
  --component-button-transition-duration-active: var(--semantic-duration-instant);
  --component-button-transition-easing: var(--semantic-easing-standard);
  --btn-primary-text: var(--semantic-color-primary);
  --btn-secondary-text: var(--primitive-color-green-700);
  --btn-tertiary-text: var(--semantic-color-tertiary);
  --btn-quaternary-text: var(--semantic-color-quaternary);
  --component-btn-group-gap: calc(3 * var(--base-measure));
  --component-feature-card-border-width: 0.0625rem;
  --component-feature-card-border-radius: var(--semantic-border-radius-default);
  --component-feature-card-shadow: none;
  --component-feature-card-border-color-hover: var(--semantic-color-border-strong);
  --component-feature-card-shadow-hover: var(--semantic-shadow-hard);
  --component-feature-card-hover-lift: 0px;
  --component-theme-card-border-width: 0.0625rem;
  --component-theme-card-border-radius: var(--semantic-border-radius-default);
  --component-theme-card-shadow: none;
  --component-theme-card-border-color-active: var(--semantic-color-border-strong);
  --component-theme-card-shadow-hover: var(--semantic-shadow-hard);
  --component-theme-card-hover-lift: 0px;
  --component-theme-card-swatch-border-radius: 0;
  --component-theme-card-dot-border-radius: var(--semantic-border-radius-sm);
  --component-theme-card-dot-border-color: var(--semantic-color-border-strong);
  --component-pill-border-radius: var(--semantic-border-radius-sm);
  --component-pill-border-width: 0.0625rem;
  --component-pill-neutral-border-color: var(--semantic-color-border-default);
  --component-feature-icon-border-radius: var(--semantic-border-radius-default);
  --component-feature-icon-border-width: 0.0625rem;
  --component-feature-icon-shadow: var(--semantic-shadow-hard-sm);
  --component-code-color: var(--primitive-color-gray-100);
  --component-code-border-radius: var(--semantic-border-radius-default);
  --component-code-border-width: 0.0625rem;
  --component-code-border-color: var(--semantic-color-border-strong);
  --component-code-line-height: 1.7;
  --component-code-inline-border-radius: var(--semantic-border-radius-sm);
  --component-code-snippet-border-width: 0.0625rem;
  --component-code-snippet-border-radius: var(--semantic-border-radius-default);
  --component-code-snippet-shadow: var(--semantic-shadow-hard-sm);
  --component-code-snippet-header-bg: var(--semantic-color-bg-secondary);
  --component-blockquote-bg: var(--semantic-color-bg-secondary);
  --component-blockquote-color: var(--semantic-color-text-secondary);
  --component-blockquote-border-width: 0.125rem;
  --component-blockquote-border-color: var(--semantic-color-border-strong);
  --component-blockquote-border-radius: 0;
  --component-hr-thickness: 1px;
  --component-hr-color: var(--semantic-color-border-default);
  --component-table-base-border-color: var(--semantic-color-border-subtle);
  --component-table-base-th-color: var(--semantic-color-text-primary);
  --component-table-base-th-border-width: 0.125rem;
  --component-table-base-th-border-color: var(--semantic-color-border-strong);
  --component-table-color-th: oklch(1 0 0);
  --component-table-th-font-family: var(--semantic-font-family-heading);
  --component-table-border-width: 1px;
  --component-table-border-color: var(--semantic-color-border-subtle);
  --component-table-state-hover-border-color: var(--semantic-color-border-strong);
  --component-table-state-hover-shadow: none;
  --component-form-field-border-radius: var(--semantic-border-radius-default);
  --component-switch-border-radius: var(--semantic-border-radius-sm);
  --component-switch-slider-shadow: var(--semantic-shadow-hard-sm);
  --component-radio-border-radius: var(--semantic-border-radius-circle);
  --component-radio-dot-border-radius: var(--semantic-border-radius-circle);
  --form-font-family: var(--semantic-font-family-primary);
  --form-font-size: var(--semantic-font-size-body);
  --form-line-height: calc(6 * var(--base-measure));
  --form-inner-field: calc(4 * var(--base-measure));
  --form-height-size: calc(12 * var(--base-measure));
  --breadcrumb-gap: calc(4 * var(--base-measure));
  --breadcrumb-item-highlighted-p-x: calc(4 * var(--base-measure));
  --breadcrumb-item-icon-p-r: calc(-4 * var(--base-measure));
  --breadcrumb-item-icon-size: calc(4 * var(--base-measure));
  --breadcrumb-item-icon-pic: var(--icon-arrow-default);
  --check-gap: calc(10 * var(--base-measure));
  --check-line-height: calc(8 * var(--base-measure));
  --check-uncheck-size: calc(6 * var(--base-measure));
  --check-checked-icon-size: calc(6 * var(--base-measure));
  --check-checked-icon-pic: var(--icon-user-interface-tick);
  --list-ordered-m-t: calc(0 * var(--base-measure));
  --list-ordered-m-b: calc(0 * var(--base-measure));
  --list-ordered-gap: calc(8 * var(--base-measure));
  --list-ordered-item-m-t: calc(2 * var(--base-measure));
  --list-ordered-counter-size: calc(6 * var(--base-measure));
  --list-ordered-counter-font-size: calc(3 * var(--base-measure));
  --list-ordered-counter-line-height: calc(6 * var(--base-measure));
  --list-lvl1-gap: calc(6 * var(--base-measure));
  --list-item-m-t: calc(3 * var(--base-measure));
  --list-icon-size: calc(4 * var(--base-measure));
  --list-lvl1-icon-pic: var(--lc-icon-chevron-right);
  --list-lvl2-m-l: calc(6 * var(--base-measure));
  --list-lvl2-gap: calc(6 * var(--base-measure));
  --list-lvl2-icon-pic: var(--lc-icon-chevrons-right);
  --list-lvl3-m-l: calc(6 * var(--base-measure));
  --list-lvl3-gap: calc(6 * var(--base-measure));
  --pagination-gap: calc(2 * var(--base-measure));
  --pagination-item-size: calc(10 * var(--base-measure));
  --pagination-icon-size: calc(6 * var(--base-measure));
  --pagination-back-icon-pic: var(--icon-arrow-double);
  --pagination-prev-icon-pic: var(--icon-arrow-default);
  --pagination-next-icon-pic: var(--icon-arrow-default);
  --pagination-forward-icon-pic: var(--icon-arrow-double);
  --radio-gap: calc(10 * var(--base-measure));
  --radio-line-height: calc(8 * var(--base-measure));
  --radio-uncheck-size: calc(6 * var(--base-measure));
  --radio-checked-size: calc(2 * var(--base-measure));
  --switch-w-size: calc(14 * var(--base-measure));
  --switch-h-size: calc(7 * var(--base-measure));
  --switch-slider-w-size: calc(6 * var(--base-measure));
  --switch-slider-h-size: calc(6 * var(--base-measure));
  --switch-slider-background-color: var(--semantic-color-bg-primary);
  --switch-slider-radius: var(--semantic-border-radius-sm);
  --switch-status-w-size: calc(8 * var(--base-measure));
  --switch-status-h-size: calc(0 * var(--base-measure));
  --switch-status-icon-size: calc(5 * var(--base-measure));
  --switch-status-icon-ok-pic: var(--icon-user-interface-tick);
  --switch-status-icon-ko-pic: var(--icon-user-interface-cancel);
  --switch-status-icon-filter: var(--filter-primary);
  --switch-status-disabled: 0.5;
  --table-th-font-size: var(--semantic-font-size-body-small);
  --table-th-line-height: calc(6 * var(--base-measure));
  --txt-m-b: calc(4 * var(--base-measure));
  --cont-group-form-field-m-b: calc(5 * var(--base-measure));
  --cont-group-form-field-icon-p-r: calc(2 * var(--base-measure));
  --cont-group-form-field-icon-size: calc(6 * var(--base-measure));
  --cont-group-form-field-success-icon-pic: var(--icon-user-interface-tick);
  --cont-group-form-field-warning-icon-pic: var(--icon-user-interface-exclamation-mark);
  --component-section-title-font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  --component-section-title-weight: var(--primitive-font-weight-bold);
  --component-section-title-tracking: -0.02em;
  --component-section-title-max-width: 26ch;
  --component-section-divider-width: 1px;
  --component-section-bg-image: var(--semantic-bg-grid);
  --component-hero-backdrop-width: 100%;
  --component-hero-backdrop-height: min(640px, 72vh);
  --component-hero-backdrop-top: 0;
  --component-hero-backdrop-left: 0;
  --component-hero-backdrop-translate: none;
  --component-hero-headline-font-size: clamp(2.75rem, 6.5vw, 4.5rem);
  --component-hero-headline-weight: var(--primitive-font-weight-bold);
  --component-hero-headline-leading: 1;
  --component-hero-headline-tracking: -0.035em;
  --component-hero-headline-max-width: 16ch;
  --component-hero-accent-bg: none;
  --component-hero-accent-fill: currentColor;
  --component-hero-accent-decoration-line: underline;
  --component-hero-accent-decoration-thickness: 0.09em;
  --component-hero-accent-decoration-offset: 0.14em;
  --component-hero-sub-font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  --component-hero-sub-max-width: 46ch;
  --component-hero-stats-border-width: 0.125rem;
  --component-cta-color: oklch(1 0 0);
  --component-cta-overline-color: var(--primitive-color-green-300);
  --component-cta-sub-color: var(--primitive-color-gray-300);
  --component-cta-headline-font-size: clamp(1.75rem, 3.8vw, 2.75rem);
  --component-cta-decor-bg: transparent;
  --component-cta-code-bg: color-mix(in srgb, oklch(0 0 0) 35%, transparent);
  --component-cta-code-border-color: var(--primitive-color-gray-600);
  --component-cta-code-border-radius: var(--semantic-border-radius-default);
  --component-cta-shadow-hard-color: var(--primitive-color-gray-600);
  --component-layer-item-border-width: 1px;
  --component-layer-item-border-radius: var(--semantic-border-radius-default);
  --component-layer-item-accent-width: 0.25rem;
  --component-layer-item-gap: 0.5rem;
  --component-layer-item-shadow-hover: -0.25rem 0 0 0 var(--semantic-color-primary), var(--semantic-shadow-hard-sm);
  --component-layer-utilities-accent: var(--primitive-color-blue-500);
  --component-layer-organisms-accent: var(--primitive-color-green-500);
  --component-layer-molecules-accent: var(--primitive-color-blue-300);
  --component-layer-atoms-accent: var(--primitive-color-blue-400);
  --component-layer-tokens-accent: var(--primitive-color-green-400);
  --component-layer-base-accent: var(--primitive-color-gray-400);
  --component-layer-reset-accent: var(--primitive-color-gray-300);
  --component-footer-border-width: 0.125rem;
  --component-code-syntax-tag: var(--primitive-color-blue-300);
  --component-code-syntax-attr: var(--primitive-color-green-300);
  --component-code-syntax-val: var(--primitive-color-blue-100);
  --component-code-syntax-comment: var(--primitive-color-gray-500);
  --component-code-syntax-fn: var(--primitive-color-green-200);
  --semantic-space-layout-md: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --semantic-space-layout-lg: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  --semantic-space-layout-xl: clamp(4.5rem, 2rem + 9vw, 8rem);
  --semantic-space-layout-xxl: clamp(6rem, 3rem + 12vw, 11rem);
  --component-hero-text-align: left;
  --component-hero-justify: flex-start;
  --component-hero-content-inline: 0 auto;
  --component-hero-headline-max-width: 15ch;
  --component-hero-padding-block-start: var(--semantic-space-layout-xl);
  --component-hero-scroll-hint-align: flex-start;
  --component-hero-figure-opacity: 1;
  --component-hero-figure-min-height: 30rem;
  --component-hero-columns-wide: minmax(0, 1fr) minmax(0, 0.72fr);
  --component-hero-column-gap-wide: var(--semantic-space-layout-lg);
  --component-hero-figure-display-wide: block;
  --component-hero-sub-max-width: 52ch;
  --component-section-padding-inline:
    max(clamp(1.5rem, 3.5vw, 4.5rem), calc((100% - var(--layout-max-width)) / 2));
  --component-section-padding-block: var(--semantic-space-layout-xl);
  --component-section-align: left;
  --component-section-justify: flex-start;
  --component-section-header-margin-inline: 0 auto;
  --component-section-title-font-size: clamp(1.5rem, 2.6vw, 2rem);
  --component-section-title-max-width: 22ch;
  --component-section-rule-width: 1px;
  --component-section-rule-color: var(--semantic-color-border-strong);
  --component-section-rule-spacing: calc(4 * var(--base-measure));
  --component-section-index-content: "SEC " counter(syx-section, decimal-leading-zero);
  --component-section-tick-width: 1px;
  --component-section-tick-color: var(--semantic-color-border-default);
  --component-section-index-color: var(--semantic-color-text-tertiary);
  --component-section-tick-height: 0.5rem;
  --component-section-overline-bg: transparent;
  --component-section-overline-border-width: 0;
  --component-section-overline-padding: 0;
  --component-section-overline-color: var(--semantic-color-primary);
  --component-token-layer-border-width: 1px;
  --component-token-layer-border-radius: var(--semantic-border-radius-default);
  --component-token-layer-shadow-hover: var(--semantic-shadow-hard);
  --component-token-layer-hover-lift: 0px;
  --component-token-layer-stripe-width: 0.25rem;
  --component-token-step-radius: var(--semantic-border-radius-sm);
  --component-token-badge-radius: var(--semantic-border-radius-sm);
  --component-token-badge-border-width: 1px;
  --component-token-primitive-step-color: var(--primitive-color-ink);
  --component-token-theme-accent: var(--primitive-color-blue-300);
  --component-token-theme-step-color: var(--primitive-color-ink);
  --component-token-semantic-accent: var(--primitive-color-green-400);
  --component-token-semantic-step-color: var(--primitive-color-ink);
  --component-token-connector-line: linear-gradient( var(--semantic-color-border-strong), var(--semantic-color-border-strong) );
  --component-token-connector-opacity: 0.5;
  --component-token-connector-arrow-color: var(--semantic-color-primary);
  --component-token-rule-border-width: 0.125rem;
  --component-token-rule-border-radius: var(--semantic-border-radius-default);
  --component-token-rule-icon-radius: var(--semantic-border-radius-default);
  --semantic-color-bg-inverse: var(--primitive-color-gray-900);
  --semantic-color-text-primary: var(--primitive-color-ink);
  --semantic-color-text-secondary: var(--primitive-color-gray-700);
  --semantic-color-text-tertiary: var(--primitive-color-gray-600);
  --semantic-color-text-inverse: oklch(1 0 0);
  --semantic-shadow-none: none;
  --semantic-shadow-xs: var(--semantic-shadow-hard-sm);
  --semantic-shadow-sm: var(--semantic-shadow-hard-sm);
  --semantic-shadow-md: var(--semantic-shadow-hard);
  --semantic-shadow-lg: var(--semantic-shadow-hard-lg);
  --semantic-shadow-xl: var(--semantic-shadow-hard-lg);
  --semantic-shadow-card: none;
  --semantic-color-primary: var(--primitive-color-blue-500);
  --semantic-color-secondary: var(--primitive-color-green-400);
  --semantic-color-tertiary: var(--primitive-color-gray-900);
  --semantic-color-quaternary: var(--primitive-color-blue-700);
  --component-token-component-accent: var(--primitive-color-blue-500);
  --component-token-primitive-accent: var(--primitive-color-gray-400);
  --semantic-color-link-default: var(--primitive-color-blue-600);
  --semantic-color-link-hover: var(--primitive-color-ink);
  --semantic-color-link-visited: var(--primitive-color-blue-700);
  --semantic-color-link-active: var(--primitive-color-blue-500);
  --semantic-color-state-hover-primary: var(--primitive-color-blue-600);
  --semantic-color-state-hover-secondary: var(--primitive-color-green-500);
  --semantic-focus-ring-color: var(--semantic-color-primary);
  --semantic-color-placeholder: var(--primitive-color-gray-500);
  --component-button-primary-filled-bg: var(--semantic-color-primary);
  --component-button-primary-filled-border: var(--semantic-color-primary);
  --component-button-primary-filled-color: var(--semantic-color-text-inverse);
  --component-button-primary-filled-color-hover: var(--semantic-color-text-inverse);
  --btn-primary-filled-text: oklch(1 0 0);
  --btn-secondary-filled-text: var(--primitive-color-ink);
  --btn-tertiary-filled-text: oklch(1 0 0);
  --btn-quaternary-filled-text: oklch(1 0 0);
  --component-button-secondary-filled-color: var(--primitive-color-ink);
  --component-button-secondary-filled-color-hover: var(--primitive-color-ink);
  --component-button-secondary-color: var(--primitive-color-green-700);
  --component-button-secondary-border: var(--primitive-color-green-700);
  --component-pill-primary-bg: var(--primitive-color-blue-50);
  --component-pill-primary-color: var(--primitive-color-blue-700);
  --component-pill-primary-border-color: var(--primitive-color-blue-200);
  --component-pill-secondary-bg: var(--primitive-color-green-50);
  --component-pill-secondary-color: var(--primitive-color-green-700);
  --component-pill-secondary-border-color: var(--primitive-color-green-200);
  --component-pill-success-bg: var(--primitive-color-green-50);
  --component-pill-success-color: var(--primitive-color-green-700);
  --component-pill-neutral-bg: var(--semantic-color-bg-secondary);
  --component-pill-neutral-color: var(--semantic-color-text-secondary);
  --component-feature-icon-border-color: var(--semantic-color-border-strong);
  --component-feature-icon-atom-bg: var(--primitive-color-blue-50);
  --component-feature-icon-atom-color: var(--primitive-color-blue-700);
  --component-feature-icon-molecule-bg: var(--primitive-color-green-50);
  --component-feature-icon-molecule-color: var(--primitive-color-green-700);
  --component-feature-icon-organism-bg: var(--primitive-color-gray-100);
  --component-feature-icon-organism-color: var(--primitive-color-gray-800);
  --component-feature-icon-token-bg: var(--primitive-color-blue-100);
  --component-feature-icon-token-color: var(--primitive-color-blue-800);
  --component-feature-icon-layer-bg: var(--primitive-color-gray-50);
  --component-feature-icon-layer-color: var(--primitive-color-ink);
  --component-feature-icon-mixin-bg: var(--primitive-color-green-100);
  --component-feature-icon-mixin-color: var(--primitive-color-green-800);
  --component-code-inline-bg: var(--primitive-color-blue-50);
  --component-code-inline-color: var(--primitive-color-blue-800);
  --component-pill-warning-bg: var(--primitive-color-yellow-50);
  --component-pill-warning-color: var(--primitive-color-yellow-700);
  --component-pill-warning-border-color: var(--primitive-color-yellow-200);
  --component-pill-danger-bg: var(--primitive-color-red-50);
  --component-pill-danger-color: var(--primitive-color-red-600);
  --component-pill-danger-border-color: var(--primitive-color-red-200);
  --component-pill-success-border-color: var(--primitive-color-green-200);
  --component-code-inline-border-color: var(--primitive-color-blue-200);
  --component-code-bg: var(--primitive-color-gray-900);
  --component-table-base-state-hover-bg: var(--primitive-color-blue-50);
  --component-table-base-th-bg: var(--semantic-color-bg-secondary);
  --component-table-bg-th: var(--semantic-color-bg-inverse);
  --component-table-state-hover-bg: var(--primitive-color-blue-50);
  --semantic-bg-grid-color: color-mix(in srgb, var(--primitive-color-blue-500) 9%, transparent);
  --semantic-tone-error-bg: var(--primitive-color-error-500);
  --semantic-tone-success-bg: var(--primitive-color-success-500);
  --semantic-tone-warning-bg: var(--primitive-color-warning-500);
  --semantic-color-state-error: var(--semantic-tone-error-bg);
  --semantic-color-state-success: var(--semantic-tone-success-bg);
  --semantic-color-state-warning: var(--semantic-tone-warning-bg);
  --semantic-color-state-warning-text: oklch(0.54 0.15 72);
  --component-score-1-bg: var(--semantic-color-bg-primary);
  --component-score-1-color: var(--semantic-color-text-tertiary);
  --component-score-1-border: var(--semantic-color-border-default);
  --component-score-2-bg: var(--primitive-color-blue-100);
  --component-score-2-color: var(--semantic-color-text-primary);
  --component-score-2-border: var(--primitive-color-blue-200);
  --component-score-3-bg: var(--primitive-color-blue-200);
  --component-score-3-color: var(--semantic-color-text-primary);
  --component-score-3-border: var(--primitive-color-blue-300);
  --component-score-4-bg: oklch(0.520 0.120 266);
  --component-score-4-color: oklch(1 0 0);
  --component-score-4-border: oklch(0.520 0.120 266);
  --component-score-5-bg: var(--primitive-color-blue-700);
  --component-score-5-color: oklch(1 0 0);
  --component-score-5-border: var(--primitive-color-blue-700);
  --component-section-divider-color: var(--semantic-color-border-default);
  --component-hero-backdrop: radial-gradient( ellipse at 50% 0%, transparent 0%, var(--semantic-color-bg-primary) 78% ), var(--semantic-bg-grid);
  --component-hero-accent-color: var(--semantic-color-primary);
  --component-hero-accent-decoration-color: var(--primitive-color-green-400);
  --component-hero-stats-border-color: var(--semantic-color-border-strong);
  --component-hero-figure: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20383%20465'%3E%3Cdefs%3E%3Cpattern%20id='h'%20width='8'%20height='8'%20patternUnits='userSpaceOnUse'%20patternTransform='rotate%2845%29'%3E%3Cline%20x1='0'%20y1='0'%20x2='0'%20y2='8'%20stroke='%23c2cdf0'%20stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Cpolygon%20points='62.0,325.0%20191.9,400.0%20191.9,407.0%2062.0,332.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,400.0%20321.8,325.0%20321.8,332.0%20191.9,407.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,250.0%20321.8,325.0%20191.9,400.0%2062.0,325.0'%20fill='%23ffffff'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,250.0%20321.8,325.0%20191.9,400.0%2062.0,325.0'%20fill='url%28%23h%29'%20stroke='none'/%3E%3Cpolygon%20points='191.9,250.0%20321.8,325.0%20191.9,400.0%2062.0,325.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='250.0'%20x2='40'%20y2='250.0'%20stroke='%23b9c6ee'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,289.0%20191.9,364.0%20191.9,371.0%2062.0,296.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,364.0%20321.8,289.0%20321.8,296.0%20191.9,371.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,214.0%20321.8,289.0%20191.9,364.0%2062.0,289.0'%20fill='%23ffffff'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,214.0%20321.8,289.0%20191.9,364.0%2062.0,289.0'%20fill='url%28%23h%29'%20stroke='none'/%3E%3Cpolygon%20points='191.9,214.0%20321.8,289.0%20191.9,364.0%2062.0,289.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='214.0'%20x2='40'%20y2='214.0'%20stroke='%23b9c6ee'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,253.0%20191.9,328.0%20191.9,335.0%2062.0,260.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,328.0%20321.8,253.0%20321.8,260.0%20191.9,335.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,178.0%20321.8,253.0%20191.9,328.0%2062.0,253.0'%20fill='%23ffffff'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,178.0%20321.8,253.0%20191.9,328.0%2062.0,253.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='178.0'%20x2='40'%20y2='178.0'%20stroke='%23b9c6ee'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,217.0%20191.9,292.0%20191.9,299.0%2062.0,224.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,292.0%20321.8,217.0%20321.8,224.0%20191.9,299.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,142.0%20321.8,217.0%20191.9,292.0%2062.0,217.0'%20fill='%23ffffff'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,142.0%20321.8,217.0%20191.9,292.0%2062.0,217.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='142.0'%20x2='40'%20y2='142.0'%20stroke='%23b9c6ee'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,181.0%20191.9,256.0%20191.9,263.0%2062.0,188.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,256.0%20321.8,181.0%20321.8,188.0%20191.9,263.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,106.0%20321.8,181.0%20191.9,256.0%2062.0,181.0'%20fill='%23ffffff'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,106.0%20321.8,181.0%20191.9,256.0%2062.0,181.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='106.0'%20x2='40'%20y2='106.0'%20stroke='%23b9c6ee'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,145.0%20191.9,220.0%20191.9,227.0%2062.0,152.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,220.0%20321.8,145.0%20321.8,152.0%20191.9,227.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,70.0%20321.8,145.0%20191.9,220.0%2062.0,145.0'%20fill='%23ffffff'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,70.0%20321.8,145.0%20191.9,220.0%2062.0,145.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='70.0'%20x2='40'%20y2='70.0'%20stroke='%23b9c6ee'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,109.0%20191.9,184.0%20191.9,191.0%2062.0,116.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%231e3aff'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,184.0%20321.8,109.0%20321.8,116.0%20191.9,191.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%231e3aff'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,34.0%20321.8,109.0%20191.9,184.0%2062.0,109.0'%20fill='%23ffffff'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,34.0%20321.8,109.0%20191.9,184.0%2062.0,109.0'%20fill='none'%20stroke='%231e3aff'%20stroke-width='2.2'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='34.0'%20x2='40'%20y2='34.0'%20stroke='%23b9c6ee'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cline%20x1='40'%20y1='34.0'%20x2='40'%20y2='407.0'%20stroke='%230f1b2d'%20stroke-width='1.2'/%3E%3Cpolyline%20points='36,44.0%2040,34.0%2044,44.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.2'/%3E%3Cpolyline%20points='36,397.0%2040,407.0%2044,397.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.2'/%3E%3Ctext%20x='26'%20y='220.5'%20fill='%230f1b2d'%20font-family='ui-monospace,SFMono-Regular,Menlo,monospace'%20font-size='10.5'%20text-anchor='middle'%20letter-spacing='2'%20transform='rotate%28-90%2026%20220.5%29'%3E7%20LAYERS%3C/text%3E%3Cline%20x1='62.0'%20y1='433.0'%20x2='321.8'%20y2='433.0'%20stroke='%23b9c6ee'%20stroke-width='1.1'/%3E%3Cline%20x1='62.0'%20y1='428.0'%20x2='62.0'%20y2='438.0'%20stroke='%23b9c6ee'%20stroke-width='1.1'/%3E%3Cline%20x1='321.8'%20y1='428.0'%20x2='321.8'%20y2='438.0'%20stroke='%23b9c6ee'%20stroke-width='1.1'/%3E%3Cline%20x1='10'%20y1='10'%20x2='23'%20y2='10'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3Cline%20x1='10'%20y1='10'%20x2='10'%20y2='23'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='10'%20x2='360'%20y2='10'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='10'%20x2='373'%20y2='23'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3Cline%20x1='10'%20y1='455'%20x2='23'%20y2='455'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3Cline%20x1='10'%20y1='455'%20x2='10'%20y2='442'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='455'%20x2='360'%20y2='455'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='455'%20x2='373'%20y2='442'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3C/svg%3E");
  --component-cta-code-color: var(--primitive-color-blue-200);
  --component-layer-utilities-bg: var(--primitive-color-blue-50);
  --component-layer-utilities-color: var(--primitive-color-blue-600);
  --component-layer-organisms-color: var(--primitive-color-green-700);
  --component-layer-molecules-color: var(--primitive-color-blue-700);
  --component-layer-atoms-color: var(--primitive-color-blue-600);
  --component-layer-tokens-color: var(--primitive-color-green-700);
  --component-layer-base-color: var(--primitive-color-gray-600);
  --component-layer-reset-color: var(--primitive-color-gray-600);
  --component-docs-badge-layout-bg: var(--primitive-color-gray-100);
  --component-docs-badge-layout-color: var(--primitive-color-ink);
  --component-docs-badge-layout-border: var(--primitive-color-gray-300);
  --component-docs-badge-atom-bg: var(--primitive-color-blue-50);
  --component-docs-badge-atom-color: var(--primitive-color-blue-800);
  --component-docs-badge-atom-border: var(--primitive-color-blue-200);
  --component-docs-badge-molecule-bg: var(--primitive-color-blue-200);
  --component-docs-badge-molecule-color: var(--primitive-color-blue-900);
  --component-docs-badge-molecule-border: var(--primitive-color-blue-300);
  --component-docs-badge-organism-bg: var(--primitive-color-blue-600);
  --component-docs-badge-organism-color: oklch(1 0 0);
  --component-docs-badge-organism-border: var(--primitive-color-blue-600);
  --component-button-disabled-filled-color: var(--semantic-color-text-inverse);
  --component-token-primitive-badge-bg: var(--primitive-color-gray-50);
  --component-token-primitive-badge-color: var(--primitive-color-gray-700);
  --component-token-primitive-badge-border: var(--primitive-color-gray-300);
  --component-token-theme-badge-bg: var(--primitive-color-blue-50);
  --component-token-theme-badge-color: var(--primitive-color-blue-700);
  --component-token-theme-badge-border: var(--primitive-color-blue-200);
  --component-token-semantic-badge-bg: var(--primitive-color-green-50);
  --component-token-semantic-badge-color: var(--primitive-color-green-700);
  --component-token-semantic-badge-border: var(--primitive-color-green-200);
  --component-token-component-badge-bg: var(--primitive-color-blue-100);
  --component-token-component-badge-color: var(--primitive-color-blue-800);
  --component-token-component-badge-border: var(--primitive-color-blue-300);
  --component-token-component-step-color: oklch(1 0 0);
  --component-token-rule-bg: var(--primitive-color-blue-50);
  --component-token-rule-border-color: var(--semantic-color-border-strong);
  --component-token-rule-icon-bg: var(--semantic-color-primary);
  --component-token-rule-icon-color: oklch(1 0 0);
  --semantic-color-bg-primary: oklch(1 0 0);
  --semantic-color-bg-secondary: var(--primitive-color-gray-50);
  --semantic-color-bg-tertiary: var(--primitive-color-blue-50);
  --semantic-color-border-subtle: var(--primitive-color-gray-200);
  --semantic-color-border-default: var(--primitive-color-gray-300);
  --semantic-color-border-strong: var(--primitive-color-ink);
  --component-feature-card-bg: var(--semantic-color-bg-primary);
  --component-feature-card-border-color: var(--semantic-color-border-default);
  --component-theme-card-bg: var(--semantic-color-bg-primary);
  --component-theme-card-border-color: var(--semantic-color-border-default);
  --component-layer-item-bg: var(--semantic-color-bg-primary);
  --component-layer-item-border-color: var(--semantic-color-border-default);
  --component-token-layer-bg: var(--semantic-color-bg-primary);
  --component-token-layer-border-color: var(--semantic-color-border-default);
  --component-code-snippet-border-color: var(--semantic-color-border-strong);
  --component-cta-bg: var(--semantic-bg-grid), linear-gradient( var(--primitive-color-gray-900), var(--primitive-color-gray-900) );
  --component-footer-bg: var(--semantic-color-bg-secondary);
  --component-footer-border-color: var(--semantic-color-border-strong);
  --semantic-shadow-hard-color: var(--primitive-color-ink);
  --component-cta-border-block-width: 0;
  --component-cta-border-color: var(--semantic-color-border-strong);
  --component-pill-dark-bg: var(--primitive-color-gray-900);
  --component-pill-dark-color: oklch(1 0 0);
  --component-pill-dark-border-color: var(--primitive-color-gray-900);
}

@media (prefers-color-scheme: dark) {
  :root {
    --semantic-color-bg-primary: var(--primitive-color-gray-900);
    --semantic-color-bg-secondary: var(--primitive-color-gray-800);
    --semantic-color-bg-tertiary: var(--primitive-color-gray-800);
    --semantic-color-bg-inverse: var(--primitive-color-white);
    --semantic-color-text-primary: var(--primitive-color-gray-100);
    --semantic-color-text-secondary: var(--primitive-color-gray-300);
    --semantic-color-text-tertiary: var(--primitive-color-gray-400);
    --semantic-color-text-inverse: var(--primitive-color-gray-900);
    --semantic-color-text-disabled: var(--primitive-color-gray-600);
    --semantic-color-border-default: var(--primitive-color-gray-700);
    --semantic-color-border-subtle: var(--primitive-color-gray-800);
    --semantic-color-border-strong: var(--primitive-color-gray-600);
    --semantic-color-link-default: var(--semantic-color-primary);
    --semantic-color-link-hover: var(--semantic-color-secondary);
    --semantic-color-link-visited: var(--semantic-color-tertiary);
    --semantic-color-link-active: var(--semantic-color-primary);
    --semantic-focus-ring-color: var(--semantic-color-primary);
    --semantic-color-state-active: var(--semantic-color-secondary);
    --semantic-color-state-disabled: var(--primitive-color-gray-600);
    --semantic-color-state-hover-primary: var(--semantic-color-primary);
    --semantic-color-state-hover-secondary: var(--semantic-color-secondary);
    --semantic-color-state-hover-tertiary: var(--semantic-color-primary);
    --semantic-color-state-hover-quaternary: var(--semantic-color-primary);
    --semantic-color-placeholder: var(--primitive-color-gray-500);
    --semantic-color-selection-text: var(--primitive-color-white);
    --semantic-color-selection-bg: var(--semantic-color-primary);
    --semantic-shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.3);
    --semantic-shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.4), 0 1px 2px 0 oklch(0 0 0 / 0.3);
    --semantic-shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.4), 0 2px 4px -1px oklch(0 0 0 / 0.3);
    --semantic-shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.5), 0 4px 6px -2px oklch(0 0 0 / 0.3);
    --semantic-shadow-card: 0 1px 3px oklch(0 0 0 / 0.3), 0 4px 12px oklch(0 0 0 / 0.2);
    --semantic-shadow-focus: 0 0 0.313rem 0 var(--semantic-focus-ring-color);
    --semantic-brand-text-lightness: 0.80;
    --semantic-color-bg-inverse: oklch(1 0 0);
    --semantic-color-text-primary: var(--primitive-color-gray-100);
    --semantic-color-text-secondary: var(--primitive-color-gray-300);
    --semantic-color-text-tertiary: var(--primitive-color-gray-400);
    --semantic-color-text-inverse: var(--primitive-color-gray-900);
    --semantic-shadow-none: none;
    --semantic-shadow-xs: var(--semantic-shadow-hard-sm);
    --semantic-shadow-sm: var(--semantic-shadow-hard-sm);
    --semantic-shadow-md: var(--semantic-shadow-hard);
    --semantic-shadow-lg: var(--semantic-shadow-hard-lg);
    --semantic-shadow-xl: var(--semantic-shadow-hard-lg);
    --semantic-shadow-card: none;
    --semantic-color-primary: var(--primitive-color-blue-300);
    --semantic-color-secondary: var(--primitive-color-green-300);
    --semantic-color-tertiary: var(--primitive-color-gray-200);
    --semantic-color-quaternary: var(--primitive-color-blue-200);
    --component-token-component-accent: var(--primitive-color-blue-300);
    --component-token-primitive-accent: var(--primitive-color-gray-500);
    --semantic-color-link-default: var(--primitive-color-blue-300);
    --semantic-color-link-hover: var(--primitive-color-green-400);
    --semantic-color-link-visited: var(--primitive-color-blue-200);
    --semantic-color-link-active: var(--primitive-color-blue-300);
    --semantic-color-state-hover-primary: var(--primitive-color-blue-300);
    --semantic-color-state-hover-secondary: var(--primitive-color-green-300);
    --semantic-focus-ring-color: var(--primitive-color-blue-300);
    --semantic-color-placeholder: var(--primitive-color-gray-500);
    --component-button-primary-filled-bg: var(--primitive-color-blue-300);
    --component-button-primary-filled-border: var(--primitive-color-blue-300);
    --component-button-primary-filled-color: var(--primitive-color-gray-900);
    --component-button-primary-filled-color-hover: var(--primitive-color-gray-900);
    --btn-primary-filled-text: var(--primitive-color-gray-900);
    --btn-secondary-filled-text: var(--primitive-color-gray-900);
    --btn-tertiary-filled-text: var(--primitive-color-gray-900);
    --btn-quaternary-filled-text: var(--primitive-color-gray-900);
    --component-button-secondary-filled-color: var(--primitive-color-gray-900);
    --component-button-secondary-filled-color-hover: var(--primitive-color-gray-900);
    --component-button-secondary-color: var(--primitive-color-green-300);
    --component-button-secondary-border: var(--primitive-color-green-300);
    --component-pill-primary-bg: transparent;
    --component-pill-primary-color: var(--primitive-color-blue-300);
    --component-pill-primary-border-color: var(--primitive-color-blue-400);
    --component-pill-secondary-bg: transparent;
    --component-pill-secondary-color: var(--primitive-color-green-300);
    --component-pill-secondary-border-color: var(--primitive-color-green-500);
    --component-pill-success-bg: transparent;
    --component-pill-success-color: var(--primitive-color-green-300);
    --component-pill-neutral-bg: transparent;
    --component-pill-neutral-color: var(--semantic-color-text-secondary);
    --component-feature-icon-border-color: var(--semantic-color-border-default);
    --component-feature-icon-atom-bg: var(--primitive-color-gray-800);
    --component-feature-icon-atom-color: var(--primitive-color-blue-300);
    --component-feature-icon-molecule-bg: var(--primitive-color-gray-800);
    --component-feature-icon-molecule-color: var(--primitive-color-green-300);
    --component-feature-icon-organism-bg: var(--primitive-color-gray-800);
    --component-feature-icon-organism-color: var(--primitive-color-gray-200);
    --component-feature-icon-token-bg: var(--primitive-color-gray-800);
    --component-feature-icon-token-color: var(--primitive-color-blue-200);
    --component-feature-icon-layer-bg: var(--primitive-color-gray-800);
    --component-feature-icon-layer-color: var(--primitive-color-gray-100);
    --component-feature-icon-mixin-bg: var(--primitive-color-gray-800);
    --component-feature-icon-mixin-color: var(--primitive-color-green-200);
    --component-code-inline-bg: var(--primitive-color-gray-800);
    --component-code-inline-color: var(--primitive-color-blue-200);
    --component-pill-warning-bg: transparent;
    --component-pill-warning-color: var(--semantic-tone-warning-bg);
    --component-pill-warning-border-color: color-mix(in srgb, var(--semantic-tone-warning-bg) 45%, transparent);
    --component-pill-danger-bg: transparent;
    --component-pill-danger-color: var(--semantic-tone-error-bg);
    --component-pill-danger-border-color: color-mix(in srgb, var(--semantic-tone-error-bg) 45%, transparent);
    --component-pill-success-border-color: color-mix(in srgb, var(--primitive-color-green-300) 45%, transparent);
    --component-pill-primary-border-color: color-mix(in srgb, var(--primitive-color-blue-300) 50%, transparent);
    --component-pill-dark-bg: var(--primitive-color-gray-200);
    --component-pill-dark-color: var(--primitive-color-gray-900);
    --component-pill-dark-border-color: var(--primitive-color-gray-200);
    --component-code-inline-border-color: var(--primitive-color-gray-700);
    --component-code-bg: oklch(0.16 0.028 258);
    --component-table-base-state-hover-bg: var(--primitive-color-gray-800);
    --component-table-base-th-bg: var(--primitive-color-gray-800);
    --component-table-bg-th: var(--primitive-color-gray-800);
    --component-table-state-hover-bg: var(--primitive-color-gray-800);
    --semantic-bg-grid-color: color-mix(in srgb, var(--primitive-color-blue-300) 12%, transparent);
    --semantic-tone-error-bg: oklch(0.72 0.17 25);
    --semantic-tone-success-bg: oklch(0.78 0.13 168);
    --semantic-tone-warning-bg: oklch(0.84 0.13 80);
    --semantic-color-state-error: var(--semantic-tone-error-bg);
    --semantic-color-state-success: var(--semantic-tone-success-bg);
    --semantic-color-state-warning: var(--semantic-tone-warning-bg);
    --semantic-color-state-warning-text: var(--semantic-tone-warning-bg);
    --component-score-1-bg: var(--primitive-color-gray-800);
    --component-score-1-color: var(--primitive-color-gray-400);
    --component-score-1-border: var(--primitive-color-gray-700);
    --component-score-2-bg: var(--primitive-color-blue-900);
    --component-score-2-color: var(--primitive-color-blue-200);
    --component-score-2-border: var(--primitive-color-blue-800);
    --component-score-3-bg: var(--primitive-color-blue-800);
    --component-score-3-color: var(--primitive-color-blue-100);
    --component-score-3-border: var(--primitive-color-blue-700);
    --component-score-4-bg: var(--primitive-color-blue-300);
    --component-score-4-color: var(--primitive-color-gray-900);
    --component-score-4-border: var(--primitive-color-blue-300);
    --component-score-5-bg: var(--primitive-color-blue-200);
    --component-score-5-color: var(--primitive-color-gray-900);
    --component-score-5-border: var(--primitive-color-blue-200);
    --component-section-divider-color: var(--primitive-color-gray-700);
    --component-hero-backdrop: radial-gradient( ellipse at 50% 0%, transparent 0%, var(--primitive-color-gray-900) 78% ), var(--semantic-bg-grid);
    --component-hero-accent-color: var(--primitive-color-blue-300);
    --component-hero-accent-decoration-color: var(--primitive-color-green-400);
    --component-hero-stats-border-color: var(--primitive-color-gray-600);
    --component-hero-figure: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20383%20465'%3E%3Cdefs%3E%3Cpattern%20id='h'%20width='8'%20height='8'%20patternUnits='userSpaceOnUse'%20patternTransform='rotate%2845%29'%3E%3Cline%20x1='0'%20y1='0'%20x2='0'%20y2='8'%20stroke='%233d4c69'%20stroke-width='0.9'/%3E%3C/pattern%3E%3C/defs%3E%3Cpolygon%20points='62.0,325.0%20191.9,400.0%20191.9,407.0%2062.0,332.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,400.0%20321.8,325.0%20321.8,332.0%20191.9,407.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,250.0%20321.8,325.0%20191.9,400.0%2062.0,325.0'%20fill='%2316233c'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,250.0%20321.8,325.0%20191.9,400.0%2062.0,325.0'%20fill='url%28%23h%29'%20stroke='none'/%3E%3Cpolygon%20points='191.9,250.0%20321.8,325.0%20191.9,400.0%2062.0,325.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='250.0'%20x2='40'%20y2='250.0'%20stroke='%2341506e'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,289.0%20191.9,364.0%20191.9,371.0%2062.0,296.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,364.0%20321.8,289.0%20321.8,296.0%20191.9,371.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,214.0%20321.8,289.0%20191.9,364.0%2062.0,289.0'%20fill='%2316233c'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,214.0%20321.8,289.0%20191.9,364.0%2062.0,289.0'%20fill='url%28%23h%29'%20stroke='none'/%3E%3Cpolygon%20points='191.9,214.0%20321.8,289.0%20191.9,364.0%2062.0,289.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='214.0'%20x2='40'%20y2='214.0'%20stroke='%2341506e'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,253.0%20191.9,328.0%20191.9,335.0%2062.0,260.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,328.0%20321.8,253.0%20321.8,260.0%20191.9,335.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,178.0%20321.8,253.0%20191.9,328.0%2062.0,253.0'%20fill='%2316233c'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,178.0%20321.8,253.0%20191.9,328.0%2062.0,253.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='178.0'%20x2='40'%20y2='178.0'%20stroke='%2341506e'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,217.0%20191.9,292.0%20191.9,299.0%2062.0,224.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,292.0%20321.8,217.0%20321.8,224.0%20191.9,299.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,142.0%20321.8,217.0%20191.9,292.0%2062.0,217.0'%20fill='%2316233c'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,142.0%20321.8,217.0%20191.9,292.0%2062.0,217.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='142.0'%20x2='40'%20y2='142.0'%20stroke='%2341506e'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,181.0%20191.9,256.0%20191.9,263.0%2062.0,188.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,256.0%20321.8,181.0%20321.8,188.0%20191.9,263.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,106.0%20321.8,181.0%20191.9,256.0%2062.0,181.0'%20fill='%2316233c'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,106.0%20321.8,181.0%20191.9,256.0%2062.0,181.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='106.0'%20x2='40'%20y2='106.0'%20stroke='%2341506e'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,145.0%20191.9,220.0%20191.9,227.0%2062.0,152.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,220.0%20321.8,145.0%20321.8,152.0%20191.9,227.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,70.0%20321.8,145.0%20191.9,220.0%2062.0,145.0'%20fill='%2316233c'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,70.0%20321.8,145.0%20191.9,220.0%2062.0,145.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='70.0'%20x2='40'%20y2='70.0'%20stroke='%2341506e'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,109.0%20191.9,184.0%20191.9,191.0%2062.0,116.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%2385a7ff'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,184.0%20321.8,109.0%20321.8,116.0%20191.9,191.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%2385a7ff'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,34.0%20321.8,109.0%20191.9,184.0%2062.0,109.0'%20fill='%2316233c'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,34.0%20321.8,109.0%20191.9,184.0%2062.0,109.0'%20fill='none'%20stroke='%2385a7ff'%20stroke-width='2.2'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='34.0'%20x2='40'%20y2='34.0'%20stroke='%2341506e'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cline%20x1='40'%20y1='34.0'%20x2='40'%20y2='407.0'%20stroke='%23c3ccdb'%20stroke-width='1.2'/%3E%3Cpolyline%20points='36,44.0%2040,34.0%2044,44.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.2'/%3E%3Cpolyline%20points='36,397.0%2040,407.0%2044,397.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.2'/%3E%3Ctext%20x='26'%20y='220.5'%20fill='%23c3ccdb'%20font-family='ui-monospace,SFMono-Regular,Menlo,monospace'%20font-size='10.5'%20text-anchor='middle'%20letter-spacing='2'%20transform='rotate%28-90%2026%20220.5%29'%3E7%20LAYERS%3C/text%3E%3Cline%20x1='62.0'%20y1='433.0'%20x2='321.8'%20y2='433.0'%20stroke='%2341506e'%20stroke-width='1.1'/%3E%3Cline%20x1='62.0'%20y1='428.0'%20x2='62.0'%20y2='438.0'%20stroke='%2341506e'%20stroke-width='1.1'/%3E%3Cline%20x1='321.8'%20y1='428.0'%20x2='321.8'%20y2='438.0'%20stroke='%2341506e'%20stroke-width='1.1'/%3E%3Cline%20x1='10'%20y1='10'%20x2='23'%20y2='10'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3Cline%20x1='10'%20y1='10'%20x2='10'%20y2='23'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='10'%20x2='360'%20y2='10'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='10'%20x2='373'%20y2='23'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3Cline%20x1='10'%20y1='455'%20x2='23'%20y2='455'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3Cline%20x1='10'%20y1='455'%20x2='10'%20y2='442'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='455'%20x2='360'%20y2='455'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='455'%20x2='373'%20y2='442'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3C/svg%3E");
    --component-cta-code-color: var(--primitive-color-blue-200);
    --component-layer-utilities-bg: var(--primitive-color-gray-800);
    --component-layer-utilities-color: var(--primitive-color-blue-300);
    --component-layer-organisms-color: var(--primitive-color-green-300);
    --component-layer-molecules-color: var(--primitive-color-blue-200);
    --component-layer-atoms-color: var(--primitive-color-blue-300);
    --component-layer-tokens-color: var(--primitive-color-green-300);
    --component-layer-base-color: var(--primitive-color-gray-300);
    --component-layer-reset-color: var(--primitive-color-gray-400);
    --component-docs-badge-layout-bg: var(--primitive-color-gray-800);
    --component-docs-badge-layout-color: var(--primitive-color-gray-200);
    --component-docs-badge-layout-border: var(--primitive-color-gray-600);
    --component-docs-badge-atom-bg: var(--primitive-color-gray-800);
    --component-docs-badge-atom-color: var(--primitive-color-blue-300);
    --component-docs-badge-atom-border: var(--primitive-color-blue-700);
    --component-docs-badge-molecule-bg: var(--primitive-color-blue-800);
    --component-docs-badge-molecule-color: var(--primitive-color-blue-100);
    --component-docs-badge-molecule-border: var(--primitive-color-blue-600);
    --component-docs-badge-organism-bg: var(--primitive-color-blue-300);
    --component-docs-badge-organism-color: var(--primitive-color-gray-900);
    --component-docs-badge-organism-border: var(--primitive-color-blue-300);
    --component-button-disabled-filled-color: var(--primitive-color-gray-900);
    --component-token-primitive-badge-bg: var(--primitive-color-gray-900);
    --component-token-primitive-badge-color: var(--primitive-color-gray-200);
    --component-token-primitive-badge-border: var(--primitive-color-gray-600);
    --component-token-theme-badge-bg: var(--primitive-color-gray-900);
    --component-token-theme-badge-color: var(--primitive-color-blue-300);
    --component-token-theme-badge-border: var(--primitive-color-blue-800);
    --component-token-semantic-badge-bg: var(--primitive-color-gray-900);
    --component-token-semantic-badge-color: var(--primitive-color-green-300);
    --component-token-semantic-badge-border: var(--primitive-color-green-800);
    --component-token-component-badge-bg: var(--primitive-color-gray-900);
    --component-token-component-badge-color: var(--primitive-color-blue-200);
    --component-token-component-badge-border: var(--primitive-color-blue-700);
    --component-token-component-step-color: var(--primitive-color-gray-900);
    --component-token-rule-bg: var(--primitive-color-gray-800);
    --component-token-rule-border-color: var(--primitive-color-gray-600);
    --component-token-rule-icon-bg: var(--primitive-color-blue-300);
    --component-token-rule-icon-color: var(--primitive-color-gray-900);
    --semantic-color-bg-primary: var(--primitive-color-gray-900);
    --semantic-color-bg-secondary: oklch(0.265 0.036 259);
    --semantic-color-bg-tertiary: oklch(0.305 0.032 262);
    --semantic-color-border-subtle: var(--primitive-color-gray-700);
    --semantic-color-border-default: var(--primitive-color-gray-600);
    --semantic-color-border-strong: var(--primitive-color-gray-300);
    --component-feature-card-bg: oklch(0.305 0.032 262);
    --component-feature-card-border-color: var(--primitive-color-gray-600);
    --component-theme-card-bg: oklch(0.305 0.032 262);
    --component-theme-card-border-color: var(--primitive-color-gray-600);
    --component-layer-item-bg: oklch(0.305 0.032 262);
    --component-layer-item-border-color: var(--primitive-color-gray-600);
    --component-token-layer-bg: oklch(0.305 0.032 262);
    --component-token-layer-border-color: var(--primitive-color-gray-600);
    --component-code-snippet-border-color: var(--primitive-color-gray-600);
    --component-cta-bg: var(--semantic-bg-grid), linear-gradient(oklch(0.355 0.042 263), oklch(0.355 0.042 263));
    --component-footer-bg: oklch(0.265 0.036 259);
    --component-footer-border-color: var(--primitive-color-gray-500);
    --semantic-shadow-hard-color: var(--primitive-color-gray-400);
    --component-cta-border-block-width: 2px;
    --component-cta-border-color: var(--primitive-color-gray-500);
    --component-code-inline-bg: oklch(0.345 0.055 265);
    --component-code-inline-border-color: oklch(0.42 0.08 265);
    --component-code-inline-color: var(--primitive-color-blue-200);
    --component-pill-warning-bg: transparent;
    --component-pill-warning-color: var(--semantic-tone-warning-bg);
    --component-pill-warning-border-color: color-mix(in srgb, var(--semantic-tone-warning-bg) 45%, transparent);
    --component-pill-danger-bg: transparent;
    --component-pill-danger-color: var(--semantic-tone-error-bg);
    --component-pill-danger-border-color: color-mix(in srgb, var(--semantic-tone-error-bg) 45%, transparent);
    --component-pill-success-border-color: color-mix(in srgb, var(--primitive-color-green-300) 45%, transparent);
    --component-pill-primary-border-color: color-mix(in srgb, var(--primitive-color-blue-300) 50%, transparent);
    --component-pill-dark-bg: var(--primitive-color-gray-200);
    --component-pill-dark-color: var(--primitive-color-gray-900);
    --component-pill-dark-border-color: var(--primitive-color-gray-200);
  }
}
:root[data-theme=dark] {
  --semantic-color-bg-primary: var(--primitive-color-gray-900);
  --semantic-color-bg-secondary: var(--primitive-color-gray-800);
  --semantic-color-bg-tertiary: var(--primitive-color-gray-800);
  --semantic-color-bg-inverse: var(--primitive-color-white);
  --semantic-color-text-primary: var(--primitive-color-gray-100);
  --semantic-color-text-secondary: var(--primitive-color-gray-300);
  --semantic-color-text-tertiary: var(--primitive-color-gray-400);
  --semantic-color-text-inverse: var(--primitive-color-gray-900);
  --semantic-color-text-disabled: var(--primitive-color-gray-600);
  --semantic-color-border-default: var(--primitive-color-gray-700);
  --semantic-color-border-subtle: var(--primitive-color-gray-800);
  --semantic-color-border-strong: var(--primitive-color-gray-600);
  --semantic-color-link-default: var(--semantic-color-primary);
  --semantic-color-link-hover: var(--semantic-color-secondary);
  --semantic-color-link-visited: var(--semantic-color-tertiary);
  --semantic-color-link-active: var(--semantic-color-primary);
  --semantic-focus-ring-color: var(--semantic-color-primary);
  --semantic-color-state-active: var(--semantic-color-secondary);
  --semantic-color-state-disabled: var(--primitive-color-gray-600);
  --semantic-color-state-hover-primary: var(--semantic-color-primary);
  --semantic-color-state-hover-secondary: var(--semantic-color-secondary);
  --semantic-color-state-hover-tertiary: var(--semantic-color-primary);
  --semantic-color-state-hover-quaternary: var(--semantic-color-primary);
  --semantic-color-placeholder: var(--primitive-color-gray-500);
  --semantic-color-selection-text: var(--primitive-color-white);
  --semantic-color-selection-bg: var(--semantic-color-primary);
  --semantic-shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.3);
  --semantic-shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.4), 0 1px 2px 0 oklch(0 0 0 / 0.3);
  --semantic-shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.4), 0 2px 4px -1px oklch(0 0 0 / 0.3);
  --semantic-shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.5), 0 4px 6px -2px oklch(0 0 0 / 0.3);
  --semantic-shadow-card: 0 1px 3px oklch(0 0 0 / 0.3), 0 4px 12px oklch(0 0 0 / 0.2);
  --semantic-shadow-focus: 0 0 0.313rem 0 var(--semantic-focus-ring-color);
  --semantic-brand-text-lightness: 0.80;
  --semantic-color-bg-inverse: oklch(1 0 0);
  --semantic-color-text-primary: var(--primitive-color-gray-100);
  --semantic-color-text-secondary: var(--primitive-color-gray-300);
  --semantic-color-text-tertiary: var(--primitive-color-gray-400);
  --semantic-color-text-inverse: var(--primitive-color-gray-900);
  --semantic-shadow-none: none;
  --semantic-shadow-xs: var(--semantic-shadow-hard-sm);
  --semantic-shadow-sm: var(--semantic-shadow-hard-sm);
  --semantic-shadow-md: var(--semantic-shadow-hard);
  --semantic-shadow-lg: var(--semantic-shadow-hard-lg);
  --semantic-shadow-xl: var(--semantic-shadow-hard-lg);
  --semantic-shadow-card: none;
  --semantic-color-primary: var(--primitive-color-blue-300);
  --semantic-color-secondary: var(--primitive-color-green-300);
  --semantic-color-tertiary: var(--primitive-color-gray-200);
  --semantic-color-quaternary: var(--primitive-color-blue-200);
  --component-token-component-accent: var(--primitive-color-blue-300);
  --component-token-primitive-accent: var(--primitive-color-gray-500);
  --semantic-color-link-default: var(--primitive-color-blue-300);
  --semantic-color-link-hover: var(--primitive-color-green-400);
  --semantic-color-link-visited: var(--primitive-color-blue-200);
  --semantic-color-link-active: var(--primitive-color-blue-300);
  --semantic-color-state-hover-primary: var(--primitive-color-blue-300);
  --semantic-color-state-hover-secondary: var(--primitive-color-green-300);
  --semantic-focus-ring-color: var(--primitive-color-blue-300);
  --semantic-color-placeholder: var(--primitive-color-gray-500);
  --component-button-primary-filled-bg: var(--primitive-color-blue-300);
  --component-button-primary-filled-border: var(--primitive-color-blue-300);
  --component-button-primary-filled-color: var(--primitive-color-gray-900);
  --component-button-primary-filled-color-hover: var(--primitive-color-gray-900);
  --btn-primary-filled-text: var(--primitive-color-gray-900);
  --btn-secondary-filled-text: var(--primitive-color-gray-900);
  --btn-tertiary-filled-text: var(--primitive-color-gray-900);
  --btn-quaternary-filled-text: var(--primitive-color-gray-900);
  --component-button-secondary-filled-color: var(--primitive-color-gray-900);
  --component-button-secondary-filled-color-hover: var(--primitive-color-gray-900);
  --component-button-secondary-color: var(--primitive-color-green-300);
  --component-button-secondary-border: var(--primitive-color-green-300);
  --component-pill-primary-bg: transparent;
  --component-pill-primary-color: var(--primitive-color-blue-300);
  --component-pill-primary-border-color: var(--primitive-color-blue-400);
  --component-pill-secondary-bg: transparent;
  --component-pill-secondary-color: var(--primitive-color-green-300);
  --component-pill-secondary-border-color: var(--primitive-color-green-500);
  --component-pill-success-bg: transparent;
  --component-pill-success-color: var(--primitive-color-green-300);
  --component-pill-neutral-bg: transparent;
  --component-pill-neutral-color: var(--semantic-color-text-secondary);
  --component-feature-icon-border-color: var(--semantic-color-border-default);
  --component-feature-icon-atom-bg: var(--primitive-color-gray-800);
  --component-feature-icon-atom-color: var(--primitive-color-blue-300);
  --component-feature-icon-molecule-bg: var(--primitive-color-gray-800);
  --component-feature-icon-molecule-color: var(--primitive-color-green-300);
  --component-feature-icon-organism-bg: var(--primitive-color-gray-800);
  --component-feature-icon-organism-color: var(--primitive-color-gray-200);
  --component-feature-icon-token-bg: var(--primitive-color-gray-800);
  --component-feature-icon-token-color: var(--primitive-color-blue-200);
  --component-feature-icon-layer-bg: var(--primitive-color-gray-800);
  --component-feature-icon-layer-color: var(--primitive-color-gray-100);
  --component-feature-icon-mixin-bg: var(--primitive-color-gray-800);
  --component-feature-icon-mixin-color: var(--primitive-color-green-200);
  --component-code-inline-bg: var(--primitive-color-gray-800);
  --component-code-inline-color: var(--primitive-color-blue-200);
  --component-pill-warning-bg: transparent;
  --component-pill-warning-color: var(--semantic-tone-warning-bg);
  --component-pill-warning-border-color: color-mix(in srgb, var(--semantic-tone-warning-bg) 45%, transparent);
  --component-pill-danger-bg: transparent;
  --component-pill-danger-color: var(--semantic-tone-error-bg);
  --component-pill-danger-border-color: color-mix(in srgb, var(--semantic-tone-error-bg) 45%, transparent);
  --component-pill-success-border-color: color-mix(in srgb, var(--primitive-color-green-300) 45%, transparent);
  --component-pill-primary-border-color: color-mix(in srgb, var(--primitive-color-blue-300) 50%, transparent);
  --component-pill-dark-bg: var(--primitive-color-gray-200);
  --component-pill-dark-color: var(--primitive-color-gray-900);
  --component-pill-dark-border-color: var(--primitive-color-gray-200);
  --component-code-inline-border-color: var(--primitive-color-gray-700);
  --component-code-bg: oklch(0.16 0.028 258);
  --component-table-base-state-hover-bg: var(--primitive-color-gray-800);
  --component-table-base-th-bg: var(--primitive-color-gray-800);
  --component-table-bg-th: var(--primitive-color-gray-800);
  --component-table-state-hover-bg: var(--primitive-color-gray-800);
  --semantic-bg-grid-color: color-mix(in srgb, var(--primitive-color-blue-300) 12%, transparent);
  --semantic-tone-error-bg: oklch(0.72 0.17 25);
  --semantic-tone-success-bg: oklch(0.78 0.13 168);
  --semantic-tone-warning-bg: oklch(0.84 0.13 80);
  --semantic-color-state-error: var(--semantic-tone-error-bg);
  --semantic-color-state-success: var(--semantic-tone-success-bg);
  --semantic-color-state-warning: var(--semantic-tone-warning-bg);
  --semantic-color-state-warning-text: var(--semantic-tone-warning-bg);
  --component-score-1-bg: var(--primitive-color-gray-800);
  --component-score-1-color: var(--primitive-color-gray-400);
  --component-score-1-border: var(--primitive-color-gray-700);
  --component-score-2-bg: var(--primitive-color-blue-900);
  --component-score-2-color: var(--primitive-color-blue-200);
  --component-score-2-border: var(--primitive-color-blue-800);
  --component-score-3-bg: var(--primitive-color-blue-800);
  --component-score-3-color: var(--primitive-color-blue-100);
  --component-score-3-border: var(--primitive-color-blue-700);
  --component-score-4-bg: var(--primitive-color-blue-300);
  --component-score-4-color: var(--primitive-color-gray-900);
  --component-score-4-border: var(--primitive-color-blue-300);
  --component-score-5-bg: var(--primitive-color-blue-200);
  --component-score-5-color: var(--primitive-color-gray-900);
  --component-score-5-border: var(--primitive-color-blue-200);
  --component-section-divider-color: var(--primitive-color-gray-700);
  --component-hero-backdrop: radial-gradient( ellipse at 50% 0%, transparent 0%, var(--primitive-color-gray-900) 78% ), var(--semantic-bg-grid);
  --component-hero-accent-color: var(--primitive-color-blue-300);
  --component-hero-accent-decoration-color: var(--primitive-color-green-400);
  --component-hero-stats-border-color: var(--primitive-color-gray-600);
  --component-hero-figure: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20383%20465'%3E%3Cdefs%3E%3Cpattern%20id='h'%20width='8'%20height='8'%20patternUnits='userSpaceOnUse'%20patternTransform='rotate%2845%29'%3E%3Cline%20x1='0'%20y1='0'%20x2='0'%20y2='8'%20stroke='%233d4c69'%20stroke-width='0.9'/%3E%3C/pattern%3E%3C/defs%3E%3Cpolygon%20points='62.0,325.0%20191.9,400.0%20191.9,407.0%2062.0,332.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,400.0%20321.8,325.0%20321.8,332.0%20191.9,407.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,250.0%20321.8,325.0%20191.9,400.0%2062.0,325.0'%20fill='%2316233c'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,250.0%20321.8,325.0%20191.9,400.0%2062.0,325.0'%20fill='url%28%23h%29'%20stroke='none'/%3E%3Cpolygon%20points='191.9,250.0%20321.8,325.0%20191.9,400.0%2062.0,325.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='250.0'%20x2='40'%20y2='250.0'%20stroke='%2341506e'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,289.0%20191.9,364.0%20191.9,371.0%2062.0,296.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,364.0%20321.8,289.0%20321.8,296.0%20191.9,371.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,214.0%20321.8,289.0%20191.9,364.0%2062.0,289.0'%20fill='%2316233c'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,214.0%20321.8,289.0%20191.9,364.0%2062.0,289.0'%20fill='url%28%23h%29'%20stroke='none'/%3E%3Cpolygon%20points='191.9,214.0%20321.8,289.0%20191.9,364.0%2062.0,289.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='214.0'%20x2='40'%20y2='214.0'%20stroke='%2341506e'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,253.0%20191.9,328.0%20191.9,335.0%2062.0,260.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,328.0%20321.8,253.0%20321.8,260.0%20191.9,335.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,178.0%20321.8,253.0%20191.9,328.0%2062.0,253.0'%20fill='%2316233c'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,178.0%20321.8,253.0%20191.9,328.0%2062.0,253.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='178.0'%20x2='40'%20y2='178.0'%20stroke='%2341506e'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,217.0%20191.9,292.0%20191.9,299.0%2062.0,224.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,292.0%20321.8,217.0%20321.8,224.0%20191.9,299.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,142.0%20321.8,217.0%20191.9,292.0%2062.0,217.0'%20fill='%2316233c'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,142.0%20321.8,217.0%20191.9,292.0%2062.0,217.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='142.0'%20x2='40'%20y2='142.0'%20stroke='%2341506e'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,181.0%20191.9,256.0%20191.9,263.0%2062.0,188.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,256.0%20321.8,181.0%20321.8,188.0%20191.9,263.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,106.0%20321.8,181.0%20191.9,256.0%2062.0,181.0'%20fill='%2316233c'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,106.0%20321.8,181.0%20191.9,256.0%2062.0,181.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='106.0'%20x2='40'%20y2='106.0'%20stroke='%2341506e'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,145.0%20191.9,220.0%20191.9,227.0%2062.0,152.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,220.0%20321.8,145.0%20321.8,152.0%20191.9,227.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%23c3ccdb'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,70.0%20321.8,145.0%20191.9,220.0%2062.0,145.0'%20fill='%2316233c'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,70.0%20321.8,145.0%20191.9,220.0%2062.0,145.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='70.0'%20x2='40'%20y2='70.0'%20stroke='%2341506e'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,109.0%20191.9,184.0%20191.9,191.0%2062.0,116.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%2385a7ff'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,184.0%20321.8,109.0%20321.8,116.0%20191.9,191.0'%20fill='%2316233c'%20fill-opacity='0.94'%20stroke='%2385a7ff'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,34.0%20321.8,109.0%20191.9,184.0%2062.0,109.0'%20fill='%2316233c'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,34.0%20321.8,109.0%20191.9,184.0%2062.0,109.0'%20fill='none'%20stroke='%2385a7ff'%20stroke-width='2.2'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='34.0'%20x2='40'%20y2='34.0'%20stroke='%2341506e'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cline%20x1='40'%20y1='34.0'%20x2='40'%20y2='407.0'%20stroke='%23c3ccdb'%20stroke-width='1.2'/%3E%3Cpolyline%20points='36,44.0%2040,34.0%2044,44.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.2'/%3E%3Cpolyline%20points='36,397.0%2040,407.0%2044,397.0'%20fill='none'%20stroke='%23c3ccdb'%20stroke-width='1.2'/%3E%3Ctext%20x='26'%20y='220.5'%20fill='%23c3ccdb'%20font-family='ui-monospace,SFMono-Regular,Menlo,monospace'%20font-size='10.5'%20text-anchor='middle'%20letter-spacing='2'%20transform='rotate%28-90%2026%20220.5%29'%3E7%20LAYERS%3C/text%3E%3Cline%20x1='62.0'%20y1='433.0'%20x2='321.8'%20y2='433.0'%20stroke='%2341506e'%20stroke-width='1.1'/%3E%3Cline%20x1='62.0'%20y1='428.0'%20x2='62.0'%20y2='438.0'%20stroke='%2341506e'%20stroke-width='1.1'/%3E%3Cline%20x1='321.8'%20y1='428.0'%20x2='321.8'%20y2='438.0'%20stroke='%2341506e'%20stroke-width='1.1'/%3E%3Cline%20x1='10'%20y1='10'%20x2='23'%20y2='10'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3Cline%20x1='10'%20y1='10'%20x2='10'%20y2='23'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='10'%20x2='360'%20y2='10'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='10'%20x2='373'%20y2='23'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3Cline%20x1='10'%20y1='455'%20x2='23'%20y2='455'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3Cline%20x1='10'%20y1='455'%20x2='10'%20y2='442'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='455'%20x2='360'%20y2='455'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='455'%20x2='373'%20y2='442'%20stroke='%2341506e'%20stroke-width='1.2'/%3E%3C/svg%3E");
  --component-cta-code-color: var(--primitive-color-blue-200);
  --component-layer-utilities-bg: var(--primitive-color-gray-800);
  --component-layer-utilities-color: var(--primitive-color-blue-300);
  --component-layer-organisms-color: var(--primitive-color-green-300);
  --component-layer-molecules-color: var(--primitive-color-blue-200);
  --component-layer-atoms-color: var(--primitive-color-blue-300);
  --component-layer-tokens-color: var(--primitive-color-green-300);
  --component-layer-base-color: var(--primitive-color-gray-300);
  --component-layer-reset-color: var(--primitive-color-gray-400);
  --component-docs-badge-layout-bg: var(--primitive-color-gray-800);
  --component-docs-badge-layout-color: var(--primitive-color-gray-200);
  --component-docs-badge-layout-border: var(--primitive-color-gray-600);
  --component-docs-badge-atom-bg: var(--primitive-color-gray-800);
  --component-docs-badge-atom-color: var(--primitive-color-blue-300);
  --component-docs-badge-atom-border: var(--primitive-color-blue-700);
  --component-docs-badge-molecule-bg: var(--primitive-color-blue-800);
  --component-docs-badge-molecule-color: var(--primitive-color-blue-100);
  --component-docs-badge-molecule-border: var(--primitive-color-blue-600);
  --component-docs-badge-organism-bg: var(--primitive-color-blue-300);
  --component-docs-badge-organism-color: var(--primitive-color-gray-900);
  --component-docs-badge-organism-border: var(--primitive-color-blue-300);
  --component-button-disabled-filled-color: var(--primitive-color-gray-900);
  --component-token-primitive-badge-bg: var(--primitive-color-gray-900);
  --component-token-primitive-badge-color: var(--primitive-color-gray-200);
  --component-token-primitive-badge-border: var(--primitive-color-gray-600);
  --component-token-theme-badge-bg: var(--primitive-color-gray-900);
  --component-token-theme-badge-color: var(--primitive-color-blue-300);
  --component-token-theme-badge-border: var(--primitive-color-blue-800);
  --component-token-semantic-badge-bg: var(--primitive-color-gray-900);
  --component-token-semantic-badge-color: var(--primitive-color-green-300);
  --component-token-semantic-badge-border: var(--primitive-color-green-800);
  --component-token-component-badge-bg: var(--primitive-color-gray-900);
  --component-token-component-badge-color: var(--primitive-color-blue-200);
  --component-token-component-badge-border: var(--primitive-color-blue-700);
  --component-token-component-step-color: var(--primitive-color-gray-900);
  --component-token-rule-bg: var(--primitive-color-gray-800);
  --component-token-rule-border-color: var(--primitive-color-gray-600);
  --component-token-rule-icon-bg: var(--primitive-color-blue-300);
  --component-token-rule-icon-color: var(--primitive-color-gray-900);
  --semantic-color-bg-primary: var(--primitive-color-gray-900);
  --semantic-color-bg-secondary: oklch(0.265 0.036 259);
  --semantic-color-bg-tertiary: oklch(0.305 0.032 262);
  --semantic-color-border-subtle: var(--primitive-color-gray-700);
  --semantic-color-border-default: var(--primitive-color-gray-600);
  --semantic-color-border-strong: var(--primitive-color-gray-300);
  --component-feature-card-bg: oklch(0.305 0.032 262);
  --component-feature-card-border-color: var(--primitive-color-gray-600);
  --component-theme-card-bg: oklch(0.305 0.032 262);
  --component-theme-card-border-color: var(--primitive-color-gray-600);
  --component-layer-item-bg: oklch(0.305 0.032 262);
  --component-layer-item-border-color: var(--primitive-color-gray-600);
  --component-token-layer-bg: oklch(0.305 0.032 262);
  --component-token-layer-border-color: var(--primitive-color-gray-600);
  --component-code-snippet-border-color: var(--primitive-color-gray-600);
  --component-cta-bg: var(--semantic-bg-grid), linear-gradient(oklch(0.355 0.042 263), oklch(0.355 0.042 263));
  --component-footer-bg: oklch(0.265 0.036 259);
  --component-footer-border-color: var(--primitive-color-gray-500);
  --semantic-shadow-hard-color: var(--primitive-color-gray-400);
  --component-cta-border-block-width: 2px;
  --component-cta-border-color: var(--primitive-color-gray-500);
  --component-code-inline-bg: oklch(0.345 0.055 265);
  --component-code-inline-border-color: oklch(0.42 0.08 265);
  --component-code-inline-color: var(--primitive-color-blue-200);
  --component-pill-warning-bg: transparent;
  --component-pill-warning-color: var(--semantic-tone-warning-bg);
  --component-pill-warning-border-color: color-mix(in srgb, var(--semantic-tone-warning-bg) 45%, transparent);
  --component-pill-danger-bg: transparent;
  --component-pill-danger-color: var(--semantic-tone-error-bg);
  --component-pill-danger-border-color: color-mix(in srgb, var(--semantic-tone-error-bg) 45%, transparent);
  --component-pill-success-border-color: color-mix(in srgb, var(--primitive-color-green-300) 45%, transparent);
  --component-pill-primary-border-color: color-mix(in srgb, var(--primitive-color-blue-300) 50%, transparent);
  --component-pill-dark-bg: var(--primitive-color-gray-200);
  --component-pill-dark-color: var(--primitive-color-gray-900);
  --component-pill-dark-border-color: var(--primitive-color-gray-200);
}

:root[data-theme=light] {
  --semantic-color-bg-inverse: var(--primitive-color-gray-900);
  --semantic-color-text-primary: var(--primitive-color-ink);
  --semantic-color-text-secondary: var(--primitive-color-gray-700);
  --semantic-color-text-tertiary: var(--primitive-color-gray-600);
  --semantic-color-text-inverse: oklch(1 0 0);
  --semantic-shadow-none: none;
  --semantic-shadow-xs: var(--semantic-shadow-hard-sm);
  --semantic-shadow-sm: var(--semantic-shadow-hard-sm);
  --semantic-shadow-md: var(--semantic-shadow-hard);
  --semantic-shadow-lg: var(--semantic-shadow-hard-lg);
  --semantic-shadow-xl: var(--semantic-shadow-hard-lg);
  --semantic-shadow-card: none;
  --semantic-color-primary: var(--primitive-color-blue-500);
  --semantic-color-secondary: var(--primitive-color-green-400);
  --semantic-color-tertiary: var(--primitive-color-gray-900);
  --semantic-color-quaternary: var(--primitive-color-blue-700);
  --component-token-component-accent: var(--primitive-color-blue-500);
  --component-token-primitive-accent: var(--primitive-color-gray-400);
  --semantic-color-link-default: var(--primitive-color-blue-600);
  --semantic-color-link-hover: var(--primitive-color-ink);
  --semantic-color-link-visited: var(--primitive-color-blue-700);
  --semantic-color-link-active: var(--primitive-color-blue-500);
  --semantic-color-state-hover-primary: var(--primitive-color-blue-600);
  --semantic-color-state-hover-secondary: var(--primitive-color-green-500);
  --semantic-focus-ring-color: var(--semantic-color-primary);
  --semantic-color-placeholder: var(--primitive-color-gray-500);
  --component-button-primary-filled-bg: var(--semantic-color-primary);
  --component-button-primary-filled-border: var(--semantic-color-primary);
  --component-button-primary-filled-color: var(--semantic-color-text-inverse);
  --component-button-primary-filled-color-hover: var(--semantic-color-text-inverse);
  --btn-primary-filled-text: oklch(1 0 0);
  --btn-secondary-filled-text: var(--primitive-color-ink);
  --btn-tertiary-filled-text: oklch(1 0 0);
  --btn-quaternary-filled-text: oklch(1 0 0);
  --component-button-secondary-filled-color: var(--primitive-color-ink);
  --component-button-secondary-filled-color-hover: var(--primitive-color-ink);
  --component-button-secondary-color: var(--primitive-color-green-700);
  --component-button-secondary-border: var(--primitive-color-green-700);
  --component-pill-primary-bg: var(--primitive-color-blue-50);
  --component-pill-primary-color: var(--primitive-color-blue-700);
  --component-pill-primary-border-color: var(--primitive-color-blue-200);
  --component-pill-secondary-bg: var(--primitive-color-green-50);
  --component-pill-secondary-color: var(--primitive-color-green-700);
  --component-pill-secondary-border-color: var(--primitive-color-green-200);
  --component-pill-success-bg: var(--primitive-color-green-50);
  --component-pill-success-color: var(--primitive-color-green-700);
  --component-pill-neutral-bg: var(--semantic-color-bg-secondary);
  --component-pill-neutral-color: var(--semantic-color-text-secondary);
  --component-feature-icon-border-color: var(--semantic-color-border-strong);
  --component-feature-icon-atom-bg: var(--primitive-color-blue-50);
  --component-feature-icon-atom-color: var(--primitive-color-blue-700);
  --component-feature-icon-molecule-bg: var(--primitive-color-green-50);
  --component-feature-icon-molecule-color: var(--primitive-color-green-700);
  --component-feature-icon-organism-bg: var(--primitive-color-gray-100);
  --component-feature-icon-organism-color: var(--primitive-color-gray-800);
  --component-feature-icon-token-bg: var(--primitive-color-blue-100);
  --component-feature-icon-token-color: var(--primitive-color-blue-800);
  --component-feature-icon-layer-bg: var(--primitive-color-gray-50);
  --component-feature-icon-layer-color: var(--primitive-color-ink);
  --component-feature-icon-mixin-bg: var(--primitive-color-green-100);
  --component-feature-icon-mixin-color: var(--primitive-color-green-800);
  --component-code-inline-bg: var(--primitive-color-blue-50);
  --component-code-inline-color: var(--primitive-color-blue-800);
  --component-pill-warning-bg: var(--primitive-color-yellow-50);
  --component-pill-warning-color: var(--primitive-color-yellow-700);
  --component-pill-warning-border-color: var(--primitive-color-yellow-200);
  --component-pill-danger-bg: var(--primitive-color-red-50);
  --component-pill-danger-color: var(--primitive-color-red-600);
  --component-pill-danger-border-color: var(--primitive-color-red-200);
  --component-pill-success-border-color: var(--primitive-color-green-200);
  --component-code-inline-border-color: var(--primitive-color-blue-200);
  --component-code-bg: var(--primitive-color-gray-900);
  --component-table-base-state-hover-bg: var(--primitive-color-blue-50);
  --component-table-base-th-bg: var(--semantic-color-bg-secondary);
  --component-table-bg-th: var(--semantic-color-bg-inverse);
  --component-table-state-hover-bg: var(--primitive-color-blue-50);
  --semantic-bg-grid-color: color-mix(in srgb, var(--primitive-color-blue-500) 9%, transparent);
  --semantic-tone-error-bg: var(--primitive-color-error-500);
  --semantic-tone-success-bg: var(--primitive-color-success-500);
  --semantic-tone-warning-bg: var(--primitive-color-warning-500);
  --semantic-color-state-error: var(--semantic-tone-error-bg);
  --semantic-color-state-success: var(--semantic-tone-success-bg);
  --semantic-color-state-warning: var(--semantic-tone-warning-bg);
  --semantic-color-state-warning-text: oklch(0.54 0.15 72);
  --component-score-1-bg: var(--semantic-color-bg-primary);
  --component-score-1-color: var(--semantic-color-text-tertiary);
  --component-score-1-border: var(--semantic-color-border-default);
  --component-score-2-bg: var(--primitive-color-blue-100);
  --component-score-2-color: var(--semantic-color-text-primary);
  --component-score-2-border: var(--primitive-color-blue-200);
  --component-score-3-bg: var(--primitive-color-blue-200);
  --component-score-3-color: var(--semantic-color-text-primary);
  --component-score-3-border: var(--primitive-color-blue-300);
  --component-score-4-bg: oklch(0.520 0.120 266);
  --component-score-4-color: oklch(1 0 0);
  --component-score-4-border: oklch(0.520 0.120 266);
  --component-score-5-bg: var(--primitive-color-blue-700);
  --component-score-5-color: oklch(1 0 0);
  --component-score-5-border: var(--primitive-color-blue-700);
  --component-section-divider-color: var(--semantic-color-border-default);
  --component-hero-backdrop: radial-gradient( ellipse at 50% 0%, transparent 0%, var(--semantic-color-bg-primary) 78% ), var(--semantic-bg-grid);
  --component-hero-accent-color: var(--semantic-color-primary);
  --component-hero-accent-decoration-color: var(--primitive-color-green-400);
  --component-hero-stats-border-color: var(--semantic-color-border-strong);
  --component-hero-figure: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20383%20465'%3E%3Cdefs%3E%3Cpattern%20id='h'%20width='8'%20height='8'%20patternUnits='userSpaceOnUse'%20patternTransform='rotate%2845%29'%3E%3Cline%20x1='0'%20y1='0'%20x2='0'%20y2='8'%20stroke='%23c2cdf0'%20stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Cpolygon%20points='62.0,325.0%20191.9,400.0%20191.9,407.0%2062.0,332.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,400.0%20321.8,325.0%20321.8,332.0%20191.9,407.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,250.0%20321.8,325.0%20191.9,400.0%2062.0,325.0'%20fill='%23ffffff'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,250.0%20321.8,325.0%20191.9,400.0%2062.0,325.0'%20fill='url%28%23h%29'%20stroke='none'/%3E%3Cpolygon%20points='191.9,250.0%20321.8,325.0%20191.9,400.0%2062.0,325.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='250.0'%20x2='40'%20y2='250.0'%20stroke='%23b9c6ee'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,289.0%20191.9,364.0%20191.9,371.0%2062.0,296.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,364.0%20321.8,289.0%20321.8,296.0%20191.9,371.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,214.0%20321.8,289.0%20191.9,364.0%2062.0,289.0'%20fill='%23ffffff'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,214.0%20321.8,289.0%20191.9,364.0%2062.0,289.0'%20fill='url%28%23h%29'%20stroke='none'/%3E%3Cpolygon%20points='191.9,214.0%20321.8,289.0%20191.9,364.0%2062.0,289.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='214.0'%20x2='40'%20y2='214.0'%20stroke='%23b9c6ee'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,253.0%20191.9,328.0%20191.9,335.0%2062.0,260.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,328.0%20321.8,253.0%20321.8,260.0%20191.9,335.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,178.0%20321.8,253.0%20191.9,328.0%2062.0,253.0'%20fill='%23ffffff'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,178.0%20321.8,253.0%20191.9,328.0%2062.0,253.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='178.0'%20x2='40'%20y2='178.0'%20stroke='%23b9c6ee'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,217.0%20191.9,292.0%20191.9,299.0%2062.0,224.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,292.0%20321.8,217.0%20321.8,224.0%20191.9,299.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,142.0%20321.8,217.0%20191.9,292.0%2062.0,217.0'%20fill='%23ffffff'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,142.0%20321.8,217.0%20191.9,292.0%2062.0,217.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='142.0'%20x2='40'%20y2='142.0'%20stroke='%23b9c6ee'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,181.0%20191.9,256.0%20191.9,263.0%2062.0,188.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,256.0%20321.8,181.0%20321.8,188.0%20191.9,263.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,106.0%20321.8,181.0%20191.9,256.0%2062.0,181.0'%20fill='%23ffffff'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,106.0%20321.8,181.0%20191.9,256.0%2062.0,181.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='106.0'%20x2='40'%20y2='106.0'%20stroke='%23b9c6ee'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,145.0%20191.9,220.0%20191.9,227.0%2062.0,152.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,220.0%20321.8,145.0%20321.8,152.0%20191.9,227.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%230f1b2d'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,70.0%20321.8,145.0%20191.9,220.0%2062.0,145.0'%20fill='%23ffffff'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,70.0%20321.8,145.0%20191.9,220.0%2062.0,145.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.15'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='70.0'%20x2='40'%20y2='70.0'%20stroke='%23b9c6ee'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cpolygon%20points='62.0,109.0%20191.9,184.0%20191.9,191.0%2062.0,116.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%231e3aff'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,184.0%20321.8,109.0%20321.8,116.0%20191.9,191.0'%20fill='%23ffffff'%20fill-opacity='0.94'%20stroke='%231e3aff'%20stroke-width='0.9'/%3E%3Cpolygon%20points='191.9,34.0%20321.8,109.0%20191.9,184.0%2062.0,109.0'%20fill='%23ffffff'%20fill-opacity='0.80'%20stroke='none'/%3E%3Cpolygon%20points='191.9,34.0%20321.8,109.0%20191.9,184.0%2062.0,109.0'%20fill='none'%20stroke='%231e3aff'%20stroke-width='2.2'%20stroke-linejoin='round'/%3E%3Cline%20x1='183.9'%20y1='34.0'%20x2='40'%20y2='34.0'%20stroke='%23b9c6ee'%20stroke-width='1'%20stroke-dasharray='3%204'/%3E%3Cline%20x1='40'%20y1='34.0'%20x2='40'%20y2='407.0'%20stroke='%230f1b2d'%20stroke-width='1.2'/%3E%3Cpolyline%20points='36,44.0%2040,34.0%2044,44.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.2'/%3E%3Cpolyline%20points='36,397.0%2040,407.0%2044,397.0'%20fill='none'%20stroke='%230f1b2d'%20stroke-width='1.2'/%3E%3Ctext%20x='26'%20y='220.5'%20fill='%230f1b2d'%20font-family='ui-monospace,SFMono-Regular,Menlo,monospace'%20font-size='10.5'%20text-anchor='middle'%20letter-spacing='2'%20transform='rotate%28-90%2026%20220.5%29'%3E7%20LAYERS%3C/text%3E%3Cline%20x1='62.0'%20y1='433.0'%20x2='321.8'%20y2='433.0'%20stroke='%23b9c6ee'%20stroke-width='1.1'/%3E%3Cline%20x1='62.0'%20y1='428.0'%20x2='62.0'%20y2='438.0'%20stroke='%23b9c6ee'%20stroke-width='1.1'/%3E%3Cline%20x1='321.8'%20y1='428.0'%20x2='321.8'%20y2='438.0'%20stroke='%23b9c6ee'%20stroke-width='1.1'/%3E%3Cline%20x1='10'%20y1='10'%20x2='23'%20y2='10'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3Cline%20x1='10'%20y1='10'%20x2='10'%20y2='23'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='10'%20x2='360'%20y2='10'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='10'%20x2='373'%20y2='23'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3Cline%20x1='10'%20y1='455'%20x2='23'%20y2='455'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3Cline%20x1='10'%20y1='455'%20x2='10'%20y2='442'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='455'%20x2='360'%20y2='455'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3Cline%20x1='373'%20y1='455'%20x2='373'%20y2='442'%20stroke='%23b9c6ee'%20stroke-width='1.2'/%3E%3C/svg%3E");
  --component-cta-code-color: var(--primitive-color-blue-200);
  --component-layer-utilities-bg: var(--primitive-color-blue-50);
  --component-layer-utilities-color: var(--primitive-color-blue-600);
  --component-layer-organisms-color: var(--primitive-color-green-700);
  --component-layer-molecules-color: var(--primitive-color-blue-700);
  --component-layer-atoms-color: var(--primitive-color-blue-600);
  --component-layer-tokens-color: var(--primitive-color-green-700);
  --component-layer-base-color: var(--primitive-color-gray-600);
  --component-layer-reset-color: var(--primitive-color-gray-600);
  --component-docs-badge-layout-bg: var(--primitive-color-gray-100);
  --component-docs-badge-layout-color: var(--primitive-color-ink);
  --component-docs-badge-layout-border: var(--primitive-color-gray-300);
  --component-docs-badge-atom-bg: var(--primitive-color-blue-50);
  --component-docs-badge-atom-color: var(--primitive-color-blue-800);
  --component-docs-badge-atom-border: var(--primitive-color-blue-200);
  --component-docs-badge-molecule-bg: var(--primitive-color-blue-200);
  --component-docs-badge-molecule-color: var(--primitive-color-blue-900);
  --component-docs-badge-molecule-border: var(--primitive-color-blue-300);
  --component-docs-badge-organism-bg: var(--primitive-color-blue-600);
  --component-docs-badge-organism-color: oklch(1 0 0);
  --component-docs-badge-organism-border: var(--primitive-color-blue-600);
  --component-button-disabled-filled-color: var(--semantic-color-text-inverse);
  --component-token-primitive-badge-bg: var(--primitive-color-gray-50);
  --component-token-primitive-badge-color: var(--primitive-color-gray-700);
  --component-token-primitive-badge-border: var(--primitive-color-gray-300);
  --component-token-theme-badge-bg: var(--primitive-color-blue-50);
  --component-token-theme-badge-color: var(--primitive-color-blue-700);
  --component-token-theme-badge-border: var(--primitive-color-blue-200);
  --component-token-semantic-badge-bg: var(--primitive-color-green-50);
  --component-token-semantic-badge-color: var(--primitive-color-green-700);
  --component-token-semantic-badge-border: var(--primitive-color-green-200);
  --component-token-component-badge-bg: var(--primitive-color-blue-100);
  --component-token-component-badge-color: var(--primitive-color-blue-800);
  --component-token-component-badge-border: var(--primitive-color-blue-300);
  --component-token-component-step-color: oklch(1 0 0);
  --component-token-rule-bg: var(--primitive-color-blue-50);
  --component-token-rule-border-color: var(--semantic-color-border-strong);
  --component-token-rule-icon-bg: var(--semantic-color-primary);
  --component-token-rule-icon-color: oklch(1 0 0);
  --semantic-color-bg-primary: oklch(1 0 0);
  --semantic-color-bg-secondary: var(--primitive-color-gray-50);
  --semantic-color-bg-tertiary: var(--primitive-color-blue-50);
  --semantic-color-border-subtle: var(--primitive-color-gray-200);
  --semantic-color-border-default: var(--primitive-color-gray-300);
  --semantic-color-border-strong: var(--primitive-color-ink);
  --component-feature-card-bg: var(--semantic-color-bg-primary);
  --component-feature-card-border-color: var(--semantic-color-border-default);
  --component-theme-card-bg: var(--semantic-color-bg-primary);
  --component-theme-card-border-color: var(--semantic-color-border-default);
  --component-layer-item-bg: var(--semantic-color-bg-primary);
  --component-layer-item-border-color: var(--semantic-color-border-default);
  --component-token-layer-bg: var(--semantic-color-bg-primary);
  --component-token-layer-border-color: var(--semantic-color-border-default);
  --component-code-snippet-border-color: var(--semantic-color-border-strong);
  --component-cta-bg: var(--semantic-bg-grid), linear-gradient( var(--primitive-color-gray-900), var(--primitive-color-gray-900) );
  --component-footer-bg: var(--semantic-color-bg-secondary);
  --component-footer-border-color: var(--semantic-color-border-strong);
  --semantic-shadow-hard-color: var(--primitive-color-ink);
  --component-cta-border-block-width: 0;
  --component-cta-border-color: var(--semantic-color-border-strong);
  --component-pill-dark-bg: var(--primitive-color-gray-900);
  --component-pill-dark-color: oklch(1 0 0);
  --component-pill-dark-border-color: var(--primitive-color-gray-900);
}

@font-face {
  font-family: "Google-Space-Grotesk--light";
  src: url("../fonts/google-space-grotesk/SpaceGrotesk-Light.eot?") format("eot"), url("../fonts/google-space-grotesk/SpaceGrotesk-Light.woff2") format("woff2"), url("../fonts/google-space-grotesk/SpaceGrotesk-Light.woff") format("woff"), url("../fonts/google-space-grotesk/SpaceGrotesk-Light.ttf") format("truetype"), url("../fonts/google-space-grotesk/SpaceGrotesk-Light.svg#Google-Space-Grotesk--light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google-Space-Grotesk--regular";
  src: url("../fonts/google-space-grotesk/SpaceGrotesk-Regular.eot?") format("eot"), url("../fonts/google-space-grotesk/SpaceGrotesk-Regular.woff2") format("woff2"), url("../fonts/google-space-grotesk/SpaceGrotesk-Regular.woff") format("woff"), url("../fonts/google-space-grotesk/SpaceGrotesk-Regular.ttf") format("truetype"), url("../fonts/google-space-grotesk/SpaceGrotesk-Regular.svg#Google-Space-Grotesk--regular") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google-Space-Grotesk--medium";
  src: url("../fonts/google-space-grotesk/SpaceGrotesk-Medium.eot?") format("eot"), url("../fonts/google-space-grotesk/SpaceGrotesk-Medium.woff2") format("woff2"), url("../fonts/google-space-grotesk/SpaceGrotesk-Medium.woff") format("woff"), url("../fonts/google-space-grotesk/SpaceGrotesk-Medium.ttf") format("truetype"), url("../fonts/google-space-grotesk/SpaceGrotesk-Medium.svg#Google-Space-Grotesk--medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google-Space-Grotesk--semibold";
  src: url("../fonts/google-space-grotesk/SpaceGrotesk-SemiBold.eot?") format("eot"), url("../fonts/google-space-grotesk/SpaceGrotesk-SemiBold.woff2") format("woff2"), url("../fonts/google-space-grotesk/SpaceGrotesk-SemiBold.woff") format("woff"), url("../fonts/google-space-grotesk/SpaceGrotesk-SemiBold.ttf") format("truetype"), url("../fonts/google-space-grotesk/SpaceGrotesk-SemiBold.svg#Google-Space-Grotesk--semibold") format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google-Space-Grotesk--bold";
  src: url("../fonts/google-space-grotesk/SpaceGrotesk-Bold.eot?") format("eot"), url("../fonts/google-space-grotesk/SpaceGrotesk-Bold.woff2") format("woff2"), url("../fonts/google-space-grotesk/SpaceGrotesk-Bold.woff") format("woff"), url("../fonts/google-space-grotesk/SpaceGrotesk-Bold.ttf") format("truetype"), url("../fonts/google-space-grotesk/SpaceGrotesk-Bold.svg#Google-Space-Grotesk--bold") format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@layer syx.reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }
  ::-moz-selection {
    color: var(--reset-selection-color);
    background-color: var(--reset-selection-bg);
  }
  ::selection {
    color: var(--reset-selection-color);
    background-color: var(--reset-selection-bg);
  }
  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    font: var(--reset-html-font);
  }
  body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--reset-body-font-size);
    line-height: var(--reset-body-line-height);
    color: var(--reset-body-color);
    text-align: left;
    background-color: var(--reset-body-background-color);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--reset-h-font-family);
    margin: 0;
  }
  h1 {
    font-size: var(--reset-h1-size);
    line-height: var(--reset-h1-line-height);
    letter-spacing: var(--reset-h1-letter-spacing);
  }
  h2 {
    font-size: var(--reset-h2-size);
    line-height: var(--reset-h2-line-height);
    letter-spacing: var(--reset-h2-letter-spacing);
  }
  h3 {
    font-size: var(--reset-h3-size);
    line-height: var(--reset-h3-line-height);
    letter-spacing: var(--reset-h3-letter-spacing);
  }
  h4 {
    font-size: var(--reset-h4-size);
    line-height: var(--reset-h4-line-height);
    letter-spacing: var(--reset-h4-letter-spacing);
  }
  h5 {
    font-size: var(--reset-h5-size);
    line-height: var(--reset-h5-line-height);
    letter-spacing: var(--reset-h5-letter-spacing);
  }
  h6 {
    font-size: var(--reset-h6-size);
    line-height: var(--reset-h6-line-height);
    letter-spacing: var(--reset-h6-letter-spacing);
  }
  strong,
  em {
    font-family: var(--font-bold);
  }
  a {
    text-decoration: none;
    -webkit-text-decoration-skip: objects;
  }
  a:focus {
    box-shadow: var(--semantic-shadow-none);
  }
  a:active {
    cursor: pointer;
  }
  button {
    overflow: visible;
    text-transform: none;
  }
  button:focus {
    box-shadow: var(--semantic-shadow-none);
  }
  ul {
    list-style: none;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(--semantic-font-family-mono);
    font-size: 1em;
  }
  pre {
    overflow: auto;
    -ms-overflow-style: scrollbar;
  }
  img {
    border-style: none;
  }
  svg:not(:root) {
    overflow: hidden;
  }
  video {
    -o-object-fit: cover;
       object-fit: cover;
  }
  table {
    border-collapse: collapse;
  }
  caption {
    padding-right: 1rem;
    padding-left: 1rem;
    text-align: left;
    caption-side: bottom;
  }
  th {
    font-family: var(--font-bold);
    text-align: inherit;
  }
  small {
    font-size: 80%;
  }
  sub {
    position: relative;
    top: -0.25rem;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
  }
  sup {
    position: relative;
    top: -0.5rem;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
  }
  dfn {
    font-style: italic;
  }
  abbr[title],
  abbr[data-original-title] {
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
    cursor: help;
    border-bottom: 0;
  }
  blockquote {
    margin-bottom: 1rem;
  }
  address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
  }
  hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
  }
  map {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  fieldset {
    margin: 0;
    padding: 0;
    min-width: 0;
    border: 0;
  }
  legend {
    margin: 0 0 0.5rem;
    padding: 1rem 0 0;
    border-width: 0;
    width: 100%;
    max-width: 100%;
    font-size: 1.5rem;
    line-height: 1.5rem;
    text-align: left;
    white-space: normal;
  }
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    text-transform: none;
  }
  select::-ms-expand {
    display: none;
  }
  input {
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    overflow: visible;
    line-height: inherit;
  }
  input[type=radio], input[type=checkbox] {
    padding: 0;
    box-sizing: border-box;
  }
  input[type=date], input[type=time], input[type=datetime-local], input[type=month] {
    -webkit-appearance: listbox;
    -moz-appearance: listbox;
         appearance: listbox;
  }
  input[type=password]::-ms-reveal {
    display: none;
  }
  input:-webkit-autofill {
    -webkit-transition: background-color 600000s 0s, color 600000s 0s;
    transition: background-color 600000s 0s, color 600000s 0s;
  }
  [type=reset],
  [type=button],
  [type=submit],
  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    appearance: button;
  }
  ::-webkit-file-upload-button {
    font: inherit;
  }
  [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto;
  }
  [type=search] {
    outline-offset: -2px;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
  }
  [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  optgroup {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
  }
  textarea {
    margin: 0;
    padding-top: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    overflow: auto;
    resize: vertical;
    min-height: 13rem;
    font-size: inherit;
    line-height: inherit;
    border-radius: var(--component-form-field-border-radius);
  }
  output {
    display: inline-block;
  }
  summary {
    display: list-item;
    cursor: pointer;
  }
  template {
    display: none;
  }
  progress {
    vertical-align: baseline;
  }
  [hidden] {
    display: none;
  }
  [hidden=false] {
    display: block;
  }
}
@layer syx.base {
  body {
    counter-reset: syx-section;
  }
  ul:not([class*=atom-list--reset]), ol:not([class*=atom-list--reset]) {
    padding-left: var(--layout-pad-4);
    margin-bottom: var(--layout-gap-3);
  }
  ul:not([class*=list-style-none]) {
    list-style-type: disc;
  }
  ul:not([class*=list-style-none]) ul {
    list-style-type: circle;
  }
  ol:not([class*=list-style-none]) {
    list-style-type: decimal;
  }
  li {
    margin-bottom: var(--layout-gap-1);
  }
  table {
    width: 100%;
    margin-bottom: var(--layout-gap-4);
    border-collapse: collapse;
  }
  table th, table td {
    padding: var(--layout-pad-2) var(--layout-pad-3);
    border-bottom: var(--component-table-base-border-width) solid var(--component-table-base-border-color);
    text-align: left;
  }
  table th {
    font-family: var(--semantic-font-family-heading);
    color: var(--component-table-base-th-color);
    border-bottom: var(--component-table-base-th-border-width) solid var(--component-table-base-th-border-color);
    background-color: var(--component-table-base-th-bg);
  }
  table td {
    color: var(--semantic-color-text-primary);
  }
  table tbody tr:hover {
    background-color: var(--component-table-base-state-hover-bg);
  }
  p {
    margin-bottom: var(--layout-gap-3);
    line-height: var(--primitive-line-height-relaxed);
    color: var(--semantic-color-text-primary);
  }
  a:not([class*=atom-btn]) {
    color: var(--semantic-color-primary);
    text-decoration: none;
    font-weight: var(--primitive-font-weight-medium);
    transition: color 0.2s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    a:not([class*=atom-btn]) {
      transition: none;
    }
  }
  a:not([class*=atom-btn]):hover {
    color: var(--semantic-color-link-hover);
    text-decoration: underline;
  }
  blockquote {
    border-left: var(--component-blockquote-border-width) var(--component-blockquote-border-style) var(--component-blockquote-border-color);
    padding-left: var(--layout-pad-4);
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    color: var(--component-blockquote-color);
    background: var(--component-blockquote-bg);
    padding: var(--layout-pad-3);
    border-radius: var(--component-blockquote-border-radius);
  }
  hr {
    border: 0;
    height: var(--component-hr-thickness);
    background: var(--component-hr-color);
    margin: var(--layout-gap-5) 0;
  }
  code {
    background: var(--component-code-inline-bg);
    color: var(--component-code-inline-color);
    padding: 0.2em 0.4em;
    border-radius: var(--component-code-inline-border-radius);
    font-size: var(--component-code-inline-font-size);
    font-family: var(--semantic-font-family-mono);
  }
  pre {
    background: var(--component-code-bg);
    color: var(--component-code-color);
    padding: var(--layout-pad-3);
    border-radius: var(--component-code-border-radius);
    overflow-x: auto;
    margin-bottom: var(--layout-gap-3);
  }
  pre code {
    background: transparent;
    color: inherit;
    padding: 0;
  }
}
@layer syx.utilities {
  .syx-icon {
    display: inline-block;
  }
  .syx-icon:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  .syx-icon--facebook-primary:before {
    background: var(--icon-rrss-facebook) center center / contain no-repeat transparent;
  }
  .syx-icon--github-primary:before {
    background: var(--icon-rrss-github) center center / contain no-repeat transparent;
  }
  .syx-icon--instagram-primary:before {
    background: var(--icon-rrss-instagram) center center / contain no-repeat transparent;
  }
  .syx-icon--linkedin-primary:before {
    background: var(--icon-rrss-linkedin) center center / contain no-repeat transparent;
  }
  .syx-icon--pinterest-primary:before {
    background: var(--icon-rrss-pinterest) center center / contain no-repeat transparent;
  }
  .syx-icon--snapchat-primary:before {
    background: var(--icon-rrss-snapchat) center center / contain no-repeat transparent;
  }
  .syx-icon--twitter-primary:before {
    background: var(--icon-rrss-twitter) center center / contain no-repeat transparent;
  }
  .syx-icon--whatsapp-primary:before {
    background: var(--icon-rrss-whatsapp) center center / contain no-repeat transparent;
  }
  .syx-icon--youtube-primary:before {
    background: var(--icon-rrss-youtube) center center / contain no-repeat transparent;
  }
}
@layer syx.utilities {
  .syx-font-size-1 {
    font-size: var(--font-size-1);
    line-height: var(--primitive-line-height-normal);
  }
  .syx-font-size-2 {
    font-size: var(--font-size-2);
    line-height: var(--primitive-line-height-normal);
  }
  @media (min-width: 48em) {
    .syx-font-size-2 {
      font-size: calc(10% + var(--font-size-2));
    }
  }
  .syx-font-size-3 {
    font-size: var(--font-size-3);
    line-height: var(--primitive-line-height-snug);
  }
  @media (min-width: 48em) {
    .syx-font-size-3 {
      font-size: calc(20% + var(--font-size-3));
    }
  }
  .syx-font-size-4 {
    font-size: var(--font-size-4);
    line-height: var(--primitive-line-height-snug);
  }
  @media (min-width: 48em) {
    .syx-font-size-4 {
      font-size: calc(30% + var(--font-size-4));
    }
  }
  .syx-font-size-5 {
    font-size: var(--font-size-5);
    line-height: var(--primitive-line-height-tight);
  }
  @media (min-width: 48em) {
    .syx-font-size-5 {
      font-size: calc(50% + var(--font-size-5));
    }
  }
}
@layer syx.utilities {
  .syx-size-1 {
    height: var(--dimension-1);
    width: var(--dimension-1);
  }
  .syx-size-2 {
    height: var(--dimension-2);
    width: var(--dimension-2);
  }
  .syx-size-3 {
    height: var(--dimension-3);
    width: var(--dimension-3);
  }
  .syx-size-4 {
    height: var(--dimension-4);
    width: var(--dimension-4);
  }
  .syx-size-5 {
    height: var(--dimension-5);
    width: var(--dimension-5);
  }
}
@layer syx.utilities {
  .syx-font-bold {
    font-family: var(--semantic-font-family-primary-bold);
    font-weight: var(--primitive-font-weight-bold);
  }
  .syx-font-medium {
    font-weight: var(--primitive-font-weight-medium);
  }
  .syx-font-color-black {
    color: var(--primitive-color-black);
  }
  .syx-font-color-white {
    color: var(--primitive-color-white);
  }
  .syx-font-color-blue-facebook {
    color: var(--primitive-color-facebook);
  }
  .syx-font-color-blue-instagram {
    color: var(--primitive-color-instagram-blue);
  }
  .syx-font-color-blue-twitter {
    color: var(--primitive-color-twitter);
  }
  .syx-font-color-green-whatsapp {
    color: var(--primitive-color-whatsapp-green);
  }
  .syx-font-color-purple-instagram {
    color: var(--primitive-color-instagram-purple);
  }
  .syx-font-color-primary {
    color: var(--semantic-color-primary);
  }
  .syx-font-color-secondary {
    color: var(--semantic-color-secondary);
  }
  .syx-font-color-tertiary {
    color: var(--semantic-color-tertiary);
  }
  .syx-font-color-quaternary {
    color: var(--semantic-color-quaternary);
  }
  .syx-font-color-quinary {
    color: var(--semantic-color-quinary);
  }
  .syx-font-weight-1 {
    font-family: var(--font-weight-1);
  }
  .syx-font-weight-2 {
    font-family: var(--font-weight-2);
  }
  .syx-font-scope-1 {
    font-size: var(--scope-1);
    line-height: var(--primitive-line-height-normal);
  }
  .syx-font-scope-2 {
    font-size: var(--scope-2);
    line-height: var(--primitive-line-height-normal);
  }
  @media (min-width: 48em) {
    .syx-font-scope-2 {
      font-size: calc(10% + var(--scope-2));
    }
  }
  .syx-font-scope-3 {
    font-size: var(--scope-3);
    line-height: var(--primitive-line-height-snug);
  }
  @media (min-width: 48em) {
    .syx-font-scope-3 {
      font-size: calc(20% + var(--scope-3));
    }
  }
  .syx-font-scope-4 {
    font-size: var(--scope-4);
    line-height: var(--primitive-line-height-snug);
  }
  @media (min-width: 48em) {
    .syx-font-scope-4 {
      font-size: calc(30% + var(--scope-4));
    }
  }
  .syx-font-scope-5 {
    font-size: var(--scope-5);
    line-height: var(--primitive-line-height-tight);
  }
  @media (min-width: 48em) {
    .syx-font-scope-5 {
      font-size: calc(50% + var(--scope-5));
    }
  }
}
@layer syx.utilities {
  .syx-bg-auto {
    background-size: auto;
  }
  .syx-bg-cover {
    background-size: cover;
  }
  .syx-bg-contain {
    background-size: contain;
  }
  .syx-bg-white {
    background-color: var(--semantic-color-bg-primary);
  }
  .syx-bg-dark {
    background-color: var(--primitive-color-gray-900);
  }
  .syx-bg-gray-50 {
    background-color: var(--semantic-color-bg-secondary);
  }
  .syx-bg-gray-100 {
    background-color: var(--semantic-color-bg-tertiary);
  }
  .syx-bg-gray-200 {
    background-color: var(--semantic-color-border-subtle);
  }
  .syx-bg-color-black {
    background-color: var(--primitive-color-black);
  }
  .syx-bg-color-white {
    background-color: var(--primitive-color-white);
  }
  .syx-bg-color-blue-facebook {
    background-color: var(--primitive-color-facebook);
  }
  .syx-bg-color-blue-instagram {
    background-color: var(--primitive-color-instagram-blue);
  }
  .syx-bg-color-blue-twitter {
    background-color: var(--primitive-color-twitter);
  }
  .syx-bg-color-green-whatsapp {
    background-color: var(--primitive-color-whatsapp-green);
  }
  .syx-bg-color-green-whatsapp-drk-1 {
    background-color: var(--primitive-color-whatsapp-green-dark);
  }
  .syx-bg-color-purple-instagram {
    background-color: var(--primitive-color-instagram-purple);
  }
  @media (max-width: 37.5em) {
    .syx-bg-color-transparent-mo {
      background-color: transparent;
    }
  }
  @media (min-width: 48em) {
    .syx-bg-color-transparent-sm {
      background-color: transparent;
    }
  }
  @media (min-width: 64em) {
    .syx-bg-color-transparent-md {
      background-color: transparent;
    }
  }
  @media (min-width: 80em) {
    .syx-bg-color-transparent-lg {
      background-color: transparent;
    }
  }
  .syx-bg-color-primary {
    background-color: var(--semantic-color-primary);
  }
  .syx-bg-color-primary-lt-1 {
    background-color: var(--semantic-color-bg-secondary);
  }
  .syx-bg-color-secondary {
    background-color: var(--semantic-color-secondary);
  }
  .syx-bg-color-secondary-lt-1 {
    background-color: var(--semantic-color-bg-tertiary);
  }
  .syx-bg-color-tertiary {
    background-color: var(--semantic-color-tertiary);
  }
  .syx-bg-color-quaternary {
    background-color: var(--semantic-color-quaternary);
  }
  .syx-bg-color-quinary {
    background-color: var(--semantic-color-quinary);
  }
}
@layer syx.base {
  .layout-grid {
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--layout-pad-1);
    padding-left: var(--layout-pad-1);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr;
    max-width: var(--layout-max-width);
    gap: var(--layout-gap-1);
  }
  @media (min-width: 48em) {
    .layout-grid {
      padding-right: var(--layout-pad-2);
      padding-left: var(--layout-pad-2);
      gap: var(--layout-gap-2);
    }
  }
  @media (min-width: 64em) {
    .layout-grid {
      padding-right: var(--layout-pad-3);
      padding-left: var(--layout-pad-3);
      gap: var(--layout-gap-3);
    }
  }
  @media (min-width: 80em) {
    .layout-grid {
      padding-right: var(--layout-pad-4);
      padding-left: var(--layout-pad-4);
      gap: var(--layout-gap-4);
    }
  }
  @media (min-width: 90em) {
    .layout-grid {
      padding-right: var(--layout-pad-5);
      padding-left: var(--layout-pad-5);
      gap: var(--layout-gap-5);
    }
  }
  .layout-grid > * {
    word-break: normal;
    overflow-wrap: break-word;
  }
  .layout-grid__col-xs-1 {
    grid-column: auto/span 1;
  }
  .layout-grid__col-xs-2 {
    grid-column: auto/span 2;
  }
  .layout-grid__col-xs-3 {
    grid-column: auto/span 3;
  }
  .layout-grid__col-xs-4 {
    grid-column: auto/span 4;
  }
  .layout-grid__col-xs-5 {
    grid-column: auto/span 5;
  }
  .layout-grid__col-xs-6 {
    grid-column: auto/span 6;
  }
  .layout-grid__col-xs-7 {
    grid-column: auto/span 7;
  }
  .layout-grid__col-xs-8 {
    grid-column: auto/span 8;
  }
  .layout-grid__col-xs-9 {
    grid-column: auto/span 9;
  }
  .layout-grid__col-xs-10 {
    grid-column: auto/span 10;
  }
  .layout-grid__col-xs-11 {
    grid-column: auto/span 11;
  }
  .layout-grid__col-xs-12 {
    grid-column: auto/span 12;
  }
  @media (min-width: 48em) {
    .layout-grid__col-sm-1 {
      grid-column: auto/span 1;
    }
    .layout-grid__col-sm-2 {
      grid-column: auto/span 2;
    }
    .layout-grid__col-sm-3 {
      grid-column: auto/span 3;
    }
    .layout-grid__col-sm-4 {
      grid-column: auto/span 4;
    }
    .layout-grid__col-sm-5 {
      grid-column: auto/span 5;
    }
    .layout-grid__col-sm-6 {
      grid-column: auto/span 6;
    }
    .layout-grid__col-sm-7 {
      grid-column: auto/span 7;
    }
    .layout-grid__col-sm-8 {
      grid-column: auto/span 8;
    }
    .layout-grid__col-sm-9 {
      grid-column: auto/span 9;
    }
    .layout-grid__col-sm-10 {
      grid-column: auto/span 10;
    }
    .layout-grid__col-sm-11 {
      grid-column: auto/span 11;
    }
    .layout-grid__col-sm-12 {
      grid-column: auto/span 12;
    }
  }
  @media (min-width: 64em) {
    .layout-grid__col-md-1 {
      grid-column: auto/span 1;
    }
    .layout-grid__col-md-2 {
      grid-column: auto/span 2;
    }
    .layout-grid__col-md-3 {
      grid-column: auto/span 3;
    }
    .layout-grid__col-md-4 {
      grid-column: auto/span 4;
    }
    .layout-grid__col-md-5 {
      grid-column: auto/span 5;
    }
    .layout-grid__col-md-6 {
      grid-column: auto/span 6;
    }
    .layout-grid__col-md-7 {
      grid-column: auto/span 7;
    }
    .layout-grid__col-md-8 {
      grid-column: auto/span 8;
    }
    .layout-grid__col-md-9 {
      grid-column: auto/span 9;
    }
    .layout-grid__col-md-10 {
      grid-column: auto/span 10;
    }
    .layout-grid__col-md-11 {
      grid-column: auto/span 11;
    }
    .layout-grid__col-md-12 {
      grid-column: auto/span 12;
    }
  }
  @media (min-width: 80em) {
    .layout-grid__col-lg-1 {
      grid-column: auto/span 1;
    }
    .layout-grid__col-lg-2 {
      grid-column: auto/span 2;
    }
    .layout-grid__col-lg-3 {
      grid-column: auto/span 3;
    }
    .layout-grid__col-lg-4 {
      grid-column: auto/span 4;
    }
    .layout-grid__col-lg-5 {
      grid-column: auto/span 5;
    }
    .layout-grid__col-lg-6 {
      grid-column: auto/span 6;
    }
    .layout-grid__col-lg-7 {
      grid-column: auto/span 7;
    }
    .layout-grid__col-lg-8 {
      grid-column: auto/span 8;
    }
    .layout-grid__col-lg-9 {
      grid-column: auto/span 9;
    }
    .layout-grid__col-lg-10 {
      grid-column: auto/span 10;
    }
    .layout-grid__col-lg-11 {
      grid-column: auto/span 11;
    }
    .layout-grid__col-lg-12 {
      grid-column: auto/span 12;
    }
  }
  .layout-grid__nested {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr;
    gap: var(--layout-gap-1);
    padding-right: 0;
    padding-left: 0;
  }
  @media (min-width: 48em) {
    .layout-grid__nested {
      gap: var(--layout-gap-2);
    }
  }
  @media (min-width: 64em) {
    .layout-grid__nested {
      gap: var(--layout-gap-3);
    }
  }
  @media (min-width: 80em) {
    .layout-grid__nested {
      gap: var(--layout-gap-4);
    }
  }
  @media (min-width: 90em) {
    .layout-grid__nested {
      gap: var(--layout-gap-5);
    }
  }
  .layout-grid--is-fs {
    padding-right: 0;
    padding-left: 0;
  }
  .layout-grid--no-padding, .layout-grid--is-edge2edge {
    padding-right: 0;
    padding-left: 0;
  }
  .layout-grid--no-gap {
    gap: 0;
  }
  .layout-grid--align-center {
    align-items: center;
  }
  .layout-grid--justify-center {
    justify-items: center;
  }
}
@layer syx.atoms {
  .atom-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .atom-breadcrumb__item {
    display: flex;
    align-items: center;
    font-size: var(--semantic-font-size-body-small);
  }
  .atom-breadcrumb__item:not(:last-child)::after {
    content: "/";
    color: var(--semantic-color-border-subtle);
    margin: 0 var(--semantic-space-inline-xs);
    font-size: 0.8em;
  }
  .atom-breadcrumb__item:last-child .atom-breadcrumb__link,
  .atom-breadcrumb__item:last-child span {
    color: var(--semantic-color-text-tertiary);
    font-weight: var(--semantic-font-weight-medium);
    pointer-events: none;
  }
  .atom-breadcrumb__link {
    color: var(--semantic-color-primary-text);
    text-decoration: none;
    transition: color var(--semantic-duration-fast) var(--semantic-easing-standard), -webkit-text-decoration var(--semantic-duration-fast) var(--semantic-easing-standard);
    transition: color var(--semantic-duration-fast) var(--semantic-easing-standard), text-decoration var(--semantic-duration-fast) var(--semantic-easing-standard);
    transition: color var(--semantic-duration-fast) var(--semantic-easing-standard), text-decoration var(--semantic-duration-fast) var(--semantic-easing-standard), -webkit-text-decoration var(--semantic-duration-fast) var(--semantic-easing-standard);
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-breadcrumb__link {
      transition: none;
    }
  }
  .atom-breadcrumb__link {
    font-size: var(--semantic-font-size-body-small);
  }
  .atom-breadcrumb__link:hover {
    color: var(--semantic-color-primary-text);
    text-decoration: underline;
  }
  .atom-breadcrumb__link:focus-visible {
    outline: var(--semantic-focus-ring-width) var(--semantic-focus-ring-style) var(--semantic-focus-ring-color);
    outline-offset: var(--semantic-focus-ring-offset);
    border-radius: 2px;
  }
  .atom-breadcrumb__link[aria-current=page] {
    color: var(--semantic-color-text-tertiary);
    font-weight: var(--semantic-font-weight-medium);
    pointer-events: none;
  }
}
@layer syx.atoms {
  .atom-btn {
    border: var(--component-button-border-width) var(--component-button-border-style);
    overflow-wrap: break-word;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .atom-btn, .atom-btn:hover, .atom-btn:focus, .atom-btn:visited, .atom-btn:active {
    text-decoration: none;
  }
  .atom-btn {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    text-align: center;
    box-shadow: var(--component-button-shadow);
    cursor: pointer;
    font-family: var(--component-button-font-family);
    font-size: var(--component-button-font-size);
    line-height: var(--component-button-line-height);
    transition: border-color var(--component-button-transition-duration) var(--component-button-transition-easing), color var(--component-button-transition-duration) var(--component-button-transition-easing), background-color var(--component-button-transition-duration) var(--component-button-transition-easing), transform var(--component-button-transition-duration-active, 0.1s) var(--component-button-transition-easing);
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-btn {
      transition: none;
    }
  }
  .atom-btn:active {
    transform: translate(var(--component-button-active-offset-x), var(--component-button-active-offset-y));
    box-shadow: var(--component-button-shadow-active);
  }
  .atom-btn--primary {
    border-color: var(--component-button-primary-color);
  }
  .atom-btn--primary.atom-btn--filled {
    background-color: var(--component-button-primary-filled-bg);
    color: var(--component-button-primary-filled-color);
  }
  .atom-btn--primary:not(.atom-btn--filled) {
    background-color: transparent;
    color: var(--component-button-primary-color);
  }
  .atom-btn--secondary {
    border-color: var(--component-button-secondary-color);
  }
  .atom-btn--secondary.atom-btn--filled {
    background-color: var(--component-button-secondary-filled-bg);
    color: var(--component-button-secondary-filled-color);
  }
  .atom-btn--secondary:not(.atom-btn--filled) {
    background-color: transparent;
    color: var(--component-button-secondary-color);
  }
  .atom-btn--tertiary {
    border-color: var(--component-button-tertiary-color);
  }
  .atom-btn--tertiary.atom-btn--filled {
    background-color: var(--component-button-tertiary-filled-bg);
    color: var(--component-button-tertiary-filled-color);
  }
  .atom-btn--tertiary:not(.atom-btn--filled) {
    background-color: transparent;
    color: var(--component-button-tertiary-color);
  }
  .atom-btn--quaternary {
    border-color: var(--component-button-quaternary-color);
  }
  .atom-btn--quaternary.atom-btn--filled {
    background-color: var(--component-button-quaternary-filled-bg);
    color: var(--component-button-quaternary-filled-color);
  }
  .atom-btn--quaternary:not(.atom-btn--filled) {
    background-color: transparent;
    color: var(--component-button-quaternary-color);
  }
  .atom-btn--size-sm {
    padding: var(--component-button-size-sm);
    font-size: var(--component-button-font-size-sm);
    line-height: var(--component-button-size-sm);
  }
  .atom-btn--size-md {
    padding: var(--component-button-size-md);
    font-size: var(--component-button-font-size-md);
    line-height: var(--component-button-size-md);
  }
  .atom-btn--size-lg {
    padding: var(--component-button-size-lg);
    font-size: var(--component-button-font-size-lg);
    line-height: var(--component-button-size-lg);
  }
  .atom-btn:hover:not(:disabled) {
    cursor: pointer;
    box-shadow: var(--component-button-shadow-hover);
  }
  .atom-btn:hover:not(:disabled).atom-btn--primary {
    border-color: var(--component-button-primary-border-hover);
    background-color: var(--component-button-primary-bg-hover);
    color: var(--component-button-primary-color-hover);
  }
  .atom-btn:hover:not(:disabled).atom-btn--primary.atom-btn--filled {
    background-color: var(--component-button-primary-filled-bg-hover);
    border-color: var(--component-button-primary-filled-border-hover);
    color: var(--component-button-primary-filled-color-hover);
  }
  .atom-btn:hover:not(:disabled).atom-btn--secondary {
    border-color: var(--component-button-secondary-border-hover);
    background-color: var(--component-button-secondary-bg-hover);
    color: var(--component-button-secondary-color-hover);
  }
  .atom-btn:hover:not(:disabled).atom-btn--secondary.atom-btn--filled {
    background-color: var(--component-button-secondary-filled-bg-hover);
    border-color: var(--component-button-secondary-filled-border-hover);
    color: var(--component-button-secondary-filled-color-hover);
  }
  .atom-btn:hover:not(:disabled).atom-btn--tertiary {
    border-color: var(--component-button-tertiary-border-hover);
    background-color: var(--component-button-tertiary-bg-hover);
    color: var(--component-button-tertiary-color-hover);
  }
  .atom-btn:hover:not(:disabled).atom-btn--tertiary.atom-btn--filled {
    background-color: var(--component-button-tertiary-filled-bg-hover);
    border-color: var(--component-button-tertiary-filled-border-hover);
    color: var(--component-button-tertiary-filled-color-hover);
  }
  .atom-btn:hover:not(:disabled).atom-btn--quaternary {
    border-color: var(--component-button-quaternary-border-hover);
    background-color: var(--component-button-quaternary-bg-hover);
    color: var(--component-button-quaternary-color-hover);
  }
  .atom-btn:hover:not(:disabled).atom-btn--quaternary.atom-btn--filled {
    background-color: var(--component-button-quaternary-filled-bg-hover);
    border-color: var(--component-button-quaternary-filled-border-hover);
    color: var(--component-button-quaternary-filled-color-hover);
  }
  .atom-btn:focus:not(:disabled) {
    outline: 0;
  }
  .atom-btn:focus-visible:not(:disabled) {
    outline: var(--semantic-focus-ring-width) var(--semantic-focus-ring-style) var(--semantic-focus-ring-color);
  }
  .atom-btn:disabled {
    cursor: not-allowed;
    border-color: var(--component-button-disabled-border);
    color: var(--component-button-disabled-color);
  }
  .atom-btn.atom-btn--circle {
    border-radius: var(--component-button-border-radius-circle);
  }
  .atom-btn.atom-btn--filled:disabled {
    background-color: var(--component-button-disabled-bg);
    border-color: var(--component-button-disabled-bg);
    color: var(--component-button-disabled-filled-color);
  }
  .atom-btn:not(.atom-btn--circle) {
    border-radius: var(--component-button-border-radius);
  }
  .atom-btn--has-icon {
    justify-content: flex-start;
    gap: var(--component-button-size-md);
  }
  .atom-btn--has-icon .atom-icon {
    flex-shrink: 0;
    height: var(--component-icon-size-md);
    width: var(--component-icon-size-md);
  }
  .atom-btn--has-icon.atom-btn--size-sm {
    gap: var(--component-button-size-sm);
  }
  .atom-btn--has-icon.atom-btn--size-sm .atom-icon {
    height: var(--component-icon-size-sm);
    width: var(--component-icon-size-sm);
  }
  .atom-btn--has-icon.atom-btn--size-md {
    gap: var(--component-button-size-md);
  }
  .atom-btn--has-icon.atom-btn--size-md .atom-icon {
    height: var(--component-icon-size-md);
    width: var(--component-icon-size-md);
  }
  .atom-btn--has-icon.atom-btn--size-lg {
    gap: var(--component-button-size-lg);
  }
  .atom-btn--has-icon.atom-btn--size-lg .atom-icon {
    height: var(--component-icon-size-lg);
    width: var(--component-icon-size-lg);
  }
}
@layer syx.atoms {
  .atom-code {
    background: var(--component-code-bg);
    color: var(--component-code-color);
    font-family: var(--semantic-font-family-mono);
    font-size: var(--component-code-font-size);
    line-height: var(--component-code-line-height);
    padding: var(--semantic-space-layout-md);
    border-radius: var(--component-code-border-radius);
    overflow-x: auto;
    white-space: pre;
    border: var(--component-code-border-width) solid var(--component-code-border-color);
    margin-bottom: var(--semantic-space-layout-sm);
    display: block;
    max-width: 100%;
  }
  .atom-code__tag {
    color: var(--component-code-syntax-tag);
  }
  .atom-code__attr {
    color: var(--component-code-syntax-attr);
  }
  .atom-code__val {
    color: var(--component-code-syntax-val);
  }
  .atom-code__cmt {
    color: var(--component-code-syntax-comment);
    font-style: italic;
  }
  .atom-code__cls {
    color: var(--component-code-syntax-fn);
  }
  .atom-code--inline {
    display: inline;
    padding: 0.1em 0.4em;
    font-size: var(--component-code-inline-font-size);
    border-radius: var(--component-code-inline-border-radius);
    white-space: nowrap;
    background: var(--semantic-color-bg-tertiary);
    color: var(--semantic-color-text-primary);
    border: var(--component-code-inline-border-width) solid var(--component-code-inline-border-color);
  }
}
@layer syx.atoms {
  .atom-check {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .atom-check__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .atom-check__label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--component-check-gap);
    font-size: var(--component-form-field-font-size);
    color: var(--component-form-field-color);
    line-height: var(--component-form-field-line-height);
    cursor: pointer;
  }
  .atom-check__label::before {
    content: "";
    flex-shrink: 0;
    display: block;
    width: var(--component-check-size);
    height: var(--component-check-size);
    border: var(--component-check-border-width) solid var(--component-check-border-color);
    border-radius: var(--component-check-border-radius);
    background-color: var(--component-check-bg);
    transition: border-color var(--component-check-transition-duration) var(--component-form-field-transition-easing), background-color var(--component-check-transition-duration) var(--component-form-field-transition-easing), box-shadow var(--component-check-transition-duration) var(--component-form-field-transition-easing);
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-check__label::before {
      transition: none;
    }
  }
  .atom-check__label::after {
    content: "";
    position: absolute;
    top: 0;
    right: calc(100% - var(--component-check-size));
    bottom: 0;
    left: 0;
    margin: auto;
    width: var(--component-check-mark-width);
    height: var(--component-check-mark-height);
    border-right: var(--component-check-mark-thickness) solid transparent;
    border-bottom: var(--component-check-mark-thickness) solid transparent;
    transform: rotate(var(--component-check-mark-rotation)) scale(0) translateY(-1px);
    transform-origin: center;
    transition: transform var(--component-check-transition-duration) var(--component-check-transition-easing), border-color var(--component-check-transition-duration) var(--component-form-field-transition-easing);
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-check__label::after {
      transition: none;
    }
  }
  .atom-check__label:hover::before {
    border-color: var(--component-check-border-color-hover);
    box-shadow: var(--component-check-shadow-focus);
  }
  .atom-check__input:checked + .atom-check__label::before {
    background-color: var(--component-check-bg-checked);
    border-color: var(--component-check-bg-checked);
  }
  .atom-check__input:checked + .atom-check__label::after {
    border-right-color: var(--semantic-color-text-inverse);
    border-bottom-color: var(--semantic-color-text-inverse);
    transform: rotate(var(--component-check-mark-rotation)) scale(1) translateY(-1px);
  }
  .atom-check__input:focus-visible + .atom-check__label::before {
    outline: var(--semantic-focus-ring-width) var(--semantic-focus-ring-style) var(--component-form-field-border-focus);
    outline-offset: var(--semantic-focus-ring-offset);
  }
  .atom-check__input:disabled + .atom-check__label {
    opacity: var(--component-check-status-disabled-opacity);
    cursor: not-allowed;
  }
  .atom-check__input:disabled + .atom-check__label::before {
    background-color: var(--semantic-color-bg-tertiary);
    border-color: var(--semantic-color-border-subtle);
  }
}
@layer syx.atoms {
  .atom-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--component-feature-icon-size);
    width: var(--component-feature-icon-size);
    border-radius: var(--component-feature-icon-border-radius);
    border: var(--component-feature-icon-border-width) var(--component-feature-icon-border-style) var(--component-feature-icon-border-color);
    box-shadow: var(--component-feature-icon-shadow);
    flex-shrink: 0;
    transition: transform var(--semantic-duration-fast) var(--semantic-easing-standard), box-shadow var(--semantic-duration-fast) var(--semantic-easing-standard);
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-feature-icon {
      transition: none;
    }
  }
  .atom-feature-icon {
    background-color: var(--semantic-color-bg-secondary);
    color: var(--semantic-color-text-secondary);
  }
  .atom-feature-icon--primary {
    background-color: var(--semantic-color-primary-subtle, color-mix(in srgb, var(--semantic-color-primary) 12%, transparent));
    color: var(--semantic-color-primary-text);
  }
  .atom-feature-icon--molecule {
    background-color: var(--component-feature-icon-molecule-bg);
    color: var(--component-feature-icon-molecule-color);
  }
  .atom-feature-icon--organism {
    background-color: var(--component-feature-icon-organism-bg);
    color: var(--component-feature-icon-organism-color);
  }
  .atom-feature-icon--token {
    background-color: var(--component-feature-icon-token-bg);
    color: var(--component-feature-icon-token-color);
  }
  .atom-feature-icon--layer {
    background-color: var(--component-feature-icon-layer-bg);
    color: var(--component-feature-icon-layer-color);
  }
  .atom-feature-icon--mixin {
    background-color: var(--component-feature-icon-mixin-bg);
    color: var(--component-feature-icon-mixin-color);
  }
}
@layer syx.atoms {
  .atom-label {
    display: block;
    font-family: var(--component-form-field-font-family);
    font-size: var(--component-form-field-font-size);
    font-weight: var(--semantic-font-weight-medium);
    line-height: var(--component-form-field-line-height);
    color: var(--component-form-field-color);
    margin-bottom: var(--component-form-field-label-margin-bottom);
  }
  .atom-input-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
  }
  .atom-input {
    display: block;
    width: 100%;
    height: var(--component-form-field-min-height);
    box-sizing: border-box;
    padding: var(--component-form-field-padding-y) var(--component-form-field-padding-x);
    border: var(--component-form-field-border-width) solid var(--component-form-field-border);
    border-radius: var(--component-form-field-border-radius);
    background-color: var(--component-form-field-bg);
    font-family: var(--component-form-field-font-family);
    font-size: var(--component-form-field-font-size);
    line-height: var(--component-form-field-line-height);
    color: var(--component-form-field-color);
    transition: border-color var(--component-form-field-transition-duration) var(--component-form-field-transition-easing), box-shadow var(--component-form-field-transition-duration) var(--component-form-field-transition-easing);
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-input {
      transition: none;
    }
  }
  .atom-input::-moz-placeholder {
    color: var(--component-form-field-placeholder);
  }
  .atom-input::placeholder {
    color: var(--component-form-field-placeholder);
  }
  .atom-input:hover:not(:disabled) {
    border-color: var(--semantic-color-primary);
  }
  .atom-input:focus {
    outline: none;
    border-color: var(--component-form-field-border-focus);
    box-shadow: var(--component-form-field-shadow-focus);
  }
  .atom-input:disabled {
    background-color: var(--component-form-field-bg-disabled);
    border-color: var(--component-form-field-color-disabled);
    cursor: not-allowed;
  }
  .atom-select {
    display: block;
    width: 100%;
    height: var(--component-form-field-min-height);
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: calc(var(--component-form-field-min-height) - var(--component-form-field-border-width) * 2);
    padding-left: var(--component-form-field-padding-x);
    padding-right: calc(var(--component-form-field-padding-x) * 2.5);
    border: var(--component-form-field-border-width) solid var(--component-form-field-border);
    border-radius: var(--component-form-field-border-radius);
    background-color: var(--component-form-field-bg);
    font-family: var(--component-form-field-font-family);
    font-size: var(--component-form-field-font-size);
    color: var(--component-form-field-color);
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color var(--component-form-field-transition-duration) var(--component-form-field-transition-easing), box-shadow var(--component-form-field-transition-duration) var(--component-form-field-transition-easing);
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-select {
      transition: none;
    }
  }
  .atom-select:hover:not(:disabled) {
    border-color: var(--semantic-color-primary);
  }
  .atom-select:focus {
    outline: none;
    border-color: var(--component-form-field-border-focus);
    box-shadow: var(--component-form-field-shadow-focus);
  }
  .atom-select:disabled {
    background-color: var(--component-form-field-bg-disabled);
    border-color: var(--component-form-field-color-disabled);
    cursor: not-allowed;
  }
  .atom-input-wrapper:has(.atom-select)::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: var(--component-form-field-padding-x);
    transform: translateY(-50%);
    height: 1em;
    width: 1em;
    background-image: var(--icon-user-interface-chevron-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"));
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}
@layer syx.atoms {
  .atom-icon {
    display: inline-block;
    position: relative;
    height: var(--component-icon-size-sm);
    width: var(--component-icon-size-sm);
    flex-shrink: 0;
  }
  .atom-icon:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: 100%;
    width: 100%;
    background-color: var(--component-icon-color);
    mask-image: var(--component-icon-source);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: var(--component-icon-source);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
  }
  .atom-icon--arrow-default:before {
    --component-icon-source: var(--icon-arrow-default);
  }
  .atom-icon--arrow-double:before {
    --component-icon-source: var(--icon-arrow-double);
  }
  .atom-icon--content-bars:before {
    --component-icon-source: var(--icon-content-bars);
  }
  .atom-icon--rrss-email:before {
    --component-icon-source: var(--icon-rrss-email);
  }
  .atom-icon--ui-cancel:before {
    --component-icon-source: var(--icon-user-interface-cancel);
  }
  .atom-icon--ui-exclamation:before {
    --component-icon-source: var(--icon-user-interface-exclamation-mark);
  }
  .atom-icon--ui-home:before {
    --component-icon-source: var(--icon-user-interface-home);
  }
  .atom-icon--ui-tick:before {
    --component-icon-source: var(--icon-user-interface-tick);
  }
  .atom-icon--sm {
    height: var(--component-icon-size-sm);
    width: var(--component-icon-size-sm);
  }
  .atom-icon--md {
    height: var(--component-icon-size-md);
    width: var(--component-icon-size-md);
  }
  .atom-icon--lg {
    height: var(--component-icon-size-lg);
    width: var(--component-icon-size-lg);
  }
  .atom-icon--xl {
    height: var(--component-icon-size-xl);
    width: var(--component-icon-size-xl);
  }
  .atom-icon--color-primary:before {
    --component-icon-color: var(--semantic-color-primary-text);
  }
  .atom-icon--color-secondary:before {
    --component-icon-color: var(--semantic-color-secondary-text);
  }
  .atom-icon--color-state-ok:before {
    --component-icon-color: var(--semantic-color-state-success);
  }
  .atom-icon--color-state-ko:before {
    --component-icon-color: var(--semantic-color-state-error);
  }
  .atom-icon--color-state-warning:before {
    --component-icon-color: var(--semantic-color-state-warning);
  }
  .atom-icon--color-white:before {
    --component-icon-color: oklch(1 0 0);
  }
  .atom-icon--color-black:before {
    --component-icon-color: oklch(0 0 0);
  }
}
:root {
  --lc-icon-home: url("data:image/svg+xml,%3Csvg class='lucide lucide-home' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8' /%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' /%3E%3C/svg%3E");
  --lc-icon-menu: url("data:image/svg+xml,%3Csvg class='lucide lucide-menu' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 5h16' /%3E%3Cpath d='M4 12h16' /%3E%3Cpath d='M4 19h16' /%3E%3C/svg%3E");
  --lc-icon-x: url("data:image/svg+xml,%3Csvg class='lucide lucide-x' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M18 6 6 18' /%3E%3Cpath d='m6 6 12 12' /%3E%3C/svg%3E");
  --lc-icon-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z' /%3E%3Cpath d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12' /%3E%3Cpath d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17' /%3E%3C/svg%3E");
  --lc-icon-chevron-right: url("data:image/svg+xml,%3Csvg class='lucide lucide-chevron-right' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m9 18 6-6-6-6' /%3E%3C/svg%3E");
  --lc-icon-chevron-left: url("data:image/svg+xml,%3Csvg class='lucide lucide-chevron-left' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m15 18-6-6 6-6' /%3E%3C/svg%3E");
  --lc-icon-chevron-down: url("data:image/svg+xml,%3Csvg class='lucide lucide-chevron-down' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m6 9 6 6 6-6' /%3E%3C/svg%3E");
  --lc-icon-chevron-up: url("data:image/svg+xml,%3Csvg class='lucide lucide-chevron-up' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m18 15-6-6-6 6' /%3E%3C/svg%3E");
  --lc-icon-chevrons-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 17 18 12 13 7'/%3E%3Cpolyline points='6 17 11 12 6 7'/%3E%3C/svg%3E");
  --lc-icon-chevrons-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m7 6 5 5 5-5' /%3E%3Cpath d='m7 13 5 5 5-5' /%3E%3C/svg%3E");
  --lc-icon-chevrons-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 17 6 12 11 7'/%3E%3Cpolyline points='18 17 13 12 18 7'/%3E%3C/svg%3E");
  --lc-icon-arrow-right: url("data:image/svg+xml,%3Csvg class='lucide lucide-arrow-right' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12h14' /%3E%3Cpath d='m12 5 7 7-7 7' /%3E%3C/svg%3E");
  --lc-icon-arrow-left: url("data:image/svg+xml,%3Csvg class='lucide lucide-arrow-left' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m12 19-7-7 7-7' /%3E%3Cpath d='M19 12H5' /%3E%3C/svg%3E");
  --lc-icon-search: url("data:image/svg+xml,%3Csvg class='lucide lucide-search' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m21 21-4.34-4.34' /%3E%3Ccircle cx='11' cy='11' r='8' /%3E%3C/svg%3E");
  --lc-icon-plus: url("data:image/svg+xml,%3Csvg class='lucide lucide-plus' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12h14' /%3E%3Cpath d='M12 5v14' /%3E%3C/svg%3E");
  --lc-icon-minus: url("data:image/svg+xml,%3Csvg class='lucide lucide-minus' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12h14' /%3E%3C/svg%3E");
  --lc-icon-check: url("data:image/svg+xml,%3Csvg class='lucide lucide-check' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 6 9 17l-5-5' /%3E%3C/svg%3E");
  --lc-icon-trash: url("data:image/svg+xml,%3Csvg class='lucide lucide-trash-2' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10 11v6' /%3E%3Cpath d='M14 11v6' /%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6' /%3E%3Cpath d='M3 6h18' /%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2' /%3E%3C/svg%3E");
  --lc-icon-pencil: url("data:image/svg+xml,%3Csvg class='lucide lucide-pencil' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z' /%3E%3Cpath d='m15 5 4 4' /%3E%3C/svg%3E");
  --lc-icon-download: url("data:image/svg+xml,%3Csvg class='lucide lucide-download' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 15V3' /%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' /%3E%3Cpath d='m7 10 5 5 5-5' /%3E%3C/svg%3E");
  --lc-icon-copy: url("data:image/svg+xml,%3Csvg class='lucide lucide-copy' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2' /%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' /%3E%3C/svg%3E");
  --lc-icon-external-link: url("data:image/svg+xml,%3Csvg class='lucide lucide-external-link' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 3h6v6' /%3E%3Cpath d='M10 14 21 3' /%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6' /%3E%3C/svg%3E");
  --lc-icon-filter: url("data:image/svg+xml,%3Csvg class='lucide lucide-filter' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z' /%3E%3C/svg%3E");
  --lc-icon-rocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5' /%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09' /%3E%3Cpath d='M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z' /%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05' /%3E%3C/svg%3E");
  --lc-icon-terminal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 19h8' /%3E%3Cpath d='m4 17 6-6-6-6' /%3E%3C/svg%3E");
  --lc-icon-book-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 7v14' /%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z' /%3E%3C/svg%3E");
  --lc-icon-github: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4' /%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2' /%3E%3C/svg%3E");
  --lc-icon-zap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z' /%3E%3C/svg%3E");
  --lc-icon-info: url("data:image/svg+xml,%3Csvg class='lucide lucide-info' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='M12 16v-4' /%3E%3Cpath d='M12 8h.01' /%3E%3C/svg%3E");
  --lc-icon-warning: url("data:image/svg+xml,%3Csvg class='lucide lucide-alert-triangle' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3' /%3E%3Cpath d='M12 9v4' /%3E%3Cpath d='M12 17h.01' /%3E%3C/svg%3E");
  --lc-icon-success: url("data:image/svg+xml,%3Csvg class='lucide lucide-circle-check' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='m9 12 2 2 4-4' /%3E%3C/svg%3E");
  --lc-icon-error: url("data:image/svg+xml,%3Csvg class='lucide lucide-circle-x' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='m15 9-6 6' /%3E%3Cpath d='m9 9 6 6' /%3E%3C/svg%3E");
  --lc-icon-shield-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z' /%3E%3Cpath d='m9 12 2 2 4-4' /%3E%3C/svg%3E");
  --lc-icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401' /%3E%3C/svg%3E");
  --lc-icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='4' /%3E%3Cpath d='M12 2v2' /%3E%3Cpath d='M12 20v2' /%3E%3Cpath d='m4.93 4.93 1.41 1.41' /%3E%3Cpath d='m17.66 17.66 1.41 1.41' /%3E%3Cpath d='M2 12h2' /%3E%3Cpath d='M20 12h2' /%3E%3Cpath d='m6.34 17.66-1.41 1.41' /%3E%3Cpath d='m19.07 4.93-1.41 1.41' /%3E%3C/svg%3E");
  --lc-icon-palette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z' /%3E%3Ccircle cx='13.5' cy='6.5' r='.5' fill='currentColor' /%3E%3Ccircle cx='17.5' cy='10.5' r='.5' fill='currentColor' /%3E%3Ccircle cx='6.5' cy='12.5' r='.5' fill='currentColor' /%3E%3Ccircle cx='8.5' cy='7.5' r='.5' fill='currentColor' /%3E%3C/svg%3E");
  --lc-icon-user: url("data:image/svg+xml,%3Csvg class='lucide lucide-user' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2' /%3E%3Ccircle cx='12' cy='7' r='4' /%3E%3C/svg%3E");
  --lc-icon-settings: url("data:image/svg+xml,%3Csvg class='lucide lucide-settings' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915' /%3E%3Ccircle cx='12' cy='12' r='3' /%3E%3C/svg%3E");
  --lc-icon-mail: url("data:image/svg+xml,%3Csvg class='lucide lucide-mail' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7' /%3E%3Crect x='2' y='4' width='20' height='16' rx='2' /%3E%3C/svg%3E");
  --lc-icon-database: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cellipse cx='12' cy='5' rx='9' ry='3' /%3E%3Cpath d='M3 5V19A9 3 0 0 0 21 19V5' /%3E%3Cpath d='M3 12A9 3 0 0 0 21 12' /%3E%3C/svg%3E");
  --lc-icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71' /%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' /%3E%3C/svg%3E");
  --lc-icon-component: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z' /%3E%3Cpath d='m3.3 7 8.7 5 8.7-5' /%3E%3Cpath d='M12 22V12' /%3E%3C/svg%3E");
  --lc-icon-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z' /%3E%3Cpath d='m3.3 7 8.7 5 8.7-5' /%3E%3Cpath d='M12 22V12' /%3E%3C/svg%3E");
  --lc-icon-coins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M13.744 17.736a6 6 0 1 1-7.48-7.48' /%3E%3Cpath d='M15 6h1v4' /%3E%3Cpath d='m6.134 14.768.866-.5 2 3.464' /%3E%3Ccircle cx='16' cy='8' r='6' /%3E%3C/svg%3E");
  --lc-icon-atom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='1' /%3E%3Cpath d='M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z' /%3E%3Cpath d='M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z' /%3E%3C/svg%3E");
  --lc-icon-package: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z' /%3E%3Cpath d='M12 22V12' /%3E%3Cpolyline points='3.29 7 12 12 20.71 7' /%3E%3Cpath d='m7.5 4.27 9 5.15' /%3E%3C/svg%3E");
  --lc-icon-file-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z' /%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5' /%3E%3Cpath d='M10 9H8' /%3E%3Cpath d='M16 13H8' /%3E%3Cpath d='M16 17H8' /%3E%3C/svg%3E");
  --lc-icon-git-branch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 6a9 9 0 0 0-9 9V3' /%3E%3Ccircle cx='18' cy='6' r='3' /%3E%3Ccircle cx='6' cy='18' r='3' /%3E%3C/svg%3E");
  --lc-icon-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 8V4H8' /%3E%3Crect width='16' height='12' x='4' y='8' rx='2' /%3E%3Cpath d='M2 14h2' /%3E%3Cpath d='M20 14h2' /%3E%3Cpath d='M15 13v2' /%3E%3Cpath d='M9 13v2' /%3E%3C/svg%3E");
  --lc-icon-activity: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2' /%3E%3C/svg%3E");
  --lc-icon-check-circle: url("data:image/svg+xml,%3Csvg class='lucide lucide-circle-check' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='m9 12 2 2 4-4' /%3E%3C/svg%3E");
  --lc-icon-pie-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z' /%3E%3Cpath d='M21.21 15.89A10 10 0 1 1 8 2.83' /%3E%3C/svg%3E");
  --lc-icon-layout: url("data:image/svg+xml,%3Csvg class='lucide lucide-layout' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect width='18' height='18' x='3' y='3' rx='2' /%3E%3Cpath d='M3 9h18' /%3E%3Cpath d='M9 21V9' /%3E%3C/svg%3E");
  --lc-icon-code: url("data:image/svg+xml,%3Csvg class='lucide lucide-code' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m16 18 6-6-6-6' /%3E%3Cpath d='m8 6-6 6 6 6' /%3E%3C/svg%3E");
  --lc-icon-corner-down-right: url("data:image/svg+xml,%3Csvg class='lucide lucide-corner-down-right' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m15 10 5 5-5 5' /%3E%3Cpath d='M4 4v7a4 4 0 0 0 4 4h12' /%3E%3C/svg%3E");
  --lc-icon-arrow-up: url("data:image/svg+xml,%3Csvg class='lucide lucide-arrow-up' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m5 12 7-7 7 7' /%3E%3Cpath d='M12 19V5' /%3E%3C/svg%3E");
  --lc-icon-users: url("data:image/svg+xml,%3Csvg class='lucide lucide-users' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744' /%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87' /%3E%3Ccircle cx='9' cy='7' r='4' /%3E%3C/svg%3E");
  --lc-icon-award: url("data:image/svg+xml,%3Csvg class='lucide lucide-award' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526' /%3E%3Ccircle cx='12' cy='8' r='6' /%3E%3C/svg%3E");
  --lc-icon-git-compare: url("data:image/svg+xml,%3Csvg class='lucide lucide-git-compare' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='18' cy='18' r='3' /%3E%3Ccircle cx='6' cy='6' r='3' /%3E%3Cpath d='M13 6h3a2 2 0 0 1 2 2v7' /%3E%3Cpath d='M11 18H8a2 2 0 0 1-2-2V9' /%3E%3C/svg%3E");
  --lc-icon-briefcase: url("data:image/svg+xml,%3Csvg class='lucide lucide-briefcase' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16' /%3E%3Crect width='20' height='14' x='2' y='6' rx='2' /%3E%3C/svg%3E");
  --lc-icon-x-circle: url("data:image/svg+xml,%3Csvg class='lucide lucide-x-circle' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='m15 9-6 6' /%3E%3Cpath d='m9 9 6 6' /%3E%3C/svg%3E");
}

@layer syx.atoms {
  .atom-icon--lc-home:before {
    --component-icon-source: var(--lc-icon-home);
  }
  .atom-icon--lc-menu:before {
    --component-icon-source: var(--lc-icon-menu);
  }
  .atom-icon--lc-x:before {
    --component-icon-source: var(--lc-icon-x);
  }
  .atom-icon--lc-layers:before {
    --component-icon-source: var(--lc-icon-layers);
  }
  .atom-icon--lc-chevron-right:before {
    --component-icon-source: var(--lc-icon-chevron-right);
  }
  .atom-icon--lc-chevron-left:before {
    --component-icon-source: var(--lc-icon-chevron-left);
  }
  .atom-icon--lc-chevron-down:before {
    --component-icon-source: var(--lc-icon-chevron-down);
  }
  .atom-icon--lc-chevron-up:before {
    --component-icon-source: var(--lc-icon-chevron-up);
  }
  .atom-icon--lc-chevrons-right:before {
    --component-icon-source: var(--lc-icon-chevrons-right);
  }
  .atom-icon--lc-chevrons-down:before {
    --component-icon-source: var(--lc-icon-chevrons-down);
  }
  .atom-icon--lc-chevrons-left:before {
    --component-icon-source: var(--lc-icon-chevrons-left);
  }
  .atom-icon--lc-arrow-right:before {
    --component-icon-source: var(--lc-icon-arrow-right);
  }
  .atom-icon--lc-arrow-left:before {
    --component-icon-source: var(--lc-icon-arrow-left);
  }
  .atom-icon--lc-search:before {
    --component-icon-source: var(--lc-icon-search);
  }
  .atom-icon--lc-plus:before {
    --component-icon-source: var(--lc-icon-plus);
  }
  .atom-icon--lc-minus:before {
    --component-icon-source: var(--lc-icon-minus);
  }
  .atom-icon--lc-check:before {
    --component-icon-source: var(--lc-icon-check);
  }
  .atom-icon--lc-trash:before {
    --component-icon-source: var(--lc-icon-trash);
  }
  .atom-icon--lc-pencil:before {
    --component-icon-source: var(--lc-icon-pencil);
  }
  .atom-icon--lc-download:before {
    --component-icon-source: var(--lc-icon-download);
  }
  .atom-icon--lc-copy:before {
    --component-icon-source: var(--lc-icon-copy);
  }
  .atom-icon--lc-external-link:before {
    --component-icon-source: var(--lc-icon-external-link);
  }
  .atom-icon--lc-filter:before {
    --component-icon-source: var(--lc-icon-filter);
  }
  .atom-icon--lc-rocket:before {
    --component-icon-source: var(--lc-icon-rocket);
  }
  .atom-icon--lc-terminal:before {
    --component-icon-source: var(--lc-icon-terminal);
  }
  .atom-icon--lc-book-open:before {
    --component-icon-source: var(--lc-icon-book-open);
  }
  .atom-icon--lc-github:before {
    --component-icon-source: var(--lc-icon-github);
  }
  .atom-icon--lc-zap:before {
    --component-icon-source: var(--lc-icon-zap);
  }
  .atom-icon--lc-info:before {
    --component-icon-source: var(--lc-icon-info);
  }
  .atom-icon--lc-warning:before {
    --component-icon-source: var(--lc-icon-warning);
  }
  .atom-icon--lc-success:before {
    --component-icon-source: var(--lc-icon-success);
  }
  .atom-icon--lc-error:before {
    --component-icon-source: var(--lc-icon-error);
  }
  .atom-icon--lc-shield-check:before {
    --component-icon-source: var(--lc-icon-shield-check);
  }
  .atom-icon--lc-moon:before {
    --component-icon-source: var(--lc-icon-moon);
  }
  .atom-icon--lc-sun:before {
    --component-icon-source: var(--lc-icon-sun);
  }
  .atom-icon--lc-palette:before {
    --component-icon-source: var(--lc-icon-palette);
  }
  .atom-icon--lc-user:before {
    --component-icon-source: var(--lc-icon-user);
  }
  .atom-icon--lc-settings:before {
    --component-icon-source: var(--lc-icon-settings);
  }
  .atom-icon--lc-mail:before {
    --component-icon-source: var(--lc-icon-mail);
  }
  .atom-icon--lc-database:before {
    --component-icon-source: var(--lc-icon-database);
  }
  .atom-icon--lc-link:before {
    --component-icon-source: var(--lc-icon-link);
  }
  .atom-icon--lc-component:before {
    --component-icon-source: var(--lc-icon-component);
  }
  .atom-icon--lc-box:before {
    --component-icon-source: var(--lc-icon-component);
  }
  .atom-icon--lc-coins:before {
    --component-icon-source: var(--lc-icon-coins);
  }
  .atom-icon--lc-atom:before {
    --component-icon-source: var(--lc-icon-atom);
  }
  .atom-icon--lc-package:before {
    --component-icon-source: var(--lc-icon-package);
  }
  .atom-icon--lc-file-text:before {
    --component-icon-source: var(--lc-icon-file-text);
  }
  .atom-icon--lc-git-branch:before {
    --component-icon-source: var(--lc-icon-git-branch);
  }
  .atom-icon--lc-bot:before {
    --component-icon-source: var(--lc-icon-bot);
  }
  .atom-icon--lc-activity:before {
    --component-icon-source: var(--lc-icon-activity);
  }
  .atom-icon--lc-check-circle:before {
    --component-icon-source: var(--lc-icon-success);
  }
  .atom-icon--lc-pie-chart:before {
    --component-icon-source: var(--lc-icon-pie-chart);
  }
  .atom-icon--lc-layout:before {
    --component-icon-source: var(--lc-icon-layout);
  }
  .atom-icon--lc-code:before {
    --component-icon-source: var(--lc-icon-code);
  }
  .atom-icon--lc-corner-down-right:before {
    --component-icon-source: var(--lc-icon-corner-down-right);
  }
  .atom-icon--lc-arrow-up:before {
    --component-icon-source: var(--lc-icon-arrow-up);
  }
  .atom-icon--lc-users:before {
    --component-icon-source: var(--lc-icon-users);
  }
  .atom-icon--lc-award:before {
    --component-icon-source: var(--lc-icon-award);
  }
  .atom-icon--lc-git-compare:before {
    --component-icon-source: var(--lc-icon-git-compare);
  }
  .atom-icon--lc-briefcase:before {
    --component-icon-source: var(--lc-icon-briefcase);
  }
  .atom-icon--lc-x-circle:before {
    --component-icon-source: var(--lc-icon-x-circle);
  }
}
@layer syx.atoms {
  .atom-label--primary {
    border-radius: var(--component-label-border-radius);
  }
  .atom-label--scope-1 {
    padding: var(--component-label-padding-sm);
  }
  .atom-label--scope-2 {
    padding: var(--component-label-padding-md);
  }
  .atom-label--scope-3 {
    padding: var(--component-label-padding-lg);
  }
}
@layer syx.atoms {
  .atom-link {
    position: relative;
  }
  .atom-link--primary {
    border: 0;
    display: inline-flex;
    overflow: hidden;
    word-wrap: break-word;
    transition: color var(--semantic-duration-base) var(--semantic-easing-in-out), box-shadow var(--semantic-duration-base) var(--semantic-easing-in-out);
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-link--primary {
      transition: none;
    }
  }
  .atom-link--primary {
    color: var(--component-link-primary-color);
    background-color: transparent;
    box-shadow: inset 0 0 0 0 var(--component-link-primary-bg-hover);
  }
  .atom-link--primary:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--component-link-decoration-thickness);
    width: 100%;
    z-index: 1;
    background-color: var(--component-link-primary-color);
  }
  .atom-link--primary:hover {
    color: var(--component-link-primary-color-hover);
    box-shadow: inset 100vw 0 0 0 var(--component-link-primary-bg-hover);
  }
  .atom-link--primary:focus-visible {
    outline: var(--semantic-focus-ring-width) var(--semantic-focus-ring-style) var(--component-link-primary-shadow-focus);
    outline-offset: var(--semantic-focus-ring-offset);
  }
  .atom-link--primary:active {
    color: var(--component-link-primary-color);
  }
}
@layer syx.atoms {
  .atom-list {
    list-style: none;
  }
  .atom-list--primary {
    padding-left: 0;
  }
  .atom-list--primary [class*=__item] {
    position: relative;
    padding-left: var(--list-lvl1-gap);
  }
  .atom-list--primary [class*=__item]:not(:first-child) {
    margin-top: var(--list-item-m-t);
  }
  .atom-list--primary [class*=__item]:before {
    content: "";
    position: absolute;
    top: var(--list-icon-y, 0.2em);
    left: 0;
    height: var(--list-icon-size);
    width: var(--list-icon-size);
    background-image: var(--list-lvl1-icon-pic);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: var(--filter-primary);
  }
  .atom-list--primary [class*=__item]:not([class*=__lvl2]):before {
    background-image: var(--list-lvl1-icon-pic);
  }
  .atom-list--primary [class*=__lvl2] {
    margin-top: var(--list-lvl2-m-l);
    padding-left: var(--list-lvl2-gap);
  }
  .atom-list--primary [class*=__lvl2] [class*=__item]:before {
    background-image: var(--list-lvl2-icon-pic);
    top: var(--list-icon-y-lvl2, 0.2em);
  }
  .atom-list--primary [class*=__lvl3] {
    margin-top: var(--list-lvl3-m-l);
    padding-left: var(--list-lvl3-gap);
  }
  .atom-list--ordered {
    margin-top: var(--list-ordered-m-t);
    margin-bottom: var(--list-ordered-m-b);
    padding-left: 0;
    list-style: none;
    counter-reset: list-number;
  }
  .atom-list--ordered [class*=__item] {
    position: relative;
    padding-left: var(--list-ordered-gap);
  }
  .atom-list--ordered [class*=__item]:not(:first-child) {
    margin-top: var(--list-ordered-item-m-t);
  }
  .atom-list--ordered > [class*=__item]:before {
    content: counter(list-number);
    position: absolute;
    top: -0.25rem;
    left: 0;
    height: var(--list-ordered-counter-size);
    width: var(--list-ordered-counter-size);
    border-radius: var(--semantic-border-radius-circle);
    counter-increment: list-number;
    font-size: var(--list-ordered-counter-font-size);
    line-height: var(--list-ordered-counter-line-height);
    color: var(--semantic-color-text-inverse);
    text-align: center;
    background-color: var(--semantic-color-primary);
  }
}
@layer syx.atoms {
  .atom-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--component-pagination-gap);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .atom-pagination__item {
    position: relative;
    display: flex;
  }
  .atom-pagination__item--is-active .atom-pagination__trigger {
    background-color: var(--component-pagination-bg-active);
    border-color: var(--component-pagination-bg-active);
    color: var(--component-pagination-color-active);
    font-weight: var(--semantic-font-weight-bold);
  }
  .atom-pagination__item--is-disabled .atom-pagination__trigger {
    color: var(--component-pagination-color-disabled);
    background-color: transparent;
    border-color: transparent;
    cursor: not-allowed;
    pointer-events: none;
  }
  .atom-pagination__item--is-prev .atom-pagination__trigger::before {
    content: "";
    display: block;
    width: var(--component-pagination-icon-size, 1em);
    height: var(--component-pagination-icon-size, 1em);
    background-image: var(--lc-icon-chevron-left);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: var(--component-pagination-icon-filter, none);
  }
  .atom-pagination__item--is-next .atom-pagination__trigger::before {
    content: "";
    display: block;
    width: var(--component-pagination-icon-size, 1em);
    height: var(--component-pagination-icon-size, 1em);
    background-image: var(--lc-icon-chevron-right);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: var(--component-pagination-icon-filter, none);
  }
  .atom-pagination__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--component-pagination-item-size);
    height: var(--component-pagination-item-size);
    border-radius: var(--component-pagination-border-radius);
    border: var(--component-pagination-border-width) solid transparent;
    background-color: transparent;
    color: var(--component-pagination-color);
    font-size: var(--semantic-font-size-body-small);
    font-family: var(--component-pagination-font-family);
    font-weight: var(--semantic-font-weight-medium);
    cursor: pointer;
    transition: background-color var(--semantic-duration-fast) var(--semantic-easing-standard), border-color var(--semantic-duration-fast) var(--semantic-easing-standard), color var(--semantic-duration-fast) var(--semantic-easing-standard);
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-pagination__trigger {
      transition: none;
    }
  }
  .atom-pagination__trigger {
    text-decoration: none;
  }
  .atom-pagination__trigger:hover:not(:disabled) {
    border-color: var(--component-pagination-border-color-hover);
    color: var(--component-pagination-color-hover);
  }
  .atom-pagination__trigger:focus-visible {
    outline: var(--semantic-focus-ring-width) var(--semantic-focus-ring-style) var(--component-pagination-shadow-focus);
    outline-offset: var(--semantic-focus-ring-offset);
  }
  .atom-pagination__trigger:disabled {
    color: var(--component-pagination-color-disabled);
    cursor: not-allowed;
  }
}
@layer syx.atoms {
  .atom-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--component-pill-gap);
    padding: calc(var(--semantic-space-component-xs, 0.25rem) * 2) calc(var(--semantic-space-component-xs, 0.25rem) * 6);
    border-radius: var(--component-pill-border-radius);
    font-size: var(--semantic-font-size-overline);
    font-weight: var(--semantic-font-weight-bold);
    letter-spacing: var(--semantic-letter-spacing-wide);
    text-transform: uppercase;
    line-height: var(--component-pill-line-height);
    white-space: nowrap;
    background-color: var(--component-pill-neutral-bg);
    color: var(--component-pill-neutral-color);
  }
  .atom-pill--primary {
    background-color: var(--component-pill-primary-bg);
    color: var(--component-pill-primary-color);
    border: var(--component-pill-border-width) var(--component-pill-border-style) var(--component-pill-primary-border-color);
  }
  .atom-pill--secondary {
    background-color: var(--component-pill-secondary-bg);
    color: var(--component-pill-secondary-color);
    border: var(--component-pill-border-width) var(--component-pill-border-style) var(--component-pill-secondary-border-color);
  }
  .atom-pill--success {
    background-color: var(--component-pill-success-bg);
    color: var(--component-pill-success-color);
  }
  .atom-pill--warning {
    background-color: var(--component-pill-warning-bg);
    color: var(--component-pill-warning-color);
  }
  .atom-pill--danger {
    background-color: var(--component-pill-danger-bg);
    color: var(--component-pill-danger-color);
  }
  .atom-pill--dark {
    background-color: var(--component-pill-dark-bg);
    border: var(--component-pill-border-width) var(--component-pill-border-style) var(--component-pill-dark-border-color);
    color: var(--component-pill-dark-color);
  }
  .atom-pill--neutral {
    background-color: var(--component-pill-neutral-bg);
    border: var(--component-pill-border-width) var(--component-pill-border-style) var(--component-pill-neutral-border-color);
    color: var(--component-pill-neutral-color);
  }
  .atom-pill--subtle {
    background-color: var(--component-pill-subtle-bg);
    border: var(--component-pill-border-width) var(--component-pill-border-style) var(--component-pill-subtle-border-color);
    color: var(--component-pill-subtle-color);
  }
}
@layer syx.atoms {
  .atom-radio {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .atom-radio__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .atom-radio__label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--component-radio-gap);
    font-size: var(--component-form-field-font-size);
    color: var(--component-form-field-color);
    line-height: var(--component-form-field-line-height);
    cursor: pointer;
  }
  .atom-radio__label::before {
    content: "";
    flex-shrink: 0;
    width: var(--component-radio-size);
    height: var(--component-radio-size);
    border: var(--component-radio-border-width) solid var(--component-radio-border-color);
    border-radius: var(--component-radio-border-radius);
    background-color: var(--component-radio-bg);
    transition: border-color var(--component-radio-transition-duration) var(--component-form-field-transition-easing), background-color var(--component-radio-transition-duration) var(--component-form-field-transition-easing), box-shadow var(--component-radio-transition-duration) var(--component-form-field-transition-easing);
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-radio__label::before {
      transition: none;
    }
  }
  .atom-radio__label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--component-radio-size) / 4);
    transform: translateY(-50%) scale(0);
    width: var(--component-radio-checked-size);
    height: var(--component-radio-checked-size);
    border-radius: var(--component-radio-dot-border-radius);
    background-color: var(--semantic-color-text-inverse);
    transition: transform var(--component-radio-transition-duration) var(--component-radio-transition-easing);
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-radio__label::after {
      transition: none;
    }
  }
  .atom-radio__label:hover::before {
    border-color: var(--component-radio-border-color-hover);
    box-shadow: var(--component-form-field-shadow-focus);
  }
  .atom-radio__input:checked + .atom-radio__label::before {
    background-color: var(--component-radio-bg-checked);
    border-color: var(--component-radio-bg-checked);
  }
  .atom-radio__input:checked + .atom-radio__label::after {
    transform: translateY(-50%) scale(1);
  }
  .atom-radio__input:focus-visible + .atom-radio__label::before {
    outline: var(--semantic-focus-ring-width) var(--semantic-focus-ring-style) var(--component-form-field-border-focus);
    outline-offset: var(--semantic-focus-ring-offset);
  }
  .atom-radio__input:disabled + .atom-radio__label {
    opacity: var(--component-radio-status-disabled-opacity);
    cursor: not-allowed;
  }
  .atom-radio__input:disabled + .atom-radio__label::before {
    background-color: var(--semantic-color-bg-tertiary);
    border-color: var(--semantic-color-border-subtle);
  }
}
@layer syx.atoms {
  .atom-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--semantic-space-component-xs, 0.25rem) * 2);
    text-align: center;
  }
  .atom-stat__number {
    font-family: var(--semantic-font-family-heading);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: var(--semantic-font-weight-black);
    line-height: 1;
    color: var(--semantic-color-primary-text);
    letter-spacing: -0.02em;
  }
  .atom-stat__label {
    font-family: var(--semantic-font-family-primary);
    font-size: var(--semantic-font-size-body-small);
    font-weight: var(--semantic-font-weight-medium);
    color: var(--semantic-color-text-secondary);
    letter-spacing: var(--semantic-letter-spacing-wide);
    text-transform: uppercase;
  }
  .atom-stat--light .atom-stat__number {
    color: var(--semantic-color-text-inverse);
  }
  .atom-stat--light .atom-stat__label {
    color: var(--semantic-color-text-inverse);
    opacity: 0.75;
  }
  .atom-stat--accent .atom-stat__number {
    color: var(--semantic-color-secondary-text);
  }
}
@layer syx.atoms {
  .atom-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--semantic-space-component-sm);
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .atom-switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .atom-switch__slider {
    position: relative;
    display: inline-block;
    width: var(--component-switch-width);
    height: var(--component-switch-height);
    background-color: var(--component-switch-bg-off);
    border-radius: var(--component-switch-border-radius);
    border: var(--component-form-field-border-width) solid var(--component-switch-border-color);
    transition: background-color var(--component-switch-transition-duration) var(--component-form-field-transition-easing), border-color var(--component-switch-transition-duration) var(--component-form-field-transition-easing), box-shadow var(--component-switch-transition-duration) var(--component-form-field-transition-easing);
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-switch__slider {
      transition: none;
    }
  }
  .atom-switch__slider {
    flex-shrink: 0;
  }
  .atom-switch__slider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--component-form-field-border-width) * 2);
    transform: translateY(-50%);
    width: var(--component-switch-slider-size);
    height: var(--component-switch-slider-size);
    background-color: var(--component-switch-slider-bg);
    border-radius: var(--component-switch-slider-radius);
    box-shadow: var(--component-switch-slider-shadow);
    transition: transform var(--component-switch-transition-duration) var(--component-switch-transition-easing);
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-switch__slider::before {
      transition: none;
    }
  }
  .atom-switch__label {
    font-size: var(--component-form-field-font-size);
    color: var(--component-form-field-color);
    line-height: var(--component-form-field-line-height);
  }
  .atom-switch__input:checked + .atom-switch__slider {
    background-color: var(--component-switch-bg-on);
    border-color: var(--component-switch-bg-on);
  }
  .atom-switch__input:checked + .atom-switch__slider::before {
    transform: translateY(-50%) translateX(calc(var(--component-switch-width) - var(--component-switch-slider-size) - var(--component-form-field-border-width) * 4));
  }
  .atom-switch:hover .atom-switch__slider {
    box-shadow: var(--component-form-field-shadow-focus);
  }
  .atom-switch__input:focus-visible + .atom-switch__slider {
    outline: var(--semantic-focus-ring-width) var(--semantic-focus-ring-style) var(--component-form-field-border-focus);
    outline-offset: var(--semantic-focus-ring-offset);
  }
  .atom-switch:has(.atom-switch__input:disabled) {
    opacity: var(--component-switch-status-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
  }
}
@layer syx.atoms {
  .atom-table {
    min-width: var(--component-table-min-width);
    word-break: normal;
  }
  .atom-table__container {
    position: relative;
    width: 100%;
  }
  .atom-table__th {
    padding: var(--component-table-cell-padding-y) var(--component-table-cell-padding-x);
    vertical-align: bottom;
    font-size: var(--component-table-th-font-size);
    line-height: var(--component-table-th-line-height);
    font-family: var(--component-table-th-font-family);
  }
  .atom-table__th:first-of-type {
    border-left: var(--component-table-cell-padding-y);
  }
  .atom-table__th:last-of-type {
    border-right: var(--component-table-cell-padding-y);
  }
  .atom-table__td {
    padding: var(--component-table-cell-padding-y) var(--component-table-cell-padding-x);
    border-bottom: var(--component-table-border-width) solid var(--component-table-border-color);
  }
  .atom-table--primary [class*=__th] {
    color: var(--component-table-color-th);
    background-color: var(--component-table-bg-th);
  }
  .atom-table--primary [class*=__td]:hover, .atom-table--primary [class*=__td]:focus {
    background-color: var(--component-table-state-hover-bg);
    border-color: var(--component-table-state-hover-border-color);
    box-shadow: var(--component-table-state-hover-shadow);
  }
  .atom-table--primary [class*=__tfoot] {
    background-color: var(--component-table-bg-tfoot);
  }
  .atom-table--resp {
    margin-bottom: var(--component-table-cell-padding-y);
    width: 100%;
    clear: both;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .atom-table--resp {
    margin-bottom: var(--component-table-cell-padding-y);
    width: 100%;
    clear: both;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .atom-table--is-stick-thead {
    overflow-y: auto;
    max-height: var(--component-table-sticky-max-height);
  }
  .atom-table--is-stick-thead [class*=__th] {
    position: sticky;
    top: 0;
    z-index: 3;
  }
  .atom-table--is-stick-thead [class*=__td]:first-of-type {
    position: sticky;
    left: 0;
    z-index: 2;
    color: var(--component-table-sticky-active-color);
    background-color: var(--component-table-sticky-active-bg);
  }
  .atom-table--is-stick-thead [class*=__td]:first-of-type:hover, .atom-table--is-stick-thead [class*=__td]:first-of-type:focus {
    color: var(--component-table-state-hover-border-color);
    background-color: var(--component-table-state-hover-bg);
  }
}
@layer syx.atoms {
  .atom-title {
    font-family: var(--component-title-font-family);
    line-height: var(--component-title-line-height);
    color: var(--component-title-color);
    margin-bottom: var(--component-title-margin-bottom);
  }
  .atom-title--h1 {
    font-size: var(--component-title-h1);
  }
  .atom-title--h2 {
    font-size: var(--component-title-h2);
  }
  .atom-title--h3 {
    font-size: var(--component-title-h3);
  }
  .atom-title--h4 {
    font-size: var(--component-title-h4);
  }
  .atom-title--h5 {
    font-size: var(--component-title-h5);
  }
  .atom-title--h6 {
    font-size: var(--component-title-h6);
  }
}
@layer syx.atoms {
  .atom-txt--primary {
    margin-top: 0;
    margin-bottom: var(--semantic-space-stack-sm);
  }
}
@layer syx.molecules {
  .mol-btn-group,
  .cont-set-btn {
    display: flex;
    gap: var(--component-btn-group-gap, 1rem);
    align-items: center;
    flex-wrap: wrap;
  }
}
@layer syx.molecules {
  .mol-code-snippet {
    border: var(--component-code-snippet-border-width) var(--component-code-snippet-border-style) var(--component-code-snippet-border-color);
    border-radius: var(--component-code-snippet-border-radius);
    box-shadow: var(--component-code-snippet-shadow);
    overflow: hidden;
  }
  .mol-code-snippet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--semantic-space-component-xs, 0.25rem)) var(--semantic-space-component-md);
    background-color: var(--component-code-snippet-header-bg);
    border-bottom: var(--component-code-snippet-header-border-width) var(--component-code-snippet-border-style) var(--component-code-snippet-border-color);
    gap: var(--semantic-space-component-sm);
  }
  .mol-code-snippet__label {
    font-family: var(--semantic-font-family-primary);
    font-size: var(--semantic-font-size-overline);
    font-weight: var(--semantic-font-weight-bold);
    letter-spacing: var(--semantic-letter-spacing-wide);
    text-transform: uppercase;
  }
  .mol-code-snippet__filename {
    font-family: var(--semantic-font-family-mono);
    font-size: var(--semantic-font-size-overline);
    color: var(--semantic-color-text-secondary);
  }
  .mol-code-snippet__body {
    margin: 0;
    border-radius: 0;
    border: none;
  }
  .mol-code-snippet--ok {
    border-color: var(--component-code-snippet-ok-border-color, var(--semantic-color-state-success, #16a34a));
  }
  .mol-code-snippet--ok .mol-code-snippet__header {
    background-color: var(--component-code-snippet-ok-header-bg, oklch(97% 0.021 158.247deg));
    border-bottom-color: var(--component-code-snippet-ok-header-border-color, oklch(88% 0.103 155.902deg));
  }
  .mol-code-snippet--ok .mol-code-snippet__label {
    color: var(--component-code-snippet-ok-label-color, oklch(42% 0.09 150.23deg));
  }
  .mol-code-snippet--ko {
    border-color: var(--component-code-snippet-ko-border-color, var(--semantic-color-state-error, #dc2626));
  }
  .mol-code-snippet--ko .mol-code-snippet__header {
    background-color: var(--component-code-snippet-ko-header-bg, oklch(97% 0.021 4.878deg));
    border-bottom-color: var(--component-code-snippet-ko-header-border-color, oklch(88% 0.112 8.017deg));
  }
  .mol-code-snippet--ko .mol-code-snippet__label {
    color: var(--component-code-snippet-ko-label-color, oklch(42% 0.165 21.562deg));
  }
  .mol-code-snippet--neutral .mol-code-snippet__label {
    color: var(--semantic-color-text-secondary);
  }
}
@layer syx.molecules {
  .mol-feature-card {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--semantic-space-component-md);
  }
  @supports (grid-template-rows: subgrid) {
    .mol-feature-card {
      grid-row: span var(--component-feature-card-row-span);
      grid-template-rows: subgrid;
    }
  }
  .mol-feature-card {
    padding: var(--semantic-space-layout-md);
    background-color: var(--component-feature-card-bg);
    border: var(--component-feature-card-border-width) var(--component-feature-card-border-style) var(--component-feature-card-border-color);
    border-radius: var(--component-feature-card-border-radius);
    box-shadow: var(--component-feature-card-shadow);
    transition: border-color var(--semantic-duration-base) var(--semantic-easing-standard), box-shadow var(--semantic-duration-base) var(--semantic-easing-standard), transform var(--semantic-duration-base) var(--semantic-easing-standard);
  }
  @media (prefers-reduced-motion: reduce) {
    .mol-feature-card {
      transition: none;
    }
  }
  .mol-feature-card:hover {
    border-color: var(--component-feature-card-border-color-hover);
    box-shadow: var(--component-feature-card-shadow-hover);
    transform: translateY(var(--component-feature-card-hover-lift));
  }
  .mol-feature-card__title {
    font-family: var(--semantic-font-family-heading);
    font-size: var(--semantic-font-size-h5);
    line-height: var(--semantic-line-height-heading);
    font-weight: var(--semantic-font-weight-bold);
    color: var(--semantic-color-text-primary);
    margin: 0;
  }
  .mol-feature-card__body {
    font-family: var(--semantic-font-family-primary);
    font-size: var(--semantic-font-size-body-small);
    line-height: var(--semantic-line-height-body);
    color: var(--semantic-color-text-secondary);
    margin: 0;
  }
  .mol-feature-card__cta {
    margin-top: auto;
  }
}
@layer syx.molecules {
  .mol-form-field {
    position: relative;
    margin-bottom: var(--component-form-field-margin-bottom);
  }
  .mol-form-field:before {
    content: "";
    position: absolute;
    top: 0;
    right: var(--component-form-field-icon-position-right);
    bottom: 0;
    margin: auto 0;
    height: var(--component-form-field-icon-size);
    width: var(--component-form-field-icon-size);
    filter: var(--semantic-filter-primary);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .mol-form-field:before {
      transition: none;
    }
  }
  .mol-form-field .atom-label {
    margin-bottom: var(--component-form-field-label-margin-bottom);
    display: block;
    color: var(--component-form-field-color);
    font-weight: var(--semantic-font-weight-bold);
  }
  .mol-form-field__msg {
    margin-top: var(--component-form-field-msg-margin-top);
    display: block;
    font-size: var(--component-form-field-msg-font-size);
    line-height: var(--component-form-field-msg-line-height);
    color: var(--component-form-field-color);
  }
  .mol-form-field--has-select:not([class*="--is-"]):before {
    opacity: 1;
    background: var(--icon-arrow-default) center / contain no-repeat;
    transform: rotate(90deg);
  }
  .mol-form-field--is-error:before {
    opacity: 1;
    background: var(--icon-user-interface-cancel) center / contain no-repeat;
    filter: var(--semantic-filter-state-ko);
  }
  .mol-form-field--is-error .atom-label {
    color: var(--component-form-field-error-color);
  }
  .mol-form-field--is-error .atom-input {
    border-color: var(--component-form-field-error-border);
  }
  .mol-form-field--is-error .atom-input:focus {
    border-color: var(--component-form-field-error-border);
    box-shadow: var(--component-form-field-error-shadow-focus, 0 0 0 1px var(--component-form-field-error-border));
  }
  .mol-form-field--is-error .mol-form-field__msg {
    color: var(--component-form-field-error-color);
  }
  .mol-form-field--is-success:before {
    opacity: 1;
    background: var(--lc-icon-check) center / contain no-repeat;
    filter: var(--semantic-filter-state-ok);
  }
  .mol-form-field--is-success .atom-label {
    color: var(--component-form-field-success-color);
  }
  .mol-form-field--is-success .atom-input {
    border-color: var(--component-form-field-success-border);
  }
  .mol-form-field--is-success .mol-form-field__msg {
    color: var(--component-form-field-success-color);
  }
  .mol-form-field--is-warning:before {
    opacity: 1;
    background: var(--lc-icon-warning) center / contain no-repeat;
    filter: var(--semantic-filter-state-warning);
  }
  .mol-form-field--is-warning .atom-label {
    color: var(--component-form-field-warning-color);
  }
  .mol-form-field--is-warning .atom-input {
    border-color: var(--component-form-field-warning-border);
  }
  .mol-form-field--is-warning .mol-form-field__msg {
    color: var(--component-form-field-warning-color);
  }
  .mol-form-field:where([class*="--has-select"], [class*="--is-"]) .atom-input,
  .mol-form-field:where([class*="--has-select"], [class*="--is-"]) .atom-select {
    padding-right: calc(0 + (var(--component-form-field-icon-position-right)) + (var(--component-form-field-icon-size)));
  }
  .mol-form-field:not([class*="--is-"]) .mol-form-field__msg {
    display: none;
  }
}
@layer syx.molecules {
  .mol-form-field-set {
    display: flex;
    flex-direction: column;
    gap: var(--component-form-group-gap);
  }
  .mol-form-field-set--inline {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .mol-form-field-set--inline .mol-form-field {
    flex: 1 1 auto;
    min-width: var(--component-form-field-set-min-width, 12.5rem);
  }
}
@layer syx.molecules {
  .mol-label-group,
  .cont-set-label {
    display: flex;
    gap: var(--component-label-group-gap, 0.5rem);
    align-items: center;
    flex-wrap: wrap;
  }
}
@layer syx.organisms {
  .org-site-header {
    position: sticky;
    top: 0;
    z-index: 201;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.75rem;
    padding: 0 var(--component-section-padding-inline);
    background-color: var(--semantic-color-bg-primary);
    border-bottom: 1px solid var(--semantic-color-border-subtle);
    width: 100%;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    background-color: color-mix(in srgb, var(--semantic-color-bg-primary) 90%, transparent);
    transition: box-shadow 0.2s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .org-site-header {
      transition: none;
    }
  }
  .org-site-header.is-scrolled {
    box-shadow: 0 2px 16px color-mix(in srgb, black 8%, transparent);
  }
  .org-site-header__brand {
    display: flex;
    align-items: center;
    gap: var(--semantic-space-component-sm);
    font-family: var(--semantic-font-family-heading);
    font-size: var(--semantic-font-size-h4);
    font-weight: var(--semantic-font-weight-black);
    color: var(--semantic-color-text-primary);
    text-decoration: none;
    letter-spacing: -0.03em;
    flex-shrink: 0;
    transition: color 0.2s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .org-site-header__brand {
      transition: none;
    }
  }
  .org-site-header__brand .atom-icon {
    color: var(--semantic-color-primary-text);
  }
  .org-site-header__brand:hover {
    color: var(--semantic-color-primary-text);
  }
  .org-site-header__nav {
    display: none;
    align-items: center;
    gap: var(--semantic-space-component-md, 1rem);
  }
  @media (min-width: 80em) {
    .org-site-header__nav {
      display: flex;
    }
  }
  @media (min-width: 90em) {
    .org-site-header__nav {
      gap: var(--semantic-space-component-lg, 1.5rem);
    }
  }
  .org-site-header__nav a {
    font-family: var(--semantic-font-family-primary);
    font-size: var(--semantic-font-size-body-small);
    font-weight: var(--semantic-font-weight-medium);
    color: var(--semantic-color-text-secondary);
    text-decoration: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color 0.2s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .org-site-header__nav a {
      transition: none;
    }
  }
  .org-site-header__nav a {
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
  }
  .org-site-header__nav a:hover, .org-site-header__nav a:focus-visible {
    color: var(--semantic-color-primary-text);
    border-bottom-color: var(--semantic-color-primary-text);
  }
  .org-site-header__nav a:focus-visible {
    outline: var(--semantic-focus-ring-width) var(--semantic-focus-ring-style) var(--semantic-focus-ring-color);
    outline-offset: var(--semantic-focus-ring-offset);
  }
  .org-site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--semantic-space-component-sm);
  }
  .org-site-header__actions .atom-select,
  .org-site-header__actions .atom-btn {
    height: var(--component-header-control-height);
    min-height: var(--component-header-control-height);
    border-radius: var(--component-header-control-radius);
  }
  .org-site-header__actions .atom-select {
    border-width: var(--component-header-control-border-width);
    line-height: calc(var(--component-header-control-height) - var(--component-header-control-border-width) * 2);
  }
  .org-site-header__actions .atom-btn {
    padding-block: 0;
    display: inline-flex;
    align-items: center;
  }
  .org-site-header__theme-select {
    display: none;
  }
  @media (min-width: 80em) {
    .org-site-header__theme-select {
      display: block;
    }
    .org-site-header__theme-select .atom-select {
      max-width: 9rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  @media (min-width: 90em) {
    .org-site-header__theme-select .atom-select {
      max-width: none;
    }
  }
  .org-site-header__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    height: var(--component-header-control-height);
    width: var(--component-header-control-height);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--component-header-control-radius);
    transition: background-color 0.15s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .org-site-header__burger {
      transition: none;
    }
  }
  @media (min-width: 80em) {
    .org-site-header__burger {
      display: none;
    }
  }
  .org-site-header__burger:hover, .org-site-header__burger:focus-visible {
    background-color: var(--semantic-color-bg-secondary);
  }
  .org-site-header__burger:focus-visible {
    outline: var(--semantic-focus-ring-width) var(--semantic-focus-ring-style) var(--semantic-focus-ring-color);
    outline-offset: var(--semantic-focus-ring-offset);
  }
  .org-site-header__burger-line {
    display: block;
    width: 1.375rem;
    height: 2px;
    background-color: var(--semantic-color-text-primary);
    border-radius: 2px;
    transform-origin: center;
    transition: transform 0.3s ease, opacity 0.2s ease, background-color 0.2s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .org-site-header__burger-line {
      transition: none;
    }
  }
  body[data-nav-open] {
    overflow: hidden;
  }
  body[data-nav-open] .org-site-header__burger .org-site-header__burger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  body[data-nav-open] .org-site-header__burger .org-site-header__burger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  body[data-nav-open] .org-site-header__burger .org-site-header__burger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .org-site-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 199;
    background-color: color-mix(in srgb, black 50%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .org-site-nav-overlay {
      transition: none;
    }
  }
  body[data-nav-open] .org-site-nav-overlay {
    opacity: 1;
    pointer-events: all;
  }
  .org-site-nav-drawer {
    position: fixed;
    top: 3.75rem;
    right: 0;
    left: 0;
    z-index: 200;
    background-color: var(--semantic-color-bg-primary);
    border-bottom: 1px solid var(--semantic-color-border-subtle);
    padding: var(--semantic-space-layout-sm) var(--semantic-space-layout-md);
    display: flex;
    flex-direction: column;
    gap: var(--semantic-space-component-sm);
    transform: translateY(-110%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    .org-site-nav-drawer {
      transition: none;
    }
  }
  .org-site-nav-drawer {
    box-shadow: 0 16px 32px color-mix(in srgb, black 12%, transparent);
  }
  @media (min-width: 80em) {
    .org-site-nav-drawer {
      display: none;
    }
  }
  body[data-nav-open] .org-site-nav-drawer {
    transform: translateY(0);
  }
  .org-site-nav-drawer__link {
    display: flex;
    align-items: center;
    gap: var(--semantic-space-component-sm);
    padding: var(--semantic-space-component-sm) var(--semantic-space-component-md);
    font-family: var(--semantic-font-family-primary);
    font-size: var(--semantic-font-size-body);
    font-weight: var(--semantic-font-weight-medium);
    color: var(--semantic-color-text-primary);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .org-site-nav-drawer__link {
      transition: none;
    }
  }
  .org-site-nav-drawer__link:hover, .org-site-nav-drawer__link:focus-visible {
    background-color: var(--semantic-color-bg-secondary);
    color: var(--semantic-color-primary-text);
  }
  .org-site-nav-drawer__link:focus-visible {
    outline: var(--semantic-focus-ring-width) var(--semantic-focus-ring-style) var(--semantic-focus-ring-color);
    outline-offset: var(--semantic-focus-ring-offset);
  }
  .org-site-nav-drawer__theme {
    margin-top: var(--semantic-space-component-sm);
    padding-top: var(--semantic-space-component-md);
    border-top: 1px solid var(--semantic-color-border-subtle);
  }
  .org-site-nav-drawer__theme label {
    display: block;
    font-size: var(--semantic-font-size-overline);
    font-weight: var(--semantic-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--semantic-color-text-secondary);
    margin-bottom: 0.5rem;
  }
  .org-site-header__darkmode {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--component-header-control-height);
    width: var(--component-header-control-height);
    background: none;
    border: var(--component-header-control-border-width) solid var(--semantic-color-border-default);
    border-radius: var(--component-header-control-radius);
    cursor: pointer;
    color: var(--semantic-color-text-secondary);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .org-site-header__darkmode {
      transition: none;
    }
  }
  .org-site-header__darkmode:hover, .org-site-header__darkmode:focus-visible {
    background-color: var(--semantic-color-bg-secondary);
    color: var(--semantic-color-primary-text);
    border-color: var(--semantic-color-primary);
  }
  .org-site-header__darkmode:focus-visible {
    outline: var(--semantic-focus-ring-width) var(--semantic-focus-ring-style) var(--semantic-focus-ring-color);
    outline-offset: var(--semantic-focus-ring-offset);
  }
  .org-site-header__darkmode .atom-icon {
    pointer-events: none;
  }
}
@layer syx.atoms {
  .atom-evidence {
    display: inline-block;
    padding: var(--component-evidence-padding);
    border: var(--semantic-border-width-thin) solid var(--semantic-color-border-default);
    border-radius: var(--semantic-border-radius-sm);
    font-family: var(--semantic-font-family-mono);
    font-size: var(--semantic-font-size-caption);
    line-height: var(--semantic-line-height-caption);
    color: var(--semantic-color-text-secondary);
    white-space: nowrap;
  }
  .atom-evidence--measured {
    background-color: var(--component-score-5-bg);
    border-color: var(--component-score-5-border);
    color: var(--component-score-5-color);
  }
  .atom-evidence--checkable {
    background-color: var(--component-score-3-bg);
    border-color: var(--component-score-3-border);
    color: var(--component-score-3-color);
  }
  .atom-evidence--judged {
    border-style: dashed;
  }
  .atom-evidence--new {
    border-style: dotted;
    text-transform: uppercase;
    letter-spacing: var(--semantic-letter-spacing-wide);
  }
}
@layer syx.atoms {
  .atom-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--component-score-size);
    height: var(--component-score-size);
    border: var(--semantic-border-width-thin) solid var(--semantic-color-border-default);
    border-radius: var(--semantic-border-radius-sm);
    font-family: var(--semantic-font-family-mono);
    font-weight: var(--semantic-font-weight-bold);
    font-variant-numeric: tabular-nums;
  }
  .atom-score--1 {
    background-color: var(--component-score-1-bg);
    border-color: var(--component-score-1-border);
    color: var(--component-score-1-color);
  }
  .atom-score--2 {
    background-color: var(--component-score-2-bg);
    border-color: var(--component-score-2-border);
    color: var(--component-score-2-color);
  }
  .atom-score--3 {
    background-color: var(--component-score-3-bg);
    border-color: var(--component-score-3-border);
    color: var(--component-score-3-color);
  }
  .atom-score--4 {
    background-color: var(--component-score-4-bg);
    border-color: var(--component-score-4-border);
    color: var(--component-score-4-color);
  }
  .atom-score--5 {
    background-color: var(--component-score-5-bg);
    border-color: var(--component-score-5-border);
    color: var(--component-score-5-color);
  }
  .atom-score--top {
    border-width: var(--semantic-border-width-default);
    border-color: var(--semantic-color-success);
    box-shadow: var(--semantic-shadow-hard-sm);
  }
}
@layer syx.molecules {
  .mol-compare-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--semantic-space-component-lg);
    border: var(--semantic-border-width-thin) solid var(--semantic-color-border-default);
    border-radius: var(--semantic-border-radius-lg);
    background: var(--semantic-color-bg-primary);
  }
  .mol-compare-card__name {
    padding-bottom: var(--semantic-space-stack-sm);
    margin-bottom: var(--semantic-space-stack-md);
    border-bottom: var(--semantic-border-width-thin) solid var(--semantic-color-border-subtle);
  }
  .mol-compare-card__block {
    margin-bottom: var(--semantic-space-stack-md);
  }
  .mol-compare-card__block:last-child {
    margin-bottom: 0;
  }
  .mol-compare-card__block--pro, .mol-compare-card__block--con {
    padding-left: var(--semantic-space-inline-md);
    border-left: var(--semantic-border-width-default) solid var(--semantic-color-border-default);
  }
  .mol-compare-card__block--pro {
    border-left-color: var(--semantic-color-success);
  }
  .mol-compare-card__block--pro > .mol-compare-card__label {
    color: var(--semantic-color-success);
  }
  .mol-compare-card__block--con {
    border-left-color: var(--semantic-color-error);
  }
  .mol-compare-card__block--con > .mol-compare-card__label {
    color: var(--semantic-color-error);
  }
  .mol-compare-card__label {
    display: block;
    margin-bottom: var(--semantic-space-stack-xs);
  }
  .mol-compare-card__fit {
    margin-top: auto;
    padding-top: var(--semantic-space-stack-md);
    border-top: var(--semantic-border-width-thin) solid var(--semantic-color-border-subtle);
  }
}
@layer syx.molecules {
  .mol-ranking {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mol-ranking__row {
    display: grid;
    grid-template-columns: var(--component-ranking-columns);
    align-items: center;
    gap: var(--semantic-space-inline-md);
    padding: var(--semantic-space-stack-sm) 0;
    border-bottom: var(--semantic-border-width-thin) solid var(--semantic-color-border-subtle);
  }
  .mol-ranking__row:last-child {
    border-bottom: 0;
  }
  .mol-ranking__pos {
    font-family: var(--semantic-font-family-mono);
    font-variant-numeric: tabular-nums;
    color: var(--semantic-color-text-tertiary);
    text-align: right;
  }
  .mol-ranking__name {
    font-weight: var(--semantic-font-weight-bold);
    white-space: nowrap;
  }
  .mol-ranking__bar {
    display: block;
    height: var(--semantic-space-stack-sm);
    background: var(--semantic-color-bg-secondary);
    border: var(--semantic-border-width-thin) solid var(--semantic-color-border-subtle);
    border-radius: var(--semantic-border-radius-full);
    overflow: hidden;
  }
  .mol-ranking__fill {
    display: block;
    height: 100%;
    background: var(--component-score-4-bg);
    border-radius: inherit;
  }
  .mol-ranking__pts {
    font-family: var(--semantic-font-family-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--semantic-font-size-body-small);
    color: var(--semantic-color-text-secondary);
    white-space: nowrap;
  }
  .mol-ranking__winner {
    border: var(--semantic-border-width-default) solid var(--semantic-color-primary);
    border-radius: var(--semantic-border-radius-lg);
    padding: var(--semantic-space-component-lg);
    text-align: center;
    height: 100%;
  }
  .mol-ranking__medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--component-ranking-medal-size);
    height: var(--component-ranking-medal-size);
    border-radius: var(--semantic-border-radius-full);
    background: var(--semantic-color-primary);
    color: var(--semantic-color-primary-text);
    margin-bottom: var(--semantic-space-stack-sm);
  }
  .mol-ranking__medal .atom-icon {
    width: var(--component-ranking-medal-icon-size);
    height: var(--component-ranking-medal-icon-size);
  }
  .mol-ranking__rank {
    color: var(--semantic-color-text-tertiary);
    margin-bottom: var(--semantic-space-stack-xs);
  }
  .mol-ranking__score {
    font-family: var(--semantic-font-family-heading);
    font-size: var(--semantic-font-size-h1);
    font-weight: var(--semantic-font-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--semantic-line-height-tight);
    color: var(--semantic-color-primary);
    margin: 0 0 var(--semantic-space-stack-md);
  }
  .mol-ranking__max {
    font-family: var(--semantic-font-family-mono);
    font-size: var(--semantic-font-size-body-small);
    font-weight: var(--semantic-font-weight-regular);
    color: var(--semantic-color-text-tertiary);
    margin-left: var(--component-ranking-max-offset);
  }
}
@layer syx.molecules {
  .mol-theme-card {
    display: flex;
    flex-direction: column;
    border: var(--component-theme-card-border-width) var(--component-theme-card-border-style) var(--component-theme-card-border-color);
    border-radius: var(--component-theme-card-border-radius);
    box-shadow: var(--component-theme-card-shadow);
    overflow: hidden;
    transition: border-color var(--semantic-duration-base) var(--semantic-easing-standard), transform var(--semantic-duration-base) var(--semantic-easing-standard), box-shadow var(--semantic-duration-base) var(--semantic-easing-standard);
  }
  @media (prefers-reduced-motion: reduce) {
    .mol-theme-card {
      transition: none;
    }
  }
  .mol-theme-card {
    cursor: pointer;
  }
  .mol-theme-card:hover, .mol-theme-card.is-active {
    border-color: var(--component-theme-card-border-color-active);
    transform: translateY(var(--component-theme-card-hover-lift));
    box-shadow: var(--component-theme-card-shadow-hover);
  }
  .mol-theme-card.is-active .mol-theme-card__swatch::after {
    opacity: 1;
  }
  .mol-theme-card__swatch {
    position: relative;
    height: var(--component-theme-card-swatch-height);
    border-radius: var(--component-theme-card-swatch-border-radius);
    background: var(--semantic-color-primary);
  }
  .mol-theme-card__swatch::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.75rem;
    height: 1.25rem;
    width: 1.25rem;
    transform: translateY(-50%);
    background-color: var(--component-theme-card-check-bg);
    border-radius: var(--component-theme-card-check-border-radius);
    opacity: 0;
    transition: opacity var(--semantic-duration-base) var(--semantic-easing-standard);
  }
  @media (prefers-reduced-motion: reduce) {
    .mol-theme-card__swatch::after {
      transition: none;
    }
  }
  .mol-theme-card__swatch::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1F26' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65%;
  }
  .mol-theme-card__swatch--01 {
    background: linear-gradient(var(--component-theme-card-swatch-angle), var(--component-theme-card-swatch-01-from, oklch(60% 0.23 276.966deg)) 0%, var(--component-theme-card-swatch-01-to, oklch(60% 0.165 70.08deg)) 100%);
  }
  .mol-theme-card__swatch--02 {
    background: linear-gradient(var(--component-theme-card-swatch-angle), var(--component-theme-card-swatch-02-from, oklch(60% 0.247 293.009deg)) 0%, var(--component-theme-card-swatch-02-to, oklch(60% 0.241 6.902deg)) 100%);
  }
  .mol-theme-card__swatch--03 {
    background: linear-gradient(var(--component-theme-card-swatch-angle), var(--component-theme-card-swatch-03-from, oklch(60% 0.181 22.839deg)) 0%, var(--component-theme-card-swatch-03-to, oklch(60% 0.171 70.604deg)) 100%);
  }
  .mol-theme-card__swatch--04 {
    background: linear-gradient(var(--component-theme-card-swatch-angle), var(--component-theme-card-swatch-04-from, oklch(60% 0.182 151.711deg)) 0%, var(--component-theme-card-swatch-04-to, oklch(60% 0.136 154.449deg)) 100%);
  }
  .mol-theme-card__swatch--05 {
    background: linear-gradient(var(--component-theme-card-swatch-angle), var(--component-theme-card-swatch-05-from, oklch(60% 0.074 256.04deg)) 0%, var(--component-theme-card-swatch-05-to, oklch(60% 0.139 91.059deg)) 100%);
  }
  .mol-theme-card__swatch--06 {
    background: linear-gradient(var(--component-theme-card-swatch-angle), var(--component-theme-card-swatch-06-from, oklch(75% 0.15 190deg)) 0%, var(--component-theme-card-swatch-06-to, oklch(65% 0.25 300deg)) 100%);
  }
  .mol-theme-card__swatch--sketch {
    background-color: var(--component-theme-card-swatch-sketch-bg);
    background-image: var(--component-theme-card-swatch-sketch-image);
  }
  .mol-theme-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--semantic-space-component-sm) var(--semantic-space-component-md);
    background-color: var(--semantic-color-bg-primary);
    gap: var(--semantic-space-component-sm);
  }
  .mol-theme-card__name {
    font-family: var(--semantic-font-family-primary);
    font-size: var(--semantic-font-size-body-small);
    font-weight: var(--semantic-font-weight-medium);
    color: var(--semantic-color-text-primary);
  }
  .mol-theme-card__colors {
    display: flex;
    gap: 0.25rem;
    align-items: center;
  }
  .mol-theme-card__dot {
    height: 0.875rem;
    width: 0.875rem;
    border-radius: var(--component-theme-card-dot-border-radius);
    border: var(--component-theme-card-dot-border-width) solid var(--component-theme-card-dot-border-color);
  }
  .mol-theme-card__dot--01-a {
    background-color: var(--component-theme-card-dot-01-a, oklch(60% 0.23 276.966deg));
  }
  .mol-theme-card__dot--01-b {
    background-color: var(--component-theme-card-dot-01-b, oklch(60% 0.165 70.08deg));
  }
  .mol-theme-card__dot--02-a {
    background-color: var(--component-theme-card-dot-02-a, oklch(60% 0.247 293.009deg));
  }
  .mol-theme-card__dot--02-b {
    background-color: var(--component-theme-card-dot-02-b, oklch(60% 0.241 6.902deg));
  }
  .mol-theme-card__dot--03-a {
    background-color: var(--component-theme-card-dot-03-a, oklch(60% 0.181 22.839deg));
  }
  .mol-theme-card__dot--03-b {
    background-color: var(--component-theme-card-dot-03-b, oklch(60% 0.171 70.604deg));
  }
  .mol-theme-card__dot--04-a {
    background-color: var(--component-theme-card-dot-04-a, oklch(60% 0.182 151.711deg));
  }
  .mol-theme-card__dot--04-b {
    background-color: var(--component-theme-card-dot-04-b, oklch(60% 0.136 154.449deg));
  }
  .mol-theme-card__dot--05-a {
    background-color: var(--component-theme-card-dot-05-a, oklch(60% 0.074 256.04deg));
  }
  .mol-theme-card__dot--05-b {
    background-color: var(--component-theme-card-dot-05-b, oklch(60% 0.139 91.059deg));
  }
  .mol-theme-card__dot--06-a {
    background-color: var(--component-theme-card-dot-06-a, oklch(75% 0.15 190deg));
  }
  .mol-theme-card__dot--06-b {
    background-color: var(--component-theme-card-dot-06-b, oklch(65% 0.25 300deg));
  }
  .mol-theme-card__dot--sketch-a {
    background-color: var(--component-theme-card-dot-sketch-a);
  }
  .mol-theme-card__dot--sketch-b {
    background-color: var(--component-theme-card-dot-sketch-b);
  }
}
@layer syx.organisms {
  .org-home-cta {
    border-block: var(--component-cta-border-block-width) solid var(--component-cta-border-color);
    --semantic-shadow-hard-color: var(--component-cta-shadow-hard-color);
    position: relative;
    overflow: hidden;
    padding-block: var(--component-section-padding-block);
    padding-inline: var(--component-section-padding-inline);
    text-align: center;
  }
  .org-home-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: var(--component-cta-bg);
    z-index: 0;
  }
  .org-home-cta::after {
    content: "";
    position: absolute;
    top: var(--component-cta-decor-top);
    right: var(--component-cta-decor-right);
    height: var(--component-cta-decor-size);
    width: var(--component-cta-decor-size);
    background: var(--component-cta-decor-bg);
    border-radius: var(--component-cta-decor-radius);
    z-index: 0;
    pointer-events: none;
  }
  .org-home-cta > * {
    position: relative;
    z-index: 1;
  }
  .org-home-cta__overline {
    display: block;
    margin-bottom: var(--semantic-space-component-md);
    color: var(--component-cta-overline-color);
    font-size: var(--semantic-font-size-overline);
    font-weight: var(--semantic-font-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .org-home-cta__headline {
    font-family: var(--semantic-font-family-heading);
    font-size: var(--component-cta-headline-font-size);
    line-height: var(--semantic-line-height-heading);
    font-weight: var(--semantic-font-weight-black);
    color: var(--component-cta-color);
    letter-spacing: -0.025em;
    margin: 0 auto var(--semantic-space-component-md);
    max-width: 28ch;
  }
  .org-home-cta__sub {
    font-size: var(--semantic-font-size-body);
    line-height: var(--semantic-line-height-body);
    color: var(--component-cta-sub-color);
    max-width: 52ch;
    margin: 0 auto var(--semantic-space-layout-md);
  }
  .org-home-cta__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--semantic-space-component-md);
  }
  .org-home-cta__code {
    display: inline-flex;
    align-items: center;
    gap: var(--semantic-space-component-sm);
    margin-top: var(--semantic-space-layout-sm);
    padding: var(--semantic-space-component-sm) var(--semantic-space-component-md);
    border-radius: var(--component-cta-code-border-radius);
    background-color: var(--component-cta-code-bg);
    border: var(--component-cta-code-border-width) solid var(--component-cta-code-border-color);
    font-family: var(--semantic-font-family-mono);
    font-size: var(--semantic-font-size-body-small);
    color: var(--component-cta-code-color);
  }
}
@layer syx.organisms {
  .org-home-features {
    padding-block: var(--component-section-padding-block);
    padding-inline: var(--component-section-padding-inline);
    background-image: var(--component-section-bg-image);
  }
  .org-home-features__header {
    position: relative;
    counter-increment: syx-section;
  }
  .org-home-features__header::before {
    content: var(--component-section-index-content);
    display: block;
    font-family: var(--component-section-index-font);
    font-size: var(--component-section-index-size);
    letter-spacing: var(--semantic-letter-spacing-wide);
    color: var(--component-section-index-color);
    padding-bottom: var(--component-section-index-gap);
    margin-bottom: var(--component-section-index-gap);
    border-bottom: var(--component-section-tick-width) solid var(--component-section-tick-color);
  }
  .org-home-features__header::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: var(--component-section-tick-width);
    height: var(--component-section-tick-height);
    background-color: var(--component-section-tick-color);
    transform: translateY(calc(var(--component-section-index-size) + var(--component-section-index-gap)));
  }
  .org-home-features__header .atom-pill {
    background-color: var(--component-section-overline-bg);
    border-width: var(--component-section-overline-border-width);
    padding: var(--component-section-overline-padding);
    color: var(--component-section-overline-color);
  }
  .org-home-features__header {
    text-align: var(--component-section-align);
    margin-bottom: var(--semantic-space-layout-lg);
  }
  .org-home-features__header .org-home-features__overline {
    display: block;
    margin-bottom: var(--semantic-space-component-sm);
  }
  .org-home-features__header .org-home-features__title {
    font-family: var(--semantic-font-family-heading);
    font-size: var(--component-section-title-font-size);
    line-height: var(--component-section-title-leading);
    font-weight: var(--component-section-title-weight);
    color: var(--semantic-color-text-primary);
    letter-spacing: var(--component-section-title-tracking);
    margin-inline: var(--component-section-header-margin-inline);
    margin-block-end: var(--semantic-space-component-md);
    max-width: var(--component-section-title-max-width);
  }
  .org-home-features__header .org-home-features__sub {
    font-size: var(--semantic-font-size-body);
    color: var(--semantic-color-text-secondary);
    max-width: 55ch;
    margin-inline: var(--component-section-header-margin-inline);
    line-height: var(--semantic-line-height-body);
  }
  .org-home-features__grid {
    display: grid;
    grid-auto-rows: auto;
    container-type: inline-size;
    container-name: syx-card-grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(18rem, (100% - 2 * var(--component-grid-gutter)) / 3)), 1fr));
    gap: var(--component-grid-gutter);
    margin-inline: var(--component-section-header-margin-inline);
  }
  @container syx-card-grid (max-width: 30rem) {
    .org-home-features .mol-feature-card {
      padding: var(--semantic-space-component-lg);
      gap: var(--semantic-space-component-sm);
    }
  }
  .org-home-features__modes {
    margin: var(--semantic-space-layout-lg) auto 0;
    border-top: var(--component-section-divider-width) solid var(--component-section-divider-color);
    padding-top: var(--semantic-space-layout-md);
  }
  .org-home-features__modes-header {
    text-align: var(--component-section-align);
    margin-bottom: var(--semantic-space-component-lg);
  }
  .org-home-features__modes-title {
    font-family: var(--semantic-font-family-heading);
    font-size: var(--semantic-font-size-body-large);
    font-weight: var(--semantic-font-weight-bold);
    color: var(--semantic-color-text-primary);
    margin-bottom: var(--semantic-space-component-sm);
  }
  .org-home-features__modes-sub {
    font-size: var(--semantic-font-size-body);
    color: var(--semantic-color-text-secondary);
    max-width: 55ch;
    margin-inline: var(--component-section-header-margin-inline);
    line-height: var(--semantic-line-height-body);
  }
  .org-home-features__modes-table-wrap {
    overflow-x: auto;
    background-image: linear-gradient(to right, var(--component-table-scroll-mask), transparent), linear-gradient(to left, var(--component-table-scroll-mask), transparent), linear-gradient(to right, var(--component-table-scroll-hint), transparent), linear-gradient(to left, var(--component-table-scroll-hint), transparent);
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 2.5rem 100%, 2.5rem 100%, 1rem 100%, 1rem 100%;
    background-attachment: local, local, scroll, scroll;
  }
}
@layer syx.organisms {
  .org-home-footer {
    padding-block: var(--component-section-padding-block);
    padding-inline: var(--component-section-padding-inline);
    border-top: var(--component-footer-border-width) solid var(--component-footer-border-color);
    background-color: var(--component-footer-bg);
  }
  .org-home-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--semantic-space-component-md);
    align-items: center;
    text-align: center;
    margin: 0 auto;
  }
  @media (min-width: 50em) {
    .org-home-footer__inner {
      flex-direction: row;
      justify-content: space-between;
      text-align: left;
    }
  }
  .org-home-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--semantic-space-component-sm);
    font-family: var(--semantic-font-family-heading);
    font-size: var(--semantic-font-size-h5);
    font-weight: var(--semantic-font-weight-bold);
    color: var(--semantic-color-text-primary);
    text-decoration: none;
  }
  .org-home-footer__brand:hover {
    color: var(--semantic-color-primary-text);
  }
  .org-home-footer__meta {
    font-size: var(--semantic-font-size-overline);
    color: var(--semantic-color-text-secondary);
    line-height: 1.6;
  }
  .org-home-footer__meta strong {
    color: var(--semantic-color-text-primary);
  }
  .org-home-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--semantic-space-component-sm) var(--semantic-space-component-md);
    justify-content: center;
  }
  @media (min-width: 50em) {
    .org-home-footer__nav {
      justify-content: flex-end;
    }
  }
  .org-home-footer__link {
    font-size: var(--semantic-font-size-body-small);
    color: var(--semantic-color-text-secondary);
    text-decoration: none;
    transition: color var(--semantic-duration-base) var(--semantic-easing-standard);
  }
  @media (prefers-reduced-motion: reduce) {
    .org-home-footer__link {
      transition: none;
    }
  }
  .org-home-footer__link:hover {
    color: var(--semantic-color-primary-text);
  }
  .org-home-footer__divider {
    width: 100%;
    height: var(--component-section-divider-width);
    background-color: var(--component-section-divider-color);
    margin: var(--semantic-space-component-md) 0;
  }
  .org-home-footer__credit {
    width: 100%;
    text-align: center;
    font-size: var(--semantic-font-size-overline);
    color: var(--semantic-color-text-secondary);
    padding-top: var(--semantic-space-component-md);
    border-top: var(--component-section-divider-width) solid var(--component-section-divider-color);
  }
}
@layer syx.organisms {
  @keyframes syx-hero-figure-build {
    from {
      clip-path: inset(100% 0 0 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }
  .org-home-hero {
    position: relative;
    overflow: hidden;
    padding-block: var(--component-section-padding-block);
    padding-inline: var(--component-section-padding-inline);
    padding-block-start: var(--component-hero-padding-block-start);
    text-align: var(--component-hero-text-align);
  }
  .org-home-hero::before {
    content: "";
    position: absolute;
    top: var(--component-hero-backdrop-top);
    left: var(--component-hero-backdrop-left);
    height: var(--component-hero-backdrop-height);
    width: var(--component-hero-backdrop-width);
    transform: var(--component-hero-backdrop-translate);
    background-image: var(--component-hero-backdrop);
    pointer-events: none;
    z-index: 0;
  }
  .org-home-hero {
    display: grid;
    grid-template-columns: var(--component-hero-columns);
    -moz-column-gap: var(--component-hero-column-gap);
         column-gap: var(--component-hero-column-gap);
    align-content: start;
  }
  @media (min-width: 64em) {
    .org-home-hero {
      grid-template-columns: var(--component-hero-columns-wide);
      -moz-column-gap: var(--component-hero-column-gap-wide);
           column-gap: var(--component-hero-column-gap-wide);
    }
  }
  .org-home-hero::after {
    content: "";
    display: var(--component-hero-figure-display, none);
  }
  @media (min-width: 64em) {
    .org-home-hero::after {
      display: var(--component-hero-figure-display-wide);
    }
  }
  .org-home-hero::after {
    grid-column: 2;
    grid-row: 1/span var(--component-hero-figure-row-span);
    align-self: center;
    min-height: var(--component-hero-figure-min-height);
    background-image: var(--component-hero-figure);
    background-size: var(--component-hero-figure-size);
    background-repeat: no-repeat;
    background-position: center;
    opacity: var(--component-hero-figure-opacity);
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .org-home-hero::after {
      animation: syx-hero-figure-build var(--component-hero-figure-build-duration) var(--semantic-easing-linear) both;
    }
  }
  .org-home-hero > * {
    grid-column: 1;
    position: relative;
    z-index: 1;
  }
  .org-home-hero__overline {
    display: inline-block;
    margin-bottom: var(--semantic-space-component-md);
  }
  .org-home-hero__headline {
    font-family: var(--semantic-font-family-heading);
    font-size: var(--component-hero-headline-font-size);
    font-weight: var(--component-hero-headline-weight);
    line-height: var(--component-hero-headline-leading);
    letter-spacing: var(--component-hero-headline-tracking);
    color: var(--semantic-color-text-primary);
    margin-inline: var(--component-hero-content-inline);
    margin-block-end: var(--semantic-space-component-md);
    max-width: var(--component-hero-headline-max-width);
  }
  .org-home-hero__headline-accent {
    background-image: var(--component-hero-accent-bg);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--component-hero-accent-fill);
    color: var(--component-hero-accent-color);
    text-decoration-line: var(--component-hero-accent-decoration-line);
    text-decoration-color: var(--component-hero-accent-decoration-color);
    text-decoration-thickness: var(--component-hero-accent-decoration-thickness);
    text-underline-offset: var(--component-hero-accent-decoration-offset);
  }
  .org-home-hero__sub {
    font-family: var(--semantic-font-family-primary);
    font-size: var(--component-hero-sub-font-size);
    line-height: var(--semantic-line-height-body);
    color: var(--semantic-color-text-secondary);
    max-width: var(--component-hero-sub-max-width);
    margin-inline: var(--component-hero-content-inline);
    margin-block-end: var(--semantic-space-layout-sm);
  }
  .org-home-hero__actions {
    display: flex;
    justify-content: var(--component-hero-justify);
    flex-wrap: wrap;
    gap: var(--semantic-space-component-md);
    margin-bottom: var(--semantic-space-layout-lg);
  }
  .org-home-hero__badge-row {
    display: flex;
    justify-content: var(--component-hero-justify);
    flex-wrap: wrap;
    gap: var(--semantic-space-component-sm);
    margin-bottom: var(--semantic-space-layout-lg);
  }
  .org-home-hero__stats {
    display: flex;
    justify-content: var(--component-hero-justify);
    flex-wrap: wrap;
    gap: var(--semantic-space-layout-md);
    padding-top: var(--semantic-space-layout-sm);
    border-top: var(--component-hero-stats-border-width) solid var(--component-hero-stats-border-color);
    margin-top: var(--semantic-space-layout-sm);
  }
  .org-home-hero__scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: var(--component-hero-scroll-hint-align);
    gap: 0.25rem;
    font-size: var(--semantic-font-size-overline);
    color: var(--semantic-color-text-secondary);
    letter-spacing: var(--semantic-letter-spacing-wide);
    text-transform: uppercase;
    margin-top: var(--semantic-space-layout-md);
    opacity: 0.7;
  }
}
@layer syx.organisms {
  .org-home-layers {
    padding-block: var(--component-section-padding-block);
    padding-inline: var(--component-section-padding-inline);
  }
  .org-home-layers__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--semantic-space-layout-lg);
    margin: 0 auto;
    align-items: center;
  }
  @media (min-width: 50em) {
    .org-home-layers__inner {
      grid-template-columns: 1fr 1fr;
    }
  }
  .org-home-layers__content {
    overflow: hidden;
  }
  .org-home-layers__content .org-home-layers__overline {
    display: block;
    margin-bottom: var(--semantic-space-component-sm);
  }
  .org-home-layers__content .org-home-layers__title {
    font-family: var(--semantic-font-family-heading);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: var(--semantic-line-height-heading);
    font-weight: var(--semantic-font-weight-black);
    color: var(--semantic-color-text-primary);
    letter-spacing: -0.025em;
    margin: 0 0 var(--semantic-space-component-md);
  }
  .org-home-layers__content .org-home-layers__body {
    color: var(--semantic-color-text-secondary);
    line-height: var(--semantic-line-height-body);
    font-size: var(--semantic-font-size-body);
    margin-bottom: var(--semantic-space-layout-sm);
  }
  .org-home-layers__visual {
    display: flex;
    flex-direction: column;
    gap: var(--component-layer-item-gap);
  }
  .org-home-layers__stack-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--semantic-space-component-sm) var(--semantic-space-component-md);
    border-radius: var(--component-layer-item-border-radius);
    border: var(--component-layer-item-border-width) solid var(--component-layer-item-border-color);
    background-color: var(--component-layer-item-bg);
    transition: transform var(--semantic-duration-base) var(--semantic-easing-standard), box-shadow var(--semantic-duration-base) var(--semantic-easing-standard);
  }
  @media (prefers-reduced-motion: reduce) {
    .org-home-layers__stack-item {
      transition: none;
    }
  }
  .org-home-layers__stack-item {
    gap: var(--semantic-space-component-sm);
  }
  .org-home-layers__stack-item:hover {
    box-shadow: var(--component-layer-item-shadow-hover);
  }
  .org-home-layers__stack-item-name {
    font-family: var(--semantic-font-family-mono);
    font-size: var(--semantic-font-size-body-small);
    color: var(--semantic-color-text-primary);
    font-weight: var(--semantic-font-weight-medium);
  }
  .org-home-layers__stack-item-desc {
    font-size: var(--semantic-font-size-overline);
    color: var(--semantic-color-text-secondary);
    text-align: right;
  }
  .org-home-layers__stack-item--utilities {
    border-left: var(--component-layer-item-accent-width) solid var(--component-layer-utilities-accent);
    background-color: var(--component-layer-utilities-bg);
  }
  .org-home-layers__stack-item--utilities .org-home-layers__stack-item-name {
    color: var(--component-layer-utilities-color);
  }
  .org-home-layers__stack-item--organisms {
    border-left: var(--component-layer-item-accent-width) solid var(--component-layer-organisms-accent);
  }
  .org-home-layers__stack-item--organisms .org-home-layers__stack-item-name {
    color: var(--component-layer-organisms-color);
  }
  .org-home-layers__stack-item--molecules {
    border-left: var(--component-layer-item-accent-width) solid var(--component-layer-molecules-accent);
  }
  .org-home-layers__stack-item--molecules .org-home-layers__stack-item-name {
    color: var(--component-layer-molecules-color);
  }
  .org-home-layers__stack-item--atoms {
    border-left: var(--component-layer-item-accent-width) solid var(--component-layer-atoms-accent);
  }
  .org-home-layers__stack-item--atoms .org-home-layers__stack-item-name {
    color: var(--component-layer-atoms-color);
  }
  .org-home-layers__stack-item--tokens {
    border-left: var(--component-layer-item-accent-width) solid var(--component-layer-tokens-accent);
  }
  .org-home-layers__stack-item--tokens .org-home-layers__stack-item-name {
    color: var(--component-layer-tokens-color);
  }
  .org-home-layers__stack-item--base {
    border-left: var(--component-layer-item-accent-width) solid var(--component-layer-base-accent);
  }
  .org-home-layers__stack-item--base .org-home-layers__stack-item-name {
    color: var(--component-layer-base-color);
  }
  .org-home-layers__stack-item--reset {
    border-left: var(--component-layer-item-accent-width) solid var(--component-layer-reset-accent);
  }
  .org-home-layers__stack-item--reset .org-home-layers__stack-item-name {
    color: var(--component-layer-reset-color);
  }
  .org-home-layers__caption {
    font-size: var(--semantic-font-size-overline);
    color: var(--semantic-color-text-secondary);
    text-align: var(--component-section-align);
    margin-top: var(--semantic-space-component-md);
    letter-spacing: var(--semantic-letter-spacing-wide);
    text-transform: uppercase;
  }
}
@layer syx.organisms {
  .org-home-themes {
    padding-block: var(--component-section-padding-block);
    padding-inline: var(--component-section-padding-inline);
    background-color: var(--semantic-color-bg-secondary);
    background-image: var(--component-section-bg-image);
  }
  .org-home-themes__header {
    position: relative;
    counter-increment: syx-section;
  }
  .org-home-themes__header::before {
    content: var(--component-section-index-content);
    display: block;
    font-family: var(--component-section-index-font);
    font-size: var(--component-section-index-size);
    letter-spacing: var(--semantic-letter-spacing-wide);
    color: var(--component-section-index-color);
    padding-bottom: var(--component-section-index-gap);
    margin-bottom: var(--component-section-index-gap);
    border-bottom: var(--component-section-tick-width) solid var(--component-section-tick-color);
  }
  .org-home-themes__header::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: var(--component-section-tick-width);
    height: var(--component-section-tick-height);
    background-color: var(--component-section-tick-color);
    transform: translateY(calc(var(--component-section-index-size) + var(--component-section-index-gap)));
  }
  .org-home-themes__header .atom-pill {
    background-color: var(--component-section-overline-bg);
    border-width: var(--component-section-overline-border-width);
    padding: var(--component-section-overline-padding);
    color: var(--component-section-overline-color);
  }
  .org-home-themes__header {
    text-align: var(--component-section-align);
    margin-bottom: var(--semantic-space-layout-lg);
  }
  .org-home-themes__header .org-home-themes__overline {
    display: block;
    margin-bottom: var(--semantic-space-component-sm);
  }
  .org-home-themes__header .org-home-themes__title {
    font-family: var(--semantic-font-family-heading);
    font-size: var(--component-section-title-font-size);
    line-height: var(--component-section-title-leading);
    font-weight: var(--component-section-title-weight);
    color: var(--semantic-color-text-primary);
    letter-spacing: var(--component-section-title-tracking);
    margin-inline: var(--component-section-header-margin-inline);
    margin-block-end: var(--semantic-space-component-md);
    max-width: var(--component-section-title-max-width);
  }
  .org-home-themes__header .org-home-themes__sub {
    color: var(--semantic-color-text-secondary);
    max-width: 55ch;
    margin-inline: var(--component-section-header-margin-inline);
    line-height: var(--semantic-line-height-body);
  }
  .org-home-themes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--component-theme-grid-min), (100% - 3 * var(--component-grid-gutter)) / 4)), 1fr));
    gap: var(--component-grid-gutter);
    margin-inline: var(--component-section-header-margin-inline);
    margin-block-end: var(--semantic-space-layout-lg);
  }
  .org-home-themes__note {
    text-align: var(--component-section-align);
    font-size: var(--semantic-font-size-body-small);
    color: var(--semantic-color-text-secondary);
    max-width: 55ch;
    margin-inline: var(--component-section-header-margin-inline);
    line-height: var(--semantic-line-height-body);
  }
}
@layer syx.organisms {
  .org-home-tokens {
    padding-block: var(--component-section-padding-block);
    padding-inline: var(--component-section-padding-inline);
    background-color: var(--semantic-color-bg-secondary);
    background-image: var(--component-section-bg-image);
  }
  .org-home-tokens__header {
    position: relative;
    counter-increment: syx-section;
  }
  .org-home-tokens__header::before {
    content: var(--component-section-index-content);
    display: block;
    font-family: var(--component-section-index-font);
    font-size: var(--component-section-index-size);
    letter-spacing: var(--semantic-letter-spacing-wide);
    color: var(--component-section-index-color);
    padding-bottom: var(--component-section-index-gap);
    margin-bottom: var(--component-section-index-gap);
    border-bottom: var(--component-section-tick-width) solid var(--component-section-tick-color);
  }
  .org-home-tokens__header::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: var(--component-section-tick-width);
    height: var(--component-section-tick-height);
    background-color: var(--component-section-tick-color);
    transform: translateY(calc(var(--component-section-index-size) + var(--component-section-index-gap)));
  }
  .org-home-tokens__header .atom-pill {
    background-color: var(--component-section-overline-bg);
    border-width: var(--component-section-overline-border-width);
    padding: var(--component-section-overline-padding);
    color: var(--component-section-overline-color);
  }
  .org-home-tokens__header {
    text-align: var(--component-section-align);
    margin-inline: var(--component-section-header-margin-inline);
    margin-block-end: var(--semantic-space-layout-lg);
  }
  .org-home-tokens__header > *:not(.org-home-tokens__overline) {
    max-width: 52rem;
  }
  .org-home-tokens__overline {
    display: flex;
    justify-content: var(--component-section-justify);
    margin-bottom: 0.75rem;
  }
  .org-home-tokens__title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: var(--semantic-line-height-heading);
    font-weight: 800;
    color: var(--semantic-color-text-primary);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
  }
  .org-home-tokens__sub {
    font-size: var(--semantic-font-size-body);
    color: var(--semantic-color-text-secondary);
    margin: 0;
    line-height: 1.6;
  }
  .org-home-tokens__diagram {
    margin-inline: var(--component-section-header-margin-inline);
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
  }
  .org-home-tokens__layer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    border-radius: var(--component-token-layer-border-radius);
    border: var(--component-token-layer-border-width) solid var(--component-token-layer-border-color);
    padding: 1.5rem;
    background-color: var(--component-token-layer-bg);
    position: relative;
    transition: box-shadow var(--semantic-duration-base) var(--semantic-easing-standard), transform var(--semantic-duration-base) var(--semantic-easing-standard);
  }
  @media (prefers-reduced-motion: reduce) {
    .org-home-tokens__layer {
      transition: none;
    }
  }
  .org-home-tokens__layer:hover {
    transform: translateY(var(--component-token-layer-hover-lift));
    box-shadow: var(--component-token-layer-shadow-hover);
  }
  @media (min-width: 37.5em) {
    .org-home-tokens__layer {
      grid-template-columns: var(--component-token-layer-badge-width) 1fr auto;
      grid-template-rows: auto auto;
      align-items: start;
      gap: 0.5rem 1.5rem;
    }
  }
  .org-home-tokens__layer::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--component-token-layer-stripe-width);
    border-radius: var(--component-token-layer-border-radius) 0 0 var(--component-token-layer-border-radius);
  }
  .org-home-tokens__layer--primitive {
    --_layer-hue: var(--component-token-primitive-accent);
  }
  .org-home-tokens__layer--primitive::before {
    background-color: var(--component-token-primitive-accent);
  }
  .org-home-tokens__layer--primitive .org-home-tokens__layer-badge {
    background-color: var(--component-token-primitive-badge-bg);
    color: var(--component-token-primitive-badge-color);
    border-color: var(--component-token-primitive-badge-border);
  }
  .org-home-tokens__layer--primitive .org-home-tokens__step {
    background-color: var(--component-token-primitive-accent);
    color: var(--component-token-primitive-step-color);
  }
  .org-home-tokens__layer--theme {
    --_layer-hue: var(--component-token-theme-accent);
  }
  .org-home-tokens__layer--theme::before {
    background-color: var(--component-token-theme-accent);
  }
  .org-home-tokens__layer--theme .org-home-tokens__layer-badge {
    background-color: var(--component-token-theme-badge-bg);
    color: var(--component-token-theme-badge-color);
    border-color: var(--component-token-theme-badge-border);
  }
  .org-home-tokens__layer--theme .org-home-tokens__step {
    background-color: var(--component-token-theme-accent);
    color: var(--component-token-theme-step-color);
  }
  .org-home-tokens__layer--semantic {
    --_layer-hue: var(--component-token-semantic-accent);
  }
  .org-home-tokens__layer--semantic::before {
    background-color: var(--component-token-semantic-accent);
  }
  .org-home-tokens__layer--semantic .org-home-tokens__layer-badge {
    background-color: var(--component-token-semantic-badge-bg);
    color: var(--component-token-semantic-badge-color);
    border-color: var(--component-token-semantic-badge-border);
  }
  .org-home-tokens__layer--semantic .org-home-tokens__step {
    background-color: var(--component-token-semantic-accent);
    color: var(--component-token-semantic-step-color);
  }
  .org-home-tokens__layer--component {
    --_layer-hue: var(--component-token-component-accent);
  }
  .org-home-tokens__layer--component::before {
    background-color: var(--component-token-component-accent);
  }
  .org-home-tokens__layer--component .org-home-tokens__layer-badge {
    background-color: var(--component-token-component-badge-bg);
    color: var(--component-token-component-badge-color);
    border-color: var(--component-token-component-badge-border);
  }
  .org-home-tokens__layer--component .org-home-tokens__step {
    background-color: var(--component-token-component-accent);
    color: var(--component-token-component-step-color);
  }
  .org-home-tokens__step {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--component-token-step-radius);
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--component-token-step-color);
    letter-spacing: 0.05em;
    flex-shrink: 0;
    align-self: start;
  }
  @media (min-width: 37.5em) {
    .org-home-tokens__step {
      grid-column: 3;
      grid-row: 1;
    }
  }
  .org-home-tokens__layer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--component-token-badge-radius);
    border: var(--component-token-badge-border-width) solid;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 0.25rem;
  }
  @media (min-width: 37.5em) {
    .org-home-tokens__layer-badge {
      grid-column: 1;
      grid-row: 1/3;
      align-self: center;
      margin-bottom: 0;
      flex-direction: column;
      text-align: var(--component-section-align);
      padding: 0.5rem 0.875rem;
    }
  }
  @media (min-width: 37.5em) {
    .org-home-tokens__layer-badge .atom-icon {
      font-size: 1.25rem;
    }
  }
  .org-home-tokens__layer-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--semantic-color-text-primary);
    margin: 0 0 0.25rem;
  }
  @media (min-width: 37.5em) {
    .org-home-tokens__layer-title {
      grid-column: 2;
      grid-row: 1;
    }
  }
  .org-home-tokens__layer-desc {
    font-size: var(--semantic-font-size-body-small);
    color: var(--semantic-color-text-secondary);
    margin: 0;
    line-height: 1.5;
    max-width: 75ch;
  }
  @media (min-width: 37.5em) {
    .org-home-tokens__layer-desc {
      grid-column: 2;
      grid-row: 2;
    }
  }
  .org-home-tokens__codes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  @media (min-width: 37.5em) {
    .org-home-tokens__codes {
      grid-column: 2;
      grid-row: 3;
      margin-top: 0.5rem;
    }
  }
  .org-home-tokens__codes .atom-code {
    font-size: 0.72rem;
    white-space: nowrap;
  }
  .org-home-tokens__connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem 0;
    gap: 0.125rem;
  }
  .org-home-tokens__connector-line {
    width: 2px;
    height: 1.5rem;
    background-image: var(--component-token-connector-line);
    opacity: var(--component-token-connector-opacity);
  }
  .org-home-tokens__connector-arrow {
    font-size: 1rem;
    color: var(--component-token-connector-arrow-color);
    opacity: 0.6;
    line-height: 1;
  }
  .org-home-tokens__connector-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--semantic-color-text-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .org-home-tokens__rule {
    max-width: 52rem;
    margin: 2rem auto 0;
    border: var(--component-token-rule-border-width) solid var(--component-token-rule-border-color);
    border-radius: var(--component-token-rule-border-radius);
    padding: 1.25rem 1.5rem;
    background-color: var(--component-token-rule-bg);
    display: grid;
    gap: 0.75rem;
  }
  @media (min-width: 37.5em) {
    .org-home-tokens__rule {
      grid-template-columns: auto 1fr;
      align-items: start;
    }
  }
  .org-home-tokens__rule-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--component-token-rule-icon-radius);
    background-color: var(--component-token-rule-icon-bg);
    color: var(--component-token-rule-icon-color);
    flex-shrink: 0;
  }
  .org-home-tokens__rule-body {
    font-size: var(--semantic-font-size-body-small);
    color: var(--semantic-color-text-primary);
    line-height: 1.6;
    margin: 0;
  }
  .org-home-tokens__rule-body strong {
    color: var(--semantic-color-primary-text);
  }
}
@layer syx.utilities {
  .syx-m-0 {
    margin: 0;
  }
  .syx-mt-0 {
    margin-top: 0;
  }
  .syx-mb-0 {
    margin-bottom: 0;
  }
  .syx-ml-0 {
    margin-left: 0;
  }
  .syx-mr-0 {
    margin-right: 0;
  }
  .syx-mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .syx-my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .syx-p-0 {
    padding: 0;
  }
  .syx-pt-0 {
    padding-top: 0;
  }
  .syx-pb-0 {
    padding-bottom: 0;
  }
  .syx-pl-0 {
    padding-left: 0;
  }
  .syx-pr-0 {
    padding-right: 0;
  }
  .syx-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .syx-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .syx-pis-0 {
    padding-inline-start: 0;
  }
  .syx-pie-0 {
    padding-inline-end: 0;
  }
  .syx-m-1 {
    margin: var(--semantic-space-inline-xs);
  }
  .syx-mt-1 {
    margin-top: var(--semantic-space-inline-xs);
  }
  .syx-mb-1 {
    margin-bottom: var(--semantic-space-inline-xs);
  }
  .syx-ml-1 {
    margin-left: var(--semantic-space-inline-xs);
  }
  .syx-mr-1 {
    margin-right: var(--semantic-space-inline-xs);
  }
  .syx-mx-1 {
    margin-left: var(--semantic-space-inline-xs);
    margin-right: var(--semantic-space-inline-xs);
  }
  .syx-my-1 {
    margin-top: var(--semantic-space-inline-xs);
    margin-bottom: var(--semantic-space-inline-xs);
  }
  .syx-p-1 {
    padding: var(--semantic-space-inline-xs);
  }
  .syx-pt-1 {
    padding-top: var(--semantic-space-inline-xs);
  }
  .syx-pb-1 {
    padding-bottom: var(--semantic-space-inline-xs);
  }
  .syx-pl-1 {
    padding-left: var(--semantic-space-inline-xs);
  }
  .syx-pr-1 {
    padding-right: var(--semantic-space-inline-xs);
  }
  .syx-px-1 {
    padding-left: var(--semantic-space-inline-xs);
    padding-right: var(--semantic-space-inline-xs);
  }
  .syx-py-1 {
    padding-top: var(--semantic-space-inline-xs);
    padding-bottom: var(--semantic-space-inline-xs);
  }
  .syx-pis-1 {
    padding-inline-start: var(--semantic-space-inline-xs);
  }
  .syx-pie-1 {
    padding-inline-end: var(--semantic-space-inline-xs);
  }
  .syx-m-2 {
    margin: var(--semantic-space-inline-sm);
  }
  .syx-mt-2 {
    margin-top: var(--semantic-space-inline-sm);
  }
  .syx-mb-2 {
    margin-bottom: var(--semantic-space-inline-sm);
  }
  .syx-ml-2 {
    margin-left: var(--semantic-space-inline-sm);
  }
  .syx-mr-2 {
    margin-right: var(--semantic-space-inline-sm);
  }
  .syx-mx-2 {
    margin-left: var(--semantic-space-inline-sm);
    margin-right: var(--semantic-space-inline-sm);
  }
  .syx-my-2 {
    margin-top: var(--semantic-space-inline-sm);
    margin-bottom: var(--semantic-space-inline-sm);
  }
  .syx-p-2 {
    padding: var(--semantic-space-inline-sm);
  }
  .syx-pt-2 {
    padding-top: var(--semantic-space-inline-sm);
  }
  .syx-pb-2 {
    padding-bottom: var(--semantic-space-inline-sm);
  }
  .syx-pl-2 {
    padding-left: var(--semantic-space-inline-sm);
  }
  .syx-pr-2 {
    padding-right: var(--semantic-space-inline-sm);
  }
  .syx-px-2 {
    padding-left: var(--semantic-space-inline-sm);
    padding-right: var(--semantic-space-inline-sm);
  }
  .syx-py-2 {
    padding-top: var(--semantic-space-inline-sm);
    padding-bottom: var(--semantic-space-inline-sm);
  }
  .syx-pis-2 {
    padding-inline-start: var(--semantic-space-inline-sm);
  }
  .syx-pie-2 {
    padding-inline-end: var(--semantic-space-inline-sm);
  }
  .syx-m-3 {
    margin: var(--semantic-space-inline-md);
  }
  .syx-mt-3 {
    margin-top: var(--semantic-space-inline-md);
  }
  .syx-mb-3 {
    margin-bottom: var(--semantic-space-inline-md);
  }
  .syx-ml-3 {
    margin-left: var(--semantic-space-inline-md);
  }
  .syx-mr-3 {
    margin-right: var(--semantic-space-inline-md);
  }
  .syx-mx-3 {
    margin-left: var(--semantic-space-inline-md);
    margin-right: var(--semantic-space-inline-md);
  }
  .syx-my-3 {
    margin-top: var(--semantic-space-inline-md);
    margin-bottom: var(--semantic-space-inline-md);
  }
  .syx-p-3 {
    padding: var(--semantic-space-inline-md);
  }
  .syx-pt-3 {
    padding-top: var(--semantic-space-inline-md);
  }
  .syx-pb-3 {
    padding-bottom: var(--semantic-space-inline-md);
  }
  .syx-pl-3 {
    padding-left: var(--semantic-space-inline-md);
  }
  .syx-pr-3 {
    padding-right: var(--semantic-space-inline-md);
  }
  .syx-px-3 {
    padding-left: var(--semantic-space-inline-md);
    padding-right: var(--semantic-space-inline-md);
  }
  .syx-py-3 {
    padding-top: var(--semantic-space-inline-md);
    padding-bottom: var(--semantic-space-inline-md);
  }
  .syx-pis-3 {
    padding-inline-start: var(--semantic-space-inline-md);
  }
  .syx-pie-3 {
    padding-inline-end: var(--semantic-space-inline-md);
  }
  .syx-m-4 {
    margin: var(--semantic-space-inline-lg);
  }
  .syx-mt-4 {
    margin-top: var(--semantic-space-inline-lg);
  }
  .syx-mb-4 {
    margin-bottom: var(--semantic-space-inline-lg);
  }
  .syx-ml-4 {
    margin-left: var(--semantic-space-inline-lg);
  }
  .syx-mr-4 {
    margin-right: var(--semantic-space-inline-lg);
  }
  .syx-mx-4 {
    margin-left: var(--semantic-space-inline-lg);
    margin-right: var(--semantic-space-inline-lg);
  }
  .syx-my-4 {
    margin-top: var(--semantic-space-inline-lg);
    margin-bottom: var(--semantic-space-inline-lg);
  }
  .syx-p-4 {
    padding: var(--semantic-space-inline-lg);
  }
  .syx-pt-4 {
    padding-top: var(--semantic-space-inline-lg);
  }
  .syx-pb-4 {
    padding-bottom: var(--semantic-space-inline-lg);
  }
  .syx-pl-4 {
    padding-left: var(--semantic-space-inline-lg);
  }
  .syx-pr-4 {
    padding-right: var(--semantic-space-inline-lg);
  }
  .syx-px-4 {
    padding-left: var(--semantic-space-inline-lg);
    padding-right: var(--semantic-space-inline-lg);
  }
  .syx-py-4 {
    padding-top: var(--semantic-space-inline-lg);
    padding-bottom: var(--semantic-space-inline-lg);
  }
  .syx-pis-4 {
    padding-inline-start: var(--semantic-space-inline-lg);
  }
  .syx-pie-4 {
    padding-inline-end: var(--semantic-space-inline-lg);
  }
  .syx-m-5 {
    margin: var(--semantic-space-layout-xl);
  }
  .syx-mt-5 {
    margin-top: var(--semantic-space-layout-xl);
  }
  .syx-mb-5 {
    margin-bottom: var(--semantic-space-layout-xl);
  }
  .syx-ml-5 {
    margin-left: var(--semantic-space-layout-xl);
  }
  .syx-mr-5 {
    margin-right: var(--semantic-space-layout-xl);
  }
  .syx-mx-5 {
    margin-left: var(--semantic-space-layout-xl);
    margin-right: var(--semantic-space-layout-xl);
  }
  .syx-my-5 {
    margin-top: var(--semantic-space-layout-xl);
    margin-bottom: var(--semantic-space-layout-xl);
  }
  .syx-p-5 {
    padding: var(--semantic-space-layout-xl);
  }
  .syx-pt-5 {
    padding-top: var(--semantic-space-layout-xl);
  }
  .syx-pb-5 {
    padding-bottom: var(--semantic-space-layout-xl);
  }
  .syx-pl-5 {
    padding-left: var(--semantic-space-layout-xl);
  }
  .syx-pr-5 {
    padding-right: var(--semantic-space-layout-xl);
  }
  .syx-px-5 {
    padding-left: var(--semantic-space-layout-xl);
    padding-right: var(--semantic-space-layout-xl);
  }
  .syx-py-5 {
    padding-top: var(--semantic-space-layout-xl);
    padding-bottom: var(--semantic-space-layout-xl);
  }
  .syx-pis-5 {
    padding-inline-start: var(--semantic-space-layout-xl);
  }
  .syx-pie-5 {
    padding-inline-end: var(--semantic-space-layout-xl);
  }
  .syx-pad-section {
    padding: var(--semantic-space-layout-xxl) 0;
  }
  .syx-mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .syx-ml-auto {
    margin-left: auto;
  }
  .syx-mr-auto {
    margin-right: auto;
  }
}
@layer syx.utilities {
  .syx-d-flex {
    display: flex;
  }
  .syx-d-inline-flex {
    display: inline-flex;
  }
  .syx-d-block {
    display: block;
  }
  .syx-d-inline-block {
    display: inline-block;
  }
  .syx-d-inline {
    display: inline;
  }
  .syx-d-none {
    display: none;
  }
  .syx-d-grid {
    display: grid;
  }
  .syx-d-inline-grid {
    display: inline-grid;
  }
  .syx-d-contents {
    display: contents;
  }
  .syx-d-table {
    display: table;
  }
  .syx-d-table-cell {
    display: table-cell;
  }
  .syx-d-table-row {
    display: table-row;
  }
  .syx-d-list-item {
    display: list-item;
  }
  @media (min-width: 48em) {
    .syx-d-sm-only {
      overflow: hidden;
      position: absolute;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      width: 1px;
      height: 1px;
      white-space: nowrap;
    }
  }
  .syx-d-sm-up {
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    white-space: nowrap;
  }
  @media (min-width: 48em) {
    .syx-d-sm-up {
      overflow: visible;
      position: static;
      clip: auto;
      clip-path: none;
      width: auto;
      height: auto;
    }
  }
  .syx-d-md-up {
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    white-space: nowrap;
  }
  @media (min-width: 64em) {
    .syx-d-md-up {
      overflow: visible;
      position: static;
      clip: auto;
      clip-path: none;
      width: auto;
      height: auto;
    }
  }
  .syx-d-lg-up {
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    white-space: nowrap;
  }
  @media (min-width: 80em) {
    .syx-d-lg-up {
      overflow: visible;
      position: static;
      clip: auto;
      clip-path: none;
      width: auto;
      height: auto;
    }
  }
  .syx-d-xlg-up {
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    white-space: nowrap;
  }
  @media (min-width: 90em) {
    .syx-d-xlg-up {
      overflow: visible;
      position: static;
      clip: auto;
      clip-path: none;
      width: auto;
      height: auto;
    }
  }
  .syx-w-full {
    width: 100%;
  }
  .syx-w-auto {
    width: auto;
  }
  .syx-h-full {
    height: 100%;
  }
  .syx-h-auto {
    height: auto;
  }
  .syx-w-screen {
    width: 100vw;
  }
  .syx-h-screen {
    height: 100vh;
  }
  .syx-border {
    border: var(--semantic-border-width-thin) solid var(--semantic-color-border-subtle);
  }
  .syx-border-none {
    border: none;
  }
  .syx-flex-row {
    flex-direction: row;
  }
  .syx-flex-row-reverse {
    flex-direction: row-reverse;
  }
  .syx-flex-col {
    flex-direction: column;
  }
  .syx-flex-col-reverse {
    flex-direction: column-reverse;
  }
  .syx-flex-wrap {
    flex-wrap: wrap;
  }
  .syx-flex-nowrap {
    flex-wrap: nowrap;
  }
  .syx-flex-1 {
    flex: 1 1 0%;
  }
  .syx-flex-auto {
    flex: 1 1 auto;
  }
  .syx-flex-none {
    flex: none;
  }
  .syx-justify-start {
    justify-content: flex-start;
  }
  .syx-justify-end {
    justify-content: flex-end;
  }
  .syx-justify-center {
    justify-content: center;
  }
  .syx-justify-between {
    justify-content: space-between;
  }
  .syx-justify-around {
    justify-content: space-around;
  }
  .syx-justify-evenly {
    justify-content: space-evenly;
  }
  .syx-items-start {
    align-items: flex-start;
  }
  .syx-items-end {
    align-items: flex-end;
  }
  .syx-items-center {
    align-items: center;
  }
  .syx-items-baseline {
    align-items: baseline;
  }
  .syx-items-stretch {
    align-items: stretch;
  }
  .syx-content-start {
    align-content: flex-start;
  }
  .syx-content-end {
    align-content: flex-end;
  }
  .syx-content-center {
    align-content: center;
  }
  .syx-content-between {
    align-content: space-between;
  }
  .syx-content-around {
    align-content: space-around;
  }
  .syx-self-start {
    align-self: flex-start;
  }
  .syx-self-end {
    align-self: flex-end;
  }
  .syx-self-center {
    align-self: center;
  }
  .syx-self-auto {
    align-self: auto;
  }
  .syx-gap-0 {
    gap: 0;
  }
  .syx-gap-1 {
    gap: var(--semantic-space-inline-xs);
  }
  .syx-gap-2 {
    gap: var(--semantic-space-inline-sm);
  }
  .syx-gap-3 {
    gap: var(--semantic-space-inline-md);
  }
  .syx-gap-4 {
    gap: var(--semantic-space-inline-lg);
  }
  .syx-gap-5 {
    gap: var(--semantic-space-layout-xl);
  }
  .syx-col-gap-1 {
    -moz-column-gap: var(--semantic-space-inline-xs);
         column-gap: var(--semantic-space-inline-xs);
  }
  .syx-col-gap-2 {
    -moz-column-gap: var(--semantic-space-inline-sm);
         column-gap: var(--semantic-space-inline-sm);
  }
  .syx-col-gap-3 {
    -moz-column-gap: var(--semantic-space-inline-md);
         column-gap: var(--semantic-space-inline-md);
  }
  .syx-col-gap-4 {
    -moz-column-gap: var(--semantic-space-inline-lg);
         column-gap: var(--semantic-space-inline-lg);
  }
  .syx-col-gap-5 {
    -moz-column-gap: var(--semantic-space-layout-xl);
         column-gap: var(--semantic-space-layout-xl);
  }
  .syx-row-gap-1 {
    row-gap: var(--semantic-space-inline-xs);
  }
  .syx-row-gap-2 {
    row-gap: var(--semantic-space-inline-sm);
  }
  .syx-row-gap-3 {
    row-gap: var(--semantic-space-inline-md);
  }
  .syx-row-gap-4 {
    row-gap: var(--semantic-space-inline-lg);
  }
  .syx-row-gap-5 {
    row-gap: var(--semantic-space-layout-xl);
  }
  .syx-overflow-hidden {
    overflow: hidden;
  }
  .syx-overflow-auto {
    overflow: auto;
  }
  .syx-overflow-scroll {
    overflow: scroll;
  }
  .syx-overflow-x-hidden {
    overflow-x: hidden;
  }
  .syx-overflow-y-auto {
    overflow-y: auto;
  }
  .syx-relative {
    position: relative;
  }
  .syx-absolute {
    position: absolute;
  }
  .syx-sticky {
    position: sticky;
  }
  .syx-fixed {
    position: fixed;
  }
  .syx-static {
    position: static;
  }
  .syx-inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .syx-top-0 {
    top: 0;
  }
  .syx-right-0 {
    right: 0;
  }
  .syx-bottom-0 {
    bottom: 0;
  }
  .syx-left-0 {
    left: 0;
  }
  .syx-valign-top {
    vertical-align: top;
  }
  .syx-valign-middle {
    vertical-align: middle;
  }
  .syx-valign-bottom {
    vertical-align: bottom;
  }
  .syx-valign-baseline {
    vertical-align: baseline;
  }
  .syx-valign-sub {
    vertical-align: sub;
  }
  .syx-valign-super {
    vertical-align: super;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .syx-fade-in {
      animation: fadeIn var(--semantic-duration-slow) cubic-bezier(0.39, 0.575, 0.565, 1) both;
    }
  }
}
@layer syx.utilities {
  .syx-text-primary {
    color: var(--semantic-color-primary);
  }
  .syx-text-secondary {
    color: var(--semantic-color-secondary);
  }
  .syx-prim-text-white {
    color: var(--primitive-color-white);
  }
  .syx-prim-text-black {
    color: var(--primitive-color-black);
  }
  .syx-prim-text-gray {
    color: var(--primitive-color-gray-600);
  }
  .syx-prim-text-muted {
    color: var(--primitive-color-gray-400);
  }
  .syx-text-white {
    color: oklch(100% 0 0deg);
  }
  code.syx-text-white,
  .syx-text-white > code {
    background: var(--component-code-inline-bg);
    color: var(--component-code-inline-color);
  }
  .syx-text-gray {
    color: var(--semantic-color-text-secondary);
  }
  .syx-text-muted {
    color: var(--semantic-color-text-tertiary);
  }
  .syx-text-inverse {
    color: var(--semantic-color-text-inverse);
  }
  .syx-text-error {
    color: var(--semantic-color-error);
  }
  .syx-text-success {
    color: var(--semantic-color-success);
  }
  .syx-text-warning {
    color: var(--semantic-color-warning);
  }
  .syx-text-facebook {
    color: var(--primitive-color-facebook);
  }
  .syx-text-twitter {
    color: var(--primitive-color-twitter);
  }
  .syx-text-instagram {
    color: var(--primitive-color-instagram-blue);
  }
  .syx-text-whatsapp {
    color: var(--primitive-color-whatsapp-green);
  }
  .syx-text-center {
    text-align: center;
  }
  .syx-text-left {
    text-align: left;
  }
  .syx-text-right {
    text-align: right;
  }
  .syx-text-justify {
    text-align: justify;
  }
  .syx-text-start {
    text-align: start;
  }
  .syx-text-end {
    text-align: end;
  }
  .syx-text-underline {
    text-decoration-line: underline;
  }
  .syx-text-overline {
    text-decoration-line: overline;
  }
  .syx-text-strikethrough {
    text-decoration-line: line-through;
  }
  .syx-text-no-underline {
    text-decoration: none;
  }
  .syx-text-uppercase {
    text-transform: uppercase;
  }
  .syx-text-lowercase {
    text-transform: lowercase;
  }
  .syx-text-capitalize {
    text-transform: capitalize;
  }
  .syx-prim-font-regular {
    font-weight: var(--primitive-font-weight-regular);
  }
  .syx-prim-font-medium {
    font-weight: var(--primitive-font-weight-medium);
  }
  .syx-prim-font-bold {
    font-weight: var(--primitive-font-weight-bold);
  }
  .syx-w-full {
    width: 100%;
  }
  .syx-h-full {
    height: 100%;
  }
  .syx-max-w-15ch {
    max-width: 15ch;
  }
  .syx-max-w-50ch {
    max-width: 50ch;
  }
  .syx-max-w-65ch {
    max-width: 65ch;
  }
  .syx-prim-type-display-1 {
    font-size: var(--primitive-fluid-font-display);
    line-height: var(--primitive-line-height-tight);
    font-family: var(--primitive-font-family-syne-bold);
    letter-spacing: var(--primitive-letter-spacing-display);
  }
  .syx-type-h1 {
    font-size: var(--semantic-font-size-h1);
    line-height: var(--semantic-line-height-heading);
    font-family: var(--semantic-font-family-heading);
    letter-spacing: var(--semantic-letter-spacing-tight);
  }
  .syx-type-h2 {
    font-size: var(--semantic-font-size-h2);
    line-height: var(--semantic-line-height-heading);
    font-family: var(--semantic-font-family-heading);
    letter-spacing: var(--semantic-letter-spacing-tight);
  }
  .syx-type-h3 {
    font-size: var(--semantic-font-size-h3);
    line-height: var(--semantic-line-height-heading);
    font-family: var(--semantic-font-family-heading-md);
  }
  .syx-type-h4 {
    font-size: var(--semantic-font-size-h4);
    line-height: var(--semantic-line-height-normal);
    font-family: var(--semantic-font-family-heading-md);
  }
  .syx-type-body-large {
    font-size: var(--semantic-font-size-body-large);
    line-height: var(--semantic-line-height-relaxed);
    font-family: var(--semantic-font-family-primary);
  }
  .syx-type-body {
    font-size: var(--semantic-font-size-body);
    line-height: var(--semantic-line-height-body);
    font-family: var(--semantic-font-family-primary);
  }
  .syx-type-body-small {
    font-size: var(--semantic-font-size-body-small);
    line-height: var(--semantic-line-height-normal);
    font-family: var(--semantic-font-family-primary);
  }
  .syx-type-caption {
    font-size: var(--semantic-font-size-caption);
    line-height: var(--semantic-line-height-caption);
    letter-spacing: var(--semantic-letter-spacing-wide);
    font-family: var(--semantic-font-family-primary);
  }
  .syx-type-label {
    font-size: var(--semantic-font-size-body-small);
    line-height: var(--semantic-line-height-normal);
    font-weight: var(--semantic-font-weight-medium);
    font-family: var(--semantic-font-family-primary);
  }
  .syx-type-overline {
    font-size: var(--semantic-font-size-overline);
    line-height: var(--semantic-line-height-normal);
    font-weight: var(--semantic-font-weight-bold);
    letter-spacing: var(--semantic-letter-spacing-wider);
    text-transform: uppercase;
    font-family: var(--semantic-font-family-primary);
  }
  .syx-prim-type-bold {
    font-weight: var(--primitive-font-weight-bold);
  }
  .syx-prim-type-medium {
    font-weight: var(--primitive-font-weight-medium);
  }
  .syx-prim-bg-white {
    background-color: var(--primitive-color-white);
  }
  .syx-prim-bg-gray-50 {
    background-color: var(--primitive-color-gray-50);
  }
  .syx-prim-bg-gray-100 {
    background-color: var(--primitive-color-gray-100);
  }
  .syx-prim-bg-gray-200 {
    background-color: var(--primitive-color-gray-200);
  }
  .syx-bg-primary {
    background-color: var(--semantic-color-primary);
  }
  .syx-bg-primary-light {
    background-color: var(--semantic-color-bg-secondary);
  }
  .syx-prim-bg-dark {
    background-color: var(--primitive-color-gray-900);
  }
  .syx-bg-transparent {
    background-color: transparent;
  }
  .syx-bg-error {
    background-color: var(--semantic-color-error);
  }
  .syx-bg-success {
    background-color: var(--semantic-color-success);
  }
  .syx-bg-warning {
    background-color: var(--semantic-color-warning);
  }
  .syx-bg-info {
    background-color: var(--semantic-color-info);
  }
  @media (min-width: 48em) {
    .syx-bg-transparent-sm {
      background-color: transparent;
    }
  }
  @media (min-width: 64em) {
    .syx-bg-transparent-md {
      background-color: transparent;
    }
  }
  @media (min-width: 80em) {
    .syx-bg-transparent-lg {
      background-color: transparent;
    }
  }
  .syx-bg-facebook {
    background-color: var(--primitive-color-facebook);
  }
  .syx-bg-twitter {
    background-color: var(--primitive-color-twitter);
  }
  .syx-bg-instagram {
    background-color: var(--primitive-color-instagram-blue);
  }
  .syx-bg-whatsapp {
    background-color: var(--primitive-color-whatsapp-green);
  }
  .syx-mb-0 {
    margin-bottom: 0;
  }
  .syx-mt-0 {
    margin-top: 0;
  }
  .syx-m-0 {
    margin: 0;
  }
}
@layer syx.utilities {
  .syx-img-fluid {
    display: block;
    max-width: 100%;
    height: auto;
  }
  .syx-embed {
    position: relative;
    height: 0;
    display: block;
    overflow: hidden;
  }
  .syx-embed__item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 0;
  }
  .syx-embed--16by9 {
    padding-bottom: 56.25%;
  }
  .syx-embed--8by5 {
    padding-bottom: 62.5%;
  }
  .syx-embed--3by2 {
    padding-bottom: 66.66%;
  }
  .syx-embed--4by3 {
    padding-bottom: 75%;
  }
  .syx-embed--1by1 {
    padding-bottom: 100%;
  }
  .syx-map {
    position: relative;
    height: 0;
    overflow: hidden;
  }
  .syx-map__iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 0;
  }
  .syx-map--16by9 {
    padding-bottom: 56.25%;
  }
  .syx-map--8by5 {
    padding-bottom: 62.5%;
  }
  .syx-map--4by3 {
    padding-bottom: 75%;
  }
  .syx-map--3by2 {
    padding-bottom: 66.66%;
  }
  .syx-map--h100 {
    padding-bottom: 100vh;
  }
  .syx-obj-cover {
    -o-object-fit: cover;
       object-fit: cover;
  }
  .syx-obj-contain {
    -o-object-fit: contain;
       object-fit: contain;
  }
  .syx-obj-fill {
    -o-object-fit: fill;
       object-fit: fill;
  }
  .syx-obj-none {
    -o-object-fit: none;
       object-fit: none;
  }
  .syx-obj-scale-down {
    -o-object-fit: scale-down;
       object-fit: scale-down;
  }
  .syx-obj-center {
    -o-object-position: center;
       object-position: center;
  }
  .syx-obj-top {
    -o-object-position: top;
       object-position: top;
  }
  .syx-obj-bottom {
    -o-object-position: bottom;
       object-position: bottom;
  }
  .syx-bg-cover {
    background-size: cover;
  }
  .syx-bg-contain {
    background-size: contain;
  }
  .syx-bg-auto {
    background-size: auto;
  }
}
@layer syx.utilities {
  .syx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .syx-sr-only-focusable {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .syx-sr-only-focusable:focus, .syx-sr-only-focusable:focus-within {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .syx-skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .syx-skip-link:focus {
    position: fixed;
    top: var(--semantic-space-layout-sm);
    left: var(--semantic-space-layout-sm);
    z-index: var(--semantic-z-index-skip-link, 9999);
    padding: var(--semantic-space-component-sm) var(--semantic-space-component-md);
    background: var(--semantic-color-primary);
    color: var(--semantic-color-text-inverse);
    border-radius: var(--semantic-border-radius-default);
    font-size: var(--semantic-font-size-body-sm);
    font-family: var(--semantic-font-family-primary-bold);
    text-decoration: none;
    box-shadow: var(--semantic-shadow-md);
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  @media (prefers-reduced-motion: reduce) {
    .syx-motion-safe {
      animation: none;
      transition: none;
    }
  }
}