.kg-open-painter {
  left: auto;
  right: clamp(10px, 2vw, 22px);
  bottom: clamp(10px, 1.6vw, 18px);
  z-index: 6;
  min-width: clamp(150px, 16vw, 210px);
  padding: 12px 24px 13px;
  border: 3px solid #3d210e;
  border-radius: 9px 14px 8px 12px;
  background:
    linear-gradient(96deg, rgba(255, 255, 255, .08), transparent 20% 72%, rgba(0, 0, 0, .14)),
    repeating-linear-gradient(2deg, #9a5724 0 4px, #87461d 5px 8px, #a96129 9px 13px);
  color: #fff2bd;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing: .02em;
  text-shadow: 0 2px 1px #321807, 0 0 5px rgba(255, 180, 55, .45);
  box-shadow:
    inset 0 0 0 2px rgba(255, 202, 99, .18),
    inset 0 -8px 13px rgba(45, 18, 4, .28),
    0 7px 7px rgba(24, 10, 2, .38);
  transform: rotate(-2deg);
  transform-origin: right bottom;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}

.kg-open-painter::before,
.kg-open-painter::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f7d47a 0 18%, #9d6428 35% 62%, #3d210d 68%);
  box-shadow: 0 1px 2px #2d1609;
}

.kg-open-painter::before { left: 9px; }
.kg-open-painter::after { right: 9px; }

.kg-open-painter:hover,
.kg-open-painter:focus-visible {
  filter: brightness(1.13);
  transform: rotate(-1deg) translateY(-3px);
}

.kg-open-painter:active {
  transform: rotate(-2deg) translateY(1px);
}

@media (max-width: 600px) {
  .kg-open-painter {
    left: auto;
    right: 10px;
    bottom: 10px;
    min-width: 145px;
    max-width: 52vw;
    padding: 11px 19px 12px;
    font-size: 13px;
  }
}