onboarding-explainer-card-fixes: polish explainer scene cards

[yasyuk]

Summary

• Reduce title→caption margin to 4px on obCompact, obPerson, obCountry, obCover cards
• Fix obTask head vertical alignment (align-items: center, reset inherited title margin)
• Replace custom taskPage CSS mask icon with Storybook default/page icon, colored --color-shape-primary
• Redesign obVideo card: circular 152×152 thumbnail, type label, multi-line title, CSS backdrop-filter play button (12px blur)
• Expand obBookmark description clamp from 2 to 3 lines
• Fix community channel chatBubble bottom gap to 4px (height 204px → 196px, avatar/tail positions updated)
• Replace inline data URI chat tail with new chat-tail.svg shape, shifted 4px right to match design

Test plan

• Step through all channel types (Team, Friends, Community, Private) in onboarding
• Verify title→caption spacing is consistent across all explainer cards
• Verify obTask page icon is vertically centered with the title
• Verify obVideo card shows circular thumbnail, type label, wrapping title, and blurred play button
• Verify community channel chat bubble bottom gap matches sides (4px)
• Verify chat bubble tail shape and position match design
• Check dark mode for all affected cards

---

I have read the CLA Document and I hereby sign the CLA

🤖 Generated with Claude Code

[github-actions]

CLA Assistant Lite bot:
Thank you for your pull request, we really appreciate it!

Please sign our Contributor License Agreement before we can accept your contribution.
You can sign the CLA by simply commenting on this pull request with the following text.

---

I have read the CLA Document and I hereby sign the CLA

---

_{You can retrigger this bot by commenting recheck in this Pull Request}