<div class="server"><div class="head">EVENT ROUTING <b id="phase">BROWSER</b></div><div class="flow"><div id="browser">BROWSER</div><span>→</span><div id="container">SERVER</div><span>→</span><div class="dest"><div id="analytics">ANALYTICS</div><div id="ads">ADS</div></div></div><div class="foot">CONSENT SIGNAL TRAVELS WITH EVENT</div></div>
.server{width:min(87%,590px);font:850 clamp(10px,max(2vmin,1vw),14px)/1.2 sans-serif}.head{display:flex;justify-content:space-between;border-bottom:2px solid var(--fg);padding-bottom:8px}.head b{color:var(--accent)}.flow{display:flex;align-items:center;justify-content:space-between;gap:clamp(3px,1.5vmin,12px);margin:clamp(17px,5vmin,38px) 0}.flow>div:not(.dest),.dest>div{border:1px solid var(--line);background:var(--surface);padding:clamp(9px,3vmin,20px) clamp(3px,1.5vmin,12px);text-align:center;transition:background .4s,color .4s;font-size:clamp(10px,max(1.7vmin,1vw),13px)}.flow>div:not(.dest){flex:1}.flow span{color:var(--accent);font-size:clamp(16px,5vmin,32px)}.dest{flex:1;display:grid;gap:clamp(4px,1vmin,8px)}.dest>div{padding:clamp(4px,1.3vmin,10px)}.flow .on,.dest .on{background:var(--accent)!important;color:var(--bg);border-color:var(--accent)!important}.foot{border-top:1px solid var(--line);padding-top:9px;text-align:center;color:var(--muted);font-size:clamp(10px,max(1.7vmin,1vw),12px)}
let step=0;const ids=['browser','container','analytics','ads'];function draw(){ids.forEach((id,i)=>document.querySelector('#'+id).classList.toggle('on',i===step||(step===3&&i===2)));document.querySelector('#phase').textContent=['BROWSER','SERVER CONTAINER','ANALYTICS','TWO DESTINATIONS'][step]}draw();setInterval(()=>{step=(step+1)%4;draw()},650);
