/* 匡衡凿壁故事舞台：暗室、书案与一束由观众移动的光。 */

#voyage .v-story-frame { position: relative; }
#voyage #story-film.is-story-stage { background: #070f12; }

/* ---------- 舞台与暗室 ---------- */
#voyage .v-story-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(ellipse at 44% 34%, #111c19, #070f12 68%),
    #070f12;
}
#voyage .v-story-scene:active { cursor: grabbing; }
#voyage .v-story-scene:focus-visible { outline: 1px solid #b9a477; outline-offset: -4px; }
#voyage .v-story-scene.is-entering { animation: v-stage-enter .9s cubic-bezier(.22, .7, .3, 1) both; }

.v-scene-room { position: absolute; inset: 0; }
.v-scene-room::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 42%, rgb(5 12 14 / .55) 78%, rgb(5 12 14 / .88) 100%), linear-gradient(0deg, rgb(4 10 12 / .6), transparent 45%);
}

.v-scene-wall {
  position: absolute;
  inset: 0 auto 0 0;
  width: 52%;
  background:
    repeating-linear-gradient(0deg, transparent 0 53px, rgb(2 7 6 / .58) 54px 58px),
    repeating-linear-gradient(90deg, #1c251e 0 146px, #101914 147px 151px, #222c22 152px 226px);
  opacity: .9;
}
.v-scene-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 36% 30%, rgb(82 83 57 / .13), transparent 46%),
    linear-gradient(90deg, transparent 48%, #070f12 96%),
    linear-gradient(0deg, transparent 54%, #070f12 100%);
}

/* 墙洞是整场唯一固定的光源；光束从洞心出发。 */
.v-scene-hole {
  position: absolute;
  left: 33%;
  top: 31%;
  width: clamp(11px, 1.25vw, 16px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 48% 44%, #fff7dc 0%, #f4dc9f 44%, #cfae6c 74%, #8a6c38 100%);
  box-shadow:
    0 0 12px 3px rgb(242 213 158 / .85),
    0 0 52px 12px rgb(214 173 96 / .34),
    0 0 130px 32px rgb(178 137 68 / .14);
  transform: scale(.3);
  opacity: .25;
  transition: transform .95s cubic-bezier(.22, .7, .3, 1), opacity .95s ease;
}
.v-story-scene[data-beat="2"] .v-scene-hole,
.v-story-scene[data-beat="3"] .v-scene-hole,
.v-story-scene[data-beat="4"] .v-scene-hole { transform: scale(1); opacity: 1; }

.v-scene-dust { position: absolute; inset: 0; pointer-events: none; }
.v-scene-dust i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ecd49a;
  opacity: .28;
  animation: v-dust-drift 11s ease-in-out infinite alternate;
}
.v-scene-dust i:nth-child(1) { left: 36%; top: 35%; animation-delay: -2s; }
.v-scene-dust i:nth-child(2) { left: 43%; top: 47%; animation-delay: -6s; width: 1px; height: 1px; }
.v-scene-dust i:nth-child(3) { left: 51%; top: 39%; animation-delay: -4s; }
.v-scene-dust i:nth-child(4) { left: 57%; top: 54%; animation-delay: -8s; width: 3px; height: 3px; opacity: .18; }
.v-scene-dust i:nth-child(5) { left: 48%; top: 60%; animation-delay: -1s; }
.v-scene-dust i:nth-child(6) { left: 61%; top: 45%; animation-delay: -7s; width: 1px; height: 1px; }
.v-scene-dust i:nth-child(7) { left: 40%; top: 56%; animation-delay: -3s; opacity: .16; }
.v-scene-dust i:nth-child(8) { left: 66%; top: 58%; animation-delay: -9s; width: 1px; height: 1px; }

/* 书案与摊开的书。 */
.v-scene-desk {
  position: absolute;
  left: 27%;
  right: -8%;
  bottom: -5%;
  height: 47%;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgb(6 5 3 / .35) 39px 43px),
    linear-gradient(180deg, #30291c, #19150f 72%);
  clip-path: polygon(0 37%, 100% 9%, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgb(136 112 68 / .2);
}
.v-scene-desk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 58% 30%, rgb(122 102 62 / .16), transparent 46%);
}

