:root{--bg:#020617;--card:#0f172a;--line:#1e293b;--txt:#e2e8f0;--mut:#94a3b8;--arrow:#94a3b8;--red:#ef4444;
--person:#f472b6;--channel:#22d3ee;--agent:#a78bfa;--queue:#fbbf24;--builder:#34d399;--tool:#60a5fa;--store:#fb923c;--provider:#c084fc;--device:#94a3b8;--app:#4ade80;--decision:#facc15}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:14px/1.45 -apple-system,system-ui,sans-serif}
body{display:flex;flex-direction:column;overflow:hidden}
header{padding:8px 12px;display:flex;gap:10px;align-items:baseline;border-bottom:1px solid var(--line);font-family:"JetBrains Mono",ui-monospace,monospace}
#stamp{color:var(--mut);font-size:11px}
#tabs{display:flex;overflow-x:auto;gap:6px;padding:8px;border-bottom:1px solid var(--line);flex:none;scrollbar-width:none}
#tabs button{flex:none;background:var(--card);color:var(--mut);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font:12px "JetBrains Mono",ui-monospace,monospace;min-height:40px}
#tabs button.on{color:#fff;border-color:#38bdf8;background:#0c4a6e}
#tabs button.hole{color:#fca5a5}
main{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
#blurb{padding:6px 12px;color:var(--mut);font-size:12px;flex:none}
#stage{flex:1;min-height:0;position:relative}
#svg{width:100%;height:100%;touch-action:none;cursor:grab;display:block}
#ctl{position:absolute;right:8px;bottom:8px;display:flex;gap:6px;align-items:center;background:#020617cc;padding:4px;border-radius:8px}
#ctl button{width:40px;height:40px;background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:8px;font-size:16px}
#ctl label{font-size:12px;color:#fca5a5;padding:0 6px}
#legend{position:absolute;left:8px;bottom:8px;font:10px "JetBrains Mono",monospace;color:var(--mut);display:flex;gap:6px;flex-wrap:wrap;max-width:70%;background:#020617cc;padding:4px 6px;border-radius:6px}
#legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:3px}
.node rect{fill:var(--card);stroke-width:1.5}.node text{fill:var(--txt);font:11px "JetBrains Mono",ui-monospace,monospace;pointer-events:none}
.node .sub{fill:var(--mut);font-size:9px}.node{cursor:pointer}.node:hover rect,.node.sel rect{fill:#1e293b}
.edge{fill:none;stroke:var(--arrow);stroke-width:1.2;opacity:.3}.edge.dim{opacity:.08}.edge.hi{opacity:1;stroke:#38bdf8;stroke-width:2}.elab{fill:var(--mut);font:9px monospace}
.rowlab{fill:#475569;font:10px "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.08em}
.band{fill:#0b1220;stroke:#111c33}
.hm circle{fill:var(--red);stroke:#fff;stroke-width:1.2}.hm text{fill:#fff;font:bold 9px monospace;text-anchor:middle}
.cost{font:bold 8px monospace}
#panel{position:absolute;z-index:5;background:#0b1220;border:1px solid #334155;overflow:auto;padding:14px;box-shadow:0 0 30px #000}
@media(max-width:700px){#panel{left:0;right:0;bottom:0;max-height:62%;border-radius:14px 14px 0 0}}
@media(min-width:701px){#panel{top:92px;right:12px;bottom:12px;width:380px;border-radius:12px}}
#panel h2{margin:0 0 2px;font-size:17px}#panel .k{color:var(--mut);font-size:12px;margin-bottom:8px}
#panel dl{margin:0}#panel dt{font:11px "JetBrains Mono",monospace;color:#64748b;margin-top:10px;text-transform:uppercase}#panel dd{margin:2px 0 0;word-break:break-word}
#panel .x{position:absolute;right:8px;top:8px;width:44px;height:44px;background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:8px;font-size:18px}
.badge{display:inline-block;padding:1px 7px;border-radius:99px;font:11px monospace;border:1px solid}
.sub-c{color:#34d399}.api-c{color:#fbbf24}.free-c{color:#60a5fa}.own-c{color:#94a3b8}.unk-c{color:#f87171}
#panel .hl{display:block;margin-top:6px;padding:8px;border:1px solid #7f1d1d;border-radius:8px;background:#1f0a0a;color:#fecaca;text-align:left;width:100%;font-size:13px}
#table,#holes{flex:1;overflow:auto;padding:8px 12px 40px;display:none}
table{border-collapse:collapse;width:100%;font-size:12px;min-width:640px}th,td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:top}th{color:var(--mut);position:sticky;top:0;background:var(--bg);font:11px monospace;text-transform:uppercase}
.tw{overflow-x:auto}
.hcard{border:1px solid #7f1d1d55;background:#0f172a;border-radius:10px;padding:10px 12px;margin:8px 0}
.hcard h3{margin:0 0 4px;font-size:14px}.hcard .sv{font:10px monospace;padding:1px 6px;border-radius:99px;margin-right:6px}
.sv.high{background:#7f1d1d}.sv.med{background:#78350f}.sv.low{background:#1e3a5f}
.hcard p{margin:4px 0}.hcard .lb{color:#64748b;font:10px monospace;text-transform:uppercase}
.hcard button{background:#1e293b;color:var(--txt);border:1px solid #334155;border-radius:6px;padding:6px 10px;margin:4px 4px 0 0;min-height:36px}
.note{font-size:12px;color:#fca5a5;margin:8px 0}
@media(max-width:700px){#legend{display:none}header{flex-wrap:wrap}#stamp{font-size:10px}}
@media(min-width:900px){main.hmode{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:auto 1fr}main.hmode #blurb{grid-column:1/3}main.hmode #holes{grid-column:2;grid-row:2}main.hmode #stage{grid-column:1;grid-row:2}}
@media(max-width:700px){table{min-width:0}tr:first-child{display:none}tr,td{display:block}tr{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:8px 0;background:var(--card)}td{border:0;padding:2px 0}td[data-l]:not([data-l=""])::before{content:attr(data-l) ": ";color:#64748b;font:10px monospace;text-transform:uppercase}}