html {
    --transition-duration: 0.2s;
    --transition-timing-function: ease
}

html, html[data-theme=light] {
    color-scheme: light;
    --color-surface-1: hsl(0, 0%, 100%);
    --color-surface-2: hsl(0, 0%, 96%);
    --color-surface-3: hsl(0, 0%, 92%);
    --color-surface-4: hsl(0, 0%, 75%);
    --color-surface-5: hsl(0, 0%, 55%);
    --color-surface-6: hsl(0, 0%, 35%);
    --color-surface-7: hsl(0, 0%, 23%);
    --color-surface-8: hsl(0, 0%, 13%);
    --color-text-normal: var(--color-surface-8);
    --color-text-soft: var(--color-surface-6);
    --color-text-emphasis: hsl(0, 0%, 0%);
    --color-text-inverted: hsl(0, 0%, 100%);
    --color-border-0: var(--color-surface-4)
}

html[data-theme=dark] {
    color-scheme: dark;
    --color-surface-1: hsl(0, 0%, 6%);
    --color-surface-2: hsl(0, 0%, 12%);
    --color-surface-3: hsl(0, 0%, 20%);
    --color-surface-4: hsl(0, 0%, 30%);
    --color-surface-5: hsl(0, 0%, 40%);
    --color-surface-6: hsl(0, 0%, 60%);
    --color-surface-7: hsl(0, 0%, 70%);
    --color-surface-8: hsl(0, 0%, 86%);
    --color-text-normal: var(--color-surface-8);
    --color-text-soft: var(--color-surface-7);
    --color-text-emphasis: hsl(0, 0%, 100%);
    --color-text-inverted: hsl(0, 0%, 0%);
    --color-border-0: var(--color-surface-5)
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        color-scheme: dark;
        --color-surface-1: hsl(0, 0%, 6%);
        --color-surface-2: hsl(0, 0%, 12%);
        --color-surface-3: hsl(0, 0%, 20%);
        --color-surface-4: hsl(0, 0%, 30%);
        --color-surface-5: hsl(0, 0%, 40%);
        --color-surface-6: hsl(0, 0%, 60%);
        --color-surface-7: hsl(0, 0%, 70%);
        --color-surface-8: hsl(0, 0%, 86%);
        --color-text-normal: var(--color-surface-8);
        --color-text-soft: var(--color-surface-7);
        --color-text-emphasis: hsl(0, 0%, 100%);
        --color-text-inverted: hsl(0, 0%, 0%);
        --color-border-0: var(--color-surface-5)
    }
}

@supports (font-size: clamp(1rem, 1vw, 1rem)) {
    html {
        --size-font-xs: clamp(0.88rem, 0.34vw + 0.79rem, 1rem);
        --size-font-sm: clamp(1rem, 0.34vw + 0.92rem, 1.13rem);
        --size-font-base: clamp(1.13rem, 0.34vw + 1.04rem, 1.25rem);
        --size-font-md: clamp(1.25rem, 0.34vw + 1.17rem, 1.38rem);
        --size-font-lg: clamp(1.38rem, 0.68vw + 1.21rem, 1.63rem);
        --size-font-xl: clamp(1.5rem, 1.37vw + 1.18rem, 2rem);
        --size-font-2xl: clamp(1.75rem, 1.71vw + 1.35rem, 2.38rem);
        --size-font-3xl: clamp(2rem, 2.05vw + 1.52rem, 2.75rem);
        --size-font-4xl: clamp(2.25rem, 3.42vw + 1.45rem, 3.5rem);
        --size-font-5xl: clamp(2.5rem, 5.47vw + 1.22rem, 4.5rem)
    }
}

