html{box-sizing:border-box}*,:before,:after{box-sizing:inherit;corner-shape:squircle}:root{--size:16px;--font-size:16px;--font-size-small:15px;--font-family-monospace:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;--radius-small:1px;--radius-big:15px;--control-height:calc(var(--size) * 2.5);--range-touch-target:max(var(--control-height), 44px);--range-thumb-overhang:calc((var(--range-touch-target) - var(--size)) / 2);--control-height-compact:calc(var(--font-size) * 1.4)}@media screen and (max-width:1200px){:root{--font-size:18px;--font-size-small:16px;--size:14px}}@media screen and (max-width:600px){:root{--font-size:16px;--font-size-small:14px}}*{margin:0;padding:0;position:relative}body,input,textarea,button{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{color:#000;background:#fdfdfd}h1,h2,h3,h4{font-variation-settings:"wght" 600;color:var(--base-font-color-bright);padding:0;font-weight:600;line-height:1}h1{font-variation-settings:"wdth" 107, "wght" 650;font-weight:650}strong,b{font-weight:500}.jbx-main-h1{background-color:var(--accent-color);border-radius:var(--radius-small);font-size:calc(var(--font-size) * 2);padding:8px;display:inline-block}.jbx-h1{font-size:calc(var(--font-size) * 2);font-weight:700}.jbx-h2{font-size:calc(var(--font-size) * 1.25)}.jbx-h3{font-size:calc(var(--font-size) * 1.125)}.jbx-h4{font-size:var(--font-size-small);text-transform:uppercase}html,body,.jbx-button,.jbx-input{font-size:var(--font-size);line-height:1}.jbx-code-snippet{border-radius:var(--radius-small);font-family:var(--font-family-monospace);width:100%;font-size:calc(var(--size) - 3px);padding:var(--size) calc(var(--size) * 1.2);color:#444;resize:none;background:#eee;border:none;line-height:1.33}.jbx-code-snippet:focus{outline:none}.jbx-code-area{border-radius:var(--radius-big);font-family:var(--font-family-monospace);width:100%;font-size:calc(var(--size) - 3px);padding:var(--size) calc(var(--size) * 1.2);color:#444;resize:none;background:#eee;border:none;min-height:120px;line-height:1.33}.jbx-code-area:focus{outline:none}.jbx-button{color:#000;border-radius:var(--radius-small);appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer;padding:0 calc(var(--size) / 2);height:var(--control-height);background-color:#eee;border:none;transition:top .1s,left .1s,box-shadow 50ms;display:inline-block;box-shadow:3px 3px #ccc}.jbx-button:active{top:1px;left:1px;box-shadow:1px 1px #ccc}.jbx-button:disabled{cursor:default;color:#999;background-color:#f4f4f4;box-shadow:1px 1px #e0e0e0}.jbx-button:disabled:active{top:0;left:0;box-shadow:1px 1px #e0e0e0}.jbx-a{cursor:pointer;color:#000;font-weight:500;text-decoration:none;box-shadow:0 2px #0002}.jbx-a:after{content:"↗";color:#0004;font-size:var(--font-size-small);transition:top .3s,right .3s,color .3s;position:relative;top:-1px;right:-1px}.jbx-a:hover,.jbx-block-link:hover .jbx-a{box-shadow:var(--accent-color) 0 2px 0}.jbx-a:hover:after,.jbx-block-link:hover .jbx-a:after{color:var(--accent-color);top:-3px;right:-3px}.jbx-block-link{color:#000;min-width:300px;padding:var(--size);flex:1;text-decoration:none;display:inline-block}a.jbx-a:before,.jbx-block-link:before{content:"";z-index:-1;opacity:0;background-color:#eee;transition:transform .2s,opacity .2s;display:block;position:absolute;inset:-4px -6px;transform:scale(.98)translateY(4px)}.jbx-block-link:before,a.jbx-a:before{border-radius:var(--radius-small)}a.jbx-a:hover:before,.jbx-block-link:hover:before{opacity:1;transform:scale(1)translateY(0)}.jbx-a{display:inline-block}.jbx-small-text{font-size:var(--font-size-small)}.jbx-container{max-width:1080px;padding:calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);margin:0 auto}.jbx-box{flex:1}.jbx-inline{flex-flow:wrap;flex:1;display:flex}.jbx-stack{flex-flow:column wrap;flex:1;display:flex}.jbx-text{line-height:1.4}.jbx-tabs--tab{border-radius:var(--radius-small)}.jbx-input{color:#777;-webkit-text-fill-color:#777;opacity:1;appearance:none;border-radius:var(--radius-small);height:var(--control-height);padding:0 calc(var(--size) * .5);background-color:#eee;border:none;flex:1;display:block;box-shadow:inset 3px 3px #0000000a,inset .5px .5px #00000008}.jbx-input[type=number]::-webkit-inner-spin-button{opacity:1}.jbx-input[type=number]::-webkit-outer-spin-button{opacity:1}.jbx-tabs .jbx-input,.jbx-tabs .jbx-button{height:var(--control-height-compact);flex:none}.jbx-dropzone{text-align:center;border-radius:var(--radius-big);color:#000;cursor:pointer;border:2px dashed #000;flex-direction:column;flex:1;place-content:center;align-items:center;height:120px;padding:0;display:flex}.jbx-dropzone:hover{border-color:#999}.jbx-dropzone span{cursor:pointer;width:100%}.jbx-dropzone input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}.jbx-range{width:calc(100% + var(--range-thumb-overhang) * 2);margin-inline:calc(var(--range-thumb-overhang) * -1);appearance:none;height:var(--range-touch-target);border-radius:var(--radius-small);cursor:pointer;touch-action:pan-y;background-color:#0000;flex:1}.jbx-range::-webkit-slider-thumb{appearance:none;box-shadow:none;box-sizing:border-box;height:var(--range-touch-target);width:var(--range-touch-target);border-style:solid;border-color:#0000;border-width:calc((var(--range-touch-target) - var(--size) * 2) / 2) calc((var(--range-touch-target) - var(--size)) / 2);border-radius:calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));margin-top:calc((var(--size) - var(--range-touch-target)) / 2);background-color:#000;background-clip:content-box}.jbx-range::-moz-range-thumb{appearance:none;box-shadow:none;box-sizing:border-box;height:var(--range-touch-target);width:var(--range-touch-target);border-style:solid;border-color:#0000;border-width:calc((var(--range-touch-target) - var(--size) * 2) / 2) calc((var(--range-touch-target) - var(--size)) / 2);border-radius:calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));background-color:#000;background-clip:content-box}.jbx-range::-webkit-slider-runnable-track{appearance:none;background:linear-gradient(to right, transparent 0 var(--range-thumb-overhang), #c0c0c080 var(--range-thumb-overhang) calc(100% - var(--range-thumb-overhang)), transparent calc(100% - var(--range-thumb-overhang)) 100%);border-radius:var(--radius-small);height:var(--size)}.jbx-range::-moz-range-track{background:linear-gradient(to right, transparent 0 var(--range-thumb-overhang), #c0c0c080 var(--range-thumb-overhang) calc(100% - var(--range-thumb-overhang)), transparent calc(100% - var(--range-thumb-overhang)) 100%);border-radius:var(--radius-small);height:var(--size)}.jbx-range:focus{outline:none}:is(.jbx-a,.jbx-button,.jbx-input,.jbx-code-area,.jbx-range,.jbx-inline[role=checkbox]):focus-visible{outline-offset:3px;outline:2px solid #000}.jbx-bullet-container{margin:-8px 4px -8px 0;display:inline-block}.jbx-bullet{color:#000;text-align:center;font-size:calc(var(--font-size-small) - 3px);height:calc(var(--size) * 1.25);width:calc(var(--size) * 1.25);background-color:#0001;border:1px solid #0001;border-radius:100%;justify-content:center;align-items:center;margin-right:2px;display:flex;top:-2px}.jbx-hr{margin:calc(var(--size) * 2) auto;border-radius:var(--radius-small);border:none;border-top:2px solid #eee;width:38.2%}
:root{--accent-color:#8b9ceb}.app{width:100%}.jbx-card{background-color:#80808010;border:1px solid #80808010;border-radius:12px}.jbx-card.-disabled,.control-group.-disabled{opacity:.55}.jbx-tabs{flex-wrap:wrap;gap:.25rem;display:flex}.jbx-tabs .jbx-tabs--tab{padding-inline:calc(var(--size) * .6);flex:none}.option-row{flex-wrap:wrap;align-items:center;gap:.25rem .75rem;padding-block:.25rem;display:flex}.option-row .option-label{flex:none;min-width:6rem}.option-row .jbx-tabs,.option-row .jbx-inline{min-width:min(100%, max-content);flex:0 auto}.info-tip{vertical-align:middle;display:inline-flex;position:relative}.info-tip-button{width:1.15em;height:1.15em;color:inherit;opacity:.55;font:inherit;cursor:help;background:0 0;border:1px solid;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:.85em;line-height:1;display:inline-flex}.info-tip-button:hover,.info-tip-button:focus-visible,.info-tip.-open .info-tip-button{opacity:1}.info-tip-bubble{z-index:20;width:max-content;max-width:min(22rem,100vw - 3rem);font-size:var(--font-size-small);white-space:normal;text-align:left;background-color:#fdfdfd;border:1px solid #80808040;border-radius:8px;padding:.6rem .7rem;font-weight:400;line-height:1.4;display:none;position:absolute;top:calc(100% + .4rem);left:-.4rem;box-shadow:0 6px 20px #00000026}.info-tip:hover .info-tip-bubble,.info-tip:focus-within .info-tip-bubble,.info-tip.-open .info-tip-bubble{display:block}.option-row .option-button{height:var(--control-height-compact)}.frame-range{height:var(--range-touch-target);isolation:isolate;position:relative}.frame-range:before,.frame-range:after{content:"";z-index:0;height:var(--size);border-radius:var(--radius-small);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.frame-range:before{background-color:#c0c0c080;left:0;right:0}.frame-range:after{left:var(--frame-first);right:calc(100% - var(--frame-last));background-color:var(--accent-color)}.frame-range-selection{z-index:1;top:50%;left:calc(var(--frame-first) - var(--size) * .5);right:calc(100% - var(--frame-last) - var(--size) * .5);height:var(--range-touch-target);min-width:var(--size);cursor:grab;touch-action:none;padding:0;position:absolute;transform:translateY(-50%)}.frame-range-selection:active{cursor:grabbing}.frame-range-selection[aria-disabled=true]{pointer-events:none}.frame-range-selection:focus-visible{outline:3px solid var(--accent-color);outline-offset:2px}.frame-range .jbx-range{top:50%;left:calc(var(--range-thumb-overhang) * -1);z-index:2;pointer-events:none;background-color:#0000;margin:0;position:absolute;transform:translateY(-50%)}.frame-range .jbx-range:last-child{z-index:3}.frame-range.-first-on-top .jbx-range:first-child{z-index:4}.frame-range .jbx-range:focus{z-index:5}.frame-range .jbx-range::-webkit-slider-runnable-track{background:0 0}.frame-range .jbx-range::-moz-range-track{background:0 0}.frame-range .jbx-range::-webkit-slider-thumb{pointer-events:auto;cursor:grab}.frame-range .jbx-range::-moz-range-thumb{pointer-events:auto;cursor:grab}.frame-range .jbx-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--accent-color)}.frame-range .jbx-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--accent-color)}.frame-play-button{width:var(--control-height);flex:none;padding:0}.stage{width:min(var(--preview-display-width,100%), 100%, calc(60vh * var(--preview-aspect,1)));aspect-ratio:var(--preview-aspect,1);background-color:#071626;border-radius:12px;margin-inline:auto;position:relative;overflow:hidden}.preview-poster,.preview-canvas{width:100%;height:100%;transition:filter .3s;display:block;position:absolute;inset:0}.preview-poster{object-fit:cover}.preview-poster.-hidden,.preview-canvas.-hidden{visibility:hidden}.stage.-loading .preview-poster,.stage.-loading .preview-canvas{animation:2.6s ease-in-out infinite preview-brightness}@keyframes preview-brightness{0%,to{filter:grayscale()brightness(.72)}50%{filter:grayscale()brightness(.95)}}.stage-status{color:#fff;background:linear-gradient(#0000,#000000bf);padding:.75rem 1rem;position:absolute;bottom:0;left:0;right:0}@media (prefers-reduced-motion:reduce){.stage.-loading .preview-poster,.stage.-loading .preview-canvas{filter:grayscale()brightness(.84);animation:none}}.stage-status .jbx-small-text{color:#fff}.bar{background-color:#ffffff40;border-radius:2px;height:3px;margin-top:.4rem;overflow:hidden}.bar-fill{background-color:#fff;height:100%;transition:width .12s linear}.export-progress .bar{background-color:#00000018}.export-progress .bar-fill{background-color:#000}.github-corner{z-index:10;position:absolute;top:0;right:0}.github-corner:hover .octo-arm{animation:.56s ease-in-out octocat-wave}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:.56s ease-in-out octocat-wave}}.stats{font-size:var(--font-size-small);grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0;display:grid}.stats dt{opacity:.6}.stats dd{overflow-wrap:anywhere;margin:0}