/* Stable frames and a shared transition for both image viewers. */
:root{--viewer-height:clamp(280px,65svh,760px)}
.viewer-stage{position:relative;display:grid;place-items:center;width:100%;height:var(--viewer-height);min-height:0;padding:0;overflow:hidden;isolation:isolate;border:1px solid #ffffff15;border-radius:var(--button-radius);background:#10110e;overflow-anchor:none}
.viewer-stage .viewer-media{position:relative;flex:none;min-height:0;max-height:none;max-width:100%;margin:0;border-radius:0;aspect-ratio:auto}
.viewer-initial>.viewer-media{visibility:hidden}
.viewer-stage #detail-image{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.viewer-stage .comparison-image{object-fit:contain;object-position:center}
.viewer-outgoing{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:#10110e;pointer-events:none;overflow:hidden}
.viewer-outgoing .viewer-media{max-width:100%;max-height:100%;pointer-events:none}
.viewer-transitioning .detail-hover-hint{opacity:0}
/* Fixed information panels reserve room without clipping long project content. */
.detail-toolbar{align-items:flex-start}
.project-view-info{height:160px;min-height:160px;min-width:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#595d50 transparent;scrollbar-gutter:stable;overscroll-behavior:contain;padding-right:12px}
.detail-file.project-view-info{display:block;flex:1}
.project-view-info h3,#image-title{font-size:1.1875rem;font-weight:700;line-height:1.4;white-space:normal;overflow:visible;overflow-wrap:anywhere;margin:0}
.project-view-info p,#image-description{font-size:1rem;line-height:1.6;color:var(--muted);white-space:pre-wrap;overflow:visible;overflow-wrap:anywhere;margin:12px 0 0}
.project-view-info p:empty{display:none}
.comparison-caption{height:auto;min-height:0;padding:20px 0;overflow:visible;align-items:flex-start;overflow-anchor:none}
.comparison-caption .project-view-info{flex:1}
.detail-caption{height:auto;min-height:68px;overflow:visible;overflow-anchor:none}
.detail-caption>span{white-space:normal}
.comparison-stage,.comparison-stage>.comparison-view{overflow:visible}
.comparison-stage .comparison-handle{z-index:3}
/* Loading announcements stay accessible without shifting the artwork. */
#detail-status,#comparison-status{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap!important}
@media(max-width:720px){:root{--viewer-height:clamp(260px,58svh,580px)}.project-view-info{height:180px;min-height:180px}.detail-caption>span{max-width:100%}.detail-file{width:100%;flex:none}.viewer-stage{min-height:0}}
@media(prefers-reduced-motion:reduce){.viewer-outgoing{display:none}}

.zoom-control{width:230px;max-width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:var(--button-radius);background:#11120f80}
.zoom-control-heading,.zoom-scale{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.875rem;line-height:1.4}
.zoom-control-heading output{font-variant-numeric:tabular-nums;color:var(--cream);min-width:4ch;text-align:right}
.zoom-scale{color:var(--muted)}
#zoom-range{--zoom-fill:33.333%;display:block;appearance:none;-webkit-appearance:none;width:100%;height:32px;margin:8px 0 0;background:transparent;cursor:ew-resize;touch-action:pan-y}
#zoom-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--orange) var(--zoom-fill),#ffffff30 var(--zoom-fill))}
#zoom-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:6px;background:var(--cream);border:1px solid #ffffff70}
#zoom-range::-moz-range-track{height:4px;border-radius:2px;background:#ffffff30}
#zoom-range::-moz-range-progress{height:4px;background:var(--orange)}
#zoom-range::-moz-range-thumb{width:16px;height:16px;border-radius:6px;background:var(--cream);border:1px solid #ffffff70}
#zoom-range:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:var(--button-radius)}
@media(max-width:720px){.detail-file.project-view-info{flex:none;width:100%}.zoom-control{width:min(100%,320px)}}
.comparison-stage .comparison-handle{pointer-events:auto;touch-action:pan-y;cursor:ew-resize}
.project-view-info:focus-visible{outline:1px solid var(--orange);outline-offset:3px;border-radius:var(--button-radius)}