:root {
  --void: #05080b;
  --graphite: #11161a;
  --graphite-2: #182126;
  --steel-dark: #213037;
  --steel: #31444a;
  --grid: #46565a;
  --bone: #e8e1cf;
  --bone-dim: #b9b5a9;
  --amber: #e6a24a;
  --cyan: #56d7d4;
  --magenta: #d36aa7;
  --fault: #e67e45;
  --paper: #eef0eb;
  --ink: #172126;
  --device-ratio: 844 / 390;
  --device-width: 100%;
  font-family: "Noto Sans CJK SC", "PingFang SC", "SF Pro Text", system-ui, sans-serif;
  color: var(--ink);
  background: #d9ded9;
}

* { box-sizing: border-box; letter-spacing: 0; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #d9ded9; }
a { color: #086d72; text-underline-offset: 3px; }
button, select { font: inherit; }

.book-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  min-height: 188px;
  padding: 34px clamp(24px, 5vw, 76px) 28px;
  color: var(--bone);
  background: var(--graphite);
  border-bottom: 8px solid var(--amber);
}

.eyebrow, .kicker { margin: 0 0 8px; font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--amber); text-transform: uppercase; }
.book-header h1 { margin: 0; font-size: clamp(34px, 5vw, 70px); line-height: .92; }
.subtitle { margin: 12px 0 0; color: var(--bone-dim); font-size: 17px; }
.header-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; max-width: 540px; }
.prototype-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; color: var(--bone); border: 2px solid var(--bone); text-decoration: none; font-weight: 800; }
.prototype-link::after { content: "↗"; margin-left: 8px; }

.status-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 8px; color: var(--bone); background: var(--steel-dark); border-left: 4px solid var(--grid); font: 800 10px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.status-tag.current { border-color: var(--cyan); }
.status-tag.candidate { border-color: var(--amber); }
.status-tag.proposed { border-color: var(--magenta); }

