Navigation ID performance attribution

<div class="atlas"><div class="head"><b>NAVIGATION ID · event grouping</b><span class="pulse"></span></div><div class="stage"><div class="nid-stream mono"><span>paint A</span><span>event B</span><span>shift A</span></div><div class="nid-lane" id="nid-a"><b>nav A</b><i>paint</i><i>shift</i></div><div class="nid-lane" id="nid-b"><b>nav B</b><i>event</i></div><div class="nid-caption mono" id="nid-caption">entries carry their navigationId</div></div></div>

.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.nid-stream{display:flex;gap:5px;height:28%;align-items:center}.nid-stream span{flex:1;text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:4px 0;font-size:12px}.nid-lane{height:27%;border-left:3px solid var(--line);padding-left:8px;display:flex;align-items:center;gap:7px;transition:border-color .3s}.nid-lane b{width:43px;font-size:12px}.nid-lane i{font:12px ui-monospace,monospace;background:var(--bg);border:1px solid var(--line);padding:3px 7px;border-radius:4px}.nid-lane.on{border-color:var(--accent)}.nid-lane.on i{color:var(--accent);border-color:var(--accent)}.nid-caption{color:var(--accent);font-size:12px;text-align:right}

let lane=false;function tick(){lane=!lane;document.getElementById('nid-a').classList.toggle('on',!lane);document.getElementById('nid-b').classList.toggle('on',lane);document.getElementById('nid-caption').textContent=lane?'event → nav B':'paint + shift → nav A'}tick();setInterval(tick,1500)