: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(2.441rem, 2.33rem + 0.47vw, 2.747rem);
  --primitive-font-size-3xl: clamp(3.052rem, 2.91rem + 0.58vw, 3.433rem);
  --primitive-font-size-4xl: clamp(3.815rem, 3.63rem + 0.73vw, 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-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-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);
}

: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);
}

: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);
  --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);
  --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);
  --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);
  --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-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);
}

: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);
  --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-shadow-focus: var(--semantic-shadow-focus);
  --component-check-icon-image: var(--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-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(--icon-check);
  --component-switch-icon-off: var(--icon-close);
  --component-switch-status-icon-filter: brightness(0) invert(1);
}

: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);
  --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);
  --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(--icon-chevron-left);
  --component-pagination-icon-next: var(--icon-chevron-right);
  --component-pagination-icon-first: var(--icon-chevron-double-left);
  --component-pagination-icon-last: var(--icon-chevron-double-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-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;
}

: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);
  --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);
}

: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-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);
  --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: var(--semantic-space-component-sm);
  --component-icon-size-md: calc(6 * var(--semantic-space-component-xs));
  --component-icon-size-lg: var(--semantic-space-component-lg);
  --component-icon-size-xl: calc(10 * var(--semantic-space-component-xs));
}

: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-border-focus: var(--semantic-color-border-focus);
  --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);
  --base-measure: var(--primitive-space-base);
  --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);
  --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);
  --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;
  --base-measure: var(--primitive-space-base);
  --semantic-font-family-primary:
    "Inter", system-ui, -apple-system, sans-serif;
  --semantic-font-family-heading:
    "Inter", system-ui, -apple-system, sans-serif;
  --reset-html-font:
    normal normal 400 16px/24px "Inter", system-ui, -apple-system, sans-serif;
  --layout-max-width: 100vw;
  --layout-pad-1: calc(2 * var(--base-measure));
  --layout-gap-1: calc(1 * var(--base-measure));
  --theme-focus-ring-width: 2px;
  --theme-focus: 0 0 0.313rem 0 var(--semantic-focus-ring-color);
  --theme-radius: calc(2 * var(--base-measure));
  --theme-w-border: calc(0.5 * var(--base-measure));
  --semantic-border-width: var(--theme-w-border);
  --semantic-outline-width: var(--theme-focus-ring-width);
  --semantic-border-radius-default: 0.375rem;
  --semantic-border-radius-sm: 0.25rem;
  --semantic-border-radius-lg: 0.75rem;
  --semantic-border-radius-circle: 9999px;
  --semantic-color-primary: oklch(0.55 0.08 240);
  --semantic-color-secondary: oklch(0.45 0.06 240);
  --semantic-color-accent-primary: oklch(0.65 0.1 240);
  --semantic-color-text-primary: oklch(0.95 0.005 240);
  --semantic-color-text-secondary: oklch(0.72 0.015 240);
  --semantic-color-text-tertiary: oklch(0.58 0.012 240);
  --semantic-color-text-inverse: oklch(0.1 0 0);
  --semantic-color-text-disabled: oklch(0.45 0.008 240);
  --semantic-color-bg-primary: oklch(0.13 0.025 240);
  --semantic-color-bg-secondary: oklch(0.18 0.022 240);
  --semantic-color-bg-tertiary: oklch(0.22 0.02 240);
  --semantic-color-bg-inverse: oklch(0.95 0 0);
  --semantic-color-border-subtle: oklch(0.28 0.018 240);
  --semantic-color-border-default: oklch(0.32 0.02 240);
  --semantic-color-border-strong: oklch(0.4 0.022 240);
  --semantic-color-border-focus: oklch(0.65 0.1 240);
  --semantic-color-link-default: oklch(0.7 0.12 240);
  --semantic-color-link-hover: oklch(0.8 0.1 240);
  --semantic-color-link-visited: oklch(0.62 0.1 280);
  --semantic-color-link-active: oklch(0.8 0.1 240);
  --semantic-color-state-hover-primary: oklch(0.65 0.1 240);
  --semantic-focus-ring-color: oklch(0.65 0.1 240);
  --semantic-shadow-focus: 0 0 0 3px oklch(0.65 0.1 240 / 0.35);
  --emotional-ambience-color-start: oklch(0.13 0.025 240 / 0);
  --emotional-ambience-color-end: oklch(0.13 0.025 240 / 0.6);
  --emotional-ambience-glow: oklch(0.55 0.08 240 / 0.15);
  --emotional-marker-ring: oklch(0.55 0.08 240);
  --emotional-marker-glow: oklch(0.55 0.08 240 / 0.4);
  --emotional-popup-bg: oklch(0.18 0.022 240 / 0.96);
  --emotional-popup-border: oklch(0.55 0.08 240 / 0.5);
  --emotional-popup-shadow: 0 8px 32px oklch(0 0 0 / 0.6);
}