.v-scene-book {
  position: absolute;
  z-index: 5;
  left: 52%;
  top: 47%;
  width: 36%;
  height: 33%;
  filter: drop-shadow(0 13px 20px rgb(0 0 0 / .6));
}
.v-scene-book-page {
  position: absolute;
  top: 0;
  height: 100%;
  opacity: .62;
  transition: filter .34s ease, opacity .34s ease;
}
.v-scene-book-left {
  left: 0;
  width: 50%;
  clip-path: polygon(0 13%, 100% 2%, 100% 96%, 0 84%);
  background: linear-gradient(100deg, #7f6d4b, #a99466 46%, #97845b);
}
.v-scene-book-right {
  left: 50%;
  width: 50%;
  clip-path: polygon(0 2%, 100% 13%, 100% 84%, 0 96%);
  background: linear-gradient(260deg, #806e4b, #b6a173 46%, #a08c60);
}
.v-scene-book-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgb(78 61 34 / .12) 8px 9px);
  mix-blend-mode: multiply;
}
.v-scene-book-spine {
  position: absolute;
  left: 49%;
  top: 4%;
  width: 2%;
  height: 92%;
  background: linear-gradient(90deg, transparent, #433a27 42%, #2c2518 58%, transparent);
  opacity: .85;
}

.v-story-scene.is-near .v-scene-book-page { filter: brightness(1.2); opacity: .78; }
.v-story-scene.is-lit .v-scene-book-page { filter: brightness(1.55) saturate(1.04); opacity: .96; }

/* 书页上的原文，照中后逐行显现。 */
.v-story-page-text {
  position: absolute;
  left: 54%;
  top: 2%;
  width: 42%;
  height: 84%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .12em;
  color: #3b3224;
  font-family: var(--font-title);
  font-size: clamp(8px, 1.02vw, 11.5px);
  line-height: 1.4;
  letter-spacing: .04em;
  pointer-events: none;
}
.v-story-verse-line { opacity: 0; white-space: nowrap; }
.v-story-scene.is-lit .v-story-verse-line {
  animation: v-line-in .55s calc(var(--line) * .16s) cubic-bezier(.22, .7, .3, 1) both;
}

/* 回望时，四字与出处在左页同处一屏。 */
.v-story-colophon {
  position: absolute;
  left: 12%;
  top: 15%;
  height: 70%;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #453a27;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s .15s ease;
}
.v-story-colophon > span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font: normal clamp(10px, 1.1vw, 16px) var(--font-title);
  letter-spacing: .16em;
}
.v-story-colophon small {
  writing-mode: vertical-rl;
  font: 8px/1.5 var(--font-body);
  letter-spacing: .06em;
  opacity: .78;
}
.v-story-scene.is-lookback .v-story-colophon { opacity: 1; }

/* 光束、光斑与暗角。 */
.v-story-beam {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: blur(1.5px);
  opacity: .7;
  transition: opacity .35s ease;
}
#story-beam-poly { fill: url(#v-beam-gradient); }
.v-story-scene.is-lit .v-story-beam { opacity: .24; }

.v-story-spot {
  position: absolute;
  z-index: 3;
  left: var(--light-x, 22%);
  top: var(--light-y, 28%);
  width: clamp(96px, 17vw, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle, rgb(255 238 196 / .58) 0, rgb(242 210 139 / .3) 27%, rgb(222 182 102 / .1) 55%, transparent 72%);
  filter: blur(2px);
  transition: left .12s linear, top .12s linear;
}
.v-story-spot::after {
  content: "";
  position: absolute;
  inset: -9%;
  border-radius: 50%;
  background: conic-gradient(#f1d79a calc(var(--dwell, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  opacity: .6;
  transition: opacity .4s ease;
}
.v-story-scene.is-near .v-story-spot { box-shadow: 0 0 58px 18px rgb(232 197 121 / .16); }
.v-story-scene.is-lit .v-story-spot { filter: blur(3px); background: radial-gradient(circle, rgb(255 242 206 / .5) 0, rgb(242 214 146 / .24) 30%, transparent 68%); }
.v-story-scene.is-lit .v-story-spot::after { opacity: 0; }

.v-story-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 36%, rgb(3 9 11 / .42) 76%, rgb(3 9 11 / .8) 100%);
}

