/* Generated by tools/posts from tools/posts/prose.css, diagrams.css, and chroma styles. Do not edit. */
/* Post body typography. Used by site/posts/*.html and the ranger preview (index.html). Theme vars come from the page. */
.prose { overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table, .prose figure { margin: 0 0 1.1em; }
.prose h1, .prose h2, .prose h3, .prose h4 { line-height: 1.35; margin: 1.8em 0 .6em; font-weight: 700; }
.prose h1 { font-size: 1.35em; }
.prose h2 { font-size: 1.2em; }
.prose h3 { font-size: 1.05em; }
.prose h4 { font-size: 1em; color: var(--dim); }
.prose h2::before { content: "## "; color: var(--accent); }
.prose h3::before { content: "### "; color: var(--accent); }
.prose h4::before { content: "#### "; color: var(--accent); }
.prose ul, .prose ol { padding-left: 2ch; }
.prose li { margin: .25em 0; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--fg); font-weight: 700; }
.prose em { color: var(--dim); }
.prose a { color: var(--accent); text-decoration-color: var(--line); }
.prose a:hover { text-decoration-color: var(--accent); }
.prose hr { border: 0; border-top: 1px dashed var(--line); margin: 2em 0; }
.prose blockquote { padding: .2em 0 .2em 1.5ch; border-left: 2px solid var(--accent); color: var(--dim); }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose code { font: inherit; font-size: .92em; background: var(--bg-3); padding: .1em .35em; border-radius: 2px; }
.prose pre { background: color-mix(in srgb, var(--bg) 65%, #000); border: 1px solid var(--line); padding: 12px 14px; overflow-x: auto; line-height: 1.5; font-size: .9em; }
[data-light] .prose pre { background: color-mix(in srgb, var(--bg) 45%, #fff); }
.prose pre code { background: none; padding: 0; font-size: inherit; border-radius: 0; }
.prose img, .prose video { display: block; max-width: 100%; height: auto; margin: 1.2em auto; border: 1px solid var(--line); background: #000; }
.prose p[align="center"] { text-align: center; }
.prose table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; font-size: .92em; }
.prose th, .prose td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--bg-2); color: var(--accent); }
.prose input[type="checkbox"] { accent-color: var(--accent); margin-right: .5ch; }
.prose .hindsight { margin: 0 0 1.6em; padding: .8em 1.2ch; border: 1px dashed var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.prose .hindsight-tag { display: inline-block; margin-bottom: .5em; padding: .1em .8ch; background: var(--accent); color: var(--on-acc); font-weight: 700; font-size: .85em; transform: rotate(-1.5deg); }
.prose .hindsight > :last-child { margin-bottom: 0; }
/* diagrams: plain HTML in posts (<div class="dg">…), colored only through theme variables */
.prose .dg { margin: 1.5em 0 1.7em; container-type: inline-size; }
.prose .dg-cap { margin: .7em 0 0; font-size: .8em; color: var(--faint); text-align: center; }
.prose .dg .n { border: 1px solid var(--line); background: var(--bg-2); padding: .45em 1ch; font-size: .84em; line-height: 1.45; text-align: center; color: var(--dim); }
.prose .dg .n b { display: block; color: var(--accent); }

/* timeline: <ol class="tl"><li><time>…</time><b>…</b> text <span class="ev">…</span></li>, last one .now */
.prose .tl { list-style: none; margin: 0 0 0 .5ch; padding: 0; border-left: 2px solid var(--line); }
.prose .tl li { position: relative; margin: 0; padding: 0 0 1.1em 2.4ch; }
.prose .tl li:last-child { padding-bottom: 0; }
.prose .tl li::before { content: ""; position: absolute; left: calc(-.4em - 1px); top: .5em; width: .8em; height: .8em; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); box-sizing: border-box; }
.prose .tl li.now::before { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.prose .tl time { color: var(--accent); font-weight: 700; margin-right: 1ch; }
.prose .tl b { color: var(--fg); margin-right: 1ch; }
.prose .tl .ev { display: block; color: var(--faint); font-size: .84em; }

/* flow: boxes and <i class="a">→</i> arrows in a row; stacks vertically when the column is narrow */
.prose .flow { display: flex; align-items: center; justify-content: center; }
.prose .flow .a { font-style: normal; color: var(--accent); padding: 0 .7ch; }
.prose .loop { margin: .7em auto 0; max-width: 34em; padding-top: .4em; border-top: 1px dashed var(--accent); text-align: center; font-size: .82em; color: var(--accent); }
@container (max-width: 560px) {
  .prose .flow { flex-direction: column; align-items: stretch; max-width: 22em; margin: 0 auto; }
  .prose .flow .a { text-align: center; padding: .15em 0; transform: rotate(90deg); }
}

/* steps: a numbered pipeline, three per row; one column when narrow */
.prose .steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em 3ch; }
.prose .steps .n { position: relative; counter-increment: s; }
.prose .steps .n b::before { content: counter(s) " "; color: var(--faint); font-weight: 400; }
.prose .steps .n:not(:nth-child(3n)):not(:last-child)::after { content: "→"; position: absolute; right: -2.2ch; top: 50%; transform: translateY(-50%); color: var(--accent); }
@container (max-width: 560px) {
  .prose .steps { grid-template-columns: 1fr; max-width: 22em; margin: 0 auto; gap: 1.5em; }
  /* both selectors: the first must match the desktop rule's specificity to override it */
  .prose .steps .n:not(:nth-child(3n)):not(:last-child)::after, .prose .steps .n:nth-child(3n):not(:last-child)::after { content: "↓"; position: absolute; color: var(--accent); right: auto; top: auto; left: 50%; bottom: -1.45em; transform: translateX(-50%); }
}

/* tree: one parent box over a row of children joined by a rail */
.prose .tree { display: flex; flex-direction: column; align-items: center; }
.prose .tree > .n { position: relative; }
.prose .tree > .n::after { content: ""; position: absolute; left: 50%; bottom: calc(-1em - 1px); height: 1em; border-left: 1px solid var(--accent); }
.prose .tree .kids { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4em .8ch; margin-top: 1em; padding-top: 1em; border-top: 1px solid var(--accent); }
.prose .tree .kids > .n { position: relative; }
.prose .tree .kids > .n::before { content: ""; position: absolute; left: 50%; top: calc(-1em - 1px); height: 1em; border-left: 1px solid var(--accent); }

/* bars: <div class="bars"><span>label</span><div class="t"><i class="c-x" style="width:N%"></i>…</div><em>total</em> */
.prose .bars { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .45em 1.2ch; font-size: .84em; }
.prose .bars > span { color: var(--dim); }
.prose .bars > em { font-style: normal; color: var(--fg); font-variant-numeric: tabular-nums; text-align: right; }
.prose .bars .t { display: flex; height: 1.05em; background: var(--bg-2); border: 1px solid var(--line); }
.prose .bars .t i { display: block; height: 100%; min-width: 2px; }
.prose .legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em 1ch; margin-bottom: .8em; font-size: .8em; color: var(--dim); }
.prose .legend i { display: inline-block; width: .9em; height: .9em; margin: 0 .2ch 0 1ch; vertical-align: -.1em; }
.prose .c-codex { background: var(--faint); }
.prose .c-jcode { background: var(--accent); }
.prose .c-omp { background: var(--err); }
.prose .c-claude { background: repeating-linear-gradient(45deg, var(--err) 0 2px, transparent 2px 4px); }

/* syntax: github-dark */
.prose .chroma { color: #e6edf3; background-color: #0d1117; -webkit-text-size-adjust: none; }
.prose .chroma .err { color: #f85149 }
.prose .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
.prose .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
.prose .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
.prose .chroma .hl { background-color: #6e7681 }
.prose .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #737679 }
.prose .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 }
.prose .chroma .line { display: flex; }
.prose .chroma .k { color: #ff7b72 }
.prose .chroma .kc { color: #79c0ff }
.prose .chroma .kd { color: #ff7b72 }
.prose .chroma .kn { color: #ff7b72 }
.prose .chroma .kp { color: #79c0ff }
.prose .chroma .kr { color: #ff7b72 }
.prose .chroma .kt { color: #ff7b72 }
.prose .chroma .nc { color: #f0883e; font-weight: bold }
.prose .chroma .no { color: #79c0ff; font-weight: bold }
.prose .chroma .nd { color: #d2a8ff; font-weight: bold }
.prose .chroma .ni { color: #ffa657 }
.prose .chroma .ne { color: #f0883e; font-weight: bold }
.prose .chroma .nl { color: #79c0ff; font-weight: bold }
.prose .chroma .nn { color: #ff7b72 }
.prose .chroma .py { color: #79c0ff }
.prose .chroma .nt { color: #7ee787 }
.prose .chroma .nv { color: #79c0ff }
.prose .chroma .vc { color: #79c0ff }
.prose .chroma .vg { color: #79c0ff }
.prose .chroma .vi { color: #79c0ff }
.prose .chroma .vm { color: #79c0ff }
.prose .chroma .nf { color: #d2a8ff; font-weight: bold }
.prose .chroma .fm { color: #d2a8ff; font-weight: bold }
.prose .chroma .l { color: #a5d6ff }
.prose .chroma .ld { color: #79c0ff }
.prose .chroma .s { color: #a5d6ff }
.prose .chroma .sa { color: #79c0ff }
.prose .chroma .sb { color: #a5d6ff }
.prose .chroma .sc { color: #a5d6ff }
.prose .chroma .dl { color: #79c0ff }
.prose .chroma .sd { color: #a5d6ff }
.prose .chroma .s2 { color: #a5d6ff }
.prose .chroma .se { color: #79c0ff }
.prose .chroma .sh { color: #79c0ff }
.prose .chroma .si { color: #a5d6ff }
.prose .chroma .sx { color: #a5d6ff }
.prose .chroma .sr { color: #79c0ff }
.prose .chroma .s1 { color: #a5d6ff }
.prose .chroma .ss { color: #a5d6ff }
.prose .chroma .m { color: #a5d6ff }
.prose .chroma .mb { color: #a5d6ff }
.prose .chroma .mf { color: #a5d6ff }
.prose .chroma .mh { color: #a5d6ff }
.prose .chroma .mi { color: #a5d6ff }
.prose .chroma .il { color: #a5d6ff }
.prose .chroma .mo { color: #a5d6ff }
.prose .chroma .o { color: #ff7b72; font-weight: bold }
.prose .chroma .ow { color: #ff7b72; font-weight: bold }
.prose .chroma .or { color: #ff7b72; font-weight: bold }
.prose .chroma .c { color: #8b949e; font-style: italic }
.prose .chroma .ch { color: #8b949e; font-style: italic }
.prose .chroma .cm { color: #8b949e; font-style: italic }
.prose .chroma .c1 { color: #8b949e; font-style: italic }
.prose .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
.prose .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
.prose .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
.prose .chroma .gd { color: #ffa198; background-color: #490202 }
.prose .chroma .ge { font-style: italic }
.prose .chroma .gr { color: #ffa198 }
.prose .chroma .gh { color: #79c0ff; font-weight: bold }
.prose .chroma .gi { color: #56d364; background-color: #0f5323 }
.prose .chroma .go { color: #8b949e }
.prose .chroma .gp { color: #8b949e }
.prose .chroma .gs { font-weight: bold }
.prose .chroma .gu { color: #79c0ff }
.prose .chroma .gt { color: #ff7b72 }
.prose .chroma .gl { text-decoration: underline }
.prose .chroma .w { color: #6e7681 }

/* syntax: github (light themes) */
[data-light] .prose .chroma { background-color: #f7f7f7; -webkit-text-size-adjust: none; }
[data-light] .prose .chroma .err { color: #f6f8fa; background-color: #82071e }
[data-light] .prose .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
[data-light] .prose .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
[data-light] .prose .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
[data-light] .prose .chroma .hl { background-color: #dedede }
[data-light] .prose .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
[data-light] .prose .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
[data-light] .prose .chroma .line { display: flex; }
[data-light] .prose .chroma .k { color: #cf222e }
[data-light] .prose .chroma .kc { color: #cf222e }
[data-light] .prose .chroma .kd { color: #cf222e }
[data-light] .prose .chroma .kn { color: #cf222e }
[data-light] .prose .chroma .kp { color: #cf222e }
[data-light] .prose .chroma .kr { color: #cf222e }
[data-light] .prose .chroma .kt { color: #cf222e }
[data-light] .prose .chroma .na { color: #1f2328 }
[data-light] .prose .chroma .nc { color: #1f2328 }
[data-light] .prose .chroma .no { color: #0550ae }
[data-light] .prose .chroma .nd { color: #0550ae }
[data-light] .prose .chroma .ni { color: #6639ba }
[data-light] .prose .chroma .nl { color: #990000; font-weight: bold }
[data-light] .prose .chroma .nn { color: #24292e }
[data-light] .prose .chroma .nx { color: #1f2328 }
[data-light] .prose .chroma .nt { color: #0550ae }
[data-light] .prose .chroma .nb { color: #6639ba }
[data-light] .prose .chroma .bp { color: #6a737d }
[data-light] .prose .chroma .nv { color: #953800 }
[data-light] .prose .chroma .vc { color: #953800 }
[data-light] .prose .chroma .vg { color: #953800 }
[data-light] .prose .chroma .vi { color: #953800 }
[data-light] .prose .chroma .vm { color: #953800 }
[data-light] .prose .chroma .nf { color: #6639ba }
[data-light] .prose .chroma .fm { color: #6639ba }
[data-light] .prose .chroma .s { color: #0a3069 }
[data-light] .prose .chroma .sa { color: #0a3069 }
[data-light] .prose .chroma .sb { color: #0a3069 }
[data-light] .prose .chroma .sc { color: #0a3069 }
[data-light] .prose .chroma .dl { color: #0a3069 }
[data-light] .prose .chroma .sd { color: #0a3069 }
[data-light] .prose .chroma .s2 { color: #0a3069 }
[data-light] .prose .chroma .se { color: #0a3069 }
[data-light] .prose .chroma .sh { color: #0a3069 }
[data-light] .prose .chroma .si { color: #0a3069 }
[data-light] .prose .chroma .sx { color: #0a3069 }
[data-light] .prose .chroma .sr { color: #0a3069 }
[data-light] .prose .chroma .s1 { color: #0a3069 }
[data-light] .prose .chroma .ss { color: #032f62 }
[data-light] .prose .chroma .m { color: #0550ae }
[data-light] .prose .chroma .mb { color: #0550ae }
[data-light] .prose .chroma .mf { color: #0550ae }
[data-light] .prose .chroma .mh { color: #0550ae }
[data-light] .prose .chroma .mi { color: #0550ae }
[data-light] .prose .chroma .il { color: #0550ae }
[data-light] .prose .chroma .mo { color: #0550ae }
[data-light] .prose .chroma .o { color: #0550ae }
[data-light] .prose .chroma .ow { color: #0550ae }
[data-light] .prose .chroma .or { color: #0550ae }
[data-light] .prose .chroma .p { color: #1f2328 }
[data-light] .prose .chroma .c { color: #57606a }
[data-light] .prose .chroma .ch { color: #57606a }
[data-light] .prose .chroma .cm { color: #57606a }
[data-light] .prose .chroma .c1 { color: #57606a }
[data-light] .prose .chroma .cs { color: #57606a }
[data-light] .prose .chroma .cp { color: #57606a }
[data-light] .prose .chroma .cpf { color: #57606a }
[data-light] .prose .chroma .gd { color: #82071e; background-color: #ffebe9 }
[data-light] .prose .chroma .ge { color: #1f2328 }
[data-light] .prose .chroma .gi { color: #116329; background-color: #dafbe1 }
[data-light] .prose .chroma .go { color: #1f2328 }
[data-light] .prose .chroma .gl { text-decoration: underline }
[data-light] .prose .chroma .w { color: #ffffff }

.prose .chroma, [data-light] .prose .chroma { color: var(--fg); background-color: transparent; }