.tutorial-page.svelte-1w3pggi{background-color:var(--color-bg-primary);min-height:100vh;padding:2rem 0 4rem}.container.svelte-1w3pggi{max-width:900px;margin:0 auto;padding:0 1.5rem}.breadcrumb.svelte-1w3pggi{display:flex;align-items:center;gap:.5rem;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:2rem}.breadcrumb.svelte-1w3pggi a:where(.svelte-1w3pggi){color:var(--color-text-secondary);transition:color .2s}.breadcrumb.svelte-1w3pggi a:where(.svelte-1w3pggi):hover{color:var(--color-accent-blue)}.breadcrumb.svelte-1w3pggi .current:where(.svelte-1w3pggi){color:var(--color-text-primary)}.separator.svelte-1w3pggi{opacity:.5}.page-header.svelte-1w3pggi{text-align:center;margin-bottom:3rem}.page-header.svelte-1w3pggi h1:where(.svelte-1w3pggi){font-size:3rem;margin-bottom:1rem;background:linear-gradient(135deg,var(--color-accent-purple),var(--color-accent-blue),var(--color-accent-green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle.svelte-1w3pggi{font-size:1.25rem;color:var(--color-text-secondary);max-width:700px;margin:0 auto}.quick-nav.svelte-1w3pggi{margin-bottom:3rem;padding:2rem}.quick-nav.svelte-1w3pggi h3:where(.svelte-1w3pggi){margin-bottom:1.5rem;font-size:1.25rem}.nav-grid.svelte-1w3pggi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.nav-link.svelte-1w3pggi{background:linear-gradient(135deg,#8b5cf61a,#3b82f61a);border:1px solid var(--color-border);border-radius:8px;padding:1rem;font-size:var(--font-size-base);color:var(--color-text-primary);cursor:pointer;transition:all .2s;text-align:left;font-weight:500}.nav-link.svelte-1w3pggi:hover{border-color:var(--color-accent-blue);transform:translateY(-2px);background:linear-gradient(135deg,#8b5cf633,#3b82f633)}.tutorial-section.svelte-1w3pggi{margin-bottom:4rem;scroll-margin-top:100px}.tutorial-section.svelte-1w3pggi h2:where(.svelte-1w3pggi){font-size:2rem;margin-bottom:1rem;color:var(--color-text-primary)}.tutorial-section.svelte-1w3pggi h3:where(.svelte-1w3pggi){font-size:1.5rem;margin-top:2rem;margin-bottom:1rem;color:var(--color-text-primary)}.tutorial-section.svelte-1w3pggi h4:where(.svelte-1w3pggi){font-size:1.25rem;margin-bottom:.75rem}.tutorial-section.svelte-1w3pggi p:where(.svelte-1w3pggi){color:var(--color-text-secondary);line-height:1.7;margin-bottom:1rem;font-size:1.125rem}.tutorial-section.svelte-1w3pggi ul:where(.svelte-1w3pggi){margin:1.5rem 0}.tutorial-section.svelte-1w3pggi ul:where(.svelte-1w3pggi) li:where(.svelte-1w3pggi){color:var(--color-text-secondary);line-height:1.7;margin-bottom:.5rem}.example-block.svelte-1w3pggi{background-color:var(--color-bg-secondary);border-left:4px solid var(--color-accent-purple);border-radius:8px;padding:1.5rem;margin:1rem 0}.example-block.svelte-1w3pggi .prompt:where(.svelte-1w3pggi){font-size:1.125rem;font-weight:600;color:var(--color-text-primary);margin-bottom:.5rem}.example-block.svelte-1w3pggi .description:where(.svelte-1w3pggi){font-size:var(--font-size-sm);color:var(--color-text-muted);margin:0}.code-example.svelte-1w3pggi{background-color:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:8px;padding:1.5rem;margin:1rem 0;font-family:Courier New,monospace}.code-example.svelte-1w3pggi code:where(.svelte-1w3pggi){background-color:#8b5cf633;color:var(--color-accent-purple);padding:.25rem .5rem;border-radius:4px;font-weight:600}.code-example.svelte-1w3pggi .description:where(.svelte-1w3pggi){margin-top:.75rem;font-family:var(--font-family);font-size:var(--font-size-sm);color:var(--color-text-muted)}code.svelte-1w3pggi{background-color:#8b5cf633;color:var(--color-accent-purple);padding:.25rem .5rem;border-radius:4px;font-weight:600;font-size:.95em}.tip-box.svelte-1w3pggi{background:linear-gradient(135deg,#10b9811a,#3b82f61a);border:1px solid var(--color-accent-green);border-radius:8px;padding:1.5rem;margin:2rem 0}.tip-box.svelte-1w3pggi strong:where(.svelte-1w3pggi){color:var(--color-accent-green)}.feature-list.svelte-1w3pggi{list-style:none;padding:0}.feature-list.svelte-1w3pggi li:where(.svelte-1w3pggi){display:flex;gap:1rem;margin-bottom:1.5rem;padding:1.5rem;background-color:var(--color-bg-secondary);border-radius:8px;border:1px solid var(--color-border)}.feature-list.svelte-1w3pggi .icon:where(.svelte-1w3pggi){font-size:2rem;flex-shrink:0}.feature-list.svelte-1w3pggi strong:where(.svelte-1w3pggi){display:block;font-size:1.125rem;color:var(--color-text-primary);margin-bottom:.5rem}.feature-list.svelte-1w3pggi p:where(.svelte-1w3pggi){margin:0;font-size:var(--font-size-base)}.best-practice.svelte-1w3pggi{margin:2rem 0}.comparison.svelte-1w3pggi{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.bad.svelte-1w3pggi,.good.svelte-1w3pggi{padding:1.5rem;border-radius:8px;border:2px solid}.bad.svelte-1w3pggi{background-color:#ef44440d;border-color:#ef44444d}.good.svelte-1w3pggi{background-color:#10b9810d;border-color:#10b9814d}.label.svelte-1w3pggi{display:block;font-weight:700;margin-bottom:.5rem;font-size:var(--font-size-sm)}.bad.svelte-1w3pggi .label:where(.svelte-1w3pggi){color:#ef4444}.good.svelte-1w3pggi .label:where(.svelte-1w3pggi){color:var(--color-accent-green)}.comparison.svelte-1w3pggi p:where(.svelte-1w3pggi){margin:0;font-size:var(--font-size-base);color:var(--color-text-primary)}.advanced-section.svelte-1w3pggi{background:linear-gradient(135deg,#8b5cf60d,#3b82f60d);border-radius:12px;padding:2rem;border:1px solid var(--color-border)}.tips-grid.svelte-1w3pggi{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.tip-card.svelte-1w3pggi{background-color:var(--color-bg-secondary);padding:1.5rem}.tip-card.svelte-1w3pggi h4:where(.svelte-1w3pggi){margin-bottom:.75rem;color:var(--color-text-primary)}.tip-card.svelte-1w3pggi p:where(.svelte-1w3pggi){margin:0;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.cta-section.svelte-1w3pggi{margin-top:4rem}.cta-card.svelte-1w3pggi{text-align:center;padding:3rem 2rem;background:linear-gradient(135deg,#8b5cf61a,#3b82f61a);border:2px solid var(--color-accent-purple)}.cta-card.svelte-1w3pggi h2:where(.svelte-1w3pggi){font-size:2rem;margin-bottom:1rem}.cta-card.svelte-1w3pggi p:where(.svelte-1w3pggi){font-size:1.125rem;color:var(--color-text-secondary);max-width:600px;margin:0 auto 2rem}@media(max-width:768px){.page-header.svelte-1w3pggi h1:where(.svelte-1w3pggi){font-size:2rem}.subtitle.svelte-1w3pggi{font-size:1rem}.nav-grid.svelte-1w3pggi,.comparison.svelte-1w3pggi,.tips-grid.svelte-1w3pggi{grid-template-columns:1fr}.tutorial-section.svelte-1w3pggi h2:where(.svelte-1w3pggi){font-size:1.5rem}}