:root {
  --bg: #fbfaf7; --surface: #ffffff; --ink: #1d1d1f; --muted: #5d5d66; --rule: #e3e0d8;
  --accent: #4a90d9; --accent-ink: #2667a8; --accent-soft: #edf5fd; --accent-fill: #d4e8fb; --top: #c8642f; --top-soft: #fbe9df;
  --def: #4b5563; --def-bg: #eef0f3; --prov: #1f7a4d; --prov-bg: #e3f4ea;
  --here: #2667a8; --here-bg: #e3f0fc; --heur: #8a6100; --heur-bg: #fbf1d9;
  --open: #a3324a; --open-bg: #f9e3e8; --node: #ffffff; --ball: rgba(74, 144, 217, .10);
}
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.62 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
main { max-width: 800px; margin: 0 auto; padding: 28px 16px 72px; }
h1 { font-size: 1.75rem; line-height: 1.25; margin: 4px 0 6px; }
h2 { font-size: 1.3rem; margin: 44px 0 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
h3 { font-size: 1.05rem; margin: 26px 0 8px; }
.sub { color: var(--muted); margin: 0 0 22px; }
a { color: var(--accent-ink); }
[id] { scroll-margin-top: 104px; }
code { font-size: .88em; }
.sans, nav, button, label, .tag, .legend, table, .ctrl, .readout, .kicker, .pager { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }

/* ---------- nav: one row of tabs; a group tab opens a second row ---------- */
nav.site { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--rule); }
nav.site .inner { max-width: 1100px; margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: .85rem; }
nav.site a, nav.site button.grp { text-decoration: none; color: var(--muted); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
nav.site button.grp { font: inherit; border: 0; background: none; cursor: pointer; }
nav.site a:hover, nav.site button.grp:hover { color: var(--ink); background: var(--accent-soft); }
nav.site a.here { color: var(--ink); background: var(--accent-fill); }
nav.site button.grp.here { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent-fill); }
nav.site button.grp[aria-expanded="true"] { background: var(--accent-soft); color: var(--ink); }
nav.site .car { display: inline-block; font-size: .8em; transition: transform .15s; }
nav.site button.grp[aria-expanded="true"] .car { transform: rotate(180deg); }
nav.site a.home { font-weight: 700; color: var(--ink); }
nav.site .subrow { border-top: 1px dashed var(--rule); background: var(--accent-soft); }
nav.site .subrow .inner { max-width: none; padding-top: 6px; padding-bottom: 6px; }
nav.site .subrow a { background: var(--bg); }
nav.site .subrow a.here { background: var(--accent-fill); }
@media (max-width: 640px) {
  nav.site > .inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
}
.kicker { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: .92rem; }
.pager a { text-decoration: none; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 8px; max-width: 48%; }
.pager a:hover { border-color: var(--accent); }

