:root{--bg: #0e1117;--surface: #161b27;--surface2: #1e2535;--border: #2a3348;--accent: #4ade80;--accent2: #38bdf8;--muted: #4b5675;--text: #e2e8f0;--text-dim: #8892aa;--key: #93c5fd;--str: #86efac;--num: #fca5a5;--bool: #f9a8d4;--null: #94a3b8;--idx: #fbbf24;--error: #f87171;--success-bg: #14532d;--error-bg: #450a0a;--error-border: #7f1d1d;--radius: 8px;--mono: "JetBrains Mono", monospace;--sans: "Syne", sans-serif;--header-height: 52px;--pane-min-size: 160px}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px}button,input,textarea{font:inherit}.app{display:flex;flex-direction:column;height:100%}header{display:flex;align-items:center;gap:16px;height:var(--header-height);padding:0 20px;background:var(--surface);border-bottom:1px solid var(--border);-webkit-user-select:none;user-select:none;flex-shrink:0}.logo{font-size:17px;font-weight:800;letter-spacing:-.5px;white-space:nowrap}.logo span{color:var(--accent)}.sep{flex:1}.btn-group{display:flex;gap:4px;align-items:center}.donate-btn{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:20px;border:1.5px solid #f59e0b;background:linear-gradient(135deg,#f59e0b1f,#fbbf240f);color:#f59e0b;font-family:var(--sans);font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;flex-shrink:0;letter-spacing:.2px;position:relative;overflow:hidden;transition:border-color .2s,color .2s,background .2s,transform .15s,box-shadow .2s}.donate-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#f59e0b,#fbbf24);opacity:0;transition:opacity .2s}.donate-btn:hover{color:#0e1117;border-color:#fbbf24;box-shadow:0 0 16px #f59e0b59;transform:translateY(-1px)}.donate-btn:hover:before{opacity:1}.donate-btn:active{transform:translateY(0)}.donate-icon{position:relative;font-size:15px;display:inline-block;transition:transform .3s}.donate-btn:hover .donate-icon{transform:rotate(-12deg) scale(1.2)}.donate-text{position:relative}button,.dropbtn,.search-bar input{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface2);color:var(--text)}button,.dropbtn{cursor:pointer;font-size:12px;font-weight:600;padding:5px 12px;transition:background .15s ease,border-color .15s ease,color .15s ease;white-space:nowrap}button:hover,.dropbtn:hover{background:var(--border);border-color:var(--accent);color:var(--accent)}.dropdown{position:relative}.dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:100;display:none;min-width:180px;overflow:hidden;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px #00000080}.dropdown.open .dropdown-menu{display:block}.dropdown-menu.right{left:auto;right:0}.dropdown-menu button{width:100%;text-align:left;border:0;border-radius:0;background:transparent;padding:8px 14px;border-bottom:1px solid var(--border)}.dropdown-menu button:last-child{border-bottom:0}.workspace{display:flex;flex:1;min-height:0;overflow:hidden}.workspace.top-bottom{flex-direction:column}.pane{display:flex;flex:1;min-width:0;min-height:0;flex-direction:column;overflow:hidden}.pane-label{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:8px 14px 6px;background:var(--surface);border-bottom:1px solid var(--border);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}.badge{margin-left:auto;border-radius:999px;padding:2px 7px;background:var(--border);color:var(--text-dim);font-size:10px}.badge.ok{background:var(--success-bg);color:var(--accent)}.badge.err{background:var(--error-bg);color:var(--error)}.divider{background:var(--border);flex-shrink:0}.workspace:not(.top-bottom) .divider{width:3px;cursor:col-resize}.workspace.top-bottom .divider{height:3px;cursor:row-resize}.divider:hover,.divider.dragging{background:var(--accent2)}#input-area,#output-area{flex:1;background:var(--surface);font-family:var(--mono);font-size:13px;line-height:1.65}#input-area{width:100%;resize:none;padding:14px;border:0;outline:none;color:var(--text);-moz-tab-size:2;tab-size:2}#input-area::placeholder{color:var(--muted)}#output-area{overflow:auto;padding:10px 14px;line-height:1.7}#error-bar{display:none;flex-shrink:0;padding:6px 14px;border-top:1px solid var(--error-border);background:var(--error-bg);color:var(--error);font-family:var(--mono);font-size:12px}#error-bar.show{display:block}.search-bar{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:6px 10px;background:var(--surface);border-bottom:1px solid var(--border)}.search-bar input{flex:1;outline:none;padding:4px 10px;font-family:var(--mono);font-size:12px}.search-bar input:focus{border-color:var(--accent2)}#search-count{color:var(--muted);font-size:11px;white-space:nowrap}.node-container{padding-left:0}.node-row{display:flex;align-items:baseline;gap:4px;padding:1px 0;border-radius:4px}.node-row:hover{background:#ffffff0a}.tree-children{padding-left:18px}.collapsed>.tree-children,.collapsed>.tree-close{display:none}.collapsed .inline-preview{display:inline!important}.collapsed>.node-row .node-count{display:none}.toggle{width:14px;text-align:center;flex-shrink:0;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:10px}.toggle:hover{color:var(--accent)}.spacer{display:inline-block;width:14px}.key{color:var(--key);font-weight:500}.colon,.bracket,.count,.type-badge,.inline-preview{color:var(--muted)}.str{color:var(--str)}.num{color:var(--num)}.bool{color:var(--bool)}.null{color:var(--null);font-style:italic}.idx-badge{color:var(--idx);background:#fbbf241f;border-radius:4px;padding:0 5px;font-size:10px}.count,.inline-preview{font-size:11px}.type-badge{margin-left:4px;padding:0 4px;border:1px solid var(--border);border-radius:3px;font-size:10px}.highlight{background:#fbbf244d;border-radius:2px}#toast{position:fixed;right:24px;bottom:24px;opacity:0;pointer-events:none;transition:opacity .2s ease;border-radius:8px;padding:8px 18px;background:var(--accent);color:#0e1117;font-size:13px;font-weight:700}#toast.show{opacity:1}.muted{color:var(--muted)}.error-text{color:var(--error)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}.hamburger{display:none}.header-controls{display:flex;align-items:center;gap:16px;flex:1;min-width:0}@media (max-width: 900px){header{gap:8px;padding:6px 12px;flex-wrap:wrap;height:auto;min-height:var(--header-height)}.logo{font-size:15px}.btn-group{flex-wrap:wrap;gap:4px}button,.dropbtn{font-size:11px;padding:4px 9px}}@media (max-width: 640px){:root{--header-height: auto}header{position:relative;flex-wrap:wrap;align-items:center;padding:10px 12px;gap:8px}.logo{font-size:15px;flex:1}.hamburger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:32px;height:32px;padding:6px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;flex-shrink:0}.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:all .2s}.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.header-controls{display:none;width:100%;flex-direction:column;gap:8px;border-top:1px solid var(--border);padding-top:10px;margin-top:4px}.header-controls.open{display:flex}.header-controls .btn-group{flex-wrap:wrap;gap:4px;width:100%}.header-controls .btn-group button{flex:1 1 auto;min-width:0;font-size:11px;padding:6px 8px;text-align:center}.header-controls .dropdown{width:100%}.header-controls .dropbtn{width:100%;text-align:left}.header-controls .dropdown-menu{min-width:100%}.header-controls .dropdown-menu.right{left:0;right:auto}.donate-btn{width:100%;justify-content:center;border-radius:var(--radius)}#opt-side,#opt-top{display:none}.workspace{flex-direction:column!important}.divider{display:none}.pane{flex:1;min-height:0}.toggle{width:20px;font-size:12px}#input-area{font-size:12px;padding:10px}#output-area{font-size:12px;padding:8px 10px}.search-bar input{font-size:11px}#toast{right:12px;bottom:12px;font-size:12px;padding:6px 14px}.pane-label{font-size:10px;padding:6px 10px 5px}}@media (max-width: 380px){.logo{font-size:13px}#input-area,#output-area{font-size:11px}}