:root {
  --bg: #ffffff;
  --fg: #0a0a0a;
  --magenta: #e63b83;
  --orange: #f26b2c;
  --purple: #7c4fe3;
  --font-sans: "aktiv-grotesk", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

html, body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { cursor: crosshair; }

#scene {
  display: block;
  width: 100vw;
  height: 100vh;
}

.email {
  position: fixed;
  left: 24px;
  bottom: 24px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--fg);
  text-decoration: none;
  z-index: 10;
  transition: color 160ms ease;
}

.email:hover { color: var(--magenta); }

.fallback {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12vw;
  font-weight: 900;
  letter-spacing: -0.04em;
}

@media (max-width: 640px) {
  .email { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  body { cursor: default; }
}