.astral-logo {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1983 / 793;
  margin-inline: auto;
  pointer-events: none;
  isolation: isolate;
}
.astral-logo-poster,
.astral-logo-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.astral-logo-canvas { opacity: 0; }
.astral-logo-ready .astral-logo-canvas { opacity: 1; }
.astral-logo-ready .astral-logo-poster { opacity: 0; }
.astral-logo-boot { width: min(84vw, 740px); }
.astral-logo-auth { margin-bottom: 8px; }
.astral-logo-roster { width: min(60vw, 270px); margin: 0 0 4px; }
.astral-logo-loading { width: min(82vw, 520px); }
.boot-logo { max-width: 100%; }
.auth-card .logo-sub { margin-top: 0; }
@media (max-width: 480px) {
  .astral-logo-boot { width: 92vw; }
  .astral-logo-auth { margin-block: -4px 4px; }
  .astral-logo-roster { width: min(70vw, 240px); }
}