#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}#app,body{margin:0;padding:0;background:#f4f6f8}.json-node[data-v-268b4f44]{font-family:Consolas,monospace;font-size:13px;line-height:1.5}.node-children[data-v-268b4f44]{padding-left:16px;border-left:1px solid #eee;margin-left:6px;transition:all .2s}.node-key[data-v-268b4f44]{cursor:pointer;color:#444;display:flex;align-items:center;padding:2px 0;transition:background .2s}.node-key[data-v-268b4f44]:hover{background-color:#f0f0f0;border-radius:4px}.node-leaf.empty[data-v-268b4f44]{height:24px;margin:4px 0}.node-leaf[data-v-268b4f44]{margin:4px 0;display:flex;align-items:center}.node-leaf.diff[data-v-268b4f44]{background-color:#fff2a8;border-radius:3px;padding:1px 4px}.key-name[data-v-268b4f44]{font-weight:600;margin-right:4px;color:#8e004b}.value[data-v-268b4f44]{color:#007acc;margin-right:4px}.toggle[data-v-268b4f44]{display:inline-block;width:12px;text-align:center;transition:transform .2s;margin-right:3px}.toggle.rotated[data-v-268b4f44]{transform:rotate(90deg)}.brackets[data-v-268b4f44]{color:#999;margin-left:4px}.path[data-v-268b4f44]{color:#999;font-size:11px;margin-left:5px}.box{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;padding:0 30px;background:#f4f6f8;color:#333}h3{text-align:center;color:#1e88e5;margin-bottom:20px}.editors{display:flex;gap:10px;margin-bottom:15px}textarea{width:50%;height:96px;font-family:monospace;font-size:14px;padding:10px;border:1px solid #ccc;border-radius:6px;resize:vertical;transition:border-color .3s}textarea:focus{outline:none;border-color:#1e88e5;box-shadow:0 0 5px rgba(30,136,229,.3)}.buttons{margin-bottom:20px;text-align:center}.btn{background:#fff;border:1px solid #ccc;border-radius:5px;padding:6px 14px;font-size:14px;cursor:pointer;margin-right:10px;transition:all .2s ease}.btn:hover{background:#f0f0f0}.btn.primary{background:#1e88e5;color:#fff;border-color:#1e88e5}.btn.primary:hover{background:#1565c0}.result{position:relative;display:flex;gap:20px}.connection-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.column{position:relative;flex:1;z-index:2;width:50%;border:1px solid #ccc;border-radius:6px;padding:8px;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.05);overflow-x:auto}.column h3{margin-top:0;font-size:16px;font-weight:600;color:#1e88e5;border-bottom:1px solid #e0e0e0;padding-bottom:5px;margin-bottom:10px}