.receipt-scene {
  --receipt-ground: #e6ebd7;
  --receipt-seal: #24331a;
  --receipt-seal-ink: #d7f497;
  position: relative;
  width: 100%;
  min-width: 0;
  margin: -12px 0 0;
  isolation: isolate;
}
.receipt-stage {
  position: relative;
  height: 530px;
  width: 100%;
  overflow: clip;
}
.receipt-stage > * { pointer-events: none; }
.receipt-ground {
  position: absolute;
  width: 360px;
  height: 360px;
  max-width: 93%;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--receipt-ground);
}
.receipt-orbit {
  position: absolute;
  inset: 65px 3% 45px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: rotate(-26deg);
}
.receipt-registration {
  position: absolute;
  font: 24px ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--muted);
}
.receipt-registration-one { left: 6%; top: 72px; }
.receipt-registration-two { right: 3%; bottom: 67px; }
.receipt-motion-layer { position: absolute; inset: 0; transform-origin: 50% 48%; }
.receipt-paper {
  position: absolute;
  left: 50%;
  top: 23px;
  width: 285px;
  padding: 25px 25px 22px;
  color: #1b2815;
  background: linear-gradient(135deg, #e1f99b 0%, #d0ee7b 52%, #c4e76d 100%);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 18px 25px #17220e1a, 0 2px 3px #17220e16;
  transform: translateX(-50%) rotate(-7deg);
}
.receipt-paper::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 20%, #fff5 47%, transparent 68%); background-size: 240% 100%; background-position: var(--foil-position, 100%) 0; mix-blend-mode: soft-light; }
.receipt-items { margin-top: 16px; padding-top: 11px; border-top: 1px dashed #718b48; }
.receipt-items > p { font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .9px; }
.receipt-items li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; margin-top: 7px; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
.receipt-items li > span:nth-child(2) { display: flex; gap: 6px; align-items: baseline; font: 700 16px/1 var(--display, inherit); letter-spacing: -.5px; }
.receipt-items li > span:nth-child(2)::after { content: ''; flex: 1; min-width: 12px; border-bottom: 1px dotted #5d743b; }
.receipt-brand {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #718b4870;
  padding-bottom: 17px;
}
.receipt-brand > span:first-child { font-size: 16px; font-weight: 700; letter-spacing: -.8px; }
.receipt-brand > span:last-child { font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
.receipt-eyebrow {
  margin-top: 17px;
  font: 9px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .9px;
  line-height: 1.5;
}
.receipt-value { position: relative; line-height: .9; margin-top: 9px; }
.receipt-value > span { font-family: var(--display, inherit); font-size: 137px; font-weight: 650; letter-spacing: -13px; }
.receipt-value > svg { position: absolute; right: 3px; top: 18px; width: 42px; height: 42px; }
.receipt-payment { margin-top: 0; font-family: var(--display, inherit); font-weight: 700; font-size: 28px; line-height: .95; letter-spacing: -1.2px; }
.receipt-details { margin: 12px 0 0; padding-top: 13px; border-top: 1px dashed #718b48; }
.receipt-details > div { display: flex; justify-content: space-between; gap: 8px; font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; line-height: 1.6; }
.receipt-details > div + div { margin-top: 5px; }
.receipt-details dt, .receipt-details dd { margin: 0; }
.receipt-details dd { font-weight: 700; }
.receipt-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 17px; }
.receipt-barcode { width: 108px; height: 22px; background: repeating-linear-gradient(90deg,#1b2815 0 2px,transparent 2px 4px,#1b2815 4px 5px,transparent 5px 8px,#1b2815 8px 12px,transparent 12px 15px); }
.receipt-bottom > span:last-child { text-align: right; font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; line-height: 1.4; letter-spacing: .2px; }
.receipt-edge { position: absolute; bottom: -8px; left: 0; width: 100%; height: 9px; color: #c4e76d; }
.receipt-seal {
  position: absolute;
  right: max(12px, calc(50% - 188px));
  top: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 113px;
  height: 113px;
  border-radius: 50%;
  background: var(--receipt-seal);
  color: var(--receipt-seal-ink);
  border: 5px solid var(--paper);
  outline: 1px solid var(--receipt-seal);
  outline-offset: -10px;
  box-shadow: 0 5px 10px #17220e14;
  transform: rotate(-12deg);
}
.receipt-seal > span { font: 7px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .8px; }
.receipt-seal > svg { width: 39px; height: 39px; }
.receipt-caption { position: relative; text-align: center; padding-inline: 6px; }
.receipt-action { display: inline-flex; align-items: center; gap: 17px; min-height: 48px; padding: 8px 4px; font-size: 14px; font-weight: 600; }
.receipt-action > span { border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.receipt-action > svg { width: 21px; height: 21px; transition: transform .2s ease; }
.receipt-action:hover > svg { transform: translateX(4px); }
.receipt-action:hover > span { border-bottom-color: currentColor; }
.receipt-action:focus-visible { outline-offset: 4px; }
.receipt-note { margin: 0 auto; max-width: 32ch; color: var(--muted); font-size: 11px; line-height: 1.6; }
.receipt-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-stamping .receipt-seal { animation: receipt-stamp .55s cubic-bezier(.2, .7, .2, 1) both; }
.is-stamping .receipt-paper { animation: receipt-contact .55s ease both; }
@keyframes receipt-stamp {
  0% { opacity: 0; transform: translateY(-27px) rotate(0deg) scale(1.55); }
  47% { opacity: 1; transform: translateY(2px) rotate(-14deg) scale(.96); }
  68% { transform: translateY(-2px) rotate(-11deg) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) rotate(-12deg) scale(1); }
}
@keyframes receipt-contact {
  0%, 35%, 100% { transform: translateX(-50%) rotate(-7deg); }
  48% { transform: translateX(-50%) translateY(3px) rotate(-6deg); }
  70% { transform: translateX(-50%) translateY(-1px) rotate(-7.5deg); }
}
:root[data-theme=dark] .receipt-scene { --receipt-ground: #23311b; --receipt-seal: #d1ef8d; --receipt-seal-ink: #21331a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .receipt-scene { --receipt-ground: #23311b; --receipt-seal: #d1ef8d; --receipt-seal-ink: #21331a; }
}
@media (max-width: 1100px) {
  .receipt-stage { height: 505px; }
  .receipt-paper { width: 265px; padding: 22px 22px 20px; }
  .receipt-value > span { font-size: 122px; }
  .receipt-seal { right: max(12px, calc(50% - 165px)); top: 140px; }
}
@media (max-width: 760px) {
  .receipt-scene { margin-top: 20px; }
  .receipt-stage { max-width: 440px; margin-inline: auto; height: 495px; }
  .receipt-paper { top: 15px; }
  .receipt-ground { width: 320px; height: 320px; }
  .receipt-orbit { inset: 56px 1% 44px; }
  .receipt-seal { right: max(12px, calc(50% - 167px)); top: 135px; }
  .receipt-note { max-width: none; font-size: 11px; }
}
@media (max-width: 360px) {
  .receipt-stage { height: 470px; }
  .receipt-paper { width: 238px; padding: 20px 20px 17px; transform: translateX(-50%) rotate(-5deg); }
  .receipt-value > span { font-size: 111px; }
  .receipt-payment { font-size: 26px; }
  .receipt-eyebrow { font-size: 8px; }
  .receipt-details > div { font-size: 10px; }
  .receipt-brand > span:first-child { font-size: 14px; }
  .receipt-seal { width: 100px; height: 100px; right: 10px; top: 128px; }
  .receipt-seal > span { font-size: 6px; }
  .receipt-seal > svg { width: 34px; height: 34px; }
  .receipt-registration-one { left: 1%; top: 63px; }
  .receipt-note { max-width: 30ch; }
}
@media (prefers-reduced-motion: reduce) {
  .receipt-action > svg { transition: none; }
  .receipt-action:hover > svg { transform: none; }
  .is-stamping .receipt-seal, .is-stamping .receipt-paper { animation: none; }
}
/* The paper is always printed in brand ink, whatever the page theme. */
.receipt-wordmark { display: inline-flex; align-items: baseline; font-family: var(--display, inherit); letter-spacing: -.055em; }
.receipt-wordmark .wordmark-rest { color: inherit; }
.receipt-wordmark .wordmark-dev { color: #28675f; }
.receipt-wordmark .brand-period { background: #28675f; }