.onboarding-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9990;display:flex;align-items:center;justify-content:center}.onboarding-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.welcome-modal{position:relative;width:90%;max-width:520px;max-height:90vh;background:linear-gradient(145deg,#1e1e32fa,#0f0f1efa);border:1px solid rgba(139,92,246,.3);border-radius:20px;overflow:hidden;animation:modalAppear .5s cubic-bezier(.16,1,.3,1);box-shadow:0 25px 80px #00000080,0 0 60px #8b5cf626}@keyframes modalAppear{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.welcome-bg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.welcome-bg__orbit{position:absolute;border:1px solid rgba(139,92,246,.15);border-radius:50%;animation:orbitSpin 20s linear infinite}.orbit-1{width:300px;height:300px;top:-100px;right:-100px;animation-duration:25s}.orbit-2{width:200px;height:200px;bottom:-50px;left:-50px;animation-duration:18s;animation-direction:reverse}.orbit-3{width:150px;height:150px;top:50%;left:50%;transform:translate(-50%,-50%);animation-duration:12s}.welcome-bg__core{position:absolute;width:100px;height:100px;top:-30px;right:-30px;background:radial-gradient(circle,rgba(139,92,246,.3) 0%,transparent 70%);animation:corePulse 3s ease-in-out infinite}@keyframes orbitSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes corePulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.welcome-content{position:relative;z-index:1;padding:32px;display:flex;flex-direction:column;gap:24px}.welcome-header{text-align:center}.welcome-icon{display:flex;justify-content:center;margin-bottom:16px;color:var(--accent-purple, #a855f7)}.welcome-title{font-size:1.75rem;font-weight:700;background:linear-gradient(135deg,var(--accent-purple, #a855f7),var(--color-success, #10b981));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 8px}.welcome-subtitle{font-size:.95rem;color:var(--text-secondary, #94a3b8);margin:0}.welcome-description{display:flex;flex-direction:column;gap:8px}.welcome-description__line{font-size:.9rem;color:var(--text-primary, #e2e8f0);margin:0;opacity:0;animation:fadeInUp .5s ease forwards}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.welcome-audiences{margin-top:8px}.welcome-audiences__label{font-size:.8rem;color:var(--text-muted, #64748b);margin:0 0 12px;text-transform:uppercase;letter-spacing:.05em}.welcome-audiences__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.welcome-audience-card{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#8b5cf626;border:1px solid rgba(139,92,246,.3);border-radius:10px;font-size:.85rem;color:#f1f5f9;font-weight:500;opacity:0;animation:fadeInUp .5s ease forwards}.welcome-audience-card__icon{font-size:1.2rem}.welcome-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px}.welcome-btn-start{width:100%;padding:14px 24px;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:8px}.welcome-btn-skip{align-self:center;font-size:.85rem;color:var(--text-muted, #64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:max-content}.welcome-btn-skip:hover{color:var(--text-secondary, #94a3b8)}.welcome-hint{text-align:center;font-size:.8rem;color:var(--text-muted, #64748b);margin:0}.welcome-lang-switch{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:4px;padding:8px 12px;background:#8b5cf626;border:1px solid rgba(139,92,246,.3);border-radius:8px;font-size:.85rem;color:var(--text-secondary, #94a3b8);cursor:pointer;transition:all .3s ease;z-index:10}.welcome-lang-switch:hover{background:#8b5cf640;border-color:#8b5cf680}.welcome-lang-switch span.active{color:var(--accent-purple, #a855f7);font-weight:600}.welcome-lang-switch .divider{color:var(--text-muted, #64748b)}.tutorial-step,.tutorial-tooltip{position:relative;max-width:360px;width:90%;padding:24px;background:#1e1e32fa;border:1px solid rgba(139,92,246,.3);border-radius:16px;animation:stepAppear .4s ease;box-shadow:0 20px 60px #0006;box-sizing:border-box;overflow-wrap:break-word;word-wrap:break-word}@keyframes stepAppear{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tutorial-step__progress{display:flex;gap:4px;margin-bottom:16px}.tutorial-step__dot{width:8px;height:8px;border-radius:50%;background:#8b5cf64d;transition:all .3s ease}.tutorial-step__dot.active{background:var(--accent-purple, #a855f7);transform:scale(1.2)}.tutorial-step__dot.completed{background:var(--color-success, #10b981)}.tutorial-step__icon{font-size:2.5rem;margin-bottom:12px}.tutorial-step__title{font-size:1.1rem;font-weight:600;color:var(--text-primary, #e2e8f0);margin:0 0 8px}.tutorial-step__description{font-size:.9rem;color:var(--text-secondary, #94a3b8);margin:0 0 20px;line-height:1.5}.tutorial-step__actions{display:flex;justify-content:space-between;gap:12px}.tutorial-progress{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.tutorial-progress__bar{display:flex;gap:6px}.tutorial-progress__dot{width:8px;height:8px;border-radius:50%;background:#8b5cf64d;transition:all .3s ease}.tutorial-progress__dot.active{background:var(--accent-purple, #a855f7);transform:scale(1.3)}.tutorial-progress__dot.completed{background:var(--color-success, #10b981)}.tutorial-progress__text{font-size:.75rem;color:var(--text-muted, #64748b);margin:0}.tutorial-content{margin-bottom:20px}.tutorial-title{font-size:1.15rem;font-weight:600;color:var(--text-primary, #e2e8f0);margin:0 0 12px}.tutorial-text{font-size:.9rem;color:var(--text-secondary, #94a3b8);line-height:1.6}.tutorial-text p{margin:0 0 8px;animation:fadeInUp .4s ease forwards;opacity:0}.tutorial-text strong{color:var(--accent-purple, #a855f7);font-weight:600}.tutorial-action{display:flex;align-items:center;gap:8px;margin-top:16px;padding:10px 14px;background:#8b5cf626;border:1px solid rgba(139,92,246,.3);border-radius:10px;font-size:.85rem;color:#f1f5f9}.tutorial-action__icon{font-size:1rem}.tutorial-action__text{flex:1}.tutorial-interactive{margin-top:12px;padding:8px 12px;border-radius:8px;font-size:.85rem}.tutorial-interactive__hint{display:flex;align-items:center;gap:8px;color:var(--text-muted, #64748b)}.tutorial-interactive__success{display:flex;align-items:center;gap:8px;color:var(--color-success, #10b981)}.tutorial-interactive__icon{font-size:1rem}.tutorial-nav{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.tutorial-nav__back,.tutorial-nav__skip,.tutorial-nav__next{padding:10px 16px;font-size:.85rem;white-space:nowrap;min-width:0}.tutorial-nav__back:disabled{opacity:.4;cursor:not-allowed}.tutorial-nav__skip{color:var(--text-muted, #64748b)}.tutorial-nav__next{background:linear-gradient(135deg,var(--accent-purple, #a855f7),var(--color-info, #3b82f6));color:#fff;border:none;border-radius:8px;font-weight:600}.onboarding-backdrop--dimmed{background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.onboarding-spotlight{position:absolute;border:2px solid rgba(139,92,246,.5);border-radius:12px;box-shadow:0 0 40px #8b5cf64d;pointer-events:none;z-index:1}.onboarding-spotlight--states{top:10%;left:2%;width:25%;height:80%}.onboarding-spotlight--cube{top:10%;left:30%;width:40%;height:80%}.onboarding-spotlight--classifier{bottom:5%;left:50%;transform:translate(-50%);width:50%;height:15%}.onboarding-spotlight--detail{top:10%;right:2%;width:25%;height:80%}.onboarding-highlight{position:relative;z-index:10;box-shadow:0 0 0 4px #8b5cf680,0 0 40px #8b5cf64d}.completion-screen,.completion-modal{position:relative;width:90%;max-width:400px;padding:40px;background:#1e1e32fa;border:1px solid rgba(16,185,129,.3);border-radius:20px;text-align:center;animation:completionAppear .6s cubic-bezier(.16,1,.3,1);box-shadow:0 25px 80px #00000080,0 0 60px #10b9811a;box-sizing:border-box}@keyframes completionAppear{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.confetti-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:10000}.confetti-piece{position:absolute;width:10px;height:10px;top:-20px;border-radius:2px;animation:confettiFall 4s ease-in-out forwards}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.completion-screen__confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.completion-icon{margin-bottom:24px}.completion-ring{transform-origin:center}.completion-ring.ring-1{animation:ringRotate 8s linear infinite}.completion-ring.ring-2{animation:ringRotate 6s linear infinite reverse}.completion-ring.ring-3{animation:ringRotate 4s linear infinite}@keyframes ringRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.completion-checkmark{stroke-dasharray:60;stroke-dashoffset:60;animation:checkmarkDraw .8s ease .3s forwards}@keyframes checkmarkDraw{to{stroke-dashoffset:0}}.completion-screen__icon{font-size:4rem;margin-bottom:20px;animation:iconBounce .8s ease}@keyframes iconBounce{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.completion-content{display:flex;flex-direction:column;gap:16px}.completion-title,.completion-screen__title{font-size:1.5rem;font-weight:700;color:var(--color-success, #10b981);margin:0 0 12px}.completion-message{display:flex;flex-direction:column;gap:8px}.completion-message__line{font-size:.9rem;color:var(--text-secondary, #94a3b8);margin:0;line-height:1.5;opacity:0;animation:fadeInUp .5s ease forwards}.completion-screen__description{font-size:.95rem;color:var(--text-secondary, #94a3b8);margin:0 0 24px}.completion-checklist{text-align:left;background:#10b9811a;border:1px solid rgba(16,185,129,.2);border-radius:12px;padding:16px}.completion-checklist__title{font-size:.85rem;font-weight:600;color:var(--color-success, #10b981);margin:0 0 12px;text-transform:uppercase;letter-spacing:.05em}.completion-checklist__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.completion-checklist__item{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--text-primary, #e2e8f0);opacity:0;animation:fadeInUp .4s ease forwards}.completion-checklist__icon{font-size:1rem}.completion-checklist__text{flex:1}.completion-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}.completion-hint{font-size:.8rem;color:var(--text-muted, #64748b);margin:8px 0 0}.onboarding-backdrop--celebration{background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.btn-primary{background:linear-gradient(135deg,var(--accent-purple, #a855f7),var(--color-info, #3b82f6));color:#fff;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;font-weight:600}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #8b5cf666}.btn-secondary{background:transparent;color:var(--text-secondary, #94a3b8);border:1px solid rgba(148,163,184,.3);border-radius:10px;cursor:pointer;transition:all .3s ease}.btn-secondary:hover{border-color:#94a3b880;color:var(--text-primary, #e2e8f0)}.btn-ghost{background:transparent;border:none;cursor:pointer;transition:color .3s ease}.btn-lg{padding:14px 28px;font-size:1rem}.btn-icon{margin-right:4px}@media (max-width: 768px){.tutorial-tooltip{max-width:90%;width:calc(100% - 32px);margin:0 16px;position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important}.tutorial-nav{flex-wrap:wrap;justify-content:center;gap:10px}.tutorial-nav__back,.tutorial-nav__skip,.tutorial-nav__next{padding:12px 14px;font-size:.85rem}.onboarding-spotlight{display:none}}@media (max-width: 640px){.welcome-modal{width:95%;max-width:95%;max-height:95vh;margin:0 auto}.welcome-content{padding:24px 20px;gap:20px}.welcome-title{font-size:1.4rem}.welcome-audiences__grid{grid-template-columns:1fr}.tutorial-step,.tutorial-tooltip{max-width:95%;width:calc(100% - 24px);margin:0 12px;padding:20px 16px}.tutorial-title{font-size:1.05rem}.tutorial-text{font-size:.85rem}.tutorial-nav{flex-direction:row;flex-wrap:wrap;gap:8px}.tutorial-nav__back{order:1;flex:0 0 auto}.tutorial-nav__skip{order:2;flex:1 1 auto;text-align:center}.tutorial-nav__next{order:3;flex:0 0 auto}}@media (max-width: 480px){.onboarding-overlay{padding:8px}.welcome-modal,.completion-modal{width:100%;max-width:100%;border-radius:16px;margin:8px}.completion-modal{padding:24px 16px}.completion-icon svg{width:80px;height:80px}.completion-title{font-size:1.25rem}.completion-message__line{font-size:.85rem}.completion-checklist{padding:12px}.completion-checklist__item{font-size:.8rem}.completion-btn{padding:12px 20px;font-size:.9rem}.completion-hint{font-size:.75rem}.welcome-content{padding:20px 16px;gap:16px}.welcome-title{font-size:1.25rem}.welcome-subtitle,.welcome-description__line{font-size:.85rem}.welcome-lang-switch{top:12px;right:12px;padding:6px 10px;font-size:.8rem}.tutorial-step,.tutorial-tooltip{width:calc(100% - 16px);max-width:100%;margin:0 8px;padding:16px 14px;border-radius:12px}.tutorial-progress__bar{flex-wrap:wrap;gap:4px}.tutorial-progress__dot{width:6px;height:6px}.tutorial-title{font-size:1rem;margin-bottom:10px}.tutorial-text{font-size:.8rem;line-height:1.5}.tutorial-text p{margin-bottom:6px;padding-left:0;margin-left:0;text-indent:0}.tutorial-action{padding:8px 12px;font-size:.8rem;margin-top:12px}.tutorial-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tutorial-nav__back{grid-column:1;padding:10px 8px;font-size:.8rem;text-align:center}.tutorial-nav__next{grid-column:2;padding:10px 8px;font-size:.8rem;text-align:center}.tutorial-nav__skip{grid-column:1 / -1;padding:8px;font-size:.75rem;text-align:center;order:3}.welcome-btn-start{padding:12px 20px;font-size:.9rem}.welcome-btn-skip{font-size:.8rem;padding:8px}.welcome-audience-card{padding:8px 12px;font-size:.8rem}.welcome-hint{font-size:.75rem}}@media (max-width: 360px){.welcome-content{padding:16px 12px}.tutorial-step,.tutorial-tooltip{padding:14px 12px;margin:0 4px;width:calc(100% - 8px)}.tutorial-title{font-size:.95rem}.tutorial-text{font-size:.75rem}.tutorial-nav__back,.tutorial-nav__next{padding:8px 6px;font-size:.75rem}.welcome-title{font-size:1.1rem}.completion-modal{padding:20px 12px;margin:4px;width:calc(100% - 8px)}.completion-icon svg{width:64px;height:64px}.completion-title{font-size:1.1rem}.completion-checklist{padding:10px}}@media (max-height: 500px) and (orientation: landscape){.onboarding-overlay{padding:4px 16px;overflow-y:auto}.welcome-modal{max-height:98vh;overflow-y:auto}.welcome-content{padding:16px;gap:12px}.tutorial-step,.tutorial-tooltip{max-height:90vh;overflow-y:auto;padding:12px 16px}.tutorial-nav{position:sticky;bottom:0;background:#1e1e32fa;margin:0 -16px;padding:8px 16px}}@supports (padding: env(safe-area-inset-left)){.onboarding-overlay{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}.tutorial-step,.tutorial-tooltip{margin-left:max(8px,env(safe-area-inset-left));margin-right:max(8px,env(safe-area-inset-right))}}