.vp_box{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:center;
  align-items:center;
  width:100%;
  margin:.5rem 0 .6rem;
  text-align:center;
}
.vp_pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .9rem; min-height:30px; border-radius:8px;
  background:#F8FAFF; line-height:1; white-space:nowrap;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
  transform-origin:center; will-change:transform; transform:translateZ(0);
}

@media (hover:hover) and (pointer:fine){
  .vp_pill:hover{
    transform:scale(1.08);
    background:#E2BB84;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    z-index:1;
  }
}
.vp_pill:focus-visible{
  outline:none;
  transform:scale(1.08);
  box-shadow:0 0 0 3px #cfe3ff;
}

.vp_box{ gap:.6rem; }

@media (prefers-reduced-motion: reduce){
  .vp_pill{ transition:none }
  .vp_pill:hover,.vp_pill:focus-visible{ transform:none }
}
.vp_box .vp_pill{
  font-size:1.15rem;
  line-height:1;
}