.welcome-overlay{padding:26px 18px;background:#2116378c;backdrop-filter:blur(8px);z-index:100;overflow-y:auto}
.welcome-modal{position:relative;width:min(880px,100%);max-height:calc(100dvh - 52px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid #ffffffa6;border-radius:26px;box-shadow:0 30px 100px #21163740;padding:30px;animation:welcome-enter .45s ease both;color:var(--ink)}
.welcome-close{position:absolute;inset-inline-end:18px;top:18px;z-index:2;background:#f7f5fb;border-color:transparent}
.welcome-heading{padding-inline-end:35px}
.welcome-wordmark{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#7962a8}
.welcome-wordmark .brand-mark{width:33px;height:33px;border-radius:11px;font-size:23px;box-shadow:0 5px 14px #7860d729}
.welcome-heading h1{font-size:30px;line-height:1.5;letter-spacing:-.6px;margin:13px 0 7px;color:#46315f}
.welcome-heading>p{max-width:660px;color:#82758e;font-size:14px;line-height:1.9}
.welcome-tour{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:25px 0 20px;align-items:center}
.welcome-demo{position:relative;isolation:isolate;display:flex;justify-content:center;align-items:center;min-height:302px;border-radius:21px;overflow:hidden;background:radial-gradient(ellipse at 20% 20%,#fbefda 0,transparent 52%),linear-gradient(140deg,#f3edfd,#ede8fa)}
.welcome-orbit{position:absolute;z-index:-1;width:280px;height:280px;border:1px solid #cfc1e859;border-radius:50%;transform:rotate(-20deg)}
.orbit-two{width:365px;height:365px;border-style:dashed}.orbit-one{width:190px;height:190px;inset-inline-start:-65px;top:-60px}
.welcome-demo-scene{width:80%;max-width:280px;animation:welcome-scene .55s ease both}
.welcome-demo-card{background:#ffffffed;border:1px solid #fff;border-radius:17px;padding:19px;box-shadow:0 15px 35px #6b4f9b14;min-height:234px}
.demo-card-top,.demo-card-top>span{display:flex;align-items:center;gap:6px}.demo-card-top{justify-content:space-between;color:#8b7a9d;font-size:10px}.demo-card-top .icon{width:14px;height:14px}
.demo-timer{background:#f3eefb;color:#8a6bb4;padding:5px;border-radius:7px}.demo-question-number{font-size:11px;color:#ad95c3;margin:15px 0 5px}.demo-question{font-size:18px;color:#59466c;display:block}
.demo-options{display:grid;gap:7px;margin-top:14px}.demo-options>span{display:flex;align-items:center;gap:7px;border:1px solid #ede7f4;border-radius:8px;padding:6px 9px;font-size:12px;color:#9887a6}.demo-options i{width:11px;height:11px;border-radius:50%;border:1px solid #d9cce7}.demo-options .icon{margin-inline-start:auto;width:14px;height:14px}
.demo-options .demo-option-selected{border-color:#a18aca;background:#f2ecfc;color:#7860a4;animation:welcome-select 2.6s ease infinite}.demo-option-selected i{background:#9d82c5;border-color:#9d82c5}
.demo-caption{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:14px;font-size:10px;color:#9c8ca9;line-height:1.5}.demo-caption .icon{width:13px;height:13px}.demo-caption .dot{background:#85b49c}
.welcome-float{position:absolute;display:flex;align-items:center;justify-content:center;background:white;border:1px solid #eee5f5;border-radius:14px;box-shadow:0 8px 18px #6b4f9b0d;animation:welcome-float 4s ease-in-out infinite}
.float-question{top:22px;inset-inline-start:16px;transform:rotate(-12deg);width:43px;height:43px;font-size:24px;font-weight:800;color:#9c7cc7}.float-spark{bottom:23px;inset-inline-end:14px;width:37px;height:37px;color:#ca9e64;animation-delay:-2s}
.join-demo,.results-demo{text-align:center}.demo-big-icon{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:10px;background:#f1ebfb;color:#a185c6;margin:0 auto 10px}.demo-label{display:block;font-size:10px;color:#9a88aa;line-height:1.7}.demo-code{display:block;font-family:'DM Sans',sans-serif;font-size:32px;font-weight:700;letter-spacing:4px;color:#795ba4;margin:9px 0 17px}
.demo-people{display:flex;justify-content:center;gap:12px}.demo-people>span{display:flex;align-items:center;flex-direction:column;gap:5px;font-size:9px;color:#95829f;animation:welcome-person 3s ease infinite;animation-delay:calc(var(--person)*.4s)}.demo-people i{font-style:normal;border-radius:50%;display:grid;place-items:center;width:32px;height:32px;background:#ede7fa;color:#9d80c4;font-size:15px}.demo-people>span:nth-child(2) i{background:#f9efdf;color:#bd9e71}.demo-people>span:nth-child(3) i{background:#e5f2eb;color:#86aa97}.demo-people .icon{width:11px;height:11px;color:#83ac91}
.demo-score{display:flex;align-items:baseline;justify-content:center;gap:5px;margin:10px 0}.demo-score strong{font-size:32px;color:#8561b0}.demo-score>span{font-size:10px;color:#9b8ca7}.demo-bars{display:flex;align-items:flex-end;justify-content:center;gap:13px;height:59px;border-bottom:1px solid #eee7f3;padding:0 15px}.demo-bars>span{width:29px;height:var(--bar-height);display:block;position:relative}.demo-bars i{display:block;height:100%;background:#e8def5;border-radius:5px 5px 0 0;transform-origin:bottom;animation:welcome-bar 3s ease infinite}.demo-bars>span:nth-child(2) i{background:#a78bcd;animation-delay:.15s}
.welcome-tour-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:#9b8ca8;margin-bottom:12px;padding-inline:5px}.tour-play{width:29px;height:29px;border-radius:9px;background:#f9f6fd}.tour-play .icon{width:13px;height:13px}.pause-symbol{font-size:15px;line-height:1}
.welcome-step{width:100%;text-align:start;align-items:flex-start;justify-content:flex-start;gap:12px;background:transparent;border:1px solid transparent;border-radius:13px;padding:12px 10px;margin-bottom:5px;color:#8f819d;white-space:normal;transition:background .25s,border-color .25s}.welcome-step.active{background:#f7f3fe;border-color:#ece3f7;color:#75569c}.welcome-step-number{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:#f3eff8;color:#ac96c2;font-size:13px}.active .welcome-step-number{color:white;background:#9b7bc3}.welcome-step strong{display:block;font-size:14px;margin:1px 0 5px;line-height:1.5}.welcome-step-description{display:block;font-size:12px;line-height:1.85;color:#8b7b98}
.welcome-benefits{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 20px;padding:15px 5px;border-block:1px solid #f1ecf7}.welcome-benefits>span{display:flex;align-items:center;gap:6px;color:#9683a7;font-size:11px}.welcome-benefits .icon{width:15px;height:15px;color:#a48ac2}
.welcome-footer{padding-top:19px}.welcome-actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}.welcome-actions .btn{font-size:12px}.welcome-actions .btn-text{font-size:11px;color:#9f90ac}.welcome-footer>p{text-align:center;font-size:10px;color:#a698b1;margin-top:12px;line-height:1.7}
.welcome-paused .welcome-float,.welcome-paused .demo-people>span,.welcome-paused .demo-option-selected,.welcome-paused .demo-bars i{animation-play-state:paused!important}
@keyframes welcome-enter{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes welcome-scene{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes welcome-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes welcome-select{0%,20%,100%{box-shadow:0 0 0 0 #a18aca00}50%{box-shadow:0 0 0 3px #a18aca18}}
@keyframes welcome-person{0%,100%{transform:translateY(0)}35%{transform:translateY(-4px)}}
@keyframes welcome-bar{0%,100%{transform:scaleY(.8)}50%{transform:scaleY(1)}}
@media(max-width:620px){.welcome-overlay{padding:12px}.welcome-modal{max-height:calc(100dvh - 24px);padding:22px 17px;border-radius:20px}.welcome-close{top:12px;inset-inline-end:12px;width:32px;height:32px}.welcome-heading h1{font-size:24px;margin-top:12px}.welcome-heading>p{font-size:12px}.welcome-wordmark{font-size:11px;gap:7px}.welcome-wordmark .brand-mark{width:28px;height:28px;font-size:20px}.welcome-tour{grid-template-columns:1fr;gap:13px;margin:17px 0 12px}.welcome-demo{min-height:232px}.welcome-demo-scene{max-width:245px;width:75%}.welcome-demo-card{min-height:200px;padding:14px}.demo-question-number{margin-top:9px}.demo-question{font-size:16px}.demo-options{margin-top:10px;gap:5px}.demo-caption{margin-top:10px}.demo-code{font-size:29px;margin:8px 0 12px}.demo-big-icon{width:29px;height:29px;margin-bottom:6px}.demo-score{margin:6px 0}.demo-bars{height:45px}.welcome-step{padding:9px 8px;gap:10px;margin-bottom:3px}.welcome-step strong{font-size:13px;margin-bottom:3px}.welcome-step-description{font-size:11px}.welcome-tour-label{margin-bottom:5px}.welcome-benefits{gap:8px 12px;padding:11px 0}.welcome-benefits>span{font-size:10px}.welcome-actions{gap:8px}.welcome-actions .btn{padding:10px 13px;min-height:40px;font-size:11px}.welcome-actions .btn-text{width:100%;padding:4px}.welcome-footer{padding-top:14px}}
@media(prefers-reduced-motion:reduce){.welcome-modal,.welcome-modal *{animation:none!important;transition:none!important}}
.welcome-heading>p,.welcome-step-description{color:#766683}
.welcome-benefits>span,.welcome-footer>p,.welcome-tour-label{color:#7e6a8d}
@media(max-width:620px){.welcome-step:not(.active) .welcome-step-description{display:none}}