:root {
    --bg: #ffffff;
    --fg: #1b1b1b;
    --muted: #6b6b6b;
    --rule: #dcdcdc;
    --rule-strong: #b5b5b5;
    --code-bg: #f4f4f2;
    --link: #1d4fa0;
    --mark: #fff1a8;
    --error: #b3261e;
    --tok-heading: #1d4fa0;
    --tok-math: #1c6e48;
    --tok-command: #7b3a99;
    --tok-code: #8f4300;
    --tok-tag: #22743a;
    --tok-string: #0f4f7a;
    --tok-number: #a0430a;
    --tok-keyword: #b02a4a;
    --selection: #c9dcf7;
    --accent: #2457c5;
    --accent-hover: #1d48a6;
    --accent-fg: #ffffff;
    --surface: #f6f6f3;
    --focus-ring: rgb(36 87 197 / 0.15);
    --file-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3C/svg%3E");
    --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #161616;
        --fg: #e6e6e6;
        --muted: #9a9a9a;
        --rule: #333333;
        --rule-strong: #555555;
        --code-bg: #212121;
        --link: #8ab4f8;
        --mark: #5a4d00;
        --error: #ff8a80;
        --tok-heading: #8ab4f8;
        --tok-math: #7fd1a6;
        --tok-command: #d3a6ef;
        --tok-code: #f0b27a;
        --tok-tag: #8fd19e;
        --tok-string: #9cc9ef;
        --tok-number: #f3a46b;
        --tok-keyword: #f28b9f;
        --selection: #2e4a73;
        --accent: #8ab4f8;
        --accent-hover: #a5c5fa;
        --accent-fg: #0f1b33;
        --surface: #1f1f1f;
        --focus-ring: rgb(138 180 248 / 0.18);
        --file-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3C/svg%3E");
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--ui-font);
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: 0.55; cursor: default; }

.icon { width: 16px; height: 16px; flex: none; }

/* Text-like links and buttons with an icon in front. */
.bar a, .links a, .links button, .tabs button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
}
.bar a:hover, .links a:hover, .links button:hover, .tabs button:hover { color: var(--fg); }

.button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--rule-strong);
    border-radius: 6px;
    background: var(--bg);
    font-size: 14px;
}
.button:hover:not(:disabled) { background: var(--surface); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.button.primary:hover:not(:disabled) { background: var(--accent-hover); }

select {
    padding: 4px 6px;
    border: 1px solid var(--rule-strong);
    border-radius: 6px;
    background: var(--bg);
}

/* Typeface switcher: each option is shown in its own typeface. */
.segmented {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--rule);
    border-radius: 7px;
    background: var(--surface);
}
.segmented button {
    padding: 3px 11px;
    border: 0;
    border-radius: 5px;
    background: none;
    color: var(--muted);
    font-size: 14px;
}
.segmented button:hover { color: var(--fg); }
.segmented button[aria-pressed="true"] {
    background: var(--bg);
    color: var(--fg);
    box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgb(0 0 0 / 0.06);
}
.segmented [data-style="latex"] { font-family: KaTeX_Main, serif; font-size: 15px; }
.segmented [data-style="serif"] { font-family: "Iowan Old Style", Charter, Georgia, serif; }

/* ---- Page chrome ----------------------------------------------------- */

.bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
}
.bar .home { color: var(--fg); font-weight: 600; }
.bar .home .icon { color: var(--accent); width: 18px; height: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 6px 20px; }

main { padding: 0 16px; }

.foot {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    max-width: 60rem;
    margin: 0 auto;
    padding: 24px 16px 32px;
    color: var(--muted);
    font-size: 13px;
}
.foot a { color: inherit; }

/* Elements that line up with the text column of a paste. */
.doc-tools, .notice, main > .foot { max-width: 46rem; margin-left: auto; margin-right: auto; }
main > .foot { padding: 0 0 32px; }
main:has(.example) :is(.doc, .doc-tools, .foot) { max-width: 60rem; }

.doc-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    margin-top: 20px;
}
.links { display: flex; flex-wrap: wrap; gap: 6px 16px; }

.message { margin: 48px auto 8px; max-width: 46rem; }

.notice {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--surface);
    font-size: 14px;
}
.notice .row { display: flex; gap: 8px; margin-top: 8px; }
.notice input {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid var(--rule-strong);
    border-radius: 6px;
    background: var(--bg);
    font-family: var(--mono);
    font-size: 13px;
}

/* ---- Editor page ----------------------------------------------------- */

.editing main { max-width: 60rem; margin: 0 auto; }

.tabs { display: flex; gap: 4px; margin-top: 16px; }
.tabs button {
    padding: 8px 12px;
    border-bottom: 2px solid transparent;
}
.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }

