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