:root{color-scheme:light dark;--page-bg:light-dark(#f1f5f9,#020617);--page-fg:light-dark(#020617,#f4f4f5);--text-muted:light-dark(#52525b,#a1a1aa);--text-heading:light-dark(#27272a,#f4f4f5);--text-prose:light-dark(#1f2937,#a1a1aa);--text-prose-heading:light-dark(#1f2937,#e4e4e7);--text-eyebrow:#71717a;--link:light-dark(#2563eb,#93c5fd);--link-hover:light-dark(#1e40af,#dbeafe);--rule:light-dark(#d1d5db,#52525b);--frame-bg:light-dark(#e5e7eb,#030712);--code-bg:light-dark(#f3f4f6,#27272a);--card-hover-bg:light-dark(#fafafa,#27272a80);--icon:light-dark(#71717a,#a1a1aa);--icon-hover:light-dark(#52525b,#d4d4d8);--progress:light-dark(#1e293b,#94a3b8);--progress-track:light-dark(#cbd5e1,#1e293b);--avatar-bg:#27272a;--font-sans:var(--font-inter), system-ui, sans-serif;--font-mono:"Menlo", "Monaco", "Courier New", monospace;--bp-sm:40rem;--bp-md:48rem}*,:before,:after{box-sizing:border-box}html{scrollbar-gutter:stable;scroll-timeline:--page-scroll block;min-inline-size:360px}body{background-color:var(--page-bg);min-block-size:100vh;color:var(--page-fg);font-family:var(--font-sans);letter-spacing:-.025em;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;justify-content:space-between;margin:0;padding:2rem;display:flex}h1,h2,h3,h4{text-wrap:pretty}h1,h2,h3,h4,p,ul,ol,blockquote{margin:0}img{block-size:auto;max-inline-size:100%}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.shell{inline-size:100%;max-inline-size:60ch;margin-inline:auto}.shell>*+*{margin-block-start:1.5rem}.copyright{text-align:center;color:var(--text-muted);font-size:.75rem;line-height:1rem}.link-strong{color:inherit;font-size:.875rem;font-weight:600;line-height:1.25rem;text-decoration:none}.link-strong:hover{text-decoration:underline}.avatar-nav{z-index:50;background-color:var(--page-bg);block-size:2.75rem;inline-size:2.75rem;box-shadow:0 0 0 .35rem var(--page-bg);border-radius:9999px;display:block;position:sticky;inset-block-start:1rem}.avatar-nav__image{background-color:var(--avatar-bg);object-fit:cover;border-radius:9999px;block-size:2.25rem;inline-size:2.25rem;position:absolute;inset:.25rem}.avatar-nav__ring{block-size:100%;inline-size:100%;position:absolute;inset:0;rotate:-90deg}.avatar-nav__ring circle{fill:none;stroke-width:2px}.avatar-nav__track{stroke:var(--progress-track)}.avatar-nav__progress{stroke:var(--progress);stroke-linecap:round;stroke-dasharray:var(--circumference);stroke-dashoffset:var(--circumference);animation-name:draw-progress-ring;animation-duration:auto;animation-timing-function:linear;animation-timeline:--page-scroll}@keyframes draw-progress-ring{to{stroke-dashoffset:0}}.home-intro__avatar{background-color:var(--avatar-bg);object-fit:cover;border-radius:9999px;block-size:3rem;inline-size:3rem}@media (width>=48rem){.home-intro__avatar{block-size:4rem;inline-size:4rem}}.page-title{font-size:1.875rem;font-weight:600;line-height:2.25rem}.lead{color:var(--text-muted)}.article-list{flex-direction:column;gap:4rem;margin-block-end:4rem;display:flex}.card{flex-direction:column;align-items:flex-start;transition:transform .3s;display:flex;position:relative}@media (prefers-reduced-motion:no-preference){.card:hover{transform:translateY(-.25rem)}}.card__backdrop{z-index:0;background-color:var(--card-hover-bg);opacity:0;border-radius:1rem;transition:opacity .3s,box-shadow .3s;position:absolute;inset-block:-1.5rem;inset-inline:-1rem}.card:hover .card__backdrop{opacity:1;box-shadow:0 25px 50px -12px #00000040,0 0 0 1px #00000005}@media (width>=40rem){.card__backdrop{inset-inline:-1.5rem}}.card__title{letter-spacing:-.025em;color:var(--text-heading);margin:0;font-size:1rem;font-weight:600;line-height:1.5rem}.card__link{color:inherit;text-decoration:none}.card__link:before{content:"";z-index:20;border-radius:1rem;position:absolute;inset-block:-1.5rem;inset-inline:-1rem}@media (width>=40rem){.card__link:before{inset-inline:-1.5rem}}.card__link span{z-index:10;position:relative}.card__date{z-index:10;color:var(--text-eyebrow);align-items:center;font-size:.875rem;line-height:1.25rem;display:flex;position:relative}.card__description{z-index:10;color:var(--text-muted);margin-block-start:.25rem;font-size:.875rem;line-height:1.25rem;position:relative}.socials{gap:1.5rem;padding:0;list-style:none;display:flex}@media (width>=48rem){.socials{gap:1rem}}.socials--centered{justify-content:center}.socials--spaced{margin-block-end:4rem}.socials svg{block-size:1.25rem;inline-size:1.25rem;fill:var(--icon);transition:fill .3s;display:block}.socials a:hover svg{fill:var(--icon-hover)}@media (width>=48rem){.socials svg{block-size:1rem;inline-size:1rem}}.article__title--index{padding-block-end:2rem}.article__title{letter-spacing:-.025em;color:var(--text-heading);font-size:1.875rem;font-weight:500;line-height:2.25rem}.article__date{color:var(--text-muted);align-items:center;margin-block-end:1rem;font-size:.875rem;line-height:1.25rem;display:flex}.article-body h1{font-size:1.5rem;font-weight:700;line-height:2rem}.article-body h2,.article-body h3{color:var(--text-prose-heading);margin-block:2rem .75rem}.article-body h2{font-size:1.25rem;font-weight:600;line-height:1.75rem}.article-body h3{font-size:1.125rem;font-weight:500;line-height:1.75rem}.article-body h4{font-weight:500}.article-body h2:after,.article-body h3:after{content:"#";opacity:0;margin-inline-start:.25rem;transition:opacity .5s}.article-body h2:hover:after,.article-body h3:hover:after{opacity:1}.article-body p{color:var(--text-prose);margin-block:1.75rem;font-size:1.125rem;line-height:1.6}.article-body ol,.article-body ul{color:var(--text-prose);padding-inline-start:1.25rem}.article-body ol{list-style:decimal}.article-body ul{list-style:outside}.article-body ol>li+li{margin-block-start:.5rem}.article-body ul>li+li{margin-block-start:.25rem}.article-body li{padding-inline-start:.25rem;font-size:1.125rem;line-height:1.6}.article-body em{font-weight:500}.article-body strong{font-weight:700}.article-body a{color:var(--link);text-decoration:underline 1px;transition:color .3s}.article-body a:hover{color:var(--link-hover)}.article-body .heading-anchor,.article-body .heading-anchor:hover{color:inherit;text-decoration:none}.article-body blockquote{border-inline-start:3px solid var(--rule);color:var(--text-prose);margin-inline-start:.075em;padding-inline-start:1rem}.article-body blockquote p{font-size:1rem}hr{border:0;border-block-start:1px solid var(--rule)}table{white-space:nowrap;max-inline-size:fit-content;display:block;overflow-x:auto}pre{scrollbar-width:none;-ms-overflow-style:none;border-radius:.5rem;margin-block:1.5rem;padding:1rem;line-height:1;overflow-x:auto;background-color:#171717!important}pre::-webkit-scrollbar{display:none}code{font-family:var(--font-mono);background-color:var(--code-bg);border-radius:.3em;padding-block:.2em;padding-inline:.4em;font-size:14px}pre code{background-color:#0000;border:none;padding:0;font-size:14px;line-height:1.5}.framed{background-color:var(--frame-bg);border-radius:.375rem;justify-content:center;padding:1.5rem;display:flex}.framed>p{margin:0;padding-inline:0}@media (width>=40rem){.framed>p{max-inline-size:32rem;padding-inline:1rem}}.framed img{border-radius:.375rem;display:block}.video-embed{border:0;border-radius:.5rem;block-size:20rem;inline-size:100%}@media (width>=40rem){.video-embed{border-radius:.75rem}}@media (width>=48rem){.video-embed{inline-size:30rem}}.demo-form{background-color:var(--frame-bg);border-radius:.375rem;justify-content:center;padding:1.5rem;display:flex}.demo-form form{background-color:light-dark(#fff,#1e293b);border-radius:.25rem;inline-size:100%;max-inline-size:20rem;padding-block:1.5rem;padding-inline:2rem}.demo-form__field{margin-block-end:1rem}.demo-form label{color:light-dark(#374151,#fff);margin-block-end:.25rem;font-size:.875rem;font-weight:700;display:block}.demo-form input,.demo-form textarea{appearance:none;color:light-dark(#374151,#fff);inline-size:100%;line-height:1.25;font:inherit;background-color:light-dark(#fff,#334155);border:1px solid light-dark(#d1d5db,#64748b);border-radius:.25rem;padding-block:.5rem;padding-inline:.75rem;font-size:1rem;box-shadow:0 1px 2px #0000000d}.demo-form button{inline-size:100%;font:inherit;color:#fff;cursor:pointer;background-color:light-dark(#2563eb,#1d4ed8);border:0;border-radius:.25rem;padding-block:.5rem;padding-inline:1rem;font-weight:700}.demo-form button:hover{background-color:light-dark(#1d4ed8,#2563eb)}.roaming-shape{border:1px dashed #9ca3af;border-radius:.5rem;flex-direction:column;justify-content:center;align-items:center;margin-block-start:1rem;padding-block:.25rem;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.roaming-shape svg{color:#9ca3af;block-size:11rem;inline-size:11rem}.roaming-shape p{margin:0;padding:0;font-size:.75rem}@keyframes shape-roam-1{0%,to{transform:translate(0)}50%{transform:translate(1px,-1px)}}@keyframes shape-roam-2{0%,to{transform:translate(0)}50%{transform:translate(-2px,-4px)}}@keyframes shape-roam-3{0%,to{transform:translate(0)}50%{transform:translate(2px,-2px)}}.roaming-shape .roam-1{animation:6s infinite shape-roam-1}.roaming-shape .roam-2{animation:7s infinite shape-roam-2}.roaming-shape .roam-3{animation:8s infinite shape-roam-3}.roaming-shape--fast .roam-1{animation-duration:3s}.roaming-shape--fast .roam-2{animation-duration:3.5s}.roaming-shape--fast .roam-3{animation-duration:4s}@view-transition{navigation:auto}.home-intro__avatar,.avatar-nav__image{view-transition-name:avatar}@keyframes reveal{0%{opacity:0;filter:grayscale()}to{opacity:1;filter:grayscale(0%)}}.article-body img{view-timeline-name:--revealing-image;view-timeline-axis:block;animation-name:reveal;animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--revealing-image;animation-range:entry 5% cover 50%}@keyframes reveal-article{0%{opacity:.5;filter:grayscale();scale:.96}to{opacity:1;filter:grayscale(0%);scale:1}}.card{view-timeline-name:--revealing-article;view-timeline-axis:block;animation-name:reveal-article;animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--revealing-article;animation-range:entry 15% cover 20%}@media (prefers-reduced-motion:reduce){.article-body img{opacity:1;filter:grayscale(0%);animation-name:none}.card{opacity:1;animation-name:none;scale:1}.roaming-shape .roam-1,.roaming-shape .roam-2,.roaming-shape .roam-3{animation-name:none}}