*{box-sizing:border-box}
body{margin:0;background:var(--vi-canvas);color:var(--vi-ink);font-family:var(--vi-font-ui);overflow:hidden}
button{-webkit-tap-highlight-color:transparent;font:inherit}
[hidden]{display:none!important}
.vi-text-action{font-size:14px}
.empty{height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 32px;color:var(--vi-muted);font-size:15px}
.empty p{max-width:320px;line-height:1.7;text-align:center}
.empty::before{content:'';height:56px;width:1px;background:var(--vi-line);margin-bottom:24px}
#wall{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;outline-offset:-6px;contain:layout paint size}
#wall.dragging{cursor:grabbing}
.photo-column{position:absolute;left:0;top:0;will-change:transform}
.tile{position:absolute;left:0;top:0;display:grid;place-items:center;padding:0;border:0;background:transparent;cursor:inherit;user-select:none}
.tile img{width:100%;height:100%;object-fit:contain;filter:grayscale(1);pointer-events:none;user-select:none}
.tile:focus-visible img{filter:grayscale(0)}
.tile.failed{color:var(--vi-muted);font-size:12px;background:var(--vi-conversation)}
.tile.failed::after{content:attr(data-error)}
.tile.failed img{display:none}
#viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--vi-ink);overflow:auto}
#viewer::backdrop{background:var(--vi-canvas)}
#viewer[open]::backdrop{animation:photo-backdrop-in 520ms cubic-bezier(.2,.7,.2,1) both}
@keyframes photo-backdrop-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#viewer[open]::backdrop{animation:none}}
#close{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));z-index:3;width:44px;height:44px;justify-content:center}
#close .vi-icon{width:24px;height:24px}
#photo-stage{height:calc(100svh - 180px);margin:80px 7vw 0;display:flex;align-items:center;justify-content:center}
#full-photo{display:block;width:auto;height:auto;max-height:100%;max-width:100%;object-fit:contain;transform-origin:center}
#viewer[open] #full-photo{will-change:transform}
#photo-error{position:absolute;text-align:center;max-width:80vw;background:var(--vi-canvas);padding:16px}
.caption{margin:24px auto 32px;padding:0 32px;text-align:center;max-width:800px}
.caption h2{font-size:18px;font-weight:500;margin:0}
.caption p{font-size:13px;color:var(--vi-muted);line-height:1.6;margin:8px 0 0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.no-script{position:fixed;top:35%;left:15%;right:15%;text-align:center}
body:has(.no-script) .empty{display:none}
@media(max-width:600px){#close{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}#photo-stage{margin:76px 16px 0;height:calc(100svh - 220px)}.caption{padding:0 20px}}
@media(max-height:500px){#photo-stage{margin-top:60px;height:calc(100svh - 140px)}.caption{margin-top:12px}}

#back{position:fixed;z-index:2;top:max(16px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));width:44px;height:44px;justify-content:center;background:transparent;color:var(--vi-surface);mix-blend-mode:difference}
#back:hover,#back:active,#back:focus-visible{background:transparent;color:var(--vi-surface)}
#back .vi-icon{width:24px;height:24px}
@media(max-width:600px){#back{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left))}}