@charset "UTF-8";.snippet{position:relative;background:#fff;padding:2rem 5%;margin:1.5rem 0;box-shadow:0 .4rem .8rem -.1rem rgba(0,32,128,.1),0 0 0 1px #f0f2f7;border-radius:.25rem}.stage{display:flex;justify-content:center;align-items:center;padding:2rem 0;margin:0 -6%;overflow:hidden}.dot-elastic{position:relative;width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212;animation:dotElastic 1s linear infinite}.dot-elastic:after,.dot-elastic:before{content:"";display:inline-block;position:absolute;top:0}.dot-elastic:before{left:-15px;animation:dotElasticBefore 1s linear infinite}.dot-elastic:after,.dot-elastic:before{width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212}.dot-elastic:after{left:15px;animation:dotElasticAfter 1s linear infinite}@keyframes dotElasticBefore{0%{transform:scale(1)}25%{transform:scaleY(1.5)}50%{transform:scaleY(.67)}75%{transform:scale(1)}to{transform:scale(1)}}@keyframes dotElastic{0%{transform:scale(1)}25%{transform:scale(1)}50%{transform:scaleY(1.5)}75%{transform:scale(1)}to{transform:scale(1)}}@keyframes dotElasticAfter{0%{transform:scale(1)}25%{transform:scale(1)}50%{transform:scaleY(.67)}75%{transform:scaleY(1.5)}to{transform:scale(1)}}.dot-pulse{position:relative;left:-9999px;box-shadow:9999px 0 0 -5px #A11212;animation:dotPulse 1.5s linear infinite;animation-delay:.25s}.dot-pulse,.dot-pulse:after,.dot-pulse:before{width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212}.dot-pulse:after,.dot-pulse:before{content:"";display:inline-block;position:absolute;top:0}.dot-pulse:before{box-shadow:9984px 0 0 -5px #A11212;animation:dotPulseBefore 1.5s linear infinite;animation-delay:0s}.dot-pulse:after{box-shadow:10014px 0 0 -5px #A11212;animation:dotPulseAfter 1.5s linear infinite;animation-delay:.5s}@keyframes dotPulseBefore{0%{box-shadow:9984px 0 0 -5px #A11212}30%{box-shadow:9984px 0 0 2px #A11212}60%,to{box-shadow:9984px 0 0 -5px #A11212}}@keyframes dotPulse{0%{box-shadow:9999px 0 0 -5px #A11212}30%{box-shadow:9999px 0 0 2px #A11212}60%,to{box-shadow:9999px 0 0 -5px #A11212}}@keyframes dotPulseAfter{0%{box-shadow:10014px 0 0 -5px #A11212}30%{box-shadow:10014px 0 0 2px #A11212}60%,to{box-shadow:10014px 0 0 -5px #A11212}}.dot-flashing{position:relative;width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212;animation:dotFlashing 1s linear infinite alternate;animation-delay:.5s}.dot-flashing:after,.dot-flashing:before{content:"";display:inline-block;position:absolute;top:0}.dot-flashing:before{left:-15px;animation:dotFlashing 1s infinite alternate;animation-delay:0s}.dot-flashing:after,.dot-flashing:before{width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212}.dot-flashing:after{left:15px;animation:dotFlashing 1s infinite alternate;animation-delay:1s}@keyframes dotFlashing{0%{background-color:#A11212}50%,to{background-color:#ebe6ff}}.dot-collision{position:relative;width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212}.dot-collision:after,.dot-collision:before{content:"";display:inline-block;position:absolute;top:0}.dot-collision:before{left:-10px;animation:dotCollisionBefore 2s ease-in infinite}.dot-collision:after,.dot-collision:before{width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212}.dot-collision:after{left:10px;animation:dotCollisionAfter 2s ease-in infinite;animation-delay:1s}@keyframes dotCollisionBefore{0%,50%,75%,to{transform:translateX(0)}25%{transform:translateX(-15px)}}@keyframes dotCollisionAfter{0%,50%,75%,to{transform:translateX(0)}25%{transform:translateX(15px)}}.dot-revolution{position:relative;width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212}.dot-revolution:after,.dot-revolution:before{content:"";display:inline-block;position:absolute}.dot-revolution:before{top:-15px;transform-origin:5px 20px;animation:dotRevolution 1.4s linear infinite}.dot-revolution:after,.dot-revolution:before{left:0;width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212}.dot-revolution:after{top:-30px;transform-origin:5px 35px;animation:dotRevolution 1s linear infinite}@keyframes dotRevolution{0%{transform:rotate(0deg) translateZ(0)}to{transform:rotate(1turn) translateZ(0)}}.dot-carousel{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212;box-shadow:9984px 0 0 0 #A11212,9999px 0 0 0 #A11212,10014px 0 0 0 #A11212;animation:dotCarousel 1.5s linear infinite}@keyframes dotCarousel{0%{box-shadow:9984px 0 0 -1px #A11212,9999px 0 0 1px #A11212,10014px 0 0 -1px #A11212}50%{box-shadow:10014px 0 0 -1px #A11212,9984px 0 0 -1px #A11212,9999px 0 0 1px #A11212}to{box-shadow:9999px 0 0 1px #A11212,10014px 0 0 -1px #A11212,9984px 0 0 -1px #A11212}}.dot-typing{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212;box-shadow:9984px 0 0 0 #A11212,9999px 0 0 0 #A11212,10014px 0 0 0 #A11212;animation:dotTyping 1.5s linear infinite}@keyframes dotTyping{0%{box-shadow:9984px 0 0 0 #A11212,9999px 0 0 0 #A11212,10014px 0 0 0 #A11212}16.667%{box-shadow:9984px -10px 0 0 #A11212,9999px 0 0 0 #A11212,10014px 0 0 0 #A11212}33.333%{box-shadow:9984px 0 0 0 #A11212,9999px 0 0 0 #A11212,10014px 0 0 0 #A11212}50%{box-shadow:9984px 0 0 0 #A11212,9999px -10px 0 0 #A11212,10014px 0 0 0 #A11212}66.667%{box-shadow:9984px 0 0 0 #A11212,9999px 0 0 0 #A11212,10014px 0 0 0 #A11212}83.333%{box-shadow:9984px 0 0 0 #A11212,9999px 0 0 0 #A11212,10014px -10px 0 0 #A11212}to{box-shadow:9984px 0 0 0 #A11212,9999px 0 0 0 #A11212,10014px 0 0 0 #A11212}}.dot-windmill{position:relative;top:-10px;width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212;transform-origin:5px 15px;animation:dotWindmill 2s linear infinite}.dot-windmill:after,.dot-windmill:before{content:"";display:inline-block;position:absolute}.dot-windmill:before{left:-8.66px}.dot-windmill:after,.dot-windmill:before{top:15px;width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212}.dot-windmill:after{left:8.66px}@keyframes dotWindmill{0%{transform:rotate(0deg) translateZ(0)}to{transform:rotate(2turn) translateZ(0)}}.dot-bricks{position:relative;top:8px;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212;box-shadow:9991px -16px 0 0 #A11212,9991px 0 0 0 #A11212,10007px 0 0 0 #A11212;animation:dotBricks 2s ease infinite}@keyframes dotBricks{0%{box-shadow:9991px -16px 0 0 #A11212,9991px 0 0 0 #A11212,10007px 0 0 0 #A11212}8.333%{box-shadow:10007px -16px 0 0 #A11212,9991px 0 0 0 #A11212,10007px 0 0 0 #A11212}16.667%{box-shadow:10007px -16px 0 0 #A11212,9991px -16px 0 0 #A11212,10007px 0 0 0 #A11212}25%{box-shadow:10007px -16px 0 0 #A11212,9991px -16px 0 0 #A11212,9991px 0 0 0 #A11212}33.333%{box-shadow:10007px 0 0 0 #A11212,9991px -16px 0 0 #A11212,9991px 0 0 0 #A11212}41.667%{box-shadow:10007px 0 0 0 #A11212,10007px -16px 0 0 #A11212,9991px 0 0 0 #A11212}50%{box-shadow:10007px 0 0 0 #A11212,10007px -16px 0 0 #A11212,9991px -16px 0 0 #A11212}58.333%{box-shadow:9991px 0 0 0 #A11212,10007px -16px 0 0 #A11212,9991px -16px 0 0 #A11212}66.666%{box-shadow:9991px 0 0 0 #A11212,10007px 0 0 0 #A11212,9991px -16px 0 0 #A11212}75%{box-shadow:9991px 0 0 0 #A11212,10007px 0 0 0 #A11212,10007px -16px 0 0 #A11212}83.333%{box-shadow:9991px -16px 0 0 #A11212,10007px 0 0 0 #A11212,10007px -16px 0 0 #A11212}91.667%{box-shadow:9991px -16px 0 0 #A11212,9991px 0 0 0 #A11212,10007px -16px 0 0 #A11212}to{box-shadow:9991px -16px 0 0 #A11212,9991px 0 0 0 #A11212,10007px 0 0 0 #A11212}}.dot-floating{position:relative;width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212;animation:dotFloating 3s cubic-bezier(.15,.6,.9,.1) infinite}.dot-floating:after,.dot-floating:before{content:"";display:inline-block;position:absolute;top:0}.dot-floating:before{left:-12px;animation:dotFloatingBefore 3s ease-in-out infinite}.dot-floating:after,.dot-floating:before{width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212}.dot-floating:after{left:-24px;animation:dotFloatingAfter 3s cubic-bezier(.4,0,1,1) infinite}@keyframes dotFloating{0%{left:calc(-50% - 5px)}75%{left:calc(50% + 105px)}to{left:calc(50% + 105px)}}@keyframes dotFloatingBefore{0%{left:-50px}50%{left:-12px}75%{left:-50px}to{left:-50px}}@keyframes dotFloatingAfter{0%{left:-100px}50%{left:-24px}75%{left:-100px}to{left:-100px}}.dot-fire{position:relative;left:-9999px;box-shadow:9999px 22.5px 0 -5px #A11212;animation:dotFire 1.5s linear infinite;animation-delay:-.85s}.dot-fire,.dot-fire:after,.dot-fire:before{width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212}.dot-fire:after,.dot-fire:before{content:"";display:inline-block;position:absolute;top:0}.dot-fire:before{animation:dotFire 1.5s linear infinite;animation-delay:-1.85s}.dot-fire:after,.dot-fire:before{box-shadow:9999px 22.5px 0 -5px #A11212}.dot-fire:after{animation:dotFire 1.5s linear infinite;animation-delay:-2.85s}@keyframes dotFire{1%{box-shadow:9999px 22.5px 0 -5px #A11212}50%{box-shadow:9999px -5.625px 0 2px #A11212}to{box-shadow:9999px -22.5px 0 -5px #A11212}}.dot-spin{position:relative;width:10px;height:10px;border-radius:5px;background-color:transparent;color:transparent;box-shadow:0 -18px 0 0 #A11212,12.72984px -12.72984px 0 0 #A11212,18px 0 0 0 #A11212,12.72984px 12.72984px 0 0 rgba(152,128,255,0),0 18px 0 0 rgba(152,128,255,0),-12.72984px 12.72984px 0 0 rgba(152,128,255,0),-18px 0 0 0 rgba(152,128,255,0),-12.72984px -12.72984px 0 0 rgba(152,128,255,0);animation:dotSpin 1.5s linear infinite}@keyframes dotSpin{0%,to{box-shadow:0 -18px 0 0 #A11212,12.72984px -12.72984px 0 0 #A11212,18px 0 0 0 #A11212,12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}12.5%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 0 #A11212,18px 0 0 0 #A11212,12.72984px 12.72984px 0 0 #A11212,0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}25%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 0 #A11212,12.72984px 12.72984px 0 0 #A11212,0 18px 0 0 #A11212,-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}37.5%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 0 #A11212,0 18px 0 0 #A11212,-12.72984px 12.72984px 0 0 #A11212,-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}50%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 0 #A11212,-12.72984px 12.72984px 0 0 #A11212,-18px 0 0 0 #A11212,-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}62.5%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 0 #A11212,-18px 0 0 0 #A11212,-12.72984px -12.72984px 0 0 #A11212}75%{box-shadow:0 -18px 0 0 #A11212,12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 0 #A11212,-12.72984px -12.72984px 0 0 #A11212}87.5%{box-shadow:0 -18px 0 0 #A11212,12.72984px -12.72984px 0 0 #A11212,18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 0 #A11212}}.dot-falling{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212;box-shadow:9999px 0 0 0 #A11212;animation:dotFalling 1s linear infinite;animation-delay:.1s}.dot-falling:after,.dot-falling:before{content:"";display:inline-block;position:absolute;top:0}.dot-falling:before{animation:dotFallingBefore 1s linear infinite;animation-delay:0s}.dot-falling:after,.dot-falling:before{width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212}.dot-falling:after{animation:dotFallingAfter 1s linear infinite;animation-delay:.2s}@keyframes dotFalling{0%{box-shadow:9999px -15px 0 0 rgba(152,128,255,0)}25%,50%,75%{box-shadow:9999px 0 0 0 #A11212}to{box-shadow:9999px 15px 0 0 rgba(152,128,255,0)}}@keyframes dotFallingBefore{0%{box-shadow:9984px -15px 0 0 rgba(152,128,255,0)}25%,50%,75%{box-shadow:9984px 0 0 0 #A11212}to{box-shadow:9984px 15px 0 0 rgba(152,128,255,0)}}@keyframes dotFallingAfter{0%{box-shadow:10014px -15px 0 0 rgba(152,128,255,0)}25%,50%,75%{box-shadow:10014px 0 0 0 #A11212}to{box-shadow:10014px 15px 0 0 rgba(152,128,255,0)}}.dot-stretching{position:relative;width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212;transform:scale(1.25);animation:dotStretching 2s ease-in infinite}.dot-stretching:after,.dot-stretching:before{content:"";display:inline-block;position:absolute;top:0}.dot-stretching:before{animation:dotStretchingBefore 2s ease-in infinite}.dot-stretching:after,.dot-stretching:before{width:10px;height:10px;border-radius:5px;background-color:#A11212;color:#A11212}.dot-stretching:after{animation:dotStretchingAfter 2s ease-in infinite}@keyframes dotStretching{0%{transform:scale(1.25)}50%,60%{transform:scale(.8)}to{transform:scale(1.25)}}@keyframes dotStretchingBefore{0%{transform:translate(0) scale(.7)}50%,60%{transform:translate(-20px) scale(1)}to{transform:translate(0) scale(.7)}}@keyframes dotStretchingAfter{0%{transform:translate(0) scale(.7)}50%,60%{transform:translate(20px) scale(1)}to{transform:translate(0) scale(.7)}}.dot-gathering{position:relative;margin:-1px 0}.dot-gathering,.dot-gathering:after,.dot-gathering:before{width:12px;height:12px;border-radius:6px;background-color:black;color:transparent;filter:blur(2px)}.dot-gathering:after,.dot-gathering:before{content:"";display:inline-block;position:absolute;top:0;left:-50px;opacity:0;animation:dotGathering 2s ease-in infinite}.dot-gathering:after{animation-delay:.5s}@keyframes dotGathering{0%{opacity:0;transform:translateX(0)}35%,60%{opacity:1;transform:translateX(50px)}to{opacity:0;transform:translateX(100px)}}.dot-hourglass{position:relative;top:-15px;margin:-1px 0;transform-origin:5px 20px;animation:dotHourglass 2.4s ease-in-out infinite;animation-delay:.6s}.dot-hourglass,.dot-hourglass:after,.dot-hourglass:before{width:12px;height:12px;border-radius:6px;background-color:black;color:transparent;filter:blur(2px)}.dot-hourglass:after,.dot-hourglass:before{content:"";display:inline-block;position:absolute;top:0;left:0}.dot-hourglass:before{top:30px}.dot-hourglass:after{animation:dotHourglassAfter 2.4s cubic-bezier(.65,.05,.36,1) infinite}@keyframes dotHourglass{0%{transform:rotate(0deg)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(1turn)}to{transform:rotate(1turn)}}@keyframes dotHourglassAfter{0%{transform:translateY(0)}25%{transform:translateY(30px)}50%{transform:translateY(30px)}75%{transform:translateY(0)}to{transform:translateY(0)}}.dot-overtaking{position:relative;margin:-1px 0;animation:dotOvertaking 2s cubic-bezier(.2,.6,.8,.2) infinite}.dot-overtaking,.dot-overtaking:after,.dot-overtaking:before{width:12px;height:12px;border-radius:6px;background-color:transparent;color:black;box-shadow:0 -20px 0 0;filter:blur(2px)}.dot-overtaking:after,.dot-overtaking:before{content:"";display:inline-block;position:absolute;top:0;left:0}.dot-overtaking:before{animation:dotOvertaking 2s cubic-bezier(.2,.6,.8,.2) infinite;animation-delay:.3s}.dot-overtaking:after{animation:dotOvertaking 1.5s cubic-bezier(.2,.6,.8,.2) infinite;animation-delay:.6s}@keyframes dotOvertaking{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.dot-shuttle{position:relative;left:-15px;margin:-1px 0}.dot-shuttle,.dot-shuttle:after,.dot-shuttle:before{width:12px;height:12px;border-radius:6px;background-color:black;color:transparent;filter:blur(2px)}.dot-shuttle:after,.dot-shuttle:before{content:"";display:inline-block;position:absolute;top:0}.dot-shuttle:before{left:15px;animation:dotShuttle 2s ease-out infinite}.dot-shuttle:after{left:30px}@keyframes dotShuttle{0%,50%,to{transform:translateX(0)}25%{transform:translateX(-45px)}75%{transform:translateX(45px)}}.dot-bouncing{position:relative;height:10px;font-size:10px}.dot-bouncing:before{content:"⚽🏀🏐";display:inline-block;position:relative;animation:dotBouncing 1s infinite}@keyframes dotBouncing{0%{top:-20px;animation-timing-function:ease-in}34%{transform:scale(1)}35%{top:20px;animation-timing-function:ease-out;transform:scale(1.5,.5)}45%{transform:scale(1)}90%{top:-20px}to{top:-20px}}.dot-rolling{position:relative;height:10px;font-size:10px}.dot-rolling:before{content:"⚽";display:inline-block;position:relative;transform:translateX(-25px);animation:dotRolling 3s infinite}@keyframes dotRolling{0%{content:"⚽";transform:translateX(-25px) rotate(0deg)}16.667%{content:"⚽";transform:translateX(25px) rotate(2turn)}33.333%{content:"⚽";transform:translateX(-25px) rotate(0deg)}34.333%{content:"🏀";transform:translateX(-25px) rotate(0deg)}50%{content:"🏀";transform:translateX(25px) rotate(2turn)}66.667%{content:"🏀";transform:translateX(-25px) rotate(0deg)}67.667%{content:"🏐";transform:translateX(-25px) rotate(0deg)}83.333%{content:"🏐";transform:translateX(25px) rotate(2turn)}to{content:"🏐";transform:translateX(-25px) rotate(0deg)}}