:root {
  --ink: #17221f;
  --paper: #f3efe4;
  --paper-light: #fffdf7;
  --signal: #f15a37;
  --signal-dark: #a92d1e;
  --mint: #a9d5bd;
  --sand: #d9cdb2;
  --line: rgba(23, 34, 31, 0.22);
  --sans: "Droid Sans Fallback", "Nimbus Sans", sans-serif;
  --mono: "Noto Sans Mono", "Nimbus Mono PS", monospace;
}

.reveal {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 28px;
  background: var(--paper);
}

.reveal .slides { text-align: left; }

.reveal .slides section {
  box-sizing: border-box;
  height: 900px;
  padding: 66px 88px 54px;
  overflow: hidden;
}

.reveal .slides section::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background:
    linear-gradient(90deg, rgba(23, 34, 31, 0.032) 1px, transparent 1px),
    linear-gradient(rgba(23, 34, 31, 0.032) 1px, transparent 1px),
    var(--paper);
  background-size: 40px 40px;
}

.reveal h2 {
  margin: 0 0 32px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 57px;
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1;
  text-transform: none;
}

.reveal pre {
  width: 100%;
  margin: 0;
  border: 2px solid var(--ink);
  background: var(--paper-light);
  box-shadow: 12px 12px 0 rgba(23, 34, 31, 0.12);
}

.reveal pre code {
  box-sizing: border-box;
  max-height: none;
  padding: 24px 30px;
  font-family: var(--mono);
  line-height: 1.42;
}

.reveal .notes,
.reveal .slide-menu-button { display: none !important; }

.slide-marker {
  position: absolute;
  top: 66px;
  right: 88px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--mono);
}

.slide-marker b { color: var(--signal); font-size: 29px; }
.slide-marker span { font-size: 14px; font-weight: 700; letter-spacing: 0.16em; }

.request-bar {
  display: flex;
  align-items: center;
  height: 57px;
  margin-bottom: 19px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 18px;
}

.request-bar strong {
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 112px;
  background: var(--signal);
  color: white;
  letter-spacing: 0.08em;
}

.request-bar code { margin-left: 23px; color: var(--paper); background: none; }
.request-bar span { margin-left: auto; margin-right: 22px; color: var(--mint); font-size: 14px; }

.api-slide pre code { font-size: 20px; }

.slide-takeaway {
  position: absolute;
  left: 88px;
  right: 88px;
  bottom: 31px;
  display: flex;
  align-items: center;
  gap: 22px;
  height: 44px;
  border-top: 2px solid var(--ink);
  font-size: 19px;
}

.slide-takeaway span {
  padding: 6px 13px;
  background: var(--signal);
  color: white;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.code-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 2px 12px;
}

.code-label strong { font-size: 21px; }
.code-label span { color: rgba(23, 34, 31, 0.62); font-size: 14px; }
.render-bridge {
  position: absolute;
  left: 50%;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 22px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 16px;
  transform: translateX(-50%);
}

.render-bridge b { color: var(--signal); }
.render-bridge strong { color: var(--signal-dark); }

.response-bar {
  display: flex;
  align-items: center;
  height: 50px;
  margin-bottom: 14px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 18px;
}

.response-bar strong {
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 112px;
  background: var(--mint);
  color: var(--ink);
  letter-spacing: 0.08em;
}

.response-bar code { margin-left: 23px; color: var(--paper); background: none; }
.response-bar span { margin-left: auto; margin-right: 22px; color: var(--mint); font-size: 14px; }

.flow-slide::after {
  position: absolute;
  top: 220px;
  left: 50%;
  width: 500px;
  height: 500px;
  border: 75px solid rgba(169, 213, 189, 0.28);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
  z-index: -1;
}

.model-flow {
  display: grid;
  grid-template-columns: 148px 40px 174px 40px 142px 40px 188px 40px 142px 40px 160px 40px 148px;
  align-items: center;
  margin-top: 155px;
}

.model-flow > i {
  color: var(--signal);
  font-family: var(--mono);
  font-size: 34px;
  font-style: normal;
  text-align: center;
}

.flow-node {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  height: 132px;
  padding: 16px;
  border: 2px solid var(--ink);
  background: var(--paper-light);
  text-align: center;
}

.flow-node b { font-family: var(--mono); font-size: 17px; }
.flow-node span { margin-top: 10px; color: rgba(23, 34, 31, 0.68); font-size: 14px; }
.flow-node.endpoint { background: var(--ink); color: var(--paper); }
.flow-node.endpoint span { color: var(--mint); }
.flow-node.token-node { background: var(--sand); }
.flow-node.model-node { border-color: var(--signal-dark); background: var(--signal); color: white; box-shadow: 9px 9px 0 var(--signal-dark); }
.flow-node.model-node span { color: white; }

.flow-context {
  position: absolute;
  top: 190px;
  font-size: 15px;
}

.flow-context span {
  margin-right: 10px;
  color: var(--signal-dark);
  font-weight: 700;
}

.flow-context-left { left: 88px; }
.flow-context-right { right: 88px; }

.flow-conclusion {
  position: absolute;
  left: 50%;
  bottom: 86px;
  width: 730px;
  padding: 22px 28px;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 10px 10px 0 var(--ink);
  font-size: 25px;
  text-align: center;
  transform: translateX(-50%);
}

.flow-conclusion strong { color: var(--signal); }

/* Opening and reserved slides */
.opening-slide::after {
  position: absolute;
  top: -250px;
  right: -130px;
  width: 760px;
  height: 760px;
  border: 120px solid rgba(169, 213, 189, 0.34);
  border-radius: 50%;
  content: "";
  z-index: -1;
}

.reveal .opening-slide h2 {
  position: absolute;
  top: 188px;
  left: 88px;
  width: 900px;
  font-size: 108px;
  line-height: 0.92;
}

.opening-slide h2 span {
  color: var(--signal);
  font-family: var(--mono);
  letter-spacing: -0.075em;
}

