@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('./fonts/inter.woff2') format('woff2-variations');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url('./fonts/jetbrains-mono.woff2') format('woff2-variations');
}
@layer slate.tokens, slate.base, slate.components;
@layer slate.tokens {
:root {
--slate-color-gray-0: #ffffff;
--slate-color-gray-25: #fcfcfc;
--slate-color-gray-50: #f7f7f7;
--slate-color-gray-100: #f0f0f0;
--slate-color-gray-150: #e8e8e8;
--slate-color-gray-200: #e0e0e0;
--slate-color-gray-300: #cccccc;
--slate-color-gray-400: #999999;
--slate-color-gray-500: #666666;
--slate-color-gray-600: #4d4d4d;
--slate-color-gray-700: #363636;
--slate-color-gray-800: #242424;
--slate-color-gray-850: #1a1a1a;
--slate-color-gray-900: #131313;
--slate-color-gray-950: #0c0c0c;
--slate-color-accent-50: #f5f5f5;
--slate-color-accent-100: #ebebeb;
--slate-color-accent-200: #d6d6d6;
--slate-color-accent-300: #b3b3b3;
--slate-color-accent-400: #8a8a8a;
--slate-color-accent-500: #5c5c5c;
--slate-color-accent-600: #2b2b2b;
--slate-color-accent-700: #1a1a1a;
--slate-color-accent-800: #111111;
--slate-color-accent-900: #0a0a0a;
--slate-color-accent-950: #050505;
--slate-color-success-100: #e2f6ec;
--slate-color-success-400: #4cd08c;
--slate-color-success-500: #1fa768;
--slate-color-success-600: #137a4a;
--slate-color-success-900: #0d2e20;
--slate-color-warning-100: #fdf1d6;
--slate-color-warning-400: #f2b53b;
--slate-color-warning-500: #e49a0f;
--slate-color-warning-600: #8a5200;
--slate-color-warning-900: #35240a;
--slate-color-danger-100: #fde8e6;
--slate-color-danger-400: #f7776b;
--slate-color-danger-500: #e5483a;
--slate-color-danger-600: #b42318;
--slate-color-danger-900: #3d1511;
--slate-color-info-100: #e0f0fe;
--slate-color-info-400: #62b6f7;
--slate-color-info-500: #2b93e8;
--slate-color-info-600: #0b5fa5;
--slate-color-info-900: #0b2a47;
--slate-space-1: 0.25rem;
--slate-space-2: 0.5rem;
--slate-space-3: 0.75rem;
--slate-space-4: 1rem;
--slate-space-5: 1.5rem;
--slate-space-6: 2rem;
--slate-space-7: 2.5rem;
--slate-space-8: 3rem;
--slate-space-10: 4rem;
--slate-space-12: 6rem;
--slate-space-0_5: 0.125rem;
--slate-space-1_5: 0.375rem;
--slate-space-2_5: 0.625rem;
--slate-radius-xs: 3px;
--slate-radius-sm: 4px;
--slate-radius-md: 6px;
--slate-radius-lg: 8px;
--slate-radius-xl: 12px;
--slate-radius-2xl: 16px;
--slate-radius-full: 9999px;
--slate-size-control-xs: 1.5rem;
--slate-size-control-sm: 1.75rem;
--slate-size-control-md: 2rem;
--slate-size-control-lg: 2.5rem;
--slate-size-control-xl: 3rem;
--slate-size-touch: 2.75rem;
--slate-size-sidebar: 15rem;
--slate-size-sidebar-collapsed: 3.5rem;
--slate-size-topbar: 3rem;
--slate-size-container: 72rem;
--slate-size-prose: 42rem;
--slate-size-icon-sm: 0.875rem;
--slate-size-icon-md: 1rem;
--slate-size-icon-lg: 1.25rem;
--slate-size-icon-xl: 1.75rem;
--slate-size-avatar-xs: 1.25rem;
--slate-size-avatar-sm: 1.5rem;
--slate-size-avatar-md: 2rem;
--slate-size-avatar-lg: 2.5rem;
--slate-size-avatar-xl: 3.5rem;
--slate-size-row-lg: 3rem;
--slate-size-width-2xs: 8rem;
--slate-size-width-xs: 12rem;
--slate-size-width-sm: 16rem;
--slate-size-width-md: 20rem;
--slate-size-width-lg: 26rem;
--slate-size-width-xl: 32rem;
--slate-size-width-2xl: 40rem;
--slate-size-tile: 2.25rem;
--slate-font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--slate-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--slate-font-family-display: var(--slate-font-family-sans);
--slate-font-size-2xs: 0.6875rem;
--slate-font-size-xs: 0.75rem;
--slate-font-size-sm: 0.8125rem;
--slate-font-size-md: 0.875rem;
--slate-font-size-lg: 1rem;
--slate-font-size-xl: 1.25rem;
--slate-font-size-2xl: 1.5rem;
--slate-font-size-3xl: 2rem;
--slate-font-size-4xl: 2.75rem;
--slate-font-size-5xl: 3.75rem;
--slate-font-weight-regular: 400;
--slate-font-weight-medium: 500;
--slate-font-weight-semibold: 600;
--slate-font-weight-display: var(--slate-font-weight-semibold);
--slate-font-leading-none: 1;
--slate-font-leading-tight: 1.2;
--slate-font-leading-snug: 1.35;
--slate-font-leading-normal: 1.5;
--slate-font-leading-relaxed: 1.65;
--slate-font-tracking-tight: -0.022em;
--slate-font-tracking-snug: -0.011em;
--slate-font-tracking-wide: 0.06em;
--slate-motion-duration-instant: 60ms;
--slate-motion-duration-fast: 100ms;
--slate-motion-duration-base: 180ms;
--slate-motion-duration-slow: 320ms;
--slate-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
--slate-motion-easing-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
--slate-motion-delay-tooltip: 300ms;
--slate-z-base: 0;
--slate-z-sticky: 100;
--slate-z-dropdown: 1000;
--slate-z-overlay: 1100;
--slate-z-modal: 1200;
--slate-z-toast: 1300;
--slate-z-tooltip: 1400;
--slate-opacity-disabled: 0.45;
--slate-focus-width: 2px;
--slate-focus-offset: 2px;
--slate-button-radius: var(--slate-radius-md);
--slate-button-height: var(--slate-size-control-md);
--slate-button-padding-x: var(--slate-space-3);
--slate-input-radius: var(--slate-radius-md);
--slate-input-height: var(--slate-size-control-md);
--slate-card-radius: var(--slate-radius-lg);
--slate-card-padding: var(--slate-space-4);
--slate-badge-radius: var(--slate-radius-full);
--slate-dialog-radius: var(--slate-radius-xl);
--slate-menu-radius: var(--slate-radius-lg);
--slate-table-row-height: 2.5rem;
--slate-table-row-height-dense: 2rem;
--slate-nav-item-height: var(--slate-size-control-sm);
--slate-menu-item-height: var(--slate-size-control-sm);
--slate-list-item-min-height: var(--slate-size-row-lg);
--slate-command-item-height: 2.5rem;
--slate-table-header-height: 2.25rem;
--slate-tab-height: var(--slate-size-control-md);
--slate-segmented-height: var(--slate-size-control-sm);
--slate-bg: var(--slate-color-gray-0);
--slate-surface: var(--slate-color-gray-50);
--slate-surface-raised: var(--slate-color-gray-0);
--slate-surface-hover: var(--slate-color-gray-100);
--slate-surface-active: var(--slate-color-gray-150);
--slate-overlay: rgba(0, 0, 0, 0.45);
--slate-border: var(--slate-color-gray-200);
--slate-border-subtle: var(--slate-color-gray-100);
--slate-border-strong: var(--slate-color-gray-300);
--slate-text: var(--slate-color-gray-900);
--slate-text-muted: var(--slate-color-gray-600);
--slate-text-subtle: var(--slate-color-gray-500);
--slate-text-disabled: var(--slate-color-gray-400);
--slate-inverse: var(--slate-color-gray-900);
--slate-on-inverse: var(--slate-color-gray-50);
--slate-accent: var(--slate-color-accent-900);
--slate-accent-hover: var(--slate-color-accent-600);
--slate-accent-solid: var(--slate-color-accent-900);
--slate-accent-solid-hover: var(--slate-color-accent-600);
--slate-accent-soft: var(--slate-color-accent-100);
--slate-accent-soft-hover: var(--slate-color-accent-200);
--slate-accent-border: var(--slate-color-accent-300);
--slate-on-accent: var(--slate-color-gray-0);
--slate-success: var(--slate-color-success-600);
--slate-success-solid: var(--slate-color-success-500);
--slate-success-soft: var(--slate-color-success-100);
--slate-warning: var(--slate-color-warning-600);
--slate-warning-solid: var(--slate-color-warning-500);
--slate-warning-soft: var(--slate-color-warning-100);
--slate-danger: var(--slate-color-danger-600);
--slate-danger-solid: var(--slate-color-danger-600);
--slate-danger-soft: var(--slate-color-danger-100);
--slate-info: var(--slate-color-info-600);
--slate-info-solid: var(--slate-color-info-500);
--slate-info-soft: var(--slate-color-info-100);
--slate-focus-ring: var(--slate-color-accent-900);
--slate-chart-1: #1a1a1a;
--slate-chart-2: #0f9d8a;
--slate-chart-3: #d98a0b;
--slate-chart-4: #d6456b;
--slate-chart-5: #8b5cf6;
--slate-chart-6: #737373;
--slate-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--slate-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
--slate-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.09), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
--slate-shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.14), 0 4px 8px -4px rgba(0, 0, 0, 0.06);
--slate-shadow-xl: 0 24px 56px -12px rgba(0, 0, 0, 0.22), 0 8px 16px -8px rgba(0, 0, 0, 0.08);
--slate-button-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.16);
--slate-focus-halo: 0 0 0 3px color-mix(in srgb, var(--slate-accent-solid) 22%, transparent);
--slate-focus-halo-danger: 0 0 0 3px color-mix(in srgb, var(--slate-danger-solid) 22%, transparent);
--slate-on-solid: var(--slate-color-gray-0);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--slate-bg: var(--slate-color-gray-950);
--slate-surface: var(--slate-color-gray-900);
--slate-surface-raised: var(--slate-color-gray-850);
--slate-surface-hover: var(--slate-color-gray-800);
--slate-surface-active: var(--slate-color-gray-700);
--slate-overlay: rgba(0, 0, 0, 0.66);
--slate-border: var(--slate-color-gray-800);
--slate-border-subtle: var(--slate-color-gray-850);
--slate-border-strong: var(--slate-color-gray-700);
--slate-text: var(--slate-color-gray-50);
--slate-text-muted: var(--slate-color-gray-300);
--slate-text-subtle: var(--slate-color-gray-400);
--slate-text-disabled: var(--slate-color-gray-600);
--slate-inverse: var(--slate-color-gray-100);
--slate-on-inverse: var(--slate-color-gray-900);
--slate-accent: var(--slate-color-accent-50);
--slate-accent-hover: var(--slate-color-accent-200);
--slate-accent-solid: var(--slate-color-accent-50);
--slate-accent-solid-hover: var(--slate-color-accent-200);
--slate-accent-soft: var(--slate-color-accent-700);
--slate-accent-soft-hover: var(--slate-color-accent-600);
--slate-accent-border: var(--slate-color-accent-500);
--slate-on-accent: var(--slate-color-accent-950);
--slate-success: var(--slate-color-success-400);
--slate-success-solid: var(--slate-color-success-500);
--slate-success-soft: var(--slate-color-success-900);
--slate-warning: var(--slate-color-warning-400);
--slate-warning-solid: var(--slate-color-warning-500);
--slate-warning-soft: var(--slate-color-warning-900);
--slate-danger: var(--slate-color-danger-400);
--slate-danger-solid: var(--slate-color-danger-600);
--slate-danger-soft: var(--slate-color-danger-900);
--slate-info: var(--slate-color-info-400);
--slate-info-solid: var(--slate-color-info-500);
--slate-info-soft: var(--slate-color-info-900);
--slate-focus-ring: var(--slate-color-accent-50);
--slate-chart-1: #a8a8a8;
--slate-chart-2: #2dd4bf;
--slate-chart-3: #f2b53b;
--slate-chart-4: #f472a0;
--slate-chart-5: #a78bfa;
--slate-chart-6: #6e6e6e;
--slate-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--slate-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
--slate-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.55);
--slate-shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.65);
--slate-shadow-xl: 0 24px 56px -12px rgba(0, 0, 0, 0.75);
--slate-button-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14);
--slate-focus-halo: 0 0 0 3px color-mix(in srgb, var(--slate-accent-solid) 22%, transparent);
--slate-focus-halo-danger: 0 0 0 3px color-mix(in srgb, var(--slate-danger-solid) 22%, transparent);
--slate-on-solid: var(--slate-color-gray-0);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--slate-bg: var(--slate-color-gray-950);
--slate-surface: var(--slate-color-gray-900);
--slate-surface-raised: var(--slate-color-gray-850);
--slate-surface-hover: var(--slate-color-gray-800);
--slate-surface-active: var(--slate-color-gray-700);
--slate-overlay: rgba(0, 0, 0, 0.66);
--slate-border: var(--slate-color-gray-800);
--slate-border-subtle: var(--slate-color-gray-850);
--slate-border-strong: var(--slate-color-gray-700);
--slate-text: var(--slate-color-gray-50);
--slate-text-muted: var(--slate-color-gray-300);
--slate-text-subtle: var(--slate-color-gray-400);
--slate-text-disabled: var(--slate-color-gray-600);
--slate-inverse: var(--slate-color-gray-100);
--slate-on-inverse: var(--slate-color-gray-900);
--slate-accent: var(--slate-color-accent-50);
--slate-accent-hover: var(--slate-color-accent-200);
--slate-accent-solid: var(--slate-color-accent-50);
--slate-accent-solid-hover: var(--slate-color-accent-200);
--slate-accent-soft: var(--slate-color-accent-700);
--slate-accent-soft-hover: var(--slate-color-accent-600);
--slate-accent-border: var(--slate-color-accent-500);
--slate-on-accent: var(--slate-color-accent-950);
--slate-success: var(--slate-color-success-400);
--slate-success-solid: var(--slate-color-success-500);
--slate-success-soft: var(--slate-color-success-900);
--slate-warning: var(--slate-color-warning-400);
--slate-warning-solid: var(--slate-color-warning-500);
--slate-warning-soft: var(--slate-color-warning-900);
--slate-danger: var(--slate-color-danger-400);
--slate-danger-solid: var(--slate-color-danger-600);
--slate-danger-soft: var(--slate-color-danger-900);
--slate-info: var(--slate-color-info-400);
--slate-info-solid: var(--slate-color-info-500);
--slate-info-soft: var(--slate-color-info-900);
--slate-focus-ring: var(--slate-color-accent-50);
--slate-chart-1: #a8a8a8;
--slate-chart-2: #2dd4bf;
--slate-chart-3: #f2b53b;
--slate-chart-4: #f472a0;
--slate-chart-5: #a78bfa;
--slate-chart-6: #6e6e6e;
--slate-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--slate-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
--slate-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.55);
--slate-shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.65);
--slate-shadow-xl: 0 24px 56px -12px rgba(0, 0, 0, 0.75);
--slate-button-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14);
--slate-focus-halo: 0 0 0 3px color-mix(in srgb, var(--slate-accent-solid) 22%, transparent);
--slate-focus-halo-danger: 0 0 0 3px color-mix(in srgb, var(--slate-danger-solid) 22%, transparent);
--slate-on-solid: var(--slate-color-gray-0);
color-scheme: dark;
}
[data-density="compact"] {
--slate-button-height: var(--slate-size-control-sm);
--slate-input-height: var(--slate-size-control-sm);
--slate-table-row-height: 2rem;
--slate-table-header-height: 2rem;
--slate-nav-item-height: 1.625rem;
--slate-menu-item-height: 1.625rem;
--slate-list-item-min-height: 2.5rem;
--slate-command-item-height: 2.125rem;
--slate-card-padding: var(--slate-space-3);
--slate-segmented-height: var(--slate-size-control-xs);
}
[data-density="comfortable"] {
--slate-button-height: var(--slate-size-control-lg);
--slate-input-height: var(--slate-size-control-lg);
--slate-table-row-height: 3.25rem;
--slate-table-header-height: 2.75rem;
--slate-nav-item-height: 2.25rem;
--slate-menu-item-height: 2.25rem;
--slate-list-item-min-height: 3.5rem;
--slate-command-item-height: 2.75rem;
--slate-card-padding: var(--slate-space-5);
--slate-segmented-height: var(--slate-size-control-md);
}
}
@layer slate.base {
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 4rem;
}
body {
margin: 0;
background: var(--slate-bg);
color: var(--slate-text);
font-family: var(--slate-font-family-sans);
font-size: var(--slate-font-size-md);
line-height: var(--slate-font-leading-normal);
letter-spacing: var(--slate-font-tracking-snug);
font-feature-settings: 'calt', 'cv11';
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--slate-font-family-display);
font-weight: var(--slate-font-weight-display);
line-height: var(--slate-font-leading-tight);
letter-spacing: var(--slate-font-tracking-tight);
text-wrap: balance;
}
p, ul, ol, dl, figure, blockquote, pre { margin: 0; }
p { text-wrap: pretty; }
img, svg, video { max-width: 100%; vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
hr { border: 0; border-top: 1px solid var(--slate-border); margin: 0; }
[hidden] { display: none !important; }
a {
color: var(--slate-accent);
text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
text-underline-offset: 0.22em;
transition: color var(--slate-motion-duration-fast) var(--slate-motion-easing-standard);
}
a:hover { color: var(--slate-accent-hover); text-decoration-color: currentColor; }
code, pre, kbd, samp { font-family: var(--slate-font-family-mono); font-size: 0.92em; font-feature-settings: normal; }
::selection { background: color-mix(in srgb, var(--slate-accent-solid) 28%, transparent); }
:focus-visible {
outline: var(--slate-focus-width) solid var(--slate-focus-ring);
outline-offset: var(--slate-focus-offset);
}
* { scrollbar-width: thin; scrollbar-color: var(--slate-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--slate-border-strong); border-radius: var(--slate-radius-full); border: 3px solid transparent; background-clip: content-box; }
.slate-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;
}
@media (pointer: coarse) {
:root {
--slate-button-height: var(--slate-size-touch);
--slate-input-height: var(--slate-size-touch);
}
input, select, textarea { font-size: var(--slate-font-size-lg); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
}
@layer slate.components {
.slate-icon { width: var(--slate-size-icon-md); height: var(--slate-size-icon-md); flex: none; vertical-align: -0.2em; }
.slate-icon--sm { width: var(--slate-size-icon-sm); height: var(--slate-size-icon-sm); }
.slate-icon--lg { width: var(--slate-size-icon-lg); height: var(--slate-size-icon-lg); }
.slate-icon--xl { width: var(--slate-size-icon-xl); height: var(--slate-size-icon-xl); }
.slate-button {
--_bg: var(--slate-accent-solid);
--_bg-hover: var(--slate-accent-solid-hover);
--_fg: var(--slate-on-accent);
--_bd: color-mix(in srgb, var(--slate-accent-solid) 70%, black);
--_shadow: var(--slate-button-highlight), var(--slate-shadow-xs);
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: var(--slate-space-1_5);
height: var(--slate-button-height);
padding-inline: var(--slate-button-padding-x);
border: 1px solid var(--_bd);
border-radius: var(--slate-button-radius);
background: var(--_bg);
color: var(--_fg);
box-shadow: var(--_shadow);
font: inherit; font-size: var(--slate-font-size-sm); font-weight: var(--slate-font-weight-medium);
line-height: 1; letter-spacing: var(--slate-font-tracking-snug);
text-decoration: none; white-space: nowrap; user-select: none;
transition: background var(--slate-motion-duration-fast) var(--slate-motion-easing-standard),
border-color var(--slate-motion-duration-fast) var(--slate-motion-easing-standard),
box-shadow var(--slate-motion-duration-fast) var(--slate-motion-easing-standard),
transform var(--slate-motion-duration-instant);
}
.slate-button:hover { background: var(--_bg-hover); color: var(--_fg); }
.slate-button:active { transform: translateY(0.5px); }
.slate-button:disabled, .slate-button[aria-disabled='true'] {
opacity: var(--slate-opacity-disabled); cursor: not-allowed; pointer-events: none; box-shadow: none;
}
.slate-button--secondary {
--_bg: var(--slate-surface-raised); --_bg-hover: var(--slate-surface-hover); --_fg: var(--slate-text);
--_bd: var(--slate-border-strong); --_shadow: var(--slate-shadow-xs);
}
.slate-button--ghost {
--_bg: transparent; --_bg-hover: var(--slate-surface-hover); --_fg: var(--slate-text-muted);
--_bd: transparent; --_shadow: none;
}
.slate-button--ghost:hover { --_fg: var(--slate-text); }
.slate-button--soft {
--_bg: var(--slate-accent-soft); --_bg-hover: var(--slate-accent-soft-hover); --_fg: var(--slate-accent);
--_bd: transparent; --_shadow: none;
}
.slate-button--outline {
--_bg: transparent; --_bg-hover: var(--slate-accent-soft); --_fg: var(--slate-accent);
--_bd: var(--slate-accent-border); --_shadow: none;
}
.slate-button--danger {
--_bg: var(--slate-danger-solid); --_bg-hover: color-mix(in srgb, var(--slate-danger-solid) 85%, black);
--_bd: color-mix(in srgb, var(--slate-danger-solid) 70%, black); --_fg: var(--slate-on-solid);
}
.slate-button--danger-soft {
--_bg: var(--slate-danger-soft); --_bg-hover: color-mix(in srgb, var(--slate-danger-soft) 80%, var(--slate-danger-solid));
--_fg: var(--slate-danger); --_bd: transparent; --_shadow: none;
}
.slate-button--inverse {
--_bg: var(--slate-inverse); --_bg-hover: color-mix(in srgb, var(--slate-inverse) 85%, var(--slate-bg));
--_fg: var(--slate-on-inverse); --_bd: transparent;
}
.slate-button--link {
--_bg: transparent; --_bg-hover: transparent; --_fg: var(--slate-accent); --_bd: transparent; --_shadow: none;
height: auto; padding: 0; border-radius: var(--slate-radius-xs);
}
.slate-button--link:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.slate-button--xs { height: var(--slate-size-control-xs); padding-inline: var(--slate-space-2); font-size: var(--slate-font-size-xs); border-radius: var(--slate-radius-sm); }
.slate-button--sm { height: var(--slate-size-control-sm); padding-inline: var(--slate-space-2_5); font-size: var(--slate-font-size-xs); }
.slate-button--lg { height: var(--slate-size-control-lg); padding-inline: var(--slate-space-4); font-size: var(--slate-font-size-md); border-radius: var(--slate-radius-lg); }
.slate-button--xl { height: var(--slate-size-control-xl); padding-inline: var(--slate-space-5); font-size: var(--slate-font-size-lg); border-radius: var(--slate-radius-lg); }
.slate-button--icon { width: var(--slate-button-height); padding: 0; }
.slate-button--icon.slate-button--xs { width: var(--slate-size-control-xs); }
.slate-button--icon.slate-button--sm { width: var(--slate-size-control-sm); }
.slate-button--icon.slate-button--lg { width: var(--slate-size-control-lg); }
.slate-button--block { display: flex; width: 100%; }
.slate-button--loading { color: transparent !important; pointer-events: none; }
.slate-button--loading::after {
content: ''; position: absolute; width: 0.9em; height: 0.9em; border-radius: 50%;
border: 1.5px solid var(--_fg); border-right-color: transparent; animation: slate-spin 0.7s linear infinite;
}
.slate-button--loading.slate-button--secondary::after, .slate-button--loading.slate-button--ghost::after { border-color: var(--slate-text-muted); border-right-color: transparent; }
.slate-button kbd { margin-right: calc(var(--slate-space-1) * -1); }
@keyframes slate-spin { to { transform: rotate(360deg); } }
.slate-button-group { display: inline-flex; }
.slate-button-group > .slate-button { border-radius: 0; margin-left: -1px; }
.slate-button-group > .slate-button:first-child { border-radius: var(--slate-button-radius) 0 0 var(--slate-button-radius); margin-left: 0; }
.slate-button-group > .slate-button:last-child { border-radius: 0 var(--slate-button-radius) var(--slate-button-radius) 0; }
.slate-button-group > .slate-button:hover, .slate-button-group > .slate-button:focus-visible { z-index: 1; }
.slate-button-group > .slate-button[aria-pressed='true'] { --_bg: var(--slate-surface-active); z-index: 1; }
.slate-toggle-button[aria-pressed='true'] { --_bg: var(--slate-accent-soft); --_fg: var(--slate-accent); --_bd: var(--slate-accent-border); }
.slate-close {
display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0;
border: 0; border-radius: var(--slate-radius-md); background: transparent; color: var(--slate-text-subtle);
}
.slate-close:hover { background: var(--slate-surface-hover); color: var(--slate-text); }
.slate-link { color: var(--slate-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.22em; }
.slate-link:hover { text-decoration-color: currentColor; }
.slate-link--muted { color: var(--slate-text-muted); }
.slate-link--muted:hover { color: var(--slate-text); }
.slate-link--plain { text-decoration: none; }
.slate-badge {
--_bg: var(--slate-accent-soft); --_fg: var(--slate-accent); --_bd: transparent;
display: inline-flex; align-items: center; gap: var(--slate-space-1_5);
height: 1.25rem; padding-inline: var(--slate-space-2);
border: 1px solid var(--_bd); border-radius: var(--slate-badge-radius);
background: var(--_bg); color: var(--_fg);
font-size: var(--slate-font-size-xs); font-weight: var(--slate-font-weight-medium); line-height: 1; white-space: nowrap;
}
.slate-badge--neutral { --_bg: var(--slate-surface-hover); --_fg: var(--slate-text-muted); }
.slate-badge--outline { --_bg: transparent; --_fg: var(--slate-text-muted); --_bd: var(--slate-border-strong); }
.slate-badge--success { --_bg: var(--slate-success-soft); --_fg: var(--slate-success); }
.slate-badge--warning { --_bg: var(--slate-warning-soft); --_fg: var(--slate-warning); }
.slate-badge--danger { --_bg: var(--slate-danger-soft); --_fg: var(--slate-danger); }
.slate-badge--info { --_bg: var(--slate-info-soft); --_fg: var(--slate-info); }
.slate-badge--solid { --_bg: var(--slate-accent-solid); --_fg: var(--slate-on-accent); }
.slate-badge--square { border-radius: var(--slate-radius-sm); }
.slate-badge--lg { height: 1.5rem; padding-inline: var(--slate-space-2_5); font-size: var(--slate-font-size-sm); }
.slate-badge--dot::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
.slate-badge--count { min-width: 1.25rem; padding-inline: var(--slate-space-1_5); justify-content: center; font-variant-numeric: tabular-nums; }
.slate-status { display: inline-flex; align-items: center; gap: var(--slate-space-1_5); font-size: var(--slate-font-size-sm); color: var(--slate-text); white-space: nowrap; }
.slate-status::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--slate-text-subtle); box-shadow: 0 0 0 3px color-mix(in srgb, var(--slate-text-subtle) 18%, transparent); }
.slate-status--success::before { background: var(--slate-success-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--slate-success-solid) 20%, transparent); }
.slate-status--warning::before { background: var(--slate-warning-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--slate-warning-solid) 22%, transparent); }
.slate-status--danger::before { background: var(--slate-danger-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--slate-danger-solid) 20%, transparent); }
.slate-status--info::before { background: var(--slate-info-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--slate-info-solid) 20%, transparent); }
.slate-status--accent::before { background: var(--slate-accent-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--slate-accent-solid) 20%, transparent); }
.slate-status--pulse::before { animation: slate-pulse 1.8s ease-out infinite; }
@keyframes slate-pulse { 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.slate-tag {
display: inline-flex; align-items: center; gap: var(--slate-space-1_5);
height: 1.5rem; padding-inline: var(--slate-space-2);
border: 1px solid var(--slate-border); border-radius: var(--slate-radius-md);
background: var(--slate-surface-raised); color: var(--slate-text-muted);
font-size: var(--slate-font-size-xs); font-weight: var(--slate-font-weight-medium); white-space: nowrap;
}
.slate-tag button { display: grid; place-items: center; padding: 0; margin-right: -0.25rem; border: 0; border-radius: var(--slate-radius-xs); background: none; color: var(--slate-text-subtle); }
.slate-tag button:hover { color: var(--slate-text); background: var(--slate-surface-hover); }
.slate-tag--filled { background: var(--slate-surface-hover); border-color: transparent; }
.slate-chip {
display: inline-flex; align-items: center; gap: var(--slate-space-1_5);
height: var(--slate-size-control-sm); padding-inline: var(--slate-space-2_5);
border: 1px solid var(--slate-border-strong); border-radius: var(--slate-radius-full);
background: var(--slate-surface-raised); color: var(--slate-text-muted);
font-size: var(--slate-font-size-xs); font-weight: var(--slate-font-weight-medium); white-space: nowrap;
transition: all var(--slate-motion-duration-fast);
}
.slate-chip:hover { background: var(--slate-surface-hover); color: var(--slate-text); }
.slate-chip[aria-pressed='true'], .slate-chip--selected { background: var(--slate-accent-soft); border-color: var(--slate-accent-border); color: var(--slate-accent); }
.slate-chip--dashed { border-style: dashed; }
.slate-kbd, kbd {
display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding-inline: var(--slate-space-1_5);
border: 1px solid var(--slate-border-strong); border-bottom-width: 2px; border-radius: var(--slate-radius-sm);
background: var(--slate-surface-raised); color: var(--slate-text-muted);
font-family: var(--slate-font-family-sans); font-size: 0.6875rem; font-weight: var(--slate-font-weight-medium); line-height: 1;
}
.slate-divider { border: 0; border-top: 1px solid var(--slate-border); margin: 0; }
.slate-divider--vertical { align-self: stretch; width: 1px; height: auto; border: 0; background: var(--slate-border); }
.slate-divider--label { display: flex; align-items: center; gap: var(--slate-space-3); color: var(--slate-text-subtle); font-size: var(--slate-font-size-xs); border: 0; }
.slate-divider--label::before, .slate-divider--label::after { content: ''; flex: 1; height: 1px; background: var(--slate-border); }
.slate-avatar {
position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden;
width: var(--slate-size-avatar-md); height: var(--slate-size-avatar-md); border-radius: 50%;
background: var(--slate-surface-hover); color: var(--slate-text-muted);
box-shadow: inset 0 0 0 1px var(--slate-border);
font-size: var(--slate-font-size-xs); font-weight: var(--slate-font-weight-semibold); letter-spacing: 0.02em;
}
.slate-avatar img { width: 100%; height: 100%; object-fit: cover; }
.slate-avatar--xs { width: var(--slate-size-avatar-xs); height: var(--slate-size-avatar-xs); font-size: 0.5625rem; }
.slate-avatar--sm { width: var(--slate-size-avatar-sm); height: var(--slate-size-avatar-sm); font-size: 0.625rem; }
.slate-avatar--lg { width: var(--slate-size-avatar-lg); height: var(--slate-size-avatar-lg); font-size: var(--slate-font-size-sm); }
.slate-avatar--xl { width: var(--slate-size-avatar-xl); height: var(--slate-size-avatar-xl); font-size: var(--slate-font-size-lg); }
.slate-avatar--square { border-radius: var(--slate-radius-md); }
.slate-avatar--accent { background: var(--slate-accent-soft); color: var(--slate-accent); box-shadow: inset 0 0 0 1px var(--slate-accent-border); }
.slate-avatar--success { background: var(--slate-success-soft); color: var(--slate-success); box-shadow: none; }
.slate-avatar--warning { background: var(--slate-warning-soft); color: var(--slate-warning); box-shadow: none; }
.slate-avatar--danger { background: var(--slate-danger-soft); color: var(--slate-danger); box-shadow: none; }
.slate-avatar-wrap { position: relative; display: inline-flex; }
.slate-avatar-wrap[data-status]::after {
content: ''; position: absolute; right: -1px; bottom: -1px; width: 0.625rem; height: 0.625rem; border-radius: 50%;
background: var(--slate-text-subtle); box-shadow: 0 0 0 2px var(--slate-bg);
}
.slate-avatar-wrap[data-status='online']::after { background: var(--slate-success-solid); }
.slate-avatar-wrap[data-status='busy']::after { background: var(--slate-danger-solid); }
.slate-avatar-wrap[data-status='away']::after { background: var(--slate-warning-solid); }
.slate-avatar-group { display: inline-flex; }
.slate-avatar-group > .slate-avatar { margin-left: calc(var(--slate-size-avatar-md) / -5); box-shadow: 0 0 0 2px var(--slate-bg); }
.slate-avatar-group > .slate-avatar:first-child { margin-left: 0; }
.slate-spinner {
display: inline-block; width: 1rem; height: 1rem; border-radius: 50%;
border: 1.5px solid var(--slate-border-strong); border-top-color: var(--slate-accent-solid);
animation: slate-spin 0.7s linear infinite;
}
.slate-spinner--lg { width: 1.5rem; height: 1.5rem; border-width: 2px; }
.slate-spinner--xl { width: var(--slate-size-tile); height: var(--slate-size-tile); border-width: 2.5px; }
.slate-dots { display: inline-flex; gap: 3px; }
.slate-dots i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--slate-text-subtle); animation: slate-bounce 1.2s infinite ease-in-out; }
.slate-dots i:nth-child(2) { animation-delay: 0.15s; } .slate-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes slate-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.slate-skeleton {
display: block; height: 0.75rem; border-radius: var(--slate-radius-sm);
background: linear-gradient(90deg, var(--slate-surface-hover) 30%, var(--slate-surface-active) 50%, var(--slate-surface-hover) 70%) 0 0 / 300% 100%;
animation: slate-shimmer 1.6s linear infinite;
}
.slate-skeleton--circle { width: var(--slate-size-avatar-md); height: var(--slate-size-avatar-md); border-radius: 50%; flex: none; }
.slate-skeleton--block { height: 5rem; border-radius: var(--slate-radius-lg); }
@keyframes slate-shimmer { to { background-position: -300% 0; } }
}
@layer slate.components {
.slate-display { font-size: clamp(2.25rem, 5vw, var(--slate-font-size-5xl)); line-height: 1.02; letter-spacing: -0.04em; font-family: var(--slate-font-family-display); font-weight: var(--slate-font-weight-display); }
.slate-h1 { font-size: var(--slate-font-size-4xl); line-height: 1.1; letter-spacing: -0.032em; font-family: var(--slate-font-family-display); font-weight: var(--slate-font-weight-display); }
.slate-h2 { font-size: var(--slate-font-size-3xl); line-height: 1.15; letter-spacing: -0.028em; font-family: var(--slate-font-family-display); font-weight: var(--slate-font-weight-display); }
.slate-h3 { font-size: var(--slate-font-size-2xl); line-height: 1.2; letter-spacing: -0.022em; font-family: var(--slate-font-family-display); font-weight: var(--slate-font-weight-display); }
.slate-h4 { font-size: var(--slate-font-size-xl); line-height: 1.25; letter-spacing: -0.018em; font-family: var(--slate-font-family-display); font-weight: var(--slate-font-weight-display); }
.slate-h5 { font-size: var(--slate-font-size-lg); line-height: 1.3; letter-spacing: -0.014em; font-family: var(--slate-font-family-display); font-weight: var(--slate-font-weight-display); }
.slate-h6 { font-size: var(--slate-font-size-md); line-height: 1.35; font-family: var(--slate-font-family-display); font-weight: var(--slate-font-weight-display); }
.slate-lead { font-size: var(--slate-font-size-lg); line-height: var(--slate-font-leading-relaxed); color: var(--slate-text-muted); }
.slate-text-lg { font-size: var(--slate-font-size-lg); }
.slate-text-md { font-size: var(--slate-font-size-md); }
.slate-text-sm { font-size: var(--slate-font-size-sm); }
.slate-text-xs { font-size: var(--slate-font-size-xs); }
.slate-muted { color: var(--slate-text-muted); }
.slate-subtle { color: var(--slate-text-subtle); }
.slate-strong { font-weight: var(--slate-font-weight-semibold); }
.slate-mono { font-family: var(--slate-font-family-mono); font-feature-settings: normal; letter-spacing: 0; white-space: nowrap; }
.slate-tabular { font-variant-numeric: tabular-nums; }
.slate-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slate-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slate-eyebrow { font-size: var(--slate-font-size-2xs); font-weight: var(--slate-font-weight-semibold); letter-spacing: var(--slate-font-tracking-wide); text-transform: uppercase; color: var(--slate-text-subtle); }
.slate-gradient-text { background: linear-gradient(120deg, var(--slate-text), var(--slate-text-subtle)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slate-code { padding: 0.12em 0.4em; border: 1px solid var(--slate-border); border-radius: var(--slate-radius-sm); background: var(--slate-surface); font-family: var(--slate-font-family-mono); font-size: 0.86em; }
.slate-pre {
margin: 0; padding: var(--slate-space-3) var(--slate-space-4); overflow-x: auto;
border: 1px solid var(--slate-border); border-radius: var(--slate-radius-lg); background: var(--slate-surface);
font-family: var(--slate-font-family-mono); font-size: var(--slate-font-size-xs); line-height: 1.7;
}
.slate-blockquote { margin: 0; padding-left: var(--slate-space-4); border-left: 2px solid var(--slate-border-strong); color: var(--slate-text-muted); font-size: var(--slate-font-size-lg); }
.slate-list { margin: 0; padding-left: var(--slate-space-5); display: flex; flex-direction: column; gap: var(--slate-space-1_5); }
.slate-list--check { list-style: none; padding: 0; }
.slate-list--check li { display: flex; gap: var(--slate-space-2); align-items: flex-start; }
.slate-list--check li::before { content: ''; flex: none; width: 1rem; height: 1rem; margin-top: 2px; border-radius: 50%; background: var(--slate-success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23137a4a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 8.5 2.300 2.300 4.700-5'/%3E%3C/svg%3E") center / 100% no-repeat; }
.slate-prose { max-width: var(--slate-size-prose); line-height: var(--slate-font-leading-relaxed); color: var(--slate-text-muted); }
.slate-prose > * + * { margin-top: var(--slate-space-4); }
.slate-prose h1, .slate-prose h2, .slate-prose h3 { color: var(--slate-text); margin-top: var(--slate-space-6); }
.slate-prose strong { color: var(--slate-text); }
}
@layer slate.components {
.slate-container { width: 100%; max-width: var(--slate-size-container); margin-inline: auto; padding-inline: var(--slate-space-4); }
.slate-container--narrow { max-width: 48rem; }
.slate-container--wide { max-width: 90rem; }
.slate-stack { display: flex; flex-direction: column; gap: var(--slate-space-3); }
.slate-stack--xs { gap: var(--slate-space-1); } .slate-stack--sm { gap: var(--slate-space-2); } .slate-stack--lg { gap: var(--slate-space-5); } .slate-stack--xl { gap: var(--slate-space-6); }
.slate-row { display: flex; align-items: center; gap: var(--slate-space-3); }
.slate-row--xs { gap: var(--slate-space-1); } .slate-row--sm { gap: var(--slate-space-2); } .slate-row--lg { gap: var(--slate-space-5); }
.slate-row--wrap { flex-wrap: wrap; } .slate-row--top { align-items: flex-start; } .slate-row--end { justify-content: flex-end; } .slate-row--between { justify-content: space-between; } .slate-row--center { justify-content: center; }
.slate-grow { flex: 1; min-width: 0; }
.slate-shrink-0 { flex-shrink: 0; }
.slate-spacer { flex: 1; }
.slate-grid { display: grid; gap: var(--slate-space-4); }
.slate-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slate-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slate-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.slate-grid--auto { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.slate-grid--fit { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.slate-grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.slate-span-2 { grid-column: span 2; } .slate-span-3 { grid-column: span 3; } .slate-span-4 { grid-column: span 4; } .slate-span-6 { grid-column: span 6; } .slate-span-8 { grid-column: span 8; } .slate-span-full { grid-column: 1 / -1; }
.slate-grid--main-aside { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.slate-grid--detail { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.slate-grid--nav-main { grid-template-columns: 11rem minmax(0, 1fr); }
@container (max-width: 44rem) {
.slate-grid--main-aside, .slate-grid--detail, .slate-grid--nav-main { grid-template-columns: minmax(0, 1fr); }
}
.slate-bento { display: grid; gap: var(--slate-space-3); grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(7rem, auto); }
.slate-bento > .slate-card { display: flex; flex-direction: column; justify-content: space-between; }
.slate-split { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--slate-space-5); align-items: start; }
.slate-split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
.slate-center { display: grid; place-items: center; }
.slate-scroll { overflow: auto; max-height: 18rem; }
.slate-aspect { aspect-ratio: 16 / 9; border-radius: var(--slate-radius-lg); background: var(--slate-surface-hover); display: grid; place-items: center; color: var(--slate-text-subtle); overflow: hidden; }
.slate-aspect--square { aspect-ratio: 1; } .slate-aspect--4x3 { aspect-ratio: 4 / 3; }
.slate-sticky { position: sticky; top: var(--slate-space-4); }
.slate-page-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--slate-space-4); padding-bottom: var(--slate-space-4); border-bottom: 1px solid var(--slate-border); }
.slate-page-header__title { font-size: var(--slate-font-size-2xl); letter-spacing: -0.022em; }
.slate-page-header__sub { margin-top: var(--slate-space-1); color: var(--slate-text-muted); font-size: var(--slate-font-size-sm); }
.slate-section { display: flex; flex-direction: column; gap: var(--slate-space-3); }
.slate-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--slate-space-3); }
.slate-section__title { font-size: var(--slate-font-size-md); font-weight: var(--slate-font-weight-semibold); }
.slate-shell { display: grid; grid-template-columns: var(--slate-size-sidebar) minmax(0, 1fr); min-height: 100%; background: var(--slate-bg); }
.slate-shell--collapsed { grid-template-columns: var(--slate-size-sidebar-collapsed) minmax(0, 1fr); }
.slate-shell__main { display: flex; flex-direction: column; min-width: 0; }
.slate-shell--sm { grid-template-columns: 13rem minmax(0, 1fr); }
.slate-shell__content { container-type: inline-size; padding: var(--slate-space-5); display: flex; flex-direction: column; gap: var(--slate-space-5); }
.slate-topbar {
position: sticky; top: 0; z-index: var(--slate-z-sticky); display: flex; align-items: center; gap: var(--slate-space-3);
height: var(--slate-size-topbar); padding-inline: var(--slate-space-4);
border-bottom: 1px solid var(--slate-border); background: color-mix(in srgb, var(--slate-bg) 85%, transparent); backdrop-filter: saturate(1.4) blur(10px);
}
@media (max-width: 860px) {
.slate-shell { grid-template-columns: 1fr; }
.slate-shell > .slate-sidebar { display: none; }
.slate-grid--3, .slate-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slate-split, .slate-split--reverse { grid-template-columns: 1fr; }
.slate-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slate-shell__content { padding: var(--slate-space-4); }
}
@media (max-width: 560px) {
.slate-grid--2, .slate-grid--3, .slate-grid--4 { grid-template-columns: 1fr; }
.slate-bento { grid-template-columns: 1fr; }
.slate-hide-sm { display: none !important; }
}
@media (min-width: 561px) { .slate-show-sm { display: none !important; } }
}
@layer slate.components {
.slate-form { display: flex; flex-direction: column; gap: var(--slate-space-5); }
.slate-form-section { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--slate-space-5); padding-top: var(--slate-space-5); border-top: 1px solid var(--slate-border); }
.slate-form-section:first-child { padding-top: 0; border-top: 0; }
.slate-form-section__title { font-size: var(--slate-font-size-md); font-weight: var(--slate-font-weight-semibold); }
.slate-form-section__desc { margin-top: var(--slate-space-1); color: var(--slate-text-muted); font-size: var(--slate-font-size-sm); }
.slate-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--slate-space-4); align-content: start; }
.slate-form-grid > .slate-span-full { grid-column: 1 / -1; }
.slate-form-actions { display: flex; gap: var(--slate-space-2); justify-content: flex-end; }
.slate-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--slate-space-2); }
.slate-fieldset legend { padding: 0; margin-bottom: var(--slate-space-1_5); font-size: var(--slate-font-size-sm); font-weight: var(--slate-font-weight-medium); }
.slate-field { display: flex; flex-direction: column; gap: var(--slate-space-1_5); min-width: 0; }
.slate-field--inline { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--slate-space-4); }
.slate-label { font-size: var(--slate-font-size-sm); font-weight: var(--slate-font-weight-medium); line-height: 1.2; color: var(--slate-text); display: flex; align-items: center; gap: var(--slate-space-1_5); }
.slate-label--required::after { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--slate-danger-solid); }
.slate-label__opt { color: var(--slate-text-subtle); font-weight: var(--slate-font-weight-regular); }
.slate-hint { font-size: var(--slate-font-size-xs); color: var(--slate-text-subtle); line-height: 1.4; }
.slate-error { display: flex; gap: var(--slate-space-1); font-size: var(--slate-font-size-xs); color: var(--slate-danger); line-height: 1.4; }
.slate-success-text { font-size: var(--slate-font-size-xs); color: var(--slate-success); }
.slate-counter { margin-left: auto; font-size: var(--slate-font-size-xs); color: var(--slate-text-subtle); font-variant-numeric: tabular-nums; }
.slate-input, .slate-textarea, .slate-select {
width: 100%; height: var(--slate-input-height); padding-inline: var(--slate-space-2_5);
border: 1px solid var(--slate-border-strong); border-radius: var(--slate-input-radius);
background: var(--slate-surface-raised); color: var(--slate-text);
box-shadow: var(--slate-shadow-xs);
font: inherit; font-size: var(--slate-font-size-sm); line-height: 1.25;
transition: border-color var(--slate-motion-duration-fast), box-shadow var(--slate-motion-duration-fast), background var(--slate-motion-duration-fast);
}
.slate-textarea { height: auto; min-height: 5rem; padding-block: var(--slate-space-2); resize: vertical; line-height: var(--slate-font-leading-normal); }
.slate-input::placeholder, .slate-textarea::placeholder { color: var(--slate-text-subtle); opacity: 0.8; }
.slate-input:hover, .slate-textarea:hover, .slate-select:hover { border-color: var(--slate-text-subtle); }
.slate-input:focus, .slate-textarea:focus, .slate-select:focus, .slate-input-group:focus-within {
outline: none; border-color: var(--slate-accent-solid);
box-shadow: var(--slate-focus-halo);
}
.slate-input[aria-invalid='true'], .slate-textarea[aria-invalid='true'], .slate-select[aria-invalid='true'], .slate-input-group--invalid { border-color: var(--slate-danger-solid); }
.slate-input[aria-invalid='true']:focus, .slate-input-group--invalid:focus-within { box-shadow: var(--slate-focus-halo-danger); border-color: var(--slate-danger-solid); }
.slate-input--valid { border-color: var(--slate-success-solid); }
.slate-input:disabled, .slate-textarea:disabled, .slate-select:disabled { background: var(--slate-surface); color: var(--slate-text-disabled); cursor: not-allowed; box-shadow: none; }
.slate-input[readonly] { background: var(--slate-surface); }
.slate-input--sm { height: var(--slate-size-control-sm); font-size: var(--slate-font-size-xs); }
.slate-input--lg { height: var(--slate-size-control-lg); font-size: var(--slate-font-size-md); }
.slate-input--mono { font-family: var(--slate-font-family-mono); font-size: var(--slate-font-size-xs); }
.slate-input--right { text-align: right; }
.slate-select {
appearance: none; padding-right: var(--slate-space-6); cursor: pointer;
background-image: 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='%23667084' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9.500 5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 0.5rem center;
}
.slate-input-group {
display: flex; align-items: center; width: 100%; height: var(--slate-input-height);
border: 1px solid var(--slate-border-strong); border-radius: var(--slate-input-radius);
background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-xs);
transition: border-color var(--slate-motion-duration-fast), box-shadow var(--slate-motion-duration-fast);
}
.slate-input-group:hover { border-color: var(--slate-text-subtle); }
.slate-input-group > .slate-input { flex: 1; min-width: 0; height: 100%; border: 0; box-shadow: none; background: transparent; border-radius: 0; }
.slate-input-group > .slate-input:focus { box-shadow: none; }
.slate-input-group__addon {
display: inline-flex; align-items: center; gap: var(--slate-space-1_5); align-self: stretch; padding-inline: var(--slate-space-2_5);
background: var(--slate-surface); color: var(--slate-text-muted); font-size: var(--slate-font-size-sm); white-space: nowrap;
}
.slate-input-group__addon:first-child { border-right: 1px solid var(--slate-border); border-radius: calc(var(--slate-input-radius) - 1px) 0 0 calc(var(--slate-input-radius) - 1px); }
.slate-input-group__addon:last-child { border-left: 1px solid var(--slate-border); border-radius: 0 calc(var(--slate-input-radius) - 1px) calc(var(--slate-input-radius) - 1px) 0; }
.slate-input-group__icon { display: grid; place-items: center; padding-inline: var(--slate-space-2_5) 0; color: var(--slate-text-subtle); }
.slate-input-group__action { display: grid; place-items: center; padding-right: var(--slate-space-1_5); }
.slate-search { position: relative; }
.slate-search .slate-kbd { margin-right: var(--slate-space-2); }
.slate-stepper-input { display: inline-flex; height: var(--slate-input-height); border: 1px solid var(--slate-border-strong); border-radius: var(--slate-input-radius); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-xs); overflow: hidden; }
.slate-stepper-input button { width: var(--slate-input-height); display: grid; place-items: center; border: 0; background: transparent; color: var(--slate-text-muted); }
.slate-stepper-input button:hover { background: var(--slate-surface-hover); color: var(--slate-text); }
.slate-stepper-input button:first-child { border-right: 1px solid var(--slate-border); } .slate-stepper-input button:last-child { border-left: 1px solid var(--slate-border); }
.slate-stepper-input input { width: 3.5rem; border: 0; outline: 0; background: transparent; text-align: center; font-weight: var(--slate-font-weight-medium); font-size: var(--slate-font-size-sm); font-variant-numeric: tabular-nums; }
.slate-stepper-input:focus-within { border-color: var(--slate-accent-solid); box-shadow: var(--slate-focus-halo); }
.slate-check, .slate-radio { display: inline-flex; align-items: flex-start; gap: var(--slate-space-2); font-size: var(--slate-font-size-sm); line-height: 1.25rem; cursor: pointer; }
.slate-check input, .slate-radio input {
appearance: none; flex: none; width: 1rem; height: 1rem; margin: 0.125rem 0 0; display: grid; place-content: center;
border: 1px solid var(--slate-border-strong); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-xs);
transition: background var(--slate-motion-duration-fast), border-color var(--slate-motion-duration-fast);
}
.slate-check input { border-radius: var(--slate-radius-sm); } .slate-radio input { border-radius: 50%; }
.slate-check input:hover, .slate-radio input:hover { border-color: var(--slate-text-subtle); }
.slate-check input:checked, .slate-check input:indeterminate, .slate-radio input:checked { background: var(--slate-accent-solid); border-color: var(--slate-accent-solid); box-shadow: var(--slate-button-highlight); }
.slate-check input:checked::after { content: ''; width: 0.5rem; height: 0.25rem; border-left: 1.75px solid var(--slate-on-accent); border-bottom: 1.75px solid var(--slate-on-accent); transform: rotate(-45deg) translate(0.5px, -1px); }
.slate-check input:indeterminate::after { content: ''; width: 0.5rem; height: 1.75px; background: var(--slate-on-accent); border-radius: var(--slate-radius-xs); }
.slate-radio input:checked::after { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--slate-on-accent); }
.slate-check input:disabled, .slate-radio input:disabled { background: var(--slate-surface); border-color: var(--slate-border); box-shadow: none; cursor: not-allowed; }
.slate-check:has(input:disabled), .slate-radio:has(input:disabled), .slate-switch:has(input:disabled) { color: var(--slate-text-disabled); cursor: not-allowed; }
.slate-check__desc { display: block; color: var(--slate-text-subtle); font-size: var(--slate-font-size-xs); }
.slate-check-group { display: flex; flex-direction: column; gap: var(--slate-space-2); }
.slate-check-group--row { flex-direction: row; flex-wrap: wrap; gap: var(--slate-space-4); }
.slate-switch { display: inline-flex; align-items: center; gap: var(--slate-space-2); font-size: var(--slate-font-size-sm); cursor: pointer; }
.slate-switch input {
appearance: none; position: relative; flex: none; width: 1.75rem; height: 1rem; margin: 0; border-radius: var(--slate-radius-full);
background: var(--slate-border-strong); transition: background var(--slate-motion-duration-base) var(--slate-motion-easing-standard); cursor: pointer;
}
.slate-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--slate-on-solid); box-shadow: var(--slate-shadow-xs); transition: transform var(--slate-motion-duration-base) var(--slate-motion-easing-spring); }
.slate-switch input:checked { background: var(--slate-accent-solid); }
.slate-switch input:checked::after { transform: translateX(0.75rem); background: var(--slate-on-accent); }
.slate-switch input:disabled { opacity: var(--slate-opacity-disabled); cursor: not-allowed; }
.slate-switch--lg input { width: 2.25rem; height: 1.25rem; } .slate-switch--lg input::after { width: 1rem; height: 1rem; } .slate-switch--lg input:checked::after { transform: translateX(1rem); }
.slate-option-card {
position: relative; display: flex; gap: var(--slate-space-3); padding: var(--slate-space-3) var(--slate-space-4);
border: 1px solid var(--slate-border-strong); border-radius: var(--slate-radius-lg); background: var(--slate-surface-raised); cursor: pointer;
transition: border-color var(--slate-motion-duration-fast), background var(--slate-motion-duration-fast), box-shadow var(--slate-motion-duration-fast);
}
.slate-option-card:hover { border-color: var(--slate-text-subtle); }
.slate-option-card:has(input:checked) { border-color: var(--slate-accent-solid); background: var(--slate-accent-soft); box-shadow: 0 0 0 1px var(--slate-accent-solid); }
.slate-option-card:has(input:focus-visible) { outline: var(--slate-focus-width) solid var(--slate-focus-ring); outline-offset: var(--slate-focus-offset); }
.slate-option-card__title { font-weight: var(--slate-font-weight-semibold); font-size: var(--slate-font-size-sm); }
.slate-option-card__desc { color: var(--slate-text-muted); font-size: var(--slate-font-size-xs); }
.slate-segmented { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--slate-radius-lg); background: var(--slate-surface-hover); }
.slate-segmented button, .slate-segmented label {
display: inline-flex; align-items: center; justify-content: center; gap: var(--slate-space-1_5); height: var(--slate-segmented-height); padding-inline: var(--slate-space-3);
border: 0; border-radius: var(--slate-radius-md); background: transparent; color: var(--slate-text-muted);
font-size: var(--slate-font-size-xs); font-weight: var(--slate-font-weight-medium); cursor: pointer; transition: all var(--slate-motion-duration-fast);
}
.slate-segmented button:hover, .slate-segmented label:hover { color: var(--slate-text); }
.slate-segmented [aria-pressed='true'], .slate-segmented [aria-selected='true'], .slate-segmented label:has(input:checked) { background: var(--slate-surface-raised); color: var(--slate-text); box-shadow: var(--slate-shadow-sm), 0 0 0 1px var(--slate-border); }
.slate-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.slate-slider { appearance: none; width: 100%; height: 4px; margin: 0.5rem 0; border-radius: var(--slate-radius-full); outline: 0; background: linear-gradient(var(--slate-accent-solid), var(--slate-accent-solid)) 0 / var(--slate-fill, 50%) 100% no-repeat, var(--slate-border-strong); }
.slate-slider::-webkit-slider-thumb { appearance: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--slate-accent-solid); background: var(--slate-bg); box-shadow: var(--slate-shadow-sm); cursor: grab; transition: transform var(--slate-motion-duration-fast); }
.slate-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.slate-slider::-moz-range-thumb { width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 2px solid var(--slate-accent-solid); background: var(--slate-bg); cursor: grab; }
.slate-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--slate-accent-solid) 25%, transparent); }
.slate-rating { display: inline-flex; gap: 2px; color: var(--slate-border-strong); }
.slate-rating button { padding: 0; border: 0; background: none; color: inherit; line-height: 0; }
.slate-rating button[aria-pressed='true'], .slate-rating .is-on { color: var(--slate-warning-solid); }
.slate-rating svg { width: 1.125rem; height: 1.125rem; fill: currentColor; stroke: none; }
.slate-dropzone {
display: flex; flex-direction: column; align-items: center; gap: var(--slate-space-1); padding: var(--slate-space-6) var(--slate-space-4);
border: 1.5px dashed var(--slate-border-strong); border-radius: var(--slate-radius-lg); background: var(--slate-surface);
color: var(--slate-text-muted); font-size: var(--slate-font-size-sm); text-align: center; cursor: pointer; transition: all var(--slate-motion-duration-fast);
}
.slate-dropzone:hover, .slate-dropzone.is-over { border-color: var(--slate-accent-solid); background: var(--slate-accent-soft); }
.slate-dropzone__icon { display: grid; place-items: center; width: var(--slate-size-tile); height: var(--slate-size-tile); border-radius: var(--slate-radius-lg); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-xs), 0 0 0 1px var(--slate-border); color: var(--slate-text-muted); margin-bottom: var(--slate-space-1); }
.slate-file {
display: flex; align-items: center; gap: var(--slate-space-3); padding: var(--slate-space-2_5) var(--slate-space-3);
border: 1px solid var(--slate-border); border-radius: var(--slate-radius-lg); background: var(--slate-surface-raised);
}
.slate-file__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--slate-radius-md); background: var(--slate-accent-soft); color: var(--slate-accent); font-size: 0.5625rem; font-weight: var(--slate-font-weight-semibold); }
.slate-file--error { border-color: var(--slate-danger-solid); }
.slate-file--error .slate-file__icon { background: var(--slate-danger-soft); color: var(--slate-danger); }
.slate-otp { display: inline-flex; gap: var(--slate-space-1_5); }
.slate-otp input { width: 2.5rem; height: 3rem; text-align: center; border: 1px solid var(--slate-border-strong); border-radius: var(--slate-radius-md); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-xs); font-family: var(--slate-font-family-mono); font-size: var(--slate-font-size-xl); font-weight: var(--slate-font-weight-medium); }
.slate-otp input:focus { outline: 0; border-color: var(--slate-accent-solid); box-shadow: var(--slate-focus-halo); }
.slate-otp__sep { align-self: center; width: 0.5rem; height: 1px; background: var(--slate-border-strong); }
.slate-tag-input { display: flex; flex-wrap: wrap; gap: var(--slate-space-1); padding: 3px; min-height: var(--slate-input-height); border: 1px solid var(--slate-border-strong); border-radius: var(--slate-input-radius); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-xs); }
.slate-tag-input:focus-within { border-color: var(--slate-accent-solid); box-shadow: var(--slate-focus-halo); }
.slate-tag-input .slate-tag { height: 1.625rem; background: var(--slate-surface-hover); border-color: transparent; }
.slate-tag-input input { flex: 1; min-width: 6rem; border: 0; outline: 0; background: transparent; padding-inline: var(--slate-space-1_5); font-size: var(--slate-font-size-sm); }
.slate-combobox { position: relative; }
.slate-listbox {
max-height: 16rem; overflow: auto; padding: var(--slate-space-1);
border: 1px solid var(--slate-border); border-radius: var(--slate-menu-radius); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-lg);
}
.slate-combobox > .slate-listbox { position: absolute; z-index: var(--slate-z-dropdown); top: calc(100% + 4px); left: 0; right: 0; }
.slate-option { display: flex; align-items: center; gap: var(--slate-space-2); min-height: var(--slate-menu-item-height); padding: var(--slate-space-1) var(--slate-space-2); border-radius: var(--slate-radius-md); font-size: var(--slate-font-size-sm); cursor: pointer; }
.slate-option:hover, .slate-option.is-active { background: var(--slate-surface-hover); }
.slate-option[aria-selected='true'] { font-weight: var(--slate-font-weight-medium); }
.slate-option[aria-selected='true']::after { content: ''; width: 0.875rem; height: 0.875rem; margin-left: auto; flex: none; background: var(--slate-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.500 4.500 4.500L19 7.500'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.500 4.500 4.500L19 7.500'/%3E%3C/svg%3E") center / contain no-repeat; }
.slate-option[aria-disabled='true'] { color: var(--slate-text-disabled); pointer-events: none; }
.slate-option mark { background: none; color: inherit; font-weight: var(--slate-font-weight-semibold); text-decoration: underline; text-decoration-color: var(--slate-accent-solid); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.slate-option__meta { margin-left: auto; color: var(--slate-text-subtle); font-size: var(--slate-font-size-xs); }
.slate-option-group { padding: var(--slate-space-2) var(--slate-space-2) var(--slate-space-1); color: var(--slate-text-subtle); font-size: var(--slate-font-size-2xs); font-weight: var(--slate-font-weight-semibold); letter-spacing: var(--slate-font-tracking-wide); text-transform: uppercase; }
.slate-calendar { width: 17.5rem; padding: var(--slate-space-3); border: 1px solid var(--slate-border); border-radius: var(--slate-radius-xl); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-lg); }
.slate-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--slate-space-2); font-size: var(--slate-font-size-sm); font-weight: var(--slate-font-weight-semibold); }
.slate-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; text-align: center; }
.slate-calendar__dow { height: 1.5rem; display: grid; place-items: center; font-size: var(--slate-font-size-2xs); color: var(--slate-text-subtle); font-weight: var(--slate-font-weight-medium); }
.slate-calendar__day { height: 2.125rem; border: 0; border-radius: var(--slate-radius-md); background: transparent; font-size: var(--slate-font-size-xs); font-variant-numeric: tabular-nums; position: relative; }
.slate-calendar__day:hover { background: var(--slate-surface-hover); }
.slate-calendar__day--out { color: var(--slate-text-disabled); }
.slate-calendar__day--today { font-weight: var(--slate-font-weight-semibold); color: var(--slate-accent); }
.slate-calendar__day--today::after { content: ''; position: absolute; bottom: 4px; left: 50%; width: 3px; height: 3px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.slate-calendar__day--selected, .slate-calendar__day--selected:hover { background: var(--slate-accent-solid); color: var(--slate-on-accent); box-shadow: var(--slate-button-highlight); }
.slate-calendar__day--range { background: var(--slate-accent-soft); border-radius: 0; color: var(--slate-accent); }
.slate-calendar__day:disabled { color: var(--slate-text-disabled); text-decoration: line-through; pointer-events: none; }
.slate-calendar__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--slate-space-2); padding-top: var(--slate-space-2); border-top: 1px solid var(--slate-border); }
.slate-time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--slate-space-1); max-height: 11rem; overflow: auto; }
.slate-swatches { display: flex; flex-wrap: wrap; gap: var(--slate-space-2); }
.slate-swatch { width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--slate-text) 12%, transparent); position: relative; }
.slate-swatch[aria-pressed='true']::after { content: ''; position: absolute; inset: -4px; border: 2px solid var(--c); border-radius: 50%; }
.slate-inline-edit { display: inline-flex; align-items: center; gap: var(--slate-space-2); padding: 1px var(--slate-space-1_5); margin-left: calc(var(--slate-space-1_5) * -1); border: 1px solid transparent; border-radius: var(--slate-radius-md); cursor: text; }
.slate-inline-edit svg { opacity: 0; color: var(--slate-text-subtle); } .slate-inline-edit:hover { border-color: var(--slate-border-strong); background: var(--slate-surface-raised); } .slate-inline-edit:hover svg { opacity: 1; }
.slate-editor { border: 1px solid var(--slate-border-strong); border-radius: var(--slate-radius-lg); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-xs); overflow: hidden; }
.slate-editor__toolbar { display: flex; gap: 2px; padding: var(--slate-space-1_5); border-bottom: 1px solid var(--slate-border); background: var(--slate-surface); }
.slate-editor__body { padding: var(--slate-space-3); min-height: 6rem; font-size: var(--slate-font-size-sm); }
.slate-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; } .slate-strength i { height: 3px; border-radius: var(--slate-radius-xs); background: var(--slate-border-strong); }
.slate-strength[data-level='1'] i:nth-child(-n + 1) { background: var(--slate-danger-solid); }
.slate-strength[data-level='2'] i:nth-child(-n + 2) { background: var(--slate-warning-solid); }
.slate-strength[data-level='3'] i:nth-child(-n + 3), .slate-strength[data-level='4'] i:nth-child(-n + 4) { background: var(--slate-success-solid); }
@media (max-width: 720px) {
.slate-form-section { grid-template-columns: 1fr; gap: var(--slate-space-3); }
.slate-form-grid { grid-template-columns: 1fr; }
.slate-field--inline { align-items: flex-start; }
}
}
@layer slate.components {
.slate-card {
border: 1px solid var(--slate-border); border-radius: var(--slate-card-radius);
background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-xs);
}
.slate-card__body { padding: var(--slate-card-padding); }
.slate-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--slate-space-3); padding: var(--slate-space-3) var(--slate-card-padding); border-bottom: 1px solid var(--slate-border); min-height: 3rem; }
.slate-card__title { font-size: var(--slate-font-size-sm); font-weight: var(--slate-font-weight-semibold); }
.slate-card__desc { color: var(--slate-text-muted); font-size: var(--slate-font-size-xs); }
.slate-card__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--slate-space-2); padding: var(--slate-space-3) var(--slate-card-padding); border-top: 1px solid var(--slate-border); background: var(--slate-surface); border-radius: 0 0 var(--slate-card-radius) var(--slate-card-radius); }
.slate-card--flat { box-shadow: none; }
.slate-card--sunken { background: var(--slate-surface); box-shadow: none; }
.slate-card--interactive { transition: border-color var(--slate-motion-duration-fast), box-shadow var(--slate-motion-duration-base), transform var(--slate-motion-duration-base) var(--slate-motion-easing-standard); cursor: pointer; }
.slate-card--interactive:hover { border-color: var(--slate-border-strong); box-shadow: var(--slate-shadow-md); transform: translateY(-1px); }
.slate-card--selected { border-color: var(--slate-accent-solid); box-shadow: 0 0 0 1px var(--slate-accent-solid); }
.slate-card--glow { border-color: transparent; background: linear-gradient(var(--slate-surface-raised), var(--slate-surface-raised)) padding-box, linear-gradient(135deg, var(--slate-text), var(--slate-border) 55%, var(--slate-text-subtle)) border-box; box-shadow: var(--slate-shadow-md); }
.slate-card--media { overflow: hidden; }
.slate-card--media > .slate-aspect { border-radius: 0; }
.slate-table-wrap { overflow: auto; border: 1px solid var(--slate-border); border-radius: var(--slate-card-radius); background: var(--slate-surface-raised); }
.slate-table { width: 100%; font-size: var(--slate-font-size-sm); }
.slate-table th {
height: var(--slate-table-header-height); padding-inline: var(--slate-space-3); text-align: left; white-space: nowrap;
background: var(--slate-surface); border-bottom: 1px solid var(--slate-border);
color: var(--slate-text-subtle); font-size: var(--slate-font-size-xs); font-weight: var(--slate-font-weight-medium);
}
.slate-table td { height: var(--slate-table-row-height); padding: var(--slate-space-1_5) var(--slate-space-3); border-bottom: 1px solid var(--slate-border-subtle); }
.slate-table tbody tr:last-child td { border-bottom: 0; }
.slate-table tbody tr { transition: background var(--slate-motion-duration-instant); }
.slate-table tbody tr:hover { background: var(--slate-surface); }
.slate-table tbody tr[aria-selected='true'] { background: var(--slate-accent-soft); }
.slate-table tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 var(--slate-accent-solid); }
.slate-table--dense td { height: var(--slate-table-row-height-dense); }
.slate-table--comfy td { height: 3.25rem; }
.slate-table--striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--slate-surface) 70%, transparent); }
.slate-table--sticky th { position: sticky; top: 0; z-index: 1; }
.slate-table--bordered td, .slate-table--bordered th { border-right: 1px solid var(--slate-border-subtle); } .slate-table--bordered td:last-child, .slate-table--bordered th:last-child { border-right: 0; }
.slate-table .slate-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.slate-table__check { width: 2.5rem; padding-right: 0 !important; }
.slate-table__actions { width: 2.5rem; text-align: right; }
.slate-table .slate-row-actions { opacity: 0; } .slate-table tr:hover .slate-row-actions, .slate-table tr:focus-within .slate-row-actions { opacity: 1; }
.slate-table__sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.slate-table__sort:hover, th[aria-sort] .slate-table__sort { color: var(--slate-text); }
.slate-table__sort svg { width: 0.75rem; height: 0.75rem; opacity: 0.6; }
th[aria-sort] .slate-table__sort svg { opacity: 1; color: var(--slate-accent); }
.slate-table__expand td { background: var(--slate-surface); padding: var(--slate-space-4) var(--slate-space-4) var(--slate-space-4) var(--slate-space-8); height: auto; }
.slate-table__primary { font-weight: var(--slate-font-weight-medium); color: var(--slate-text); }
.slate-table__sub { display: block; color: var(--slate-text-subtle); font-size: var(--slate-font-size-xs); }
.slate-table tfoot td { background: var(--slate-surface); border-top: 1px solid var(--slate-border); font-weight: var(--slate-font-weight-semibold); }
.slate-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--slate-space-2); margin-bottom: var(--slate-space-3); }
.slate-table-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--slate-space-3); padding: var(--slate-space-2_5) var(--slate-space-3); border-top: 1px solid var(--slate-border); background: var(--slate-surface); color: var(--slate-text-muted); font-size: var(--slate-font-size-xs); }
.slate-bulk-bar { display: flex; align-items: center; gap: var(--slate-space-2); padding: var(--slate-space-2) var(--slate-space-3); border-radius: var(--slate-radius-lg); background: var(--slate-inverse); color: var(--slate-on-inverse); font-size: var(--slate-font-size-sm); box-shadow: var(--slate-shadow-lg); }
.slate-bulk-bar .slate-button { --_fg: var(--slate-on-inverse); --_bg-hover: color-mix(in srgb, var(--slate-on-inverse) 14%, transparent); }
.slate-list-group { border: 1px solid var(--slate-border); border-radius: var(--slate-card-radius); background: var(--slate-surface-raised); overflow: hidden; }
.slate-list-item { display: flex; align-items: center; gap: var(--slate-space-3); padding: var(--slate-space-2_5) var(--slate-space-4); min-height: var(--slate-list-item-min-height); border-bottom: 1px solid var(--slate-border-subtle); font-size: var(--slate-font-size-sm); }
.slate-list-item:last-child { border-bottom: 0; }
a.slate-list-item, .slate-list-item--interactive { text-decoration: none; color: inherit; cursor: pointer; } a.slate-list-item:hover, .slate-list-item--interactive:hover { background: var(--slate-surface); color: inherit; }
.slate-list-item__title { font-weight: var(--slate-font-weight-medium); } .slate-list-item__sub { color: var(--slate-text-subtle); font-size: var(--slate-font-size-xs); }
.slate-dl { display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr); margin: 0; font-size: var(--slate-font-size-sm); }
.slate-dl dt, .slate-dl dd { margin: 0; padding: var(--slate-space-2_5) 0; border-top: 1px solid var(--slate-border-subtle); }
.slate-dl dt { color: var(--slate-text-subtle); } .slate-dl dt:first-of-type, .slate-dl dt:first-of-type + dd { border-top: 0; }
.slate-stat { display: flex; flex-direction: column; gap: var(--slate-space-1); }
.slate-stat__label { font-size: var(--slate-font-size-xs); color: var(--slate-text-muted); font-weight: var(--slate-font-weight-medium); display: flex; align-items: center; gap: var(--slate-space-1_5); }
.slate-stat__value { font-size: clamp(var(--slate-font-size-xl), 4cqi, var(--slate-font-size-3xl)); white-space: nowrap; line-height: 1.1; font-weight: var(--slate-font-weight-semibold); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.slate-stat__value small { font-size: var(--slate-font-size-md); color: var(--slate-text-subtle); font-weight: var(--slate-font-weight-medium); letter-spacing: 0; }
.slate-delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--slate-font-size-xs); font-weight: var(--slate-font-weight-medium); color: var(--slate-text-muted); }
.slate-delta--up { color: var(--slate-success); } .slate-delta--down { color: var(--slate-danger); }
.slate-stat-row { container-type: inline-size; display: flex; flex-wrap: wrap; overflow: hidden; border: 1px solid var(--slate-border); border-radius: var(--slate-card-radius); background: var(--slate-surface-raised); }
.slate-stat-row > .slate-stat { flex: 1 1 8.5rem; min-width: 0; padding: var(--slate-space-4); box-shadow: -1px 0 0 0 var(--slate-border), 0 -1px 0 0 var(--slate-border); }
.slate-progress { height: 0.375rem; border-radius: var(--slate-radius-full); background: var(--slate-surface-active); overflow: hidden; }
.slate-progress > i { display: block; height: 100%; width: var(--slate-value, 50%); border-radius: inherit; background: var(--slate-accent-solid); transition: width var(--slate-motion-duration-slow) var(--slate-motion-easing-standard); }
.slate-progress--success > i { background: var(--slate-success-solid); } .slate-progress--warning > i { background: var(--slate-warning-solid); } .slate-progress--danger > i { background: var(--slate-danger-solid); }
.slate-progress--sm { height: 0.1875rem; } .slate-progress--lg { height: 0.625rem; }
.slate-progress--indeterminate > i { width: 40%; animation: slate-indeterminate 1.4s infinite ease-in-out; }
.slate-progress--striped > i { background-image: linear-gradient(45deg, color-mix(in srgb, var(--slate-on-solid) 22%, transparent) 25%, transparent 25%, transparent 50%, color-mix(in srgb, var(--slate-on-solid) 22%, transparent) 50%, color-mix(in srgb, var(--slate-on-solid) 22%, transparent) 75%, transparent 75%); background-size: 0.75rem 0.75rem; animation: slate-stripes 0.8s linear infinite; }
@keyframes slate-indeterminate { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@keyframes slate-stripes { to { background-position: 0.75rem 0; } }
.slate-ring { --_size: 3.5rem; position: relative; display: inline-grid; place-items: center; width: var(--_size); height: var(--_size); border-radius: 50%; background: conic-gradient(var(--slate-accent-solid) calc(var(--slate-value, 60) * 1%), var(--slate-surface-active) 0); font-size: var(--slate-font-size-xs); font-weight: var(--slate-font-weight-semibold); }
.slate-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--slate-surface-raised); } .slate-ring > span { position: relative; }
.slate-ring--lg { --_size: 5rem; font-size: var(--slate-font-size-md); }
.slate-meter { display: flex; gap: 2px; height: 0.375rem; } .slate-meter i { flex: 1; border-radius: var(--slate-radius-xs); background: var(--slate-surface-active); } .slate-meter i.is-on { background: var(--slate-accent-solid); }
.slate-chart { display: flex; flex-direction: column; gap: var(--slate-space-3); }
.slate-chart__plot { flex: 1 1 auto; }
.slate-chart__plot { position: relative; display: flex; align-items: stretch; gap: var(--slate-space-2); min-height: 11rem; padding-left: 2rem; border-bottom: 1px solid var(--slate-border-strong);
background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), var(--slate-border-subtle) calc(25% - 1px), var(--slate-border-subtle) 25%); }
.slate-chart__bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.slate-chart__bar > i { display: block; width: 100%; max-width: 2rem; margin-inline: auto; height: var(--h); border-radius: var(--slate-radius-sm) var(--slate-radius-sm) 0 0; background: var(--slate-chart-1); transition: opacity var(--slate-motion-duration-fast); }
.slate-chart__bar > i + i { border-radius: 0; background: var(--slate-chart-2); } .slate-chart__bar > i + i + i { background: var(--slate-chart-3); }
.slate-chart__bar:hover > i { opacity: 0.85; }
.slate-chart__axis { display: flex; gap: var(--slate-space-2); padding-left: 2rem; color: var(--slate-text-subtle); font-size: var(--slate-font-size-2xs); } .slate-chart__axis span { flex: 1; text-align: center; }
.slate-chart__ylabels { position: absolute; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; color: var(--slate-text-subtle); font-size: var(--slate-font-size-2xs); font-variant-numeric: tabular-nums; }
.slate-legend { display: flex; flex-wrap: wrap; gap: var(--slate-space-4); font-size: var(--slate-font-size-xs); color: var(--slate-text-muted); }
.slate-legend span::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: var(--slate-space-1_5); border-radius: var(--slate-radius-xs); background: var(--c, var(--slate-chart-1)); }
.slate-sparkline { display: block; width: 100%; height: 2rem; overflow: visible; }
.slate-sparkline path { fill: none; stroke: var(--slate-chart-1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.slate-sparkline .area { fill: color-mix(in srgb, var(--slate-chart-1) 14%, transparent); stroke: none; }
.slate-donut { --_size: 8rem; width: var(--_size); height: var(--_size); border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--slate-chart-1) 0 var(--a, 45%), var(--slate-chart-2) 0 var(--b, 70%), var(--slate-chart-3) 0 var(--c, 88%), var(--slate-chart-6) 0); }
.slate-donut::before { content: ''; position: absolute; inset: 1.375rem; border-radius: 50%; background: var(--slate-surface-raised); } .slate-donut > * { position: relative; text-align: center; }
.slate-heatmap { display: grid; grid-template-columns: repeat(var(--cols, 12), 1fr); gap: 3px; } .slate-heatmap i { aspect-ratio: 1; border-radius: var(--slate-radius-xs); background: color-mix(in srgb, var(--slate-accent-solid) calc(var(--v, 0) * 100%), var(--slate-surface-active)); }
.slate-empty { display: flex; flex-direction: column; align-items: center; gap: var(--slate-space-1_5); padding: var(--slate-space-8) var(--slate-space-5); text-align: center; }
.slate-empty__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--slate-space-2); border-radius: var(--slate-radius-xl); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-sm), 0 0 0 1px var(--slate-border); color: var(--slate-text-muted); }
.slate-empty__title { font-weight: var(--slate-font-weight-semibold); } .slate-empty__desc { max-width: 24rem; color: var(--slate-text-muted); font-size: var(--slate-font-size-sm); margin-bottom: var(--slate-space-2); }
.slate-accordion { border: 1px solid var(--slate-border); border-radius: var(--slate-card-radius); background: var(--slate-surface-raised); overflow: hidden; }
.slate-accordion details { border-bottom: 1px solid var(--slate-border); } .slate-accordion details:last-child { border-bottom: 0; }
.slate-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--slate-space-3); padding: var(--slate-space-3) var(--slate-space-4); font-size: var(--slate-font-size-sm); font-weight: var(--slate-font-weight-medium); cursor: pointer; list-style: none; }
.slate-accordion summary::-webkit-details-marker { display: none; } .slate-accordion summary:hover { background: var(--slate-surface); }
.slate-accordion summary::after { content: ''; width: 0.875rem; height: 0.875rem; flex: none; background: var(--slate-text-subtle); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.500 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.500 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--slate-motion-duration-base); }
.slate-accordion details[open] > summary::after { transform: rotate(180deg); }
.slate-accordion__body { padding: 0 var(--slate-space-4) var(--slate-space-4); color: var(--slate-text-muted); font-size: var(--slate-font-size-sm); }
.slate-accordion--flush { border: 0; border-top: 1px solid var(--slate-border); border-radius: 0; background: transparent; } .slate-accordion--flush summary { padding-inline: 0; } .slate-accordion--flush .slate-accordion__body { padding-inline: 0; }
.slate-timeline { list-style: none; margin: 0; padding: 0; }
.slate-timeline > li { position: relative; padding: 0 0 var(--slate-space-5) var(--slate-space-6); font-size: var(--slate-font-size-sm); }
.slate-timeline > li::before { content: ''; position: absolute; left: 0.5rem; top: 1.125rem; bottom: -0.125rem; width: 1px; background: var(--slate-border-strong); }
.slate-timeline > li:last-child::before { display: none; }
.slate-timeline > li::after { content: ''; position: absolute; left: 0; top: 0.25rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--slate-bg); box-shadow: inset 0 0 0 2px var(--slate-border-strong); }
.slate-timeline > li[data-tone='success']::after { box-shadow: inset 0 0 0 2px var(--slate-success-solid); }
.slate-timeline > li[data-tone='danger']::after { box-shadow: inset 0 0 0 2px var(--slate-danger-solid); }
.slate-timeline > li[data-tone='accent']::after { background: var(--slate-accent-solid); box-shadow: 0 0 0 3px var(--slate-accent-soft); }
.slate-timeline time { display: block; color: var(--slate-text-subtle); font-size: var(--slate-font-size-xs); }
.slate-tree, .slate-tree ul { list-style: none; margin: 0; padding: 0; font-size: var(--slate-font-size-sm); }
.slate-tree ul { margin-left: var(--slate-space-2); padding-left: var(--slate-space-2); border-left: 1px solid var(--slate-border); }
.slate-tree__item { display: flex; align-items: center; gap: var(--slate-space-1_5); height: 1.75rem; padding-inline: var(--slate-space-1_5); border-radius: var(--slate-radius-md); color: var(--slate-text-muted); cursor: pointer; }
.slate-tree__item:hover { background: var(--slate-surface-hover); color: var(--slate-text); }
.slate-tree__item[aria-selected='true'] { background: var(--slate-accent-soft); color: var(--slate-accent); font-weight: var(--slate-font-weight-medium); }
.slate-tree__item svg { color: var(--slate-text-subtle); }
.slate-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: var(--slate-space-3); overflow-x: auto; }
.slate-board__col { display: flex; flex-direction: column; gap: var(--slate-space-2); padding: var(--slate-space-2); border-radius: var(--slate-radius-xl); background: var(--slate-surface); }
.slate-board__head { display: flex; align-items: center; gap: var(--slate-space-2); padding: var(--slate-space-1) var(--slate-space-1_5); font-size: var(--slate-font-size-sm); font-weight: var(--slate-font-weight-semibold); }
.slate-board__card { padding: var(--slate-space-3); border: 1px solid var(--slate-border); border-radius: var(--slate-radius-lg); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-xs); cursor: grab; font-size: var(--slate-font-size-sm); }
.slate-board__card:hover { border-color: var(--slate-border-strong); } .slate-board__card.is-dragging { box-shadow: var(--slate-shadow-lg); transform: rotate(1.5deg); cursor: grabbing; }
.slate-board__drop { height: 3.5rem; border: 1.5px dashed var(--slate-accent-border); border-radius: var(--slate-radius-lg); background: var(--slate-accent-soft); }
.slate-codeblock { border: 1px solid var(--slate-border); border-radius: var(--slate-radius-lg); background: var(--slate-surface); overflow: hidden; }
.slate-codeblock__bar { display: flex; align-items: center; justify-content: space-between; padding: var(--slate-space-1_5) var(--slate-space-1_5) var(--slate-space-1_5) var(--slate-space-3); border-bottom: 1px solid var(--slate-border); color: var(--slate-text-subtle); font-size: var(--slate-font-size-xs); font-family: var(--slate-font-family-mono); }
.slate-codeblock pre { margin: 0; padding: var(--slate-space-3) var(--slate-space-4); overflow-x: auto; font-size: var(--slate-font-size-xs); line-height: 1.7; }
.slate-diff { font-family: var(--slate-font-family-mono); font-size: var(--slate-font-size-xs); } .slate-diff del { background: var(--slate-danger-soft); color: var(--slate-danger); text-decoration: none; padding: 0 3px; border-radius: var(--slate-radius-xs); } .slate-diff ins { background: var(--slate-success-soft); color: var(--slate-success); text-decoration: none; padding: 0 3px; border-radius: var(--slate-radius-xs); }
.slate-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: var(--slate-space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--slate-space-2); }
.slate-carousel > * { scroll-snap-align: start; }
.slate-feature { display: flex; flex-direction: column; gap: var(--slate-space-2); }
.slate-feature__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--slate-radius-lg); background: var(--slate-accent-soft); color: var(--slate-accent); box-shadow: inset 0 0 0 1px var(--slate-accent-border); }
}
@layer slate.components {
.slate-alert {
--_c: var(--slate-info); --_bg: color-mix(in srgb, var(--slate-info-soft) 55%, var(--slate-bg));
display: flex; gap: var(--slate-space-2_5); padding: var(--slate-space-3);
border: 1px solid color-mix(in srgb, var(--_c) 20%, var(--slate-bg)); border-radius: var(--slate-radius-lg);
background: var(--_bg); color: var(--slate-text); font-size: var(--slate-font-size-sm);
}
.slate-alert > svg { color: var(--_c); margin-top: 2px; }
.slate-alert__title { font-weight: var(--slate-font-weight-semibold); }
.slate-alert__body { margin-top: 2px; color: var(--slate-text-muted); }
.slate-alert--success { --_c: var(--slate-success); --_bg: color-mix(in srgb, var(--slate-success-soft) 55%, var(--slate-bg)); }
.slate-alert--warning { --_c: var(--slate-warning); --_bg: color-mix(in srgb, var(--slate-warning-soft) 55%, var(--slate-bg)); }
.slate-alert--danger { --_c: var(--slate-danger); --_bg: color-mix(in srgb, var(--slate-danger-soft) 55%, var(--slate-bg)); }
.slate-alert--accent { --_c: var(--slate-accent); --_bg: var(--slate-surface); border-color: var(--slate-border-strong); }
.slate-alert--neutral { --_c: var(--slate-text-muted); --_bg: var(--slate-surface); border-color: var(--slate-border); }
.slate-alert--bar { border-radius: 0; border-width: 0 0 1px; justify-content: center; align-items: center; }
.slate-alert--leading { border-left: 3px solid var(--_c); }
.slate-callout { padding: var(--slate-space-4); border: 1px solid var(--slate-border); border-radius: var(--slate-radius-lg); background: var(--slate-surface); font-size: var(--slate-font-size-sm); }
.slate-callout__title { display: flex; align-items: center; gap: var(--slate-space-2); font-weight: var(--slate-font-weight-semibold); margin-bottom: var(--slate-space-1); }
.slate-announcement { display: inline-flex; align-items: center; gap: var(--slate-space-2); padding: 3px var(--slate-space-3) 3px 3px; border: 1px solid var(--slate-border); border-radius: var(--slate-radius-full); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-xs); font-size: var(--slate-font-size-xs); color: var(--slate-text-muted); text-decoration: none; }
.slate-announcement:hover { border-color: var(--slate-border-strong); color: var(--slate-text); }
.slate-toast-region { position: fixed; z-index: var(--slate-z-toast); right: var(--slate-space-4); bottom: var(--slate-space-4); display: flex; flex-direction: column; gap: var(--slate-space-2); width: min(22rem, calc(100vw - 2rem)); }
.slate-toast-region--top { top: var(--slate-space-4); bottom: auto; }
.slate-toast {
display: flex; align-items: flex-start; gap: var(--slate-space-2_5); padding: var(--slate-space-3);
border: 1px solid var(--slate-border); border-radius: var(--slate-radius-xl); background: var(--slate-surface-raised);
box-shadow: var(--slate-shadow-lg); font-size: var(--slate-font-size-sm); animation: slate-toast-in var(--slate-motion-duration-base) var(--slate-motion-easing-spring);
}
.slate-toast > svg { margin-top: 2px; flex: none; }
.slate-toast--success > svg { color: var(--slate-success-solid); } .slate-toast--danger > svg { color: var(--slate-danger-solid); } .slate-toast--warning > svg { color: var(--slate-warning-solid); } .slate-toast--info > svg { color: var(--slate-info-solid); }
.slate-toast__title { font-weight: var(--slate-font-weight-semibold); } .slate-toast__desc { color: var(--slate-text-muted); font-size: var(--slate-font-size-xs); margin-top: 1px; }
.slate-toast--inverse .slate-button--ghost { color: var(--slate-on-inverse); }
.slate-toast--inverse { background: var(--slate-inverse); color: var(--slate-on-inverse); border-color: transparent; } .slate-toast--inverse .slate-toast__desc { color: color-mix(in srgb, var(--slate-on-inverse) 70%, transparent); }
.slate-toast.is-leaving { animation: slate-toast-out var(--slate-motion-duration-base) forwards; }
@keyframes slate-toast-in { from { opacity: 0; transform: translateY(0.5rem) scale(0.97); } }
@keyframes slate-toast-out { to { opacity: 0; transform: translateX(1rem); } }
.slate-result { display: flex; flex-direction: column; align-items: center; gap: var(--slate-space-2); padding: var(--slate-space-8) var(--slate-space-4); text-align: center; }
.slate-result__code { font-size: var(--slate-font-size-5xl); font-weight: var(--slate-font-weight-semibold); letter-spacing: -0.06em; line-height: 1; background: linear-gradient(180deg, var(--slate-text), color-mix(in srgb, var(--slate-text) 12%, transparent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slate-result__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--slate-success-soft); color: var(--slate-success); margin-bottom: var(--slate-space-2); }
.slate-result__title { font-size: var(--slate-font-size-xl); font-weight: var(--slate-font-weight-semibold); letter-spacing: -0.02em; }
.slate-result__desc { max-width: 26rem; color: var(--slate-text-muted); margin-bottom: var(--slate-space-3); }
.slate-loading-overlay { position: relative; } .slate-loading-overlay::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--slate-bg) 60%, transparent); backdrop-filter: blur(1px); }
.slate-banner-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--slate-space-4); padding: var(--slate-space-3) var(--slate-space-4); border-radius: var(--slate-radius-xl); background: linear-gradient(120deg, var(--slate-accent-soft), var(--slate-surface)); border: 1px solid var(--slate-accent-border); }
}
@layer slate.components {
.slate-navbar { display: flex; align-items: center; gap: var(--slate-space-5); height: 3.5rem; padding-inline: var(--slate-space-4); border-bottom: 1px solid var(--slate-border); background: color-mix(in srgb, var(--slate-bg) 85%, transparent); backdrop-filter: blur(10px); }
.slate-navbar__brand { display: inline-flex; align-items: center; gap: var(--slate-space-2); font-weight: var(--slate-font-weight-semibold); color: var(--slate-text); text-decoration: none; letter-spacing: -0.02em; }
.slate-navbar__links { display: flex; align-items: center; gap: var(--slate-space-1); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.slate-navbar__link { white-space: nowrap; padding: var(--slate-space-1_5) var(--slate-space-2_5); border-radius: var(--slate-radius-md); color: var(--slate-text-muted); font-size: var(--slate-font-size-sm); font-weight: var(--slate-font-weight-medium); text-decoration: none; }
.slate-navbar__link:hover { background: var(--slate-surface-hover); color: var(--slate-text); } .slate-navbar__link[aria-current='page'] { color: var(--slate-text); background: var(--slate-surface-hover); }
.slate-sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 1px; height: 100vh; padding: var(--slate-space-3) var(--slate-space-2); border-right: 1px solid var(--slate-border); background: var(--slate-surface); overflow-y: auto; }
.slate-sidebar__workspace { display: flex; align-items: center; gap: var(--slate-space-2_5); width: 100%; padding: var(--slate-space-1_5); margin-bottom: var(--slate-space-2); border: 0; border-radius: var(--slate-radius-lg); background: transparent; text-align: left; font-size: var(--slate-font-size-sm); font-weight: var(--slate-font-weight-semibold); }
.slate-sidebar__workspace:hover { background: var(--slate-surface-hover); }
.slate-sidebar__label { padding: var(--slate-space-4) var(--slate-space-2) var(--slate-space-1); font-size: var(--slate-font-size-2xs); font-weight: var(--slate-font-weight-semibold); letter-spacing: var(--slate-font-tracking-wide); text-transform: uppercase; color: var(--slate-text-subtle); }
.slate-nav-item { display: flex; align-items: center; gap: var(--slate-space-2_5); height: var(--slate-nav-item-height); padding-inline: var(--slate-space-2); border-radius: var(--slate-radius-md); color: var(--slate-text-muted); font-size: var(--slate-font-size-sm); font-weight: var(--slate-font-weight-medium); text-decoration: none; transition: background var(--slate-motion-duration-instant); }
.slate-nav-item svg { color: var(--slate-text-subtle); }
.slate-nav-item:hover { background: var(--slate-surface-hover); color: var(--slate-text); }
.slate-nav-item[aria-current='page'] { background: var(--slate-surface-active); color: var(--slate-text); } .slate-nav-item[aria-current='page'] svg { color: var(--slate-text); }
.slate-nav-item__end { margin-left: auto; color: var(--slate-text-subtle); font-size: var(--slate-font-size-xs); }
.slate-nav-sub { display: flex; flex-direction: column; margin-left: var(--slate-space-4); padding-left: var(--slate-space-2); border-left: 1px solid var(--slate-border); }
.slate-sidebar--embedded { position: static; align-self: stretch; height: auto; }
.slate-sidebar--collapsed .slate-nav-item span, .slate-sidebar--collapsed .slate-sidebar__label { display: none; }
.slate-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--slate-space-1_5); font-size: var(--slate-font-size-sm); color: var(--slate-text-subtle); list-style: none; margin: 0; padding: 0; }
.slate-breadcrumb a { color: var(--slate-text-muted); text-decoration: none; } .slate-breadcrumb a:hover { color: var(--slate-text); text-decoration: underline; }
.slate-breadcrumb [aria-current] { color: var(--slate-text); font-weight: var(--slate-font-weight-medium); }
.slate-breadcrumb li + li::before { content: '/'; margin-right: var(--slate-space-1_5); color: var(--slate-border-strong); }
.slate-tabs { display: flex; gap: var(--slate-space-4); border-bottom: 1px solid var(--slate-border); overflow-x: auto; scrollbar-width: none; }
.slate-tab { position: relative; display: inline-flex; align-items: center; gap: var(--slate-space-1_5); padding: 0 0 var(--slate-space-2_5); border: 0; background: none; color: var(--slate-text-subtle); font-size: var(--slate-font-size-sm); font-weight: var(--slate-font-weight-medium); white-space: nowrap; transition: color var(--slate-motion-duration-fast); }
.slate-tab:hover { color: var(--slate-text); }
.slate-tab[aria-selected='true'] { color: var(--slate-text); }
.slate-tab[aria-selected='true']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: var(--slate-radius-xs) var(--slate-radius-xs) 0 0; background: var(--slate-accent-solid); }
.slate-tab:disabled { color: var(--slate-text-disabled); pointer-events: none; }
.slate-tabs--pills { gap: var(--slate-space-1); border: 0; }
.slate-tabs--pills .slate-tab { height: var(--slate-size-control-sm); padding: 0 var(--slate-space-3); border-radius: var(--slate-radius-md); }
.slate-tabs--pills .slate-tab:hover { background: var(--slate-surface-hover); }
.slate-tabs--pills .slate-tab[aria-selected='true'] { background: var(--slate-surface-active); } .slate-tabs--pills .slate-tab[aria-selected='true']::after { display: none; }
.slate-tabs--vertical { flex-direction: column; gap: 1px; border: 0; }
.slate-tabs--vertical .slate-tab { padding: var(--slate-space-1_5) var(--slate-space-3); border-radius: var(--slate-radius-md); } .slate-tabs--vertical .slate-tab[aria-selected='true'] { background: var(--slate-surface-hover); } .slate-tabs--vertical .slate-tab::after { display: none; }
.slate-tabpanel { padding-top: var(--slate-space-4); }
.slate-pagination { display: inline-flex; align-items: center; gap: 2px; }
.slate-page { display: inline-grid; place-items: center; min-width: var(--slate-size-control-sm); height: var(--slate-size-control-sm); padding-inline: var(--slate-space-1_5); border: 0; border-radius: var(--slate-radius-md); background: transparent; color: var(--slate-text-muted); font-size: var(--slate-font-size-xs); font-weight: var(--slate-font-weight-medium); font-variant-numeric: tabular-nums; }
.slate-page:hover { background: var(--slate-surface-hover); color: var(--slate-text); } .slate-page[aria-current='page'] { background: var(--slate-surface-active); color: var(--slate-text); } .slate-page:disabled { color: var(--slate-text-disabled); pointer-events: none; }
.slate-steps { display: flex; flex-wrap: wrap; row-gap: var(--slate-space-2); align-items: center; gap: var(--slate-space-2); list-style: none; margin: 0; padding: 0; font-size: var(--slate-font-size-sm); color: var(--slate-text-subtle); }
.slate-step { display: inline-flex; align-items: center; gap: var(--slate-space-2); }
.slate-step__dot { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; border: 1px solid var(--slate-border-strong); font-size: 0.6875rem; font-weight: var(--slate-font-weight-semibold); background: var(--slate-surface-raised); }
.slate-step--done .slate-step__dot { background: var(--slate-accent-solid); border-color: var(--slate-accent-solid); color: var(--slate-on-accent); }
.slate-step--current { color: var(--slate-text); font-weight: var(--slate-font-weight-medium); } .slate-step--current .slate-step__dot { border-color: var(--slate-accent-solid); color: var(--slate-accent); box-shadow: 0 0 0 3px var(--slate-accent-soft); }
.slate-steps__line { width: 2rem; height: 1px; background: var(--slate-border-strong); } .slate-step--done + .slate-steps__line { background: var(--slate-accent-solid); }
.slate-steps--vertical { flex-direction: column; align-items: stretch; gap: 0; } .slate-steps--vertical .slate-steps__line { width: 1px; height: 1.5rem; margin-left: var(--slate-space-3); }
.slate-toc { display: flex; flex-direction: column; border-left: 1px solid var(--slate-border); font-size: var(--slate-font-size-sm); }
.slate-toc a { padding: var(--slate-space-1) var(--slate-space-3); margin-left: -1px; border-left: 1px solid transparent; color: var(--slate-text-subtle); text-decoration: none; }
.slate-toc a:hover { color: var(--slate-text); } .slate-toc a[aria-current] { color: var(--slate-accent); border-left-color: var(--slate-accent-solid); font-weight: var(--slate-font-weight-medium); }
.slate-tabbar { position: sticky; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding-bottom: env(safe-area-inset-bottom, 0); border-top: 1px solid var(--slate-border); background: color-mix(in srgb, var(--slate-bg) 90%, transparent); backdrop-filter: blur(12px); }
.slate-tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 3.25rem; color: var(--slate-text-subtle); font-size: 0.625rem; font-weight: var(--slate-font-weight-medium); text-decoration: none; }
.slate-tabbar a svg { width: 1.25rem; height: 1.25rem; } .slate-tabbar a[aria-current='page'] { color: var(--slate-accent); }
.slate-tabbar__pip { position: absolute; top: 0.5rem; left: calc(50% + 0.5rem); width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--slate-danger-solid); box-shadow: 0 0 0 2px var(--slate-bg); }
.slate-appbar { display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: center; height: 3rem; border-bottom: 1px solid var(--slate-border); background: color-mix(in srgb, var(--slate-bg) 90%, transparent); backdrop-filter: blur(12px); }
.slate-appbar h1 { font-size: var(--slate-font-size-md); text-align: center; letter-spacing: -0.01em; }
.slate-menu { min-width: 12.5rem; padding: var(--slate-space-1); border: 1px solid var(--slate-border); border-radius: var(--slate-menu-radius); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-lg); }
.slate-menu__item { display: flex; align-items: center; gap: var(--slate-space-2); width: 100%; height: var(--slate-menu-item-height); padding-inline: var(--slate-space-2); border: 0; border-radius: var(--slate-radius-md); background: none; color: var(--slate-text); font-size: var(--slate-font-size-sm); text-align: left; text-decoration: none; }
.slate-menu__item svg { color: var(--slate-text-subtle); } .slate-menu__item:hover, .slate-menu__item:focus-visible { background: var(--slate-surface-hover); outline: 0; color: var(--slate-text); }
.slate-menu__item--danger, .slate-menu__item--danger svg { color: var(--slate-danger); } .slate-menu__item--danger:hover { background: var(--slate-danger-soft); }
.slate-menu__item[aria-disabled='true'] { color: var(--slate-text-disabled); pointer-events: none; }
.slate-menu__item[aria-checked='true']::after { content: '✓'; margin-left: auto; color: var(--slate-accent); }
.slate-menu__item kbd { margin-left: auto; border: 0; background: none; box-shadow: none; color: var(--slate-text-subtle); min-width: 0; padding: 0; }
.slate-menu__label { padding: var(--slate-space-1_5) var(--slate-space-2) var(--slate-space-1); font-size: var(--slate-font-size-2xs); font-weight: var(--slate-font-weight-semibold); letter-spacing: var(--slate-font-tracking-wide); text-transform: uppercase; color: var(--slate-text-subtle); }
.slate-menu__sep { height: 1px; margin: var(--slate-space-1) calc(var(--slate-space-1) * -1); background: var(--slate-border); }
}
@layer slate.components {
.slate-scrim { position: fixed; inset: 0; z-index: var(--slate-z-overlay); background: var(--slate-overlay); backdrop-filter: blur(2px); animation: slate-fade var(--slate-motion-duration-base) both; }
@keyframes slate-fade { from { opacity: 0; } }
@keyframes slate-pop { from { opacity: 0; transform: translateY(0.5rem) scale(0.98); } }
@keyframes slate-slide-left { from { transform: translateX(100%); } }
@keyframes slate-slide-up { from { transform: translateY(100%); } }
dialog.slate-dialog, .slate-dialog {
width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 0; overflow: hidden;
border: 1px solid var(--slate-border); border-radius: var(--slate-dialog-radius); background: var(--slate-surface-raised); color: var(--slate-text);
box-shadow: var(--slate-shadow-xl); display: flex; flex-direction: column;
}
dialog.slate-dialog:not([open]) { display: none; }
dialog.slate-dialog[open] { animation: slate-pop var(--slate-motion-duration-base) var(--slate-motion-easing-standard); }
dialog.slate-dialog::backdrop { background: var(--slate-overlay); backdrop-filter: blur(2px); }
.slate-dialog--sm { width: min(24rem, calc(100vw - 2rem)); } .slate-dialog--lg { width: min(44rem, calc(100vw - 2rem)); }
.slate-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--slate-space-3); padding: var(--slate-space-4) var(--slate-space-4) 0; }
.slate-dialog__title { font-size: var(--slate-font-size-lg); font-weight: var(--slate-font-weight-semibold); letter-spacing: -0.015em; }
.slate-dialog__desc { margin-top: var(--slate-space-1); color: var(--slate-text-muted); font-size: var(--slate-font-size-sm); }
.slate-dialog__body { padding: var(--slate-space-4); overflow: auto; font-size: var(--slate-font-size-sm); }
.slate-dialog__footer { display: flex; justify-content: flex-end; gap: var(--slate-space-2); padding: var(--slate-space-3) var(--slate-space-4); border-top: 1px solid var(--slate-border); background: var(--slate-surface); }
.slate-dialog__icon { display: grid; place-items: center; width: var(--slate-size-tile); height: var(--slate-size-tile); flex: none; border-radius: 50%; background: var(--slate-danger-soft); color: var(--slate-danger); }
.slate-dialog--static { box-shadow: var(--slate-shadow-lg); margin-inline: auto; }
.slate-drawer { position: fixed; z-index: var(--slate-z-modal); top: 0; right: 0; bottom: 0; width: min(26rem, 100vw); display: flex; flex-direction: column; border-left: 1px solid var(--slate-border); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-xl); animation: slate-slide-left var(--slate-motion-duration-slow) var(--slate-motion-easing-standard); }
.slate-drawer--left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--slate-border); }
.slate-drawer--lg { width: min(40rem, 100vw); }
.slate-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--slate-space-3); min-height: 3.25rem; padding: var(--slate-space-2) var(--slate-space-4); border-bottom: 1px solid var(--slate-border); }
.slate-drawer__body { flex: 1; padding: var(--slate-space-4); overflow: auto; }
.slate-drawer__footer { display: flex; justify-content: flex-end; gap: var(--slate-space-2); padding: var(--slate-space-3) var(--slate-space-4); border-top: 1px solid var(--slate-border); background: var(--slate-surface); }
.slate-sheet { position: fixed; z-index: var(--slate-z-modal); left: 0; right: 0; bottom: 0; max-height: 90vh; overflow: auto; padding: 0 var(--slate-space-4) calc(var(--slate-space-4) + env(safe-area-inset-bottom, 0)); border: 1px solid var(--slate-border); border-radius: var(--slate-radius-2xl) var(--slate-radius-2xl) 0 0; background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-xl); animation: slate-slide-up var(--slate-motion-duration-slow) var(--slate-motion-easing-standard); }
.slate-sheet__grab { width: var(--slate-size-tile); height: 4px; margin: var(--slate-space-2) auto var(--slate-space-3); border-radius: var(--slate-radius-xs); background: var(--slate-border-strong); }
.slate-sheet .slate-menu { border: 0; box-shadow: none; padding: 0; } .slate-sheet .slate-menu__item { height: 3rem; font-size: var(--slate-font-size-md); border-radius: 0; border-top: 1px solid var(--slate-border-subtle); }
.slate-preview-frame { position: relative; overflow: hidden; transform: translateZ(0); }
.slate-preview-frame .slate-drawer, .slate-preview-frame .slate-sheet, .slate-preview-frame .slate-scrim { position: absolute; animation: none; }
.slate-popover { position: absolute; z-index: var(--slate-z-dropdown); min-width: 14rem; padding: var(--slate-space-3); border: 1px solid var(--slate-border); border-radius: var(--slate-radius-xl); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-lg); font-size: var(--slate-font-size-sm); animation: slate-pop var(--slate-motion-duration-fast) both; }
.slate-popover[hidden] { display: none; }
.slate-popover::before { content: ''; position: absolute; top: -5px; left: 1.25rem; width: 0.5rem; height: 0.5rem; border-left: 1px solid var(--slate-border); border-top: 1px solid var(--slate-border); background: var(--slate-surface-raised); transform: rotate(45deg); }
.slate-popover--no-arrow::before { display: none; }
.slate-dropdown { position: relative; display: inline-block; }
.slate-dropdown > .slate-menu, .slate-dropdown > .slate-popover { position: absolute; z-index: var(--slate-z-dropdown); top: calc(100% + 6px); left: 0; animation: slate-pop var(--slate-motion-duration-fast) both; }
.slate-dropdown--right > .slate-menu, .slate-dropdown--right > .slate-popover { left: auto; right: 0; }
.slate-dropdown > [hidden] { display: none; }
.slate-hovercard { width: 18rem; padding: var(--slate-space-4); border: 1px solid var(--slate-border); border-radius: var(--slate-radius-xl); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-lg); }
[data-tooltip] { position: relative; }
[data-tooltip]::after {
content: attr(data-tooltip); position: absolute; z-index: var(--slate-z-tooltip); left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 2px);
padding: var(--slate-space-1) var(--slate-space-2); border-radius: var(--slate-radius-md); background: var(--slate-inverse); color: var(--slate-on-inverse);
font-size: var(--slate-font-size-xs); font-weight: var(--slate-font-weight-medium); line-height: 1.3; white-space: nowrap; pointer-events: none;
opacity: 0; transition: opacity var(--slate-motion-duration-fast), transform var(--slate-motion-duration-fast); box-shadow: var(--slate-shadow-md);
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: var(--slate-motion-delay-tooltip); }
[data-tooltip-pos='bottom']::after { bottom: auto; top: calc(100% + 6px); }
[data-tooltip-pos='right']::after { left: calc(100% + 6px); bottom: 50%; transform: translate(2px, 50%); } [data-tooltip-pos='right']:hover::after { transform: translate(0, 50%); }
.slate-tooltip { display: inline-flex; align-items: center; gap: var(--slate-space-2); padding: var(--slate-space-1) var(--slate-space-2); border-radius: var(--slate-radius-md); background: var(--slate-inverse); color: var(--slate-on-inverse); font-size: var(--slate-font-size-xs); font-weight: var(--slate-font-weight-medium); box-shadow: var(--slate-shadow-md); }
.slate-tooltip kbd { background: transparent; border-color: color-mix(in srgb, var(--slate-on-inverse) 30%, transparent); color: inherit; }
.slate-command { width: min(36rem, calc(100vw - 2rem)); overflow: hidden; border: 1px solid var(--slate-border); border-radius: var(--slate-radius-2xl); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-xl); }
.slate-command__input { display: flex; align-items: center; gap: var(--slate-space-2_5); height: 3rem; padding-inline: var(--slate-space-4); border-bottom: 1px solid var(--slate-border); color: var(--slate-text-subtle); }
.slate-command__input input { flex: 1; border: 0; outline: 0; background: none; color: var(--slate-text); font-size: var(--slate-font-size-md); }
.slate-command__list { max-height: 20rem; overflow: auto; padding: var(--slate-space-1_5); }
.slate-command__item { display: flex; align-items: center; gap: var(--slate-space-2_5); height: var(--slate-command-item-height); padding-inline: var(--slate-space-2_5); border-radius: var(--slate-radius-lg); font-size: var(--slate-font-size-sm); cursor: pointer; }
.slate-command__item svg { color: var(--slate-text-subtle); } .slate-command__item:hover, .slate-command__item[aria-selected='true'] { background: var(--slate-surface-hover); }
.slate-command__item[aria-selected='true'] svg { color: var(--slate-text); }
.slate-command__foot { display: flex; gap: var(--slate-space-4); padding: var(--slate-space-2) var(--slate-space-4); border-top: 1px solid var(--slate-border); background: var(--slate-surface); color: var(--slate-text-subtle); font-size: var(--slate-font-size-xs); }
}
@layer slate.components {
.slate-auth { width: min(23rem, 100%); display: flex; flex-direction: column; gap: var(--slate-space-5); }
.slate-auth__head { display: flex; flex-direction: column; gap: var(--slate-space-1_5); text-align: center; align-items: center; }
.slate-logo { display: inline-grid; place-items: center; width: var(--slate-size-tile); height: var(--slate-size-tile); border-radius: var(--slate-radius-lg); background: linear-gradient(145deg, var(--slate-accent-solid), color-mix(in srgb, var(--slate-accent-solid) 70%, var(--slate-color-gray-500))); color: var(--slate-on-accent); font-weight: var(--slate-font-weight-semibold); box-shadow: var(--slate-button-highlight), var(--slate-shadow-md); }
.slate-logo--sm { width: var(--slate-size-avatar-sm); height: var(--slate-size-avatar-sm); border-radius: var(--slate-radius-md); font-size: var(--slate-font-size-2xs); }
.slate-pricing { display: flex; flex-direction: column; gap: var(--slate-space-4); padding: var(--slate-space-5); border: 1px solid var(--slate-border); border-radius: var(--slate-radius-xl); background: var(--slate-surface-raised); }
.slate-pricing--featured { border-color: var(--slate-accent-solid); box-shadow: 0 0 0 1px var(--slate-accent-solid), var(--slate-shadow-lg); position: relative; }
.slate-pricing__price { display: flex; align-items: baseline; gap: var(--slate-space-1); font-size: var(--slate-font-size-4xl); font-weight: var(--slate-font-weight-semibold); letter-spacing: -0.04em; }
.slate-pricing__price small { font-size: var(--slate-font-size-sm); color: var(--slate-text-subtle); font-weight: var(--slate-font-weight-regular); letter-spacing: 0; }
.slate-setting { display: flex; align-items: center; justify-content: space-between; gap: var(--slate-space-6); padding: var(--slate-space-3) 0; border-top: 1px solid var(--slate-border-subtle); }
.slate-setting:first-child { border-top: 0; } .slate-setting__title { font-size: var(--slate-font-size-sm); font-weight: var(--slate-font-weight-medium); } .slate-setting__desc { color: var(--slate-text-subtle); font-size: var(--slate-font-size-xs); }
.slate-danger-zone { border: 1px solid color-mix(in srgb, var(--slate-danger-solid) 40%, var(--slate-border)); border-radius: var(--slate-card-radius); padding: 0 var(--slate-space-4); }
.slate-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--slate-space-2); }
.slate-filter { display: inline-flex; align-items: center; height: var(--slate-size-control-sm); border: 1px solid var(--slate-border-strong); border-radius: var(--slate-radius-md); background: var(--slate-surface-raised); font-size: var(--slate-font-size-xs); overflow: hidden; }
.slate-filter > * { padding-inline: var(--slate-space-2); height: 100%; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; }
.slate-filter > * + * { border-left: 1px solid var(--slate-border); } .slate-filter > :first-child { color: var(--slate-text-muted); } .slate-filter > button:hover { background: var(--slate-surface-hover); }
.slate-feed-item { display: flex; gap: var(--slate-space-3); padding: var(--slate-space-3) 0; font-size: var(--slate-font-size-sm); }
.slate-comment { display: flex; gap: var(--slate-space-3); } .slate-comment__body { flex: 1; min-width: 0; }
.slate-comment__bubble { margin-top: var(--slate-space-1); padding: var(--slate-space-2_5) var(--slate-space-3); border: 1px solid var(--slate-border); border-radius: 0 var(--slate-radius-xl) var(--slate-radius-xl) var(--slate-radius-xl); background: var(--slate-surface-raised); font-size: var(--slate-font-size-sm); }
.slate-notification { position: relative; display: flex; gap: var(--slate-space-3); padding: var(--slate-space-3) var(--slate-space-4); border-bottom: 1px solid var(--slate-border-subtle); font-size: var(--slate-font-size-sm); }
.slate-notification--unread { background: var(--slate-accent-soft); } .slate-notification--unread::before { content: ''; position: absolute; left: 0.4rem; top: 1.1rem; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--slate-accent-solid); }
.slate-profile { display: flex; align-items: center; gap: var(--slate-space-4); }
.slate-member { display: flex; align-items: center; gap: var(--slate-space-3); padding: var(--slate-space-2_5) 0; font-size: var(--slate-font-size-sm); }
.slate-integration { display: flex; flex-direction: column; gap: var(--slate-space-3); padding: var(--slate-space-4); border: 1px solid var(--slate-border); border-radius: var(--slate-card-radius); background: var(--slate-surface-raised); }
.slate-integration__logo { display: grid; place-items: center; width: var(--slate-size-tile); height: var(--slate-size-tile); border-radius: var(--slate-radius-lg); background: var(--slate-surface); box-shadow: inset 0 0 0 1px var(--slate-border); font-weight: var(--slate-font-weight-semibold); }
.slate-checklist { display: flex; flex-direction: column; gap: 1px; }
.slate-checklist__item { display: flex; align-items: center; gap: var(--slate-space-3); padding: var(--slate-space-2_5) var(--slate-space-3); border-radius: var(--slate-radius-lg); font-size: var(--slate-font-size-sm); }
.slate-checklist__item:hover { background: var(--slate-surface); }
.slate-checklist__box { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; flex: none; border: 1.5px solid var(--slate-border-strong); border-radius: 50%; }
.slate-checklist__item--done .slate-checklist__box { background: var(--slate-accent-solid); border-color: var(--slate-accent-solid); color: var(--slate-on-accent); }
.slate-checklist__item--done > span:not(.slate-checklist__box) { color: var(--slate-text-subtle); text-decoration: line-through; }
.slate-secret { display: flex; align-items: center; gap: var(--slate-space-2); height: var(--slate-input-height); padding: 0 var(--slate-space-1) 0 var(--slate-space-2_5); border: 1px solid var(--slate-border-strong); border-radius: var(--slate-input-radius); background: var(--slate-surface); font-family: var(--slate-font-family-mono); font-size: var(--slate-font-size-xs); }
.slate-secret span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.slate-testimonial { display: flex; flex-direction: column; gap: var(--slate-space-4); padding: var(--slate-space-5); border: 1px solid var(--slate-border); border-radius: var(--slate-radius-xl); background: var(--slate-surface-raised); }
.slate-hero { display: flex; flex-direction: column; align-items: center; gap: var(--slate-space-4); padding: var(--slate-space-8) var(--slate-space-4); text-align: center; position: relative; isolation: isolate; }
.slate-hero::before { content: ''; position: absolute; inset: 0 10% auto; height: 18rem; z-index: -1; background: radial-gradient(60% 100% at 50% 0, color-mix(in srgb, var(--slate-text) 9%, transparent), transparent 70%); filter: blur(10px); }
.slate-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--slate-space-5); padding: var(--slate-space-6) var(--slate-space-4); border-top: 1px solid var(--slate-border); font-size: var(--slate-font-size-sm); color: var(--slate-text-muted); }
.slate-cookie { display: flex; align-items: center; justify-content: space-between; gap: var(--slate-space-4); padding: var(--slate-space-3) var(--slate-space-4); border: 1px solid var(--slate-border); border-radius: var(--slate-radius-xl); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-lg); font-size: var(--slate-font-size-sm); }
@media (max-width: 720px) { .slate-setting { flex-direction: column; align-items: flex-start; gap: var(--slate-space-2); } .slate-cookie { flex-direction: column; align-items: stretch; } }
}
@layer slate.components {
.slate-w-full { width: 100%; } .slate-h-full { height: 100%; } .slate-h-auto { height: auto; }
.slate-w-2xs { width: var(--slate-size-width-2xs); } .slate-w-xs { width: var(--slate-size-width-xs); } .slate-w-sm { width: var(--slate-size-width-sm); }
.slate-w-md { width: var(--slate-size-width-md); } .slate-w-lg { width: var(--slate-size-width-lg); } .slate-w-xl { width: var(--slate-size-width-xl); } .slate-w-2xl { width: var(--slate-size-width-2xl); }
.slate-mt-0 { margin-top: 0; } .slate-mt-1 { margin-top: var(--slate-space-1); } .slate-mt-2 { margin-top: var(--slate-space-2); } .slate-mt-3 { margin-top: var(--slate-space-3); } .slate-mt-4 { margin-top: var(--slate-space-4); } .slate-mt-5 { margin-top: var(--slate-space-5); }
.slate-mb-0 { margin-bottom: 0; } .slate-mb-1 { margin-bottom: var(--slate-space-1); } .slate-mb-2 { margin-bottom: var(--slate-space-2); } .slate-mb-3 { margin-bottom: var(--slate-space-3); } .slate-mb-4 { margin-bottom: var(--slate-space-4); } .slate-mb-5 { margin-bottom: var(--slate-space-5); }
.slate-mr-2 { margin-right: var(--slate-space-2); } .slate-ml-auto { margin-left: auto; } .slate-mx-auto { margin-inline: auto; }
.slate-p-0 { padding: 0; } .slate-p-4 { padding: var(--slate-space-4); }
.slate-static { position: static; } .slate-flex { display: flex; } .slate-col { flex-direction: column; } .slate-no-events { pointer-events: none; }
.slate-prose-narrow { max-width: var(--slate-size-width-xl); }
.slate-frame { position: relative; height: 40rem; overflow: auto; border: 1px solid var(--slate-border); border-radius: var(--slate-radius-xl); background: var(--slate-bg); transform: translateZ(0); }
.slate-device {
position: relative; overflow: hidden; transform: translateZ(0);
width: var(--slate-size-width-md); height: 24rem; margin: var(--slate-space-4) auto;
border: 1px solid var(--slate-border); border-radius: var(--slate-radius-2xl); background: var(--slate-bg);
}
.slate-device--short { height: 22rem; background: var(--slate-surface); }
.slate-device--flex { display: flex; flex-direction: column; }
}
@layer slate.components {
.slate-loader-ring { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--slate-border-strong); border-top-color: var(--slate-accent-solid); border-right-color: var(--slate-accent-solid); animation: slate-spin 0.9s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite; }
.slate-loader-pulse { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--slate-accent-solid); animation: slate-pulse 1.2s ease-in-out infinite; }
.slate-loader-orbit { position: relative; display: inline-block; width: 1.5rem; height: 1.5rem; }
.slate-loader-orbit::before, .slate-loader-orbit::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--slate-accent-solid); animation: slate-ripple 1.4s ease-out infinite; }
.slate-loader-orbit::after { animation-delay: 0.7s; }
.slate-loader-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 1.5rem; }
.slate-loader-bars i { width: 3px; height: 100%; border-radius: var(--slate-radius-sm); background: var(--slate-accent-solid); transform-origin: bottom; animation: slate-eq 1s ease-in-out infinite; }
.slate-loader-bars i:nth-child(2) { animation-delay: 0.12s; } .slate-loader-bars i:nth-child(3) { animation-delay: 0.24s; } .slate-loader-bars i:nth-child(4) { animation-delay: 0.36s; }
.slate-loader-grid { display: inline-grid; grid-template-columns: repeat(3, 6px); gap: 2px; }
.slate-loader-grid i { width: 6px; height: 6px; border-radius: var(--slate-radius-sm); background: var(--slate-accent-solid); animation: slate-fade-cell 1.2s ease-in-out infinite; }
.slate-loader-grid i:nth-child(3n + 2) { animation-delay: 0.15s; } .slate-loader-grid i:nth-child(3n) { animation-delay: 0.3s; }
.slate-loader-grid i:nth-child(n + 4) { animation-delay: 0.3s; } .slate-loader-grid i:nth-child(n + 7) { animation-delay: 0.6s; }
.slate-loader-typing { display: inline-flex; gap: 3px; padding: var(--slate-space-2) var(--slate-space-3); border-radius: var(--slate-radius-lg); background: var(--slate-surface-hover); }
.slate-loader-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--slate-text-subtle); animation: slate-bounce 1.2s infinite ease-in-out; }
.slate-loader-typing i:nth-child(2) { animation-delay: 0.15s; } .slate-loader-typing i:nth-child(3) { animation-delay: 0.3s; }
.slate-loader-line { display: block; position: relative; width: 100%; height: 2px; overflow: hidden; background: var(--slate-border); }
.slate-loader-line::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--slate-accent-solid); animation: slate-slide 1.2s ease-in-out infinite; }
.slate-loader-dash { width: 1.5rem; height: 1.5rem; animation: slate-spin 1.4s linear infinite; }
.slate-loader-dash circle { fill: none; stroke: var(--slate-accent-solid); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 150; animation: slate-dash 1.4s ease-in-out infinite; }
.slate-mark { width: 3rem; height: 3rem; }
.slate-mark circle { fill: none; stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: slate-draw 0.6s ease-out forwards; }
.slate-mark path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: slate-draw 0.4s 0.5s ease-out forwards; }
.slate-mark--success circle, .slate-mark--success path { stroke: var(--slate-success-solid); }
.slate-mark--danger circle, .slate-mark--danger path { stroke: var(--slate-danger-solid); }
.slate-mark--warning circle, .slate-mark--warning path { stroke: var(--slate-warning-solid); }
.slate-progress-indeterminate { display: block; position: relative; width: 100%; height: 4px; overflow: hidden; border-radius: var(--slate-radius-sm); background: var(--slate-surface-active); }
.slate-progress-indeterminate::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 35%; border-radius: inherit; background: var(--slate-accent-solid); animation: slate-slide 1.4s ease-in-out infinite; }
.slate-progress-stripes { display: block; width: 100%; height: 6px; border-radius: var(--slate-radius-sm); background: repeating-linear-gradient(45deg, var(--slate-accent-solid) 0 6px, var(--slate-surface-active) 6px 12px) 0 0 / 17px 100%; animation: slate-stripes 0.8s linear infinite; }
.slate-skeleton-card { display: grid; gap: var(--slate-space-3); padding: var(--slate-space-4); border: 1px solid var(--slate-border); border-radius: var(--slate-radius-lg); }
.slate-skeleton-row { display: flex; align-items: center; gap: var(--slate-space-3); }
.slate-skeleton-row > .slate-skeleton:last-child { flex: 1; }
.slate-anim-fade { animation: slate-fade 0.24s ease-out both; }
.slate-anim-rise { animation: slate-rise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.slate-anim-scale { animation: slate-scale-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.slate-anim-slide { animation: slate-slide-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.slate-anim-shake { animation: slate-shake 0.4s ease-in-out both; }
.slate-anim-pop { animation: slate-pop 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.slate-anim-ping { position: relative; }
.slate-anim-ping::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 var(--slate-accent-solid); animation: slate-ping 1.6s ease-out infinite; }
.slate-stagger > * { animation: slate-rise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.slate-stagger > *:nth-child(2) { animation-delay: 0.05s; } .slate-stagger > *:nth-child(3) { animation-delay: 0.1s; }
.slate-stagger > *:nth-child(4) { animation-delay: 0.15s; } .slate-stagger > *:nth-child(5) { animation-delay: 0.2s; } .slate-stagger > *:nth-child(n + 6) { animation-delay: 0.25s; }
@keyframes slate-pulse { 0%, 100% { transform: scale(0.6); opacity: 0.4; } 50% { transform: scale(1); opacity: 1; } }
@keyframes slate-ripple { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1); opacity: 0; } }
@keyframes slate-eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes slate-fade-cell { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes slate-slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@keyframes slate-dash { 0% { stroke-dasharray: 1 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90 150; stroke-dashoffset: -124; } }
@keyframes slate-draw { to { stroke-dashoffset: 0; } }
@keyframes slate-stripes { to { background-position: 17px 0; } }
@keyframes slate-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slate-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slate-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes slate-slide-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes slate-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes slate-pop { 0% { transform: scale(0.8); } 100% { transform: scale(1); } }
@keyframes slate-ping { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--slate-accent-solid) 40%, transparent); } to { box-shadow: 0 0 0 8px transparent; } }
.slate-anim-up { animation: slate-from-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.slate-anim-down { animation: slate-from-down 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.slate-anim-left { animation: slate-from-left 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.slate-anim-right { animation: slate-from-right 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.slate-anim-zoom { animation: slate-zoom-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.slate-anim-blur { animation: slate-blur-in 0.4s ease-out both; }
.slate-anim-flip { animation: slate-flip-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; backface-visibility: hidden; }
.slate-anim-expand { overflow: hidden; animation: slate-expand 0.28s ease-out both; }
.slate-anim-exit { animation: slate-exit 0.2s ease-in both; }
.slate-anim-sheet { animation: slate-sheet 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.slate-anim-toast { animation: slate-toast-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.slate-anim-wiggle { animation: slate-wiggle 0.5s ease-in-out both; }
.slate-anim-bounce { animation: slate-bounce-y 0.8s ease-in-out infinite; }
.slate-anim-heartbeat { animation: slate-heartbeat 1.2s ease-in-out infinite; }
.slate-anim-flash { animation: slate-flash 1s ease-in-out infinite; }
.slate-anim-float { animation: slate-float 3s ease-in-out infinite; }
.slate-anim-spin { animation: slate-spin 1s linear infinite; }
.slate-anim-glow { animation: slate-glow 2s ease-in-out infinite; }
.slate-anim-highlight { animation: slate-highlight 1.2s ease-out both; }
.slate-hover-lift { transition: transform var(--slate-motion-duration-base) ease, box-shadow var(--slate-motion-duration-base) ease; }
.slate-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--slate-shadow-md); }
.slate-hover-grow { transition: transform var(--slate-motion-duration-base) var(--slate-motion-easing-spring); }
.slate-hover-grow:hover { transform: scale(1.03); }
.slate-hover-glow { transition: box-shadow var(--slate-motion-duration-base) ease; }
.slate-hover-glow:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--slate-accent-solid) 18%, transparent); }
.slate-hover-arrow > svg:last-child { transition: transform var(--slate-motion-duration-base) ease; }
.slate-hover-arrow:hover > svg:last-child { transform: translateX(3px); }
.slate-press { transition: transform var(--slate-motion-duration-fast) ease; }
.slate-press:active { transform: scale(0.97); }
.slate-hover-underline { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--slate-motion-duration-slow) ease; }
.slate-hover-underline:hover { background-size: 100% 1px; }
.slate-text-shimmer { background: linear-gradient(90deg, var(--slate-text-subtle) 30%, var(--slate-text) 50%, var(--slate-text-subtle) 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: slate-shimmer 2s linear infinite; }
.slate-text-typing { display: inline-block; overflow: hidden; white-space: nowrap; border-right: 2px solid currentColor; animation: slate-type 2.4s steps(24) both, slate-caret 0.8s step-end infinite; }
[data-slate-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--slate-motion-duration-slow) ease, transform var(--slate-motion-duration-slow) var(--slate-motion-easing-standard); }
[data-slate-reveal].is-visible { opacity: 1; transform: none; }
.slate-anim-slow { animation-duration: 0.8s !important; }
.slate-anim-fast { animation-duration: 0.15s !important; }
.slate-anim-delay-1 { animation-delay: 0.1s !important; }
.slate-anim-delay-2 { animation-delay: 0.2s !important; }
.slate-anim-delay-3 { animation-delay: 0.4s !important; }
.slate-anim-loop { animation-iteration-count: infinite !important; }
@keyframes slate-from-up { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes slate-from-down { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes slate-from-left { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes slate-from-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes slate-zoom-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes slate-blur-in { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }
@keyframes slate-flip-in { from { opacity: 0; transform: perspective(600px) rotateX(-60deg); } to { opacity: 1; transform: none; } }
@keyframes slate-expand { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 40rem; } }
@keyframes slate-exit { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.96); } }
@keyframes slate-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes slate-toast-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes slate-wiggle { 0%, 100% { transform: none; } 20% { transform: rotate(-6deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes slate-bounce-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-25%); } }
@keyframes slate-heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
@keyframes slate-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes slate-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes slate-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 16px 2px color-mix(in srgb, var(--slate-accent-solid) 35%, transparent); } }
@keyframes slate-highlight { from { background-color: color-mix(in srgb, var(--slate-warning-solid) 35%, transparent); } to { background-color: transparent; } }
@keyframes slate-type { from { width: 0; } to { width: 24ch; } }
@keyframes slate-caret { 50% { border-color: transparent; } }
}
@layer slate.components {
.slate-block { display: flex; flex-direction: column; align-items: center; gap: var(--slate-space-6); width: 100%; padding: var(--slate-space-10) var(--slate-space-4); }
.slate-block__head { display: flex; flex-direction: column; align-items: center; gap: var(--slate-space-2); max-width: 36rem; text-align: center; }
.slate-block__head h2 { margin: 0; font-size: var(--slate-font-size-3xl); letter-spacing: -0.03em; line-height: 1.1; font-weight: var(--slate-font-weight-semibold); }
.slate-block__head p { margin: 0; color: var(--slate-text-muted); }
.slate-block--left .slate-block__head { align-items: flex-start; text-align: left; }
.slate-block--tint { background: var(--slate-surface); border-block: 1px solid var(--slate-border); }
.slate-logo-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--slate-space-3) var(--slate-space-8); color: var(--slate-text-subtle); font-weight: var(--slate-font-weight-semibold); letter-spacing: -0.02em; }
.slate-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--slate-space-5); width: 100%; max-width: 64rem; }
.slate-feature { display: flex; flex-direction: column; align-items: flex-start; gap: var(--slate-space-1_5); }
.slate-feature__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: var(--slate-space-1); border: 1px solid var(--slate-border); border-radius: var(--slate-radius-lg); background: var(--slate-surface-raised); }
.slate-feature__title { font-weight: var(--slate-font-weight-semibold); }
.slate-feature__desc { color: var(--slate-text-muted); font-size: var(--slate-font-size-sm); }
.slate-cta { display: flex; flex-direction: column; align-items: center; gap: var(--slate-space-4); width: 100%; max-width: 64rem; padding: var(--slate-space-10) var(--slate-space-5); border: 1px solid var(--slate-border); border-radius: var(--slate-radius-2xl); background: var(--slate-surface); text-align: center; }
.slate-cta h2 { margin: 0; font-size: var(--slate-font-size-3xl); letter-spacing: -0.03em; font-weight: var(--slate-font-weight-semibold); }
.slate-cta p { margin: 0; max-width: 32rem; color: var(--slate-text-muted); }
.slate-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--slate-space-5); width: 100%; max-width: 64rem; text-align: center; }
.slate-metrics strong { display: block; font-size: var(--slate-font-size-4xl); letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.slate-metrics span { color: var(--slate-text-muted); font-size: var(--slate-font-size-sm); }
.slate-error-page { display: flex; flex-direction: column; align-items: center; gap: var(--slate-space-3); min-height: 24rem; justify-content: center; padding: var(--slate-space-8) var(--slate-space-4); text-align: center; }
.slate-error-page h1 { margin: 0; font-size: var(--slate-font-size-2xl); letter-spacing: -0.02em; }
.slate-error-page p { margin: 0; max-width: 26rem; color: var(--slate-text-muted); }
.slate-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--slate-space-5); width: 100%; max-width: 56rem; }
.slate-summary { display: flex; flex-direction: column; gap: var(--slate-space-2); padding: var(--slate-space-4); border: 1px solid var(--slate-border); border-radius: var(--slate-card-radius); background: var(--slate-surface); font-size: var(--slate-font-size-sm); }
.slate-summary__row { display: flex; justify-content: space-between; gap: var(--slate-space-3); }
.slate-summary__total { padding-top: var(--slate-space-3); border-top: 1px solid var(--slate-border); font-weight: var(--slate-font-weight-semibold); }
.slate-themebar { position: fixed; z-index: var(--slate-z-sticky); right: var(--slate-space-4); bottom: var(--slate-space-4); display: flex; align-items: center; gap: var(--slate-space-1_5); padding: var(--slate-space-1_5) var(--slate-space-2_5); border: 1px solid var(--slate-border); border-radius: var(--slate-radius-xl); background: var(--slate-surface-raised); box-shadow: var(--slate-shadow-lg); }
.slate-themebar__label { color: var(--slate-text-subtle); font-size: var(--slate-font-size-xs); }
.slate-themebar__dot { width: 1rem; height: 1rem; padding: 0; border: 2px solid var(--slate-surface-raised); border-radius: 50%; background: var(--_c, var(--c)); box-shadow: 0 0 0 1px var(--slate-border-strong); cursor: pointer; }
.slate-themebar__dot[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--slate-text); }
.slate-themebar__sep { width: 1px; height: 1rem; background: var(--slate-border); }
.slate-themebar [aria-pressed='true'] { background: var(--slate-surface-active); }
.slate-num { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--slate-accent-solid); color: var(--slate-on-accent); font-size: var(--slate-font-size-sm); font-weight: var(--slate-font-weight-semibold); }
.slate-compare { width: 100%; max-width: 48rem; }
.slate-compare td:not(:first-child), .slate-compare th:not(:first-child) { text-align: center; }
.slate-compare__yes { color: var(--slate-success); } .slate-compare__no { color: var(--slate-text-disabled); }
.slate-changelog { display: grid; gap: var(--slate-space-5); width: 100%; max-width: 40rem; }
.slate-changelog__item { display: grid; grid-template-columns: 7rem 1fr; gap: var(--slate-space-4); padding-top: var(--slate-space-4); border-top: 1px solid var(--slate-border); }
.slate-changelog__item h3 { margin: 0 0 var(--slate-space-1); font-size: var(--slate-font-size-lg); }
.slate-changelog__item ul { margin: var(--slate-space-2) 0 0; padding-left: var(--slate-space-4); color: var(--slate-text-muted); font-size: var(--slate-font-size-sm); }
.slate-person { display: flex; flex-direction: column; align-items: center; gap: var(--slate-space-1); text-align: center; }
.slate-toggle-price { display: inline-flex; align-items: center; gap: var(--slate-space-2); }
.slate-wizard { display: flex; flex-direction: column; gap: var(--slate-space-5); width: 100%; max-width: 32rem; }
@media (max-width: 720px) {
.slate-changelog__item { grid-template-columns: 1fr; }
.slate-themebar { left: var(--slate-space-2); right: var(--slate-space-2); overflow-x: auto; }
.slate-features { grid-template-columns: 1fr; }
.slate-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slate-checkout { grid-template-columns: 1fr; }
}
}