.cl-cluster {
  --cl-follower: #555;
  --cl-candidate: #b8791f;
  --cl-candidate-fill: rgba(184, 121, 31, 0.14);
  --cl-leader: #6266e0;
  --cl-leader-fill: rgba(98, 102, 224, 0.14);
  --cl-down: #999;
  --cl-down-fill: rgba(153, 153, 153, 0.12);
  --cl-grant: #2f9e5f;
  --cl-deny: #c0392b;
  --cl-muted: #8c8c8c;
  --cl-border: #e3e3e8;
  --cl-surface: #fff;

  display: block;
  margin: 1.5em 0;
}
.cl-cluster__stage {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: 12px;
  padding: 8px;
  max-width: 30rem;
  margin: 0 auto;
}
.cl-cluster__stage svg {
  display: block;
  width: 100%;
  height: auto;
}
.cl-cluster .cl-mesh-edge {
  stroke: var(--cl-border);
  stroke-width: 1.5;
  opacity: 0.6;
  transition: stroke 0.25s ease, opacity 0.25s ease;
}
.cl-cluster .cl-mesh-edge.cl-mesh-edge--cut {
  stroke: var(--cl-deny);
  stroke-dasharray: 5 4;
  opacity: 0.6;
}
.cl-cluster .cl-mesh-edge.cl-mesh-edge--hover {
  stroke: var(--cl-leader);
  opacity: 1;
}
.cl-cluster .cl-mesh-edge-hit {
  stroke: transparent;
  cursor: pointer;
}
.cl-cluster .cl-link-fault-mark {
  fill: none;
  stroke-width: 2;
}
.cl-cluster .cl-link-fault-mark--cut {
  stroke: var(--cl-deny);
}
.cl-cluster .cl-link-fault-mark--heal {
  stroke: var(--cl-grant);
}
.cl-cluster .cl-pulse-ring {
  fill: none;
  stroke: var(--cl-leader);
  stroke-width: 2;
  opacity: 0;
}
.cl-cluster .cl-node {
  cursor: pointer;
}
.cl-cluster .cl-node-circle {
  stroke-width: 2;
  transition: fill 0.25s ease, stroke 0.25s ease, opacity 0.25s ease;
}
.cl-cluster .cl-node:hover .cl-node-circle {
  stroke-width: 3;
}
.cl-cluster .cl-follower .cl-node-circle {
  fill: var(--cl-surface);
  stroke: var(--cl-follower);
}
.cl-cluster .cl-candidate .cl-node-circle {
  fill: var(--cl-candidate-fill);
  stroke: var(--cl-candidate);
}
.cl-cluster .cl-leader .cl-node-circle {
  fill: var(--cl-leader-fill);
  stroke: var(--cl-leader);
}
.cl-cluster .cl-down .cl-node-circle {
  fill: var(--cl-down-fill);
  stroke: var(--cl-down);
  stroke-dasharray: 4 3;
}
.cl-cluster .cl-down {
  opacity: 0.55;
}
.cl-cluster .cl-node-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  text-anchor: middle;
  dominant-baseline: central;
  fill: currentColor;
}
.cl-cluster .cl-node-info {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  text-anchor: middle;
  fill: var(--cl-muted);
}
.cl-cluster .cl-candidate .cl-node-info {
  fill: var(--cl-candidate);
  font-weight: 600;
}
.cl-cluster .cl-leader .cl-node-info {
  fill: var(--cl-leader);
  font-weight: 600;
}
.cl-cluster .cl-down .cl-node-info {
  fill: var(--cl-down);
}
.cl-cluster .cl-countdown-ring {
  fill: none;
  stroke: var(--cl-follower);
  stroke-width: 3;
  opacity: 0.35;
}
.cl-cluster .cl-countdown-ring.cl-leader,
.cl-cluster .cl-countdown-ring.cl-down {
  opacity: 0;
}
.cl-cluster .cl-msg-dot {
  opacity: 0;
}
.cl-cluster .cl-msg-heartbeat {
  fill: var(--cl-leader);
}
.cl-cluster .cl-msg-vote-request {
  fill: var(--cl-candidate);
}
.cl-cluster .cl-msg-vote-grant {
  fill: var(--cl-grant);
}
.cl-cluster .cl-msg-vote-deny {
  fill: var(--cl-deny);
}
.cl-cluster__controls {
  max-width: 30rem;
  margin: 10px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.cl-cluster__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8em;
  color: var(--cl-muted);
}
.cl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cl-legend-item::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--cl-follower);
  background: var(--cl-surface);
}
.cl-legend-candidate::before {
  border-color: var(--cl-candidate);
  background: var(--cl-candidate-fill);
}
.cl-legend-leader::before {
  border-color: var(--cl-leader);
  background: var(--cl-leader-fill);
}
.cl-legend-down::before {
  border-color: var(--cl-down);
  background: var(--cl-down-fill);
  border-style: dashed;
}
.cl-legend-cut-link::before {
  width: 14px;
  height: 0;
  border-radius: 0;
  border: none;
  border-top: 2px dashed var(--cl-deny);
  background: none;
}
.cl-cluster__log {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  color: var(--cl-muted);
  min-height: 1.4em;
  flex: 1 1 auto;
}
.cl-cluster__pause {
  font: inherit;
  font-size: 0.85em;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--cl-border);
  background: var(--cl-surface);
  color: inherit;
  cursor: pointer;
}
.cl-cluster__pause:hover {
  background: var(--cl-leader);
  border-color: var(--cl-leader);
  color: #fff;
}