:root { color-scheme: dark; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 20%, #2b0b3a, #0b0612 70%);
  color: #f6eefc;
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: crosshair;
}
canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
main {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px 96px;
  text-align: center;
  pointer-events: none;
}
main a, main img { pointer-events: auto; }
h1 {
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  line-height: 1.1;
  margin: .4em 0 .7em;
  text-shadow: 0 0 18px #ff3d7f, 0 0 40px #ff3d7f;
}
img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .1);
}
p { background: rgb(11 6 18 / .72); border-radius: 12px; padding: 10px 14px; margin: 1.2em 0; backdrop-filter: blur(3px); }
.hint { font-size: .9rem; color: #c9a8e0; }
#stats {
  position: fixed;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgb(11 6 18 / .8);
  border: 1px solid #ff3d7f;
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
}
@media (prefers-reduced-motion: reduce) { .hint { display: none; } }