*{
box-sizing:border-box
}

body{
margin:0;
background:#0a0a0a;
font-family:Arial;
color:white;
overflow:hidden;

/* layout principal */
display:flex;
flex-direction:column;
height:100vh;
}

/* TOP BAR */

.topbar{
position:sticky;
top:0;
background:#111;
display:flex;
align-items:center;
justify-content:space-between;
padding:6px 10px;
border-bottom:1px solid #222;
flex-wrap:wrap;
gap:6px;
z-index:1000;

flex:0 0 auto;
}

.controls{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.controls span{
cursor:pointer;
}

.controls span:hover{
color:#00ffd0;
}

/* CONTAINER */

.container{
flex:1;
display:flex;
overflow:hidden;
min-height:0;
}

/* FRAME */

.frame{
flex:1;
position:relative;
background:#111;
overflow:hidden;
}

/* IFRAME */

.frame iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:none;
background:#111;
}

/* RESIZER */

.resizer{
width:6px;
cursor:col-resize;
background:#222;
flex:0 0 6px;
}

.resizer:hover{
background:#555;
}

/* MOBILE */

@media (max-width:768px){

.container{
flex-direction:column;
}

.frame{
height:50%;
}

.resizer{
height:6px;
width:100%;
cursor:row-resize;
}

}