@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/IBMPlexMono-Regular.otf") format("opentype");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/IBMPlexMono-Medium.otf") format("opentype");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  src: url("fonts/IBMPlexMono-SemiBold.otf") format("opentype");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/IBMPlexMono-Bold.otf") format("opentype");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/IBMPlexSans-Regular.otf") format("opentype");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  src: url("fonts/IBMPlexSans-SemiBold.otf") format("opentype");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/IBMPlexSans-Bold.otf") format("opentype");
}

:root {
  --paper: #f7f4ec;
  --surface: #fffdf8;
  --ink: #1c1a16;
  --body: #3a362e;
  --muted: #75705f;
  --hairline: #cfc8b8;
  --faint: #b5ae9d;
  --accent: #2e7d4f;
  --pane: #211e19;
  --pane-text: #a8a294;
  --pane-dim: #5d574a;
  --pane-comment: #8a8375;
  --code-green: #8fbf6f;
  --diff-red: #d97b6c;
  --cmd-bg: #2a3623;
  --cmd-text: #b5d99c;
  --token-a: #dfe8d2;
  --token-b: #efe3c8;
  --token-c: #d7e3e8;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.reveal {
  color: var(--body);
  font-family: var(--sans);
}

.reveal .slides section {
  box-sizing: border-box;
  text-align: left;
}

