/* ── Theme variables ─────────────────────────────────── */
:root {
    color-scheme: light;
    /* native browser UI (scrollbars, inputs) matches theme */
    --bg-color: #fafaf8;
    --text-color: #24292f;
    --heading-color: #1f2328;
    --sidebar-bg: #f6f8fa;
    --sidebar-border: #d0d7de;
    --link-color: #0969da;
    --sidebar-link-text: #24292f;
    --sidebar-link-hover-bg: #f3f4f6;
    --sidebar-active-bg: #edf3ff;
    --sidebar-sub-text: #57606a;
    --code-bg: #e8eaed;
    --pre-bg: #f6f8fa;
    --pre-border: #d0d7de;
    --border-color: #d0d7de;
    --border-light: #eaeef2;
    --quote-color: #57606a;
    --author-aff: #57606a;
    --anchor-color: #8e9199;
    --th-bg: #f6f8fa;
    --syntax-red: #a31515;
    --syntax-yellow: #b07800;
    --syntax-green: #4a8a00;
    --syntax-cyan: #007a8c;
    --syntax-blue: #1c4d9a;
    --syntax-purple: #6f42c1;
    --syntax-comment: #7a6050;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg-color: #282c34;
    --text-color: #abb2bf;
    --heading-color: #e5e8ed;
    --sidebar-bg: #21252b;
    --sidebar-border: #363b44;
    --link-color: #d19a66;
    --sidebar-link-text: #abb2bf;
    --sidebar-link-hover-bg: #2c313a;
    --sidebar-active-bg: #413a36;
    --sidebar-sub-text: #9099a8;
    --code-bg: #313740;
    --pre-bg: #21252b;
    --pre-border: #363b44;
    --border-color: #3e4451;
    --border-light: #2c313a;
    --quote-color: #8892a0;
    --author-aff: #8892a0;
    --anchor-color: #717b87;
    --th-bg: #21252b;
    --syntax-red: #e06c75;
    --syntax-yellow: #e5c07b;
    --syntax-green: #98c379;
    --syntax-cyan: #56b6c2;
    --syntax-blue: #61afef;
    --syntax-purple: #c678dd;
    --syntax-comment: #8b949e;
}

/* ── Base ─────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 3px;
    border-radius: 4px;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    background-color: var(--bg-color);
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Sidebar ──────────────────────────────────────────── */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 16em;
    height: 100vh;
    overflow-y: auto;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    padding: 1em 0;
    box-sizing: border-box;
    z-index: 100;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

#sidebar-title {
    font-weight: 700;
    font-size: 0.9em;
    padding: 0 0 0.8em 0;
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: 0.5em;
    color: var(--heading-color);
    line-height: 1.4;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

#sidebar-collapse {
    background: none;
    border: none;
    border-left: 1px solid var(--sidebar-border);
    cursor: pointer;
    color: var(--sidebar-sub-text);
    font-size: 1.1em;
    line-height: 1;
    padding: 0 0.6em;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    opacity: 0.6;
    margin-left: 0.5em;
}

#sidebar-title-text {
    padding: 0 0 0 1em;
    flex: 1;
}

#sidebar-collapse:hover {
    opacity: 1;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#sidebar-search {
    padding: 0 1em 0.6em 1em;
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: 0.5em;
}

#sidebar-search-trigger {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4em 0.6em;
    font-size: 0.85em;
    font-family: inherit;
    color: var(--sidebar-sub-text);
    background: var(--bg-color);
    border: 1px solid var(--sidebar-border);
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4em;
}

#sidebar-search-trigger kbd {
    font-size: 0.85em;
    background: transparent;
    border-color: var(--sidebar-border);
    border-bottom-width: 1px;
    padding: 0.05em 0.35em;
    opacity: 0.75;
    flex-shrink: 0;
}

#sidebar-search-trigger:hover {
    border-color: var(--link-color);
    opacity: 1;
}

#sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

#sidebar-nav>li {
    border-top: 1px solid var(--border-light);
}

#sidebar-nav>li:first-child {
    border-top: none;
}

#sidebar-nav>li>a {
    display: block;
    padding: 0.45em 1em;
    color: var(--sidebar-link-text);
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1.4;
    border-left: 3px solid transparent;
}

