*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#f5f3ff,#ede9fe,#fdf2f8);min-height:100vh;color:#1f2937}.top-nav.svelte-l0lkr4{background:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:50}.nav-content.svelte-l0lkr4{max-width:1000px;margin:0 auto;padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between}.nav-logo.svelte-l0lkr4{font-weight:700;font-size:1.1rem;background:linear-gradient(135deg,#8b5cf6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none}.nav-links.svelte-l0lkr4{display:flex;gap:1rem}.nav-link.svelte-l0lkr4{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;color:#6b7280;text-decoration:none;border-radius:.5rem;transition:all .15s ease}.nav-link.svelte-l0lkr4:hover{color:#8b5cf6;background:#f3f0ff}.nav-link.svelte-l0lkr4 svg:where(.svelte-l0lkr4){width:1rem;height:1rem}main.svelte-l0lkr4{max-width:1000px;margin:0 auto;padding:2rem 1.5rem 4rem}.hero.svelte-l0lkr4{text-align:center;margin-bottom:3rem}.hero-badge.svelte-l0lkr4{display:inline-block;padding:.375rem .875rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#7c3aed;background:#ede9fe;border-radius:9999px;margin-bottom:1rem}.hero-content.svelte-l0lkr4 h1:where(.svelte-l0lkr4){display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 0 .75rem;font-size:clamp(1.75rem,6vw,2.5rem);font-weight:800;background:linear-gradient(135deg,#8b5cf6,#ec4899,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-emoji.svelte-l0lkr4{-webkit-text-fill-color:initial}.tagline.svelte-l0lkr4{margin:0;font-size:1.1rem;color:#6b7280;font-weight:500}.section-title.svelte-l0lkr4{text-align:center;margin:0 0 .5rem;font-size:1.5rem;font-weight:700;color:#374151}.section-desc.svelte-l0lkr4{text-align:center;margin:0 0 2rem;color:#6b7280}.flow-section.svelte-l0lkr4{margin-bottom:4rem}.flow-diagram.svelte-l0lkr4{display:flex;flex-direction:column;align-items:center;gap:0}.flow-step.svelte-l0lkr4{display:flex;flex-direction:column;align-items:center;width:100%;max-width:500px}.flow-card.svelte-l0lkr4{display:flex;align-items:flex-start;gap:1.25rem;width:100%;padding:1.5rem;background:#fff;border-radius:1rem;box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -1px #00000008;border:2px solid transparent;transition:all .2s ease}.flow-card.svelte-l0lkr4:hover{transform:translateY(-2px);box-shadow:0 8px 15px -3px #0000001a}.flow-card.development.svelte-l0lkr4{border-color:#a3a3a3}.flow-card.devserver.svelte-l0lkr4{border-color:#cb3837}.flow-card.github.svelte-l0lkr4{border-color:#24292e}.flow-card.vercel.svelte-l0lkr4{border-color:#000}.flow-card.production.svelte-l0lkr4{border-color:#22c55e;background:linear-gradient(135deg,#dcfce7,#bbf7d0)}.flow-icon.svelte-l0lkr4{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:.75rem;flex-shrink:0}.flow-icon.svelte-l0lkr4 svg:where(.svelte-l0lkr4){width:2rem;height:2rem}.flow-card.development.svelte-l0lkr4 .flow-icon:where(.svelte-l0lkr4){background:linear-gradient(135deg,#f5f5f5,#e5e5e5);color:#1f2937}.flow-card.devserver.svelte-l0lkr4 .flow-icon:where(.svelte-l0lkr4){background:linear-gradient(135deg,#fee2e2,#fecaca);color:#cb3837}.npm-icon.svelte-l0lkr4 svg:where(.svelte-l0lkr4){width:2.25rem;height:2.25rem}.flow-card.github.svelte-l0lkr4 .flow-icon:where(.svelte-l0lkr4){background:linear-gradient(135deg,#f6f8fa,#e1e4e8);color:#24292e}.flow-card.vercel.svelte-l0lkr4 .flow-icon:where(.svelte-l0lkr4){background:linear-gradient(135deg,#1f2937,#000);color:#fff}.flow-card.production.svelte-l0lkr4 .flow-icon:where(.svelte-l0lkr4){background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}.flow-content.svelte-l0lkr4{flex:1;min-width:0}.flow-content.svelte-l0lkr4 h3:where(.svelte-l0lkr4){margin:0 0 .25rem;font-size:1.1rem;font-weight:700;color:#1f2937}.flow-content.svelte-l0lkr4>p:where(.svelte-l0lkr4){margin:0 0 .75rem;font-size:.9rem;color:#6b7280}.flow-details.svelte-l0lkr4{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}.detail-badge.svelte-l0lkr4{display:inline-block;padding:.25rem .5rem;font-size:.75rem;font-weight:500;background:#f3f4f6;color:#4b5563;border-radius:.375rem}.command.svelte-l0lkr4{display:inline-block;padding:.375rem .75rem;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:.8rem;background:#1f2937;color:#f9fafb;border-radius:.5rem}.flow-features.svelte-l0lkr4{display:flex;flex-wrap:wrap;gap:.5rem}.feature.svelte-l0lkr4{display:inline-block;padding:.25rem .5rem;font-size:.7rem;font-weight:500;background:#ede9fe;color:#7c3aed;border-radius:.375rem}.feature.success.svelte-l0lkr4{background:#dcfce7;color:#166534;font-family:SF Mono,Monaco,Cascadia Code,monospace}.flow-arrow.svelte-l0lkr4{display:flex;align-items:center;justify-content:center;padding:.75rem 0;color:#8b5cf6}.flow-arrow.svelte-l0lkr4 svg:where(.svelte-l0lkr4){width:1.5rem;height:1.5rem;animation:svelte-l0lkr4-bounce 2s infinite}.flow-arrow.final.svelte-l0lkr4 svg:where(.svelte-l0lkr4){color:#22c55e}@keyframes svelte-l0lkr4-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}.tech-section.svelte-l0lkr4{margin-bottom:4rem}.tech-grid.svelte-l0lkr4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}.tech-card.svelte-l0lkr4{background:#fff;padding:1.5rem;border-radius:1rem;box-shadow:0 2px 4px #0000000d}.tech-header.svelte-l0lkr4{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.tech-icon.svelte-l0lkr4{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.5rem;flex-shrink:0}.tech-icon.svelte-l0lkr4 svg:where(.svelte-l0lkr4){width:1.25rem;height:1.25rem}.tech-icon.development.svelte-l0lkr4{background:#f5f5f5;color:#1f2937}.tech-icon.devserver.svelte-l0lkr4{background:#fee2e2;color:#cb3837}.tech-icon.github.svelte-l0lkr4{background:#f6f8fa;color:#24292e}.tech-icon.vercel.svelte-l0lkr4{background:#1f2937;color:#fff}.tech-header.svelte-l0lkr4 h3:where(.svelte-l0lkr4){margin:0;font-size:1rem;font-weight:600;color:#374151}.tech-list.svelte-l0lkr4{margin:0;padding:0 0 0 1.25rem;font-size:.875rem;color:#6b7280;line-height:1.8}.tech-list.svelte-l0lkr4 li:where(.svelte-l0lkr4)::marker{color:#c4b5fd}.commands-section.svelte-l0lkr4{margin-bottom:4rem}.commands-grid.svelte-l0lkr4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.command-card.svelte-l0lkr4{background:#fff;padding:1.25rem;border-radius:.75rem;box-shadow:0 2px 4px #0000000d}.command-card.svelte-l0lkr4 h4:where(.svelte-l0lkr4){margin:0 0 .5rem;font-size:.875rem;font-weight:600;color:#374151}.command-card.svelte-l0lkr4 code:where(.svelte-l0lkr4){display:block;padding:.5rem .75rem;margin-bottom:.5rem;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:.8rem;background:#1f2937;color:#f9fafb;border-radius:.375rem}.command-card.svelte-l0lkr4 p:where(.svelte-l0lkr4){margin:0;font-size:.75rem;color:#9ca3af}.nav-section.svelte-l0lkr4{text-align:center}.nav-section.svelte-l0lkr4 h3:where(.svelte-l0lkr4){margin:0 0 1.5rem;font-size:1.25rem;font-weight:600;color:#374151}.nav-cards.svelte-l0lkr4{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.nav-card.svelte-l0lkr4{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:#fff;border:2px solid #e5e7eb;border-radius:.75rem;color:#374151;text-decoration:none;font-weight:500;transition:all .15s ease}.nav-card.svelte-l0lkr4:hover{border-color:#8b5cf6;color:#8b5cf6;transform:translateY(-2px);box-shadow:0 4px 12px #8b5cf626}.nav-card.svelte-l0lkr4 svg:where(.svelte-l0lkr4){width:1.25rem;height:1.25rem}@media (max-width: 640px){main.svelte-l0lkr4{padding:1.5rem 1rem 3rem}.hero-content.svelte-l0lkr4 h1:where(.svelte-l0lkr4){flex-wrap:wrap}.flow-card.svelte-l0lkr4{padding:1rem;gap:1rem}.flow-icon.svelte-l0lkr4{width:2.5rem;height:2.5rem}.flow-icon.svelte-l0lkr4 svg:where(.svelte-l0lkr4){width:1.5rem;height:1.5rem}.tech-grid.svelte-l0lkr4,.commands-grid.svelte-l0lkr4{grid-template-columns:1fr}}