header {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    margin: 2rem 0;
    display: flex
}

header h1 {
    flex: auto;
    margin: 0
}

.clipboard-button {
    float: right;
    color: var(--gray);
    border-color: var(--dark);
    background-color: var(--light);
    opacity: 0;
    border: 1px solid;
    border-radius: 5px;
    margin: .3rem;
    padding: .4rem;
    transition: all .2s;
    display: flex;
    position: absolute;
    right: 0
}

.clipboard-button>svg {
    fill: var(--light);
    filter: contrast(.3)
}

.clipboard-button:hover {
    cursor: pointer;
    border-color: var(--secondary)
}

.clipboard-button:focus {
    outline: 0
}

pre:hover>.clipboard-button {
    opacity: 1;
    transition: all .2s
}

.article-title {
    margin: 2rem 0 0
}

.content-meta {
    color: var(--gray);
    margin-top: 0
}

.tags {
    flex-wrap: wrap;
    justify-self: end;
    gap: .4rem;
    margin: 1rem 0;
    padding-left: 0;
    list-style: none;
    display: flex
}

.section-li>.section>.tags {
    justify-content: flex-end
}

.tags>li {
    white-space: nowrap;
    overflow-wrap: normal;
    margin: 0;
    display: inline-block
}

a.internal.tag-link {
    background-color: var(--highlight);
    border-radius: 8px;
    margin: 0 .1rem;
    padding: .2rem .4rem
}

.darkmode {
    width: 20px;
    height: 20px;
    margin: 0 10px;
    position: relative
}

.darkmode>.toggle {
    box-sizing: border-box;
    display: none
}

.darkmode svg {
    cursor: pointer;
    opacity: 0;
    fill: var(--darkgray);
    width: 20px;
    height: 20px;
    transition: opacity .1s;
    position: absolute;
    top: calc(50% - 10px)
}

:root[saved-theme=dark] {
    color-scheme: dark
}

:root[saved-theme=light] {
    color-scheme: dark
}

:root[saved-theme=dark] .toggle~label>#dayIcon {
    opacity: 0
}

:root[saved-theme=dark] .toggle~label>#nightIcon,
:root .toggle~label>#dayIcon {
    opacity: 1
}

:root .toggle~label>#nightIcon {
    opacity: 0
}

button#toc {
    text-align: left;
    cursor: pointer;
    color: var(--dark);
    background-color: #0000;
    border: none;
    align-items: center;
    padding: 0;
    display: flex
}

button#toc h3 {
    margin: 0;
    font-size: 1rem;
    display: inline-block
}

button#toc .fold {
    opacity: .8;
    margin-left: .5rem;
    transition: transform .3s
}

button#toc.collapsed .fold {
    transform: rotate(-90deg)
}

#toc-content {
    max-height: none;
    list-style: none;
    transition: max-height .5s;
    position: relative;
    overflow: hidden
}

#toc-content.collapsed>.overflow:after {
    opacity: 0
}

#toc-content ul {
    margin: .5rem 0;
    padding: 0;
    list-style: none
}

#toc-content ul>li>a {
    color: var(--dark);
    opacity: .35;
    transition: opacity .5s, color .3s
}

#toc-content ul>li>a.in-view {
    opacity: .75
}

#toc-content .depth-0 {
    padding-left: 0
}

#toc-content .depth-1 {
    padding-left: 1rem
}

#toc-content .depth-2 {
    padding-left: 2rem
}

#toc-content .depth-3 {
    padding-left: 3rem
}

#toc-content .depth-4 {
    padding-left: 4rem
}

#toc-content .depth-5 {
    padding-left: 5rem
}

#toc-content .depth-6 {
    padding-left: 6rem
}

footer {
    text-align: left;
    opacity: .7;
    margin-bottom: 4rem
}

footer ul {
    flex-direction: row;
    gap: 1rem;
    margin: -1rem 0 0;
    padding: 0;
    list-style: none;
    display: flex
}

.breadcrumb-container {
    flex-flow: wrap;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 0;
    display: flex
}

.breadcrumb-element {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex
}

.breadcrumb-element p {
    margin: 0 0 0 .5rem;
    padding: 0;
    line-height: normal
}

ul.section-ul {
    margin-top: 2em;
    padding-left: 0;
    list-style: none
}

li.section-li {
    margin-bottom: 1em
}

