.tree-workspace {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.tree-scroll {
  overflow: auto;
  max-height: 38rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-0);
}
.tree-scroll svg {
  display: block;
  font: 14px var(--font-sans);
}
.tree-scroll text {
  fill: var(--text-primary);
}
.tree-scroll .tree-legend {
  fill: var(--text-secondary);
  font-size: 12px;
}
.tree-branch {
  stroke: var(--text-secondary);
  stroke-width: 1.3;
  fill: none;
}
.tree-node {
  cursor: pointer;
}
.tree-node .node-mark {
  fill: var(--surface-0);
  stroke: var(--color-loom-600);
  stroke-width: 2;
}
.tree-node[data-collapsed='true'] .node-mark {
  fill: var(--surface-2);
}
.tree-node[data-match='true'] text {
  font-weight: 750;
  text-decoration: underline;
}
.tree-node[aria-pressed='true'] .node-mark {
  fill: var(--color-loom-600);
  stroke-width: 4;
}
.tree-node:focus {
  outline: none;
}
.tree-node:focus .node-mark {
  stroke: var(--text-primary);
  stroke-width: 4;
}
.tree-node:hover text {
  text-decoration: underline;
}
.tree-inspector {
  overflow-wrap: anywhere;
}
.tree-inspector pre {
  white-space: pre-wrap;
  font-size: 0.85rem;
}
.tree-inspector dt {
  color: var(--text-secondary);
}
.tree-inspector dd {
  margin: 0 0 0.75rem;
}
.tree-inspector h2 {
  margin-top: 0;
}
.tree-help {
  font-size: 0.9rem;
  color: var(--text-secondary);
}
@media (max-width: 950px) {
  .tree-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}