.visitor-chart {
  position: relative;
  padding-top: 42px;
  overflow: visible;
}

.visitor-chart svg {
  position: absolute;
  z-index: 3;
  inset: 32px 0 0;
  width: 100%;
  height: 148px;
  overflow: visible;
  pointer-events: none;
}

.visitor-chart polyline {
  fill: none;
  stroke: #e97a3f;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visitor-chart circle {
  fill: #fff;
  stroke: #e97a3f;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.visitor-chart i { z-index: 1; }
.visitor-chart i b {
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  padding: 3px 5px;
  border-radius: 5px;
  background: #fff;
  color: #31403b;
  box-shadow: 0 2px 8px rgba(16,39,32,.1);
  font: 500 9px 'IBM Plex Mono', monospace;
  white-space: nowrap;
}
.visitor-chart i.accent b { background: #153f34; color: #fff; }

@media (max-width: 500px) {
  .visitor-chart i b {
    font-size: 8px;
    transform: translateX(-50%) rotate(-35deg);
    transform-origin: center;
  }
}