li.section-li>.section {
    grid-template-columns: 6em 3fr 1fr;
    display: grid
}

@media (max-width:600px) {
    li.section-li>.section>.tags {
        display: none
    }
}

li.section-li>.section>.desc>h3>a {
    background-color: #0000
}

li.section-li>.section>.meta {
    opacity: .6;
    flex-basis: 6em;
    margin: 0
}

.popover .section {
    grid-template-columns: 6em 1fr !important
}

.popover .section>.tags {
    display: none
}

.section h3,
.section>.tags,
.page-title {
    margin: 0
}

.search {
    flex-grow: .3;
    min-width: -moz-fit-content;
    min-width: fit-content;
    max-width: 14rem
}

.search>#search-icon {
    background-color: var(--lightgray);
    cursor: pointer;
    white-space: nowrap;
    border-radius: 4px;
    align-items: center;
    height: 2rem;
    display: flex
}

.search>#search-icon>div {
    flex-grow: 1
}

.search>#search-icon>p {
    padding: 0 1rem;
    display: inline
}

.search>#search-icon svg {
    cursor: pointer;
    width: 18px;
    min-width: 18px;
    margin: 0 .5rem
}

.search>#search-icon svg .search-path {
    stroke: var(--darkgray);
    stroke-width: 2px;
    transition: stroke .5s
}

.search>#search-container {
    contain: layout;
    z-index: 999;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    width: 100vw;
    height: 100vh;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto
}

.search>#search-container.active {
    display: inline-block
}

.search>#search-container>#search-space {
    width: 65%;
    margin-top: 12vh;
    margin-left: auto;
    margin-right: auto
}

@media (max-width:1510px) {
    .search>#search-container>#search-space {
        width: 90%
    }
}

.search>#search-container>#search-space>* {
    background: var(--light);
    border-radius: 7px;
    width: 100%;
    margin-bottom: 2em;
    box-shadow: 0 14px 50px #1b21301f, 0 10px 30px #1b213029
}

.search>#search-container>#search-space>input {
    box-sizing: border-box;
    font-family: var(--bodyFont);
    color: var(--dark);
    border: 1px solid var(--lightgray);
    padding: .5em 1em;
    font-size: 1.1em
}

.search>#search-container>#search-space>input:focus {
    outline: none
}

.search>#search-container>#search-space>#search-layout {
    border: 1px solid var(--lightgray);
    box-sizing: border-box;
    flex-direction: row;
    flex: 0 0 100%;
    display: none
}

.search>#search-container>#search-space>#search-layout.display-results {
    display: flex
}

.search>#search-container>#search-space>#search-layout[data-preview]>#results-container {
    flex: 0 0 min(30%, 450px)
}

@media (min-width:1000px) {
    .search>#search-container>#search-space>#search-layout[data-preview] .result-card>p.preview {
        display: none
    }

    .search>#search-container>#search-space>#search-layout[data-preview]>div:first-child {
        border-right: 1px solid var(--lightgray);
        border-top-right-radius: unset;
        border-bottom-right-radius: unset
    }

    .search>#search-container>#search-space>#search-layout[data-preview]>div:last-child {
        border-top-left-radius: unset;
        border-bottom-left-radius: unset
    }
}

.search>#search-container>#search-space>#search-layout>div {
    border-radius: 5px;
    height: 63vh
}

@media (max-width:1000px) {
    .search>#search-container>#search-space>#search-layout>#preview-container {
        display: none !important
    }

    .search>#search-container>#search-space>#search-layout[data-preview]>#results-container {
        flex: 0 0 100%;
        width: 100%;
        height: auto
    }
}

.search>#search-container>#search-space>#search-layout .highlight {
    background: color-mix(in srgb, var(--tertiary)60%, #fff0);
    border-radius: 5px;
    scroll-margin-top: 2rem
}

.search>#search-container>#search-space>#search-layout>#preview-container {
    color: var(--dark);
    padding: 0 2rem;
    font-family: inherit;
    font-weight: 400;
    line-height: 1.5em;
    display: block;
    overflow: hidden auto
}

.search>#search-container>#search-space>#search-layout>#preview-container .preview-inner {
    width: min(750px, 100%);
    margin: 0 auto
}

.search>#search-container>#search-space>#search-layout>#preview-container a[role=anchor] {
    background-color: #0000
}

