:root {
  --stage-bg: #101211;
  --slide-bg: #101211;
  --ink: #151716;
  --paper: #f2eadc;
  --paper-soft: #fbf7ee;
  --paper-deep: #dfd3c0;
  --red: #e2384a;
  --white: #f8f7f2;
  --muted: #656861;
  --line: rgba(21, 23, 22, .2);
  --green: #1f7458;
  --serif: "Noto Serif SC", serif;
  --sans: "Noto Sans SC", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--stage-bg); }
body { color: var(--white); font-family: var(--sans); }
a { color: inherit; }
button { font: inherit; }
img, svg, video, canvas { max-width: 100%; max-height: 100%; }

.deck-viewport { position: fixed; inset: 0; overflow: hidden; background: var(--stage-bg); }
.deck-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  transform-origin: 0 0;
  background: var(--slide-bg);
}
.slide {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  padding: 44px 70px 52px;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(34px);
  background: var(--slide-bg);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.7,.2,1);
}
.slide.active { visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(0); z-index: 1; }

.chrome {
  height: 48px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(248,247,242,.18);
  color: #d7d5cf;
  font: 600 17px/1 var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.paper {
  position: relative;
  height: 870px;
  margin-top: 35px;
  padding: 42px 54px 40px;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border-radius: 40px;
  box-shadow: 18px 18px 0 var(--red);
}
.paper::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -160px;
  width: 310px;
  height: 310px;
  border: 2px solid rgba(21,23,22,.12);
  border-radius: 50%;
  pointer-events: none;
}
.paper.dark { color: var(--white); background: #191c1a; border: 1px solid rgba(248,247,242,.12); }

.eyebrow { margin: 0 0 10px; color: var(--red); font: 600 17px/1.25 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); }
h2 { max-width: 1540px; margin-bottom: 10px; font-size: 56px; line-height: 1.16; letter-spacing: -.035em; }
h3 { margin-bottom: 8px; font-size: 26px; line-height: 1.3; }
.lede { max-width: 1560px; margin-bottom: 24px; color: #4e514d; font-size: 23px; line-height: 1.5; }
.dark .lede { color: #c1c3bd; }
.caption { font: 500 15px/1.45 var(--mono); letter-spacing: .03em; }
.muted { color: var(--muted); }
.red { color: var(--red); }
.quote { font-family: var(--serif); font-size: 34px; line-height: 1.45; font-weight: 800; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.card { padding: 22px 24px; border: 1px solid var(--line); background: rgba(255,255,255,.22); }
.card.paper-card { background: var(--paper-soft); }
.card.red-card { color: var(--white); border-color: var(--red); background: var(--red); }
.card.black-card { color: var(--white); border-color: var(--ink); background: var(--ink); }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card-index { display: block; margin-bottom: 16px; color: var(--red); font: 600 14px/1 var(--mono); letter-spacing: .11em; }
.red-card .card-index, .black-card .card-index { color: var(--paper); }
.pill { display: inline-flex; padding: 6px 11px; border: 1px solid currentColor; border-radius: 99px; font: 500 14px/1 var(--mono); }
.tag-row { display: flex; flex-wrap: wrap; gap: 9px; }
.band { display: flex; align-items: center; gap: 24px; padding: 20px 24px; color: var(--white); background: var(--ink); }
.band.red-band { background: var(--red); }
.band .label { min-width: 150px; color: var(--paper-deep); font: 600 15px/1.2 var(--mono); letter-spacing: .1em; }
.band strong { font-size: 25px; line-height: 1.35; }
.link-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; color: var(--white); text-decoration: none; background: var(--ink); border-left: 8px solid var(--red); }
.link-card strong { font-size: 22px; }
.link-card span { color: #c0c2bd; font: 500 15px/1.3 var(--mono); }

.cover .paper { height: 560px; margin-top: 74px; padding: 70px 78px; display: flex; flex-direction: column; justify-content: center; }
.cover h1 { position: relative; z-index: 2; max-width: 1100px; margin-bottom: 30px; font-size: 80px; line-height: 1.16; letter-spacing: -.045em; }
.cover .subtitle { position: relative; z-index: 2; margin: 0; color: var(--red); font-size: 29px; font-weight: 800; }
.cover .socrates-bust { position: absolute; right: 68px; bottom: -76px; width: 510px; height: auto; max-height: none; z-index: 1; object-fit: contain; pointer-events: none; filter: drop-shadow(12px 14px 0 rgba(20,22,21,.06)); }
.cover-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 150px; font-weight: 700; }
.cover-footer .timing { color: #bbbdb8; text-align: right; font: 500 17px/1.45 var(--mono); letter-spacing: .05em; }

.problem-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.problem-card { min-height: 310px; padding: 26px 24px; border-top: 7px solid var(--red); background: var(--paper-soft); }
.problem-card .num { color: var(--red); font: 600 15px/1 var(--mono); }
.problem-card h3 { margin: 26px 0 12px; font-size: 29px; }
.problem-card p { margin: 0; color: #565953; font-size: 20px; line-height: 1.5; }
.problem-closer { margin-top: 24px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 18px; }
.problem-closer .quote-box { padding: 22px 26px; color: white; background: var(--red); font: 800 31px/1.35 var(--serif); }
.problem-closer .answer-box { padding: 20px 24px; border: 1px solid var(--line); font-size: 21px; line-height: 1.5; }

.system-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin-top: 26px; }
.system-card { min-height: 335px; padding: 28px 25px; border: 1px solid var(--line); background: var(--paper-soft); }
.system-card .symbol { color: var(--red); font: 700 54px/1 var(--mono); }
.system-card h3 { margin: 34px 0 14px; font-size: 29px; }
.system-card p { color: #595c56; font-size: 20px; line-height: 1.5; }
.core-question-panel { display: grid; grid-template-columns: 190px 1.55fr 1fr 1fr; margin-top: 24px; color: var(--white); background: var(--red); }
.core-question-label { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 18px 20px; background: var(--ink); }
.core-question-label span, .core-question-item > span { color: var(--paper-deep); font: 600 13px/1.2 var(--mono); letter-spacing: .1em; }
.core-question-label strong { font-size: 20px; line-height: 1.3; }
.core-question-item { min-width: 0; padding: 18px 20px; border-left: 1px solid rgba(255,255,255,.28); }
.core-question-item p { margin: 10px 0 0; font-size: 18px; line-height: 1.42; }
.core-question-item p strong { font-weight: 900; }

.discover-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; }
.work-chain { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.work-step { position: relative; min-height: 190px; padding: 22px 18px; border: 1px solid var(--line); background: var(--paper-soft); }
.work-step:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 46%; z-index: 2; color: var(--red); font: 700 23px/1 var(--mono); }
.work-step span { color: var(--red); font: 600 13px/1 var(--mono); }
.work-step strong { display: block; margin: 20px 0 9px; font-size: 23px; }
.work-step p { margin: 0; color: #5b5e58; font-size: 17px; line-height: 1.45; }
.decision-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.decision-item { padding: 18px 18px; color: white; background: var(--ink); border-left: 6px solid var(--red); }
.decision-item strong { display: block; margin-bottom: 5px; font-size: 21px; }
.decision-item span { color: #c4c5c0; font-size: 16px; line-height: 1.4; }

.prompt-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; }
.prompt-stack { display: flex; flex-direction: column; gap: 14px; }
.prompt-box { padding: 26px 28px; color: #f3ecdf; background: var(--ink); border-left: 8px solid var(--red); font: 600 21px/1.55 var(--mono); white-space: pre-wrap; }
.prompt-box.secondary { color: var(--ink); background: var(--paper-soft); border: 1px solid var(--line); border-left: 8px solid var(--red); }
.prompt-tip { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 18px; border: 1px solid var(--line); background: var(--paper-soft); }
.prompt-tip .num { color: var(--red); font: 700 24px/1 var(--mono); }
.prompt-tip strong { display: block; margin-bottom: 5px; font-size: 21px; }
.prompt-tip p { margin: 0; color: #5b5e58; font-size: 17px; line-height: 1.4; }

.recipe-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 26px; }
.chef-card { min-height: 500px; padding: 34px; color: white; background: var(--ink); display: flex; flex-direction: column; justify-content: space-between; }
.chef-card .icon { color: var(--red); font: 700 80px/1 var(--mono); }
.chef-card .quote { font-size: 37px; }
.chef-card p { margin: 0; color: #bfc1bc; font-size: 19px; line-height: 1.5; }
.recipe-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.recipe-card { min-height: 240px; padding: 24px; border: 1px solid var(--line); background: var(--paper-soft); }
.recipe-card .num { color: var(--red); font: 700 35px/1 var(--mono); }
.recipe-card h3 { margin: 24px 0 9px; }
.recipe-card p { margin: 0; color: #5b5e58; font-size: 18px; line-height: 1.45; }

.anatomy-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 26px; }
.file-tree { margin: 0; padding: 26px; color: #ece5d8; background: var(--ink); font: 500 18px/1.62 var(--mono); }
.file-tree .accent { color: #ff6675; }
.anatomy-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.anatomy-card { padding: 22px; border-top: 6px solid var(--red); background: var(--paper-soft); }
.anatomy-card strong { display: block; margin-bottom: 8px; font-size: 24px; }
.anatomy-card p { margin: 0; color: #5b5e58; font-size: 18px; line-height: 1.45; }

.material-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; }
.evidence-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; }
.evidence-card { min-height: 170px; padding: 20px; border: 1px solid var(--line); background: var(--paper-soft); }
.evidence-card strong { display: block; margin-bottom: 8px; font-size: 22px; }
.evidence-card p { margin: 0; color: #5b5e58; font-size: 17px; line-height: 1.45; }
.format-stack { display: flex; flex-direction: column; gap: 14px; }
.format-card { padding: 22px; color: white; background: var(--ink); }
.format-card.red-card { background: var(--red); }
.format-card strong { display: block; margin-bottom: 7px; font-size: 22px; }
.format-card p { margin: 0; color: #c5c7c2; font-size: 17px; line-height: 1.45; }
.format-card.red-card p { color: white; }

.qianli-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 26px; }
.case-copy { display: flex; flex-direction: column; gap: 14px; }
.case-copy .card { padding: 20px; }
.case-copy .card h3 { font-size: 23px; }
.case-copy .card p { margin: 0; color: #565953; font-size: 17px; line-height: 1.45; }
.case-copy .black-card p, .case-copy .red-card p { color: white; }
.qianli-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; height: 565px; }
.qianli-shot { position: relative; overflow: hidden; border: 1px solid var(--line); background: #e7ddcd; }
.qianli-shot img { width: 100%; height: 100%; padding: 8px; object-fit: contain; object-position: center; background: white; }
.qianli-shot span { position: absolute; left: 10px; bottom: 10px; padding: 5px 8px; color: white; background: var(--ink); font: 600 12px/1 var(--mono); }

.build-track { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.build-step { position: relative; min-height: 320px; padding: 24px 20px; border: 1px solid var(--line); background: var(--paper-soft); }
.build-step:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 48%; z-index: 2; color: var(--red); font: 700 22px/1 var(--mono); }
.build-step .num { color: var(--red); font: 700 31px/1 var(--mono); }
.build-step h3 { margin: 30px 0 10px; }
.build-step p { margin: 0; color: #595c56; font-size: 18px; line-height: 1.48; }

.form-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.form-card { min-height: 380px; padding: 26px 22px; border: 1px solid var(--line); background: var(--paper-soft); }
.form-card.featured { color: white; background: var(--ink); border-color: var(--ink); }
.form-card .num { color: var(--red); font: 700 36px/1 var(--mono); }
.form-card h3 { margin: 30px 0 10px; font-size: 29px; }
.form-card p { color: #595c56; font-size: 18px; line-height: 1.48; }
.form-card.featured p { color: #c2c4bf; }

.team-path { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.team-step { min-height: 350px; padding: 26px 22px; border: 1px solid rgba(248,247,242,.17); background: #222623; }
.team-step .num { color: var(--red); font: 700 36px/1 var(--mono); }
.team-step h3 { margin: 30px 0 11px; color: white; font-size: 28px; }
.team-step p { margin: 0; color: #bec0bb; font-size: 18px; line-height: 1.5; }

.horizon-slide h2 { max-width: 1500px; font-size: 64px; }
.question-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; margin-top: 34px; }
.question-card { min-height: 245px; padding: 26px 22px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(248,247,242,.18); background: #232724; }
.question-card span { color: var(--red); font: 700 76px/1 var(--mono); }
.question-card strong { color: white; font-size: 27px; }
.horizon-line { margin-top: 28px; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 30px; color: white; background: var(--red); }
.horizon-line span { font: 600 18px/1.3 var(--mono); letter-spacing: .06em; }
.horizon-line strong { font-family: var(--serif); font-size: 34px; }

.final-slide .paper { display: grid; grid-template-columns: 1.25fr .75fr; gap: 50px; align-items: center; }
.final-slide h2 { max-width: 1000px; font-size: 66px; }
.final-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 28px; }
.final-action { padding: 18px; border: 1px solid var(--line); background: var(--paper-soft); }
.final-action span { color: var(--red); font: 700 23px/1 var(--mono); }
.final-action strong { display: block; margin-top: 12px; font-size: 20px; }
.qr-wrap { align-self: center; justify-self: center; width: 430px; text-align: center; }
.qr-wrap img { width: 360px; height: 360px; object-fit: cover; object-position: center 61%; border: 14px solid white; box-shadow: 12px 12px 0 var(--red); }
.qr-wrap p { margin: 26px 0 0; font-size: 22px; font-weight: 800; }

.deck-controls { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 10px; padding: 7px 10px; color: white; background: rgba(16,18,17,.82); border: 1px solid rgba(255,255,255,.16); border-radius: 99px; backdrop-filter: blur(10px); opacity: .12; transition: opacity .2s ease; }
.deck-controls:hover { opacity: 1; }
.deck-controls button { width: 38px; height: 34px; color: white; background: transparent; border: 0; cursor: pointer; }
.counter { min-width: 78px; text-align: center; font: 500 13px/1 var(--mono); }
.progress { position: fixed; left: 0; bottom: 0; height: 7px; background: var(--red); z-index: 1001; transition: width .3s ease; }
.notes-panel { position: fixed; right: 24px; bottom: 78px; z-index: 1200; width: min(560px, calc(100vw - 48px)); max-height: 42vh; padding: 22px; overflow: auto; color: #222; background: rgba(255,255,255,.96); border-left: 7px solid var(--red); box-shadow: 0 18px 60px rgba(0,0,0,.24); font-size: 17px; line-height: 1.65; opacity: 0; pointer-events: none; transform: translateY(12px); transition: .2s ease; }
.notes-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.toast { position: fixed; left: 50%; top: 24px; z-index: 1300; transform: translate(-50%,-20px); padding: 12px 18px; color: white; background: var(--ink); border-left: 5px solid var(--red); opacity: 0; transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.edit-hotzone { position: fixed; right: 0; top: 0; width: 18px; height: 100%; z-index: 1500; }
.edit-badge { position: fixed; right: 20px; top: 20px; z-index: 1400; padding: 8px 11px; color: white; background: var(--red); font: 600 12px/1 var(--mono); opacity: 0; pointer-events: none; }
body.editing .edit-badge { opacity: 1; }
body.editing [data-edit] { outline: 2px dashed rgba(226,56,74,.65); outline-offset: 5px; }

.slide.active .paper > * { animation: rise-in 520ms both cubic-bezier(.2,.7,.2,1); }
.slide.active .paper > *:nth-child(2) { animation-delay: 60ms; }
.slide.active .paper > *:nth-child(3) { animation-delay: 110ms; }
.slide.active .paper > *:nth-child(4) { animation-delay: 155ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .2s !important; }
}
@media print {
  html, body { width: 1920px; height: auto; overflow: visible; background: #fff; }
  .deck-viewport { position: static; overflow: visible; background: #fff; }
  .deck-stage { position: static; width: auto; height: auto; transform: none !important; background: none; }
  .slide { position: relative; display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; width: 1920px; height: 1080px; break-after: page; }
  .slide:last-child { break-after: auto; }
  .deck-controls, .progress, .notes-panel, .edit-hotzone, .edit-badge, .toast { display: none !important; }
}