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