/* ── Landing overrides ────────────────────────────────────────────── */

html:has(.paper) .site-main {
  padding-top: 0;
}

/* ── Paper layout ────────────────────────────────────────────────── */

.paper {
  max-width: 820px;
  margin: 0 auto;
  padding: 80px 24px 120px;
}

/* ── Title block ─────────────────────────────────────────────────── */

.paper-header {
  text-align: center;
  margin-bottom: 0;
}

.paper-project {
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1;
}

.paper-title {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

/* ── Horizontal rule ─────────────────────────────────────────────── */

.paper-rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 36px 0;
}

/* ── Sections ────────────────────────────────────────────────────── */

.paper-section {
  margin: 0 0 36px;
}

.paper-section:last-child {
  margin-bottom: 0;
}

.paper-heading {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 16px;
}

.paper-heading-label {
  font-style: italic;
  font-weight: 300;
}

.paper-heading-marker {
  color: var(--ink-muted);
}

.paper-body {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-muted);
  line-height: 1.8;
  margin: 0;
  text-align: justify;
  hyphens: auto;
}

.paper-body + .paper-body {
  margin-top: 14px;
}

/* ── Subsections ────────────────────────────────────────────────── */

.paper-subsection {
  margin: 28px 0 0;
}

.paper-subsection:first-child {
  margin-top: 0;
}

.paper-subheading {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
}

/* ── Figure caption ─────────────────────────────────────────────── */

.paper-caption-label {
  font-weight: 500;
  color: var(--ink-muted);
}

/* ── Figures (shared) ────────────────────────────────────────────── */

.fig-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-1);
  margin-top: 20px;
}

.fig-bar {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.fig-bar-label {
  font-size: 11px;
  color: var(--ink-muted);
}

/* ── Figure 2: Commitment ────────────────────────────────────────── */

.fig-commit {
  display: flex;
  flex-direction: column;
}

/* ── Top: Schema table ── */

.fig-commit-table-section {
  border-bottom: 1px solid var(--line);
}

.fig-commit-table-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.fig-commit-table-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.fig-commit-schema-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

.fig-commit-schema-table thead {
  background: var(--bg-2);
}

.fig-commit-schema-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 400;
  vertical-align: bottom;
  border-bottom: 1px solid var(--line);
}

.fig-commit-th-row {
  width: 36px;
}

.fig-commit-col-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fig-commit-col-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}

.fig-commit-col-type {
  font-size: 11px;
  color: var(--ink-muted);
}

.fig-commit-fe-blocks {
  display: flex;
  gap: 2px;
  margin: 3px 0 1px;
}

.fig-commit-fe-block {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.fe-bool {
  background: var(--accent);
  opacity: 0.7;
}

.fe-u64 {
  background: var(--ok);
  opacity: 0.7;
}

.fe-digest {
  background: #a855f7;
  opacity: 0.6;
}

.fig-commit-fe-label {
  font-size: 10px;
  color: var(--ink-disabled);
}

.fig-commit-schema-table td {
  padding: 5px 12px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
}

.fig-commit-row-id {
  color: var(--ink-disabled);
  font-size: 11px;
}

.fig-commit-val-bool {
  color: var(--accent);
}

.fig-commit-val-num {
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}

.fig-commit-val-hash {
  color: #a855f7;
  font-size: 11px;
}

/* ── Middle: Divider ── */

.fig-commit-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.fig-commit-arrows {
  display: flex;
  gap: 48px;
  font-size: 14px;
  color: var(--ink-disabled);
  line-height: 1;
}

.fig-commit-arrow {
  opacity: 0.6;
}

.fig-commit-divider-label {
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

/* ── Bottom: SSMC vs SMT compare ── */

.fig-commit-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.fig-commit-card {
  display: flex;
  flex-direction: column;
}

.fig-commit-card:first-child {
  border-right: 1px solid var(--line);
}

.fig-commit-card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.fig-commit-card-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.fig-tag-ssmc {
  color: var(--accent);
}

.fig-tag-smt {
  color: var(--ok);
}

.fig-commit-card-size {
  font-size: 11px;
  color: var(--ink-disabled);
  margin-left: auto;
}

/* ── SSMC hash chain ── */

.fig-commit-chain {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
  min-height: 80px;
}

.fig-commit-chain-node {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  font-size: 12px;
  white-space: nowrap;
}

.fig-chain-key {
  color: var(--ink);
  font-weight: 500;
}

.fig-chain-sep {
  color: var(--ink-disabled);
  margin: 0 1px;
}

.fig-chain-val {
  color: var(--ink-muted);
}

.fig-commit-chain-arrow {
  color: var(--ink-disabled);
  font-size: 13px;
  flex-shrink: 0;
}

.fig-commit-chain-com {
  border-color: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-bg);
}

/* ── SMT tree (nested CSS connectors) ── */

.fig-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 8px 14px;
  min-height: 80px;
  flex: 1;
}

