.tell { max-width: 36rem; margin-inline: auto; }
.tell h1 { margin-block: 0.75rem 0.25rem; }

.tell__card {
  display: grid;
  gap: 0.6rem;
  margin-block-start: 1.75rem;
  padding: 1.25rem clamp(1rem, 4vw, 1.75rem) 1.5rem;
  background: var(--paper);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  rotate: -0.4deg;
}
.tell fieldset { border: 0; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.35rem; }
.tell legend, .tell__label { font-family: var(--font-display); font-weight: 500; margin-block-end: 0.25rem; }
.tell fieldset label { display: flex; gap: 0.5rem; align-items: center; cursor: pointer; }
.tell input[type=radio] { accent-color: var(--candyfloss-deep); width: 1.1rem; height: 1.1rem; }
.tell textarea {
  font: inherit;
  color: inherit;
  padding: 0.6rem 0.9rem;
  background: var(--meringue);
  border: 2px solid var(--rule);
  border-radius: 1rem;
  resize: vertical;
}
.tell textarea:focus-visible { outline: none; border-color: var(--candyfloss-deep); }
.tell__help, .tell__from { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.tell__help #count { font-variant-numeric: tabular-nums; }
.tell__send {
  justify-self: start;
  margin-block-start: 0.5rem;
  padding: 0.6rem 1.6rem;
  font: inherit;
  font-family: var(--font-display);
  font-weight: 500;
  color: #3a1636;
  background: var(--candyfloss);
  border: 2px solid var(--candyfloss);
  border-radius: 999px;
  cursor: pointer;
}
.tell__send:disabled { opacity: 0.5; cursor: default; }
.tell__msg { margin: 0; min-height: 1.5em; color: var(--ink-soft); }
.tell__msg.is-bad { color: var(--candyfloss-deep); }
.tell__thanks { margin: 0.5rem 0; font-family: var(--font-display); font-size: var(--step-1); }
@media (prefers-reduced-motion: reduce) { .tell__card { rotate: none; } }