@import url(https://fonts.googleapis.com/css2?family=Jost:wght@500;700;800&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{color:inherit;font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@font-face{font-family:kyri_kapsregular;font-style:normal;font-weight:400;src:url(/static/media/kyri_kaps-webfont.725bceb0ea486735e470.woff2) format("woff2"),url(/static/media/kyri_kaps-webfont.9fd94df75f8fe78aacd9.woff) format("woff")}*{box-sizing:border-box}body,html{position:fixed}#root,body,html{height:100%;margin:0;padding:0;width:100%!important}h1,h2,h3,h5,p{text-align:center;text-shadow:0 2px 2px rgba(0,0,0,.451)}.darker{-webkit-filter:brightness(.85);filter:brightness(.85)}.lighter{-webkit-filter:brightness(1.15);filter:brightness(1.15)}.debugsize{background-color:rgba(0,0,0,.3);color:purple;font-weight:700;left:25%;padding:10px 20px}.backPanel,.debugsize{position:absolute;top:0}.backPanel{display:flex;height:100vh;left:0;overflow:auto;transition:background-color .3s ease-out;width:100vw;z-index:-10}.debug{right:200px;z-index:999999999}.debug,.snapscreen{position:absolute;top:0}.snapscreen{background-color:#fff;height:100vh;left:0;opacity:.6;pointer-events:none;width:100vw;z-index:9999}.wpb-game{top:10px;-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.rive,.wpb-game{left:50%;position:absolute}.rive{bottom:100px;height:100px;opacity:.6;top:73%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:opacity .3s ease-out;width:500px;z-index:-1}.introMessage{align-items:center;color:#fff;display:flex;flex-direction:column;font-family:kyri_kapsregular,sans-serif;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:99999}.introMessage h1,.introMessage h3,.introMessage p{text-align:center}.introMessage p{line-height:24px}.ready-intro{height:auto;width:100%}.main-btn{bottom:10%;left:50%;max-width:460px;position:absolute;z-index:999999}.main-btn button{background-color:#b32aa9;border:none;border-radius:10px;color:#fff;cursor:pointer;font-family:kyri_kapsregular,sans-serif;font-size:24px;min-width:240px;padding:10px 30px;-webkit-transform:translate(-50%) scale(1);transform:translate(-50%) scale(1);transition:all .3s ease-out}.main-btn button:hover{background-color:#ee9b02;-webkit-transform:translate(-50%,-2px) scale(1.01);transform:translate(-50%,-2px) scale(1.01)}.trailsText>div:not(.instruction){align-items:center;display:flex;flex-direction:row;justify-content:center}.instruction{align-items:center;display:flex;flex-direction:column;max-width:50%}.instruction h2{color:#ff0;font-family:Jost,Arial,Helvetica,sans-serif;font-size:42px;font-weight:800;line-height:48px;margin:0;text-align:center;text-transform:uppercase}.load-btn{align-items:center;display:flex;flex-direction:row;justify-content:center}@-webkit-keyframes load{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes load{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.loader{-webkit-animation:load 1s linear infinite;animation:load 1s linear infinite;border:4px solid hsla(0,0%,100%,.2);border-left-color:currentcolor;border-radius:50%;height:25px;width:25px}.preview{background:#222;border:6px solid #fff;border-radius:8px;display:flex;flex-direction:column;left:calc(50% + 20px);max-height:0;max-width:0;opacity:0;overflow:hidden;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);transition:max-width .5s ease-in-out,max-height .5s ease-in-out .4s;z-index:999}.preview.active{max-height:500px;max-width:500px;opacity:1}video{max-width:400px}.preview canvas,video{height:auto;-webkit-transform:scaleX(-1);transform:scaleX(-1)}.preview canvas{left:0;position:absolute;top:0;width:100%}.guides{bottom:0;height:100%;left:0;position:absolute!important;width:100%;z-index:1}.control-panel{bottom:10px;left:10px;position:absolute;z-index:9999999}.stats{left:auto!important;right:0}.picker{position:relative}.swatch{border:2px solid #fff;border-radius:8px;box-shadow:0 0 0 1px rgba(0,0,0,.1),inset 0 0 0 1px rgba(0,0,0,.1);cursor:pointer;height:40px;margin:4px 0;width:40px}.popover{border-radius:9px;box-shadow:0 6px 12px rgba(0,0,0,.15);left:calc(100% + 6px);position:absolute;top:4px;z-index:9999}.stroke-value{background-color:#fff;border:1px solid #fff;border-radius:6px;color:#010101;font-size:12px;font-weight:700;margin:4px 0;padding:10px;text-align:center}.sound-button{background-color:hsla(0,0%,100%,.51);border-color:#fff;border-radius:6px;border-width:0;cursor:pointer;height:40px;margin:4px auto;position:absolute;right:16px;top:12px;-webkit-transform:translateY(0);transform:translateY(0);transition:-webkit-transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out;width:40px;z-index:9999999}.sound-button svg{height:20px;margin:0 auto;-webkit-transform:translateX(-1px);transform:translateX(-1px);width:20px}.sound-button:hover{background-color:#f0ffcb;-webkit-transform:translateY(1px);transform:translateY(1px)}.logoBox{cursor:pointer;left:10px;position:absolute;top:10px;z-index:9999999}.logoHolder{align-items:center;display:flex;flex-direction:row;flex-wrap:overflow-wrap;height:80px;justify-content:center;position:relative;width:80px}.logoCircle{background:purple;border-radius:50%;box-shadow:0 10px 10px -5px rgba(0,0,0,.05);cursor:pointer;height:80%;margin-left:-4px;position:absolute;width:80%;will-change:width,height}.letter{background:#fff;background-size:contain;border-radius:100px;height:60px;width:60px;will-change:transform,opacity}.ControlBar{background-color:rgba(0,0,0,.334);border-bottom-right-radius:8px 8px;border-top-right-radius:8px 8px;display:flex;flex-direction:row;left:0;padding:10px 2px 10px 10px;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:999}.ControlBar .button-col{display:flex;flex-direction:column}.ControlBar .slider-col{padding:10px 0 5px 4px}.ControlBar button{background-color:#fff;border-color:#fff;border-radius:6px;border-width:0;cursor:pointer;height:40px;margin:4px 0;width:40px}.ControlBar button:hover{background-color:#f0ffcb}.ControlBar button svg{height:20px;width:20px}.status-bar{bottom:0;box-sizing:border-box;display:flex;flex-direction:column;height:auto;height:140px;left:50%;max-width:760px;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:100%;z-index:999}.status-bar .message-bar{height:100%}.status-bar .message-bar h2{color:#ff0;font-family:Jost,Arial,Helvetica,sans-serif;font-size:42px;font-weight:800;line-height:48px;margin:0;text-align:center;text-transform:uppercase}.status-bar .message-bar h5{color:#fff;font-family:kyri_kapsregular,sans-serif;font-size:18px;line-height:24px;margin:15px 0 0;text-align:center;text-transform:uppercase}.status-bar .count-bar{height:140px;-webkit-transform:opacity 1s ease-out;transform:opacity 1s ease-out;width:100%}.status-bar .count-bar>div{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;height:100%;justify-content:space-evenly}.status-bar .count-bar .count-number{color:#fff;font-family:Jost,Arial,Helvetica,sans-serif;font-size:42px;font-weight:800;line-height:48px;margin:0;text-align:center;text-shadow:0 2px 2px rgba(0,0,0,.451);text-transform:uppercase}.status-bar .count-bar .count-number.done{color:inherit}.status-bar .count-bar .count-number.active{color:#ff0!important}.status-bar .test-dock{background-color:#000;height:40px;width:100%}.status-bar .image-dock{display:flex;flex-direction:row;height:140px;padding:0 12%;width:100%}.status-bar .image-dock>div{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-evenly;width:100%}.status-bar .image-dock .trailsText{width:100px}.status-bar .image-box{background-color:blue;background-size:cover;border:2px solid #fff;border-radius:11px;box-shadow:inset -9px 17px 12px 0 rgba(86,91,90,.21);height:100px;width:100px}.status-bar .finish-dock{-webkit-transform:translateY(-90px);transform:translateY(-90px)}.status-bar .finish-dock h2{color:#af74ff;font-family:Jost,Arial,Helvetica,sans-serif;font-size:42px;font-weight:800;line-height:48px;margin:0;text-align:center;text-transform:uppercase}.status-bar .finish-dock h5{color:#fff;font-family:kyri_kapsregular,sans-serif;font-size:18px;line-height:24px;margin:0 0 15px;text-align:center;text-transform:uppercase}.status-bar .finish-dock-links>div{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-evenly;width:100%}.status-bar .finish-dock-links>div:nth-child(0),.status-bar .finish-dock-links>div:nth-child(2){width:25%}.status-bar .finish-dock-links .more-text{color:#424c4a;font-family:kyri_kapsregular,sans-serif;font-size:16px;line-height:20px;margin-right:10px;max-width:265px;text-align:center;text-shadow:0 2px 2px rgba(0,0,0,.1);text-transform:uppercase}.status-bar .finish-dock-links a.more-link{color:#af74ff;font-family:Jost,Arial,Helvetica,sans-serif;font-size:18px;font-weight:800;line-height:24px;margin:0;text-align:center;text-transform:uppercase}.status-bar .finish-dock-links a.more-link:hover{color:#ffaf1b}.status-bar .finish-dock-links img{margin:0 5px;max-width:30%}.finish-screen{height:calc(100vh - 140px);left:0;position:absolute;top:0}.finish-screen,.finish-screen>div{align-items:center;display:flex;flex-direction:row;justify-content:center;width:100%}.finish-screen>div{flex-wrap:nowrap}.finish-screen .btn{background-color:#af74ff;border:none;border-radius:10px;color:#fff;cursor:pointer;font-family:kyri_kapsregular,sans-serif;font-size:24px;max-width:160px;padding:10px 30px;transition:all .3s ease-out}.finish-screen .btn:hover{background-color:#ee9b02}.finish-screen .btn-again{-webkit-animation-delay:4s;animation-delay:4s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;background-color:#ffd61b;color:#af74ff;-webkit-transform:translateX(50px);transform:translateX(50px);z-index:2}.finish-screen .btn-again,.finish-screen .btn-save{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-name:fading;animation-name:fading;opacity:0}.finish-screen .btn-save{-webkit-animation-delay:4.5s;animation-delay:4.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-transform:translateX(-50px);transform:translateX(-50px)}.finish-screen .preview-white{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:scaling;animation-name:scaling;background:#fff;border-radius:20px;height:460px;max-height:98vw;max-width:98vw;padding:30px;position:relative;-webkit-transform:scale(0);transform:scale(0);width:460px}.finish-screen .preview-white .mixed{-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;top:-50px;z-index:2}.finish-screen .preview-white .emotions,.finish-screen .preview-white .mixed{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-name:fading;animation-name:fading;left:50%;opacity:0;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.finish-screen .preview-white .emotions{-webkit-animation-delay:3.5s;animation-delay:3.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;bottom:-35px}.finish-screen .preview-image{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:scaling2;animation-name:scaling2;background-color:pink;background-size:cover;border-radius:8px;height:100%;overflow:hidden;width:100%}.gifBtn{bottom:0;position:absolute;z-index:999999999999}.bg{background-position:50%;background-size:cover;height:100%;opacity:1;width:100%;will-change:opacity}@-webkit-keyframes scaling{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scaling{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes scaling2{0%{-webkit-transform:scale(0);transform:scale(0)}70%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scaling2{0%{-webkit-transform:scale(0);transform:scale(0)}70%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes fading{0%{opacity:0}to{opacity:1}}@keyframes fading{0%{opacity:0}to{opacity:1}}@-webkit-keyframes sizing{0%{height:0;width:0}to{height:100%;width:100%}}@keyframes sizing{0%{height:0;width:0}to{height:100%;width:100%}}@media(max-width:1024px)and (orientation:portrait){.main-btn button{font-size:18px;padding:20px}.wpb-game{top:12%}.rive{bottom:auto;left:50%;max-width:100%;position:absolute;top:65%}.main-btn{bottom:25%;bottom:auto;top:75%}.preview{left:auto;right:14px;top:14px;-webkit-transform:translate(0) scale(.5);transform:translate(0) scale(.5);-webkit-transform-origin:top right;transform-origin:top right}.instruction{max-width:100%;padding:40px;width:100%}.preview-white{border-radius:10px;padding:10px}.status-bar{height:160px}.status-bar .image-dock .trailsText{margin-right:12px}.status-bar .finish-dock-links{margin:0 10px}.status-bar .finish-dock-links>div{align-items:center;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-evenly;width:100%}.status-bar .finish-dock-links>div>div:nth-child(2){margin:8px 0}.trailsText>div:not(.instruction)>div{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-evenly}.status-bar .image-dock>div{justify-content:center}.status-bar .image-dock>div>div{margin:0 2px}.finish-screen{-webkit-transform:scale(.85) translateY(-60px)!important;transform:scale(.85) translateY(-60px)!important}.finish-screen>div{align-items:flex-end}.finish-screen .btn-again{bottom:40%;position:absolute;-webkit-transform:translateX(-10%);transform:translateX(-10%)}.finish-screen .btn-save{bottom:40%;position:absolute;-webkit-transform:translateX(10%);transform:translateX(10%)}.finish-screen .preview-white{height:580px;padding:24px;width:580px}.status-bar{-webkit-transform:translate(-50%,-40%) scale(1);transform:translate(-50%,-40%) scale(1)}.status-bar .finish-dock-links .more-text{text-shadow:none}}@media(max-width:580px){.rive{top:58%}.preview-white{height:460px;width:460px}.preview{-webkit-transform:translate(0) scale(.37);transform:translate(0) scale(.37)}.finish-screen .btn-again{bottom:30px;left:2%;position:absolute;-webkit-transform:translateX(10%);transform:translateX(10%)}.finish-screen .btn-save{bottom:30px;position:absolute;right:2%;-webkit-transform:translateX(-10%);transform:translateX(-10%)}.status-bar{-webkit-transform:translate(-50%,10%) scale(.9);transform:translate(-50%,10%) scale(.9)}}@media(max-width:375px){.main-btn{bottom:20%;max-width:90%}.instruction h2{font-size:36px}.rive{bottom:30%;left:50%;max-width:95%;position:absolute}.finish-screen{-webkit-transform:scale(.8) translateY(-60px)!important;transform:scale(.8) translateY(-60px)!important}.finish-screen .btn-again{bottom:auto;left:2%;position:absolute;top:calc(90% + 15px);-webkit-transform:translateX(10%);transform:translateX(10%)}.finish-screen .btn-save{bottom:auto;position:absolute;right:2%;top:calc(90% + 15px);-webkit-transform:translateX(-10%);transform:translateX(-10%)}.status-bar{-webkit-transform:translate(-50%,10%) scale(.75);transform:translate(-50%,10%) scale(.75)}}
/*# sourceMappingURL=main.7c9e17ea.css.map*/