Tail sampling

<div class="demo"><div class="title">DECIDE AFTER COMPLETION</div><div class="scene"><div class="inbox"><span>fast 42 ms</span><span>slow 860 ms</span><span>error 500</span></div><div class="decision">→</div><div class="kept"><b>KEEP</b><span>slow</span><span>error</span></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{gap:8px}.inbox,.kept{display:flex;flex-direction:column;gap:5px;min-width:35%}.inbox span,.kept span{padding:5px;border:1px solid var(--line);border-radius:5px;background:var(--bg);text-align:center;white-space:nowrap;font:600 clamp(12px,2.4vmin,15px)/1 ui-monospace,monospace}.inbox span{animation:sort 2.5s infinite}.inbox span:nth-child(2){animation-delay:.4s}.inbox span:nth-child(3){animation-delay:.8s}.kept{border:1px solid var(--accent);border-radius:7px;padding:7px;box-sizing:border-box}.kept b{text-align:center;color:var(--accent)}.kept span{border-color:var(--accent);animation:keep 2.5s infinite}.kept span:last-child{animation-delay:.5s}.decision{color:var(--accent);font-size:25px}@keyframes sort{50%{transform:translateX(5px);border-color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 13%,var(--surface))}}@keyframes keep{0%,15%,100%{border-color:var(--line);background:var(--bg)}40%,85%{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface))}}