#sidebar-nav>li>a:hover {
    color: var(--link-color);
    background: var(--sidebar-link-hover-bg);
}

#sidebar-nav>li>a.active {
    color: var(--link-color);
    border-left-color: var(--link-color);
    background: var(--sidebar-active-bg);
    font-weight: 600;
}

/* Dim section when a subsection within it is active.
   :has() unsupported on Safari <15.4 / Firefox <121 — older browsers degrade to
   showing both section and subsection highlighted, which is acceptable. */
@supports selector(:has(*)) {
    #sidebar-nav>li:has(.sidebar-subsections a.active)>a.active {
        background: transparent;
        font-weight: 500;
    }
}

/* max-height accordion: 0 when collapsed, 100em when .expanded toggled by JS */
.sidebar-subsections {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

#sidebar-nav li.expanded>.sidebar-subsections {
    max-height: 100em;
}

/* Search dialog */
#search-dialog {
    border: none;
    border-radius: 8px;
    padding: 0;
    width: min(640px, 90vw);
    max-height: min(600px, 80vh);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    background: var(--bg-color);
    color: var(--text-color);
    margin: auto;
}

#search-dialog[open] {
    display: flex;
    flex-direction: column;
}

#search-dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

#search-dialog-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75em 1em;
    font-size: 1em;
    font-family: inherit;
    color: var(--text-color);
    background: var(--bg-color);
    border: none;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

#search-dialog-input:focus {
    outline: none;
    border-bottom-color: var(--link-color);
}

#search-dialog-input::placeholder {
    color: var(--sidebar-sub-text);
    opacity: 0.8;
}

#search-dialog-results {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

#search-dialog-results>li {
    border-top: 1px solid var(--border-light);
}

#search-dialog-results>li:first-child {
    border-top: none;
}

#search-dialog-empty {
    padding: 1em;
    margin: 0;
    font-size: 0.85em;
    color: var(--sidebar-sub-text);
    text-align: center;
}

.search-result {
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;
    border-left: 3px solid transparent;
}

.search-result:hover {
    background: var(--sidebar-link-hover-bg);
    border-left-color: var(--link-color);
}

.search-result-heading {
    display: block;
    font-size: 0.72em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sidebar-sub-text);
    margin-bottom: 0.15em;
}

.search-result-snippet {
    display: block;
    font-size: 0.8em;
    line-height: 1.4;
    color: var(--sidebar-link-text);
}

.search-result-snippet.is-heading {
    font-weight: 600;
}

.search-result-snippet mark {
    background: var(--sidebar-active-bg);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

/* Transient highlight on the block a search result jumps to */
.search-hit {
    animation: search-hit-pulse 1.6s ease-out;
}

@keyframes search-hit-pulse {

    0%,
    25% {
        background: var(--sidebar-active-bg);
    }

    100% {
        background: transparent;
    }
}

.sidebar-subsections li a {
    display: block;
    padding: 0.2em 1em 0.2em 2.2em;
    color: var(--sidebar-sub-text);
    text-decoration: none;
    font-size: 0.78em;
    line-height: 1.4;
    border-left: 3px solid transparent;
}

.sidebar-subsections li a:hover {
    color: var(--link-color);
    background: var(--sidebar-link-hover-bg);
}

.sidebar-subsections li a.active {
    color: var(--link-color);
    border-left-color: var(--link-color);
    background: var(--sidebar-active-bg);
    font-weight: 600;
}

#theme-toggle-container {
    padding: 0.75em 1em;
    border-top: 1px solid var(--sidebar-border);
}

#theme-toggle {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.4em 0.75em;
    cursor: pointer;
    border-radius: 8px;
    width: 100%;
    font-size: 0.82em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
}

#theme-toggle:hover {
    background: var(--sidebar-link-hover-bg);
    border-color: var(--link-color);
}

#sidebar-toggle {
    position: fixed;
    top: 0.5em;
    left: 0.5em;
    z-index: 200;
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: 8px;
    padding: 0.3em 0.6em;
    font-size: 1.2em;
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.6;
}

