.friend-page{display:grid;gap:24px}.friend-page h1{margin-bottom:16px}.friend-page>header nav{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:20px}.friend-note{color:var(--muted);font-size:13px}.friend-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}.friend-card{display:flex;align-items:flex-start;gap:16px;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none!important;transition:border-color .15s,transform .15s}.friend-card:hover{border-color:var(--accent);transform:translateY(-2px)}.friend-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.friend-card>div{min-width:0}.friend-mark{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--bg);color:var(--accent);font-size:21px}.friend-card h3{font-size:17px;margin:0 0 7px}.friend-card h3 span{font-size:12px;color:var(--faint)}.friend-card p{font-size:13px;line-height:1.7;margin:0 0 10px;color:var(--muted)}.friend-card small{font-size:11px;color:var(--faint);overflow-wrap:anywhere}.friend-page dt{font-weight:600;margin-top:12px}.friend-page dd{margin-left:0;overflow-wrap:anywhere}.friend-page section{scroll-margin-top:24px}@media(max-width:720px){.friend-grid{grid-template-columns:1fr}.friend-card{padding:16px}.friend-page{gap:16px}}@media(prefers-reduced-motion:reduce){.friend-card{transition:none}.friend-card:hover{transform:none}}