.tutorial-overlay{position:fixed;inset:0;z-index:28000;pointer-events:none;transition:opacity .3s ease}.tutorial-spotlight{position:fixed;border-radius:10px;box-shadow:0 0 0 9999px rgba(4,8,18,.52);pointer-events:none;transition:top .35s cubic-bezier(.16, 1, .3, 1),left .35s cubic-bezier(.16, 1, .3, 1),width .35s cubic-bezier(.16, 1, .3, 1),height .35s cubic-bezier(.16, 1, .3, 1);z-index:28001}.tutorial-spotlight::after{content:'';position:absolute;inset:-4px;border-radius:14px;border:2px solid var(--accent-color);opacity:.7;animation:tutorial-spotlight-pulse 1.8s ease-in-out infinite}@keyframes tutorial-spotlight-pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:.3;transform:scale(1.03)}}.tutorial-tooltip{position:fixed;z-index:28003;width:300px;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg,12px);padding:0;box-shadow:var(--shadow-xl,0 8px 32px rgba(0,0,0,.18));pointer-events:auto;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s cubic-bezier(.16, 1, .3, 1),left .3s cubic-bezier(.16, 1, .3, 1),top .3s cubic-bezier(.16, 1, .3, 1);overflow:hidden}.tutorial-tooltip.visible{opacity:1;transform:translateY(0)}.tutorial-progress{height:3px;width:100%;background:color-mix(in srgb,var(--accent-color) 14%,transparent)}.tutorial-progress-fill{height:100%;background:var(--accent-color);transition:width .35s cubic-bezier(.16, 1, .3, 1)}.tutorial-tooltip-inner{padding:16px 18px 12px}.tutorial-tooltip::before{content:'';position:absolute;width:12px;height:12px;background:var(--surface-color);border:1px solid var(--border-color);transform:rotate(45deg);z-index:-1}.tutorial-tooltip[data-position=below]::before{top:-7px;left:50%;margin-left:-6px;border-right:none;border-bottom:none}.tutorial-tooltip[data-position=above]::before{bottom:-7px;left:50%;margin-left:-6px;border-left:none;border-top:none}.tutorial-tooltip[data-position=right]::before{left:-7px;top:50%;margin-top:-6px;border-right:none;border-top:none}.tutorial-tooltip[data-position=left]::before{right:-7px;top:50%;margin-top:-6px;border-left:none;border-bottom:none}.tutorial-tooltip-title{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:700;color:var(--text-primary);margin-bottom:6px;line-height:1.3}.tutorial-tooltip-title svg{width:15px;height:15px;flex-shrink:0;color:var(--accent-color)}.tutorial-tooltip-body{font-size:.82rem;color:var(--text-secondary);line-height:1.5;margin-bottom:12px}.tutorial-tooltip-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border-color);padding-top:10px;margin-top:2px}.tutorial-step-counter{font-size:.72rem;color:var(--text-secondary);opacity:.8;font-weight:600;letter-spacing:.02em}.tutorial-skip-btn{font-size:.75rem;color:var(--text-secondary);background:0 0;border:none;cursor:pointer;padding:2px 6px;border-radius:var(--radius-xs,4px);transition:color .15s,background .15s}.tutorial-skip-btn:hover{color:var(--text-primary);background:var(--hover-bg,rgba(0,0,0,.05))}.tutorial-complete-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);z-index:28010;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-md,10px);padding:14px 24px;box-shadow:var(--shadow-xl,0 8px 24px rgba(0,0,0,.15));font-size:.88rem;font-weight:500;color:var(--text-primary);opacity:0;transition:opacity .35s ease,transform .35s cubic-bezier(.16, 1, .3, 1);cursor:pointer}.tutorial-complete-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}.tutorial-tooltip-footer-right{display:flex;align-items:center;gap:6px}.tutorial-next-btn{font-size:.75rem;font-weight:600;color:var(--on-accent-color,#fff);background:var(--accent-color);border:none;cursor:pointer;padding:5px 14px;border-radius:var(--radius-sm,6px);transition:filter .15s,transform .1s}.tutorial-next-btn:hover{filter:brightness(1.08)}.tutorial-next-btn:active{transform:scale(.96)}.tutorial-confetti{position:fixed;inset:0;z-index:28005;pointer-events:none}.tutorial-canvas-message{position:fixed;z-index:28006;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);width:360px;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg,16px);padding:32px 28px 24px;box-shadow:var(--shadow-xl,0 12px 48px rgba(0,0,0,.22));text-align:center;pointer-events:auto;opacity:0;transition:opacity .4s ease,transform .4s cubic-bezier(.16, 1, .3, 1)}.tutorial-canvas-message.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.tutorial-canvas-message-title{font-size:1.2rem;font-weight:700;color:var(--text-primary);margin-bottom:8px;line-height:1.3}.tutorial-canvas-message-body{font-size:.88rem;color:var(--text-secondary);line-height:1.5;margin-bottom:20px}.tutorial-canvas-message-btn{display:inline-block;font-size:.85rem;font-weight:600;color:var(--on-accent-color,#fff);background:var(--accent-color);border:none;cursor:pointer;padding:8px 28px;border-radius:var(--radius-md,10px);transition:filter .15s,transform .1s}.tutorial-canvas-message-btn:hover{filter:brightness(1.08)}.tutorial-canvas-message-btn:active{transform:scale(.96)}.tutorial-demo-note{animation:tutorial-demo-pop .5s cubic-bezier(.34,1.56,.64,1) both}@keyframes tutorial-demo-pop{0%{opacity:0;scale:0.4}100%{opacity:1;scale:1}}.tutorial-pixelating{will-change:filter,opacity;transition:opacity .12s linear;image-rendering:pixelated}.tutorial-overlay.dismissing{opacity:0;transition:opacity .3s ease}@media (prefers-reduced-motion:reduce){.tutorial-canvas-message,.tutorial-complete-toast,.tutorial-spotlight,.tutorial-tooltip{transition-duration:0s!important}.tutorial-spotlight::after{animation:none}.tutorial-confetti{display:none}.tutorial-demo-note{animation:none}}body.animations-disabled .tutorial-spotlight::after{animation:none}body.animations-disabled .tutorial-demo-note{animation:none}