:root {
  --bg: #060610;
  --s1: #0c0c1a;
  --s2: #111125;
  --s3: #161636;
  --bdr: #1c1c3a;
  --t: #e4e4f2;
  --dim: #5e5e82;
  --dim2: #3e3e5e;

  --v: #818cf8;
  --g: #34d399;
  --y: #fbbf24;
  --r: #f87171;
  --p: #c084fc;
  --cyan: #22d3ee;
  --rose: #fb7185;
  --lime: #a3e635;
  --orange: #fb923c;
  --sky: #38bdf8;

  --up: #34d399;
  --dn: #f87171;

  --font: 'Outfit', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --radius: 14px;
  --radius-sm: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--t);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 30% 0%, rgba(129,140,248,.06), transparent),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(34,211,238,.04), transparent);
}

a { color: var(--v); text-decoration: none; }
a:hover { text-decoration: underline; }

.up { color: var(--up); }
.dn { color: var(--dn); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}