@import "https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=DM+Sans:wght@300;400;500;600&display=swap";.app-wrapper{background:var(--bg);flex-direction:column;min-height:100svh;display:flex}.app-header{background:var(--surface);border-bottom:1px solid var(--border);z-index:100;box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;gap:16px;padding:12px 24px;display:flex;position:sticky;top:0}.header-left{flex-shrink:0;align-items:center;gap:10px;display:flex}.header-right{align-items:center;gap:12px;min-width:0;display:flex}.logo-dot{background:var(--accent);border-radius:50%;flex-shrink:0;width:8px;height:8px}.app-title{letter-spacing:-.3px;color:var(--text);font-size:15px;font-weight:600}.version-badge{font-family:var(--font-mono);color:var(--text-3);background:var(--surface-2);border:1px solid var(--border);letter-spacing:.3px;border-radius:20px;flex-shrink:0;padding:2px 8px;font-size:10px;font-weight:400}.shortcut-hint{color:var(--text-3);flex-wrap:wrap;align-items:center;gap:3px;min-width:0;font-size:11px;display:flex}kbd{font-family:var(--font-mono);background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-2);box-shadow:0 1px 0 var(--border-strong);border-radius:3px;padding:1px 5px;font-size:10px;font-weight:500;display:inline-block}@media (width<=900px){.shortcut-hint{display:none}}.app-grid{flex:1;grid-template-rows:auto auto;grid-template-columns:1fr 1fr;gap:16px;padding:24px;display:grid}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);flex-direction:column;display:flex;overflow:hidden}.panel-full{grid-column:1/-1}.panel-header{background:var(--surface-2);border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;padding:11px 16px;display:flex}.panel-title{letter-spacing:.9px;text-transform:uppercase;color:var(--text-3);flex-shrink:0;font-size:10px;font-weight:600}.panel-header-right{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.panel-body{flex:1;padding:16px}.json-textarea{width:100%;height:160px;font-family:var(--font-mono);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);resize:vertical;outline:none;padding:12px;font-size:12.5px;line-height:1.75;transition:border-color .15s,box-shadow .15s}.json-textarea:focus{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-soft)}.json-textarea.error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.btn-row{flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;display:flex}.btn{font-family:var(--font-sans);border-radius:var(--radius-sm);cursor:pointer;letter-spacing:-.1px;white-space:nowrap;border:none;padding:7px 14px;font-size:13px;font-weight:500;line-height:1;transition:all .15s}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 3px #2a5cff4d}.btn-primary:hover{background:#1e4fef;transform:translateY(-1px);box-shadow:0 3px 8px #2a5cff59}.btn-primary:active{transform:translateY(0)}.btn-ghost{color:var(--text-2);border:1px solid var(--border);background:0 0}.btn-ghost:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--text)}.btn-ghost.active{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent)}.btn-icon{color:var(--text-3);border:1px solid var(--border);border-radius:var(--radius-xs);background:0 0;padding:5px 10px;font-size:11px;font-weight:500}.btn-icon:hover{background:var(--surface-2);color:var(--text-2)}.view-tabs{gap:4px;display:flex}.view-tabs .btn{padding:5px 10px;font-size:12px}.collapse-btns{gap:4px;display:flex}.collapse-btns .btn{padding:4px 10px;font-size:11px}.count-chip{font-family:var(--font-mono);background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);border-radius:20px;flex-shrink:0;padding:2px 8px;font-size:10px}.json-path{font-family:var(--font-mono);color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border);text-overflow:ellipsis;white-space:nowrap;border-radius:5px;align-items:center;gap:4px;max-width:260px;padding:2px 9px;font-size:11px;animation:.15s path-in;display:inline-flex;overflow:hidden}@keyframes path-in{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}.array-index{font-family:var(--font-mono);color:var(--purple);background:var(--purple-soft);border-radius:4px;flex-shrink:0;padding:1px 6px;font-size:11px;font-weight:500}.node-wrap{padding:12px;overflow:auto}.node{border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);margin-bottom:6px;transition:box-shadow .15s;overflow:hidden}.node:hover{box-shadow:var(--shadow)}.node-head{background:var(--surface-2);cursor:pointer;-webkit-user-select:none;user-select:none;border-bottom:1px solid var(--border);align-items:center;gap:8px;padding:9px 12px;transition:background .1s;display:flex}.node-head:hover{background:var(--border)}.node-type-badge{font-family:var(--font-mono);letter-spacing:.3px;border-radius:4px;flex-shrink:0;padding:2px 7px;font-size:10px;font-weight:500}.badge-object{background:var(--accent-soft);color:var(--accent)}.badge-array{background:var(--purple-soft);color:var(--purple)}.badge-string{background:var(--green-soft);color:var(--green)}.badge-number{background:var(--orange-soft);color:var(--orange)}.badge-bool{background:var(--amber-soft);color:var(--amber)}.badge-null{background:var(--surface-2);color:var(--text-3)}.node-key{font-family:var(--font-mono);color:var(--text);font-size:12px;font-weight:500}.node-count{font-family:var(--font-mono);color:var(--text-3);margin-left:auto;font-size:10px}.chevron{width:14px;height:14px;color:var(--text-3);flex-shrink:0;transition:transform .2s}.chevron.open{transform:rotate(90deg)}.node-children{background:var(--surface);padding:8px 8px 4px 16px}.value-node{background:var(--surface);border-radius:var(--radius-sm);border:1px solid var(--border);align-items:center;gap:8px;margin-bottom:5px;padding:7px 10px;transition:border-color .15s;display:flex}.value-node:focus-within{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-soft)}.value-input{font-family:var(--font-mono);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);outline:none;flex:1;min-width:0;padding:4px 8px;font-size:12px;transition:border-color .15s,box-shadow .15s}.value-input:focus{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-soft)}.key-input{font-family:var(--font-mono);border-radius:var(--radius-xs);color:var(--text);background:0 0;border:1px solid #0000;outline:none;max-width:120px;padding:3px 6px;font-size:12px;font-weight:500;transition:border-color .15s,background .15s}.key-input:hover{background:var(--bg);border-color:var(--border)}.key-input:focus{background:var(--bg);border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-soft)}.output-pre{font-family:var(--font-mono);color:var(--text);tab-size:2;background:0 0;max-height:400px;margin:0;padding:16px;font-size:12px;line-height:1.8;overflow:auto}.empty-state{text-align:center;color:var(--text-3);flex-direction:column;align-items:center;gap:8px;padding:40px 16px;font-size:13px;display:flex}.empty-state svg{opacity:.25}.json-table{border-collapse:collapse;width:100%;font-size:13px}.json-table th{background:var(--surface-2);border:1px solid var(--border);letter-spacing:.7px;text-transform:uppercase;color:var(--text-3);text-align:left;padding:7px 10px;font-size:10px;font-weight:600}.json-table td{border:1px solid var(--border);font-family:var(--font-mono);color:var(--text);padding:6px 10px;font-size:12px}.json-table tr:hover td{background:var(--surface-2)}.drag-handle{cursor:grab;color:var(--border-strong);flex-shrink:0;padding:0 4px;font-size:14px;line-height:1}.drag-handle:hover{color:var(--text-3)}.drag-handle:active{cursor:grabbing}.btn-copy-structure{font-family:var(--font-sans);color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border);cursor:pointer;opacity:0;pointer-events:none;white-space:nowrap;border-radius:5px;flex-shrink:0;align-items:center;gap:5px;margin-left:4px;padding:3px 9px;font-size:11px;font-weight:500;transition:opacity .15s,background .15s,transform .1s;display:inline-flex}.btn-copy-structure.visible,.node-head:hover .btn-copy-structure{opacity:1;pointer-events:auto}.btn-copy-structure:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-copy-structure:active{transform:scale(.96)}.node.node-selected{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-soft), var(--shadow)}.node.node-selected>.node-head{background:var(--accent-soft);border-bottom-color:var(--accent-border)}.modal-backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:200;background:#00000059;justify-content:center;align-items:center;padding:24px;animation:.15s backdrop-in;display:flex;position:fixed;inset:0}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}.modal{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);border-radius:12px;flex-direction:column;width:100%;max-width:520px;max-height:80vh;animation:.18s modal-in;display:flex;overflow:hidden}@keyframes modal-in{0%{opacity:0;transform:scale(.97)translateY(4px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 20px 12px;display:flex}.modal-title{color:var(--text);margin-bottom:2px;font-size:14px;font-weight:600;display:block}.modal-sub{color:var(--text-3);font-size:11px;display:block}.modal-close{border:1px solid var(--border);cursor:pointer;color:var(--text-3);background:0 0;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;padding:5px;transition:all .15s;display:flex}.modal-close:hover{background:var(--surface-2);color:var(--text)}.modal-pre{font-family:var(--font-mono);color:var(--text);background:var(--bg);tab-size:2;border-bottom:1px solid var(--border);flex:1;margin:0;padding:16px 20px;font-size:12px;line-height:1.8;overflow:auto}.modal-footer{background:var(--surface-2);justify-content:flex-end;gap:8px;padding:12px 20px;display:flex}.toast{background:var(--text);color:var(--bg);box-shadow:var(--shadow-lg);z-index:1000;pointer-events:none;border-radius:8px;align-items:center;gap:8px;padding:10px 18px;font-size:13px;font-weight:500;animation:.2s toast-in;display:inline-flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(6px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.node[data-inserted=true]{animation:1.2s forwards node-inserted}@keyframes node-inserted{0%{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--accent-soft)}60%{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-soft)}to{border-color:var(--border);box-shadow:var(--shadow-sm)}}@media (width<=768px){.app-grid{grid-template-columns:1fr;gap:12px;padding:16px}.panel-full{grid-column:1}.collapse-btns .btn{padding:4px 8px;font-size:10px}}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}.visible{visibility:visible}.block{display:block}.flex{display:flex}.table{display:table}.flex-shrink{flex-shrink:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.border{border-style:var(--tw-border-style);border-width:1px}.italic{font-style:italic}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}:root{--bg:#f7f6f3;--surface:#fff;--surface-2:#f0efe9;--border:#e2e0d8;--border-strong:#ccc9be;--text:#1a1916;--text-2:#6b6860;--text-3:#9b9890;--accent:#2a5cff;--accent-soft:#eef1ff;--accent-border:#b8c5ff;--green:#1a7a4a;--green-soft:#edf7f2;--orange:#c4580f;--orange-soft:#fdf3ed;--purple:#7c3aed;--purple-soft:#f3eeff;--amber:#b45309;--amber-soft:#fff7e6;--shadow-sm:0 1px 2px #0000000f, 0 1px 3px #0000000a;--shadow:0 4px 12px #0000000f, 0 1px 3px #0000000a;--shadow-lg:0 8px 24px #00000014, 0 2px 6px #0000000d;--radius:10px;--radius-sm:7px;--radius-xs:5px;--font-sans:"DM Sans", system-ui, sans-serif;--font-mono:"DM Mono", ui-monospace, Consolas, monospace;font-family:var(--font-sans);letter-spacing:-.1px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.6}*,:before,:after{box-sizing:border-box}body{background:var(--bg);margin:0}#root{text-align:left;flex-direction:column;width:100%;max-width:100%;min-height:100svh;margin:0;display:flex}h1,h2,h3{font-family:var(--font-sans);color:var(--text);letter-spacing:-.3px;font-weight:600}h1{margin:0;font-size:20px}h2{margin:0 0 4px;font-size:15px}p{margin:0}code{font-family:var(--font-mono);background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:2px 6px;font-size:12px;line-height:1.6}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-3)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}