.search>#search-container>#search-space>#search-layout>#results-container {
    overflow-y: auto
}

.search>#search-container>#search-space>#search-layout>#results-container .result-card {
    cursor: pointer;
    border-bottom: 1px solid var(--lightgray);
    box-sizing: border-box;
    text-transform: none;
    text-align: left;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    font-weight: inherit;
    outline: none;
    width: 100%;
    margin: 0;
    padding: 1em;
    transition: background .2s;
    display: block;
    overflow: hidden
}

.search>#search-container>#search-space>#search-layout>#results-container .result-card:hover,
.search>#search-container>#search-space>#search-layout>#results-container .result-card:focus,
.search>#search-container>#search-space>#search-layout>#results-container .result-card.focus {
    background: var(--lightgray)
}

.search>#search-container>#search-space>#search-layout>#results-container .result-card>h3 {
    margin: 0
}

.search>#search-container>#search-space>#search-layout>#results-container .result-card>ul.tags {
    margin-top: .45rem;
    margin-bottom: 0
}

.search>#search-container>#search-space>#search-layout>#results-container .result-card>ul>li>p {
    background-color: var(--highlight);
    color: var(--secondary);
    border-radius: 8px;
    margin: 0 .1rem;
    padding: .2rem .4rem;
    font-weight: 700;
    line-height: 1.4rem
}

.search>#search-container>#search-space>#search-layout>#results-container .result-card>ul>li>p.match-tag {
    color: var(--tertiary)
}

.search>#search-container>#search-space>#search-layout>#results-container .result-card>p {
    margin-bottom: 0
}

button#explorer {
    all: unset;
    text-align: left;
    cursor: pointer;
    color: var(--dark);
    background-color: #0000;
    border: none;
    align-items: center;
    padding: 0;
    display: flex
}

button#explorer h1 {
    margin: 0;
    font-size: 1rem;
    display: inline-block
}

button#explorer .fold {
    opacity: .8;
    margin-left: .5rem;
    transition: transform .3s
}

button#explorer.collapsed .fold {
    transform: rotate(-90deg)
}

.folder-outer {
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease-in-out;
    display: grid
}

.folder-outer.open {
    grid-template-rows: 1fr
}

.folder-outer>ul {
    overflow: hidden
}

#explorer-content {
    max-height: none;
    margin-top: .5rem;
    list-style: none;
    transition: max-height .35s;
    overflow: hidden
}

#explorer-content.collapsed>.overflow:after {
    opacity: 0
}

#explorer-content ul {
    margin: .08rem 0;
    padding: 0;
    list-style: none;
    transition: max-height .35s, transform .35s, opacity .2s
}

#explorer-content ul li>a {
    color: var(--dark);
    opacity: .75;
    pointer-events: all
}

svg {
    pointer-events: all
}

svg>polyline {
    pointer-events: none
}

.folder-container {
    -webkit-user-select: none;
    user-select: none;
    flex-direction: row;
    align-items: center;
    display: flex
}

.folder-container div>a {
    color: var(--secondary);
    font-family: var(--headerFont);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.5rem;
    display: inline-block
}

.folder-container div>a:hover {
    color: var(--tertiary)
}

.folder-container div>button {
    color: var(--dark);
    text-align: left;
    cursor: pointer;
    font-family: var(--headerFont);
    background-color: #0000;
    border: none;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
    display: flex
}

.folder-container div>button span {
    color: var(--secondary);
    pointer-events: none;
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.5rem;
    display: inline-block
}

.folder-icon {
    color: var(--secondary);
    cursor: pointer;
    backface-visibility: visible;
    margin-right: 5px;
    transition: transform .3s
}

li:has(>.folder-outer:not(.open))>.folder-container>svg {
    transform: rotate(-90deg)
}

.folder-icon:hover {
    color: var(--tertiary)
}

.no-background:after {
    background: 0 0 !important
}

#explorer-end {
    height: 4px;
    margin: 0
}

@keyframes dropin {
    0% {
        opacity: 0;
        visibility: hidden
    }

    1% {
        opacity: 0
    }

    to {
        opacity: 1;
        visibility: visible
    }
}

.popover {
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    padding: 1rem;
    transition: opacity .3s, visibility .3s;
    position: absolute;
    overflow: visible
}

