:root {
  --paper: #f7f6f5; --ink: #191919; --muted: rgba(25, 25, 25, .56); --line: rgba(25, 25, 25, .16);
  --red: #b1171d; --green: #1f4d3a;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: Charter, "Iowan Old Style", Georgia, serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.5 var(--serif); }
/* candy-cane hairline */
body::before { content: ""; display: block; height: 6px;
  background: repeating-linear-gradient(135deg, var(--red) 0 8px, var(--paper) 8px 16px); }
main { max-width: 34rem; margin: 0 auto; padding: 0 20px 4rem; }
header { display: flex; justify-content: space-between; align-items: center; padding: 20px 0 3rem; font: 15px/1.3 var(--sans); }
header span:first-child { color: var(--red); font-size: 24px; line-height: 1; }
h1 { font: 400 24px/1.2 var(--sans); letter-spacing: -.02em; margin: 0 0 1rem; }
em { font-style: normal; border-bottom: 1px dotted var(--green); }
a { color: var(--green); }
p { margin: 0 0 1rem; }
label, .muted { display: block; font: 13px/1.5 var(--sans); color: var(--muted); margin-bottom: .25rem; }
textarea, input { width: 100%; font: 15px/1.5 var(--sans); color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 0; padding: 8px 10px; }
textarea { margin-bottom: 1rem; resize: vertical; }
button { font: 15px/1.3 var(--sans); padding: 8px 12px; border-radius: 0; cursor: pointer;
  color: var(--paper); background: var(--red); border: 1px solid var(--red); }
button.ghost { color: var(--ink); background: transparent; border-color: var(--ink); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.row { display: flex; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 15px; }
.row:last-child { border-bottom: 1px solid var(--line); }
.row b { flex: 0 0 6rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.row input { flex: 1; min-width: 0; }
#result { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
#recipient { font: 400 48px/1.1 var(--sans); letter-spacing: -.03em; color: var(--red); overflow-wrap: anywhere; }
#error { color: var(--red); font: 15px/1.5 var(--sans); }
#error:empty { display: none; }
#recipient { animation: pop .8s cubic-bezier(.2, 1.5, .4, 1) both; transform-origin: left bottom; }
@keyframes pop { from { opacity: 0; transform: translateY(.4em) scale(.6) rotate(-4deg); filter: blur(8px); } }
.flake { position: fixed; top: -2em; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #recipient { animation: none; } .flake { display: none; } }