.circuit-bg {
  contain: paint;
  position: absolute;
  inset: 0;
  z-index: -1000;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  pointer-events: none;
}

.circuit-bg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.circuit-art {
  position: absolute;
  inset: 0;
  opacity: 0.94;
}

.circuit-trace,
.circuit-signal {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.circuit-trace {
  stroke: rgba(30, 110, 180, 0.16);
  stroke-width: 1.12;
}

.circuit-trace.primary {
  stroke: rgba(30, 110, 180, 0.24);
  stroke-width: 1.36;
}

.circuit-trace.secondary {
  stroke: rgba(30, 110, 180, 0.18);
}

.circuit-trace.faint {
  stroke: rgba(8, 42, 78, 0.09);
  stroke-width: 0.98;
}

.circuit-signal {
  opacity: 0;
  stroke: rgba(30, 110, 180, 0.34);
  stroke-dasharray: 0.08 0.92;
  stroke-dashoffset: 1;
  stroke-width: 1.55;
  animation: signalTravel 8.8s ease-in-out infinite;
}

.circuit-signal.primary {
  stroke: rgba(30, 110, 180, 0.48);
  stroke-width: 1.8;
}

.circuit-signal.secondary {
  stroke: rgba(30, 110, 180, 0.34);
}

.circuit-signal.faint {
  stroke: rgba(8, 42, 78, 0.22);
  stroke-width: 1.25;
}

.circuit-node {
  fill: rgba(30, 110, 180, 0.24);
  filter: drop-shadow(0 0 4px rgba(30, 110, 180, 0.10));
  animation: nodePulse 9.4s ease-in-out infinite;
}

.circuit-node.primary {
  fill: rgba(30, 110, 180, 0.32);
}

.circuit-node.secondary {
  fill: rgba(30, 110, 180, 0.24);
}

.circuit-node.faint {
  fill: rgba(8, 42, 78, 0.14);
}

.circuit-debug .debug-zone {
  fill: rgba(210, 35, 55, 0.08);
  stroke: rgba(210, 35, 55, 0.35);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.circuit-debug .debug-terminal {
  fill: rgba(210, 35, 55, 0.45);
}

.circuit-debug .debug-source {
  fill: rgba(30, 110, 180, 0.55);
}

.circuit-debug .debug-source-halo {
  fill: rgba(30, 110, 180, 0.08);
  stroke: rgba(30, 110, 180, 0.45);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.circuit-debug .circuit-trace {
  stroke: rgba(30, 110, 180, 0.9);
  stroke-width: 2;
}

.circuit-debug .circuit-node {
  fill: rgba(30, 110, 180, 0.75);
}

.delay-0 {
  animation-delay: 0s;
}

.delay-1 {
  animation-delay: 0.85s;
}

.delay-2 {
  animation-delay: 1.7s;
}

.delay-3 {
  animation-delay: 2.55s;
}

.delay-4 {
  animation-delay: 3.4s;
}

.delay-5 {
  animation-delay: 4.25s;
}

.delay-6 {
  animation-delay: 5.1s;
}

.delay-7 {
  animation-delay: 5.95s;
}

@keyframes signalTravel {

  0%,
  18% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  36% {
    opacity: 0.48;
  }

  62% {
    opacity: 0.18;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes nodePulse {

  0%,
  100% {
    opacity: 0.26;
  }

  48% {
    opacity: 0.62;
  }
}