:root{--background-color-code:#f9f4ef;--background-color-code-rgba:#f9f4ef;--background-color-main-footer:#f9f4ef;--background-color-body-images:#fffff099;--background-color-gradient-top:#fefae0;--background-color-gradient-mid:#fefced;--background-color-gradient-bottom:#fefefa;--border-code-inline:.5px #d9c2a7 solid;--border-color-code:#d9c2a7;--border-color-main-footer:#fefae0;--border-color-tertiary:#eaddcf;--border-radius-code-inline:4px;--box-shadow-img:#00000017 0px 3px 12px;--color-text-header:#312921;--color-text-header-tertiary:#716040;--color-text-subtitle:#816e4b;--color-text-main-nav:#716040;--color-text-main-nav-hover:#594a3c;--color-text-body:#42372d;--color-text-figcaption:#826f4a;--color-text-figcaption--code:#7f6c48;--font-family-title:karmina-sans,sans-serif;--font-family-utility:darkmode-on,sans-serif;--font-weight-body-dpi-one:300;--font-weight-body-dpi-more:400;--font-weight-subtitle-dpi-one:var(--font-weight-body-dpi-one);--font-weight-subtitle-dpi-more:var(--font-weight-body-dpi-more);--full-width-test-vw:100vw;--full-width-test-p:100%;--gutter-width:15px;--scroll-behavior-value:smooth}@media (prefers-reduced-motion){:root{--scroll-behavior-value:auto}}.full-width-test-vw{width:var(--full-width-test-vw)}.full-width-test-p{width:var(--full-width-test-p)}.karmina{font-family:karmina-sans,sans-serif}.source-serif{font-family:source-serif-pro,serif}.myriad-arabic{font-family:myriad-arabic,sans-serif}html{scroll-behavior:var(--scroll-behavior-value);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);background-color:#fefefa;background-image:linear-gradient(16deg,#fefefa 68%,#fefced 85%,#fefae0 100%);background-repeat:no-repeat;background-size:cover;min-height:100%}body{color:var(--color-text-body);margin:0;padding:0;font-family:source-serif-pro,serif}.vintage-1-hex{color:#f2e4bb}.vintage-2-hex{color:#d9c2a7}.vintage-3-hex{color:#f2e2ce}.vintage-4-hex{color:#f2ece4}.vintage-5-hex{color:#594a3c}.vintage-1-rgba{color:#f2e4ba}.vintage-2-rgba{color:#d8c2a6}.vintage-3-rgba{color:#f2e1cd}.vintage-4-rgba{color:#f2ebe3}.vintage-5-rgba{color:#59493b}.vintage-1-hsla{color:hsla(44,68,84,1)}.vintage-2-hsla{color:hsla(33,39,75,1)}.vintage-3-hsla{color:hsla(33,58,87,1)}.vintage-4-hsla{color:hsla(33,36,92,1)}.vintage-5-hsla{color:hsla(28,19,29,1)}h1,h2,header{color:var(--color-text-header);font-family:karmina-sans,sans-serif}h1,h2,h3{font-weight:600}h1,h2,h3,h4,h5,h6{scroll-margin-top:2ex}.notacouch-reflection{-webkit-box-reflect:below -.6em linear-gradient(to top,#fff6,transparent 60%);clip:rect(.9em 10em 3em 0);position:absolute}.main-nav{border-bottom:1px solid var(--border-color-tertiary);color:var(--color-text-main-nav);background-color:#ffffff4d;align-items:center;height:60px}.main-nav__home{max-width:fit-content}.n-for-notacouch{max-width:40px}.main-nav__list{justify-content:right;list-style-type:none;display:flex}.main-nav__list>li{margin-left:1em;font-size:1.25em}.main-nav__list a{color:currentColor;text-decoration:none}.main-nav__list>li>a{transition-property:color;transition-duration:.2s;transition-timing-function:cubic-bezier(.39,.575,.565,1)}.main-nav__list>li>a:hover{color:var(--color-text-main-nav-hover);text-decoration:underline}#main-nav__skip-to-content-li{margin:0;position:absolute;left:50%;transform:translate(-82%)}#main-nav__skip-to-content-li:focus-within:before{content:" ";border-right:1px solid var(--color-text-main-nav-hover);border-bottom:1px solid var(--color-text-main-nav-hover);width:10px;height:10px;display:block;position:absolute;bottom:calc(-.8em - 6px);left:calc(50% - 10px);transform:rotate(45deg)translateY(-50%)}#main-nav__skip-to-content-li:focus-within:after{content:" ";border-right:1px solid var(--color-text-main-nav-hover);border-bottom:1px solid var(--color-text-main-nav-hover);width:10px;height:10px;display:block;position:absolute;bottom:-.8em;left:calc(50% - 10px);transform:rotate(45deg)translateY(-50%)}.main-nav__list a[aria-current=page]{text-decoration:underline}.main-nav__storybook-icon{position:relative;top:.1em}code{white-space:pre;font-family:droid-sans-mono,monospace}code+*{margin-top:1em}p>a>code,p>code{background-color:var(--background-color-code-rgba);border:var(--border-code-inline);border-radius:var(--border-radius-code-inline);padding:0 .2em;font-size:.9em}.figure--code{background-color:var(--background-color-code)}nav{margin-bottom:20px;font-family:darkmode-on,sans-serif}.none{display:none!important}main{min-height:calc(100dvh - 172px)}abbr[title]{position:relative}abbr[title]:hover:after,abbr[title]:focus:after{content:attr(title);white-space:nowrap;color:canvastext;background-color:buttonface;border-radius:3px;width:auto;padding:3px 5px;font-family:system-ui;font-size:12px;position:absolute;bottom:-1.5em;left:0;box-shadow:1px 1px #0006}.home-hero{margin-bottom:var(--gutter-width)}.hero__title,.home-hero__title{margin-top:1em;margin-bottom:.5em;font-family:karmina-sans,sans-serif;font-size:29px;font-weight:400;line-height:1.2}.hero__sub-title,.home-hero__sub-title{color:var(--color-text-subtitle);max-width:60ch;font-size:20px;font-weight:300;line-height:1.3}.subtitle-color{color:var(--color-text-subtitle)}.hero__sub-title>p:first-child,.home-hero__sub-title>p:first-child{margin:0}.home-hero__sub-title dl{scroll-snap-type:x mandatory;scroll-behavior:var(--scroll-behavior-value);column-gap:var(--gutter-width);flex-flow:row;margin-top:.67em;font-size:.9em;display:flex;overflow-x:scroll}.home-hero__sub-title dt,.home-hero__sub-title dd{margin:0;display:inline}.home-hero__sub-title dt{color:#42372d}.home-hero__sub-title div:has(dt){max-width:min(calc(100dvw - 5*var(--gutter-width)),60ch);scroll-snap-align:start;flex-grow:0;flex-shrink:0;margin-bottom:.5em}.__meta{margin-top:var(--gutter-width);font-family:var(--font-family-utility);font-variant-numeric:proportional-nums;font-size:.875em}.__published{margin-top:var(--gutter-width);font-family:var(--font-family-utility);color:var(--color-text-subtitle);gap:var(--gutter-width);display:flex}.__published__published,.__published__modified{margin-right:calc(2*var(--gutter-width))}.__tags a{color:currentColor}.__meta .ph-light,.__meta .ph-fill{vertical-align:middle;color:var(--color-text-header);margin-right:1px;font-size:1.15em;line-height:1.4}.post-preview__meta{margin-top:-.7em;font-size:.8125em}.post-preview__published__published,.post-preview__published__modified{margin-right:0}.post-preview .ph-calendar-blank,.post-preview .ph-book{position:relative;top:-1.5px}.post-preview{margin-top:calc(1.6*var(--gutter-width))}p{line-height:1.4}#blog__topics-header{margin-top:0}#blog__topics-header:after{content:"";border-bottom:3px solid var(--border-color-tertiary);width:calc(100% - 5ch);display:block;position:relative;top:-.3em;left:5ch}.blog__topics>ul{padding-inline-start:1.5em}.blog__topics li{margin-bottom:.5em}.blog__topics li a{color:var(--color-text-subtitle)}.blog__topics li a:hover{color:var(--color-text-main-nav)}.crumbs{margin-bottom:0}.crumbs ol{margin-bottom:0;padding-left:0;list-style-type:none}.crumb{display:inline-block}.crumb:not(:has(.skip-to-link)):after,.crumb--skip-to:focus-within:after{content:"";speak:never;speak:none;speak:never;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-left:.1em;padding:0 3px;font-size:80%;font-style:normal;font-weight:400;line-height:1;display:inline-block;font-family:Phosphor-Light!important}.toc__ol li{margin-bottom:.67em}.toc__ol .toc__ol{margin-top:.5em;padding-left:2em;list-style:lower-roman}.toc__ol .toc__ol .toc__ol{list-style:lower-alpha}.post-preview__title,.post>:is(h2,h3),.toc__header{font-size:1.3125em;font-weight:600}.post-preview__title+p{margin-top:.3lh}.post>h2{font-size:1.44em}.toc a{color:var(--color-text-subtitle)}.post>:is(h2,h3){font-variant-numeric:lining-nums;margin-top:1.2em;font-family:karmina-sans,sans-serif}:is(.post,.post-preview)>:is(ol,ul,p),:is(.post,.post-preview)>.p>:is(ol,ul,p){-webkit-hyphens:auto;hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:6 3 3;-webkit-hyphenate-limit-lines:2;-webkit-hyphenate-limit-last:always;-webkit-hyphenate-limit-zone:8%;hyphenate-limit-chars:6 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:8%;text-wrap:pretty;max-width:71ch;font-size:1.086em;font-weight:300;line-height:1.4}.post>:is(ol,ul){margin-top:0}.post>:is(ol,ul) li{line-height:1.3}.post>:is(ol,ul) li:not(:last-child){margin-bottom:.5em}.post>:is(ol,ul) :is(ol,ul){margin-top:.5em;padding-left:2em}.post-preview__title{font-size:1.13em}.post-preview__title a{color:var(--color-text-main-nav);text-decoration-color:var(--border-color-code)}.post-preview__title a:hover{color:var(--color-text-main-nav-hover);text-decoration-color:var(--color-text-subtitle)}.post-preview>p{font-size:.9375em}.figure{margin:0}.post>.figure{margin-bottom:var(--gutter-width)}:is(.post,.post-preview)>p+.figure{margin-top:var(--gutter-width)}.figure__img{box-shadow:var(--box-shadow-img);background-color:var(--background-color-body-images);max-width:100%;margin-bottom:5px}figcaption{color:var(--color-text-figcaption);font-weight:var(--font-weight-body-dpi-one);padding-top:.3em;margin-bottom:1em;padding-inline:.68em;font-size:.875em;font-style:italic;line-height:1.4}.figure--code figcaption{color:var(--color-text-figcaption--code)}.code--full{backdrop-filter:brightness(102%);background-color:#0000;font-size:14px;line-height:1.3;overflow-x:scroll}.main-footer{border-top:1px solid var(--border-color-tertiary);background-color:var(--background-color-main-footer);color:var(--color-text-main-nav);margin-top:calc(var(--gutter-width)*2);align-items:center;min-height:60px}.main-footer:before{content:"";background-color:var(--border-color-main-footer);height:3px;display:block}.main-footer__built a{color:currentColor}.main-footer__built .ph-light{position:relative;top:2px}.main-footer__social-media{margin:0}.main-footer__social-media a{color:currentColor;margin-right:.3em;font-size:1.25em;text-decoration:none}.main-footer__social-media a:last-child{margin-right:0}.grid{grid-template-columns:minmax(0,1fr)minmax(0,calc((100dvw - 900px)/4 - (var(--gutter-width)*5/4)))minmax(0,calc(19.275em - var(--gutter-width)/2))minmax(0,calc(19.275em - var(--gutter-width)/2))minmax(0,calc((100dvw - 900px)/4 - (var(--gutter-width)*5/4)))minmax(0,calc((900px - 38.55em - var(--gutter-width)) - ((100dvw - 900px)/4 - (var(--gutter-width)*5/4))))minmax(0,1fr)minmax(0,1fr);column-gap:var(--gutter-width);grid-template-areas:"space-start body-left body body body-right body-right-more space-end-1 space-end-2";grid-auto-flow:column;display:grid}.grid>*{grid-column:body/space-end-1}.grid__subgrid{grid-template-columns:subgrid;grid-column-start:1;display:grid}.grid__subgrid--body>*{grid-column:body/span 3}.grid__subgrid--hr:after{content:"";height:calc(var(--gutter-width)/3);background-color:var(--border-color-tertiary);margin-top:calc(var(--gutter-width)/1);margin-bottom:calc(var(--gutter-width)*2);grid-column:body/span 1}.grid>:is(p,.p){margin-top:0}.grid>:is(p,.p,ul,.figure--img--body,.tangent)+:is(h2,h3){margin-top:.6em}.figure--img{grid-column:body}.grid__left-right{grid-column-end:span 2;margin-top:1.6em;position:relative}.figure--img--before-after:before{border-radius:var(--border-radius-code-inline)var(--border-radius-code-inline)0 0;font-family:var(--font-family-utility);font-variant:all-petite-caps;background-color:#fff;padding:.3em .6em;position:absolute;transform:translateY(calc(1px - 100%))}.grid__left-right--left{grid-column-start:body-left}.figure--img--before:before{content:"Before"}.grid__left-right--right{grid-column-start:4}.figure--img--after:before{content:"After"}.figure--img--text-wrap{float:right;margin-left:var(--gutter-width);clear:right;max-width:300px}@media (width<=600px){.figure--img--text-wrap{max-width:calc(50% - var(--gutter-width))}.main-footer__text{font-size:.9em;line-height:1.4}}.p>.figure--img--text-wrap:first-child{margin-top:1em}.grid__figure{display:grid}.grid__row-reset{border:none;grid-column-end:space-end-2}.grid__row-span-2{grid-row-end:span 2}.grid__start{grid-column:space-start/span 1}.grid__body-left{grid-column:body-left/span 1}.grid__body-left-to-right-more{grid-column:body-left/body-right-more}.grid__body{grid-column:body/span 2}.grid__end-body-left{grid-column:1/span 2}.grid__body-start{grid-column:body/span 1}.grid__body-to-right{grid-column:body/body-right}.grid__body-to-right-more{grid-column:body/body-right-more}.grid__mid-body{grid-column:4/span 1}.grid__end-body-right-more{grid-column:body-right/span 2}.tangent{color:var(--color-text-subtitle);text-wrap:pretty;align-content:start;line-height:1.3}.grid__full,.grid__full>pre:has(.code--full){grid-column:space-start/space-end;grid-template-columns:subgrid;display:grid;overflow:clip}.grid__full__extended-body{grid-column:body-left/span 5}@media (width<=900px){html{background-image:linear-gradient(16deg,#fefefa 88%,#fefced 95%,#fefae0 100%)}.blog__topics{margin-top:calc(2*var(--gutter-width));order:2}.grid{column-gap:7px}.grid__figure{grid-column:body/space-end-1}.tangent{grid-column:body/span 2;margin-bottom:1em}.grid__subgrid--body>*{grid-column-end:space-end-2}.grid__default--lt900{grid-column:body/space-end-1}.grid__body--lt900{grid-column:body/span 2}.grid__body-start--lt900{grid-column:body/span 1}.grid__mid-body--lt900{grid-column:4/span 1}.grid__body-right--lt900{grid-column:body-right/span 1}.grid__end-body-right-more--lt900{grid-column:body-right/span 2}}@media (width<=1250px){.grid__body-start--lt1250{grid-column:body/span 1}.grid__mid-body--lt1250{grid-column:4/span 1}.grid__body-right--lt1250{grid-column:body-right/span 1}.grid__end-body-right-more--lt1250{grid-column:body-right/span 2}}@media (width>=1921px){.grid{grid-template-columns:minmax(0,1fr)minmax(0,237px)minmax(0,calc(19.275em - var(--gutter-width)/2))minmax(0,calc(19.275em - var(--gutter-width)/2))minmax(0,237px)minmax(0,32px)minmax(0,1fr)minmax(0,1fr)}}@media (width>=901px){.grid__row-reset--tangent{grid-column-start:body-right}.tangent{grid-column:body-right/span 2}.grid__body--gt900{grid-column:body/span 2}.grid__body-left--gt900{grid-column:body-left/span 1}.grid__body-start--gt900{grid-column:body/span 1}.grid__body-to-right--gt900{grid-column:body/body-right}.grid__mid-body--gt900{grid-column:4/span 1}.grid__body-right--gt900{grid-column:body-right/span 1}.grid__mid-body-to-body-right-more--gt900{grid-column:4/span 3}.grid__end-body-right-more--gt900{grid-column:body-right/span 2}.blog__topics{grid-row-end:span 100}}@media (width>=1251px){.grid__space-start--gt1250{grid-column:space-start/span 2}.main-footer__copy{margin-left:var(--gutter-width)}.grid__body-left--gt1250{grid-column:body-left/span 1}.grid__body-start--gt1250{grid-column:body/span 1}.grid__mid-body--gt1250{grid-column:4/span 1}.grid__body-right--gt1250{grid-column:body-right/span 1}.grid__mid-body-to-body-right-more--gt1250{grid-column:4/span 3}}@media (width<=1502px){.grid__space-start--lt1500{grid-column:space-start/span 2}}@media (width>=1503px){.grid__body-left--gt1500{grid-column:body-left/span 1}.main-footer__copy{margin-left:0}}@media (width>=1230px){.grid__row-reset{grid-column-start:1}.tangent{grid-column:-9/span 2;margin-left:auto;padding:.68em 0 0 .68em}}@media (width>=1680px){.grid__row-reset{grid-column-start:2}.tangent{grid-column:-8/span 1;padding:.68em .68em 0 0;position:relative}.figure--img--body__img{max-width:calc(100% + var(--gutter-width));margin-left:calc(-1*var(--gutter-width)/2)}.figure--img--body figcaption{padding-inline:0}}@media (-webkit-device-pixel-ratio>=2){:is(.post,.post-preview)>:is(p,ol,ul),:is(.post,.post-preview)>.p>:is(p,ol,ul){font-weight:var(--font-weight-subtitle-dpi-more);line-height:1.5}.hero__sub-title,.home-hero__sub-title{font-weight:var(--font-weight-subtitle-dpi-more);line-height:1.4}figcaption{font-weight:var(--font-weight-body-dpi-more)}}@media (resolution>=2x){:is(.post,.post-preview)>:is(p,ol,ul),:is(.post,.post-preview)>.p>:is(p,ol,ul){font-weight:var(--font-weight-subtitle-dpi-more);line-height:1.5}.hero__sub-title,.home-hero__sub-title{font-weight:var(--font-weight-subtitle-dpi-more);line-height:1.4}figcaption{font-weight:var(--font-weight-body-dpi-more)}}.sr-only{width:1px;height:1px;position:absolute;top:auto;left:-10000px;overflow:hidden}.skip-to-link:not(:hover,:active,:target,:focus,:focus-visible){clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.grid>.item{background-color:#ccc}.item--1{grid-column:1/2}.item--2{grid-column:2/3}.item--3{grid-column:3/4}.item--4{grid-column:4/5}.item--5{grid-column:5/6}.item--6{grid-column:6/7}.item--7{grid-column:7/8}.item--8{grid-column:8/9}