html {
  scroll-behavior: smooth;
}

::selection {
  background: #6d5efc;
  color: white;
}

/* mockup card chrome resets so pasted-in platform markup can't inherit page font weirdness */
.mockup-card, .mockup-card * {
  box-sizing: border-box;
}

.mockup-card {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.mockup-scale-wrap {
  transform-origin: top left;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #6d5efc;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #6d5efc;
  cursor: pointer;
  border: 2px solid white;
}

.card-copy-toast {
  animation: fadeInOut 1.6s ease forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(4px); }
  15% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; }
  100% { opacity: 0; }
}