.viz-tls{border:1px solid var(--color-border);background:var(--color-surface);border-radius:4px;margin:1.5rem 0;padding:1.25rem 1.5rem}.viz-tls__track{flex-wrap:wrap;gap:.4rem;margin:0 0 1rem;padding:0;list-style:none;display:flex}.viz-tls__dot{border:1px solid var(--color-border);background:var(--color-surface-2);cursor:pointer;font-family:var(--font-mono);border-radius:2px;flex-direction:column;align-items:center;gap:.2rem;padding:.4rem .55rem;display:flex}.viz-tls__dot-n{color:var(--color-text-faint);font-size:.7rem}.viz-tls__dot-t{color:var(--color-text-muted);font-size:.62rem}.viz-tls__dot--client{border-bottom:2px solid var(--color-primary)}.viz-tls__dot--server{border-bottom:2px solid var(--color-accent)}.viz-tls__dot--done{opacity:.6}.viz-tls__dot--active{border-color:var(--color-primary);background:var(--color-primary-glow)}.viz-tls__dot--active .viz-tls__dot-t,.viz-tls__dot--active .viz-tls__dot-n{color:var(--color-primary)}.viz-tls__panel{border:1px solid var(--color-border);border-left:3px solid var(--color-primary);background:var(--color-surface-2);color:var(--color-text-muted);border-radius:0 2px 2px 0;padding:.875rem 1rem;font-size:.88rem}.viz-tls__panel strong{color:var(--color-text);font-family:var(--font-mono)}.viz-tls__panel p{margin:.4rem 0 0}.viz-tls__side{font-family:var(--font-mono);margin-bottom:.35rem;font-size:.7rem}.viz-tls__side--client{color:var(--color-primary)}.viz-tls__side--server{color:var(--color-accent);text-align:right}.viz-tls__nav{align-items:center;gap:.75rem;margin-top:1rem;display:flex}.viz-tls__pos{font-family:var(--font-mono);color:var(--color-text-faint);margin-left:auto;font-size:.78rem}