@font-face {
  font-family: Manrope;
  src: url("assets/fonts/manrope.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: Display;
  src: url("assets/fonts/display.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: Mono;
  src: url("assets/fonts/mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --background: #090e13;
  --surface: #101820;
  --surface-elevated: #17232e;
  --border: #283844;
  --border-subtle: #1d2b35;
  --text: #eef3f6;
  --text-muted: #a1b0bc;
  --primary: #97e5cc;
  --primary-glow: rgba(151, 229, 204, 0.09);
  --success: #97e5cc;
  --secondary: #9bc8ed;
  --code-keyword: #c4b5ed;
  --font-body: Manrope, system-ui, sans-serif;
  --font-display: Display, "Arial Narrow", sans-serif;
  --font-mono: Mono, ui-monospace, monospace;
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --container: 1200px;
  --header-height: 80px;
  --gutter: clamp(20px, 4vw, 64px);
  --shadow: 0 20px 64px rgba(0, 0, 0, 0.2);
  --transition: 180ms cubic-bezier(0.23, 1, 0.32, 1);
}