/* ---------- 舞台外的短句与工具 ---------- */
#voyage .v-story-interaction {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-top: 17px;
}
#voyage .v-story-words {
  position: absolute;
  z-index: 5;
  right: 3.2%;
  top: 5.5%;
  width: min(30%, 300px);
  text-align: right;
  pointer-events: none;
}
#voyage .v-story-caption {
  margin: 0;
  color: #d8c89f;
  font: clamp(12px, 1.12vw, 15px)/1.9 var(--font-title);
  letter-spacing: .12em;
  text-shadow: 0 1px 14px rgb(0 0 0 / .8);
}
#voyage .v-story-gloss {
  margin: 10px 0 0;
  color: #9caa9b;
  font-size: 10px;
  line-height: 1.9;
  letter-spacing: .04em;
  text-shadow: 0 1px 10px rgb(0 0 0 / .8);
}
#voyage .v-story-tools {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  width: 100%;
}
#voyage .v-story-hint {
  color: #c6b27f;
  font: 11px var(--font-title);
  letter-spacing: .14em;
  margin-right: auto;
}
#voyage .v-story-range-label { color: #7f8f84; font-size: 10px; letter-spacing: .14em; }
#voyage .v-story-range {
  width: clamp(110px, 16vw, 190px);
  min-height: 30px;
  accent-color: #c9ae77;
  cursor: pointer;
}
#voyage .v-story-assist,
#voyage .v-story-lookback,
#voyage .v-story-restart,
#voyage .v-story-film-link {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgb(201 174 119 / .34);
  color: #d7c69b;
  font-size: 11px !important;
  letter-spacing: .1em;
}
#voyage .v-story-assist:hover,
#voyage .v-story-lookback:hover,
#voyage .v-story-restart:hover,
#voyage .v-story-film-link:hover { border-color: #c9ae77; color: #f0dfb6; }

@keyframes v-stage-enter {
  from { opacity: 0; filter: brightness(.72); }
  to { opacity: 1; filter: none; }
}
@keyframes v-line-in {
  from { opacity: 0; transform: translateY(5px); filter: blur(2px); }
  to { opacity: .92; transform: none; filter: none; }
}
@keyframes v-dust-drift {
  from { transform: translate(-7px, 5px); opacity: .14; }
  to { transform: translate(9px, -8px); opacity: .34; }
}
@keyframes v-reading-stars {
  from { transform: translate3d(0, 0, 0); opacity: .62; }
  to { transform: translate3d(-10px, 7px, 0); opacity: .78; }
}
@keyframes v-reading-twinkle {
  from { opacity: .52; }
  to { opacity: .9; }
}
/* 手机尺寸下同一块星野更密，用更低的亮度区间，避免抢正文。 */
@keyframes v-reading-stars-soft {
  from { transform: translate3d(0, 0, 0); opacity: .44; }
  to { transform: translate3d(-7px, 5px, 0); opacity: .56; }
}
@keyframes v-reading-twinkle-soft {
  from { opacity: .38; }
  to { opacity: .58; }
}

/* ---------- 静读舞台背景：书页之外也保留星野，不只剩纯黑 ---------- */
/* 只在普通条目的静读布局生效；影片与互动舞台仍用原有幕布。 */
#voyage-portal[data-story-layout="reading"] .v-portal-scrim::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 9% 14%, rgb(242 228 192 / .7) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 27% 61%, rgb(242 228 192 / .58) 50%, transparent 52%),
    radial-gradient(1px 1px at 43% 23%, rgb(242 228 192 / .46) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 66% 78%, rgb(242 228 192 / .62) 50%, transparent 52%),
    radial-gradient(1px 1px at 81% 37%, rgb(242 228 192 / .5) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 93% 88%, rgb(242 228 192 / .56) 50%, transparent 52%),
    radial-gradient(1px 1px at 15% 84%, rgb(242 228 192 / .52) 50%, transparent 52%),
    radial-gradient(1px 1px at 55% 47%, rgb(242 228 192 / .38) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 73% 9%, rgb(242 228 192 / .44) 50%, transparent 52%),
    radial-gradient(1px 1px at 36% 91%, rgb(242 228 192 / .4) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 88% 57%, rgb(242 228 192 / .46) 50%, transparent 52%),
    radial-gradient(1px 1px at 5% 42%, rgb(242 228 192 / .36) 50%, transparent 52%);
  background-size:
    330px 290px,
    470px 410px,
    590px 520px,
    380px 340px,
    520px 460px,
    640px 560px,
    440px 390px,
    560px 500px,
    350px 310px,
    610px 540px,
    410px 370px,
    290px 260px;
  background-repeat: repeat;
  opacity: .5;
}
/* 一条跨舞台的淡银河与几颗稍亮的星，给静读页之外留一点纵深。 */
#voyage-portal[data-story-layout="reading"] .v-portal-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 17% 25%, rgb(245 228 184 / .8) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 17% 25%, rgb(229 203 143 / .1) 0 2px, transparent 32px),
    radial-gradient(circle at 83% 69%, rgb(240 224 180 / .7) 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 83% 69%, rgb(205 181 126 / .08) 0 2px, transparent 26px),
    radial-gradient(circle at 63% 15%, rgb(242 228 192 / .55) 0 1px, transparent 1.8px),
    radial-gradient(circle at 67% 18%, rgb(242 228 192 / .42) 0 .9px, transparent 1.7px),
    radial-gradient(circle at 60% 20%, rgb(242 228 192 / .38) 0 .8px, transparent 1.6px),
    linear-gradient(116deg, transparent 18%, rgb(201 174 119 / .045) 36%, rgb(137 160 146 / .035) 50%, transparent 68%),
    linear-gradient(56deg, transparent 28%, rgb(137 160 146 / .02) 45%, transparent 62%);
  background-repeat: no-repeat;
  opacity: .72;
}
@media (max-width: 720px) {
  #voyage-portal[data-story-layout="reading"] .v-portal-scrim::before { opacity: .34; }
  #voyage-portal[data-story-layout="reading"] .v-portal-scrim::after { opacity: .5; }
}

