/* Scene styling; common frame and typography are owned by hero-layout.css. */
.host-art {
  min-width: 0px;
  position: relative;
}
.host-stage {
  width: 100%;
  height: calc(var(--hero-art-height) - 30px);
  position: relative;
  background: radial-gradient(48% 44% at 50% 52%, rgba(165, 118, 229, 0.1) 0%, rgba(184, 151, 232, 0.043) 40%, transparent 100%) transparent;
}
.host-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.host-ready .host-fallback, .host-art:not(.host-ready) canvas { display: none; }
.host-art:not(.host-ready) .host-controls { visibility: hidden; }
.host-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.host-controls {
  height: 30px;
  position: relative;
}
.host-controls .atlas-pause {
  right: 14px;
  bottom: 0px;
}

@media (max-width: 900px) {
  .host-stage {
    height: 310px;
  }
  .host-controls {
    height: 40px;
  }
}