.opening-event {
  position: absolute;
  top: 78px;
  left: 91px;
  display: flex;
  align-items: center;
  gap: 17px;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.opening-event i { width: 76px; height: 2px; background: var(--signal); }

.opening-subtitle {
  position: absolute;
  left: 96px;
  bottom: 95px;
  padding-left: 22px;
  border-left: 5px solid var(--signal);
  font-size: 29px;
  font-weight: 600;
  line-height: 1.5;
}

.opening-question {
  position: absolute;
  top: 226px;
  right: 86px;
  box-sizing: border-box;
  width: 470px;
  min-height: 310px;
  padding: 40px 42px;
  border: 2px solid var(--ink);
  background: rgba(243, 239, 228, 0.9);
  box-shadow: 18px 18px 0 var(--ink);
}

.opening-question small {
  color: var(--signal-dark);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.opening-question p { margin: 50px 0 0; font-size: 37px; line-height: 1.38; }
.opening-question strong { color: var(--signal); font-size: 42px; }

.start-talk {
  position: absolute;
  right: 86px;
  bottom: 96px;
  padding: 15px 23px;
  border: 2px solid var(--ink);
  background: var(--signal);
  color: white;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 7px 7px 0 var(--ink);
}

.blank-slide h2 { display: none; }
.blank-slide::before { background: var(--paper) !important; }

/* llms.txt handoff */
.llms-intro-slide h2 { margin-bottom: 22px; font-size: 57px; }
.llms-entry-stage { display: grid; grid-template-columns: 470px 1fr; gap: 28px; }
.llms-qr-panel { box-sizing: border-box; height: 550px; padding: 19px 28px; border: 3px solid var(--ink); background: var(--paper-light); box-shadow: 11px 11px 0 var(--ink); text-align: center; }
.llms-eyebrow { color: var(--signal-dark); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-align: left; }
.llms-qr-panel img { display: block; width: 340px; height: 340px; margin: 13px auto 8px; image-rendering: pixelated; }
.llms-qr-panel strong { display: block; font-size: 26px; }
.llms-qr-panel span { display: block; margin-top: 7px; color: rgba(23,34,31,.62); font-size: 14px; }
.llms-handoff { display: grid; grid-template-rows: 1fr 62px 1fr; gap: 14px; height: 550px; }
.handoff-card { box-sizing: border-box; padding: 27px 32px; border: 2px solid var(--ink); background: var(--paper-light); }
.handoff-card small { color: var(--signal-dark); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.handoff-card strong { display: block; margin-top: 15px; font-size: 27px; }
.handoff-card p { margin: 17px 0 0; font-size: 17px; line-height: 1.45; }
.agent-card { border-color: var(--signal-dark); background: rgba(241,90,55,.09); }
.agent-card code { display: block; margin-top: 20px; padding: 15px 17px; border: 2px solid var(--ink); background: var(--ink); color: var(--mint); font-size: 13px; overflow-wrap: anywhere; }
.handoff-arrow { display: flex; align-items: center; justify-content: center; gap: 24px; }
.handoff-arrow span { font-family: var(--mono); font-size: 11px; }
.handoff-arrow b { color: var(--signal); font-size: 33px; }
.llms-contents { display: flex; align-items: center; gap: 10px; margin-top: 19px; padding: 13px 16px; border: 2px solid var(--ink); background: rgba(255,253,247,.72); }
.llms-contents b { margin-right: 7px; color: var(--signal-dark); font-family: var(--mono); font-size: 11px; }
.llms-contents span { padding: 7px 11px; background: var(--sand); font-size: 12px; }
.llms-intro-slide .slide-takeaway { bottom: 21px; }

audio.slide-audio {
  position: absolute;
  top: 17px;
  right: 88px;
  width: 210px;
  height: 28px;
  opacity: 0.3;
  z-index: 10;
}

audio.slide-audio:hover,
audio.slide-audio:focus { opacity: 1; }

/* Request and response payloads */
.api-slide h2 { margin-bottom: 23px; }
.api-slide .request-bar { height: 50px; margin-bottom: 14px; }
.payload-columns { gap: 30px; }
.payload-columns .column { box-sizing: border-box; }
.payload-columns .code-label { padding-bottom: 8px; }
.payload-columns pre { box-shadow: 8px 8px 0 rgba(23, 34, 31, 0.1); }
.payload-columns pre code {
  min-height: 505px;
  padding: 15px 20px;
  font-size: 13px;
  line-height: 1.32;
}

.payload-columns code.sourceCode span.st {
  white-space: normal;
  overflow-wrap: anywhere;
}

.api-slide .slide-takeaway { bottom: 21px; }

/* Fold-back sequence diagram */
.flow-slide::after { display: none; }

.sequence-stage {
  position: relative;
  height: 570px;
  margin-top: 65px;
}

.participant {
  position: absolute;
  top: 0;
  box-sizing: border-box;
  width: 230px;
  height: 82px;
  padding: 15px;
  border: 2px solid var(--ink);
  background: var(--paper-light);
  text-align: center;
}

.participant::after {
  position: absolute;
  top: 80px;
  left: 50%;
  height: 430px;
  border-left: 2px dashed rgba(23, 34, 31, 0.32);
  content: "";
}

.participant b { display: block; font-family: var(--mono); font-size: 18px; }
.participant span { display: block; margin-top: 7px; color: rgba(23, 34, 31, 0.64); font-size: 13px; }
.participant.client { left: 0; background: var(--ink); color: var(--paper); }
.participant.client span { color: var(--mint); }
.participant.service { left: 390px; }
.participant.renderer { left: 780px; background: var(--sand); }
.participant.model { left: 1194px; border-color: var(--signal-dark); background: var(--signal); color: white; box-shadow: 8px 8px 0 var(--signal-dark); }
.participant.model span { color: white; }

.seq-message {
  position: absolute;
  height: 28px;
  border-top: 3px solid var(--ink);
}

.seq-message::after {
  position: absolute;
  top: -7px;
  right: -1px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--ink);
  content: "";
}

.seq-message.reverse::after {
  right: auto;
  left: -1px;
  border-right: 10px solid var(--signal-dark);
  border-left: 0;
}

.seq-message.reverse { border-color: var(--signal-dark); }
.seq-message span {
  position: absolute;
  top: -27px;
  left: 50%;
  padding: 2px 8px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.seq-message.m1 { top: 130px; left: 115px; width: 390px; }
.seq-message.m2 { top: 205px; left: 505px; width: 390px; }
.seq-message.m3 { top: 280px; left: 895px; width: 414px; }
.seq-message.m4 { top: 365px; left: 895px; width: 414px; }
.seq-message.m5 { top: 440px; left: 505px; width: 390px; }
.seq-message.m6 { top: 515px; left: 115px; width: 390px; }

.flow-slide .flow-conclusion { bottom: 28px; }

/* Second request */
.second-request-slide pre code {
  min-height: 380px;
  padding: 22px 26px;
  font-size: 18px;
  line-height: 1.55;
}

.second-request-slide code.sourceCode span.st {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Tool Call request and response */
.tool-request-slide h2,
.tool-response-slide h2 { margin-bottom: 20px; }

.tool-request-slide .request-bar { height: 46px; margin-bottom: 12px; }
.reveal .tool-request-slide pre.sourceCode code {
  padding: 8px 15px;
  font-size: 11.5px;
  line-height: 1.05;
}

.tool-request-slide code.sourceCode > span { line-height: 1.05; }

.tool-request-slide code.sourceCode span.st {
  white-space: normal;
  overflow-wrap: anywhere;
}

.reveal .tool-response-slide pre.sourceCode code {
  padding: 14px 20px;
  font-size: 11.5px;
  line-height: 1.28;
}

.tool-response-slide code.sourceCode span.st {
  white-space: pre;
}

.tool-request-slide .slide-takeaway,
.tool-response-slide .slide-takeaway { bottom: 21px; }

/* Tool Result request */
.tool-result-request-slide h2 { margin-bottom: 20px; }
.tool-result-request-slide .request-bar { height: 46px; margin-bottom: 12px; }

.reveal .tool-result-request-slide pre.sourceCode code {
  padding: 8px 15px;
  font-size: 10.5px;
  line-height: 1.06;
}

.tool-result-request-slide code.sourceCode > span { line-height: 1.06; }
.tool-result-request-slide code.sourceCode span.st {
  white-space: normal;
  overflow-wrap: anywhere;
}
.tool-result-request-slide .slide-takeaway { bottom: 21px; }

/* Two model calls with a client-side execution in between */
.tool-loop-slide h2 { margin-bottom: 0; }

.tool-loop-stage {
  position: relative;
  height: 650px;
  margin-top: 24px;
}

.tool-loop-stage .participant::after { height: 540px; }

.tl-message {
  position: absolute;
  height: 22px;
  border-top: 2px solid var(--ink);
}

.tl-message::after {
  position: absolute;
  top: -6px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content: "";
}

.tl-message.right::after {
  right: -1px;
  border-left: 9px solid var(--ink);
}

.tl-message.left {
  border-color: var(--signal-dark);
}

.tl-message.left::after {
  left: -1px;
  border-right: 9px solid var(--signal-dark);
}

.tl-message span {
  position: absolute;
  top: -23px;
  left: 50%;
  padding: 1px 7px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.tl-message.c-s { left: 115px; width: 390px; }
.tl-message.s-r { left: 505px; width: 390px; }
.tl-message.r-m { left: 895px; width: 414px; }

.tl-message.t1 { top: 112px; }
.tl-message.t2 { top: 151px; }
.tl-message.t3 { top: 190px; }
.tl-message.t4 { top: 229px; }
.tl-message.t5 { top: 268px; }
.tl-message.t6 { top: 307px; }
.tl-message.t7 { top: 424px; }
.tl-message.t8 { top: 463px; }
.tl-message.t9 { top: 502px; }
.tl-message.t10 { top: 541px; }
.tl-message.t11 { top: 580px; }
.tl-message.t12 { top: 619px; }

.client-execution {
  position: absolute;
  top: 330px;
  left: -4px;
  box-sizing: border-box;
  width: 238px;
  height: 70px;
  padding: 8px 12px;
  border: 2px solid var(--signal-dark);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 6px 6px 0 var(--signal);
}

.client-execution small,
.client-execution strong,
.client-execution code { display: block; }
.client-execution small { color: var(--mint); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; }
.client-execution strong { margin-top: 3px; font-size: 11px; line-height: 1.25; }
.client-execution code { margin-top: 2px; color: var(--signal); background: none; font-size: 10px; }

.tool-loop-slide .flow-conclusion {
  bottom: 18px;
  width: 680px;
  padding: 10px 20px;
  font-size: 18px;
}

/* Failure history table */
.error-context-slide h2 { margin-bottom: 20px; }
.error-context-slide .request-bar { height: 46px; margin-bottom: 12px; }
.error-context-slide .request-bar strong { width: 126px; }

.context-table {
  border: 2px solid var(--ink);
  background: var(--paper-light);
  box-shadow: 8px 8px 0 rgba(23, 34, 31, 0.1);
}

.ctx-row {
  display: grid;
  grid-template-columns: 54px 148px 140px 1fr;
  align-items: stretch;
  border-top: 1px solid var(--line);
}

.ctx-row:first-child { border-top: 0; }
.ctx-row > * {
  box-sizing: border-box;
  margin: 0;
  padding: 7px 12px;
  border-left: 1px solid var(--line);
}
.ctx-row > *:first-child { border-left: 0; text-align: center; }
.ctx-row > code { color: var(--signal-dark); background: none; font-weight: 700; }
.ctx-row > span { font-family: var(--mono); font-size: 14px; }
.ctx-row p { font-size: 15px; line-height: 1.25; }
.ctx-row p code { color: var(--ink); background: none; font-size: 13px; }
.ctx-row p small { margin-left: 14px; color: rgba(23, 34, 31, 0.54); font-size: 12px; }

.ctx-head {
  height: 38px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.ctx-head > * { padding-top: 9px; }
.ctx-row.compact { min-height: 39px; }
.ctx-row.call-row { min-height: 67px; }

.ctx-row pre {
  width: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.22;
  white-space: pre-wrap;
}

.ctx-row.error-row {
  border-top: 2px solid var(--signal-dark);
  border-bottom: 2px solid var(--signal-dark);
  background: rgba(241, 90, 55, 0.11);
}
.ctx-row.error-row > b,
.ctx-row.error-row > code,
.ctx-row.error-row > span { color: var(--signal-dark); }
.ctx-row.repaired { background: rgba(217, 205, 178, 0.3); }
.ctx-row.success-row { background: rgba(169, 213, 189, 0.34); }
.ctx-row.success-row > b,
.ctx-row.success-row > code,
.ctx-row.success-row > span { color: #14633f; }

.request-footer {
  display: flex;
  gap: 28px;
  margin-top: 10px;
  padding: 8px 14px;
  border-left: 5px solid var(--sand);
  background: rgba(255, 253, 247, 0.65);
  font-family: var(--mono);
  font-size: 12px;
}
.error-context-slide .slide-takeaway { bottom: 21px; }

/* Concept, Qwen, and DeepSeek protocol comparison */
.protocol-slide h2 { margin-bottom: 12px; font-size: 50px; }
.protocol-note {
  margin-bottom: 12px;
  color: rgba(23, 34, 31, 0.58);
  font-family: var(--mono);
  font-size: 13px;
}

.protocol-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.protocol-panel { min-width: 0; }
.protocol-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  box-sizing: border-box;
  height: 48px;
  padding: 11px 14px 8px;
  border: 2px solid var(--ink);
  border-bottom: 0;
  background: rgba(255, 253, 247, 0.75);
}
.protocol-label strong { font-size: 18px; }
.protocol-label span { color: rgba(23, 34, 31, 0.58); font-size: 11px; }
.concept-protocol .protocol-label { border-top: 6px solid var(--mint); }
.qwen-protocol .protocol-label { border-top: 6px solid var(--sand); }
.deepseek-protocol .protocol-label { border-top: 6px solid var(--signal); }

.protocol-panel pre { box-shadow: 5px 5px 0 rgba(23, 34, 31, 0.1); }
.reveal .protocol-panel pre.sourceCode code {
  height: 520px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.3;
}
.protocol-panel code.sourceCode > span {
  line-height: 1.3;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.result-protocol-slide .protocol-note { margin-bottom: 12px; }
.result-protocol-slide .protocol-label { height: 48px; }
.protocol-slide .slide-takeaway { bottom: 21px; }

/* The plain-message rendering comparison mirrors the tool rendering pages. */
.render-slide h2 { margin-bottom: 12px; font-size: 50px; }
.render-slide .protocol-note { margin-bottom: 12px; }
.reveal .render-slide .protocol-panel pre.sourceCode code {
  height: 500px;
  padding: 16px 17px;
  font-size: 13px;
  line-height: 1.42;
}
.render-slide .protocol-panel code.sourceCode > span { line-height: 1.42; }

/* Current Context layout */
.context-layout-slide h2,
.context-limits-slide h2,
.compaction-intro-slide h2,
.compaction-methods-slide h2,
.compaction-flow-slide h2,
.compact-diff-slide h2,
.summary-generation-slide h2,
.agent-compaction-slide h2,
.openai-compaction-slide h2 { margin-bottom: 20px; font-size: 52px; }

.context-map {
  display: grid;
  grid-template-columns: 355px 150px 1fr;
  gap: 20px;
  align-items: stretch;
  height: 405px;
}
.context-sources { display: grid; gap: 10px; }
.source-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 13px 18px;
  border: 2px solid var(--ink);
  background: var(--paper-light);
}
.source-card small { color: var(--signal-dark); font-family: var(--mono); font-size: 11px; }
.source-card strong { margin-top: 4px; font-size: 20px; }
.source-card span { margin-top: 6px; color: rgba(23,34,31,.62); font-size: 13px; }
.history-source { background: rgba(169,213,189,.28); }

.projection-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--mono);
  text-align: center;
}
.projection-arrow::after { content: "→"; color: var(--signal); font-size: 58px; line-height: .8; }
.projection-arrow span { margin-bottom: 13px; color: rgba(23,34,31,.58); font-size: 11px; }
.projection-arrow b { margin-bottom: 13px; font-size: 14px; letter-spacing: .06em; }

.current-context-stack { border: 3px solid var(--ink); background: var(--paper-light); box-shadow: 10px 10px 0 var(--ink); }
.stack-title { display: flex; align-items: baseline; justify-content: space-between; height: 54px; padding: 13px 20px; box-sizing: border-box; background: var(--ink); color: var(--paper); }
.stack-title span { color: var(--mint); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.stack-title strong { font-size: 22px; }
.stack-block { height: 57px; margin: 9px 14px 0; padding: 15px 18px; box-sizing: border-box; border-left: 7px solid var(--sand); background: rgba(217,205,178,.22); font-family: var(--mono); font-size: 14px; }
.stack-block.selected { border-left-color: var(--mint); background: rgba(169,213,189,.22); }
.stack-block.recent { border-left-color: var(--signal); background: rgba(241,90,55,.10); }
.stack-block.cursor { height: 45px; padding-top: 9px; border: 2px solid var(--signal-dark); background: var(--signal); color: white; text-align: center; }

.context-definitions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.context-definitions > div { min-height: 93px; padding: 12px 16px; border-top: 5px solid var(--ink); background: rgba(255,253,247,.72); }
.context-definitions b { display: block; color: var(--signal-dark); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.context-definitions strong { display: block; margin-top: 5px; font-size: 18px; }
.context-definitions span { display: block; margin-top: 5px; color: rgba(23,34,31,.64); font-size: 12px; }
.context-layout-slide .slide-takeaway { bottom: 21px; }

/* Why Context cannot grow forever */
.limit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.limit-card { box-sizing: border-box; height: 465px; padding: 25px 24px; border: 2px solid var(--ink); background: var(--paper-light); box-shadow: 8px 8px 0 rgba(23,34,31,.1); }
.limit-card small { color: var(--signal-dark); font-family: var(--mono); font-size: 12px; letter-spacing: .07em; }
.limit-card > strong { display: block; margin-top: 12px; font-size: 25px; }
.limit-card p { margin: 24px 0 0; font-size: 17px; line-height: 1.48; }
.window-meter { position: relative; height: 115px; margin-top: 45px; border: 3px solid var(--ink); background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(23,34,31,.09) 38px 40px); }
.window-meter span { display: block; height: 100%; background: rgba(241,90,55,.72); }
.window-meter i { position: absolute; left: 14px; top: 44px; font-family: var(--mono); font-size: 11px; font-style: normal; }
.u-curve { width: 100%; height: 150px; margin-top: 28px; overflow: visible; }
.u-curve path { fill: none; stroke: var(--signal); stroke-width: 7; }
.u-curve circle { fill: var(--ink); }
.distractor-cloud { position: relative; height: 164px; margin-top: 24px; }
.distractor-cloud b,.distractor-cloud span { position: absolute; padding: 8px 11px; border: 2px solid var(--ink); background: var(--paper); font-size: 12px; }
.distractor-cloud b { top: 57px; left: 115px; background: var(--mint); }
.distractor-cloud span:nth-child(2) { top: 2px; left: 8px; }
.distractor-cloud span:nth-child(3) { top: 7px; right: 6px; }
.distractor-cloud span:nth-child(4) { bottom: 9px; left: 18px; }
.distractor-cloud span:nth-child(5) { bottom: 2px; right: 10px; }
.limit-qualifier { display: flex; align-items: center; gap: 22px; margin-top: 20px; padding: 15px 20px; border: 2px solid var(--signal-dark); background: rgba(241,90,55,.09); font-size: 15px; }
.limit-qualifier b { padding: 7px 12px; background: var(--signal); color: white; font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.context-limits-slide .slide-takeaway { bottom: 21px; }

/* Compaction tension */
.compaction-pressure { display: grid; grid-template-columns: 1fr 130px 1fr; gap: 20px; align-items: center; }
.pressure-side { height: 280px; padding: 22px; box-sizing: border-box; border: 2px solid var(--ink); background: var(--paper-light); }
.pressure-side small { color: var(--signal-dark); font-family: var(--mono); font-size: 12px; }
.pressure-side strong { display: block; margin-top: 8px; font-size: 27px; }
.pressure-side p { margin-top: 16px; font-size: 16px; line-height: 1.4; }
.history-tape { display: flex; margin-top: 30px; overflow: hidden; border: 2px solid var(--ink); }
.history-tape span { padding: 10px 12px; border-left: 1px solid var(--ink); background: rgba(169,213,189,.28); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.history-tape span:first-child { border-left: 0; }
.pressure-center { text-align: center; }
.pressure-center b { display: block; color: var(--signal); font-size: 74px; }
.pressure-center span { font-family: var(--mono); font-size: 12px; }
.small-window { display: flex; align-items: flex-end; gap: 7px; position: relative; height: 73px; margin-top: 26px; padding: 8px; border: 3px solid var(--ink); }
.small-window i { display: block; width: 23%; height: 100%; background: var(--signal); }
.small-window em { position: absolute; right: 10px; top: 25px; color: white; font-family: var(--mono); font-size: 13px; font-style: normal; }
.must-keep-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 18px; }
.must-keep-grid span { padding: 13px 8px; border: 2px solid var(--ink); background: var(--sand); font-size: 14px; font-weight: 700; text-align: center; }
.compaction-answer { display: flex; align-items: center; gap: 25px; margin-top: 20px; padding: 20px 28px; border: 3px solid var(--signal-dark); background: var(--ink); color: var(--paper); box-shadow: 9px 9px 0 var(--signal); }
.compaction-answer small { color: var(--mint); font-family: var(--mono); letter-spacing: .12em; }
.compaction-answer strong { font-size: 21px; }
.compaction-intro-slide .slide-takeaway { bottom: 21px; }

/* Three method taxonomy */
.method-table { width: 100%; border-collapse: collapse; border: 2px solid var(--ink); background: var(--paper-light); box-shadow: 7px 7px 0 rgba(23,34,31,.1); font-size: 12px; }
.method-table th,.method-table td { padding: 7px 11px; border: 1px solid var(--line); vertical-align: middle; }
.method-table thead th { height: 34px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-align: left; }
.method-table tbody th { width: 110px; font-size: 15px; text-align: center; }
.method-table tbody th small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 9px; }
.method-table tbody th b { display: block; margin-top: 3px; font-size: 22px; }
.method-table td:nth-child(2) { width: 105px; font-family: var(--mono); }
.method-table td:nth-child(3) { width: 210px; font-weight: 700; }
.method-table tr.drop th { background: rgba(217,205,178,.55); }
.method-table tr.prune th { background: rgba(169,213,189,.5); }
.method-table tr.summarize th { background: rgba(241,90,55,.18); }
.method-note { display: flex; justify-content: space-between; margin-top: 11px; padding: 9px 14px; border-left: 5px solid var(--sand); background: rgba(255,253,247,.7); font-family: var(--mono); font-size: 11px; }
.compaction-methods-slide .slide-takeaway { bottom: 21px; }

/* Basic compaction flow */
.compact-flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.compact-step { position: relative; box-sizing: border-box; height: 125px; padding: 18px 20px 15px 74px; border: 2px solid var(--ink); background: var(--paper-light); }
.compact-step b { position: absolute; left: 18px; top: 19px; color: var(--signal); font-family: var(--mono); font-size: 25px; }
.compact-step strong { display: block; font-size: 20px; }
.compact-step span { display: block; margin-top: 10px; color: rgba(23,34,31,.64); font-size: 13px; }
.compact-step code { color: var(--signal-dark); background: none; }
.compact-equations { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; padding: 18px 12px; border: 2px solid var(--ink); background: var(--sand); }
.compact-equations code { background: var(--paper-light); color: var(--ink); font-size: 12px; }
.compact-equations span { color: var(--signal); font-size: 25px; }
.safe-boundary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.safe-boundary > div { padding: 17px 20px; border-left: 6px solid var(--mint); background: rgba(255,253,247,.72); }
.safe-boundary > div:last-child { border-left-color: var(--signal); }
.safe-boundary b { display: block; color: var(--signal-dark); font-family: var(--mono); font-size: 12px; }
.safe-boundary span { display: block; margin-top: 8px; font-size: 14px; }
.compaction-flow-slide .slide-takeaway { bottom: 21px; }

/* Before and after payload */
.payload-diff-grid { display: grid; grid-template-columns: 1fr 250px 1fr; gap: 18px; align-items: center; }
.message-stack { height: 500px; border: 2px solid var(--ink); background: var(--paper-light); box-shadow: 7px 7px 0 rgba(23,34,31,.1); }
.stack-head { display: flex; justify-content: space-between; padding: 14px 17px; background: var(--ink); color: var(--paper); }
.stack-head b { font-family: var(--mono); }
.stack-head span { color: var(--mint); font-size: 12px; }
.msg { display: grid; grid-template-columns: 105px 1fr 44px; min-height: 52px; border-top: 1px solid var(--line); }
.msg > * { padding: 12px 14px; box-sizing: border-box; }
.msg code { color: var(--signal-dark); background: none; font-size: 12px; font-weight: 700; }
.msg span { font-size: 13px; }
.msg b { color: var(--signal); font-family: var(--mono); font-size: 10px; }
.msg.tool-msg { min-height: 68px; background: rgba(169,213,189,.18); }
.msg.omitted-msg { min-height: 100px; background: repeating-linear-gradient(-45deg, rgba(217,205,178,.17) 0 10px, transparent 10px 20px); }
.msg.raw { border: 2px solid var(--signal); background: rgba(241,90,55,.08); }
.summary-msg { min-height: 190px; background: rgba(169,213,189,.25); }
.tools-row { padding: 14px; border-top: 2px solid var(--ink); font-family: var(--mono); font-size: 11px; }
.diff-transform { text-align: center; }
.diff-transform small { color: var(--signal-dark); font-family: var(--mono); font-size: 11px; }
.diff-transform > b { display: block; margin-top: 13px; padding: 17px; background: var(--signal); color: white; font-family: var(--mono); font-size: 21px; }
.diff-transform > span { display: block; margin: 5px 0; color: var(--signal); font-size: 38px; }
.state-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.state-fields i { padding: 7px; border: 1px solid var(--ink); background: var(--paper-light); font-size: 11px; font-style: normal; }
.diff-foot { display: flex; justify-content: space-between; margin-top: 15px; padding: 12px 15px; border-left: 6px solid var(--sand); background: rgba(255,253,247,.7); font-size: 12px; }
.compact-diff-slide .slide-takeaway { bottom: 21px; }

/* Summary request styles */
.summary-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.summary-lane { box-sizing: border-box; height: 515px; padding: 18px; border: 2px solid var(--ink); background: var(--paper-light); }
.lane-title { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.lane-title b { color: var(--signal); font-family: var(--mono); font-size: 29px; }
.lane-title strong { font-size: 21px; }
.lane-title span { color: rgba(23,34,31,.57); font-size: 11px; }
.summary-request-stack { display: grid; gap: 6px; margin-top: 14px; }
.summary-request-stack > div { padding: 10px 13px; border: 1px solid var(--ink); background: rgba(217,205,178,.22); font-family: var(--mono); font-size: 11px; }
.summary-request-stack .role-sequence { background: rgba(169,213,189,.25); }
.summary-request-stack .summary-instruction { border-color: var(--signal-dark); }
.summary-request-stack i { color: var(--signal); font-size: 22px; font-style: normal; text-align: center; }
.summary-request-stack .summary-output { background: var(--ink); color: var(--paper); text-align: center; }
.runtime-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 12px; }
.runtime-selector span { padding: 6px 8px; background: var(--mint); font-size: 10px; text-align: center; }
.transcript { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pros-cons { margin-top: 12px; }
.pros-cons p { margin: 5px 0; font-size: 12px; line-height: 1.35; }
.pros-cons b { color: var(--signal-dark); }
.summary-lane > small { display: block; margin-top: 9px; color: rgba(23,34,31,.58); font-family: var(--mono); font-size: 10px; }
.summary-equation { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 15px; }
.summary-equation > * { padding: 10px; border: 1px solid var(--ink); background: rgba(255,253,247,.7); font-size: 11px; text-align: center; }
.summary-equation strong { border-color: var(--signal-dark); background: rgba(241,90,55,.12); }
.summary-generation-slide .slide-takeaway { bottom: 21px; }

/* Mainstream agent table */
.agent-table { width: 100%; border-collapse: collapse; border: 2px solid var(--ink); background: var(--paper-light); box-shadow: 8px 8px 0 rgba(23,34,31,.1); table-layout: fixed; }
.agent-table th,.agent-table td { padding: 17px 16px; border: 1px solid var(--line); vertical-align: top; font-size: 13px; line-height: 1.43; }
.agent-table thead th { padding: 12px 16px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12px; text-align: left; }
.agent-table thead th:first-child { width: 170px; }
.agent-table tbody th { text-align: left; }
.agent-table tbody th strong { display: block; font-size: 20px; }
.agent-table tbody th small { display: block; margin-top: 7px; color: rgba(23,34,31,.55); font-size: 10px; }
.agent-table td code { background: none; color: var(--signal-dark); font-size: 11px; }
.agent-table td small { color: rgba(23,34,31,.56); }
.gemini-row th { border-left: 7px solid #4285f4; }
.claude-row th { border-left: 7px solid #d97757; }
.opencode-row th { border-left: 7px solid var(--mint); }
.agent-boundary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 17px; }
.agent-boundary span { padding: 12px; border-top: 3px solid var(--sand); background: rgba(255,253,247,.7); font-size: 11px; text-align: center; }
.agent-compaction-slide .slide-takeaway { bottom: 21px; }

/* OpenAI provider-native compaction */
.openai-flow { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1.15fr 44px 1fr; align-items: center; gap: 5px; }
.oa-node { box-sizing: border-box; height: 155px; padding: 22px 18px; border: 2px solid var(--ink); background: var(--paper-light); text-align: center; }
.oa-node small { display: block; color: var(--signal-dark); font-family: var(--mono); font-size: 10px; letter-spacing: .07em; }
.oa-node strong { display: block; margin-top: 18px; font-size: 16px; line-height: 1.35; }
.oa-node.endpoint { background: var(--ink); color: var(--paper); }
.oa-node.endpoint small { color: var(--mint); }
.oa-node.canonical { border-color: var(--signal-dark); background: rgba(241,90,55,.15); box-shadow: 7px 7px 0 var(--signal); }
.openai-flow > i { color: var(--signal); font-size: 31px; font-style: normal; text-align: center; }
.compaction-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.compaction-compare > div { padding: 18px 22px; border: 2px solid var(--ink); background: rgba(255,253,247,.72); }
.compaction-compare > div.native { border-color: var(--signal-dark); }
.compaction-compare b { display: block; margin-bottom: 9px; font-size: 18px; }
.compaction-compare span { display: block; margin-top: 5px; font-size: 12px; }
.opaque-rules { display: flex; align-items: center; gap: 9px; margin-top: 17px; }
.opaque-rules span { padding: 9px 12px; border: 1px solid var(--signal-dark); color: var(--signal-dark); font-family: var(--mono); font-size: 11px; }
.opaque-rules strong { margin-left: auto; padding: 12px 18px; background: var(--ink); color: var(--paper); font-size: 14px; }
.opaque-rules code { color: var(--mint); background: none; }
.unknown-box { display: flex; align-items: center; gap: 22px; margin-top: 15px; padding: 12px 16px; border-left: 6px solid var(--sand); background: rgba(255,253,247,.7); }
.unknown-box b { font-family: var(--mono); font-size: 12px; }
.unknown-box span { font-size: 12px; }
.openai-compaction-slide .slide-takeaway { bottom: 21px; }

/* Incremental inference state */
.incremental-state-slide h2,
.transformer-cache-slide h2,
.prefix-match-slide h2,
.cache-implementations-slide h2,
.provider-cache-slide h2,
.tools-miss-slide h2,
.tools-position-slide h2,
.ideal-context-slide h2 { margin-bottom: 20px; font-size: 52px; }

.state-machine-scope { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border: 2px solid var(--ink); background: var(--paper-light); }
.state-machine-scope b { margin-right: 8px; color: var(--signal-dark); font-family: var(--mono); font-size: 12px; }
.state-machine-scope span { padding: 7px 11px; background: var(--sand); font-family: var(--mono); font-size: 11px; }
.state-machine-scope i { margin-left: auto; color: rgba(23,34,31,.65); font-size: 11px; font-style: normal; }
.state-chain { box-sizing: border-box; height: 190px; margin-top: 15px; padding: 18px 28px; border: 2px solid var(--ink); background: rgba(169,213,189,.17); }
.state-main-path,.state-fork-path { display: flex; align-items: center; justify-content: center; gap: 18px; }
.state-chain strong { min-width: 128px; padding: 13px 12px; border: 2px solid var(--ink); background: var(--paper-light); box-shadow: 5px 5px 0 var(--mint); font-family: var(--mono); font-size: 16px; text-align: center; }
.state-chain i { color: var(--signal-dark); font-size: 19px; font-style: normal; }
.state-chain code { padding: 4px 8px; background: var(--ink); color: var(--paper); font-size: 13px; }
.state-fork-path { position: relative; width: fit-content; margin: 31px 0 0 520px; padding-left: 22px; }
.state-fork-path::before { content: ""; position: absolute; left: 0; top: -32px; height: 50px; border-left: 4px solid var(--signal); border-bottom: 4px solid var(--signal); width: 18px; }
.state-fork-path > span { color: var(--signal-dark); font-family: var(--mono); font-size: 11px; font-weight: 700; }
.state-fork-path strong { min-width: 118px; border-color: var(--signal-dark); box-shadow: 5px 5px 0 rgba(241,90,55,.25); font-size: 14px; }
.state-output-loop { display: grid; grid-template-columns: 1fr 36px 1.3fr 36px 1fr 36px 1.45fr; align-items: center; margin-top: 13px; padding: 12px 15px; border-left: 6px solid var(--signal); background: rgba(241,90,55,.08); text-align: center; }
.state-output-loop span,.state-output-loop strong { font-size: 12px; }
.state-output-loop b { color: var(--signal); font-size: 20px; }
.state-branch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 15px; }
.state-case { padding: 16px 18px; border: 2px solid var(--ink); background: var(--paper-light); }
.state-hit-case { border-top: 6px solid var(--mint); }
.state-fork-case { border-top: 6px solid var(--signal); }
.state-case-title { display: flex; align-items: baseline; gap: 15px; margin-bottom: 10px; }
.state-case-title b { color: var(--signal-dark); font-family: var(--mono); font-size: 12px; }
.state-case-title strong { font-size: 16px; }
.state-sequence { display: grid; grid-template-columns: 70px 1fr 1.15fr; align-items: center; gap: 9px; margin-top: 7px; }
.state-sequence span { color: rgba(23,34,31,.6); font-size: 11px; }
.state-sequence code { padding: 8px 10px; background: rgba(217,205,178,.3); color: var(--ink); font-size: 12px; }
.state-sequence mark { background: var(--mint); color: var(--ink); }
.state-sequence em { font-size: 11px; font-style: normal; }
.state-cache-note { display: flex; align-items: center; gap: 17px; margin-top: 14px; padding: 12px 16px; background: var(--ink); color: var(--paper); }
.state-cache-note b { color: var(--mint); font-family: var(--mono); font-size: 13px; }
.state-cache-note span { font-size: 13px; }
.state-cache-note i { margin-left: auto; color: var(--sand); font-size: 11px; font-style: normal; }
.incremental-state-slide .slide-takeaway { bottom: 21px; }

/* Transformer inference and KV cache */

.token-ribbon { display: flex; align-items: center; gap: 10px; padding: 10px 15px; border: 2px solid var(--ink); background: var(--paper-light); font-family: var(--mono); }
.token-ribbon > span { margin-right: 8px; color: var(--signal-dark); font-size: 11px; text-transform: uppercase; }
.token-ribbon code { min-width: 42px; padding: 7px; background: var(--sand); color: var(--ink); text-align: center; }
.token-ribbon i { margin-left: auto; color: var(--signal); font-size: 24px; font-style: normal; }
.token-ribbon strong { padding: 7px 18px; background: var(--ink); color: var(--paper); font-size: 15px; }
.inference-phases { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.phase-card { box-sizing: border-box; height: 195px; padding: 16px 20px; border: 2px solid var(--ink); background: var(--paper-light); }
.phase-head { display: grid; grid-template-columns: 48px 1fr auto; align-items: baseline; }
.phase-head b { color: var(--signal); font-family: var(--mono); font-size: 22px; }
.phase-head strong { font-size: 22px; }
.phase-head span { color: rgba(23,34,31,.58); font-size: 11px; }
.parallel-tokens,.decode-chain { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 20px; }
.parallel-tokens i,.decode-chain i { padding: 9px 16px; border: 2px solid var(--ink); background: rgba(169,213,189,.35); font-family: var(--mono); font-size: 13px; font-style: normal; }
.decode-chain i { background: rgba(241,90,55,.13); }
.decode-chain b { color: var(--signal); }
.phase-card p { margin: 15px 0 0; font-size: 13px; text-align: center; }
.attention-cache-map { display: grid; grid-template-columns: 1.25fr 180px 1fr; gap: 16px; align-items: center; margin-top: 16px; }
.attention-step,.kv-bank { box-sizing: border-box; height: 190px; padding: 18px 20px; border: 2px solid var(--ink); background: var(--paper-light); }
.attention-step small,.kv-bank small { color: var(--signal-dark); font-family: var(--mono); font-size: 10px; }
.qkv-row { display: grid; grid-template-columns: 40px 1fr 40px 1fr 40px 1fr; align-items: center; margin-top: 18px; }
.qkv-row b { padding: 10px; background: var(--ink); color: var(--paper); text-align: center; }
.qkv-row span { padding-left: 8px; font-size: 11px; }
.attention-step p { margin: 17px 0 0; font-size: 13px; }
.cache-transfer { text-align: center; }
.cache-transfer span,.cache-transfer b,.cache-transfer i { display: block; }
.cache-transfer span { font-size: 11px; }
.cache-transfer b { margin-top: 8px; color: var(--signal-dark); font-size: 22px; }
.cache-transfer i { color: var(--signal); font-size: 31px; font-style: normal; }
.kv-bank { border-color: var(--signal-dark); background: rgba(169,213,189,.22); }
.kv-bank > strong { display: block; margin: 5px 0 9px; font-size: 22px; }
.kv-bank > div { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 6px; margin-top: 5px; font-family: var(--mono); font-size: 10px; }
.kv-bank > div i { font-style: normal; }
.kv-bank > div span { padding: 5px; background: var(--paper-light); text-align: center; }
.transformer-cache-slide .slide-takeaway { bottom: 21px; }

/* Cross-request prefix matching */
.request-prefix { display: grid; grid-template-columns: 130px 1.4fr 1.2fr 1fr 245px; align-items: stretch; height: 88px; border: 2px solid var(--ink); background: var(--paper-light); }
.request-prefix > * { display: flex; align-items: center; padding: 12px 17px; border-left: 1px solid var(--ink); box-sizing: border-box; }
.request-prefix > b { border-left: 0; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12px; }
.request-prefix > span { font-family: var(--mono); font-size: 12px; }
.request-prefix > span.hit { background: rgba(169,213,189,.38); }
.request-prefix > span.old { background: rgba(217,205,178,.35); }
.request-prefix > span.new { border: 3px solid var(--signal); background: rgba(241,90,55,.12); }
.request-prefix > i { color: rgba(23,34,31,.65); font-size: 12px; font-style: normal; }
.prefix-rail { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; height: 68px; margin: 8px 0; text-align: center; }
.prefix-rail span { font-size: 12px; }
.prefix-rail b { padding: 10px; background: var(--mint); font-family: var(--mono); font-size: 12px; }
.prefix-rail em { color: var(--signal-dark); font-family: var(--mono); font-size: 11px; font-style: normal; }
.prefix-verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.prefix-verdict { display: grid; grid-template-columns: 100px 1fr; padding: 14px 17px; border-top: 5px solid var(--ink); background: var(--paper-light); }
.prefix-verdict b { color: var(--signal-dark); font-family: var(--mono); font-size: 11px; }
.prefix-verdict code { background: none; color: var(--ink); font-size: 13px; font-weight: 700; }
.prefix-verdict span { grid-column: 1 / -1; margin-top: 7px; font-size: 12px; }
.prefix-verdict.no { border-top-color: var(--signal); }
.prefix-verdict.exact { border-top-color: var(--mint); }
.prefix-inputs { display: flex; align-items: center; gap: 8px; margin-top: 17px; padding: 12px 15px; border: 2px solid var(--ink); background: rgba(255,253,247,.72); }
.prefix-inputs span { padding: 7px 10px; background: var(--sand); font-family: var(--mono); font-size: 11px; }
.prefix-inputs strong { margin-left: auto; font-size: 14px; }
.prefix-match-slide .slide-takeaway { bottom: 21px; }

/* Prefix cache implementation families */
.cache-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cache-method { box-sizing: border-box; height: 480px; padding: 20px; border: 2px solid var(--ink); background: var(--paper-light); box-shadow: 7px 7px 0 rgba(23,34,31,.1); }
.cache-method-title { display: grid; grid-template-columns: 45px 1fr auto; align-items: baseline; padding-bottom: 13px; border-bottom: 2px solid var(--ink); }
.cache-method-title b { color: var(--signal); font-family: var(--mono); font-size: 22px; }
.cache-method-title strong { font-size: 21px; }
.cache-method-title span { color: var(--signal-dark); font-family: var(--mono); font-size: 10px; }
.cache-method p { margin: 24px 0 15px; font-size: 15px; line-height: 1.45; }
.cache-method > small { display: block; padding: 13px; border-left: 5px solid var(--sand); background: rgba(217,205,178,.2); font-size: 12px; line-height: 1.45; }
.block-chain { display: flex; margin-top: 54px; }
.block-chain i { flex: 1; padding: 20px 0; border: 2px solid var(--ink); border-left: 0; background: var(--mint); font-family: var(--mono); font-size: 17px; font-style: normal; text-align: center; }
.block-chain i:first-child { border-left: 2px solid var(--ink); }
.block-chain i.partial { background: repeating-linear-gradient(-45deg, rgba(241,90,55,.15) 0 8px, transparent 8px 16px); }
.breakpoint-chain { display: flex; align-items: center; margin-top: 46px; }
.breakpoint-chain i { flex: 1; padding: 20px 4px; border: 2px solid var(--ink); background: rgba(169,213,189,.28); font-size: 11px; font-style: normal; text-align: center; }
.breakpoint-chain b { color: var(--signal); font-family: var(--mono); font-size: 10px; text-align: center; }
.named-cache { display: grid; grid-template-columns: 1fr 30px; gap: 9px; align-items: center; margin-top: 34px; }
.named-cache code,.named-cache strong,.named-cache span { padding: 12px; border: 2px solid var(--ink); font-family: var(--mono); font-size: 11px; text-align: center; }
.named-cache code { background: var(--sand); color: var(--ink); }
.named-cache b { color: var(--signal); text-align: center; }
.named-cache strong { background: var(--ink); color: var(--mint); }
.named-cache span { grid-column: 1 / -1; background: rgba(169,213,189,.28); }
.implementation-boundary { display: flex; align-items: center; gap: 24px; margin-top: 18px; padding: 15px 19px; border: 2px solid var(--signal-dark); background: rgba(241,90,55,.08); }
.implementation-boundary b { white-space: nowrap; font-size: 16px; }
.implementation-boundary span { font-size: 13px; }
.cache-implementations-slide .slide-takeaway { bottom: 21px; }

/* Provider cache comparison */
.provider-cache-table { width: 100%; border-collapse: collapse; border: 2px solid var(--ink); background: var(--paper-light); box-shadow: 8px 8px 0 rgba(23,34,31,.1); table-layout: fixed; }
.provider-cache-table th,.provider-cache-table td { padding: 10px 13px; border: 1px solid var(--line); vertical-align: middle; font-size: 12px; line-height: 1.35; }
.provider-cache-table thead th { padding: 12px 13px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 11px; text-align: left; }
.provider-cache-table thead th:first-child { width: 120px; }
.provider-cache-table thead th:nth-child(2) { width: 330px; }
.provider-cache-table thead th:nth-child(4) { width: 300px; }
.provider-cache-table tbody th { border-left: 6px solid var(--mint); font-size: 17px; text-align: left; }
.provider-cache-table tbody tr:nth-child(even) { background: rgba(217,205,178,.13); }
.provider-table-note { display: flex; align-items: center; gap: 19px; margin-top: 18px; padding: 14px 18px; border: 2px solid var(--signal-dark); background: rgba(241,90,55,.08); }
.provider-table-note b { color: var(--signal-dark); font-family: var(--mono); font-size: 11px; }
.provider-table-note span,.provider-table-note strong { font-size: 13px; }
.provider-table-note i { color: var(--signal); font-size: 25px; font-style: normal; }
.provider-cache-slide .slide-takeaway { bottom: 21px; }

/* Tool definition changes and prefix invalidation */
.cache-formula { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cache-formula code { padding: 14px 20px; border: 2px solid var(--ink); background: var(--paper-light); color: var(--ink); font-size: 17px; text-align: center; }
.cache-formula mark { padding: 3px 9px; background: var(--signal); color: white; }
.tool-prefix-compare { position: relative; margin-top: 20px; }
.tool-prefix-row { display: grid; grid-template-columns: 115px 1fr 1.2fr 2fr 70px; height: 74px; border: 2px solid var(--ink); background: var(--paper-light); }
.tool-prefix-row > * { display: flex; align-items: center; padding: 11px 15px; border-left: 1px solid var(--ink); box-sizing: border-box; font-family: var(--mono); font-size: 11px; }
.tool-prefix-row > b { border-left: 0; background: var(--ink); color: var(--paper); }
.tool-prefix-row .shared { background: rgba(169,213,189,.35); }
.tool-prefix-row .tools { background: var(--sand); }
.tool-prefix-row .changed { border: 3px solid var(--signal); background: rgba(241,90,55,.13); }
.tool-prefix-row .recalc { background: repeating-linear-gradient(-45deg, rgba(241,90,55,.1) 0 9px, transparent 9px 18px); }
.tool-prefix-row .suffix { background: var(--mint); }
.difference-marker { display: flex; align-items: center; gap: 20px; height: 54px; padding-left: 36%; }
.difference-marker i { color: var(--signal); font-size: 23px; font-style: normal; }
.difference-marker strong { color: var(--signal-dark); font-family: var(--mono); font-size: 11px; }
.difference-marker span { font-size: 11px; }
.dependency-chain { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 21px; padding: 16px; background: var(--ink); color: var(--paper); }
.dependency-chain span { font-size: 13px; }
.dependency-chain b { color: var(--signal); font-size: 20px; }
.miss-boundaries { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 17px; }
.miss-boundaries > div { padding: 15px 18px; border-left: 6px solid var(--mint); background: var(--paper-light); }
.miss-boundaries > div:last-child { border-left-color: var(--sand); }
.miss-boundaries b { display: block; font-size: 14px; }
.miss-boundaries span { display: block; margin-top: 6px; font-size: 12px; }
.tools-miss-slide .slide-takeaway { bottom: 21px; }

/* Tool definitions at the head or tail */
.position-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.position-card { box-sizing: border-box; height: 390px; padding: 19px 21px; border: 2px solid var(--ink); background: var(--paper-light); }
.position-title { display: grid; grid-template-columns: 45px 1fr auto; align-items: center; padding-bottom: 13px; border-bottom: 2px solid var(--ink); }
.position-title b { color: var(--signal); font-family: var(--mono); font-size: 24px; }
.position-title strong { font-size: 22px; }
.position-title code { background: var(--sand); color: var(--ink); font-size: 12px; }
.rounds { display: grid; gap: 8px; margin-top: 19px; }
.rounds span { padding: 10px 13px; border: 1px solid var(--ink); background: rgba(169,213,189,.22); font-family: var(--mono); font-size: 11px; }
.position-good,.position-bad { margin-top: 14px; padding: 11px 14px; border-left: 6px solid var(--mint); background: rgba(169,213,189,.15); font-size: 12px; }
.position-bad { margin-top: 8px; border-left-color: var(--signal); background: rgba(241,90,55,.08); }
.position-decision { width: 100%; margin-top: 18px; border-collapse: collapse; border: 2px solid var(--ink); background: var(--paper-light); }
.position-decision th,.position-decision td { padding: 10px 15px; border: 1px solid var(--line); font-size: 12px; }
.position-decision th { background: var(--ink); color: var(--paper); text-align: left; }
.position-decision td:first-child { width: 38%; font-weight: 700; }
.tools-position-slide .slide-takeaway { bottom: 21px; }

/* Cache-shaped ideal context */
.ideal-layout { display: grid; grid-template-columns: 1.05fr .85fr 1.2fr; gap: 14px; }
.ideal-zone { display: grid; grid-template-rows: auto 1fr 44px; box-sizing: border-box; height: 360px; border: 2px solid var(--ink); background: var(--paper-light); }
.zone-label { padding: 16px 18px; background: var(--ink); color: var(--paper); }
.zone-label b { display: block; color: var(--mint); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; }
.zone-label span { display: block; margin-top: 6px; font-size: 14px; }
.middle-zone .zone-label { background: #4d514b; }
.tail-zone .zone-label { background: var(--signal); }
.zone-items { display: grid; gap: 8px; padding: 17px 18px 10px; }
.zone-items span { padding: 10px 12px; border-left: 6px solid var(--mint); background: rgba(169,213,189,.18); font-size: 12px; }
.middle-zone .zone-items span { border-left-color: var(--sand); background: rgba(217,205,178,.18); }
.tail-zone .zone-items span { border-left-color: var(--signal); background: rgba(241,90,55,.08); }
.ideal-zone > p { display: flex; align-items: center; justify-content: center; margin: 0 18px; text-align: center; }
.ideal-zone > p > small { color: rgba(23,34,31,.6); font-size: 11px; line-height: 1.35; }
.outside-context { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding: 12px 14px; border: 2px dashed rgba(23,34,31,.6); background: rgba(255,253,247,.55); }
.outside-context b { margin-right: 7px; color: var(--signal-dark); font-family: var(--mono); font-size: 11px; }
.outside-context span { padding: 7px 10px; background: var(--sand); font-size: 11px; }
.outside-context i { margin-left: auto; color: var(--signal-dark); font-size: 11px; font-style: normal; }
.epoch-line { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 14px; padding: 13px 15px; background: var(--ink); color: var(--paper); }
.epoch-line span { font-size: 12px; }
.epoch-line b { color: var(--signal); }
.epoch-line strong { padding: 6px 10px; border: 1px solid var(--signal); font-size: 12px; }
.layout-boundary { margin-top: 12px; padding: 10px 14px; border-left: 6px solid var(--sand); background: rgba(255,253,247,.7); font-size: 11px; }
.ideal-context-slide .slide-takeaway { bottom: 21px; }

/* Recall and memory */
.memory-recall-slide h2,
.deterministic-loading-slide h2,
.progressive-disclosure-slide h2,
.memory-alternatives-slide h2,
.skill-definition-slide h2 { margin-bottom: 20px; font-size: 52px; }

.recall-warning { display: flex; align-items: center; gap: 17px; padding: 12px 17px; border: 2px solid var(--signal-dark); background: rgba(241,90,55,.08); }
.recall-warning span { font-size: 15px; font-weight: 700; }
.recall-warning b { color: var(--signal); font-size: 25px; }
.recall-warning strong { font-size: 15px; }
.recall-warning i { margin-left: auto; color: rgba(23,34,31,.62); font-size: 11px; font-style: normal; }
.recall-source { display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 18px; padding: 17px 22px; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); }
.recall-source + .recall-warning { margin-top: 16px; }
.recall-source small { color: var(--mint); font-family: var(--mono); font-size: 11px; }
.recall-source strong { font-size: 20px; }
.recall-source span { color: var(--sand); font-size: 11px; }
.recall-path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.recall-path { box-sizing: border-box; height: 295px; padding: 19px 20px; border: 2px solid var(--ink); border-top: 7px solid var(--mint); background: var(--paper-light); }
.prefetch-path { border-top-color: var(--sand); }
.retrieval-path { border-top-color: var(--signal); }
.recall-path-head { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding-bottom: 13px; border-bottom: 2px solid var(--ink); }
.recall-path-head b { color: var(--signal-dark); font-family: var(--mono); font-size: 20px; }
.recall-path-head strong { font-size: 18px; }
.recall-lines { margin-top: 20px; }
.recall-lines p { display: flex; align-items: center; min-height: 62px; margin: 0; font-size: 13px; line-height: 1.5; }
.recall-lines p + p { border-top: 1px solid rgba(23,34,31,.25); color: rgba(23,34,31,.72); }
.recall-target { padding: 12px; background: rgba(169,213,189,.2); font-family: var(--mono); font-size: 12px; font-weight: 700; text-align: center; }
.recall-boundary { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 17px; padding: 13px; background: rgba(217,205,178,.25); }
.recall-boundary b { color: var(--signal-dark); font-size: 14px; }
.recall-boundary span { font-size: 12px; }
.memory-recall-slide .slide-takeaway { bottom: 21px; }

.deterministic-flow { display: flex; align-items: center; justify-content: center; gap: 13px; margin-bottom: 19px; padding: 14px 18px; background: var(--ink); color: var(--paper); }
.deterministic-flow span,.deterministic-flow strong { font-size: 13px; }
.deterministic-flow b { color: var(--signal); font-size: 19px; }
.deterministic-flow strong { padding: 6px 12px; border: 1px solid var(--mint); color: var(--mint); }
.deterministic-table { width: 100%; border-collapse: collapse; border: 2px solid var(--ink); background: var(--paper-light); table-layout: fixed; }
.deterministic-table th,.deterministic-table td { padding: 9px 10px; border: 1px solid var(--line); vertical-align: middle; font-size: 10.5px; line-height: 1.3; }
.deterministic-table thead th { padding: 9px 10px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 10px; text-align: left; }
.deterministic-table thead th:first-child { width: 175px; }
.deterministic-table thead th:nth-child(2) { width: 520px; }
.deterministic-table tbody th { border-left: 6px solid var(--mint); font-size: 14px; text-align: left; }
.deterministic-table code { padding: 1px 3px; background: rgba(217,205,178,.3); color: var(--ink); font-size: 9.5px; }
.deterministic-table tbody tr:nth-child(even) { background: rgba(217,205,178,.13); }
.deterministic-lessons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 14px; }
.deterministic-lessons > div { padding: 10px 14px; border-top: 5px solid var(--mint); background: var(--paper-light); }
.deterministic-lessons > div:nth-child(2) { border-top-color: var(--sand); }
.deterministic-lessons > div:nth-child(3) { border-top-color: var(--signal); }
.deterministic-lessons b { display: block; color: var(--signal-dark); font-family: var(--mono); font-size: 11px; }
.deterministic-lessons span { display: block; margin-top: 7px; font-size: 11px; line-height: 1.4; }
.deterministic-loading-slide .slide-takeaway { bottom: 21px; }

.disclosure-stage { display: grid; grid-template-columns: 1.2fr 220px .8fr; gap: 18px; align-items: stretch; }
.root-index-card,.on-demand-docs { box-sizing: border-box; height: 390px; border: 2px solid var(--ink); background: var(--paper-light); }
.root-index-card { padding: 18px 20px; }
.index-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 13px; border-bottom: 2px solid var(--ink); }
.index-head b { color: var(--signal-dark); font-family: var(--mono); font-size: 13px; }
.index-head span { font-size: 11px; }
.index-rule { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 11px; margin-top: 12px; padding: 11px 13px; background: rgba(169,213,189,.18); }
.index-rule small { color: var(--signal-dark); font-family: var(--mono); font-size: 10px; }
.index-rule strong { font-size: 12px; }
.index-rule code { background: none; color: var(--ink); font-size: 11px; }
.disclosure-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; color: var(--signal-dark); }
.disclosure-arrow span { font-size: 11px; }
.disclosure-arrow b { color: var(--signal); font-size: 27px; }
.on-demand-docs { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 20px; }
.doc-card { padding: 19px 17px; border: 2px solid var(--ink); background: var(--paper-light); }
.doc-card b,.doc-card span { display: block; }
.doc-card b { font-family: var(--mono); font-size: 13px; }
.doc-card span { margin-top: 7px; font-size: 11px; }
.doc-card.muted { opacity: .4; }
.doc-card.active { border-color: var(--signal-dark); background: rgba(241,90,55,.12); box-shadow: 6px 6px 0 var(--signal); }
.disclosure-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 17px; }
.disclosure-modes > div { padding: 13px 15px; border-top: 5px solid var(--mint); background: var(--paper-light); }
.disclosure-modes > div:nth-child(2) { border-top-color: var(--sand); }
.disclosure-modes > div:nth-child(3) { border-top-color: var(--signal); }
.disclosure-modes b,.disclosure-modes span,.disclosure-modes small { display: block; }
.disclosure-modes b { font-family: var(--mono); font-size: 11px; }
.disclosure-modes span { margin-top: 5px; font-size: 12px; }
.disclosure-modes small { margin-top: 5px; color: rgba(23,34,31,.6); font-size: 10px; }
.disclosure-cycle { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 15px; padding: 12px; background: rgba(217,205,178,.25); }
.disclosure-cycle span,.disclosure-cycle strong { font-size: 12px; }
.disclosure-cycle b { color: var(--signal); }
.progressive-disclosure-slide .slide-takeaway { bottom: 21px; }

.memory-group-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.memory-group { box-sizing: border-box; height: 505px; padding: 15px 15px 13px; border: 1px solid rgba(23,34,31,.42); border-top: 6px solid var(--mint); background: var(--paper-light); }
.prefetch-group { border-top-color: var(--sand); }
.retrieval-group { border-top-color: var(--signal); }
.unknown-group { border-top-color: var(--ink); }
.memory-group header { display: grid; grid-template-columns: 36px 1fr; align-items: baseline; padding-bottom: 11px; border-bottom: 2px solid var(--ink); }
.memory-group header b { color: var(--signal-dark); font-family: var(--mono); font-size: 18px; }
.memory-group header strong { font-size: 14px; }
.memory-group-product { min-height: 83px; padding: 12px 5px 9px; border-bottom: 1px solid rgba(23,34,31,.2); }
.memory-group-product b { display: block; margin-bottom: 6px; color: var(--signal-dark); font-family: var(--mono); font-size: 10.5px; }
.memory-group-product p { margin: 0; font-size: 10px; line-height: 1.4; }
.memory-group > small { display: block; margin-top: 14px; padding: 11px; border-left: 4px solid var(--sand); background: rgba(217,205,178,.15); font-size: 9.5px; line-height: 1.4; }
.memory-boundaries { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 14px; font-size: 11px; }
.memory-boundaries span { padding-left: 12px; border-left: 5px solid var(--sand); }
.memory-alternatives-slide .slide-takeaway { bottom: 21px; }

/* Skill definition and lifecycle */
.skill-definition { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 18px; padding: 15px 20px; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); }
.skill-definition b { color: var(--mint); font-family: var(--mono); font-size: 14px; }
.skill-definition strong { font-size: 18px; }
.skill-definition span { color: var(--sand); font-size: 11px; }
.skill-two-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 19px; }
.skill-lane { box-sizing: border-box; height: 390px; padding: 20px; border: 2px solid var(--ink); background: var(--paper-light); }
.catalog-lane { border-top: 7px solid var(--mint); }
.body-lane { border-top: 7px solid var(--signal); }
.skill-lane-head { display: grid; grid-template-columns: 110px 1fr auto; align-items: baseline; padding-bottom: 13px; border-bottom: 2px solid var(--ink); }
.skill-lane-head b { color: var(--signal-dark); font-family: var(--mono); font-size: 11px; }
.skill-lane-head strong { font-size: 20px; }
.skill-lane-head span { font-size: 10px; }
.catalog-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 22px; }
.catalog-fields code { padding: 14px; background: var(--sand); color: var(--ink); font-size: 12px; text-align: center; }
.skill-timing { display: grid; grid-template-columns: 1fr 24px 1fr 28px 1.7fr; align-items: center; gap: 5px; margin-top: 22px; text-align: center; }
.skill-timing span { padding: 11px 7px; border: 1px solid var(--ink); font-size: 10px; }
.skill-timing b { color: var(--signal); }
.skill-timing strong { padding: 11px 8px; background: rgba(169,213,189,.25); font-size: 11px; }
.skill-lane p { margin-top: 23px; font-size: 12px; line-height: 1.5; text-align: center; }
.skill-outside { display: grid; gap: 10px; margin-top: 22px; text-align: center; }
.skill-outside span { padding: 12px; border: 2px dashed rgba(23,34,31,.45); font-size: 11px; }
.skill-outside b { font-size: 12px; }
.skill-activation { display: grid; grid-template-columns: 75px 30px 1fr; align-items: center; gap: 8px; margin-top: 18px; }
.skill-activation span { padding: 11px; background: var(--signal); color: white; font-size: 11px; text-align: center; }
.skill-activation b { color: var(--signal); text-align: center; }
.skill-activation strong { padding: 12px; background: rgba(241,90,55,.1); font-size: 11px; text-align: center; }
.skill-lifecycle { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 17px; padding: 13px 17px; background: var(--ink); color: var(--paper); }
.skill-lifecycle span { font-size: 13px; }
.skill-lifecycle b { color: var(--signal); font-size: 22px; }
.skill-lifecycle i { margin-left: 20px; color: var(--sand); font-size: 11px; font-style: normal; }
.skill-boundary { margin-top: 13px; padding: 10px 14px; border-left: 6px solid var(--sand); background: rgba(255,253,247,.72); font-size: 11px; text-align: center; }
.skill-definition-slide .slide-takeaway { bottom: 21px; }

/* Skill implementations */
.skill-implementations-slide h2,
.subagent-concept-slide h2,
.subagent-uses-slide h2,
.subagent-startup-slide h2 { margin-bottom: 20px; font-size: 52px; }
.skill-impl-table { border: 2px solid var(--ink); background: var(--paper-light); }
.skill-impl-row { display: grid; grid-template-columns: 1.05fr 1.35fr 1.4fr 1.25fr 1.45fr; align-items: stretch; min-height: 66px; border-bottom: 1px solid rgba(23,34,31,.24); }
.skill-impl-row:last-child { border-bottom: 0; }
.skill-impl-row > * { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; margin: 0; padding: 9px 13px; border-right: 1px solid rgba(23,34,31,.2); font-size: 10.5px; line-height: 1.35; }
.skill-impl-row > *:last-child { border-right: 0; }
.skill-impl-row strong { color: var(--signal-dark); font-family: var(--mono); font-size: 11px; }
.skill-impl-row i { color: rgba(23,34,31,.58); font-size: 9px; font-style: normal; }
.skill-impl-row code { padding: 1px 4px; background: rgba(23,34,31,.08); color: var(--ink); font-size: 9.5px; }
.skill-impl-head { min-height: 47px; background: var(--ink); color: var(--paper); }
.skill-impl-head b { color: var(--mint); font-family: var(--mono); font-size: 10.5px; }
.skill-impl-row .positive { border-left: 5px solid var(--mint); background: rgba(169,213,189,.14); }
.skill-impl-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 14px; }
.skill-impl-notes span { padding: 12px 15px; border-left: 5px solid var(--sand); background: rgba(217,205,178,.18); font-size: 11px; }
.skill-impl-notes b { margin-right: 10px; color: var(--signal-dark); font-family: var(--mono); }
.skill-implementations-slide .slide-takeaway { bottom: 21px; }

