/* Film stays inside the existing project preview and dialog. */
.remeda-preview .preview-footer>button,.cleave-preview .preview-footer>button{display:inline-flex;align-items:center;gap:7px}
.film-play-icon{width:15px;height:15px;flex:0 0 15px;stroke-width:1.4}
.film-play-icon path{fill:currentColor;stroke:none}
.project-dialog.has-project-film .dialog-toolbar{flex-wrap:wrap}
.project-dialog.has-project-film .open-website{margin-left:auto}
.project-dialog.showing-video{height:fit-content}
.video-panel{position:relative;display:flex;flex:1;min-height:0;align-items:center;justify-content:center;background:#090e17;overflow:hidden}
.showing-video .video-panel{flex:0 1 auto;height:min(652px,calc((100vw - 66px)*.5625),calc(100dvh - 185px))}
.video-panel video{display:block;width:100%;height:100%;min-height:0;object-fit:contain;background:#090e17;color-scheme:dark}
.video-panel video:focus-visible{outline-offset:-4px}
.video-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:28px;background:#101b2a;color:#d9e7f7;text-align:center;font-size:16px}
.video-error a{color:#a5d8ff;text-decoration:underline}
@media(max-width:880px){.showing-video .video-panel{height:min(calc((100vw - 36px)*.5625),calc(100dvh - 185px))}}
@media(max-width:600px){.project-dialog.has-project-film .dialog-tabs button{font-size:12px;padding:6px 9px}.showing-video .video-panel{height:min(calc((100vw - 18px)*.5625),calc(100dvh - 185px))}}

/* The Cleave intro is dark in both themes; center its puzzle piece in the card. */
.cleave-preview .preview-image,:root[data-theme=dark] .cleave-preview .preview-image{background:#0a0c12}
.cleave-preview .preview-image>img{object-position:center}
/* A near-black frame already weighs a lot on white, so its lift is halved in the light theme. */
:root:not([data-theme=dark]) .cleave-preview{--s2:0 1px 2px rgb(19 35 59/.03),0 14px 36px -10px rgb(19 35 59/.09);--s2h:0 1px 2px rgb(19 35 59/.04),0 20px 44px -12px rgb(19 35 59/.13)}