@layer TOKENS,RESET,GLOBAL,UTILS,COMPONENTS,LAYOUT,PAGES,DEMOS;@layer TOKENS{:root{--font-family-body: Source Sans, body-fallback-1, body-fallback-2, body-fallback-3, body-fallback-4, system-ui;--font-weight-body-regular: 400;--font-weight-body-bold: 700;--font-family-mono: Source Code Pro, mono-fallback-1, mono-fallback-2, mono-fallback-3, monospace;--font-weight-mono-regular: 400;--font-weight-mono-bold: 700;--csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) hsl(211deg 100% 83%);--color-accent-0: var(--csstools-light-dark-toggle--0, hsl(240deg 100% 33%));--csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) hsl(211deg 100% 73%);--color-accent-1: var(--csstools-light-dark-toggle--1, hsl(240deg 100% 25%));--_color-surface-hs: 200deg 6%;--csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 6%);--color-surface-0: var(--csstools-light-dark-toggle--2, hsl(var(--_color-surface-hs) 100%));--csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 12%);--color-surface-1: var(--csstools-light-dark-toggle--3, hsl(var(--_color-surface-hs) 96%));--csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 19%);--color-surface-2: var(--csstools-light-dark-toggle--4, hsl(var(--_color-surface-hs) 91%));--csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 28%);--color-surface-3: var(--csstools-light-dark-toggle--5, hsl(var(--_color-surface-hs) 86%));--csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 34%);--color-surface-4: var(--csstools-light-dark-toggle--6, hsl(var(--_color-surface-hs) 80%));--csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 40%);--color-surface-5: var(--csstools-light-dark-toggle--7, hsl(var(--_color-surface-hs) 75%));--csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 50%);--color-surface-6: var(--csstools-light-dark-toggle--8, hsl(var(--_color-surface-hs) 55%));--csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 60%);--color-surface-7: var(--csstools-light-dark-toggle--9, hsl(var(--_color-surface-hs) 35%));--csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 70%);--color-surface-8: var(--csstools-light-dark-toggle--10, hsl(var(--_color-surface-hs) 23%));--csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 86%);--color-surface-9: var(--csstools-light-dark-toggle--11, hsl(var(--_color-surface-hs) 13%));--color-text-normal: var(--color-surface-9);--csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) var(--color-surface-8);--color-text-soft: var(--csstools-light-dark-toggle--12, var(--color-surface-7));--csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 100%);--color-text-emphasis: var(--csstools-light-dark-toggle--13, hsl(var(--_color-surface-hs) 0%));--csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 0%);--color-text-inverted: var(--csstools-light-dark-toggle--14, hsl(var(--_color-surface-hs) 100%));--color-border-0: var(--color-surface-5);--transition-duration: .2s;--transition-timing-function: ease;--size-leading-4xs: 1;--size-leading-3xs: 1.1;--size-leading-2xs: 1.2;--size-leading-xs: 1.3;--size-leading-sm: 1.4;--size-leading-base: 1.5;--size-leading-md: 1.6;--size-leading-lg: 1.7;--size-tracking-xs: -.5px;--size-tracking-sm: -.25px;--size-tracking-md: .25px;--size-tracking-lg: 1px;--size-spacing--4: 2px;--size-spacing--3: 4px;--size-spacing--2: 8px;--size-spacing--1: 12px;--size-spacing-0: 16px;--size-spacing-1: 18px;--size-spacing-2: 20px;--size-spacing-3: 24px;--size-spacing-4: 28px;--size-spacing-5: 32px;--size-spacing-6: 36px;--size-spacing-7: 40px;--size-spacing-8: 48px;--size-spacing-9: 56px;--size-spacing-10: 64px;--size-spacing-11: 76px;--size-spacing-12: 96px;--size-spacing-13: 112px;--size-relative--4: .125em;--size-relative--3: .25em;--size-relative--2: .5em;--size-relative--1: .75em;--size-relative-0: 1em;--size-relative-1: 1.25em;--size-relative-2: 1.5em}@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red,red)){:root{--color-accent-0: light-dark(hsl(240deg 100% 33%), hsl(211deg 100% 83%));--color-accent-1: light-dark(hsl(240deg 100% 25%), hsl(211deg 100% 73%))}}@supports (color: light-dark(red,red)){:root{--color-surface-0: light-dark(hsl(var(--_color-surface-hs) 100%), hsl(var(--_color-surface-hs) 6%));--color-surface-1: light-dark(hsl(var(--_color-surface-hs) 96%), hsl(var(--_color-surface-hs) 12%));--color-surface-2: light-dark(hsl(var(--_color-surface-hs) 91%), hsl(var(--_color-surface-hs) 19%));--color-surface-3: light-dark(hsl(var(--_color-surface-hs) 86%), hsl(var(--_color-surface-hs) 28%));--color-surface-4: light-dark(hsl(var(--_color-surface-hs) 80%), hsl(var(--_color-surface-hs) 34%));--color-surface-5: light-dark(hsl(var(--_color-surface-hs) 75%), hsl(var(--_color-surface-hs) 40%));--color-surface-6: light-dark(hsl(var(--_color-surface-hs) 55%), hsl(var(--_color-surface-hs) 50%));--color-surface-7: light-dark(hsl(var(--_color-surface-hs) 35%), hsl(var(--_color-surface-hs) 60%));--color-surface-8: light-dark(hsl(var(--_color-surface-hs) 23%), hsl(var(--_color-surface-hs) 70%));--color-surface-9: light-dark(hsl(var(--_color-surface-hs) 13%), hsl(var(--_color-surface-hs) 86%));--color-text-soft: light-dark(var(--color-surface-7), var(--color-surface-8));--color-text-emphasis: light-dark(hsl(var(--_color-surface-hs) 0%), hsl(var(--_color-surface-hs) 100%));--color-text-inverted: light-dark(hsl(var(--_color-surface-hs) 100%), hsl(var(--_color-surface-hs) 0%))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) hsl(211deg 100% 83%);--color-accent-0: var(--csstools-light-dark-toggle--0, hsl(240deg 100% 33%));--csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) hsl(211deg 100% 73%);--color-accent-1: var(--csstools-light-dark-toggle--1, hsl(240deg 100% 25%));--csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 6%);--color-surface-0: var(--csstools-light-dark-toggle--2, hsl(var(--_color-surface-hs) 100%));--csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 12%);--color-surface-1: var(--csstools-light-dark-toggle--3, hsl(var(--_color-surface-hs) 96%));--csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 19%);--color-surface-2: var(--csstools-light-dark-toggle--4, hsl(var(--_color-surface-hs) 91%));--csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 28%);--color-surface-3: var(--csstools-light-dark-toggle--5, hsl(var(--_color-surface-hs) 86%));--csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 34%);--color-surface-4: var(--csstools-light-dark-toggle--6, hsl(var(--_color-surface-hs) 80%));--csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 40%);--color-surface-5: var(--csstools-light-dark-toggle--7, hsl(var(--_color-surface-hs) 75%));--csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 50%);--color-surface-6: var(--csstools-light-dark-toggle--8, hsl(var(--_color-surface-hs) 55%));--csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 60%);--color-surface-7: var(--csstools-light-dark-toggle--9, hsl(var(--_color-surface-hs) 35%));--csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 70%);--color-surface-8: var(--csstools-light-dark-toggle--10, hsl(var(--_color-surface-hs) 23%));--csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 86%);--color-surface-9: var(--csstools-light-dark-toggle--11, hsl(var(--_color-surface-hs) 13%));--csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) var(--color-surface-8);--color-text-soft: var(--csstools-light-dark-toggle--12, var(--color-surface-7));--csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 100%);--color-text-emphasis: var(--csstools-light-dark-toggle--13, hsl(var(--_color-surface-hs) 0%));--csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) hsl(var(--_color-surface-hs) 0%);--color-text-inverted: var(--csstools-light-dark-toggle--14, hsl(var(--_color-surface-hs) 100%))}}@supports (font-size: clamp(1rem,1vw,1rem)){:root{--size-font-xs: clamp(.875rem, .342vw + .795rem, 1rem);--size-font-sm: clamp(1rem, .342vw + .92rem, 1.125rem);--size-font-base: clamp(1.125rem, .342vw + 1.045rem, 1.25rem);--size-font-md: clamp(1.25rem, .684vw + 1.09rem, 1.5rem);--size-font-lg: clamp(1.5rem, .684vw + 1.34rem, 1.75rem);--size-font-xl: clamp(1.75rem, 1.026vw + 1.51rem, 2.125rem);--size-font-2xl: clamp(2rem, 1.368vw + 1.679rem, 2.5rem);--size-font-3xl: clamp(2.5rem, 2.735vw + 1.734rem, 3.375rem);--size-font-4xl: clamp(2.75rem, 5.47vw + 1.468rem, 4.75rem)}}@supports not (font-size: clamp(1rem,1vw,1rem)){:root{--size-font-xs: .875rem;--size-font-sm: 1rem;--size-font-base: 1.125rem;--size-font-md: 1.25rem;--size-font-lg: 1.5rem;--size-font-xl: 1.75rem;--size-font-2xl: 2rem;--size-font-3xl: 2.5rem;--size-font-4xl: 2.75rem}@media (min-width: 60em){:root{--size-font-xs: 1rem;--size-font-sm: 1.125rem;--size-font-base: 1.25rem;--size-font-md: 1.5rem;--size-font-lg: 1.75rem;--size-font-xl: 2.125rem;--size-font-2xl: 2.5rem;--size-font-3xl: 3.375rem;--size-font-4xl: 4.75rem}}}}@layer RESET{*{box-sizing:border-box;margin:0;padding:0;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}:where(html,body){min-block-size:100%}:where(body:has(dialog[open])){overflow-y:hidden}:where(input,select,textarea,button){font:inherit;line-height:inherit}:where(img,video){height:auto}:where(img,iframe,video){display:block;max-width:100%}:where(button){border:none;cursor:pointer;color:inherit}:where(ul,ol)[class]{list-style:none}:focus-visible{--outline-thickness:.1875rem;--outline-color: var(--color-accent-0);outline:var(--outline-thickness) solid var(--outline-color);outline-offset:var(--outline-offset, var(--outline-thickness))}}@layer GLOBAL{@media (prefers-reduced-motion){*,*:before,*:after{animation:none!important;transition:none!important}}@media (prefers-reduced-motion: no-preference){@view-transition{navigation: auto;}}html{--csstools-color-scheme--light: initial;color-scheme:light dark;scrollbar-color:var(--color-border-0) var(--color-surface-2)}@media (prefers-color-scheme: dark){html{--csstools-color-scheme--light: }}[data-theme=light]{--csstools-color-scheme--light: initial;color-scheme:light}[data-theme=dark]{--csstools-color-scheme--light: ;color-scheme:dark}body{background-color:var(--color-surface-0);color:var(--color-text-normal);accent-color:var(--color-accent-0);overflow-wrap:break-word;-webkit-font-smoothing:antialiased;font-size:var(--size-font-base);line-height:var(--size-leading-base);font-family:var(--font-family-body);font-weight:var(--font-weight-body-regular)}:is(code,kbd){font-family:var(--font-family-mono);font-weight:var(--font-weight-mono-regular)}:is(strong,h1,h2,h3,h4,h5,h6,th) :is(code,kbd){font-family:var(--font-family-mono);font-weight:var(--font-weight-mono-bold)}code:not([class^="language-"]),kbd{--csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) var(--color-surface-2);background-color:var(--csstools-light-dark-toggle--15, var(--color-surface-1));border-radius:var(--size-spacing--3);padding:var(--size-relative--4) var(--size-relative--3)}@supports (color: light-dark(red,red)){code:not([class^="language-"]),kbd{background-color:light-dark(var(--color-surface-1),var(--color-surface-2))}}kbd{outline:solid 1px var(--color-surface-3);box-shadow:0 1px 1px 0 var(--color-border-0)}s{text-decoration-thickness:.2ex}mark,::selection{background-color:var(--color-accent-0);color:var(--color-text-inverted)}a{color:var(--color-accent-0);text-decoration-thickness:.08em}:is(h1,h2,h3,h4,h5,h6) a{color:inherit}h1,h2,h3,h4,h5,h6{color:var(--color-text-emphasis);text-wrap:balance}h1,h2,h3,h4,h5,h6,label,th,strong{font-weight:var(--font-weight-body-bold)}}iframe{border:solid 1px var(--color-border-0)}@layer UTILS{.container{max-width:75rem;margin:0 auto;padding-inline:var(--size-spacing-0)}.size-font-xs{font-size:var(--size-font-xs)}small,.size-font-sm{font-size:var(--size-font-sm)}h6,.size-font-base{font-size:var(--size-font-base);line-height:var(--size-leading-base)}h5,.size-font-md{font-size:var(--size-font-md);line-height:var(--size-leading-sm)}h4,.size-font-lg{font-size:var(--size-font-lg);line-height:var(--size-leading-xs)}h3,.size-font-xl{font-size:var(--size-font-xl);line-height:var(--size-leading-xs)}h2,.size-font-2xl{font-size:var(--size-font-2xl);line-height:var(--size-leading-2xs)}h1,.size-font-3xl{font-size:var(--size-font-3xl);line-height:var(--size-leading-3xs);letter-spacing:var(--size-tracking-sm)}.size-font-4xl{font-size:var(--size-font-4xl);line-height:var(--size-leading-3xs);letter-spacing:var(--size-tracking-xs)}@property --gap{syntax: "<length>"; inherits: false; initial-value: 0;}.gap--4{--gap: var(--size-spacing--4);gap:var(--gap)}.gap--3{--gap: var(--size-spacing--3);gap:var(--gap)}.gap--2{--gap: var(--size-spacing--2);gap:var(--gap)}.gap--1{--gap: var(--size-spacing--1);gap:var(--gap)}.gap-0{--gap: var(--size-spacing-0);gap:var(--gap)}.gap-1{--gap: var(--size-spacing-1);gap:var(--gap)}.gap-2{--gap: var(--size-spacing-2);gap:var(--gap)}.gap-3{--gap: var(--size-spacing-3);gap:var(--gap)}.gap-4{--gap: var(--size-spacing-4);gap:var(--gap)}.gap-5{--gap: var(--size-spacing-5);gap:var(--gap)}.gap-6{--gap: var(--size-spacing-6);gap:var(--gap)}.gap-7{--gap: var(--size-spacing-7);gap:var(--gap)}.gap-8{--gap: var(--size-spacing-8);gap:var(--gap)}.gap-9{--gap: var(--size-spacing-9);gap:var(--gap)}.gap-10{--gap: var(--size-spacing-10);gap:var(--gap)}.gap-11{--gap: var(--size-spacing-11);gap:var(--gap)}.gap-12{--gap: var(--size-spacing-12);gap:var(--gap)}.gap-13{--gap: var(--size-spacing-13);gap:var(--gap)}.grid{--grid-column-max-count: 3;--grid-item-min-width:16.25rem;--grid-item-max-width: calc( (100% - (var(--grid-column-max-count) - 1) * var(--gap)) / var(--grid-column-max-count) );display:grid;grid-template-columns:repeat(auto-fill,minmax(max(min(var(--grid-item-min-width),100%),var(--grid-item-max-width)),1fr))}.col-2{--grid-column-max-count: 2;--grid-item-min-width:18.75rem}.circle{aspect-ratio:1;border-radius:50%}.aspect-ratio-1-1{aspect-ratio:1}.aspect-ratio-4-3{aspect-ratio:4/3}.aspect-ratio-3-2{aspect-ratio:3/2}.aspect-ratio-16-9{aspect-ratio:16/9}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.align-center{align-items:center}.flex-center{display:flex;align-items:center;justify-content:center}.repel{display:flex;flex-wrap:wrap;justify-content:space-between}.relative{position:relative}.absolute{position:absolute}.rhythm{--rhythm: 1lh}.rhythm>*+*{margin-block-start:var(--rhythm)}.rhythm>:where(h1,h2,h3,h4,h5,h6)+:where(:not(.rhythm)){--rhythm: .75lh}.rhythm>:where(h1 + p){--rhythm: .25lh}.screen-reader-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;white-space:nowrap}.screen-reader-only:focus{clip:auto;width:auto;height:auto;white-space:normal;overflow:visible}.scroll-x{display:block;overflow-x:auto}.stack{display:flex;flex-direction:column}.to-underline{text-decoration-line:none}.to-underline:is(:hover,:focus){text-decoration-line:underline}.no-underline{text-decoration-line:none}.text-center{text-align:center}.nowrap{white-space:nowrap}.text-wrap-balance{text-wrap:balance}.prose-tight{max-width:49ch}}@layer COMPONENTS{[data-dialog-action=close]{position:absolute;margin-inline-start:auto}[data-dialog-action]{--color-surface-dialog-button: inherit;background-color:var(--color-surface-dialog-button);display:flex;align-items:center;margin:0;padding:var(--size-relative--2)}[data-dialog-action]:is(:focus-visible,:hover){--csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) var(--color-surface-2);--color-surface-dialog-button: var(--csstools-light-dark-toggle--16, var(--color-surface-1))}@supports (color: light-dark(red,red)){[data-dialog-action]:is(:focus-visible,:hover){--color-surface-dialog-button: light-dark(var(--color-surface-1), var(--color-surface-2))}}@supports not (color: light-dark(tan,tan)){[data-dialog-action]:is(:focus-visible,:hover) *{--csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) var(--color-surface-2);--color-surface-dialog-button: var(--csstools-light-dark-toggle--16, var(--color-surface-1))}}.dialog{--csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) var(--color-surface-1);--color-surface-dialog: var(--csstools-light-dark-toggle--17, var(--color-surface-0));margin:0;border:none;padding:var(--size-spacing-11) var(--size-spacing-2);text-wrap:nowrap;background-color:var(--color-surface-dialog);scrollbar-width:thin}@supports (color: light-dark(red,red)){.dialog{--color-surface-dialog: light-dark(var(--color-surface-0), var(--color-surface-1))}}@supports not (color: light-dark(tan,tan)){.dialog *{--csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) var(--color-surface-1);--color-surface-dialog: var(--csstools-light-dark-toggle--17, var(--color-surface-0))}}.dialog[open]{display:flex;flex-direction:column}.dialog a{display:flex}.dialog::backdrop{pointer-events:none;background-color:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog:is(.left,.right){min-block-size:100dvb;min-inline-size:min(15rem,100%)}.dialog.left [data-dialog-action=close]{inset-block-start:var(--size-spacing-0);inset-inline-start:var(--size-spacing-0)}.dialog.right{inset-inline-start:100%;transform:translate(-100%)}.dialog.right [data-dialog-action=close]{inset-block-start:var(--size-spacing-0);inset-inline-end:var(--size-spacing-0)}.dialog-content{display:flex;flex-direction:column;align-items:center;margin:auto}.theme-picker fieldset{border:none}.theme-picker legend{font-feature-settings:"smcp";font-variant:small-caps;letter-spacing:var(--size-tracking-md);font-weight:var(--font-weight-body-bold)}.theme-picker label{display:block;font-weight:unset;padding-block:var(--size-spacing--4)}.pill-group{display:flex;flex-wrap:wrap;gap:var(--size-spacing--2)}.pill{-webkit-text-decoration:none;text-decoration:none;display:inline-flex;align-items:baseline;background-color:var(--color-surface-2);color:var(--color-text-emphasis);padding:var(--size-spacing--3) var(--size-spacing-0);font-family:var(--font-family-mono);font-weight:var(--font-weight-mono-regular)}.pill[data-shape=round]{border-radius:var(--size-spacing-8)}.pill[data-size=sm]{padding:var(--size-spacing--3) var(--size-spacing--2);font-size:var(--size-font-sm)}.pill-count{font-size:var(--size-font-xs)}a.pill:is(:focus-visible,:hover,[aria-current="page"]){background-color:var(--color-surface-3)}.post{counter-reset:footnotes;max-width:43.75rem}.post img{margin-inline:auto}.post-title{margin-bottom:var(--size-spacing--1)}.post-date{color:var(--color-text-soft);margin-bottom:var(--size-spacing--3);font-size:var(--size-font-sm)}.post-date :is(dt,dd){display:inline-block}.post-tag{padding:var(--size-spacing--3) var(--size-spacing--2);border-radius:var(--size-spacing--4)}blockquote{font-style:italic;border-inline-start:var(--size-spacing--3) solid;padding:0 var(--size-relative-2)}blockquote>.rhythm>:first-child:before{content:open-quote}blockquote>.rhythm>:last-child:after{content:close-quote}cite{font-style:normal;display:block;font-size:var(--size-font-sm)}cite:before{content:"\2014";-webkit-user-select:none;user-select:none}.aside{border:solid 1px var(--color-surface-3);border-inline-start:var(--size-spacing--3) solid;padding:var(--size-relative-0) var(--size-relative-2);background-color:var(--color-surface-1)}.aside code{padding:0;background-color:#0000}dfn{font-style:normal;font-weight:var(--font-weight-body-bold)}details summary,details .details-content{padding:var(--size-spacing-2) var(--size-spacing-3);border:1px solid var(--color-border-0)}details summary{cursor:pointer;background-color:var(--color-surface-1);font-weight:var(--font-weight-body-bold)}details .details-content{border-top:none}:is(details .details-content) dfn{font-weight:inherit;font-style:italic}figure{gap:var(--size-spacing--2);display:flex;flex-direction:column}figcaption{text-align:center;max-width:65ch;margin-inline:auto;font-size:var(--size-font-xs)}:is(caption,figcaption,cite){color:var(--color-text-soft)}:is(caption,figcaption){text-wrap:balance}.card-link:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%}.post-preview{border-radius:var(--size-spacing--3);background-color:var(--color-surface-1);padding:var(--size-relative-2);position:relative}.post-preview:has(.post-preview-link:focus-visible){outline:solid .1875rem var(--color-accent-0)}.post-preview-link{text-decoration-line:none;outline:none}.post-preview-date{font-size:var(--size-font-sm)}.post-preview-date{color:var(--color-text-soft)}.post-preview-title{margin-top:var(--size-spacing--3);font-size:var(--size-font-lg);line-height:var(--size-leading-xs)}.post-preview-description{margin-top:var(--size-spacing--2);font-size:var(--size-font-base);line-height:var(--size-leading-sm)}.post-preview-tags{display:none}.post-preview-tag{border-radius:var(--size-spacing--3)}@media (min-width: 48em){.post-preview-title{line-height:var(--size-leading-2xs)}}@media (min-width: 60em){.post-preview-tags{display:flex;flex-wrap:wrap;gap:var(--size-spacing--2);margin-top:var(--size-spacing-2)}}.project{--caption-padding: 1ch;position:relative;border:solid 1px var(--color-border-0);font-size:var(--size-font-xs);isolation:isolate;display:grid;gap:0}.project>*{grid-area:1 / -1}.project:focus-within{outline:solid 3px var(--color-accent-0);outline-offset:3px}.project picture{margin-block-end:calc(1lh + 2 * var(--caption-padding) - 1px)}.project img{min-height:150px;aspect-ratio:16/9;object-fit:cover;object-position:center;filter:brightness(.9)}.project:is(:hover,:focus-within) img{filter:brightness(1)}.project figcaption{background-color:#000;padding:var(--caption-padding);margin:0;color:#fff;height:fit-content;margin-block-start:auto;z-index:1}.project figcaption a{-webkit-text-decoration:none;text-decoration:none;outline:none;color:inherit}:where(ul,ol):not([class]),.list{padding-inline-start:2ch}:is(:where(ul,ol):not([class]),.list) li{margin-top:.25lh}:is(:where(ul,ol):not([class]),.list) :is(:where(ul,ol):not([class]),.list){padding-inline-start:3ch}.list-style-disc{list-style:disc}.float{--spacing: var(--size-spacing--2);margin-block-end:var(--spacing)}.float.right{margin-inline-start:var(--spacing);float:right}.code-block{--size-code-padding: var(--size-spacing-4);--size-code-line-number-padding: var(--size-relative--3);--color-code-background: var(--color-surface-1);--color-code-header-background: var(--color-surface-2);--csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) var(--color-surface-3);--color-code-overlay-1: var(--csstools-light-dark-toggle--18, var(--color-surface-3));--csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) var(--color-surface-4);--color-code-overlay-2: var(--csstools-light-dark-toggle--19, var(--color-surface-4));--csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) hsl(210deg 100% 84% / 15%);--color-code-selection: var(--csstools-light-dark-toggle--20, hsl(244deg 28% 51% / 20%));--csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) hsl(101deg 29% 47%);--color-code-comment: var(--csstools-light-dark-toggle--21, hsl(120deg 100% 21.8%));--csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) hsl(0deg 0% 90%);--color-code-text: var(--csstools-light-dark-toggle--22, hsl(0deg 0% 0%));--csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) hsl(207deg 61% 59%);--color-code-keyword: var(--csstools-light-dark-toggle--23, hsl(233deg 100% 38%));--csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) hsl(99deg 28% 73%);--color-code-number: var(--csstools-light-dark-toggle--24, var(--color-code-comment));--csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) hsl(201deg 98% 80%);--color-code-attribute: var(--csstools-light-dark-toggle--25, var(--color-code-text));--csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) hsl(17deg 47% 64%);--color-code-string: var(--csstools-light-dark-toggle--26, hsl(8deg 100% 38%));--color-code-variable: var(--color-code-keyword);--color-code-tag: var(--color-code-keyword);--color-code-constant: var(--color-code-number);--csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) hsl(0deg 0% 54%);--color-code-punctuation: var(--csstools-light-dark-toggle--27, var(--color-code-text));--csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) hsl(41deg 53% 67%);--color-code-selector: var(--csstools-light-dark-toggle--28, var(--color-code-string));border-radius:var(--size-spacing--3);position:relative}@supports (color: light-dark(red,red)){.code-block{--color-code-overlay-1: light-dark(var(--color-surface-3), var(--color-surface-3));--color-code-overlay-2: light-dark(var(--color-surface-4), var(--color-surface-4))}}@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red,red)){.code-block{--color-code-selection: light-dark(hsl(244deg 28% 51% / 20%), hsl(210deg 100% 84% / 15%));--color-code-comment: light-dark(hsl(120deg 100% 21.8%), hsl(101deg 29% 47%));--color-code-text: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 90%));--color-code-keyword: light-dark(hsl(233deg 100% 38%), hsl(207deg 61% 59%));--color-code-number: light-dark(var(--color-code-comment), hsl(99deg 28% 73%));--color-code-attribute: light-dark(var(--color-code-text), hsl(201deg 98% 80%));--color-code-string: light-dark(hsl(8deg 100% 38%), hsl(17deg 47% 64%));--color-code-punctuation: light-dark(var(--color-code-text), hsl(0deg 0% 54%));--color-code-selector: light-dark(var(--color-code-string), hsl(41deg 53% 67%))}}@supports not (color: light-dark(tan,tan)){.code-block *{--csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) var(--color-surface-3);--color-code-overlay-1: var(--csstools-light-dark-toggle--18, var(--color-surface-3));--csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) var(--color-surface-4);--color-code-overlay-2: var(--csstools-light-dark-toggle--19, var(--color-surface-4));--csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) hsl(210deg 100% 84% / 15%);--color-code-selection: var(--csstools-light-dark-toggle--20, hsl(244deg 28% 51% / 20%));--csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) hsl(101deg 29% 47%);--color-code-comment: var(--csstools-light-dark-toggle--21, hsl(120deg 100% 21.8%));--csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) hsl(0deg 0% 90%);--color-code-text: var(--csstools-light-dark-toggle--22, hsl(0deg 0% 0%));--csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) hsl(207deg 61% 59%);--color-code-keyword: var(--csstools-light-dark-toggle--23, hsl(233deg 100% 38%));--csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) hsl(99deg 28% 73%);--color-code-number: var(--csstools-light-dark-toggle--24, var(--color-code-comment));--csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) hsl(201deg 98% 80%);--color-code-attribute: var(--csstools-light-dark-toggle--25, var(--color-code-text));--csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) hsl(17deg 47% 64%);--color-code-string: var(--csstools-light-dark-toggle--26, hsl(8deg 100% 38%));--csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) hsl(0deg 0% 54%);--color-code-punctuation: var(--csstools-light-dark-toggle--27, var(--color-code-text));--csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) hsl(41deg 53% 67%);--color-code-selector: var(--csstools-light-dark-toggle--28, var(--color-code-string))}}.code-block pre{--border-code: solid 1px var(--color-surface-3);color:var(--color-code-text);overflow-x:auto;white-space:pre;word-spacing:normal;word-break:normal;tab-size:4;text-align:start;border:var(--border-code);border-radius:var(--size-spacing--3)}.code-block code{display:block;width:fit-content;min-width:100%;line-height:var(--size-leading-sm);padding:var(--size-code-padding);background-color:var(--color-code-background)}.code-block .file-name,.code-block .copy-code-button{position:absolute;inset-block-start:var(--size-code-padding)}.code-block .file-name{display:flex;align-items:center;gap:1ch;inset-inline-start:var(--size-code-padding);color:inherit;font-size:inherit;transform:translateY(-50%);font-family:var(--font-family-mono);font-weight:var(--font-weight-mono-bold)}.code-block .copy-code-button{display:none;opacity:0;inset-inline-end:var(--size-code-padding);color:var(--color-code-text);background-color:var(--color-code-overlay-1);padding:var(--size-spacing--3) var(--size-spacing--1);border-radius:var(--size-spacing--3);font-size:var(--size-font-sm);font-family:var(--font-family-mono);font-weight:var(--font-weight-mono-regular)}.code-block .copy-code-button:is(.copied,:focus){opacity:1}.code-block .copy-code-button:is(.copied,:hover){background-color:var(--color-code-overlay-2)}.code-block:has(.file-name) pre{background-color:var(--color-code-header-background);padding-block-start:calc(2 * var(--size-code-padding))}.code-block:has(.file-name) code{padding:var(--size-code-padding);border-block-start:solid 1px var(--color-surface-3)}.code-block:has(.file-name) .copy-code-button{transform:translateY(-50%)}.code-block:not([data-language="text"]):not([data-language="plaintext"]) code:has(.line:nth-child(10)){--size-code-line-number-offset: 4ch;padding-inline-start:calc(var(--size-code-padding) + var(--size-code-line-number-offset))}:is(.code-block:not([data-language="text"]):not([data-language="plaintext"]) code:has(.line:nth-child(10))) .line{counter-increment:line-number}:is(.code-block:not([data-language="text"]):not([data-language="plaintext"]) code:has(.line:nth-child(10))) .line:before{content:counter(line-number);position:absolute;inset-inline-start:0;border-inline-start:var(--border-code);min-inline-size:var(--size-code-line-number-offset);text-align:end;padding-inline-end:2ch;color:var(--color-text-soft);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;background-color:var(--color-code-background)}.code-block code:has(.line:nth-child(100)){--size-code-line-number-offset: 5ch}.code-block:hover .copy-code-button{opacity:1}.code-block .namespace{opacity:.7}.code-block code::selection,.code-block code *::selection{text-shadow:none;color:unset;background:var(--color-code-selection)}:is(.code-block .token):is(.doctype,.doctype-tag) .name{color:var(--color-code-attribute)}.comment:is(.code-block .token){margin:0}:is(.code-block .token):is(.comment,.prolog){color:var(--color-code-comment)}.number:is(.code-block .token){color:var(--color-code-constant)}.script:is(.code-block .token){color:var(--color-code-text)}.punctuation:is(.code-block .token),.cdata:is(.code-block .token){color:var(--color-code-punctuation)}:is(.code-block .token):is(.keyword,.tag,.boolean,.constant,.url,.inserted,.operator.arrow,.key.atrule,.rule,.keyword.module,.keyword.control-flow,.entity,.important,.punctuation.interpolation-punctuation,.doctype,.doctype-tag,.directive-hash),.atrule:is(.code-block .token) .url{color:var(--color-code-keyword)}:is(.code-block .token):is(.selector,.template-string,.string,.char,.builtin,.deleted,.regex,.attr-value),.attr-value:is(.code-block .token) .punctuation:is(.code-block .token),.url:is(.code-block .token) .content{color:var(--color-code-string)}:is(.code-block .token):is(.operator,.entity,.function),.atrule:is(.code-block .token) .url:is(.code-block .token) .punctuation:is(.code-block .token),.attr-value:is(.code-block .token) .punctuation.attr-equals:is(.code-block .token),.function:is(.code-block .token) .maybe-class-name:is(.code-block .token){color:var(--color-code-text)}:is(.code-block .token):is(.attr-name,.constant,.console,.property,.variable),.imports:is(.code-block .token) .maybe-class-name:is(.code-block .token),.exports:is(.code-block .token) .maybe-class-name:is(.code-block .token){color:var(--color-code-attribute)}.bold:is(.code-block .token){font-weight:var(--font-weight-mono-bold)}.italic:is(.code-block .token){font-style:italic}@media (min-width: 56em){.code-block .copy-code-button{display:unset}}.code-block:is([data-language="css"],[data-language="scss"],[data-language="sass"]) .token.selector{color:var(--color-code-selector)}.code-block:is([data-language="css"],[data-language="scss"],[data-language="sass"]) .token.property{color:var(--color-code-keyword)}.code-block[data-language=bash] .token:not(.comment){color:var(--color-code-text)!important}.katex{white-space:normal!important;line-height:1.3!important;font-size:1em!important}.katex-display{margin:0!important}.katex-display .katex{display:inline-block;white-space:nowrap;max-width:100%;overflow:auto hidden;width:100%}#comments{--rhythm: 1.75lh;padding-top:var(--rhythm);border-top:solid 1px var(--color-border-0)}#comments-placeholder{min-block-size:3.75rem;display:flex;justify-content:center;align-items:center}.post-comment-meta>*{display:inline;vertical-align:middle}.post-comment-avatar{width:var(--size-spacing-5)}.post-comment-username{font-weight:var(--font-weight-body-bold)}.post-comment-edited{font-style:italic}.post-comment-author{border-radius:var(--size-spacing--4);padding:var(--size-spacing--3) var(--size-spacing--2)}.post-comment-body ul{list-style:disc}.post-comment-body :is(h1,h2,h3,h4,h5,h6){font-size:var(--size-font-base);line-height:var(--size-leading-base)}#comments-count{color:var(--color-text-soft);vertical-align:middle;padding-inline-start:.25ch;font-size:var(--size-font-base);line-height:var(--size-leading-base)}.youtube-embed{max-width:100%}.youtube-embed>*{height:100%}.youtube-embed button{cursor:pointer}.button{--color-bg-button: transparent;--color-fg-button: currentcolor;padding:var(--size-spacing--2) var(--size-spacing-0);border-radius:var(--size-spacing--4);-webkit-text-decoration:none;text-decoration:none;background-color:var(--color-bg-button);color:var(--color-fg-button);border:solid}.button.secondary{--color-bg-button: var(--color-surface-0);--color-fg-button: var(--color-accent-0);border-color:var(--color-fg-button)}.button.secondary:is(:focus-visible,:hover){--color-bg-button: var(--color-accent-1);--color-fg-button: var(--color-text-inverted);border-color:var(--color-bg-button)}.button.primary{--color-bg-button: var(--color-accent-0);--color-fg-button: var(--color-text-inverted);border-color:var(--color-bg-button)}.button.primary:is(:focus-visible,:hover){--color-bg-button: var(--color-accent-1)}table{border-collapse:collapse;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}caption{text-align:start;margin-bottom:var(--size-spacing--2);font-size:var(--size-font-sm)}th{white-space:nowrap}:is(td,th){text-align:start;padding:var(--size-spacing--1);border:solid .75px var(--color-border-0)}.numeric:is(td,th){text-align:end}thead{background-color:var(--color-surface-1)}.footnotes__list{list-style:decimal;padding-inline-start:var(--size-relative-0)}[role=doc-noteref]:after{counter-increment:footnotes;content:" [" counter(footnotes) "]"}.note-board{padding:var(--size-relative-1);border:solid var(--size-spacing--1) #e3c19d;background-color:#ac8f71;box-shadow:inset 0 2px 4px #00000026;position:relative}.note{--size-shadow-height: 15px;color:var(--color-text-normal);text-wrap:balance;width:100%;height:fit-content;transform-style:preserve-3d;background:linear-gradient(180deg,#ffc,90%,#f1f1dd);box-shadow:1px 1px 2px #0000004d;position:relative;justify-self:center;padding:var(--size-relative-2);transition-timing-function:var(--transition-timing-function);transition-duration:var(--transition-duration);transition-property:border-radius}.note a{-webkit-text-decoration:none;text-decoration:none;outline:none}.note:is(:hover,:focus-within){border-end-end-radius:100px var(--size-shadow-height)}.note:has(a:focus-visible){outline:solid var(--size-spacing--3)}.note:after{content:"";position:absolute;inset-inline-start:0;inset-block-end:var(--size-shadow-height);transform:translateZ(-1px);width:calc(100% - 3px);height:25px;background:rgb(0 0 0 / 20%);box-shadow:2px var(--size-shadow-height) 5px #0006}code-demo{display:block;max-width:100%}carousel-root{display:block;position:relative}carousel-scroll{display:block;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth}carousel-scroll>*{padding:0!important;list-style:none;display:flex;gap:var(--size-spacing-0)}[data-scroll-snap-align=start]{scroll-snap-align:start}[data-scroll-snap-align=center]{scroll-snap-align:center}[data-scroll-snap-align=end]{scroll-snap-align:end}carousel-root [data-scroll-snap-align]{margin:0;height:300px;flex-shrink:0}carousel-root [data-scroll-snap-align]>*,carousel-root [data-scroll-snap-align] :is(figure,picture,img){height:100%}carousel-root [data-scroll-snap-align] img{width:auto}carousel-root figure{position:relative}carousel-root figcaption{position:absolute;bottom:0;left:0;width:100%;max-width:100%;margin:0;padding:var(--size-spacing--3);text-align:center;color:#fff;background-color:#000000bf;font-size:var(--size-font-xs)}carousel-root figcaption a{--outline-color: currentcolor;color:inherit;text-decoration-color:currentcolor}carousel-navigation button{--offset-x: var(--size-spacing--3);cursor:pointer;position:absolute;top:50%;padding:var(--size-spacing-0);transform:translateY(-50%);border-radius:50%;border:solid 1px gray;background-color:#fff;color:#000;box-shadow:0 0 16px #0003;line-height:0}carousel-navigation button:focus-visible{outline:none;box-shadow:0 0 0 2px #000,0 0 0 4px #fff}carousel-navigation button *{pointer-events:none}carousel-navigation button[data-direction=start]{inset-inline-start:var(--offset-x)}carousel-navigation button[data-direction=end]{inset-inline-end:var(--offset-x)}[dir=rtl] carousel-navigation button[data-direction]{transform:translateY(-50%) scale(-1)}carousel-navigation button[aria-disabled=true]{filter:opacity(.5);cursor:not-allowed}carousel-root[mode=slideshow] carousel-scroll{scroll-snap-type:x mandatory}carousel-root[mode=slideshow] .carousel-media{gap:0}carousel-root[mode=slideshow] [data-scroll-snap-align]{height:90vmin;width:100%}carousel-root[mode=slideshow] [data-scroll-snap-align]>*,carousel-root[mode=slideshow] [data-scroll-snap-align] :is(figure,picture,img){width:100%;height:100%}carousel-root[mode=slideshow] [data-scroll-snap-align] img{object-fit:cover;object-position:center}}@layer LAYOUT{#main-content{flex:1;max-width:47.5rem;min-inline-size:0;padding-block:clamp(.5rem,10vw + -2rem,4rem) var(--size-spacing-5)}.nav{padding-block:var(--size-spacing-0)}.nav a{color:inherit;text-decoration-line:none;padding-block:var(--size-spacing--3)}.nav a[href="/"]{display:flex;align-items:center;gap:var(--size-spacing--2)}.nav a[href="#main-content"]{background-color:var(--color-surface-0)}.nav .label{font-feature-settings:"smcp";font-variant:small-caps;letter-spacing:var(--size-tracking-md);font-weight:var(--font-weight-body-bold)}.nav [data-dialog-action=showModal]{margin-inline-start:auto}.nav-layout{display:flex}.nav-layout.rhythm{--rhythm: 0}.nav-desktop{display:none}@media (min-width: 48em){#main-content{padding-block:0}.page-layout{display:flex;gap:clamp(2rem,14.286vw + -1.571rem,7rem);padding-block:clamp(1rem,14.286vw + -2.571rem,6rem)}.nav{flex-shrink:0;padding:0 var(--size-spacing-0)}.nav a{text-decoration-line:underline}.nav [data-dialog-action=showModal]{display:none}.nav :is(a,label){color:var(--color-text-soft)}.nav :is(a,label):is(:focus-visible,:hover){color:var(--color-text-emphasis)}.nav .nav-layout.rhythm{--rhythm: 1lh}.nav-layout{flex-direction:column}#nav-mobile{display:none}.nav-desktop{display:unset}}.page-footer{background-color:var(--color-surface-1);color:var(--color-text-emphasis);padding-block:var(--size-spacing-5)}.page-footer .container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-spacing--1)}.page-footer .end{align-items:center}.page-footer .links{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--size-spacing-0)}@media (min-width: 35em){.page-footer{padding-block:var(--size-spacing-5)}}@media (min-width: 48em){.page-footer{text-align:start}.page-footer .container{align-items:end;flex-direction:row;justify-content:space-between}.page-footer .end{align-items:end}}}@layer PAGES{.page-home{gap:clamp(3rem,2.857vw + 2.286rem,4rem)}.page-not-found{display:grid;place-content:center;text-align:center;text-wrap:balance;gap:var(--size-spacing-0);height:100dvb;padding:0 var(--size-spacing-2)}.page-about .profile-photo{max-width:8rem}@media (min-width: 35em){.page-about .profile-photo{max-width:10rem}}}