.stella-visual {
  margin-top: 44px;
  padding: 24px 30px;
  border: 1px solid #39313f;
  background: radial-gradient(ellipse at center, #282033 0, #17131e 56%, #131116 100%);
}
.stella-visual-top,
.stella-visual-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #c1b2ee;
  font-size: 12px;
}
.stella-visual-top {
  justify-content: space-between;
  letter-spacing: 0.08em;
}
.stella-motion-toggle {
  padding: 10px 14px;
  color: #eee9f6;
  border: 1px solid #5a4b6b;
  background: transparent;
  font: inherit;
  cursor: pointer;
  letter-spacing: 0;
}
.stella-motion-toggle:hover,
.stella-motion-toggle:focus-visible {
  background: #30263d;
  outline: 1px solid #c1b2ee;
  outline-offset: 3px;
}
.stella-network {
  display: block;
  width: 100%;
  max-width: 900px;
  margin: 12px auto;
  overflow: visible;
}
.stella-connections {
  stroke: #615071;
  stroke-width: 1;
}
.stella-signals {
  stroke: url(#stella-link-color);
  stroke-width: 3;
  stroke-linecap: round;
}
.stella-signals path {
  stroke-dasharray: 0.15 0.85;
  animation: stella-transmit 4s linear infinite;
  animation-delay: var(--delay);
}
.stella-core {
  fill: #211a2c;
  stroke: #c1b2ee;
  stroke-width: 1.3;
}
.stella-orbit {
  fill: none;
  stroke: #a98ccc;
  stroke-dasharray: 2 12;
  animation: stella-turn 36s linear infinite;
}
.stella-wave {
  fill: none;
  stroke: #bb9cdd;
  animation: stella-breathe 4s ease-out infinite;
}
.stella-star {
  fill: #c1b2ee;
  stroke: #e8dcfa;
  stroke-width: 1;
  animation: stella-turn 24s linear infinite;
}
.stella-star circle {
  fill: #251b33;
}
.stella-destination > circle {
  fill: #211b2c;
  stroke: #806998;
}
.stella-symbol {
  fill: none;
  stroke: #c1b2ee;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stella-destination text {
  fill: #eee9f6;
  font:
    13px Arial,
    sans-serif;
  text-anchor: middle;
}
.stella-visual-bottom {
  padding-top: 20px;
  border-top: 1px solid #39313f;
}
.stella-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c1b2ee;
  flex-shrink: 0;
}
.stella-visual * {
  animation-play-state: paused;
}
.stella-visual.is-animating * {
  animation-play-state: running;
}
@keyframes stella-transmit {
  to {
    stroke-dashoffset: -1;
  }
}
@keyframes stella-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes stella-breathe {
  from {
    transform: scale(0.9);
    opacity: 0.7;
  }
  to {
    transform: scale(1.45);
    opacity: 0;
  }
}
@media (max-width: 600px) {
  .stella-visual {
    padding: 20px 14px;
    margin-top: 30px;
    overflow: hidden;
  }
  .stella-visual-top {
    flex-wrap: wrap;
    font-size: 10px;
  }
  .stella-network {
    width: 150%;
    max-width: none;
    margin: 20px -25%;
  }
  .stella-visual-bottom {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stella-visual * {
    animation: none !important;
  }
  .stella-wave {
    opacity: 0.3;
  }
  .stella-motion-toggle {
    display: none;
  }
}
@media (max-width: 600px) {
  .stella-destination text {
    font-size: 19px;
  }
}