@layer components {
  .ontology-figure { grid-column: 2; grid-row: 1 / 3; width: 100%; max-width: 340px; margin: 16px 0 0; justify-self: end; }
  .ontology-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
  .ontology-figure .link { stroke: var(--line-2); stroke-width: 1; }
  .ontology-figure .node circle { fill: var(--bg-2); stroke: var(--line); transition: stroke 0.3s var(--ease); }
  .ontology-figure .node use { color: var(--muted); }
  .ontology-figure .node:hover circle { stroke: var(--accent); }
  .ontology-figure .node:hover use { color: var(--accent); }

  .js-reveal .ontology-figure .node circle { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 0.55s var(--ease) calc(var(--i, 0) * 110ms), fill-opacity 0.3s var(--ease) calc(300ms + var(--i, 0) * 110ms); }
  .js-reveal .ontology-figure .node use { opacity: 0; transform: scale(0.4); transform-box: fill-box; transform-origin: center; transition: opacity 0.3s var(--ease) calc(350ms + var(--i, 0) * 110ms), transform 0.45s var(--ease) calc(350ms + var(--i, 0) * 110ms); }
  .js-reveal .ontology-figure .link { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.7s var(--ease) 1300ms; }
  .js-reveal .ontology-figure.in .node circle { stroke-dashoffset: 0; fill-opacity: 1; }
  .js-reveal .ontology-figure.in .node use { opacity: 1; transform: none; }
  .js-reveal .ontology-figure.in .link { stroke-dashoffset: 0; }

  @media (max-width: 900px) {
    .ontology-figure { grid-column: 1; grid-row: 2; max-width: 240px; margin: 40px 0 0; justify-self: center; }
  }
}