*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
:root {
--bg: #0a0d14;
--bg-glow-1: rgba(99, 102, 241, 0.14);
--bg-glow-2: rgba(34, 211, 238, 0.08);
--surface: rgba(22, 26, 38, 0.72);
--surface-solid:#161a26;
--surface-alt: rgba(255, 255, 255, 0.04);
--surface-hover:rgba(255, 255, 255, 0.07);
--border: rgba(255, 255, 255, 0.08);
--border-strong:rgba(255, 255, 255, 0.16);
--text: #e8eaf2;
--text-dim: #9299b0;
--text-faint: #8e95aa;
--font-size-2xs: 0.75rem;
--font-size-xs: 0.8125rem;
--font-size-sm: 0.875rem;
--font-size-md: 0.9375rem;
--font-size-lg: 1rem;
--font-size-xl: 1.5rem;
--font-size-lead: clamp(16px, 1.8vw, 19px);
--display-xl: clamp(40px, 5.6vw, 72px);
--display-lg: clamp(34px, 4.4vw, 56px);
--display-md: clamp(27px, 3.2vw, 40px);
--display-sm: clamp(20px, 2.35vw, 30px);
--accent: #6366f1;
--accent-2: #22d3ee;
--accent-2-text:#22d3ee;
--on-glass: #ffffff;
--accent-soft: rgba(99, 102, 241, 0.16);
--gradient: linear-gradient(120deg, #6366f1, #22d3ee);
--green: #34d399;
--green-soft: rgba(52, 211, 153, 0.14);
--red: #f87171;
--red-soft: rgba(248, 113, 113, 0.12);
--amber: #fbbf24;
--amber-soft: rgba(251, 191, 36, 0.12);
--cyan: #22d3ee;
--violet: #9b93ff;
--control-h: 44px;
--control-h-compact: 36px;
--control-pad-x: 12px;
--control-icon: 16px;
--control-icon-compact: 14px;
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 22px;
--radius-pill: 999px;
--elevation-control: 0 1px 4px rgba(0, 0, 0, 0.35);
--elevation-raised: 0 18px 50px rgba(0, 0, 0, 0.22);
--elevation-floating: 0 16px 40px rgba(0, 0, 0, 0.35);
--elevation-overlay: 0 24px 70px rgba(0, 0, 0, 0.45);
--glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.10);
--glass-rim-lit: inset 0 1px 0 rgba(255, 255, 255, 0.28);
--glass-rim-hot: inset 0 1px 0 rgba(255, 255, 255, 0.40);
--glass-cast: 0 4px 30px rgba(0, 0, 0, 0.10);
--motion-fast: 120ms;
--motion-base: 200ms;
--motion-slow: 320ms;
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--space-fluid-sm: clamp(16px, 2.4vw, 26px);
--space-fluid-md: clamp(22px, 3.2vw, 34px);
--space-fluid-lg: clamp(22px, 4.6vw, 50px);
--space-fluid-xl: clamp(30px, 8vw, 88px);
--space-2xs: 2px;
--space-xs: 4px;
--space-sm: 6px;
--space-md: 8px;
--space-lg: 12px;
--space-xl: 16px;
--space-2xl: 24px;
--space-3xl: 32px;
--space-4xl: 48px;
--space-5xl: 64px;
--page-gutter: 18px;
--measure: 60ch;
--sidebar-w: 420px;
--tooltip-bg: #232839;
}
[data-theme="light"] {
--bg: #eef1f8;
--bg-glow-1: rgba(99, 102, 241, 0.10);
--bg-glow-2: rgba(34, 211, 238, 0.09);
--surface: rgba(255, 255, 255, 0.85);
--surface-solid:#ffffff;
--surface-alt: rgba(15, 23, 42, 0.04);
--surface-hover:rgba(15, 23, 42, 0.07);
--border: rgba(15, 23, 42, 0.10);
--border-strong:rgba(15, 23, 42, 0.22);
--text: #171c2c;
--text-dim: #5a6178;
--text-faint: #5b6279;
--green: #1a7655;
--red: #cf0a0a;
--amber: #8a6403;
--cyan: #0b798a;
--violet: #5e51ff;
--accent-2-text:#086777;
--on-glass: #000;
--accent-soft: rgba(99, 102, 241, 0.12);
--elevation-control: 0 1px 3px rgba(23, 28, 44, 0.18);
--elevation-raised: 0 12px 34px rgba(23, 28, 44, 0.08);
--elevation-floating: 0 14px 36px rgba(23, 28, 44, 0.14);
--elevation-overlay: 0 20px 56px rgba(23, 28, 44, 0.20);
--glass-cast: 0 4px 30px rgba(23, 28, 44, 0.10);
--tooltip-bg: #262b3d;
}
html { height: 100%; }
body {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
transition: background var(--motion-slow) var(--ease-out), color var(--motion-slow) var(--ease-out);
}
.bg-glow {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(600px 400px at 8% -5%, var(--bg-glow-1), transparent 70%),
radial-gradient(700px 500px at 100% 0%, var(--bg-glow-2), transparent 70%);
}
.app-grid {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.12;
background-image:
linear-gradient(var(--border) 1px, transparent 1px),
linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 58px 58px;
mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
@media (max-width: 900px) {
:root { --page-gutter: 12px; }
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}