:root{color-scheme:dark;--ink:#10171b;--paper:#eee7d5;--gold:#d5ac69;--line:rgba(238,231,213,.3)}*{box-sizing:border-box}html{background:var(--ink);scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:"STSong","Songti SC","Noto Serif SC",serif;overflow-x:hidden}.skip-link{position:fixed;left:1rem;top:-4rem;z-index:100;padding:.7rem 1rem;background:var(--paper);color:var(--ink)}.skip-link:focus{top:1rem}.story-nav{position:fixed;z-index:20;inset:0 0 auto;height:72px;display:flex;align-items:center;gap:2rem;padding:0 clamp(1.1rem,4vw,4rem);background:linear-gradient(180deg,rgba(8,13,16,.8),transparent);font-family:system-ui,sans-serif}.wordmark{color:var(--paper);text-decoration:none;font-weight:700;letter-spacing:.1em}.wordmark span{color:var(--gold)}.progress{height:1px;flex:1;max-width:420px;background:var(--line)}.progress i{display:block;width:0;height:2px;background:var(--gold)}.nav-links{display:flex;align-items:center;gap:1.1rem;margin-left:auto}.nav-links a,.nav-links button{color:var(--paper);opacity:.74;font:500 12px system-ui,sans-serif;letter-spacing:.08em;text-decoration:none;background:none;border:0;cursor:pointer}.nav-links a:hover,.nav-links button:hover{opacity:1}.chapter{position:relative;min-height:125svh;overflow:hidden;background:#172126}.scene,.epilogue-scene{position:absolute;inset:0;margin:0;overflow:hidden}.scene img,.epilogue-scene img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;transform:scale(1.04);transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter 1s}.chapter.active .scene img{transform:scale(1.01)}.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,13,16,.78),rgba(8,13,16,.36) 30%,rgba(8,13,16,.08) 70%),linear-gradient(0deg,rgba(8,13,16,.78),transparent 45%);pointer-events:none}.narrative{position:absolute;z-index:2;left:clamp(1.3rem,8vw,8rem);bottom:clamp(4rem,13vh,10rem);max-width:min(580px,48vw);text-shadow:0 2px 18px rgba(0,0,0,.6);opacity:.25;transform:translateY(22px);transition:opacity .8s,transform .8s}.chapter.active .narrative{opacity:1;transform:none}.chapter-kicker{display:block;margin-bottom:1.4rem;color:var(--gold);font:500 12px/1.5 system-ui,sans-serif;letter-spacing:.2em}.narrative h1{white-space:nowrap;margin:0;font-size:clamp(5rem,12vw,11rem);font-weight:500;line-height:.85;letter-spacing:.08em}.narrative h2{margin:.1em 0 .55em;font-size:clamp(2rem,4.8vw,5rem);line-height:1.2;font-weight:500;letter-spacing:.04em}.narrative p{max-width:34em;margin:1.1rem 0;font-size:clamp(1rem,1.45vw,1.35rem);line-height:1.95;letter-spacing:.04em;color:rgba(245,239,222,.94)}.subtitle{margin:1.3rem 0 2.3rem!important;color:var(--gold)!important;font-size:clamp(1.3rem,2.5vw,2.3rem)!important;letter-spacing:.2em!important}.scroll-cue{display:inline-block;margin-top:2rem;color:var(--gold);font-size:13px;letter-spacing:.12em}.scroll-cue b{display:inline-block;margin-left:.7rem;animation:bob 1.4s infinite}.dialogue p{font-size:clamp(1.1rem,1.8vw,1.55rem)}.finale-copy{max-width:650px}.finale-copy p{font-size:clamp(1.2rem,2vw,1.8rem)}.finale-copy .question{margin-top:2.6rem;font-size:clamp(1.7rem,3.5vw,3.8rem);color:var(--paper)}.finale-copy .answer{font-size:clamp(3rem,7vw,7rem);line-height:1;font-family:"STKaiti","KaiTi","Songti SC",serif;color:var(--gold);margin-top:1.5rem}.epilogue{position:relative;min-height:120svh;overflow:hidden;background:#202d30}.epilogue-scene img{filter:saturate(.82);object-position:center}.epilogue-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,17,19,.88),rgba(10,17,19,.42) 52%,rgba(10,17,19,.16)),linear-gradient(0deg,rgba(10,17,19,.78),transparent 60%)}.epilogue-copy{position:absolute;z-index:2;left:clamp(1.3rem,8vw,8rem);bottom:clamp(3rem,10vh,8rem);max-width:min(700px,65vw);text-shadow:0 2px 18px rgba(0,0,0,.65)}.epilogue-copy>p{font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1.9}.epilogue-copy h2{font:500 clamp(4rem,9vw,9rem)/.8 "STKaiti","KaiTi","Songti SC",serif;letter-spacing:.08em;margin:2.7rem 0 1rem;color:var(--gold)}.product-note{color:var(--paper)!important;opacity:.82}.methods{display:flex;gap:0;flex-wrap:wrap;margin:2rem 0;border-top:1px solid var(--line);border-left:1px solid var(--line)}.methods span{padding:.8rem 1rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.9rem}.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.5rem}.actions a{padding:.85rem 1.1rem;color:var(--paper);border:1px solid rgba(238,231,213,.65);font:500 14px system-ui,sans-serif;text-decoration:none}.actions .primary{display:flex;justify-content:space-between;gap:2.5rem;background:var(--paper);color:var(--ink);border-color:var(--paper)}.risk{font:12px/1.7 system-ui,sans-serif!important;opacity:.62;margin-top:1.5rem!important}.chapter-indicator{position:fixed;z-index:20;right:clamp(1rem,3vw,3rem);bottom:2rem;color:rgba(238,231,213,.72);font:500 11px system-ui,sans-serif;letter-spacing:.14em;writing-mode:vertical-rl}.reduced-motion *{scroll-behavior:auto!important;animation-play-state:paused!important;transition:none!important}.reduced-motion .narrative{opacity:1;transform:none}@keyframes bob{50%{transform:translateY(7px)}}@media(max-width:800px){.story-nav{height:60px;gap:1rem}.progress{display:none}.nav-links{gap:.2rem}.nav-links button{display:none}.chapter{min-height:100svh}.shade{background:linear-gradient(0deg,rgba(8,13,16,.86),rgba(8,13,16,.08) 72%)}.narrative,.epilogue-copy{left:1.25rem;right:1.25rem;bottom:3.2rem;max-width:none}.narrative h1{font-size:22vw}.narrative h2{font-size:clamp(1.65rem,8.8vw,2.4rem);white-space:normal;overflow-wrap:anywhere}.narrative p{font-size:1rem;line-height:1.8}.chapter-indicator{display:none}.epilogue-copy h2{font-size:5.5rem}.methods{display:grid;grid-template-columns:1fr 1fr}.methods span{font-size:.78rem;padding:.7rem}}.site-footer{position:relative;z-index:3;display:flex;justify-content:space-between;gap:1rem;padding:1.2rem clamp(1.25rem,8vw,8rem);background:#10171b;color:rgba(238,231,213,.65);font:12px system-ui,sans-serif}.site-footer a{color:var(--gold);text-decoration:none}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.narrative{opacity:1;transform:none}.scene img{transform:none!important}}

/* 首屏标题定位：左上角、紧凑层级 */
.hero-copy {
  top: auto;
  bottom: clamp(4rem, 13vh, 10rem);
  max-width: min(760px, 70vw);
}
.hero-copy h1 {
  font-size: clamp(3.2rem, 8vw, 7rem);
  line-height: 1;
  margin-bottom: 1rem;
}
.hero-copy .chapter-kicker {
  margin-bottom: 1.6rem;
}
@media (max-width: 800px) {
  .hero-copy {
    top: auto;
    bottom: 3.2rem;
  }
  .hero-copy h1 {
    font-size: clamp(2.8rem, 16vw, 5rem);
    margin-bottom: .7rem;
  }
}

.hero-copy h1 { position: absolute; left: 0; bottom: calc(100% + clamp(3rem, 9vh, 7rem)); }
@media (max-width: 800px) { .hero-copy h1 { bottom: calc(100% + 2.5rem); } }
.scene img, .epilogue-scene img { user-select: none; -webkit-user-drag: none; }

/* 首屏标题独立定位，避免受正文底部布局影响 */
.hero-title {
  position: absolute;
  z-index: 3;
  top: clamp(5.5rem, 11vh, 9rem);
  left: clamp(1.3rem, 8vw, 8rem);
  margin: 0;
  color: var(--paper);
  font-size: clamp(3.2rem, 8vw, 7rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
*, *::before, *::after {
  user-select: none;
  -webkit-user-select: none;
}
img {
  pointer-events: none;
  -webkit-user-drag: none;
}
@media (max-width: 800px) {
  .hero-title {
    top: 4.5rem;
    left: 1.25rem;
    font-size: clamp(2.8rem, 16vw, 5rem);
  }
}

/* 移动端禁止横向拖动；普通章节标题允许换行 */
html, body { overflow-x: hidden; max-width: 100%; }
.chapter, .epilogue { max-width: 100vw; overflow-x: hidden; }
@media (max-width: 800px) {
  .narrative { overflow-wrap: anywhere; }
  .narrative h2 { white-space: normal; max-width: 100%; }
  .dialogue h2 { white-space: nowrap; font-size: clamp(1.35rem, 7.2vw, 2.2rem); letter-spacing: 0; }
}

/* 兼容移动浏览器：章节状态异常时也保持文案完整可见 */
.narrative,
.epilogue-copy {
  opacity: 1;
  transform: none;
}

/* 移动端沉浸式安全区适配 */
html, body {
  background: #10171b;
  min-height: 100%;
  min-height: 100dvh;
}
body {
  padding: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.story-nav {
  padding-top: env(safe-area-inset-top);
}
@media (max-width: 800px) {
  .chapter, .epilogue { min-height: 100dvh; }
  .site-footer { padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }
}