.social-family{text-align:center}.social-family h1{font-size:var(--font-size-display);margin:0 0 16px}.family-scene{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:36px;width:min(100%,360px);margin:0 auto;padding:0;display:block}.family-scene svg{width:100%;height:auto;display:block}.family-scene:focus-visible,.social-categories button:focus-visible{outline:3px solid var(--primary);outline-offset:4px}.family-heart{opacity:0}.family-scene[data-happy=true] .family-heart{opacity:1;animation:1.2s ease-out family-heart}.family-scene[data-happy=true] .family-child{animation:.6s ease-in-out 2 family-hop}.family-scene[data-happy=true] .family-parent{transform-origin:140px 185px;animation:1.2s ease-in-out family-sway}.family-scene[data-happy=true] .family-tap-cue{opacity:0}.social-categories{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.social-categories button{border:2px solid var(--border);border-radius:var(--radius-md);background:var(--surface);min-height:104px;color:var(--text);font:inherit;font-size:var(--font-size-sm);cursor:pointer;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;display:flex;position:relative}.social-categories button[aria-pressed=true]{border-color:var(--primary);background:var(--primary-soft)}.social-categories svg:not(.category-selected){width:72px;height:58px}.category-selected{top:5px;color:var(--primary);position:absolute;inset-inline-end:5px}@keyframes family-hop{0%,to{transform:translateY(0)}45%{transform:translateY(-8px)}}@keyframes family-sway{0%,to{transform:rotate(0)}40%{transform:rotate(3deg)}70%{transform:rotate(-1deg)}}@keyframes family-heart{0%{transform:translateY(8px)}to{transform:translateY(-6px)}}@media (prefers-reduced-motion:reduce){.family-scene[data-happy=true] .family-heart,.family-scene[data-happy=true] .family-child,.family-scene[data-happy=true] .family-parent{animation:none}}