.popover>.popover-inner {
    font-weight: initial;
    font-style: initial;
    line-height: normal;
    font-size: initial;
    font-family: var(--bodyFont);
    border: 1px solid var(--lightgray);
    background-color: var(--light);
    white-space: normal;
    border-radius: 5px;
    width: 30rem;
    max-height: 20rem;
    padding: 0 1rem 1rem;
    position: relative;
    overflow: auto;
    box-shadow: 6px 6px 36px #00000040
}

.popover>.popover-inner[data-content-type][data-content-type*=pdf],
.popover>.popover-inner[data-content-type][data-content-type*=image] {
    max-height: 100%;
    padding: 0
}

.popover>.popover-inner[data-content-type][data-content-type*=image] img {
    border-radius: 0;
    margin: 0;
    display: block
}

.popover>.popover-inner[data-content-type][data-content-type*=pdf] iframe {
    width: 100%
}

.popover h1 {
    font-size: 1.5rem
}

@media (max-width:600px) {
    .popover {
        display: none !important
    }
}

a:hover .popover,
.popover:hover {
    animation: .3s .2s forwards dropin
}

code[data-theme*=\ ] {
    color: var(--shiki-light);
    background-color: var(--shiki-light-bg)
}

code[data-theme*=\ ] span {
    color: var(--shiki-light)
}

[saved-theme=dark] code[data-theme*=\ ] {
    color: var(--shiki-dark);
    background-color: var(--shiki-dark-bg)
}

[saved-theme=dark] code[data-theme*=\ ] span {
    color: var(--shiki-dark)
}

.callout {
    border: 1px solid var(--border);
    background-color: var(--bg);
    box-sizing: border-box;
    --callout-icon-note: url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"2\" x2=\"22\" y2=\"6\"></line><path d=\"M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z\"></path></svg>");
    --callout-icon-abstract: url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"></rect><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"></path><path d=\"M12 11h4\"></path><path d=\"M12 16h4\"></path><path d=\"M8 11h.01\"></path><path d=\"M8 16h.01\"></path></svg>");
    --callout-icon-info: url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line></svg>");
    --callout-icon-todo: url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\"></path><path d=\"m9 12 2 2 4-4\"></path></svg>");
    --callout-icon-tip: url("data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"></path></svg> ");
    --callout-icon-success: url("data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> ");
    --callout-icon-question: url("data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line></svg> ");
    --callout-icon-warning: url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"></path><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"></line><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line></svg>");
    --callout-icon-failure: url("data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg> ");
    --callout-icon-danger: url("data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"></polygon></svg> ");
    --callout-icon-bug: url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"8\" height=\"14\" x=\"8\" y=\"6\" rx=\"4\"></rect><path d=\"m19 7-3 2\"></path><path d=\"m5 7 3 2\"></path><path d=\"m19 19-3-2\"></path><path d=\"m5 19 3-2\"></path><path d=\"M20 13h-4\"></path><path d=\"M4 13h4\"></path><path d=\"m10 4 1 2\"></path><path d=\"m14 4-1 2\"></path></svg>");
    --callout-icon-example: url("data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"></line><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"></line><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"></line><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"></line><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"></line><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"></line></svg> ");
    --callout-icon-quote: url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z\"></path><path d=\"M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z\"></path></svg>");
    --callout-icon-fold: url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"%3E%3Cpolyline points=\"6 9 12 15 18 9\"%3E%3C/polyline%3E%3C/svg%3E");
    border-radius: 5px;
    padding: 0 1rem;
    transition: max-height .3s;
    overflow-y: hidden
}

.callout>:nth-child(2) {
    margin-top: 0
}

.callout[data-callout] {
    --color: #448aff;
    --border: #448aff44;
    --bg: #448aff10;
    --callout-icon: var(--callout-icon-note)
}

.callout[data-callout=abstract] {
    --color: #00b0ff;
    --border: #00b0ff44;
    --bg: #00b0ff10;
    --callout-icon: var(--callout-icon-abstract)
}

.callout[data-callout=info],
.callout[data-callout=todo] {
    --color: #00b8d4;
    --border: #00b8d444;
    --bg: #00b8d410;
    --callout-icon: var(--callout-icon-info)
}

.callout[data-callout=todo] {
    --callout-icon: var(--callout-icon-todo)
}

