.community-presence {
  margin-top: 34px;
  background: #191d22;
  border: 1px solid #34383d;
  padding: 24px;
}

.presence-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.presence-heading h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 21px; letter-spacing: -.025em; }
.presence-light { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #83d8b2; }
.presence-light--quiet { background: #a0abb8; }
.presence-window { color: #aeb7c2; font-size: 12px; }
.presence-counts { display: flex; flex-wrap: wrap; margin: 24px 0 0; padding: 0 0 22px; border-bottom: 1px solid #34383d; gap: 16px 0; }
.presence-count { display: flex; flex-direction: column; gap: 4px; padding: 0 28px; border-left: 1px solid #414a55; min-width: 0; }
.presence-count:first-child { border-left: 0; padding-left: 0; }
.presence-count dt { color: #aeb7c2; font-size: 12px; }
.presence-count dd { order: -1; margin: 0; color: #f3f3ef; font-size: 28px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.presence-count--now dd { color: #83d8b2; }
.presence-members { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 18px 0 0; margin: 0; }
.presence-members li { min-width: 0; max-width: 100%; }
.presence-member { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%; font-size: 14px; text-underline-offset: 4px; }
.presence-member:hover .presence-name { color: #7acfff; text-decoration: underline; }
.presence-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; background: #29313a; color: #d1dbe6; font-size: 11px; font-weight: 600; }
.presence-member--moderator .presence-avatar { background: #143a50; color: #89ceff; }
.presence-name { min-width: 0; overflow-wrap: anywhere; }
.presence-role { border: 1px solid #456378; color: #89ceff; padding: 1px 5px; font-size: 10px; line-height: 1.5; flex: none; }
.presence-overflow { color: #aeb7c2; font-size: 13px; margin-top: 12px; }
.presence-empty { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; padding-top: 20px; font-size: 14px; }
.presence-empty p { color: #c4ccd5; }
.presence-empty a { color: #7acfff; padding: 6px 0; text-decoration: underline; text-underline-offset: 4px; }
.presence-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 20px; font-size: 12px; color: #aeb7c2; }
.presence-explainer { min-width: 0; }
.presence-explainer summary { cursor: pointer; width: fit-content; padding: 6px 0; }
.presence-explainer summary:hover, .presence-settings:hover { color: #f3f3ef; }
.presence-explainer p { max-width: 70ch; padding-top: 10px; line-height: 1.7; }
.presence-settings { flex: none; text-decoration: underline; text-underline-offset: 4px; padding: 6px 0; }
.presence-setting { margin-top: 12px; padding: 18px 0; border-block: 1px solid #34383d; }
.editor .presence-setting label { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; }
.presence-setting input { width: 18px; height: 18px; accent-color: #009dff; flex: none; }
.presence-setting .hint { margin: 8px 0 0 28px; }

@media (max-width: 700px) {
  .community-presence { margin-top: 28px; padding: 18px; }
  .presence-heading h2 { font-size: 20px; }
  .presence-window { display: none; }
  .presence-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; padding-bottom: 18px; }
  .presence-count { padding: 0 12px; }
  .presence-count:last-child { padding-right: 0; }
  .presence-count dt { font-size: 11px; line-height: 1.5; }
  .presence-count dd { font-size: 25px; }
  .presence-members { gap: 7px 16px; }
  .presence-member { min-height: 40px; }
  .presence-footer { flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; }
  .presence-explainer summary, .presence-settings { padding-block: 10px; }
}