Consistent probability sampling

<div class="demo"><div class="title">SAME TRACE DECISION</div><div class="scene"><div class="sample-route"><div>edge <b>KEEP</b></div><span>→</span><div>api <b>KEEP</b></div><span>→</span><div>worker <b>KEEP</b></div></div><div class="sample-meta">trace 7f3a · threshold 0.25</div></div></div>

.demo{width:min(94vw,690px);height:min(88vh,320px);box-sizing:border-box;padding:clamp(9px,2.5vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);font:600 clamp(12px,2.4vmin,16px)/1.25 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);overflow:hidden}.title{color:var(--accent);font:700 clamp(12px,2.4vmin,16px)/1.2 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);letter-spacing:.04em}.scene{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.scene{flex-direction:column;gap:10px}.sample-route{width:100%;display:flex;align-items:center;gap:4px}.sample-route div{flex:1;min-width:0;border:1px solid var(--line);border-radius:7px;padding:7px 2px;text-align:center;background:var(--bg);transition:border-color .3s,background .3s}.sample-route b{display:block;color:var(--accent);font:700 clamp(12px,2.4vmin,15px)/1.2 ui-monospace,monospace}.sample-route span{color:var(--accent)}.sample-route div.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,var(--surface))}.sample-meta{font:600 clamp(12px,2.4vmin,15px)/1.2 ui-monospace,monospace;color:var(--muted);white-space:nowrap}

let n=0;function draw(){document.querySelectorAll(".sample-route div").forEach((d,i)=>d.classList.toggle("active",i<=n));n=(n+1)%3}draw();setInterval(draw,650)