테스트 피라미드

<div class="stage"><div class="title">TEST PYRAMID</div><div class="canvas"><div class="pyramid"><div class="tier e" id="tier2">E2E · 2</div><div class="tier i" id="tier1">Integration · 6</div><div class="tier u" id="tier0">Unit · 24</div></div><div class="meter"><span>run time</span><div><i id="bar"></i></div><b id="time">1x</b></div></div></div>

.stage{width:min(94vw,820px);height:min(88vh,330px);box-sizing:border-box;padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:600 clamp(12px,2.5vmin,16px)/1.28 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;color:var(--fg);overflow:hidden}.title{color:var(--accent);letter-spacing:.035em;flex:none}.canvas{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,monospace}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(5px,1.4vmin,12px);text-align:center}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important}.canvas{gap:clamp(14px,4vmin,34px)}.pyramid{width:45%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:3px}.tier{box-sizing:border-box;text-align:center;border:1px solid var(--line);padding:clamp(4px,1.4vmin,10px) 1px;color:var(--muted);transition:border-color .3s,color .3s,background .3s}.tier.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,var(--surface))}.e{width:42%}.i{width:68%}.u{width:100%}.meter{width:38%;display:flex;flex-direction:column;gap:8px}.meter div{height:clamp(9px,2.5vmin,17px);border:1px solid var(--line);border-radius:9px;overflow:hidden}.meter i{display:block;height:100%;width:20%;background:var(--accent);transition:width .4s}.meter b{color:var(--accent)}

let n=0;function show(){const visible=n%3+1;[0,1,2].forEach(i=>document.getElementById('tier'+i).classList.toggle('on',i<visible));document.getElementById('bar').style.width=[22,49,92][visible-1]+'%';document.getElementById('time').textContent=['1x','3x','8x'][visible-1];n++}show();setInterval(show,1200)