/* ─── Metafore Design Tokens ─────────────────────────────────────────────── */
:root {
  --bg:          #0d0d10;
  --surface:     #141418;
  --surface-2:   #1c1c24;
  --surface-3:   #22222c;
  --border:      #2a2a36;
  --border-l:    #35354a;

  --brand:       #7c5cff;
  --brand-dim:   #5a3fd6;
  --accent:      #c4b5fd;
  --accent-dim:  #a78bfa;

  --text:        #f0f0f5;
  --text-2:      #c4c4d4;
  --muted:       #8b8b9a;
  --muted-2:     #6b6b7a;

  --ok:          #22c55e;
  --ok-bg:       rgba(34,197,94,.10);
  --warn:        #f59e0b;
  --warn-bg:     rgba(245,158,11,.10);
  --danger:      #ef4444;
  --danger-bg:   rgba(239,68,68,.10);
  --info:        #38bdf8;
  --info-bg:     rgba(56,189,248,.10);

  --stage-1:     #a78bfa;
  --stage-2:     #60a5fa;
  --stage-3:     #34d399;
  --stage-4:     #f59e0b;

  --radius:      10px;
  --radius-sm:   6px;
  --shadow:      0 2px 16px rgba(0,0,0,.45);
  --shadow-lg:   0 8px 40px rgba(0,0,0,.6);
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 60px; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.7;
}
::selection { background: rgba(124,92,255,.25); color: var(--accent); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--brand); text-decoration: underline; }

/* ─── Reading progress ───────────────────────────────────────────────────── */
#read-progress {
  position: fixed; top: 0; left: 0; width: 0%; height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  z-index: 9999; transition: width .08s linear; border-radius: 0 2px 2px 0;
}
#back-top {
  position: fixed; bottom: 28px; right: 28px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand); color: #fff; border: none;
  font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(14px) scale(.9);
  transition: opacity .25s, transform .25s, background .2s;
  box-shadow: var(--shadow); z-index: 9998;
}
#back-top.visible { opacity: 1; transform: none; }
#back-top:hover   { background: var(--brand-dim); }

/* ─── Page shell ─────────────────────────────────────────────────────────── */
.page { max-width: 1100px; margin: 0 auto; padding: 0 24px 80px; }

/* ─── Cover ──────────────────────────────────────────────────────────────── */
.cover {
  text-align: center;
  padding: 72px 24px 56px;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,92,255,.12) 0%, transparent 70%);
}
.cover .eyebrow {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); font-weight: 600; margin-bottom: 20px;
}
.cover h1 {
  font-size: clamp(26px, 5vw, 42px); font-weight: 700; line-height: 1.2;
  color: var(--text); margin-bottom: 18px;
}
.cover h1 span { color: var(--brand); }
.cover .sub {
  font-size: 14.5px; color: var(--text-2); max-width: 640px;
  margin: 0 auto 28px; line-height: 1.65;
}
.meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 24px;
}
.meta span {
  font-size: 11px; padding: 4px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; color: var(--text-2);
}
.meta span.live { border-color: var(--ok); color: var(--ok); }
.meta span.brand { border-color: var(--brand); color: var(--accent); }

/* ─── Quick Brief ────────────────────────────────────────────────────────── */
.quick-brief {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 36px;
  margin: 36px 0;
}
.qb-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); font-weight: 700; margin-bottom: 14px;
}
.qb-what {
  font-size: 14px; color: var(--text-2); line-height: 1.75;
  margin-bottom: 28px; max-width: 820px;
}
.qb-what strong { color: var(--text); }

