@font-face {
  font-family: 'Geist';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Pixel Circle';
  src: url('/fonts/GeistPixel-Circle.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Pixel Square';
  src: url('/fonts/GeistPixel-Square.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --background: #050510;
  --surface: #0f0f1f;
  --surface-raised: #1a1a2e;
  --surface-sunken: #0a0a1a;
  --foreground: #f0f0f5;
  --muted-foreground: #9090a0;
  --subtle-foreground: #767686;
  --border: #252535;
  --border-faint: rgb(240 240 245 / 0.07);
  --border-subtle: rgb(240 240 245 / 0.1);
  --border-emphasis: rgb(240 240 245 / 0.13);
  --border-strong: rgb(240 240 245 / 0.18);
  --primary: #ffd900;
  --primary-hover: #e5c300;
  --primary-foreground: #050510;
  --secondary: #c41e3a;
  --secondary-hover: #a01830;
  --cyber: #00f0ff;
  --success: #64f2b8;
  --warning: #00f0ff;
  --destructive: #ef4444;
  --ring: rgb(255 217 0 / 0.72);
  --primary-border: rgb(255 217 0 / 0.45);
  --primary-border-hover: rgb(255 217 0 / 0.72);
  --primary-subtle: rgb(255 217 0 / 0.09);
  --primary-text: #ffe452;
  --success-border: rgb(100 242 184 / 0.35);
  --surface-translucent: rgb(240 240 245 / 0.035);
  --surface-interactive: rgb(240 240 245 / 0.07);
  --surface-hover: rgb(240 240 245 / 0.1);
  --surface-card: linear-gradient(145deg, rgb(15 15 31 / 0.98), rgb(10 10 26 / 0.98));
  --surface-card-hover: linear-gradient(145deg, #1a1a2e, #0f0f1f);
  --surface-backdrop: rgb(5 5 16 / 0.76);
  --ambient-primary: rgb(255 217 0 / 0.07);
  --ambient-secondary: rgb(0 240 255 / 0.045);
  --avatar-surface-start: #1a1a2e;
  --avatar-surface-end: #0a0a1a;
  --runway-start: #c41e3a;
  --runway-glow: rgb(255 217 0 / 0.4);
  --media-foreground: #f0f0f5;
  --media-muted: #b8b8c5;
  --media-success: var(--success);
  --media-text-shadow: #050510;
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-lg: 0.5rem;
  --shadow-float: 0 1.5rem 4rem rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 217 0 / 0.08);
  --shadow-panel: 0 1rem 3rem rgb(0 0 0 / 0.28);
  --glow-primary: 0 0 1.25rem rgb(255 217 0 / 0.42);
  --glow-cyber: 0 0 1.25rem rgb(0 240 255 / 0.35);
  --display: 'Geist Pixel Circle', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --pixel-pattern: 'Geist Pixel Square', 'Geist Mono', ui-monospace, monospace;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --body: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
}

:root[data-theme='light'] {
  color-scheme: light;
  --background: #faf8f0;
  --surface: #f0ede5;
  --surface-raised: #ffffff;
  --surface-sunken: #e5e2da;
  --foreground: #0a0a0f;
  --muted-foreground: #3a3a45;
  --subtle-foreground: #6a6a75;
  --border: #d0cec5;
  --border-faint: rgb(10 10 15 / 0.07);
  --border-subtle: rgb(10 10 15 / 0.11);
  --border-emphasis: rgb(10 10 15 / 0.15);
  --border-strong: rgb(10 10 15 / 0.24);
  --primary: #003399;
  --primary-hover: #002266;
  --primary-foreground: #ffffff;
  --cyber: #0080a0;
  --success: #137a55;
  --warning: #00758a;
  --destructive: #dc2626;
  --ring: rgb(0 51 153 / 0.5);
  --primary-border: rgb(0 51 153 / 0.42);
  --primary-border-hover: rgb(0 34 102 / 0.68);
  --primary-subtle: rgb(0 51 153 / 0.08);
  --primary-text: #003399;
  --success-border: rgb(19 122 85 / 0.34);
  --surface-translucent: rgb(255 255 255 / 0.68);
  --surface-interactive: rgb(0 51 153 / 0.07);
  --surface-hover: rgb(0 51 153 / 0.11);
  --surface-card: linear-gradient(145deg, #ffffff, #f0ede5);
  --surface-card-hover: linear-gradient(145deg, #ffffff, #e9e6de);
  --surface-backdrop: rgb(10 10 15 / 0.68);
  --ambient-primary: rgb(0 51 153 / 0.07);
  --ambient-secondary: rgb(196 30 58 / 0.04);
  --avatar-surface-start: #ffffff;
  --avatar-surface-end: #e5e2da;
  --runway-start: #c41e3a;
  --runway-glow: rgb(0 51 153 / 0.26);
  --media-muted: var(--foreground);
  --media-success: #6ff2bd;
  --media-text-shadow: transparent;
  --shadow-float: 0 1.5rem 4rem rgb(10 10 15 / 0.16), 0 0 0 1px rgb(0 51 153 / 0.12);
  --shadow-panel: 0 1rem 3rem rgb(10 10 15 / 0.1);
  --glow-primary: 0 0 1rem rgb(0 51 153 / 0.24);
  --glow-cyber: 0 0 1rem rgb(0 128 160 / 0.25);
}

* { box-sizing: border-box; }

html { overflow-x: clip; background: var(--background); scroll-behavior: smooth; }

body {
  min-width: 20rem;
  margin: 0;
  overflow-x: hidden;
  background-color: var(--background);
  background-image:
    radial-gradient(circle at 2px 2px, color-mix(in oklch, var(--primary) 10%, transparent) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--border) 20%, transparent) 1px, transparent 0);
  background-size: 20px 20px, 8px 8px;
  color: var(--foreground);
  font-family: var(--body);
  font-feature-settings: 'tnum' 1, 'ss01' 1;
  font-size: 1rem;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-synthesis: none; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 5vw, 4.25rem); font-weight: 400; letter-spacing: 0.025em; line-height: 1.02; }
h1 em { font: inherit; color: var(--primary-text); }
h1 em.hero-progress { color: var(--success); }
h2 { font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.15; }
h3 { font-size: 1.05rem; font-weight: 400; letter-spacing: 0.02em; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--space-3);
  left: var(--space-3);
  transform: translateY(-180%);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--foreground);
  color: var(--background);
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.skip-link:focus { transform: translateY(0); }

.main { width: min(100% - 2rem, 75rem); margin-inline: auto; padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 9vw, 7rem); }
.lede { max-width: 42rem; color: var(--muted-foreground); font-size: 1.05rem; line-height: 1.65; }
.sheet-kicker, .card-label { color: var(--subtle-foreground); font-family: var(--pixel-pattern); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }

/* Cross-page transitions: quick crossfade between server-rendered pages. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 120ms; }
::view-transition-new(root) { animation-duration: 160ms; }

@keyframes rise { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media (min-width: 48rem) { .main { width: min(100% - 4rem, 75rem); } }