@keyframes svelte-rxmsh6-fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes svelte-rxmsh6-glowPulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes svelte-rxmsh6-connectionPulse{0%,to{opacity:.6;transform:scaleX(0)}50%{opacity:1;transform:scaleX(1)}}.accent-text.svelte-rxmsh6{color:#6e45e2;position:relative;display:inline-block}.tutorial-showcase.svelte-rxmsh6{max-width:1400px;margin:4rem auto;padding:4rem 2rem;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}@media (max-width: 768px){.tutorial-showcase.svelte-rxmsh6{padding:2rem 1rem;margin:2rem auto}}.showcase-content.svelte-rxmsh6{text-align:center;max-width:800px;margin:0 auto 3rem}.showcase-content.svelte-rxmsh6 h1:where(.svelte-rxmsh6){font-size:3.2rem;font-weight:500;margin-bottom:1.5rem;line-height:1.2;letter-spacing:-.03em;animation:svelte-rxmsh6-fadeUp .8s ease-out forwards}@media (max-width: 768px){.showcase-content.svelte-rxmsh6 h1:where(.svelte-rxmsh6){font-size:2.2rem}}.showcase-content.svelte-rxmsh6 p:where(.svelte-rxmsh6){font-size:1.3rem;line-height:1.7;color:#1a1a1acc;animation:svelte-rxmsh6-fadeUp .8s ease-out forwards;animation-delay:.2s;opacity:0}@media (max-width: 768px){.showcase-content.svelte-rxmsh6 p:where(.svelte-rxmsh6){font-size:1.1rem}}.tutorial-controls.svelte-rxmsh6{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.tutorial-controls.svelte-rxmsh6 .control-btn:where(.svelte-rxmsh6),.tutorial-controls.svelte-rxmsh6 .play-btn:where(.svelte-rxmsh6),.tutorial-controls.svelte-rxmsh6 .connections-btn:where(.svelte-rxmsh6){padding:.8rem 1.5rem;border:none;border-radius:50px;font-weight:600;cursor:pointer;transition:all .4s cubic-bezier(.165,.84,.44,1);background:#ffffffe6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 8px 25px #0000001a}.tutorial-controls.svelte-rxmsh6 .control-btn:where(.svelte-rxmsh6):hover,.tutorial-controls.svelte-rxmsh6 .play-btn:where(.svelte-rxmsh6):hover,.tutorial-controls.svelte-rxmsh6 .connections-btn:where(.svelte-rxmsh6):hover{transform:translateY(-2px);box-shadow:0 15px 35px #00000026}.tutorial-controls.svelte-rxmsh6 .play-btn.playing:where(.svelte-rxmsh6){background:linear-gradient(135deg,#6e45e2,#8b5cf6);color:#fff}.tutorial-controls.svelte-rxmsh6 .connections-btn.active:where(.svelte-rxmsh6){background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff}@media (max-width: 768px){.tutorial-controls.svelte-rxmsh6{gap:.5rem}.tutorial-controls.svelte-rxmsh6 .control-btn:where(.svelte-rxmsh6),.tutorial-controls.svelte-rxmsh6 .play-btn:where(.svelte-rxmsh6),.tutorial-controls.svelte-rxmsh6 .connections-btn:where(.svelte-rxmsh6){padding:.6rem 1rem;font-size:.9rem}}.tutorial-interface.svelte-rxmsh6{display:flex;flex-direction:column;gap:2rem}.step-progress.svelte-rxmsh6{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}.step-progress.svelte-rxmsh6 .progress-item:where(.svelte-rxmsh6){display:flex;align-items:center;gap:.5rem;padding:.8rem 1.2rem;background:#fffc;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:50px;cursor:pointer;transition:all .4s cubic-bezier(.165,.84,.44,1);border:2px solid transparent}.step-progress.svelte-rxmsh6 .progress-item:where(.svelte-rxmsh6):hover{transform:translateY(-2px);background:#fffffff2}.step-progress.svelte-rxmsh6 .progress-item.active:where(.svelte-rxmsh6){background:linear-gradient(135deg,#6e45e2,#8b5cf6);color:#fff;transform:scale(1.05)}.step-progress.svelte-rxmsh6 .progress-item.completed:where(.svelte-rxmsh6){border-color:#1048b9}.step-progress.svelte-rxmsh6 .progress-item.completed:where(.svelte-rxmsh6) .step-number:where(.svelte-rxmsh6){background:#9d9eff;color:#fff}.step-progress.svelte-rxmsh6 .progress-item:where(.svelte-rxmsh6) .step-number:where(.svelte-rxmsh6){width:24px;height:24px;border-radius:50%;background:#0000001a;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}.step-progress.svelte-rxmsh6 .progress-item:where(.svelte-rxmsh6) .step-label:where(.svelte-rxmsh6){font-size:.9rem;font-weight:600}@media (max-width: 768px){.step-progress.svelte-rxmsh6 .progress-item:where(.svelte-rxmsh6) .step-label:where(.svelte-rxmsh6){display:none}.step-progress.svelte-rxmsh6{gap:.5rem}.step-progress.svelte-rxmsh6 .progress-item:where(.svelte-rxmsh6){padding:.6rem;min-width:40px;justify-content:center}}.tutorial-preview.svelte-rxmsh6{position:relative;background:linear-gradient(135deg,#ffffff1a,#ffffff0d,#ffffff14);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:36px;padding:2rem;border:1px solid rgba(255,255,255,.2);display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}@media (max-width: 768px){.tutorial-preview.svelte-rxmsh6{grid-template-columns:1fr;padding:1.5rem;gap:1.5rem}}.tutorial-preview.svelte-rxmsh6:hover .glow-effect:where(.svelte-rxmsh6){opacity:1}.step-showcase.svelte-rxmsh6{position:relative}.step-showcase.svelte-rxmsh6 .step-image:where(.svelte-rxmsh6){width:100%;height:auto;border-radius:16px;box-shadow:0 15px 40px #00000026;transition:all .4s cubic-bezier(.165,.84,.44,1)}.step-showcase.svelte-rxmsh6 .step-image:where(.svelte-rxmsh6):hover{transform:scale(1.02)}.step-showcase.svelte-rxmsh6 .connection-overlay:where(.svelte-rxmsh6){position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.step-showcase.svelte-rxmsh6 .connection-overlay:where(.svelte-rxmsh6) .connection-line:where(.svelte-rxmsh6){position:absolute;height:3px;background:linear-gradient(90deg,#6e45e2,#8b5cf6);border-radius:2px;animation:svelte-rxmsh6-connectionPulse 2s ease-in-out infinite}.step-showcase.svelte-rxmsh6 .connection-overlay:where(.svelte-rxmsh6) .connection-line.connection-0:where(.svelte-rxmsh6){top:20%;left:10%;width:30%;transform-origin:left}.step-showcase.svelte-rxmsh6 .connection-overlay:where(.svelte-rxmsh6) .connection-line.connection-1:where(.svelte-rxmsh6){top:60%;right:10%;width:25%;transform-origin:right}.tutorial-content.svelte-rxmsh6 .step-header:where(.svelte-rxmsh6){margin-bottom:1.5rem}.tutorial-content.svelte-rxmsh6 .step-header:where(.svelte-rxmsh6) .step-counter:where(.svelte-rxmsh6){display:inline-block;padding:.3rem .8rem;background:linear-gradient(135deg,#6e45e2,#8b5cf6);color:#fff;border-radius:20px;font-size:.8rem;font-weight:600;margin-bottom:.8rem}.tutorial-content.svelte-rxmsh6 .step-header:where(.svelte-rxmsh6) .step-title:where(.svelte-rxmsh6){font-size:2rem;font-weight:600;color:#1a1a1a;margin:0}@media (max-width: 768px){.tutorial-content.svelte-rxmsh6 .step-header:where(.svelte-rxmsh6) .step-title:where(.svelte-rxmsh6){font-size:1.6rem}}.tutorial-content.svelte-rxmsh6 .step-description:where(.svelte-rxmsh6){margin-bottom:1.5rem}.tutorial-content.svelte-rxmsh6 .step-description:where(.svelte-rxmsh6) p:where(.svelte-rxmsh6){font-size:1.1rem;line-height:1.6;color:#1a1a1acc;margin:0}.tutorial-content.svelte-rxmsh6 .tips-section:where(.svelte-rxmsh6){display:flex;gap:1rem;padding:1.5rem;background:linear-gradient(135deg,#ffc1071a,#ffc1070d);border-radius:16px;border-left:4px solid #ffc107;margin-bottom:1.5rem}.tutorial-content.svelte-rxmsh6 .tips-section:where(.svelte-rxmsh6) .tip-icon:where(.svelte-rxmsh6){font-size:1.5rem;flex-shrink:0}.tutorial-content.svelte-rxmsh6 .tips-section:where(.svelte-rxmsh6) .tip-content:where(.svelte-rxmsh6) strong:where(.svelte-rxmsh6){color:#1a1a1a;font-weight:600;display:block;margin-bottom:.5rem}.tutorial-content.svelte-rxmsh6 .tips-section:where(.svelte-rxmsh6) .tip-content:where(.svelte-rxmsh6) p:where(.svelte-rxmsh6){font-size:1rem;line-height:1.5;color:#1a1a1acc;margin:0}.tutorial-content.svelte-rxmsh6 .connected-tools:where(.svelte-rxmsh6){margin-bottom:2rem}.tutorial-content.svelte-rxmsh6 .connected-tools:where(.svelte-rxmsh6) h4:where(.svelte-rxmsh6){margin-bottom:.8rem;color:#1a1a1a;font-size:1rem;font-weight:600}.tutorial-content.svelte-rxmsh6 .connected-tools:where(.svelte-rxmsh6) .tools-list:where(.svelte-rxmsh6){display:flex;gap:.5rem;flex-wrap:wrap}.tutorial-content.svelte-rxmsh6 .connected-tools:where(.svelte-rxmsh6) .tools-list:where(.svelte-rxmsh6) .connection-tag:where(.svelte-rxmsh6){padding:.4rem .8rem;background:linear-gradient(135deg,#6e45e2,#8b5cf6);color:#fff;border-radius:20px;font-size:.8rem;font-weight:600}.tutorial-content.svelte-rxmsh6 .action-buttons:where(.svelte-rxmsh6){display:flex;gap:1rem;flex-wrap:wrap}.tutorial-content.svelte-rxmsh6 .action-buttons:where(.svelte-rxmsh6) .primary-btn:where(.svelte-rxmsh6),.tutorial-content.svelte-rxmsh6 .action-buttons:where(.svelte-rxmsh6) .secondary-btn:where(.svelte-rxmsh6){padding:1rem 2rem;border:none;border-radius:50px;font-weight:600;cursor:pointer;transition:all .4s cubic-bezier(.165,.84,.44,1);font-size:1rem}.tutorial-content.svelte-rxmsh6 .action-buttons:where(.svelte-rxmsh6) .primary-btn:where(.svelte-rxmsh6):hover,.tutorial-content.svelte-rxmsh6 .action-buttons:where(.svelte-rxmsh6) .secondary-btn:where(.svelte-rxmsh6):hover{transform:translateY(-2px)}.tutorial-content.svelte-rxmsh6 .action-buttons:where(.svelte-rxmsh6) .primary-btn:where(.svelte-rxmsh6){background:linear-gradient(135deg,#6e45e2,#8b5cf6);color:#fff;box-shadow:0 10px 25px #6e45e24d}.tutorial-content.svelte-rxmsh6 .action-buttons:where(.svelte-rxmsh6) .primary-btn:where(.svelte-rxmsh6):hover{box-shadow:0 15px 35px #6e45e266}.tutorial-content.svelte-rxmsh6 .action-buttons:where(.svelte-rxmsh6) .secondary-btn:where(.svelte-rxmsh6){background:#ffffffe6;color:#1a1a1a;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 8px 20px #0000001a}.tutorial-content.svelte-rxmsh6 .action-buttons:where(.svelte-rxmsh6) .secondary-btn:where(.svelte-rxmsh6):hover{background:#fff;box-shadow:0 12px 30px #00000026}@media (max-width: 768px){.tutorial-content.svelte-rxmsh6 .action-buttons:where(.svelte-rxmsh6) .primary-btn:where(.svelte-rxmsh6),.tutorial-content.svelte-rxmsh6 .action-buttons:where(.svelte-rxmsh6) .secondary-btn:where(.svelte-rxmsh6){padding:.8rem 1.5rem;font-size:.9rem}}.glow-effect.svelte-rxmsh6{position:absolute;top:-20px;left:-20px;right:-20px;bottom:-20px;background:radial-gradient(circle,rgba(110,69,226,.15) 0%,rgba(158,119,237,.1) 30%,rgba(60,150,255,.08) 60%,transparent 80%);opacity:0;transition:all .8s ease;pointer-events:none;z-index:-1;mix-blend-mode:soft-light;animation:svelte-rxmsh6-glowPulse 4s ease-in-out infinite;filter:blur(30px);border-radius:56px}
