:root { --bg: #060d14; --bg-elevated: #0b1620; --bg-soft: #0f1d29; --border: #16293a; --border-dashed: #1c3347; --text: #f2f6fa; --text-muted: #8a9bab; --text-dim: #5d7083; --cyan: #4dd9ec; --cyan-dark: #0a2a33; --green: #22c55e; --red: #ef4444; --gray: #6b7c8c; --blue: #3b82f6; --font-sans: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --radius: 12px; --nav-h: 72px; }
@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
  body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  canvas { max-width: 100%; }
  :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
}
@layer components {
  .mono { font-family: var(--font-mono); }
  .cyan, .accent { color: var(--cyan); }
  .muted { color: var(--text-dim); }
  .label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
  .eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}