html.image-viewer-open,
body.image-viewer-open { overflow:hidden; overscroll-behavior:none; }
.image-viewer,
.image-viewer * { box-sizing:border-box; }

.image-viewer-target { cursor:zoom-in; }
.image-viewer-target:focus-visible { outline:2px solid currentColor; outline-offset:.35rem; }

.image-viewer {
  position:fixed;
  z-index:500;
  inset:0;
  width:100vw;
  max-width:none;
  height:100vh;
  height:100dvh;
  max-height:none;
  margin:0;
  padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
  border:0;
  color:#f5f5f5;
  background:rgba(0,0,0,.985);
  opacity:0;
  transition:opacity .24s ease;
}
.image-viewer::backdrop { background:#000; }
.image-viewer:focus { outline:none; }
.image-viewer[open] { display:grid; place-items:center; }
.image-viewer.is-open { opacity:1; }
.image-viewer.is-closing { opacity:0; }

.image-viewer-figure {
  display:grid;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0;
  grid-template-rows:minmax(0,1fr) auto;
  pointer-events:none;
}
.image-viewer-viewport {
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  cursor:grab;
  pointer-events:auto;
  touch-action:none;
}
.image-viewer.is-dragging .image-viewer-viewport { cursor:grabbing; }

@media (min-width:46.01rem) and (hover:hover) and (pointer:fine) {
  .image-viewer-viewport {
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-behavior:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    cursor:default;
    touch-action:pan-x;
  }
  .image-viewer-viewport::-webkit-scrollbar { display:none; }
  .image-viewer-track {
    transform:none !important;
    transition:none !important;
    will-change:auto;
  }
  .image-viewer-slide {
    scroll-snap-align:center;
  }
}
.image-viewer-track {
  display:grid;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  grid-template-columns:repeat(var(--viewer-slide-count,3),100%);
  transform:translate3d(-100%,0,0);
  transition-property:transform;
  transition-duration:0ms;
  transition-timing-function:cubic-bezier(.22,.74,.18,1);
  backface-visibility:hidden;
  will-change:transform;
}
.image-viewer-slide {
  display:grid;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  place-items:center;
  overflow:hidden;
  padding-inline:clamp(.25rem,3vw,2.5rem);
  backface-visibility:hidden;
  contain:layout paint;
}
.image-viewer-slide[hidden] { display:grid; visibility:hidden; }
.image-viewer-slide-image {
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:calc(100dvh - 7rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  object-fit:contain;
  opacity:1;
  transform:translateZ(0) scale(1);
  transition:opacity .22s ease,transform .38s cubic-bezier(.22,1,.36,1);
  backface-visibility:hidden;
  user-select:none;
  -webkit-user-drag:none;
}
.image-viewer.is-loading .image-viewer-slide.is-current .image-viewer-slide-image {
  opacity:.32;
  transform:translateZ(0) scale(.988);
}
.image-viewer-meta {
  display:flex;
  min-height:3.35rem;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.22rem;
  padding:.85rem 4rem 0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.image-viewer-caption,
.image-viewer-status {
  margin:0;
  color:#a9a9ae;
  font-size:.58rem;
  letter-spacing:.14em;
  line-height:1.55;
  text-align:center;
  text-transform:uppercase;
}
.image-viewer-caption { max-width:min(72vw,58rem); }
.image-viewer-caption[hidden],
.image-viewer-status[hidden] { display:none; }
.image-viewer-status {
  color:#f5f5f5;
  white-space:nowrap;
}
.image-viewer-status:not([hidden])::before {
  display:none;
}

.image-viewer-close,
.image-viewer-nav {
  position:absolute;
  z-index:3;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  color:#f5f5f5;
  background:rgba(0,0,0,.72);
  cursor:pointer;
  transition:color .2s,background .2s,transform .25s cubic-bezier(.22,1,.36,1),opacity .2s;
}
.image-viewer-close {
  top:max(1rem,env(safe-area-inset-top));
  right:max(1rem,env(safe-area-inset-right));
  width:3rem;
  height:3rem;
}
.image-viewer-nav {
  top:50%;
  width:3.25rem;
  height:3.25rem;
  transform:translateY(-50%);
}
.image-viewer-previous { left:max(1rem,env(safe-area-inset-left)); }
.image-viewer-next { right:max(1rem,env(safe-area-inset-right)); }
.image-viewer-close:hover { color:#050505; background:#f5f5f5; transform:rotate(90deg); }
.image-viewer-close:active { transform:rotate(90deg) scale(.94); }
.image-viewer-nav:hover { color:#050505; background:#f5f5f5; transform:translateY(-50%) scale(1.06); }
.image-viewer-nav:active { transform:translateY(-50%) scale(.94); }
.image-viewer-nav:disabled { opacity:0; pointer-events:none; }
.image-viewer-close svg,
.image-viewer-nav svg { width:1rem; fill:none; stroke:currentColor; stroke-width:1.6; }
.image-viewer-nav svg { width:1.15rem; }

@media (max-width:46rem) {
  .image-viewer {
    padding-inline:max(.35rem,env(safe-area-inset-left));
  }
  .image-viewer-slide { padding-inline:clamp(1rem,4.8vw,1.5rem); }
  .image-viewer-slide-image {
    width:100%;
    max-width:100%;
    height:100%;
    max-height:calc(100dvh - 7.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .image-viewer-meta {
    min-height:3.5rem;
    flex-direction:column;
    align-items:center;
    gap:.22rem;
    padding:.65rem 1rem 0;
  }
  .image-viewer-caption { max-width:calc(100vw - 2rem); font-size:.52rem; }
  .image-viewer-status { font-size:.5rem; }
  .image-viewer-status:not([hidden])::before { display:none; }
}

@media (max-width:46rem),(hover:none),(pointer:coarse) {
  .image-viewer-viewport { padding-top:3.5rem; }
  .image-viewer-nav { display:none; }
  .image-viewer-close { transition:opacity .18s ease; }
  .image-viewer-close:hover,
  .image-viewer-close:active {
    color:#f5f5f5;
    background:rgba(0,0,0,.72);
    transform:none;
  }
  .image-viewer.is-closing .image-viewer-close { opacity:0; }
}

@media (prefers-reduced-motion:reduce) {
  .image-viewer,
  .image-viewer-track,
  .image-viewer-slide-image,
  .image-viewer-meta,
  .image-viewer-close,
  .image-viewer-nav { transition-duration:.01ms !important; }
}