.cdn-viz-container{border:1px solid var(--border);background:#0d1117;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;max-width:1000px;min-height:450px;margin:2rem auto;padding:2rem;display:flex;position:relative;overflow:hidden}.cdn-map-bg{opacity:.1;background-image:radial-gradient(var(--text-dim)1px,transparent 1px),linear-gradient(to right,#ffffff05 1px,transparent 1px),linear-gradient(to bottom,#ffffff05 1px,transparent 1px);pointer-events:none;background-size:20px 20px,40px 40px,40px 40px;width:100%;height:100%;position:absolute;top:0;left:0}.cdn-node{background:var(--surface-2);border:1px solid var(--border);z-index:2;border-radius:12px;flex-direction:column;align-items:center;gap:.5rem;min-width:130px;padding:1rem 1.2rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;box-shadow:0 4px 12px #0003}.cdn-node.active{border-color:var(--cyan);background:#22d3ee0d;transform:scale(1.05);box-shadow:0 0 25px #22d3ee40}.cdn-node-icon{justify-content:center;align-items:center;font-size:2rem;display:flex}.cdn-node-label{font-family:var(--font-mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.node-user{top:50%;left:10%;transform:translateY(-50%)}.node-edge{top:50%;left:45%;transform:translateY(-50%)}.node-origin{top:50%;right:10%;transform:translateY(-50%)}.cdn-path{background:var(--border2);z-index:1;height:2px;position:absolute;top:50%;transform:translateY(-50%)}.path-short{width:calc(35% - 50px);left:calc(10% + 50px)}.path-long{width:calc(45% - 100px);left:calc(45% + 50px)}.cdn-packet{background:var(--cyan);z-index:3;width:14px;height:14px;box-shadow:0 0 15px var(--cyan);opacity:0;border:2px solid #fff;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.cache-status{background:var(--surface);border:1px solid var(--border);opacity:0;z-index:4;border-radius:12px;padding:3px 8px;font-size:.7rem;font-weight:800;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:absolute;top:-12px;right:-10px;transform:translateY(10px)scale(.8)}.cdn-node.has-cache .cache-status{opacity:1;border-color:var(--green);color:var(--green);background:#3effa30d;transform:translateY(0)scale(1)}.cdn-node.miss-cache .cache-status{opacity:1;border-color:var(--orange);color:var(--orange);background:#ffa6000d;transform:translateY(0)scale(1)}.cdn-controls{z-index:10;justify-content:center;gap:1rem;margin-bottom:2rem;display:flex;position:relative}.cdn-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text-hi);font-family:var(--font-mono);cursor:pointer;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:600;transition:all .2s;display:flex}.cdn-btn:hover{background:var(--border);border-color:var(--text-dim);transform:translateY(-1px)}.cdn-btn:active{transform:translateY(0)}.cdn-btn.primary{color:var(--cyan);background:#22d3ee1a;border-color:#22d3ee4d}.cdn-btn.primary:hover{background:#22d3ee33;box-shadow:0 0 20px #22d3ee26}.cdn-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.viz-step-display{font-family:var(--font-mono);color:var(--cyan);text-align:center;background:#22d3ee14;border:1px solid #22d3ee33;border-radius:20px;min-width:300px;margin-top:2rem;padding:.8rem 1.5rem;font-size:.9rem}.viz-table th{text-align:left;border-bottom:1px solid var(--border);color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;padding:1.2rem;font-size:.85rem;font-weight:600}.viz-table td{border-bottom:1px solid var(--border2);color:var(--text);padding:1.2rem;font-size:.95rem}.viz-table tr:last-child td{border-bottom:none}