.crawl-intro {
  text-align: center;
  font-size: 20px;
}
/* bottom padding must exceed 15vh so the track's end can reach the 85% end line */
#crawl-bar {
  --bar-w: 110px;
  --bar-color: #479a91;
  padding: 10vh 16px 16vh;
  color: rgb(33, 37, 41);
}
.crawl-track {
  position: relative;
  width: var(--bar-w);
  height: 600vh;
  margin: 0 auto;
}
.crawl-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: var(--bar-color);
}
/* running total riding the leading edge, on the left so it never collides with the notes */
.crawl-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 0;
  transform: translateY(-100%);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 200ms ease;
}
.crawl-tip.is-on {
  opacity: 1;
}
.crawl-note {
  position: absolute;
  left: -10px;
  display: flex;
  align-items: center;
  width: max-content;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 400ms ease;
  z-index: 1;
}
.crawl-note.is-on {
  opacity: 0.5;
}
/* the baseline stays fully opaque so its line reads as true #212529 */
.crawl-note-zero.is-on {
  opacity: 1;
}
.crawl-note-zero .crawl-note-line {
  background: #212529;
}
.crawl-note-line {
  flex: none;
  width: calc(var(--bar-w) + 30px);
  height: 2px;
  background: rgb(150, 150, 150);
}
.crawl-note-label {
  max-width: 220px;
  padding-left: 10px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.3;
  color: rgb(33, 37, 41);
}
.crawl-note-label strong {
  display: block;
  font-size: 14px;
  font-weight: 400;
}
@supports (height: 100svh) {
  .crawl-track {
    height: 600svh;
  }
}
@media (max-width: 499px) {
  #crawl-bar {
    --bar-w: 70px;
  }
  .crawl-tip {
    font-size: 17px;
  }
  .crawl-note-label {
    max-width: calc(50vw - var(--bar-w) / 2 - 40px);
    font-size: 12px;
  }
  .crawl-note-label strong {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .crawl-tip,
  .crawl-note {
    transition: none;
  }
}