Touch Target

<div class="stage">
  <div class="pane"><div class="tag">✗ 24px</div>
    <div class="row tight"><button></button><button></button><button id="hit1"></button><button></button></div>
    <div class="finger f1"></div>
  </div>
  <div class="pane"><div class="tag">✓ 44px</div>
    <div class="row roomy"><button></button><button id="hit2"></button><button></button></div>
    <div class="finger f2"></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 monospace;color:var(--muted)}
.row{display:flex}
.tight{gap:2px}
.tight button{width:22px;height:22px;border-radius:5px;border:1px solid var(--line);background:var(--bg)}
.roomy{gap:14px}
.roomy button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--bg)}
button.err{background:var(--accent-2) !important}
button.ok{background:var(--accent-3) !important}
.finger{position:absolute;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--fg) 25%,transparent);border:1px solid var(--fg);top:44%}
.f1{left:47%;animation:tap1 3s ease-in-out infinite}
.f2{left:50%;animation:tap2 3s ease-in-out infinite}
@keyframes tap1{0%,10%{opacity:0}25%,80%{opacity:1}95%,100%{opacity:0}}
@keyframes tap2{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(() => el.classList.remove(cls), 500); }
setInterval(() => {
  pulse(h1.previousElementSibling, 'err');
  pulse(h2, 'ok');
}, 2000);