/* The photo viewer: the whole screen, the photo at full size, and zoom right
   into it: pinch, double-tap, click or scroll, then drag (or just move the
   mouse) to look around. */
.zoom{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#050506;color:#fff;overflow:hidden;
  font:14px/1.4 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased}
.zoom::backdrop{background:#050506}
.zoom[open]{animation:zm-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes zm-in{from{opacity:0}}
.zm-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:zoom-in;user-select:none;-webkit-user-select:none}
.zm-stage.zoomed{cursor:grab}
.zm-stage.grabbing{cursor:grabbing}
.zm-stage img{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;max-width:none;max-height:none;-webkit-user-drag:none}
.zm-stage.ease img{transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.zm-n{position:absolute;top:calc(20px + env(safe-area-inset-top));left:20px;margin:0;font-size:13px;color:rgba(255,255,255,.6);pointer-events:none;font-variant-numeric:tabular-nums}
.zm-cap{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));text-shadow:0 1px 10px rgba(0,0,0,.9);transform:translateX(-50%);max-width:min(640px,86vw);margin:0;text-align:center;color:rgba(255,255,255,.82);pointer-events:none;transition:opacity .3s}
.zm-hint{position:absolute;left:50%;top:calc(22px + env(safe-area-inset-top));transform:translateX(-50%);margin:0;padding:7px 14px;border-radius:16px;background:rgba(255,255,255,.1);font-size:12.5px;color:rgba(255,255,255,.75);pointer-events:none;transition:opacity .6s}
.zoom.zoomed .zm-hint,.zoom.zoomed .zm-cap{opacity:0}
.zm-b{position:absolute;z-index:2;width:46px;height:46px;border:0;border-radius:23px;background:rgba(255,255,255,.12);color:#fff;font:400 26px/1 -apple-system,sans-serif;display:grid;place-items:center;cursor:pointer;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .2s,opacity .3s}
.zm-b:hover{background:rgba(255,255,255,.24)}
.zm-x{top:calc(14px + env(safe-area-inset-top));right:14px}
.zm-prev{left:14px;top:50%;margin-top:-23px}
.zm-next{right:14px;top:50%;margin-top:-23px}
.zm-b[hidden]{display:none}
.zoom.zoomed .zm-prev,.zoom.zoomed .zm-next{opacity:0;pointer-events:none}
.zm-load{position:absolute;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:zm-spin .8s linear infinite}
@keyframes zm-spin{to{transform:rotate(360deg)}}
@media (hover:none){.zm-prev,.zm-next{display:none}}