.avatar-base { position:absolute; inset:5%; overflow:hidden; border-radius:50%; display:grid; place-items:center; }
.avatar-fox { display:block; width:100%; height:100%; object-fit:contain; }
.avatar-fox[hidden] { display:none; }
.avatar-fallback { display:none; }
.fox-unavailable .avatar-fallback { display:block; }
.community-avatar.small .avatar-fox { transform:scale(1.45); transform-origin:50% 20%; }
.community-avatar.small.avatar-study .avatar-fox,.community-avatar.small.avatar-rest .avatar-fox { transform:none; }
.fox-avatar-picker { margin:0 0 24px; border:0; border-bottom:1px solid var(--line); padding:0 0 20px; min-width:0; }
.fox-avatar-picker legend { font-weight:700; margin-bottom:12px; }
.fox-avatar-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:12px; max-width:720px; margin-bottom:16px; }
.fox-avatar-options label { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px; border:1px solid var(--line); border-radius:8px; cursor:pointer; font-size:13px; text-align:center; overflow-wrap:anywhere; }
.fox-avatar-options label:has(:checked) { border-color:var(--accent); background:var(--soft); }
.fox-avatar-options label:has(:focus-visible) { outline:2px solid var(--accent); outline-offset:3px; }
.fox-avatar-options input { position:absolute; top:6px; left:6px; accent-color:var(--accent); }
.fox-avatar-options img { width:80px; height:80px; object-fit:contain; }
.avatar-frame-overlay .fox-decoration { width:100%; height:100%; }
.community-avatar[class*="frame-autumn-fox-"] { border-color:transparent; }
.fox-guide { display:flex; align-items:center; gap:12px; max-width:520px; width:100%; min-width:0; margin:12px 0 24px; padding:6px 0; animation:fox-appear .22s ease-out; }
.fox-guide[hidden] { display:none; }
.fox-guide > img { width:72px; height:72px; object-fit:contain; flex:none; }
.fox-guide p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.fox-guide-close { margin-left:auto; flex:none; width:36px; height:36px; display:grid; place-items:center; background:transparent; border:1px solid var(--line); border-radius:6px; color:var(--ink); font-size:22px; line-height:1; cursor:pointer; }
.fox-guide-close:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
@keyframes fox-appear { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:600px) { .fox-guide { gap:8px; } .fox-guide > img { width:56px; height:56px; } .fox-guide p { font-size:13px; } }
@media(prefers-reduced-motion:reduce) { .fox-guide { animation:none; } }