.fh-friends { --fh-friends-surface: color-mix(in srgb,currentColor 4%,transparent); }
.fh-friends [hidden] { display: none !important; }
.fh-friends:not(.fh-friends-ready) .fh-friends-controls { display: none; }
.fh-friends .fh-friends-controls { display:flex; flex-wrap:wrap; gap:.75rem; align-items:end; margin-bottom:1.5rem; }
.fh-friends-controls label { display:grid; gap:.3rem; font-size:.85em; flex:1 1 12rem; }
.fh-friends-controls :is(input,select),.fh-friends-controls button { font:inherit; color:inherit; border:1px solid currentColor; border-radius:.4rem; padding:.6em .8em; background:transparent; max-width:100%; box-sizing:border-box; }
.fh-friends-controls select { background:Canvas; color:CanvasText; }
.fh-friends-controls button { cursor:pointer; }
.fh-friends :is(input,select,button):focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.fh-friends .fh-friends-group { margin:0 0 2rem; }
.fh-friends .fh-friends-heading { margin:0 0 .7rem; font-size:1.2em; line-height:1.3; }
.fh-friends .fh-friends-category-description { margin:0 0 1rem; line-height:1.5; }
.fh-friends .fh-friends-items { display:grid; grid-template-columns:repeat(var(--fh-friends-columns,3),minmax(0,1fr)); gap:var(--fh-friends-gap,20px); padding:0; margin:0; list-style:none; }
.fh-friends .fh-friends-item { min-width:0; margin:0; padding:0; }
.fh-friends .fh-friends-link { display:flex; gap:1rem; align-items:start; height:100%; padding:1.3rem; box-sizing:border-box; border:1px solid transparent; border-radius:var(--fh-friends-radius,16px); color:inherit; text-decoration:none; transition:background-color .15s,border-color .15s; }
.fh-friends-soft .fh-friends-link { background:rgba(128,128,128,.08); background:var(--fh-friends-surface); }
.fh-friends-outline .fh-friends-link { border-color:color-mix(in srgb,currentColor 25%,transparent); }
.fh-friends-minimal .fh-friends-link { padding:.6rem 0; border-radius:0; }
.fh-friends .fh-friends-link:hover { background:color-mix(in srgb,currentColor 8%,transparent); }
.fh-friends .fh-friends-link:hover .fh-friends-name { text-decoration:underline; text-underline-offset:.2em; }
.fh-friends .fh-friends-link:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.fh-friends-shadow .fh-friends-link { box-shadow:0 3px 14px rgb(0 0 0 / .07); }
.fh-friends .fh-friends-icon { display:flex; align-items:center; justify-content:center; position:relative; width:var(--fh-friends-image,48px); height:var(--fh-friends-image,48px); flex:0 0 var(--fh-friends-image,48px); border-radius:12px; background:color-mix(in srgb,currentColor 9%,transparent); overflow:hidden; }
.fh-friends .fh-friends-initials { font-size:.85em; font-weight:650; }
.fh-friends .fh-friends-image { display:block; position:absolute; inset:0; height:100%; width:100%; object-fit:contain; padding:4px; box-sizing:border-box; background:Canvas; border-radius:inherit; }
.fh-friends .fh-friends-details { display:block; flex:1; min-width:0; }
.fh-friends .fh-friends-name { display:block; font-weight:650; font-size:1.05em; line-height:1.35; overflow-wrap:anywhere; }
.fh-friends .fh-friends-domain { display:block; font-size:.75em; line-height:1.4; margin-top:.3rem; overflow-wrap:anywhere; }
.fh-friends .fh-friends-description { display:block; font-size:.9em; line-height:1.6; margin-top:.65rem; overflow-wrap:anywhere; }
.fh-friends .fh-friends-arrow { flex:0 0 auto; font-size:1em; line-height:1.4; }
.fh-friends .fh-friends-tags { display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.7rem; }
.fh-friends-tags span { border:1px solid color-mix(in srgb,currentColor 25%,transparent); border-radius:2rem; padding:.15em .55em; font-size:.65em; line-height:1.4; }
.fh-friends-list .fh-friends-items { grid-template-columns:minmax(0,1fr); gap:calc(var(--fh-friends-gap,20px) * .5); }
.fh-friends-list .fh-friends-link { align-items:center; padding:.85rem 1rem; }
.fh-friends-list.fh-friends-minimal .fh-friends-link { padding:.8rem 0; }
.fh-friends-tiles .fh-friends-link { flex-direction:column; align-items:center; text-align:center; position:relative; padding:1.5rem; }
.fh-friends-tiles .fh-friends-details { width:100%; }
.fh-friends-tiles .fh-friends-arrow { position:absolute; top:1rem; right:1rem; }
.fh-friends-tiles .fh-friends-tags { justify-content:center; }
.fh-friends-pills .fh-friends-items { display:flex; flex-wrap:wrap; }
.fh-friends-pills .fh-friends-link { align-items:center; padding:.65rem 1rem; border-radius:999px; gap:.6rem; }
.fh-friends-pills .fh-friends-icon { width:28px; height:28px; flex-basis:28px; border-radius:50%; }
.fh-friends-pills .fh-friends-name { font-size:.9em; }
.fh-friends-pills :is(.fh-friends-description,.fh-friends-domain,.fh-friends-tags) { display:none; }
.fh-friends .fh-friends-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:700px){.fh-friends .fh-friends-items{grid-template-columns:repeat(min(2,var(--fh-friends-columns,3)),minmax(0,1fr));}.fh-friends-list .fh-friends-items{grid-template-columns:minmax(0,1fr);}}
@media(max-width:480px){.fh-friends .fh-friends-items{grid-template-columns:minmax(0,1fr);}.fh-friends .fh-friends-link{padding:1rem;}.fh-friends-pills .fh-friends-link{padding:.6rem .9rem;}}
@media(prefers-reduced-motion:reduce){.fh-friends .fh-friends-link{transition:none;}}