body{font:14px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:20px;color:#222}
code{background:#f5f5f5;padding:1px 4px;border-radius:3px}
.sec{margin-bottom:24px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{border:1px solid #ddd;border-radius:6px;padding:12px}
.muted{color:#666}
table{border-collapse:collapse;width:100%}
th,td{border:1px solid #ddd;padding:6px 8px;text-align:left}
th{background:#fafafa}
#viz{height:520px;border:1px solid #ddd;border-radius:6px;margin:12px 0}
#canvas{height:520px;border:1px solid #ddd;border-radius:6px;display:none}
.toolbar{display:flex;gap:8px;align-items:center;margin:8px 0}
.badge{display:inline-block;padding:2px 6px;border-radius:10px;background:#eee;margin-left:6px}
.chip{display:inline-block;padding:0 8px;border-radius:12px;font-size:12px}
.chip.changed{background:#fee;border:1px solid #fbb}
.chip.imp{background:#eef;border:1px solid #bbf}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0}
label.small{font-size:12px;color:#555}
.roots{max-height:140px;overflow:auto;border:1px solid #eee;padding:6px;border-radius:4px;background:#fafafa}
.symbol-controls{display:flex;align-items:center;gap:8px;margin:12px 0;font-size:13px}
.symbol-controls strong{font-weight:600}
.symbol-controls label{display:flex;align-items:center;gap:4px}
.symbol-list{list-style:none;padding:0;margin:0}
.symbol-list li{margin:4px 0}
.symbol-list label{display:flex;align-items:center;gap:6px;cursor:pointer}
.symbol-list input[type=checkbox]{margin:0}
.popup{position:fixed;right:16px;bottom:16px;max-width:420px;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:12px;display:none}
.popup h3{margin:0 0 6px 0;font-size:16px}
.popup .row{margin:4px 0}
.popup .row code{display:inline-block}
.popup .actions{display:flex;gap:8px;margin-top:8px}
.busy{position:fixed;inset:0;background:rgba(255,255,255,.6);display:none;align-items:center;justify-content:center;z-index:9999}
.busy .box{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.1);padding:10px 14px}
.spinner{width:22px;height:22px;border:3px solid #bbb;border-top-color:#e33;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}