html,body{width:100%;min-height:100vh;overflow-x:hidden}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}#root{width:100%;min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}.app{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;position:relative;overflow-x:hidden}.music-toggle{z-index:1001;color:#fff;cursor:pointer;background:linear-gradient(145deg,#e74c3c,#c0392b);border:none;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:24px;transition:all .3s;display:flex;position:fixed;top:20px;right:20px;box-shadow:0 4px 15px #e74c3c66}.music-toggle:hover{transform:scale(1.1);box-shadow:0 6px 20px #e74c3c99}.music-toggle:active{transform:scale(.95)}.snowfall{pointer-events:none;z-index:1000;width:100%;height:100%;position:fixed;top:0;left:0}.snowflake{color:#fff;text-shadow:0 0 5px #fffc;animation:linear forwards fall;position:absolute;top:-20px}@keyframes fall{to{transform:translateY(100vh)rotate(360deg)}}.light-string{z-index:100;justify-content:space-around;width:100%;padding:10px;display:flex;position:fixed;top:0;left:0}.light-bulb{border-radius:50%;width:12px;height:18px;animation:1s ease-in-out infinite alternate glow;box-shadow:0 0 10px,0 0 20px}@keyframes glow{0%{opacity:.4;transform:scale(.9)}to{opacity:1;transform:scale(1.1)}}.header{text-align:center;z-index:10;padding:50px 20px 20px;position:relative}.title{color:gold;text-shadow:0 0 10px #ffd700cc,0 0 20px #ffd70099,0 0 30px #ffd70066;font-size:3rem;animation:2s ease-in-out infinite alternate titleGlow}@keyframes titleGlow{0%{text-shadow:0 0 10px #ffd700cc}to{text-shadow:0 0 20px gold,0 0 40px #ff6464cc}}.subtitle{color:#a8dadc;opacity:.9;margin-top:10px;font-size:1.2rem}.main-content{z-index:10;flex-direction:column;align-items:center;gap:40px;padding:20px;display:flex;position:relative}.tree-container{width:350px;height:450px;position:relative}.tree{flex-direction:column;align-items:center;width:100%;height:100%;display:flex;position:relative}.tree-top{z-index:5;position:absolute;top:-5px;left:50%;transform:translate(-50%)}.star{width:0;height:0;position:relative}.star:before,.star:after{content:"";width:0;height:0;position:absolute}.star:before{filter:drop-shadow(0 0 10px gold);border-bottom:35px solid gold;border-left:20px solid #0000;border-right:20px solid #0000;animation:1.5s ease-in-out infinite starGlow;top:-35px;left:-20px}.star:after{filter:drop-shadow(0 0 10px gold);border-top:35px solid gold;border-left:20px solid #0000;border-right:20px solid #0000;animation:1.5s ease-in-out infinite starGlow;top:-20px;left:-20px}@keyframes starGlow{0%,to{filter:drop-shadow(0 0 10px gold)}50%{filter:drop-shadow(0 0 25px gold)drop-shadow(0 0 35px orange)}}.tree-layer{position:absolute;left:50%;transform:translate(-50%)}.layer-1{filter:drop-shadow(2px 4px 6px #001e0066);background:radial-gradient(35px 40px at 25% 90%,#1a5c2a 60%,#0000 61%),radial-gradient(40px 45px at 50% 85%,#228b22 60%,#0000 61%),radial-gradient(35px 40px at 75% 90%,#1a5c2a 60%,#0000 61%),radial-gradient(30px 35px at 35% 70%,#2d8f3d 60%,#0000 61%),radial-gradient(30px 35px at 65% 70%,#2d8f3d 60%,#0000 61%),radial-gradient(25px 30px,#34a14a 60%,#0000 61%),radial-gradient(20px 25px at 40% 30%,#228b22 60%,#0000 61%),radial-gradient(20px 25px at 60% 30%,#228b22 60%,#0000 61%),radial-gradient(15px 20px at 50% 10%,#2d8f3d 60%,#0000 61%);width:140px;height:100px;top:40px}.layer-1:before{display:none}.layer-2{filter:drop-shadow(2px 4px 6px #001e0066);background:radial-gradient(45px 50px at 20% 90%,#1a5c2a 60%,#0000 61%),radial-gradient(50px 55px at 50% 85%,#228b22 60%,#0000 61%),radial-gradient(45px 50px at 80% 90%,#1a5c2a 60%,#0000 61%),radial-gradient(40px 45px at 30% 65%,#2d8f3d 60%,#0000 61%),radial-gradient(40px 45px at 70% 65%,#2d8f3d 60%,#0000 61%),radial-gradient(35px 40px at 45% 45%,#34a14a 60%,#0000 61%),radial-gradient(35px 40px at 55% 45%,#34a14a 60%,#0000 61%),radial-gradient(30px 35px at 50% 25%,#228b22 60%,#0000 61%);width:190px;height:120px;top:100px}.layer-2:before{display:none}.layer-3{filter:drop-shadow(2px 4px 6px #001e0066);background:radial-gradient(55px 60px at 15% 90%,#16522a 60%,#0000 61%),radial-gradient(60px 65px at 35% 88%,#1a5c2a 60%,#0000 61%),radial-gradient(65px 70px at 50% 85%,#228b22 60%,#0000 61%),radial-gradient(60px 65px at 65% 88%,#1a5c2a 60%,#0000 61%),radial-gradient(55px 60px at 85% 90%,#16522a 60%,#0000 61%),radial-gradient(50px 55px at 25% 65%,#2d8f3d 60%,#0000 61%),radial-gradient(50px 55px at 75% 65%,#2d8f3d 60%,#0000 61%),radial-gradient(45px 50px at 40% 45%,#34a14a 60%,#0000 61%),radial-gradient(45px 50px at 60% 45%,#34a14a 60%,#0000 61%),radial-gradient(40px 45px at 50% 30%,#228b22 60%,#0000 61%);width:250px;height:150px;top:175px}.layer-3:before{display:none}.tree-trunk{background:linear-gradient(90deg,#3d2817 0%,#5c3d2a 20%,#6b4423 40%,#8b5a2b 55%,#6b4423 70%,#5c3d2a 85%,#3d2817 100%);border-radius:4px 4px 8px 8px;width:40px;height:60px;position:absolute;bottom:55px;left:50%;transform:translate(-50%);box-shadow:inset -8px 0 12px #0000004d,inset 3px 0 8px #ffffff1a}.tree-trunk:before{content:"";opacity:.6;background:radial-gradient(#2a1f15 0%,#1a140d 60%,#0000 70%);border-radius:50%;width:70px;height:20px;position:absolute;bottom:-12px;left:50%;transform:translate(-50%)}.tree-trunk:after{content:"";background:linear-gradient(#0000 18%,#00000014 19%,#0000 20% 38%,#0000001a 39%,#0000 40% 58%,#00000014 59%,#0000 60% 78%,#0000001a 79%,#0000 80% 100%);border-radius:4px 4px 8px 8px;width:100%;height:100%;position:absolute}.ornaments{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.ornament{border-radius:50%;width:16px;height:16px;animation:2s ease-in-out infinite ornamentSwing;position:absolute;box-shadow:inset -3px -3px 6px #0000004d,0 0 8px}.ornament:before{content:"";background:#888;border-radius:2px 2px 0 0;width:6px;height:4px;position:absolute;top:-3px;left:50%;transform:translate(-50%)}.o1{color:#e74c3c;background:#e74c3c;animation-delay:0s;top:16%;left:44%}.o2{color:#f1c40f;background:#f1c40f;animation-delay:.3s;top:16%;left:52%}.o3{color:#3498db;background:#3498db;animation-delay:.5s;top:30%;left:36%}.o4{color:#9b59b6;background:#9b59b6;animation-delay:.7s;top:30%;left:58%}.o5{color:#2ecc71;background:#2ecc71;animation-delay:.2s;top:48%;left:28%}.o6{color:#e74c3c;background:#e74c3c;animation-delay:.4s;top:48%;left:66%}.o7{color:#f1c40f;background:#f1c40f;animation-delay:.6s;top:64%;left:34%}.o8{color:#3498db;background:#3498db;animation-delay:.8s;top:64%;left:60%}@keyframes ornamentSwing{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}.tree-lights{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.tree-light{border-radius:50%;width:6px;height:6px;animation:1.5s ease-in-out infinite lightBlink;position:absolute}.tl1{background:#ffeb3b;animation-delay:0s;top:22%;left:48%;box-shadow:0 0 8px #ffeb3b}.tl2{background:#ff5722;animation-delay:.3s;top:35%;left:40%;box-shadow:0 0 8px #ff5722}.tl3{background:#4caf50;animation-delay:.6s;top:35%;left:56%;box-shadow:0 0 8px #4caf50}.tl4{background:#2196f3;animation-delay:.2s;top:52%;left:34%;box-shadow:0 0 8px #2196f3}.tl5{background:#ffeb3b;animation-delay:.5s;top:52%;left:62%;box-shadow:0 0 8px #ffeb3b}.tl6{background:#e91e63;animation-delay:.8s;top:68%;left:48%;box-shadow:0 0 8px #e91e63}@keyframes lightBlink{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.letters-container{width:100%;height:100%;position:absolute;top:0;left:0}.letter{cursor:pointer;z-index:20;border-radius:4px;justify-content:center;align-items:center;width:36px;height:28px;transition:all .3s;animation:3s ease-in-out infinite letterFloat;display:flex;position:absolute;box-shadow:0 3px 10px #0000004d}.letter-icon{color:#fff;text-shadow:0 1px 2px #0000004d;font-size:16px}.letter:hover{transform:scale(1.2)rotate(5deg);box-shadow:0 6px 20px #ffffff4d}.letter.open{opacity:.5}.letter:first-child{animation-delay:0s}.letter:nth-child(2){animation-delay:.5s}.letter:nth-child(3){animation-delay:1s}.letter:nth-child(4){animation-delay:1.5s}.letter:nth-child(5){animation-delay:.3s}.letter:nth-child(6){animation-delay:.8s}.letter:nth-child(7){animation-delay:1.3s}.letter:nth-child(8){animation-delay:.6s}@keyframes letterFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.gift-box-container{cursor:pointer;min-height:250px;margin-top:0;padding-top:120px;transition:transform .3s;position:relative}.gift-box-container:hover .gift-box{transform:scale(1.05)}.gift-box{width:120px;height:100px;transition:transform .3s;position:relative}.gift-lid{z-index:2;background:linear-gradient(#e74c3c 0%,#c0392b 100%);border-radius:4px;width:130px;height:25px;transition:all .5s;position:absolute;top:0;left:-5px;box-shadow:0 3px 15px #0000004d}.gift-box-container.opened .gift-lid{opacity:0;transform:translateY(-60px)rotate(-25deg)}.gift-bow{width:40px;height:20px;position:absolute;top:-15px;left:50%;transform:translate(-50%)}.gift-bow:before,.gift-bow:after{content:"";background:#f1c40f;border-radius:50% 50% 50% 0;width:18px;height:18px;position:absolute;top:0}.gift-bow:before{left:2px;transform:rotate(-45deg)}.gift-bow:after{right:2px;transform:rotate(45deg)scaleX(-1)}.gift-body{background:linear-gradient(#e74c3c 0%,#c0392b 100%);border-radius:4px;width:120px;height:75px;position:absolute;bottom:0;overflow:hidden;box-shadow:0 8px 25px #0006}.gift-ribbon-v{background:linear-gradient(90deg,#d4a017 0%,#f1c40f 50%,#d4a017 100%);width:18px;height:100%;position:absolute;left:50%;transform:translate(-50%)}.gift-ribbon-h{background:linear-gradient(#d4a017 0%,#f1c40f 50%,#d4a017 100%);width:100%;height:18px;position:absolute;top:50%;transform:translateY(-50%)}.teddy-bear{text-align:center;animation:.5s ease-out teddyPop;position:absolute;top:-80px;left:50%;transform:translate(-50%)}@keyframes teddyPop{0%{opacity:0;transform:translate(-50%)translateY(30px)scale(0)}50%{transform:translate(-50%)translateY(-10px)scale(1.1)}to{opacity:1;transform:translate(-50%)translateY(0)scale(1)}}.teddy-body{width:80px;height:90px;margin:0 auto;position:relative}.teddy-head{z-index:2;background:linear-gradient(135deg,#c9a66b 0%,#a67c52 100%);border-radius:50%;width:50px;height:45px;position:absolute;top:0;left:50%;transform:translate(-50%);box-shadow:inset -5px -5px 10px #0003}.teddy-ear{background:linear-gradient(135deg,#c9a66b 0%,#a67c52 100%);border-radius:50%;width:18px;height:18px;position:absolute;top:-5px}.teddy-ear.left{left:-5px}.teddy-ear.right{right:-5px}.teddy-ear:after{content:"";background:#e8c99b;border-radius:50%;width:10px;height:10px;position:absolute;top:4px;left:4px}.teddy-face{width:100%;height:100%;position:absolute}.teddy-eye{background:#2c1810;border-radius:50%;width:6px;height:6px;position:absolute;top:15px}.teddy-eye.left{left:12px}.teddy-eye.right{right:12px}.teddy-nose{background:#2c1810;border-radius:50%;width:10px;height:8px;position:absolute;top:24px;left:50%;transform:translate(-50%)}.teddy-nose:after{content:"";background:#2c1810;width:1px;height:8px;position:absolute;bottom:-8px;left:50%;transform:translate(-50%)}.teddy-torso{background:linear-gradient(135deg,#c9a66b 0%,#a67c52 100%);border-radius:50% 50% 45% 45%;width:40px;height:35px;position:absolute;bottom:10px;left:50%;transform:translate(-50%);box-shadow:inset -4px -4px 8px #0003}.teddy-arm{background:linear-gradient(135deg,#c9a66b 0%,#a67c52 100%);border-radius:20px;width:15px;height:30px;position:absolute;bottom:15px}.teddy-arm.left{left:8px;transform:rotate(20deg)}.teddy-arm.right{right:8px;transform:rotate(-20deg)}.teddy-message{background:linear-gradient(135deg,#fff5f5 0%,#ffe4e4 100%);border-radius:15px;min-width:220px;margin-top:10px;padding:12px 20px;position:relative;box-shadow:0 8px 25px #0003}.teddy-message:before{content:"";border-bottom:8px solid #fff5f5;border-left:8px solid #0000;border-right:8px solid #0000;position:absolute;top:-8px;left:50%;transform:translate(-50%)}.teddy-message p{color:#c0392b;margin:4px 0;font-size:1rem;font-weight:600}.teddy-sub{color:#e74c3c!important;font-size:.85rem!important;font-weight:400!important}.popup-overlay{z-index:2000;background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;animation:.3s fadeIn;display:flex;position:fixed;top:0;left:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.popup-content{text-align:center;background:linear-gradient(135deg,#1a472a 0%,#2d5a3d 100%);border-radius:16px;max-width:90%;padding:35px 45px;animation:.4s popIn;box-shadow:0 20px 60px #00000080,0 0 0 3px #ffd7004d}@keyframes popIn{0%{opacity:0;transform:scale(.5)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.popup-message{color:gold;text-shadow:0 2px 10px #0000004d;margin-bottom:20px;font-size:1.6rem;font-weight:600}.popup-close{color:#fff;cursor:pointer;background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);border:none;border-radius:20px;padding:10px 25px;font-size:1rem;transition:all .3s;box-shadow:0 4px 15px #e74c3c66}.popup-close:hover{transform:scale(1.05);box-shadow:0 6px 25px #e74c3c99}.footer{text-align:center;color:#a8dadc;z-index:10;padding:30px;font-size:1.1rem;position:relative}@media (max-width:600px){.title{font-size:1.8rem}.subtitle{font-size:1rem}.tree-container{width:280px;height:380px;transform:scale(.85)}.popup-message{font-size:1.2rem}.teddy-message{min-width:180px;padding:10px 15px}.teddy-message p{font-size:.9rem}}