/* Reading typography and measure adapted from website/site/styles/editorial.css. */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,600;0,700;1,400&family=IM+Fell+English:ital@0;1&family=Syne+Mono&display=swap');

:root {
  color-scheme: dark;
  --bg: #000;
  --text: #fff;
  --text-secondary: #b7b7b7;
  --text-muted: #969696;
  --accent: #fff;
  --rule: #333;
  --surface-sunken: #111;
  --font-display: "IM Fell English", Georgia, "Times New Roman", serif;
  --font-body: "Spectral", Georgia, "Times New Roman", serif;
  --font-mono: "Syne Mono", ui-monospace, monospace;
  --text-base: 1.1875rem;
  --leading-body: 1.72;
  --space-5: 1.5rem;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: inherit; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
:is(a,summary,button,[tabindex="0"]):focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
::selection { color: #000; background: #fff; }
.skip-link { position: fixed; top: 12px; left: 12px; padding: 12px; background: #000; transform: translateY(-200%); z-index: 10; }
.skip-link:focus { transform: none; }
.site-header { max-width: 696px; margin: 0 auto; padding: 40px 28px 0; font: 12px/1.5 var(--font-mono); }
.site-header a { text-decoration: line-through; }
main { padding: 64px 28px 100px; }
main:focus { outline: none; }
.message, .editorial-article { max-width: 640px; margin: 0 auto; overflow-wrap: anywhere; }
h1,h2 { font-family: var(--font-display); font-weight: 400; text-wrap: pretty; }
.message h1 { font-size: 38px; margin: 0 0 32px; }
.editorial-article h1 { text-decoration: line-through; text-decoration-thickness: 2px; font-size: 56px; line-height: 1.06; margin: 0 0 28px; }
.editorial-introduction { font: italic 20px/1.55 var(--font-body); color: var(--text-secondary); margin: 0 0 34px; }
.editorial-meta { font: 12px/1.5 var(--font-mono); color: var(--text-muted); }
.post-header { margin-bottom: 48px; }
.post-header .editorial-meta { border-top: 1px solid var(--rule); padding-top: 16px; }
.post-links { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:12px; font:12px/1.5 var(--font-mono); }
.post-links a { padding:6px 0; }
.post-cover { margin:0 0 48px; }
.post-cover img { display:block; width:100%; height:auto; filter:grayscale(1); }
.chapter-heading { position: relative; font: 32px/1.2 var(--font-display); margin: 52px 0 24px; scroll-margin-top: 24px; }
.chapter-heading a { display: block; min-height: 44px; color: inherit; text-decoration: none; }
.chapter-link-mark { font: 16px var(--font-mono); margin-left: 10px; opacity: 0; }
.chapter-heading a:is(:hover,:focus-visible) .chapter-link-mark { opacity: 1; }
.copy-status { position: fixed; bottom: 24px; right: 24px; font: 12px/1.5 var(--font-mono); background: #000; }
.copy-status:not(:empty) { padding: 10px 14px; border: 1px solid var(--rule); }
.post-next { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--rule); }
.post-next a { display: block; margin-top: 8px; font: 26px/1.3 var(--font-display); }
.markdown-body img { display: block; max-width: 100%; height: auto; filter: grayscale(1); }
@media (max-width: 640px) {
  main { padding-top: 48px; }
  .editorial-article h1 { font-size: 38px; }
  .editorial-introduction { font-size: 18px; }
  .chapter-heading { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}
/* Chapter droplets float free; titles turn up on intent. */
.chapter-lines { position:fixed; z-index:20; left:clamp(4px,1.6vw,28px); top:50%; transform:translateY(-50%); }
.chapter-lines-toggle { display:flex; align-items:center; justify-content:center; width:44px; min-height:44px; padding:14px 0; border:0; background:none; cursor:pointer; }
.chapter-lines-marks { display:block; flex:none; overflow:visible; max-height:calc(100dvh - 88px); }
.chapter-dot { fill:var(--text-muted); opacity:.46; }
.chapter-dot-liquid { fill:var(--accent); }
.chapter-lines-toggle:focus-visible { outline:1px solid var(--accent); outline-offset:2px; border-radius:24px; }
.chapter-lines-titles { position:absolute; left:100%; top:50%; width:280px; max-width:calc(100vw - 76px); transform:translateY(-50%); visibility:hidden; pointer-events:none; padding:12px 18px 12px 10px; background:var(--bg); }
.chapter-lines[data-open="true"] .chapter-lines-titles { visibility:visible; pointer-events:auto; }
.chapter-lines-titles ol { list-style:none; margin:0; padding:0; max-height:calc(100dvh - 64px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.chapter-lines-titles li { margin:0; padding:0; max-width:none; perspective:600px; }
.chapter-lines-titles a { display:flex; align-items:center; min-height:44px; padding:7px 4px; box-sizing:border-box; font:16px/1.3 var(--font-body); color:var(--text-muted); text-decoration:none; }
.chapter-lines-titles a > span { display:block; transform-origin:50% 100%; transform:translateY(10px) rotateX(-65deg); opacity:0; backface-visibility:hidden; }
.chapter-lines[data-open="true"] .chapter-lines-titles a > span { transform:translateY(0) rotateX(0); opacity:1; }
.chapter-lines-titles a:is(:hover,[aria-current="location"]) { color:var(--accent); }
@media(max-width:700px) {
 main:has(.chapter-lines) { padding-left:56px !important; padding-right:24px !important; }
 .chapter-lines { left:0; }
 .chapter-lines .chapter-lines-toggle { position:relative; z-index:1; width:44px; -webkit-tap-highlight-color:transparent; }
 .chapter-lines-titles { width:calc(100vw - 44px); max-width:none; padding:20px 24px 20px 8px; box-sizing:border-box; background:transparent; isolation:isolate; }
}
@media(max-width:1344px) {
 .chapter-lines-titles { background:transparent; isolation:isolate; }
 /* The reading surface diffuses around the index instead of ending at a panel edge. */
 .chapter-lines-titles::before { content:""; position:absolute; z-index:-1; inset:-52px -24px -52px -16px; pointer-events:none; background:linear-gradient(to right,transparent,var(--bg) 24px,var(--bg) 82%,transparent); mask-image:linear-gradient(to bottom,transparent,var(--bg) 52px,var(--bg) calc(100% - 52px),transparent); transform:scaleX(.12); transform-origin:left center; opacity:0; }
 .chapter-lines[data-open="true"] .chapter-lines-titles::before { transform:scaleX(1); opacity:1; }
 .editorial-article:has(.chapter-lines) > :not(.chapter-lines) { transition:opacity 200ms ease; }
 .editorial-article:has(.chapter-lines[data-open="true"]) > :not(.chapter-lines) { opacity:.16; }

}
@media(hover:none) {
 .chapter-lines-toggle { width:28px; }
}
@media(prefers-reduced-motion:no-preference) {
 .chapter-lines-titles { transition:visibility 0s linear 260ms; }
 .chapter-lines[data-open="true"] .chapter-lines-titles { transition-delay:0s; }
 .chapter-lines-titles a > span { transition:transform 260ms cubic-bezier(.22,.8,.24,1),opacity 150ms ease; }
 .chapter-lines[data-open="true"] .chapter-lines-titles a > span { transition-duration:380ms,220ms; transition-delay:calc(var(--reveal-order) * 18ms); }
}

@media(max-width:1344px) and (prefers-reduced-motion:no-preference) {
 .chapter-lines-titles::before { transition:transform 360ms cubic-bezier(.22,.8,.24,1),opacity 160ms ease; }
 .chapter-lines[data-open="true"] .chapter-lines-titles a > span { transition-delay:calc(120ms + var(--reveal-order) * 18ms); }
 .chapter-lines-titles { transition:visibility 0s linear 420ms; }
 .chapter-lines[data-open="true"] .chapter-lines-titles { transition-delay:0s; }
}

/* Markdown essays share the reading measure and keep wide data scrollable. */
.markdown-body { font:var(--text-base)/var(--leading-body) var(--font-body); }
.markdown-body p { margin:0 0 var(--space-5); }
.markdown-body :is(h3,h4,h5,h6) { font-family:var(--font-display); line-height:1.25; margin:32px 0 18px; scroll-margin-top:84px; }
.markdown-body h3 { font-size:26px; }
.markdown-body h4 { font-size:22px; }
.markdown-body :is(ul,ol) { padding-left:1.5em; margin:0 0 var(--space-5); }
.markdown-body li { margin:0.4em 0; }
.markdown-body blockquote { margin:24px 0; padding-left:20px; border-left:2px solid var(--accent); color:var(--text-secondary); }
.markdown-body pre { padding:20px; overflow:auto; background:var(--surface-sunken); font:0.9rem/1.6 var(--font-mono); }
.markdown-body :not(pre) > code {
 font:0.85em/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
 letter-spacing:normal; background:color-mix(in srgb, var(--text) 5%, var(--bg));
 border-radius:5px; padding:0.12em 0.3em; overflow-wrap:anywhere;
}
.markdown-body .katex { font-size:1.05em; }
.markdown-body .katex-display { overflow-x:auto; overflow-y:hidden; padding:6px 0; margin:16px 0 28px; }
.markdown-table { max-width:100%; overflow-x:auto; margin:16px 0 28px; }
.markdown-table table { width:100%; border-collapse:collapse; font-size:0.85em; line-height:1.45; overflow-wrap:normal; word-break:normal; }
.markdown-table :is(th,td) { padding:10px 12px; border-bottom:1px solid var(--rule); min-width:70px; vertical-align:top; }
.markdown-table th { text-align:left; font-weight:600; }
.marked-stat { position:relative; display:inline-block; }
.marked-stat svg { position:absolute; left:-10px; top:-7px; width:calc(100% + 20px); height:calc(100% + 14px); overflow:visible; pointer-events:none; }
.markdown-reference { display:flex; gap:12px; margin:16px 0; font-size:0.85em; scroll-margin-top:84px; }
.markdown-reference-number { flex-shrink:0; color:var(--accent); font-family:var(--font-mono); }
.markdown-reference p { margin:0; }
.footnote-backlink { display:inline-block; margin-right:8px; }
.markdown-body sup[id] { scroll-margin-top:84px; }
/* Long inline equations remain readable within the mobile prose column. */
.markdown-body p .katex, .markdown-body li .katex, .markdown-reference .katex {
 display:inline-block; max-width:100%; overflow-x:auto; overflow-y:hidden; vertical-align:middle;
}
.markdown-body .katex-display > .katex { display:block; }
/* Position the accessible MathML copy inside its equation's own bounds. */
.markdown-body .katex { position:relative; }
.markdown-body .katex-mathml { left:0; top:0; }

@media(max-width:640px) {
 .markdown-body .katex-display { font-size:0.82em; }
}

@media(prefers-reduced-motion:reduce) {
 .chapter-lines *,.chapter-lines *::before,.editorial-article > * { transition:none !important; animation:none !important; }
}