:root{--wine:#7f263c;--rose:#bd6a72;--gold:#e6bf76;--cream:#fff4df;--night:#160d20;--ink:#2a1520}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--night);color:var(--cream);font-family:"Noto Serif SC",serif}button{font:inherit}
.sky{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 65% 15%,#52233a 0,transparent 35%),linear-gradient(155deg,#1a0d25,#381425 60%,#120b1a);pointer-events:none}.glow{position:absolute;width:70vw;height:70vw;right:-30vw;top:-20vw;border-radius:50%;background:#dc9b67;filter:blur(90px);opacity:.14}.stars i{position:absolute;width:2px;height:2px;background:#ffe8ae;border-radius:50%;animation:twinkle 2.4s infinite alternate}
#book{height:100%;touch-action:none}.page{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 28px 76px;opacity:0;transform:translateY(8%) scale(.97);pointer-events:none;transition:opacity .65s ease,transform .85s cubic-bezier(.2,.8,.2,1);overflow:hidden}.page.active{opacity:1;transform:none;pointer-events:auto}.page.leaving{opacity:0;transform:translateY(-7%) scale(.98)}
.eyebrow{font-size:10px;letter-spacing:4px;color:var(--gold);margin:20px 0}.page h1,.page h2{font-family:"ZCOOL XiaoWei",serif;font-weight:400;text-align:center;margin:0;line-height:1.3}.page h1{font-size:48px;letter-spacing:5px}.page h2{font-size:34px;letter-spacing:3px}.page em{color:var(--gold);font-style:normal}.lead,.small-copy,.final-copy{text-align:center;line-height:2;color:#f5dfd2;font-size:14px}.gold-line{width:42px;height:1px;background:var(--gold);margin:22px auto}.open-btn,.wish-btn,.replay{border:1px solid #dcb36c;color:var(--cream);background:rgba(255,255,255,.04);border-radius:30px;padding:13px 24px;letter-spacing:2px;margin-top:26px;box-shadow:0 8px 30px #0003}.open-btn span{color:var(--gold);margin-left:8px}.hint{position:absolute;bottom:25px;font-size:10px;letter-spacing:2px;color:#d5a5a8;animation:float 1.8s infinite}.moon{width:138px;height:138px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fffbe9,#f3d796 62%,#d89c5f);box-shadow:0 0 45px #e5b56877,0 0 100px #d7775e33;position:relative}.moon:before,.moon:after{content:"";position:absolute;border-radius:50%;background:#d1a86a26}.moon:before{width:28px;height:18px;left:25px;top:35px}.moon:after{width:20px;height:30px;right:28px;bottom:30px}.rabbit{position:absolute;inset:auto 0 24px;text-align:center;color:#9e6261;font-size:25px}.orbit{position:absolute;top:10%;width:260px;height:180px;border:1px solid #e3bc7150;border-radius:50%;transform:rotate(-15deg)}.orbit span{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}.orbit span:first-child{left:10%;top:67%}.orbit span:last-child{right:7%;top:30%}
.chapter{position:absolute;top:34px;left:30px;color:var(--gold);font-size:12px;letter-spacing:2px}.chapter span{color:#eed8cf;margin-left:8px}.mini-moon{position:absolute;width:100px;height:100px;border-radius:50%;background:#ebc987;right:-35px;top:55px;filter:blur(.3px);box-shadow:0 0 40px #dfa46d66}.letter-card{max-width:360px;padding:38px 29px 32px;background:linear-gradient(145deg,rgba(255,244,223,.96),rgba(244,218,196,.94));color:var(--ink);border-radius:2px;box-shadow:0 25px 70px #0006;transform:rotate(-1deg);position:relative}.letter-card:before{content:"";position:absolute;inset:10px;border:1px solid #9a5a5345}.letter-card p{font-size:14px;line-height:2;margin:10px 0;position:relative}.letter-card .quote{position:absolute;font-size:70px;color:#a35d5e33;top:-12px;left:15px}.signature{text-align:right;color:#823a49;margin-top:20px!important}.nav{position:absolute;bottom:26px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;color:#d9b2ad;font-size:10px;letter-spacing:2px}.nav button{width:38px;height:38px;border-radius:50%;border:1px solid #cf9b8766;background:#ffffff0a;color:var(--gold)}
.page-letter:before{content:"";position:absolute;width:170px;height:220px;left:-45px;bottom:42px;background:url('assets/moon-boat.png') 48% 72%/cover;border-radius:85px 85px 8px 8px;opacity:.28;filter:saturate(.75);box-shadow:0 0 0 1px #d9b37433,0 18px 60px #0006}.page-letter:after{content:"桂";position:absolute;right:28px;bottom:92px;width:52px;height:52px;border:1px solid #d7ad6b66;border-radius:50%;display:grid;place-items:center;color:#d7ad6b66;font-size:23px}.page-letter .letter-card{z-index:2}.page-letter .mini-moon{z-index:1}
.page-memories h2{position:absolute;top:72px}.photo-stack{width:300px;height:330px;position:relative;margin-top:65px}.photo{position:absolute;margin:0;background:#fff2df;padding:9px 9px 32px;width:200px;box-shadow:0 18px 45px #0007;color:#542a31;transition:.4s}.photo .placeholder{height:205px;background:linear-gradient(145deg,#c8898a,#734056);display:grid;place-items:center;position:relative;overflow:hidden}.placeholder:before{content:"♡";font-size:65px;color:#ffe8c944}.placeholder span{position:absolute;bottom:15px;font-size:10px;letter-spacing:2px;color:#ffecdc}.photo figcaption{text-align:center;font-size:11px;padding-top:8px}.p1{left:0;top:28px;transform:rotate(-8deg)}.p2{right:0;top:0;transform:rotate(6deg)}.p3{left:45px;top:80px;transform:rotate(-1deg)}.page.active .p1{animation:dealLeft .8s .3s both}.page.active .p2{animation:dealRight .8s .5s both}.page.active .p3{animation:dealCenter .8s .7s both}.small-copy{font-size:12px;margin-top:8px;color:#dabdbc}
.lanterns{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-around}.lanterns i{display:block;width:35px;height:48px;background:linear-gradient(90deg,#6f1d2d,#d06864,#6f1d2d);border-radius:48%;box-shadow:0 0 28px #e07b5b99;animation:sway 3s ease-in-out infinite;transform-origin:top}.lanterns i:before{content:"";display:block;width:1px;height:44px;background:#d3aa71;margin:-44px auto 0}.lanterns i:nth-child(2){margin-top:20px;animation-delay:-1s}.thanks-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(340px,100%);margin:28px 0 10px}.thanks-grid article{height:120px;border:1px solid #d7ab7660;background:linear-gradient(145deg,#ffffff0c,#7a2e3b22);padding:22px 14px;text-align:center;border-radius:50% 50% 12px 12px}.thanks-grid b{display:block;color:var(--gold);font-size:20px;letter-spacing:4px;margin-bottom:10px}.thanks-grid span{font-size:11px;line-height:1.8;color:#ecd5cc}
.page-thanks:before{content:"";position:absolute;right:-65px;bottom:35px;width:190px;height:190px;border-radius:50%;background:url('assets/moon-osmanthus.png') 72% 20%/cover;opacity:.18;box-shadow:0 0 45px #d39b5844}.page-thanks>*{z-index:1}
.cake{position:relative;width:180px;height:180px;margin-bottom:18px}.plate{position:absolute;bottom:5px;left:10px;width:160px;height:16px;border-radius:50%;background:#e5b976}.cake-body{position:absolute;bottom:15px;left:30px;width:120px;height:70px;background:linear-gradient(90deg,#8f3045,#cf7475,#8f3045);border-radius:8px 8px 20px 20px}.cake-top{position:absolute;z-index:2;bottom:72px;left:30px;width:120px;height:32px;border-radius:50%;background:#ffe2bd;color:#a83f50;text-align:center;padding-top:5px}.candle{position:absolute;z-index:3;left:86px;bottom:99px;width:9px;height:38px;background:repeating-linear-gradient(45deg,#f3d395 0 5px,#a74455 5px 9px)}.flame{position:absolute;z-index:4;left:84px;bottom:140px;width:14px;height:22px;background:#ffd678;border-radius:90% 10% 70% 30%;transform:rotate(45deg);box-shadow:0 0 20px #ffbc55;animation:flame .8s infinite alternate}.page-wish>p{text-align:center;font-size:13px;line-height:2.1;color:#ecd5cc}.wishes{display:flex;align-items:center;gap:8px;margin:20px 0 5px;color:var(--gold);font-size:13px}.wishes i{opacity:.5}.wish-btn{margin-top:8px;padding:11px 22px;font-size:12px}.wish-btn.held{background:#e7bd76;color:#4b2030;box-shadow:0 0 50px #f4ce87}.wish-btn.held~* .flame{opacity:0}
.page-wish:before{content:"";position:absolute;left:-58px;top:65px;width:155px;height:210px;background:url('assets/moon-couple.png') 45% 70%/cover;border-radius:0 78px 78px 0;opacity:.2;filter:saturate(.7)}.page-wish:after{content:"✦";position:absolute;right:45px;top:125px;color:#e5bb72;font-size:18px;filter:drop-shadow(0 0 9px #e5bb72);animation:twinkle 2s infinite alternate}.page-wish>*{z-index:1}
.big-moon{position:absolute;top:-15vw;width:95vw;height:95vw;max-width:460px;max-height:460px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fff8db,#e3b66f 68%,#ad6a4e);box-shadow:0 0 90px #dca66866;opacity:.94}.mountains{position:absolute;bottom:-5px;width:100%;height:35%;background:linear-gradient(165deg,transparent 45%,#3f2334 46%);border-radius:0 0 50% 50%;overflow:hidden}.page-final h2{position:relative;margin-top:130px;font-size:43px}.final-copy{position:relative}.promise{display:flex;gap:16px;align-items:center;color:var(--gold);font-size:13px;letter-spacing:4px}.promise b{font-size:21px}.replay{margin-top:28px;font-size:11px}.date{position:absolute;bottom:16px;font-size:9px;letter-spacing:5px;color:#c69a91}
.sound{position:fixed;z-index:20;right:18px;top:18px;width:42px;height:42px;border-radius:50%;border:1px solid #e3ba7955;background:#2a1324aa;color:var(--gold);display:grid;place-items:center}.sound i{position:absolute;inset:4px;border:1px dashed #e0b873;border-radius:50%;animation:spin 8s linear infinite;animation-play-state:paused}.sound.playing i{animation-play-state:running}.dots{position:fixed;z-index:10;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px}.dots button{width:5px;height:5px;padding:0;border:0;border-radius:50%;background:#eedbb555}.dots button.active{background:var(--gold);box-shadow:0 0 8px var(--gold);transform:scale(1.5)}.petals i{position:fixed;top:-25px;z-index:30;color:#f4c0b0;opacity:.78;animation:fall linear forwards;pointer-events:none}.petals .heart{color:#ef3d61;text-shadow:0 0 10px #ff5a78,0 0 22px #e52d55}.petals .star{color:#ffd98a;text-shadow:0 0 8px #ffd36a}.petals .moon-spark{color:#fff6dc;text-shadow:0 0 10px #fff}
@keyframes twinkle{to{opacity:.2;transform:scale(.5)}}@keyframes float{50%{transform:translateY(-6px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes flame{to{transform:rotate(35deg) scale(.85)}}@keyframes sway{50%{transform:rotate(4deg)}}@keyframes fall{0%{transform:translate(0,-4vh) rotate(0) scale(.7);opacity:0}12%{opacity:1}55%{transform:translate(28px,52vh) rotate(230deg) scale(1.1)}to{transform:translate(-18px,110vh) rotate(520deg) scale(.75);opacity:0}}@keyframes dealLeft{from{transform:translate(70px,30px) rotate(0);opacity:0}to{transform:rotate(-8deg);opacity:1}}@keyframes dealRight{from{transform:translate(-60px,20px);opacity:0}to{transform:rotate(6deg);opacity:1}}@keyframes dealCenter{from{transform:translateY(50px);opacity:0}to{transform:rotate(-1deg);opacity:1}}
@media(max-height:700px){.page{padding-top:44px}.moon{width:110px;height:110px}.page h1{font-size:40px}.letter-card{padding:24px 25px}.letter-card p{line-height:1.7;margin:7px 0}.photo-stack{height:290px;transform:scale(.82);margin-top:45px;margin-bottom:-35px}.thanks-grid article{height:100px;padding-top:14px}.cake{transform:scale(.8);margin-bottom:-10px}.page-final h2{margin-top:110px}}
@media(min-width:700px){.page{max-width:480px;left:50%;transform:translate(-50%,8%) scale(.97);border-left:1px solid #ffffff0a;border-right:1px solid #ffffff0a}.page.active{transform:translate(-50%,0)}.page.leaving{transform:translate(-50%,-7%) scale(.98)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* 专属照片与纪念文案 */
.placeholder:before,.placeholder span{display:none}.placeholder img{display:block;width:100%;height:100%;object-fit:cover}.p1{left:-8px;top:28px}.p2{right:-6px;top:2px}.p3{left:45px;top:88px}.p4{right:-4px;top:140px;width:158px;transform:rotate(7deg)}.p4 .placeholder{height:148px}.p5{left:-4px;top:154px;width:145px;transform:rotate(-7deg)}.p5 .placeholder,.p6 .placeholder{height:135px}.p6{left:74px;top:174px;width:150px;transform:rotate(2deg)}.page.active .p4{animation:dealRight .8s .65s both}.page.active .p5{animation:dealLeft .8s .78s both}.page.active .p6{animation:dealCenter .8s .9s both}.page-memories .small-copy{position:relative;z-index:5;margin-top:12px}.final-photo{position:relative;width:94px;height:94px;border-radius:50%;padding:4px;background:#f0cd8b;margin:90px 0 10px;box-shadow:0 0 36px #e8be7777}.final-photo img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}.page-final h2{margin-top:0;font-size:40px}.page-final .replay{margin-top:20px}.page-final .date{letter-spacing:4px}
@media(max-height:700px){.letter-card{padding:20px 24px}.letter-card p{font-size:13px;line-height:1.6;margin:6px 0}.photo-stack{transform:scale(.78)}.final-photo{width:74px;height:74px;margin-top:58px}.page-final h2{margin-top:0}}

/* 照片大图浏览 */
.photo{cursor:zoom-in}.photo-stack{height:350px;margin-top:55px}.photo:after{content:"＋";position:absolute;right:13px;top:13px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#1c1020a8;color:#f1d18e;font-size:15px;box-shadow:0 2px 10px #0005}.page-memories .small-copy{z-index:auto;margin-top:10px}.zoom-hint{display:block;margin-top:8px;color:#d8ac73;font-size:10px;letter-spacing:2px}.lightbox{position:fixed;z-index:100;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,5,14,.94);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:.3s}.lightbox.open{opacity:1;visibility:visible}.lightbox figure{margin:0;width:min(88vw,760px);height:min(76vh,900px);display:flex;flex-direction:column;align-items:center;justify-content:center}.lightbox figure img{display:block;max-width:100%;max-height:calc(100% - 54px);object-fit:contain;border:5px solid #fff4df;box-shadow:0 20px 70px #000;border-radius:2px}.lightbox figcaption{height:42px;padding-top:14px;color:#f5e2d5;font-size:14px;letter-spacing:2px}.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;border:1px solid #d5ae7066;background:#241222b8;color:#f2cd86;border-radius:50%;display:grid;place-items:center}.lightbox-close{right:20px;top:max(20px,env(safe-area-inset-top));width:42px;height:42px;font-size:28px}.lightbox-prev,.lightbox-next{top:50%;width:44px;height:44px;font-size:32px;transform:translateY(-50%)}.lightbox-prev{left:14px}.lightbox-next{right:14px}.lightbox-count{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));font-size:11px;letter-spacing:3px;color:#caa77b}.lightbox button:active{background:#d5ae70;color:#2b1424}