:root {
  color-scheme: dark;
}
* { -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  background: #0a0a0a;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: #e4e4e7;
}
body {
  background-image:
    radial-gradient(circle at 12% -10%, rgba(16,185,129,0.06), transparent 40%),
    radial-gradient(circle at 90% 0%, rgba(244,63,94,0.05), transparent 45%),
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 28px;
  min-height: 100vh;
}
.font-mono, code, pre { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* thin scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3f3f46; }

/* phase entrance stagger */
.phase-enter > * {
  opacity: 0;
  transform: translateY(10px);
  animation: rise 0.5s cubic-bezier(.2,.7,.3,1) forwards;
}
.phase-enter > *:nth-child(1) { animation-delay: .02s; }
.phase-enter > *:nth-child(2) { animation-delay: .08s; }
.phase-enter > *:nth-child(3) { animation-delay: .14s; }
.phase-enter > *:nth-child(4) { animation-delay: .20s; }
.phase-enter > *:nth-child(5) { animation-delay: .26s; }

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

button { cursor: pointer; }
a { text-decoration: none; }