@import url(https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap);.wrapper.mobile{display:flex;flex-direction:column;height:calc(100% - 42px)}.wrapper.desktop{display:flex}.react-resizable{position:relative;overflow:hidden;background-color:#2f3336}.documentation,.documentation-container{width:100%;height:100%}.documentation{border:0}.noClick{pointer-events:none;touch-action:none}.close-button{position:absolute;width:18px;height:18px;top:8px;right:16px;cursor:pointer}.close-button:hover{filter:brightness(1.1)}@media (max-width:1023px){.close-button{position:absolute;top:12px;right:12px;width:32px;height:32px}}.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:#22cc71;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}:root{--color1:#22cc71;--color2:#c3ced7;--color3:#454a4e;--color4:#2f3336;--color5:#232527;--color6:#22cc71;--color7:#fff}*{box-sizing:border-box!important;-moz-box-sizing:border-box!important;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0)}html{background:#111;box-sizing:border-box;overscroll-behavior:none;color:#fff}.sumo-range{font-size:11px}.rangeToggle:after{box-sizing:initial}hr{margin:0 10px 10px;border:0;height:1px;background:#555}*,:after,:before{box-sizing:inherit}body{font-family:Quicksand,sans-serif;font-size:14px;margin:0;overflow:hidden;padding:0;background:#2f3336}.noSelect{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.hide{display:none}ul{margin:0;padding:0}#outliner,a,input,select,textarea{outline:none}::-webkit-scrollbar{background-color:initial!important;width:5px}::-webkit-scrollbar-thumb{background:#222527!important;border-radius:60px;opacity:.7}#app-wrapper{position:fixed;width:100%;height:100%;background:#292929;padding-top:env(safe-area-inset-top);overflow:hidden}#app-wrapper.mobile{display:grid;grid-template-rows:42px auto}#app-wrapper.library-open{width:calc(100% - 200px)}#playerContainer{flex:1 1;height:100%}#player,#player-stopped,#playerCache{position:absolute;height:100%;width:100%;border:0;top:0;overflow:hidden}.player-center-container{pointer-events:none;position:absolute;display:flex;justify-content:center;align-items:center;text-align:center;height:100%;width:100%}.player-center-inner-container{height:170px;width:130px}.player-code-icon{width:10em;filter:opacity(.2)}.player-run-button{pointer-events:auto;background:none;color:#fff;font-size:14px;margin-top:15px;border-radius:25px;padding:10px;cursor:pointer;background:#22cc71}.player-run-button:hover{filter:brightness(1.1)}@media only screen and (max-width:1000px){.player-run-button{display:none}}.hidden-drop-layer--open{width:100%!important}#script{overflow:auto!important}.sumo-app{height:100vh}button,button:focus,input,input:focus,textarea,textarea:focus{outline:none}kbd{border:1px solid #ccc;border-radius:3px;padding:3px 5px;margin:3px;font-weight:700}.code-docs-panel{background-color:#ddd;color:#0a0a0a;top:2px;width:100%;padding:30px;margin-bottom:-35px;font-size:18px;transform:translateY(-20px)}.docs-show-code-button{position:absolute;top:10px;right:20px;border-radius:5px;border:2px solid;padding-bottom:3px;cursor:pointer;transition:color .5s}.docs-show-code-button:hover{border:3px solid;top:9px;right:19px;color:#9db3b5}.docs-checkbox{position:relative;width:2em;height:2em;color:#363839;border:1px solid #bdc1c6;border-radius:50%;-webkit-appearance:none;appearance:none;outline:0;cursor:pointer;transition:background .5s cubic-bezier(.1,.1,.25,1)}.docs-checkbox:before{position:absolute;content:"";display:block;top:3px;left:7px;width:6px;height:10px;border-color:#fff;border-style:solid;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0}.docs-checkbox:checked{color:#fff;border-color:#48985b;background:#48985b;border-radius:50%}.docs-checkbox:checked:before{opacity:1}.docs-checkbox:checked~.docs-label:before{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.docs-label{position:relative;cursor:pointer;font-size:1em;font-weight:600;margin-left:5px;top:-8px;color:#818192;-webkit-user-select:none;user-select:none}.docs-label:before{position:absolute;top:0;content:attr(data-content);-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);clip-path:polygon(0 0,0 0,0 100%,0 100%);text-decoration:line-through;text-decoration-thickness:3px;-webkit-text-decoration-color:#69697c;text-decoration-color:#69697c;transition:-webkit-clip-path .2s cubic-bezier(.25,.46,.45,.94);transition:clip-path .2s cubic-bezier(.25,.46,.45,.94);transition:clip-path .2s cubic-bezier(.25,.46,.45,.94),-webkit-clip-path .2s cubic-bezier(.25,.46,.45,.94)}.buttons-container-wide{display:flex}.play-stop-buttons{width:42px;height:42px}.play-stop-buttons.wide{width:126px}@media (max-width:1023px){.play-stop-buttons{position:fixed;margin:0 auto;top:unset;bottom:0}}.second-panel{position:relative;width:100%;flex:1 1}.code-editor-container,.first-panel{height:calc(100% - 42px)}.code-editor-container{position:absolute;width:100%}.wrapper{width:100%}.wrapper.desktop{width:100%;position:fixed;overflow:hidden}.wrapper.mobile .second-panel .code-editor-container{height:100%}input[type=range]{-webkit-appearance:none;background:#22cc71;border-radius:10px;margin:10px 0;height:8px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:20px;background:#c3ced7;cursor:pointer;pointer-events:all}.notification-text{color:#0a0a0a}.notification.closed{padding:0}.notification.warning.closed .notification-text{display:none}.modal-inputs-wrapper{display:grid;grid-template-columns:1fr 4fr;align-items:center;margin-bottom:15px}.modal-inputs-wrapper:last-child{margin:0}:root{--paint:#2da7cb;--tunes:#e5ab42;--threed:#3389c9;--code:#22cc71;--photo:#30b7a7;--audio:#7c60d9;--video:#c62e2d}:not(.dom-element,textarea){box-sizing:border-box;font-smoothing:antialiased;-webkit-font-smoothing:antialiased;-moz-font-smoothing:grayscale;-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{color:#c3ced7}nav.sumo-navbar li span{font-size:14px}nav.sumo-navbar{box-sizing:initial!important}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}.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-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 #22cc71}.sumo-square-highlighted-right{box-shadow:inset -4px 0 #22cc71}.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-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 10px;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:#c62e2d}.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}.curtain{position:fixed;z-index:1000000000000;top:0;left:0;right:0;bottom:0;background:#2f3336;display:flex;justify-content:center;align-items:center;flex-direction:column}.curtain-content{width:100px;height:125px;margin:0 auto;text-align:center}.curtain-content svg{width:100px;height:100px;border-radius:22%}.rotate-animation{animation:rotate .8s linear infinite;transform-origin:center center!important}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}