@layer components {
  .scatter-plot {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xxs);
    inline-size: 100%;
    min-block-size: 0;
  }

  .scatter-plot__chart {
    position: relative;
    flex: 1 1 auto;
    inline-size: 100%;
    min-block-size: 0;
    aspect-ratio: var(--scatter-plot-aspect, 640 / 320);
  }

  .scatter-plot__svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
  }

  .scatter-plot__grid-line {
    fill: none;
    stroke: var(--color-ink-lightest);
    stroke-width: 1;
  }

  .scatter-plot__axis-line {
    fill: none;
    stroke: var(--color-ink-lighter);
    stroke-width: 1;
  }

  .scatter-plot__tick {
    fill: var(--color-ink-medium);
  }

  .scatter-plot__axis-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    fill: var(--color-ink-dark);
  }

  .scatter-plot__background circle {
    fill: var(--color-ink-medium);
    fill-opacity: 0.85;
    transition: r 120ms var(--ease-out-expo), fill-opacity 120ms;
  }

  .scatter-plot__background circle:hover {
    fill-opacity: 1;
    r: 5;
  }

  .scatter-plot__series {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: scatter-plot-pop 500ms var(--ease-out-expo) both;
    animation-delay: calc(var(--series-index, 0) * 90ms);
  }

  .scatter-plot__series circle {
    fill: var(--series-color);
    stroke: var(--color-canvas);
    stroke-width: 1.5;
    transition: r 120ms var(--ease-out-expo);
  }

  .scatter-plot__series circle:hover {
    r: 8;
  }

  .scatter-plot__label {
    fill: var(--series-color);
    font-weight: 600;
  }

  .scatter-plot__title {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxs) var(--space-s);
    font-size: var(--text-medium);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
  }

  .scatter-plot__title-name {
    color: var(--series-color);
  }

  .scatter-plot__title-vs {
    color: var(--color-ink-medium);
    font-weight: 400;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  @keyframes scatter-plot-pop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .scatter-plot__series { animation: none; }
  }
}