/* Subagent concept */
.subagent-definition { display: grid; grid-template-columns: 120px 250px 1fr; align-items: center; gap: 18px; padding: 15px 20px; background: var(--ink); color: var(--paper); }
.subagent-definition b { color: var(--mint); font-family: var(--mono); font-size: 14px; }
.subagent-definition strong { font-size: 19px; }
.subagent-definition span { color: var(--sand); font-size: 12px; }
.subagent-mechanism { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 15px; padding: 12px 16px; background: rgba(217,205,178,.22); }
.subagent-mechanism span { font-size: 11px; }
.subagent-mechanism span b { margin-right: 5px; color: var(--signal-dark); font-family: var(--mono); }
.subagent-mechanism strong { color: var(--signal); font-size: 20px; }
.subagent-sequence { display: block; width: 100%; height: 420px; margin-top: 10px; overflow: visible; }
.subagent-sequence text { fill: var(--ink); font-family: var(--sans); }
.subagent-sequence .sequence-time { fill: var(--signal-dark); font-family: var(--mono); font-size: 13px; font-weight: 800; letter-spacing: 2px; }
.subagent-sequence .sequence-actor { font-family: var(--mono); font-size: 16px; font-weight: 800; }
.subagent-sequence .main-actor { fill: var(--signal-dark); }
.subagent-sequence .sequence-line { stroke: rgba(23,34,31,.35); stroke-width: 2; stroke-dasharray: 7 7; }
.subagent-sequence .main-line { stroke: var(--ink); stroke-width: 4; stroke-dasharray: none; }
.subagent-sequence .sequence-run { stroke: var(--ink); stroke-width: 2; }
.subagent-sequence .run-one { fill: var(--mint); }
.subagent-sequence .run-two { fill: var(--sand); }
.subagent-sequence .sequence-run-label { font-family: var(--mono); font-size: 11px; font-weight: 800; text-anchor: middle; }
.subagent-sequence .sequence-message { fill: none; stroke-width: 3; }
.subagent-sequence .start-message { stroke: var(--signal); }
.subagent-sequence .return-message { stroke: var(--signal-dark); }
.subagent-sequence marker path { fill: var(--signal-dark); }
.subagent-sequence .sequence-step { fill: var(--signal-dark); font-size: 12px; font-weight: 800; }
.subagent-sequence .sequence-packet { fill: rgba(23,34,31,.62); font-family: var(--mono); font-size: 10px; }
.subagent-concept-slide .slide-takeaway { bottom: 21px; }

