@layer base{:root{--color-primary:light-dark(var(--primaryColorDark),var(--primaryColorLight));--color-light:var(--colorLight);--color-dark:var(--colorDark);--color-text:light-dark(var(--color-dark),var(--color-light));--color-text-dim:oklch(from var(--color-text) l c h / .85);--color-background:light-dark(var(--color-light),var(--color-dark));--color-toc-dark:oklch(45% .25 230);--color-toc-light:oklch(80% .25 230);--color-toc:light-dark(var(--color-toc-dark),var(--color-toc-light));--base-size:1rem;--ratio:1.25;--size-step-0:var(--base-size);--size-step-1:calc(var(--size-step-0) * var(--ratio));--size-step-2:calc(var(--size-step-1) * var(--ratio));--size-step-3:calc(var(--size-step-2) * var(--ratio));--size-step-4:calc(var(--size-step-3) * var(--ratio));--size-step--1:calc(var(--size-step-0) / var(--ratio));--space-3xs:calc(.25 * var(--base-size));--space-2xs:calc(.5 * var(--base-size));--space-xs:calc(.75 * var(--base-size));--space-s:var(--base-size);--space-m:calc(1.5 * var(--base-size));--space-l:calc(2 * var(--base-size));--space-xl:calc(3 * var(--base-size));--space-2xl:calc(4 * var(--base-size));--space-3xl:calc(6 * var(--base-size));--font-sans:"IBM Plex Sans Variable", var(--fontSystemSans);--font-mono:"IBM Plex Mono", SFMono-Regular, var(--fontSystemMono);--font-serif:"Lora Variable", Georgia, serif}*,:before,:after{box-sizing:border-box}body,h1,h2,h3,h4,p{margin:0}ul[role=list],ol[role=list]{list-style:none}input,button,textarea,select{font:inherit}video{max-inline-size:100%;display:block}html{color-scheme:light dark}::selection{background-color:var(--color-toc);color:var(--color-background)}:target{color:var(--color-primary)}:focus-visible{outline:2px solid var(--color-primary);outline-offset:.3ex}html{scroll-padding-block:var(--space-l);overflow-wrap:break-word}.flow>*+*{margin-block-start:var(--flow-space,var(--space-s))}:not(h1,h2,h3,h4)+h2{--flow-space:var(--space-xl)}:not(h1,h2,h3,h4)+h3{--flow-space:var(--space-l)}:not(h1,h2,h3,h4)+h4{--flow-space:var(--space-m)}strong{font-weight:600}html:focus-within{scroll-behavior:smooth;@media (prefers-reduced-motion:reduce){scroll-behavior:auto}}}@layer components{body{min-block-size:100vh;max-inline-size:60rem;padding-inline:var(--space-l);margin-inline:auto;@media (width>=50em){padding-inline:var(--space-2xl)}background:var(--color-background);color:var(--color-text);font-family:var(--font-sans);font-weight:400;font-size:var(--size-step-0);line-height:1.7}main{max-inline-size:40rem;margin-inline:auto}main,footer{margin-block-start:var(--space-l);@media (width>=50em){margin-block-start:var(--space-2xl)}}footer{padding-block:var(--space-s);border-block-start:1px solid gray;@media (width>=50em){padding-block:var(--space-l)}}h1,h2,h3,h4{font-family:var(--font-serif);text-wrap:balance;max-inline-size:28ch;line-height:1.1}h1,h2{font-weight:600}h3,h4{font-weight:500}h1{font-size:var(--size-step-4)}h2{font-size:var(--size-step-3)}h3{font-size:var(--size-step-2)}h4{font-size:var(--size-step-1)}.subtitle{font-size:var(--size-step-2);text-wrap:balance;line-height:1.5}ul,ol{padding-inline-start:1em}article li:not(:first-child):not(:is(ul,ol) :is(ul,ol) li){margin-block-start:var(--space-2xs)}a{color:currentColor;text-decoration-color:var(--color-primary);text-underline-offset:.3ex;-webkit-tap-highlight-color:transparent}a:active{--background-color:oklch(from var(--color-text) l c h / .1);background-color:var(--background-color);box-shadow:0 0 0 .3em var(--background-color)}@media (hover:hover){a:hover{text-decoration-color:var(--color-text)}}:is(h2,h3,h4) a{text-decoration-line:none;&:after{content:"#";color:var(--color-primary);margin-inline-start:var(--space-2xs)}@media (hover:hover){&:hover:after{text-decoration-line:underline;text-decoration-color:var(--color-text)}}}image-compare{--focus-color:var(--color-primary);--thumb-size:var(--size-step-4)}main :is(img,image-compare,video){box-shadow:0 .1rem .5rem oklch(from var(--color-text) l c h / .1);@media (forced-colors:active){border:1px solid}}code{font-family:var(--font-mono);color:var(--color-primary);font-style:normal;font-weight:400}.note,.astro-code,.shiki{scrollbar-width:thin;padding-inline:var(--space-s);padding-block:var(--space-s);copy-code &{padding-block-start:calc(1em + var(--space-s))}}copy-code button.copy{color:var(--color-light);border:1px solid var(--color-light);background-color:#0000;line-height:1.3;position:absolute;inset-block-start:var(--space-2xs);inset-inline-end:var(--space-2xs);@media (hover:hover){&:hover{outline:2px dashed var(--color-primary);outline-offset:.3ex}}}.note{background-color:light-dark(oklch(98% .16 90),oklch(30% .16 90));@media (forced-colors:active){border:1px solid}&:before{content:"Note";font-size:var(--size-step-1);font-weight:600;display:block}}.astro-code,.shiki{@media (forced-colors:active){border:1px solid}}.icon{align-items:center;inline-size:1em;display:inline-flex}}@layer utilities{.call-to-action{background-color:var(--color-primary);color:var(--color-background);text-decoration-line:none;@media (hover:hover){&:hover{text-decoration-line:underline;text-decoration-color:currentColor}}padding:var(--space-2xs) var(--space-s);font-weight:600}.extra-space{margin-block:var(--space-l)}.video-description{border:1px solid oklch(from var(--color-text) l c h / .2);padding:var(--space-s);font-size:var(--size-step--1);color:var(--color-text-dim);margin-block-start:var(--space-2xs);line-height:1.5}.video-description:before{content:"Video description:";color:var(--color-text);font-weight:600;display:block}}