@import url(https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap);.tooltip{position:relative}.tooltip:after,.tooltip:before{opacity:0;display:block;pointer-events:none;position:absolute}.tooltip:before{background:rgba(0,0,0,.77);border-radius:25px;color:#fff;content:attr(data-title);font-size:14px;padding:6px 10px;top:30px;white-space:nowrap;z-index:999999999!important}.tooltip:after,.tooltip:before{transform:translate3d(0,-20px,0);transition:all .15s ease-in-out}.tooltip:hover:after,.tooltip:hover:before{opacity:1;transform:translateZ(0)}@media (max-width:1023px){.tooltip:after,.tooltip:before,.tooltip:hover:after,.tooltip:hover:before{display:none}}.toolbar{display:flex;align-items:center}.color-tools{height:42px}.color-input-wrapper,.colors{display:flex;align-items:center}.color-input-wrapper{justify-content:center;width:42px;height:42px}.toolbar .color-input{position:absolute;width:36px;height:36px;cursor:pointer;border:1px solid var(--color2);border-radius:2px;overflow:hidden}.toolbar .color-input:hover{border-color:var(--color7)}.toolbar select{display:inline-flex;padding:0 5px;position:relative;height:24px;cursor:pointer;background:#222;align-items:center;justify-content:center;border-radius:24px;color:#c3ced7;font-size:11px;white-space:nowrap;border:none}.toolbar select:active,.toolbar select:focus{outline:none}.toolbar select:after{content:"";transform:rotate(45deg);width:5px;height:5px;border:solid #c3ced7;border-width:0 1.5px 1.5px 0;display:inline-block;position:absolute;right:10px;top:6px}.toolbar .mode-tool{margin-right:10px;display:flex;align-items:center}.toolbar .mode-tool select{font-size:16px}.size-tool{width:42px;height:42px;display:flex;align-items:center;justify-content:center}.color-tools label,.mode-tool label,.size-tool label{color:#c3ced7;font-size:11px;display:inline-block;white-space:nowrap;text-align:left;align-self:center}.color-tools input[type=color]{font-size:16px}.size-tool .grid-sizing-slider{position:absolute;top:42px;background:#2f3336;padding:0 3px 7px;border:1px solid #454a4e}.size-tool .grid-sizing-slider input[type=range]{margin:5px}.color-swatches{position:absolute;top:44px;left:86px;background:#2f3336;width:100%;max-width:280px}.color-swatches .sumo-blue-title{margin-top:7px}.color-swatches .icon-close{position:absolute;right:15px;top:10px;z-index:1;background:transparent;border:none;padding:0;height:auto}.swatches-picker div{overflow-y:hidden!important;background:#2f3336}.code-tools,.grid-tools{display:flex}.grid-tools button{cursor:pointer;background:transparent;border:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px}.grid-tools button svg{fill:#c3ced7;width:24px;height:24px}.custom-swatches-picker{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;align-items:flex-start;justify-content:flex-start;width:100%;padding:10px;grid-gap:15px 5px;gap:15px 5px;overflow-y:scroll;max-height:calc(100vh - 120px);overflow-x:hidden}.custom-swatches-picker div{display:flex;align-items:center;flex-direction:column;grid-gap:2px;gap:2px}.custom-swatches-picker .swatches-single-color{width:48px;height:24px;cursor:pointer;border-radius:2px}@media (max-width:768px){.size-tool .grid-sizing-slider{position:absolute;bottom:42px;top:unset;right:0;padding:10px}.custom-swatches-picker .swatches-single-color{width:36px}.custom-swatches-picker{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;margin-top:15px;overflow:hidden}.color-swatches{max-width:none;position:fixed;bottom:42px;overflow:auto;height:70%;align-self:flex-end}.color-tools label{display:none}}.custom-swatches-picker .swatches-single-color:hover{opacity:.8}.tools{background:#2f3336;width:84px;height:calc(100% - 43px);text-align:center;-webkit-user-select:none;user-select:none}.sumo-blue-title{font-size:11px;text-transform:uppercase;color:#549ce2;padding-left:10px;text-align:left;margin-bottom:0}.tool,.tool-list{display:flex;align-items:center}.tool{justify-content:center;transition:all .1s ease-in-out 0s;width:42px;height:42px;cursor:pointer;position:relative;background:none;border:none}.tool.selected svg{fill:var(--color1)}@media (max-width:1023px){.tools{height:42px;width:100%}.sumo-blue-title{float:left;margin:0}.color-swatches{left:0}button.icon-close{top:0;height:32px}}canvas{position:absolute;z-index:9;left:50px;top:100px}.library-asset-drop.library-opened{width:100%!important;height:100%!important;top:0;left:0}.notifications{position:fixed;z-index:999999;top:48px;left:calc(50% - 143px);width:285px}.notifications .box{display:flex;min-height:48px;background:#c3ced7;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,.5)}.notifications .box .icon{display:flex;width:42px;height:60px;background:#7c60d9;align-items:center;justify-content:center;border-radius:10px 0 0 10px}.notifications .box.error .icon{background:#d12828}.notifications .box span.title{font-size:16px;color:#fff;margin-top:5px;display:inline-block}.notifications .box p{line-height:14px;font-size:11px;align-items:center;justify-content:center;display:flex;color:#222527;width:calc(100% - 42px)}.reactour__helper.reactour__helper--is-open{background:#2f3336;border-radius:10px;padding:20px;text-decoration:none;min-width:280px;max-width:320px}.reactour__helper.reactour__helper--is-open p{margin:0}.reactour__helper.reactour__helper--is-open p,.reactour__helper.reactour__helper--is-open span:not(.reactour-buttons span){font-size:14px}.reactour__helper.reactour__helper--is-open p{font-weight:700;color:#fff;margin-bottom:5px}.reactour-mask{color:#111;opacity:.8}#___reactour button.reactour-back:hover svg{fill:#333}.reactour__helper .reactour-badge{background:#d960cf;font-size:14px;padding:0;width:40px;height:25px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;border-radius:30px;position:absolute;top:-15px;left:-15px}#___reactour button{height:32px}#___reactour button.reactour-skip{color:#333}#___reactour button.reactour-back{margin-left:auto;margin-right:10px}.reactour-buttons{display:flex;align-items:center;justify-content:flex-start;margin-top:20px}.reactour__helper button[disabled]{opacity:.2;pointer-events:none}.reactour__helper .sumo-btn{width:auto;min-width:auto;margin:0}.code-gallery{display:flex;flex-direction:column;width:200px;height:100%;background:#2f3336;border:1px solid #454a4e;overflow-y:scroll;padding-bottom:40px}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#333}::-webkit-scrollbar-thumb{background:#454a4e}::-webkit-scrollbar-thumb:hover{background:#111}.code-gallery.closed{position:fixed;top:42px;transform:translateX(-85px);z-index:999;height:auto;width:85px;overflow:hidden;border:none;flex-direction:column;padding-bottom:0}.code-gallery .gallery-tab{cursor:pointer;text-transform:uppercase}.code-gallery.closed .gallery-tab{cursor:pointer;margin:0 3px 0 0;padding:8px 10px;text-align:center;border:1px solid #454a4e}.code-gallery .helper{padding:10px;margin:10px;background:#e5ab42;color:#111}.code-gallery ul{list-style:none;padding:10px;margin:0}.code-gallery li{border:1px solid #202020;padding:8px;cursor:pointer;background:#222727;border-radius:2px;margin-bottom:5px}.code-gallery li:hover{filter:invert(1)}.code-gallery li label{color:#fff;font-size:13px;display:block;margin-bottom:5px;cursor:inherit}.code-gallery li.category{border:none;background:none;padding:0}.code-gallery li.category label{color:var(--color1);text-transform:uppercase;font-size:10px;cursor:default;margin-top:15px}.code-gallery li.category:first-child label{margin-top:0}.code-gallery li.category:hover{filter:unset}#code-editor{height:100%;overflow:scroll}.ace-container{display:flex;width:100%;flex-direction:row;height:calc(100% - 42px)}.code-editor-wrapper{width:100%}.ace-container .frame-info{position:fixed;top:56px;left:16px;z-index:999}#code-editor-inner-wrapper{display:grid;grid-template-rows:1fr 20%;width:100%}.editors-wrapper .console{position:relative;bottom:0;right:0;max-height:200px;z-index:9999;background:#222727;width:100%;padding:10px;overflow-y:scroll;border-top:1px solid #2f3336;border-left:1px solid #2f3336}.console code span.log{color:#fff;padding:3px 6px;font-weight:700}.console code span.error{color:red;background:#fff;padding:3px 6px;font-weight:700}.ace-container button{position:absolute;top:42px;z-index:9999;right:370px;cursor:pointer;background:transparent;border:none;display:flex;align-items:center;height:42px}.ace-container button svg{fill:#fff}#playerCache{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;border:none;background:#222627}.ace_text-input{-webkit-user-select:all!important}.ace_editor,.ace_editor *{font-family:Monaco,Menlo,Ubuntu Mono,Droid Sans Mono,Consolas,monospace!important;font-size:12px!important;font-weight:400!important;letter-spacing:0!important}.ace-monokai{background-color:#222727}.ace-monokai .ace_gutter{background:#2f3336}.ace_editor :not(.dom-element textarea){font-family:Monaco,Menlo,Ubuntu Mono,Droid Sans Mono,Consolas,monospace!important}.modal-container{position:fixed;top:0;left:0;right:0;bottom:0;z-index:11;background:rgba(0,0,0,.6);display:flex;justify-content:center;align-items:center}.modal{position:relative;width:285px;height:auto;background:#2f3336;box-shadow:0 0 10px rgba(0,0,0,.5);border-radius:15px}.modal .title{width:100%;height:42px;color:#fff;text-align:center;display:flex;justify-content:center;align-items:center;background:#222527;border-radius:14px 14px 0 0;font-family:Quicksand;font-style:normal;font-weight:700;font-size:11px;line-height:14px;text-transform:uppercase}.modal-content .modal-login{display:flex;flex-direction:column}.modal-content .modal-login .field{width:100%;display:flex;justify-content:space-around;align-items:center;line-height:32px}.modal-content .modal-login .field label{width:90px}.modal .close{position:absolute;cursor:pointer;right:10px;top:13px;width:16px;height:16px;color:#fff;display:flex;align-items:center;justify-content:center;-webkit-box-align:center}.modal .close svg{width:100%;height:100%}.modal .body{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:20px}.modal .message{color:#c3ced7;font-size:11px;line-height:14px;padding:0}.flex-between{align-items:center}.flex-between,.modal .buttons{display:flex;justify-content:space-between}.modal .buttons{width:100%;height:30px;flex-direction:row}.modal button{width:33%;text-align:center;cursor:pointer;font-size:11px;line-height:14px;border-radius:15px;border:none}.modal button:active,.modal button:focus{outline:none}.modal .progress{width:100%;border:2px solid #aaa;height:24px}.modal .progress .meter{transform-origin:top left;height:100%;background:#7c60d9}.modal button.blue{color:#fff;background:#7c60d9}.modal button.white{border:1px solid rgba(195,206,215,.3);background:transparent;color:#fff}@media (max-width:1023px){.modal-container{align-items:flex-start;margin-top:50px}}button{touch-action:none;-webkit-touch-callout:none}.editors-wrapper{display:flex;flex-direction:row;width:100%;height:100%}.PixelEditor{font-family:sans-serif;text-align:center;width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:calc(100% - 42px - env(safe-area-inset-top));background:#222627;position:relative}.PixelEditor.code-editor{width:calc(100vw - 600px);min-width:555px}.scene{display:flex;flex-wrap:wrap;position:relative;background-color:#222727}.pixel.symmetry{border:1px solid #fff!important}.color-tools{display:flex}nav ul.colors{width:100%;display:flex;list-style:none;padding:10px;margin:0;flex-wrap:wrap;grid-gap:10px;gap:10px}.color{width:24px;height:24px;border-radius:50%;padding:0;border:1px solid #c3ced7;position:relative;cursor:pointer}.color.selected{border:6px solid #fff}button,button.shift{cursor:pointer}button.shift{background:transparent;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;opacity:.3}button.shift:hover{opacity:.7}button.up{top:-32px}button.down,button.up{-webkit-appearance:none;appearance:none;position:absolute;z-index:1;left:calc(50% - 16px)}button.down{bottom:-32px}button.left{left:-32px}button.left,button.right{-webkit-appearance:none;appearance:none;position:absolute;z-index:1;top:calc(50% - 16px)}button.right{right:-32px}.frame-control{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;bottom:-65px;position:absolute}.frame-control svg{width:100%;height:100%}.frame-control .help{display:flex;justify-content:center;width:100%;position:absolute;bottom:35px}.frame-control .help span{color:rgba(194,206,214,.3)}button.frame{min-width:24px;width:100%;background:#ccc;border:1px solid #000}button.frame,button.frame.add{height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.3}button.frame.add{background:transparent;border:none;width:24px}button.frame:hover{opacity:.7}button.frame.active{background:#fff;opacity:.7;border-radius:3px}.frames-wrapper{grid-gap:5px;gap:5px}.frames-wrapper,button.play{display:flex;align-items:center;justify-content:center}button.play{border:none;width:42px;height:42px;background:var(--color1)}button.play svg{width:24px;height:24px;fill:#fff}.mode-tool{position:absolute;left:144px;top:42px;border:1px solid var(--color3);height:42px;display:flex;align-items:center;padding:0 10px;background:var(--color4);border-top:0}.mode-tool>.sumo-select{display:flex;align-items:center;grid-gap:10px;gap:10px}.tools{position:fixed;top:calc(84px + env(safe-area-inset-top));left:0}.framerate-control{position:absolute!important;top:30px}.shift-control button.shift.right img{transform:rotate(180deg)}.shift-control button.shift.up img{transform:rotate(90deg)}.shift-control button.shift.down img{transform:rotate(-90deg)}@media (max-width:1023px){.PixelEditor{margin-left:unset}.tools{display:flex;align-items:center}}@media (max-width:768px){.frame-control{position:fixed;bottom:64px;left:0;right:0;margin:auto}.ace-container{bottom:42px;position:fixed;height:50%;overflow:auto}.PixelEditor.code-editor{position:fixed;top:42px;height:calc(50% - 84px);width:100%}.shift-control{display:none}.mode-tool{bottom:42px;left:0;top:unset;border:1px solid var(--color3);border-left:0}}*{box-sizing:border-box;touch-action:none;box-sizing:border-box!important;-moz-box-sizing:border-box!important;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;--color1:#d960cf;--color2:#c3ced7;--color3:#454a4e;--color4:#2f3336;--color5:#232527;--color6:#d960cf;--color7:#fff}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 5px 0 hsla(0,0%,100%,.2)}button:active,input:active,textarea:active{box-shadow:none}a:focus{text-decoration:underline}html{background:#111}body,html{overscroll-behavior-x:none}#root,body,html{height:100%}body{color:#fff;margin:0;background:#2f3336;overflow:hidden}.App{font-family:Quicksand,sans-serif;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);letter-spacing:.02em;top:0;padding-top:env(safe-area-inset-top)}.App,.spinner{position:fixed;left:0;right:0;bottom:0}.spinner{top:42px;z-index:9;display:flex;justify-content:center;align-items:center;background:#222627}.spinner svg{width:64px;height:64px}:root{--paint:#2da7cb;--tunes:#e5ab42;--threed:#3389c9;--code:#22cc71;--photo:#30b7a7;--audio:#7c60d9;--video:#c62e2d;--pixel:#d960cf}:not(.dom-element textarea){box-sizing:border-box;font-smoothing:antialiased;-webkit-font-smoothing:antialiased;-moz-font-smoothing:grayscale;font-family:Quicksand!important;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}input,textarea{-webkit-touch-callout:auto;-webkit-user-select:auto;user-select:auto}a,div,h1,h2,h3,h4,h5,h6,input,p,span,textarea{font-family:Quicksand;font-size:11px;color:#c3ced7}.sumo-text-small{font-size:11px}.sumo-text-default{font-size:14px}.sumo-text-regular{font-weight:500}.sumo-text-bold{font-weight:700}.sumo-red-title{font-size:11px;text-transform:uppercase;color:#c62e2d}.sumo-paint-text{color:#2da7cb}.sumo-tunes-text{color:#e5ab42}.sumo-pixel-text{color:#d960cf}.sumo-3d-text{color:#3389c9}.sumo-code-text{color:#22cc71}.sumo-photo-text{color:#30b7a7}.sumo-audio-text{color:#7c60d9}.sumo-video-text{color:#c62e2d}.sumo-icon-normal{width:24px;height:24px;cursor:pointer;fill:#c3ced7}.sumo-icon-normal:hover{fill:#fff}.sumo-icon-small{width:16px;height:16px;cursor:pointer}.sumo-rounded-icon{width:30px;height:30px;border-radius:30px}.sumo-rounded-icon,.sumo-square-icon,.sumo-square-toggle{display:flex;align-items:center;justify-content:center;cursor:pointer}.sumo-square-icon,.sumo-square-toggle{width:42px;height:42px;position:relative}.sumo-square-icon svg{fill:#c3ced7}.sumo-square-icon.stroke svg{fill:none;stroke:#c3ced7}.sumo-square-highlighted{box-shadow:inset 0 -4px #d960cf}.sumo-square-highlighted-right{box-shadow:inset -4px 0 #d960cf}.sumo-square-icon.sumo-square-highlighted svg{fill:#fff}.sumo-btn{height:30px;font-family:Quicksand;padding:8px 20px;font-weight:700;color:#fff;font-size:11px;border:1px solid;border-radius:100px;min-width:90px;text-align:center;display:inline-flex;align-items:center;justify-content:center;width:auto;outline:none;cursor:pointer;transition:all .1s ease-in-out}.sumo-btn-paint{background-color:#2da7cb;border-color:#2da7cb}.sumo-btn-tunes{background-color:#e5ab42;border-color:#e5ab42}.sumo-btn-pixel{background-color:#d960cf;border-color:#d960cf}.sumo-btn-3d{background-color:#3389c9;border-color:#3389c9}.sumo-btn-code{background-color:#22cc71;border-color:#22cc71}.sumo-btn-photo{background-color:#30b7a7;border-color:#30b7a7}.sumo-btn-audio{background-color:#7c60d9;border-color:#7c60d9}.sumo-btn-video{background-color:#c62e2d;border-color:#c62e2d}.sumo-btn-colored:hover{filter:brightness(1.1)}.sumo-btn-transparent{color:#c3ced7;background-color:#2f3336;border-color:#c3ced7}.sumo-btn-transparent:hover{background:#c3ced7;border-color:#c3ced7;color:#222527}.sumo-input{width:auto;display:inline-block;background:#222527;color:#c3ced7;border:none;border-radius:100px;height:24px;padding:0 10px;outline:none;font-size:11px}.sumo-input::placeholder{opacity:.4}.sumo-input[type=number]::-webkit-inner-spin-button,.sumo-input[type=number]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}.sumo-range input,.sumo-select select{background:#222527;border:none;outline:none;color:#c3ced7;font-size:11px;padding:0 30px 0 15px;height:24px;border-radius:100px;-webkit-appearance:none;cursor:pointer;width:100%}.sumo-range{max-width:52px}.sumo-select{min-width:55px}.sumo-range input{border-radius:100px 0 0 100px;width:100%}.sumo-range,.sumo-select{position:relative;display:inline-block}.rangeToggle:after,.selectToggle:after,.sumo-select:after{content:"";transform:rotate(45deg);width:5px;height:5px;border:solid #c3ced7;border-width:0 1.5px 1.5px 0;display:inline-block;position:absolute;right:10px;top:8px}.sumo-checkbox{position:relative;width:24px;height:24px;width:-webkit-max-content;width:max-content}.sumo-checkbox label{display:block;position:relative;padding-left:35px;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;width:-webkit-max-content;width:max-content;height:100%}.sumo-checkbox.checkbox-right label{padding:0}.sumo-checkbox.checkbox-right .checkmark,.sumo-checkbox.checkbox-right input{left:auto;right:-24px}.sumo-checkbox input{position:absolute;opacity:0;cursor:pointer;height:0;width:0;top:0}.sumo-checkbox p{margin:0;font-size:11px;color:#c3ced7;display:inline-block}.checkmark:after{left:9px;top:5px;width:4px;height:9px;border:solid #c3ced7;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkmark{position:absolute;top:0;left:0;background:#222527;width:24px;height:24px;border-radius:24px;cursor:pointer}.checkmark:after{content:"";position:absolute;display:none}.sumo-checkbox input:checked~.checkmark:after{display:block}.sumo-radio{width:24px;height:24px;border-radius:24px;background:#222527}.sumo-radio label{width:100%;height:100%;cursor:pointer}.sumo-radio input,.sumo-radio label{display:flex;align-items:center;justify-content:center}.sumo-radio input{width:12px;height:12px;-webkit-appearance:none;border-radius:12px;outline:none;margin:0}.sumo-radio input:checked{background:#c3ced7}.sumo-btn-colored:hover,.sumo-rounded-icon:hover,.sumo-square-icon:hover{filter:brightness(1.1)}.sumo-square-toggle:hover{filter:none}.modal-content .modal-content-highlighted{font-size:14px;font-weight:700;margin-bottom:10px}.modal-content a{color:#d960cf}.modal-content{text-align:left}.sumo-input-wrapper{display:flex;align-items:center;justify-content:space-between}.flex-align-center{display:flex;align-items:center;position:relative}input.sumo-input.adjustmentInput::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}body>iframe{display:none}