body { 
      margin: 0; 
      background-color: #111;
      overflow: hidden;  
    } 
    
    canvas { 
      display: block 
    } 

    #3d-graph {
      position: fixed;
      inset: 0
    }

    .graph-settings {
        position: absolute; top: 1rem; right: 1rem;
        font-size: 0.9rem;
    }   
    .graph-settings form {
        background:#fff; border:1px solid #ccc; padding:0.5rem 0.75rem;
        display:none;             /* toggled by JS */
    }
    .graph-settings input { 
        margin-right:0.3em; 
    }

    /* SEARCH OVERLAY */

    #search-overlay{
      position: fixed;          /* <— key: tie to viewport, not document */
      top:2rem;
      left:10rem;
      transform: translateX(-50%);
      width: 240px;
      z-index: 100;             /* above canvas */
      font-family: system-ui, sans-serif;
    }

    #group-search{
      width: 100%;
      padding: 6px 8px;
      border-radius: 6px;
      border: 1px solid #777;
      background: #111;
      color: #fff;
      box-sizing: border-box;
    }

    #group-results{
      list-style:inside;
      margin:4px 0 0;
      padding:0;
      border:1px solid #555;
      border-radius:6px;
      max-height:240px;
      overflow-y:auto;
      background:#1a1a1acc;     /* translucent */
      backdrop-filter:blur(6px);
      display:none;      
    }

    #group-results li{
      padding:.4rem .6rem;
      cursor:pointer;
      color:#ddd;
      white-space:nowrap;
    }

    #group-results li:hover{
      background:#333;
      color:#fff;
    }