#sidebar-toggle:hover {
    opacity: 1;
}

#sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, 0.3);
}

/* ── Content ──────────────────────────────────────────── */
#content {
    /* max() keeps sidebar clearance on narrow viewports; centers on wide ones */
    margin-left: max(16em, calc((100vw - 52rem) / 2));
    max-width: 52rem;
    padding: 2em 2em 4em 3em;
    overflow-wrap: break-word;
}

body.sidebar-hidden #sidebar {
    transform: translateX(-100%);
}

body.sidebar-hidden #content {
    margin-left: auto;
    margin-right: auto;
}

/* ── Typography ───────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 1.6em;
    margin-bottom: 0.5em;
    color: var(--heading-color);
    line-height: 1.3;
}

h1 {
    font-size: 1.8em;
    margin-top: 2.2em;
    letter-spacing: -0.01em;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.3em;
}

h2 {
    font-size: 1.4em;
    margin-top: 1.8em;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.2em;
}

h3 {
    font-size: 1.2em;
    margin-top: 1.4em;
}

.title {
    margin-top: 0;
}

.subtitle {
    color: var(--author-aff);
    font-size: 1.1em;
    margin: -0.2em 0 0.5em;
}

a {
    color: var(--link-color);
    text-underline-offset: 3px;
}

#content a:hover {
    text-decoration-thickness: 2px;
}

#content a[href^="http"]::after {
    content: " ↗";
    font-size: 0.75em;
    opacity: 0.55;
}

span.header-section-number {
    color: var(--quote-color);
    font-weight: 400;
    margin-right: 0.3em;
}

#content ul>li,
#content ol>li {
    margin-bottom: 0.25em;
}

sup {
    font-size: 0.75em;
    line-height: 0;
    /* prevents sup from inflating surrounding line-height */
    vertical-align: super;
}

/* ── Code ─────────────────────────────────────────────── */
kbd {
    display: inline-block;
    padding: 0.1em 0.45em;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.8em;
    background: var(--code-bg);
    border: 1px solid var(--border-color);
    border-bottom-width: 2px;
    border-radius: 4px;
    color: var(--text-color);
    vertical-align: baseline;
}

code {
    background: var(--code-bg);
    padding: 0.15em 0.35em;
    border-radius: 0.4em;
    font-size: 0.875em;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

pre {
    background: var(--pre-bg);
    padding: 1em 1.2em;
    border-radius: 12px;
    overflow-x: auto;
    border: 1px solid var(--pre-border);
    line-height: 1.5;
}

pre code {
    background: none;
    padding: 0;
    font-size: 0.85em;
}

/* Pandoc wraps syntax-highlighted pre in div.sourceCode; move chrome there
   so overflow:hidden cleanly clips the rounded corners */
div.sourceCode {
    background: var(--pre-bg);
    border: 1px solid var(--pre-border);
    border-radius: 12px;
    overflow: hidden;
    margin: 1.2em 0;
}

div.sourceCode>pre {
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
}

/* ── Copy button ──────────────────────────────────────── */
/* wrapper sits outside div.sourceCode so overflow:hidden doesn't clip the button */
.code-wrapper {
    position: relative;
    margin: 1.2em 0;
}

.code-wrapper div.sourceCode {
    margin: 0;
}

.code-wrapper>pre {
    margin: 0;
}

.copy-btn {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    background: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.35em 0.7em;
    border-radius: 6px;
    font-size: 0.75em;
    cursor: pointer;
    opacity: 0;
    z-index: 10;
}

.code-wrapper:hover .copy-btn,
.copy-btn:focus {
    opacity: 1;
}

.copy-btn:hover {
    background: var(--sidebar-link-hover-bg);
    border-color: var(--link-color);
}

/* Touch devices have no hover; keep button visible so it's reachable */
@media (hover: none) {
    .copy-btn {
        opacity: 0.85;
    }
}

/* ── Blockquote ───────────────────────────────────────── */
blockquote {
    border-left: 4px solid var(--border-color);
    margin: 1.2em 0;
    padding: 0.6em 1em;
    color: var(--quote-color);
    background: var(--pre-bg);
    border-radius: 0 10px 10px 0;
}

/* ── Tables ───────────────────────────────────────────── */
.table-wrapper {
    overflow-x: auto;
    margin: 1.2em 0;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    font-size: 0.95em;
    font-variant-numeric: tabular-nums;
}

th,
td {
    border: 1px solid var(--border-color);
    padding: 0.5em 0.9em;
    text-align: left;
}

th {
    background: var(--th-bg);
    font-weight: 600;
    color: var(--heading-color);
}

tbody tr:nth-child(even) {
    background: var(--pre-bg);
}

hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 2em 0;
}

