body,html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;height:100%;margin:0;padding:0;color:#fff;font-size:1em}body,button,html{font-family:Varela Round,Google Sans,sans-serif}#container,canvas{position:absolute;top:0;left:0;width:100%;height:100%;overscroll-behavior:none;user-select:none;touch-action:none;object-fit:cover}.hidden{opacity:0}#main{position:absolute;top:0;left:0;background:#191919;overscroll-behavior:none;user-select:none}#bg-container,#main{height:100%;width:100%;overflow:hidden}#bg-container{background-repeat:no-repeat;background-size:cover!important;background:#191919;background-position:50%;transition:background-color .3s linear}#bg-container .images-container,#bg-container img,#bg-container video{position:absolute;top:0;left:0;width:100%;height:100%}#bg-container img,#bg-container video{opacity:0;object-fit:cover}#ios-message,#safari-desktop-message{display:none;position:absolute;max-width:calc(100% - 160px);border-radius:11px;font-size:10px;padding:20px;bottom:120px}#ios-message a,#safari-desktop-message a{color:inherit}#ios-message{left:90px}#safari-desktop-message{right:32px}#rotate-device{visibility:hidden;position:absolute;display:flex;user-select:none;align-items:center;justify-content:center;flex-direction:column;z-index:10;top:0;left:0;width:100%;height:100%;padding:32px;box-sizing:border-box;text-align:center;background-color:rgba(51,52,88,.9)}canvas.painting{background-color:transparent}.dn{display:none}h1{position:absolute;width:100%;font-size:1.25rem;pointer-events:none;font-family:Varela Round,Roboto,sans-serif;transition:color .4s linear}canvas.frame{opacity:0}canvas.frame.shown{opacity:1;transition:opacity 1.5s linear .4s}@media only screen and (min-width:480px) and (max-width:855px) and (max-height:500px) and (orientation:landscape) and (hover:none){#rotate-device{visibility:visible}}button{border:none;height:48px;width:48px;padding:0 12px;border-radius:24px;color:#fff;background-color:transparent;background-size:contain;background-position:50%;background-repeat:no-repeat;cursor:pointer;outline:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:Google Sans,sans-serif}#header{display:flex;align-items:center;position:absolute;width:100%;text-align:center;top:12px;left:0;height:72px;pointer-events:none;visibility:hidden;opacity:0}select{pointer-events:all}#footer{position:absolute;justify-content:space-between;width:calc(100% - 64px);display:flex;bottom:32px;left:32px;pointer-events:none;visibility:hidden;opacity:0}#footer.shown,#header.shown{visibility:inherit;opacity:1;transition:opacity .6s linear .7s,visibility 0s linear .7s}#header.shown{transition-delay:.4s}#canvas-buttons,#instrument-buttons{border-radius:50px;height:72px}body.shared #canvas-buttons,body.shared #instrument-buttons{display:none}#footer button:hover{animation:wiggle .25s;animation-iteration-count:1}#canvas-buttons{padding-left:12px;justify-content:flex-end}#canvas-buttons button,#instrument-buttons button{padding:0;margin:0;transition:background-color .35s linear;pointer-events:all}#canvas-buttons button svg,#instrument-buttons button svg{width:30px;height:30px}#instrument-buttons button{margin-left:12px}#instrument-buttons-highlight{position:absolute;width:100%;height:calc(100% + 8px);top:-5px;left:-5px;background:transparent;border-radius:50px;opacity:0;visibility:hidden;border:1px solid transparent;transition:opacity .6s linear,visibility 0s linear .6s,box-shadow .8s cubic-bezier(.175,.885,.32,1.275),border-color .6s linear;pointer-events:none;user-select:none}#instrument-buttons-highlight.shown{transition-delay:0s;visibility:inherit;opacity:.5}#separator{width:1px;height:36px;margin-left:6px;margin-right:-6px;background-color:#fff;transition:background-color .35s linear}#canvas-buttons button{margin-right:12px}#footer div{display:flex;align-items:center}#footer div.stamps{display:none;opacity:0;padding-right:12px;transition:opacity .3s linear .2s}#footer div.stamps.active{display:flex;opacity:1}#header button{display:inline-block;margin-left:18px;background:#fff;color:#202020;width:36px;height:36px;border-radius:18px;cursor:pointer;pointer-events:all;font-weight:700;text-align:center;padding:0;vertical-align:middle}#header button:first-of-type{margin-left:32px}#header button#atmospheres-btn{width:auto;display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 14px 0 7px}#header button#atmospheres-btn p{padding-left:7px}body.shared #header button,body.shared #header button#atmospheres-btn{display:none}#header button svg{height:18px;display:inline-block;vertical-align:middle}#tempobtn{display:none}@keyframes wiggle{0%{transform:rotate(0deg) scale(1)}10%{transform:rotate(-10deg) scale(1.1)}50%{transform:rotate(15deg) scale(1.25)}90%{transform:rotate(-10deg) scale(1.1)}to{transform:rotate(0deg) scale(1)}}@keyframes pulse{0%{transform:rotate(0deg) scale(1) translateY(0)}5%{transform:rotate(-10deg) scale(1.3) translateY(-2px)}25%{transform:rotate(0deg) scale(1) translateY(0)}to{transform:rotate(0deg) scale(1) translateY(0)}}#sharing{position:absolute;top:0;width:100%;height:100%;background:rgba(25,25,25,.2);transition:opacity .5s linear,visibility 0s linear .5s}#sharing,#sharing svg{visibility:hidden}#sharing.shown{transition-delay:0s;opacity:1}#sharing.shown,#sharing.shown svg{visibility:inherit}#play-container{position:absolute;left:50%;top:auto;bottom:0;margin-left:-66px;width:132px;height:132px;visibility:hidden;opacity:0;transition:transform .7s cubic-bezier(.785,.135,.15,.86),opacity .6s linear}#play-container #playbtn,#play-container #player-bg,#play-container #player-cursor{position:absolute;left:50%;width:78px;height:78px;bottom:32px;border-radius:40px;margin-bottom:-3px;margin-left:-39px;box-sizing:border-box;border:3px solid #191919}#play-container #playbtn,#play-container #player-cursor{border-color:transparent}#play-container #player-cursor{border:none;transform-origin:bottom left;width:36px;height:36px;bottom:71px;margin-left:0}#play-container #player-cursor:before{position:absolute;content:" ";top:-12px;left:-1px;display:block;width:1px;height:24px;border-left:2px solid #fff;border-color:inherit}#play-container #player-strokes-canvas{opacity:.5;transition:opacity .3s linear;filter:blur(1px)}body.notouch #play-container:hover #player-strokes-canvas{opacity:1}#play-container.shown{visibility:inherit;opacity:1}#play-container svg{position:absolute;width:26px;height:26px;left:50%;top:50%;margin:-12px 0 0 -12px}#playbtn .play-icon{display:block}#play-container.playing #playbtn .play-icon,#playbtn .pause-icon{display:none}#play-container.playing #playbtn .pause-icon{display:block}.intro-container{z-index:10;flex-direction:column;position:absolute;left:0;top:-32px;width:100%;height:100%;pointer-events:none;display:flex;align-items:center;justify-content:center;justify-items:center;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.intro-container,.intro-container p{opacity:0;transition:opacity .2s ease}.intro-container p{top:0;margin-bottom:32px}.intro-container img{width:90%;max-width:500px}#atmospheres{position:absolute;top:0;width:100%;height:100%;visibility:hidden;text-align:center}#atmospheres.intro-completed{background:rgba(25,25,25,.9);cursor:pointer}#atmosphere-change-dialog{opacity:0;visibility:hidden;max-width:90%;z-index:1;position:absolute;top:50%;left:50%;background:#fff;border-radius:16px;text-align:center;color:#000;padding:32px;transform:translate(-50%,-50%);box-shadow:1px 2px 4px 3px rgba(0,0,0,.06)}#atmosphere-change-dialog p{margin-top:0}#atmosphere-change-dialog div{display:flex;justify-content:center}#atmosphere-change-dialog button{background:#91d4e7;color:#000;width:auto;max-height:36px;min-width:72px;margin-left:6px;margin-right:6px;padding:0 12px;white-space:nowrap}#atmosphere-subtitle{display:none;font-size:1.3em;font-weight:700;color:#ecebed;opacity:0;transition:color .8s linear}#atmosphere-back-btn{visibility:hidden;position:absolute;background:hsla(0,0%,100%,.7);color:#fff;width:auto;padding:0 24px;min-width:64px;transition:color .3s linear}#atmosphere-back-btn:hover{color:#6498eb}.atmosphere-card{position:absolute;top:0;left:0;width:300px;height:400px;min-height:46px;background:hsla(0,0%,100%,.7);color:#fff;text-align:center;cursor:pointer;pointer-events:all;font-weight:900;font-family:Varela Round,sans-serif;border-radius:8px;overflow:hidden;transition:background-color .3s linear,box-shadow .5s ease-in-out,color .3s linear}.atmosphere-card.selected,.atmosphere-card:hover{background-color:#ecebed;color:#6498eb}.atmosphere-card-img-container,.atmosphere-card-title{display:block;width:100%;text-align:center;float:left;overflow:hidden}.atmosphere-card-img-container{position:relative;height:calc(100% - 74px)}.smaller .atmosphere-card-img-container{height:calc(100% - 46px)}.atmosphere-card-img-container img{width:100%;height:100%;object-fit:cover}.atmosphere-card-title{border-top:none;height:70px;line-height:70px;font-size:26px;min-height:70px}.smaller .atmosphere-card-title{height:43px;line-height:43px;font-size:18px}#grid{position:absolute;top:0;left:0;pointer-events:none;user-select:none;opacity:0;visibility:hidden;transition:opacity .7s linear}#grid.shown{opacity:1}.grid-div{position:absolute;top:0;left:60px;border-top:1px solid hsla(0,0%,100%,.33);color:#fff;transition:transform .6s cubic-bezier(.455,.03,.02,.99)}.grid-div span{position:absolute;top:0;left:-30px;transform:translateY(-50%)}#tool,#tool-stamp{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none}#tool-stamp.shown,#tool.shown{visibility:inherit}#tool-stamp svg,#tool svg{position:absolute;width:40px;height:45px;top:-39px;left:-20px;pointer-events:none}.loader{position:relative;margin:0 auto}.loader:before{content:"";display:block;padding-top:100%}.loader.centered-loader{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px}.loader.centered-loader .path{stroke-width:12px}.loader p{opacity:.25;top:30px;text-align:center;min-width:175px;transform:translate(calc(-50% + 15px))}.circular,.loader p{position:absolute;left:0}.circular{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;top:0;bottom:0;right:0;margin:auto}.path{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;stroke-linecap:round;stroke-width:6px}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@keyframes color{0%,to{stroke:#6498eb}40%{stroke:#eb7b38}66%{stroke:#07c18b}80%,90%{stroke:#f197ba}}#shared-welcome{bottom:130px;padding:16px;border-radius:11px;transform:translateX(-50%)}#createmyownbtn,#shared-welcome{position:absolute;left:50%;width:auto;text-align:center;max-width:calc(100% - 64px);background:#fff;color:#191919;opacity:0;visibility:hidden;transition:opacity .4s linear,visibility 0s linear .4s}#createmyownbtn{display:inline-block;bottom:32px;height:72px;line-height:68px;margin-left:10px;padding:0 31px;border-radius:41px;border:3px solid #191919;text-transform:uppercase;font-weight:700;font-size:.9em}body.shared #createmyownbtn.shown,body.shared #shared-welcome.shown{opacity:1;visibility:inherit;transition-delay:.5s}body.shared #play-container.played{transform:translateX(-82px)}#shared-strokes-loader{position:absolute;top:70px;left:50%;pointer-events:none;user-select:none;display:none;font-family:Google Sans;font-weight:700;text-transform:uppercase;font-size:9px;transform:translateX(-50%);opacity:.75}#about,#limit-message,#scale-info{position:absolute;top:80px;left:30px;width:390px;max-width:calc(100% - 60px);background:#fff;color:#191919;padding:20px;opacity:0;visibility:hidden;transition:opacity .4s linear,visibility 0s linear .4s;border-radius:11px;box-sizing:border-box;font-family:Google Sans,sans-serif}#about.shown,#limit-message.shown,#scale-info.shown{opacity:1;visibility:inherit;transition-delay:0s}#about a,#limit-message a,#scale-info a{color:inherit}#aboutclosebtn,#limitclosebtn,#scaleclosebtn{display:inline-block;border:none;background:#191919;color:#fff;width:36px;height:36px;border-radius:18px;cursor:pointer;font-weight:700;text-align:center;padding:0;vertical-align:middle}#limit-message,#scale-info{top:auto;left:auto;bottom:120px;right:30px;width:200px}.helper-message{position:absolute;top:0;left:0;padding:14px 0 14px 14px;max-width:calc(100% - 60px);color:#191919;opacity:0;visibility:hidden;transition:opacity .4s linear,visibility 0s linear .4s;border-radius:11px;box-sizing:border-box;user-select:none;pointer-events:none;font-size:12px;font-weight:700;font-family:Google Sans,sans-serif}.helper-message.shown{opacity:1;visibility:inherit;transition-delay:0s}.helper-message .helper-closebtn{display:inline;color:#fff;width:20px;min-width:20px;height:20px;font-size:7px;border-radius:10px;border:1px solid;border-color:inherit;cursor:pointer;font-weight:700;text-align:center;padding:0;vertical-align:middle;pointer-events:all;margin-left:10px}.helper-message div.bg-arrow{position:absolute;bottom:0;left:50%;width:10px;height:1px;border-radius:2px;background-color:#fff}.helper-message div.bg-arrow.arrow-left{transform:rotate(45deg);margin-left:-6px}.helper-message div.bg-arrow.arrow-right{transform:rotate(-45deg);margin-left:0}.helper-message div.bg-arrow.line-left,.helper-message div.bg-arrow.line-right{width:20px}.helper-message div.bg-arrow.line-left{margin-left:-24px;transform:translateY(-3px)}.helper-message div.bg-arrow.line-right{margin-left:8px;transform:translateY(-3px)}#helper-instruments{transform:translateY(-100%);margin-top:-20px;border-color:inherit}#helper-instruments div.bg-arrow{left:72px}#helper-sharing{left:28px;top:80px;border-color:inherit}#helper-sharing div.bg-arrow{left:74px;bottom:auto;top:0}#helper-sharing div.bg-arrow.arrow-right{transform:rotate(45deg)}#helper-sharing div.bg-arrow.arrow-left{transform:rotate(-45deg)}#helper-sharing div.bg-arrow.line-left,#helper-sharing div.bg-arrow.line-right{transform:translateY(3px)}#helper-canvas{position:absolute;top:50%;left:50%;max-width:100%;color:#000;opacity:0;visibility:hidden;user-select:none;pointer-events:none;text-align:center;text-transform:uppercase;background:#fff;border-radius:20px;padding:30px;transform:translate(-50%,-50%);transition:color .5s linear,background-color .5s linear;box-shadow:1px 2px 4px 3px rgba(0,0,0,.06)}#helper-canvas #helper-canvas-strokes{position:relative;opacity:1}#helper-canvas #helper-cursor{position:absolute;width:21px;height:32px;top:27px;left:27px;background:url(cursor.124bd714.png);background-repeat:no-repeat;background-size:21px 32px}.tooltip{display:inline-block;position:absolute;top:0;left:0;padding:10px 15px;background:#fff;color:#191919;border-radius:20px;font-size:.7em;font-weight:700;visibility:hidden;opacity:0;transform:translate(-50%,-100%);transition:opacity .3s linear,visibility 0s linear .3s;pointer-events:none;word-wrap:none;white-space:nowrap;z-index:999;font-family:Google Sans}.tooltip:before{display:block;content:" ";position:absolute;top:100%;left:50%;margin-left:-6px;width:0;height:0;border-color:#fff transparent transparent;border-style:solid;border-width:5px 6px 0}.tooltip.inversed-colors{background:#191919;color:#fff}.tooltip.inversed-colors:before{border-color:#191919 transparent transparent}.tooltip.tooltip-right{transform:translateY(-50%)}.tooltip.tooltip-right:before{top:50%;margin-left:1px;margin-top:-6px;left:-5px;border-width:6px 5px 6px 0;border-color:transparent #fff transparent transparent}.tooltip.tooltip-right.inversed-colors:before{border-color:transparent #191919 transparent transparent}.tooltip.shown{transition-delay:0s;opacity:1;visibility:inherit}body.mobile #footer div.stamps,body.touch #footer div.stamps{padding:0;flex-direction:column}body.mobile #createmyownbtn,body.touch #createmyownbtn{line-height:0;padding:0 16px;bottom:44px;height:48px;box-sizing:border-box}body.mobile #canvas-buttons,body.mobile #instrument-buttons,body.touch #canvas-buttons,body.touch #instrument-buttons{height:36px;width:36px;padding:0;justify-content:center}body.mobile #canvas-buttons button,body.mobile #instrument-buttons button,body.touch #canvas-buttons button,body.touch #instrument-buttons button{margin:0;display:inline-block;vertical-align:middle}body.mobile #canvas-buttons button#gridbtn,body.mobile #canvas-buttons button#tempobtn,body.mobile #canvas-buttons button#undobtn,body.mobile #instrument-buttons button#gridbtn,body.mobile #instrument-buttons button#tempobtn,body.mobile #instrument-buttons button#undobtn,body.touch #canvas-buttons button#gridbtn,body.touch #canvas-buttons button#tempobtn,body.touch #canvas-buttons button#undobtn,body.touch #instrument-buttons button#gridbtn,body.touch #instrument-buttons button#tempobtn,body.touch #instrument-buttons button#undobtn{display:none}body.mobile #canvas-buttons button.helper-closebtn,body.mobile #instrument-buttons button.helper-closebtn,body.touch #canvas-buttons button.helper-closebtn,body.touch #instrument-buttons button.helper-closebtn{margin-left:10px}body.mobile #canvas-buttons button svg,body.mobile #instrument-buttons button svg,body.touch #canvas-buttons button svg,body.touch #instrument-buttons button svg{width:18px;height:18px;display:inline-block;vertical-align:middle}body.mobile #instrument-buttons,body.touch #instrument-buttons{height:auto;flex-direction:column}body.mobile #instrument-buttons button.instrument.active,body.touch #instrument-buttons button.instrument.active{transform:scale(.8)}body.mobile #instrument-buttons #helper-instruments,body.touch #instrument-buttons #helper-instruments{padding:14px 0;left:-8px}body.mobile #instrument-buttons #helper-instruments div.bg-arrow,body.touch #instrument-buttons #helper-instruments div.bg-arrow{left:25px}body.mobile #atmospheres,body.touch #atmospheres{z-index:1}body.mobile #atmospheres-btn p,body.touch #atmospheres-btn p{display:none}body.mobile #atmospheres-btn,body.touch #atmospheres-btn{padding:0!important}body.mobile #canvas-buttons,body.touch #canvas-buttons{position:absolute;bottom:0;right:0}body.mobile #separator,body.touch #separator{width:18px;height:1px;margin-left:0;margin-right:0}body.mobile button,body.touch button{height:36px;width:36px;padding:0;border-radius:18px}body.mobile #helper-sharing,body.touch #helper-sharing{display:none}body.mobile #helper-cursor,body.touch #helper-cursor{background-image:none!important}body.mobile #helper-cursor:before,body.touch #helper-cursor:before{display:block;content:" ";position:absolute;top:-10px;left:-10px;width:24px;height:24px;border-radius:12px;background-color:#000;opacity:.75}@media (max-width:850px){#footer div.stamps{padding:0;flex-direction:column}#createmyownbtn{line-height:0;padding:0 16px;bottom:44px;height:48px;box-sizing:border-box}#canvas-buttons,#instrument-buttons{height:36px;width:36px;padding:0;justify-content:center}#canvas-buttons button,#instrument-buttons button{margin:0;display:inline-block;vertical-align:middle}#canvas-buttons button#gridbtn,#canvas-buttons button#tempobtn,#canvas-buttons button#undobtn,#instrument-buttons button#gridbtn,#instrument-buttons button#tempobtn,#instrument-buttons button#undobtn{display:none}#canvas-buttons button.helper-closebtn,#instrument-buttons button.helper-closebtn{margin-left:10px}#canvas-buttons button svg,#instrument-buttons button svg{width:18px;height:18px;display:inline-block;vertical-align:middle}#instrument-buttons{height:auto;flex-direction:column}#instrument-buttons button.instrument.active{transform:scale(.8)}#instrument-buttons #helper-instruments{padding:14px 0;left:-8px}#instrument-buttons #helper-instruments div.bg-arrow{left:25px}#atmospheres{z-index:1}#atmospheres-btn p{display:none}#atmospheres-btn{padding:0!important}#canvas-buttons{position:absolute;bottom:0;right:0}#separator{width:18px;height:1px;margin-left:0;margin-right:0}button{height:36px;width:36px;padding:0;border-radius:18px}#helper-sharing{display:none}#header{flex-direction:column;align-items:flex-start;height:auto}#header button,#header button:first-of-type{margin-left:32px;margin-top:18px}#header h1{top:10px}}
/*# sourceMappingURL=main.637abf5d.css.map */