.callout[data-callout=tip] {
    --color: #00bfa5;
    --border: #00bfa544;
    --bg: #00bfa510;
    --callout-icon: var(--callout-icon-tip)
}

.callout[data-callout=success] {
    --color: #09ad7a;
    --border: #09ad7144;
    --bg: #09ad7110;
    --callout-icon: var(--callout-icon-success)
}

.callout[data-callout=question] {
    --color: #dba642;
    --border: #dba64244;
    --bg: #dba64210;
    --callout-icon: var(--callout-icon-question)
}

.callout[data-callout=warning] {
    --color: #db8942;
    --border: #db894244;
    --bg: #db894210;
    --callout-icon: var(--callout-icon-warning)
}

.callout[data-callout=failure],
.callout[data-callout=danger],
.callout[data-callout=bug] {
    --color: #db4242;
    --border: #db424244;
    --bg: #db424210;
    --callout-icon: var(--callout-icon-failure)
}

.callout[data-callout=bug] {
    --callout-icon: var(--callout-icon-bug)
}

.callout[data-callout=danger] {
    --callout-icon: var(--callout-icon-danger)
}

.callout[data-callout=example] {
    --color: #7a43b5;
    --border: #7a43b544;
    --bg: #7a43b510;
    --callout-icon: var(--callout-icon-example)
}

.callout[data-callout=quote] {
    --color: var(--secondary);
    --border: var(--lightgray);
    --callout-icon: var(--callout-icon-quote)
}

details[open] .fold-callout-icon {
    transform: rotate(0deg)
}

.callout-title {
    color: var(--color);
    --icon-size: 18px;
    align-items: flex-start;
    gap: 5px;
    padding: 1rem 0;
    display: flex
}

.callout-title .fold-callout-icon {
    opacity: .8;
    cursor: pointer;
    --callout-icon: var(--callout-icon-fold);
    transition: transform .15s;
    transform: rotate(-90deg)
}

.callout-title>.callout-title-inner>p {
    color: var(--color);
    margin: 0
}

.callout-title .callout-icon,
.callout-title .fold-callout-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 var(--icon-size);
    background-size: var(--icon-size)var(--icon-size);
    background-position: 50%;
    background-color: var(--color);
    -webkit-mask-image: var(--callout-icon);
    mask-image: var(--callout-icon);
    -webkit-mask-size: var(--icon-size)var(--icon-size);
    mask-size: var(--icon-size)var(--icon-size);
    padding: .2rem 0;
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

summary.callout-title {
    cursor: pointer;
}

.callout-title .callout-title-inner {
    font-weight: 600
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    width: 100vw;
    overflow-x: hidden
}

body,
section {
    box-sizing: border-box;
    background-color: var(--light);
    font-family: var(--bodyFont);
    color: var(--darkgray);
    max-width: 100%;
    margin: 0
}

.text-highlight {
    background-color: #fff23688;
    border-radius: 5px;
    padding: 0 .1rem
}

::selection {
    background: color-mix(in srgb, var(--tertiary)60%, #fff0);
    color: var(--darkgray)
}

p,
ul,
text,
a,
tr,
td,
li,
ol,
ul,
.katex,
.math {
    color: var(--darkgray);
    fill: var(--darkgray);
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto
}

.math.math-display {
    text-align: center
}

strong {
    font-weight: 600
}

a {
    color: var(--secondary);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s
}

a:hover {
    color: var(--tertiary) !important
}

a.internal {
    background-color: var(--highlight);
    border-radius: 5px;
    padding: 0 .1rem;
    line-height: 1.4rem;
    text-decoration: none
}

a.internal:has(>img) {
    background-color: none;
    border-radius: 0;
    padding: 0
}

a.external .external-icon {
    height: 1ex;
    margin: 0 .15em
}

a.external .external-icon>path {
    fill: var(--dark)
}

.desktop-only {
    display: initial
}

@media (max-width:1510px) {
    .desktop-only {
        display: none
    }
}

.mobile-only {
    display: none
}

@media (max-width:1510px) {
    .mobile-only {
        display: initial
    }

    .page {
        max-width: 750px;
        margin: 0 auto;
        padding: 0 1rem
    }
}

.page article>h1 {
    font-size: 2rem
}

.page article li:has(>input[type=checkbox]) {
    padding-left: 0;
    list-style-type: none
}

.page article li:has(>input[type=checkbox]:checked) {
    text-decoration: line-through;
    -webkit-text-decoration-color: var(--gray);
    text-decoration-color: var(--gray);
    color: var(--gray)
}

.page article li>* {
    margin-top: 0;
    margin-bottom: 0
}

.page article p>strong {
    color: var(--dark)
}

.page>#quartz-body {
    width: 100%;
    display: flex
}

