:root{--color-bg-primary: #ffffff;--color-bg-secondary: #f8fafc;--color-bg-tertiary: #f1f5f9;--color-bg-elevated: #ffffff;--color-text-primary: #0f172a;--color-text-secondary: #475569;--color-text-tertiary: #94a3b8;--color-text-inverse: #ffffff;--color-border: #e2e8f0;--color-border-focus: #6366f1;--color-accent: #6366f1;--color-accent-hover: #4f46e5;--color-accent-light: #e0e7ff;--color-success: #10b981;--color-success-bg: #d1fae5;--color-error: #ef4444;--color-error-bg: #fee2e2;--color-warning: #f59e0b;--color-warning-bg: #fef3c7;--color-diff-add: #22c55e;--color-diff-add-bg: #dcfce7;--color-diff-remove: #ef4444;--color-diff-remove-bg: #fee2e2;--color-diff-change: #f59e0b;--color-diff-change-bg: #fef9c3;--color-code-bg: #f8fafc;--color-code-border: #e2e8f0;--color-syntax-keyword: #8b5cf6;--color-syntax-string: #059669;--color-syntax-number: #dc2626;--color-syntax-comment: #94a3b8;--color-syntax-property: #2563eb;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "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: 1.875rem;--text-4xl: 2.25rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease;--z-dropdown: 100;--z-modal: 200;--z-toast: 300}[data-theme=dark]{--color-bg-primary: #0f172a;--color-bg-secondary: #1e293b;--color-bg-tertiary: #334155;--color-bg-elevated: #1e293b;--color-text-primary: #f8fafc;--color-text-secondary: #cbd5e1;--color-text-tertiary: #64748b;--color-text-inverse: #0f172a;--color-border: #334155;--color-border-focus: #818cf8;--color-accent: #818cf8;--color-accent-hover: #a5b4fc;--color-accent-light: #312e81;--color-code-bg: #1e293b;--color-code-border: #334155;--color-diff-add-bg: #14532d;--color-diff-remove-bg: #7f1d1d;--color-diff-change-bg: #713f12}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-bg-primary);height:100vh;overflow:hidden}#app{height:100vh;display:flex;flex-direction:column;overflow:hidden}h1,h2,h3,h4,h5,h6{font-weight:var(--font-semibold);line-height:var(--line-height-tight);color:var(--color-text-primary)}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base)}p{margin-bottom:var(--space-4);color:var(--color-text-secondary)}a{color:var(--color-accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-accent-hover)}code,pre,kbd,samp{font-family:var(--font-mono);font-size:.9em}code{background-color:var(--color-code-bg);border:1px solid var(--color-code-border);border-radius:var(--radius-sm);padding:.125rem .375rem}pre{background-color:var(--color-code-bg);border:1px solid var(--color-code-border);border-radius:var(--radius-md);padding:var(--space-4);overflow-x:auto}pre code{background:none;border:none;padding:0}:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}::selection{background-color:var(--color-accent-light);color:var(--color-text-primary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.container{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--space-4)}@media (min-width: 640px){.container{padding:0 var(--space-6)}}@media (min-width: 1024px){.container{padding:0 var(--space-8)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-medium);line-height:1;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--color-accent);color:var(--color-text-inverse)}.btn-primary:hover:not(:disabled){background-color:var(--color-accent-hover)}.btn-secondary{background-color:var(--color-bg-tertiary);color:var(--color-text-primary);border-color:var(--color-border)}.btn-secondary:hover:not(:disabled){background-color:var(--color-border)}.btn-ghost{background-color:transparent;color:var(--color-text-secondary)}.btn-ghost:hover:not(:disabled){background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.btn-lg{padding:var(--space-3) var(--space-6);font-size:var(--text-base)}.btn-icon{padding:var(--space-2);aspect-ratio:1}.input{display:block;width:100%;padding:var(--space-2) var(--space-3);font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-primary);background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input:focus{outline:none;border-color:var(--color-border-focus);box-shadow:0 0 0 3px var(--color-accent-light)}.input::placeholder{color:var(--color-text-tertiary)}.textarea{min-height:120px;resize:vertical;font-family:var(--font-mono)}.code-input{font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--line-height-relaxed);tab-size:2;background-color:var(--color-code-bg)}.card{background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm)}.card-hover{transition:all var(--transition-normal)}.card-hover:hover{box-shadow:var(--shadow-md);border-color:var(--color-accent);transform:translateY(-2px)}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-weight:var(--font-medium);border-radius:var(--radius-full);background-color:var(--color-accent-light);color:var(--color-accent)}.badge-success{background-color:var(--color-success-bg);color:var(--color-success)}.badge-error{background-color:var(--color-error-bg);color:var(--color-error)}.divider{height:1px;background-color:var(--color-border);border:none;margin:var(--space-4) 0}.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-6)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.text-center{text-align:center}.text-sm{font-size:var(--text-sm)}.text-lg{font-size:var(--text-lg)}.text-secondary{color:var(--color-text-secondary)}.font-mono{font-family:var(--font-mono)}.font-medium{font-weight:var(--font-medium)}.font-semibold{font-weight:var(--font-semibold)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.tool-page{flex:1;display:flex;flex-direction:column;min-height:0}.tool-header{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border);background-color:var(--color-bg-primary)}.tool-title{font-size:var(--text-xl);font-weight:var(--font-semibold);margin-bottom:var(--space-1)}.tool-description{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:0}.tool-actions{display:flex;gap:var(--space-2);margin-top:var(--space-3)}.tool-body{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.split-pane{flex:1;display:flex;min-height:0}.split-pane-horizontal{flex-direction:row}.split-pane-vertical{flex-direction:column}.split-pane-left,.split-pane-right,.split-pane-top,.split-pane-bottom{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.split-pane-divider{flex-shrink:0;background-color:var(--color-border);transition:background-color var(--transition-fast);position:relative}.split-pane-divider:hover,.split-pane-divider.dragging{background-color:var(--color-accent)}.split-pane-horizontal>.split-pane-divider{width:4px;cursor:col-resize}.split-pane-vertical>.split-pane-divider{height:4px;cursor:row-resize}.editor-panel{flex:1;display:flex;flex-direction:column;min-height:0;background-color:var(--color-bg-secondary)}.editor-panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-4);background-color:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border)}.editor-panel-title{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-secondary)}.editor-panel-body{flex:1;display:flex;min-height:0;overflow:hidden}.editor-textarea{flex:1;width:100%;height:100%;padding:var(--space-4);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--line-height-relaxed);color:var(--color-text-primary);background-color:var(--color-code-bg);border:none;resize:none;outline:none;tab-size:2}.editor-textarea::placeholder{color:var(--color-text-tertiary)}.editor-with-lines{display:flex}.line-numbers{flex-shrink:0;padding:var(--space-4) var(--space-2);padding-right:var(--space-3);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--line-height-relaxed);color:var(--color-text-tertiary);background-color:var(--color-bg-tertiary);border-right:1px solid var(--color-border);text-align:right;user-select:none;min-width:3rem}.diff-output{flex:1;overflow:auto;padding:var(--space-4);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--line-height-relaxed);background-color:var(--color-code-bg)}.diff-line{display:flex;padding:0 var(--space-2);min-height:1.75em}.diff-line-number{flex-shrink:0;width:3rem;padding-right:var(--space-2);text-align:right;color:var(--color-text-tertiary);user-select:none}.diff-line-content{flex:1;white-space:pre-wrap;word-break:break-all}.diff-line-add{background-color:var(--color-diff-add-bg)}.diff-line-add .diff-line-content:before{content:"+";color:var(--color-diff-add);margin-right:var(--space-2)}.diff-line-remove{background-color:var(--color-diff-remove-bg)}.diff-line-remove .diff-line-content:before{content:"-";color:var(--color-diff-remove);margin-right:var(--space-2)}.diff-line-context{background-color:transparent}.diff-line-context .diff-line-content:before{content:" ";margin-right:var(--space-2)}.json-output{flex:1;overflow:auto;padding:var(--space-4);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--line-height-relaxed);background-color:var(--color-code-bg)}.json-key{color:var(--color-syntax-property)}.json-string{color:var(--color-syntax-string)}.json-number{color:var(--color-syntax-number)}.json-boolean{color:var(--color-syntax-keyword)}.json-null{color:var(--color-text-tertiary)}.markdown-preview{flex:1;overflow:auto;padding:var(--space-6);background-color:var(--color-bg-primary)}.markdown-preview h1{margin-top:0;margin-bottom:var(--space-4)}.markdown-preview h2{margin-top:var(--space-6);margin-bottom:var(--space-3)}.markdown-preview h3{margin-top:var(--space-5);margin-bottom:var(--space-2)}.markdown-preview h4,.markdown-preview h5,.markdown-preview h6{margin-top:var(--space-4);margin-bottom:var(--space-2)}.markdown-preview ul,.markdown-preview ol{padding-left:var(--space-6);margin-bottom:var(--space-4)}.markdown-preview li{margin-bottom:var(--space-2);color:var(--color-text-secondary)}.markdown-preview blockquote{border-left:4px solid var(--color-accent);padding-left:var(--space-4);margin:var(--space-4) 0;color:var(--color-text-secondary);font-style:italic}.markdown-preview table{width:100%;border-collapse:collapse;margin-bottom:var(--space-4)}.markdown-preview th,.markdown-preview td{border:1px solid var(--color-border);padding:var(--space-2) var(--space-3);text-align:left}.markdown-preview th{background-color:var(--color-bg-secondary);font-weight:var(--font-semibold)}.markdown-preview img{max-width:100%;height:auto;border-radius:var(--radius-md)}.markdown-preview hr{border:none;height:1px;background-color:var(--color-border);margin:var(--space-6) 0}.error-message{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3) var(--space-4);background-color:var(--color-error-bg);border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--color-error);font-size:var(--text-sm)}.error-icon{flex-shrink:0;width:1.25rem;height:1.25rem}.loading-spinner{width:1.5rem;height:1.5rem;border:2px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.split-pane-horizontal{flex-direction:column}.split-pane-horizontal>.split-pane-divider{width:100%;height:4px;cursor:row-resize}.tool-header{padding:var(--space-3) var(--space-4)}.tool-actions{flex-wrap:wrap}}