*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;tab-size:2}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,svg{display:block;max-width:100%}button,input,select,textarea{font:inherit;margin:0}button,[type=button],[type=reset],[type=submit]{cursor:pointer}button:disabled{cursor:not-allowed}:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}:root{--color-white: #fff;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-400: #9ca3af;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-800: #1f2937;--color-gray-900: #111827;--color-primary-500: #f97316;--color-primary-600: #ea580c;--color-primary-700: #c2410c;--color-success-500: #22c55e;--color-success-700: #15803d;--color-error-500: #ef4444;--color-error-50: #fef2f2;--color-warning-500: #f59e0b;--color-warning-50: #fffbeb;--color-text: #0f172a;--color-text-muted: #374151;--color-text-light: #6b7280;--color-bg: #f0f0f0;--color-bg-muted: #e0e0e0;--color-bg-elevated: #fff;--color-focus: #f97316;--json-key: #9a3412;--json-string: #15803d;--json-number: #1d4ed8;--json-boolean: #7c3aed;--json-null: #6b7280;--json-bracket: #4b5563;--json-comma: #9ca3af;--json-highlight: #fde68a;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, "SF Mono", Monaco, "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;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--space-12: 3rem;--radius-sm: .125rem;--radius-base: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--transition: .15s ease-out}[data-theme=dark]{--color-text: #e5e7eb;--color-text-muted: #9ca3af;--color-text-light: #9ca3af;--color-bg: #1f2937;--color-bg-muted: #283345;--color-bg-elevated: #374151;--json-key: #fdba74;--json-string: #86efac;--json-number: #93c5fd;--json-boolean: #c4b5fd;--json-null: #9ca3af;--json-bracket: #d1d5db;--json-comma: #6b7280;--json-highlight: rgb(253 224 71 / .35)}html{font:16px/1.5 var(--font-sans)}body{color:var(--color-text);background:var(--color-bg);min-height:100vh}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.25;color:var(--color-gray-900)}h1{font-size:var(--text-xl);letter-spacing:-.01em}h2{font-size:var(--text-lg)}p{margin:0}code,kbd{font:.9em var(--font-mono);background:var(--color-bg-muted);color:var(--color-gray-800);padding:var(--space-1) var(--space-2);border-radius:var(--radius-base)}kbd{font-size:var(--text-xs);padding:1px var(--space-1)}a{color:var(--color-primary-600);text-decoration:none;transition:color var(--transition)}a:active{color:var(--color-primary-700)}strong{font-weight:700}small{font-size:var(--text-sm);color:var(--color-text-muted)}button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font:600 var(--text-sm)/1.25 var(--font-sans);color:var(--color-white);background:var(--color-gray-900);border:0;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition),color var(--transition)}button:active{background:var(--color-gray-700)}button:disabled{background:var(--color-gray-300);color:var(--color-gray-500);cursor:not-allowed}button[type=button],button[type=reset]{background:var(--color-bg-muted);color:var(--color-text)}button[type=button]:hover:not(:disabled),button[type=reset]:hover:not(:disabled){background:var(--color-gray-300)}button[type=button]:active,button[type=reset]:active{background:var(--color-gray-400)}input,textarea,select{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg-elevated);border:0;border-radius:var(--radius-md);transition:box-shadow var(--transition)}input:focus,textarea:focus,select:focus{outline:0;box-shadow:0 0 0 2px var(--color-focus)}input::placeholder,textarea::placeholder{color:var(--color-text-light)}.text-error{color:var(--color-error-500)}.text-muted{color:var(--color-text-muted)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[data-theme=dark] h1,[data-theme=dark] h2,[data-theme=dark] h3{color:var(--color-gray-200)}[data-theme=dark] code,[data-theme=dark] kbd{background:var(--color-bg-muted);color:var(--color-gray-100)}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-header{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--color-bg-elevated)}.app-header>h1{font-family:var(--font-mono);font-size:var(--text-base);font-weight:700;margin-right:auto}.app-header>h1>span{color:var(--color-primary-500)}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;background:var(--color-bg-muted);color:var(--color-text-muted);border:0;border-radius:var(--radius-md);transition:background var(--transition),color var(--transition)}.lang-btn{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;letter-spacing:.05em;text-decoration:none}.icon-btn:hover:not(:disabled){background:var(--color-gray-300);color:var(--color-gray-900)}.icon-btn:active{background:var(--color-gray-400)}[data-theme=dark] .icon-btn{background:var(--color-bg-elevated);color:var(--color-gray-300)}[data-theme=dark] .icon-btn:hover:not(:disabled){background:var(--color-gray-600);color:var(--color-gray-100)}.app-body{display:grid;grid-template-columns:minmax(320px,1fr) 2fr;flex:1;min-height:0}@media(max-width:768px){.app-body{grid-template-columns:1fr}}.pane{display:flex;flex-direction:column;min-height:0;background:var(--color-bg-elevated);margin:var(--space-2);border-radius:var(--radius-lg);overflow:hidden}.pane-header{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-bg-muted)}.pane-header>h2{font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);margin-right:auto;text-transform:uppercase;letter-spacing:.05em}.pane-header-actions{display:flex;gap:var(--space-1);margin-left:var(--space-4)}.pane-body{flex:1;min-height:0;overflow:auto;position:relative}.input-textarea{width:100%;height:100%;padding:var(--space-3);font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.5;color:var(--color-text);background:transparent;border:0;border-radius:0;resize:none;white-space:pre;tab-size:2}.input-textarea:focus{box-shadow:none;outline:0}.input-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-6);color:var(--color-text-light);text-align:center;pointer-events:none}.input-placeholder>p{font-size:var(--text-sm)}.input-placeholder kbd{background:var(--color-bg-muted)}.drag-overlay{position:absolute;inset:var(--space-2);display:flex;align-items:center;justify-content:center;background:#f9731614;color:var(--color-primary-600);font-weight:700;font-size:var(--text-lg);border-radius:var(--radius-lg);outline:2px dashed var(--color-primary-500);outline-offset:-8px;pointer-events:none;z-index:2}.error-banner{padding:var(--space-3);background:var(--color-error-50);color:var(--color-error-500);font-family:var(--font-mono);font-size:var(--text-sm)}[data-theme=dark] .error-banner{background:#ef44441a}.error-banner>strong{color:var(--color-error-500)}.error-banner>code{display:block;margin-top:var(--space-2);padding:var(--space-2);background:#ef444414;color:var(--color-error-500);overflow-x:auto;white-space:pre}.toolbar{display:flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-2) var(--space-3);background:var(--color-bg-elevated)}.toolbar>.toolbar-group{display:flex;gap:var(--space-1);padding-right:var(--space-2)}.toolbar>.toolbar-group+.toolbar-group{padding-left:var(--space-2);border-left:0;box-shadow:inset 1px 0 0 var(--color-bg-muted)}.toolbar>.toolbar-spacer{flex:1}.toolbar-btn{padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);background:transparent;border-radius:var(--radius-base)}.toolbar-btn:hover:not(:disabled){background:var(--color-gray-300);color:var(--color-gray-900)}.toolbar-btn:active{background:var(--color-gray-400)}.toolbar-btn.is-active{background:var(--color-bg-muted);color:var(--color-text)}[data-theme=dark] .toolbar-btn:hover:not(:disabled){background:var(--color-gray-600);color:var(--color-gray-100)}[data-theme=dark] .toolbar-btn:active{background:var(--color-gray-700)}.stats-bar{display:flex;gap:var(--space-3);font-size:var(--text-xs);color:var(--color-text-muted);font-family:var(--font-mono);text-transform:none;letter-spacing:0}.stats-bar>span>strong{color:var(--color-text)}.search-bar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-bg-elevated)}.search-bar>input{flex:1;padding:var(--space-1) var(--space-3);font-family:var(--font-mono);font-size:var(--text-sm);background:var(--color-bg-muted)}[data-theme=dark] .search-bar>input::-webkit-search-cancel-button{filter:invert(1)}.search-bar>small{white-space:nowrap;font-family:var(--font-mono)}.search-nav{width:1.75rem;height:1.75rem}.search-nav:disabled{opacity:.4;cursor:not-allowed}.json-tree{padding:var(--space-2) var(--space-3) var(--space-6);font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6;color:var(--color-text)}.tree-node{display:block;position:relative}.tree-row{display:flex;align-items:flex-start;gap:0;padding:1px 0;border-radius:var(--radius-sm);white-space:nowrap}.tree-row:hover{background:var(--color-bg-muted)}.tree-row.is-focused{background:#f973161a}.tree-row.is-active-match{background:#f9731638;outline:1px solid var(--color-primary-500)}.tree-row .toggle{flex-shrink:0;width:1.5rem;height:1.5rem;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--color-text-muted);padding:0;margin-right:var(--space-1);border-radius:var(--radius-sm);font-size:.7rem;line-height:1}.tree-row .toggle:hover{color:var(--color-primary-600);background:var(--color-bg-muted)}.tree-row .toggle.invisible{visibility:hidden}.tree-key{color:var(--json-key);font-weight:600}.tree-key-quote,.tree-string-quote{color:var(--json-bracket);font-weight:400}.tree-colon{color:var(--json-bracket);margin-right:var(--space-1)}.tree-value{white-space:pre-wrap;word-break:break-word}.tree-value.type-string{color:var(--json-string)}.tree-value.type-number{color:var(--json-number)}.tree-value.type-boolean{color:var(--json-boolean);font-weight:600}.tree-value.type-null{color:var(--json-null);font-style:italic}.tree-bracket{color:var(--json-bracket)}.tree-comma{color:var(--json-comma)}.tree-meta{color:var(--json-comma);margin-left:var(--space-2);font-size:var(--text-xs)}.tree-preview{color:var(--json-comma);margin-left:var(--space-1);font-style:italic}.tree-children{margin:0;padding-left:1.25rem;list-style:none;box-shadow:inset 1px 0 0 var(--color-bg-muted)}.tree-action{opacity:0;margin-left:var(--space-2);padding:0 var(--space-2);font-size:var(--text-xs);color:var(--color-text-light);background:transparent;border-radius:var(--radius-sm);transition:opacity var(--transition)}.tree-row:hover .tree-action,.tree-row:focus-within .tree-action{opacity:1}.tree-action:hover:not(:disabled){color:var(--color-text);background:var(--color-bg-elevated)}[data-theme=dark] .tree-action:hover:not(:disabled){background:var(--color-gray-600)}.tree-action.is-copied{color:var(--color-success-500);opacity:1}mark.search-hit{background:var(--json-highlight);color:inherit;border-radius:var(--radius-sm);padding:0 1px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--space-3);color:var(--color-text-light);padding:var(--space-6);text-align:center}.empty-state>h2{color:var(--color-text-muted);font-weight:600}.empty-state>p{font-size:var(--text-sm);max-width:28rem}.toast{position:fixed;bottom:var(--space-6);left:50%;transform:translate(-50%);padding:var(--space-2) var(--space-4);background:var(--color-gray-900);color:var(--color-white);border-radius:var(--radius-md);font-size:var(--text-sm);box-shadow:0 4px 12px #00000026;z-index:50;animation:toast-fade var(--transition)}[data-theme=dark] .toast{background:var(--color-gray-700)}@keyframes toast-fade{0%{opacity:0;transform:translate(-50%,var(--space-2))}to{opacity:1;transform:translate(-50%)}}