OpenTelemetry 프로파일 신호

<div class="demo"><div class="title">FOUR SIGNALS</div><div class="scene"><div class="lanes"><div>logs <i></i></div><div>metrics <i></i></div><div>traces <i></i></div><div class="profile">profiles <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}.lanes{width:95%;display:grid;gap:6px}.lanes div{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);padding:6px 8px;border-radius:5px;background:var(--bg)}.lanes i{width:38%;height:7px;border-radius:4px;background:var(--accent);animation:lane 2s infinite alternate}.lanes div:nth-child(2) i{animation-delay:.2s;background:var(--accent-2)}.lanes div:nth-child(3) i{animation-delay:.4s;background:var(--accent-3)}.lanes .profile{border-color:var(--accent);animation:join 2.3s infinite}.profile i{animation-delay:.6s}@keyframes lane{to{width:70%}}@keyframes join{0%,20%,100%{transform:translateX(5px);border-color:var(--line);background:var(--bg)}45%,85%{transform:translateX(0);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--surface))}}