/* The image's natural aspect ratio is preserved at every zoom level. */
.df-image-lightbox-stage { display: block; overflow: auto; overscroll-behavior: contain; padding: 16px; }
.df-image-lightbox .df-image-lightbox-img { width: auto; height: auto !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain; margin: 0 auto; transform: none !important; transition: opacity 120ms ease; }
.df-image-lightbox-toolbar { flex-wrap: wrap; }
.df-image-lightbox-toolbar [data-lightbox-reset], .df-image-lightbox-toolbar [data-lightbox-original] { width: auto; padding-inline: 10px; font-size: 13px; white-space: nowrap; }
.df-image-lightbox-toolbar button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 25%, transparent); }
:is(.document-prose, .wiki-docs-prose, .df-md-reading, .prose-content) img { cursor: zoom-in; }
:is(.document-prose, .wiki-docs-prose, .df-md-reading, .prose-content) img:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 640px) { .df-image-lightbox-toolbar { gap: 4px; } .df-image-lightbox-toolbar button { width: 30px; } .df-image-lightbox-counter { min-width: 40px; } .df-image-lightbox-stage { padding: 10px; } .df-image-lightbox-toolbar [data-lightbox-reset], .df-image-lightbox-toolbar [data-lightbox-original] { padding-inline: 7px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .df-image-lightbox, .df-image-lightbox-img { transition: none !important; } }