@layer reset,base,layout,components,post,syntax,theme;@font-face{font-family:Lato;font-weight:300;font-display:swap;src:url(/fonts/lato-300.woff2)format("woff2")}@font-face{font-family:Merriweather;font-weight:300;font-display:swap;src:url(/fonts/merriweather-300.woff2)format("woff2")}@font-face{font-family:Merriweather;font-weight:900;font-display:swap;src:url(/fonts/merriweather-900.woff2)format("woff2")}@view-transition{navigation: auto;
}@layer reset{*,::before,::after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}ul,ol{padding:0}a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit}img{display:block;max-inline-size:100%;block-size:auto}table{border-collapse:collapse;inline-size:100%}}@layer base{:root{color-scheme:light dark;--gap:20px;--content-gap:20px;--radius:8px;--column:50rem;--cta:#ee825b;--theme:light-dark(#efefef, #1a1b29);--entry:light-dark(#fff, #2a2b3e);--primary:light-dark(rgb(0 0 0 / 0.88), rgb(255 255 255 / 0.9));--secondary:light-dark(rgb(0 0 0 / 0.56), rgb(255 255 255 / 0.6));--tertiary:light-dark(rgb(0 0 0 / 0.15), rgb(255 255 255 / 0.15));--content:light-dark(rgb(0 0 0 / 0.88), rgb(255 255 255 / 0.74));--code-bg:light-dark(#e5e5e5, #2a2b3e);--border:light-dark(#eee, #2a2b3e7e);--chip:rgb(128 128 128 / 0.118);--ink-shadow:light-dark(#1c1d21, #2a2b3e);--font-body:Merriweather, Georgia, serif;--font-heading:Lato, system-ui, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;scrollbar-gutter:stable;scrollbar-color:var(--tertiary)transparent;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}@media(prefers-reduced-motion:no-preference){:root:focus-within{scroll-behavior:smooth}}body{font:300 16px/1.6 var(--font-body);color:var(--primary);background:var(--theme);overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);line-height:1.2;padding-block:.5em;text-wrap:balance}h1{font-size:2.5em}h2{font-size:2.25em}h3{font-size:1.75rem}h4{font-size:1.25em}h5,h6{font-size:1em}p,li{line-height:1.8;text-wrap:pretty}code,pre,kbd,samp{font-family:var(--font-mono)}:focus-visible{outline:2px solid var(--cta);outline-offset:3px;border-radius:2px}[id]{scroll-margin-block-start:1rem}}@layer theme{.when-dark{display:none}@media(prefers-color-scheme:light){:root:has(#theme-flip:checked){color-scheme:dark;.when-light{display:none}.when-dark{display:revert}}}@media(prefers-color-scheme:dark){:root:has(#theme-flip:checked){color-scheme:light}:root:not(:has(#theme-flip:checked)){.when-light{display:none}.when-dark{display:revert}}}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}@layer layout{.nav{display:flex;flex-wrap:wrap;justify-content:space-between;max-inline-size:calc(1024px + var(--gap) * 2);margin-inline:auto}.logo,.menu{display:flex;align-items:center;margin-inline:var(--gap)}.logo>a{display:flex;align-items:center;font-size:24px}.site-title{font-family:var(--font-body);font-weight:900}.logo .site-title{line-height:3.5}.site-orange-dot{font-size:4rem;font-weight:300;line-height:0;color:var(--cta)}.blobber{position:relative;display:inline-block;inline-size:50px;block-size:27px;transform:scale(1.3);svg{position:absolute;inline-size:40px;animation:blob-spin linear infinite alternate}svg:nth-child(odd){animation-direction:alternate-reverse}svg:nth-child(1){transform:scale(.9)rotate(195deg);animation-duration:14s;animation-delay:200ms}svg:nth-child(2){transform:scale(.6)rotate(40deg);animation-duration:18s}svg:nth-child(3){transform:scale(.75)rotate(80deg);animation-duration:16s}svg:nth-child(4){transform:scale(.8)rotate(120deg);animation-duration:14s}svg:nth-child(5){transform:scale(.6)rotate(160deg);animation-duration:16s}svg:nth-child(6){transform:scale(.75)rotate(200deg);animation-duration:18s}path{fill:transparent;stroke:var(--cta);stroke-width:5px;stroke-linejoin:round;opacity:.7;transition:opacity .5s ease-in-out;animation:blob-fade-in 5s linear}}.nav:hover .blobber path{opacity:1}@keyframes blob-spin{from{transform:rotate(0)}to{opacity:.9}}@keyframes blob-fade-in{from{opacity:0}to{opacity:.7}}@media(prefers-reduced-motion:reduce){.blobber svg,.blobber path{animation:none}}.theme-toggle{display:inline-flex;margin-inline:8px;padding:4px;cursor:pointer;border-radius:50%;svg{display:block;block-size:18px;inline-size:18px}input{position:absolute;inline-size:1px;block-size:1px;margin:0;opacity:0}&:hover{color:var(--cta)}&:has(:focus-visible){outline:2px solid var(--cta)}}.menu{list-style:none;gap:var(--gap);overflow-x:auto;white-space:nowrap;line-height:60px;span{box-shadow:0 1px var(--tertiary);transition:box-shadow .3s ease-in-out}a:hover span, [aria-current] span{box-shadow:0 2px var(--cta)}}.main{inline-size:max(85vw,min(100%,760px));min-block-size:calc(100dvh - 21rem);margin-inline:auto;padding:1rem var(--gap)var(--gap)}.column{inline-size:min(100%,var(--column));margin-inline:auto}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,22rem));justify-content:space-around;align-items:center}.page-header{margin-block:24px var(--content-gap);h1{font-size:3em}}.footer{padding:10vh var(--gap)0;font-size:14px;color:var(--secondary);text-align:center;p{margin-block-end:8px}a{border-block-end:1px solid var(--secondary)}a:hover{color:var(--primary);border-color:var(--primary)}.social-icons{padding-block:3rem}}.top-link{position:fixed;inset-block-end:60px;inset-inline-end:30px;z-index:99;inline-size:42px;block-size:42px;padding:12px;border-radius:50%;color:var(--secondary);background:var(--tertiary);&:hover{color:var(--primary)}svg{display:block}}@supports(animation-timeline:scroll()){.top-link{animation:top-link-reveal linear both;animation-timeline:scroll(root block);animation-range:700px 900px}@keyframes top-link-reveal{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}}.pixel{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}.not-found{display:grid;place-content:center;min-block-size:50dvh;text-align:center;h1{font-size:clamp(6rem,25vw,10rem);padding:0}a{box-shadow:0 1px var(--tertiary)}a:hover{box-shadow:0 2px var(--cta)}}}@layer components{.category{display:inline-block;padding-block-start:5px;font-weight:900;opacity:.5}.tag{display:inline-block;margin-inline-start:3px;padding:3px 5px;font-size:12px;line-height:1.3;background:var(--chip);border-radius:5px}.social-icons{display:flex;gap:12px;a{display:inline-flex}svg{inline-size:26px;block-size:26px}a:hover{color:var(--cta)}}.footer .social-icons{justify-content:center}.first-entry{grid-column:1/-1;justify-self:center;display:flex;flex-direction:column;justify-content:center;inline-size:fit-content;max-inline-size:min(100%,var(--column));min-block-size:200px;margin-block:.5rem 1.5rem;margin-inline:min(5vw,20px);padding:var(--gap);border-inline-start:1px solid var(--cta);.entry-header{padding-block-end:1rem;border-block-end:1px solid var(--secondary)}h1{font-size:34px;line-height:1.3;padding:0}.entry-content{margin-block:14px;color:var(--secondary)}}.post-entry{position:relative;margin-block-end:var(--gap);padding:1rem;transition:transform .1s;&:active{transform:scale(.96)}.entry-header{padding-block-end:.5rem;border-block-end:1px solid var(--secondary);transition:border-color 700ms cubic-bezier(.075,.82,.165,1)}&:hover .entry-header, &:focus-within .entry-header{border-color:var(--cta)}.post-meta-header{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;padding-block-end:3px}.tags{text-align:end}h2{font-size:24px;line-height:1.3;padding:0}.entry-link::after{content:"";position:absolute;inset:0}.entry-link:focus-visible{outline:none}&:has(.entry-link:focus-visible){outline:2px solid var(--cta);outline-offset:2px}.entry-content{margin-block:8px;color:var(--secondary);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}.entry-footer{font-size:13px;color:var(--secondary)}}@media(prefers-reduced-motion:reduce){.post-entry:active{transform:none}}.pagination{display:flex;justify-content:space-between;inline-size:min(100%,var(--column));margin:var(--gap)auto 0;a{padding:0 16px;font-size:13px;line-height:36px;color:var(--theme);background:var(--primary);border-radius:18px}.next{margin-inline-start:auto}}.terms{list-style:none;display:flex;flex-wrap:wrap;gap:20px;a{display:block;padding:3px 10px;background:var(--tertiary);border-radius:6px;transition:background-color 300ms ease-in-out,color 300ms ease-in-out}a:hover{color:#fff;background:var(--cta);text-shadow:1px 1px var(--ink-shadow)}sup{font-size:.6em;font-weight:900}}.archive-year{margin-block-start:40px;&:not(:last-of-type){border-block-end:2px solid var(--border)}}.archive-month{display:flex;align-items:flex-start;padding-block:10px;&:not(:last-of-type){border-block-end:1px solid var(--border)}}.archive-month-header{flex:none;inline-size:200px;margin-block:10px}.archive-posts{flex:1}.archive-entry{position:relative;margin-block:10px;padding:5px}.archive-entry-title{font-size:1.75rem;font-weight:400;padding-block:.25em;.entry-link::after{content:"";position:absolute;inset:0}}.archive-entry:hover .archive-entry-title{color:var(--cta)}.archive-count,.archive-meta{font-size:14px;font-weight:300;color:var(--secondary)}@media(max-width:768px){.archive-year{margin-block-start:20px}.archive-month{flex-direction:column}.archive-month-header{margin-block:0}}}@layer post{.post-header{margin-block:24px var(--content-gap);.category{inline-size:50%;padding-block-end:.25rem;font-size:1.25em;border-block-end:1px solid var(--secondary)}}.post-title{padding-block:.25em;margin-block-end:2px}.post-summary{font-size:20px;opacity:.7}.post-description{margin-block:10px 5px;opacity:.85}.post-meta{font-size:14px;color:var(--secondary)}.post-tags{list-style:none;display:flex;flex-wrap:wrap;gap:5px 3px;padding-block-start:.75rem;a{display:block;padding-inline:14px;font-size:14px;line-height:34px;color:var(--secondary);background:var(--code-bg);border:1px solid var(--border);border-radius:var(--radius);transition:background-color 300ms ease-in-out,color 300ms ease-in-out}a:hover{color:#fff;background:var(--cta);text-shadow:1px 1px var(--ink-shadow)}}.toc{margin:0 2px 40px;padding:.4em;background:light-dark(var(--code-bg),var(--entry));border:1px solid var(--border);border-radius:var(--radius);summary{margin-inline-start:20px;font-weight:500;line-height:1.8;cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}summary::before{content:"›";display:inline-block;inline-size:1em;margin-inline-end:.3em;text-align:center}&[open] > summary::before{rotate:90deg}&::details-content{block-size:0;opacity:0;overflow:clip}&[open]::details-content{block-size:auto;opacity:1}@media(prefers-reduced-motion:no-preference){interpolate-size: allow-keywords; summary::before{transition:rotate .2s ease}&::details-content{transition:block-size .3s ease,opacity .3s ease,content-visibility .3s allow-discrete}}nav{margin-inline:20px;padding:10px 20px}ul{list-style:revert}li ul{margin-inline-start:var(--gap)}a{font-family:var(--font-heading)}nav > ul > li > a{font-size:18px}a:hover{box-shadow:0 2px var(--cta)}}.post-content{color:var(--content); :is(p, ul, ol, dl, figure) { margin-block-end: var(--content-gap); } h2 { margin-block: 32px 24px; } h3 { margin-block: 24px 16px; font-size: 24px; } h4 { margin-block: 24px 16px; font-size: 16px; } h5 { margin-block: 24px 16px; font-size: 14px; } h6 { margin-block: 24px 16px; font-size: 12px; } .anchor { margin-inline-start: 8px; font-weight: 500; color: var(--secondary); opacity: 0; box-shadow: none; } :is(h1, h2, h3, h4, h5, h6):hover .anchor, .anchor:focus-visible { opacity: 1; } a { box-shadow: 0 1px var(--tertiary); transition: box-shadow 300ms ease-in-out; } a:hover { box-shadow: 0 2px var(--cta); } :is(ul, ol) { padding-inline-start: 20px; } li { margin-block-start: 5px; } li p { margin-block-end: 0; } li > :is(ul, ol) { margin-block-end: 0; } blockquote { margin-block: 20px; padding-inline: 14px; border-inline-start: 3px solid var(--primary); p:last-child { margin-block-end: 0; } } hr { block-size: 2px; margin-block: 30px; background: var(--tertiary); border: 0; } img { margin-block: 1rem; border-radius: 4px; } table { display: block; overflow-x: auto; margin-block-end: 32px; } :is(th, td) { min-inline-size: 80px; padding: 12px 8px; line-height: 1.5; border-block-end: 1px solid var(--border); } th { font-size: 14px; text-align: start; } code { margin-inline: 4px; padding: 4px 6px; font-size: 0.78em; line-height: 1.5; background: var(--code-bg); border-radius: 2px; } pre { position: relative; margin-block: 10px; background: var(--code-bg); border-radius: var(--radius); } pre code { display: block; margin: 0; padding: 10px; overflow-x: auto; background: none; border-radius: 0; tab-size: 2; } .highlight { margin-block: 10px; pre { margin: 0; } }}.copy-code{position:absolute;inset-block-start:4px;inset-inline-end:4px;padding:0 5px;font:14px/1.6 var(--font-body);color:rgb(255 255 255/.8);background:rgb(78 78 78/.8);border:0;border-radius:var(--radius);cursor:pointer;opacity:0;transition:opacity 150ms}pre:hover .copy-code,.copy-code:focus-visible{opacity:1}@media(scripting:none){.post-content pre code{user-select:all}}.diagram{margin-block:calc(var(--content-gap) * 2);max-inline-size:90vw;overflow-x:auto;svg{display:block;block-size:auto} :is(p, span, div) { font-family: var(--font-body); font-weight: 300; line-height: 1.8; } text.pieTitleText { font-size: 16px !important; }}@media(max-width:800px){.diagram g.legend :is(rect,text){translate:-85% 45%}}.diagram-missing{padding:10px;border:1px dashed var(--cta);border-radius:var(--radius);figcaption{font-size:14px;color:var(--secondary)}}.cast img{border-radius:var(--radius)}.post-footer{margin-block-start:56px}.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-block:24px 10px;font-size:14px;color:var(--secondary)}:is(.share-post,.share a,.share-selection){padding-inline:14px;font:14px/34px var(--font-body);color:var(--secondary);background:var(--code-bg);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:background-color 300ms ease-in-out,color 300ms ease-in-out}:is(.share-post,.share a,.share-selection):hover{color:#fff;background:var(--cta);text-shadow:1px 1px var(--ink-shadow)}.share-selection{position:absolute;z-index:10;color:var(--primary);background:var(--entry);border:2px solid var(--cta);box-shadow:0 2px 8px rgb(0 0 0/.25);white-space:nowrap}:is(.share-post,.share-selection)[hidden]{display:none}.share-qr{margin-block:10px;font-size:14px;color:var(--secondary);summary{cursor:pointer}img{margin-block-start:10px;padding:8px;background:#fff;border-radius:4px}}::target-text,::highlight(quote),::selection{color:currentColor;background-color:rgb(238 130 91/.15);text-decoration:underline 2.5px #ee825b}.mud-figure{position:relative;scroll-margin-block-start:20px;> .anchor{position:absolute;inset-block-start:0;inset-inline-end:4px;margin:0}&:hover > .anchor{opacity:1}}@media(hover:none){.mud-figure>.anchor{opacity:.5}}.paginav{display:flex;margin-block:10px;line-height:30px;background:var(--code-bg);border:1px solid var(--border);border-radius:var(--radius);a{min-inline-size:33%;max-inline-size:250px;padding-inline:14px;border-radius:var(--radius);transition:background-color 300ms ease-in-out,color 300ms ease-in-out}a:hover{color:#fff;background:var(--cta);text-shadow:1px 1px var(--ink-shadow)}.next{margin-inline-start:auto;text-align:end}.title{font-size:small;letter-spacing:1px;text-transform:uppercase}}}@layer syntax{.chroma{--syn-comment:light-dark(#7a7551, #b6b18b);--syn-variable:light-dark(#c4203a, #eb3c54);--syn-literal:light-dark(#8a6d00, #e7ce56);--syn-attribute:light-dark(#b85a10, #ee7c2b);--syn-string:light-dark(#1f7fa3, #4fb4d7);--syn-function:light-dark(#3f7d2e, #78bb65);--syn-keyword:light-dark(#8e3f80, #b45ea4); :is(.c, .ch, .cm, .c1, .cs, .cp, .cpf) { color: var(--syn-comment); font-style: italic; } :is(.k, .kc, .kd, .kn, .kp, .kr, .kt, .ow) { color: var(--syn-keyword); } :is(.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss) { color: var(--syn-string); } :is(.m, .mb, .mf, .mh, .mi, .il, .mo, .nb, .bp, .no, .l) { color: var(--syn-literal); } :is(.nv, .vc, .vg, .vi, .vm, .nt, .ni) { color: var(--syn-variable); } :is(.na, .nd) { color: var(--syn-attribute); } :is(.nf, .fm, .nc, .nn, .gh, .gu) { color: var(--syn-function); } .ge { font-style: italic; } .gs { font-weight: 700; } .gd { color: var(--syn-variable); } .gi { color: var(--syn-function); }}}