:root{--bg-base:#001626;--bg-surface:#001e33;--bg-elevated:#003049;--bg-input:#001220;--border:#1a4d6a;--border-subtle:#0d3347;--accent:#669bbc;--accent-dim:#669bbc21;--accent-border:#669bbc61;--accent-hover:#88b6cf;--cream:#fdf0d5;--cream-dim:#fdf0d517;--cream-border:#fdf0d547;--crimson:#c1121f;--crimson-dark:#780000;--error:#c1121f;--error-dim:#c1121f24;--text:#c8b896;--text-muted:#5d8ea8;--text-heading:#fdf0d5;--text-code:#a4c2d6;--font-ui:"Space Grotesk", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "Cascadia Code", monospace;--radius:10px;--radius-sm:6px;--radius-xs:4px;--transition:.16s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;height:100%}body{background:var(--bg-base);min-height:100%;color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:15px;line-height:1.6}#app{flex-direction:column;min-height:100vh;display:flex}.app-header{border-bottom:1px solid var(--border);background:linear-gradient(#78000014 0%,#0030491f 60%,#0000 100%);padding:28px 32px 24px}.header-inner{flex-wrap:wrap;align-items:center;gap:40px;max-width:1400px;margin:0 auto;display:flex}.brand{align-items:center;gap:14px;display:flex}.brand-icon{width:36px;height:36px;color:var(--accent);flex-shrink:0}.brand-name{letter-spacing:-.5px;color:var(--text-heading);font-size:22px;font-weight:600;line-height:1}.brand-name span{color:var(--accent)}.brand-tagline{color:var(--text-muted);border-left:1px solid var(--border);padding-left:24px;font-size:14px;line-height:1.4}.tab-nav{background:var(--bg-surface);border-bottom:1px solid var(--border);scrollbar-width:none;gap:2px;padding:0 32px;display:flex;overflow-x:auto}.tab-nav::-webkit-scrollbar{display:none}.tab-btn{font-family:var(--font-mono);color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:color var(--transition), border-color var(--transition);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:13px 20px;font-size:13px;font-weight:500}.tab-btn:hover{color:var(--text)}.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}.panels{box-sizing:border-box;flex:1;align-self:stretch;width:100%;max-width:1400px;margin:0 auto;padding:28px 32px}#app>.panels{max-width:100%}.panel{display:none}.panel--active{display:block}.panel-meta{border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:20px;padding-bottom:20px;display:flex}.fn-name{color:var(--text-heading);margin-bottom:6px;font-size:17px;font-weight:500;line-height:1.3}.fn-name code{font-family:var(--font-mono);color:var(--accent);background:var(--accent-dim);border-radius:var(--radius-xs);border:1px solid var(--accent-border);padding:3px 10px;font-size:15px}.fn-desc{color:var(--text-muted);max-width:700px;font-size:14px;line-height:1.65}.fn-desc code{font-family:var(--font-mono);color:var(--text-code);background:var(--bg-elevated);border-radius:3px;padding:1px 6px;font-size:12.5px}.fn-desc strong{color:var(--text);font-weight:500}.doc-link{color:var(--accent);white-space:nowrap;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent-dim);transition:background var(--transition), border-color var(--transition);padding:6px 12px;font-size:13px;font-weight:500;text-decoration:none}.doc-link:hover{border-color:var(--accent);background:#669bbc38}.split{grid-template-columns:1fr 1fr;gap:16px;min-height:520px;display:grid}@media (width<=900px){.split{grid-template-columns:1fr}}.pane{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:10px;min-height:0;padding:16px;display:flex}.pane--output{background:var(--bg-elevated)}.pane-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.pane-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-size:11px;font-weight:600}.hint{letter-spacing:0;text-transform:none;color:var(--text-muted);opacity:.7;font-size:11px;font-weight:400}.opts{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.opt-label{color:var(--text-muted);cursor:pointer;white-space:nowrap;align-items:center;gap:6px;font-size:12.5px;display:flex}.opt-check{gap:5px}.select{font-family:var(--font-mono);color:var(--text);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);appearance:none;cursor:pointer;transition:border-color var(--transition);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6e8e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 7px center;background-repeat:no-repeat;padding:3px 24px 3px 8px;font-size:12px}.select:hover,.select:focus{border-color:var(--accent-border);outline:none}.checkbox{accent-color:var(--accent);cursor:pointer;width:14px;height:14px}.editor{font-family:var(--font-mono);color:var(--text);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);resize:vertical;tab-size:2;min-height:300px;transition:border-color var(--transition);flex:1;padding:14px 16px;font-size:13px;line-height:1.7}.editor:focus{border-color:var(--accent-border);outline:none}.editor::placeholder{color:var(--text-muted);opacity:.5}.output{font-family:var(--font-mono);color:var(--text-code);background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);white-space:pre;tab-size:2;flex:1;min-block-size:200px;max-block-size:480px;padding:14px 16px;font-size:12.5px;line-height:1.75;overflow:auto}.output--css{color:var(--cream);white-space:pre-wrap;word-break:break-word}.output--error{background:var(--error-dim);border-color:#f871714d}.placeholder{color:var(--text-muted);opacity:.5;font-style:italic}.jk{color:#6fadd0}.js{color:#fdf0d5}.ji{color:#f0a050}.jb{color:#88b6cf}.jn{color:#e05060}.err{color:var(--error);font-style:normal}.btn{font-family:var(--font-ui);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition);border:none;font-size:14px;font-weight:500}.btn--primary{background:var(--accent);color:#fff;align-self:flex-start;padding:9px 20px}.btn--primary:hover{background:var(--accent-hover)}.btn--primary:active{opacity:.88}.btn--sm{padding:4px 10px;font-size:12px}.btn--ghost{background:var(--bg-elevated);color:var(--text-muted);border:1px solid var(--border)}.btn--ghost:hover{color:var(--text);border-color:var(--accent-border)}.btn--ghost.btn--copied{color:var(--cream);border-color:var(--cream-border);background:var(--cream-dim)}.btn--send{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border)}.btn--send:hover{background:#669bbc38}.actions{border-block-start:1px solid var(--border-subtle);border-block-end:1px solid var(--border-subtle);flex-wrap:wrap;align-items:center;gap:6px;padding-block:8px;display:flex}.actions.hidden{display:none}.kbd-hint{color:var(--text-muted);opacity:.6;font-size:11.5px;font-family:var(--font-mono);align-self:center;margin-left:auto}kbd{background:var(--bg-elevated);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-size:10px;display:inline-block}.app-footer{border-top:1px solid var(--border);text-align:center;margin-top:auto;padding:18px 32px}.app-footer p{color:var(--text-muted);font-size:13px}.app-footer a{color:var(--accent);text-decoration:none}.app-footer a:hover{text-decoration:underline}@media (width<=640px){.app-header,.tab-nav,.panels{padding-left:16px;padding-right:16px}.brand-tagline{display:none}.app-footer{padding-left:16px;padding-right:16px}}