:root {
  --ink: #20303a;
  --muted: #61717b;
  --paper: #fff8ea;
  --cream: #f6ead4;
  --brick: #b64b36;
  --teal: #167a7f;
  --gold: #c8932f;
  --green: #497d45;
  --line: #dfd0b9;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: #ece2d1;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 18px;
  background: #fffaf1;
  border-right: 1px solid var(--line);
  overflow: auto;
}
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.brand img { width: 96px; height: 39px; object-fit: contain; }
.brand strong { color: var(--brick); }
#toc { display: grid; gap: 8px; }
#toc a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  padding: 9px 10px;
  border-radius: 8px;
}
#toc a:hover { background: #f0e1c8; }
.hint { margin-top: 20px; font-size: 13px; color: var(--muted); line-height: 1.5; }

main {
  padding: 32px;
  display: grid;
  gap: 36px;
}
.slide-wrap { display: grid; gap: 10px; }
.slide-label { font-weight: 900; color: var(--muted); }
.slide {
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(100%, 1180px);
  overflow: hidden;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 18px 50px rgba(54, 40, 20, .16);
  border: 1px solid rgba(92, 69, 32, .14);
}
.bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,248,234,.96) 0%, rgba(255,248,234,.90) 44%, rgba(255,248,234,.20) 100%);
}
.veil.right {
  background: linear-gradient(90deg, rgba(255,248,234,.16) 0%, rgba(255,248,234,.86) 52%, rgba(255,248,234,.96) 100%);
}
.brandmark {
  position: absolute;
  top: 32px;
  left: 46px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 900;
  color: var(--brick);
}
.brandmark img { width: 92px; height: 37px; object-fit: contain; }
.content {
  position: absolute;
  left: 62px;
  top: 105px;
  width: 520px;
}
.content.right {
  left: auto;
  right: 70px;
}
.eyebrow { color: var(--teal); font-weight: 900; margin: 0 0 12px; font-size: 24px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(42px, 5vw, 74px); line-height: 1.05; letter-spacing: 0; }
h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.08; letter-spacing: 0; }
.subtitle { margin-top: 24px; color: var(--muted); font-size: 26px; line-height: 1.42; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.chip {
  padding: 11px 18px;
  border-radius: 8px;
  background: var(--teal);
  color: white;
  font-weight: 900;
}
.chip.brick { background: var(--brick); }
.chip.gold { background: var(--gold); }
.task-card {
  position: absolute;
  left: 70px;
  bottom: 58px;
  width: 720px;
  padding: 18px 24px;
  border-radius: 8px;
  background: #fff7e5;
  border: 2px solid var(--gold);
  font-size: 28px;
  font-weight: 900;
  color: #6c4308;
}
.bullets { display: grid; gap: 18px; margin-top: 30px; font-size: 25px; }
.bullets div { display: grid; grid-template-columns: 18px 1fr; gap: 14px; align-items: start; }
.dot { width: 14px; height: 14px; margin-top: 9px; border-radius: 50%; background: var(--teal); }
.dot.gold { background: var(--gold); }
.photo-strip {
  position: absolute;
  right: 70px;
  top: 110px;
  width: 420px;
  display: grid;
  gap: 16px;
}
.photo-strip img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 8px;
  border: 5px solid white;
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
}
.video-frame {
  position: absolute;
  left: 100px;
  top: 135px;
  width: 520px;
  height: 330px;
  border-radius: 8px;
  background: #173039;
  display: grid;
  place-items: center;
  color: white;
  border: 1px solid rgba(255,255,255,.22);
}
.play {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--brick);
  display: grid;
  place-items: center;
  color: white;
  font-size: 54px;
  padding-left: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}
.qr {
  position: absolute;
  right: 92px;
  bottom: 80px;
  width: 126px;
  height: 126px;
  background: white;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--teal);
}
.step-grid {
  position: absolute;
  left: 76px;
  right: 76px;
  top: 255px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.step {
  min-height: 235px;
  padding: 28px;
  background: rgba(255,255,255,.90);
  border-radius: 8px;
  border: 3px solid var(--teal);
}
.step:nth-child(2) { border-color: var(--brick); }
.step:nth-child(3) { border-color: var(--green); }
.step b { display: block; font-size: 30px; margin-bottom: 16px; }
.step p { color: var(--muted); font-size: 23px; line-height: 1.45; }

@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }
  .rail { position: relative; height: auto; }
  main { padding: 18px; }
}