.flow {
  max-inline-size: 1060px;
  margin-block-start: var(--space-2xl);
  padding-block: clamp(20px, 3vw, 40px);
  padding-inline: clamp(16px, 3vw, 40px);
  border: 1px solid var(--color-line-soft);
  border-radius: 28px;
  background: var(--color-surface);
}

.flow__svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  font-family: var(--font-sans);
}

.flow__edge {
  fill: none;
  stroke: var(--color-line);
  stroke-width: 1.5;
}

.flow__circle {
  fill: var(--color-page);
  stroke: var(--color-line);
  stroke-width: 1.5;
}

.flow__icon {
  fill: var(--color-text);
}

.flow__name {
  fill: var(--color-text-soft);
  font-size: 15px;
  text-anchor: middle;
}

.flow__state {
  fill: var(--color-text-faint);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-anchor: middle;
  text-transform: uppercase;
}

.flow__node--live .flow__circle {
  stroke: var(--color-terminal-ok);
}

.flow__node--live .flow__name {
  fill: var(--color-text);
}

.flow__node--live .flow__state {
  fill: var(--color-terminal-ok);
}

.flow__node--building .flow__circle {
  stroke: var(--color-accent);
}

.flow__node--building .flow__name {
  fill: var(--color-text);
}

.flow__node--building .flow__state {
  fill: var(--color-accent-text);
}

.flow__node--planned .flow__icon {
  fill: var(--color-text-soft);
}

@media (max-width: 700px) {
  .flow__name {
    font-size: 19px;
  }

  .flow__state {
    font-size: 14px;
  }
}