:root{--color-primary:#059669;--color-primary-dark:#047857;--color-primary-light:#d1fae5;--color-secondary:#0f172a;--color-accent:#f59e0b;--color-success:#16a34a;--color-error:#dc2626;--color-error-light:#fef2f2;--color-warning:#ea580c;--color-bg:#f8fafc;--color-bg-white:#fff;--color-bg-card:#fff;--color-bg-code:#1e293b;--color-text:#1e293b;--color-text-secondary:#475569;--color-text-muted:#94a3b8;--color-text-inverse:#fff;--color-border:#e2e8f0;--color-border-focus:#059669;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px -1px #00000012, 0 2px 4px -2px #0000000d;--shadow-lg:0 10px 15px -3px #00000014, 0 4px 6px -4px #0000000a;--shadow-xl:0 20px 25px -5px #00000014, 0 8px 10px -6px #0000000a;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-mono:"SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", Consolas, "Courier New", monospace;--max-width:1280px;--header-height:64px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}html,body{max-width:100vw;overflow-x:hidden}body{font-family:var(--font-sans);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}a{color:var(--color-primary);text-decoration:none;transition:color .2s}a:hover{color:var(--color-primary-dark)}img{max-width:100%;height:auto}.site-header{background:var(--color-bg-white);border-bottom:1px solid var(--color-border);z-index:100;height:var(--header-height);box-shadow:var(--shadow-sm);position:fixed;top:0;left:0;right:0}body{padding-top:var(--header-height)}.header-inner{max-width:var(--max-width);justify-content:space-between;align-items:center;height:100%;margin:0 auto;padding:0 24px;display:flex}.logo{color:var(--color-secondary);align-items:center;gap:10px;font-size:1.25rem;font-weight:700;text-decoration:none;display:flex}.logo:hover{color:var(--color-secondary)}.logo-icon{background:var(--color-primary);border-radius:var(--radius-sm);color:#fff;width:36px;height:36px;font-size:14px;font-weight:800;font-family:var(--font-mono);justify-content:center;align-items:center;display:flex}.nav-links{align-items:center;gap:8px;list-style:none;display:flex}.nav-links a{border-radius:var(--radius-sm);color:var(--color-text-secondary);padding:8px 16px;font-size:.9rem;font-weight:500;transition:all .2s}.nav-links a:hover{background:var(--color-primary-light);color:var(--color-primary)}.nav-links a.active{background:var(--color-primary);color:#fff}.mobile-menu-btn{cursor:pointer;color:var(--color-text);background:0 0;border:none;padding:8px;display:none}.mobile-menu-btn span{background:currentColor;width:24px;height:2px;margin:5px 0;transition:all .3s;display:block}@media (max-width:768px){.mobile-menu-btn{display:block}.nav-links{top:var(--header-height);background:var(--color-bg-white);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-md);flex-direction:column;padding:16px;display:none;position:absolute;left:0;right:0}.nav-links.open{display:flex}.nav-links a{width:100%;padding:12px 16px}}.site-footer{background:var(--color-secondary);color:var(--color-text-inverse);margin-top:80px;padding:48px 24px 24px}.footer-inner{max-width:var(--max-width);margin:0 auto}.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;display:grid}.footer-brand p{color:#94a3b8;max-width:340px;margin-top:12px;font-size:.9rem;line-height:1.7}.footer-col h4{text-transform:uppercase;letter-spacing:.05em;color:#cbd5e1;margin-bottom:16px;font-size:.85rem}.footer-col ul{flex-direction:column;gap:10px;list-style:none;display:flex}.footer-col a{color:#94a3b8;font-size:.875rem;transition:color .2s}.footer-col a:hover{color:#fff}.footer-bottom{border-top:1px solid #334155;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-top:24px;display:flex}.footer-bottom p{color:#64748b;font-size:.8rem}.footer-bottom-links{gap:20px;display:flex}.footer-bottom-links a{color:#64748b;font-size:.8rem}.footer-bottom-links a:hover{color:#94a3b8}@media (max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}.tool-section{max-width:100%;margin:0 auto;padding:16px 12px}.tool-hero{text-align:center;padding:20px 0 16px}.tool-hero h1{color:var(--color-secondary);margin-bottom:8px;font-size:2rem;font-weight:800;line-height:1.2}.tool-hero p{color:var(--color-text-secondary);max-width:600px;margin:0 auto;font-size:1.05rem}.btn{border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-bg-white);color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;font-size:.825rem;font-weight:600;font-family:var(--font-sans);align-items:center;gap:6px;padding:8px 14px;transition:all .15s;display:inline-flex}.btn:hover{background:var(--color-bg);border-color:#cbd5e1}.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn-primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark)}.editor-container{border-radius:var(--radius-lg);background:var(--color-bg-white);border:1px solid #2d3348;grid-template-columns:1fr auto 1fr;height:calc(100vh - 240px);min-height:420px;max-height:820px;display:grid;position:relative;overflow:hidden}.editor-panel{flex-direction:column;min-height:0;display:flex;position:relative;overflow:hidden}.editor-divider{-webkit-user-select:none;user-select:none;background:#111627;border-left:1px solid #2d3348;border-right:1px solid #2d3348;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:36px;display:flex}.editor-divider-arrow{color:#4a5568;background:#1a1e2e;border:1px solid #2d3348;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.editor-divider-dots{flex-direction:column;align-items:center;gap:3px;display:flex}.editor-divider-dots span{background:#2d3348;border-radius:50%;width:3px;height:3px}.ace-wrapper{flex:1;min-height:0;position:relative;overflow:hidden}.ace-wrapper .ace_editor{inset:0;position:absolute!important}.editor-panel-header{background:#1a1e2e;border-bottom:1px solid #2d3348;flex-shrink:0;align-items:center;height:38px;padding:0 6px;display:flex;overflow:auto hidden}.editor-panel-header::-webkit-scrollbar{height:0}.panel-tools{align-items:center;gap:2px;display:flex}.panel-tool-btn{cursor:pointer;color:#636d83;font-size:.7rem;font-weight:500;font-family:var(--font-sans);white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:4px;align-items:center;gap:4px;padding:4px 8px;transition:all .12s;display:inline-flex}.panel-tool-btn:hover{color:#c8cedd;background:#ffffff0f;border-color:#3d4460}.panel-tool-btn.primary{color:#fff;background:#059669;border-color:#10b981}.panel-tool-btn.primary:hover{color:#fff;background:#10b981;border-color:#34d399}.panel-tool-btn.secondary{color:#cbd5e1;background:#1e293b;border-color:#334155}.panel-tool-btn.secondary:hover{color:#f1f5f9;background:#334155;border-color:#475569}.panel-tool-btn.success{color:#fff;background:#15803d;border-color:#16a34a}.panel-tool-btn.success:hover{color:#fff;background:#16a34a;border-color:#22c55e}.panel-tool-btn.danger{color:#94a3b8}.panel-tool-btn.danger:hover{color:#f87171;background:#f871711a;border-color:#f8717140}.panel-tool-btn.active{color:#34d399;background:#10b98126;border-color:#10b9814d}.panel-tool-btn:disabled{opacity:.3;cursor:default;pointer-events:none}.panel-tool-btn svg{flex-shrink:0}.tb-label{font-size:.68rem}.editor-panel.fullscreen{z-index:200;border-radius:0;position:fixed;inset:0;height:100vh!important;min-height:100vh!important;max-height:100vh!important}.hidden-panel{display:none!important}.has-fullscreen{border:none!important;border-radius:0!important;height:auto!important;min-height:auto!important;max-height:none!important}.panel-tool-divider{background:#2d3348;flex-shrink:0;width:1px;height:18px;margin:0 4px}.indent-select-sm{font-size:.68rem;font-family:var(--font-mono);color:#636d83;cursor:pointer;background:0 0;border:1px solid #2d3348;border-radius:4px;outline:none;padding:3px 4px;transition:all .12s}.indent-select-sm:hover{color:#c8cedd;border-color:#3d4460}.indent-select-sm:focus{border-color:#34d399}.indent-select-sm option{color:#c8cedd;background:#1a1e2e}.ace_editor{font-family:var(--font-mono)!important}.ace_placeholder{color:#4a5568!important;font-family:var(--font-mono)!important;padding:12px!important;font-style:normal!important}.json-key{color:#c084fc}.json-string{color:#4ade80}.json-number{color:#60a5fa}.json-boolean{color:#fb923c}.json-null{color:#64748b;font-style:italic}.json-bracket{color:#94a3b8}.json-error{color:#f87171}.status-bar{color:#64748b;background:#0f1729;border-top:1px solid #1e293b;justify-content:space-between;align-items:center;padding:6px 14px;font-size:.72rem;display:flex}.status-bar .status-item{align-items:center;gap:6px;display:flex}.kbd-hint{font-family:var(--font-mono);color:#64748b;background:#ffffff0a;border:1px solid #334155;border-radius:3px;padding:1px 6px;font-size:.68rem;display:inline-block}.status-dot{background:#94a3b8;border-radius:50%;width:8px;height:8px}.status-dot.valid{background:var(--color-success)}.status-dot.invalid{background:var(--color-error)}.error-bar{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#f87171;font-size:.8rem;font-family:var(--font-mono);z-index:10;background:#1c1117f2;border-top:2px solid #f87171;align-items:center;gap:8px;padding:10px 16px;display:flex;position:absolute;bottom:0;left:0;right:0}.error-bar svg{flex-shrink:0;width:16px;height:16px}.indent-select{border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.825rem;font-family:var(--font-sans);color:var(--color-text-secondary);background:var(--color-bg-white);cursor:pointer;outline:none;padding:6px 10px}.indent-select:focus{border-color:var(--color-border-focus)}@media (max-width:768px){.editor-container{grid-template-columns:1fr;height:auto;min-height:auto;max-height:none}.editor-panel{height:45vh;min-height:300px}.editor-divider{border:1px solid #2d3348;border-left:none;border-right:none;flex-direction:row;width:100%;height:32px}.editor-divider-arrow svg{transform:rotate(90deg)}.editor-divider-dots{flex-direction:row}.editor-panel-header{flex-wrap:wrap;gap:4px;height:auto;padding:6px 8px}.panel-tools{flex-wrap:wrap;gap:1px}.tb-label,.panel-tool-divider{display:none}.panel-tool-btn{padding:5px 6px}.panel-tool-btn svg{width:15px;height:15px}.indent-select-sm{padding:3px 2px;font-size:.65rem}.tool-hero h1{font-size:1.5rem}.kbd-hint{display:none}}.content-section{max-width:var(--max-width);margin:60px auto;padding:0 24px}.content-section h2{color:var(--color-secondary);margin-bottom:16px;font-size:1.6rem;font-weight:700}.content-section h3{color:var(--color-secondary);margin-top:28px;margin-bottom:10px;font-size:1.15rem;font-weight:600}.content-section p{color:var(--color-text-secondary);margin-bottom:16px;font-size:.95rem;line-height:1.8}.content-section ul,.content-section ol{color:var(--color-text-secondary);margin-bottom:16px;padding-left:24px;font-size:.95rem;line-height:1.8}.content-section li{margin-bottom:6px}.content-section a{text-underline-offset:2px;text-decoration:underline}.features-grid{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;display:grid}.feature-card{background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:28px;transition:all .2s}.feature-card:hover{box-shadow:var(--shadow-md);border-color:#cbd5e1}.feature-card-icon{background:var(--color-primary-light);border-radius:var(--radius-md);width:44px;height:44px;color:var(--color-primary);justify-content:center;align-items:center;margin-bottom:16px;display:flex}.feature-card h3{color:var(--color-secondary);margin-top:0;margin-bottom:8px;font-size:1rem;font-weight:600}.feature-card p{color:var(--color-text-secondary);margin-bottom:0;font-size:.875rem;line-height:1.6}@media (max-width:768px){.features-grid{grid-template-columns:1fr}}.faq-list{flex-direction:column;gap:12px;margin-top:24px;display:flex}.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-white);overflow:hidden}.faq-question{text-align:left;width:100%;color:var(--color-text);cursor:pointer;font-size:.95rem;font-weight:600;font-family:var(--font-sans);background:0 0;border:none;justify-content:space-between;align-items:center;padding:18px 20px;transition:background .15s;display:flex}.faq-question:hover{background:#f8fafc}.faq-question svg{width:20px;height:20px;color:var(--color-text-muted);flex-shrink:0;transition:transform .2s}.faq-item.open .faq-question svg{transform:rotate(180deg)}.faq-answer{color:var(--color-text-secondary);padding:0 20px 18px;font-size:.9rem;line-height:1.7;display:none}.faq-item.open .faq-answer{display:block}.page-container{max-width:800px;margin:0 auto;padding:48px 24px 80px}.page-container h1{color:var(--color-secondary);margin-bottom:8px;font-size:2rem;font-weight:800}.page-container .page-subtitle{color:var(--color-text-muted);margin-bottom:40px;font-size:.9rem}.page-container h2{color:var(--color-secondary);margin-top:40px;margin-bottom:12px;font-size:1.35rem;font-weight:700}.page-container h3{color:var(--color-secondary);margin-top:28px;margin-bottom:10px;font-size:1.1rem;font-weight:600}.page-container p{color:var(--color-text-secondary);margin-bottom:16px;font-size:.95rem;line-height:1.8}.page-container ul,.page-container ol{color:var(--color-text-secondary);margin-bottom:16px;padding-left:24px;font-size:.95rem;line-height:1.8}.page-container li{margin-bottom:6px}.toast{border-radius:var(--radius-md);color:#fff;background:var(--color-secondary);box-shadow:var(--shadow-lg);z-index:1000;padding:12px 20px;font-size:.85rem;font-weight:500;animation:.3s toastIn;position:fixed;bottom:24px;right:24px}.toast.success{background:var(--color-success)}.toast.error{background:var(--color-error)}@keyframes toastIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.drop-overlay{border:2px dashed var(--color-primary);border-radius:var(--radius-md);z-index:10;pointer-events:none;background:#05966914;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.drop-overlay span{background:var(--color-primary);color:#fff;border-radius:var(--radius-md);padding:10px 24px;font-size:.9rem;font-weight:600}.ace_scrollbar::-webkit-scrollbar{width:8px;height:8px}.ace_scrollbar::-webkit-scrollbar-track{background:0 0}.ace_scrollbar::-webkit-scrollbar-thumb{background:#334155;border-radius:4px}.ace_scrollbar::-webkit-scrollbar-thumb:hover{background:#475569}.contact-form{flex-direction:column;gap:20px;margin-top:24px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}.form-group label{color:var(--color-text);font-size:.85rem;font-weight:600}.form-group input,.form-group textarea,.form-group select{border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.9rem;font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg-white);outline:none;padding:10px 14px;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--color-border-focus)}.form-group textarea{resize:vertical;min-height:140px}.steps-list{flex-direction:column;gap:20px;margin:24px 0;display:flex}.step-item{align-items:flex-start;gap:16px;display:flex}.step-number{background:var(--color-primary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:.9rem;font-weight:700;display:flex}.step-content h4{color:var(--color-secondary);margin-bottom:4px;font-size:.95rem;font-weight:600}.step-content p{color:var(--color-text-secondary);margin-bottom:0;font-size:.875rem}.blog-grid{grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px;display:grid}.blog-card{background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;padding:28px;text-decoration:none;transition:all .2s;display:flex}.blog-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.blog-card-category{text-transform:uppercase;letter-spacing:.04em;color:var(--color-primary);background:var(--color-primary-light);border-radius:100px;align-self:flex-start;margin-bottom:14px;padding:3px 10px;font-size:.7rem;font-weight:600;display:inline-block}.blog-card h2{color:var(--color-secondary);margin-bottom:8px;font-size:1.05rem;font-weight:700;line-height:1.4}.blog-card p{color:var(--color-text-secondary);flex:1;margin-bottom:16px;font-size:.85rem;line-height:1.6}.blog-card-meta{color:var(--color-text-muted);justify-content:space-between;align-items:center;font-size:.75rem;display:flex}@media (max-width:768px){.blog-grid{grid-template-columns:1fr}}.blog-post{max-width:760px;margin:0 auto;padding:48px 24px 80px}.blog-post-header{margin-bottom:40px}.blog-post-header .blog-card-category{margin-bottom:16px}.blog-post-header h1{color:var(--color-secondary);margin-bottom:12px;font-size:2rem;font-weight:800;line-height:1.3}.blog-post-header .blog-card-meta{justify-content:flex-start;gap:16px}.blog-post h2{color:var(--color-secondary);margin-top:40px;margin-bottom:14px;font-size:1.4rem;font-weight:700}.blog-post h3{color:var(--color-secondary);margin-top:28px;margin-bottom:10px;font-size:1.1rem;font-weight:600}.blog-post p{color:var(--color-text-secondary);margin-bottom:18px;font-size:.95rem;line-height:1.85}.blog-post ul,.blog-post ol{color:var(--color-text-secondary);margin-bottom:18px;padding-left:24px;font-size:.95rem;line-height:1.85}.blog-post li{margin-bottom:8px}.blog-post pre{background:var(--color-bg-code);color:#e2e8f0;border-radius:var(--radius-md);font-family:var(--font-mono);margin-bottom:20px;padding:20px;font-size:.82rem;line-height:1.7;overflow-x:auto}.blog-post code{font-family:var(--font-mono);color:#be185d;background:#f1f5f9;border-radius:4px;padding:2px 6px;font-size:.85em}.blog-post pre code{color:inherit;background:0 0;padding:0}.blog-post blockquote{border-left:3px solid var(--color-primary);background:var(--color-primary-light);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:24px 0;padding:12px 20px}.blog-post blockquote p{color:var(--color-text);margin-bottom:0}.blog-post-cta{background:var(--color-primary-light);border-radius:var(--radius-lg);text-align:center;border:1px solid #a7f3d0;margin-top:48px;padding:28px}.blog-post-cta h3{color:var(--color-primary-dark);margin-top:0}.blog-post-cta p{color:var(--color-text-secondary);margin-bottom:16px}.blog-post-cta a{background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);padding:10px 24px;font-size:.9rem;font-weight:600;text-decoration:none;transition:background .15s;display:inline-flex}.blog-post-cta a:hover{background:var(--color-primary-dark);color:#fff}