.book-layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); max-width: 1700px; margin: 0 auto; }
.toc { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; max-height: 100vh; padding: 28px 18px; overflow: auto; }
.toc > a { padding: 10px 12px; color: #243339; border-left: 3px solid transparent; text-decoration: none; font-weight: 750; }
.toc > a:hover, .toc > a:focus-visible { background: #c8cfca; border-color: #0d7b7f; }
.toc-note { margin-top: 22px; padding: 14px 12px; color: var(--bone); background: var(--steel-dark); border-top: 4px solid var(--fault); }
.toc-note strong, .toc-note span { display: block; }
.toc-note span { margin-top: 8px; color: var(--bone-dim); font-size: 12px; line-height: 1.45; }
main { min-width: 0; background: var(--paper); border-left: 1px solid #c4cbc6; }

.notice-band { padding: 18px clamp(18px, 4vw, 56px); color: var(--bone); background: var(--steel-dark); border-bottom: 1px solid var(--steel); }
.notice-band strong { color: var(--amber); }
.notice-band p { margin: 8px 0 0; line-height: 1.6; }
.notice-band a { color: var(--cyan); }

.spec-section { padding: 60px clamp(18px, 4vw, 58px) 72px; border-bottom: 1px solid #c8d0ca; }
.spec-section:nth-of-type(even) { background: #e6e9e5; }
.section-heading { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 30px; }
.section-heading > span { display: grid; place-items: center; flex: 0 0 50px; height: 50px; color: var(--bone); background: var(--steel-dark); border-bottom: 6px solid var(--amber); font: 900 24px/1 ui-monospace, monospace; }
.section-heading h2 { margin: 0; font-size: clamp(25px, 3vw, 42px); line-height: 1.05; }
.subsection-title { margin: 38px 0 14px; font-size: 20px; }

.contract-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.contract-grid article { min-height: 132px; padding: 18px; background: #fff; border-top: 5px solid var(--steel); }
.contract-grid article:nth-child(2), .contract-grid article:nth-child(5) { border-color: #0f9294; }
.contract-grid article:nth-child(3), .contract-grid article:nth-child(6) { border-color: #b34f88; }
.contract-grid h3, .presentation-grid h3, .ending-band h3 { margin: 0 0 10px; }
.contract-grid p, .presentation-grid p, .ending-band p { margin: 0; line-height: 1.55; }
.timeline-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; color: var(--bone); background: var(--graphite); }
.timeline-strip > div { min-height: 120px; padding: 18px; border-right: 1px solid var(--steel); border-bottom: 1px solid var(--steel); }
.timeline-strip b, .timeline-strip span { display: block; }
.timeline-strip b { color: var(--amber); }
.timeline-strip span { margin-top: 8px; color: var(--bone-dim); line-height: 1.45; }

.split-band { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
.split-band > div { padding: 18px 20px; background: #fff; border-left: 5px solid #0e7c80; }
.split-band > div:nth-child(even) { border-color: #b34f88; }
.split-band h3 { margin: 0 0 8px; }
.split-band p, .split-band li { line-height: 1.55; }
.split-band ul { margin: 8px 0 0; padding-left: 20px; }

.nav-tree { padding: 22px; color: var(--bone); background: var(--graphite); }
.nav-tree p { margin: 18px 0 0; color: var(--bone-dim); }
.nav-root { display: inline-flex; padding: 10px 14px; border: 2px solid var(--amber); }
.nav-tree > i { display: inline-block; width: 40px; height: 2px; margin: 0 8px; vertical-align: middle; background: var(--amber); }
.nav-branches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; }
.nav-branches > div { padding: 14px; background: var(--steel-dark); border-top: 4px solid var(--cyan); }
.nav-branches b, .nav-branches span { display: block; }
.nav-branches span { margin-top: 8px; color: var(--bone-dim); font-size: 12px; line-height: 1.4; }

.table-shell { width: 100%; overflow-x: auto; background: #fff; border: 1px solid #b8c1bb; }
table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.42; }
th { padding: 11px 10px; color: var(--bone); background: var(--steel-dark); border-right: 1px solid var(--steel); text-align: left; vertical-align: bottom; }
td { padding: 10px; border-right: 1px solid #d1d7d2; border-bottom: 1px solid #d1d7d2; vertical-align: top; }
tbody tr:nth-child(even) { background: #f4f5f2; }
td code { overflow-wrap: anywhere; }
.row-current { border-left: 4px solid #0d8e91; }
.row-candidate { border-left: 4px solid #cf8c35; }
.row-proposed { border-left: 4px solid #b34f88; }
.cell-title { display: block; margin-bottom: 4px; font-weight: 850; }
.cell-id { display: block; color: #46565a; font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.cell-list { display: block; margin-top: 4px; color: #526168; }

.atlas-section { background: #cbd2cd !important; }
.atlas-toolbar { position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; color: var(--bone); background: var(--graphite); border-bottom: 4px solid var(--amber); }
.atlas-toolbar label { display: flex; align-items: center; gap: 8px; }
.atlas-toolbar select { min-height: 40px; padding: 0 10px; color: var(--bone); background: var(--steel-dark); border: 1px solid var(--grid); }
.atlas-toolbar p { margin: 0; color: var(--bone-dim); font-size: 12px; }
.filter-group { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-button { min-height: 40px; padding: 0 12px; color: var(--bone); background: var(--steel-dark); border: 2px solid var(--grid); cursor: pointer; }
.filter-button.active { color: var(--void); background: var(--amber); border-color: var(--amber); font-weight: 850; }

.artboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.artboard-card { min-width: 0; padding: 14px; background: #eef0eb; border-top: 6px solid var(--cyan); box-shadow: 0 5px 14px rgba(12, 20, 22, .16); }
.artboard-card[data-status="candidate"] { border-color: var(--amber); }
.artboard-card[data-status="proposed"] { border-color: var(--magenta); }
.artboard-caption { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; margin-bottom: 10px; }
.artboard-caption b { font: 900 13px/1.2 ui-monospace, monospace; }
.artboard-caption strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artboard-caption small { color: #607076; }
.artboard-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; color: #405158; font-size: 11px; line-height: 1.4; }
.artboard-notes span { padding-left: 8px; border-left: 3px solid #99a7a2; }

.mobile-artboard { position: relative; display: grid; grid-template-rows: 15% 63% 22%; width: var(--device-width); aspect-ratio: var(--device-ratio); overflow: hidden; color: var(--bone); background: var(--void); border: 4px solid #172126; container-type: inline-size; image-rendering: pixelated; isolation: isolate; }
.mobile-artboard::before { content: ""; position: absolute; inset: 0; z-index: -3; background: var(--scene-image) center/cover no-repeat; opacity: .5; filter: saturate(.78) contrast(1.08); image-rendering: pixelated; }
.mobile-artboard::after { content: ""; position: absolute; inset: 0; z-index: -2; background: rgba(5,8,11,.17); }
.scene-overview { --scene-image: url("phase5/batch-01-v1/C01_mobile/first_run.png"); }
.scene-array { --scene-image: url("phase5/batch-01-v1/C01_mobile/power_bottleneck.png"); }
.scene-lab { --scene-image: url("phase5/batch-01-v1/C02_mobile/band_guidance.png"); }
.scene-ops { --scene-image: url("phase5/batch-01-v1/C03_mobile/filter_running.png"); }
.scene-archive { --scene-image: url("phase5/batch-01-v1/C01_mobile/post_transform.png"); }
.scene-system { --scene-image: url("phase5/batch-01-v1/C01_mobile/first_run.png"); }

.mock-hud { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, auto); gap: 4px; align-items: center; min-height: 0; padding: 1.2% 1.6%; background: rgba(17,22,26,.96); border-bottom: max(2px, .45cqw) solid var(--steel); }
.mock-context { min-width: 0; }
.mock-context b, .mock-context span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mock-context b { font-size: clamp(8px, 2.6cqw, 14px); }
.mock-context span { color: var(--bone-dim); font-size: clamp(6px, 1.8cqw, 10px); }
.mock-metric { display: grid; padding: 1% 1.8%; background: rgba(5,8,11,.94); border-left: max(2px,.45cqw) solid var(--amber); }
.mock-metric.cyan { border-color: var(--cyan); }
.mock-metric.magenta { border-color: var(--magenta); }
.mock-metric small { color: var(--bone-dim); font-size: clamp(5px, 1.5cqw, 8px); }
.mock-metric b { font-size: clamp(7px, 2.1cqw, 12px); }

.mock-world { position: relative; min-height: 0; padding: 2% 2.2%; }
.world-label { display: inline-flex; gap: 5px; align-items: center; padding: 1% 1.5%; background: rgba(5,8,11,.9); border-left: max(2px,.55cqw) solid var(--amber); font-size: clamp(6px, 1.8cqw, 10px); }
.world-label::before { content: ""; width: 7px; height: 7px; background: var(--amber); box-shadow: 0 0 0 2px var(--void); }
.world-label.manual { border-color: var(--magenta); }
.world-label.manual::before { background: var(--magenta); transform: rotate(45deg); }
.world-label.fault { border-color: var(--fault); }
.world-label.fault::before { background: var(--fault); clip-path: polygon(0 0,100% 0,60% 50%,100% 100%,0 100%,40% 50%); }

.mock-device-map { position: absolute; inset: 19% 3% 9%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5%; align-items: stretch; }
.mock-room { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 4%; background: rgba(17,22,26,.6); border: max(2px,.55cqw) solid var(--steel); box-shadow: inset 0 max(2px,.55cqw) 0 var(--grid); }
.mock-room::before { content: ""; position: absolute; left: 9%; bottom: 33%; width: 45%; height: 26%; background: var(--steel); box-shadow: 0 -8px 0 var(--steel-dark), 18px -2px 0 var(--grid); }
.mock-room.active { border-color: var(--amber); }
.mock-room.running { border-color: var(--cyan); }
.mock-room.fault { border-color: var(--fault); background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(230,126,69,.13) 6px 10px); }
.mock-room b { position: relative; font-size: clamp(6px, 1.7cqw, 10px); }
.mock-room span { position: relative; color: var(--bone-dim); font-size: clamp(5px, 1.35cqw, 8px); }

.instrument { position: absolute; inset: 17% 8% 6%; display: grid; grid-template-columns: 1.25fr .75fr; gap: 3%; padding: 3%; background: rgba(5,8,11,.78); border: max(2px,.6cqw) solid var(--steel); }
.scope { position: relative; background: rgba(17,22,26,.9); border: max(2px,.45cqw) solid var(--grid); overflow: hidden; }
.scope::before { content: ""; position: absolute; inset: 18% 8%; background: repeating-linear-gradient(90deg,var(--steel) 0 7%,transparent 7% 10%); opacity: .85; }
.scope::after { content: ""; position: absolute; left: 35%; top: 12%; width: 18%; height: 76%; border-left: max(3px,.8cqw) solid var(--amber); border-right: max(3px,.8cqw) solid var(--amber); }
.evidence-stack { display: grid; gap: 5%; }
.evidence-stack span { display: flex; align-items: center; padding: 0 7%; background: var(--steel-dark); border-left: max(3px,.7cqw) solid var(--cyan); font-size: clamp(5px, 1.45cqw, 8px); }
.evidence-stack span:nth-child(2) { border-color: var(--magenta); }
.evidence-stack span:nth-child(3) { border-color: var(--fault); }

.queue-board, .settings-board, .archive-board { position: absolute; inset: 18% 4% 7%; display: grid; gap: 2%; }
.queue-board { grid-template-columns: 1fr 1fr; }
.queue-lane { padding: 5%; background: rgba(17,22,26,.88); border-left: max(3px,.7cqw) solid var(--amber); }
.queue-lane b, .queue-lane span { display: block; font-size: clamp(5px,1.55cqw,9px); }
.queue-lane span { margin-top: 5%; color: var(--bone-dim); }
.queue-lane.running { border-color: var(--cyan); }
.queue-lane.blocked { border-color: var(--fault); }
.settings-board { grid-template-columns: repeat(3,1fr); }
.settings-board span, .archive-board span { display: flex; align-items: center; justify-content: space-between; padding: 0 6%; background: rgba(17,22,26,.9); border-left: max(3px,.7cqw) solid var(--grid); font-size: clamp(5px,1.5cqw,9px); }
.settings-board span::after { content: "ON"; color: var(--cyan); }
.archive-board { grid-template-columns: 1fr 1fr; }
.archive-board span:nth-child(3n+2) { border-color: var(--magenta); }
.archive-board span:nth-child(3n+3) { border-color: var(--cyan); }

.mock-action { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2%; align-items: center; min-height: 0; padding: 1.5% 2%; background: rgba(17,22,26,.97); border-top: max(2px,.55cqw) solid var(--steel); }
.action-copy { min-width: 0; }
.action-copy b, .action-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-copy b { font-size: clamp(6px,1.9cqw,11px); }
.action-copy span { color: var(--bone-dim); font-size: clamp(5px,1.45cqw,8px); }
.mock-primary { display: grid; place-items: center; min-width: 26%; min-height: 70%; padding: 0 3%; color: var(--void); background: var(--amber); border: max(2px,.45cqw) solid var(--bone); font-size: clamp(6px,1.8cqw,10px); font-weight: 900; text-align: center; }
.mock-primary.locked { color: var(--bone-dim); background: var(--steel-dark); border-color: var(--grid); }
.mock-primary.complete { background: var(--cyan); }
.mock-primary.fault { color: var(--bone); background: var(--fault); }

.launch-art { display: grid; place-items: end center; height: 85%; padding: 5%; }
.launch-mark { width: 74%; padding: 5% 7%; background: rgba(5,8,11,.76); border-left: max(4px,1cqw) solid var(--amber); }
.launch-mark b, .launch-mark span { display: block; }
.launch-mark b { font-size: clamp(11px,4cqw,23px); }
.launch-mark span { margin-top: 3%; color: var(--bone-dim); font-size: clamp(6px,1.8cqw,10px); }

.modal-context .mock-world { opacity: .5; }
.mock-modal-shade { position: absolute; inset: 0; display: grid; place-items: center; padding: 6%; background: rgba(5,8,11,.72); }
.mock-modal { width: min(86%, 620px); max-height: 84%; padding: 3.5%; overflow: auto; color: var(--bone); background: var(--graphite); border: max(3px,.7cqw) solid var(--grid); box-shadow: max(5px,1.2cqw) max(5px,1.2cqw) 0 rgba(5,8,11,.8); }
.mock-modal.current { border-color: var(--cyan); }
.mock-modal.candidate { border-color: var(--amber); }
.mock-modal.proposed { border-color: var(--magenta); }
.mock-modal h4 { margin: 0; color: var(--bone); font-size: clamp(8px,2.6cqw,15px); }
.mock-modal p { margin: 2% 0; color: var(--bone-dim); font-size: clamp(5px,1.55cqw,9px); line-height: 1.35; }
.modal-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5%; margin: 3% 0; }
.modal-facts span { padding: 3%; background: var(--steel-dark); border-top: max(2px,.45cqw) solid var(--amber); font-size: clamp(5px,1.35cqw,8px); }
.modal-actions { display: flex; justify-content: flex-end; gap: 2%; }
.modal-actions span { display: grid; place-items: center; min-height: clamp(22px,6cqw,42px); padding: 0 5%; border: max(2px,.45cqw) solid var(--grid); font-size: clamp(5px,1.45cqw,8px); }
.modal-actions .primary { color: var(--void); background: var(--amber); border-color: var(--bone); font-weight: 900; }

.coverage-summary { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 24px; color: var(--bone); background: var(--steel-dark); }
.coverage-summary > div { padding: 16px; border-right: 1px solid var(--steel); }
.coverage-summary b, .coverage-summary span { display: block; }
.coverage-summary b { color: var(--amber); font-size: 24px; }
.coverage-summary span { margin-top: 4px; color: var(--bone-dim); font-size: 12px; }

.loop-flow { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; color: var(--bone); background: var(--steel); border: 1px solid var(--steel); }
.loop-flow > div { position: relative; min-height: 138px; padding: 16px; background: var(--graphite); }
.loop-flow > div::after { content: "→"; position: absolute; right: -10px; top: 50%; z-index: 2; color: var(--amber); font-size: 20px; }
.loop-flow > div:nth-child(4)::after, .loop-flow > div:nth-child(8)::after { display: none; }
.loop-flow b, .loop-flow span { display: block; }
.loop-flow b { color: var(--amber); }
.loop-flow span { margin-top: 8px; color: var(--bone-dim); line-height: 1.45; }

.source-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px; color: var(--bone); background: var(--graphite); }
.source-callout strong { color: var(--amber); }
.source-callout code { padding: 4px 7px; background: var(--steel-dark); }
.source-callout span { flex-basis: 100%; color: var(--bone-dim); }
.economy-pair { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 14px; }
.formula-board { padding: 16px 18px; color: var(--bone); background: var(--graphite); border-left: 5px solid var(--amber); }
.formula-board.wide { margin-top: 14px; }
.formula-board p { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 10px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--steel); }
.formula-board p:last-child { border: 0; }
.formula-board code { color: var(--cyan); overflow-wrap: anywhere; }
.formula-board span { color: var(--bone-dim); }
.status-slab { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 13px 16px; color: var(--bone); background: var(--steel-dark); border-left: 5px solid var(--amber); }
.status-slab.proposed { border-color: var(--magenta); }
.status-slab b { color: var(--amber); white-space: nowrap; }
.status-slab.proposed b { color: var(--magenta); }
.status-slab span { color: var(--bone-dim); }

.strategy-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.strategy-card { padding: 18px; background: #fff; border-top: 5px solid var(--cyan); }
.strategy-card:nth-child(even) { border-color: var(--magenta); }
.strategy-card h3 { margin: 0; }
.strategy-card .choice-id { display: block; margin: 6px 0 12px; color: #58686d; font: 10px/1.4 ui-monospace, monospace; }
.strategy-card dl { display: grid; grid-template-columns: 132px 1fr; margin: 0; font-size: 12px; }
.strategy-card dt, .strategy-card dd { margin: 0; padding: 7px 0; border-bottom: 1px solid #d7dcd8; }
.strategy-card dt { font-weight: 800; }
.strategy-card dd { line-height: 1.45; }

.campaign-summary { display: grid; grid-template-columns: repeat(4,1fr); color: var(--bone); background: var(--graphite); }
.campaign-summary > div { padding: 18px; border-right: 1px solid var(--steel); }
.campaign-summary b, .campaign-summary span { display: block; }
.campaign-summary b { color: var(--amber); font-size: 24px; }
.campaign-summary span { color: var(--bone-dim); }
.table-intro { line-height: 1.6; }
.content-table-shell { max-height: 900px; }
.content-table-shell thead { position: sticky; top: 0; z-index: 3; }
.ending-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 22px; color: var(--bone); background: var(--steel); }
.ending-band > div { padding: 18px; background: var(--graphite); }
.ending-band h3 { color: var(--amber); }
.ending-band p { color: var(--bone-dim); }

.token-strip { display: grid; grid-template-columns: repeat(9,1fr); gap: 4px; margin-bottom: 18px; }
.token-strip span { display: flex; align-items: flex-end; height: 70px; padding: 8px; color: var(--bone); background: var(--swatch); border: 1px solid #0b1114; font: 9px/1 ui-monospace, monospace; text-shadow: 0 1px 2px #000; }
.presentation-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.presentation-grid article { min-height: 168px; padding: 18px; color: var(--bone); background: var(--graphite); border-left: 5px solid var(--cyan); }
.presentation-grid article:nth-child(3n+2) { border-color: var(--amber); }
.presentation-grid article:nth-child(3n+3) { border-color: var(--magenta); }
.presentation-grid p { color: var(--bone-dim); }

.verification-metrics { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 18px; }
.verification-metrics div { padding: 16px; color: var(--bone); background: var(--graphite); border-bottom: 4px solid var(--cyan); }
.verification-metrics b, .verification-metrics span { display: block; }
.verification-metrics b { font-size: 26px; color: var(--amber); }
.verification-metrics span { color: var(--bone-dim); font-size: 12px; }
.source-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; padding: 18px; background: #fff; }
.source-list h3 { flex-basis: 100%; margin: 0 0 6px; }
.source-list code { padding: 5px 8px; background: #e3e7e3; }
.open-gates { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; margin-top: 22px; color: var(--bone); background: var(--steel); }
.open-gates > div { min-height: 124px; padding: 15px; background: var(--graphite); }
.open-gates b, .open-gates span, .open-gates strong { display: block; }
.open-gates b { color: var(--amber); }
.open-gates span { margin: 8px 0; color: var(--bone-dim); font-size: 12px; line-height: 1.4; }
.open-gates strong { color: var(--fault); }
.open-gates > div:first-child strong { color: var(--cyan); }
.footer-note { margin-top: 22px; padding: 18px; color: var(--bone); background: var(--steel-dark); }
.footer-note a { color: var(--cyan); }

[hidden] { display: none !important; }

@media (max-width: 1180px) {
  .book-layout { grid-template-columns: 1fr; }
  .toc { position: static; display: grid; grid-template-columns: repeat(3,1fr); max-height: none; border-bottom: 1px solid #c4cbc6; }
  .toc-note { grid-column: 1 / -1; }
  main { border-left: 0; }
  .artboard-grid { grid-template-columns: 1fr; }
  .contract-grid, .presentation-grid { grid-template-columns: repeat(2,1fr); }
  .timeline-strip { grid-template-columns: repeat(2,1fr); }
  .nav-branches { grid-template-columns: repeat(2,1fr); }
  .loop-flow { grid-template-columns: repeat(2,1fr); }
  .loop-flow > div:nth-child(2)::after, .loop-flow > div:nth-child(6)::after { display: none; }
  .campaign-summary, .ending-band { grid-template-columns: repeat(2,1fr); }
  .verification-metrics, .open-gates { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 760px) {
  .book-header { align-items: flex-start; flex-direction: column; }
  .header-meta { justify-content: flex-start; }
  .toc { grid-template-columns: repeat(2,1fr); }
  .spec-section { padding: 42px 16px 52px; }
  .contract-grid, .timeline-strip, .split-band, .presentation-grid, .strategy-grid, .economy-pair, .nav-branches, .campaign-summary, .ending-band, .verification-metrics, .open-gates { grid-template-columns: 1fr; }
  .loop-flow { grid-template-columns: 1fr; }
  .loop-flow > div::after { display: none; }
  .token-strip { grid-template-columns: repeat(3,1fr); }
  .coverage-summary { grid-template-columns: repeat(2,1fr); }
  .artboard-notes { grid-template-columns: 1fr; }
  .formula-board p { grid-template-columns: 1fr; }
}

@media print {
  .toc, .atlas-toolbar { position: static; }
  .book-layout { display: block; }
  .spec-section { break-before: page; }
  .artboard-card { break-inside: avoid; }
}