#navbar {
width: 100vw;
height: 56px;
background: linear-gradient(90deg, #a080ff 0%, #6c4ecb 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 20;
box-shadow: 0 2px 16px 0 rgba(80,40,180,0.10);
}
.navbar-title {
color: #fff;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 1.45em;
font-weight: 600;
letter-spacing: 0.04em;
text-shadow: 0 2px 8px rgba(80,40,180,0.10);
}
#info-icon {
position: absolute;
right: 36px;
top: 50%;
transform: translateY(-50%);
z-index: 21;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: none;
box-shadow: 0 2px 10px 0 rgba(160,128,255,0.10);
transition: box-shadow 0.18s, background 0.18s, transform 0.13s;
text-decoration: none;
cursor: pointer;
outline: none;
}
#info-icon:hover {
background: rgba(160,128,255,0.13);
box-shadow: 0 6px 18px 0 rgba(160,128,255,0.18);
transform: translateY(-50%) scale(1.08);
}
#info-icon svg {
display: block;
}
#canvas-container {
position: relative;
width: 100vw;
height: 100vh;
top: 0;
}
#subspace-canvas {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: block;
z-index: 1;
}
#info-icon {
position: absolute;
top: 28px;
right: 36px;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: none;
box-shadow: 0 2px 10px 0 rgba(160,128,255,0.10);
transition: box-shadow 0.18s, background 0.18s, transform 0.13s;
text-decoration: none;
cursor: pointer;
outline: none;
}
#info-icon:hover {
background: rgba(160,128,255,0.13);
box-shadow: 0 6px 18px 0 rgba(160,128,255,0.18);
transform: scale(1.08);
}
#info-icon svg {
display: block;
}