.hero-art.scene-ready {
  isolation: isolate;
  transform: none;
  margin-inline: 0;
  min-width: 0;
}

.hero-art.scene-ready > :not(.observatory-canvas):not(.observatory-hint) {
  visibility: hidden;
  pointer-events: none;
}

.hero-art .observatory-hint {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  z-index: 1;
  color: #c2bba9;
  text-align: center;
  font: 10px/1.5 var(--sans, sans-serif);
  letter-spacing: 0.035em;
  pointer-events: none;
}

.hero-art .observatory-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: pan-y;
  cursor: grab;
  border-radius: 0;
}

.hero-art .observatory-canvas.is-dragging {
  cursor: grabbing;
}

@media (max-width: 800px) {
  .hero-art.scene-ready {
    height: 500px;
    margin: -10px -10px -15px;
    width: calc(100% + 20px);
  }
}

@media (max-width: 480px) {
  .hero-art.scene-ready {
    height: 430px;
    margin: -4px -10px -10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art .observatory-canvas {
    cursor: default;
  }
}