:root{
  color-scheme:dark;
  --bg:#000;
  --gap:clamp(14px,2.2vw,34px);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
.progress{position:fixed;z-index:50;top:0;left:0;width:100%;height:2px;background:rgba(255,255,255,.08);pointer-events:none}
.progress span{display:block;width:0;height:100%;background:#fff;transform-origin:left center;will-change:width}
.deck{width:100%;padding:var(--gap) 0 calc(var(--gap) * 1.5)}
.slide{width:100%;display:flex;justify-content:center;align-items:center;padding:0 clamp(10px,2vw,28px);margin:0 0 var(--gap);scroll-margin-top:8px}
.slide img{width:min(100%,1600px);height:auto;aspect-ratio:16/9;object-fit:contain;background:#000;box-shadow:0 18px 60px rgba(0,0,0,.36);transform:translateZ(0)}
.js .slide{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.js .slide.is-visible{opacity:1;transform:none}
@media (min-width:900px) and (min-aspect-ratio:4/3){
  .deck{padding-top:clamp(16px,2vh,28px)}
  .slide{min-height:min(100svh,950px);margin-bottom:0;padding-top:clamp(10px,1.5vh,18px);padding-bottom:clamp(10px,1.5vh,18px)}
  .slide img{width:min(94vw,1600px);max-height:94svh}
}
@media (max-width:640px){
  :root{--gap:10px}
  .deck{padding-top:10px}
  .slide{padding:0;margin-bottom:10px}
  .slide img{width:100%;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .slide,.js .slide.is-visible{opacity:1;transform:none;transition:none}
}