/* ── Inline TOC ───────────────────────────────────────── */
#full-toc {
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    padding: 1em 1.5em;
    margin-bottom: 2em;
}

#full-toc summary {
    cursor: pointer;
    user-select: none;
    font-size: 0.95em;
    color: var(--heading-color);
}

#TOC ul {
    list-style: none;
    padding-left: 1.2em;
}

#TOC>ul {
    padding-left: 0;
}

#TOC a {
    color: var(--sidebar-link-text);
    text-decoration: none;
    font-size: 0.9em;
}

#TOC a:hover {
    color: var(--link-color);
}

/* ── Download links ───────────────────────────────────── */
.download-link {
    display: inline-block;
    background: var(--link-color);
    color: #fff !important;
    /* override link colour in both themes */
    padding: 0.4em 1.1em;
    border-radius: 2em;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9em;
    margin-bottom: 1.5em;
    margin-right: 0.5em;
}

.download-link:hover {
    opacity: 0.88;
}

/* Dark mode: warm orange background needs dark text for sufficient contrast (≥4.5:1) */
[data-theme="dark"] .download-link {
    color: #1a1a1a !important;
}

/* ── Heading anchors ──────────────────────────────────── */
.heading-anchor {
    visibility: hidden;
    text-decoration: none;
    color: var(--anchor-color);
    margin-left: 0.3em;
    font-weight: 400;
    font-size: 0.85em;
}

h1:hover .heading-anchor,
h2:hover .heading-anchor,
h3:hover .heading-anchor,
h4:hover .heading-anchor,
h5:hover .heading-anchor,
h6:hover .heading-anchor {
    visibility: visible;
}

.heading-anchor:hover,
.heading-anchor:focus {
    color: var(--link-color);
    visibility: visible;
}

/* suppress anchor links inside TOC and sidebar to avoid duplicating the link UI */
#sidebar .heading-anchor,
#TOC .heading-anchor,
#full-toc .heading-anchor {
    display: none;
}

/* ── Header / title block ─────────────────────────────── */
header {
    margin-bottom: 2em;
}

.abstract {
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    padding: 1em 1.5em;
    margin: 1.5em 0;
    font-size: 0.95em;
}

.abstract-title {
    font-weight: 700;
    font-size: 1em;
    margin-bottom: 0.5em;
    color: var(--heading-color);
}

.author {
    margin: 0.3em 0;
}

.author-name {
    font-weight: 600;
}

.author-affiliation {
    font-style: italic;
    color: var(--author-aff);
}

.author-email {
    font-size: 0.9em;
}

.date {
    color: var(--author-aff);
    font-size: 0.9em;
    margin-top: 0.5em;
}

