@font-face {
  font-family: "Interface Sans";
  src: url("./font.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "Interface Sans", "Segoe UI", system-ui, sans-serif;
  background: #f4efe5;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: #f4efe5;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit;
}

.prototype-note {
  color: var(--muted);
  margin: 15px 0 -17px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.rf .field.is-invalid {
  border-color: #d84a3a;
  box-shadow: 3px 3px 0 rgb(216 74 58 / 20%);
}

.rf .confetti {
  animation: prototype-confetti 900ms cubic-bezier(.2,.8,.3,1) forwards;
}

@keyframes prototype-confetti {
  to {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) rotate(520deg);
  }
}