.scroll-story {
  --scroll-story-gap: 20px;
  --scroll-story-top: 0px;
  --scroll-story-header: 0px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.scroll-story__media {
  isolation: isolate;
  border-radius: var(--scroll-story-radius);
  background-color: rgb(var(--color-image-background));
}

.scroll-story__frame {
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.scroll-story__frame.is-active {
  opacity: 1;
  z-index: 1;
}

.scroll-story__caption {
  --color-text: var(--color-base-background);
  --color-background: var(--color-base-text);
  inset-inline: 16px;
  inset-block-end: 16px;
  padding: 10px 20px;
  border-radius: 999px;
  background-color: rgb(var(--color-background) / 0.55);
  color: rgb(var(--color-text));
  line-height: 1.4;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  z-index: 1;
}

.scroll-story__caption-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scroll-story__caption-detail {
  flex-shrink: 0;
}

.scroll-story__caption-detail:empty {
  display: none;
}

.scroll-story__step {
  padding-block: 24px;
}

.scroll-story__copy {
  opacity: 0.6;
  transition: opacity 0.4s ease;
}

.scroll-story__step.is-active .scroll-story__copy {
  opacity: 1;
}

.scroll-story__panel {
  padding: clamp(20px, 2.105vw, 40px);
  border-radius: var(--scroll-story-radius);
  background-color: rgb(var(--color-text) / 0.025);
  color: rgb(var(--color-text));
}

.scroll-story__panel--background {
  background-color: rgb(var(--color-background));
}

@media (min-width: 960px) {
  .scroll-story {
    --scroll-story-space: calc(100vh - var(--scroll-story-top));
    --scroll-story-frame: calc(var(--scroll-story-space) - var(--scroll-story-gap) * 2);
    --scroll-story-frame-base: calc(100vh - var(--scroll-story-header) - var(--scroll-story-gap) * 2);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--grid-horizontal-spacing, 48px);
    align-items: start;
  }

  @supports (height: 100svh) {
    .scroll-story {
      --scroll-story-space: calc(100svh - var(--scroll-story-top));
      --scroll-story-frame-base: calc(100svh - var(--scroll-story-header) - var(--scroll-story-gap) * 2);
    }
  }

  .scroll-story--media-right .scroll-story__media {
    order: 2;
  }

  .scroll-story__media {
    position: sticky;
    inset-block-start: calc(var(--scroll-story-top) + max(var(--scroll-story-gap), (var(--scroll-story-space) - var(--scroll-story-frame)) / 2));
    height: var(--scroll-story-frame);
    transition: inset-block-start 0.26s ease-out, height 0.26s ease-out;
  }

  .scroll-story__frame .media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    background-color: transparent;
  }

  .scroll-story__frame .media > :is(img, svg) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .scroll-story__steps {
    padding-block-start: calc(var(--scroll-story-frame-base) * 0.25);
    min-height: calc(var(--scroll-story-frame-base) * 1.5);
  }

  .scroll-story__step:not(.scroll-story__panel) {
    min-height: calc(var(--scroll-story-frame-base) * 0.5);
  }

  .scroll-story__bframe {
    padding-block-start: 24px;
    min-height: calc(var(--scroll-story-frame-base) * 0.25);
  }
}

@media (max-width: 959px) {
  .scroll-story__media,
  .scroll-story__steps {
    display: contents;
  }

  .scroll-story__frame {
    position: relative;
    inset: auto;
    height: auto;
    order: calc(var(--scroll-story-index, 1) * 2 - 1);
    opacity: 1;
    overflow: hidden;
    border-radius: var(--scroll-story-radius);
    background-color: rgb(var(--color-image-background));
  }

  .scroll-story__frame--unset .media {
    aspect-ratio: var(--scroll-story-ar, var(--aspect-ratio, unset));
  }

  .scroll-story__step,
  .scroll-story__bframe {
    order: calc(var(--scroll-story-index, 1) * 2);
  }

  .scroll-story__step {
    padding-block: 0 8px;
  }

  .scroll-story__panel {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-story__frame,
  .scroll-story__copy,
  .scroll-story__media,
  .scroll-story__marker {
    transition: none;
  }
}

@media (forced-colors: active) {
  .scroll-story__copy {
    opacity: 1;
  }

  .scroll-story__panel {
    border-color: CanvasText;
  }

  .scroll-story__fill {
    background-color: CanvasText;
  }
}

@media (forced-colors: active) and (min-width: 960px) {
  .scroll-story__frame:not(.is-active) {
    visibility: hidden;
  }
}

.scroll-story__intro {
  padding-block-end: 24px;
}

@media (min-width: 960px) {
  .scroll-story__intro {
    padding-block-end: 40px;
  }

  .scroll-story__steps:has(.scroll-story__intro) {
    padding-block-start: 0;
  }
}

@media (max-width: 959px) {
  .scroll-story__intro {
    order: 0;
    padding-block-end: 0;
  }
}

.scroll-story__marker {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--scroll-story-marker);
  height: var(--scroll-story-marker);
  border-radius: 50%;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-text) / 0.6);
  box-shadow: inset 0 0 0 2px rgb(var(--color-border));
  font-size: 0.75rem;
  line-height: 1;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.scroll-story__marker .icon {
  width: 18px;
  height: 18px;
}

