.onboarding-overlay{position:fixed;inset:0;z-index:var(--z-onboarding);display:flex;align-items:center;justify-content:center;background:rgba(4,8,18,.55);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);animation:onboarding-overlay-in .4s cubic-bezier(.16,1,.3,1) both}.onboarding-overlay.auth-active{z-index:29000}.onboarding-card{position:relative;width:600px;max-width:calc(100vw - 32px);max-height:min(740px,calc(100vh - 32px));border-radius:var(--radius-xl);background:var(--header-bg);border:1px solid var(--border-color);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;overflow:hidden;animation:onboarding-card-in .5s cubic-bezier(.16,1,.3,1) 50ms both}.onboarding-overlay.dismissing{animation:onboarding-dismiss .6s cubic-bezier(.16,1,.3,1) forwards}.onboarding-overlay.dismissing .onboarding-card{animation:onboarding-card-dismiss .5s cubic-bezier(.16,1,.3,1) forwards}.onboarding-skip{position:absolute;top:16px;right:20px;background:0 0;border:none;color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);z-index:1;transition:color .15s ease,background .15s ease}.onboarding-skip:hover{color:var(--text-primary);background:var(--hover-bg)}.onboarding-slides-viewport{flex:1;overflow:hidden;display:flex;flex-direction:column}.onboarding-slides-track{display:flex;flex:1;transition:transform .4s cubic-bezier(.16, 1, .3, 1);will-change:transform}.onboarding-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;padding:40px 36px;overflow-y:auto}.onboarding-slide-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;width:100%;max-width:440px}.onboarding-logo{max-width:80px;height:auto;margin-bottom:8px}.onboarding-title{font-size:2rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}.onboarding-tagline{font-size:1.15rem;color:var(--text-secondary);letter-spacing:.02em;margin-top:-4px}.onboarding-cta{padding:12px 32px;font-size:.95rem}.onboarding-heading{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:4px}.onboarding-subtext{font-size:var(--text-sm);color:var(--text-secondary)}.onboarding-carousel{position:relative;width:100%;min-height:340px}.onboarding-carousel-track{position:relative;width:100%;min-height:320px}.onboarding-carousel-item{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease;pointer-events:none;padding:10px 0}.onboarding-carousel-item.active{opacity:1;transform:translateY(0);pointer-events:auto}.onboarding-feature-graphic{width:280px;height:180px;position:relative;margin:0 auto 20px;border-radius:var(--radius-lg);overflow:hidden}.onboarding-graphic-notes{background:var(--surface-2)}.onboarding-note-card{position:absolute;width:80px;height:105px;border-radius:var(--radius-md);top:50%;left:50%;transform:translate(-50%,-50%);animation:notes-fan-out .8s cubic-bezier(.16,1,.3,1) forwards}.onboarding-note-card:first-child{--fan-rotation:-10deg;--fan-offset:-28px;background:var(--accent-color);animation-delay:0s}.onboarding-note-card:nth-child(2){--fan-rotation:0deg;--fan-offset:0px;background:var(--accent-subtle);animation-delay:.1s}.onboarding-note-card:nth-child(3){--fan-rotation:10deg;--fan-offset:28px;background:var(--surface-3);animation-delay:.2s}.onboarding-note-line{position:absolute;left:8px;right:8px;height:3px;border-radius:2px;background:rgba(255,255,255,.25);top:16px}.onboarding-note-card:nth-child(2) .onboarding-note-line,.onboarding-note-card:nth-child(3) .onboarding-note-line{background:rgba(0,0,0,.1)}@keyframes notes-fan-out{0%{transform:translate(-50%,-50%) rotate(0) translateX(0)}100%{transform:translate(-50%,-50%) rotate(var(--fan-rotation)) translateX(var(--fan-offset))}}.onboarding-graphic-canvas{background:radial-gradient(circle,var(--border-color) .7px,transparent .7px);background-size:14px 14px}.onboarding-canvas-notecard{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:190px;padding:18px 16px;background:var(--header-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:0 2px 12px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:8px;animation:notecard-fade-in .4s ease-out .1s both}.onboarding-canvas-noteline{height:5px;border-radius:2px;background:var(--surface-3);width:90%}.onboarding-canvas-noteline.short{width:55%}.onboarding-canvas-noteline.med{width:72%}.onboarding-canvas-annotation{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.onboarding-annotate-stroke{fill:none;stroke:var(--accent-color);stroke-linecap:round;stroke-linejoin:round}.onboarding-annotate-arrow{stroke-dasharray:160;stroke-dashoffset:160}.onboarding-annotate-underline{stroke-dasharray:100;stroke-dashoffset:100}.onboarding-annotate-text{opacity:0;font-family:'Segoe Script','Comic Sans MS','Bradley Hand',cursive;font-weight:400}.onboarding-annotate-head{opacity:0}.onboarding-carousel-item.active .onboarding-annotate-text{animation:annotate-text-in .4s ease-out .4s forwards}.onboarding-carousel-item.active .onboarding-annotate-underline{animation:draw-annotate-line .5s ease-out .7s forwards}.onboarding-carousel-item.active .onboarding-annotate-arrow{animation:draw-annotate-line .6s cubic-bezier(.25,0,.2,1) 1s forwards}.onboarding-carousel-item.active .onboarding-annotate-head{animation:annotate-head-pop .25s cubic-bezier(.34,1.56,.64,1) 1.55s forwards}@keyframes notecard-fade-in{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes draw-annotate-line{to{stroke-dashoffset:0}}@keyframes annotate-text-in{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}@keyframes annotate-head-pop{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}.onboarding-graphic-collab{background:var(--surface-2)}.onboarding-cursor{position:absolute;display:flex;flex-direction:column;align-items:flex-start}.onboarding-cursor-pointer{width:20px;height:20px;flex-shrink:0}.onboarding-cursor-avatar{width:22px;height:22px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:-2px;margin-left:12px;line-height:1}.onboarding-cursor-a{animation:cursor-a-move 3s ease-in-out infinite}.onboarding-cursor-b{animation:cursor-b-move 3s ease-in-out infinite}@keyframes cursor-a-move{0%{transform:translate(30px,25px)}25%{transform:translate(160px,45px)}50%{transform:translate(120px,110px)}75%{transform:translate(50px,70px)}100%{transform:translate(30px,25px)}}@keyframes cursor-b-move{0%{transform:translate(200px,90px)}25%{transform:translate(80px,30px)}50%{transform:translate(180px,20px)}75%{transform:translate(210px,80px)}100%{transform:translate(200px,90px)}}.onboarding-graphic-moodboard{background:var(--surface-1);overflow:hidden}.onboarding-mb-card{position:absolute;border-radius:var(--radius-sm);border:1px solid var(--border-color);box-shadow:0 2px 8px rgba(0,0,0,.08);animation:mb-pop-in .5s cubic-bezier(.16,1,.3,1) both}.onboarding-mb-card.mb-1{left:12%;top:12%;width:80px;height:58px;background:var(--accent-color);transform:rotate(-5deg);animation-delay:.1s}.onboarding-mb-card.mb-2{left:56%;top:6%;width:65px;height:82px;background:var(--surface-3);transform:rotate(4deg);animation-delay:.2s}.onboarding-mb-card.mb-3{left:28%;top:48%;width:88px;height:56px;background:var(--accent-subtle);transform:rotate(-2deg);animation-delay:.3s}.onboarding-mb-card.mb-4{left:64%;top:44%;width:60px;height:72px;background:var(--surface-2);border:2px solid var(--accent-color);transform:rotate(6deg);animation-delay:.4s}.onboarding-mb-card.mb-5{left:6%;top:56%;width:50px;height:40px;background:var(--surface-3);transform:rotate(-8deg);animation-delay:.5s}@keyframes mb-pop-in{from{opacity:0;scale:0.4}to{opacity:1;scale:1}}.onboarding-two-col{display:flex;gap:24px;text-align:center}.onboarding-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px}.onboarding-col-divider{width:1px;background:var(--border-color);align-self:stretch}.onboarding-col-icon{width:48px;height:48px;border-radius:50%;background:var(--accent-subtle);display:flex;align-items:center;justify-content:center;color:var(--accent-color)}.onboarding-col h3{font-size:1rem;font-weight:600;color:var(--text-primary);margin:0}.onboarding-col p{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5;margin:0}.onboarding-theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;max-width:480px;width:100%;margin:0 auto}.onboarding-theme-swatch{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 8px;border-radius:var(--radius-lg);border:2px solid transparent;background:0 0;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}.onboarding-theme-swatch:hover{background:var(--hover-bg)}.onboarding-theme-swatch.selected{border-color:var(--accent-color);background:var(--surface-1)}.onboarding-swatch-preview{width:100%;height:40px;border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:row;border:1px solid var(--border-color)}.swatch-color-bar{flex:1;height:100%}.swatch-color-bar:first-child{flex:3}.swatch-color-bar:nth-child(2){flex:2}.swatch-color-bar:nth-child(3),.swatch-color-bar:nth-child(4){flex:1}.swatch-color-bar:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}.swatch-color-bar:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0}.onboarding-swatch-label{font-size:var(--text-xs);font-weight:600;color:var(--text-secondary)}.onboarding-signin{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.onboarding-signin-icon{width:56px;height:56px;border-radius:50%;background:var(--accent-subtle);display:flex;align-items:center;justify-content:center;color:var(--accent-color);margin:0 auto 12px}.onboarding-signin .onboarding-subtext strong{color:var(--accent-color);font-weight:600}.onboarding-signin-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:260px;margin-top:4px}.onboarding-signin-btn{padding:12px 32px;width:100%}.onboarding-continue-offline{background:var(--surface-2);border:1px solid var(--border-color);color:var(--text-primary);padding:12px 32px;font-size:.9rem;cursor:pointer;border-radius:var(--radius-md);transition:background .15s ease,border-color .15s ease;width:100%;font-weight:500}.onboarding-continue-offline:hover{background:var(--surface-3);border-color:var(--text-secondary)}.onboarding-platform-note{font-size:var(--text-xs);color:var(--text-secondary);opacity:.7;margin-top:16px}.onboarding-ready-graphic{width:80px;height:80px;border-radius:50%;background:var(--accent-subtle);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}.onboarding-ready-graphic.animate{animation:ready-pop .6s cubic-bezier(.34,1.56,.64,1)}.onboarding-ready-graphic svg{width:36px;height:36px}.onboarding-ready-graphic.animate path{stroke-dasharray:36;stroke-dashoffset:36;animation:draw-checkmark .4s ease-out .3s forwards}@keyframes ready-pop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}@keyframes draw-checkmark{to{stroke-dashoffset:0}}.onboarding-nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:16px 28px 20px;border-top:1px solid var(--border-color)}.onboarding-nav-back{background:0 0;border:none;color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;display:flex;align-items:center;gap:4px;padding:8px 12px;border-radius:var(--radius-sm);transition:color .15s ease,background .15s ease}.onboarding-nav-back:hover{color:var(--text-primary);background:var(--surface-2)}.onboarding-nav-next{display:flex;align-items:center;gap:6px}.onboarding-dots{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:6px}.onboarding-dot{width:8px;height:8px;border-radius:50%;background:var(--surface-3);border:none;padding:0;cursor:pointer;transition:background .2s ease,transform .2s ease}.onboarding-dot.active{background:var(--accent-color);transform:scale(1.25)}@keyframes onboarding-overlay-in{from{opacity:0}to{opacity:1}}@keyframes onboarding-card-in{from{opacity:0;transform:scale(.94) translateY(18px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes onboarding-dismiss{to{opacity:0}}@keyframes onboarding-card-dismiss{from{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-60px) scale(.96);opacity:0}}body.animations-disabled .onboarding-card,body.animations-disabled .onboarding-carousel-item,body.animations-disabled .onboarding-feature-graphic *,body.animations-disabled .onboarding-overlay,body.animations-disabled .onboarding-slides-track{animation:none!important;transition-duration:0s!important}@media (prefers-reduced-motion:reduce){.onboarding-carousel-item,.onboarding-slides-track{transition:none}.onboarding-feature-graphic *{animation:none!important}}@media (max-height:720px){.onboarding-slide{padding:24px 28px}.onboarding-carousel{min-height:240px}.onboarding-carousel-track{min-height:220px}.onboarding-nav{padding:12px 20px 14px}.onboarding-logo{max-width:56px}.onboarding-title{font-size:1.7rem}.onboarding-tagline{font-size:var(--text-sm)}}@media (max-height:520px){.onboarding-slide{padding:14px 20px}.onboarding-carousel{min-height:180px}.onboarding-carousel-track{min-height:160px}.onboarding-slide-content{gap:10px}.onboarding-nav{padding:8px 16px 10px}.onboarding-logo{max-width:40px}.onboarding-title{font-size:1.3rem}.onboarding-heading{font-size:1.05rem}}