@font-face {
  font-family: "Google-Inter--regular";
  src: url("../fonts/google-inter/Inter-Regular.eot?") format("eot"), url("../fonts/google-inter/Inter-Regular.woff2") format("woff2"), url("../fonts/google-inter/Inter-Regular.woff") format("woff"), url("../fonts/google-inter/Inter-Regular.ttf") format("truetype"), url("../fonts/google-inter/Inter-Regular.svg#Google-Inter--regular") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google-Inter--medium";
  src: url("../fonts/google-inter/Inter-Medium.eot?") format("eot"), url("../fonts/google-inter/Inter-Medium.woff2") format("woff2"), url("../fonts/google-inter/Inter-Medium.woff") format("woff"), url("../fonts/google-inter/Inter-Medium.ttf") format("truetype"), url("../fonts/google-inter/Inter-Medium.svg#Google-Inter--medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@layer syx.reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }
  ::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: 0 0 0 rgb(255, 255, 255);
  }
  a:active {
    cursor: pointer;
  }
  button {
    overflow: visible;
    text-transform: none;
  }
  button:focus {
    box-shadow: 0 0 0 rgb(255, 255, 255);
  }
  ul {
    list-style: none;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: monospace, monospace;
    font-size: 1em;
  }
  pre {
    overflow: auto;
    -ms-overflow-style: scrollbar;
  }
  img {
    border-style: none;
  }
  svg:not(:root) {
    overflow: hidden;
  }
  video {
    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] {
    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;
    appearance: none;
    text-transform: none;
  }
  select::-ms-expand {
    display: none;
  }
  input {
    margin: 0;
    -webkit-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;
    appearance: listbox;
  }
  input[type=password]::-ms-reveal {
    display: none;
  }
  input:-webkit-autofill {
    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;
    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;
    appearance: none;
    overflow: auto;
    resize: vertical;
    min-height: 13rem;
    font-size: inherit;
    line-height: inherit;
    border-radius: 0;
  }
  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 {
  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: 1px solid var(--primitive-color-gray-200);
    text-align: left;
  }
  table th {
    font-family: var(--primitive-font-family-syne-bold);
    color: var(--primitive-color-gray-800);
    border-bottom: 2px solid var(--primitive-color-gray-300);
    background-color: var(--primitive-color-gray-50);
  }
  table td {
    color: var(--semantic-color-text-primary);
  }
  table tbody tr:hover {
    background-color: var(--primitive-color-gray-50);
  }
  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: 4px solid var(--semantic-color-primary);
    padding-left: var(--layout-pad-4);
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    color: var(--primitive-color-gray-600);
    background: var(--primitive-color-gray-50);
    padding: var(--layout-pad-3);
    border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
  }
  hr {
    border: 0;
    height: 1px;
    background: var(--primitive-color-gray-200);
    margin: var(--layout-gap-5) 0;
  }
  code {
    background: var(--primitive-color-gray-100);
    color: var(--primitive-color-red-600);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: monospace;
  }
  pre {
    background: var(--primitive-color-gray-900);
    color: var(--primitive-color-gray-100);
    padding: var(--layout-pad-3);
    border-radius: var(--theme-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-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-color-septenary {
    color: var(--semantic-color-septenary);
  }
  .syx-font-weight-1 {
    font-family: var(--font-weight-1);
  }
  .syx-font-weight-2 {
    font-family: var(--font-weight-2);
  }
  .syx-font-weight-3 {
    font-family: var(--font-weight-3);
  }
  .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: 768px) {
    .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: 768px) {
    .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: 768px) {
    .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: 768px) {
    .syx-font-scope-5 {
      font-size: calc(50% + var(--scope-5));
    }
  }
}
@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: 768px) {
    .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: 768px) {
    .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: 768px) {
    .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: 768px) {
    .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-spacer-gap-t-1 {
    margin-top: var(--gap-1);
  }
  @media (min-width: 48em) {
    .syx-spacer-gap-t-1 {
      margin-top: calc(2 * var(--gap-1));
    }
  }
  .syx-spacer-inner-t-1 {
    padding-top: var(--inner-1);
  }
  @media (min-width: 48em) {
    .syx-spacer-inner-t-1 {
      padding-top: calc(2 * var(--inner-1));
    }
  }
}
@layer syx.utilities {
  .syx-bg-auto {
    background-size: auto;
  }
  .syx-bg-cover {
    background-size: cover;
  }
  .syx-bg-contain {
    background-size: contain;
  }
  .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: 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-decoration: none;
    transition: color 0.15s ease, text-decoration 0.15s ease;
  }
  @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-decoration: underline;
  }
  .atom-breadcrumb__link:focus-visible {
    outline: 0.2rem solid var(--component-form-field-border-focus);
    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) solid;
    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 {
    user-select: none;
    text-align: center;
    box-shadow: none;
    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 0.25s ease-out, color 0.25s ease-out, background-color 0.25s ease-out, transform 0.1s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-btn {
      transition: none;
    }
  }
  .atom-btn:active {
    transform: translateY(1px);
  }
  .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, white);
  }
  .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, white);
  }
  .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, white);
  }
  .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, white);
  }
  .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;
  }
  .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) solid var(--semantic-focus-ring-color);
  }
  .atom-btn:disabled {
    cursor: not-allowed;
    border-color: var(--semantic-color-disabled-border);
  }
  .atom-btn.atom-btn--circle {
    border-radius: 50%;
  }
  .atom-btn.atom-btn--filled:disabled {
    background-color: var(--semantic-color-disabled-bg);
  }
  .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-check {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    cursor: pointer;
    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 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  }
  @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: 5px;
    height: 9px;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: rotate(45deg) scale(0) translateY(-1px);
    transform-origin: center;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s ease;
  }
  @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(45deg) scale(1) translateY(-1px);
  }
  .atom-check__input:focus-visible + .atom-check__label::before {
    outline: 0.2rem solid var(--component-form-field-border-focus);
    outline-offset: 2px;
  }
  .atom-check__input:disabled + .atom-check__label {
    opacity: 0.5;
    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-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 0.15s ease, box-shadow 0.15s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-input {
      transition: none;
    }
  }
  .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);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  @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-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .atom-icon--arrow-default:before {
    background-image: var(--icon-arrow-default);
  }
  .atom-icon--arrow-double:before {
    background-image: var(--icon-arrow-double);
  }
  .atom-icon--content-bars:before {
    background-image: var(--icon-content-bars);
  }
  .atom-icon--rrss-email:before {
    background-image: var(--icon-rrss-email);
  }
  .atom-icon--ui-cancel:before {
    background-image: var(--icon-user-interface-cancel);
  }
  .atom-icon--ui-exclamation:before {
    background-image: var(--icon-user-interface-exclamation-mark);
  }
  .atom-icon--ui-home:before {
    background-image: var(--icon-user-interface-home);
  }
  .atom-icon--ui-tick:before {
    background-image: 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 {
    filter: var(--semantic-filter-primary);
  }
  .atom-icon--color-secondary:before {
    filter: var(--semantic-filter-secondary);
  }
  .atom-icon--color-state-ok:before {
    filter: var(--semantic-filter-state-ok);
  }
  .atom-icon--color-state-ko:before {
    filter: var(--semantic-filter-state-ko);
  }
  .atom-icon--color-state-warning:before {
    filter: var(--semantic-filter-state-warning);
  }
  .atom-icon--color-white:before {
    filter: var(--semantic-filter-white);
  }
  .atom-icon--color-black:before {
    filter: var(--semantic-filter-black);
  }
}
:root {
  --lc-icon-home: url("../img/icons/lucide/home.svg");
  --lc-icon-menu: url("../img/icons/lucide/menu.svg");
  --lc-icon-x: url("../img/icons/lucide/x.svg");
  --lc-icon-layers: url("../img/icons/lucide/layers.svg");
  --lc-icon-chevron-right: url("../img/icons/lucide/chevron-right.svg");
  --lc-icon-chevron-left: url("../img/icons/lucide/chevron-left.svg");
  --lc-icon-chevron-down: url("../img/icons/lucide/chevron-down.svg");
  --lc-icon-chevron-up: url("../img/icons/lucide/chevron-up.svg");
  --lc-icon-chevrons-right: url("../img/icons/lucide/chevrons-right.svg");
  --lc-icon-chevrons-down: url("../img/icons/lucide/chevrons-down.svg");
  --lc-icon-arrow-right: url("../img/icons/lucide/arrow-right.svg");
  --lc-icon-arrow-left: url("../img/icons/lucide/arrow-left.svg");
  --lc-icon-search: url("../img/icons/lucide/search.svg");
  --lc-icon-plus: url("../img/icons/lucide/plus.svg");
  --lc-icon-minus: url("../img/icons/lucide/minus.svg");
  --lc-icon-check: url("../img/icons/lucide/check.svg");
  --lc-icon-trash: url("../img/icons/lucide/trash-2.svg");
  --lc-icon-pencil: url("../img/icons/lucide/pencil.svg");
  --lc-icon-download: url("../img/icons/lucide/download.svg");
  --lc-icon-copy: url("../img/icons/lucide/copy.svg");
  --lc-icon-external-link: url("../img/icons/lucide/external-link.svg");
  --lc-icon-filter: url("../img/icons/lucide/filter.svg");
  --lc-icon-rocket: url("../img/icons/lucide/rocket.svg");
  --lc-icon-terminal: url("../img/icons/lucide/terminal.svg");
  --lc-icon-book-open: url("../img/icons/lucide/book-open.svg");
  --lc-icon-github: url("../img/icons/lucide/github.svg");
  --lc-icon-zap: url("../img/icons/lucide/zap.svg");
  --lc-icon-info: url("../img/icons/lucide/info.svg");
  --lc-icon-warning: url("../img/icons/lucide/alert-triangle.svg");
  --lc-icon-success: url("../img/icons/lucide/circle-check.svg");
  --lc-icon-error: url("../img/icons/lucide/circle-x.svg");
  --lc-icon-shield-check: url("../img/icons/lucide/shield-check.svg");
  --lc-icon-moon: url("../img/icons/lucide/moon.svg");
  --lc-icon-sun: url("../img/icons/lucide/sun.svg");
  --lc-icon-palette: url("../img/icons/lucide/palette.svg");
  --lc-icon-user: url("../img/icons/lucide/user.svg");
  --lc-icon-settings: url("../img/icons/lucide/settings.svg");
  --lc-icon-mail: url("../img/icons/lucide/mail.svg");
  --lc-icon-database: url("../img/icons/lucide/database.svg");
  --lc-icon-link: url("../img/icons/lucide/link.svg");
  --lc-icon-component: url("../img/icons/lucide/box.svg");
  --lc-icon-box: url("../img/icons/lucide/box.svg");
  --lc-icon-coins: url("../img/icons/lucide/coins.svg");
  --lc-icon-atom: url("../img/icons/lucide/atom.svg");
  --lc-icon-package: url("../img/icons/lucide/package.svg");
  --lc-icon-file-text: url("../img/icons/lucide/file-text.svg");
  --lc-icon-git-branch: url("../img/icons/lucide/git-branch.svg");
  --lc-icon-bot: url("../img/icons/lucide/bot.svg");
  --lc-icon-activity: url("../img/icons/lucide/activity.svg");
  --lc-icon-check-circle: url("../img/icons/lucide/circle-check.svg");
  --lc-icon-pie-chart: url("../img/icons/lucide/chart-pie.svg");
}

