CSS selector costs insight

<div class="atlas"><div class="head"><b>CSS SELECTORS · recalc cost</b><span class="pulse"></span></div><div class="stage"><div class="sc-row"><span>.card .title</span><div><i style="width:36%"></i></div><b>8 ms</b></div><div class="sc-row"><span>.page :has(…)</span><div><i id="sc-cost"></i></div><b id="sc-ms">28 ms</b></div><div class="sc-row"><span>.nav a</span><div><i style="width:22%"></i></div><b>5 ms</b></div><div class="sc-foot box" id="sc-foot">high slow-path share</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)}.sc-row{height:25%;display:flex;align-items:center;gap:6px;font-size:12px}.sc-row span{width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sc-row div{flex:1;height:13px;border-radius:7px;background:var(--line);overflow:hidden}.sc-row i{display:block;height:100%;background:var(--accent);transition:width .5s}.sc-row:nth-child(2) i{background:var(--accent-2)}.sc-row b{width:40px;text-align:right;font-size:12px}.sc-foot{height:21%;display:grid;place-items:center;font-size:12px;color:var(--accent);margin-top:4px}

let scoped=false;function tick(){scoped=!scoped;document.getElementById('sc-cost').style.width=scoped?'40%':'88%';document.getElementById('sc-ms').textContent=scoped?'10 ms':'28 ms';document.getElementById('sc-foot').textContent=scoped?'narrower scope → less matching work':'high slow-path share'}tick();setInterval(tick,1900)