body{
margin:0;
overflow:hidden;
background:black;
font-family:Orbitron;
}

#space{
position:fixed;
width:100%;
height:100%;
z-index:0;
}

#cesiumContainer{
position:absolute;
width:100%;
height:100%;
z-index:1;
}

.hud{
position:absolute;
width:100%;
height:100%;
z-index:5;
pointer-events:none;
}

.nav{
position:absolute;
top:20px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:40px;
background:rgba(0,0,0,.3);
padding:12px 40px;
backdrop-filter:blur(12px);
border:1px solid #00f0ff;
pointer-events:auto;
}

.logo{color:#00f0ff;font-size:22px;}

.menu .btn{
background:transparent;
border:1px solid #00f0ff;
color:white;
padding:8px 22px;
cursor:pointer;
}

.panel-left{
position:absolute;
bottom:40px;
left:40px;
display:flex;
flex-direction:column;
gap:15px;
}

.glass{
background:rgba(0,0,0,.4);
border:1px solid #00f0ff;
padding:18px 30px;
color:white;
backdrop-filter:blur(12px);
}

.red{color:red;font-size:22px;}

.panel-right{
position:absolute;
bottom:40px;
right:40px;
display:flex;
flex-direction:column;
gap:15px;
pointer-events:auto;
}

.circle{
width:70px;
height:70px;
border-radius:50%;
background:transparent;
border:2px solid #00f0ff;
animation:spin 6s linear infinite;
}

@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}