*{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:4/5;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;margin:auto;width:100%;height:100%;pointer-events:none}.hotspot{position:absolute;display:block;pointer-events:auto;cursor:pointer;background:transparent;border:0;text-decoration:none}.arrow{position:fixed;top:50%;transform:translateY(-50%);border:0;background:transparent;color:rgba(25,25,25,.48);font-size:42px;line-height:1;padding:16px;cursor:pointer;z-index:5}.arrow:hover{color:rgba(25,25,25,.85)}.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:auto;width:calc(100vw - 44px);max-width:none}.arrow{font-size:32px;padding:8px}.left{left:0}.right{right:0}#counter{right:8px;bottom:6px;font-size:9px}}