@supports not (font-size: clamp(1rem, 1vw, 1rem)) {
    html {
        --size-font-xs: 0.875rem;
        --size-font-sm: 1rem;
        --size-font-base: 1.125rem;
        --size-font-md: 1.25rem;
        --size-font-lg: 1.375rem;
        --size-font-xl: 1.5rem;
        --size-font-2xl: 1.75rem;
        --size-font-3xl: 2rem;
        --size-font-4xl: 2.25rem;
        --size-font-5xl: 2.5rem
    }

    @media screen and (min-width: 960px) {
        html {
            --size-font-xs: 1rem;
            --size-font-sm: 1.125rem;
            --size-font-base: 1.25rem;
            --size-font-md: 1.375rem;
            --size-font-lg: 1.625rem;
            --size-font-xl: 2rem;
            --size-font-2xl: 2.375rem;
            --size-font-3xl: 2.75rem;
            --size-font-4xl: 3.5rem;
            --size-font-5xl: 4.5rem
        }
    }
}

html {
    --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.55;
    --size-leading-md: 1.6;
    --size-leading-lg: 1.7
}

html {
    --size-tracking-xs: -0.5px;
    --size-tracking-sm: -0.25px;
    --size-tracking-md: 0.25px;
    --size-tracking-lg: 1px
}

html {
    --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
}

html {
    --size-relative--3: 0.25em;
    --size-relative--2: 0.5em;
    --size-relative--1: 0.75em;
    --size-relative-0: 1em;
    --size-relative-1: 1.25em;
    --size-relative-2: 1.5em
}

* {
    box-sizing: border-box;
    margin: 0;
    padding:0
}

@media (prefers-reduced-motion) {
    *, * ::before, * ::after {
        animation: none !important;
        transition:none !important
    }
}

:where(html, body) {
    height:100%
}

: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
}

:where(ul, ol)[class] {
    list-style: none
}

:where(a, button, input, select, textarea, summary, [tabindex="0"]) {
    --outline-thickness: 0.1875rem;
    --outline-style: solid;
    --outline-color: currentcolor
}

:where(a, button, input, select, textarea, summary, [tabindex="0"]):focus {
    outline: var(--outline-thickness) var(--outline-style) var(--outline-color);
    outline-offset: var(--outline-offset, 0)
}

:where(a, button, input, select, textarea, summary, [tabindex="0"]):focus:not(:focus-visible) {
    outline:none
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface-1);
    color: var(--color-text-normal);
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    font-size: var(--size-font-base);
    line-height:var(--size-leading-base)
}

#page-content {
    flex-grow: 1;
    padding-block-start: clamp(1.25rem, 7.86vw + -0.71rem, 4rem);
    padding-block-end:clamp(3rem, 8.57vw + 0.86rem, 6rem)
}

:is(code, kbd) {
    font-family: var(--font-family-mono);
    font-weight:var(--font-weight-mono-regular)
}

:is(strong, h1, h2, h3, h4, h5, h6) :is(code, kbd) {
    font-family: var(--font-family-mono);
    font-weight:var(--font-weight-mono-bold)
}

a {
    color: inherit;
    text-underline-offset:.15em
}

:is(h1, h2, h3, h4, h5, h6) {
    color:var(--color-text-emphasis)
}

:is(h1, h2, h3, h4, h5, h6, label, th, strong) {
    font-family: var(--font-family-body);
    font-weight:var(--font-weight-body-bold)
}

.size-font-xs {
    font-size:var(--size-font-xs)
}

.size-font-sm, small {
    font-size:var(--size-font-sm)
}

.size-font-base, h6 {
    font-size: var(--size-font-base);
    line-height:var(--size-leading-base)
}

.size-font-md, h5 {
    font-size: var(--size-font-md);
    line-height:var(--size-leading-sm)
}

.size-font-lg, h4 {
    font-size: var(--size-font-lg);
    line-height:var(--size-leading-xs)
}

.size-font-xl, h3 {
    font-size: var(--size-font-xl);
    line-height:var(--size-leading-xs)
}

.size-font-2xl, h2 {
    font-size: var(--size-font-2xl);
    line-height:var(--size-leading-xs)
}

.size-font-3xl, h1 {
    font-size: var(--size-font-3xl);
    line-height: var(--size-leading-2xs);
    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-sm)
}

