Ad frequency capping

<div class="cap"><div class="person">PERSON 01 <strong>CAP: 3</strong></div><div class="slots" id="slots"></div><div class="status" id="status">0 / 3 DELIVERED</div></div>

.cap{width:min(86%,450px);font:800 clamp(10px,max(2vmin,1vw),16px)/1.2 sans-serif}.person{display:flex;justify-content:space-between;gap:5px;padding:clamp(8px,2vmin,16px);border:2px solid var(--fg)}.person strong{color:var(--accent)}.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(4px,1vmin,10px);margin:clamp(12px,3vmin,25px) 0}.slots div{height:clamp(48px,13vmin,100px);background:var(--surface);border:1px dashed var(--line);display:grid;place-items:center;font-size:clamp(16px,4vmin,30px);transition:.4s}.slots div.on{background:var(--accent);color:white;border-color:var(--accent)}.slots div.blocked{color:var(--muted);text-decoration:line-through}.status{background:var(--fg);color:var(--bg);padding:clamp(8px,2vmin,15px);text-align:center;letter-spacing:.1em}

const slots=document.querySelector('#slots');slots.innerHTML=Array.from({length:5},(_,i)=>'<div>'+String(i+1).padStart(2,'0')+'</div>').join('');let n=0;function draw(){[...slots.children].forEach((cell,i)=>{cell.className=i<n?(i<3?'on':'blocked'):''});document.querySelector('#status').textContent=n<=3?n+' / 3 DELIVERED':'3 / 3 · EXTRA REQUEST BLOCKED';n=(n+1)%6}draw();setInterval(draw,750);