타깃 크기

<div class="stage">
  <div class="pane"><div class="tag">✗ 16px</div>
    <div class="row tight"><button></button><button></button><button id="hit1"></button><button></button></div>
    <div class="ptr p1"></div>
  </div>
  <div class="pane"><div class="tag">✓ 24px+</div>
    <div class="row roomy"><button></button><button id="hit2"></button><button></button></div>
    <div class="ptr p2"></div>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 10.5px/1 ui-monospace,monospace;color:var(--muted)}
.row{display:flex}
.tight{gap:2px}
.tight button{width:16px;height:16px;border-radius:4px;border:1px solid var(--line);background:var(--bg)}
.roomy{gap:12px}
.roomy button{width:24px;height:24px;border-radius:6px;border:1px solid var(--line);background:var(--bg)}
button.err{background:var(--accent-2) !important}
button.ok{background:var(--accent-3) !important}
.ptr{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid var(--fg);top:44%}
.p1{left:47%;animation:tap 3s ease-in-out infinite}
.p2{left:50%;animation:tap 3s ease-in-out infinite}
@keyframes tap{0%,10%{opacity:0}25%,80%{opacity:1}95%,100%{opacity:0}}

const h1 = document.getElementById('hit1');
const h2 = document.getElementById('hit2');
function pulse(el, cls) { el.classList.add(cls); setTimeout(function () { el.classList.remove(cls); }, 500); }
setInterval(function () {
  pulse(h1.previousElementSibling, 'err');
  pulse(h2, 'ok');
}, 2000);