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

:root {
  color-scheme: dark;
  --space-0: #040107;
  --space-1: #12030d;
  --space-2: #2a0817;
  --space-3: #4d1022;
  --sun-core: #fff5da;
  --sun-gold: #ffd77a;
  --sun-orange: #ff8f3a;
  --sun-red: #ff3e4f;
  --sun-crimson: #d11a35;
  --accent-cyan: #8ae9ff;
  --accent-violet: #9b5cff;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 15%, #2f0f30 0%, transparent 42%),
    radial-gradient(circle at 20% 80%, #140b2d 0%, transparent 48%),
    radial-gradient(circle at 85% 70%, #180913 0%, transparent 50%),
    linear-gradient(160deg, #06020f 0%, #04010a 45%, #020106 100%);
  overflow: hidden;
}

.scene {
  position: relative;
  width: min(94vw, 1080px);
  height: min(90vh, 680px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 52%, rgba(160, 36, 61, 0.42) 0%, rgba(70, 9, 24, 0.15) 36%, transparent 60%),
    radial-gradient(circle at 24% 28%, rgba(118, 34, 66, 0.25) 0%, transparent 46%),
    radial-gradient(circle at 78% 68%, rgba(255, 130, 80, 0.2) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(12, 3, 16, 0.95) 35%, rgba(3, 1, 7, 0.98) 72%),
    #040108;
  box-shadow:
    0 48px 110px rgba(0, 0, 0, 0.58),
    0 0 200px rgba(255, 72, 88, 0.22),
    inset 0 0 120px rgba(255, 95, 74, 0.14),
    inset 0 0 260px rgba(0, 0, 0, 0.62);
  isolation: isolate;
  overflow: hidden;
}

.scene::before,
.scene::after {
  content: "";
  position: absolute;
  inset: -28%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

.scene::before {
  background:
    radial-gradient(circle at 45% 50%, rgba(255, 80, 90, 0.35), transparent 46%),
    radial-gradient(circle at 68% 55%, rgba(255, 188, 92, 0.26), transparent 40%),
    radial-gradient(circle at 35% 38%, rgba(164, 79, 255, 0.18), transparent 45%);
  filter: blur(52px) saturate(165%);
  opacity: 0.75;
  animation: atmosphere-bloom 12s ease-in-out infinite;
}

.scene::after {
  background:
    conic-gradient(
      from 40deg at 50% 50%,
      rgba(255, 182, 90, 0) 0deg 34deg,
      rgba(255, 182, 90, 0.3) 34deg 44deg,
      transparent 44deg 92deg,
      rgba(255, 78, 102, 0.34) 92deg 108deg,
      transparent 108deg 170deg,
      rgba(120, 196, 255, 0.22) 170deg 184deg,
      transparent 184deg 360deg
    );
  filter: blur(62px) saturate(160%);
  opacity: 0.4;
  animation: atmosphere-bloom 20s ease-in-out infinite reverse;
}

.scene > * {
  z-index: 1;
}

.stars {
  position: absolute;
  inset: -12%;
  mix-blend-mode: screen;
  background-repeat: repeat;
}

.stars-back {
  opacity: 0.5;
  background-image:
    radial-gradient(1px 1px at 12% 20%, rgba(255, 255, 255, 0.9), transparent 55%),
    radial-gradient(1px 1px at 28% 72%, rgba(255, 226, 200, 0.75), transparent 55%),
    radial-gradient(1px 1px at 52% 44%, rgba(255, 235, 210, 0.85), transparent 55%),
    radial-gradient(1px 1px at 74% 18%, rgba(190, 230, 255, 0.72), transparent 55%),
    radial-gradient(1px 1px at 86% 62%, rgba(255, 210, 178, 0.8), transparent 55%),
    radial-gradient(1px 1px at 40% 86%, rgba(255, 255, 255, 0.84), transparent 55%);
  background-size: 220px 220px;
  animation: star-drift 48s linear infinite, twinkle-soft 7s ease-in-out infinite;
}

.stars-mid {
  opacity: 0.78;
  background-image:
    radial-gradient(1.2px 1.2px at 16% 36%, rgba(255, 240, 220, 0.92), transparent 55%),
    radial-gradient(1.4px 1.4px at 32% 58%, rgba(255, 255, 255, 0.95), transparent 55%),
    radial-gradient(1.2px 1.2px at 52% 20%, rgba(255, 221, 198, 0.9), transparent 55%),
    radial-gradient(1.1px 1.1px at 64% 74%, rgba(255, 244, 224, 0.95), transparent 55%),
    radial-gradient(1.3px 1.3px at 82% 44%, rgba(255, 198, 167, 0.9), transparent 55%),
    radial-gradient(1.2px 1.2px at 90% 80%, rgba(188, 226, 255, 0.9), transparent 55%);
  background-size: 170px 170px;
  animation: star-drift 30s linear infinite reverse, twinkle-bright 5.5s ease-in-out infinite;
}

.stars-front {
  opacity: 0.95;
  background-image:
    radial-gradient(1.8px 1.8px at 12% 28%, rgba(255, 255, 255, 0.98), transparent 58%),
    radial-gradient(1.6px 1.6px at 26% 52%, rgba(255, 226, 188, 0.95), transparent 58%),
    radial-gradient(1.9px 1.9px at 46% 16%, rgba(255, 244, 218, 0.98), transparent 58%),
    radial-gradient(1.5px 1.5px at 62% 70%, rgba(255, 228, 190, 0.93), transparent 58%),
    radial-gradient(1.7px 1.7px at 80% 34%, rgba(198, 232, 255, 0.9), transparent 58%),
    radial-gradient(2px 2px at 92% 78%, rgba(255, 236, 202, 0.96), transparent 58%);
  background-size: 300px 300px;
  animation: star-drift 22s linear infinite, twinkle-front 3.7s ease-in-out infinite;
}

.nebula {
  position: absolute;
  inset: -22%;
  background:
    radial-gradient(circle at 26% 30%, rgba(255, 80, 124, 0.44), transparent 40%),
    radial-gradient(circle at 72% 26%, rgba(255, 126, 64, 0.36), transparent 44%),
    radial-gradient(circle at 44% 72%, rgba(173, 68, 255, 0.28), transparent 50%),
    radial-gradient(circle at 80% 78%, rgba(255, 60, 78, 0.35), transparent 48%);
  filter: blur(58px) saturate(185%);
  mix-blend-mode: screen;
  opacity: 0.78;
  animation: nebula-surge 14s ease-in-out infinite;
}

.dust {
  position: absolute;
  inset: -12%;
  background-image:
    radial-gradient(1px 1px at 10% 24%, rgba(255, 240, 220, 0.15), transparent 60%),
    radial-gradient(1px 1px at 26% 66%, rgba(255, 219, 180, 0.11), transparent 60%),
    radial-gradient(1px 1px at 48% 36%, rgba(255, 234, 204, 0.15), transparent 60%),
    radial-gradient(1px 1px at 68% 54%, rgba(255, 210, 176, 0.11), transparent 60%),
    radial-gradient(1px 1px at 84% 22%, rgba(255, 232, 212, 0.14), transparent 60%),
    radial-gradient(1px 1px at 88% 86%, rgba(255, 232, 212, 0.11), transparent 60%);
  background-size: 140px 140px;
  opacity: 0.4;
  animation: star-drift 20s linear infinite;
}

.plasma {
  position: absolute;
  inset: -20%;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      transparent 0deg 14deg,
      rgba(255, 214, 150, 0.22) 14deg 18deg,
      transparent 18deg 30deg,
      rgba(255, 80, 92, 0.22) 30deg 34deg,
      transparent 34deg 48deg
    ),
    radial-gradient(circle at 50% 50%, rgba(255, 102, 98, 0.22) 0%, rgba(255, 102, 98, 0.1) 26%, transparent 60%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 34%, #000 52%, #000 86%, transparent 94%);
  mix-blend-mode: screen;
  filter: blur(8px) saturate(170%);
  opacity: 0.52;
  animation: plasma-spin 28s linear infinite, plasma-flicker 6s ease-in-out infinite;
}

.aurora {
  position: absolute;
  inset: -24%;
  background:
    linear-gradient(126deg, transparent 8%, rgba(255, 96, 106, 0.48) 34%, rgba(255, 194, 102, 0.36) 55%, transparent 84%),
    linear-gradient(102deg, transparent 4%, rgba(179, 88, 255, 0.34) 34%, rgba(255, 94, 126, 0.4) 60%, transparent 88%),
    linear-gradient(-112deg, transparent 6%, rgba(255, 198, 118, 0.34) 34%, rgba(152, 214, 255, 0.24) 58%, transparent 82%);
  background-size: 170% 170%;
  background-position: 10% 20%, 75% 80%, 60% 16%;
  mask-image: radial-gradient(circle at 50% 56%, #000 0%, #000 47%, transparent 76%);
  mix-blend-mode: screen;
  filter: blur(34px) saturate(185%);
  opacity: 0.62;
  animation: aurora-sway 18s ease-in-out infinite;
}

.rays {
  position: absolute;
  inset: -26%;
  background: repeating-conic-gradient(
    from 10deg at 50% 50%,
    rgba(255, 223, 170, 0) 0deg 7deg,
    rgba(255, 223, 170, 0.3) 7deg 10deg,
    rgba(255, 102, 92, 0.28) 10deg 13deg,
    transparent 13deg 24deg
  );
  mask-image: radial-gradient(circle at 50% 50%, transparent 44%, #000 57%, #000 86%, transparent 95%);
  mix-blend-mode: screen;
  filter: blur(4px) saturate(170%);
  opacity: 0.48;
  animation: ray-spin 52s linear infinite;
}

.warp {
  position: absolute;
  inset: -22%;
  background:
    radial-gradient(circle at 42% 42%, rgba(255, 170, 100, 0.22), transparent 40%),
    radial-gradient(circle at 63% 58%, rgba(255, 74, 98, 0.24), transparent 46%),
    radial-gradient(circle at 56% 28%, rgba(132, 194, 255, 0.16), transparent 48%);
  mix-blend-mode: screen;
  filter: blur(34px) saturate(170%);
  opacity: 0.65;
  animation: warp-flow 8.6s ease-in-out infinite;
}