:root {
  --paper: #faf7f0;
  --paper-soft: #f1eadf;
  --paper-deep: #e8dece;
  --ink: #171412;
  --ink-muted: #5b554d;
  --line: #d8cdbb;
  --clay: #d97757;
  --clay-dark: #a95135;
  --sage: #728064;
  --slate: #53697a;
  --amber: #d8a84d;
  --white: #fffdf8;
  --shadow: 0 22px 70px rgba(44, 34, 24, .14);
  --ease: cubic-bezier(.2, .7, .2, 1);
  font-family: Inter, "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  background: var(--paper);
  color: var(--ink);
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
}

.deck {
  min-height: 100svh;
  position: relative;
}

.slide {
  background:
    radial-gradient(circle at 14% 18%, rgba(217, 119, 87, .15), transparent 28%),
    radial-gradient(circle at 82% 72%, rgba(83, 105, 122, .11), transparent 32%),
    linear-gradient(rgba(23, 20, 18, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 20, 18, .026) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 36px 36px, 36px 36px, auto;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(34px, 5.2vw, 74px);
  position: relative;
}

.slide::after {
  border: 1px solid rgba(23, 20, 18, .08);
  content: "";
  inset: clamp(14px, 2vw, 28px);
  pointer-events: none;
  position: absolute;
}

.slide-meta {
  align-items: center;
  color: var(--ink-muted);
  display: flex;
  font-family: "JetBrains Mono", SFMono-Regular, ui-monospace, monospace;
  font-size: 13px;
  justify-content: space-between;
  letter-spacing: 0;
  position: relative;
  z-index: 3;
}

.slide-layout {
  align-items: center;
  display: grid;
  gap: clamp(22px, 3.4vw, 58px);
  grid-template-columns: minmax(360px, .86fr) minmax(460px, 1fr);
  height: calc(100svh - 150px);
  justify-content: center;
  position: relative;
  z-index: 2;
}

.story-panel {
  background: linear-gradient(90deg, rgba(250,247,240,.72), rgba(250,247,240,0));
  border-left: 5px solid rgba(217,119,87,.72);
  padding-left: clamp(18px, 2.2vw, 34px);
  position: relative;
}

.story-panel::before {
  background: var(--ink);
  border-radius: 999px;
  content: "";
  height: 9px;
  left: -7px;
  position: absolute;
  top: 2px;
  width: 9px;
}

.eyebrow {
  color: var(--clay-dark);
  font-family: "JetBrains Mono", SFMono-Regular, ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: 0;
  margin: 0 0 20px;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(46px, 5.8vw, 94px);
  font-weight: 680;
  letter-spacing: 0;
  line-height: .96;
  margin: 0;
  max-width: 900px;
}

.thesis {
  color: var(--ink-muted);
  font-size: clamp(21px, 2.15vw, 34px);
  line-height: 1.4;
  margin: 30px 0 0;
  max-width: 820px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.tag-row span,
.paper-labels b {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(44, 34, 24, .08);
  color: var(--ink);
  font-family: "JetBrains Mono", SFMono-Regular, ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 11px;
}

.visual-stage {
  aspect-ratio: 1.12 / .8;
  background:
    radial-gradient(circle at 72% 18%, rgba(217,119,87,.18), transparent 24%),
    radial-gradient(circle at 18% 72%, rgba(114,128,100,.16), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(242,234,223,.78)),
    var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(44, 34, 24, .18), inset 0 0 0 1px rgba(255,255,255,.6);
  min-height: clamp(420px, 54vh, 490px);
  overflow: hidden;
  position: relative;
}

.visual-stage::before {
  background:
    linear-gradient(90deg, rgba(23,20,18,.04) 1px, transparent 1px),
    linear-gradient(rgba(23,20,18,.04) 1px, transparent 1px);
  background-size: 28px 28px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.visual-stage::after {
  background:
    linear-gradient(180deg, transparent 58%, rgba(23,20,18,.08) 58%, rgba(23,20,18,.08) 59%, transparent 59%),
    radial-gradient(ellipse at 50% 83%, rgba(23,20,18,.15), transparent 36%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.stage-glow {
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), transparent 42%),
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.28), transparent 36%);
  inset: 18px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.stage-note {
  background: rgba(23,20,18,.78);
  border: 1px solid rgba(250,247,240,.22);
  border-radius: 999px;
  bottom: 24px;
  color: var(--paper);
  font-family: "JetBrains Mono", SFMono-Regular, ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  left: 28px;
  max-width: calc(100% - 56px);
  overflow: hidden;
  padding: 8px 12px;
  position: absolute;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 9;
}

.scene-photo {
  filter: saturate(.76) sepia(.16) contrast(.9);
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: .54;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.scene-photo::selection {
  background: transparent;
}

.car-scene-photo {
  object-position: center 55%;
}

.ship-scene-photo {
  object-position: center 60%;
}

.horse-scene-photo {
  object-position: center 52%;
}

.review-scene-photo {
  object-position: center 50%;
  opacity: .46;
}

.scene-car .visual-stage::after,
.scene-city .visual-stage::after,
.scene-road .visual-stage::after,
.scene-autopilot .visual-stage::after,
.scene-navigation .visual-stage::after,
.scene-carBuild .visual-stage::after,
.scene-ship .visual-stage::after,
.scene-crane .visual-stage::after,
.scene-wrongCargo .visual-stage::after,
.scene-knowledgeRaw .visual-stage::after,
.scene-ticket .visual-stage::after,
.scene-trunk .visual-stage::after,
.scene-saddle .visual-stage::after,
.scene-dashboard .visual-stage::after,
.scene-terminalReview .visual-stage::after,
.scene-console .visual-stage::after {
  background:
    linear-gradient(90deg, rgba(250,247,240,.72), rgba(250,247,240,.18) 45%, rgba(250,247,240,.58)),
    radial-gradient(ellipse at 50% 83%, rgba(23,20,18,.15), transparent 36%);
}

.scene-caption {
  bottom: 26px;
  color: var(--ink-muted);
  font-size: 14px;
  left: clamp(34px, 5.2vw, 74px);
  margin: 0;
  max-width: min(760px, calc(100vw - 520px));
  position: absolute;
  z-index: 4;
}

.deck-nav {
  align-items: center;
  bottom: 18px;
  display: flex;
  gap: 14px;
  position: fixed;
  right: 24px;
  z-index: 20;
}

.nav-button {
  align-items: center;
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  color: var(--paper);
  cursor: pointer;
  display: grid;
  font-size: 30px;
  height: 42px;
  line-height: 1;
  place-items: center;
  width: 42px;
}

.nav-button:disabled {
  cursor: default;
  opacity: .28;
}

.progress-wrap {
  background: rgba(23, 20, 18, .15);
  border-radius: 999px;
  height: 5px;
  overflow: hidden;
  width: 150px;
}

.progress-bar {
  background: var(--clay);
  height: 100%;
  transition: width 280ms var(--ease);
}

.slide-count {
  color: var(--ink-muted);
  font-family: "JetBrains Mono", SFMono-Regular, ui-monospace, monospace;
  font-size: 13px;
  min-width: 58px;
}

.mascot-wrap {
  height: 118px;
  position: absolute;
  right: 28px;
  top: 42px;
  width: 142px;
  z-index: 8;
}

.clawd-real {
  animation: float 2800ms ease-in-out infinite;
  background: rgba(250, 247, 240, .75);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  inset: 0;
  place-items: center;
  position: absolute;
}

.clawd-real img {
  display: block;
  max-height: 96px;
  max-width: 118px;
  object-fit: contain;
}

.clawd-real img[src=""],
.clawd-real img:not([src]) {
  display: none;
}

.clawd-mark {
  animation: float 2800ms ease-in-out infinite;
  background: var(--clay);
  border: 4px solid var(--ink);
  border-radius: 5px;
  bottom: 14px;
  display: none;
  height: 64px;
  left: 20px;
  position: absolute;
  width: 92px;
}

.clawd-mark span {
  background: var(--ink);
  border-radius: 3px;
  height: 22px;
  position: absolute;
  top: 22px;
  width: 10px;
}

.clawd-mark span:first-child { left: 25px; }
.clawd-mark span:last-child { right: 25px; }

.clawd-real:has(img[src=""]) + .clawd-mark {
  display: block;
}

.paper-labels b {
  animation: labelIn 560ms var(--ease) both;
  left: 34px;
  position: absolute;
  top: calc(34px + var(--i) * 46px);
  transform: rotate(calc((var(--i) - 1) * -2deg));
  z-index: 7;
}

.scene-supply .paper-labels {
  display: none;
}

.scene-knowledgeRaw .paper-labels,
.scene-knowledgeWiki .paper-labels,
.scene-knowledgeSchema .paper-labels,
.scene-digitalTwin .paper-labels,
.scene-clawdLab .paper-labels,
.scene-autopilot .paper-labels,
.scene-dashboard .paper-labels,
.scene-terminalReview .paper-labels,
.scene-agentCarSystem .paper-labels,
.scene-carBuild .paper-labels,
.scene-car .paper-labels,
.scene-city .paper-labels,
.scene-trunk .paper-labels,
.scene-ship .paper-labels,
.scene-crane .paper-labels,
.scene-saddle .paper-labels {
  display: none;
}

.scene-toolWall .paper-labels,
.scene-skillCards .paper-labels,
.scene-workbench .paper-labels,
.scene-manual .paper-labels,
.scene-drawers .paper-labels,
.scene-mission .paper-labels,
.scene-console .paper-labels,
.scene-controlTower .paper-labels,
.scene-triangle .paper-labels,
.scene-loop .paper-labels {
  display: none;
}

.supply-line,
.factory-floor,
.concept-switch,
.concept-map,
.voyage-ticket,
.context-ship,
.wrong-cargo-scene,
.cargo-anxiety,
.agent-car-system,
.autopilot-panel,
.agent-console,
.raw-library,
.wiki-map,
.schema-files,
.twin-flow,
.clawd-lab,
.build-bay,
.harbor,
.stable,
.site-compare,
.navigation-compare,
.interrogate-room,
.supervision-board,
.system-triangle,
.agent-loop,
.tool-wall,
.skill-deck,
.drawers,
.manual-book,
.memory-board,
.review-station,
.second-review,
.knowledge-rack,
.control-room,
.desk-scene,
.black-box-scene,
.road-grid {
  inset: 74px 44px 54px;
  position: absolute;
  z-index: 3;
}

.brand-logo {
  align-items: center;
  background: rgba(255,253,248,.92);
  border: 2px solid rgba(23,20,18,.72);
  border-radius: 8px;
  box-shadow: 8px 8px 0 rgba(23,20,18,.08);
  display: grid;
  gap: 8px;
  min-height: 78px;
  padding: 14px 12px;
  place-items: center;
}

.brand-logo img {
  display: block;
  max-height: 24px;
  max-width: 84px;
}

.brand-logo b {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-chain {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(6, minmax(74px, 1fr));
  left: 28px;
  position: absolute;
  right: 28px;
  top: 52px;
  z-index: 6;
}

.brand-chain > i {
  align-self: center;
  background: var(--ink);
  border-radius: 999px;
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 9px 6px;
  text-align: center;
}

.brand-chain > i:nth-of-type(1)::after,
.brand-chain > i:nth-of-type(2)::after,
.brand-chain > i:nth-of-type(3)::after,
.brand-chain > i:nth-of-type(4)::after,
.brand-chain > i:nth-of-type(5)::after {
  content: " →";
}

.supply-stages {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, 1fr);
  left: 26px;
  position: absolute;
  right: 26px;
  top: 62px;
  z-index: 6;
}

.supply-stages section {
  background: rgba(255,253,248,.88);
  border: 2px solid rgba(23,20,18,.72);
  border-radius: 8px;
  box-shadow: 8px 8px 0 rgba(23,20,18,.08);
  display: grid;
  gap: 10px;
  min-height: 210px;
  padding: 16px 12px;
  position: relative;
}

.supply-stages section:not(:last-child)::after {
  background: var(--ink);
  border-radius: 999px;
  color: var(--paper);
  content: "→";
  display: grid;
  font-family: "JetBrains Mono", monospace;
  height: 30px;
  place-items: center;
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  z-index: 8;
}

.supply-stages em {
  color: var(--clay-dark);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.supply-stages strong {
  align-self: center;
  background: var(--paper-deep);
  border: 2px solid rgba(23,20,18,.72);
  border-radius: 8px;
  display: grid;
  font-size: 20px;
  min-height: 84px;
  place-items: center;
}

.supply-stages small {
  align-self: end;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.supply-stages .brand-logo {
  min-height: 66px;
  padding: 10px 8px;
}

.concept-switch,
.concept-map,
.agent-car-system {
  background:
    linear-gradient(135deg, rgba(255,253,248,.86), rgba(232,222,206,.5)),
    repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(23,20,18,.05) 41px);
  border: 3px solid rgba(23,20,18,.62);
  box-shadow: inset 0 -52px 0 rgba(83,105,122,.1);
}

.concept-switch {
  align-items: center;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr auto 1fr;
  padding: 96px 54px;
}

.concept-switch section,
.concept-map section,
.agent-car-system section {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 10px 10px 0 rgba(23,20,18,.08);
  display: grid;
  gap: 14px;
  min-height: 178px;
  padding: 28px;
  place-items: center;
  text-align: center;
}

.concept-switch > span {
  background: var(--clay);
  border: 3px solid var(--ink);
  border-radius: 999px;
  font-weight: 900;
  padding: 16px 20px;
}

.concept-switch b,
.concept-map b,
.agent-car-system b {
  font-size: 30px;
}

.concept-switch i,
.concept-map i,
.agent-car-system i {
  color: var(--ink-muted);
  font-style: normal;
  font-weight: 900;
}

.concept-map {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr);
  padding: 100px 44px 84px;
}

.concept-map section:nth-child(1) { border-color: var(--clay); }
.concept-map section:nth-child(2) { border-color: var(--slate); }
.concept-map section:nth-child(3) { border-color: var(--sage); }

.voyage-ticket,
.agent-console {
  background:
    linear-gradient(180deg, rgba(255,253,248,.92), rgba(241,234,223,.82)),
    repeating-linear-gradient(0deg, transparent, transparent 34px, rgba(23,20,18,.045) 35px);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 14px 14px 0 rgba(23,20,18,.08);
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
  padding: 94px 62px 70px;
}

.voyage-ticket::before {
  border-bottom: 3px dashed rgba(23,20,18,.5);
  content: "";
  left: 36px;
  position: absolute;
  right: 36px;
  top: 72px;
}

.voyage-ticket em,
.agent-console em {
  background: var(--ink);
  border-radius: 999px;
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  left: 30px;
  padding: 9px 13px;
  position: absolute;
  top: 26px;
}

.voyage-ticket i,
.agent-console i,
.context-ship em {
  background: var(--white);
  border: 2px solid rgba(23,20,18,.72);
  border-radius: 6px;
  box-shadow: 7px 7px 0 rgba(23,20,18,.08);
  font-style: normal;
  font-weight: 900;
  padding: 20px;
}

.context-ship {
  background: linear-gradient(180deg, transparent 52%, rgba(83,105,122,.17) 53%);
}

.context-ship em {
  left: 34px;
  position: absolute;
  top: 34px;
  z-index: 7;
}

.wrong-cargo-scene,
.cargo-anxiety {
  background:
    linear-gradient(180deg, rgba(250,247,240,.55), rgba(250,247,240,.2)),
    repeating-linear-gradient(90deg, transparent, transparent 34px, rgba(23,20,18,.05) 35px);
  border: 3px solid rgba(23,20,18,.62);
}

.destination,
.opened-container {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 9px 9px 0 rgba(23,20,18,.08);
  font-family: "JetBrains Mono", monospace;
  font-size: 22px;
  font-weight: 900;
  padding: 28px;
  position: absolute;
  z-index: 6;
}

.destination {
  left: 54px;
  top: 82px;
}

.opened-container {
  background: var(--clay);
  bottom: 86px;
  right: 54px;
}

.mismatch-line {
  border-top: 5px dashed var(--clay-dark);
  left: 220px;
  position: absolute;
  right: 258px;
  top: 50%;
  transform: rotate(-10deg);
}

.cargo-anxiety {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
  padding: 116px 52px 96px;
}

.cargo-anxiety i,
.cargo-anxiety strong {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 9px 9px 0 rgba(23,20,18,.08);
  display: grid;
  font-style: normal;
  font-weight: 900;
  min-height: 140px;
  place-items: center;
}

.cargo-anxiety strong {
  background: var(--clay);
  grid-column: 1 / -1;
  min-height: 76px;
}

.agent-car-system {
  display: grid;
  gap: 28px;
  grid-template-columns: .78fr 1.22fr;
  padding: 86px 44px 74px;
}

.agent-car-system section:nth-child(2) {
  grid-template-columns: repeat(2, 1fr);
}

.agent-car-system section:nth-child(2) b {
  grid-column: 1 / -1;
}

.agent-console {
  grid-template-columns: repeat(4, 1fr);
}

.autopilot-panel,
.raw-library,
.wiki-map,
.schema-files,
.twin-flow,
.clawd-lab {
  background:
    linear-gradient(180deg, rgba(255,253,248,.88), rgba(241,234,223,.72)),
    repeating-linear-gradient(90deg, transparent, transparent 32px, rgba(23,20,18,.045) 33px);
  border: 3px solid rgba(23,20,18,.62);
  box-shadow: inset 0 -54px 0 rgba(83,105,122,.1);
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  padding: 104px 48px 86px;
}

.autopilot-panel em,
.raw-library em,
.wiki-map em,
.schema-files em,
.twin-flow em,
.clawd-lab em {
  background: var(--ink);
  border-radius: 999px;
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  left: 28px;
  padding: 9px 13px;
  position: absolute;
  top: 28px;
}

.autopilot-panel i,
.autopilot-panel strong,
.raw-library i,
.raw-library strong,
.wiki-map i,
.wiki-map strong,
.schema-files i,
.schema-files strong,
.twin-flow i,
.twin-flow strong,
.clawd-lab i,
.clawd-lab strong {
  background: var(--white);
  animation: popIn 660ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 130ms);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 9px 9px 0 rgba(23,20,18,.08);
  display: grid;
  font-style: normal;
  font-weight: 900;
  min-height: 112px;
  place-items: center;
  text-align: center;
}

.autopilot-panel strong,
.raw-library strong,
.wiki-map strong,
.schema-files strong,
.twin-flow strong,
.clawd-lab strong {
  background: var(--clay);
  grid-column: 1 / -1;
  min-height: 74px;
}

.autopilot-panel i:nth-of-type(1) { --i: 0; }
.autopilot-panel i:nth-of-type(2) { --i: 1; }
.autopilot-panel i:nth-of-type(3) { --i: 2; }
.autopilot-panel strong { --i: 3; }

.agent-console code {
  background: var(--ink);
  border-radius: 6px;
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
  grid-column: 1 / -1;
  padding: 18px;
}

.site-compare,
.navigation-compare,
.interrogate-room,
.supervision-board {
  background:
    linear-gradient(90deg, rgba(250,247,240,.72), rgba(250,247,240,.42)),
    repeating-linear-gradient(90deg, transparent, transparent 32px, rgba(23,20,18,.04) 33px);
  border: 3px solid rgba(23,20,18,.58);
  box-shadow: inset 0 -54px 0 rgba(83,105,122,.1);
}

.site-compare,
.navigation-compare {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr 1fr;
  padding: 86px 46px 72px;
}

.site-compare::before,
.navigation-compare::before {
  background: rgba(23,20,18,.72);
  content: "";
  left: calc(50% - 1px);
  position: absolute;
  top: 54px;
  bottom: 54px;
  width: 2px;
}

.site-compare section,
.navigation-compare section {
  background: rgba(255,253,248,.88);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 10px 10px 0 rgba(23,20,18,.08);
  display: grid;
  min-height: 220px;
  padding: 28px;
  position: relative;
}

.site-compare b,
.navigation-compare b {
  font-size: 24px;
}

.site-compare i,
.navigation-compare i,
.navigation-compare p {
  color: var(--ink-muted);
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  margin: 0;
}

.site-compare section span {
  bottom: 24px;
  content: "";
  position: absolute;
}

.consultant span {
  background: var(--white);
  border: 3px solid var(--ink);
  height: 78px;
  left: 34px;
  width: 124px;
}

.consultant span::after {
  color: var(--ink-muted);
  content: "答案";
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  left: 24px;
  position: absolute;
  top: 26px;
}

.crew span {
  border-bottom: 28px solid var(--slate);
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  bottom: 34px;
  height: 0;
  left: 38px;
  width: 142px;
}

.crew span::after {
  background: var(--clay);
  border: 3px solid var(--ink);
  border-radius: 8px;
  content: "";
  height: 54px;
  left: 28px;
  position: absolute;
  top: -48px;
  width: 74px;
}

.nav-path {
  border: 4px dashed var(--clay);
  border-radius: 50%;
  height: 170px;
  left: calc(50% - 85px);
  position: absolute;
  top: 130px;
  width: 170px;
}

.nav-path::after {
  background: var(--clay);
  border: 3px solid var(--ink);
  border-radius: 50%;
  content: "";
  height: 22px;
  left: 74px;
  position: absolute;
  top: -14px;
  width: 22px;
}

.interrogate-room {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 28px;
  padding: 86px 52px 72px;
}

.foggy-brief {
  align-self: center;
  background:
    radial-gradient(circle at 40% 45%, rgba(217,119,87,.26), transparent 40%),
    rgba(255,253,248,.72);
  border: 3px dashed rgba(23,20,18,.62);
  border-radius: 10px;
  color: rgba(23,20,18,.52);
  display: grid;
  font-size: 28px;
  font-weight: 900;
  min-height: 220px;
  place-items: center;
}

.question-cards {
  align-content: center;
  display: grid;
  gap: 16px;
}

.question-cards i {
  animation: popIn 640ms var(--ease) both;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 8px 8px 0 rgba(23,20,18,.08);
  font-style: normal;
  font-weight: 900;
  padding: 18px 20px;
}

.question-cards i:nth-child(2) { animation-delay: 120ms; }
.question-cards i:nth-child(3) { animation-delay: 240ms; }

.interrogate-room > span {
  background: rgba(217,119,87,.16);
  border: 2px solid rgba(217,119,87,.56);
  bottom: 54px;
  height: 24px;
  left: 52px;
  position: absolute;
  right: 52px;
}

.supervision-board {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, 1fr);
  padding: 112px 46px 92px;
}

.supervision-board em {
  background: var(--ink);
  border-radius: 999px;
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  left: 26px;
  padding: 8px 12px;
  position: absolute;
  top: 28px;
}

.supervision-board i,
.supervision-board strong {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 9px 9px 0 rgba(23,20,18,.08);
  display: grid;
  font-style: normal;
  font-weight: 900;
  min-height: 156px;
  place-items: center;
  text-align: center;
}

.supervision-board strong {
  background: var(--clay);
}

.factory-floor {
  background:
    linear-gradient(180deg, transparent 60%, rgba(83,105,122,.12) 61%),
    repeating-linear-gradient(90deg, transparent, transparent 54px, rgba(23,20,18,.05) 55px, transparent 56px);
  border-bottom: 5px solid rgba(23,20,18,.2);
  overflow: hidden;
}

.factory-floor::before {
  background: rgba(250,247,240,.72);
  border: 2px solid rgba(23,20,18,.34);
  border-radius: 8px;
  box-shadow: 10px 10px 0 rgba(23,20,18,.08);
  content: "";
  height: 76px;
  left: 36px;
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-26%);
}

