스테이징

<div class="split">
  <div class="panel bad">
    <span class="tag">No staging</span>
    <i class="s s1"></i><i class="s s2"></i><i class="s s3"></i><i class="s s4"></i>
  </div>
  <div class="panel good">
    <span class="tag">Staging</span>
    <i class="s g1"></i><i class="s g2"></i><i class="s g3"></i>
    <i class="hero"></i>
  </div>
</div>

.split{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:3%}
.panel{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.tag{position:absolute;top:6%;left:0;right:0;text-align:center;font:700 10px/1 ui-monospace,monospace;color:var(--muted);letter-spacing:.04em;z-index:2}
.bad .s{position:absolute;width:20%;aspect-ratio:1;border-radius:50%;animation:pulse 1.3s ease-in-out infinite}
.bad .s1{left:14%;top:22%;background:var(--accent)}
.bad .s2{left:62%;top:18%;background:var(--accent-2);animation-delay:.2s}
.bad .s3{left:20%;top:62%;background:var(--accent-3);animation-delay:.4s}
.bad .s4{left:60%;top:60%;background:var(--accent);animation-delay:.6s}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.good .s{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;background:var(--muted);opacity:.22}
.good .g1{left:10%;top:16%}
.good .g2{left:70%;top:20%}
.good .g3{left:14%;top:66%}
.good .hero{position:absolute;left:50%;top:55%;width:30%;aspect-ratio:1;margin:-15% 0 0 -15%;border-radius:50%;
  background:var(--accent-2);box-shadow:0 0 30px 8px rgba(242,92,138,.4);animation:pulse 1.3s ease-in-out infinite}