.letter-paper {
  margin-top: 1.25rem;
  padding: 1.5rem;
  border: 1px solid #e8dac1;
  border-radius: 12px;
  background: #fffdf9;
  color: #51392d;
  font-family: Georgia, serif;
}
.letter-greeting, .letter-signoff { font-size: 1.2rem; line-height: 1.8; }
.letter-paper textarea {
  display: block;
  width: 100%;
  min-height: 260px;
  margin: 1rem 0;
  padding: 0 .35rem;
  border: 0;
  border-radius: 4px;
  background: repeating-linear-gradient(transparent 0, transparent 31px, #e8dac1 31px, #e8dac1 32px);
  font: 1.1rem/32px Georgia, serif;
  color: inherit;
  resize: vertical;
}
.letter-paper textarea:focus-visible { outline: 2px solid #a56f38; outline-offset: 4px; }
.letter-paper textarea::placeholder { color: #967e6e; }
@media (max-width: 480px) {
  .letter-paper { padding: 1rem; }
}

body { background: radial-gradient(ellipse at 15% 10%, #f4e5d9, transparent 55%), #f8f2e9; }
header h1 { font-family: Georgia, serif; font-weight: 400 !important; }
.letter-paper { box-shadow: 2px 4px 0 #f4e8d7, 3px 5px 0 #e8dac1; border-left: 5px solid #c7a480; }
#saveBtn { background: #73543e; min-height: 44px; transition: background .2s; }
#saveBtn:hover { background: #573e2d; }
#viewBtn { min-height: 44px; }
#saveBtn:focus-visible, #viewBtn:focus-visible { outline: 2px solid #916d48; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { #saveBtn { transition: none; } }