.image-preview{cursor:zoom-in;object-fit:cover;max-width:100%;height:auto;transition:transform .2s,box-shadow .2s}.image-preview:hover{transform:scale(1.05);box-shadow:0 4px 12px #00000026}.image-zoom-overlay{--zoom-pad:.75rem;--zoom-safe-top:env(safe-area-inset-top,0px);--zoom-safe-bottom:env(safe-area-inset-bottom,0px);--zoom-safe-side:max(env(safe-area-inset-left,0px), env(safe-area-inset-right,0px));--zoom-chrome:3.5rem;z-index:9999;touch-action:none;overscroll-behavior:contain;user-select:none;background:#000000f2;outline:none;animation:.2s fadeIn;position:fixed;inset:0}.image-zoom-viewport{padding-block:calc(var(--zoom-safe-top) + var(--zoom-pad) + var(--zoom-chrome)) calc(var(--zoom-safe-bottom) + var(--zoom-pad) + var(--zoom-chrome));padding-inline:calc(var(--zoom-safe-side) + var(--zoom-pad));touch-action:none;cursor:zoom-out;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.image-zoom-viewport.zoomed{cursor:grab}.image-zoom-viewport.dragging{cursor:grabbing}.image-zoom-img{object-fit:contain;border-radius:var(--radius);cursor:default;transform-origin:50%;-webkit-user-drag:none;max-width:100%;max-height:100%;display:block;box-shadow:0 8px 32px #00000080}.image-zoom-controls{inset-block-end:calc(var(--zoom-safe-bottom) + var(--zoom-pad));inset-inline:calc(var(--zoom-safe-side) + var(--zoom-pad));backdrop-filter:blur(10px);z-index:2;background:#000c;border-radius:2rem;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;width:fit-content;max-width:100%;margin-inline:auto;padding:.5rem;animation:.3s slideUp;display:flex;position:absolute}.image-zoom-controls button{color:#fff;background:#ffffff1a;border:1px solid #fff3;border-radius:50%;flex:none;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;margin:0;font-size:1.25rem;font-weight:700;transition:background-color .2s,border-color .2s,transform .2s;display:flex;padding:0!important}.image-zoom-controls button:hover:not(:disabled){background:#fff3;border-color:#fff6;transform:scale(1.1)}.image-zoom-controls button:active:not(:disabled){transform:scale(.95)}.image-zoom-controls button:disabled{opacity:.35;cursor:not-allowed}.image-zoom-controls button:before,.image-zoom-controls button:after{display:none}.image-zoom-controls button svg{display:block}.zoom-level-indicator{color:#fff;font-family:var(--font-mono,monospace);text-align:center;min-width:3.75rem;font-size:.875rem;font-weight:500}.image-zoom-close{z-index:3;color:#fff;backdrop-filter:blur(10px);background:#ffffff1f;border:1px solid #ffffff40;border-radius:50%;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;margin:0;font-size:1.75rem;font-weight:300;line-height:1;transition:background-color .2s,border-color .2s,transform .2s;display:flex;position:absolute;inset-block-start:calc(var(--zoom-safe-top) + var(--zoom-pad));inset-inline-end:calc(var(--zoom-safe-side) + var(--zoom-pad));box-shadow:0 4px 12px #00000080;padding:0!important}.image-zoom-close:hover{background:#ffffff40;border-color:#ffffff73;transform:scale(1.1)}.image-zoom-close:active{transform:scale(.95)}.image-zoom-close:before,.image-zoom-close:after{display:none}.image-zoom-help{color:#ffffffb3;text-align:center;backdrop-filter:blur(10px);z-index:2;pointer-events:none;background:#0009;border-radius:1rem;width:fit-content;max-width:100%;margin-inline:auto;padding:.5rem 1rem;font-size:.8125rem;animation:.3s fadeIn;position:absolute;inset-block-start:calc(var(--zoom-safe-top) + var(--zoom-pad));inset-inline-start:calc(var(--zoom-safe-side) + var(--zoom-pad));inset-inline-end:calc(var(--zoom-safe-side) + var(--zoom-pad) + 3.25rem)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@media (width<=480px){.image-zoom-overlay{--zoom-pad:.5rem}.image-zoom-controls{gap:.25rem}.image-zoom-controls button{width:2.5rem;height:2.5rem;font-size:1.1rem}.zoom-level-indicator{min-width:3rem;font-size:.8125rem}.image-zoom-help:not(.is-caption){display:none}}.image-zoom-help.is-caption{color:#fff;font-variant-numeric:tabular-nums}@media (prefers-reduced-motion:reduce){.image-preview{transition:none}.image-preview:hover{transform:none}.image-zoom-overlay,.image-zoom-controls,.image-zoom-help{animation:none}}