.image-viewer-source { cursor: zoom-in; }
.image-viewer-source:focus-visible { outline: 3px solid #b7652c; outline-offset: 5px; }
html.image-viewer-open { overflow: hidden; }
.image-viewer { width: min(1440px, calc(100vw - 64px)); max-width: none; height: calc(100dvh - 64px); max-height: none; margin: auto; padding: 0; border: 1px solid #8b9a97; border-radius: 8px; color: #f8f4ea; background: #152a30; box-shadow: 0 24px 100px #0007; font: 14px/1.45 var(--sans, Arial, sans-serif); }
.image-viewer[open] { display: flex; flex-direction: column; }
.image-viewer::backdrop { background: rgba(7, 22, 27, .72); }
.image-viewer__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; padding: 8px 16px; border-bottom: 1px solid #6a7c76; }
.image-viewer__toolbar > span { font-weight: 600; letter-spacing: .03em; }
.image-viewer__toolbar > div { display: flex; gap: 8px; }
.image-viewer button { min-height: 44px; padding: 8px 16px; border: 1px solid #8b9a97; border-radius: 4px; color: inherit; background: transparent; cursor: pointer; }
.image-viewer button:hover { background: #345057; }
.image-viewer button:focus-visible, .image-viewer__stage:focus-visible { outline: 3px solid #e5b866; outline-offset: -4px; }
.image-viewer__stage { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; display: grid; place-items: center; padding: 14px; background: #f6f2e8; }
.image-viewer__stage img { width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }
.image-viewer--actual .image-viewer__stage { display: block; place-items: start; }
.image-viewer--actual .image-viewer__stage img { width: auto; height: auto; max-width: none; max-height: none; margin: 0; justify-self: start; align-self: start; }
.image-viewer__caption { flex: 0 0 auto; max-height: 15dvh; overflow: auto; margin: 0; padding: 12px 16px; color: #e0e7e1; font-size: 12px; }
.image-viewer__caption:empty { display: none; }
@media(max-width: 680px) { .image-viewer { width: calc(100vw - 20px); height: calc(100dvh - 32px); border-radius: 6px; } .image-viewer__toolbar { padding: 6px 8px; gap: 8px; } .image-viewer button { padding-inline: 12px; } .image-viewer__stage { padding: 6px; } .image-viewer__caption { padding: 10px 12px; } }
@media print { .image-viewer { display: none!important; } }
@media(max-width:680px) {
  .image-viewer:not(.image-viewer--actual) { height: fit-content; max-height: calc(100dvh - 32px); }
  .image-viewer:not(.image-viewer--actual) .image-viewer__stage { flex: 0 1 auto; }
  .image-viewer:not(.image-viewer--actual) .image-viewer__stage img { height: auto; max-height: calc(100dvh - 200px); }
}