.photo-trigger { cursor: pointer; }
.photo-trigger:focus-within .port-overlay { opacity: 1; visibility: visible; }
.photo-viewer { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12, 12, 12, .97); color: #fff; overflow: hidden; }
.photo-viewer::backdrop { background: #111; }
.photo-toolbar { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 24px; right: 16px; display: flex; align-items: center; justify-content: space-between; z-index: 2; }
.photo-count { font: 16px/1.5 sans-serif; letter-spacing: .08em; }
.photo-viewer button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #ffffff45; border-radius: 50%; background: #222b; color: #fff; cursor: pointer; font: 36px/1 sans-serif; }
.photo-viewer button:hover { background: #555; }
.photo-viewer button:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.photo-stage { position: absolute; inset: 76px 80px 28px; display: flex; align-items: center; justify-content: center; }
.photo-image { width: 100%; height: 100%; object-fit: contain; }
.photo-image[hidden] { display: none; }
.photo-status { position: absolute; text-align: center; color: #fff; }
.photo-prev, .photo-next { position: absolute; top: 50%; transform: translateY(-50%); }
.photo-prev { left: 16px; }
.photo-next { right: 16px; }
@media (max-width: 600px) {
    .photo-stage { inset: 76px 12px 92px; }
    .photo-prev, .photo-next { top: auto; bottom: max(20px, env(safe-area-inset-bottom)); transform: none; }
    .photo-prev { left: calc(50% - 64px); }
    .photo-next { right: calc(50% - 64px); }
}