.demo { max-width: 820px; margin: 0 auto; padding: 1rem; }
.controls { display: flex; gap: 1rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.warn { background: #fff3cd; border: 1px solid #ffe69c; padding: .5rem .75rem; border-radius: 6px; margin: .5rem 0; }
.bars { margin: 1rem 0; display: grid; gap: .6rem; }
.leg { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: .6rem; align-items: center; }
.lbl { font-weight: 600; }
.track { display: flex; height: 1.4rem; background: #e9ecef; border-radius: 4px; overflow: hidden; }
.seg { height: 100%; }
.seg.conn { background: #2563eb; }
.seg.tcp  { background: #f59e0b; }
.seg.tls  { background: #ef4444; }
.num { font: 13px/1 monospace; color: #333; }
.bad { color: #b91c1c; font: 13px/1.4 monospace; }
.legend { font: 12px/1.4 monospace; color: #555; margin-top: .25rem; }
.dist { margin-top: 1rem; font: 14px/1.6 monospace; }
@media (max-width: 720px) { .leg { grid-template-columns: 4rem 1fr; } .num { grid-column: 2; } }