@property --ratio{syntax:"<number>";inherits:false;initial-value:1}@property --rot{syntax:"<angle>";inherits:false;initial-value:0deg}@property --squash{syntax:"<number>";inherits:false;initial-value:1}@property --state{syntax:"<number>";inherits:false;initial-value:0}@property --swap{syntax:"<number>";inherits:false;initial-value:0}#pipTransition{z-index:90;position:fixed;mix-blend-mode:lighten;background-color:#fff;color:#000;inset:0;contain:strict;pointer-events:none}#pipTransition .shape svg{display:none}#pipTransition .shape svg.current{display:block;position:fixed;top:50%;left:50%;--side:max(100dvw,100dvh);width:var(--side);height:var(--side);--ratio:tan(atan2(100dvh,100dvw));--pip:calc(0.15 * min(1, var(--ratio)));--fit-x:min(1,calc(1 / var(--ratio)));--fit-y:min(1,var(--ratio));--cover-x:calc(1.01 * ((1 - var(--swap)) * var(--fit-x) + var(--swap) * var(--fit-y)));--cover-y:calc(1.01 * ((1 - var(--swap)) * var(--fit-y) + var(--swap) * var(--fit-x)));--scale-x:calc(var(--squash) * (var(--pip) + (var(--cover-x) - var(--pip)) * var(--state)));--scale-y:calc(var(--squash) * (var(--pip) + (var(--cover-y) - var(--pip)) * var(--state)));transform:translate(-50%,-50%) rotate(var(--rot)) scale(var(--scale-x),var(--scale-y));transform-origin:center center;overflow:visible;contain:size layout style;will-change:transform;--state:1;--rot:90deg;--swap:1}