지속적 프로파일링

<div class="demo"><div class="title">CPU FLAME GRAPH</div><div class="scene"><div class="flame"><div class="base">request</div><div class="branch"><span>parse</span><span>compute</span><span>send</span></div><div class="hot">calculate totals</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}.flame{width:100%;height:80%;display:flex;flex-direction:column-reverse;gap:4px}.flame div{box-sizing:border-box;border-radius:4px;padding:5px 7px;white-space:nowrap;overflow:hidden;font:600 clamp(12px,2.4vmin,15px)/1 ui-monospace,monospace}.base{width:100%;background:var(--accent);color:var(--bg)}.branch{width:100%;display:flex;gap:4px;padding:0!important}.branch span{background:var(--accent-2);padding:7px 4px;overflow:hidden}.branch span:nth-child(1){width:22%}.branch span:nth-child(2){width:50%;animation:grow 2.4s ease-in-out infinite alternate}.branch span:nth-child(3){flex:1;min-width:18%}.hot{width:50%;margin-left:22%;background:var(--accent-3);animation:hot 2.4s ease-in-out infinite alternate}@keyframes grow{to{width:56%}}@keyframes hot{to{width:68%}}