/* Subagent use cases */
.subagent-use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.subagent-use-card { box-sizing: border-box; height: 505px; padding: 20px; border: 2px solid var(--ink); border-top: 7px solid var(--mint); background: var(--paper-light); }
.parallel-use { border-top-color: var(--sand); }
.blind-use { border-top-color: var(--signal); }
.subagent-use-card header { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.subagent-use-card header b { color: var(--signal-dark); font-family: var(--mono); font-size: 20px; }
.subagent-use-card header strong { font-size: 18px; }
.use-diagram { display: grid; grid-template-columns: 1fr 25px 1fr 25px 1fr; align-items: center; gap: 5px; margin-top: 30px; }
.use-diagram span { padding: 14px 7px; border: 1px solid var(--ink); font-family: var(--mono); font-size: 9.5px; text-align: center; }
.use-diagram b { color: var(--signal); text-align: center; }
.parallel-agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 30px; }
.parallel-agents span { padding: 14px 6px; background: rgba(217,205,178,.28); font-family: var(--mono); font-size: 10px; text-align: center; }
.time-equation { margin-top: 18px; padding: 14px 10px; background: var(--ink); text-align: center; }
.time-equation code { background: none; color: var(--mint); font-size: 10px; }
.blind-branches { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; gap: 10px; margin-top: 30px; }
.blind-branches span { padding: 17px 8px; border: 2px solid var(--ink); font-size: 11px; line-height: 1.4; text-align: center; }
.blind-branches b { padding: 13px 6px; background: var(--signal); color: white; font-family: var(--mono); font-size: 10px; text-align: center; }
.subagent-use-card > p { min-height: 93px; margin: 28px 0 20px; font-size: 12px; line-height: 1.55; }
.subagent-use-card > small { display: block; padding: 13px; border-left: 5px solid var(--sand); background: rgba(217,205,178,.16); font-size: 10px; line-height: 1.45; }
.subagent-use-rule { display: flex; align-items: center; justify-content: center; gap: 35px; margin-top: 16px; padding: 13px; background: var(--ink); color: var(--paper); }
.subagent-use-rule b { color: var(--mint); font-size: 13px; }
.subagent-use-rule span { color: var(--sand); font-size: 11px; }
.subagent-uses-slide .slide-takeaway { bottom: 21px; }

