.dumpling-video {
  --dumpling-progress: 0;
  position: relative;
  width: min(48vw, 760px);
  aspect-ratio: 16 / 9;
  overflow: visible;
  isolation: isolate;
}

.dumpling-video-media,
.dumpling-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 42% 46% 38% 44% / 34% 38% 42% 46%;
  mask-image: radial-gradient(ellipse 86% 78% at 50% 50%, #000 66%, transparent 100%);
}

.dumpling-video-media { z-index: 2; opacity: 0; }
.dumpling-video-poster { z-index: 1; opacity: 1; }
.dumpling-video.is-frame-ready .dumpling-video-media { opacity: 1; }
.dumpling-video.is-frame-ready .dumpling-video-poster { opacity: 0; }
.dumpling-video.is-static .dumpling-video-media { display: none; }
.dumpling-video.is-static .dumpling-video-poster { opacity: 1; }

@media (max-width: 1000px) {
  .dumpling-video { width: min(78vw, 680px); }
}

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .dumpling-video { width: min(108vw, 520px); }
  .dumpling-video.is-frame-ready .dumpling-video-media { display: none; }
  .dumpling-video.is-frame-ready .dumpling-video-poster { opacity: 1; }
}