.guide-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.role-label { display: inline-flex; align-items: center; gap: 8px; }
.star-label>.role-label { font-size: inherit; color: var(--ink); }
.star-label .role-icon { width: 28px; height: 28px; color: var(--moss); }
.guide-icon .inner-face { stroke: var(--cream); }
.role-grid h3 { display: flex; align-items: center; gap: 10px; }
.role-mark { display: inline-flex; flex-shrink: 0; }
.role-mark .role-icon { width: 31px; height: 31px; color: var(--orange); }
.role-mark .inner-face { stroke: var(--moss); }
.star-value .element,.profile-element .element {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: auto; min-width: 42px; height: 26px; padding: 0 6px;
  border-radius: 14px; font-size: 11px; flex-shrink: 0;
}
.element .element-icon { width: 16px; height: 16px; }
.element>span { font-family: var(--sans); line-height: 1; }
.maximum-chip { display: inline-flex; align-items: center; gap: 6px; }
.maximum-chip .element { margin-left: 2px; }
.maximum-chip .element>span { display: none; }
.maximum-chip .element-icon { width: 15px; height: 15px; }
.profile-element { margin: 7px 0 0; }
.profile-element .element { margin-left: 0; font-family: var(--sans); }
@media (max-width:600px) {
  .star-label .role-icon { width: 31px; height: 31px; }
  .role-mark .role-icon { width: 33px; height: 33px; }
  .star-value .element { height: 28px; margin-left: 0; }
  .maximum-chip { font-size: 22px; gap: 5px; flex-wrap: wrap; }
  .maximum-chip .element { width: 24px; height: 24px; margin-left: 0; }
  .profile-element .element { height: 28px; }
}