:root{--paper:#f7f3e9;--ink:#3c433b;--muted:#7b8075;--pink:#eaa7a8;--dark-pink:#955053;--green:#d6e499;--line:#dddccf;--serif:Georgia,"Noto Serif SC","Songti SC",STSong,serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--dark-pink);outline-offset:6px}button{color:inherit}a{color:inherit;text-decoration:none}.grain{position:fixed;inset:0;pointer-events:none;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");z-index:10}.topbar,footer{max-width:1360px;margin:auto;padding:26px 6%;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:11px;letter-spacing:2px;display:flex;align-items:center;gap:12px}.brand-star{font-size:32px;line-height:1}.sound{border:1px solid var(--line);border-radius:30px;padding:8px 15px;background:transparent;font-size:12px}.sound[aria-pressed=true]{background:var(--green)}main{max-width:1220px;margin:auto;padding:0 6%}.scene{min-height:650px;padding:62px 0 52px;animation:arrive .6s ease}.scene[hidden]{display:none!important}#scene-0{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:24px;min-height:calc(100svh - 185px)}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;color:var(--muted);margin:0 0 24px}h1{font-family:var(--serif);font-size:clamp(38px,5.2vw,67px);font-weight:400;line-height:1.38;letter-spacing:-1.5px;max-width:520px;margin:0 0 24px}h2{font-family:var(--serif);font-size:clamp(30px,4vw,46px);font-weight:400;line-height:1.45;margin:0 0 14px}h2 em{font-style:normal;color:var(--dark-pink)}.intro{white-space:pre-line;font-size:15px;line-height:2;color:var(--muted);margin:0 0 35px}.primary{display:inline-flex;gap:30px;align-items:center;justify-content:center;border:0;background:var(--ink);color:var(--paper);border-radius:4px;padding:15px 24px;font-size:14px;transition:transform .2s,background .2s}.primary:hover{background:#535d4e;transform:translateY(-2px)}.small-note{font-size:11px;color:var(--muted);margin-top:17px}.envelope-stage{height:450px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}.envelope-stage:before{content:"";width:340px;height:340px;border-radius:50%;position:absolute;background:#ecebd9;z-index:-1}.envelope{width:330px;height:225px;background:none;border:none;position:relative;transform:rotate(-8deg);filter:drop-shadow(4px 18px 15px #3c433b18);transition:transform .4s}.envelope:hover{transform:rotate(-3deg) translateY(-7px)}.envelope-back{position:absolute;inset:0;background:#d99597;border-radius:6px}.letter-peek{position:absolute;left:28px;right:28px;top:-63px;height:250px;background:#fffaf1;border:1px solid #e4dfd3;padding:28px 25px;text-align:left;font:12px/1.3 Georgia,serif;letter-spacing:3px;transform:rotate(3deg);transition:top .5s}.letter-peek em{font:italic 34px/1.2 Georgia,serif;letter-spacing:0}.letter-flower{position:absolute;right:22px;top:46px;font-size:70px;color:#b3bd7b}.envelope-front{position:absolute;inset:0;background:linear-gradient(145deg,transparent 49.6%,#efaeb0 50%) left/50% 100% no-repeat,linear-gradient(215deg,transparent 49.6%,#e8a0a3 50%) right/50% 100% no-repeat;border-bottom:95px solid #e9a5a8;border-radius:6px}.envelope-label{position:absolute;left:26px;bottom:25px;text-align:left;font-size:12px;letter-spacing:1px}.envelope-label small{font-size:8px;letter-spacing:2px}.seal{position:absolute;left:calc(50% - 25px);top:97px;background:#a9545c;color:#f9dfd9;border:3px solid #c77278;border-radius:50%;height:50px;width:50px;font-size:27px;display:grid;place-items:center}.handwritten{position:absolute;font:italic 18px/1.3 var(--serif);color:#7d8767}.top-note{right:5px;top:14px;transform:rotate(9deg)}.bottom-note{bottom:38px;font-size:13px;transform:rotate(-6deg)}.orbit{position:absolute;font-size:55px;color:#abbb74}.orbit-one{top:22px;left:30px}.orbit-two{bottom:32px;right:5px;font-size:80px;color:#d69296}.opening .letter-peek{top:-120px}.opening{transform:rotate(0deg) scale(1.04)}footer{border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.progress{display:flex;gap:13px;align-items:center}.progress div{display:flex;gap:5px}.progress i{width:6px;height:6px;border-radius:50%;background:#d7d9ce}.progress i.done{background:var(--dark-pink)}.footer-heart{font-style:italic}.section-heading{text-align:center;margin-bottom:42px}.section-heading .eyebrow{margin-bottom:17px}.section-heading>p:last-of-type{font-size:13px;color:var(--muted)}.memories{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:0 8px}.memory{padding:12px 12px 21px;border:none;background:#fffdf7;box-shadow:0 8px 24px #3c433b0b;transform:rotate(-3deg);transition:transform .2s;text-align:left}.memory:nth-child(2){transform:rotate(3deg);margin-top:20px}.memory:nth-child(3){transform:rotate(-2deg)}.memory:hover{transform:rotate(0deg) translateY(-6px)}.memory img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#eeebdf}.memory h3{font:18px var(--serif);margin:18px 9px 8px}.memory p{font-size:11px;margin:0 9px;color:var(--muted)}.memory .memory-number{font-size:9px;letter-spacing:2px;display:block;margin:13px 9px;color:var(--dark-pink)}.scene-actions{display:flex;justify-content:space-between;align-items:center;margin-top:58px;gap:15px}.text-button{background:none;border:none;padding:10px 0;font-size:12px;color:var(--muted)}.cake-stage{border:none;background:none;display:block;width:300px;height:280px;margin:0 auto;position:relative;transition:transform .3s}.cake-stage:hover{transform:translateY(-4px)}.cake-body{position:absolute;left:30px;right:30px;top:124px;height:120px;background:#e7a4a3;border-radius:0 0 50% 50%/0 0 20% 20%;box-shadow:inset -18px 0 #dc9492}.cake-top{position:absolute;left:30px;right:30px;top:90px;height:70px;border-radius:50%;background:#f9ddce;z-index:3;border:5px solid #f7d3c4}.icing{position:absolute;top:12px;left:0;right:0;height:32px;background:#f7d3c4;border-radius:0 0 20px 20px;z-index:2}.cake-message{position:absolute;top:68px;left:0;right:0;font:italic 20px Georgia;color:#82484a}.cake-plate{position:absolute;left:6px;right:6px;top:230px;height:34px;background:#dbe5ae;border-radius:50%;z-index:-1}.candles{position:absolute;top:36px;left:92px;display:flex;gap:25px;z-index:4}.candles i{width:12px;height:78px;background:repeating-linear-gradient(135deg,#fff7df 0 6px,#a4b684 6px 12px);border-radius:3px;display:block;position:relative}.candles i:nth-child(2){margin-top:-10px}.candles b{position:absolute;width:16px;height:25px;top:-29px;left:-2px;background:#f2bc59;border-radius:65% 35% 50% 50%;box-shadow:0 0 17px #f2bc5980;animation:flicker 1s infinite alternate;transform-origin:bottom}.blown .candles b{display:none}.cake-spark{position:absolute;font-size:38px;color:#b4bd86}.s1{left:12px;top:27px}.s2{right:7px;top:65px}.cake-caption{text-align:center;color:var(--muted);font-size:13px;min-height:24px}.letter-layout{display:grid;grid-template-columns:.8fr 1fr;gap:65px;align-items:start}.letter-layout .section-heading{text-align:left}.giant-flower{display:block;font-size:130px;color:#cbd59e;line-height:1;margin-top:35px;transform:rotate(15deg)}.final-letter{background:#fffdf7;padding:36px 40px;box-shadow:0 8px 30px #3c433b08;transform:rotate(1deg);border-top:3px solid var(--pink)}.letter-dots{letter-spacing:9px;color:var(--pink);font-size:14px;margin-bottom:24px}.letter-text{white-space:pre-wrap;font:17px/2.1 var(--serif);overflow-wrap:anywhere}.signature{text-align:right;font:italic 14px var(--serif);color:var(--dark-pink);margin-top:35px}.coupon{background:var(--green);max-width:590px;margin:0 auto;padding:35px 44px;position:relative;overflow:hidden}.coupon:before,.coupon:after{content:"";position:absolute;width:30px;height:30px;background:var(--paper);border-radius:50%;top:calc(50% - 15px)}.coupon:before{left:-15px}.coupon:after{right:-15px}.coupon h3{font:27px/1.5 var(--serif);margin:12px 0;position:relative;overflow-wrap:anywhere}.coupon>p{font-size:12px;position:relative}.coupon .eyebrow{font-size:9px}.coupon-star{position:absolute;font-size:160px;right:-16px;top:1px;line-height:1;color:#bccd84;opacity:.4}.coupon-divider{border-top:1px dashed #9daf75;margin:26px 0 18px}.coupon-foot{font-size:10px}.finish-actions{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:32px}#scene-4>.small-note,#share-status{text-align:center}#share-status{font-size:12px;color:var(--dark-pink);min-height:24px}dialog{max-width:620px;width:calc(100% - 36px);padding:28px;border:0;background:var(--paper);box-shadow:0 15px 60px #0003}dialog::backdrop{background:#343c32aa;backdrop-filter:blur(5px)}dialog img{display:block;max-height:60svh;width:100%;object-fit:contain;margin-top:15px}dialog h3{font:23px var(--serif)}dialog p{font-size:13px;color:var(--muted)}.dialog-close{position:absolute;right:10px;top:4px;border:none;background:none;font-size:28px}.confetti{position:fixed;top:-15px;width:9px;height:14px;z-index:20;pointer-events:none;animation:fall 2.7s ease-in forwards}.noscript{text-align:center}.preview-banner{text-align:center;background:#efe1d4;font-size:12px;padding:8px}.preview-banner a{text-decoration:underline}@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes flicker{to{transform:rotate(9deg) scale(.9)}}@keyframes fall{to{transform:translate(var(--drift),110svh) rotate(700deg);opacity:0}}@media(max-width:760px){.topbar{padding:19px 6%}.brand{letter-spacing:1.3px;font-size:9px}.brand-star{font-size:27px}.sound{font-size:11px;padding:6px 11px}#scene-0{grid-template-columns:1fr;gap:12px;padding-top:30px;min-height:auto}.hero-copy{text-align:center}.hero-copy h1{max-width:410px;margin:0 auto 20px;font-size:40px}.hero-copy .eyebrow{font-size:9px}.intro{font-size:13px;margin-bottom:24px}.envelope-stage{height:355px;margin-top:18px}.envelope-stage:before{width:280px;height:280px}.envelope{width:280px;height:190px}.letter-peek{top:-50px;height:220px;padding:23px 20px}.letter-peek em{font-size:29px}.letter-flower{font-size:57px;right:15px}.seal{top:78px;width:45px;height:45px;left:calc(50% - 22px)}.envelope-label{bottom:17px;left:21px}.top-note{top:0;right:0;font-size:14px}.bottom-note{bottom:12px;font-size:12px}.orbit-one{left:5px;top:20px;font-size:39px}.orbit-two{bottom:5px;font-size:60px}.scene{padding:38px 0;min-height:calc(100svh - 165px)}footer{padding:18px 6%;flex-wrap:wrap;gap:12px}.footer-heart{display:none}.progress{margin-left:auto;font-size:9px}.memories{grid-template-columns:1fr;gap:28px;max-width:340px;margin:auto}.memory{transform:rotate(-2deg)}.memory:nth-child(2){margin-top:0;transform:rotate(2deg)}.memory img{aspect-ratio:4/3}.section-heading{margin-bottom:28px}.section-heading>p:last-of-type{font-size:12px}.scene-actions{margin-top:35px}.scene-actions .primary{padding:12px 15px;font-size:12px}.letter-layout{grid-template-columns:1fr;gap:8px}.letter-layout .section-heading{text-align:center}.giant-flower{display:none}.final-letter{padding:25px}.letter-text{font-size:16px}.coupon{padding:28px}.coupon h3{font-size:25px}.finish-actions{flex-direction:column;gap:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.confetti{display:none}}
