<div class="demo"><div class="title">GO LOGS · RELEASE CANDIDATE</div><div class="scene"><div class="log-flow"><div class="log-events"><span>record A</span><span>record B</span><span>record C</span></div><div class="log-batch">batch <b id="batch-count">1 / 3</b></div><div class="log-export" id="log-export">export</div></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}.log-flow{width:100%;display:flex;align-items:center;gap:7px}.log-events{flex:1;display:grid;gap:4px}.log-events span{padding:4px;border-left:3px solid var(--line);background:var(--bg);font:600 clamp(12px,2.4vmin,15px)/1 ui-monospace,monospace;transition:border-color .25s}.log-events span.on{border-color:var(--accent)}.log-batch{padding:10px 6px;border:1px solid var(--accent);border-radius:6px;text-align:center}.log-batch b{display:block;color:var(--accent)}.log-export{padding:10px 5px;border:1px solid var(--line);border-radius:6px;color:var(--muted);transition:background .3s,color .3s}.log-export.on{background:var(--accent-2);color:var(--bg)}
let n=0;function draw(){document.querySelectorAll(".log-events span").forEach((s,i)=>s.classList.toggle("on",i<=n));document.getElementById("batch-count").textContent=(n+1)+" / 3";document.getElementById("log-export").classList.toggle("on",n===2);n=(n+1)%3}draw();setInterval(draw,700)