@media (max-width:1510px) {
    .page>#quartz-body {
        flex-direction: column
    }
}

.page>#quartz-body .sidebar {
    box-sizing: border-box;
    flex-direction: column;
    flex: 1;
    gap: 2rem;
    width: 380px;
    margin-top: 6rem;
    padding: 0 4rem;
    display: flex;
    position: fixed;
    top: 0
}

@media (max-width:1510px) {
    .page>#quartz-body .sidebar {
        position: initial;
        width: initial;
        flex-direction: row;
        margin-top: 2rem;
        padding: 0
    }
}

.page>#quartz-body .sidebar.left {
    left: calc(50vw - 755px)
}

@media (max-width:1510px) {
    .page>#quartz-body .sidebar.left {
        align-items: center;
        gap: 0
    }
}

.page>#quartz-body .sidebar.right {
    flex-wrap: wrap;
    right: calc(50vw - 755px)
}

@media (max-width:1510px) {
    .page>#quartz-body .sidebar.right>* {
        flex: 1;
        min-width: 140px
    }
}

.page .page-header {
    width: 750px;
    margin: 6rem auto 0
}

@media (max-width:1510px) {
    .page .page-header {
        width: initial;
        margin-top: 2rem
    }
}

.page .center,
.page footer {
    width: 750px;
    margin-left: auto;
    margin-right: auto
}

@media (max-width:1510px) {

    .page .center,
    .page footer {
        width: initial;
        margin-left: 0;
        margin-right: 0
    }
}

.footnotes {
    border-top: 1px solid var(--lightgray);
    margin-top: 2rem
}

input[type=checkbox] {
    color: var(--secondary);
    border: 1px solid var(--lightgray);
    background-color: var(--light);
    appearance: none;
    border-radius: 3px;
    width: 16px;
    height: 16px;
    margin-inline: -1.4rem .2rem;
    position: relative;
    transform: translateY(2px)
}

input[type=checkbox]:checked {
    border-color: var(--secondary);
    background-color: var(--secondary)
}

input[type=checkbox]:checked:after {
    content: "";
    border: solid var(--light);
    border-width: 0 2px 2px 0;
    width: 4px;
    height: 8px;
    display: block;
    position: absolute;
    top: 1px;
    left: 4px;
    transform: rotate(45deg)
}

blockquote {
    border-left: 3px solid var(--secondary);
    margin: 1rem 0;
    padding-left: 1rem;
    transition: border-color .2s
}

h1,
h2,
h3,
h4,
h5,
h6,
thead {
    font-family: var(--headerFont);
    color: var(--dark);
    font-weight: revert;
    margin-bottom: 0
}

article>h1>a[role=anchor],
article>h2>a[role=anchor],
article>h3>a[role=anchor],
article>h4>a[role=anchor],
article>h5>a[role=anchor],
article>h6>a[role=anchor],
article>thead>a[role=anchor] {
    color: var(--dark);
    background-color: #0000
}