.size-font-5xl {
    font-size: var(--size-font-5xl);
    line-height: var(--size-leading-3xs);
    letter-spacing:var(--size-tracking-xs)
}

.gap--4 {
    gap:var(--size-spacing--4)
}

.gap--3 {
    gap:var(--size-spacing--3)
}

.gap--2 {
    gap:var(--size-spacing--2)
}

.gap--1 {
    gap:var(--size-spacing--1)
}

.gap-0 {
    gap:var(--size-spacing-0)
}

.gap-1 {
    gap:var(--size-spacing-1)
}

.gap-2 {
    gap:var(--size-spacing-2)
}

.gap-3 {
    gap:var(--size-spacing-3)
}

.gap-4 {
    gap:var(--size-spacing-4)
}

.gap-5 {
    gap:var(--size-spacing-5)
}

.gap-6 {
    gap:var(--size-spacing-6)
}

.gap-7 {
    gap:var(--size-spacing-7)
}

.gap-8 {
    gap:var(--size-spacing-8)
}

.gap-9 {
    gap:var(--size-spacing-9)
}

.gap-10 {
    gap:var(--size-spacing-10)
}

.gap-11 {
    gap:var(--size-spacing-11)
}

.gap-12 {
    gap:var(--size-spacing-12)
}

.hero > * {
    max-width:42ch
}

.hero-title {
    font-size: var(--size-font-4xl);
    line-height: var(--size-leading-3xs);
    letter-spacing:var(--size-tracking-sm)
}

.hero-subtitle {
    font-size: var(--size-font-xl);
    line-height:var(--size-leading-sm)
}

.circle {
    aspect-ratio: 1;
    border-radius:50%
}

.col-wrap {
    --gap: var(--size-spacing-5);
    --multiplier: calc(var(--container-width, 40rem) - 100%);
    display: flex;
    flex-wrap: wrap;
    gap:var(--gap)
}

.col-wrap > * {
    flex-grow: 1;
    flex-basis: calc(var(--multiplier) * 999);
    min-width: calc(100%/var(--columns, 2) -(var(--columns, 2) - 1) * var(--gap));
    max-width:100%
}

.col-1 {
    --columns: 1
}

.col-2 {
    --columns: 2
}

.col-3 {
    --columns: 3
}

.container {
    --container-max-width: 57.75rem;
    --padding-x: var(--size-spacing-0);
    max-width: calc(var(--container-max-width) + 2 * var(--padding-x));
    width: 100%;
    margin-inline: auto;
    padding-inline:var(--padding-x)
}

.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
}

.outline-offset {
    --outline-offset: var(--outline-thickness)
}

.prose {
    max-width: 47.5rem;
    margin:0 auto
}

.prose :where(h2, h3, h4, h5, h6) {
    text-wrap: balance;
    text-wrap:pretty
}

.relative {
    position:relative
}

@supports (margin-top: 1lh) {
    .rhythm {
        --rhythm: 1lh
    }
}

@supports not (margin-top: 1lh) {
    .rhythm {
        --rhythm: calc(var(--size-leading-base) * 1em)
    }
}

.rhythm > * + * {
    margin-top:var(--rhythm)
}

.rhythm > * + :where(h2) {
    margin-top:calc(1.25 * var(--rhythm))
}

.rhythm > :where(h1, h2, h3, h4, h5, h6) + * {
    margin-top:calc(.5 * var(--rhythm))
}

.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
}

.text-center {
    text-align:center
}

.to-underline {
    text-decoration-line:none
}

.to-underline:is(:hover, :focus) {
    text-decoration-line:underline
}

.no-decoration {
    text-decoration:none
}

.nowrap {
    white-space:nowrap
}

.skip-navigation {
    top: 50%;
    transform: translate(var(--size-spacing--2), -50%);
    padding: var(--size-spacing--2);
    background-color:var(--color-surface-1)
}

