html.gallery-is-open { overflow: hidden; }
.gallery-viewer {
  padding: 0;
  border: 1px solid #444;
  border-radius: 8px;
  margin: auto;
  width: min(1200px, calc(100% - 32px));
  max-width: none;
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
  max-height: none;
  background: #101010;
  color: #fff;
  box-shadow: 0 16px 80px #0009;
  font-family: inherit;
}
.gallery-viewer::backdrop { background: #000e; }
.gallery-viewer__panel { display: flex; flex-direction: column; height: 100%; }
.gallery-viewer__toolbar { display: flex; align-items: center; gap: 18px; padding: 10px 16px; }
.gallery-viewer__count { margin-right: auto; font-variant-numeric: tabular-nums; }
.gallery-viewer__original { color: #fff; text-decoration: underline; font-size: 14px; }
.gallery-viewer button {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 48px; height: 48px; border: 1px solid #777; border-radius: 50%;
  background: #181818dd; color: #fff; font: inherit; font-size: 22px; cursor: pointer;
}
.gallery-viewer button:hover { background: #a62429; }
.gallery-viewer :focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.gallery-viewer button[hidden] { display: none; }
.gallery-viewer__stage { position: relative; flex: 1; min-height: 0; touch-action: pan-y pinch-zoom; }
.gallery-viewer__image { width: 100%; height: 100%; }
.gallery-viewer__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-viewer__prev, .gallery-viewer__next { position: absolute; top: 50%; transform: translateY(-50%); }
.gallery-viewer__prev { left: 12px; }
.gallery-viewer__next { right: 12px; }
.gallery-viewer__message { position: absolute; top: 12px; left: 64px; right: 64px; text-align: center; background: #101010dc; padding: 8px; }
.gallery-viewer__message:empty { display: none; }
.gallery-viewer__footer { text-align: center; padding: 12px 20px 16px; }
.gallery-viewer__caption { margin: 0 0 4px; font-size: 16px; max-height: 15vh; overflow: auto; }
.gallery-viewer__footer small { color: #bbb; font-size: 12px; }
@media (max-width: 600px) {
  .gallery-viewer { width: 100%; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
  .gallery-viewer__toolbar { padding-top: max(8px, env(safe-area-inset-top)); }
  .gallery-viewer__footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .gallery-viewer__prev { left: 4px; }
  .gallery-viewer__next { right: 4px; }
}