.viz{--bd:rgba(127,127,127,.4);--bg:rgba(127,127,127,.08);--cur:#1c7ed6;--ok:#2f9e44;--hot:#e8590c;
 border:1px solid var(--bd);border-radius:10px;padding:12px;margin:1.2rem 0;font-size:.9rem;max-width:100%;overflow:hidden}
.viz *{box-sizing:border-box}
.viz-top{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;min-width:0}
.viz svg{flex:1 1 320px;max-width:560px;width:100%;min-width:0;background:var(--bg);border-radius:8px;display:block;height:auto}
.viz-side{flex:1 1 140px;display:flex;flex-direction:column;gap:10px;font-family:monospace;min-width:0}
.viz-side > div{display:flex;flex-direction:column;gap:6px;min-width:0}
.viz-side b{display:block;margin:0;padding:0;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);line-height:1.3}
.viz .pq,.viz .dd{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.viz .chip{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--bd);border-radius:6px;padding:4px 7px;margin:0;max-width:100%;white-space:normal;word-break:break-word;line-height:1.3;min-height:24px}
.viz .chip.min{border-color:var(--hot);color:var(--hot)}
.viz .e{stroke:currentColor;stroke-opacity:.35;stroke-width:2}
.viz .e.tree{stroke:var(--ok);stroke-opacity:1;stroke-width:4}
.viz .e.act{stroke:var(--hot);stroke-opacity:1;stroke-width:4}
.viz .w{fill:currentColor;font-size:12px;text-anchor:middle;font-family:monospace;paint-order:stroke;stroke:rgba(250,248,243,.9);stroke-width:4px;stroke-linejoin:round}
.viz .n circle{fill:var(--bg);stroke:currentColor;stroke-width:2}
.viz .n.vis circle{fill:var(--ok);stroke:var(--ok)}
.viz .n.vis text.l{fill:#fff}
.viz .n.cur circle{stroke:var(--cur);stroke-width:5}
.viz .n.tgt circle{stroke:var(--hot);stroke-width:5}
.viz .n text{text-anchor:middle;fill:currentColor}
.viz .n text.l{font-weight:700;font-size:15px}
.viz .n text.d{font-size:12px}
.viz .msg{margin:10px 0;padding:8px 10px;border-left:4px solid var(--cur);background:var(--bg);min-height:2.4em;overflow-wrap:break-word;word-break:break-word;line-height:1.5}
.viz ol.code{list-style:none;margin:0 0 10px;padding:6px;font-family:monospace;font-size:.85rem;background:var(--bg);border-radius:8px;overflow-x:auto}
.viz ol.code li{padding:1px 6px;border-radius:4px;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;line-height:1.45}
.viz ol.code li.on{background:var(--hot);color:#fff}
.viz .ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.viz .ctl button{border:1px solid var(--bd);background:var(--bg);color:inherit;border-radius:6px;padding:4px 12px;cursor:pointer;font-size:1rem;min-width:42px;min-height:36px}
.viz .ctl button:hover{border-color:var(--hot)}
.viz .ctl label{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
@media (max-width:640px){
  .viz{padding:10px;margin:1rem 0;font-size:.82rem}
  .viz-top{gap:10px}
  .viz-side,.viz svg{flex-basis:100%}
  .viz svg{max-width:100%}
  .viz .ctl{gap:6px}
  .viz .ctl label{margin-left:0;width:100%;justify-content:space-between}
  .viz .ctl input[type="range"]{flex:1;min-width:0}
  .viz .msg{font-size:.8rem}
  .viz .pq,.viz .dd{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px}
  .viz ol.code{font-size:.75rem}
}