.navbar {
    flex-shrink: 0;
    width: 100%;
    padding-block: var(--size-spacing-0);
    overflow-x:auto
}

.navbar a {
    text-decoration:none
}

.navbar nav {
    white-space: nowrap;
    flex: 1 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:var(--size-spacing-0)
}

.navbar-logo {
    width:var(--size-spacing-4)
}

.navbar-link-home {
    display: flex;
    gap: var(--size-spacing--3);
    align-items: center;
    padding: var(--size-spacing--2);
    font-family: var(--font-family-body);
    font-weight:var(--font-weight-body-bold)
}

.navbar-link-home .site-name {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space:nowrap
}

.navbar-links {
    width: 100%;
    display: flex;
    align-items: center;
    gap:var(--size-relative--3)
}

.navbar-links > :first-child {
    flex-shrink: 0;
    margin-inline-end:auto
}

.navbar-link {
    padding:var(--size-relative--2) var(--size-relative--1)
}

.navbar-link:is(:focus, :hover, [aria-current=page]) {
    background-color:var(--color-surface-3)
}

@media screen and (min-width: 35em) {
    .navbar {
        padding-block: var(--size-spacing-4);
        position:unset
    }

    .navbar .site-name {
        position: unset;
        clip: auto;
        width: auto;
        height: auto;
        white-space: normal;
        overflow:visible
    }
}

.hash-art {
    width: calc(12 * var(--size-spacing-0));
    height: auto;
    border: solid 12px var(--color-text-emphasis);
    filter: brightness(82%)
}

.hash-art [data-value="0"] {
    fill: #000
}

.hash-art [data-value="1"] {
    fill:#fff
}

#theme-picker {
    border:none
}

#theme-picker label {
    margin-inline-start: var(--size-relative--2);
    font-weight:unset
}

#theme-picker .visible-label {
    font-family: var(--font-family-body);
    font-weight:var(--font-weight-body-bold)
}

.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap:var(--size-spacing--2)
}

.pill {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    background-color: var(--color-surface-3);
    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 {
    --color-focus-bg: var(--color-text-emphasis);
    --outline-color: var(--color-focus-bg);
    --outline-offset: var(--outline-thickness)
}

a.pill:is(:focus, :hover, [aria-current=page]) {
    background-color: var(--color-focus-bg);
    color:var(--color-text-inverted)
}

.pagination-trail {
    justify-content:flex-end
}

.pagination-page {
    min-width: var(--size-spacing-5);
    aspect-ratio: 1;
    border-radius: var(--size-spacing--4);
    display: flex;
    justify-content:center
}

.post {
    counter-reset:footnotes
}

.post-header {
    text-wrap:balance
}

.post-title {
    margin-bottom:var(--size-spacing--2)
}

.post-date {
    color: var(--color-text-soft);
    margin-bottom: var(--size-spacing--3);
    font-size:var(--size-font-sm)
}

.post-date dt, .post-date dd {
    display:inline-block
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap:var(--size-spacing--3) var(--size-spacing--2)
}

.post-tag {
    color:var(--color-text-soft)
}

.post-tag::before {
    content: "#";
    user-select:none
}

#skip-toc {
    transform: translateY(-50%);
    padding:var(--size-spacing--4) var(--size-spacing--2)
}

.toc-list {
    list-style: disc;
    padding-inline-start:var(--size-relative-2)
}

.toc-list li {
    margin-top:var(--size-spacing--2)
}

:is(code, kbd):not([class^=language-]) {
    color: var(--color-text-emphasis);
    background-color: var(--color-inline-code-bg);
    border-radius: var(--size-spacing--3);
    padding:var(--size-relative--3)
}

:is(code, kbd):not([class^=language-]), html[data-theme=light] :is(code, kbd):not([class^=language-]) {
    --color-inline-code-bg: var(--color-surface-2)
}

html[data-theme=dark] :is(code, kbd):not([class^=language-]) {
    --color-inline-code-bg: var(--color-surface-3)
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme]) :is(code, kbd):not([class^=language-]) {
        --color-inline-code-bg: var(--color-surface-3)
    }
}

