:root{--accent-color:#95a5a6}.code-examples{gap:var(--size);grid-template-columns:minmax(0,2fr) minmax(0,3fr);display:grid}.code-example{flex-direction:column;min-width:0;display:flex}.code-example-title{margin-bottom:calc(var(--size) * .5);font-weight:600}.code-example .jbx-code-snippet{flex:1;overflow-x:auto}.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){.code-examples{grid-template-columns:minmax(0,1fr)}.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:.56s ease-in-out octocat-wave}}
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%}