/* Vertical stem from parent node to children bar */
.fig-tree-stem {
  width: 0;
  height: 16px;
  border-left: 1px solid var(--line-strong);
}

/* Row of children — ::before draws the horizontal bar */
.fig-tree-level {
  display: flex;
  align-self: stretch;
  position: relative;
}

.fig-tree-level::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  border-top: 1px solid var(--line-strong);
}

/* Single subtree column — ::before draws vertical stub from bar to node */
.fig-tree-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  padding-top: 16px;
}

.fig-tree-sub::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  height: 16px;
  border-left: 1px solid var(--line-strong);
}

/* ── Nodes ── */

.fig-tree-nd {
  position: relative;
  z-index: 1;
}

.fig-tree-root {
  padding: 3px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ok);
  background: var(--ok-dim);
  border: 1px solid var(--ok);
}

.fig-tree-inner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--ink-muted);
  background: var(--bg-2);
}

.fig-tree-leaf {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.fig-tree-data {
  background: var(--ink);
}

.fig-tree-empty {
  border: 1px dashed var(--ink-disabled);
}

/* Leaf labels */
.fig-tree-tag {
  font-size: 9px;
  color: var(--ink-muted);
  margin-top: 4px;
}

.fig-tree-tag-dim {
  color: var(--ink-disabled);
}

/* ── Card operations ── */

.fig-commit-card-ops {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.fig-commit-op-cost {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-muted);
}

.fig-commit-detail-big {
  font-weight: 600;
  color: var(--ink);
}

/* ── Footer ── */

.fig-commit-footer {
  padding: 10px 16px;
  font-size: 11px;
  color: var(--ink-disabled);
  text-align: center;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

/* ── Figure 2: Semantic animations ──────────────────────────────────
 *
 *  Phase 1 (0–500ms):     Schema table — header, columns, FE blocks, data rows
 *  Phase 2 (570–730ms):   Independence arrows drop, label fades
 *  Phase 3 (800–1100ms):  Card headers, SSMC chain (left→right), SMT tree (top→down)
 *  Phase 4 (1200–1350ms): Cost summaries + footer
 *
 *  Build delays via --d (ms).
 */

/* Fade — headers, labels, rows, cost, footer */
.fig-enc-fade {
  opacity: 0;
  animation: fig-enc-fade-in 250ms ease-out forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes fig-enc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* FE blocks — grow from zero width to show encoding width */
.fig-enc-grow {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  animation: fig-enc-grow-in 300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes fig-enc-grow-in {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* Independence arrows — drop from above */
.fig-enc-drop {
  opacity: 0;
  transform: translateY(-8px);
  animation: fig-enc-drop-in 250ms ease-out forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes fig-enc-drop-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* SSMC chain nodes — slide in from left */
.fig-enc-chain {
  opacity: 0;
  transform: translateX(-10px);
  animation: fig-enc-chain-in 280ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes fig-enc-chain-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* SMT tree nodes — scale in from center */
.fig-enc-tree {
  opacity: 0;
  transform: scale(0);
  animation: fig-enc-tree-in 250ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes fig-enc-tree-in {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* Tree stems — grow downward */
.fig-enc-stem {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top center;
  animation: fig-enc-stem-in 200ms ease-out forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes fig-enc-stem-in {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

/* Hover replay — duplicate keyframes restart all animations */
.fig-enc-replay .fig-enc-fade  { animation-name: fig-enc-fade-in-r; }
.fig-enc-replay .fig-enc-grow  { animation-name: fig-enc-grow-in-r; }
.fig-enc-replay .fig-enc-drop  { animation-name: fig-enc-drop-in-r; }
.fig-enc-replay .fig-enc-chain { animation-name: fig-enc-chain-in-r; }
.fig-enc-replay .fig-enc-tree  { animation-name: fig-enc-tree-in-r; }
.fig-enc-replay .fig-enc-stem  { animation-name: fig-enc-stem-in-r; }

@keyframes fig-enc-fade-in-r {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fig-enc-grow-in-r {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

@keyframes fig-enc-drop-in-r {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fig-enc-chain-in-r {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fig-enc-tree-in-r {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes fig-enc-stem-in-r {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}


/* ── Figure 3: Pipeline header ──────────────────────────────────── */

.fig-pipeline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.fig-pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fig-pipeline-box {
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  white-space: nowrap;
}

.fig-pipeline-boundary .fig-pipeline-box {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: var(--accent-bg);
}

.fig-pipeline-result .fig-pipeline-box {
  border-color: var(--ok);
  color: var(--ok);
  background: var(--ok-dim);
}

.fig-pipeline-arrow {
  color: var(--ink-disabled);
  font-size: 14px;
  padding: 6px 10px 0;
}

.fig-pipeline-sub {
  font-size: 10px;
  color: var(--ink-disabled);
}

/* ── Figure 3: Compiler comparison (vertical) ──────────────────── */

.fig-compiler-section {
  border-top: 1px solid var(--line);
}

.fig-compiler-section-head {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.fig-head-without {
  color: var(--ink-disabled);
}

.fig-head-with {
  color: var(--ok);
}

/* ── Without: source + exec trace + sorted trace ── */

.fig-compiler-split {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
}

.fig-compiler-src {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.fig-compiler-src-code {
  padding: 14px 16px;
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre;
}

.fig-compiler-trace {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fig-compiler-trace + .fig-compiler-trace {
  border-left: 1px solid var(--line);
}

.fig-compiler-trace-body {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
}

/* Shared column bar (source + trace headers) */

.fig-compiler-col-bar {
  padding: 6px 14px;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-disabled);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  white-space: nowrap;
}

/* Trace entries */

.fig-compiler-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 6px;
  border-left: 2px solid;
  font-size: 10px;
}

.fig-compiler-entry + .fig-compiler-entry {
  margin-top: 1px;
}

.fig-entry-state {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

.fig-entry-local {
  border-color: var(--line-strong);
  color: var(--ink-disabled);
}

.fig-entry-tau {
  min-width: 16px;
  text-align: right;
  font-size: 9px;
  opacity: 0.6;
}

.fig-entry-addr {
  min-width: 52px;
}

.fig-entry-op {
  color: inherit;
  opacity: 0.7;
}

/* ── Per-column shards (horizontal row) ── */

.fig-compiler-shards-row {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
}

.fig-compiler-shards-row > * {
  flex: 1;
}

.fig-compiler-shard {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.fig-compiler-shard-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-muted);
  padding: 5px 10px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}

.fig-compiler-shard-body {
  display: flex;
  flex-direction: column;
}

.fig-compiler-shard-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: 11px;
}

.fig-compiler-shard-entry + .fig-compiler-shard-entry {
  border-top: 1px solid var(--line);
}

.fig-shard-op {
  font-weight: 500;
  color: var(--accent);
  width: 40px;
}

.fig-shard-tau {
  color: var(--ink-disabled);
  font-size: 10px;
}

.fig-compiler-nf {
  font-size: 9px;
  font-weight: 600;
  color: var(--accent-dim);
  padding: 0 5px;
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1.6;
  margin-left: auto;
}

/* ── SSA aside ── */

.fig-compiler-ssa {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  opacity: 0.6;
}

.fig-compiler-ssa-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-disabled);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fig-compiler-ssa-ops {
  font-size: 11px;
  color: var(--ink-disabled);
}

.fig-compiler-ssa-note {
  font-size: 10px;
  color: var(--ink-disabled);
  font-style: italic;
}

/* ── Verdicts ── */

.fig-compiler-verdict {
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 500;
}

.fig-verdict-without {
  color: var(--ink-disabled);
}

.fig-verdict-with {
  color: var(--ok);
}

/* ── Summary bar ── */

.fig-compiler-summary {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-muted);
  background: var(--bg-2);
}

.fig-compiler-count {
  font-weight: 600;
}

.fig-count-bad,
.fig-count-good {
  color: var(--ink);
}

/* ── Figure 3: Semantic animations ──────────────────────────────────
 *
 *  Phase 1 (0–450ms):  Source + exec trace cascade (execution happening)
 *  Phase 2 (550–1200ms): Sorted entries settle from exec-order Y positions
 *  Phase 3 (1300ms):     "Without" verdict appears in red
 *  Phase 4 (1550–1900ms): "With" section rises in
 *  Phase 5 (2100ms):     Summary bar
 *
 *  All delays via --d custom property (ms). Sort offsets via --offset.
 */

/* Generic fade — headers, verdicts, labels */
.fig-fade {
  opacity: 0;
  animation: fig-fade-in 200ms ease-out forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes fig-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Exec trace entries — fast cascade, slight drop */
.fig-exec-in {
  opacity: 0;
  animation: fig-exec-appear 120ms ease-out forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes fig-exec-appear {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sorted entries — settle from original execution-order Y position.
 * --offset: row displacement (original_tau - sorted_idx).
 * All fire at the same --d, different --offset → simultaneous sort. */
.fig-sort-slide {
  opacity: 0;
  animation: fig-sort-settle 500ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes fig-sort-settle {
  from {
    opacity: 0.3;
    transform: translateY(calc(var(--offset, 0) * 19px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* "With" section — gentle rise (organized, clean) */
.fig-rise {
  opacity: 0;
  animation: fig-rise-in 350ms ease-out forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes fig-rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hover replay — duplicate keyframe names restart animations */
.fig-compiler-replay .fig-fade      { animation-name: fig-fade-in-r; }
.fig-compiler-replay .fig-exec-in   { animation-name: fig-exec-appear-r; }
.fig-compiler-replay .fig-sort-slide { animation-name: fig-sort-settle-r; }
.fig-compiler-replay .fig-rise      { animation-name: fig-rise-in-r; }

@keyframes fig-fade-in-r {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fig-exec-appear-r {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fig-sort-settle-r {
  from {
    opacity: 0.3;
    transform: translateY(calc(var(--offset, 0) * 19px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fig-rise-in-r {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Accessibility: disable motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .fig-fade,
  .fig-exec-in,
  .fig-sort-slide,
  .fig-rise,
  .fig-enc-fade,
  .fig-enc-grow,
  .fig-enc-drop,
  .fig-enc-chain,
  .fig-enc-tree,
  .fig-enc-stem {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ── Blockquote (thesis) ─────────────────────────────────────────── */

.paper-quote {
  margin: 32px 0 0;
  padding: 20px 24px;
  border-left: 2px solid var(--accent-dim);
  font-size: 13px;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  line-height: 1.8;
  background: var(--accent-bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Figure caption ──────────────────────────────────────────────── */

.paper-caption {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-disabled);
  line-height: 1.7;
  margin: 14px 0 0;
  text-align: center;
}

.paper-caption code {
  font-size: 12px;
  color: var(--ink-muted);
}

/* ── Table of contents ───────────────────────────────────────────── */

.paper-toc {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.paper-toc-entry {
  display: flex;
  align-items: baseline;
  gap: 0;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  transition: color 120ms ease;
}

.paper-toc-entry:first-child {
  border-top: 1px solid var(--line);
}

.paper-toc-entry:hover .paper-toc-label {
  color: var(--accent);
}

.paper-toc-num {
  font-size: 13px;
  color: var(--ink-disabled);
  width: 28px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.paper-toc-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: color 120ms ease;
}

.paper-toc-dots {
  flex: 1;
  margin: 0 12px;
  border-bottom: 1px dotted var(--line-strong);
  min-width: 24px;
  align-self: center;
  height: 0;
}

.paper-toc-desc {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-muted);
  flex-shrink: 0;
}

/* Smooth scroll for anchor links */
html:has(.paper) {
  scroll-behavior: smooth;
}

.paper-section[id] {
  scroll-margin-top: 24px;
}

/* ── Demo (figure) ───────────────────────────────────────────────── */

.paper-subsection .demo {
  margin-top: 20px;
}

.demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-1);
}

.demo-code {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.demo-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.demo-bar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}

.demo-bar-name {
  font-size: 11px;
  color: var(--ink-muted);
  margin-left: 4px;
}

.demo-src {
  padding: 16px;
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre;
  flex: 1;
}

.demo-right {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
}

.demo-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.demo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.demo-table thead {
  background: var(--bg-2);
}

.demo-table th {
  padding: 6px 12px;
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.demo-table td {
  padding: 5px 12px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.demo-table .row-id {
  color: var(--ink-muted);
  width: 48px;
}

.demo-table .val-changed {
  color: var(--accent);
  font-weight: 600;
  animation: value-flash 1s ease forwards;
  animation-delay: 1600ms;
}

@keyframes value-flash {
  0%   { background: transparent; }
  25%  { background: var(--accent-bg); }
  100% { background: transparent; }
}

.demo-exec {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}

.demo-exec-arrow {
  color: var(--ink-disabled);
  font-size: 14px;
}

.demo-exec-label {
  font-size: 12px;
  color: var(--ink-muted);
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}

.demo-proof {
  font-size: 12px;
  color: var(--ink-muted);
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.proof-check {
  color: var(--ok);
  font-weight: 700;
}

/* ── Staggered animation ─────────────────────────────────────────── */

.anim-d1,
.anim-d2,
.anim-d3,
.anim-d4,
.anim-d5 {
  opacity: 0;
  animation: slide-up 450ms ease-out forwards;
}

.anim-d1 { animation-delay: 100ms; }
.anim-d2 { animation-delay: 300ms; }
.anim-d3 { animation-delay: 900ms; }
.anim-d4 { animation-delay: 1400ms; }
.anim-d5 { animation-delay: 1900ms; }

/* Hover replay: .demo-replay class added via JS on mouseenter */
.demo-replay .anim-d1,
.demo-replay .anim-d2,
.demo-replay .anim-d3,
.demo-replay .anim-d4,
.demo-replay .anim-d5 {
  animation-name: slide-up-replay;
}

.demo-replay .val-changed {
  animation-name: value-flash-replay;
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-up-replay {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes value-flash-replay {
  0%   { background: transparent; }
  25%  { background: var(--accent-bg); }
  100% { background: transparent; }
}

/* ── 404 ─────────────────────────────────────────────────────────── */

.not-found {
  text-align: center;
  padding: 120px 20px;
}

.not-found h1 {
  font-size: 48px;
  font-weight: 300;
  color: var(--ink-disabled);
  margin: 0 0 8px;
}

.not-found p {
  color: var(--ink-muted);
  margin: 0 0 24px;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .paper {
    padding: 48px 20px 80px;
  }

  .paper-body {
    text-align: left;
    hyphens: none;
  }

  .paper-toc-dots {
    display: none;
  }

  .paper-toc-entry {
    flex-wrap: wrap;
    gap: 2px;
  }

  .paper-toc-desc {
    width: 100%;
    padding-left: 28px;
  }

  .demo {
    grid-template-columns: 1fr;
  }

  .demo-code {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .demo-src {
    max-height: 200px;
    overflow-y: auto;
  }

  .fig-commit-compare {
    grid-template-columns: 1fr;
  }

  .fig-commit-card:first-child {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .fig-commit-schema-table {
    table-layout: auto;
  }

  .fig-pipeline {
    flex-wrap: wrap;
    padding: 12px;
  }

  .fig-compiler-split {
    grid-template-columns: 1fr;
  }

  .fig-compiler-src {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .fig-compiler-trace + .fig-compiler-trace {
    border-left: none;
    border-top: 1px solid var(--line);
  }

  .fig-compiler-shards-row {
    flex-direction: column;
  }
}