Device mockup

<div class="stage"><div class="device"><div class="speaker"></div><div class="glass"><div class="ui"><div class="ui-head"></div><div class="ui-card"></div><div class="ui-line"></div><div class="ui-line short"></div><div class="ui-card small"></div></div></div><div class="home"></div></div>
  <div class="caption">DEVICE MOCKUP <span>screen inside frame</span></div>
</div>

.stage{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 70%,var(--line),var(--bg) 62%)}
.device{position:absolute;left:50%;top:50%;height:min(86%,330px);aspect-ratio:.58;transform:translate(-50%,-50%) rotate(-5deg);border:5px solid #333;border-radius:clamp(20px,5vw,38px);background:#222;box-shadow:0 14px 28px #0003;animation:tilt 4s ease-in-out infinite alternate}
.glass{position:absolute;inset:6px;border-radius:inherit;overflow:hidden;background:var(--bg)}
.speaker{position:absolute;z-index:2;left:40%;top:4px;width:20%;height:5px;border-radius:5px;background:#151515}
.home{position:absolute;z-index:2;left:45%;bottom:4px;width:10%;height:3px;border-radius:4px;background:#eee}
.ui{position:absolute;inset:10% 10%;animation:scroll 3.8s ease-in-out infinite alternate}
.ui-head{height:11%;border-bottom:1px solid var(--line);margin-bottom:9%;background:linear-gradient(90deg,var(--accent) 0 28%,transparent 28%)}
.ui-card{height:28%;border:1px solid var(--line);background:var(--surface);margin-bottom:8%;position:relative}
.ui-card:after{content:"";position:absolute;left:8%;right:25%;top:36%;height:3px;background:var(--line);box-shadow:0 11px 0 var(--line)}
.ui-line{height:3px;width:90%;margin:8% 0;background:var(--line)}.ui-line.short{width:62%}
.ui-card.small{height:21%}
.caption{position:absolute;left:12px;bottom:12px;padding:5px 8px;background:var(--surface);border:1px solid var(--line);font:9px ui-monospace,monospace}
.caption span{margin-left:7px;color:var(--muted)}
@keyframes tilt{to{transform:translate(-50%,-50%) rotate(5deg)}}
@keyframes scroll{to{transform:translateY(-13%)}}