.connection-scene-wrap {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 900 / 620;
}

.connection-scene-wrap #connection-scene,
#connection-scene .connection-scene {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#connection-scene .connection-outline {
  fill: rgba(205, 205, 191, .018);
  stroke: rgba(219, 218, 202, .46);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}

#connection-scene .connection-grid {
  fill: none;
  stroke: rgba(198, 199, 184, .18);
  stroke-width: .85;
  vector-effect: non-scaling-stroke;
}

#connection-scene .connection-intra {
  fill: none;
  stroke: rgba(215, 215, 201, .24);
  stroke-width: .95;
  vector-effect: non-scaling-stroke;
}

#connection-scene .connection-label {
  fill: rgba(233, 232, 217, .76);
  font: 400 18px/1.2 Manrope, Arial, sans-serif;
  letter-spacing: .02em;
}

#connection-scene .connection-nodes circle {
  fill: rgba(222, 222, 207, .76);
}

#connection-scene .connection-thread {
  stroke: rgba(195, 201, 193, .16);
  stroke-width: 1;
}

#connection-scene .connection-route {
  stroke: url(#connection-path);
  stroke-width: 1.9;
  opacity: .92;
}

#connection-scene .connection-route-highlight {
  stroke: #a0c4d0;
  stroke-width: 2.3;
  stroke-dasharray: 24 520;
  animation: connection-travel 5s linear infinite;
  opacity: .9;
}

#connection-scene .connection-route-nodes circle {
  fill: #91b6c5;
  opacity: .68;
}

@keyframes connection-travel {
  to { stroke-dashoffset: -544; }
}

body.motion-paused #connection-scene .connection-route-highlight {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  #connection-scene .connection-route-highlight { animation: none; }
}

@media (max-width: 720px) {
  #connection-scene .connection-label { font-size: 30px; }
}