/* The Small World — research paper landing */
:root {
  --paper: #fafaf7;
  --paper-2: #f3f1ea;
  --paper-rule: #e7e3d8;
  --ink: #1a1a1a;
  --ink-soft: #3a3a38;
  --ink-mute: #6b6a63;
  --ocean: #2d5a7c;
  --forest: #4a7c59;
  --ochre: #c9a961;
  --crimson: #8b3a3a;
  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Inter Tight", system-ui, -apple-system, sans-serif;
  --maxw: 1180px;
  --col: 680px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  font-feature-settings: "onum", "liga", "dlig";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* subtle paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,0.012) 0, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(0,0,0,0.015) 0, transparent 45%);
  mix-blend-mode: multiply;
  z-index: 1;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 48px; position: relative; z-index: 2; }

/* ============ MASTHEAD ============ */
.masthead {
  border-bottom: 1px solid var(--ink);
  padding: 18px 0 14px;
  position: sticky; top: 0;
  background: var(--paper);
  z-index: 50;
  backdrop-filter: blur(6px);
}
.masthead-inner {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  row-gap: 8px;
}
.masthead .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
.masthead .wordmark .wm-text { display: inline-block; }
.masthead .wordmark b { font-style: normal; font-weight: 600; }
.masthead .meta {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  display: flex; gap: 28px;
}
.masthead .meta a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.masthead .meta a:hover { border-color: var(--ocean); color: var(--ocean); }

/* ============ TITLE BLOCK ============ */
.paper-head { padding: 88px 0 48px; position: relative; }
.paper-head .vol {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; gap: 28px; margin-bottom: 28px;
}
.paper-head .vol span { display: inline-flex; align-items: center; gap: 8px; }
.paper-head .vol .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--forest); display: inline-block; }

