.tree-card{background:linear-gradient(155deg,#111c18,#172720);border:1px solid #b69964;border-radius:20px;padding:24px;margin:0 0 26px;box-shadow:0 22px 42px #050e0b66,inset 0 0 0 4px #24372a}
.tree-top{display:flex;align-items:end;justify-content:space-between;gap:12px}
.tree-top .eyebrow{margin-bottom:9px}
.tree-board-id{color:#a78957;font:500 9px 'DM Mono',monospace;letter-spacing:.08em;text-align:right}
.tree-intro{color:#bac8b6;font-size:14px;line-height:1.5;margin:14px 0}
.tree-legend{display:flex;flex-wrap:wrap;gap:15px;color:#d7c296;font:500 9px 'DM Mono',monospace;letter-spacing:.04em;margin:17px 0}
.tree-legend span{display:flex;align-items:center;gap:6px}
.legend-dot,.legend-dash,.legend-lit{display:inline-block;flex:none;border:1.5px solid #d9bb7e;background:#26352a}
.legend-dot{width:13px;height:13px;border-radius:50%}
.legend-dash{width:22px;height:9px;border-radius:2px}
.legend-lit{width:10px;height:10px;border-radius:50%;background:#b8ff8d;border-color:#b8ff8d;box-shadow:0 0 8px #b8ff8d}
.tree-window{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-color:#b99e6b #1a2c22;border:1px solid #675d43;border-radius:12px;background:radial-gradient(circle at 50% 15%,#253828,#0c1512 65%);height:442px;touch-action:pan-x pan-y}
.tree-window svg{display:block;width:680px;height:440px}
.tree-wire{stroke:#e5e8d5;stroke-width:2;opacity:.35;transition:opacity .2s,stroke .2s,stroke-width .2s}
.tree-wire.lit{stroke:#fff;stroke-width:3;opacity:1;filter:drop-shadow(0 0 5px #fbf8d8)}
.tree-node{cursor:pointer}
.tree-node-shape{fill:#17261c;stroke:#d8b875;stroke-width:2.5}
.tree-node-led{fill:#344b32;stroke:#59775a;stroke-width:1.5}
.tree-node-label{fill:#d8bd82;font:700 13px 'DM Mono',monospace;letter-spacing:.04em}
.tree-node.lit .tree-node-shape{stroke:#f5e6b0;fill:#344b32}
.tree-node.lit .tree-node-led{fill:#b8ff8d;stroke:#d5ffc2;filter:drop-shadow(0 0 8px #b8ff8d)}
.tree-node.current .tree-node-shape{stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 7px #e6f4c6)}
.tree-node:focus-visible{outline:3px solid #b8ff8d}
.tree-root path{fill:none;stroke:#e6c281;stroke-width:2}
.tree-root text{fill:#e6c281;font:500 12px 'DM Mono',monospace;letter-spacing:.12em}
.tree-swipe{text-align:center;color:#9aa98d;font:500 9px 'DM Mono',monospace;letter-spacing:.1em;margin:8px 0 17px}
.tree-readout{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:55px;padding:10px 15px;background:#0b1711;border:1px solid #48694b;border-radius:9px;color:#b9ff92}
.tree-readout span{font:500 20px 'DM Mono',monospace;letter-spacing:.12em}
.tree-readout strong{font:500 12px 'DM Mono',monospace;color:#e5d4a9;text-align:right}
.tree-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.tree-choice{min-height:72px;border:1px solid #a99161;border-radius:11px;background:linear-gradient(#273d2c,#1c2d22);color:#f5e8cb;display:flex;align-items:center;justify-content:center;gap:13px;text-align:left;font:700 14px 'DM Sans',sans-serif;cursor:pointer;touch-action:manipulation}
.tree-choice:active{transform:translateY(2px);background:#375a38}
.tree-choice small{display:block;color:#b1bb9e;font:500 9px 'DM Mono',monospace;margin-top:3px}
.choice-shape{display:inline-block;background:#e8c586;box-shadow:0 0 10px #e8c58677;flex:none}
.dot-shape{width:20px;height:20px;border-radius:50%}
.dash-shape{width:37px;height:13px;border-radius:3px}
.tree-actions{display:flex;justify-content:space-between;margin-top:13px}
.tree-actions button{background:transparent;border:0;color:#d8c08d;font:500 10px 'DM Mono',monospace;letter-spacing:.08em;padding:8px;cursor:pointer}
@media(max-width:580px){.tree-card{padding:16px;border-radius:16px}.tree-board-id{font-size:8px}.tree-legend{gap:9px}.tree-legend span{font-size:8px}.tree-intro{font-size:13px}.tree-readout strong{font-size:10px}.tree-choice{min-height:67px}}