:root {
    --pico-font-family: "Inter", system-ui, sans-serif;
    --pico-font-family-monospace: "IBM Plex Mono", Consolas, monospace;
    --pico-font-size: 15px;
    --pico-line-height: 1.55;
    --pico-spacing: .8rem;
    --pico-block-spacing-vertical: 1rem;
    --pico-border-radius: 8px;
    --pico-form-element-spacing-vertical: .375rem;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container { width: min(calc(100% - 2rem), 1120px); max-width: 1120px; margin-inline: auto; }
body > main { flex: 1; padding-top: 1.35rem; padding-bottom: 2rem; }
body > main > div { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 2.5rem; align-items: start; }
.content { min-width: 0; max-width: 78ch; }
.content > :first-child { margin-top: 0; }

body > header {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--pico-muted-border-color);
    background: var(--pico-background-color);
}
body > header.pico > nav { min-height: 3.6rem; gap: 1rem; flex-wrap: wrap; align-items: center; }
body > header.pico > nav > a { font-weight: 700; white-space: nowrap; text-decoration: none; }
body > header.pico > nav > div { display: flex; flex-wrap: wrap; gap: .15rem; align-items: center; }
body > header.pico > nav > div > a { padding: .35rem .6rem; border-radius: 6px; text-decoration: none; white-space: nowrap; }
body > header.pico > nav > div > a[aria-current="page"] { background: var(--pico-secondary-background); color: var(--pico-secondary-inverse); }
body > header.pico > nav > form[role="search"] { margin: 0 0 0 auto; min-width: 10rem; max-width: 12rem; }
body > header.pico > nav > form[role="search"] input { margin: 0; }
body > header.pico > nav > details { margin: 0; }
body > header.pico > nav > details summary { white-space: nowrap; }
.pico nav[aria-label="Pagination"] { display: flex; justify-content: flex-start; align-items: center; gap: var(--pico-spacing); }

h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; }
h1 { margin-bottom: .85rem; }
h2 { margin-top: 1.9rem; padding-bottom: .3rem; border-bottom: 1px solid var(--pico-muted-border-color); }
h3 { margin-top: 1.45rem; }
p, li { overflow-wrap: break-word; }
ul, ol { padding-left: 1.3rem; }
li { margin: .15rem 0; }

pre {
    max-height: 34rem;
    overflow: auto;
    padding: .7rem .85rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    font-size: .84rem;
    line-height: 1.45;
}
pre code, pre code.hljs { display: block; min-width: max-content; padding: 0; background: transparent; font-size: inherit; line-height: inherit; }
.content figure:has(> pre + figcaption) { position: relative; margin: 0 0 var(--pico-block-spacing-vertical); }
.content figure > pre { margin: 0; }
.content figure > pre + figcaption { position: absolute; top: .3rem; right: .3rem; display: flex; align-items: center; gap: .65rem; }
.content figure > pre + figcaption > small { color: var(--pico-muted-color); font-size: .58rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pico .content figure > pre + figcaption > button { width: auto; min-height: 0; margin: 0; padding: .1rem .35rem; border-radius: 4px; font-size: .7rem; line-height: 1.1; }
:not(pre) > code { padding: .12em .3em; border-radius: 4px; background: var(--pico-card-sectioning-background-color); }
blockquote { padding: .75rem 1rem; border-left: 3px solid var(--pico-primary); background: var(--pico-card-sectioning-background-color); }
.content table { display: block; max-width: 100%; overflow-x: auto; }

body > main > div > aside { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow: auto; font-size: .88rem; }
body > main > div > aside > details { margin: 0; padding: .65rem .75rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
body > main > div > aside > details summary { font-weight: 600; }
body > main > div > aside > details nav { margin-top: .4rem; }
body > main > div > aside > details ul { margin: 0; padding-left: 1rem; list-style: none; }
body > main > div > aside > details > nav > ul { padding-left: 0; }
body > main > div > aside > details li { margin: .3rem 0; }
body > main.pico > div > aside > details a { text-decoration: none; }
body > main.pico > div > aside > details a:hover { text-decoration: underline; }

#search-status { color: var(--pico-muted-color); }
#search-results > article { margin: 0; padding: .75rem 0; border: 0; border-bottom: 1px solid var(--pico-muted-border-color); border-radius: 0; background: transparent; box-shadow: none; }
#search-results > article h2 { margin: 0 0 .3rem; padding: 0; border: 0; font-size: 1.12rem; }
#search-results > article p { margin: 0; color: var(--pico-muted-color); font-size: .92rem; }
#search-results > article mark { padding: 0 .1em; }

body > footer { border-top: 1px solid var(--pico-muted-border-color); padding: 1rem 0; font-size: .9rem; color: var(--pico-muted-color); }
a.flatmark-anchor { padding-left: .3em; text-decoration: none; font-size: .7em; opacity: 0; }
:is(h1, h2, h3, h4, h5, h6):hover > a.flatmark-anchor,
a.flatmark-anchor:focus { opacity: 1; }

@media (max-width: 850px) {
    body > main > div { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    body > main > div > aside { grid-row: 1; position: static; max-height: none; }
    body > main > div > aside > details:not([open]) nav { display: none; }
}
@media (max-width: 600px) {
    body > header.pico > nav { padding: .6rem 0; gap: .45rem; }
    body > header.pico > nav > a { width: 100%; }
    body > header.pico > nav > div { order: 2; width: 100%; }
    body > header.pico > nav > form[role="search"] { flex: 1; max-width: none; }
    body > main { padding-top: 1rem; }
}