@charset "UTF-8";
:root{--cream:#fff8f1;--ink:#58453f;--muted:#9b8176;--rose:#b95164;--pink:#f2d0cc;--line:#e7d8cc;--sage:#899979;--serif:"Songti SC","Noto Serif CJK SC","SimSun",serif;--sans:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
*{box-sizing:border-box}html{background:var(--cream);scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--sage);outline-offset:5px}button:disabled{cursor:wait}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.paper-grain{position:fixed;inset:0;z-index:-1;opacity:.26;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.18' filter='url(%23n)'/%3E%3C/svg%3E")}.masthead{width:min(1180px,calc(100% - 100px));margin:0 auto;padding:34px 0 26px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.wordmark{display:flex;align-items:center;gap:13px;font-size:15px;letter-spacing:2px}.wordmark svg{width:40px;fill:none;stroke:var(--rose);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.music-button{border:1px solid var(--line);background:transparent;border-radius:30px;padding:10px 15px;display:flex;gap:9px;align-items:center;color:var(--muted);font-size:10px;letter-spacing:1px}.music-bars{display:flex;gap:3px;align-items:center;height:13px}.music-bars i{height:5px;width:2px;background:var(--rose);border-radius:2px}.music-bars i:nth-child(2){height:12px}.music-bars i:nth-child(3){height:8px}.music-button[aria-pressed=true] .music-bars i{animation:music .75s ease-in-out infinite alternate}.music-button[aria-pressed=true] .music-bars i:nth-child(2){animation-delay:.25s}.music-button[aria-pressed=true] .music-bars i:nth-child(3){animation-delay:.5s}main{flex:1;display:flex;flex-direction:column}.scene{animation:arrive .7s ease both}.welcome{width:min(1100px,calc(100% - 120px));margin:auto;min-height:calc(100svh - 180px);padding:65px 0 75px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:75px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--rose);font-weight:600;display:flex;align-items:center;gap:10px}.eyebrow>span{height:6px;width:6px;border-radius:50%;background:var(--rose)}h1{font-family:var(--serif);font-weight:700;font-size:clamp(40px,4.2vw,60px);letter-spacing:2px;line-height:1.4;margin:23px 0 0}.name-line{color:var(--rose);display:block;position:relative;width:fit-content}.tiny-spark{position:absolute;right:-40px;top:0;font-family:serif;font-size:34px;font-weight:400;color:var(--sage);transform:rotate(12deg)}.exclamation{display:inline-block;margin-left:-7px}.handwritten{font-family:"Snell Roundhand","Brush Script MT","Segoe Print",cursive;font-style:italic;font-size:25px;color:var(--rose);margin:13px 0 27px;transform:rotate(-3deg);transform-origin:left center}.intro-description{font-size:14px;line-height:2.1;color:#90776c;margin:0 0 32px}.primary-button{padding:17px 24px;min-height:55px;background:var(--rose);border:1px solid var(--rose);border-radius:9px;color:#fffaf3;box-shadow:0 4px 0 #8e3e4f;font-size:14px;font-weight:500;letter-spacing:1px;display:inline-flex;gap:28px;justify-content:space-between;align-items:center;transition:transform .2s,background .2s,box-shadow .2s}.primary-button:hover{background:#a74559;transform:translateY(-2px);box-shadow:0 6px 0 #8e3e4f}.primary-button:active{transform:translateY(3px);box-shadow:0 1px 0 #8e3e4f}.primary-button>span{font-size:21px;line-height:1}.microcopy{font-size:10px;letter-spacing:1px;color:#a68a7d;margin-top:20px;line-height:1.7}.illustration-area{position:relative;padding:20px 0 40px}.gift-card{background:#fffdf7;border:1px solid #ead8c5;padding:25px 25px 21px;transform:rotate(4deg);box-shadow:8px 13px 0 #eeded055,0 14px 35px #7651430c;position:relative;max-width:455px;margin:auto}.gift-card:before{content:"";position:absolute;inset:9px;border:1px dashed #e5c9b7;pointer-events:none}.card-topline{position:relative;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.2px;color:#aa8373}.gift-art-wrap{margin:5px -20px -5px}.gift-art-wrap svg{width:100%;display:block;overflow:visible}.gift-caption{text-align:center;color:#9b7067;font-size:12px;letter-spacing:1px;margin:0 -5px 22px}.gift-bottom{border-top:1px solid #ecdfcf;display:flex;justify-content:space-between;align-items:center;padding-top:16px;color:#aa8c7e;font-size:7px;letter-spacing:.8px}.barcode{width:57px;height:22px;background:repeating-linear-gradient(90deg,#b79788 0 1px,transparent 1px 3px,#b79788 3px 5px,transparent 5px 7px,#b79788 7px 8px,transparent 8px 11px)}.scalloped-sticker{position:absolute;z-index:2;top:-15px;right:-24px;width:111px;height:111px;background:#e9e9d9;clip-path:polygon(100% 50%,94% 59%,97% 69%,88% 75%,86% 85%,75% 88%,69% 97%,59% 94%,50% 100%,41% 94%,31% 97%,25% 88%,14% 85%,12% 75%,3% 69%,6% 59%,0 50%,6% 41%,3% 31%,12% 25%,14% 15%,25% 12%,31% 3%,41% 6%,50% 0,59% 6%,69% 3%,75% 12%,86% 15%,88% 25%,97% 31%,94% 41%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transform:rotate(15deg);color:#768164}.scalloped-sticker>span:first-child{font-size:11px;letter-spacing:2px}.scalloped-sticker strong{font-family:var(--serif);font-size:19px;font-weight:500}.sticker-star{font-size:18px;line-height:1}.floating-doodle{position:absolute;color:#bba283;font-size:39px;font-family:serif;font-weight:300;animation:float 4s ease-in-out infinite}.doodle-a{left:-48px;top:20px}.doodle-b{right:-40px;bottom:65px;color:#a3ad8b;animation-delay:1s}.hand-note{position:absolute;right:45px;bottom:-14px;display:flex;gap:15px;align-items:center;color:#b0796b;font-family:var(--serif);font-size:16px;transform:rotate(-7deg)}.hand-note svg{width:64px;transform:rotate(-75deg) scaleY(-1);fill:none;stroke:#b0796b;stroke-width:1.5;stroke-linecap:round}.gift-lid{transform-origin:210px 155px;animation:lid-wiggle 4s ease-in-out infinite}.gift-card.opening .gift-lid{animation:open-lid .8s ease forwards}.gift-card.opening .gift-body{animation:gift-shake .5s ease}.centered{justify-content:center}h2{font-family:var(--serif);font-weight:600;font-size:35px;line-height:1.6;letter-spacing:1px;margin:17px 0 13px}h2 span{color:var(--rose)}.wish-scene{text-align:center;width:min(850px,calc(100% - 40px));margin:0 auto;padding:45px 0 48px}.scene-description{font-size:13px;line-height:2;color:#967c70;margin:0}.cake-stage{width:min(460px,100%);position:relative;margin:8px auto 0}.cake-stage svg{width:100%;display:block}.cake-doodle{position:absolute;font-size:40px;color:#c49675;font-family:serif;animation:float 4s infinite}.cake-doodle.left{top:38%;left:3%}.cake-doodle.right{top:15%;right:10%;font-size:27px;color:var(--sage)}.flames{transform-origin:230px 94px;animation:flicker 1.2s ease-in-out infinite}.smoke{opacity:0}.blown .flames{animation:none;opacity:0;transition:opacity .25s}.blown .smoke{animation:smoke 1.8s ease-out forwards}.wish-received{color:var(--sage);font-size:11px;letter-spacing:3px;margin:0 0 15px}.celebration-copy{font-family:var(--serif);font-size:19px;line-height:1.8;margin:0 0 25px}.celebration-copy strong{font-weight:500;color:var(--rose)}#birthday-message{animation:arrive .8s ease}.letter-scene{width:min(650px,calc(100% - 40px));text-align:center;margin:0 auto;padding:48px 0 35px}.letter-paper{margin:40px 0 30px;background:#fffcf6;border:1px solid #e9dccd;padding:45px 52px 35px;text-align:left;position:relative;box-shadow:5px 7px 0 #ecdccd55;color:#80665e;font-size:14px;line-height:2.2}.letter-paper p{margin:0 0 17px}.tape{position:absolute;top:-13px;left:calc(50% - 50px);width:100px;height:28px;background:repeating-linear-gradient(90deg,#a8b18d55 0 10px,#bfc5ad55 10px 20px);transform:rotate(-4deg);clip-path:polygon(0 0,100% 0,98% 18%,100% 30%,98% 47%,100% 60%,98% 76%,100% 100%,0 100%,2% 81%,0 65%,2% 50%,0 33%,2% 17%)}.letter-flower{position:absolute;right:36px;top:28px;font-size:45px;color:#dba0a3;transform:rotate(17deg)}.salutation{font-family:var(--serif);font-size:22px;color:var(--rose);font-weight:600}.letter-paper .letter-highlight{font-family:var(--serif);font-size:20px;color:var(--rose);line-height:1.9;margin:25px 0}.letter-signature{text-align:right;font-size:12px;color:#a08172}.letter-signature span{font-size:10px;font-style:italic}.keepsake>span{font-size:28px;color:var(--sage)}.keepsake p{font-size:12px;color:var(--muted);margin:5px 0 16px}.outline-button{display:inline-flex;align-items:center;justify-content:center;gap:17px;min-height:45px;border:1px solid #cba99a;border-radius:7px;padding:11px 20px;color:var(--rose);background:transparent;font-size:13px;transition:background .2s}.outline-button:hover{background:#f8e6dc}.text-button{display:block;margin:20px auto 0;border:0;background:transparent;color:#a28a7c;font-size:11px;padding:12px}footer{width:min(1180px,calc(100% - 100px));margin:0 auto;padding:22px 0 25px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:1px;color:#aa9182}.footer-star{font-size:20px;color:var(--sage)}.footer-right{margin-left:auto;font-size:8px;letter-spacing:1.5px}#confetti{position:fixed;inset:0;width:100%;height:100%;z-index:10;pointer-events:none}dialog{background:var(--cream);border:1px solid var(--line);border-radius:15px;padding:25px;width:min(430px,calc(100% - 30px));max-height:90svh;overflow:auto;color:var(--ink);text-align:center;box-shadow:0 20px 100px #513b3b30}dialog::backdrop{background:#4a323b70;backdrop-filter:blur(5px)}dialog h2{font-family:var(--sans);font-size:17px;margin-top:15px}dialog p{font-size:12px;color:var(--muted)}dialog img{display:block;width:100%;height:auto;margin:20px 0;border-radius:5px}.close-button{position:absolute;right:8px;top:8px;width:35px;height:35px;border:0;background:transparent;font-size:27px;color:#9c7a70}#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:#654750;color:white;font-size:12px;padding:13px 20px;border-radius:30px;z-index:30;opacity:0;pointer-events:none;transition:.3s;max-width:90%;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes music{to{height:3px}}@keyframes arrive{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}@keyframes float{50%{transform:translateY(-9px) rotate(10deg)}}@keyframes lid-wiggle{0%,75%,100%{transform:rotate(0)}80%,90%{transform:rotate(-3deg)}85%,95%{transform:rotate(3deg)}}@keyframes open-lid{to{transform:translate(24px,-100px) rotate(17deg);opacity:0}}@keyframes gift-shake{50%{transform:translateY(-10px)}}@keyframes flicker{50%{transform:scale(.96,1.06);opacity:.85}}@keyframes smoke{15%{opacity:.65}to{opacity:0;transform:translateY(-35px)}}
@media(min-width:1500px){.welcome{gap:120px}.gift-card{max-width:475px}}
@media(max-width:800px){.masthead{width:calc(100% - 44px);padding:23px 0 19px}.wordmark{font-size:12px;letter-spacing:1px;gap:9px}.wordmark svg{width:30px}.music-button{padding:8px 10px;font-size:9px;gap:7px}.welcome{width:calc(100% - 50px);min-height:auto;grid-template-columns:1fr;gap:20px;padding:35px 0 35px;text-align:center}.intro-copy{display:contents}.eyebrow{justify-content:center;font-size:8px;letter-spacing:2px;grid-row:1}h1{font-size:40px;line-height:1.35;grid-row:2;margin:0;letter-spacing:2px}.name-line{display:inline-block;margin-right:3px}.tiny-spark{display:none}.handwritten{grid-row:3;margin:-12px 0 0;font-size:23px;transform-origin:center}.intro-description{grid-row:5;font-size:12px;line-height:1.9;margin:8px 0 0}.illustration-area{grid-row:4;width:min(300px,90%);padding:0 0 12px;margin:12px auto 0}.gift-card{padding:20px 22px 17px;transform:rotate(3deg)}.gift-art-wrap{margin:0 -15px -5px}.gift-caption{font-size:10px;margin-bottom:15px;letter-spacing:.5px}.card-topline{font-size:7px}.gift-bottom{font-size:5px;padding-top:12px}.barcode{height:15px;width:40px}.scalloped-sticker{width:83px;height:83px;right:-22px;top:-23px}.scalloped-sticker strong{font-size:15px}.scalloped-sticker>span:first-child{font-size:9px}.sticker-star{font-size:13px}.doodle-a{left:-29px;top:10px;font-size:26px}.doodle-b{right:-25px;bottom:40px;font-size:30px}.hand-note{display:none}.welcome>.intro-copy .primary-button{grid-row:6;justify-self:center;width:min(320px,100%);font-size:13px;justify-content:center;gap:30px;margin-top:0}.welcome .microcopy{grid-row:7;margin:-5px 0 0;font-size:9px}.primary-button{padding:15px 20px;min-height:51px;font-size:13px}.wish-scene{padding-top:35px}.wish-scene h2{font-size:25px;margin-top:15px}.scene-description{font-size:12px}.cake-stage{max-width:390px;margin:20px auto 10px}.wish-scene .primary-button{max-width:100%}.celebration-copy{font-size:17px}.letter-scene{padding-top:35px}.letter-scene h2{font-size:28px}.letter-paper{padding:35px 25px 25px;margin-top:32px;font-size:12px;line-height:2.2}.letter-paper .letter-highlight{font-size:17px}.salutation{font-size:20px}.letter-flower{right:22px;top:23px;font-size:34px}.letter-signature{font-size:11px}.letter-signature span{font-size:8px}.desktop-break{display:none}footer{width:calc(100% - 44px);padding:17px 0;font-size:8px;justify-content:center}.footer-right{display:none}.footer-star{font-size:16px}}
@media(max-width:800px){.name-line{display:block;margin:0 auto 1px}.illustration-area{width:min(275px,86%)}.welcome h1{font-size:37px}.welcome{gap:17px;padding-top:29px}.handwritten{margin-top:-7px}}
@media(max-width:380px){.welcome h1{font-size:34px}.welcome{padding-top:28px;gap:18px}.illustration-area{max-width:255px}.wordmark{font-size:11px}.letter-paper{padding-left:20px;padding-right:20px}.letter-paper .letter-highlight{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}