.iotx{margin-top:14px;border:1px solid var(--line2);border-radius:16px;overflow:hidden;background:var(--panel)}
.iotx-head{padding:10px 14px;border-bottom:1px solid var(--line2);color:var(--dim);font:700 .75rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.iotx-controls{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:end;padding:12px 14px;border-bottom:1px solid var(--line2)}
.iotx-controls label{display:grid;gap:5px;min-width:min(190px,100%);color:var(--dim);font:650 .78rem/1.2 var(--mono)}
.iotx-controls input[type="range"]{width:min(220px,70vw);accent-color:var(--accent)}
.iotx-controls button{border:1px solid var(--line2);border-radius:999px;padding:8px 12px;color:var(--txt);background:var(--panel2);font:700 .76rem/1 var(--mono);cursor:pointer}
.iotx-controls button[aria-pressed="true"],.iotx-controls button.primary{color:var(--bg);background:var(--accent);border-color:var(--accent)}
.iotx-range b{color:var(--txt);font-variant-numeric:tabular-nums}
.iotx-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(230px,.65fr)}
.iotx-viz{min-width:0;padding:14px;border-right:1px solid var(--line2);overflow-x:auto;overscroll-behavior-inline:contain}
.iotx-viz svg{display:block;width:100%;min-width:620px;height:auto}
.iotx-stats{display:grid;align-content:start;gap:8px;padding:14px}
.iotx-stat{padding:9px 10px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2)}
.iotx-stat span{display:block;color:var(--dim);font:650 .67rem/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.iotx-stat b{display:block;margin-top:4px;font:750 .96rem/1.25 var(--mono);overflow-wrap:anywhere}
.iotx-stat.good{border-color:var(--accent)}.iotx-stat.warn{border-color:var(--hot)}
.iotx-note{grid-column:1/-1;padding:11px 14px;border-top:1px solid var(--line2);color:var(--dim)}
.iotx-note.ok{border-left:3px solid var(--on)}.iotx-note.bad{border-left:3px solid var(--hot)}
.iotx-node{fill:var(--panel2);stroke:var(--line2);stroke-width:2}.iotx-node.on{stroke:var(--accent)}.iotx-node.warn,.iotx-node.bad{stroke:var(--hot)}
.iotx-line{stroke:var(--line2);stroke-width:2;fill:none}.iotx-line.on{stroke:var(--accent);stroke-width:3}.iotx-line.bad{stroke:var(--hot);stroke-dasharray:7 5}
.iotx-label{fill:var(--txt);font:700 13px var(--mono)}
.iotx-text{fill:var(--txt);font:12px var(--mono)}.iotx-dim{fill:var(--dim);font:10px var(--mono)}
.iotx-bar-bg{fill:var(--panel3)}.iotx-bar{fill:var(--accent)}.iotx-bar.warn{fill:var(--hot)}
@media(max-width:760px){.iotx-body{grid-template-columns:1fr}.iotx-viz{border-right:0;border-bottom:1px solid var(--line2)}.iotx-body>p,.iotx-body>.codeblock{margin-inline:14px}}