/* Subagent startup modes */
.startup-table { border: 2px solid var(--ink); background: var(--paper-light); }
.startup-row { display: grid; grid-template-columns: 135px 1.05fr 1.05fr 1.08fr 1.3fr 1.12fr; min-height: 108px; border-bottom: 1px solid rgba(23,34,31,.24); }
.startup-row:last-child { border-bottom: 0; }
.startup-row > * { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; margin: 0; padding: 10px 12px; border-right: 1px solid rgba(23,34,31,.2); font-size: 10px; line-height: 1.4; }
.startup-row > *:last-child { border-right: 0; }
.startup-row > strong { padding-left: 16px; color: var(--signal-dark); font-family: var(--mono); font-size: 13px; }
.startup-row span b { color: var(--signal-dark); font-size: 10px; }
.startup-head { min-height: 48px; background: var(--ink); color: var(--paper); }
.startup-head b { color: var(--mint); font-family: var(--mono); font-size: 10.5px; }
.fork-row { border-left: 7px solid var(--signal); }
.fresh-row { border-left: 7px solid var(--sand); }
.specialist-row { border-left: 7px solid var(--mint); }
.startup-row .prompt-control { background: rgba(169,213,189,.16); }
.startup-row .agent-examples { align-content: center; flex-flow: row wrap; gap: 5px; }
.agent-examples i { padding: 4px 6px; background: rgba(217,205,178,.28); color: var(--ink); font-family: var(--mono); font-size: 8.5px; font-style: normal; line-height: 1.2; }
.resume-lane { display: grid; grid-template-columns: 1.15fr .9fr 1.5fr; align-items: center; gap: 18px; margin-top: 16px; padding: 15px 18px; border: 2px dashed var(--signal-dark); background: rgba(241,90,55,.06); }
.resume-lane div { display: flex; align-items: center; gap: 14px; }
.resume-lane b { color: var(--signal-dark); font-family: var(--mono); font-size: 12px; }
.resume-lane strong { font-size: 12px; }
.resume-lane span { font-size: 11px; text-align: center; }
.resume-lane i { color: rgba(23,34,31,.67); font-size: 10px; font-style: normal; line-height: 1.4; }
.startup-cost-equation { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 15px; padding: 13px; background: var(--ink); color: var(--paper); }
.startup-cost-equation span { margin-right: 5px; color: var(--mint); font-family: var(--mono); font-size: 11px; }
.startup-cost-equation b { color: var(--signal); }
.startup-cost-equation code { padding: 5px 8px; background: rgba(255,255,255,.08); color: var(--paper); font-size: 10px; }
.subagent-startup-slide .slide-takeaway { bottom: 21px; }

