@font-face{font-family:CampusHand;src:url('../assets/fonts/campus-hand.ttf') format('truetype');font-display:swap}
:root{color-scheme:light;--paper:#f6f0e5;--ink:#494738;--muted:#8b8577;--orange:#b7593d;--gold:#edc78a;--green:#687659;--hand:CampusHand,'KaiTi','STKaiti',serif;--body:'Microsoft YaHei','PingFang SC',sans-serif;--vh:1vh}
*{box-sizing:border-box}html{min-width:280px;background:var(--paper)}body{margin:0;color:var(--ink);font-family:var(--body);overflow-x:hidden;min-height:100vh;transition:background 1s,color .8s;background:var(--paper)}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px dashed var(--orange);outline-offset:4px}h1,h2,p,figure{margin:0}h1:focus,h2:focus{outline:none}[hidden]{display:none!important}button:disabled{cursor:default}::selection{background:#e5bc8a70}.paper-grain{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23998877' filter='url(%23n)' opacity='.35' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}#starfield,#effects{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#starfield{z-index:0}#effects{z-index:2}.site-header{max-width:1320px;margin:auto;padding:calc(19px + env(safe-area-inset-top,0px)) 22px 14px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5;gap:12px}.brand{display:flex;align-items:center;gap:9px;font:19px var(--hand)}.drawn-flower{font-size:32px;color:var(--orange)}.brand-note{display:block;font:9px var(--body);color:var(--muted);letter-spacing:2px;margin-top:5px}.music-toggle{background:#fff8;border:1px solid #9b8c6b42;border-radius:24px;min-height:44px;padding:0 12px;display:flex;align-items:center;gap:8px;font-size:10px;white-space:nowrap}.equalizer{display:flex;align-items:center;gap:3px;height:15px}.equalizer i{width:2px;height:6px;background:var(--orange)}.equalizer i:nth-child(2){height:13px}.equalizer i:nth-child(3){height:9px}.equalizer i:nth-child(4){height:11px}
main{position:relative;z-index:3}.scene{width:100%;min-height:calc(var(--vh)*100 - 162px);min-height:calc(100svh - 162px);padding:27px 24px 36px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted);line-height:1.8}.scene-intro{max-width:1180px;margin:auto;gap:22px;text-align:left;padding-top:23px}.intro-copy{width:100%}.display-title{font:normal 43px/1.33 var(--hand);letter-spacing:1px;margin:18px 0 16px;position:relative}.display-title em,.scene-title em{color:var(--orange);font-style:normal}.display-title em{position:relative}.display-title em:after{content:'';position:absolute;height:7px;border-bottom:2px solid #bd5c4380;border-radius:50%;bottom:0;left:-2px;right:-6px;transform:rotate(-3deg)}.pencil-heart{display:inline-block;margin-left:13px;font-size:38px;transform:rotate(15deg);color:var(--orange)}.intro-description{font:16px/1.85 var(--hand);color:#7c7767;margin-bottom:23px}.primary-button{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:52px;max-width:100%;padding:0 21px;border:1px solid var(--green);border-radius:5px 7px 6px 4px;background:var(--green);color:#fffbed;font:17px var(--hand);box-shadow:3px 4px 0 #424d3014;transition:transform .2s,background .2s}.primary-button span:last-child{font-size:21px}.primary-button:active{transform:translateY(2px);background:#576549}.sound-hint{font:12px var(--hand);color:var(--muted);margin-top:13px}.campus-postcard{position:relative;background:#fffdf5;padding:11px 11px 15px;width:100%;max-width:510px;transform:rotate(2deg);box-shadow:0 9px 24px #76614c1c,1px 1px 2px #76614c16;margin:10px 0 6px}.photo-window{overflow:hidden;position:relative;aspect-ratio:1.42;background:#f0c7a2}.photo-window img{display:block;width:100%;height:100%;object-fit:cover}.photo-date{position:absolute;left:14px;bottom:13px;color:#fff9e8;font:11px var(--hand);text-shadow:0 1px 3px #473d2c}.campus-postcard figcaption{font:16px var(--hand);padding:13px 4px 2px;display:flex;justify-content:space-between}.campus-postcard figcaption span{color:var(--orange);font-size:22px}.tape{position:absolute;left:calc(50% - 37px);top:-12px;width:74px;height:25px;background:#c5ad7080;transform:rotate(-4deg);clip-path:polygon(2% 0,98% 4%,96% 25%,100% 42%,96% 70%,99% 100%,0 97%,3% 72%,0 48%);z-index:2}.tape-top{width:100px;left:calc(50% - 50px);background:#b3bd8c94}.postcard-note{position:absolute;right:-5px;top:19px;background:#f7db91;padding:7px 9px;transform:rotate(7deg);font:12px var(--hand);box-shadow:1px 2px 4px #50432b12}.intro-bottom{display:flex;align-items:center;justify-content:space-between;width:100%;font:14px/1.6 var(--hand);color:#8a8272;margin-top:0;gap:10px}.intro-bottom svg{width:70px;fill:none;stroke:#9b9c7e;stroke-width:2}.ticket{border:1px dashed #aaa282;border-radius:4px;padding:8px 12px;background:#ede5d0;transform:rotate(-4deg);font-size:12px}.ticket b{font-weight:normal;color:#6f765d}
.journey-footer{position:relative;z-index:3;max-width:1320px;margin:auto;min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 22px calc(16px + env(safe-area-inset-bottom,0px));color:var(--muted)}.chapter-label{white-space:nowrap;font:12px var(--hand)}.chapter-label>span:first-child{font-size:18px;color:var(--orange)}.chapter-divider{padding:0 7px}.chapter-name{display:none}.chapter-nav{display:flex}.chapter-nav button{min-height:44px;min-width:44px;padding:10px;background:none;border:0;display:grid;place-items:center}.chapter-nav button span{height:5px;width:5px;border-radius:50%;background:#b3ad9d}.chapter-nav button[aria-current] span{width:20px;border-radius:4px;background:var(--orange)}.chapter-nav button:disabled span{background:#d4cebf}.footer-note{display:none;font:13px var(--hand)}
.scene-title{font:28px/1.6 var(--hand);margin:27px 0 20px}.scene-description{font:17px/1.8 var(--hand);color:#7a7667}.scene .primary-button{margin-top:22px}.scene-intro .primary-button{margin-top:0}.muted{font:15px/1.8 var(--hand);color:var(--muted)}.micro-label{font:14px var(--hand);margin-top:24px;color:var(--muted)}.birthday-note{width:min(100%,460px);background:#fffaf0;border:1px solid #e7ddc8;padding:27px 16px 23px;position:relative;transform:rotate(-2deg);margin-top:38px;box-shadow:5px 8px 0 #e8dfce60}.birthday-note>p{font:16px var(--hand);color:#8c8370}.birthday-note h2{font:34px/1.5 var(--hand);margin:15px 0 18px}.birthday-note h2 em{font-style:normal;font-size:43px;color:var(--orange)}.note-corner{position:absolute;right:18px;top:17px;color:#b66450;font-size:30px;transform:rotate(12deg)}.cake{width:170px;margin:0 auto 18px;position:relative;padding-top:42px}.candles{position:absolute;top:4px;left:45px;right:45px;height:42px;display:flex;justify-content:space-between}.candles i{display:block;position:relative;width:7px;height:31px;background:repeating-linear-gradient(35deg,#a2b295 0 5px,#e5e8c7 5px 9px);margin-top:10px;border-radius:2px}.candles i:before{content:'';position:absolute;width:10px;height:17px;left:-1px;top:-17px;border-radius:65% 30% 55% 45%;background:#edac5d;box-shadow:0 0 13px #eda05b77;transform:rotate(8deg)}.cake-cream{height:20px;border-radius:50% 50% 35% 35%;background:#f0d0a0;border:1px solid #d4ad75;position:relative;z-index:1}.cake-body{height:70px;background:repeating-linear-gradient(0deg,#e4b99a 0 25px,#fff2d8 25px 34px);margin-top:-9px;border-radius:0 0 20px 20px;border:1px solid #ceaa87;display:flex;justify-content:space-evenly;align-items:center;color:#b8634e;font-size:24px}.cake-plate{height:8px;margin:0 -14px;border-radius:50%;background:#bac4ac}.birthday-note .birthday-note-bottom{font-size:14px}.wish-stickers{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:26px 0 18px;font:14px var(--hand)}.wish-stickers span{padding:8px 10px;background:#eadbbd;transform:rotate(-3deg)}.wish-stickers span:nth-child(2){background:#dbe2cf;transform:rotate(3deg)}.wish-stickers span:nth-child(3){background:#f0d6cb;transform:rotate(-2deg)}
.envelope-area{padding:50px 0 36px;width:100%}.envelope{position:relative;display:block;width:min(290px,100%);height:185px;border:0;background:none;margin:0 auto 30px;perspective:800px}.envelope-back{position:absolute;inset:0;background:#c7ac81;border-radius:4px;border:1px solid #ac916b}.envelope-paper{position:absolute;left:18px;right:18px;top:16px;height:140px;background:#fff8e9;font:25px/1.7 var(--hand);color:#7d6449;padding-top:12px;transition:transform .6s .2s}.envelope-paper span{font-size:18px}.envelope-front{position:absolute;inset:0;background:linear-gradient(135deg,#d9c29e,#d4b68c);clip-path:polygon(0 0,50% 53%,100% 0,100% 100%,0 100%);border:1px solid #b29873;border-radius:4px}.envelope-flap{position:absolute;inset:0;background:#dfcaa6;clip-path:polygon(0 0,100% 0,50% 55%);transform-origin:top;transition:transform .65s;backface-visibility:hidden}.envelope-seal{position:absolute;top:78px;left:calc(50% - 20px);width:40px;height:40px;border-radius:50%;background:#b86750;color:#f7dec7;display:grid;place-items:center;font:30px var(--hand);box-shadow:1px 3px 4px #7a4d3422;transition:opacity .2s}.envelope-name{position:absolute;bottom:17px;right:20px;font:13px var(--hand);color:#816748}.envelope.is-open .envelope-flap{transform:rotateX(180deg)}.envelope.is-open .envelope-paper{transform:translateY(-60px)}.envelope.is-open .envelope-seal{opacity:0}.letter-card{position:relative;width:min(100%,600px);margin:20px 0 8px;padding:30px 24px;text-align:left;background:repeating-linear-gradient(transparent 0 34px,#c8beaa45 34px 35px) #fffcf2;border:1px solid #ddd3bc;box-shadow:5px 7px 0 #e6dcc74d}.letter-top{display:flex;justify-content:space-between;font:19px var(--hand);color:#937c5c;margin-bottom:24px}.letter-top span:last-child{font-size:26px;color:var(--orange)}.letter-card p{font:18px/1.95 var(--hand);margin-bottom:18px;color:#5f5a4b}.letter-card p:first-child{color:#9a553f;font-size:22px}.letter-signature{font:16px var(--hand);text-align:right;margin-top:27px;color:#867762}.letter-signature span{margin-left:10px;color:var(--orange);font-size:22px}.text-button{min-height:44px;min-width:44px;padding:11px 10px;background:none;border:0;font:16px var(--hand);color:#817158}.text-button:active{color:var(--orange)}#letter-next{margin-top:16px}
.wish-star{width:255px;height:285px;max-width:100%;border:0;background:none;margin-top:25px;position:relative}.wish-paper{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;inset:17px 10px;background:#ead696;transform:rotate(-5deg);box-shadow:5px 8px 13px #75614024;transition:background .8s,transform .8s}.wish-pin{position:absolute;top:8px;left:50%;width:12px;height:12px;border-radius:50%;background:#be735c;box-shadow:1px 3px 3px #6c452444}.star-core{font:70px var(--hand);line-height:1.15;color:#a66e49;transition:transform .8s,color .8s}.wish-handwriting{font:25px/1.55 var(--hand);color:#795e3d;margin:4px 0 18px}.star-caption{font:12px var(--hand);color:#9b835b}.wish-star.is-lit .wish-paper{background:#f6d9a0;transform:rotate(2deg)}.wish-star.is-lit .star-core{color:#c56f5a;transform:scale(1.18)}.wish-message{font:16px/1.7 var(--hand);color:#897d64;margin:17px 0 0;min-height:28px}.wish-message.is-lit{color:#b25e46}
body[data-scene='4']{color:#f4e5cd;background:#171c24}.scene-finale{padding-top:20px;padding-bottom:20px;max-width:1100px;margin:auto}.firework-top{display:flex;justify-content:space-between;width:100%;align-items:center}.firework-top .eyebrow{color:#d5c3a9;font-family:var(--hand);font-size:14px;letter-spacing:0}#show-timer{font:16px var(--hand);color:#e6c99e;font-variant-numeric:tabular-nums}.finale-sky{width:100%;height:clamp(300px,53vh,590px);position:relative;isolation:isolate;margin-top:10px}#sky-touch{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;text-align:center;z-index:0}#sky-touch>span{position:absolute;left:0;right:0;top:10px;font:12px var(--hand);color:#9b968d}.sky-caption{position:absolute;bottom:28px;left:0;right:0;pointer-events:none;text-shadow:0 2px 8px #131820}#show-chapter{font:25px/1.55 var(--hand);color:#f8d9a6}#show-detail{font:13px/1.7 var(--hand);color:#c6bcae;display:block;margin-top:6px}.show-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#c8a37022;pointer-events:none}#show-progress-fill{display:block;width:0;height:100%;background:linear-gradient(90deg,#d99075,#edce8a)}.finale-copy{width:100%;padding-top:23px}.finale-copy h2{font:23px/1.6 var(--hand);font-weight:normal;color:#f1e3cf}.finale-copy h2 em{font-style:normal;color:#efc68b}.finale-copy>p{font:14px/1.8 var(--hand);color:#bcb3a5;margin-top:14px}.final-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin-top:13px}.final-actions .text-button{color:#c6b59a;font-size:13px}.finale-copy .final-dedication{font-size:12px;color:#928c80;margin-top:12px}body[data-scene='4'] .music-toggle{background:#272a2b;color:#e3d3ba;border-color:#81705866}body[data-scene='4'] .brand-note,body[data-scene='4'] .footer-note{color:#a69b89}body[data-scene='4'] .brand{color:#ead8bc}body[data-scene='4'] .chapter-nav button:disabled span{background:#635b51}body[data-scene='4'] .paper-grain{opacity:.06}
#transition{position:fixed;inset:0;background:#f4e8d7;z-index:8;pointer-events:none;opacity:0}.toast{position:fixed;z-index:10;bottom:calc(25px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%,12px);width:max-content;max-width:calc(100% - 36px);border:1px solid #d9cdb6;background:#fff9ebf5;color:#7c674f;padding:11px 16px;border-radius:8px;font:14px/1.6 var(--hand);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}.toast.is-visible{opacity:1;transform:translate(-50%,0)}.is-backgrounded *{animation-play-state:paused!important}