.systems-window>[data-ui]{transform-origin:50% 100%}.systems-window .ui-fill{transform-origin:0}.systems-column{transform-origin:50% 100%}.systems-live:after{content:"";border-radius:inherit;background-color:inherit;position:absolute;inset:0}@keyframes systems-live{0%{opacity:.55;scale:1}70%,to{opacity:0;scale:2.75}}@media screen and (prefers-reduced-motion:no-preference){.systems-live:after{animation:systems-live 2.4s var(--ease-out) infinite}.js .systems-window[data-reveal=pending]>[data-ui]{opacity:0;transform:perspective(1600px)translateY(2rem)rotateX(8deg)}.js .systems-window[data-reveal=pending] .ui-fill{scale:0 1}.js .systems-window[data-reveal=pending] .systems-column{scale:1 0}.systems-window[data-reveal=shown]>[data-ui]{transition:opacity .4s var(--ease-out), transform .5s var(--ease-expo)}.systems-window[data-reveal=shown] .ui-fill,.systems-window[data-reveal=shown] .systems-column{transition:scale .45s var(--ease-expo);transition-delay:calc(.15s + var(--i,0) * 40ms)}.systems-window[data-reveal=shown] .ui-bars>li:nth-child(2) .ui-fill{--i:1}.systems-window[data-reveal=shown] .ui-bars>li:nth-child(3) .ui-fill{--i:2}.systems-window[data-reveal=shown] .ui-bars>li:nth-child(4) .ui-fill{--i:3}}