.friends-page{padding-bottom:3rem}.friend-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:1.6rem;display:grid}.friend-site{border:1px solid var(--color-border);background:color-mix(in srgb, var(--color-surface) 58%, transparent);border-radius:7px;grid-template-columns:2.1rem 2.1rem minmax(0,1fr) 1rem;align-items:start;gap:.8rem;padding:1rem;transition:border-color .2s,transform .2s;display:grid;position:relative}.friend-site:nth-child(5n+1){--friend-accent:var(--color-chart-1)}.friend-site:nth-child(5n+2){--friend-accent:var(--color-chart-2)}.friend-site:nth-child(5n+3){--friend-accent:var(--color-chart-3)}.friend-site:nth-child(5n+4){--friend-accent:var(--color-chart-4)}.friend-site:nth-child(5n+5){--friend-accent:var(--color-chart-5)}.friend-site:hover{border-color:color-mix(in srgb, var(--friend-accent) 50%, var(--color-border));transform:translateY(-2px)}.friend-site__index{font-family:var(--font-mono);color:var(--color-text-muted);padding-top:.2rem;font-size:.52rem}.friend-site__mark{border:1px solid color-mix(in srgb, var(--friend-accent) 40%, var(--color-border));width:2.1rem;height:2.1rem;font-family:var(--font-serif);color:var(--friend-accent);border-radius:50%;place-items:center;font-size:.95rem;display:grid}.friend-site__body{gap:.18rem;min-width:0;display:grid}.friend-site__name{font-family:var(--font-serif);color:var(--color-text);font-size:1.05rem;line-height:1.4}.friend-site:hover .friend-site__name{color:var(--color-accent-text)}.friend-site__desc{font-family:var(--font-serif);color:var(--color-text-muted);font-size:.76rem;line-height:1.65}.friend-site__foot{font-family:var(--font-mono);color:var(--color-text-muted);flex-wrap:wrap;gap:.3rem .45rem;margin-top:.25rem;font-size:.5rem;display:flex}.friend-site__domain{color:var(--color-accent-text)}.friend-site__tag{border:1px solid var(--color-border);border-radius:3px;padding:0 .25rem}.friend-site__arrow{font-family:var(--font-sans);color:var(--color-text-muted);padding-top:.15rem;font-size:.8rem}.friend-invite{border-top:1px solid var(--color-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.8rem;padding-top:1rem;display:flex}.friend-invite__desc{max-width:36rem;font-family:var(--font-serif);color:var(--color-text-secondary);margin-top:.3rem;font-size:.8rem;line-height:1.75}.friend-invite__mail{font-family:var(--font-mono);color:var(--color-accent-text);border-bottom:1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);font-size:.65rem}.friend-snippet{display:none}@media (width<=760px){.friend-grid{grid-template-columns:1fr}}.friend-embed{border-top:1px solid var(--color-border);margin-top:2.2rem;padding-top:1.2rem}.friend-embed__head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;display:flex}.friend-embed__label{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);font-size:.55rem}.friend-embed__title{font-family:var(--font-serif);color:var(--color-text);margin:.35rem 0 0;font-size:clamp(1.35rem,2.4vw,1.8rem);font-weight:500}.friend-embed__download{font-family:var(--font-mono);color:var(--color-accent-text);border-bottom:1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);font-size:.58rem}.friend-embed__preview{border:1px solid var(--color-border);background:color-mix(in srgb, var(--color-surface) 58%, transparent);border-radius:7px;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1rem;padding:1rem;display:flex}.friend-embed__preview img{border-radius:5px;width:12rem;height:auto}.friend-embed__preview p{max-width:24rem;font-family:var(--font-serif);color:var(--color-text-muted);font-size:.78rem;line-height:1.75}.friend-embed__options{gap:.7rem;margin-top:.9rem;display:grid}.friend-embed__option{border:1px solid var(--color-border);border-radius:6px;overflow:hidden}.friend-embed__option-head{border-bottom:1px solid color-mix(in srgb, var(--color-border) 70%, transparent);background:color-mix(in srgb, var(--color-surface) 60%, transparent);font-family:var(--font-mono);letter-spacing:.08em;color:var(--color-text-muted);justify-content:space-between;align-items:center;gap:1rem;padding:.4rem .65rem;font-size:.54rem;display:flex}.friend-embed__option-head button{font-family:inherit;font-size:inherit;color:var(--color-text-secondary);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:3px;padding:.12rem .4rem}.friend-embed__option-head button:hover{border-color:var(--color-accent);color:var(--color-accent-text)}.friend-embed__option pre{font-family:var(--font-mono);color:var(--color-text-secondary);margin:0;padding:.7rem .75rem;font-size:.62rem;line-height:1.7;overflow-x:auto}.friend-embed__note{font-family:var(--font-serif);color:var(--color-text-muted);margin-top:.75rem;font-size:.74rem;line-height:1.75}@media (width<=560px){.friend-embed__preview img{width:100%;max-width:15rem}}.friend-empty{border:1px dashed var(--color-border);border-radius:7px;margin-top:1.5rem;padding:1.2rem}.friend-empty__label{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);font-size:.55rem}.friend-empty__title{font-family:var(--font-serif);color:var(--color-text);margin-top:.4rem;font-size:1.1rem}.friend-empty__desc{max-width:34rem;font-family:var(--font-serif);color:var(--color-text-secondary);margin-top:.3rem;font-size:.8rem;line-height:1.8}.friend-empty .friend-invite__mail{margin-top:.7rem;display:inline-block}.friend-badge-back{font-family:var(--font-mono);color:var(--color-text-muted);margin-top:1.2rem;font-size:.6rem;display:inline-block}.friend-badge-back:hover{color:var(--color-accent-text)}.friend-embed{margin-top:1.3rem}.friend-badge-entry{border-top:1px solid var(--color-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.5rem;padding-top:1rem;display:flex}.friend-badge-entry__label{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);font-size:.55rem}.friend-badge-entry__desc{font-family:var(--font-serif);color:var(--color-text-secondary);margin-top:.25rem;font-size:.85rem}.friend-badge-entry__link{font-family:var(--font-mono);color:var(--color-accent-text);border-bottom:1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);font-size:.62rem}