blockquote {
    font-style: italic;
    border-inline-start: var(--size-spacing--3) solid;
    padding:0 var(--size-relative-2)
}

blockquote p:first-of-type::before {
    content:open-quote
}

blockquote p:last-of-type::after {
    content:close-quote
}

cite {
    font-style: normal;
    display: block;
    font-size:var(--size-font-sm)
}

cite::before {
    content: "—";
    user-select:none
}

.post-aside {
    border-inline-start: var(--size-spacing--3) solid;
    padding: var(--size-relative-0) var(--size-relative-2);
    background-color:var(--color-surface-2)
}

.post-aside code {
    padding: 0;
    background-color:rgba(0, 0, 0, 0)
}

dfn {
    font-style: normal;
    font-family: var(--font-family-body);
    font-weight:var(--font-weight-body-bold)
}

details summary {
    cursor: pointer;
    background-color:var(--color-surface-2)
}

details summary, details .details-content {
    padding: var(--size-spacing-2) var(--size-spacing-3);
    border:var(--size-spacing--4) solid var(--color-border-0)
}

details .details-content {
    border-top:none
}

figure {
    gap: var(--size-spacing--2);
    display: flex;
    flex-direction:column
}

figure img {
    margin-inline:auto
}

figcaption {
    text-align: center;
    font-size:var(--size-font-xs)
}

:is(caption, figcaption, cite) {
    color:var(--color-text-soft)
}

:is(caption, figcaption) {
    text-wrap:balance
}

.post-preview {
    border-radius: var(--size-spacing--3);
    background-color: var(--color-surface-2);
    padding: var(--size-relative-2);
    position:relative
}

.post-preview-grid {
    display: grid;
    gap: var(--size-spacing-3);
    grid-template-columns:repeat(auto-fill, minmax(min(16.25rem, 100%), 1fr))
}

@media screen and (min-width: 35em) {
    .post-preview-grid {
        gap:var(--size-spacing-0)
    }
}

.post-preview-link {
    display:block
}

.post-preview-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%
}

.post-preview-date {
    color: var(--color-text-soft);
    font-size:var(--size-font-sm)
}

.post-preview-title {
    margin-top: var(--size-spacing--3);
    text-wrap: balance;
    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;
    font-size:var(--size-font-sm)
}

.post-preview-tag:is(:focus, :hover) {
    text-decoration:none
}

.post-preview-tag:focus:not(:focus-visible) {
    text-decoration:underline
}

@media screen and (min-width: 56em) {
    .post-preview-date {
        font-size:var(--size-font-xs)
    }

    .post-preview-title {
        font-size: var(--size-font-md);
        line-height:var(--size-leading-xs)
    }

    .post-preview-description {
        font-size:var(--size-font-sm)
    }
}

@media screen and (min-width: 60em) {
    .post-preview-tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-spacing--3) var(--size-spacing--2);
        margin-top: var(--size-spacing-0);
        font-size:var(--size-font-xs)
    }

    .post-preview-link::after {
        content:none
    }
}

.project-wrapper {
    --container-width: 50rem
}

.project-wrapper:is(:hover, :focus-within) .project {
    box-shadow: var(--card-box-shadow-focus);
    transform:var(--card-offset-y-focus)
}

.project-icon picture {
    display: flex;
    width: var(--size-relative-0);
    aspect-ratio:1
}

.project-rating {
    display: flex;
    align-items: center;
    gap: var(--size-spacing--4);
    font-family: var(--font-family-mono);
    font-weight:var(--font-weight-mono-regular)
}

.project-rating svg {
    width: var(--size-relative-0);
    aspect-ratio: 1;
    fill:var(--color-surface-7)
}

.project-link {
    text-decoration:none
}

.project-link:is(:focus, :focus-visible) {
    outline:none
}

.project-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0
}

