:root{background:#0f1117;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:#0f1117;min-width:320px;min-height:100vh;margin:0}button,textarea{font:inherit}button{cursor:pointer}.app-shell{--bg:#0f1117;--bg-accent:#f6892317;--ambient-1:#ff7a1a3d;--ambient-2:#388bfd2e;--ambient-3:#2ea04324;--surface:#151b23;--surface-2:#21262d;--editor:#0d1117;--editor-frame:#0b0f14;--border:#30363d;--border-strong:#3d444d;--text:#e6edf3;--text-strong:#f0f6fc;--muted:#8b949e;--muted-2:#6e7681;--brand-bg:#1f1712;--brand:#ff9d2e;--primary:#ff7a1a;--primary-border:#e87616;--primary-text:#161b22;--accent-soft:#ff990014;--accent-border:#ff990047;--success:#7ee787;--success-border:#2ea0437a;--danger:#ffb3ad;--danger-border:#f8514973;--danger-bg:#f851491f;--changed:#ffa657;--changed-border:#d29922;--changed-bg:#d2992229;--added-border:#2ea043;--added-bg:#2ea0432b;--removed-border:#f85149;--removed-bg:#f8514924;--key:#79c0ff;--string:#a5d6ff;--number:#79c0ff;--boolean:#ffab70;--selected-ring:#ff7a1a29;--shadow:#0000003d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;isolation:isolate;width:min(1480px,100% - 32px);min-height:100vh;color:var(--text);margin:0 auto;padding:24px 0 32px;position:relative}.app-shell:before{z-index:0;background:linear-gradient(180deg, var(--bg-accent), transparent 220px), var(--bg);content:"";pointer-events:none;position:fixed;inset:0}.app-shell:after{z-index:0;pointer-events:none;background:radial-gradient(circle at 10% 12%, var(--ambient-1), transparent 32%), radial-gradient(circle at 90% 18%, var(--ambient-2), transparent 30%), radial-gradient(circle at 46% 96%, var(--ambient-3), transparent 36%);content:"";filter:blur(52px);opacity:1;position:fixed;inset:-140px}.topbar,.workspace{z-index:1;position:relative}.app-shell[data-theme=light]{--bg:#f6f8fa;--bg-accent:#ff7a1a1a;--ambient-1:#ff7a1a3d;--ambient-2:#0969da2e;--ambient-3:#1a7f3724;--surface:#fff;--surface-2:#f6f8fa;--editor:#fff;--editor-frame:#fff;--border:#d0d7de;--border-strong:#8c959f;--text:#24292f;--text-strong:#0f1419;--muted:#57606a;--muted-2:#6e7781;--brand-bg:#fff4e5;--brand:#bc4c00;--primary:#bc4c00;--primary-border:#953800;--primary-text:#fff;--accent-soft:#fff4e5;--accent-border:#ffd8a8;--success:#1a7f37;--success-border:#1a7f3761;--danger:#cf222e;--danger-border:#cf222e61;--danger-bg:#ffebe9;--changed:#9a6700;--changed-border:#bf8700;--changed-bg:#fff8c5;--added-border:#1a7f37;--added-bg:#dafbe1;--removed-border:#cf222e;--removed-bg:#ffebe9;--key:#0969da;--string:#0a3069;--number:#0550ae;--boolean:#953800;--selected-ring:#bc4c002e;--shadow:#1f23281a;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}.topbar{border-bottom:1px solid var(--border);grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:14px 0 22px;display:grid}.brand{align-items:center;gap:14px;min-width:0;display:flex}.brand-mark{border:1px solid var(--accent-border);background:var(--brand-bg);width:44px;height:44px;color:var(--brand);border-radius:8px;flex:none;place-items:center;display:grid}h1,h2,p{margin:0}h1{font-size:clamp(1.35rem,2vw,1.85rem);line-height:1.1}h2{font-size:1.12rem;line-height:1.25}p{color:var(--muted);line-height:1.45}.screen-tabs{border:1px solid var(--border);background:var(--surface);border-radius:8px;gap:6px;padding:4px;display:flex}.screen-tabs button,.primary-button,.secondary-button,.theme-toggle{white-space:nowrap;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;gap:8px;min-height:38px;display:inline-flex}.screen-tabs button{color:var(--muted);background:0 0;padding:0 13px}.screen-tabs button.active{border-color:var(--border-strong);background:var(--surface-2);color:var(--text-strong)}.theme-toggle{border-color:var(--border);background:var(--surface);color:var(--text-strong);padding:0 13px;font-weight:700}.workspace{padding-top:22px}.screen-hidden{display:none}.toolbar{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px;display:flex}.toolbar p{margin-top:4px}.actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.primary-button,.secondary-button{padding:0 16px;font-weight:700}.primary-button{border-color:var(--primary-border);background:var(--primary);color:var(--primary-text)}.secondary-button{border-color:var(--border-strong);background:var(--surface-2);color:var(--text-strong)}.error-banner,.copy-status,.selected-key-bar{border-radius:8px;align-items:center;gap:10px;display:flex}.error-banner{border:1px solid var(--danger-border);background:var(--danger-bg);color:var(--danger);margin-bottom:16px;padding:12px 14px}.copy-status{border:1px solid var(--border);background:var(--surface);min-height:38px;color:var(--muted);white-space:nowrap;padding:0 13px}.copy-status.good{border-color:var(--success-border);color:var(--success)}.copy-status.bad{border-color:var(--danger-border);color:var(--danger)}.selected-key-bar{border:1px solid var(--border);background:var(--surface);grid-template-columns:minmax(0,1fr) 38px minmax(220px,auto);align-items:end;margin-bottom:16px;padding:12px;display:grid}.selected-key-bar div{gap:5px;min-width:0;display:grid}.selected-key-bar span,.selected-key-bar p{color:var(--muted)}.selected-key-bar p{align-items:center;min-height:38px;margin-left:0;padding:0 2px;font-size:.9rem;display:flex}.selected-key-bar code{border:1px solid var(--border);background:var(--editor);min-height:38px;color:var(--text);border-radius:6px;padding:8px 10px;font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;overflow:auto}.icon-button{border:1px solid var(--border-strong);background:var(--surface-2);width:38px;height:38px;color:var(--text-strong);border-radius:6px;place-items:center;display:inline-grid}.icon-button:disabled{cursor:not-allowed;opacity:.45}.summary-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px;display:grid}.metric{border:1px solid var(--border);background:var(--surface);border-radius:8px;justify-content:space-between;align-items:center;min-height:54px;padding:12px 14px;display:flex}.metric span{color:var(--muted)}.metric strong{font-size:1.35rem}.metric.added strong{color:var(--success)}.metric.removed strong{color:var(--danger)}.metric.changed strong{color:var(--changed)}.compare-grid,.beautify-grid,.tree-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}#adsense-footer-container{justify-content:center;min-height:90px;margin:20px auto 0;padding:20px 12px 0;display:flex}.ad-slot{width:100%}.ad-placeholder{border:1px dashed var(--border-strong);background:color-mix(in srgb, var(--surface) 72%, transparent);width:min(580px,100%);min-height:58px;color:var(--muted);border-radius:6px;align-content:center;place-items:center;gap:4px;display:grid}.ad-placeholder span{text-transform:uppercase;font-size:.78rem;font-weight:800}.ad-placeholder code{color:var(--muted-2);font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;font-size:.76rem}.help-content{z-index:1;border:1px solid var(--border);background:color-mix(in srgb, var(--surface) 88%, transparent);box-shadow:0 18px 60px var(--shadow);border-radius:8px;margin:34px 0 0;padding:28px;position:relative}.help-content h2{color:var(--text-strong);margin-top:28px;font-size:1.28rem}.help-content h2:first-child{margin-top:0}.help-content h3{color:var(--text-strong);margin:22px 0 8px;font-size:1rem}.help-content p{max-width:1050px;margin-top:10px}.help-content code{border:1px solid var(--border);background:var(--editor);color:var(--text);border-radius:4px;padding:1px 5px;font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;font-size:.88em}.editor-frame{border:1px solid var(--border);background:var(--editor-frame);box-shadow:0 18px 60px var(--shadow);border-radius:8px;overflow:hidden}.editor-title{border-bottom:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;gap:10px;min-height:46px;padding:0 14px;display:flex}.editor-title div{align-items:center;gap:8px;min-width:0;font-weight:700;display:inline-flex}.editor-badge{border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--changed);border-radius:999px;flex:none;padding:4px 8px;font-size:.75rem;font-weight:700}.json-textarea,.code-output{background:var(--editor);width:100%;min-height:580px;color:var(--text);border:0;outline:0;font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;font-size:.92rem;line-height:1.55}.json-textarea{resize:vertical;padding:16px;display:block}.json-textarea::placeholder{color:var(--muted-2)}.json-textarea.large,.code-output.large{min-height:620px}.json-textarea.tree-input,.tree-output{min-height:640px}.code-output{padding:12px 0;overflow:auto}.code-line{border-left:4px solid #0000;grid-template-columns:58px minmax(0,1fr);min-height:24px;display:grid}.code-line code{white-space:pre;min-width:0;padding:1px 14px 1px 8px}.line-number{-webkit-user-select:none;user-select:none;border-right:1px solid var(--surface-2);color:var(--muted-2);text-align:right;padding:1px 10px}.diff-marker{width:18px;color:var(--muted-2);font-weight:700;display:inline-block}.code-line.added{border-left-color:var(--added-border);background:var(--added-bg)}.code-line.removed{border-left-color:var(--removed-border);background:var(--removed-bg)}.code-line.changed{border-left-color:var(--changed-border);background:var(--changed-bg)}.code-line.muted{opacity:.5}.empty-state{min-height:580px;color:var(--muted-2);align-content:center;place-items:center;gap:10px;display:grid}.tree-output{background:var(--editor);color:var(--text);padding:12px 0 18px;font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;font-size:.92rem;line-height:1.5;overflow:auto}.tree-node{min-width:max-content}.tree-row{width:100%;min-height:30px;padding:2px 14px 2px var(--indent);color:inherit;text-align:left;background:0 0;border:0;border-left:4px solid #0000;align-items:center;gap:8px;display:flex}.tree-row.branch{color:var(--text-strong)}.tree-row.branch:hover,.tree-row.leaf:hover,.tree-row.selected{background:var(--surface)}.tree-row.branch,.tree-row.leaf{cursor:pointer}.tree-row.selected{border-left-color:var(--primary);box-shadow:inset 0 0 0 1px var(--selected-ring)}.tree-row.leaf{color:var(--text)}.tree-row.empty-branch{color:var(--muted-2);font-style:italic}.tree-spacer{flex:none;width:16px}.tree-toggle{width:18px;height:18px;color:var(--muted);border-radius:4px;flex:none;place-items:center;display:inline-grid}.tree-toggle:hover{background:var(--surface-2);color:var(--text-strong)}.tree-key{color:var(--key);font-weight:700}.tree-colon{color:var(--muted-2)}.tree-type,.tree-count{border-radius:999px;align-items:center;min-height:22px;padding:0 8px;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:.72rem;font-weight:800;display:inline-flex}.tree-type{border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--changed)}.tree-count{border:1px solid var(--border);background:var(--surface);color:var(--muted)}.tree-value.string{color:var(--string)}.tree-value.number{color:var(--number)}.tree-value.boolean{color:var(--boolean)}.tree-value.null{color:var(--muted)}@media (width<=1050px){.topbar{grid-template-columns:minmax(0,1fr) auto}.screen-tabs{order:3;grid-column:1/-1}}@media (width<=920px){.toolbar{flex-direction:column;align-items:stretch}.screen-tabs,.actions{width:100%}.screen-tabs button,.actions button{flex:1 1 0}.compare-grid,.beautify-grid,.tree-grid,.summary-strip{grid-template-columns:1fr}.json-textarea,.code-output,.json-textarea.large,.code-output.large,.json-textarea.tree-input,.tree-output{min-height:440px}}@media (width<=560px){.app-shell{width:min(100% - 20px,1480px);padding-top:14px}.topbar{grid-template-columns:1fr}.brand{align-items:flex-start}.brand-mark{width:38px;height:38px}.theme-toggle{width:100%}.copy-status{white-space:normal;align-items:flex-start;height:auto;min-height:38px;padding:10px 12px}.selected-key-bar p{width:100%;margin-left:0}.selected-key-bar{grid-template-columns:minmax(0,1fr) 38px}.selected-key-bar p{grid-column:1/-1;min-height:auto;padding-top:2px}.code-line{grid-template-columns:44px minmax(0,1fr)}}
