/* Opt-in: only pages loading this stylesheet and script get the viewer. */
.image-viewer-frame {
  position: relative;
  width: fit-content;
  max-width: 100%;
}
.image-viewer-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}
.image-viewer-trigger span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid #d9dce2;
  border-radius: 6px;
  background: rgb(255 255 255 / 95%);
  color: #242830;
  font: 500 12px/1.4 Inter, sans-serif;
}
.image-viewer-trigger:focus-visible { outline: 3px solid #2f4bf5; outline-offset: -3px; }
.image-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(17 20 26 / 97%);
  color: #fff;
  overflow: hidden;
  font: 14px/1.5 Inter, sans-serif;
}
.image-viewer::backdrop { background: #11141a; }
.image-viewer-toolbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  background: #11141a;
}
.image-viewer-controls { display: flex; align-items: center; gap: 8px; }
.image-viewer button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #5b626e;
  border-radius: 6px;
  background: #252a33;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.image-viewer button:hover { background: #3a424f; }
.image-viewer button:focus-visible { outline: 3px solid #87b5ff; outline-offset: 3px; }
.image-viewer button:disabled { opacity: .4; cursor: default; }
.image-viewer-stage {
  position: absolute;
  inset: calc(76px + env(safe-area-inset-top)) 0 calc(48px + env(safe-area-inset-bottom));
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
.image-viewer-image {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  transform-origin: center;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}
.image-viewer.is-zoomed .image-viewer-image { cursor: grab; }
.image-viewer-image[hidden] { display: none; }
.image-viewer.is-dragging .image-viewer-image { cursor: grabbing; }
.image-viewer-status {
  position: absolute;
  top: 45%;
  width: 100%;
  text-align: center;
  pointer-events: none;
}
.image-viewer-help {
  position: absolute;
  inset: auto 16px env(safe-area-inset-bottom);
  margin: 0;
  padding: 12px 0;
  color: #d0d5de;
  text-align: center;
  font-size: 12px;
  pointer-events: none;
}
.image-viewer-scale { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 540px) {
  .image-viewer-title { display: none; }
  .image-viewer-toolbar { gap: 8px; padding-inline: 10px; }
  .image-viewer-controls { gap: 5px; }
  .image-viewer button { padding-inline: 9px; }
}