Cognitive Load

<div class="stage">
  <div class="pane">
    <div class="grid g16" id="g16"></div>
    <div class="gauge"><div class="needle n1"></div></div>
  </div>
  <div class="pane">
    <div class="grid g5" id="g5"></div>
    <div class="gauge"><div class="needle n2"></div></div>
  </div>
</div>

.stage{width:94%;height:90%;display:flex;gap:6%}
.pane{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:8px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.grid{display:grid;gap:5px}
.g16{grid-template-columns:repeat(4,1fr)}
.g16 div{width:clamp(14px,4vmin,32px);height:clamp(14px,4vmin,32px);border-radius:6px;background:var(--accent-2);animation:flash 1s ease-in-out infinite}
.g5{grid-template-columns:repeat(5,1fr)}
.g5 div{width:clamp(14px,4vmin,32px);height:clamp(14px,4vmin,32px);border-radius:6px;background:var(--accent-3);opacity:.85}
@keyframes flash{0%,100%{opacity:.6}50%{opacity:1}}
.gauge{position:relative;width:82%;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--accent-3),#f5c542,var(--accent-2))}
.needle{position:absolute;top:-4px;width:2px;height:16px;background:var(--fg)}
.n1{left:82%}
.n2{left:18%}

const g16 = document.getElementById('g16');
for (let i = 0; i < 16; i++) g16.appendChild(document.createElement('div'));
const g5 = document.getElementById('g5');
for (let i = 0; i < 5; i++) g5.appendChild(document.createElement('div'));