:root {
  --bg: #0d1117;
  --grid: rgba(56, 189, 172, 0.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(circle at 20% 0%, #12202b 0%, var(--bg) 55%);
  background-size: 32px 32px, 32px 32px, 100% 100%;
  color: #e2e8f0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

code, pre, .font-mono, table, input, select {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

h1 { font-family: 'JetBrains Mono', monospace; font-weight: 800; letter-spacing: -0.02em; }

/* scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

button { transition: all 0.15s ease; }

/* staggered fade-in for main sections */
main section {
  animation: rise 0.4s ease both;
}
main section:nth-child(2) { animation-delay: 0.05s; }
main section:nth-child(3) { animation-delay: 0.1s; }

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

pre { white-space: pre; }

input[type="checkbox"] { accent-color: #10b981; }