/* Styles for the topper scrolly (markup in topper-chart.html, logic in topper.js) */

/* --- Generated by ai2html v0.117.6 - 2026-09-09 12:35 - ai file: topper.ai --- */
#g-topper-box,
#g-topper-box .g-artboard {
  margin: 0 auto;
}
#g-topper-box p {
  margin: 0;
}
#g-topper-box .g-aiAbs {
  position: absolute;
}
#g-topper-box .g-aiImg {
  position: absolute;
  top: 0;
  display: block;
  width: 100% !important;
}
#g-topper-box .g-aiSymbol {
  position: absolute;
  box-sizing: border-box;
}
#g-topper-box .g-aiPointText p {
  white-space: nowrap;
}
#g-topper-Artboard_1 {
  position: relative;
  overflow: hidden;
}
#g-topper-Artboard_1 p {
  font-weight: 300;
  line-height: 20px;
  height: auto;
  opacity: 1;
  letter-spacing: 0em;
  font-size: 17px;
  text-align: left;
  color: rgb(166, 166, 166);
  text-transform: none;
  padding-bottom: 0;
  padding-top: 0;
  mix-blend-mode: normal;
  font-style: normal;
  position: static;
}
#g-topper-Artboard_1 .g-pstyle0 {
  height: 20px;
}
#g-topper-Artboard_1 .g-pstyle1 {
  font-weight: 400;
  line-height: 19px;
  height: 19px;
  font-size: 16px;
  color: rgb(33, 37, 41);
}

/* --- Generated by ai2html v0.117.6 - 2026-09-09 14:03 - ai file: mobile-topper.ai --- */
#g-mobile-topper-box,
#g-mobile-topper-box .g-artboard {
  margin: 0 auto;
}
#g-mobile-topper-box p {
  margin: 0;
}
#g-mobile-topper-box .g-aiAbs {
  position: absolute;
}
#g-mobile-topper-box .g-aiImg {
  position: absolute;
  top: 0;
  display: block;
  width: 100% !important;
}
#g-mobile-topper-box .g-aiSymbol {
  position: absolute;
  box-sizing: border-box;
}
#g-mobile-topper-box .g-aiPointText p {
  white-space: nowrap;
}
#g-mobile-topper-Artboard_1 {
  position: relative;
  overflow: hidden;
}
#g-mobile-topper-Artboard_1 p {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  line-height: 18px;
  height: auto;
  opacity: 1;
  letter-spacing: 0em;
  font-size: 15px;
  text-align: left;
  color: rgb(166, 166, 166);
  text-transform: none;
  padding-bottom: 0;
  padding-top: 0;
  mix-blend-mode: normal;
  font-style: normal;
  position: static;
}
#g-mobile-topper-Artboard_1 .g-pstyle0 {
  height: 18px;
}
#g-mobile-topper-Artboard_1 .g-pstyle1 {
  font-weight: 400;
  height: 18px;
  text-align: center;
  color: rgb(33, 37, 41);
}

/* --- scrollytelling --- */
#g-topper-scrolly {
  position: relative;
  /* clip (not hidden) avoids forcing overflow-y to auto, which would break the sticky graphic below */
  overflow-x: clip;
}
#g-topper-graphic {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  padding-top: 8vh;
  box-sizing: border-box;
}
.g-topper-viewport {
  position: relative;
  width: 100%;
  height: 40vh;
  overflow: hidden;
}
.g-topper-zoom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: 0 0;
  transition: none;
  will-change: transform;
}
/* gridlines + year labels stay hidden while the view is zoomed in */
#g-topper-scrolly .g-aiImg:not(.g-marks),
#g-topper-scrolly .g-aiPointText:not(.g-interactive) {
  opacity: 0;
  transition: opacity 600ms ease;
}
#g-topper-scrolly.is-axis-on .g-aiImg:not(.g-marks),
#g-topper-scrolly.is-axis-on .g-aiPointText:not(.g-interactive) {
  opacity: 1;
}
/* the "One term" annotation */
#g-topper-scrolly .g-interactive {
  opacity: 0;
  transition: opacity 600ms ease;
}
#g-topper-scrolly.is-label-on .g-interactive {
  opacity: 1;
}
#g-topper-scrolly .g-bar {
  width: 0;
  transition: width 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
#g-topper-scrolly .g-bar.is-visible {
  width: var(--w);
}
#g-topper-scrolly .g-dot {
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 350ms ease,
    transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#g-topper-scrolly .g-dot.is-visible {
  opacity: 1;
  transform: scale(1);
}
#g-mobile-topper-box {
  display: none;
}
#g-topper-steps {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
}
#g-topper-steps .g-step {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  /* graphic padding-top + viewport height, so the copy clears the chart */
  padding-top: calc(48vh + 20px);
  box-sizing: border-box;
}
/* the last step holds the graphic while the chart finishes drawing */
#g-topper-steps .g-step-last {
  min-height: 180vh;
}
#g-topper-steps .g-step-last > div {
  position: -webkit-sticky;
  position: sticky;
  top: calc(48vh + 20px);
}
/* sized by topper.js so the pinned copy lets go with the chart */
#g-topper-tail {
  height: 0;
}
#g-topper-steps .g-step > div {
  max-width: 420px;
  margin: 0 auto;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.92);
  border-left: 3px solid #404040;
  font-size: 17px;
  line-height: 1.45;
  color: rgb(33, 37, 41);
}
/* small viewport units avoid the mobile address-bar resize jump */
@supports (height: 100svh) {
  #g-topper-graphic {
    height: 100svh;
  }
  #g-topper-steps {
    margin-top: -100svh;
  }
  #g-topper-steps .g-step {
    min-height: 100svh;
  }
}
@media (max-width: 499px) {
  #g-topper-box {
    display: none;
  }
  #g-mobile-topper-box {
    display: block;
  }
  #g-topper-graphic {
    padding-top: 8vh;
    align-items: flex-start;
  }
  .g-topper-viewport {
    height: 50vh;
  }
  #g-topper-steps .g-step {
    padding-top: calc(58vh + 20px);
  }
  #g-topper-steps .g-step-last > div {
    top: calc(58vh + 20px);
  }
  #g-topper-steps .g-step > div {
    margin: 0 10px;
    padding: 12px 14px;
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .g-topper-zoom,
  #g-topper-scrolly .g-bar,
  #g-topper-scrolly .g-dot {
    transition-duration: 1ms !important;
  }
}