body {
  background-color: #000000 !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out;
}
#loading-screen-root {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.splash-screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.splash-scene {
  position: relative;
  width: min(55vw, 532px);
  aspect-ratio: 1 / 1;
}
.splash-grid {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.splash-grid svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.splash-logo-glow,
.splash-logo {
  position: absolute;
  left: 50%;
  top: 30.037%;
  transform: translate(-50%, 0);
  will-change: transform, opacity, filter;
  aspect-ratio: 1 / 1;
  opacity: 0;
}
.splash-logo-glow {
  width: min(25vw, 250px);
}
.splash-logo {
  width: min(9.1vw, 73px);
}
.splash-logo-glow-inner {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 34%, rgba(255, 255, 255, 0) 72%);
  filter: blur(8px);
  opacity: 1;
}
.splash-logo svg {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.4));
}
.star-field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.twinkle-star {
  position: absolute;
  fill: #ffffff;
  opacity: 0;
  animation: twinkle var(--duration, 2s) infinite ease-in-out;
  animation-delay: var(--delay, 0s);
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: var(--max-opacity, 0.8);
    transform: scale(var(--scale, 1));
  }
}
@media (max-width: 768px) {
  .splash-scene {
    width: min(67vw, 392px);
  }
  .splash-logo-glow {
    width: min(30vw, 131px);
  }
  .splash-logo {
    width: min(13vw, 62px);
  }
}
.splash-logo-glow.is-intro .splash-logo-glow-inner {
  animation: splashGlowPop 650ms cubic-bezier(0.12, 0.9, 0.3, 1) var(--glow-intro-delay, 40ms) both;
}
.splash-logo.is-intro svg {
  opacity: 0;
  transform-origin: center;
  animation: splashLogoPop 600ms cubic-bezier(0.0, 0.9, 0.15, 1.0) var(--logo-intro-delay, 80ms) both;
}
@keyframes splashLogoPop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  18% {
    opacity: 1;
    transform: scale(1.7);
  }
  42% {
    opacity: 1;
    transform: scale(0.82);
  }
  62% {
    opacity: 1;
    transform: scale(1.08);
  }
  80% {
    opacity: 1;
    transform: scale(0.97);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes splashGlowPop {
  0% {
    transform: scale(0.1);
  }
  20% {
    transform: scale(1.8);
  }
  45% {
    opacity: 0.9;
    transform: scale(0.85);
  }
  70% {
    opacity: 0.85;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
}