.is-past > .scroll-story__marker,
.is-active > .scroll-story__marker {
  background-color: rgb(var(--color-text));
  color: rgb(var(--color-background));
  box-shadow: none;
}

.is-active > .scroll-story__marker {
  box-shadow: 0 0 0 8px rgb(var(--color-text) / 0.08);
}

.scroll-story--rail .scroll-story__step:not(.scroll-story__panel)::before,
.scroll-story--rail .scroll-story__frame::before {
  content: '';
  position: absolute;
  width: 2px;
  background-color: rgb(var(--color-border));
}

.scroll-story__fill {
  position: absolute;
  display: block;
  width: 2px;
  background-color: rgb(var(--color-text));
  transform-origin: top;
  transform: scaleY(var(--scroll-story-fill, 0));
  will-change: transform;
  pointer-events: none;
}

.scroll-story--rail .scroll-story__panel {
  position: relative;
}

.scroll-story--dots .scroll-story__marker-number {
  display: none;
}

.scroll-story--dots .scroll-story__marker:not(.scroll-story__marker--cart) {
  --scroll-story-dot: 14px;
  width: var(--scroll-story-dot);
  height: var(--scroll-story-dot);
  margin: calc((var(--scroll-story-marker) - var(--scroll-story-dot)) / 2);
}

@media (min-width: 960px) {
  .scroll-story--rail {
    --scroll-story-marker: 46px;
    --scroll-story-rail: 72px;
  }

  .scroll-story--rail .scroll-story__steps {
    padding-block: max(0px, calc(var(--scroll-story-frame-base) / 2 - 24px - var(--scroll-story-marker) / 2 - var(--scroll-story-intro, 0px)));
  }

  .scroll-story--rail .scroll-story__step:not(.scroll-story__panel) {
    position: relative;
    padding-inline-start: var(--scroll-story-rail);
  }

  .scroll-story--rail .scroll-story__bframe {
    padding-inline-start: var(--scroll-story-rail);
  }

  .scroll-story__marker--step {
    inset-inline-start: 0;
    inset-block-start: 24px;
  }

  .scroll-story__panel > .scroll-story__marker--step {
    inset-inline-start: calc(-1 * var(--scroll-story-rail));
    inset-block-start: 0;
  }

  .scroll-story--rail .scroll-story__step:not(.scroll-story__panel)::before {
    inset-inline-start: calc(var(--scroll-story-marker) / 2 - 1px);
    inset-block-start: calc(24px + var(--scroll-story-marker) / 2);
    inset-block-end: calc(-24px - var(--scroll-story-marker) / 2);
  }

  .scroll-story--rail .scroll-story__frame::before,
  .scroll-story__marker--frame {
    display: none;
  }
}

@media (max-width: 959px) {
  .scroll-story--rail {
    --scroll-story-marker: 40px;
    --scroll-story-rail: 56px;
  }

  .scroll-story--rail .scroll-story__frame,
  .scroll-story--rail .scroll-story__step:not(.scroll-story__panel),
  .scroll-story--rail .scroll-story__bframe {
    position: relative;
    margin-inline-start: var(--scroll-story-rail);
  }

  .scroll-story--rail .scroll-story__frame {
    width: calc(100% - var(--scroll-story-rail));
    overflow: visible;
    border-radius: 0;
    background-color: transparent;
  }

  .scroll-story--rail .scroll-story__frame .media {
    border-radius: var(--scroll-story-radius);
    overflow: hidden;
    background-color: rgb(var(--color-image-background));
  }

  .scroll-story__marker--step {
    display: none;
  }

  .scroll-story__marker--frame {
    inset-inline-start: calc(-1 * var(--scroll-story-rail));
    inset-block-start: 0;
  }

  .scroll-story--rail .scroll-story__frame::before,
  .scroll-story--rail .scroll-story__step:not(.scroll-story__panel)::before {
    inset-inline-start: calc(-1 * var(--scroll-story-rail) + var(--scroll-story-marker) / 2 - 1px);
    inset-block-start: 0;
    inset-block-end: -24px;
  }

  .scroll-story--rail .scroll-story__frame--first::before {
    inset-block-start: calc(var(--scroll-story-marker) / 2);
  }

  .scroll-story--rail .scroll-story__frame[data-last-frame]::before {
    inset-block-end: auto;
    height: calc(var(--scroll-story-marker) / 2);
  }
}