.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{padding:4px 8px;min-width:auto;font-size:1.2rem;line-height:1;background:transparent;color:#666}.tutorial-button--close:hover{background:#f0f0f0;color:#333}@media(prefers-reduced-motion:reduce){.tutorial-overlay,.tutorial-bubble,.tutorial-button{transition:none!important;animation:none!important}}@media(max-width:640px){.tutorial-overlay .tutorial-character{display:none}.tutorial-overlay .tutorial-bubble{padding:20px}.tutorial-overlay .tutorial-buttons{justify-content:space-between}.tutorial-overlay .tutorial-button{flex:1;min-width:0}}@supports (padding: env(safe-area-inset-top)){.tutorial-overlay--mobile{bottom:calc(20px + env(safe-area-inset-bottom))}}