:root{--text:#94a3b8;--text-h:#e2e8f0;--text-dim:#64748b;--bg:#0c0e14;--bg-raised:#10131a;--surface:#151820;--surface-hover:#1c1f2a;--border:#1e2230;--border-strong:#2a2e3e;--accent:#818cf8;--accent-dim:#818cf81f;--accent-strong:#6366f1;--jt-string:#34d399;--jt-number:#fbbf24;--jt-boolean:#c084fc;--jt-null:#f87171;--jt-object:#38bdf8;--jt-array:#fb923c;--mono:ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;--sans:system-ui, -apple-system, "Segoe UI", sans-serif;--radius:10px;--radius-sm:6px;font:14px/1.5 var(--sans);color:var(--text);background:var(--bg);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=light]{--text:#475569;--text-h:#0f172a;--text-dim:#94a3b8;--bg:#f1f5f9;--bg-raised:#f8fafc;--surface:#fff;--surface-hover:#f8fafc;--border:#e2e8f0;--border-strong:#cbd5e1;--accent:#6366f1;--accent-dim:#6366f114;--accent-strong:#4f46e5;--jt-string:#16a34a;--jt-number:#d97706;--jt-boolean:#9333ea;--jt-null:#dc2626;--jt-object:#0284c7;--jt-array:#ea580c;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{margin:0}#app{flex-direction:column;height:100svh;display:flex;overflow:hidden}.header{border-bottom:1px solid var(--border);background:var(--bg-raised);flex-shrink:0;align-items:center;gap:12px;padding:10px 16px;display:flex}.header-title{font-family:var(--sans);color:var(--text-h);letter-spacing:-.2px;white-space:nowrap;font-size:14px;font-weight:600}.header-title svg{vertical-align:-2px;opacity:.5;margin-right:6px;display:inline-block}.header-sep{background:var(--border);flex-shrink:0;width:1px;height:16px}.event-count{font-family:var(--mono);color:var(--text-dim);white-space:nowrap;font-size:12px}.header-spacer{flex:1}.search-wrap{flex:160px;align-items:center;min-width:120px;max-width:320px;display:flex;position:relative}.search-icon{color:var(--text-dim);pointer-events:none;position:absolute;top:50%;left:8px;transform:translateY(-50%)}.search-input{width:100%;font-family:var(--mono);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-h);outline:none;padding:4px 8px 4px 26px;font-size:12px;transition:border-color .15s,box-shadow .15s}.search-input::placeholder{color:var(--text-dim)}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}.search-input::-webkit-search-cancel-button{appearance:none;background:var(--text-dim);cursor:pointer;width:14px;height:14px;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") 50%/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") 50%/contain no-repeat}.filters{flex-shrink:0;align-items:center;gap:4px;display:flex}.filter-pill{font-family:var(--mono);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;background:0 0;border-radius:4px;padding:2px 8px;font-size:11px;transition:all .15s}.filter-pill:hover{border-color:var(--border-strong);color:var(--text)}.filter-pill.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.filter-pill .pill-dot{vertical-align:1px;border-radius:50%;width:6px;height:6px;margin-right:4px;display:inline-block}.btn{font-family:var(--sans);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;padding:4px 12px;font-size:12px;font-weight:500;transition:all .15s}.btn:hover{border-color:var(--border-strong);color:var(--text-h);background:var(--surface-hover)}.btn:active{transform:scale(.97)}.btn-danger:hover{border-color:var(--jt-null);color:var(--jt-null)}.btn-icon{justify-content:center;align-items:center;padding:4px 8px;display:inline-flex}.btn-icon svg{display:block}.btn-icon .icon-sun{display:none}.btn-icon .icon-moon,:root[data-theme=dark] .btn-icon .icon-sun{display:block}:root[data-theme=dark] .btn-icon .icon-moon{display:none}.layout{flex:1;min-height:0;display:flex}.playground-wrap{border-right:1px solid var(--border);flex-direction:column;flex:0 0 420px;display:flex}.playground-label{text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);border-bottom:1px solid var(--border);background:var(--bg-raised);padding:8px 12px;font-size:11px;font-weight:500}#playground{background:var(--surface);flex:1;min-height:0;position:relative;overflow:hidden}#playground:before{content:"";background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);pointer-events:none;background-size:24px 24px;position:absolute;inset:0}#json-input{resize:none;width:100%;height:100%;color:var(--text-h);font-family:var(--mono);tab-size:2;white-space:pre;background:0 0;border:none;outline:none;padding:14px 16px 38px;font-size:12px;line-height:1.6;position:absolute;inset:0;overflow:auto}#json-input::placeholder{color:var(--text-dim)}#json-input::selection{background:var(--accent-dim)}.parse-status{font-family:var(--mono);background:var(--surface);border:1px solid var(--border);color:var(--text-dim);pointer-events:none;border-radius:4px;align-items:center;gap:6px;padding:2px 8px;font-size:11px;display:inline-flex;position:absolute;bottom:10px;left:12px}.parse-status .dot{background:var(--text-dim);border-radius:50%;width:6px;height:6px}.parse-status[data-state=ok]{color:var(--jt-string);border-color:var(--border-strong)}.parse-status[data-state=ok] .dot{background:var(--jt-string)}.parse-status[data-state=error]{color:var(--jt-null);border-color:var(--jt-null)}.parse-status[data-state=error] .dot{background:var(--jt-null)}.parse-status[data-state=empty] .dot{background:var(--text-dim)}.table-wrap{--path-col-width:280px;--col-template:56px var(--path-col-width) minmax(80px, .8fr) 76px minmax(160px, 2fr) 60px 56px;min-width:0;font-family:var(--mono);flex-direction:column;flex:1;font-size:12px;line-height:1.5;display:flex;overflow:hidden}.table-header{grid-template-columns:var(--col-template);background:var(--bg-raised);border-bottom:1px solid var(--border);z-index:2;flex-shrink:0;display:grid}.table-header .hc{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;-webkit-user-select:none;user-select:none;padding:6px 10px;font-size:10px;font-weight:600;position:relative}.col-resizer{cursor:col-resize;-webkit-user-select:none;user-select:none;z-index:3;touch-action:none;width:6px;height:100%;position:absolute;top:0;right:-3px}.col-resizer:after{content:"";background:0 0;width:1px;transition:background .12s;position:absolute;top:0;bottom:0;left:50%}.col-resizer:hover:after,.col-resizer.dragging:after{background:var(--accent)}.col-resizer.dragging{background:color-mix(in srgb, var(--accent) 20%, transparent)}.table-scroll{contain:strict;flex:1;position:relative;overflow:auto}.virtual-inner{will-change:transform}.row{grid-template-columns:var(--col-template);border-bottom:1px solid var(--border);align-items:center;transition:background .1s;display:grid}.row .rc{white-space:nowrap;text-overflow:ellipsis;min-width:0;padding:0 10px;overflow:hidden}.col-id{color:var(--text-dim);text-align:right;padding-right:12px}.col-path{color:var(--text-h);align-items:center;min-width:0;display:flex}.col-path>span{text-overflow:ellipsis;overflow:hidden}.col-key{color:var(--accent)}.col-type{text-transform:lowercase;font-weight:600}.col-value{color:var(--text)}.col-size,.col-depth{color:var(--text-dim);text-align:right}.depth-pad{border-left:1px dashed var(--border-strong);vertical-align:middle;opacity:.6;height:12px;margin-right:6px;display:inline-block}.tree-toggle,.tree-toggle-spacer{vertical-align:middle;width:14px;height:14px;margin-right:4px;display:inline-block}.tree-toggle{cursor:pointer;color:var(--text-dim);background:0 0;border:none;padding:0;transition:color .15s;position:relative}.tree-toggle:before{content:"";border-top:3px solid #0000;border-bottom:3px solid #0000;border-left:4px solid;width:0;height:0;transition:transform .15s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tree-toggle:hover{color:var(--accent)}.tree-toggle.expanded:before{transform:translate(-50%,-50%)rotate(90deg)}.row.jt-string .col-type{color:var(--jt-string)}.row.jt-number .col-type{color:var(--jt-number)}.row.jt-boolean .col-type{color:var(--jt-boolean)}.row.jt-null .col-type{color:var(--jt-null)}.row.jt-object .col-type{color:var(--jt-object)}.row.jt-array .col-type{color:var(--jt-array)}.row.jt-string .col-value{color:var(--jt-string)}.row.jt-number .col-value{color:var(--jt-number)}.row.jt-boolean .col-value{color:var(--jt-boolean)}.row.jt-null .col-value{color:var(--jt-null);font-style:italic}.row.jt-object .col-value,.row.jt-array .col-value{color:var(--text-dim)}.row.jt-string{box-shadow:inset 3px 0 0 var(--jt-string)}.row.jt-number{box-shadow:inset 3px 0 0 var(--jt-number)}.row.jt-boolean{box-shadow:inset 3px 0 0 var(--jt-boolean)}.row.jt-null{box-shadow:inset 3px 0 0 var(--jt-null)}.row.jt-object{box-shadow:inset 3px 0 0 var(--jt-object)}.row.jt-array{box-shadow:inset 3px 0 0 var(--jt-array)}.row:hover{background:var(--accent-dim)}.row.search-match{background:color-mix(in srgb, var(--accent) 14%, transparent)}.empty-state{color:var(--text-dim);text-align:center;font-size:13px;font-family:var(--mono);white-space:pre-wrap;flex:1;justify-content:center;align-items:center;padding:40px 20px;display:flex}.table-scroll::-webkit-scrollbar{width:6px;height:6px}#json-input::-webkit-scrollbar{width:6px;height:6px}.table-scroll::-webkit-scrollbar-track{background:0 0}#json-input::-webkit-scrollbar-track{background:0 0}.table-scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}#json-input::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}.table-scroll::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}#json-input::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}@media (width<=900px){.layout{flex-direction:column}.playground-wrap{border-right:none;border-bottom:1px solid var(--border);flex:none}#playground{min-height:240px}.table-wrap{min-height:250px}.filters{-webkit-overflow-scrolling:touch;overflow-x:auto}.header{flex-wrap:wrap;gap:8px}}@media (width<=600px){#playground{min-height:200px}.header-title{font-size:13px}}@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}