@layer syx.atoms {
  .atom-icon--lc-home:before {
    background-image: url("../img/icons/lucide/home.svg");
  }
  .atom-icon--lc-menu:before {
    background-image: url("../img/icons/lucide/menu.svg");
  }
  .atom-icon--lc-x:before {
    background-image: url("../img/icons/lucide/x.svg");
  }
  .atom-icon--lc-layers:before {
    background-image: url("../img/icons/lucide/layers.svg");
  }
  .atom-icon--lc-chevron-right:before {
    background-image: url("../img/icons/lucide/chevron-right.svg");
  }
  .atom-icon--lc-chevron-left:before {
    background-image: url("../img/icons/lucide/chevron-left.svg");
  }
  .atom-icon--lc-chevron-down:before {
    background-image: url("../img/icons/lucide/chevron-down.svg");
  }
  .atom-icon--lc-chevron-up:before {
    background-image: url("../img/icons/lucide/chevron-up.svg");
  }
  .atom-icon--lc-chevrons-right:before {
    background-image: url("../img/icons/lucide/chevrons-right.svg");
  }
  .atom-icon--lc-chevrons-down:before {
    background-image: url("../img/icons/lucide/chevrons-down.svg");
  }
  .atom-icon--lc-arrow-right:before {
    background-image: url("../img/icons/lucide/arrow-right.svg");
  }
  .atom-icon--lc-arrow-left:before {
    background-image: url("../img/icons/lucide/arrow-left.svg");
  }
  .atom-icon--lc-search:before {
    background-image: url("../img/icons/lucide/search.svg");
  }
  .atom-icon--lc-plus:before {
    background-image: url("../img/icons/lucide/plus.svg");
  }
  .atom-icon--lc-minus:before {
    background-image: url("../img/icons/lucide/minus.svg");
  }
  .atom-icon--lc-check:before {
    background-image: url("../img/icons/lucide/check.svg");
  }
  .atom-icon--lc-trash:before {
    background-image: url("../img/icons/lucide/trash-2.svg");
  }
  .atom-icon--lc-pencil:before {
    background-image: url("../img/icons/lucide/pencil.svg");
  }
  .atom-icon--lc-download:before {
    background-image: url("../img/icons/lucide/download.svg");
  }
  .atom-icon--lc-copy:before {
    background-image: url("../img/icons/lucide/copy.svg");
  }
  .atom-icon--lc-external-link:before {
    background-image: url("../img/icons/lucide/external-link.svg");
  }
  .atom-icon--lc-filter:before {
    background-image: url("../img/icons/lucide/filter.svg");
  }
  .atom-icon--lc-rocket:before {
    background-image: url("../img/icons/lucide/rocket.svg");
  }
  .atom-icon--lc-terminal:before {
    background-image: url("../img/icons/lucide/terminal.svg");
  }
  .atom-icon--lc-book-open:before {
    background-image: url("../img/icons/lucide/book-open.svg");
  }
  .atom-icon--lc-github:before {
    background-image: url("../img/icons/lucide/github.svg");
  }
  .atom-icon--lc-zap:before {
    background-image: url("../img/icons/lucide/zap.svg");
  }
  .atom-icon--lc-info:before {
    background-image: url("../img/icons/lucide/info.svg");
  }
  .atom-icon--lc-warning:before {
    background-image: url("../img/icons/lucide/alert-triangle.svg");
  }
  .atom-icon--lc-success:before {
    background-image: url("../img/icons/lucide/circle-check.svg");
  }
  .atom-icon--lc-error:before {
    background-image: url("../img/icons/lucide/circle-x.svg");
  }
  .atom-icon--lc-shield-check:before {
    background-image: url("../img/icons/lucide/shield-check.svg");
  }
  .atom-icon--lc-moon:before {
    background-image: url("../img/icons/lucide/moon.svg");
  }
  .atom-icon--lc-sun:before {
    background-image: url("../img/icons/lucide/sun.svg");
  }
  .atom-icon--lc-palette:before {
    background-image: url("../img/icons/lucide/palette.svg");
  }
  .atom-icon--lc-user:before {
    background-image: url("../img/icons/lucide/user.svg");
  }
  .atom-icon--lc-settings:before {
    background-image: url("../img/icons/lucide/settings.svg");
  }
  .atom-icon--lc-mail:before {
    background-image: url("../img/icons/lucide/mail.svg");
  }
  .atom-icon--lc-database:before {
    background-image: url("../img/icons/lucide/database.svg");
  }
  .atom-icon--lc-link:before {
    background-image: url("../img/icons/lucide/link.svg");
  }
  .atom-icon--lc-component:before {
    background-image: url("../img/icons/lucide/box.svg");
  }
  .atom-icon--lc-box:before {
    background-image: url("../img/icons/lucide/box.svg");
  }
  .atom-icon--lc-coins:before {
    background-image: url("../img/icons/lucide/coins.svg");
  }
  .atom-icon--lc-atom:before {
    background-image: url("../img/icons/lucide/atom.svg");
  }
  .atom-icon--lc-package:before {
    background-image: url("../img/icons/lucide/package.svg");
  }
  .atom-icon--lc-file-text:before {
    background-image: url("../img/icons/lucide/file-text.svg");
  }
  .atom-icon--lc-git-branch:before {
    background-image: url("../img/icons/lucide/git-branch.svg");
  }
  .atom-icon--lc-bot:before {
    background-image: url("../img/icons/lucide/bot.svg");
  }
  .atom-icon--lc-activity:before {
    background-image: url("../img/icons/lucide/activity.svg");
  }
  .atom-icon--lc-check-circle:before {
    background-image: url("../img/icons/lucide/circle-check.svg");
  }
  .atom-icon--lc-pie-chart:before {
    background-image: url("../img/icons/lucide/chart-pie.svg");
  }
}
@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 0.3s ease-in-out, box-shadow 0.3s ease-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: 0.2rem solid var(--component-link-primary-shadow-focus);
  }
  .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: 50%;
    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 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  @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: 0.2rem solid var(--component-pagination-shadow-focus);
    outline-offset: 2px;
  }
  .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;
    padding: calc(var(--semantic-space-component-xs, 0.25rem) * 2) calc(var(--semantic-space-component-xs, 0.25rem) * 6);
    border-radius: 999px;
    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: 1;
    white-space: nowrap;
    background-color: var(--semantic-color-bg-tertiary);
    color: var(--semantic-color-text-secondary);
  }
  .atom-pill--primary {
    background-color: var(--primitive-color-blue-50);
    color: var(--primitive-color-blue-600);
    border: 1px solid var(--primitive-color-blue-200);
  }
  .atom-pill--secondary {
    background-color: var(--primitive-color-purple-50);
    color: var(--primitive-color-purple-600);
    border: 1px solid var(--primitive-color-purple-200);
  }
  .atom-pill--success {
    background-color: var(--primitive-color-green-50);
    color: var(--primitive-color-green-600);
  }
  .atom-pill--warning {
    background-color: var(--primitive-color-yellow-50);
    color: var(--primitive-color-yellow-700);
  }
  .atom-pill--danger {
    background-color: var(--primitive-color-red-50);
    color: var(--primitive-color-red-600);
  }
  .atom-pill--dark {
    background-color: var(--semantic-color-bg-inverse);
    color: var(--semantic-color-text-inverse);
  }
  .atom-pill--neutral {
    background-color: var(--semantic-color-bg-tertiary);
    border: 1px solid var(--semantic-color-border-subtle);
    color: var(--semantic-color-text-secondary);
  }
  .atom-pill--subtle {
    background-color: transparent;
    border: 1px solid var(--semantic-color-border-default);
    color: var(--semantic-color-text-tertiary);
  }
}
@layer syx.atoms {
  .atom-radio {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    cursor: pointer;
    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: 50%;
    background-color: var(--component-radio-bg);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  }
  @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: 50%;
    background-color: var(--semantic-color-text-inverse);
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @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: 0.2rem solid var(--component-form-field-border-focus);
    outline-offset: 2px;
  }
  .atom-radio__input:disabled + .atom-radio__label {
    opacity: 0.5;
    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-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--semantic-space-component-sm);
    cursor: pointer;
    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: 100px;
    border: var(--component-form-field-border-width) solid var(--component-switch-border-color);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }
  @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(--semantic-shadow-sm);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @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: 0.2rem solid var(--component-form-field-border-focus);
    outline-offset: 2px;
  }
  .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 {
    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-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: 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(--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(--icon-alert) 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-btn-group,
  .cont-set-btn {
    display: flex;
    gap: var(--mol-btn-group-gap, 1rem);
    align-items: center;
    flex-wrap: wrap;
  }
}
@layer syx.molecules {
  .mol-label-group,
  .cont-set-label {
    display: flex;
    gap: var(--mol-label-group-gap, 0.5rem);
    align-items: center;
    flex-wrap: wrap;
  }
}
@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: 12.5rem;
  }
}
@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(--semantic-space-layout-md);
    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);
  }
  .org-site-header__brand:hover {
    color: var(--semantic-color-primary);
  }
  .org-site-header__nav {
    display: none;
    align-items: center;
    gap: var(--semantic-space-component-lg, 1.5rem);
  }
  @media (min-width: 80em) {
    .org-site-header__nav {
      display: flex;
    }
  }
  .org-site-header__nav a {
    font-family: var(--semantic-font-family-body);
    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);
    border-bottom-color: var(--semantic-color-primary);
    outline: none;
  }
  .org-site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--semantic-space-component-sm);
  }
  .org-site-header__theme-select {
    display: none;
  }
  @media (min-width: 80em) {
    .org-site-header__theme-select {
      display: block;
    }
  }
  .org-site-header__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    height: 2.5rem;
    width: 2.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.5rem;
    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);
    outline: none;
  }
  .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-body);
    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);
    outline: none;
  }
  .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: 2.25rem;
    width: 2.25rem;
    background: none;
    border: 1px solid var(--semantic-color-border-subtle);
    border-radius: 0.5rem;
    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);
    border-color: var(--semantic-color-primary);
    outline: none;
  }
  .org-site-header__darkmode .atom-icon {
    pointer-events: none;
  }
}
body[data-emotion-theme=anger] {
  --semantic-color-primary: oklch(0.58 0.22 20);
  --semantic-color-secondary: oklch(0.44 0.18 22);
  --semantic-color-accent-primary: oklch(0.65 0.25 18);
  --semantic-color-state-hover-primary: oklch(0.7 0.22 18);
  --semantic-focus-ring-color: oklch(0.65 0.25 18);
  --semantic-color-border-focus: oklch(0.65 0.25 18);
  --semantic-color-bg-primary: oklch(0.1 0.04 18);
  --semantic-color-bg-secondary: oklch(0.16 0.06 18);
  --semantic-color-bg-tertiary: oklch(0.2 0.07 18);
  --semantic-color-text-primary: oklch(0.96 0.008 40);
  --semantic-color-text-secondary: oklch(0.74 0.015 25);
  --semantic-color-text-tertiary: oklch(0.58 0.012 25);
  --semantic-color-link-default: oklch(0.7 0.2 20);
  --semantic-color-link-hover: oklch(0.8 0.18 20);
  --semantic-color-border-subtle: oklch(0.22 0.06 20);
  --semantic-color-border-default: oklch(0.3 0.1 20);
  --semantic-color-border-strong: oklch(0.42 0.15 20);
  --emotional-ambience-color-start: oklch(0.1 0.04 18 / 0);
  --emotional-ambience-color-end: oklch(0.58 0.22 20 / 0.25);
  --emotional-ambience-glow: oklch(0.7 0.25 15 / 0.3);
  --emotional-marker-ring: oklch(0.65 0.25 18);
  --emotional-marker-glow: oklch(0.65 0.25 18 / 0.5);
  --emotional-popup-bg: oklch(0.14 0.06 18 / 0.96);
  --emotional-popup-border: oklch(0.58 0.22 20 / 0.6);
  --emotional-popup-shadow: 0 8px 40px oklch(0.58 0.22 20 / 0.4);
}

