@layer components {
  .hero-figure { grid-column: 2; grid-row: 1 / 4; width: 100%; aspect-ratio: 480 / 300; margin-top: 40px; }
  .hero-figure svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .hero-figure .link { stroke: var(--line-2); stroke-width: 1; }
  .hero-figure .node circle { fill: var(--bg-2); stroke: var(--line); transition: stroke 0.25s var(--ease), fill 0.25s var(--ease); }
  .hero-figure .node use { color: var(--muted); transition: color 0.25s var(--ease); }
  .hero-figure .node.on circle { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); }
  .hero-figure .node.on use { color: var(--accent); }
  .hero-figure .hub circle { fill: var(--bg-2); stroke: var(--line-2); transition: stroke 0.25s var(--ease); }
  .hero-figure .hub use { color: var(--muted); transition: opacity 0.2s var(--ease), color 0.25s var(--ease); }
  .hero-figure .hub .wrench, .hero-figure .hub .tick { opacity: 0; }
  .hero-figure .hub.alert circle, .hero-figure .hub.fixing circle { stroke: var(--accent); }
  .hero-figure .hub.alert .bell { color: var(--accent); }
  .hero-figure .hub.fixing .bell, .hero-figure .hub.done .bell { opacity: 0; }
  .hero-figure .hub.fixing .wrench { opacity: 1; color: var(--accent); }
  .hero-figure .hub.done circle { stroke: var(--green); }
  .hero-figure .hub.done .tick { opacity: 1; color: var(--green); }

  @media (max-width: 900px) {
    .hero-figure { grid-column: 1; grid-row: 5; margin-top: 48px; max-width: 420px; justify-self: center; }
  }
}