@import "https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap";body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}#root{width:100%;min-height:100vh}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-base:#0a0f19;--blue:#6366f1;--blue-bright:#818cf8;--purple:#8b5cf6;--teal:#14b8a6;--green:#10b981;--orange:#f59e0b;--red:#ef4444;--bg:#060b14;--bg-card:#111c2d;--bg-card-hover:#162235;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--border:#ffffff14;--border-light:#ffffff0d;--glass-bg:#0f172ab3;--glass-border:#ffffff1a;--font-display:"Syne", sans-serif;--font-body:"DM Sans", sans-serif;--font-mono:"JetBrains Mono", monospace;--radius:16px;--radius-sm:10px;--shadow:0 4px 24px #0006;--shadow-blue:0 4px 24px #6366f133}[data-theme=light]{--bg:#f1f5f9;--bg-base:#fff;--bg-card:#fff;--bg-card-hover:#f8fafc;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--border:#0000001a;--border-light:#0000000d;--glass-bg:#fffc;--glass-border:#0000001a}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--bg-base);color:var(--text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-base)}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--blue)}.navbar{z-index:100;background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;padding:14px 40px;display:flex;position:sticky;top:0}.nav-brand{align-items:center;gap:10px;display:flex}.nav-logo{border-radius:8px;width:36px;height:36px}.nav-title{font-family:var(--font-display);color:var(--text-primary);letter-spacing:-.5px;font-size:1.3rem;font-weight:800}.nav-title .accent{color:var(--blue-bright)}.nav-links{align-items:center;gap:20px;display:flex}.nav-item{color:var(--text-secondary);align-items:center;gap:8px;font-size:.95rem;font-weight:500;text-decoration:none;transition:all .25s;display:flex}.nav-icon{opacity:.7;font-size:1.1rem}.nav-item:hover .nav-icon{opacity:1}.nav-item:hover{color:var(--text-primary)}.nav-badge{background:var(--blue-glow);color:var(--blue-bright);font-size:.78rem;font-weight:600;font-family:var(--font-mono);border:1px solid #3b82f64d;border-radius:20px;padding:3px 10px}.hero{grid-template-columns:1fr 1fr;align-items:center;gap:60px;max-width:1200px;margin:0 auto;padding:80px 40px;display:grid;position:relative}.hero:before{content:"";pointer-events:none;background:radial-gradient(circle,#3b82f614 0%,#0000 70%);width:600px;height:600px;position:absolute;top:-100px;left:-200px}.hero-tag{color:var(--blue-bright);background:#3b82f61a;border:1px solid #3b82f633;border-radius:30px;align-items:center;gap:10px;width:fit-content;margin-bottom:24px;padding:6px 16px;font-size:.9rem;font-weight:500;display:inline-flex}.hero-tag svg{color:#facc15;font-size:1rem}.hero-title{font-family:var(--font-display);letter-spacing:-1px;margin-bottom:20px;font-size:3rem;font-weight:800;line-height:1.15}.gradient-text{background:linear-gradient(135deg, var(--blue-bright), var(--purple));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hero-desc{color:var(--text-secondary);max-width:480px;margin-bottom:36px;font-size:1.05rem;line-height:1.7}.hero-stats{align-items:center;gap:24px;display:flex}.stat{flex-direction:column;display:flex}.stat-num{font-family:var(--font-display);color:var(--blue-bright);font-size:1.8rem;font-weight:800}.stat-label{color:var(--text-muted);font-size:.8rem}.stat-divider{background:var(--border);width:1px;height:40px}.hero-visual{position:relative}.code-preview{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow), 0 0 60px #3b82f614;animation:4s ease-in-out infinite float;overflow:hidden}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.code-preview-header{border-bottom:1px solid var(--border);background:#ffffff08;align-items:center;gap:8px;padding:12px 16px;display:flex}.dot{border-radius:50%;width:12px;height:12px}.dot.red{background:#ff5f57}.dot.yellow{background:#ffbd2e}.dot.green{background:#28c840}.code-preview-title{font-family:var(--font-mono);color:var(--text-muted);margin-left:8px;font-size:.8rem}.code-preview-body{font-family:var(--font-mono);color:#abb2bf;background:#0d1117;padding:20px;font-size:.85rem;line-height:1.7}.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:all .3s}.feature-card:hover{border-color:var(--blue);background:var(--bg-card-hover);box-shadow:var(--shadow-blue);transform:translateY(-4px)}.feature-icon{margin-bottom:12px;font-size:2rem}.feature-card h3{font-family:var(--font-display);color:var(--text-primary);margin-bottom:8px;font-size:1rem;font-weight:700}.app{width:100%;min-height:100vh}.feature-card p{color:var(--text-secondary);font-size:.85rem;line-height:1.6}.main-app-header{margin-bottom:40px}.result-card *{text-align:left}.main-app-header h2{font-family:var(--font-display);margin-bottom:8px;font-size:2rem;font-weight:800}.main-app-header p{color:var(--text-secondary);font-size:1rem}.panel-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px}.panel-title{font-family:var(--font-display);color:var(--text-primary);margin-bottom:20px;font-size:1.1rem;font-weight:700}.upload-zone{border:2px dashed var(--border-light);border-radius:var(--radius-sm);text-align:center;cursor:pointer;justify-content:center;align-items:center;min-height:140px;margin-bottom:20px;padding:32px 20px;transition:all .25s;display:flex}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--blue);background:var(--blue-glow)}.upload-zone.has-file{border-style:solid;border-color:var(--green);background:#10b9810d}.upload-placeholder{flex-direction:column;align-items:center;gap:8px;display:flex}.upload-icon{opacity:.6;font-size:2.5rem}.upload-text{color:var(--text-secondary);font-size:.95rem}.upload-hint{color:var(--text-muted);font-size:.8rem}.upload-formats{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px;display:flex}.format-badge{color:var(--blue-bright);font-size:.75rem;font-family:var(--font-mono);background:#3b82f61a;border:1px solid #3b82f633;border-radius:20px;padding:2px 10px;font-weight:600}.file-info{align-items:center;gap:14px;width:100%;padding:4px 8px;display:flex}.file-icon-big{font-size:2rem}.file-details{text-align:left;flex-direction:column;flex:1;display:flex}.file-name{color:var(--text-primary);word-break:break-all;font-size:.9rem;font-weight:600}.file-size{color:var(--text-muted);font-size:.78rem}.file-remove{color:var(--red);cursor:pointer;background:#ef44441a;border:1px solid #ef444433;border-radius:6px;padding:4px 8px;font-size:.8rem;transition:all .2s}.file-remove:hover{background:#ef444433}.options-grid{flex-direction:column;gap:16px;margin-bottom:16px;display:flex}.option-group{flex-direction:column;gap:8px;display:flex}.option-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.82rem;font-weight:600}.option-buttons{gap:8px;display:flex}.opt-btn{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.88rem;font-family:var(--font-body);cursor:pointer;flex:1;padding:9px 12px;font-weight:500;transition:all .2s}.opt-btn:hover{border-color:var(--blue);color:var(--text-primary)}.opt-btn.active{background:var(--blue-glow);border-color:var(--blue);color:var(--blue-bright);font-weight:600}.opt-btn.active.ai{border-color:var(--purple);color:#a78bfa;background:#8b5cf61a}.mode-info{border-radius:var(--radius-sm);color:var(--text-secondary);background:#3b82f60d;border:1px solid #3b82f61a;margin-bottom:16px;padding:12px 14px;font-size:.84rem;line-height:1.5}.mode-info strong{color:var(--text-primary)}.btn-generate{background:linear-gradient(135deg, var(--blue), #2563eb);border-radius:var(--radius-sm);color:#fff;width:100%;font-size:1rem;font-weight:700;font-family:var(--font-display);cursor:pointer;letter-spacing:.3px;border:none;justify-content:center;align-items:center;gap:8px;margin-bottom:14px;padding:14px;transition:all .3s;display:flex}.btn-generate:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);transform:translateY(-2px);box-shadow:0 8px 24px #3b82f659}.btn-generate:disabled{opacity:.7;cursor:not-allowed;transform:none}.btn-generate.loading{background:linear-gradient(135deg,#1e3a6e,#162d54)}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-box{border-radius:var(--radius-sm);color:#fca5a5;background:#ef444414;border:1px solid #ef444433;align-items:flex-start;gap:10px;margin-bottom:12px;padding:12px 14px;font-size:.88rem;display:flex}.info-box{border-radius:var(--radius-sm);color:#fcd34d;background:#f59e0b0f;border:1px solid #f59e0b26;padding:12px 14px;font-size:.83rem;line-height:1.5}.info-box strong{color:#fbbf24}.result-card{padding:0;overflow:hidden}.result-header{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:16px 20px;display:flex}.tabs{gap:4px;display:flex}.tab{border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.88rem;font-family:var(--font-body);cursor:pointer;background:0 0;border:1px solid #0000;align-items:center;gap:6px;padding:8px 16px;font-weight:500;transition:all .2s;display:flex}.tab:hover{color:var(--text-primary);background:#ffffff0a}.tab.active{background:var(--blue-glow);color:var(--blue-bright);border-color:#3b82f64d;font-weight:600}.tab-badge{background:var(--blue);color:#fff;border-radius:20px;padding:1px 6px;font-size:.7rem;font-weight:700}.result-actions{align-items:center;gap:8px;display:flex}.ai-badge{color:#a78bfa;background:#8b5cf61f;border:1px solid #8b5cf640;border-radius:20px;padding:4px 10px;font-size:.78rem;font-weight:600}.action-btn{border-radius:var(--radius-sm);font-size:.85rem;font-family:var(--font-body);cursor:pointer;border:1px solid;padding:7px 14px;font-weight:600;transition:all .2s}.copy-btn{color:#34d399;background:#10b9811a;border-color:#10b98140}.copy-btn:hover{background:#10b98133}.download-btn{color:#a78bfa;background:#8b5cf61a;border-color:#8b5cf640}.download-btn:hover{background:#8b5cf633}.code-container{overflow:auto}.code-stats{border-top:1px solid var(--border);color:var(--text-muted);font-size:.78rem;font-family:var(--font-mono);gap:20px;padding:10px 20px;display:flex}.empty-panel{justify-content:center;align-items:center;min-height:500px;display:flex}.empty-content{text-align:center;max-width:380px}.empty-icon{opacity:.4;margin-bottom:20px;font-size:4rem;animation:2.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.empty-content h3{font-family:var(--font-display);margin-bottom:10px;font-size:1.3rem;font-weight:700}.empty-content p{color:var(--text-secondary);margin-bottom:28px;font-size:.9rem}.empty-steps{flex-direction:column;gap:12px;display:flex}.step{text-align:left;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);align-items:center;gap:12px;padding:10px 14px;display:flex}.step-num{background:var(--blue);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:.75rem;font-weight:700;display:flex}.step span:last-child{color:var(--text-secondary);font-size:.85rem}.footer{border-top:1px solid var(--border);margin-top:20px;padding:30px 40px}.footer-content{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;max-width:1200px;margin:0 auto;display:flex}.footer-brand{flex-direction:column;display:flex}.footer-title{font-family:var(--font-display);font-size:1.1rem;font-weight:800}.footer-sub{color:var(--text-muted);font-size:.8rem}.footer-info{color:var(--text-secondary);align-items:center;gap:10px;font-size:.85rem;display:flex}.footer-info a{color:var(--blue-bright);text-decoration:none}.footer-info a:hover{text-decoration:underline}.footer-tech{gap:8px;display:flex}.tech-tag{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-muted);font-size:.75rem;font-family:var(--font-mono);border-radius:6px;padding:4px 10px}@media (width<=1024px){.hero{grid-template-columns:1fr;gap:40px}.hero-visual{display:none}.features{grid-template-columns:repeat(2,1fr)}.app-layout{grid-template-columns:1fr}}@media (width<=640px){.navbar{padding:12px 20px}.hero{padding:40px 20px}.features{grid-template-columns:1fr;padding:20px}.main-app{padding:20px}.hero-title{font-size:2rem}.footer-content{flex-direction:column;align-items:flex-start}}.code-container pre,.code-container code,.code-container span{white-space:pre!important;word-break:normal!important;overflow-wrap:normal!important}.code-container{max-height:600px;overflow:auto}.code-block{color:#abb2bf;font-family:var(--font-mono);white-space:pre;text-align:left;background:#0d1117;border-radius:12px;width:100%;min-height:400px;max-height:600px;margin:0;padding:20px;font-size:13px;line-height:1.6;display:block;overflow:auto}.code-block code{white-space:pre;text-align:left;display:block}html,body{max-width:100vw;overflow-x:hidden}.hero{max-width:1200px;margin:0 auto;padding:80px 40px}.features{max-width:1200px;margin:0 auto}.main-app{max-width:1200px;margin:0 auto;padding:20px 40px 80px}.footer-content{max-width:1200px;margin:0 auto}.right-panel,.result-card{min-width:0;overflow:hidden}.code-container{width:100%;max-height:550px;overflow:auto}.code-block{color:#abb2bf;white-space:pre;tab-size:4;text-align:left;background:#0d1117;width:max-content;min-width:100%;min-height:400px;max-height:550px;margin:0;padding:20px;font-family:JetBrains Mono,monospace;font-size:13px;line-height:1.6;display:block;overflow-x:auto}.app-layout{grid-template-columns:380px minmax(0,1fr);align-items:start;gap:24px;display:grid}.progress-container{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:14px;padding:16px;animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.progress-fill{background:linear-gradient(90deg, var(--blue), var(--purple));border-radius:3px;height:100%;transition:width .4s}.progress-steps{flex-direction:column;gap:6px;display:flex}.progress-step{align-items:center;gap:8px;font-size:.82rem;transition:all .3s;display:flex}.progress-step.done .step-label{color:var(--green)}.progress-step.active .step-label{color:var(--blue-bright);font-weight:600}.progress-step.pending .step-label{color:var(--text-muted)}.step-icon{width:16px;font-size:.75rem}.step-label{flex:1}.zip-btn{color:#fbbf24;background:#f59e0b1a;border-color:#f59e0b40}.zip-btn:hover{background:#f59e0b33}.feature-card{opacity:0;animation:.6s forwards slideUp;transform:translateY(30px)}.feature-card:first-child{animation-delay:.1s}.feature-card:nth-child(2){animation-delay:.2s}.feature-card:nth-child(3){animation-delay:.3s}.feature-card:nth-child(4){animation-delay:.4s}@keyframes slideUp{to{opacity:1;transform:translateY(0)}}.btn-generate:hover:not(:disabled){box-shadow:0 0 30px #3b82f680}.opt-btn.active{box-shadow:0 0 15px #3b82f64d}.opt-btn.active.ai{box-shadow:0 0 15px #8b5cf64d}.upload-zone:hover{box-shadow:0 0 20px #3b82f626}.hero-content{animation:.8s forwards fadeInLeft}.hero-visual{animation:.8s forwards fadeInRight}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.navbar{animation:.5s forwards fadeInDown}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.feature-card:hover{border-color:var(--blue);box-shadow:0 8px 32px #3b82f633}.tab.active{animation:.2s tabPop}@keyframes tabPop{0%{transform:scale(.95)}to{transform:scale(1)}}.result-card{animation:.4s fadeIn}.progress-step.active .step-label{animation:1s infinite pulse}.nav-menu{align-items:center;gap:4px;display:flex}.nav-try{background:linear-gradient(135deg, var(--blue), var(--purple));white-space:nowrap;border-radius:20px;padding:8px 18px;font-size:.88rem;font-weight:700;text-decoration:none;transition:all .3s;color:#fff!important}.nav-try:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3b82f666}.about-section{background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:60px 40px}.about-content{max-width:1200px;margin:0 auto}.about-content h2{font-family:var(--font-display);text-align:center;margin-bottom:10px;font-size:2rem;font-weight:800}.about-content>p{text-align:center;color:var(--text-secondary);margin-bottom:40px;font-size:1rem}.about-grid{grid-template-columns:repeat(4,1fr);gap:20px;display:grid}.about-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:24px;transition:all .3s}.about-card:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 8px 24px #3b82f626}.about-icon{background:var(--blue-glow);width:50px;height:50px;color:var(--blue-bright);border-radius:12px;justify-content:center;align-items:center;margin-bottom:16px;font-size:1.5rem;display:flex}.about-icon svg{display:block}.about-card h3{font-family:var(--font-display);color:var(--blue-bright);margin-bottom:8px;font-size:.95rem;font-weight:700}.about-card p{color:var(--text-secondary);font-size:.85rem;line-height:1.5}@media (width<=900px){.nav-menu,.nav-try{display:none}}@media (width<=640px){.about-grid{grid-template-columns:repeat(2,1fr)}}.docs-section{border-top:1px solid var(--border);padding:60px 40px}.docs-content{max-width:1200px;margin:0 auto}.docs-content h2{font-family:var(--font-display);text-align:center;margin-bottom:10px;font-size:2rem;font-weight:800}.docs-content>p{text-align:center;color:var(--text-secondary);margin-bottom:40px}.docs-grid{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}.doc-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:all .3s}.doc-card:hover{border-color:var(--blue);transform:translateY(-3px)}.doc-card h3{font-family:var(--font-display);color:var(--text-primary);margin-bottom:16px;font-size:1rem;font-weight:700}.doc-card ul,.doc-card ol{flex-direction:column;gap:10px;padding:0;list-style:none;display:flex}.doc-card ol{padding-left:20px;list-style:decimal}.doc-card li{color:var(--text-secondary);align-items:center;gap:8px;font-size:.88rem;display:flex}.doc-card ol li{display:list-item}.badge-blue{color:var(--blue-bright);font-size:.75rem;font-weight:700;font-family:var(--font-mono);white-space:nowrap;background:#3b82f626;border:1px solid #3b82f64d;border-radius:6px;padding:2px 8px}.badge-green{color:#34d399;font-size:.75rem;font-weight:700;font-family:var(--font-mono);white-space:nowrap;background:#10b98126;border:1px solid #10b9814d;border-radius:6px;padding:2px 8px}.badge-purple{color:#a78bfa;font-size:.75rem;font-weight:700;font-family:var(--font-mono);white-space:nowrap;background:#8b5cf626;border:1px solid #8b5cf64d;border-radius:6px;padding:2px 8px}@media (width<=768px){.docs-grid{grid-template-columns:1fr}}.preview-container{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:16px;animation:.3s fadeIn;overflow:hidden}.preview-header{border-bottom:1px solid var(--border);color:var(--blue-bright);background:#3b82f614;justify-content:space-between;align-items:center;padding:8px 14px;font-size:.82rem;font-weight:600;display:flex}.preview-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:.8rem;transition:all .2s}.preview-close:hover{color:var(--red);background:#ef44441a}.preview-img{object-fit:contain;background:#0d1117;width:100%;max-height:200px;padding:8px;display:block}.toast-container{z-index:9999;pointer-events:none;flex-direction:column;gap:10px;display:flex;position:fixed;bottom:24px;right:24px}.toast{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:auto;border-radius:12px;align-items:center;gap:10px;padding:12px 18px;font-size:.88rem;font-weight:500;animation:.3s toastIn,.3s 2.7s forwards toastOut;display:flex;box-shadow:0 8px 32px #0006}.toast-success{color:#34d399;background:#10b98126;border:1px solid #10b98166}.toast-error{color:#fca5a5;background:#ef444426;border:1px solid #ef444466}.toast-info{color:#60a5fa;background:#3b82f626;border:1px solid #3b82f666}@keyframes toastIn{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@keyframes toastOut{0%{opacity:1}to{opacity:0;transform:translate(40px)}}.hamburger{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;padding:4px;display:none}.ham-line{background:var(--text-secondary);border-radius:2px;width:22px;height:2px;transition:all .3s;display:block}.ham-line.open:first-child{transform:translateY(7px)rotate(45deg)}.ham-line.open:nth-child(2){opacity:0}.ham-line.open:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.theme-toggle{border:1px solid var(--border);color:var(--text-primary);cursor:pointer;background:#ffffff0d;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;margin-right:8px;transition:all .3s;display:flex}.theme-toggle:hover{background:var(--blue);color:#fff;transform:rotate(15deg)}[data-theme=light] .theme-toggle{background:#0000000d}@media (width<=900px){.hamburger{display:flex}.nav-try{display:none}.nav-menu{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);background:#060b14fa;flex-direction:column;gap:4px;padding:16px 20px;display:none;position:absolute;top:100%;left:0;right:0}.nav-menu.open{display:flex}}.navbar.scrolled{background:#060b14fa;box-shadow:0 4px 24px #0006}.hero{position:relative;overflow:hidden}.hero-orb{filter:blur(80px);pointer-events:none;border-radius:50%;animation:8s ease-in-out infinite orbFloat;position:absolute}.orb-1{background:#3b82f614;width:500px;height:500px;animation-delay:0s;top:-200px;left:-100px}.orb-2{background:#8b5cf612;width:400px;height:400px;animation-delay:2.5s;top:100px;right:-150px}.orb-3{background:#10b9810d;width:300px;height:300px;animation-delay:5s;bottom:-100px;left:40%}@keyframes orbFloat{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-30px)scale(1.05)}}.section-header{text-align:center;margin-bottom:48px}.section-tag{background:var(--blue-glow);color:var(--blue-bright);border:1px solid #3b82f640;border-radius:20px;align-items:center;gap:6px;margin-bottom:16px;padding:5px 14px;font-size:.8rem;font-weight:600;display:inline-flex}.section-tag svg{font-size:.9rem}.section-header h2{font-family:var(--font-display);color:var(--text-primary);justify-content:center;align-items:center;gap:12px;margin-top:12px;margin-bottom:10px;font-size:2.2rem;font-weight:800;display:flex}.section-header p{color:var(--text-secondary);font-size:1rem}.features{max-width:1200px;margin:0 auto;padding:60px 40px}.features-grid{grid-template-columns:repeat(4,1fr);gap:20px;display:grid}.feature-icon-wrap{border-radius:14px;justify-content:center;align-items:center;width:56px;height:56px;margin-bottom:16px;display:flex}.feature-icon-wrap .feature-icon{font-size:1.6rem}.feature-tag{color:var(--blue-bright);font-size:.75rem;font-weight:600;font-family:var(--font-mono);background:#3b82f614;border:1px solid #3b82f626;border-radius:20px;margin-top:14px;padding:3px 10px;display:inline-block}@media (width<=900px){.features-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=560px){.features-grid{grid-template-columns:1fr}}.how-section{background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:80px 40px}.how-content{max-width:1200px;margin:0 auto}.how-steps{grid-template-columns:repeat(4,1fr);gap:0;display:grid;position:relative}.how-step{text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin:0 8px;padding:28px 20px;transition:all .3s;position:relative}.how-step:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 8px 24px #3b82f626}.how-num{font-family:var(--font-mono);color:var(--blue);letter-spacing:1px;margin-bottom:12px;font-size:.75rem;font-weight:700}.how-icon{margin-bottom:14px;font-size:2.2rem}.how-step h3{font-family:var(--font-display);color:var(--text-primary);margin-bottom:8px;font-size:.95rem;font-weight:700}.how-step p{color:var(--text-secondary);font-size:.82rem;line-height:1.6}.how-arrow{color:var(--blue);z-index:1;font-size:1.4rem;font-weight:700;position:absolute;top:50%;right:-20px;transform:translateY(-50%)}@media (width<=900px){.how-steps{grid-template-columns:repeat(2,1fr)}.how-arrow{display:none}.how-step{margin:8px 0}}@media (width<=560px){.how-steps{grid-template-columns:1fr}}.hero-cta{flex-wrap:wrap;gap:12px;margin-bottom:36px;display:flex}.cta-primary,.cta-secondary{border-radius:12px;align-items:center;gap:10px;padding:14px 28px;font-weight:600;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.cta-primary{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;box-shadow:0 4px 20px #3b82f64d}.cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px #3b82f680}.cta-secondary{border:1px solid var(--border-light);color:var(--text-primary);background:#ffffff0d}.cta-secondary:hover{border-color:var(--blue);background:#ffffff14}.hero-badge-float{border:1px solid var(--border-light);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0a;border-radius:14px;align-items:center;gap:12px;margin-top:16px;padding:12px 18px;animation:4s ease-in-out 2s infinite float;display:inline-flex}.hero-badge-float span:first-child{font-size:1.8rem}.hbf-title{color:var(--text-primary);font-size:.85rem;font-weight:700}.hbf-sub{color:var(--text-muted);font-size:.75rem}.code-preview-lang{color:var(--blue-bright);font-size:.72rem;font-weight:700;font-family:var(--font-mono);background:#3b82f626;border-radius:6px;margin-left:auto;padding:2px 8px}.nav-logo-icon{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.5rem;font-weight:900;display:flex}.tag-dot{background:var(--green);border-radius:50%;width:7px;height:7px;animation:1.5s ease-in-out infinite blink;display:inline-block}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.footer-cta{text-align:center;border-bottom:1px solid var(--border);padding:40px}.footer-cta h3{font-family:var(--font-display);margin-bottom:20px;font-size:1.8rem}.history-section{background:var(--bg-base);border-top:1px solid var(--border);padding:100px 0}.history-content{max-width:1200px;margin:0 auto;padding:0 40px}.history-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:40px;display:grid}.history-card{background:var(--glass-bg);border:1px solid var(--border-light);cursor:pointer;border-radius:16px;padding:20px;transition:all .3s cubic-bezier(.4,0,.2,1)}.history-card:hover{background:var(--bg-card-hover);border-color:var(--blue);transform:translateY(-5px);box-shadow:0 10px 30px #0000001a}.h-card-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.h-date{color:var(--text-muted);font-size:.75rem}.h-badge{text-transform:uppercase;border-radius:4px;padding:2px 8px;font-size:.7rem;font-weight:700}.h-badge.ai{color:#a78bfa;background:#8b5cf633;border:1px solid #8b5cf64d}.h-badge.algo{color:#60a5fa;background:#3b82f633;border:1px solid #3b82f64d}.history-card h4{font-family:var(--font-display);white-space:nowrap;text-overflow:ellipsis;color:var(--text-primary);margin-bottom:12px;font-size:1rem;overflow:hidden}.h-stats{color:var(--text-secondary);gap:12px;font-size:.8rem;display:flex}.clear-history{color:#ef4444;cursor:pointer;background:0 0;border:1px solid #ef44444d;border-radius:10px;margin-top:40px;padding:10px 24px;font-weight:600;transition:all .2s}.clear-history:hover{background:#ef44441a;border-color:#ef4444}.editor-container-main{background:#1e1e1e;box-shadow:inset 0 2px 10px #00000080}.progress-container{border:1px solid var(--border-light);background:#ffffff08;border-radius:12px;margin-top:24px;padding:16px}.progress-bar{background:#0003;border-radius:4px;height:8px;margin-bottom:12px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--blue), var(--teal));height:100%;box-shadow:0 0 10px var(--blue);transition:width .4s cubic-bezier(.4,0,.2,1)}.current-step-label{color:var(--blue-bright);font-size:.9rem;font-weight:600;font-family:var(--font-display);align-items:center;gap:10px;display:flex}.spinner-small{border:2px solid #ffffff1a;border-top-color:var(--blue);border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}[data-theme=light] .progress-container{background:#00000005}.footer-cta p{color:var(--text-secondary);margin-bottom:20px}.mobile-only{display:none}.desktop-only{display:block}.mobile-result-inline{margin-top:16px;scroll-margin-top:88px}@media (width<=768px){.mobile-only{display:block!important}.desktop-only,.right-panel{display:none!important}.navbar{gap:10px!important;padding:12px 16px!important}.nav-title{font-size:1.1rem!important}.nav-logo-icon{width:32px!important;height:32px!important;font-size:1.2rem!important}.nav-links{gap:8px!important}.github-text{display:none!important}.nav-link svg{margin-right:0!important}.nav-badge{display:none!important}.theme-toggle{border-radius:8px!important;width:34px!important;height:34px!important;margin-right:0!important}.hamburger{padding:6px!important}.hero{text-align:center!important;padding:60px 16px 40px!important}.hero-tag{margin:0 auto 20px!important}.hero-title{font-size:2.2rem!important;line-height:1.25!important}.hero-desc{margin:0 auto 28px!important;font-size:.95rem!important}.hero-cta{justify-content:center!important;width:100%!important}.hero-stats{justify-content:center!important;gap:16px!important}.stat-num{font-size:1.5rem!important}.features{padding:40px 16px!important}.feature-card{padding:20px!important}.section-header h2{font-size:1.8rem!important}.main-app{padding:20px 12px 60px!important}.panel-card{padding:18px!important}.result-header{flex-direction:column!important;align-items:stretch!important;gap:12px!important;padding:12px 14px!important}.tabs{justify-content:space-between!important;width:100%!important}.tab{flex:1!important;justify-content:center!important;padding:8px 10px!important;font-size:.8rem!important}.result-actions{justify-content:space-between!important;gap:8px!important;width:100%!important}.action-btn{text-align:center!important;flex:1!important;justify-content:center!important;min-height:44px!important;padding:12px 8px!important;font-size:.82rem!important;font-weight:700!important}.code-stats{flex-wrap:wrap!important;gap:10px!important;padding:10px 14px!important;font-size:.74rem!important}.result-card{scroll-margin-top:80px}.result-card--mobile{overflow:hidden;padding:0!important}.result-card--mobile .result-header,.result-card--mobile .editor-container-main,.result-card--mobile .code-stats{display:none!important}.mobile-result-panel{flex-direction:column;gap:0;display:flex}.mobile-result-success{text-align:center;border-bottom:1px solid var(--border);background:#10b98114;padding:20px 16px}.mobile-success-icon{width:52px;height:52px;color:var(--green);background:#10b98126;border-radius:50%;justify-content:center;align-items:center;margin:0 auto 12px;font-size:1.6rem;display:flex}.mobile-result-success h4{color:var(--text-primary);margin:0 0 6px;font-size:1.15rem;font-weight:700}.mobile-result-success p{color:var(--text-secondary);margin:0;font-size:.82rem}.mobile-result-tabs{gap:8px;padding:12px 14px 0;display:flex}.mobile-tab{border:1px solid var(--border);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 8px;font-size:.8rem;font-weight:600;display:flex}.mobile-tab.active{border-color:var(--blue);color:var(--blue-bright);background:#3b82f61f}.mobile-result-actions{flex-direction:column;gap:10px;padding:14px 16px 10px;display:flex}.mobile-action-btn{border:1px solid var(--border);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:10px;width:100%;min-height:52px;padding:16px 14px;font-size:.95rem;font-weight:700;transition:transform .15s,background .15s;display:flex}.mobile-action-btn:active{transform:scale(.98)}.mobile-action-copy{color:#34d399;background:#10b9811f;border-color:#10b98159}.mobile-action-zip{color:#a78bfa;background:#8b5cf61f;border-color:#8b5cf659}.mobile-action-dl{color:#60a5fa;background:#3b82f61f;border-color:#3b82f659}.mobile-result-hint{color:var(--text-muted);text-align:center;margin:0;padding:0 16px 16px;font-size:.75rem;line-height:1.45}}@media (width<=480px){.hero-cta{flex-direction:column!important;gap:10px!important}.cta-primary,.cta-secondary{justify-content:center!important;width:100%!important}.about-grid{grid-template-columns:1fr!important;gap:16px!important}.about-card{padding:18px!important}.docs-grid{grid-template-columns:1fr!important}.doc-card{padding:18px!important}.empty-icon{font-size:3rem!important}.result-actions{grid-template-columns:1fr 1fr!important;gap:8px!important;display:grid!important}.action-btn{border-radius:10px!important;min-height:48px!important;padding:14px 8px!important;font-size:.85rem!important}}