Trace context propagation

<div class="demo"><div class="title">TRACE ID: 7F3A</div><div class="scene"><div class="nodes"><div>gateway</div><span>→</span><div>api</div><span>→</span><div>database</div></div><div class="packet">7F3A</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}.nodes{width:100%;display:flex;justify-content:space-around;align-items:center;gap:3px}.nodes div{border:1px solid var(--line);border-radius:7px;padding:9px 5px;text-align:center;min-width:0;flex:1}.nodes span{color:var(--accent)}.packet{position:absolute;top:62%;left:4%;background:var(--accent);color:var(--bg);border-radius:5px;padding:4px 8px;font:700 clamp(12px,2.4vmin,15px)/1 ui-monospace,monospace;animation:travel 3s linear infinite}@keyframes travel{0%{left:4%;opacity:0}10%,85%{opacity:1}100%{left:78%;opacity:0}}