/* Pipeline progress strip */
.pipeline-progress {
  display: flex; align-items: center; gap: 0;
  margin: 24px 0 32px; overflow-x: auto; padding-bottom: 4px;
}
.pp-step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 100px; }
.pp-node {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.pp-node.done {
  background: var(--brand); border-color: var(--brand);
  box-shadow: 0 0 12px rgba(124,92,255,.4);
}
.pp-node.done::after { content: '✓'; color: #fff; font-size: 14px; font-weight: 700; }
.pp-node.active { border-color: var(--warn); background: var(--surface-2); }
.pp-node.active::after { content: '●'; color: var(--warn); font-size: 10px; }
.pp-title { font-size: 11px; color: var(--muted); text-align: center; font-weight: 500; }
.pp-line { flex: 1; height: 2px; background: var(--border); min-width: 24px; }
.pp-line.done { background: var(--brand); }

/* Stat strip */
.qb-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px; margin-bottom: 28px;
}
.qb-stat {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px; text-align: center;
}
.qs-num { font-size: 22px; font-weight: 700; color: var(--brand); line-height: 1; margin-bottom: 4px; }
.qs-label { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.qs-sub { font-size: 10.5px; color: var(--muted); }

/* QB grid (tables) */
.qb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
@media (max-width: 640px) { .qb-grid { grid-template-columns: 1fr; } }
.qb-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); font-weight: 600; margin-bottom: 10px; }
.qb-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.qb-table th { text-align: left; padding: 7px 10px; background: var(--surface-3); color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); }
.qb-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text-2); }
.qb-table tr:last-child td { border-bottom: none; }
.qb-table td:last-child { color: var(--ok); font-weight: 500; }
.qb-table td.na { color: var(--muted); }

/* ─── TOC ────────────────────────────────────────────────────────────────── */
.toc-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 32px; margin-bottom: 36px;
}
.toc-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); font-weight: 700; margin-bottom: 16px;
}
.toc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 640px) { .toc-cols { grid-template-columns: 1fr; } }
.toc-col { display: flex; flex-direction: column; gap: 20px; }
.toc-group-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.toc-pill {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-radius: var(--radius-sm); color: var(--text-2); font-size: 12.5px;
  transition: background .15s, color .15s;
}
.toc-pill:hover { background: var(--surface-2); color: var(--accent); text-decoration: none; }
.toc-pill.active { background: rgba(124,92,255,.12); color: var(--accent); }
.toc-num { font-size: 10px; color: var(--muted); font-weight: 600; min-width: 24px; }

/* ─── Legend bar ─────────────────────────────────────────────────────────── */
.legend-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px 16px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 32px;
  font-size: 11.5px;
}
.legend-label { font-weight: 700; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }
.legend-item { display: flex; align-items: center; gap: 6px; color: var(--muted); }

/* ─── Tags / badges ──────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 20px;
}
.tag-confirmed  { background: var(--ok-bg);      color: var(--ok);     border: 1px solid rgba(34,197,94,.3);  }
.tag-direction  { background: var(--info-bg);     color: var(--info);   border: 1px solid rgba(56,189,248,.3); }
.tag-planned    { background: rgba(124,92,255,.12); color: var(--accent); border: 1px solid rgba(124,92,255,.3); }
.tag-open       { background: var(--warn-bg);     color: var(--warn);   border: 1px solid rgba(245,158,11,.3); }
.tag-done       { background: var(--ok-bg);       color: var(--ok);     border: 1px solid rgba(34,197,94,.3);  }
.tag-wip        { background: var(--warn-bg);     color: var(--warn);   border: 1px solid rgba(245,158,11,.3); }
.tag-todo       { background: var(--surface-3);   color: var(--muted);  border: 1px solid var(--border); }
.tag-danger     { background: var(--danger-bg);   color: var(--danger); border: 1px solid rgba(239,68,68,.3);  }
.tag-stage1     { background: rgba(167,139,250,.12); color: var(--stage-1); border: 1px solid rgba(167,139,250,.3); }
.tag-stage2     { background: rgba(96,165,250,.12);  color: var(--stage-2); border: 1px solid rgba(96,165,250,.3);  }
.tag-stage3     { background: rgba(52,211,153,.12);  color: var(--stage-3); border: 1px solid rgba(52,211,153,.3);  }
.tag-stage4     { background: rgba(245,158,11,.12);  color: var(--stage-4); border: 1px solid rgba(245,158,11,.3);  }

/* ─── Section headings ───────────────────────────────────────────────────── */
.part-div {
  display: flex; align-items: center; gap: 12px;
  margin: 56px 0 32px; padding: 16px 20px;
  background: linear-gradient(90deg, rgba(124,92,255,.08) 0%, transparent 70%);
  border-left: 3px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.part-div .part-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 800; color: var(--brand);
}
.part-div .part-title { font-size: 17px; font-weight: 700; color: var(--text); }
.part-div .part-desc  { font-size: 12px; color: var(--muted); margin-top: 2px; }