.factory-floor .supply-line {
  inset: 34px 18px 112px;
  position: absolute;
}

.conveyor-readout {
  bottom: 54px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, 1fr);
  left: 34px;
  position: absolute;
  right: 34px;
  z-index: 5;
}

.conveyor-readout span {
  background: rgba(23,20,18,.78);
  border-radius: 4px;
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 6px;
  text-align: center;
}

.drive-hud,
.saddle-callout {
  background: rgba(250,247,240,.78);
  border: 2px solid rgba(23,20,18,.72);
  border-radius: 8px;
  box-shadow: 10px 10px 0 rgba(23,20,18,.08);
  display: grid;
  gap: 10px;
  padding: 16px;
  position: absolute;
  z-index: 6;
}

.drive-hud {
  bottom: 42px;
  grid-template-columns: repeat(2, 98px);
  left: 42px;
}

.saddle-callout {
  bottom: 42px;
  grid-template-columns: repeat(3, 86px);
  left: 42px;
}

.drive-hud i,
.saddle-callout i,
.assembly-rail i {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-style: normal;
  font-weight: 800;
  padding: 10px 12px;
  text-align: center;
}

.assembly-rail {
  align-items: center;
  background: rgba(250,247,240,.72);
  border: 2px solid rgba(23,20,18,.7);
  border-radius: 8px;
  bottom: 52px;
  box-shadow: 10px 10px 0 rgba(23,20,18,.08);
  display: flex;
  gap: 16px;
  padding: 16px;
  position: absolute;
  right: 42px;
  z-index: 6;
}

