html,body{background:#0d2d4f}.app{width:100%;max-width:520px;height:100vh;min-height:100svh;padding:0;background:#0d2d4f}.topbar{position:absolute;left:20px;right:20px;top:max(18px,env(safe-area-inset-top));z-index:10;color:#fff}.brand,.counter{color:#fff;text-shadow:0 2px 8px #06234588}.progress{position:absolute;left:20px;right:20px;top:calc(max(18px,env(safe-area-inset-top)) + 28px);z-index:10;margin:0;gap:5px}.progress i{height:4px;background:#ffffff66;box-shadow:0 1px 4px #06234555}.progress i.on{background:#fff}.slides{position:absolute;inset:0;z-index:1}.scene{width:100%;height:100%;min-height:100%;margin:0;border-radius:0}.scene-bg{object-fit:cover;object-position:center center}.scene-beach .scene-bg{animation-duration:1.6s}.scene-copy{left:22px;right:22px;bottom:max(30px,calc(env(safe-area-inset-bottom) + 24px))}.scene-next{right:22px;bottom:max(30px,calc(env(safe-area-inset-bottom) + 24px))}.hint{position:absolute;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));z-index:10;color:#fff8;text-shadow:0 1px 5px #06234577}.scene-copy h2 strong{font-size:clamp(72px,20vw,124px)}.scene-copy .caption{max-width:300px}.scene .bars{max-width:250px;height:120px}.final-copy{bottom:max(28px,calc(env(safe-area-inset-bottom) + 22px))}.final-copy .lead{max-width:320px}.scene-picnic .scene-copy h2{font-size:clamp(42px,11vw,70px)}
@media(min-width:521px){.app{margin:0;border-radius:0;box-shadow:none}}