.react-var-ui-disabled{pointer-events:none}.react-var-ui-disabled>*{opacity:.5}.react-var-ui-read-only .react-var-ui-interactive{pointer-events:none}.react-var-ui-category{padding-bottom:1rem}.react-var-ui-category-title{display:flex;align-items:center;justify-content:space-between;color:var(--react-var-ui-foreground-color, #ddd);text-transform:uppercase;font-size:.7rem;padding:.4rem;-webkit-user-select:none;user-select:none;font-weight:700}.react-var-ui-category-collapse{background:none;border:none;color:var(--react-var-ui-foreground-color, #ddd);font-size:0;cursor:pointer}.react-var-ui-color{display:flex;align-items:center;position:relative;margin-left:1rem}.react-var-ui-color .sketch-picker{position:absolute;top:1rem;right:-3rem}.react-var-ui-color-color{position:relative;width:2.5rem;height:1.2rem;border-radius:.2rem}.react-var-ui-color-swatch{border-radius:.2rem;display:inline-block;cursor:pointer;background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAAxSURBVDhPY2RgYBABYnzgDT5JxlEDGIZJGBBIBvjTCSgMCAG8CW3UAAZwQiIEaBuIACBfCLFwf0bOAAAAAElFTkSuQmCC) center center}.react-var-ui-color-popover{position:absolute;z-index:4}.react-var-ui-color-cover{position:fixed;top:0;right:0;bottom:0;left:0}.react-var-ui-toggle{position:relative;width:2.5rem;height:1.2rem}.react-var-ui-toggle-helper{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--react-var-ui-input-background-color, #353542);border-radius:.2rem;transition:.2s ease-in-out all;cursor:pointer}.react-var-ui-toggle-helper:before{position:absolute;height:.8rem;width:.8rem;left:.3rem;top:.2rem;border-radius:1rem;background-color:var(--react-var-ui-foreground-color, #ddd);content:"";transition:.2s ease-in-out all}.react-var-ui-toggle input{width:0;height:0;opacity:.01}.react-var-ui-toggle input:checked+.react-var-ui-toggle-helper{background:var(--react-var-ui-accent-color, #77f)!important}.react-var-ui-toggle input:checked+.react-var-ui-toggle-helper:before{transform:translate(1.1rem)}.react-var-ui-select select{width:100%;background:var(--react-var-ui-input-background-color, #353542);border:none;border-radius:.2rem;color:var(--react-var-ui-foreground-color, #ddd);padding:.2rem .5rem}.react-var-ui-select select:hover,.react-var-ui-select select:focus{background:var(--react-var-ui-input-background-hover-color, #424253)}.react-var-ui-string-multiline,.react-var-ui-string input{width:100%;min-width:100%;max-width:100%;background:var(--react-var-ui-input-background-color, #353542);border:none;border-radius:.2rem;color:var(--react-var-ui-foreground-color, #ddd);padding:.2rem .5rem;outline:none!important;box-sizing:border-box;border-radius:.4rem}.react-var-ui-string-multiline:hover,.react-var-ui-string-multiline:focus,.react-var-ui-string input:hover,.react-var-ui-string input:focus{background:var(--react-var-ui-input-background-hover-color, #424253)}.react-var-ui-string-multiline{margin-top:.4rem;font-family:inherit;padding:.5rem;font-size:.8rem;min-height:2rem}.react-var-ui-label{display:grid;grid-template-columns:1fr 2fr;padding:.5rem 1rem;font-size:.8rem;color:var(--react-var-ui-foreground-color, #ddd);background:var(--react-var-ui-label-background-normal-color, #22222a);border-bottom:1px solid var(--react-var-ui-label-border-color, #33333a);-webkit-user-select:none;user-select:none}.react-var-ui-label-column{display:block}.react-var-ui-label:first-child{border-top:1px solid var(--react-var-ui-label-border-color, #33333a)}.react-var-ui-label:hover{background:var(--react-var-ui-label-background-hover-color, #2a2a33)}.react-var-ui-label>span{display:flex;align-items:center}.react-var-ui-label>span:last-child{justify-content:flex-end}.react-var-ui-label-has-label>span:first-child{margin-right:.2rem}.react-var-ui-label-no-label{grid-template-columns:1fr}.react-var-ui-slider,.react-var-ui-number{display:flex;align-items:center;justify-content:flex-end;width:100%}.react-var-ui-slider-track,.react-var-ui-number-track{background:var(--react-var-ui-input-background-color, #353542);position:relative;flex:1;height:1.3rem;border-radius:.2rem;overflow:hidden;cursor:pointer;margin-right:.4rem;touch-action:none}.react-var-ui-slider-content,.react-var-ui-number-content{background:var(--react-var-ui-accent-color, #77f);position:absolute;top:0;bottom:0;left:0;pointer-events:none}.react-var-ui-slider input,.react-var-ui-number input{width:2.5rem;background:var(--react-var-ui-label-background-normal-color, #22222a);border:none;-moz-appearance:textfield;color:var(--react-var-ui-foreground-color, #ddd);outline:none!important;height:1.3rem;padding:0 .2rem;text-align:right;border-radius:.25rem}.react-var-ui-slider input::-webkit-outer-spin-button,.react-var-ui-slider input::-webkit-inner-spin-button,.react-var-ui-number input::-webkit-outer-spin-button,.react-var-ui-number input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.react-var-ui-slider span,.react-var-ui-number span{width:2.5rem;text-align:right}.react-var-ui-slider button,.react-var-ui-number button{background:var(--react-var-ui-label-background-normal-color, #22222a);border:none;cursor:pointer;color:var(--react-var-ui-foreground-color, #ddd);height:1.3rem;margin-left:.4rem;border-radius:.25rem;display:flex;justify-content:center;align-items:center}.react-var-ui-number input{flex:1;max-width:10rem;background:var(--react-var-ui-input-background-color, #353542)}.react-var-ui-number input:hover,.react-var-ui-number input:focus{background:var(--react-var-ui-input-background-hover-color, #424253)}.react-var-ui-xy-value{display:inline-block!important;text-align:right}.react-var-ui-xy-space{margin-top:.5rem;margin-bottom:.3rem;width:100%;height:250px;background:var(--react-var-ui-input-background-color, #353542);position:relative;cursor:pointer;border-radius:.4rem;overflow:hidden;touch-action:none}.react-var-ui-xy-control{background:var(--react-var-ui-accent-color, #77f);width:1rem;height:1rem;border-radius:100%;transform:translate(-50%,-50%);position:absolute;pointer-events:none}.react-var-ui-xy-control:after,.react-var-ui-xy-control:before{content:"";position:absolute;background:var(--react-var-ui-accent-color, #77f);opacity:.5}.react-var-ui-xy-control:before{top:-100rem;bottom:-100rem;left:calc(50% - 1px);width:1px}.react-var-ui-xy-control:after{left:-100rem;right:-100rem;top:calc(50% - 1px);height:1px}.react-var-ui-angle{display:flex;justify-content:center;align-items:center;padding-top:1rem}.react-var-ui-angle-value{justify-content:flex-end}.react-var-ui-angle-control{width:6rem;height:6rem;background:var(--react-var-ui-input-background-color, #353542);position:relative;border-radius:100%;cursor:pointer;touch-action:none}.react-var-ui-angle-control:after{display:block;position:absolute;left:calc(50% - .5rem);top:.5rem;width:1rem;height:1rem;background:var(--react-var-ui-accent-color, #77f);border-radius:100%;content:""}.react-var-ui-image,.react-var-ui-media,.react-var-ui-file{margin-top:.5rem;margin-bottom:.3rem;width:100%;height:150px;background-color:var(--react-var-ui-input-background-color, #353542);position:relative;border-radius:.4rem;overflow:hidden;touch-action:none;display:flex;justify-content:center;align-items:center;cursor:pointer}.react-var-ui-image-value,.react-var-ui-media-value,.react-var-ui-file-value{display:inline-block!important;text-align:right;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.react-var-ui-image-background,.react-var-ui-image-metadata,.react-var-ui-image-audio,.react-var-ui-media-background,.react-var-ui-media-metadata,.react-var-ui-media-audio,.react-var-ui-file-background,.react-var-ui-file-metadata,.react-var-ui-file-audio{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0}.react-var-ui-image video,.react-var-ui-media video,.react-var-ui-file video{width:100%;height:100%;object-fit:cover}.react-var-ui-image-audio,.react-var-ui-media-audio,.react-var-ui-file-audio{display:block;top:auto;width:100%;height:50px;z-index:5;pointer-events:all}.react-var-ui-image-background,.react-var-ui-media-background,.react-var-ui-file-background{background-size:cover;background-position:50% 50%;filter:brightness(.5) grayscale(.5);transition:.2s ease-in-out all;transform:scaleZ(1)}.react-var-ui-image-metadata,.react-var-ui-media-metadata,.react-var-ui-file-metadata{padding:10px}.react-var-ui-image:hover .react-var-ui-image-background,.react-var-ui-image:hover .react-var-ui-media-background,.react-var-ui-image:hover .react-var-ui-file-background,.react-var-ui-media:hover .react-var-ui-image-background,.react-var-ui-media:hover .react-var-ui-media-background,.react-var-ui-media:hover .react-var-ui-file-background,.react-var-ui-file:hover .react-var-ui-image-background,.react-var-ui-file:hover .react-var-ui-media-background,.react-var-ui-file:hover .react-var-ui-file-background{filter:brightness(.7) grayscale(.2);transform:scale3d(1.05,1.05,1)}.react-var-ui-image svg,.react-var-ui-media svg,.react-var-ui-file svg{width:25px;height:25px;z-index:1;pointer-events:none}.react-var-ui-image input,.react-var-ui-media input,.react-var-ui-file input{position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;opacity:.001;width:100%;z-index:2}.react-var-ui-file,.react-var-ui-angle,.react-var-ui-xy{grid-column:1/3}.react-var-ui-button button{width:100%;color:var(--react-var-ui-foreground-color, #ddd);background:var(--react-var-ui-input-background-color, #353542);border:none;border-radius:.4rem;padding:.4rem 1rem;cursor:pointer}.react-var-ui-button button:hover{background:var(--react-var-ui-input-background-hover-color, #424253)}.react-var-ui-button button:active{background:var(--react-var-ui-input-background-pressed-color, #2b2b37)}*{scrollbar-color:rgba(0,0,0,.3) rgba(0,0,0,0)}*::-webkit-scrollbar{width:16px}*::-webkit-scrollbar-track{background:rgba(0,0,0,0)}*::-webkit-scrollbar-thumb{background-color:#0000004d;background-clip:content-box;border:5px solid transparent;border-radius:10px}*::-webkit-scrollbar-thumb:hover{background-color:#00000080;border:3px solid transparent}:root{--color-bg: #11111a;--color-bg-panel: #22222a;--color-bg-interactive: #33333a;--color-bg-interactive-hover: #44444a;--color-accent: #77f;--color-fg-soft: #aaa;--color-fg: #ddd}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--color-bg);color:var(--color-fg);overflow:hidden;-webkit-user-select:none;user-select:none}.panel{background:var(--color-bg-panel)}.menu{list-style-type:none;padding:10px 5px;display:flex;align-items:center;margin:0;border-bottom:2px solid var(--color-bg)}.menu li{margin-right:10px}.menu .logo{font-weight:700;padding:0 10px}.menu .logo img{max-height:20px;margin-right:7px}.side{border-left:2px solid var(--color-bg);width:400px;overflow-y:auto}.tabs{padding-top:5px;display:flex;padding-left:5px}.tabs .tab{background:var(--color-bg-interactive);padding:0 5px;margin-right:5px;display:inline-flex;align-items:center}.tabs .tab.selected{background:var(--color-bg-interactive-hover)}.tabs .tab button{background:none;padding:0;line-height:0}button{border:none;background:var(--color-bg-interactive);color:var(--color-fg);border-radius:4px;padding:5px 10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}button:not(:disabled):hover,button:not(:disabled).selected{background:var(--color-bg-interactive-hover)}button:disabled{cursor:not-allowed;opacity:.5}button svg:not(:last-child){margin-right:7px}.v-stack{display:flex;flex-direction:column}.h-stack{display:flex;flex-direction:row}.flex{flex:1}.ui{height:100vh;max-height:100vh}.workspace{display:flex;max-height:calc(100% - 50px)}.workspace .canvas-area{display:flex;justify-content:center;align-items:center}.workspace .canvas-area canvas{max-width:100%;max-height:calc(100vh - 100px);box-shadow:0 0 15px 5px #0000004d;background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAAxSURBVDhPY2RgYBABYnzgDT5JxlEDGIZJGBBIBvjTCSgMCAG8CW3UAAZwQiIEaBuIACBfCLFwf0bOAAAAAElFTkSuQmCC) center center}.workspace .canvas-area .animation-open canvas{max-height:calc(100vh - 400px)}.subpanel{padding:5px 10px;margin-bottom:10px}.subpanel>strong{display:block;margin-bottom:10px}.layers{max-height:400px;overflow-y:scroll}.layer{padding:10px;border-bottom:1px solid var(--color-bg-interactive);display:flex;align-items:center;--depth: 0;padding-left:calc(10px + 10px * var(--depth));position:relative}.layer .layer-indicator{position:absolute;border-top:3px solid var(--color-accent);--depth: 0;left:calc(15px + 10px * var(--depth));right:0;z-index:9999999;top:0}.layer .layer-indicator:before{display:block;content:"";position:absolute;left:0;top:-.5rem;width:.8rem;height:.8rem;border-radius:.8rem;background:var(--color-accent)}.layer.ghost button,.layer.ghost svg,.layer.ghost span{opacity:0}.layer.clone{opacity:.3}.layer svg{margin-right:5px}.layer.selected{background:var(--color-bg-interactive)}.layer button{line-height:0;padding:5px;background:none;margin-right:10px}.layer-actions{margin-top:5px}.layer-actions button{margin-right:5px}.lower-opacity{opacity:.5}.input-wrapper{display:flex;align-items:center}.input-wrapper>span{margin-right:5px}.overlay{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.6);display:flex;justify-content:center;align-items:center;z-index:9999}.modal{background:var(--color-bg-panel);box-shadow:0 0 15px 5px #0000004d;width:600px}.modal .actions,.modal .action,.modal .info{padding:20px}.modal .actions{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px}.modal .actions button,.modal .action{display:flex;align-items:center;justify-content:center}.modal .action button{display:flex;align-items:center;justify-content:center;width:50%}.modal .info:not(:last-child){border-bottom:1px solid var(--color-bg)}.modal>.title{padding:20px;font-size:30px;font-weight:700;display:flex;align-items:center;justify-content:space-between;background:var(--color-bg)}.modal>.title .close{background:none;padding:0}.modal>.title .close svg{height:25px;width:25px}.logo{display:flex;align-items:center}.logo .badge{background:var(--color-accent);padding:.3em .5em;border-radius:5px;font-size:.6em;margin-left:.5em}.logo img{max-height:1em;margin-right:.3em}.filter-gallery{padding:20px;display:grid;grid-template-columns:150px 1fr;min-width:400px;grid-gap:10px}.filter-gallery .categories{height:500px;overflow-y:auto}.filter-gallery .categories button{display:block;width:100%;margin-bottom:5px}.filter-gallery .filters{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-gap:5px}.filter-gallery .filters button{height:75px}a{color:var(--color-fg-soft)}.webgl-error{padding:15px}.preview-wrap{position:relative;z-index:0}.offset-mark{position:absolute;z-index:999;top:calc(50% - 5px);left:calc(50% - 5px);width:10px;height:10px;border:2px solid var(--color-fg);border-radius:50%;cursor:move}.react-var-ui{margin:0 -10px}.react-var-ui-xy-space{height:150px}.overlay.drag{opacity:0;pointer-events:none;transition:.3s ease-in-out all}.overlay.drag.dropping{opacity:1;pointer-events:all}.overlay.drag .body{display:flex;align-items:center;flex-direction:column}.overlay.drag .body svg{display:block;width:5rem;height:5rem;margin-bottom:.5rem}.webcam video{width:100%}.webcam canvas{width:100%;height:auto}.webcam .hidden{display:none}.curve-editor{touch-action:none}.curve-editor circle{touch-action:none}.curve-editor path{touch-action:none}.curve-editor .curve:hover{stroke-width:4px;cursor:ns-resize}.curve-editor .curve-point:hover{stroke:var(--color-accent);stroke-width:2px;cursor:pointer}.curve-editor .fill-path{pointer-events:none}.clip-editor{touch-action:none}.clip-editor rect{touch-action:none}.clip-editor path{touch-action:none}.clip-editor .clip-absolute{pointer-events:none;opacity:.5}.clip-editor .clip-start:hover,.clip-editor .clip-end:hover{stroke-width:4px;cursor:ew-resize}.clip-editor .clip:hover{cursor:move}.clip-editor .fill-path{pointer-events:none}.time-display{-webkit-user-select:none;user-select:none;touch-action:none;cursor:move}.time-display rect{cursor:pointer;z-index:9999}.time-display .time-decoration{pointer-events:none}.timeline{display:grid;grid-template-columns:200px 1fr;background:var(--color-bg-panel);color:var(--color-fg);position:relative;-webkit-user-select:none;user-select:none;overflow-y:auto;overflow-x:hidden}.timeline *{box-sizing:border-box}.timeline .timeline-item-wrapper,.timeline .timeline-info{border-bottom:1px solid var(--color-bg-interactive);position:relative;z-index:4}.timeline .timeline-item-wrapper>svg{position:absolute}.timeline .timeline-info{display:flex;align-items:center;border-right:2px solid var(--color-bg-interactive);justify-content:space-between;padding-right:5px;overflow:hidden;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all}.timeline .timeline-info span{padding:5px 10px}.timeline .timeline-info-layer{border-left:5px solid var(--color-accent);cursor:pointer}.timeline .timeline-info-property{border-left:10px solid var(--color-accent)}.timeline .clip-editor,.timeline .time-display{display:block;position:absolute}.time-background,.time-foreground{position:absolute;left:200px;right:0;top:0;bottom:0;height:100%;z-index:99999;opacity:.2;pointer-events:none}.time-foreground{opacity:1;z-index:100000}.time-display-head{position:absolute;width:2px;background:var(--color-accent);bottom:0;top:0}.timeline-wrapper{background:var(--color-bg-panel);height:300px;max-height:300px;display:flex;flex-direction:column;overflow:hidden}.timeline-with-background{position:relative;display:flex;flex-direction:column;max-height:220px;overflow-y:auto}.playback-controls{display:flex;justify-content:center;height:40px}.playback-controls button{margin:5px}.recording{background:var(--color-bg-panel);padding:20px;text-align:center}.progressbar{margin:5px 0;height:20px;background:var(--color-bg-interactive);position:relative;border-radius:.2rem;overflow:hidden}.progressbar .progressbar-inside{position:absolute;top:0;bottom:0;left:0;background:var(--color-accent)}@media screen and (max-width: 1200px){body{overflow:auto}.workspace{display:block}.workspace .canvas-area canvas{max-height:auto}.workspace .panel.side{width:auto;border-left:none}.filter-gallery{grid-template-columns:100px 1fr}}@media screen and (max-width: 800px){.menu{flex-wrap:wrap;justify-content:center}.menu .logo{width:100%;margin-bottom:.5rem}}