body[data-emotion-theme=sadness] {
  --semantic-color-primary: oklch(0.52 0.14 255);
  --semantic-color-secondary: oklch(0.42 0.11 258);
  --semantic-color-accent-primary: oklch(0.6 0.16 252);
  --semantic-color-state-hover-primary: oklch(0.65 0.14 250);
  --semantic-focus-ring-color: oklch(0.6 0.16 252);
  --semantic-color-border-focus: oklch(0.6 0.16 252);
  --semantic-color-bg-primary: oklch(0.1 0.03 255);
  --semantic-color-bg-secondary: oklch(0.15 0.04 255);
  --semantic-color-bg-tertiary: oklch(0.19 0.05 255);
  --semantic-color-text-primary: oklch(0.93 0.008 250);
  --semantic-color-text-secondary: oklch(0.7 0.012 255);
  --semantic-color-text-tertiary: oklch(0.55 0.01 255);
  --semantic-color-link-default: oklch(0.68 0.15 252);
  --semantic-color-link-hover: oklch(0.78 0.13 252);
  --semantic-color-border-subtle: oklch(0.2 0.04 255);
  --semantic-color-border-default: oklch(0.28 0.08 255);
  --semantic-color-border-strong: oklch(0.38 0.12 255);
  --emotional-ambience-color-start: oklch(0.1 0.03 255 / 0);
  --emotional-ambience-color-end: oklch(0.52 0.14 255 / 0.2);
  --emotional-ambience-glow: oklch(0.55 0.18 252 / 0.22);
  --emotional-marker-ring: oklch(0.6 0.16 252);
  --emotional-marker-glow: oklch(0.6 0.16 252 / 0.45);
  --emotional-popup-bg: oklch(0.14 0.04 255 / 0.96);
  --emotional-popup-border: oklch(0.52 0.14 255 / 0.55);
  --emotional-popup-shadow: 0 8px 40px oklch(0.52 0.14 255 / 0.35);
}

