.article{padding-top:calc(var(--section-y) * .6);padding-bottom:var(--section-y)}.article-head{max-width:53.75rem}.article-back{color:var(--muted);font:500 var(--text-xs) "Fira Code", monospace;letter-spacing:.06em;margin-bottom:2.5rem;text-decoration:none;display:inline-block}@media (hover:hover){.article-back:hover{color:var(--paper)}}.article-head .eyebrow{margin-bottom:1.375rem}.article-head .eyebrow time{color:var(--muted)}.article-head h1{font:600 var(--display-md)/1.04 "Fira Sans", sans-serif;letter-spacing:-.025em;margin:0 0 1.375rem}.article-lede{color:#b8bcc0;font-size:var(--text-md);margin:0;line-height:1.5}.article-meta{color:var(--muted);font:500 var(--text-xs) "Fira Code", monospace;flex-wrap:wrap;align-items:center;gap:.625rem .875rem;margin-top:1.625rem;display:flex}.article-meta code{border:1px solid var(--line);color:var(--paper);border-radius:.1875rem;padding:.3125rem .5625rem}.article-cover{border:1px solid var(--line);width:100%;max-width:68.75rem;height:auto;margin:3rem 0 0;display:block}.article-body{max-width:47.5rem;margin-top:var(--block-gap);background:var(--paper);color:var(--ink);font-size:var(--text-md);padding:clamp(1.75rem,4vw,3.5rem);line-height:1.65}.article>.article-body{max-width:none;padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:clamp(2.5rem,5vw,4.5rem)}.article>.article-body>*{max-width:47.5rem;margin-left:auto;margin-right:auto}.article-body>:first-child{margin-top:0}.article-body>:last-child{margin-bottom:0}.article-body h2,.article-body h3,.article-body h4{letter-spacing:-.015em;margin:2.2em 0 .7em;font-weight:600;line-height:1.15}.article-body h2{font-size:var(--text-xl)}.article-body h3{font-size:var(--text-lg)}.article-body h4{font-size:var(--text-md)}.article-body p,.article-body ul,.article-body ol{margin:0 0 1.25em}.article-body ul,.article-body ol{padding-left:1.4em}.article-body li+li{margin-top:.4em}.article-body a{color:#4a3fc4;text-underline-offset:.1875rem;text-decoration:underline}@media (hover:hover){.article-body a:hover{color:var(--ink)}}.article-body strong{font-weight:600}.article-body blockquote{border-left:.1875rem solid var(--violet);color:#3b3f45;margin:1.6em 0;padding:.25rem 0 .25rem 1.25rem;font-style:italic}.article-body hr{border:0;border-top:1px solid var(--paper-2);margin:2.4em 0}.article-body img{max-width:100%;height:auto;margin:1.6em auto;display:block}.article-body code{background:var(--paper-2);border-radius:.1875rem;padding:2px .375rem;font:500 .88em Fira Code,monospace}.article-body{--astro-code-background:var(--ink);--astro-code-foreground:#d5d9dc;--astro-code-token-comment:#7d8a93;--astro-code-token-keyword:var(--violet);--astro-code-token-function:var(--cyan);--astro-code-token-string:var(--acid);--astro-code-token-string-expression:var(--acid);--astro-code-token-constant:#a8e0ff;--astro-code-token-parameter:#f0b980;--astro-code-token-punctuation:#98a2a9;--astro-code-token-link:var(--cyan)}.article-body pre{font:400 var(--text-sm)/1.6 "Fira Code", monospace;border-radius:.25rem;margin:1.6em 0;padding:1.125rem 1.25rem;overflow-x:auto}.article-body pre code{font-size:inherit;color:inherit;background:0 0;padding:0}.article-body .table-scroll{margin:1.6em auto;overflow-x:auto}.article-body .table-scroll:focus-visible{outline-offset:.25rem;outline:.1875rem solid #4a3fc4}.article-body table{border-collapse:collapse;width:100%;min-width:28rem;font-size:var(--text-base);margin:0}.article-body th,.article-body td{border:1px solid var(--paper-2);text-align:left;vertical-align:top;padding:.625rem .75rem}.article-body th{background:var(--paper-2);font-weight:600}.article-body img{border:1px solid var(--paper-2)}.article-body figure{margin:2em 0}.article-body figure img{width:100%;margin:0}.article-body figcaption{color:#5f6467;font:500 var(--text-xs)/1.5 "Fira Code", monospace;margin-top:.75rem}.article-body video,.article-body audio,.article-body iframe{width:100%;margin:1.6em auto;display:block}.article-body video{aspect-ratio:16/9;border:1px solid var(--paper-2);background:var(--ink);height:auto}.article-body audio{height:2.5rem}.article-body iframe{aspect-ratio:16/9;border:1px solid var(--paper-2);height:auto}.article-body .callout{border-left:.1875rem solid var(--callout-accent);background:var(--callout-tint);margin:1.8em 0;padding:1.125rem 1.25rem}.article-body .callout>:last-child{margin-bottom:0}.article-body .callout-label{color:var(--callout-accent);font:600 var(--text-xs) "Fira Code", monospace;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .5rem}.article-body .callout[data-callout=note]{--callout-accent:#12607d;--callout-tint:#dde8ec}.article-body .callout[data-callout=tip]{--callout-accent:#2f6a2a;--callout-tint:#dfe8d9}.article-body .callout[data-callout=important]{--callout-accent:#4a3fc4;--callout-tint:#e1ddf2}.article-body .callout[data-callout=warning]{--callout-accent:#8a5600;--callout-tint:#f0e7d2}.article-body .callout[data-callout=caution]{--callout-accent:#9d2222;--callout-tint:#f1dedd}.article-body p:has(>video),.article-body p:has(>audio),.article-body p:has(>iframe),.article-body p:has(>img){margin:0}.article-demo{max-width:68.75rem;margin-top:var(--block-gap)}.article-demo>p{color:var(--muted);font:500 var(--text-xs) "Fira Code", monospace;letter-spacing:.08em;margin:0 0 1.125rem}.listing{padding-top:calc(var(--section-y) * .6);padding-bottom:var(--section-y)}.listing-grid{margin:var(--block-gap) 0 0;grid-template-columns:repeat(auto-fill,minmax(min(100%,21.25rem),1fr));gap:1.125rem;padding:0;list-style:none;display:grid}.listing-card{border:1px solid var(--line);background:var(--ink-2);min-height:16.25rem;color:var(--paper);flex-direction:column;gap:.875rem;padding:1.625rem 1.625rem 1.5rem;text-decoration:none;transition:border-color .2s,transform .2s;display:flex;position:relative}.listing-card:focus-within{border-color:var(--acid);transform:translateY(-2px)}@media (hover:hover){.listing-card:hover{border-color:var(--acid);transform:translateY(-2px)}}.listing-card .card-top{color:var(--muted);font:500 var(--text-xs) "Fira Code", monospace;letter-spacing:.08em;justify-content:space-between;gap:.75rem;margin:0;display:flex}.listing-card h2{font:600 var(--text-lg)/1.2 "Fira Sans", sans-serif;letter-spacing:-.015em;margin:0}.listing-card h2 a,.listing-feature h2 a{color:inherit;outline:none;text-decoration:none}.listing-card h2 a:after,.listing-feature h2 a:after{content:"";z-index:1;position:absolute;inset:0}.listing-card p{color:#b8bcc0;font-size:var(--text-base);flex:1;margin:0;line-height:1.5}.listing-card .card-tags{flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.listing-card .card-tags li{border:1px solid var(--line);color:var(--muted);font:500 var(--text-xs) "Fira Code", monospace;border-radius:.1875rem;padding:.25rem .5rem}.listing-grid--covers{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}.listing-grid--covers .listing-card{gap:0;padding:0}.listing-card .card-cover{aspect-ratio:3/2;border-bottom:1px solid var(--line);position:relative;overflow:hidden}.listing-card .card-cover img{object-fit:cover;object-position:center 45%;width:100%;height:100%;transition:transform .5s cubic-bezier(.2,.8,.2,1);display:block}@media (hover:hover){.listing-card:hover .card-cover img{transform:scale(1.04)}}.listing-card .card-body{flex-direction:column;flex:1;gap:.875rem;padding:1.5rem 1.625rem;display:flex}.listing-feature{isolation:isolate;aspect-ratio:1306/520;border:1px solid var(--line);background:var(--ink-2);color:var(--paper);grid-column:1/-1;align-items:flex-end;text-decoration:none;list-style:none;transition:border-color .2s;display:flex;position:relative;overflow:hidden}.listing-feature img{z-index:-1;object-fit:cover;object-position:center 45%;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1);position:absolute;inset:0}.listing-feature .feature-shade{z-index:-1;background:linear-gradient(#090b0d00 30%,#090b0d8c 62%,#090b0deb 100%);position:absolute;inset:0}.listing-feature .feature-copy{justify-content:space-between;align-items:flex-end;gap:3rem;width:100%;padding:0 2.25rem 2rem;display:flex}.listing-feature h2{max-width:40rem;font:600 var(--text-2xl)/1.1 "Fira Sans", sans-serif;letter-spacing:-.025em;margin:0 0 .75rem}.listing-feature p{color:#b8bcc0;max-width:40rem;font-size:var(--text-md);margin:0;line-height:1.5}.listing-feature .card-tags{flex-shrink:0;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.listing-feature .card-tags li{border:1px solid var(--line);color:var(--muted);font:500 var(--text-xs) "Fira Code", monospace;border-radius:.1875rem;padding:.25rem .5rem}.listing-feature:focus-within{border-color:var(--acid)}@media (hover:hover){.listing-feature:hover{border-color:var(--acid)}.listing-feature:hover img{transform:scale(1.03)}}@media (width<=1100px){.listing-grid--covers{grid-template-columns:repeat(2,minmax(0,1fr))}.listing-feature{aspect-ratio:4/3}.listing-feature .feature-shade{background:linear-gradient(#090b0d73 0%,#090b0db8 55%,#090b0df0 100%)}}.listing-empty{border:1px dashed var(--line);color:var(--muted);font:500 var(--text-sm) "Fira Code", monospace;margin-top:3rem;padding:2rem}@media (width<=760px){.article-body pre{border-radius:0;margin-left:-16px;margin-right:-16px}.listing-grid--covers{grid-template-columns:minmax(0,1fr)}.listing-feature{aspect-ratio:4/5}.listing-feature .feature-copy{flex-direction:column;align-items:flex-start;gap:1rem;padding:0 1.125rem 1.125rem}.listing-feature h2{font-size:var(--text-xl)}.listing-feature p{font-size:var(--text-base)}}.article-body .article-signature{border-bottom:1px solid #090b0d1f;align-items:center;gap:1.25rem;margin-bottom:2.5rem;padding-bottom:1.75rem;display:flex}.article-body .article-signature .signature-avatar{object-fit:cover;border:0;border-radius:50%;flex-shrink:0;width:4.5rem;height:4.5rem;margin:0}.article-body .article-signature p{margin:0}.article-signature .signature-name{color:var(--ink);font:600 var(--text-base) "Fira Sans", sans-serif}.article-signature .signature-role{color:#4a4f55;font-size:var(--text-sm);margin-top:.125rem}.article-body .article-signature .signature-link{color:#0a66c2;font:500 var(--text-xs) "Fira Code", monospace;letter-spacing:.06em;align-items:center;gap:.4rem;margin-top:.5rem;text-decoration:none;display:inline-flex}.article-signature .signature-link svg{display:block}@media (hover:hover){.article-body .article-signature .signature-link:hover{color:#0a66c2;text-underline-offset:.1875rem;text-decoration:underline}}