@layer base{:root{--wrap:1330px;--gutter:1.5em}*, *:before, *:after{box-sizing:border-box}.wrap{padding-inline:var(--gutter);max-width:var(--wrap);margin-inline:auto;width:100%}::selection{background-color:var(--selection, #333);color:var(--selection-text, white)}html{background-color:var(--bgcolor, var(--body, white))}body{font-family:Inter, system-ui;container-type:inline-size;overflow-x:clip;margin:0;&:has(:popover-open){overflow-y:clip}}body, section{background-repeat:no-repeat;background-size:cover}section{background-color:var(--bgcolor)}.logotype{a:has(&){outline-offset:.5em}}h1, h2, h3, h4, strong, .logotype{color:var(--text-0)}p, li, td{text-wrap:pretty}p, li{line-height:1.5}small, .small{font-size:85%}hr{border:solid var(--lift-3);border-width:1px 0 0;margin-block:1em}.divider{background-color:var(--lift-4);display:inline-block;margin-inline:1em;height:1em;width:1px}.icon{width:1.125em;height:1.125em;vertical-align:middle;stroke-width:2;stroke:currentColor;fill:none}q{&:before, &:after{line-height:0}&:before{content:open-quote}}table{border-spacing:0;margin-block:1.5em;width:100%;th{border-bottom:1px solid var(--lift-3);color:var(--text-2);text-align:left;font-weight:400;font-size:90%}td, th{padding-block:.5em;line-height:1.25;white-space:nowrap;align-items:center;min-width:3em}img{width:1em}&.spaceous :is(td, th){padding-block:1.25em}&.select-first :is(td, th){padding-left:1.5em;&:nth-child(2){background-color:var(--lift-2);padding-left:1.5em;font-weight:550}}}table.titled{font-size:95%;td{padding-left:10vw}td:first-child{color:var(--text-0);width:100%;padding-left:0}td:last-child{text-align:right}@container (width < 1000px){td:nth-child(2){display:none}}}code{border:1px solid var(--lift-2);background-color:var(--lift-2);font-family:var(--monospace);display:inline-block;padding-inline:.25em;border-radius:.25em;font-size:90%}blockquote{color:var(--text-0);text-wrap:balance;margin:2em 0 3em;q, > p{font-size:clamp(1.33em, 4.5vw, 2em);letter-spacing:-1%;margin-left:-.45em}footer{font-size:90%;margin-top:1em;b{display:block;margin-bottom:.25em}i{color:var(--text-2);font-size:90%;font-style:normal}}}.eyebrow{display:inline-flex;align-items:center;gap:.5em;margin-bottom:.5em;+ *{margin-top:0}}.section .actions{display:inline-flex;gap:.75em;a{padding:.75em 1.5em;font-size:95%}}body > footer{padding-block:5em}}[hidden]{display:none}
@layer base{a{text-decoration:none;cursor:pointer;color:inherit}p, li, td{a{color:var(--text-1);text-decoration:underline var(--text-3);text-decoration-thickness:1px;text-underline-offset:.25em;cursor:pointer;&:hover{text-decoration-thickness:1.5px;text-decoration-color:var(--text-0)}}}a.new, a time{text-decoration:none;display:inline-flex;align-items:center;color:var(--text-2);gap:.5em;&:hover{color:var(--text-1)}strong{font-weight:700;font-size:90%}&:before{content:"";background-color:var(--new, var(--blue));box-shadow:0 0 0 .25em var(--lift-3);display:inline-block;border-radius:50%;height:.5em;width:.5em;margin-right:.25em}}a.external{text-decoration:none;background-color:var(--lift-2);border:1px solid var(--lift-3);font-family:Inter, system-ui;padding:.125em .5em;border-radius:1em;font-weight:500;font-size:75%;color:var(--blue);svg{margin-left:.1em;font-size:.8em;opacity:.75}&:hover{border-color:var(--blue);color:var(--blue)}}.links{display:flex;margin-block:1em;gap:var(--gap, 1.5em);a{color:var(--text-2);&:hover{color:var(--text-1)}}}}
@layer base{.ui, .visual, form{font-family:Inter, system-ui}.visual{font-size:13px}.tag{display:inline-flex;align-items:center;padding:.125em .5em;border-radius:.33em;font-weight:450;font-size:90%;gap:.33em;line-height:1.33}.props{display:grid;grid-template-columns:repeat(auto-fit, minmax(12em, 1fr));gap:1em;margin-block:1em 2em;h4, p{margin-block:.5em}&.bordered{border:solid var(--lift-2);border-width:1px 0;padding-block:1.5em}}.logos{align-items:center;list-style:none;display:flex;flex-wrap:wrap;gap:5%;padding:0;> *{max-width:8em}}[role="tablist"]{margin-bottom:1.5em;display:flex;gap:.5em;.secondary{pointer-events:none}}.section details{margin-bottom:2em;summary{outline:none;cursor:pointer;&::marker{color:var(--brand)}}h3{display:inline}> div{margin-left:.9em;margin-bottom:3em}}.toast{position:fixed;inset:auto 2em 2em auto;padding:1.25em 2em;border-radius:.5em;background:black;color:white;font-size:85%;border:0;z-index:3;&:popover-open{animation:toast-in .2s ease-out}&::backdrop{backdrop-filter:blur(3px)}}@keyframes toast-in{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}}
@layer base{:focus{outline:1px solid var(--focus, var(--text-1));outline-offset:1px}::placeholder{color:var(--text-2)}form{max-width:27rem}input, textarea{border:1px solid var(--lift-2);background-color:var(--lift-1);padding:.875em 1em;border-radius:.25em;font-family:inherit;color:var(--text-0);max-width:27rem;font-size:90%;width:100%}textarea{field-sizing:content;min-height:6em;overflow:clip}form{label{display:block;margin-block:1em 2em}h4{margin-bottom:.75em;font-weight:400;font-size:90%;+ p{margin-block:-.5em .75em;font-size:.875em}}label:has([required]) h4:after{color:var(--required, var(--blue));margin-left:.25em;content:"*"}footer{display:flex;justify-content:space-between;align-items:center}&.row{display:flex;gap:.7em;max-width:25em;> *{align-items:stretch}}}}
@layer base{img, svg, video{max-width:100%;height:auto}figure{margin:0;line-height:0;&, img{border-radius:.25em;width:100%}figcaption{color:var(--text-1);text-wrap:balance;line-height:1.75;margin-top:1em;max-width:50em;font-size:85%}}p + figure{margin-block:3em}.portrait.centered{text-align:center;img{max-width:40%;margin:2.5em auto}}figure.bordered{border:1px solid var(--lift-2)}.bgcolored{aspect-ratio:9/6;background-color:var(--bg, #444);place-items:center;border-radius:.5em;display:grid}.gallery{grid-template-columns:1fr 1fr;grid-auto-flow:dense;gap:var(--gap, 1em);margin-block:3em;display:grid;img, video{object-fit:cover;width:100%;height:100%}> :first-child, > :last-child{}}}
@layer base{button, .button{font-family:inherit;display:inline-flex;align-items:center;text-align:center;border-radius:.25em;white-space:nowrap;padding:.66em 1.25em;cursor:pointer;border:unset;gap:.5em;img{max-width:1em}&.primary{background-color:var(--button, black);color:white;&:hover{filter:brightness(1.1)}}&.secondary{background-color:var(--lift-2);color:var(--text-0);&:hover{background-color:var(--lift-3)}}&.ghost{background-color:unset;color:inherit;&:hover{background-color:var(--lift-1);color:var(--text-0)}}strong{color:inherit}}}
@layer base{:root{--text-0:rgb(15, 20, 30);--text-1:rgba(30, 40, 60, .75);--text-2:rgba(30, 40, 60, .50);--text-3:rgba(30, 40, 60, .30);--lift-0:rgba(30, 40, 60, .02);--lift-1:rgba(30, 40, 60, .04);--lift-2:rgba(30, 40, 60, .05);--lift-3:rgba(30, 40, 60, .08);--lift-4:rgba(30, 40, 60, .20);--blue:#577fea;--red:#ee3232;--purple:#9f00fd;--yellow:#b58d00;--green:#24b246;--orange:#ff8f20;--cyan:#03a9f4;--pink:#ff44fe;--gray:#5b636c;--code:#6478b1;--diff-green:rgba(0, 180, 5, 0.1);--diff-blue:rgba(0, 140, 255, 0.1);--diff-red:rgba(255, 0, 0, 0.1)}}@layer mod{.frame .panel{background-color:white;border:1px solid var(--lift-1);box-shadow:1px 1px 2px var(--lift-1)}.primary{font-weight:550;color:white}.secondary{font-weight:500}.grid .visual{background-color:#F8F6F1;align-items:flex-start;padding:2.5em;> *{background-color:white}}.overlay{box-shadow:0 0 3em rgba(0,0,0,.2)}}
.dark{color:var(--dark-text, #eee);--text-0:rgb(244, 246, 248);--text-1:rgba(190, 200, 215, .90);--text-2:rgba(190, 200, 215, .60);--text-3:rgba(190, 200, 215, .30);--lift-0:rgba(190, 200, 215, .03);--lift-1:rgba(190, 200, 215, .06);--lift-2:rgba(190, 200, 215, .12);--lift-3:rgba(190, 200, 215, .18);--lift-4:rgba(190, 200, 215, .30);--blue:#5e6ad2;--red:#da2f2f;--purple:#8B5CF6;--yellow:#f0bf00;--green:#1f8837;--orange:#fc7840;--cyan:#4ea7fc;--pink:#fc40fb;--gray:#5b636c;--code:#90abd3;--diff-green:rgba(0, 255, 5, 0.07);--diff-blue:rgba(0, 170, 255, 0.07);--diff-red:rgba(255, 0, 0, 0.1)}
@font-face{src:url(/@shared/font/inter.woff2) format(woff2);font-family:Inter;font-display:fallback;font-weight:100 900}
@layer base{.article article{> *{margin-inline:auto}.wide, .grid{max-width:min(100vw, 1050px);margin-block:3em 4em}}}
@layer base{:root{--article-width:650px}.article article{padding-inline:var(--gutter);> *{max-width:var(--article-width)}> a{display:block}}article{h1, h2, h3{margin-bottom:0}h1{letter-spacing:-0.02em;text-wrap:balance}h2{letter-spacing:-0.01em;margin-top:3em}h3{margin-top:2em}p, li{text-wrap:pretty}ol, ul{padding-left:1em;margin-block:1.5em}li{padding:.33em .5em;&::marker{color:var(--text-2)}}> figure, > .visual, table, .gallery{margin-block:2em 3em}figure:first-child{margin-top:0}.code, .card, .ui, table{font-family:Inter, system-ui}.code, .note, .columns, table, dt{font-size:90%}h2, h3{a:before{transition:opacity .1s;position:absolute;color:var(--text-3);margin-left:-1em;content:'#';opacity:0}a:hover:before{opacity:1}}.note{background-color:var(--lift-1);border-radius:.25em;padding:1.5em 2em;margin-block:1.5em;> *{margin-block:.5em}> :first-child{margin-top:0}> :last-child{margin-bottom:0}}figure.full{max-width:unset;margin:3em -1.5em;img{border-radius:0}figcaption{text-align:center;margin-inline:auto}}.ui, .card{border-radius:.5em;font-size:90%}.card{padding:1.5em 2.5em;.small{font-size:80%;color:var(--lift-3)}}.split{margin-block:4em 5em;pre{max-width:95%}> *{padding:2.5em;padding-right:0;flex:1}> :first-child{border:1px solid var(--lift-2);border-width:0 0 1px}h3{margin-block:0 -.33em}@container(width > 1300px){max-width:unset;display:flex;> :first-child{border-width:0 1px 0 0}}}.grid{grid-template-columns:1fr 1fr;display:grid;gap:1em}}}@layer mod{article .image{cursor:zoom-in;&.zoomed{background:black;border-radius:0;cursor:zoom-out;position:fixed;z-index:2;inset:0;min-width:100vw;min-height:100vh;place-items:center;display:grid;margin:0;img{object-fit:contain;max-height:calc(100vh - 3em)}figcaption{margin-block:-1em 0;color:white}}}a > .image{cursor:pointer}}
@layer base{body > header{z-index:2;top:0;.wrap{padding-block:1.25em;align-items:center;display:flex;gap:1.5em}&.fixed{background-color:inherit;position:sticky}nav{font-size:.8125em;align-items:center;display:flex}.actions{margin-left:auto;gap:1.25em}&.centered .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;> :nth-child(2){justify-self:center}}[popovertarget]{padding:0;font-size:1.125em;display:none;svg{color:var(--text-0)}}@container (width < 1000px){.ghost:not(.primary), .divider{display:none}.primary{margin-left:auto}.ghost[popovertarget]{display:inline-flex}}}}
@layer base{:root{--monospace:'Plex Mono'}@font-face{src:url(/@shared/font/ibm-plex-mono.woff2) format(woff2);font-family:'Plex Mono';font-display:fallback;font-weight:400}pre{font-family:var(--monospace);overflow-x:scroll;color:var(--code);position:relative;line-height:1.75;margin:0;overflow-x:auto;div{min-height:.75lh}.hl-1{color:var(--cyan)}.hl-2{color:var(--purple)}.hl-3{color:var(--green)}.hl-4{color:var(--text-2)}.hl-error{color:var(--red)}.hl-comment{color:var(--text-2)}}.code{margin-block:2em 3em;border:1px solid var(--lift-2);border-radius:.5em;> *{padding:.75em 1.5em;padding-right:1em}pre:has([data-line]){padding-inline:0}header{justify-content:space-between;border-bottom:1px solid var(--lift-1);background-color:var(--lift-0);padding-block:.75em;margin-bottom:.75em;align-items:center;display:flex;strong{font-weight:500;color:var(--text-1)}}.copy-button{padding:0;.icon-check{display:none}&.copied{.icon-copy{display:none}.icon-check{display:inline}}}}[data-lang="md"] pre{color:var(--text-2);.hl-4{color:var(--text-3)}}.front, .fenced{color:var(--code)}.front{background-color:var(--lift-1)}}
@layer base{[data-line]{padding-left:9ch;min-height:1lh;&::before{border-right:1px solid var(--lift-1);content:attr(data-line);padding-right:1.75ch;color:var(--text-3);position:absolute;text-align:right;width:7ch;left:0}}[data-diff]::before{content:attr(data-diff) ' ' attr(data-line);border-left:1px solid transparent}[data-diff='+']{background-color:var(--diff-green);&:before{color:var(--green);border-left-color:var(--green)}}[data-diff='~']{background-color:var(--diff-blue);&:before{color:var(--blue);border-left-color:var(--blue)}}[data-diff='-']{background-color:var(--diff-red);&:before{color:var(--red);border-left-color:var(--red)}}}
body > header{.wrap{justify-content:space-between;max-width:var(--article-width)}.logotype{font-weight:550;text-transform:uppercase;letter-spacing:7%;font-size:95%}nav a{display:block;color:var(--text-1);&:hover{color:var(--text-0)}}}main{--article-width:600px;font-family:charter, georgia, palatino, serif;margin-block:10% 10em;h1, h2, h3{font-family:inter;font-weight:650;letter-spacing:-1%}h1{font-size:1.33em}h2{font-size:1.125em}h3{font-size:1em}p, li{line-height:1.66;a{color:var(--blue)}}code{color:var(--pink);background-color:unset;font-weight:bold;padding:0;border:0;&:before, &:after{content:"`"}}article > p:first-child{color:var(--text-2);font-size:90%}}.home p{padding-right:min(150px, 10vw)}h1 + ul{padding:0;li{display:flex;justify-content:space-between;padding:0}}.code{font-size:13.5px;pre{padding:1em}header{background-color:unset;border:unset;float:right;strong{display:none}svg{z-index:1}}}@container (width > 800px){.code, figure:not(.zoomed){min-width:calc(var(--article-width) + 4em);pre{padding:1.25em 2em}}}