html, body { margin: 0; padding: 0; background-color: #000; }
.header { position: absolute; top: 1em; left: 1em; right: 1em; }
.title { font-family: 'Playfair Display', serif; color: #fff; text-shadow: 2px 2px 3px #000; }
.progresses { display: flex; gap: 1em; }
.progress, .value { height: 5px; border-radius: 2px; }
.progress { width: 100%; background-color: rgba(255, 255, 255, 20%); }
.value { width: 0%; background-color: rgba(255, 255, 255, 90%); }
.progress.animating .value { width: 0%; animation-name: progress; animation-duration: 5s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes progress { from { width: 0%; } to { width: 100%; } }
.story { display: none; width: 100vw; height: 100vh; }
.story img { display: none; width: 100vw; height: 100vh; object-fit: cover; }
.story.current, .story.current img.current { display: block; }