h2 {
  font-size: 20px; font-weight: 700; color: var(--text);
  margin: 40px 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 70px;
}
h2 .snum { font-size: 12px; color: var(--muted); font-weight: 600; margin-right: 8px; }
h3 {
  font-size: 14px; font-weight: 600; color: var(--text-2);
  margin: 28px 0 12px; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
h3:hover { color: var(--accent); }
.h3-badge {
  font-size: 10px; color: var(--muted); border: 1px solid var(--border);
  border-radius: 12px; padding: 1px 8px; font-weight: 500; white-space: nowrap;
  transition: color .15s;
}
h3.h3-collapsed { color: var(--muted); }
h3.h3-collapsed .h3-badge { color: var(--accent); border-color: var(--brand); }
h4 { font-size: 13px; font-weight: 600; color: var(--accent); margin: 20px 0 8px; }

p { color: var(--text-2); margin-bottom: 12px; }
p strong { color: var(--text); }
ul, ol { color: var(--text-2); padding-left: 20px; margin-bottom: 12px; }
li { margin-bottom: 5px; }

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px;
  position: relative; transition: border-color .2s;
}
.card:hover { border-color: var(--border-l); }
.card.collapsed > *:not(.ctag):not(.card-toggle):not(h3) { display: none; }
.ctag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--muted); margin-bottom: 10px; display: block;
}
.card-toggle {
  font-size: 10px; color: var(--muted); border: 1px solid var(--border);
  border-radius: 12px; padding: 1px 8px; cursor: pointer; margin-left: 8px;
  display: inline-block; transition: color .15s;
}
.card-toggle:hover { color: var(--accent); }
.card-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.card-sub   { font-size: 12px; color: var(--muted); margin-bottom: 12px; }

/* Stage cards */
.stage-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px;
  position: relative; overflow: hidden;
  transition: border-color .2s, transform .15s;
}
.stage-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.stage-card.s1::before { background: var(--stage-1); }
.stage-card.s2::before { background: var(--stage-2); }
.stage-card.s3::before { background: var(--stage-3); }
.stage-card.s4::before { background: var(--stage-4); }
.stage-card:hover { border-color: var(--border-l); transform: translateY(-1px); }
.stage-card .sc-num  { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.stage-card .sc-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.stage-card .sc-sub   { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.stage-card .sc-body  { font-size: 12.5px; color: var(--text-2); line-height: 1.65; }
.stage-card .sc-meta  { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.stage-card .sc-file  { font-size: 10.5px; padding: 3px 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); font-family: 'Cascadia Code', 'Fira Code', monospace; }

/* Metric / stat cards */
.metric-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px 18px; cursor: pointer;
  transition: border-color .2s;
}
.metric-card:hover { border-color: var(--brand); }
.metric-card .mc-num   { font-size: 26px; font-weight: 800; color: var(--brand); line-height: 1; }
.metric-card .mc-label { font-size: 12px; font-weight: 600; color: var(--text); margin: 4px 0 2px; }
.metric-card .mc-sub   { font-size: 11px; color: var(--muted); }
.metric-card .mc-desc  { display: none; font-size: 12px; color: var(--text-2); margin-top: 10px; line-height: 1.6; padding-top: 10px; border-top: 1px solid var(--border); }
.metric-card.expanded .mc-desc { display: block; }

/* ─── Grids ───────────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
@media (max-width: 860px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ─── Tables ──────────────────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; margin-bottom: 20px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
table.std { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.std th { background: var(--surface-2); color: var(--muted); font-weight: 600; text-align: left; padding: 9px 13px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); }
table.std td { padding: 9px 13px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
table.std tr:last-child td { border-bottom: none; }
table.std tr:hover td { background: var(--surface-2); }
table.std td code { font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: 11.5px; background: var(--surface-3); padding: 1px 6px; border-radius: 4px; color: var(--accent-dim); }
table.std .method { font-family: monospace; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
table.std .method.get  { background: rgba(52,211,153,.1);  color: var(--stage-3); }
table.std .method.post { background: rgba(124,92,255,.1);  color: var(--accent);  }
table.std .method.put  { background: rgba(245,158,11,.1);  color: var(--warn);    }
table.std .method.del  { background: rgba(239,68,68,.1);   color: var(--danger);  }

/* ─── Diagram boxes ───────────────────────────────────────────────────────── */
.diagram-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; margin-bottom: 20px; overflow-x: auto;
}
.diagram-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 600; margin-bottom: 14px;
}
.mermaid svg { max-width: 100%; }

