.tree-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.25rem; align-items:start; }
.tree-layout .panel, .tree-settings .field, .tree-result { min-width:0; }
.tree-layout textarea, #readme-structure { font-family:var(--mono,monospace); white-space:pre; tab-size:2; }
.tree-layout textarea { display:block; width:100%; min-height:17rem; resize:vertical; padding:.8rem; border:1px solid var(--border); border-radius:.65rem; background:var(--panel); color:var(--text); font-size:.9rem; line-height:1.5; }
.tree-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.tree-examples { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.tree-result .ascii-output { max-height:36rem; min-height:12rem; overflow:auto; }
#tree-output, .tree-static { white-space:pre; tab-size:4; font-family:var(--mono,monospace); }
.tree-guide { margin-top:2rem; }
.tree-static { overflow:auto; }
.readme-structure [disabled] { opacity:.5; }
.tree-layout :focus-visible, .readme-structure :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:800px) { .tree-layout { grid-template-columns:minmax(0,1fr); } }
@media(max-width:420px) { .tree-settings { grid-template-columns:minmax(0,1fr); } .tree-layout .button { max-width:100%; white-space:normal; } }