.site-gallery {
 --gallery-foreground: 30 8% 14%;
 --gallery-control: 40 16% 96%;
 --gallery-outline: 30 8% 38%;
 --gallery-focus: 30 28% 32%;
 position: fixed;
 inset: 0;
 width: min(900px, calc(100vw - 48px));
 height: min(680px, 76vh);
 height: min(680px, 76dvh);
 max-width: none;
 max-height: none;
 margin: auto;
 padding: 0;
 border: 0;
 overflow: hidden;
 color: hsl(var(--gallery-foreground));
 background: transparent;
 -webkit-font-smoothing: antialiased;
}
.site-gallery[open] { display: grid; }
.site-gallery::backdrop { background: rgb(0 0 0 / .72); }
.site-gallery-head { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 8px; }
.site-gallery-count { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 2; min-width: 56px; padding: 4px 12px; border-radius: 4px; background: hsl(var(--gallery-control) / .9); font-size: 14px; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; }
.site-gallery-count[hidden] { display: none; }
.site-gallery button {
 float: none;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 min-width: 44px;
 min-height: 44px;
 margin: 0;
 padding: 0;
 border: 1px solid hsl(var(--gallery-outline) / .6);
 border-radius: 4px;
 color: hsl(var(--gallery-foreground));
 background: hsl(var(--gallery-control) / .9);
 font: inherit;
 font-size: 28px;
 line-height: 1;
 cursor: pointer;
 transition: background-color 120ms ease-out, transform 120ms ease-out;
}
.site-gallery button[hidden] { display: none; }
.site-gallery button:disabled { opacity: .6; cursor: default; }
.site-gallery button:not(:disabled):active { transform: scale(.97); }
.site-gallery button:focus-visible, .site-gallery-stage:focus-visible { outline: 2px solid hsl(var(--gallery-focus)); outline-offset: 3px; }
.site-gallery-stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; touch-action: none; user-select: none; overscroll-behavior: contain; }
.site-gallery-stage.is-zoomed { cursor: grab; }
.site-gallery-stage.is-zoomed:active { cursor: grabbing; }
.site-gallery-image {
 grid-area: 1 / 1;
 display: block;
 flex: none;
 width: auto;
 height: auto;
 max-width: none;
 max-height: none;
 object-fit: contain;
 transform-origin: center;
 opacity: 0;
 outline: none;
 box-shadow: 0 8px 32px hsl(0 0% 0% / .2);
}
.site-gallery-image.is-ready { opacity: 1; }
.site-gallery .site-gallery-prev, .site-gallery .site-gallery-next { position: absolute; top: calc(50% - 24px); z-index: 1; width: 48px; height: 48px; padding: 0; font-size: 32px; }
.site-gallery-prev { left: 8px; }
.site-gallery-next { right: 8px; }
.site-gallery-loading { position: absolute; text-align: center; max-width: 80%; padding: 8px 12px; border-radius: 4px; background: hsl(var(--gallery-control) / .95); }
.site-gallery-loading[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .site-gallery button:not(:disabled):hover { background: hsl(var(--gallery-control)); } }
@media (max-width: 700px) {
 .site-gallery { width: 88vw; height: 64vh; height: 64dvh; }
 .site-gallery-head { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
 .site-gallery-count { bottom: max(8px, env(safe-area-inset-bottom)); }
 .site-gallery .site-gallery-prev, .site-gallery .site-gallery-next { width: 44px; height: 44px; }
}
@media (max-height: 500px) {
 .site-gallery { height: 76vh; height: 76dvh; }
}
.site-gallery.is-expanded { width: 100vw; height: 100vh; height: 100dvh; margin: 0; background: #000; }
.site-gallery.is-expanded::backdrop { background: #000; }
@media (prefers-reduced-motion: reduce) { .site-gallery button { transition: none; } }