/* Electric Flock tokens, generated from the Electric Flock Design System artifact (RT8VNM55S2draAeFTh8fcQ). Dark is the reference theme. */
:root{
  --bg: #070708;
  --bg-elevated: #101012;
  --bg-sidebar: #0c0c0e;
  --bg-card: rgba(255,255,255,0.03);
  --bg-card-hover: rgba(255,255,255,0.055);
  --material: rgba(16,16,18,0.72);
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.18);
  --control-border: rgba(255,255,255,0.4);
  --text: #f4f0f2;
  --text-muted: rgba(244,240,242,0.62);
  --text-faint: rgba(244,240,242,0.38);
  --pink: #ff3d7a;
  --pink-soft: #ff6b9d;
  --maroon: #6b0f2e;
  --cyan: #5ce1ff;
  --violet: #8a5cff;
  --accent-fill: #d4195a;
  --accent-fill-pressed: #a8124a;
  --on-accent: #ffffff;
  --selection: rgba(255,61,122,0.16);
  --glow: rgba(255,61,122,0.35);
  --glow-soft: rgba(255,61,122,0.16);
  --focus-ring: #ff6b9d;
  --success: var(--cyan);
  --warning: #ffc53d;
  --danger: #ff8a3d;
  --info: var(--violet);
  --traffic-close: #ff5f57;
  --traffic-minimize: #febc2e;
  --traffic-zoom: #28c840;
  --shadow-window: 0 0 0 1px rgba(255,255,255,0.1), 0 24px 64px rgba(0,0,0,0.6);
  --shadow-popover: 0 0 0 1px rgba(255,255,255,0.1), 0 12px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 8px 32px rgba(255,61,122,0.35);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --control-sm: 22px;
  --control-md: 28px;
  --control-lg: 36px;
  --row: 28px;
  --toolbar: 52px;
  --sidebar: 232px;
  --icon: 16px;
  --font-display: "Syne", "SF Pro Display", system-ui, sans-serif;
  --font-sans: "DM Sans", "SF Pro Text", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg: #faf8f9;
  --bg-elevated: #ffffff;
  --bg-sidebar: #f2eef0;
  --bg-card: rgba(7,7,8,0.025);
  --bg-card-hover: rgba(7,7,8,0.05);
  --material: rgba(250,248,249,0.72);
  --border: rgba(7,7,8,0.1);
  --border-strong: rgba(7,7,8,0.22);
  --control-border: rgba(7,7,8,0.46);
  --text: #141215;
  --text-muted: rgba(20,18,21,0.66);
  --text-faint: rgba(20,18,21,0.62);
  --pink: #c8104f;
  --pink-soft: #b8285e;
  --maroon: #6b0f2e;
  --cyan: #0a6e8f;
  --violet: #6a3df0;
  --accent-fill: #c8104f;
  --accent-fill-pressed: #9e0c3e;
  --on-accent: #ffffff;
  --selection: rgba(200,16,79,0.1);
  --glow: rgba(200,16,79,0.22);
  --glow-soft: rgba(200,16,79,0.1);
  --focus-ring: #c8104f;
  --success: var(--cyan);
  --warning: #8a5a00;
  --danger: #b54708;
  --info: var(--violet);
  --traffic-close: #ff5f57;
  --traffic-minimize: #febc2e;
  --traffic-zoom: #28c840;
  --shadow-window: 0 0 0 1px rgba(7,7,8,0.1), 0 24px 64px rgba(7,7,8,0.18);
  --shadow-popover: 0 0 0 1px rgba(7,7,8,0.08), 0 12px 32px rgba(7,7,8,0.14);
  --shadow-glow: 0 8px 24px rgba(200,16,79,0.22);
color-scheme: light}}
:root[data-theme="light"]{
  --bg: #faf8f9;
  --bg-elevated: #ffffff;
  --bg-sidebar: #f2eef0;
  --bg-card: rgba(7,7,8,0.025);
  --bg-card-hover: rgba(7,7,8,0.05);
  --material: rgba(250,248,249,0.72);
  --border: rgba(7,7,8,0.1);
  --border-strong: rgba(7,7,8,0.22);
  --control-border: rgba(7,7,8,0.46);
  --text: #141215;
  --text-muted: rgba(20,18,21,0.66);
  --text-faint: rgba(20,18,21,0.62);
  --pink: #c8104f;
  --pink-soft: #b8285e;
  --maroon: #6b0f2e;
  --cyan: #0a6e8f;
  --violet: #6a3df0;
  --accent-fill: #c8104f;
  --accent-fill-pressed: #9e0c3e;
  --on-accent: #ffffff;
  --selection: rgba(200,16,79,0.1);
  --glow: rgba(200,16,79,0.22);
  --glow-soft: rgba(200,16,79,0.1);
  --focus-ring: #c8104f;
  --success: var(--cyan);
  --warning: #8a5a00;
  --danger: #b54708;
  --info: var(--violet);
  --traffic-close: #ff5f57;
  --traffic-minimize: #febc2e;
  --traffic-zoom: #28c840;
  --shadow-window: 0 0 0 1px rgba(7,7,8,0.1), 0 24px 64px rgba(7,7,8,0.18);
  --shadow-popover: 0 0 0 1px rgba(7,7,8,0.08), 0 12px 32px rgba(7,7,8,0.14);
  --shadow-glow: 0 8px 24px rgba(200,16,79,0.22);
color-scheme: light}
.display{font-family:var(--font-display);font-size:64px;line-height:62px;font-weight:800;letter-spacing:-0.025em}
.section-title{font-family:var(--font-display);font-size:42px;line-height:44px;font-weight:800;letter-spacing:-0.01em}
.lead{font-family:var(--font-sans);font-size:17px;line-height:27px;font-weight:400}
.large-title{font-family:var(--font-display);font-size:26px;line-height:32px;font-weight:800;letter-spacing:-0.01em}
.title-1{font-family:var(--font-display);font-size:22px;line-height:28px;font-weight:800;letter-spacing:-0.005em}
.title-2{font-family:var(--font-display);font-size:17px;line-height:22px;font-weight:700}
.title-3{font-family:var(--font-display);font-size:15px;line-height:20px;font-weight:700}
.headline{font-family:var(--font-sans);font-size:13px;line-height:16px;font-weight:700}
.body{font-family:var(--font-sans);font-size:13px;line-height:18px;font-weight:400}
.body-medium{font-family:var(--font-sans);font-size:13px;line-height:18px;font-weight:500}
.callout{font-family:var(--font-sans);font-size:12px;line-height:16px;font-weight:400}
.footnote{font-family:var(--font-sans);font-size:11px;line-height:14px;font-weight:400}
.eyebrow{font-family:var(--font-mono);font-size:11.5px;line-height:16px;font-weight:400;letter-spacing:0.18em}
.label{font-family:var(--font-mono);font-size:11px;line-height:14px;font-weight:400;letter-spacing:0.15em}
.code{font-family:var(--font-mono);font-size:12px;line-height:18px;font-weight:400}