body { font-family: Arial, sans-serif; display:flex; flex-direction:column; align-items:center; padding:20px; }

    #frame { 
	position:relative;
	max-width: 90vw; 
	max-height: 70vh; 
	border:1px solid #ddd; 
	display:flex; 
	align-items:center; 
	justify-content:center; 
	background:#f8f8f8; 
	overflow:hidden;
    }

    .nav {
	position:absolute;
	top:0;
	height:100%;
	width:25%;
	background:transparent;
	border:none;
	padding:0;
	margin:0;
	cursor:pointer;
	z-index:5;

	display:flex;
	align-items:center;
	color:rgba(255,206,153,0.55); /* subtle arrow */
	font-size:24px;
	line-height:1;
    }

    .nav:hover {
	color: rgba(255,206,153,0.75);
    }

    .nav-left { 
	left:0; 
	justify-content:flex-start;
	padding-left:10px;
    }

    .nav-right { 
	right:0; 
	justify-content:flex-end;
	padding-right:10px;
    }
	

    img { max-width:100%; max-height:100%; object-fit:contain; display:block; }

    .controls { 
	width:100%;
	max-margin:90vw;
	margin-top:12px; 
	
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
     }

    .arrow {
	font-size:14px;
	padding:6px 10px;
	min-width:40px;
    }
    
    .topbar { width:100%; display:flex; justify-content:flex-start; }