<div class="demo"><div class="head"><b>I/O WORKERS</b><span>min 1 · max 4</span></div><div class="stage workers"><div class="queue"><span>pending I/O</span><div class="queuebar"><i id="queued"></i></div><strong id="qcount">4 waiting</strong></div><div class="workerbox"><span>active workers</span><div class="slots"><i></i><i></i><i></i><i></i></div><strong id="wcount">1 / 4</strong></div></div><div class="foot"><span id="workerstatus">queue rises</span><span>io_method=worker</span></div></div>
*{box-sizing:border-box}.demo{width:min(96vw,820px);height:min(94vh,350px);padding:clamp(8px,2vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);display:flex;flex-direction:column;gap:clamp(5px,1.5vmin,12px);font:600 clamp(12px,3.5vmin,15px)/1.25 var(--font-sans),sans-serif;overflow:hidden}.head,.foot,.row{display:flex;justify-content:space-between;align-items:center;gap:8px}.head b{color:var(--accent)}.head span,.foot,.muted{color:var(--muted)}.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:8px}.cell,.pill{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(4px,1.2vmin,9px);text-align:center}.pill{border-radius:999px}.on{border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 17%,var(--surface))!important;color:var(--fg)!important}.bad{border-color:#e16a5d!important;background:color-mix(in srgb,#e16a5d 18%,var(--surface))!important}.foot{font-size:clamp(12px,3vmin,14px)}.workers{justify-content:space-around}.queue,.workerbox{width:43%;display:grid;gap:7px;text-align:center}.workers span{color:var(--muted)}.queuebar{height:clamp(17px,5vmin,28px);border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg)}.queuebar i{display:block;height:100%;width:90%;background:#e16a5d;transition:width .3s}.workerbox .slots{display:flex;gap:4px}.workerbox .slots i{height:clamp(17px,5vmin,28px);flex:1;border:1px solid var(--line);background:var(--bg);border-radius:4px;transition:.3s}.workerbox .slots i.on{background:var(--accent)!important;border-color:var(--accent)}.workers strong{font:700 clamp(12px,3vmin,15px) var(--font-sans),sans-serif}
let n=0;function tick(){let count=[1,2,4,2][n];let pending=[4,3,1,2][n];document.querySelectorAll('.workerbox .slots i').forEach((e,i)=>e.classList.toggle('on',i<count));document.getElementById('queued').style.width=(pending*22)+'%';document.getElementById('qcount').textContent=pending+' waiting';document.getElementById('wcount').textContent=count+' / 4';document.getElementById('workerstatus').textContent=['queue rises','add workers','queue drains','scale down'][n];n=(n+1)%4}tick();const t=setInterval(tick,750);document.querySelector('.demo').onclick=()=>{clearInterval(t);tick()}