.options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 12px;
    font-size: 14px;
}
.expires { color: var(--muted); }
.expires select { margin-left: 4px; color: var(--fg); }

.status { margin: 0; color: var(--muted); font-size: 14px; }
.options .status { flex: 1; min-width: 12em; text-align: right; }
#no-token { margin-top: 12px; }
#turnstile:not(:empty) { margin-top: 12px; }

.editor {
    position: relative;
    display: grid;
    border: 1px solid var(--rule-strong);
    border-radius: 8px;
    background: var(--bg);
}
.editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
body.dropping .editor { border-color: var(--accent); border-style: dashed; background: var(--surface); }

#source { min-height: 62vh; }
.editor .pce-wrapper { min-height: calc(62vh - 1em); }
#source, .prism-code-editor {
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.55;
}
#source {
    width: 100%;
    padding: 0.5em 0.75em;
    border: 0;
    border-radius: 8px;
    background: var(--bg);
    color: var(--fg);
    resize: vertical;
}
#source:focus { outline: none; }

#preview {
    min-height: 62vh;
    margin: 0;
    padding: 12px 0 24px;
    border-top: 1px solid var(--rule);
}
#preview:empty::before { content: "Nothing to preview."; color: var(--muted); }

/* Editor syntax colours */
.prism-code-editor {
    --pce-bg: var(--bg);
    --pce-cursor: var(--fg);
    --pce-selection: var(--selection);
    --padding-inline: 0.75em;
    color: var(--fg);
    border-radius: 8px;
}
#source::placeholder { color: var(--muted); }
.editor .placeholder {
    position: absolute;
    top: 0.5em;
    left: 0.75em;
    right: 0.75em;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.55;
    pointer-events: none;
    z-index: 3;
}
.token.title, .token.title .punctuation { color: var(--tok-heading); font-weight: 600; }
.token.bold { font-weight: 600; }
.token.italic { font-style: italic; }
.token.strike .content { text-decoration: line-through; }
.token.math { color: var(--tok-math); }
.token.math .function { color: var(--tok-command); }
.token.math .punctuation, .token.math .delimiter { color: var(--muted); }
.token.code-snippet, .token.code.keyword, .token.code-block { color: var(--tok-code); }
.token.code-language { color: var(--muted); }
.token.url, .token.url .content, .token.url .url { color: var(--link); }
.token.url .variable { color: var(--muted); }
.token.list, .token.blockquote, .token.hr, .token.table .punctuation { color: var(--tok-number); }
.token.tag, .token.tag .punctuation { color: var(--tok-tag); }
.token.attr-name { color: var(--tok-command); }
.token.attr-value, .token.string { color: var(--tok-string); }
.token.comment, .token.prolog { color: var(--muted); }
.token.keyword { color: var(--tok-keyword); }
.token.number, .token.boolean, .token.constant { color: var(--tok-number); }
.token.function { color: var(--tok-command); }
.token.punctuation { color: var(--muted); }
.token.entity { color: var(--tok-keyword); }
.token.front-matter-block { color: var(--muted); }

/* ---- Rendered document ----------------------------------------------- */

/* The same width for every typeface, so the controls above stay in place. */
.doc {
    max-width: 46rem;
    margin: 32px auto 40px;
    overflow-wrap: break-word;
}
.doc > :first-child { margin-top: 0; }

.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
    margin: 1.6em 0 0.6em;
    line-height: 1.25;
    font-weight: 600;
}
.doc h1 { font-size: 1.75em; }
.doc h2 { font-size: 1.4em; }
.doc h3 { font-size: 1.15em; }
.doc h4, .doc h5, .doc h6 { font-size: 1em; }
.doc .header-anchor { color: inherit; text-decoration: none; }
/* Link icon in the left margin on hover, to show that headings are anchors. */
.doc .header-anchor { position: relative; }
.doc .header-anchor::before {
    content: "";
    position: absolute;
    top: 0.23em; /* centred on the first line, also when the heading wraps */
    left: -1.05em;
    width: 0.7em;
    height: 0.7em;
    background: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
    transition: opacity 0.15s;
}
@media (hover: hover) {
    .doc :is(h1, h2, h3, h4, h5, h6):hover .header-anchor::before,
    .doc .header-anchor:focus-visible::before { opacity: 1; }
}

.doc p, .doc ul, .doc ol, .doc dl, .doc pre, .doc blockquote, .doc table, .doc details,
.doc .math-display, .doc .diagram { margin: 0 0 1em; }
.doc ul, .doc ol { padding-left: 1.6em; }
.doc li > ul, .doc li > ol, .doc li > p { margin-bottom: 0.25em; }
.doc dt { font-weight: 600; }
.doc dd { margin: 0 0 0.5em 1.5em; }