/* ── Footnote tooltip ─────────────────────────────────── */
.footnote-tooltip {
    display: none;
    position: fixed;
    z-index: 1000;
    background: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5em 0.8em;
    font-size: 0.85em;
    max-width: 26em;
    line-height: 1.5;
    color: var(--text-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* ── Footnotes section ────────────────────────────────── */
section.footnotes {
    margin-top: 3em;
    padding-top: 1em;
    font-size: 0.875em;
    color: var(--quote-color);
}

section.footnotes>hr {
    display: none;
    /* Pandoc inserts <hr> before footnotes; margin-top provides separation */
}

section.footnotes ol {
    padding-left: 1.5em;
    margin: 0.5em 0;
}

/* ── Images ───────────────────────────────────────────── */
#content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em 0;
    border-radius: 8px;
}

/* ── Text selection ───────────────────────────────────── */
::selection {
    background: rgba(9, 105, 218, 0.2);
    color: var(--heading-color);
}

[data-theme="dark"] ::selection {
    background: rgba(209, 154, 102, 0.3);
    color: var(--heading-color);
}

/* ── Skip-to-content ──────────────────────────────────── */
/* hidden off-screen; slides in on keyboard Tab focus */
.skip-to-content {
    position: fixed;
    top: -3em;
    left: 0;
    z-index: 999;
    padding: 0.5em 1.2em;
    background: var(--link-color);
    color: #fff;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    font-size: 0.9em;
}

.skip-to-content:focus {
    top: 0;
}

/* Dark mode: warm orange background needs dark text for sufficient contrast (≥4.5:1) */
[data-theme="dark"] .skip-to-content {
    color: #1a1a1a;
}

/* ── KaTeX math ───────────────────────────────────────── */
.katex {
    color: inherit;
    /* prevent KaTeX default black leaking in dark mode */
}

.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.2em 0;
}

/* ── Syntax highlighting (One Dark, dark mode only) ───── */
[data-theme="dark"] code span.al {
    color: var(--syntax-red);
    font-weight: bold;
}

/* Alert */
[data-theme="dark"] code span.an {
    color: var(--syntax-comment);
}

/* Annotation */
[data-theme="dark"] code span.at {
    color: var(--link-color);
}

/* Attribute */
[data-theme="dark"] code span.bn {
    color: var(--syntax-blue);
}

/* BaseN */
[data-theme="dark"] code span.cf {
    color: var(--link-color);
}

/* ControlFlow */
[data-theme="dark"] code span.ch {
    color: var(--syntax-green);
}

/* Char */
[data-theme="dark"] code span.cn {
    color: var(--syntax-comment);
}

/* Constant */
[data-theme="dark"] code span.co {
    color: var(--syntax-comment);
    font-style: italic;
}

/* Comment */
[data-theme="dark"] code span.cv {
    color: var(--syntax-comment);
}

/* CommentVar */
[data-theme="dark"] code span.do {
    color: var(--syntax-comment);
}

/* Documentation */
[data-theme="dark"] code span.dt {
    color: var(--link-color);
}

/* DataType */
[data-theme="dark"] code span.dv {
    color: var(--syntax-blue);
}

/* DecVal */
[data-theme="dark"] code span.er {
    color: var(--syntax-red);
}

/* Error */
[data-theme="dark"] code span.fl {
    color: var(--syntax-blue);
}

/* Float */
[data-theme="dark"] code span.fu {
    color: var(--link-color);
}

/* Function */
[data-theme="dark"] code span.in {
    color: var(--syntax-comment);
}

/* Information */
[data-theme="dark"] code span.kw {
    color: var(--link-color);
}

/* Keyword */
[data-theme="dark"] code span.op {
    color: var(--syntax-cyan);
}

/* Operator */
[data-theme="dark"] code span.ot {
    color: var(--syntax-comment);
}

/* Other */
[data-theme="dark"] code span.pp {
    color: var(--syntax-comment);
}

/* Preprocessor */
[data-theme="dark"] code span.sc {
    color: var(--syntax-cyan);
}

/* SpecialChar */
[data-theme="dark"] code span.ss {
    color: var(--syntax-green);
}

/* SpecialString */
[data-theme="dark"] code span.st {
    color: var(--syntax-green);
}

/* String */
[data-theme="dark"] code span.va {
    color: var(--syntax-red);
}

/* Variable */
[data-theme="dark"] code span.vs {
    color: var(--syntax-green);
}

/* VerbatimString */
[data-theme="dark"] code span.wa {
    color: var(--syntax-comment);
}

/* Warning */

