Test fixture

<div class="stage"><div class="title">TEST FIXTURE</div><div class="canvas"><div class="phases"><span id="p0">SETUP</span><span id="p1">TEST</span><span id="p2">CLEANUP</span></div><div class="record" id="record">record #42</div><div class="note" id="note">create known state</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{flex-direction:column;gap:clamp(9px,3vmin,22px)}.phases{width:100%;max-width:620px;display:flex;gap:5px}.phases span{flex:1;text-align:center;padding:6px 2px;border:1px solid var(--line);border-radius:6px}.phases .active{border-color:var(--accent)}.record{border:2px solid var(--accent);border-radius:8px;padding:clamp(8px,3vmin,20px);color:var(--accent);transition:opacity .3s,transform .3s}.record.gone{opacity:.15;transform:scale(.8)}.note{color:var(--muted)}

let n=0;function tick(){const s=n++%3;[0,1,2].forEach(i=>document.getElementById('p'+i).classList.toggle('active',i===s));document.getElementById('record').classList.toggle('gone',s===2);document.getElementById('note').textContent=['create known state','assert saved value','remove record'][s]}tick();setInterval(tick,1050)