@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Caveat:wght@500;600;700&display=swap";:root{--sky-top:#a8d8ea;--sky-mid:#c9e4f2;--sky-bottom:#e8f4f8;--cloud:#ffffffd9;--white:#fff;--card-bg:#fff;--text-primary:#2d3436;--text-secondary:#636e72;--text-soft:#b2bec3;--accent:#fd79a8;--accent-light:#fff0f5;--accent-soft:#ffeef5;--blue-soft:#74b9ff;--mint:#55efc4;--peach:#ffeaa7;--lavender:#a29bfe;--font-body:"Nunito", sans-serif;--font-hand:"Caveat", cursive;--radius:24px;--phone-radius:40px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font-body);color:var(--text-primary);-webkit-font-smoothing:antialiased}.sky{z-index:0;background:linear-gradient(#87ceeb 0%,#a8d8ea 25%,#c9e4f2 55%,#e8f4f8 80%,#f0f9ff 100%);position:fixed;inset:0;overflow:hidden}.cloud{background:var(--cloud);filter:blur(1px);border-radius:100px;position:absolute}.cloud:before,.cloud:after{content:"";background:inherit;border-radius:50%;position:absolute}.cloud-1{width:160px;height:48px;animation:35s linear infinite drift;top:8%;left:-10%}.cloud-1:before{width:60px;height:60px;top:-30px;left:25px}.cloud-1:after{width:80px;height:70px;top:-35px;left:60px}.cloud-2{opacity:.7;width:120px;height:36px;animation:45s linear -10s infinite drift;top:18%;left:-8%}.cloud-2:before{width:50px;height:50px;top:-25px;left:15px}.cloud-2:after{width:65px;height:55px;top:-28px;left:45px}.cloud-3{opacity:.5;width:180px;height:50px;animation:50s linear -25s infinite drift;top:30%;left:-12%}.cloud-3:before{width:70px;height:65px;top:-32px;left:30px}.cloud-3:after{width:90px;height:75px;top:-38px;left:70px}.cloud-4{opacity:.6;width:100px;height:30px;animation:40s linear -18s infinite drift;top:12%;left:-6%}.cloud-4:before{width:40px;height:40px;top:-20px;left:12px}.cloud-4:after{width:55px;height:45px;top:-22px;left:35px}@keyframes drift{0%{transform:translate(0)}to{transform:translate(calc(100vw + 200px))}}.sun{background:radial-gradient(circle,#ffeaa7 30%,#ffeaa700 70%);border-radius:50%;width:70px;height:70px;animation:4s ease-in-out infinite sun-pulse;position:absolute;top:5%;right:8%}@keyframes sun-pulse{0%,to{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}.birds{animation:20s linear infinite birds-fly;position:absolute;top:15%;left:30%}@keyframes birds-fly{0%{transform:translate(0)translateY(0)}50%{transform:translate(30vw)translateY(-15px)}to{transform:translate(60vw)translateY(5px)}}.phone-wrapper{z-index:1;justify-content:center;align-items:center;height:100%;padding:24px 16px;display:flex;position:relative}.phone{background:var(--card-bg);border-radius:var(--phone-radius);flex-direction:column;width:100%;max-width:380px;height:min(92vh,760px);display:flex;position:relative;overflow:hidden;box-shadow:0 20px 60px #0000001f,0 8px 24px #00000014,inset 0 1px #fffc}.phone:before{content:"";background:var(--card-bg);z-index:5;border-radius:0 0 18px 18px;width:120px;height:28px;position:absolute;top:0;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000000a}.phone-status{flex-shrink:0;height:48px}.phone-content{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;flex:1;padding:0 24px 32px;overflow:hidden auto}.phone-content::-webkit-scrollbar{width:0}.phone-home{flex-shrink:0;justify-content:center;align-items:center;height:28px;padding-bottom:8px;display:flex}.phone-home-bar{background:var(--text-soft);opacity:.4;border-radius:2px;width:100px;height:4px}.progress{justify-content:center;align-items:center;gap:8px;padding:8px 0 24px;display:flex}.dot{background:#e0e0e0;border-radius:50%;width:8px;height:8px;transition:all .4s cubic-bezier(.4,0,.2,1)}.dot.active{background:var(--accent);border-radius:4px;width:24px}.dot.done{background:var(--blue-soft)}@keyframes pop-in{0%{opacity:0;transform:scale(.8)translateY(16px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes fade-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.anim-pop{animation:.5s cubic-bezier(.34,1.56,.64,1) both pop-in}.anim-fade{animation:.45s ease-out both fade-up}.anim-d1{animation-delay:.1s}.anim-d2{animation-delay:.2s}.anim-d3{animation-delay:.3s}.anim-d4{animation-delay:.4s}.anim-d5{animation-delay:.5s}.anim-d6{animation-delay:.6s}.step{text-align:center}.step-icon{margin-bottom:12px;font-size:52px;animation:3s ease-in-out infinite float;display:block}.step-tag{letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:20px;margin-bottom:14px;padding:4px 14px;font-size:11px;font-weight:700;display:inline-block}.step-title{font-family:var(--font-hand);color:var(--text-primary);margin-bottom:16px;font-size:32px;font-weight:700;line-height:1.15}.step-desc{color:var(--text-secondary);margin-bottom:24px;font-size:14px;font-weight:500;line-height:1.7}.cute-list{text-align:left;flex-direction:column;gap:10px;margin-bottom:24px;list-style:none;display:flex}.cute-list li{color:var(--text-secondary);background:#fafbfc;border:1px solid #f0f0f0;border-radius:16px;align-items:flex-start;gap:12px;padding:14px 16px;font-size:13.5px;font-weight:500;line-height:1.55;transition:transform .2s,background .2s;display:flex}.cute-list li:hover{background:#f8f9fa;transform:translateY(-1px)}.cute-list .item-dot{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;display:flex}.dot-pink{background:#fff0f5}.dot-blue{background:#eef6ff}.dot-mint{background:#edfff8}.dot-peach{background:#fff8ef}.dot-lavender{background:#f3f0ff}.btn-primary{background:var(--accent);width:100%;color:var(--white);font-family:var(--font-body);cursor:pointer;border:none;border-radius:16px;padding:15px 24px;font-size:15px;font-weight:700;transition:all .2s;box-shadow:0 4px 14px #fd79a840}.btn-primary:hover{background:#f66c9b;transform:translateY(-1px);box-shadow:0 6px 20px #fd79a859}.btn-primary:active{transform:translateY(0)}.btn-ghost{width:100%;color:var(--text-soft);font-family:var(--font-body);cursor:pointer;background:0 0;border:none;border-radius:16px;margin-top:6px;padding:12px 24px;font-size:13px;font-weight:600;transition:color .2s}.btn-ghost:hover{color:var(--text-secondary)}.welcome-img{border-radius:50%;width:140px;height:140px;margin:0 auto 16px;overflow:hidden}.welcome-img img{object-fit:cover;width:100%;height:100%;display:block}.welcome-title{font-family:var(--font-hand);color:var(--text-primary);margin-bottom:6px;font-size:38px;font-weight:700;line-height:1.1}.welcome-sub{color:var(--text-secondary);margin-bottom:28px;font-size:15px;font-weight:500}.welcome-deco{justify-content:center;gap:16px;margin-bottom:28px;font-size:28px;display:flex}.welcome-deco span{animation:2.5s ease-in-out infinite float}.welcome-deco span:nth-child(2){animation-delay:.3s}.welcome-deco span:nth-child(3){animation-delay:.6s}.wish-section{text-align:center}.wish-textarea{width:100%;min-height:120px;font-family:var(--font-body);color:var(--text-primary);resize:vertical;background:#fafbfc;border:2px solid #f0f0f0;border-radius:16px;outline:none;margin-bottom:16px;padding:16px;font-size:14px;line-height:1.6;transition:border-color .2s}.wish-textarea:focus{border-color:var(--accent);background:var(--white)}.wish-textarea::placeholder{color:var(--text-soft)}.frame-container{aspect-ratio:3/4;background:#fafbfc;border:none;border-radius:24px;width:100%;margin-bottom:24px;position:relative;overflow:hidden;box-shadow:0 12px 28px #00000014,0 4px 10px #0000000a}.vn-frame{cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;width:100%;height:100%;transition:background .8s;display:flex;position:relative;overflow:hidden}.vn-header{z-index:10;justify-content:space-between;align-items:center;display:flex;position:absolute;top:10px;left:12px;right:12px}.vn-episode{text-transform:uppercase;color:#ffffffe6;letter-spacing:.8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000004d;border-radius:20px;padding:4px 10px;font-size:10px;font-weight:800}.vn-skip-btn{font-family:var(--font-body);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000059;border:none;border-radius:12px;padding:4px 10px;font-size:10px;font-weight:700;transition:all .2s}.vn-skip-btn:hover{background:#00000080;transform:scale(1.05)}.vn-stage{z-index:2;flex:1;justify-content:space-evenly;align-items:flex-end;padding:0 8px 16px;display:flex;position:relative}.vn-character-wrapper{flex-direction:column;align-items:center;width:68px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex}.vn-character-wrapper.inactive{opacity:.4;filter:grayscale(20%);transform:scale(.85)}.vn-character-wrapper.active{opacity:1;transform:scale(1)}.vn-character-wrapper.speaking{z-index:3;transform:scale(1.22)translateY(-12px)}.vn-character-wrapper.speaking .vn-avatar-container{border-color:var(--accent);animation:.5s vn-speaker-bounce;box-shadow:0 8px 24px #fd79a859,0 0 0 3px #fd79a833}.vn-avatar-container{background:#fff;border:3px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:58px;height:58px;transition:all .3s;display:flex;overflow:hidden;box-shadow:0 4px 10px #0000001f}.vn-avatar-img{object-fit:contain;width:105%;height:105%;margin-top:4px}.vn-char-tag{color:#fff;text-shadow:0 1px 1px #00000026;border-radius:10px;margin-top:6px;padding:2px 6px;font-size:8px;font-weight:800;box-shadow:0 2px 6px #0000001a}.vn-char-tag.orange{background:#ff9f43}.vn-char-tag.purple{background:#a29bfe}.vn-char-tag.blue{background:#74b9ff}.vn-char-tag.pink{background:#fd79a8}.vn-dialogue-box{z-index:5;-webkit-backdrop-filter:blur(12px);background:#ffffffe0;border-top:1px solid #ffffff73;flex-direction:column;gap:6px;min-height:124px;padding:14px 16px;display:flex;position:relative;box-shadow:0 -4px 20px #00000008}.vn-dialogue-top{justify-content:space-between;align-items:center;display:flex}.vn-speaker-label{font-family:var(--font-hand);font-size:20px;font-weight:700;line-height:1}.speaker-narrator{color:#475569;font-style:italic}.speaker-oyen{color:#e67e22}.speaker-bobon{color:#8e44ad}.speaker-tamtam{color:#2980b9}.speaker-yeyen{color:#d81b60}.speaker-all{color:#f36;animation:3s linear infinite vn-rainbow-text}.vn-controls{gap:6px;display:flex}.vn-control-btn{width:22px;height:22px;color:var(--text-secondary);cursor:pointer;background:#0000000d;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:9px;transition:all .2s;display:flex}.vn-control-btn:hover{color:var(--text-primary);background:#0000001f;transform:scale(1.08)}.vn-dialogue-body{flex-direction:column;flex:1;justify-content:space-between;display:flex;position:relative}.vn-text{color:var(--text-primary);text-align:left;margin-right:14px;font-size:13px;font-weight:600;line-height:1.55}.vn-indicator{color:var(--accent);font-size:9px;animation:.6s infinite alternate vn-indicator-blink;position:absolute;bottom:0;right:-2px}.vn-restart-inner{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:12px;align-self:flex-start;margin-top:6px;padding:5px 12px;font-size:10px;font-weight:700;transition:all .2s;box-shadow:0 3px 8px #fd79a840}.vn-restart-inner:hover{background:#f66c9b;transform:translateY(-1px)}.vn-progress-bar{z-index:5;background:#0000000d;width:100%;height:4px}.vn-progress-fill{background:var(--accent);height:100%;transition:width .3s}@keyframes vn-indicator-blink{0%{opacity:.3;transform:translateY(0)}to{opacity:1;transform:translateY(2px)}}@keyframes vn-speaker-bounce{0%,to{transform:translateY(0)}40%{transform:translateY(-8px)}70%{transform:translateY(3px)}}@keyframes vn-rainbow-text{0%{color:#fd79a8}33%{color:#ffeaa7}66%{color:#74b9ff}to{color:#fd79a8}}.vn-particle{pointer-events:none;position:absolute}.animate-float{animation:linear infinite vn-particle-rise}@keyframes vn-particle-rise{0%{opacity:0;transform:translateY(120px)rotate(0)scale(.6)}15%{opacity:.9}90%{opacity:.9}to{opacity:0;transform:translateY(-240px)rotate(360deg)scale(1.1)}}.final-card{background:linear-gradient(135deg,#fff0f5 0%,#eef6ff 100%);border:1px solid #fd79a81a;border-radius:20px;margin-bottom:20px;padding:24px 20px}.final-card p{color:var(--text-secondary);margin-bottom:8px;font-size:14px;font-weight:500;line-height:1.7}.final-card p:last-child{margin-bottom:0}.signature{font-family:var(--font-hand);color:var(--accent);margin-top:16px;font-size:24px;font-weight:700}.user-wish-display{background:var(--white);text-align:left;border:1px solid #f0f0f0;border-radius:16px;margin-bottom:20px;padding:16px}.user-wish-display .uw-label{text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:6px;font-size:11px;font-weight:700}.user-wish-display .uw-text{color:var(--text-secondary);font-size:14px;font-style:italic;font-weight:500;line-height:1.6}@media (width<=420px){.phone{border-radius:0;max-width:100%;height:100dvh}.phone:before{display:none}.phone-wrapper{padding:0}.phone-home{display:none}.phone-status{height:32px}}