:root {
  color-scheme: light;
  --surface: #fff;
  --page: #f1f5fa;
  --text: #182b43;
  --link: #1758cf;
  --soft: #edf3fc;
  --soft-hover: #e0ebfc;
  --question: #f3fffc;
  --music: #fffaf3;
  --success-bg: #e8f7ee;
  --success-text: #175d37;
  --danger-bg: #fff0f0;
  --danger-text: #90232a;
  --blue-name: #1d4ed8;
  --green-name: #166534;
  --teal-name: #0f635f;
  --ocean-name: #075985;
  --brown-name: #75451d;
  --slate-name: #374151;
  --amber-name: #825900;
  --copper-name: #92450e;
  --olive-name: #5d6216;
  --moss-name: #476b25;
  --emerald-name: #086c4d;
  --turquoise-name: #086a79;
  --denim-name: #355c8a;
  --espresso-name: #594538;
  --yellow-name: #ffe340;
  --yellow-name-bg: #393100;
  --red-name: #c5150b;
  --purple-name: #a000b8;
  --orange-name: #ad4800;
  --pink-name: #bf006b;
  --admin-name: #8b1e3f;
  --moderator-name: #663399;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #182639;
  --page: #0f1928;
  --text: #e6edf7;
  --navy: #e6edf7;
  --muted: #b0bfd2;
  --line: #455c76;
  --focus: #ffbc78;
  --link: #9ac4ff;
  --soft: #22354d;
  --soft-hover: #2b4666;
  --question: #133733;
  --music: #382d20;
  --success-bg: #16382b;
  --success-text: #a4e8bf;
  --danger-bg: #3d242e;
  --danger-text: #ffbdc8;
  --blue-name: #9fc3ff;
  --green-name: #8be0ab;
  --teal-name: #79dbcf;
  --ocean-name: #8bd4f4;
  --brown-name: #eac094;
  --slate-name: #c6d1df;
  --amber-name: #f3cc73;
  --copper-name: #f6b07d;
  --olive-name: #d1da86;
  --moss-name: #b0d990;
  --emerald-name: #70dfb0;
  --turquoise-name: #72d8e7;
  --denim-name: #aecbf2;
  --espresso-name: #ddc5ac;
  --yellow-name: #ffe340;
  --red-name: #ff947f;
  --purple-name: #ef91ff;
  --orange-name: #ffb04a;
  --pink-name: #ff8ed1;
  --admin-name: #ff9fbb;
  --moderator-name: #d4aeff;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --surface: #182639;
    --page: #0f1928;
    --text: #e6edf7;
    --navy: #e6edf7;
    --muted: #b0bfd2;
    --line: #455c76;
    --focus: #ffbc78;
    --link: #9ac4ff;
    --soft: #22354d;
    --soft-hover: #2b4666;
    --question: #133733;
    --music: #382d20;
    --success-bg: #16382b;
    --success-text: #a4e8bf;
    --danger-bg: #3d242e;
    --danger-text: #ffbdc8;
    --blue-name: #9fc3ff;
    --green-name: #8be0ab;
    --teal-name: #79dbcf;
    --ocean-name: #8bd4f4;
    --brown-name: #eac094;
    --slate-name: #c6d1df;
    --amber-name: #f3cc73;
    --copper-name: #f6b07d;
    --olive-name: #d1da86;
    --moss-name: #b0d990;
    --emerald-name: #70dfb0;
    --turquoise-name: #72d8e7;
    --denim-name: #aecbf2;
    --espresso-name: #ddc5ac;
    --yellow-name: #ffe340;
    --red-name: #ff947f;
    --purple-name: #ef91ff;
    --orange-name: #ffb04a;
    --pink-name: #ff8ed1;
    --admin-name: #ff9fbb;
    --moderator-name: #d4aeff;
  }
}
:root {
  background: var(--page);
  color: var(--text);
}
a {
  color: var(--link);
}
a:hover {
  color: var(--link);
}
.topbar,
.card,
.auth-card,
.summary-card,
#chat-log,
.composer,
.profile-dialog,
.photo-editor,
.notifications-dialog,
.role-badge {
  background: var(--surface);
  color: var(--text);
}
.sidebar {
  background: #112b50;
}
.brand,
.summary-card {
  color: var(--navy);
}
.brand-number,
.text-link,
.new-post > summary,
.more-reactions summary,
.eyebrow {
  color: var(--link);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
input[readonly] {
  background: var(--soft);
}
.secondary,
.feed-filters a {
  background: var(--surface);
  color: var(--link);
  border-color: var(--line);
}
.secondary:hover,
.feed-filters a:hover {
  background: var(--soft-hover);
  color: var(--link);
}
.feed-filters a[aria-current] {
  background: #1758ab;
  color: #fff;
}
.quiet {
  color: var(--link);
}
.quiet:hover {
  background: var(--soft-hover);
  color: var(--link);
}
.danger {
  background: var(--danger-bg);
  color: var(--danger-text);
}
.danger:hover {
  background: var(--danger-bg);
  color: var(--danger-text);
  text-decoration: underline;
}
.question-card {
  background: var(--question);
}
.music-card {
  background: var(--music);
}
.message-own,
.option-content,
blockquote,
.chip,
.comments article,
.tag,
.initial,
.mention-suggestions,
.preview-banner,
.notice,
.notification.unread {
  background: var(--soft);
  color: var(--text);
}
.chip:hover,
.quick-reactions .chip[aria-pressed="true"],
.mention-option:hover,
.mention-option:focus-visible {
  background: var(--soft-hover);
  color: var(--text);
}
.mention-option {
  color: var(--link);
}
.success {
  background: var(--success-bg);
  color: var(--success-text);
}
.toast {
  background: var(--danger-bg);
  color: var(--danger-text);
  border: 1px solid var(--danger-text);
}
.message,
.member-list li {
  border-color: var(--line);
}
.name-blue {
  --name-color: var(--blue-name);
  color: var(--name-color);
}
.name-green {
  --name-color: var(--green-name);
  color: var(--name-color);
}
.name-teal {
  --name-color: var(--teal-name);
  color: var(--name-color);
}
.name-ocean {
  --name-color: var(--ocean-name);
  color: var(--name-color);
}
.name-brown {
  --name-color: var(--brown-name);
  color: var(--name-color);
}
.name-slate {
  --name-color: var(--slate-name);
  color: var(--name-color);
}
.name-admin {
  --name-color: var(--admin-name);
  color: var(--name-color);
}
.name-moderator {
  --name-color: var(--moderator-name);
  color: var(--name-color);
}
.member-list .role-badge {
  color: var(--name-color);
  background: var(--surface);
}
.member-list .newcomer,
.newcomer {
  align-self: flex-start;
  background: var(--soft);
  color: var(--link);
  border: 1px solid var(--line);
  margin: 0.2rem 0;
}
.presence-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.presence-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #15803d;
  border: 1px solid currentColor;
  flex: 0 0 0.7rem;
}
.status-away .presence-dot {
  background: #e89019;
}
.status-dnd .presence-dot {
  background: #dc3545;
}
.post-owner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0;
}
.notifications-dialog {
  width: min(660px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.notifications-dialog::backdrop {
  background: rgb(10 20 35 / 70%);
}
.notifications-dialog > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.notifications-dialog h2 {
  margin: 0;
}
.notification {
  overflow-wrap: anywhere;
  padding: 1rem;
  border-bottom: 1px solid var(--line);
}
[data-notice-status]:empty,
[data-theme-status]:empty {
  display: none;
}
@media (max-width: 760px) {
  .notifications-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    padding: 1rem;
  }
}
@media (forced-colors: active) {
  .presence-dot {
    background: CanvasText;
    border-color: CanvasText;
  }
}

.name-amber {
  --name-color: var(--amber-name);
  color: var(--name-color);
}
.name-copper {
  --name-color: var(--copper-name);
  color: var(--name-color);
}
.name-olive {
  --name-color: var(--olive-name);
  color: var(--name-color);
}
.name-moss {
  --name-color: var(--moss-name);
  color: var(--name-color);
}
.name-emerald {
  --name-color: var(--emerald-name);
  color: var(--name-color);
}
.name-turquoise {
  --name-color: var(--turquoise-name);
  color: var(--name-color);
}
.name-denim {
  --name-color: var(--denim-name);
  color: var(--name-color);
}
.name-espresso {
  --name-color: var(--espresso-name);
  color: var(--name-color);
}
.name-yellow {
  --name-color: var(--yellow-name);
  color: var(--name-color);
  background: var(--yellow-name-bg);
  border-radius: 0.25em;
  padding: 0.06em 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  width: fit-content;
  max-width: 100%;
}
.name-red {
  --name-color: var(--red-name);
  color: var(--name-color);
}
.name-purple {
  --name-color: var(--purple-name);
  color: var(--name-color);
}
.name-orange {
  --name-color: var(--orange-name);
  color: var(--name-color);
}
.name-pink {
  --name-color: var(--pink-name);
  color: var(--name-color);
}
@media (forced-colors: active) {
  .name-yellow {
    color: LinkText;
    background: Canvas;
  }
}