리믹스·듀엣

<div class="s-demo"><div class="rd"><div class="rd-origin"><small>ORIGINAL</small><b>ONE IDEA</b><div class="rd-shape"></div></div><div class="rd-join">+</div><div class="rd-responses"><div><small>REACTION</small><b>WHY?</b></div><div><small>EXPLAIN</small><b>HOW.</b></div></div></div></div>

.s-demo{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(8px,3vmin,20px);font:700 clamp(10px,max(2.8vmin,1vw),16px)/1.25 sans-serif;color:var(--fg)}.s-demo *{box-sizing:border-box}@media(min-width:600px){.s-demo>div{transform:scale(1.4)}}.rd{display:flex;align-items:center;gap:clamp(6px,2vmin,14px);width:min(91vw,540px)}.rd-origin{width:38%;height:clamp(105px,35vmin,205px);padding:clamp(8px,2vmin,14px);background:var(--fg);color:var(--bg);display:flex;flex-direction:column;justify-content:space-between}.rd-origin small,.rd-responses small{font-size:clamp(10px,max(1.7vmin,1vw),12px)}.rd-origin b{font-size:clamp(14px,4vmin,26px)}.rd-shape{width:60%;height:18%;background:var(--accent-2);transform:rotate(-7deg)}.rd-join{font-size:clamp(20px,6vmin,38px);color:var(--accent)}.rd-responses{flex:1;display:grid;gap:clamp(5px,1.8vmin,12px)}.rd-responses>div{height:clamp(48px,15vmin,94px);display:flex;align-items:center;justify-content:space-between;padding:clamp(6px,2vmin,14px);border:2px solid var(--line);background:var(--surface);transform:translateX(8px);animation:rdbranch 6s infinite}.rd-responses>div+div{animation-delay:1.2s;border-color:var(--accent)}.rd-responses b{font-size:clamp(13px,3.4vmin,22px);color:var(--accent)}@keyframes rdbranch{0%,12%{transform:translateX(8px);box-shadow:none}25%,78%{transform:none;box-shadow:5px 5px 0 var(--line)}95%,100%{transform:translateX(8px);box-shadow:none}}