Logs

<div class="demo"><div class="title">EVENT LOG</div><div class="scene"><div class="list"><div class="line">12:01 info · request in</div><div class="line">12:02 info · cache hit</div><div class="line error">12:03 error · timeout</div><div class="line">12:04 info · retry</div></div><div class="filter">ERROR FILTER <b id="state">OFF</b></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}.list{width:100%;display:grid;gap:5px}.line{padding:5px 8px;border-left:3px solid var(--accent);background:var(--bg);font:500 clamp(12px,2.4vmin,15px)/1.2 ui-monospace,monospace;white-space:nowrap;overflow:hidden}.error{border-color:var(--accent-3);color:var(--accent-3)}.filter{align-self:flex-end;font:700 clamp(12px,2.4vmin,15px)/1.2 ui-monospace,monospace}.filter b{color:var(--accent)}.demo.filtered .line:not(.error){border-color:var(--line);color:var(--muted);background:var(--surface)}.line{transition:background .3s,border-color .3s,color .3s}

let on=false;function tick(){on=!on;document.querySelector(".demo").classList.toggle("filtered",on);document.getElementById("state").textContent=on?"ON":"OFF"}setInterval(tick,1300);document.querySelector(".demo").addEventListener("pointerdown",tick)