:root {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --text: #1c1b19;
  --muted: #6b6862;
  --accent: #3774a1;
  --border: #e4e1da;
  --guide: #5a5750;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 24px rgba(0,0,0,.04);
  --maxw: 720px;
}
:root[data-theme="dark"] {
  --bg: #16181d;
  --surface: #1e2127;
  --text: #e6e3dc;
  --muted: #9a978f;
  --accent: #7fb1d6;
  --border: #2c2f36;
  --guide: #8d8a82;
  --shadow: 0 1px 3px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 19px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

/* top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  padding: .7rem 1.2rem;
  display: flex; align-items: center; gap: 1rem;
}
.brand {
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-weight: 700; letter-spacing: .02em; color: var(--text);
}
/* shared cross-page nav group (matches the .f3-bar version on slides/figure) */
.topbar .site-nav { display: flex; gap: .4rem; flex-wrap: wrap; }
.topbar-spacer { flex: 1; }
.topbar .site-nav a {
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: .82rem; line-height: 1.2; text-decoration: none;
  padding: .42rem .7rem; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
}
.topbar .site-nav a:hover { color: var(--text); border-color: var(--accent); }
.topbar .site-nav a.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Paper links carry the full (long) paper title; cap each pill and ellipsise so
   the bar stays tidy. Full title remains in the tooltip. Applies on every page
   (.topbar / .f3-bar share this id="siteNav" group). */
.site-nav a[data-key^="paper"] {
  max-width: 16rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle;
}
@media (max-width: 900px) {
  .site-nav a[data-key^="paper"] { max-width: min(13rem, 56vw); }
  .topbar .site-nav a,
  .fig-bar a,
  .fig-bar button,
  .fig-bar .fig-link-self {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-top: .45rem;
    padding-bottom: .45rem;
  }
}

/* On the subpage bars (slides/figure) the nav group can wrap below a crowded
   first row; keep it pinned to the right edge wherever it lands. */
.f3-bar .site-nav { margin-left: auto; }
.theme-toggle {
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  width: 2.25rem; height: 2.25rem; min-width: 2.25rem; min-height: 2.25rem;
  border-radius: 50%; cursor: pointer; font-size: 1rem;
}
.theme-toggle:hover { color: var(--text); }

/* layout */
.layout {
  max-width: 1180px; margin: 0 auto; padding: 0 1.2rem;
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2.4rem;
}
.toc {
  position: sticky; top: 4rem; align-self: start;
  max-height: calc(100vh - 5rem); overflow-y: auto;
  padding: 1.4rem 0; font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: .82rem; line-height: 1.5;
}
.toc h2 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .7rem; }
.toc a {
  display: block; color: var(--muted); text-decoration: none;
  padding: .2rem 0 .2rem .6rem; border-left: 2px solid transparent;
}
.toc a:hover { color: var(--text); }
.toc a.sub { padding-left: 1.5rem; font-size: .96em; }
.toc a.active { color: var(--accent); border-left-color: var(--accent); }

/* article */
.article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 3rem clamp(1.2rem, 4vw, 3.4rem);
  margin: 1.6rem 0 4rem;
  max-width: calc(var(--maxw) + 6.8rem);
}
.article:focus { outline: none; }
/* long unbreakable tokens (URLs in quotes, formulas) wrap instead of widening the page */
.article { overflow-wrap: break-word; }
.article a {
  overflow-wrap: anywhere;
  text-underline-offset: .13em;
}

/* Long-form article elements used by the Formalization page (and harmless
   site-wide): title, quotes, code, rules. The digitized papers don't emit
   these; the markdown-rendered article does. */
