*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:#111;overflow:hidden}body{display:grid;place-items:center;font-family:Arial,sans-serif}#stage{position:relative;width:min(100vw,calc(100vh * 4 / 3));aspect-ratio:4/3;background:#fff;overflow:hidden;touch-action:manipulation;user-select:none}#slide{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}#hotspots{position:absolute;inset:0}.hotspot{position:absolute;border:0;background:transparent;cursor:pointer;padding:0}.hotspot:focus-visible{outline:3px solid #168cff;outline-offset:2px}.nav{position:absolute;top:44%;width:7%;height:14%;border:0;background:rgba(0,0,0,0);color:transparent;cursor:pointer}.nav:focus-visible,.nav:hover{background:rgba(0,0,0,.15);color:#fff;font-size:clamp(24px,5vw,64px)}#prev{left:0}#next{right:0}#counter{position:absolute;right:.8%;bottom:.5%;padding:.25em .5em;border-radius:.4em;background:rgba(0,0,0,.38);color:#fff;font-size:clamp(10px,1.4vw,16px);opacity:0;transition:opacity .2s}#stage:hover #counter,#counter:focus{opacity:1}@media(max-width:600px){.nav{display:none}}