추적·프로파일 연결

<div class="demo"><div class="title">SLOW SPAN → FUNCTIONS</div><div class="scene"><div class="spanbox">API<br><b>840 ms</b></div><div class="arrow">→</div><div class="functions"><div>parse <i></i></div><div>query <i></i></div><div>render <i></i></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{gap:8px}.spanbox{width:26%;border:2px solid var(--accent-3);border-radius:7px;padding:12px 4px;text-align:center;background:var(--bg);animation:pick 2.5s infinite}.spanbox b{color:var(--accent-3)}.arrow{color:var(--accent);font-size:25px}.functions{flex:1;display:grid;gap:7px}.functions div{display:flex;align-items:center;gap:5px}.functions i{height:8px;width:15%;background:var(--accent);border-radius:4px;animation:expand 2.5s infinite}.functions div:nth-child(2) i{background:var(--accent-3);animation-delay:.15s}.functions div:nth-child(3) i{animation-delay:.3s}@keyframes pick{0%,20%,100%{box-shadow:none}40%,85%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-3) 22%,transparent)}}@keyframes expand{0%,25%{width:0}55%,85%{width:55%}100%{width:0}}