/* OpenCode real context */
.opencode-context-slide h2,
.opencode-compaction-slide h2,
.agent-futures-slide h2 { margin-bottom: 18px; font-size: 50px; }
.real-context-layout { display: grid; grid-template-columns: 1fr 285px; gap: 18px; align-items: stretch; }
.real-context-stack { border: 3px solid var(--ink); background: var(--paper-light); }
.context-table-group { display: grid; grid-template-columns: 215px 1fr; border-top: 4px solid var(--paper-light); }
.context-table-group:first-child { border-top: 0; }
.context-table-group > strong { display: flex; flex-direction: column; justify-content: center; padding: 13px 22px; border-right: 2px solid rgba(23,34,31,.28); font-family: var(--mono); font-size: 15px; line-height: 1.35; }
.context-table-group > strong small { margin-top: 5px; font-family: var(--sans); font-size: 10px; font-weight: 500; }
.context-table-group > div { display: grid; align-items: stretch; }
.context-table-group > div > span { display: flex; align-items: center; min-height: 49px; padding: 0 22px; border-bottom: 2px solid var(--paper-light); font-size: 14px; }
.context-table-group code { padding: 2px 5px; background: rgba(23,34,31,.08); color: var(--ink); font-size: 12px; }
.system-prompt-group { background: rgba(169,213,189,.26); }
.system-prompt-group > strong { border-left: 10px solid var(--mint); }
.qwen-template-group { background: rgba(241,90,55,.14); }
.qwen-template-group > strong { border-left: 10px solid var(--signal); }
.history-sequence-group { background: rgba(217,205,178,.28); }
.history-sequence-group > strong { border-left: 10px solid var(--sand); }
.generation-cursor-group { background: rgba(23,34,31,.12); }
.generation-cursor-group > strong { border-left: 10px solid var(--ink); }
.history-sequence { grid-template-columns: 1fr; }
.history-sequence span { line-height: 1.35; }
.history-sequence span b { display: block; margin-right: 12px; color: var(--signal-dark); font-family: var(--mono); font-size: 10px; }
.history-sequence i { display: flex; align-items: center; min-height: 28px; padding-left: 22px; border-bottom: 2px solid var(--paper-light); font-size: 22px; font-style: normal; }
.real-context-color-legend { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); gap: 12px; }
.real-context-color-legend > div { min-height: 85px; padding: 18px 17px; border-top: 7px solid var(--mint); background: rgba(255,253,247,.78); }
.real-context-color-legend > div:nth-child(2) { border-top-color: var(--signal); }
.real-context-color-legend > div:nth-child(3) { border-top-color: var(--sand); }
.real-context-color-legend > div:nth-child(4) { border-top-color: var(--ink); }
.real-context-color-legend b,.real-context-color-legend span { display: block; }
.real-context-color-legend b { color: var(--signal-dark); font-family: var(--mono); font-size: 10px; }
.real-context-color-legend span { margin-top: 11px; font-size: 11px; line-height: 1.45; }
.opencode-context-slide .slide-takeaway { bottom: 21px; }

