:root{--cream:#f7f3ec;--paper:#fffdfa;--ink:#685e56;--deep:#473e38;--gold:#c6a86c;--line:rgba(107,91,76,.18);--serif:"Noto Serif CJK SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;--script:"STKaiti","KaiTi","FangSong",serif;--sans:"PingFang SC","Microsoft YaHei",Arial,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;background:#29231f;font-family:var(--sans);color:var(--deep)}button{font:inherit}.invitation{height:100dvh;max-width:600px;overflow:hidden;position:relative;margin:auto;background:var(--cream);isolation:isolate}.page{position:absolute;inset:0;overflow:hidden;opacity:0;transform:scale(1.07);pointer-events:none;transition:opacity .75s ease,transform 1.3s cubic-bezier(.2,.65,.22,1);background:var(--cream)}.page.is-active{opacity:1;transform:none;pointer-events:auto;z-index:2}.page::after{content:"";position:absolute;inset:12px;border:1px solid var(--line);pointer-events:none;z-index:10}.photo{background:#e8ded2 center/cover no-repeat;filter:saturate(.82) contrast(.95);overflow:hidden}.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,252,242,.22),transparent 55%,rgba(190,157,110,.1))}.micro{margin:0;color:#a89170;letter-spacing:.26em;font-size:9px;font-weight:600}.page-no{position:absolute;z-index:8;top:28px;right:30px;margin:0;font:10px Georgia,serif;letter-spacing:.16em;color:#af9b83}.cover{background:#e9e2d7}.hero-photo{position:absolute;inset:0;filter:brightness(1.04) saturate(.65);transform:scale(1.06);transition:transform 7s ease}.cover.is-active .hero-photo{transform:scale(1)}.hero-photo::after{background:linear-gradient(180deg,rgba(255,252,244,.2),rgba(255,249,240,.05) 45%,rgba(72,59,48,.34))}.curtain{position:absolute;z-index:3;top:-5%;bottom:-5%;width:29%;background:repeating-linear-gradient(96deg,rgba(255,255,255,.55) 0 2%,rgba(181,168,150,.2) 3% 6%,rgba(255,255,255,.48) 9% 12%);filter:blur(.3px);box-shadow:0 0 30px rgba(83,70,55,.18)}.curtain-left{left:-15%;transform:skewY(-5deg)}.curtain-right{right:-15%;transform:skewY(5deg)}.soft-glow{position:absolute;z-index:4;width:110%;height:42%;bottom:-12%;left:-5%;background:radial-gradient(ellipse,rgba(255,246,218,.8),rgba(255,246,218,0) 67%)}.cover-title{position:absolute;z-index:5;top:19%;width:100%;text-align:center;color:#fffdf7;text-shadow:0 2px 16px rgba(73,57,42,.2)}.cover-title h1{margin:14px 0 13px;font:400 clamp(39px,12vw,65px)/1.1 var(--serif);letter-spacing:.1em}.cover-title h1 em{font:italic .53em Georgia,serif;color:#e8cb7f;padding:0 .06em}.cover-date{font:11px Georgia,serif;letter-spacing:.4em}.cover-tag{position:absolute;z-index:5;bottom:24%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;color:#fffaf0;font:10px Georgia,serif;letter-spacing:.2em}.cover-tag b{font-size:16px;color:#e4c16d}.open-button{position:absolute;z-index:6;bottom:max(38px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:180px;padding:11px 5px;border:1px solid rgba(255,255,255,.7);border-radius:20px;background:rgba(255,255,255,.15);backdrop-filter:blur(4px);color:#fff;cursor:pointer}.open-button i{display:block;font:14px/1.4 var(--script);letter-spacing:.15em}.open-button span{font-size:8px;letter-spacing:.18em;opacity:.75}.gold-dust{position:absolute;z-index:5;width:8px;height:8px;border-radius:50%;background:#f7dc98;box-shadow:0 0 20px 7px rgba(245,209,116,.5);animation:drift 4s ease-in-out infinite}.dust-one{top:32%;right:20%}.dust-two{top:66%;left:18%;animation-delay:-2s}.editorial-page{background:linear-gradient(135deg,#f5f1e9,#ebe0d1)}.side-word{position:absolute;z-index:4;right:18px;top:19%;writing-mode:vertical-rl;margin:0;font:10px Georgia,serif;letter-spacing:.2em;color:#b4a28d}.polaroid{position:absolute;z-index:2;background-color:#fff;padding:7px 7px 28px;box-shadow:0 13px 24px rgba(85,67,49,.2);background-origin:content-box;background-clip:content-box}.polaroid span{position:absolute;bottom:8px;left:0;width:100%;text-align:center;font:8px Georgia,serif;letter-spacing:.18em;color:#8d806e}.vertical-photo{top:14%;left:9%;width:53%;aspect-ratio:.77;transform:rotate(-5deg)}.square-photo{top:42%;right:10%;width:42%;aspect-ratio:.9;transform:rotate(6deg)}.paper-shadow{position:absolute;top:12%;left:11%;width:53%;height:48%;background:#d6c4ad;transform:rotate(6deg);opacity:.6}.tape{position:absolute;z-index:3;width:70px;height:18px;background:rgba(228,209,172,.65);transform:rotate(40deg);top:40%;right:38%}.story-copy{position:absolute;z-index:4;left:9%;bottom:13%;animation:none}.story-copy h2,.portrait-copy h2,.promise-panel h2,.details-paper h2{margin:12px 0;font:400 clamp(28px,8vw,40px)/1.45 var(--serif);letter-spacing:.04em}.story-copy>p:last-child{margin:15px 0 0;font:16px/1.9 var(--script);letter-spacing:.07em;color:#756a60}.flower-sticker{position:absolute;z-index:7;width:45px;height:45px;filter:drop-shadow(2px 5px 4px rgba(91,69,49,.16))}.flower-sticker i{position:absolute;left:14px;top:0;width:17px;height:30px;border-radius:100% 0 100% 0;background:linear-gradient(130deg,#fff7d5,#d8a771);transform-origin:8px 23px}.flower-sticker i:nth-child(2){transform:rotate(90deg)}.flower-sticker i:nth-child(3){transform:rotate(180deg)}.flower-sticker i:nth-child(4){transform:rotate(270deg)}.flower-sticker b{position:absolute;left:17px;top:18px;width:11px;height:11px;border-radius:50%;background:#a86e43}.flower-one{right:14%;bottom:22%;transform:rotate(20deg)}.portrait-page{background:#f2eee8}.portrait{position:absolute;inset:0;filter:saturate(.67) brightness(1.09);transform:scale(1.12);transition:transform 7s ease}.portrait-page.is-active .portrait{transform:scale(1)}.portrait-wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,244,238,.86),rgba(247,244,238,.08) 62%),linear-gradient(0deg,rgba(247,244,238,.95),transparent 48%)}.vertical-copy{position:absolute;z-index:3;right:27px;top:21%;writing-mode:vertical-rl;font:22px/1.6 var(--script);letter-spacing:.14em;color:#887563}.portrait-copy{position:absolute;z-index:3;left:9%;bottom:15%}.portrait-copy h2{font-size:27px}.portrait-copy span{font:italic 16px Georgia,serif;color:#c2a97d;letter-spacing:.08em}.pearls{position:absolute;z-index:3;bottom:12%;right:17%;display:flex;gap:5px;transform:rotate(-20deg)}.pearls i{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#d6c8b9 70%);box-shadow:0 1px 3px #a99}.scrapbook-page{background:linear-gradient(120deg,#fdfbf5,#ede3d6)}.center-micro{position:absolute;top:15%;left:0;width:100%;text-align:center}.scrapbook-page h2{position:absolute;top:18%;left:0;width:100%;margin:0;text-align:center;font:400 29px var(--serif);letter-spacing:.1em}.photo-card{position:absolute;z-index:2;padding:5px;background:#fff;box-shadow:0 12px 22px rgba(83,63,44,.17);background-origin:content-box;background-clip:content-box}.photo-card small{position:absolute;bottom:-18px;left:0;font:12px Georgia,serif;color:#ab947b}.card-a{left:10%;top:31%;width:48%;aspect-ratio:.86;transform:rotate(-5deg)}.card-b{right:10%;top:42%;width:42%;aspect-ratio:1.18;transform:rotate(5deg)}.card-c{left:21%;bottom:9%;width:42%;aspect-ratio:1.23;transform:rotate(1deg)}.date-sticker{position:absolute;z-index:5;right:9%;top:29%;display:flex;flex-direction:column;justify-content:center;width:53px;height:53px;border-radius:50%;background:#d6ab76;color:#fffaf0;text-align:center;font:22px Georgia,serif;box-shadow:0 4px 11px rgba(126,87,51,.27);transform:rotate(10deg)}.date-sticker span{font-size:8px;letter-spacing:.14em}.ribbon{position:absolute;z-index:5;left:7%;bottom:28%;padding:8px 15px;background:#f1d4b9;color:#806353;font:12px/1.1 var(--script);transform:rotate(-7deg);box-shadow:2px 3px 8px rgba(90,60,45,.14)}.ribbon b{font:italic 11px Georgia,serif}.promise-page{background:#e6daca}.promise-photo{position:absolute;top:10%;left:10%;width:80%;height:58%;box-shadow:0 18px 30px rgba(77,58,38,.2);filter:saturate(.72)}.promise-panel{position:absolute;z-index:3;left:7%;bottom:10%;width:73%;padding:25px 22px 20px;background:rgba(255,252,246,.9);box-shadow:0 12px 35px rgba(77,56,39,.14)}.promise-panel h2{font-size:29px}.promise-panel>p:last-of-type{font:16px/1.8 var(--script);color:#7d6c5e}.signature{margin-top:13px;color:#b89b70;font:18px var(--script);letter-spacing:.15em}.sparkle{position:absolute;z-index:5;color:#efd98d;text-shadow:0 1px 12px #fff;font-size:28px;animation:twinkle 2.5s ease-in-out infinite}.sparkle-one{right:13%;top:22%}.sparkle-two{left:11%;top:30%;animation-delay:-1s}.details-page{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 10% 20%,#fffdf7,#eee0d0 70%)}.details-paper{position:relative;z-index:3;width:80%;padding:38px 27px;text-align:center;background:rgba(255,253,248,.76);box-shadow:0 17px 45px rgba(83,63,44,.16);border:1px solid rgba(174,145,112,.35)}.monogram{margin:13px auto 2px;width:39px;height:39px;border:1px solid #c7a976;border-radius:50%;font:italic 26px/39px Georgia,serif;color:#b3915f}.details-paper h2{font-size:35px}.rule{width:35px;height:1px;margin:20px auto;background:#cdb283}.detail{padding:14px 0;border-top:1px solid var(--line)}.detail span{display:block;margin-bottom:7px;color:#af9674;font-size:9px;letter-spacing:.25em}.detail strong{font:400 17px/1.6 var(--serif);letter-spacing:.04em}.map-link{display:inline-block;margin:24px 0 0;padding:10px 16px;border:1px solid #cbb185;border-radius:20px;color:#7a6858;text-decoration:none;font:14px var(--script);letter-spacing:.08em}.map-link i{color:#bb9363;font-style:normal;font-size:17px}.closing{margin:22px 0 0;color:#aa9479;font:13px/1.8 var(--script);letter-spacing:.09em}.arch{position:absolute;border:1px solid rgba(193,162,118,.25);border-bottom:0;border-radius:100% 100% 0 0}.arch-one{width:210px;height:330px;right:-84px;bottom:-20px}.arch-two{width:150px;height:220px;left:-78px;top:4%}.flower-two{left:14%;bottom:12%;transform:scale(1.45) rotate(-20deg)}.progress{position:absolute;z-index:20;display:flex;gap:4px;left:27px;right:66px;top:max(18px,env(safe-area-inset-top))}.progress i{height:2px;flex:1;background:rgba(89,71,56,.22)}.progress i.is-current{background:#b89b70}.music-button{position:absolute;z-index:21;right:17px;top:max(12px,env(safe-area-inset-top));width:35px;height:35px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.45);color:#8e765e;cursor:pointer}.music-button.is-playing span{display:inline-block;animation:spin 3s linear infinite}.swipe-tip{position:absolute;z-index:19;left:0;bottom:18px;width:100%;margin:0;text-align:center;color:#9e8973;font:10px var(--script);letter-spacing:.19em;opacity:0;transition:opacity .8s}.has-started .swipe-tip{opacity:1}.page.is-active .story-copy,.page.is-active .portrait-copy,.page.is-active .promise-panel,.page.is-active .details-paper{animation:rise .9s .18s both}.page.is-active .polaroid,.page.is-active .photo-card{animation:photoIn 1s .13s both}.page.is-active .square-photo,.page.is-active .card-b{animation-delay:.35s}.page.is-active .card-c{animation-delay:.55s}@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}@keyframes photoIn{from{opacity:0;transform:translateY(35px) rotate(var(--r,0deg))}to{opacity:1}}@keyframes drift{50%{transform:translate(10px,-16px);opacity:.4}}@keyframes twinkle{50%{opacity:.25;transform:scale(.65)}}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:700px){.page::after{inset:18px}.page-no{top:35px;right:39px}.progress{left:40px;right:81px}.music-button{right:26px}.vertical-photo{width:290px}.details-paper{max-width:400px}}
/* final refinements */
.cover-title{top:6%}.cover-title h1{font-size:clamp(24px,6vw,34px)}.cover-date{font-size:20px;letter-spacing:.27em;text-shadow:0 1px 8px rgba(73,57,42,.35)}
.scrapbook-page .photo-card{display:block;min-height:120px;background-color:#fff;background-size:cover;background-position:center}
.scrapbook-page .card-a{left:4%;top:29%;width:37%;aspect-ratio:5334/7997;transform:rotate(-4deg)}
.scrapbook-page .card-b{right:4%;top:33%;width:37%;aspect-ratio:5464/8192;transform:rotate(4deg)}
.scrapbook-page .card-c{left:35%;bottom:4%;width:30%;aspect-ratio:5334/7997;background-size:cover;transform:rotate(1deg)}