.article h1 { font-size: 1.55rem; line-height: 1.3; margin: 0 0 1rem; }
.article blockquote {
  border-left: 3px solid var(--accent, #2a6fb0);
  margin: .9rem 0; padding: .2rem 1.1rem; color: var(--muted);
}
.article blockquote p { margin: .3rem 0; }
.article pre {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--border); border-radius: 6px;
  padding: .7rem .9rem; overflow-x: auto;
  font-size: .82rem; line-height: 1.45;
}
.article code {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 3px; padding: .05rem .3rem; font-size: .86em;
  overflow-wrap: anywhere;
}
.article pre code { background: none; padding: 0; }
.article hr { border: none; border-top: 1px solid var(--border); margin: 1.8rem 0; }
.paper-head { margin-bottom: 2.4rem; border-bottom: 1px solid var(--border); padding-bottom: 1.6rem; }
.paper-head h1 {
  font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.18; margin: 0 0 .8rem;
  letter-spacing: -.01em;
}
.paper-head .authors { color: var(--text); font-size: 1.02rem; margin: 0 0 .35rem; }
.paper-head .meta {
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: .85rem; color: var(--muted); display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
}
.paper-head .meta a { color: var(--accent); text-decoration: none; }
.paper-head .meta a:hover { text-decoration: underline; }
.interactive-index {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
}
.interactive-index h2 {
  margin: 0 0 .65rem;
  font-size: .78rem;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.interactive-intro {
  margin: -.35rem 0 .75rem;
  color: var(--muted);
  font-size: .88rem;
}
.interactive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}
.interactive-card {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  min-height: 4.2rem;
  padding: .7rem .8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, var(--accent) 4%);
  color: var(--text);
}
.interactive-card:hover,
.interactive-card:focus-within { border-color: var(--accent); }
.interactive-main {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  color: inherit;
  text-decoration: none;
}
.interactive-top {
  font-size: .72rem;
  line-height: 1.2;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.interactive-card b {
  font-size: .9rem;
  line-height: 1.25;
}
.interactive-entries {
  font-size: .78rem;
  line-height: 1.35;
  color: var(--muted);
}
.interactive-links {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .45rem;
}
.interactive-links a {
  color: var(--accent);
  text-decoration: none;
}
.interactive-links a:hover { text-decoration: underline; }

.article h2, .article h3 {
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  line-height: 1.25; scroll-margin-top: 4.5rem; letter-spacing: -.01em;
}
.article h2 { font-size: 1.5rem; margin: 2.6rem 0 1rem; }
.article h3 { font-size: 1.18rem; margin: 2rem 0 .8rem; color: var(--text); }
.article p { margin: 0 0 1.15rem; text-align: justify; hyphens: auto; }
.article p.standalone-caption { font-size: .9rem; color: var(--muted); font-style: italic; }
.article sub, .article sup { font-size: .72em; line-height: 0; }

figure {
  margin: 2rem 0; text-align: center;
}
figure img {
  max-width: 100%; height: auto; border-radius: 8px;
  border: 1px solid var(--border); background: #fff;
}
figure figcaption {
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: .85rem; color: var(--muted); line-height: 1.5;
  margin-top: .7rem; text-align: left;
}
figcaption .figlabel { font-weight: 700; color: var(--text); }

/* digitized figures are clickable: open the interactive viewer */
figure.digitized .figure-link {
  position: relative; display: inline-block; line-height: 0;
  border-radius: 8px; cursor: pointer; text-decoration: none;
}
figure.digitized .figure-link img { transition: filter .15s; }
figure.digitized .figure-link:hover img { filter: brightness(.93); }
.figure-badge {
  position: absolute; right: .6rem; bottom: .6rem;
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: .76rem; font-weight: 600; line-height: 1.2;
  background: var(--accent); color: #fff;
  padding: .38rem .62rem; border-radius: 999px;
  box-shadow: var(--shadow); opacity: .96; transition: opacity .15s;
}
figure.digitized .figure-link:hover .figure-badge,
figure.digitized .figure-link:focus-visible .figure-badge { opacity: 1; }

/* tables */
.table-wrap { margin: 2rem 0; overflow-x: auto; }
.table-wrap table {
  border-collapse: collapse; width: 100%;
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: .82rem; line-height: 1.45;
}
.table-wrap th, .table-wrap td {
  border: 1px solid var(--border);
  padding: .5rem .6rem; text-align: left; vertical-align: top;
}
.table-wrap thead th {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--text); font-weight: 700;
}
.table-wrap tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
}
.table-wrap figcaption {
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: .85rem; color: var(--muted); margin-top: .7rem; text-align: left;
}
.table-wrap figcaption .figlabel { font-weight: 700; color: var(--text); }

/* floating buttons */
.totop {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 30;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow); cursor: pointer; font-size: 1.1rem;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.totop.show { opacity: 1; pointer-events: auto; }

