.hero{padding:var(--space-4xl) 0;text-align:center;position:relative}.hero-back-link{position:absolute;top:var(--space-lg);left:var(--space-lg);font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;transition:color .2s ease}.hero-back-link:hover{color:var(--color-text-secondary)}.hero:before{content:"";position:absolute;top:-120px;left:50%;transform:translate(-50%);width:600px;height:600px;background:radial-gradient(circle,var(--color-accent-glow) 0%,transparent 70%);pointer-events:none;z-index:0}.hero-content{position:relative;z-index:1}.hero-title{font-size:var(--text-5xl);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:var(--space-md);background:linear-gradient(135deg,var(--color-text-primary) 0%,var(--color-text-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:var(--text-xl);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-lg)}.hero-description{font-size:var(--text-lg);color:var(--color-text-muted);max-width:560px;margin:0 auto;line-height:1.7}.hero-description code{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-accent);background:var(--color-accent-glow);padding:.15em .4em;border-radius:var(--radius-sm)}@media (max-width: 768px){.hero{padding:var(--space-3xl) 0}.hero:before{width:300px;height:300px}}.why{padding:var(--space-4xl) 0;border-bottom:1px solid var(--color-border)}.why-body{max-width:620px;font-size:var(--text-base);color:var(--color-text-secondary);line-height:1.8}.why-body strong{color:var(--color-text-primary);font-weight:600}.demo{padding:var(--space-4xl) 0;border-bottom:1px solid var(--color-border)}.demo-card{background:var(--color-bg-raised);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-2xl);max-width:540px;margin:0 auto}.demo-steps{display:flex;gap:var(--space-sm);margin-bottom:var(--space-xl)}.demo-step{display:flex;align-items:center;gap:var(--space-xs);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);background:var(--color-bg-surface);transition:all var(--transition-fast)}.demo-step.active{color:var(--color-accent);background:var(--color-accent-glow);border:1px solid rgba(61,139,253,.25)}.demo-step.completed{color:var(--color-success);background:var(--color-success-bg)}.demo-step-number{font-weight:600;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:10px;background:var(--color-bg-hover)}.demo-step.active .demo-step-number{background:#3d8bfd4d}.demo-step.completed .demo-step-number{background:#34d3994d}.demo-field-group{margin-bottom:var(--space-lg)}.demo-label{display:block;font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-sm)}.demo-input{width:100%;padding:var(--space-sm) var(--space-md);font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-primary);background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.demo-input:focus{border-color:var(--color-border-focus);box-shadow:0 0 0 3px var(--color-accent-glow)}.demo-input::placeholder{color:var(--color-text-muted)}.demo-input:disabled{opacity:.5;cursor:not-allowed}.demo-select{width:100%;padding:var(--space-sm) var(--space-md);font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-primary);background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);outline:none;cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-sm) center;padding-right:var(--space-2xl)}.demo-select:focus{border-color:var(--color-border-focus);box-shadow:0 0 0 3px var(--color-accent-glow)}.demo-select:disabled{opacity:.5;cursor:not-allowed}.demo-file-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-xl) var(--space-md);border:2px dashed var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--space-lg);cursor:pointer;transition:all var(--transition-fast)}.demo-file-zone:hover{border-color:var(--color-accent);background:var(--color-accent-glow)}.demo-file-zone.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.demo-file-zone.has-file{border-color:var(--color-success);background:var(--color-success-bg)}.demo-file-zone.dragging{border-color:var(--color-accent);background:var(--color-accent-glow);box-shadow:0 0 0 3px #3d8bfd26}.demo-file-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.demo-file-input:disabled{cursor:not-allowed}.demo-file-icon{font-size:var(--text-2xl);margin-bottom:var(--space-sm)}.demo-file-text{font-size:var(--text-sm);color:var(--color-text-muted)}.demo-file-name{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-success);word-break:break-all}.demo-upload-btn{width:100%;padding:var(--space-sm) var(--space-lg);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;color:#fff;background:var(--color-accent);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.demo-upload-btn:hover:not(:disabled){background:var(--color-accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px #3d8bfd4d}.demo-upload-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.demo-status{margin-top:var(--space-lg);padding:var(--space-md);border-radius:var(--radius-md);font-size:var(--text-sm);display:flex;align-items:center;gap:var(--space-sm)}.demo-status.info{background:var(--color-info-bg);color:var(--color-info);border:1px solid rgba(96,165,250,.2)}.demo-status.success{background:var(--color-success-bg);color:var(--color-success);border:1px solid rgba(52,211,153,.2)}.demo-status.error{background:var(--color-error-bg);color:var(--color-error);border:1px solid rgba(248,113,113,.2)}.demo-status-icon{flex-shrink:0;font-size:var(--text-lg)}.demo-status-text{line-height:1.5}.demo-status-text code{font-family:var(--font-mono);font-size:var(--text-xs);background:#ffffff0f;padding:.15em .4em;border-radius:var(--radius-sm)}@keyframes spin{to{transform:rotate(360deg)}}.demo-spinner{width:16px;height:16px;border:2px solid rgba(96,165,250,.3);border-top-color:var(--color-info);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}@keyframes pulse-step{0%,to{opacity:1}50%{opacity:.5}}.demo-step.pulsing{animation:pulse-step 1.5s ease-in-out infinite}.demo-result{display:flex;flex-direction:column;gap:var(--space-lg)}.demo-video-wrapper{border-radius:var(--radius-md);overflow:hidden;background:#000;border:1px solid var(--color-border)}.demo-video{width:100%;display:block}.demo-actions{display:flex;gap:var(--space-sm)}.demo-download-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--space-sm) var(--space-lg);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;color:#fff;background:var(--color-accent);border:none;border-radius:var(--radius-md);text-decoration:none;cursor:pointer;transition:all var(--transition-fast)}.demo-download-btn:hover{background:var(--color-accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px #3d8bfd4d}.demo-reset-btn{flex:1;padding:var(--space-sm) var(--space-lg);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;color:var(--color-text-secondary);background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.demo-reset-btn:hover{color:var(--color-text-primary);border-color:var(--color-text-muted);background:var(--color-bg-hover)}.demo-sample-divider{display:flex;align-items:center;gap:var(--space-md);margin:var(--space-lg) 0 var(--space-md)}.demo-sample-divider:before,.demo-sample-divider:after{content:"";flex:1;height:1px;background:var(--color-border)}.demo-sample-divider span{font-size:var(--text-xs);color:var(--color-text-muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em}.demo-sample-btn{width:100%;padding:var(--space-sm) var(--space-lg);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;color:var(--color-accent);background:transparent;border:1px solid var(--color-accent);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.demo-sample-btn:hover:not(:disabled){background:var(--color-accent-glow);transform:translateY(-1px);box-shadow:0 4px 12px #3d8bfd33}.demo-sample-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.demo-steps-wide{max-width:1000px;margin:0 auto var(--space-xl)}.demo-panels{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);max-width:1000px;margin:0 auto}.demo-panel{background:var(--color-bg-raised);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-md)}.demo-panel-header{display:flex;align-items:center;justify-content:space-between}.demo-panel-label{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted)}.demo-panel-meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-panel-status{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:180px;gap:var(--space-md)}.demo-panel-status .demo-status{margin-top:0;width:100%}@media (max-width: 768px){.demo-card{padding:var(--space-lg)}.demo-steps{flex-wrap:wrap}.demo-actions{flex-direction:column}.demo-panels{grid-template-columns:1fr}}.demo-view-pipeline-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-xl);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;color:#fff;background:var(--color-accent);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);animation:pulse-pipeline 2s ease-in-out infinite;white-space:nowrap;margin-top:var(--space-sm)}.demo-view-pipeline-btn:hover{background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 6px 20px #3d8bfd59;animation:none}@keyframes pulse-pipeline{0%{box-shadow:0 0 #3d8bfd80}50%{box-shadow:0 0 0 10px #3d8bfd00}to{box-shadow:0 0 #3d8bfd00}}.diagram{padding:var(--space-4xl) 0;border-bottom:1px solid var(--color-border)}.diagram-container{background:var(--color-bg-raised);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-2xl);overflow-x:auto}.diagram-svg{display:block;margin:0 auto;width:100%;height:auto}.diagram-node-rect{fill:var(--color-bg-surface);stroke:var(--color-border);stroke-width:1.5;rx:8;ry:8;transition:all var(--transition-fast)}.diagram-node-rect.highlight{stroke:var(--color-accent);stroke-width:2;fill:#3d8bfd1a;filter:drop-shadow(0 0 8px var(--color-accent));animation:pulse-glow 2s ease-in-out infinite alternate}@keyframes pulse-glow{0%{filter:drop-shadow(0 0 6px var(--color-accent))}to{filter:drop-shadow(0 0 14px var(--color-accent))}}.diagram-node-rect.highlight-error{stroke:var(--color-error);stroke-width:2;fill:#f871711a;filter:drop-shadow(0 0 8px var(--color-error));animation:pulse-glow-error 2s ease-in-out infinite alternate}@keyframes pulse-glow-error{0%{filter:drop-shadow(0 0 6px var(--color-error))}to{filter:drop-shadow(0 0 14px var(--color-error))}}.diagram-node-label{font-family:var(--font-mono);font-size:11px;font-weight:500;fill:var(--color-text-primary);text-anchor:middle;dominant-baseline:central}.diagram-node-sublabel{font-family:var(--font-mono);font-size:9px;fill:var(--color-text-muted);text-anchor:middle;dominant-baseline:central}.diagram-arrow{stroke:var(--color-border);stroke-width:1.5;fill:none;marker-end:url(#arrowhead);transition:all .3s ease}.diagram-arrow.edge-active{stroke:var(--color-accent);stroke-width:2;stroke-dasharray:8 4;animation:march .6s linear infinite}@keyframes march{to{stroke-dashoffset:-12}}.diagram-arrow-label{font-family:var(--font-mono);font-size:10px;font-weight:500;fill:var(--color-text-secondary);text-anchor:middle;dominant-baseline:central}@media (max-width: 768px){.diagram-container{padding:var(--space-lg) var(--space-md)}}.diagram-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-lg);margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--color-border)}.diagram-stage-label{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-secondary)}.diagram-next-btn{padding:var(--space-md) var(--space-2xl);font-family:var(--font-mono);font-size:var(--text-base);font-weight:700;color:#fff;background:var(--color-accent);border:2px solid var(--color-accent);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;letter-spacing:.02em}.diagram-next-btn:hover:not(:disabled){background:var(--color-accent-hover);border-color:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 6px 20px #3d8bfd59}.diagram-next-btn.pulsing{animation:pulse-btn 1.4s ease-in-out infinite;box-shadow:0 0 #3d8bfd80}@keyframes pulse-btn{0%{box-shadow:0 0 #3d8bfd99}50%{box-shadow:0 0 0 12px #3d8bfd00}to{box-shadow:0 0 #3d8bfd00}}.diagram-next-hint{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent);letter-spacing:.04em;animation:fade-hint 1.6s ease-in-out infinite}@keyframes fade-hint{0%,to{opacity:1}50%{opacity:.4}}.diagram-next-btn:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}.stack{padding:var(--space-4xl) 0;border-bottom:1px solid var(--color-border)}.stack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-md)}.stack-item{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-lg);background:var(--color-bg-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast)}.stack-item:hover{border-color:var(--color-accent);background:var(--color-bg-surface);transform:translateY(-2px)}.stack-item-icon{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);background:var(--color-accent-glow);border-radius:var(--radius-sm)}.stack-item-content{flex:1;min-width:0}.stack-item-name{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-xs)}.stack-item-desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5}.next{padding:var(--space-4xl) 0}.next-intro{font-size:var(--text-base);color:var(--color-text-secondary);margin-bottom:var(--space-xl);max-width:560px;line-height:1.7}.next-list{display:flex;flex-direction:column;gap:var(--space-md)}.next-item{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-lg);background:var(--color-bg-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast)}.next-item:hover{border-color:var(--color-border-focus)}.next-item-badge{flex-shrink:0;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;color:var(--color-warning);background:#fbbf241a;border:1px solid rgba(251,191,36,.2);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);white-space:nowrap}.next-item-content{flex:1}.next-item-title{font-size:var(--text-base);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-xs)}.next-item-desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6}:root{--color-bg: #0a0a0f;--color-bg-raised: #12121a;--color-bg-surface: #1a1a26;--color-bg-hover: #222233;--color-border: #2a2a3d;--color-border-focus: #3d8bfd;--color-text-primary: #e8e8f0;--color-text-secondary: #9898b0;--color-text-muted: #6a6a82;--color-accent: #3d8bfd;--color-accent-hover: #5a9eff;--color-accent-glow: rgba(61, 139, 253, .15);--color-success: #34d399;--color-success-bg: rgba(52, 211, 153, .1);--color-error: #f87171;--color-error-bg: rgba(248, 113, 113, .1);--color-warning: #fbbf24;--color-info: #60a5fa;--color-info-bg: rgba(96, 165, 250, .1);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.75rem;--text-5xl: 3.5rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--space-4xl: 6rem;--max-width: 1120px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--transition-fast: .15s ease;--transition-base: .25s ease}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:1.6;color:var(--color-text-primary);background-color:var(--color-bg);min-height:100vh}#root{display:flex;flex-direction:column;min-height:100vh}a{color:var(--color-accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-accent-hover)}img{max-width:100%;display:block}.app{display:flex;flex-direction:column;min-height:100vh}.app-main{flex:1;width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl)}.section{padding:var(--space-4xl) 0;border-bottom:1px solid var(--color-border)}.section:last-child{border-bottom:none}.section-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--color-accent);margin-bottom:var(--space-md)}.section-title{font-size:var(--text-2xl);font-weight:700;color:var(--color-text-primary);margin-bottom:var(--space-lg)}.app-footer{text-align:center;padding:var(--space-2xl) var(--space-xl);color:var(--color-text-muted);font-size:var(--text-sm);border-top:1px solid var(--color-border)}.app-footer a{color:var(--color-text-secondary)}.app-footer a:hover{color:var(--color-accent)}@media (max-width: 768px){:root{--text-5xl: 2.25rem;--text-4xl: 1.875rem;--text-3xl: 1.5rem;--space-4xl: 3rem}.app-main{padding:0 var(--space-md)}}