.tutorial-overlay{z-index:10000;pointer-events:none;position:fixed;inset:0}.tutorial-overlay *{pointer-events:auto}.tutorial-content-wrapper{pointer-events:none}.tutorial-content-wrapper *{pointer-events:auto}.tutorial-backdrop-container{z-index:10001;pointer-events:none;position:fixed;inset:0}.tutorial-backdrop-region{pointer-events:auto;background:#000000bf;position:fixed}.tutorial-spotlight-highlight{pointer-events:none;z-index:10002;border-radius:12px;animation:2.5s ease-in-out infinite spotlight-pulse;position:fixed;box-shadow:inset 0 0 0 1px #0000004d,0 0 0 2px #fffffff2,0 0 0 3px #0006,0 0 0 5px #06f,0 0 15px #0066ffb3,0 0 30px #0066ff80,0 0 45px #0066ff4d}@keyframes spotlight-pulse{0%,to{box-shadow:inset 0 0 0 1px #0000004d,0 0 0 2px #fffffff2,0 0 0 3px #0006,0 0 0 5px #06f,0 0 15px #0066ffb3,0 0 30px #0066ff80,0 0 45px #0066ff4d}50%{box-shadow:inset 0 0 0 1px #0000004d,0 0 0 2px #fff,0 0 0 4px #00000080,0 0 0 6px #06f,0 0 20px #06fc,0 0 40px #06f9,0 0 60px #06f6}}.tutorial-callout{z-index:10003;background:var(--bg-card,#0f0f0f);border:1px solid var(--border-color,#1f1f1f);pointer-events:auto;border-radius:12px;min-width:280px;max-width:360px;padding:20px;animation:.3s ease-out callout-enter;position:fixed;box-shadow:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003,0 0 0 1px #ffffff0d}@keyframes callout-enter{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tutorial-callout:before{content:"";background:var(--bg-card,#0f0f0f);border:1px solid var(--border-color,#1f1f1f);width:12px;height:12px;position:absolute;transform:rotate(45deg)}.tutorial-callout.position-top:before{border-top:none;border-left:none;margin-left:-6px;bottom:-7px;left:50%}.tutorial-callout.position-bottom:before{border-bottom:none;border-right:none;margin-left:-6px;top:-7px;left:50%}.tutorial-callout.position-left:before{border-bottom:none;border-left:none;margin-top:-6px;top:50%;right:-7px}.tutorial-callout.position-right:before{border-top:none;border-right:none;margin-top:-6px;top:50%;left:-7px}.tutorial-callout-header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;display:flex}.tutorial-callout-title{color:var(--text-white,#fff);margin:0;font-size:16px;font-weight:600;line-height:1.3}.tutorial-callout-close{width:24px;height:24px;color:var(--text-gray,#888);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:all .2s;display:flex}.tutorial-callout-close:hover{color:var(--text-white,#fff);background:#ffffff1a}.tutorial-callout-description{color:var(--text-gray,#888);margin:0 0 16px;font-size:14px;line-height:1.5}.tutorial-callout-actions{justify-content:space-between;align-items:center;gap:12px;display:flex}.tutorial-callout-skip{color:var(--text-gray,#888);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:8px 12px;font-size:13px;transition:all .2s}.tutorial-callout-skip:hover{color:var(--text-white,#fff);background:#ffffff0d}.tutorial-callout-nav{align-items:center;gap:8px;display:flex}.tutorial-callout-prev,.tutorial-callout-next{cursor:pointer;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .2s}.tutorial-callout-prev{border:1px solid var(--border-color,#1f1f1f);color:var(--text-gray,#888);background:0 0}.tutorial-callout-prev:hover{color:var(--text-white,#fff);background:#ffffff0d}.tutorial-callout-prev:disabled{opacity:.5;cursor:not-allowed}.tutorial-callout-next{background:var(--primary-blue,#06f);color:#fff;border:none}.tutorial-callout-next:hover{background:#0052cc}.tutorial-progress{z-index:10004;background:var(--bg-card,#0f0f0f);border:1px solid var(--border-color,#1f1f1f);border-radius:12px;flex-direction:column;align-items:center;gap:8px;padding:12px 20px;animation:.3s ease-out progress-enter;display:flex;position:fixed;top:16px;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #0000004d}@keyframes progress-enter{0%{opacity:0;transform:translate(-50%)translateY(-20px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.tutorial-progress-section{color:var(--text-white,#fff);font-size:13px;font-weight:500}.tutorial-progress-bar{align-items:center;gap:4px;display:flex}.tutorial-progress-step{background:var(--border-color,#1f1f1f);border-radius:50%;width:8px;height:8px;transition:all .3s}.tutorial-progress-step.active{background:var(--primary-blue,#06f);box-shadow:0 0 8px #0066ff80}.tutorial-progress-step.completed{background:#4caf50}.tutorial-progress-text{color:var(--text-gray,#888);font-size:12px}.tutorial-keyboard-hint{border-top:1px solid var(--border-color,#1f1f1f);color:var(--text-gray,#666);align-items:center;gap:6px;margin-top:12px;padding-top:12px;font-size:12px;display:flex}.tutorial-kbd{border:1px solid var(--border-color,#1f1f1f);min-width:20px;height:20px;color:var(--text-gray,#888);background:#ffffff0d;border-radius:4px;justify-content:center;align-items:center;padding:0 6px;font-family:monospace;font-size:11px;display:inline-flex}.restart-tutorial-btn{border:1px solid var(--border-color,#1f1f1f);color:var(--text-gray,#888);cursor:pointer;background:0 0;border-radius:8px;align-items:center;gap:8px;padding:10px 16px;font-size:14px;transition:all .2s;display:flex}.restart-tutorial-btn:hover{border-color:var(--primary-blue,#06f);color:var(--primary-blue,#06f);background:#0066ff1a}.restart-tutorial-btn svg{width:18px;height:18px}@media (max-width:768px){.tutorial-callout{border-radius:16px 16px 0 0;min-width:auto;max-width:none;padding:20px 20px 32px;animation:.3s ease-out callout-enter-mobile;position:fixed;bottom:0;left:0;right:0}@keyframes callout-enter-mobile{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.tutorial-callout:before{display:none}.tutorial-progress{margin-bottom:16px;position:relative;inset:auto 16px;transform:none}.tutorial-keyboard-hint{display:none}}html[data-theme=light] .tutorial-backdrop-fill{fill:#0009}html[data-theme=light] .tutorial-callout,html[data-theme=light] .tutorial-callout:before,html[data-theme=light] .tutorial-progress{background:#fff;border-color:#e5e5e5}.tutorial-loading{z-index:10005;background:var(--bg-card,#0f0f0f);border:1px solid var(--border-color,#1f1f1f);border-radius:12px;flex-direction:column;align-items:center;gap:16px;padding:24px 32px;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.tutorial-loading-spinner{border:3px solid var(--border-color,#1f1f1f);border-top-color:var(--primary-blue,#06f);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite tutorial-spin}@keyframes tutorial-spin{to{transform:rotate(360deg)}}.tutorial-loading-text{color:var(--text-gray,#888);font-size:14px}