.viewer-open, .viewer-open body { overflow:hidden; }
.image-viewer { position:fixed; inset:0; width:100%; max-width:none; height:100%; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:#171714; color:#f7f3ed; overscroll-behavior:contain; }
.image-viewer::backdrop { background:#171714; }
.image-viewer[open] { display:block; }
.viewer-shell { display:grid; grid-template-rows:44px minmax(0,1fr) auto; gap:14px; width:100%; height:100%; padding:20px max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.viewer-toolbar { display:flex; align-items:center; justify-content:flex-end; }
.viewer-has-thumbnails .viewer-shell { grid-template-rows:44px minmax(0,1fr) auto 64px; }
.viewer-thumbnails { position:relative; min-width:0; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
.viewer-thumbnails::-webkit-scrollbar { display:none; }
.viewer-thumbnails[hidden] { display:none; }
.viewer-thumb-track { position:relative; display:flex; gap:8px; width:max-content; margin-inline:auto; padding:3px; }
.viewer-thumb { display:block; flex-shrink:0; width:84px; height:58px; padding:3px; border:1px solid transparent; border-radius:3px; background:transparent; opacity:.5; cursor:pointer; transition:opacity 180ms ease,border-color 180ms ease; }
.viewer-thumb img { display:block; width:100%; height:100%; object-fit:cover; border-radius:1px; }
.viewer-thumb:hover, .viewer-thumb:focus-visible, .viewer-thumb[aria-current="true"] { opacity:1; }
.viewer-thumb[aria-current="true"] { border-color:rgba(247,243,237,.8); }
.viewer-thumb:focus-visible { outline:2px solid #f7f3ed; outline-offset:1px; }
.viewer-control { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; padding:0; border:1px solid rgba(247,243,237,.24); border-radius:50%; background:rgba(23,23,20,.6); color:inherit; cursor:pointer; transition:background 180ms ease,border-color 180ms ease; }
.viewer-control svg { width:20px; height:20px; pointer-events:none; }
.viewer-control:hover { background:rgba(247,243,237,.12); border-color:rgba(247,243,237,.6); }
.viewer-control:focus-visible { outline:2px solid #f7f3ed; outline-offset:4px; }
.viewer-control[hidden] { display:none; }
.viewer-stage { position:relative; min-width:0; min-height:0; touch-action:pan-y pinch-zoom; }
.viewer-picture { width:100%; height:100%; }
.viewer-image { display:block; width:100%; height:100%; object-fit:contain; background:transparent; }
.viewer-prev, .viewer-next { position:absolute; top:50%; z-index:1; transform:translateY(-50%); }
.viewer-prev { left:0; }
.viewer-next { right:0; }
.viewer-caption { margin:0; text-align:center; color:rgba(247,243,237,.8); font:400 14px/24px var(--sans); }
.viewer-status { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:calc(100% - 120px); margin:0; padding:10px 16px; border-radius:4px; background:rgba(23,23,20,.86); text-align:center; font:400 14px/1.5 var(--sans); pointer-events:none; }
.viewer-status:empty { display:none; }
.viewer-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media(max-width:700px) {
  .viewer-shell { gap:10px; padding-top:max(12px,env(safe-area-inset-top)); padding-inline:12px; padding-bottom:max(16px,env(safe-area-inset-bottom)); }
  .viewer-has-thumbnails .viewer-shell { grid-template-rows:44px minmax(0,1fr) auto 54px; }
  .viewer-thumb { width:68px; height:48px; }
  .viewer-prev { left:0; }
  .viewer-next { right:0; }
}
@media(prefers-reduced-motion:reduce) { .viewer-control, .viewer-thumb { transition:none; } }

.viewer-study .viewer-caption { width:100%; max-width:720px; margin-inline:auto; }
.viewer-image-title { margin:0 0 6px; color:#f7f3ed; font:400 clamp(24px,2.1vw,30px)/1.15 var(--serif); letter-spacing:-.02em; }
.viewer-image-description { margin:0; font:400 16px/1.45 var(--sans); }
.viewer-image-note { margin:5px 0 0; color:rgba(247,243,237,.55); font:400 14px/1.4 var(--sans); }
.viewer-image-note:empty { display:none; }