회상보다 재인

<div class="stage">
  <div class="pane"><div class="tag">A</div>
    <div class="inp" id="typed"></div>
    <div class="caret" id="caret"></div>
  </div>
  <div class="pane"><div class="tag">B</div>
    <div class="opts"><span></span><span class="pick"></span><span></span></div>
    <div class="cur" id="c2">&#10148;</div>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.inp{min-width:60%;min-height:18px;border-bottom:2px solid var(--line);font:700 13px/1 monospace;color:var(--fg)}
.opts{display:flex;gap:8px}
.opts span{width:34px;height:22px;border-radius:6px;border:1px solid var(--line);background:var(--bg)}
.opts .pick{background:var(--accent-3);border-color:var(--accent-3)}
.cur{position:absolute;font-size:14px;color:var(--fg);transform:rotate(-45deg);animation:go 1.2s ease-out infinite}
@keyframes go{0%{left:20%;top:80%}80%,100%{left:50%;top:52%}}

const el = document.getElementById('typed');
const words = ['co', 'com', 'comm', '', 'crt', 'crea', ''];
let i = 0;
setInterval(() => { el.textContent = words[i % words.length]; i++; }, 350);