css-chart {
  padding-top: 2rem;
}

.line {
  inset: 0;
  transform: none;
  .hoverer {
    inset: 0;
    transform: none;
    clip-path: var(--outline);
    z-index: 1;
  }
  css-point {
    --r: .3rem;
    background-color: var(--color);
    border-radius: 50%;
  }
  css-text {
    font-size: .9rem;
    opacity: 0;
    translate: -100% calc(-100% + .2rem);
    z-index: 1;
    white-space: nowrap;
    transition: opacity .2s, translate .2s;
  }
  .hoverer:hover ~ css-text, &:has(:hover) css-text {
    opacity: 1;
    translate: calc(-100% - .4rem) -100%;
    transition-delay: calc(.06s * var(--index));
  }
}

css-line {
  border: 1px solid var(--color);
}