/* The enhanced still remains underneath the progressively loaded film. */
.integration-visual[data-flow-media]{position:relative;width:100%;max-width:40rem;justify-self:center}
.flow-media-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:transparent;mix-blend-mode:screen;
  /* Fade the whole image/video group, preserving detail around the junction. */
  --flow-edge-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 56%,rgba(0,0,0,.96) 64%,rgba(0,0,0,.66) 79%,rgba(0,0,0,.2) 92%,transparent 100%);
  -webkit-mask-image:var(--flow-edge-mask);mask-image:var(--flow-edge-mask)}
.integration-visual .flow-media-frame img{display:block;width:100%;height:100%;object-fit:contain;mask-image:none}
.flow-media-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .35s ease}
.media-has-frame .flow-media-frame video{opacity:1}
.flow-media-toggle{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;margin:.75rem auto 0;padding:.5rem .8rem;border:1px solid var(--nf-line);border-radius:var(--radius-sm);background:transparent;color:var(--nf-text);font:inherit;font-size:var(--fs-xs);cursor:pointer}
.flow-media-toggle[hidden]{display:none}
.flow-media-toggle:hover:not(:disabled){border-color:var(--nf-accent);color:var(--nf-heading)}
.flow-media-toggle:focus-visible{outline:2px solid var(--nf-accent);outline-offset:4px}
.flow-media-toggle:disabled{cursor:default;color:var(--nf-muted)}
.flow-media-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.flow-media-toggle .media-play-icon{display:none}
.flow-media-toggle[data-paused="true"] .media-play-icon{display:block}
.flow-media-toggle[data-paused="true"] .media-pause-icon{display:none}
@media(prefers-reduced-motion:reduce){.flow-media-frame video{display:none;transition:none}}