@layer components {
  .how-figure { width: 100%; margin: 0 0 24px; }
  .how-figure svg { display: block; width: 100%; height: auto; overflow: visible; }

  .how-figure .endpoint { color: var(--line-2); }
  .how-figure .rails { fill: none; stroke: var(--line-2); stroke-width: 1; }
  .how-figure .spokes { fill: none; stroke: var(--line); stroke-width: 0.8; }
  .how-figure .node circle { fill: var(--bg); stroke: var(--line); transition: stroke 0.3s var(--ease); }
  .how-figure .node use { color: var(--muted); }
  .how-figure .node:hover circle { stroke: var(--accent); }
  .how-figure .hub circle { fill: var(--bg-2); stroke: var(--accent); }
  .how-figure .hub use { color: var(--accent); }
  .how-figure .hub .pulse { fill: none; stroke-width: 1; opacity: 0; }
  .how-figure .badge circle { fill: var(--bg-2); stroke: var(--accent); }
  .how-figure .badge use { color: var(--accent); }
  .how-figure .badge { opacity: 0; }
  .how-figure .tick { color: var(--green); opacity: 0; }
  .how-figure .dots { fill: var(--accent); }

  .js-reveal .how-figure .edge { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s var(--ease) calc(100ms + var(--i, 0) * 50ms); }
  .js-reveal .how-figure .fade, .js-reveal .how-figure .node, .js-reveal .how-figure .dots { opacity: 0; transition: opacity 0.45s var(--ease) calc(100ms + var(--i, 0) * 50ms); }
  .js-reveal .how-figure.in .edge { stroke-dashoffset: 0; }
  .js-reveal .how-figure.in .fade, .js-reveal .how-figure.in .node, .js-reveal .how-figure.in .dots { opacity: 1; }

  @media (max-width: 900px) { .how-figure { display: none; } }
}