:root{--accent-color:#ff53a9}.column{margin:0;display:inline-block}.demo-image-comparison{justify-content:center;gap:1.5rem;margin:2rem 0;display:flex}.demo-image{z-index:2;width:25vmin;height:auto;transition:opacity .3s cubic-bezier(.645,.045,.355,1),transform .3s cubic-bezier(.645,.045,.355,1);display:block;position:absolute;top:50%;left:50%}.-show-guides .demo-image{outline:1px dashed #80808054}.demo-image:hover{outline:1px dashed #80808080}.demo-image-container{border-radius:0;justify-content:center;align-items:center;width:40vmin;height:40vmin;transition:border-radius .3s,transform .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0000000f,0 0 0 5px #00000005}.demo-image-container.-first:before{content:"Element Center";text-align:center;width:100%;display:block;position:absolute;top:-2rem}.-use-circle .demo-image-container{border-radius:50%}.txt-center{text-align:center}.-show-guides .demo-image-container:before{content:"";z-index:3;border-top:1px solid #0000001c;border-bottom:1px solid #ffffff14;width:100%;height:0;display:block;position:absolute;top:calc(50% - 1px);left:0}.-show-guides .demo-image-container:after{content:"";z-index:3;border-left:1px solid #0000001c;border-right:1px solid #ffffff14;width:0;height:100%;display:block;position:absolute;top:0;left:calc(50% - 1px)}.jbx-card{background-color:#80808010;border:1px solid #80808010;border-radius:12px}html{box-sizing:border-box}*,:before,:after{box-sizing:inherit}:root{--size:16px;--font-size:16px;--font-size-small:17px;--radius-small:2px}@media screen and (width<=1200px){:root{--font-size:18px;--font-size-small:16px;--size:14px}}@media screen and (width<=600px){:root{--font-size:16px;--font-size-small:14px}}*{margin:0;padding:0;position:relative}body{touch-action:pan-y}body,input,textarea{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{color:#000;background:#fcfcfd}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);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(--size);width:100%;font-family:monaco,monospace;font-size:calc(var(--size) - 3px);padding:var(--size) calc(var(--size) * 1.2);color:#34495e;resize:none;background:#ecf0f1;border:none;line-height:1.33}.jbx-code-snippet:focus{outline:none}.jbx-code-area{border-radius:var(--size);width:100%;font-family:monaco,monospace;font-size:calc(var(--size) - 3px);padding:var(--size) calc(var(--size) * 1.2);color:#34495e;resize:none;background:#ecf0f1;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:calc(var(--size) * 2.5);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-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:#ecf0f1;transition:transform .2s,opacity .2s;display:block;position:absolute;inset:-4px -6px;transform:scale(.98)translateY(4px)}.jbx-block-link:before{border-radius:16px}a.jbx-a:before{border-radius:8px}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-input{color:#777;-webkit-text-fill-color:#777;opacity:1;appearance:none;border-radius:var(--radius-small);height:calc(var(--size) * 2.5);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-dropzone{text-align:center;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:0;border-radius:var(--radius-small);background-color:#bdc3c780;flex:1}.jbx-range::-webkit-slider-thumb{appearance:none;box-shadow:none;height:calc(var(--size) * 2);width:var(--size);border-radius:0;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:0;border-radius:var(--radius-small);background-color:#000;border:none}.jbx-range::-webkit-slider-runnable-track{appearance:none}.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:none;border-top:2px solid #ecf0f1;border-radius:0;width:38.2%}