@keyframes envelope-animation{0%{opacity:0;transform:translate(10vw)translateY(30vw)translateZ(8vw)rotateX(-90deg)rotateY(0)rotate(0)scale(1)}10%{opacity:1;transform:translate(10vw)translateY(30vw)translateZ(8vw)rotateX(-90deg)rotateY(0)rotate(0)scale(1)}20%{opacity:1;transform:translate(41.2vw)translateY(36.5vw)translateZ(8vw)rotateX(0)rotateY(0)rotate(90deg)scale(1)}30%{opacity:1;transform:translate(41.2vw)translateY(36.5vw)translateZ(0)rotateX(0)rotateY(0)rotate(90deg)scale(1)}40%{opacity:1;transform:translate(41.2vw)translateY(36.5vw)translateZ(8vw)rotateX(0)rotateY(0)rotate(90deg)scale(1)}50%{opacity:1;transform:translate(64vw)translateY(36.5vw)translateZ(4.5vw)rotateX(0)rotateY(0)rotate(45deg)scale(1)}60%{opacity:1;transform:translate(64vw)translateY(58vw)translateZ(8vw)rotateX(0)rotateY(0)rotate(0)scale(1)}70%{opacity:1;transform:translate(64vw)translateY(58vw)translateZ(0)rotateX(0)rotateY(0)rotate(0)scale(1)}80%{opacity:1;transform:translate(64vw)translateY(58vw)translateZ(8vw)rotateX(0)rotateY(0)rotate(0)scale(1)}90%{opacity:1;transform:translate(64vw)translateY(83vw)translateZ(0)rotateX(0)rotateY(0)rotate(0)scale(.5)}to{opacity:0;transform:translate(64vw)translateY(83vw)translateZ(0)rotateX(0)rotateY(0)rotate(0)scale(.5)}}@media (min-width:48rem){@keyframes envelope-animation{0%{opacity:0;transform:translate(80px)translateY(240px)translateZ(64px)rotateX(-90deg)rotateY(0)rotate(0)scale(1)}10%{opacity:1;transform:translate(80px)translateY(240px)translateZ(64px)rotateX(-90deg)rotateY(0)rotate(0)scale(1)}20%{opacity:1;transform:translate(329.6px)translateY(292px)translateZ(64px)rotateX(0)rotateY(0)rotate(90deg)scale(1)}30%{opacity:1;transform:translate(329.6px)translateY(292px)translateZ(0)rotateX(0)rotateY(0)rotate(90deg)scale(1)}40%{opacity:1;transform:translate(329.6px)translateY(292px)translateZ(64px)rotateX(0)rotateY(0)rotate(90deg)scale(1)}50%{opacity:1;transform:translate(512px)translateY(292px)translateZ(36px)rotateX(0)rotateY(0)rotate(45deg)scale(1)}60%{opacity:1;transform:translate(512px)translateY(464px)translateZ(64px)rotateX(0)rotateY(0)rotate(0)scale(1)}70%{opacity:1;transform:translate(512px)translateY(464px)translateZ(0)rotateX(0)rotateY(0)rotate(0)scale(1)}80%{opacity:1;transform:translate(512px)translateY(464px)translateZ(64px)rotateX(0)rotateY(0)rotate(0)scale(1)}90%{opacity:1;transform:translate(512px)translateY(664px)translateZ(0)rotateX(0)rotateY(0)rotate(0)scale(.5)}to{opacity:0;transform:translate(512px)translateY(664px)translateZ(0)rotateX(0)rotateY(0)rotate(0)scale(.5)}}}@keyframes laptop-open{0%{transform:rotateX(0)}to{transform:rotateX(90deg)}}@keyframes power-on{0%{inset:6vw 8.5vw}50%{inset:6vw 8.5vw}75%{inset:1.25vw 8.5vw}to{inset:1.25vw}}@media (min-width:48rem){@keyframes power-on{0%{inset:48px 68px}50%{inset:48px 68px}75%{inset:10px 68px}to{inset:10px}}}@keyframes power-on-phone{0%{inset:1.7vw 3.2vw}50%{inset:1.7vw 3.2vw}75%{inset:1.7vw 0}to{inset:0}}@media (min-width:48rem){@keyframes power-on-phone{0%{inset:13.6px 25.6px}50%{inset:13.6px 25.6px}75%{inset:13.6px 0}to{inset:0}}}.laptop .top{animation:1s laptop-open}.laptop-screen{animation:2s power-on}.phone-screen{animation:2s power-on-phone}.envelope{animation:5s 3s infinite alternate envelope-animation}.toy-wrap{-webkit-user-select:none;user-select:none;flex-direction:column;display:flex;overflow:hidden}.toy{align-self:center;width:100vw;height:35vw}.toy .foreground,.toy .background,.toy .middleground,.toy .middle-wrap{width:100%;position:absolute}.toy .foreground{z-index:2}.toy .middle-wrap{z-index:1}.toy .background{z-index:0}.toy .middle-wrap{height:35vw;overflow:hidden}.toy .left-inbox-back,.toy .right-inbox-back,.toy .left-inbox-front,.toy .right-inbox-front{width:10.5vw;position:absolute}.toy .left-inbox-front,.toy .right-inbox-front{top:13vw}.toy .left-inbox-front,.toy .left-inbox-back{left:34.4vw}.toy .right-inbox-front,.toy .right-inbox-back{left:65.5vw}.toy .left-inbox-back,.toy .right-inbox-back{top:10.5vw}.toy .middleground{transform-style:preserve-3d;width:100vw;height:100vw;transform:translate(0)translateY(-32.5vw)translateZ(1vw)rotateX(55deg)rotateY(0)rotate(-45deg)}.toy .line{position:absolute}.toy .line.line-1{border-top:.5vw dashed #0e4dd8;width:13vw;top:39.5vw;left:27vw}.toy .line.line-2{border-top:.5vw dashed #0e4dd8;width:13vw;top:39.5vw;left:55vw}.toy .line.line-3{border-left:.5vw dashed #0e4dd8;height:13vw;top:39.5vw;left:68vw}.toy .line.line-4{border-left:.5vw dashed #0e4dd8;height:13vw;top:68vw;left:68vw}.toy .line.line-5{opacity:0;border-top:.5vw dashed #0e4dd8;width:5vw;top:61vw;left:56vw}.toy .line.line-6{opacity:0;border-left:.5vw dashed #0e4dd8;height:5vw;top:46vw;left:45.5vw}.toy .line{border-color:#00f}.toy .line.line-2,.toy .line.line-3{border-color:#0e4dd8}.toy .line.line-5,.toy .line.line-6{opacity:1}.toy .envelope{opacity:0;width:9vw;position:absolute;transform:translate(10vw)translateY(30vw)translateZ(8vw)rotateX(-90deg)rotateY(0)rotate(0)scale(1)}.toy .base{width:20.4vw;position:absolute;top:20.3vw;left:6.5vw}.toy .laptop{transform-style:preserve-3d;transform:translate(5.85vw)translateY(32.2vw)translateZ(1vw)rotateX(0)rotateY(0)rotate(0)}.toy .top{transform-origin:0 100%;width:17.6vw;transform-style:preserve-3d;position:relative;transform:translate(0)translateY(0)translateZ(0)rotateX(90deg)rotateY(0)rotate(0)}.toy .front,.toy .back{backface-visibility:hidden;width:100%;position:absolute}.toy .front{transform:rotateX(180deg)}.toy .laptop-screen{background-color:#fff;border-radius:.2vw;position:absolute;inset:1.25vw}.toy .laptop-window{opacity:0;color:#0e4dd8;text-align:center;border:.3vw solid #0e4dd8;border-radius:.5vw;width:9vw;height:6vw;padding-top:1.2vw;font-family:Hack,monospace;font-size:1.5vw;font-weight:700;line-height:1.4vw;position:absolute;top:2.1vw;left:3vw}.toy .phone{width:10.4vw;position:absolute;top:21.35vw;left:83.7vw}.toy .phone-wrap{width:7.4vw;height:4vw;position:absolute;transform:translate(65.3vw,84vw)rotateX(0)rotateY(0)rotate(0)}.toy .phone-screen{background-color:#fff;border-radius:.1vw;position:absolute;inset:0}.toy .phone-window{opacity:0;color:#0e4dd8;text-align:center;border:.3vw solid #0e4dd8;border-radius:.5vw;width:5.7vw;height:3vw;padding-top:.1vw;font-family:Hack,monospace;font-size:1vw;font-weight:700;line-height:1.2vw;position:absolute;top:.5vw;left:.8vw}.toy .server{width:14vw;position:absolute;top:14vw;left:48vw}@media (min-width:48rem){.toy{width:800px;height:280px}.toy .middle-wrap{height:280px}.toy .left-inbox-back,.toy .right-inbox-back,.toy .left-inbox-front,.toy .right-inbox-front{width:84px}.toy .left-inbox-front,.toy .right-inbox-front{top:104px}.toy .left-inbox-front,.toy .left-inbox-back{left:275.2px}.toy .right-inbox-front,.toy .right-inbox-back{left:524px}.toy .left-inbox-back,.toy .right-inbox-back{top:84px}.toy .middleground{transform-style:preserve-3d;width:800px;height:800px;transform:translate(0)translateY(-260px)translateZ(8px)rotateX(55deg)rotateY(0)rotate(-45deg)}.toy .line.line-1{border-top-width:4px;width:104px;top:316px;left:216px}.toy .line.line-2{border-top-width:4px;width:104px;top:316px;left:440px}.toy .line.line-3{border-left-width:4px;height:104px;top:316px;left:544px}.toy .line.line-4{border-left-width:4px;height:104px;top:544px;left:544px}.toy .line.line-5{border-top-width:4px;width:40px;top:488px;left:448px}.toy .line.line-6{border-left-width:4px;height:40px;top:368px;left:364px}.toy .envelope{width:72px;transform:translate(80px)translateY(240px)translateZ(64px)rotateX(-90deg)rotateY(0)rotate(0)scale(1)}.toy .envelope .post_it{width:48px;left:12px}.toy .base{width:163.2px;top:162.4px;left:52px}.toy .laptop{transform:translate(46.8px)translateY(257.6px)translateZ(8px)rotateX(0)rotateY(0)rotate(0)}.toy .top{width:140.8px}.toy .laptop-screen{border-radius:1.6px;inset:10px}.toy .laptop-window{border-width:2.4px;border-radius:4px;width:72px;height:48px;padding-top:9.6px;font-size:12px;line-height:11.2px;top:16.8px;left:24px}.toy .phone{width:83.2px;top:170.8px;left:669.6px}.toy .phone-wrap{width:59.2px;height:32px;transform:translate(522.4px,672px)rotateX(0)rotateY(0)rotate(0)}.toy .phone-screen{border-radius:.8px;inset:0}.toy .phone-window{border-width:2.4px;border-radius:4px;width:45.6px;height:24px;padding-top:.8px;font-size:8px;line-height:9.6px;top:4px;left:6.4px}.toy .server{width:112px;top:112px;left:384px}}