body[data-emotion-theme=fear] {
  --semantic-color-primary: oklch(0.48 0.16 295);
  --semantic-color-secondary: oklch(0.38 0.12 298);
  --semantic-color-accent-primary: oklch(0.56 0.18 290);
  --semantic-color-state-hover-primary: oklch(0.62 0.16 288);
  --semantic-focus-ring-color: oklch(0.56 0.18 290);
  --semantic-color-border-focus: oklch(0.56 0.18 290);
  --semantic-color-bg-primary: oklch(0.08 0.05 295);
  --semantic-color-bg-secondary: oklch(0.13 0.07 295);
  --semantic-color-bg-tertiary: oklch(0.17 0.08 295);
  --semantic-color-text-primary: oklch(0.92 0.006 295);
  --semantic-color-text-secondary: oklch(0.68 0.01 295);
  --semantic-color-text-tertiary: oklch(0.52 0.008 295);
  --semantic-color-link-default: oklch(0.65 0.17 290);
  --semantic-color-link-hover: oklch(0.75 0.15 290);
  --semantic-color-border-subtle: oklch(0.18 0.07 295);
  --semantic-color-border-default: oklch(0.26 0.1 295);
  --semantic-color-border-strong: oklch(0.36 0.14 295);
  --emotional-ambience-color-start: oklch(0.08 0.05 295 / 0);
  --emotional-ambience-color-end: oklch(0.4 0.18 295 / 0.28);
  --emotional-ambience-glow: oklch(0.48 0.22 290 / 0.28);
  --emotional-marker-ring: oklch(0.56 0.18 290);
  --emotional-marker-glow: oklch(0.56 0.18 290 / 0.5);
  --emotional-popup-bg: oklch(0.11 0.07 295 / 0.97);
  --emotional-popup-border: oklch(0.48 0.16 295 / 0.6);
  --emotional-popup-shadow: 0 8px 40px oklch(0.4 0.18 295 / 0.45);
}

