:root{
    --bg:#0b0f14;
    --panel:rgba(255,255,255,.06);
    --stroke:rgba(255,255,255,.12);
    --text:#e5e7eb;
    --muted:#94a3b8;
    --accent:#60a5fa;
    --good:#2dff00;
  }

  *{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(96,165,250,.12), transparent 60%),
    radial-gradient(1200px 800px at 90% 10%, rgba(34,197,94,.10), transparent 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(234,179,8,.08), transparent 60%),
    var(--bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  overflow:hidden;
}

.wrap{
  flex:1;
  padding:0 18px 18px;
  display:flex;
}

  .header{
    padding:16px 18px 10px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }

  .leftHead{
    display:flex;
    align-items:center;
    gap:12px;
    min-width: 280px;
  }

  .navBtns{
    display:flex;
    gap:10px;
    align-items:center;
  }

  .homeBtn, .statsBtn{
    width:40px;height:40px;
    display:inline-flex;
    align-items:center;justify-content:center;
    border-radius:999px;
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.06);
    text-decoration:none;
    transition:all .15s ease;
  }
  .homeBtn{ color:var(--good); }
  .statsBtn{ color:var(--good); }
  .homeBtn:hover, .statsBtn:hover{
    background:rgba(96,165,250,.22);
    border-color:rgba(96,165,250,.55);
    transform:translateY(-2px);
  }

  h1{ margin:0; font-size:20px; letter-spacing:.2px; }
  .sub{ margin-top:6px; color:var(--muted); font-size:12px; max-width: 900px; }

  .rightHead{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .searchWrap{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:14px;
    border:1px solid var(--stroke);
    background:rgba(0,0,0,.22);
    backdrop-filter: blur(6px);
  }
  .searchWrap svg{ opacity:.9; }
  #q{
    width:min(320px, 62vw);
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    font-size:14px;
  }
  #clearBtn{
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.06);
    color:var(--text);
    border-radius:10px;
    padding:6px 10px;
    cursor:pointer;
  }
  #clearBtn:hover{ background:rgba(255,255,255,.10); }

  .controls{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    padding:8px 10px;
    border-radius:14px;
    border:1px solid var(--stroke);
    background:rgba(0,0,0,.18);
    backdrop-filter: blur(6px);
  }
  .controls label{
    font-size:12px;
    color:var(--muted);
    margin-right:4px;
  }
.controls select{
  background: rgba(0,0,0,.35);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.16);
}
.controls select:focus{
  border-color: rgba(96,165,250,.55);
  outline: none;
}


  .hintPills{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .pill{
    font-size:12px;
    color:var(--muted);
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.04);
    border-radius:999px;
    padding:6px 10px;
    user-select:none;
  }


.panel{
  flex:1;
  height:auto;     /* IMPORTANT */
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  overflow:hidden;
  position:relative;
}

#viz{
  position:absolute;
  inset:0;
}
  canvas{
    display:block;
    width:100%;
    height:100%;
  }

  .tooltip{
    position:fixed;
    pointer-events:none;
    display:none;
    background:rgba(17,24,39,.96);
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    padding:10px 12px;
    max-width: 440px;
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
  }
  .tooltip b{ display:block; font-size:13px; }
  .tooltip .meta{ margin-top:3px; color:var(--muted); font-size:12px; }
  .tooltip .desc{ margin-top:8px; font-size:12px; line-height:1.35; opacity:.92; }
  .tooltip .kbd{ margin-top:8px; color:rgba(255,255,255,.75); font-size:11px; }

  .legend{
    position:absolute;
    left:12px;
    bottom:12px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    pointer-events:none;
  }
  .legend .chip{
    pointer-events:none;
    font-size:11px;
    color:rgba(255,255,255,.78);
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.18);
    border-radius:999px;
    padding:5px 9px;
  }

  .status{
    position:absolute;
    right:12px;
    bottom:12px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
  }
  .status .chip{
    font-size:11px;
    color:rgba(255,255,255,.82);
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.18);
    border-radius:999px;
    padding:6px 10px;
  }

  @media (max-width: 720px){
    .wrap{ height: calc(100vh - 132px); }
    #q{ width: min(240px, 70vw); }
  }