.assembly-rail::before {
  background: var(--clay);
  content: "";
  height: 3px;
  left: 40px;
  position: absolute;
  right: 40px;
  top: 50%;
  z-index: -1;
}

.parts-orbit {
  height: 210px;
  position: absolute;
  right: 86px;
  top: 70px;
  width: 250px;
  z-index: 5;
}

.parts-orbit::before {
  animation: orbit 5400ms linear infinite;
  border: 2px dashed rgba(23,20,18,.5);
  border-radius: 50%;
  content: "";
  inset: 0;
  position: absolute;
}

.parts-orbit b {
  animation: popIn 620ms var(--ease) both;
  background: var(--amber);
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  padding: 8px 10px;
  position: absolute;
  z-index: 2;
}

.parts-orbit b:nth-child(1) { animation-delay: 120ms; left: 18px; top: 48px; }
.parts-orbit b:nth-child(2) { animation-delay: 260ms; right: 10px; top: 84px; }
.parts-orbit b:nth-child(3) { animation-delay: 400ms; bottom: 28px; left: 88px; }

.photo-texture {
  border: 4px solid rgba(23,20,18,.92);
  border-radius: 10px;
  filter: saturate(.78) sepia(.18) contrast(.92);
  height: 168px;
  object-fit: cover;
  opacity: .34;
  position: absolute;
  right: 20px;
  top: 76px;
  transform: rotate(2deg);
  width: 268px;
  z-index: 2;
}