/* OpenCode compaction before / summary / after */
.compact-context-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.compact-context-column { box-sizing: border-box; height: 585px; border: 3px solid var(--ink); background: var(--paper-light); }
.compact-context-column header { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 48px; padding: 0 14px; background: var(--ink); color: var(--paper); }
.compact-context-column header b { color: var(--mint); font-family: var(--mono); font-size: 12px; letter-spacing: .4px; }
.compact-context-column header strong { font-size: 14px; }
.compact-context-column header code { grid-column: 1 / -1; justify-self: end; margin-top: -13px; padding: 2px 6px; background: rgba(255,255,255,.08); color: var(--sand); font-size: 9px; }
.compact-stack-group { display: grid; grid-template-columns: 118px 1fr; border-top: 4px solid var(--paper-light); }
.compact-stack-group > b { display: flex; align-items: center; padding: 10px 12px; border-right: 2px solid rgba(23,34,31,.25); font-family: var(--mono); font-size: 12.5px; line-height: 1.25; }
.compact-stack-group > div { display: grid; }
.compact-stack-group span { display: flex; align-items: center; min-height: 31px; padding: 0 12px; border-bottom: 2px solid var(--paper-light); font-size: 13.5px; line-height: 1.25; }
.compact-stack-group code { padding: 1px 3px; background: rgba(23,34,31,.08); color: var(--ink); font-size: 9px; }
.compact-system-group { background: rgba(169,213,189,.26); }
.compact-system-group > b { border-left: 8px solid var(--mint); }
.compact-template-group { background: rgba(241,90,55,.14); }
.compact-template-group > b { border-left: 8px solid var(--signal); }
.compact-history-group { background: rgba(217,205,178,.28); }
.compact-history-group > b { border-left: 8px solid var(--sand); }
.compact-cursor-group { background: rgba(23,34,31,.12); }
.compact-cursor-group > b { border-left: 8px solid var(--ink); }
.compact-cursor-group span { min-height: 38px; font-weight: 700; }
.summary-context .compact-system-group span { min-height: 78px; }
.summary-transcript-group span { min-height: 105px; font-size: 13.5px; }
.opencode-compaction-slide .slide-takeaway { bottom: 21px; }

