@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");:root{--color-primary: #6366f1;--color-primary-dark: #4f46e5;--color-primary-light: #818cf8;--color-primary-subtle: rgba(99, 102, 241, 0.1);--color-secondary: #10b981;--color-secondary-dark: #059669;--color-secondary-light: #34d399;--color-accent: #f59e0b;--color-danger: #ef4444;--color-warning: #f59e0b;--color-info: #3b82f6;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-400: #9ca3af;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-800: #1f2937;--color-gray-900: #111827;--color-text: var(--color-gray-900);--color-text-secondary: var(--color-gray-600);--color-text-muted: var(--color-gray-400);--color-bg: #ffffff;--color-bg-secondary: var(--color-gray-50);--color-bg-elevated: #ffffff;--color-border: var(--color-gray-200);--color-border-strong: var(--color-gray-300);--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);--gradient-card: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);--shadow-glow: 0 0 40px rgba(99, 102, 241, 0.3);--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;--font-mono: 'JetBrains Mono', Consolas, Monaco, 'Courier New', monospace;--space-1: 0.25rem;--space-2: 0.5rem;--space-3: 0.75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--radius-sm: 0.375rem;--radius-md: 0.5rem;--radius-lg: 0.75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--transition-fast: 150ms ease;--transition-base: 200ms ease;--transition-slow: 300ms ease;--max-width: 1280px;--nav-height: 72px}@media (prefers-color-scheme: dark){:root{--color-text: #f9fafb;--color-text-secondary: #d1d5db;--color-text-muted: #6b7280;--color-bg: #0f172a;--color-bg-secondary: #1e293b;--color-bg-elevated: #1e293b;--color-border: #334155;--color-border-strong: #475569;--gradient-card: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(30, 41, 59, 0.7) 100%);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5)}}*,*::before,*::after{box-sizing:border-box}*{margin:0}html{scroll-behavior:smooth}body{font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}.main-nav{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,0.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);height:var(--nav-height)}@media (prefers-color-scheme: dark){.main-nav{background:rgba(15,23,42,0.85)}}.nav-container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-6);display:flex;justify-content:space-between;align-items:center;height:100%}.nav-logo{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-text);font-weight:700;font-size:1.25rem;letter-spacing:-0.025em}.nav-logo img{height:36px;width:auto}.nav-logo:hover{color:var(--color-primary)}.nav-menu{display:flex;gap:var(--space-1);align-items:center}.nav-link{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);text-decoration:none;color:var(--color-text-secondary);font-weight:500;font-size:0.9375rem;border-radius:var(--radius-md);transition:all var(--transition-fast)}.nav-link:hover{color:var(--color-text);background:var(--color-bg-secondary)}.nav-link.active{color:var(--color-primary);background:var(--color-primary-subtle)}.nav-link i{font-size:1rem}.nav-toggle{display:none;flex-direction:column;gap:5px;padding:var(--space-2);background:none;border:none;cursor:pointer}.nav-toggle span{display:block;width:24px;height:2px;background:var(--color-text);border-radius:2px;transition:all var(--transition-fast)}.main-content{max-width:var(--max-width);margin:0 auto;padding:var(--space-8) var(--space-6);min-height:calc(100vh - var(--nav-height) - 300px)}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.25;letter-spacing:-0.025em;color:var(--color-text)}h1{font-size:clamp(2rem, 5vw, 3rem);margin-top:var(--space-8);margin-bottom:var(--space-6)}h2{font-size:clamp(1.5rem, 4vw, 2rem);margin-top:var(--space-12);margin-bottom:var(--space-4)}h3{font-size:clamp(1.25rem, 3vw, 1.5rem);margin-top:var(--space-8);margin-bottom:var(--space-3)}h4{font-size:1.25rem;margin-top:var(--space-6);margin-bottom:var(--space-2)}h5{font-size:1.125rem}h6{font-size:1rem}p{margin:var(--space-4) 0;color:var(--color-text-secondary)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark);text-decoration:underline}strong{font-weight:600}ul,ol{padding-left:var(--space-6);margin:var(--space-4) 0}ul li,ol li{margin:var(--space-2) 0;color:var(--color-text-secondary)}pre{background:var(--color-gray-900);border-radius:var(--radius-lg);padding:var(--space-4);overflow-x:auto;margin:var(--space-6) 0;font-family:var(--font-mono);font-size:0.875rem;line-height:1.7}pre code{background:none;padding:0;color:#e2e8f0;border-radius:0}code{background:var(--color-bg-secondary);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:0.875em;color:var(--color-primary);border:1px solid var(--color-border)}table{width:100%;border-collapse:collapse;margin:var(--space-6) 0;font-size:0.9375rem}th,td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--color-border)}th{background:var(--color-bg-secondary);font-weight:600;color:var(--color-text)}tr:hover td{background:var(--color-bg-secondary)}blockquote{border-left:4px solid var(--color-primary);padding:var(--space-4) var(--space-6);margin:var(--space-6) 0;background:var(--color-bg-secondary);border-radius:0 var(--radius-md) var(--radius-md) 0}blockquote p{margin:0;color:var(--color-text);font-style:italic}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-weight:600;font-size:0.9375rem;text-decoration:none;cursor:pointer;border:none;transition:all var(--transition-fast)}.btn:hover{text-decoration:none;transform:translateY(-2px)}.btn i{font-size:1rem}.btn-primary{background:var(--color-primary);color:white;box-shadow:var(--shadow-md)}.btn-primary:hover{background:var(--color-primary-dark);box-shadow:var(--shadow-lg);color:white}.btn-secondary{background:var(--color-bg);color:var(--color-text);border:2px solid var(--color-border-strong)}.btn-secondary:hover{background:var(--color-bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.btn-github{background:var(--color-gray-900);color:white}@media (prefers-color-scheme: dark){.btn-github{background:var(--color-gray-700)}}.btn-github:hover{background:var(--color-gray-800);color:white}.btn-large{padding:var(--space-4) var(--space-8);font-size:1rem;border-radius:var(--radius-lg)}.site-footer{background:var(--color-bg-secondary);border-top:1px solid var(--color-border);margin-top:var(--space-24)}.footer-container{max-width:var(--max-width);margin:0 auto;padding:var(--space-16) var(--space-6) var(--space-8);display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:var(--space-10)}.footer-section h4{font-size:0.875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted);margin-bottom:var(--space-4)}.footer-section p{font-size:0.9375rem;color:var(--color-text-secondary);margin:0}.footer-section ul{list-style:none;padding:0;margin:0}.footer-section li{margin:var(--space-2) 0}.footer-section a{color:var(--color-text-secondary);font-size:0.9375rem}.footer-section a:hover{color:var(--color-primary)}.social-links{display:flex;gap:var(--space-4);margin-top:var(--space-4)}.social-links a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--color-bg);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:1.25rem;transition:all var(--transition-fast)}.social-links a:hover{background:var(--color-primary);color:white;transform:translateY(-2px)}.footer-bottom{text-align:center;padding:var(--space-6);border-top:1px solid var(--color-border);font-size:0.875rem;color:var(--color-text-muted)}.footer-bottom a{color:var(--color-primary)}.hero-section{text-align:center;padding:var(--space-20) var(--space-8);background:var(--gradient-hero);border-radius:var(--radius-2xl);margin-bottom:var(--space-16);position:relative;overflow:hidden}.hero-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 20%, rgba(99,102,241,0.3) 0%, transparent 50%),radial-gradient(circle at 70% 80%, rgba(16,185,129,0.2) 0%, transparent 50%);pointer-events:none}.hero-title{font-size:clamp(2.5rem, 6vw, 4rem);font-weight:800;color:white;margin:0 0 var(--space-4);letter-spacing:-0.03em;position:relative}.hero-subtitle{font-size:clamp(1.125rem, 2.5vw, 1.5rem);color:rgba(255,255,255,0.8);margin:0 0 var(--space-8);max-width:600px;margin-left:auto;margin-right:auto;position:relative}.hero-buttons{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;position:relative}.features-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:var(--space-6);margin:var(--space-12) 0}.feature-card{background:var(--color-bg-elevated);padding:var(--space-8);border-radius:var(--radius-xl);border:1px solid var(--color-border);transition:all var(--transition-base)}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--color-primary-light)}.feature-icon{font-size:2.5rem;margin-bottom:var(--space-4);display:inline-block}.feature-card h3{margin:0 0 var(--space-3);font-size:1.25rem;color:var(--color-text)}.feature-card p{margin:0;font-size:0.9375rem;line-height:1.6}.use-cases{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:var(--space-4);margin:var(--space-8) 0}.use-case{background:var(--color-bg-elevated);padding:var(--space-6);border-radius:var(--radius-lg);border-left:4px solid var(--color-secondary)}.use-case h3{margin:0 0 var(--space-2);font-size:1rem;color:var(--color-text)}.use-case p{margin:0;font-size:0.875rem}.help-section{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:var(--space-6);margin:var(--space-12) 0}.help-card{text-align:center;padding:var(--space-8);background:var(--color-bg-elevated);border-radius:var(--radius-xl);border:1px solid var(--color-border);transition:all var(--transition-base)}.help-card:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-lg)}.help-card h3{margin:0 0 var(--space-3);font-size:1.25rem}.help-card p{margin:0 0 var(--space-4);font-size:0.9375rem}.help-card a{font-weight:600}.update-card{padding:var(--space-6);background:var(--color-bg-elevated);border-radius:var(--radius-lg);border:1px solid var(--color-border);margin:var(--space-4) 0}.update-card h3{margin:0 0 var(--space-2);font-size:1.125rem}.update-card h3 a{color:var(--color-text)}.update-card h3 a:hover{color:var(--color-primary)}.update-card time{font-size:0.875rem;color:var(--color-text-muted)}.update-card p{margin:var(--space-3) 0 0}.footer-cta{text-align:center;padding:var(--space-16);background:var(--gradient-hero);border-radius:var(--radius-2xl);margin:var(--space-16) 0;position:relative;overflow:hidden}.footer-cta::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 50%, rgba(99,102,241,0.2) 0%, transparent 70%);pointer-events:none}.footer-cta h2{color:white;margin:0 0 var(--space-4);position:relative}.footer-cta p{color:rgba(255,255,255,0.8);margin:0 0 var(--space-8);font-size:1.125rem;position:relative}.footer-cta .btn{position:relative}.guide-container{display:grid;grid-template-columns:260px 1fr;gap:var(--space-12);margin-top:var(--space-8)}.guide-sidebar{position:sticky;top:calc(var(--nav-height) + var(--space-8));height:fit-content;max-height:calc(100vh - var(--nav-height) - var(--space-16));overflow-y:auto}.guide-sidebar h4{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-text-muted);margin-bottom:var(--space-4)}.guide-nav{display:flex;flex-direction:column;gap:var(--space-1)}.guide-nav-item{padding:var(--space-3) var(--space-4);color:var(--color-text-secondary);text-decoration:none;border-radius:var(--radius-md);font-size:0.9375rem;transition:all var(--transition-fast)}.guide-nav-item:hover{color:var(--color-text);background:var(--color-bg-secondary)}.guide-nav-item.active{color:var(--color-primary);background:var(--color-primary-subtle);font-weight:500}.guide-content{max-width:800px}.guide-header{margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--color-border)}.guide-header h1{margin:0 0 var(--space-3)}.guide-description{font-size:1.25rem;color:var(--color-text-secondary);margin:0}.guide-meta{display:flex;gap:var(--space-6);margin-top:var(--space-4);font-size:0.875rem;color:var(--color-text-muted)}.guide-body{line-height:1.8}.guide-body h2{margin-top:var(--space-12);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}.guide-body h3{margin-top:var(--space-8)}.guide-footer{margin-top:var(--space-16);padding-top:var(--space-8);border-top:1px solid var(--color-border)}.guide-navigation{display:flex;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-8)}.prev-guide,.next-guide{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-6);background:var(--color-bg-secondary);border-radius:var(--radius-lg);text-decoration:none;color:var(--color-text);font-weight:500;transition:all var(--transition-fast)}.prev-guide:hover,.next-guide:hover{background:var(--color-primary-subtle);color:var(--color-primary);text-decoration:none}.guide-feedback{text-align:center;padding:var(--space-8);background:var(--color-bg-secondary);border-radius:var(--radius-xl)}.guide-feedback h4{margin:0 0 var(--space-4)}.guide-feedback p{margin:0}.feedback-link{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--color-primary);color:white;border-radius:var(--radius-md);font-weight:500}.feedback-link:hover{background:var(--color-primary-dark);color:white;text-decoration:none}.tutorial-header{margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--color-border)}.tutorial-description{font-size:1.25rem;color:var(--color-text-secondary);margin:var(--space-4) 0}.difficulty-badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);background:var(--color-primary-subtle);color:var(--color-primary);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;border-radius:var(--radius-full)}.api-header{margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--color-border)}.api-description{font-size:1.25rem;color:var(--color-text-secondary);margin:var(--space-4) 0 0}.alert{padding:var(--space-4) var(--space-6);border-radius:var(--radius-lg);margin:var(--space-6) 0;font-size:0.9375rem}.alert p{margin:0;color:inherit}.alert-info{background:rgba(59,130,246,0.1);border-left:4px solid var(--color-info);color:#1e40af}@media (prefers-color-scheme: dark){.alert-info{color:#93c5fd}}.alert-success{background:rgba(16,185,129,0.1);border-left:4px solid var(--color-secondary);color:#065f46}@media (prefers-color-scheme: dark){.alert-success{color:#6ee7b7}}.alert-warning{background:rgba(245,158,11,0.1);border-left:4px solid var(--color-warning);color:#92400e}@media (prefers-color-scheme: dark){.alert-warning{color:#fcd34d}}.alert-danger{background:rgba(239,68,68,0.1);border-left:4px solid var(--color-danger);color:#991b1b}@media (prefers-color-scheme: dark){.alert-danger{color:#fca5a5}}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-8{margin-top:var(--space-8)}.mt-16{margin-top:var(--space-16)}.mb-1{margin-bottom:var(--space-1)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-8{margin-bottom:var(--space-8)}.mb-16{margin-bottom:var(--space-16)}.toc{background:var(--color-bg-secondary);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-8)}.toc::before{content:'On this page';display:block;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-text-muted);margin-bottom:var(--space-4)}.toc ul{list-style:none;padding:0;margin:0}.toc li{margin:var(--space-2) 0}.toc a{font-size:0.875rem;color:var(--color-text-secondary)}.toc a:hover{color:var(--color-primary)}@media (max-width: 1024px){.guide-container{grid-template-columns:220px 1fr;gap:var(--space-8)}}@media (max-width: 768px){.nav-menu{position:absolute;top:var(--nav-height);left:0;right:0;background:var(--color-bg);border-bottom:1px solid var(--color-border);flex-direction:column;padding:var(--space-4);display:none;box-shadow:var(--shadow-lg)}.nav-menu.active{display:flex}.nav-link{width:100%;padding:var(--space-3) var(--space-4)}.nav-toggle{display:flex}.hero-section{padding:var(--space-12) var(--space-4);border-radius:var(--radius-xl)}.features-grid{grid-template-columns:1fr}.guide-container{grid-template-columns:1fr;gap:var(--space-6)}.guide-sidebar{position:static;max-height:none;padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}.guide-navigation{flex-direction:column}.footer-container{grid-template-columns:1fr}.footer-cta{padding:var(--space-8);border-radius:var(--radius-xl)}}.mermaid{margin:var(--space-6) 0;text-align:center}.mermaid svg{max-width:100%;height:auto}.code-copy-btn{position:absolute;top:var(--space-2);right:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-gray-700);color:var(--color-gray-300);border:none;border-radius:var(--radius-sm);font-size:0.75rem;font-weight:500;cursor:pointer;opacity:0;transition:all var(--transition-fast)}.code-copy-btn:hover{background:var(--color-gray-600);color:white}pre{position:relative}pre:hover .code-copy-btn{opacity:1}.home-container{max-width:100%}.feature-icon i{font-size:2.5rem;color:var(--color-primary)}.use-case h3 i{margin-right:var(--space-2);color:var(--color-secondary)}.help-card h3 i{margin-right:var(--space-2);color:var(--color-primary)}.page-header{margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--color-border)}.page-description{font-size:1.25rem;color:var(--color-text-secondary);margin:var(--space-4) 0 0}.page-content{line-height:1.8}.tutorial-meta{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-4)}.duration{font-size:0.875rem;color:var(--color-text-muted)}.duration i{margin-right:var(--space-1)}.toc a.active{color:var(--color-primary);font-weight:500}.toc .toc-h3{padding-left:var(--space-4)}.code-copy-btn.copied{background:var(--color-secondary)}