*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{background:#fff;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;display:flex;align-items:center;justify-content:center}#app{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,4vh,40px);height:100vh;justify-content:center}#slideshow-container{position:relative;width:min(clamp(300px,40vw,450px),calc((100vh - 160px)*.5625));cursor:pointer;overflow:hidden;aspect-ratio:450 / 800}#slideshow-container img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}#slideshow-container img.active{opacity:1}#demo-nav{display:flex;gap:32px}.demo-btn{background:none;border:none;cursor:pointer;font-family:inherit;font-size:12px;font-weight:400;text-transform:uppercase;color:#999;padding:0 0 3px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}.demo-btn:hover{color:#000}.demo-btn.active{color:#000;border-bottom-color:#000}#controls{display:flex;gap:24px;align-items:center}.control-item{display:flex;align-items:center;gap:6px;font-size:10px;text-transform:uppercase;color:#999;cursor:pointer;-webkit-user-select:none;user-select:none}.control-item input[type=checkbox]{accent-color:#000;cursor:pointer;width:12px;height:12px}.control-item input[type=number]{width:40px;border:none;border-bottom:1px solid #ccc;text-align:center;font-family:inherit;font-size:10px;letter-spacing:.1em;color:#000;background:transparent;outline:none;padding:0 0 2px}.control-item input[type=number]::-webkit-inner-spin-button,.control-item input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}#apply-btn{background:none;border:none;cursor:pointer;font-family:inherit;font-size:10px;text-transform:uppercase;color:#000;padding:0;text-decoration:underline}