html,
body,
#root {
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  background: #080808;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.brand-loader-screen {
  display: grid;
  place-items: center;
  min-height: 100svh;
  background: #080808;
}
/* Lightweight brand animation for route and content loading. */
.brand-loader {
  position: relative;
  display: grid;
  place-items: center;
  width: 144px;
  height: 144px;
  isolation: isolate;
}
.brand-loader::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 0, 246, .18), transparent 70%);
  animation: brand-loader-glow 2.4s ease-in-out infinite;
}
.brand-loader__orbit {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(247, 0, 246, .16);
  border-top-color: rgba(247, 0, 246, .85);
  border-right-color: rgba(247, 0, 246, .35);
  border-radius: 50%;
  animation: brand-loader-orbit 2s linear infinite;
}
.brand-loader__icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  animation: brand-loader-orbit 3s linear infinite;
}
@keyframes brand-loader-orbit { to { transform: rotate(360deg); } }
@keyframes brand-loader-glow {
  0%, 100% { opacity: .65; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-loader::before, .brand-loader__icon { animation: none; }
  .brand-loader__orbit {
    animation: brand-loader-orbit 2s linear infinite !important;
  }
}