.media-grid-root { height: 100%; color: white; }
body.light-theme .media-grid-root img,
body.light-theme .media-grid-root video { filter: none !important; }
.media-grid-root .image-feed { height: 100dvh; scrollbar-width: none; overscroll-behavior-y: contain; }
.media-grid-root .image-feed::-webkit-scrollbar { display: none; }
.media-grid-root .image-slide { height: 100dvh; min-height: 100dvh; }
.media-grid-root .image-frame { aspect-ratio: 4 / 5; }
.media-grid-root .main-image { transform-origin: center; will-change: transform; }
.media-grid-root .image-slide.is-zoomed .main-image { cursor: grab; touch-action: none; }
.media-grid-root .image-slide.is-zoomed .image-frame { position: fixed !important; inset: 0 !important; z-index: 100; width: 100dvw !important; height: 100dvh !important; max-width: none !important; aspect-ratio: auto; overflow: hidden !important; background: black; }
.media-grid-root .image-slide.is-zoomed .main-image { object-fit: contain !important; }
.media-grid-root .image-slide.is-zoomed .image-caption,
.media-grid-root .image-slide.is-zoomed .image-actions { opacity: 0; pointer-events: none; }
.media-grid-root .image-slide.is-zoomed .zoom-reset-button { display: flex; }
.media-grid-root .action-icon { filter: drop-shadow(0 2px 2px rgb(0 0 0 / .9)) drop-shadow(0 0 7px rgb(0 0 0 / .65)); }
.media-grid-root .action-icon .fa { font-size: 24px; }
.media-grid-root .image-actions button { cursor: pointer; }
.media-grid-root .prompt-text.is-collapsed { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.media-grid-root .prompt-text:not(.is-collapsed) { max-height: 40dvh; overflow-y: auto; }
.media-grid-root .details-drawer { max-height: min(78dvh, 42rem); transform: translateY(105%); transition: transform .25s ease; }
.media-grid-root .details-drawer.is-open { transform: translateY(0); }
body.clear-view .media-grid-root .image-caption,
body.clear-view .media-grid-root .image-actions,
body.clear-view .media-grid-root .media-toggle,
body.clear-view .media-grid-root .feed-navigation { opacity: 0 !important; pointer-events: none !important; }
body.details-open .media-grid-root .image-slide.is-active .image-actions { opacity: 0; pointer-events: none; }
@media (min-width: 640px) {
    .media-grid-root .image-frame { height: 100%; width: auto; max-width: min(100%, 80dvh); }
    .media-grid-root .image-frame .main-image { object-fit: contain; }
    .media-grid-root .image-actions { right: -3.25rem !important; bottom: 1.25rem !important; }
}
@media (min-width: 900px) {
    .media-grid-root .clear-view-button { display: none !important; }
    .media-grid-root .image-frame { max-width: min(100%, 80dvh); }
    .media-grid-root .image-caption { right: calc(100% + 1.25rem) !important; left: auto !important; bottom: 2rem !important; width: min(22rem, calc(50vw - 40dvh - 1.22rem)); padding: 0; background: none !important; }
    .media-grid-root .image-caption > p, .media-grid-root .image-caption > .prompt-wrap { max-width: 100%; }
    .media-grid-root .image-actions > [aria-label] { position: relative; }
    .media-grid-root .image-actions > [aria-label]::after { content: attr(aria-label); position: absolute; left: calc(100% + .65rem); top: 50%; z-index: 30; translate: 0 -50%; width: max-content; max-width: 13rem; border: 1px solid rgb(255 255 255 / .12); border-radius: .5rem; background: rgb(0 0 0 / .82); padding: .35rem .55rem; color: white; font-size: .7rem; font-weight: 600; line-height: 1rem; opacity: 0; pointer-events: none; box-shadow: 0 5px 18px rgb(0 0 0 / .35); backdrop-filter: blur(10px); transition: opacity .15s ease, transform .15s ease; transform: translateX(-.2rem); }
    .media-grid-root .image-actions > [aria-label]:hover::after,
    .media-grid-root .image-actions > [aria-label]:focus-visible::after { opacity: 1; transform: translateX(0); }
    .media-grid-root .details-drawer { inset: 0 0 0 auto; width: clamp(22rem, 32vw, 30rem); max-height: none; border-radius: 1.5rem 0 0 1.5rem; border-top: 0; border-left: 1px solid rgb(255 255 255 / .15); transform: translateX(105%); }
    .media-grid-root .details-drawer.is-open { transform: translateX(0); }
    .media-grid-root .details-drawer > div:first-child { display: none; }
}
@media (max-width: 899px) { .media-grid-root .feed-navigation { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .media-grid-root .image-feed { scroll-behavior: auto; } }