/* ============================================================
   TTSO / code-native — shared design system  (2026-07-11)
   Single stylesheet for every 2026-07-11 page (index, trajectory,
   pipeline). Inherits the 07-03 "agent notebook" aesthetic:
   warm paper + near-black ink, mono labels, maroon accent, ARC-16
   grid palette. Now token-driven and light/dark aware.
   Self-contained: system fonts only, no CDNs.
   ============================================================ */

:root {
  /* --- 9 core design tokens (surface / ink / rule / accent) --- */
  --paper:   #f5f3ec;   /* 1 page background      */
  --paper-2: #efece2;   /* 2 sunk panel           */
  --surface: #fbfaf5;   /* 3 raised card          */
  --ink:     #17150f;   /* 4 primary text         */
  --ink-2:   #4a4636;   /* 5 secondary text       */
  --ink-3:   #6f6a58;   /* 6 muted / captions     */
  --rule:    #d8d3c2;   /* 7 hairline             */
  --rule-2:  #c7c1ad;   /* 8 stronger hairline    */
  --accent:  #921231;   /* 9 maroon accent        */

  /* semantic status */
  --amber:    #8a5a00;
  --amber-bg: #fdf3d7;
  --green:    #1f6a1f;
  --fail:     #7a1020;

  /* phase tints for the pipeline flow */
  --wake-bg:  #eef2f4;
  --wake-br:  #b9c6cd;
  --sleep-bg: #fbf1d8;
  --sleep-br: #dcc07c;

  /* hover tooltip */
  --tip-bg:  #17150f;
  --tip-ink: #f5f3ec;

  /* ruled-line paper texture strength */
  --ruled: rgba(146, 18, 49, 0.035);

  /* ARC-AGI 16 color palette (index -> hex) */
  --c0:#FFFFFF; --c1:#CCCCCC; --c2:#999999; --c3:#666666;
  --c4:#333333; --c5:#000000; --c6:#E53AA3; --c7:#FF7BCC;
  --c8:#F93C31; --c9:#1E93FF; --c10:#88D8F1; --c11:#FFDC00;
  --c12:#FF851B; --c13:#921231; --c14:#4FCC30; --c15:#A356D6;

  --serif: Georgia, "Times New Roman", "Noto Serif", serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  color-scheme: light dark;
}

/* ---------- dark theme ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #16140e;
    --paper-2: #201d15;
    --surface: #1d1a13;
    --ink:     #efe9da;
    --ink-2:   #cbc5b3;
    --ink-3:   #948e7c;
    --rule:    #322e23;
    --rule-2:  #453f31;
    --accent:  #e57289;
    --amber:   #dcb15b;
    --amber-bg:#2b230f;
    --green:   #74c862;
    --fail:    #e5878f;
    --wake-bg: #182028;
    --wake-br: #33454f;
    --sleep-bg:#2a2410;
    --sleep-br:#5a4c1f;
    --tip-bg:  #efe9da;
    --tip-ink: #16140e;
    --ruled:   rgba(229, 114, 137, 0.05);
  }
}
/* explicit theme toggle wins in both directions */
:root[data-theme="dark"] {
  --paper:#16140e; --paper-2:#201d15; --surface:#1d1a13;
  --ink:#efe9da; --ink-2:#cbc5b3; --ink-3:#948e7c;
  --rule:#322e23; --rule-2:#453f31; --accent:#e57289;
  --amber:#dcb15b; --amber-bg:#2b230f; --green:#74c862; --fail:#e5878f;
  --wake-bg:#182028; --wake-br:#33454f; --sleep-bg:#2a2410; --sleep-br:#5a4c1f;
  --tip-bg:#efe9da; --tip-ink:#16140e; --ruled:rgba(229,114,137,0.05);
}
:root[data-theme="light"] {
  --paper:#f5f3ec; --paper-2:#efece2; --surface:#fbfaf5;
  --ink:#17150f; --ink-2:#4a4636; --ink-3:#6f6a58;
  --rule:#d8d3c2; --rule-2:#c7c1ad; --accent:#921231;
  --amber:#8a5a00; --amber-bg:#fdf3d7; --green:#1f6a1f; --fail:#7a1020;
  --wake-bg:#eef2f4; --wake-br:#b9c6cd; --sleep-bg:#fbf1d8; --sleep-br:#dcc07c;
  --tip-bg:#17150f; --tip-ink:#f5f3ec; --ruled:rgba(146,18,49,0.035);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent 31px,
    var(--ruled) 31px, var(--ruled) 32px);
  -webkit-text-size-adjust: 100%;
}

/* ============================================================
   archive bar + sticky nav
   ============================================================ */
.arcbar {
  display: flex; align-items: center; gap: 16px;
  padding: 7px 22px;
  background: var(--ink); color: color-mix(in srgb, var(--paper) 78%, transparent);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em;
}
.arcbar a {
  color: var(--paper); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 35%, transparent);
  white-space: nowrap;
}
.arcbar a:hover { border-bottom-color: var(--paper); }
.arcbar .arcbar-label {
  flex: 1 1 auto; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 560px) { .arcbar .arcbar-label { display: none; } .arcbar { justify-content: space-between; } }

.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  padding: 0.55rem 1.4rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(5px);
  border-bottom: 1px solid var(--rule-2);
}
.nav .brand {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.02em; color: var(--ink);
  display: flex; align-items: center; gap: 0.5rem;
}
.nav .brand .slash { color: var(--accent); }
.nav a {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; padding: 0.15rem 0;
  border-bottom: 1.5px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
.nav .spacer { flex: 1 1 auto; }

/* ============================================================
   layout + hero
   ============================================================ */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.4rem 6rem; }
