/* A stable widescreen stage: source pixel dimensions never become display heights. */
.media-gallery{max-width:100%;min-width:0}
.media-screen{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#080910;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 35px #0002}
.media-screen>video,.media-screen>.media-photo,.media-photo>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;border-radius:0;object-fit:contain}
.media-screen [hidden]{display:none!important}
.media-photo{touch-action:pan-y pinch-zoom;cursor:zoom-in}
.media-photo:focus-visible{outline-offset:-4px;z-index:1}
.media-expand{position:absolute;inset-inline-end:12px;bottom:12px;display:grid;place-items:center;width:34px;height:34px;background:#080910c9;border:1px solid #ffffff60;border-radius:7px;color:white;font-size:24px;pointer-events:none}
.media-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 2px 10px;font-size:.72rem;color:var(--muted)}
.media-meta p{margin:0;font-size:inherit;line-height:1.5}
.media-meta>span{flex-shrink:0;color:var(--gold);font-variant-numeric:tabular-nums}
.media-browser{display:flex;align-items:stretch;gap:8px;min-width:0}
.media-thumbnails{display:flex;flex:1;min-width:0;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--gold) var(--surface);padding:4px 3px 10px}
.media-thumb{position:relative;display:block;flex:0 0 clamp(96px,14vw,132px);aspect-ratio:16/9;align-self:flex-start;padding:0;overflow:hidden;border:2px solid transparent;border-radius:7px;background:#080910;scroll-snap-align:start;opacity:.68;transition:opacity .18s,border-color .18s,box-shadow .18s}
.media-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.media-thumb:hover,.media-thumb:focus-visible{opacity:1}
.media-thumb[aria-pressed=true]{border-color:var(--gold);opacity:1;box-shadow:0 0 0 1px var(--gold),0 0 16px #caa67725}
.media-thumb:focus-visible{outline-offset:1px}
.media-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:24px;background:#0004;text-shadow:0 2px 10px #000}
.media-thumb-number{position:absolute;inset-inline-end:4px;bottom:4px;min-width:17px;padding:1px 4px;border-radius:3px;background:#080910b8;color:#fff;font-size:.55rem;line-height:1.4}
.media-arrow{display:grid;place-items:center;flex:0 0 34px;align-self:stretch;margin:4px 0 10px;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text);font-size:28px;line-height:1;transition:background .18s,color .18s}
.media-arrow:hover:enabled{background:var(--surface-2);color:var(--gold)}
.media-arrow:disabled{opacity:.3;cursor:default}
[dir=rtl] .media-arrow span{transform:rotate(180deg)}
.media-help{font-size:.68rem;margin:6px 0 18px}
.media-credits{border-top:1px solid var(--line);padding-top:12px;font-size:.7rem;color:var(--muted)}
.media-credits summary{cursor:pointer;width:fit-content;color:var(--muted)}
.media-credits summary:hover{color:var(--gold)}
.media-credits[open] summary{margin-bottom:14px}
@media(max-width:520px){.media-screen{border-radius:8px}.media-browser{gap:6px}.media-thumbnails{gap:8px}.media-arrow{flex-basis:30px}.media-meta{font-size:.66rem}.media-expand{width:28px;height:28px;font-size:21px;bottom:8px;inset-inline-end:8px}}
@media(prefers-reduced-motion:reduce){.media-thumb,.media-arrow{transition:none}}