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

	*{box-sizing:border-box}
	body{
	  margin:0;
	  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;
	}

	.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;
	}

	.homeBtn{
	  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);
	  color:#2dff00;
	  text-decoration:none;
	  transition:all .15s ease;
	}
	.homeBtn: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(340px, 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); }

	.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;
	}

	.wrap{
	  padding:0 18px 18px;
	  height: calc(100vh - 88px);
	}
	.panel{
	  height: 100%;
	  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{
	  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: 420px;
	  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; }

	.badge{
	  display:inline-flex;
	  gap:6px;
	  align-items:center;
	  font-size:11px;
	  padding:4px 8px;
	  border-radius:999px;
	  border:1px solid rgba(255,255,255,.14);
	  background:rgba(255,255,255,.06);
	  color:rgba(255,255,255,.82);
	  margin-top:8px;
	}

	.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;
	}

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