.wrap { max-width: 1100px; margin: 0 auto; padding: var(--gap) 24px 100px; text-align: center; }
.top { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; margin-bottom: 36px; text-align: center; }
h1 { margin: 0; font: 700 clamp(38px, 6vw, 64px) / 1.1 'FuzzyBubbles', cursive; color: var(--head); }

.how { width: calc(100% - 48px); max-width: 1052px; margin: var(--gap) auto 0; overflow: hidden; }
.how-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px; border: 0; background: var(--pink); color: var(--ink); font: 700 18px 'FuzzyBubbles', cursive; transition: background 0.55s var(--ease); }
.how-btn span { text-decoration: underline; text-underline-offset: 4px; }
.how-btn::before { content: "♥"; color: var(--accent); }
.how-btn::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.4s var(--ease); }
.how-btn[aria-expanded=true]::after { transform: translateY(3px) rotate(-135deg); }
.how-btn:hover, .how-btn:focus-visible { background: #ffd6e8; outline: none; }
.how-body { height: 0; opacity: 0; overflow: hidden; }
.how-in { padding: 20px 24px 24px; text-align: center; }
.how-in ol { margin: 0 0 16px; padding: 0; list-style-position: inside; font-size: 17px; line-height: 1.7; color: var(--text-p); }
.how-in li { font-family: 'FuzzyBubbles', cursive; font-weight: 700; }
.how-in a { color: var(--hi); text-decoration: underline; }
.addrs { display: flex; flex-direction: column; gap: 18px; }
.addr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.coin { font-family: 'CherryBombOne', cursive; font-weight: 400; letter-spacing: 0.4px; }
.addr .coin { font-size: 20px; color: var(--accent); }
.coin-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.addr .copy { display: block; flex: 0 1 auto; max-width: 100%; padding: 0; border: 0; background: none; }
.addr .hint::after { padding: 4px 14px; font-size: 16px; }
.addr code { display: block; text-align: center; padding: 10px 12px; background: var(--bg); border-radius: 6px; color: var(--hi); font: 13px / 1.4 monospace; overflow-wrap: anywhere; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
.divider { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; font: 700 18px 'FuzzyBubbles', cursive; color: var(--muted); }
.divider::before, .divider::after { content: ""; flex: 1; height: 2px; border-radius: 1px; background: var(--line); }
.item {
  --a: 50%;
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 2px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(180deg,
      color-mix(in srgb, var(--f1) var(--a), transparent) 0 20%,
      color-mix(in srgb, var(--f2) var(--a), transparent) 20% 40%,
      color-mix(in srgb, var(--f3) var(--a), transparent) 40% 60%,
      color-mix(in srgb, var(--f4) var(--a), transparent) 60% 80%,
      color-mix(in srgb, var(--f5) var(--a), transparent) 80% 100%) border-box;
}
.pic { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--bg); }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pic span { font: 700 48px 'FuzzyBubbles', cursive; color: var(--line); }
.name { margin: 0; font: 700 22px / 1.2 'FuzzyBubbles', cursive; color: var(--head); overflow-wrap: anywhere; text-align: center; }
.money { font-size: 16px; text-align: center; color: var(--muted); }
.money b { font-weight: 400; color: var(--accent); }
.bar { height: 12px; overflow: hidden; border-radius: 3px; background: var(--hover); }
.bar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
html.ready .bar i { animation: grow 0.9s var(--ease) calc(var(--dl, 0s) + 0.4s) forwards; }
@keyframes grow { to { transform: scaleX(1); } }
.item.done .bar i { background: var(--mint); }
.item.done::before { content: ""; position: absolute; inset: 0; border-radius: 6px; background: rgba(38, 128, 95, 0.1); pointer-events: none; }
.status { margin: 24px 0 0; font-size: 18px; color: var(--muted); text-align: center; }

@media (max-width: 500px) { .grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .bar i { transform: none; } }