.tutorial-container.svelte-116uhib{height:calc(100vh - 73px);display:flex;flex-direction:column;position:relative}.tutorial-overlay.svelte-116uhib{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s}.tutorial-overlay.active.svelte-116uhib{opacity:1;pointer-events:auto}.tutorial-box.svelte-116uhib{background:var(--bg-card);padding:40px;border-radius:16px;max-width:500px;text-align:center;border:2px solid var(--accent-primary);box-shadow:0 0 40px #6366f14d}.tutorial-step.svelte-116uhib{font-size:.85rem;color:var(--accent-primary);margin-bottom:12px}.tutorial-box.svelte-116uhib h2:where(.svelte-116uhib){margin-bottom:16px}.tutorial-box.svelte-116uhib p:where(.svelte-116uhib){color:var(--text-secondary);margin-bottom:24px;line-height:1.6}.tutorial-header.svelte-116uhib{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:var(--bg-secondary);border-bottom:1px solid rgba(255,255,255,.1)}.tutorial-progress.svelte-116uhib{display:flex;gap:8px}.progress-dot.svelte-116uhib{width:12px;height:12px;border-radius:50%;background:#fff3;transition:all .3s}.progress-dot.completed.svelte-116uhib{background:var(--success)}.progress-dot.current.svelte-116uhib{background:var(--accent-primary);box-shadow:0 0 10px var(--accent-primary)}.skip-btn.svelte-116uhib{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text-secondary);padding:8px 16px;border-radius:6px;cursor:pointer}.skip-btn.svelte-116uhib:hover{border-color:var(--text-primary);color:var(--text-primary)}.tutorial-content.svelte-116uhib{flex:1;display:grid;grid-template-columns:1fr 350px 250px;gap:16px;padding:16px;overflow:hidden}.editor-panel.svelte-116uhib{display:flex;flex-direction:column;gap:12px;transition:all .3s;border-radius:12px}.editor-panel.highlight.svelte-116uhib{box-shadow:0 0 0 3px var(--accent-primary)}.panel-header.svelte-116uhib h3:where(.svelte-116uhib){margin:0}.code-area.svelte-116uhib{flex:1;min-height:0}.code-area.svelte-116uhib textarea:where(.svelte-116uhib){height:100%;font-family:JetBrains Mono,monospace;font-size:14px;line-height:1.5}.editor-actions.svelte-116uhib{display:flex;gap:12px}.btn-primary.highlight.svelte-116uhib{animation:svelte-116uhib-pulse-btn 1s infinite}@keyframes svelte-116uhib-pulse-btn{0%,to{box-shadow:0 0 #6366f166}50%{box-shadow:0 0 0 10px #6366f100}}.task-panel.svelte-116uhib{display:flex;flex-direction:column;gap:12px;overflow-y:auto}.task-card.highlight.svelte-116uhib{box-shadow:0 0 0 3px var(--accent-primary)}.task-card.svelte-116uhib h3:where(.svelte-116uhib){color:var(--accent-primary);margin-bottom:12px}.task-card.svelte-116uhib code:where(.svelte-116uhib){background:#ffffff1a;padding:2px 6px;border-radius:4px;font-family:JetBrains Mono,monospace}.task-card.svelte-116uhib pre:where(.svelte-116uhib){background:var(--bg-secondary);padding:12px;border-radius:8px;font-family:JetBrains Mono,monospace;font-size:.9rem;margin-top:12px}.test-results.svelte-116uhib h3:where(.svelte-116uhib){margin-bottom:12px}.hint.svelte-116uhib{color:var(--text-secondary);font-size:.9rem;font-style:italic}.test-result.svelte-116uhib{padding:8px 12px;border-radius:6px;margin-bottom:8px;font-size:.9rem}.test-pass.svelte-116uhib{background:#10b9811a;color:var(--success)}.test-fail.svelte-116uhib{background:#ef44441a;color:var(--danger)}.test-error.svelte-116uhib{font-size:.8rem;margin-top:4px;opacity:.8}.success-card.svelte-116uhib{background:#10b9811a;border:1px solid var(--success)}.success-card.svelte-116uhib h3:where(.svelte-116uhib){color:var(--success)}.info-panel.svelte-116uhib{display:flex;flex-direction:column;gap:12px}.info-panel.svelte-116uhib h3:where(.svelte-116uhib){margin-bottom:12px;font-size:.95rem}.info-panel.svelte-116uhib ul:where(.svelte-116uhib){padding-left:20px;color:var(--text-secondary);font-size:.9rem}.info-panel.svelte-116uhib li:where(.svelte-116uhib){margin-bottom:8px}.phase.svelte-116uhib{padding:6px 12px;border-radius:6px;font-size:.85rem;font-weight:500;background:var(--accent-primary);color:#fff}@media(max-width:900px){.tutorial-content.svelte-116uhib{grid-template-columns:1fr}.info-panel.svelte-116uhib{display:none}}