@charset "UTF-8";
/* Numa Koudsie · lecture notes
   The explanation under each simulation, set like the house LaTeX write-up (DESIGN.md of Droplet Collection,
   sections 3, 6 and 11): prose and mathematics in one face (Latin Modern text, KaTeX maths), titles in
   Instrument Serif at weight 400, labels in IBM Plex Mono, section numbers in filled wine badges, display
   equations on the quote ground with a 2 px wine edge, figures on a white plate with a numbered caption,
   the abstract in a bordered box with a 4 px wine edge. Every box has a visible outline; no card shadows. */

@font-face { font-family: 'Latin Modern Roman'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/lm/lmroman10-regular.woff2') format('woff2'); }
@font-face { font-family: 'Latin Modern Roman'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/lm/lmroman10-italic.woff2') format('woff2'); }
@font-face { font-family: 'Latin Modern Roman'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/lm/lmroman10-bold.woff2') format('woff2'); }
@font-face { font-family: 'Latin Modern Roman'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/lm/lmroman10-bolditalic.woff2') format('woff2'); }

:root {
  /* prose and symbols: Latin Modern; Greek, which Latin Modern's text fonts lack, falls through to KaTeX's maths italic */
  --tex: 'Latin Modern Roman', 'KaTeX_Math', 'Times New Roman', serif;
  --line-strong: #cdc1ae;
  --quote: #fbf6ee;
  --plate: #fff;
}

/* ================= the note ================= */
.paper { margin-top: 80px; scroll-margin-top: 16px; }
.paper:not(.is-typeset) .paper__body { visibility: hidden; }
.paper__head { max-width: 980px; padding-bottom: 26px; border-bottom: 1px solid var(--line-strong); margin-bottom: 34px; }
.paper__kicker { margin: 0 0 12px; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.paper__title { margin: 0 0 10px; font: 400 clamp(36px, 4.6vw, 58px)/1.02 var(--serif); letter-spacing: -.012em; color: var(--ink); max-width: 22ch; text-wrap: balance; }
.paper__by { margin: 0 0 22px; font: 12px var(--mono); color: var(--muted); }
.paper__abstract { max-width: 760px; padding: 16px 20px 15px; background: var(--card); border: 1px solid var(--line-strong); border-left: 4px solid var(--accent); border-radius: 10px; font: 17px/1.62 var(--tex); color: var(--ink-2); }
.paper__abstract b { font-weight: 700; color: var(--ink); margin-right: 6px; }

.paper__grid { display: grid; grid-template-columns: 210px minmax(0, 760px); gap: 56px; align-items: start; }
.paper__toc { position: sticky; top: 24px; }
.paper__toc p { margin: 0 0 10px; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.paper__toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line-strong); }
.paper__toc a { display: flex; gap: 10px; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; font: 15.5px/1.35 var(--tex); color: var(--ink-3); }
.paper__toc a span { flex: none; min-width: 1.4em; font: 500 11px/1.9 var(--mono); color: var(--accent); }
.paper__toc a:hover, .paper__toc a.is-here { color: var(--accent); border-left-color: var(--accent); text-decoration: none; }

/* ================= running text ================= */
.paper__body { min-width: 0; font: 18px/1.72 var(--tex); color: var(--ink); overflow-x: clip; }
.paper__body p { margin: 0 0 1em; hyphens: auto; -webkit-hyphens: auto; }
.paper__body em { font-style: italic; }
.paper__body strong, .paper__body b { font-weight: 700; }
.paper__body a { color: var(--accent); }
.paper__body ul, .paper__body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.paper__body li { margin-bottom: .35em; }
.paper__body li::marker { color: var(--accent); }
.paper__body sub, .paper__body sup { font-size: 72%; line-height: 0; }

.psec { padding-top: 34px; margin-top: 38px; border-top: 1px solid var(--line-strong); scroll-margin-top: 16px; }
.psec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.psec > h3 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; font: 400 clamp(28px, 3vw, 38px)/1.08 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.psec__n { flex: none; position: relative; top: -.32em; min-width: 30px; padding: 3px 7px; border-radius: 4px; background: var(--accent); color: #fff; font: 500 11px/1.4 var(--mono); letter-spacing: .04em; text-align: center; }
.psec h4 { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 12px; font: 400 23px/1.2 var(--serif); color: var(--ink); scroll-margin-top: 16px; }
.psec h4 .psub__n { font: 500 12px var(--mono); color: var(--accent); }
.psec__lead { font-size: 19px; color: var(--ink-2); }

/* ================= mathematics ================= */
.paper .katex { font-size: 1.06em; }
.paper .katex-display { margin: 1.1em 0 1.3em; padding: 14px 12px; background: var(--quote); border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0; overflow-x: auto; overflow-y: hidden; position: relative; }
.paper .katex-display > .katex { display: block; width: max-content; min-width: 100%; }
.paper .katex .tag { color: var(--muted); }
/* a long equation scrolls inside its box; its number keeps its own room instead of covering the last symbols */
.paper .katex-display > .katex > .katex-html:has(> .tag) { padding-right: 2.8em; }
.paper .katex .mathit, .paper .katex .mathnormal { color: inherit; }
.eqnote { display: block; margin: -.7em 0 1.2em; font: 12px/1.5 var(--mono); color: var(--muted); }

/* ================= figures ================= */
.pfig { margin: 1.6em 0 1.8em; }
.pfig__plate { display: block; background: var(--plate); border: 1px solid var(--line-strong); border-radius: 6px; padding: 12px; overflow: hidden; }
.pfig__plate svg, .pfig__plate img { display: block; width: 100%; height: auto; }
.pfig__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pfig figcaption { margin-top: 10px; font: 15px/1.6 var(--tex); color: var(--ink-3); }
.pfig__n { margin-right: 8px; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

/* labels inside inline SVG figures */
.pfig svg text { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; fill: #4a413d; }
.pfig svg .m { font-family: var(--tex); font-style: italic; font-size: 17px; fill: #1c1518; }
.pfig svg .mu { font-family: var(--tex); font-style: normal; font-size: 16px; fill: #1c1518; }
.pfig svg .tick { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; fill: #6f655f; }
.pfig svg .lbl { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12.5px; fill: #6f655f; }
.pfig svg .acc { fill: #7a1f2b; }

/* ================= boxes ================= */
.pbox { margin: 1.4em 0 1.6em; padding: 14px 18px 13px; background: var(--card); border: 1px solid var(--line-strong); border-left: 4px solid var(--accent); border-radius: 6px; }
.pbox > :last-child { margin-bottom: 0; }
.pbox__t { display: block; margin-bottom: 6px; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pbox--ex { border-left-color: var(--tan-ink); background: var(--quote); }
.pbox--ex .pbox__t { color: var(--tan-ink); }
.paper__body .star { color: var(--accent); font-size: .8em; vertical-align: .25em; margin-left: 4px; }

/* ================= tables and references ================= */
.ptab { display: block; width: max-content; max-width: 100%; overflow-x: auto; margin: 1.2em 0 1.4em; border-collapse: collapse; font-size: 16px; }
.ptab th, .ptab td { padding: 6px 14px 6px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.ptab th { font: 500 11px var(--mono); letter-spacing: .04em; color: var(--muted); border-bottom-color: var(--line-strong); }
.prefs { padding-left: 1.6em; font-size: 16px; color: var(--ink-2); }
.prefs li { margin-bottom: .5em; }

@media (max-width: 960px) {
  .paper__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .paper__toc { position: static; margin-bottom: 30px; }
  .paper__toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 18px; }
}
@media (max-width: 640px) {
  .paper { margin-top: 56px; }
  .paper__abstract { font-size: 16px; padding: 14px 16px; }
  .paper__body { font-size: 17px; }
  .psec > h3 { font-size: 27px; gap: 10px; }
  .psec h4 { font-size: 21px; }
  .pfig__row { grid-template-columns: minmax(0, 1fr); }
  .pfig__plate { padding: 8px; }
}
@media print {
  .paper__toc { display: none; }
  .paper__grid { display: block; }
  .paper:not(.is-typeset) .paper__body { visibility: visible; }
}