:root{
  --cream:#f4ede2;--paper:#fffaf2;--ink:#2f342f;--sage:#73836a;--sage-deep:#516149;--rose:#b77479;--gold:#d4b26d;
  --line:rgba(60,73,56,.14);--shadow:0 18px 52px rgba(35,40,32,.14);--parallaxY:0px;--parallaxText:0px
}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--cream)}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Songti SC","STSong","Noto Serif CJK SC","Microsoft YaHei",serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}button{font:inherit;color:inherit}img{display:block;max-width:100%}.page{width:100%;overflow:hidden}.section-snap{min-height:100svh}.interactive-zone{position:relative}.eyebrow,.section-kicker{font:700 10px/1.2 Arial,sans-serif;letter-spacing:.22em;color:var(--sage-deep)}

/* opening */
.opening{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 30%,#fffaf0 0,#eee5d7 44%,#cdd6c4 100%);transition:opacity .7s ease,visibility .7s ease}.opening.hidden{opacity:0;visibility:hidden;pointer-events:none}.opening-card{text-align:center;width:min(92vw,430px);padding:42px 24px;transition:opacity .35s,transform .45s}.opening.ride-out .opening-card{opacity:.08;transform:translateY(-14px) scale(.98)}.opening-mark{width:68px;height:68px;border:1px solid var(--sage);border-radius:50%;display:grid;place-items:center;margin:0 auto 28px;letter-spacing:.18em;font-size:14px}.opening h1{font-size:42px;line-height:1.28;font-weight:500;margin:14px 0 30px;letter-spacing:.04em}.seal-button{width:104px;height:104px;border:0;border-radius:50%;background:var(--sage-deep);color:#fff;font-size:36px;box-shadow:0 14px 28px rgba(63,79,58,.25);cursor:pointer;animation:pulse 1.5s ease-in-out infinite}.tap-hint{font-size:14px;opacity:.88;margin-top:28px}@keyframes pulse{0%,100%{transform:translateY(0) scale(.92);box-shadow:0 12px 24px rgba(63,79,58,.22),0 0 0 0 rgba(115,131,106,.12)}50%{transform:translateY(-6px) scale(1.22);box-shadow:0 22px 42px rgba(63,79,58,.32),0 0 0 12px rgba(115,131,106,.08)}}.opening-road{position:absolute;left:0;right:0;bottom:17%;height:2px;display:flex;gap:18px;opacity:0;align-items:center}.opening-road span{width:42px;height:1px;background:rgba(82,101,77,.36);flex:0 0 auto}.opening.ride-out .opening-road{opacity:1;animation:roadMove .58s linear infinite}@keyframes roadMove{to{transform:translateX(-60px)}}.opening-scooter{position:absolute;left:-190px;bottom:17%;width:176px;color:var(--sage-deep);opacity:0;transform:translateY(28px)}.opening-scooter svg{width:100%;filter:drop-shadow(0 8px 14px rgba(60,71,55,.18))}.opening.ride-out .opening-scooter{opacity:1;animation:scooterRide 1.15s cubic-bezier(.3,.7,.45,1) forwards}@keyframes scooterRide{0%{transform:translate(-10vw,28px) rotate(-2deg)}48%{transform:translate(64vw,18px) rotate(1deg)}100%{transform:translate(145vw,22px) rotate(-1deg)}}.ride-heart{position:absolute;font-style:normal;color:var(--rose);opacity:0}.ride-heart.h1{left:18px;top:0}.ride-heart.h2{left:48px;top:-18px}.ride-heart.h3{left:76px;top:-4px}.opening.ride-out .ride-heart{animation:trailHeart .8s .16s ease-out forwards}@keyframes trailHeart{0%{opacity:0;transform:translateY(18px) scale(.5)}35%{opacity:.8}100%{opacity:0;transform:translateY(-30px) scale(1.4)}}

/* fixed bgm */
.music-fab.tap-react{position:fixed;z-index:90;right:max(14px,env(safe-area-inset-right));top:calc(14px + env(safe-area-inset-top,0px));width:54px;height:54px;border-radius:18px;border:1px solid rgba(255,255,255,.5);background:rgba(35,39,33,.34);backdrop-filter:blur(12px);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.14);opacity:0;pointer-events:none;transform:translateY(-10px);transition:.3s}.invite-opened .music-fab{opacity:1;pointer-events:auto;transform:none}.music-fab .disc{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#efe5d5 0 9%,#1f231e 10% 24%,#4c5548 25% 42%,#1f231e 43% 60%,#6b7a63 61%);font-size:12px}.music-fab small{position:absolute;bottom:4px;font:700 7px/1 Arial;letter-spacing:.12em}.music-fab.playing .disc{animation:spin 4s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* hero */
.hero{position:relative;display:flex;align-items:flex-end;color:#fff;background:#20231f}.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;transform:scale(1.025);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}.invite-opened .hero-bg{transform:scale(1)}.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,18,.03) 25%,rgba(20,23,18,.78) 100%)}.hero-copy{position:relative;z-index:2;width:100%;padding:0 26px max(46px,env(safe-area-inset-bottom));text-align:center}.script{font-family:"Snell Roundhand","Segoe Script","Brush Script MT",cursive;font-size:58px;line-height:.95;margin:0 0 14px;font-weight:400}.hero-copy h2{font-size:24px;font-weight:500;letter-spacing:.16em;margin:0 0 15px;display:flex;align-items:center;justify-content:center;gap:11px}.hero-line{font-size:13px;line-height:1.8;opacity:.92;letter-spacing:.06em}.scroll-tip{margin-top:30px;font-size:11px;opacity:.76}.scroll-tip b{display:block;font-size:20px;animation:bob 1.6s infinite}@keyframes bob{50%{transform:translateY(5px)}}.name-heart{--progress:0deg;position:relative;border:0;background:transparent;color:#f4dada;font-size:17px;width:34px;height:34px;padding:0;border-radius:50%;display:grid;place-items:center;touch-action:none;user-select:none}.name-heart::after{content:"";position:absolute;inset:1px;border-radius:50%;background:conic-gradient(#fff var(--progress),rgba(255,255,255,.18) 0);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%);opacity:0}.name-heart.pressing::after{opacity:1}.press-ring{position:absolute;inset:-4px;border:1px solid rgba(255,255,255,.28);border-radius:50%}

/* torn */
.torn-edge{height:32px;position:relative;z-index:8;margin:-1px 0;background:transparent;pointer-events:none}.torn-edge::before{content:"";position:absolute;inset:-1px 0;background:var(--tear);clip-path:polygon(0 18%,4% 48%,8% 22%,12% 68%,17% 34%,21% 62%,26% 26%,31% 66%,36% 31%,41% 74%,47% 29%,52% 65%,58% 22%,63% 72%,69% 33%,74% 68%,80% 24%,86% 62%,92% 30%,96% 55%,100% 19%,100% 100%,0 100%)}.torn-light{--tear:#fffaf2}.torn-film{--tear:#242722;transform:rotate(180deg)}.torn-paper{--tear:#fffaf2}.torn-vintage{--tear:#394337;transform:rotate(180deg)}.torn-ending{--tear:#fffaf2;transform:rotate(180deg)}

/* invitation */
.paper-section{background:var(--paper);position:relative;padding:82px 22px}.paper-section::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(65,73,60,.055) .6px,transparent .6px);background-size:8px 8px;pointer-events:none}.intro{text-align:center}.big-title{font-size:38px;font-weight:500;margin:10px 0 20px}.intro-text{font-size:14px;line-height:2;color:#686961;margin:0 auto 36px}.save-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:430px;margin:0 auto 24px}.date-ticket,.place-ticket{position:relative;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.76);padding:24px 14px;min-height:160px;text-align:center;overflow:hidden;box-shadow:0 12px 36px rgba(53,62,49,.05)}.ticket-label{font:700 9px/1 Arial;letter-spacing:.22em;color:var(--sage)}.date-ticket strong{display:block;font:500 34px/1.1 Georgia,serif;margin:16px 0 8px}.date-ticket em,.place-ticket em{display:block;font-style:normal;font-size:13px;color:#676c65}.date-ticket small,.place-ticket small{display:block;margin-top:10px;font-size:10px;color:#9a978f}.date-ticket.flipping{animation:ticketFlip .68s ease}@keyframes ticketFlip{48%{transform:rotateY(90deg) scale(.96)}52%{transform:rotateY(-90deg) scale(.96)}}.place-ticket{grid-column:auto}.place-ticket strong{display:block;font-size:19px;font-weight:500;margin:18px 0 8px}.route-line{position:absolute;left:18%;right:18%;bottom:15px;height:16px;border-bottom:1.5px dashed rgba(82,101,77,.42);opacity:.45}.place-ticket.routing .route-line::after{content:"♥";position:absolute;right:-5px;bottom:-8px;color:var(--rose);animation:routeMove .9s ease both}@keyframes routeMove{0%{transform:translateX(-120px) scale(.6);opacity:0}100%{transform:none;opacity:1}}.outline-btn{border:1px solid var(--sage);background:transparent;color:var(--sage-deep);padding:12px 18px;border-radius:999px;transition:.25s}.outline-btn:active{background:var(--sage);color:#fff}

/* film */
.film-section{padding:76px 0 72px;background:#242722;color:#f3ead9}.film-head{padding:0 24px 26px}.film-section .section-kicker,.vintage-section .section-kicker{color:#bdc7b3}.film-head h2{font-weight:500;font-size:31px;line-height:1.45;margin:8px 0}.film-shell{position:relative;padding:22px 0;background:#111310;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}.film-perfs{position:absolute;left:0;right:0;height:13px;z-index:2;opacity:.78;background:repeating-linear-gradient(90deg,transparent 0 11px,#efe8d7 11px 20px,transparent 20px 33px)}.film-perfs.top{top:5px}.film-perfs.bottom{bottom:5px}.film-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px calc(50vw - 40vw) 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.film-track::-webkit-scrollbar{display:none}.film-frame{margin:0;flex:0 0 80vw;max-width:390px;scroll-snap-align:center;background:#161915;padding:9px;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 42px rgba(0,0,0,.22);transform:scale(.93);opacity:.72;transition:.35s;filter:saturate(.76)}.film-frame.active{transform:scale(1);opacity:1;filter:saturate(1)}.film-frame img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#333}.film-frame figcaption{display:grid;grid-template-columns:auto 1fr;gap:3px 11px;padding:12px 3px 5px;align-items:center}.film-frame figcaption b{grid-row:1/3;font:700 24px/1 Arial;color:#d9d0bf}.film-frame figcaption span{font-size:12px}.film-frame figcaption small{font:8px/1.3 Arial;letter-spacing:.18em;color:#9ea496}.film-dots{display:flex;justify-content:center;gap:7px;margin:16px 0 0}.film-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.28);transition:.25s}.film-dots i.active{width:20px;border-radius:10px;background:#bbc6b1}.tiny-note{text-align:center;font-size:10px;color:#9da697;margin:10px 18px 0}

/* story */
.story-grid{background:var(--paper);padding:78px 20px 92px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.story-text{grid-column:1/-1;padding:0 4px 20px}.story-text h2{font-size:29px;font-weight:500;line-height:1.5;margin:8px 0 14px}.story-text p:last-child{font-size:13px;line-height:1.9;color:#6c6e68}.story-photo{border:0;padding:0;background:#ddd;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}.story-photo img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover}.story-photo.tall{grid-row:span 2}.story-photo.tall img{aspect-ratio:4/10}

/* playful deck */
.play-section{background:linear-gradient(180deg,#fffaf2,#efe8dd);padding:86px 22px 100px;text-align:center;overflow:hidden}.play-section h2{font-size:31px;line-height:1.45;font-weight:500;margin:10px 0 12px}.play-copy{font-size:13px;line-height:1.9;color:#74756e;max-width:340px;margin:0 auto 28px}.polaroid-deck{position:relative;height:500px;max-width:390px;margin:0 auto;perspective:1100px}.deck-card{position:absolute;left:50%;top:24px;width:min(78vw,330px);border:10px solid #fff7ea;border-bottom-width:48px;background:#fff7ea;padding:0;box-shadow:0 25px 60px rgba(47,48,40,.2);transform-origin:50% 110%;transition:transform .48s cubic-bezier(.2,.8,.18,1),opacity .4s}.deck-card img{width:100%;aspect-ratio:4/5;object-fit:cover}.deck-card span{position:absolute;left:0;right:0;bottom:-35px;text-align:center;font-size:11px;color:#5f625c}.deck-card:nth-child(1){transform:translateX(-50%) rotate(-2deg);z-index:4}.deck-card:nth-child(2){transform:translateX(-50%) rotate(4deg) translateY(12px) scale(.97);z-index:3}.deck-card:nth-child(3){transform:translateX(-50%) rotate(-5deg) translateY(24px) scale(.94);z-index:2}.deck-card:nth-child(4){transform:translateX(-50%) rotate(2deg) translateY(36px) scale(.91);z-index:1}.deck-card.toss-left{transform:translateX(-145%) translateY(-70px) rotate(-28deg)!important;opacity:0}.deck-card.toss-right{transform:translateX(45%) translateY(-70px) rotate(28deg)!important;opacity:0}

/* quote: fixed layout, no floating bug */
.quote-section{background:#e8e3d9;padding:0 18px 76px}.quote-photo-wrap{position:relative;max-width:470px;margin:0 auto;border-radius:28px 28px 14px 14px;overflow:hidden;background:#c7c2b9;box-shadow:0 20px 50px rgba(36,40,32,.14)}.quote-photo-wrap img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 48%}.quote-index{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.84);backdrop-filter:blur(10px);padding:6px 9px;border-radius:999px;font:700 9px/1 Arial;letter-spacing:.14em}.quote-card{display:block;width:calc(100% - 28px);max-width:430px;margin:-36px auto 0;position:relative;z-index:3;border:1px solid rgba(255,255,255,.72);background:rgba(255,250,242,.94);backdrop-filter:blur(16px);padding:24px 22px;border-radius:22px;text-align:left;box-shadow:0 18px 40px rgba(46,50,42,.13)}.quote-mark{font-size:42px;color:var(--sage);line-height:.6}.quote-card p{font-size:19px;line-height:1.7;margin:8px 0 14px}.quote-card small{font:700 8px/1.3 Arial;letter-spacing:.15em;color:#7a7a73}

/* vintage: clear full photos */
.vintage-section{padding:80px 0 86px;background:#394337;color:#f7f0df}.vintage-gallery{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 24px 24px;scrollbar-width:none}.vintage-gallery::-webkit-scrollbar{display:none}.vintage-photo{flex:0 0 82vw;max-width:390px;scroll-snap-align:center;border:10px solid #eee4d2;border-bottom-width:44px;background:#eee4d2;padding:0;border-radius:4px;box-shadow:0 24px 50px rgba(0,0,0,.26);position:relative}.vintage-photo:nth-child(1){transform:rotate(-1.5deg)}.vintage-photo:nth-child(2){transform:rotate(1.8deg)}.vintage-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 46%}.vintage-photo span{position:absolute;left:0;right:0;bottom:-31px;text-align:center;color:#394337;font:700 9px/1 Arial;letter-spacing:.14em}.center-note{text-align:center;line-height:2;font-size:13px;color:#ddd9cb;padding:0 24px;margin:12px 0}.secret-note{text-align:center;font-size:9px;color:#9fab96;margin:26px 18px 0}

/* Preserve the landscape composition of the garden bridge photo. */
.film-frame img,.deck-card img,.vintage-photo img{height:auto}
.story-photo.wide{grid-column:1/-1}
.story-photo.wide img{height:auto;aspect-ratio:3/2;object-fit:contain}

/* scratch */
.scratch-section{padding:86px 22px 96px;background:#ece9dd;text-align:center}.scratch-section h2{font-size:31px;font-weight:500;margin:10px 0 12px}.scratch-section>p:not(.section-kicker){font-size:13px;line-height:1.9;color:#72746c;margin:0 auto 24px}.scratch-wrap{position:relative;width:min(88vw,390px);aspect-ratio:4/5;margin:0 auto;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(48,54,45,.16);background:#53644e;isolation:isolate}.scratch-secret{position:absolute;inset:0;background:#222;display:grid}.scratch-secret img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82) brightness(.78)}.scratch-secret::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(18,20,17,.75) 100%)}.scratch-secret>div{position:relative;z-index:2;color:#fff;align-self:end;padding:26px 24px 30px}.scratch-secret b{display:block;font:700 9px/1 Arial;letter-spacing:.25em;color:#e7d7b4}.scratch-secret strong{display:block;font-size:34px;line-height:1.2;margin:8px 0}.scratch-secret small{font-size:11px}.scratch-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;z-index:3;transition:.55s}.scratch-wrap.revealed canvas{opacity:0;transform:scale(1.03);pointer-events:none}

/* sunset redesigned */
.sunset-section{background:#1f261e;color:#fff;padding-bottom:72px}.sunset-stage{position:relative;min-height:92svh;overflow:hidden}.sunset-bg{position:absolute;inset:-5% 0 0;width:100%;height:110%;object-fit:cover;object-position:center 36%;transform:translate3d(0,var(--parallaxY),0) scale(1.035);will-change:transform}.sunset-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,8,.02) 18%,rgba(14,18,13,.18) 56%,rgba(12,16,12,.84) 100%)}.sun-glow{position:absolute;width:190px;height:190px;border-radius:50%;right:-40px;top:17%;background:radial-gradient(circle,rgba(255,224,176,.46),rgba(255,197,113,.09) 48%,transparent 72%);filter:blur(7px);transform:translate3d(0,calc(var(--parallaxY) * -.35),0)}.sunset-copy{position:absolute;z-index:3;left:24px;right:24px;bottom:38px;transform:translate3d(0,var(--parallaxText),0)}.sunset-copy .section-kicker{color:#ead7af}.sunset-copy h2{font-size:31px;line-height:1.5;font-weight:500;margin:10px 0 14px;text-shadow:0 2px 18px rgba(0,0,0,.24)}.sunset-copy p{font-size:13px;line-height:1.9;max-width:330px;color:rgba(255,255,255,.84)}.sunset-copy em{display:inline-block;margin-top:12px;font-size:10px;font-style:normal;letter-spacing:.07em;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.3);padding:7px 10px;border-radius:999px;backdrop-filter:blur(7px)}.sunset-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px}.sunset-card{border:0;padding:0;background:#30362f;border-radius:18px;overflow:hidden;color:#fff;text-align:left;box-shadow:0 18px 40px rgba(0,0,0,.18)}.sunset-card img{width:100%;aspect-ratio:4/5;object-fit:cover}.sunset-card span{display:block;padding:11px 12px 13px;font-size:11px;color:#e9e2d4}.sunset-card.wide{grid-column:1/-1}.sunset-card.wide img{aspect-ratio:16/10;object-position:center 58%}

/* ending */
.ending{text-align:center;padding-bottom:110px}.script.dark{color:var(--sage);font-size:48px}.ending h2{font-weight:500;font-size:30px;line-height:1.55;margin:12px 0 26px}.names{display:flex;justify-content:center;gap:16px;font-size:18px;letter-spacing:.12em}.names b{color:var(--rose)}.ending-date{font-size:12px;line-height:1.9;color:#78766f;margin:16px 0 24px}.final-egg{display:inline-block;margin:0;border:1px solid rgba(115,131,106,.28);background:rgba(255,255,255,.45);color:#73766f;font-size:11px;padding:11px 16px;border-radius:999px}.footer-note{font-size:13px;line-height:2;color:#65655e;margin-top:32px}

/* The transparent couple jumps straight up together, then lands on both feet. */
.ending-bouncer{--hop:clamp(20px,6vw,32px);position:absolute;right:clamp(8px,3vw,16px);bottom:clamp(146px,40vw,205px);width:clamp(52px,17vw,88px);z-index:3;pointer-events:none}
.ending-bouncer img{position:relative;z-index:1;width:100%;height:auto;border:0;border-radius:0;background:transparent;box-shadow:none;animation:endingPhotoHop 1.05s infinite;animation-play-state:paused}
.ending-bouncer::after{content:"";position:absolute;z-index:0;left:28%;right:24%;bottom:3.5%;height:clamp(4px,1.2vw,6px);border-radius:50%;background:radial-gradient(ellipse,rgba(47,52,47,.3) 0%,rgba(47,52,47,.18) 50%,transparent 75%);filter:blur(.8px);animation:endingGroundShadow 1.05s infinite;animation-play-state:paused}
.ending.visible .ending-bouncer img,.ending.visible .ending-bouncer::after{animation-play-state:running}
@keyframes endingPhotoHop{0%,12%{transform:translateY(0);animation-timing-function:cubic-bezier(.15,.65,.3,1)}48%{transform:translateY(calc(-1 * var(--hop)));animation-timing-function:cubic-bezier(.55,0,.85,.4)}84%,100%{transform:translateY(0)}}
@keyframes endingGroundShadow{0%,12%{transform:scale(1);opacity:.9;animation-timing-function:cubic-bezier(.15,.65,.3,1)}48%{transform:scale(.45,.65);opacity:.35;animation-timing-function:cubic-bezier(.55,0,.85,.4)}84%,100%{transform:scale(1);opacity:.9}}

/* overlays */
.lightbox,.egg-overlay{position:fixed;inset:0;z-index:4000;background:rgba(20,23,19,.82);backdrop-filter:blur(8px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.28s}.lightbox.show,.egg-overlay.show{opacity:1;visibility:visible}.lightbox img{max-width:92vw;max-height:86vh;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.38)}.egg-card{width:min(90vw,410px);background:var(--paper);border-radius:26px;padding:24px;text-align:center;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.34)}.egg-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;margin:16px 0}.egg-card h2{font-size:25px;font-weight:500}.egg-card p{font-size:13px;line-height:1.8}.close-x.tap-react{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.86);font-size:24px;z-index:4}.lightbox .close-x{position:fixed;color:#333}.camera-flash{position:fixed;inset:0;z-index:3500;pointer-events:none;background:#fff;opacity:0}.camera-flash.fire{animation:flashBang .32s ease-out}@keyframes flashBang{0%{opacity:.78}100%{opacity:0}}.toast{position:fixed;z-index:5000;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translate(-50%,15px);background:rgba(29,33,27,.88);color:#fff;padding:10px 14px;border-radius:999px;font-size:11px;opacity:0;visibility:hidden;transition:.25s;white-space:nowrap}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* global click celebration */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}.tap-react,.tap-word{position:relative;-webkit-tap-highlight-color:transparent}.tap-react.press-pop{transform:scale(.96)!important;filter:brightness(1.05)}.tap-word{display:inline-block;cursor:pointer;transition:.28s}.tap-word.word-pop{transform:translateY(-4px) rotate(-1.2deg) scale(1.04);text-shadow:0 10px 24px rgba(82,101,77,.2)}.tap-ripple{position:fixed;z-index:3000;pointer-events:none;width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%;transform:translate(-50%,-50%) scale(.3);animation:tapRing .72s ease-out forwards}@keyframes tapRing{to{opacity:0;transform:translate(-50%,-50%) scale(4.3)}}.tap-spark{position:fixed;z-index:3001;pointer-events:none;width:5px;height:5px;border-radius:50%;background:currentColor;transform:translate(-50%,-50%);animation:tapSpark .72s ease-out forwards}@keyframes tapSpark{to{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.2)}}.heart-pop{position:fixed;z-index:3200;pointer-events:none;font-size:20px;animation:fly 1.25s ease-out forwards}@keyframes fly{0%{transform:translate(-50%,-50%) scale(.7);opacity:0}12%{opacity:1}100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.35) rotate(var(--r));opacity:0}}.firework-dot{position:fixed;z-index:3210;pointer-events:none;width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;transform:translate(-50%,-50%);animation:firework .86s cubic-bezier(.1,.7,.2,1) forwards}@keyframes firework{to{opacity:0;transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) scale(.15)}}.confetti{position:fixed;z-index:3190;pointer-events:none;width:7px;height:12px;border-radius:2px;animation:confettiFall 1.5s ease-out forwards}@keyframes confettiFall{to{opacity:0;transform:translate(var(--cx),130px) rotate(var(--cr))}}.reveal{opacity:0;transform:translateY(26px) scale(.988);filter:blur(5px);transition:opacity .75s,transform .75s cubic-bezier(.16,.8,.2,1),filter .75s}.reveal.visible{opacity:1;transform:none;filter:none}.frame-kick{animation:frameKick .42s ease}@keyframes frameKick{45%{transform:scale(1.03) rotate(.8deg)}100%{transform:scale(1)}}

@media (min-width:760px){body{background:#d8ded4}.page{max-width:520px;margin:0 auto;box-shadow:0 0 60px rgba(0,0,0,.12)}.film-track{padding-left:65px;padding-right:65px}.film-frame{flex-basis:390px}.music-fab.tap-react{right:calc(50% - 244px)}}
@media (max-width:390px){.save-grid{grid-template-columns:1fr}.place-ticket{grid-column:1}.polaroid-deck{height:470px}.deck-card{width:78vw}.sunset-copy h2{font-size:28px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.tap-ripple,.tap-spark,.firework-dot,.confetti{display:none!important}.sunset-bg,.sunset-copy,.sun-glow{transform:none!important}.reveal{filter:none!important}}

/* Firework sparks cascade from the top without blocking gestures. */
.falling-firework{position:fixed;top:-24px;z-index:3210;pointer-events:none;width:4px;height:14px;border-radius:999px;background:linear-gradient(transparent,currentColor);box-shadow:0 0 8px currentColor;opacity:0;animation:fallingFirework 1.65s var(--delay) cubic-bezier(.25,.3,.55,1) forwards}.falling-firework::after{content:'';position:absolute;bottom:0;left:-1px;width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}@keyframes fallingFirework{12%{opacity:.9}75%{opacity:.75}100%{transform:translate3d(var(--drift),var(--fall),0);opacity:0}}
@media(prefers-reduced-motion:reduce){.falling-firework{display:none!important}}

.confetti-rain{animation:confettiRain 2.8s ease-in forwards}@keyframes confettiRain{0%{opacity:0}8%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(var(--cx),var(--fall)) rotate(var(--cr))}}

/* Mobile composition: keep the opening copy in the space above the couple. */
.hero{min-height:100svh}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:clamp(62px,11svh,100px) 20px 28px}
.hero-copy .script{font-size:clamp(35px,10vw,52px);white-space:nowrap;line-height:1.15;margin:0 0 14px}
.hero-copy h2{font-size:clamp(19px,5.6vw,25px);letter-spacing:.08em;gap:8px;margin-bottom:10px;flex-wrap:nowrap}
.hero-line{font-size:12px;max-width:320px;margin:0;line-height:1.8;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.hero-shade{background:linear-gradient(180deg,rgba(20,23,18,.55),rgba(20,23,18,.2) 30%,transparent 48%,transparent 76%,rgba(20,23,18,.45))}
.hero-copy .scroll-tip{margin-top:auto;padding-top:14px;font-size:10px}
.sunset-gallery{grid-template-columns:minmax(0,1fr);gap:14px;padding:18px 18px 0}
.sunset-card{width:100%}
.sunset-card:not(.wide) img{aspect-ratio:4/5;object-position:center}
.sunset-section{padding-bottom:36px}
.fireworks-btn{display:inline-flex;align-items:center;margin-top:12px;padding:12px 16px;min-height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.55);background:rgba(25,31,23,.45);color:#fff;font-size:12px;letter-spacing:.06em;backdrop-filter:blur(7px);cursor:pointer}
.fireworks-btn:focus-visible{outline:2px solid #ffe6aa;outline-offset:4px}

.celebration-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:3600;pointer-events:none}
@media(max-height:600px){.hero-copy{padding-top:46px}.hero-copy .script{font-size:34px}.hero-line{font-size:11px}}

/* Global reading progress: the original cutout rides toward the wedding. */
.ride-progress{position:fixed;z-index:80;left:50%;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:min(280px,calc(100vw - 48px));height:80px;transform:translate(-50%,12px);opacity:0;visibility:hidden;pointer-events:none;border-radius:16px;background:linear-gradient(180deg,rgba(255,250,242,.06),rgba(255,250,242,.92) 65%);transition:opacity .25s,transform .25s,visibility .25s}
.ride-progress.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
.ride-progress-road{position:absolute;left:36px;right:36px;top:59px;height:3px;border-radius:999px;background:rgba(81,97,73,.25);overflow:hidden}
.ride-progress-road span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#b77479,#d4b26d);transform:scaleX(0);transform-origin:right center}
.ride-progress-scooter{position:absolute;top:0;left:0;width:72px;height:67px;overflow:hidden;filter:drop-shadow(0 2px 2px rgba(29,35,25,.2));will-change:transform;z-index:2}
/* Crop only the transparent padding; the supplied image pixels stay intact. */
.ride-progress-scooter img{position:absolute;width:132.625%;max-width:none;height:auto;left:-17.507%;top:-76.828%;user-select:none;-webkit-user-drag:none}
.ride-progress-labels{position:absolute;left:8px;right:8px;bottom:3px;display:flex;justify-content:space-between;align-items:center;color:#516149;font:10px/1.3 "Microsoft YaHei",sans-serif;letter-spacing:.04em}
.ride-progress-labels b{font:10px/1.3 Arial,sans-serif;color:#9b6e68}
.ride-progress-trail{position:absolute;inset:-8px -8px 0;overflow:hidden;z-index:1}
.ride-ribbon{position:absolute;width:4px;height:10px;border-radius:1px;pointer-events:none;animation:rideRibbon .85s ease-out forwards}
@keyframes rideRibbon{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate(var(--trail-x),var(--trail-y)) rotate(var(--trail-r))}}
.ride-progress-scooter.is-moving{animation:rideBob .3s ease-in-out infinite}
@keyframes rideBob{50%{margin-top:-1px}}
@media(prefers-reduced-motion:reduce){.ride-ribbon{display:none!important}.ride-progress-scooter.is-moving{animation:none!important}}
/* Leave space between the first-screen swipe hint and the fixed progress ride. */
.hero-copy .scroll-tip{margin-bottom:64px}

/* Titles lift letter by letter; body copy stays legible during its reveal. */
.motion-title{position:relative}
.motion-char{display:inline-block;vertical-align:baseline}
.motion-title:not(.motion-in) .motion-char{opacity:0;transform:translateY(15px) rotate(4deg)}
.motion-title.motion-in .motion-char{animation:letterArrive .72s var(--char-delay) cubic-bezier(.18,.8,.25,1) both}
@keyframes letterArrive{0%{opacity:0;transform:translateY(15px) rotate(4deg) scale(.92)}65%{opacity:1;transform:translateY(-3px) rotate(-1deg) scale(1.03)}100%{opacity:1;transform:none}}
.motion-title::after{content:'';position:absolute;left:0;bottom:-9px;width:min(100%,92px);height:2px;border-radius:999px;background:linear-gradient(90deg,#d4b26d,#b77479,transparent);transform:scaleX(0);transform-origin:left;pointer-events:none}
.motion-title.motion-in::after{animation:titleStroke .8s .65s ease-out both}
@keyframes titleStroke{to{transform:scaleX(1)}}
.intro .motion-title::after,.ending .motion-title::after,.play-section .motion-title::after,.scratch-section .motion-title::after,.hero-copy .motion-title::after{left:50%;transform-origin:center;translate:-50% 0}
.motion-copy:not(.motion-in){opacity:.15;transform:translateY(12px)}
.motion-copy.motion-in{animation:copyArrive .85s .18s cubic-bezier(.2,.75,.2,1) both}
@keyframes copyArrive{from{opacity:.15;transform:translateY(12px)}to{opacity:1;transform:none}}
.motion-item{opacity:0;transition:opacity .65s var(--item-delay)}
.motion-item.motion-item-in{opacity:1}
.name-arrival{animation:nameArrival .8s var(--name-delay) cubic-bezier(.2,.8,.2,1) both}
@keyframes nameArrival{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
/* A brief gold glow makes a tapped phrase feel special without changing its layout. */
.motion-text.word-pop{filter:drop-shadow(0 0 7px rgba(212,178,109,.45))}
@media(prefers-reduced-motion:reduce){.motion-char,.motion-copy,.motion-item,.name-arrival{opacity:1!important;transform:none!important;translate:none!important;animation:none!important}.motion-title::after{display:none}}

/* Looping title meteors pause when their heading leaves the viewport. */
.motion-title::after{display:none}
.title-meteor-track{position:absolute;left:0;bottom:-12px;width:140px;max-width:100%;height:12px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .4s}
.motion-in .title-meteor-track{opacity:1}
.title-meteor{position:absolute;left:0;top:5px;width:65px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,#d4b26d 70%,#fff1c1);animation:titleMeteor 2.6s .3s linear infinite;animation-play-state:paused}
.title-meteor::after{content:'';position:absolute;right:0;top:-1px;width:4px;height:4px;border-radius:50%;background:#fff4d9;box-shadow:0 0 5px #d4b26d}
.meteor-visible .title-meteor{animation-play-state:running}
@keyframes titleMeteor{0%{opacity:0;transform:translateX(-70px)}12%{opacity:1}78%{opacity:1}100%{opacity:0;transform:translateX(148px)}}
.intro .title-meteor-track,.ending .title-meteor-track,.play-section .title-meteor-track,.scratch-section .title-meteor-track,.hero-copy .title-meteor-track{left:50%;transform:translateX(-50%)}
.egg-card img{aspect-ratio:auto;max-height:55svh;object-fit:contain}
.egg-card{max-height:92svh;overflow:auto}
.text-surprise{position:fixed;z-index:3700;pointer-events:none}
.wedding-xi{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;color:#a63839;background:rgba(255,247,226,.93);border:1px solid rgba(212,178,109,.8);font:700 66px/1 "SimSun","Songti SC",serif;box-shadow:0 0 24px rgba(212,178,109,.3);animation:xiBounce 1.65s ease-out forwards}
@keyframes xiBounce{0%{opacity:0;transform:scale(.25) translateY(35px)}18%{opacity:1;transform:scale(1.15) translateY(-24px)}32%{transform:scale(.94) translateY(0)}49%{transform:scale(1.05) translateY(-16px)}64%{transform:scale(1) translateY(0)}82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6) translateY(-40px)}}
.click-meteor{height:3px;width:95px;border-radius:999px;background:linear-gradient(90deg,transparent,#f1c885 68%,#fff6db);box-shadow:0 0 7px rgba(212,178,109,.65);animation:clickMeteor 1.05s var(--meteor-delay) ease-out both}
.click-meteor::after{content:'';position:absolute;right:0;top:-2px;width:7px;height:7px;border-radius:50%;background:#fff5cf;box-shadow:0 0 12px #e7b975}
@keyframes clickMeteor{0%{opacity:0;transform:translate(-95px,-65px) rotate(30deg)}12%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--meteor-x),var(--meteor-y)) rotate(30deg)}}
.drawn-heart{overflow:visible;animation:heartDepart 2.2s ease-out forwards}
.drawn-heart path{fill:none;stroke:#d8838a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:heartTrace 1.2s cubic-bezier(.35,.2,.4,1) forwards;filter:drop-shadow(0 0 4px rgba(255,208,175,.7))}
@keyframes heartTrace{to{stroke-dashoffset:0}}
@keyframes heartDepart{0%{opacity:0;transform:scale(.8)}12%{opacity:1}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08) translateY(-12px)}}
@media(prefers-reduced-motion:reduce){.title-meteor-track,.text-surprise{display:none!important}}
.scratch-heart-hint{margin:12px 0 0;color:#f4dada;font-size:10px;line-height:1.8;text-align:center}

/* Pulse the heart itself so button feedback and long-press rings stay stable. */
.heart-glyph{display:inline-block;line-height:1;transform-origin:center;pointer-events:none;animation:heartBreath 1.5s ease-in-out infinite}
.name-heart .heart-glyph{font-size:22px}
.name-heart.pressing .heart-glyph{animation-play-state:paused}
.deck-card.landscape img{object-fit:contain;background:#fff7ea}
@keyframes heartBreath{0%,100%{transform:scale(.86)}50%{transform:scale(1.3)}}
@media(prefers-reduced-motion:reduce){.heart-glyph{animation:none;transform:none}}

/* The secret heart grows, bursts, then reveals a playful reward card. */
.egg-burst{position:fixed;inset:0;z-index:4100;pointer-events:none}
.egg-burst-heart{position:absolute;left:50%;top:50%;width:min(66vw,300px);height:auto;overflow:visible;fill:#e52e46;filter:drop-shadow(0 12px 28px rgba(229,46,70,.35));animation:eggHeartBurst 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes eggHeartBurst{0%{opacity:0;transform:translate(calc(-50% + var(--origin-x)),calc(-50% + var(--origin-y))) scale(.08)}12%{opacity:1}38%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}50%{opacity:1;transform:translate(-50%,-50%) scale(1)}68%{opacity:.75;transform:translate(-50%,-50%) scale(1.7)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}
.egg-burst-ring{position:absolute;left:50%;top:50%;width:min(50vw,220px);aspect-ratio:1;border:3px solid #f15a70;border-radius:50%;animation:eggBurstRing .65s .48s ease-out both}
@keyframes eggBurstRing{from{opacity:.8;transform:translate(-50%,-50%) scale(.35)}to{opacity:0;transform:translate(-50%,-50%) scale(2.7)}}
.egg-burst-particle{position:absolute;left:50%;top:50%;font:26px/1 Arial,sans-serif;animation:eggHeartParticle .7s .48s cubic-bezier(.1,.65,.3,1) both}
@keyframes eggHeartParticle{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}12%{opacity:1}65%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y))) rotate(var(--burst-rotate)) scale(1.1)}}
.egg-card{padding:28px 22px 24px;background:linear-gradient(155deg,#fffaf2,#fff0f1);border:1px solid #f3bfc5;font-family:"YouYuan","幼圆","Microsoft YaHei","PingFang SC",sans-serif;box-shadow:0 26px 80px rgba(92,26,39,.3)}
.egg-card h2{margin:0 24px 12px;font-size:32px;font-weight:800;line-height:1.3;letter-spacing:.04em;color:#d92f40;transform:rotate(-3deg)}
.egg-title-emoji{display:inline-block;margin-left:5px;font-size:.9em;vertical-align:middle;transform:rotate(8deg)}
.egg-card .egg-reward{margin:0;padding:12px 8px;border-radius:16px;background:rgba(248,211,219,.45);font-size:16px;font-weight:700;line-height:1.8;color:#9c3544}
.egg-reward span{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:12px;font-weight:400;color:#78545b}
.egg-overlay.show .egg-card{animation:eggCardPop .55s cubic-bezier(.2,.8,.25,1) both}
@keyframes eggCardPop{0%{opacity:0;transform:translateY(28px) rotate(-5deg) scale(.78)}65%{opacity:1;transform:translateY(-5px) rotate(1deg) scale(1.04)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.egg-burst{display:none}.egg-overlay.show .egg-card{animation:none}}