#main-image{cursor:zoom-in}
#main-image:focus-visible{outline:3px solid #184d7a}
#photo-zoom{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#101820;color:#fff;overflow:hidden}
#photo-zoom::backdrop{background:#101820}
.zoom-toolbar{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:3;touch-action:manipulation}
.zoom-viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none;cursor:grab}
#photo-zoom button{display:grid;place-items:center;padding:0;width:44px;height:44px;border:1px solid #ffffff55;border-radius:50%;background:#101820b8;color:#fff;font-size:25px;line-height:1;cursor:pointer}
#photo-zoom button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.zoom-navigation{position:absolute;inset:0;pointer-events:none;z-index:2}
.zoom-navigation button{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;touch-action:manipulation}
.zoom-navigation [data-zoom=previous]{left:max(10px,env(safe-area-inset-left))}
.zoom-navigation [data-zoom=next]{right:max(10px,env(safe-area-inset-right))}
.zoom-navigation button:disabled{opacity:.3;cursor:default}
.zoom-counter{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.zoom-viewport img{position:absolute;left:50%;top:50%;max-width:none;max-height:none;object-fit:contain;transform-origin:center;pointer-events:none;user-select:none}