.tutorial-overlay{pointer-events:none;user-select:none}.tutorial-overlay--mobile{width:calc(100% - 40px);max-width:500px}.tutorial-character{display:flex;align-items:center;justify-content:center;margin-bottom:0;position:relative;filter:drop-shadow(0 10px 28px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(97,94,255,.55));z-index:10001}.tutorial-character:before{content:"";position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle,#c71fe2e6,#615eff73 40%,#c71fe200 70%);filter:blur(8px);opacity:.9;z-index:-1}.tutorial-character-image{width:auto;height:120px;max-width:120px;object-fit:contain}.tutorial-overlay:not(.tutorial-overlay--mobile) .tutorial-character{position:absolute;left:-20px;top:50%;transform:translateY(-50%)}.tutorial-overlay:not(.tutorial-overlay--mobile) .tutorial-bubble{padding-left:120px}.tutorial-bubble{background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 20px #00000026;min-width:200px;max-width:400px;position:relative;pointer-events:auto;z-index:10000}.tutorial-bubble--mobile{width:100%;max-width:none;margin:0 auto}.tutorial-bubble--mobile--arrow-top:before{content:"";position:absolute;top:-10px;left:50%;transform:translate(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff}.tutorial-bubble--mobile--arrow-bottom:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff}.tutorial-bubble--mobile--arrow-left:before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #fff}.tutorial-bubble--mobile--arrow-right:after{content:"";position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff}.tutorial-bubble--right:before{content:"";position:absolute;left:-10px;top:20px;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #fff}.tutorial-bubble--left:after{content:"";position:absolute;right:-10px;top:20px;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff}.tutorial-bubble--top:before{content:"";position:absolute;bottom:-10px;left:20px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff}.tutorial-bubble--bottom:before{content:"";position:absolute;top:-10px;left:20px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff}.tutorial-bubble-content{display:flex;flex-direction:column;gap:12px}.tutorial-text{margin:0;font-size:1rem;line-height:1.5;color:#333}.tutorial-step-indicator{font-size:.875rem;color:#666;text-align:center;padding-top:8px;border-top:1px solid #eee}.tutorial-buttons{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;position:relative;z-index:10001}.tutorial-button{padding:8px 16px;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .2s,transform .1s;background:#f0f0f0;color:#333;position:relative;z-index:10001;pointer-events:auto}.tutorial-button:hover{background:#e0e0e0}.tutorial-button:active{transform:scale(.98)}.tutorial-button:focus{outline:2px solid #007bff;outline-offset:2px}.tutorial-button--next{background:#007bff;color:#fff}.tutorial-button--next:hover{background:#0056b3}.tutorial-button--close{width:36px;height:36px;min-width:36px;padding:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;line-height:1;background:#0000000d;color:#666;border-radius:50%;flex-shrink:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.tutorial-button--close:hover{background:#0000001a;color:#333}.tutorial-button--close:active{background:#00000026;transform:scale(.95)}@media(prefers-reduced-motion:reduce){.tutorial-overlay,.tutorial-bubble,.tutorial-button{transition:none!important;animation:none!important}}@media(max-width:768px){.tutorial-overlay{z-index:9999!important}.tutorial-overlay .tutorial-bubble{max-width:calc(100vw - 40px);font-size:.9rem}}@media(max-width:640px){.tutorial-overlay{left:50%!important;right:auto!important;bottom:env(safe-area-inset-bottom,16px)!important;top:auto!important;transform:translate(-50%)!important;width:calc(100% - 32px);max-width:400px}.tutorial-overlay .tutorial-character{display:none}.tutorial-overlay .tutorial-bubble{padding:14px 16px;max-width:100%;width:100%;box-sizing:border-box}.tutorial-overlay .tutorial-text{font-size:.875rem;line-height:1.4;margin-bottom:4px}.tutorial-overlay .tutorial-buttons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:8px;margin-top:8px}.tutorial-overlay .tutorial-button{min-width:0;padding:10px 16px;font-size:.875rem;flex:0 0 auto}.tutorial-overlay .tutorial-button--next{flex:1;max-width:150px}.tutorial-overlay .tutorial-button--close{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;display:flex;align-items:center;justify-content:center;font-size:1.25rem;border-radius:50%;background:#0000001a;flex-shrink:0}.tutorial-overlay .tutorial-button--close:hover,.tutorial-overlay .tutorial-button--close:active{background:#00000026}}@supports (padding: env(safe-area-inset-top)){.tutorial-overlay--mobile{bottom:calc(20px + env(safe-area-inset-bottom))}}@media(max-width:360px){.tutorial-overlay .tutorial-bubble{padding:12px 14px}.tutorial-overlay .tutorial-text{font-size:.8rem}.tutorial-overlay .tutorial-button{padding:8px 12px;font-size:.8rem}.tutorial-overlay .tutorial-button--next{max-width:120px}.tutorial-overlay .tutorial-button--close{width:40px;height:40px;min-width:40px;min-height:40px;font-size:1.1rem}}