/* The native modal retains focus trapping and original artwork proportions. */
.media-dialog .viewer-images{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;overflow:hidden;isolation:isolate}
.media-dialog .viewer-images>img{grid-area:1/1;min-width:0;width:100%;height:auto;object-fit:contain}
.viewer-controls{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:18px}
.viewer-nav{width:44px;height:44px;display:grid;place-items:center;border:1px solid #fff5;border-radius:50%;color:white;font-size:24px;line-height:1}
.viewer-nav:hover{background:var(--accent);border-color:var(--accent)}
.viewer-count{min-width:60px;text-align:center;color:#ddd;font-size:14px;font-variant-numeric:tabular-nums}
.media-dialog[data-state="opening"]::backdrop{animation:viewerBackdropIn .3s ease both}
.media-dialog[data-state="closing"]::backdrop{animation:viewerBackdropOut .3s ease both}
@keyframes viewerBackdropIn{from{opacity:var(--viewer-backdrop-from,0)}to{opacity:1}}
@keyframes viewerBackdropOut{from{opacity:var(--viewer-backdrop-from,1)}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.media-dialog::backdrop{animation:none!important}}