.paper-head h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  max-width: 960px;
  text-wrap: balance;
}
.paper-head h1 em {
  font-style: italic;
  color: var(--ocean);
  font-weight: 400;
}
.paper-head .byline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.paper-head .affil {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Abstract */
.abstract {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  padding: 40px 0 56px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--paper-rule);
}
.abstract .lbl {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  padding-top: 6px;
}
.abstract p {
  margin: 0;
  font-size: 20px;
  line-height: 1.55;
  max-width: 680px;
  color: var(--ink);
}
.abstract p + p { margin-top: 16px; }
.abstract .keywords {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.abstract .keywords b { color: var(--ink); font-weight: 500; margin-right: 8px; }

/* ============ CLI TERMINAL HERO ============ */
.cli-hero { padding: 44px 0 32px; }
.cli-hero .prompt {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.cli-hero .prompt .caret {
  width: 8px; height: 14px; background: var(--ink);
  animation: blink 1.1s steps(2, end) infinite;
}
.cli-window {
  background: #0e1417;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  color: #d8d2c0;
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
  box-shadow: 0 40px 60px -30px rgba(0,0,0,0.22);
}
.cli-titlebar {
  background: #161d22;
  border-bottom: 1px solid #222b31;
  padding: 8px 14px;
  display: flex; align-items: center; gap: 14px;
  font-size: 10px; letter-spacing: 0.14em;
  color: #6b7a82; text-transform: uppercase;
}
.cli-titlebar .dots { display: flex; gap: 6px; }
.cli-titlebar .dots span { width: 10px; height: 10px; border-radius: 50%; background: #2a363d; }
.cli-titlebar .dots span:nth-child(1) { background: #7a3a3a; }
.cli-titlebar .dots span:nth-child(2) { background: #8a7a3a; }
.cli-titlebar .dots span:nth-child(3) { background: #3a7a52; }
.cli-titlebar .t { flex: 1; color: #8a8678; font-style: italic; text-transform: none; letter-spacing: 0; }
.cli-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: #0e1417;
  border-bottom: 1px solid #222b31;
}
.cli-topbar .brand { color: #7fb3c9; letter-spacing: 0.16em; text-transform: uppercase; }
.cli-topbar .theory { color: #a8c796; font-style: italic; flex: 1; text-align: center; padding: 0 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-topbar .tick { color: #c9a961; letter-spacing: 0.1em; }

.cli-grid {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
}
.cli-col {
  border-right: 1px solid #222b31;
  padding: 12px 14px;
  min-height: 420px;
}
.cli-col:last-child { border-right: 0; }
.cli-col .hdr {
  color: #c9a961;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px dashed #222b31;
  margin-bottom: 10px;
  display: flex; justify-content: space-between;
}
.cli-col .hdr .meta { color: #6b7a82; font-size: 9px; letter-spacing: 0.12em; }

.cli-agent {
  display: grid; grid-template-columns: 12px 1fr 30px 70px;
  gap: 6px; align-items: baseline;
  padding: 2px 0;
  color: #d8d2c0;
}
.cli-agent .dot { color: #4a7c59; font-size: 10px; }
.cli-agent .dot.anxious { color: #b85c38; }
.cli-agent .dot.determined { color: #7fb3c9; }
.cli-agent .n { color: #d8d2c0; }
.cli-agent .cc { color: #6b7a82; font-size: 10px; }
.cli-agent .m { color: #a8c796; font-size: 10px; text-align: right; }
.cli-agent .m.anxious { color: #c9a961; }
.cli-agent .m.determined { color: #7fb3c9; }

.cli-feed { padding-right: 4px; overflow: hidden; }
.cli-feed .conv {
  margin-bottom: 10px;
}
.cli-feed .pair {
  color: #7fb3c9;
  font-size: 10px;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.cli-feed .pair::before { content: "◆ "; color: #c9a961; }
.cli-feed .line { color: #d8d2c0; font-size: 11px; line-height: 1.5; }
.cli-feed .line b { color: #a8c796; font-weight: 400; }
.cli-feed .line.em { color: #8a8678; font-style: italic; }

.cli-world .wsec { margin-bottom: 14px; }
.cli-world .wsec h6 {
  margin: 0 0 6px;
  font-size: 10px; letter-spacing: 0.14em;
  color: #7fb3c9; text-transform: uppercase; font-weight: 400;
}
.cli-world .stat { display: grid; grid-template-columns: 1fr 70px 42px; gap: 6px; align-items: center; padding: 2px 0; font-size: 10px; }
.cli-world .stat .lbl { color: #d8d2c0; }
.cli-world .stat .bar { height: 8px; background: #1a242a; position: relative; }
.cli-world .stat .bar .fl { position: absolute; top: 0; bottom: 0; left: 0; background: #4a7c59; }
.cli-world .stat .bar .fl.hi { background: #b85c38; }
.cli-world .stat .v { color: #c9a961; text-align: right; font-size: 10px; }
.cli-world .belief { display: grid; grid-template-columns: 1fr 50px; gap: 6px; font-size: 10px; padding: 2px 0; }
.cli-world .belief .lbl { color: #d8d2c0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-world .belief .v { color: #a8c796; text-align: right; }
.cli-world .belief .v::before { content: "▲ "; }
.cli-world .event {
  color: #c9a961; font-size: 10px; padding: 2px 0;
  line-height: 1.4;
}
.cli-world .event::before { content: "⚡ "; color: #c9a961; }

.cli-footer {
  border-top: 1px solid #222b31;
  padding: 10px 14px;
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  background: #0e1417;
}
.cli-progress { display: grid; grid-template-columns: 70px 1fr 70px; gap: 10px; align-items: center; font-size: 10px; }
.cli-progress .p-lbl { color: #6b7a82; letter-spacing: 0.1em; text-transform: uppercase; }
.cli-progress .p-bar { height: 8px; background: #1a242a; position: relative; }
.cli-progress .p-bar .fl { position: absolute; inset: 0 auto 0 0; background: #4a7c59; }
.cli-progress .p-val { color: #a8c796; }
.cli-statuses { display: flex; gap: 18px; font-size: 10px; color: #6b7a82; letter-spacing: 0.06em; }
.cli-statuses b { color: #d8d2c0; font-weight: 400; margin-left: 4px; }

.cli-invoke {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  background: var(--paper-2);
  border: 1px solid var(--paper-rule);
  padding: 16px 20px;
}
.cli-invoke code {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  overflow-x: auto; white-space: nowrap; display: block;
}
.cli-invoke code .flag { color: var(--ocean); }
.cli-invoke code .val  { color: var(--forest); }
.cli-invoke code .str  { color: var(--crimson); }
.cli-invoke .cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
  padding: 10px 16px; white-space: nowrap;
  transition: background .15s;
}
.cli-invoke .cta:hover { background: var(--ocean); }

/* ============ DEMO VIDEO ============ */
.demo-video {
  border: 1px solid var(--ink);
  background: #000;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.demo-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.demo-video .ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background:
    radial-gradient(ellipse at center, #1a2630 0%, #0a0f12 70%);
}
.demo-video .ph .ring {
  width: 88px; height: 88px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04); backdrop-filter: blur(2px);
  transition: all .2s;
}
.demo-video .ph:hover .ring { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); }
.demo-video .ph .tri {
  width: 0; height: 0;
  border-left: 18px solid #fafaf7;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 6px;
}
.demo-video .meta-overlay {
  position: absolute; top: 20px; left: 20px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.6); text-transform: uppercase;
}
.demo-video .caption-overlay {
  position: absolute; bottom: 20px; left: 24px; right: 24px;
  font-family: var(--serif); font-style: italic;
  color: rgba(255,255,255,0.85);
  font-size: 18px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}

/* ============ old hero compat (unused but left) ============ */
.hero-input { padding: 56px 0 40px; }
.hero-input .prompt {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.hero-input .prompt .caret {
  width: 8px; height: 14px; background: var(--ink);
  animation: blink 1.1s steps(2, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.theory-field {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 0;
  position: relative;
}
.theory-field textarea {
  width: 100%;
  border: 0; outline: 0; background: transparent;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.35;
  padding: 28px 32px 24px;
  resize: none;
  color: var(--ink);
  min-height: 120px;
}
.theory-field textarea::placeholder { color: var(--ink-mute); font-style: italic; }
.theory-field .bar {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px dashed var(--paper-rule);
  padding: 12px 20px 12px 32px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.theory-field .params { display: flex; gap: 22px; align-items: center; }
.theory-field .params span b { color: var(--ink); font-weight: 500; }
.theory-field .run {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 10px 20px;
  cursor: pointer;
  transition: background .15s;
}
.theory-field .run:hover { background: var(--ocean); }

.suggestions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px;
}
.suggestions .chip {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 7px 12px;
  border: 1px solid var(--paper-rule);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s;
}
.suggestions .chip:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }
.suggestions .chip .arr { color: var(--ocean); margin-right: 6px; }

/* live spinup */
.spinup {
  margin-top: 22px;
  border-top: 1px solid var(--paper-rule);
  padding-top: 18px;
  min-height: 140px;
}
.spinup .head {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  margin-bottom: 12px;
  display: flex; gap: 14px; align-items: center;
}
.spinup .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--forest); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .35; transform: scale(1);} 50% {opacity:1; transform: scale(1.4);} }
.spinup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1px;
  background: var(--paper-rule);
  border: 1px solid var(--paper-rule);
}
.spinup-agent {
  background: var(--paper);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  display: flex; justify-content: space-between; align-items: center;
  animation: agentIn .5s ease-out both;
}
.spinup-agent .n { color: var(--ink); }
.spinup-agent .s { color: var(--forest); letter-spacing: 0.08em; text-transform: uppercase; }
.spinup-agent .s.thinking { color: var(--ochre); }
.spinup-agent .s.idle { color: var(--ink-mute); }
@keyframes agentIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none;} }

/* ============ SECTIONS ============ */
section.paper {
  padding: 80px 0 40px;
  border-top: 1px solid var(--paper-rule);
}
.sec-head {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.sec-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 14px;
}
.sec-num b { color: var(--ink); font-weight: 500; display: block; margin-top: 4px; }
.sec-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  max-width: 780px;
  text-wrap: balance;
}
.sec-title em { font-style: italic; color: var(--ocean); font-weight: 400; }
.sec-kicker {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 640px;
}

.body-col {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
}
.body-col .side {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.body-col .side p { margin: 0 0 14px; }
.body-col .side b { color: var(--ink); }
.body-col .main p {
  margin: 0 0 18px;
  font-size: 19px;
  max-width: 640px;
}
.body-col .main p .ocean { color: var(--ocean); font-style: italic; }

/* figures */
figure.fig {
  margin: 36px 0;
  border: 1px solid var(--ink);
  background: var(--paper);
}
figure.fig .cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 12px 18px;
  border-top: 1px solid var(--paper-rule);
  display: flex; justify-content: space-between; align-items: baseline;
}
figure.fig .cap b { color: var(--ink); font-weight: 500; margin-right: 12px; }

/* ============ LOOP DIAGRAM ============ */
.loop-diagram {
  padding: 48px 36px;
  position: relative;
}
.loop-stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  align-items: stretch;
  position: relative;
}
.loop-stage {
  padding: 18px 16px;
  border-right: 1px dashed var(--paper-rule);
  position: relative;
  cursor: pointer;
  transition: background .2s;
}
.loop-stage:last-child { border-right: 0; }
.loop-stage:hover { background: var(--paper-2); }
.loop-stage.active { background: #fff; }
.loop-stage .idx {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.loop-stage .idx b { color: var(--ocean); font-weight: 500; margin-right: 8px; }
.loop-stage h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.loop-stage p {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.loop-stage .tick {
  position: absolute; top: 14px; right: 14px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--paper-rule);
}
.loop-stage.active .tick { background: var(--forest); }

.loop-arrow {
  height: 40px;
  margin-top: 20px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.loop-arrow::before, .loop-arrow::after {
  content: ""; flex: 1; height: 1px; background: var(--paper-rule);
}
.loop-arrow span { padding: 0 14px; }
.loop-arrow .curve { color: var(--ocean); }

/* ============ AGENT GRAPH ============ */
.agent-graph {
  height: 560px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(var(--paper-rule) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--paper-rule) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--paper);
  background-blend-mode: multiply;
}
.agent-graph svg { width: 100%; height: 100%; display: block; }
.agent-node {
  cursor: pointer;
  transition: transform .2s;
}
.agent-node:hover circle { stroke-width: 2; }
.agent-node.selected circle { stroke-width: 2.5; }
.agent-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  fill: var(--ink);
  text-transform: uppercase;
}
.agent-sub {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--ink-mute);
}
.agent-edge {
  stroke: var(--ink);
  stroke-opacity: 0.15;
  fill: none;
}
.agent-edge.active { stroke: var(--ocean); stroke-opacity: 0.7; }

.agent-detail {
  position: absolute;
  top: 20px; right: 20px;
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 20px;
  font-size: 15px;
}
.agent-detail h5 {
  font-family: var(--serif); font-weight: 500;
  font-size: 20px; margin: 0 0 4px;
}
.agent-detail .role {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.agent-detail .stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
}
.agent-detail .stats .row { border-top: 1px solid var(--paper-rule); padding-top: 6px; }
.agent-detail .stats .row b { display: block; font-size: 18px; color: var(--ink); font-family: var(--serif); font-weight: 500; margin-top: 2px; }
.agent-detail .quote {
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  border-left: 2px solid var(--ocean);
  padding-left: 12px;
}
.agent-detail .quote::before { content: "\201C"; color: var(--ocean); }
.agent-detail .quote::after { content: "\201D"; color: var(--ocean); }

.graph-legend {
  position: absolute;
  bottom: 20px; left: 20px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--paper);
  padding: 10px 14px;
  border: 1px solid var(--paper-rule);
  display: grid; gap: 4px;
}
.graph-legend .row { display: flex; gap: 8px; align-items: center; }
.graph-legend .sw { width: 10px; height: 10px; border-radius: 50%; }

/* ============ EXAMPLE THEORIES ============ */
.theories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin: 24px 0;
}
.theory-card {
  padding: 32px 36px;
  border-right: 1px solid var(--paper-rule);
  border-bottom: 1px solid var(--paper-rule);
  background: var(--paper);
  cursor: pointer;
  transition: background .2s;
  position: relative;
  min-height: 280px;
  display: flex; flex-direction: column;
}
.theory-card:nth-child(2n) { border-right: 0; }
.theory-card:nth-last-child(-n+2) { border-bottom: 0; }
.theory-card:hover { background: var(--paper-2); }
.theory-card .tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
  display: flex; gap: 12px; align-items: center;
}
.theory-card .tag .d {
  width: 8px; height: 8px; border-radius: 1px;
}
.theory-card .tag.trading .d { background: var(--ocean); }
.theory-card .tag.geo .d { background: var(--forest); }
.theory-card .tag.whatif .d { background: var(--ochre); }
.theory-card .tag.science .d { background: var(--crimson); }

.theory-card h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.theory-card .summary {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 auto;
  max-width: 42ch;
}
.theory-card .footer {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.theory-card .footer .conf b { color: var(--ink); font-weight: 500; }
.theory-card .footer .go { color: var(--ocean); }

/* ============ REPORT PREVIEW ============ */
.report {
  background: #fff;
  border: 1px solid var(--ink);
  padding: 56px 64px 72px;
  max-width: 860px;
  margin: 0 auto;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 40px 60px -30px rgba(0,0,0,0.08);
  position: relative;
}
.report::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  background: var(--ink);
}
.report .rhead {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; justify-content: space-between;
  margin-bottom: 32px;
}
.report h3.rtitle {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
}
.report .rsub {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 17px;
  margin: 0 0 32px;
}
.report .summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin-bottom: 32px;
}
.report .summary-grid .cell {
  padding: 16px 18px;
  border-right: 1px solid var(--paper-rule);
}
.report .summary-grid .cell:last-child { border-right: 0; }
.report .summary-grid .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.report .summary-grid .val {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.report .summary-grid .val.pos { color: var(--forest); }
.report .summary-grid .val.neg { color: var(--crimson); }
.report .summary-grid .val.neu { color: var(--ocean); }

.report h4.rh {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  margin: 28px 0 12px;
  letter-spacing: -0.01em;
}
.report h4.rh::before {
  content: "§ ";
  color: var(--ocean);
  font-family: var(--mono);
  font-size: 14px;
  vertical-align: 1px;
  margin-right: 4px;
}
.report p.rp {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 14px;
  color: var(--ink);
}
.report p.rp .hl {
  background: linear-gradient(transparent 65%, rgba(201,169,97,0.35) 65%);
  padding: 0 2px;
}
.report p.rp sup {
  color: var(--ocean);
  font-family: var(--mono);
  font-size: 10px;
  margin-left: 1px;
}
.report .chart {
  margin: 20px 0 8px;
  height: 160px;
  border: 1px solid var(--paper-rule);
  position: relative;
  background: linear-gradient(var(--paper-rule) 1px, transparent 1px) 0 0 / 100% 20%;
}
.report .chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.report .chart .cap {
  position: absolute; top: 8px; left: 12px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--ink-mute); text-transform: uppercase;
}

.report .refs {
  margin-top: 32px;
  border-top: 1px solid var(--paper-rule);
  padding-top: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  font-family: var(--serif);
}
.report .refs .r {
  display: grid; grid-template-columns: 28px 1fr; gap: 8px;
  margin-bottom: 6px;
}
.report .refs .n {
  font-family: var(--mono); font-size: 10px; color: var(--ocean);
}

.report-controls {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 860px; margin: 20px auto 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.report-controls .scrub {
  display: flex; align-items: center; gap: 14px; flex: 1;
  margin: 0 20px;
}
.report-controls .track {
  flex: 1;
  height: 2px; background: var(--paper-rule);
  position: relative; cursor: pointer;
}
.report-controls .track .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.report-controls .track .knob {
  position: absolute; top: 50%;
  width: 12px; height: 12px; background: var(--paper); border: 1px solid var(--ink);
  transform: translate(-50%, -50%);
}
.report-controls button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--ink);
  padding: 6px 12px;
  cursor: pointer;
  color: var(--ink);
}
.report-controls button:hover { background: var(--ink); color: var(--paper); }

/* ============ USE CASES TABLE ============ */
.uc-table {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--serif);
}
.uc-row {
  display: grid;
  grid-template-columns: 80px 200px 1fr 160px;
  gap: 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--paper-rule);
  align-items: baseline;
  transition: background .15s;
  cursor: default;
}
.uc-row:last-child { border-bottom: 0; }
.uc-row:hover { background: var(--paper-2); }
.uc-row .idx { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.1em; }
.uc-row .vert {
  font-family: var(--serif); font-weight: 500;
  font-size: 22px; letter-spacing: -0.01em;
}
.uc-row .vert em { font-style: italic; color: var(--ocean); font-weight: 400; }
.uc-row .desc { color: var(--ink-soft); font-size: 16px; max-width: 50ch; }
.uc-row .artifact {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
  text-align: right;
}

/* ============ FAQ ============ */
.faq-list { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--paper-rule); padding: 24px 0; cursor: pointer; }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  gap: 24px;
  align-items: baseline;
}
.faq-q .n { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.12em; }
.faq-q .t { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }
.faq-q .x { font-family: var(--mono); font-size: 18px; color: var(--ocean); text-align: right; transition: transform .2s; }
.faq-item.open .faq-q .x { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease, padding .25s ease;
  padding: 0 0 0 84px;
}
.faq-item.open .faq-a {
  max-height: 400px; padding: 14px 0 6px 84px;
}
.faq-a p {
  font-size: 17px; color: var(--ink-soft);
  max-width: 60ch; margin: 0 0 10px;
  line-height: 1.55;
}

/* ============ CTA / FOOTER ============ */
.cta-block {
  margin-top: 80px;
  border-top: 1px solid var(--ink);
  padding: 72px 0 40px;
  text-align: center;
}
.cta-block h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  max-width: 800px; margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
.cta-block h3 em { font-style: italic; color: var(--ocean); font-weight: 400; }
.cta-block p.sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 540px; margin: 0 auto 36px;
}
.cta-btn {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 18px 28px;
  border: 0;
  cursor: pointer;
  transition: background .2s;
}
.cta-btn:hover { background: var(--ocean); }
.cta-btn .arr { display: inline-block; transition: transform .2s; }
.cta-btn:hover .arr { transform: translateX(4px); }

.colophon {
  border-top: 1px solid var(--paper-rule);
  margin-top: 48px;
  padding: 32px 0 56px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.colophon b { color: var(--ink); font-weight: 500; display: block; margin-bottom: 8px; }
.colophon a { color: var(--ink-soft); text-decoration: none; display: block; padding: 2px 0; }
.colophon a:hover { color: var(--ocean); }

/* ============ TWEAKS PANEL ============ */
.tweaks-panel {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 18px 20px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  z-index: 100;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.25);
  display: none;
}
.tweaks-panel.active { display: block; }
.tweaks-panel h5 {
  font-family: var(--serif); font-weight: 500;
  font-size: 18px; margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.tweaks-panel .sub {
  font-size: 10px; color: var(--ink-mute); letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 16px;
}
.tweaks-panel .grp { margin-bottom: 16px; }
.tweaks-panel .grp .lbl {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 6px;
}
.tweaks-panel .opts { display: flex; gap: 6px; flex-wrap: wrap; }
.tweaks-panel .opt {
  padding: 6px 10px;
  border: 1px solid var(--paper-rule);
  background: var(--paper);
  cursor: pointer;
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all .15s;
}
.tweaks-panel .opt:hover { border-color: var(--ink); }
.tweaks-panel .opt.active {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.tweaks-panel .sw-row { display: flex; gap: 4px; }
.tweaks-panel .sw {
  width: 28px; height: 28px;
  border: 1px solid var(--paper-rule);
  cursor: pointer;
}
.tweaks-panel .sw.active { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 900px) {
  .abstract, .sec-head, .body-col { grid-template-columns: 1fr; gap: 12px; }
  .theories { grid-template-columns: 1fr; }
  .theory-card { border-right: 0; }
  .loop-stages { grid-template-columns: 1fr 1fr; }
  .uc-row { grid-template-columns: 1fr; gap: 6px; }
  .uc-row .artifact { text-align: left; }
  .report { padding: 32px 24px; }
  .report .summary-grid { grid-template-columns: 1fr 1fr; }
  .wrap { padding: 0 24px; }
}

/* ============ MOBILE (≤640px) ============ */
@media (max-width: 640px) {
  body { font-size: 17px; }
  .wrap { padding: 0 18px; }

  /* masthead: stack wordmark above nav, compress nav, allow wrap */
  .masthead { padding: 12px 0 10px; }
  .masthead-inner { gap: 10px; row-gap: 6px; }
  .masthead .wordmark { font-size: 18px; gap: 9px; }
  .masthead .meta {
    gap: 14px; font-size: 10px; letter-spacing: 0.08em;
    flex-wrap: wrap; width: 100%;
  }

  /* title block — tighten padding so nothing spills */
  .paper-head { padding: 48px 0 32px; }
  .paper-head .vol { flex-wrap: wrap; gap: 12px 18px; margin-bottom: 20px; }
  .paper-head h1 { font-size: clamp(36px, 10vw, 52px); }
  .abstract { padding: 28px 0 36px; gap: 16px; }
  .abstract p { font-size: 17px; }

  /* CLI hero — this is the main overflow culprit. Stack columns,
     force contents to respect container width, scroll internally if needed. */
  .cli-window { margin: 0 -18px; border-left: 0; border-right: 0; }
  .cli-grid { grid-template-columns: 1fr; }
  .cli-col { border-right: 0; border-bottom: 1px solid #222b31; min-height: 0; }
  .cli-col:last-child { border-bottom: 0; }
  .cli-topbar { flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; }
  .cli-topbar .theory { text-align: left; padding: 0; flex-basis: 100%; }
  .cli-titlebar .t { display: none; }
  .cli-agent { grid-template-columns: 12px 1fr 26px 60px; font-size: 10px; }

  .cli-invoke { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .cli-invoke code { font-size: 11px; }
  .cli-invoke .cta { justify-self: start; }

  /* section heads + bodies already stack at 900px; make numbers smaller */
  section.paper { padding: 56px 0 28px; }
  .sec-num,
  .body-col .side { display: none; }
  .sec-head,
  .body-col { grid-template-columns: 1fr; gap: 12px; }
  .sec-title { font-size: clamp(26px, 7vw, 36px); }
  .sec-kicker { font-size: 17px; }
  .body-col .main p { font-size: 17px; }

  /* loop diagram — was 2-col at 900px, single column on phones */
  .loop-diagram { padding: 28px 18px; }
  .loop-stages { grid-template-columns: 1fr; }
  .loop-stage { border-right: 0; border-bottom: 1px dashed var(--paper-rule); }
  .loop-stage:last-child { border-bottom: 0; }

  /* agent graph height + legend */
  .agent-graph { height: 420px; }
  .agent-detail { position: static; width: auto; margin: 12px; }

  /* theories grid already stacks; tighten padding */
  .theory-card { padding: 22px 20px; min-height: 0; }
  .theory-card h4 { font-size: 22px; }

  /* report — this can overflow because of 860px max + fixed padding */
  .report { padding: 24px 18px 32px; }
  .report h3.rtitle { font-size: 26px; }
  .report .summary-grid { grid-template-columns: 1fr 1fr; }
  .report .summary-grid .val { font-size: 20px; }
  .report-controls { flex-wrap: wrap; gap: 10px; }
  .report-controls .scrub { order: 3; width: 100%; margin: 0; }

  /* FAQ — the 60/1fr/40 grid is cramped; tighten */
  .faq-q { grid-template-columns: 40px 1fr 28px; gap: 12px; }
  .faq-q .t { font-size: 18px; }
  .faq-a { padding-left: 52px; }
  .faq-item.open .faq-a { padding: 12px 0 4px 52px; }

  /* CTA + colophon */
  .cta-block { padding: 48px 0 28px; }
  .cta-btn { padding: 14px 20px; font-size: 11px; letter-spacing: 0.12em; }
  .colophon { grid-template-columns: 1fr; gap: 18px; }

  /* Tweaks panel — don’t hog the screen on mobile */
  .tweaks-panel { right: 12px; bottom: 12px; left: 12px; width: auto; }

  /* demo video overlay text */
  .demo-video .caption-overlay { font-size: 15px; left: 16px; right: 16px; bottom: 14px; }
  .demo-video .ph .ring { width: 64px; height: 64px; }

  /* belt-and-suspenders: any overflowing child gets horizontally scrolled
     inside its own box rather than pushing the page wider */
  .wrap > * { max-width: 100%; }
  img, svg, video { max-width: 100%; height: auto; }
}