.cc_llcvgyda_BUJxvyAAHk .story-scroll {
  position: relative;
}

.cc_llcvgyda_BUJxvyAAHk .story-scroll__panels {
  counter-reset: story-panel;
}

/* Nav rests flush right after the last panel — no reserved gap. */
.cc_llcvgyda_BUJxvyAAHk .story-scroll--has-nav {
  padding-bottom: 0;
}

/* Reserves the nav's own height at the very end of the section's flow (its
   resting spot once unpinned), sized to the nav's real height via JS —
   same pin behavior on mobile as desktop, so this is never hidden. */
.cc_llcvgyda_BUJxvyAAHk .story-scroll__nav-spacer {
  display: block;
}

.cc_llcvgyda_BUJxvyAAHk .story-scroll__nav {
  /* Rests at the TOP of the section's reserved slot — i.e. right where the
     in-flow nav-spacer sits, directly after the panels — until `--pinned`
     switches it to `fixed`, overlaying the viewport bottom while the
     section is still scrolling past. Same on mobile and desktop. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  width: 100%;
  background: inherit;
  border-top: 1px solid var(--ggXmQeec6D, #e5e5e5);
  border-bottom: 1px solid color-mix(in srgb, var(--yxsK6O1M8R, #000) 8%, transparent);
}

.cc_llcvgyda_BUJxvyAAHk .story-scroll__nav--pinned {
  /* Pinned to the viewport bottom while the section scrolls past — flush
     is correct here, unlike the resting state above. */
  position: fixed;
  bottom: 0;
}

.cc_llcvgyda_BUJxvyAAHk .story-scroll__nav-list {
  display: flex;
  justify-content: space-between;
  flex: 1 1 auto;
  overflow-x: auto;
  list-style: none;
  margin: 0;
  padding-inline: var(--nisa-nav-side, clamp(16px, 4.83vw, 32px));
  scrollbar-width: none;
}

.cc_llcvgyda_BUJxvyAAHk .story-scroll__nav-list::-webkit-scrollbar {
  display: none;
}

.cc_llcvgyda_BUJxvyAAHk .story-scroll__nav-link {
  display: flex;
  /* flex-start (not center) so the number and title share the same top
     edge in every item, instead of sharing the title's baseline. */
  align-items: flex-start;
  gap: 0.5rem;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: inherit;
  opacity: 0.55;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.cc_llcvgyda_BUJxvyAAHk .story-scroll__nav-link:hover {
  opacity: 0.85;
}

.cc_llcvgyda_BUJxvyAAHk .story-scroll__nav-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
  opacity: 1;
}

.cc_llcvgyda_BUJxvyAAHk .story-scroll__nav-link--active {
  opacity: 1;
  box-shadow: inset 0 -2px 0 currentColor;
}

.cc_llcvgyda_BUJxvyAAHk .story-scroll__nav-number {
  /* Smaller than the title, sharing its top edge via the parent's
     `align-items: flex-start` — never taller than the title, so it can't
     stick up past it. */
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

.cc_llcvgyda_BUJxvyAAHk .story-scroll__nav-title {
  font-size: 15px;
  font-weight: 600;
}

.cc_llcvgyda_BUJxvyAAHk .story-scroll__nav-chevron {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-right: 0.75rem;
  opacity: 0.5;
}

.cc_llcvgyda_BUJxvyAAHk .story-scroll__nav-chevron svg {
  width: 1rem;
  height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .cc_llcvgyda_BUJxvyAAHk .story-scroll__nav-link {
    transition: none;
  }
}

/* Mobile: the nav list itself can still be narrower than its content, so it
   scrolls horizontally within the (now pinned, same as desktop) bar — the
   chevron hints at that. */
@media (max-width: 1023px) {
  .cc_llcvgyda_BUJxvyAAHk .story-scroll__nav-chevron {
    display: flex;
  }
}