.ship-photo {
  bottom: 40px;
  height: 188px;
  left: 56px;
  opacity: .28;
  right: auto;
  top: auto;
  width: 330px;
}

.supply-line {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: center;
}

.supply-line::before {
  background: var(--clay);
  content: "";
  height: 4px;
  left: 50px;
  position: absolute;
  right: 50px;
  top: 50%;
}

.supply-line i {
  align-items: center;
  animation: popIn 560ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 8px;
  display: grid;
  font-style: normal;
  font-weight: 700;
  height: 104px;
  line-height: 1.15;
  place-items: center;
  position: relative;
  text-align: center;
  width: 104px;
  z-index: 2;
}

.supply-line i::before {
  background: rgba(83,105,122,.16);
  border: 2px solid rgba(23,20,18,.5);
  border-radius: 50%;
  content: "";
  height: 34px;
  position: absolute;
  top: -46px;
  width: 34px;
}

.supply-line i[data-kind="chip"]::before,
.supply-line i[data-kind="gpu"]::before,
.supply-line i[data-kind="model"]::before,
.supply-line i[data-kind="llm"]::before {
  border-radius: 7px;
}

.supply-line i[data-kind="gpu"]::before {
  background:
    linear-gradient(90deg, transparent 38%, rgba(23,20,18,.35) 39%, rgba(23,20,18,.35) 44%, transparent 45%),
    var(--sage);
}

.supply-line i[data-kind="model"]::before {
  background:
    radial-gradient(circle at 36% 36%, var(--clay), transparent 22%),
    radial-gradient(circle at 68% 64%, var(--slate), transparent 22%),
    var(--paper-deep);
}

.supply-line i[data-kind="llm"]::before {
  background: var(--clay);
}

.supply-line i:nth-child(1) { --i: 1; }
.supply-line i:nth-child(2) { --i: 2; }
.supply-line i:nth-child(3) { --i: 3; }
.supply-line i:nth-child(4) { --i: 4; }
.supply-line i:nth-child(5) { --i: 5; }

.road-grid {
  background:
    linear-gradient(90deg, transparent 48%, rgba(23,20,18,.12) 49%, rgba(23,20,18,.12) 51%, transparent 52%),
    repeating-linear-gradient(0deg, transparent, transparent 46px, rgba(83,105,122,.22) 47px, rgba(83,105,122,.22) 48px);
}

.road-grid::before {
  background:
    linear-gradient(90deg, rgba(23,20,18,.12) 1px, transparent 1px),
    linear-gradient(rgba(23,20,18,.12) 1px, transparent 1px);
  background-size: 54px 54px;
  border: 2px solid rgba(23,20,18,.28);
  content: "";
  inset: 24px;
  opacity: .7;
  position: absolute;
}

.route-tape {
  align-items: center;
  background: rgba(250,247,240,.78);
  border: 2px dashed rgba(23,20,18,.62);
  border-radius: 999px;
  box-shadow: 10px 10px 0 rgba(23,20,18,.08);
  display: flex;
  gap: 12px;
  justify-content: center;
  left: 50%;
  padding: 10px 16px;
  position: absolute;
  top: 42px;
  transform: translateX(-50%);
  z-index: 6;
}

.route-tape span {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 12px;
}

.supercar {
  animation: driveIn 900ms var(--ease) both;
  background: var(--clay);
  border: 4px solid var(--ink);
  border-radius: 64px 92px 28px 28px;
  bottom: 82px;
  box-shadow: 0 18px 0 rgba(23,20,18,.08);
  height: 116px;
  left: 16%;
  position: absolute;
  width: 360px;
  z-index: 4;
}

.scene-car .supercar,
.scene-city .supercar,
.scene-road .supercar,
.scene-autopilot .supercar,
.scene-navigation .supercar,
.scene-carBuild .supercar {
  display: none;
}

.scene-car .supercar::before,
.scene-city .supercar::before,
.scene-road .supercar::before,
.scene-autopilot .supercar::before,
.scene-navigation .supercar::before,
.scene-carBuild .supercar::before {
  background: rgba(169,81,53,.34);
}

