:root {
    color-scheme: dark;
    --paper: #111;
    --ink: #fff;
    --muted: #aaa;
    --selection: #333;
    --border: #555;
}
:root[data-theme=light] {
    color-scheme: light;
    --paper: #fff;
    --ink: #111;
    --muted: #666;
    --selection: #dce4ed;
    --border: #bbb;
}
html, body { background: var(--paper); color: var(--ink); }
.cm-content [style] { --code-ink: var(--code-dark); }
:root[data-theme=light] .cm-content [style] { --code-ink: var(--code-light); }
.theme-toggle { display: inline-flex; vertical-align: -.15em; width: 1em; height: 1em; }
.version-label {
    display: inline-block;
    vertical-align: baseline;
    white-space: nowrap;
    background: var(--ink);
    color: var(--paper);
    font: bold .9em/1.15 monospace;
    padding: .05em .25em;
}
.theme-toggle svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .moon, :root[data-theme=light] .theme-toggle .sun { display: none; }
:root[data-theme=light] .theme-toggle .moon { display: block; }

body {
    margin: 8px;
    font: 10pt/1.5 monospace;
}

main {
    width: 80ch;
    max-width: 100%;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
button:hover { text-decoration: underline; }
button:focus-visible { outline: 1px dotted #999; outline-offset: 3px; }
main { min-height: 70vh; }
.elastic-tab { display: inline-block; white-space: pre; }
.image-preview { display: inline-block; max-width: 100%; white-space: normal; vertical-align: top; }
.image-preview img { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; }
.caption { display: block; color: var(--muted); margin-top: .25em; }
/* Windows CommonHTML fit: commonplace-math-spacing/windows-20261028013825717. */
.inline-math, .display-math {
    --math-scale: 1.08875;
    --math-top: -.070938em;
    --math-bottom: .005em;
    font-size: calc(var(--math-scale) * 1em);
}
.math-box {
    display: inline-block;
    position: relative;
    width: var(--math-advance);
    height: calc(var(--math-height) + (var(--math-top) + var(--math-bottom)) / var(--math-scale));
    vertical-align: calc(-1 * var(--math-depth) - var(--math-bottom) / var(--math-scale));
    margin-inline: calc(-.036562em / var(--math-scale));
}
.math-image {
    position: absolute;
    display: block;
    width: var(--math-width);
    height: var(--math-height);
    left: var(--math-left);
    top: calc(var(--math-top) / var(--math-scale));
    max-width: none;
}
.display-math {
    --math-scale: 1.114375;
    display: flow-root;
    white-space: normal;
    text-align: center;
    overflow-x: auto;
    padding-block: calc(1.083125em / var(--math-scale)) calc(1.1075em / var(--math-scale));
}
.display-math .math-box { margin-inline: 0; }
.math-pending { color: var(--muted); }
.math-block { display: inline-block; width: 100%; vertical-align: top; }
.math-live { pointer-events: none; user-select: none; }
.cm-tooltip.math-inline-live {
    background: var(--paper);
    border: 1px solid var(--border);
    padding: .5em;
    max-width: calc(100vw - 32px);
    overflow: hidden;
}
.cm-tooltip.math-inline-live:empty { visibility: hidden; }
.cm-editor { font: inherit; }
.cm-editor.cm-focused { outline: none; }
.cm-scroller { font: inherit !important; overflow: visible !important; }
.cm-editor .cm-content { padding: 0; caret-color: var(--ink); }
.cm-editor .cm-content[contenteditable=true] { min-height: 70vh; }
.cm-editor .cm-line { padding: 0; }
.cm-editor .cm-cursor { border-left-color: var(--ink); }
.cm-editor .cm-selectionBackground { background: var(--selection) !important; }
.cm-editor .cm-content ::selection { background: var(--selection); }
.collab-layer, .collab-layer * { pointer-events: none; }
.collab-cursors { animation: steps(1) cm-blink 1.2s infinite; }
.cm-editor .collab-cursor { display: block; }