/* Unfocused blur media (see part.js). The box sizes the effect: give .ubm a width and a height (or aspect-ratio).
   Its <img>/<video> fills it with object-fit from the fit knob; once WebGL draws, the canvas covers it and the media
   goes transparent (kept in the DOM so a video keeps decoding). No WebGL: the plain media shows. */
.ubm { position: relative; overflow: hidden; isolation: isolate; }
.ubm > .ubm__media, .ubm > img, .ubm > video {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: var(--ubm-fit, cover);
}
.ubm > .ubm__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; }
.ubm.is-live > .ubm__media { opacity: 0; }