목업

<div class="stage">
  <div class="frame">
    <div class="nav"><span class="dot"></span><span class="tab"></span><span class="tab"></span></div>
    <div class="hero"></div>
    <div class="lines">
      <div class="ln w1"></div>
      <div class="ln w2"></div>
      <div class="ln w3"></div>
    </div>
    <button class="cta">Continue</button>
    <div class="cur" id="cur">&#10148;</div>
    <div class="bubble">static</div>
  </div>
</div>

.stage{width:76%;height:92%;max-width:320px}
.frame{position:relative;width:100%;height:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  padding:7% 7%;box-sizing:border-box;display:flex;flex-direction:column;gap:5%;overflow:hidden}
.nav{height:9%;display:flex;align-items:center;gap:6px;box-shadow:inset 0 -1px 0 var(--line)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.tab{width:16%;height:40%;border-radius:3px;background:var(--muted);opacity:.35}
.hero{flex:1;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.lines{display:flex;flex-direction:column;gap:8%}
.ln{height:11%;border-radius:3px;background:var(--fg);opacity:.6}
.ln.w1{width:100%}.ln.w2{width:82%}.ln.w3{width:56%}
.cta{height:14%;border-radius:20px;background:var(--accent);border:none;color:#fff;font:700 12px/1 sans-serif}
.cur{position:absolute;font-size:16px;color:var(--fg);transform:rotate(-45deg);animation:curmove 3.2s ease-in-out infinite;z-index:3}
@keyframes curmove{0%{left:8%;top:92%}55%{left:46%;top:83%}72%{left:46%;top:83%}100%{left:46%;top:83%}}
.bubble{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);background:var(--fg);color:var(--bg);
  font:700 10px/1 monospace;letter-spacing:.04em;padding:5px 9px;border-radius:6px;opacity:0;white-space:nowrap;
  animation:bub 3.2s ease-in-out infinite;z-index:3}
@keyframes bub{0%{opacity:0}58%{opacity:0}68%{opacity:1}90%{opacity:1}100%{opacity:0}}