body[data-emotion-theme=joy] {
  --semantic-color-primary: oklch(0.75 0.18 85);
  --semantic-color-secondary: oklch(0.65 0.15 88);
  --semantic-color-accent-primary: oklch(0.82 0.2 82);
  --semantic-color-state-hover-primary: oklch(0.85 0.18 82);
  --semantic-focus-ring-color: oklch(0.82 0.2 82);
  --semantic-color-border-focus: oklch(0.82 0.2 82);
  --semantic-color-bg-primary: oklch(0.12 0.04 85);
  --semantic-color-bg-secondary: oklch(0.18 0.05 82);
  --semantic-color-bg-tertiary: oklch(0.22 0.06 80);
  --semantic-color-text-primary: oklch(0.97 0.012 85);
  --semantic-color-text-secondary: oklch(0.8 0.025 78);
  --semantic-color-text-tertiary: oklch(0.65 0.018 82);
  --semantic-color-link-default: oklch(0.8 0.18 84);
  --semantic-color-link-hover: oklch(0.9 0.15 84);
  --semantic-color-border-subtle: oklch(0.22 0.05 82);
  --semantic-color-border-default: oklch(0.35 0.08 82);
  --semantic-color-border-strong: oklch(0.52 0.14 82);
  --emotional-ambience-color-start: oklch(0.12 0.04 85 / 0);
  --emotional-ambience-color-end: oklch(0.75 0.18 85 / 0.18);
  --emotional-ambience-glow: oklch(0.82 0.22 82 / 0.35);
  --emotional-marker-ring: oklch(0.82 0.2 82);
  --emotional-marker-glow: oklch(0.82 0.2 82 / 0.55);
  --emotional-popup-bg: oklch(0.15 0.05 82 / 0.96);
  --emotional-popup-border: oklch(0.75 0.18 85 / 0.55);
  --emotional-popup-shadow: 0 8px 40px oklch(0.75 0.18 85 / 0.35);
}

