:root {
  color-scheme: dark;
  background: #24291f;
  color: #fff8e7;
  font-family: Georgia, serif;
}
* { box-sizing: border-box; }
html { scrollbar-width: none; }
body { margin: 0; }
html::-webkit-scrollbar { display: none; }
.experience { height: 100vh; height: 100svh; }
.experience.is-animated { height: calc(100vh + 450vh); height: calc(100svh + 450svh); }
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #24291f;
}
.poster, canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster {
  inset: 50% auto auto 50%;
  width: min(100%, 170.6667vh);
  width: min(100%, 170.6667svh);
  height: auto;
  transform: translate(-50%, -50%);
}
.finished, canvas, .scroll-cue { visibility: hidden; }
.is-animated canvas, .is-animated .scroll-cue { visibility: visible; }
.caption {
  position: absolute;
  inset: auto 0 max(5%, env(safe-area-inset-bottom)) 0;
  padding: 0 1.25rem;
  text-align: center;
  text-shadow: 0 1px 7px #18180e, 0 3px 24px #171711;
  pointer-events: none;
  opacity: 0;
}
.caption p { margin: 0 0 .5rem; font-size: clamp(1.45rem, 4vw, 3.6rem); line-height: 1.1; }
.caption small { font-family: system-ui, sans-serif; font-size: .75rem; letter-spacing: .09em; }
.scroll-cue {
  position: absolute;
  bottom: max(3%, env(safe-area-inset-bottom));
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.scroll-cue span {
  width: 12px;
  height: 12px;
  border: solid #fff8e7;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-3px) rotate(45deg);
  filter: drop-shadow(0 1px 2px #18180e);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .experience.is-animated { height: 100vh; height: 100svh; }
  .finished { visibility: visible; }
  .opening, .is-animated canvas, .is-animated .scroll-cue { visibility: hidden; }
  .caption { opacity: 1 !important; }
}