힉의 법칙

<div class="stage">
  <div class="pane"><div class="tag">A · 2</div>
    <div class="grid g2"><button></button><button class="pick" id="p1"></button></div>
    <div class="cur" id="c1">➤</div>
    <div class="bar"><div class="fill fa"></div></div>
  </div>
  <div class="pane"><div class="tag">B · 12</div>
    <div class="grid g12" id="grid12"></div>
    <div class="cur" id="c2">➤</div>
    <div class="bar"><div class="fill fb"></div></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;padding:26px 10px 22px}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.grid{display:grid;gap:6px;height:100%}
.g2{grid-template-columns:1fr 1fr}
.g12{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}
.grid button{border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.pick,#grid12 button:nth-child(9){background:var(--accent-3);border-color:var(--accent-3)}
.cur{position:absolute;font-size:14px;color:var(--fg);transform:rotate(-45deg)}
.bar{position:absolute;left:10px;right:10px;bottom:6px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.fill{height:100%;background:var(--accent);width:0}
.fa{animation:grow 1s cubic-bezier(.3,0,.6,1) infinite}
.fb{animation:grow 2.8s cubic-bezier(.3,0,.6,1) infinite}
@keyframes grow{0%{width:0}75%{width:100%}100%{width:100%}}
#c1{animation:c1 1s ease-in-out infinite}
#c2{animation:c2 2.8s steps(7) infinite}
@keyframes c1{0%{left:14%;top:80%}70%{left:72%;top:40%}100%{left:72%;top:40%}}
@keyframes c2{0%{left:10%;top:85%}14%{left:20%;top:20%}28%{left:45%;top:55%}42%{left:70%;top:25%}56%{left:30%;top:70%}70%{left:60%;top:50%}85%{left:58%;top:52%}100%{left:58%;top:52%}}

const g = document.getElementById('grid12');
for (let i = 0; i < 12; i++) g.appendChild(document.createElement('button'));