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

body {
  background: #fff;
  color: #0f0f0f;
}

.hide {
  display: none !important;
}

.fade-in {
  animation: fade 0.25s ease;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

input[type="range"] {
  accent-color: #0f0f0f;
}

select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f0f0f' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 1.8rem;
}

.scroll-snug::-webkit-scrollbar {
  display: none;
}