.project-description {
    margin-top: var(--size-spacing--2);
    font-size: var(--size-font-base);
    line-height:var(--size-leading-base)
}

.project-technologies {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-spacing--2);
    margin-top: var(--size-spacing-1);
    font-family: var(--font-family-mono);
    font-weight:var(--font-weight-mono-regular)
}

.project-technology {
    background-color: var(--color-surface-3);
    padding: var(--size-spacing--3) var(--size-spacing--2);
    border-radius:var(--size-spacing--4)
}

:is(ul, ol):not([class]) {
    padding-inline-start:var(--size-relative-0)
}

:is(ul, ol):not([class]) li {
    margin-top:var(--size-relative--3)
}

.float {
    --spacing: var(--size-spacing--2);
    max-width: 10rem;
    margin-block-end:var(--spacing)
}

.float.right {
    margin-inline-start: var(--spacing);
    float:right
}

@media screen and (min-width: 35em) {
    .float {
        max-width:11.875rem
    }
}

.card {
    --card-padding: var(--size-relative-2);
    --card-box-shadow-default: 0 1px 1px hsl(0deg 0% 0% / 12%), 0 2px 2px hsl(0deg 0% 0% / 12%), 0 4px 4px hsl(0deg 0% 0% / 12%), 0 5px 12px hsl(0deg 0% 0% / 12%);
    --card-box-shadow-focus: 0 2px 2px hsl(0deg 0% 0% / 12%), 0 4px 4px hsl(0deg 0% 0% / 12%), 0 8px 8px hsl(0deg 0% 0% / 12%), 0 8px 12px hsl(0deg 0% 0% / 12%);
    --card-offset-y-focus: translateY(calc(-1 * var(--size-spacing--2)));
    position: relative;
    padding: var(--card-padding);
    background-color: var(--color-card-bg);
    border-radius: var(--size-spacing--3);
    box-shadow: var(--card-box-shadow-default);
    transform: none;
    cursor: pointer;
    will-change: transform, box-shadow;
    transition-timing-function: var(--transition-timing-function);
    transition-duration: var(--transition-duration);
    transition-property:box-shadow, transform
}

.card, html[data-theme=light] .card {
    --color-card-bg: var(--color-surface-1)
}

html[data-theme=dark] .card {
    --color-card-bg: var(--color-surface-2)
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .card {
        --color-card-bg: var(--color-surface-2)
    }
}

.card:focus-within {
    outline:solid .1875rem currentcolor
}

.code-block {
    --code-block-padding: var(--size-spacing-5);
    background: var(--color-code-background);
    color: var(--color-code-text);
    position: relative;
    border-radius:var(--size-spacing--3)
}

.code-block, html[data-theme=light] .code-block {
    --color-code-background: var(--color-surface-2);
    --color-code-overlay-1: hsl(0deg 0% 88%);
    --color-code-overlay-2: hsl(0deg 0% 80%);
    --color-code-selection: hsl(243.9deg 80.3% 33.9% / 20%);
    --color-code-comment: hsl(120deg 100% 21.8%);
    --color-code-text: hsl(0deg 0% 0%);
    --color-code-keyword: hsl(233deg 100% 38%);
    --color-code-number: var(--color-code-comment);
    --color-code-attribute: var(--color-code-text);
    --color-code-string: 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);
    --color-code-punctuation: var(--color-code-text);
    --color-code-selector: var(--color-code-string)
}