header.hero { max-width: 1080px; margin: 0 auto; padding: 3rem 1.4rem 1.2rem; }

.kicker {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 0.9rem;
}
h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 1rem;
}
h1 em, .verdict em { font-style: normal; color: var(--accent); }
.lede { font-size: 1.14rem; color: var(--ink-2); max-width: 66ch; margin: 0.4rem 0 1rem; }
.kor {
  display: block; font-family: var(--serif); font-size: 0.95rem;
  color: var(--accent); margin-top: 0.35rem; font-style: normal;
}
.muted { color: var(--ink-3); }
strong { font-weight: 700; }

code.inl {
  font-family: var(--mono); font-size: 0.84em;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 3px; padding: 0.05em 0.35em;
}

/* ============================================================
   the pipeline flowchart  (hero centrepiece)
   control -> WAKE -> SLEEP -> residual (loop)
   ============================================================ */
.flow {
  margin: 1.8rem 0 0.4rem;
  padding: 1.5rem 1.3rem 1.2rem;
  background: var(--paper-2);
  border: 1px solid var(--rule-2); border-radius: 12px;
}
.flow-row {
  display: flex; align-items: stretch; gap: 0.55rem;
  flex-wrap: nowrap; overflow-x: auto;
  padding-bottom: 0.3rem;
}
.flow-arrow {
  align-self: center; flex: 0 0 auto;
  font-family: var(--mono); font-size: 1.4rem; color: var(--accent);
  user-select: none;
}

/* a clickable node */
.fnode {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.15rem; text-decoration: none;
  padding: 0.6rem 0.85rem; border-radius: 8px;
  border: 1.5px solid var(--ink); background: var(--surface);
  color: var(--ink); min-width: 92px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.fnode:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.14); border-color: var(--accent); }
.fnode .ft { font-family: var(--mono); font-size: 0.82rem; font-weight: 700; }
.fnode .fs { font-family: var(--mono); font-size: 0.6rem; color: var(--ink-3); letter-spacing: 0.02em; }
.fnode.ctrl { align-self: center; border-style: dashed; }

/* hover tooltip from data-tip */
.fnode[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 230px;
  padding: 0.4rem 0.6rem; border-radius: 6px;
  background: var(--tip-bg); color: var(--tip-ink);
  font-family: var(--mono); font-size: 0.66rem; line-height: 1.4;
  text-align: left; white-space: normal;
  opacity: 0; pointer-events: none; z-index: 20;
  transition: opacity .14s ease, transform .14s ease;
}
.fnode[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* a phase container wrapping several nodes */
.fphase {
  flex: 1 1 auto; min-width: 0;
  border-radius: 10px; padding: 0.55rem 0.6rem 0.65rem;
}
.fphase.wake  { background: var(--wake-bg);  border: 1.5px solid var(--wake-br); }
.fphase.sleep { background: var(--sleep-bg); border: 1.5px solid var(--sleep-br); }
.fphase-label {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.4rem;
}
.fphase.wake  .fphase-label { color: color-mix(in srgb, var(--ink) 70%, var(--accent)); }
.fphase.sleep .fphase-label { color: var(--amber); }
.fphase-body { display: flex; align-items: stretch; gap: 0.4rem; }
.fmini {
  align-self: center; font-family: var(--mono); font-size: 0.95rem;
  color: var(--ink-3); flex: 0 0 auto;
}
.fphase-body .fnode { border-width: 1px; flex: 1 1 0; }

/* residual return band */
.floop {
  margin-top: 0.9rem; padding: 0.5rem 0.8rem;
  border-top: 2px dashed var(--accent);
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-2);
}
.floop .lloop { color: var(--accent); font-weight: 700; }
.floop .lback { margin-left: auto; color: var(--ink-3); }

@media (max-width: 780px) {
  .flow-row { flex-direction: column; align-items: stretch; }
  .flow-arrow { transform: rotate(90deg); align-self: center; }
  .fphase-body { flex-direction: column; }
  .fmini { transform: rotate(90deg); align-self: center; }
  .fnode[data-tip]::after { left: 0; transform: none; bottom: auto; top: calc(100% + 6px); }
  .fnode[data-tip]:hover::after { transform: none; }
}

/* ============================================================
   stat chips  (hero + score)
   ============================================================ */
.statrow { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.3rem 0 0.4rem; }
.stat {
  border: 1.5px solid var(--ink); border-radius: 6px;
  padding: 0.45rem 0.95rem; background: var(--surface);
  font-family: var(--mono); text-align: center;
}
.stat .v { display: block; font-size: 1.45rem; font-weight: 700; line-height: 1.15; }
.stat .k { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.stat.hi { border-color: var(--accent); }
.stat.hi .v { color: var(--accent); }

/* ============================================================
   sections
   ============================================================ */
section { padding-top: 2.6rem; margin-top: 1.2rem; scroll-margin-top: 72px; }
.sec-head {
  display: flex; align-items: baseline; gap: 0.8rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.4rem; margin-bottom: 1.3rem;
}
.sec-num { font-family: var(--mono); font-size: 0.8rem; font-weight: 700; color: var(--accent); }
.sec-head h2 { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; margin: 0; }
.sec-head .tag {
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3);
  margin-left: auto; text-transform: uppercase; letter-spacing: 0.05em;
}
h3 { font-family: var(--serif); font-weight: 600; font-size: 1.16rem; margin: 1.6rem 0 0.5rem; }
p { margin: 0.7rem 0; }

