DevTools 실사용 데이터 대조

<div class="atlas"><div class="head"><b>DEVTOOLS · lab vs field</b><span class="pulse"></span></div><div class="stage"><div class="fd-row"><b>local trace</b><div class="fd-track"><i id="fd-local"></i></div></div><div class="fd-row"><b>field p75</b><div class="fd-track"><i id="fd-field"></i></div></div><div class="fd-alert" id="fd-alert">sample: compare environments</div></div></div>

.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.fd-row{height:32%;display:flex;align-items:center;gap:8px}.fd-row b{width:64px;font-size:12px}.fd-track{flex:1;height:20px;border-radius:5px;background:var(--line);overflow:hidden}.fd-track i{display:block;height:100%;background:var(--accent);transition:width .5s}.fd-row+ .fd-row i{background:var(--accent-2)}.fd-alert{margin-top:6px;padding:7px;border:1px solid var(--line);border-radius:6px;text-align:center;color:var(--accent);font-size:12px}.fd-alert.warn{border-color:var(--accent-2)}

let gap=false;function tick(){gap=!gap;document.getElementById('fd-local').style.width='36%';document.getElementById('fd-field').style.width=gap?'76%':'42%';document.getElementById('fd-alert').classList.toggle('warn',gap);document.getElementById('fd-alert').textContent=gap?'field slower → inspect real devices':'sample: compare environments'}tick();setInterval(tick,2200)