html,body{
margin:0;
height:100%;
overflow:hidden;
background:#000;
font-family:Segoe UI,Arial;
}
#viewer,canvas{
width:100%;
height:100%;
display:block;
}
#panel{
position:fixed;
top:20px;
left:50%;
transform:translateX(-50%);
z-index:5;
display:flex;
gap:10px;
align-items:center;
padding:10px 18px;
border-radius:40px;
background:rgba(0,30,60,.45);
backdrop-filter:blur(15px);
color:white;
transition:.5s;
}
.brand{
font-weight:bold;
margin-right:10px;
}
button{
border:0;
border-radius:50%;
width:42px;
height:42px;
cursor:pointer;
color:white;
background:linear-gradient(135deg,#0077ff,#00d9ff);
}
#title{
position:fixed;
bottom:25px;
left:50%;
transform:translateX(-50%);
z-index:5;
text-align:center;
color:white;
padding:12px 30px;
border-radius:25px;
background:rgba(0,0,0,.35);
backdrop-filter:blur(8px);
}
#title span{
font-size:13px;
opacity:.8;
}
.cinema #panel,.cinema #title{
opacity:0;
}