@import"https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap";@import"https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&display=swap";.letter-page{position:relative;width:100%;display:flex;justify-content:center;padding:2rem 1rem;box-sizing:border-box}.letter-container{background-color:#fdf7e3;box-shadow:inset 0 0 50px #0000001a,0 10px 20px #00000026;border:1px solid #d8c3a5;border-radius:12px;filter:sepia(.3) contrast(1.05) brightness(1.02);background-image:radial-gradient(circle at 10% 20%,rgba(0,0,0,.03) 0%,transparent 20%),radial-gradient(circle at 80% 80%,rgba(0,0,0,.02) 0%,transparent 30%);width:min(80vw,600px);padding:2rem 1.5rem;margin:0 auto;animation:letterSlideIn .8s ease-out forwards}@keyframes letterSlideIn{0%{opacity:0;transform:translateY(-50px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.letter-title{font-family:Dancing Script,cursive;font-size:2.8rem;color:#d63384;text-align:center;margin-bottom:.5rem}.letter-subtitle{font-family:Dancing Script,cursive;font-size:2rem;color:#d63384;text-align:center;margin-bottom:1.25rem}.letter-container p{font-family:Fuzzy Bubbles,cursive;font-weight:700;font-size:1.1rem;line-height:1.6;color:#333;margin-bottom:1rem}.letter-signoff{font-family:Dancing Script,cursive;font-weight:700;margin-top:1.5rem}.letter-signature{font-family:Dancing Script,cursive;font-size:1.6rem;text-align:right;margin-top:.5rem;color:#6f2da8}@media (max-width: 600px){.letter-container{padding:1.5rem 1rem}.letter-title{font-size:2.2rem}.letter-subtitle{font-size:1.6rem}.letter-container p{font-size:1rem}}.envelope-container{position:relative;width:clamp(200px,50vw,350px);aspect-ratio:5/3;margin:2rem auto;cursor:pointer;perspective:800px;transform-style:preserve-3d}.envelope-body{position:absolute;top:0;left:0;width:100%;height:100%;background:#ffeed8;border-radius:12px;box-shadow:0 10px 20px #0006;z-index:1;overflow:hidden}.envelope-midline{position:absolute;top:50%;left:0;width:100%;height:1px;background-color:transparent;z-index:10}.envelope-letter{position:absolute;bottom:50%;left:5%;width:90%;height:70%;background:#fff;border-radius:8px 8px 0 0;box-shadow:0 0 5px #0000001a;transform:translateY(150%);opacity:0;transition:opacity .2s ease .8s;z-index:2}.envelope-container.opening .envelope-letter{transform:translateY(0);opacity:1}.envelope-flap{position:absolute;top:0;left:0;width:100%;height:50%;background:#e0c7a9;transform-origin:top center;transform:rotateX(0);transition:transform .8s ease;clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:visible;transform-style:preserve-3d;z-index:3}.envelope-container.opening .envelope-flap{transform:rotateX(-180deg)}.seal{position:absolute;top:45%;left:50%;width:28px;height:28px;transform:translate(-50%,-50%) rotate(-45deg) scale(1);background:#f87585;z-index:4;transition:opacity .4s ease .2s,transform .4s ease .2s}.seal:before,.seal:after{content:"";position:absolute;width:28px;height:28px;background:#f87585;border-radius:50%}.seal:before{top:-14px;left:0}.seal:after{left:14px;top:0}.envelope-container.opening .seal{transform:translate(-50%,-70%) rotate(-45deg) scale(.5);opacity:0}@media (max-width: 600px){.envelope-container{width:60vw}}html,body,#root{margin:0;padding:0;height:100%;background:linear-gradient(135deg,#ffe4e1,#fff0f5)}.page{display:flex;flex-direction:column;position:relative;width:100%;min-height:100vh;overflow-x:hidden;background:transparent}.content{flex:1}.app-footer{text-align:center;font-size:.85rem;color:#666;padding:1rem 0;font-family:Segoe UI,sans-serif;background:transparent}.heart-pattern{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='0.2' d='M20 34s-4-3.3-8-7.7C6.3 22.7 2 18.6 2 13c0-4.4 3.6-8 8-8 2.1 0 4 .8 5.5 2.2C18 5.8 19.9 5 22 5c4.4 0 8 3.6 8 8 0 5.6-4.3 9.7-10 13.3C24 30.7 20 34 20 34z'/%3E%3C/svg%3E");background-repeat:repeat;opacity:.1;animation:driftPattern 20s linear infinite}@keyframes driftPattern{0%{background-position:0 0}to{background-position:200px 200px}}.clouds{position:absolute;top:0;left:0;width:200%;height:50%;pointer-events:none}.cloud{position:absolute;background:#fff;border-radius:50%;opacity:.8}.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud1{width:120px;height:60px;top:20px;left:-150px;animation:moveClouds 30s linear infinite;animation-delay:-10s}.cloud1:before{width:60px;height:60px;top:-30px;left:10px}.cloud1:after{width:80px;height:80px;top:-20px;left:40px}.cloud2{width:180px;height:90px;top:60px;left:-200px;animation:moveClouds 45s linear infinite alternate;animation-delay:-10s}.cloud2:before{width:90px;height:90px;top:-40px;left:20px}.cloud2:after{width:100px;height:100px;top:-20px;left:60px}.cloud3{width:140px;height:70px;top:100px;left:-180px;animation:moveClouds 35s linear infinite reverse;animation-delay:-5s}.cloud3:before{width:70px;height:70px;top:-35px;left:15px}.cloud3:after{width:90px;height:90px;top:-25px;left:45px}@keyframes moveClouds{0%{transform:translate(0)}to{transform:translate(150vw)}}.intro-text{position:absolute;top:35%;width:100%;text-align:center;font-family:Dancing Script,cursive;font-size:3rem;color:#d63384;animation:fadeUpOut 3s forwards}@keyframes fadeUpOut{0%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-50px)}}.envelope-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.envelope-instruction{margin-top:1rem;font-family:Dancing Script,cursive;font-size:xx-large;color:#d63384}