/* A small framed screen makes video content recognisable before a tap. */
.video-preview.hotspot{width:164px;min-height:118px;border:1px solid #fcfcfcad;border-radius:13px;background:linear-gradient(135deg,#424242e8,#262626de);padding:4px;box-shadow:0 5px 22px #0f0f0f4d,inset 0 1px 0 #ffffff36;backdrop-filter:blur(16px);color:#fcfcfc;z-index:3;overflow:visible}
.video-preview-screen{display:block;position:relative;width:100%;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:linear-gradient(145deg,#646464,#2b2b2b);isolation:isolate}
.video-preview-screen img{display:block;width:100%;height:100%;object-fit:cover}
.video-preview-screen::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,#12121255);pointer-events:none}
.preview-unavailable::before{content:'';position:absolute;inset:22% 25%;border:1px solid #eaeaea88;border-radius:5px;box-shadow:0 7px 0 -6px #eaeaea88}
.video-preview-play{display:grid;place-items:center;position:absolute;left:50%;top:50%;translate:-50% -50%;width:34px;height:34px;background:#292929e0;border:1px solid #ffffffe0;border-radius:50%;box-shadow:0 3px 9px #0003;z-index:1;transition:transform .2s ease,background .2s ease}
.video-preview-play .ui-icon{width:16px;height:16px;fill:currentColor;stroke-width:1;translate:1px 0}
.video-preview-caption{display:block;padding:6px 4px 3px;font-size:12px;font-weight:400;line-height:1.2;text-align:center}
.video-preview-number{position:absolute;right:9px;top:9px;border:1px solid #ffffff40;border-radius:5px;background:#212121dd;padding:3px 5px;font-size:10px;line-height:1.2;color:#fff;z-index:2}
.video-preview:hover .video-preview-play,.video-preview:focus-visible .video-preview-play{transform:scale(1.1);background:#3d3d3de8}
.video-preview:focus-visible{outline:3px solid #e4e4e4;outline-offset:4px}
.video-preview.arriving .video-preview-screen{animation:video-screen-in .45s cubic-bezier(.2,.75,.25,1) both}
@keyframes video-screen-in{from{opacity:0;scale:.95}to{opacity:1;scale:1}}
.scene-videos{padding:4px 10px 4px 4px;min-height:44px;border-radius:10px;gap:8px}
.scene-videos .video-preview-screen{width:52px;flex:none;border-radius:6px}
.scene-videos .video-preview-play{width:22px;height:22px}
.scene-videos .video-preview-play .ui-icon{width:11px;height:11px}
.scene-videos .ui-label{display:block;font-size:12px;line-height:1.25}
.scene-video-caption{display:flex;gap:12px;align-items:center;justify-content:space-between;flex:none;min-height:34px;padding:0 8px}
.scene-video-caption p{margin:0;color:#eaeaea;font-size:14px;line-height:1.4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scene-video-caption .video-position{white-space:nowrap;font-size:12px;color:#d4d4d4}
.video-navigation .next-video-preview{width:52px;display:block;flex:none}
.video-navigation .next-video-preview .video-preview-play{width:20px;height:20px}
.video-navigation .next-video-preview .ui-icon{width:10px;height:10px}
@media(max-width:700px){
 .video-preview.hotspot{width:130px;min-height:97px;border-radius:11px;padding:3px}
 .video-preview-caption{font-size:11px;padding:5px 3px 3px}
 .video-preview-play{width:30px;height:30px}
 .scene-videos{width:auto;min-width:76px;max-width:98px;gap:5px;padding:4px 6px 4px 4px}
 .scene-videos .video-preview-screen{width:30px;aspect-ratio:1;border-radius:5px}
 .scene-videos .ui-label{display:block!important;font-size:10px;white-space:normal;text-align:left}
 .scene-video-caption{gap:8px;padding:0 4px}.scene-video-caption p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.video-preview.arriving .video-preview-screen{animation:none}.video-preview-play{transition:none}}