@keyframes animatedgradient{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.developer-systems-animation{position:relative;overflow:hidden;container:developer-systems/inline-size}.developer-systems-animation__dot-grid{opacity:.46;background-image:url("data:image/svg+xml;utf8,<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='2' height='2' fill='%23CBD5E1'/></svg>");background-position:0 0;background-size:10px 10px;position:absolute;inset:-60px -8px -80px;-webkit-mask-image:linear-gradient(#d9d9d900,#737373 50%,#d9d9d900);mask-image:linear-gradient(#d9d9d900,#737373 50%,#d9d9d900)}.developer-systems-animation__figure{grid-template-columns:1fr;max-width:1000px;height:530px;margin:auto;display:grid;position:relative}.developer-systems-animation__figure--chart-left{position:absolute;top:52%;left:0}.developer-systems-animation__figure--chart-center{grid-template-rows:88px 75px 266px 100px;display:grid;position:relative}.developer-systems-animation__figure--chart-right{position:absolute;top:68%;right:6%}.developer-systems-animation__send{position:absolute;top:50%;left:50%;transform:translate(-50%,-40%)}.developer-systems-animation__send-center{background:#f0f0f0;border-radius:8px;width:80px;height:80px;position:relative}.developer-systems-animation__send-center svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.developer-systems-animation__animated-border-container{opacity:0;border-radius:4px;place-items:center;transition:opacity .2s linear;display:grid;position:absolute;inset:-1px;overflow:hidden}.developer-systems-animation__animated-border{background:linear-gradient(#ff39db,#7500fb);width:150%;height:150%;animation:1.5s ease-out infinite animatedgradient;position:absolute}.developer-systems-animation__animated-border--rectangle{width:110%;padding-bottom:110%}.developer-systems-animation__animated-border-mask{z-index:1;background:#f0f0f0;border-radius:4px;position:absolute;inset:1px}.developer-systems-animation__apps{background:#f0f0f0;border-radius:4px;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);gap:4px;width:112px;height:76px;padding:4px;display:grid;position:relative}.developer-systems-animation__app{z-index:1;perspective:250px;border:none;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;display:flex;position:relative}.developer-systems-animation__app-logo{width:32px;height:32px;transform-style:preserve-3d;z-index:2;transition-property:transform;transition-duration:2s;transition-timing-function:cubic-bezier(.9,0,.1,1);position:absolute}.developer-systems-animation__app-logo__back,.developer-systems-animation__app-logo__front{backface-visibility:hidden;position:absolute;top:0}.developer-systems-animation__app-logo__back{transform:rotateX(180deg)}.developer-systems-animation__systems{flex-direction:column;gap:8px;width:100%;height:fit-content;margin:0 auto;padding:8px;display:flex;position:relative}.developer-systems-animation__systems-row-1{grid-template-columns:auto auto auto;gap:8px;display:grid}.developer-systems-animation__systems-row-2{grid-template-columns:1fr 1fr;gap:8px;display:grid}.developer-systems-animation__system-container{z-index:1;border:1px dashed #3d4aba;max-height:32px;transition:border-color .5s cubic-bezier(.4,0,.2,1)}.developer-systems-animation__system,.developer-systems-animation__system-container{border-radius:4px;justify-content:center;align-items:center;height:32px;display:flex;position:relative}.developer-systems-animation__system{color:#f2f7fe;opacity:0;z-index:2;background:#4f6ef7;width:100%;padding:0 16px;font-size:12px;font-weight:700;transition-property:opacity,scale;transition-duration:.5s;transition-timing-function:cubic-bezier(.4,0,.2,1);scale:.75;box-shadow:0 14.088px 21.132px -14.088px #03032740,0 8.453px 16.906px -8.453px #0000001a}.developer-systems-animation__system-container--animate{border-color:#0000}.developer-systems-animation__system-container--animate .developer-systems-animation__system{opacity:1;scale:1}.developer-systems-animation__system-container--initial .developer-systems-animation__system{opacity:1;transition-duration:0s;scale:1}.developer-systems-animation__grid-row-layout--top{justify-content:center;display:flex;position:relative}.developer-systems-animation__grid-row-layout--middle{position:absolute;top:52%;right:0}.developer-systems-animation__grid-row-layout--bottom{justify-content:center;align-items:flex-end;display:flex}.developer-systems-animation__grid-row-block--anchor{z-index:1;grid-template-columns:repeat(2,185px);display:inline-grid;position:absolute;bottom:0}.developer-systems-animation__grid-row-block{color:#f2f7fe;background:#4f6ef7;border-radius:4px;align-items:center;width:fit-content;height:32px;margin:auto auto 0;padding:6px 16px;font-size:12px;font-weight:700;display:flex;position:relative}.developer-systems-animation__grid-row-block--middle{margin:0}.developer-systems-animation__psp-container{align-self:flex-end;gap:8px;margin:auto auto 0;display:flex;position:relative}.developer-systems-animation__psp-container--single,:lang(ja-JP) .developer-systems-animation__psp-container--multiple,:lang(pt-BR) .developer-systems-animation__psp-container--multiple,:lang(th-TH) .developer-systems-animation__psp-container--multiple{display:none}.developer-systems-animation__psp-container--single .developer-systems-animation__psp-app{flex-direction:column;width:auto;min-width:192px}:lang(ja-JP) .developer-systems-animation__psp-container--single,:lang(pt-BR) .developer-systems-animation__psp-container--single,:lang(th-TH) .developer-systems-animation__psp-container--single{display:flex}:not(:lang(ja-JP)) .developer-systems-animation__psp-jp,:not(:lang(pt-BR)) .developer-systems-animation__psp-br,:not(:lang(th-TH)) .developer-systems-animation__psp-th{display:none}.developer-systems-animation__psp-app{color:#f2f7fe;z-index:2;opacity:0;background:#4f6ef7;border-radius:4px;justify-content:center;align-items:center;width:40px;height:40px;padding:6px 16px;font-size:12px;font-weight:700;transition-property:opacity,transform;transition-duration:.5s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;transform:scale(.75)}.developer-systems-animation__psp-app-container--initial{opacity:1;transition-duration:0s;transform:scale(1)}.developer-systems-animation__psp-app-container{border:1px dashed #cbd5e1;border-radius:4px;transition-property:border-color;transition-duration:.5s;transition-timing-function:linear}.developer-systems-animation__psp-app-container--animate{border-color:#0000}.developer-systems-animation__psp-app-container--animate:first-child,.developer-systems-animation__psp-app-container--animate:nth-child(2),.developer-systems-animation__psp-app-container--animate:nth-child(3),.developer-systems-animation__psp-app-container--animate:nth-child(4){transition-delay:2.5s}.developer-systems-animation__psp-app-container--animate:nth-child(3){transition-delay:3s}.developer-systems-animation__psp-app-container--animate .developer-systems-animation__psp-app{opacity:1;transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);transform:scale(1)}.developer-systems-animation__psp-app-container--animate:first-child .developer-systems-animation__psp-app,.developer-systems-animation__psp-app-container--animate:nth-child(2) .developer-systems-animation__psp-app,.developer-systems-animation__psp-app-container--animate:nth-child(3) .developer-systems-animation__psp-app,.developer-systems-animation__psp-app-container--animate:nth-child(4) .developer-systems-animation__psp-app{transition-delay:2.5s}.developer-systems-animation__psp-app-container--animate:nth-child(3) .developer-systems-animation__psp-app{transition-delay:3s}.developer-systems-animation__pipeline-app-container{z-index:10;background:#0d1738;border-radius:4px;width:100%;height:100%;position:relative}.developer-systems-animation__psp-app-container--initial .developer-systems-animation__psp-app{opacity:1;transition-duration:0s;transition-delay:0s;transform:scale(1)}.developer-systems-animation__pipeline-logo{border-radius:inherit;width:100%;height:100%;position:absolute;top:0;left:0}.developer-systems-animation__button{padding:6px 16px;display:none}.developer-systems-animation__dynamic-rect-bg{z-index:-1;position:absolute;inset:0}.developer-systems-animation__dynamic-rect-bg svg{width:100%;height:100%}.developer-systems-animation__system-connections-svg{display:none}.developer-systems-animation__system-connections-mobile-svg{z-index:0;pointer-events:none;position:absolute;top:0;left:50%;transform:translate(-50%)}.developer-systems-animation__center-path-svg{display:none}.developer-systems-animation__center-path-mobile-svg{width:100%;display:block;position:absolute;top:54%}.developer-systems-animation__psp-connection-base-animated-stroke-svg,.developer-systems-animation__psp-connection-base-stroke-svg{position:absolute;bottom:0;left:50%;transform:translate(-50%)}.developer-systems-animation__psp-connection-path{stroke-dasharray:120 120;stroke-dashoffset:120px;transition:stroke-dashoffset 1s cubic-bezier(.66,0,.34,1)}.developer-systems-animation__psp-connection-path--active{stroke-dashoffset:0;transition-duration:2s}.developer-systems-animation__psp-connection-path--active:first-child,.developer-systems-animation__psp-connection-path--active:nth-child(4){transition-delay:1.25s;transition-timing-function:cubic-bezier(.78,0,.22,1)}.developer-systems-animation__psp-connection-path--active:nth-child(2),.developer-systems-animation__psp-connection-path--active:nth-child(3){transition-duration:3.25s;transition-delay:1.75s;transition-timing-function:cubic-bezier(.25,1,.5,1)}.developer-systems-animation__psp-connection-path--active:nth-child(3){transition-delay:2.25s}.developer-systems-logo{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.developer-systems-logo__placeholder{background:#1a2555;border-radius:4px;width:100%;height:100%}.developer-systems-logo__svg{border-radius:4px;width:100%;height:100%}.developers-systems-animation-wrapper{width:100%;min-height:530px}.lazy-animation{opacity:0;transition:opacity .5s cubic-bezier(.33,1,.68,1)}.lazy-animation--loaded{opacity:1}@container developer-systems (min-width:600px){.developer-systems-animation__button,.developer-systems-animation__grid-row-block,.developer-systems-animation__psp-app,.developer-systems-animation__system{font-size:14px}.developer-systems-animation__figure{grid-template-columns:1fr;width:fit-content;height:386px;margin:0 auto}.developer-systems-animation__figure--chart-left{top:44%}.developer-systems-animation__figure--chart-center{grid-template-rows:48px 75px 160px auto;max-width:696px}.developer-systems-animation__figure--chart-right{top:68%}.developer-systems-animation__send{transform:translate(-50%,-75%)}.developer-systems-animation__apps{border-radius:8px;gap:8px;width:152px;height:105px;padding:8px}.developer-systems-animation__app,.developer-systems-animation__app-logo,.developer-systems-animation__pipeline-app,.developer-systems-animation__pipeline-app-logo{width:40px;height:40px}.developer-systems-animation__systems{flex-direction:row;height:48px}.developer-systems-animation__systems .developer-systems-animation__dynamic-rect-bg{z-index:0}.developer-systems-animation__grid-row-block--anchor{grid-template-columns:repeat(2,308px)}.developer-systems-animation__grid-row-layout--middle{top:47%}.developer-systems-animation__system-connections-svg{z-index:0;pointer-events:none;display:block;position:absolute;top:0;left:50%;transform:translate(-50%)}.developer-systems-animation__system-connections-mobile-svg{display:none}.developer-systems-animation__center-path-mobile-svg{top:50%}}@container developer-systems (min-width:882px){.developer-systems-animation__figure{grid-template-columns:152px auto 152px}.developer-systems-animation__figure--chart-left{inset:unset;align-items:center;display:flex;position:relative}.developer-systems-animation__figure--chart-center{grid-template-rows:48px 75px 136px 32px auto}.developer-systems-animation__figure--chart-right{inset:unset;justify-content:flex-end;align-items:center;display:flex;position:relative}.developer-systems-animation__grid-row-layout--middle{inset:unset;justify-content:space-between;align-items:center;padding:0 36px;display:flex;position:relative}.developer-systems-animation__button{display:inline-flex}.developer-systems-animation__button.dev-systems-btn{height:32px}.developer-systems-animation__center-path-svg{width:100%;display:block;position:absolute}.developer-systems-animation__center-path-mobile-svg{display:none}}@media (min-width:640px){.developers-systems-animation-wrapper{min-height:386px}}