body[data-emotion-theme=surprise] {
  --semantic-color-primary: oklch(0.72 0.16 196);
  --semantic-color-secondary: oklch(0.6 0.13 198);
  --semantic-color-accent-primary: oklch(0.8 0.18 194);
  --semantic-color-state-hover-primary: oklch(0.85 0.16 192);
  --semantic-focus-ring-color: oklch(0.8 0.18 194);
  --semantic-color-border-focus: oklch(0.8 0.18 194);
  --semantic-color-bg-primary: oklch(0.1 0.03 196);
  --semantic-color-bg-secondary: oklch(0.15 0.04 196);
  --semantic-color-bg-tertiary: oklch(0.19 0.05 196);
  --semantic-color-text-primary: oklch(0.96 0.008 196);
  --semantic-color-text-secondary: oklch(0.75 0.015 196);
  --semantic-color-text-tertiary: oklch(0.6 0.012 196);
  --semantic-color-link-default: oklch(0.78 0.16 194);
  --semantic-color-link-hover: oklch(0.88 0.14 194);
  --semantic-color-border-subtle: oklch(0.2 0.04 196);
  --semantic-color-border-default: oklch(0.3 0.08 196);
  --semantic-color-border-strong: oklch(0.42 0.12 196);
  --emotional-ambience-color-start: oklch(0.1 0.03 196 / 0);
  --emotional-ambience-color-end: oklch(0.72 0.16 196 / 0.2);
  --emotional-ambience-glow: oklch(0.8 0.2 194 / 0.32);
  --emotional-marker-ring: oklch(0.8 0.18 194);
  --emotional-marker-glow: oklch(0.8 0.18 194 / 0.5);
  --emotional-popup-bg: oklch(0.13 0.04 196 / 0.96);
  --emotional-popup-border: oklch(0.72 0.16 196 / 0.55);
  --emotional-popup-shadow: 0 8px 40px oklch(0.72 0.16 196 / 0.38);
}

