*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden}.app{min-height:100vh;background:linear-gradient(135deg,#ffc3e1,#ff9ec9,#ff6b9d);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Cormorant Garamond,serif;position:relative;overflow:hidden}.music-toggle{position:fixed;top:20px;right:20px;width:50px;height:50px;border-radius:50%;border:none;background:#ffffff4d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:24px;cursor:pointer;transition:all .3s ease;z-index:1000;display:flex;align-items:center;justify-content:center}.music-toggle:hover{transform:scale(1);background:#ffffff80}.music-toggle.playing{animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.title{font-family:Cormorant Garamond,serif;font-size:3.5rem;color:#fff;text-shadow:2px 2px 10px rgba(0,0,0,.2);margin-bottom:2rem;animation:fadeInDown 1s ease-out;letter-spacing:2px}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.floating-heart{position:absolute;bottom:-50px;animation:float-up linear infinite;opacity:.7;pointer-events:none;z-index:0;filter:drop-shadow(0 0 5px rgba(255,255,255,.5))}@keyframes float-up{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.7}90%{opacity:.7}to{transform:translateY(-100vh) rotate(360deg);opacity:0}}.envelope-container{position:relative;width:400px;height:300px;margin:2rem 0;animation:fadeIn 1.5s ease-out .5s both;z-index:50;perspective:1200px}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.envelope{position:absolute;width:100%;height:100%;cursor:pointer;transition:transform .3s ease;transform-style:preserve-3d}.envelope:hover:not(.open){transform:scale(1.05)}.envelope-body{position:absolute;bottom:0;width:100%;height:60%;background:#fff;border-radius:0 0 10px 10px;box-shadow:0 10px 40px #0000004d;z-index:5}.envelope-flap{position:absolute;top:40%;left:0;width:100%;height:140px;background:#f5f5f5;clip-path:polygon(0 0,50% 100%,100% 0);transform-origin:top center;transform:rotateX(0);transition:transform 1s cubic-bezier(.65,0,.35,1);backface-visibility:hidden;transform-style:preserve-3d;box-shadow:0 8px 25px #0003;z-index:10}.envelope.open .envelope-flap{transform:rotateX(180deg)}.envelope-seal{position:absolute;top:calc(40% + 70px);left:50%;transform:translate(-50%,-50%);font-size:2rem;z-index:11;transition:all .6s ease;animation:heartbeat 1.5s ease-in-out infinite}@keyframes heartbeat{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}.envelope.open .envelope-seal{opacity:0;transform:translate(-50%,-50%) scale(0)}.letter{position:fixed;top:50%;left:50%;width:200%;max-width:600px;background:#fff;border-radius:8px;padding:3rem;box-shadow:0 15px 50px #0003;opacity:0;transform:translate(-50%,-50%) scale(.3);transition:all 1.2s cubic-bezier(.34,1.56,.64,1);pointer-events:none;border:2px solid #f0e6d2;z-index:100}.letter.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:all}.close-letter{position:absolute;top:15px;right:15px;width:35px;height:35px;border-radius:50%;border:2px solid #d4526e;background:#fff;color:#d4526e;font-size:1.3rem;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;line-height:1;z-index:10}.close-letter:hover{background:#d4526e;color:#fff;transform:rotate(90deg)}.letter-content{font-family:Allura,cursive;color:#333;line-height:1.8}.letter-greeting{font-family:Allura,cursive;font-size:1.5rem;color:#d4526e;margin-bottom:1rem;font-weight:700}.letter-text{font-size:1rem;margin-bottom:1rem;text-align:justify;font-style:italic}.letter-signature{font-family:Allura,cursive;font-size:1rem;margin-top:2rem;color:#555;text-align:right}.letter-name{font-family:Dancing Script,cursive;font-size:1.8rem;color:#d4526e;text-align:right;font-weight:700;margin-top:.5rem}.instruction{font-family:Allura,cursive;font-size:1.3rem;color:#fff;animation:fadeInUp 1s ease-out 1s both,gentle-bounce 2s ease-in-out 2s infinite;text-shadow:1px 1px 5px rgba(0,0,0,.2)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes gentle-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@media (max-width: 768px){.title{font-size:2.5rem}.envelope-container{width:320px;height:240px}.letter{padding:1.5rem}.letter-greeting{font-size:1.3rem}.letter-text{font-size:.9rem}}.photo-carousel{position:fixed;left:20px;top:0;width:200px;height:100vh;overflow:hidden;z-index:1;mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%)}.photo-track{display:flex;flex-direction:column;gap:20px;animation:scroll-down 40s linear infinite}@keyframes scroll-down{0%{transform:translateY(-50%)}to{transform:translateY(0)}}.photo-item{width:180px;height:240px;border-radius:15px;overflow:hidden;box-shadow:0 8px 20px #0000004d;border:3px solid rgba(255,255,255,.8);background:#fff;flex-shrink:0}.photo-item img{width:100%;height:100%;object-fit:cover;display:block}@media (max-width: 768px){.photo-carousel{width:120px;left:10px}.photo-item{width:100px;height:140px}}@media (max-width: 480px){.photo-carousel{display:none}}