@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;
  --font-sans: var(--font-inter), "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: var(--font-jetbrains-mono), "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --bg: 8 10 18;
  --bg-deep: 5 6 12;
  --surface: 14 17 28;
  --surface-2: 17 21 34;
  --elevated: 20 24 38;
  --border: 255 255 255;
  --ink: 235 240 252;
  --ink-muted: 175 184 205;
  --ink-subtle: 134 145 170;
  --brand: 88 101 242;
  --brand-on-dark: 109 121 246;
  --brand-soft: 167 176 255;
  --accent: 14 165 233;
  --signal: 45 212 191;
  --success: 52 211 153;
  --warn: 245 197 66;
  --danger: 248 113 113;
  --radius-control: 0.5rem;
  --radius-card: 0.5rem;
  --radius-panel: 0.75rem;
  --radius-marketing: 1.125rem;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.35), 0 14px 34px -28px rgba(0,0,0,0.75);
  --shadow-panel: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 80px -48px rgba(0,0,0,0.88);
  --shadow-focus: 0 0 0 1px rgba(109,121,246,0.72), 0 0 0 4px rgba(109,121,246,0.2);
  --shadow-glow: 0 0 0 1px rgba(109,121,246,0.38), 0 18px 70px -28px rgba(109,121,246,0.85);
  --grid: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  --mesh: radial-gradient(760px 420px at 50% -140px, rgba(109,121,246,0.18), transparent 72%), radial-gradient(520px 360px at 88% 10%, rgba(14,165,233,0.12), transparent 68%), radial-gradient(480px 320px at 12% 4%, rgba(45,212,191,0.08), transparent 70%);
}

html {
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--mesh), linear-gradient(180deg, rgb(var(--bg)) 0%, rgb(var(--bg-deep)) 100%);
  color: rgb(var(--ink));
  font-family: var(--font-sans);
}

a {
  color: inherit;
  text-decoration: inherit;
}

::selection {
  background: rgba(109,121,246,0.38);
  color: #fff;
}

.container-page {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 80rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 1024px) {
  .container-page {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.surface,
.surface-strong,
.surface-elevated {
  border: 1px solid rgb(var(--border) / 0.08);
  backdrop-filter: blur(16px);
}

.surface {
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgb(var(--surface-2) / 0.76), rgb(var(--surface) / 0.62));
  box-shadow: var(--shadow-card);
}

.surface-strong {
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgb(var(--elevated) / 0.9), rgb(var(--surface) / 0.78));
  box-shadow: var(--shadow-panel);
}

.surface-elevated {
  border-radius: var(--radius-marketing);
  background: radial-gradient(520px 220px at 10% 0%, rgb(var(--brand-on-dark) / 0.1), transparent 70%), linear-gradient(180deg, rgb(var(--elevated) / 0.96), rgb(var(--surface) / 0.86));
  box-shadow: var(--shadow-panel);
}

.chip,
.kbd {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgb(var(--border) / 0.1);
  border-radius: var(--radius-card);
}

.chip {
  gap: 0.375rem;
  background: rgb(var(--border) / 0.04);
  color: rgb(var(--ink-muted));
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
}

.kbd {
  justify-content: center;
  background: rgb(var(--border) / 0.055);
  color: rgb(var(--ink));
  padding: 0.125rem 0.375rem;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
}

.glow-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--brand-on-dark) / 0.58), rgb(var(--accent) / 0.34), transparent);
}

.eyebrow {
  color: rgb(var(--brand-soft));
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.meta {
  color: rgb(var(--ink-subtle));
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.45;
}

.body-lg {
  color: rgb(var(--ink-muted));
  font-size: 1.125rem;
  line-height: 1.72;
}

.body-sm {
  color: rgb(var(--ink-subtle));
  font-size: 0.875rem;
  line-height: 1.62;
}

.gradient-text {
  background: linear-gradient(135deg, rgb(var(--ink)) 0%, rgb(var(--brand-soft)) 48%, rgb(var(--accent)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}