/* spills, peeling labels, coin stacks, the receipt */
html,body{overflow-x:hidden;overflow-x:clip}

/* one thing per section slips off its edge into the next one */
.spill{position:absolute;z-index:4;bottom:-8px;pointer-events:none;transform:none;
 transition:transform .9s cubic-bezier(.5,0,.85,.45)}
.spill.fell{transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}
.spill .ak{animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.spill{transition:none}}

/* his label is still a heart bar. its corner is coming unstuck. */
.nm{position:relative}
.nm::before{content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;pointer-events:none;
 background:linear-gradient(225deg,#f4cdf0 50%,#fff 50%);box-shadow:-1px 1px 0 #1c0450}
.nm2::before{right:auto;left:-3px;top:auto;bottom:-3px;background:linear-gradient(45deg,#f4cdf0 50%,#fff 50%);box-shadow:1px -1px 0 #1c0450}
.nm3::before{right:auto;left:-3px}
html.names .nm::before{display:none}

/* money: stacks, not a grid of identical coins */
.stacks{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin:12px 4px 0;padding:0 6px;border-bottom:2px solid var(--ink)}
.stk{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;align-items:center}
.col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-height:26px}
.col .ak+.ak{margin-top:-12px}
.stk figcaption{font-size:17px;line-height:1.15;text-align:center;padding:6px 0 8px}
.stk b{display:block;font-size:18px}
.coinkey{font-size:16px;margin:6px 0 0;text-align:right}
details.how{margin-top:10px;font-size:16px;line-height:1.25}
details.how summary{cursor:pointer;text-decoration:underline dotted}
details.how p{margin:6px 0 0}
.sharecap{font-size:16px;margin:4px 6px 0 0;text-align:right}