.blog-post{--post-accent:light-dark(#075985,#7dd3fc);--post-body:light-dark(#2c3c49,#d4dce2);--post-rule:color-mix(in oklab, var(--color) 18%, transparent);--post-measure:65ch;padding-block:clamp(1.5rem,4vw,3rem) 3rem;& a:focus-visible{outline:2px solid var(--post-accent);outline-offset:4px;border-radius:2px}}.post-header{max-inline-size:var(--post-measure);margin-block-end:2.25rem;margin-inline:auto;& h1{letter-spacing:-.035em;text-wrap:balance;view-transition-name:var(--vt-title,auto);margin-block:.75rem 1rem;font-size:clamp(2.25rem,1.5rem + 3vw,3.5rem);font-weight:650;line-height:1.08}}.post-meta{color:var(--color-light);flex-wrap:wrap;align-items:baseline;gap:.65em;font-size:.8125rem;display:flex;&>span:first-child{color:var(--color);font-weight:600}}.post-date{view-transition-name:var(--vt-date,auto)}.post-description{max-inline-size:52ch;color:var(--post-body);text-wrap:pretty;font-size:1.125rem;line-height:1.6}.post-updated{color:var(--color-light);margin-block-start:1rem;font-size:.8125rem}.post-cover{margin-block-end:clamp(2rem,5vw,3.5rem);& img{border-radius:var(--radius-md,8px);block-size:auto;inline-size:100%;view-transition-name:var(--vt-image,auto)}}.post-reading-layout{align-items:start;gap:2rem;display:grid}.post-contents{border-block:1px solid var(--post-rule);padding-block:1rem;font-size:.8125rem;line-height:1.5;& p{margin-block-end:.65rem;font-weight:650}& ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem 1.25rem;display:grid}& a{color:var(--color-light);text-underline-offset:.2em;padding-block:.35rem;text-decoration:underline #0000;display:block;&:hover{color:var(--post-accent);text-decoration-color:currentColor}}}.blog-prose{inline-size:100%;min-inline-size:0;max-inline-size:var(--post-measure);color:var(--post-body);overflow-wrap:anywhere;margin-inline:auto;font-size:1rem;line-height:1.8;&>:first-child{margin-block-start:0}&>:last-child{margin-block-end:0}& :where(p,ul,ol,blockquote,pre,figure,table,iframe){margin-block:0 1.35em}&>p:first-child{color:var(--color);font-size:1.125em;line-height:1.75}& :where(h1,h2,h3,h4,h5,h6){color:var(--color);letter-spacing:-.02em;text-wrap:balance;scroll-margin-block-start:5rem;font-weight:650;line-height:1.25}& :where(h1,h2){margin-block:2.5em .75em;font-size:1.75em}& :where(h3,h4,h5,h6){margin-block:2em .7em;font-size:1.1875em}& :where(h2,h3,h4)+:where(ul,ol){margin-block-start:1em}& strong{color:var(--color);font-weight:650}& a{color:var(--post-accent);text-decoration:underline .06em;text-decoration-color:color-mix(in oklab, currentColor 55%, transparent);text-underline-offset:.2em;text-decoration-skip-ink:auto;&:hover{text-decoration-color:currentColor;text-decoration-thickness:.1em}}& :where(ul,ol){padding-inline-start:1.5em;list-style-position:outside}& ul{list-style-type:disc}& ol{list-style-type:decimal}& ul ul{list-style-type:circle}& ol ol{list-style-type:lower-alpha}& li{padding-inline-start:.35em;&::marker{color:var(--post-accent);font-variant-numeric:tabular-nums;font-weight:650}&+li{margin-block-start:.8em}&>:where(p,ul,ol){margin-block:.65em}&>:first-child{margin-block-start:0}&>:last-child{margin-block-end:0}}& li :where(ul,ol){padding-inline-start:1.25em;& li+li{margin-block-start:.3em}}& blockquote{border-inline-start:1px solid var(--post-accent);color:var(--color);padding-inline-start:1.25em;font-size:1.125em;&>:last-child{margin-block-end:0}}& :where(img,video){block-size:auto;max-inline-size:100%}& iframe{border-radius:var(--radius-md,8px);background:var(--surface-1);border:0;max-inline-size:100%}& iframe[src*="youtube.com/embed/"],& iframe[src*="youtube-nocookie.com/embed/"],& iframe[src*="player.vimeo.com/"]{aspect-ratio:16/9;block-size:auto;inline-size:100%}& pre{max-inline-size:100%;font-size:.875em;line-height:1.7;overflow-x:auto}& :where(th,td){border-block-end:1px solid var(--post-rule);text-align:start;padding:.65em .8em}& hr{border:0;border-block-start:1px solid var(--post-rule);margin-block:2.5em}}@media (width>=55rem){.has-contents{& .post-header{margin-inline-start:11rem}& .post-reading-layout{grid-template-columns:8.5rem minmax(0,1fr);column-gap:2.5rem}}.post-contents{border-block-end:0;padding-block:.75rem 0;position:sticky;top:5rem;& ul{grid-template-columns:minmax(0,1fr)}}}@media (width<=24rem){.post-contents ul{grid-template-columns:minmax(0,1fr)}}@media print{.blog-post{padding-block:0}.post-header{margin-inline:auto}.post-reading-layout{display:block}.blog-prose{max-inline-size:none}}