야콥의 법칙

<div class="stage">
  <div class="pane"><div class="tag">A</div>
    <div class="bar-top">
      <span class="ic magnifier" style="left:62%"></span>
      <span class="ic cart" style="left:14%"></span>
    </div>
    <div class="cur" id="c1">➤</div>
  </div>
  <div class="pane"><div class="tag">B</div>
    <div class="bar-top">
      <span class="ic magnifier" style="left:10%"></span>
      <span class="ic cart" style="right:10%;left:auto"></span>
    </div>
    <div class="cur" id="c2">➤</div>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.bar-top{position:absolute;top:0;left:0;right:0;height:24%;border-bottom:1px solid var(--line);background:var(--bg)}
.ic{position:absolute;top:50%;transform:translateY(-50%);width:16px;height:16px}
.magnifier{border:2px solid var(--muted);border-radius:50%}
.magnifier::after{content:'';position:absolute;width:7px;height:2px;background:var(--muted);right:-5px;bottom:-1px;transform:rotate(45deg);border-radius:1px}
.cart{background:var(--accent-2);border-radius:2px;clip-path:polygon(10% 0,90% 0,80% 100%,20% 100%)}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted);z-index:3}
.cur{position:absolute;font-size:16px;transform:rotate(-45deg);color:var(--fg);left:50%;top:70%}
#c1{animation:hunt 3s ease-in-out infinite}
#c2{animation:direct 1.1s ease-out infinite}
@keyframes hunt{0%{left:46%;top:70%}20%{left:66%;top:12%}40%{left:60%;top:60%}55%{left:18%;top:12%}75%{left:78%;top:12%}100%{left:78%;top:12%}}
@keyframes direct{0%{left:46%;top:70%}80%{left:88%;top:12%}100%{left:88%;top:12%}}