:root {
  --ink: #0c1113;
  --stone-950: #101719;
  --stone-900: #172126;
  --steel-800: #253238;
  --steel-650: #586b70;
  --steel-300: #a7b7b2;
  --bone: #f0e2c3;
  --paper: #d9d3c5;
  --safety: #f2c14e;
  --slime: #6ccb5f;
  --ghost: #61c9d8;
  --danger: #d95d4f;
  --blue: #4f8cc9;
  --success: #78c98a;
  --line: #405057;
  --max: 1640px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--bone);
  background: var(--ink);
  font: 14px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
  letter-spacing: 0;
}
a { color: var(--ghost); }
button, input, select { font: inherit; letter-spacing: 0; }
code { color: var(--ghost); overflow-wrap: anywhere; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--safety); color: var(--ink); padding: 10px; }
.skip-link:focus { top: 12px; }

.spec-header {
  min-height: 196px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  padding: 42px max(28px, calc((100vw - var(--max)) / 2 + 28px)) 28px;
  border-bottom: 4px solid var(--safety);
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(242,193,78,.08) 9px 14px),
    var(--stone-900);
}
.spec-header h1 { margin: 0; font: 800 42px/1.05 ui-monospace, SFMono-Regular, Menlo, monospace; }
.subtitle { margin: 8px 0 0; color: var(--steel-300); font-size: 18px; }
.eyebrow { margin: 0 0 8px; color: var(--safety); font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.authority-plate { max-width: 620px; display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; align-items: center; }
.scope { display: inline-flex; padding: 4px 7px; border: 1px solid currentColor; font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.scope.current { color: var(--success); }
.scope.evidence { color: var(--ghost); }
.scope.proposed { color: var(--safety); }

.book-layout { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
.toc { position: sticky; top: 0; max-height: 100vh; overflow: auto; padding: 26px 18px; border-right: 1px solid var(--line); }
.toc > strong { color: var(--safety); font-family: ui-monospace, monospace; }
.toc > a { display: block; color: var(--steel-300); text-decoration: none; padding: 7px 0; }
.toc > a:hover, .toc > a:focus { color: var(--bone); }
.toc hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.filter-box { display: grid; gap: 6px; }
.filter-box > span { color: var(--steel-300); font: 700 10px ui-monospace, monospace; }
.filter-button { min-height: 36px; text-align: left; border: 1px solid var(--line); border-radius: 2px; color: var(--steel-300); background: var(--stone-900); cursor: pointer; }
.filter-button.selected { border-color: var(--safety); color: var(--bone); box-shadow: inset 4px 0 var(--safety); }

.spec-book { min-width: 0; }
.chapter { position: relative; padding: 62px 42px 72px; border-bottom: 1px solid var(--line); background: var(--stone-950); }
.chapter:nth-child(even) { background: #121b1e; }
.chapter-index { position: absolute; right: 28px; top: 24px; color: rgba(242,193,78,.14); font: 900 92px/.8 ui-monospace, monospace; }
.chapter-heading { max-width: 970px; margin-bottom: 34px; }
.chapter-heading h2 { margin: 0 0 12px; max-width: 900px; font-size: 30px; line-height: 1.16; }
.chapter-heading p:not(.eyebrow) { color: var(--steel-300); }
.lead { font-size: 18px; line-height: 1.55; }
h3 { margin: 40px 0 14px; font-size: 18px; }
p { margin: 7px 0; }
.count-badge { display: inline-block; color: var(--ghost); font: 700 12px ui-monospace, monospace; }

.contract-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.contract-grid article { min-height: 132px; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contract-grid article:nth-child(3n) { border-right: 0; }
.contract-grid b { color: var(--safety); }
.contract-grid p { color: var(--steel-300); }
.anti-pillars { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 24px 0; }
.anti-pillars b { color: var(--danger); margin-right: 8px; }
.anti-pillars span { border-left: 3px solid var(--danger); background: rgba(217,93,79,.09); padding: 6px 9px; }
.time-ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.time-step { min-height: 138px; padding: 14px; background: var(--steel-800); border-top: 4px solid var(--ghost); }
.time-step b { display: block; color: var(--ghost); font-family: ui-monospace, monospace; }
.time-step span { color: var(--steel-300); }
.boundary-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 24px; background: var(--line); border: 1px solid var(--line); }
.boundary-panel > div { padding: 18px; background: var(--stone-900); }

.ia-tree { display: grid; grid-template-columns: 150px repeat(5, 1fr); gap: 2px; overflow: auto; }
.tree-root, .tree-branch { min-width: 145px; padding: 14px; border: 1px solid var(--line); }
.tree-root { display: grid; place-items: center; background: var(--safety); color: var(--ink); font-weight: 900; text-align: center; }
.tree-branch { background: var(--steel-800); }
.tree-branch b, .tree-branch span { display: block; }
.tree-branch b { color: var(--ghost); margin-bottom: 8px; }
.tree-branch span { color: var(--steel-300); padding: 3px 0; }

.table-scroll { width: 100%; overflow: auto; border: 1px solid var(--line); }
.spec-table { width: 100%; min-width: 980px; border-collapse: collapse; background: var(--stone-900); }
.spec-table th { position: sticky; top: 0; z-index: 1; color: var(--ink); background: var(--safety); text-align: left; font-size: 11px; }
.spec-table th, .spec-table td { padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table td { color: var(--steel-300); }
.spec-table td:first-child { color: var(--bone); }
.spec-table b { color: var(--bone); }
.spec-table small { display: block; color: var(--steel-300); }
.spec-table tr[data-scope="proposed"] td:first-child { box-shadow: inset 4px 0 var(--safety); }
.spec-table tr[data-scope="current"] td:first-child { box-shadow: inset 4px 0 var(--success); }

.atlas-summary, .campaign-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.metric-plate { min-width: 150px; padding: 12px 14px; border: 1px solid var(--line); background: var(--steel-800); }
.metric-plate b { display: block; color: var(--safety); font: 800 24px ui-monospace, monospace; }
.metric-plate span { color: var(--steel-300); }
.artboard-atlas { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 18px 12px; align-items: start; }
.artboard { min-width: 0; border-top: 4px solid var(--steel-650); }
.artboard[data-scope="current"] { border-top-color: var(--success); }
.artboard[data-kind="modals"] { border-top-color: var(--ghost); }
.artboard-head { min-height: 69px; padding: 8px 6px; }
.artboard-head b { display: block; font-size: 12px; }
.artboard-head span { color: var(--steel-300); font-size: 10px; }
.artboard-viewport { --frame-scale: .44; position: relative; width: 172px; height: 372px; overflow: hidden; border: 4px solid #39484d; background: #000; box-shadow: 6px 6px 0 #070a0b; }
.artboard-viewport img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; background: #101719; }
.artboard-meta { padding: 9px 6px; font-size: 10px; color: var(--steel-300); }

.loop-chain { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.loop-step { position: relative; min-height: 126px; padding: 13px; background: var(--steel-800); border-bottom: 4px solid var(--ghost); }
.loop-step:not(:last-child)::after { content: ">"; position: absolute; right: -7px; top: 50%; z-index: 2; color: var(--safety); font-weight: 900; }
.loop-step b { display: block; color: var(--ghost); }
.loop-step span { color: var(--steel-300); font-size: 12px; }
.system-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 28px; background: var(--line); border: 1px solid var(--line); }
.system-columns article { padding: 18px; background: var(--stone-900); }
.system-columns h3 { margin-top: 0; }
.system-columns li, .rule-list li { margin: 8px 0; color: var(--steel-300); }

.source-note { padding: 14px; border-left: 4px solid var(--safety); background: var(--steel-800); }
.formula-sheet, .worked-examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.formula-card, .example-card { padding: 16px; border: 1px solid var(--line); background: var(--stone-900); }
.formula-card code { display: block; margin: 8px 0; padding: 10px; background: #090d0f; }
.formula-card p, .example-card p { color: var(--steel-300); }

.synergy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.synergy-card { padding: 16px; border-top: 4px solid var(--ghost); background: var(--steel-800); }
.synergy-card b { color: var(--ghost); }
.synergy-card .incompatible { color: var(--danger); }

.chapter-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.chapter-beat { min-height: 198px; padding: 15px; border: 1px solid var(--line); background: var(--stone-900); }
.chapter-beat.current { border-top: 4px solid var(--success); }
.chapter-beat.proposed { border-top: 4px solid var(--safety); }
.chapter-beat h4 { margin: 8px 0; font-size: 15px; }
.chapter-beat p, .chapter-beat li { color: var(--steel-300); font-size: 12px; }
.campaign-controls { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; }
.campaign-controls label { display: flex; gap: 8px; align-items: center; }
.campaign-controls select, .campaign-controls input { min-height: 42px; color: var(--bone); border: 1px solid var(--steel-650); background: var(--steel-800); padding: 0 10px; }
.campaign-controls input { min-width: 300px; }
.campaign-table { min-width: 1680px; }
.campaign-table tr.is-filtered { display: none; }
.ending-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ending-card { padding: 18px; border: 1px solid var(--line); background: var(--steel-800); }
.ending-card b { color: var(--safety); }

.token-grid, .accessibility-grid, .verification-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.token-card, .access-card, .verify-card { min-height: 150px; padding: 16px; border: 1px solid var(--line); background: var(--steel-800); }
.token-card h3, .access-card h3, .verify-card h3 { margin: 0 0 9px; color: var(--safety); }
.token-card p, .access-card p, .verify-card p { color: var(--steel-300); }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.swatch { width: 30px; height: 30px; border: 1px solid var(--paper); }
.evidence-ladder { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.evidence-step { min-height: 88px; padding: 10px; background: var(--steel-800); border-top: 4px solid var(--steel-650); font-size: 11px; }
.evidence-step.closed { border-color: var(--success); }
.evidence-step.open { border-color: var(--danger); }
.final-boundary { margin-top: 30px; padding: 20px; border: 2px solid var(--danger); background: rgba(217,93,79,.08); }
.final-boundary b { color: var(--danger); }

[hidden], .filtered-out { display: none !important; }
footer { padding: 28px; border-top: 4px solid var(--safety); color: var(--steel-300); text-align: center; background: var(--stone-900); }

@media (max-width: 1050px) {
  .book-layout { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 5px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .toc > strong, .toc > a { display: inline-block; }
  .toc hr { display: none; }
  .filter-box { width: 100%; grid-template-columns: repeat(5, 1fr); }
  .contract-grid, .chapter-map { grid-template-columns: repeat(2, 1fr); }
  .time-ladder, .loop-chain { grid-template-columns: repeat(3, 1fr); }
  .loop-step::after { display: none; }
}

@media (max-width: 680px) {
  .spec-header { min-height: 0; padding: 26px 18px; align-items: start; flex-direction: column; }
  .spec-header h1 { font-size: 29px; }
  .authority-plate { justify-content: start; }
  .chapter { padding: 50px 16px 58px; }
  .chapter-heading h2 { font-size: 25px; }
  .contract-grid, .time-ladder, .loop-chain, .system-columns, .formula-sheet, .worked-examples, .synergy-grid, .chapter-map, .ending-grid, .token-grid, .accessibility-grid, .verification-grid, .boundary-panel { grid-template-columns: 1fr; }
  .contract-grid article { border-right: 0; }
  .filter-box { grid-template-columns: repeat(2, 1fr); }
  .artboard-atlas { grid-template-columns: repeat(2, minmax(156px, 1fr)); }
  .artboard-viewport { --frame-scale: .39; width: 153px; height: 330px; }
  .campaign-controls label, .campaign-controls input { width: 100%; min-width: 0; }
  .evidence-ladder { grid-template-columns: repeat(2, 1fr); }
}