.json-tool{width:100%}.json-tool>label{margin-bottom:.5rem;font-weight:600;display:block}#jsonInput{border-radius:var(--radius);resize:vertical;background:#fcfcfc;border:1px solid #ccc;width:100%;min-height:180px;padding:1rem;font:.9rem/1.6 SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;transition:border-color .15s,box-shadow .15s;display:block}#jsonInput:focus{background:#fff;border-color:#8b2fc9;outline:none;box-shadow:0 0 0 3px #8b2fc91f}.json-actions{flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:1rem;display:flex}.json-actions .action-group{flex-wrap:wrap;gap:.5rem;display:flex}.json-actions button,.json-tool button{font:inherit;border-radius:var(--radius);cursor:pointer;font-size:.9rem;transition:background .15s,border-color .15s,transform .1s}.json-actions button:active,.json-tool button:active{transform:translateY(1px)}.json-actions button:focus-visible,.json-tool button:focus-visible,#jsonInput:focus-visible,#searchInput:focus-visible{outline-offset:2px;outline:2px solid #8b2fc9}.primary-button{color:#fff;background:#222;border:1px solid #222;padding:.7rem 1.2rem}.primary-button:hover{background:#000}.secondary-button{background:#fff;border:1px solid #ccc;padding:.7rem 1.2rem}.secondary-button:hover{background:#f0f0f0;border-color:#999}.small-button{background:#fff;border:1px solid #ccc;padding:.5rem .85rem;font-size:.85rem}.small-button:hover{background:#f0f0f0;border-color:#999}.danger-button{color:#c62828;background:#fff;border:1px solid #ef9a9a;padding:.7rem 1.2rem}.danger-button:hover{background:#ffebee}.json-status{min-height:1.4rem;margin-top:.85rem;font-size:.9rem}.json-status.is-error{color:#c62828}.json-status.is-success{color:#2e7d32}.tree-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-top:1.5rem;display:flex}.tree-search{flex:1;align-items:center;gap:.6rem;min-width:220px;display:flex}#searchInput{min-width:0;font:inherit;border-radius:var(--radius);border:1px solid #ccc;flex:1;padding:.6rem .85rem;font-size:.9rem}.search-count{color:#666;white-space:nowrap;font-size:.8rem}.tree-controls{gap:.5rem;display:flex}.tree-stats{flex-wrap:wrap;gap:.75rem;margin-top:1rem;display:flex}.tree-stats .stat{border-radius:var(--radius);color:#444;background:#fafafa;border:1px solid #ddd;padding:.5rem .85rem;font-size:.82rem}.tree-stats .stat strong{color:#111;font-weight:700}.path-bar{border-radius:var(--radius);background:#fafafa;border:1px solid #ddd;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.85rem;padding:.6rem .85rem;display:flex}.path-label{color:#666;white-space:nowrap;font-size:.8rem;font-weight:600}.path-bar code{white-space:nowrap;color:#111;flex:1;min-width:0;font-size:.85rem;overflow-x:auto}.tree-output{border-radius:var(--radius);background:#fff;border:1px solid #eee;margin-top:1rem;padding:1rem 1rem 1.25rem}.tree-output:empty{text-align:center;color:#999;background:#fafafa;border:1px dashed #ddd;padding:2.5rem 1rem;font-size:.9rem}.tree-output:empty:before{content:"Your tree will appear here once you paste, upload, or load sample JSON."}.tree-node{position:relative}.tree-children{border-left:1px solid #e6e6e6;margin-left:1.15rem;padding-left:.75rem;transition:border-color .15s}.tree-node:hover>.tree-children{border-left-color:#d4b3ea}.tree-line{cursor:default;border-radius:6px;flex-wrap:wrap;align-items:baseline;gap:.35rem;padding:.15rem .35rem;font:.9rem/1.6 SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;display:flex}.tree-line:hover{background:#f5f5f5}.tree-line.is-selected{background:#eef3ff}.tree-toggle{cursor:pointer;color:#888;background:0 0;border:none;flex:none;justify-content:center;align-items:center;width:1.1rem;height:1.1rem;padding:0;font-size:.7rem;transition:transform .12s;display:inline-flex;transform:rotate(90deg)}.tree-node.is-collapsed>.tree-line>.tree-toggle{transform:rotate(0)}.tree-toggle-spacer{flex:none;width:1.1rem}.tree-key{color:#8b2fc9;font-weight:600}.tree-colon{color:#999}.tree-value-string{color:#1a7f37}.tree-value-number{color:#0550ae}.tree-value-boolean{color:#b35900;font-weight:600}.tree-value-null{color:#999;font-style:italic}.tree-preview{color:#999;font-size:.82rem}.tree-node.is-collapsed>.tree-children,.tree-node.search-hidden{display:none}mark{color:inherit;background:#fff2a8;border-radius:3px;padding:0 1px}.tool-about{width:min(100%, var(--content-width));padding:var(--space-xl) 0 var(--space-lg);border-top:1px solid #eee;margin-inline:auto}.tool-about h2{margin:var(--space-lg) 0 .75rem;font-size:1.25rem}.tool-about h2:first-child{margin-top:0}.tool-about p,.tool-about li{color:#444}.tool-about ul,.tool-about ol{margin:.5rem 0;padding-left:1.25rem}.tool-about li+li{margin-top:.4rem}.faq details{border-bottom:1px solid #eee;padding:.9rem 0}.faq details:first-child{border-top:1px solid #eee}.faq summary{cursor:pointer;font-weight:600;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:before{content:"+";color:#8b2fc9;width:1.1rem;font-weight:700;display:inline-block}.faq details[open] summary:before{content:"−"}.faq details p{margin:.6rem 0 0 1.1rem}@media (width<=600px){.json-actions{flex-direction:column;align-items:stretch}.json-actions .action-group{justify-content:stretch}.json-actions button{flex:1}.tree-toolbar{flex-direction:column;align-items:stretch}}