.viz-dns{border:1px solid var(--color-border);background:var(--color-surface);border-radius:4px;margin:1.5rem 0;padding:1.25rem 1.5rem}.viz-dns__query{font-family:var(--font-mono);margin-bottom:1rem;font-size:.85rem}.viz-dns__label{color:var(--color-text-faint)}.viz-dns__domain{color:var(--color-primary)}.viz-dns__steps{flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.viz-dns__step{border:1px solid var(--color-border);border-left:3px solid var(--color-border);background:var(--color-surface-2);opacity:.35;border-radius:0 2px 2px 0;gap:.75rem;padding:.6rem .75rem;transition:opacity .25s,transform .25s,border-color .25s;display:flex;transform:translate(-4px)}.viz-dns__step--on{opacity:1;border-left-color:var(--color-primary);transform:none}.viz-dns__step-num{border:1px solid var(--color-border);width:1.5rem;height:1.5rem;font-family:var(--font-mono);color:var(--color-text-muted);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.7rem;display:inline-flex}.viz-dns__step--on .viz-dns__step-num{border-color:var(--color-primary);color:var(--color-primary)}.viz-dns__hop{font-family:var(--font-mono);flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.78rem;display:flex}.viz-dns__from{color:var(--color-text-muted)}.viz-dns__arrow{color:var(--color-primary)}.viz-dns__to{color:var(--color-accent)}.viz-dns__q{color:var(--color-text);margin-top:.2rem;font-size:.82rem}.viz-dns__a{color:var(--color-text-faint);margin-top:.15rem;font-size:.78rem}.viz-dns__controls{flex-wrap:wrap;gap:.625rem;margin-top:1rem;display:flex}@media (prefers-reduced-motion:reduce){.viz-dns__step{transition:none}}