.mosaic-media { position: relative; }
.mosaic-media > img, .mosaic-media > video { pointer-events: none; }
.mosaic-open { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: white; cursor: zoom-in; }
.mosaic-open svg { position: absolute; top: 8px; right: 8px; box-sizing: content-box; padding: 5px; background: #171c1980; opacity: 0; transition: opacity .15s; }
.mosaic-open:hover svg, .mosaic-open:focus-visible svg { opacity: 1; }
.mosaic-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (hover: none) { .mosaic-open svg { opacity: 1; } }

#highlight-viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; border: 0; padding: 16px 24px; padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); background: #111612f5; color: #f5f3ec; overflow: auto; overscroll-behavior: contain; }
#highlight-viewer[open] { display: flex; align-items: center; justify-content: center; }
#highlight-viewer::backdrop { background: #111612; }
.highlight-viewer-panel { width: min(1280px, 100%); height: 100%; max-height: 1000px; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
#highlight-viewer-close { display: grid; place-items: center; align-self: flex-end; flex: 0 0 44px; width: 44px; height: 44px; border: 0; padding: 10px; color: inherit; background: transparent; cursor: pointer; }
#highlight-viewer-close:hover { background: #ffffff14; }
#highlight-viewer-close:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
.highlight-viewer-panel figure { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; gap: 14px; }
#highlight-viewer-media { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; }
#highlight-viewer-media > img, #highlight-viewer-media > video { display: block; width: 100%; height: 100%; object-fit: contain; }
#highlight-viewer-caption { flex: 0 0 auto; max-width: 800px; align-self: center; color: #c6cbc4; font-size: 14px; line-height: 1.6; text-align: center; overflow-wrap: anywhere; }
#highlight-viewer-caption a { display: inline-block; padding-block: 4px; color: #f5f3ec; text-decoration: underline; text-underline-offset: 3px; }
#highlight-viewer-caption a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 600px) { #highlight-viewer { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); } }
@media (prefers-reduced-motion: reduce) { .mosaic-open svg { transition: none; } }