/* Decorative only: every surface remains usable without canvas or JavaScript. */
[data-atmosphere] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
[data-atmosphere]::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 70% 56%, rgb(50 113 196 / .17), transparent 53%);
}
/* Static open-orbit fallback; the canvas supplies the interactive detail. */
[data-atmosphere]::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 40%;
  top: 29%;
  width: 57%;
  height: 45%;
  border: 1px solid rgb(125 188 247 / .11);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-16deg);
  pointer-events: none;
}
.halo-atmosphere-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-atmosphere="compact"]::before { opacity: .65; }
[data-atmosphere="compact"]::after { opacity: .45; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .halo-atmosphere-canvas { opacity: .88; }
}
@media (forced-colors: active) {
  [data-atmosphere]::before, [data-atmosphere]::after, .halo-atmosphere-canvas { display: none; }
}