.dz{--measure:66ch;--radius:0;-webkit-text-size-adjust:100%;background:var(--ground);color:var(--ink);scrollbar-color:var(--muted) transparent;accent-color:var(--accent);caret-color:var(--accent);& *,& :before,& :after{box-sizing:border-box}& body,& h1,& h2,& h3,& h4,& p,& ul,& ol,& figure,& blockquote{margin:0}& body{overflow-wrap:break-word;min-height:100vh}& h1,& h2,& h3{text-wrap:balance}& img,& svg{max-width:100%;display:block}& a{color:inherit}& input,& textarea,& button{font:inherit;color:inherit}& button{cursor:pointer}& ::selection{background:var(--sel,var(--accent));color:var(--sel-ink,var(--ground))}& :focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:3px}& .sr-only,& .skip:not(:focus){clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}& .skip:focus{z-index:10;background:var(--ink);color:var(--ground);padding:.5rem 1rem;position:fixed;top:.5rem;left:.5rem}& astro-dev-toolbar{display:none!important}& .when-dark,&.dark .when-light{display:none}&.dark .when-dark{display:inline}& .plain{padding:0;list-style:none}& .prose{max-width:var(--measure);&>*+*,&>article>*+*{margin-top:1.25em}& :is(h2,h3,h4){line-height:1.2;display:block;& .not-prose{display:none}}& h2{margin-top:2.4em;font-size:1.5em}& h3{margin-top:2em;font-size:1.2em}& :is(h2,h3)+*{margin-top:.7em}& :is(ul,ol){padding-left:1.3em}& li+li,& li>:is(ul,ol){margin-top:.4em}& li::marker{color:var(--muted)}& a{color:var(--link,var(--accent));text-underline-offset:.2em;text-decoration-thickness:1px}& a:hover{text-decoration-thickness:2px}& strong{font-weight:700}& blockquote{border-left:1px solid var(--rule);color:var(--muted);padding-left:1.25em}& hr{border:0;border-top:1px solid var(--rule);margin-block:2.5em}& :not(pre)>code{border-radius:var(--radius);background:var(--code-bg,color-mix(in oklab, var(--ink) 8%, transparent));padding:.1em .35em;font-size:.875em}& pre[class*=language-]{border-radius:var(--radius);margin:1.5em 0 0;font-size:.85rem}& img,& iframe{border-radius:var(--radius);max-width:100%}& table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}& :is(th,td){border-bottom:1px solid var(--rule);text-align:left;padding:.5em .75em .5em 0}}& .form{gap:1.25rem;max-width:34rem;display:grid;& .field{gap:.4rem;display:grid}& :is(input,textarea){border:1px solid var(--rule);border-radius:var(--radius);background:0 0;width:100%;padding:.7rem .8rem}& textarea{resize:vertical}& .btn{justify-self:start}}& .btn{border:0;align-items:center;gap:.5rem;text-decoration:none;display:inline-flex}@media (prefers-reduced-motion:reduce){& *,& :before,& :after{transition:none!important;animation:none!important}}}code[class*=language-],pre[class*=language-]{color:#e3eaf2;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;background:0 0;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;line-height:1.5}pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection{background:#3c526d}pre[class*=language-]::selection,pre[class*=language-] ::selection,code[class*=language-]::selection,code[class*=language-] ::selection{background:#3c526d}pre[class*=language-]{margin:.5em 0;padding:1em;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#111b27}:not(pre)>code[class*=language-]{white-space:normal;border-radius:.3em;padding:.1em .3em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#8da1b9}.token.punctuation{color:#e3eaf2}.token.delimiter.important,.token.selector .parent,.token.tag,.token.tag .token.punctuation{color:#6cc}.token.attr-name,.token.boolean,.token.boolean.important,.token.number,.token.constant,.token.selector .token.attribute{color:#e6d37a}.token.class-name,.token.key,.token.parameter,.token.property,.token.property-access,.token.variable{color:#6cb8e6}.token.attr-value,.token.inserted,.token.color,.token.selector .token.value,.token.string,.token.string .token.url-link{color:#91d076}.token.builtin,.token.keyword-array,.token.package,.token.regex{color:#f4adf4}.token.function,.token.selector .token.class,.token.selector .token.id{color:#c699e3}.token.atrule .token.rule,.token.combinator,.token.keyword,.token.operator,.token.pseudo-class,.token.pseudo-element,.token.selector,.token.unit{color:#e9ae7e}.token.deleted,.token.important{color:#cd6660}.token.keyword-this,.token.this{color:#6cb8e6}.token.important,.token.keyword-this,.token.this,.token.bold{font-weight:700}.token.delimiter.important{font-weight:inherit}.token.italic{font-style:italic}.token.entity{cursor:help}.language-markdown .token.title,.language-markdown .token.title .token.punctuation{color:#6cb8e6;font-weight:700}.language-markdown .token.blockquote.punctuation{color:#f4adf4}.language-markdown .token.code{color:#6cc}.language-markdown .token.hr.punctuation{color:#6cb8e6}.language-markdown .token.url .token.content{color:#91d076}.language-markdown .token.url-link{color:#e6d37a}.language-markdown .token.list.punctuation{color:#f4adf4}.language-markdown .token.table-header,.language-json .token.operator{color:#e3eaf2}.language-scss .token.variable{color:#6cc}.token.token.tab:not(:empty):before,.token.token.cr:before,.token.token.lf:before,.token.token.space:before{color:#8da1b9}div.code-toolbar>.toolbar.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar.toolbar>.toolbar-item>button{color:#111b27;background:#6cb8e6}div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:focus{color:#111b27;background:#6cb8e6da;text-decoration:none}div.code-toolbar>.toolbar.toolbar>.toolbar-item>span,div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:hover,div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:focus{color:#111b27;background:#8da1b9}.line-highlight.line-highlight{background:linear-gradient(90deg,#3c526d5f 70%,#3c526d55)}.line-highlight.line-highlight:before,.line-highlight.line-highlight[data-end]:after{color:#111b27;background-color:#8da1b9;box-shadow:0 1px #3c526d}pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows>span:hover:before{background-color:#8da1b918}.line-numbers.line-numbers .line-numbers-rows{background:#0b121b7a;border-right:1px solid #0b121b}.line-numbers .line-numbers-rows>span:before{color:#8da1b9da}.rainbow-braces .token.token.punctuation.brace-level-1,.rainbow-braces .token.token.punctuation.brace-level-5,.rainbow-braces .token.token.punctuation.brace-level-9{color:#e6d37a}.rainbow-braces .token.token.punctuation.brace-level-2,.rainbow-braces .token.token.punctuation.brace-level-6,.rainbow-braces .token.token.punctuation.brace-level-10{color:#f4adf4}.rainbow-braces .token.token.punctuation.brace-level-3,.rainbow-braces .token.token.punctuation.brace-level-7,.rainbow-braces .token.token.punctuation.brace-level-11{color:#6cb8e6}.rainbow-braces .token.token.punctuation.brace-level-4,.rainbow-braces .token.token.punctuation.brace-level-8,.rainbow-braces .token.token.punctuation.brace-level-12{color:#c699e3}pre.diff-highlight>code .token.token.deleted:not(.prefix),pre>code.diff-highlight .token.token.deleted:not(.prefix){background-color:#cd66601f}pre.diff-highlight>code .token.token.inserted:not(.prefix),pre>code.diff-highlight .token.token.inserted:not(.prefix){background-color:#91d0761f}.command-line .command-line-prompt{border-right:1px solid #0b121b}.command-line .command-line-prompt>span:before{color:#8da1b9da}@font-face{font-family:Schibsted Grotesk;font-weight:400 900;font-display:swap;src:url(/fonts/designs/schibsted-grotesk.woff2)format("woff2")}@font-face{font-family:Schibsted Grotesk;font-style:italic;font-weight:400 900;font-display:swap;src:url(/fonts/designs/schibsted-grotesk-italic.woff2)format("woff2")}.dz.d-catalogus{--ground:oklch(97.2% .004 155);--ink:oklch(21% .012 155);--muted:oklch(46% .012 155);--rule:oklch(83% .008 155);--accent:oklch(43% .2 264);--label:9rem;--ease:cubic-bezier(.16, 1, .3, 1);font:400 1.0625rem/1.6 Schibsted Grotesk,system-ui,sans-serif;&.dark{--ground:oklch(19% .01 155);--ink:oklch(93% .006 155);--muted:oklch(71% .01 155);--rule:oklch(33% .01 155);--accent:oklch(76% .12 264)}& body{grid-template-columns:minmax(12rem,1fr) minmax(0,3.4fr);max-width:82rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem);display:grid}& a{text-decoration:none}& .rail{border-right:1px solid var(--rule);flex-direction:column;align-self:start;gap:2.75rem;height:100vh;padding:2.5rem 1.5rem 2.5rem 0;font-size:.9375rem;display:flex;position:sticky;top:0;overflow-y:auto;& .name{letter-spacing:-.01em;font-weight:700}& ul{gap:.3rem;display:grid}& a,& button{color:var(--muted);transition:color .2s}& :is(a,button):hover,& .name,& [aria-current]{color:var(--ink)}& [aria-current]:before{content:"";background:var(--accent);vertical-align:.1em;width:.45rem;height:.45rem;margin-right:.5rem;display:inline-block}& .toc p{margin-bottom:.5rem;font-weight:600}& .toc a{line-height:1.35;display:block}& .tools{justify-items:start;gap:.3rem;margin-top:auto;display:grid}& button{background:0 0;border:0;padding:0}}& main{padding:2.5rem 0 3rem clamp(1.5rem,4vw,4rem)}& .lead{padding-bottom:clamp(3rem,8vw,6.5rem);& h1{letter-spacing:-.04em;max-width:18ch;font-size:clamp(2.6rem,6.2vw,5rem);font-weight:500;line-height:.98}& p{max-width:34ch;color:var(--muted);margin-top:1.25rem;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.35}& img{border-radius:22%;margin-bottom:1.5rem}}& article .lead h1{max-width:22ch;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.04}& section{grid-template-columns:var(--label) minmax(0, 1fr);background:linear-gradient(var(--rule), var(--rule)) 0 0 / 100% 1px no-repeat;animation:cat-draw 1.1s var(--ease) backwards;gap:1rem 1.5rem;padding:1.1rem 0 4rem;display:grid;&:nth-of-type(2){animation-delay:.12s}&:nth-of-type(3){animation-delay:.24s}&>:is(h2,.meta){color:var(--muted);font-size:.9375rem;font-weight:500;line-height:1.6}&>:not(h2,.meta){grid-column:2}}& .meta{margin:0;& dt{color:var(--ink)}& dd{margin:0 0 .75rem}}& .actions{flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:2rem;display:flex;& a:not(.btn){text-underline-offset:.2em;text-decoration:underline}}& .rows{margin-top:-1.1rem;& a{border-bottom:1px solid var(--rule);transition:padding .4s var(--ease), border-color .2s;grid-template-columns:6.5rem minmax(0,1fr) auto;align-items:baseline;gap:1.25rem;padding:1.05rem 0;display:grid}& a:hover{border-color:var(--ink);padding-left:.6rem}& a:hover .t{color:var(--accent)}& time,& .m{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.9375rem}& .t{letter-spacing:-.01em;font-size:1.1875rem;font-weight:500;line-height:1.3;transition:color .2s}& .t svg{margin-left:.3rem;display:inline}&.apps a{grid-template-columns:3rem minmax(0,14rem) minmax(0,1fr);align-items:center}& img{border-radius:22%}}& .more{margin-top:1.25rem;font-size:.9375rem;& a{color:var(--accent);text-underline-offset:.2em;text-decoration:underline}}& .prose{--measure:60ch;font-size:1.125rem;line-height:1.65;& h2{letter-spacing:-.02em;font-weight:600}& h3,& strong{font-weight:600}}& .btn{background:var(--ink);color:var(--ground);padding:.7rem 1.1rem;font-size:.9375rem;font-weight:500;transition:background .2s;&:hover{background:var(--accent)}}& .form{& label{color:var(--muted);font-size:.9375rem}& :is(input,textarea){border-width:0 0 1px;border-color:var(--muted);outline:0;padding:.4rem 0;font-size:1.125rem;transition:box-shadow .2s,border-color .2s}& :is(input,textarea):focus{border-color:var(--accent);box-shadow:0 1px 0 var(--accent)}}& footer{border-top:1px solid var(--rule);color:var(--muted);padding-top:1rem;font-size:.9375rem}@media (width<=56rem){& body{display:block}& .rail{border-right:0;border-bottom:1px solid var(--rule);flex-flow:wrap;gap:.75rem 1.5rem;height:auto;padding:1.25rem 0;position:static;& nav:not(.toc){flex:1}& ul,& .tools{gap:1.1rem;display:flex}& .tools{margin:0}& .toc,& .tools a{display:none}}& main{padding:2.5rem 0}& section{grid-template-columns:minmax(0,1fr);&>:not(h2,.meta){grid-column:1}}& .meta{flex-wrap:wrap;gap:0 .5rem;display:flex;& dt{display:none}& dd:not(:last-child):after{content:" /"}}& .rows{border-top:1px solid var(--rule);margin-top:0;& a{grid-template-columns:minmax(0,1fr) auto;gap:.1rem 1rem}& time{grid-column:1/-1}&.apps a{grid-template-columns:3rem minmax(0,1fr)}&.apps .m{grid-column:2}}}}@keyframes cat-draw{0%{background-size:0 1px}}@font-face{font-family:Sofia Sans;font-weight:1 1000;font-display:swap;src:url(/fonts/designs/sofia-sans.woff2)format("woff2")}@font-face{font-family:Sofia Sans;font-style:italic;font-weight:1 1000;font-display:swap;src:url(/fonts/designs/sofia-sans-italic.woff2)format("woff2")}@font-face{font-family:Sofia Sans Extra Condensed;font-weight:1 1000;font-display:swap;src:url(/fonts/designs/sofia-sans-extra-condensed.woff2)format("woff2")}.dz.d-carry{--lime:oklch(93% .21 118);--ground:var(--lime);--stock:oklch(98.8% .006 110);--ink:oklch(17% .012 110);--muted:oklch(41% .02 110);--rule:oklch(17% .012 110/.28);--on-ground:var(--ink);--hi:var(--lime);--accent:var(--ink);--sel:var(--ink);--sel-ink:var(--lime);--pad:clamp(1.25rem, 5vw, 3.25rem);--ease:cubic-bezier(.16, 1, .3, 1);--label:600 1.0625rem/1.15 "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;font:400 1.125rem/1.65 Sofia Sans,system-ui,sans-serif;&.dark{--ground:oklch(15% .012 110);--stock:oklch(21% .014 110);--ink:oklch(95% .02 110);--muted:oklch(76% .03 110);--rule:oklch(95% .02 110/.3);--on-ground:var(--lime);--hi:oklch(93% .21 118/.22);--sel:var(--lime);--sel-ink:oklch(17% .012 110)}& body{border-top:.75rem solid var(--on-ground);color:var(--on-ground);padding-inline:clamp(.6rem,3vw,2rem)}& a{text-decoration:none}& header,& footer{max-width:54rem;font:var(--label);letter-spacing:.05em;text-transform:uppercase;align-items:center;gap:.4rem 1.5rem;margin-inline:auto;font-size:1.3rem;display:flex}& header{padding-block:1.1rem;& .home{letter-spacing:0;margin-right:auto;font-size:2.1rem;font-weight:900;line-height:1}& nav{gap:.15rem;display:flex}& nav a,& button{font:inherit;letter-spacing:inherit;text-transform:inherit;background:0 0;border:0;padding:.3rem .65rem;transition:background .2s,color .2s}& :is(nav a,button):hover{background:color-mix(in oklab, var(--on-ground) 14%, transparent)}& nav a[aria-current]{box-shadow:inset 0 -.3rem 0 var(--on-ground);font-weight:900}}& main{padding-top:3.75rem}& .tag{background:var(--stock);max-width:54rem;color:var(--ink);animation:carry-feed .9s var(--ease) backwards;border-radius:1.4rem;margin-inline:auto;position:relative;box-shadow:0 1.5rem 2.5rem -1.75rem oklch(17% .012 110/.55);&:before{content:"";background:var(--ground);width:1.4rem;height:1.4rem;box-shadow:0 0 0 .4rem color-mix(in oklab, var(--ink) 9%, var(--stock)), inset 0 .15rem .25rem oklch(17% .012 110/.45);border-radius:50%;position:absolute;top:1.1rem;left:50%;translate:-50%}}& .loop{fill:none;stroke:var(--on-ground);stroke-width:2.5px;stroke-linecap:round;position:absolute;bottom:calc(100% - 1.8rem);left:50%;overflow:visible;translate:-50%}& .head{padding:4.75rem var(--pad) 1.75rem;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:1.5rem clamp(1.25rem,4vw,2.75rem);display:grid;& .big{font:900 clamp(6.5rem,21vw,13rem)/.76 Sofia Sans Extra Condensed,Arial Narrow,sans-serif}& img.big{border-radius:22%;width:clamp(6rem,18vw,11rem);height:auto}& h1{letter-spacing:-.02em;font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:800;line-height:1.04}& .solo{grid-column:1/-1}& .solo h1{max-width:20ch;font-size:clamp(2.1rem,5.6vw,3.9rem);line-height:1}& .sub{color:var(--muted);margin-top:.6rem;font-size:1.25rem;line-height:1.35}}& dl{border-top:3px solid var(--ink);font:var(--label);letter-spacing:.05em;text-transform:uppercase;flex-wrap:wrap;margin:1.25rem 0 0;display:flex;& div{flex:auto;padding:.5rem 1.25rem .5rem 0}& div+div{border-left:1px solid var(--rule);padding-left:.9rem}& dt{color:var(--muted)}& dd{margin:.15rem 0 0;font-weight:800}}& .checks{border-top:1px solid var(--rule);font:var(--label);letter-spacing:.05em;text-transform:uppercase;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem 1rem;padding-top:.75rem;font-weight:800;display:grid;& li:before{content:"";background:var(--ink);width:.62em;height:.62em;margin-right:.5em;display:inline-block}}& .actions{flex-wrap:wrap;gap:.6rem;margin-top:1.25rem;display:flex}& .btn{border:2px solid var(--ink);background:var(--ink);color:var(--stock);font:var(--label);letter-spacing:.05em;text-transform:uppercase;padding:.55rem 1rem;font-size:1.25rem;font-weight:700;transition:background .2s,color .2s;&.alt{color:var(--ink);background:0 0}&:hover{background:var(--lime);color:oklch(17% .012 110)}}& .strip{padding:0 var(--pad) 1.6rem;border-bottom:2px dashed var(--rule);font:var(--label);letter-spacing:.12em;text-transform:uppercase;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;display:grid;position:relative;& svg{width:100%;height:2.6rem;fill:var(--ink)}& span{text-overflow:ellipsis;white-space:nowrap;max-width:40vw;overflow:hidden}&:before,&:after{content:"";background:var(--ground);border-radius:50%;width:1.2rem;height:1.2rem;position:absolute;bottom:-.6rem}&:before{left:-.6rem}&:after{right:-.6rem}}& .body{padding:2.5rem var(--pad) 3.25rem;&>h2{border-top:.5rem solid var(--ink);text-transform:uppercase;justify-content:space-between;align-items:baseline;margin-top:3.5rem;padding-top:.6rem;font:900 2.4rem/1 Sofia Sans Extra Condensed,Arial Narrow,sans-serif;display:flex;& a{font:var(--label);letter-spacing:.05em;text-underline-offset:.2em;text-decoration:underline}}}& .manifest{margin-top:.6rem;&.first{margin-top:-1rem}& a{border-bottom:1px solid var(--rule);background:linear-gradient(var(--hi), var(--hi)) 0 0 / 0 100% no-repeat;transition:background-size .45s var(--ease), padding .45s var(--ease);grid-template-columns:4.6rem minmax(0,1fr) auto;align-items:center;gap:.15rem 1rem;padding:.95rem .6rem .95rem 0;display:grid}& a:hover{background-size:100% 100%;padding-left:.6rem}& .code{grid-row:span 2;font:900 3.1rem/.85 Sofia Sans Extra Condensed,Arial Narrow,sans-serif}& img.code{border-radius:22%;width:3.5rem}& .t{letter-spacing:-.01em;font-size:1.25rem;font-weight:700;line-height:1.2}& .l,& .w{font:var(--label);letter-spacing:.05em;text-transform:uppercase}& .l{color:var(--muted);grid-column:2}& .l time{color:var(--ink);margin-right:.6em;font-weight:800}& .w{white-space:nowrap;grid-area:1/3/span 2;font-weight:800}}& .prose{--measure:62ch;--link:var(--ink);--code-bg:color-mix(in oklab, var(--ink) 9%, transparent);& h2{letter-spacing:-.02em;font-size:1.6rem;font-weight:800}& h3{font-size:1.2rem;font-weight:800}& a{text-decoration-thickness:2px}& a:hover{background:var(--hi)}& blockquote{background:var(--hi);color:var(--ink);border:0;padding:.9rem 1.2rem;font-weight:600}& hr{border-top:2px dashed var(--rule)}}& .form{border:2px solid var(--ink);gap:0;margin-top:2rem;& .field{border-bottom:2px solid var(--ink);gap:0;padding:.5rem .8rem .3rem;transition:background .2s}& .field:focus-within{background:var(--hi)}& label{color:var(--muted);font:var(--label);letter-spacing:.05em;text-transform:uppercase}& :is(input,textarea){border:0;outline:0;padding:.2rem 0 .3rem;font-weight:600}& .btn{border:0;justify-content:center;justify-self:stretch;padding-block:.8rem;font-size:1.5rem}}& footer{flex-wrap:wrap;justify-content:space-between;padding-block:2rem 2.5rem;font-size:1.15rem;& p:last-child{gap:1.25rem;display:flex}& a{text-underline-offset:.2em;text-decoration:underline}}@media (width<=40rem){& header{flex-wrap:wrap;font-size:1.2rem;& nav{flex-basis:100%;order:3;margin-left:-.5rem}& nav a,& button{padding-inline:.5rem}}& .head{grid-template-columns:minmax(0,1fr)}& dl{gap:0 2rem}& dl div,& dl div+div{border-left:0;flex:none;padding:.5rem 0}& .checks{grid-template-columns:minmax(0,1fr)}& .manifest{& a{grid-template-columns:3.4rem minmax(0,1fr) auto;gap:.15rem .75rem}& .code{font-size:2.3rem}& img.code{width:2.9rem}& .t{font-size:1.125rem}& .c{display:none}}}}@keyframes carry-feed{0%{clip-path:inset(-6rem 0 100%);translate:0 -1rem}to{clip-path:inset(-6rem 0 0)}}@font-face{font-family:Shantell Sans;font-weight:300 800;font-display:swap;src:url(/fonts/designs/shantell-sans.woff2)format("woff2")}@font-face{font-family:Atkinson Next;font-weight:200 800;font-display:swap;src:url(/fonts/designs/atkinson-next.woff2)format("woff2")}@font-face{font-family:Atkinson Next;font-style:italic;font-weight:200 800;font-display:swap;src:url(/fonts/designs/atkinson-next-italic.woff2)format("woff2")}.dz.d-napkin{--ground:oklch(99.2% .004 95);--ink:oklch(20% .012 270);--muted:oklch(42% .012 270);--rule:oklch(20% .012 270/.2);--yellow:oklch(92% .17 98);--pink:oklch(80% .15 358);--teal:oklch(82% .11 185);--y:oklch(92% .17 98);--p:oklch(80% .15 358);--t:oklch(82% .11 185);--on:oklch(20% .012 270);--accent:var(--ink);--sel:var(--pink);--sel-ink:oklch(20% .012 270);--marker:"Shantell Sans", "Comic Sans MS", cursive;--hand:255px 18px 225px 18px / 18px 225px 18px 255px;--ease:cubic-bezier(.16, 1, .3, 1);background-image:radial-gradient(circle,oklch(20% .012 270/.13) 1.1px,#0000 1.5px);background-size:19px 19px;font:400 1.125rem/1.65 Atkinson Next,system-ui,sans-serif;&.dark{--ground:oklch(24% .028 165);--ink:oklch(95% .012 100);--muted:oklch(80% .02 130);--rule:oklch(95% .012 100/.25);--yellow:oklch(80% .15 98/.42);--pink:oklch(72% .17 358/.5);--teal:oklch(75% .11 185/.45);--sel-ink:oklch(97% .01 100);background-image:radial-gradient(circle,oklch(95% .012 100/.1) 1.1px,#0000 1.5px)}& body{max-width:70rem;margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}& a{text-decoration:none}& :is(.squiggle,.mug,.arrow) :is(path,circle){fill:none;stroke:var(--ink);stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round}& path[pathLength]{stroke-dasharray:1;animation:napkin-draw 1s var(--ease) backwards}& .box{display:block;position:relative;&:before{content:"";border:2.5px solid var(--ink);border-radius:var(--hand);filter:url(#napkin-wobble);pointer-events:none;position:absolute;inset:0}}& header{font:600 1.2rem/1.2 var(--marker);flex-wrap:wrap;align-items:center;gap:.5rem .4rem;padding-block:1.75rem;display:flex;& .name{margin-right:auto;font-size:1.45rem;font-weight:800;rotate:-2deg}& nav{display:flex}& nav a,& button{border-radius:var(--hand);font:inherit;transition:background .2s, rotate .4s var(--ease);background:0 0;border:0;padding:.3rem .8rem}& :is(nav a,button):hover{background:var(--y);color:var(--on);rotate:-2deg}& nav a[aria-current]{background:var(--p);color:var(--on);rotate:-2deg}& button{color:var(--muted);font-weight:500}}& main{padding-block:clamp(1.5rem,5vw,3.5rem) 4rem}& h1,& h2,& .bubble,& time,& .go,& .meta,& .toc,& .btn,& .link,& footer,& label{font-family:var(--marker)}& .hero{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:2rem;display:grid;& h1{text-transform:uppercase;width:fit-content;font-size:clamp(3.2rem,10.5vw,7rem);font-weight:800;line-height:.95;position:relative;rotate:-2deg}& h1 span{border-radius:var(--hand);background:var(--p);color:var(--on);margin-inline:-.12em;padding-inline:.12em}& .squiggle{width:100%;height:.3em;position:absolute;top:100%;left:0;overflow:visible}& .squiggle path{stroke:var(--teal);stroke-width:5px;animation-delay:.2s}}& .roles{font:600 1.15rem/1.2 var(--marker);flex-wrap:wrap;gap:.6rem;margin-top:3.25rem;display:flex;& li{border:2.5px solid var(--ink);border-radius:var(--hand);background:var(--y);color:var(--on);padding:.4rem .9rem}& li:nth-child(2n){background:var(--t);rotate:1.5deg}& li:nth-child(odd){rotate:-1.5deg}}& .mascot{padding-top:2.5rem;position:relative;& .bubble{border:2.5px solid var(--ink);border-radius:var(--hand);background:var(--ground);white-space:nowrap;padding:.35rem 1rem;font-size:1.25rem;font-weight:700;position:absolute;top:0;right:68%;rotate:-5deg}& .cup,& .eye{fill:var(--ground)}& .pupil{fill:var(--ink);stroke:none;transition:translate .3s var(--ease)}& .mug:hover .pupil{translate:-3px -3px}& .steam{stroke:var(--muted);animation-delay:.7s}& .arrow{position:absolute;top:88%;right:62%}& .arrow path{animation-delay:.9s}& .arrow path+path{animation-duration:.4s;animation-delay:1.5s}}& .intro{--measure:62ch;margin-top:3.5rem;font-size:1.1875rem;& strong{background:linear-gradient(var(--yellow), var(--yellow)) 0 60% / 100% 78% no-repeat;animation:napkin-swipe .7s var(--ease) 1.1s backwards;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:4px 9px 5px 10px;padding-inline:.15em}& strong:nth-of-type(2){background-image:linear-gradient(var(--pink), var(--pink));animation-delay:1.35s}& strong:nth-of-type(3){background-image:linear-gradient(var(--teal), var(--teal));animation-delay:1.6s}& strong:nth-of-type(4){animation-delay:1.85s}}& main>h2{background:linear-gradient(var(--teal), var(--teal)) 0 88% / 100% .32em no-repeat;width:fit-content;margin:4.5rem 0 1.5rem;font-size:2rem;font-weight:800;rotate:-1deg}& h1.page{text-transform:uppercase;margin-bottom:2.5rem;font-size:clamp(3rem,9vw,5.5rem);font-weight:800;line-height:1;rotate:-2deg;& span{border-radius:var(--hand);background:var(--y);color:var(--on);padding-inline:.12em}}& .panels{grid-template-columns:repeat(6,minmax(0,1fr));gap:1.25rem;display:grid;& li{grid-column:span 3}& li:first-child:not(:only-child,.apps>*,.onward>*){grid-column:span 6}& a{background:var(--ground);border-radius:var(--hand);height:100%;transition:rotate .5s var(--ease), translate .5s var(--ease);flex-direction:column;gap:.4rem;padding:1.4rem 1.5rem 1.25rem;display:flex}& a:hover{translate:0 -3px;rotate:-.8deg}& time{color:var(--muted);font-weight:500}& strong{font:700 1.5rem/1.2 var(--marker)}& li:first-child:not(:only-child,.apps>*,.onward>*) strong{max-width:22ch;font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.1}& strong span{background:linear-gradient(var(--yellow), var(--yellow)) 0 85% / 0 .4em no-repeat;transition:background-size .5s var(--ease)}& a:hover strong span{background-size:100% .4em}& li:nth-child(3n+2) strong span{background-image:linear-gradient(var(--pink), var(--pink))}& li:nth-child(3n) strong span{background-image:linear-gradient(var(--teal), var(--teal))}& .desc{max-width:60ch;color:var(--muted);-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;font-size:1.0625rem;line-height:1.5;display:-webkit-box;overflow:hidden}& .go{margin-top:auto;padding-top:.6rem;font-weight:600}& .go:after{content:"";background:var(--ink);width:1.5em;height:.7em;transition:translate .4s var(--ease);margin-left:.4em;display:inline-block;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14'%3E%3Cpath d='M2 8c8-2 16-2 25-1M20 2l7 5-6 5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14'%3E%3Cpath d='M2 8c8-2 16-2 25-1M20 2l7 5-6 5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/contain no-repeat}& a:hover .go:after{translate:6px}&.apps a{grid-template-columns:auto minmax(0,1fr);align-content:center;gap:.2rem 1.1rem;display:grid}& img{border-radius:22%;grid-row:span 2}}& .more{flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:1.75rem;display:flex}& .btn{border:2.5px solid var(--ink);border-radius:var(--hand);background:var(--y);color:var(--on);transition:rotate .4s var(--ease), translate .4s var(--ease), background .2s;padding:.55rem 1.25rem;font-size:1.15rem;font-weight:700;&:hover{background:var(--p);translate:0 -2px;rotate:-2deg}}& .link{text-decoration:underline wavy var(--teal) 2px;text-underline-offset:.25em;font-weight:600}& .read{grid-template-columns:14rem minmax(0,46rem);justify-content:center;align-items:start;gap:1.5rem 2.5rem;display:grid;&.solo,&:not(:has(.toc)){grid-template-columns:minmax(0,46rem)}&>:not(.toc){grid-column:-2}}& .toc{background:var(--ground);border-radius:var(--hand);padding:1.1rem 1.25rem;font-size:1rem;line-height:1.3;position:sticky;top:1.5rem;rotate:-1deg;& p{margin-bottom:.6rem;font-weight:800}& li+li{margin-top:.5rem}& a{color:var(--muted)}& a:hover{color:var(--ink);text-decoration:underline wavy var(--pink) 2px;text-underline-offset:.25em}}& .sheet{border-radius:var(--hand);background:var(--ground);padding:clamp(1.5rem,5vw,3.25rem);& h1{text-transform:uppercase;font-size:clamp(1.55rem,6.2vw,3.1rem);font-weight:800;line-height:1.05}& .icon{border-radius:22%;margin-bottom:1.25rem}& .sub{color:var(--muted);margin-top:.75rem;font-size:1.25rem;line-height:1.4}& .more{margin-top:1.5rem}& .prose,& .form{margin-top:2.5rem}}& .meta{flex-wrap:wrap;gap:.5rem;margin-top:1.25rem;font-size:1rem;font-weight:600;display:flex;&>*{border-radius:var(--hand);background:var(--y);color:var(--on);padding:.1rem .7rem}&>:nth-child(3n+2){background:var(--t)}&>:nth-child(3n){background:var(--p)}}& .prose{--link:var(--ink);--measure:52ch;& h2{font-size:1.65rem;font-weight:800}& h3{font:700 1.3rem/1.25 var(--marker)}& h2>span:last-child{--swipe-h:.5em;background:linear-gradient(var(--yellow), var(--yellow)) 0 80% / 100% .5em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.1em}& h2:nth-of-type(3n+2)>span:last-child{background-image:linear-gradient(var(--pink), var(--pink))}& h2:nth-of-type(3n)>span:last-child{background-image:linear-gradient(var(--teal), var(--teal))}@supports (animation-timeline:view()){& h2>span:last-child{animation:linear both napkin-swipe view();animation-range:entry 20% cover 35%}}& a{text-decoration:underline wavy var(--teal) 2px;text-underline-offset:.25em}& a:hover{background:var(--yellow)}& blockquote{border:2.5px solid var(--ink);border-radius:var(--hand);color:var(--ink);font:500 1.15rem/1.5 var(--marker);margin-bottom:2rem;padding:1rem 1.4rem;position:relative}& blockquote:after{content:"";border:solid var(--ink);background:var(--ground);border-width:0 2.5px 2.5px 0;width:1.2rem;height:1.2rem;position:absolute;bottom:-.72rem;left:2.5rem;transform:skew(20deg)}& hr{background:var(--ink);opacity:.5;border:0;height:12px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12'%3E%3Cpath d='M0 6q10-8 20 0t20 0' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") 50%/40px 12px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12'%3E%3Cpath d='M0 6q10-8 20 0t20 0' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") 50%/40px 12px repeat-x}& pre[class*=language-]{border:2.5px solid var(--ink);border-radius:14px 6px 12px 8px}}& .onward a{padding-block:1.1rem}& .form{& label{font-weight:700}& :is(input,textarea){border:2.5px solid var(--ink);border-radius:var(--hand);transition:box-shadow .3s var(--ease), background .2s;outline:0}& :is(input,textarea):focus{background:color-mix(in oklab, var(--yellow) 30%, transparent);box-shadow:0 0 0 2px var(--ground), 0 0 0 4.5px var(--ink), 0 0 0 8px var(--teal)}}& footer{border-top:2.5px dashed var(--rule);flex-wrap:wrap;justify-content:space-between;gap:.75rem 1.5rem;padding-block:1.5rem 2.75rem;font-weight:500;display:flex;& p:last-child{gap:1.25rem;display:flex}& a{text-decoration:underline wavy var(--pink) 2px;text-underline-offset:.25em}}@media (width<=60rem){& .read{grid-template-columns:minmax(0,46rem)}& .toc{position:relative;top:0;rotate:none}}@media (width<=44rem){& header nav{flex-basis:100%;order:3;margin-left:-.6rem}& header nav a,& header button{padding-inline:.6rem}& .btn{white-space:nowrap;gap:.35rem;padding-inline:.8rem;font-size:.95rem}& .hero{grid-template-columns:minmax(0,1fr)}& .mascot{justify-self:end;margin-top:-1rem;& .mug{width:130px;height:130px}& .arrow{display:none}}& .roles{margin-top:2.5rem}& .intro{margin-top:1.5rem}& .panels{flex-direction:column;display:flex}}}@keyframes napkin-draw{0%{stroke-dashoffset:1px}}@keyframes napkin-swipe{0%{background-size:0 var(--swipe-h,78%)}}