:root {
  color-scheme: dark;
  font-family: "Inter", "SF Pro Display", "Segoe UI", system-ui, sans-serif;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #05060b;
}

.mystery {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(40, 60, 120, 0.4), transparent 55%),
    radial-gradient(circle at 80% 25%, rgba(140, 70, 180, 0.35), transparent 50%),
    radial-gradient(circle at 50% 60%, rgba(40, 120, 140, 0.25), transparent 60%),
    radial-gradient(circle at 25% 80%, rgba(20, 30, 60, 0.6), transparent 65%),
    linear-gradient(180deg, rgba(5, 6, 11, 0.95), rgba(2, 2, 8, 0.98));
}

.mystery::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 120deg, rgba(255, 255, 255, 0.08), transparent, rgba(120, 130, 255, 0.12), transparent);
  filter: blur(60px);
  opacity: 0.5;
  animation: drift 18s ease-in-out infinite;
  z-index: 0;
}

.mystery > * {
  position: relative;
  z-index: 1;
}

@keyframes drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-4%, -3%, 0) scale(1.06);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}