.le-heartbeat {
  --le-accent: #6266e0;
  --le-accent-fill: rgba(98, 102, 224, 0.12);
  --le-ink: #555;
  --le-muted: #8c8c8c;
  --le-border: #e3e3e8;
  --le-surface: #fff;

  display: block;
  margin: 1.5em 0;
}
.le-heartbeat__stage {
  background: var(--le-surface);
  border: 1px solid var(--le-border);
  border-radius: 12px;
  padding: 8px;
  max-width: 30rem;
  margin: 0 auto;
}
.le-heartbeat__stage svg {
  display: block;
  width: 100%;
  height: auto;
}
.le-heartbeat .le-edge {
  stroke: var(--le-border);
  stroke-width: 1.5;
}
.le-heartbeat .le-pulse-ring {
  fill: none;
  stroke: var(--le-accent);
  stroke-width: 2;
  opacity: 0;
}
.le-heartbeat .le-node-circle {
  stroke-width: 2;
}
.le-heartbeat .le-leader .le-node-circle {
  fill: var(--le-accent-fill);
  stroke: var(--le-accent);
}
.le-heartbeat .le-follower .le-node-circle {
  fill: var(--le-surface);
  stroke: var(--le-ink);
}
.le-heartbeat .le-node-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--le-ink);
}
.le-heartbeat .le-msg-dot {
  fill: var(--le-accent);
  opacity: 0;
}
.le-heartbeat .le-countdown-ring {
  fill: none;
  stroke: var(--le-ink);
  stroke-width: 3;
  opacity: 0.35;
}
.le-heartbeat__controls {
  max-width: 30rem;
  margin: 10px auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.le-heartbeat__log {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  color: var(--le-muted);
  min-height: 1.4em;
}
.le-heartbeat__restart {
  font: inherit;
  font-size: 0.85em;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--le-border);
  background: var(--le-surface);
  color: inherit;
  cursor: pointer;
}
.le-heartbeat__restart:hover {
  background: var(--le-accent);
  border-color: var(--le-accent);
  color: #fff;
}