html,body { margin:0; padding:0; height:100%; font-family: system-ui, sans-serif; color:#fff; background:#000; }

#hud { 
  position: fixed; top:10px; left:10px; padding:12px 15px; 
  background:#111a; backdrop-filter: blur(8px); border-radius:8px; 
  border:1px solid #333; color:#fff; min-width: 200px; z-index: 100;
}

#controls {
  position: fixed; bottom:10px; left:10px; padding:10px 15px;
  background:#111a; backdrop-filter: blur(8px); border-radius:8px;
  border:1px solid #333; color:#fff; font-size: 12px; z-index: 100;
}

#controls ul { margin: 5px 0; padding-left: 20px; }
#controls li { margin: 2px 0; }

#legend-container {
  position: fixed; top:10px; right:10px; padding:10px 15px;
  background:#111a; backdrop-filter: blur(8px); border-radius:8px;
  border:1px solid #333; color:#fff; font-size: 12px; z-index: 100;
  max-width: 250px;
}

#ai-panel {
  position: fixed; bottom:10px; right:10px; padding:12px 15px;
  background:#111a; backdrop-filter: blur(8px); border-radius:8px;
  border:1px solid #333; color:#fff; width: 300px; z-index: 100;
}

#ai-input {
  width: 100%; height: 60px; margin: 8px 0; padding: 8px;
  background: #222; border: 1px solid #444; color: #fff;
  border-radius: 4px; font-family: inherit; font-size: 12px;
  resize: vertical;
}

#ai-submit {
  background: #0066cc; color: white; border: none; padding: 8px 16px;
  border-radius: 4px; cursor: pointer; font-size: 12px;
}

#ai-submit:hover { background: #0052a3; }

#ai-response {
  margin-top: 10px; padding: 8px; background: #222; border-radius: 4px;
  font-size: 12px; max-height: 200px; overflow-y: auto; 
  white-space: pre-wrap; display: none;
}

#graph { width:100vw; height:100vh; }

.node { cursor: pointer; }
.node:hover { stroke-width: 2px; }

h3, h4 { margin: 0 0 8px 0; font-size: 14px; }