/* ---------- 普通条目：原文回望的静读书页 ---------- */
#voyage .v-story-reading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  width: min(100%, clamp(800px, 50vw, 960px));
  margin: 0 auto;
  padding: clamp(20px, 2.2vw, 30px) clamp(18px, 3.4vw, 46px) clamp(16px, 2vw, 24px);
  border-top: 1px solid rgb(201 174 119 / .24);
  border-bottom: 1px solid rgb(201 174 119 / .14);
  background:
    linear-gradient(180deg, rgb(23 34 30 / .62), rgb(12 22 20 / .72)),
    radial-gradient(ellipse at 50% 0%, rgb(201 174 119 / .07), transparent 64%);
}
/* 星点分三层缓慢错开，避免规则网格感；亮度压得很低，正文仍然是主角。 */
#voyage .v-story-reading::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgb(242 228 192 / .95) 50%, transparent 52%),
    radial-gradient(1px 1px at 34% 72%, rgb(242 228 192 / .58) 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 58% 26%, rgb(242 228 192 / .82) 50%, transparent 52%),
    radial-gradient(1px 1px at 76% 64%, rgb(242 228 192 / .6) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 88% 36%, rgb(242 228 192 / .74) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 22% 46%, rgb(242 228 192 / .56) 50%, transparent 52%),
    radial-gradient(1px 1px at 48% 88%, rgb(242 228 192 / .6) 50%, transparent 52%),
    radial-gradient(2px 2px at 68% 8%, rgb(242 228 192 / .7) 50%, transparent 52%),
    radial-gradient(1px 1px at 8% 82%, rgb(242 228 192 / .52) 50%, transparent 52%),
    radial-gradient(1px 1px at 54% 54%, rgb(242 228 192 / .46) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 6% 44%, rgb(242 228 192 / .7) 50%, transparent 52%),
    radial-gradient(1px 1px at 42% 10%, rgb(242 228 192 / .52) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 92% 78%, rgb(242 228 192 / .62) 50%, transparent 52%),
    radial-gradient(1px 1px at 64% 92%, rgb(242 228 192 / .46) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 28% 28%, rgb(242 228 192 / .66) 50%, transparent 52%),
    radial-gradient(1px 1px at 84% 12%, rgb(242 228 192 / .5) 50%, transparent 52%),
    radial-gradient(1px 1px at 18% 66%, rgb(242 228 192 / .44) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 46% 36%, rgb(242 228 192 / .56) 50%, transparent 52%);
  background-size:
    280px 240px,
    430px 370px,
    590px 510px,
    350px 310px,
    520px 450px,
    260px 230px,
    470px 420px,
    620px 540px,
    310px 280px,
    550px 480px,
    390px 340px,
    680px 590px,
    330px 290px,
    500px 440px,
    410px 360px,
    570px 500px,
    290px 260px,
    640px 560px;
  background-repeat: repeat;
  opacity: .72;
  animation: v-reading-stars 24s ease-in-out infinite alternate;
}
/* 一条极淡的银河带、几颗略亮的星和一圈暖光，给纯色底一点纵深。 */
#voyage .v-story-reading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 74% 18%, rgb(245 228 184 / .95) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 74% 18%, rgb(229 203 143 / .16) 0 2px, transparent 22px),
    radial-gradient(circle at 20% 22%, rgb(240 224 180 / .85) 0 1.2px, transparent 2px),
    radial-gradient(circle at 20% 22%, rgb(205 181 126 / .1) 0 2px, transparent 18px),
    radial-gradient(circle at 86% 70%, rgb(236 219 176 / .8) 0 1.3px, transparent 2px),
    radial-gradient(circle at 86% 70%, rgb(205 181 126 / .1) 0 2px, transparent 16px),
    radial-gradient(circle at 62% 10%, rgb(242 228 192 / .6) 0 1px, transparent 1.6px),
    radial-gradient(circle at 66% 13%, rgb(242 228 192 / .5) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 59% 14%, rgb(242 228 192 / .45) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 56% 42%, rgb(242 228 192 / .55) 0 1px, transparent 1.6px),
    linear-gradient(112deg, transparent 28%, rgb(201 174 119 / .055) 43%, rgb(137 160 146 / .045) 52%, transparent 68%),
    linear-gradient(64deg, transparent 34%, rgb(137 160 146 / .025) 48%, transparent 62%);
  background-repeat: no-repeat;
  opacity: .78;
  animation: v-reading-twinkle 11s ease-in-out infinite alternate;
}
#voyage .v-story-reading > * { position: relative; z-index: 1; }
#voyage .v-story-reading-kicker {
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  color: #8d9d90;
  font: 10px/1.5 var(--font-title);
  letter-spacing: .24em;
}
#voyage .v-story-reading-quote {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 46em;
  color: #e6d7ae;
  font: normal clamp(19px, 1.75vw, 25px)/1.95 var(--font-title);
  letter-spacing: .05em;
  text-align: left;
  white-space: pre-line;
}
#voyage .v-story-reading-quote .v-couplet-half { display: block; }
#voyage .v-story-reading-quote .v-couplet-half + .v-couplet-half { margin-top: .2em; }
#voyage .v-story-reading-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr);
  gap: clamp(20px, 4vw, 52px);
  margin-top: clamp(20px, 2.8vw, 34px);
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid rgb(201 174 119 / .12);
}
#voyage .v-story-reading h3 {
  margin: 0 0 7px;
  color: #8d9d90;
  font: 10px/1.4 var(--font-title);
  letter-spacing: .2em;
}
#voyage .v-story-reading p {
  margin: 0;
  color: #d8cba9;
  font: 16px/1.95 var(--font-body);
  letter-spacing: .02em;
}
#voyage .v-story[data-story-layout="reading"] .v-story-bottom {
  width: min(100%, clamp(800px, 50vw, 960px));
  margin-inline: auto;
  grid-template-columns: 1fr;
}
#voyage .v-story[data-story-layout="reading"] .v-story-actions { justify-content: space-between; }

