html, body { margin: 0; min-height: 100%; color: #f3ead8; font-family: system-ui, sans-serif; background: #2b2622; }
main { max-width: 52rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
h1 { margin: 0; font-size: 1rem; font-weight: 600; }
p { margin: 0.25rem 0 1.5rem; font-size: 0.85rem; color: #c9bca6; }
.receipt { position: relative; max-width: 24rem; margin: 0 auto; padding: 1.25rem 1.25rem 2rem; color: #2a2724; background: #fbf7ec; font: 0.8rem/1.6 ui-monospace, Menlo, Consolas, monospace; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.45); transform-origin: top; animation: feed 1s ease-out both; }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.6rem; height: 0.6rem; background: linear-gradient(-45deg, transparent 0.42rem, #fbf7ec 0) 0 0 / 0.6rem 0.6rem repeat-x, linear-gradient(45deg, transparent 0.42rem, #fbf7ec 0) 0 0 / 0.6rem 0.6rem repeat-x; }
.receipt > div { opacity: 0; animation: ink 0s forwards; }
.receipt > div:nth-child(1) { animation-delay: 0.9s; } .receipt > div:nth-child(2) { animation-delay: 1.2s; }
.receipt > div:nth-child(3) { animation-delay: 1.5s; } .receipt > div:nth-child(4) { animation-delay: 1.8s; }
.receipt > div:nth-child(5) { animation-delay: 2.1s; } .receipt > div:nth-child(6) { animation-delay: 2.4s; }
.receipt > div:nth-child(7) { animation-delay: 2.7s; } .receipt > div:nth-child(8) { animation-delay: 3.0s; }
.receipt > div:nth-child(9) { animation-delay: 3.3s; } .receipt > div:nth-child(10) { animation-delay: 3.6s; }
.receipt > div:nth-child(11) { animation-delay: 3.9s; } .receipt > div:nth-child(12) { animation-delay: 4.2s; }
.receipt > div:nth-child(13) { animation-delay: 4.5s; } .receipt > div:nth-child(14) { animation-delay: 4.8s; }
.receipt > div:nth-child(15) { animation-delay: 5.1s; } .receipt > div:nth-child(16) { animation-delay: 5.4s; }
.receipt > div:nth-child(17) { animation-delay: 5.7s; }
.center { text-align: center; }
.big { font-weight: 700; letter-spacing: 0.2em; }
.ln { display: flex; align-items: baseline; }
.ln i { flex: 1; margin: 0 0.4em; border-bottom: 1px dotted #8a8175; }
.rule { height: 0; margin: 0.5rem 0; border-top: 1px dashed #8a8175; }
.note { color: #6b645a; }
.receipt > .stamp { position: absolute; right: 1rem; bottom: 4.5rem; padding: 0.2rem 0.6rem; border: 3px double #c8102e; border-radius: 0.3rem; color: #c8102e; font-weight: 700; letter-spacing: 0.08em; mix-blend-mode: multiply; animation: thump 0.35s cubic-bezier(0.3, 1.6, 0.6, 1) 6.6s both; }
@keyframes feed { from { transform: scaleY(0.02); } to { transform: none; } }
@keyframes ink { to { opacity: 1; } }
@keyframes thump { from { opacity: 0; transform: rotate(-14deg) scale(3); } to { opacity: 0.85; transform: rotate(-14deg); } }
@media (prefers-reduced-motion: reduce) {
  .receipt, .receipt > div { animation: none; opacity: 1; }
  .receipt > .stamp { animation: none; opacity: 0.85; transform: rotate(-14deg); }
}
footer { margin-top: 2rem; font-size: 0.8rem; color: #c9bca6; text-align: center; }
footer a { color: inherit; }