*{margin:0;padding:0;box-sizing:border-box}body{font-family:Georgia,serif;background:url(/assets/background-CAuiqoAr.jpg) center center / cover no-repeat fixed,linear-gradient(135deg,#ffd6f3,#f0c4e8);min-height:100vh;padding:20px}.app{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.letter-container{width:100%;max-width:1200px;margin:0 auto;position:relative}.floating-images{position:absolute;inset:0;pointer-events:none;z-index:10}.floating-image{position:absolute;animation:float 6s ease-in-out infinite;z-index:10}.floating-image:nth-child(odd){animation-delay:0s}.floating-image:nth-child(2n){animation-delay:3s}@keyframes float{0%,to{transform:translateY(0) rotate(var(--rotation))}50%{transform:translateY(-10px) rotate(var(--rotation))}}.top-left-float{top:-30px;left:-40px;--rotation: -15deg}.top-right-float{top:-20px;right:-50px;--rotation: 12deg}.bottom-left-float{bottom:-25px;left:-35px;--rotation: -8deg}.bottom-right-float{bottom:-30px;right:-45px;--rotation: 18deg}.middle-left-float{top:50%;left:-60px;transform:translateY(-50%);--rotation: -25deg}.middle-right-float{top:50%;right:-55px;transform:translateY(-50%);--rotation: 22deg}.notebook-paper{background:#fff;border-radius:15px;box-shadow:0 20px 40px #30001b1a,0 8px 16px #30001b1a;padding:60px 70px;position:relative;overflow:hidden;border:2px solid #ffd6f3;min-height:800px;z-index:2;background-image:linear-gradient(rgba(255,214,243,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,214,243,.1) 1px,transparent 1px);background-size:20px 20px}.notebook-holes{position:absolute;left:20px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-around;padding:30px 0}.hole{width:15px;height:15px;background:#ffd6f3;border:2px solid #30001b;border-radius:50%;margin:15px 0}.letter-title{text-align:center;font-size:4rem;font-weight:700;color:#ffd6f3;margin-bottom:40px;font-family:Brush Script MT,cursive;text-shadow:2px 2px 4px rgba(48,0,27,.2)}.letter-content{position:relative;z-index:2}.letter-body{padding:0 30px}.salutation{display:flex;align-items:center;margin-bottom:35px;position:relative}.sparkles{display:flex;gap:12px;margin-right:20px}.sparkle{color:#30001b;font-size:24px;animation:twinkle 2s infinite}.sparkle-1{animation-delay:0s}.sparkle-2{animation-delay:1s}@keyframes twinkle{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.dear-line{font-size:22px;font-weight:700;color:#30001b;margin:0}.main-text{margin-bottom:40px}.main-text p{color:#30001b;font-size:18px;line-height:1.8;margin-bottom:20px;text-align:justify}.signature-section{display:flex;align-items:center;margin-top:50px}.heart-icon{color:#ffd6f3;font-size:32px;margin-right:20px;animation:heartbeat 2s infinite}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.signature{flex:1}.sincerely{font-size:20px;font-weight:700;color:#30001b;margin-bottom:8px}.signature-name{font-size:24px;font-weight:700;color:#30001b;margin:0}.decorative-image{max-width:120px;height:auto;border-radius:15px;box-shadow:0 8px 16px #30001b4d;transition:transform .3s ease;filter:drop-shadow(0 4px 8px rgba(48,0,27,.2))}.decorative-image:hover{transform:scale(1.1) rotate(5deg);filter:drop-shadow(0 8px 16px rgba(48,0,27,.4))}@media (max-width: 768px){.app{padding:10px}.letter-container{max-width:900px}.notebook-paper{padding:30px 35px;margin:10px;min-height:600px}.letter-title{font-size:2.5rem;margin-bottom:30px}.main-text p{font-size:14px}.dear-line{font-size:18px}.decorative-image{max-width:80px}.top-left-float{top:-20px;left:-25px}.top-right-float{top:-15px;right:-30px}.bottom-left-float{bottom:-20px;left:-25px}.bottom-right-float{bottom:-25px;right:-30px}.middle-left-float{left:-40px}.middle-right-float{right:-35px}}@media (max-width: 480px){.notebook-paper{padding:25px;margin:5px;min-height:500px}.letter-title{font-size:2rem}.main-text p{font-size:13px}.dear-line{font-size:16px}.decorative-image{max-width:60px}.middle-left-float,.middle-right-float{display:none}.top-left-float{top:-15px;left:-20px}.top-right-float{top:-10px;right:-25px}.bottom-left-float{bottom:-15px;left:-20px}.bottom-right-float{bottom:-20px;right:-25px}.notebook-holes{left:10px}.hole{width:8px;height:8px}}.notebook-paper{animation:fadeInUp .8s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.notebook-paper:hover{transform:translateY(-2px);box-shadow:0 25px 50px #30001b26,0 12px 20px #30001b1a;transition:all .3s ease}.falling-stars-bg{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:2;overflow:hidden}.falling-star{position:absolute;top:-24px;will-change:transform,opacity;animation-name:falling-star-anim;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes falling-star-anim{0%{transform:translateY(0) scale(1);opacity:1}90%{opacity:1}to{transform:translateY(100vh) scale(.95);opacity:0}}.intro-overlay{position:fixed;z-index:1000;top:0;left:0;width:100vw;height:100vh;background:url(/assets/intro-background-DdpVT0Bj.gif) center center / cover no-repeat;display:flex;align-items:center;justify-content:center;transition:opacity .7s cubic-bezier(.4,0,.2,1),visibility .7s cubic-bezier(.4,0,.2,1);cursor:pointer;overflow:hidden;opacity:1;visibility:visible}.intro-overlay:before{content:"";position:absolute;inset:0;z-index:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.intro-fade-out{opacity:0;visibility:hidden;pointer-events:none}.main-content-transition{transition:filter .7s cubic-bezier(.4,0,.2,1),opacity .7s cubic-bezier(.4,0,.2,1)}.blurred-out{filter:blur(12px) brightness(.95);opacity:.2}.faded-in{filter:none;opacity:1}.lace-border{background:#ffffffeb;border-radius:32px;padding:48px 48px 36px;box-shadow:0 8px 32px #30001b1f;position:relative;display:flex;align-items:center;justify-content:center;min-width:340px;min-height:340px;max-width:90vw;max-height:90vh;border:none;z-index:1}.lace-border:before{display:none}.intro-content{display:flex;flex-direction:column;align-items:center;justify-content:center}.open-me-text{display:flex;flex-direction:column;align-items:center;margin-bottom:18px}.open-me{font-family:Brush Script MT,cursive;font-size:2.5rem;color:#30001b;letter-spacing:2px;text-shadow:1px 1px 0 #ffd6f3,2px 2px 0 #29000122}.open-heart{font-size:2.2rem;color:#ff8fd1;margin-top:2px;text-shadow:0 2px 8px #ffd6f3;animation:heart-pop 1.2s infinite}@keyframes heart-pop{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}.intro-letter-img{width:180px;height:auto;border-radius:18px;box-shadow:0 4px 16px #ffd6f3cc,0 2px 8px #30001b33;margin-top:8px;border:3px solid #ffd6f3}@media (max-width: 600px){.lace-border{padding:18px 8px 12px;min-width:180px;min-height:180px}.intro-letter-img{width:110px}.open-me{font-size:1.3rem}.open-heart{font-size:1.2rem}}.mute-btn{position:fixed;top:28px;right:32px;z-index:1200;background:#ffd6f3eb;border:2.5px solid #ffd6f3;border-radius:50%;width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-size:2.3rem;color:#30001b;box-shadow:0 2px 8px #ffd6f3cc;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s,border .2s}.mute-btn:hover{background:#ffd6f3;color:#ff8fd1;border-color:#ff8fd1;box-shadow:0 4px 16px #ff8fd1cc}.mute-icon{pointer-events:none;position:relative;z-index:1}.mute-icon:after{content:"";position:absolute;left:50%;top:50%;width:2.2em;height:2.2em;background:radial-gradient(circle,#ffd6f3 40%,#ff8fd1 80%,transparent 100%);opacity:.7;border-radius:50%;transform:translate(-50%,-50%) scale(.7);z-index:0;animation:ping 1.2s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{0%{opacity:.7;transform:translate(-50%,-50%) scale(.7)}60%{opacity:.3;transform:translate(-50%,-50%) scale(1.2)}to{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}@media (max-width: 600px){.mute-btn{top:12px;right:10px;width:48px;height:48px;font-size:1.5rem}.mute-icon:after{width:1.6em;height:1.6em}.decorative-image{max-width:90px}}.audio-controls{position:fixed;top:24px;right:32px;z-index:1200;display:flex;flex-direction:row;align-items:center;gap:18px}.volume-slider{width:110px;accent-color:#ff8fd1;background:transparent;height:4px;border-radius:4px;outline:none;transition:box-shadow .2s;box-shadow:0 1px 6px #ffd6f3aa;vertical-align:middle;margin-top:0;margin-bottom:0;display:inline-block}.volume-slider:focus{box-shadow:0 0 0 3px #ffd6f3cc}.volume-slider::-webkit-slider-thumb{width:18px;height:18px;border-radius:50%;background:#ffd6f3;border:2px solid #ff8fd1;box-shadow:0 2px 8px #ff8fd1aa;cursor:pointer;transition:background .2s,border .2s}.volume-slider:hover::-webkit-slider-thumb{background:#ff8fd1;border-color:#ffd6f3}.volume-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#ffd6f3;border:2px solid #ff8fd1;box-shadow:0 2px 8px #ff8fd1aa;cursor:pointer;transition:background .2s,border .2s}.volume-slider:hover::-moz-range-thumb{background:#ff8fd1;border-color:#ffd6f3}.volume-slider::-ms-thumb{width:18px;height:18px;border-radius:50%;background:#ffd6f3;border:2px solid #ff8fd1;box-shadow:0 2px 8px #ff8fd1aa;cursor:pointer;transition:background .2s,border .2s}.volume-slider:hover::-ms-thumb{background:#ff8fd1;border-color:#ffd6f3}.volume-slider::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#ffd6f3,#ff8fd1)}.volume-slider::-ms-fill-lower{background:#ffd6f3}.volume-slider::-ms-fill-upper{background:#ff8fd1}@media (max-width: 600px){.audio-controls{top:8px;right:4px;gap:8px;flex-direction:row;align-items:center}.volume-slider{width:70px}}