.supercar::before {
  background: var(--clay-dark);
  border: 4px solid var(--ink);
  border-bottom: 0;
  border-radius: 88px 88px 0 0;
  content: "";
  height: 76px;
  left: 86px;
  position: absolute;
  top: -52px;
  width: 142px;
}

.wheel {
  background: var(--ink);
  border: 8px solid var(--paper);
  border-radius: 50%;
  bottom: -31px;
  height: 72px;
  position: absolute;
  width: 72px;
}

.wheel.left { left: 54px; }
.wheel.right { right: 54px; }

.cabin {
  background: var(--slate);
  border: 3px solid var(--ink);
  border-radius: 50px 50px 8px 8px;
  height: 48px;
  left: 126px;
  position: absolute;
  top: -36px;
  width: 76px;
}

.build-bay .engine {
  animation: shake 900ms ease-in-out infinite;
  background: var(--slate);
  border: 4px solid var(--ink);
  border-radius: 8px;
  height: 86px;
  left: 70px;
  position: absolute;
  top: 130px;
  width: 122px;
}

.assembling em,
.assembling strong,
.sensor {
  animation: install 1200ms var(--ease) both infinite alternate;
  background: var(--amber);
  border: 3px solid var(--ink);
  border-radius: 8px;
  position: absolute;
}

.assembling em {
  height: 40px;
  right: 44px;
  top: -74px;
  width: 78px;
}

.assembling strong {
  height: 48px;
  right: 124px;
  top: -84px;
  width: 12px;
}

.sensor {
  height: 42px;
  width: 42px;
}

.sensor.s1 { right: 86px; top: 94px; }
.sensor.s2 { right: 40px; top: 176px; }

.harbor {
  background: linear-gradient(180deg, transparent 58%, rgba(83,105,122,.16) 59%);
}

.harbor::before {
  background:
    repeating-linear-gradient(90deg, rgba(250,247,240,.76), rgba(250,247,240,.76) 22px, rgba(216,205,187,.72) 23px, rgba(216,205,187,.72) 36px);
  border: 2px solid rgba(23,20,18,.24);
  bottom: 0;
  content: "";
  height: 88px;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 2;
}

.dock-ledger {
  background: rgba(250,247,240,.82);
  border: 2px solid rgba(23,20,18,.68);
  border-radius: 8px;
  box-shadow: 9px 9px 0 rgba(23,20,18,.08);
  left: 330px;
  padding: 16px 18px;
  position: absolute;
  top: 34px;
  width: 220px;
  z-index: 6;
}

.dock-ledger b,
.dock-ledger span {
  display: block;
}

.dock-ledger b {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  margin-bottom: 8px;
}

.dock-ledger span {
  color: var(--ink-muted);
  font-size: 15px;
  font-weight: 700;
}

.ship {
  background: var(--slate);
  border: 4px solid var(--ink);
  border-radius: 0 0 90px 90px;
  bottom: 54px;
  height: 90px;
  left: 70px;
  position: absolute;
  width: 460px;
  z-index: 4;
}

.scene-ship .ship,
.scene-crane .ship,
.scene-wrongCargo .ship,
.scene-knowledgeRaw .ship,
.scene-ticket .ship,
.scene-trunk .ship {
  background: rgba(83,105,122,.58);
  bottom: 36px;
  left: 52px;
  opacity: .92;
  transform: scale(.78);
  transform-origin: left bottom;
}

.ship::before {
  background: var(--white);
  border: 4px solid var(--ink);
  content: "";
  height: 72px;
  position: absolute;
  right: 58px;
  top: -78px;
  width: 94px;
}

.cargo {
  animation: cargoDrop 1500ms var(--ease) both;
  background: var(--clay);
  border: 3px solid var(--ink);
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  height: 56px;
  padding: 17px 8px;
  position: absolute;
  text-align: center;
  width: 94px;
  z-index: 5;
}

.c1 { left: 106px; top: 178px; }
.c2 { left: 204px; top: 178px; animation-delay: 120ms; }
.c3 { left: 302px; top: 178px; animation-delay: 240ms; }
.c4 { left: 204px; top: 118px; animation-delay: 360ms; }

.crane-arm {
  border-left: 8px solid var(--ink);
  border-top: 8px solid var(--ink);
  height: 160px;
  left: 30px;
  position: absolute;
  top: 28px;
  width: 260px;
}

.crane-arm::after {
  animation: cargoDrop 1800ms var(--ease) infinite alternate;
  background: var(--ink);
  content: "";
  height: 62px;
  left: 222px;
  position: absolute;
  top: 0;
  width: 4px;
}

.stable {
  background: linear-gradient(180deg, transparent 70%, rgba(114,128,100,.18) 71%);
}

.rein-map {
  background: rgba(250,247,240,.76);
  border: 2px dashed rgba(23,20,18,.62);
  border-radius: 999px;
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  position: absolute;
  right: 42px;
  top: 52px;
  z-index: 6;
}

.rein-map span {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 11px;
}

.horse {
  bottom: 100px;
  height: 170px;
  left: 120px;
  position: absolute;
  width: 380px;
}

.scene-saddle .horse {
  display: none;
}

.scene-saddle .horse .body,
.scene-saddle .horse .head,
.scene-saddle .horse .leg {
  background: rgba(138,91,63,.32);
  border-color: rgba(23,20,18,.72);
}

.horse .body,
.horse .head {
  background: #8a5b3f;
  border: 4px solid var(--ink);
  position: absolute;
}

.horse .body {
  border-radius: 70px 92px 70px 62px;
  height: 112px;
  left: 50px;
  top: 52px;
  width: 230px;
}

.horse .head {
  border-radius: 52px 48px 36px 24px;
  height: 78px;
  right: 40px;
  top: 24px;
  transform: rotate(12deg);
  width: 76px;
}

.horse .leg {
  background: #8a5b3f;
  border: 4px solid var(--ink);
  border-top: 0;
  bottom: -42px;
  height: 76px;
  position: absolute;
  width: 24px;
}

.l1 { left: 86px; }
.l2 { left: 144px; }
.l3 { left: 218px; }
.l4 { left: 264px; }

.horse .saddle {
  animation: install 1300ms var(--ease) both infinite alternate;
  background: var(--clay);
  border: 4px solid var(--ink);
  border-radius: 16px 16px 8px 8px;
  height: 42px;
  left: 128px;
  position: absolute;
  top: 38px;
  width: 92px;
}

.horse .rein {
  border-right: 4px solid var(--ink);
  border-top: 4px solid var(--ink);
  height: 68px;
  position: absolute;
  right: 74px;
  top: 58px;
  transform: rotate(26deg);
  width: 112px;
}

.system-triangle svg {
  fill: rgba(217,119,87,.12);
  height: 76%;
  left: 12%;
  position: absolute;
  stroke: var(--clay);
  stroke-width: 4;
  top: 10%;
  width: 76%;
}

.system-triangle i,
.agent-loop i {
  align-items: center;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 8px;
  display: grid;
  font-style: normal;
  font-weight: 700;
  height: 98px;
  line-height: 1.2;
  place-items: center;
  position: absolute;
  text-align: center;
  width: 138px;
  z-index: 2;
}

.system-triangle i:nth-child(1) { left: 40%; top: 0; }
.system-triangle i:nth-child(2) { bottom: 24px; left: 18%; }
.system-triangle i:nth-child(3) { bottom: 24px; right: 18%; }

.agent-loop {
  border: 4px dashed var(--clay);
  border-radius: 50%;
  inset: 82px 120px;
}

