.dm-button {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 17px;
  border: 1px solid #f4ead966;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 8px 24px #07100d38;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.dm-button::before {
  content: "↗";
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid #ffffff70;
  border-radius: 50%;
  font-size: .75rem;
}

.dm-button:hover,
.dm-button:focus-visible {
  background: #28453a;
  box-shadow: 0 12px 30px #07100d52;
  transform: translateY(-3px);
}

@media (max-width: 800px) {
  .dm-button {
    left: 14px;
    bottom: 14px;
    padding: 10px 14px;
    font-size: .76rem;
  }

  .dm-button::before {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-button {
    transition: none;
  }
}