/* ---------- blocks ---------- */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; margin: 16px 0; }
.tag { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: 1px 8px; border-radius: 999px; vertical-align: 2px; margin-right: 6px; white-space: nowrap; }
.t-def { color: var(--def); background: var(--def-bg); }
.t-prov { color: var(--prov); background: var(--prov-bg); }
.t-here { color: var(--here); background: var(--here-bg); }
.t-heur { color: var(--heur); background: var(--heur-bg); }
.t-open { color: var(--open); background: var(--open-bg); }
.legend { font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; }
.claim { border-left: 3px solid var(--rule); padding: 4px 0 4px 14px; margin: 16px 0; }
.claim.def { border-color: var(--def); } .claim.prov { border-color: var(--prov); }
.claim.here { border-color: var(--here); } .claim.heur { border-color: var(--heur); } .claim.open { border-color: var(--open); }
.inst { background: var(--accent-soft); border-radius: 8px; padding: 10px 14px; margin: 10px 0 18px; font-size: .96rem; }
.inst .kicker { color: var(--accent-ink); }
.quote { border-left: 3px solid var(--muted); padding: 6px 14px; margin: 12px 0; font-style: italic; color: var(--ink); background: var(--surface); }
.quote .src { font-style: normal; font-size: .82rem; color: var(--muted); font-family: -apple-system, BlinkMacSystemFont, sans-serif; display: block; margin-top: 4px; }
.small { font-size: .88rem; color: var(--muted); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; margin: 10px 0; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
.tablewrap { overflow-x: auto; }
ol.steps > li { margin: 10px 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .two { grid-template-columns: 1fr; } }
figure { margin: 18px 0; }
figure svg { width: 100%; max-width: 250px; height: auto; display: block; margin: 0 auto; }
figcaption { font-size: .88rem; color: var(--muted); margin-top: 6px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }

/* ---------- timeline ---------- */
.tl { position: relative; margin: 20px 0; padding-left: 26px; }
.tl::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--rule); }
.tl .ev { position: relative; margin: 0 0 26px; }
.tl .ev::before { content: ""; position: absolute; left: -24px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); }
.tl .ev.main::before { background: var(--accent); border-color: var(--accent); width: 16px; height: 16px; left: -26px; top: 5px; }
.tl .yr { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; color: var(--accent-ink); font-size: .9rem; }
.tl .ev.ctx .yr { color: var(--muted); }
.tl dl { margin: 6px 0 0; }
.tl dt { font-weight: 600; font-size: .82rem; color: var(--muted); font-family: -apple-system, BlinkMacSystemFont, sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.tl dd { margin: 0 0 8px; }

/* ---------- widgets ---------- */
.widget svg { width: 100%; height: auto; display: block; max-width: 560px; margin: 0 auto; touch-action: manipulation; }
.ctrl { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: .88rem; margin-bottom: 8px; }
.ctrl button, button.go { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; font-size: .86rem; }
.ctrl button:hover { border-color: var(--accent); }
.readout { font-size: .92rem; color: var(--muted); margin-top: 8px; min-height: 3em; }
.readout b { color: var(--ink); }
.readout .warn { color: var(--open); }

/* ---------- questions ---------- */
.q .kind { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.opts label { display: block; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; margin: 6px 0; cursor: pointer; font-size: .95rem; }
.opts label:hover { border-color: var(--accent); }
.opts input { margin-right: 8px; }
textarea { width: 100%; min-height: 84px; font: inherit; font-size: .95rem; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); }
button.go { margin-top: 8px; border-color: var(--accent); background: var(--accent-fill); color: var(--ink); }
button.go:disabled { opacity: .4; cursor: not-allowed; }
.fb { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: var(--accent-soft); }
.fb.show { display: block; }
.fb .verdict { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; }

/* ---------- collapsible sections ---------- */
details.step > summary { list-style: none; cursor: pointer; }
details.step > summary::-webkit-details-marker { display: none; }
details.step > summary h2 { margin: 30px 0 10px; }
details.step > summary h2::before { content: "▸"; color: var(--accent); font-size: .85em; display: inline-block; width: 1em; margin-right: 4px; transition: transform .15s; }
details.step[open] > summary h2::before { transform: rotate(90deg); }
details.step > summary:hover h2 { color: var(--accent-ink); }
details.step > summary h2 .n { color: var(--muted); font-weight: 400; margin-right: 6px; }

/* ---------- per-page roadmap (dependency graph) ---------- */
.roadmap { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px 10px; margin: 8px 0 18px; }
.rm-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rm-head .kicker { color: var(--accent-ink); }
.rm-head button { font: inherit; font-size: .8rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--rule); background: var(--bg); color: var(--muted); cursor: pointer; margin-left: 4px; }
.rm-head button:hover { border-color: var(--accent); color: var(--ink); }
.roadmap svg { width: 100%; max-width: none; height: auto; display: block; }
.roadmap .legend { margin-top: 6px; font-size: .78rem; }
.rm .nd { cursor: pointer; }
.rm .nd rect { stroke-width: 1.4; transition: stroke-width .12s; }
.rm .nd:hover rect, .rm .nd:focus rect { stroke-width: 2.8; }
.rm .nd:focus { outline: none; }
.rm .e { fill: none; stroke: var(--muted); stroke-opacity: .45; stroke-width: 1.4; }
.rm .e.hi { stroke: var(--accent); stroke-opacity: 1; stroke-width: 2.4; }
.rm text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; fill: var(--ink); pointer-events: none; }
.symbols { margin: 10px 0 0; padding-left: 18px; font-size: .92rem; }
.symbols li { margin: 3px 0; }
.dont { border-left: 3px solid var(--top); background: var(--top-soft); border-radius: 0 8px 8px 0; padding: 8px 14px; margin: 14px 0; font-size: .95rem; }
.dont .kicker { color: var(--top); }
img.fig { width: 100%; height: auto; display: block; border-radius: 8px; }
:root { --main: var(--accent-ink); --main-bg: var(--accent-fill); --ctx: var(--def); --ctx-bg: var(--def-bg); --q: var(--heur); --q-bg: var(--heur-bg); }
.t-main { color: var(--main); background: var(--main-bg); } .t-ctx { color: var(--ctx); background: var(--ctx-bg); } .t-q { color: var(--q); background: var(--q-bg); }
.rm text.dsc { fill: var(--muted); }
dl.kv { display: grid; grid-template-columns: 112px 1fr; gap: 6px 14px; margin: 0; }
dl.kv dt { font-weight: 600; color: var(--muted); }
dl.kv dd { margin: 0; }
@media (max-width: 520px) { dl.kv { grid-template-columns: 1fr; gap: 0; } dl.kv dd { margin-bottom: 8px; } }
.summary { border-left: 3px solid var(--accent); }
.summary ul { margin: 6px 0 0; padding-left: 18px; }
.summary li { margin: 4px 0; }
details.sub > summary { cursor: pointer; color: var(--accent-ink); font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: .9rem; margin: 10px 0; }
.tl .yr .n { color: var(--muted); font-weight: 400; margin-right: 6px; }