.agent-loop i:nth-child(1) { left: 38%; top: -45px; }
.agent-loop i:nth-child(2) { right: -60px; top: 38%; }
.agent-loop i:nth-child(3) { bottom: -45px; left: 38%; }
.agent-loop i:nth-child(4) { left: -60px; top: 38%; }
.agent-loop span {
  animation: orbit 3600ms linear infinite;
  background: var(--clay);
  border: 3px solid var(--ink);
  border-radius: 50%;
  height: 26px;
  left: calc(50% - 13px);
  position: absolute;
  top: -15px;
  transform-origin: 13px 185px;
  width: 26px;
}

.tool-wall,
.drawers,
.manual-book,
.memory-board,
.review-station,
.second-review,
.knowledge-rack {
  align-content: center;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  padding: 60px 80px;
}

.tool-wall {
  background:
    radial-gradient(circle, rgba(23,20,18,.16) 1px, transparent 2px);
  background-size: 22px 22px;
  border: 3px solid rgba(23,20,18,.68);
  box-shadow: inset 0 0 0 14px rgba(250,247,240,.42);
}

.tool-wall em,
.knowledge-rack em,
.review-station em,
.second-review em {
  background: var(--ink);
  border-radius: 999px;
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  left: 22px;
  padding: 8px 12px;
  position: absolute;
  top: 20px;
  z-index: 6;
}

.tool-cord {
  border-bottom: 4px solid rgba(23,20,18,.55);
  border-left: 4px solid rgba(23,20,18,.55);
  border-radius: 0 0 0 28px;
  bottom: 44px;
  height: 86px;
  position: absolute;
  right: 76px;
  width: 170px;
}

.tool-wall i,
.drawers i,
.manual-book i,
.memory-board i,
.review-station i,
.knowledge-rack i,
.skill-deck i,
.knowledge-rack strong {
  animation: popIn 640ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 110ms);
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 7px 7px 0 rgba(23,20,18,.08);
  color: var(--ink);
  display: grid;
  font-style: normal;
  font-weight: 700;
  min-height: 74px;
  place-items: center;
  text-align: center;
}

.tool-wall i:nth-child(odd),
.memory-board i:nth-child(3),
.knowledge-rack strong {
  background: var(--paper-deep);
}

.skill-deck {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: center;
  perspective: 900px;
}

.skill-deck i {
  animation: cardFan 900ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 120ms);
  height: 180px;
  padding: 20px;
  transform: rotate(calc((var(--i) - 2) * 5deg));
  width: 128px;
}

.skill-deck i:nth-child(1) { --i: 0; }
.skill-deck i:nth-child(2) { --i: 1; }
.skill-deck i:nth-child(3) { --i: 2; }
.skill-deck i:nth-child(4) { --i: 3; }

.tool-wall i:nth-of-type(1),
.drawers i:nth-of-type(1),
.manual-book i:nth-of-type(1),
.memory-board i:nth-of-type(1),
.review-station i:nth-of-type(1),
.knowledge-rack i:nth-of-type(1) { --i: 0; }
.tool-wall i:nth-of-type(2),
.drawers i:nth-of-type(2),
.manual-book i:nth-of-type(2),
.memory-board i:nth-of-type(2),
.review-station i:nth-of-type(2),
.knowledge-rack i:nth-of-type(2) { --i: 1; }
.tool-wall i:nth-of-type(3),
.drawers i:nth-of-type(3),
.manual-book i:nth-of-type(3),
.memory-board i:nth-of-type(3),
.review-station i:nth-of-type(3),
.knowledge-rack i:nth-of-type(3) { --i: 2; }
.tool-wall i:nth-of-type(4),
.drawers i:nth-of-type(4),
.manual-book i:nth-of-type(4),
.memory-board i:nth-of-type(4),
.review-station i:nth-of-type(4),
.knowledge-rack i:nth-of-type(4) { --i: 3; }
.tool-wall i:nth-of-type(5),
.drawers i:nth-of-type(5) { --i: 4; }
.tool-wall i:nth-of-type(6),
.drawers i:nth-of-type(6) { --i: 5; }

.review-station code {
  background: var(--ink);
  border-radius: 6px;
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
  grid-column: 1 / -1;
  padding: 18px;
}

.review-station {
  background:
    linear-gradient(180deg, rgba(250,247,240,.7), rgba(250,247,240,.5)),
    repeating-linear-gradient(90deg, transparent, transparent 32px, rgba(23,20,18,.05) 33px);
  border: 3px solid rgba(23,20,18,.66);
  box-shadow: inset 0 -48px 0 rgba(83,105,122,.12);
}

.review-station i {
  position: relative;
}

.review-station i::before {
  background: conic-gradient(var(--clay) 0 78%, rgba(23,20,18,.12) 78% 100%);
  border-radius: 50%;
  content: "";
  height: 28px;
  left: 14px;
  position: absolute;
  top: 14px;
  width: 28px;
}

.second-review {
  border: 3px solid rgba(23,20,18,.66);
  box-shadow: inset 0 -48px 0 rgba(83,105,122,.12);
  grid-template-columns: 1fr auto 1fr;
  padding: 102px 38px 78px;
}

.second-review section {
  animation: popIn 640ms var(--ease) both;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 9px 9px 0 rgba(23,20,18,.08);
  display: grid;
  gap: 16px;
  min-height: 166px;
  padding: 24px;
  place-items: center;
  text-align: center;
}

.second-review section:nth-of-type(1) { animation-delay: 80ms; }
.second-review section:nth-of-type(2) { animation-delay: 360ms; }

.second-review b {
  font-size: 24px;
}

.second-review i {
  background: var(--paper-deep);
  border: 2px solid rgba(23,20,18,.62);
  border-radius: 6px;
  font-style: normal;
  font-weight: 900;
  padding: 12px 14px;
}

.review-arrow {
  animation: popIn 640ms var(--ease) both;
  animation-delay: 220ms;
  align-self: center;
  background: var(--clay);
  border: 3px solid var(--ink);
  border-radius: 999px;
  font-weight: 900;
  padding: 14px 18px;
}

.second-review strong {
  animation: popIn 640ms var(--ease) both;
  animation-delay: 520ms;
  background: var(--ink);
  border-radius: 6px;
  color: var(--paper);
  font-weight: 900;
  grid-column: 1 / -1;
  padding: 18px;
  text-align: center;
}

.knowledge-rack {
  grid-template-columns: 1fr;
  padding-inline: 110px;
}

.knowledge-rack::before {
  background:
    linear-gradient(90deg, rgba(217,119,87,.18), transparent 70%),
    rgba(250,247,240,.64);
  border: 3px solid rgba(23,20,18,.62);
  border-radius: 8px;
  box-shadow: 12px 12px 0 rgba(23,20,18,.08);
  content: "";
  inset: 42px 78px;
  position: absolute;
  z-index: -1;
}

.knowledge-rack i,
.knowledge-rack strong {
  min-height: 78px;
  position: relative;
}

.knowledge-rack strong {
  background: var(--clay);
  border-color: var(--ink);
}

.pipeline {
  background: var(--ink);
  border-radius: 999px;
  bottom: 78px;
  left: calc(50% - 3px);
  position: absolute;
  top: 126px;
  width: 6px;
  z-index: -1;
}

.control-room {
  background:
    linear-gradient(180deg, transparent 58%, rgba(23,20,18,.08) 59%),
    radial-gradient(circle at 50% 34%, rgba(217,119,87,.2), transparent 34%);
  overflow: hidden;
}

.control-room::before {
  background:
    linear-gradient(90deg, rgba(23,20,18,.12) 1px, transparent 1px),
    linear-gradient(rgba(23,20,18,.12) 1px, transparent 1px);
  background-size: 42px 42px;
  border: 3px solid rgba(23,20,18,.56);
  content: "";
  inset: 42px 72px 72px;
  position: absolute;
}

