:root {
  --bg: #0a0a0b;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(239,68,68,0.08), transparent 40%),
    radial-gradient(circle at 90% 20%, rgba(244,63,94,0.06), transparent 35%),
    var(--bg);
  min-height: 100vh;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
input, select, button, table { font-family: inherit; }
.font-mono, input[type="number"] { font-family: 'JetBrains Mono', monospace; }

/* range slider */
input[type="range"] {
  -webkit-appearance: none;
  height: 6px;
  border-radius: 999px;
  background: #27272a;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #ef4444;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.25);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border: none;
  border-radius: 50%;
  background: #ef4444;
  cursor: pointer;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #18181b; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }

/* number input spinner cleanup */
input[type="number"]::-webkit-inner-spin-button { opacity: 0.3; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
main > div { animation: fadeUp 0.5s ease both; }
main > div:last-child { animation-delay: 0.08s; }