html[data-theme=dark] .code-block {
    --color-code-background: var(--color-surface-2);
    --color-code-overlay-1: var(--color-surface-3);
    --color-code-overlay-2: var(--color-surface-6);
    --color-code-selection: hsl(210deg 100% 84% / 15%);
    --color-code-comment: hsl(101deg 29% 47%);
    --color-code-text: hsl(0deg 0% 90%);
    --color-code-keyword: hsl(207deg 61% 59%);
    --color-code-number: hsl(99deg 28% 73%);
    --color-code-attribute: hsl(201deg 98% 80%);
    --color-code-string: hsl(17deg 47% 64%);
    --color-code-variable: var(--color-code-keyword);
    --color-code-tag: var(--color-code-keyword);
    --color-code-constant: var(--color-code-number);
    --color-code-punctuation: #8a8a8a;
    --color-code-selector: hsl(41deg 53% 67%)
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .code-block {
        --color-code-background: var(--color-surface-2);
        --color-code-overlay-1: var(--color-surface-3);
        --color-code-overlay-2: var(--color-surface-6);
        --color-code-selection: hsl(210deg 100% 84% / 15%);
        --color-code-comment: hsl(101deg 29% 47%);
        --color-code-text: hsl(0deg 0% 90%);
        --color-code-keyword: hsl(207deg 61% 59%);
        --color-code-number: hsl(99deg 28% 73%);
        --color-code-attribute: hsl(201deg 98% 80%);
        --color-code-string: hsl(17deg 47% 64%);
        --color-code-variable: var(--color-code-keyword);
        --color-code-tag: var(--color-code-keyword);
        --color-code-constant: var(--color-code-number);
        --color-code-punctuation: #8a8a8a;
        --color-code-selector: hsl(41deg 53% 67%)
    }
}

.code-block:hover .copy-code-button {
    opacity:1
}

.code-block figcaption {
    position: absolute;
    top: var(--code-block-padding);
    left: var(--code-block-padding);
    color: inherit;
    font-size: inherit;
    font-family: var(--font-family-mono);
    font-weight:var(--font-weight-mono-bold)
}

.code-block figcaption::before {
    content: "📁 ";
    font-size:var(--size-font-xs)
}

.code-block code {
    padding: var(--code-block-padding);
    text-align: start;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    tab-size: 2;
    line-height: var(--size-leading-sm);
    overflow-x: auto;
    display:block
}

.code-block:has(figcaption) code {
    padding-block-start:calc(2 * var(--code-block-padding) + 3ex)
}

.code-block .namespace {
    opacity:.7
}

.code-block::selection, .code-block * ::selection {
    text-shadow: none;
    color: unset;
    background:var(--color-code-selection)
}

.token:is(.doctype, .doctype-tag) .name {
    color:var(--color-code-attribute)
}

.token.comment {
    margin:0
}

.token:is(.comment, .prolog) {
    color:var(--color-code-comment)
}

.token.number {
    color:var(--color-code-constant)
}

.token.script {
    color:var(--color-code-text)
}

.token.punctuation, .token.cdata {
    color:var(--color-code-punctuation)
}

.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), .token.atrule .url {
    color:var(--color-code-keyword)
}

.token:is(.selector, .string, .char, .builtin, .deleted, .regex, .attr-value), .token.attr-value .token.punctuation, .token.url .content {
    color:var(--color-code-string)
}

.token:is(.operator, .entity, .function), .token.atrule .token.url .token.punctuation, .token.attr-value .token.punctuation.attr-equals, .token.function .token.maybe-class-name {
    color:var(--color-code-text)
}

.token:is(.attr-name, .constant, .console, .property, .variable), .token.imports .token.maybe-class-name, .token.exports .token.maybe-class-name {
    color:var(--color-code-attribute)
}

.token.bold {
    font-family: var(--font-family-mono);
    font-weight:var(--font-weight-mono-bold)
}

.token.italic {
    font-style:italic
}

pre:is([class * =language-css], [class * =language-scss], [class * =language-sass]) .token.selector {
    color:var(--color-code-selector)
}

pre[class * =language-bash] .token:not(.comment) {
    color:var(--color-code-text) !important
}

.copy-code-button {
    opacity: 0;
    position: absolute;
    right: var(--code-block-padding);
    top: min(var(--code-block-padding) * 1.5, 50%);
    transform: translateY(-50%);
    display: none;
    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)
}

.copy-code-button:is(.copied, :focus) {
    opacity:1
}

