:root {
  --bg: #0d0f12;
  --surface: #151820;
  --surface2: #1c2030;
  --border: #252a3a;
  --accent: #e8c84a;
  --accent2: #4ae8a0;
  --danger: #e84a4a;
  --text: #e8eaf0;
  --text-dim: #6b7280;
  --text-mid: #9ca3af;
  --mono: 'DM Mono', monospace;
  --sans: 'DM Sans', sans-serif;
}

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

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

/* subtle grid noise */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(232,200,74,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,200,74,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 768px) {
  main { padding: 1rem; }
  header { padding: 0.75rem 1rem; }
}