/* Loaded after styles.css. Controls deliberately stay outside the image canvas. */
.detail-image-area[data-viewer-ready]{display:block;overflow:hidden;padding:0;background:#020305}
.viewer-viewport{position:absolute;inset:23px 23px 83px;display:flex;align-items:center;justify-content:center;overflow:hidden;outline-offset:-3px;touch-action:pan-y;cursor:zoom-in;user-select:none;-webkit-user-select:none}
.viewer-viewport:focus-visible{outline:1px solid #d5dfca80}
.viewer-viewport #detailImage{flex:none;max-width:none;max-height:none;object-fit:contain;pointer-events:none;transform-origin:center;transition:transform .2s cubic-bezier(.2,.7,.2,1);user-select:none;-webkit-user-select:none}
.viewer-zoomed .viewer-viewport{touch-action:none;cursor:grab}
.viewer-dragging .viewer-viewport{cursor:grabbing}
.viewer-dragging .viewer-viewport #detailImage{transition:none}
.detail-image-area[data-viewer-ready] .image-fit-note{display:none}
.viewer-toolbar{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:1px;min-height:46px;padding:3px 5px;background:#111820e8;border:1px solid #ffffff29;border-radius:5px;backdrop-filter:blur(12px);box-shadow:0 8px 28px #0005;white-space:nowrap;max-width:calc(100% - 30px);z-index:2}
.viewer-control{height:44px;min-width:44px;flex-shrink:0;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:transparent;border:0;border-radius:2px;color:#d5dfca;font-family:var(--sans,Arial,sans-serif);font-size:11px;transition:background .18s,color .18s}
.viewer-control:hover:not(:disabled){background:#c4d2b817;color:#f1f5e9}
.viewer-control:focus-visible{outline:1px solid #d5dfca;outline-offset:-3px}
.viewer-control:disabled{opacity:.32;cursor:default}
.viewer-zoom{font-size:22px;font-weight:400;padding:0}
.viewer-zoom-value{font-family:var(--sans,Arial,sans-serif);font-size:10px;letter-spacing:.4px;color:#b6c3cf;text-align:center;min-width:42px;font-variant-numeric:tabular-nums}
.viewer-toolbar-divider{width:1px;height:18px;background:#ffffff23;margin:0 7px;flex-shrink:0}
.viewer-fit{font-size:10px;min-width:44px}
.viewer-focus{border-left:1px solid #ffffff18;border-radius:0;padding-left:14px;margin-left:2px}
.viewer-focus svg{height:15px;width:15px;stroke:currentColor;fill:none;stroke-width:1.2}
.viewer-focus[aria-pressed=true]{background:#c4d2b812}
.viewer-hint{position:absolute;bottom:78px;left:20px;right:20px;pointer-events:none;text-align:center;font-size:7px;letter-spacing:1.6px;line-height:1.5;color:#91a094}
.image-dialog.viewer-immersive .dialog-layout{display:block;overflow:hidden}
.image-dialog.viewer-immersive .detail-copy{display:none}
.image-dialog.viewer-immersive .detail-image-area{height:100%;min-height:0}
.image-dialog.viewer-immersive .viewer-viewport{inset:18px 25px 83px}
@media(max-width:700px){
  .viewer-viewport{inset:12px 12px 77px}
  .viewer-toolbar{bottom:11px;padding:2px 4px;max-width:calc(100% - 20px);min-height:46px}
  .viewer-control{height:44px;min-width:44px;font-size:10px;padding:0 8px}
  .viewer-zoom{font-size:22px;padding:0}
  .viewer-focus{padding-left:10px}
  .viewer-toolbar-divider{margin:0 3px}
  .viewer-hint{bottom:65px;font-size:6px;letter-spacing:1.1px}
  .image-dialog.viewer-immersive .viewer-viewport{inset:15px 12px 77px}
}
@media(max-width:360px){.viewer-focus span{display:none}.viewer-focus{padding:0 8px}.viewer-toolbar{gap:0}.viewer-zoom-value{min-width:38px}}
@media(prefers-reduced-motion:reduce){.viewer-viewport #detailImage,.viewer-control{transition:none}}