.wkdots {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.wkdots i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surf2);
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 14px;
  color: #f5c030;
}
.wkdots i.on {
  background: var(--accent);
  border-color: #ff6a7a;
  box-shadow: 0 0 10px rgba(224, 36, 58, 0.6);
}
.wkdots i:last-child {
  border-color: #f5c030;
}
.grid.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.dbox.wk > svg {
  filter: hue-rotate(250deg) saturate(1.4) drop-shadow(0 0 20px #9b5cff);
}
.chestc.wk {
  background: linear-gradient(180deg, #b79cff, #7a3fc8);
  color: #fff;
  box-shadow: 0 0 14px rgba(155, 92, 255, 0.9);
}