.command-desk {
  background: rgba(250,247,240,.82);
  border: 3px solid var(--ink);
  border-radius: 10px 10px 28px 28px;
  bottom: 44px;
  box-shadow: 12px 12px 0 rgba(23,20,18,.08);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  left: 88px;
  padding: 16px;
  position: absolute;
  right: 88px;
  z-index: 6;
}

.command-desk i {
  animation: popIn 620ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 120ms);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 10px 6px;
  text-align: center;
}

.command-desk i:nth-child(1) { --i: 0; }
.command-desk i:nth-child(2) { --i: 1; }
.command-desk i:nth-child(3) { --i: 2; }
.command-desk i:nth-child(4) { --i: 3; }

.signal-lines {
  animation: signalPulse 1800ms ease-in-out infinite;
  border-left: 3px solid rgba(217,119,87,.72);
  border-right: 3px solid rgba(83,105,122,.72);
  border-top: 3px solid rgba(114,128,100,.72);
  height: 150px;
  left: 160px;
  position: absolute;
  right: 160px;
  top: 166px;
  z-index: 2;
}

.mini {
  transform: scale(.45);
  transform-origin: left bottom;
}

.control-room .supercar {
  bottom: 40px;
  left: 40px;
}

.control-room .ship {
  bottom: 60px;
  left: 280px;
  transform: scale(.55);
  transform-origin: left bottom;
}

.saddle-icon {
  background: var(--clay);
  border: 4px solid var(--ink);
  border-radius: 80px 80px 18px 18px;
  height: 80px;
  position: absolute;
  right: 94px;
  top: 170px;
  width: 138px;
}

.tower-screen {
  background: var(--ink);
  border-radius: 8px;
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
  font-size: 28px;
  font-weight: 700;
  left: 50%;
  padding: 34px 44px;
  position: absolute;
  top: 44px;
  transform: translateX(-50%);
  z-index: 5;
}

.desk-scene .screen {
  background: var(--ink);
  border: 5px solid var(--ink);
  border-radius: 12px;
  height: 220px;
  left: 130px;
  position: absolute;
  top: 92px;
  width: 360px;
}

.desk-scene .screen::after {
  color: var(--paper);
  content: "agent: ready";
  font-family: "JetBrains Mono", monospace;
  left: 32px;
  position: absolute;
  top: 36px;
}

.desk-scene .papers {
  background: var(--white);
  border: 3px solid var(--ink);
  bottom: 58px;
  height: 84px;
  left: 80px;
  position: absolute;
  transform: rotate(-5deg);
  width: 190px;
}

.desk-scene .lamp {
  border-left: 7px solid var(--ink);
  border-top: 7px solid var(--ink);
  height: 128px;
  position: absolute;
  right: 118px;
  top: 90px;
  transform: rotate(-14deg);
  width: 120px;
}

.scene-blackbox .visual-stage,
.scene-anxiety .visual-stage {
  background: linear-gradient(135deg, #29221d, #4b3c32);
}

.black-box-scene {
  display: grid;
  place-items: center;
}

.black-box {
  align-items: center;
  animation: shake 1400ms ease-in-out infinite;
  background: #0e0d0c;
  border: 4px solid var(--paper);
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(0,0,0,.28);
  color: var(--paper);
  display: grid;
  font-family: "JetBrains Mono", monospace;
  font-size: 54px;
  font-weight: 800;
  height: 210px;
  place-items: center;
  width: 260px;
}

.question-stack i {
  animation: cargoDrop 1100ms var(--ease) both infinite alternate;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 50%;
  display: grid;
  font-style: normal;
  font-weight: 900;
  height: 54px;
  left: calc(80px + var(--i) * 46px);
  place-items: center;
  position: absolute;
  top: calc(110px + var(--i) * 52px);
  width: 54px;
}

.question-stack i:nth-child(1) { --i: 0; }
.question-stack i:nth-child(2) { --i: 1; animation-delay: 120ms; }
.question-stack i:nth-child(3) { --i: 2; animation-delay: 240ms; }

.answer-slip {
  background: var(--clay);
  border: 3px solid var(--ink);
  border-radius: 4px;
  bottom: 96px;
  box-shadow: 8px 8px 0 rgba(0,0,0,.22);
  font-weight: 800;
  padding: 14px 18px;
  position: absolute;
  right: 88px;
  transform: rotate(-3deg);
}

.scene-car .scene-photo,
.scene-city .scene-photo,
.scene-autopilot .scene-photo,
.scene-carBuild .scene-photo,
.scene-agentCarSystem .scene-photo,
.scene-ship .scene-photo,
.scene-crane .scene-photo,
.scene-trunk .scene-photo,
.scene-wrongCargo .scene-photo,
.scene-cargoAnxiety .scene-photo,
.scene-saddle .scene-photo,
.scene-dashboard .scene-photo,
.scene-terminalReview .scene-photo {
  opacity: .78;
}

.scene-car .visual-stage::after,
.scene-city .visual-stage::after,
.scene-autopilot .visual-stage::after,
.scene-carBuild .visual-stage::after,
.scene-agentCarSystem .visual-stage::after,
.scene-ship .visual-stage::after,
.scene-crane .visual-stage::after,
.scene-trunk .visual-stage::after,
.scene-wrongCargo .visual-stage::after,
.scene-cargoAnxiety .visual-stage::after,
.scene-saddle .visual-stage::after,
.scene-dashboard .visual-stage::after,
.scene-terminalReview .visual-stage::after {
  background:
    linear-gradient(90deg, rgba(250,247,240,.44), rgba(250,247,240,.08) 48%, rgba(250,247,240,.32)),
    radial-gradient(ellipse at 50% 88%, rgba(23,20,18,.18), transparent 32%);
}

.scene-car .stage-glow,
.scene-city .stage-glow,
.scene-autopilot .stage-glow,
.scene-carBuild .stage-glow,
.scene-agentCarSystem .stage-glow,
.scene-ship .stage-glow,
.scene-crane .stage-glow,
.scene-trunk .stage-glow,
.scene-wrongCargo .stage-glow,
.scene-cargoAnxiety .stage-glow,
.scene-saddle .stage-glow,
.scene-dashboard .stage-glow,
.scene-terminalReview .stage-glow {
  opacity: .34;
}

.scene-autopilot .autopilot-panel,
.scene-dashboard .review-station,
.scene-terminalReview .second-review {
  left: 36px;
  right: auto;
  width: min(520px, calc(100% - 72px));
}

.scene-dashboard .review-station,
.scene-terminalReview .second-review {
  background:
    linear-gradient(180deg, rgba(250,247,240,.86), rgba(241,234,223,.78)),
    repeating-linear-gradient(90deg, transparent, transparent 32px, rgba(23,20,18,.05) 33px);
}

.raw-library {
  background:
    linear-gradient(180deg, rgba(255,253,248,.82), rgba(232,222,206,.6)),
    linear-gradient(90deg, rgba(83,105,122,.16), transparent 42%);
  border: 3px solid rgba(23,20,18,.68);
  display: block;
  overflow: hidden;
  padding: 0;
}

.raw-library::before {
  background:
    linear-gradient(90deg, transparent, transparent 22%, rgba(23,20,18,.45) 22.5%, transparent 23%),
    linear-gradient(180deg, transparent, transparent 32%, rgba(23,20,18,.42) 32.5%, transparent 33%, transparent 66%, rgba(23,20,18,.42) 66.5%, transparent 67%);
  content: "";
  inset: 94px 44px 92px;
  position: absolute;
}

.raw-shelf {
  bottom: 112px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, 1fr);
  left: 62px;
  position: absolute;
  right: 62px;
  top: 118px;
}