/* 故事阶段不受全站 520/480px 最小高度约束：短屏时整页高度等于视口，
   唯一滚动源是下面的 .v-story；其他阶段（首屏、卷首、星河、舱室）保持原高度。 */
#voyage[data-stage="story"] { min-height: 0; }

/* 画面内的小字是书页细节；完整原文和批注在独立可滚读区域阅读。 */
#voyage .v-story {
  --story-top: 96px;
  align-self: flex-start;
  margin-top: var(--story-top);
  max-height: calc(100% - var(--story-top));
  min-height: 0;
  padding: 14px 12px 28px 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #586453 transparent;
}
#voyage .v-source-note { max-width: none; min-width: 0; font-size: 14px; }
#voyage .v-source-note summary { font-size: 14px; min-height: 44px; }
#voyage .v-source-note blockquote { margin: 14px 0 6px; padding: 8px 0 8px 18px; border-left: 2px solid #a28e62; color: #e3d6b5; font-size: 17px; line-height: 1.95; letter-spacing: .03em; white-space: pre-line; }
#voyage .v-source-note p { font-size: 16px; line-height: 1.9; }
#voyage .v-source-note .v-source-cite { margin: 0 0 14px; padding-left: 20px; font-size: 13px; line-height: 1.7; color: #8f9d8f; letter-spacing: .04em; }
#voyage .v-source-note .v-source-gloss { color: #d8cba9; }
#voyage .v-source-note .v-source-foot { display: block; margin-top: 12px; padding-top: 9px; border-top: 1px solid rgb(201 174 119 / .1); font-size: 11px; line-height: 1.8; color: #778b7a; }
#voyage .v-source-note .v-source-foot:empty { display: none; }
#voyage .v-story-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
#voyage .v-story-caption { font-size: 16px; }
#voyage .v-story-gloss { font-size: 14px; }
@media (max-height: 740px) and (min-width: 761px) { #voyage .v-story { --story-top: 80px; } }

/* ---------- 手机：墙缝上移，书页居中偏下，短句移到舞台外的底栏 ---------- */
@media (max-width: 760px) {
  #voyage .v-story { --story-top: 78px; padding-top: 10px; padding-right: 5px; }
  #voyage .v-story-bottom { grid-template-columns: 1fr; gap: 18px; }
  #voyage .v-source-note summary { font-size: 14px; }
  #voyage #story-film.is-story-stage { aspect-ratio: 1.05 / 1; max-height: 46vh; }
  .v-scene-wall { width: 100%; height: 45%; }
  .v-scene-wall::after { background: linear-gradient(180deg, transparent 40%, #070f12 98%), radial-gradient(ellipse at 40% 30%, rgb(82 83 57 / .14), transparent 52%); }
  .v-scene-hole { left: 38%; top: 13%; width: clamp(10px, 3vw, 14px); }
  .v-scene-desk { left: -7%; right: -7%; bottom: -4%; height: 54%; clip-path: polygon(0 31%, 100% 16%, 100% 100%, 0 100%); }
  .v-scene-book { left: 18%; top: 48%; width: 62%; height: 34%; }
  .v-story-page-text { left: 53%; width: 43%; font-size: clamp(8.5px, 2.35vw, 12px); line-height: 1.44; gap: .18em; }
  .v-story-colophon { left: 13%; top: 16%; gap: 5px; }
  .v-story-colophon > span { font-size: 10px; }
  .v-story-colophon small { font-size: 7px; }
  .v-story-spot { width: clamp(80px, 26vw, 124px); }

  #voyage .v-story-interaction { flex-direction: column; gap: 11px; margin-top: 12px; }
  #voyage .v-story-words { position: static; width: 100%; text-align: left; pointer-events: auto; }
  #voyage .v-story-caption { font-size: 14px; line-height: 1.75; letter-spacing: .06em; }
  #voyage .v-story-gloss { font-size: 14px; line-height: 1.8; }
  #voyage .v-story-tools { width: 100%; gap: 9px; margin-left: 0; }
  #voyage .v-story-hint { width: 100%; margin-right: 0; font-size: 10px; }
  #voyage .v-story-range { flex: 1 1 55%; width: auto; height: 44px; min-height: 44px; }
  #voyage .v-story-assist,
  #voyage .v-story-lookback,
  #voyage .v-story-restart,
  #voyage .v-story-film-link { flex: 0 0 auto; padding: 11px 12px; }

  #voyage .v-story-reading { padding: 18px 16px 16px; }
  #voyage .v-story-reading::before { animation-name: v-reading-stars-soft; }
  #voyage .v-story-reading::after { animation-name: v-reading-twinkle-soft; }
  #voyage .v-story-reading-quote { font-size: clamp(17px, 5vw, 21px); line-height: 1.9; }
  #voyage .v-story-reading-grid { grid-template-columns: 1fr; gap: 15px; margin-top: 18px; padding-top: 15px; }
  #voyage .v-story-reading p { font-size: 14.5px; line-height: 1.9; }
  #voyage .v-story-reading-grid section:first-child p { font-size: 16px; }
  #voyage .v-story-reading-grid section:nth-child(2) p { font-size: 14px; }
  #voyage .v-story[data-story-layout="reading"] .v-story-actions { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #voyage:not([data-motion="full"]) .v-story-scene.is-entering { animation-duration: .01ms !important; }
  #voyage:not([data-motion="full"]) .v-story-verse-line { animation-duration: .01ms !important; animation-delay: 0ms !important; }
  #voyage:not([data-motion="full"]) .v-story-spot { transition-duration: .01ms !important; }
  #voyage:not([data-motion="full"]) .v-scene-dust i { animation: none !important; }
  #voyage:not([data-motion="full"]) .v-story-reading::before,
  #voyage:not([data-motion="full"]) .v-story-reading::after { animation: none !important; }
}