.media-frame { position: relative; isolation: isolate; }
.media-image { display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; background: none; cursor: zoom-in; }
.media-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; background: none; cursor: pointer; color: #f8edd9; display: grid; place-items: center; }
.media-play > span { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid #e3d0a766; border-radius: 50%; background: #080a0cbb; padding-left: 4px; font: 25px/1 Arial, sans-serif; box-shadow: 0 2px 16px #0006; }
.playing .media-play > span { opacity: 0; }
.playing .media-play:focus-visible > span { opacity: 1; }
.media-tools { position: absolute; z-index: 2; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.media-button { display: grid; place-items: center; position: relative; width: 44px; height: 44px; padding: 0; border: 1px solid #e3d0a747; border-radius: 50%; background: #080a0cbf; color: #f1e5cf; cursor: pointer; font: 28px/1 Arial, sans-serif; }
.media-button[hidden] { display: none; }
.media-button:hover { background: #24211dee; border-color: #e3d0a7aa; }
.media-sound > span { width: 19px; height: 20px; background: currentColor; clip-path: polygon(0 32%, 28% 32%, 66% 0, 66% 100%, 28% 68%, 0 68%); }
.media-sound::after { content: ""; position: absolute; left: 24px; top: 14px; width: 7px; height: 13px; border-right: 2px solid; border-radius: 50%; }
.media-sound.muted::after { left: 20px; top: 9px; width: 2px; height: 25px; border: 0; border-radius: 0; background: currentColor; transform: rotate(-40deg); box-shadow: 0 0 0 2px #080a0c; }
.gallery button:focus-visible, .media-viewer button:focus-visible { outline: 2px solid #f0d69e; outline-offset: 3px; }
.media-viewer-open { overflow: hidden; }
.media-viewer { position: fixed; inset: 0; margin: 0; border: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; padding: calc(60px + env(safe-area-inset-top)) env(safe-area-inset-right) max(12px, env(safe-area-inset-bottom)) env(safe-area-inset-left); background: #080a0cf5; color: #f1e5cf; overflow: hidden; }
.media-viewer::backdrop { background: #080a0c; }
.media-viewer-stage { width: 100%; height: 100%; overflow: auto; display: flex; touch-action: pan-x pan-y pinch-zoom; }
.viewer-image { display: block; margin: auto; flex-shrink: 0; max-width: none; object-fit: contain; }
.viewer-close, .viewer-zoom { position: absolute; z-index: 4; top: calc(8px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); }
.viewer-zoom { right: calc(64px + env(safe-area-inset-right)); }
.media-viewer .media-frame { width: 100%; height: 100%; padding-bottom: 54px; }
.media-viewer video { display: block; width: 100%; height: 100%; object-fit: contain; }
.media-viewer .media-play { bottom: 54px; height: calc(100% - 54px); }
.media-viewer .media-tools { bottom: 0; right: 12px; }
.media-viewer .media-play, .media-viewer video { border-radius: 0; }
.media-viewer.showing-video { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.media-viewer.showing-video .media-frame { padding-bottom: 0; }
.media-viewer.showing-video .media-play { bottom: 0; height: 100%; }
.media-viewer.showing-video .media-tools { bottom: 8px; }