*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#f2f0ea}
body{font-family:Arial,Helvetica,sans-serif}
#viewer{width:100%;height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;padding:18px 56px}
#stage{position:relative;height:calc(100dvh - 36px);aspect-ratio:2/3;max-width:calc(100vw - 112px);display:flex;align-items:center;justify-content:center}
#page{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
#hotspots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hotspot{position:absolute;display:block;pointer-events:auto;cursor:pointer;background:transparent;border:0}
.arrow{position:fixed;top:50%;transform:translateY(-50%);border:0;background:transparent;color:rgba(25,25,25,.48);font-size:42px;padding:16px;cursor:pointer;z-index:5}
.left{left:4px}.right{right:4px}
#counter{position:fixed;right:18px;bottom:12px;font-size:10px;letter-spacing:.12em;color:rgba(25,25,25,.5)}
@media(max-width:700px){
#viewer{padding:8px 22px}
#stage{height:min(calc(100dvh - 86px),calc((100vw - 44px)*1.5));max-width:calc(100vw - 44px)}
.arrow{font-size:32px;padding:8px}.left{left:0}.right{right:0}
#counter{right:8px;bottom:6px;font-size:9px}
}