:root{--primary-pink: #ffb6c8;--secondary-pink: #ff8fa8;--dark-pink: #ff6b9d;--light-pink: #ffe0e9;--cream: #fff5f7;--lavender: #e8d5f2;--peach: #ffcbb3;--gold: #ffd700;--envelope-dark: #d4a5a5;--envelope-medium: #e8b9b9;--envelope-light: #f5d5d5;--shadow: rgba(255, 107, 157, .3);--text-dark: #5a4949;--white: #ffffff}button,a{touch-action:manipulation}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Quicksand,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(135deg,var(--light-pink) 0%,var(--lavender) 50%,var(--peach) 100%);background-size:100% 100%;min-height:100vh;overflow-x:hidden;position:relative;animation:gradientShift 15s ease infinite}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.app{min-height:70vh;position:relative;padding-bottom:120px}.main-content{position:relative;z-index:1;min-height:calc(100vh - 120px)}.bg-decorations{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.floating-heart{position:absolute;font-size:20px;opacity:.15;animation:float 20s infinite ease-in-out}.floating-heart:nth-child(1){left:10%;animation-delay:0s;font-size:24px}.floating-heart:nth-child(2){left:25%;animation-delay:3s;font-size:18px}.floating-heart:nth-child(3){left:45%;animation-delay:6s;font-size:22px}.floating-heart:nth-child(4){left:60%;animation-delay:2s;font-size:20px}.floating-heart:nth-child(5){left:78%;animation-delay:5s;font-size:26px}.floating-heart:nth-child(6){left:88%;animation-delay:8s;font-size:19px}@keyframes float{0%{transform:translateY(100vh) scale(.5) rotate(0);opacity:0}10%{opacity:.15}90%{opacity:.15}to{transform:translateY(-120px) scale(1.3) rotate(360deg);opacity:0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.smooth-transition{transition:all .3s ease}.envelope-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;transition:all 1s cubic-bezier(.68,-.55,.265,1.55)}.envelope-container.minimized{position:fixed;top:20px;right:20px;min-height:auto;z-index:1000;padding:0}.envelope{width:240px;height:120px;cursor:pointer;position:relative;perspective:2000px;background:var(--envelope-dark);border-radius:0 0 15px 15px;transform-style:preserve-3d;display:flex;justify-content:center;transition:all 1s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 15px 40px var(--shadow)}.envelope.opened{pointer-events:none}.envelope.minimized{width:90px;height:45px;cursor:pointer;pointer-events:all;box-shadow:0 5px 20px var(--shadow)}.heart-icon{position:absolute;right:-20px;top:-40px;font-size:45px;z-index:10;animation:heartbeat 1.5s ease-in-out infinite;filter:drop-shadow(0 5px 10px rgba(255,107,157,.5));transition:all .5s ease}@keyframes heartbeat{0%,to{transform:scale(1)}10%{transform:scale(1.1)}20%{transform:scale(1)}30%{transform:scale(1.15)}40%{transform:scale(1)}}.envelope.opened .heart-icon{opacity:0;transform:scale(0)}.envelope.minimized .heart-icon{top:-12px;font-size:22px}.paper{bottom:0;width:85%;height:85%;position:absolute;text-align:center;border-radius:8px 8px 6px 6px;background:#fff;opacity:0;z-index:5;transition:.5s;box-shadow:inset 0 1px 3px #0000000d,0 2px 5px #0000001a}.paper:before,.paper:after{content:"";left:12%;height:2px;position:absolute;border-radius:50px;background:#ffb6c840}.paper:before{top:30%;width:45%}.paper:after{top:50%;width:55%}.envelope.opened .paper{transform:translateY(-180px) scale(2);transition:transform 1.5s .4s cubic-bezier(.68,-.55,.265,1.55);z-index:3;opacity:0}.envelope.minimized .paper{width:75%;height:75%;transform:scale(1)}.letter-preview{position:absolute;bottom:-35px;left:50%;transform:translate(-50%);font-family:Caveat;font-size:30px;color:var(--text-dark);white-space:nowrap;text-shadow:0 2px 4px rgba(255,255,255,.9);animation:fadeIn .5s ease}.left-flap,.right-flap{position:absolute;width:100%;height:100%;z-index:4;bottom:0;filter:drop-shadow(0px 0px 3px rgba(0,0,0,.15))}.left-flap:before,.right-flap:before,.top-flap:before{content:"";position:absolute;width:100%;height:100%;border-radius:0 0 15px 15px}.left-flap:before{clip-path:polygon(0 0,100% 100%,0 100%);background:var(--envelope-dark)}.right-flap:before{background:var(--envelope-medium);clip-path:polygon(100% 0,100% 100%,0 100%)}.top-flap{width:100%;height:50%;position:absolute;transition:1s .2s cubic-bezier(.68,-.55,.265,1.55);transform-origin:top;transform:rotateX(1deg);filter:drop-shadow(0px 3px 5px rgba(0,0,0,.3));z-index:6}.top-flap:before{clip-path:polygon(0 0,100% 0,50% 100%,0 0);background:var(--envelope-light)}.envelope.opened .top-flap{transform:rotateX(190deg);transition:transform .7s ease;filter:none}.envelope.minimized .top-flap{transform:rotateX(1deg);border-radius:0 0 8px 8px}.envelope.minimized .left-flap:before,.envelope.minimized .right-flap:before{border-radius:0 0 8px 8px}.letter-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:90%;max-width:650px;min-height:450px;background:#fff;border-radius:20px;padding:50px 40px;box-shadow:0 25px 70px #ff6b9d66;z-index:500;opacity:0;transition:all .8s cubic-bezier(.68,-.55,.265,1.55);background-image:repeating-linear-gradient(transparent,transparent 35px,rgba(255,182,200,.08) 35px,rgba(255,182,200,.08) 36px)}.letter-content.visible{transform:translate(-50%,-50%) scale(1);opacity:1}.close-letter{position:absolute;top:15px;right:15px;width:40px;height:40px;border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .3s ease;gap:2px}.close-heart{font-size:30px;transition:transform .3s ease}.close-letter:hover .close-heart{transform:scale(1.5);text-shadow:rgba(0,0,0,.15)}.letter-header{text-align:center;margin-bottom:35px;margin-top:25px;font-family:Pacifico,cursive;color:var(--dark-pink);font-size:36px;text-shadow:2px 2px 4px rgba(255,182,200,.3);animation:fadeIn .8s ease .3s both}.letter-body{font-family:Caveat,cursive;font-size:30px;line-height:1.9;color:var(--text-dark);margin-bottom:35px;animation:fadeIn .8s ease .5s both}.letter-body p{margin-bottom:20px}.letter-signature{text-align:right;font-family:Pacifico,cursive;font-size:26px;color:var(--secondary-pink);margin-top:25px;animation:fadeIn .8s ease .7s both}.album-section{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:80px 20px 140px;animation:fadeIn .8s ease}.album-section-header{text-align:center;margin-bottom:60px;animation:fadeIn .8s ease}.album-main-title{font-family:Pacifico,cursive;font-size:48px;color:var(--dark-pink);margin-bottom:15px;text-shadow:3px 3px 6px rgba(255,107,157,.3)}.album-subtitle{font-family:Quicksand,sans-serif;font-size:20px;color:var(--text-dark);font-weight:400;opacity:.85}.albums-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,320px));gap:40px;max-width:1100px;width:100%;justify-content:center;padding:0 20px}.album-card{background:#fff;border-radius:20px;padding:25px;box-shadow:0 15px 40px #ff6b9d33;transition:all .4s cubic-bezier(.68,-.55,.265,1.55);position:relative;animation:slideUp .6s ease both;cursor:pointer}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.album-card:hover{transform:translateY(-10px) scale(1.03);box-shadow:0 20px 50px #ff6b9d59}.album-cover{position:relative;margin-bottom:20px;border-radius:15px;overflow:hidden}.album-preview-photo{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--light-pink);box-shadow:0 5px 15px #0000001a;padding:12px;background:#fff}.album-preview-photo img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block;transition:transform .4s ease}.album-card:hover .album-preview-photo img{transform:scale(1.08)}.album-number{position:absolute;top:15px;right:15px;background:var(--dark-pink);color:#fff;padding:8px 16px;border-radius:20px;font-family:Quicksand,sans-serif;font-weight:700;font-size:14px;box-shadow:0 4px 10px #ff6b9d66;z-index:10}.album-info{padding:0 5px;margin-bottom:20px}.album-title{font-family:Quicksand,sans-serif;font-size:22px;font-weight:700;color:var(--text-dark);margin-bottom:10px;line-height:1.3}.album-photo-count{font-family:Quicksand,sans-serif;font-size:14px;color:var(--text-dark);opacity:.7;margin-bottom:8px}.album-song-info{font-family:Caveat,cursive;font-size:16px;color:var(--secondary-pink);margin-top:5px}.album-play-button{width:100%;height:55px;border:none;background:linear-gradient(135deg,var(--dark-pink) 0%,var(--secondary-pink) 100%);color:#fff;border-radius:30px;cursor:pointer;font-size:24px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 8px 20px #ff6b9d66;position:relative;overflow:hidden}.album-play-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.album-play-button:hover:before{left:100%}.album-play-button:hover{transform:scale(1.05);box-shadow:0 10px 30px #ff6b9d80}.album-play-button:active{transform:scale(.98)}.play-icon{display:inline-flex;align-items:center;justify-content:center;transition:transform .3s ease}.album-play-button:hover .play-icon{transform:scale(1.15)}.photo-section{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:80px 20px 160px;animation:fadeIn .6s ease;position:relative}.back-button{position:fixed;top:30px;left:30px;background:#fff;border:none;padding:12px 24px;border-radius:30px;cursor:pointer;display:flex;align-items:center;gap:10px;font-family:Quicksand,sans-serif;font-size:16px;font-weight:600;color:var(--dark-pink);box-shadow:0 5px 20px #ff6b9d40;transition:all .3s ease;z-index:100}.back-button:hover{transform:translate(-5px);box-shadow:0 8px 25px #ff6b9d59;background:var(--light-pink)}.back-arrow{font-size:20px;transition:transform .3s ease}.back-button:hover .back-arrow{transform:translate(-3px)}.photo-section-header{text-align:center;margin-bottom:50px;animation:fadeIn .8s ease}.photo-album-title{font-family:Pacifico,cursive;font-size:42px;color:var(--dark-pink);text-shadow:3px 3px 6px rgba(255,107,157,.3);margin-bottom:10px}.photos-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,320px));gap:40px;max-width:1200px;width:100%;margin-bottom:50px;justify-content:center;padding:0 20px}.photo-frame{background:#fff;padding:18px 18px 70px;box-shadow:0 12px 35px #0003;transform:rotate(-2deg);transition:all .4s cubic-bezier(.68,-.55,.265,1.55);animation:slideUp .6s ease both;cursor:pointer;position:relative}.photo-frame:nth-child(2n){transform:rotate(2deg)}.photo-frame:nth-child(3n){transform:rotate(-1deg)}.photo-frame:hover{transform:rotate(0) scale(1.08);z-index:10;box-shadow:0 20px 50px #00000040}@keyframes slideUp{0%{opacity:0;transform:translateY(50px) rotate(0)}to{opacity:1}}.photo-inner{width:100%;aspect-ratio:1;overflow:hidden;background:var(--light-pink);margin-bottom:15px}.photo-inner img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}.photo-frame:hover .photo-inner img{transform:scale(1.1)}.photo-caption{font-family:Caveat,cursive;font-size:20px;text-align:center;color:var(--text-dark);padding:0 5px;line-height:1.3}.album-navigation{display:flex;gap:25px;margin-bottom:30px;animation:fadeIn .8s ease .3s both}.nav-arrow{width:55px;height:55px;border:none;background:var(--dark-pink);color:#fff;border-radius:50%;cursor:pointer;font-size:26px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 6px 18px #ff6b9d66}.nav-arrow:hover{background:var(--secondary-pink);transform:scale(1.12);box-shadow:0 8px 24px #ff6b9d80}.nav-arrow:active{transform:scale(.95)}.nav-arrow-prev:hover{transform:translate(-3px) scale(1.12)}.nav-arrow-next:hover{transform:translate(3px) scale(1.12)}.music-player{background:#fff;padding:20px 35px;border-radius:50px;box-shadow:0 8px 25px #ff6b9d40;display:flex;align-items:center;gap:20px;animation:fadeIn .8s ease .5s both;transition:all .3s ease}.music-player:hover{box-shadow:0 10px 30px #ff6b9d59;transform:translateY(-2px)}.play-button{width:50px;height:50px;border:none;background:linear-gradient(135deg,var(--dark-pink) 0%,var(--secondary-pink) 100%);color:#fff;border-radius:50%;cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 4px 12px #ff6b9d4d;flex-shrink:0}.play-button:hover{transform:scale(1.1);box-shadow:0 6px 16px #ff6b9d66}.play-button:active{transform:scale(.95)}.song-info{font-family:Quicksand,sans-serif;color:var(--text-dark);line-height:1.4}.song-title{font-weight:700;font-size:18px;margin-bottom:3px}.song-artist{font-size:15px;opacity:.75}footer.footer{position:fixed;bottom:0;left:0;width:100%;background:var(--white);padding:25px 20px;text-align:center;z-index:1001;box-shadow:0 -5px 25px #ff6b9d26;border-top:2px solid rgba(255,182,200,.3)}.footer-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;max-width:1200px;margin:0 auto}.footer-main-text{font-family:Quicksand,sans-serif;font-size:30px;font-weight:700;color:var(--dark-pink);text-transform:uppercase;letter-spacing:1.5px}.footer-links{display:flex;gap:25px;align-items:center;justify-content:center}.footer-link{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,var(--primary-pink) 0%,var(--secondary-pink) 100%);color:#fff;font-size:30px;text-decoration:none;transition:all .3s ease;box-shadow:0 4px 12px #ff6b9d4d}.footer-link:hover{transform:translateY(-5px) scale(1.1);box-shadow:0 8px 20px #ff6b9d66;background:linear-gradient(135deg,var(--dark-pink) 0%,var(--primary-pink) 100%)}.footer-link:active{transform:translateY(-3px) scale(1.05)}.footer-link i{font-size:25px}.footer-subtext{font-family:Caveat,cursive;font-size:25px;color:var(--secondary-pink);font-weight:400;margin-top:5px}