.katex { font-size: 1.1em; }
.lat figure svg { max-width: 360px; }
.lat figure { margin: 8px 0; }
.ray th, .ray td { text-align: center; }
.flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 4px; margin: 14px 0; font-size: .95rem; }
.flow .bx { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 10px; text-align: center; }
.flow .bx small { display: block; color: var(--muted); font-size: .78rem; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.flow .ar { color: var(--muted); font-size: 1.1rem; }
.flow .bx.hi { border-color: var(--accent); background: var(--accent-soft); }
figure.wide svg { max-width: 600px; }
.kicker .katex { text-transform: none; }
/* ---------- lattice pictures ---------- */
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
@media (max-width: 640px) { .three { grid-template-columns: 1fr; } }
figure.latpic svg, figure.latkey svg { max-width: 300px; }
.three figure.latpic svg { max-width: 240px; }
.widget .pic svg { max-width: 420px; }
.widget .lt { max-width: 440px; }
/* "?": an expandable proof attached to a sentence */
details.why { margin: 4px 0 14px; }
details.why > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: .88rem; }
details.why > summary::-webkit-details-marker { display: none; }
details.why > summary .qm { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; border: 1.5px solid var(--accent); font-weight: 700; }
details.why[open] > summary .qm { background: var(--accent-fill); }
details.why > .body { border-left: 3px solid var(--here); padding: 4px 0 4px 14px; margin: 8px 0 0; }
details.why > .body ol { margin: 4px 0; padding-left: 20px; }
details.why > .body li { margin: 4px 0; }

/* ---------- knowls: a dotted term opens its definition in place ---------- */
button.kn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
button.kn:hover, button.kn[aria-expanded="true"] { color: var(--accent-ink); }
button.kn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.knowl { background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; padding: 6px 12px; margin: 6px 0 10px; font-size: .92rem; color: var(--ink); }
li .knowl, .claim .knowl { margin: 6px 0 2px; }

/* ---------- a vertical pipeline: boxes joined by labelled down-arrows ---------- */
.vflow { display: flex; flex-direction: column; align-items: center; margin: 14px 0; font-size: .95rem; }
.vflow .bx { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 14px; text-align: center; min-width: 240px; }
.vflow .bx small { display: block; color: var(--muted); font-size: .78rem; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.vflow .bx.hi { border-color: var(--accent); background: var(--accent-soft); }
.vflow .ar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; max-width: 560px; color: var(--muted); padding: 2px 0; }
.vflow .ar > span:first-child { grid-column: 2; font-size: 1.15rem; }
.vflow .ar > span + span { grid-column: 3; padding-left: 12px; font-size: .84rem; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ctrl button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-fill); }