.m3d{width:100%;height:100%;position:relative}.m3d-posters{position:absolute;top:0;bottom:0;left:0;right:0;overflow:clip;container-type:size}.m3d-poster{--aspect:tan(atan2(100cqw,100cqh));--tall:clamp(0,(1.2 - var(--aspect))/.5,1);--bottom:calc(var(--wide-bottom) + (var(--tall-bottom) - var(--wide-bottom))*var(--tall));--top:calc(var(--wide-top) + (var(--tall-top) - var(--wide-top))*var(--tall));--span:calc(var(--wide-width) + (var(--tall-width) - var(--wide-width))*var(--tall));--x:calc(var(--wide-x) + (var(--tall-x) - var(--wide-x))*var(--tall));--unit:min(calc(100cqh/(var(--top) - var(--bottom))),calc(100cqw/var(--span)));bottom:calc(50cqh + (-.2 - (var(--top) + var(--bottom))/2)*var(--unit));left:calc(50cqw + (-1.4 - var(--x))*var(--unit));width:calc(2.8*var(--unit));max-width:none;height:calc(2.8*var(--unit));opacity:0;transition:opacity .3s;position:absolute}.m3d-poster[data-on=true]{opacity:1}.m3d[data-ready=true] .m3d-poster{opacity:0}.m3d-canvas{opacity:0;pointer-events:none;width:132%;height:116%;transition:opacity .35s;position:absolute;top:-16%;left:-16%}.m3d[data-ready=true] .m3d-canvas{opacity:1}@media (prefers-reduced-motion:reduce){.m3d-poster,.m3d-canvas{transition:none}}