h1[id]>a[href^=\#],
h2[id]>a[href^=\#],
h3[id]>a[href^=\#],
h4[id]>a[href^=\#],
h5[id]>a[href^=\#],
h6[id]>a[href^=\#] {
    opacity: 0;
    font-family: var(--codeFont);
    -webkit-user-select: none;
    user-select: none;
    margin: 0 .5rem;
    transition: opacity .2s;
    transform: translateY(-.1rem)
}

h1[id]:hover>a,
h2[id]:hover>a,
h3[id]:hover>a,
h4[id]:hover>a,
h5[id]:hover>a,
h6[id]:hover>a {
    opacity: 1
}

h1 {
    margin-top: 2.25rem;
    margin-bottom: 1rem;
    font-size: 1.75rem
}

h2 {
    margin-top: 1.9rem;
    margin-bottom: 1rem;
    font-size: 1.4rem
}

h3 {
    margin-top: 1.62rem;
    margin-bottom: 1rem;
    font-size: 1.12rem
}

h4,
h5,
h6 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 1rem
}

figure[data-rehype-pretty-code-figure] {
    margin: 0;
    line-height: 1.6rem;
    position: relative
}

figure[data-rehype-pretty-code-figure]>[data-rehype-pretty-code-title] {
    font-family: var(--codeFont);
    border: 1px solid var(--lightgray);
    color: var(--darkgray);
    border-radius: 5px;
    width: max-content;
    margin-bottom: -.5rem;
    padding: .1rem .5rem;
    font-size: .9rem
}

figure[data-rehype-pretty-code-figure]>pre {
    padding: 0
}

pre {
    font-family: var(--codeFont);
    border: 1px solid var(--lightgray);
    border-radius: 5px;
    padding: 0 .5rem;
    position: relative;
    overflow-x: auto
}

pre:has(>code.mermaid) {
    border: none
}

pre>code {
    counter-reset: line;
    counter-increment: line 0;
    background: 0 0;
    padding: .5rem 0;
    font-size: .85rem;
    display: grid;
    overflow-x: scroll
}

pre>code [data-highlighted-chars] {
    background-color: var(--highlight);
    border-radius: 5px
}

pre>code>[data-line] {
    box-sizing: border-box;
    border-left: 3px solid #0000;
    padding: 0 .25rem
}

pre>code>[data-line][data-highlighted-line] {
    background-color: var(--highlight);
    border-left: 3px solid var(--secondary)
}

pre>code>[data-line]:before {
    content: counter(line);
    counter-increment: line;
    text-align: right;
    color: #738a9499;
    width: 1rem;
    margin-right: 1rem;
    display: inline-block
}

pre>code[data-line-numbers-max-digits="2"]>[data-line]:before {
    width: 2rem
}

pre>code[data-line-numbers-max-digits="3"]>[data-line]:before {
    width: 3rem
}

code {
    color: var(--dark);
    font-size: .9em;
    font-family: var(--codeFont);
    background: var(--lightgray);
    border-radius: 5px;
    padding: .1rem .2rem
}

tbody,
li,
p {
    line-height: 1.6rem
}

.table-container {
    overflow-x: auto
}

.table-container>table {
    border-collapse: collapse;
    margin: 1rem;
    padding: 1.5rem
}

.table-container>table th,
.table-container>table td {
    min-width: 75px
}

.table-container>table>* {
    line-height: 2rem
}

th {
    text-align: left;
    border-bottom: 2px solid var(--gray);
    padding: .4rem .7rem
}

td {
    padding: .2rem .7rem
}

tr {
    border-bottom: 1px solid var(--lightgray)
}

tr:last-child {
    border-bottom: none
}

img {
    border-radius: 5px;
    max-width: 100%;
    margin: 0 0
}

p>img+em {
    display: block;
    transform: translateY(-1rem)
}

hr {
    background-color: var(--lightgray);
    border: none;
    width: 100%;
    height: 1px;
    margin: 2rem auto
}

audio,
video {
    border-radius: 5px;
    width: 100%
}

.spacer {
    flex: auto
}

ul.overflow,
ol.overflow {
    content: "";
    clear: both;
    max-height: 400px;
    overflow-y: auto
}

ul.overflow>li:last-of-type,
ol.overflow>li:last-of-type {
    margin-bottom: 30px
}

ul.overflow:after,
ol.overflow:after {
    pointer-events: none;
    content: "";
    opacity: 1;
    background: linear-gradient(transparent 0px, var(--light));
    width: 100%;
    height: 50px;
    transition: opacity .3s;
    position: absolute;
    bottom: 0;
    left: 0
}

.transclude ul {
    padding-left: 1rem
}

:root {
    --light: #faf8f8;
    --lightgray: #e5e5e5;
    --gray: #b8b8b8;
    --darkgray: #4e4e4e;
    --dark: #2b2b2b;
    --secondary: #284b63;
    --tertiary: #84a59d;
    --highlight: #8f9fa926;
    --headerFont: sans-serif;
    --bodyFont: sans-serif;
    --codeFont: monospace
}

:root {
    --light: #161618;
    --lightgray: #393639;
    --gray: #646464;
    --darkgray: #d4d4d4;
    --dark: #ebebec;
    --secondary: #7b97aa;
    --tertiary: #84a59d;
    --highlight: #8f9fa926
}