*,:after,:before{box-sizing:border-box}body,html{height:100%}h1,h2,p{word-break:break-word}body{margin:0;-webkit-font-smoothing:subpixel-antialiased;color:#222;background-color:#f5f5f5;font-feature-settings:"ss04";line-height:1.5;--w0:320px;--w1:min(27.5vw,480px)}.logo-container{display:flex;justify-content:center;margin-top:40px}.logo{display:inline-block;border:5px solid;padding:0 6px 0 4px;font-weight:700;font-size:30px;letter-spacing:-.021em;line-height:34px;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:7px;align-self:center;text-decoration:none;-webkit-mask-image:linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);mask-image:linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);-webkit-mask-size:800%;mask-size:800%;-webkit-mask-position:0;mask-position:0}.headline{text-align:center;font-family:var(--font-alice);margin:80px 0 50px;font-size:26px;letter-spacing:-.04rem;line-height:1.45}.github-link{margin:.8em 0;font-size:14px;gap:.3em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.github-link,.github-link span{display:inline-flex;align-items:center}.github-link span{gap:.2em;white-space:nowrap}.installation{cursor:copy;transition:all .2s ease}.installation:hover{background-color:#ffffffaa}.installation:active .copy{opacity:.2}.copy{position:absolute;right:8.6px;width:2em;height:2em;border-radius:1em;background-color:#f5f5f5;display:flex;align-items:center;justify-content:center;top:0;bottom:0;margin:auto;transition:all .1s ease}.copy svg{animation:fadein .5s ease forwards}@keyframes fadein{0%{opacity:0}to{opacity:1}}h3{text-align:center;font-family:var(--font-alice);margin:30px 0 80px;color:#888;font-weight:400}h3>span:before{content:"";width:0;height:0;border-left:.35em solid transparent;border-right:.35em solid transparent;border-bottom:.6em solid;display:inline-block;margin-right:.4em}h3+.headline{margin-top:10px}a{color:inherit;text-decoration:underline;text-decoration-thickness:from-font;text-underline-position:from-font;transition:opacity .2s ease}a:hover{opacity:.6}a.logo:hover{transition:mask-position 2s ease,-webkit-mask-position 2s ease;-webkit-mask-position:120%;mask-position:120%;opacity:1}main{display:flex;flex-direction:column;align-items:center;padding:40px 20px;margin:0 auto;max-width:1800px}main>*{width:100%;max-width:600px}label{font-weight:500;text-transform:uppercase;font-size:12px;display:block;letter-spacing:.04rem;margin:1.5em 0 8px;color:#888;-webkit-user-select:none;-moz-user-select:none;user-select:none}.code,code{font-family:SF Mono,SFMono-Regular,ui-monospace,Menlo,Consolas,monospace}code{position:relative;background:#fff;display:block;border-radius:6px;padding:10px 12px;font-size:14px;line-height:1.75;margin:8px 0 1.5em;white-space:pre-wrap;letter-spacing:0}code:last-child{margin-bottom:0}.code{font-size:.92em;letter-spacing:0}code .hl-fade{color:#888}code .hl-highlighted{--color:rgba(0,0,0,.04);background:var(--color);box-shadow:0 0 0 3px var(--color);border-radius:2px}.p,p{font-size:15px;line-height:1.8;margin:0 0 1.5em;letter-spacing:-.01em}.controller{position:relative;align-self:center;display:flex;align-items:center;width:auto;height:32px;padding:5px 10px;font-size:15px;background-color:#fff;border-top-left-radius:10px;border-top-right-radius:10px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.controller:before{border-bottom:10px solid #fff;border-right:10px solid #fff;border-bottom-right-radius:20px;left:-10px;-webkit-clip-path:inset(0 10px 10px 0);clip-path:inset(0 10px 10px 0)}.controller:after,.controller:before{content:"";display:block;width:20px;height:20px;position:absolute;background-color:transparent;bottom:-10px}.controller:after{border-bottom:10px solid #fff;border-left:10px solid #fff;border-bottom-left-radius:20px;right:-10px;-webkit-clip-path:inset(0 0 10px 10px);clip-path:inset(0 0 10px 10px)}.controller input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#dedede;height:3px;border-radius:3px}.demo-container{max-width:unset;display:flex;flex-direction:column;align-items:center}.demo{display:flex;gap:20px;padding:20px;background-color:#fff;border-radius:10px;box-shadow:0 20px 25px -5px rgb(0 0 0/8%),0 3px 10px -6px rgba(0,0,0,.1)}.demo>div{flex:1 1}.demo .item{border:1px dashed transparent;border-radius:2px;transition:border-color .5s ease}.demo legend{font-size:13px;margin-bottom:5px;padding:0;text-align:left;color:#888;-webkit-user-select:none;-moz-user-select:none;user-select:none}h2{margin:10px 0 0;font-size:22px}.skeleton{display:inline-block;width:var(--w);height:24px;margin-top:24px;border-radius:4px;background-color:#f5f5f5}.skeleton+.skeleton{margin-top:12px}.skeleton:last-child{margin-bottom:10px}.tooltip-container{position:relative}.TooltipContent{position:absolute;left:50%;transform:translate3d(-50%,-10px,0);margin:auto;bottom:100%;border-radius:9px;padding:10px;line-height:1;background-color:#fff;box-shadow:0 1px 5px #0000000f,0 5px 20px #00000017;font-size:14px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.TooltipArrow{fill:#fff;position:absolute;left:0;right:0;top:100%;margin:auto}.tooltip-trigger{margin-top:120px;margin-bottom:10px;padding:4px;text-align:center;font-size:14px}.tooltip{line-height:1.5;text-align:center}.controller:active+.demo .item{border-color:#229dff}blockquote:before{content:"“";display:block;font-size:80px;text-align:center;color:#ddd;margin-bottom:-40px}blockquote{line-height:1.65;display:flex;flex-direction:column;align-items:center;font-family:var(--font-alice);margin:0 0 20px;font-size:15px}ul{margin:0;padding-left:18px}h2.ratio-title{position:relative;margin-bottom:1em;background:#fff2e0;border-right:1px dashed #c59759;border-left:1px dashed #c59759}h2.ratio-title span{background:#cdebff}h2.ratio-ruler span:after,h2.ratio-title:after{content:"0";position:absolute;top:100%;left:0;font-size:11px;transform:translateX(-50%);margin-top:2px;margin-left:-1px;font-weight:400}h2.ratio-ruler{margin-top:0;position:absolute;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;z-index:1}h2.ratio-ruler>span{position:relative;border-right:1px dashed #2d76a7;border-left:1px dashed #2d76a7}h2.ratio-ruler span span{color:transparent}h2.ratio-ruler span:after{content:"1"}.benchmark{display:flex;padding:20px 16px;box-sizing:border-box;width:calc(100vw - 32px);max-width:700px;background-color:#fff;border-radius:6px;margin:0 0 1.5em}.benchmark img{width:100%}@media screen and (max-width:640px){.demo{flex-direction:column}body{--w0:200px;--w1:80vw}.demo-container{flex-direction:column-reverse}.controller{position:-webkit-sticky;position:sticky;z-index:1;bottom:25px;margin-top:15px;border:1px solid #e5e5e5;border-radius:20px;box-shadow:0 5px 10px rgb(0 0 0/4%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.83)}.controller:after,.controller:before{display:none}blockquote{font-size:15px}h2{font-size:20px}h3{font-size:16px}.headline{font-size:22px}.TooltipContent{font-size:10px}h2.ratio-ruler,h2.ratio-title{font-size:22px}}@media screen and (max-width:450px){h2.ratio-ruler,h2.ratio-title{font-size:18px}}@media screen and (max-width:390px){h2.ratio-ruler,h2.ratio-title{font-size:16px}}@font-face{font-family:__Inter_c189f4;font-style:normal;font-weight:100 900;font-display:block;src:url(/_next/static/media/ba9851c3c22cd980-s.woff2) format("woff2");unicode-range:U+0460-052f,U+1c80-1c8a,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:__Inter_c189f4;font-style:normal;font-weight:100 900;font-display:block;src:url(/_next/static/media/21350d82a1f187e9-s.woff2) format("woff2");unicode-range:U+0301,U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:__Inter_c189f4;font-style:normal;font-weight:100 900;font-display:block;src:url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format("woff2");unicode-range:U+1f??}@font-face{font-family:__Inter_c189f4;font-style:normal;font-weight:100 900;font-display:block;src:url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format("woff2");unicode-range:U+0370-0377,U+037a-037f,U+0384-038a,U+038c,U+038e-03a1,U+03a3-03ff}@font-face{font-family:__Inter_c189f4;font-style:normal;font-weight:100 900;font-display:block;src:url(/_next/static/media/df0a9ae256c0569c-s.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1ea0-1ef9,U+20ab}@font-face{font-family:__Inter_c189f4;font-style:normal;font-weight:100 900;font-display:block;src:url(/_next/static/media/8e9860b6e62d6359-s.woff2) format("woff2");unicode-range:U+0100-02ba,U+02bd-02c5,U+02c7-02cc,U+02ce-02d7,U+02dd-02ff,U+0304,U+0308,U+0329,U+1d00-1dbf,U+1e00-1e9f,U+1ef2-1eff,U+2020,U+20a0-20ab,U+20ad-20c0,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:__Inter_c189f4;font-style:normal;font-weight:100 900;font-display:block;src:url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+0304,U+0308,U+0329,U+2000-206f,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:__Inter_Fallback_c189f4;src:local("Arial");ascent-override:90.20%;descent-override:22.48%;line-gap-override:0.00%;size-adjust:107.40%}.__className_c189f4{font-family:__Inter_c189f4,__Inter_Fallback_c189f4;font-style:normal}@font-face{font-family:__Alice_cce5df;font-style:normal;font-weight:400;font-display:block;src:url(/_next/static/media/9b1301a2d7f801a0-s.woff2) format("woff2");unicode-range:U+0460-052f,U+1c80-1c8a,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:__Alice_cce5df;font-style:normal;font-weight:400;font-display:block;src:url(/_next/static/media/788cbbc4621f91e8-s.woff2) format("woff2");unicode-range:U+0301,U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:__Alice_cce5df;font-style:normal;font-weight:400;font-display:block;src:url(/_next/static/media/b13b505096395f5e-s.woff2) format("woff2");unicode-range:U+0100-02ba,U+02bd-02c5,U+02c7-02cc,U+02ce-02d7,U+02dd-02ff,U+0304,U+0308,U+0329,U+1d00-1dbf,U+1e00-1e9f,U+1ef2-1eff,U+2020,U+20a0-20ab,U+20ad-20c0,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:__Alice_cce5df;font-style:normal;font-weight:400;font-display:block;src:url(/_next/static/media/f396f74df85ad6df-s.p.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+0304,U+0308,U+0329,U+2000-206f,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:__Alice_Fallback_cce5df;src:local("Times New Roman");ascent-override:81.14%;descent-override:20.89%;line-gap-override:0.00%;size-adjust:112.03%}.__className_cce5df{font-family:__Alice_cce5df,__Alice_Fallback_cce5df;font-weight:400;font-style:normal}.__variable_cce5df{--font-alice:"__Alice_cce5df","__Alice_Fallback_cce5df"}