.doc code, .doc kbd, .doc pre { font-family: var(--mono); }
.doc code { font-size: 0.875em; background: var(--code-bg); padding: 0.1em 0.3em; border-radius: 2px; }
.doc pre {
    background: var(--code-bg);
    padding: 0.8em 1em;
    overflow-x: auto;
    font-size: 0.85em;
    line-height: 1.5;
    border-radius: 2px;
}
.doc pre code { background: none; padding: 0; font-size: inherit; }
.doc kbd {
    font-size: 0.8em;
    border: 1px solid var(--rule-strong);
    border-radius: 3px;
    padding: 0 0.35em;
}

.doc blockquote {
    margin-left: 0;
    padding-left: 1em;
    border-left: 2px solid var(--rule);
    color: var(--muted);
}

.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }

/* Tables in the style of LaTeX's booktabs. */
.doc table {
    display: block;
    max-width: 100%;
    width: max-content;
    overflow-x: auto;
    border-collapse: collapse;
    border-top: 1.5px solid var(--fg);
    border-bottom: 1.5px solid var(--fg);
}
.doc th, .doc td { padding: 0.3em 0.9em; text-align: left; vertical-align: top; }
.doc th:first-child, .doc td:first-child { padding-left: 0.2em; }
.doc thead th { border-bottom: 1px solid var(--fg); font-weight: 600; }

.doc mark { background: var(--mark); color: inherit; padding: 0 0.1em; }
.doc summary { cursor: pointer; }
.doc details > :not(summary) { margin-left: 1em; }

.doc .image-link::before { content: "Image: "; color: var(--muted); }

/* Brand icons in front of links (the icons themselves are in site-icons.css).
   An empty inline box with a word joiner, so the icon never ends up alone at
   the end of a line. */
.doc a.site::before {
    content: "\2060";
    padding-left: 0.95em;
    margin-right: 0.22em;
    background: currentColor;
    -webkit-mask: var(--site-icon) left center / 0.85em 0.85em no-repeat;
    mask: var(--site-icon) left center / 0.85em 0.85em no-repeat;
}

/* Links to local files: not clickable, the path is in the tooltip. The icon
   is a background, so a line break cannot separate it from the name. */
.doc .file-link {
    padding-left: 1.05em;
    background: var(--file-icon) left 0.1em / 0.85em 0.85em no-repeat;
    cursor: help;
    text-decoration: underline dotted var(--muted);
    text-underline-offset: 3px;
}

.doc .task-list-container { list-style: none; padding-left: 0.4em; }
.doc .task-list-item-checkbox { margin: 0 0.5em 0 0; vertical-align: -0.1em; }

.doc .footnotes-sep { margin: 2.5em 0 1em; }
.doc .footnotes { font-size: 0.9em; }
.doc .footnotes ol { padding-left: 1.4em; }
.doc .footnote-ref a { text-decoration: none; }
.doc .footnote-backref { text-decoration: none; }

.doc .katex { font-size: 1.1em; }
/* The negative margin gives equation numbers a few pixels of room, so no scrollbar appears. */
.doc .katex-display { margin: 0 -4px; padding: 0.15em 4px; overflow-x: auto; overflow-y: hidden; }
.doc span.math-display { display: block; margin: 0.6em 0; }
.doc .katex-error, .doc .math-error { color: var(--error); }
.doc .math-empty { display: none; }

.doc .diagram { text-align: center; overflow-x: auto; }
.doc .diagram svg { max-width: 100%; height: auto; }
.doc .diagram-error { color: var(--error); font-size: 0.875em; text-align: left; }

.doc .source { white-space: pre-wrap; }

/* Source and result side by side, on the syntax page. */
.doc .example {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 0 0 1.25em;
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
}
.doc .example-source {
    margin: 0;
    border-radius: 0;
    white-space: pre-wrap;
    font-size: 0.8em;
}
.doc .example-result { min-width: 0; padding: 0.7em 1em; }
.doc .example-result > :first-child { margin-top: 0; }
.doc .example-result > :last-child { margin-bottom: 0; }
@media (max-width: 40rem) {
    .doc .example { grid-template-columns: minmax(0, 1fr); }
}

