:root {
  --ink: #14213f;
  --ink2: #2b3c60;
  --paper: #f7f9fc;
  --muted: #647491;
  --line: rgba(20,33,63,.14);
  --lime: #a8e45d;
  --limeSoft: #f3fae9;
  --coral: #f2775d;
  --coralSoft: #fff3ee;
  --sky: #79c9f5;
  --skySoft: #eff8fe;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #0b1328;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
.deck { position: relative; width: 100%; height: 100%; overflow: hidden; }

.slide {
  position: absolute;
  inset: 0;
  padding: clamp(34px,5vw,78px) clamp(42px,7vw,116px) clamp(52px,6vw,86px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(18px,2.6vh,34px);
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transform: translateX(3%);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.75,.2,1), visibility .45s;
  overflow: hidden;
}
.slide.active { opacity: 1; visibility: visible; transform: none; z-index: 2; }
.slide.before { transform: translateX(-3%); }
.dark { background: var(--ink); color: #fff; }
.sky { background: var(--skySoft); }
.lime { background: var(--limeSoft); }
.coral { background: var(--coralSoft); }

.eyebrow { display: flex; align-items: center; gap: 12px; font-size: clamp(12px,1vw,16px); font-weight: 780; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; width: 28px; height: 4px; border-radius: 4px; background: var(--coral); }
.dark .eyebrow { color: #b7c4dd; }
.dark .eyebrow::before { background: var(--lime); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(50px,7.2vw,112px); line-height: .98; letter-spacing: -.055em; font-weight: 830; }
h2 { font-size: clamp(38px,5.2vw,82px); line-height: 1.08; letter-spacing: -.045em; font-weight: 830; }
h3 { font-size: clamp(23px,2.4vw,40px); line-height: 1.18; letter-spacing: -.025em; }
.lead { font-size: clamp(19px,1.9vw,30px); line-height: 1.55; color: var(--ink2); }
.dark .lead { color: #d6dff1; }
.accent { color: var(--coral); }
.limeText { color: var(--lime); }
.content { align-self: center; position: relative; z-index: 1; min-height: 0; }
.measure { max-width: 1120px; }
.center { text-align: center; margin-inline: auto; }
.spaced { margin-top: clamp(18px,2.8vh,30px); }
.subline { margin-top: clamp(20px,3vh,34px); max-width: 880px; }
.compactTop { margin-top: clamp(26px,4vh,44px); }
.rule { width: 58px; height: 2px; background: var(--coral); margin: 24px 0; }
.dark .rule { background: var(--lime); }
.footer { display: flex; justify-content: space-between; align-items: end; gap: 20px; font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.dark .footer { color: #8f9db9; }
.page { font-variant-numeric: tabular-nums; }

.dots { position: absolute; right: -3vw; top: 5%; width: 35vw; height: 35vw; border-radius: 50%; background-image: radial-gradient(circle,rgba(121,201,245,.46) 0 3px,transparent 3.5px); background-size: 31px 31px; transform: rotate(-8deg); opacity: .85; }
.orbit { position: absolute; width: 38vw; height: 38vw; border: 2px solid rgba(168,228,93,.28); border-radius: 50%; right: -12vw; bottom: -18vw; }
.orbit::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--coral); left: 12%; top: 17%; box-shadow: 0 0 0 9px rgba(242,119,93,.14); }
.divider { isolation: isolate; }
.divider .eyebrow { position: relative; z-index: 2; }
.partMark { position: absolute; right: clamp(40px,7vw,116px); top: 50%; transform: translateY(-54%); font-size: clamp(110px,18vw,280px); line-height: .8; font-weight: 900; letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 2px rgba(121,201,245,.18); white-space: nowrap; z-index: 0; }
.dividerContent { max-width: 850px; z-index: 2; }
.dividerContent h2 { font-size: clamp(48px,6.4vw,100px); }
.dividerContent p { margin-top: clamp(24px,4vh,42px); max-width: 720px; color: #cbd6e9; font-size: clamp(18px,1.65vw,26px); line-height: 1.55; }
.partLine { width: 76px; height: 5px; margin-bottom: clamp(24px,4vh,44px); border-radius: 5px; background: var(--lime); }
.dividerOrbit { position: absolute; right: -9vw; bottom: -18vw; width: 38vw; height: 38vw; border: 2px solid rgba(168,228,93,.18); border-radius: 50%; z-index: 1; }
.dividerOrbit::before { content: ""; position: absolute; left: 15%; top: 12%; width: 16px; height: 16px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 8px rgba(242,119,93,.12); }
.two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(24px,5vw,86px); align-items: center; }
.two > *, .planLayers > *, .languageHome > * { min-width: 0; }
.wideGap { gap: clamp(40px,7vw,120px); }

.portraitSpread { width: 100%; display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: clamp(22px,3vh,36px) clamp(30px,6vw,100px); align-items: center; max-width: 1180px; }
.bigWord { font-size: clamp(56px,7vw,104px); line-height: .88; font-weight: 900; letter-spacing: -.06em; color: var(--ink); }
.bigWord.coralWord { color: var(--coral); }
.bigWord.skyWord { color: #2e93cb; }
.portraitSpread p { min-width: 0; overflow-wrap: anywhere; font-size: clamp(19px,1.8vw,28px); color: var(--ink2); line-height: 1.5; border-bottom: 1px solid var(--line); padding-bottom: clamp(18px,2.4vh,28px); }
.portraitSpread p:last-child { border-bottom: 0; }

.ghostNum { font-size: clamp(84px,11vw,168px); line-height: .72; font-weight: 900; letter-spacing: -.08em; color: rgba(20,33,63,.08); margin-bottom: 28px; }
.storyLine { display: grid; grid-template-columns: 1fr; gap: 22px; padding-left: clamp(22px,3vw,44px); border-left: 2px solid rgba(242,119,93,.4); }
.storyLine p { font-size: clamp(18px,1.55vw,25px); line-height: 1.55; color: var(--muted); }
.storyLine .strong { color: var(--ink); font-weight: 680; }
.thread { width: 46px; height: 4px; border-radius: 4px; background: var(--coral); }

.growthSentence { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(15px,2vw,30px); margin-top: clamp(34px,6vh,70px); }
.growthSentence span { font-size: clamp(34px,4.6vw,72px); line-height: 1.06; font-weight: 830; letter-spacing: -.04em; }
.growthSentence i { width: clamp(24px,4vw,64px); height: 2px; background: rgba(255,255,255,.24); }

.wordField { position: relative; min-height: min(50vh,430px); }
.wordField span { position: absolute; font-weight: 850; letter-spacing: -.04em; }
.w1 { left: 4%; top: 10%; font-size: clamp(42px,5vw,78px); color: var(--coral); }
.w2 { right: 7%; top: 0; font-size: clamp(30px,3.5vw,56px); }
.w3 { left: 37%; top: 42%; font-size: clamp(48px,6vw,96px); }
.w4 { right: 0; bottom: 4%; font-size: clamp(30px,3.6vw,58px); color: #308fbe; }
.w5 { left: 0; bottom: 5%; font-size: clamp(34px,4.3vw,68px); }
.w6 { right: 8%; top: 33%; font-size: clamp(24px,2.8vw,46px); color: var(--muted); }

.subject { align-items: center; }
.evidenceList { display: grid; gap: clamp(18px,2.5vh,30px); }
.evidenceList div { padding: 0 0 clamp(16px,2.2vh,24px) 22px; border-left: 4px solid var(--coral); }
.evidenceList strong { display: block; font-size: clamp(22px,2vw,32px); margin-bottom: 7px; }
.evidenceList span { font-size: clamp(16px,1.35vw,21px); line-height: 1.5; color: var(--muted); }
.mathExample { padding: clamp(28px,4vw,52px); border: 1px solid var(--line); border-radius: 30px; background: rgba(255,255,255,.72); }
.tenDots { font-size: clamp(24px,3vw,46px); line-height: 1.65; letter-spacing: .2em; color: var(--coral); white-space: nowrap; margin-bottom: 24px; }
.mathExample p { color: var(--ink2); font-size: clamp(17px,1.55vw,24px); line-height: 1.55; }

.questionPair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,64px); margin-top: clamp(34px,5vh,58px); }
.questionPair > div { padding-top: 20px; border-top: 4px solid var(--coral); }
.questionPair small { display: block; margin-bottom: 14px; color: var(--coral); font-weight: 850; letter-spacing: .12em; }
.questionPair h2 { font-size: clamp(34px,4.3vw,68px); }
.darkLines { display: grid; gap: 0; }
.darkLines p { padding: clamp(16px,2.2vh,25px) 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: clamp(18px,1.55vw,25px); color: #d9e2f2; }
.darkLines p::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 15px; background: var(--lime); box-shadow: 0 0 0 7px rgba(168,228,93,.1); }

.processLine { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: center; gap: clamp(24px,3vw,48px); }
.processLine > div { min-width: 0; min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(22px,2.7vw,38px) 0; border-top: 2px solid var(--line); }
.processLine small { color: var(--coral); font-weight: 850; letter-spacing: .12em; }
.processLine strong { font-size: clamp(30px,3vw,48px); }
.processLine p { color: var(--muted); font-size: clamp(15px,1.2vw,19px); line-height: 1.5; }
.processLine .link { display: none; }

.planLayers { display: grid; grid-template-columns: minmax(0,.84fr) minmax(0,1.16fr); gap: clamp(28px,5vw,80px); align-items: center; }
.planIntro h2 { font-size: clamp(35px,4.5vw,70px); }
.layers { display: grid; gap: 8px; }
.layers div { min-width: 0; display: grid; grid-template-columns: 125px minmax(0,1fr); gap: 18px; align-items: center; min-height: 74px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.layers div:nth-child(1) { width: 72%; }
.layers div:nth-child(2) { width: 82%; }
.layers div:nth-child(3) { width: 91%; }
.layers div:nth-child(4) { width: 100%; background: rgba(255,255,255,.7); border-radius: 18px; border-bottom: 0; }
.layers b { font-size: clamp(17px,1.45vw,23px); }
.layers span { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: clamp(14px,1.14vw,18px); line-height: 1.4; }

.timeEvidence { display: grid; }
.timeEvidence p { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 20px; padding: clamp(16px,2.2vh,24px) 0; border-bottom: 1px solid var(--line); }
.timeEvidence strong { font-size: clamp(21px,1.8vw,29px); color: var(--coral); }
.timeEvidence span { color: var(--ink2); font-size: clamp(16px,1.3vw,20px); line-height: 1.45; }
.homeExamples { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(34px,5vh,54px); }
.homeExamples span { padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.65); color: var(--ink2); font-size: clamp(14px,1.18vw,18px); }

.familyFlow { display: grid; gap: 22px; }
.familyFlow div { display: grid; grid-template-columns: 120px 1fr; gap: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.familyFlow strong { font-size: clamp(22px,2vw,32px); color: var(--coral); }
.familyFlow p { min-width: 0; overflow-wrap: anywhere; font-size: clamp(16px,1.3vw,20px); line-height: 1.5; color: var(--muted); }
.languageHome { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(38px,7vw,110px); align-items: center; }
.languageSide { display: grid; gap: 0; }
.languageSide div { padding: clamp(16px,2.4vh,26px) 0; border-bottom: 1px solid var(--line); }
.languageSide small { color: var(--coral); font-size: 14px; font-weight: 850; letter-spacing: .12em; }
.languageSide p { min-width: 0; overflow-wrap: anywhere; margin-top: 8px; font-size: clamp(17px,1.4vw,22px); line-height: 1.5; color: var(--ink2); }
.closingLine { margin-top: clamp(34px,5vh,56px); max-width: 910px; padding-left: 22px; border-left: 4px solid var(--lime); color: #d7e0ef; font-size: clamp(17px,1.5vw,24px); line-height: 1.55; }

.notes { display: none; }
.notesPanel { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px); width: min(820px,calc(100vw - 170px)); padding: 18px 22px; border-radius: 18px; background: rgba(9,16,34,.93); color: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.3); z-index: 30; opacity: 0; visibility: hidden; transition: .22s; backdrop-filter: blur(12px); }
.notesPanel.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.notesLabel { font-size: 11px; letter-spacing: .14em; color: var(--lime); font-weight: 850; margin-bottom: 8px; }
.notesText { font-size: 16px; line-height: 1.55; color: #e1e8f5; }
.controls { position: fixed; right: 18px; bottom: 16px; z-index: 40; display: flex; gap: 8px; opacity: .28; transition: .2s; }
.controls:hover, .controls:focus-within { opacity: 1; }
.control { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: rgba(9,16,34,.74); color: #fff; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(8px); }
.control:hover { background: var(--coral); border-color: var(--coral); }
.progress { position: fixed; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.12); z-index: 20; }
.progress div { height: 100%; background: var(--coral); transition: width .35s; }
.hint { position: fixed; left: 18px; bottom: 16px; z-index: 20; color: rgba(255,255,255,.58); font-size: 12px; background: rgba(9,16,34,.58); padding: 7px 11px; border-radius: 999px; backdrop-filter: blur(8px); transition: .4s; }
.hint.hide { opacity: 0; pointer-events: none; }

@media (max-width: 800px) {
  .slide { padding: 30px 24px 66px; overflow-y: auto; }
  .partMark { right: 18px; top: 38%; font-size: 92px; }
  .dividerContent h2 { font-size: 48px; }
  .two, .portraitSpread, .questionPair, .planLayers, .languageHome { grid-template-columns: 1fr; }
  .wordField { min-height: 320px; }
  .processLine { grid-template-columns: 1fr; gap: 8px; }
  .processLine > div { min-height: auto; gap: 12px; padding: 12px 0; }
  .processLine .link { display: none; }
  .growthSentence { display: grid; }
  .growthSentence i { width: 2px; height: 18px; margin-left: 14px; }
  .layers div, .layers div:nth-child(n) { width: 100%; grid-template-columns: 110px 1fr; }
  .footer { display: none; }
  .hint { display: none; }
  .notesPanel { width: calc(100vw - 32px); bottom: 70px; }
}

@media (prefers-reduced-motion: reduce) { .slide, .progress div, .notesPanel { transition: none; } }
@media print {
  html, body { overflow: visible; background: #fff; }
  .deck { height: auto; overflow: visible; }
  .slide { position: relative; visibility: visible; opacity: 1; transform: none !important; width: 100%; height: 56.25vw; page-break-after: always; }
  .controls, .progress, .hint, .notesPanel { display: none; }
}