html{--color-01: #000;--color-02: #1d1d1b;--color-03: #333;--color-04: #444;--color-05: #6f6f6f;--color-06: #8d8d8d;--color-accent: #D1311D;--color-caption: var(--color-05);--color-line: #c5c8c6;--color-rice-paper: #f6f2f0;--color-contrast-background: #fff;--color-current-background: var(--color-rice-paper);--color-nav: #282c34;--color-nav-link: #fff;--color-text: var(--color-04);--color-heading: var(--color-03);--color-background-dark: #1d1d1b;--color-background-paper-dark: #262523;--color-body-copy-dark: #c5c8c6;--color-accent-dark: #ea7262;--color-low-contrast-dark: #8d8d8d}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Literata;src:url(/fonts/LiterataTT_var.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}@font-face{font-family:Literata Fallback;font-style:normal;font-weight:400;src:local("Georgia");ascent-override:117.7%;descent-override:30.8%;line-gap-override:0%;size-adjust:103.5%}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:Literata,Literata Fallback,serif;font-variation-settings:"wght" 300,"opsz" 12;font-weight:300;font-size:1.25rem;line-height:1.375;text-align:left;word-wrap:break-word;overflow-wrap:break-word;color:var(--color-text);background-color:var(--color-rice-paper);background-size:242px 242px;background-image:image-set(url(/img/ricepaper.avif) type("image/avif"),url(/img/ricepaper.jpg) type("image/jpeg"))}nav{position:fixed;top:0;right:0;left:0;padding-left:5vw;z-index:9001;transform:translateY(-.5em);border-top:.5em solid var(--color-nav);transition:transform ease-out .15s}nav:hover{transform:translate(0)}nav a{padding:0 .5em .3em;display:inline-block;position:relative;color:var(--color-nav-link);background-color:var(--color-nav);text-decoration:none;text-transform:lowercase;border-radius:0 0 .5em .5em;top:-.05em}nav a:focus-visible{outline:.125rem solid var(--color-accent);outline-offset:.125rem}@supports (mask-composite: subtract){nav a:before,nav a:after{content:"";position:absolute;top:0;left:100%;z-index:-1;width:1.2em;height:1.2em;background-color:var(--color-nav);mask-image:linear-gradient(to bottom,red,red),radial-gradient(circle .75em at center,red 80%,transparent 81%);mask-size:.6em .6em,100%;mask-position:top left,center;mask-repeat:no-repeat,repeat;mask-composite:subtract;clip-path:inset(0 50% 50% 0)}nav a:after{margin:unset;right:unset;bottom:unset;left:-1.2em;mask-position:top right,center;filter:unset;clip-path:inset(0 0 50% 50%)}}.overview{margin:10rem 0}.content{--gap: clamp(1rem, 6vw, 3rem);--full: minmax(var(--gap), 1fr);--content: min(36.5rem, 100% - var(--gap) * 2);--popout: minmax(0, 5rem);--feature: minmax(0, 10rem);display:grid;grid-template-columns:[full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];text-wrap:pretty}.content>*{grid-column:content}.popout,.figure-code{grid-column:popout}.feature,.figure-wide{grid-column:feature}.full{grid-column:full}article>.article-start{margin:0 0 3em;min-height:80vh;display:grid;grid-column:full;grid-template-columns:subgrid;position:relative;background:var(--color-contrast-background)}.article-start:before{content:"";width:100%;height:1em;display:block;position:absolute;bottom:-1em;background-image:linear-gradient(135deg,var(--color-contrast-background) 25%,transparent 25%),linear-gradient(225deg,var(--color-contrast-background) 25%,transparent 25%);background-position:50%;background-size:1em 100%}.title-container{padding-top:2em;grid-column:popout;align-self:flex-end}.title{line-height:1.2;font-size:2em;font-weight:700;font-variation-settings:"opsz" 72}.subtitle,.publish-date{text-indent:0;color:var(--color-caption)}.subtitle{margin:1em 0 2em;font-size:1.25em;font-weight:500}.sybren{grid-column:content;margin:auto}@media screen and (min-width: 40em){.title{font-size:clamp(2em,5vw,3em)}}@media screen and (min-width: 56em){.title-container{padding-top:0;grid-column:content-start / feature-end;align-self:center}.sybren{margin-right:0;grid-column:1 / content-start;grid-row:1}}@media screen and (min-width: 56em) and (min-height: 700px){.title-container{margin-left:calc(180px + (100vw - 1024px) * (0 - 180) / (1400 - 1024))}}@media screen and (min-width: 87.5em){.title-container{margin-left:0}}article *+*{margin-top:1.5em}.article-start+p{margin-bottom:1em;font-size:1.25em}.article-start+p+p{text-indent:0}h2+p,h3+p,h2+ul,h3+ul,p+p{margin-top:0}p+p{text-indent:2em}li+li{margin-top:0}h1,h2,h3,h4,h5,h6,strong,b{color:var(--color-heading);font-weight:600}h1,h2,h3{font-weight:600;font-variation-settings:"opsz" 36;line-height:1.2;text-wrap:balance}a{color:var(--color-accent);text-decoration-thickness:.05em;text-decoration-skip-ink:auto;text-underline-offset:.1em;position:relative}p a:focus-visible{background:var(--color-current-background);border-radius:.125rem;outline:.0625rem solid var(--color-nav)}li a:after,p a:after{content:"";background:var(--color-current-background);inset:0;position:absolute;z-index:-1;filter:blur(3px);margin:5px}textarea{width:100%;font-size:16px}input{font-size:16px}content{line-height:1.6}table{width:100%}img{max-width:100%}code{font-family:IBM Plex Mono;font-weight:400}pre{padding:1rem}pre>code{all:unset;font-family:IBM Plex Mono;font-weight:400;font-size:1em}blockquote{padding:1.5em 2.5em 0;margin:0;font-size:1.5rem;hanging-punctuation:first}cite{display:block;margin-top:.5em;font-style:normal;font-size:1rem}cite:before{content:"– "}.astro-code{font-size-adjust:.46;border-radius:2px}figure{margin:0;padding:2em;text-align:center}.figure-code{padding:2em 0;text-align:left}@keyframes bouncing-headphones{0%,40%{transform:translateY(0)}50%{transform:translateY(.5%)}60%{transform:translateY(-.5%)}70%{transform:translateY(0)}}@keyframes turn-head{0%,40%{transform:rotate(0)}50%{transform:rotate(-5deg)}60%{transform:rotate(0)}}@keyframes angel-hover{0%,to{transform:translateY(0)}50%{transform:translateY(-1em)}}@keyframes angel-shadow{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%,.5em) scale(.7)}}@keyframes wing-left{0%,to{transform:rotate(0)}50%{transform:rotate(-5deg)}}@keyframes wing-right{0%,to{transform:rotate(0)}50%{transform:rotate(5deg)}}.syb-container .sybren{margin:auto}.sybren{width:200px;height:266px;position:relative;overflow:hidden;z-index:10;flex-shrink:0;.inline-syb &{display:inline-block}.contains-syb &{margin:0}}.sybren img{width:100%;border:0;margin:0}@media screen and (min-width: 56em) and (min-height: 700px){.sybren{width:400px;height:532px}}.sybren .lazy-load{width:100%;height:100%;position:absolute;top:0;left:0}.sybs-body{position:absolute;top:0}.sybs-head{position:absolute;z-index:40;transform-origin:50% 33%}.sybs-head.animated,.animated-head{animation:turn-head 15s cubic-bezier(.68,-.55,.27,1.55) 5s infinite}.sybs-headphones{position:absolute;z-index:30;animation:bouncing-headphones .5s ease-in-out 1s infinite}.hat{z-index:42}.sybs-wings{top:.5em;position:absolute;transition:transform .5s;animation:wing-left 1s infinite}.sybs-wings+.sybs-wings{animation:wing-right 1s infinite}.is-angel{.angel-container{position:relative;height:100%;transform:translateY(0);transition:transform 1s ease-out;animation:angel-hover 2s infinite ease-in-out}&:after{content:"";display:block;position:absolute;bottom:1em;left:50%;height:.5em;width:7em;box-shadow:0 0 15px #0003;border-radius:50%;background-color:#0000001a;transform:translate(-50%);transition:transform 1s;animation:angel-shadow 2s infinite ease-in-out}&:hover .angel-container{transform:translateY(-1em);transition:transform 1s}&:hover:after{transform:translate(-50%,.5em) scale(.7);transition:transform 1s}&:hover .sybs-wings{animation-duration:.5s}}figcaption{color:var(--color-caption);font-variation-settings:"opsz" 7;font-size:16px;position:relative}figcaption:before{content:"";background:var(--color-current-background);inset:0;position:absolute;z-index:-1;filter:blur(10px);margin:5px}.figure-6 figcaption{padding:0 .5em;text-align:center}.figure-6{display:flex;flex-wrap:wrap;justify-content:center}.figure-6 figure{padding:0 0 1em;max-width:50%}@media screen and (min-width: 30em){img.retina-320{max-width:320px}}@media screen and (min-width: 40em){.figure-6 figure{max-width:33.333%}}@media screen and (min-width: 64em){.figure-2,.figure-6{text-align:center}.figure-6{display:flex;flex-wrap:nowrap}.figure-6 figure{flex-basis:100%}.figure-contains-2 img{margin:1em;display:inline-block;vertical-align:bottom}.figure-half{margin:0 0 0 -10em;max-width:60%;float:left}.figure-half-alt{margin:0 -10em 0 0;max-width:60%;float:right}}footer{margin-top:1em;padding:2em;color:var(--color-caption);text-align:center}footer:before{display:block;margin-bottom:3em;content:"o";font-feature-settings:"salt"}@media (prefers-color-scheme: dark){html{--color-accent: var(--color-accent-dark);--color-text: var(--color-body-copy-dark);--color-heading: var(--color-body-copy-dark);--color-contrast-background: var(--color-02);--color-nav: var(--color-body-copy-dark);--color-nav-link: var(--color-03);--color-caption: var(--color-06);--color-line: var(--color-05);--color-rice-paper: var(--color-background-paper-dark)}body{background-image:image-set(url(/img/ricepaper-dark.avif) type("image/avif"),url(/img/ricepaper-dark.jpg) type("image/jpeg"))}figcaption:before,li a:after,p a:after{display:none}img[src$=".svg"][src*="/articles"]{filter:invert(1) hue-rotate(180deg)}}