/* 故事 · 钟楼书房（2026-10-28）
   整个房间是一张图（assets/img/story-room.jpg，1536×1024），会动的东西都从这张图里拆出来叠在原位：
   钟的神兽环、内圈星盘（按圆环切出来转）、指针（SVG）、烛火与炉火（原位叠火光）、窗外的雪与灯火、光柱里的灰尘。
   .st-scene 用图片原始像素坐标排版，整体按视口缩放铺满（cover）；.st-cam 是镜头（推近天文钟就是改它的 transform）。 */
.st { position: relative; margin-top: 72px; height: calc(100svh - 72px); overflow: hidden; background: #07060a; color: #efe6d2; user-select: none; -webkit-user-select: none; }
.st-cam { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.st-scene { position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; transform-origin: 0 0; }
.st-bg { position: absolute; inset: 0; width: 1536px; height: 1024px; display: block; }

/* 钟：神兽环 168–258、内圈星盘 0–150，圆心 (777, 325) */
.st-ring, .st-disc, .st-glow { position: absolute; background: url(../img/story-room.jpg) no-repeat; background-size: 1536px 1024px; }
.st-ring { left: 519px; top: 67px; width: 516px; height: 516px; background-position: -519px -67px; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 166px, #000 168px, #000 257px, transparent 259px); mask: radial-gradient(circle, transparent 166px, #000 168px, #000 257px, transparent 259px); }
.st-disc { left: 627px; top: 175px; width: 300px; height: 300px; background-position: -627px -175px; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 145px, transparent 150px); mask: radial-gradient(circle, #000 145px, transparent 150px); animation: stSpin 600s linear infinite; }
@keyframes stSpin { to { rotate: 360deg; } }
.st-glow { left: 505px; top: 53px; width: 544px; height: 544px; background-position: -505px -53px; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  filter: contrast(3.2) brightness(.75) saturate(1.6); opacity: .25; animation: stBreathe 5s ease-in-out infinite;
  -webkit-mask: radial-gradient(circle, #000 262px, transparent 272px); mask: radial-gradient(circle, #000 262px, transparent 272px); }
@keyframes stBreathe { 50% { opacity: .6; } }
.st-hands { position: absolute; left: 627px; top: 175px; width: 300px; height: 300px; overflow: visible; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .7)); }
.st-hands g { transform-box: view-box; transform-origin: 150px 150px; }
.st-marker { position: absolute; left: 769px; top: 46px; width: 16px; height: 22px; background: linear-gradient(#ffe7a8, #b8873a); clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 0 6px rgba(255, 220, 140, .8)); pointer-events: none; }

/* 火：每个火苗一团光晕 + 一簇火舌，各自不规则地抖 */
.st-flame { position: absolute; pointer-events: none; }
.st-flame::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--s) * 9); height: calc(var(--s) * 9); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 110, .38), rgba(255, 140, 50, .12) 40%, transparent 70%); mix-blend-mode: screen; animation: stGlow var(--t) ease-in-out infinite alternate; animation-delay: var(--d); }
.st-flame::after { content: ''; position: absolute; left: 50%; bottom: 0; width: var(--s); height: calc(var(--s) * 1.9); translate: -50% 0; transform-origin: 50% 100%;
  border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%; background: radial-gradient(ellipse at 50% 72%, #fffbe6 0 22%, #ffd27a 38%, rgba(255, 140, 40, .75) 62%, transparent 76%);
  mix-blend-mode: screen; animation: stFlick calc(var(--t) * .5) steps(3) infinite; animation-delay: var(--d); }
@keyframes stGlow { 0% { opacity: .7; scale: .92; } 100% { opacity: 1; scale: 1.08; } }
@keyframes stFlick { 0% { transform: scaleY(1) skewX(0); opacity: .95; } 33% { transform: scaleY(1.18) skewX(-5deg); opacity: 1; } 66% { transform: scaleY(.88) skewX(4deg); opacity: .85; } 100% { transform: scaleY(1.06) skewX(-2deg); } }
.st-hearth { position: absolute; left: -120px; top: 640px; width: 560px; height: 420px; border-radius: 50%; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(ellipse, rgba(255, 150, 60, .9), rgba(255, 110, 40, .3) 45%, transparent 70%); animation: stHearth 1.7s ease-in-out infinite alternate; }
@keyframes stHearth { 0% { opacity: .55; } 30% { opacity: .9; } 55% { opacity: .65; } 100% { opacity: 1; } }

.st-fx { position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; pointer-events: none; }

/* 四个可以点的东西 */
.st-spot { position: absolute; cursor: pointer; border-radius: 6px; transition: box-shadow .3s, background-color .3s; outline: none; }
.st-spot:hover, .st-spot:focus-visible { box-shadow: 0 0 0 2px rgba(255, 226, 170, .55), 0 0 40px rgba(255, 210, 140, .35) inset; background: rgba(255, 220, 160, .04); }
.st-spot.is-clock { border-radius: 50%; }
.st-tag { position: absolute; z-index: 5; padding: 6px 14px 7px; font-family: var(--serif); font-size: 15px; letter-spacing: .25em; color: #f6ecd8; background: rgba(14, 10, 8, .82); border: 1px solid rgba(214, 178, 110, .55); pointer-events: none; white-space: nowrap; opacity: 0; translate: -50% 6px; transition: opacity .25s, translate .25s; }
.st-tag small { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .2em; color: rgba(236, 216, 180, .65); }
.st-tag.is-on { opacity: 1; translate: -50% 0; }

/* 标题：钟楼书房 */
.st-title { position: absolute; z-index: 4; left: 36px; bottom: 30px; pointer-events: none; font-family: var(--serif); text-shadow: 0 2px 10px #000; }
.st-title h1 { margin: 0; font-size: 38px; font-weight: 900; letter-spacing: .35em; }
.st-title p { margin: 6px 0 0; font-size: 13px; letter-spacing: .3em; color: rgba(236, 216, 180, .75); }

/* 挂毯目录 */
.st-toc { position: absolute; z-index: 6; left: 0; top: 0; bottom: 0; width: min(440px, 92vw); padding: 34px 30px 30px; box-sizing: border-box; overflow-y: auto; scrollbar-width: thin;
  background: linear-gradient(90deg, rgba(12, 8, 8, .97), rgba(30, 14, 14, .94)), repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .02) 3px 4px);
  border-right: 3px double rgba(196, 150, 80, .6); box-shadow: 30px 0 60px rgba(0, 0, 0, .6); translate: -105% 0; transition: translate .55s cubic-bezier(.2, .9, .2, 1); font-family: var(--serif); }
.st-toc.is-open { translate: 0 0; }
.st-toc-x { position: absolute; right: 16px; top: 14px; padding: 4px 10px; font: inherit; font-size: 20px; color: #e8d6b0; background: none; border: 0; cursor: pointer; }
.st-vol { margin: 0 0 4px; font-size: 13px; letter-spacing: .4em; color: #c9a467; }
.st-vol-name { margin: 0 0 22px; font-size: 30px; font-weight: 900; letter-spacing: .25em; }
.st-vol-name em { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; letter-spacing: .2em; color: rgba(232, 214, 176, .6); }
.st-act { margin: 18px 0 8px; padding-bottom: 6px; font-size: 14px; letter-spacing: .5em; color: #c9a467; border-bottom: 1px solid rgba(201, 164, 103, .35); }
.st-ch { display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline; gap: 10px; width: 100%; padding: 10px 6px; font: inherit; text-align: left; color: #efe3c8; background: none; border: 0; border-bottom: 1px dashed rgba(201, 164, 103, .18); cursor: pointer; transition: background .2s, padding .2s; }
.st-ch b { white-space: nowrap; font-size: 13px; letter-spacing: .1em; color: #c9a467; }
.st-ch span { font-size: 17px; letter-spacing: .08em; }
.st-ch i { font-style: normal; font-size: 11px; letter-spacing: .15em; color: rgba(232, 214, 176, .45); }
.st-ch:hover { background: rgba(201, 164, 103, .1); padding-left: 12px; }
.st-ch.is-ready i { color: #ffd98a; }
.st-ch.is-ready span::after { content: ' ✦'; color: #ffd98a; font-size: 12px; }

/* 进入一章：钟转到那一刻 */
.st-when { position: absolute; z-index: 7; left: 50%; bottom: 12%; translate: -50% 0; text-align: center; font-family: var(--serif); pointer-events: none; opacity: 0; text-shadow: 0 2px 14px #000, 0 0 30px rgba(0, 0, 0, .9); }
.st-when b { display: block; font-size: clamp(26px, 3.4vw, 46px); font-weight: 900; letter-spacing: .3em; color: #f7ecd2; }
.st-when span { display: block; margin-top: 8px; font-size: 14px; letter-spacing: .4em; color: #d9b878; }
.st-flash { position: absolute; z-index: 8; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, #f4f8ff 0 10%, rgba(190, 215, 255, .85) 30%, rgba(40, 50, 90, .6) 60%, #050409 85%); }
.st-skip { position: absolute; z-index: 9; right: 22px; top: 18px; padding: 6px 16px; font-family: var(--serif); font-size: 13px; letter-spacing: .25em; color: #f1e8dc; background: rgba(11, 10, 10, .55); border: 1px solid rgba(241, 232, 220, .4); cursor: pointer; display: none; }
.st.is-entering .st-skip { display: block; }
.st.is-entering .st-spot, .st.is-entering .st-title { pointer-events: none; }
.st.is-entering .st-title { opacity: 0; transition: opacity .4s; }

/* 落进那一刻（演出页还没做，先接第一句） */
.st-arrive { position: absolute; z-index: 10; inset: 0; display: grid; place-content: center; padding: 0 8vw; text-align: center; background: #0a0c12; opacity: 0; pointer-events: none; font-family: var(--serif); overflow: hidden; }
.st-arrive.is-on { pointer-events: auto; }
.st-arrive canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-arrive small { position: relative; display: block; font-size: 13px; letter-spacing: .5em; color: #9fb0c8; }
.st-arrive h2 { position: relative; margin: 10px 0 34px; font-size: clamp(30px, 4vw, 52px); letter-spacing: .3em; color: #eef2f8; font-weight: 900; }
.st-arrive p { position: relative; max-width: 34em; margin: 0 auto; font-size: clamp(17px, 1.5vw, 21px); line-height: 2.1; letter-spacing: .08em; color: #d8dee8; }
.st-arrive button { position: relative; margin-top: 46px; justify-self: center; padding: 8px 22px; font: inherit; font-size: 14px; letter-spacing: .3em; color: #d8dee8; background: none; border: 1px solid rgba(216, 222, 232, .4); cursor: pointer; }
.st-toast { position: absolute; z-index: 9; left: 50%; bottom: 40px; translate: -50% 0; padding: 10px 20px; font-family: var(--serif); letter-spacing: .2em; background: rgba(14, 10, 8, .9); border: 1px solid rgba(214, 178, 110, .5); opacity: 0; transition: opacity .3s; pointer-events: none; }
.st-toast.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .st-disc, .st-glow, .st-flame::before, .st-flame::after, .st-hearth { animation: none; } }

/* v2：钟摆（盖掉原图那条，换成会摆的）、四个齿轮（从原图切圆转）、书页轻轻翻、书的热点只亮书本 */
.st-patch { position: absolute; left: 726px; top: 560px; width: 102px; height: 280px; background: url(../img/story-room.jpg) no-repeat -726px -560px / 1536px 1024px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); filter: blur(5px) brightness(.85); }
.st-pend { position: absolute; left: 777px; top: 560px; width: 0; height: 0; transform-origin: 0 0; animation: stSwing 2s ease-in-out infinite alternate; }
.st-pend i { position: absolute; left: -2.5px; top: 0; width: 5px; height: 222px; background: linear-gradient(90deg, #5a3d16, #e8c77e, #6b4a1c); box-shadow: 0 0 4px rgba(0, 0, 0, .6); }
.st-pend b { position: absolute; left: -42px; top: 178px; width: 84px; height: 84px; border-radius: 50%; background: url(../img/story-room.jpg) no-repeat -735px -738px / 1536px 1024px; box-shadow: 0 6px 14px rgba(0, 0, 0, .6); }
@keyframes stSwing { from { transform: rotate(7deg); } to { transform: rotate(-7deg); } }
.st-gear { position: absolute; border-radius: 50%; background-image: url(../img/story-room.jpg); background-size: 1536px 1024px; animation: stGear 24s linear infinite; }
.st-gear:nth-of-type(odd) { animation-duration: 17s; }
@keyframes stGear { to { rotate: calc(var(--dir) * 360deg); } }
.st-page { position: absolute; left: 470px; top: 700px; width: 150px; height: 110px; transform-origin: 0% 60%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(236, 216, 176, .9), rgba(196, 168, 120, .85) 60%, rgba(120, 90, 50, .6)); clip-path: polygon(0 18%, 100% 0, 96% 86%, 0 100%); animation: stPage 9s ease-in-out infinite; }
@keyframes stPage { 0%, 72% { opacity: 0; transform: rotateY(0) skewY(0); } 76% { opacity: .9; transform: rotateY(10deg) skewY(-3deg); } 86% { opacity: .85; transform: rotateY(80deg) skewY(-8deg) translateX(-20px); } 92%, 100% { opacity: 0; transform: rotateY(170deg) translateX(-60px); } }
.st-spot.is-book { border-radius: 40% 40% 14% 14% / 30% 30% 10% 10%; clip-path: polygon(3% 12%, 52% 0, 97% 12%, 100% 82%, 50% 100%, 0 84%); }
.st-spot.is-book:hover, .st-spot.is-book:focus-visible { box-shadow: none; background: radial-gradient(ellipse, rgba(255, 226, 170, .22), transparent 70%); }
/* 指针更明显 */
.st-hands { filter: drop-shadow(0 0 6px rgba(255, 220, 150, .55)) drop-shadow(0 3px 4px rgba(0, 0, 0, .8)); }
.st { background: #050407; }
@media (prefers-reduced-motion: reduce) { .st-pend, .st-gear, .st-page { animation: none; } }
/* v2.1 */
.st-blur { position: absolute; inset: -40px; background: url(../img/story-room.jpg) center / cover; filter: blur(28px) brightness(.45) saturate(.8); }
.st-gear { -webkit-mask: radial-gradient(circle, #000 66%, transparent 72%); mask: radial-gradient(circle, #000 66%, transparent 72%); }
.st-pend i { left: -1.5px; width: 3px; background: linear-gradient(90deg, #4a3214, #b8955a, #5a3d18); }
.st-pend b { filter: brightness(.9); }
/* v3（作者 2026-10-28：画面必须铺满屏幕）：底图换成左右外扩的宽图（tools/outpaint-room.mjs），场景坐标不变，底图往左挪 512 */
.st-bg { left: -512px; width: 2560px; max-width: none; }
.st-blur, .st-gear { display: none; }

/* v4 火：真像素自己在烧 —— 静止时和底图完全重合，动起来是火苗被拉高、摆动、变亮 */
.st-flame { background: url(../img/story-room-wide.jpg) no-repeat; background-size: 2560px 1024px; transform-origin: 50% 92%;
  -webkit-mask: radial-gradient(ellipse 50% 52% at 50% 60%, #000 55%, transparent 100%); mask: radial-gradient(ellipse 50% 52% at 50% 60%, #000 55%, transparent 100%);
  animation: stLive var(--t) ease-in-out infinite alternate; animation-delay: var(--d); }
.st-flame::before, .st-flame::after { content: none; }
@keyframes stLive { 0% { transform: scale(1, 1) skewX(0deg); filter: brightness(1); } 30% { transform: scale(.94, 1.14) skewX(-4deg); filter: brightness(1.18); } 60% { transform: scale(1.04, .95) skewX(3deg); filter: brightness(.95); } 100% { transform: scale(.97, 1.1) skewX(-1.5deg); filter: brightness(1.12); } }
.st-flame.is-hearth { animation-duration: calc(var(--t) * .7); }
/* 光晕：只在火周围一点点，跟着闪 */
.st-hearth { left: -40px; top: 720px; width: 300px; height: 240px; opacity: .6; }
/* v4 钟摆：补画出来的干净木门 + 原图抠出来的钟摆 */
.st-patch { display: none; }
.st-plate { position: absolute; left: 722px; top: 552px; width: 110px; height: 305px; background: url(../img/story-room-plate.jpg) no-repeat -722px -552px / 1536px 1024px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.st-pend { left: 777px; top: 556px; animation: stSwing 1.6s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes stSwing { from { transform: rotate(5deg); } to { transform: rotate(-5deg); } }
.st-pend i { left: -11px; top: 0; width: 22px; height: 196px; background: url(../img/story-room.jpg) no-repeat -766px -556px / 1536px 1024px; box-shadow: none;
  -webkit-mask: linear-gradient(90deg, transparent 20%, #000 38%, #000 62%, transparent 80%); mask: linear-gradient(90deg, transparent 20%, #000 38%, #000 62%, transparent 80%); }
.st-pend b { left: -53px; top: 168px; width: 106px; height: 128px; border-radius: 0; background: url(../img/story-room.jpg) no-repeat -724px -724px / 1536px 1024px; box-shadow: none; filter: none;
  -webkit-mask: radial-gradient(circle 49px at 53px 56px, #000 96%, transparent 100%), linear-gradient(90deg, transparent 43%, #000 45%, #000 55%, transparent 57%); mask: radial-gradient(circle 49px at 53px 56px, #000 96%, transparent 100%), linear-gradient(90deg, transparent 43%, #000 45%, #000 55%, transparent 57%); }
/* v4 悬停：那件东西本身亮起来 */
.st-spot:hover, .st-spot:focus-visible, .st-spot.is-book:hover { box-shadow: none !important; background: none !important; }
.st-lift { position: absolute; pointer-events: none; opacity: 0; transition: opacity .35s; background: url(../img/story-room.jpg) no-repeat; background-size: 1536px 1024px; filter: brightness(1.38) saturate(1.12); }
.st-lift.is-on { opacity: 1; }
.st-lift.is-toc { left: 80px; top: 40px; width: 332px; height: 612px; background-position: -80px -40px; }
.st-lift.is-clock { left: 505px; top: 53px; width: 544px; height: 544px; background-position: -505px -53px; border-radius: 50%; }
.st-lift.is-window { left: 1240px; top: 0; width: 260px; height: 785px; background-position: -1240px 0; clip-path: polygon(3% 100%, 3% 17%, 12% 8%, 30% 2%, 50% 0, 70% 2%, 88% 8%, 97% 17%, 97% 100%); }
.st-lift.is-book { left: 292px; top: 690px; width: 386px; height: 150px; background-position: -292px -690px; -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 45%, #000 60%, transparent 100%); mask: radial-gradient(ellipse 50% 50% at 50% 45%, #000 60%, transparent 100%); } /* 和原图严丝合缝，不再错位 */
/* v5 书：真 3D 翻页。外层按书脊的斜度 skew，里层绕书脊 rotateY；正面是原图那一页（翻起来才看得见），背面是纸 */
.st-leaf { position: absolute; left: 443px; top: 700px; width: 190px; height: 100px; transform: skewX(12deg); transform-origin: 0 0; perspective: 700px; pointer-events: none; }
.st-leaf-in { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; animation: stLeaf 11s cubic-bezier(.45, .05, .35, 1) infinite; }
.st-leaf-f, .st-leaf-b, .st-leaf-s { position: absolute; inset: 0; clip-path: polygon(0 5%, 97% 0, 90% 95%, 0 100%); }
.st-leaf-f { background: url(../img/story-room.jpg) no-repeat -443px -700px / 1536px 1024px; backface-visibility: hidden; }
.st-leaf-b { background: linear-gradient(80deg, #cdb88f, #e8d8b4 40%, #d6c297), repeating-linear-gradient(0deg, transparent 0 7px, rgba(90, 60, 30, .18) 7px 8px); background-blend-mode: multiply; transform: rotateY(180deg); backface-visibility: hidden; }
.st-leaf-s { background: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 70%); opacity: 0; animation: stLeafS 11s cubic-bezier(.45, .05, .35, 1) infinite; }
@keyframes stLeaf { 0%, 62% { transform: rotateY(0deg); opacity: 0; } 63% { opacity: 1; } 68% { transform: rotateY(-22deg); } 74% { transform: rotateY(-70deg); } 79% { transform: rotateY(-110deg); } 85% { transform: rotateY(-160deg); opacity: 1; } 88% { transform: rotateY(-178deg); opacity: 1; } 92%, 100% { transform: rotateY(-178deg); opacity: 0; } }
@keyframes stLeafS { 0%, 63% { opacity: 0; } 72% { opacity: .5; } 77% { opacity: .9; } 85% { opacity: .3; } 92%, 100% { opacity: 0; } }
.st-lift.is-window { filter: brightness(1.55) saturate(1.15); }
@media (prefers-reduced-motion: reduce) { .st-leaf-in, .st-leaf-s { animation: none; opacity: 0; } }
/* v5 火：只用「火的透明层」（story-flames.png，tools/flame-layer.mjs 提取），只往上拉长、不缩小，所以不会露出底下、不会整块跳 */
.st-flame { background-image: url(../img/story-flames.png); -webkit-mask: none; mask: none; transform-origin: 50% 100%; animation-name: stLive2; }
@keyframes stLive2 { 0% { transform: scale(1, 1) skewX(0deg); filter: brightness(1); } 25% { transform: scale(1.03, 1.16) skewX(-3deg); filter: brightness(1.15); } 55% { transform: scale(1.01, 1.05) skewX(2deg); filter: brightness(1.02); } 80% { transform: scale(1.04, 1.2) skewX(-1deg); filter: brightness(1.2); } 100% { transform: scale(1, 1.08) skewX(1.5deg); filter: brightness(1.06); } }
/* 声音开关（与人物页同款，复制自 characters.css） */
.ch-sound { position: fixed; right: 18px; bottom: 16px; z-index: 50; display: flex; align-items: flex-end; gap: 3px; padding: 8px 12px; background: rgba(11, 10, 10, .72); border: 1px solid rgba(241, 232, 220, .3); color: #f1e8dc; cursor: pointer; transform: skewX(-10deg); font-family: var(--serif); font-size: 12px; letter-spacing: .2em; }
.ch-sound i { width: 3px; height: 12px; background: currentColor; transform-origin: bottom; animation: chEq .9s ease-in-out infinite alternate; }
.ch-sound i:nth-child(2) { animation-delay: -.3s; } .ch-sound i:nth-child(3) { animation-delay: -.6s; }
.ch-sound span { margin-left: 6px; }
.ch-sound.is-off { opacity: .55; } .ch-sound.is-off i { animation: none; transform: scaleY(.2); }
@keyframes chEq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
/* 目录 = 挂毯：挂杆 + 一卷织物，从上往下展开 */
.st-toc { top: 18px; bottom: 18px; padding: 0; overflow: visible; background: none; border: 0; box-shadow: none; translate: none; opacity: 0; pointer-events: none; transition: none; }
.st-toc.is-open { opacity: 1; pointer-events: auto; }
.st-rod { position: absolute; left: -18px; right: -18px; top: 0; height: 12px; border-radius: 6px; background: linear-gradient(#f0d59a, #9a7230 55%, #5a3e14); box-shadow: 0 4px 8px rgba(0, 0, 0, .6); transform-origin: center; }
.st-rod::before, .st-rod::after { content: ''; position: absolute; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe7ad, #a87a32 60%, #4d3410); }
.st-rod::before { left: -10px; } .st-rod::after { right: -10px; }
.st-cloth { position: absolute; left: 0; right: 0; top: 6px; bottom: 0; overflow-y: auto; scrollbar-width: thin; padding: 30px 30px 40px; box-sizing: border-box;
  background: linear-gradient(rgba(24, 10, 12, .9), rgba(34, 12, 16, .9)), repeating-linear-gradient(90deg, transparent 0 2px, rgba(255, 220, 160, .04) 2px 3px), repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .25) 2px 3px), #3a1418;
  border: 10px solid transparent; border-image: repeating-linear-gradient(45deg, #6b2a20 0 6px, #c9a467 6px 9px, #1e2a4a 9px 15px, #c9a467 15px 18px) 10;
  box-shadow: 0 30px 50px rgba(0, 0, 0, .7); }
.st-cloth::after { content: ''; position: sticky; display: block; bottom: -40px; height: 22px; margin: 20px -30px -40px; background: repeating-linear-gradient(90deg, #c9a467 0 3px, transparent 3px 9px); -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent); }
.st-toc.is-open ~ .st-title, .st:has(.st-toc.is-open) .st-title { opacity: 0; transition: opacity .3s; }
/* 挂毯目录（作者 2026-10-28）：叠在镜头推近后的墙上挂毯正上方，一开始和墙上那幅完全重合，往下卷就露出更长的挂毯
   --k = 屏幕像素 / 宽图像素；挂毯宽 330 宽图像素 */
.st-toc { display: none !important; }
.st-tap { position: absolute; inset: 0; z-index: 6; display: none; }
.st-tap.is-open { display: block; }
.st-tap-dim { position: absolute; inset: 0; background: radial-gradient(ellipse 34% 120% at 50% 40%, transparent 70%, rgba(4, 3, 5, .55)); cursor: zoom-out; }
.st-tap-roll { position: absolute; top: 0; bottom: 0; left: var(--left); width: calc(330px * var(--k)); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.st-tap-roll::-webkit-scrollbar { display: none; }
.st-tap-in { padding-top: var(--top); padding-bottom: 30vh; }
.st-tap-wall { position: relative; width: calc(330px * var(--k)); height: calc(615px * var(--k)); background: url(../img/story-tap-wall.jpg) 0 0 / 100% 100%; }
.st-tap-p { position: absolute; left: calc(var(--x) * 1px * var(--k)); top: calc(var(--y) * 1px * var(--k)); width: calc(var(--w) * 1px * var(--k)); height: calc(var(--h) * 1px * var(--k)); padding: 0; border: 0; background: none; cursor: default; overflow: hidden; }
.st-tap-p img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(transparent, #000 4%, #000 96%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(transparent, #000 4%, #000 96%, transparent); mask-composite: intersect; transition: filter .3s; }
.st-tap-p.is-ready { cursor: pointer; }
.st-tap-p.is-ready:hover img { filter: brightness(1.15) saturate(1.1); }
.st-tap-p:not(.is-ready) img { filter: saturate(.75) brightness(.85); }
/* 章名：绣在每一格下沿的一条暗布上，金线字 */
.st-tap-p span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; text-align: center; font-family: var(--serif); font-size: clamp(13px, 1.25vw, 18px); letter-spacing: .25em; color: #f0cf86;
  background: linear-gradient(transparent, rgba(16, 6, 8, .85) 55%); text-shadow: 0 1px 0 #5a3a10, 0 -1px 0 rgba(255, 240, 200, .35), 0 2px 4px rgba(0, 0, 0, .9); pointer-events: none; }
.st-tap-p span b { display: block; margin-bottom: 2px; font-size: .75em; letter-spacing: .5em; color: #c9a467; font-weight: 400; }
.st-tap-p span i { display: block; margin-top: 4px; font-style: normal; font-size: .62em; letter-spacing: .35em; color: rgba(240, 207, 134, .7); }
.st-tap-p.is-ready span i { color: #ffe3a0; }
/* 还没织完：从织边往下，是垂着的经线和木梭 */
.st-tap-unwoven { position: relative; margin-top: calc(-8px * var(--k)); width: 100%; aspect-ratio: 1536 / 760; background: url(../img/story-tap-unwoven.jpg) 0 -27% / 100% auto no-repeat; }
.st-tap-unwoven p { position: absolute; left: 0; right: 0; top: 34%; margin: 0; text-align: center; font-family: var(--serif); font-size: clamp(14px, 1.3vw, 19px); letter-spacing: .4em; color: #e8c886; text-shadow: 0 2px 6px #000; }
.st-tap-unwoven small { display: block; margin-top: 6px; font-size: .75em; letter-spacing: .5em; color: rgba(232, 200, 134, .7); }
/* 快速跳章：挂毯右边一串铜环 */
.st-tap-nav { position: absolute; top: 50%; left: calc(var(--left) + 330px * var(--k) + 18px); translate: 0 -50%; display: flex; flex-direction: column; gap: 10px; }
.st-tap-nav button { width: 38px; height: 38px; border-radius: 50%; font-family: var(--serif); font-size: 15px; color: #2a1806; background: radial-gradient(circle at 35% 30%, #ffe8b0, #c39a4e 55%, #6b4b1a); border: 2px solid #3a2810; box-shadow: 0 3px 8px rgba(0, 0, 0, .6), inset 0 0 0 3px rgba(255, 240, 200, .25); cursor: pointer; }
.st-tap-nav button:hover { filter: brightness(1.15); }
.st-tap-x { position: absolute; right: 22px; top: 18px; padding: 7px 16px; font-family: var(--serif); font-size: 13px; letter-spacing: .25em; color: #f1e8dc; background: rgba(11, 10, 10, .6); border: 1px solid rgba(241, 232, 220, .4); cursor: pointer; }
.st:has(.st-tap.is-open) .st-title { opacity: 0; }
/* 修：挂毯往下的部分是不透明的暗底（不露出墙）；末端只取织边以下的丝线；章名布条更窄 */
.st-tap-in { background: linear-gradient(transparent 0 var(--top), #0b0807 var(--top)); }
.st-tap-unwoven { margin-top: calc(-14px * var(--k)); aspect-ratio: 1109 / 694; background: #0b0807 url(../img/story-tap-unwoven.jpg) 48.7% 100% / 138.5% auto no-repeat; }
.st-tap-unwoven p { top: 26%; }
.st-tap-p span { padding: 14px 10px 6px; background: linear-gradient(transparent, rgba(16, 6, 8, .8) 45%); font-size: clamp(12px, 1.1vw, 16px); }
.st-tap-p span i { margin-top: 2px; }
/* 跳章：生成的黄铜吊坠（I / II / III）与线轴，挂在挂毯右边，悬停轻轻晃 */
.st-tap-nav { gap: 4px; }
.st-tap-nav button { width: 58px; height: 74px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform-origin: 50% 0; transition: transform .3s cubic-bezier(.2, 1.4, .4, 1), filter .3s; }
.st-tap-nav button img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
.st-tap-nav button:hover { transform: rotate(-6deg) scale(1.08); filter: brightness(1.2); }
.st-tap-nav button[data-tgo="end"] { height: 96px; }
/* 章节目录栏：界面元素，不假装是房间里的物件（与「收起挂毯」同一样式） */
.st-tap-nav { top: 74px; bottom: auto; left: auto; right: 22px; translate: none; width: 236px; max-height: calc(100% - 140px); overflow-y: auto; scrollbar-width: thin; display: block; gap: 0; padding: 14px 16px 16px;
  background: rgba(11, 10, 10, .72); border: 1px solid rgba(241, 232, 220, .25); font-family: var(--serif); }
.st-tap-nav p { margin: 10px 0 4px; font-size: 11px; letter-spacing: .45em; color: #c9a467; }
.st-tap-nav p:first-child { margin-top: 0; }
.st-tap-nav button { display: grid; grid-template-columns: 26px 1fr; align-items: baseline; width: 100%; height: auto; padding: 5px 4px; text-align: left; font: inherit; font-size: 13px; letter-spacing: .06em; line-height: 1.5;
  color: #e8dcc4; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; transform: none; filter: none; transition: color .2s, background .2s; }
.st-tap-nav button b { font-size: 11px; font-weight: 400; color: #c9a467; }
.st-tap-nav button:hover { transform: none; filter: none; background: rgba(201, 164, 103, .12); color: #fff3d8; }
.st-tap-nav button.is-here { color: #ffe0a0; background: rgba(201, 164, 103, .16); box-shadow: inset 2px 0 0 #c9a467; }
.st-tap-nav button.is-unwoven { color: rgba(232, 220, 196, .38); }
.st-tap-nav button.is-unwoven b { color: rgba(201, 164, 103, .4); }
.st-tap-x { right: 22px; top: 18px; width: 236px; box-sizing: border-box; }
@media (max-width: 1100px) { .st-tap-nav { display: none; } }
.st-tap-nav button[data-tgo="end"] { height: auto; }
/* 织工账页：生成的羊皮纸（story-ledger.webp）上写的章节清单，墨色字，在挂毯左边（左侧原本是书柜，账页从那里飞出） */
.st-tap-nav { left: 34px; right: auto; top: 84px; width: 300px; max-height: none; overflow: visible; padding: 64px 40px 46px 48px; background: url(../img/story-ledger.webp) 0 0 / 100% 100%; border: 0; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .7)); rotate: -1.2deg; }
.st-tap-nav h3 { margin: 0 0 8px; text-align: center; font-family: var(--serif); font-size: 16px; font-weight: 900; letter-spacing: .5em; color: #5a2a14; }
.st-tap-nav p { margin: 10px 0 2px; font-size: 11px; letter-spacing: .5em; color: #8a2f1c; border-bottom: 1px solid rgba(90, 42, 20, .3); padding-bottom: 2px; }
.st-tap-nav button { padding: 3px 4px; font-size: 13px; color: #2e1c0e; letter-spacing: .04em; }
.st-tap-nav button b { color: #8a5a2a; }
.st-tap-nav button:hover { background: rgba(120, 70, 20, .12); color: #000; }
.st-tap-nav button.is-here { color: #7a1c10; background: rgba(160, 40, 20, .1); box-shadow: inset 2px 0 0 #8a2f1c; }
.st-tap-nav button.is-unwoven { color: rgba(46, 28, 14, .42); }
.st-tap-nav button.is-unwoven b { color: rgba(138, 90, 42, .45); }
.st-ledger-roll { position: absolute; left: 0; top: 0; width: 140px; pointer-events: none; opacity: 0; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .7)); }
.st-tap-x { width: auto; }
@media (max-width: 1100px) { .st-tap-nav, .st-ledger-roll { display: none; } }
.st-tap-nav button.is-unwoven { color: rgba(46, 28, 14, .55); }
/* 账页挪到挂毯右边（作者 2026-10-28：右手边更顺手），卷轴也从右边飞进飞出 */
.st-tap-nav { left: auto; right: 40px; rotate: 1.2deg; }
/* 作者 2026-10-28：账页仍在右边，但卷轴是从左边书柜飞出来、越过挂毯落到右边的；卷轴要盖在挂毯上面 */
.st-ledger-roll { z-index: 3; }