/* Code highlighting (highlight.js classes) */
.hljs-comment, .hljs-quote { color: var(--muted); }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type { color: var(--tok-keyword); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute { color: var(--tok-string); }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-variable, .hljs-template-variable { color: var(--tok-number); }
.hljs-title, .hljs-section, .hljs-built_in, .hljs-name { color: var(--tok-command); }
.hljs-meta, .hljs-attr, .hljs-params { color: var(--tok-math); }
.hljs-tag { color: var(--tok-tag); }
.hljs-deletion { color: var(--error); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

/* ---- Typefaces ------------------------------------------------------- */

.style-sans {
    font-family: var(--ui-font);
    font-size: 16px;
    line-height: 1.6;
}

.style-serif {
    font-family: "Iowan Old Style", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
    font-size: 18px;
    line-height: 1.6;
}
.style-serif h1, .style-serif h2, .style-serif h3, .style-serif h4 { font-weight: 700; }
.style-serif .katex { font-size: 1.05em; }

/* Text set in KaTeX's Computer Modern, so it matches the math. */
.style-latex {
    font-family: KaTeX_Main, "Latin Modern Roman", "Computer Modern Serif", "Times New Roman", serif;
    font-size: 19px;
    line-height: 1.45;
}
.style-latex h1, .style-latex h2, .style-latex h3, .style-latex h4, .style-latex dt, .style-latex th { font-weight: 700; }
.style-latex h1 { text-align: center; font-size: 1.6em; margin-bottom: 1.2em; }
.style-latex h2 { font-size: 1.3em; }
.style-latex h3 { font-size: 1.1em; }
.style-latex .katex { font-size: 1em; }
.style-latex p { margin: 0; }
.style-latex p + p { text-indent: 1.5em; }
.style-latex ul, .style-latex ol, .style-latex dl, .style-latex pre, .style-latex blockquote,
.style-latex table, .style-latex details, .style-latex .math-display, .style-latex .diagram { margin: 0.7em 0; }
.style-latex li > p { margin: 0; }
.style-latex code { background: none; padding: 0; font-size: 0.85em; }
.style-latex pre code { font-size: inherit; }
.style-latex blockquote { border-left: 0; padding: 0 2em; color: inherit; }
@media (min-width: 40rem) {
    .style-latex p, .style-latex li, .style-latex dd { text-align: justify; hyphens: auto; }
}

/* ---- Table of contents ---------------------------------------------- */

/* Width of the text column (see .doc), which the table of contents sits next to. */
main { --doc-width: 46rem; }
main:has(.example) { --doc-width: 60rem; }

.toc { display: none; }
@media (min-width: 76rem) {
    main:not(:has(.example)) .toc { display: block; }
}
@media (min-width: 92rem) {
    main:has(.example) .toc { display: block; }
}
.toc {
    position: fixed;
    top: 7rem;
    left: calc(50% + var(--doc-width) / 2 + 3rem);
    width: min(15rem, calc(50% - var(--doc-width) / 2 - 4rem));
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.4;
}
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li { margin: 0; }
.toc a {
    display: block;
    padding: 3px 8px;
    border-radius: 5px;
    color: var(--muted);
    text-decoration: none;
}
.toc a:hover { color: var(--fg); }
.toc a[aria-current="true"] { color: var(--fg); background: var(--surface); }
.toc .toc-level-1 a { padding-left: 20px; }
.toc .toc-level-2 a { padding-left: 32px; }
.toc .katex { font-size: 1em; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ---- Print ----------------------------------------------------------- */

@media print {
    .bar, .foot, .notice, .doc-tools, .toc { display: none !important; }
    body { background: #fff; color: #000; }
    main { padding: 0; }
    .doc { margin: 0; max-width: none; }
    .doc a { color: inherit; }
    .doc pre { white-space: pre-wrap; }
    .doc table { display: table; }
}

/* ---- Report dialog and review page ----------------------------------- */

.dialog {
    width: min(28rem, calc(100vw - 32px));
    padding: 20px 22px;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: var(--bg);
    color: var(--fg);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.15);
    font-size: 14px;
}
.dialog::backdrop { background: rgb(0 0 0 / 0.3); }
.dialog h2 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.dialog p { margin: 0 0 12px; color: var(--muted); }
.dialog fieldset { margin: 0 0 12px; padding: 0; border: 0; }
.dialog legend { margin-bottom: 6px; font-weight: 600; }
.dialog fieldset label { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.dialog .note { display: grid; gap: 6px; margin-bottom: 12px; font-weight: 600; }
.dialog textarea {
    padding: 6px 8px;
    border: 1px solid var(--rule-strong);
    border-radius: 6px;
    background: var(--bg);
    font-weight: normal;
    resize: vertical;
}
.dialog .status:empty { display: none; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; }
#report-turnstile:not(:empty) { margin-bottom: 12px; }

.review ul { margin: 8px 0 12px; padding-left: 1.2em; }
.review .row { align-items: center; }
.button.danger { border-color: var(--error); color: var(--error); }
.button.danger:hover:not(:disabled) { background: var(--error); color: var(--bg); }