.input-group{flex-direction:column;display:flex}.input-group label{margin-bottom:.5rem;font-weight:600}.html-input{border-radius:var(--radius);resize:vertical;border:1px solid #ccc;width:100%;min-height:220px;padding:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.6}.status-msg{color:#666;min-height:1.4rem;margin-top:.75rem;font-size:.9rem}.status-msg.is-error{color:#c62828}.summary-grid{margin-top:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;display:grid}.tree-toolbar{margin-top:var(--space-md);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.tree-search{font:inherit;border-radius:var(--radius);border:1px solid #ccc;flex:260px;padding:.6rem .8rem}.search-status{color:#666;min-height:1.2rem;margin:.5rem 0 0;font-size:.85rem}.tree-layout{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1rem;margin-top:1rem;display:grid}.tree-container{border-radius:var(--radius);background:#fafafa;border:1px solid #ddd;max-height:520px;padding:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;overflow:auto}.details-panel{border-radius:var(--radius);border:1px solid #ddd;align-self:start;padding:1rem;position:sticky;top:1rem}.details-panel h2{margin:0 0 .75rem;font-size:1rem}.details-placeholder{color:#666;margin:0;font-size:.9rem}.details-list{margin:0 0 1rem;padding:0;font-size:.9rem;list-style:none}.details-list li{word-break:break-word;border-bottom:1px solid #eee;gap:.4rem;padding:.25rem 0;display:flex}.details-list li:last-child{border-bottom:none}.details-key{color:#444;flex-shrink:0;font-weight:600}.details-html{white-space:pre-wrap;background:#f4f4f4;border-radius:8px;max-height:140px;margin:0 0 .75rem;padding:.6rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;display:block;overflow:auto}.tree-node{list-style:none}.tree-node>ul{border-left:1px dashed #ccc;margin:0;padding-left:1.1rem}.tree-container>ul{margin:0;padding:0}.tree-row{cursor:pointer;border-radius:6px;align-items:center;gap:.35rem;padding:.15rem .3rem;display:flex}.tree-row:hover{background:#eef2ff}.tree-row.is-selected{background:#dbeafe}.tree-row.is-match{background:#fff7e6;outline:1px solid #f59e0b}.tree-toggle{cursor:pointer;color:#666;background:0 0;border:none;flex-shrink:0;width:1.1rem;padding:0;font-size:.75rem}.tree-toggle.is-leaf{visibility:hidden}.tree-tag{color:#1d4ed8}.tree-id{color:#b45309}.tree-class{color:#047857}.tree-children.is-collapsed{display:none}.tool-explainer{max-width:var(--content-width);margin:var(--space-xl) auto 0;padding-top:var(--space-lg);border-top:1px solid #eee}.tool-explainer h2{margin:1.5rem 0 .5rem;font-size:1.1rem}.tool-explainer h2:first-child{margin-top:0}.tool-note{color:#666;font-size:.85rem}@media (width<=800px){.tree-layout{grid-template-columns:1fr}.details-panel{position:static}}