@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Outfit:wght@300;400;500;600&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#080808;--surface:#111;--surface-2:#181818;--border:#1e1e1e;--border-2:#2a2a2a;--text:#e8e8e8;--text-muted:#555;--text-dim:#333;--accent:#4afa7b;--accent-dim:#4afa7b14;--accent-glow:#4afa7b26;--accent-border:#4afa7b40;--error:#ff4545;--error-dim:#ff454514;--warning:#f5a623;--sidebar-w:240px;--font-mono:"JetBrains Mono", "Fira Code", monospace;--font-ui:"Outfit", system-ui, sans-serif;--radius:2px;--tr:.15s ease}[data-theme=light]{--bg:#f7f7f7;--surface:#fff;--surface-2:#f0f0f0;--border:#e8e8e8;--border-2:#d8d8d8;--text:#111;--text-muted:#777;--text-dim:silver;--accent:#16a34a;--accent-dim:#16a34a1a;--accent-glow:#16a34a26;--accent-border:#16a34a4d;--error:#dc2626;--error-dim:#dc262614;--warning:#d97706}html,body,#root{background:var(--bg);height:100%;color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.5}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:var(--accent-dim);color:var(--accent)}:focus-visible{outline:1px solid var(--accent);outline-offset:2px}button,input,select,textarea{font-family:inherit;font-size:inherit}button{cursor:pointer;color:inherit;background:0 0;border:none}a{color:inherit;text-decoration:none}.mono{font-family:var(--font-mono)}.text-muted{color:var(--text-muted)}.text-accent{color:var(--accent)}.text-error{color:var(--error)}.text-sm{font-size:12px}.text-xs{font-size:11px}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes toastIn{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(8px)scale(.96)}}.animate-fade-in{animation:.2s both fadeIn}.animate-slide-left{animation:.2s both slideInLeft}.animate-spin{animation:.7s linear infinite spin}.btn{border:1px solid var(--border-2);border-radius:var(--radius);transition:var(--tr);white-space:nowrap;color:var(--text);background:var(--surface);align-items:center;gap:6px;padding:7px 14px;font-size:13px;font-weight:500;display:inline-flex}.btn:hover{border-color:var(--border-2);background:var(--surface-2);color:var(--text)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#080808;font-weight:600}.btn.primary:hover{color:#080808;background:#6ffb92;border-color:#6ffb92}.btn.ghost{color:var(--text-muted);background:0 0;border-color:#0000}.btn.ghost:hover{color:var(--text);background:var(--surface);border-color:var(--border)}.btn:disabled{opacity:.35;pointer-events:none}.btn svg{flex-shrink:0}.input,.select,.textarea{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius);width:100%;color:var(--text);transition:border-color var(--tr);outline:none;padding:7px 10px}.input:focus,.select:focus,.textarea:focus{border-color:var(--accent-border)}.input::placeholder,.textarea::placeholder{color:var(--text-muted)}.select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23555' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;padding-right:28px}.divider{background:var(--border);height:1px;margin:0}.label{font-size:11px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:6px;display:block}.field{flex-direction:column;gap:6px;display:flex}.badge{border:1px solid var(--border-2);border-radius:var(--radius);font-size:10px;font-family:var(--font-mono);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;align-items:center;padding:1px 6px;display:inline-flex}.badge.converter{border-color:var(--accent-border);color:var(--accent)}.badge.generator{color:var(--warning);border-color:#f5a6234d}.badge.formatter{color:#9d7fea;border-color:#9370db59}.badge.validator{color:#5aadff;border-color:#409cff59}.radio-group{gap:4px;display:flex}.radio-option{border:1px solid var(--border-2);border-radius:var(--radius);cursor:pointer;transition:var(--tr);color:var(--text-muted);user-select:none;flex:1;justify-content:center;align-items:center;padding:6px 10px;font-size:13px;display:flex}.radio-option:hover{border-color:var(--border-2);color:var(--text)}.radio-option.active{border-color:var(--accent-border);background:var(--accent-dim);color:var(--accent)}.radio-option input[type=radio]{display:none}.checkbox-label{cursor:pointer;color:var(--text-muted);transition:color var(--tr);user-select:none;align-items:center;gap:8px;font-size:13px;display:flex}.checkbox-label:hover{color:var(--text)}.checkbox-label input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);cursor:pointer}.home-card{box-sizing:border-box;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius);cursor:pointer;transition:all var(--tr);flex-direction:column;padding:16px 18px;text-decoration:none;display:flex}.home-card:hover{border-color:var(--accent-border);background:var(--accent-dim)}.sidebar-nav-link:hover{background:var(--accent-dim)!important;color:var(--accent)!important}.drag-wrapper{cursor:grab;border-radius:var(--radius);transition:opacity .15s,box-shadow .15s}.drag-wrapper .home-card{cursor:grab}.drag-wrapper:active,.drag-wrapper:active .home-card{cursor:grabbing}.drag-wrapper.is-dragging{opacity:.35}.drag-wrapper.is-dragging .home-card{cursor:grabbing}.drag-wrapper.is-over{box-shadow:0 0 0 2px var(--accent)}.drag-wrapper .drag-handle{z-index:1;opacity:0;pointer-events:none;transition:opacity var(--tr);color:var(--text-dim);position:absolute;bottom:8px;right:8px}.drag-wrapper:hover .drag-handle{opacity:1}.spinner{border:1.5px solid var(--border-2);border-top-color:var(--accent);border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.7s linear infinite spin}.markdown-body{color:var(--text);font-family:var(--font-ui);flex:1;padding:24px 28px;font-size:14px;line-height:1.8;overflow-y:auto}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-family:var(--font-mono);color:var(--text);letter-spacing:-.02em;margin:1.6em 0 .6em;font-weight:600;line-height:1.3}.markdown-body h1{letter-spacing:-.04em;font-size:2em}.markdown-body h2{border-bottom:1px solid var(--border);padding-bottom:.3em;font-size:1.45em}.markdown-body h3{color:#9d7fea;font-size:1.2em}.markdown-body h4{font-size:1em}.markdown-body h5,.markdown-body h6{color:var(--text-muted);font-size:.9em}.markdown-body p{margin:.85em 0}.markdown-body a{color:var(--accent);border-bottom:1px solid var(--accent-border);transition:border-color var(--tr), color var(--tr);text-decoration:none}.markdown-body a:hover{color:#7dff9e;border-bottom-color:var(--accent)}.markdown-body strong{color:var(--text);font-weight:700}.markdown-body em{font-style:italic}.markdown-body del{color:var(--text-muted);text-decoration:line-through}.markdown-body :not(pre)>code{font-family:var(--font-mono);color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:3px;padding:.1em .45em;font-size:.85em}.markdown-body pre{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);margin:1.2em 0;padding:16px 20px;overflow-x:auto}.markdown-body pre code{color:var(--text);font-family:var(--font-mono);background:0 0;border:none;padding:0;font-size:12.5px;line-height:1.65}.markdown-body blockquote{border-radius:0 var(--radius) var(--radius) 0;color:var(--text-muted);background:#9370db0f;border-left:3px solid #9d7fea;margin:1.2em 0;padding:12px 16px 12px 20px;font-style:italic}.markdown-body blockquote p{margin:0}.markdown-body blockquote strong{color:var(--text)}.markdown-body ul,.markdown-body ol{margin:.8em 0;padding-left:1.6em}.markdown-body li{margin:.3em 0}.markdown-body ul li::marker{color:var(--accent)}.markdown-body ol li::marker{color:var(--accent);font-family:var(--font-mono);font-size:.85em}.markdown-body ul ul,.markdown-body ol ol,.markdown-body ul ol,.markdown-body ol ul{margin:.2em 0}.markdown-body table{border-collapse:collapse;width:100%;font-size:13px;font-family:var(--font-mono);border:1px solid var(--border);border-radius:var(--radius);margin:1.2em 0;overflow:hidden}.markdown-body thead{background:var(--surface-2)}.markdown-body th{text-align:left;color:var(--text-muted);border-bottom:1px solid var(--border-2);letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;font-size:11px;font-weight:600}.markdown-body td{border-bottom:1px solid var(--border);color:var(--text);padding:8px 14px}.markdown-body tr:last-child td{border-bottom:none}.markdown-body tbody tr:hover td{background:var(--surface-2)}.markdown-body hr{border:none;border-top:1px solid var(--border);margin:2em 0}.markdown-body img{border-radius:var(--radius);border:1px solid var(--border);max-width:100%}.markdown-body input[type=checkbox]{accent-color:var(--accent);margin-right:6px}.markdown-body .code-block-wrapper{margin:1.2em 0;position:relative}.markdown-body .code-block-wrapper pre{margin:0}.markdown-body .code-block-lang{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);pointer-events:none;user-select:none;padding:3px 0;font-size:10px;font-weight:600;display:inline-block;position:absolute;top:0;right:10px}.markdown-body .hljs-keyword,.markdown-body .hljs-operator,.markdown-body .hljs-selector-tag{color:#c792ea}.markdown-body .hljs-string,.markdown-body .hljs-regexp,.markdown-body .hljs-template-string{color:#c3e88d}.markdown-body .hljs-number,.markdown-body .hljs-literal{color:#f78c6c}.markdown-body .hljs-comment,.markdown-body .hljs-quote{color:#546e7a;font-style:italic}.markdown-body .hljs-type,.markdown-body .hljs-built_in,.markdown-body .hljs-class .hljs-title{color:#80cbc4}.markdown-body .hljs-title,.markdown-body .hljs-title.function_,.markdown-body .hljs-title.class_{color:#82aaff}.markdown-body .hljs-variable,.markdown-body .hljs-attr,.markdown-body .hljs-property{color:#f07178}.markdown-body .hljs-meta,.markdown-body .hljs-tag{color:#ff5572}.markdown-body .hljs-symbol,.markdown-body .hljs-bullet{color:#89ddff}.markdown-body .hljs-addition{color:#c3e88d;background:#c3e88d1a}.markdown-body .hljs-deletion{color:#f07178;background:#f071781a}[data-theme=light] .markdown-body .hljs-keyword,[data-theme=light] .markdown-body .hljs-operator,[data-theme=light] .markdown-body .hljs-selector-tag{color:#d73a49}[data-theme=light] .markdown-body .hljs-string,[data-theme=light] .markdown-body .hljs-regexp,[data-theme=light] .markdown-body .hljs-template-string{color:#22863a}[data-theme=light] .markdown-body .hljs-number,[data-theme=light] .markdown-body .hljs-literal{color:#e36209}[data-theme=light] .markdown-body .hljs-comment,[data-theme=light] .markdown-body .hljs-quote{color:#6a737d;font-style:italic}[data-theme=light] .markdown-body .hljs-type,[data-theme=light] .markdown-body .hljs-built_in,[data-theme=light] .markdown-body .hljs-class .hljs-title{color:#005cc5}[data-theme=light] .markdown-body .hljs-title,[data-theme=light] .markdown-body .hljs-title.function_,[data-theme=light] .markdown-body .hljs-title.class_{color:#6f42c1}[data-theme=light] .markdown-body .hljs-variable,[data-theme=light] .markdown-body .hljs-attr,[data-theme=light] .markdown-body .hljs-property{color:#e36209}[data-theme=light] .markdown-body .hljs-meta,[data-theme=light] .markdown-body .hljs-tag{color:#22863a}[data-theme=light] .markdown-body .hljs-symbol,[data-theme=light] .markdown-body .hljs-bullet{color:#005cc5}.markdown-body .mermaid-block{justify-content:center;margin:1.4em 0;display:flex;overflow-x:auto}.markdown-body .mermaid-block svg{max-width:100%;height:auto}