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