/* ============================================================
   score cards  (WIN double)
   ============================================================ */
.scorecards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; margin: 1.2rem 0;
}
.scorecard {
  border: 2px solid var(--accent); border-radius: 10px;
  background: var(--surface); padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.scorecard .sc-id {
  font-family: var(--mono); font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.scorecard .sc-id .win {
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper); background: var(--accent);
  padding: 0.08rem 0.4rem; border-radius: 4px;
}
.scorecard .sc-nums { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.scorecard .sc-n { font-family: var(--mono); text-align: center; min-width: 62px; }
.scorecard .sc-n b { display: block; font-size: 1.3rem; color: var(--accent); line-height: 1.1; }
.scorecard .sc-n span { display: block; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.scorecard .sc-note { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3); }

/* live-confirmed rule callout */
.confirm {
  margin: 1rem 0; padding: 0.7rem 0.95rem;
  border-left: 4px solid var(--green); border-radius: 0 6px 6px 0;
  background: var(--paper-2); font-family: var(--mono); font-size: 0.82rem;
}
.confirm b { color: var(--green); }

/* ============================================================
   prior-work gif comparison
   ============================================================ */
.priors {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin: 1.2rem 0 0.8rem;
}
@media (max-width: 620px) { .priors { grid-template-columns: 1fr; } }
.priorfig {
  margin: 0; border: 1px solid var(--rule-2); border-radius: 10px;
  background: var(--surface); padding: 0.7rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.priorfig.ours { border: 2px solid var(--accent); }
.priorfig img {
  display: block; width: 100%; height: auto; max-width: 100%;
  image-rendering: pixelated; border-radius: 6px;
  border: 1px solid var(--rule); background: #fff;
}
.priorfig figcaption {
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-2);
  display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap;
}
.priorfig figcaption b { color: var(--ink); }
.priorfig.ours figcaption b { color: var(--accent); }
.added {
  margin: 0.4rem 0 0; padding: 0.6rem 0.9rem;
  background: var(--paper-2); border-left: 4px solid var(--accent);
  border-radius: 0 6px 6px 0; font-size: 0.96rem;
}
.added b { color: var(--accent); font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================================
   sub-page navigation cards
   ============================================================ */
.subnav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem; margin: 1.2rem 0;
}
.subcard {
  display: flex; flex-direction: column; gap: 0.35rem;
  border: 1.5px solid var(--rule-2); border-radius: 10px; background: var(--surface);
  padding: 0.9rem 1rem; text-decoration: none; color: var(--ink);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.subcard:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.subcard .sn-k { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.subcard .sn-t { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.subcard .sn-d { font-size: 0.86rem; color: var(--ink-2); line-height: 1.4; }
.subcard .sn-go { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; color: var(--accent); margin-top: auto; }
.subcard.arc { border-style: dashed; }
.subcard.arc .sn-k { color: var(--ink-3); }
.subcard.arc .sn-go { color: var(--ink-3); }

/* ============================================================
   badges / chips  (shared with subpages)
   ============================================================ */
.badge {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.1rem 0.45rem; border-radius: 3px; border: 1.5px solid;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem;
}
.badge.fail   { color: var(--fail); border-color: var(--fail); background: color-mix(in srgb, var(--fail) 8%, transparent); }
.badge.run    { color: var(--amber); border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.badge.proven { color: var(--green); border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.badge.open   { color: var(--ink-3); border-color: var(--rule-2); background: var(--paper-2); }

.chip {
  display: inline-block; font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  padding: 0.06rem 0.4rem; border-radius: 8px; border: 1px solid; vertical-align: middle;
}
.chip.ok  { color: var(--green); border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.chip.no  { color: var(--fail); border-color: var(--fail); background: color-mix(in srgb, var(--fail) 8%, transparent); }
.chip.ev  { color: var(--amber); border-color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.chip.mut { color: var(--ink-3); border-color: var(--rule-2); background: var(--paper-2); }

/* ============================================================
   callout + details
   ============================================================ */
.callout {
  margin: 1.4rem 0; padding: 1rem 1.2rem;
  border-left: 4px solid var(--accent);
  background: var(--paper-2); border-radius: 0 6px 6px 0;
}
.callout .lab {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent); margin-bottom: 0.3rem;
}
.callout.warn { border-left-color: var(--amber); }
.callout.warn .lab { color: var(--amber); }

details.tech {
  margin: 1rem 0; border: 1px solid var(--rule-2); border-radius: 8px;
  background: var(--paper-2); padding: 0.6rem 0.95rem;
}
details.tech summary {
  cursor: pointer; font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2);
}
details.tech[open] summary { margin-bottom: 0.5rem; }

/* ============================================================
   formula + table  (shared with subpages)
   ============================================================ */
.formula {
  font-family: var(--mono); font-size: 0.9rem; line-height: 1.7;
  background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: 8px;
  padding: 0.9rem 1.1rem; margin: 1rem 0; overflow-x: auto;
}
.formula b { color: var(--accent); }

.tblwrap { overflow-x: auto; margin: 1.3rem 0; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
table.cmp th, table.cmp td {
  text-align: left; padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
table.cmp thead th {
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink); border-bottom: 2px solid var(--ink);
}
table.cmp tbody th { font-family: var(--mono); font-size: 0.74rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
table.cmp .ours { background: color-mix(in srgb, var(--accent) 6%, transparent); }
table.cmp td.num, table.cmp th.num { text-align: right; font-family: var(--mono); }

/* ============================================================
   footer
   ============================================================ */
footer {
  max-width: 1080px; margin: 3rem auto 0;
  padding: 1.6rem 1.4rem 3rem;
  border-top: 1px solid var(--rule-2);
  font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center;
}
footer .sigloop b { color: var(--accent); }
footer .sigloop .arr { color: var(--rule-2); padding: 0 0.2rem; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  header.hero { padding-top: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .fnode { transition: none; }
}

/* ============================================================
   trajectory.html — research trajectory (vertical 5-step flow)
   Each step: [abstract question] -> [problem] -> [solution] ->
   (optional small figure). Connectors: "이 해결이 다음 질문을 낳는다".
   Classes prefixed tj- to avoid collisions.
   ============================================================ */
.tj-intro { font-size: 1.06rem; color: var(--ink-2); max-width: 64ch; margin: 0.4rem 0 2rem; }

.tj-line {
  position: relative; margin: 0 0 1rem;
  padding-left: 3.2rem;
}
/* the vertical spine */
.tj-line::before {
  content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px;
  width: 2px; background: var(--rule-2);
}

.tj-step { position: relative; margin-bottom: 0.4rem; }
/* numbered node on the spine */
.tj-step > .tj-node {
  position: absolute; left: -3.2rem; top: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.86rem; font-weight: 700; color: var(--ink);
  z-index: 2;
}
.tj-step.last > .tj-node { border-color: var(--accent); color: var(--accent); }

.tj-card {
  border: 1.5px solid var(--rule-2); border-radius: 12px;
  background: var(--surface); padding: 1.05rem 1.2rem 1.1rem;
}
.tj-kick {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 0.35rem;
}
.tj-q {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.3rem, 3.2vw, 1.75rem); line-height: 1.18;
  letter-spacing: -0.01em; margin: 0 0 0.85rem;
}

/* problem / solution one-liners */
.tj-ps { display: flex; flex-direction: column; gap: 0.5rem; }
.tj-row { display: flex; align-items: flex-start; gap: 0.6rem; }
.tj-tag {
  flex: 0 0 auto; margin-top: 0.12rem;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.14rem 0.46rem; border-radius: 5px; color: var(--paper);
}
.tj-row.problem  .tj-tag { background: var(--fail); }
.tj-row.solution .tj-tag { background: var(--green); }
.tj-row .tj-txt { font-size: 0.98rem; line-height: 1.5; color: var(--ink); }
.tj-row.problem  .tj-txt { color: var(--ink-2); }
.tj-row .tj-txt b { color: var(--accent); font-weight: 700; }

/* an optional bonus / detail line under the solution */
.tj-bonus {
  margin: 0.65rem 0 0; padding: 0.4rem 0.65rem;
  background: var(--paper-2); border-left: 3px solid var(--rule-2);
  border-radius: 0 6px 6px 0;
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-2); line-height: 1.5;
}
.tj-bonus b { color: var(--ink); }

/* small figure inside a step */
.tj-fig {
  margin: 0.85rem 0 0; padding: 0.75rem 0.8rem 0.55rem;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px;
}
.tj-fig svg { display: block; width: 100%; height: auto; }
.tj-fig figcaption {
  font-family: var(--mono); font-size: 0.66rem; color: var(--ink-3);
  margin-top: 0.5rem; line-height: 1.45;
}
.tj-fig figcaption b { color: var(--ink); }

/* svg text helpers (scoped) */
.tj-fig .t  { font-family: var(--mono); font-size: 10px; font-weight: 700; fill: var(--ink); }
.tj-fig .m  { font-family: var(--mono); font-size: 8.5px; fill: var(--ink-3); }
.tj-fig .bx { fill: var(--surface); stroke: var(--ink); stroke-width: 1.4; }
.tj-fig .bx2{ fill: var(--paper); stroke: var(--rule-2); stroke-width: 1; }
.tj-fig .ln { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.tj-fig .strike { stroke: var(--accent); stroke-width: 2; }

/* the "this solution births the next question" connector */
.tj-birth {
  position: relative; margin: 0.55rem 0 0.85rem; padding: 0.4rem 0 0.4rem 0.2rem;
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3);
  display: flex; align-items: center; gap: 0.5rem;
}
.tj-birth .arr { color: var(--accent); font-size: 1.05rem; }
.tj-birth b { color: var(--ink-2); font-weight: 700; }

/* honest open-question footer block */
.tj-open {
  margin: 2rem 0 0; padding: 1rem 1.2rem;
  border: 1.5px dashed var(--amber); border-radius: 10px;
  background: var(--amber-bg);
}
.tj-open .lab {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.35rem;
}
.tj-open p { margin: 0; font-size: 0.98rem; color: var(--ink); }
.tj-open code.inl { font-size: 0.82em; }

@media (max-width: 720px) {
  .tj-line { padding-left: 2.5rem; }
  .tj-step > .tj-node { left: -2.5rem; width: 28px; height: 28px; font-size: 0.78rem; }
}

/* ============================================================
   ok (confirmed-green) surface token — used by ported replay
   ============================================================ */
:root { --ok-bg: #dff3d8; }
@media (prefers-color-scheme: dark) { :root { --ok-bg: #1c2e18; } }
:root[data-theme="dark"]  { --ok-bg: #1c2e18; }
:root[data-theme="light"] { --ok-bg: #dff3d8; }

/* ============================================================
   prior-lane cards  (ported from 2026-07-03 .animfig grammar)
   ============================================================ */
.animgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; margin: 1.4rem 0; }
@media (max-width: 860px) { .animgrid { grid-template-columns: 1fr; } }
.animfig {
  margin: 0; padding: 0.9rem 0.9rem 0.7rem;
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: 6px;
  display: flex; flex-direction: column;
}
.animfig h4 {
  font-family: var(--mono); font-size: 0.8rem; margin: 0 0 0.5rem;
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
}
/* diagram SVGs keep their authored light-paper colours in both themes,
   like an embedded image */
.animfig svg { display: block; width: 100%; height: auto; background: #fff;
  border: 1px solid var(--rule); border-radius: 4px; }
.animfig img {
  display: block; width: 100%; height: auto; max-width: 100%;
  image-rendering: pixelated; border: 1px solid var(--rule); border-radius: 4px; background: #fff;
}
.animfig .insight {
  font-family: var(--serif); font-size: 0.98rem; font-style: italic;
  color: var(--ink); margin: 0.6rem 0 0.15rem;
}
.animfig .kor { font-size: 0.85rem; margin-top: 0.1rem; }
.animfig .absorbed {
  font-family: var(--mono); font-size: 0.66rem; color: var(--ink-2);
  margin-top: 0.5rem; padding: 0.3rem 0.5rem;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-left: 3px solid var(--accent); border-radius: 0 3px 3px 0;
}
.animfig .absorbed b { color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.6rem; }
.dive {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  color: var(--accent); text-decoration: none; margin-top: 0.55rem;
}
.dive:hover { text-decoration: underline; }
.animfig svg:hover * { animation-play-state: paused !important; }

/* svg text helpers (07-03 diagrams) */
.sL { font-family: var(--mono); font-size: 9.5px; fill: var(--ink); }
.sM { font-family: var(--mono); font-size: 8.5px; fill: var(--ink-3); }
.sDash { stroke: #c7c1ad; stroke-width: 1.2; fill: none; stroke-dasharray: 4 3; }
/* white-background diagrams need fixed inks regardless of theme */
.animfig svg .sL { fill: #17150f; }
.animfig svg .sM { fill: #6f6a58; }

/* --- (b) posterior bars (ported keyframes, verbatim) --- */
.ab-bar { transform-box: fill-box; transform-origin: bottom; }
.ab-bar.b1 { animation: abB1 8s ease-in-out infinite; }
.ab-bar.b2 { animation: abB2 8s ease-in-out infinite; }
.ab-bar.b3 { animation: abB3 8s ease-in-out infinite; }
.ab-bar.b4 { animation: abB4 8s ease-in-out infinite; }
@keyframes abB1 { 0%,34%{transform:scaleY(.48)} 52%,86%{transform:scaleY(.14)} 96%,100%{transform:scaleY(.48)} }
@keyframes abB2 { 0%,34%{transform:scaleY(.56)} 52%,86%{transform:scaleY(.94)} 96%,100%{transform:scaleY(.56)} }
@keyframes abB3 { 0%,34%{transform:scaleY(.42)} 52%,86%{transform:scaleY(.08)} 96%,100%{transform:scaleY(.42)} }
@keyframes abB4 { 0%,34%{transform:scaleY(.5)} 52%,86%{transform:scaleY(.12)} 96%,100%{transform:scaleY(.5)} }
.ab-exp { transform-box: fill-box; opacity:0; animation: abExp 8s linear infinite; }
@keyframes abExp { 0%,28%{opacity:0;transform:translateY(6px)} 33%{opacity:1;transform:translateY(0)} 50%{opacity:1} 58%,100%{opacity:0} }
.ab-win { opacity:0; animation: abWin 8s linear infinite; }
@keyframes abWin { 0%,56%{opacity:0} 62%{opacity:1} 86%{opacity:1} 94%,100%{opacity:0} }

/* --- (c) SkillOpt (ported keyframes, verbatim) --- */
.ac-path { stroke-dasharray: 150; stroke-dashoffset: 150; animation: acPath 8s linear infinite; }
@keyframes acPath { 0%{stroke-dashoffset:150;opacity:1} 18%{stroke-dashoffset:0;opacity:1} 60%{opacity:1} 70%,100%{opacity:.25;stroke-dashoffset:0} }
.ac-fail { opacity:0; animation: acFail 8s linear infinite; }
@keyframes acFail { 0%,17%{opacity:0} 20%{opacity:1} 60%{opacity:1} 70%,100%{opacity:0} }
.ac-diag { transform-box: fill-box; opacity:0; animation: acDiag 8s linear infinite; }
@keyframes acDiag { 0%,24%{opacity:0;transform:translateY(6px)} 29%{opacity:1;transform:translateY(0)} 88%{opacity:1} 95%,100%{opacity:0} }
.ac-old { animation: acOld 8s linear infinite; }
@keyframes acOld { 0%,40%{opacity:1} 46%{opacity:1} 54%,100%{opacity:0} }
.ac-strike { transform-box: fill-box; transform-origin: left; transform: scaleX(0); animation: acStrike 8s linear infinite; }
@keyframes acStrike { 0%,40%{transform:scaleX(0)} 46%{transform:scaleX(1)} 54%,100%{transform:scaleX(1);opacity:0} }
.ac-new { opacity:0; animation: acNew 8s linear infinite; }
@keyframes acNew { 0%,50%{opacity:0} 58%{opacity:1} 96%{opacity:1} 100%{opacity:0} }
.ac-chip { transform-box: fill-box; opacity:0; animation: acChip 8s linear infinite; }
@keyframes acChip {
  0%,58% { opacity:0; transform: translate(0,0); }
  61% { opacity:1; transform: translate(0,0); }
  70% { transform: translate(74px,0); }
  74% { transform: translate(74px,0); }
  82% { opacity:1; transform: translate(148px,0); }
  86%,100% { opacity:0; transform: translate(148px,0); }
}
.ac-pass { opacity:0; animation: acPass 8s linear infinite; }
@keyframes acPass { 0%,68%{opacity:0} 72%,80%{opacity:1} 85%,100%{opacity:0} }
.ac-rej { transform-box: fill-box; opacity:0; animation: acRej 8s linear infinite; }
@keyframes acRej {
  0%,76% { opacity:0; transform: translate(0,0); }
  79% { opacity:1; transform: translate(0,0); }
  85% { transform: translate(58px,0); }
  88% { transform: translate(58px,0); }
  94% { opacity:1; transform: translate(8px,10px) rotate(8deg); }
  98%,100% { opacity:0; transform: translate(8px,14px) rotate(8deg); }
}
.ac-rx { opacity:0; animation: acRx 8s linear infinite; }
@keyframes acRx { 0%,84%{opacity:0} 87%,93%{opacity:1} 97%,100%{opacity:0} }

/* ============================================================
   hero replay  (ported from 2026-07-03, tokenised for dark mode)
   real v5f_s28 engine frames painted onto .rp-f canvases by app.js
   ============================================================ */
.replay:hover .rp-anim { animation-play-state: paused !important; }
.replay {
  margin: 1.6rem 0 1.2rem; border: 2px solid var(--ink); border-radius: 8px;
  background: var(--surface); padding: 0.9rem 1rem 0.6rem;
}
.rp-stage {
  position: relative; display: grid; gap: 1.1rem;
  grid-template-columns: minmax(220px, 320px) 1fr; align-items: start;
}
.rp-board {
  position: relative; aspect-ratio: 1 / 1; border: 2px solid var(--ink);
  background: #000; overflow: hidden;
}
.rp-board canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; opacity: 0;
}
.rp-f1 { animation: rpF1 16s linear infinite; }
.rp-f2 { animation: rpF2 16s linear infinite; }
.rp-f3 { animation: rpF3 16s linear infinite; }
.rp-f4 { animation: rpF4 16s linear infinite; }
.rp-f5 { animation: rpF5 16s linear infinite; }
@keyframes rpF1 { 0%{opacity:1} 9%{opacity:1} 11%,100%{opacity:0} }
@keyframes rpF2 { 0%,8%{opacity:0} 10%{opacity:1} 18%{opacity:1} 20%,100%{opacity:0} }
@keyframes rpF3 { 0%,17%{opacity:0} 19%{opacity:1} 27%{opacity:1} 29%,100%{opacity:0} }
@keyframes rpF4 { 0%,26%{opacity:0} 28%{opacity:1} 36%{opacity:1} 38%,100%{opacity:0} }
@keyframes rpF5 { 0%,35%{opacity:0} 37%{opacity:1} 99%{opacity:1} 100%{opacity:0} }
.rp-tag {
  position: absolute; left: 6px; bottom: 6px; z-index: 3; opacity: 0;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700; color: var(--ink);
  background: color-mix(in srgb, var(--paper) 92%, transparent); border: 1px solid var(--ink);
  border-radius: 3px; padding: 0.06rem 0.4rem;
}
.rp-t1 { animation: rpF1 16s linear infinite; }
.rp-t2 { animation: rpF2 16s linear infinite; }
.rp-t3 { animation: rpF3 16s linear infinite; }
.rp-t4 { animation: rpF4 16s linear infinite; }
.rp-t5 { animation: rpT5 16s linear infinite; color: var(--amber); border-color: var(--amber); background: var(--amber-bg); }
@keyframes rpT5 { 0%,35%{opacity:0} 37%{opacity:1} 86%{opacity:1} 88%,100%{opacity:0} }
.rp-flash { position: absolute; inset: 0; z-index: 4; background: var(--c11); opacity: 0; animation: rpFlash 16s linear infinite; }
@keyframes rpFlash { 0%,86%{opacity:0} 88%{opacity:.6} 90%{opacity:.15} 92%{opacity:.5} 95%,100%{opacity:0} }
.rp-lvl {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.2rem;
  font-family: var(--mono); font-weight: 700; font-size: 1.25rem; color: var(--accent);
  background: color-mix(in srgb, var(--paper) 86%, transparent); opacity: 0; animation: rpLvl 16s linear infinite;
  text-align: center;
}
.rp-lvl span { font-size: 0.6rem; font-weight: 400; color: var(--ink-3); letter-spacing: 0.04em; }
@keyframes rpLvl {
  0%,89% { opacity:0; transform: scale(.85); }
  92%    { opacity:1; transform: scale(1.06); }
  94%    { transform: scale(1); }
  98%    { opacity:1; }
  100%   { opacity:0; }
}
.rp-side {
  border: 1.5px solid var(--amber); border-radius: 6px; background: var(--amber-bg);
  padding: 0.65rem 0.75rem; opacity: 0; animation: rpSide 16s linear infinite;
}
@keyframes rpSide { 0%,37%{opacity:0;transform:translateY(6px)} 41%{opacity:1;transform:none} 97%{opacity:1} 100%{opacity:0} }
.rp-shead { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--amber); margin-bottom: 0.45rem; }
.rp-hyp {
  border: 1.5px solid var(--ink); background: var(--paper); border-radius: 4px;
  padding: 0.35rem 0.5rem 0.35rem 1.5rem; font-family: var(--mono); font-size: 0.66rem;
  line-height: 1.45; color: var(--ink-2); margin: 0.35rem 0; position: relative; opacity: 0;
}
.rp-h1 { animation: rpH1 16s linear infinite; }
.rp-h2 { animation: rpH2 16s linear infinite; }
.rp-h3 { animation: rpH3 16s linear infinite; }
@keyframes rpH1 { 0%,43%{opacity:0;transform:translateX(14px)} 46%{opacity:1;transform:none} 97%{opacity:1} 100%{opacity:0} }
@keyframes rpH2 { 0%,48%{opacity:0;transform:translateX(14px)} 51%{opacity:1;transform:none} 97%{opacity:1} 100%{opacity:0} }
@keyframes rpH3 {
  0%,53% { opacity:0; transform:translateX(14px); border-color:var(--ink); background:var(--paper); }
  56%    { opacity:1; transform:none; border-color:var(--ink); background:var(--paper); }
  68%    { border-color:var(--ink); background:var(--paper); }
  72%    { border-color:var(--green); background:var(--ok-bg); }
  97%    { opacity:1; border-color:var(--green); background:var(--ok-bg); }
  100%   { opacity:0; border-color:var(--green); background:var(--ok-bg); }
}
.rp-x, .rp-c {
  position: absolute; left: 0.45rem; top: 0.3rem; font-weight: 700; opacity: 0;
}
.rp-x { color: var(--fail); }
.rp-c { color: var(--green); transform-origin: center; }
.rp-x1 { animation: rpX1 16s linear infinite; }
.rp-x2 { animation: rpX2 16s linear infinite; }
.rp-c  { animation: rpC 16s linear infinite; }
@keyframes rpX1 { 0%,59%{opacity:0} 62%{opacity:1} 97%{opacity:1} 100%{opacity:0} }
@keyframes rpX2 { 0%,63%{opacity:0} 66%{opacity:1} 97%{opacity:1} 100%{opacity:0} }
@keyframes rpC {
  0%,68% { opacity:0; transform:scale(.5); }
  71%    { opacity:1; transform:scale(1.3); }
  74%    { transform:scale(1); }
  97%    { opacity:1; }
  100%   { opacity:0; }
}
.rp-gate {
  display: flex; align-items: center; gap: 0.45rem; margin-top: 0.45rem;
  font-family: var(--mono); font-size: 0.64rem; color: var(--amber);
  border: 1.5px dashed var(--amber); border-radius: 4px; background: var(--amber-bg);
  padding: 0.3rem 0.5rem; opacity: 0; animation: rpGate 16s linear infinite;
}
@keyframes rpGate {
  0%,56% { opacity:0; box-shadow:none; }
  59%    { opacity:1; }
  62%    { box-shadow: 0 0 0 2.5px rgba(192,132,0,0.45); }
  70%    { box-shadow: none; }
  97%    { opacity:1; }
  100%   { opacity:0; }
}
.rp-door { width: 13px; height: 20px; flex: none; }
.rp-fly {
  position: absolute; left: 52%; top: 70%; z-index: 6; pointer-events: none;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700; color: var(--green);
  background: var(--ok-bg); border: 1.5px solid var(--green); border-radius: 4px;
  padding: 0.28rem 0.55rem; opacity: 0; animation: rpFly 16s linear infinite;
  white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis;
}
@keyframes rpFly {
  0%,76% { opacity:0; left:52%; top:70%; }
  78%    { opacity:1; left:52%; top:70%; }
  87%    { opacity:1; left:4%; top:38%; }
  90%,100% { opacity:0; left:4%; top:38%; }
}
.replay figcaption {
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3);
  margin-top: 0.6rem; line-height: 1.55;
}
@media (max-width: 720px) {
  .rp-stage { grid-template-columns: 1fr; }
  .rp-fly { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-anim { animation: none !important; }
  .ab-bar, .ab-exp, .ab-win, .ac-path, .ac-fail, .ac-diag, .ac-old,
  .ac-strike, .ac-new, .ac-chip, .ac-pass, .ac-rej, .ac-rx { animation: none !important; opacity: 1 !important; }
  .rp-f5, .rp-t5, .rp-side, .rp-hyp, .rp-x, .rp-c, .rp-gate { opacity: 1 !important; transform: none !important; }
  .rp-h3 { border-color: var(--green) !important; background: var(--ok-bg) !important; }
}

/* ============================================================
   history — six one-line crisis cards (index §03)
   ============================================================ */
.histwrap {
  display: grid; grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 1.2rem; align-items: start; margin: 1.2rem 0;
}
@media (max-width: 780px) { .histwrap { grid-template-columns: 1fr; } }
.histwrap .histfig { margin: 0; }
.histwrap .histfig img {
  display: block; width: 100%; height: auto; image-rendering: pixelated;
  border: 1px solid var(--rule); border-radius: 6px; background: #fff;
}
.histwrap .histfig figcaption {
  font-family: var(--mono); font-size: 0.66rem; color: var(--ink-3); margin-top: 0.4rem; line-height: 1.5;
}
.hgrid { display: grid; grid-template-columns: 1fr; gap: 0.55rem; }
.hcard {
  display: flex; align-items: baseline; gap: 0.65rem;
  border: 1.5px solid var(--rule-2); border-radius: 8px; background: var(--surface);
  padding: 0.55rem 0.8rem; text-decoration: none; color: var(--ink);
  font-size: 0.9rem; line-height: 1.45;
  transition: border-color .12s ease, transform .12s ease;
}
.hcard:hover { border-color: var(--accent); transform: translateX(3px); }
.hcard .hn {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--fail); color: var(--fail);
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
}
.hcard .ht b { color: var(--fail); }
.hcard .hfix { font-family: var(--mono); font-size: 0.66rem; color: var(--green); white-space: nowrap; margin-left: auto; align-self: center; }
.hcard.pending .hfix { color: var(--amber); }
@media (max-width: 600px) { .hcard { flex-wrap: wrap; } .hcard .hfix { margin-left: 2rem; } }

/* ============================================================
   interactive subpage grammar — central diagram + pinned panel
   (pipeline.html / trajectory.html)
   ============================================================ */
.pl-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: 1.4rem; align-items: start; margin: 1.6rem 0;
}
.pl-left { min-width: 0; }
.pl-panel {
  position: sticky; top: 60px;
  border: 2px solid var(--ink); border-radius: 10px; background: var(--surface);
  padding: 1rem 1.1rem 1.1rem;
  max-height: calc(100vh - 84px); overflow-y: auto;
}
@media (max-width: 900px) {
  .pl-grid { grid-template-columns: 1fr; }
  .pl-panel { position: static; max-height: none; }
}
.pl-panel .ph-k {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 0.3rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.pl-panel .ph-k .pin {
  margin-left: auto; font-size: 0.6rem; color: var(--paper);
  background: var(--accent); border-radius: 4px; padding: 0.06rem 0.4rem;
}
.pl-panel .ph-k .pin.preview { background: var(--ink-3); }
.pl-panel h3.ph-t { margin: 0 0 0.5rem; font-size: 1.18rem; }
.pl-panel .ph-file {
  display: inline-block; font-family: var(--mono); font-size: 0.66rem;
  background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: 4px;
  padding: 0.1rem 0.45rem; margin: 0 0 0.6rem; word-break: break-all;
}
.pl-panel .ph-role { font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; margin: 0 0 0.6rem; }
.pl-panel .ph-lab {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  margin: 0.9rem 0 0.3rem;
}
.pl-panel .ph-src { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-3); margin: 0.25rem 0 0; }
.pl-panel ol.ph-list { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-2); margin: 0.3rem 0 0.6rem; padding-left: 1.4rem; line-height: 1.6; }
.pl-panel .ph-hint { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3); }
.pl-panel .ev-q {
  margin: 0.5rem 0; padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--rule-2); background: var(--paper-2); border-radius: 0 6px 6px 0;
  font-size: 0.86rem; color: var(--ink-2); line-height: 1.5;
}
.pl-panel .ev-q .src { display: block; font-family: var(--mono); font-size: 0.62rem; color: var(--ink-3); margin-top: 0.3rem; }

pre.prompt {
  font-family: var(--mono); font-size: 0.67rem; line-height: 1.55;
  background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: 8px;
  padding: 0.75rem 0.85rem; margin: 0.3rem 0 0.6rem;
  white-space: pre-wrap; word-break: break-word;
  overflow-x: auto; max-height: 360px; overflow-y: auto;
}

/* vertical flow (pipeline left column) */
.flow.vert .flow-row { flex-direction: column; align-items: stretch; overflow: visible; }
.flow.vert .flow-arrow { transform: rotate(90deg); align-self: center; }
.flow.vert .fphase-body { flex-direction: row; }
@media (max-width: 560px) {
  .flow.vert .fphase-body { flex-direction: column; }
  .flow.vert .fmini { transform: rotate(90deg); align-self: center; }
}
.fnode.active { border-color: var(--accent); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--accent) 35%, transparent); }
.fnode.store { border-style: dotted; }

/* trajectory — clickable crisis timeline cards on the tj spine */
.tlc {
  display: flex; align-items: baseline; gap: 0.6rem;
  border: 1.5px solid var(--rule-2); border-radius: 10px; background: var(--surface);
  padding: 0.7rem 0.9rem; margin-bottom: 0.7rem;
  text-decoration: none; color: var(--ink); position: relative;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.tlc:hover { border-color: var(--accent); }
.tlc.active { border-color: var(--accent); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--accent) 30%, transparent); }
.tlc .tl-t { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; line-height: 1.3; }
.tlc .tl-d { display: block; font-family: var(--mono); font-size: 0.66rem; color: var(--ink-3); margin-top: 0.2rem; }
.tlc .tl-d .fx { color: var(--green); }
.tlc.pending .tl-d .fx { color: var(--amber); }

/* data-load failure note */
#dataerr {
  margin: 1rem 0; padding: 0.7rem 0.9rem; border: 1.5px dashed var(--amber);
  border-radius: 8px; background: var(--amber-bg); color: var(--amber);
  font-family: var(--mono); font-size: 0.72rem;
}