/* ── FlatPPL semantic palette ─────────────────────────────
   Scoped to code.flatppl, overriding BOTH the inline tango palette (which
   governs light mode via `$styles.html()$`) and the shared One-Dark overrides
   above (dark mode). Both base palettes collapse kernels/analysis/builtins/
   keywords onto one colour and leave combinators (bu), higher-order (im) and
   set-ctors (ex) unstyled, so the semantic categories are indistinguishable
   without these rules. Colours come from the theme-aware --syntax-* vars
   (defined for light in :root and for dark in [data-theme="dark"]), so one
   un-gated rule set covers both themes and tracks the site palette. These
   selectors (0,2,2) tie the shared dark rules and beat the tango rules, and
   sit later in the file, so they win in both themes.
   Mapping: dt=distribution kernels, bu=measure combinators, cf=analysis ops,
   im=higher-order, ex=set constructors, cn=constants, do=doc-comments,
   re=holes. (vs=predefined-sets, va=reserved, st/op/numbers keep their base
   palette colours.) */
code.flatppl span.dt { color: var(--syntax-yellow); }  /* distribution kernels */
code.flatppl span.bu { color: var(--syntax-purple); }  /* measure combinators  */
code.flatppl span.cf { color: var(--syntax-blue); }    /* analysis operations  */
code.flatppl span.im { color: var(--syntax-cyan); }    /* higher-order         */
code.flatppl span.ex { color: var(--syntax-green); }   /* set constructors     */
code.flatppl span.cn { color: var(--syntax-red); }     /* constants            */
code.flatppl span.do { color: var(--syntax-comment); font-style: italic; } /* doc-comments */
code.flatppl span.re { color: var(--syntax-comment); } /* holes                */

/* ── Print ────────────────────────────────────────────── */
/* ── Footer ───────────────────────────────────────────── */
/* Sticky at the viewport bottom while the page scrolls, but in normal
   document flow, so it never covers content: at the end of the page it
   rests in its natural place. It sits below the sidebar (z-index 100), and
   the inner row mirrors the #content box so the link shares the text
   column's left edge. */
#page-footer {
    position: sticky;
    bottom: 0;
    z-index: 50;
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
}

#page-footer-inner {
    margin-left: max(16em, calc((100vw - 52rem) / 2));
    max-width: 52rem;
    padding: 0.1em 2em 0.1em 3em;
    line-height: 1.3;
}

/* Font size on the link, not the box: the row's em-based margins and
   padding must match #content's, so the link shares its left edge. */
#page-footer a {
    font-size: 0.85em;
    color: var(--sidebar-sub-text);
    text-decoration: none;
    /* Taller tap target on touch screens without growing the row: the
       negative margins cancel the padding in the line layout. */
    display: inline-block;
    padding: 0.6em 0;
    margin: -0.6em 0;
}

#page-footer a:hover {
    color: var(--link-color);
    text-decoration: underline;
}

body.sidebar-hidden #page-footer-inner {
    margin-left: auto;
    margin-right: auto;
}

/* ── Auxiliary pages (page.html) ──────────────────────── */
/* No sidebar: center the content column and the footer row. */
body.aux-page #content,
body.aux-page #page-footer-inner {
    margin-left: auto;
    margin-right: auto;
}

.page-nav {
    margin: 0 0 2em 0;
    font-size: 0.9em;
}

@media print {

    #sidebar,
    #sidebar-toggle,
    #theme-toggle-container,
    .download-link,
    #page-footer {
        display: none;
    }

    #content {
        margin: 0;
        padding: 1em;
        max-width: none;
    }

    a {
        color: inherit;
        text-decoration: underline;
    }

    pre {
        border: 1px solid var(--pre-border);
        white-space: pre-wrap;
    }
}

/* On wide screens, collapse btn (inside sidebar) handles closing;
   toggle only shown as reopen button when sidebar is hidden */
@media (min-width: 60em) {
    #sidebar-toggle {
        display: none;
    }

    body.sidebar-hidden #sidebar-toggle {
        display: block;
        left: 0.5em;
    }

    #sidebar-collapse {
        display: block;
    }
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 60em) {
    #sidebar-collapse {
        display: none;
    }

    #sidebar {
        transform: translateX(-100%);
    }

    #sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
    }

    #sidebar.open~#sidebar-toggle {
        left: calc(16em + 0.5em);
    }

    #sidebar.open~#sidebar-backdrop {
        display: block;
    }

    #content {
        margin-left: 0;
        padding: 3.5em 1.2em 2em;
    }

    #page-footer-inner {
        margin-left: 0;
        padding: 0.1em 1.2em;
    }
}

/* ── Motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}