*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101b2b;color:#fff;font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif}
body{-webkit-user-select:none;user-select:none}
button{cursor:pointer}
#viewport{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
#viewport.dragging{cursor:grabbing}
#track{display:flex;height:100%;width:max-content;will-change:transform}
.scene{position:relative;flex:none;width:max-content;min-width:100vw;height:100%;overflow:hidden}
.scene.scene-ready{min-width:0}
.scene>img:not(.sceneElement){display:block;height:100%;width:auto;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none}
.sceneElement{
  --el-duration:.7s;
  --el-delay:0s;
  --el-ease:ease-out;
  --el-shadow:drop-shadow(0 16px 28px #0008);
  position:absolute;z-index:1;display:block;height:auto;max-width:none;
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;user-select:none;-webkit-user-drag:none;
  filter:var(--el-shadow);
  transform-origin:center center;
  backface-visibility:hidden;
  transition:
    opacity var(--el-duration) var(--el-ease) var(--el-delay),
    transform var(--el-duration) var(--el-ease) var(--el-delay),
    filter var(--el-duration) var(--el-ease) var(--el-delay);
}
/* 初始态（位移/缩放幅度加大，便于在视窗内看清入场） */
.sceneElement.effect-fade{transform:translate(-50%,-50%)}
.sceneElement.effect-rise{transform:translate(-50%,calc(-50% + 64px))}
.sceneElement.effect-zoom{transform:translate(-50%,-50%) scale(.62)}
.sceneElement.effect-zoomOut{transform:translate(-50%,-50%) scale(1.38)}
.sceneElement.effect-pop{transform:translate(-50%,-50%) scale(.22)}
.sceneElement.effect-bounce{transform:translate(-50%,calc(-50% + 80px)) scale(.84)}
.sceneElement.effect-slideLeft{transform:translate(calc(-50% - 88px),-50%)}
.sceneElement.effect-slideRight{transform:translate(calc(-50% + 88px),-50%)}
.sceneElement.effect-slideDown{transform:translate(-50%,calc(-50% - 64px))}
.sceneElement.effect-fall{transform:translate(-50%,calc(-50% - 100px)) scale(.9)}
.sceneElement.effect-flipX{transform:translate(-50%,-50%) perspective(900px) rotateY(85deg) scale(.88)}
.sceneElement.effect-flipY{transform:translate(-50%,-50%) perspective(900px) rotateX(85deg) scale(.88)}
.sceneElement.effect-spinIn{transform:translate(-50%,-50%) rotate(-36deg) scale(.62)}
.sceneElement.effect-swing{transform:translate(-50%,calc(-50% - 28px)) rotate(-28deg)}
.sceneElement.effect-expandX{transform:translate(-50%,-50%) scaleX(.08)}
.sceneElement.effect-expandY{transform:translate(-50%,-50%) scaleY(.08)}
.sceneElement.effect-blur{transform:translate(-50%,-50%) scale(1.06);filter:blur(18px) var(--el-shadow)}
.sceneElement.is-visible{opacity:1}
/* 入场完成态 */
.sceneElement.effect-fade.is-visible,
.sceneElement.effect-rise.is-visible,
.sceneElement.effect-slideLeft.is-visible,
.sceneElement.effect-slideRight.is-visible,
.sceneElement.effect-slideDown.is-visible,
.sceneElement.effect-fall.is-visible,
.sceneElement.effect-swing.is-visible{transform:translate(-50%,-50%)}
.sceneElement.effect-zoom.is-visible,
.sceneElement.effect-zoomOut.is-visible,
.sceneElement.effect-pop.is-visible,
.sceneElement.effect-bounce.is-visible,
.sceneElement.effect-expandX.is-visible,
.sceneElement.effect-expandY.is-visible{transform:translate(-50%,-50%) scale(1)}
.sceneElement.effect-flipX.is-visible{transform:translate(-50%,-50%) perspective(900px) rotateY(0deg) scale(1)}
.sceneElement.effect-flipY.is-visible{transform:translate(-50%,-50%) perspective(900px) rotateX(0deg) scale(1)}
.sceneElement.effect-spinIn.is-visible{transform:translate(-50%,-50%) rotate(0deg) scale(1)}
.sceneElement.effect-blur.is-visible{transform:translate(-50%,-50%) scale(1);filter:blur(0) var(--el-shadow)}
.scene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 20%,transparent 80%,rgba(0,0,0,.12));pointer-events:none}
.sceneFallback{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:9px;padding:30px;text-align:center;color:#dce2ea;background:radial-gradient(circle at center,#233a57,#101b2b 70%)}
.sceneFallback strong{font-size:clamp(18px,2vw,28px);font-weight:600}
.sceneFallback span{font-size:13px;color:#aebdcd}
.hotspot{
  /* 宽高由 JS 按场景高度百分比写成 px；此处仅作未就绪时的占位 */
  --hotspot-size:48px;
  position:absolute;z-index:2;isolation:isolate;
  transform:translate(-50%,-50%);
  border:1px solid #ffe7b1;border-radius:50%;
  width:var(--hotspot-size);height:var(--hotspot-size);
  max-width:none;max-height:none;
  box-sizing:border-box;
  background:#e3ad52d9;color:#fff;
  box-shadow:0 0 0 7px #e9b95a2b,0 0 25px #e9b95a70;
  display:grid;place-items:center;padding:0;margin:0;
  line-height:1;
  transition:scale .2s,background .2s,box-shadow .2s;
  appearance:none;-webkit-appearance:none;
}
.hotspot.has-icon{
  background:transparent;border-color:transparent;
  box-shadow:none;overflow:visible;
}
.hotspotIcon{
  width:100%;height:100%;object-fit:contain;
  border-radius:50%;pointer-events:none;
  filter:drop-shadow(0 4px 12px #0008);
}
.hotspot::before{
  content:"";position:absolute;z-index:-1;inset:-8px;
  border:1px solid #f4c978b8;border-radius:50%;
  opacity:0;pointer-events:none;
}
.hotspot:hover,.hotspot:focus-visible{scale:1.12;outline:2px solid #fff}
.hotspot.anim-pulse{animation:hotspotGlow 2.4s ease-in-out infinite}
.hotspot.anim-pulse::before{animation:hotspotPulse 2.4s ease-out infinite}
.hotspot.anim-glow{animation:hotspotSoftGlow 2.2s ease-in-out infinite}
.hotspot.anim-bounce{animation:hotspotBounce 1.4s ease-in-out infinite}
.hotspot.anim-spin{animation:hotspotSpin 4s linear infinite}
.hotspot.anim-breathe{animation:hotspotBreathe 2s ease-in-out infinite}
.hotspot.anim-none,.hotspot.anim-none::before{animation:none}
@keyframes hotspotPulse{0%{transform:scale(.75);opacity:.8}70%,100%{transform:scale(1.8);opacity:0}}
@keyframes hotspotGlow{0%,100%{box-shadow:0 0 0 7px #e9b95a2b,0 0 25px #e9b95a70}50%{box-shadow:0 0 0 11px #e9b95a18,0 0 34px #e9b95a9c}}
@keyframes hotspotSoftGlow{0%,100%{filter:drop-shadow(0 0 6px #e9b95a66)}50%{filter:drop-shadow(0 0 16px #e9b95acc)}}
@keyframes hotspotBounce{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 8px))}}
@keyframes hotspotSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes hotspotBreathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}}
.top{position:fixed;z-index:4;top:0;left:0;right:0;padding:28px 40px;display:flex;align-items:flex-start;justify-content:flex-end;background:transparent;pointer-events:none}
.top>div:first-child{display:none}
.top h1{margin:0;font-size:clamp(22px,2.6vw,42px);letter-spacing:.12em}
.top p{margin:8px 0;color:#d4dce6;font-size:14px}
.topActions{display:flex;gap:10px;pointer-events:auto}
.top button{pointer-events:auto;border:1px solid #ffffff66;background:#14253b99;color:white;border-radius:50%;width:36px;height:36px}
#bgmToggle[hidden],#autoPlayToggle[hidden]{display:none!important}
#bgmToggle[aria-pressed="false"],#autoPlayToggle[aria-pressed="false"]{opacity:.55}
#bgmToggle.is-playing{
  border-color:#f0c47caa;
  background:#1a334fdd;
  animation:bgmSpin 4.5s linear infinite;
}
#autoPlayToggle[aria-pressed="true"]{
  border-color:#2ec4b6aa;
  background:#163a45dd;
  color:#9ff5ea;
}
#help[aria-pressed="true"]{
  border-color:#f0c47caa;
  background:#1a334fdd;
  color:#f0c47c;
}
@keyframes bgmSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@media(prefers-reduced-motion:reduce){
  #bgmToggle.is-playing{animation:none}
}
.bottom{position:fixed;z-index:4;bottom:0;left:0;right:0;padding:28px 40px;display:flex;gap:22px;align-items:center;background:linear-gradient(transparent,#07101bd9);pointer-events:none}
#chapter{width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
#percent{font-variant-numeric:tabular-nums;font-size:13px}
#progress{height:24px;flex:1;display:flex;align-items:center;position:relative;cursor:pointer;touch-action:none;pointer-events:auto}
#progress:before{content:"";position:absolute;left:0;right:0;height:3px;background:#ffffff66;border-radius:3px}
#progressFill{height:3px;width:0;background:#f0c47c;border-radius:3px}
#thumb{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);height:13px;width:13px;background:#f0c47c;border-radius:50%}
.scrollHints{
  position:fixed;z-index:4;left:50%;bottom:76px;
  transform:translateX(-50%) translateY(8px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;
  max-width:min(920px,92vw);padding:8px 14px;
  border-radius:999px;border:1px solid #ffffff22;
  background:#0b162bcc;backdrop-filter:blur(10px);
  color:#dce6f0;font-size:12px;letter-spacing:.04em;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease,transform .35s ease,visibility .35s;
  visibility:hidden;
}
.scrollHints.is-visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.scrollHints.is-gone{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(6px)}
.scrollHints[hidden]{display:none!important}
.scrollHints kbd{
  display:inline-block;margin-right:4px;padding:1px 6px;
  border:1px solid #ffffff30;border-radius:5px;
  background:#ffffff12;color:#f0c47c;font:600 11px/1.4 system-ui,sans-serif;
}
@media(max-width:700px){
  .scrollHints{bottom:64px;gap:6px 10px;padding:7px 10px;font-size:11px;border-radius:16px}
}
.mediaError{color:#ffc6a3!important}
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:30px}
.shade{position:absolute;inset:0;background:#050b15db;backdrop-filter:blur(8px)}
.dialog{position:relative;background:linear-gradient(145deg,#1a2b43f5,#101d30f5);color:#f6f7f9;width:min(680px,92vw);max-height:82vh;overflow:auto;border:1px solid #ffffff30;border-radius:20px;padding:30px 32px 28px;box-shadow:0 24px 90px #000b,0 0 0 1px #07101b80;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff42 transparent;user-select:text;-webkit-user-select:text}
.dialog h2{margin:0 46px 20px 0;font-size:clamp(20px,2vw,28px);font-weight:650;letter-spacing:.04em;color:#fff}
.dialog p{margin:0 0 14px;line-height:1.85;color:#dce2ea;white-space:pre-wrap;user-select:text;-webkit-user-select:text}
.dialog p:last-child{margin-bottom:0}
.dialog img{display:block;max-width:100%;max-height:52vh;margin:0 auto 20px;border-radius:12px;object-fit:contain;box-shadow:0 10px 35px #0005}
.dialog video{display:block;width:100%;background:#000;border-radius:12px;max-height:58vh;margin:0 auto 4px}
#close{position:absolute;right:18px;top:16px;width:34px;height:34px;padding:0;font-size:24px;line-height:1;color:#dbe5f1;border:1px solid #ffffff26;border-radius:50%;background:#ffffff0d;transition:background .2s,color .2s}
#close:hover,#close:focus-visible{color:#fff;background:#ffffff1f;outline:2px solid #f0c47c}
#toast{position:fixed;z-index:20;top:110px;left:50%;transform:translateX(-50%);background:#0b162bdc;padding:10px 18px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.show{opacity:1}
@media(prefers-reduced-motion:reduce){
  .hotspot,.hotspot::before,.dialog,#close,.sceneElement{transition:none;animation:none!important}
  .sceneElement{opacity:1;transform:translate(-50%,-50%)!important;filter:var(--el-shadow)!important}
  .hotspot{transform:translate(-50%,-50%)!important}
}
@media(max-width:700px){.top{padding:18px}.bottom{padding:22px 18px}#chapter{width:80px}.dialog{padding:20px}}

/* —— 开场加载 —— */
.splash{
  --splash-accent:#2ec4b6;
  --splash-bg:#061018;
  --splash-text:#e8f4f2;
  position:fixed;inset:0;z-index:50;
  display:grid;place-items:center;
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, color-mix(in srgb, var(--splash-accent) 18%, transparent), transparent 70%),
    linear-gradient(160deg, var(--splash-bg), color-mix(in srgb, var(--splash-bg) 70%, #0c1c2c) 48%, var(--splash-bg));
  color:var(--splash-text);
  cursor:default;
  transition:opacity .7s ease,visibility .7s,transform .7s ease;
}
.splash.is-skipable{cursor:pointer;pointer-events:auto}
.splash.is-skipable .splashInner{pointer-events:none}
.splash.is-done{opacity:0;visibility:hidden;pointer-events:none}
.splash[data-exit="zoom"].is-done{transform:scale(1.06)}
.splash[data-exit="up"].is-done{transform:translateY(-36px)}
.splashInner{
  width:min(420px,86vw);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.splashLogo{
  display:block;object-fit:contain;margin-bottom:4px;
  filter:drop-shadow(0 8px 20px #0006);
}
.splashLogo[hidden]{display:none!important}
.splashLogo.size-sm{width:48px;height:48px}
.splashLogo.size-md{width:80px;height:80px}
.splashLogo.size-lg{width:120px;height:120px}
.splashBrand{
  margin:0;font-size:11px;letter-spacing:.28em;text-indent:.28em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--splash-accent) 80%, #fff);
  opacity:.9;
}
.splashBrand[hidden],
.splashVisual[hidden],
.splashProgressWrap[hidden],
.splashPercent[hidden],
.splashHint[hidden]{display:none!important}
.splashTitle{
  margin:0;
  font-size:clamp(22px,4.2vw,36px);
  font-weight:650;
  letter-spacing:.18em;
  text-indent:.18em;
  color:var(--splash-text);
}
.splashSubtitle{
  margin:0;font-size:13px;letter-spacing:.08em;
  color:color-mix(in srgb, var(--splash-text) 55%, #9bb0c2);
}
.splashHint{
  margin:10px 0 0;font-size:12px;letter-spacing:.06em;
  color:color-mix(in srgb, var(--splash-text) 45%, #8aa0b4);
}
.splashProgressWrap{
  width:100%;
  display:flex;align-items:center;gap:12px;
  margin-top:8px;
}
.splashProgress{
  flex:1;height:3px;border-radius:3px;
  background:#ffffff18;overflow:hidden;
}
.splashProgressFill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--splash-accent),#7ee8df);
  border-radius:3px;
  transition:width .25s ease;
  box-shadow:0 0 12px color-mix(in srgb, var(--splash-accent) 55%, transparent);
}
.splashPercent{
  font-size:12px;font-variant-numeric:tabular-nums;
  color:#c5d4e2;min-width:3em;text-align:right;
  opacity:1!important;visibility:visible;
}

.splashVisual{
  position:relative;
  width:96px;height:96px;
  margin-bottom:6px;
}
.splashVisual > *{position:absolute;inset:0;opacity:0;pointer-events:none}
.splash[data-style="ink"] .splashInk,
.splash[data-style="ring"] .splashRing,
.splash[data-style="bars"] .splashBars,
.splash[data-style="pulse"] .splashPulse,
.splash[data-style="orbit"] .splashOrbit{opacity:1}

.splashInk{
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--splash-accent) 70%, #fff) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--splash-accent) 45%, transparent), transparent 62%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--splash-accent) 35%, transparent);
  animation:splashInkBreath 2.4s ease-in-out infinite;
}
.splashInk::before,.splashInk::after{
  content:"";position:absolute;border-radius:50%;
  border:1px solid color-mix(in srgb, var(--splash-accent) 40%, transparent);
  inset:12px;animation:splashInkRipple 2.4s ease-out infinite;
}
.splashInk::after{inset:24px;animation-delay:.55s;opacity:.7}
@keyframes splashInkBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes splashInkRipple{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.25);opacity:0}}

.splashRing{display:grid;place-items:center}
.splashRing span{
  width:64px;height:64px;border-radius:50%;
  border:2px solid color-mix(in srgb, var(--splash-accent) 25%, transparent);
  border-top-color:var(--splash-accent);
  animation:splashSpin 1s linear infinite;
}
@keyframes splashSpin{to{transform:rotate(360deg)}}

.splashBars{
  display:flex;align-items:flex-end;justify-content:center;gap:6px;
  padding:18px 0;
}
.splashBars i{
  display:block;width:7px;border-radius:4px;
  background:var(--splash-accent);
  height:28%;
  animation:splashBar 1.1s ease-in-out infinite;
  opacity:.85;
}
.splashBars i:nth-child(2){animation-delay:.12s}
.splashBars i:nth-child(3){animation-delay:.24s}
.splashBars i:nth-child(4){animation-delay:.36s}
.splashBars i:nth-child(5){animation-delay:.48s}
@keyframes splashBar{0%,100%{height:22%}50%{height:72%}}

.splashPulse{
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--splash-accent) 55%, #fff) 0 18%, color-mix(in srgb, var(--splash-accent) 30%, transparent) 45%, transparent 70%);
  animation:splashPulse 1.8s ease-in-out infinite;
}
@keyframes splashPulse{0%,100%{transform:scale(.88);opacity:.75}50%{transform:scale(1.08);opacity:1}}

.splashOrbit{
  border-radius:50%;
  border:1px dashed color-mix(in srgb, var(--splash-accent) 40%, transparent);
  animation:splashSpin 6s linear infinite;
}
.splashOrbit::before{
  content:"";position:absolute;
  width:14px;height:14px;border-radius:50%;
  background:var(--splash-accent);
  top:-7px;left:calc(50% - 7px);
  box-shadow:0 0 14px var(--splash-accent);
}

@media(prefers-reduced-motion:reduce){
  .splashInk,.splashInk::before,.splashInk::after,.splashRing span,.splashBars i,.splashPulse,.splashOrbit{animation:none}
  .splash,.splash.is-done{transition:opacity .2s ease}
  .splashProgressFill{transition:none}
}