: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}.frame-range{height:calc(var(--size) * 2);position:relative}.frame-range:before,.frame-range:after{content:"";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 .jbx-range{z-index:1;pointer-events:none;background-color:#0000;margin:0;position:absolute;top:50%;left:0;transform:translateY(-50%)}.frame-range .jbx-range:last-child{z-index:2}.frame-range.-first-on-top .jbx-range:first-child{z-index:3}.frame-range .jbx-range:focus{z-index:4}.frame-range .jbx-range::-webkit-slider-runnable-track{background-color:#0000}.frame-range .jbx-range::-moz-range-track{background-color:#0000}.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)}.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}.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}
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);--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{touch-action:pan-y}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{appearance:none;width:100%;height:var(--size);border-radius:var(--radius-small);background-color:#c0c0c080;flex:1}.jbx-range::-webkit-slider-thumb{appearance:none;box-shadow:none;height:calc(var(--size) * 2);width:var(--size);border-radius:var(--radius-small);background-color:#000;border:none}.jbx-range::-moz-range-thumb{appearance:none;box-shadow:none;height:calc(var(--size) * 2);width:var(--size);border-radius:var(--radius-small);background-color:#000;border:none}.jbx-range::-webkit-slider-runnable-track{appearance:none;border-radius:var(--radius-small)}.jbx-range::-moz-range-track{border-radius:var(--radius-small);height:var(--size);background-color:#c0c0c080}.jbx-range:focus{outline:none}.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%}