*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --content-font-scale:1;
  --content-font-size-zh:calc(1rem * var(--content-font-scale));
  --content-font-size-en:calc(.9rem * var(--content-font-scale));
  --content-font-size-ui:calc(.86rem * var(--content-font-scale));
  --content-font-size-ui-sm:calc(.82rem * var(--content-font-scale));
  --content-font-size-caption:calc(.7rem * var(--content-font-scale));
  /* Optical pairs: CJK glyphs fill more of the em square than Newsreader's lowercase.
     Keep one shared preference scale, but balance each reading surface by eye. */
  --narrative-font-size-zh:calc(1.08rem * var(--content-font-scale));
  --narrative-font-size-en:calc(1rem * var(--content-font-scale));
  --memory-font-size-zh:calc(1.05rem * var(--content-font-scale));
  --memory-font-size-en:calc(1.1rem * var(--content-font-scale));
  --context-font-size-zh:calc(.88rem * var(--content-font-scale));
  --context-font-size-en:calc(.88rem * var(--content-font-scale));
  --context-caption-size-zh:calc(.76rem * var(--content-font-scale));
  --context-caption-size-en:calc(.78rem * var(--content-font-scale));
  --context-credit-size-zh:calc(.64rem * var(--content-font-scale));
  --context-credit-size-en:calc(.66rem * var(--content-font-scale));
  --context-title-size-zh:calc(1.3rem * var(--content-font-scale));
  --context-title-size-en:calc(1.22rem * var(--content-font-scale));
}
html, body { width:100%; height:100%; overflow:hidden; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  background:#050505; color:#fff;
  font-family:"Noto Serif SC","Songti SC","Newsreader","Times New Roman",serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button { font:inherit; }

.mobile-gate { display:none; }
html.is-mobile-device body { padding:0; }
html.is-mobile-device .experience { display:none; }
html.is-mobile-device .mobile-gate {
  position:fixed; inset:0; display:grid; place-items:center; overflow:hidden; isolation:isolate;
  min-height:100dvh; padding:2rem; background:#080808; color:rgba(255,255,255,.92);
}
.mobile-gate-image { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.5; }
.mobile-gate-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom,rgba(4,4,4,.52),rgba(4,4,4,.84)); }
.mobile-gate-content { width:min(100%,28rem); text-align:center; }
.mobile-gate-year { margin-bottom:1.25rem; font:500 .72rem/1 "Work Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.16em; color:rgba(255,255,255,.62); }
.mobile-gate h1 { font-size:clamp(2rem,10vw,3rem); font-weight:500; line-height:1.15; letter-spacing:.08em; }
.mobile-gate h1 span { display:block; margin-top:.45rem; font:italic 1.15rem/1.4 "Newsreader","Times New Roman",Georgia,serif; letter-spacing:.03em; color:rgba(255,255,255,.72); }
.mobile-gate-zh { margin-top:2.4rem; font-size:1rem; line-height:1.75; letter-spacing:.05em; }
.mobile-gate-en { margin:1rem auto 0; max-width:25rem; font:normal .9rem/1.6 "Newsreader","Times New Roman",Georgia,serif; color:rgba(255,255,255,.68); }
.mobile-gate-credit {
  display:grid; gap:.22rem; margin:2.4rem auto 0;
  font:500 .65rem/1.45 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.045em; color:rgba(255,255,255,.52);
}
.mobile-gate-credit a { justify-self:center; color:rgba(255,255,255,.88); text-underline-offset:.22em; }
.mobile-gate-credit a:hover,.mobile-gate-credit a:focus-visible { color:#fff; }

.experience {
  position:absolute; left:50%; top:50%; width:92vw; height:88dvh; overflow:visible;
  transform:translate(-50%,-50%); background:#000; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 1.2rem 4rem rgba(0,0,0,.9); transition:width .45s ease,height .45s ease,border-color .45s ease;
}
body.is-fullscreen .experience { width:100vw; height:100dvh; border-color:transparent; box-shadow:none; }
html.is-kiosk-mode .experience { width:100vw; height:100dvh; border-color:transparent; box-shadow:none; }
html.is-kiosk-mode .fullscreen-invitation,
html.is-kiosk-mode .fullscreen-button-corner,
html.is-kiosk-mode #font-size-toggle,
html.is-kiosk-mode #motion-toggle,
html.is-kiosk-mode #controls-collapse-toggle { display:none !important; }
html.is-kiosk-mode .context-toggle { right:1rem; }
.app { position:relative; width:100%; height:100%; background:#000; }
.backgrounds { position:absolute; inset:0; }
.portal-neon {
  position:absolute; inset:0; z-index:8; overflow:hidden; opacity:0; pointer-events:none;
  transition:opacity 1.1s ease;
}
.app:not(.is-portal-neon) .portal-neon { opacity:0 !important; }
.portal-neon-blob {
  position:absolute; display:block; width:clamp(15rem,34vw,38rem); aspect-ratio:1.45;
  opacity:0; transform:translate(-50%,-50%) scale(.7); border-radius:48% 52% 58% 42% / 54% 44% 56% 46%;
  filter:blur(clamp(2.8rem,6.4vw,7.2rem)); mix-blend-mode:screen; will-change:left,top,opacity,transform;
}
.portal-neon-blob::before {
  content:""; position:absolute; inset:-4%; border-radius:inherit; background:var(--portal-gradient);
  animation:portal-neon-drift var(--portal-drift,7.4s) ease-in-out var(--portal-delay,0s) infinite alternate;
  will-change:transform,opacity;
}
.portal-neon-blue {
  width:clamp(18rem,42vw,46rem);
  --portal-gradient:radial-gradient(ellipse at 48% 48%,rgba(105,145,255,.72) 0%,rgba(91,108,231,.34) 32%,rgba(64,82,175,.1) 58%,transparent 76%);
  --portal-drift:8.1s; --portal-delay:-2.3s;
}
.portal-neon-rose {
  width:clamp(13rem,28vw,31rem);
  --portal-gradient:radial-gradient(ellipse at 52% 46%,rgba(255,202,104,.9) 0%,rgba(255,128,151,.56) 25%,rgba(207,76,122,.22) 51%,transparent 77%);
  --portal-drift:6.8s; --portal-delay:-4.1s;
}
.portal-neon-amber {
  width:clamp(15rem,35vw,39rem); aspect-ratio:1.7;
  --portal-gradient:radial-gradient(ellipse at 54% 50%,rgba(255,183,78,.92) 0%,rgba(239,118,35,.42) 30%,rgba(161,65,25,.12) 58%,transparent 78%);
  --portal-drift:7.6s; --portal-delay:-1.2s;
}
.portal-neon-reflection {
  width:clamp(10rem,20vw,23rem); aspect-ratio:.72;
  --portal-gradient:radial-gradient(ellipse at 50% 44%,rgba(255,172,91,.48) 0%,rgba(224,103,44,.17) 34%,rgba(136,51,21,.045) 62%,transparent 80%);
  --portal-drift:8.7s; --portal-delay:-5.4s;
}
@keyframes portal-neon-drift {
  0% { transform:translate3d(-2.2%,1.4%,0) scale(.985); opacity:.72; }
  38% { transform:translate3d(1.1%,-1.8%,0) scale(1.018); opacity:.96; }
  68% { transform:translate3d(2.4%,.7%,0) scale(1.03); opacity:.8; }
  100% { transform:translate3d(-.8%,-1.2%,0) scale(.995); opacity:1; }
}
.chapter-visual {
  position:absolute; inset:0; opacity:0; overflow:hidden; filter:blur(0); transform:scale(1);
  transition:opacity 1.65s ease,filter 1.65s ease,transform 1.65s ease; pointer-events:none;
}
.chapter-visual.is-active { opacity:1; }
.chapter-bg {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;
}
.chapter-bg-base { z-index:1; opacity:1; }
.chapter-bg-composite {
  z-index:3; opacity:0; filter:none; transform:none; transition:none;
}
.chapter-visual.is-composite-revealed .chapter-bg-composite { opacity:1; filter:none; transform:none; }
.chapter-visual.is-js-revealing .chapter-bg-composite { transition:none !important; }
.app.is-text-mode .chapter-visual { opacity:0; transition:none; }
.chapter-dissolve-canvas { z-index:4; }
.chapter-dissolve-canvas[hidden] { display:none; }
.chapter-motion-layer {
  position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover;
  opacity:0; pointer-events:none; mix-blend-mode:var(--motion-blend,normal);
  transition:opacity var(--motion-fade-in,0ms) ease;
}
.chapter-motion-layer.is-frame {
  inset:auto;
  object-fit:fill;
}
.chapter-motion-layer.is-frame.is-contain { object-fit:contain; }
.chapter-motion-layer.is-patch {
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,#000 16%,#000 84%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 13%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0%,#000 16%,#000 84%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 13%,#000 100%);
  mask-composite:intersect;
}
.chapter-motion-layer.is-playing { opacity:var(--motion-opacity,1); }
.chapter-motion-still {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; pointer-events:none; mix-blend-mode:var(--motion-blend,normal);
}
html[data-motion="reduced"] .chapter-motion-still { opacity:var(--motion-opacity,1); }

/* Chapter 6 uses the whole frame as an interaction map. On iPad-like 4:3
   screens, cover crops the cat and its cue off the right edge. */
@media (max-aspect-ratio:3/2) {
  .chapter-visual[data-index="5"] .chapter-bg,
  .chapter-visual[data-index="5"] .chapter-motion-layer { object-fit:contain; }
}
.door-wash {
  position:absolute; inset:0; z-index:90; overflow:hidden; opacity:0; pointer-events:none;
  transition:opacity 1.35s cubic-bezier(.22,.61,.36,1);
}
.door-wash.is-active { opacity:1; }
.door-wash.is-solid { background:#020203; }
.door-wash.is-releasing { opacity:0; }
.door-wash canvas { display:block; width:100%; height:100%; }
.app.is-door-washing .hotspots { pointer-events:none; }
.chapter-visual.is-reveal-complete .chapter-bg-composite {
  clip-path:none; -webkit-mask-image:none; mask-image:none;
}

.start-screen {
  position:absolute; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#000; opacity:1; transition:opacity 1.4s ease;
}
.start-screen.is-hidden { opacity:0; pointer-events:none; }
/* 粒子画布仅负责布局；所有粒子动效由 script.js 绘制与驱动。 */
.intro-particles {
  position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none;
  animation:none !important; transition:none !important;
}
.start-bg-wrap {
  display:none; position:absolute; inset:0; opacity:0; transition:opacity 2s ease;
  animation:start-breathe 7s ease-in-out infinite; animation-play-state:paused;
}
.start-bg-wrap.is-active { opacity:1; animation-play-state:running; }
@keyframes start-breathe { 0%,100% { opacity:.65; } 50% { opacity:.9; } }
.start-bg { width:100%; height:100%; object-fit:cover; filter:blur(2.5rem) brightness(.28); transition:filter 1.8s ease; }
.start-bg.stage-1 { filter:blur(1.8rem) brightness(.32); }
.start-bg.stage-2 { filter:blur(1.1rem) brightness(.38); }
.start-bg.stage-3 { filter:blur(.6rem) brightness(.46); }
.start-text { position:relative; z-index:2; width:min(76vw,52rem); text-align:center; padding-bottom:6rem; }
.start-paragraph {
  opacity:0; transform:translateY(.35rem) scale(1.22); filter:blur(24px);
  margin-bottom:1.15rem; transform-origin:center; will-change:opacity,filter,transform;
}
.start-paragraph.is-visible { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
.start-zh, .start-hant { display:block; font-size:var(--content-font-size-zh); line-height:1.7; letter-spacing:.055em; color:rgba(255,255,255,.78); margin-bottom:.24rem; }
.start-en { display:block; font:calc(var(--start-en-font-size,.95rem) * var(--content-font-scale))/1.5 "Newsreader","Times New Roman",Georgia,serif; color:rgba(255,255,255,.7); }
.start-credit {
  position:absolute; z-index:4; left:1.35rem; top:1.15rem; max-width:22rem;
  font:500 .61rem/1.5 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.035em; color:rgba(255,255,255,.46);
}
.start-credit a,.epilogue-credit a { color:rgba(255,255,255,.78); text-underline-offset:.2em; }
.start-credit a:hover,.start-credit a:focus-visible,
.epilogue-credit a:hover,.epilogue-credit a:focus-visible { color:#fff; }

.epilogue-screen {
  position:absolute; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#000; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease,visibility 0s linear .18s;
}
.epilogue-screen.is-active { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.epilogue-screen > .intro-particles { z-index:0; }
.epilogue-text {
  position:relative; z-index:2; width:min(82vw,58rem); padding-bottom:5.4rem; text-align:center;
}
.epilogue-paragraph {
  opacity:0; margin-bottom:1.15rem; filter:blur(24px); transform:translateY(.35rem) scale(1.2);
  transform-origin:center; will-change:opacity,filter,transform;
}
.epilogue-paragraph.is-visible { opacity:1; filter:blur(0); transform:translateY(0) scale(1); }
.epilogue-zh, .epilogue-hant { display:block; font-size:var(--content-font-size-zh); line-height:1.7; letter-spacing:.055em; color:rgba(255,255,255,.82); }
.epilogue-en { display:block; margin-top:.24rem; font:calc(.79rem * var(--content-font-scale))/1.5 "Newsreader","Times New Roman",Georgia,serif; color:rgba(255,255,255,.65); }
.epilogue-subparagraph { display:block; margin-top:.1em; }
.epilogue-en i { font-weight:400; }
/* .epilogue-cta 现在是 .epilogue-text 的兄弟节点，不再混在逐句渐显的段落队列里，
   但也不再跟屏幕一起提前淡入——JS 会在最后一段文字动效走完后才加上 .is-visible，
   读完文字、按钮才出现，顺序上跟着叙事走。 */
.epilogue-cta {
  position:absolute; z-index:4; left:50%; bottom:8.5rem; width:min(88%,32rem);
  transform:translateX(-50%); text-align:center;
  opacity:0; pointer-events:none; transition:opacity 1s ease;
}
.epilogue-cta.is-visible { opacity:1; pointer-events:auto; }
/* 与序言的进入全屏按钮共用 .fullscreen-button 的圆角胶囊/描边/毛玻璃底，字号也直接继承
   .fullscreen-button 自己的 .7rem 无衬线字，不再单独覆盖成正文那么大——这样两个按钮才是真的一样。 */
.epilogue-fullstory-link {
  display:inline-flex; flex-direction:column; align-items:center; gap:.18rem;
  text-decoration:none; letter-spacing:.08em; padding:.62rem 1.5rem;
}
.epilogue-fullstory-link:hover,
.epilogue-fullstory-link:focus-visible {
  border-color:rgba(255,196,120,.75); background:rgba(255,196,120,.08);
}
.epilogue-fullstory-zh, .epilogue-fullstory-hant, .epilogue-fullstory-en { font:inherit; letter-spacing:inherit; color:inherit; }
.epilogue-credit {
  margin-top:.72rem; font:500 .61rem/1.45 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.035em; color:rgba(255,255,255,.48);
}
html[data-content-font-size="large"] .start-text,
html[data-content-font-size="large"] .epilogue-text {
  width:88vw;
  max-width:none;
}
html[data-content-font-size="large"] .start-text { padding-bottom:4.8rem; }
html[data-content-font-size="large"] .epilogue-text {
  width:92vw;
  padding-bottom:4.55rem;
}
html[data-content-font-size="large"] .start-paragraph,
html[data-content-font-size="large"] .epilogue-paragraph { margin-bottom:.95rem; }

.epilogue-screen.is-safety-condensed {
  align-items:flex-start;
  padding:6vh 0 7.5rem;
}
.epilogue-screen.is-safety-condensed .epilogue-text {
  width:min(96vw,72rem);
  padding-bottom:0;
}
.epilogue-screen.is-safety-condensed .epilogue-paragraph { margin-bottom:.52rem; }
.epilogue-screen.is-safety-condensed .epilogue-zh,
.epilogue-screen.is-safety-condensed .epilogue-hant { line-height:1.5; }
.epilogue-screen.is-safety-condensed .epilogue-en {
  margin-top:.08rem;
  line-height:1.26;
}

html[data-content-font-size="large"] .epilogue-screen.is-safety-condensed .epilogue-text {
  width:min(97vw,76rem);
}
html[data-content-font-size="large"] .epilogue-screen.is-safety-condensed .epilogue-paragraph { margin-bottom:.44rem; }
.fullscreen-invitation {
  position:absolute; z-index:4; left:50%; bottom:8.5rem; width:min(88%,32rem);
  transform:translateX(-50%); text-align:center; color:rgba(255,255,255,.88);
}
.fullscreen-invitation-note {
  display:flex; align-items:baseline; justify-content:center; gap:.65rem;
  margin-top:.6rem; color:rgba(255,255,255,.5); white-space:nowrap;
}
.fullscreen-invitation-zh,.fullscreen-invitation-hant { font-size:.61rem; line-height:1.35; letter-spacing:.09em; }
.fullscreen-invitation-en { font:500 .61rem/1.35 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.035em; }
.start-continue-hint {
  display:flex; align-items:baseline; justify-content:center; gap:.65rem;
  margin-top:.38rem; color:rgba(255,255,255,.72); white-space:nowrap;
}

.desktop-invitation {
  display:none; position:absolute; z-index:4; left:50%; bottom:8.5rem; width:min(88%,32rem);
  transform:translateX(-50%); text-align:center;
}
.desktop-invitation-zh {
  font-size:.78rem; line-height:1.4; letter-spacing:.09em; color:rgba(255,255,255,.92);
  animation:desktop-invitation-glow 2.6s ease-in-out infinite;
}
.desktop-invitation-en {
  margin-top:.3rem; font:500 .64rem/1.4 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.04em;
  color:rgba(255,255,255,.6);
}
@keyframes desktop-invitation-glow {
  0%,100% { text-shadow:0 0 .2rem rgba(255,255,255,.15); opacity:.75; }
  50% { text-shadow:0 0 .85rem rgba(255,255,255,.85),0 0 .3rem rgba(255,255,255,.6); opacity:1; }
}
/* 手机也能进全屏(iOS 16.4+/Android Chrome 都支持 Fullscreen API 了),
   所以不再隐藏这个按钮,只是提示语换成"横屏体验更佳"。 */
html.is-small-device .fullscreen-invitation-note { display:none; }
html.is-small-device .fullscreen-invitation::after {
  content:"全屏观看，横屏体验更佳 / Fullscreen — best in landscape";
  display:block; margin-top:.6rem; font-size:.61rem; letter-spacing:.06em;
  color:rgba(255,255,255,.5); white-space:normal;
}

.fullscreen-button,
.control-button {
  border:1px solid rgba(255,255,255,.42); background:rgba(0,0,0,.32); color:#fff; cursor:pointer;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .25s ease,border-color .25s ease,opacity .4s ease,transform .25s ease;
}
.fullscreen-button { border-radius:999px; padding:.62rem 1rem; font:500 .7rem/1 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.1em; }
.fullscreen-button:hover,.fullscreen-button:focus-visible,.control-button:hover,.control-button:focus-visible {
  background:rgba(255,255,255,.17); border-color:#fff; outline:none;
}
.fullscreen-button:active,.control-button:active { transform:scale(.96); }
.exit-fullscreen-label { display:none; }
body.is-fullscreen .enter-fullscreen-label { display:none; }
body.is-fullscreen .exit-fullscreen-label { display:inline; }
.screen-controls {
  --screen-control-height:1.72rem;
  --screen-control-pad-x:.68rem;
  --screen-control-divider:rgba(255,255,255,.16);
  position:absolute; z-index:80; top:1.5rem; right:1.5rem; display:flex; align-items:center; gap:0;
  padding:.22rem; border:1px solid rgba(255,255,255,.24); border-radius:999px;
  background:rgba(10,10,10,.28); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 .35rem 1.4rem rgba(0,0,0,.12); overflow:hidden;
}
.screen-controls > button,
.screen-controls > .main-language-toggle { position:relative; z-index:0; }
.screen-controls > button::before {
  content:""; position:absolute; left:0; top:.28rem; bottom:.28rem; width:1px;
  background:var(--screen-control-divider); pointer-events:none;
}
.screen-controls > button:hover::before,
.screen-controls > button:focus-visible::before,
.screen-controls > button:hover + button::before,
.screen-controls > button:focus-visible + button::before { opacity:.55; }
.controls-collapse-toggle { display:none; }
.fullscreen-button-corner {
  display:flex; align-items:center; justify-content:center; min-height:var(--screen-control-height); padding:.2rem .76rem;
  border:0; border-radius:0; background:transparent;
  color:rgba(255,255,255,.7); opacity:.78;
  font:500 .56rem/1 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.055em;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:color .25s ease,opacity .25s ease,background .25s ease,transform .25s ease;
}
.fullscreen-button-corner:hover,.fullscreen-button-corner:focus-visible {
  color:#fff; opacity:1; background:rgba(255,255,255,.08); outline:none;
}
.motion-button {
  display:flex; align-items:center; justify-content:center; gap:.42rem; min-height:var(--screen-control-height);
  padding:.2rem var(--screen-control-pad-x);
  border:0; border-radius:0;
  background:transparent; color:rgba(255,255,255,.7); cursor:pointer; opacity:.78;
  font:500 .56rem/1 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.055em;
  transition:color .25s ease,opacity .25s ease,background .25s ease;
}
.motion-button:hover,.motion-button:focus-visible { color:#fff; opacity:1; background:rgba(255,255,255,.08); outline:none; }
.font-size-button { border-radius:0; }
.font-size-badge {
  display:inline-flex; align-items:center; justify-content:center; width:1.4rem; height:1.4rem;
  border:1px solid rgba(255,255,255,.24); border-radius:50%; font:600 .78rem/1 Georgia,serif;
  color:rgba(255,255,255,.88);
}
.motion-control-name { white-space:nowrap; }
.motion-control-name i {
  margin-left:.2rem; font-style:normal; font-size:.94em; letter-spacing:.08em; opacity:.48;
}
/* 顶部胶囊里"全屏/字号/动效/声音"这几颗按钮：中文用 data-context-chinese（简繁共用同一节点，
   JS 直接替换文字），英文缩写在 <i> 里——选哪个语言就只显示哪个，不再中英一起露出来。 */
html[data-main-language="zh-hans"] .fullscreen-button-corner i,
html[data-main-language="zh-hant"] .fullscreen-button-corner i,
html[data-main-language="zh-hans"] .motion-button i,
html[data-main-language="zh-hant"] .motion-button i {
  display:none;
}
html[data-main-language="en"] .fullscreen-button-corner [data-context-chinese],
html[data-main-language="en"] .motion-button [data-context-chinese] {
  display:none;
}

/* 历史背景/Context 开关按钮、侧栏顶端小标签、每个 accordion 的标题、"小说原文阅读"按钮——
   这些都是侧栏的"外壳"文字，不是正文内容，统一按三语切换互斥显示，不再中英并排。
   左上角章节标题（.chapter-title-zh/en）和底部 timeline 是唯一保留双语的例外，
   它们各自用完全独立的类名，不会被下面这条规则影响到。 */
html[data-main-language="en"] [data-context-chinese] {
  display:none;
}
html[data-main-language="zh-hans"] .context-en-label,
html[data-main-language="zh-hant"] .context-en-label,
html[data-main-language="zh-hans"] .context-term-item-en,
html[data-main-language="zh-hant"] .context-term-item-en {
  display:none;
}

/* 语言切换器现在是胶囊最左边的一组，按同一排按钮的高度/字号/分隔线风格对齐，
   自己不再单独长一个圆角胶囊——最左边那颗按钮（简）继承胶囊自己的左侧圆角。 */
.main-language-toggle { display:flex; align-items:center; min-height:var(--screen-control-height); }
.main-language-toggle button {
  min-height:var(--screen-control-height); min-width:2.28rem; padding:.2rem .58rem; border:0; background:transparent; cursor:pointer;
  color:rgba(255,255,255,.7); opacity:.78; text-align:center;
  font:500 .56rem/1 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.055em;
  transition:color .25s ease,opacity .25s ease,background .25s ease;
}
.main-language-toggle button:hover,.main-language-toggle button:focus-visible { color:#fff; opacity:1; background:rgba(255,255,255,.08); outline:none; }
.main-language-toggle button[aria-pressed="true"] { color:#fff; opacity:1; background:rgba(255,255,255,.13); }
/* 简/繁/ENG 是整条 .screen-controls 胶囊最左边的一组按钮，它的高亮背景需要自己带左侧圆角，
   否则矩形背景只能靠父容器 overflow:hidden 硬裁，贴着胶囊弧线看会不圆润、错位。 */
.main-language-toggle button:first-child { border-radius:999px 0 0 999px; }
/* 声音是现在整条胶囊最右边的按钮，同样的道理，右侧圆角要自己带，跟胶囊弧线对上。 */
.sound-button { border-radius:0 999px 999px 0; }

/* 三态互斥：中文（简体/繁体）状态下，把所有英文对照行都藏起来；English 状态下反过来藏中文行。
   之前是中英一起显示、只有 English 才单独隐藏中文，现在改成三个状态互不重叠——
   跟侧栏的规则统一，选哪个语言就只看哪个语言，不再顺带看到另一种。 */
html[data-main-language="en"] .step-zh,
html[data-main-language="en"] .tooltip-zh,
html[data-main-language="en"] .memory-thought-zh {
  display:none;
}
html[data-main-language="zh-hans"] .step-en,
html[data-main-language="zh-hant"] .step-en,
html[data-main-language="zh-hans"] .tooltip-translation,
html[data-main-language="zh-hant"] .tooltip-translation,
html[data-main-language="zh-hans"] .tooltip-note-en,
html[data-main-language="zh-hant"] .tooltip-note-en,
html[data-main-language="zh-hans"] .memory-thought-en,
html[data-main-language="zh-hant"] .memory-thought-en {
  display:none;
}
/* 序言 / 跋 / 跋的"阅读完整故事"按钮 / 全文阅读的"返回" / 全文阅读正文，
   这几处简繁不是共用同一份文字——繁体是脚本用 convertElementToTraditional() 转出来的独立克隆节点
   （-hant 类），跟英文一样是"三选一各自独立显示"，不是"简繁共用、只切中英"的两态规则。 */
html[data-main-language="zh-hans"] .start-hant,
html[data-main-language="zh-hans"] .start-en,
html[data-main-language="zh-hant"] .start-zh,
html[data-main-language="zh-hant"] .start-en,
html[data-main-language="en"] .start-zh,
html[data-main-language="en"] .start-hant,
html[data-main-language="zh-hans"] .start-credit-hant,
html[data-main-language="zh-hans"] .start-credit-en,
html[data-main-language="zh-hant"] .start-credit-zh,
html[data-main-language="zh-hant"] .start-credit-en,
html[data-main-language="en"] .start-credit-zh,
html[data-main-language="en"] .start-credit-hant,
html[data-main-language="zh-hans"] .epilogue-hant,
html[data-main-language="zh-hans"] .epilogue-en,
html[data-main-language="zh-hant"] .epilogue-zh,
html[data-main-language="zh-hant"] .epilogue-en,
html[data-main-language="en"] .epilogue-zh,
html[data-main-language="en"] .epilogue-hant,
html[data-main-language="zh-hans"] .epilogue-fullstory-hant,
html[data-main-language="zh-hans"] .epilogue-fullstory-en,
html[data-main-language="zh-hant"] .epilogue-fullstory-zh,
html[data-main-language="zh-hant"] .epilogue-fullstory-en,
html[data-main-language="en"] .epilogue-fullstory-zh,
html[data-main-language="en"] .epilogue-fullstory-hant,
html[data-main-language="zh-hans"] .epilogue-credit-hant,
html[data-main-language="zh-hans"] .epilogue-credit-en,
html[data-main-language="zh-hant"] .epilogue-credit-zh,
html[data-main-language="zh-hant"] .epilogue-credit-en,
html[data-main-language="en"] .epilogue-credit-zh,
html[data-main-language="en"] .epilogue-credit-hant,
html[data-main-language="zh-hans"] .story-back-hant,
html[data-main-language="zh-hans"] .story-back-en,
html[data-main-language="zh-hant"] .story-back-zh,
html[data-main-language="zh-hant"] .story-back-en,
html[data-main-language="en"] .story-back-zh,
html[data-main-language="en"] .story-back-hant {
  display:none;
}
/* 全文阅读页是简/繁/英三态各自独立文字（繁体是脚本转换出来的 .story-hant，不是共用简体那份），
   跟别处"简繁共用一份文字、只切中英"的两态规则不一样，单独写。 */
/* 序言大按钮"进入/退出全屏"、按钮下方的邀请文案、时间线上"序/跋"两个站点的年份标签、
   六章时间线的场景标题——都是简/繁/英三态各自独立文字（繁体同样是脚本转换出来的 -hant 克隆）。 */
html[data-main-language="zh-hans"] .start-fullscreen-hant,
html[data-main-language="zh-hans"] .start-fullscreen-en,
html[data-main-language="zh-hant"] .start-fullscreen-zh,
html[data-main-language="zh-hant"] .start-fullscreen-en,
html[data-main-language="en"] .start-fullscreen-zh,
html[data-main-language="en"] .start-fullscreen-hant,
html[data-main-language="zh-hans"] .fullscreen-invitation-hant,
html[data-main-language="zh-hans"] .fullscreen-invitation-en,
html[data-main-language="zh-hant"] .fullscreen-invitation-zh,
html[data-main-language="zh-hant"] .fullscreen-invitation-en,
html[data-main-language="en"] .fullscreen-invitation-zh,
html[data-main-language="en"] .fullscreen-invitation-hant,
html[data-main-language="zh-hans"] .timeline-year-hant,
html[data-main-language="zh-hans"] .timeline-year-en,
html[data-main-language="zh-hant"] .timeline-year-zh,
html[data-main-language="zh-hant"] .timeline-year-en,
html[data-main-language="en"] .timeline-year-zh,
html[data-main-language="en"] .timeline-year-hant,
html[data-main-language="zh-hans"] .timeline-title-hant,
html[data-main-language="zh-hans"] .timeline-title-en,
html[data-main-language="zh-hant"] .timeline-title-zh,
html[data-main-language="zh-hant"] .timeline-title-en,
html[data-main-language="en"] .timeline-title-zh,
html[data-main-language="en"] .timeline-title-hant {
  display:none;
}
html[data-main-language="zh-hans"] .story-hant,
html[data-main-language="zh-hans"] .story-en,
html[data-main-language="zh-hant"] .story-zh,
html[data-main-language="zh-hant"] .story-en,
html[data-main-language="en"] .story-zh,
html[data-main-language="en"] .story-hant {
  display:none;
}
.motion-switch {
  position:relative; flex:0 0 auto; width:1.9rem; height:1.02rem; border:1px solid rgba(255,255,255,.22);
  border-radius:999px; background:rgba(120,120,126,.55); transition:background .3s ease,border-color .3s ease;
}
.motion-switch::after {
  content:""; position:absolute; left:.13rem; top:.12rem; width:.66rem; height:.66rem; border-radius:50%;
  background:#f2f2f2; box-shadow:0 1px 4px rgba(0,0,0,.28);
  transition:transform .34s cubic-bezier(.22,.61,.36,1),background .3s ease;
}
html[data-motion="full"] #motion-toggle .motion-switch { background:rgba(255,255,255,.4); border-color:rgba(255,255,255,.92); }
html[data-motion="full"] #motion-toggle .motion-switch::after { transform:translateX(.82rem); background:#0a0a0a; }
html[data-sound="on"] #sound-toggle .motion-switch { background:rgba(255,255,255,.4); border-color:rgba(255,255,255,.92); }
html[data-sound="on"] #sound-toggle .motion-switch::after { transform:translateX(.82rem); background:#0a0a0a; }
.motion-mode-label { min-width:1.8rem; color:rgba(255,255,255,.62); white-space:nowrap; text-align:center; }
.start-screen:not(.is-hidden) ~ .screen-controls { z-index:110; opacity:1; pointer-events:auto; }
.start-screen:not(.is-hidden) ~ .screen-controls .fullscreen-button-corner { display:none; }
.sound-button { border-radius:0 999px 999px 0; padding-right:var(--screen-control-pad-x); }
.control-button {
  width:2.25rem; height:2.25rem; display:inline-flex; align-items:center; justify-content:center;
  padding:.62rem; border-radius:50%; background:rgba(255,255,255,.13);
  font:500 .7rem/1 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; text-shadow:0 1px 4px rgba(0,0,0,.75);
}
.chapter-info {
  position:absolute; top:2.5vw; left:2.5vw; z-index:10; opacity:0; pointer-events:none;
  text-shadow:0 1px 4px rgba(0,0,0,.75); transition:opacity .7s ease;
}
.app.is-image-mode .chapter-info { opacity:.82; }
.chapter-year { font:300 .75rem/1.3 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.25em; margin-bottom:.55rem; }
.chapter-title-zh { font-size:calc(1.25rem * var(--content-font-scale)); font-weight:400; letter-spacing:.08em; margin-bottom:.2rem; }
.chapter-title-en { font:var(--content-font-size-en)/1.4 "Newsreader","Times New Roman",Georgia,serif; }

.narrative {
  position:absolute; inset:0; z-index:12; display:flex; align-items:center; justify-content:center;
  padding:7vh 10vw 8rem; opacity:0; transition:opacity 1.25s ease; pointer-events:none;
}
.narrative-gesture-hint {
  position:absolute; left:50%; bottom:6.35rem; z-index:2;
  display:flex; align-items:center; gap:.45rem;
  color:rgba(255,255,255,.72); opacity:0;
  transform:translate(-50%,.35rem); transition:opacity .45s ease,transform .45s ease;
  pointer-events:none; white-space:nowrap;
  font:500 .66rem/1.4 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif;
}
.narrative-gesture-hint::before { content:"↑"; font-size:.9rem; }
.narrative-gesture-hint.is-visible { opacity:1; transform:translate(-50%,0); }
.narrative-hint-zh,.narrative-hint-hant { letter-spacing:.08em; }
.narrative-hint-en { letter-spacing:.035em; }
html[data-main-language="zh-hans"] .narrative-hint-hant,
html[data-main-language="zh-hans"] .narrative-hint-en,
html[data-main-language="zh-hant"] .narrative-hint-zh,
html[data-main-language="zh-hant"] .narrative-hint-en,
html[data-main-language="en"] .narrative-hint-zh,
html[data-main-language="en"] .narrative-hint-hant { display:none; }
body.is-light-narrative .narrative-gesture-hint { color:rgba(0,0,0,.66); }
.narrative.is-visible { opacity:1; }
.app.is-text-mode .narrative.is-visible { pointer-events:auto; touch-action:none; user-select:none; -webkit-user-select:none; }
.app.is-image-mode .narrative { opacity:0; }
.app.is-light-narrative { background:#fff; }
.app.is-js-fading .narrative { transition-duration:1s; }
.app.is-js-fading .chapter-visual { transition:none; }
.poem { --line-gap:clamp(1.25rem,2.5vh,1.75rem); position:relative; width:min(78vw,68rem); height:58vh; text-align:center; }
.poem .poem-step {
  position:absolute; top:50%; left:0; width:100%; opacity:0; filter:blur(.28rem);
  transform:translateY(calc(-50% + var(--step-offset))) scale(.88);
  transition:none; will-change:transform,opacity,filter;
}
.poem .poem-step.is-neighbor { opacity:.38; filter:blur(.04rem); }
.poem .poem-step.is-active { opacity:1; filter:blur(0); transform:translateY(-50%) scale(1); }
.step-zh { font-size:var(--narrative-font-size-zh); line-height:1.58; letter-spacing:.065em; font-weight:400; color:#fff; }
.step-en { margin-top:.32rem; font:var(--narrative-font-size-en)/1.5 "Newsreader","Times New Roman",Georgia,serif; color:rgba(255,255,255,.76); letter-spacing:.01em; }
.poem .is-neighbor .step-zh { color:rgba(255,255,255,.68); }
.poem .is-neighbor .step-en { color:rgba(255,255,255,.5); }
.step-zh,.step-en { transition:none; }
.term-ref {
  display:inline; margin-left:.12em; padding:0; border:0; background:none; color:inherit; cursor:pointer;
  font:600 .58em/1 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; vertical-align:super; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:.16em; pointer-events:auto; opacity:.82;
}
.term-ref:hover,.term-ref:focus-visible { opacity:1; outline:1px solid rgba(255,255,255,.6); outline-offset:2px; }
body.is-light-narrative .term-ref:hover,body.is-light-narrative .term-ref:focus-visible { outline-color:rgba(0,0,0,.55); }

.timeline {
  position:absolute; z-index:120; left:50%; bottom:.35rem; width:min(94%,84rem); height:4.7rem;
  transform:translateX(-50%); display:flex; align-items:flex-start; gap:1rem;
  font-family:"Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif;
}
.timeline-track {
  position:relative; flex:1; height:4.7rem; overflow:visible;
}
.timeline-track-inner {
  position:relative; height:4.7rem; width:100%;
  display:flex; align-items:flex-start; justify-content:space-between;
}
.timeline-line {
  position:absolute; left:3.5%; right:3.5%; top:1.7rem; border-top:1px dashed rgba(255,255,255,.32);
}
.timeline-stop {
  position:relative; z-index:1; min-width:4.2rem; height:4.7rem; padding:0 .25rem; border:0; background:transparent;
  color:rgba(255,255,255,.45); cursor:pointer;
  transition:color .45s ease,transform .45s ease;
}
.timeline-stop:hover,.timeline-stop:focus-visible,.timeline-stop.is-active { color:#fff; outline:none; }
.timeline-dot {
  position:absolute; left:50%; top:1.36rem; transform:translateX(-50%);
  width:.68rem; height:.68rem; border:1px solid currentColor; border-radius:50%; background:rgba(0,0,0,.74);
  box-shadow:0 0 0 .22rem rgba(0,0,0,.35); transition:background .3s ease,box-shadow .3s ease;
}
.timeline-stop.is-active .timeline-dot { background:#fff; box-shadow:0 0 .8rem rgba(255,255,255,.72); }
.timeline-year {
  position:absolute; left:50%; top:.15rem; transform:translateX(-50%);
  font:500 .61rem/1 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.09em; white-space:nowrap;
}
.timeline-title {
  position:absolute; left:50%; top:2.35rem; transform:translateX(-50%) translateY(-.2rem);
  width:max-content; max-width:13rem; opacity:0; pointer-events:none; color:#fff; white-space:nowrap;
  transition:opacity .55s ease,transform .55s ease;
}
.timeline-title-zh,.timeline-title-hant { display:block; font:500 .65rem/1.2 "Noto Serif SC","Songti SC",serif; letter-spacing:.08em; }
.timeline-title-en { display:block; margin-top:.18rem; font:normal .55rem/1.2 "Newsreader","Times New Roman",Georgia,serif; color:rgba(255,255,255,.62); }
.timeline-stop.is-active .timeline-title { opacity:.88; transform:translateX(-50%) translateY(0); }
.timeline-arrow { flex:0 0 auto; margin-top:.575rem; opacity:.65; }
.timeline-arrow:hover,.timeline-arrow:focus-visible { opacity:1; }
.timeline-arrow:disabled { opacity:.2; cursor:default; }

.context-toggle {
  position:absolute; z-index:125; right:1rem; top:50%; transform:translateY(-50%) rotate(-90deg);
  min-width:8.2rem; padding:.55rem .9rem; border:1px solid rgba(255,255,255,.3); border-radius:999px 999px 0 0;
  background:rgba(22,22,22,.58); color:rgba(255,255,255,.78); cursor:pointer;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  font:500 .62rem/1.15 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.08em; white-space:nowrap;
}
/* In a windowed desktop layout, the rotated pill must follow the board edge rather than its
   unrotated box. The paired 50% translations cancel the width/height offset introduced by
   the quarter turn, so the visible right edge lands exactly on the experience border. */
html:not(.is-kiosk-mode) body:not(.is-fullscreen) .context-toggle {
  right:0;
  transform:translateY(-50%) translateX(50%) rotate(-90deg) translateY(-50%);
}
html:not(.is-kiosk-mode) body.is-fullscreen .context-toggle {
  right:0;
  transform:translateY(-50%) translateX(50%) rotate(-90deg) translateY(-50%);
}
.context-toggle span + span { margin-left:.45rem; opacity:.62; }
.context-toggle:hover,.context-toggle:focus-visible { color:#fff; border-color:rgba(255,255,255,.7); outline:none; }
.context-toggle.is-unavailable { opacity:0; visibility:hidden; pointer-events:none; }
.context-panel {
  position:absolute; z-index:130; top:0; right:0; bottom:0; height:100%; width:min(36vw,29rem); padding:2.4rem 2rem 2rem;
  background:rgba(18,18,18,.57); border-left:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(24px) saturate(.72); -webkit-backdrop-filter:blur(24px) saturate(.72);
  transform:translateX(0); clip-path:inset(0 0 0 100%); opacity:0; visibility:hidden;
  transition:clip-path .55s cubic-bezier(.22,.61,.36,1),opacity .4s ease,visibility 0s linear .55s;
  display:flex; flex-direction:column; overflow:auto; box-shadow:-1rem 0 3rem rgba(0,0,0,.24);
}
.context-panel.is-open { clip-path:inset(0); opacity:1; visibility:visible; transition-delay:0s; }
.context-collapse {
  position:absolute; z-index:136; top:50%; right:min(36vw,29rem); width:1.7rem; height:3rem;
  transform:translate(50%,-50%); border:1px solid rgba(255,255,255,.28); border-radius:999px;
  background:rgba(28,28,28,.72); color:rgba(255,255,255,.72); cursor:pointer;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease;
  font:500 .58rem/1 Arial,sans-serif;
}
.context-collapse svg { width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.context-panel.is-open + .context-collapse { opacity:1; visibility:visible; pointer-events:auto; }
.context-collapse:hover,.context-collapse:focus-visible { color:#fff; border-color:rgba(255,255,255,.7); outline:none; }
.context-kicker { font:600 .61rem/1 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.2em; color:rgba(255,255,255,.45); margin-bottom:1.4rem; }
.context-language-toggle { display:flex; width:max-content; margin:-.25rem 0 1.35rem; padding:.16rem; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(0,0,0,.12); }
.context-language-toggle button { min-width:4.5rem; padding:.4rem .65rem; border:0; border-radius:999px; background:transparent; color:rgba(255,255,255,.46); cursor:pointer; font:500 .58rem/1 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.04em; transition:background .2s ease,color .2s ease; }
.context-language-toggle button[aria-pressed="true"] { background:rgba(255,255,255,.13); color:rgba(255,255,255,.92); }
.context-language-toggle button:focus-visible { outline:1px solid rgba(255,255,255,.7); outline-offset:2px; }
.context-body-hant { display:none; font-family:"Noto Serif TC","Songti TC",serif; }
.context-panel[data-language="zh-hans"] .context-body-en,.context-panel[data-language="zh-hans"] .context-body-hant,
.context-panel[data-language="zh-hant"] .context-body-en,.context-panel[data-language="zh-hant"] .context-body-zh,
.context-panel[data-language="en"] .context-body-zh,.context-panel[data-language="en"] .context-body-hant { display:none !important; }
.context-panel[data-language="en"] [data-context-chinese] { display:none !important; }
.context-panel[data-language="zh-hant"] .context-body-hant { display:block; }
.context-panel[data-language="en"] .context-title-zh,
.context-panel[data-language="zh-hans"] .context-title-en,
.context-panel[data-language="zh-hant"] .context-title-en { display:none !important; }
.context-content h2 { font-size:var(--context-title-size-zh); line-height:1.38; font-weight:400; letter-spacing:.05em; margin-bottom:.35rem; }
.context-content .context-title-en { font:calc(.92rem * var(--content-font-scale))/1.4 "Newsreader","Times New Roman",Georgia,serif; color:rgba(255,255,255,.68); margin-bottom:1rem; }
.context-panel[data-language="en"] .context-content .context-title-en {
  font:500 var(--context-title-size-en)/1.4 "Work Sans","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.015em; color:rgba(255,255,255,.92); margin-bottom:.35rem;
}
.context-content .context-lead-note { color:rgba(255,255,255,.66); margin-bottom:1rem; }
.context-lead-note-source { color:rgba(255,255,255,.55); font-size:.85em; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.4); }
.context-lead-note-source:hover,.context-lead-note-source:focus-visible { color:#fff; }
.context-content p { font-size:var(--context-font-size-zh); line-height:1.82; color:rgba(255,255,255,.75); margin-bottom:1rem; }
.context-content a { overflow-wrap:anywhere; word-break:break-word; }
.context-content .context-en { font:normal var(--context-font-size-en)/1.76 "Newsreader","Times New Roman",Georgia,serif; color:rgba(255,255,255,.72); }
.context-rule { width:2.5rem; border:0; border-top:1px solid rgba(255,255,255,.28); margin:1.5rem 0; }
.context-material { font:600 .58rem/1 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif !important; letter-spacing:.15em; color:rgba(255,255,255,.42) !important; }
/* 序言/先导文阶段的术语手风琴：默认全部展开（<details open>），点标题收起——留在同一页，
   不再是点了就跳到一个只剩这条术语的空页面；也不再挂圆圈编号，编号只用于内部排序。 */
.context-term-list { display:flex; flex-direction:column; gap:.5rem; margin-top:1.2rem; }
.context-term-item {
  border:1px solid rgba(255,255,255,.14); border-radius:.6rem; overflow:hidden;
  background:rgba(255,255,255,.03); transition:background .3s ease;
}
.context-term-item.is-highlighted { background:rgba(255,255,255,.16); }
.context-term-item-summary {
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  list-style:none; cursor:pointer; padding:.65rem .85rem;
}
.context-term-item-summary::-webkit-details-marker { display:none; }
.context-term-item-summary::after {
  content:"−"; flex:0 0 auto; font-family:Arial,sans-serif; color:rgba(255,255,255,.5);
}
.context-term-item:not([open]) .context-term-item-summary::after { content:"+"; }
.context-term-item-label { display:block; font-size:var(--content-font-size-zh); line-height:1.5; color:rgba(255,255,255,.86); }
.context-term-item-number { display:inline-block; margin-right:.5em; font:calc(.82rem * var(--content-font-scale))/1.5 "Newsreader","Times New Roman",Georgia,serif; color:rgba(255,255,255,.5); }
.context-term-item-en { display:block; margin-top:.15rem; font:calc(.82rem * var(--content-font-scale))/1.5 "Newsreader","Times New Roman",Georgia,serif; color:rgba(255,255,255,.55); }
.context-panel[data-language="en"] .context-term-item-en {
  margin-top:0; font:500 var(--content-font-size-ui)/1.45 "Work Sans","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.02em; color:rgba(255,255,255,.88);
}
.context-term-item-body { padding:0 .85rem .8rem; }
.context-term-item-body p { margin:0; font-size:calc(.86rem * var(--content-font-scale)); line-height:1.7; }
.context-term-item-body .context-body-zh { color:rgba(255,255,255,.8); }
.context-term-item-body .context-en {
  margin-top:.4rem; color:rgba(255,255,255,.55);
  font-family:"Newsreader","Times New Roman",Georgia,serif; font-style:italic;
}
.context-primary { padding-bottom:.75rem; }
.epilogue-context-section { padding:1rem 0 .15rem; border-top:1px solid rgba(255,255,255,.16); }
.epilogue-context-section:first-child { padding-top:0; border-top:0; }
.epilogue-context-section h3 { margin:0 0 .7rem; font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-size:var(--content-font-size-ui); line-height:1.4; font-weight:500; letter-spacing:.045em; color:rgba(255,255,255,.9); }
.epilogue-context-section h3 small { display:block; margin-top:.16rem; font:italic calc(.68rem * var(--content-font-scale))/1.35 "Newsreader","Times New Roman",Georgia,serif; letter-spacing:0; color:rgba(255,255,255,.48); }
.context-panel[data-language="en"] .epilogue-context-section h3 small {
  margin-top:0; font:500 var(--content-font-size-ui)/1.4 "Work Sans","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.02em; color:rgba(255,255,255,.9);
}
.epilogue-context-sources { margin:.9rem 0 0; padding-left:1.1rem; }
.epilogue-context-sources li { margin:.55rem 0; font-size:calc(.68rem * var(--content-font-scale)); line-height:1.5; color:rgba(255,255,255,.52); }
.epilogue-context-sources a { color:rgba(255,255,255,.7); text-underline-offset:.18em; }
.context-section { border-top:1px solid rgba(255,255,255,.18); padding:.9rem 0; }
.context-section:last-child { border-bottom:1px solid rgba(255,255,255,.18); }
.context-section summary { cursor:pointer; list-style:none; font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-size:var(--content-font-size-ui-sm); line-height:1.4; font-weight:500; letter-spacing:.05em; color:rgba(255,255,255,.9); }
.context-section summary::-webkit-details-marker { display:none; }
.context-section summary::after { content:"+"; float:right; font-family:Arial,sans-serif; color:rgba(255,255,255,.5); }
.context-section[open] summary::after { content:"−"; }
.context-section summary span { display:block; margin-top:.18rem; font:calc(.68rem * var(--content-font-scale))/1.3 "Newsreader","Times New Roman",Georgia,serif; color:rgba(255,255,255,.45); }
.context-section summary > [data-context-chinese] { display:inline; margin:0; font:inherit; color:inherit; }
html[data-main-language="en"] .context-section summary > [data-context-chinese] { display:none; }
.context-panel[data-language="en"] .context-section summary .context-en-label {
  display:inline; margin:0; font:500 var(--content-font-size-ui-sm)/1.4 "Work Sans","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.035em; color:rgba(255,255,255,.9);
}
.context-section > p:first-of-type,.context-section > figure:first-of-type,.context-section > blockquote:first-of-type { margin-top:.55rem; }
.context-gallery-intro { margin:0 0 .55rem; font-size:calc(.76rem * var(--content-font-scale)); line-height:1.7; color:rgba(255,255,255,.68); }
.context-gallery-intro.is-ubiquity {
  margin:.8rem 0 1.15rem; color:rgba(255,255,255,.76);
}
.context-gallery-intro.is-ubiquity strong { display:block; margin-bottom:.22rem; color:rgba(255,255,255,.96); font-weight:600; letter-spacing:.035em; }
.context-reference { margin:1rem 0; }
.context-reference-media { position:relative; }
.context-reference-media.is-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; }
.context-reference-media-item { position:relative; min-width:0; }
.context-reference-media.is-pair img { height:15rem; object-fit:cover; object-position:top center; }
.context-reference img { display:block; width:100%; max-height:16rem; object-fit:cover; border-radius:.55rem; border:1px solid rgba(255,255,255,.16); }
.context-reference.is-contain img { height:16rem; object-fit:contain; background:rgba(255,255,255,.035); }
.context-reference figcaption { margin-top:.5rem; line-height:1.55; color:rgba(255,255,255,.72); }
.context-reference figcaption > .context-body-zh,
.context-reference figcaption > .context-body-hant {
  font-size:var(--context-caption-size-zh); line-height:1.55;
}
.context-reference figcaption > .context-body-en {
  font:normal var(--context-caption-size-en)/1.55 "Newsreader","Times New Roman",Georgia,serif;
}
.context-reference figcaption small { display:block; margin-top:.32rem; color:rgba(255,255,255,.46); }
.context-reference figcaption small .context-body-zh,
.context-reference figcaption small .context-body-hant {
  font-size:var(--context-credit-size-zh); line-height:1.5;
}
.context-reference figcaption small .context-body-en {
  font:normal var(--context-credit-size-en)/1.5 "Newsreader","Times New Roman",Georgia,serif;
}
.context-reference-description { margin:.62rem 0 0; line-height:1.68; color:rgba(255,255,255,.68); }
.context-reference.is-homage { margin-top:1.75rem; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.28); }
.context-reference-kind { margin:0 0 .55rem; font-size:calc(.64rem * var(--content-font-scale)); letter-spacing:.08em; color:rgba(255,255,255,.5); }
/* 来源/credit 是唯一带明确"点了会跳转外链"意图的文字，用下划线标出来，跟不可点的图片、说明文字区分开。 */
.context-reference-credit { color:inherit; text-decoration:underline; text-underline-offset:.15em; }
.context-reference-credit:hover,.context-reference-credit:focus-visible { color:#fff; }

/* 参考图片右下角的放大镜按钮，点开后交给下面的 .image-lightbox 全屏弹窗展示大图。 */
.context-reference { position:relative; }
.context-reference-zoom {
  position:absolute; z-index:2; right:.55rem; bottom:.55rem;
  display:flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem;
  border:1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(0,0,0,.55);
  color:#fff; cursor:zoom-in; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.context-reference-zoom svg { width:1rem; height:1rem; }
.context-reference-zoom:hover,.context-reference-zoom:focus-visible { background:rgba(0,0,0,.78); border-color:#fff; outline:none; transform:scale(1.06); }

.image-lightbox {
  position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
  padding:4vh 4vw; opacity:0; visibility:hidden; cursor:zoom-out; transition:opacity .25s ease;
}
.image-lightbox.is-open { opacity:1; visibility:visible; }
body.is-image-lightbox-open,
body.is-image-lightbox-open * { cursor:zoom-out !important; }
.image-lightbox-backdrop {
  position:absolute; inset:0; border:0; margin:0; padding:0; cursor:zoom-out;
  background:rgba(0,0,0,.75); /* 周围背景 75% 黑色遮罩，点它关闭大图 */
}
.image-lightbox-figure {
  position:relative; z-index:1; max-width:92vw; max-height:90vh; margin:0;
  display:flex; flex-direction:column; align-items:center;
}
.image-lightbox-img {
  display:block; max-width:92vw; max-height:80vh; object-fit:contain;
  border-radius:.4rem; box-shadow:0 1.5rem 3.5rem rgba(0,0,0,.55);
}
.image-lightbox-caption {
  margin-top:.7rem; max-width:36rem; text-align:center; font-size:.72rem; line-height:1.5;
  color:rgba(255,255,255,.78);
}
.image-lightbox-caption:empty { display:none; }

/* 小说原文全文阅读——原本是独立的 full-story.html，现在合并成主体验里的一个全屏覆盖层，
   这样简繁英切换、字体系统直接复用主站那一套，不用另外再挂一遍 OpenCC。
   排版规则基本照搬原来 full-story.html 的 <style>，只是从"整个页面"改成"一个 section"。 */
.full-story-screen {
  position:fixed; inset:0; z-index:75; overflow-y:auto;
  background:#050505; color:rgba(255,255,255,.86);
  font-family:"Noto Serif SC","Songti SC","Newsreader","Times New Roman",serif;
  padding:6vh 6vw 12vh; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.full-story-screen.is-active { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
/* 全文阅读跟跋的历史背景侧栏、时间线都无关，打开全文阅读时把这两个都藏起来，
   避免侧栏按钮抢戏、时间线的文字跟正文重叠打架。 */
body.is-full-story-open #context-toggle,
body.is-full-story-open #timeline {
  display:none !important;
}
.story-page { max-width:40rem; margin:0 auto; }
.story-back {
  display:inline-flex; align-items:center; gap:.4rem; border:0; background:none; cursor:pointer;
  color:rgba(255,255,255,.55); text-decoration:none; letter-spacing:.06em;
  font:inherit; font-size:.82rem; border-bottom:1px solid transparent;
  transition:color .25s ease,border-color .25s ease;
}
.story-back:hover,.story-back:focus-visible { color:rgba(255,255,255,.92); border-color:rgba(255,255,255,.55); outline:none; }
.story-header { margin:3.2rem 0 3rem; text-align:center; }
.story-title { font-size:1.9rem; font-weight:500; letter-spacing:.14em; color:#fff; }
.story-subtitle {
  display:block; margin-top:.55rem; font-family:"Newsreader","Times New Roman",Georgia,serif;
  font-style:italic; font-size:.92rem; letter-spacing:.04em; color:rgba(255,255,255,.5);
}
.story-p { margin-bottom:1.3rem; }
.story-zh,.story-hant {
  display:block; font-size:calc(1.02rem * var(--content-font-scale)); line-height:1.95; letter-spacing:.03em; text-align:justify;
  color:rgba(255,255,255,.9);
}
.story-en {
  display:block; margin-top:.32rem; font-family:"Newsreader","Times New Roman",Georgia,serif;
  font-size:calc(.88rem * var(--content-font-scale)); line-height:1.65; letter-spacing:.01em; text-align:justify;
  color:rgba(255,255,255,.72);
}
.story-break { text-align:center; margin:2.1rem 0; color:rgba(255,255,255,.35); letter-spacing:1em; font-size:.8rem; }
.story-footer { margin-top:4rem; text-align:center; }
.story-footer .story-back { font-size:.85rem; }
@media (max-width:640px) {
  .full-story-screen { padding:8vh 7vw 14vh; }
  .story-title { font-size:1.5rem; }
  .story-zh,.story-hant { font-size:calc(.96rem * var(--content-font-scale)); line-height:1.8; }
  .story-en { font-size:calc(.81rem * var(--content-font-scale)); line-height:1.55; }
}
.context-sources { margin:1.1rem 0 .2rem; padding:0; list-style:none; border-top:1px solid rgba(255,255,255,.12); }
.context-sources li { padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:var(--content-font-size-caption); line-height:1.5; }
.context-sources a { color:rgba(255,255,255,.73); text-decoration:none; }
.context-sources a:hover,.context-sources a:focus-visible { color:#fff; text-decoration:underline; text-underline-offset:.18em; }
.context-section blockquote,
.context-novel-body blockquote { border-left:1px solid rgba(255,255,255,.35); padding-left:1rem; font-size:calc(.84rem * var(--content-font-scale)); line-height:1.9; color:rgba(255,255,255,.78); white-space:pre-line; }

/* "小说原文阅读"不再是本地展开一段侧栏摘录，而是直接跳到全文阅读——
   跟其它入口共用 .fullscreen-button 的圆角胶囊/描边/毛玻璃底，形状统一。
   固定在侧栏底部（position:sticky），滚动到任何一段历史背景都始终看得见、点得到。 */
.context-content {
  --context-sticky-bottom:1rem;
  display:flex; flex:1 1 auto; flex-direction:column; min-height:0;
}
.context-novel-section {
  position:sticky; bottom:var(--context-sticky-bottom); z-index:5; margin:auto 0 0; padding:0;
  display:flex; justify-content:center;
}
.context-novel-toggle { width:auto; justify-content:center; text-align:center; }
.context-novel-toggle span {
  margin-left:.4rem;
  font:calc(.68rem * var(--content-font-scale))/1.3 "Newsreader","Times New Roman",Georgia,serif;
  color:rgba(255,255,255,.55);
}
.hotspot-reading { margin:1rem 0; }
.context-reading-section { margin-bottom:.9rem !important; }
.context-reading-section.is-original {
  margin-top:.75rem; padding:.85rem 1rem .95rem; border-left:2px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.035); font-size:calc(.92rem * var(--content-font-scale)); line-height:1.85;
  color:rgba(255,255,255,.9);
}
.context-reading-section.is-personal { margin-top:1.15rem; padding-top:.9rem; border-top:1px dotted rgba(255,255,255,.28); font-style:italic; color:rgba(255,255,255,.57); }
.context-reading-label { display:block; margin-bottom:.34rem; font:600 .58rem/1.25 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.88); }
.hotspot-reading-en { margin-top:1.25rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.13); }
/* The English body is the only visible body in English mode, so it starts where
   the Chinese body starts instead of retaining the bilingual separator. */
.context-panel[data-language="en"] .hotspot-reading-en { margin-top:0; padding-top:0; border-top:0; }
.context-en .context-reading-section { font:normal calc(.9rem * var(--content-font-scale))/1.7 "Newsreader","Times New Roman",Georgia,serif; color:rgba(255,255,255,.55); }
.context-en .context-reading-section.is-original { font-size:calc(.92rem * var(--content-font-scale)); line-height:1.85; color:rgba(255,255,255,.9); }
.context-en .context-reading-section.is-personal { font-style:italic; color:rgba(255,255,255,.57); }
.context-en .context-reading-label { font:600 .55rem/1.25 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; font-style:normal; color:rgba(255,255,255,.58); }
.context-reading-section.is-supporting { margin-top:1rem; padding-top:.72rem; border-top:1px solid rgba(255,255,255,.1); font-size:var(--content-font-size-caption); line-height:1.6; color:rgba(255,255,255,.5); }
.context-en .context-reading-section.is-supporting { font-size:var(--content-font-size-caption); }
.context-citation { margin-left:.08em; font:600 .58rem/1 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; color:rgba(255,255,255,.78); vertical-align:super; }
.hotspot-source { font:.68rem/1.5 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; color:rgba(255,255,255,.48) !important; }
.hotspot-source a { color:rgba(255,255,255,.72); text-underline-offset:.18em; }
.reference-gallery { margin:1.4rem 0 1.65rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.16); }
.reference-gallery h3,.circulation-records h4 { margin:0 0 .75rem; font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-size:var(--content-font-size-ui-sm); font-weight:500; line-height:1.4; letter-spacing:.05em; color:rgba(255,255,255,.92); }
.context-panel[data-language="zh-hant"] .context-section summary,
.context-panel[data-language="zh-hant"] .epilogue-context-section h3,
.context-panel[data-language="zh-hant"] .reference-gallery h3,
.context-panel[data-language="zh-hant"] .circulation-records h4 {
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
}
.reference-gallery h3 span,.circulation-records h4 span { display:block; margin-top:.18rem; font:italic calc(.68rem * var(--content-font-scale))/1.35 "Newsreader","Times New Roman",Georgia,serif; color:rgba(255,255,255,.5); }
.context-panel[data-language="en"] .reference-gallery h3 span,
.context-panel[data-language="en"] .circulation-records h4 span {
  margin-top:0; font:500 var(--content-font-size-ui-sm)/1.4 "Work Sans","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.025em; color:rgba(255,255,255,.9);
}
.reference-gallery h3 > [data-context-chinese],.circulation-records h4 > [data-context-chinese] { display:inline; margin:0; font:inherit; color:inherit; }
.reference-gallery > p { margin-bottom:.55rem; font-size:calc(.76rem * var(--content-font-scale)); line-height:1.7; }
.reference-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; margin:1rem 0; }
.reference-gallery-thumb { position:relative; aspect-ratio:3/4; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:.5rem; background:rgba(255,255,255,.04); cursor:zoom-in; opacity:.78; transition:opacity .25s ease,border-color .25s ease,transform .25s ease; }
.reference-gallery-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.reference-gallery-thumb:hover,.reference-gallery-thumb:focus-visible { opacity:1; border-color:rgba(255,255,255,.72); transform:translateY(-2px); outline:none; }
/* 缩略图右下角的放大镜，和单图参考（.context-reference-zoom）用同一套视觉语言，保持全站图片放大入口一致；
   点击缩略图直接打开全局居中大图（#image-lightbox），侧栏里不再单独再放一套小型内嵌大图。 */
.reference-gallery-thumb-zoom {
  position:absolute; z-index:2; right:.35rem; bottom:.35rem;
  display:flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem;
  border:1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(0,0,0,.55);
  color:#fff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.reference-gallery-thumb-zoom svg { width:.78rem; height:.78rem; }
.circulation-records { margin-top:1.15rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.12); }
.circulation-records > p { font-size:var(--content-font-size-caption); line-height:1.65; margin-bottom:.5rem; color:rgba(255,255,255,.58); }
.circulation-records ul { margin:.75rem 0 0; padding-left:1rem; }
.circulation-records li { margin:.45rem 0; color:rgba(255,255,255,.48); }
.circulation-records a { font-size:calc(.66rem * var(--content-font-scale)); line-height:1.45; color:rgba(255,255,255,.72); text-underline-offset:.18em; }
.context-anchor {
  margin:1rem 0 1.2rem; border-left:1px solid rgba(255,255,255,.35); padding-left:1rem;
  font-size:calc(.84rem * var(--content-font-scale)); line-height:1.8; color:rgba(255,255,255,.78);
}
.context-anchor span { display:block; margin-top:.55rem; font-family:"Newsreader","Times New Roman",Georgia,serif; color:rgba(255,255,255,.56); }
.context-empty { color:rgba(255,255,255,.38) !important; font-size:.75rem !important; }

body.is-light-narrative .fullscreen-button-corner,
body.is-light-narrative .motion-button,
body.is-light-narrative .control-button {
  border-color:rgba(0,0,0,.34); background:rgba(255,255,255,.48); color:#171717; text-shadow:none;
}
body.is-light-narrative .screen-controls { --screen-control-divider:rgba(0,0,0,.18); }
body.is-light-narrative .fullscreen-button-corner:hover,
body.is-light-narrative .fullscreen-button-corner:focus-visible,
body.is-light-narrative .motion-button:hover,
body.is-light-narrative .motion-button:focus-visible,
body.is-light-narrative .control-button:hover,
body.is-light-narrative .control-button:focus-visible { background:rgba(0,0,0,.09); border-color:rgba(0,0,0,.72); }
body.is-light-narrative .timeline-line { border-top-color:rgba(0,0,0,.28); }
body.is-light-narrative .timeline-stop { color:rgba(0,0,0,.43); }
body.is-light-narrative .timeline-stop:hover,
body.is-light-narrative .timeline-stop:focus-visible,
body.is-light-narrative .timeline-stop.is-active { color:#111; }
body.is-light-narrative .timeline-dot { background:rgba(255,255,255,.82); box-shadow:0 0 0 .22rem rgba(255,255,255,.45); }
body.is-light-narrative .timeline-stop.is-active .timeline-dot { background:#111; box-shadow:0 0 .8rem rgba(0,0,0,.28); }
body.is-light-narrative .timeline-title { color:#111; }
body.is-light-narrative .timeline-title-en { color:rgba(0,0,0,.58); }
body.is-light-narrative .context-toggle {
  border-color:rgba(0,0,0,.28); background:rgba(255,255,255,.62); color:rgba(0,0,0,.7);
}
body.is-light-narrative .context-toggle:hover,body.is-light-narrative .context-toggle:focus-visible { color:#111; border-color:rgba(0,0,0,.65); }

.hotspots { position:absolute; inset:0; z-index:35; pointer-events:none; opacity:0; transition:opacity .8s ease; }
.app.is-image-mode.is-hotspots-ready .hotspots { opacity:1; pointer-events:auto; }
.app.is-transitioning .hotspots,.app.is-transitioning .chapter-info { opacity:0; pointer-events:none; }
@property --glance-x {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --glance-y {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --glance-radius-x {
  syntax: "<length>";
  inherits: true;
  initial-value: 7rem;
}

@property --glance-radius-y {
  syntax: "<length>";
  inherits: true;
  initial-value: 7rem;
}

.memory-layer {
  position:absolute; inset:0; z-index:44; pointer-events:none; opacity:0;
  transition:opacity .4s ease;
}
.app.is-memory-active .memory-layer { opacity:1; }
.memory-vignette {
  position:absolute; inset:0; opacity:0;
  transition:opacity .45s ease;
}
.memory-vignette::before {
  content:""; position:absolute; inset:0;
}
.memory-vignette::before {
  /* Keep the selected memory at its original colour; dim everything else. */
  background:rgba(0,0,0,.82);
  -webkit-mask-image:radial-gradient(
    ellipse var(--glance-radius-x,7rem) var(--glance-radius-y,7rem) at var(--glance-x,50%) var(--glance-y,50%),
    transparent 0,
    transparent 72%,
    rgba(0,0,0,.16) 86%,
    rgba(0,0,0,.58) 104%,
    #000 124%
  );
  mask-image:radial-gradient(
    ellipse var(--glance-radius-x,7rem) var(--glance-radius-y,7rem) at var(--glance-x,50%) var(--glance-y,50%),
    transparent 0,
    transparent 72%,
    rgba(0,0,0,.16) 86%,
    rgba(0,0,0,.58) 104%,
    #000 124%
  );
}
.memory-layer.is-glancing .memory-vignette,
.memory-layer.is-frozen .memory-vignette,
.memory-layer.is-previewing .memory-vignette { opacity:1; }
.memory-layer.is-opening .memory-vignette {
  transition-duration:var(--opening-focus-duration,2.25s);
  transition-timing-function:cubic-bezier(.22,1,.36,1);
}
.memory-cues { position:absolute; inset:0; }
.memory-cue {
  position:absolute; transform:translate(-50%,-50%);
  width:var(--cue-width,7rem); height:var(--cue-height,7rem);
  border:0; background:transparent; border-radius:999px; cursor:pointer;
  pointer-events:none; opacity:0; transition:opacity .35s ease;
}
.memory-cue:focus-visible { outline:none; }
.app.is-memory-cues-ready .memory-cue { opacity:1; pointer-events:auto; }
.memory-thought,
.audio-hint {
  position:absolute; left:2rem; bottom:6rem; max-width:min(32rem,54vw);
  padding:1rem 1.1rem .95rem; border-radius:1rem;
  background:rgba(17,16,18,.56); color:#f6f2eb; border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 .8rem 2rem rgba(0,0,0,.28);
  opacity:0; transform:translateY(.6rem); transition:opacity .3s ease, transform .3s ease;
}
.memory-thought.is-visible,
.audio-hint.is-visible {
  opacity:1; transform:translateY(0);
}
.memory-thought p,
.audio-hint p { margin:0; }
.memory-thought {
  left:50%; top:29.8%; bottom:auto; width:min(63rem,63vw); max-width:none; min-height:8rem;
  padding:0; background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  transform:translate(-50%,-46%) scale(.975);
  transition:opacity 1.02s ease, transform 1.15s cubic-bezier(.16,1,.3,1);
}
.memory-thought::before {
  content:""; position:absolute; inset:-1rem -1.8rem;
  background:radial-gradient(
    ellipse at center,
    rgba(0,0,0,.75) 0,
    rgba(0,0,0,.75) 44%,
    rgba(0,0,0,.68) 58%,
    rgba(0,0,0,.46) 71%,
    rgba(0,0,0,.2) 83%,
    rgba(0,0,0,.1) 90%,
    transparent 100%
  );
  filter:blur(8px);
}
.memory-thought::after {
  content:""; position:absolute; inset:-4.5rem -6rem; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.28) 0, rgba(0,0,0,.14) 50%, transparent 78%);
  filter:blur(24px);
}
.memory-thought.is-visible { transform:translate(-50%,-50%) scale(1); }
.memory-thought.is-interactive { transition-duration:.16s; }
.memory-thought.is-leaving { opacity:0; transform:translate(-50%,-49.5%) scale(.985); }
.memory-thought-inner {
  position:relative; z-index:2; min-height:8rem; padding:1.05rem 2.6rem 1rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  animation:memory-text-focus 2.21s cubic-bezier(.16,1,.3,1) both;
}
.memory-thought.is-interactive .memory-thought-inner { animation-duration:.42s; }
.memory-thought-zh,
.memory-thought-en {
  width:100%; max-width:none; margin:0; color:#fff; text-align:center; text-wrap:balance;
}
.memory-thought-zh {
  font:400 var(--memory-font-size-zh)/1.68 "Noto Serif SC","Songti SC",serif;
  letter-spacing:.025em;
}
.memory-thought-en {
  margin-top:0;
  font:500 var(--memory-font-size-en)/1.5 "Newsreader","Times New Roman",Georgia,serif;
  color:rgba(255,255,255,.88);
  letter-spacing:.005em;
  white-space:pre-line;
}
.memory-thought.is-center { left:50%; top:29.8%; bottom:auto; }
.memory-thought.is-center.is-visible { transform:translate(-50%,-50%); }
.audio-hint { left:auto; right:1.5rem; bottom:5.75rem; max-width:16rem; padding:.8rem .9rem; }
.audio-hint p { font:.68rem/1.5 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; color:rgba(255,245,235,.78); }
.sound-button { border-radius:0 999px 999px 0; }

@keyframes memory-text-focus {
  0% { opacity:.06; filter:blur(24px); transform:translateY(.35rem) scale(1.2); }
  100% { opacity:1; filter:blur(0); transform:translateY(0) scale(1); }
}

@media (prefers-reduced-motion:reduce) {
  .memory-vignette::before,
  .memory-thought-inner,
  .memory-thought-zh,
  .memory-thought-en {
    animation:none !important;
  }
  .memory-thought-zh,
  .memory-thought-en {
    opacity:1;
    filter:none;
    transform:none;
  }
}

.hotspot {
  position:absolute; width:.82rem; height:.82rem; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.9);
  border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; box-shadow:0 0 0 0 rgba(255,255,255,.45);
  animation:hotspot-breathe 2.4s ease-out infinite;
}
.hotspot::after { content:""; position:absolute; inset:-.42rem; border-radius:50%; }
.hotspot:hover,.hotspot:focus-visible { background:#fff; outline:none; animation-play-state:paused; }
.hotspot--text-group {
  border:1.5px solid rgba(255,255,255,1);
  background:rgba(255,255,255,.5);
  animation-name:hotspot-text-breathe;
}
.hotspot--text-group:hover,.hotspot--text-group:focus-visible { background:#fff; }
.door-trigger {
  position:absolute; transform:translate(-50%,-50%); padding:0; border:0; border-radius:.45rem;
  background:transparent; color:#fff; cursor:pointer; touch-action:manipulation;
}
.door-trigger-assistive {
  position:absolute; left:50%; top:50%; width:clamp(2.15rem,2.75vw,3rem); height:auto; overflow:visible;
  opacity:.68; filter:drop-shadow(0 .15rem .28rem rgba(0,0,0,.42));
  transform:translate(-50%,-50%); transform-origin:center;
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.2,1);
  animation:door-trigger-assistive-breathe 2.55s cubic-bezier(.37,0,.63,1) infinite;
  pointer-events:none;
}
.door-trigger-ring { fill:rgba(255,255,255,.12); stroke:rgba(255,255,255,.42); stroke-width:1; }
.door-trigger-core {
  fill:rgba(255,255,255,.76); stroke:rgba(255,255,255,.92); stroke-width:.75;
  transform-box:fill-box; transform-origin:center;
  animation:door-trigger-core-breathe 2.25s ease-in-out infinite;
}
.door-trigger-pulse {
  fill:none; stroke:rgba(255,255,255,.58); stroke-width:1;
  transform-box:fill-box; transform-origin:center;
  animation:door-trigger-pulse 2.55s cubic-bezier(.2,.65,.25,1) infinite;
}
.door-trigger:hover .door-trigger-assistive,.door-trigger:focus-visible .door-trigger-assistive {
  opacity:.9; animation-play-state:paused; transform:translate(-50%,-50%) scale(1.045);
}
.door-trigger:hover .door-trigger-pulse,.door-trigger:hover .door-trigger-core,
.door-trigger:focus-visible .door-trigger-pulse,.door-trigger:focus-visible .door-trigger-core { animation-play-state:paused; }
.door-trigger:focus-visible { outline:1px solid rgba(255,255,255,.72); outline-offset:.28rem; }
.door-trigger.is-triggered .door-trigger-assistive { opacity:0; animation:none; pointer-events:none; }
@keyframes door-trigger-assistive-breathe {
  0%,100% { opacity:.56; transform:translate(-50%,-50%) scale(.97); }
  48% { opacity:.78; transform:translate(-50%,-50%) scale(1.035); }
}
@keyframes door-trigger-pulse {
  0% { opacity:.72; transform:scale(.62); }
  78%,100% { opacity:0; transform:scale(1.42); }
}
@keyframes door-trigger-core-breathe {
  0%,100% { opacity:.62; transform:scale(.9); }
  50% { opacity:1; transform:scale(1.08); }
}
@keyframes hotspot-breathe { 0% { box-shadow:0 0 0 0 rgba(255,255,255,.45); } 70% { box-shadow:0 0 0 .65rem rgba(255,255,255,0); } 100% { box-shadow:0 0 0 0 rgba(255,255,255,0); } }
@keyframes hotspot-text-breathe {
  0% { box-shadow:0 0 .38rem .1rem rgba(255,255,255,.88),0 0 0 0 rgba(255,255,255,.82); }
  70% { box-shadow:0 0 .62rem .18rem rgba(255,255,255,.64),0 0 0 1.08rem rgba(255,255,255,0); }
  100% { box-shadow:0 0 .38rem .1rem rgba(255,255,255,.42),0 0 0 0 rgba(255,255,255,0); }
}
.hotspot-tooltip {
  position:absolute; z-index:140; left:0; top:50%; width:min(17rem,72vw); padding:.85rem 1rem; border:1px solid rgba(255,255,255,.24);
  border-radius:.8rem; background:rgba(28,28,28,.70); color:#fff; opacity:0; pointer-events:none;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transform:translateY(-50%);
  transition:opacity .22s ease; box-shadow:0 .8rem 2.4rem rgba(0,0,0,.35);
}
.hotspot-tooltip.is-visible { opacity:1; }
.hotspot-tooltip strong { display:block; font-size:calc(.87rem * var(--content-font-scale)); font-weight:500; margin-bottom:.18rem; }
.hotspot-tooltip .tooltip-translation {
  font:500 calc(.86rem * var(--content-font-scale))/1.4 "Work Sans","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.015em; color:rgba(255,255,255,.92);
}
.hotspot-tooltip p { margin-top:.48rem; font-size:var(--content-font-size-caption); line-height:1.55; color:rgba(255,255,255,.7); }
.hotspot-tooltip .tooltip-note-en {
  margin-top:.38rem; font:normal calc(.74rem * var(--content-font-scale))/1.55 "Newsreader","Times New Roman",Georgia,serif;
  color:rgba(255,255,255,.78);
}
.hotspot-tooltip .tooltip-more { color:#fff; font:600 .58rem/1.4 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.hotspot-tooltip button.tooltip-more {
  display:block; width:100%; margin-top:.7rem; padding:.72rem .25rem .08rem; border:0;
  border-top:1px solid rgba(255,255,255,.2); background:transparent; color:#fff;
  cursor:pointer; text-align:left;
}
.hotspot-tooltip button.tooltip-more:focus-visible { outline:1px solid rgba(255,255,255,.8); outline-offset:.3rem; }

/* 平板和 kiosk 触屏:使用真实 viewport，并保留 48px 点击区域。 */
html.is-touch-device .screen-controls { top:1.25rem; right:1.25rem; }
html.is-touch-device .screen-controls button,
html.is-touch-device .main-language-toggle,
html.is-touch-device .main-language-toggle button {
  min-height:48px;
}
html.is-touch-device .main-language-toggle button { min-width:48px; }
html.is-touch-device .fullscreen-button-corner,
html.is-touch-device .motion-button { padding-left:14px; padding-right:14px; }
html.is-touch-device .fullscreen-button-corner,
html.is-touch-device .motion-button { gap:.55rem; }
html.is-touch-device .fullscreen-button-corner,
html.is-touch-device .motion-button,
html.is-touch-device .main-language-toggle button { font-size:.7rem; }
html.is-touch-device .font-size-badge { width:1.55rem; height:1.55rem; margin:0 .08rem; }
html.is-touch-device .fullscreen-invitation .fullscreen-button,
html.is-touch-device .context-novel-toggle,
html.is-touch-device .story-back { min-height:48px; touch-action:manipulation; }
html.is-touch-device .control-button,
html.is-touch-device .timeline-arrow,
html.is-touch-device .timeline-stop,
html.is-touch-device .context-toggle,
html.is-touch-device .context-collapse {
  min-width:48px;
  min-height:48px;
  touch-action:manipulation;
}
html.is-touch-device .context-toggle { padding:.8rem 16px; }
html.is-touch-device .hotspot::after { inset:-17px; }
html.is-touch-device .hotspot-tooltip.is-visible { pointer-events:auto; }
html.is-touch-device .door-trigger { min-width:52px; min-height:52px; }

@media (max-width:900px) {
  /* iPad 分屏和较窄平板直接使用完整可见区域，不制造横向画布。 */
  .experience { width:100vw; height:100dvh; border:none; }
  .context-toggle { right:1rem; }
  .context-panel { width:min(78vw,27rem); }
  .context-collapse { right:min(78vw,27rem); }
  .memory-thought { left:50%; right:auto; top:26%; bottom:auto; width:min(90vw,40rem); max-width:none; }
  .memory-thought.is-center { left:50%; right:auto; top:26%; bottom:auto; transform:translate(-50%,-48%) scale(.985); max-width:none; }
  .memory-thought.is-center.is-visible { transform:translate(-50%,-50%) scale(1); }
  .memory-thought.is-center.is-leaving { transform:translate(-50%,-49.5%) scale(.99); }
  .memory-thought-inner { min-height:8rem; padding:.95rem 1.7rem .9rem; }
  .audio-hint { left:1rem; right:1rem; bottom:9.8rem; max-width:none; }

  /* 时间线:横向滑动 + 吸附居中(snap scroll)。
     inner 是真正被滚动的那一层,虚线和圆点在同一层一起滚动,虚线不会再"断开"。 */
  .timeline { width:100%; gap:.4rem; }
  .timeline-track {
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .timeline-track::-webkit-scrollbar { display:none; }
  .timeline-track-inner {
    justify-content:flex-start; gap:1.1rem; width:max-content;
    padding:0 42vw; /* 让首尾也能滑到屏幕正中,制造居中吸附感 */
  }
  .timeline-stop { scroll-snap-align:center; scroll-snap-stop:always; flex:0 0 auto; min-width:3.2rem; }
  .timeline-line { left:calc(42vw + 1.6rem); right:calc(42vw + 1.6rem); }
  .timeline-title { max-width:8rem; }
  .timeline-title-zh,.timeline-title-hant { font-size:.56rem; }
  .timeline-title-en { font-size:.48rem; }
}

@media (max-width:600px) {
  /* 控制栏:默认只显示一个圆形汉堡按钮,点开才展开四个开关。
     order:1 让这个按钮始终排在容器最右边(锚定边);
     展开时容器往左边变宽,这个按钮的屏幕位置不会跟着挪动,
     所以在同一个位置就能点开/点关,不会出现"打开了关不掉"的问题。 */
  .screen-controls { padding:.22rem; }
  .controls-collapse-toggle {
    order:1; position:relative; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    width:2.1rem; height:2.1rem; border:0; border-radius:50%;
    background:rgba(255,255,255,.13); cursor:pointer;
  }
  .controls-collapse-toggle-bar {
    position:absolute; left:50%; width:.85rem; height:1px;
    background:#fff; transform:translateX(-50%);
    transition:transform .25s ease, opacity .2s ease;
  }
  .controls-collapse-toggle-bar:nth-child(1) { top:.75rem; }
  .controls-collapse-toggle-bar:nth-child(2) { top:1.05rem; }
  .controls-collapse-toggle-bar:nth-child(3) { top:1.35rem; }
  .screen-controls.is-expanded .controls-collapse-toggle-bar:nth-child(1) { transform:translateX(-50%) translateY(.3rem) rotate(45deg); }
  .screen-controls.is-expanded .controls-collapse-toggle-bar:nth-child(2) { opacity:0; }
  .screen-controls.is-expanded .controls-collapse-toggle-bar:nth-child(3) { transform:translateX(-50%) translateY(-.3rem) rotate(-45deg); }

  .screen-controls > button:not(.controls-collapse-toggle),
  .screen-controls > .main-language-toggle {
    width:0; padding:0; opacity:0; pointer-events:none; overflow:hidden;
    transition:width .25s ease, opacity .2s ease, padding .25s ease;
  }
  .screen-controls.is-expanded > button:not(.controls-collapse-toggle),
  .screen-controls.is-expanded > .main-language-toggle {
    width:auto; padding:.32rem .52rem; opacity:1; pointer-events:auto;
  }
}

/* ------------------------------------------------------------------
   以下这组规则专门用 html.is-small-device 来判断"是不是手机",
   不用 @media(max-width) 断点。
   原因:index.html 头部的等比例缩放脚本会把任何 <1280px 的屏幕
   强制按 1280px 桌面版面渲染,再整体缩小显示——这样一来,
   CSS 看到的"版面宽度"永远不会小于 1280px,
   上面 @media(max-width:900px)/(max-width:600px) 这两组手机专属样式
   (控制栏折叠、更紧凑的间距等)在真手机上其实从来没有触发过。
   is-small-device 这个 class 是头部脚本用真实物理屏幕宽度
   (window.screen.width,不受缩放影响)另外打的标记,可以用它来
   确保这些手机专属样式一定会生效。
   ------------------------------------------------------------------ */
html.is-small-device .screen-controls { padding:.22rem; }
html.is-small-device .controls-collapse-toggle {
  order:1; position:relative; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  width:calc(44px / var(--viewport-scale,1)); height:calc(44px / var(--viewport-scale,1));
  border:0; border-radius:50%;
  background:rgba(255,255,255,.13); cursor:pointer;
}
html.is-small-device .controls-collapse-toggle-bar {
  position:absolute; left:50%; width:.85rem; height:1px;
  background:#fff; transform:translateX(-50%);
  transition:transform .25s ease, opacity .2s ease;
}
html.is-small-device .controls-collapse-toggle-bar:nth-child(1) { top:calc(50% - .3rem); }
html.is-small-device .controls-collapse-toggle-bar:nth-child(2) { top:50%; }
html.is-small-device .controls-collapse-toggle-bar:nth-child(3) { top:calc(50% + .3rem); }
html.is-small-device .screen-controls.is-expanded .controls-collapse-toggle-bar:nth-child(1) { transform:translateX(-50%) translateY(.3rem) rotate(45deg); }
html.is-small-device .screen-controls.is-expanded .controls-collapse-toggle-bar:nth-child(2) { opacity:0; }
html.is-small-device .screen-controls.is-expanded .controls-collapse-toggle-bar:nth-child(3) { transform:translateX(-50%) translateY(-.3rem) rotate(-45deg); }

html.is-small-device .screen-controls > button:not(.controls-collapse-toggle),
html.is-small-device .screen-controls > .main-language-toggle {
  width:0; padding:0; opacity:0; pointer-events:none; overflow:hidden;
  transition:width .25s ease, opacity .2s ease, padding .25s ease;
  min-height:calc(44px / var(--viewport-scale,1));
}
html.is-small-device .screen-controls.is-expanded > button:not(.controls-collapse-toggle),
html.is-small-device .screen-controls.is-expanded > .main-language-toggle {
  width:auto; padding:.32rem .52rem; opacity:1; pointer-events:auto;
}

/* 触控区域:手机上的圆点尺寸看起来跟桌面一样,但实际点击范围按物理 44px 放大,
   避免因为整体缩放导致点击热区比看起来的还要小。 */
html.is-small-device .control-button,
html.is-small-device .timeline-arrow {
  min-width:calc(44px / var(--viewport-scale,1));
  min-height:calc(44px / var(--viewport-scale,1));
}
html.is-small-device .timeline-stop {
  min-width:calc(44px / var(--viewport-scale,1));
  min-height:calc(44px / var(--viewport-scale,1));
}

/* 竖屏提示遮罩:只在手机 + 竖屏时出现,提醒横屏 + 进全屏,箭头指向右上角的全屏按钮。 */
.rotate-overlay {
  display:none; position:fixed; inset:0; z-index:200;
  align-items:center; justify-content:center; flex-direction:column;
  background:rgba(0,0,0,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  pointer-events:none;
}
html.is-small-device .rotate-overlay.is-visible { display:flex; pointer-events:auto; }
.rotate-overlay-text {
  text-align:center; color:#fff; cursor:pointer;
  padding:1.9rem 2.1rem; margin:0 2rem; border-radius:1.3rem;
  border:1px solid rgba(255,255,255,.38); background:rgba(255,255,255,.09);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.rotate-overlay-zh { font-size:1.7rem; font-weight:600; letter-spacing:.07em; margin-bottom:.55rem; }
.rotate-overlay-en { font:500 .95rem/1.5 "Noto Sans SC","Work Sans","Helvetica Neue",Arial,sans-serif; color:rgba(255,255,255,.82); }
.rotate-overlay-arrow { display:none; }

@media (max-height:600px) and (orientation:landscape) {
  .screen-controls { top:.7rem; right:.7rem; }
  .fullscreen-button { padding:.48rem .78rem; font-size:.6rem; }
  .control-button { width:1.9rem; height:1.9rem; padding:.45rem; }
  .chapter-info { top:1rem; left:1rem; }
  .narrative { padding:2.4rem 7vw 4.2rem; }
  .poem { height:64vh; }
  .poem { --line-gap:1rem; }
  .step-zh { font-size:calc(.94rem * var(--content-font-scale)); }
  .step-en { font-size:calc(.84rem * var(--content-font-scale)); }
  .timeline { bottom:0; height:3.5rem; }
  .timeline-track,.timeline-track-inner,.timeline-stop { height:3.5rem; }
  .timeline-line { top:1.25rem; }
  .timeline-dot { top:.99rem; width:.52rem; height:.52rem; }
  .timeline-year { top:.02rem; font-size:.5rem; }
  .timeline-title { top:1.82rem; }
  .timeline-arrow { margin-top:.3rem; }
  .context-panel { bottom:0; height:100%; width:min(68vw,25rem); padding:1.7rem 1.5rem; }
  .context-collapse { right:min(68vw,25rem); }
  .start-text { width:min(72vw,44rem); padding-bottom:3.3rem; }
  .start-paragraph { margin-bottom:.58rem; }
  .start-zh, .start-hant { font-size:calc(.78rem * var(--content-font-scale)); line-height:1.45; }
  .start-en { font-size:calc(var(--start-en-font-size-mobile,.76rem) * var(--content-font-scale)); line-height:1.3; }
  .epilogue-text { width:min(72vw,44rem); padding-bottom:3.2rem; }
  .epilogue-paragraph { margin-bottom:.58rem; }
  .epilogue-zh, .epilogue-hant { font-size:calc(.78rem * var(--content-font-scale)); line-height:1.45; }
  .epilogue-en { margin-top:.12rem; font-size:calc(.63rem * var(--content-font-scale)); line-height:1.3; }
  .start-credit { left:1rem; top:.85rem; max-width:18rem; font-size:.56rem; }
  .fullscreen-invitation { left:auto; right:1rem; bottom:3.8rem; width:13rem; transform:none; }
  .fullscreen-invitation-zh,.fullscreen-invitation-hant,.fullscreen-invitation-en { display:none; }
  .desktop-invitation { left:auto; right:1rem; bottom:3.8rem; width:13rem; transform:none; }
  .desktop-invitation-en { display:none; }
  .memory-thought { top:48%; bottom:auto; }
  .audio-hint { bottom:7.8rem; }
  html[data-content-font-size="large"] .start-text,
  html[data-content-font-size="large"] .epilogue-text { width:86vw; }
}

@media (min-width:1900px) and (min-height:1000px) {
  html { font-size:clamp(20px,1vw,28px); }
  .poem { width:min(72vw,76rem); }
  .timeline { width:min(82%,88rem); }
  .hotspot { width:1rem; height:1rem; }
}

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration:.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.01ms !important;
}

/* Hotspots remain discoverable in Reduced mode; only their small opacity/ring cue loops. */
html[data-motion="reduced"] .hotspot {
  animation-duration:2.4s !important;
  animation-iteration-count:infinite !important;
}

/* 第五章的门是必要叙事动作，在 Reduced 模式中保持原来的提示节奏。 */
html[data-motion="reduced"] .door-trigger-assistive {
  animation-duration:2.55s !important;
  animation-iteration-count:infinite !important;
}
html[data-motion="reduced"] .door-trigger-core {
  animation-duration:2.25s !important;
  animation-iteration-count:infinite !important;
}
html[data-motion="reduced"] .door-trigger-pulse {
  animation-duration:2.55s !important;
  animation-iteration-count:infinite !important;
}
html[data-motion="reduced"] .chapter-visual[data-index="4"] .chapter-motion-layer {
  transition-duration:var(--motion-fade-in,0ms) !important;
}
html[data-motion="reduced"] .door-wash { transition-duration:1.35s !important; }