Picture-in-picture

<div class="stage"><div class="main"><div class="sun"></div><div class="mountain"></div><div class="chart"><i></i><i></i><i></i><i></i></div><span>MAIN VIEW</span></div>
  <div class="inset" id="inset"><div class="head"></div><div class="body"></div><b>INSET</b></div>
</div>

.stage{position:absolute;inset:0;overflow:hidden;background:#b9d0d1;touch-action:none}
.main{position:absolute;inset:0;background:linear-gradient(180deg,#a8cbd0 0 55%,#788b75 55%);overflow:hidden}
.sun{position:absolute;left:72%;top:14%;width:11%;aspect-ratio:1;border-radius:50%;background:#f2e3ba}
.mountain{position:absolute;left:15%;right:5%;bottom:18%;height:55%;clip-path:polygon(0 100%,42% 0,100% 100%);background:#61786f}
.chart{position:absolute;left:10%;bottom:17%;display:flex;align-items:end;gap:5px;height:30%;width:30%;padding:8px;border:1px solid #fff8}
.chart i{flex:1;background:#fff9;height:40%}.chart i:nth-child(2){height:65%}.chart i:nth-child(3){height:52%}.chart i:nth-child(4){height:88%}
.main span{position:absolute;left:12px;top:12px;padding:4px 6px;background:#fff9;color:#1f2929;font:9px ui-monospace,monospace}
.inset{position:absolute;left:8%;top:12%;width:27%;height:34%;border:2px solid #fff;border-radius:8px;overflow:hidden;background:var(--surface);box-shadow:0 5px 18px #0004;animation:travel 4s ease-in-out infinite alternate;touch-action:none;cursor:grab}
.head{position:absolute;left:37%;top:14%;width:27%;height:34%;border-radius:50%;background:#d3b49b}
.body{position:absolute;left:22%;right:22%;bottom:-12%;height:54%;border-radius:45% 45% 0 0;background:#4e6470}
.inset b{position:absolute;left:6px;bottom:5px;font:8px ui-monospace,monospace;color:#fff}
@keyframes travel{0%,20%{left:7%;top:12%}70%,100%{left:66%;top:56%}}

const inset=document.getElementById('inset');let drag=null;
inset.addEventListener('pointerdown',e=>{drag={x:e.clientX-inset.offsetLeft,y:e.clientY-inset.offsetTop};inset.setPointerCapture(e.pointerId);inset.style.animation='none'});
inset.addEventListener('pointermove',e=>{if(!drag)return;inset.style.left=(e.clientX-drag.x)+'px';inset.style.top=(e.clientY-drag.y)+'px'});
inset.addEventListener('pointerup',()=>drag=null);