/* 姑苏故事：沿用现有新人图集，所有互动均留在本地页面。 */
.story-page{--story-progress:0;background:#fffcf7}
.story-content{max-width:456px;margin:auto;padding:21px 25px 20px;justify-content:center}
.story-heading{display:flex;justify-content:space-between;gap:16px;width:100%;font:10px/1.5 var(--sans);letter-spacing:.16em;color:var(--gold-muted);margin-bottom:9px}
.story-heading>span:last-child{font-family:Georgia,serif;letter-spacing:.08em}
.story-title{font-size:clamp(24px,6.5vw,29px);font-weight:400;line-height:1.35;letter-spacing:.12em;margin-bottom:15px}
.story-scene{width:100%;max-width:clamp(250px,calc(100svh - 540px),354px);aspect-ratio:1;position:relative;isolation:isolate;overflow:hidden;border-radius:46% 46% 4px 4px;border:1px solid #c6b89965;background:#fffcf7;box-shadow:0 9px 26px #78644d08}
.story-backdrop{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.story-scene::after{content:"";position:absolute;left:23%;right:23%;top:32%;bottom:-3%;background:#fffcf7;border-radius:44% 44% 12% 12%;filter:blur(5px);z-index:2;pointer-events:none}
.story-place{position:absolute;top:25px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 12px;background:#fffcf7e8;border:1px solid #cbb99655;border-radius:2px;font-size:11px;letter-spacing:.13em;color:#776c5c;z-index:2}
.story-couple{position:absolute;width:44%;aspect-ratio:2/3;left:28%;bottom:2.2%;z-index:3;mix-blend-mode:multiply;transform-origin:50% 92%}
.story-sprite{position:absolute;inset:0;background-repeat:no-repeat;background-position:0 0;background-size:400% 200%;transform-origin:50% 92%;pointer-events:none}
.story-pingjiang .story-couple,.story-jinji .story-couple{display:none}
.story-pingjiang .story-scene::after,.story-jinji .story-scene::after{left:3%;right:3%;top:34%;filter:blur(7px)}
.story-actor{position:absolute;left:-2%;bottom:2%;width:48%;aspect-ratio:2/3;z-index:3;transform-origin:50% 88%;mix-blend-mode:multiply;pointer-events:none}
.story-actor-bride{left:54%}
.story-actor-sprite,.story-lift-sprite{position:absolute;inset:0;background-repeat:no-repeat;background-size:300% 200%;background-position:0 0}
.story-actor-sprite{background-image:url('assets/story-solo-poses.png')}
.story-actor-bride .story-actor-sprite{background-position:0 100%}
.story-pingjiang .story-actor-sprite{background-image:url('assets/story-greeting-gaze.png');background-size:200% 100%}
.story-lift{position:absolute;left:25%;bottom:5%;width:50%;aspect-ratio:2/3;z-index:3;opacity:0;transform-origin:50% 88%;mix-blend-mode:multiply;pointer-events:none}
.story-lift-sprite{background-image:url('assets/story-lift-poses.png');clip-path:inset(0 5% 0 5%)}
.story-hello{position:absolute;left:25%;top:22%;margin-left:-31px;padding:7px 12px;border:1px solid #b6a790;border-radius:14px 14px 14px 0;background:#fffdfa;font:12px/1.2 var(--sans);color:#805b50;z-index:4;opacity:0;pointer-events:none}
.story-hello-bride{left:75%;border-radius:14px 14px 0 14px}
.story-copy{font-size:13px;line-height:1.9;letter-spacing:.045em;color:#755f5b;margin:12px -3px 10px}
.story-controls{width:100%;max-width:310px}
.story-action{width:100%;min-height:46px;border:1px solid var(--wine);background:var(--wine);color:var(--paper);border-radius:3px;font-size:14px;letter-spacing:.13em;padding:10px 14px;transition:background .2s}
.story-action:hover{background:var(--deep-wine)}
.story-action:disabled{opacity:.68;cursor:default}
.story-response{font:11px/1.6 var(--sans);color:#7c655f;min-height:18px;margin-top:9px;letter-spacing:.02em}
.story-playback{display:flex;justify-content:center;align-items:center;gap:15px;color:#bba98c;margin-top:2px}
.story-playback button{border:0;background:transparent;min-height:36px;font:11px/1.4 var(--sans);color:#715a60;padding:5px 6px}
.story-playback button:disabled{color:#ada29a;cursor:default}
.story-steps{display:flex;justify-content:space-between;width:100%;max-width:310px;border-top:1px solid #cbb9964d;margin-top:8px;padding-top:7px}
.story-steps button{min-height:40px;padding:5px 4px;border:0;background:transparent;font:11px/1.4 var(--sans);color:#9c8d7c;display:flex;align-items:center;gap:6px}
.story-steps button span{font:11px/1 Georgia,serif;letter-spacing:.04em}
.story-steps button[aria-current=step]{color:var(--wine)}
.story-steps button[aria-current=step] span{border-bottom:1px solid var(--wine);padding-bottom:3px}
.story-pagination{display:flex;justify-content:space-between;align-items:center;width:100%;gap:8px;margin-top:2px}
.story-pagination button{min-height:42px;border:0;background:none;font-size:11px;color:var(--wine);letter-spacing:.035em;padding:8px 2px}
.story-pagination button:first-child{color:#9c8d7c}
.story-museum .story-photo-frame{position:absolute;inset:36% 22% 1%;z-index:4;opacity:0;pointer-events:none}
.story-photo-frame i{position:absolute;width:16px;height:16px;border-color:#91754c;border-style:solid;border-width:0}
.story-photo-frame i:nth-child(1){top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.story-photo-frame i:nth-child(2){top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
.story-photo-frame i:nth-child(3){bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}
.story-photo-frame i:nth-child(4){bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
.story-photo-frame span{position:absolute;left:50%;top:-20px;transform:translateX(-50%);font-size:10px;letter-spacing:.07em;white-space:nowrap;color:#8b785c;background:#fffcf7d9;padding:2px 5px}
.story-museum[data-story-state=playing] .story-photo-frame{animation:story-photo 4.5s ease both}
.story-museum[data-story-state=done] .story-photo-frame{opacity:1}
.story-museum[data-story-state=playing] .story-couple{animation:story-pose 4.5s ease both}
.story-shutter{position:absolute;inset:0;background:#f7e9c4;opacity:0;pointer-events:none;z-index:5}
.story-museum[data-story-state=playing] .story-shutter{animation:story-shutter 4.5s ease both}
.story-shantang .story-couple{width:39%;left:30.5%;bottom:1.6%}
.story-umbrella{position:absolute;left:23%;width:54%;top:22%;opacity:0;transform:translateY(16px) scale(.3);transform-origin:50% 90%;z-index:4;pointer-events:none}
.story-umbrella-shaft{z-index:1}
.story-umbrella-canopy{z-index:4}
.story-shantang[data-story-state=playing] .story-umbrella{animation:story-open-umbrella 4.8s ease both}
.story-shantang[data-story-state=done] .story-umbrella{opacity:1;transform:translateY(0) scale(1)}
.story-shantang[data-story-state=playing] .story-couple{animation:story-walk 4.8s ease both}
.story-rain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0}
.story-rain i{position:absolute;top:20%;width:1px;height:15px;background:#8ca4ae80;left:10%;transform:rotate(14deg)}
.story-rain i:nth-child(2){left:27%;top:32%}.story-rain i:nth-child(3){left:72%;top:24%}.story-rain i:nth-child(4){left:89%;top:49%}.story-rain i:nth-child(5){left:16%;top:62%}.story-rain i:nth-child(6){left:79%;top:67%}
.story-shantang[data-story-state=playing] .story-rain{animation:story-rain 4.8s ease both}
.story-lights{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2}
.story-lights i{position:absolute;width:3px;height:10px;background:#c69749;box-shadow:0 0 8px #e5bc6c;left:39%;top:31%;border-radius:1px}
.story-lights i:nth-child(2){left:42%;top:38%}.story-lights i:nth-child(3){left:57%;top:31%}.story-lights i:nth-child(4){left:60%;top:40%}.story-lights i:nth-child(5){left:72%;top:47%;height:3px}.story-lights i:nth-child(6){left:20%;top:47%;height:3px}
.story-jinji[data-story-state=playing] .story-lights{animation:story-city-light 9s ease both}
.story-jinji[data-story-state=done] .story-lights{opacity:1}
.story-wish{position:absolute;left:0;right:0;top:38%;height:45%;pointer-events:none;z-index:4;opacity:0}
.story-wish span{position:absolute;color:#ae6c70;font-size:19px;left:48%;top:16%}
.story-wish span:nth-child(2){left:29%;top:36%;font-size:11px}.story-wish span:nth-child(3){left:68%;top:28%;font-size:13px}
.story-jinji[data-story-state=playing] .story-wish{animation:story-hearts 9s ease both}
.story-jinji[data-story-state=done] .story-wish{opacity:.85;transform:translateY(-9px)}
.story-promise{position:absolute;z-index:4;left:50%;bottom:5px;transform:translateX(-50%);white-space:nowrap;font-size:9px;color:#846b51;letter-spacing:.13em;opacity:0;background:#fff9ecdd;padding:3px 10px}
.story-jinji[data-story-state=playing] .story-promise{animation:story-city-light 9s ease both}
.story-jinji[data-story-state=done] .story-promise{opacity:1}
.story-page:not(.is-story-running) .story-scene *{animation-play-state:paused!important}
@keyframes story-photo{0%{opacity:0;transform:scale(1.04)}18%,100%{opacity:1;transform:scale(1)}}
@keyframes story-pose{0%,100%{transform:translateY(0) rotate(0)}28%{transform:translateY(-3px) rotate(-1deg)}55%{transform:translateY(-2px) rotate(1deg)}75%{transform:translateY(0) rotate(0)}}
@keyframes story-shutter{0%,36%{opacity:0}41%{opacity:.18}55%,100%{opacity:0}}
@keyframes story-open-umbrella{0%{opacity:0;transform:translateY(16px) scale(.3)}30%{opacity:1;transform:translateY(0) scale(1)}60%{opacity:1;transform:translateY(-2px) rotate(-2deg) scale(1)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes story-walk{0%,100%{transform:translate(0,0)}30%{transform:translate(-6px,-3px)}50%{transform:translate(0,0)}70%{transform:translate(6px,-3px)}}
@keyframes story-rain{0%{opacity:0;transform:translateY(-10px)}35%{opacity:.7}70%{opacity:.6;transform:translateY(15px)}100%{opacity:0;transform:translateY(26px)}}
@keyframes story-city-light{0%,22%{opacity:0}85%,100%{opacity:1}}
@keyframes story-hearts{0%,32%{opacity:0;transform:translateY(12px) scale(.94)}70%{opacity:1}100%{opacity:.85;transform:translateY(-9px) scale(1)}}
@media(min-height:850px){.story-content{padding-top:32px;padding-bottom:28px}.story-copy{margin-top:20px;margin-bottom:18px}}
@media(max-width:360px){.story-content{padding-left:18px;padding-right:18px}.story-heading{font-size:9px}.story-title{font-size:24px}.story-copy{font-size:12px}.story-pagination button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.story-page *{animation:none!important;transition:none!important}.story-sprite{will-change:auto}}