.friend-hero,.resident-hero,.friend-book{border:1px solid #e9e0d7;border-radius:26px;background:#fffdf9;overflow:hidden}.friend-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:38px 42px;margin-bottom:24px;background:linear-gradient(115deg,#f8eee3,#fffaf3 68%,#eee8dc)}.friend-hero h2{font-size:clamp(28px,3.2vw,42px);line-height:1.25;letter-spacing:-1.2px;margin:14px 0}.friend-hero p{color:#897568;font-size:14px;margin-bottom:24px}.friend-hero>div>div{display:flex;gap:10px;flex-wrap:wrap}.friend-art{width:300px;max-width:100%;stroke:#ad6653;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.friend-house{stroke:#846954;fill:#e8d9c4;fill-opacity:.25}.friend-orbit{stroke:#c4b39e;stroke-dasharray:5 8;animation:friend-orbit 32s linear infinite}.friend-person{fill:#f1ded0;animation:friend-float 5s ease-in-out infinite}.friend-person-two{animation-delay:-2s;fill:#e2e3d5}.friend-dot{fill:#ba725d;animation:friend-float 4s ease-in-out infinite}.friend-book{padding:24px}.friend-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.friend-section-head h2,.friend-section-head h3{margin:0;font-size:20px}.friend-section-head>a,.friend-section-head>span{display:flex;align-items:center;gap:8px;color:#8a6653;font-size:12px}.friend-tabs{display:flex;gap:6px;margin-bottom:24px;overflow-x:auto;padding:5px;background:#f5efe7;border-radius:15px}.friend-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-height:44px;padding:10px;border-radius:11px;white-space:nowrap;background:transparent;color:#806e60;font-size:13px;border:0;transition:background .2s,transform .2s,box-shadow .2s}.friend-tabs button.active{background:#fffdf9;color:#9c4f3e;box-shadow:0 3px 12px #5e39220b}.friend-tabs small{font-size:11px;opacity:.75}.friend-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.friend-card{min-width:0;padding:20px;border:1px solid #ebe2d9;border-radius:20px;background:linear-gradient(160deg,#fffdfa,#fcf7f0);transition:transform .25s,box-shadow .25s,border-color .25s;animation:friend-enter .35s ease both}.friend-card:hover{transform:translateY(-3px);border-color:#d5b6a0;box-shadow:0 14px 28px #6d46350c}.friend-identity{display:flex;align-items:center;gap:12px;min-width:0}.friend-identity>span:not(.friend-avatar){flex:1;min-width:0}.friend-identity strong,.friend-search-result strong{display:block;color:#463a32;font-size:17px;overflow-wrap:anywhere}.friend-identity small{display:block;color:#928074;font-size:12px;margin-top:5px}.friend-identity>svg{flex-shrink:0;color:#ad715b}.friend-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:17px;flex-shrink:0;background:linear-gradient(135deg,#ead4c2,#f5e9dc);color:#8f523e;font-size:23px;font-weight:650;border:1px solid #dbc4b2}.friend-uid{font-size:10px;color:#998779;font-variant-numeric:tabular-nums;letter-spacing:.5px;overflow-wrap:anywhere;margin:16px 0}.friend-card blockquote{margin:0 0 16px;padding:12px;border-left:2px solid #c38a70;background:#f5eee5;border-radius:0 10px 10px 0;color:#765f50;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}.friend-card footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid #eee5db;padding-top:15px}.friend-empty{text-align:center;padding:24px 16px 36px}.friend-empty .friend-art{display:block;width:210px;height:120px;margin:0 auto 12px}.friend-empty h2,.friend-empty h3{margin:10px 0;font-size:20px;color:#5d493c}.friend-empty p{color:#947e6d;line-height:1.8;font-size:13px;margin:0 0 20px}.friend-empty>span>svg{width:40px;height:40px;color:#b27c60}.friend-muted{color:#967d6b;font-size:12px}.resident-cover{height:150px;background:linear-gradient(110deg,#ead8c5,#f6eadb 58%,#e5dfd1);display:flex;justify-content:space-between;align-items:center;padding:0 30px}.resident-cover .friend-art{width:230px;height:150px}.resident-cover>span{font-size:12px;letter-spacing:2px;color:#99795e}.resident-summary{display:flex;align-items:center;gap:20px;padding:26px 32px 18px;min-width:0}.resident-summary>div{min-width:0}.resident-summary .friend-avatar{width:82px;height:82px;border-radius:26px;font-size:36px;box-shadow:0 6px 20px #a7794212}.resident-summary h1{font-size:30px;line-height:1.25;margin:7px 0;overflow-wrap:anywhere}.resident-summary p{font-size:13px;color:#887162;margin:8px 0}.resident-actions{display:flex;flex-wrap:wrap;gap:10px;padding:0 32px 28px}.resident-greeting{display:flex;gap:9px;padding:0 32px 24px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:#946e57;font-size:13px}.resident-greeting>svg{flex-shrink:0}.resident-hero{margin-bottom:24px}.resident-posts{grid-template-columns:repeat(2,minmax(0,1fr))}.friend-find-intro{text-align:center}.friend-find-intro .friend-art{height:105px;width:200px}.friend-find-intro h3{margin:4px 0 12px;font-size:23px}.friend-find-intro p{color:#957b67;font-size:13px}.friend-search{display:flex;align-items:center;gap:10px;border:1px solid #dfccba;border-radius:16px;padding:8px 10px;background:#fffdf9;margin:24px 0}.friend-search input{min-width:0;flex:1;background:transparent;border:0;box-shadow:none;padding:8px 0;font-size:14px}.friend-search>svg{color:#ac785b;flex-shrink:0}.friend-search-result{display:flex;align-items:center;gap:14px;padding:16px;background:#f4eadf;border-radius:17px;animation:friend-enter .3s ease}.friend-search-result>span:not(.friend-avatar){min-width:0;flex:1}.friend-search-result small{display:block;color:#8a6e57;font-size:12px;margin-top:6px}.friend-search-result>svg{flex-shrink:0}dialog[data-kind="friend-dialog"]{max-width:540px}.friend-confirm-symbol{width:62px;height:62px;border-radius:22px;background:#eee0d0;color:#aa624a;display:grid;place-items:center;margin-bottom:18px}.friend-confirm-symbol svg{width:27px;height:27px}.friend-confirm-copy{font-size:15px;line-height:1.8;color:#866c59}.friend-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}dialog[data-kind="friend-dialog"] textarea{resize:vertical;min-height:110px;border:1px solid #dfccba;border-radius:16px;padding:15px;width:100%;background:#fffdf9;color:#5d493c}.resident-author{color:inherit;text-decoration:none;border:0;background:none;padding:0;font:inherit;text-align:left}.resident-author:hover{color:#a35d45}.dm-modes>a.friend-message-link{display:flex;align-items:center;gap:7px;padding:11px 16px;border-radius:14px;color:#805e4e;white-space:nowrap;font-size:13px;text-decoration:none}.friend-message-link small{background:#aa614c;color:#fffaf5;border-radius:9px;padding:2px 6px;font-size:10px}.friend-loading{display:inline-block;width:24px;height:24px;border:2px solid #e9d9c8;border-top-color:#a6634a;border-radius:50%;animation:friend-spin 1s linear infinite}.friend-book :is(button,a),.resident-hero :is(button,a),dialog[data-kind="friend-dialog"] :is(button,a),.friend-hero :is(button,a){transition:transform .18s,background .2s,box-shadow .2s}.friend-book :is(button,a):active,.resident-hero :is(button,a):active,dialog[data-kind="friend-dialog"] :is(button,a):active,.friend-hero :is(button,a):active{transform:scale(.97)}.friend-book :is(button,a):focus-visible,.resident-author:focus-visible,dialog[data-kind="friend-dialog"] :is(button,a,input,textarea):focus-visible{outline:2px solid #9d5e47;outline-offset:4px}.friend-book button:disabled{opacity:.55;cursor:wait}@keyframes friend-enter{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}@keyframes friend-float{50%{transform:translateY(-4px)}}@keyframes friend-orbit{to{stroke-dashoffset:-130}}@keyframes friend-spin{to{transform:rotate(360deg)}}@media(max-width:1150px){.friend-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.friend-hero{padding:28px}.friend-hero>.friend-art{width:230px}}@media(max-width:600px){.friend-hero{position:relative;padding:26px 22px;min-height:256px;border-radius:22px}.friend-hero>div{position:relative;z-index:1}.friend-hero h2{font-size:29px}.friend-hero p{max-width:200px;line-height:1.8}.friend-hero>.friend-art{position:absolute;width:165px;right:-12px;top:0;opacity:.48}.friend-book{padding:17px;border-radius:22px}.friend-tabs{gap:0}.friend-tabs button{font-size:12px;padding:9px 6px;gap:4px}.friend-tabs svg{width:16px;height:16px}.friend-grid{grid-template-columns:minmax(0,1fr);gap:12px}.friend-card{padding:18px}.friend-empty{padding:20px 0 28px}.resident-cover{height:120px;padding:0 16px}.resident-cover>span{font-size:10px;max-width:74px;line-height:1.9;letter-spacing:1px}.resident-cover .friend-art{width:180px;height:115px}.resident-summary{padding:22px 18px 18px;gap:14px;align-items:flex-start}.resident-summary .friend-avatar{width:58px;height:58px;border-radius:19px;font-size:27px}.resident-summary h1{font-size:23px}.resident-summary p span{display:block;margin-top:5px}.resident-actions{padding:0 18px 22px}.resident-greeting{padding:0 18px 20px}.resident-posts{grid-template-columns:minmax(0,1fr)}.friend-section-head h2{font-size:18px}.friend-section-head>span{font-size:10px}.dm-modes{overflow-x:auto}.dm-modes>a.friend-message-link{flex-shrink:0;padding:10px}.friend-search{gap:7px}.friend-search input{font-size:13px}.friend-confirm-actions .button{padding:12px;font-size:13px}}@media(prefers-reduced-motion:reduce){.friend-art *,.friend-card,.friend-search-result,.friend-loading{animation:none!important}.friend-book *,.resident-hero *,dialog[data-kind="friend-dialog"] *,.friend-hero *{transition:none!important}}
/* Illustrations keep their viewBox ratio instead of inheriting icon height. */
.friend-hero>svg.friend-art{height:auto;aspect-ratio:330/190}
#friend-find-form .sr-only,#friend-action-form .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog[data-kind="friend-dialog"] .button:not(.outline),.friend-card .button:not(.outline),.resident-actions .button:not(.outline){background:#984630;color:#fffaf4;border-color:#984630;box-shadow:0 4px 12px #98463014}
dialog[data-kind="friend-dialog"] .button:not(.outline):hover,.friend-card .button:not(.outline):hover,.resident-actions .button:not(.outline):hover{background:#823923;transform:translateY(-1px)}
@media(max-width:600px){
 .friend-hero p{max-width:none}
 body[data-ui-shell="community"] .dm-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:100%;min-width:0;gap:4px;box-sizing:border-box}
 body[data-ui-shell="community"] .dm-modes>button,body[data-ui-shell="community"] .dm-modes>a.friend-message-link{min-width:0;justify-content:center;width:100%;padding:10px 8px}
}