CI/CD observability

<div class="demo"><div class="title">PIPELINE TRACE</div><div class="scene"><div class="pipe"><div>build <i></i></div><div>test <i></i></div><div>deploy <i></i></div></div><div class="status" id="status">running</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:9px}.pipe{width:95%;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.pipe div{border:1px solid var(--line);border-radius:5px;padding:7px 4px;text-align:center;min-width:0}.pipe i{display:block;width:15%;height:8px;margin:8px auto 0;background:var(--accent);border-radius:4px;transition:width .4s,background .4s}.pipe .fail i{background:var(--accent-3)}.status{color:var(--accent);font:700 clamp(12px,2.4vmin,15px)/1 ui-monospace,monospace}

const steps=[...document.querySelectorAll(".pipe div")];let n=0;function tick(){steps.forEach((s,i)=>{s.querySelector("i").style.width=i<=n?"90%":"15%";s.classList.toggle("fail",n===2&&i===1)});document.getElementById("status").textContent=n===2?"test failed":"running";n=(n+1)%3}tick();setInterval(tick,900)