/* One center for every moment. The viewport stays still; long content scrolls inside. */
html{scrollbar-gutter:stable both-edges}
body{min-height:100svh}
.pea-page{position:relative;display:grid;place-items:center;width:min(calc(100% - 32px),452px);min-height:100svh;margin:0 auto;padding:16px 0}
.pea-hero,.pea-reward{grid-area:1/1;width:100%;min-height:0;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.pea-hero{justify-content:center}
.pea-notice{position:fixed;z-index:2;top:12px;left:50%;transform:translateX(-50%);width:min(calc(100% - 32px),452px);margin:0}
.pea-dialog{position:fixed;inset:16px;width:min(calc(100% - 32px),452px);height:min(620px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:30px;overflow:auto;overscroll-behavior:contain}
.pea-dialog-body{min-height:100%;display:flex;flex-direction:column;justify-content:center}
.pea-dialog::backdrop{background:rgba(255,255,255,.94)}
body:has(.pea-dialog[open]){overflow:hidden}
#pea-share-image{width:auto;max-width:100%;max-height:min(48svh,420px);margin:18px auto 12px;object-fit:contain}
.pea-reward{padding:16px 0;text-align:center}
.pea-reward .pea-amount-label{text-align:left}
@media(prefers-reduced-motion:no-preference){
  .pea-hero,.pea-reward{animation:pea-arrive .18s ease-out both}
  .pea-dialog[open]{animation:pea-arrive .18s ease-out both}
  .pea-dialog[open]::backdrop{animation:pea-arrive .18s ease-out both}
  .pea-dialog.pea-leaving,.pea-dialog.pea-leaving::backdrop{animation:pea-leave .14s ease-in both}
  #pea-keepsake:not([hidden]),#pea-wallet-breakdown:not([hidden]){animation:pea-arrive .18s ease-out both}
  body:has(.pea-dialog[open]) .pea-hero{opacity:.06;transition:opacity .18s ease}
  @keyframes pea-arrive{from{opacity:0}to{opacity:1}}
  @keyframes pea-leave{from{opacity:1}to{opacity:0}}
}
@media(max-width:359px){.pea-dialog{padding:24px}}