html, body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Gradient-blob background */
.blob {
  position: fixed;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}
.blob-purple {
  top: -10%;
  left: -10%;
  width: 32rem;
  height: 32rem;
  background: #7C3AED;
}
.blob-cyan {
  bottom: -15%;
  right: -10%;
  width: 32rem;
  height: 32rem;
  background: #22D3EE;
}
.dark .blob {
  opacity: 0.22;
}

/* Tone pill selector */
.tone-pill {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid rgb(229 231 235);
  background: rgba(255, 255, 255, 0.7);
  color: rgb(75 85 99);
  transition: all 0.15s ease;
  cursor: pointer;
}
.dark .tone-pill {
  border-color: rgb(55 65 81);
  background: rgba(17, 24, 39, 0.7);
  color: rgb(209 213 219);
}
.tone-pill:hover {
  border-color: #7C3AED;
}
.tone-pill.tone-pill-active,
.tone-pill.tone-pill-active:hover,
.dark .tone-pill.tone-pill-active,
.dark .tone-pill.tone-pill-active:hover {
  border-color: transparent;
  background: linear-gradient(to right, #7C3AED, #22D3EE);
  color: #fff;
}