:root {
  --bg: #1c1a18;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg);
}

#peace {
  display: block;
  width: min(74vmin, 620px);
  height: auto;
}

#peace .skeleton {
  fill: none;
  stroke: url(#hue);
  stroke-width: 2.6;
  stroke-linecap: round;
}

/* Dotted centre lines that flow slowly along the shape. */
#peace .flow {
  stroke-dasharray: 2 12;
  animation: flow 1.6s linear infinite;
}

@keyframes flow {
  to { stroke-dashoffset: -28; }
}

#peace .edges line {
  stroke: url(#hue);
  stroke-linecap: round;
}

#peace .nodes circle {
  fill: url(#hue);
}

#peace .nodes circle.anchor {
  fill: var(--bg);
  stroke: url(#hue);
}

#peace .pings circle {
  fill: none;
  stroke: url(#hue);
}

#peace .signals circle {
  fill: #fffaf0;
}

@media (prefers-reduced-motion: reduce) {
  #peace .flow { animation: none; }
}