body[data-emotion-theme=disgust] {
  --semantic-color-primary: oklch(0.62 0.18 130);
  --semantic-color-secondary: oklch(0.5 0.14 132);
  --semantic-color-accent-primary: oklch(0.7 0.2 128);
  --semantic-color-state-hover-primary: oklch(0.75 0.18 126);
  --semantic-focus-ring-color: oklch(0.7 0.2 128);
  --semantic-color-border-focus: oklch(0.7 0.2 128);
  --semantic-color-bg-primary: oklch(0.1 0.04 130);
  --semantic-color-bg-secondary: oklch(0.15 0.06 130);
  --semantic-color-bg-tertiary: oklch(0.19 0.07 130);
  --semantic-color-text-primary: oklch(0.95 0.01 130);
  --semantic-color-text-secondary: oklch(0.72 0.018 130);
  --semantic-color-text-tertiary: oklch(0.57 0.014 130);
  --semantic-color-link-default: oklch(0.72 0.18 128);
  --semantic-color-link-hover: oklch(0.82 0.16 128);
  --semantic-color-border-subtle: oklch(0.2 0.05 130);
  --semantic-color-border-default: oklch(0.28 0.09 130);
  --semantic-color-border-strong: oklch(0.4 0.14 130);
  --emotional-ambience-color-start: oklch(0.1 0.04 130 / 0);
  --emotional-ambience-color-end: oklch(0.55 0.18 130 / 0.22);
  --emotional-ambience-glow: oklch(0.65 0.22 128 / 0.3);
  --emotional-marker-ring: oklch(0.7 0.2 128);
  --emotional-marker-glow: oklch(0.7 0.2 128 / 0.5);
  --emotional-popup-bg: oklch(0.13 0.05 130 / 0.96);
  --emotional-popup-border: oklch(0.62 0.18 130 / 0.55);
  --emotional-popup-shadow: 0 8px 40px oklch(0.55 0.18 130 / 0.38);
}

@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 {
    column-gap: var(--semantic-space-inline-xs);
  }
  .syx-col-gap-2 {
    column-gap: var(--semantic-space-inline-sm);
  }
  .syx-col-gap-3 {
    column-gap: var(--semantic-space-inline-md);
  }
  .syx-col-gap-4 {
    column-gap: var(--semantic-space-inline-lg);
  }
  .syx-col-gap-5 {
    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 1.2s 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-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 {
    object-fit: cover;
  }
  .syx-obj-contain {
    object-fit: contain;
  }
  .syx-obj-fill {
    object-fit: fill;
  }
  .syx-obj-none {
    object-fit: none;
  }
  .syx-obj-scale-down {
    object-fit: scale-down;
  }
  .syx-obj-center {
    object-position: center;
  }
  .syx-obj-top {
    object-position: top;
  }
  .syx-obj-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: 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-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;
    }
  }
}