.account-avatar.account-avatar {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(91, 91, 99, .14);
  color: #fff;
  background: #a9abb2;
  box-shadow: 0 1px 3px rgba(20, 20, 28, .05);
}

.account-avatar > .account-avatar-surface {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: #a9abb2;
  box-shadow: none;
  font-size: 0;
  letter-spacing: 0;
}

.account-avatar-silhouette {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 50%;
}

.account-avatar-silhouette::before {
  position: absolute;
  top: 18%;
  left: 34%;
  width: 32%;
  height: 32%;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.account-avatar-silhouette::after {
  position: absolute;
  top: 57%;
  left: 15%;
  width: 70%;
  height: 54%;
  border-radius: 50% 50% 0 0;
  background: #fff;
  content: "";
}

.account-avatar > .account-avatar-surface > img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
}

.account-avatar.account-avatar-member {
  padding: 2px;
  border: 0;
  background: #b59759;
  box-shadow: 0 0 0 1px #8c733d, 0 0 0 3px #efe8db, 0 3px 7px rgba(53, 40, 17, .12);
}

.account-avatar.account-avatar-member > .account-avatar-surface {
  border: 1px solid #27282e;
  background: #42434a;
  box-shadow: inset 0 0 0 1px #55565f;
}

.account-avatar.account-avatar-member.account-avatar-annual {
  background: #573a70;
  box-shadow: 0 0 0 1px #2e2239, 0 0 0 3px #e5ddeb, 0 3px 7px rgba(30, 20, 39, .14);
}

.account-avatar.account-avatar-member.account-avatar-annual > .account-avatar-surface {
  border-color: #1a1522;
  background: #28222f;
  box-shadow: inset 0 0 0 1px #3a2e45;
}

.account-avatar.account-avatar-large { width: 78px; height: 78px; }
.account-avatar.account-avatar-large.account-avatar-member { padding: 3px; }
.my-button.account-avatar-link:focus-visible { outline: 2px solid #9c7841; outline-offset: 4px; }

.profile-avatar-entry {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 4px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}
.profile-avatar-entry:focus-visible { outline: 2px solid #9c7841; outline-offset: 4px; }
.profile-avatar-caption { color: var(--muted, #6e6e73); font-size: 11px; line-height: 1.5; }
.profile-avatar-entry:hover .profile-avatar-caption { color: var(--text, #1d1d1f); }
.avatar-settings-page { max-width: 640px; margin: 32px auto 64px; }
.avatar-settings-back { font-size: 13px; color: var(--muted, #6e6e73); text-decoration: none; }
.avatar-settings-back:hover { color: var(--text, #1d1d1f); }
.avatar-settings-heading { margin-top: 24px; }
.avatar-settings-preview { margin: 32px 4px 4px; }
.avatar-settings-page .profile-avatar-tools { margin-top: 0; border-bottom: 0; }

.profile-avatar-tools { margin: 20px 0 0; }
.avatar-upload-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.avatar-upload-form input[type="file"] { width: min(100%, 280px); max-width: 100%; font-size: 13px; }
.avatar-upload-form .form-note { flex-basis: 100%; margin: 0; }
.avatar-remove-form { margin: 12px 0 0; }

@media (max-width: 560px) {
  .avatar-upload-form { align-items: flex-start; }
  .avatar-upload-form input[type="file"] { width: 100%; }
}