:root {
--sx-gray-0: #fafafa;
--sx-gray-1: #f5f5f7;
--sx-gray-2: #e4e5e7;
--sx-gray-3: #cdced0;
--sx-gray-4: #b2b4b8;
--sx-gray-5: #909398;
--sx-gray-6: #76797f;
--sx-gray-7: #4c4e52;
--sx-gray-8: #2c2e30;
--sx-gray-9: #121212;
--sx-blue-0: #e6f1ff;
--sx-blue-1: #c2ddff;
--sx-blue-2: #8fc1ff;
--sx-blue-3: #66abff;
--sx-blue-4: #3d94ff;
--sx-blue-5: #2989ff;
--sx-blue-6: #1881ff;
--sx-blue-7: #0067e6;
--sx-blue-8: #0055bd;
--sx-blue-9: #004394;
--sx-red-0: #fef2f2;
--sx-red-1: #fee2e2;
--sx-red-2: #fecaca;
--sx-red-3: #fca5a5;
--sx-red-4: #f87171;
--sx-red-5: #ef4444;
--sx-red-6: #dc2626;
--sx-red-7: #b91c1c;
--sx-red-8: #991b1b;
--sx-red-9: #7f1d1d;
--sx-green-0: #f0fdf4;
--sx-green-1: #dcfce7;
--sx-green-2: #bbf7d0;
--sx-green-3: #86efac;
--sx-green-4: #4ade80;
--sx-green-5: #22c55e;
--sx-green-6: #16a34a;
--sx-green-7: #15803d;
--sx-green-8: #166534;
--sx-green-9: #14532d;
--sx-amber-0: #fffbeb;
--sx-amber-1: #fef3c7;
--sx-amber-2: #fde68a;
--sx-amber-3: #fcd34d;
--sx-amber-4: #fbbf24;
--sx-amber-5: #f59e0b;
--sx-amber-6: #d97706;
--sx-amber-7: #b45309;
--sx-amber-8: #92400e;
--sx-amber-9: #78350f;
--sx-dark-0: #c9c9c9;
--sx-dark-1: #b8b8b8;
--sx-dark-2: #828282;
--sx-dark-3: #696969;
--sx-dark-4: #424242;
--sx-dark-5: #3b3b3b;
--sx-dark-6: #2e2e2e;
--sx-dark-7: #242424;
--sx-dark-8: #1f1f1f;
--sx-dark-9: #141414;
--sx-white: #ffffff;
--sx-black: #000000;
--sx-brand-green: #00ff85;
--sx-brand-blue: #1881ff;
--sx-brand-blue-2: #006bd6;
--sx-brand-lightblue: #cce3ff;
--sx-brand-darkblue: #06172e;
--sx-brand-grey: #8d9eb4;
--sx-brand-darkgrey: #486284;
--sx-brand-lightgrey: #f5f5f7;
--sx-brand-red: #ff0000;
--sx-brand-border: #cccccc;
--sx-brand-background: #fafafa;
--sx-brand-mist: #f2f3f7;
--sx-brand-mint: #adffd8;
--sx-gradient-1: linear-gradient(127deg, #1881ff 6.86%, #003d75 88%);
--sx-gradient-2: linear-gradient(127deg, #3c4d62 6.86%, #000000 88%);
--sx-gradient-3: linear-gradient(154deg, #06172e 0.14%, #1881ff 57.12%, #adffd8 108.87%);
--sx-dot-red: #ff5f57;
--sx-dot-yellow: #febc2e;
--sx-dot-green: #28c840;
--sx-color-body: var(--sx-white);
--sx-color-chrome: var(--sx-black);
--sx-color-surface: var(--sx-white);
--sx-color-surface-subtle: var(--sx-gray-0);
--sx-color-surface-muted: var(--sx-gray-1);
--sx-color-hover: var(--sx-gray-0);
--sx-color-selected: var(--sx-blue-1);
--sx-color-selected-hover: var(--sx-blue-0);
--sx-color-text: var(--sx-black);
--sx-color-title: var(--sx-gray-8);
--sx-color-text-secondary: var(--sx-gray-7);
--sx-color-dimmed: var(--sx-gray-6);
--sx-color-placeholder: var(--sx-gray-5);
--sx-color-disabled: var(--sx-gray-2);
--sx-color-disabled-text: var(--sx-gray-5);
--sx-color-on-chrome: var(--sx-white);
--sx-color-on-chrome-muted: var(--sx-gray-5);
--sx-color-on-chrome-hover: rgba(255, 255, 255, 0.1);
--sx-color-link: var(--sx-blue-6);
--sx-color-border-subtle: var(--sx-gray-2);
--sx-color-border: var(--sx-gray-3);
--sx-color-border-strong: var(--sx-gray-4);
--sx-color-primary: var(--sx-blue-6);
--sx-color-primary-hover: var(--sx-blue-7);
--sx-color-primary-contrast: var(--sx-white);
--sx-color-primary-light: rgba(24, 129, 255, 0.1);
--sx-color-primary-light-hover: rgba(24, 129, 255, 0.12);
--sx-color-primary-outline-hover: rgba(24, 129, 255, 0.05);
--sx-color-danger: var(--sx-red-6);
--sx-color-danger-hover: var(--sx-red-7);
--sx-color-danger-light: rgba(220, 38, 38, 0.1);
--sx-color-danger-light-hover: rgba(220, 38, 38, 0.12);
--sx-color-success: var(--sx-green-6);
--sx-color-success-light: rgba(22, 163, 74, 0.1);
--sx-color-warning: var(--sx-amber-6);
--sx-color-warning-light: rgba(217, 119, 6, 0.12);
--sx-color-neutral-light: rgba(118, 121, 127, 0.1);
--sx-color-neutral-light-hover: rgba(118, 121, 127, 0.12);
--sx-color-accent: var(--sx-brand-green);
--sx-color-on-accent: var(--sx-black);
--sx-overlay: rgba(0, 0, 0, 0.6);
--sx-loading-veil: rgba(255, 255, 255, 0.3);
--sx-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--sx-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", sans-serif;
--sx-font-mono: var(--sx-font-sans);
--sx-font-code: var(--sx-font-sans);
--sx-fs-micro: 10px;
--sx-fs-xs: 12px;
--sx-fs-compact: 13px;
--sx-fs-sm: 14px;
--sx-fs-md: 16px;
--sx-fs-lg: 18px;
--sx-fs-xl: 20px;
--sx-lh-xs: 1.4;
--sx-lh-sm: 1.45;
--sx-lh-md: 1.55;
--sx-lh-lg: 1.6;
--sx-lh-xl: 1.65;
--sx-h1: 34px; --sx-h1-lh: 1.3;
--sx-h2: 26px; --sx-h2-lh: 1.35;
--sx-h3: 22px; --sx-h3-lh: 1.4;
--sx-h4: 18px; --sx-h4-lh: 1.45;
--sx-h5: 16px; --sx-h5-lh: 1.5;
--sx-h6: 14px; --sx-h6-lh: 1.5;
--sx-display-hero: clamp(64px, 16vw, 300px);
--sx-display-1: 48px;
--sx-display-2: 44px;
--sx-display-3: 38px;
--sx-display-4: 28px;
--sx-display-5: 24px;
--sx-display-6: 20px;
--sx-fw-regular: 400;
--sx-fw-medium: 500;
--sx-fw-semibold: 600;
--sx-fw-bold: 700;
--sx-fw-black: 900;
--sx-tracking-display: -0.02em;
--sx-tracking-eyebrow: 0.05em;
--sx-tracking-button: 0.5px;
--sx-tracking-micro: 0.025em;
--sx-space-xs: 10px;
--sx-space-sm: 12px;
--sx-space-md: 16px;
--sx-space-lg: 20px;
--sx-space-xl: 32px;
--sx-space-1: 4px;
--sx-space-2: 8px;
--sx-space-3: 12px;
--sx-space-4: 16px;
--sx-space-5: 20px;
--sx-space-6: 24px;
--sx-space-8: 32px;
--sx-space-12: 48px;
--sx-space-16: 64px;
--sx-space-24: 96px;
--sx-radius-xs: 2px;
--sx-radius-sm: 4px;
--sx-radius-md: 8px;
--sx-radius-default: 12px;
--sx-radius-lg: 16px;
--sx-radius-section: 24px;
--sx-radius-demo: 28px;
--sx-radius-xl: 32px;
--sx-radius-full: 9999px;
--sx-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
--sx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 10px 15px -5px, rgba(0, 0, 0, 0.04) 0 7px 7px -5px;
--sx-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 20px 25px -5px, rgba(0, 0, 0, 0.04) 0 10px 10px -5px;
--sx-shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 28px 23px -7px, rgba(0, 0, 0, 0.04) 0 12px 12px -7px;
--sx-shadow-xl: 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 36px 28px -7px, rgba(0, 0, 0, 0.04) 0 17px 17px -7px;
--sx-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.06);
--sx-shadow-float: 0 6px 30px rgba(0, 0, 0, 0.2);
--sx-shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.18);
--sx-ring-tag: 0 0 0 2px rgba(0, 134, 255, 0.1);
--sx-ring-focus: 0 0 0 3px rgba(17, 111, 223, 0.1);
--sx-focus-outline: 2px solid var(--sx-color-primary);
--sx-duration-fast: 150ms;
--sx-duration-base: 200ms;
--sx-duration-enter: 220ms;
--sx-duration-toast: 750ms;
--sx-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--sx-ease-out: cubic-bezier(0, 0, 0.2, 1);
--sx-ease-in: ease-in;
--sx-app-header-height: 56px;
--sx-app-navbar-width: 260px;
--sx-app-nav-item-height: 32px;
--sx-app-sheet-radius: 32px;
--sx-site-header-height: 60px;
--sx-site-max-width: 1240px;
--sx-site-gutter: 20px;
--sx-bp-xs: 36em;
--sx-bp-sm: 48em;
--sx-bp-md: 62em;
--sx-bp-lg: 75em;
--sx-bp-xl: 88em;
--sx-z-app: 100;
--sx-z-modal: 200;
--sx-z-popover: 300;
--sx-z-overlay: 400;
--sx-z-max: 9999;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--sx-color-body: var(--sx-dark-7);
--sx-color-surface: var(--sx-dark-6);
--sx-color-surface-subtle: var(--sx-dark-6);
--sx-color-surface-muted: var(--sx-dark-8);
--sx-color-hover: var(--sx-dark-5);
--sx-color-selected: rgba(24, 129, 255, 0.22);
--sx-color-selected-hover: rgba(24, 129, 255, 0.12);
--sx-color-text: var(--sx-dark-0);
--sx-color-title: var(--sx-white);
--sx-color-text-secondary: var(--sx-dark-1);
--sx-color-dimmed: var(--sx-dark-2);
--sx-color-placeholder: var(--sx-dark-3);
--sx-color-disabled: var(--sx-dark-6);
--sx-color-disabled-text: var(--sx-dark-3);
--sx-color-link: var(--sx-blue-4);
--sx-color-border-subtle: var(--sx-dark-5);
--sx-color-border: var(--sx-dark-4);
--sx-color-border-strong: var(--sx-dark-3);
--sx-color-primary: var(--sx-blue-6);
--sx-color-primary-hover: var(--sx-blue-7);
--sx-color-primary-light: rgba(61, 148, 255, 0.15);
--sx-color-primary-light-hover: rgba(61, 148, 255, 0.2);
--sx-color-danger-light: rgba(239, 68, 68, 0.15);
--sx-color-success-light: rgba(34, 197, 94, 0.15);
--sx-color-warning-light: rgba(245, 158, 11, 0.15);
--sx-color-neutral-light: rgba(178, 180, 184, 0.15);
--sx-loading-veil: rgba(0, 0, 0, 0.3);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--sx-color-body: var(--sx-dark-7);
--sx-color-surface: var(--sx-dark-6);
--sx-color-surface-subtle: var(--sx-dark-6);
--sx-color-surface-muted: var(--sx-dark-8);
--sx-color-hover: var(--sx-dark-5);
--sx-color-selected: rgba(24, 129, 255, 0.22);
--sx-color-selected-hover: rgba(24, 129, 255, 0.12);
--sx-color-text: var(--sx-dark-0);
--sx-color-title: var(--sx-white);
--sx-color-text-secondary: var(--sx-dark-1);
--sx-color-dimmed: var(--sx-dark-2);
--sx-color-placeholder: var(--sx-dark-3);
--sx-color-disabled: var(--sx-dark-6);
--sx-color-disabled-text: var(--sx-dark-3);
--sx-color-link: var(--sx-blue-4);
--sx-color-border-subtle: var(--sx-dark-5);
--sx-color-border: var(--sx-dark-4);
--sx-color-border-strong: var(--sx-dark-3);
--sx-color-primary: var(--sx-blue-6);
--sx-color-primary-hover: var(--sx-blue-7);
--sx-color-primary-light: rgba(61, 148, 255, 0.15);
--sx-color-primary-light-hover: rgba(61, 148, 255, 0.2);
--sx-color-danger-light: rgba(239, 68, 68, 0.15);
--sx-color-success-light: rgba(34, 197, 94, 0.15);
--sx-color-warning-light: rgba(245, 158, 11, 0.15);
--sx-color-neutral-light: rgba(178, 180, 184, 0.15);
--sx-loading-veil: rgba(0, 0, 0, 0.3);
color-scheme: dark;
}