.onboarding-container{width:100%;max-width:430px;height:100vh;margin:0 auto;position:relative;overflow:hidden}.onboarding-container .steps-wrapper{width:600%;height:100%;transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex}.onboarding-container .steps-wrapper .step-slide{flex-direction:column;flex-shrink:0;width:100vw;max-width:430px;padding:40px 28px;display:flex;overflow:hidden auto}.onboarding-container .steps-wrapper .step-slide.animate-next{animation:.4s cubic-bezier(.4,0,.2,1) forwards slideInRight}.onboarding-container .steps-wrapper .step-slide.animate-prev{animation:.4s cubic-bezier(.4,0,.2,1) forwards slideInLeft}@keyframes slideInRight{0%{opacity:0;transform:translate(60px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-60px)}to{opacity:1;transform:translate(0)}}.step{flex-direction:column;flex:1;display:flex}.highlight{background:linear-gradient(#0000 60%,#d4e8f7 60%)}.btn{cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;height:46px;padding:0 24px;font-size:16px;font-weight:500;transition:opacity .2s,transform .1s;display:flex}.btn:active{transform:scale(.98)!important}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.btn-primary{color:#fff;background:#000}.btn.btn-secondary{background:#e1eff7}.btn.btn-full{align-self:center;width:100%}
.step-splash{text-align:center;background:radial-gradient(#e8f4fd 0%,#fff 70%);justify-content:space-between;align-items:center}.step-splash .splash-content{flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.step-splash .splash-content .splash-icon-wrapper{width:556px;height:597.79px;margin-bottom:16px;animation:.8s ease-out forwards fadeInScale;position:relative}.step-splash .splash-content .splash-icon-wrapper img{width:100%;height:auto;animation:3s ease-in-out .8s infinite float;display:block}.step-splash .splash-content .splash-icon-wrapper .splash-tagline{opacity:.6674;color:#4e4848;letter-spacing:2.5px;text-transform:uppercase;opacity:0;font-size:29px;font-style:normal;line-height:normal;animation:.6s ease-out .4s forwards fadeInUpTagline;position:absolute;top:351px;left:50%;transform:translate(-50%)}.step-splash .splash-brand{opacity:0;padding-bottom:40px;animation:.6s ease-out .6s forwards fadeInUp}.step-splash .splash-brand .brand-name{color:#4e4848;letter-spacing:2.5px;text-transform:uppercase;font-size:30px;font-style:normal;font-weight:600;line-height:normal}.step-splash .splash-brand .brand-name .brand-ai{color:#567cf7}.step-splash .splash-brand .brand-url{color:#4e4848;text-align:center;letter-spacing:7px;text-transform:uppercase;margin-top:13px;font-family:PingFang SC;font-size:10px;font-style:normal;font-weight:300;line-height:normal}.step-splash .btn-primary{animation:2s ease-in-out 1.2s infinite pulse}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUpTagline{0%{opacity:0;transform:translate(-50%)translateY(20px)}to{opacity:.6674;transform:translate(-50%)translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}
.step-welcome{padding-top:16px}.step-welcome .welcome-icon{width:140px;margin:0 auto;animation:.5s ease-out forwards fadeInDown}.step-welcome .welcome-icon svg{width:100%;height:auto}.step-welcome .welcome-content{flex:1}.step-welcome .welcome-content .welcome-greeting{opacity:0;margin-bottom:24px;font-size:24px;font-weight:600;line-height:37px;animation:.5s ease-out .1s forwards fadeInUp}.step-welcome .welcome-content .welcome-intro{opacity:0;margin-bottom:32px;padding:0 2px;font-size:24px;font-weight:600;line-height:37px;animation:.5s ease-out .2s forwards fadeInUp}.step-welcome .welcome-content .welcome-question{opacity:0;font-size:24px;font-weight:600;line-height:37px;animation:.5s ease-out .3s forwards fadeInUp}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.step-nickname{padding-top:46px}.step-nickname .step-title{opacity:0;margin-bottom:22px;font-size:24px;font-weight:600;line-height:37px;animation:.5s ease-out forwards fadeInUp}.step-nickname .input-nickname{opacity:0;background:#f5f5f5;border:none;border-radius:24px;outline:none;align-self:center;gap:10px;width:100%;height:46px;margin-bottom:30px;padding:13px 172px 12px 21px;font-size:14px;font-weight:400;line-height:normal;animation:.5s ease-out .1s forwards fadeInUp}.step-nickname .input-nickname:focus{background:#f6f6f7}.step-nickname .input-nickname::placeholder{color:#999}.step-nickname .btn{opacity:0;animation:.5s ease-out .2s forwards fadeInUp}.step-nickname .btn:nth-of-type(2){animation-delay:.3s}.step-nickname .btn:disabled{opacity:.5!important}@keyframes fadeInUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.step-interests{padding-top:46px}.step-interests .interests-intro{opacity:0;margin-bottom:32px;font-size:24px;font-weight:600;line-height:37px;animation:.5s ease-out forwards fadeInUp}.step-interests .interests-grid{opacity:0;flex-wrap:wrap;flex:1;align-content:flex-start;gap:12px;animation:.5s ease-out .1s forwards fadeInUp;display:flex}.step-interests .interests-grid .interest-tag{color:#3f3f3f;cursor:pointer;background:#f6f6f7;border:none;border-radius:25px;padding:17px 36px;font-size:14px;font-weight:700;line-height:normal;transition:all .2s}.step-interests .interests-grid .interest-tag.active{background:var(--tingshu2,#e1eff7);color:var(--heise,#000);border-radius:25px;gap:10px;padding:17px 36px;font-size:14px;font-weight:700;line-height:normal}.step-interests .interests-grid .interest-tag:hover{background:#e8f4fd}.step-interests .btn{opacity:0;animation:.5s ease-out .2s forwards fadeInUp}.step-interests .btn:disabled{opacity:.5!important}@keyframes fadeInUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.step-complete{padding-top:46px}.step-complete .complete-title{color:#000;opacity:0;margin-bottom:32px;font-size:24px;font-weight:600;line-height:35px;animation:.5s ease-out forwards fadeInUp}.step-complete .complete-item{box-sizing:border-box;opacity:0;border-radius:11px;flex-wrap:wrap;align-items:center;margin-bottom:35px;padding:10px 16px;font-size:20px;font-weight:500;line-height:35px;animation:.5s ease-out forwards fadeInUp;display:flex;position:relative}.step-complete .complete-item:first-of-type{animation-delay:.1s}.step-complete .complete-item:nth-of-type(2){animation-delay:.2s}.step-complete .complete-item .check-icon{width:20px;height:20px;position:absolute;top:18px;left:16px}.step-complete .complete-item.complete-item-highlight{background:#e1eff763}.step-complete .complete-item .voice-selector{background:#f6f6f7;border-radius:25px;flex-shrink:0;align-items:center;gap:10px;height:37px;padding:0 12px;display:flex}.step-complete .complete-item .voice-selector .voice-selector-avatar{width:24px;height:24px}.step-complete .complete-item .voice-selector .gentle{color:#3f3f3f;font-size:14px;font-weight:700;line-height:normal}.step-complete .complete-footer{opacity:0;font-size:24px;font-weight:600;line-height:37px;animation:.5s ease-out .3s forwards fadeInUp}@keyframes fadeInUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.step-premium{padding-top:120px;position:relative}.step-premium .btn-close{cursor:pointer;opacity:0;justify-content:center;align-items:center;width:42px;height:42px;animation:.4s ease-out forwards fadeIn;display:flex;position:fixed;top:39px;right:32px}.step-premium .premium-header{opacity:0;margin-bottom:41px;animation:.5s ease-out .1s forwards fadeInUp;position:relative}.step-premium .premium-header svg{width:464px;margin-bottom:16px}.step-premium .premium-header img{z-index:-1;position:fixed;top:-171px;left:-140px}.step-premium .premium-header .premium-title{font-size:30px;font-weight:600;line-height:37px}.step-premium .premium-desc{opacity:0;margin-bottom:35px;font-size:18px;font-weight:400;line-height:28px;animation:.5s ease-out .2s forwards fadeInUp}.step-premium .premium-features .premium-features-title{opacity:0;font-size:16px;font-weight:600;line-height:36px;animation:.5s ease-out .3s forwards fadeInUp}.step-premium .premium-features .premium-feature-item{color:#2b4059bd;opacity:0;justify-content:space-between;align-items:center;font-size:14px;font-weight:500;line-height:36px;animation:.4s ease-out forwards fadeInUp;display:flex}.step-premium .premium-features .premium-feature-item:first-of-type{animation-delay:.35s}.step-premium .premium-features .premium-feature-item:nth-of-type(2){animation-delay:.4s}.step-premium .premium-features .premium-feature-item:nth-of-type(3){animation-delay:.45s}.step-premium .premium-features .premium-feature-item:nth-of-type(4){animation-delay:.5s}.step-premium .premium-features .premium-feature-item:nth-of-type(5){animation-delay:.55s}.step-premium .premium-features .premium-feature-item:last-child{border-bottom:none}.step-premium .btn{opacity:0;animation:.5s ease-out .6s forwards fadeInUp}.step-premium .premium-disclaimer{color:#00000068;opacity:0;margin-top:48px;font-size:10px;font-weight:400;line-height:14px;animation:.5s ease-out .7s forwards fadeIn}@keyframes fadeInUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.premium-heart{color:#4a90d9}
