.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;z-index:10001;filter:drop-shadow(-4px 4px 8px rgba(0,0,0,.7))}.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;padding-bottom:.5rem}.tutorial-text{margin:0;font-size:1rem!important;line-height:1.5;color:#333!important}.tutorial-text h1,.tutorial-text h2,.tutorial-text h3,.tutorial-text h4,.tutorial-text h5,.tutorial-text h6{margin:0 0 .35em;font-weight:600;line-height:1.3;color:inherit}.tutorial-text h1{font-size:1.15em}.tutorial-text h2{font-size:1.1em}.tutorial-text h3{font-size:1.05em}.tutorial-text h4,.tutorial-text h5,.tutorial-text h6{font-size:1em}.tutorial-text p{margin:0 0 .5em;font-size:1rem!important;line-height:1.5;color:#333!important}.tutorial-text p:last-child{margin-bottom:0}.tutorial-text ul,.tutorial-text ol{margin:.35em 0;padding-left:1.5em}.tutorial-text ul li,.tutorial-text ol li{margin-bottom:.15em}.tutorial-text strong,.tutorial-text b{font-weight:600}.tutorial-text em,.tutorial-text i{font-style:italic}.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:absolute;z-index:10001;right:.5rem;bottom:.5rem}.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}}