.copy-code-button:is(.copied, :hover) {
    color: #000;
    background-color:var(--color-code-overlay-2)
}

@media screen and (min-width: 56em) {
    .copy-code-button {
        display:unset
    }
}

.code-preview {
    border:solid 1px var(--color-border-0)
}

.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-x: auto;
    overflow-y: hidden;
    width:100%
}

#comments {
    --spacing: calc(1.75 * var(--rhythm));
    padding-top: var(--spacing);
    margin-top: var(--spacing);
    border-top:solid 1px var(--color-border-0)
}

.comment-button {
    display: flex;
    align-items: center;
    gap:var(--size-spacing--2)
}

.post-comment-meta > * {
    display: inline;
    vertical-align:middle
}

.post-comment-avatar {
    width:var(--size-spacing-5)
}

.post-comment-username {
    font-family: var(--font-family-body);
    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;
    min-width: 4ch;
    font-size: var(--size-font-base);
    line-height:var(--size-leading-base)
}

.youtube-embed {
    aspect-ratio: 16/9;
    max-width:100%
}

.youtube-embed > * {
    height:100%
}

.youtube-embed button {
    cursor:pointer
}

.button {
    --outline-offset: var(--outline-thickness);
    --outline-color: var(--color-surface-8);
    --color-bg-button: transparent;
    --color-fg-button: currentcolor;
    padding: var(--size-spacing--2) var(--size-spacing-0);
    border-radius: var(--size-spacing--4);
    text-decoration: none;
    background-color: var(--color-bg-button);
    color:var(--color-fg-button)
}

.button.secondary {
    --color-bg-button: var(--color-surface-1);
    border:solid var(--color-fg-button)
}

.button.secondary:is(:focus, :hover) {
    --color-bg-button: var(--color-text-normal);
    --color-fg-button: var(--color-text-inverted);
    border-color:var(--color-bg-button)
}

.button.primary {
    --color-bg-button: var(--color-surface-8);
    --color-fg-button: var(--color-text-inverted)
}

.button.primary:is(:focus, :hover) {
    --color-bg-button: var(--color-surface-6)
}

table {
    border-collapse: collapse;
    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)
}

:is(td, th).numeric {
    text-align:end
}

thead {
    background-color:var(--color-surface-2)
}

.page-footer {
    color-scheme: dark;
    background-color: var(--color-footer-bg);
    color: #fff;
    text-align: center;
    padding-block: var(--size-spacing-5);
    accent-color:currentcolor
}

.page-footer, html[data-theme=light] .page-footer {
    --color-footer-bg: var(--color-surface-8)
}

html[data-theme=dark] .page-footer {
    --color-footer-bg: var(--color-surface-2)
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .page-footer {
        --color-footer-bg: var(--color-surface-2)
    }
}

.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-socials {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:var(--size-spacing-0)
}

@media screen and (min-width: 35em) {
    .page-footer {
        padding-block:var(--size-spacing-5)
    }
}

@media screen and (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
    }
}

.page-footer h2 {
    color:inherit
}

.footnotes__list {
    list-style: decimal;
    padding-inline-start:var(--size-relative-0)
}

[role=doc-noteref]::after {
    counter-increment: footnotes;
    content: " [" counter(footnotes) "]"
}

html {
    scrollbar-color:var(--color-border-0) var(--color-surface-3)
}

.home-page {
    gap:var(--size-spacing-8)
}

@media screen and (min-width: 35em) {
    .home-page {
        gap:var(--size-spacing-12)
    }
}

.home-page-hero {
    display: flex;
    justify-content: space-between;
    gap:var(--size-spacing-5)
}

.home-hash-art {
    display:none
}

@media screen and (min-width: 60em) {
    .home-hash-art {
        display: unset;
        padding-block-start:1ex
    }
}

.blog-page {
    gap:var(--size-spacing-5)
}

@media screen and (min-width: 56em) {
    .blog-page {
        gap: var(--size-spacing-10)
    }
}
/*# sourceMappingURL=main.css.map */