/* Keep the viewer inside the viewport, independent of each demo's image styles. */
.photo-lightbox{width:min(1220px,calc(100% - 32px));height:min(900px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);max-width:1220px;box-sizing:border-box;margin:auto;padding:20px 24px 16px;overflow:hidden}
.photo-lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:14px}
.photo-lightbox>header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:0 0 14px;min-width:0}
.photo-lightbox>header>div{min-width:0}.photo-lightbox h2{line-height:1.25;margin:5px 0 0}
.photo-lightbox .photo-close{margin:0;width:44px;height:44px;min-width:44px;min-height:44px}
.photo-lightbox .photo-zoom{min-height:44px;margin:0;white-space:nowrap}.photo-lightbox .photo-zoom:disabled{opacity:.5;cursor:wait}
.photo-lightbox .photo-stage{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:minmax(0,1fr);align-items:stretch;gap:14px;min-height:0;min-width:0;margin:0;overflow:hidden}
.photo-lightbox .photo-canvas{grid-column:2;grid-row:1;position:relative;display:block;min-width:0;min-height:0;width:100%;height:100%;overflow:hidden;background:#090f1e}
.photo-lightbox.photo-single .photo-canvas{grid-column:1/-1}
.photo-lightbox .photo-canvas>img{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;object-position:center;cursor:default}
.photo-lightbox .photo-canvas.is-zoomed{overflow:auto;overscroll-behavior:contain}
.photo-lightbox .photo-canvas.is-zoomed>img{position:static;inset:auto;width:150%;height:auto;max-width:none;max-height:none;object-fit:contain}
.photo-lightbox .photo-prev,.photo-lightbox .photo-next{position:static;grid-row:1;align-self:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:0}
.photo-lightbox .photo-prev{grid-column:1}.photo-lightbox .photo-next{grid-column:3}
.photo-lightbox>footer{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-width:0;margin:0;padding:0;font-size:13px;line-height:1.6}
.photo-lightbox .photo-caption{position:static;inset:auto;display:block;min-width:0;flex:1;margin:0;padding:0;background:none;color:#e6efff;font-size:13px;line-height:1.6;letter-spacing:0;overflow-wrap:anywhere}
.photo-lightbox .photo-counter{flex:none;font-size:12px;line-height:1.6;color:#8dccff;white-space:nowrap}
.photo-lightbox .photo-thumbs{display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px;min-width:0;min-height:0;margin:0;padding:4px 3px 6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#5b7caa #0b1427}
.photo-lightbox .photo-thumbs button{flex:0 0 62px;width:62px;height:48px;min-width:44px;min-height:44px}
.photo-lightbox .photo-thumbs img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:540px){
 .photo-lightbox{width:calc(100% - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);padding:12px}
 .photo-lightbox[open]{gap:10px}.photo-lightbox>header{gap:10px;padding-bottom:10px}.photo-lightbox h2{font-size:15px}.photo-lightbox header>div>span{font-size:7px;letter-spacing:.8px}.photo-lightbox .photo-zoom{font-size:11px;padding:8px}
 .photo-lightbox .photo-stage{grid-template-columns:minmax(0,1fr);gap:0}.photo-lightbox .photo-canvas{grid-column:1;grid-row:1;height:100%}
 .photo-lightbox .photo-prev,.photo-lightbox .photo-next{position:absolute;top:50%;transform:translateY(-50%);z-index:1;background:#0c1a33e8}.photo-lightbox .photo-prev{left:4px}.photo-lightbox .photo-next{right:4px}
 .photo-lightbox .photo-caption{font-size:12px}.photo-lightbox .photo-counter{font-size:11px}.photo-lightbox .photo-thumbs{gap:6px}.photo-lightbox .photo-thumbs button{flex-basis:52px;width:52px;height:44px}
}
@media(max-height:480px){.photo-lightbox{padding:9px 14px}.photo-lightbox[open]{gap:7px}.photo-lightbox>header{padding-bottom:7px}.photo-lightbox header>div>span{display:none}.photo-lightbox h2{margin:0;font-size:15px}.photo-lightbox .photo-thumbs{padding-block:0}.photo-lightbox .photo-caption{font-size:11px}.photo-lightbox .photo-thumbs button{height:44px}}