.animation-viewer{
 position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;
 margin:0;padding:0;border:0;border-radius:0;outline:none;background:transparent;
 color:var(--ink);box-shadow:none;overflow:hidden;
}
.animation-viewer[open]{display:grid;place-items:center}
.animation-viewer::backdrop{background:transparent;backdrop-filter:none}
.animation-viewer>.category-card{width:84vw;max-width:none;margin:0;background:transparent;border:0;box-shadow:none}
.animation-viewer .category-visual{height:76vh;height:76svh;width:100%;aspect-ratio:auto;background:transparent;border:0;box-shadow:none;cursor:default}
.animation-viewer .category-visual canvas,.animation-viewer .category-visual video,.animation-viewer .category-poster{object-fit:contain;background:transparent;mask-image:none}
.animation-viewer .category-caption{border:0;padding:8px 0 0;justify-content:center;text-align:center}
.animation-viewer .category-caption>div{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.animation-viewer .category-caption h3{font-size:16px;color:var(--ink)}
.animation-viewer .category-caption small,.animation-viewer .category-number{display:none}
.animation-viewer .category-actions{margin:0}
.animation-viewer .category-actions button{border:0;background:transparent;font-size:12px;min-width:48px;min-height:44px;padding:8px 12px}
.animation-viewer .category-actions button:hover{color:var(--accent)}
.animation-viewer-close{position:absolute;z-index:3;top:max(14px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));width:48px;height:48px;padding:0;border:0;background:transparent;color:var(--ink);font:300 36px/1 Arial,sans-serif;cursor:pointer}
.animation-viewer-close:hover{color:var(--accent)}
.animation-viewer-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.category-visual[aria-haspopup=dialog]{cursor:zoom-in}
.animation-viewer .category-visual[aria-haspopup=dialog]{cursor:default}
@media(max-width:680px){
 .animation-viewer>.category-card{width:94vw}
 .animation-viewer .category-visual{height:72svh}
 .animation-viewer .category-caption>div{gap:3px 14px}
 .animation-viewer .category-caption h3{font-size:14px}
}
@media(max-height:460px){.animation-viewer .category-visual{height:72svh}.animation-viewer .category-caption{padding:0}}

/* The page stays fully visible. All non-control clicks dismiss the floating view. */
.animation-viewer>.category-card{pointer-events:none}
.animation-viewer .category-actions button,.animation-viewer-close{pointer-events:auto}

/* Fit the complete display's visible content, instead of its empty render border. */
.animation-viewer[data-fit-display]{box-sizing:border-box;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.animation-viewer[data-fit-display]>.category-card{position:relative;width:100%;height:100%;min-height:0}
.animation-viewer[data-fit-display] .category-visual{width:100%;height:calc(100% - 52px);overflow:hidden}
.animation-viewer[data-fit-display] .category-visual>video,.animation-viewer[data-fit-display] .category-poster{
 inset:auto;left:var(--display-media-left);top:var(--display-media-top);
 width:var(--display-media-width);height:var(--display-media-height);max-width:none;max-height:none;object-fit:fill;
}
.animation-viewer[data-fit-display] .category-caption{height:52px;box-sizing:border-box;padding:8px 0 0;align-items:center}
.animation-viewer[data-fit-display] .category-caption>div{gap:12px;flex-wrap:nowrap}
.animation-viewer[data-fit-display] .category-caption h3{font-size:14px}
.animation-viewer[data-fit-display] .category-actions{flex-shrink:0}