html.image-viewer-open{overflow:hidden;scrollbar-gutter:stable}
.image-viewer{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;box-sizing:border-box;border:0;padding:20px 28px;background:#202127f5;color:#f2f0ea}
.image-viewer::backdrop{background:#16171c}
.image-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:18px}
.image-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:20px}
.image-viewer-bar h2{font-size:.75rem;font-weight:500;line-height:1.5;letter-spacing:.04em;margin:0;color:#c7b8d9}
.image-viewer-close{display:flex;align-items:center;gap:16px;min-height:44px;padding:8px 14px;font:inherit;font-size:.875rem;color:inherit;background:#303039;border:1px solid #87828e;cursor:pointer}
.image-viewer-close span{font-size:1.625rem;line-height:1}
.image-viewer-close:focus-visible{outline:3px solid #cfb7f2;outline-offset:3px}
.image-viewer-stage{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.image-viewer-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;pointer-events:auto}
.image-viewer-stage img[hidden],.image-viewer-status[hidden]{display:none}
.image-viewer-status{font-size:.875rem;line-height:1.5;color:#ded5e8}
.image-viewer-caption{font-size:.75rem;line-height:1.6;color:#c8c9cd;margin:0;text-align:center}
@media(max-width:600px){.image-viewer{padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));gap:12px}.image-viewer-bar{gap:12px}.image-viewer-bar h2{font-size:.625rem}.image-viewer-close{font-size:.75rem;gap:10px}.image-viewer-caption{font-size:.6875rem}}
