:root{
  --sw-bg:#071315;
  --sw-surface:rgba(7,19,21,.88);
  --sw-ink:#f7fbfa;
  --sw-muted:#c1d0cf;
  --sw-mineral:#56b9b6;
  --sw-rule:rgba(214,222,222,.28);
  --sw-z-stage:10;
  --sw-z-copy:20;
  --sw-z-nav:30;
}

.scroll-world{
  position:relative;
  background:var(--sw-bg);
  color:var(--sw-ink);
  isolation:isolate;
}

.scroll-world__stage{
  position:sticky;
  z-index:var(--sw-z-stage);
  top:0;
  height:100svh;
  overflow:hidden;
  background:var(--sw-bg);
}

.scroll-world__stage video,
.scroll-world__fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.scroll-world__stage video{
  opacity:0;
  transition:opacity 160ms ease-out;
}

[data-sw-mode="pending"] .scroll-world__stage video{opacity:0}
[data-sw-mode="pending"] .scroll-world__fallback{opacity:1;filter:saturate(.78) brightness(.72)}
[data-sw-mode="pending"] .scroll-world__status::before{
  content:"";
  display:inline-block;
  width:.55rem;
  height:.55rem;
  margin-right:.55rem;
  border:1px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:sw-loading 900ms linear infinite;
}

@keyframes sw-loading{to{transform:rotate(1turn)}}

.scroll-world__stage [data-sw-video]{z-index:2}
.scroll-world__stage [data-sw-video-next]{z-index:1}
.scroll-world__fallback{z-index:0;transition:opacity 160ms ease-out}
.scroll-world.is-video-ready [data-sw-video]{opacity:1}
.scroll-world.is-video-ready .scroll-world__fallback{opacity:0}

.scroll-world__veil{
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:rgba(3,10,11,.12);
}

.scroll-world__status{
  position:absolute;
  z-index:4;
  right:max(20px,4vw);
  bottom:calc(20px + env(safe-area-inset-bottom));
  margin:0;
  color:var(--sw-muted);
  font-size:.8125rem;
  text-wrap:pretty;
  transition:opacity 180ms ease-out,transform 180ms ease-out;
}

.scroll-world__chapters{
  position:relative;
  z-index:var(--sw-z-copy);
  margin-top:-100svh;
}

.scroll-scene{
  min-height:145svh;
  display:flex;
  align-items:center;
  padding:calc(88px + env(safe-area-inset-top)) max(24px,6vw) calc(48px + env(safe-area-inset-bottom));
}

.scroll-scene:nth-child(even){justify-content:flex-end}

.scroll-scene__copy{
  width:min(560px,42vw);
  padding:clamp(20px,3vw,36px);
  background:var(--sw-surface);
  border-top:1px solid var(--sw-rule);
  border-bottom:1px solid var(--sw-rule);
  opacity:.38;
  transform:translateY(18px);
  transition:opacity 180ms ease-out,transform 180ms ease-out;
}

.scroll-scene.is-active .scroll-scene__copy{
  opacity:1;
  transform:translateY(0);
}

.scroll-scene__copy h1,
.scroll-scene__copy h2{
  max-width:13ch;
  margin:0;
  color:var(--sw-ink);
  font-family:Commissioner,Arial,sans-serif;
  font-size:clamp(2.35rem,5vw,5.5rem);
  font-weight:650;
  line-height:.98;
  letter-spacing:-.025em;
  text-wrap:balance;
}

.scroll-scene__copy>p:last-of-type{
  max-width:48ch;
  margin:20px 0 0;
  color:var(--sw-muted);
  font-size:clamp(1rem,1.25vw,1.125rem);
  line-height:1.6;
  text-wrap:pretty;
}

.scroll-scene__copy .button-row{
  margin-top:28px;
  align-items:stretch;
}

.scroll-scene__copy .button{
  min-height:44px;
}

.scroll-scene__copy .button-primary{
  background:#0d6668;
  color:#fff;
}

.scroll-scene__copy .button-quiet{
  border-color:rgba(247,251,250,.62);
  color:#fff;
}

.scroll-world__rail{
  position:fixed;
  z-index:var(--sw-z-nav);
  top:50%;
  right:max(10px,2vw);
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px;
  opacity:0;
  pointer-events:none;
  transform:translateY(-50%);
  transition:opacity 180ms ease-out,transform 180ms ease-out;
}

.scroll-world.is-current:not(.is-rail-hidden) .scroll-world__rail{
  opacity:1;
  pointer-events:auto;
}

.scroll-world.is-rail-hidden .scroll-world__rail{
  opacity:0;
  pointer-events:none;
  transform:translate(18px,-50%);
}

.scroll-world.is-rail-hidden .scroll-world__status{
  opacity:0;
  transform:translateY(12px);
}

.scroll-world__rail a{
  display:grid;
  min-width:44px;
  min-height:44px;
  place-items:center;
  color:var(--sw-muted);
  border-bottom:1px solid transparent;
  text-decoration:none;
  font-variant-numeric:tabular-nums;
  font-size:.75rem;
  transition:color 160ms ease-out,border-color 160ms ease-out;
}

.scroll-world__rail a:hover,
.scroll-world__rail a[aria-current="step"]{
  color:#fff;
  border-color:var(--sw-mineral);
}

.scroll-world__rail a:focus-visible,
.scroll-scene__copy a:focus-visible{
  outline:3px solid #e36b61;
  outline-offset:3px;
}

[data-sw-mode="stills"] .scroll-world__stage video{display:none}
[data-sw-mode="stills"] .scroll-world__fallback{opacity:1}

@media (max-width:900px){
  .scroll-scene__copy{width:min(560px,56vw)}
  .scroll-scene__copy h1,.scroll-scene__copy h2{font-size:clamp(2.25rem,7vw,4.75rem)}
}

@media (max-width:600px){
  .scroll-world__stage video,
  .scroll-world__fallback{object-position:center 46%}
  .scroll-world__status{right:18px;bottom:calc(12px + env(safe-area-inset-bottom))}
  .scroll-world__rail{display:none}
  .scroll-scene,
  .scroll-scene:nth-child(even){
    min-height:165svh;
    align-items:flex-end;
    justify-content:stretch;
    padding:calc(72px + env(safe-area-inset-top)) 18px calc(42px + env(safe-area-inset-bottom));
  }
  .scroll-scene__copy{
    width:100%;
    padding:20px 18px;
    margin-bottom:calc(24px + env(safe-area-inset-bottom));
    background:rgba(7,19,21,.92);
  }
  .scroll-scene__copy h1,
  .scroll-scene__copy h2{max-width:14ch;font-size:clamp(2.15rem,12vw,3.5rem)}
  .scroll-scene__copy>p:last-of-type{font-size:1rem}
  .scroll-scene__copy .button-row{flex-direction:column}
  .scroll-scene__copy .button{width:100%;justify-content:center}
}

@media (prefers-reduced-motion: reduce){
  [data-sw-mode="pending"] .scroll-world__status::before{animation:none}
  .scroll-world__stage video,
  .scroll-world__fallback,
  .scroll-scene__copy,
  .scroll-world__rail,
  .scroll-world__status{transition:none}
  .scroll-scene__copy{transform:none}
}