#viewer{width:calc(100vw - 28px);height:calc(100vh - 28px);height:calc(100dvh - 28px);max-width:1600px;max-height:none;margin:auto;padding:0;overflow:hidden;border:1px solid #8c795c;border-radius:8px;background:#101a17;color:#f6eddd;box-shadow:0 20px 100px #0009;font-family:'Rajdhani','Segoe UI',Arial,sans-serif}
#viewer[open]{display:flex;flex-direction:column}#viewer::backdrop{background:#020807e8;backdrop-filter:blur(8px)}#viewer .viewer-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 22px;border-bottom:1px solid #3c4f41}#viewer .viewer-heading{min-width:0}#viewer .viewer-kicker{font-size:9px;letter-spacing:1.9px;color:#d7b68a;margin:0 0 6px}#viewer #view-title{font:400 18px/1.45 'Rajdhani','Segoe UI',Arial,sans-serif;text-align:left;margin:0;outline:none;overflow-wrap:anywhere}#viewer .close{flex-shrink:0;align-self:center;font:400 12px 'Rajdhani','Segoe UI',Arial,sans-serif;padding:11px 16px;min-height:44px;border:1px solid #8c795c;border-radius:4px;background:#24372a;color:#fff0d8;cursor:pointer}#viewer .zoom-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:0;padding:10px 18px;border-bottom:1px solid #3c4f41}#viewer .zoom-controls button{min-width:44px;min-height:44px;padding:10px 14px;border:1px solid #5d735c;border-radius:4px;background:#1d3328;color:#f7edda;font:500 12px 'Rajdhani','Segoe UI',Arial,sans-serif;cursor:pointer}#viewer .zoom-controls button:disabled{opacity:.35;cursor:default}#viewer .zoom-controls #zoom-in,#viewer .zoom-controls #zoom-out{font-size:22px;line-height:1;padding:6px 12px}#viewer .zoom-range-label{display:flex;align-items:center;gap:10px;margin:0;font:400 12px 'Rajdhani','Segoe UI',Arial,sans-serif;color:#d8e1d0}#viewer #zoom-range{width:clamp(110px,13vw,220px);height:44px;padding:0;margin:0;accent-color:#e0b583;cursor:pointer;border:0;min-height:0;background:none}#viewer #zoom-level{min-width:42px;text-align:right;font:500 12px 'Rajdhani','Segoe UI',Arial,sans-serif;font-variant-numeric:tabular-nums}#viewer .image-scroll{position:relative;flex:1;min-height:150px;width:100%;height:auto;overflow:auto;background:#07110e;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom;scroll-behavior:auto;cursor:zoom-in;scrollbar-color:#809070 #101a17}#viewer .image-scroll.can-pan{cursor:grab}#viewer .image-scroll.is-panning{cursor:grabbing}#viewer .viewer-canvas{position:relative;min-width:100%;min-height:100%}#viewer .image-scroll #view-image{position:absolute;display:block;max-width:none;max-height:none;margin:0;object-fit:contain;filter:none;mix-blend-mode:normal;user-select:none;-webkit-user-drag:none;box-shadow:0 3px 24px #0007}#viewer .viewer-footer{padding:11px 20px 13px;background:#101a17;border-top:1px solid #3c4f41}#viewer .viewer-footer-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}#viewer .viewer-gallery{display:flex;align-items:center;gap:12px}#viewer .viewer-gallery[hidden]{display:none}#viewer .viewer-gallery button{min-height:44px;padding:10px 14px;border:1px solid #5d735c;border-radius:4px;background:#1d3328;color:#f7edda;font:400 12px 'Rajdhani','Segoe UI',Arial,sans-serif;cursor:pointer}#viewer .viewer-gallery button:disabled{opacity:.35;cursor:default}#viewer #viewer-count{font-size:11px;color:#d0dcc6;min-width:82px;text-align:center;font-variant-numeric:tabular-nums}#viewer #viewer-source{display:inline-flex;align-items:center;min-height:44px;font-size:12px;color:#f0cea1;border-bottom:1px solid #8c795c;text-decoration:none}#viewer #viewer-status{font-size:10px;line-height:1.6;color:#b8c9ac;text-align:center;margin:9px 0 0}#viewer button:focus-visible,#viewer input:focus-visible,#viewer a:focus-visible,#viewer .image-scroll:focus-visible{outline:3px solid #e0b583;outline-offset:-3px}.detail-trigger{display:block;width:100%;border:0;padding:0;background:transparent;color:inherit;cursor:zoom-in}.detail-trigger img{width:100%;display:block}
@media(max-width:700px){#viewer{width:calc(100vw - 12px);height:calc(100vh - 12px);height:calc(100dvh - 12px);border-radius:5px}#viewer .viewer-header{padding:11px 12px;gap:12px}#viewer #view-title{font-size:14px;line-height:1.4}#viewer .viewer-kicker{font-size:8px;letter-spacing:1.3px}#viewer .close{padding:10px 12px;font-size:11px}#viewer .zoom-controls{padding:8px 10px;gap:8px}#viewer .zoom-controls button{font-size:11px;padding:10px 12px}#viewer .zoom-range-label{flex:1 1 100%;justify-content:center}#viewer #zoom-range{width:min(215px,60vw)}#viewer .viewer-footer{padding:8px 10px 10px}#viewer .viewer-footer-row{justify-content:center;gap:3px 12px}#viewer .viewer-gallery{width:100%;justify-content:space-between;gap:8px}#viewer #viewer-count{font-size:10px;min-width:68px}#viewer .viewer-gallery button{font-size:11px;padding:10px 12px}#viewer #viewer-source{font-size:11px;min-height:38px}#viewer #viewer-status{font-size:9px;margin-top:4px;max-width:320px;margin-inline:auto}}
@media(prefers-reduced-motion:reduce){#viewer::backdrop{backdrop-filter:none}}

/* Keep every control reachable when a phone turns sideways. */
#viewer{overflow:auto}
#viewer .viewer-header,#viewer .zoom-controls,#viewer .viewer-footer{flex:0 0 auto}
#viewer .image-scroll{min-height:80px;flex:1 1 auto}
@media(max-height:560px){
 #viewer .viewer-header{padding:7px 12px;gap:12px}
 #viewer .viewer-kicker{display:none}
 #viewer #view-title{font-size:13px;line-height:1.35}
 #viewer .zoom-controls{padding:6px 10px;gap:6px}
 #viewer .zoom-range-label{flex:0 1 auto;gap:6px}
 #viewer #zoom-range{width:110px}
 #viewer .viewer-footer{padding:5px 10px}
 #viewer .viewer-footer-row{justify-content:center;gap:6px 14px}
 #viewer .viewer-gallery{width:auto;gap:8px}
 #viewer #viewer-status{font-size:9px;line-height:1.35;margin:3px auto 0;max-width:none}
}