/* Research posts and the About page: ordinary scrolling documents on the manifesto's column, plus figures, tables and
   references. Chart colours are Okabe-Ito (colour-blind safe), lightened for dark mode. */
.doc{--fig-1:#0072b2;--fig-2:#e69f00;--fig-3:#cc79a7;--fig-4:#009e73;--fig-5:#d55e00;--fig-note:#b2400b}
[data-theme=dark] .doc{--fig-1:#56b4e9;--fig-2:#e6b34a;--fig-3:#e19fc6;--fig-4:#1fa37a;--fig-5:#ef5b3a;--fig-note:#f0a072}
.doc .essay h1{font-size:clamp(2.25rem,4.6vw,3.5rem);line-height:1.12;letter-spacing:-.02em;margin-bottom:1rem}
.doc .kicker{margin:0 0 1.25rem;font-size:.9rem;opacity:.7}
.doc .byline{margin:0 0 clamp(2rem,6vh,3rem);font-size:.95rem;opacity:.7}
.doc .essay code{font-family:inherit;font-size:.95em;padding:.05em .3em;border-radius:3px;background:var(--tint)}
.doc .note{font-size:.95rem;opacity:.75}
.doc sup.cite{font-size:.7em;line-height:0;margin-left:.1em}.doc sup.cite a{text-decoration:none}
.doc figure{margin:2.25rem 0}
.doc .image-fig img{display:block;width:100%;height:auto;border-radius:4px;background:#fff;border:1px solid var(--line)}
.doc .image-fig .pair{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.doc .chart-fig{margin-inline:0}
.doc figcaption{margin-top:.8rem;font-size:.92rem;line-height:1.55;opacity:.85}
.doc .fig-n{font-weight:500}
.doc .table{overflow-x:auto;margin:1.75rem 0}
.doc table{border-collapse:collapse;width:100%;font-size:.95rem;line-height:1.45;font-variant-numeric:tabular-nums}
.doc th,.doc td{text-align:left;vertical-align:top;padding:.5rem .75rem .5rem 0;border-bottom:1px solid var(--line)}
.doc th{font-weight:500}
.doc .refs{padding-left:1.25rem;font-size:1rem;line-height:1.6}.doc .refs li{margin-bottom:.5rem}
.doc .refs li:target{background:var(--tint)}
/* Charts: inline SVG, so they take the page's typeface and theme. */
.chart{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font);font-variant-numeric:tabular-nums}
.chart text{fill:currentColor}
.chart .f-muted{fill-opacity:.72}
.chart .f-note{fill:var(--fig-note)}
.chart .f-on{fill:var(--paper)}
.chart .f-grid{stroke:currentColor;stroke-opacity:.12;stroke-width:1}
.chart .f-axis{stroke:currentColor;stroke-opacity:.45;stroke-width:1}
.chart .f-ref{stroke:currentColor;stroke-opacity:.45;stroke-dasharray:3 3}
.chart .f-ci{stroke:currentColor;stroke-opacity:.8;stroke-width:1.25}
.chart .f-ci-h{stroke:currentColor;stroke-opacity:.35;stroke-width:6;stroke-linecap:round}
.chart .f-link{stroke:currentColor;stroke-opacity:.3;stroke-width:1.5}
.chart .f-track{fill:currentColor;fill-opacity:.07}
.chart .f-1{fill:var(--fig-1)}.chart .f-2{fill:var(--fig-2)}.chart .f-3{fill:var(--fig-3)}.chart .f-4{fill:var(--fig-4)}.chart .f-5{fill:var(--fig-5)}
/* Research index */
.posts{list-style:none;margin:0;padding:0}
.posts li{border-top:1px solid var(--line)}.posts li:last-child{border-bottom:1px solid var(--line)}
.posts a{display:grid;gap:.35rem;padding:1.5rem 0;text-decoration:none}
.posts a:hover .post-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.posts .post-title{font-size:1.3rem;font-weight:500;line-height:1.3;letter-spacing:-.01em}
.posts .post-summary{font-size:1rem;line-height:1.6;opacity:.85}
.posts .post-date{font-size:.85rem;opacity:.6}
@media(max-width:560px){.doc .image-fig .pair{grid-template-columns:1fr}}
/* Each chart is drawn twice; the narrow drawing keeps its type near full size on a phone instead of shrinking. */
.chart-narrow{display:none}
@media(max-width:560px){.chart-wide{display:none}.chart-narrow{display:block}}
/* Wide tables scroll inside their own box rather than squeezing their columns or the page. */
.doc table{font-size:1rem}
.doc .table:has(th:nth-child(3)) table{min-width:34rem}
@media(max-width:560px){.doc .essay h1{font-size:2.1rem}.doc figure{margin:1.75rem 0}.posts a{padding:1.15rem 0}.posts .post-title{font-size:1.2rem}}
/* Notes, laid out like si.inc's: a small number in the text; on wide screens the note sits in the right margin beside
   its line (nav.mjs nudges notes down so they never overlap); on narrower screens the same notes follow the paragraph,
   figure or table they belong to as a ruled block. */
.sn-ref{font-size:.68em;line-height:0;margin-left:.1em;padding:0 .12em;border-radius:2px;color:var(--fig-1);font-weight:500;font-variant-numeric:tabular-nums}
.sidenote{display:none}
.sn-n{font-variant-numeric:tabular-nums;font-weight:500;margin-right:.25em;color:var(--fig-1)}
.doc .block-notes{margin:-.4rem 0 1.6rem;padding:.55rem 0 .55rem 1rem;border-left:2px solid var(--line)}
.doc .block-notes p{margin:0 0 .45rem;font-size:.95rem;line-height:1.55;opacity:.85}.doc .block-notes p:last-child{margin-bottom:0}
.doc figure+.block-notes,.doc .table+.block-notes{margin-top:-1rem}
@media(min-width:1240px){
  .doc article{position:relative}
  .doc .block-notes{display:none}
  .doc .sidenote{display:block;position:absolute;right:-16.5rem;width:14rem;margin-top:-.15rem;font-size:.875rem;line-height:1.5;font-weight:400;letter-spacing:0;text-align:left;white-space:normal;opacity:.85}
  .sn:hover .sn-ref{background:var(--tint)}.sn:hover .sidenote{opacity:1}
}
/* Index thumbnails: beside the text on wide screens, above the title on phones. The dark copy of a chart shows under
   [data-theme=dark], like everything else that follows the theme toggle. */
.posts a{grid-template-columns:13rem 1fr;column-gap:1.5rem;align-items:start}
.post-thumb{display:block;grid-row:1;aspect-ratio:16/10;margin-top:.3rem;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:#fff}
.post-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.post-thumb .thumb-dark{display:none}
[data-theme=dark] .post-thumb:has(.thumb-dark){background:var(--paper)}
[data-theme=dark] .post-thumb .thumb-light{display:none}[data-theme=dark] .post-thumb .thumb-dark{display:block}
.post-text{display:grid;gap:.35rem}
@media(max-width:560px){.posts a{grid-template-columns:1fr;row-gap:.85rem}.post-thumb{margin-top:0}}
@media(max-width:560px){.doc .essay{padding-top:1.25rem}}
.chart .f-ci-l{stroke:currentColor;stroke-opacity:.3;stroke-width:1.25}
.doc .image-fig img.chart-narrow{display:none}@media(max-width:560px){.doc .image-fig img.chart-wide{display:none}.doc .image-fig img.chart-narrow{display:block}}
.chart .s-1{stroke:var(--fig-1);stroke-width:2;fill:none}.chart .s-2{stroke:var(--fig-2);stroke-width:2;fill:none}.chart .s-3{stroke:var(--fig-3);stroke-width:2;fill:none}.chart .s-4{stroke:var(--fig-4);stroke-width:2;fill:none}.chart .s-5{stroke:var(--fig-5);stroke-width:2;fill:none}
.essay pre{overflow-x:auto;max-width:100%;font-size:.85em;line-height:1.5;padding:.8em 1em;background:rgba(127,127,127,.08);border-radius:6px}
.essay pre code{background:none;padding:0;border-radius:0}
/* Terminal-Bench 4.0: worked wrong solutions as a carousel. One full-width card at a time, scroll-snap and no script
   (the page router leaves same-page #links to the browser), chips above as anchors to each card. On wide screens it
   breaks out of the 40rem column, centred on it; two columns inside a card once the card is 760px wide. */

.doc .essay pre code{background:none;padding:0;border-radius:0}
.tx-fig{margin:2.25rem 0}
.tx-panel{background:var(--tint);border-radius:12px;padding:.9rem}
.tx-box{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:.6rem .85rem .75rem}
.tx-box+.tx-box{margin-top:.6rem}
.tx-role{font-size:.72rem;opacity:.65;margin-bottom:.35rem}
.tx-box>*{margin:0}.tx-box>*+*{margin-top:.55rem}
.tx-box p{font-size:.92em;line-height:1.6}
.tx-note{opacity:.75}
.doc .essay .tx-box pre{margin-top:.1rem;padding:.45em .7em;font-size:.8em;line-height:1.5;background:var(--tint);border-radius:6px;white-space:pre-wrap;overflow-wrap:anywhere}
.tx-box+.tx-box .tx-role{margin-top:0}
.tx-box-guard{border-color:var(--fig-note)}
.tx-box-guard .tx-role{color:var(--fig-note);opacity:1}
.doc .essay .tx-box p{margin:0;font-size:.88em;line-height:1.6}
.doc .essay .tx-box>*+*{margin-top:.55rem}
.doc .essay .tx-box pre{margin-bottom:0}

.ex{margin:2rem 0;position:relative}
.ex-bar{display:none;align-items:center;justify-content:space-between;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.ex-on .ex-bar{display:flex}
.ex-dots{display:flex;gap:.15rem}
.ex-dots button{width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.ex-dots button::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .2s}
.ex-dots button:hover::after{background:currentColor;opacity:.5}
.ex-dots button[aria-current=true]::after{background:currentColor;opacity:1}
.ex-arrows{display:flex;gap:.4rem}
.ex-arrows button{width:34px;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;color:inherit;font:inherit;font-size:1rem;line-height:1;cursor:pointer}
.ex-arrows button:hover:not(:disabled){background:var(--tint)}
.ex-arrows button:disabled{opacity:.3;cursor:default}
.ex-view{overflow-x:auto;scroll-snap-type:x mandatory;border-bottom:1px solid var(--line)}
.ex-on .ex-view{overflow:hidden;scroll-snap-type:none;transition:height .3s ease}
.ex-track{display:flex;align-items:flex-start}
.ex-on .ex-track{transition:transform .35s ease}
.ex-slide{flex:0 0 100%;min-width:0;box-sizing:border-box;scroll-snap-align:start;padding:1.1rem 0 1.2rem;font-size:.94rem;line-height:1.6}
.doc .essay .ex-slide h3{margin:0;font-size:1.02rem;font-weight:500;line-height:1.3}
.ex-dom{margin-left:.6rem;font-weight:400;opacity:.55}
.doc .essay .ex-slide p,.doc .essay .ex-slide pre{margin:.7rem 0 0}
.doc .essay .ex-slide pre{max-width:100%;box-sizing:border-box;white-space:pre-wrap;overflow-wrap:anywhere}
.doc .essay .ex-slide pre code{white-space:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em}
.doc .essay .ex-slide blockquote{margin:.7rem 0 0;padding:0 0 0 .85rem;border-left:2px solid var(--line);opacity:.8}
@media(prefers-reduced-motion:reduce){.ex-on .ex-track,.ex-on .ex-view{transition:none}}
.ex-side{display:none}
@media(min-width:960px){
.ex-on .ex-side{display:block;position:absolute;top:3rem;bottom:0;width:44px}
.ex-side-l{left:-68px}
.ex-side-r{right:-68px}
.ex-side button{position:sticky;top:calc(50vh - 22px);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:inherit;font:inherit;font-size:1.15rem;line-height:1;cursor:pointer;opacity:.85;transition:opacity .2s,background .2s}
.ex-side button:hover:not(:disabled){opacity:1;background:var(--tint)}
.ex-side button:disabled{opacity:.2;cursor:default}
.ex-on .ex-arrows{display:none}
}
/* Contents. On wide screens a list in the left margin, across from the notes, that stays in view and marks the section
   being read (nav.mjs). It ends 5rem short of the column so the carousel's side arrows keep their space. Narrower
   screens get a closed Contents disclosure under the byline instead, which costs one line until it's opened. */
.doc .essay h2[id],.doc .essay h3[id]{scroll-margin-top:1.5rem}
.toc{display:none}
.doc .essay .toc a,.doc .essay .toc-m a{text-decoration:none}
.toc-m{margin:0 0 2.25rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.95rem}
.toc-m summary{padding:.65rem 0;cursor:pointer;opacity:.7}
.toc-m summary:hover,.toc-m[open] summary{opacity:1}
.toc-m ol{list-style:none;margin:0;padding:0 0 .8rem;line-height:1.45}
.toc-m li{margin:.15rem 0}.toc-m a{display:block;padding:.3rem 0}
.toc-m ol ol{padding:0 0 0 1rem}
@media(min-width:1240px){
  .toc-m{display:none}
  .toc{display:block;float:left;position:sticky;top:2rem;width:12rem;margin-left:-17rem;max-height:calc(100vh - 4rem);overflow-y:auto;scrollbar-width:none;font-size:.85rem;line-height:1.4}
  .doc .essay .toc-title{margin:0 0 .7rem;font-size:.85rem;line-height:1.4;opacity:.6}
  .toc ol{list-style:none;margin:0;padding:0}
  .toc a{display:block;padding:.3rem 0 .3rem .8rem;border-left:1px solid var(--line);opacity:.6}
  .toc ol ol a{padding-left:1.6rem}
  .toc a:hover{opacity:1}
  .toc a[aria-current]{opacity:1;border-left:2px solid currentColor;padding-left:calc(.8rem - 1px)}
  .toc ol ol a[aria-current]{padding-left:calc(1.6rem - 1px)}
}
/* Shell and Python in transcripts, coloured at build time (research-pages.py hl_cmd). Muted: ink with a hint of the
   chart palette, so a command reads as text first. */
.tx-box pre code [class^=hl-]{font-style:normal}
.tx-box .hl-p{opacity:.45}
.tx-box .hl-k{color:#1f5f8b}.tx-box .hl-s{color:#7a5a12}.tx-box .hl-v{color:#8a3f6e}.tx-box .hl-n{color:#2e6b52}
.tx-box .hl-c{opacity:.55}.tx-box .hl-o{opacity:.7}
[data-theme=dark] .tx-box .hl-k{color:#8fbfdf}[data-theme=dark] .tx-box .hl-s{color:#d9bb7a}
[data-theme=dark] .tx-box .hl-v{color:#d7a6c6}[data-theme=dark] .tx-box .hl-n{color:#8cc9ad}