/* responsive */
@media (max-width: 900px) {
  /* minmax(0,·) so long unbreakable content (code blocks, tables) scrolls
     inside the article instead of blowing the column out past the viewport */
  .layout { grid-template-columns: minmax(0, 1fr); }
  .toc {
    position: static; max-height: 11rem; overflow: auto;
    padding: 1rem 0; border-bottom: 1px solid var(--border);
  }
  .toc a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding-top: .65rem;
    padding-bottom: .65rem;
  }
  .toc a.sub { display: none; }
  body { font-size: 18px; }
  .article { padding: 1.8rem 1.3rem; border-radius: 10px; }
  .article p { text-align: left; }
  .interactive-grid { grid-template-columns: 1fr; }
  .interactive-card {
    min-height: 2.75rem;
    padding: .75rem .85rem;
  }
  .interactive-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
  }
  .figure-badge { opacity: 1; }
  .article pre {
    max-width: 100%;
    padding: .55rem .65rem;
    font-size: .76rem;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap {
    max-width: 100%;
    margin: 1.25rem 0;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table {
    width: max-content;
    min-width: 100%;
    font-size: .76rem;
  }
  .table-wrap th, .table-wrap td { padding: .38rem .45rem; }
}

/* ===== Shared reconstruction table + mechanism legend =====
   The multinion multiplication tables and their per-cell mechanism coloring,
   used by the flat figure viewer (figure.html), the recursive generator demo
   (nested.html), and the slide/print viewer (slides.html). figure.html and
   nested.html still carry their own inline copies (page-local layout); this is
   the canonical version slides.html consumes. */
.rc-grid { overflow-x: auto; }
table.rc { border-collapse: collapse; font: 12px ui-monospace, "SF Mono", Menlo, monospace; }
table.rc th, table.rc td {
  border: 1px solid var(--border); width: 1.9rem; height: 1.6rem;
  text-align: center; padding: 0; white-space: nowrap;
}
table.rc th {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--text); font-weight: 700; position: sticky;
}
table.rc thead th { top: 0; z-index: 2; }
table.rc tbody th { left: 0; z-index: 1; }
table.rc thead th.corner { left: 0; z-index: 3; }
table.rc td b { font-weight: 700; }
table.rc td.blank {
  background: repeating-linear-gradient(45deg,
    transparent, transparent 4px,
    color-mix(in srgb, var(--muted) 22%, transparent) 4px,
    color-mix(in srgb, var(--muted) 22%, transparent) 5px);
}
table.rc td.rc-ok { background: color-mix(in srgb, #2e8b57 16%, transparent); }
table.rc td.rc-gauge { background: color-mix(in srgb, #2a6fb0 18%, transparent); }
table.rc td.rc-seed { background: color-mix(in srgb, #2a6fb0 18%, transparent); }
table.rc td.rc-family { background: color-mix(in srgb, #11a0a0 18%, transparent); }
table.rc td.rc-open { background: color-mix(in srgb, #c77d0a 24%, transparent); }
table.rc td.rc-read { background: color-mix(in srgb, #8a5fc0 22%, transparent); }
table.rc td.rc-miss { background: color-mix(in srgb, #d22222 24%, transparent); }
table.rc td.rc-miss b { color: #d22222; }
/* a recorded-datum cell with his value applied: keep the tint, add a dashed outline */
table.rc td.rc-applied { outline: 2px dashed var(--text); outline-offset: -2px; }

.rc-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .5rem 0 0;
  font: .76rem ui-sans-serif, system-ui, sans-serif; color: var(--muted); }
.rc-key span { display: inline-flex; align-items: center; gap: .35rem; }
.rc-key i { width: 1rem; height: .9rem; border-radius: 3px; border: 1px solid var(--border); display: inline-block; }
.rc-key i.k-ok { background: color-mix(in srgb, #2e8b57 16%, transparent); }
.rc-key i.k-gauge { background: color-mix(in srgb, #2a6fb0 18%, transparent); }
.rc-key i.k-seed { background: color-mix(in srgb, #2a6fb0 18%, transparent); }
.rc-key i.k-family { background: color-mix(in srgb, #11a0a0 18%, transparent); }
.rc-key i.k-open { background: color-mix(in srgb, #c77d0a 24%, transparent); }
.rc-key i.k-read { background: color-mix(in srgb, #8a5fc0 22%, transparent); }
.rc-key i.k-miss { background: color-mix(in srgb, #d22222 24%, transparent); }

/* ===== Figure-page chrome (rendered by js/figure-shell.js) ===== */
.fig-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .7rem 1.2rem; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
}
.fig-bar h1 { font-size: 1rem; margin: 0; font-weight: 700; color: var(--text); }
.fig-bar .spacer { flex: 1; }
.fig-bar a, .fig-bar button, .fig-bar .fig-link-self {
  font: inherit; font-size: .82rem; color: var(--muted);
  border: 1px solid var(--border); background: transparent;
  border-radius: 999px; padding: .35rem .7rem; cursor: pointer; text-decoration: none;
}
.fig-bar a:hover, .fig-bar button:hover { color: var(--text); border-color: var(--accent); }
.fig-bar .fig-link-self { opacity: .5; cursor: default; }

.fig-wrap { padding: 1.2rem; }
.fig-original { margin: 0 0 1.4rem; max-width: 460px; }
.fig-original img {
  width: 100%; height: auto; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; cursor: zoom-in;
}
.fig-original figcaption { font: .8rem ui-sans-serif, system-ui, sans-serif; color: var(--muted); margin-top: .5rem; }