Token usage metrics

<div class="demo"><div class="title">TOKENS PER CALL</div><div class="scene"><div class="stacks"><div><i></i><b></b></div><div><i></i><b></b></div><div><i></i><b></b></div><div><i></i><b></b></div></div><div class="key">■ input　<span>■ output</span></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}.stacks{height:68%;width:92%;display:flex;align-items:flex-end;justify-content:space-around;border-bottom:1px solid var(--line)}.stacks div{width:16%;height:85%;display:flex;flex-direction:column;justify-content:flex-end}.stacks i,.stacks b{display:block;width:100%;height:35%;transition:height .6s}.stacks i{background:var(--accent-2);border-radius:4px 4px 0 0}.stacks b{background:var(--accent)}.key{color:var(--accent);font:600 clamp(12px,2.4vmin,15px)/1 ui-monospace,monospace}.key span{color:var(--accent-2)}

let step=0;function tick(){document.querySelectorAll(".stacks div").forEach((d,i)=>{d.querySelector("i").style.height=(15+(i*9+step*7)%28)+"%";d.querySelector("b").style.height=(25+(i*13+step*9)%37)+"%"});step++}tick();setInterval(tick,850)