/* Practical context-saving tips */
.token-tips-slide h2 { margin-bottom: 24px; font-size: 50px; }
.token-tips-slide::before {
  background:
    radial-gradient(circle at 89% 14%, rgba(241,90,55,.11) 0 92px, transparent 93px),
    linear-gradient(135deg, transparent 0 71%, rgba(169,213,189,.14) 71% 79%, transparent 79%),
    var(--paper) !important;
}
.token-tip-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 235px 235px;
  gap: 17px;
}
.token-tip-card {
  position: relative;
  box-sizing: border-box;
  padding: 22px 24px 20px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-top: 8px solid var(--mint);
  background: rgba(255,253,247,.9);
  box-shadow: 7px 7px 0 rgba(23,34,31,.07);
}
.token-tip-card:nth-child(-n+2) { grid-column: span 3; }
.token-tip-card:nth-child(n+3) { grid-column: span 2; }
.token-tip-card::after {
  position: absolute;
  right: -12px;
  bottom: -34px;
  color: rgba(23,34,31,.045);
  font-family: var(--mono);
  font-size: 118px;
  font-weight: 900;
  line-height: 1;
}
.token-tip-card:nth-child(1)::after { content: "01"; }
.token-tip-card:nth-child(2)::after { content: "02"; }
.token-tip-card:nth-child(3)::after { content: "03"; }
.token-tip-card:nth-child(4)::after { content: "04"; }
.token-tip-card:nth-child(5)::after { content: "05"; }
.token-tip-card header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 145px 1fr;
  align-items: baseline;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--ink);
}
.token-tip-card:nth-child(n+3) header { grid-template-columns: 1fr; gap: 8px; }
.token-tip-card header b {
  color: var(--signal-dark);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
}
.token-tip-card header strong { font-size: 20px; line-height: 1.2; }
.token-tip-card p {
  position: relative;
  z-index: 1;
  min-height: 52px;
  margin: 19px 0 14px;
  font-size: 14px;
  line-height: 1.45;
}
.token-tip-card small {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 7px 10px;
  background: var(--ink);
  color: var(--mint);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 800;
}
.disclosure-tip { border-top-color: var(--sand); }
.compact-tip { border-top-color: var(--signal); }
.subagent-tip { border-top-color: var(--mint); }
.model-tip { border-top-color: var(--ink); }
.disclosure-tip small { color: var(--sand); }
.compact-tip small { color: #ff9d85; }
.model-tip small { color: var(--paper); }
.token-tips-slide .slide-takeaway { bottom: 21px; }

/* Future agent directions */
.future-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.future-card { box-sizing: border-box; height: 267px; padding: 22px 24px; border: 2px solid var(--ink); border-top: 7px solid var(--mint); background: var(--paper-light); }
.profile-future { border-top-color: var(--sand); }
.alignment-future { border-top-color: var(--signal); }
.context-future { border-top-color: var(--ink); }
.future-card header { display: grid; grid-template-columns: 165px 1fr; align-items: baseline; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.future-card header b { color: var(--signal-dark); font-family: var(--mono); font-size: 11px; letter-spacing: .5px; }
.future-card header strong { font-size: 19px; }
.future-card p { margin: 18px 0 15px; font-size: 14px; line-height: 1.5; }
.future-mini-flow { display: flex; align-items: center; justify-content: center; gap: 9px; }
.future-mini-flow span { padding: 9px 13px; background: rgba(169,213,189,.2); font-family: var(--mono); font-size: 11px; text-align: center; }
.future-mini-flow b { color: var(--signal); }
.agent-profile-equation { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 18px; padding: 12px 8px; background: var(--ink); }
.agent-profile-equation code { background: none; color: var(--mint); font-size: 12px; }
.agent-profile-equation b { color: var(--signal); }
.agent-profile-equation span { color: var(--paper); font-family: var(--mono); font-size: 10.5px; }
.profile-future p { margin-top: 15px; }
.future-tags { display: flex; gap: 9px; }
.future-tags span { padding: 8px 14px; border: 1px solid var(--signal-dark); color: var(--signal-dark); font-family: var(--mono); font-size: 10.5px; font-weight: 800; }
.context-future .future-mini-flow { justify-content: flex-start; }
.context-future .future-mini-flow span { background: rgba(23,34,31,.08); }
.agent-futures-slide .slide-takeaway { bottom: 21px; }

/* Closing Q&A */
.closing-slide::before {
  background:
    radial-gradient(circle at 82% 46%, transparent 0 175px, rgba(169,213,189,.24) 176px 265px, transparent 266px),
    linear-gradient(90deg, rgba(23,34,31,.032) 1px, transparent 1px),
    linear-gradient(rgba(23,34,31,.032) 1px, transparent 1px),
    var(--paper) !important;
  background-size: auto, 40px 40px, 40px 40px, auto !important;
}
.closing-stage { display: grid; grid-template-columns: .8fr 1.45fr; gap: 38px; margin-top: 76px; }
.closing-thanks { display: flex; flex-direction: column; justify-content: center; padding: 38px; border: 2px solid var(--ink); border-top: 7px solid var(--signal); background: var(--paper-light); box-shadow: 10px 10px 0 rgba(23,34,31,.1); }
.closing-thanks span { color: var(--signal-dark); font-family: var(--mono); font-size: 14px; font-weight: 800; letter-spacing: .18em; }
.closing-thanks strong { margin-top: 25px; font-size: 39px; line-height: 1.15; }
.closing-thanks p { margin: 22px 0 0; color: rgba(23,34,31,.68); font-size: 17px; }
.closing-questions { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.closing-question { box-sizing: border-box; min-height: 185px; padding: 30px 36px; border: 2px solid var(--ink); border-top: 7px solid var(--mint); background: rgba(255,253,247,.84); color: var(--ink); }
.closing-question small { display: block; color: var(--mint); font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.closing-question strong { display: block; margin-top: 20px; font-size: 28px; line-height: 1.28; }
.agent-question small { color: var(--signal-dark); }
.human-question { border-top-color: var(--sand); background: rgba(255,253,247,.84); }
.human-question small { color: var(--signal-dark); }
.closing-footer { position: absolute; right: 88px; bottom: 55px; display: flex; align-items: center; gap: 22px; color: var(--ink); }
.closing-footer span { padding: 9px 15px; background: var(--signal); font-family: var(--mono); font-size: 15px; font-weight: 800; letter-spacing: .12em; }
.closing-footer strong { font-size: 18px; }
