.tree-panel { container-type: inline-size; }
.tree-mount { width: 100%; min-height: 0; height: 752px; position: relative; }
@container (min-width: 720px) { .tree-mount { height: 356px; } }
.tree-svg { width: 100%; height: 100%; display: block; overflow: visible; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.tree-svg path { fill: none; stroke: var(--control-line, #7D8CAA); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke 250ms; }
.tree-svg path[data-state='unlocked'] { stroke: var(--unlocked, #7FD3E6); }
.tree-svg path[data-state='frontier'] { stroke: var(--frontier, #F2B84B); }
.tree-svg path[data-state='pruned'], .tree-svg .tree-loop { stroke-dasharray: 4 5; }
.tree-svg .tree-loop { stroke: var(--frontier, #F2B84B); }
.tree-svg path[data-state='pruned'] { stroke: var(--control-line, #7D8CAA); }
.tree-headings { fill: var(--muted, #98A6C0); font-size: 13px; font-weight: 500; }
.tree-node { cursor: pointer; outline: none; }
.tree-node-box { fill: var(--surface, #141E36); stroke: var(--control-line, #7D8CAA); stroke-width: 1.5; transition: stroke 200ms, fill 200ms; }
.tree-label { fill: var(--muted, #98A6C0); font-size: 13px; font-weight: 500; pointer-events: none; }
.tree-node[data-state='unlocked'] .tree-node-box { stroke: var(--unlocked, #7FD3E6); fill: color-mix(in srgb, var(--unlocked, #7FD3E6) 9%, var(--surface, #141E36)); }
.tree-node[data-state='unlocked'] .tree-label, .tree-node[data-state='frontier'] .tree-label { fill: var(--text, #E7ECF5); }
.tree-node[data-state='frontier'] .tree-node-box { stroke-width: 3; stroke: var(--frontier, #F2B84B); animation: tree-pulse 1.5s ease-in-out 3; }
.tree-node[data-state='pruned'] .tree-node-box { stroke: var(--control-line, #7D8CAA); stroke-dasharray: 4 4; }
.tree-node[data-state='pruned'] .tree-label { text-decoration: line-through; text-decoration-color: var(--control-line, #7D8CAA); }
.tree-focus { fill: none; stroke: var(--focus, #F2B84B); stroke-width: 2; opacity: 0; pointer-events: none; }
.tree-node:focus-visible .tree-focus { opacity: 1; }
.tree-node:hover .tree-node-box, .tree-node[aria-pressed='true'] .tree-node-box { stroke-width: 2.5; }
.tree-svg .tree-unlock { stroke-width: 3; }
.tree-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.tree-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0; padding: 0; color: var(--muted, #98A6C0); font: 400 13px 'IBM Plex Sans', system-ui, sans-serif; }
.tree-legend li { display: flex; align-items: center; gap: 6px; }
.tree-swatch { width: 10px; height: 10px; border: 1.5px solid var(--control-line, #7D8CAA); border-radius: 2px; }
.tree-swatch.unlocked { border-color: var(--unlocked, #7FD3E6); background: color-mix(in srgb, var(--unlocked, #7FD3E6) 15%, transparent); }
.tree-swatch.frontier { border-width: 3px; border-color: var(--frontier, #F2B84B); }
.tree-swatch.pruned { border-color: var(--control-line, #7D8CAA); border-style: dashed; }
.tree-replay { min-width: 44px; min-height: 44px; font: 500 14px 'IBM Plex Sans', system-ui, sans-serif; color: var(--text, #E7ECF5); border: 1px solid var(--control-line, #7D8CAA); background: var(--surface, #141E36); border-radius: 10px; padding: 10px 16px; cursor: pointer; }
.tree-replay:hover { background: var(--surface-2, #1B2744); }
.tree-replay:focus-visible { outline: 2px solid var(--focus, #F2B84B); outline-offset: 3px; }
.tree-detail { min-height: 3.2em; color: var(--muted, #98A6C0); font: 400 14px/1.6 'IBM Plex Sans', system-ui, sans-serif; }
@keyframes tree-pulse { 50% { filter: drop-shadow(0 0 4px var(--frontier, #F2B84B)); } }
@media (prefers-reduced-motion: reduce) { .tree-node-box, .tree-svg path { transition: none; animation: none !important; } }

.tree-node[data-state='frontier']:hover .tree-node-box,.tree-node[data-state='frontier'][aria-pressed='true'] .tree-node-box{stroke-width:3}