/* ─── Code blocks ─────────────────────────────────────────────────────────── */
.pre-wrap {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 16px;
}
.pre-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--surface-3);
  border-bottom: 1px solid var(--border);
  font-size: 11px; color: var(--muted); font-weight: 600;
}
.pre-wrap pre, .ep-code {
  padding: 14px 16px; overflow-x: auto;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
  font-size: 12px; line-height: 1.7; color: var(--text-2);
  white-space: pre;
}
.tok-key  { color: #60a5fa; }
.tok-str  { color: #34d399; }
.tok-num  { color: #f59e0b; }
.tok-null { color: #ef4444; }
.tok-kw   { color: var(--brand); font-weight: 600; }
.tok-type { color: #38bdf8; }
.tok-mod  { color: #a78bfa; }
.tok-rel  { color: #fb923c; }
.tok-enum { color: #f9a8d4; }

/* ─── Info / callout boxes ────────────────────────────────────────────────── */
.callout {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius-sm);
  margin-bottom: 16px; border-left: 3px solid;
}
.callout.ok     { background: var(--ok-bg);     border-color: var(--ok);     }
.callout.warn   { background: var(--warn-bg);   border-color: var(--warn);   }
.callout.info   { background: var(--info-bg);   border-color: var(--info);   }
.callout.danger { background: var(--danger-bg); border-color: var(--danger); }
.callout.brand  { background: rgba(124,92,255,.08); border-color: var(--brand); }
.callout-icon { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.callout p    { margin: 0; font-size: 13px; }
.callout p strong { color: var(--text); }

/* ─── Phase strip / timeline ──────────────────────────────────────────────── */
.phase-strip {
  display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.phase-item {
  flex: 1; min-width: 160px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.phase-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 6px; }
.phase-label.now  { color: var(--ok);   }
.phase-label.next { color: var(--warn); }
.phase-label.later{ color: var(--muted);}
.phase-item ul    { margin: 0; padding-left: 16px; }
.phase-item li    { font-size: 12px; color: var(--text-2); margin-bottom: 3px; }

/* ─── Construct heatmap ───────────────────────────────────────────────────── */
.heatmap { overflow-x: auto; margin-bottom: 20px; }
.heatmap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.heatmap th { background: var(--surface-2); color: var(--muted); font-weight: 600; padding: 8px 12px; border: 1px solid var(--border); font-size: 11px; }
.heatmap td { padding: 8px 12px; border: 1px solid var(--border); text-align: center; font-weight: 600; font-size: 11.5px; }
.hm-full  { background: rgba(34,197,94,.15);  color: var(--ok); }
.hm-part  { background: rgba(245,158,11,.12); color: var(--warn); }
.hm-none  { background: var(--surface-2);     color: var(--muted-2); }
.hm-row-label { text-align: left; font-weight: 600; color: var(--text-2); }

/* ─── Mode comparison ─────────────────────────────────────────────────────── */
.mode-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;
}
@media (max-width: 640px) { .mode-compare { grid-template-columns: 1fr; } }
.mode-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.mode-card .mode-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 8px; }
.mode-card.mode-a .mode-label { color: var(--stage-2); }
.mode-card.mode-b .mode-label { color: var(--stage-3); }
.mode-card .mode-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.mode-card ul { padding-left: 16px; }
.mode-card li { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }

/* ─── Roadmap / Now-Next-Later ────────────────────────────────────────────── */
.roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 640px) { .roadmap { grid-template-columns: 1fr; } }
.rm-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.rm-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.rm-label.now  { color: var(--ok); }
.rm-label.next { color: var(--warn); }
.rm-label.later{ color: var(--info); }
.rm-item { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; font-size: 12px; color: var(--text-2); }
.rm-item::before { content: '→'; color: var(--muted); flex-shrink: 0; margin-top: 1px; }

/* Ticket rows */
.ticket-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px; font-size: 12.5px;
}
.ticket-id { font-size: 10.5px; font-family: monospace; color: var(--muted); min-width: 52px; font-weight: 600; }
.ticket-title { flex: 1; color: var(--text-2); }
.ticket-status { flex-shrink: 0; }

/* ─── Glossary ────────────────────────────────────────────────────────────── */
.glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.gl-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.gl-term { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 5px; }
.gl-def  { font-size: 12px; color: var(--text-2); line-height: 1.6; }

/* ─── Example pairs ───────────────────────────────────────────────────────── */
.example-pair { margin-bottom: 24px; }
.ep-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.ep-intent { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 10px 14px; font-size: 13px; color: var(--text); }
.ep-code { background: var(--bg); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

/* ─── OI / key-insight boxes ──────────────────────────────────────────────── */
.oi {
  display: flex; gap: 12px; padding: 14px 18px;
  background: rgba(124,92,255,.07); border: 1px solid rgba(124,92,255,.2);
  border-radius: var(--radius-sm); margin-bottom: 16px;
}
.oi-icon { font-size: 18px; flex-shrink: 0; }
.oi-body { font-size: 13px; color: var(--text-2); line-height: 1.65; }
.oi-body strong { color: var(--text); }

/* Plugin contract box */
.plugin-contract {
  background: var(--surface-2); border: 1px solid var(--border-l);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 20px;
}
.pc-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--brand); margin-bottom: 14px; }
.pc-row { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pc-row:last-child { border-bottom: none; }
.pc-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.pc-key   { font-size: 12.5px; font-weight: 700; color: var(--text); min-width: 110px; }
.pc-val   { font-size: 12px; color: var(--text-2); line-height: 1.6; }
.pc-val code { font-family: monospace; font-size: 11.5px; background: var(--surface-3); padding: 1px 6px; border-radius: 4px; color: var(--accent-dim); }

/* ─── Research section ────────────────────────────────────────────────────── */
.research-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px; margin-bottom: 16px;
}
.research-card .rc-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 6px; }
.research-card.rc-476 .rc-label { color: var(--stage-2); }
.research-card.rc-477 .rc-label { color: var(--stage-3); }
.research-card .rc-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.research-card .rc-body  { font-size: 13px; color: var(--text-2); line-height: 1.7; }

/* Maturity bar */
.maturity-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.maturity-label { font-size: 12px; color: var(--text-2); min-width: 160px; }
.maturity-bar   { flex: 1; height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.maturity-fill  { height: 100%; border-radius: 4px; background: var(--brand); transition: width .4s ease; }
.maturity-val   { font-size: 11px; color: var(--muted); min-width: 30px; text-align: right; }

/* ─── Reveal animation ────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease; }
.reveal.in-view { opacity: 1; transform: none; }

/* ─── Changelog ───────────────────────────────────────────────────────────── */
.changelog-entry {
  display: flex; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.changelog-entry:last-child { border-bottom: none; }
.cl-ver { font-size: 13px; font-weight: 700; color: var(--brand); min-width: 48px; }
.cl-date { font-size: 11px; color: var(--muted); min-width: 80px; margin-top: 2px; }
.cl-body { font-size: 12.5px; color: var(--text-2); line-height: 1.65; }
.cl-body strong { color: var(--text); display: block; margin-bottom: 3px; }

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-l); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* ─── Loading state ───────────────────────────────────────────────────────── */
.loading-msg { color: var(--muted); font-size: 13px; padding: 40px 0; text-align: center; }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page { padding: 0 14px 60px; }
  .quick-brief { padding: 20px 18px; }
  .toc-wrap { padding: 20px 18px; }
  .qb-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Light Mode ─────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:         #f4f4fa;
  --surface:    #ffffff;
  --surface-2:  #ededf5;
  --surface-3:  #e3e3ef;
  --border:     #d0d0e4;
  --border-l:   #bbbbd4;

  --brand:      #6040e8;
  --brand-dim:  #4828c4;
  --accent:     #5030c8;
  --accent-dim: #7c5cff;

  --text:       #111128;
  --text-2:     #30305a;
  --muted:      #60608a;
  --muted-2:    #88889a;

  --ok-bg:      rgba(34,197,94,.14);
  --warn-bg:    rgba(245,158,11,.14);
  --danger-bg:  rgba(239,68,68,.14);
  --info-bg:    rgba(56,189,248,.14);

  --shadow:     0 2px 14px rgba(80,60,180,.10);
  --shadow-lg:  0 8px 32px rgba(80,60,180,.16);
}
[data-theme="light"] body { color: var(--text); }
[data-theme="light"] ::selection { background: rgba(96,64,232,.18); color: var(--brand); }
[data-theme="light"] a { color: var(--brand); }
[data-theme="light"] a:hover { color: var(--brand-dim); }
[data-theme="light"] .cover { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(96,64,232,.08) 0%, transparent 70%); }
[data-theme="light"] .oi { background: rgba(96,64,232,.06); border-color: rgba(96,64,232,.18); }
[data-theme="light"] .pp-node.done { box-shadow: 0 0 10px rgba(96,64,232,.3); }
[data-theme="light"] .hm-full { background: rgba(34,197,94,.22); }
[data-theme="light"] .hm-part { background: rgba(245,158,11,.18); }
[data-theme="light"] .hm-none { background: var(--surface-3); }
[data-theme="light"] .metric-card:hover { border-color: var(--brand); }
[data-theme="light"] .toc-pill:hover { background: var(--surface-2); color: var(--brand); }
[data-theme="light"] .toc-pill.active { background: rgba(96,64,232,.10); color: var(--brand); }
[data-theme="light"] .part-div { background: linear-gradient(90deg, rgba(96,64,232,.07) 0%, transparent 70%); }
[data-theme="light"] .callout.brand { background: rgba(96,64,232,.06); }
[data-theme="light"] table.std tr:hover td { background: var(--surface-2); }
[data-theme="light"] .read-progress { background: linear-gradient(90deg, var(--brand) 0%, #a78bfa 100%); }

/* TL;DR strip */
.tldr {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 16px; margin-bottom: 24px;
  background: rgba(124,92,255,.07); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px; color: var(--text-2);
}
[data-theme="light"] .tldr { background: rgba(96,64,232,.06); }
.tldr strong { color: var(--brand); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin-right: 6px; flex-shrink: 0; margin-top: 2px; }

/* Workflow step divider */
.workflow-step {
  display: flex; align-items: center; gap: 10px;
  margin: 28px 0 12px; padding: 8px 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 11.5px;
}
.ws-num { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); min-width: 52px; }
.ws-title { font-weight: 600; color: var(--text); }
.ws-desc { color: var(--muted); margin-left: 4px; }

/* Unlocks column badge */
.unlocks-cell { color: var(--ok); font-size: 12px; }

/* Theme toggle button */
#theme-toggle {
  position: fixed; top: 16px; right: 20px; z-index: 9997;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); transition: background .2s, border-color .2s, color .2s;
}
#theme-toggle:hover { border-color: var(--brand); color: var(--brand); }