/* The full overview is always present beneath its separated, living artwork. */
.has-living-system > .system-art { opacity: 1; transition: opacity 1.15s ease; }
.living-system {
  position: absolute;
  inset: 0;
  overflow: clip;
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.15s ease;
}
.living-system-visible > .system-art { opacity: 0; }
.living-system-visible > .living-system { opacity: 1; }
.has-living-system #planet-labels { z-index: 4; pointer-events: none; }
.has-living-system #planet-labels .planet-label { pointer-events: auto; }
.living-background {
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  object-fit: cover;
  max-width: none;
  transition: translate 1.7s cubic-bezier(.2,.7,.3,1);
}
.living-orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #c49b6c;
  stroke-width: .85;
  stroke-opacity: .29;
  pointer-events: none;
}
.living-orbits path:nth-child(even) { stroke-opacity: .2; }
.living-asteroids {
  position: absolute;
  left: 49.4%;
  top: 52.6%;
  width: 15.4%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: .9;
  pointer-events: none;
}
.living-body {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  transform: translate(calc(-1 * var(--anchor-x, 50%)), calc(-1 * var(--anchor-y, 50%)));
  transform-origin: var(--anchor-x, 50%) var(--anchor-y, 50%);
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: living-body-drift var(--drift-period, 30s) ease-in-out var(--drift-delay, 0s) infinite;
  animation-play-state: paused;
}
.living-system-visible .living-body:not(:disabled) { pointer-events: auto; }
.living-body-art { display: block; width: 100%; height: 100%; object-fit: contain; max-width: none; pointer-events: none; }
.living-body[data-selected="true"] .living-body-art { filter: drop-shadow(0 0 7px #d0b99455); }
.living-label {
  animation: living-body-drift var(--drift-period, 30s) ease-in-out var(--drift-delay, 0s) infinite;
  animation-play-state: paused;
}
[data-living-motion="running"] :is(.living-body, .living-label) { animation-play-state: running; }
[data-layered="original"] :is(.living-body, .living-label),
[data-layered="loading"] :is(.living-body, .living-label),
[data-layered="fallback"] :is(.living-body, .living-label) { animation: none; translate: none; }
@keyframes living-body-drift {
  0%, 100% { translate: 0px 0px; }
  28% { translate: var(--drift-x, 2px) calc(-1 * var(--drift-y, 3px)); }
  64% { translate: calc(-.7 * var(--drift-x, 2px)) var(--drift-y, 3px); }
}
@media (max-width: 700px) {
  .living-background { inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); }
  .living-body { --drift-x: 1px !important; --drift-y: 1.5px !important; }
  .living-orbits { stroke-width: 1.2; stroke-opacity: .22; }
}
@media (prefers-reduced-motion: reduce) {
  .has-living-system > .system-art, .living-system, .living-background { transition: none; }
  .has-living-system :is(.living-body, .living-label) { animation: none; translate: none; }
}