body{
  margin:0;
  overflow:hidden;
  background:radial-gradient(circle,#050814,#000000);
  font-family:Arial,sans-serif;
}

canvas{ position:fixed; top:0; left:0; }

/* TOOLTIP */
#tooltip{
  position:absolute;
  padding:6px 10px;
  background:rgba(0,0,0,0.85);
  border:1px solid rgba(0,255,200,0.3);
  color:#00ffd5;
  font-size:12px;
  border-radius:6px;
  pointer-events:none;
  opacity:0;
  transition:0.1s;
  white-space:nowrap;
  z-index:20;
}

/* PANEL */
#infoPanel{
  position:absolute;
  right:-320px;
  top:50%;
  transform:translateY(-50%);
  width:280px;
  background:rgba(0,0,0,0.85);
  border:1px solid rgba(0,255,200,0.3);
  color:#00ffd5;
  padding:15px;
  border-radius:10px;
  transition:0.4s ease;
  z-index:30;
  backdrop-filter: blur(10px);
}

#infoPanel.active{ right:20px; }

#panelTitle{
  font-size:18px;
  font-weight:bold;
  margin-bottom:10px;
}

#panelBody{
  font-size:13px;
  line-height:1.6;
  color:#bffcff;
}