Metric cardinality limit

<div class="demo"><div class="title">SERIES LIMIT: 4</div><div class="scene"><div class="slots"><span>id=1</span><span>id=2</span><span>id=3</span><span>id=4</span></div><div class="incoming" id="incoming">new id=1</div><div class="warning" id="warning">4 / 4 retained</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:8px}.slots{width:100%;display:flex;gap:4px}.slots span{flex:1;min-width:0;border:1px solid var(--accent);border-radius:5px;padding:9px 2px;text-align:center;white-space:nowrap;overflow:hidden;background:var(--bg);font:600 clamp(12px,2.4vmin,15px)/1 ui-monospace,monospace}.incoming{padding:6px 12px;border-radius:5px;border:1px dashed var(--line);animation:arrive 1s infinite alternate}.warning{color:var(--accent);font:700 clamp(12px,2.4vmin,15px)/1 ui-monospace,monospace}.scene.dropped .incoming,.scene.dropped .warning{color:var(--accent-3);border-color:var(--accent-3)}@keyframes arrive{to{transform:translateY(5px)}}

let n=1;function tick(){document.getElementById("incoming").textContent="new id="+n;const drop=n>4;document.querySelector(".scene").classList.toggle("dropped",drop);document.getElementById("warning").textContent=drop?"DROP · limit reached":n+" / 4 retained";document.querySelectorAll(".slots span").forEach((s,i)=>{const active=i<n;s.style.borderColor=active?"var(--accent)":"var(--line)";s.style.background=active?"color-mix(in srgb,var(--accent) 16%,var(--surface))":"var(--bg)";s.style.color=active?"var(--fg)":"var(--muted)"});n=n===5?1:n+1}tick();setInterval(tick,850)