.routing-flow {
  --routing-ink: #edf3f2;
  --routing-muted: #a9b9bd;
  --routing-cool: #b6dce8;
  --routing-warm: #e3b182;
  margin: 0;
  padding: 17px 33px 10px;
  color: var(--routing-ink);
  background: #111719;
  border-bottom: 1px solid #edf3f21f;
}
.routing-flow figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  color: var(--routing-muted);
  font-size: 11px;
  line-height: 1.5;
}
.routing-flow figcaption > span:first-child {
  color: var(--routing-ink);
  font-weight: 500;
  white-space: nowrap;
}
.routing-flow-status { text-align: right; }
.routing-stage { position: relative; height: 166px; isolation: isolate; }
.routing-stage > svg,
.routing-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.routing-stage > svg { overflow: visible; }
.routing-stage > canvas { z-index: 1; }
.routing-path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.routing-path-shared { stroke: #a9b9bd45; }
.routing-path-system { stroke: #b6dce85c; }
.routing-path-human { stroke: #e3b18278; }
.routing-flow[data-allocation="0"] .routing-path-system { opacity: .35; stroke-dasharray: 3 5; }
.routing-flow[data-renderer="canvas"] .routing-static-particles { visibility: hidden; }
.routing-flow[data-allocation="0"] .routing-static-system { visibility: hidden; }
.routing-flow[data-allocation="6"] .routing-static-manual { visibility: hidden; }
.routing-node { position: absolute; z-index: 2; transform: translate(-50%, -50%); }
.routing-node-input { left: 11.5%; top: 46.591%; }
.routing-node-output { left: 88.5%; top: 46.591%; }
.routing-node-system { left: 50%; top: 23.864%; color: var(--routing-cool); }
.routing-node-human { left: 50%; top: 71.591%; color: var(--routing-warm); }
.routing-node-symbol {
  display: block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  background: #111719;
  border: 1px solid currentColor;
  box-shadow: 0 0 0 5px #111719;
}
.routing-node-human .routing-node-symbol { border-radius: 50%; }
.routing-node-input .routing-node-symbol,
.routing-node-output .routing-node-symbol { width: 7px; height: 7px; border-radius: 50%; background: #a9b9bd; border: 0; }
.routing-node-label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}
.routing-node-input .routing-node-label,
.routing-node-output .routing-node-label { font-size: 11px; color: var(--routing-muted); }
.routing-node-human .routing-node-label { top: auto; bottom: calc(100% + 7px); }
@media (max-width: 620px) {
  .routing-flow { padding: 17px 18px 9px; }
  .routing-flow figcaption { display: block; min-height: 37px; font-size: 11px; }
  .routing-flow figcaption > span { display: block; }
  .routing-flow-status { text-align: left; margin-top: 3px; }
  .routing-stage { height: 177px; }
  .routing-node-label { font-size: 11px; }
  .routing-node-input .routing-node-label,
  .routing-node-output .routing-node-label { white-space: normal; width: 56px; text-align: center; font-size: 11px; }
  .routing-node-symbol { width: 18px; height: 18px; }
}