@import "https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Playfair+Display:ital,wght@0,400..700;1,400..700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap";:root{--bg-primary:#fff9f9;--bg-card:#ffffffd9;--bg-glass:#fff6;--text-primary:#4a3e4d;--text-muted:#8c7b8e;--text-bright:#1c0f24;--accent-pink:#ff7597;--accent-pink-hover:#ff5780;--accent-gold:#d4af37;--accent-rose:#e07a5f;--border-light:#ff759726;--border-gold:#d4af374d;--shadow-soft:0 10px 30px -5px #ff75971a;--shadow-premium:0 20px 40px -10px #4a3e4d26, 0 0 20px 0 #d4af370d;--font-sans:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--font-serif:"Playfair Display", Georgia, serif;--font-cursive:"Dancing Script", cursive;font-family:var(--font-sans);color:var(--text-primary);background-color:var(--bg-primary);box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:inherit;margin:0;padding:0}body{background-color:var(--bg-primary);min-height:100vh;margin:0;overflow-x:hidden}#root{flex-direction:column;width:100%;min-height:100vh;display:flex}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#ffffff4d}::-webkit-scrollbar-thumb{background:var(--accent-pink);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--accent-pink-hover)}.app-container{background:radial-gradient(circle at 0 0,#fff0f3,#ffe3e8,#fbf0f9);justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex;position:relative;overflow:hidden}.decorations-container{pointer-events:none;z-index:1;position:absolute;inset:0;overflow:hidden}.floating-element{opacity:.6;animation:15s linear infinite floatUp;position:absolute;bottom:-100px}@keyframes floatUp{0%{opacity:0;transform:translateY(0)rotate(0)translate(0)}10%{opacity:.6}90%{opacity:.6}to{opacity:0;transform:translateY(-120vh)rotate(360deg)translate(50px)}}.flip-card-container{perspective:1500px;z-index:10;width:420px;height:580px;margin:20px}.flip-card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.175,.885,.32,1.275);position:relative}.flip-card-inner.flipped{transform:rotateY(180deg)}.card-front,.card-back{backface-visibility:hidden;background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-light);width:100%;height:100%;box-shadow:var(--shadow-premium);border-radius:24px;flex-direction:column;justify-content:space-between;align-items:center;padding:40px 30px;display:flex;position:absolute}.card-back{transform:rotateY(180deg)}.card-header-sparkle{padding:10px;display:inline-block;position:relative}.ribbon{font-family:var(--font-cursive);color:var(--accent-pink);text-shadow:2px 2px #0000000d;margin-top:10px;font-size:3.5rem;animation:2s ease-in-out infinite heartBeat}@keyframes heartBeat{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.card-image-box{background:radial-gradient(circle,#fff,#ffe3e8);border:4px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:140px;height:140px;margin:20px 0;font-size:5rem;display:flex;position:relative;box-shadow:0 8px 20px #ff759733}.card-image-box:before{content:"";border:1px dashed var(--accent-pink);border-radius:50%;animation:20s linear infinite spin;position:absolute;inset:-10px}@keyframes spin{to{transform:rotate(360deg)}}.card-teaser{text-align:center;font-family:var(--font-sans)}.card-teaser h2{color:var(--text-bright);margin-bottom:12px;font-size:1.6rem;font-weight:700}.card-teaser p{color:var(--text-muted);font-size:.95rem;line-height:1.5}.open-button{background:linear-gradient(135deg, var(--accent-pink), var(--accent-rose));color:#fff;font-family:var(--font-sans);cursor:pointer;border:none;border-radius:50px;align-items:center;gap:8px;padding:15px 40px;font-size:1rem;font-weight:600;transition:all .3s;display:flex;box-shadow:0 10px 20px #ff75974d}.open-button:hover{background:linear-gradient(135deg, var(--accent-pink-hover), var(--accent-rose));transform:translateY(-3px);box-shadow:0 15px 25px #ff759766}.open-button:active{transform:translateY(-1px)}.passcode-header{text-align:center;margin-bottom:15px}.passcode-header h3{color:var(--text-bright);margin-bottom:6px;font-size:1.4rem;font-weight:700}.passcode-header p{color:var(--text-muted);font-size:.85rem}.passcode-display{justify-content:center;gap:12px;margin:15px 0;display:flex}.passcode-dot{border:2px solid #e0b0bc;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex}.passcode-dot.active{background:var(--accent-pink);border-color:var(--accent-pink);transform:scale(1.2);box-shadow:0 0 10px #ff759799}.passcode-dot.error{background:#ef4444;border-color:#ef4444;animation:.2s ease-in-out pulseRed;transform:scale(1.1)}.passcode-dot.success{background:#10b981;border-color:#10b981;transform:scale(1.3);box-shadow:0 0 10px #10b98199}@keyframes pulseRed{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.shake-animation{animation:.5s ease-in-out shake}@keyframes shake{0%,to{transform:rotateY(180deg)translate(0)}20%,60%{transform:rotateY(180deg)translate(-10px)}40%,80%{transform:rotateY(180deg)translate(10px)}}.keypad-grid{grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:320px;margin:0 auto;display:grid}.keypad-btn{height:52px;font-family:var(--font-sans);color:var(--text-primary);cursor:pointer;background:#fff9;border:1px solid #ff75971a;border-radius:50px;outline:none;justify-content:center;align-items:center;font-size:1.2rem;font-weight:600;transition:all .2s;display:flex}.keypad-btn:hover{background:var(--accent-pink);color:#fff;transform:scale(1.05);box-shadow:0 4px 12px #ff759733}.keypad-btn:active{transform:scale(.95)}.keypad-btn.action-btn{background:#ff75970d;font-size:.95rem}.keypad-btn.action-btn.submit{color:#b28d1c;background:#d4af3726;border-color:#d4af3733}.keypad-btn.action-btn.submit:hover{background:var(--accent-gold);color:#fff}.letter-screen{justify-content:center;align-items:flex-start;width:100%;height:100vh;display:flex;position:relative;overflow:hidden}.blossom-container{pointer-events:none;z-index:1;position:absolute;inset:0}.blossom-petal{opacity:.7;background:#ffb7c5;border-radius:150% 0 150% 150%;animation:12s linear infinite fall;position:absolute}@keyframes fall{0%{transform:translateY(-50px)rotate(0)}to{transform:translate(300px,105vh)rotate(720deg)}}.scroll-container{scroll-behavior:smooth;z-index:5;-ms-overflow-style:none;scrollbar-width:none;flex-direction:column;align-items:center;width:100%;height:100vh;padding:80px 20px 140px;display:flex;overflow-y:scroll}.scroll-container::-webkit-scrollbar{display:none}.letter-card{background:#fffdf9;border:1px solid #eadecb;border-radius:16px;flex-direction:column;width:100%;max-width:680px;margin-top:5vh;padding:60px 50px;display:flex;position:relative;box-shadow:0 10px 40px #0000000a,0 2px 10px #00000005}.letter-card:after{content:"";pointer-events:none;border:1px dashed #d4af3766;border-radius:12px;position:absolute;inset:16px}.letter-title{font-family:var(--font-cursive);color:var(--accent-pink);text-align:center;margin-bottom:40px;font-size:3.5rem}.letter-body{font-family:var(--font-serif);color:var(--text-primary);text-align:justify;margin-bottom:50px;font-size:1.35rem;line-height:2.1}.reveal-word{will-change:opacity, transform, filter;margin-right:.25em;transition:opacity .15s ease-out,transform .15s ease-out,filter .15s ease-out,color .3s;display:inline-block}.audio-control{z-index:100;background:var(--bg-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-light);width:50px;height:50px;box-shadow:var(--shadow-soft);cursor:pointer;color:var(--accent-pink);border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:flex;position:fixed;top:25px;right:25px}.audio-control:hover{transform:scale(1.1);box-shadow:0 6px 15px #ff759740}.music-disc{animation:8s linear infinite spinDisc}.music-disc.paused{animation-play-state:paused}@keyframes spinDisc{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.scroll-progress-sidebar{z-index:100;background:#ff759726;border-radius:2px;width:2px;height:70%;position:fixed;top:15%;right:40px}.progress-cake-tracker{border:2px solid var(--accent-pink);width:32px;height:32px;color:var(--accent-pink);background:#fff;border-radius:50%;justify-content:center;align-items:center;font-size:.9rem;transition:top .1s ease-out;display:flex;position:absolute;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 10px #ff759733}.progress-percentage{font-family:var(--font-sans);color:var(--text-muted);white-space:nowrap;font-size:.8rem;font-weight:600;position:absolute;right:42px}.scroll-hint{font-family:var(--font-sans);color:var(--text-muted);flex-direction:column;align-items:center;gap:8px;margin-top:30px;font-size:.9rem;transition:opacity .5s;animation:2s infinite bounceHint;display:flex}@keyframes bounceHint{0%,to{transform:translateY(0)}50%{transform:translateY(8px)}}.cake-section{border-top:1px dashed #eadecb;flex-direction:column;align-items:center;width:100%;margin-top:50px;padding-top:40px;display:flex}.cake-title{font-family:var(--font-cursive);color:var(--accent-pink);text-align:center;white-space:nowrap;margin-bottom:20px;font-size:2.5rem}.cake-wrapper{cursor:pointer;flex-direction:column;justify-content:flex-end;align-items:center;width:200px;height:200px;display:flex;position:relative}.cake-layer{border-radius:10px 10px 4px 4px;width:180px;height:50px;position:relative;box-shadow:0 4px 8px #0000000d}.cake-layer-bottom{background:#f7d6e0;width:180px}.cake-layer-top{z-index:2;background:#fcf6bd;border-radius:8px 8px 4px 4px;width:140px;height:45px;margin-bottom:-2px}.cream-drips{justify-content:space-around;height:15px;display:flex;position:absolute;top:0;left:10px;right:10px}.drip{background:#ffb7c5;border-radius:50%;width:12px;height:12px;margin-top:4px}.cake-topping{z-index:3;margin-bottom:4px;font-size:1.5rem}.candle-container{z-index:4;gap:15px;margin-bottom:2px;display:flex}.candle{background:linear-gradient(90deg,#ff7597,#ffb7c5);border-radius:2px;width:8px;height:35px;position:relative}.candle-wick{background:#333;width:2px;height:6px;position:absolute;top:-6px;left:3px}.candle-flame{cursor:pointer;background:radial-gradient(circle at bottom,#ff9e00,#f05);border-radius:50% 50% 20% 20%/60% 60% 40% 40%;width:12px;height:15px;animation:.8s infinite alternate flicker;position:absolute;top:-18px;left:-2px;box-shadow:0 0 10px #ff9e00cc}@keyframes flicker{0%{transform:scale(1)rotate(-1deg)}to{transform:scale(1.1)rotate(1deg)}}.cake-btn{background:linear-gradient(135deg, var(--accent-pink), var(--accent-rose));color:#fff;font-family:var(--font-sans);cursor:pointer;border:none;border-radius:30px;align-items:center;gap:8px;margin-top:30px;padding:12px 30px;font-size:.95rem;font-weight:600;transition:all .3s;display:flex;box-shadow:0 5px 15px #ff759733}.cake-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #ff75974d}.transition-overlay{z-index:1000;color:#fff;font-family:var(--font-cursive);background:linear-gradient(135deg,#ffb7c5,#ffe3e8,#fbc6d0);justify-content:center;align-items:center;font-size:4rem;display:flex;position:fixed;inset:0}@media (width<=768px){.flip-card-container{width:90%;max-width:360px;height:520px}.card-front,.card-back{padding:30px 20px}.ribbon{font-size:2.8rem}.letter-card{margin-top:2vh;padding:40px 24px}.letter-title{margin-bottom:25px;font-size:2.6rem}.letter-body{font-size:1.15rem;line-height:1.8}.scroll-progress-sidebar{right:12px}.progress-cake-tracker{width:26px;height:26px;font-size:.75rem}.progress-percentage{right:32px}.cake-title{font-size:1.6rem}}