.tree-svg-section { padding: 20px 0 34px; }
.tree-svg-section .wrap { width: min(1500px, calc(100% - 32px)); max-width: 1500px; }
.tree-svg-label { margin: 0 0 6px; color:#546056; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.tree-svg-intro { margin: 0 0 16px; color:#586158; line-height:1.65; }
.tree-svg-viewer { border: 1px solid #cfcabc; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(20,32,24,.06); }
.tree-svg-toolbar { background:#f6f3ec; border-bottom:1px solid #d9d3c8; display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:12px 14px; }
.tree-svg-toolbar button { min-height: 42px; min-width: 42px; padding: 6px 12px; cursor:pointer; border-radius:6px; border:1px solid #aca99f; background:#fff; color:#263d35; font:inherit; font-size: .96rem; font-weight: 600; }
.tree-svg-toolbar button:hover { background:#eaf0e9; border-color:#486559; }
.tree-svg-toolbar button:focus-visible { outline:3px solid #2369d2; outline-offset:2px; }
.tree-svg-toolbar button:disabled { opacity:.4; cursor:wait; }
.tree-svg-toolbar button.tree-svg-icon-button { font-size: 1.4rem; line-height: 1; font-weight: 500; }
.tree-svg-toolbar .tree-svg-zoom-label { min-width: 64px; text-align:center; color:#39453f; font-weight:700; font-size:.95rem; font-variant-numeric:tabular-nums; }
.tree-svg-toolbar .tree-svg-toolbar-sep { border-left:1px solid #c8c3b8; height:28px; margin:0 3px; }
.tree-svg-toolbar .tree-svg-toolbar-hint { margin:0 0 0 auto; font-size:.89rem; color:#565b55; }
.tree-svg-viewport { position:relative; height:clamp(420px,68dvh,760px); min-height:420px; background:#fff; overflow:hidden; cursor:grab; touch-action:none; overscroll-behavior:contain; }
.tree-svg-viewport.tree-svg-dragging { cursor:grabbing; }
.tree-svg-viewport a { cursor:pointer; }
.tree-svg-canvas { position:absolute; left:0; top:0; transform-origin: 0 0; will-change:transform; }
.tree-svg-canvas svg { display:block; max-width:none; max-height:none; user-select:none; -webkit-user-select:none; }
.tree-svg-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; color:#4d5750; text-align:center; }
.tree-svg-loading[hidden] { display:none; }
.tree-svg-help { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between; background:#fff; border-top:1px solid #e4dfd5; padding:10px 14px; font-size:.91rem; color:#5a5e57; }
.tree-svg-help p {margin:0}
.tree-svg-help a {white-space:nowrap}
.tree-svg-note {margin:18px 0 0; color:#61635e; font-size:.97rem; line-height:1.65}
@media (max-width: 800px) {
  .tree-svg-section .wrap { width: calc(100% - 24px); }
  .tree-svg-toolbar { gap:6px; padding:9px; }
  .tree-svg-toolbar button { min-height:42px; padding:6px 9px; }
  .tree-svg-toolbar .tree-svg-toolbar-hint { flex-basis:100%; margin-left:0; font-size:.82rem; }
  .tree-svg-viewport { height:clamp(390px,62dvh,680px); min-height:390px; }
  .tree-svg-help { font-size:.85rem; }
}
@media (prefers-reduced-motion:reduce) { .tree-svg-canvas { will-change:auto; } }