@import url('fonts.css');

/* ==========================================================================
   Stop Building Products for Humans — design system
   Canvas: 1920×1080. Two worlds:
   - data-theme="human": Lemi 2025 look (white, gray statements, crimson)
   - data-theme="agent": Lemi 2026 look (dark chapter colors, yellow + coral)
   ========================================================================== */

:root {
  --font-body: 'Nunito', 'Avenir Next Rounded', 'Avenir Next', system-ui, sans-serif;
  --font-mega: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --font-hand: 'Caveat', 'Bradley Hand', cursive;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --pad-x: 160px;
  --pad-y: 110px;
  --label-w: 140px;
}

/* ---------- palettes ---------- */
.slide[data-theme='human'], .panel-human {
  --bg: #ffffff;
  --text: #5c5c5c;
  --heading: #4a4a4a;
  --statement: #8a8a8a;
  --hl: #b5123e;
  --hl2: #2f5bd3;
  --mute: #a3a3a3;
  --scribble: #d0263f;
  --label: #f2a7b8;
  --label-bg: #fde4e9;
  --line: #e4e2df;
  --card: #f5f4f2;
  --card-border: #ebe9e5;
  --mega: #5b5b5b;
  --mega-soft: #a99c9c;
  --up: #1d9a57;
  --on-hl: #ffffff;
}
.slide[data-theme='agent'], .panel-agent {
  --bg: #0f0f12;
  --text: #f3efe8;
  --heading: #f3efe8;
  --statement: #f3efe8;
  --hl: #ffc847;
  --hl2: #ff7b6b;
  --mute: #b8b0a6;
  --scribble: #ff7b6b;
  --label: rgba(255, 200, 71, 0.34);
  --label-bg: rgba(255, 255, 255, 0.035);
  --line: rgba(243, 239, 232, 0.16);
  --card: rgba(255, 255, 255, 0.07);
  --card-border: rgba(255, 255, 255, 0.1);
  --mega: #f3efe8;
  --mega-soft: rgba(243, 239, 232, 0.38);
  --up: #7fe0a6;
  --on-hl: #17130b;
}
.panel-human { --bg: #ffffff; }
.panel-agent { --bg: #0f0f12; }

/* backgrounds (human: paper + tinted chapter extras; agent: chapter colors) */
.slide[data-bg='paper']  { --bg: #ffffff; }
.slide[data-bg='blush']  { --bg: #fde0e3; }
.slide[data-bg='butter'] { --bg: #f8f3c0; }
.slide[data-bg='mint']   { --bg: #dff0e4; }
.slide[data-bg='ink']    { --bg: #0f0f12; }
.slide[data-bg='rust']   { --bg: #8b4a33; }
.slide[data-bg='navy']   { --bg: #2f3a5e; }
.slide[data-bg='plum']   { --bg: #4b1d4f; }
.slide[data-bg='forest'] { --bg: #123f36; }
.slide[data-bg='cocoa']  { --bg: #4a3326; }

/* ---------- page & canvas ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  overflow: hidden;
  background: #000;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.25s ease;
}
#deck {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: var(--pad-y) var(--pad-x);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 30px;
  line-height: 1.35;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.slide.active { visibility: visible; opacity: 1; transition: opacity 0.22s ease; z-index: 2; }
.slide.has-label { padding-left: calc(var(--label-w) + 110px); }
:where(.slide > *) { position: relative; z-index: 1; }
.slide h1, .slide h2, .slide h3, .slide h4, .slide p, .slide ul, .slide ol, .slide figure, .slide blockquote { margin: 0; }
.slide b, .slide strong { font-weight: 800; color: var(--heading); }
.slide a { color: inherit; }
.notes { display: none !important; }

/* ---------- text primitives ---------- */
.hl { color: var(--hl); }
.hl2 { color: var(--hl2); }
.mute { color: var(--mute); }
.slide b.hl, .slide strong.hl, .slide .hl b { color: var(--hl); }
.slide b.hl2, .slide strong.hl2, .slide .hl2 b { color: var(--hl2); }

.statement {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 70px;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--statement);
  max-width: 1400px;
  text-wrap: balance;
}
.statement.small { font-size: 54px; }
.statement.big { font-size: 92px; }
.sub {
  font-weight: 500;
  font-size: 32px;
  line-height: 1.36;
  color: var(--mute);
  max-width: 1080px;
  text-wrap: pretty;
}
.slide[data-theme='human'] .sub { color: #969696; }
.sub b, .sub strong { color: var(--heading); font-weight: 800; }
.sub .hl, .sub .hl2 { font-weight: 800; }
.statement + .sub, .bignum-label + .sub { margin-top: -6px; }
.kicker {
  font-weight: 900;
  font-size: 40px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--heading);
}
.tag {
  display: inline-block;
  align-self: flex-start;
  padding: 8px 20px 9px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hl);
  background: color-mix(in srgb, var(--hl) 14%, transparent);
  white-space: nowrap;
}
.tag.hl2 { color: var(--hl2); background: color-mix(in srgb, var(--hl2) 16%, transparent); }
.tag.solid { color: var(--on-hl); background: var(--hl); }
/* Lemi 2026 labels ("CHAOS MONKEY") are plain colored caps, no pill */
.slide[data-theme='agent'] .tag:not(.solid) { background: none; padding-left: 0; padding-right: 0; font-size: 26px; }
.center > .tag, .center .tag { align-self: center; }
.right > .tag { align-self: flex-end; }

/* ---------- layout helpers ---------- */
.row { display: flex; flex-direction: row; align-items: center; gap: 80px; }
.row > .stack { flex: 0 1 auto; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 32px; }
.center { text-align: center; align-items: center; }
.left { text-align: left; align-items: flex-start; }
.right { text-align: right; align-items: flex-end; }
.slide.center, .slide.left, .slide.right { justify-content: center; }
.row.center { justify-content: center; align-items: center; }
.row.left { justify-content: flex-start; align-items: center; }
.row.right { justify-content: flex-end; align-items: center; }
.center > .statement, .center > .sub, .center > .stack > .sub { margin-left: auto; margin-right: auto; }
.right > .statement, .right > .sub { margin-left: auto; }
.slide.left > *, .slide.right > * { max-width: 100%; }
.slide.left > :where(.row, .stack, .cols-2, .cols-3, .split, .timeline) { align-self: stretch; }
.cols-2, .cols-3 { display: grid; gap: 64px; width: 100%; align-items: start; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-2.divided > * + *, .cols-3.divided > * + * { border-left: 4px solid var(--line); padding-left: 64px; }
.top { justify-content: flex-start !important; }
.bottom { justify-content: flex-end !important; }
.wide { width: 100%; }
.grow { flex: 1 1 auto; }

/* ---------- icons & images ---------- */
img.icon, .icon { width: 220px; height: 220px; object-fit: contain; flex: 0 0 auto; display: block; }
.icon.icon-s { width: 120px; height: 120px; }
.icon.icon-l { width: 320px; height: 320px; }
.icon.icon-xl { width: 420px; height: 420px; }
.icon.float { animation: icon-float 5s ease-in-out infinite; }
@keyframes icon-float { 50% { transform: translateY(-14px) rotate(-1.5deg); } }
.figure { max-width: 100%; border-radius: 18px; }
.figure.shadow { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); }

/* ---------- chapter titles (Lemi "REALITIES & MISTAKES") ---------- */
.slide.is-chapter { padding: 60px 70px; justify-content: center; align-items: center; text-align: center; gap: 24px; }
.mega {
  font-family: var(--font-mega);
  font-weight: 400;
  font-size: 380px;
  line-height: 0.82;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--mega);
  white-space: nowrap;
  width: max-content;
  max-width: none;
  margin: 0;
  z-index: 1;
}
.mega > span, .mega .line { display: block; }
.mega .soft, .mega .mute { color: var(--mega-soft); }
.mega .hl { color: var(--hl); }
.mega .hl2 { color: var(--hl2); }
.left > .mega, .mega.left { text-align: left; align-self: flex-start; }
.right > .mega, .mega.right { text-align: right; align-self: flex-end; }
.cutout {
  position: absolute !important;
  z-index: 3 !important;
  bottom: 0;
  left: 50%;
  height: 96%;
  width: auto;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 0 26px rgba(255, 255, 255, 0.85));
}
.slide[data-theme='agent'] .cutout { filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55)); }
.mega-sub {
  font-weight: 900;
  font-size: 44px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--heading);
  z-index: 4 !important;
}

/* ---------- vertical chapter label (left edge stripe) ---------- */
.side-label {
  position: absolute !important;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--label-w);
  z-index: 0 !important;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      var(--label-bg) 0 100px,
      transparent 100px 112px,
      var(--label-bg) 112px 122px,
      transparent 122px 130px,
      var(--label-bg) 130px 134px,
      transparent 134px);
}
.side-label span {
  position: absolute;
  left: 0;
  width: 100px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 900;
  font-size: 104px;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  white-space: nowrap;
  font-style: normal;
}
.side-label i {
  font-style: normal;
  color: var(--label);
}

/* ---------- big numbers ---------- */
.bignum {
  font-weight: 900;
  font-size: 260px;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--hl);
  font-variant-numeric: tabular-nums;
}
.bignum small { font-size: 0.42em; letter-spacing: -0.02em; margin-left: 0.08em; }
.bignum-label {
  font-weight: 800;
  font-size: 50px;
  line-height: 1.15;
  color: var(--statement);
  max-width: 1100px;
}
.delta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 34px;
  color: var(--hl2);
  background: color-mix(in srgb, var(--hl2) 14%, transparent);
}
.center > .delta, .center .delta { align-self: center; }
.delta.up { color: var(--up); background: color-mix(in srgb, var(--up) 15%, transparent); }
.delta.up::before { content: '▲'; font-size: 0.7em; }
.delta.down { color: var(--hl); background: color-mix(in srgb, var(--hl) 14%, transparent); }
.delta.down::before { content: '▼'; font-size: 0.7em; }

/* ---------- quotes ---------- */
.quote { display: flex; flex-direction: column; gap: 30px; max-width: 1400px; }
.quote-mark {
  display: block;
  width: 104px;
  height: 94px;
  flex: 0 0 auto;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 94'%3E%3Cpath d='M16 5h72a11 11 0 0 1 11 11v46a11 11 0 0 1-11 11H58l-7 15-9-15H16A11 11 0 0 1 5 62V16A11 11 0 0 1 16 5z' fill='%23ffffff' stroke='%23222' stroke-width='5' stroke-linejoin='round'/%3E%3Cg fill='%23b5123e' stroke='%23222' stroke-width='3.2' stroke-linejoin='round'%3E%3Cpath d='M38 21a10 10 0 1 0-6 18c-1 6-4 10-9 13 11-1 22-10 22-23 0-4-3-7-7-8z'/%3E%3Cpath d='M70 21a10 10 0 1 0-6 18c-1 6-4 10-9 13 11-1 22-10 22-23 0-4-3-7-7-8z'/%3E%3C/g%3E%3C/svg%3E");
}
.slide[data-theme='agent'] .quote-mark, .panel-agent .quote-mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 94'%3E%3Cpath d='M16 5h72a11 11 0 0 1 11 11v46a11 11 0 0 1-11 11H58l-7 15-9-15H16A11 11 0 0 1 5 62V16A11 11 0 0 1 16 5z' fill='%23fffaf0' stroke='%23161616' stroke-width='5' stroke-linejoin='round'/%3E%3Cg fill='%23ffc847' stroke='%23161616' stroke-width='3.2' stroke-linejoin='round'%3E%3Cpath d='M38 21a10 10 0 1 0-6 18c-1 6-4 10-9 13 11-1 22-10 22-23 0-4-3-7-7-8z'/%3E%3Cpath d='M70 21a10 10 0 1 0-6 18c-1 6-4 10-9 13 11-1 22-10 22-23 0-4-3-7-7-8z'/%3E%3C/g%3E%3C/svg%3E");
}
.quote blockquote, .quote > p:not(.sub) {
  font-weight: 800;
  font-size: 60px;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--statement);
  text-wrap: balance;
}
.quote cite {
  display: block;
  font-style: italic;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
  color: var(--mute);
}
.quote cite::before { content: '— '; }
.quote cite b { font-style: normal; }
.center .quote, .quote.center { align-items: center; text-align: center; }
/* Lemi 2025 quote strip: gray band with book cover, docked to the bottom */
.quote.strip {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 64px;
  max-width: none;
  flex-direction: row;
  align-items: center;
  gap: 34px;
  padding: 26px var(--pad-x) 26px 60px;
  background: #7d7d7d;
  z-index: 4 !important;
}
.slide.has-label .quote.strip { left: var(--label-w); }
.slide[data-theme='agent'] .quote.strip { background: rgba(255, 255, 255, 0.09); }
.quote.strip .quote-mark { width: 64px; height: 58px; }
.quote.strip img.cover { height: 128px; width: auto; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
.quote.strip blockquote, .quote.strip > p { font-size: 34px; font-weight: 700; color: #fff; line-height: 1.25; }
.quote.strip .hl { color: #ffd84a; }
.quote.strip cite { font-size: 20px; color: rgba(255, 255, 255, 0.82); margin-top: 6px; }
.quote.strip > div { display: flex; flex-direction: column; }

/* ---------- handwritten annotations ---------- */
.scribble {
  position: absolute !important;
  z-index: 5 !important;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 44px;
  line-height: 0.98;
  color: var(--scribble);
  transform: rotate(var(--rot, -6deg));
  transform-origin: left center;
  max-width: 460px;
  white-space: pre-line;
  text-align: left;
}
.scribble.inline { position: relative !important; display: inline-block; }
.scribble.small { font-size: 32px; }
.scribble.big { font-size: 64px; }
.scribble[class*='arrow-']::after {
  content: '';
  position: absolute;
  width: 170px;
  height: 96px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M160 8C120 6 70 22 22 82'/%3E%3Cpath d='M20 84l3-27M20 84l26-10'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M160 8C120 6 70 22 22 82'/%3E%3Cpath d='M20 84l3-27M20 84l26-10'/%3E%3C/svg%3E");
}
.scribble.arrow-dl::after { left: -170px; top: 80%; }
.scribble.arrow-dr::after { right: -170px; top: 80%; transform: scaleX(-1); }
.scribble.arrow-ul::after { left: -170px; bottom: 80%; transform: scaleY(-1); }
.scribble.arrow-ur::after { right: -170px; bottom: 80%; transform: scale(-1, -1); }
.scribble.arrow-l::after { left: -190px; top: 0; transform: rotate(30deg); }
.scribble.arrow-r::after { right: -190px; top: 0; transform: scaleX(-1) rotate(30deg); }

/* ---------- timeline ---------- */
.timeline {
  list-style: none;
  display: flex;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  counter-reset: none;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}
.timeline li {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  position: relative;
  padding: 0 12px;
}
.timeline li b {
  font-weight: 900;
  font-size: 62px;
  line-height: 1;
  height: 74px;
  color: var(--hl);
}
.timeline li::after {
  content: '';
  order: 1;
  width: 42px;
  height: 42px;
  margin: 8px 0 28px;
  border-radius: 50%;
  background: var(--bg);
  border: 9px solid var(--hl);
  flex: 0 0 auto;
}
.timeline li span { order: 2; font-weight: 800; font-size: 36px; line-height: 1.18; color: var(--statement); max-width: 340px; }
.timeline li small { order: 3; font-size: 26px; color: var(--mute); margin-top: 8px; max-width: 320px; }
.timeline li.now b { color: var(--hl2); }
.timeline li.now::after { border-color: var(--hl2); background: var(--hl2); }

/* ---------- split comparison ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 44px;
  width: 100%;
}
.panel-human, .panel-agent {
  border-radius: 30px;
  padding: 60px 64px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--bg);
  color: var(--text);
  text-align: left;
}
.panel-human { border: 3px solid #ebe8e3; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.06); }
.panel-human .sub { color: #8f8f8f; }
.panel-agent { border: 3px solid rgba(255, 255, 255, 0.06); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); }
.panel-human h3, .panel-agent h3 { font-weight: 900; font-size: 58px; line-height: 1.08; color: var(--heading); }
.panel-human p, .panel-agent p, .panel-human li, .panel-agent li { font-size: 34px; line-height: 1.34; }
.panel-human ul, .panel-agent ul { padding-left: 1.1em; display: flex; flex-direction: column; gap: 10px; }
.panel-human li::marker { color: var(--hl); }
.panel-agent li::marker { color: var(--hl); }
.panel-human .icon, .panel-agent .icon { width: 150px; height: 150px; }
.vs {
  align-self: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mega);
  font-size: 46px;
  letter-spacing: 0.02em;
  color: var(--on-hl);
  background: var(--hl);
  box-shadow: 0 0 0 10px var(--bg);
}

/* ---------- chat (dialog reconstruction) ---------- */
.chat { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 1360px; }
.chat p {
  max-width: 74%;
  padding: 22px 34px 24px;
  border-radius: 36px;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.3;
  text-align: left;
}
.chat p[data-who]::before {
  content: attr(data-who);
  display: block;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 6px;
}
.chat .them { align-self: flex-start; background: var(--card); color: var(--heading); border: 2px solid var(--card-border); border-bottom-left-radius: 10px; }
.chat .me { align-self: flex-end; background: var(--hl2); color: #fff; border-bottom-right-radius: 10px; }
.slide[data-theme='agent'] .chat .me { color: #1a0f0d; }
.chat .sound {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--hl) !important;
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--hl) 30%, transparent) 0 4px, transparent 4px 10px);
  background-size: 100% 30%;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.chat .me.sound { background-color: color-mix(in srgb, var(--hl2) 22%, transparent); }
.chat .them.sound { background-color: var(--card); }

/* ---------- terminal ---------- */
.terminal {
  position: relative;
  background: #131318;
  color: #e9e5dd;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.5;
  padding: 72px 46px 40px;
  border-radius: 22px;
  white-space: pre;
  text-align: left;
  max-width: 100%;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32), 0 0 0 2px rgba(255, 255, 255, 0.05) inset;
  tab-size: 2;
}
.terminal::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 28px;
  width: 80px;
  height: 18px;
  background:
    radial-gradient(circle at 9px 9px, #ff5f57 8px, transparent 8.5px),
    radial-gradient(circle at 37px 9px, #febc2e 8px, transparent 8.5px),
    radial-gradient(circle at 65px 9px, #28c840 8px, transparent 8.5px);
}
.terminal[data-title]::after {
  content: attr(data-title);
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 20px;
  color: #8a8794;
}
.terminal.small { font-size: 21px; }
.terminal.big { font-size: 32px; }
.terminal .p { color: #ff7b6b; }
.terminal .k { color: #7cc7ff; }
.terminal .s { color: #b9e98a; }
.terminal .n { color: #ffc847; }
.terminal .b { color: #ff9e64; }
.terminal .c { color: #7d7a88; font-style: italic; }
.terminal .o { color: #8f8b99; }
.terminal .hl { color: #ffc847; font-weight: 700; }
.terminal .hl2 { color: #ff7b6b; font-weight: 700; }
.terminal mark { background: rgba(255, 200, 71, 0.22); color: inherit; border-radius: 4px; padding: 0 4px; }

/* ---------- photos & video ---------- */
.photo-bg, .video-full {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0 !important;
}
.shade { position: absolute !important; inset: 0; z-index: 0 !important; background: rgba(8, 8, 10, 0.5); pointer-events: none; }
.shade.light { background: rgba(255, 255, 255, 0.72); }
.shade.left { background: linear-gradient(90deg, rgba(8, 8, 10, 0.88) 0%, rgba(8, 8, 10, 0.55) 45%, rgba(8, 8, 10, 0) 80%); }
.shade.right { background: linear-gradient(270deg, rgba(8, 8, 10, 0.88) 0%, rgba(8, 8, 10, 0.55) 45%, rgba(8, 8, 10, 0) 80%); }
.shade.bottom { background: linear-gradient(0deg, rgba(8, 8, 10, 0.9) 0%, rgba(8, 8, 10, 0.4) 45%, rgba(8, 8, 10, 0) 75%); }
.video-frame {
  display: block;
  max-width: 1440px;
  max-height: 800px;
  width: 100%;
  border-radius: 24px;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

/* ---------- checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 30px; text-align: left; }
.checklist li {
  position: relative;
  padding-left: 92px;
  font-weight: 800;
  font-size: 46px;
  line-height: 1.16;
  color: var(--statement);
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--hl) no-repeat center / 64% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
.slide[data-theme='agent'] .checklist li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161208' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
.checklist li small { display: block; font-weight: 500; font-size: 28px; color: var(--mute); margin-top: 6px; }

/* ---------- fragments ---------- */
.fragment { opacity: 0; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fragment.visible { opacity: 1; }
.fragment.fade-up { transform: translateY(42px); }
.fragment.fade-up.visible { transform: none; }
.fragment.strike {
  opacity: 1;
  background-image: linear-gradient(var(--hl), var(--hl));
  background-repeat: no-repeat;
  background-position: 0 56%;
  background-size: 0% 0.09em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.45s cubic-bezier(0.6, 0, 0.3, 1), color 0.45s ease;
}
.fragment.strike.visible { background-size: 100% 0.09em; color: var(--mute); }
.fragment.strike.visible .hl, .fragment.strike.visible .hl2 { color: inherit; }

/* ---------- source footer + QR ---------- */
footer.source {
  position: absolute !important;
  left: var(--pad-x);
  right: 44px;
  bottom: 36px;
  z-index: 4 !important;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  pointer-events: none;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--mute);
}
.slide.has-label footer.source { left: calc(var(--label-w) + 40px); }
.slide[data-theme='human'] footer.source { color: #a6a6a6; }
footer.source .source-text { max-width: 1300px; padding-bottom: 4px; }
footer.source .qr {
  flex: 0 0 auto;
  width: 136px;
  height: 136px;
  padding: 8px;
  background: #fff;
  border-radius: 10px;
  margin-left: auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.slide[data-theme='human'] footer.source .qr { box-shadow: 0 0 0 2px #ececec; }
footer.source .qr svg, footer.source .qr img { display: block; width: 100%; height: 100%; }
.photo-bg ~ footer.source, .video-full ~ footer.source { color: rgba(255, 255, 255, 0.8); }

/* ---------- glitch transition (human → agent world) ---------- */
.glitch-fx { display: none; }
.slide.glitch.glitching { animation: glitch-shake 0.9s steps(1) both; }
.slide.glitch.glitching > :not(.photo-bg):not(.video-full):not(.shade):not(.glitch-fx) { animation: glitch-rgb 0.9s steps(1) both; }
.slide.glitch.glitching .glitch-fx {
  display: block;
  position: absolute !important;
  inset: 0;
  z-index: 50 !important;
  pointer-events: none;
  mix-blend-mode: hard-light;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, transparent 0 18%, rgba(255, 0, 76, 0.55) 18% 23%, transparent 23% 47%, rgba(0, 229, 255, 0.5) 47% 51%, transparent 51% 72%, rgba(255, 200, 71, 0.55) 72% 76%, transparent 76%);
  animation: glitch-bars 0.9s steps(1) both;
}
@keyframes glitch-shake {
  0% { clip-path: inset(0 0 0 0); transform: translate(0); filter: invert(1) hue-rotate(90deg); }
  8% { clip-path: inset(12% 0 58% 0); transform: translate(-40px, 0); filter: none; }
  16% { clip-path: inset(62% 0 8% 0); transform: translate(36px, 0) skewX(-6deg); filter: saturate(3) contrast(1.4); }
  24% { clip-path: inset(30% 0 40% 0); transform: translate(-18px, 6px); filter: hue-rotate(-60deg); }
  32% { clip-path: inset(0 0 0 0); transform: translate(12px, -4px); filter: invert(1); }
  40% { clip-path: inset(44% 0 22% 0); transform: translate(-28px, 0) skewX(8deg); filter: none; }
  52% { clip-path: inset(0 0 0 0); transform: translate(6px, 0); filter: contrast(1.6) saturate(2); }
  64% { transform: translate(-4px, 2px); filter: hue-rotate(40deg); }
  76% { transform: translate(2px, 0); filter: none; }
  100% { clip-path: inset(0 0 0 0); transform: none; filter: none; }
}
@keyframes glitch-rgb {
  0%, 100% { text-shadow: none; }
  10% { text-shadow: -9px 0 rgba(255, 0, 76, 0.9), 9px 0 rgba(0, 229, 255, 0.9); }
  30% { text-shadow: 7px 0 rgba(255, 0, 76, 0.9), -7px 0 rgba(0, 229, 255, 0.9); }
  50% { text-shadow: -4px 0 rgba(255, 0, 76, 0.8), 4px 0 rgba(0, 229, 255, 0.8); }
  70% { text-shadow: 2px 0 rgba(255, 0, 76, 0.6), -2px 0 rgba(0, 229, 255, 0.6); }
  85% { text-shadow: none; }
}
@keyframes glitch-bars {
  0% { transform: translateY(0); opacity: 1; }
  20% { transform: translateY(14%); }
  40% { transform: translateY(-22%); }
  60% { transform: translateY(31%); opacity: 0.8; }
  80% { transform: translateY(-8%); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ---------- engine chrome: slide number, blackout, overview, jump ---------- */
.slide-num {
  position: absolute;
  right: 28px;
  bottom: 18px;
  z-index: 60;
  font: 800 30px/1 var(--font-body);
  color: rgba(128, 128, 128, 0.85);
  pointer-events: none;
  display: none;
}
html.preview .slide-num, .overview .slide-num { display: block; }
#blackout { position: fixed; inset: 0; background: #000; z-index: 1000; display: none; cursor: none; }
body.black #blackout { display: block; }
#jump {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 1001;
  padding: 12px 26px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font: 800 34px/1 var(--font-body);
  display: none;
}
#jump.on { display: block; }
.overview {
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow-y: auto;
  padding: 36px 40px 60px;
  background: rgba(14, 14, 17, 0.97);
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 26px;
  align-content: start;
}
body.grid .overview { display: grid; }
.overview .thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 3px;
  background: #222;
}
.overview .thumb:hover { outline-color: rgba(255, 255, 255, 0.35); }
.overview .thumb.current { outline-color: #ffc847; }
.overview .thumb.selected { outline-color: #ff7b6b; }
.overview .thumb .slide { visibility: visible; opacity: 1; transform-origin: 0 0; transition: none; pointer-events: none; }
.overview .thumb .fragment { opacity: 1; transform: none; }
.overview .thumb .fragment.strike { background-size: 100% 0.09em; color: var(--mute); }
.overview .thumb-num {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 70;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font: 800 16px/1.2 var(--font-body);
}

/* ---------- export / print / preview ---------- */
html.export .fragment, html.print-mode .fragment { opacity: 1 !important; transform: none !important; transition: none !important; }
html.export .fragment.strike, html.print-mode .fragment.strike { background-size: 100% 0.09em; color: var(--mute); }
html.export .slide, html.export .slide *, html.preview .slide { transition: none !important; }
html.export .icon.float { animation: none; }
html.preview .fragment { transition: none; }
html.print-mode, html.print-mode body { overflow: visible; height: auto; background: #fff; }
html.print-mode #deck { position: static; transform: none !important; width: 1920px; height: auto; overflow: visible; }
html.print-mode .slide { position: relative; visibility: visible; opacity: 1; break-after: page; page-break-after: always; }
html.print-mode .slide:last-child { break-after: auto; page-break-after: auto; }
@page { size: 1920px 1080px; margin: 0; }