.reveal .slides section.deck-slide {
  background: var(--paper);
  display: flex !important;
  height: 100%;
  width: 100%;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal p,
.reveal pre {
  margin: 0;
}

.reveal h1,
.reveal h2,
.reveal .kicker,
.reveal .prompt-line,
.reveal .punchline,
.reveal .cmd-line,
.reveal .live-badge,
.reveal .code-block,
.reveal .token,
.reveal .stat-card,
.reveal .cheat-key {
  font-family: var(--mono);
}

.title-slide .prose {
  flex: 1;
  justify-content: center;
  padding: 110px;
}

.prose {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
  padding: 100px;
}

.prose.full {
  gap: 34px;
  padding: 110px;
}

.prose.narrow {
  flex: none;
  padding: 100px 70px 100px 100px;
  width: 38%;
}

.prose.centered {
  align-items: center;
  justify-content: center;
  padding: 110px;
  text-align: center;
}

.prose.centered p,
.prose.centered h2 {
  text-align: center;
}

.prompt-line {
  color: var(--accent);
  font-size: 34px;
  font-weight: 500;
}

.reveal h1 {
  color: var(--ink);
  font-size: 100px;
  font-weight: 700;
  line-height: 1.12;
}

.reveal h2 {
  color: var(--ink);
  font-size: 76px;
  font-weight: 700;
  line-height: 1.15;
}

.reveal .narrow h2 {
  font-size: 64px;
}

.reveal .wide-title {
  font-size: 72px;
}

.deck-slide p,
.body-line {
  color: var(--body);
  font-size: 38px;
  line-height: 1.5;
}

.deck-slide code {
  background: rgba(46, 125, 79, 0.12);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  padding: 0 0.16em;
}

.prose.full p {
  font-size: 40px;
}

.prose.narrow p {
  font-size: 36px;
}

.muted {
  color: var(--muted);
}

.prose.full p.technical-definition {
  color: #6b655b;
  font-style: italic;
}

.llm-loop-diagram {
  align-self: center;
  aspect-ratio: 680 / 380;
  display: block;
  margin-top: 0;
  max-width: 100%;
  width: 1100px;
}

.training-loop-diagram {
  align-self: center;
  aspect-ratio: 680 / 380;
  display: block;
  max-width: 100%;
  width: 1400px;
}

.prose.full.diagram-slide {
  gap: 18px;
  padding: 55px 90px;
}

.tool-loop-diagram {
  align-self: center;
  aspect-ratio: 680 / 620;
  display: block;
  max-height: 940px;
  max-width: 100%;
  width: 1160px;
}

.prose.full.payoff-slide {
  align-items: center;
  justify-content: center;
  padding: 50px 80px;
}

.solar-system-shot {
  align-self: center;
  border: 4px solid rgba(26, 24, 21, 0.14);
  box-shadow: 0 24px 70px rgba(26, 24, 21, 0.22);
  display: block;
  max-height: 860px;
  max-width: 100%;
  object-fit: contain;
}

.rlhf-diagram {
  align-self: center;
  aspect-ratio: 680 / 415;
  display: block;
  max-width: 100%;
  width: 1280px;
}

.ink {
  color: var(--ink);
  font-weight: 600;
}

.kicker {
  color: var(--accent);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.punchline {
  color: var(--accent);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 10px;
}

.punchline.large {
  font-size: 52px;
}

.punchline.medium {
  font-size: 42px;
}

.token-caption-strong {
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
}

.subtitle {
  color: var(--muted);
  font-size: 36px;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 36px;
}

.plan p {
  color: var(--ink);
  font-size: 38px;
  font-weight: 600;
}

.plan span {
  color: var(--muted);
  font-weight: 400;
}

.code-pane {
  background: var(--pane);
  box-sizing: border-box;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 26px;
  padding: 100px 56px;
  width: 60%;
}

.code-pane.decorative {
  justify-content: space-between;
  padding: 72px 56px;
  width: 31%;
}

.code-pane.wide {
  flex: 1;
  padding: 100px 70px;
  width: auto;
}

.code-pane.compact-pane {
  gap: 16px;
  padding-bottom: 72px;
  padding-top: 72px;
}

.code-pane.loop-pane {
  gap: 12px;
  padding-bottom: 52px;
  padding-top: 52px;
}

.code-pane.loop-pane .cmd-line {
  font-size: 27px;
}

.cmd-line {
  align-self: flex-start;
  background: var(--cmd-bg);
  border-left: 6px solid var(--accent);
  box-sizing: border-box;
  color: var(--cmd-text);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.45;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 16px 22px;
}

.reveal pre.code-block {
  background: transparent;
  box-shadow: none;
  color: var(--pane-text);
  display: block;
  font-size: 28px;
  line-height: 1.9;
  margin: 0;
  width: auto;
}

.reveal pre.code-block.diff {
  font-size: 30px;
  line-height: 1.85;
}

.reveal pre.code-block.big {
  font-size: 32px;
  line-height: 2;
}

.reveal pre.code-block.dense {
  font-size: 21px;
  line-height: 1.35;
}

.reveal pre.prompt-snippet {
  font-size: 20px;
  line-height: 1.35;
  white-space: pre-wrap;
}

.snippet-divider {
  border-top: 2px solid var(--pane-dim);
  color: var(--pane-comment);
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: 0.04em;
  padding-top: 18px;
}

.reveal pre.terminal-output {
  font-size: 34px;
  line-height: 1.75;
  white-space: pre-wrap;
}

.reveal pre.terminal-output.compact {
  font-size: 23px;
  line-height: 1.35;
}

.reveal pre.agent-loop-snippet {
  font-size: 17px;
  line-height: 1.24;
}

.reveal pre.agent-loop-output {
  font-size: 18px;
  line-height: 1.18;
}

.code-pane.functional-pane {
  gap: 16px;
  padding-bottom: 70px;
  padding-top: 70px;
}

.reveal pre.functional-output {
  font-size: 21px;
  line-height: 1.25;
}

.code-pane.bootstrap-pane {
  gap: 22px;
  padding-bottom: 80px;
  padding-top: 80px;
}

.reveal pre.bootstrap-prompts {
  font-size: 23px;
  line-height: 1.45;
}

.reveal pre.bootstrap-log {
  font-size: 22px;
  line-height: 1.45;
}


.ln {
  color: var(--pane-dim);
}

.green {
  color: var(--code-green);
}

.red {
  color: var(--diff-red);
}

.comment {
  color: var(--pane-comment);
}

.file-label {
  color: var(--pane-dim);
  font-family: var(--mono);
  font-size: 28px;
  margin-top: auto;
}


.live-badge {
  border: 3px dashed var(--accent);
  border-radius: 8px;
  color: var(--accent);
  flex: none;
  font-size: 30px;
  font-weight: 600;
  padding: 10px 24px;
}

.heading-row {
  align-items: center;
  display: flex;
  gap: 34px;
}

.demo-card {
  align-items: center;
  background: var(--surface);
  border: 2px solid var(--hairline);
  border-radius: 12px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 40px;
  justify-content: center;
  padding: 60px;
}

.input-line {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 46px;
  font-weight: 500;
}

.tokenizer-input {
  border: 3px solid var(--hairline);
  border-radius: 10px;
  min-height: 72px;
  outline: none;
  padding: 18px 24px;
  width: min(1200px, 100%);
}

.tokenizer-input:focus {
  border-color: var(--accent);
}

.tokenizer-input:empty::before {
  color: var(--muted);
  content: attr(data-placeholder);
}

.cursor {
  background: var(--accent);
  display: inline-block;
  height: 48px;
  margin-left: 8px;
  vertical-align: -8px;
  width: 22px;
}

.token-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.token {
  border-radius: 8px;
  color: var(--ink);
  font-size: 38px;
  font-weight: 500;
  padding: 12px 22px;
}

.token.a {
  background: var(--token-a);
}

.token.b {
  background: var(--token-b);
}

.token.c {
  background: var(--token-c);
}

.token-count {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 36px;
}

.btw-cost {
  align-items: center;
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid var(--hairline);
  border-radius: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 28px;
  gap: 18px;
  padding: 18px 24px;
}

.btw-label {
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
}

.btw-cost strong {
  color: var(--ink);
  font-family: var(--mono);
}

.btw-cost small {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 10px 0;
}

.stat-card {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  font-size: 42px;
  font-weight: 700;
  padding: 20px 34px;
}

.stat-card span {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 400;
}

.hardware-stats {
  gap: 34px;
  margin: 26px 0;
}

.hardware-stats .stat-card {
  font-size: 64px;
  min-width: 520px;
}

.hardware-stats .stat-card span {
  display: block;
  font-size: 32px;
  margin-top: 10px;
}

.chat-request-diagram {
  align-self: center;
  aspect-ratio: 680 / 204;
  display: block;
  margin-top: auto;
  max-width: none;
  width: 1760px;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.step {
  align-items: baseline;
  display: flex;
  gap: 30px;
}

.step-number {
  color: var(--accent);
  flex: none;
  font-family: var(--mono);
  font-size: 48px;
  font-weight: 700;
}

.reveal .slides section.deck-slide.divider {
  background: var(--pane);
  flex-direction: column;
  gap: 34px;
  justify-content: center;
  padding: 110px;
}

.divider h2 {
  color: var(--surface);
  font-size: 96px;
  line-height: 1.15;
  text-shadow: 0 0 1px var(--surface);
}

.divider p {
  color: #d8d1c3;
  font-size: 40px;
  line-height: 1.5;
}

.divider code {
  background: rgba(181, 217, 156, 0.16);
  color: var(--cmd-text);
}

.divider .cmd-line {
  margin-top: 30px;
}

.tool-grid {
  display: grid;
  gap: 26px 60px;
  grid-template-columns: 1fr 1fr;
}

.tool-grid.examples {
  gap: 24px 30px;
}

.tool-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tool-item.wide {
  grid-column: 1 / -1;
}

.tool-title {
  color: var(--ink);
  font-size: 32px;
  font-weight: 600;
}

.tool-symbols {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 500;
}

.reveal pre.tool-example {
  background: var(--surface);
  border-left: 5px solid var(--accent);
  box-shadow: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 23px;
  line-height: 1.35;
  margin: 6px 0 0;
  padding: 14px 18px;
  width: auto;
}

.cheat-grid {
  align-items: baseline;
  display: grid;
  gap: 22px 50px;
  grid-template-columns: auto 1fr;
}

.cheat-key {
  color: var(--ink);
  font-size: 32px;
  font-weight: 500;
}

.cheat-value {
  color: var(--muted);
  font-size: 32px;
}

.cheat-key.hot,
.cheat-value.hot {
  color: var(--accent);
  font-weight: 700;
}

.cheat-value.hot {
  font-family: var(--sans);
  font-weight: 600;
}

.footnote {
  color: var(--muted);
  font-size: 26px;
  font-style: italic;
  margin-top: auto;
}

.chat-demo {
  align-items: stretch;
  gap: 18px;
  padding: 36px;
}

.chat-label {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
}

.chat-input,
.chat-output {
  background: var(--paper);
  border: 2px solid var(--hairline);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 28px;
  line-height: 1.35;
  margin: 0;
  overflow: auto;
  padding: 20px;
  resize: none;
  white-space: pre-wrap;
  width: 100%;
}

.chat-input {
  height: 210px;
}

.chat-input:focus {
  border-color: var(--accent);
  outline: none;
}

.chat-actions {
  display: flex;
  gap: 14px;
}

.chat-button {
  align-self: flex-start;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  color: var(--surface);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  padding: 14px 28px;
}

.chat-button.secondary {
  background: var(--pane-dim);
}

.chat-button:disabled {
  background: var(--faint);
  cursor: wait;
}

.chat-output {
  height: 230px;
}

.api-row {
  align-items: baseline;
  display: flex;
  gap: 26px;
}

.api-label {
  color: var(--muted);
  flex: none;
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 700;
}

.api-code {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 500;
}

.api-code.answer {
  color: var(--accent);
}