.raw-shelf i {
  align-items: end;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 4px;
  box-shadow: 8px 8px 0 rgba(23,20,18,.08);
  display: grid;
  font-style: normal;
  font-weight: 900;
  min-height: 0;
  padding: 18px;
  text-align: center;
}

.raw-shelf i:nth-child(1) { height: 78%; align-self: end; background: #fff7e7; }
.raw-shelf i:nth-child(2) { height: 92%; align-self: end; background: #eef1e6; }
.raw-shelf i:nth-child(3) { height: 66%; align-self: end; background: #edf3f5; }
.raw-shelf i:nth-child(4) { height: 84%; align-self: end; background: #f6e4d8; }

.raw-library strong,
.wiki-map strong,
.schema-files strong,
.twin-flow strong,
.clawd-lab strong {
  bottom: 26px;
  left: 42px;
  position: absolute;
  right: 42px;
}

.wiki-map {
  background:
    radial-gradient(circle at 50% 46%, rgba(217,119,87,.18), transparent 24%),
    radial-gradient(circle at 24% 28%, rgba(83,105,122,.16), transparent 18%),
    radial-gradient(circle at 74% 66%, rgba(114,128,100,.18), transparent 20%),
    rgba(255,253,248,.78);
  border: 3px solid rgba(23,20,18,.68);
  display: block;
  overflow: hidden;
}

.wiki-map::before,
.wiki-map::after {
  border-top: 4px dashed rgba(23,20,18,.45);
  content: "";
  left: 170px;
  position: absolute;
  right: 170px;
  top: 48%;
}

.wiki-map::after {
  transform: rotate(54deg);
}

.wiki-node {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 8px 8px 0 rgba(23,20,18,.08);
  display: grid;
  font-weight: 900;
  min-height: 78px;
  padding: 14px 18px;
  place-items: center;
  position: absolute;
  text-align: center;
  z-index: 4;
}

.wiki-node.main {
  background: var(--clay);
  border-radius: 50%;
  height: 156px;
  left: calc(50% - 78px);
  top: calc(50% - 94px);
  width: 156px;
}

.wiki-node.n1 { left: 70px; top: 112px; width: 138px; }
.wiki-node.n2 { right: 76px; top: 112px; width: 138px; }
.wiki-node.n3 { left: 92px; bottom: 120px; width: 168px; }
.wiki-node.n4 { right: 92px; bottom: 120px; width: 168px; }

.schema-files {
  background:
    linear-gradient(90deg, rgba(255,253,248,.86), rgba(255,253,248,.48)),
    repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(23,20,18,.05) 41px);
  border: 3px solid rgba(23,20,18,.68);
  display: block;
}

.file-stack {
  height: 260px;
  left: 66px;
  position: absolute;
  top: 112px;
  width: 280px;
}

.file-stack i {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 10px 10px 0 rgba(23,20,18,.08);
  display: block;
  font-style: normal;
  font-weight: 900;
  height: 94px;
  left: calc(var(--i, 0) * 34px);
  padding: 22px 20px;
  position: absolute;
  top: calc(var(--i, 0) * 38px);
  width: 220px;
}

.file-stack i:nth-child(1) { --i: 0; background: #fff7e7; }
.file-stack i:nth-child(2) { --i: 1; background: #edf3f5; }
.file-stack i:nth-child(3) { --i: 2; background: #eef1e6; }
.file-stack i:nth-child(4) { --i: 3; background: #f6e4d8; }

.schema-arrow {
  background: var(--ink);
  border-radius: 999px;
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  font-weight: 900;
  left: 382px;
  padding: 16px 20px;
  position: absolute;
  right: 74px;
  text-align: center;
  top: 164px;
}

.schema-arrow::after {
  background: var(--clay);
  border: 3px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  content: "任務模板";
  display: grid;
  height: 130px;
  place-items: center;
  position: absolute;
  right: 0;
  top: 76px;
  width: 136px;
}

.twin-flow {
  background:
    linear-gradient(90deg, rgba(255,253,248,.9), rgba(255,253,248,.36)),
    repeating-linear-gradient(90deg, transparent, transparent 46px, rgba(23,20,18,.045) 47px);
  border: 3px solid rgba(23,20,18,.68);
  display: block;
  overflow: hidden;
}

.human-side,
.agent-side {
  background: rgba(255,253,248,.88);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 10px 10px 0 rgba(23,20,18,.08);
  display: grid;
  gap: 12px;
  min-height: 220px;
  padding: 26px;
  position: absolute;
  top: 128px;
  width: 240px;
}

.human-side { left: 78px; }
.agent-side { right: 78px; }

.human-side b,
.agent-side b {
  font-size: 28px;
}

.human-side i,
.agent-side i {
  background: var(--paper-deep);
  border: 2px solid rgba(23,20,18,.62);
  border-radius: 6px;
  display: block;
  font-style: normal;
  font-weight: 900;
  padding: 12px;
}

.mirror-line {
  border: 4px dashed var(--clay);
  border-radius: 999px;
  height: 124px;
  left: calc(50% - 94px);
  position: absolute;
  top: 184px;
  width: 188px;
}

.mirror-line::before,
.mirror-line::after {
  background: var(--clay);
  border: 3px solid var(--ink);
  border-radius: 50%;
  content: "";
  height: 22px;
  position: absolute;
  top: 48px;
  width: 22px;
}

.mirror-line::before { left: -14px; }
.mirror-line::after { right: -14px; }

.clawd-lab {
  background:
    linear-gradient(180deg, rgba(255,253,248,.86), rgba(232,222,206,.62)),
    repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(23,20,18,.05) 39px);
  border: 3px solid rgba(23,20,18,.68);
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr 170px 1fr;
  padding: 132px 52px 104px;
}

.lab-input,
.lab-output {
  display: grid;
  gap: 16px;
}

.lab-input i,
.lab-output i {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 8px 8px 0 rgba(23,20,18,.08);
  display: grid;
  font-style: normal;
  font-weight: 900;
  min-height: 86px;
  place-items: center;
}

.lab-core {
  align-self: center;
  background: var(--clay);
  border: 4px solid var(--ink);
  border-radius: 22px;
  box-shadow: 10px 10px 0 rgba(23,20,18,.1);
  display: grid;
  font-weight: 900;
  min-height: 156px;
  place-items: center;
  text-align: center;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes labelIn {
  from { opacity: .72; transform: translateY(10px) rotate(calc((var(--i) - 1) * -2deg)); }
}

@keyframes popIn {
  from { opacity: .58; transform: translateY(12px) scale(.97); }
}

@keyframes driveIn {
  from { opacity: .72; transform: translateX(-70px); }
}

@keyframes install {
  from { opacity: .72; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes cargoDrop {
  from { opacity: .58; transform: translateY(-48px); }
}

@keyframes orbit {
  to { transform: rotate(360deg); }
}

@keyframes cardFan {
  from { opacity: .66; transform: translateY(22px) rotate(0deg); }
}

@keyframes signalPulse {
  0%, 100% { opacity: .58; transform: scaleX(.98); }
  50% { opacity: 1; transform: scaleX(1.02); }
}

@media (max-width: 1100px) {
  body {
    overflow: auto;
  }

  .slide {
    min-height: auto;
    padding-bottom: 96px;
  }

  .slide-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .visual-stage {
    min-height: 420px;
  }

  .scene-caption {
    bottom: 70px;
    left: 34px;
    right: 34px;
  }
}

@media (max-width: 760px) {
  h1 {
    font-size: 40px;
  }

  .thesis {
    font-size: 20px;
  }

  .visual-stage {
    min-height: 330px;
  }

  .mascot-wrap {
    height: 86px;
    width: 104px;
  }

  .deck-nav {
    left: 18px;
    right: 18px;
  }

  .progress-wrap {
    flex: 1;
    width: auto;
  }
}