/* v0.19 网页 · 张景霖 与 郑晓仪
   粉、珍珠白、香槟金；照片是构图中的物件（画窗、椭圆、相册、纸页），不撑满屏幕。
   --sw / --sh / --sl：故事舞台的宽、高与左边距（手机上即整屏；电脑上居中一列，两侧是同一片纸面与光） */
:root {
  --serif: "HW Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --ink: #3C3B3A; --ink2: #5A4650; --rose: #6A344B; --rose2: #8D3E62; --mute: #78616D;
  --gold-d: #9B753F; --gold: #C8A46B; --gold-l: #EFD9A6; --pearl: #FFFDFB; --blush: #F6E1E9; --paper: #FFF9FC;
  --sw: 100vw; --sh: 100vh; --sl: 0px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #FBF3F6; -webkit-text-size-adjust: 100%; }
html.locked, html.lb-open, html.bless-open { overflow: hidden; }
body { margin: 0; color: var(--ink2); font: 15px/1.6 var(--serif); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
img { display: block; }
.booting .stage, .booting .opening { visibility: hidden; }

/* —— 背景：一片有细纹的纸面，各章的色调淡入淡出（固定在窗口上，整页共用）—— */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #FFFEFD 0%, #FAEFF3 50%, #F2DCE5 100%); }
.bg-l { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.bg-pearl { background: radial-gradient(120% 70% at 30% 18%, #FFFEFD 0%, #FCF3F6 46%, #F2DCE5 100%); opacity: 1; }
.bg-blush { background: radial-gradient(100% 60% at 70% 30%, #FFFEFD 0%, #F9EAF0 50%, #EED4E0 100%); }
.bg-jade { background: radial-gradient(110% 70% at 40% 20%, #FFFEFD 0%, #FBF1F5 48%, #F1DDE6 100%); }
.bg-warm { background: radial-gradient(90% 70% at 72% 26%, #FFFEFD 0%, #F9EBF0 46%, #EFD7E2 100%); }
.bg-studio { background: radial-gradient(100% 70% at 50% 25%, #FFFEFD 0%, #FBF0F4 50%, #F0DAE4 100%); }
.bg-garden { background: radial-gradient(100% 70% at 60% 22%, #FFFEFD 0%, #FCF3F6 46%, #F2DDE6 100%); }
.bg-water { background: linear-gradient(180deg, #DEEAF5 0%, #F3EEF4 40%, #F9EDF1 42%, #F5DCE5 100%); }
.bg-paper { background: linear-gradient(180deg, #FFFEFD 0%, #FAEDF2 52%, #F0D8E3 100%); }
.bg-grain { position: absolute; inset: 0; opacity: .55;
  background-image: repeating-linear-gradient(0deg, rgba(150, 120, 100, .014) 0 1px, transparent 1px 3px), repeating-linear-gradient(97deg, rgba(150, 120, 100, .01) 0 1px, transparent 1px 9px); }
/* 花影：很淡的枝叶影子，落在纸上（只在两侧与上方） */
.bg-shadow { position: absolute; inset: -5%; opacity: .5; filter: blur(14px);
  background: radial-gradient(ellipse 22% 9% at 8% 12%, rgba(160, 120, 140, .14), transparent 70%), radial-gradient(ellipse 14% 6% at 16% 20%, rgba(160, 120, 140, .1), transparent 70%),
              radial-gradient(ellipse 18% 7% at 92% 30%, rgba(160, 120, 140, .12), transparent 70%), radial-gradient(ellipse 10% 5% at 86% 38%, rgba(160, 120, 140, .09), transparent 70%); }
body[data-tone="blush"] .bg-blush, body[data-tone="jade"] .bg-jade, body[data-tone="warm"] .bg-warm, body[data-tone="studio"] .bg-studio,
body[data-tone="garden"] .bg-garden, body[data-tone="water"] .bg-water, body[data-tone="paper"] .bg-paper { opacity: 1; }

/* —— 环境光画布（整窗）与故事舞台（居中一列）—— */
.amb { position: fixed; left: 0; top: 0; width: 100vw; height: var(--sh); z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.amb.on { opacity: 1; }
.amb-front { z-index: 6; }
.stage { position: fixed; left: var(--sl); top: 0; width: var(--sw); height: var(--sh); z-index: 3; pointer-events: none; }
.stage.gone { visibility: hidden; }
.fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.fx-back { z-index: 0; } .fx-front { z-index: 40; }
.ch { position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; transform-origin: 50% 50%; will-change: transform, opacity; }
.ch > * { pointer-events: auto; }
.ch-A { z-index: 30; } .ch-B { z-index: 29; } .ch-F { z-index: 28; } .ch-Q { z-index: 27; } .ch-C { z-index: 26; } .ch-E { z-index: 25; } .ch-D { z-index: 24; } .ch-W { z-index: 23; } .ch-I { z-index: 22; }
.track { position: relative; z-index: 2; pointer-events: none; }

/* —— 照片物件 ——
   纸边（珍珠白）：几层极细的边表现厚度，一道贴地的柔影；窗里是照片（按焦点裁切，不拉伸），一层很淡、缓慢移动的珍珠母贝光泽。 */
.ph { position: absolute; margin: 0; cursor: zoom-in; outline: none; }
.ph:focus-visible .ph-frame { box-shadow: 0 0 0 2px var(--gold), 0 18px 34px -18px rgba(106, 52, 75, .4); }
.ph-frame { position: absolute; background: linear-gradient(140deg, #FFFFFF 0%, #FBF4F7 38%, #FFFDFB 58%, #F4E8ED 100%);
  box-shadow: 0 0 0 .5px rgba(214, 190, 160, .55), 0 1px 0 .5px #FFFFFF, 0 2px 0 .5px #EFE2E7, 0 3px 0 .5px #E6D5DC, 0 22px 34px -20px rgba(106, 52, 75, .42), 0 6px 14px rgba(106, 52, 75, .07); }
.ph-win { position: absolute; overflow: hidden; background: #F3E6EB center / cover no-repeat; isolation: isolate; }
.ph-win picture, .half picture, .stack-card picture { position: absolute; inset: 0; }
.ph-win img, .half img, .stack-card img { position: absolute; max-width: none; opacity: 0; transition: opacity .6s ease; user-select: none; -webkit-user-select: none; }
.ph-win img.loaded, .half img.loaded, .stack-card img.loaded { opacity: 1; }
.ph-win::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 0 18px rgba(80, 40, 60, .08); pointer-events: none; }
.ph-sheen { position: absolute; inset: -40%; z-index: 2; pointer-events: none; opacity: .35; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 236, 246, .9) 44%, rgba(226, 240, 250, .7) 50%, rgba(255, 238, 210, .8) 56%, transparent 70%); background-size: 200% 200%;
  animation: sheen 9s ease-in-out infinite; }
@keyframes sheen { 0%, 100% { transform: translate3d(-18%, -6%, 0); } 50% { transform: translate3d(18%, 6%, 0); } }
/* 选择性的金边：一道香槟金的细线贴在纸边与照片之间 */
.ph-gold .ph-win::after { box-shadow: inset 0 0 0 1.5px rgba(200, 164, 107, .9), inset 0 0 0 3px rgba(255, 246, 226, .55), inset 0 0 18px rgba(80, 40, 60, .08); }
.ph-gold .ph-frame { background: linear-gradient(150deg, #FFFFFF 0%, #FDF5F8 30%, #FFF9F1 52%, #F6E9EE 72%, #FFFFFF 100%); }
/* 浅粉的衬纸（在纸边之后，略错开） */
.ph-back { position: absolute; transform: translate(12px, 14px) rotate(1.4deg); background: linear-gradient(160deg, #FAE8EE, #F2D3DE); box-shadow: 0 0 0 .5px rgba(232, 196, 210, .7), 0 18px 34px -16px rgba(106, 52, 75, .25); }
/* 毛边纸（柔和而不夸张的不规则边） */
.ph-deckle .ph-frame { background: #FFFDFA; border-radius: 3px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M1.2 1.6 L12 .9 L25 1.4 L38 .7 L52 1.3 L66 .8 L80 1.5 L92 .9 L98.8 1.4 L99.3 14 L98.7 28 L99.4 42 L98.8 57 L99.3 71 L98.6 85 L99.2 98.6 L86 99.2 L72 98.7 L58 99.4 L44 98.8 L30 99.3 L16 98.7 L1.4 99.1 L.8 85 L1.3 70 L.7 56 L1.4 42 L.8 28 L1.3 14 Z' fill='black'/></svg>") 0 0 / 100% 100%;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M1.2 1.6 L12 .9 L25 1.4 L38 .7 L52 1.3 L66 .8 L80 1.5 L92 .9 L98.8 1.4 L99.3 14 L98.7 28 L99.4 42 L98.8 57 L99.3 71 L98.6 85 L99.2 98.6 L86 99.2 L72 98.7 L58 99.4 L44 98.8 L30 99.3 L16 98.7 L1.4 99.1 L.8 85 L1.3 70 L.7 56 L1.4 42 L.8 28 L1.3 14 Z' fill='black'/></svg>") 0 0 / 100% 100%; }
.ph-deckle { filter: drop-shadow(0 16px 18px rgba(106, 52, 75, .2)) drop-shadow(0 2px 2px rgba(106, 52, 75, .1)); }

/* —— 文字 —— */
.cap { position: absolute; font-family: var(--serif); color: var(--rose); opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .8s ease, transform .95s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.cap.on { opacity: 1; transform: none; }
.cap-v { display: flex; flex-direction: row-reverse; gap: .9em; line-height: 1; }
.cap-v .vcol { display: flex; flex-direction: column; width: 1em; }
.cap-v span { display: block; height: 1.46em; line-height: 1.46em; text-align: center; }
.cap-h { letter-spacing: .26em; line-height: 1.9; }
.hint { position: absolute; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: .4em; color: #9A8591; transition: opacity .6s ease; opacity: 0; }

/* A 珍珠画窗：签名在上方的阅读区，日期与地点在画窗之下 */
.a-names { position: absolute; pointer-events: none; }
.sgn { position: absolute; }
.sg-cv, .sg-read { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sg-live .sg-read, .sg-hidden .sg-read, .sg-hidden .sg-cv { opacity: 0; }
.sg-static .sg-cv { visibility: hidden; }
.a-and { position: absolute; font-size: 13px; color: #B08A55; }
.a-dv { position: absolute; font-family: var(--serif); color: var(--ink); line-height: 1.65; letter-spacing: .08em; pointer-events: none; }
.a-date { font-size: clamp(14px, 4vw, 16px); }
.a-venue { font-size: clamp(14px, 3.8vw, 15.5px); color: #55504B; }
.env-closed .a-dv, .env-closed .a-and { opacity: 0; }
.env-go .a-dv, .env-go .a-and { animation: fade-in .7s ease 1.7s both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.env-closed .ch-A, .env-go .ch-A { visibility: visible !important; }
.env-closed .ch-A .ph, .env-closed .ch-A .ph-back { filter: blur(18px) saturate(.8); transform-origin: 50% 50%; }
.env-go .ch-A .ph { animation: veil-behind 1700ms cubic-bezier(.3, .1, .2, 1) 420ms both; }
@keyframes veil-behind { from { filter: blur(18px) saturate(.8); transform: scale(.96); } to { filter: none; transform: none; } }

/* B 花之双联 */
.b-cap { font-size: 20px; }

/* F 园林画廊：四张独立画窗与中央花窗，装饰不占用照片点击区域 */
.ch-F .ph { z-index: 2; }
.ch-F .ph-sheen { opacity: .19; }
.f-ornament { position: absolute; z-index: 0; pointer-events: none !important; color: var(--gold); }
.f-ornament svg { width: 100%; height: 100%; overflow: visible; }
.f-window { stroke: currentColor; stroke-width: .65; opacity: .32; }
.f-petals { fill: #FFFDFB; stroke: #D6B684; stroke-width: .65; opacity: .76; }
.f-ornament circle { fill: #C8A46B; opacity: .72; }
.f-cap { font-size: clamp(14px, 4vw, 16.5px); color: var(--rose); letter-spacing: .2em; text-align: center; }
.simple .ch-F .ph { transform: none !important; opacity: 1 !important; }
.simple .f-ornament { transform: none !important; }
.ch-F .f-rich { position: absolute; z-index: 0; pointer-events: none !important; }
.f-paper { position: absolute; z-index: -1; pointer-events: none !important; border-radius: 180px 180px 8px 8px; background-color: rgba(248,229,239,.30); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 120'%3E%3Cg fill='none' stroke='%23BA945C' stroke-opacity='.14' stroke-width='.7'%3E%3Cpath d='M45 17C24 9 19 31 45 40C71 31 66 9 45 17ZM45 40C25 33 13 48 30 60C35 67 44 70 45 84C46 70 55 67 60 60C77 48 65 33 45 40ZM45 84C27 67 20 89 45 104C70 89 63 67 45 84Z'/%3E%3Cpath d='M36 38Q45 29 54 38M31 54Q45 50 59 54M36 88Q45 83 54 88'/%3E%3C/g%3E%3C/svg%3E"); background-size: 90px 120px; box-shadow: inset 0 0 0 .5px rgba(200,164,107,.15); }
.f-medallion { position: absolute; z-index: 1; pointer-events: none !important; }
.f-medallion svg { width: 100%; height: 100%; }
.f-rich svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 5px 5px rgba(138,82,111,.12)); }
.f-fan-paper { fill: #F5DFE8; stroke: #C8A46B; stroke-width: 1.2; }
.f-fan-ribs { stroke: #B68D53; stroke-width: .8; opacity: .78; }
.f-rich-fanA { opacity: .8; } .f-rich-fanB { opacity: .68; }
.f-rich-flowerA svg, .f-rich-flowerB svg { animation: garden-flower-sway 7s ease-in-out infinite; animation-play-state: paused; transform-origin: 50% 70%; }
.f-rich-flowerB svg { animation-delay: -3s; }
.f-rich-on .f-rich-flowerA svg, .f-rich-on .f-rich-flowerB svg { animation-play-state: running; }
.f-flower-layer { filter: drop-shadow(0 1.3px 1px rgba(108,63,79,.13)); }
.f-whisper { position: absolute; writing-mode: vertical-rl; font-size: clamp(11px,3vw,13px); line-height: 14px; letter-spacing: .3em; color: #795260; z-index: 3; pointer-events: none !important; }
.f-whisper::after { content: ''; width: 3px; height: 3px; border: 1px solid var(--gold); margin-top: 10px; transform: rotate(45deg); }
.f-title { position: absolute; padding: 5px 9px; background: #FFF8ED; box-shadow: 0 0 0 .7px #D4B884, 1px 3px 5px rgba(117,72,91,.10); font-size: clamp(10px,2.8vw,12px); letter-spacing: .26em; color: #956C3F; z-index: 4; pointer-events: none !important; transform: translate(-12px,-32px); white-space: nowrap; }
.f-title.on { transform: translate(-12px,-32px); }
.simple .ch-F .f-rich { opacity: 1 !important; }
.simple .ch-F .f-title { transform: translate(-12px,-32px); }
.simple .ch-F .f-medallion { opacity: 1 !important; }
.simple .f-rich svg { animation: none; }
@keyframes garden-flower-sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .f-rich svg { animation: none !important; } }

/* Q 鹊桥 */
.q-poem { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--serif); color: var(--rose); }
.q-line { font-size: clamp(19px, 5.6vw, 23px); line-height: 2.05; letter-spacing: .32em; text-indent: .32em; opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .85s cubic-bezier(.2, .7, .2, 1); }
.q-by { margin-top: 14px; font-size: 12px; letter-spacing: .4em; color: var(--gold-d); opacity: 0; transition: opacity .6s ease; }
.q-poem.on .q-line { opacity: 1; transform: none; } .q-poem.on .q-line:nth-child(2) { transition-delay: .42s; } .q-poem.on .q-by { opacity: 1; transition-delay: 1s; }
.q-hint { bottom: 92px; }
.q-static, .w-static { display: none; }

/* C 晨光相册：打开的相册，右页沿书脊翻开 */
.c-cap { text-align: center; font-size: clamp(16px, 4.6vw, 19px); color: var(--rose); letter-spacing: .3em; text-indent: .3em; }
.album { position: absolute; cursor: zoom-in; perspective: 1400px; perspective-origin: 50% 40%; }
.page { position: absolute; top: 0; height: 100%; width: 50%; overflow: hidden; background: #FFFDFA;
  background-image: radial-gradient(130% 90% at 50% 0%, #FFFFFF, rgba(255, 255, 255, 0) 60%), repeating-linear-gradient(0deg, rgba(150, 120, 100, .016) 0 1px, transparent 1px 4px); }
.page-l { left: 0; border-radius: 4px 0 0 4px; box-shadow: -1px 2px 0 #F1E5E6, 0 26px 40px -24px rgba(106, 52, 75, .45); }
.page-r { left: 50%; border-radius: 0 4px 4px 0; transform-origin: 0 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 1px 2px 0 #F1E5E6, 0 26px 40px -24px rgba(106, 52, 75, .45); }
.page-back { position: absolute; inset: 0; background: #FBF4F2; transform: rotateY(180deg); backface-visibility: hidden; }
.half { position: absolute; overflow: hidden; }
.page-l .half::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 80%, rgba(90, 60, 50, .16)); pointer-events: none; }
.page-r .half::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(90, 60, 50, .14), transparent 18%); pointer-events: none; }
.spine { position: absolute; left: calc(50% - 6px); top: 0; width: 12px; height: 100%; background: linear-gradient(90deg, rgba(120, 80, 70, 0), rgba(120, 80, 70, .16), rgba(255, 255, 255, .5), rgba(120, 80, 70, .1), rgba(120, 80, 70, 0)); pointer-events: none; z-index: 3; }

/* E 珍藏的誓言 */
.e-cap { font-size: 19px; }

/* D 草坪画廊 */
.d-cap { font-size: clamp(15px, 4.4vw, 18px); color: var(--rose); letter-spacing: .24em; line-height: 2; }

/* W 水面河灯 */
.w-poem { position: absolute; top: 10vh; right: 8%; display: flex; flex-direction: row-reverse; gap: 10px; font-family: var(--serif); color: var(--rose); }
.w-col { display: flex; flex-direction: column; font-size: clamp(18px, 5.2vw, 21px); line-height: 1.7; opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .85s cubic-bezier(.2, .7, .2, 1); }
.w-col span { display: block; }
.w-poem.on .w-col { opacity: 1; transform: none; } .w-poem.on .w-col:nth-child(2) { transition-delay: .24s; } .w-poem.on .w-col:nth-child(3) { transition-delay: .48s; } .w-poem.on .w-col:nth-child(4) { transition-delay: .72s; }
.w-by { position: absolute; top: calc(10vh + 210px); right: 8%; font-size: 12px; letter-spacing: .35em; color: var(--gold-d); opacity: 0; transition: opacity .6s ease 1.2s; }
.w-by.on { opacity: 1; }
.w-hint { position: absolute; left: 0; right: 0; text-align: center; opacity: 0; pointer-events: none; }
.w-tap { font-size: 13px; letter-spacing: .3em; text-indent: .3em; color: #85766B; }
.w-go { margin-top: 5px; font-size: 14px; letter-spacing: .3em; text-indent: .3em; color: #6B5B51; }
.w-arrow { position: relative; width: 16px; height: 22px; margin: 6px auto 0; animation: bob 2.4s ease-in-out infinite; }
.w-arrow i { position: absolute; left: 7.5px; top: 0; width: 1px; height: 19px; background: var(--gold-d); }
.w-arrow b { position: absolute; left: 3.5px; bottom: 3px; width: 8px; height: 8px; border-right: 1px solid var(--gold-d); border-bottom: 1px solid var(--gold-d); transform: rotate(45deg); }
@keyframes bob { 0%, 100% { transform: none; } 50% { transform: translateY(5px); } }

/* I 喜帖 与 S 婚礼流程：同一叠纸（与 v0.17 / v0.18 相同的纸、金框、压纹与字） */
.ch-I { display: flex; align-items: center; justify-content: center; padding: var(--ivtop, 64px) 7% var(--ivbot, 64px); }
.iv-bg { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: linear-gradient(180deg, #FFFEFD 0%, #FAEDF2 52%, #F0D8E3 100%); }
.iv-glow { position: absolute; inset: 0; background: radial-gradient(70% 46% at 50% 48%, rgba(255, 242, 224, .9), rgba(255, 242, 224, 0)); }
.lamp { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #FFF8EC 0%, #FFE2B8 45%, rgba(255, 214, 160, 0) 75%); box-shadow: 0 0 16px 6px rgba(255, 210, 150, .3); }
.lamp.la { left: 6%; bottom: 11%; } .lamp.lb { right: 5%; top: 24%; width: 6px; height: 6px; } .lamp.lc { right: 11%; bottom: 6%; width: 5px; height: 5px; opacity: .8; }
.iv-stack { position: relative; z-index: 1; width: 100%; max-width: 440px; display: grid; grid-template-columns: minmax(0, 1fr); perspective: 1100px; perspective-origin: 50% 60%; transform: scale(var(--ivs, 1)); }
.iv-stack > .leaf { grid-area: 1 / 1 / 2 / 2; position: relative; transform-origin: 50% 60%; will-change: transform, opacity; opacity: 0; }
.leaf-iv { z-index: 2; } .leaf-sd { z-index: 1; }
.leaf-body { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden;
  padding: calc(var(--gk, 1) * 34px + 12px) calc(var(--fk, 1) * 24px + 10px) calc(var(--gk, 1) * 24px + 12px); border-radius: 3px; background-color: #FFFEFD;
  background-image: radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%), repeating-linear-gradient(0deg, rgba(150, 120, 100, .016) 0 1px, transparent 1px 3px, rgba(150, 120, 100, .01) 3px 4px, transparent 4px 7px);
  box-shadow: 0 0 0 1px rgba(214, 190, 160, .5), 0 30px 60px -22px rgba(106, 52, 75, .3), 0 10px 22px rgba(106, 52, 75, .07); }
.leaf-edge { position: absolute; z-index: 0; left: 1px; right: -2px; top: 3px; bottom: -3px; border-radius: 3px; background: #F2E7E2; box-shadow: 0 1px 0 #E6D6CF; }
.leaf-back { position: absolute; z-index: 0; left: -3%; top: 1%; width: 106%; height: 100%; border-radius: 3px; background: linear-gradient(160deg, #FAE8EE 0%, #F3D6E0 100%); box-shadow: 0 0 0 1px rgba(232, 196, 210, .6), 0 18px 40px -16px rgba(106, 52, 75, .22); transform: rotate(-1.6deg); }
.leaf-frame { position: absolute; left: 11px; top: 11px; right: 11px; bottom: 11px; border: 1px solid rgba(190, 152, 96, .85); pointer-events: none; }
.leaf-frame::after { content: ''; position: absolute; left: 3px; top: 3px; right: 3px; bottom: 3px; border: 1px solid rgba(200, 164, 107, .35); }
.leaf-frame i { position: absolute; width: 7px; height: 7px; background: #FFFDFA; border: 1px solid #B8925A; transform: rotate(45deg); }
.leaf-frame i:nth-child(1) { left: -5px; top: -5px; } .leaf-frame i:nth-child(2) { right: -5px; top: -5px; } .leaf-frame i:nth-child(3) { left: -5px; bottom: -5px; } .leaf-frame i:nth-child(4) { right: -5px; bottom: -5px; }
.leaf-glint { position: absolute; z-index: 3; left: 0; top: -10%; width: 46%; height: 120%; opacity: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255, 236, 206, 0), rgba(255, 236, 206, .5), rgba(255, 236, 206, 0)); }
.leaf-crane { position: absolute; z-index: 3; right: -3%; top: calc(var(--fk, 1) * -40px); width: calc(var(--fk, 1) * 64px); pointer-events: none; }
.iv-title, .sd-title { font-family: var(--serif); letter-spacing: .7em; text-indent: .7em; color: #B08A55; text-shadow: 0 1px 0 rgba(255, 255, 255, .95), 0 -1px 0 rgba(140, 100, 50, .22); }
.iv-title { font-size: calc(var(--fk, 1) * 30px); line-height: 1.2; }
.iv-sigs { display: flex; justify-content: center; align-items: flex-start; width: 100%; margin-top: calc(var(--gk, 1) * 16px + 4px); }
.iv-sigbox { position: relative; width: 41%; height: 0; }
.iv-sigbox.a { padding-bottom: calc(41% * 326 / 793); } .iv-sigbox.b { padding-bottom: calc(41% * 347 / 799); margin-top: calc(var(--fk, 1) * 16px); }
.iv-sigbox img { position: absolute; inset: 0; width: 100%; height: 100%; }
.iv-and { margin: calc(var(--fk, 1) * 24px) 1.5% 0; font-size: calc(var(--fk, 1) * 12px); color: #B08A55; }
.iv-heading { margin-top: calc(var(--gk, 1) * 10px + 2px); font-size: calc(var(--fk, 1) * 16px); letter-spacing: .26em; text-indent: .26em; color: var(--ink); }
.rule { display: flex; align-items: center; justify-content: center; margin: calc(var(--gk, 1) * 14px + 2px) 0; }
.rule i { width: 64px; height: 1px; background: linear-gradient(90deg, rgba(200, 164, 107, 0), var(--gold)); } .rule i:last-child { background: linear-gradient(90deg, var(--gold), rgba(200, 164, 107, 0)); }
.rule b { width: 5px; height: 5px; margin: 0 8px; background: var(--gold); transform: rotate(45deg); }
.iv-body, .iv-wish { font-size: calc(var(--fk, 1) * 15.5px); line-height: 1.95; letter-spacing: .12em; text-indent: .12em; color: #543F49; }
.iv-wish { margin-top: calc(var(--gk, 1) * 12px); color: #6A5560; }
.iv-closing { align-self: flex-end; margin: calc(var(--gk, 1) * 20px + 4px) 3% 0 0; font-size: calc(var(--fk, 1) * 15px); letter-spacing: .14em; color: var(--ink); }
.iv-seal { align-self: flex-end; width: calc(var(--fk, 1) * 34px); height: calc(var(--fk, 1) * 34px); margin: calc(var(--gk, 1) * 8px + 2px) 9% 0 0; opacity: .95; }
.leaf-sd .leaf-body { justify-content: center; }
.sd-portrait { position: relative; width: calc(var(--gk, 1) * 26% + 8%); aspect-ratio: 1279 / 1919; margin-bottom: calc(var(--gk, 1) * 14px + 4px); }
.sd-portrait .ph { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
.sd-title { font-size: calc(var(--fk, 1) * 26px); line-height: 1.2; }
.sd-line { font-size: calc(var(--fk, 1) * 14.5px); letter-spacing: .14em; text-indent: .14em; color: var(--mute); }
.sd-list { position: relative; width: 100%; margin-top: calc(var(--gk, 1) * 22px + 6px); }
.sd-rail { position: absolute; left: 41%; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(180deg, rgba(200, 164, 107, 0), var(--gold) 14%, var(--gold) 86%, rgba(200, 164, 107, 0)); }
.sd-item { position: relative; display: flex; align-items: center; min-height: calc(var(--fk, 1) * 36px); opacity: 0; transform: translateY(10px); transition: opacity .42s ease, transform .57s cubic-bezier(.2, .7, .2, 1); }
.sd-item.on { opacity: 1; transform: none; } .sd-item.sd-1 { transition-delay: .11s; } .sd-item.sd-2 { transition-delay: .22s; }
.sd-item + .sd-item { margin-top: calc(var(--gk, 1) * 20px + 4px); }
.sd-node { position: absolute; left: 41%; top: 50%; width: 11px; height: 11px; margin: -6.5px 0 0 -6px; border-radius: 50%; border: 1px solid #B8925A; background: #FFFDFA; box-shadow: 0 0 0 3px #FFFDFA; }
.sd-node::after { content: ''; position: absolute; left: 3px; top: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.sd-time { width: 41%; padding-right: calc(var(--fk, 1) * 20px); text-align: right; font-size: calc(var(--fk, 1) * 26px); letter-spacing: .03em; color: var(--ink); white-space: nowrap; }
.sd-what { padding-left: calc(var(--fk, 1) * 20px); text-align: left; font-size: calc(var(--fk, 1) * 17px); letter-spacing: .2em; color: #543F49; }

/* —— 回执与结尾：在故事之后的页面流里，从下方升起，盖过舞台 —— */
.after { position: relative; z-index: 8; }
.rsvp { padding: 14vh 0 12vh; }
.rsvp-card { position: relative; width: min(calc(100vw - 32px), 460px); margin: 0 auto; padding: 44px 26px 34px; border-radius: 4px; text-align: left;
  background: linear-gradient(180deg, #FFFEFD 0%, #FCF3F6 60%, #F9EAF0 100%); box-shadow: 0 0 0 1px rgba(155, 117, 63, .7), 0 0 0 9px #FFFFFF, 0 0 0 10px rgba(200, 164, 107, .55), 0 50px 100px -30px rgba(106, 52, 75, .3); }
.rsvp-title { text-align: center; font-size: 20px; letter-spacing: .14em; text-indent: .14em; color: var(--rose); line-height: 1.5; }
.rsvp-lede { text-align: center; font-size: 14px; line-height: 1.9; color: var(--mute); margin: 0 0 26px; }
.field { display: block; margin-top: 20px; }
.field-label { display: block; margin-bottom: 9px; font-size: 15px; letter-spacing: .06em; color: #5A4650; }
.rsvp input { width: 100%; height: 48px; padding: 0 14px; font: 16px var(--serif); color: #543F49; border: 1px solid #EBD6DF; border-radius: 6px; background: #FFFBFC; outline: none; }
.rsvp input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 164, 107, .18); }
.choice { display: flex; align-items: center; width: 100%; min-height: 50px; margin-bottom: 9px; padding: 0 14px; font-size: 16px; text-align: left; color: #543F49; background: #FFFFFF; border: 1px solid #EBD6DF; border-radius: 6px; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.choice .mark { position: relative; width: 18px; height: 18px; margin-right: 12px; border-radius: 50%; border: 1px solid #B69AA7; flex: none; }
.choice.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(200, 164, 107, .7); background: #FFF8EF; }
.choice.on .mark { background: #B08A55; border-color: #B08A55; }
.choice.on .mark::after { content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.stepper { display: flex; height: 48px; }
.step { width: 56px; border: 1px solid #EBD6DF; background: #FFFFFF; font-size: 18px; color: var(--rose); border-radius: 6px; }
.stepper input { flex: 1; text-align: center; border-radius: 0; margin: 0 6px; }
.btn-primary { display: block; width: 100%; height: 50px; margin-top: 24px; color: #FFFFFF; font-size: 16px; letter-spacing: .5em; text-indent: .5em; background: #7E3558; border-radius: 4px; box-shadow: 0 0 0 1px rgba(200, 164, 107, .8), 0 0 0 5px #FFFFFF, 0 0 0 6px rgba(200, 164, 107, .5); }
.form-error { margin-top: 16px; padding: 10px 12px; border-left: 3px solid #B0445E; background: #FCEEF2; color: #8A2F47; font-size: 14px; line-height: 1.7; }
.rsvp-status { margin-top: 16px; text-align: center; font-size: 12.5px; line-height: 1.7; color: var(--mute); }
.closing { padding: 10vh 24px 18vh; text-align: center; }
.closing-line { font-size: 21px; letter-spacing: .3em; text-indent: .3em; color: var(--rose); }
.closing-names { margin-top: 12px; font-size: 16px; letter-spacing: .2em; color: var(--mute); }
.bless-btn { display: block; margin: 36px auto 8px; padding: 0 34px; height: 48px; color: #FFFFFF; font-size: 16px; letter-spacing: .5em; text-indent: .5em; background: #7E3558; border-radius: 4px; box-shadow: 0 0 0 1px rgba(200, 164, 107, .8), 0 0 0 5px #FFF9FC, 0 0 0 6px rgba(200, 164, 107, .5); }
.bless-hint { font-size: 12px; letter-spacing: .3em; color: #9A8591; }
.text-btn { display: block; margin: 18px auto 0; font-size: 14px; letter-spacing: .2em; color: var(--rose2); }
.demo-note { margin-top: 26px; font-size: 12px; color: #A3909A; letter-spacing: .1em; }

/* —— 开场：屏风（舞台大小的一块；电脑上两侧是淡淡的纸面）—— */
.opening { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.op-wash { position: absolute; inset: 0; background: rgba(252, 243, 246, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 1.2s ease .4s; }
.env-go .op-wash, .env-done .op-wash { opacity: 0; }
.op-box { position: absolute; left: var(--sl); top: 0; width: var(--sw); height: var(--sh); overflow: hidden; }
.env-done.opening { display: none; }
.op-hit { position: absolute; inset: 0; z-index: 20; pointer-events: auto; cursor: pointer; }
.env-go .op-hit { pointer-events: auto; }
.veil-el { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.veil-tex { position: absolute; left: -9999px; top: 0; visibility: hidden; }
.op-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; }
.veil-wash { z-index: 3; background: rgba(252, 243, 246, .5); }
.env-go .veil-wash { animation: env-fade 1300ms ease 420ms forwards; }
.veil-warm { z-index: 3; background: radial-gradient(ellipse calc(var(--sw) * .3) calc(var(--sh) * .6) at 50% var(--fy), rgba(255, 244, 228, .8), rgba(245, 221, 231, .3) 50%, rgba(255, 249, 252, 0) 76%); }
.env-go .veil-warm { animation: veil-warm 1500ms ease-out both; }
@keyframes veil-warm { 0% { opacity: 1; } 35% { opacity: 1; transform: scale(1.06); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes env-fade { to { opacity: 0; } }
.veil-touch { z-index: 6; left: calc(var(--tx) - 60px); top: calc(var(--ty) - 60px); width: 120px; height: 120px; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255, 250, 240, .95), rgba(239, 217, 166, .45) 45%, rgba(200, 164, 107, 0)); }
.env-go .veil-touch { animation: veil-touch 760ms cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes veil-touch { 0% { opacity: 0; transform: scale(.3); } 12% { opacity: 1; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.2); } }
.veil-slit { z-index: 3; opacity: .9; background: linear-gradient(90deg, rgba(255, 249, 252, 0) calc(50% - 46px), rgba(245, 221, 231, .4) calc(50% - 16px), rgba(255, 244, 228, .92) calc(50% - 3px), #FFFFFF 50%, rgba(255, 244, 228, .92) calc(50% + 3px), rgba(245, 221, 231, .4) calc(50% + 16px), rgba(255, 249, 252, 0) calc(50% + 46px)); }
.env-go .veil-slit { animation: slit-open 1500ms ease-out both; }
@keyframes slit-open { 0% { opacity: .9; transform: none; } 16% { opacity: 1; transform: scaleX(1.6); } 100% { opacity: 0; transform: scaleX(7); } }
.scr-wrap { z-index: 4; perspective: 640px; perspective-origin: 50% 46%; overflow: hidden; }
.scr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.scr .leaf { position: absolute; top: 0; height: var(--sh); background-color: #FBF3F6; background-repeat: no-repeat; opacity: 1; will-change: auto;
  background-image: var(--tex, linear-gradient(90deg, #F6ECF0, #FFFBFC 60%, #F3DFE7)); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.scr-l .leaf { transform-origin: 0 50%; } .scr-l > .leaf { left: 0; } .scr-l .leaf .leaf { left: 100%; }
.scr-r .leaf { transform-origin: 100% 50%; } .scr-r > .leaf { right: 0; } .scr-r .leaf .leaf { right: 100%; }
.leaf-shade { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.scr-l .leaf-a > .leaf-shade, .scr-l .leaf-c > .leaf-shade, .scr-r .leaf-b > .leaf-shade { background: linear-gradient(90deg, rgba(112, 62, 90, .16), rgba(112, 62, 90, .46)); }
.scr-l .leaf-b > .leaf-shade, .scr-r .leaf-a > .leaf-shade, .scr-r .leaf-c > .leaf-shade { background: linear-gradient(90deg, rgba(255, 255, 255, .6), rgba(255, 246, 232, .1)); }
.env-go .leaf-shade { animation: leaf-shade 2600ms linear both; }
@keyframes leaf-shade { 0%, 12% { opacity: 0; } 70%, 100% { opacity: 1; } }
.env-go .scr-l .leaf-c { animation: fold-c-l 2600ms linear both; } .env-go .scr-l .leaf-b { animation: fold-b-l 2600ms linear both; } .env-go .scr-l .leaf-a { animation: fold-a-l 2600ms linear both; }
.env-go .scr-r .leaf-c { animation: fold-c-r 2600ms linear both; } .env-go .scr-r .leaf-b { animation: fold-b-r 2600ms linear both; } .env-go .scr-r .leaf-a { animation: fold-a-r 2600ms linear both; }
@keyframes fold-c-l { 0% { transform: none; animation-timing-function: ease-out; } 4.5% { transform: rotateY(1.4deg); animation-timing-function: ease-in-out; } 16% { transform: rotateY(9deg); animation-timing-function: cubic-bezier(.5, .04, .2, 1); } 71% { transform: rotateY(166deg); animation-timing-function: ease-in-out; } 82%, 100% { transform: rotateY(158deg); } }
@keyframes fold-b-l { 0%, 10% { transform: none; animation-timing-function: ease-in-out; } 19% { transform: rotateY(-5deg); animation-timing-function: cubic-bezier(.5, .04, .2, 1); } 73% { transform: rotateY(-166deg); animation-timing-function: ease-in-out; } 84%, 100% { transform: rotateY(-158deg); } }
@keyframes fold-a-l { 0%, 14% { transform: none; animation-timing-function: ease-in-out; } 22% { transform: rotateY(2.5deg); animation-timing-function: cubic-bezier(.5, .04, .2, 1); } 75% { transform: rotateY(83deg); animation-timing-function: ease-in-out; } 86%, 100% { transform: rotateY(79deg); } }
@keyframes fold-c-r { 0% { transform: none; animation-timing-function: ease-out; } 4.5% { transform: rotateY(-1.4deg); animation-timing-function: ease-in-out; } 16% { transform: rotateY(-9deg); animation-timing-function: cubic-bezier(.5, .04, .2, 1); } 73% { transform: rotateY(-166deg); animation-timing-function: ease-in-out; } 84%, 100% { transform: rotateY(-158deg); } }
@keyframes fold-b-r { 0%, 12% { transform: none; animation-timing-function: ease-in-out; } 21% { transform: rotateY(5deg); animation-timing-function: cubic-bezier(.5, .04, .2, 1); } 75% { transform: rotateY(166deg); animation-timing-function: ease-in-out; } 86%, 100% { transform: rotateY(158deg); } }
@keyframes fold-a-r { 0%, 16% { transform: none; animation-timing-function: ease-in-out; } 24% { transform: rotateY(-2.5deg); animation-timing-function: cubic-bezier(.5, .04, .2, 1); } 77% { transform: rotateY(-83deg); animation-timing-function: ease-in-out; } 88%, 100% { transform: rotateY(-79deg); } }
.env-go .scr-l { animation: scr-out-l 2600ms linear both; } .env-go .scr-r { animation: scr-out-r 2600ms linear both; }
@keyframes scr-out-l { 0%, 74% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.5, 0, .7, .4); } 100% { transform: translate3d(calc(var(--sw) * -.26), 0, 0); } }
@keyframes scr-out-r { 0%, 76% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.5, 0, .7, .4); } 100% { transform: translate3d(calc(var(--sw) * .26), 0, 0); } }
.env-go .scr-wrap { animation: scr-fade 2600ms linear both; }
@keyframes scr-fade { 0%, 84% { opacity: 1; } 100% { opacity: 0; } }
.scr-shadow { position: absolute; top: 0; height: 100%; width: 22%; opacity: 0; pointer-events: none; }
.scr-shadow-l { left: 28%; background: linear-gradient(90deg, rgba(106, 52, 75, .26), rgba(106, 52, 75, 0)); }
.scr-shadow-r { left: 50%; background: linear-gradient(270deg, rgba(106, 52, 75, .26), rgba(106, 52, 75, 0)); }
.env-go .scr-shadow-l { animation: scr-sh-l 2600ms linear both; } .env-go .scr-shadow-r { animation: scr-sh-r 2600ms linear both; }
@keyframes scr-sh-l { 0%, 14% { opacity: 0; transform: translate3d(100%, 0, 0); animation-timing-function: cubic-bezier(.5, .04, .2, 1); } 40% { opacity: 1; } 74% { opacity: .8; transform: translate3d(-100%, 0, 0); } 100% { opacity: 0; transform: translate3d(-180%, 0, 0); } }
@keyframes scr-sh-r { 0%, 14% { opacity: 0; transform: translate3d(-100%, 0, 0); animation-timing-function: cubic-bezier(.5, .04, .2, 1); } 40% { opacity: 1; } 76% { opacity: .8; transform: translate3d(100%, 0, 0); } 100% { opacity: 0; transform: translate3d(180%, 0, 0); } }
.veil-glint { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 2;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .55) 48%, rgba(255, 238, 214, .35) 52%, rgba(255, 255, 255, 0) 62%); background-size: 300% 100%; }
.env-closed .veil-glint { animation: pearl-shine 5.6s ease-in-out 1.4s infinite; }
.env-go .veil-glint { animation: env-fade 260ms ease forwards; }
@keyframes pearl-shine { 0% { opacity: 0; background-position: 100% 0; } 12% { opacity: 1; } 42% { opacity: 1; background-position: 0 0; } 50%, 100% { opacity: 0; background-position: 0 0; } }
.veil-names { position: absolute; z-index: 7; left: 0; right: 0; transform: translate3d(0, -50%, 0); text-align: center; pointer-events: none; }
.veil-names-in { font-family: var(--serif); font-weight: 400; color: var(--ink); }
.vn-name { font-size: 1em; line-height: 1.12; letter-spacing: .07em; text-indent: .07em; white-space: nowrap; }
.vn-amp { font-size: .46em; line-height: 1.7; color: #B08A55; }
.env-go .veil-names-in { animation: vn-out 640ms cubic-bezier(.4, 0, .2, 1) 60ms both; }
@keyframes vn-out { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(0, -6px, 0) scale(1.02); } }
.veil-kicker, .veil-date, .veil-hint { position: absolute; z-index: 7; left: 0; right: 0; text-align: center; font-family: var(--serif); pointer-events: none; }
.veil-kicker { top: 7.5%; font-size: 13px; letter-spacing: .9em; text-indent: .9em; color: var(--ink); }
.veil-date { font-size: 12.5px; letter-spacing: .5em; text-indent: .5em; color: var(--gold-d); }
.veil-hint { font-size: 12px; letter-spacing: .6em; text-indent: .6em; color: #6B6560; }
.vt-on .veil-kicker, .vt-on .veil-date, .vt-on .veil-hint { display: none; }

/* —— 常驻：快捷栏、音乐开关、提示 —— */
.dock { position: fixed; left: var(--sl); width: var(--sw); bottom: 0; z-index: 50; display: flex; align-items: center; height: calc(56px + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom); background: rgba(255, 249, 252, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid #EBD3DE; transition: opacity .5s ease, transform .5s ease; }
.env-closed .dock, .env-go .dock { opacity: 0; transform: translateY(100%); pointer-events: none; }
.dock-main { flex: 1; height: 56px; font-size: 15px; letter-spacing: .12em; color: var(--rose); font-weight: 600; }
.dock-sep { width: 1px; height: 20px; background: #EBD3DE; }
.dock-tool { height: 56px; padding: 0 12px; font-size: 13px; color: var(--mute); white-space: nowrap; }
.snd { position: fixed; z-index: 55; left: calc(var(--sl) + 8px); top: calc(8px + env(safe-area-inset-top)); display: flex; align-items: center; }
.snd-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.snd-ico { position: relative; width: 18px; height: 14px; display: flex; align-items: flex-end; justify-content: space-between; color: var(--rose); }
.snd-ico i { width: 2px; height: 3px; border-radius: 1px; background: currentColor; opacity: .75; transition: height .25s ease; }
.snd-ico b { position: absolute; left: -2px; top: 6px; width: 22px; height: 1.5px; background: currentColor; transform: rotate(-35deg); opacity: .85; transition: opacity .2s ease; }
.snd-playing .snd-ico i { opacity: 1; animation: eq 1s ease-in-out infinite alternate; }
.snd-playing .snd-ico i:nth-child(2) { animation-duration: .7s; } .snd-playing .snd-ico i:nth-child(3) { animation-duration: 1.2s; } .snd-playing .snd-ico i:nth-child(4) { animation-duration: .85s; }
.snd-playing .snd-ico b, .snd-loading .snd-ico b { opacity: 0; }
.snd-loading .snd-ico i { height: 7px; animation: breathe 1.2s ease-in-out infinite; }
@keyframes eq { from { height: 3px; } to { height: 14px; } }
@keyframes breathe { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
.snd-pill { margin-left: 2px; padding: 0 14px; height: 28px; font-size: 12px; letter-spacing: .12em; border-radius: 14px; color: var(--rose); background: rgba(255, 249, 252, .9); box-shadow: 0 0 0 1px rgba(106, 52, 75, .18); }
.toast { position: fixed; left: 50%; top: 45%; z-index: 90; transform: translate(-50%, -40%); opacity: 0; transition: opacity .3s ease, transform .3s ease; padding: 10px 16px; font-size: 14px; color: #FFFFFF; background: rgba(60, 40, 50, .82); border-radius: 6px; pointer-events: none; }
.toast.in { opacity: 1; transform: translate(-50%, -50%); }

/* —— 放大查看 —— */
.lb { position: fixed; inset: 0; z-index: 80; touch-action: none; }
.lb[hidden] { display: none; }
.lb-bg { position: absolute; inset: 0; background: rgba(252, 246, 248, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; transition: opacity .42s ease; }
.lb-view { position: absolute; inset: 0; overflow: hidden; }
.lb-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; box-shadow: 0 30px 60px -30px rgba(80, 40, 60, .45); user-select: none; -webkit-user-select: none; cursor: zoom-in; }
.lb.zoomed .lb-img { cursor: grab; box-shadow: none; }
.lb-top { position: absolute; left: 0; right: 0; top: 0; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; opacity: 0; transition: opacity .3s ease .1s; }
.lb.in .lb-top, .lb.in .lb-cap, .lb.in .lb-nav { opacity: 1; }
.lb-count { font-size: 13px; letter-spacing: .2em; color: var(--mute); }
.lb-close { height: 36px; padding: 0 16px; font-size: 14px; letter-spacing: .2em; color: var(--rose); background: rgba(255, 255, 255, .85); border-radius: 18px; box-shadow: 0 0 0 1px rgba(200, 164, 107, .45); }
.lb-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 76px; padding: 10px 20px; text-align: center; opacity: 0; transition: opacity .3s ease .1s; pointer-events: none; }
.lb-alt { font-size: 14px; color: #5A4650; letter-spacing: .06em; }
.lb-hint { margin-top: 4px; font-size: 11.5px; color: #A3909A; letter-spacing: .12em; }
.lb.zoomed .lb-cap { opacity: 0 !important; }
.lb-nav { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px rgba(200, 164, 107, .45); opacity: 0; transition: opacity .3s ease; }
.lb-nav i { position: absolute; left: 17px; top: 16px; width: 10px; height: 10px; border-left: 1.5px solid var(--rose); border-bottom: 1.5px solid var(--rose); transform: rotate(45deg); }
.lb-next i { left: 14px; transform: rotate(-135deg); }
.lb-prev { left: 14px; } .lb-next { right: 14px; }
.lb.single .lb-nav, .lb.zoomed .lb-nav { display: none; }
@media (pointer: coarse) { .lb-nav { display: none; } }

/* —— 结尾的祝福层（与 v0.18 同样的成字与纸面）—— */
.bless { position: fixed; left: var(--sl); top: 0; width: var(--sw); height: var(--sh); z-index: 70; pointer-events: none; }
.bless-off { display: none; }
.bless-plane { position: absolute; inset: 0; background: rgba(255, 249, 252, .88); opacity: 0; transition: opacity .6s ease; }
.bless-form .bless-plane, .bless-read .bless-plane, .bless-finale .bless-plane { opacity: 1; pointer-events: auto; }
.bless-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.insc { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 2.2s cubic-bezier(.3, .1, .2, 1); }
.insc-img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s ease; }
.bless-read .insc-light { opacity: 1; }
.bless-finale .insc { transform: var(--it); } .bless-finale .insc-ink { opacity: 1; } .bless-finale .insc-light { opacity: 0; }
.fin-photo { position: absolute; left: 10%; top: 9%; width: 80%; height: 48%; overflow: hidden; opacity: 0; transform: translateY(20px) scale(.96); transition: opacity 1.4s ease 1s, transform 1.8s cubic-bezier(.2, .7, .2, 1) 1s; border: 8px solid #FFFFFF; box-shadow: 0 0 0 1px #9B753F, 0 0 0 3px #C8A46B, 0 30px 70px rgba(106, 52, 75, .22); }
.fin-photo picture, .fin-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }
.fin-paper { position: absolute; left: 6%; top: 55.5%; width: 88%; height: 27%; opacity: 0; transform: translateY(16px); transition: opacity 1.2s ease .6s, transform 1.6s ease .6s; border-radius: 4px; background: radial-gradient(120% 90% at 22% 12%, #FFFFFF 0%, #FFFBFD 58%, #F8EDF2 100%); box-shadow: 0 0 0 2px #C8A46B, 0 0 0 3px rgba(255, 246, 226, .9), 0 0 0 4px #9B753F, 0 34px 70px rgba(106, 52, 75, .2); }
.fin-seal { position: absolute; right: 22px; top: -23px; width: 46px; height: 46px; }
.bless-finale .fin-photo, .bless-finale .fin-paper { opacity: 1; transform: none; }
.fin-ctrl { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 8px; padding: 0 10px; opacity: 0; transition: opacity .8s ease 2.2s; pointer-events: auto; }
.bless-finale .fin-ctrl { opacity: 1; }
.fin-btn { height: 40px; padding: 0 14px; font-size: 13px; letter-spacing: .14em; color: var(--rose); background: rgba(255, 255, 255, .9); border-radius: 4px; box-shadow: 0 0 0 1px rgba(200, 164, 107, .6); }
.fin-main { color: #FFFFFF; background: #7E3558; }

/* —— 简洁浏览：每一章就是它停稳时的构图，按顺序排列；没有连续的动效与强视差 —— */
.simple .stage { position: relative; left: auto; top: auto; margin: 0 auto; height: auto; z-index: 3; }
.simple .ch { position: relative; height: var(--sh); visibility: visible !important; transform: none !important; opacity: 1 !important; }
.simple .ch-I { height: auto; min-height: var(--sh); flex-direction: column; padding: 8vh 7%; }
.simple .ch-I .iv-bg { opacity: 1 !important; }
.simple .iv-stack { display: block; transform: none; perspective: none; }
.simple .iv-stack > .leaf { opacity: 1 !important; transform: none !important; visibility: visible !important; }
.simple .leaf-sd { margin-top: 9vh; }
.simple .sd-item { opacity: 1; transform: none; transition: none; }
.simple .cap, .simple .q-line, .simple .q-by, .simple .w-col, .simple .w-by { opacity: 1; transform: none; transition: none; }
.simple .fx, .simple .amb { display: none; }
.simple .q-static { display: block; position: absolute; left: 0; top: 6%; width: 100%; }
.simple .ch-Q .q-poem { top: auto !important; bottom: 18%; }
.simple .w-static { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.simple .w-hint { opacity: 1 !important; bottom: 40px !important; }
.simple .w-tap { display: none; }
.simple .w-arrow, .simple .ph-sheen { animation: none; }
.simple .page-r { transform: none !important; }
.simple .ch-A .ph { filter: none !important; animation: none !important; }
.simple .stage.gone { visibility: visible; }
.simple .track { height: 0 !important; }

/* —— 电脑：故事在中间一列，两侧是同一片纸面与光；照片保持适中的尺寸 —— */
.wide .stage::before, .wide .stage::after { content: ''; position: absolute; top: 8%; bottom: 8%; width: 1px; background: linear-gradient(180deg, rgba(200, 164, 107, 0), rgba(200, 164, 107, .35), rgba(200, 164, 107, 0)); }
.wide .stage::before { left: -28px; } .wide .stage::after { right: -28px; }
.wide .dock { border-radius: 12px 12px 0 0; border: 1px solid #EBD3DE; border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .ph-sheen, .w-arrow, .snd-playing .snd-ico i { animation: none !important; } }
/* 流程页上方的秀禾小像：窗口与照片同比例，完整显示（不裁切、不拉伸） */
.sd-portrait .ph-frame { left: -5px; top: -5px; right: -5px; bottom: -5px; width: auto !important; height: auto !important; border-radius: 15px; }
.sd-portrait .ph-win { left: 5px; top: 5px; right: 5px; bottom: 5px; width: auto !important; height: auto !important; border-radius: 10px; }
.sd-portrait .ph-win img { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }