.range-slider{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:5px 0;padding:10px 20px;position:relative}.range-slider:focus .range-slider__value,.range-slider:hover .range-slider__value{opacity:1;transform:scale(1)}.range-slider input[type=range]{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;margin:0;padding:0;transition:all .2s ease-in-out;width:100%}.range-slider input[type=range]::-webkit-slider-runnable-track{background-color:#dae4f1;cursor:pointer;height:2px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.range-slider input[type=range]:hover::-webkit-slider-runnable-track{background-color:#00aeef}.range-slider input[type=range]::-moz-range-track{background-color:#404d6d;cursor:pointer;height:2px;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.range-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#00ff98;border-radius:16px;box-shadow:0 5px 5px -.5px #404d6db3,inset 0 -1px #404d6d66;cursor:pointer;height:16px;margin-top:-8px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;width:16px}.range-slider input[type=range]::-webkit-slider-thumb:active,.range-slider input[type=range]::-webkit-slider-thumb:focus,.range-slider input[type=range]::-webkit-slider-thumb:hover{background-color:#00aeef;box-shadow:0 7px 7px -.5px #404d6db3,inset 0 -1px #404d6d66;transform:scale(1.1)}@media (max-width:992px){.range-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:21px;height:21px;margin-top:-10.5px;width:21px}}.range-slider input[type=range]::-moz-range-thumb{background-color:#00ff98;border:0;border-radius:16px;box-shadow:0 5px 5px -.5px #404d6db3,inset 0 -1px #404d6d66;cursor:pointer;height:16px;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out;width:16px}.range-slider input[type=range]::-moz-range-thumb:active,.range-slider input[type=range]::-moz-range-thumb:focus,.range-slider input[type=range]::-moz-range-thumb:hover{background-color:#00aeef;box-shadow:0 7px 7px -.5px #404d6db3,inset 0 -1px #404d6d66;transform:scale(1.1)}@media (max-width:992px){.range-slider input[type=range]::-moz-range-thumb{border-radius:21px;height:21px;width:21px}}.range-slider input[type=range]::-moz-range-progress{background-color:#00aeef;height:2px;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.range-slider input[type=range]:focus{outline:0}.range-slider__value{align-items:center;background-color:#00ff98;border-radius:30px 0 0 30px;color:#404d6d;display:flex;flex-wrap:wrap;font-size:14px;font-weight:700;height:30px;justify-content:center;left:-50px;line-height:20px;position:absolute;top:0;transform:scale(0);transition:all .2s cubic-bezier(0,.35,.5,1);width:30px}.range-slider__value:before{background-color:#00ff98;border-radius:0;content:"";display:block;height:21px;position:absolute;right:-10px;transform:rotate(45deg);width:21px;z-index:-1}.controller__modes{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-around;margin-bottom:10px}.controller__modes .mode__button{align-items:center;background-color:#00ff98;border-radius:40px;box-shadow:0 5px 5px -.5px #404d6db3,inset 0 -1px #404d6d66;color:#404d6d;cursor:pointer;display:flex;flex-wrap:wrap;height:40px;justify-content:center;opacity:.2;transition:all .4s cubic-bezier(0,.35,.5,1);width:40px}.controller__modes .mode__button:focus,.controller__modes .mode__button:hover{box-shadow:0 7px 7px -.5px #404d6db3,inset 0 -1px #404d6d66;opacity:1;transform:scale(1.1)}.controller__modes .mode__button.active{background-color:#00ff98;opacity:1}.controller{background:#404d6d;padding:30px 0;position:fixed;right:0;top:0;transition:all .4s cubic-bezier(0,.35,.5,1);width:220px;z-index:10}@media (max-width:992px){.controller{inset:0;overflow-y:auto;padding:70px 0 10px;width:auto}.controller.close{overflow-y:initial;top:100vh}.controller.close .controller__modes{bottom:60px;left:0;position:fixed;right:0}}.controller__random{background-color:#00ff98;bottom:auto;box-shadow:0 5px 5px -.5px #404d6db3,inset 0 -1px #404d6d66;color:#404d6d;cursor:pointer;display:block;font-weight:700;padding:15px 0;position:static;text-align:center;text-decoration:none;transform:scale(1.05);transition:all .4s cubic-bezier(0,.35,.5,1);width:100%}.controller__random:hover{background-color:#00aeef;box-shadow:0 7px 7px -.5px #404d6db3,inset 0 -1px #404d6d66}@media (max-width:992px){.controller__random{transform:scale(1)}.controller.close .controller__random{bottom:0;box-shadow:inset 0 10px 10px -5px #404d6d66;left:0;position:fixed;right:0}}.controller__toggle{display:none}@media (max-width:992px){.controller__toggle{align-items:center;background-color:#404d6d;border-radius:0 0 0 40px;display:flex;flex-wrap:wrap;height:60px;justify-content:center;position:fixed;right:0;top:0;width:60px;z-index:15}}.timeline__icon{display:inline-block;height:30px;width:30px}.timeline__buttons{margin:20px 0 -30px}.timeline__button,.timeline__buttons{align-items:center;display:flex;flex-wrap:wrap;justify-content:center}.timeline__button{background-color:#404d6d;cursor:pointer;flex:1;padding:10px}.timeline__button:hover{fill:#00aeef}.timeline__record{fill:#ea4f52}.timeline__keyframe,.timeline__play{fill:#00ff98}.timeline__play.play #play{opacity:1;transform:rotate(0)}.timeline__play.pause #pause{opacity:1;transform:scale(1)}.timeline__frame{align-items:center;background-color:#d5dae6;border-radius:20px;cursor:pointer;display:flex;flex-wrap:wrap;height:20px;justify-content:center;margin:0 0 0 25px;transition:all .4s cubic-bezier(0,.35,.5,1);width:20px;z-index:2}.timeline__frame:first-child{margin:0}.timeline__frame.active:after{background-color:#ea4f52b3;border-radius:10px;content:"";display:block;height:10px;width:10px}.timeline__container{align-items:center;bottom:0;display:flex;flex-wrap:wrap;justify-content:center;left:0;position:fixed;right:0}@media (max-width:992px){.timeline__container{bottom:auto;top:0}}.timeline__track{display:flex;height:20px;justify-content:space-between;margin:10px auto;max-width:80%;position:relative;z-index:1}.timeline__track:before{background-color:#bfc7da;content:"";display:block;height:4px;left:0;position:absolute;right:0;top:8px}#play{transform:rotate(90deg)}#pause,#play{opacity:0;transition:all .3s cubic-bezier(0,.35,.5,1)}#pause{transform:scale(0)}@keyframes eye-blinking{0%{transform:scaleY(1)}2%{transform:scaleY(.1)}4%{transform:scaleY(1)}}@keyframes body-angry{0%{transform:rotate(0)}1%{transform:rotate(1deg)}2%{transform:rotate(-1deg)}3%{transform:rotate(.5deg)}4%{transform:rotate(-.5deg)}5%{transform:rotate(0)}}@keyframes head-falling{0%{transform:perspective(3000px) rotateY(0)}10%,30%{transform:perspective(3000px) rotateY(40deg)}40%,50%{transform:perspective(3000px) rotateY(-40deg)}60%{transform:perspective(3000px) rotateY(0)}}@keyframes body-falling{0%{transform:translateY(0)}10%{transform:translateY(170px)}15%{transform:translateY(160px)}20%,90%{transform:translateY(170px)}}@keyframes eye-lover{0%,20%{transform:scale(1)}50%,60%{transform:scale(1.5)}70%,to{transform:scale(1)}}@keyframes body-drag{0%{transform:rotate(0)}20%{transform:rotate(2deg)}40%{transform:rotate(-2deg)}60%{transform:rotate(1deg)}80%{transform:rotate(-1deg)}to{transform:rotate(0)}}@keyframes right-drag{0%{transform:rotate(0)}60%{transform:rotate(21deg)}to{transform:rotate(0)}}@keyframes left-drag{0%{transform:rotate(0)}50%{transform:rotate(-10deg)}to{transform:rotate(0)}}@keyframes zzz-sleep{0%{opacity:1;transform:translate(0) rotate(0) scale(0);fill:#404d6d}70%{opacity:1;transform:translate(100px,-150px) rotate(-10deg) scale(1.5);fill:#00aeef}to{opacity:0;transform:translate(250px,-250px) rotate(20deg) scale(3);fill:#00aeef}}@keyframes mouth-sleep{0%{transform:scaleY(.8)}70%{transform:scaleY(1.3)}90%,to{transform:scaleY(.8)}}.💬{display:block;transition:all .5s ease-in}.💬 foreignObject{height:200px;width:200px}.💬 .➰{filter:url(#dropShadow);transform-origin:200px 200px;transition:all .3s cubic-bezier(0,.35,.5,1);fill:#fff;stroke:#eaecf31a}.💬 .📄{background-color:transparent;border:0;box-shadow:none;color:#404d6d;font-size:30px;height:200px;outline:0;overflow:auto;padding-top:75px;resize:none;text-align:center;width:200px}.💬.💫 .➰{transform:rotate(90deg)}.💬.❌{display:none}.puppet svg{display:block;height:100vh;margin:auto;transition:0;width:100vw}.puppet circle,.puppet g,.puppet path,.puppet polygon,.puppet rect{transition:all .5s ease-in-out}.👖{fill:#4e6590}.👖.⬛️{fill:#42567a}.👔{fill:#30363f}.👔.⬛️{fill:#262b32}.👐{fill:#dba897}.👐.⬛️{fill:#cd866e}.👕{fill:#e2e2e2}.👕.⚫️{fill:#60562b}.💇{fill:#251b1b}.👀{fill:#2d1c1c}.⬜️{fill:#fff}.🕳{opacity:.2;fill:#000}.💚{transform-origin:center center;fill:#ea4f52}.😶{display:none;fill:#fff}.👄{transition:all 0s cubic-bezier(0,.35,.5,1)}#eye-heart-r,#eye-sleep-r{display:none;transform-origin:466.5px 324px}#eye-heart-l,#eye-sleep-l{display:none;transform-origin:558.5px 324px}#zzz{display:none}#zzz>path{transform:scale(0);transform-origin:512px 431px}#eye-r{transform-origin:466.5px 324px}#eye-l,#eye-r{animation:eye-blinking 5s infinite}#eye-l{transform-origin:558.5px 324px}#body{cursor:grab;transform:translateY(0);transform-origin:512px 850px}#bag-body{transform-origin:568px 701px}#shadow{position:relative;transform-origin:512px 912px}#drag-area,#shadow{transition:all .15s cubic-bezier(0,.35,.5,1)}#puppet{height:100vh;transform:translate(0);width:100vw}#puppet.😃 .😶.😃{display:block}#puppet.😡 #body{animation:body-angry 8s infinite}#puppet.😡 #face{fill:url(#skin-angry)}#puppet.😡 .😶.😡{display:block}#puppet.😭 #body{animation:body-falling 1.5s ease-out 1.5s forwards}#puppet.😭 #head{animation:head-falling 1.5s ease-in-out forwards}#puppet.😭 .😶.😭{display:block}#puppet.😍 #eye-l,#puppet.😍 #eye-r{display:none}#puppet.😍 #eye-heart-l,#puppet.😍 #eye-heart-r{animation:eye-lover 1s infinite;display:block}#puppet.😍 #hearts .heart{animation:hearts-lover 2s infinite;display:block}#puppet.😍 .😶.😍{display:block}#puppet.😴 #eye-l,#puppet.😴 #eye-r{display:none}#puppet.😴 #eye-sleep-l,#puppet.😴 #eye-sleep-r,#puppet.😴 #zzz{display:block}#puppet.😴 #zzz>path:first-child{animation:zzz-sleep 3s ease infinite}#puppet.😴 #zzz>path:nth-child(2){animation:zzz-sleep 3s ease 1s infinite}#puppet.😴 #zzz>path:nth-child(3){animation:zzz-sleep 3s ease 2s infinite}#puppet.😴 .😶.😴{animation:mouth-sleep 3s ease-in-out infinite;display:block;transform-origin:512px 443px}#puppet.🙄 #drag-area{cursor:grabbing}#puppet.🙄 #drag-area,#puppet.🙄 #shadow{transition:all 0s cubic-bezier(0,.35,.5,1)}#puppet.🙄 #body{animation:body-drag .7s infinite;cursor:grabbing}#puppet.🙄 #arm-r,#puppet.🙄 #hand-r,#puppet.🙄 #leg-r{animation:right-drag .55s infinite}#puppet.🙄 #arm-l,#puppet.🙄 #bag-body,#puppet.🙄 #hand-l,#puppet.🙄 #leg-l{animation:left-drag .6s infinite}#puppet.🙄 .😶.🙄{display:block}.👽{display:inline-block;height:30px;width:30px}.👽,.👽.😃,.👽.😍,.👽.😡,.👽.😴{fill:#404d6d}.👽.🤐 .👐{fill:#ffe344}.👽.🤐 .⬛️{fill:#404d6d}.👽.🤐 .⬜️.⬛️{fill:#e6e6e6}.👽.💬{margin-top:2px}.👽.💬 .⬛️{fill:gray}.menu-icon{align-items:center;cursor:pointer;display:flex;flex-wrap:wrap;height:50px;justify-content:center;position:relative;width:50px}.menu-icon .menu-icon__dot{background-color:#fff;border-radius:5px;height:5px;margin:2.5px;transition:all .4s cubic-bezier(0,.35,.5,1);width:5px}.close .menu-icon__dot{height:40px;margin:0;width:3px}.close .menu-icon__dot:first-child{transform:rotate(225deg)}.close .menu-icon__dot:nth-child(2){opacity:0;transform:rotate(180deg)}.close .menu-icon__dot:nth-child(3){margin:-5px;transform:rotate(-225deg)}.switch{display:block;height:34px;margin:30px auto 0;position:relative;width:68px;z-index:1}.switch input{display:none}.switch input:checked+.slider .slider-icon{background-color:#00ff98;left:calc(100% - 32px);transform:rotate(1turn)}.switch input:checked+.slider .slider-icon div.✅{display:block}.switch input:checked+.slider .slider-icon div.❎{display:none}.switch .slider{background-color:#404d6d;cursor:pointer;inset:0}.switch .slider,.switch .slider .slider-icon{border-radius:20px;position:absolute;transition:.4s}.switch .slider .slider-icon{align-items:center;background-color:#00ff98;bottom:2px;content:"";display:flex;flex-wrap:wrap;height:30px;justify-content:center;left:2px;width:30px}.switch .slider .slider-icon div{height:100%;transform:scale(2);transition:all .3 cubic-bezier(0,.35,.5,1);width:100%}.switch .slider .slider-icon div.✅{display:none}.switch .slider .slider-icon div.❎{display:block}