/* [project]/frontend/main/app/globals.css [app-client] (css) */
.accountSubscriptionCard {
  --subscription-accent: #777;
  border: 1px solid
    color-mix(in srgb, var(--subscription-accent) 45%, var(--border-strong));
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--subscription-accent) 13%, var(--surface-card)),
    var(--surface-card) 58%);
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(18px, 3vw, 42px);
  padding: clamp(22px, 3vw, 36px);
  display: grid;
}

.accountSubscriptionCard > div > span {
  color: var(--subscription-accent);
  letter-spacing: .16em;
  font-size: 11px;
}

.accountSubscriptionCard h3 {
  margin: 7px 0;
  font-size: clamp(24px, 3vw, 38px);
}

.accountSubscriptionCard p {
  max-width: 640px;
  color: var(--text-secondary);
  margin: 0;
}

.accountSubscriptionCard small {
  color: var(--text-secondary);
  margin-top: 12px;
  display: block;
}

.accountSubscriptionCard ul {
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.accountSubscriptionCard li {
  border: 1px solid
    color-mix(in srgb, var(--subscription-accent) 25%, var(--border-strong));
  background: color-mix(in srgb, var(--surface-card) 88%, transparent);
  min-width: 92px;
  padding: 14px;
}

.accountSubscriptionCard li strong, .accountSubscriptionCard li span {
  display: block;
}

.accountSubscriptionCard li strong {
  color: var(--subscription-accent);
  font-size: 22px;
}

.accountSubscriptionCard li span {
  color: var(--text-secondary);
  margin-top: 4px;
  font-size: 11px;
}

.accountSubscriptionCard > a {
  color: var(--surface-card);
  background: var(--subscription-accent);
  white-space: nowrap;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.communicationScreenShareOptions button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.publicProfileRoles [data-audience="subscription"] {
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--role-accent) 54%, transparent);
}

@media (max-width: 900px) {
  .accountSubscriptionCard {
    grid-template-columns: 1fr;
  }

  .accountSubscriptionCard ul {
    overflow-x: auto;
  }

  .accountSubscriptionCard > a {
    justify-content: space-between;
  }
}

.adminStoreCheckoutAnalytics, .adminStoreExperimentAnalytics {
  background: var(--surface-subcard);
  border: 1px solid #1b1c1f;
  padding: 18px;
}

.adminStoreCheckoutAnalytics > header, .adminStoreExperimentAnalytics > header {
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 14px;
  display: flex;
}

.adminStoreCheckoutAnalytics > header p, .adminStoreExperimentAnalytics > header p {
  color: var(--color-accent);
  letter-spacing: .14em;
  margin: 0 0 9px;
  font-size: 10px;
}

.adminStoreCheckoutAnalytics h4, .adminStoreExperimentAnalytics h4 {
  color: #f4f2ef;
  text-transform: uppercase;
  margin: 0;
  font-size: 18px;
}

.adminStoreCheckoutAnalytics > header > span, .adminStoreExperimentAnalytics > header > span {
  color: #777775;
  max-width: 520px;
  font-size: 10px;
  line-height: 1.5;
}

.adminStoreCheckoutAnalytics > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.adminStoreCheckoutAnalytics > div > article {
  background: var(--surface-subcard);
  padding: 14px;
}

.adminStoreCheckoutAnalytics article > header {
  color: var(--color-accent);
  letter-spacing: .1em;
  justify-content: space-between;
  font-size: 10px;
  display: flex;
}

.adminStoreCheckoutAnalytics article > header span {
  color: #777775;
  letter-spacing: 0;
}

.adminStoreCheckoutAnalytics dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 14px 0;
  display: grid;
}

.adminStoreCheckoutAnalytics dl div {
  background: var(--surface-subcard);
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  display: flex;
}

.adminStoreCheckoutAnalytics dt {
  color: #777775;
  font-size: 9px;
}

.adminStoreCheckoutAnalytics dd {
  color: #f4f2ef;
  margin: 0;
  font-size: 10px;
}

.adminStoreCheckoutFailures {
  gap: 4px;
  display: grid;
}

.adminStoreCheckoutFailures div {
  color: #898785;
  border-top: 1px solid #242529;
  justify-content: space-between;
  gap: 10px;
  padding-top: 5px;
  font-size: 9px;
  display: flex;
}

.adminStoreCheckoutFailures strong {
  color: #f4f2ef;
}

.adminStoreCheckoutFailures small {
  color: #686866;
}

.adminStoreExperimentAnalytics > p {
  color: #686866;
  margin: 0;
  font-size: 11px;
}

.adminStoreExperimentAnalytics > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.adminStoreExperimentAnalytics > div > article {
  background: var(--surface-subcard);
  border-left: 2px solid #686866;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.adminStoreExperimentAnalytics > div > article[data-ready="true"] {
  border-color: #9ef234;
}

.adminStoreExperimentAnalytics article > header {
  justify-content: space-between;
  align-items: start;
  gap: 10px;
  display: flex;
}

.adminStoreExperimentAnalytics article > header div {
  gap: 5px;
  display: grid;
}

.adminStoreExperimentAnalytics article > header span {
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 8px;
}

.adminStoreExperimentAnalytics h5 {
  color: #f4f2ef;
  margin: 0;
  font-size: 14px;
}

.adminStoreExperimentAnalytics article > header b {
  color: #c1bfbc;
  text-align: right;
  max-width: 150px;
  font-size: 9px;
}

.adminStoreExperimentAnalytics article > p {
  color: #8b8986;
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
}

.adminStoreExperimentVariants {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.adminStoreExperimentVariants section {
  background: var(--surface-subcard);
  gap: 5px;
  padding: 10px;
  display: grid;
}

.adminStoreExperimentVariants section > header {
  color: #777775;
  justify-content: space-between;
  font-size: 8px;
  display: flex;
}

.adminStoreExperimentVariants section > strong {
  color: #f4f2ef;
  font-size: 22px;
}

.adminStoreExperimentVariants section > small, .adminStoreExperimentVariants section > footer {
  color: #6d6c69;
  font-size: 8px;
}

.adminStoreExperimentAnalytics article > footer {
  color: #777775;
  border-top: 1px solid #242529;
  grid-template-columns: 1fr auto;
  gap: 3px;
  padding-top: 8px;
  font-size: 9px;
  display: grid;
}

.adminStoreExperimentAnalytics article > footer strong {
  color: #f4f2ef;
}

.adminStoreExperimentAnalytics article > footer small {
  grid-column: 1 / -1;
}

.adminStoreExperimentLayout {
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 10px;
  display: grid;
}

.adminStoreExperimentLayout > aside {
  border-top: 1px solid #242529;
  flex-direction: column;
  max-height: 700px;
  display: flex;
  overflow: auto;
}

.adminStoreExperimentLayout > aside button {
  color: #aaa8a5;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid #242529;
  gap: 4px;
  padding: 12px;
  display: grid;
}

.adminStoreExperimentLayout > aside button:hover, .adminStoreExperimentLayout > aside button[data-active="true"] {
  color: #fff;
  background: var(--surface-subcard);
  box-shadow: inset 2px 0 var(--color-accent);
}

.adminStoreExperimentLayout > aside span {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.adminStoreExperimentLayout > aside small {
  color: #686866;
  text-transform: uppercase;
  font-size: 9px;
}

.adminStoreExperimentEditor {
  background: var(--surface-subcard);
  border: 1px solid #1b1c1f;
  align-content: start;
  gap: 14px;
  padding: 18px;
  display: grid;
}

.adminStoreExperimentEditor > header {
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  display: flex;
}

.adminStoreExperimentEditor > header div {
  gap: 4px;
  display: grid;
}

.adminStoreExperimentEditor > header span {
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 9px;
}

.adminStoreExperimentEditor > header h4 {
  color: #f4f2ef;
  margin: 0;
  font-size: 22px;
}

.adminStoreExperimentEditor > header small {
  color: #777775;
}

.adminStoreExperimentEditor > header b {
  color: #9ef234;
  text-transform: uppercase;
  background: #9ef23414;
  padding: 5px 7px;
  font-size: 9px;
}

.adminStoreExperimentFields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.adminStoreExperimentFields label {
  background: var(--surface-subcard);
  gap: 7px;
  padding: 10px;
  display: grid;
}

.adminStoreExperimentFields label > span {
  color: #777775;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9px;
}

.adminStoreExperimentFields input, .adminStoreExperimentFields select, .adminStoreExperimentFields textarea {
  box-sizing: border-box;
  color: #f4f2ef;
  width: 100%;
  min-width: 0;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.adminStoreExperimentFields textarea {
  resize: vertical;
  min-height: 68px;
}

.adminStoreExperimentFields .wide {
  grid-column: 1 / -1;
}

.adminStoreExperimentFields input:disabled, .adminStoreExperimentFields select:disabled {
  color: #686866;
  cursor: not-allowed;
}

.adminStoreExperimentEditor > p {
  color: #ffb347;
  margin: 0;
  font-size: 11px;
}

.adminStoreExperimentEditor > footer {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 42px;
  display: flex;
}

.adminStoreExperimentEditor > footer > span {
  color: #858583;
  font-size: 10px;
}

.adminStoreExperimentEditor button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

@media (max-width: 900px) {
  .adminStoreCheckoutAnalytics > header, .adminStoreExperimentAnalytics > header {
    flex-direction: column;
    align-items: start;
  }

  .adminStoreCheckoutAnalytics > div, .adminStoreExperimentAnalytics > div, .adminStoreExperimentLayout {
    grid-template-columns: 1fr;
  }

  .adminStoreExperimentLayout > aside {
    max-height: 190px;
  }

  .adminStoreMerchandising > header nav {
    flex-wrap: wrap;
  }
}

@media (max-width: 540px) {
  .adminStoreCheckoutAnalytics, .adminStoreExperimentAnalytics {
    padding: 14px;
  }

  .adminStoreCheckoutAnalytics dl, .adminStoreExperimentVariants, .adminStoreExperimentFields {
    grid-template-columns: 1fr;
  }

  .adminStoreExperimentFields .wide {
    grid-column: auto;
  }

  .adminStoreExperimentEditor > footer {
    flex-direction: column;
    align-items: stretch;
  }
}

.globalNotFound {
  color: #f5f2ed;
  background: radial-gradient(circle at 78% 18%,
      rgb(var(--color-accent-rgb) / .17),
      transparent 29rem),
    var(--surface-card);
  min-height: 100svh;
  margin: 0;
}

.globalNotFoundPage {
  box-sizing: border-box;
  color: #f5f2ed;
  background: radial-gradient(circle at 78% 18%,
      rgb(var(--color-accent-rgb) / .17),
      transparent 29rem),
    var(--surface-card);
  align-content: center;
  width: min(100%, 76rem);
  min-height: 100svh;
  margin: auto;
  padding: clamp(1.5rem, 6vw, 6rem);
  display: grid;
}

.globalNotFoundPage span, .globalNotFoundPage small {
  color: #8d8a86;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: .72rem;
}

.globalNotFoundCode {
  color: var(--color-accent);
  letter-spacing: -.1em;
  margin: 1.5rem 0 -1.4rem;
  font-size: clamp(7rem, 26vw, 20rem);
  font-weight: 800;
  line-height: .78;
}

.globalNotFoundPage h1 {
  letter-spacing: -.055em;
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 5.8rem);
  font-weight: 500;
  line-height: .94;
}

.globalNotFoundPage > p:not(.globalNotFoundCode) {
  color: #aaa7a2;
  max-width: 34rem;
  margin: 1.25rem 0 2rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.55;
}

.globalNotFoundPage > a {
  color: #050505;
  background: var(--color-accent);
  letter-spacing: .08em;
  border-radius: .45rem;
  width: fit-content;
  margin-bottom: 2rem;
  padding: .85rem 1.15rem;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}

.globalNotFoundPage small a {
  color: inherit;
  text-underline-offset: .2em;
}

.adminStore, .adminStore > section {
  gap: 16px;
  display: grid;
}

.adminStoreHero {
  background: linear-gradient(135deg,
    var(--surface-subcard),
    var(--surface-card));
  border-left: 3px solid var(--color-accent);
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  padding: 30px;
  display: flex;
}

.adminStoreHero p, .adminStore > section > header p {
  color: var(--color-accent);
  letter-spacing: .18em;
  margin: 0 0 8px;
  font-size: 10px;
}

.adminStoreHero h2, .adminStore > section > header h3 {
  color: #f4f2ef;
  text-transform: uppercase;
  margin: 0;
}

.adminStoreHero h2 {
  font-size: clamp(28px, 4vw, 54px);
}

.adminStoreHero span {
  color: #8d8d8b;
  max-width: 680px;
  margin-top: 10px;
  display: block;
}

.adminStoreHero > div:last-child {
  align-items: flex-end;
  gap: 8px;
  display: flex;
}

.adminStoreHero label {
  gap: 6px;
  display: grid;
}

.adminStoreHero label > span {
  color: #686866;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin: 0;
  font-size: 9px;
}

.adminStoreHero select {
  background: var(--surface-subcard);
  color: #f4f2ef;
  border: 1px solid #27282b;
  min-width: 150px;
  padding: 11px 34px 11px 12px;
}

.adminStoreCapability {
  background: var(--surface-subcard);
  color: #8d8d8b;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  display: flex;
}

.adminStoreCapability i {
  background: #ff6b57;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 16px #ff6b57;
}

.adminStoreCapability[data-ready="true"] i {
  background: #9ef234;
  box-shadow: 0 0 16px #9ef234;
}

.adminStoreCapability strong {
  color: #f4f2ef;
  letter-spacing: .12em;
  font-size: 11px;
}

.adminStoreCapability span {
  margin-left: auto;
  font-size: 11px;
}

.adminStoreMetrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.adminStoreMetrics article {
  background: var(--surface-subcard);
  border: 1px solid #191a1d;
  gap: 8px;
  min-height: 118px;
  padding: 18px;
  display: grid;
}

.adminStoreMetrics span, .adminStoreMetrics small {
  color: #737371;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10px;
}

.adminStoreMetrics strong {
  color: #f4f2ef;
  font-size: 28px;
}

.adminStoreColumns {
  grid-template-columns: 1.35fr 1fr;
  gap: 10px;
  display: grid;
}

.adminStoreColumns > section, .adminStoreAudit {
  background: var(--surface-card);
  border: 1px solid #1b1c1f;
  padding: 20px;
}

.adminStore > section > header, .adminStoreColumns > section > header {
  justify-content: space-between;
  align-items: start;
  margin-bottom: 16px;
  display: flex;
}

.adminStore > section > header strong, .adminStoreColumns > section > header > strong {
  color: var(--color-accent);
  font-size: 22px;
}

.adminStoreIssues, .adminStoreAttempts, .adminStoreAudit > div {
  gap: 7px;
  display: grid;
}

.adminStoreIssues article {
  background: var(--surface-subcard);
  border-left: 2px solid #ffb347;
  padding: 14px;
}

.adminStoreIssues article[data-status="manual_review"] {
  border-color: #ff6b57;
}

.adminStoreIssues article > div {
  color: #9c9b99;
  text-transform: uppercase;
  justify-content: space-between;
  font-size: 10px;
  display: flex;
}

.adminStoreIssues h4 {
  color: #f4f2ef;
  margin: 10px 0 5px;
}

.adminStoreIssues code {
  color: #71716f;
  font-size: 10px;
}

.adminStoreIssues p {
  color: #aaa8a5;
  margin: 8px 0;
}

.adminStoreIssues small {
  background: var(--surface-card);
  color: var(--color-accent);
  overflow-wrap: anywhere;
  padding: 8px;
  display: block;
}

.adminStoreAttempts article {
  background: var(--surface-subcard);
  align-items: center;
  gap: 12px;
  padding: 11px;
  display: flex;
}

.adminStoreAttempts i {
  background: #9ef234;
  width: 7px;
  height: 28px;
}

.adminStoreAttempts i[data-state="expired"] {
  background: #ff6b57;
}

.adminStoreAttempts div {
  grid-template-columns: 1fr auto;
  gap: 3px;
  width: 100%;
  display: grid;
}

.adminStoreAttempts strong {
  color: #f4f2ef;
  text-transform: uppercase;
  font-size: 11px;
}

.adminStoreAttempts span, .adminStoreAttempts small {
  color: #777775;
  font-size: 10px;
}

.adminStoreAttempts small {
  grid-column: 1 / -1;
}

.adminStoreAudit > div {
  max-height: 480px;
  overflow: auto;
}

.adminStoreAudit article {
  color: #8d8d8b;
  border-bottom: 1px solid #202124;
  grid-template-columns: 150px minmax(170px, 1fr) 140px minmax(220px, 1fr);
  gap: 12px;
  padding: 11px;
  font-size: 11px;
  display: grid;
}

.adminStoreAudit strong {
  color: #f4f2ef;
}

.adminStoreAudit code {
  color: #6f6f6d;
  overflow-wrap: anywhere;
}

.adminStoreEmpty, .adminStoreLoading, .adminStoreError {
  background: var(--surface-subcard);
  color: #8d8d8b;
  padding: 24px;
}

.adminStoreError {
  color: #ff6b57;
}

@media (max-width: 900px) {
  .adminStoreHero {
    flex-direction: column;
    align-items: stretch;
  }

  .adminStoreHero > div:last-child {
    align-items: stretch;
  }

  .adminStoreMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminStoreColumns {
    grid-template-columns: 1fr;
  }

  .adminStoreAudit article {
    grid-template-columns: 110px 1fr;
  }

  .adminStoreAudit article span, .adminStoreAudit article code {
    grid-column: 2;
  }
}

@media (max-width: 540px) {
  .adminStoreHero {
    padding: 20px;
  }

  .adminStoreHero > div:last-child {
    display: grid;
  }

  .adminStoreMetrics {
    grid-template-columns: 1fr;
  }

  .adminStoreCapability {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .adminStoreCapability span {
    width: 100%;
    margin: 0;
  }

  .adminStoreAudit article {
    grid-template-columns: 1fr;
  }

  .adminStoreAudit article span, .adminStoreAudit article code {
    grid-column: auto;
  }
}

.adminStoreConversion {
  background: var(--surface-card);
  border: 1px solid #1b1c1f;
  padding: 22px;
}

.adminStoreConversion > header {
  align-items: end !important;
}

.adminStoreConversion > header > div > span {
  color: #858583;
  max-width: 700px;
  font-size: 12px;
  display: block;
}

.adminStoreConversion > header nav {
  gap: 4px;
  display: flex;
}

.adminStoreConversion > header nav button {
  background: var(--surface-subcard);
  color: #777775;
  letter-spacing: .08em;
  cursor: pointer;
  border: 1px solid #242529;
  padding: 9px 11px;
  font-size: 10px;
}

.adminStoreConversion > header nav button[data-active="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #111;
  font-weight: 800;
}

.adminStoreFunnels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.adminStoreFunnels > article {
  background: var(--surface-subcard);
  border: 1px solid #1b1c1f;
  padding: 18px;
}

.adminStoreFunnels > article > header {
  justify-content: space-between;
  margin-bottom: 16px;
  display: flex;
}

.adminStoreFunnels > article > header div {
  gap: 5px;
  display: grid;
}

.adminStoreFunnels > article > header span {
  color: var(--color-accent);
  letter-spacing: .14em;
  font-size: 10px;
}

.adminStoreFunnels > article > header strong {
  color: #f4f2ef;
  font-size: 18px;
}

.adminStoreFunnels > article > header small {
  color: #9c9b99;
}

.adminStoreFunnelStages {
  gap: 8px;
  display: grid;
}

.adminStoreFunnelStages > div {
  grid-template-columns: minmax(100px, 1fr) minmax(100px, 3fr) 52px;
  align-items: center;
  gap: 9px;
  display: grid;
}

.adminStoreFunnelStages label {
  color: #858583;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  display: flex;
}

.adminStoreFunnelStages label strong {
  color: #f4f2ef;
}

.adminStoreFunnelStages > div > i {
  background: var(--surface-subcard-hover);
  height: 7px;
  display: block;
  overflow: hidden;
}

.adminStoreFunnelStages > div > i b {
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent));
  min-width: 2px;
  height: 100%;
  display: block;
}

.adminStoreFunnelStages > div > small {
  text-align: right;
  color: #858583;
  font-size: 10px;
}

.adminStoreChannelSignals {
  color: #777775;
  border-top: 1px solid #232428;
  grid-template-columns: 1fr auto;
  gap: 4px;
  margin-top: 16px;
  padding-top: 13px;
  font-size: 10px;
  display: grid;
}

.adminStoreChannelSignals strong {
  color: #f4f2ef;
}

.adminStoreChannelSignals small {
  grid-column: 1 / -1;
}

.adminStoreFunnels > article > footer {
  color: #777775;
  border-top: 1px solid #232428;
  grid-template-columns: 1fr auto;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  font-size: 10px;
  display: grid;
}

.adminStoreFunnels > article > footer strong {
  color: #f4f2ef;
}

.adminStoreFunnels > article > footer small {
  grid-column: 1 / -1;
}

.adminStoreAnalyticsRow {
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
  gap: 10px;
  display: grid;
}

.adminStoreSearchQuality, .adminStoreTrend {
  background: var(--surface-subcard);
  border: 1px solid #1b1c1f;
  padding: 18px;
}

.adminStoreSearchQuality > p, .adminStoreTrend > p, .adminStoreInsights > header p, .adminStoreProductAnalytics > header p {
  color: var(--color-accent);
  letter-spacing: .14em;
  margin: 0 0 9px;
  font-size: 10px;
}

.adminStoreSearchQuality > strong {
  color: #f4f2ef;
  font-size: 40px;
}

.adminStoreSearchQuality > span {
  color: #858583;
  margin-left: 8px;
  font-size: 11px;
}

.adminStoreSearchQuality dl {
  gap: 7px;
  margin: 16px 0;
  display: grid;
}

.adminStoreSearchQuality dl div {
  border-top: 1px solid #202124;
  justify-content: space-between;
  padding-top: 7px;
  display: flex;
}

.adminStoreSearchQuality dt {
  color: #777775;
}

.adminStoreSearchQuality dd {
  color: #f4f2ef;
  margin: 0;
}

.adminStoreSearchQuality > small {
  color: #686866;
}

.adminStoreTrend > div {
  border-bottom: 1px solid #2b2c2f;
  align-items: end;
  gap: 3px;
  height: 110px;
  padding-top: 14px;
  display: flex;
}

.adminStoreTrend > div > i {
  background: var(--color-accent);
  flex: 1;
  max-width: 18px;
  min-height: 4px;
}

.adminStoreTrend > div > i[data-source="game"] {
  background: #9ef234;
}

.adminStoreTrend footer {
  color: #777775;
  gap: 18px;
  margin-top: 10px;
  font-size: 10px;
  display: flex;
}

.adminStoreTrend footer i {
  background: var(--color-accent);
  width: 7px;
  height: 7px;
  margin-right: 5px;
  display: inline-block;
}

.adminStoreTrend footer i[data-source="game"] {
  background: #9ef234;
}

.adminStoreInsights {
  background: var(--surface-subcard);
  border: 1px solid #1b1c1f;
  padding: 18px;
}

.adminStoreInsights h4, .adminStoreProductAnalytics h4 {
  color: #f4f2ef;
  text-transform: uppercase;
  margin: 0;
  font-size: 18px;
}

.adminStoreInsights > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.adminStoreInsights > div article {
  background: var(--surface-subcard);
  border-left: 2px solid #6f6f6d;
  padding: 14px;
}

.adminStoreInsights > div article[data-severity="attention"] {
  border-color: #ffb347;
}

.adminStoreInsights > div article[data-severity="critical"] {
  border-color: #ff6b57;
}

.adminStoreInsights article > span {
  color: #777775;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 9px;
}

.adminStoreInsights h5 {
  color: #f4f2ef;
  margin: 8px 0;
}

.adminStoreInsights article p {
  color: #a19f9c;
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.55;
}

.adminStoreInsights article small {
  color: #686866;
}

.adminStoreProductAnalytics {
  background: var(--surface-subcard);
  border: 1px solid #1b1c1f;
  padding: 18px;
}

.adminStoreProductAnalytics > header > span {
  color: #777775;
  font-size: 10px;
}

.adminStoreProductTable {
  overflow: auto;
}

.adminStoreProductTable > div {
  border-top: 1px solid #242529;
  grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(90px, .65fr));
  min-width: 780px;
  display: grid;
}

.adminStoreProductTable > div > span {
  color: #9c9b99;
  align-content: center;
  gap: 3px;
  padding: 10px;
  font-size: 11px;
  display: grid;
}

.adminStoreProductTable > div > span:first-child {
  color: #f4f2ef;
}

.adminStoreProductTable > div > span small {
  color: #626260;
  font-size: 9px;
}

.adminStoreProductTable > div.head span {
  color: #686866;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9px;
}

.adminStorePrivacy {
  color: #5f5f5d;
  border-top: 1px solid #1e1f22;
  padding: 11px 0 0;
  font-size: 10px;
}

.adminStoreConversion {
  overflow: hidden;
}

@media (max-width: 900px) {
  .adminStoreConversion > header {
    flex-direction: column;
    align-items: stretch !important;
  }

  .adminStoreFunnels, .adminStoreAnalyticsRow, .adminStoreInsights > div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .adminStoreConversion {
    padding: 14px;
  }

  .adminStoreConversion > header nav {
    grid-template-columns: repeat(3, 1fr);
    display: grid;
  }

  .adminStoreFunnelStages > div {
    grid-template-columns: 86px minmax(70px, 1fr) 42px;
  }

  .adminStoreFunnels > article, .adminStoreProductAnalytics {
    padding: 14px;
  }
}

.adminStoreMerchandising {
  background: var(--surface-card);
  border: 1px solid #1b1c1f;
  padding: 22px;
  overflow: hidden;
}

.adminStoreMerchandising > header > div > span {
  color: #858583;
  max-width: 720px;
  font-size: 12px;
  line-height: 1.5;
  display: block;
}

.adminStoreMerchandising > header nav {
  gap: 4px;
  display: flex;
}

.adminStoreMerchandising > header nav button {
  color: #858583;
  background: var(--surface-subcard);
  cursor: pointer;
  text-transform: uppercase;
  border: 1px solid #242529;
  padding: 10px 13px;
  font-size: 10px;
}

.adminStoreMerchandising > header nav button[data-active="true"] {
  border-color: var(--color-accent);
  color: #0b0c0e;
  background: var(--color-accent);
  font-weight: 800;
}

.adminStoreMerchLayout, .adminStoreShowcaseLayout {
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 10px;
  display: grid;
}

.adminStoreMerchLayout > aside, .adminStoreShowcaseLayout > aside {
  border-top: 1px solid #242529;
  flex-direction: column;
  max-height: 670px;
  display: flex;
  overflow: auto;
}

.adminStoreMerchLayout > aside button, .adminStoreShowcaseLayout > aside button {
  color: #aaa8a5;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid #242529;
  gap: 4px;
  padding: 12px;
  display: grid;
}

.adminStoreMerchLayout > aside button:hover, .adminStoreShowcaseLayout > aside button:hover, .adminStoreMerchLayout > aside button[data-active="true"], .adminStoreShowcaseLayout > aside button[data-active="true"] {
  color: #fff;
  background: var(--surface-subcard);
  box-shadow: inset 2px 0 var(--color-accent);
}

.adminStoreMerchLayout > aside span, .adminStoreShowcaseLayout > aside span {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.adminStoreMerchLayout > aside small, .adminStoreShowcaseLayout > aside small {
  color: #686866;
  text-transform: uppercase;
  font-size: 9px;
}

.adminStoreMerchEditor, .adminStoreShowcaseEditor {
  background: var(--surface-subcard);
  border: 1px solid #1b1c1f;
  align-content: start;
  gap: 14px;
  padding: 18px;
  display: grid;
}

.adminStoreMerchEditor > header {
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  display: flex;
}

.adminStoreMerchEditor > header div {
  gap: 4px;
  display: grid;
}

.adminStoreMerchEditor > header span {
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 9px;
}

.adminStoreMerchEditor > header h4 {
  color: #f4f2ef;
  margin: 0;
  font-size: 22px;
}

.adminStoreMerchEditor > header small {
  color: #777775;
}

.adminStoreMerchEditor > header > b {
  color: #9ef234;
  text-transform: uppercase;
  background: #9ef23414;
  padding: 5px 7px;
  font-size: 9px;
}

.adminStoreMerchEditor > header > b[data-state="scheduled"] {
  color: #ffb347;
  background: #ffb34714;
}

.adminStoreMerchEditor > header > b[data-state="expired"] {
  color: #ff6b57;
  background: #ff6b5714;
}

.adminStoreMerchFields, .adminStoreShowcaseFields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.adminStoreMerchFields label, .adminStoreShowcaseFields label {
  background: var(--surface-subcard);
  gap: 7px;
  padding: 10px;
  display: grid;
}

.adminStoreMerchFields label > span, .adminStoreShowcaseFields label > span {
  color: #777775;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9px;
}

.adminStoreMerchFields input, .adminStoreShowcaseFields input, .adminStoreShowcaseFields select, .adminStoreShowcaseFields textarea, .adminStoreShowcaseProducts header input {
  box-sizing: border-box;
  color: #f4f2ef;
  width: 100%;
  min-width: 0;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.adminStoreShowcaseFields textarea {
  resize: vertical;
  min-height: 64px;
}

.adminStoreShowcaseFields .wide {
  grid-column: 1 / -1;
}

.adminStoreShowcaseFields .adminStoreToggle {
  align-items: center;
  gap: 9px;
  min-height: 42px;
  display: flex;
}

.adminStoreShowcaseFields .adminStoreToggle input {
  width: auto;
}

.adminStoreMerchEditor > p, .adminStoreShowcaseEditor > p {
  color: #ffb347;
  margin: 0;
  font-size: 11px;
}

.adminStoreMerchEditor > footer, .adminStoreShowcaseEditor > footer {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 42px;
  display: flex;
}

.adminStoreMerchEditor > footer > span, .adminStoreShowcaseEditor > footer > span {
  color: #858583;
  font-size: 10px;
}

.adminStoreMerchEditor button:disabled, .adminStoreShowcaseEditor button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.adminStoreShowcaseProducts {
  gap: 10px;
  display: grid;
}

.adminStoreShowcaseProducts > header {
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  display: flex;
}

.adminStoreShowcaseProducts > header > div {
  gap: 3px;
  display: grid;
}

.adminStoreShowcaseProducts > header strong {
  color: #f4f2ef;
  font-size: 13px;
}

.adminStoreShowcaseProducts > header span {
  color: var(--color-accent);
  font-size: 9px;
}

.adminStoreShowcaseProducts > header input {
  background: var(--surface-subcard);
  border: 1px solid #28292c;
  max-width: 240px;
  padding: 9px 11px;
}

.adminStoreShowcaseOrder {
  gap: 3px;
  display: grid;
}

.adminStoreShowcaseOrder article {
  background: var(--surface-subcard);
  grid-template-columns: 28px minmax(120px, 1fr) minmax(100px, 1fr) repeat(3, 28px);
  align-items: center;
  gap: 6px;
  padding: 7px;
  display: grid;
}

.adminStoreShowcaseOrder article > span {
  color: var(--color-accent);
  font-size: 9px;
}

.adminStoreShowcaseOrder article > strong {
  color: #f4f2ef;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.adminStoreShowcaseOrder article > small {
  color: #686866;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.adminStoreShowcaseOrder button {
  color: #9c9b99;
  background: var(--surface-subcard);
  cursor: pointer;
  border: 1px solid #292a2d;
  height: 28px;
}

.adminStoreShowcasePool {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  max-height: 280px;
  display: grid;
  overflow: auto;
}

.adminStoreShowcasePool label {
  background: var(--surface-subcard);
  cursor: pointer;
  border: 1px solid #202124;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  display: grid;
}

.adminStoreShowcasePool label[data-selected="true"] {
  border-color: rgb(var(--color-accent-rgb) / .5);
  background: rgb(var(--color-accent-rgb) / .05);
}

.adminStoreShowcasePool label > span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.adminStoreShowcasePool strong, .adminStoreShowcasePool small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.adminStoreShowcasePool strong {
  color: #f4f2ef;
  font-size: 10px;
}

.adminStoreShowcasePool small {
  color: #686866;
  font-size: 8px;
}

.adminStoreShowcasePool em {
  color: var(--color-accent);
  font-size: 9px;
  font-style: normal;
}

.adminStoreShowcaseProducts > p {
  color: #686866;
  background: var(--surface-subcard);
  margin: 0;
  padding: 12px;
  font-size: 10px;
}

@media (max-width: 900px) {
  .adminStoreMerchandising > header {
    flex-direction: column;
    align-items: stretch !important;
  }

  .adminStoreMerchLayout, .adminStoreShowcaseLayout {
    grid-template-columns: 1fr;
  }

  .adminStoreMerchLayout > aside, .adminStoreShowcaseLayout > aside {
    max-height: 190px;
  }

  .adminStoreShowcasePool {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .adminStoreMerchandising {
    padding: 14px;
  }

  .adminStoreMerchandising > header nav {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .adminStoreMerchFields, .adminStoreShowcaseFields {
    grid-template-columns: 1fr;
  }

  .adminStoreShowcaseFields .wide {
    grid-column: auto;
  }

  .adminStoreShowcaseOrder article {
    grid-template-columns: 24px minmax(100px, 1fr) repeat(3, 26px);
  }

  .adminStoreShowcaseOrder article > small {
    display: none;
  }

  .adminStoreMerchEditor > footer, .adminStoreShowcaseEditor > footer {
    flex-direction: column;
    align-items: stretch;
  }
}

.astraServerPage {
  background: var(--surface-card);
  color: #f7f5f2;
}

.astraServerHero {
  border: 0;
  border-radius: 42px;
}

.astraHeroMedia, .astraHeroShade {
  position: absolute;
  inset: 0;
}

.astraHeroMedia {
  z-index: -2;
}

.astraHeroMedia img {
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(.84) contrast(1.08);
  transform: scale(1.015);
}

.astraHeroShade {
  background: linear-gradient(90deg,
      #030303fa 0%,
      #030303c2 37%,
      #03030324 72%),
    linear-gradient(0deg, #030303f0 0%, transparent 53%),
    linear-gradient(180deg, #0303036b 0%, transparent 30%),
    radial-gradient(circle at 76% 62%,
      rgb(var(--color-accent-rgb) / .2),
      transparent 34%);
}

.astraHeroBreadcrumb {
  z-index: 6;
  position: absolute;
  top: 132px;
  left: 4.3vw;
}

.astraHeroCopy {
  z-index: 5;
  width: min(860px, 60vw);
  position: absolute;
  bottom: clamp(150px, 17vh, 205px);
  left: 4.3vw;
}

.astraHeroCopy .sectionEyebrow {
  color: var(--color-accent);
}

.astraHeroCopy h1 {
  letter-spacing: .005em;
  margin: 24px 0 0;
  font-size: clamp(116px, 14.5vw, 270px);
  font-weight: 390;
  line-height: .7;
}

.astraHeroCopy h2 {
  letter-spacing: -.005em;
  text-wrap: balance;
  max-width: 780px;
  margin: 42px 0 0;
  font-size: clamp(35px, 3.7vw, 68px);
  font-weight: 390;
  line-height: .96;
}

.astraHeroCopy > p:not(.sectionEyebrow) {
  color: #ffffffb3;
  max-width: 590px;
  margin: 23px 0 0;
  font-size: 14px;
  line-height: 1.52;
}

.astraHeroActions {
  align-items: center;
  gap: 28px;
  margin-top: 34px;
  display: flex;
}

.astraHeroActions .button {
  width: min(250px, 100%);
}

.astraHeroActions > a:last-child {
  color: #ffffffc2;
  letter-spacing: .04em;
  text-transform: uppercase;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.astraHeroActions > a:last-child:hover {
  color: #fff;
}

.astraHeroFacts {
  z-index: 5;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #090909c7;
  border-radius: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(720px, 44vw);
  display: grid;
  position: absolute;
  bottom: 32px;
  right: 3vw;
  overflow: hidden;
}

.astraHeroFacts > div {
  grid-template-columns: 28px 1fr;
  align-content: center;
  gap: 8px 12px;
  min-height: 98px;
  padding: 20px;
  display: grid;
}

.astraHeroFacts > div + div {
  background: #ffffff09;
}

.astraHeroFacts span {
  color: var(--color-accent);
  grid-row: 1 / span 2;
  font-size: 10px;
}

.astraHeroFacts strong {
  letter-spacing: .055em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
}

.astraHeroFacts small {
  color: #ffffff80;
  font-size: 10px;
}

.astraMovementSection, .astraPossibilitiesSection, .astraShowcaseSection, .astraRulesSection, .astraServerFaq, .astraNextSection {
  padding: clamp(105px, 10vw, 180px) 4.3vw;
}

.astraMovementSection {
  color: #090909;
  background: #efede8;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 30px 1.1vw;
  display: grid;
  overflow: hidden;
}

.astraMovementSection > header {
  grid-column: 1 / span 10;
}

.astraMovementSection > header .sectionEyebrow, .astraPossibilitiesHeading .sectionEyebrow, .astraShowcaseHeading .sectionEyebrow, .astraRulesHeading .sectionEyebrow, .astraNextSection > .sectionEyebrow {
  color: #0000007a;
}

.astraMovementSection h2, .astraPossibilitiesHeading h2, .astraShowcaseHeading h2, .astraRulesHeading h2, .astraServerFaq h2, .astraLaunchCopy h2 {
  letter-spacing: -.008em;
  text-wrap: balance;
  margin: 26px 0 0;
  font-size: clamp(60px, 7.3vw, 134px);
  font-weight: 380;
  line-height: .87;
}

.astraMovementVisual {
  background: var(--surface-card);
  border-radius: 28px;
  grid-column: 1 / span 9;
  margin-top: clamp(65px, 7vw, 120px);
  position: relative;
  overflow: hidden;
}

.astraMovementVisual img {
  object-fit: cover;
  width: 100%;
  height: min(740px, 58vw);
  display: block;
}

.astraMovementVisual > span {
  color: #fff;
  letter-spacing: .01em;
  font-size: clamp(28px, 4.3vw, 78px);
  font-weight: 500;
  line-height: .8;
  position: absolute;
  bottom: 22px;
  left: 24px;
}

.astraMovementSection > aside {
  grid-column: 10 / -1;
  align-self: end;
  padding: 0 1vw 18px 1.4vw;
}

.astraMovementSection > aside p {
  color: #000000a8;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.astraMovementSection > aside a {
  color: var(--color-accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  gap: 20px;
  margin-top: 34px;
  font-size: 10px;
  font-weight: 650;
  display: inline-flex;
}

.astraPossibilitiesSection {
  background: radial-gradient(circle at 82% 8%,
      rgb(var(--color-accent-rgb) / .38),
      transparent 31%),
    var(--surface-card);
}

.astraPossibilitiesHeading {
  grid-template-columns: minmax(130px, .5fr) minmax(540px, 2fr) minmax(260px, .7fr);
  gap: 5vw;
  display: grid;
}

.astraPossibilitiesHeading .sectionEyebrow, .astraShowcaseHeading .sectionEyebrow, .astraRulesHeading .sectionEyebrow {
  color: #ffffff75;
}

.astraPossibilitiesHeading h2 {
  margin-top: 0;
}

.astraPossibilitiesHeading > p:last-child, .astraShowcaseHeading > p:last-child {
  color: #ffffff9c;
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 1.52;
}

.astraPhysicsStrip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(70px, 7vw, 120px);
  display: grid;
}

.astraPhysicsStrip article {
  background: #ffffff0b;
  border-radius: 26px;
  flex-direction: column;
  min-height: 390px;
  padding: 28px;
  display: flex;
}

.astraPhysicsStrip article:nth-child(2) {
  background: linear-gradient(145deg,
    var(--color-accent) 0%,
    #dc2100 56%,
    #690500 100%);
}

.astraPhysicsStrip article > span {
  color: #ffffff7a;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 9px;
}

.astraPhysicsStrip strong {
  letter-spacing: .005em;
  margin: auto 0 0;
  font-size: clamp(54px, 5.4vw, 96px);
  font-weight: 430;
  line-height: .82;
}

.astraPhysicsStrip p {
  color: #ffffff9e;
  max-width: 360px;
  margin: 28px 0 0;
  font-size: 13px;
  line-height: 1.48;
}

.astraShowcaseSection {
  background: var(--surface-card);
}

.astraShowcaseHeading {
  grid-template-columns: minmax(130px, .48fr) minmax(520px, 1.75fr) minmax(260px, .72fr);
  gap: 5vw;
  display: grid;
}

.astraShowcaseHeading h2 {
  margin-top: 0;
}

.astraShowcaseGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(58px, 6vw, 104px) 16px;
  margin-top: clamp(75px, 8vw, 130px);
  display: grid;
}

.astraShowcaseCard {
  min-width: 0;
  margin: 0;
}

.astraShowcaseCard1, .astraShowcaseCard4 {
  grid-column: 1 / -1;
}

.astraShowcaseCard img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(.92) contrast(1.02);
  border-radius: 20px;
  width: 100%;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .3s;
  display: block;
}

.astraShowcaseCard:hover img {
  filter: saturate(1.05) contrast(1.03);
  transform: scale(1.008);
}

.astraShowcaseCard figcaption {
  grid-template-columns: 1fr;
  gap: 13px;
  padding: 20px 2px 0;
  display: grid;
}

.astraShowcaseCard figcaption > span {
  color: #ffffff6e;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 9px;
}

.astraShowcaseCard h3 {
  letter-spacing: -.006em;
  margin: 0;
  font-size: clamp(29px, 2.7vw, 50px);
  font-weight: 390;
  line-height: .95;
}

.astraShowcaseCard figcaption > p {
  color: #ffffff8f;
  max-width: 520px;
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.48;
}

.astraShowcaseCard1 figcaption, .astraShowcaseCard4 figcaption {
  grid-template-columns: minmax(110px, .32fr) minmax(360px, 1fr) minmax(260px, .7fr);
  gap: 3vw;
}

.astraShowcaseCard1 figcaption > p, .astraShowcaseCard4 figcaption > p {
  grid-column: 3;
}

.astraRulesSection {
  color: #090909;
  background: #efede8;
}

.astraRulesHeading {
  grid-template-columns: minmax(130px, .48fr) minmax(620px, 2.1fr);
  gap: 5vw;
  display: grid;
}

.astraRulesHeading .sectionEyebrow {
  color: #00000075;
}

.astraRulesHeading h2 {
  margin-top: 0;
}

.astraRuleRows {
  margin: clamp(70px, 7vw, 115px) 0 0 calc(20% + 5vw);
}

.astraRuleRows article {
  grid-template-columns: 55px minmax(220px, .75fr) minmax(320px, 1.25fr);
  gap: 3vw;
  padding: 31px 0;
  display: grid;
  box-shadow: inset 0 -1px #00000026;
}

.astraRuleRows article:first-child {
  box-shadow: inset 0 1px #00000026, inset 0 -1px #00000026;
}

.astraRuleRows span {
  color: var(--color-accent);
  font-size: 10px;
}

.astraRuleRows h3 {
  margin: 0;
  font-size: clamp(25px, 2.4vw, 42px);
  font-weight: 440;
  line-height: .98;
}

.astraRuleRows p {
  color: #0000009e;
  max-width: 580px;
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

.astraRulesLink {
  background: var(--surface-card);
  color: #f7f5f2;
  border-radius: 24px;
  grid-template-columns: 1fr auto 36px;
  align-items: end;
  gap: 28px;
  min-height: 170px;
  margin: 8px 0 0 calc(20% + 5vw);
  padding: 28px;
  display: grid;
}

.astraRulesLink span {
  font-size: clamp(31px, 3.2vw, 55px);
  font-weight: 390;
  line-height: .94;
}

.astraRulesLink strong {
  color: var(--color-accent);
  font-size: 13px;
}

.astraRulesLink i {
  font-size: 22px;
  font-style: normal;
  transition: transform .2s;
}

.astraRulesLink:hover i {
  transform: translate(4px, -4px);
}

.astraServerFaq {
  background: var(--surface-card);
  color: #f7f5f2;
}

.astraServerFaq .astraFaqHeading {
  grid-template-columns: minmax(130px, .48fr) minmax(620px, 2.1fr);
}

.astraServerFaq .astraFaqHeading .sectionEyebrow {
  color: #ffffff73;
}

.astraServerFaq .astraFaqList {
  border-top: 0;
}

.astraServerFaq .astraFaqList details {
  border-bottom: 0;
  box-shadow: inset 0 -1px #ffffff21;
}

.astraServerFaq .astraFaqList details:first-child {
  box-shadow: inset 0 1px #ffffff21, inset 0 -1px #ffffff21;
}

.astraServerFaq .astraFaqList summary > span {
  color: var(--color-accent);
}

.astraServerFaq .astraFaqList summary strong {
  color: #f7f5f2;
}

.astraServerFaq .astraFaqList summary i {
  color: #ffffffa8;
}

.astraServerFaq .astraFaqList details > p {
  color: #ffffff94;
}

.astraLaunchSection {
  background: var(--surface-card);
  min-height: min(880px, 92svh);
  position: relative;
  overflow: hidden;
}

.astraLaunchSection > img, .astraLaunchSection > div:first-of-type {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.astraLaunchSection > img {
  object-fit: cover;
  object-position: center 54%;
}

.astraLaunchSection > div:first-of-type {
  background: linear-gradient(90deg, #030303f2 0%, #0303039e 46%, #0303031f 78%), linear-gradient(0deg, #030303eb, #0000 60%);
}

.astraLaunchCopy {
  z-index: 2;
  max-width: 1000px;
  position: absolute;
  bottom: clamp(58px, 8vw, 130px);
  left: 4.3vw;
}

.astraLaunchCopy h2 {
  max-width: 980px;
}

.astraLaunchCopy > p:not(.sectionEyebrow) {
  color: #ffffffad;
  max-width: 560px;
  margin: 28px 0 0 6vw;
  font-size: 14px;
  line-height: 1.5;
}

.astraLaunchCopy .button {
  width: min(260px, 100%);
  margin: 36px 0 0 6vw;
}

.astraNextSection {
  background: var(--color-accent);
  color: #080808;
}

.astraNextSection > .sectionEyebrow {
  margin-bottom: 70px;
}

.astraNextSection > a {
  grid-template-columns: minmax(170px, .4fr) minmax(360px, 1fr) minmax(280px, .65fr) 42px;
  align-items: end;
  gap: 4vw;
  display: grid;
  position: relative;
}

.astraNextSection > a > span, .astraNextSection > a > small {
  color: #0000009e;
  font-size: 11px;
  line-height: 1.45;
}

.astraNextSection > a > strong {
  letter-spacing: .005em;
  font-size: clamp(76px, 10vw, 180px);
  font-weight: 440;
  line-height: .72;
}

.astraNextSection > a > i {
  font-size: 30px;
  font-style: normal;
  transition: transform .2s;
}

.astraNextSection > a:hover > i {
  transform: translate(5px, -5px);
}

@media (max-width: 1180px) {
  .astraHeroCopy {
    width: min(760px, 68vw);
  }

  .astraHeroFacts {
    width: min(650px, 55vw);
  }

  .astraMovementSection > header, .astraMovementVisual {
    grid-column: 1 / span 8;
  }

  .astraMovementSection > aside {
    grid-column: 9 / -1;
  }

  .astraPossibilitiesHeading, .astraShowcaseHeading {
    grid-template-columns: 150px minmax(460px, 1fr);
  }

  .astraPossibilitiesHeading > p:last-child, .astraShowcaseHeading > p:last-child {
    grid-column: 2;
    max-width: 650px;
  }
}

@media (max-width: 920px) {
  .astraServerHero {
    border-radius: 32px;
    height: max(820px, 100svh - 12px);
    min-height: 820px;
  }

  .astraHeroMedia img {
    object-position: 58% center;
  }

  .astraHeroShade {
    background: linear-gradient(0deg, #030303fa 0%, #030303c2 48%, #0303031f 85%), linear-gradient(#0303038f, #0000 30%);
  }

  .astraHeroBreadcrumb {
    top: 106px;
    left: 28px;
  }

  .astraHeroCopy {
    width: auto;
    bottom: 205px;
    left: 28px;
    right: 28px;
  }

  .astraHeroCopy h1 {
    font-size: clamp(92px, 22vw, 170px);
  }

  .astraHeroCopy h2 {
    max-width: 680px;
    margin-top: 30px;
  }

  .astraHeroCopy > p:not(.sectionEyebrow) {
    max-width: 620px;
  }

  .astraHeroFacts {
    width: auto;
    bottom: 22px;
    left: 24px;
    right: 24px;
  }

  .astraMovementSection, .astraPossibilitiesSection, .astraShowcaseSection, .astraRulesSection, .astraServerFaq, .astraNextSection {
    padding: 100px 28px;
  }

  .astraMovementSection > header, .astraMovementVisual, .astraMovementSection > aside {
    grid-column: 1 / -1;
  }

  .astraMovementVisual img {
    height: min(680px, 78vw);
  }

  .astraMovementSection > aside {
    max-width: 660px;
    padding: 22px 0 0;
  }

  .astraPossibilitiesHeading, .astraShowcaseHeading, .astraRulesHeading, .astraServerFaq .astraFaqHeading {
    grid-template-columns: 1fr;
  }

  .astraPossibilitiesHeading > p:last-child, .astraShowcaseHeading > p:last-child {
    grid-column: auto;
    max-width: 680px;
    margin-top: 24px;
  }

  .astraPossibilitiesHeading h2, .astraShowcaseHeading h2, .astraRulesHeading h2, .astraServerFaq h2 {
    margin-top: 20px;
  }

  .astraPhysicsStrip {
    grid-template-columns: 1fr;
  }

  .astraPhysicsStrip article {
    min-height: 290px;
  }

  .astraShowcaseCard1, .astraShowcaseCard4 {
    grid-column: 1 / -1;
  }

  .astraRuleRows, .astraRulesLink, .astraServerFaq .astraFaqList {
    margin-left: 0;
  }

  .astraNextSection > a {
    grid-template-columns: 150px 1fr 42px;
  }

  .astraNextSection > a > small {
    grid-column: 2;
  }
}

@media (max-width: 560px) {
  .astraServerHero {
    border-radius: 26px;
    height: max(860px, 100svh - 12px);
    min-height: 860px;
  }

  .astraHeroBreadcrumb {
    top: 92px;
    left: 20px;
  }

  .astraHeroCopy {
    bottom: 258px;
    left: 20px;
    right: 20px;
  }

  .astraHeroCopy h1 {
    margin-top: 20px;
    font-size: clamp(86px, 27vw, 124px);
  }

  .astraHeroCopy h2 {
    margin-top: 27px;
    font-size: clamp(30px, 9.5vw, 44px);
  }

  .astraHeroCopy > p:not(.sectionEyebrow) {
    margin-top: 18px;
    font-size: 12px;
  }

  .astraHeroActions {
    gap: 18px;
    margin-top: 25px;
  }

  .astraHeroActions .button {
    width: 188px;
  }

  .astraHeroActions > a:last-child {
    font-size: 9px;
  }

  .astraHeroFacts {
    border-radius: 18px;
    grid-template-columns: 1fr;
    bottom: 16px;
    left: 16px;
    right: 16px;
  }

  .astraHeroFacts > div {
    grid-template-columns: 24px 1fr auto;
    min-height: 54px;
    padding: 10px 14px;
  }

  .astraHeroFacts span {
    grid-row: auto;
  }

  .astraHeroFacts small {
    text-align: right;
  }

  .astraMovementSection, .astraPossibilitiesSection, .astraShowcaseSection, .astraRulesSection, .astraServerFaq, .astraNextSection {
    padding: 82px 20px;
  }

  .astraMovementSection h2, .astraPossibilitiesHeading h2, .astraShowcaseHeading h2, .astraRulesHeading h2, .astraServerFaq h2, .astraLaunchCopy h2 {
    font-size: clamp(46px, 13.4vw, 66px);
  }

  .astraMovementVisual {
    border-radius: 18px;
    margin-top: 48px;
  }

  .astraMovementVisual img {
    height: 112vw;
  }

  .astraMovementVisual > span {
    font-size: 34px;
    bottom: 17px;
    left: 17px;
  }

  .astraPhysicsStrip {
    margin-top: 52px;
  }

  .astraPhysicsStrip article {
    border-radius: 20px;
    min-height: 245px;
    padding: 22px;
  }

  .astraShowcaseGrid {
    margin-top: 58px;
    display: block;
  }

  .astraShowcaseCard + .astraShowcaseCard {
    margin-top: 58px;
  }

  .astraShowcaseCard img, .astraShowcaseCard1 img, .astraShowcaseCard4 img {
    aspect-ratio: 4 / 3;
    border-radius: 17px;
  }

  .astraShowcaseCard figcaption, .astraShowcaseCard1 figcaption, .astraShowcaseCard4 figcaption {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 18px;
  }

  .astraShowcaseCard figcaption > p, .astraShowcaseCard1 figcaption > p, .astraShowcaseCard4 figcaption > p {
    grid-column: 1;
  }

  .astraRuleRows {
    margin-top: 55px;
  }

  .astraRuleRows article {
    grid-template-columns: 32px 1fr;
    gap: 15px;
    padding: 27px 0;
  }

  .astraRuleRows article p {
    grid-column: 2;
  }

  .astraRulesLink {
    border-radius: 19px;
    grid-template-columns: 1fr 28px;
    gap: 18px;
    min-height: 145px;
    padding: 22px;
  }

  .astraRulesLink strong {
    grid-column: 1;
  }

  .astraRulesLink i {
    grid-area: 1 / 2 / span 2;
  }

  .astraServerFaq .astraFaqList {
    margin-top: 52px;
  }

  .astraLaunchSection {
    min-height: 760px;
  }

  .astraLaunchSection > img {
    object-position: 63% center;
  }

  .astraLaunchSection > div:first-of-type {
    background: linear-gradient(0deg, #030303fa 0%, #0303039e 54%, #0303031f 88%);
  }

  .astraLaunchCopy {
    bottom: 54px;
    left: 20px;
    right: 20px;
  }

  .astraLaunchCopy > p:not(.sectionEyebrow), .astraLaunchCopy .button {
    margin-left: 0;
  }

  .astraNextSection > .sectionEyebrow {
    margin-bottom: 48px;
  }

  .astraNextSection > a {
    grid-template-columns: 1fr 30px;
  }

  .astraNextSection > a > span, .astraNextSection > a > strong, .astraNextSection > a > small {
    grid-column: 1;
  }

  .astraNextSection > a > i {
    grid-area: 1 / 2 / span 3;
  }
}

.achievementCatalogPage {
  background: var(--surface-card);
  color: #f5f3ee;
}

.achievementCatalogHero {
  background: var(--surface-subcard);
  border-radius: 0 0 44px 44px;
  min-height: 620px;
  position: relative;
  overflow: hidden;
}

.achievementCatalogHero:before {
  content: "";
  filter: saturate(.68) contrast(1.08);
  opacity: .32;
  background-image: url("/games/astra/astra-minecraft-mobile-base.jpg");
  background-position: 50% 42%;
  background-size: cover;
  position: absolute;
  inset: 0;
}

.achievementCatalogHero:after {
  content: "";
  background: #04040494;
  position: absolute;
  inset: 0;
}

.achievementCatalogHero > .siteHeader {
  z-index: 3;
}

.achievementCatalogHeroCopy {
  z-index: 2;
  align-content: end;
  width: min(880px, 100% - 96px);
  min-height: 440px;
  padding: 120px 0 54px 54px;
  display: grid;
  position: relative;
}

.achievementCatalogHeroCopy > span {
  color: var(--color-accent);
  letter-spacing: .15em;
  font-size: 10px;
  font-weight: 760;
}

.achievementCatalogHeroCopy h1 {
  letter-spacing: -.065em;
  max-width: 820px;
  margin: 16px 0 14px;
  font-size: clamp(54px, 7.5vw, 116px);
  line-height: .86;
}

.achievementCatalogHeroCopy p {
  color: #ffffff9e;
  max-width: 540px;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.achievementCatalogHeroCopy a {
  color: #fff;
  border: 1px solid #fff3;
  border-radius: 15px;
  align-items: center;
  gap: 28px;
  width: max-content;
  min-height: 48px;
  margin-top: 30px;
  padding: 0 18px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.achievementCatalogHeroCopy a:hover {
  background: #ffffff14;
  border-color: #ffffff7a;
}

.achievementCatalogHeroCopy a svg {
  width: 16px;
}

.achievementCatalogPrinciples {
  z-index: 2;
  border-top: 1px solid #ffffff29;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 46px 34px;
  display: grid;
  position: relative;
}

.achievementCatalogPrinciples > span {
  min-height: 84px;
  color: var(--color-accent);
  align-content: center;
  gap: 8px;
  font-size: 9px;
  display: grid;
}

.achievementCatalogPrinciples > span + span {
  border-left: 1px solid #ffffff1f;
  padding-left: 24px;
}

.achievementCatalogPrinciples b {
  color: #f5f3ee;
  font-size: 12px;
  font-weight: 650;
}

.achievementCatalogGroups {
  gap: 76px;
  padding: 92px clamp(22px, 5vw, 78px) 120px;
  display: grid;
}

.achievementCatalogGroup {
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 38px;
  display: grid;
}

.achievementCatalogGroup > header {
  align-items: center;
  gap: 16px;
  height: max-content;
  display: flex;
  position: sticky;
  top: 96px;
}

.achievementCatalogGroup > header > span {
  background: var(--surface-subcard);
  width: 46px;
  height: 46px;
  color: var(--color-accent);
  border-radius: 14px;
  place-items: center;
  display: grid;
}

.achievementCatalogGroup > header svg {
  width: 20px;
}

.achievementCatalogGroup > header small {
  color: #ffffff57;
  letter-spacing: .12em;
  font-size: 8px;
}

.achievementCatalogGroup > header h2 {
  letter-spacing: -.035em;
  margin: 3px 0 0;
  font-size: 24px;
}

.achievementCatalogGroup > div {
  border-top: 1px solid #ffffff1f;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.achievementCatalogGroup article {
  background: var(--surface-card);
  border-bottom: 1px solid #ffffff17;
  border-right: 1px solid #ffffff17;
  grid-template-rows: 1fr auto;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 0 18px;
  min-height: 220px;
  padding: 24px;
  scroll-margin-top: 112px;
  display: grid;
}

.achievementCatalogGroup article:nth-child(2n) {
  border-right: 0;
}

.achievementBadge {
  background: var(--surface-subcard);
  color: #ffffffc2;
  border-radius: 18px;
  place-items: center;
  width: 56px;
  height: 56px;
  display: grid;
}

.achievementBadge svg {
  width: 22px;
}

.achievementBadge span {
  display: none;
}

.achievementCatalogGroup article[data-rarity="rare"] .achievementBadge {
  color: #72d8ff;
}

.achievementCatalogGroup article[data-rarity="epic"] .achievementBadge {
  color: #ba91ff;
}

.achievementCatalogGroup article[data-rarity="legendary"] .achievementBadge {
  color: #ffb13b;
}

.achievementCardCopy small {
  color: #ffffff4f;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 700;
}

.achievementCardCopy h3 {
  letter-spacing: -.035em;
  margin: 9px 0 6px;
  font-size: 20px;
}

.achievementCardCopy p {
  color: #ffffff80;
  max-width: 380px;
  margin: 0;
  font-size: 11px;
  line-height: 1.48;
}

.achievementCatalogGroup dl {
  border-top: 1px solid #ffffff14;
  grid-column: 1 / -1;
  align-self: end;
  gap: 30px;
  margin: 24px 0 0;
  padding-top: 15px;
  display: flex;
}

.achievementCatalogGroup dl div {
  gap: 4px;
  display: grid;
}

.achievementCatalogGroup dt {
  color: #ffffff47;
  text-transform: uppercase;
  font-size: 8px;
}

.achievementCatalogGroup dd {
  color: #f2f0eb;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
}

.achievementCatalogEmpty {
  text-align: center;
  min-height: 300px;
  padding: 100px;
}

.achievementCenter {
  background: var(--surface-card);
  color: #f4f2ed;
  border: 1px solid #ffffff1a;
  border-radius: 26px;
  overflow: hidden;
}

.achievementCenterHeader {
  border-bottom: 1px solid #ffffff17;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  min-height: 118px;
  padding: 26px 28px;
  display: flex;
}

.achievementCenterHeader span {
  color: var(--color-accent);
  letter-spacing: .14em;
  font-size: 8px;
  font-weight: 760;
}

.achievementCenterHeader h2 {
  letter-spacing: -.05em;
  margin: 8px 0 0;
  font-size: 34px;
}

.achievementCenterHeader a {
  color: #ffffff9e;
  align-items: center;
  gap: 15px;
  font-size: 10px;
  font-weight: 650;
  display: inline-flex;
}

.achievementLevelPanel {
  border-bottom: 1px solid #ffffff17;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 230px;
  display: grid;
}

.achievementLevelMark {
  background: var(--surface-subcard);
  border-right: 1px solid #ffffff17;
  align-content: center;
  justify-items: center;
  display: grid;
}

.achievementLevelMark small {
  color: #ffffff61;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 700;
}

.achievementLevelMark strong {
  color: var(--color-accent);
  letter-spacing: -.08em;
  margin: 3px 0 -1px;
  font-size: 84px;
  line-height: 1;
}

.achievementLevelMark span {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 720;
}

.achievementLevelProgress {
  align-content: center;
  padding: 32px;
  display: grid;
}

.achievementLevelProgress > div {
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.achievementLevelProgress > div small {
  color: #ffffff6b;
  font-size: 9px;
}

.achievementLevelProgress > i {
  background: #ffffff14;
  border-radius: 99px;
  height: 7px;
  margin: 15px 0 12px;
  overflow: hidden;
}

.achievementLevelProgress > i b {
  border-radius: inherit;
  background: var(--color-accent);
  height: 100%;
  display: block;
}

.achievementLevelProgress p {
  color: #ffffff61;
  margin: 0;
  font-size: 9px;
}

.achievementLevelProgress p strong {
  color: #ffffffbf;
}

.achievementReachable {
  border-bottom: 1px solid #ffffff17;
  padding: 28px;
}

.achievementReachable > h3, .achievementShowcaseEditor h3 {
  letter-spacing: -.025em;
  margin: 0;
  font-size: 16px;
}

.achievementReachable > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
  display: grid;
}

.achievementReachable article {
  background: var(--surface-subcard);
  border-radius: 16px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 102px;
  padding: 14px;
  display: grid;
}

.achievementReachable article > span {
  width: 42px;
  height: 42px;
  color: var(--color-accent);
  background: #ffffff0e;
  border-radius: 13px;
  place-items: center;
  display: grid;
}

.achievementReachable article > span svg {
  width: 18px;
}

.achievementReachable article small {
  color: var(--color-accent);
  font-size: 8px;
}

.achievementReachable article strong {
  margin-top: 3px;
  font-size: 11px;
  display: block;
}

.achievementReachable article p {
  color: #ffffff57;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 4px 0 7px;
  font-size: 8px;
  overflow: hidden;
}

.achievementReachable article div > i {
  background: #ffffff14;
  border-radius: 4px;
  height: 3px;
  display: block;
  overflow: hidden;
}

.achievementReachable article div > i b {
  background: var(--color-accent);
  height: 100%;
  display: block;
}

.achievementReachable article em {
  color: #ffffff70;
  font-size: 8px;
  font-style: normal;
}

.achievementShowcaseEditor {
  padding: 28px;
}

.achievementShowcaseEditor > header {
  justify-content: space-between;
  gap: 24px;
  display: flex;
}

.achievementShowcaseEditor > header p {
  color: #fff6;
  max-width: 580px;
  margin: 6px 0 0;
  font-size: 9px;
  line-height: 1.5;
}

.achievementShowcaseEditor > header > span {
  color: #ffffff80;
  font-size: 9px;
  font-weight: 700;
}

.achievementUnlockedGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 18px;
  display: grid;
}

.achievementUnlockedGrid > button {
  background: var(--surface-subcard);
  color: #fff;
  text-align: left;
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 14px;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 10px;
  display: grid;
}

.achievementUnlockedGrid > button:hover {
  background: var(--surface-subcard);
}

.achievementUnlockedGrid > button[data-selected="true"] {
  border-color: rgb(var(--color-accent-rgb) / .52);
  background: #201713;
}

.achievementUnlockedGrid > button > span {
  width: 40px;
  height: 40px;
  color: var(--color-accent);
  background: #ffffff0f;
  border-radius: 12px;
  place-items: center;
  display: grid;
  position: relative;
}

.achievementUnlockedGrid > button > span svg {
  width: 17px;
}

.achievementUnlockedGrid > button > span b {
  background: var(--color-accent);
  border-radius: 50%;
  place-items: center;
  width: 16px;
  height: 16px;
  font-size: 7px;
  display: grid;
  position: absolute;
  top: -5px;
  right: -5px;
}

.achievementUnlockedGrid > button strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  display: block;
  overflow: hidden;
}

.achievementUnlockedGrid > button small {
  color: #ffffff61;
  margin-top: 5px;
  font-size: 7px;
  display: block;
}

.achievementUnlockedGrid > button > svg {
  width: 14px;
  color: var(--color-accent);
}

.achievementShowcaseSave {
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 13px;
  align-items: center;
  gap: 26px;
  min-height: 42px;
  margin-top: 18px;
  padding: 0 15px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.achievementShowcaseSave:disabled {
  opacity: .38;
  cursor: default;
}

.achievementEmpty {
  color: #ffffff61;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  font-size: 10px;
  display: flex;
}

.achievementEmpty svg {
  width: 16px;
}

.achievementCenterLoading {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  min-height: 300px;
  padding: 28px;
  display: grid;
}

.achievementCenterLoading i {
  background: #ffffff0d;
  border-radius: 18px;
}

.publicProfileAchievements {
  background: var(--surface-card);
  color: #f5f3ee;
  border-top: 1px solid #ffffff1f;
  border-bottom: 1px solid #ffffff1f;
  grid-template-columns: minmax(230px, .75fr) 220px minmax(360px, 1.25fr);
  min-height: 330px;
  display: grid;
}

.publicProfileAchievementIntro {
  align-content: center;
  padding: clamp(28px, 4vw, 58px);
  display: grid;
}

.publicProfileAchievementIntro > span {
  color: var(--color-accent);
  letter-spacing: .14em;
  font-size: 8px;
  font-weight: 700;
}

.publicProfileAchievementIntro h2 {
  letter-spacing: -.055em;
  margin: 12px 0 9px;
  font-size: clamp(30px, 4vw, 54px);
}

.publicProfileAchievementIntro p {
  color: #ffffff6b;
  max-width: 320px;
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
}

.publicProfileAchievementIntro a {
  color: #fff;
  gap: 22px;
  width: max-content;
  margin-top: 23px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.publicProfileLevel {
  background: var(--surface-subcard);
  border-left: 1px solid #ffffff1a;
  border-right: 1px solid #ffffff1a;
  align-content: center;
  justify-items: center;
  padding: 24px;
  display: grid;
}

.publicProfileLevel > small {
  color: #ffffff57;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: 8px;
}

.publicProfileLevel > strong {
  color: var(--color-accent);
  letter-spacing: -.08em;
  font-size: 82px;
  line-height: 1;
}

.publicProfileLevel > span {
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 750;
}

.publicProfileLevel > div {
  background: #ffffff14;
  border-radius: 10px;
  width: 100%;
  height: 5px;
  margin-top: 20px;
  overflow: hidden;
}

.publicProfileLevel > div i {
  border-radius: inherit;
  background: var(--color-accent);
  height: 100%;
  display: block;
}

.publicProfileLevel p {
  color: #ffffff5c;
  margin: 9px 0 0;
  font-size: 7px;
}

.publicProfileAchievementBadges {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 8px;
  padding: clamp(22px, 3vw, 46px);
  display: grid;
}

.publicProfileAchievementBadges article {
  background: var(--surface-subcard);
  border-radius: 16px;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 13px;
  display: grid;
}

.publicProfileAchievementBadges article > span {
  width: 44px;
  height: 44px;
  color: var(--color-accent);
  background: #ffffff0e;
  border-radius: 14px;
  place-items: center;
  display: grid;
}

.publicProfileAchievementBadges article[data-rarity="rare"] > span {
  color: #72d8ff;
}

.publicProfileAchievementBadges article[data-rarity="epic"] > span {
  color: #ba91ff;
}

.publicProfileAchievementBadges article[data-rarity="legendary"] > span {
  color: #ffb13b;
}

.publicProfileAchievementBadges svg {
  width: 18px;
}

.publicProfileAchievementBadges strong {
  font-size: 9px;
  display: block;
}

.publicProfileAchievementBadges small {
  color: #ffffff57;
  margin-top: 5px;
  font-size: 7px;
  display: block;
}

@media (max-width: 980px) {
  .achievementCatalogGroup {
    grid-template-columns: 1fr;
  }

  .achievementCatalogGroup > header {
    position: static;
  }

  .achievementUnlockedGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .publicProfileAchievements {
    grid-template-columns: 1fr 200px;
  }

  .publicProfileAchievementBadges {
    border-top: 1px solid #ffffff1a;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .publicProfileLevel {
    border-right: 0;
  }
}

@media (max-width: 680px) {
  .achievementCatalogHero {
    border-radius: 0 0 28px 28px;
    min-height: 590px;
  }

  .achievementCatalogHeroCopy {
    width: calc(100% - 36px);
    min-height: 400px;
    padding: 100px 0 34px 18px;
  }

  .achievementCatalogHeroCopy h1 {
    font-size: clamp(48px, 16vw, 74px);
  }

  .achievementCatalogPrinciples {
    grid-template-columns: 1fr;
    margin: 0 18px 22px;
  }

  .achievementCatalogPrinciples > span {
    grid-template-columns: 28px 1fr;
    align-items: center;
    min-height: 48px;
  }

  .achievementCatalogPrinciples > span + span {
    border-top: 1px solid #ffffff1a;
    border-left: 0;
    padding-left: 0;
  }

  .achievementCatalogGroups {
    gap: 54px;
    padding: 58px 14px 80px;
  }

  .achievementCatalogGroup > div {
    grid-template-columns: 1fr;
  }

  .achievementCatalogGroup article {
    border-right: 0;
  }

  .achievementCenterHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    min-height: 0;
    padding: 24px 20px;
  }

  .achievementCenterHeader > div {
    width: 100%;
    min-width: 0;
  }

  .achievementCenterHeader h2 {
    overflow-wrap: normal;
    word-break: normal;
    width: 100%;
    font-size: 32px;
  }

  .achievementCenterHeader a {
    justify-content: space-between;
    width: 100%;
  }

  .achievementLevelPanel {
    grid-template-columns: 132px minmax(0, 1fr);
    min-height: 190px;
  }

  .achievementLevelMark strong {
    font-size: 58px;
  }

  .achievementLevelProgress {
    padding: 20px;
  }

  .achievementReachable > div, .achievementUnlockedGrid, .publicProfileAchievements {
    grid-template-columns: 1fr;
  }

  .publicProfileLevel {
    border-top: 1px solid #ffffff1a;
    border-left: 0;
    min-height: 220px;
  }

  .publicProfileAchievementBadges {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
}

@media (hover: none) {
  .communicationVoiceParticipant > nav {
    opacity: 1;
  }
}

.headerTopline {
  z-index: 390;
  height: 18px;
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
}

.headerTopLinks {
  align-items: center;
  width: max-content;
  display: inline-flex;
  position: absolute;
  top: 50%;
  left: clamp(22px, 2vw, 34px);
  transform: translateY(-50%);
}

.headerTopLinks a {
  color: #ffffff7a;
  letter-spacing: .055em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 680;
  line-height: 1;
  transition: color .16s;
  position: relative;
}

.headerTopLinks a + a {
  margin-left: 11px;
  padding-left: 12px;
}

.headerTopLinks a + a:before {
  content: "";
  background: #ffffff2b;
  width: 1px;
  height: 8px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.headerTopLinks a:hover, .headerTopLinks a:focus-visible {
  color: #ffffffeb;
}

.headerMasthead {
  color: #ffffffc7;
  letter-spacing: .14em;
  align-items: center;
  gap: 6px;
  width: max-content;
  font-size: 9px;
  font-weight: 720;
  line-height: 1;
  display: inline-flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.headerMasthead img {
  object-fit: contain;
}

.headerLiveStatus {
  color: #ffffff7a;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
  gap: 7px;
  width: max-content;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  position: absolute;
  top: 50%;
  right: clamp(22px, 2vw, 34px);
  transform: translateY(-50%);
}

.headerSystemsState {
  color: #ffffff9e;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.headerSystemsState > b {
  font: inherit;
  font-weight: 720;
}

.headerSystemsState > i {
  background: #ffffff47;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: relative;
}

.headerLiveStatus[data-ready="true"] .headerSystemsState > i {
  background: #61e970;
}

.headerLiveStatus[data-health="degraded"] .headerSystemsState > i {
  background: #ffb454;
}

.headerLiveStatus[data-ready="true"] .headerSystemsState > i:after {
  border-radius: inherit;
  content: "";
  border: 1px solid #61e97094;
  animation: 1.8s ease-out infinite headerOnlinePulse;
  position: absolute;
  inset: -4px;
}

.headerLiveStatus[data-health="degraded"] .headerSystemsState > i:after {
  border-color: #ffb45494;
}

.headerLiveStatus[data-ready="true"] .headerSystemsState {
  color: #ffffffc2;
}

.headerLiveStatus[data-health="degraded"] .headerSystemsState {
  color: #ffc174;
}

.headerLiveDivider {
  background: #ffffff2e;
  width: 1px;
  height: 12px;
}

.headerOnlineLabel {
  color: #ffffffb3;
}

.headerLiveStatus[data-ready="true"] .headerOnlineLabel {
  color: #7aed86;
}

.headerLiveStatusCopy {
  color: #ffffff80;
  font: inherit;
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.headerLiveStatusCopy b {
  color: #ffffff38;
  font-weight: 500;
}

@keyframes headerOnlinePulse {
  0% {
    opacity: .8;
    transform: scale(.5);
  }

  72%, 100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .headerLiveStatus[data-ready="true"] .headerSystemsState > i:after {
    animation: none;
  }
}

.adminRankingsModule {
  gap: 24px;
  display: grid;
}

.adminRankingsNotice {
  color: #bff5ce;
  background: #5ee88a14;
  border: 1px solid #5ee88a38;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 700;
}

.adminRankingsNotice[data-error="true"] {
  color: #ffb19c;
  background: #ff583017;
  border-color: #ff583047;
}

.adminRankingSeasonGrid {
  grid-template-columns: minmax(340px, 1.4fr) repeat(2, minmax(220px, 1fr));
  gap: 12px;
  display: grid;
}

.adminRankingSeasonGrid > article, .adminRankingDefinitionGrid > article, .adminRankingAuditGrid > section, .adminRankingExclusionForm {
  background: #0f0f14;
  border: 1px solid #ffffff17;
  border-radius: 16px;
}

.adminRankingSeasonGrid > article {
  min-height: 154px;
  padding: 22px;
}

.adminRankingSeasonGrid article > span, .adminRankingDefinitionGrid article > div span, .adminRankingDefinitionGrid article > div i {
  color: #ffffff75;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.adminRankingSeasonGrid h3, .adminRankingSeasonGrid strong {
  color: #fff;
  margin: 13px 0 8px;
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1;
  display: block;
}

.adminRankingSeasonGrid p {
  color: #ffffff8c;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.adminRankingSeasonPrimary {
  background: linear-gradient(120deg, #ff581a2b, #0f0f14f5 62%) !important;
}

.adminRankingSeasonPrimary footer {
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  display: flex;
}

.adminRankingSeasonPrimary footer b {
  color: var(--accent, #ff5a1f);
  text-transform: uppercase;
  font-size: 11px;
}

.adminRankingSeasonPrimary footer small {
  color: #ffffff6b;
}

.adminRankingActions {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.adminRankingDraftEditor {
  background: #0f0f14;
  border: 1px solid #ffffff17;
  border-radius: 16px;
  gap: 18px;
  padding: 22px;
  display: grid;
}

.adminRankingDraftEditor > header {
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  display: flex;
}

.adminRankingDraftEditor header p, .adminRankingDraftEditor header h3 {
  margin: 0;
}

.adminRankingDraftEditor header p {
  color: var(--accent, #ff5a1f);
  font-size: 10px;
  font-weight: 800;
}

.adminRankingDraftEditor header h3 {
  color: #fff;
  margin-top: 6px;
  font-size: 24px;
}

.adminRankingDraftEditor header > span {
  color: #ffffff73;
  font-size: 11px;
}

.adminRankingFormulaFields, .adminRankingRewardFields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.adminRankingRewardFields {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.adminRankingDraftEditor label {
  background: #202024;
  border-radius: 12px;
  gap: 7px;
  padding: 13px;
  display: grid;
  position: relative;
}

.adminRankingDraftEditor label > span {
  color: #ffffff7a;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
}

.adminRankingDraftEditor label input {
  color: #fff;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  font-size: 20px;
  font-weight: 800;
}

.adminRankingDraftEditor label small {
  color: #ffffff4d;
  font-size: 8px;
  position: absolute;
  bottom: 16px;
  right: 13px;
}

.adminRankingDraftEditor > .adminButton {
  justify-self: start;
}

.adminRankingDefinitionGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.adminRankingDefinitionGrid > article {
  flex-direction: column;
  min-height: 180px;
  padding: 18px;
  display: flex;
}

.adminRankingDefinitionGrid article > div, .adminRankingDefinitionGrid article footer, .adminRankingAuditGrid section > header, .adminRankingAuditGrid article > div {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.adminRankingDefinitionGrid h3 {
  color: #fff;
  margin: 24px 0 8px;
  font-size: 20px;
}

.adminRankingDefinitionGrid p {
  color: #ffffff8c;
  margin: 0 0 auto;
  font-size: 12px;
  line-height: 1.45;
}

.adminRankingDefinitionGrid footer {
  color: #fff6;
  margin-top: 18px;
  font-size: 10px;
}

.adminRankingDefinitionGrid code, .adminRankingAuditGrid code {
  color: #ffffff9e;
  font-family: inherit;
}

.adminRankingExclusionForm {
  grid-template-columns: 120px 1.3fr 1fr 1fr;
  gap: 12px;
  padding: 20px;
  display: grid;
}

.adminRankingExclusionForm header {
  grid-column: 1 / -1;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 6px;
  display: flex;
}

.adminRankingExclusionForm header p, .adminRankingExclusionForm header h3 {
  margin: 0;
}

.adminRankingExclusionForm header p {
  color: var(--accent, #ff5a1f);
  font-size: 10px;
  font-weight: 800;
}

.adminRankingExclusionForm header h3 {
  color: #fff;
  margin-top: 5px;
  font-size: 22px;
}

.adminRankingExclusionForm header > span {
  color: #ffffff78;
  max-width: 480px;
  font-size: 11px;
  line-height: 1.45;
}

.adminRankingExclusionForm label {
  gap: 7px;
  display: grid;
}

.adminRankingExclusionForm label.wide {
  grid-column: 1 / -2;
}

.adminRankingExclusionForm label > span {
  color: #ffffff7a;
  font-size: 10px;
  font-weight: 700;
}

.adminRankingExclusionForm input, .adminRankingExclusionForm select {
  color: #fff;
  background: #202024;
  border: 1px solid #ffffff17;
  border-radius: 10px;
  outline: none;
  min-width: 0;
  height: 45px;
  padding: 0 12px;
}

.adminRankingExclusionForm input:focus, .adminRankingExclusionForm select:focus {
  border-color: #ffffff42;
}

.adminRankingExclusionForm > .adminButton {
  align-self: end;
}

.adminRankingAuditGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.adminRankingAuditGrid > section {
  padding: 20px;
}

.adminRankingAuditGrid section > header {
  margin-bottom: 14px;
}

.adminRankingAuditGrid section > header h3, .adminRankingAuditGrid section > header span {
  color: #fff;
  margin: 0;
  font-size: 18px;
}

.adminRankingAuditGrid section > header span {
  color: #ffffff6b;
}

.adminRankingAuditGrid section > p {
  color: #ffffff73;
  font-size: 12px;
}

.adminRankingAuditGrid article {
  border-top: 1px solid #ffffff12;
  padding: 14px 0;
}

.adminRankingAuditGrid article strong, .adminRankingAuditGrid article time {
  color: #fff;
  font-size: 11px;
}

.adminRankingAuditGrid article time {
  color: #ffffff6e;
  text-transform: uppercase;
}

.adminRankingAuditGrid article p, .adminRankingAuditGrid article small {
  color: #ffffff8c;
  margin: 7px 0 0;
  font-size: 11px;
}

.adminRankingAuditGrid article button {
  color: var(--accent, #ff5a1f);
  cursor: pointer;
  background: none;
  border: 0;
  margin-top: 10px;
  padding: 0;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .adminRankingSeasonGrid, .adminRankingAuditGrid {
    grid-template-columns: 1fr 1fr;
  }

  .adminRankingSeasonPrimary {
    grid-column: 1 / -1;
  }

  .adminRankingDefinitionGrid, .adminRankingFormulaFields, .adminRankingRewardFields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminRankingExclusionForm {
    grid-template-columns: 1fr 1fr;
  }

  .adminRankingExclusionForm label.wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .adminRankingSeasonGrid, .adminRankingDefinitionGrid, .adminRankingAuditGrid, .adminRankingExclusionForm {
    grid-template-columns: 1fr;
  }

  .adminRankingSeasonPrimary, .adminRankingExclusionForm label.wide {
    grid-column: auto;
  }

  .adminRankingExclusionForm header {
    display: grid;
  }

  .adminRankingDraftEditor > header, .adminRankingFormulaFields, .adminRankingRewardFields {
    grid-template-columns: 1fr;
    display: grid;
  }
}

.publicProfileRankings {
  margin: 0 var(--page-pad, clamp(20px, 4vw, 72px));
  background: #ffffff14;
  border: 1px solid #ffffff14;
  border-radius: 24px;
  grid-template-columns: minmax(250px, .8fr) minmax(420px, 1.5fr) minmax(190px, .6fr);
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.publicProfileRankings > * {
  background: #0f0f14;
}

.publicProfileRankingIntro {
  padding: 30px;
  position: relative;
}

.publicProfileRankingIntro > span, .publicProfileRankings aside > span, .publicProfileRankingGrid article > span {
  color: #ffffff73;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
}

.publicProfileRankingIntro > svg {
  width: 24px;
  height: 24px;
  color: var(--profile-accent, var(--accent));
  position: absolute;
  top: 26px;
  right: 26px;
}

.publicProfileRankingIntro h2 {
  color: #fff;
  margin: 34px 0 10px;
  font-size: clamp(26px, 3vw, 42px);
  line-height: .95;
}

.publicProfileRankingIntro p {
  color: #ffffff8f;
  margin: 0 0 28px;
  font-size: 13px;
  line-height: 1.5;
}

.publicProfileRankingIntro a {
  color: #fff;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
}

.publicProfileRankingIntro a i {
  color: var(--profile-accent, var(--accent));
  font-style: normal;
}

.publicProfileRankingGrid {
  background: #ffffff12;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  display: grid;
}

.publicProfileRankingGrid article {
  background: #202024;
  flex-direction: column;
  justify-content: space-between;
  min-height: 145px;
  padding: 24px;
  display: flex;
}

.publicProfileRankingGrid article strong {
  color: #fff;
  font-size: clamp(32px, 4vw, 58px);
  line-height: .85;
}

.publicProfileRankingGrid article small {
  color: #ffffff80;
  font-size: 11px;
}

.publicProfileRankings > aside {
  flex-direction: column;
  padding: 30px;
  display: flex;
}

.publicProfileRankings aside > strong {
  color: #fff;
  margin: 24px 0 auto;
  font-size: clamp(42px, 5vw, 70px);
  line-height: .85;
}

.publicProfileRankings aside > div {
  gap: 7px;
  margin-top: 24px;
  display: grid;
}

.publicProfileRankings aside i {
  border: 1px solid
    color-mix(in srgb, var(--profile-accent, var(--accent)) 30%, transparent);
  color: #fff;
  text-align: center;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 1050px) {
  .publicProfileRankings {
    grid-template-columns: 1fr 1.5fr;
  }

  .publicProfileRankings > aside {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .publicProfileRankings, .publicProfileRankingGrid {
    grid-template-columns: 1fr;
  }

  .publicProfileRankings > aside {
    grid-column: auto;
  }

  .publicProfileRankingGrid article {
    min-height: 120px;
  }
}

.profileCosmeticCenter {
  background: #0f0f14;
  border: 1px solid #ffffff14;
  border-radius: 24px;
  padding: clamp(22px, 3vw, 38px);
}

.profileCosmeticCenter > header {
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 10px 30px;
  display: grid;
}

.profileCosmeticCenter > header span {
  color: var(--accent);
  letter-spacing: .08em;
  font-size: 10px;
  font-weight: 800;
}

.profileCosmeticCenter > header h2 {
  color: #fff;
  margin: 8px 0 0;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
}

.profileCosmeticCenter > header svg {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.profileCosmeticCenter > header p {
  color: #ffffff8c;
  max-width: 680px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.profileCosmeticGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 26px;
  display: grid;
}

.profileCosmeticGrid article {
  background: #202024;
  border: 1px solid #ffffff12;
  border-radius: 16px;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 120px;
  padding: 18px;
  display: grid;
  position: relative;
}

.profileCosmeticGrid article[data-equipped="true"] {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.profileCosmeticGrid article > span {
  width: 42px;
  height: 42px;
  color: var(--accent);
  background: #ffffff0f;
  border-radius: 12px;
  place-items: center;
  display: grid;
}

.profileCosmeticGrid article svg {
  width: 21px;
  height: 21px;
}

.profileCosmeticGrid small {
  color: #ffffff61;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
  display: block;
}

.profileCosmeticGrid strong {
  color: #fff;
  margin-top: 5px;
  font-size: 15px;
  display: block;
}

.profileCosmeticGrid button {
  color: #fff;
  cursor: pointer;
  background: #ffffff0d;
  border: 1px solid #ffffff17;
  border-radius: 9px;
  grid-column: 1 / -1;
  height: 34px;
  font-size: 10px;
  font-weight: 800;
}

.profileCosmeticGrid article > i {
  color: var(--accent);
  text-transform: uppercase;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  position: absolute;
  top: 10px;
  right: 10px;
}

.profileCosmeticEmpty, .profileCosmeticError {
  color: #ffffff80;
  background: #202024;
  border-radius: 13px;
  margin: 24px 0 0;
  padding: 18px;
  font-size: 12px;
}

.profileCosmeticError {
  color: #ffb19c;
}

@media (max-width: 850px) {
  .profileCosmeticGrid {
    grid-template-columns: 1fr;
  }
}

.adminEmailPolicy {
  gap: 8px;
  display: grid;
}

.adminEmailPolicyState {
  background: var(--surface-card);
  color: #ffffff94;
  border: 1px solid #ffffff14;
  border-radius: 24px;
  place-items: center;
  gap: 14px;
  min-height: 260px;
  padding: 32px;
  font-size: 12px;
  display: grid;
}

.adminEmailPolicyState p {
  margin: 0;
}

.adminEmailPolicyHead {
  background: var(--surface-card);
  border: 1px solid #ffffff14;
  border-radius: 28px;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  min-height: 210px;
  padding: clamp(28px, 3.8vw, 48px);
  display: flex;
}

.adminEmailPolicyHead p {
  color: var(--color-accent);
  letter-spacing: .1em;
  margin: 0;
  font-size: 8px;
  font-weight: 700;
}

.adminEmailPolicyHead h2 {
  color: #fff;
  letter-spacing: -.04em;
  margin: 18px 0 0;
  font-size: clamp(40px, 4.8vw, 70px);
  font-weight: 390;
  line-height: .95;
}

.adminEmailPolicyHead > div:first-child > span {
  color: #ffffff7a;
  max-width: 590px;
  margin-top: 18px;
  font-size: 10px;
  line-height: 1.5;
  display: block;
}

.adminEmailPolicyHead > div:last-child {
  background: var(--surface-subcard);
  border: 1px solid #ffffff14;
  border-radius: 16px;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 3px 12px;
  min-width: 220px;
  padding: 17px;
  display: grid;
}

.adminEmailPolicyHead > div:last-child svg {
  color: #a9f52d;
  grid-row: 1 / 3;
  width: 23px;
  height: 23px;
}

.adminEmailPolicyHead > div:last-child strong {
  color: #fff;
  font-size: 11px;
}

.adminEmailPolicyHead > div:last-child small {
  color: #fff6;
  font-size: 8px;
}

.adminEmailPolicyCard {
  background: var(--surface-card);
  border: 1px solid #ffffff14;
  border-radius: 28px;
  grid-template-columns: minmax(210px, .32fr) minmax(0, 1fr);
  min-height: 430px;
  display: grid;
  overflow: hidden;
}

.adminEmailPolicyCard > nav {
  background: var(--surface-subcard);
  border-right: 1px solid #ffffff12;
  align-content: start;
  gap: 5px;
  padding: 16px;
  display: grid;
}

.adminEmailPolicyCard > nav button {
  color: #ffffff7a;
  cursor: pointer;
  min-height: 54px;
  font: inherit;
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 13px;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  display: grid;
}

.adminEmailPolicyCard > nav button:hover {
  color: #fff;
  background: #ffffff09;
}

.adminEmailPolicyCard > nav button[aria-pressed="true"] {
  color: #fff;
  background: #ffffff0e;
  border-color: #ffffff17;
}

.adminEmailPolicyCard > nav button svg {
  color: currentColor;
  width: 15px;
  height: 15px;
}

.adminEmailPolicyCard > nav button span {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 650;
  overflow: hidden;
}

.adminEmailPolicyCard > nav button b {
  color: #ffffff80;
  background: #ffffff0d;
  border-radius: 8px;
  place-items: center;
  width: 23px;
  height: 23px;
  font-size: 8px;
  display: grid;
}

.adminEmailPolicyCard > nav button[aria-pressed="true"] b {
  background: var(--color-accent);
  color: #fff;
}

.adminEmailPolicyEditor {
  min-width: 0;
  padding: clamp(24px, 3vw, 42px);
}

.adminEmailPolicyTitle {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  display: flex;
}

.adminEmailPolicyTitle > div {
  align-items: center;
  gap: 13px;
  min-width: 0;
  display: flex;
}

.adminEmailPolicyTitle > div > svg {
  width: 19px;
  height: 19px;
  color: var(--color-accent);
  flex: none;
}

.adminEmailPolicyTitle > div > span {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.adminEmailPolicyTitle strong {
  color: #fff;
  font-size: 14px;
  font-weight: 650;
}

.adminEmailPolicyTitle small {
  color: #fff6;
  font-size: 8px;
  line-height: 1.35;
}

.adminEmailPolicyTitle > p {
  color: #ffffff61;
  flex: none;
  margin: 0;
  font-size: 8px;
}

.adminEmailPolicyTitle > p b {
  color: #ffffffbf;
}

.adminEmailPolicyEditor > form {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: 28px;
  display: grid;
}

.adminEmailPolicyEditor > form label {
  background: var(--surface-subcard);
  border: 1px solid #ffffff14;
  border-radius: 14px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 17px;
  display: grid;
}

.adminEmailPolicyEditor > form label:focus-within {
  border-color: rgb(var(--color-accent-rgb) / .55);
}

.adminEmailPolicyEditor > form label span {
  color: #ffffff57;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 650;
}

.adminEmailPolicyEditor > form input {
  color: #fff;
  min-width: 0;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.adminEmailPolicyEditor > form input::placeholder {
  color: #ffffff38;
}

.adminEmailPolicyEditor > form button {
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  min-height: 56px;
  font: inherit;
  border: 0;
  border-radius: 14px;
  align-items: center;
  gap: 9px;
  padding: 0 20px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.adminEmailPolicyEditor > form button:hover:not(:disabled) {
  background: rgb(var(--color-accent-rgb) / .84);
}

.adminEmailPolicyEditor > form button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.adminEmailPolicyEditor > form button svg {
  width: 15px;
  height: 15px;
}

.adminEmailPolicyList {
  gap: 5px;
  margin-top: 18px;
  display: grid;
}

.adminEmailPolicyList article {
  background: #ffffff06;
  border: 1px solid #fff1;
  border-radius: 13px;
  grid-template-columns: minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: 13px;
  min-height: 52px;
  padding: 7px 8px 7px 15px;
  display: grid;
}

.adminEmailPolicyList article > span {
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 10px;
  font-weight: 620;
  display: flex;
  overflow: hidden;
}

.adminEmailPolicyList article > span i {
  background: #a9f52d;
  border-radius: 50%;
  flex: none;
  width: 6px;
  height: 6px;
}

.adminEmailPolicyList article > small {
  color: #ffffff4d;
  text-transform: uppercase;
  font-size: 7px;
}

.adminEmailPolicyList article > button {
  color: #ffffff59;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.adminEmailPolicyList article > button:hover:not(:disabled) {
  color: #ff6a51;
  background: #ff50371f;
}

.adminEmailPolicyList article > button svg {
  width: 14px;
  height: 14px;
}

.adminEmailPolicyEmpty {
  color: #ffffff57;
  text-align: center;
  border: 1px dashed #ffffff14;
  border-radius: 16px;
  align-content: center;
  place-items: center;
  gap: 7px;
  min-height: 170px;
  display: grid;
}

.adminEmailPolicyEmpty svg {
  color: #a9f52d;
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

.adminEmailPolicyEmpty strong {
  color: #ffffffb3;
  font-size: 10px;
}

.adminEmailPolicyEmpty span {
  font-size: 8px;
}

@media (max-width: 900px) {
  .adminEmailPolicyHead {
    flex-direction: column;
    align-items: flex-start;
  }

  .adminEmailPolicyHead > div:last-child {
    width: 100%;
  }

  .adminEmailPolicyCard {
    grid-template-columns: 1fr;
  }

  .adminEmailPolicyCard > nav {
    border-bottom: 1px solid #ffffff12;
    border-right: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .adminEmailPolicyCard > nav button {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .adminEmailPolicyCard > nav button b {
    display: none;
  }
}

@media (max-width: 620px) {
  .adminEmailPolicyHead, .adminEmailPolicyCard {
    border-radius: 21px;
  }

  .adminEmailPolicyHead {
    min-height: 0;
    padding: 24px;
  }

  .adminEmailPolicyHead h2 {
    font-size: 40px;
  }

  .adminEmailPolicyCard > nav {
    padding: 10px;
    display: flex;
    overflow-x: auto;
  }

  .adminEmailPolicyCard > nav button {
    flex: none;
    min-height: 44px;
    padding: 0 12px;
  }

  .adminEmailPolicyEditor {
    padding: 22px 16px;
  }

  .adminEmailPolicyTitle {
    flex-direction: column;
    align-items: flex-start;
  }

  .adminEmailPolicyEditor > form {
    grid-template-columns: 1fr;
  }

  .adminEmailPolicyEditor > form button {
    justify-content: center;
  }

  .adminEmailPolicyList article {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .adminEmailPolicyList article > small {
    display: none;
  }
}

.siteHeader.siteHeaderIslands {
  --header-island-bg: #10101094;
  --header-island-bg-hover: #1e1e1ea3;
  --header-dropdown-bg: #0e0e0e94;
  --header-text: #ffffffeb;
  --header-muted: #ffffff6e;
  --header-soft: #ffffff12;
  --header-divider: #ffffff17;
  --header-border: #ffffff24;
  z-index: 400;
  pointer-events: none;
  height: auto;
  padding: 18px clamp(22px, 2vw, 34px);
  transition: transform .22s;
  display: block;
  transform: translateY(22px);
}

.headerDesktopIslands {
  pointer-events: auto;
  grid-template-columns: clamp(210px, 15vw, 238px) minmax(0, 1fr) auto auto;
  justify-content: space-between;
  align-items: center;
  gap: clamp(8px, .8vw, 14px);
  width: 100%;
  display: grid;
}

.headerIsland {
  isolation: isolate;
  box-sizing: border-box;
  border: 1px solid var(--header-border);
  min-width: 0;
  min-height: 50px;
  box-shadow: none;
  color: var(--header-text);
  background: none;
  border-radius: 999px;
  align-items: center;
  display: flex;
  position: relative;
}

.headerIsland:before {
  z-index: 0;
  border-radius: inherit;
  background: var(--header-island-bg);
  -webkit-backdrop-filter: blur(26px) saturate(1.32) contrast(1.03);
  backdrop-filter: blur(26px) saturate(1.32) contrast(1.03);
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.headerIsland > * {
  z-index: 1;
  position: relative;
}

.siteHeaderIslands :is(.headerIsland, .headerPlayButton, .headerMobileBrand, .localeLink, .menuButton, .headerDropdownPanel) {
  border-color: var(--header-border) !important;
}

.headerBrandIsland {
  justify-content: space-between;
  gap: 2px;
  width: 100%;
  padding: 5px 7px;
}

.headerBrandSearch {
  border-radius: 999px;
  flex: auto;
  align-items: center;
  min-width: 0;
  height: 36px;
  transition: none;
  display: flex;
}

.headerBrandSearch:focus-within {
  background: none;
}

.headerBrandSearch:hover input::placeholder, .headerBrandSearch:focus-within input::placeholder {
  color: #ffffffb8;
}

.headerBrandSearch input {
  color: #fff;
  width: 100%;
  min-width: 0;
  height: 100%;
  font: inherit;
  letter-spacing: -.01em;
  background: none;
  border: 0;
  outline: 0;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 580;
}

.headerBrandSearch input::placeholder {
  color: #ffffff73;
  opacity: 1;
}

.headerBrandSearch input::-webkit-search-cancel-button {
  display: none;
}

.headerBrandActions {
  flex: none;
  align-items: center;
  gap: 5px;
  display: flex;
}

.headerBrandActions:before {
  background: var(--header-divider);
  content: "";
  flex: none;
  width: 1px;
  height: 18px;
}

.headerBrandIsland .headerBrandDropdown {
  position: static;
}

.headerBrandSearchButton, .headerBrandDropdown > .headerDropdownTrigger {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  color: var(--header-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  transition: color .18s, background-color .18s;
  display: grid;
}

.headerBrandSearchButton:hover, .headerBrandSearchButton:focus-visible {
  color: #fff;
  background: none;
}

.headerBrandDropdown > .headerDropdownTrigger:hover, .headerBrandDropdown > .headerDropdownTrigger:focus-visible, .headerBrandDropdown[data-open="true"] > .headerDropdownTrigger {
  background: var(--header-soft);
  color: #fff;
}

.headerBrandSearchButton > svg {
  width: 16px;
  height: 16px;
  transition: color .16s, transform .16s;
}

.headerBrandSearchButton:hover > svg, .headerBrandSearchButton:focus-visible > svg {
  color: var(--color-accent);
  transform: scale(1.06);
}

.headerBrandIsland .headerBrandDropdown > .headerDropdownTrigger {
  border-radius: 11px;
  gap: 0;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  display: grid;
}

.headerBrandDropdown > .headerDropdownTrigger .headerChevron {
  color: #ffffff80;
  width: 14px;
  height: 14px;
}

.headerBrandIsland .headerBrandDropdown[data-open="true"] > .headerDropdownTrigger .headerChevron {
  color: #fff;
}

.headerBrandIdentity {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.headerBrandIdentity img, .headerMobileBrand img {
  border-radius: 9px;
}

.siteHeaderIslands .wordmark {
  letter-spacing: -.025em;
  font-size: 15px;
  font-weight: 820;
}

.headerNavIsland {
  justify-self: center;
  padding: 0 7px;
}

.headerPrimaryNav {
  align-items: center;
  gap: 1px;
  height: 50px;
  display: flex;
}

.headerPrimaryNav .headerNavLink, .headerPrimaryNav > .headerUnifiedDropdown > .headerDropdownTrigger {
  box-sizing: border-box;
  min-height: 38px;
  color: var(--header-text);
  cursor: pointer;
  font: inherit;
  letter-spacing: -.01em;
  text-transform: none;
  background: none;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 clamp(11px, 1vw, 17px);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: color .18s, background-color .18s;
  display: inline-flex;
  position: relative;
}

.headerPrimaryNav .headerNavLink:hover, .headerPrimaryNav .headerNavLink:focus-visible, .headerPrimaryNav > .headerUnifiedDropdown > .headerDropdownTrigger:hover, .headerPrimaryNav > .headerUnifiedDropdown > .headerDropdownTrigger:focus-visible, .headerPrimaryNav > .headerUnifiedDropdown[data-open="true"] > .headerDropdownTrigger, .headerPrimaryNav > .headerUnifiedDropdown[data-active="true"] > .headerDropdownTrigger {
  background: var(--header-soft);
  color: #fff;
}

.headerPrimaryNav .headerNavLink:after, .headerPrimaryNav > .headerUnifiedDropdown > .headerDropdownTrigger:after {
  background: var(--color-accent);
  content: "";
  opacity: 0;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  transition: opacity .18s, transform .18s;
  position: absolute;
  bottom: 3px;
  right: 50%;
  transform: translateX(50%)scale(.4);
}

.headerPrimaryNav .headerNavLink[aria-current="page"]:after, .headerPrimaryNav > .headerUnifiedDropdown > .headerDropdownTrigger[aria-current="page"]:after, .headerPrimaryNav > .headerUnifiedDropdown[data-open="true"] > .headerDropdownTrigger:after, .headerPrimaryNav > .headerUnifiedDropdown[data-active="true"] > .headerDropdownTrigger:after {
  opacity: 1;
  transform: translateX(50%)scale(1);
}

.headerUserIsland {
  justify-content: flex-end;
  justify-self: end;
  gap: 0;
  min-width: 194px;
  padding: 4px 5px;
}

.headerUserIsland.isAuthenticated {
  min-width: 278px;
}

.headerUserIsland.isGuest {
  justify-content: center;
  min-width: 92px;
  padding-left: 5px;
  padding-right: 5px;
}

.headerUserIsland.isGuest .desktopAccount {
  width: 100%;
  min-width: 0;
  padding-left: 12px;
  padding-right: 12px;
}

.headerWalletLink {
  box-sizing: border-box;
  color: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  min-width: 89px;
  height: 40px;
  padding: 0 9px 0 6px;
  transition: background-color .18s;
  display: inline-flex;
}

.headerWalletLink:hover, .headerWalletLink:focus-visible {
  background: var(--header-soft);
}

.headerWalletIcon {
  background: rgb(var(--color-accent-rgb) / .15);
  width: 29px;
  height: 29px;
  color: var(--color-accent);
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
}

.headerWalletIcon > svg {
  width: 15px;
  height: 15px;
}

.headerWalletLink[data-status="frozen"] .headerWalletIcon {
  color: #ffffff73;
  background: #ffffff14;
}

.headerWalletCopy {
  gap: 1px;
  min-width: 0;
  line-height: 1;
  display: grid;
}

.headerWalletCopy strong {
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 78px;
  font-size: 12px;
  font-weight: 680;
  overflow: hidden;
}

.headerWalletCopy small {
  color: rgb(var(--color-accent-rgb) / .72);
  letter-spacing: .11em;
  font-size: 7px;
  font-weight: 750;
}

.headerUserDivider {
  background: var(--header-divider);
  flex: none;
  width: 1px;
  height: 20px;
}

.headerUtilityGroup {
  flex: none;
  align-items: center;
  display: flex;
}

.headerUtilityButton {
  width: 38px;
  height: 38px;
  color: var(--header-text);
  border-radius: 50%;
  flex: none;
  place-items: center;
  transition: background-color .18s, color .18s;
  display: grid;
  position: relative;
}

.headerUtilityButton:hover, .headerUtilityButton:focus-visible {
  background: var(--header-soft);
  color: #fff;
}

.headerUtilityIcon {
  flex: none;
  width: 18px;
  height: 18px;
}

.headerUserIsland .desktopAccount {
  box-sizing: border-box;
  color: #fff;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-width: 72px;
  max-width: 142px;
  min-height: 40px;
  padding: 4px 9px 4px 6px;
  transition: background-color .18s;
  display: inline-flex;
}

.headerUserIsland .desktopAccount:hover, .headerUserIsland .desktopAccount:focus-visible, .headerUserIsland .desktopAccount[aria-current="page"] {
  background: var(--header-soft);
}

.headerUserIsland .headerAccountAvatar {
  background-color: #2a1714;
  width: 30px;
  height: 30px;
}

.headerUserIsland .headerAccountName {
  max-width: 86px;
}

.headerUserIsland .headerAccountName strong, .headerLoginLabel {
  color: #fff;
  letter-spacing: -.01em;
  text-transform: none;
  font-size: 12px;
  font-weight: 650;
}

.headerPlayButton {
  box-sizing: border-box;
  border: 1px solid var(--header-border);
  background: var(--color-accent);
  min-width: 116px;
  min-height: 50px;
  box-shadow: none;
  color: #fff;
  pointer-events: auto;
  border-radius: 999px;
  justify-content: center;
  justify-self: end;
  align-items: center;
  gap: 9px;
  padding: 4px 16px 4px 5px;
  font-size: 13px;
  font-weight: 680;
  transition: background-color .18s;
  display: inline-flex;
}

.headerPlayButton:hover, .headerPlayButton:focus-visible, .headerPlayButton[aria-current="page"] {
  background: var(--color-accent);
}

.headerPlayIcon {
  flex: none;
  width: 15px;
  height: 15px;
}

.headerPlayGlyph {
  background: #00000026;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
}

.headerUnifiedDropdown {
  align-items: center;
  display: flex;
  position: relative;
}

.headerUnifiedDropdown:before {
  height: 18px;
  top: 100%;
  left: -16px;
  right: -16px;
}

.headerUnifiedDropdown > .headerDropdownTrigger {
  box-sizing: border-box;
  min-height: 38px;
  color: var(--header-text);
  cursor: pointer;
  font: inherit;
  background: none;
  border: 0;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  display: inline-flex;
}

.headerChevron {
  width: 13px;
  height: 13px;
  color: var(--header-muted);
  flex: none;
  transition: color .18s, transform .18s;
  display: block;
  transform: rotate(0);
}

.headerUnifiedDropdown[data-open="true"] > .headerDropdownTrigger .headerChevron {
  color: var(--color-accent);
  transform: rotate(180deg);
}

.siteHeaderIslands .headerDropdownPanel {
  z-index: 100;
  visibility: hidden;
  box-sizing: border-box;
  border: 1px solid var(--header-border);
  background: var(--header-dropdown-bg);
  box-shadow: none;
  opacity: 0;
  -webkit-backdrop-filter: blur(30px) saturate(1.4) contrast(1.04);
  backdrop-filter: blur(30px) saturate(1.4) contrast(1.04);
  transform-origin: 0 0;
  will-change: opacity, transform, backdrop-filter;
  pointer-events: none;
  border-radius: 24px;
  padding: 9px;
  transition: opacity .17s, transform .17s, visibility .17s;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  transform: translateY(-7px)scale(.985);
}

.siteHeaderIslands .headerUnifiedDropdown[data-align="right"] > .headerDropdownPanel {
  transform-origin: 100% 0;
  left: auto;
  right: 0;
}

.siteHeaderIslands .headerUnifiedDropdown[data-align="center"] > .headerDropdownPanel {
  transform-origin: top;
  left: 50%;
  transform: translate(-50%, -7px)scale(.985);
}

.siteHeaderIslands .headerUnifiedDropdown[data-open="false"] > .headerDropdownPanel {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-7px)scale(.985);
}

.siteHeaderIslands .headerUnifiedDropdown[data-open="false"][data-align="center"] > .headerDropdownPanel {
  transform: translate(-50%, -7px)scale(.985);
}

.siteHeaderIslands .headerUnifiedDropdown[data-open="true"] > .headerDropdownPanel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0)scale(1);
}

.siteHeaderIslands .headerUnifiedDropdown[data-align="center"][data-open="true"] > .headerDropdownPanel {
  transform: translate(-50%)scale(1);
}

.headerBrandPanel {
  width: min(330px, 100vw - 44px);
  -webkit-backdrop-filter: blur(30px) saturate(1.15) !important;
  backdrop-filter: blur(30px) saturate(1.15) !important;
  background: #121212db !important;
}

.headerCompactMenu, .headerMoreGrid {
  gap: 3px;
  display: grid;
}

.headerCompactMenu > a {
  min-height: 52px;
  color: var(--header-text);
  border-radius: 15px;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  transition: background-color .16s;
  display: grid;
}

.headerCompactMenu > a:hover, .headerCompactMenu > a:focus-visible, .headerMoreGrid > a:hover, .headerMoreGrid > a:focus-visible {
  background: var(--header-soft);
}

.headerCompactMenu > a > span:first-child {
  color: var(--header-muted);
  font-size: 8px;
}

.headerCompactMenu > a > strong {
  font-size: 11px;
  font-weight: 620;
}

.headerActionIcon {
  width: 14px;
  height: 14px;
  color: var(--color-accent);
  flex: none;
}

.headerCompactMenu > a > .headerActionIcon {
  box-sizing: border-box;
  color: #ffffff9e;
  background: #ffffff0e;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 6px;
  transition: background-color .16s, color .16s;
}

.headerCompactMenu > a:hover > .headerActionIcon, .headerCompactMenu > a:focus-visible > .headerActionIcon {
  background: rgb(var(--color-accent-rgb) / .14);
  color: var(--color-accent);
  transform: translate(1px, -1px);
}

.headerCompactMenu > .headerSearchLink {
  background: #ffffff0d;
  margin-top: 4px;
}

.headerSearchIcon {
  flex: none;
  width: 15px;
  height: 15px;
  color: #ffffffb8 !important;
}

.headerMenuIcon {
  width: 20px;
  height: 20px;
}

.siteHeaderIslands .mobileMenuFooter a {
  align-items: center;
  gap: 7px;
  display: inline-flex;
}

.siteHeaderIslands .mobileMenuFooter .headerActionIcon {
  width: 13px;
  height: 13px;
}

.siteHeaderIslands .headerServersPanel {
  width: min(650px, 100vw - 44px);
}

.siteHeaderIslands .headerGamesPanel {
  width: min(720px, 100vw - 44px);
}

.siteHeaderIslands .headerGameGrid .headerServerCard {
  min-height: 108px;
}

.siteHeaderIslands .headerConcreteServersPanel {
  width: min(540px, 100vw - 44px);
}

.siteHeaderIslands .headerDropdownHeading {
  padding: 8px 10px 15px;
}

.siteHeaderIslands .headerServerCard {
  isolation: isolate;
  box-sizing: border-box;
  background: var(--surface-subcard);
  color: #fff;
  border: 0;
  border-radius: 16px;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 132px;
  padding: 16px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.siteHeaderIslands .headerServerGrid {
  gap: 6px;
}

.siteHeaderIslands .headerServerGrid .headerServerCard:last-child:nth-child(odd) {
  min-height: 105px;
}

.siteHeaderIslands .headerDropdownFooter {
  min-height: 45px;
  color: var(--header-text);
  background: #ffffff0e;
  border: 0;
  border-radius: 15px;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding: 0 14px;
  font-size: 9px;
  transition: background-color .16s;
  display: flex;
}

.siteHeaderIslands .headerDropdownFooter:hover, .siteHeaderIslands .headerDropdownFooter:focus-visible {
  background: #ffffff1a;
}

.headerMorePanel {
  width: min(310px, 100vw - 44px);
}

.headerMoreGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.headerMoreGrid > a {
  min-height: 54px;
  color: var(--header-text);
  background: #ffffff06;
  border-radius: 15px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  font-size: 11px;
  font-weight: 580;
  transition: background-color .16s;
  display: flex;
}

.headerMobileBrand {
  display: none;
}

.siteHeaderIslands :is(a, button):focus-visible {
  outline-offset: 2px;
  box-shadow: none;
  outline: 1px solid #ffffff8c;
}

@media (max-width: 1220px) {
  .siteHeader.siteHeaderIslands {
    padding-left: 18px;
    padding-right: 18px;
  }

  .headerDesktopIslands {
    grid-template-columns: 206px minmax(0, 1fr) auto auto;
    gap: 6px;
  }

  .headerIsland, .headerPlayButton {
    min-height: 50px;
  }

  .headerPrimaryNav {
    height: 50px;
  }

  .headerPrimaryNav .headerNavLink, .headerPrimaryNav > .headerUnifiedDropdown > .headerDropdownTrigger {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 11px;
    font-weight: 600;
  }

  .headerBrandIsland {
    padding: 4px 6px;
  }

  .headerBrandIdentity {
    gap: 7px;
  }

  .headerBrandIdentity img {
    width: 26px;
    height: 26px;
  }

  .siteHeaderIslands .wordmark {
    font-size: 14px;
  }

  .headerUserIsland {
    min-width: 152px;
    padding: 4px 5px;
  }

  .headerUserIsland.isAuthenticated {
    min-width: 244px;
  }

  .headerUserIsland.isGuest {
    min-width: 78px;
  }

  .headerWalletLink {
    min-width: 80px;
    padding-right: 7px;
  }

  .headerWalletIcon {
    width: 27px;
    height: 27px;
  }

  .headerUtilityButton {
    width: 38px;
    height: 38px;
  }

  .headerUserIsland .desktopAccount {
    min-width: 38px;
    padding: 4px;
  }

  .headerUserIsland .headerAccountName {
    display: none;
  }

  .headerLoginLabel {
    padding: 0 5px;
    font-size: 11px;
  }

  .headerPlayButton {
    min-width: 104px;
    padding: 4px 13px 4px 5px;
    font-size: 12px;
    font-weight: 620;
  }

  .headerPlayGlyph {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 920px) {
  .headerTopline {
    top: 4px;
  }

  .headerMasthead {
    gap: 5px;
    font-size: 8px;
  }

  .headerMasthead img {
    width: 16px;
    height: 16px;
  }

  .headerTopLinks, .headerSystemsState > b {
    display: none;
  }

  .headerLiveStatus {
    gap: 5px;
    font-size: 7px;
    right: 18px;
  }

  .siteHeader.siteHeaderIslands {
    grid-template-columns: 1fr auto;
    align-items: center;
    height: 72px;
    padding: 0 18px;
    display: grid;
    transform: translateY(12px);
  }

  .headerDesktopIslands {
    display: none;
  }

  .headerMobileBrand {
    border: 1px solid var(--header-border);
    background: var(--header-island-bg);
    width: max-content;
    min-height: 42px;
    box-shadow: none;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-radius: 999px;
    align-items: center;
    gap: 9px;
    padding: 0 15px 0 8px;
    display: inline-flex;
  }

  .siteHeaderIslands .headerControls {
    pointer-events: auto;
    align-items: center;
    gap: 7px;
    display: flex;
  }

  .siteHeaderIslands .localeLink, .siteHeaderIslands .menuButton {
    border: 1px solid var(--header-border);
    background: var(--header-island-bg);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-radius: 50%;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }

  .siteHeaderIslands .mobileMenu {
    justify-content: flex-start;
    padding-top: 80px;
    overflow-y: auto;
  }

  .siteHeaderIslands .mobileMenuNav a {
    flex: none;
    padding: 5px 0;
    font-size: clamp(23px, 6.4vw, 40px);
  }

  .siteHeaderIslands .mobileMenuNav :is(a, .mobileMenuDisabled)[data-level="1"] {
    color: #ffffff94;
    padding-left: 28px;
    font-size: clamp(16px, 4.8vw, 25px);
  }

  .siteHeaderIslands .mobileMenuNav .mobileMenuDisabled {
    color: #ffffff57;
    flex: none;
    align-items: center;
    gap: 16px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
  }

  .siteHeaderIslands .mobileMenuNav .mobileMenuDisabled > span {
    color: #ffffff2e;
    font-size: 9px;
  }
}

@media (max-width: 560px) {
  .headerLiveStatusCopy, .headerLiveDivider {
    display: none;
  }

  .headerLiveStatus {
    right: 12px;
  }

  .siteHeader.siteHeaderIslands {
    height: 66px;
    padding: 0 12px;
  }

  .headerMobileBrand {
    min-height: 40px;
    padding-right: 12px;
  }

  .headerMobileBrand img {
    width: 25px;
    height: 25px;
  }

  .siteHeaderIslands .localeLink, .siteHeaderIslands .menuButton {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .siteHeaderIslands .mobileMenu {
    padding-top: 74px;
  }

  .siteHeaderIslands .mobileMenuNav a {
    gap: 13px;
    padding: 4px 0;
    font-size: clamp(21px, 6.7vw, 32px);
  }
}

.pixelBattlePage {
  background: var(--surface-subcard);
  color: #f6f4ef;
  min-height: 100svh;
  overflow: hidden visible;
}

.pixelBattleHeader .siteHeader {
  z-index: 120;
  background: none;
}

.pixelBattleHeader .wordmark, .pixelBattleHeader .desktopNav > a, .pixelBattleHeader .desktopNav > .headerDropdown > .headerDropdownTrigger, .pixelBattleHeader .headerAuthCluster > a, .pixelBattleHeader .headerAccountName strong, .pixelBattleHeader .desktopNav > a:hover, .pixelBattleHeader .desktopNav > a:focus-visible, .pixelBattleHeader .desktopNav > a[aria-current="page"], .pixelBattleHeader .desktopNav > .headerDropdown > .headerDropdownTrigger:hover, .pixelBattleHeader .desktopNav > .headerDropdown > .headerDropdownTrigger:focus-visible {
  color: #fff;
}

.pixelBattleHeader .desktopNav .desktopLanguage {
  border-color: #ffffff47;
}

.pixelBattleHeader .desktopNav > .headerDropdown > .headerDropdownTrigger > i, .pixelBattleHeader .localeLink {
  color: #ffffff80;
}

.pixelBattleHeader .headerAccountSkeleton {
  background: #ffffff29;
}

.pixelBattleHeader .menuButton {
  background: #ffffff0f;
  border-color: #ffffff40;
}

.pixelBattleHeader .menuButton span {
  background: #fff;
}

.pixelBattleWorkspace {
  box-sizing: border-box;
  background: var(--surface-subcard);
  grid-template-rows: 92px minmax(0, 1fr) 76px;
  height: 100svh;
  padding-top: 86px;
  display: grid;
  overflow: hidden;
}

.pixelBattleTopbar {
  color: #fff;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 0 12px 0 3.4vw;
  display: flex;
}

.pixelBattleTopbarTitle {
  flex: none;
  align-items: center;
  gap: 15px;
  display: flex;
}

.pixelBattleTopbarTitle > span {
  color: var(--color-accent);
  letter-spacing: .1em;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 750;
}

.pixelBattleTopbar h1 {
  letter-spacing: -.025em;
  margin: 0;
  font-size: clamp(30px, 2.35vw, 44px);
  font-weight: 430;
  line-height: 1;
}

.pixelBattleTopbar p {
  color: #ffffff75;
  margin: 0;
  font-size: 8px;
}

.pixelBattleTopbarSummary {
  align-self: center;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-top: 0;
  display: flex;
}

.pixelBattleTopbarSummary p {
  white-space: nowrap;
  order: 1;
}

.pixelBattleTopbarSummary .pixelBattleSignals {
  order: 0;
}

.pixelBattleSignals {
  align-items: center;
  gap: 5px;
  display: flex;
}

.pixelBattleSignals > span {
  background: var(--surface-subcard-hover);
  color: #ffffffad;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 9px;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 10px;
  font-size: 7px;
  font-weight: 700;
  display: inline-flex;
}

.pixelBattleSignals i {
  background: #b8ff36;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 12px #b8ff36a6;
}

.pixelBattleSignals span[data-status="paused"] i, .pixelBattleSignals span[data-status="reconnecting"] i {
  background: #ff9f1a;
  box-shadow: 0 0 12px #ff9f1a80;
}

.pixelBattleSignals span[data-status="finished"] i {
  box-shadow: none;
  background: #777;
}

.pixelBattleStage {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
  gap: 10px;
  min-height: 0;
  padding: 0 12px;
  transition: grid-template-columns .18s;
  display: grid;
  position: relative;
}

.pixelBattleWorkspace[data-sidebar-collapsed="true"] .pixelBattleStage {
  grid-template-columns: minmax(0, 1fr);
}

.pixelBattleWorkspace[data-sidebar-collapsed="true"] .pixelBattleSidebar {
  display: none;
}

.pixelBattleWorkspaceNav {
  box-sizing: border-box;
  flex: none;
  gap: 5px;
  width: auto;
  min-width: 0;
  margin-left: auto;
  display: flex;
}

.pixelBattleWorkspaceNav button {
  background: var(--surface-subcard-hover);
  color: #fff9;
  cursor: pointer;
  text-align: left;
  border: 0;
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  min-width: 112px;
  min-height: 42px;
  padding: 0 12px;
  font-size: 9px;
  font-weight: 650;
  transition: background .15s, color .15s;
  display: flex;
}

.pixelBattleWorkspaceNav button b {
  color: #ffffff57;
  font-size: 7px;
  font-weight: 700;
}

.pixelBattleWorkspaceNav button[data-active="true"] {
  color: #0a0a0a;
  background: #f1efea;
}

.pixelBattleWorkspaceNav button:hover:not([data-active="true"]) {
  color: #fff;
  background: #333;
}

.pixelBattleViewport {
  background: var(--surface-card);
  border-radius: 24px;
  min-width: 0;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 90px #00000061, 0 24px 80px #0000003d;
}

.pixelBattleViewport canvas {
  touch-action: none;
  cursor: grab;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  display: block;
}

.pixelBattleViewport canvas:active {
  cursor: grabbing;
}

.pixelBattleViewport[data-reporting="true"] canvas {
  cursor: crosshair;
}

.gameCatalogPage, .serverCatalogPage {
  background: var(--surface-card);
  color: #f5f3ef;
}

.gameCatalogHero, .serverCatalogHero {
  isolation: isolate;
  background: var(--surface-card);
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  min-height: min(760px, 88dvh);
  padding: 0 clamp(28px, 5vw, 86px) clamp(54px, 7vw, 96px);
  display: grid;
  position: relative;
  overflow: hidden;
}

.gameCatalogHero > .siteHeader, .serverCatalogHero > .siteHeader {
  position: absolute;
  inset: 0 0 auto;
}

.gameCatalogHeroMedia, .serverCatalogHeroMedia {
  z-index: -2;
  position: absolute;
  inset: 0;
}

.gameCatalogHeroMedia img, .serverCatalogHeroMedia img {
  object-fit: cover;
}

.gameCatalogHeroMedia > i, .serverCatalogHeroMedia > i {
  z-index: 2;
  background: linear-gradient(90deg,
      #070707e6 0%,
      #07070770 62%,
      #07070794 100%),
    linear-gradient(0deg, var(--surface-card) 0%, transparent 58%);
  position: absolute;
  inset: 0;
}

.gameCatalogHeroCopy, .serverCatalogHeroCopy {
  max-width: 820px;
}

.gameCatalogHeroCopy > p, .serverCatalogHeroCopy > p, .gameCatalogDirectory > header > p, .serverCatalogDirectory > header > p {
  color: var(--color-accent);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 760;
}

.gameCatalogHeroCopy h1, .serverCatalogHeroCopy h1 {
  letter-spacing: -.065em;
  max-width: 820px;
  margin: 0;
  font-size: clamp(58px, 7.5vw, 126px);
  font-weight: 480;
  line-height: .92;
}

.gameCatalogHeroCopy > span, .serverCatalogHeroCopy > span {
  color: #ffffffb8;
  max-width: 520px;
  margin-top: 20px;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.45;
  display: block;
}

.serverCatalogHero {
  height: 100svh;
  min-height: 720px;
  padding: calc(var(--platform-topbar-space, 80px) + 24px)
    clamp(28px, 5vw, 86px)
    calc(var(--platform-dock-space, 96px) + 28px);
  align-content: center;
}

@supports (height: 100dvh) {
  .serverCatalogHero {
    height: 100dvh;
  }
}

.serverCatalogHeroMedia img {
  object-position: 42% center;
  filter: saturate(1.06) contrast(1.04);
}

.serverCatalogHeroMedia > i {
  background: linear-gradient(270deg, #070707eb 0%, #070707a3 38%, #0707071f 72%, #0707073d 100%), linear-gradient(0deg, #070707d1 0%, #0000 48%, #0707071f 100%);
}

.serverCatalogHeroCopy {
  z-index: 3;
  width: min(720px, 49vw);
  max-width: none;
  margin-left: auto;
  position: relative;
}

.serverCatalogHeroCopy h1 {
  max-width: 720px;
  font-size: clamp(68px, 7vw, 118px);
}

.serverCatalogHeroCopy > span {
  max-width: 470px;
}

.serverCatalogHero .catalogHeroAction.isPlay {
  border-color: var(--surface-light-outline);
  background: var(--surface-light);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  backdrop-filter: blur(28px) saturate(1.2);
}

.serverCatalogHeroStats {
  border-top: 1px solid #ffffff29;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 660px;
  margin-top: clamp(32px, 5vh, 54px);
  padding-top: 18px;
  display: grid;
}

.serverCatalogHeroStats > span {
  border-left: 1px solid #ffffff1f;
  gap: 7px;
  min-width: 0;
  padding: 0 18px;
  display: grid;
}

.serverCatalogHeroStats > span:first-child {
  border-left: 0;
  padding-left: 0;
}

.serverCatalogHeroStats small {
  color: #ffffff70;
  font: 700 8px/1 var(--font-mono, monospace);
  letter-spacing: .1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.serverCatalogHeroStats strong {
  color: var(--text-primary);
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 570;
  overflow: hidden;
}

.serverCatalogPage .serverEntryActions {
  padding-top: clamp(46px, 6vw, 84px);
}

.catalogHeroAction {
  color: #fff;
  background: var(--color-accent);
  border-radius: 999px;
  align-items: center;
  gap: 34px;
  min-height: 52px;
  margin-top: 30px;
  padding: 0 18px 0 22px;
  font-size: 13px;
  font-weight: 720;
  transition: background-color .16s, transform .16s;
  display: inline-flex;
}

.catalogHeroActions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
  display: flex;
}

.catalogHeroActions .catalogHeroAction {
  margin-top: 0;
}

.catalogHeroAction.isPlay {
  background: #121212b8;
  border: 1px solid #fff3;
}

.catalogHeroAction.isPlay:hover, .catalogHeroAction.isPlay:focus-visible {
  background: var(--surface-subcard);
}

.catalogHeroAction:hover, .catalogHeroAction:focus-visible {
  background: var(--color-accent);
  transform: translateY(-2px);
}

.catalogHeroAction svg {
  width: 17px;
  height: 17px;
}

.serverEntryActions {
  background: var(--surface-card);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px clamp(24px, 5vw, 86px) clamp(52px, 7vw, 94px);
  display: grid;
}

.serverEntryActions > a {
  box-sizing: border-box;
  color: #fff;
  border-radius: 30px;
  align-content: end;
  min-height: 290px;
  padding: clamp(26px, 3vw, 44px);
  transition: transform .18s, background-color .18s;
  display: grid;
  position: relative;
  overflow: hidden;
}

.serverEntryActions > a:hover, .serverEntryActions > a:focus-visible {
  transform: translateY(-4px);
}

.serverEntryActions > .isPlay, .serverEntryActions > .isPlay:hover, .serverEntryActions > .isPlay:focus-visible {
  background: var(--color-accent);
}

.serverEntryActions > .isRules {
  background: var(--surface-subcard);
  border: 1px solid #ffffff2e;
}

.serverEntryActions > .isRules:hover, .serverEntryActions > .isRules:focus-visible {
  background: var(--surface-subcard);
}

.serverEntryActionIcon {
  background: #0000002e;
  border-radius: 50%;
  place-items: center;
  width: 52px;
  height: 52px;
  display: grid;
  position: absolute;
  top: 28px;
  left: 30px;
}

.serverEntryActionIcon svg {
  width: 22px;
  height: 22px;
}

.serverEntryActions small {
  color: #ffffff94;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 15px;
  font-size: 8px;
  font-weight: 700;
}

.serverEntryActions h2 {
  letter-spacing: -.055em;
  max-width: 540px;
  margin: 0;
  font-size: clamp(42px, 4.2vw, 72px);
  font-weight: 470;
  line-height: .92;
}

.serverEntryActions p {
  color: #ffffffad;
  margin: 16px 0 0;
  font-size: 13px;
}

.serverEntryActionOpen {
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  font-weight: 720;
  display: flex;
  position: absolute;
  bottom: 30px;
  right: 28px;
}

.serverEntryActionOpen svg {
  width: 16px;
  height: 16px;
}

.gameCatalogDirectory, .serverCatalogDirectory {
  padding: clamp(64px, 8vw, 122px) clamp(24px, 5vw, 86px);
}

.gameCatalogDirectory > header, .serverCatalogDirectory > header {
  border-bottom: 1px solid #ffffff24;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
  padding-bottom: 16px;
  display: flex;
}

.gameCatalogDirectory > header > p, .serverCatalogDirectory > header > p {
  margin: 0;
}

.gameCatalogDirectory > header > span, .serverCatalogDirectory > header > span {
  color: #ffffff61;
  font-size: 11px;
}

.gameCatalogToolbar {
  grid-template-columns: minmax(260px, 1.4fr) auto minmax(170px, .6fr) minmax(170px, .6fr);
  gap: 8px;
  margin-bottom: 14px;
  display: grid;
}

.gameCatalogSearch, .gameCatalogSelect, .gameCatalogStatusFilters {
  background: var(--surface-subcard);
  border: 1px solid #ffffff24;
  border-radius: 16px;
  min-height: 52px;
}

.gameCatalogSearch, .gameCatalogSelect {
  align-items: center;
  gap: 11px;
  padding: 0 16px;
  display: flex;
}

.gameCatalogSearch svg, .gameCatalogSelect svg {
  color: #ffffff75;
  flex: none;
  width: 17px;
  height: 17px;
}

.gameCatalogSearch input, .gameCatalogSelect select {
  color: #fff;
  width: 100%;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.gameCatalogSearch input::placeholder {
  color: #ffffff6b;
}

.gameCatalogSelect select {
  cursor: pointer;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  min-width: 0;
}

.gameCatalogStatusFilters {
  gap: 3px;
  padding: 4px;
  display: flex;
}

.gameCatalogStatusFilters button {
  color: #ffffff80;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 12px;
  min-width: 74px;
  font-size: 10px;
  font-weight: 700;
  transition: background-color .15s, color .15s;
}

.gameCatalogStatusFilters button:hover, .gameCatalogStatusFilters button:focus-visible {
  color: #fff;
}

.gameCatalogStatusFilters button[data-active="true"] {
  color: #0a0a0a;
  background: #f1efea;
}

.gameCatalogResultCount {
  color: #ffffff6b;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 22px;
  font-size: 10px;
}

.gameCatalogResultCount strong {
  color: #fff;
  font-weight: 720;
}

.gameCatalogEmpty {
  background: var(--surface-subcard);
  color: #ffffff80;
  text-align: center;
  border: 1px solid #ffffff24;
  border-radius: 28px;
  place-content: center;
  justify-items: center;
  gap: 16px;
  min-height: 280px;
  display: grid;
}

.gameCatalogEmpty svg {
  width: 26px;
  height: 26px;
}

.gameCatalogEmpty p {
  margin: 0;
  font-size: 13px;
}

.gameCatalogGrid, .serverCatalogGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.gameCatalogCard, .serverCatalogCard {
  background: var(--surface-subcard);
  color: #fff;
  border-radius: 30px;
  min-height: 560px;
  padding: 24px;
  text-decoration: none;
  display: grid;
  position: relative;
  overflow: hidden;
}

.gameCatalogCard.isAnnounced, .serverCatalogCard.isAnnounced {
  color: #ffffffbd;
}

.gameCatalogCardMedia, .serverCatalogCardMedia {
  position: absolute;
  inset: 0;
}

.gameCatalogCardMedia img, .serverCatalogCardMedia img {
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.gameCatalogCard:hover .gameCatalogCardMedia img, .serverCatalogCard:hover .serverCatalogCardMedia img {
  transform: scale(1.035);
}

.gameCatalogCardMedia > i, .serverCatalogCardMedia > i {
  background: linear-gradient(0deg, #040404f5 0%, #04040447 72%, #04040485 100%);
  position: absolute;
  inset: 0;
}

.gameCatalogCardTop, .serverCatalogCardTop, .gameCatalogCardCopy, .serverCatalogCardCopy, .gameCatalogProjects, .gameCatalogCardAction, .serverCatalogCardAction {
  z-index: 1;
  position: relative;
}

.gameCatalogCardTop, .serverCatalogCardTop, .gameCatalogCardAction, .serverCatalogCardAction {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.gameCatalogCardTop span, .serverCatalogCardTop span, .gameCatalogCardTop b, .serverCatalogCardTop b {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 720;
}

.gameCatalogCardTop b, .serverCatalogCardTop b {
  background: var(--color-accent);
  border-radius: 999px;
  padding: 8px 10px;
}

.isAnnounced .gameCatalogCardTop b, .isAnnounced .serverCatalogCardTop b {
  background: #ffffff1f;
}

.gameCatalogCardCopy, .serverCatalogCardCopy {
  align-self: end;
  margin-top: auto;
}

.gameCatalogCardCopy h2, .serverCatalogCardCopy h2 {
  letter-spacing: -.055em;
  margin: 0;
  font-size: clamp(38px, 4.3vw, 76px);
  font-weight: 560;
  line-height: .95;
}

.gameCatalogCardCopy p, .serverCatalogCardCopy p {
  color: #ffffffa6;
  max-width: 560px;
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.gameCatalogProjects {
  border-top: 1px solid #fff3;
  margin-top: 26px;
  padding-top: 17px;
}

.gameCatalogProjects > small {
  color: #ffffff6b;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-size: 8px;
  display: block;
}

.gameCatalogProjects > div {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.gameCatalogProjects span {
  background: #ffffff1a;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  display: inline-flex;
}

.gameCatalogProjects b, .gameCatalogProjects i {
  font-size: 9px;
  font-style: normal;
}

.gameCatalogProjects i {
  color: #ffffff73;
}

.gameCatalogCardAction, .serverCatalogCardAction {
  margin-top: 22px;
  font-size: 11px;
  font-weight: 680;
}

.gameCatalogUpcoming {
  padding-top: 0;
}

@media (max-width: 900px) {
  .gameCatalogHero, .serverCatalogHero {
    grid-template-columns: 1fr;
    min-height: 760px;
    padding-bottom: 42px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .serverCatalogHero {
    height: 100svh;
    min-height: 700px;
    padding-bottom: calc(var(--platform-dock-space, 82px) + 28px);
    align-content: end;
  }

  @supports (height: 100dvh) {
    .serverCatalogHero {
      height: 100dvh;
    }
  }

  .serverCatalogHeroMedia img {
    object-position: 42% center;
  }

  .serverCatalogHeroMedia > i {
    background: linear-gradient(90deg, #070707cc 0%, #07070747 100%), linear-gradient(0deg, #070707eb 0%, #0000 62%);
  }

  .serverCatalogHeroCopy {
    width: 100%;
    margin-left: 0;
  }

  .serverCatalogHeroCopy h1 {
    font-size: clamp(58px, 13vw, 88px);
  }

  .gameCatalogGrid, .serverCatalogGrid {
    grid-template-columns: 1fr;
  }

  .gameCatalogToolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .gameCatalogSearch, .gameCatalogStatusFilters {
    grid-column: 1 / -1;
  }

  .serverEntryActions {
    grid-template-columns: 1fr;
  }

  .serverEntryActionOpen {
    justify-self: end;
    margin-top: 26px;
    position: static;
  }

  .gameCatalogCard, .serverCatalogCard {
    border-radius: 24px;
    min-height: 500px;
  }
}

@media (max-width: 560px) {
  .catalogHeroActions, .catalogHeroActions .catalogHeroAction {
    width: 100%;
  }

  .catalogHeroActions .catalogHeroAction {
    justify-content: space-between;
  }

  .serverCatalogHeroStats > span {
    padding: 0 10px;
  }

  .serverCatalogHeroStats strong {
    font-size: 15px;
  }

  .gameCatalogToolbar {
    grid-template-columns: 1fr;
  }

  .gameCatalogSearch, .gameCatalogStatusFilters {
    grid-column: auto;
  }

  .gameCatalogStatusFilters button {
    flex: 1;
    min-width: 0;
  }
}

.scopedContentSection {
  background: var(--surface-card);
  color: #f5f3ef;
  padding: clamp(70px, 9vw, 138px) clamp(24px, 5vw, 86px);
}

.scopedContentSection > header {
  border-bottom: 1px solid #ffffff24;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 34px;
  padding-bottom: 20px;
  display: flex;
}

.scopedContentSection > header p {
  color: var(--color-accent);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-size: 9px;
  font-weight: 740;
}

.scopedContentSection > header h2 {
  letter-spacing: -.055em;
  max-width: 760px;
  margin: 0;
  font-size: clamp(34px, 4vw, 68px);
  font-weight: 500;
  line-height: .98;
}

.scopedContentSection > header > a {
  color: #ffffffb8;
  flex: none;
  align-items: center;
  gap: 18px;
  padding: 13px 0;
  font-size: 10px;
  font-weight: 650;
  text-decoration: none;
  display: inline-flex;
}

.scopedContentSection > header > a span {
  color: var(--color-accent);
}

.scopedContentSection > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.scopedContentCard {
  background: var(--surface-subcard);
  color: #fff;
  border-radius: 22px;
  flex-direction: column;
  min-width: 0;
  min-height: 370px;
  padding: 12px 12px 18px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.scopedContentMedia {
  background: var(--surface-subcard);
  border-radius: 14px;
  height: 180px;
  margin-bottom: 18px;
  display: block;
  position: relative;
  overflow: hidden;
}

.scopedContentMedia img {
  object-fit: cover;
  transition: transform .3s;
}

.scopedContentCard:hover .scopedContentMedia img {
  transform: scale(1.035);
}

.scopedContentCard > small {
  color: var(--color-accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 700;
}

.scopedContentCard > strong {
  letter-spacing: -.035em;
  margin-top: 11px;
  font-size: clamp(18px, 1.55vw, 27px);
  line-height: 1.05;
}

.scopedContentCard > p {
  color: #ffffff7a;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}

.scopedContentCard > i {
  color: var(--color-accent);
  margin-top: auto;
  padding-top: 15px;
  font-style: normal;
}

@media (max-width: 1050px) {
  .scopedContentSection > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .scopedContentSection > header {
    flex-direction: column;
    align-items: flex-start;
  }

  .scopedContentSection > div {
    grid-template-columns: 1fr;
  }

  .scopedContentCard {
    min-height: 330px;
  }
}

.pixelBattleViewControls {
  z-index: 7;
  gap: 7px;
  display: flex;
  position: absolute;
  top: 46px;
  right: 16px;
}

.pixelBattleViewControls button {
  color: #ffffffc7;
  cursor: pointer;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #252525f0;
  border: 0;
  border-radius: 11px;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 13px 0 8px;
  font-size: 8px;
  font-weight: 680;
  display: flex;
}

.pixelBattleViewControls button i {
  color: #fff;
  background: #ffffff12;
  border-radius: 8px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 15px;
  font-style: normal;
  display: grid;
}

.pixelBattleViewControls button:hover, .pixelBattleViewControls button[aria-pressed="true"] {
  color: #0a0a0a;
  background: #f1efea;
}

.pixelBattleViewControls button:hover i, .pixelBattleViewControls button[aria-pressed="true"] i {
  background: var(--color-accent);
  color: #0a0a0a;
}

.pixelBattleWorkspace[data-fullscreen="true"] {
  z-index: 9999;
  grid-template-rows: minmax(0, 1fr) 76px;
  height: 100svh;
  padding-top: 0;
  position: fixed;
  inset: 0;
}

.pixelBattleWorkspace[data-fullscreen="true"] .pixelBattleTopbar, .pixelBattleWorkspace[data-fullscreen="true"] .pixelBattleWorkspaceNav {
  display: none;
}

.pixelBattleWorkspace[data-fullscreen="true"] .pixelBattleStage {
  padding-top: 10px;
}

body.pixelBattleFullscreenOpen {
  overflow: hidden;
}

body.pixelBattleFullscreenOpen .pixelBattleHeader {
  display: none;
}

.pixelBattleCanvasMeta {
  color: #ffffff80;
  letter-spacing: .04em;
  pointer-events: none;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 9px;
  display: flex;
  position: absolute;
  bottom: 16px;
  left: 356px;
  right: 18px;
}

.pixelBattleCursorCoordinates {
  z-index: 4;
  color: #fff;
  letter-spacing: .03em;
  pointer-events: none;
  white-space: nowrap;
  background: #040507e6;
  border-radius: 7px;
  gap: 8px;
  padding: 7px 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  display: flex;
  position: absolute;
  transform: translate(14px, 14px);
}

.pixelBattleCursorCoordinates b:last-child {
  color: var(--color-accent);
}

.pixelBattleAuthor {
  color: #ffffffdb;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: auto;
  background: #080808c7;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  display: flex;
}

.pixelBattleAuthor > i {
  width: 11px;
  height: 11px;
}

.pixelBattleAuthor time {
  color: #ffffff57;
}

.pixelBattleTools {
  z-index: 5;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  scrollbar-width: thin;
  background: #303030fa;
  border-radius: 20px;
  gap: 16px;
  width: 292px;
  max-height: calc(100% - 124px);
  padding: 20px;
  display: grid;
  position: absolute;
  top: 72px;
  left: 72px;
  overflow: auto;
  box-shadow: 0 24px 70px #0000003d;
}

.pixelBattleToolsHeader {
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  display: flex;
}

.pixelBattleToolsHeader span, .pixelBattlePalette header, .pixelBattleCustomPalette header, .pixelBattleZoomControl > span {
  color: #fff6;
  letter-spacing: .075em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 700;
}

.pixelBattleToolsHeader strong {
  letter-spacing: -.01em;
  font-size: 17px;
  font-weight: 560;
}

.pixelBattleColorControl {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 9px;
  display: grid;
}

.pixelBattleColorPreview {
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 13px;
  width: 64px;
  height: 58px;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
}

.pixelBattleColorPreview > span {
  z-index: 2;
  color: #fffc;
  text-transform: uppercase;
  font-size: 7px;
  font-weight: 750;
  position: absolute;
  bottom: 6px;
  right: 7px;
}

.pixelBattleColorPreview i {
  position: absolute;
  inset: 0;
}

.pixelBattleHexField {
  background: var(--surface-subcard);
  border-radius: 13px;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 13px;
  display: grid;
}

.pixelBattleHexField span {
  color: #ffffff57;
  letter-spacing: .08em;
  font-size: 8px;
  font-weight: 700;
}

.pixelBattleHexField input {
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.pixelBattleColorPickerDismiss {
  z-index: 6;
  cursor: default;
  background: none;
  border: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}

.pixelBattleColorPicker {
  z-index: 8;
  box-sizing: border-box;
  color: #fff;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  scrollbar-width: thin;
  background: #252525fc;
  border-radius: 20px;
  gap: 9px;
  width: 300px;
  max-height: calc(100% - 36px);
  padding: 14px;
  display: grid;
  position: absolute;
  top: 18px;
  left: 350px;
  overflow: auto;
  box-shadow: 0 26px 90px #00000094;
}

.pixelBattleColorPicker > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.pixelBattleColorPicker > header > div {
  gap: 4px;
  display: grid;
}

.pixelBattleColorPicker > header span {
  color: var(--color-accent);
  letter-spacing: .09em;
  font-size: 7px;
  font-weight: 760;
}

.pixelBattleColorPicker > header strong {
  letter-spacing: -.015em;
  font-size: 16px;
  font-weight: 560;
}

.pixelBattleColorPicker > header > button {
  background: var(--surface-subcard-hover);
  color: #ffffffb8;
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 16px;
  display: grid;
}

.pixelBattlePickerCurrent {
  background: var(--surface-subcard);
  border-radius: 12px;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px;
  display: grid;
}

.pixelBattlePickerCurrent > i {
  border-radius: 9px;
  width: 36px;
  height: 36px;
}

.pixelBattlePickerCurrent > div {
  gap: 3px;
  display: grid;
}

.pixelBattlePickerCurrent span, .pixelBattlePickerCurrent > b {
  color: #ffffff59;
  letter-spacing: .045em;
  text-transform: uppercase;
  font-size: 7px;
  font-weight: 650;
}

.pixelBattlePickerCurrent strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 650;
}

.pixelBattlePickerCurrent > b {
  text-align: right;
  max-width: 58px;
  line-height: 1.4;
}

.pixelBattleSaturationField {
  cursor: crosshair;
  touch-action: none;
  border-radius: 14px;
  height: 118px;
  position: relative;
  overflow: hidden;
}

.pixelBattleSaturationField:before {
  content: "";
  background: linear-gradient(0deg, #000, #0000), linear-gradient(90deg, #fff, #fff0);
  position: absolute;
  inset: 0;
}

.pixelBattleSaturationField > span {
  z-index: 2;
  pointer-events: none;
  background: #fff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 10px #0009;
}

.pixelBattleHueSlider {
  grid-template-columns: 32px 1fr 34px;
  align-items: center;
  gap: 8px;
  display: grid;
}

.pixelBattleHueSlider > span, .pixelBattlePickerHex > span, .pixelBattleRgbFields label > span {
  color: #fff6;
  letter-spacing: .08em;
  font-size: 7px;
  font-weight: 720;
}

.pixelBattleHueSlider input {
  appearance: none;
  cursor: pointer;
  background: linear-gradient(90deg, #f33, #ff0, #0f6, #0ff, #16f, #b2f, #f33);
  border-radius: 999px;
  width: 100%;
  height: 8px;
  margin: 0;
}

.pixelBattleHueSlider input::-webkit-slider-thumb {
  appearance: none;
  background: #fff;
  border: 0;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  box-shadow: 0 2px 9px #0000008c;
}

.pixelBattleHueSlider input::-moz-range-thumb {
  background: #fff;
  border: 0;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  box-shadow: 0 2px 9px #0000008c;
}

.pixelBattleHueSlider output {
  color: #ffffffad;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
}

.pixelBattleRgbFields {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  display: grid;
}

.pixelBattleRgbFields label, .pixelBattlePickerHex {
  background: var(--surface-subcard);
  border-radius: 10px;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  display: grid;
}

.pixelBattleRgbFields input, .pixelBattlePickerHex input {
  color: #fff;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

.pixelBattleRgbFields input {
  appearance: textfield;
}

.pixelBattleRgbFields input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.pixelBattleRgbFields input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.pixelBattleColorPicker > footer {
  grid-template-columns: 1fr 84px;
  gap: 6px;
  display: grid;
}

.pixelBattleColorPicker > footer button {
  background: var(--surface-subcard-hover);
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  border: 0;
  border-radius: 10px;
  min-height: 38px;
  padding: 0 12px;
  font-size: 8px;
  font-weight: 720;
}

.pixelBattleColorPicker > footer button:last-child {
  background: var(--color-accent);
  color: #0a0a0a;
}

.pixelBattleColorPicker > footer button:disabled {
  color: #ffffff40;
  cursor: default;
}

.pixelBattlePalette, .pixelBattleCustomPalette {
  gap: 10px;
  display: grid;
}

.pixelBattlePalette header, .pixelBattleCustomPalette header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.pixelBattlePalette header small {
  color: #ffffff38;
  font-size: 8px;
}

.pixelBattleSwatches {
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  display: grid;
}

.pixelBattleSwatches button, .pixelBattleCustomPalette > div > span > button:first-child {
  aspect-ratio: 1;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  width: 100%;
  padding: 0;
  transition: transform .14s, opacity .14s;
}

.pixelBattleSwatches button:hover, .pixelBattleCustomPalette > div > span > button:first-child:hover {
  transform: scale(.86);
}

.pixelBattleSwatches button[aria-pressed="true"], .pixelBattleCustomPalette > div > span > button:first-child[aria-pressed="true"] {
  transform: scale(.64);
}

.pixelBattleCustomPalette header button {
  color: var(--color-accent);
  cursor: pointer;
  text-transform: uppercase;
  background: none;
  border: 0;
  padding: 0;
  font-size: 8px;
  font-weight: 720;
}

.pixelBattleCustomPalette header button:disabled {
  color: #fff3;
  cursor: default;
}

.pixelBattleCustomPalette > div {
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  display: grid;
}

.pixelBattleCustomPalette > div > span {
  position: relative;
}

.pixelBattleCustomPalette > div > span > button:last-child {
  background: var(--surface-subcard-hover);
  color: #ffffffbf;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 15px;
  height: 15px;
  padding: 0;
  font-size: 9px;
  display: grid;
  position: absolute;
  top: -5px;
  right: -4px;
}

.pixelBattleToolPrimary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.pixelBattleToolPrimary button {
  background: var(--surface-subcard);
  color: #ffffffb8;
  cursor: pointer;
  border: 0;
  border-radius: 11px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  font-size: 8px;
  font-weight: 680;
  transition: background .15s, color .15s;
  display: flex;
}

.pixelBattleToolPrimary button i {
  background: #ffffff12;
  border-radius: 7px;
  place-items: center;
  width: 23px;
  height: 23px;
  font-size: 13px;
  font-style: normal;
  display: grid;
}

.pixelBattleToolPrimary button:hover, .pixelBattleToolPrimary button[data-active="true"] {
  background: var(--color-accent);
  color: #090909;
}

.pixelBattleZoomControl {
  gap: 9px;
  display: grid;
}

.pixelBattleZoomControl > div {
  grid-template-columns: 38px 1fr 38px 38px;
  gap: 5px;
  display: grid;
}

.pixelBattleZoomControl :is(button, output) {
  background: var(--surface-subcard);
  color: #ffffffc7;
  border: 0;
  border-radius: 9px;
  place-items: center;
  min-height: 38px;
  font-size: 12px;
  display: grid;
}

.pixelBattleZoomControl button {
  cursor: pointer;
}

.pixelBattleZoomControl button:hover {
  background: rgb(var(--color-accent-rgb) / .18);
}

.pixelBattleZoomControl output {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
}

.pixelBattleSidebar {
  background: #303030;
  border-radius: 24px;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  display: grid;
  overflow: hidden;
  box-shadow: 0 24px 70px #0000002e;
}

.pixelBattlePanel {
  scrollbar-width: thin;
  min-height: 0;
  padding: 24px 18px;
  overflow: auto;
}

.pixelBattlePanel > header > span {
  color: var(--color-accent);
  letter-spacing: .08em;
  font-size: 8px;
  font-weight: 700;
}

.pixelBattlePanel > header h2 {
  letter-spacing: -.035em;
  margin: 8px 0 24px;
  font-size: clamp(27px, 2.4vw, 40px);
  font-weight: 430;
}

.pixelBattleRanking {
  gap: 4px;
  display: grid;
}

.pixelBattleRanking article {
  background: #ffffff09;
  border-radius: 11px;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  display: grid;
}

.pixelBattleRanking article > strong {
  color: var(--color-accent);
  font-size: 9px;
}

.pixelBattleRanking article > div {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.pixelBattleRanking article > div :is(a, b) {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 650;
  overflow: hidden;
}

.pixelBattleRanking small {
  color: #ffffff59;
  font-size: 7px;
  font-weight: 450;
}

.pixelBattleRanking article > span {
  color: #fff;
  text-align: right;
  flex-direction: column;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.pixelBattleRanking > p, .pixelBattleActivity > p {
  color: #ffffff73;
  font-size: 11px;
  line-height: 1.5;
}

.pixelBattleStatGrid {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  display: grid;
}

.pixelBattleStatGrid article {
  background: var(--surface-subcard);
  border-radius: 12px;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 94px;
  padding: 12px;
  display: flex;
}

.pixelBattleStatGrid strong {
  font-size: 22px;
  font-weight: 500;
}

.pixelBattleStatGrid span {
  color: #ffffff61;
  text-transform: uppercase;
  margin-top: 5px;
  font-size: 7px;
  line-height: 1.25;
}

.pixelBattleActivityTitle {
  color: #ffffff80;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 24px 0 10px;
  font-size: 8px;
}

.pixelBattleActivity {
  gap: 4px;
  display: grid;
}

.pixelBattleActivity article {
  background: #ffffff09;
  border-radius: 8px;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 8px;
  font-size: 8px;
  display: grid;
}

.pixelBattleActivity article i {
  width: 10px;
  height: 10px;
}

.pixelBattleActivity time {
  color: #ffffff52;
}

.pixelBattleSignIn {
  background: linear-gradient(135deg, #352019, var(--surface-subcard) 70%);
  border-radius: 16px;
  padding: 22px;
}

.pixelBattleSignIn p {
  margin: 0 0 24px;
  font-size: 22px;
  line-height: 1.04;
}

.pixelBattleSignIn a, .pixelBattlePanelAction {
  color: #080808;
  cursor: pointer;
  background: #f3f0e9;
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 15px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.pixelBattlePanelAction:disabled {
  opacity: .5;
  cursor: wait;
}

.pixelBattleReplay {
  gap: 16px;
  display: grid;
}

.pixelBattleReplay > div {
  align-items: center;
  gap: 14px;
  display: flex;
}

.pixelBattleReplay > div button {
  background: var(--color-accent);
  cursor: pointer;
  border-radius: 12px;
  width: 44px;
  height: 44px;
}

.pixelBattleReplay > div strong {
  font-size: 11px;
}

.pixelBattleReplay > input {
  width: 100%;
  accent-color: var(--color-accent);
}

.pixelBattleReplay > label {
  color: #ffffff73;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  display: flex;
}

.pixelBattleReplay select {
  background: var(--surface-subcard);
  color: #fff;
  border: 0;
  border-radius: 8px;
  outline: 0;
  padding: 8px;
}

.pixelBattleSeasonList {
  gap: 6px;
  display: grid;
}

.pixelBattleSeasonList article {
  background: #ffffff09;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px;
  display: flex;
}

.pixelBattleSeasonList article[data-active="true"] {
  background: var(--color-accent);
  color: #0b0b0b;
}

.pixelBattleSeasonList article div {
  flex-direction: column;
  display: flex;
}

.pixelBattleSeasonList strong {
  font-size: 12px;
}

.pixelBattleSeasonList span, .pixelBattleSeasonList small {
  color: currentColor;
  opacity: .58;
  font-size: 7px;
}

.pixelBattleActionBar {
  background: var(--surface-subcard);
  color: #fff;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 10px 4.25vw;
  display: flex;
}

.pixelBattleActionBar > div {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.pixelBattleActionBar > div span {
  color: #ffffff61;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 8px;
}

.pixelBattleActionBar > div strong {
  font-size: 12px;
  font-weight: 600;
}

.pixelBattleActionBar > button {
  color: #080808;
  cursor: pointer;
  background: #f3f0e9;
  border-radius: 14px;
  align-items: center;
  gap: 12px;
  width: min(330px, 48vw);
  min-height: 52px;
  padding: 0 8px 0 18px;
  font-size: 11px;
  font-weight: 750;
  display: flex;
}

.pixelBattleActionBar > button > i {
  width: 15px;
  height: 15px;
}

.pixelBattleActionBar > button > span {
  background: var(--surface-card);
  color: #fff;
  border-radius: 10px;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  display: grid;
}

.pixelBattleActionBar > button:disabled {
  background: var(--surface-subcard-hover);
  color: #fff6;
  cursor: not-allowed;
}

.pixelBattleReportHint {
  z-index: 6;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #0f0f0fe6;
  border-radius: 12px;
  align-items: center;
  gap: 14px;
  padding: 11px 12px 11px 15px;
  display: flex;
  position: absolute;
  top: 16px;
  left: 88px;
}

.pixelBattleReportHint strong {
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 9px;
}

.pixelBattleReportHint span {
  color: #ffffff8f;
  font-size: 9px;
}

.pixelBattleReportHint button {
  background: var(--surface-subcard-hover);
  cursor: pointer;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 8px;
}

.pixelBattleModal {
  z-index: 300;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #000000b8;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.pixelBattleModal :is(article, form) {
  background: var(--surface-card);
  width: min(480px, 100%);
  box-shadow: none;
  border: 1px solid #ffffff17;
  border-radius: 22px;
  gap: 18px;
  padding: 34px;
  display: grid;
  position: relative;
}

.pixelBattleModal :is(article, form) > button:first-child {
  background: var(--surface-subcard-hover);
  cursor: pointer;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  position: absolute;
  top: 14px;
  right: 14px;
}

.pixelBattleModal :is(article, form) > span {
  color: var(--color-accent);
  letter-spacing: .08em;
  font-size: 8px;
  font-weight: 750;
}

.pixelBattleModal h2 {
  letter-spacing: -.04em;
  max-width: 390px;
  margin: 0;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 430;
  line-height: .95;
}

.pixelBattleModal p {
  color: #ffffff8c;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.pixelBattleModal article > a, .pixelBattleModalSubmit {
  background: var(--color-accent);
  color: #0b0b0b;
  cursor: pointer;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 750;
  display: flex;
}

.pixelBattleModal label {
  color: #ffffff7a;
  letter-spacing: .06em;
  text-transform: uppercase;
  gap: 7px;
  font-size: 8px;
  display: grid;
}

.pixelBattleModal :is(select, textarea) {
  box-sizing: border-box;
  background: var(--surface-subcard-hover);
  color: #fff;
  width: 100%;
  font: inherit;
  text-transform: none;
  border: 0;
  border-radius: 11px;
  outline: 0;
  padding: 13px;
  font-size: 12px;
}

@media (max-width: 1050px) {
  .pixelBattleWorkspace {
    grid-template-rows: 76px minmax(0, 1fr) 72px;
  }

  .pixelBattleTopbarTitle > span {
    display: none;
  }

  .pixelBattleStage {
    grid-template-columns: minmax(0, 1fr) 310px;
  }

  .pixelBattleWorkspace[data-sidebar-collapsed="true"] .pixelBattleStage {
    grid-template-columns: minmax(0, 1fr);
  }

  .pixelBattleWorkspaceNav {
    width: auto;
  }

  .pixelBattleWorkspaceNav button {
    gap: 6px;
    min-width: 88px;
    min-height: 38px;
    padding-inline: 9px;
    font-size: 8px;
  }
}

@media (max-width: 760px) {
  .pixelBattlePage {
    overflow: auto;
  }

  .pixelBattleWorkspace {
    grid-template-rows: 118px minmax(0, 1fr) 84px;
    height: max(780px, 100svh);
    padding-top: 70px;
  }

  .pixelBattleTopbar {
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    gap: 8px 14px;
    padding: 8px 12px;
  }

  .pixelBattleTopbarTitle {
    flex: none;
  }

  .pixelBattleTopbar h1 {
    margin-top: 5px;
    font-size: 30px;
  }

  .pixelBattleTopbarSummary {
    flex: auto;
    gap: 8px;
    min-width: 0;
    padding-top: 0;
  }

  .pixelBattleSignals span:nth-child(2) {
    display: none;
  }

  .pixelBattleSignals > span {
    min-height: 30px;
    padding: 0 10px;
  }

  .pixelBattleTopbarSummary p {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 8px;
    overflow: hidden;
  }

  .pixelBattleStage {
    grid-template-rows: minmax(310px, 1fr) 196px;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 0 6px;
    display: grid;
  }

  .pixelBattleWorkspace[data-fullscreen="true"] {
    grid-template-rows: minmax(0, 1fr) 84px;
  }

  .pixelBattleWorkspace[data-fullscreen="true"] .pixelBattleStage, .pixelBattleWorkspace[data-sidebar-collapsed="true"] .pixelBattleStage {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: 1fr;
  }

  .pixelBattleWorkspace[data-fullscreen="true"] .pixelBattleStage:not(:has(.pixelBattleSidebar[hidden])) {
    grid-template-rows: minmax(310px, 1fr) 196px;
  }

  .pixelBattleWorkspace[data-fullscreen="true"][data-sidebar-collapsed="true"] .pixelBattleStage {
    grid-template-rows: minmax(0, 1fr);
  }

  .pixelBattleViewControls {
    top: 34px;
    right: 10px;
  }

  .pixelBattleViewControls button {
    min-height: 36px;
    padding: 0 5px;
  }

  .pixelBattleViewControls button i {
    width: 26px;
    height: 26px;
  }

  .pixelBattleViewControls button span {
    display: none;
  }

  .pixelBattleWorkspaceNav {
    scrollbar-width: none;
    order: 3;
    gap: 4px;
    width: 100%;
    margin: 0;
    display: flex;
    overflow-x: auto;
  }

  .pixelBattleWorkspaceNav::-webkit-scrollbar {
    display: none;
  }

  .pixelBattleWorkspaceNav button {
    border-radius: 11px;
    flex: 1 0 112px;
    justify-content: center;
    gap: 5px;
    min-width: 112px;
    min-height: 38px;
    padding: 0 7px;
    font-size: 8px;
  }

  .pixelBattleWorkspaceNav button b {
    font-size: 7px;
  }

  .pixelBattleViewport, .pixelBattleSidebar {
    border-radius: 18px;
  }

  .pixelBattleSidebar {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: 1fr;
  }

  .pixelBattlePanel {
    padding: 14px;
  }

  .pixelBattlePanel > header {
    justify-content: space-between;
    align-items: baseline;
    display: flex;
  }

  .pixelBattlePanel > header h2 {
    margin: 0 0 12px;
    font-size: 25px;
  }

  .pixelBattleRanking {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pixelBattleRanking article {
    grid-template-columns: 20px minmax(0, 1fr);
    padding: 8px;
  }

  .pixelBattleRanking article > span {
    display: none;
  }

  .pixelBattleStatGrid article {
    min-height: 74px;
  }

  .pixelBattleActivityTitle, .pixelBattleActivity {
    display: none;
  }

  .pixelBattleTools {
    box-sizing: border-box;
    scrollbar-width: none;
    border-radius: 13px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 7px;
    width: auto;
    height: 58px;
    max-height: none;
    padding: 7px;
    display: flex;
    inset: 46px 10px auto 34px;
    overflow: auto hidden;
  }

  .pixelBattleToolsHeader {
    display: none;
  }

  .pixelBattleTools::-webkit-scrollbar {
    display: none;
  }

  .pixelBattleColorPicker {
    border-radius: 16px;
    gap: 8px;
    width: auto;
    max-height: calc(100% - 110px);
    padding: 12px;
    top: 100px;
    left: 34px;
    right: 10px;
  }

  .pixelBattleSaturationField {
    height: 112px;
  }

  .pixelBattleColorControl {
    flex: 0 0 132px;
    grid-template-columns: 42px 83px;
    gap: 7px;
  }

  .pixelBattleColorPreview {
    border-radius: 9px;
    width: 42px;
    height: 42px;
  }

  .pixelBattleColorPreview > span, .pixelBattleHexField > span {
    display: none;
  }

  .pixelBattleHexField {
    border-radius: 9px;
    padding: 0 9px;
    display: flex;
  }

  .pixelBattleHexField input {
    font-size: 9px;
  }

  .pixelBattlePalette, .pixelBattleCustomPalette {
    flex: none;
    display: block;
  }

  .pixelBattleCustomPalette {
    order: 1;
    gap: 5px;
    display: flex;
  }

  .pixelBattlePalette {
    order: 2;
  }

  .pixelBattlePalette header, .pixelBattleCustomPalette header > span, .pixelBattleCustomPalette[data-empty="true"] > div {
    display: none;
  }

  .pixelBattleSwatches, .pixelBattleCustomPalette > div {
    gap: 5px;
    height: 42px;
    display: flex;
  }

  .pixelBattleSwatches button, .pixelBattleCustomPalette > div > span {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-top: 7px;
  }

  .pixelBattleCustomPalette header {
    height: 42px;
  }

  .pixelBattleCustomPalette header button {
    background: var(--surface-subcard);
    border-radius: 9px;
    width: 42px;
    height: 42px;
    font-size: 0;
    overflow: hidden;
  }

  .pixelBattleCustomPalette header button:after {
    content: "+";
    color: var(--color-accent);
    font-size: 17px;
  }

  .pixelBattleToolPrimary {
    flex: none;
    order: 3;
    display: flex;
  }

  .pixelBattleToolPrimary button {
    justify-content: center;
    width: 42px;
    min-height: 42px;
    padding: 0;
  }

  .pixelBattleToolPrimary button span, .pixelBattleZoomControl > span {
    display: none;
  }

  .pixelBattleZoomControl {
    flex: none;
    order: 4;
    display: block;
  }

  .pixelBattleZoomControl > div {
    grid-template-columns: repeat(3, 42px);
  }

  .pixelBattleZoomControl :is(button, output) {
    min-height: 42px;
  }

  .pixelBattleZoomControl output {
    display: none;
  }

  .pixelBattleCanvasMeta {
    bottom: 10px;
    left: 34px;
    right: 10px;
  }

  .pixelBattleCanvasMeta > span:first-child, .pixelBattleAuthor time {
    display: none;
  }

  .pixelBattleAuthor {
    margin-left: auto;
  }

  .pixelBattleReportHint {
    top: 62px;
    left: 10px;
    right: 10px;
  }

  .pixelBattleReportHint span {
    flex: 1;
  }

  .pixelBattleActionBar {
    padding: 8px 12px;
  }

  .pixelBattleActionBar > div strong {
    font-size: 10px;
  }

  .pixelBattleActionBar > button {
    width: min(230px, 62vw);
    min-height: 50px;
    font-size: 9px;
  }
}

.adminReferralModule {
  gap: 10px;
  display: grid;
}

.adminReferralAlert {
  color: #101010;
  background: #a7ff36;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 10px;
  font-weight: 720;
}

.adminReferralAlert[data-error="true"] {
  background: var(--color-accent);
  color: #fff;
}

.adminReferralGrid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr);
  gap: 10px;
  display: grid;
}

.adminReferralSummary {
  background: radial-gradient(circle at 82% 13%,
      #a7ff3647,
      transparent 40%),
    var(--surface-subcard);
  color: #fff;
  border-radius: 28px;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 440px;
  padding: clamp(30px, 5vw, 62px);
  display: flex;
}

.adminReferralSummary > span {
  color: #a7ff36;
  letter-spacing: .1em;
  font-size: 9px;
  font-weight: 800;
}

.adminReferralSummary > strong {
  color: #a7ff36;
  letter-spacing: -.08em;
  margin-top: auto;
  font-size: clamp(80px, 10vw, 150px);
  font-weight: 700;
  line-height: .7;
}

.adminReferralSummary h3 {
  letter-spacing: -.04em;
  margin: 32px 0 5px;
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 450;
}

.adminReferralSummary p, .adminReferralSummary small {
  color: #ffffff7a;
  margin: 0;
  font-size: 9px;
}

.adminReferralToggle {
  color: #111;
  cursor: pointer;
  background: #f2f0eb;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 15px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.adminReferralToggle input {
  accent-color: #111;
  width: 18px;
  height: 18px;
}

.adminReferralList, .adminGameServers {
  background: var(--surface-subcard);
  color: #fff;
  border-radius: 28px;
  overflow: hidden;
}

.adminReferralList > header, .adminGameServers > header {
  border-bottom: 1px solid #ffffff14;
  justify-content: space-between;
  align-items: flex-end;
  padding: 34px;
  display: flex;
}

.adminReferralList > header p, .adminGameServers > header p {
  color: #a7ff36;
  margin: 0 0 8px;
  font-size: 9px;
  font-weight: 750;
}

.adminReferralList > header h2, .adminGameServers > header h2 {
  letter-spacing: -.05em;
  margin: 0;
  font-size: clamp(34px, 5vw, 70px);
  font-weight: 430;
}

.adminReferralList > header > strong {
  font-size: 58px;
  font-weight: 440;
}

.adminReferralList .adminSearch {
  background: var(--surface-subcard);
  margin: 10px;
}

.adminReferralList .adminSearch .adminField {
  background: var(--surface-subcard);
  min-width: 160px;
  margin: 0;
}

.adminReferralRecord {
  border-top: 1px solid #ffffff12;
  grid-template-columns: minmax(220px, .75fr) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 22px 30px;
  display: grid;
}

.adminReferralRecord > div:first-child {
  align-items: center;
  gap: 10px;
  display: flex;
}

.adminReferralRecord > div:first-child span {
  color: #ffffff85;
}

.adminReferralRecord > div:first-child i {
  color: #a7ff36;
  font-style: normal;
}

.adminReferralRecord > p {
  color: #ffffff80;
  margin: 0;
  font-size: 9px;
}

.adminReferralRecord footer {
  color: #ffffff6b;
  grid-column: 1 / -1;
  align-items: center;
  gap: 12px;
  font-size: 8px;
  display: flex;
}

.adminReferralRecord footer > span {
  color: #fff;
  background: #ffffff14;
  border-radius: 7px;
  padding: 6px 8px;
}

.adminReferralRecord footer > span[data-status="rewarded"] {
  color: #111;
  background: #a7ff36;
}

.adminReferralRecord footer > span[data-status="rejected"] {
  background: var(--color-accent);
}

.adminReferralRecord footer button {
  color: var(--color-accent);
  cursor: pointer;
  background: none;
  border: 0;
  margin-left: auto;
  font-size: 9px;
}

.adminReferralProgress {
  background: #ffffff1a;
  border-radius: 99px;
  height: 7px;
  position: relative;
}

.adminReferralProgress > span {
  border-radius: inherit;
  background: #a7ff36;
  position: absolute;
  inset: 0 auto 0 0;
}

.adminReferralProgress > i {
  color: #ffffff6b;
  font-size: 8px;
  font-style: normal;
  position: absolute;
  bottom: 12px;
  right: 0;
}

.adminServerCreate {
  grid-template-columns: .6fr 1fr auto auto;
  align-items: end;
  gap: 8px;
  padding: 12px;
  display: grid;
}

.adminServerCreate .adminField, .adminServerCreate .adminReferralToggle {
  margin: 0;
}

.adminServerCreate .adminReferralToggle {
  min-height: 71px;
}

.adminServerCards {
  gap: 10px;
  padding: 10px;
  display: grid;
}

.adminServerCards > article {
  background: var(--surface-subcard);
  border: 1px solid #ffffff14;
  border-radius: 18px;
  overflow: hidden;
}

.adminServerHead {
  grid-template-columns: minmax(180px, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 18px;
  display: grid;
}

.adminServerHead > div {
  gap: 4px;
  display: grid;
}

.adminServerHead > div span {
  color: #a7ff36;
  font-size: 8px;
  font-weight: 800;
}

.adminServerHead > div input {
  color: #fff;
  width: 100%;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  font-size: 22px;
}

.adminServerHead dl {
  gap: 20px;
  margin: 0;
  display: flex;
}

.adminServerHead dl div {
  gap: 3px;
  display: grid;
}

.adminServerHead dt {
  color: #fff6;
  text-transform: uppercase;
  font-size: 7px;
}

.adminServerHead dd {
  margin: 0;
  font-size: 10px;
}

.adminServerStatus {
  background: var(--surface-subcard);
  border-top: 1px solid #ffffff12;
}

.adminServerStatus > header {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 18px;
  display: flex;
}

.adminServerStatus > header > div:first-child {
  gap: 4px;
  display: grid;
}

.adminServerStatus > header > div:first-child span {
  color: #a7ff36;
  letter-spacing: .08em;
  font-size: 8px;
  font-weight: 800;
}

.adminServerStatus > header > div:first-child strong {
  font-size: 16px;
}

.adminServerStatusResult {
  grid-template-columns: auto auto;
  place-items: center end;
  column-gap: 8px;
  display: grid;
}

.adminServerStatusResult i {
  background: #747474;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.adminServerStatusResult[data-online="true"] i {
  background: #64e572;
}

.adminServerStatusResult strong {
  font-size: 10px;
}

.adminServerStatusResult small {
  color: #fff6;
  grid-column: 1 / -1;
  font-size: 7px;
}

.adminServerStatusFields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 18px 14px;
  display: grid;
}

.adminServerStatusFields .adminField, .adminServerStatusFields .adminReferralToggle {
  margin: 0;
}

.adminServerStatusError {
  background: rgb(var(--color-accent-rgb) / .12);
  color: #ff9079;
  border-radius: 8px;
  margin: 0 18px 14px;
  padding: 10px 12px;
  font-size: 8px;
}

.adminServerStatus > footer {
  color: #ffffff6b;
  border-top: 1px solid #ffffff0f;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  font-size: 8px;
  display: flex;
}

.adminServerStatus > footer label {
  color: #ff9079;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.adminServerStatus > footer span {
  flex: 1;
}

.adminServerSecret {
  color: #111;
  background: #a7ff36;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 15px 18px;
  display: grid;
}

.adminServerSecret span {
  letter-spacing: .1em;
  grid-column: 1 / -1;
  font-size: 8px;
  font-weight: 850;
}

.adminServerSecret code {
  background: #0000001a;
  border-radius: 8px;
  padding: 9px;
  font-size: 10px;
  overflow: auto;
}

.adminServerSecret button {
  background: var(--surface-subcard);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  min-height: 38px;
  padding: 0 12px;
  font-size: 8px;
}

.adminCredentialCreate {
  border-top: 1px solid #ffffff12;
  gap: 8px;
  padding: 10px 18px;
  display: flex;
}

.adminCredentialCreate input {
  background: var(--surface-subcard-hover);
  color: #fff;
  border: 0;
  border-radius: 9px;
  outline: 0;
  flex: 1;
  min-width: 0;
  padding: 0 13px;
}

.adminCredentialList {
  padding: 0 18px 16px;
}

.adminCredentialList > div {
  border-top: 1px solid #ffffff0f;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  display: flex;
}

.adminCredentialList > div[data-revoked="true"] {
  opacity: .42;
}

.adminCredentialList span {
  flex: 1;
  gap: 3px;
  display: grid;
}

.adminCredentialList small {
  color: #fff6;
  font-size: 8px;
}

.adminCredentialList i {
  color: #a7ff36;
  font-size: 8px;
  font-style: normal;
}

.adminCredentialList button {
  color: var(--color-accent);
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 8px;
}

@media (max-width: 980px) {
  .adminReferralGrid {
    grid-template-columns: 1fr;
  }

  .adminReferralSummary {
    min-height: 310px;
  }

  .adminServerCreate, .adminServerHead, .adminServerStatusFields {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .adminReferralSummary, .adminReferralList, .adminGameServers {
    border-radius: 20px;
  }

  .adminReferralRecord {
    grid-template-columns: 1fr;
  }

  .adminReferralRecord footer {
    grid-column: auto;
  }

  .adminServerCreate, .adminServerHead, .adminServerStatusFields {
    grid-template-columns: 1fr;
  }

  .adminServerStatus > header, .adminServerStatus > footer {
    flex-direction: column;
    align-items: stretch;
  }

  .adminServerHead dl {
    flex-wrap: wrap;
  }

  .adminServerSecret {
    grid-template-columns: 1fr;
  }

  .adminServerSecret span {
    grid-column: auto;
  }

  .adminCredentialCreate {
    flex-direction: column;
    align-items: stretch;
  }

  .adminCredentialCreate input {
    min-height: 45px;
  }
}

.adminStoreLifecycle {
  align-items: center;
  gap: 8px;
  display: flex;
}

.adminStoreLifecycle > b {
  color: #9ef234;
  text-transform: uppercase;
  background: #9ef23414;
  padding: 5px 7px;
  font-size: 9px;
}

.adminStoreLifecycle > b[data-state="scheduled"] {
  color: #ffb347;
  background: #ffb34714;
}

.adminStoreLifecycle > b[data-state="expired"], .adminStoreLifecycle > b[data-state="archived"] {
  color: #ff6b57;
  background: #ff6b5714;
}

.adminStoreMerchFields input:disabled, .adminStoreDiscoveryEditor input:disabled, .adminStoreDiscoveryEditor textarea:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.adminStoreCategoryLayout {
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 10px;
  display: grid;
}

.adminStoreCategoryLayout > aside {
  border-top: 1px solid #242529;
  flex-direction: column;
  max-height: 670px;
  display: flex;
  overflow: auto;
}

.adminStoreCategoryLayout > aside button {
  color: #aaa8a5;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid #242529;
  gap: 4px;
  padding: 12px;
  display: grid;
}

.adminStoreCategoryLayout > aside button:hover, .adminStoreCategoryLayout > aside button[data-active="true"] {
  color: #fff;
  background: var(--surface-subcard);
  box-shadow: inset 2px 0 var(--color-accent);
}

.adminStoreCategoryLayout > aside span, .adminStoreCategoryLayout > aside small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.adminStoreCategoryLayout > aside span {
  font-size: 11px;
}

.adminStoreCategoryLayout > aside small {
  color: #686866;
  text-transform: uppercase;
  font-size: 9px;
}

.adminStoreCategoryEditor {
  background: var(--surface-subcard);
  border: 1px solid #1b1c1f;
  align-content: start;
  gap: 14px;
  padding: 18px;
  display: grid;
}

.adminStoreCategoryEditor > header {
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  display: flex;
}

.adminStoreCategoryEditor > header div {
  gap: 4px;
  display: grid;
}

.adminStoreCategoryEditor > header span {
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 9px;
}

.adminStoreCategoryEditor > header h4 {
  color: #f4f2ef;
  margin: 0;
  font-size: 22px;
}

.adminStoreCategoryEditor > header small {
  color: #777775;
}

.adminStoreCategoryEditor > header b {
  color: #9ef234;
  text-transform: uppercase;
  background: #9ef23414;
  padding: 5px 7px;
  font-size: 9px;
}

.adminStoreCategoryEditor > header b[data-state="hidden"] {
  color: #ffb347;
  background: #ffb34714;
}

.adminStoreCategoryImpact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.adminStoreCategoryImpact article {
  background: var(--surface-subcard);
  gap: 4px;
  padding: 11px;
  display: grid;
}

.adminStoreCategoryImpact span {
  color: #686866;
  text-transform: uppercase;
  font-size: 8px;
}

.adminStoreCategoryImpact strong {
  color: #f4f2ef;
  font-size: 18px;
}

.adminStoreCategoryFields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.adminStoreCategoryFields label {
  background: var(--surface-subcard);
  gap: 7px;
  padding: 10px;
  display: grid;
}

.adminStoreCategoryFields label > span {
  color: #777775;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9px;
}

.adminStoreCategoryFields input {
  box-sizing: border-box;
  color: #f4f2ef;
  width: 100%;
  min-width: 0;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.adminStoreCategoryEditor > p {
  color: #ffb347;
  margin: 0;
  font-size: 11px;
}

.adminStoreCategoryEditor > footer {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 42px;
  display: flex;
}

.adminStoreCategoryEditor > footer > span {
  color: #858583;
  font-size: 10px;
}

.adminStoreCategoryEditor > footer > div {
  gap: 6px;
  display: flex;
}

.adminStoreCategoryEditor .adminButton.secondary {
  color: #c7c5c2;
  background: none;
  border-color: #36373a;
}

.adminStoreCategoryEditor button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

@media (max-width: 540px) {
  .adminStoreMerchEditor > header {
    flex-direction: column;
    align-items: stretch;
  }

  .adminStoreLifecycle {
    justify-content: space-between;
  }
}

@media (max-width: 900px) {
  .adminStoreCategoryLayout {
    grid-template-columns: 1fr;
  }

  .adminStoreCategoryLayout > aside {
    max-height: 190px;
  }
}

@media (max-width: 540px) {
  .adminStoreCategoryEditor > header, .adminStoreCategoryEditor > footer, .adminStoreCategoryEditor > footer > div {
    flex-direction: column;
    align-items: stretch;
  }

  .adminStoreCategoryFields {
    grid-template-columns: 1fr;
  }

  .adminStoreCategoryImpact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.adminStoreSLO {
  background: var(--surface-card);
  border: 1px solid #1b1c1f;
  border-top: 2px solid #6f6f6d;
  padding: 22px;
  overflow: hidden;
}

.adminStoreSLO[data-status="healthy"] {
  border-top-color: #9ef234;
}

.adminStoreSLO[data-status="degraded"] {
  border-top-color: #ffb347;
}

.adminStoreSLO[data-status="critical"] {
  border-top-color: #ff6b57;
}

.adminStoreSLO > header > div > span {
  color: #858583;
  max-width: 720px;
  font-size: 12px;
  display: block;
}

.adminStoreSLO > header > strong {
  color: #a6a5a2;
  letter-spacing: .14em;
  font-size: 11px;
}

.adminStoreSLO[data-status="healthy"] > header > strong {
  color: #9ef234;
}

.adminStoreSLO[data-status="degraded"] > header > strong {
  color: #ffb347;
}

.adminStoreSLO[data-status="critical"] > header > strong {
  color: #ff6b57;
}

.adminStoreSLOOverview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.adminStoreSLOOverview article {
  background: var(--surface-subcard);
  border: 1px solid #1d1e21;
  gap: 7px;
  padding: 16px;
  display: grid;
}

.adminStoreSLOOverview span, .adminStoreSLOOverview small {
  color: #71716f;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
}

.adminStoreSLOOverview strong {
  color: #f4f2ef;
  font-size: 24px;
}

.adminStoreSLOAlerts {
  gap: 7px;
  margin-top: 10px;
  display: grid;
}

.adminStoreSLOAlerts article {
  background: var(--surface-subcard);
  border-left: 2px solid #ffb347;
  grid-template-columns: 78px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  display: grid;
}

.adminStoreSLOAlerts article[data-severity="critical"] {
  border-left-color: #ff6b57;
}

.adminStoreSLOAlerts article > span {
  color: #ffb347;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 9px;
}

.adminStoreSLOAlerts article[data-severity="critical"] > span {
  color: #ff6b57;
}

.adminStoreSLOAlerts strong {
  color: #f4f2ef;
  font-size: 12px;
}

.adminStoreSLOAlerts p {
  color: #8f8e8b;
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.adminStoreSLOAlerts small {
  color: #6e6e6c;
  font-variant-numeric: tabular-nums;
}

.adminStoreSLOEmpty {
  color: #777775;
  background: var(--surface-subcard);
  margin: 10px 0 0;
  padding: 13px;
  font-size: 11px;
}

.adminStoreSLODetails, .adminStoreSLOPolicy {
  background: var(--surface-subcard);
  border: 1px solid #1e1f22;
  margin-top: 10px;
}

.adminStoreSLODetails summary, .adminStoreSLOPolicy summary {
  color: #8d8d8b;
  cursor: pointer;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 13px 15px;
  font-size: 10px;
}

.adminStoreSLODetails > div {
  overflow-x: auto;
}

.adminStoreSLODetails [role="row"] {
  border-top: 1px solid #1f2023;
  grid-template-columns: minmax(150px, 1.5fr) repeat(6, minmax(74px, .7fr));
  min-width: 700px;
  display: grid;
}

.adminStoreSLODetails [role="row"] span {
  color: #a09e9b;
  padding: 9px 11px;
  font-size: 10px;
}

.adminStoreSLODetails [role="row"].head span {
  color: #626260;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
}

.adminStoreSLOPolicy > div {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
  display: grid;
}

.adminStoreSLOPolicy label {
  gap: 6px;
  display: grid;
}

.adminStoreSLOPolicy label span {
  color: #777775;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 9px;
}

.adminStoreSLOPolicy input {
  color: #f4f2ef;
  background: var(--surface-subcard);
  border: 1px solid #292a2d;
  width: 100%;
  padding: 10px;
}

.adminStoreSLOPolicy input:disabled {
  color: #777775;
  background: var(--surface-subcard);
  cursor: not-allowed;
  opacity: .65;
}

.adminStoreSLOPolicy footer {
  border-top: 1px solid #1f2023;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}

.adminStoreSLOPolicy footer span {
  color: #6f6f6d;
  font-size: 10px;
}

@media (max-width: 900px) {
  .adminStoreSLOOverview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminStoreSLOPolicy > div {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}

@media (max-width: 540px) {
  .adminStoreSLO {
    padding: 16px;
  }

  .adminStoreSLOOverview, .adminStoreSLOPolicy > div, .adminStoreSLOAlerts article {
    grid-template-columns: 1fr;
  }

  .adminStoreSLOPolicy footer {
    flex-direction: column;
    align-items: stretch;
  }
}

.adminStoreDiscoveryEditor {
  border-top: 1px solid #242529;
  gap: 10px;
  padding-top: 14px;
  display: grid;
}

.adminStoreDiscoveryEditor > header, .adminStoreRelatedProducts > header {
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  display: flex;
}

.adminStoreDiscoveryEditor > header > div {
  gap: 4px;
  display: grid;
}

.adminStoreDiscoveryEditor > header strong, .adminStoreRelatedProducts > header strong {
  color: #f4f2ef;
  font-size: 13px;
}

.adminStoreDiscoveryEditor > header span, .adminStoreDiscoveryEditor > header b {
  color: #777775;
  font-size: 9px;
  font-weight: 400;
}

.adminStoreDiscoveryAliases {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.adminStoreDiscoveryAliases label {
  background: var(--surface-subcard);
  gap: 7px;
  padding: 10px;
  display: grid;
}

.adminStoreDiscoveryAliases label > span {
  color: #777775;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
}

.adminStoreDiscoveryAliases textarea, .adminStoreRelatedProducts input[type="search"] {
  box-sizing: border-box;
  color: #f4f2ef;
  width: 100%;
  min-width: 0;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  font-size: 11px;
}

.adminStoreDiscoveryAliases textarea {
  resize: vertical;
  min-height: 86px;
}

.adminStoreRelatedProducts {
  gap: 8px;
  display: grid;
}

.adminStoreRelatedProducts > header input {
  background: var(--surface-subcard);
  border: 1px solid #28292c;
  max-width: 240px;
  padding: 9px 11px;
}

.adminStoreRelatedProducts > div {
  gap: 3px;
  display: grid;
}

.adminStoreRelatedProducts article {
  background: var(--surface-subcard);
  grid-template-columns: 28px minmax(0, 1fr) repeat(3, 28px);
  align-items: center;
  gap: 6px;
  padding: 7px;
  display: grid;
}

.adminStoreRelatedProducts article > span {
  color: var(--color-accent);
  font-size: 9px;
}

.adminStoreRelatedProducts article > strong {
  color: #f4f2ef;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.adminStoreRelatedProducts article button {
  color: #9c9b99;
  background: var(--surface-subcard);
  cursor: pointer;
  border: 1px solid #292a2d;
  height: 28px;
}

.adminStoreRelatedProducts > p {
  color: #686866;
  background: var(--surface-subcard);
  margin: 0;
  padding: 11px;
  font-size: 9px;
  line-height: 1.5;
}

.adminStoreRelatedProducts > aside {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  max-height: 220px;
  display: grid;
  overflow: auto;
}

.adminStoreRelatedProducts > aside label {
  background: var(--surface-subcard);
  cursor: pointer;
  border: 1px solid #202124;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px;
  display: grid;
}

.adminStoreRelatedProducts > aside label[data-selected="true"] {
  border-color: rgb(var(--color-accent-rgb) / .5);
  background: rgb(var(--color-accent-rgb) / .05);
}

.adminStoreRelatedProducts > aside label > span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.adminStoreRelatedProducts > aside strong, .adminStoreRelatedProducts > aside small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.adminStoreRelatedProducts > aside strong {
  color: #f4f2ef;
  font-size: 10px;
}

.adminStoreRelatedProducts > aside small {
  color: #686866;
  font-size: 8px;
}

.adminStorePricePreview {
  background: rgb(var(--color-accent-rgb) / .08);
  align-content: center;
  gap: 4px;
  padding: 10px;
  display: grid;
}

.adminStorePricePreview > span {
  color: var(--color-accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
}

.adminStorePricePreview > strong {
  color: #fff;
  font-size: 18px;
}

.adminStorePricePreview > small {
  color: #858583;
  font-size: 9px;
}

.adminStoreMerchEditor > footer > div {
  gap: 6px;
  display: flex;
}

@media (max-width: 680px) {
  .adminStoreDiscoveryAliases, .adminStoreRelatedProducts > aside {
    grid-template-columns: 1fr;
  }

  .adminStoreDiscoveryEditor > header, .adminStoreRelatedProducts > header, .adminStoreMerchEditor > footer > div {
    flex-direction: column;
    align-items: stretch;
  }

  .adminStoreRelatedProducts > header input {
    max-width: none;
  }
}

.downloadsPage {
  background: #050505;
}

.downloadsHero {
  background: radial-gradient(circle at 82% 5%, rgb(var(--color-accent-rgb) / .18), transparent 34%),
    linear-gradient(160deg, #111 0%, #050505 62%);
  min-height: 100vh;
  padding: clamp(150px, 14vw, 220px) 4.3vw clamp(90px, 9vw, 150px);
}

.downloadsHeroCopy {
  gap: 20px;
  max-width: 980px;
  margin-bottom: clamp(55px, 7vw, 95px);
  display: grid;
}

.downloadsHeroCopy p {
  color: var(--color-accent);
  letter-spacing: .08em;
  margin: 0;
  font-size: 9px;
  font-weight: 750;
}

.downloadsHeroCopy h1 {
  color: #f7f5f2;
  letter-spacing: -.045em;
  margin: 0;
  font-size: clamp(52px, 7vw, 112px);
  font-weight: 360;
  line-height: .88;
}

.downloadsHeroCopy span {
  color: #f7f5f294;
  max-width: 680px;
  font-size: 13px;
  line-height: 1.6;
}

.downloadsHero > .downloadOptions {
  max-width: 1180px;
}

.downloadOptions {
  color: #f7f5f2;
  width: 100%;
}

.downloadOptionsHead {
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 18px;
  display: flex;
}

.downloadOptionsHead p {
  color: var(--color-accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
  font-size: 9px;
  font-weight: 700;
}

.downloadOptionsHead h3 {
  letter-spacing: -.02em;
  text-align: right;
  max-width: 610px;
  margin: 0;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 390;
  line-height: .95;
}

.downloadOptionGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.downloadOptions[data-single="true"] .downloadOptionGrid {
  grid-template-columns: minmax(0, 1fr);
}

.downloadOptionCard {
  border-radius: 26px;
  flex-direction: column;
  min-height: 590px;
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  overflow: hidden;
}

.downloadOptionOfficial {
  color: #0b0b0b;
  background: #f0eee9;
}

.downloadOptionManual {
  color: #f7f5f2;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: linear-gradient(145deg, #171717f5, #060606f5);
  border: 1px solid #ffffff1f;
}

.downloadOptionTopline {
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 8px;
  font-weight: 750;
  display: flex;
}

.downloadOptionTopline i {
  background: var(--color-accent);
  width: 9px;
  height: 9px;
  box-shadow: 0 0 18px rgb(var(--color-accent-rgb) / .58);
  border-radius: 50%;
  flex: none;
}

.downloadOptionCard[data-status="error"] .downloadOptionTopline i {
  box-shadow: none;
  background: #817d78;
}

.downloadOptionCard h4 {
  letter-spacing: -.025em;
  max-width: 590px;
  margin: 38px 0 0;
  font-size: clamp(41px, 4.2vw, 68px);
  font-weight: 390;
  line-height: .88;
}

.downloadOptionCard > p {
  color: #ffffff94;
  max-width: 560px;
  margin: 24px 0 0;
  font-size: 12px;
  line-height: 1.55;
}

.downloadOptionOfficial > p {
  color: #0b0b0b94;
}

.downloadOptionPromise {
  color: var(--color-accent);
  letter-spacing: .055em;
  text-transform: uppercase;
  margin-top: 22px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  display: block;
}

.downloadOptionPrimary, .downloadOptionUnavailable {
  background: var(--color-accent);
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 15px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 60px;
  margin-top: auto;
  padding: 0 20px;
  font-size: 9px;
  font-weight: 750;
  transition: background .18s, transform .18s;
  display: flex;
}

button.downloadOptionPrimary {
  cursor: pointer;
  border: 0;
  width: 100%;
  font-family: inherit;
}

.downloadOptionPrimary:hover, .downloadOptionPrimary:focus-visible {
  background: var(--color-accent);
  transform: translateY(-2px);
}

.downloadOptionPrimary b, .downloadOptionUnavailable b {
  font-size: 19px;
  font-weight: 400;
}

.downloadOptionStatus {
  margin: auto 0 18px !important;
  font-size: 10px !important;
}

.downloadPlatformLinks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
  display: grid;
}

.downloadPlatformLinks a {
  color: #111;
  background: #0000000e;
  border-radius: 14px;
  gap: 6px;
  min-height: 76px;
  padding: 15px;
  transition: background .18s;
  display: grid;
  position: relative;
}

.downloadPlatformLinks a:hover, .downloadPlatformLinks a:focus-visible, .downloadPlatformLinks a[data-preferred="true"] {
  background: #fff;
}

.downloadPlatformLinks span {
  font-size: 14px;
  font-weight: 600;
}

.downloadPlatformLinks small {
  color: #0000007a;
  font-size: 8px;
}

.downloadPlatformLinks em {
  color: var(--color-accent);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 6px;
  font-style: normal;
  font-weight: 750;
  position: absolute;
  top: 13px;
  right: 13px;
}

.modpackFacts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 34px;
  display: grid;
}

.modpackFacts > span {
  background: #fff1;
  border-radius: 13px;
  align-content: center;
  gap: 8px;
  min-height: 76px;
  padding: 13px;
  display: grid;
}

.modpackFacts small, .modpackPublished span, .modpackChecksum > span {
  color: #fff6;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 7px;
  font-weight: 700;
}

.modpackFacts strong {
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 560;
  overflow: hidden;
}

.modpackPublished {
  color: #ffffffb3;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  font-size: 9px;
  display: flex;
}

.modpackChecksum {
  color: #fff;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin: 13px 0 18px;
  padding: 13px 14px;
  display: grid;
}

.modpackChecksum code {
  color: #ffffffb3;
  text-overflow: ellipsis;
  font-size: 9px;
  overflow: hidden;
}

.modpackChecksum b {
  color: var(--color-accent);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 7px;
}

.downloadOptionUnavailable {
  color: #ffffff75;
  background: #ffffff12;
}

.playSteps > .playDownloadStep {
  grid-template-columns: 78px minmax(280px, .55fr) minmax(620px, 1.45fr);
  align-items: start;
  padding-top: 36px;
  padding-bottom: 36px;
}

.playDownloadStep > .downloadOptions {
  grid-column: 2 / -1;
  margin-top: 12px;
}

.astraLaunchSection {
  min-height: 0;
  padding: clamp(120px, 10vw, 180px) 4.3vw;
}

.astraLaunchCopy {
  max-width: none;
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
}

.astraLaunchCopy > .downloadOptions {
  width: min(1180px, 100% - 6vw);
  margin: 48px 0 0 6vw;
}

.astraLaunchCopy .downloadOptionsHead h3 {
  color: #f7f5f2;
}

@media (max-width: 1120px) {
  .playSteps > .playDownloadStep {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .playDownloadStep > .downloadOptions {
    grid-column: 2;
  }

  .downloadOptionGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .downloadOptionCard {
    min-height: 560px;
  }
}

@media (max-width: 760px) {
  .downloadsHero {
    padding: 125px 18px 80px;
  }

  .downloadsHeroCopy {
    margin-bottom: 48px;
  }

  .downloadsHeroCopy h1 {
    font-size: clamp(46px, 14vw, 70px);
  }

  .playSteps > .playDownloadStep {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    padding: 25px 18px;
  }

  .playDownloadStep > .downloadOptions {
    grid-column: 1 / -1;
  }

  .downloadOptionsHead {
    align-items: start;
    gap: 13px;
    display: grid;
  }

  .downloadOptionsHead h3 {
    text-align: left;
    font-size: 34px;
  }

  .downloadOptionCard {
    border-radius: 20px;
    min-height: 0;
    padding: 25px 20px;
  }

  .downloadOptionCard h4 {
    margin-top: 30px;
    font-size: 43px;
  }

  .downloadOptionPromise {
    margin-bottom: 34px;
  }

  .downloadPlatformLinks, .modpackFacts {
    grid-template-columns: minmax(0, 1fr);
  }

  .modpackPublished {
    flex-direction: column;
    align-items: flex-start;
  }

  .modpackChecksum {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .modpackChecksum > span {
    grid-column: 1 / -1;
  }

  .astraLaunchSection {
    min-height: 0;
    padding: 100px 20px;
  }

  .astraLaunchCopy {
    bottom: auto;
    left: auto;
    right: auto;
  }

  .astraLaunchCopy > .downloadOptions, .astraLaunchCopy > p:not(.sectionEyebrow) {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 460px) {
  .pixelBattleWorkspace {
    grid-template-rows: 110px minmax(0, 1fr) 78px;
  }

  .pixelBattleWorkspaceNav button {
    min-height: 40px;
    padding-inline: 4px;
  }

  .pixelBattleWorkspaceNav button b {
    display: none;
  }

  .pixelBattleStage {
    grid-template-rows: minmax(300px, 1fr) 182px;
  }

  .pixelBattleTopbar h1 {
    font-size: 26px;
  }

  .pixelBattleSignals > span {
    font-size: 8px;
  }

  .pixelBattleToolButtons button:nth-child(3), .pixelBattleToolButtons button:nth-child(4), .pixelBattleActionBar > div span {
    display: none;
  }

  .pixelBattleActionBar > button {
    width: 66vw;
  }

  .pixelBattleModal :is(article, form) {
    border-radius: 20px;
    padding: 28px 22px 22px;
  }
}

.pageShell {
  --page-frame-inset: 8px;
}

.pageShell > section:first-of-type {
  margin-top: 0;
}

.pageShell > :is(.heroFrame, .robloxPortalHero, .robloxExperienceHero, .minecraftHero, .playHero, .accountHero, .legalHero, .gameHero, .serverDetailHero, .innerHero, .rulesHero, .franchiseHero, .aboutHero, .faqHero, .knowledgeHero, .serversHero, .publicProfileHero, .articleDetailHero, .newsPostHero) {
  height: calc(100svh - var(--page-frame-inset));
}

.pageShell > .minecraftHero {
  min-height: max(820px, calc(100svh - var(--page-frame-inset)));
}

@media (max-width: 920px) {
  .pageShell {
    --page-frame-inset: 6px;
  }
}

.robloxPortalPage, .robloxExperiencePage {
  --roblox-blue: #2c68ff;
  --roblox-violet: #6337ff;
  background: var(--surface-card);
  color: #f5f3ef;
}

.robloxPortalHero, .robloxExperienceHero {
  background: var(--surface-card);
  position: relative;
  overflow: hidden;
}

.robloxPortalHero {
  border-radius: 46px;
  height: calc(100svh - 16px);
  min-height: 680px;
}

.robloxExperienceHero {
  border-radius: 0 0 36px 36px;
  min-height: min(880px, 96vh);
}

.robloxPortalHeroMedia, .robloxExperienceHeroMedia {
  position: absolute;
  inset: 0;
}

.robloxPortalHeroMedia img, .robloxExperienceHeroMedia img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transform: scale(1.02);
}

.robloxPortalHeroMedia img {
  object-position: center 48%;
  filter: saturate(.92) contrast(1.05);
}

.robloxPortalHeroMedia span, .robloxExperienceHeroMedia span {
  background: linear-gradient(90deg, #030305fa 0%, #030305c2 38%, #03030526 72%), linear-gradient(0deg, #030305fa 0%, #0000 56%), radial-gradient(circle at 78% 62%, #2c68ff33, #0000 34%);
  position: absolute;
  inset: 0;
}

.robloxPortalHeroMedia span {
  background: linear-gradient(90deg, #030305f7 0%, #030305b3 40%, #0303051f 76%), linear-gradient(0deg, #030305f0 0%, #0000 52%), linear-gradient(#03030561 0%, #0000 26%);
}

.robloxPortalHero .siteHeader, .robloxExperienceHero .siteHeader {
  z-index: 5;
  position: relative;
}

.robloxPortalHeroCopy, .robloxExperienceHeroCopy {
  z-index: 2;
  width: min(850px, 65vw);
  position: absolute;
  bottom: clamp(76px, 10vh, 120px);
  left: clamp(28px, 6vw, 116px);
}

.robloxPortalHeroCopy {
  width: min(1040px, 67vw);
  bottom: clamp(66px, 7.5vh, 104px);
  left: 4.3vw;
}

.robloxExperienceHeroCopy .innerBreadcrumb {
  margin-bottom: clamp(36px, 6vh, 72px);
}

.robloxPortalHeroBreadcrumb {
  z-index: 3;
  position: absolute;
  top: clamp(112px, 13vh, 152px);
  left: 4.3vw;
}

.robloxPortalHeroBreadcrumb .innerBreadcrumb {
  margin: 0;
}

.robloxPortalHeroCopy > p, .robloxExperienceHeroCopy > p, .robloxCatalogHeader p, .robloxPortalStatement > p, .robloxExperienceIntro header > p, .robloxFacts header > p, .robloxGallery header > p, .robloxBadges header > p, .robloxExperienceClosing > div > p {
  color: #7c9eff;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin: 0;
  font-size: 11px;
  font-weight: 800;
}

.robloxPortalHeroCopy h1, .robloxExperienceHeroCopy h1 {
  letter-spacing: -.045em;
  text-wrap: balance;
  max-width: 900px;
  margin: 14px 0 24px;
  font-size: clamp(58px, 8.3vw, 150px);
  font-weight: 400;
  line-height: .86;
}

.robloxPortalHeroCopy h1 {
  letter-spacing: -.035em;
  max-width: 1040px;
  margin: 20px 0 24px;
  font-size: clamp(66px, 7.1vw, 128px);
  line-height: .84;
}

.robloxPortalHeroCopy h1 > span {
  display: block;
}

.robloxPortalHeroCopy > span, .robloxExperienceHeroCopy > span {
  color: #ffffffb8;
  max-width: 650px;
  font-size: clamp(16px, 1.35vw, 22px);
  line-height: 1.5;
  display: block;
}

.robloxPortalHeroCopy > span {
  max-width: 610px;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.58;
}

.robloxPortalHeroCopy > a, .robloxPlayButton {
  color: #090909;
  background: #f5f3ef;
  border-radius: 999px;
  align-items: center;
  gap: 54px;
  margin-top: 34px;
  padding: 18px 20px 18px 24px;
  font-size: 13px;
  font-weight: 750;
  display: inline-flex;
}

.robloxPortalHeroCopy > a i, .robloxPlayButton i {
  font-size: 18px;
  font-style: normal;
}

.robloxPortalHeroStats {
  z-index: 2;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  background: #08080abd;
  border-radius: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(470px, 30vw);
  display: grid;
  position: absolute;
  bottom: clamp(70px, 8vh, 108px);
  right: clamp(28px, 5vw, 96px);
  overflow: hidden;
}

.robloxPortalHeroStats > div {
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 112px;
  padding: 20px;
  display: flex;
}

.robloxPortalHeroStats strong {
  letter-spacing: -.04em;
  font-size: 28px;
  font-weight: 500;
}

.robloxPortalHeroStats span {
  color: #ffffff8a;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 9px;
  line-height: 1.35;
}

.robloxPortalStatement {
  color: #0a0a0a;
  background: #f0eee9;
  grid-template-columns: .55fr 2fr .9fr;
  align-items: start;
  gap: clamp(28px, 5vw, 96px);
  padding: clamp(90px, 12vw, 190px) clamp(28px, 5vw, 96px);
  display: grid;
}

.robloxPortalStatement > div h2 {
  letter-spacing: -.04em;
  max-width: 900px;
  margin: 0 0 28px;
  font-size: clamp(42px, 6vw, 106px);
  font-weight: 400;
  line-height: .94;
}

.robloxPortalStatement > div span {
  color: #5a5955;
  max-width: 680px;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.55;
  display: block;
}

.robloxPortalFeatured {
  isolation: isolate;
  color: #fff;
  background: #17111f;
  border-radius: 26px;
  min-height: 260px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.robloxPortalFeaturedMedia {
  z-index: -2;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.robloxPortalFeaturedMedia img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}

.robloxPortalFeaturedMedia i {
  background: linear-gradient(0deg, #050508f5, #0505081a 76%), linear-gradient(110deg, #285ff585, #0000 62%);
  position: absolute;
  inset: 0;
}

.robloxPortalFeatured:hover .robloxPortalFeaturedMedia img, .robloxPortalFeatured:focus-visible .robloxPortalFeaturedMedia img {
  transform: scale(1.045);
}

.robloxPortalFeaturedCopy {
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  padding: 28px;
  display: flex;
}

.robloxPortalFeaturedCopy small {
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 750;
}

.robloxPortalFeaturedCopy > strong {
  letter-spacing: -.04em;
  text-wrap: balance;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 500;
  line-height: .95;
}

.robloxPortalFeaturedCopy > span {
  color: #ffffffd1;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 750;
  display: flex;
}

.robloxPortalStatement > a i, .robloxCatalogCard footer i, .robloxExperienceClosing i {
  font-style: normal;
}

.robloxCatalog {
  background: radial-gradient(circle at 90% 4%, #4935ff33, transparent 28%),
    var(--surface-card);
  padding: clamp(82px, 10vw, 160px) clamp(20px, 4vw, 78px) clamp(110px, 13vw, 210px);
}

.robloxCatalogHeader {
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: clamp(46px, 7vw, 92px);
  display: flex;
}

.robloxCatalogHeader h2, .robloxExperienceIntro h2, .robloxFacts header h2, .robloxGallery header h2, .robloxBadges header h2, .robloxExperienceClosing h2 {
  letter-spacing: -.045em;
  margin: 10px 0 0;
  font-size: clamp(46px, 7vw, 118px);
  font-weight: 400;
  line-height: .9;
}

.robloxCatalogHeader > span {
  color: #ffffff47;
  letter-spacing: -.06em;
  font-size: clamp(58px, 9vw, 144px);
  font-weight: 300;
  line-height: .7;
}

.robloxCatalogTools {
  grid-template-columns: minmax(250px, 1fr) auto minmax(150px, .34fr) minmax(190px, .42fr);
  gap: 12px;
  margin-bottom: 34px;
  display: grid;
}

.robloxCatalogSearch, .robloxCatalogSort {
  background: var(--surface-subcard);
  border-radius: 16px;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 20px;
  display: flex;
}

.robloxCatalogSearch input, .robloxCatalogSort select {
  color: #f5f3ef;
  width: 100%;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
}

.robloxCatalogSort {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
}

.robloxCatalogSort > span {
  color: #79797e;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 750;
}

.robloxCatalogFilters {
  background: var(--surface-subcard);
  border-radius: 16px;
  gap: 5px;
  padding: 5px;
  display: flex;
}

.robloxCatalogFilters button {
  color: #85858b;
  cursor: pointer;
  font: inherit;
  background: none;
  border: 0;
  border-radius: 12px;
  padding: 0 20px;
  font-size: 11px;
  font-weight: 750;
}

.robloxCatalogFilters button[data-active="true"] {
  color: #090909;
  background: #f5f3ef;
}

.robloxCatalogGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
  display: grid;
}

.robloxCatalogGrid > .robloxCatalogCard:only-child {
  grid-column: 1 / -1;
  min-height: clamp(620px, 58vw, 780px);
}

.robloxCatalogGrid > .robloxCatalogCard:only-child .robloxCatalogCardCopy {
  max-width: 780px;
}

.robloxCatalogGrid > .robloxCatalogCard:only-child .robloxCatalogCardCopy h3 {
  font-size: clamp(56px, 7vw, 112px);
}

.robloxCatalogGrid > .robloxCatalogCard:only-child .robloxCatalogCardCopy > span {
  max-width: 670px;
  font-size: clamp(14px, 1.25vw, 20px);
}

.robloxCatalogCard {
  background: var(--surface-subcard);
  border-radius: 28px;
  min-height: 650px;
  position: relative;
  overflow: hidden;
}

.robloxCatalogCardMedia {
  position: absolute;
  inset: 0;
}

.robloxCatalogCardMedia img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.2, .75, .2, 1);
}

.robloxCatalogCard:hover .robloxCatalogCardMedia img {
  transform: scale(1.035);
}

.robloxCatalogCardMedia span {
  background: linear-gradient(0deg, #040406fa 0%, #0404069e 38%, #04040614 72%);
  position: absolute;
  inset: 0;
}

.robloxCatalogCardTop, .robloxCatalogCardCopy, .robloxCatalogCard footer {
  z-index: 1;
  position: absolute;
  left: 30px;
  right: 30px;
}

.robloxCatalogCardTop {
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: space-between;
  font-size: 10px;
  display: flex;
  top: 28px;
}

.robloxCatalogCardTop strong {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #08080aad;
  border-radius: 999px;
  padding: 9px 12px;
}

.robloxCatalogCardCopy {
  bottom: 92px;
}

.robloxCatalogCardCopy > p {
  color: #8fabff;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-size: 10px;
  font-weight: 750;
}

.robloxCatalogCardCopy h3 {
  letter-spacing: -.045em;
  margin: 0 0 16px;
  font-size: clamp(38px, 4.2vw, 72px);
  font-weight: 450;
  line-height: .92;
}

.robloxCatalogCardCopy > span {
  color: #ffffff9e;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.45;
  display: block;
}

.robloxCatalogCard footer {
  justify-content: space-between;
  align-items: center;
  display: flex;
  bottom: 28px;
}

.robloxCatalogCard footer small {
  color: #ffffff80;
}

.robloxCatalogCard footer a {
  text-transform: uppercase;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  font-weight: 750;
  display: flex;
}

.robloxCatalogEmpty {
  text-align: center;
  place-content: center;
  min-height: 360px;
  display: grid;
}

.robloxCatalogEmpty strong {
  color: #26262a;
  font-size: 110px;
  font-weight: 300;
}

.robloxExperienceHeroCopy > div:not(.innerBreadcrumb) {
  align-items: center;
  gap: 24px;
  display: flex;
}

.robloxExperienceHeroCopy > div:not(.innerBreadcrumb) > img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 24px;
  width: clamp(72px, 7vw, 112px);
}

.robloxExperienceHeroCopy h1 {
  margin: 0;
  font-size: clamp(60px, 8.5vw, 144px);
}

.robloxExperienceHeroMeta {
  z-index: 2;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: #070709b3;
  border-radius: 20px;
  flex-direction: column;
  gap: 9px;
  min-width: 270px;
  padding: 25px;
  display: flex;
  position: absolute;
  bottom: clamp(70px, 9vh, 110px);
  right: clamp(28px, 5vw, 92px);
}

.robloxExperienceHeroMeta span, .robloxExperienceHeroMeta small {
  color: #ffffff80;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 10px;
}

.robloxExperienceHeroMeta strong {
  font-size: 26px;
  font-weight: 500;
}

.robloxExperienceIntro {
  color: #0b0b0b;
  background: #f0eee9;
  border-radius: 36px;
  grid-template-columns: minmax(300px, .8fr) minmax(0, 1.35fr);
  gap: clamp(50px, 10vw, 180px);
  padding: clamp(100px, 13vw, 210px) clamp(28px, 7vw, 132px);
  display: grid;
}

.robloxExperienceIntro h2 {
  font-size: clamp(52px, 7vw, 112px);
  position: sticky;
  top: 80px;
}

.robloxExperienceBody .markdownContent {
  counter-reset: roblox-description-section;
  color: #31302d;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.65;
}

.robloxExperienceIntro .robloxExperienceBody .markdownContent h2 {
  counter-increment: roblox-description-section;
  color: #0b0b0b;
  letter-spacing: -.035em;
  text-wrap: balance;
  margin: 0 0 24px;
  font-size: clamp(32px, 4vw, 62px);
  font-weight: 430;
  line-height: 1;
  position: static;
}

.robloxExperienceIntro .robloxExperienceBody .markdownContent h2:before {
  color: #315fff;
  content: "0" counter(roblox-description-section);
  letter-spacing: .12em;
  margin-bottom: 18px;
  font-size: 10px;
  font-weight: 800;
  display: block;
}

.robloxExperienceIntro .robloxExperienceBody .markdownContent h2 a {
  color: inherit;
}

.robloxExperienceBody .markdownContent p {
  margin: 0 0 clamp(56px, 7vw, 96px);
}

.robloxFacts, .robloxGallery, .robloxBadges, .robloxExperienceClosing {
  padding: clamp(90px, 11vw, 180px) clamp(28px, 5vw, 96px);
}

.robloxFacts header, .robloxGallery header, .robloxBadges header {
  grid-template-columns: .6fr 1.8fr .7fr;
  align-items: end;
  gap: 32px;
  margin-bottom: clamp(50px, 7vw, 100px);
  display: grid;
}

.robloxFacts header h2, .robloxGallery header h2, .robloxBadges header h2 {
  font-size: clamp(48px, 6vw, 98px);
}

.robloxFacts header > span {
  color: #ffffff6b;
  text-align: right;
  font-size: 11px;
}

.robloxFacts > div {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  display: grid;
}

.robloxFacts article {
  background: var(--surface-subcard);
  border-radius: 22px;
  min-height: 230px;
  padding: 25px;
}

.robloxFacts article span {
  color: #65656b;
  font-size: 10px;
}

.robloxFacts article strong {
  letter-spacing: -.045em;
  margin-top: 65px;
  font-size: clamp(38px, 4vw, 70px);
  font-weight: 400;
  display: block;
}

.robloxFacts article p {
  color: #85858b;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 6px 0 0;
  font-size: 11px;
}

.robloxGallery {
  color: #0b0b0b;
  background: #f0eee9;
  border-radius: 36px;
}

.robloxGallery > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.robloxGallery figure {
  background: var(--surface-subcard);
  border-radius: 24px;
  min-height: 420px;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.robloxGallery figure.robloxGalleryFeatured {
  grid-column: 1 / -1;
  min-height: min(70vw, 760px);
}

.robloxGallery figure img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.robloxGallery figcaption {
  color: #fff;
  background: linear-gradient(#0000, #000c);
  align-items: center;
  gap: 20px;
  padding: 50px 22px 20px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.robloxGallery figcaption p {
  margin: 0;
  font-size: 12px;
}

.robloxBadges > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.robloxBadges article {
  background: linear-gradient(145deg,
    var(--surface-subcard),
    var(--surface-card));
  border-radius: 24px;
  align-content: end;
  min-height: 390px;
  padding: 26px;
  display: grid;
}

.robloxBadges article img {
  object-fit: cover;
  border-radius: 26px;
  width: 118px;
  height: 118px;
  margin-bottom: auto;
}

.robloxBadges article > span, .robloxBadges article small {
  color: #707076;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
}

.robloxBadges article h3 {
  letter-spacing: -.035em;
  margin: 12px 0 7px;
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 500;
}

.robloxBadges article p {
  color: #88888e;
  margin: 0 0 20px;
  line-height: 1.45;
}

.robloxExperienceClosing {
  background: linear-gradient(135deg, #285ff5, #5022d4 62%, #110c18);
  border-radius: 36px 36px 0 0;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: clamp(50px, 8vw, 150px);
  display: grid;
}

.robloxExperienceClosing > div:last-child > p {
  color: #ffffffb8;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.55;
}

.robloxExperienceClosing > div:last-child > div {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
  display: flex;
}

.robloxExperienceClosing a {
  color: #080808;
  text-transform: uppercase;
  background: #f5f3ef;
  border-radius: 999px;
  justify-content: space-between;
  align-items: center;
  min-width: 220px;
  padding: 18px 20px;
  font-size: 11px;
  font-weight: 750;
  display: flex;
}

.robloxExperienceClosing a + a {
  color: #fff;
  background: #ffffff1f;
}

@media (max-width: 1050px) {
  .robloxPortalHeroCopy, .robloxExperienceHeroCopy {
    width: calc(100% - 56px);
  }

  .robloxPortalHeroStats, .robloxExperienceHeroMeta {
    display: none;
  }

  .robloxPortalStatement {
    grid-template-columns: 1fr 2fr;
  }

  .robloxPortalFeatured {
    grid-column: 2;
    min-height: 220px;
  }

  .robloxCatalogTools {
    grid-template-columns: 1fr 1fr;
  }

  .robloxCatalogSearch {
    grid-column: 1 / -1;
  }

  .robloxExperienceIntro {
    grid-template-columns: 1fr;
  }

  .robloxExperienceIntro h2 {
    position: static;
  }
}

@media (max-width: 820px) {
  .robloxCatalogTools, .robloxCatalogGrid {
    grid-template-columns: 1fr;
  }

  .robloxCatalogSearch {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .robloxPortalHero {
    border-radius: 28px;
    height: max(780px, 100svh - 12px);
    min-height: 780px;
  }

  .robloxExperienceHero {
    border-radius: 0 0 24px 24px;
    min-height: 760px;
  }

  .robloxPortalHeroMedia img, .robloxExperienceHeroMedia img {
    object-position: 62% center;
  }

  .robloxPortalHeroMedia span, .robloxExperienceHeroMedia span {
    background: linear-gradient(0deg, #030305fa 0%, #030305b8 54%, #03030540 100%);
  }

  .robloxPortalHeroCopy {
    width: calc(100% - 40px);
    bottom: 42px;
    left: 20px;
  }

  .robloxExperienceHeroCopy {
    width: calc(100% - 40px);
    bottom: 50px;
    left: 20px;
  }

  .robloxPortalHeroBreadcrumb {
    top: 102px;
    left: 20px;
  }

  .robloxExperienceHeroCopy .innerBreadcrumb {
    margin-bottom: 32px;
  }

  .robloxPortalHeroCopy h1 {
    margin-top: 18px;
    font-size: clamp(48px, 13.3vw, 76px);
    line-height: .88;
  }

  .robloxPortalHeroCopy > span {
    max-width: 470px;
    font-size: 12px;
    line-height: 1.5;
  }

  .robloxPortalHeroCopy > a {
    margin-top: 26px;
  }

  .robloxExperienceHeroCopy h1 {
    font-size: clamp(48px, 15vw, 76px);
  }

  .robloxExperienceHeroCopy > div:not(.innerBreadcrumb) {
    align-items: flex-end;
    gap: 14px;
  }

  .robloxExperienceHeroCopy > div:not(.innerBreadcrumb) > img {
    border-radius: 16px;
    width: 64px;
  }

  .robloxPortalStatement {
    grid-template-columns: 1fr;
    padding: 84px 20px;
  }

  .robloxPortalFeatured {
    grid-column: auto;
    min-height: 230px;
  }

  .robloxCatalog {
    padding: 82px 12px 120px;
  }

  .robloxCatalogHeader {
    padding: 0 8px;
  }

  .robloxCatalogHeader > span {
    display: none;
  }

  .robloxCatalogTools {
    grid-template-columns: 1fr;
  }

  .robloxCatalogSearch {
    grid-column: auto;
  }

  .robloxCatalogFilters {
    min-height: 58px;
    overflow-x: auto;
  }

  .robloxCatalogFilters button {
    min-width: max-content;
  }

  .robloxCatalogGrid {
    grid-template-columns: 1fr;
  }

  .robloxCatalogCard {
    border-radius: 22px;
    min-height: 570px;
  }

  .robloxCatalogGrid > .robloxCatalogCard:only-child {
    min-height: 590px;
  }

  .robloxCatalogGrid > .robloxCatalogCard:only-child .robloxCatalogCardCopy h3 {
    font-size: clamp(44px, 13vw, 68px);
  }

  .robloxCatalogCardTop, .robloxCatalogCardCopy, .robloxCatalogCard footer {
    left: 20px;
    right: 20px;
  }

  .robloxCatalogCardCopy > span {
    font-size: 13px;
  }

  .robloxExperienceIntro, .robloxFacts, .robloxGallery, .robloxBadges, .robloxExperienceClosing {
    padding: 84px 20px;
  }

  .robloxFacts header, .robloxGallery header, .robloxBadges header {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .robloxFacts header > span {
    text-align: left;
  }

  .robloxFacts > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .robloxFacts article {
    min-height: 170px;
    padding: 18px;
  }

  .robloxFacts article strong {
    overflow-wrap: anywhere;
    margin-top: 36px;
  }

  .robloxGallery {
    border-radius: 24px;
  }

  .robloxGallery > div {
    grid-template-columns: 1fr;
  }

  .robloxGallery figure, .robloxGallery figure.robloxGalleryFeatured {
    border-radius: 18px;
    grid-column: auto;
    min-height: 260px;
  }

  .robloxBadges > div {
    grid-template-columns: 1fr;
  }

  .robloxBadges article {
    min-height: 320px;
  }

  .robloxExperienceClosing {
    border-radius: 24px 24px 0 0;
    grid-template-columns: 1fr;
  }
}

.teamPage {
  background: var(--surface-card);
  color: #f7f5f2;
  overflow: hidden;
}

.teamIntro {
  background: var(--surface-card);
  border-bottom: 0;
  border-radius: 46px 46px 0 0;
  min-height: 520px;
  position: relative;
  overflow: hidden;
}

.teamIntro .siteHeader {
  z-index: 10;
}

.teamIntroCopy {
  z-index: 2;
  align-content: end;
  width: 48%;
  min-height: 520px;
  padding: 142px 0 64px 4.3vw;
  display: grid;
  position: relative;
}

.teamIntroCopy .innerBreadcrumb {
  margin-bottom: 34px;
}

.teamIntroCopy h1 {
  letter-spacing: -.035em;
  text-wrap: balance;
  max-width: 980px;
  margin: 0;
  font-size: clamp(68px, 8vw, 132px);
  font-weight: 330;
  line-height: .86;
}

.teamIntroCopy > p {
  color: #ffffff94;
  max-width: 540px;
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.teamIntroVisual {
  background: none;
  border: 0;
  border-radius: 0;
  width: 68%;
  position: absolute;
  top: 68px;
  bottom: -4px;
  right: -5vw;
  overflow: hidden;
}

.teamIntroVisual img {
  object-fit: cover;
  object-position: right center;
}

.teamIntroVisual > span {
  display: none;
}

.teamHierarchy {
  background: var(--surface-card);
  padding: 110px 4.3vw 170px;
}

.teamHierarchy > header {
  border-bottom: 1px solid #ffffff29;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  align-items: end;
  gap: 7vw;
  padding-bottom: 68px;
  display: grid;
}

.teamHierarchy > header > div > p, .teamClosing > div:first-child > p {
  color: var(--color-accent);
  letter-spacing: .09em;
  text-transform: uppercase;
  margin: 0 0 25px;
  font-size: 9px;
  font-weight: 700;
}

.teamHierarchy > header h2 {
  letter-spacing: -.035em;
  text-wrap: balance;
  max-width: 880px;
  margin: 0;
  font-size: clamp(42px, 5vw, 74px);
  font-weight: 330;
  line-height: .94;
}

.teamClosing h2 {
  letter-spacing: -.035em;
  text-wrap: balance;
  max-width: 880px;
  margin: 0;
  font-size: clamp(60px, 6.8vw, 110px);
  font-weight: 330;
  line-height: .88;
}

.teamHierarchyFacts {
  border-top: 1px solid #ffffff2e;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  display: grid;
}

.teamHierarchyFacts > div {
  padding: 16px 16px 0 0;
}

.teamHierarchyFacts > div + div {
  border-left: 1px solid #ffffff24;
  padding-left: 16px;
}

.teamHierarchyFacts dt {
  font-size: 34px;
  font-weight: 350;
  line-height: 1;
}

.teamHierarchyFacts dd {
  color: #ffffff6b;
  letter-spacing: .06em;
  text-transform: uppercase;
  max-width: 130px;
  margin: 9px 0 0;
  font-size: 8px;
  line-height: 1.35;
}

.teamUnavailable {
  border: 1px solid rgb(var(--color-accent-rgb) / .32);
  background: rgb(var(--color-accent-rgb) / .08);
  color: #ffffffb8;
  border-radius: 16px;
  align-items: center;
  gap: 16px;
  margin: 34px 0 0;
  padding: 17px 20px;
  display: flex;
}

.teamUnavailable i {
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  flex: 0 0 28px;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  font-size: 12px;
  font-style: normal;
  display: inline-flex;
}

.teamUnavailable p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.teamTree {
  max-width: 1500px;
  margin: 88px auto 0;
  padding: 0;
  list-style: none;
}

.teamTier {
  min-height: 224px;
  animation: teamTierReveal .6s calc(var(--team-tier) * 55ms) both
    cubic-bezier(.22, 1, .36, 1);
  grid-template-columns: 76px minmax(190px, 270px) minmax(0, 1fr);
  padding: 0 0 44px;
  display: grid;
}

.teamTierMarker {
  grid-column: 1;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.teamTierMarker > span {
  z-index: 2;
  background: color-mix(in srgb,
    var(--team-role-accent) 15%,
    var(--surface-card));
  width: 44px;
  height: 44px;
  color: var(--team-role-accent);
  letter-spacing: .05em;
  border: 0;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 8px;
  display: inline-flex;
  position: relative;
}

.teamTier:first-child .teamTierMarker > span {
  border-color: var(--team-role-accent);
  background: var(--team-role-accent);
  color: #080808;
  box-shadow: 0 0 32px
    color-mix(in srgb, var(--team-role-accent) 28%, transparent);
}

.teamTierMarker > i {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--team-role-accent) 72%, transparent),
    #ffffff29);
  width: 1px;
  position: absolute;
  top: 44px;
  bottom: -44px;
  left: 50%;
}

.teamTier:last-child .teamTierMarker > i {
  display: none;
}

.teamTierHeading {
  flex-direction: column;
  grid-column: 2;
  gap: 12px;
  padding: 8px 30px 0 18px;
  display: flex;
}

.teamTierHeading > span {
  letter-spacing: -.025em;
  font-size: clamp(24px, 2.25vw, 38px);
  font-weight: 400;
  line-height: .96;
}

.teamTierHeading > small {
  color: color-mix(in srgb,
    var(--team-role-accent) 65%,
    #ffffff5c);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 7px;
  line-height: 1.5;
}

.teamTierMembers {
  grid-column: 3;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  align-content: start;
  gap: 12px;
  padding-left: 40px;
  display: grid;
  position: relative;
}

.teamTierMembers:before {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--team-role-accent) 64%, transparent),
    #fff3);
  content: "";
  width: 40px;
  height: 1px;
  position: absolute;
  top: 21px;
  left: 0;
}

.teamMemberCard {
  color: #fff;
  background: linear-gradient(135deg, #ffffff13, #ffffff06);
  border: 1px solid #ffffff26;
  border-radius: 22px;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
  min-height: 164px;
  padding: 21px;
  transition: border-color .18s, background-color .18s, transform .18s;
  display: grid;
}

.teamMemberCardLinked:hover, .teamMemberCardLinked:focus-visible {
  border-color: color-mix(in srgb, var(--team-role-accent) 72%, transparent);
  background-color: color-mix(in srgb, var(--team-role-accent) 8%, transparent);
  transform: translateY(-3px);
}

.teamMemberAvatar {
  background-color: var(--surface-subcard);
  color: #fff;
  background-position: center;
  background-size: cover;
  border: 1px solid #fff3;
  border-radius: 18px;
  justify-content: center;
  align-items: center;
  width: 66px;
  height: 66px;
  font-size: 23px;
  font-weight: 520;
  display: inline-flex;
  overflow: hidden;
}

.teamMemberCopy {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.teamMemberCopy small {
  color: var(--team-role-accent);
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 14px;
  font-size: 7px;
  overflow: hidden;
}

.teamMemberCopy strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 520;
  line-height: 1.05;
  overflow: hidden;
}

.teamMemberCopy > span {
  color: #ffffff7a;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 8px;
  font-size: 9px;
  overflow: hidden;
}

.teamMemberAction {
  color: #ffffff61;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 100%;
  display: flex;
}

.teamMemberAction small {
  letter-spacing: .06em;
  text-align: right;
  text-transform: uppercase;
  max-width: 72px;
  font-size: 6px;
  line-height: 1.35;
}

.teamMemberAction i {
  color: var(--color-accent);
  font-size: 19px;
  font-style: normal;
}

.teamVacancyCard {
  background: #ffffff05;
  border-style: dashed;
}

.teamVacancyCard .teamMemberAvatar {
  background: none;
  position: relative;
}

.teamVacancyCard .teamMemberAvatar i, .teamVacancyCard .teamMemberAvatar:after {
  content: "";
  border: 1px solid #ffffff47;
  border-radius: 50%;
  position: absolute;
}

.teamVacancyCard .teamMemberAvatar i {
  width: 18px;
  height: 18px;
  top: 13px;
}

.teamVacancyCard .teamMemberAvatar:after {
  border-radius: 20px 20px 9px 9px;
  width: 34px;
  height: 20px;
  bottom: 10px;
}

.teamUnavailableCard {
  opacity: .58;
}

.teamClosing {
  background: radial-gradient(circle at 12% 100%,
      rgb(var(--color-accent-rgb) / .24),
      transparent 36%),
    var(--surface-card);
  border-top: 1px solid #ffffff21;
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
  align-items: end;
  gap: 9vw;
  min-height: 660px;
  padding: 140px 4.3vw 84px;
  display: grid;
}

.teamClosing > div:last-child {
  padding-bottom: 10px;
}

.teamClosing > div:last-child > p {
  color: #ffffff94;
  max-width: 520px;
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}

.teamClosing > div:last-child > div {
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 34px;
  display: flex;
}

.teamClosing a {
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 1px solid #ffffff38;
  border-radius: 999px;
  justify-content: space-between;
  align-items: center;
  gap: 42px;
  min-height: 56px;
  padding: 0 22px;
  font-size: 10px;
  font-weight: 650;
  display: inline-flex;
}

.teamClosing a:first-child {
  color: #080808;
  background: #fff;
}

.teamClosing a span {
  color: var(--color-accent);
  font-size: 17px;
}

@keyframes teamTierReveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1120px) {
  .teamTier {
    grid-template-columns: 66px minmax(170px, 220px) minmax(0, 1fr);
  }

  .teamMemberCard {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 18px;
  }

  .teamMemberAvatar {
    width: 58px;
    height: 58px;
  }
}

@media (max-width: 920px) {
  .mobileMenuNav {
    overscroll-behavior: contain;
    scrollbar-width: none;
    min-height: 0;
    max-height: calc(100svh - 210px);
    padding-right: 5px;
    overflow-y: auto;
  }

  .mobileMenuNav::-webkit-scrollbar {
    display: none;
  }

  .mobileMenuFooter {
    flex: none;
  }

  .teamIntro {
    border-radius: 34px 34px 0 0;
    min-height: 710px;
  }

  .teamIntroCopy {
    width: auto;
    min-height: 0;
    padding: 124px 28px 34px;
  }

  .teamIntroCopy .innerBreadcrumb {
    margin-bottom: 28px;
  }

  .teamIntroCopy h1 {
    max-width: 720px;
    font-size: clamp(62px, 12vw, 100px);
  }

  .teamIntroCopy > p {
    max-width: 590px;
    margin-top: 22px;
  }

  .teamIntroVisual {
    width: auto;
    height: 350px;
    inset: auto -8% -4px;
  }

  .teamHierarchy {
    padding: 90px 28px 125px;
  }

  .teamHierarchy > header {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .teamHierarchyFacts {
    max-width: 420px;
  }

  .teamTree {
    margin-top: 70px;
  }

  .teamTier {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 0;
    padding-bottom: 54px;
  }

  .teamTierMarker {
    grid-row: 1 / span 2;
  }

  .teamTierMarker > span {
    width: 38px;
    height: 38px;
  }

  .teamTierMarker > i {
    top: 38px;
    bottom: -54px;
  }

  .teamTierHeading {
    grid-column: 2;
    padding: 3px 0 24px 16px;
  }

  .teamTierMembers {
    grid-column: 2;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    padding: 0 0 0 16px;
  }

  .teamTierMembers:before {
    width: 32px;
    top: 20px;
    left: -16px;
  }

  .teamClosing {
    grid-template-columns: 1fr;
    gap: 70px;
    min-height: 620px;
    padding: 110px 28px 58px;
  }
}

@media (max-width: 560px) {
  .teamIntro {
    border-radius: 28px 28px 0 0;
    min-height: 630px;
  }

  .teamIntroCopy {
    min-height: 0;
    padding: 108px 20px 26px;
  }

  .teamIntroCopy .innerBreadcrumb {
    margin-bottom: 22px;
  }

  .teamIntroCopy h1 {
    font-size: clamp(52px, 15vw, 74px);
  }

  .teamIntroCopy > p {
    font-size: 11px;
    line-height: 1.45;
  }

  .teamIntroVisual {
    height: 280px;
    bottom: -4px;
    left: -10%;
    right: -10%;
  }

  .teamHierarchy {
    padding: 76px 20px 105px;
  }

  .teamHierarchy > header {
    padding-bottom: 48px;
  }

  .teamHierarchy > header h2 {
    font-size: clamp(38px, 10vw, 54px);
  }

  .teamClosing h2 {
    font-size: clamp(48px, 13vw, 68px);
  }

  .teamHierarchyFacts {
    margin-top: 28px;
  }

  .teamHierarchyFacts dt {
    font-size: 30px;
  }

  .teamUnavailable {
    align-items: flex-start;
    padding: 15px;
  }

  .teamTree {
    margin-top: 54px;
  }

  .teamTier {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .teamTierMarker > span {
    width: 32px;
    height: 32px;
    font-size: 7px;
  }

  .teamTierMarker > i {
    top: 32px;
  }

  .teamTierHeading {
    gap: 8px;
    padding: 1px 0 20px 10px;
  }

  .teamTierHeading > span {
    font-size: 25px;
  }

  .teamTierMembers {
    padding-left: 10px;
  }

  .teamTierMembers:before {
    width: 20px;
    left: -10px;
  }

  .teamMemberCard {
    border-radius: 18px;
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 154px;
    padding: 17px;
  }

  .teamMemberAvatar {
    border-radius: 15px;
    width: 52px;
    height: 52px;
    font-size: 19px;
  }

  .teamMemberCopy strong {
    font-size: 18px;
  }

  .teamMemberAction {
    border-top: 1px solid #ffffff17;
    flex-direction: row;
    grid-column: 1 / -1;
    align-items: center;
    height: auto;
    padding-top: 13px;
  }

  .teamMemberAction small {
    text-align: left;
    max-width: none;
  }

  .teamClosing {
    min-height: 640px;
    padding: 90px 20px 44px;
  }

  .teamClosing a {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .teamTier {
    animation: none;
  }

  .teamMemberCardLinked {
    transition: none;
  }
}

.minecraftPage {
  background: var(--surface-card);
  color: #f7f4ee;
  overflow: hidden;
}

.minecraftHero {
  isolation: isolate;
  min-height: max(820px, 100svh);
  position: relative;
  overflow: hidden;
}

.minecraftHero .siteHeader {
  z-index: 20;
}

.minecraftHeroMedia, .minecraftHeroShade {
  position: absolute;
  inset: 0;
}

.minecraftHeroMedia {
  z-index: -2;
  background: var(--surface-subcard);
}

.minecraftHeroImage {
  object-fit: cover;
  object-position: center 55%;
  transform: scale(1.005);
}

.minecraftHeroShade {
  z-index: 1;
  background: linear-gradient(90deg, #050505f2 0%, #0505059e 42%, #05050514 76%), linear-gradient(#05050585 0%, #0000 31%, #050505db 100%);
}

.minecraftHeroBreadcrumb {
  z-index: 3;
  position: absolute;
  top: clamp(118px, 12vw, 160px);
  left: 4.3vw;
}

.minecraftHeroBreadcrumb .innerBreadcrumb {
  margin: 0;
}

.minecraftHeroCopy {
  z-index: 3;
  max-width: min(1120px, 78vw);
  position: absolute;
  bottom: clamp(82px, 9vw, 142px);
  left: 4.3vw;
}

.minecraftHeroCopy > p:first-child, .minecraftSectionHeading > p, .minecraftWorlds > header > p, .minecraftApproachCopy > p, .minecraftStart > header > p {
  color: var(--color-accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
  font-size: 9px;
  font-weight: 700;
}

.minecraftHeroCopy > p:first-child {
  color: #ffffffc7;
  align-items: center;
  gap: 10px;
  display: flex;
}

.minecraftHeroCopy > p:first-child > span {
  background: #aaff26;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 18px #aaff26b3;
}

.minecraftHeroCopy h1 {
  letter-spacing: 0;
  text-wrap: balance;
  max-width: 1050px;
  margin: 28px 0 0;
  font-size: clamp(70px, 8.6vw, 154px);
  font-weight: 330;
  line-height: .84;
}

.minecraftHeroCopy > p:nth-of-type(2) {
  color: #ffffffb3;
  max-width: 620px;
  margin: 32px 0 0;
  font-size: 14px;
  line-height: 1.62;
}

.minecraftHeroCopy > div {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
  display: flex;
}

.minecraftHeroCopy > div a, .minecraftWorldCard footer a, .minecraftStartActions a {
  color: #090909;
  letter-spacing: .02em;
  background: #fff;
  border-radius: 999px;
  justify-content: space-between;
  align-items: center;
  gap: 44px;
  min-height: 58px;
  padding: 0 22px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.minecraftHeroCopy > div a + a {
  color: #fff;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #090909b8;
}

.minecraftHeroCopy > div b, .minecraftWorldCard footer span, .minecraftStartActions b {
  color: var(--color-accent);
  font-size: 18px;
  font-weight: 400;
}

.minecraftHeroMeta {
  z-index: 3;
  color: #ffffff94;
  letter-spacing: .07em;
  text-transform: uppercase;
  justify-items: end;
  gap: 8px;
  font-size: 8px;
  display: grid;
  position: absolute;
  bottom: clamp(88px, 9vw, 145px);
  right: 4.3vw;
}

.minecraftHeroMeta strong {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.minecraftFoundation {
  color: #090909;
  background: #f1eee8;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  gap: 8vw;
  padding: clamp(95px, 11vw, 180px) 4.3vw;
  display: grid;
}

.minecraftSectionHeading h2 {
  letter-spacing: 0;
  text-wrap: balance;
  max-width: 1180px;
  margin: 32px 0 0;
  font-size: clamp(62px, 7.3vw, 124px);
  font-weight: 340;
  line-height: .88;
}

.minecraftFoundationBody {
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
}

.minecraftFoundationBody > p {
  color: #090909a3;
  max-width: 600px;
  margin: 0;
  font-size: 14px;
  line-height: 1.68;
}

.minecraftFoundationBody > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: clamp(50px, 7vw, 96px);
  display: grid;
}

.minecraftFoundationBody article {
  background: #dfdbd3;
  border-radius: 22px;
  flex-direction: column;
  justify-content: space-between;
  min-height: 170px;
  padding: 20px;
  display: flex;
}

.minecraftFoundationBody article:nth-child(2) {
  background: var(--surface-subcard);
  color: #fff;
}

.minecraftFoundationBody article:nth-child(3) {
  background: var(--color-accent);
}

.minecraftFoundationBody strong {
  letter-spacing: .01em;
  font-size: clamp(26px, 2.2vw, 42px);
  font-weight: 420;
}

.minecraftFoundationBody span {
  letter-spacing: .06em;
  text-transform: uppercase;
  max-width: 110px;
  font-size: 8px;
  font-weight: 650;
  line-height: 1.35;
}

.minecraftWorlds {
  background: var(--surface-card);
  padding: clamp(95px, 10vw, 165px) 4.3vw clamp(105px, 11vw, 180px);
}

.minecraftWorlds > header {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  align-items: end;
  gap: 8vw;
  display: grid;
}

.minecraftWorlds > header > p {
  color: #ffffff94;
  letter-spacing: 0;
  text-transform: none;
  max-width: 500px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}

.minecraftWorldGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: clamp(70px, 8vw, 125px);
  display: grid;
}

.minecraftWorldCard {
  color: #f8f5ef;
  background: #161311;
  border-radius: 34px;
  flex-direction: column;
  min-height: 1030px;
  padding: 8px;
  display: flex;
  overflow: hidden;
}

.minecraftWorldCard[data-server="extra"] {
  color: #090909;
  background: #f1eee8;
}

.minecraftWorldMedia {
  border-radius: 28px;
  min-height: clamp(450px, 40vw, 650px);
  position: relative;
  overflow: hidden;
}

.minecraftWorldMedia img {
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.minecraftWorldMedia > span {
  background: linear-gradient(#0000 57%, #0000008a);
  position: absolute;
  inset: 0;
}

.minecraftWorldCard:hover .minecraftWorldMedia img {
  transform: scale(1.035);
}

.minecraftWorldTopline {
  color: var(--color-accent);
  letter-spacing: .07em;
  text-transform: uppercase;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 18px 0;
  font-size: 8px;
  font-weight: 700;
  display: flex;
}

.minecraftWorldTopline strong {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.minecraftWorldCopy {
  padding: 55px 18px 0;
}

.minecraftWorldCopy > p {
  color: currentColor;
  letter-spacing: .06em;
  opacity: .5;
  text-transform: uppercase;
  margin: 0;
  font-size: 8px;
  font-weight: 650;
}

.minecraftWorldCopy h3 {
  letter-spacing: .01em;
  margin: 15px 0 0;
  font-size: clamp(78px, 8vw, 136px);
  font-weight: 340;
  line-height: .8;
}

.minecraftWorldCopy > strong {
  color: var(--color-accent);
  margin-top: 28px;
  font-size: clamp(20px, 2vw, 33px);
  font-weight: 440;
  line-height: 1.12;
  display: block;
}

.minecraftWorldCopy > span {
  color: currentColor;
  opacity: .62;
  max-width: 650px;
  margin-top: 22px;
  font-size: 12px;
  line-height: 1.62;
  display: block;
}

.minecraftWorldMechanics {
  background: #ffffff0e;
  border-radius: 19px;
  grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr);
  gap: 30px;
  margin: 45px 18px 0;
  padding: 22px;
  display: grid;
}

.minecraftWorldCard[data-server="extra"] .minecraftWorldMechanics {
  background: #dfdbd3;
}

.minecraftWorldMechanics p {
  letter-spacing: .06em;
  opacity: .48;
  text-transform: uppercase;
  margin: 0;
  font-size: 8px;
  font-weight: 700;
}

.minecraftWorldMechanics ul {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.minecraftWorldMechanics li {
  letter-spacing: .025em;
  background: #ffffff14;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 8px;
}

.minecraftWorldCard[data-server="extra"] .minecraftWorldMechanics li {
  background: #09090912;
}

.minecraftWorldCard footer {
  grid-template-columns: 1fr .58fr;
  gap: 7px;
  margin-top: auto;
  padding: 36px 0 0;
  display: grid;
}

.minecraftWorldCard footer a {
  border-radius: 999px;
  min-height: 62px;
}

.minecraftWorldCard footer a + a {
  color: #fff;
  background: #ffffff12;
}

.minecraftWorldCard[data-server="extra"] footer a:first-child {
  background: var(--surface-card);
  color: #fff;
}

.minecraftWorldCard[data-server="extra"] footer a + a {
  color: #090909;
  background: #dfdbd3;
}

.minecraftApproach {
  color: #090909;
  background: #f1eee8;
  grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
  gap: 7vw;
  padding: clamp(95px, 10vw, 165px) 4.3vw;
  display: grid;
}

.minecraftShowcase {
  grid-template-rows: repeat(12, minmax(0, 1fr));
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  min-height: 1000px;
  display: grid;
}

.minecraftShowcase figure {
  background: #d9d5ce;
  border-radius: 28px;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.minecraftShowcase figure[data-index="0"] {
  grid-area: 1 / 1 / 7 / 11;
}

.minecraftShowcase figure[data-index="1"] {
  grid-area: 7 / 3 / 13 / 13;
}

.minecraftShowcase figure[data-index="2"] {
  z-index: 2;
  grid-area: 4 / 9 / 8 / 13;
}

.minecraftShowcase img {
  object-fit: cover;
}

.minecraftShowcase figure[data-index="2"] img {
  object-position: center;
}

.minecraftShowcase figcaption {
  color: #fffc;
  letter-spacing: .05em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #080808c2;
  border-radius: 999px;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  font-size: 8px;
  display: flex;
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
}

.minecraftShowcase figcaption span {
  color: var(--color-accent);
}

.minecraftApproachCopy {
  align-self: center;
}

.minecraftApproachCopy h2 {
  letter-spacing: 0;
  text-wrap: balance;
  max-width: 760px;
  margin: 32px 0 0;
  font-size: clamp(62px, 6.2vw, 108px);
  font-weight: 340;
  line-height: .88;
}

.minecraftApproachCopy > span {
  color: #0909099e;
  max-width: 580px;
  margin-top: 32px;
  font-size: 13px;
  line-height: 1.66;
  display: block;
}

.minecraftApproachCopy > div {
  gap: 7px;
  margin-top: clamp(55px, 7vw, 95px);
  display: grid;
}

.minecraftApproachCopy article {
  background: #dfdbd3;
  border-radius: 21px;
  grid-template-columns: 40px 1fr;
  gap: 20px;
  padding: 24px;
  display: grid;
}

.minecraftApproachCopy article:nth-child(2) {
  background: var(--surface-subcard);
  color: #fff;
}

.minecraftApproachCopy article:nth-child(3) {
  background: var(--color-accent);
}

.minecraftApproachCopy small {
  color: var(--color-accent);
  font-size: 8px;
}

.minecraftApproachCopy article:nth-child(3) small {
  color: #090909;
}

.minecraftApproachCopy h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 550;
  line-height: 1.18;
}

.minecraftApproachCopy article p {
  opacity: .62;
  max-width: 540px;
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.55;
}

.minecraftStart {
  background: radial-gradient(circle at 86% 4%,
      #ffb4508c,
      transparent 25%),
    var(--color-accent);
  color: #090909;
  padding: clamp(95px, 10vw, 165px) 4.3vw clamp(80px, 9vw, 135px);
}

.minecraftStart > header {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  align-items: end;
  gap: 7vw;
  display: grid;
}

.minecraftStart > header > p {
  color: #0909099e;
  grid-column: 1 / -1;
}

.minecraftStart > header h2 {
  letter-spacing: 0;
  text-wrap: balance;
  max-width: 1120px;
  margin: 0;
  font-size: clamp(66px, 7.4vw, 128px);
  font-weight: 340;
  line-height: .86;
}

.minecraftStart > header > span {
  opacity: .68;
  max-width: 530px;
  font-size: 13px;
  line-height: 1.65;
  display: block;
}

.minecraftStartSteps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: clamp(65px, 7vw, 105px);
  display: grid;
}

.minecraftStartSteps article {
  background: #ffffff57;
  border-radius: 26px;
  flex-direction: column;
  min-height: 300px;
  padding: 25px;
  display: flex;
}

.minecraftStartSteps article:nth-child(2) {
  background: var(--surface-card);
  color: #fff;
}

.minecraftStartSteps article:nth-child(3) {
  background: #f5f1e9;
}

.minecraftStartSteps > article > span {
  letter-spacing: .06em;
  font-size: 8px;
  font-weight: 700;
}

.minecraftStartSteps h3 {
  letter-spacing: .01em;
  max-width: 360px;
  margin: auto 0 0;
  font-size: clamp(26px, 2.6vw, 46px);
  font-weight: 420;
  line-height: .94;
}

.minecraftStartSteps p {
  opacity: .63;
  max-width: 380px;
  margin: 20px 0 0;
  font-size: 11px;
  line-height: 1.55;
}

.minecraftStartActions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 45px;
  display: flex;
}

.minecraftStartActions a {
  background: var(--surface-card);
  color: #fff;
  min-width: 250px;
}

.minecraftStartActions a + a {
  color: #090909;
  background: #ffffff6b;
}

.minecraftAiSection {
  background: radial-gradient(circle at 17% 12%,
      rgb(var(--color-accent-rgb) / .52),
      transparent 31%),
    linear-gradient(118deg,
      #130300 0%,
      var(--surface-card) 58%,
      var(--surface-subcard) 100%);
  color: #f7f4ee;
  isolation: isolate;
  grid-template-columns: minmax(0, 1.02fr) minmax(440px, .98fr);
  align-items: center;
  gap: clamp(60px, 8vw, 140px);
  min-height: 850px;
  padding: clamp(105px, 10vw, 175px) 4.3vw clamp(70px, 7vw, 115px);
  display: grid;
  position: relative;
  overflow: hidden;
}

.minecraftAiSection[data-context="server"] {
  min-height: 780px;
}

.minecraftAiGlow {
  z-index: -1;
  aspect-ratio: 1;
  background: var(--color-accent);
  opacity: .18;
  filter: blur(80px);
  border-radius: 50%;
  width: min(720px, 55vw);
  position: absolute;
  bottom: -55%;
  right: -12vw;
}

.minecraftAiIntro {
  z-index: 1;
  position: relative;
}

.minecraftAiIntro > .sectionEyebrow {
  color: #ffffff7a;
}

.minecraftAiStatus {
  color: #0a0a0a;
  letter-spacing: .065em;
  text-transform: uppercase;
  background: #b8ff38;
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  margin-top: clamp(42px, 5vw, 75px);
  padding: 10px 13px;
  font-size: 8px;
  font-weight: 760;
  display: inline-flex;
}

.minecraftAiStatus i, .minecraftAiConsoleTop > span:last-child i {
  background: currentColor;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.minecraftAiIntro h2 {
  letter-spacing: 0;
  text-wrap: balance;
  max-width: 1000px;
  margin: 29px 0 0;
  font-size: clamp(64px, 7.2vw, 126px);
  font-weight: 350;
  line-height: .86;
}

.minecraftAiIntro > p:last-child {
  color: #ffffffad;
  max-width: 690px;
  margin: 34px 0 0 clamp(0px, 5vw, 82px);
  font-size: 14px;
  line-height: 1.62;
}

.minecraftAiConsole {
  z-index: 1;
  background: radial-gradient(circle at 100% 0,
      rgb(var(--color-accent-rgb) / .26),
      transparent 35%),
    var(--surface-subcard);
  border-radius: 32px;
  flex-direction: column;
  min-height: 570px;
  padding: 24px;
  display: flex;
  position: relative;
  box-shadow: 0 38px 90px #00000052;
}

.minecraftAiConsoleTop {
  color: #ffffff73;
  letter-spacing: .075em;
  justify-content: space-between;
  gap: 20px;
  font-size: 8px;
  font-weight: 680;
  display: flex;
}

.minecraftAiConsoleTop > span:last-child {
  color: #b8ff38;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.minecraftAiQuestion {
  color: #0a0a0a;
  background: #f3f0ea;
  border-radius: 24px 24px 7px;
  align-self: flex-end;
  width: min(82%, 570px);
  margin-top: 90px;
  padding: 22px 24px;
}

.minecraftAiQuestion small, .minecraftAiAnswer small {
  color: #0000006e;
  letter-spacing: .065em;
  font-size: 8px;
  font-weight: 700;
}

.minecraftAiQuestion p {
  margin: 14px 0 0;
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.16;
}

.minecraftAiAnswer {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 15px;
  width: min(91%, 650px);
  margin-top: 18px;
  display: grid;
}

.minecraftAiAnswer > span {
  background: var(--color-accent);
  color: #0a0a0a;
  border-radius: 14px;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 12px;
  font-weight: 800;
  display: grid;
}

.minecraftAiAnswer > div {
  background: #ffffff13;
  border-radius: 7px 24px 24px;
  padding: 20px 22px;
}

.minecraftAiAnswer small {
  color: var(--color-accent);
}

.minecraftAiAnswer p {
  color: #fffc;
  margin: 13px 0 0;
  font-size: 13px;
  line-height: 1.58;
}

.minecraftAiNote {
  color: #ffffff5c;
  max-width: 520px;
  margin: auto 0 0 61px;
  font-size: 9px;
  line-height: 1.5;
}

.minecraftAiCapabilities {
  z-index: 1;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: clamp(15px, 3vw, 45px);
  display: grid;
  position: relative;
}

.minecraftAiCapabilities article {
  background: #fff1;
  border-radius: 22px;
  flex-direction: column;
  min-height: 190px;
  padding: 22px;
  display: flex;
}

.minecraftAiCapabilities article:nth-child(2) {
  color: #090909;
  background: #f0ede7;
}

.minecraftAiCapabilities article:nth-child(3) {
  background: var(--color-accent);
  color: #090909;
}

.minecraftAiCapabilities article > span {
  color: var(--color-accent);
  font-size: 8px;
  font-weight: 720;
}

.minecraftAiCapabilities article:nth-child(2) > span, .minecraftAiCapabilities article:nth-child(3) > span {
  color: #0000007a;
}

.minecraftAiCapabilities h3 {
  margin: auto 0 0;
  font-size: clamp(21px, 2vw, 34px);
  font-weight: 430;
  line-height: 1;
}

.minecraftAiCapabilities p {
  color: currentColor;
  opacity: .57;
  max-width: 330px;
  margin: 14px 0 0;
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 1120px) {
  .minecraftHeroCopy {
    max-width: 82vw;
  }

  .minecraftHeroMeta {
    display: none;
  }

  .minecraftFoundation, .minecraftApproach {
    grid-template-columns: 1fr;
  }

  .minecraftFoundationBody > p {
    margin-top: 42px;
  }

  .minecraftWorlds > header, .minecraftStart > header {
    grid-template-columns: 1fr;
  }

  .minecraftWorlds > header > p, .minecraftStart > header > span {
    margin-top: 32px;
  }

  .minecraftWorldCard {
    min-height: 960px;
  }

  .minecraftShowcase {
    min-height: 820px;
  }

  .minecraftApproachCopy {
    padding-top: 40px;
  }

  .minecraftAiSection {
    grid-template-columns: 1fr;
  }

  .minecraftAiIntro > p:last-child {
    margin-left: 0;
  }

  .minecraftAiConsole {
    justify-self: end;
    width: min(760px, 100%);
  }

  .minecraftAiCapabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .minecraftHero {
    min-height: 780px;
  }

  .minecraftHeroShade {
    background: linear-gradient(90deg, #050505b8, #0505052e), linear-gradient(#0505059e, #0000 30%, #050505f0 100%);
  }

  .minecraftHeroImage {
    object-position: 58% center;
  }

  .minecraftHeroBreadcrumb {
    top: 104px;
    left: 20px;
  }

  .minecraftHeroCopy {
    max-width: none;
    bottom: 48px;
    left: 20px;
    right: 20px;
  }

  .minecraftHeroCopy h1 {
    margin-top: 20px;
    font-size: clamp(54px, 16vw, 82px);
    line-height: .88;
  }

  .minecraftHeroCopy > p:nth-of-type(2) {
    margin-top: 24px;
    font-size: 12px;
  }

  .minecraftHeroCopy > div {
    margin-top: 27px;
    display: grid;
  }

  .minecraftHeroCopy > div a {
    min-height: 54px;
  }

  .minecraftFoundation, .minecraftWorlds, .minecraftApproach, .minecraftStart, .minecraftAiSection {
    padding-left: 20px;
    padding-right: 20px;
  }

  .minecraftAiSection {
    gap: 48px;
    min-height: 0;
    padding-top: 90px;
    padding-bottom: 70px;
  }

  .minecraftAiStatus {
    margin-top: 35px;
  }

  .minecraftAiIntro h2 {
    font-size: clamp(50px, 14vw, 72px);
    line-height: .9;
  }

  .minecraftAiIntro > p:last-child {
    margin-top: 25px;
    font-size: 12px;
  }

  .minecraftAiConsole {
    border-radius: 25px;
    min-height: 500px;
    padding: 17px;
  }

  .minecraftAiQuestion {
    width: 92%;
    margin-top: 64px;
    padding: 18px;
  }

  .minecraftAiAnswer {
    grid-template-columns: 40px minmax(0, 1fr);
    width: 100%;
  }

  .minecraftAiAnswer > span {
    width: 40px;
    height: 40px;
  }

  .minecraftAiAnswer > div {
    padding: 18px;
  }

  .minecraftAiNote {
    margin-left: 55px;
  }

  .minecraftAiCapabilities {
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  .minecraftAiCapabilities article {
    min-height: 155px;
  }

  .minecraftSectionHeading h2, .minecraftApproachCopy h2, .minecraftStart > header h2 {
    font-size: clamp(50px, 14vw, 72px);
    line-height: .9;
  }

  .minecraftFoundationBody > div, .minecraftWorldGrid, .minecraftStartSteps {
    grid-template-columns: 1fr;
  }

  .minecraftFoundationBody article {
    min-height: 130px;
  }

  .minecraftWorldGrid {
    gap: 14px;
    margin-top: 55px;
  }

  .minecraftWorldCard {
    border-radius: 26px;
    min-height: 0;
  }

  .minecraftWorldMedia {
    border-radius: 21px;
    min-height: 420px;
  }

  .minecraftWorldCopy {
    padding-top: 38px;
  }

  .minecraftWorldCopy h3 {
    font-size: clamp(68px, 24vw, 98px);
  }

  .minecraftWorldMechanics {
    grid-template-columns: 1fr;
  }

  .minecraftWorldMechanics ul {
    justify-content: flex-start;
  }

  .minecraftWorldCard footer {
    grid-template-columns: 1fr;
    padding-top: 30px;
  }

  .minecraftShowcase {
    min-height: 650px;
  }

  .minecraftShowcase figure[data-index="0"] {
    grid-area: 1 / 1 / 7 / 13;
  }

  .minecraftShowcase figure[data-index="1"] {
    grid-area: 7 / 2 / 13 / 13;
  }

  .minecraftShowcase figure[data-index="2"] {
    display: none;
  }

  .minecraftApproachCopy article {
    grid-template-columns: 30px 1fr;
  }

  .minecraftStartSteps article {
    min-height: 250px;
  }

  .minecraftStartActions {
    display: grid;
  }

  .minecraftStartActions a {
    width: 100%;
    min-width: 0;
  }
}

.playPage {
  background: var(--surface-card);
}

.playHero, .playChooser, .playGuide {
  border-radius: 46px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}

.playHero {
  isolation: isolate;
  background: var(--surface-card);
  height: calc(100svh - 16px);
  min-height: 780px;
}

.playHeroMedia, .playHeroMedia span {
  position: absolute;
  inset: 0;
}

.playHeroMedia {
  z-index: -2;
}

.playHeroMedia img {
  object-fit: cover;
  object-position: center 52%;
  filter: saturate(.78) contrast(1.08);
  transform: scale(1.015);
}

.playHeroMedia span {
  background: linear-gradient(90deg, #020202fa 0%, #020202db 39%, #02020240 76%, #02020233 100%), linear-gradient(#02020229 45%, #020202e0 100%);
}

.playHeroCopy {
  z-index: 4;
  width: min(1120px, 76vw);
  position: absolute;
  bottom: clamp(60px, 8vh, 105px);
  left: 4.3vw;
}

.playHeroCopy .innerBreadcrumb {
  margin-bottom: 42px;
}

.playHeroCopy h1 {
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 1120px;
  margin: 0;
  font-size: clamp(74px, 8.8vw, 154px);
  font-weight: 340;
  line-height: .82;
}

.playHeroCopy > p {
  color: #ffffffb3;
  max-width: 650px;
  margin: 32px 0 0;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.55;
}

.playHeroAction {
  background: var(--color-accent);
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 35px;
  min-width: 220px;
  min-height: 52px;
  margin-top: 34px;
  padding: 0 18px;
  font-size: 10px;
  font-weight: 650;
  display: inline-flex;
}

.playHeroAction i {
  font-size: 18px;
  font-style: normal;
}

.playHeroStatus {
  z-index: 4;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #050505ad;
  border-radius: 18px;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 5px 16px;
  width: 190px;
  padding: 18px;
  display: grid;
  position: absolute;
  bottom: 48px;
  right: 4.3vw;
}

.playHeroStatus span, .playHeroStatus small {
  color: #ffffff7a;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 8px;
}

.playHeroStatus strong {
  color: var(--color-accent);
  grid-area: 1 / 2 / span 2;
  font-size: 48px;
  font-weight: 360;
  line-height: .8;
}

.playChooser {
  color: #060606;
  background: #efede8;
  padding: clamp(92px, 10vw, 170px) 4.3vw clamp(85px, 9vw, 150px);
}

.playChooser[data-collapsed="true"] {
  padding-top: 18px;
  padding-bottom: 18px;
}

.playSelectionSummary {
  background: var(--surface-card);
  color: #f7f5f2;
  border-radius: 22px;
  grid-template-columns: minmax(320px, 1fr) minmax(220px, .65fr) minmax(180px, auto);
  align-items: center;
  gap: 4vw;
  min-height: 142px;
  padding: 24px 28px;
  display: grid;
}

.playSelectionSummary > div {
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 7px 18px;
  display: grid;
}

.playSelectionSummary > div > span, .playSelectionSummary > div > small {
  color: #ffffff80;
  letter-spacing: .065em;
  text-transform: uppercase;
  font-size: 9px;
}

.playSelectionSummary > div > span {
  color: var(--color-accent);
  grid-column: 1 / -1;
}

.playSelectionSummary > div > strong {
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: clamp(35px, 4vw, 64px);
  font-weight: 420;
  line-height: .85;
}

.playSelectionSummary > p {
  color: #ffffff94;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.playSelectionSummary > button {
  color: #090909;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  background: #efede8;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 52px;
  padding: 0 17px;
  font-size: 9px;
  font-weight: 670;
  display: flex;
}

.playSelectionSummary > button span {
  font-size: 17px;
}

.playChooser > header {
  grid-template-columns: minmax(140px, .45fr) minmax(480px, 1.3fr) minmax(240px, .55fr);
  align-items: start;
  gap: 4vw;
  display: grid;
}

.playChooser > header > p, .playGuideHead p, .playReady p {
  color: var(--color-accent);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 9px 0 0;
  font-size: 9px;
  font-weight: 620;
}

.playChooser > header h2 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(72px, 8vw, 138px);
  font-weight: 340;
  line-height: .84;
}

.playChooser > header > span {
  color: #0000009e;
  max-width: 390px;
  font-size: 13px;
  line-height: 1.55;
}

.playGameRail {
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) #0000001a;
  gap: 10px;
  margin-top: clamp(65px, 7vw, 110px);
  padding-bottom: 8px;
  display: flex;
  overflow-x: auto;
}

.playGameCard {
  isolation: isolate;
  background: var(--surface-card);
  color: #fff;
  min-height: 430px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 0;
  border-radius: 30px;
  flex: 0 0 min(860px, 76vw);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), filter .25s;
  position: relative;
  overflow: hidden;
}

.playGameCard:not([data-active="true"]) {
  filter: saturate(.25) brightness(.72);
}

.playGameCard:hover, .playGameCard:focus-visible, .playGameCard[data-active="true"] {
  filter: none;
  transform: translateY(-4px);
}

.playGameCard > img {
  z-index: -2;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.playGameCard:hover > img, .playGameCard[data-active="true"] > img {
  transform: scale(1.035);
}

.playGameCard > i {
  z-index: -1;
  background: linear-gradient(#00000038, #0000001f 42%, #000000eb);
  position: absolute;
  inset: 0;
}

.playGameCardTop, .playGameCardCopy, .playGameCardState {
  position: absolute;
  left: 28px;
  right: 28px;
}

.playGameCardTop {
  justify-content: space-between;
  align-items: center;
  display: flex;
  top: 27px;
}

.playGameCardTop small, .playGameCardTop b, .playGameCardCopy small, .playGameCardState {
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 8px;
  font-style: normal;
}

.playGameCardTop b {
  color: #0a0a0a;
  background: #a8ff35;
  border-radius: 999px;
  padding: 7px 10px;
}

.playGameCardCopy {
  gap: 10px;
  display: grid;
  bottom: 32px;
}

.playGameCardCopy small {
  color: #fff9;
}

.playGameCardCopy strong {
  letter-spacing: -.015em;
  text-transform: uppercase;
  font-size: clamp(64px, 7vw, 118px);
  font-weight: 340;
  line-height: .78;
}

.playGameCardState {
  width: 110px;
  color: var(--color-accent);
  justify-content: space-between;
  align-items: center;
  display: flex;
  bottom: 34px;
  left: auto;
}

.playGameCardState b {
  font-size: 20px;
  font-weight: 350;
}

.playGuide {
  isolation: isolate;
  background: var(--surface-card);
  padding: clamp(92px, 10vw, 165px) 4.3vw clamp(80px, 8vw, 135px);
  scroll-margin-top: 8px;
}

.playGuide:focus {
  outline: 0;
}

.playGuideSelection {
  background: var(--color-accent);
  color: #080808;
  border-radius: 21px;
  grid-template-columns: minmax(150px, .42fr) minmax(320px, 1fr) auto;
  align-items: center;
  gap: 3vw;
  margin-bottom: clamp(72px, 8vw, 125px);
  padding: 23px 26px;
  display: grid;
}

.playGuideSelection span, .playGuideSelection small {
  letter-spacing: .065em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 650;
}

.playGuideSelection strong {
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: clamp(38px, 4.2vw, 70px);
  font-weight: 450;
  line-height: .82;
}

.playGuideSelection small {
  color: #0009;
}

.playGuideBackdrop, .playGuideBackdrop span {
  position: absolute;
  inset: 0;
}

.playGuideBackdrop {
  z-index: -2;
}

.playGuideBackdrop img {
  object-fit: cover;
  filter: saturate(.45) brightness(.32);
}

.playGuideBackdrop span {
  background: radial-gradient(circle at 88% 12%,
      rgb(var(--color-accent-rgb) / .68),
      transparent 32%),
    linear-gradient(180deg,
      #030303b8,
      var(--surface-card) 46%,
      var(--surface-card) 100%);
}

.playGuideHead {
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .48fr);
  align-items: end;
  gap: 7vw;
  display: grid;
}

.playGuideHead h2 {
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 1100px;
  margin: 24px 0 0;
  font-size: clamp(68px, 8vw, 136px);
  font-weight: 340;
  line-height: .84;
}

.playGuideHead > span {
  color: #ffffff9e;
  max-width: 420px;
  font-size: 13px;
  line-height: 1.55;
}

.playSteps {
  gap: 8px;
  margin: clamp(70px, 8vw, 125px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.playSteps > li {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #fff1;
  border-radius: 25px;
  grid-template-columns: 78px minmax(340px, 1fr) minmax(190px, 320px);
  align-items: center;
  gap: clamp(24px, 4vw, 68px);
  min-height: 215px;
  padding: 27px clamp(24px, 3vw, 48px);
  display: grid;
}

.playSteps > li:nth-child(2n) {
  background: #ffffff1b;
}

.playSteps > .playRulesStep {
  border: 1px solid rgb(var(--color-accent-rgb) / .7);
  background: rgb(var(--color-accent-rgb) / .18);
  box-shadow: inset 4px 0 0 var(--color-accent);
}

.playRulesStep .playStepCopy small, .playRulesStep .playStepIndex {
  color: var(--color-accent);
}

.playRulesAction {
  color: #0a0a0a;
  background: #f4f1ec;
}

.playRulesAction:hover, .playRulesAction:focus-visible {
  background: #fff;
}

.playStepIndex {
  color: var(--color-accent);
  align-self: start;
  padding-top: 8px;
  font-size: 13px;
}

.playStepCopy small {
  color: #ffffff6b;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 8px;
}

.playStepCopy h3 {
  letter-spacing: -.015em;
  margin: 15px 0 0;
  font-size: clamp(38px, 4vw, 66px);
  font-weight: 360;
  line-height: .88;
}

.playStepCopy p {
  color: #ffffff8f;
  max-width: 720px;
  margin: 22px 0 0;
  font-size: 12px;
  line-height: 1.55;
}

.playStepAction {
  background: var(--color-accent);
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 54px;
  padding: 0 17px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.playStepActionLight {
  color: #090909;
  background: #f2f0eb;
}

.playStepAction span {
  font-size: 17px;
}

.playStepAction em {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  overflow: hidden;
}

.playSteps > .playServerStep {
  grid-template-columns: 78px minmax(280px, .62fr) minmax(540px, 1.38fr);
  padding-top: 34px;
  padding-bottom: 34px;
}

.playServerOptions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.playServerOptions > button {
  isolation: isolate;
  background: var(--surface-subcard);
  color: #fff;
  min-height: 230px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 0;
  border-radius: 18px;
  transition: transform .24s, filter .24s;
  position: relative;
  overflow: hidden;
}

.playServerOptions > button:not([data-active="true"]) {
  filter: saturate(.35) brightness(.72);
}

.playServerOptions > button:hover, .playServerOptions > button:focus-visible, .playServerOptions > button[data-active="true"] {
  filter: none;
  transform: translateY(-3px);
}

.playServerImage, .playServerImage i {
  position: absolute;
  inset: 0;
}

.playServerImage {
  z-index: -1;
}

.playServerImage img {
  object-fit: cover;
}

.playServerImage i {
  background: linear-gradient(#00000026, #000000e0);
}

.playServerOptionCopy {
  display: grid;
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
}

.playServerOptionCopy small {
  color: var(--color-accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 8px;
}

.playServerOptionCopy strong {
  margin-top: 8px;
  font-size: clamp(31px, 3vw, 48px);
  font-weight: 420;
  line-height: .86;
}

.playServerOptionCopy em {
  color: #ffffff8c;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 11px;
  font-size: 7px;
  font-style: normal;
  overflow: hidden;
}

.playReady {
  background: radial-gradient(circle at 78% 0%,
    var(--color-accent),
    #d52200 30%,
    #320000 66%,
    #100606 100%);
  border-radius: 28px;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .55fr) minmax(210px, .42fr);
  align-items: end;
  gap: 4vw;
  min-height: 330px;
  margin-top: 8px;
  padding: clamp(35px, 4vw, 60px);
  display: grid;
}

.playReady h2 {
  letter-spacing: -.015em;
  max-width: 760px;
  margin: 24px 0 0;
  font-size: clamp(52px, 6vw, 96px);
  font-weight: 350;
  line-height: .84;
}

.playReadyServer {
  gap: 8px;
  display: grid;
}

.playReadyServer span, .playReadyServer small, .playReady > div:last-child > small {
  color: #ffffff80;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 8px;
  line-height: 1.4;
}

.playReadyServer strong {
  font-size: 28px;
  font-weight: 520;
}

.playReady > div:last-child {
  gap: 13px;
  display: grid;
}

.playReady > div:last-child > a {
  color: #090909;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #fff;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 56px;
  padding: 0 18px;
  font-size: 9px;
  font-weight: 680;
  display: flex;
}

.playReady > div:last-child > a span {
  font-size: 18px;
}

@media (max-width: 1120px) {
  .playSelectionSummary {
    grid-template-columns: 1fr auto;
  }

  .playSelectionSummary > p {
    grid-column: 1;
  }

  .playSelectionSummary > button {
    grid-area: 1 / 2 / span 2;
  }

  .playChooser > header {
    grid-template-columns: 130px 1fr;
  }

  .playChooser > header > span {
    grid-column: 2;
  }

  .playGuideHead {
    grid-template-columns: 1fr;
  }

  .playGuideHead > span {
    margin-top: 8px;
  }

  .playSteps > .playServerStep {
    grid-template-columns: 64px 1fr;
  }

  .playServerOptions {
    grid-column: 2;
  }

  .playReady {
    grid-template-columns: 1fr 1fr;
  }

  .playReady > div:last-child {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  .playHero, .playChooser, .playGuide {
    border-radius: 26px;
  }

  .playHero {
    height: max(760px, 100svh - 12px);
    min-height: 760px;
  }

  .playHeroMedia img {
    object-position: 58% center;
  }

  .playHeroMedia span {
    background: linear-gradient(#02020273, #0202029e 42%, #020202 88%);
  }

  .playHeroCopy {
    width: auto;
    bottom: 48px;
    left: 20px;
    right: 20px;
  }

  .playHeroCopy h1 {
    font-size: clamp(54px, 14.5vw, 76px);
  }

  .playHeroCopy > p {
    font-size: 12px;
  }

  .playHeroStatus {
    display: none;
  }

  .playChooser, .playGuide {
    padding: 78px 20px;
  }

  .playChooser[data-collapsed="true"] {
    padding: 12px 6px;
  }

  .playSelectionSummary {
    border-radius: 20px;
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 0;
    padding: 22px;
  }

  .playSelectionSummary > p, .playSelectionSummary > button {
    grid-area: auto / 1;
  }

  .playSelectionSummary > button {
    width: 100%;
  }

  .playGuideSelection {
    border-radius: 18px;
    grid-template-columns: 1fr auto;
    gap: 9px 18px;
    margin-bottom: 66px;
    padding: 19px 20px;
  }

  .playGuideSelection span {
    grid-column: 1 / -1;
  }

  .playGuideSelection strong {
    font-size: clamp(34px, 11vw, 54px);
  }

  .playChooser > header {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .playChooser > header > span {
    grid-column: auto;
  }

  .playChooser > header h2, .playGuideHead h2 {
    font-size: clamp(53px, 14vw, 75px);
  }

  .playGameRail {
    margin-top: 50px;
    margin-right: -20px;
  }

  .playGameCard {
    flex-basis: 86vw;
    min-height: 390px;
  }

  .playGameCardCopy strong {
    font-size: clamp(55px, 16vw, 80px);
  }

  .playSteps {
    margin-top: 58px;
  }

  .playSteps > li, .playSteps > .playServerStep {
    grid-template-columns: 42px 1fr;
    gap: 18px;
    min-height: 0;
    padding: 28px 20px;
  }

  .playStepIndex {
    grid-row: 1 / span 2;
  }

  .playStepCopy h3 {
    font-size: clamp(38px, 11vw, 54px);
  }

  .playStepAction {
    grid-column: 2;
    margin-top: 10px;
  }

  .playServerOptions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    margin-top: 12px;
  }

  .playServerOptions > button {
    min-height: 250px;
  }

  .playReady {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: 520px;
    padding: 34px 24px;
  }

  .playReady h2 {
    font-size: clamp(48px, 13vw, 68px);
  }

  .playReady > div:last-child {
    grid-column: auto;
    align-self: end;
  }
}

.publicProfilePage {
  --profile-accent: var(--color-accent);
  background: var(--surface-card);
  color: #f5f3ef;
}

.publicProfileHero {
  background: var(--surface-card);
  isolation: isolate;
  border-radius: 0 0 42px 42px;
  height: 100svh;
  min-height: 850px;
  position: relative;
  overflow: hidden;
}

.publicProfileCover {
  z-index: -2;
  filter: saturate(.84) contrast(1.04);
  background-position: center;
  background-size: cover;
  position: absolute;
  inset: 0;
  transform: scale(1.015);
}

.publicProfileHero:after {
  z-index: -1;
  background: linear-gradient(90deg, #000000c2, transparent 57%),
    radial-gradient(circle at 20% 65%,
      color-mix(in srgb, var(--profile-accent) 52%, transparent),
      transparent 32%);
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.publicProfileHeroMeta {
  color: #ffffffc7;
  letter-spacing: .12em;
  text-transform: uppercase;
  justify-content: space-between;
  font-size: 10px;
  display: flex;
  position: absolute;
  top: 118px;
  left: 4.25vw;
  right: 4.25vw;
}

.publicProfileHeroMeta span:last-child {
  align-items: center;
  gap: 8px;
  display: flex;
}

.publicProfileHeroMeta i {
  background: var(--profile-accent);
  width: 7px;
  height: 7px;
  box-shadow: 0 0 16px var(--profile-accent);
  border-radius: 50%;
}

.publicProfileIdentity {
  align-items: end;
  gap: clamp(20px, 3vw, 52px);
  display: flex;
  position: absolute;
  bottom: 105px;
  left: 4.25vw;
  right: 4.25vw;
}

.publicProfileAvatar {
  aspect-ratio: 1;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--profile-accent) 75%, var(--surface-subcard)),
    var(--surface-card) 68%);
  background-position: center;
  background-size: cover;
  border: 0;
  border-radius: 50%;
  flex: 0 0 clamp(124px, 14vw, 218px);
  place-items: center;
  width: clamp(124px, 14vw, 218px);
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px #00000073;
}

.publicProfileAvatar span {
  font-size: clamp(54px, 7vw, 112px);
  font-weight: 500;
  line-height: 1;
}

.publicProfileAvatar small {
  background: var(--profile-accent);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 9px;
  display: grid;
  position: absolute;
  bottom: 12%;
  right: 13%;
}

.publicProfileIdentity > div:nth-child(2) {
  min-width: 0;
  padding-bottom: 8px;
}

.publicProfileIdentity p {
  color: #ffffffa8;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 16px;
  font-size: 10px;
}

.publicProfileIdentity h1 {
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  max-width: 1050px;
  margin: 0;
  font-size: clamp(66px, 10vw, 176px);
  font-weight: 400;
  line-height: .77;
}

.publicProfileIdentity strong {
  color: var(--profile-accent);
  margin-top: 23px;
  font-size: clamp(17px, 1.5vw, 25px);
  font-weight: 500;
  display: block;
}

.publicProfileRoles {
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
  display: flex;
}

.publicProfileRoles span {
  --role-accent: #8a8a8a;
  background: color-mix(in srgb,
    var(--role-accent) 17%,
    #0c0c0cd1);
  min-height: 31px;
  color: color-mix(in srgb, var(--role-accent) 88%, #fff);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 13px 0 9px;
  font-size: 9px;
  font-weight: 650;
  display: inline-flex;
}

.publicProfileRoles span i {
  background: var(--role-accent);
  width: 9px;
  height: 9px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--role-accent) 60%, transparent);
  border-radius: 50%;
}

.publicProfileRoles span[data-audience="staff"] {
  background: color-mix(in srgb,
    var(--role-accent) 22%,
    #0c0c0cdb);
}

.publicProfileTagline {
  color: #ffffffc7;
  width: min(24vw, 350px);
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  position: absolute;
  bottom: 114px;
  right: 4.25vw;
}

.publicProfileOverview {
  grid-template-columns: 1.5fr 1fr .72fr;
  gap: clamp(35px, 6vw, 115px);
  padding: 125px 4.25vw 145px;
  display: grid;
}

.publicProfileStats {
  border-top: 1px solid #333;
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.publicProfileStats article {
  border-right: 1px solid #252525;
  min-width: 0;
  min-height: 210px;
  padding: 20px 16px 18px 0;
}

.publicProfileStats article + article {
  padding-left: 16px;
}

.publicProfileStats span, .publicProfileBio > span, .publicProfileLinks > span {
  color: #777;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-size: 9px;
}

.publicProfileStats strong {
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  margin-top: 45px;
  font-size: clamp(25px, 3.1vw, 52px);
  font-weight: 400;
  line-height: .92;
  display: block;
}

.publicProfileStats small {
  color: var(--profile-accent);
  letter-spacing: .09em;
  margin-top: 12px;
  font-size: 9px;
  display: block;
}

.publicProfileBio {
  border-top: 1px solid #333;
  padding-top: 20px;
}

.publicProfileBio p {
  color: #d7d4ce;
  letter-spacing: -.015em;
  white-space: pre-wrap;
  margin: 42px 0 0;
  font-size: clamp(19px, 1.7vw, 29px);
  line-height: 1.42;
}

.publicProfileLinks {
  border-top: 1px solid #333;
  flex-direction: column;
  padding-top: 20px;
  display: flex;
}

.publicProfileLinks > span {
  margin-bottom: 31px;
}

.publicProfileLinks a {
  color: #f5f3ef;
  border-bottom: 1px solid #252525;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
  display: flex;
}

.publicProfileLinks a strong {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
}

.publicProfileLinks a i {
  color: var(--profile-accent);
  font-style: normal;
}

.publicProfilePixelBattle {
  background: radial-gradient(circle at 78% 12%,
      color-mix(in srgb, var(--profile-accent) 30%, transparent),
      transparent 34%),
    linear-gradient(135deg, #171412, var(--surface-card) 68%);
  border-radius: 34px;
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, .9fr) auto;
  align-items: end;
  gap: clamp(34px, 5vw, 92px);
  margin: 0 4.25vw 120px;
  padding: clamp(34px, 4.2vw, 72px);
  display: grid;
  position: relative;
  overflow: hidden;
}

.publicProfilePixelBattle:after {
  color: #ffffff09;
  content: "PB";
  pointer-events: none;
  font-size: clamp(210px, 25vw, 480px);
  font-weight: 600;
  line-height: .72;
  position: absolute;
  bottom: -36%;
  right: -2%;
}

.publicProfilePixelBattle > * {
  z-index: 1;
  position: relative;
}

.publicProfilePixelBattleIntro > span {
  color: var(--profile-accent);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 9px;
}

.publicProfilePixelBattleIntro h2 {
  letter-spacing: -.012em;
  margin: 18px 0 16px;
  font-size: clamp(41px, 5vw, 82px);
  font-weight: 400;
  line-height: .9;
}

.publicProfilePixelBattleIntro p {
  color: #918e88;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.publicProfilePixelBattleStats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.publicProfilePixelBattleStats article {
  background: #00000054;
  border-radius: 20px;
  min-height: 132px;
  padding: 21px;
}

.publicProfilePixelBattleStats strong {
  letter-spacing: -.01em;
  font-size: clamp(34px, 3.8vw, 62px);
  font-weight: 400;
  line-height: 1;
  display: block;
}

.publicProfilePixelBattleStats span {
  color: #8b8882;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 24px;
  font-size: 9px;
  display: block;
}

.publicProfilePixelBattleLink {
  color: #0a0a0a;
  text-transform: uppercase;
  background: #f5f3ef;
  border-radius: 99px;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  width: 224px;
  min-height: 58px;
  padding: 0 20px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
}

.publicProfilePixelBattleLink i {
  background: var(--surface-card);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 30px;
  height: 30px;
  font-style: normal;
  display: grid;
}

.publicProfileClan {
  --clan-color: var(--color-accent);
  background: var(--surface-card);
  color: #f5f3ee;
  border: 1px solid #ffffff1f;
  border-radius: 28px;
  grid-template-columns: 120px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 28px;
  min-height: 190px;
  margin: 0 clamp(20px, 5vw, 76px) 70px;
  padding: 28px;
  display: grid;
}

.publicProfileClanMark {
  width: 112px;
  height: 122px;
  color: var(--clan-color);
  place-items: center;
  display: grid;
  position: relative;
}

.publicProfileClanMark svg {
  stroke-width: .65px;
  width: 106px;
  height: 106px;
  position: absolute;
}

.publicProfileClanMark strong {
  z-index: 1;
  letter-spacing: .09em;
  font-size: 17px;
}

.publicProfileClan > div:nth-child(2) > span {
  color: var(--clan-color);
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 800;
}

.publicProfileClan h2 {
  letter-spacing: -.045em;
  margin: 10px 0 7px;
  font-size: 32px;
}

.publicProfileClan p {
  color: #ffffff7a;
  max-width: 580px;
  margin: 0;
  font-size: 10px;
}

.publicProfileClan dl {
  margin: 0;
  display: flex;
}

.publicProfileClan dl > div {
  border-left: 1px solid #ffffff1a;
  min-width: 82px;
  padding: 8px 18px;
}

.publicProfileClan dt {
  color: #ffffff59;
  font-size: 7px;
}

.publicProfileClan dd {
  align-items: center;
  gap: 6px;
  margin: 7px 0 0;
  font-size: 18px;
  font-weight: 750;
  display: flex;
}

.publicProfileClan dd svg {
  width: 13px;
  color: var(--clan-color);
}

.publicProfileClan > a {
  background: var(--clan-color);
  color: #fff;
  border-radius: 14px;
  align-items: center;
  gap: 20px;
  min-height: 46px;
  padding: 0 15px;
  font-size: 9px;
  font-weight: 750;
  display: flex;
}

.publicProfileClan > a i {
  font-style: normal;
}

@media (max-width: 1000px) {
  .publicProfileClan {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 20px;
  }

  .publicProfileClanMark {
    width: 92px;
    height: 102px;
  }

  .publicProfileClanMark svg {
    width: 88px;
    height: 88px;
  }

  .publicProfileClan > a {
    grid-column: 2 / 4;
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .publicProfileClan {
    border-radius: 22px;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
    margin: 0 12px 42px;
    padding: 20px;
  }

  .publicProfileClanMark {
    width: 68px;
    height: 78px;
  }

  .publicProfileClanMark svg {
    width: 66px;
    height: 66px;
  }

  .publicProfileClanMark strong {
    font-size: 12px;
  }

  .publicProfileClan h2 {
    font-size: 25px;
  }

  .publicProfileClan dl {
    grid-column: 1 / -1;
    width: 100%;
  }

  .publicProfileClan dl > div {
    flex: 1;
    min-width: 0;
  }

  .publicProfileClan > a {
    grid-column: 1 / -1;
    justify-content: space-between;
    width: 100%;
  }
}

.publicProfileArticles {
  color: #0a0a0a;
  background: #ebe9e3;
  border-radius: 42px 42px 0 0;
  padding: 110px 4.25vw 155px;
}

.publicProfileArticles > header {
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 65px;
  display: flex;
}

.publicProfileArticles > header span {
  color: #777;
  letter-spacing: .12em;
  font-size: 10px;
}

.publicProfileArticles > header h2 {
  letter-spacing: -.015em;
  text-transform: uppercase;
  max-width: 900px;
  margin: 14px 0 0;
  font-size: clamp(52px, 7vw, 116px);
  font-weight: 400;
  line-height: .88;
}

.publicProfileArticles > header > a {
  color: #111;
  text-transform: uppercase;
  border-bottom: 1px solid #999;
  padding-bottom: 8px;
  font-size: 10px;
}

.publicProfileArticleGrid {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  display: grid;
}

.publicProfileArticleGrid > article {
  background: #f6f4ef;
  border: 1px solid #cbc9c3;
  border-radius: 27px;
  overflow: hidden;
}

.publicProfileArticleMedia {
  aspect-ratio: 1.42;
  background-position: center;
  background-size: cover;
  display: block;
  position: relative;
}

.publicProfileArticleMedia span {
  background: var(--profile-accent);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 10px;
  display: grid;
  position: absolute;
  top: 18px;
  left: 18px;
}

.publicProfileArticleGrid article > div {
  padding: 25px;
}

.publicProfileArticleGrid article > div > span {
  color: var(--profile-accent);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 9px;
}

.publicProfileArticleGrid h3 {
  letter-spacing: -.015em;
  margin: 16px 0 13px;
  font-size: clamp(25px, 2.3vw, 38px);
  font-weight: 400;
  line-height: 1;
}

.publicProfileArticleGrid h3 a, .publicProfileArticleGrid article > div > a {
  color: #111;
}

.publicProfileArticleGrid p {
  color: #68665f;
  min-height: 4.5em;
  margin: 0 0 26px;
  font-size: 12px;
  line-height: 1.5;
}

.publicProfileArticleGrid article > div > a {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
}

.publicProfileEmpty {
  color: #666;
  border-top: 1px solid #aaa;
  min-height: 220px;
  margin: 0;
  padding: 50px 0;
  font-size: clamp(20px, 2vw, 32px);
}

.publicProfileSettings {
  background: linear-gradient(145deg,
    var(--surface-subcard),
    var(--surface-card) 68%);
  border: 1px solid #2d2d2d;
  border-radius: 32px;
  padding: clamp(28px, 4vw, 58px);
  position: relative;
  overflow: hidden;
}

.publicProfileSettings:after {
  background: var(--color-accent);
  content: "";
  filter: blur(110px);
  opacity: .17;
  pointer-events: none;
  border-radius: 50%;
  width: 390px;
  height: 390px;
  position: absolute;
  top: -180px;
  right: -160px;
}

.publicProfileSettings > header {
  z-index: 1;
  justify-content: space-between;
  align-items: end;
  gap: 35px;
  margin-bottom: 38px;
  display: flex;
  position: relative;
}

.publicProfileSettings > header span {
  color: var(--color-accent);
  letter-spacing: .13em;
  font-size: 9px;
}

.publicProfileSettings > header h2 {
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin: 12px 0 16px;
  font-size: clamp(35px, 4vw, 66px);
  font-weight: 400;
  line-height: .92;
}

.publicProfileSettings > header p {
  color: #888;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.publicProfileSettings > header > a {
  color: #fff;
  text-transform: uppercase;
  border: 1px solid #3a3a3a;
  border-radius: 99px;
  flex: none;
  align-items: center;
  gap: 25px;
  padding: 16px 19px;
  font-size: 10px;
  display: flex;
}

.publicProfileSettings > header > a strong {
  color: var(--color-accent);
}

.publicProfileSettings form {
  z-index: 1;
  position: relative;
}

.publicProfileVisibility {
  cursor: pointer;
  border: 1px solid #2c2c2c;
  border-radius: 18px;
  align-items: center;
  gap: 17px;
  margin-bottom: 28px;
  padding: 18px;
  display: flex;
}

.publicProfileVisibility > input {
  opacity: 0;
  position: absolute;
}

.publicProfileVisibility > i {
  background: #303030;
  border-radius: 99px;
  width: 48px;
  height: 27px;
  transition: all .18s;
  position: relative;
}

.publicProfileVisibility > i:after {
  content: "";
  background: #aaa;
  border-radius: 50%;
  width: 19px;
  height: 19px;
  transition: all .18s;
  position: absolute;
  top: 4px;
  left: 4px;
}

.publicProfileVisibility > input:checked + i {
  background: var(--color-accent);
}

.publicProfileVisibility > input:checked + i:after {
  background: #fff;
  left: 25px;
}

.publicProfileVisibility span {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.publicProfileVisibility strong {
  font-size: 12px;
  font-weight: 500;
}

.publicProfileVisibility small {
  color: #767676;
  font-size: 10px;
}

.publicProfileFieldGrid {
  grid-template-columns: 1fr 120px;
  gap: 16px;
  display: grid;
}

.publicProfileFieldGrid label, .publicProfileLinkEditor {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.publicProfileFieldGrid label > span, .publicProfileLinkEditor legend {
  color: #777;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 9px;
}

.publicProfileFieldGrid input, .publicProfileFieldGrid textarea, .publicProfileFieldGrid select, .publicProfileLinkEditor input {
  background: var(--surface-card);
  color: #fff;
  width: 100%;
  min-height: 48px;
  font: inherit;
  border: 1px solid #303030;
  border-radius: 13px;
  outline: 0;
  font-size: 12px;
}

.publicProfileFieldGrid input, .publicProfileFieldGrid select, .publicProfileLinkEditor input {
  padding: 0 14px;
}

.publicProfileFieldGrid textarea {
  resize: vertical;
  padding: 14px;
}

.publicProfileFieldGrid input:focus, .publicProfileFieldGrid textarea:focus, .publicProfileFieldGrid select:focus, .publicProfileLinkEditor input:focus {
  border-color: var(--color-accent);
}

.publicProfileBioField {
  grid-column: 1 / -1;
}

.publicProfileColor input {
  cursor: pointer;
  padding: 5px;
}

.publicProfileOptions {
  border: 0;
  gap: 26px;
  margin: 24px 0;
  padding: 0;
  display: flex;
}

.publicProfileOptions label {
  color: #aaa;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  display: flex;
}

.publicProfileOptions label[data-disabled="true"] {
  opacity: .38;
}

.publicProfileOptions input {
  accent-color: var(--color-accent);
}

.publicProfileLinkEditor {
  border: 0;
  margin: 0 0 24px;
  padding: 0;
}

.publicProfileLinkEditor legend {
  margin-bottom: 11px;
}

.publicProfileLinkEditor div {
  grid-template-columns: .55fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
  display: grid;
}

.publicProfileSettings form > button {
  background: var(--color-accent);
  color: #fff;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  border-radius: 15px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 57px;
  padding: 0 19px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.publicProfileSettings form > button:disabled {
  opacity: .55;
  cursor: wait;
}

.publicProfileSettingsNotice {
  z-index: 1;
  color: #8ed49f;
  background: #102317;
  border: 1px solid #315b3b;
  border-radius: 12px;
  margin: -15px 0 24px;
  padding: 12px 15px;
  font-size: 11px;
  position: relative;
}

.publicProfileSettingsNotice.isError {
  color: #ff9f8f;
  background: #2a110d;
  border-color: #71372e;
}

.publicProfileSettingsLoading {
  color: #777;
  min-height: 180px;
}

@media (max-width: 1050px) {
  .publicProfileTagline {
    display: none;
  }

  .publicProfileOverview {
    grid-template-columns: 1fr 1fr;
  }

  .publicProfileStats {
    grid-column: 1 / -1;
  }

  .publicProfileArticleGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .publicProfilePixelBattle {
    grid-template-columns: 1fr 1fr;
  }

  .publicProfilePixelBattleLink {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .publicProfileHero {
    border-radius: 0 0 28px 28px;
    min-height: 760px;
  }

  .publicProfileHeroMeta {
    top: 96px;
    left: 20px;
    right: 20px;
  }

  .publicProfileHeroMeta span:first-child {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 68%;
    overflow: hidden;
  }

  .publicProfileIdentity {
    display: block;
    bottom: 58px;
    left: 20px;
    right: 20px;
  }

  .publicProfileAvatar {
    width: 116px;
    margin-bottom: 29px;
  }

  .publicProfileIdentity h1 {
    font-size: clamp(54px, 17vw, 86px);
    line-height: .82;
  }

  .publicProfileOverview {
    grid-template-columns: 1fr;
    padding: 82px 20px 95px;
  }

  .publicProfileStats {
    grid-template-columns: 1fr;
  }

  .publicProfileStats article {
    border-bottom: 1px solid #252525;
    border-right: 0;
    min-height: 145px;
  }

  .publicProfileStats article + article {
    padding-left: 0;
  }

  .publicProfileStats strong {
    margin-top: 26px;
  }

  .publicProfileBio p {
    margin-top: 25px;
  }

  .publicProfilePixelBattle {
    border-radius: 25px;
    grid-template-columns: 1fr;
    margin: 0 20px 82px;
    padding: 31px 24px;
  }

  .publicProfilePixelBattleStats {
    grid-template-columns: 1fr 1fr;
  }

  .publicProfilePixelBattleStats article {
    min-height: 114px;
    padding: 17px;
  }

  .publicProfilePixelBattleStats span {
    margin-top: 18px;
  }

  .publicProfilePixelBattleLink {
    grid-column: auto;
    width: 100%;
  }

  .publicProfileArticles {
    border-radius: 28px 28px 0 0;
    padding: 80px 20px 100px;
  }

  .publicProfileArticles > header {
    flex-direction: column;
    align-items: start;
  }

  .publicProfileArticleGrid {
    grid-template-columns: 1fr;
  }

  .publicProfileSettings {
    border-radius: 23px;
    padding: 25px 20px;
  }

  .publicProfileSettings > header {
    flex-direction: column;
    align-items: start;
  }

  .publicProfileFieldGrid {
    grid-template-columns: 1fr;
  }

  .publicProfileBioField {
    grid-column: auto;
  }

  .publicProfileColor {
    max-width: 120px;
  }

  .publicProfileOptions {
    flex-direction: column;
    align-items: start;
  }

  .publicProfileLinkEditor div {
    grid-template-columns: 1fr;
  }
}

.articlesPage, .articlePage, .articleStudioPage, .myArticlesPage {
  background: var(--surface-card);
  color: #f7f5f2;
}

.articlesHero {
  background: linear-gradient(90deg, #000000eb, #0000006b 58%, #000000e0), url("/games/astra/astra-flying-base-deck.jpg") 50% 38% / cover;
  border: 1px solid #ffffff24;
  border-radius: 42px;
  min-height: min(880px, 100svh - 12px);
  margin: 6px;
  position: relative;
  overflow: hidden;
}

.articlesHero:after {
  content: "";
  background: linear-gradient(180deg,
    transparent 46%,
    var(--surface-card) 100%);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.articlesHeroGlow {
  z-index: 1;
  background: rgb(var(--color-accent-rgb) / .48);
  filter: blur(130px);
  border-radius: 50%;
  width: 620px;
  height: 620px;
  position: absolute;
  bottom: -180px;
  left: 16%;
}

.articlesHero .siteHeader, .articleDetailHero .siteHeader, .articleStudioTop .siteHeader {
  z-index: 10;
}

.articlesHeroCopy {
  z-index: 3;
  width: min(1040px, 100vw - 440px);
  position: absolute;
  top: clamp(205px, 23svh, 255px);
  left: clamp(28px, 6vw, 110px);
}

.articlesHeroCopy > p, .articleStudioTop > div:last-child > span {
  color: var(--color-accent);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 27px;
  font-size: 10px;
}

.articlesHeroCopy h1 {
  letter-spacing: -.015em;
  flex-direction: column;
  max-width: 1040px;
  margin: 0;
  font-size: clamp(72px, 7.15vw, 126px);
  font-weight: 350;
  line-height: .86;
  display: flex;
}

.articlesHeroCopy h1 span {
  white-space: nowrap;
  display: block;
}

.articlesHeroCopy > span {
  color: #ffffffb8;
  max-width: 610px;
  margin-top: 30px;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.65;
  display: block;
}

.articlesHeroActions {
  gap: 10px;
  margin-top: 32px;
  display: flex;
}

.articlesHeroActions .button b {
  margin-left: 30px;
}

.articlesHeroMark {
  z-index: 3;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #04040452;
  border: 1px solid #ffffff5c;
  border-radius: 50%;
  width: 178px;
  height: 178px;
  padding: 22px;
  display: grid;
  position: absolute;
  bottom: 64px;
  right: clamp(30px, 4.3vw, 78px);
}

.articlesHeroMark span {
  color: var(--color-accent);
  font-size: 32px;
  font-weight: 500;
}

.articlesHeroMark strong {
  letter-spacing: -.015em;
  align-self: end;
  font-size: 20px;
  font-weight: 400;
  line-height: .9;
}

.articlesHeroMark i {
  color: #ffffff80;
  font-size: 10px;
  font-style: normal;
  position: absolute;
  top: 24px;
  right: 23px;
}

.articlesHeroWord {
  z-index: 2;
  color: #ffffff0a;
  letter-spacing: -.015em;
  white-space: nowrap;
  font-size: clamp(110px, 17vw, 300px);
  font-weight: 600;
  line-height: .76;
  position: absolute;
  bottom: -.22em;
  right: -12px;
}

.articleDiscovery {
  padding: clamp(85px, 10vw, 160px) clamp(24px, 5vw, 90px) 45px;
}

.articleSearch {
  border-bottom: 1px solid #ffffff3d;
  grid-template-columns: minmax(0, 1fr) auto;
  max-width: 1280px;
  margin: 0 auto 42px;
  display: grid;
}

.articleSearch label {
  grid-template-columns: 100px 1fr;
  align-items: center;
  display: grid;
}

.articleSearch label span {
  color: #ffffff6b;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 9px;
}

.articleSearch input {
  color: #fff;
  width: 100%;
  font: inherit;
  letter-spacing: -.015em;
  background: none;
  border: 0;
  outline: 0;
  padding: 28px 20px;
  font-size: clamp(25px, 3vw, 48px);
}

.articleSearch input::placeholder {
  color: #fff3;
}

.articleSearch button {
  background: var(--color-accent);
  color: #fff;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  align-self: center;
  min-width: 140px;
  height: 58px;
  font-size: 10px;
}

.articleSearch button span {
  margin-left: 30px;
}

.articleCategories {
  scrollbar-width: none;
  gap: 8px;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  overflow-x: auto;
}

.articleCategories a {
  color: #ffffff9e;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  flex: none;
  padding: 14px 20px;
  font-size: 9px;
  text-decoration: none;
  transition: all .18s;
}

.articleCategories a:hover, .articleCategories a[data-active="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.articleResults {
  padding: 35px clamp(24px, 5vw, 90px) clamp(90px, 12vw, 190px);
}

.articleResults > header {
  border-bottom: 1px solid #ffffff24;
  justify-content: space-between;
  gap: 30px;
  max-width: 1280px;
  margin: 0 auto 48px;
  padding-bottom: 26px;
  display: flex;
}

.articleResults > header span, .articleCardMeta, .articleEditorSectionHead > span, .articleEditorHead > div > span {
  color: var(--color-accent);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 9px;
}

.articleResults > header h2 {
  letter-spacing: -.015em;
  margin: 14px 0 0;
  font-size: clamp(38px, 4vw, 65px);
  font-weight: 360;
}

.articleResults > header > strong {
  align-self: end;
  font-size: 44px;
  font-weight: 350;
}

.articleResults > header > strong small {
  color: #ffffff6b;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 400;
}

.articleGrid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 54px 18px;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
}

.articleCard {
  grid-column: span 4;
  min-width: 0;
}

.articleCardCover {
  aspect-ratio: 4 / 3;
  background: var(--surface-subcard);
  border-radius: 26px;
  display: block;
  position: relative;
  overflow: hidden;
}

.articleCard2 .articleCardCover {
  aspect-ratio: 4 / 5;
}

.articleCardCover img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .5s cubic-bezier(.2, .75, .2, 1);
}

.articleCardCover span {
  background: linear-gradient(#0000 50%, #00000085);
  position: absolute;
  inset: 0;
}

.articleCard:hover .articleCardCover img {
  transform: scale(1.045);
}

.articleCardMeta {
  justify-content: space-between;
  gap: 15px;
  margin-top: 21px;
  display: flex;
}

.articleCardMeta time {
  color: #fff6;
}

.articleCard h2 {
  letter-spacing: -.015em;
  margin: 18px 0 0;
  font-size: clamp(27px, 2.45vw, 41px);
  font-weight: 360;
  line-height: .98;
}

.articleCard h2 a {
  color: inherit;
  text-decoration: none;
}

.articleCard > p {
  color: #ffffff8f;
  min-height: 4.8em;
  margin: 20px 0;
  font-size: 12px;
  line-height: 1.62;
}

.articleCardTags {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.articleCardTags a, .articleRailTags a {
  color: #ffffff7a;
  border: 1px solid #ffffff1c;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 8px;
  text-decoration: none;
}

.articleCard footer {
  border-top: 1px solid #ffffff1f;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-top: 24px;
  padding-top: 17px;
  display: flex;
}

.articleCard footer div, .articleCardAuthor {
  gap: 4px;
  display: grid;
}

.articleCard footer > .articleCardAuthor {
  color: #fff;
  letter-spacing: normal;
  text-transform: none;
}

.articleCard footer strong {
  font-size: 11px;
  font-weight: 500;
}

.articleCard footer span {
  color: #ffffff61;
  font-size: 8px;
}

.articleCard footer > a, .articleEmpty a {
  color: var(--color-accent);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 9px;
  text-decoration: none;
}

.articleEmpty {
  text-align: center;
  border: 1px solid #ffffff21;
  border-radius: 30px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 110px 30px;
}

.articleEmpty > span {
  color: var(--color-accent);
  font-size: 55px;
}

.articleEmpty h2 {
  letter-spacing: -.015em;
  margin: 25px 0 10px;
  font-size: clamp(35px, 5vw, 72px);
  font-weight: 350;
}

.articleEmpty p {
  color: #ffffff80;
  margin: 0 0 30px;
}

.articlePagination {
  border-top: 1px solid #ffffff24;
  justify-content: space-between;
  max-width: 1280px;
  margin: 80px auto 0;
  padding-top: 24px;
  display: flex;
}

.articlePagination a, .articlePagination span {
  color: #ffffff9e;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 9px;
  text-decoration: none;
}

.articlePagination a[aria-disabled="true"] {
  pointer-events: none;
  opacity: .25;
}

.articleDetailHero {
  background: var(--surface-card);
  isolation: isolate;
  border-radius: 42px;
  min-height: max(760px, 100svh - 12px);
  margin: 6px;
  display: block;
  position: relative;
  overflow: hidden;
}

.articleDetailHero .siteHeader {
  z-index: 5;
  position: absolute;
  inset: 0 0 auto;
}

.articleDetailCover {
  z-index: -2;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.articleDetailCover img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.articleDetailCover span {
  background: linear-gradient(90deg, #030303e6 0%, #030303ad 43%, #03030342 78%, #0303036b 100%), linear-gradient(#03030366 0%, #03030314 34%, #030303e0 100%);
  position: absolute;
  inset: 0;
}

.articleDetailIntro {
  z-index: 3;
  width: min(1080px, 100% - clamp(56px, 12vw, 236px));
  padding: 0;
  position: absolute;
  bottom: clamp(42px, 7vh, 84px);
  left: clamp(28px, 6vw, 118px);
  right: clamp(28px, 6vw, 118px);
}

.articleDetailIntro nav {
  color: #ffffff8f;
  letter-spacing: .08em;
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: clamp(28px, 5vh, 58px);
  font-size: 8px;
  display: flex;
}

.articleDetailIntro nav a {
  color: inherit;
  text-decoration: none;
}

.articleDetailIntro > p {
  color: var(--color-accent);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 22px;
  font-size: 9px;
}

.articleDetailIntro h1 {
  letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 1000px;
  margin: 0;
  font-size: clamp(58px, 8vw, 142px);
  font-weight: 340;
  line-height: .9;
}

.articleDetailIntro > span {
  color: #ffffffc2;
  max-width: 700px;
  margin-top: clamp(22px, 3vh, 34px);
  font-size: clamp(13px, 1.1vw, 17px);
  line-height: 1.55;
  display: block;
}

.articleDetailStats {
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 70px);
  width: min(620px, 100%);
  margin-top: clamp(30px, 4vh, 48px);
  padding-top: 0;
  display: grid;
}

.articleDetailStats div, .articleDetailAuthor {
  gap: 7px;
  display: grid;
}

.articleDetailAuthor {
  color: #fff;
}

.articleDetailStats small {
  color: #ffffff5c;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 8px;
}

.articleDetailStats strong {
  font-size: 11px;
  font-weight: 520;
}

.articleDetailStats i {
  color: #ffffff6e;
  font-size: 8px;
  font-style: normal;
}

.articleReadingShell {
  grid-template-columns: minmax(190px, .5fr) minmax(0, 2fr) minmax(50px, .35fr);
  gap: clamp(30px, 6vw, 110px);
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(90px, 12vw, 180px) clamp(24px, 6vw, 100px);
  display: grid;
}

.articleReadingRail {
  align-self: start;
  gap: 34px;
  display: grid;
  position: sticky;
  top: 30px;
}

.articleReadingRail > a {
  color: var(--color-accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 9px;
  text-decoration: none;
}

.articleReadingRail > div:not(.articleRailTags) {
  border-top: 1px solid #ffffff26;
  padding-top: 18px;
}

.articleReadingRail span {
  color: #ffffff59;
  font-size: 8px;
}

.articleReadingRail p {
  color: #ffffff85;
  margin: 9px 0 0;
  font-size: 9px;
  line-height: 1.5;
}

.articleRailTags {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.articleBody {
  grid-column: 2;
  min-width: 0;
}

.markdownContent {
  color: #ffffffd1;
  overflow-wrap: anywhere;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.8;
}

.markdownContent > :first-child {
  margin-top: 0;
}

.markdownContent h1, .markdownContent h2, .markdownContent h3, .markdownContent h4 {
  color: #fff;
  letter-spacing: -.015em;
  scroll-margin-top: 30px;
  font-weight: 380;
  line-height: 1;
}

.markdownContent h1 {
  margin: 0 0 45px;
  font-size: clamp(52px, 6vw, 92px);
}

.markdownContent h2 {
  margin: 90px 0 28px;
  font-size: clamp(38px, 4vw, 64px);
}

.markdownContent h3 {
  margin: 60px 0 22px;
  font-size: clamp(28px, 3vw, 43px);
}

.markdownContent h1 a, .markdownContent h2 a, .markdownContent h3 a, .markdownContent h4 a {
  color: inherit;
  text-decoration: none;
}

.markdownContent p, .markdownContent ul, .markdownContent ol {
  margin: 0 0 28px;
}

.markdownContent ul, .markdownContent ol {
  padding-left: 1.4em;
}

.markdownContent li {
  margin: 9px 0;
  padding-left: 6px;
}

.markdownContent li::marker {
  color: var(--color-accent);
}

.markdownContent a {
  color: var(--color-accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.markdownContent strong {
  color: #fff;
  font-weight: 590;
}

.markdownContent blockquote {
  border-left: 3px solid var(--color-accent);
  color: #fff;
  letter-spacing: -.015em;
  margin: 50px 0;
  padding: 8px 0 8px clamp(22px, 4vw, 48px);
  font-size: clamp(21px, 2.5vw, 34px);
  line-height: 1.35;
}

.markdownContent blockquote p {
  margin: 0;
}

.markdownContent img {
  object-fit: cover;
  border-radius: 28px;
  width: calc(100% + clamp(0px, 6vw, 100px));
  max-width: none;
  max-height: 820px;
  margin: 55px 0 55px clamp(-50px, -3vw, 0px);
  display: block;
}

.markdownContent code {
  color: var(--color-accent);
  background: #ffffff12;
  border: 1px solid #ffffff1f;
  border-radius: 6px;
  padding: .18em .4em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .88em;
}

.markdownContent pre {
  background: var(--surface-card);
  border: 1px solid #ffffff1f;
  border-radius: 22px;
  margin: 45px 0;
  padding: 28px;
  overflow-x: auto;
}

.markdownContent pre code {
  color: #e7e4df;
  background: none;
  border: 0;
  padding: 0;
  line-height: 1.65;
}

.markdownContent table {
  border-collapse: collapse;
  width: 100%;
  margin: 45px 0;
  display: block;
  overflow-x: auto;
}

.markdownContent th, .markdownContent td {
  text-align: left;
  border: 1px solid #ffffff26;
  min-width: 150px;
  padding: 16px 18px;
}

.markdownContent th {
  background: var(--color-accent);
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 10px;
}

.markdownContent hr {
  background: #ffffff2e;
  border: 0;
  height: 1px;
  margin: 70px 0;
}

.markdownContent input[type="checkbox"] {
  accent-color: var(--color-accent);
  margin-right: 8px;
}

.articleRelated {
  max-width: 1440px;
  margin: 0 auto;
  padding: 30px clamp(24px, 6vw, 100px) clamp(100px, 13vw, 190px);
}

.articleRelated > header span {
  color: var(--color-accent);
  font-size: 9px;
}

.articleRelated > header h2 {
  letter-spacing: -.015em;
  margin: 18px 0 45px;
  font-size: clamp(45px, 6vw, 92px);
  font-weight: 340;
}

.articleRelated > div {
  border-top: 1px solid #ffffff29;
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.articleRelated > div > a {
  color: #fff;
  border-right: 1px solid #ffffff29;
  min-height: 320px;
  padding: 28px;
  text-decoration: none;
}

.articleRelated > div > a:last-child {
  border-right: 0;
}

.articleRelated a > span, .articleRelated a > b {
  color: var(--color-accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 450;
}

.articleRelated h3 {
  letter-spacing: -.015em;
  margin: 55px 0 18px;
  font-size: 31px;
  font-weight: 380;
  line-height: 1;
}

.articleRelated p {
  color: #ffffff7a;
  min-height: 5em;
  font-size: 10px;
  line-height: 1.6;
}

.articleStudioTop {
  background: radial-gradient(circle at 72% 120%,
      rgb(var(--color-accent-rgb) / .58),
      transparent 38%),
    var(--surface-card);
  border: 1px solid #ffffff26;
  border-radius: 40px;
  min-height: 480px;
  margin: 6px;
  position: relative;
  overflow: hidden;
}

.articleStudioTop > div:last-child {
  position: absolute;
  bottom: 60px;
  left: clamp(25px, 6vw, 100px);
  right: clamp(25px, 6vw, 100px);
}

.articleStudioTop h1 {
  letter-spacing: -.015em;
  max-width: 1080px;
  margin: 0;
  font-size: clamp(58px, 7.5vw, 120px);
  font-weight: 340;
  line-height: .86;
}

.articleStudioWorkspace, .myArticlesWorkspace {
  padding: clamp(70px, 9vw, 140px) clamp(20px, 4vw, 70px) clamp(100px, 12vw, 180px);
}

.articleEditor, .myArticlesDashboard {
  max-width: 1480px;
  margin: 0 auto;
}

.articleEditorState, .myArticlesState {
  color: #fff9;
  text-align: center;
  border: 1px solid #ffffff24;
  border-radius: 30px;
  place-items: center;
  gap: 18px;
  min-height: 420px;
  display: grid;
}

.articleEditorState > strong, .myArticlesState > strong {
  color: var(--color-accent);
  font-size: 55px;
}

.articleEditorState h2, .myArticlesState h2 {
  color: #fff;
  letter-spacing: -.015em;
  max-width: 650px;
  margin: 0;
  font-size: clamp(32px, 5vw, 62px);
  font-weight: 350;
}

.articleEditorState p {
  max-width: 520px;
  margin: 0;
  line-height: 1.6;
}

.articleEditorHead, .myArticlesDashboard > header {
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 50px;
  display: flex;
}

.articleEditorHead h2, .myArticlesDashboard > header h2 {
  letter-spacing: -.015em;
  margin: 14px 0 12px;
  font-size: clamp(48px, 6vw, 90px);
  font-weight: 350;
}

.articleEditorHead p, .myArticlesDashboard > header p {
  color: #ffffff80;
  max-width: 650px;
  margin: 0;
  line-height: 1.6;
}

.articleEditorHead > a {
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 9px;
  text-decoration: none;
}

.articleEditorNotice, .articleEditorInfo, .articleEditorRejection {
  color: #baff76;
  background: #74ff4212;
  border: 1px solid #74ff4240;
  border-radius: 14px;
  margin-bottom: 18px;
  padding: 18px 22px;
  font-size: 10px;
}

.articleEditorNotice.error, .articleEditorRejection {
  border-color: rgb(var(--color-accent-rgb) / .35);
  background: rgb(var(--color-accent-rgb) / .08);
  color: var(--color-accent);
}

.articleEditorInfo.pending {
  border-color: rgb(var(--color-accent-rgb) / .3);
  background: rgb(var(--color-accent-rgb) / .08);
  color: #ffad68;
}

.articleEditorRejection span {
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 7px;
  font-size: 8px;
  display: block;
}

.articleEditorRejection p {
  color: #fff;
  margin: 0;
  line-height: 1.5;
}

.articleEditorForm {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  display: grid;
}

.articleEditorFields, .articleMarkdownEditor, .articleMarkdownPreview, .articleSEOEditor {
  background: var(--surface-card);
  border: 1px solid #ffffff24;
  border-radius: 28px;
  min-width: 0;
  padding: clamp(24px, 3vw, 44px);
}

.articleEditorFields, .articleSEOEditor {
  align-content: start;
  gap: 18px;
  display: grid;
}

.articleEditorSectionHead {
  align-items: baseline;
  gap: 18px;
  margin-bottom: 18px;
  display: flex;
}

.articleEditorSectionHead h3 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: 31px;
  font-weight: 370;
}

.articleEditorSectionHead i {
  color: #ffffff59;
  text-transform: uppercase;
  margin-left: auto;
  font-size: 8px;
  font-style: normal;
}

.articleEditorRow {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.articleEditorField {
  gap: 8px;
  display: grid;
  position: relative;
}

.articleEditorField > span {
  color: #fff6;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 8px;
}

.articleEditorField input, .articleEditorField textarea, .articleEditorField select {
  background: var(--surface-card);
  color: #fff;
  width: 100%;
  font: inherit;
  resize: vertical;
  border: 1px solid #ffffff24;
  border-radius: 12px;
  outline: 0;
  padding: 15px 16px;
  font-size: 12px;
  line-height: 1.55;
}

.articleEditorField input:focus, .articleEditorField textarea:focus, .articleEditorField select:focus, .markdownTextarea:focus {
  border-color: var(--color-accent);
}

.articleEditorField input:disabled, .articleEditorField textarea:disabled, .articleEditorField select:disabled, .markdownTextarea:disabled {
  opacity: .55;
}

.articleEditorField small {
  color: #ffffff47;
  text-align: right;
  font-size: 8px;
}

.articleMarkdownEditor, .articleMarkdownPreview {
  min-height: 760px;
}

.markdownToolbar {
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
  display: flex;
}

.markdownToolbar button {
  background: var(--surface-subcard);
  color: #ffffffa6;
  cursor: pointer;
  border: 1px solid #ffffff21;
  border-radius: 8px;
  min-width: 38px;
  height: 34px;
  padding: 0 10px;
  font-size: 8px;
}

.markdownToolbar button:hover {
  border-color: var(--color-accent);
  color: #fff;
}

.markdownTextarea {
  background: var(--surface-card);
  color: #eee;
  resize: vertical;
  border: 1px solid #ffffff21;
  border-radius: 16px;
  outline: 0;
  width: 100%;
  min-height: 650px;
  padding: 24px;
  font: 12px / 1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.articlePreviewPaper {
  background: var(--surface-card);
  border: 1px solid #ffffff1f;
  border-radius: 16px;
  max-height: 690px;
  padding: 26px;
  overflow: auto;
}

.articlePreviewPaper .markdownContent {
  font-size: 13px;
}

.articlePreviewPaper .markdownContent h1 {
  font-size: 48px;
}

.articlePreviewPaper .markdownContent h2 {
  margin-top: 55px;
  font-size: 36px;
}

.articlePreviewPaper .markdownContent h3 {
  font-size: 27px;
}

.articlePreviewPaper .markdownContent img {
  width: 100%;
  margin: 30px 0;
}

.articleSERP {
  color: #202124;
  background: #f7f7f7;
  border-radius: 16px;
  margin-top: 10px;
  padding: 22px;
}

.articleSERP > span {
  color: #4d5156;
  font-size: 9px;
}

.articleSERP h4 {
  color: #1a0dab;
  margin: 8px 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
}

.articleSERP p {
  color: #4d5156;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.articleEditorActions {
  background: var(--surface-card);
  border: 1px solid #ffffff24;
  border-radius: 22px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 24px;
  display: grid;
}

.articleEditorActions > div span {
  color: var(--color-accent);
  font-size: 8px;
}

.articleEditorActions > div p {
  color: #fff6;
  max-width: 650px;
  margin: 8px 0 0;
  font-size: 9px;
}

.myArticlesDashboard > header > div > span {
  color: var(--color-accent);
  font-size: 9px;
}

.myArticlesEmpty {
  text-align: center;
  border: 1px solid #ffffff24;
  border-radius: 30px;
  justify-items: center;
  min-height: 450px;
  padding: 80px 25px;
  display: grid;
}

.myArticlesEmpty > span {
  color: var(--color-accent);
  font-size: 60px;
  font-weight: 500;
}

.myArticlesEmpty h3 {
  letter-spacing: -.015em;
  margin: 25px 0 8px;
  font-size: clamp(38px, 5vw, 70px);
  font-weight: 350;
}

.myArticlesEmpty p {
  color: #ffffff7a;
}

.myArticlesEmpty a {
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 9px;
  text-decoration: none;
}

.myArticleList {
  border-top: 1px solid #ffffff29;
}

.myArticleList > article {
  border-bottom: 1px solid #ffffff29;
  grid-template-columns: 70px minmax(0, 1fr) 180px;
  gap: 26px;
  padding: 35px 0;
  display: grid;
}

.myArticleIndex {
  color: var(--color-accent);
  font-size: 9px;
}

.myArticleMain > div:first-child {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.myArticleMain > div:first-child span, .myArticleMain > div:first-child i, .myArticleMain > div:first-child b {
  color: #ffffff80;
  text-transform: uppercase;
  border: 1px solid #ffffff21;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 8px;
  font-style: normal;
  font-weight: 400;
}

.myArticleMain > div:first-child i {
  border-color: rgb(var(--color-accent-rgb) / .4);
  color: var(--color-accent);
}

.myArticleMain > div:first-child b {
  color: #a9ff76;
  border-color: #94ff5240;
}

.myArticleMain h3 {
  letter-spacing: -.015em;
  margin: 25px 0 12px;
  font-size: clamp(31px, 3.5vw, 52px);
  font-weight: 360;
  line-height: 1;
}

.myArticleMain > p {
  color: #ffffff7a;
  max-width: 800px;
  margin: 0;
  line-height: 1.55;
}

.myArticleMain blockquote {
  border-left: 2px solid var(--color-accent);
  background: rgb(var(--color-accent-rgb) / .08);
  color: #ffffffb3;
  margin: 20px 0 0;
  padding: 14px 18px;
  font-size: 10px;
}

.myArticleMain blockquote strong {
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-size: 8px;
  display: block;
}

.myArticleMain footer {
  color: #ffffff4d;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 22px;
  font-size: 8px;
  display: flex;
}

.myArticleActions {
  flex-direction: column;
  gap: 7px;
  display: flex;
}

.myArticleActions a, .myArticleActions button {
  color: #ffffffa8;
  font: inherit;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  border: 1px solid #ffffff24;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 8px;
  text-decoration: none;
}

.myArticleActions a:first-child, .myArticleActions button:not(.danger) {
  border-color: rgb(var(--color-accent-rgb) / .35);
}

.myArticleActions .danger {
  color: var(--color-accent);
}

.accountArticlesLink {
  border: 1px solid rgb(var(--color-accent-rgb) / .3);
  background: rgb(var(--color-accent-rgb) / .07);
  color: #fff;
  border-radius: 12px;
  gap: 5px;
  margin-top: 9px;
  padding: 14px;
  text-decoration: none;
  display: grid;
}

.accountArticlesLink span {
  color: #ffffff6b;
  text-transform: uppercase;
  font-size: 8px;
}

.accountArticlesLink strong {
  color: var(--color-accent);
  font-size: 10px;
}

.adminArticleFilters {
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 14px;
  margin-bottom: 20px;
  display: grid;
}

.adminArticleFilters .adminSearch {
  margin: 0;
}

.adminArticleLayout {
  grid-template-columns: minmax(300px, .8fr) minmax(0, 1.6fr);
  gap: 14px;
  min-height: 650px;
  display: grid;
}

.adminArticleQueue {
  border: 1px solid #ffffff1a;
  border-radius: 18px;
  align-self: start;
  overflow: hidden;
}

.adminArticleQueue > button {
  background: var(--surface-card);
  color: #fff;
  text-align: left;
  cursor: pointer;
  border: 0;
  border-bottom: 1px solid #ffffff1a;
  grid-template-columns: 20px minmax(0, 1fr) 15px;
  gap: 11px;
  width: 100%;
  padding: 20px 17px;
  display: grid;
  position: relative;
}

.adminArticleQueue > button:last-child {
  border-bottom: 0;
}

.adminArticleQueue > button:hover, .adminArticleQueue > button.active {
  background: rgb(var(--color-accent-rgb) / .09);
}

.adminArticleQueueIndex {
  color: var(--color-accent);
}

.adminArticleQueue small {
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 7px;
}

.adminArticleQueue h3 {
  margin: 9px 0 7px;
  font-size: 17px;
  font-weight: 430;
  line-height: 1.1;
}

.adminArticleQueue p {
  color: #fff6;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  font-size: 9px;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}

.adminArticleQueue footer {
  color: #ffffff47;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: 7px;
  display: flex;
}

.adminArticleQueue i {
  color: #ffffff4d;
  font-style: normal;
}

.adminArticleReview, .adminArticlePlaceholder {
  background: var(--surface-card);
  border: 1px solid #ffffff1a;
  border-radius: 18px;
  min-width: 0;
  padding: clamp(22px, 3vw, 38px);
}

.adminArticleReview > header {
  justify-content: space-between;
  gap: 20px;
  display: flex;
}

.adminArticleReview > header span {
  color: var(--color-accent);
  font-size: 8px;
}

.adminArticleReview > header h2 {
  letter-spacing: -.015em;
  margin: 14px 0 8px;
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 360;
  line-height: .95;
}

.adminArticleReview > header p {
  color: #fff6;
  font-size: 9px;
}

.adminArticleReview > header button {
  color: #ffffff80;
  cursor: pointer;
  background: none;
  border: 0;
  align-self: start;
  font-size: 28px;
}

.adminArticleCover {
  aspect-ratio: 16 / 7;
  border-radius: 16px;
  margin: 25px 0;
  position: relative;
  overflow: hidden;
}

.adminArticleCover img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.adminArticleCover span {
  background: linear-gradient(#0000, #0006);
  position: absolute;
  inset: 0;
}

.adminArticleReviewMeta {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.adminArticleReviewMeta span, .adminArticleReviewMeta b {
  color: #ffffff73;
  text-transform: uppercase;
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  padding: 7px 9px;
  font-size: 7px;
  font-weight: 400;
}

.adminArticleReviewMeta b {
  color: #9dff69;
  border-color: #8bff4e3d;
}

.adminArticleExcerpt {
  color: #ffffffa6;
  margin: 26px 0;
  font-size: 13px;
  line-height: 1.6;
}

.adminArticleMarkdown {
  background: var(--surface-card);
  border: 1px solid #ffffff1a;
  border-radius: 14px;
  max-height: 620px;
  padding: 25px;
  overflow: auto;
}

.adminArticleMarkdown .markdownContent {
  font-size: 12px;
}

.adminArticleMarkdown .markdownContent h1 {
  font-size: 42px;
}

.adminArticleMarkdown .markdownContent h2 {
  margin-top: 45px;
  font-size: 31px;
}

.adminArticleMarkdown .markdownContent h3 {
  font-size: 23px;
}

.adminArticleMarkdown .markdownContent img {
  width: 100%;
  margin: 25px 0;
}

.adminNewsMarkdownEditor {
  background: #ffffff0b;
  border-radius: 18px;
  overflow: hidden;
}

.adminNewsMarkdownEditor > header {
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding: 18px 20px 14px;
  display: flex;
}

.adminNewsMarkdownEditor > header div {
  gap: 4px;
  display: grid;
}

.adminNewsMarkdownEditor > header span, .adminNewsMarkdownWorkspace > label > span, .adminNewsMarkdownPreview > span {
  color: #ffffff6b;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 8px;
}

.adminNewsMarkdownEditor > header strong {
  color: #fff;
  font-size: 13px;
  font-weight: 520;
}

.adminNewsMarkdownEditor > header small {
  color: #ffffff52;
  font-size: 8px;
}

.adminNewsMarkdownToolbar {
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 20px 14px;
  display: flex;
}

.adminNewsMarkdownToolbar button {
  color: #ffffffb8;
  min-height: 30px;
  font: inherit;
  cursor: pointer;
  background: #ffffff13;
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 8px;
  transition: background .16s, color .16s;
}

.adminNewsMarkdownToolbar button:hover, .adminNewsMarkdownToolbar button:focus-visible {
  background: var(--color-accent);
  color: #fff;
}

.adminNewsMarkdownWorkspace {
  background: var(--surface-card);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 430px;
  display: grid;
}

.adminNewsMarkdownWorkspace > label, .adminNewsMarkdownPreview {
  grid-template-rows: auto 1fr;
  gap: 12px;
  min-width: 0;
  padding: 18px 20px 20px;
  display: grid;
}

.adminNewsMarkdownWorkspace textarea {
  resize: vertical;
  color: #ffffffd6;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-height: 360px;
  font: 12px / 1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.adminNewsMarkdownPreview {
  background: #ffffff09;
  overflow: auto;
}

.adminNewsMarkdownPreview > p {
  color: #ffffff4d;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.adminNewsMarkdownPreview .markdownContent {
  font-size: 11px;
  line-height: 1.65;
}

.adminNewsMarkdownPreview .markdownContent h1 {
  margin-bottom: 20px;
  font-size: 36px;
}

.adminNewsMarkdownPreview .markdownContent h2 {
  margin: 34px 0 16px;
  font-size: 27px;
}

.adminNewsMarkdownPreview .markdownContent h3 {
  margin: 28px 0 14px;
  font-size: 20px;
}

.adminNewsMarkdownPreview .markdownContent img {
  border-radius: 12px;
  width: 100%;
  margin: 22px 0;
}

.adminNewsMarkdownEditor > .adminFormHint {
  margin: 0;
  padding: 14px 20px 17px;
  display: block;
}

@media (max-width: 760px) {
  .adminNewsMarkdownEditor > header {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }

  .adminNewsMarkdownWorkspace {
    grid-template-columns: 1fr;
  }
}

.adminArticleSEO {
  border: 1px solid #ffffff1a;
  border-radius: 14px;
  margin-top: 15px;
  padding: 18px;
}

.adminArticleSEO > span {
  color: var(--color-accent);
  font-size: 8px;
}

.adminArticleSEO h3 {
  margin: 10px 0 7px;
  font-size: 18px;
  font-weight: 420;
}

.adminArticleSEO p {
  color: #ffffff73;
  font-size: 9px;
  line-height: 1.45;
}

.adminArticleSEO div {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.adminArticleSEO i {
  color: var(--color-accent);
  font-size: 7px;
  font-style: normal;
}

.adminArticleDecision {
  border-top: 1px solid #ffffff1a;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  display: grid;
}

.adminArticleDecision > div {
  gap: 8px;
  display: flex;
}

.adminArticlePublicLink {
  color: var(--color-accent);
  text-transform: uppercase;
  margin-top: 18px;
  font-size: 8px;
  text-decoration: none;
  display: inline-block;
}

.adminArticlePlaceholder {
  text-align: center;
  place-content: center;
  display: grid;
}

.adminArticlePlaceholder span {
  color: var(--color-accent);
  font-size: 10px;
}

.adminArticlePlaceholder h2 {
  letter-spacing: -.015em;
  margin: 15px 0 7px;
  font-size: clamp(35px, 5vw, 65px);
  font-weight: 350;
}

.adminArticlePlaceholder p, .adminArticleEmpty {
  color: #fff6;
  font-size: 10px;
}

.adminArticleEmpty {
  text-align: center;
  padding: 35px;
}

@media (max-width: 1050px) {
  .articlesHeroCopy {
    width: calc(100vw - 315px);
    top: 205px;
  }

  .articlesHeroCopy h1 {
    font-size: clamp(62px, 7.7vw, 82px);
  }

  .articlesHeroMark {
    width: 156px;
    height: 156px;
  }

  .articleCard {
    grid-column: span 6;
  }

  .articleDetailHero {
    min-height: max(760px, 100svh - 12px);
  }

  .articleReadingShell {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .articleBody {
    grid-column: 2;
  }

  .articleEditorForm {
    grid-template-columns: 1fr;
  }

  .articleEditorActions {
    grid-column: auto;
  }

  .articleRelated > div {
    grid-template-columns: 1fr;
  }

  .articleRelated > div > a {
    border-bottom: 1px solid #ffffff26;
    border-right: 0;
    min-height: 240px;
  }

  .adminArticleLayout, .adminArticleFilters {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .articlesHero {
    border-radius: 27px;
    min-height: 810px;
  }

  .articlesHeroCopy {
    width: auto;
    top: 150px;
    left: 20px;
    right: 20px;
  }

  .articlesHeroCopy h1 {
    letter-spacing: -.015em;
    font-size: clamp(46px, 13vw, 66px);
    line-height: .9;
  }

  .articlesHeroCopy > p {
    margin-bottom: 22px;
  }

  .articlesHeroCopy > span {
    max-width: 520px;
    margin-top: 25px;
    font-size: 12px;
    line-height: 1.55;
  }

  .articlesHeroActions {
    flex-direction: column;
    margin-top: 27px;
  }

  .articlesHeroActions .button {
    width: 100%;
  }

  .articlesHeroMark {
    width: 126px;
    height: 126px;
    padding: 16px;
    bottom: 24px;
    right: 22px;
  }

  .articlesHeroMark span {
    font-size: 26px;
  }

  .articlesHeroMark strong {
    font-size: 15px;
  }

  .articlesHeroMark i {
    top: 17px;
    right: 17px;
  }

  .articlesHeroWord {
    display: none;
  }

  .articleDiscovery {
    padding-left: 20px;
    padding-right: 20px;
  }

  .articleSearch {
    grid-template-columns: 1fr;
    padding-bottom: 15px;
  }

  .articleSearch label {
    grid-template-columns: 1fr;
  }

  .articleSearch input {
    padding: 18px 0;
    font-size: 27px;
  }

  .articleSearch button {
    width: 100%;
  }

  .articleResults {
    padding-left: 20px;
    padding-right: 20px;
  }

  .articleResults > header {
    align-items: end;
  }

  .articleResults > header > strong {
    font-size: 29px;
  }

  .articleGrid {
    display: block;
  }

  .articleCard {
    margin-bottom: 65px;
  }

  .articleCard2 .articleCardCover {
    aspect-ratio: 4 / 3;
  }

  .articleCard > p {
    min-height: 0;
  }

  .articleDetailHero {
    border-radius: 27px;
    min-height: max(760px, 100svh - 12px);
  }

  .articleDetailCover img {
    object-position: center;
  }

  .articleDetailCover span {
    background: linear-gradient(90deg, #030303bd, #03030333),
      linear-gradient(180deg,
        #03030375 0%,
        #03030324 28%,
        #030303f0 79%,
        var(--surface-card) 100%);
  }

  .articleDetailIntro {
    width: auto;
    bottom: 34px;
    left: 22px;
    right: 22px;
  }

  .articleDetailIntro nav {
    margin-bottom: 28px;
  }

  .articleDetailIntro > p {
    margin-bottom: 14px;
  }

  .articleDetailIntro h1 {
    font-size: clamp(48px, 14vw, 76px);
    line-height: .92;
  }

  .articleDetailIntro > span {
    margin-top: 20px;
    font-size: 13px;
  }

  .articleDetailStats {
    grid-template-columns: 1fr;
  }

  .articleReadingShell {
    padding-left: 20px;
    padding-right: 20px;
    display: block;
  }

  .articleReadingRail {
    margin-bottom: 65px;
    position: static;
  }

  .markdownContent h1 {
    font-size: 48px;
  }

  .markdownContent h2 {
    margin-top: 65px;
    font-size: 39px;
  }

  .markdownContent h3 {
    font-size: 30px;
  }

  .markdownContent img {
    border-radius: 18px;
    width: 100%;
    margin: 40px 0;
  }

  .articleRelated {
    padding-left: 20px;
    padding-right: 20px;
  }

  .articleStudioTop {
    border-radius: 27px;
    min-height: 430px;
  }

  .articleStudioTop h1 {
    font-size: clamp(49px, 13vw, 68px);
  }

  .articleStudioWorkspace, .myArticlesWorkspace {
    padding-left: 15px;
    padding-right: 15px;
  }

  .articleEditorHead, .myArticlesDashboard > header {
    flex-direction: column;
    align-items: start;
  }

  .articleEditorFields, .articleMarkdownEditor, .articleMarkdownPreview, .articleSEOEditor {
    border-radius: 20px;
    padding: 20px;
  }

  .articleEditorRow {
    grid-template-columns: 1fr;
  }

  .articleMarkdownEditor, .articleMarkdownPreview {
    min-height: 580px;
  }

  .markdownTextarea {
    min-height: 500px;
    padding: 17px;
  }

  .articlePreviewPaper {
    max-height: 560px;
    padding: 17px;
  }

  .articleEditorActions {
    grid-template-columns: 1fr;
  }

  .articleEditorActions .button {
    width: 100%;
  }

  .myArticleList > article {
    grid-template-columns: 35px minmax(0, 1fr);
  }

  .myArticleActions {
    grid-column: 2;
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .adminArticleDecision > div {
    flex-direction: column;
  }
}

.maralysWallet {
  background: radial-gradient(circle at 78% 10%,
      rgb(var(--color-accent-rgb) / .5),
      transparent 30%),
    linear-gradient(145deg, #15100d 0%, var(--surface-card) 43%, #130400 100%);
  color: #fff;
  border: 1px solid #ffffff29;
  border-radius: 34px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}

.maralysWallet[data-status="frozen"] {
  filter: saturate(.45);
}

.walletGlow {
  pointer-events: none;
  border: 1px solid #ffffff21;
  border-radius: 50%;
  width: 510px;
  height: 510px;
  position: absolute;
  top: -180px;
  right: -110px;
  box-shadow: 0 0 0 55px #ffffff06, 0 0 0 110px #ffffff03;
}

.walletHeader {
  z-index: 2;
  justify-content: space-between;
  gap: 30px;
  padding: clamp(28px, 4vw, 58px);
  display: flex;
  position: relative;
}

.walletHeader > div > span, .walletSubheading > span, .walletBalance > span, .walletBalance > small {
  color: #ffffff7a;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 8px;
}

.walletHeader h2 {
  letter-spacing: -.015em;
  max-width: 680px;
  margin: 26px 0 0;
  font-size: clamp(48px, 5.8vw, 88px);
  font-weight: 340;
  line-height: .88;
}

.walletHeader > p {
  color: #ffffff9e;
  letter-spacing: .06em;
  text-transform: uppercase;
  align-self: flex-start;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 8px;
  display: flex;
}

.walletHeader > p i {
  background: #baff45;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 5px #baff451a;
}

.maralysWallet[data-status="frozen"] .walletHeader > p i {
  background: var(--color-accent);
  box-shadow: 0 0 0 5px rgb(var(--color-accent-rgb) / .12);
}

.walletBalance {
  z-index: 2;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 12px clamp(28px, 4vw, 58px) 60px;
  display: grid;
  position: relative;
}

.walletBalance > span, .walletBalance > small {
  grid-column: 1 / -1;
}

.walletBalance > strong {
  color: var(--color-accent);
  letter-spacing: -.015em;
  margin-top: 8px;
  font-size: clamp(85px, 12.5vw, 190px);
  font-weight: 330;
  line-height: .8;
  overflow: hidden;
}

.walletBalance > div {
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  display: flex;
}

.walletBalance > div b {
  background: var(--color-accent);
  color: #090909;
  border: 1px solid #ffffff52;
  border-radius: 50%;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 26px;
  font-weight: 650;
  display: grid;
}

.walletBalance > div i {
  letter-spacing: .12em;
  font-size: 11px;
  font-style: normal;
}

.walletBalance > small {
  margin-top: 18px;
}

.walletBody {
  z-index: 2;
  border-top: 1px solid #ffffff26;
  grid-template-columns: minmax(330px, .82fr) minmax(400px, 1.18fr);
  display: grid;
  position: relative;
}

.walletTransfer {
  border-right: 1px solid #ffffff26;
}

.walletSubheading h3 {
  letter-spacing: -.015em;
  margin: 10px 0 0;
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 390;
}

.walletTransferGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.walletTransfer .accountField {
  margin-bottom: 12px;
}

.walletTransfer .accountField > span {
  color: #ffffff7a;
}

.walletTransfer .accountField input {
  color: #fff;
  background: #ffffff0e;
  border-color: #ffffff38;
}

.walletTransfer .accountField input:focus {
  border-color: var(--color-accent);
}

.walletSendButton {
  background: var(--color-accent);
  color: #080808;
  border-radius: 18px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 58px;
  margin-top: 10px;
  padding: 0 20px;
  font-weight: 560;
  display: flex;
}

.walletSendButton:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.walletNotice {
  color: #ffffff61;
  margin: 22px 0 0;
  font-size: 9px;
  line-height: 1.5;
}

.walletEmpty {
  color: #ffffff6b;
  max-width: 360px;
  font-size: 11px;
  line-height: 1.5;
}

.walletHistoryList {
  overscroll-behavior: contain;
  max-height: 575px;
  overflow: auto;
}

.walletHistoryList article {
  border-top: 1px solid #ffffff1f;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 92px;
  display: flex;
}

.walletHistoryList article > div {
  align-items: center;
  gap: 13px;
  display: flex;
}

.walletHistoryList article > div:first-child i {
  width: 33px;
  height: 33px;
  color: var(--color-accent);
  border: 1px solid #ffffff2e;
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-style: normal;
  display: grid;
}

.walletHistoryList article > div:first-child i[data-positive="true"] {
  color: #baff45;
}

.walletHistoryList span, .walletHistoryList article > div:last-child {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.walletHistoryList strong, .walletHistoryList b {
  font-size: 12px;
  font-weight: 480;
}

.walletHistoryList small, .walletHistoryList time {
  color: #fff6;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 6px;
  font-size: 8px;
  overflow: hidden;
}

.walletHistoryList article > div:last-child {
  text-align: right;
  align-items: flex-end;
}

.walletHistoryList b {
  color: #fff;
}

@media (max-width: 1180px) {
  .walletBody {
    grid-template-columns: 1fr;
  }

  .walletTransfer {
    border-bottom: 1px solid #ffffff26;
    border-right: 0;
  }
}

@media (max-width: 640px) {
  .walletHeader {
    flex-direction: column;
  }

  .walletHeader h2 {
    font-size: 48px;
  }

  .walletBalance {
    display: block;
  }

  .walletBalance > strong {
    margin: 28px 0 18px;
    font-size: clamp(72px, 24vw, 110px);
    display: block;
  }

  .walletBalance > div {
    padding-bottom: 18px;
  }

  .walletTransferGrid {
    grid-template-columns: 1fr;
  }

  .walletHistoryList article {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 0;
  }

  .walletHistoryList article > div:last-child {
    text-align: left;
    align-items: flex-start;
    width: 100%;
    padding-left: 46px;
  }
}

.desktopNav .desktopAccount.isAuthenticated {
  min-width: 0;
  min-height: 34px;
  box-shadow: none;
  text-align: left;
  text-transform: none;
  background: none;
  border: 0;
  align-items: center;
  gap: 8px;
  display: inline-flex;
  padding: 1px 3px !important;
}

.headerAccountAvatar {
  background: var(--surface-subcard-hover);
  width: 30px;
  height: 30px;
  box-shadow: none;
  color: #fff;
  background-position: center;
  background-size: cover;
  border: 0;
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  display: grid;
  overflow: hidden;
}

.headerAccountName {
  min-width: 0;
  max-width: 112px;
  display: block;
}

.headerAccountName strong {
  color: #fff;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  overflow: hidden;
}

.desktopNav .desktopAccount.isAuthenticated:hover .headerAccountName strong, .desktopNav .desktopAccount.isAuthenticated:focus-visible .headerAccountName strong, .desktopNav .desktopAccount.isAuthenticated[aria-current="page"] .headerAccountName strong {
  color: #fff;
}

.desktopNav .desktopAccount.isAuthenticated:hover, .desktopNav .desktopAccount.isAuthenticated:focus-visible, .desktopNav .desktopAccount.isAuthenticated[aria-current="page"] {
  color: #fff;
  background: none;
  border: 0;
}

.desktopAccount.isLoading {
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.headerAccountSkeleton {
  background: #ffffff2e;
  border-radius: 99px;
  width: 47px;
  height: 8px;
  animation: 1.1s ease-in-out infinite alternate headerAccountPulse;
  display: block;
}

@keyframes headerAccountPulse {
  to {
    opacity: .35;
  }
}

.mobileAccountIdentity {
  align-items: center;
  gap: 13px;
  display: flex;
  width: auto !important;
}

.mobileAccountIdentity strong {
  color: #fff;
  font-size: 21px;
  font-weight: 450;
}

.accountAvatar[data-image="true"] {
  background-position: center;
  background-size: cover;
}

.profileImageEditorGrid {
  grid-template-columns: minmax(310px, .72fr) minmax(430px, 1.28fr);
  gap: 12px;
  margin-bottom: 28px;
  display: grid;
}

.profileImageEditor {
  background: #ffffff06;
  border: 1px solid #303030;
  border-radius: 21px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 182px;
  padding: 16px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.profileImagePreview {
  aspect-ratio: 1;
  background: radial-gradient(circle at 65% 25%,
    var(--color-accent),
    #6f1100 52%,
    var(--surface-subcard) 100%);
  background-position: center;
  background-size: cover;
  border: 1px solid #ffffff29;
  border-radius: 50%;
  place-items: center;
  width: 142px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.profileImageEditor[data-kind="cover"] .profileImagePreview {
  aspect-ratio: 8 / 3;
  background: linear-gradient(135deg, #461000, var(--surface-card) 70%);
  border-radius: 14px;
  width: min(22vw, 270px);
  min-width: 210px;
}

.profileImagePreview b {
  color: #ffffffe6;
  letter-spacing: -.015em;
  font-size: 43px;
  font-weight: 420;
}

.profileImageEditor[data-kind="cover"] .profileImagePreview b {
  font-size: 18px;
  font-weight: 850;
}

.profileImagePreview i {
  color: #ffffffb8;
  background: #000000b8;
  border-radius: 99px;
  padding: 5px 7px;
  font-size: 7px;
  font-style: normal;
  position: absolute;
  bottom: 9px;
  right: 9px;
}

.profileImageEditor > div:nth-child(2) > span {
  color: var(--color-accent);
  letter-spacing: .1em;
  font-size: 8px;
}

.profileImageEditor h3 {
  letter-spacing: -.015em;
  margin: 9px 0 7px;
  font-size: 23px;
  font-weight: 420;
}

.profileImageEditor p {
  color: #777;
  min-height: 2.8em;
  margin: 0;
  font-size: 9px;
  line-height: 1.4;
}

.profileImageEditor > div:nth-child(2) > div {
  gap: 7px;
  margin-top: 16px;
  display: flex;
}

.profileImageEditor label, .profileImageEditor button {
  color: #fff;
  min-height: 34px;
  font: inherit;
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  border: 1px solid #444;
  border-radius: 99px;
  align-items: center;
  padding: 0 13px;
  font-size: 8px;
  display: inline-flex;
}

.profileImageEditor label {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.profileImageEditor button:disabled {
  opacity: .5;
  cursor: wait;
}

.profileImageInput {
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  position: absolute;
}

.profileSocialEditor {
  border: 0;
  margin: 28px 0;
  padding: 0;
}

.profileSocialEditor legend {
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  width: 100%;
  margin-bottom: 14px;
  display: flex;
}

.profileSocialEditor legend span {
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 520;
}

.profileSocialEditor legend small {
  color: #666;
  text-align: right;
  max-width: 430px;
  font-size: 9px;
  font-weight: 400;
}

.profileSocialEditor > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.profileSocialEditor label {
  background: var(--surface-card);
  border: 1px solid #2d2d2d;
  border-radius: 15px;
  grid-template-columns: 34px 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 7px;
  display: grid;
}

.profileSocialEditor label > i {
  background: var(--surface-subcard);
  width: 34px;
  height: 34px;
  color: var(--color-accent);
  border-radius: 10px;
  place-items: center;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  display: grid;
}

.profileSocialEditor label > span {
  color: #bbb;
  font-size: 9px;
}

.profileSocialEditor input {
  background: var(--surface-subcard);
  color: #fff;
  width: 100%;
  min-width: 0;
  height: 40px;
  font: inherit;
  border: 1px solid #0000;
  border-radius: 10px;
  outline: 0;
  padding: 0 11px;
  font-size: 10px;
}

.profileSocialEditor input:focus {
  border-color: var(--color-accent);
}

.profileCropBackdrop {
  z-index: 1000;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: #000000c7;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
  overflow-y: auto;
}

.profileCropDialog {
  background: var(--surface-card);
  width: min(880px, 100%);
  box-shadow: none;
  color: #fff;
  border: 1px solid #ffffff17;
  border-radius: 22px;
  padding: 18px;
}

.profileCropDialog > header {
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  padding: 9px 9px 17px;
  display: flex;
}

.profileCropDialog > header span {
  color: var(--color-accent);
  letter-spacing: .1em;
  font-size: 8px;
}

.profileCropDialog > header h2 {
  letter-spacing: -.015em;
  margin: 7px 0 0;
  font-size: clamp(27px, 4vw, 46px);
  font-weight: 400;
}

.profileCropDialog > header button {
  color: #fff;
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 28px;
}

.profileCropStage {
  background: var(--surface-subcard);
  border-radius: 19px;
  height: min(54vh, 520px);
  position: relative;
  overflow: hidden;
}

.profileCropStage[data-kind="cover"] {
  height: min(40vh, 380px);
}

.profileCropZoom {
  color: #888;
  text-transform: uppercase;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 14px;
  padding: 18px 9px 7px;
  font-size: 9px;
  display: grid;
}

.profileCropZoom input {
  width: 100%;
  accent-color: var(--color-accent);
}

.profileCropDialog > p {
  color: #777;
  margin: 12px 9px 18px;
  font-size: 10px;
  line-height: 1.45;
}

.profileCropDialog > footer {
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.profileCropDialog > footer button {
  color: #fff;
  min-height: 46px;
  font: inherit;
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  border: 1px solid #333;
  border-radius: 99px;
  align-items: center;
  gap: 35px;
  padding: 0 18px;
  font-size: 9px;
  display: flex;
}

.profileCropDialog > footer button:last-child {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.profileCropDialog > footer button:disabled {
  opacity: .5;
  cursor: wait;
}

@media (max-width: 1050px) {
  .profileImageEditorGrid {
    grid-template-columns: 1fr;
  }

  .profileImageEditor[data-kind="cover"] .profileImagePreview {
    width: min(38vw, 310px);
  }
}

@media (max-width: 720px) {
  .profileImageEditor {
    grid-template-columns: 1fr;
  }

  .profileImageEditor[data-kind="cover"] .profileImagePreview {
    width: 100%;
    min-width: 0;
  }

  .profileSocialEditor legend {
    flex-direction: column;
    align-items: start;
  }

  .profileSocialEditor legend small {
    text-align: left;
  }

  .profileSocialEditor > div {
    grid-template-columns: 1fr;
  }

  .profileSocialEditor label {
    grid-template-columns: 34px 62px minmax(0, 1fr);
  }

  .profileCropBackdrop {
    padding: 7px;
  }

  .profileCropDialog {
    border-radius: 21px;
    padding: 10px;
  }

  .profileCropStage {
    height: 52vh;
  }

  .profileCropStage[data-kind="cover"] {
    height: 34vh;
  }

  .profileCropDialog > footer {
    flex-direction: column-reverse;
  }

  .profileCropDialog > footer button {
    justify-content: space-between;
  }
}

.desktopAccount {
  text-align: center;
  border: 1px solid #ffffff3d;
  border-radius: 999px;
  min-width: 76px;
  padding: 8px 14px !important;
}

.desktopNav .desktopAccount:after {
  display: none;
}

.desktopNav .desktopAccount:hover, .desktopNav .desktopAccount:focus-visible, .desktopNav .desktopAccount[aria-current="page"] {
  color: #080808;
  background: #fff;
  border-color: #fff;
}

.accountPage, .legalPage {
  background: var(--surface-card);
}

.accountHero, .legalHero {
  isolation: isolate;
  border: 1px solid #ffffff26;
  border-radius: 46px;
  min-height: 600px;
  position: relative;
  overflow: hidden;
}

.accountGlow, .legalGlow {
  z-index: -1;
  background: radial-gradient(circle,
    #e52100e6 0,
    rgb(var(--color-accent-rgb) / .22) 26%,
    transparent 68%);
  filter: blur(10px);
  border-radius: 50%;
  width: 75vw;
  height: 75vw;
  position: absolute;
  bottom: -50%;
  right: -12vw;
}

.accountHeroCopy, .legalHeroCopy {
  z-index: 2;
  width: min(1050px, 76vw);
  position: absolute;
  bottom: 62px;
  left: 4.3vw;
}

.accountHeroCopy h1, .legalHeroCopy h1 {
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 1100px;
  margin: 22px 0 0;
  font-size: clamp(64px, 7.2vw, 128px);
  font-weight: 350;
  line-height: .86;
}

.accountHeroCopy > p:last-child, .legalHeroCopy > p:last-child {
  color: #ffffffa6;
  max-width: 560px;
  margin: 34px 0 0 16vw;
  font-size: 13px;
  line-height: 1.5;
}

.accountWorkspace {
  color: #070707;
  background: #eeeae4;
  padding: clamp(70px, 8vw, 130px) 4.3vw;
}

.accountLoading {
  letter-spacing: -.015em;
  min-height: 360px;
  font-size: clamp(34px, 4vw, 70px);
}

.accountNotice {
  background: #dffd9a;
  border: 1px solid #0000002e;
  border-radius: 12px;
  margin-bottom: 18px;
  padding: 16px 20px;
  font-size: 12px;
}

.accountNotice.isError {
  background: #ffb6a7;
}

.authPanel {
  grid-template-columns: minmax(230px, .7fr) minmax(420px, 1.5fr);
  gap: 7vw;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
}

.authTabs {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.authTabs button {
  color: #00000073;
  text-align: left;
  letter-spacing: -.015em;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid #0003;
  padding: 20px 0;
  font-size: clamp(20px, 2vw, 34px);
}

.authTabs button[data-active="true"] {
  color: #090909;
}

.authTabs button[data-active="true"]:after {
  content: " ↗";
  color: var(--color-accent);
}

.accountForm {
  flex-direction: column;
  gap: 24px;
  display: flex;
}

.formColumns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  display: grid;
}

.accountField {
  flex-direction: column;
  gap: 9px;
  display: flex;
}

.accountField > span, .deviceCodeField > span {
  color: #0000008f;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
}

.accountField input, .accountField select, .accountField textarea, .deviceCodeField input {
  color: #080808;
  width: 100%;
  min-height: 54px;
  font: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid #00000047;
  border-radius: 0;
  outline: none;
  padding: 13px 0;
  font-size: 18px;
}

.accountField input:focus, .accountField select:focus, .accountField textarea:focus, .deviceCodeField input:focus {
  border-bottom-color: var(--color-accent);
}

.accountField small {
  color: #00000080;
  font-size: 10px;
  line-height: 1.4;
}

.accountForm .button {
  cursor: pointer;
  border: 0;
}

.accountForm .button:disabled, .deviceActions button:disabled, .mfaDangerButton:disabled {
  cursor: wait;
  opacity: .5;
}

.authBackButton {
  color: #000000a6;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid #00000080;
  width: fit-content;
  padding: 0 0 4px;
  font-size: 11px;
}

.legalChecks {
  flex-direction: column;
  gap: 13px;
  margin: 5px 0;
  display: flex;
}

.legalCheck {
  cursor: pointer;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 10px;
  display: grid;
}

.legalCheck input {
  opacity: 0;
  position: absolute;
}

.legalCheck > span {
  border: 1px solid #0000006b;
  border-radius: 4px;
  width: 18px;
  height: 18px;
  position: relative;
}

.legalCheck input:checked + span {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.legalCheck input:checked + span:after {
  content: "✓";
  color: #fff;
  text-align: center;
  font-size: 12px;
  line-height: 17px;
  position: absolute;
  inset: 0;
}

.legalCheck em {
  color: #000000b3;
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
}

.legalCheck a, .accountLegalLink {
  border-bottom: 1px solid;
}

.deleteAccountForm {
  border-top: 1px solid #00000029;
  grid-template-columns: 1fr 150px auto;
  align-items: center;
  gap: 16px;
  margin-top: 42px;
  padding-top: 24px;
  display: grid;
}

.deleteAccountForm p {
  color: #00000085;
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
}

.deleteAccountForm input {
  background: none;
  border: 1px solid #0000004d;
  border-radius: 9px;
  padding: 10px 12px;
}

.deleteAccountForm button {
  color: #9f1f0b;
  cursor: pointer;
  background: none;
  border: 1px solid #9f1f0b;
  border-radius: 999px;
  padding: 11px 15px;
}

.dashboardGrid {
  grid-template-columns: minmax(230px, .55fr) minmax(600px, 1.8fr);
  align-items: start;
  gap: 5vw;
  display: grid;
}

.accountIdentity {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
  position: sticky;
  top: 26px;
}

.accountAvatar {
  background: var(--surface-card);
  width: 110px;
  height: 110px;
  color: var(--color-accent);
  border-radius: 26px;
  place-items: center;
  font-size: 50px;
  font-weight: 500;
  display: grid;
}

.accountIdentity p {
  color: var(--color-accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 24px 0 4px;
  font-size: 10px;
}

.accountIdentity h2 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(38px, 4vw, 70px);
  font-weight: 360;
  line-height: .9;
}

.accountIdentity > span:not(.accountAvatar) {
  color: #0000008c;
  margin-top: 16px;
  font-size: 12px;
}

.accountIdentity button {
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid #111;
  margin-top: 42px;
  padding: 10px 0;
}

.accountSections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.accountCard {
  border: 1px solid #0000002b;
  border-radius: 30px;
  min-height: 370px;
  padding: clamp(22px, 3vw, 40px);
}

.accountCardWide {
  grid-column: 1 / -1;
}

.accountCardHeading {
  justify-content: space-between;
  align-items: start;
  gap: 25px;
  margin-bottom: 46px;
  display: flex;
}

.accountCardHeading span {
  color: var(--color-accent);
  font-size: 10px;
}

.accountCardHeading h2 {
  letter-spacing: -.015em;
  width: 76%;
  margin: 0;
  font-size: clamp(31px, 3vw, 52px);
  font-weight: 360;
  line-height: .9;
}

.accountMuted, .accountHint {
  color: #00000091;
  font-size: 12px;
  line-height: 1.5;
}

.accountHint {
  margin-top: 18px;
  font-size: 10px;
}

.mfaStatusLine {
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  display: flex;
}

.mfaStatusLine span {
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: inline-flex;
}

.mfaStatusLine span:before {
  content: "";
  background: #777;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.mfaStatusLine span[data-enabled="true"]:before {
  background: #3ca33c;
  box-shadow: 0 0 0 5px #3ca33c1f;
}

.mfaStatusLine small {
  color: #00000085;
  font-size: 10px;
}

.mfaCompactForm {
  max-width: 480px;
  margin-top: 32px;
}

.mfaSetupGrid {
  grid-template-columns: 256px minmax(280px, 1fr);
  align-items: start;
  gap: clamp(30px, 5vw, 76px);
  margin-top: 34px;
  display: grid;
}

.mfaQRCode {
  background: #fff;
  border: 1px solid #00000029;
  border-radius: 20px;
  width: 256px;
  height: 256px;
  padding: 10px;
}

.mfaSecret {
  overflow-wrap: anywhere;
  letter-spacing: .08em;
  background: #00000012;
  border-radius: 8px;
  width: fit-content;
  max-width: 100%;
  margin-top: 18px;
  padding: 10px 13px;
  font-size: 12px;
  display: block;
}

.mfaActionGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 72px);
  margin-top: 42px;
  display: grid;
}

.mfaActionGrid h3, .mfaRecoveryBox h3 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: 20px;
  font-weight: 450;
}

.mfaDangerButton {
  color: #a22612;
  cursor: pointer;
  background: none;
  border: 1px solid #a22612;
  border-radius: 999px;
  width: fit-content;
  min-height: 48px;
  padding: 12px 18px;
}

.mfaRecoveryBox {
  border: 1px solid rgb(var(--color-accent-rgb) / .45);
  background: rgb(var(--color-accent-rgb) / .08);
  border-radius: 20px;
  margin-top: 42px;
  padding: clamp(20px, 3vw, 34px);
}

.mfaRecoveryBox p {
  color: #0000009e;
  max-width: 680px;
  font-size: 11px;
  line-height: 1.5;
}

.mfaRecoveryBox > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 22px;
  margin: 22px 0;
  display: grid;
}

.mfaRecoveryBox code {
  letter-spacing: .04em;
  font-size: 13px;
}

.mfaRecoveryBox button {
  background: var(--surface-subcard);
  color: #fff;
  cursor: pointer;
  border: 1px solid #111;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 10px;
}

.steamButton, .deviceActions button, .steamProfile button {
  background: var(--surface-card);
  color: #fff;
  cursor: pointer;
  border: 1px solid #111;
  border-radius: 999px;
  margin-top: 22px;
  padding: 12px 18px;
}

.steamProfile {
  align-items: center;
  gap: 13px;
  display: flex;
}

.steamProfile img {
  border-radius: 12px;
}

.steamProfile div {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  display: flex;
}

.steamProfile div span {
  color: #00000080;
  font-size: 9px;
}

.steamProfile button {
  color: #111;
  background: none;
  margin: 0;
  padding: 8px 12px;
  font-size: 9px;
}

.deviceCodeField {
  margin-top: 30px;
  display: block;
}

.deviceCodeField input {
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 28px;
}

.deviceActions {
  gap: 8px;
  display: flex;
}

.deviceActions button:last-child {
  color: #111;
  background: none;
}

.sessionList {
  flex-direction: column;
  display: flex;
}

.sessionList article {
  border-top: 1px solid #00000029;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  display: flex;
}

.sessionList article div {
  flex: 1;
  grid-template-columns: minmax(100px, .35fr) minmax(200px, 1fr) minmax(130px, .4fr);
  align-items: center;
  gap: 20px;
  display: grid;
}

.sessionList span, .sessionList small {
  color: #0000008c;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.sessionList button {
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid #111;
  font-size: 10px;
}

.dataRequestForm {
  grid-template-columns: .55fr 1fr;
  align-items: end;
  display: grid;
}

.dataRequestForm .button, .dataRequestForm .accountLegalLink {
  width: fit-content;
}

.accountLegalLink {
  color: #000000a6;
  font-size: 10px;
}

.legalHero {
  min-height: 690px;
}

.legalHeroCopy .innerBreadcrumb {
  margin-bottom: 36px;
}

.legalHeroCopy h1 {
  max-width: 1200px;
  font-size: clamp(58px, 6.5vw, 112px);
}

.legalLayout {
  color: #070707;
  background: #f1efea;
  grid-template-columns: minmax(230px, .6fr) minmax(600px, 1.65fr);
  gap: 8vw;
  padding: clamp(80px, 9vw, 150px) 4.3vw;
  display: grid;
}

.legalSidebar {
  flex-direction: column;
  height: fit-content;
  display: flex;
  position: sticky;
  top: 30px;
}

.legalSidebar > span {
  color: #0000006b;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-size: 9px;
}

.legalSidebar a {
  color: #00000085;
  border-top: 1px solid #0000002b;
  padding: 13px 0;
  font-size: 12px;
}

.legalSidebar a[aria-current="page"] {
  color: #090909;
}

.legalSidebar a[aria-current="page"]:after {
  content: " ↗";
  color: var(--color-accent);
}

.legalDocument {
  max-width: 900px;
}

.legalDocument > header {
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid #00000047;
  justify-content: space-between;
  margin-bottom: 75px;
  padding-bottom: 18px;
  font-size: 10px;
  display: flex;
}

.legalDocument > header span {
  color: #00000073;
}

.legalDocument section {
  margin-bottom: 70px;
}

.legalDocument h2 {
  letter-spacing: -.015em;
  margin: 0 0 24px;
  font-size: clamp(32px, 3.4vw, 56px);
  font-weight: 370;
  line-height: .96;
}

.legalDocument p, .legalDocument li {
  color: #000000ab;
  font-size: 14px;
  line-height: 1.72;
}

.legalDocument ul {
  margin: 22px 0 0;
  padding-left: 20px;
}

.footerLegalNav {
  border-top: 1px solid #ffffff29;
  border-bottom: 1px solid #ffffff29;
  flex-wrap: wrap;
  gap: 14px clamp(24px, 2.4vw, 46px);
  margin-top: clamp(42px, 4vw, 68px);
  padding: 30px 0;
  display: flex;
}

.footerLegalNav a {
  color: #ffffff8a;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 9px;
}

.footerLegalNav a:hover {
  color: #fff;
}

.cookieNotice {
  z-index: 1000;
  background: rgb(var(--surface-card-rgb) / .96);
  color: #fff;
  width: min(390px, 100vw - 36px);
  box-shadow: none;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid #ffffff17;
  border-radius: 18px;
  padding: 17px;
  position: fixed;
  bottom: 18px;
  right: 18px;
}

.cookieNotice > span {
  color: var(--color-accent);
  letter-spacing: .08em;
  font-size: 9px;
}

.cookieNotice p {
  color: #ffffff94;
  margin: 11px 0 14px;
  font-size: 10px;
  line-height: 1.5;
}

.cookieNotice div {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.cookieNotice button {
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  min-height: 38px;
  font: inherit;
  border: 0;
  border-radius: 11px;
  padding: 8px 13px;
  font-size: 10px;
  font-weight: 650;
}

.cookieNotice button.secondary {
  background: var(--surface-subcard);
  color: #ffffffd1;
}

.cookieNotice a {
  color: #ffffffb3;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  font-size: 10px;
  display: inline-flex;
}

.cookieNotice a svg {
  width: 12px;
  height: 12px;
}

.adminAnalytics {
  gap: 8px;
  display: grid;
}

.adminAnalyticsLoading {
  background: var(--surface-subcard);
  color: #ffffff94;
  border-radius: 28px;
  place-items: center;
  min-height: 280px;
  padding: 40px;
  font-size: 12px;
  display: grid;
}

.adminAnalyticsHero {
  background: radial-gradient(circle at 82% 28%,
      rgb(var(--color-accent-rgb) / .86),
      transparent 29%),
    linear-gradient(125deg, var(--surface-card) 12%, #351107 62%, #8e1d00);
  border-radius: 30px;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  min-height: 280px;
  padding: clamp(30px, 4vw, 58px);
  display: flex;
  overflow: hidden;
}

.adminAnalyticsHero p, .adminAnalyticsPreview > p {
  color: #ffffff75;
  letter-spacing: .09em;
  margin: 0;
  font-size: 8px;
}

.adminAnalyticsHero h2 {
  color: #fff;
  letter-spacing: -.035em;
  margin: 24px 0 0;
  font-size: clamp(54px, 6vw, 94px);
  font-weight: 330;
  line-height: .9;
}

.adminAnalyticsHero > div:first-child > span {
  color: #ffffff9e;
  max-width: 520px;
  margin-top: 24px;
  font-size: 11px;
  line-height: 1.55;
  display: block;
}

.adminAnalyticsHero > div:last-child {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #0006;
  border-radius: 18px;
  gap: 10px;
  min-width: 180px;
  padding: 22px;
  display: grid;
}

.adminAnalyticsHero > div:last-child i {
  background: #777;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 6px #ffffff0f;
}

.adminAnalyticsHero > div:last-child[data-active="true"] i {
  background: #a9f52d;
  box-shadow: 0 0 0 6px #a9f52d1f, 0 0 24px #a9f52d73;
}

.adminAnalyticsHero > div:last-child strong {
  color: #fff;
  font-size: 13px;
}

.adminAnalyticsHero > div:last-child small {
  color: #ffffff6b;
  font-size: 8px;
}

.adminAnalyticsGrid {
  grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr);
  gap: 8px;
  display: grid;
}

.adminAnalyticsGrid > form, .adminAnalyticsPreview {
  border-radius: 30px;
  padding: clamp(28px, 3.6vw, 52px);
}

.adminAnalyticsGrid > form {
  background: var(--surface-subcard);
}

.adminAnalyticsCounter {
  gap: 11px;
  display: grid;
}

.adminAnalyticsCounter > span {
  color: #ffffff94;
  text-transform: uppercase;
  font-size: 9px;
}

.adminAnalyticsCounter input {
  background: var(--surface-subcard);
  color: #fff;
  width: 100%;
  min-height: 58px;
  font: inherit;
  border: 0;
  border-radius: 13px;
  outline: none;
  padding: 0 18px;
  font-size: 15px;
}

.adminAnalyticsCounter small, .adminFormHint {
  color: #ffffff59;
  font-size: 8px;
  line-height: 1.45;
}

.adminAnalyticsSwitches {
  gap: 5px;
  margin: 28px 0;
  display: grid;
}

.adminAnalyticsSwitches > label {
  cursor: pointer;
  background: #ffffff09;
  border-radius: 15px;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  padding: 15px 17px;
  display: grid;
}

.adminAnalyticsSwitches input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.adminAnalyticsSwitches > label > span {
  background: var(--surface-subcard-hover);
  border-radius: 999px;
  width: 40px;
  height: 23px;
  transition: all .2s;
  position: relative;
}

.adminAnalyticsSwitches > label > span i {
  background: #777;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  transition: all .2s;
  position: absolute;
  top: 4px;
  left: 4px;
}

.adminAnalyticsSwitches input:checked + span {
  background: var(--color-accent);
}

.adminAnalyticsSwitches input:checked + span i {
  background: #fff;
  left: 21px;
}

.adminAnalyticsSwitches > label > div {
  grid-template-columns: 30px 1fr;
  gap: 2px 10px;
  display: grid;
}

.adminAnalyticsSwitches small {
  color: var(--color-accent);
  grid-row: 1 / 3;
  font-size: 7px;
}

.adminAnalyticsSwitches strong {
  color: #fff;
  font-size: 11px;
}

.adminAnalyticsSwitches p {
  color: #ffffff61;
  grid-column: 2;
  margin: 4px 0 0;
  font-size: 8px;
  line-height: 1.45;
}

.adminAnalyticsGrid form > .adminButton {
  margin-top: 24px;
}

.adminAnalyticsPreview {
  color: #0b0b0b;
  background: #f0eee8;
  flex-direction: column;
  display: flex;
}

.adminAnalyticsPreview > p {
  color: #0000006b;
}

.adminAnalyticsPreview > strong {
  letter-spacing: -.045em;
  margin: 24px 0 52px;
  font-size: clamp(48px, 5vw, 78px);
  font-weight: 360;
  display: block;
}

.adminAnalyticsPreview > div {
  border-top: 1px solid #0000001a;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 0;
  font-size: 9px;
  display: flex;
}

.adminAnalyticsPreview > div span {
  color: #00000073;
}

.adminAnalyticsPreview > div b {
  text-align: right;
  font-weight: 600;
}

.adminAnalyticsPreview > a {
  background: var(--surface-card);
  color: #fff;
  text-transform: uppercase;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  min-height: 54px;
  margin-top: auto;
  padding: 0 18px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.adminAnalyticsPreview > a i {
  color: var(--color-accent);
  font-size: 16px;
  font-style: normal;
}

@media (max-width: 980px) {
  .adminAnalyticsHero {
    flex-direction: column;
    align-items: start;
  }

  .adminAnalyticsHero > div:last-child {
    width: 100%;
    min-width: 0;
  }

  .adminAnalyticsGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .cookieNotice {
    width: calc(100vw - 20px);
    padding: 15px;
    bottom: 10px;
    right: 10px;
  }

  .cookieNotice div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    display: grid;
  }

  .cookieNotice button {
    width: 100%;
    min-height: 40px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .cookieNotice a {
    text-align: center;
    grid-column: 1 / -1;
    justify-content: center;
    margin: 4px 0 0;
  }

  .adminAnalyticsHero, .adminAnalyticsGrid > form, .adminAnalyticsPreview {
    border-radius: 22px;
    padding: 24px;
  }
}

@media (max-width: 900px) {
  .accountHero, .legalHero {
    border-radius: 28px;
    min-height: 660px;
  }

  .accountHeroCopy, .legalHeroCopy {
    width: calc(100% - 48px);
    bottom: 45px;
    left: 24px;
  }

  .accountHeroCopy > p:last-child, .legalHeroCopy > p:last-child {
    max-width: 440px;
    margin-left: 0;
  }

  .authPanel, .dashboardGrid, .legalLayout {
    grid-template-columns: 1fr;
  }

  .authTabs {
    flex-direction: row;
    gap: 18px;
    overflow-x: auto;
  }

  .authTabs button {
    flex: none;
  }

  .accountIdentity, .legalSidebar {
    position: static;
  }

  .mfaSetupGrid {
    grid-template-columns: 220px minmax(260px, 1fr);
  }

  .mfaQRCode {
    width: 220px;
    height: 220px;
  }

  .legalSidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .legalSidebar > span {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .accountWorkspace, .legalLayout {
    padding-left: 20px;
    padding-right: 20px;
  }

  .formColumns, .accountSections, .dataRequestForm, .deleteAccountForm, .mfaSetupGrid, .mfaActionGrid {
    grid-template-columns: 1fr;
  }

  .mfaQRCode {
    width: min(256px, 100%);
    height: auto;
  }

  .mfaRecoveryBox > div {
    grid-template-columns: 1fr;
  }

  .accountCardWide {
    grid-column: auto;
  }

  .accountCard {
    border-radius: 22px;
    min-height: 0;
  }

  .sessionList article div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .legalSidebar {
    grid-template-columns: 1fr;
  }

  .footerLegalNav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }
}

.gameServerGrid[data-count="1"] {
  grid-template-columns: 1fr;
}

.gameServerGrid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gameServerGrid[data-count="1"] .gameServerCard {
  min-height: min(780px, 74vw);
}

.gameServerCard {
  isolation: isolate;
  position: relative;
}

.gameServerCardMedia {
  z-index: -2;
  position: absolute;
  inset: 0;
}

.gameServerCardMedia img {
  object-fit: cover;
  object-position: center;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.gameServerCardMedia span {
  background: linear-gradient(#00000047, #00000014 40%, #000000f2), linear-gradient(90deg, #00000059, #0000 55%);
  position: absolute;
  inset: 0;
}

.gameServerCard:hover .gameServerCardMedia img {
  transform: scale(1.025);
}

.gameServerCardTop, .gameServerCardCopy, .gameServerCardBottom {
  z-index: 1;
  position: relative;
}

.gameServerGrid[data-count="1"] .gameServerCardCopy h3 {
  font-size: clamp(72px, 10vw, 170px);
}

.gameServerGrid[data-count="1"] .gameServerCardCopy > span {
  max-width: 560px;
  font-size: 14px;
}

.serverTagline {
  color: #fff;
  letter-spacing: -.015em;
  max-width: 760px;
  margin: 24px 0 0 6vw;
  font-size: clamp(24px, 2.2vw, 40px);
  font-weight: 390;
  line-height: 1;
  display: block;
}

.astraStorySection {
  background: radial-gradient(circle at 88% 5%,
      rgb(var(--color-accent-rgb) / .5),
      #730c002e 25%,
      transparent 52%),
    var(--surface-card);
  color: #f7f5f2;
  padding: clamp(110px, 11vw, 190px) 4.3vw;
}

.astraStoryIntro, .astraGalleryHeading, .astraFaqHeading {
  grid-template-columns: minmax(130px, .55fr) minmax(500px, 2fr) minmax(250px, .8fr);
  align-items: start;
  gap: 5vw;
  display: grid;
}

.astraStoryIntro .sectionEyebrow, .astraGalleryHeading .sectionEyebrow {
  color: #ffffff7a;
}

.astraStoryIntro h2, .astraGalleryHeading h2, .astraFaqHeading h2 {
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 1080px;
  margin: 0;
  font-size: clamp(58px, 7vw, 118px);
  font-weight: 360;
  line-height: .84;
}

.astraStoryIntro > div > p, .astraGalleryHeading > p:last-child {
  color: #ffffff9e;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.48;
}

.astraStoryIntro > div > a {
  color: #ffffffc2;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid #ffffff61;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding-bottom: 7px;
  font-size: 10px;
  display: inline-flex;
}

.astraPhysicsGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 110px;
  display: grid;
}

.astraPhysicsGrid article {
  background: #ffffff06;
  border: 1px solid #ffffff2b;
  border-radius: 30px;
  flex-direction: column;
  min-height: 430px;
  padding: 28px;
  display: flex;
  overflow: hidden;
}

.astraPhysicsGrid article:nth-child(2) {
  background: linear-gradient(148deg,
    var(--color-accent),
    #d31d00 51%,
    #610000);
}

.astraPhysicsGrid article > span {
  color: #ffffff7a;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 9px;
}

.astraPhysicsGrid strong {
  letter-spacing: -.015em;
  margin: auto 0 0;
  font-size: clamp(56px, 6.2vw, 104px);
  font-weight: 340;
  line-height: .78;
}

.astraPhysicsGrid p {
  color: #ffffff9e;
  max-width: 340px;
  margin: 30px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.astraGallerySection {
  background: var(--surface-card);
  color: #f7f5f2;
  padding: clamp(110px, 11vw, 190px) 4.3vw;
}

.astraGalleryGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
  margin-top: 100px;
  display: grid;
}

.astraGalleryCard {
  background: var(--surface-subcard);
  border: 1px solid #ffffff29;
  border-radius: 30px;
  margin: 0;
  overflow: hidden;
}

.astraGalleryCardFeatured {
  grid-column: 1 / -1;
}

.astraGalleryImageFrame {
  background: var(--surface-card);
  overflow: hidden;
}

.astraGalleryImage {
  width: 100%;
  height: auto;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
  display: block;
}

.astraGalleryCard:hover .astraGalleryImage {
  transform: scale(1.015);
}

.astraGalleryCard figcaption {
  grid-template-columns: minmax(100px, .45fr) minmax(260px, 1fr);
  align-items: start;
  gap: 3vw;
  padding: 27px;
  display: grid;
}

.astraGalleryCard figcaption > span {
  color: #ffffff70;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 9px;
}

.astraGalleryCard h3 {
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(32px, 3.1vw, 56px);
  font-weight: 370;
  line-height: .9;
}

.astraGalleryCard figcaption > p {
  color: #ffffff94;
  grid-column: 2;
  max-width: 530px;
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.astraGalleryCardFeatured figcaption {
  grid-template-columns: minmax(130px, .55fr) minmax(480px, 2fr) minmax(260px, .8fr);
  gap: 5vw;
}

.astraGalleryCardFeatured figcaption > p {
  grid-column: 3;
}

.astraFaqSection {
  color: #070707;
  background: #f1efea;
  padding: clamp(110px, 11vw, 190px) 4.3vw;
}

.astraFaqHeading .sectionEyebrow {
  color: #00000075;
}

.astraFaqList {
  border-top: 1px solid #0003;
  margin: 100px 0 0 calc(24% + 5vw);
}

.astraFaqList details {
  border-bottom: 1px solid #0003;
}

.astraFaqList summary {
  cursor: pointer;
  grid-template-columns: 60px 1fr 30px;
  align-items: center;
  gap: 28px;
  padding: 34px 0;
  list-style: none;
  display: grid;
}

.astraFaqList summary::-webkit-details-marker {
  display: none;
}

.astraFaqList summary > span {
  color: #0000006b;
  font-size: 10px;
}

.astraFaqList summary strong {
  letter-spacing: -.015em;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 380;
  line-height: .95;
}

.astraFaqList summary i {
  font-size: 25px;
  font-style: normal;
  font-weight: 300;
  transition: transform .2s;
}

.astraFaqList details[open] summary i {
  transform: rotate(45deg);
}

.astraFaqList details > p {
  color: #0000009e;
  max-width: 700px;
  margin: -8px 60px 34px 88px;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .astraStoryIntro, .astraGalleryHeading, .astraFaqHeading, .astraGalleryCardFeatured figcaption {
    grid-template-columns: 150px minmax(460px, 1fr);
  }

  .astraStoryIntro > div, .astraGalleryHeading > p:last-child, .astraGalleryCardFeatured figcaption > p {
    grid-column: 2;
    max-width: 620px;
  }

  .astraFaqList {
    margin-left: 200px;
  }
}

@media (max-width: 920px) {
  .serverTagline {
    margin-left: 0;
  }

  .astraStoryIntro, .astraGalleryHeading, .astraFaqHeading, .astraGalleryCardFeatured figcaption {
    grid-template-columns: 1fr;
  }

  .astraStoryIntro > div, .astraGalleryHeading > p:last-child, .astraGalleryCardFeatured figcaption > p {
    grid-column: auto;
  }

  .astraStoryIntro h2, .astraGalleryHeading h2, .astraFaqHeading h2 {
    margin-top: 18px;
  }

  .astraPhysicsGrid, .astraGalleryGrid {
    grid-template-columns: 1fr;
  }

  .astraPhysicsGrid article {
    min-height: 330px;
  }

  .astraGalleryCardFeatured {
    grid-column: auto;
  }

  .astraGalleryCardFeatured figcaption > p {
    grid-column: 1;
  }

  .astraFaqList {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .gameServerGrid[data-count="1"] .gameServerCard {
    min-height: 560px;
  }

  .gameServerGrid[data-count="1"] .gameServerCardCopy h3 {
    font-size: clamp(68px, 22vw, 96px);
  }

  .serverTagline {
    margin-top: 18px;
    font-size: 23px;
  }

  .astraStorySection, .astraGallerySection, .astraFaqSection {
    padding: 82px 20px;
  }

  .astraStoryIntro h2, .astraGalleryHeading h2, .astraFaqHeading h2 {
    font-size: clamp(47px, 13.5vw, 68px);
  }

  .astraPhysicsGrid, .astraGalleryGrid, .astraFaqList {
    margin-top: 58px;
  }

  .astraPhysicsGrid article, .astraGalleryCard {
    border-radius: 22px;
  }

  .astraPhysicsGrid article {
    min-height: 290px;
    padding: 23px;
  }

  .astraGalleryCard figcaption, .astraGalleryCardFeatured figcaption {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 22px;
  }

  .astraGalleryCard figcaption > p, .astraGalleryCardFeatured figcaption > p {
    grid-column: 1;
  }

  .astraGalleryCard h3 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .astraFaqList summary {
    grid-template-columns: 32px 1fr 22px;
    gap: 12px;
    padding: 27px 0;
  }

  .astraFaqList summary strong {
    font-size: 27px;
  }

  .astraFaqList details > p {
    margin: -2px 22px 28px 44px;
    font-size: 13px;
  }
}

.accountPage {
  background: var(--surface-subcard);
}

.accountHero {
  isolation: isolate;
  background: radial-gradient(circle at 78% 62%,
      rgb(var(--color-accent-rgb) / .25),
      transparent 27%),
    linear-gradient(135deg, var(--surface-card), #020202 62%);
  border: 1px solid #ffffff26;
  border-radius: 46px;
  height: calc(100svh - 16px);
  min-height: 760px;
  position: relative;
  overflow: hidden;
}

.accountHero:after {
  z-index: 12;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  border: 1px solid #ffffff0a;
  position: absolute;
  inset: 0;
}

.accountHero .accountGlow {
  z-index: -1;
  background: radial-gradient(circle,
    var(--color-accent) 0,
    #e82300ad 24%,
    #7b000047 48%,
    transparent 70%);
  filter: blur(4px);
  width: 88vw;
  height: 88vw;
  bottom: -78%;
  right: -12vw;
}

.accountHeroCopy {
  z-index: 6;
  width: min(760px, 57vw);
  position: absolute;
  bottom: clamp(72px, 9vh, 120px);
  left: 4.3vw;
}

.accountHeroCopy .sectionEyebrow {
  color: #ffffff8f;
  margin: 0 0 26px;
}

.accountHeroCopy h1 {
  letter-spacing: -.015em;
  text-wrap: nowrap;
  flex-direction: column;
  max-width: none;
  margin: 0;
  font-size: clamp(88px, 11.8vw, 210px);
  font-weight: 330;
  line-height: .69;
  display: flex;
}

.accountHeroCopy h1 span:last-child {
  color: var(--color-accent);
  margin-left: 33%;
}

.accountHeroCopy > p:last-child {
  color: #ffffffa6;
  max-width: 470px;
  margin: 48px 0 0 34%;
  font-size: 13px;
  line-height: 1.48;
}

.accountHeroCharacter {
  z-index: 3;
  opacity: .7;
  filter: saturate(.82) contrast(1.08);
  pointer-events: none;
  width: min(48vw, 780px);
  height: 92%;
  position: absolute;
  bottom: -7%;
  right: 7vw;
}

.accountHeroCharacter img {
  object-fit: contain;
  object-position: center bottom;
  -webkit-mask-image: linear-gradient(#000 68%, #0000 100%);
  mask-image: linear-gradient(#000 68%, #0000 100%);
}

.accountHeroIdCard {
  z-index: 8;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #05050585;
  border: 1px solid #ffffff38;
  border-radius: 26px;
  flex-direction: column;
  width: min(300px, 22vw);
  min-height: 250px;
  padding: 22px;
  display: flex;
  position: absolute;
  top: 21%;
  right: 3.5vw;
  box-shadow: 0 28px 80px #00000040;
}

.accountHeroIdCard > div {
  color: #ffffff85;
  letter-spacing: .07em;
  justify-content: space-between;
  font-size: 9px;
  display: flex;
}

.accountHeroIdCard i {
  color: #fff;
  font-size: 16px;
  font-style: normal;
}

.accountHeroIdCard p {
  color: #ffffff87;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: auto 0 14px;
  font-size: 9px;
}

.accountHeroIdCard strong {
  letter-spacing: -.015em;
  max-width: 230px;
  font-size: clamp(30px, 2.7vw, 46px);
  font-weight: 360;
  line-height: .88;
}

.accountHeroIdCard small {
  color: #ffffff75;
  letter-spacing: .04em;
  margin-top: 20px;
  font-size: 8px;
}

.accountHeroWord {
  z-index: 1;
  color: #ffffff0b;
  letter-spacing: -.015em;
  pointer-events: none;
  font-size: clamp(120px, 18vw, 330px);
  font-weight: 600;
  line-height: .7;
  position: absolute;
  bottom: -.08em;
  right: -.5vw;
}

.accountDeviceHero .accountHeroCopy h1 {
  white-space: normal;
  max-width: 1050px;
  font-size: clamp(70px, 8vw, 132px);
  line-height: .84;
  display: block;
}

.accountWorkspace {
  background: var(--surface-card);
  color: #f6f3ef;
  padding: clamp(90px, 9vw, 150px) 4.3vw;
}

.accountNotice {
  z-index: 3;
  color: #080808;
  background: #baff45;
  border-color: #ffffff2e;
  border-radius: 18px;
  max-width: 1180px;
  margin: 0 auto 18px;
  position: relative;
}

.accountNotice.isError {
  background: var(--color-accent);
  color: #fff;
}

.accountLoading {
  background: radial-gradient(circle at 75% 20%,
      rgb(var(--color-accent-rgb) / .35),
      transparent 34%),
    var(--surface-card);
  color: #fff;
  text-align: center;
  border: 1px solid #ffffff26;
  border-radius: 38px;
  place-items: center;
  min-height: 620px;
  font-size: clamp(44px, 6vw, 94px);
  display: grid;
}

.maralysIdAuth {
  grid-template-columns: minmax(430px, .93fr) minmax(520px, 1.07fr);
  gap: 8px;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
}

.idManifesto, .authPanel {
  border-radius: 38px;
  min-height: 810px;
  overflow: hidden;
}

.idManifesto {
  background: radial-gradient(circle at 86% 22%,
      rgb(var(--color-accent-rgb) / .7),
      #c41a0038 26%,
      transparent 52%),
    linear-gradient(160deg, #15100d, var(--surface-card) 54%);
  border: 1px solid #ffffff29;
  flex-direction: column;
  padding: clamp(28px, 3.2vw, 50px);
  display: flex;
  position: relative;
}

.idManifesto:after {
  aspect-ratio: 1;
  content: "";
  border: 1px solid #ffffff1f;
  border-radius: 50%;
  width: 70%;
  position: absolute;
  bottom: -20%;
  right: -26%;
  box-shadow: 0 0 0 55px #ffffff06, 0 0 0 110px #ffffff05;
}

.idManifestoTop, .authPanelTop {
  z-index: 2;
  color: #ffffff7a;
  letter-spacing: .07em;
  text-transform: uppercase;
  justify-content: space-between;
  gap: 20px;
  font-size: 9px;
  display: flex;
  position: relative;
}

.idOnline {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.idOnline i, .accountIdentityStatus i {
  background: #baff45;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 4px #baff451f;
}

.idGlyph {
  z-index: 2;
  border: 1px solid #fff3;
  border-radius: 50%;
  width: clamp(230px, 25vw, 390px);
  height: clamp(230px, 25vw, 390px);
  margin: clamp(50px, 7vh, 82px) auto 0;
  position: relative;
  transform: rotate(-8deg);
}

.idGlyph:before, .idGlyph:after {
  content: "";
  border: 1px solid #ffffff1a;
  border-radius: 50%;
  position: absolute;
  inset: 9%;
}

.idGlyph:after {
  background: var(--color-accent);
  box-shadow: 0 0 85px rgb(var(--color-accent-rgb) / .58);
  border: 0;
  inset: 25%;
}

.idGlyph span, .idGlyph strong {
  z-index: 2;
  letter-spacing: -.015em;
  font-weight: 430;
  line-height: 1;
  position: absolute;
}

.idGlyph span {
  font-size: clamp(62px, 7vw, 115px);
  top: 25%;
  left: 14%;
}

.idGlyph strong {
  color: #050505;
  font-size: clamp(60px, 6.8vw, 110px);
  bottom: 22%;
  right: 10%;
}

.idGlyph > i {
  z-index: 3;
  color: #ffffff8c;
  font-size: 10px;
  font-style: normal;
  position: absolute;
  top: 16%;
  right: 4%;
}

.idManifestoCopy {
  z-index: 2;
  grid-template-columns: .7fr 1.3fr;
  align-items: end;
  gap: 35px;
  margin-top: auto;
  display: grid;
  position: relative;
}

.idManifestoCopy p {
  color: #ffffff94;
  margin: 0;
  font-size: 11px;
  line-height: 1.48;
}

.idManifestoCopy h2 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(38px, 4vw, 64px);
  font-weight: 350;
  line-height: .88;
}

.idFeatureGrid {
  z-index: 2;
  border-top: 1px solid #ffffff29;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 38px;
  display: grid;
  position: relative;
}

.idFeatureGrid article {
  min-width: 0;
  padding: 18px 12px 0 0;
}

.idFeatureGrid article + article {
  border-left: 1px solid #ffffff29;
  padding-left: 14px;
}

.idFeatureGrid span {
  color: #ffffff61;
  font-size: 8px;
}

.idFeatureGrid strong {
  letter-spacing: -.015em;
  margin-top: 22px;
  font-size: clamp(25px, 2.6vw, 43px);
  font-weight: 400;
  display: block;
}

.idFeatureGrid p {
  color: #ffffff7a;
  text-transform: uppercase;
  margin: 6px 0 0;
  font-size: 8px;
  line-height: 1.35;
}

.authPanel {
  color: #070707;
  background: #eeebe5;
  flex-direction: column;
  gap: 0;
  max-width: none;
  margin: 0;
  padding: clamp(28px, 3.2vw, 50px);
  display: flex;
}

.authPanelTop {
  color: #00000070;
}

.authTabs {
  border-top: 1px solid #00000029;
  border-bottom: 1px solid #00000029;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(42px, 6vh, 68px);
  display: grid;
}

.authTabs button {
  color: #0000006b;
  letter-spacing: .01em;
  background: none;
  border: 0;
  border-right: 1px solid #00000021;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
  padding: 17px 13px 18px;
  font-size: 10px;
  line-height: 1.2;
  display: flex;
}

.authTabs button:last-child {
  border-right: 0;
}

.authTabs button span {
  color: #00000057;
  font-size: 8px;
}

.authTabs button[data-active="true"] {
  background: var(--surface-card);
  color: #fff;
}

.authTabs button[data-active="true"] span {
  color: var(--color-accent);
}

.authTabs button[data-active="true"]:after {
  display: none;
}

.authFormFrame {
  flex-direction: column;
  flex: 1;
  justify-content: center;
  width: min(100%, 680px);
  margin: clamp(46px, 7vh, 80px) auto;
  display: flex;
}

.authFormHeading {
  grid-template-columns: 46px 1fr;
  align-items: start;
  gap: 20px;
  margin-bottom: clamp(42px, 6vh, 68px);
  display: grid;
}

.authFormHeading > span {
  color: var(--color-accent);
  padding-top: 8px;
  font-size: 9px;
}

.authFormHeading h2 {
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 560px;
  margin: 0;
  font-size: clamp(48px, 5vw, 82px);
  font-weight: 350;
  line-height: .86;
}

.authFormFrame .accountForm {
  gap: 21px;
  padding-left: 66px;
}

.authFormFrame .accountField > span {
  color: #0000007a;
}

.authFormFrame .accountField input {
  border-bottom-color: #00000045;
  min-height: 56px;
  padding: 14px 0;
  font-size: 19px;
}

.authFormFrame .accountForm .buttonPrimary {
  width: 100%;
  max-width: none;
  min-height: 58px;
  margin-top: 8px;
  padding: 8px 8px 8px 22px;
}

.authFormFrame .accountForm .buttonPrimary span:last-child {
  color: #080808;
  background: #fff;
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
}

.authFormFrame .registerForm {
  gap: 17px;
}

.authFormFrame .legalChecks {
  gap: 9px;
}

.authFormFrame .legalCheck em {
  font-size: 9px;
}

.authBackButton {
  color: #0009;
}

.authPanelFooter {
  color: #0000006b;
  letter-spacing: .06em;
  border-top: 1px solid #00000029;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: end;
  gap: 28px;
  padding-top: 18px;
  font-size: 8px;
  display: grid;
}

.authPanelFooter p {
  letter-spacing: 0;
  max-width: 420px;
  margin: 0 auto;
  font-size: 9px;
  line-height: 1.45;
}

.dashboardGrid {
  grid-template-columns: minmax(270px, .46fr) minmax(680px, 1.54fr);
  align-items: start;
  gap: 8px;
  max-width: 1550px;
  margin: 0 auto;
  display: grid;
}

.accountIdentity {
  background: radial-gradient(circle at 82% 4%,
      rgb(var(--color-accent-rgb) / .9),
      #ab150047 31%,
      transparent 57%),
    #0f0b09;
  color: #fff;
  border: 1px solid #ffffff29;
  border-radius: 34px;
  flex-direction: column;
  align-items: flex-start;
  min-height: 620px;
  padding: clamp(25px, 2.5vw, 38px);
  display: flex;
  position: sticky;
  top: 18px;
  overflow: hidden;
}

.accountIdentity:after {
  aspect-ratio: 1;
  content: "";
  border: 1px solid #ffffff1f;
  border-radius: 50%;
  width: 95%;
  position: absolute;
  bottom: -15%;
  right: -40%;
  box-shadow: 0 0 0 44px #ffffff06, 0 0 0 88px #ffffff04;
}

.accountIdentityTop {
  z-index: 2;
  color: #ffffff80;
  letter-spacing: .06em;
  justify-content: space-between;
  width: 100%;
  font-size: 8px;
  display: flex;
  position: relative;
}

.accountAvatar {
  z-index: 2;
  background: var(--color-accent);
  color: #070707;
  width: 132px;
  height: 132px;
  box-shadow: 0 0 65px rgb(var(--color-accent-rgb) / .35);
  border: 1px solid #ffffff38;
  border-radius: 50%;
  place-items: center;
  margin-top: clamp(70px, 9vh, 110px);
  display: grid;
  position: relative;
}

.accountAvatar i {
  letter-spacing: -.015em;
  font-size: 60px;
  font-style: normal;
  font-weight: 470;
}

.accountAvatar small {
  background: #fff;
  border: 4px solid #21100a;
  border-radius: 50%;
  place-items: center;
  width: 37px;
  height: 37px;
  font-size: 9px;
  display: grid;
  position: absolute;
  bottom: 9px;
  right: -9px;
}

.accountIdentity p {
  z-index: 2;
  color: var(--color-accent);
  margin: 30px 0 8px;
  position: relative;
}

.accountIdentity h2 {
  z-index: 2;
  color: #fff;
  overflow-wrap: anywhere;
  max-width: 100%;
  font-size: clamp(44px, 4.2vw, 72px);
  position: relative;
}

.accountIdentityEmail {
  z-index: 2;
  position: relative;
  color: #ffffff8a !important;
}

.accountIdentityStatus {
  z-index: 2;
  color: #ffffffb8;
  letter-spacing: .06em;
  text-transform: uppercase;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-size: 9px;
  display: flex;
  position: relative;
}

.accountIdentity button, .accountAdminLink {
  z-index: 2;
  color: #ffffffb8;
  border-top: 1px solid #fff3;
  border-bottom: 0;
  justify-content: space-between;
  width: 100%;
  padding: 15px 0;
  display: flex;
  position: relative;
}

.accountAdminLink {
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: auto;
  font-size: 9px;
  text-decoration: none;
}

.accountAdminLink strong {
  color: var(--color-accent);
  font-size: inherit;
  font-weight: 500;
}

.accountIdentity button {
  margin-top: 0;
}

.accountIdentity button span {
  color: #fff;
}

.accountDashboard {
  min-width: 0;
}

.idOverview {
  background: radial-gradient(circle at 88% 20%,
      var(--color-accent),
      #db2100 25%,
      #4a0500 51%,
      transparent 70%),
    #0b0503;
  color: #fff;
  border: 1px solid #ffffff26;
  border-radius: 34px;
  min-height: 480px;
  padding: clamp(28px, 4vw, 58px);
  position: relative;
  overflow: hidden;
}

.idOverviewCopy {
  z-index: 2;
  max-width: 720px;
  position: relative;
}

.idOverviewCopy > span {
  color: #ffffff85;
  letter-spacing: .07em;
  font-size: 9px;
}

.idOverviewCopy h2 {
  letter-spacing: -.015em;
  max-width: 780px;
  margin: clamp(68px, 9vh, 110px) 0 0;
  font-size: clamp(62px, 7.3vw, 118px);
  font-weight: 340;
  line-height: .8;
}

.idOverviewCopy p {
  color: #ffffffa3;
  max-width: 430px;
  margin: 30px 0 0 24%;
  font-size: 12px;
  line-height: 1.48;
}

.idOverviewStats {
  z-index: 2;
  border-top: 1px solid #ffffff2e;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 62px;
  display: grid;
  position: relative;
}

.idOverviewStats article {
  flex-direction: column;
  justify-content: flex-end;
  min-height: 75px;
  padding: 18px 28px 0 0;
  display: flex;
  position: relative;
}

.idOverviewStats article + article {
  border-left: 1px solid #ffffff2e;
  padding-left: 24px;
}

.idOverviewStats span {
  color: #ffffff75;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 8px;
}

.idOverviewStats strong {
  margin-top: 7px;
  font-size: 18px;
  font-weight: 450;
}

.idOverviewStats i {
  background: #ffffff47;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  bottom: 4px;
  right: 18px;
}

.idOverviewStats i[data-active="true"] {
  background: #baff45;
  box-shadow: 0 0 0 4px #baff451f;
}

.idOverviewWord {
  z-index: 1;
  color: #fff1;
  letter-spacing: -.015em;
  font-size: clamp(210px, 29vw, 470px);
  font-weight: 650;
  line-height: .7;
  position: absolute;
  bottom: -.17em;
  right: -.04em;
}

.accountSections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  display: grid;
}

.accountCard {
  color: #070707;
  background: #eeebe5;
  border: 1px solid #0000002b;
  border-radius: 30px;
  min-height: 410px;
  padding: clamp(25px, 3.2vw, 46px);
}

.accountCard:nth-child(2), .accountCard:nth-child(4) {
  background: #e4e0d9;
}

.accountCard .buttonSecondary {
  background: var(--surface-subcard);
  color: #fff;
  border: 1px solid #111;
  min-height: 48px;
}

.modLoginSteps {
  border-top: 1px solid #00000024;
  gap: 0;
  margin-top: 26px;
  display: grid;
}

.modLoginSteps article {
  border-bottom: 1px solid #00000024;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  display: grid;
}

.modLoginSteps article > span {
  color: var(--color-accent);
  letter-spacing: .08em;
  font-size: 9px;
}

.modLoginSteps strong {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 650;
  display: block;
}

.modLoginSteps p {
  color: #0000008c;
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
}

.legacyDeviceFlow {
  margin-top: 22px;
  padding-top: 4px;
}

.mfaCard {
  background: radial-gradient(circle at 92% 5%,
      rgb(var(--color-accent-rgb) / .7),
      #dc200033 28%,
      transparent 52%),
    #ece8e1;
}

.sessionList article:first-child {
  border-top: 0;
}

@media (max-width: 1180px) {
  .accountHeroCharacter {
    width: 55vw;
    right: -2vw;
  }

  .accountHeroIdCard {
    width: 260px;
  }

  .maralysIdAuth {
    grid-template-columns: minmax(360px, .8fr) minmax(500px, 1.2fr);
  }

  .idManifestoCopy {
    grid-template-columns: 1fr;
  }

  .idManifestoCopy p {
    order: 2;
    max-width: 370px;
  }

  .dashboardGrid {
    grid-template-columns: 250px minmax(600px, 1fr);
  }
}

@media (max-width: 920px) {
  .accountHero {
    border-radius: 30px;
    height: max(760px, 100svh - 16px);
    min-height: 760px;
  }

  .accountHeroCopy {
    width: auto;
    bottom: 58px;
    left: 28px;
    right: 28px;
  }

  .accountHeroCopy h1 {
    font-size: clamp(78px, 16vw, 145px);
  }

  .accountHeroCopy h1 span:last-child {
    margin-left: 22%;
  }

  .accountHeroCopy > p:last-child {
    margin: 36px 0 0 22%;
  }

  .accountHeroCharacter {
    opacity: .43;
    width: 82vw;
    height: 72%;
    bottom: 15%;
    right: -15vw;
  }

  .accountHeroIdCard {
    display: none;
  }

  .maralysIdAuth, .dashboardGrid {
    grid-template-columns: 1fr;
  }

  .idManifesto, .authPanel {
    min-height: 760px;
  }

  .accountIdentity {
    min-height: 490px;
    position: relative;
    top: 0;
  }

  .accountAvatar {
    margin-top: 65px;
  }
}

@media (max-width: 640px) {
  .accountWorkspace {
    padding: 78px 12px;
  }

  .accountHero {
    border-radius: 27px;
    height: max(720px, 100svh - 12px);
    min-height: 720px;
  }

  .accountHeroCopy {
    bottom: 46px;
    left: 20px;
    right: 20px;
  }

  .accountHeroCopy .sectionEyebrow {
    margin-bottom: 18px;
  }

  .accountHeroCopy h1 {
    font-size: clamp(64px, 21vw, 94px);
    line-height: .75;
  }

  .accountHeroCopy h1 span:last-child {
    margin-left: 18%;
  }

  .accountHeroCopy > p:last-child {
    max-width: 330px;
    margin: 30px 0 0 18%;
    font-size: 11px;
  }

  .accountHeroCharacter {
    opacity: .32;
    width: 130vw;
    bottom: 18%;
    right: -42vw;
  }

  .accountHeroWord {
    font-size: 34vw;
  }

  .accountDeviceHero .accountHeroCopy h1 {
    font-size: clamp(52px, 15vw, 72px);
  }

  .idManifesto, .authPanel, .accountIdentity, .idOverview, .accountCard {
    border-radius: 25px;
  }

  .idManifesto, .authPanel {
    min-height: 680px;
    padding: 24px 20px;
  }

  .idManifestoTop {
    flex-direction: column;
  }

  .idGlyph {
    width: 245px;
    height: 245px;
    margin-top: 48px;
  }

  .idManifestoCopy {
    margin-top: 52px;
  }

  .idManifestoCopy h2 {
    font-size: 43px;
  }

  .idFeatureGrid {
    margin-top: 30px;
  }

  .idFeatureGrid strong {
    font-size: 25px;
  }

  .authTabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 38px;
  }

  .authTabs button:nth-child(2) {
    border-right: 0;
  }

  .authTabs button:nth-child(-n+2) {
    border-bottom: 1px solid #00000021;
  }

  .authFormFrame {
    margin: 44px auto 58px;
  }

  .authFormHeading {
    grid-template-columns: 30px 1fr;
    gap: 10px;
    margin-bottom: 38px;
  }

  .authFormHeading h2 {
    font-size: clamp(42px, 13vw, 59px);
  }

  .authFormFrame .accountForm {
    padding-left: 40px;
  }

  .authFormFrame .formColumns {
    grid-template-columns: 1fr;
  }

  .authPanelFooter {
    grid-template-columns: 1fr auto;
  }

  .authPanelFooter p {
    grid-area: 1 / 1 / auto / -1;
  }

  .accountIdentity {
    min-height: 460px;
  }

  .accountIdentity h2 {
    font-size: 48px;
  }

  .idOverview {
    min-height: 530px;
    padding: 28px 24px;
  }

  .idOverviewCopy h2 {
    margin-top: 75px;
    font-size: clamp(58px, 17vw, 78px);
  }

  .idOverviewCopy p {
    margin-left: 0;
  }

  .idOverviewStats {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }

  .idOverviewStats article {
    border-bottom: 1px solid #ffffff26;
    min-height: 58px;
    padding: 14px 0;
  }

  .idOverviewStats article + article {
    border-left: 0;
    padding-left: 0;
  }

  .idOverviewStats i {
    bottom: 23px;
  }

  .accountSections {
    grid-template-columns: 1fr;
  }

  .accountCard {
    min-height: 0;
  }

  .accountCardWide {
    grid-column: auto;
  }
}

.gameHero, .serverDetailHero {
  isolation: isolate;
  background: var(--surface-card);
  border: 1px solid #ffffff26;
  border-radius: 46px;
  height: calc(100svh - 16px);
  min-height: 760px;
  position: relative;
  overflow: hidden;
}

.gameHeroMedia, .serverHeroMedia {
  z-index: -2;
  position: absolute;
  inset: 0;
}

.gameHeroImage, .serverHeroImage {
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
}

.gameHeroShade, .serverHeroShade {
  background: linear-gradient(90deg, #000000eb 0, #000000a3 39%, #0000001a 74%), linear-gradient(#0000004d 0, #0000 42%, #000000db 100%);
  position: absolute;
  inset: 0;
}

.gameHeroCopy, .serverHeroCopy {
  z-index: 5;
  width: min(900px, 66vw);
  position: absolute;
  top: 25%;
  left: 4.3vw;
}

.gameHeroCopy .innerBreadcrumb, .serverHeroCopy .innerBreadcrumb {
  margin-bottom: 44px;
}

.gameHeroCopy h1, .serverHeroCopy h1 {
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 920px;
  margin: 25px 0 0;
  font-size: clamp(70px, 7.5vw, 132px);
  font-weight: 360;
  line-height: .84;
}

.gameHeroCopy > p:last-of-type, .serverHeroCopy > p:last-of-type {
  color: #ffffffb8;
  width: min(560px, 78%);
  margin: 34px 0 0 6vw;
  font-size: 13px;
  line-height: 1.42;
}

.gameHeroActions {
  align-items: center;
  gap: 25px;
  margin: 36px 0 0 6vw;
  display: flex;
}

.serverHeroActions {
  gap: 9px;
  margin: 28px 0 0 6vw;
  display: flex;
}

.gameHeroActions .button {
  max-width: 330px;
}

.gameSourceLink {
  color: #ffffffad;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid #ffffff6b;
  padding: 8px 0;
  font-size: 10px;
}

.gameSourceLink:hover {
  color: #fff;
}

.gameHeroStatus, .serverHeroMeta {
  z-index: 5;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  letter-spacing: .07em;
  text-transform: uppercase;
  background: #0000006b;
  border: 1px solid #ffffff3d;
  border-radius: 999px;
  align-items: center;
  gap: 28px;
  padding: 11px 15px;
  font-size: 9px;
  display: flex;
  position: absolute;
  bottom: 34px;
  right: 3vw;
}

.gameHeroStatus span, .serverHeroMeta strong {
  letter-spacing: -.015em;
  font-size: 16px;
  font-weight: 520;
}

.gameHeroStatus strong, .serverHeroMeta span {
  color: var(--color-accent);
  font-weight: 500;
}

.gameHeroStatus[data-status="live"] strong, .serverHeroMeta[data-status="live"] span {
  color: #b7ff35;
}

.gameDirectionSection, .serverOverviewSection {
  color: #070707;
  background: #f1efea;
  padding: clamp(100px, 10vw, 170px) 4.3vw;
}

.gameDirectionIntro, .serverOverviewCopy {
  grid-template-columns: minmax(130px, .55fr) minmax(460px, 2fr) minmax(230px, .8fr);
  align-items: start;
  gap: 5vw;
  display: grid;
}

.gameDirectionIntro .sectionEyebrow, .serverOverviewCopy .sectionEyebrow, .gameServersHeading .sectionEyebrow, .serverRulesHeading .sectionEyebrow, .connectionSection .sectionEyebrow, .relatedServersHeading .sectionEyebrow {
  color: #00000080;
}

.gameDirectionIntro h2, .serverOverviewCopy h2 {
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 960px;
  margin: 0;
  font-size: clamp(58px, 6.5vw, 110px);
  font-weight: 360;
  line-height: .85;
}

.gameDirectionIntro > p:last-child {
  color: #0000009c;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.gameMetrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 110px;
  display: grid;
}

.gameMetrics article {
  border: 1px solid #0000002b;
  border-radius: 28px;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px;
  padding: 27px;
  display: flex;
}

.gameMetrics strong {
  letter-spacing: -.015em;
  font-size: clamp(68px, 8vw, 128px);
  font-weight: 350;
  line-height: .78;
}

.gameMetrics span {
  color: #00000094;
  letter-spacing: .06em;
  text-transform: uppercase;
  max-width: 190px;
  font-size: 10px;
  line-height: 1.35;
}

.gamePrinciples {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  display: grid;
}

.gamePrinciples article {
  background: var(--surface-card);
  color: #f7f5f2;
  border-radius: 28px;
  min-height: 300px;
  padding: 27px;
}

.gamePrinciples article:nth-child(2) {
  background: linear-gradient(145deg,
    var(--color-accent),
    #d31c00 55%,
    #730000);
}

.gamePrinciples > article > span {
  color: #ffffff7a;
  font-size: 9px;
}

.gamePrinciples h3 {
  letter-spacing: -.015em;
  margin: 96px 0 0;
  font-size: clamp(34px, 3.2vw, 58px);
  font-weight: 360;
  line-height: .92;
}

.gamePrinciples p {
  color: #ffffff9e;
  max-width: 330px;
  margin: 23px 0 0;
  font-size: 12px;
  line-height: 1.4;
}

.gameServersSection, .serverRulesSection, .relatedServersSection {
  background: var(--surface-card);
  padding: clamp(100px, 10vw, 170px) 4.3vw;
}

.gameServersHeading, .serverRulesHeading, .relatedServersHeading {
  grid-template-columns: minmax(130px, .55fr) minmax(460px, 2fr) minmax(230px, .8fr);
  align-items: start;
  gap: 5vw;
  display: grid;
}

.gameServersHeading .sectionEyebrow, .serverRulesHeading .sectionEyebrow, .relatedServersHeading .sectionEyebrow {
  color: #ffffff7a;
}

.gameServersHeading h2, .serverRulesHeading h2, .relatedServersHeading h2, .connectionSection h2 {
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 970px;
  margin: 0;
  font-size: clamp(58px, 7vw, 118px);
  font-weight: 360;
  line-height: .84;
}

.gameServersHeading > p:last-child {
  color: #ffffff94;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.gameServerGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 90px;
  display: grid;
}

.gameServerCard {
  background: radial-gradient(circle at 88% 8%,
      rgb(var(--color-accent-rgb) / .4),
      transparent 36%),
    var(--surface-card);
  border: 1px solid #ffffff2e;
  border-radius: 32px;
  flex-direction: column;
  justify-content: space-between;
  min-height: 520px;
  padding: 29px;
  transition: border-color .25s, transform .35s;
  display: flex;
  overflow: hidden;
}

.gameServerCard:nth-child(2) {
  background: radial-gradient(circle at 12% 4%,
      var(--color-accent),
      #b81700 32%,
      transparent 62%),
    #0b0504;
}

.gameServerCard:hover {
  border-color: #ffffff80;
  transform: translateY(-6px);
}

.gameServerCardTop, .gameServerCardBottom {
  color: #ffffff8a;
  letter-spacing: .07em;
  text-transform: uppercase;
  justify-content: space-between;
  font-size: 9px;
  display: flex;
}

.gameServerCardTop span:last-child {
  color: var(--color-accent);
}

.gameServerCard[data-status="live"] .gameServerCardTop span:last-child {
  color: #b7ff35;
}

.gameServerCardCopy > p {
  color: #ffffff7a;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 25px;
  font-size: 9px;
}

.gameServerCardCopy h3 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(46px, 4.7vw, 77px);
  font-weight: 350;
  line-height: .82;
}

.gameServerCardCopy > span {
  color: #ffffff9e;
  max-width: 400px;
  margin-top: 28px;
  font-size: 12px;
  line-height: 1.4;
  display: block;
}

.gameServerCardBottom i {
  color: #fff;
  font-size: 15px;
  font-style: normal;
  transition: transform .2s;
}

.gameServerCard:hover .gameServerCardBottom i {
  transform: translate(4px, -4px);
}

.gameBackLink {
  margin-top: 70px;
}

.serverHeroCopy h1 {
  max-width: 1050px;
  font-size: clamp(74px, 9vw, 155px);
}

.serverOverviewCopy {
  grid-template-columns: minmax(130px, .55fr) minmax(650px, 2.8fr);
}

.serverOverviewCopy h2 {
  font-size: clamp(52px, 5.5vw, 92px);
  line-height: .94;
}

.serverFeatureGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 100px 0 0 calc(24% + 5vw);
  display: grid;
}

.serverFeatureGrid article {
  border: 1px solid #0000002e;
  border-radius: 25px;
  flex-direction: column;
  justify-content: space-between;
  min-height: 230px;
  padding: 25px;
  display: flex;
}

.serverFeatureGrid span {
  color: #0000006b;
  font-size: 9px;
}

.serverFeatureGrid strong {
  letter-spacing: -.015em;
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 380;
  line-height: .95;
}

.serverRulesHeading, .relatedServersHeading {
  grid-template-columns: minmax(130px, .55fr) minmax(650px, 2.8fr);
}

.serverRuleList {
  border-top: 1px solid #fff3;
  margin-top: 100px;
}

.serverRuleRow {
  border-bottom: 1px solid #fff3;
  grid-template-columns: 70px minmax(230px, .8fr) minmax(360px, 1.5fr);
  align-items: start;
  gap: 4vw;
  padding: 35px 0;
  display: grid;
}

.serverRuleRow > span {
  color: #ffffff61;
  font-size: 10px;
}

.serverRuleRow h3 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(28px, 3.2vw, 50px);
  font-weight: 380;
  line-height: .9;
}

.serverRuleRow p {
  color: #fff9;
  max-width: 620px;
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.42;
}

.connectionSection {
  background: radial-gradient(circle at 82% 12%,
      var(--color-accent),
      #d52000 22%,
      #4c0000 49%,
      transparent 70%),
    #0b0302;
  grid-template-columns: minmax(520px, 1.4fr) minmax(320px, .6fr);
  align-items: end;
  gap: 8vw;
  min-height: 660px;
  padding: clamp(100px, 10vw, 170px) 4.3vw;
  display: grid;
}

.connectionSection .sectionEyebrow {
  color: #ffffff85;
}

.connectionCopy p {
  color: #ffffffad;
  margin: 0 0 38px;
  font-size: 14px;
  line-height: 1.45;
}

.relatedServerLinks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 90px 0 70px;
  display: grid;
}

.relatedServerLinks a {
  background: var(--surface-card);
  border: 1px solid #ffffff2b;
  border-radius: 28px;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 310px;
  padding: 28px;
  transition: border-color .22s;
  display: flex;
  position: relative;
}

.relatedServerLinks a:hover {
  border-color: #ffffff7a;
}

.relatedServerLinks span {
  color: #ffffff73;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-size: 9px;
}

.relatedServerLinks strong {
  letter-spacing: -.015em;
  max-width: 85%;
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 350;
  line-height: .83;
}

.relatedServerLinks i {
  font-size: 18px;
  font-style: normal;
  position: absolute;
  bottom: 28px;
  right: 28px;
}

@media (max-width: 1180px) {
  .gameHeroCopy, .serverHeroCopy {
    width: min(830px, 75vw);
  }

  .gameDirectionIntro, .gameServersHeading {
    grid-template-columns: 150px minmax(460px, 1fr);
  }

  .gameDirectionIntro > p:last-child, .gameServersHeading > p:last-child {
    grid-column: 2;
    max-width: 580px;
  }

  .gameServerGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .gameHero, .serverDetailHero {
    height: max(760px, 100svh - 16px);
    min-height: 760px;
  }

  .gameHeroShade, .serverHeroShade {
    background: linear-gradient(180deg,
        #00000026,
        #00000029 34%,
        var(--surface-card) 76%,
        var(--surface-card)),
      linear-gradient(90deg, #0006, transparent);
  }

  .gameHeroCopy, .serverHeroCopy {
    width: auto;
    inset: auto 28px 82px;
  }

  .gameHeroCopy h1, .serverHeroCopy h1 {
    font-size: clamp(62px, 11vw, 105px);
  }

  .gameHeroCopy > p:last-of-type, .serverHeroCopy > p:last-of-type, .gameHeroActions, .serverHeroActions {
    width: min(600px, 88%);
    margin-left: 0;
  }

  .gameHeroStatus, .serverHeroMeta {
    bottom: 24px;
    right: 25px;
  }

  .gameDirectionIntro, .serverOverviewCopy, .gameServersHeading, .serverRulesHeading, .relatedServersHeading {
    grid-template-columns: 1fr;
  }

  .gameDirectionIntro > p:last-child, .gameServersHeading > p:last-child {
    grid-column: auto;
    max-width: 620px;
  }

  .gameDirectionIntro h2, .serverOverviewCopy h2, .gameServersHeading h2, .serverRulesHeading h2, .relatedServersHeading h2 {
    margin-top: 18px;
  }

  .gameMetrics, .gamePrinciples, .serverFeatureGrid {
    grid-template-columns: 1fr;
  }

  .gameMetrics article, .gamePrinciples article {
    min-height: 250px;
  }

  .serverFeatureGrid {
    margin-left: 0;
  }

  .serverRuleRow {
    grid-template-columns: 50px minmax(180px, .8fr) minmax(280px, 1.5fr);
    gap: 3vw;
  }

  .connectionSection {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .connectionCopy {
    max-width: 620px;
  }
}

@media (max-width: 560px) {
  .gameHero, .serverDetailHero {
    border-radius: 28px;
    height: max(780px, 100svh - 12px);
    min-height: 780px;
  }

  .gameHeroMedia, .serverHeroMedia {
    bottom: 42%;
  }

  .gameHeroImage, .serverHeroImage {
    object-position: 58% center;
  }

  .gameHeroCopy, .serverHeroCopy {
    bottom: 74px;
    left: 20px;
    right: 20px;
  }

  .gameHeroCopy .innerBreadcrumb, .serverHeroCopy .innerBreadcrumb {
    margin-bottom: 28px;
  }

  .gameHeroCopy h1, .serverHeroCopy h1 {
    font-size: clamp(48px, 14.5vw, 72px);
  }

  .gameHeroCopy > p:last-of-type, .serverHeroCopy > p:last-of-type {
    width: 100%;
    margin-top: 24px;
    font-size: 12px;
  }

  .gameHeroActions, .serverHeroActions {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-top: 26px;
  }

  .gameHeroStatus, .serverHeroMeta {
    bottom: 18px;
    right: 18px;
  }

  .gameDirectionSection, .serverOverviewSection, .gameServersSection, .serverRulesSection, .relatedServersSection, .connectionSection {
    padding: 82px 20px;
  }

  .gameDirectionIntro h2, .serverOverviewCopy h2, .gameServersHeading h2, .serverRulesHeading h2, .relatedServersHeading h2, .connectionSection h2 {
    font-size: clamp(47px, 13.5vw, 68px);
  }

  .gameMetrics, .gamePrinciples, .gameServerGrid, .serverFeatureGrid, .relatedServerLinks {
    grid-template-columns: 1fr;
    margin-top: 58px;
  }

  .gameMetrics article, .gamePrinciples article, .serverFeatureGrid article {
    border-radius: 22px;
    min-height: 210px;
  }

  .gamePrinciples h3 {
    margin-top: 62px;
  }

  .gameServerCard {
    border-radius: 24px;
    min-height: 450px;
    padding: 24px;
  }

  .serverRuleList {
    margin-top: 58px;
  }

  .serverRuleRow {
    grid-template-columns: 36px 1fr;
    gap: 18px;
    padding: 28px 0;
  }

  .serverRuleRow p {
    grid-column: 2;
  }

  .connectionSection {
    min-height: 620px;
  }

  .relatedServerLinks a {
    border-radius: 23px;
    min-height: 270px;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--surface-body);
  scroll-behavior: smooth;
  min-width: 320px;
}

body {
  background: var(--surface-body);
  min-height: 100vh;
  color: var(--text-primary);
  text-rendering: optimizelegibility;
  margin: 0;
  font-family: Helvetica Neue, Arial Nova, Arial, sans-serif;
  overflow-x: hidden;
}

button, a {
  color: inherit;
  font: inherit;
}

a {
  text-decoration: none;
}

button {
  border: 0;
}

.pageShell {
  --hero-glass-dark: #0f0f1461;
  --hero-glass-light: #f5f2edb8;
  --hero-glass-line: #ffffff24;
  --hero-glass-filter: blur(30px) saturate(1.16);
  --page-shell-gutter: 8px;
  min-height: 100svh;
  padding: 8px;
}

.heroFrame {
  isolation: isolate;
  background: var(--surface-card);
  border: 1px solid #ffffff26;
  border-radius: 46px;
  height: calc(100svh - 16px);
  min-height: 680px;
  position: relative;
  overflow: hidden;
}

.heroFrame:after {
  z-index: 9;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  border: 1px solid #ffffff0a;
  position: absolute;
  inset: 0;
}

.heroNoise {
  z-index: 1;
  opacity: .08;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: repeating-linear-gradient(93deg, #ffffff2e 0 1px, #0000 1px 5px), repeating-linear-gradient(7deg, #ffffff14 0 1px, #0000 1px 7px);
  background-size: 19px 23px, 31px 29px;
  position: absolute;
  inset: 0;
}

.heroGlow {
  z-index: 0;
  filter: blur(50px);
  pointer-events: none;
  border-radius: 50%;
  position: absolute;
}

.heroGlowLeft {
  opacity: .94;
  background: radial-gradient(circle at 36% 40%,
    var(--color-accent) 0 10%,
    #f33500 22%,
    #940800 42%,
    transparent 68%);
  width: 64%;
  height: 92%;
  top: -20%;
  left: -20%;
}

.heroGlowBottom {
  opacity: .72;
  background: radial-gradient(circle,
    var(--color-accent) 0 9%,
    #db1c00 27%,
    transparent 67%);
  width: 48%;
  height: 76%;
  bottom: -44%;
  left: 27%;
}

.siteHeader {
  z-index: 20;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 86px;
  padding: 0 4.25vw;
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.desktopNav {
  align-items: center;
  gap: clamp(18px, 2.6vw, 48px);
  display: flex;
}

.desktopNavRight {
  justify-content: flex-end;
}

.headerDropdown {
  align-items: center;
  display: flex;
  position: relative;
}

.headerDropdown:before {
  content: "";
  height: 26px;
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
}

.desktopNav .headerDropdownTrigger {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.headerDropdownTrigger > i {
  color: #ffffff7a;
  font-size: 11px;
  font-style: normal;
  line-height: 0;
  transition: color .18s, transform .18s;
  transform: translateY(-1px);
}

.headerDropdown:hover .headerDropdownTrigger > i, .headerDropdown:focus-within .headerDropdownTrigger > i {
  color: var(--color-accent);
  transform: translateY(1px)rotate(180deg);
}

.headerDropdownPanel {
  z-index: 50;
  visibility: hidden;
  opacity: 0;
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  transform-origin: 0 0;
  pointer-events: none;
  background: #050505ed;
  border: 1px solid #ffffff2b;
  border-radius: 22px;
  padding: 10px;
  transition: opacity .18s, transform .18s, visibility .18s;
  position: absolute;
  top: calc(100% + 22px);
  left: -22px;
  transform: translateY(-8px);
  box-shadow: 0 26px 80px #00000080;
}

.headerDropdown:hover .headerDropdownPanel, .headerDropdown:focus-within .headerDropdownPanel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.desktopNav .headerDropdownPanel a:after {
  display: none;
}

.headerServersPanel {
  width: min(650px, 100vw - 48px);
}

.headerPlayPanel {
  transform-origin: 100% 0;
  width: min(680px, 100vw - 48px);
  left: auto;
  right: -20px;
}

.headerPlayGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.desktopNav .headerPlayCard {
  min-height: 164px;
}

.pixelBattleArtwork {
  isolation: isolate;
  background: var(--surface-card);
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pixelBattleArtwork:before {
  z-index: -2;
  content: "";
  background-image: linear-gradient(90deg, #ffffff0b 1px, #0000 1px), linear-gradient(#ffffff0b 1px, #0000 1px);
  background-size: 24px 24px;
  position: absolute;
  inset: 0;
}

.pixelBattleArtwork:after {
  z-index: -1;
  aspect-ratio: 1;
  background: rgb(var(--color-accent-rgb) / .32);
  filter: blur(70px);
  content: "";
  border-radius: 50%;
  width: 70%;
  position: absolute;
  bottom: -40%;
  right: -15%;
}

.pixelBattleArtworkCanvas {
  aspect-ratio: 1.2;
  grid-template-rows: repeat(10, minmax(0, 1fr));
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2px, .35vw, 5px);
  width: min(58%, 360px);
  display: grid;
  transform: rotate(-5deg)translate(4%, -3%);
}

.pixelBattleArtworkCell {
  background: #ffffff09;
}

.pixelBattleArtworkCell[data-tone="o"] {
  background: var(--color-accent);
}

.pixelBattleArtworkCell[data-tone="c"] {
  background: #f5f1e9;
}

.pixelBattleArtworkCell[data-tone="d"] {
  background: #7d2513;
}

.pixelBattleArtworkMark, .pixelBattleArtworkLabel {
  z-index: 1;
  font-style: normal;
  line-height: 1;
  position: absolute;
}

.pixelBattleArtworkMark {
  color: #ffffff1f;
  letter-spacing: -.09em;
  font-size: clamp(54px, 8vw, 140px);
  font-weight: 850;
  bottom: 7%;
  right: 7%;
}

.pixelBattleArtworkLabel {
  color: #ffffff6b;
  letter-spacing: .14em;
  font-size: 8px;
  font-weight: 740;
  top: 8%;
  left: 7%;
}

.pixelBattleArtwork[data-compact="true"] .pixelBattleArtworkCanvas {
  gap: 2px;
  width: min(62%, 180px);
}

.pixelBattleArtwork[data-compact="true"] .pixelBattleArtworkMark {
  font-size: clamp(44px, 5vw, 82px);
}

.pixelBattleArtwork[data-compact="true"] .pixelBattleArtworkLabel {
  font-size: 6px;
}

.headerDropdownHeading {
  color: #ffffffe6;
  letter-spacing: .07em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  padding: 9px 10px 17px;
  font-size: 10px;
  display: flex;
}

.headerDropdownHeading small {
  color: #ffffff5c;
  font-size: 7px;
}

.headerServerGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.headerServerGrid .headerServerCard:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  min-height: 112px;
}

.desktopNav .headerServerCard {
  isolation: isolate;
  background: var(--surface-subcard);
  border: 1px solid #ffffff21;
  border-radius: 15px;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 134px;
  padding: 16px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.headerServerImage, .headerServerImage:after {
  position: absolute;
  inset: 0;
}

.headerServerImage {
  z-index: -2;
}

.headerServerImage img {
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.headerServerImage i {
  background: linear-gradient(#0000000a, #0000002e 35%, #000000f0 100%);
  position: absolute;
  inset: 0;
}

.headerServerCard:hover .headerServerImage img, .headerServerCard:focus-visible .headerServerImage img {
  transform: scale(1.07);
}

.headerServerCardDisabled {
  cursor: default;
}

.headerServerCardDisabled .headerServerImage img {
  filter: saturate(.12) brightness(.42);
}

.headerServerCardDisabled .headerServerImage i {
  background: linear-gradient(#00000094, #000000f5);
}

.headerServerCardDisabled .headerServerCopy {
  opacity: .72;
}

.headerServerCardDisabled:hover .headerServerImage img {
  transform: none;
}

.headerServerCopy {
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.headerServerCopy small {
  color: #fff9;
  letter-spacing: .07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 7px;
  overflow: hidden;
}

.headerServerCopy strong {
  letter-spacing: -.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 19px;
  font-weight: 520;
  line-height: .9;
  overflow: hidden;
}

.headerServerCard > em {
  color: #ffffffbf;
  letter-spacing: .08em;
  background: #00000061;
  border: 1px solid #fff3;
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 7px;
  font-style: normal;
  position: absolute;
  top: 13px;
  right: 13px;
}

.headerServerCard:not(.headerServerCardDisabled) > em {
  border-color: rgb(var(--color-accent-rgb) / .7);
  background: var(--color-accent);
  color: #fff;
}

.desktopNav .headerDropdownFooter {
  background: #ffffff0a;
  border: 1px solid #ffffff21;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  min-height: 46px;
  margin-top: 7px;
  padding: 0 13px;
  font-size: 8px;
  display: flex;
}

.headerDropdownFooter i {
  color: var(--color-accent);
  font-size: 15px;
  font-style: normal;
}

.headerAboutPanel {
  width: 350px;
}

.desktopNav .headerAboutLink {
  background: #ffffff09;
  border: 1px solid #ffffff1f;
  border-radius: 14px;
  grid-template-columns: 28px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 11px;
  min-height: 86px;
  padding: 14px;
  display: grid;
}

.headerAboutLink + .headerAboutLink {
  margin-top: 7px;
}

.headerAboutLink > span {
  color: #ffffff59;
  font-size: 8px;
}

.headerAboutLink > div {
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.headerAboutLink strong {
  font-size: 12px;
  font-weight: 530;
}

.headerAboutLink small {
  color: #ffffff75;
  letter-spacing: 0;
  text-transform: none;
  font-size: 8px;
  line-height: 1.28;
}

.headerAboutLink > i {
  color: var(--color-accent);
  font-size: 14px;
  font-style: normal;
}

.desktopNav .headerFranchiseLink {
  border-color: rgb(var(--color-accent-rgb) / .48);
  background: linear-gradient(120deg,
    rgb(var(--color-accent-rgb) / .34),
    #8008002e);
}

.headerAboutLink:hover, .headerAboutLink:focus-visible, .headerDropdownFooter:hover, .headerDropdownFooter:focus-visible {
  background-color: #ffffff14;
  border-color: #ffffff52;
}

.headerAuthCluster {
  align-items: center;
  gap: 7px;
  display: flex;
}

.desktopNav a {
  color: #ffffffe6;
  letter-spacing: .055em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  transition: color .18s;
  position: relative;
}

.desktopNav a:after {
  background: var(--color-accent);
  content: "";
  transform-origin: 100%;
  height: 1px;
  transition: transform .18s;
  position: absolute;
  bottom: -7px;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.desktopNav a:hover, .desktopNav a:focus-visible, .desktopNav a[aria-current="page"] {
  color: #fff;
}

.desktopNav a:hover:after, .desktopNav a:focus-visible:after, .desktopNav a[aria-current="page"]:after {
  transform-origin: 0;
  transform: scaleX(1);
}

.desktopNav .desktopLanguage {
  border: 1px solid #ffffff47;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-size: 9px;
  display: inline-flex;
}

.desktopNav .desktopLanguage:after {
  display: none;
}

.brandLink {
  justify-content: center;
  align-items: center;
  width: 122px;
  min-height: 45px;
  display: inline-flex;
}

.wordmark {
  color: #fff;
  letter-spacing: -.015em;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  display: inline-block;
}

.headerControls, .mobileMenu {
  display: none;
}

.heroCopy {
  z-index: 6;
  width: min(42vw, 570px);
  animation: .9s cubic-bezier(.22, 1, .36, 1) .1s backwards heroReveal;
  position: absolute;
  top: 9%;
  left: 5.2%;
}

.eyebrow {
  color: #fffc;
  letter-spacing: .055em;
  text-transform: uppercase;
  margin: 0 0 15px;
  font-size: 14px;
  font-weight: 760;
}

.heroCopy h1 {
  letter-spacing: -.015em;
  max-width: 620px;
  margin: 0;
  font-size: clamp(46px, 4.2vw, 70px);
  font-weight: 390;
  line-height: .9;
}

.heroCopy h1 span {
  white-space: nowrap;
  display: block;
}

.heroDescription {
  color: #ffffffc7;
  width: min(520px, 100%);
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 560;
  line-height: 1.4;
}

.heroPlatformGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 10px;
  display: grid;
}

.heroPlatformGrid article {
  --hero-glass-surface: #2020245c;
  background: var(--hero-glass-surface);
  border: 1px solid #ffffff1c;
  border-radius: 12px;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 52px;
  padding: 9px 10px;
  transition: background-color .18s, transform .18s;
  display: grid;
}

.heroPlatformGrid svg {
  width: 17px;
  height: 17px;
  color: var(--color-accent);
  stroke-width: 1.65px;
  transition: transform .18s;
}

.heroPlatformGrid article:hover {
  --hero-glass-surface: #2e2e3385;
  transform: translateY(-2px);
}

.heroPlatformGrid article:hover svg {
  transform: scale(1.08);
}

.heroPlatformGrid span {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.heroPlatformGrid small {
  color: #ffffff6b;
  letter-spacing: .075em;
  text-transform: uppercase;
  font-size: 8.2px;
  font-weight: 750;
}

.heroPlatformGrid strong {
  color: #ffffffe6;
  font-size: 10.4px;
  font-weight: 650;
  line-height: 1.16;
}

.heroActions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-width: 520px;
  margin-top: 8px;
  display: grid;
}

.heroPlatformCta {
  --hero-glass-surface: #2020245c;
  background: var(--hero-glass-surface);
  color: #fff;
  border: 1px solid #ffffff1c;
  border-radius: 15px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 58px;
  padding: 9px 10px 9px 14px;
  transition: background-color .18s, transform .18s;
  display: flex;
}

.heroPlatformCta.isPrimary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #0a0a0c;
}

.heroPlatformCta > span {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.heroPlatformCta small {
  color: currentColor;
  letter-spacing: .065em;
  opacity: .5;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 6px;
  font-weight: 720;
  overflow: hidden;
}

.heroPlatformCta strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 740;
  overflow: hidden;
}

.heroPlatformCta > svg {
  background: #ffffff17;
  border-radius: 11px;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 9px;
}

.heroPlatformCta.isPrimary > svg {
  color: #0a0a0c;
  background: #0a0a0c24;
  border-radius: 50%;
}

.heroPlatformCta:hover, .heroPlatformCta:focus-visible {
  --hero-glass-surface: #2e2e338f;
  background: none;
  transform: translateY(-2px);
}

.heroPlatformCta.isPrimary:hover, .heroPlatformCta.isPrimary:focus-visible {
  background: color-mix(in srgb, var(--color-accent), white 9%);
}

.button {
  border: 1px solid #fff3;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-height: 58px;
  font-size: 13px;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
  display: inline-flex;
}

.button:hover, .button:focus-visible {
  transform: translateY(-2px);
}

.buttonPrimary {
  background: var(--text-primary);
  color: #080808;
  border-color: #fff;
  justify-content: space-between;
  width: 198px;
  padding: 5px 5px 5px 25px;
}

.buttonIcon {
  background: var(--surface-card);
  color: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  font-size: 17px;
  display: inline-flex;
}

.buttonPrimary:hover, .buttonPrimary:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.buttonSecondary {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #ffffff0b;
  min-width: 148px;
  padding: 0 24px;
}

.buttonSecondary:hover, .buttonSecondary:focus-visible {
  background: #ffffff1a;
  border-color: #ffffff8c;
}

.heroRightStack {
  z-index: 6;
  gap: 8px;
  width: min(32vw, 430px);
  animation: .9s cubic-bezier(.22, 1, .36, 1) .22s backwards heroReveal;
  display: grid;
  position: absolute;
  top: 9%;
  right: 5.2%;
}

.heroFeature {
  --hero-glass-surface: var(--hero-glass-dark);
  border: 1px solid var(--hero-glass-line);
  background: var(--hero-glass-surface);
  border-radius: 18px;
  width: 100%;
  overflow: hidden;
}

.featureTopline {
  color: #ffffffb8;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid #ffffff1a;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 3px 7px 3px 12px;
  font-size: 8px;
  display: grid;
}

.featureKicker {
  color: #fff;
  align-items: center;
  gap: 7px;
  font-weight: 760;
  display: inline-flex;
}

.featureKicker i {
  background: var(--color-accent);
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.featureTopline time {
  color: #ffffff75;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-style: normal;
  overflow: hidden;
}

.featureTopline small {
  color: #ffffff70;
  letter-spacing: .04em;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 700;
}

.roundArrow {
  color: #fff;
  background: none;
  border: 1px solid #ffffffb8;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 31px;
  height: 31px;
  font-size: 13px;
  display: inline-flex;
}

.featureBody {
  grid-template-rows: 90px minmax(135px, 1fr);
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0;
  min-height: 225px;
  display: grid;
}

.featureImage {
  background: radial-gradient(circle at 47% 35%,
    var(--color-accent),
    #d51d00 38%,
    #210000 76%);
  border-bottom: 1px solid #ffffff1a;
  border-right: 0;
  border-radius: 0;
  min-height: 90px;
  position: relative;
  overflow: hidden;
}

.featureImageAsset {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  position: absolute;
  inset: 0;
}

.heroFeature:hover .featureImageAsset {
  transform: scale(1.025);
}

.featureCopy {
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 12px 15px 11px;
  display: flex;
  overflow: hidden;
}

.featureCopy h2 {
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  margin: 0 0 7px;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.08;
  display: -webkit-box;
  overflow: hidden;
}

.featureCopy > a {
  min-width: 0;
  color: inherit;
}

.featureCopy p {
  -webkit-line-clamp: 4;
  color: #ffffff8f;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
}

.featureFooter {
  border-top: 1px solid #ffffff17;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  display: flex;
}

.featureProgress {
  background: #fff3;
  flex: none;
  width: 72px;
  height: 2px;
  position: relative;
}

.featureProgress span {
  background: var(--color-accent);
  width: 40%;
  position: absolute;
  inset: 0 auto 0 0;
}

.featureArrows {
  flex: none;
  justify-content: flex-end;
  gap: 7px;
  display: flex;
}

.featureArrows button {
  color: #fff;
  cursor: pointer;
  background: none;
  border: 1px solid #ffffff40;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  font-size: 12px;
  display: inline-flex;
}

.featureArrows button:last-child {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.heroHitCard {
  --hero-glass-surface: var(--hero-glass-light);
  background: var(--hero-glass-surface);
  color: #090909;
  min-height: 104px;
  box-shadow: none;
  border-radius: 18px;
  grid-template-columns: 42% minmax(0, 1fr);
  text-decoration: none;
  display: grid;
  overflow: hidden;
}

.heroHitMedia {
  background: var(--surface-subcard);
  min-height: 104px;
  display: block;
  position: relative;
  overflow: hidden;
}

.heroHitMedia img {
  object-fit: cover;
  object-position: 53% center;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.heroHitMedia > i {
  background: linear-gradient(90deg, #0000 72%, #f5f2ed38);
  position: absolute;
  inset: 0;
}

.heroHitCopy {
  flex-direction: column;
  min-width: 0;
  padding: 11px 14px 10px;
  display: flex;
}

.heroHitCopy small {
  letter-spacing: .055em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 7px;
  font-weight: 650;
  line-height: 1.2;
  display: flex;
}

.heroHitCopy small b {
  color: var(--color-accent);
  font-weight: inherit;
}

.heroHitCopy small i {
  color: #09090975;
  white-space: nowrap;
  font-style: normal;
}

.heroHitCopy > strong {
  letter-spacing: -.012em;
  text-wrap: balance;
  margin-top: 10px;
  font-size: clamp(16px, 1.18vw, 20px);
  font-weight: 650;
  line-height: .98;
}

.heroHitCopy > span {
  color: #09090994;
  letter-spacing: .055em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 8px;
  font-weight: 650;
  display: flex;
}

.heroHitCopy > span i {
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  flex: 0 0 24px;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 10px;
  font-style: normal;
  transition: transform .22s, background-color .22s;
  display: grid;
}

.heroHitCard:hover .heroHitMedia img {
  transform: scale(1.045);
}

.heroHitCard:hover .heroHitCopy > span i {
  background: var(--surface-card);
  transform: translate(2px, -2px);
}

.heroHitCard:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.heroMobileEditorial {
  display: none;
}

.heroStatusDeck {
  z-index: 7;
  margin: -191px 5.2vw 24px;
  position: relative;
}

.homeServerPulse {
  color: #fff;
  background: none;
  padding: 4px 10px;
  overflow: visible;
}

.homeServerPulse > header {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 26px;
  padding: 0 8px 4px;
  display: flex;
}

.homeServerPulse > header > div {
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.homeServerPulse > header span, .homeServerPulse > header > a {
  color: #ffffff85;
  letter-spacing: .075em;
  text-transform: uppercase;
  align-items: center;
  gap: 6px;
  font-size: 6.2px;
  font-weight: 750;
  display: inline-flex;
}

.homeServerPulse > header span i {
  background: #6be879;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.homeServerPulse > header h2 {
  letter-spacing: -.01em;
  margin: 0;
  font-size: 14px;
  font-weight: 620;
}

.homeServerPulse > header > a {
  color: #ffffffbd;
  flex: none;
}

.homeServerPulse > header > a svg {
  width: 11px;
  height: 11px;
}

.homeServerPulseGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.homeServerPulseCard {
  --hero-glass-surface: var(--hero-glass-dark);
  border: 1px solid var(--hero-glass-line);
  outline: 1px solid var(--hero-glass-line);
  outline-offset: -1px;
  background: var(--hero-glass-surface);
  color: #fff;
  cursor: pointer;
  border-radius: 15px;
  grid-template: "media identity actions"
                 "media chart chart" minmax(34px, 1fr)
                 "media metrics metrics"
                 / minmax(108px, .68fr) minmax(0, 1.32fr) 61px;
  align-items: stretch;
  gap: 4px 12px;
  min-width: 0;
  min-height: 136px;
  padding: 8px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.homeServerPulseCardLink {
  z-index: 2;
  border-radius: inherit;
  position: absolute;
  inset: 0;
}

.homeServerPulseCardLink:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -3px;
}

:where(.heroPlatformGrid article, .heroPlatformCta:not(.isPrimary), .heroFeature, .heroHitCard, .homeServerPulseCard) {
  background: var(--hero-glass-surface);
  -webkit-backdrop-filter: var(--hero-glass-filter);
  backdrop-filter: var(--hero-glass-filter);
  position: relative;
}

.homeServerPulseMedia {
  border-radius: 12px;
  grid-area: media;
  min-width: 0;
  min-height: 120px;
  position: relative;
  overflow: hidden;
}

.homeServerPulseMedia:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(#0000 48%, #000000ad);
  position: absolute;
  inset: 0;
}

.homeServerPulseMedia img {
  object-fit: cover;
  object-position: center;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.homeServerPulseCard:hover .homeServerPulseMedia img, .homeServerPulseCard:focus-visible .homeServerPulseMedia img {
  transform: scale(1.045);
}

.homeServerPulseMedia > span {
  z-index: 1;
  color: #ffffffc7;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 5.5px;
  font-weight: 760;
  position: absolute;
  bottom: 9px;
  left: 10px;
  right: 10px;
  overflow: hidden;
}

.homeServerPulseIdentity {
  grid-area: identity;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 1px 3px;
  display: grid;
}

.homeServerPulseIdentity > span {
  color: #ffffff85;
  letter-spacing: .075em;
  text-transform: uppercase;
  align-items: center;
  gap: 6px;
  font-size: 5.8px;
  font-weight: 760;
  display: flex;
}

.homeServerPulseIdentity > span i {
  background: #ffffff57;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.homeServerPulseIdentity > span[data-state="online"] i {
  background: #6be879;
}

.homeServerPulseIdentity > span[data-state="development"] i {
  background: var(--color-accent);
}

.homeServerPulseIdentity > strong {
  letter-spacing: -.02em;
  font-size: 24px;
  font-weight: 680;
  line-height: .95;
}

.homeServerPulseIdentity > p {
  color: #ffffff80;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 7px;
  line-height: 1.3;
  overflow: hidden;
}

.homeServerPulseChart {
  grid-area: chart;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 1px 3px;
  display: grid;
}

.homeServerPulseChart > span {
  color: #ffffff70;
  letter-spacing: .06em;
  text-transform: uppercase;
  align-items: center;
  gap: 5px;
  font-size: 5.8px;
  font-weight: 720;
  display: flex;
}

.homeServerPulseChart > span svg {
  color: #6be879;
  width: 10px;
  height: 10px;
}

.homeServerPulseChart > svg {
  width: 100%;
  height: 31px;
  overflow: visible;
}

.homeServerPulseChart line {
  stroke: #ffffff12;
  stroke-width: .7px;
  vector-effect: non-scaling-stroke;
}

.homeServerPulseChart polygon {
  fill: rgb(var(--color-accent-rgb) / .1);
}

.homeServerPulseChart polyline {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.8px;
  vector-effect: non-scaling-stroke;
}

.homeServerPulseChart circle {
  fill: #fff;
  stroke: var(--color-accent);
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
  animation: 1.7s ease-in-out infinite homePulseDot;
}

.homeServerPulseCard.isDevelopment .homeServerPulseChart {
  opacity: .34;
}

.homeServerPulseMetrics {
  grid-area: metrics;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  display: grid;
}

.homeServerPulseMetrics > span {
  align-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 34px;
  padding: 3px 10px;
  display: grid;
  position: relative;
}

.homeServerPulseMetrics > span + span:before {
  content: "";
  background: #ffffff14;
  width: 1px;
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
}

.homeServerPulseMetrics small {
  color: #ffffff61;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 5.5px;
  font-weight: 740;
}

.homeServerPulseMetrics strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  overflow: hidden;
}

.homeServerPulseActions {
  z-index: 3;
  grid-area: actions;
  justify-content: flex-end;
  align-self: center;
  gap: 5px;
  display: flex;
  position: relative;
}

.homeServerPulsePlay, .homeServerPulseRules {
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  transition: border-color .18s, background-color .18s, transform .18s;
  display: grid;
}

.homeServerPulsePlay {
  border: 1px solid rgb(var(--color-accent-rgb) / .38);
  background: rgb(var(--color-accent-rgb) / .06);
  color: var(--color-accent);
}

.homeServerPulseRules {
  color: #ffffffad;
  background: #ffffff0b;
  border: 1px solid #ffffff21;
}

.homeServerPulsePlay svg {
  fill: currentColor;
  stroke-width: 1.6px;
  width: 11px;
  height: 11px;
  transform: translateX(1px);
}

.homeServerPulseRules svg {
  stroke-width: 1.7px;
  width: 11px;
  height: 11px;
}

.homeServerPulseCard.isDevelopment .homeServerPulsePlay {
  opacity: .72;
}

.homeServerPulseCard .homeServerPulseIdentity > strong {
  transition: color .18s;
}

.homeServerPulseCard:hover .homeServerPulseIdentity > strong {
  color: var(--color-accent);
}

.homeServerPulsePlay:hover, .homeServerPulsePlay:focus-visible {
  border-color: var(--color-accent);
  background: rgb(var(--color-accent-rgb) / .13);
  transform: translate(2px, -2px);
}

.homeServerPulseRules:hover, .homeServerPulseRules:focus-visible {
  color: #fff;
  background: #ffffff1a;
  border-color: #ffffff57;
  transform: translateY(-2px);
}

@keyframes homePulseDot {
  50% {
    opacity: .4;
    r: 2.4px;
  }
}

.heroStats {
  grid-template-columns: 1fr 1fr;
  gap: 31px;
  margin-top: 31px;
  display: grid;
}

.heroStats strong {
  letter-spacing: -.015em;
  font-size: clamp(42px, 4.2vw, 69px);
  font-weight: 300;
  line-height: .9;
  display: block;
}

.heroStats p {
  color: #ffffff9e;
  max-width: 145px;
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.06;
}

.heroWord {
  z-index: 5;
  color: #fff;
  letter-spacing: -.062em;
  text-align: center;
  white-space: nowrap;
  font-family: Helvetica Neue, Arial Nova, Arial, sans-serif;
  font-size: min(11.3vw, 194px);
  font-weight: 900;
  line-height: .78;
  animation: 1.1s cubic-bezier(.22, 1, .36, 1) .18s both wordReveal;
  position: absolute;
  bottom: 4.2%;
  left: 3.1%;
  right: 3.1%;
}

.heroUniverse {
  z-index: 0;
  pointer-events: none;
  animation: 1.2s cubic-bezier(.22, 1, .36, 1) both universeReveal;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.heroUniverseImage {
  object-fit: cover;
  object-position: center center;
}

.heroUniverse:after {
  content: "";
  background: linear-gradient(90deg, #000000b3 0%, #0000002e 37%, #00000014 64%, #000000a3 100%), linear-gradient(#0000001f 0%, #0000 50%, #00000094 100%);
  position: absolute;
  inset: 0;
}

.heroWorldCore {
  background-color: #0000;
  background-image: linear-gradient(#ffffff06 1px, #0000 1px), linear-gradient(90deg, #ffffff06 1px, #0000 1px);
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
  background-size: 48px 48px;
  background-attachment: scroll, scroll;
  background-origin: padding-box, padding-box;
  background-clip: border-box, border-box;
}

.heroWorldOrbit {
  z-index: 0;
  border: 1px solid #ffffff30;
  border-radius: 50%;
  position: absolute;
}

.heroWorldOrbitOuter {
  inset: -9% 10% -18%;
  transform: rotate(-7deg);
}

.heroWorldOrbitInner {
  border-color: #ff5a0085;
  inset: 9% 24% 5%;
  transform: rotate(9deg);
}

.heroWorldAxis {
  z-index: 0;
  background: linear-gradient(90deg, #0000, #ffffff47 18%, #ff5a009e 50%, #ffffff47 82%, #0000);
  height: 1px;
  position: absolute;
  top: 48%;
  left: 4%;
  right: 4%;
  transform: rotate(-3deg);
}

.heroWorldNode {
  z-index: 2;
  background: var(--color-accent);
  border: 2px solid #000;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
}

.heroWorldNodeOne {
  top: 16%;
  left: 30%;
}

.heroWorldNodeTwo {
  top: 47%;
  right: 29%;
}

.heroWorldNodeThree {
  bottom: 18%;
  left: 45%;
}

.heroWorld {
  z-index: 1;
  background: var(--surface-subcard);
  border: 1px solid #ffffff7a;
  margin: 0;
  position: absolute;
  overflow: hidden;
}

.heroWorld img {
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}

.heroWorld:after {
  content: "";
  background: linear-gradient(#0000 52%, #000000b8);
  position: absolute;
  inset: 0;
}

.heroWorld figcaption {
  z-index: 2;
  color: #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  font-weight: 780;
  display: flex;
  position: absolute;
  bottom: 11px;
  left: 13px;
  right: 13px;
}

.heroWorld figcaption b {
  color: var(--color-accent);
  font-weight: 850;
}

.heroWorldAstra {
  border-radius: 44% 56% 50% 50% / 58% 50% 50% 42%;
  width: 39%;
  height: 33%;
  top: 1.5%;
  left: 31%;
}

.heroWorldAstra img {
  object-position: center 48%;
}

.heroWorldRust {
  border-radius: 58% 42% 54% 46% / 44% 56%;
  width: 28%;
  height: 31%;
  top: 18%;
  left: 1.5%;
  transform: rotate(-4deg);
}

.heroWorldGta {
  border-radius: 47% 53% 38% 62% / 52% 43% 57% 48%;
  width: 27%;
  height: 29%;
  top: 51%;
  right: 7%;
  transform: rotate(4deg);
}

.heroWorldGta img {
  object-position: left center;
}

.heroWorldCs {
  border-radius: 48% 52% 58% 42% / 55% 42% 58% 45%;
  width: 25%;
  height: 25%;
  top: 54%;
  left: 9%;
  transform: rotate(3deg);
}

.heroWorldDayz {
  border-radius: 43% 57% 45% 55% / 58% 44% 56% 42%;
  width: 26%;
  height: 30%;
  top: 16%;
  right: 1.5%;
  transform: rotate(3deg);
}

.heroWorldSevenDays {
  border-radius: 50%;
  width: 18%;
  height: 22%;
  top: 45%;
  left: 36%;
  transform: rotate(-3deg);
}

.heroWorldReckfell {
  border-radius: 50%;
  width: 17%;
  height: 22%;
  top: 43%;
  right: 31%;
  transform: rotate(4deg);
}

.heroWorldCore:after {
  content: "";
  background: linear-gradient(90deg, #000000ad 0%, #0000 31% 69%, #000000ad 100%), linear-gradient(#0000001f 0%, #0000 44%, #0000009e 100%);
  position: absolute;
  inset: 0;
}

.scrollHint {
  z-index: 7;
  color: #ffffff94;
  letter-spacing: .06em;
  text-transform: uppercase;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  display: flex;
  position: absolute;
  bottom: 3.2%;
  left: 4.3%;
}

.scrollHint i {
  border: 1px solid var(--border-strong);
  color: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  font-style: normal;
  display: inline-flex;
}

.heroAnchor {
  position: absolute;
  bottom: 0;
  left: 0;
}

@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wordReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes universeReveal {
  from {
    opacity: 0;
    transform: scale(1.025);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 1180px) {
  .desktopNav {
    gap: 18px;
  }

  .desktopNav a {
    font-size: 9px;
  }

  .heroCopy {
    width: 45vw;
  }

  .heroRightStack {
    width: min(35vw, 410px);
  }

  .heroWord {
    font-size: min(12vw, 180px);
  }
}

@media (max-width: 920px) {
  .pageShell {
    --page-shell-gutter: 6px;
    padding: 6px;
  }

  .heroFrame {
    border-radius: 34px;
    height: max(760px, 100svh - 12px);
    min-height: calc(100svh - 12px);
  }

  .siteHeader {
    grid-template-columns: 1fr auto;
    height: 76px;
    padding: 0 28px;
  }

  .desktopNav {
    display: none;
  }

  .brandLink {
    grid-column: 1;
    justify-content: flex-start;
    width: auto;
  }

  .headerControls {
    grid-column: 2;
    align-items: center;
    gap: 15px;
    display: flex;
  }

  .localeLink {
    color: #ffffffb8;
    letter-spacing: .08em;
    justify-content: center;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 11px;
    display: inline-flex;
  }

  .menuButton {
    z-index: 31;
    background: #07070773;
    border: 1px solid #ffffff47;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    display: flex;
    position: relative;
  }

  .menuButton span {
    background: #fff;
    width: 100%;
    height: 1px;
    transition: transform .22s;
    display: block;
  }

  .menuButton[aria-expanded="true"] span:first-child {
    transform: translateY(4px)rotate(45deg);
  }

  .menuButton[aria-expanded="true"] span:last-child {
    transform: translateY(-4px)rotate(-45deg);
  }

  .mobileMenu {
    z-index: 30;
    background: var(--surface-card);
    opacity: 0;
    pointer-events: none;
    border: 1px solid #ffffff2e;
    border-radius: 34px;
    flex-direction: column;
    justify-content: flex-end;
    padding: 96px 30px 28px;
    transition: opacity .26s, transform .26s;
    display: flex;
    position: fixed;
    inset: 6px;
    overflow: hidden;
    transform: translateY(-14px)scale(.985);
  }

  .mobileMenu[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0)scale(1);
  }

  .mobileMenuGlow {
    background: radial-gradient(circle,
      var(--color-accent) 0,
      #b91800 28%,
      transparent 68%);
    filter: blur(28px);
    border-radius: 50%;
    width: 120%;
    height: 75%;
    position: absolute;
    top: -18%;
    right: -40%;
  }

  .mobileMenuNav {
    z-index: 1;
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .mobileMenuNav a {
    letter-spacing: -.015em;
    align-items: baseline;
    gap: 20px;
    padding: 8px 0;
    font-size: clamp(28px, 8vw, 48px);
    font-weight: 350;
    line-height: 1;
    display: flex;
  }

  .mobileMenuNav a span {
    color: #ffffff73;
    letter-spacing: 0;
    width: 24px;
    font-size: 9px;
  }

  .mobileMenuFooter {
    z-index: 1;
    border-top: 1px solid var(--border-strong);
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 25px;
    padding-top: 20px;
    display: flex;
    position: relative;
  }

  .mobileMenuFooter a {
    letter-spacing: .1em;
    font-size: 12px;
  }

  .heroCopy {
    width: auto;
    inset: auto 28px 6.5%;
  }

  .eyebrow {
    margin-bottom: 12px;
    font-size: 11.5px;
    font-weight: 760;
  }

  .heroCopy h1 {
    font-size: clamp(42px, 9.5vw, 70px);
  }

  .heroDescription {
    width: min(540px, 100%);
    margin: 14px 0 0;
    font-size: 11.5px;
    line-height: 1.34;
  }

  .heroPlatformGrid {
    max-width: 620px;
    margin-top: 13px;
  }

  .heroActions {
    margin-top: 12px;
  }

  .button {
    min-height: 54px;
  }

  .buttonPrimary {
    width: 186px;
  }

  .heroRightStack {
    display: none;
  }

  .heroMobileEditorial {
    gap: 8px;
    margin: 8px;
    display: grid;
  }

  .heroMobileEditorial .heroFeature, .heroMobileEditorial .heroHitCard {
    width: 100%;
  }

  .heroMobileEditorial .heroHitCard {
    min-height: 148px;
  }

  .heroStatusDeck {
    margin: 8px;
  }

  .homeServerPulse {
    background: none;
    border-radius: 24px;
    padding: 11px;
  }

  .homeServerPulse > header {
    min-height: 52px;
    padding: 0 9px 9px;
  }

  .homeServerPulse > header > div {
    gap: 5px;
    display: grid;
  }

  .homeServerPulse > header h2 {
    font-size: 19px;
  }

  .homeServerPulseGrid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .homeServerPulseCard {
    grid-template: "media media" 170px
                   "identity actions"
                   "chart chart" minmax(72px, auto)
                   "metrics metrics"
                   / minmax(0, 1fr) auto;
    align-content: center;
    gap: 13px;
    min-height: 390px;
    padding: 10px 10px 18px;
  }

  .homeServerPulseMedia {
    min-height: 170px;
  }

  .homeServerPulseIdentity > strong {
    font-size: 30px;
  }

  .homeServerPulseIdentity > p {
    font-size: 8px;
  }

  .homeServerPulseChart > svg {
    height: 54px;
  }

  .homeServerPulseMetrics > span {
    min-height: 52px;
    padding: 8px;
  }

  .homeServerPulseMetrics strong {
    font-size: 10px;
  }

  .heroUniverseImage {
    object-position: 42% center;
  }

  .heroUniverse:after {
    background: linear-gradient(#00000014 0%, #0000002e 38%, #000 72%);
  }

  .heroWord {
    letter-spacing: -.068em;
    text-align: center;
    font-size: clamp(58px, 15vw, 108px);
    line-height: .82;
    display: block;
    inset: 37% 24px auto;
  }

  .heroWorldCore {
    background-size: 36px 36px;
  }

  .heroWorldOrbitOuter {
    inset: -2% -36% 37%;
  }

  .heroWorldOrbitInner {
    inset: 5% -2% 49%;
  }

  .heroWorldAxis {
    top: 34%;
  }

  .heroWorldNodeOne {
    top: 9%;
    left: 15%;
  }

  .heroWorldNodeTwo {
    top: 33%;
    right: 19%;
  }

  .heroWorldNodeThree {
    top: 52%;
    bottom: auto;
    left: 47%;
  }

  .heroWorld figcaption {
    gap: 5px;
    font-size: 6px;
    bottom: 7px;
    left: 8px;
    right: 8px;
  }

  .heroWorldAstra {
    width: 78%;
    height: 24%;
    top: 1.5%;
    left: 11%;
  }

  .heroWorldRust {
    width: 60%;
    height: 19%;
    top: 20%;
    left: -11%;
  }

  .heroWorldGta {
    width: 59%;
    height: 19%;
    top: 26%;
    right: -10%;
  }

  .heroWorldCs {
    width: 50%;
    height: 16%;
    top: 41%;
    left: -2%;
  }

  .heroWorldDayz {
    width: 50%;
    height: 16%;
    top: 41%;
    right: -2%;
  }

  .heroWorldSevenDays {
    width: 34%;
    height: 13%;
    top: 53%;
    left: 17%;
  }

  .heroWorldReckfell {
    width: 34%;
    height: 13%;
    top: 53%;
    right: 14%;
  }

  .heroWorldCore:after {
    background: linear-gradient(#0000000d 0%, #0000 37%, #000000c7 63%, #000 78%);
  }

  .heroGlowLeft {
    width: 140%;
    height: 86%;
    top: -12%;
    left: -60%;
  }

  .heroGlowBottom {
    width: 90%;
    height: 58%;
    bottom: 10%;
    left: 18%;
  }

  .scrollHint {
    display: none;
  }
}

@media (max-width: 560px) {
  .heroFrame {
    border-radius: 28px;
    height: max(720px, 100svh - 12px);
  }

  .siteHeader {
    height: 70px;
    padding: 0 20px;
  }

  .wordmark {
    font-size: 14px;
  }

  .mobileMenu {
    border-radius: 28px;
    padding: 86px 23px 24px;
  }

  .heroCopy {
    bottom: 3.5%;
    left: 20px;
    right: 20px;
  }

  .heroCopy h1 {
    font-size: clamp(40px, 11.8vw, 58px);
    line-height: .91;
  }

  .heroCopy h1 span {
    white-space: normal;
  }

  .heroDescription {
    max-width: none;
    font-size: 10.5px;
  }

  .heroPlatformGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-top: 11px;
  }

  .heroPlatformGrid article {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 6px;
    min-height: 62px;
    padding: 7px;
  }

  .heroPlatformGrid svg {
    width: 14px;
    height: 14px;
  }

  .heroPlatformGrid small {
    font-size: 7px;
  }

  .heroPlatformGrid strong {
    font-size: 9.2px;
  }

  .heroActions {
    gap: 7px;
  }

  .heroPlatformCta strong {
    white-space: normal;
    font-size: 8.5px;
    line-height: 1.08;
  }

  .button {
    min-height: 50px;
    font-size: 11px;
  }

  .buttonPrimary {
    width: 169px;
    padding-left: 18px;
  }

  .buttonIcon {
    width: 40px;
    height: 40px;
  }

  .buttonSecondary {
    min-width: 128px;
    padding: 0 16px;
  }

  .heroWord {
    font-size: clamp(52px, 15vw, 78px);
    top: 37.5%;
    left: 20px;
    right: 20px;
  }

  .scrollHint {
    bottom: 2.4%;
    left: 20px;
  }

  .scrollHint span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.adminPage {
  --admin-red: #b81300;
  background: var(--surface-card);
  color: #f5f3ee;
  min-height: 100vh;
}

.adminTopbar {
  z-index: 20;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #060606f0;
  border-bottom: 1px solid #ffffff24;
  justify-content: space-between;
  align-items: center;
  height: 78px;
  padding: 0 26px;
  display: flex;
  position: relative;
}

.adminBrand {
  color: #fff;
  align-items: baseline;
  gap: 13px;
  text-decoration: none;
  display: flex;
}

.adminBrand span {
  letter-spacing: -.015em;
  font-size: 24px;
  font-weight: 620;
}

.adminBrand i, .adminTopStatus {
  color: #ffffff7a;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
}

.adminTopStatus {
  align-items: center;
  gap: 9px;
  display: flex;
}

.adminTopStatus span, .adminLiveDot {
  background: #6df58a;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 20px #6df58ae6;
}

.adminGate {
  isolation: isolate;
  background: linear-gradient(180deg, transparent 45%, #000000e0),
    radial-gradient(circle at 80% 0%,
      #cb2400,
      #440500 28%,
      var(--surface-card) 62%);
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: calc(100vh - 78px);
  padding: clamp(40px, 5vw, 84px);
  display: flex;
  position: relative;
  overflow: hidden;
}

.adminGateGlow {
  z-index: -1;
  background: radial-gradient(circle,
    rgb(var(--color-accent-rgb) / .9),
    transparent 65%);
  filter: blur(45px);
  border-radius: 50%;
  width: 68vw;
  height: 68vw;
  position: absolute;
  top: -22vw;
  right: -8vw;
}

.adminGate > p, .adminWorkspaceHead p, .adminModuleHead p, .adminEditorHead p, .adminWelcome > p {
  color: #ffffff8a;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin: 0;
  font-size: 9px;
  font-weight: 650;
}

.adminGate h1 {
  letter-spacing: -.015em;
  max-width: 1050px;
  margin: 25px 0 0;
  font-size: clamp(72px, 11vw, 184px);
  font-weight: 340;
  line-height: .78;
}

.adminGate > span {
  color: #ffffffa3;
  max-width: 560px;
  margin-top: 34px;
  font-size: 14px;
  line-height: 1.45;
}

.adminGate > div:last-child {
  gap: 9px;
  margin-top: 42px;
  display: flex;
}

.adminButton {
  color: #fff;
  cursor: pointer;
  min-height: 45px;
  font: inherit;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: none;
  border: 1px solid #fff3;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 0 19px;
  font-size: 10px;
  font-weight: 620;
  text-decoration: none;
  transition: border-color .18s, background .18s, color .18s, transform .18s;
  display: inline-flex;
}

.adminButton:hover, .adminButton:focus-visible {
  border-color: #ffffffb8;
  outline: none;
  transform: translateY(-2px);
}

.adminButton:disabled {
  cursor: wait;
  opacity: .42;
}

.adminButton.primary {
  color: #070707;
  background: #fff;
  border-color: #fff;
}

.adminButton.danger {
  border-color: var(--color-accent);
  color: #fff;
  background: #e93212;
}

.adminButton.wide {
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  margin-top: 10px;
  padding: 0 25px;
}

.adminShell {
  grid-template-columns: 290px minmax(0, 1fr);
  min-height: calc(100vh - 78px);
  display: grid;
}

.adminSidebar {
  background: var(--surface-card);
  border-right: 1px solid #ffffff21;
  flex-direction: column;
  height: calc(100vh - 78px);
  padding: 22px 12px 16px;
  display: flex;
  position: sticky;
  top: 0;
}

.adminIdentity {
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 8px 10px 26px;
  display: grid;
}

.adminIdentity > span, .adminAvatar {
  background: linear-gradient(145deg,
    var(--color-accent),
    #b20a00 65%,
    #400000);
  color: #fff;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 50px;
  height: 50px;
  font-size: 18px;
  font-weight: 550;
  display: grid;
}

.adminIdentity div {
  min-width: 0;
}

.adminIdentity strong, .adminIdentity small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.adminIdentity strong {
  font-size: 13px;
  font-weight: 500;
}

.adminIdentity small {
  color: #ffffff6b;
  margin-top: 5px;
  font-size: 9px;
}

.adminSidebar nav {
  scrollbar-width: none;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  display: flex;
  overflow-y: auto;
}

.adminSidebar nav::-webkit-scrollbar {
  display: none;
}

.adminSidebar nav button {
  color: #ffffff85;
  cursor: pointer;
  min-height: 58px;
  font: inherit;
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 14px;
  grid-template-columns: 32px 1fr 20px;
  align-items: center;
  padding: 0 16px;
  transition: color .18s, background .18s, border-color .18s;
  display: grid;
}

.adminSidebar nav button i, .adminSidebar nav button b {
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
}

.adminSidebar nav button b {
  opacity: 0;
  transition: opacity .18s, transform .18s;
  transform: translate(-4px, 4px);
}

.adminSidebar nav button span {
  font-size: 12px;
}

.adminSidebar nav button:hover, .adminSidebar nav button.active {
  color: #fff;
  background: #ffffff0e;
  border-color: #ffffff1a;
}

.adminSidebar nav button.active b {
  opacity: 1;
  transform: none;
}

.adminSidebar nav button b[data-count="true"] {
  background: rgb(var(--color-accent-rgb) / .18);
  min-width: 20px;
  height: 20px;
  color: var(--color-accent);
  opacity: 1;
  border-radius: 999px;
  place-items: center;
  padding: 0 5px;
  display: grid;
  transform: none;
}

.adminSidebarBottom {
  border-top: 1px solid #ffffff1f;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding: 18px 14px 4px;
  display: flex;
}

.adminSidebarBottom a {
  color: #ffffff80;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 9px;
  text-decoration: none;
}

.adminSidebarBottom a:hover {
  color: #fff;
}

.adminWorkspace {
  background: radial-gradient(circle at 92% -8%, #cb230052, transparent 32%),
    var(--surface-card);
  min-width: 0;
  padding: 24px;
  position: relative;
}

.adminWorkspaceHead {
  justify-content: space-between;
  align-items: flex-end;
  min-height: 180px;
  padding: 30px 5px;
  display: flex;
}

.adminWorkspaceHead h1 {
  letter-spacing: -.015em;
  margin: 17px 0 0;
  font-size: clamp(60px, 7vw, 112px);
  font-weight: 340;
  line-height: .82;
}

.adminWorkspaceTools {
  color: #ffffff70;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
  gap: 14px;
  padding-bottom: 7px;
  font-size: 9px;
  display: flex;
}

.adminWorkspaceTools > span {
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.adminWorkspaceTools small {
  color: #ffffff42;
  font-size: inherit;
}

.adminWorkspaceTools button {
  color: #ffffffbf;
  cursor: pointer;
  min-height: 38px;
  font: inherit;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #ffffff09;
  border: 1px solid #ffffff26;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  display: inline-flex;
}

.adminWorkspaceTools button:hover {
  color: #fff;
  border-color: #ffffff6b;
}

.adminWorkspaceTools button:disabled {
  cursor: wait;
  opacity: .45;
}

.adminWorkspaceTools button b {
  font-size: inherit;
  font-weight: 600;
}

.adminNotice {
  color: #a2ffb5;
  background: #6df58a12;
  border: 1px solid #6df58a47;
  border-radius: 15px;
  margin-bottom: 9px;
  padding: 15px 18px;
  font-size: 11px;
}

.adminNotice.error {
  border-color: rgb(var(--color-accent-rgb) / .4);
  color: #ff8b72;
  background: #ff311414;
}

.adminProgress {
  height: 2px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.adminProgress span {
  background: var(--color-accent);
  width: 36%;
  height: 100%;
  animation: .9s ease-in-out infinite alternate admin-loading;
  display: block;
}

@keyframes admin-loading {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(280%);
  }
}

.adminWelcome, .adminModule, .adminPermissionStrip {
  background: var(--surface-card);
  border: 1px solid #ffffff24;
  border-radius: 30px;
  overflow: hidden;
}

.adminWelcome {
  background: radial-gradient(circle at 92% 0%,
    var(--color-accent),
    #b31500 28%,
    #300 55%,
    var(--surface-card) 80%);
  min-height: 530px;
  padding: clamp(34px, 5vw, 72px);
}

.adminWelcome h2 {
  letter-spacing: -.015em;
  margin: 55px 0 0;
  font-size: clamp(70px, 9vw, 142px);
  font-weight: 330;
  line-height: .78;
}

.adminWelcome > span {
  color: #ffffffa3;
  max-width: 520px;
  margin-top: 46px;
  font-size: 13px;
  line-height: 1.45;
  display: block;
}

.adminMetricGrid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 8px;
  display: grid;
}

.adminMetricGrid article {
  background: var(--surface-card);
  border: 1px solid #ffffff24;
  border-radius: 24px;
  flex-direction: column;
  min-height: 310px;
  padding: 25px;
  display: flex;
}

.adminMetricGrid article:nth-child(2) {
  color: #090909;
  background: #f2f0eb;
}

.adminMetricGrid article > div {
  opacity: .55;
  justify-content: space-between;
  font-size: 9px;
  display: flex;
}

.adminMetricGrid article > div i {
  font-style: normal;
}

.adminMetricGrid strong {
  letter-spacing: -.015em;
  margin-top: auto;
  font-size: clamp(68px, 6vw, 100px);
  font-weight: 350;
  line-height: .8;
}

.adminMetricGrid h3 {
  margin: 18px 0 0;
  font-size: 17px;
  font-weight: 460;
}

.adminMetricGrid p {
  opacity: .48;
  margin: 7px 0 0;
  font-size: 10px;
}

.adminPermissionStrip {
  margin-top: 8px;
  padding: 28px;
}

.adminPermissionStrip > span {
  color: #ffffff80;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
}

.adminPermissionStrip div {
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
  display: flex;
}

.adminPermissionStrip i, .adminUserMain > i {
  color: #ffffff8c;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid #ffffff26;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 8px;
  font-style: normal;
}

.adminAccessMatrix {
  background: var(--surface-card);
  border: 1px solid #ffffff24;
  border-radius: 30px;
  margin-top: 8px;
  padding: clamp(26px, 4vw, 52px);
}

.adminAccessMatrix > header {
  justify-content: space-between;
  align-items: flex-end;
  gap: 35px;
  margin-bottom: 34px;
  display: flex;
}

.adminAccessMatrix > header p {
  color: var(--color-accent);
  letter-spacing: .1em;
  margin: 0;
  font-size: 8px;
}

.adminAccessMatrix > header h2 {
  letter-spacing: -.015em;
  max-width: 780px;
  margin: 14px 0 0;
  font-size: clamp(42px, 5vw, 78px);
  font-weight: 350;
  line-height: .88;
}

.adminAccessMatrix > header > span {
  color: #ffffff6b;
  max-width: 260px;
  font-size: 10px;
  line-height: 1.5;
}

.adminAccessMatrix > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.adminAccessMatrix article {
  background: #ffffff05;
  border: 0;
  border-radius: 20px;
  min-width: 0;
  padding: 20px;
}

.adminAccessMatrix article[data-owned="true"] {
  background: radial-gradient(circle at 100% 0%,
      color-mix(in srgb, var(--role-accent) 25%, transparent),
      transparent 42%),
    color-mix(in srgb, var(--role-accent) 7%, var(--surface-subcard));
}

.adminAccessMatrix article > header {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
  display: grid;
}

.adminAccessMatrix article > header > span {
  color: var(--role-accent);
  font-size: 9px;
}

.adminAccessMatrix article h3 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: 19px;
  font-weight: 430;
}

.adminAccessMatrix article small {
  color: #ffffff4d;
  text-transform: uppercase;
  margin-top: 5px;
  font-size: 8px;
  display: block;
}

.adminAccessMatrix article b {
  background: var(--role-accent);
  color: #090909;
  letter-spacing: .06em;
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 7px;
  font-weight: 700;
}

.adminAccessMatrix article > div {
  border-top: 1px solid #ffffff17;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 18px;
  padding-top: 15px;
  display: flex;
}

.adminAccessMatrix article i {
  color: #ffffff75;
  border: 1px solid #ffffff1a;
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 7px;
  font-style: normal;
}

.adminAccessMatrix article em {
  color: #ffffff52;
  font-size: 9px;
  font-style: normal;
}

.adminModule {
  padding: clamp(20px, 3vw, 42px);
}

.adminModule.split {
  background: none;
  border: 0;
  grid-template-columns: minmax(360px, .82fr) minmax(430px, 1.18fr);
  align-items: start;
  gap: 9px;
  padding: 9px;
  display: grid;
}

.adminModuleHead, .adminRecordsHead, .adminEditorHead {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.adminModuleHead h2, .adminEditorHead h2, .adminRecordsHead h2 {
  letter-spacing: -.015em;
  margin: 15px 0 0;
  font-size: clamp(48px, 5vw, 82px);
  font-weight: 350;
  line-height: .84;
}

.adminModuleHead > strong, .adminRecordsHead > span {
  color: #ffffff40;
  letter-spacing: -.015em;
  font-size: 58px;
  font-weight: 350;
  line-height: .8;
}

.adminSearch {
  border: 1px solid #ffffff24;
  border-radius: 19px;
  grid-template-columns: 1fr auto;
  gap: 9px;
  margin-top: 45px;
  padding: 8px;
  display: grid;
}

.adminSearch label {
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 8px 13px;
  display: flex;
}

.adminSearch label span, .adminField > span {
  color: #ffffff6e;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 600;
}

.adminSearch input, .adminField input, .adminField textarea, .adminField select {
  color: #fff;
  width: 100%;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  font-size: 13px;
}

.adminUserList {
  flex-direction: column;
  gap: 7px;
  margin-top: 20px;
  display: flex;
}

.adminUsersLayout {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin-top: 20px;
  display: grid;
}

.adminUsersLayout[data-open="true"] {
  grid-template-columns: minmax(520px, 1.08fr) minmax(410px, .92fr);
}

.adminUsersLayout .adminUserList {
  margin-top: 0;
}

.adminUserCard {
  background: var(--surface-card);
  border: 1px solid #ffffff21;
  border-radius: 20px;
  padding: 16px;
}

.adminUserCard[data-selected="true"] {
  border-color: rgb(var(--color-accent-rgb) / .55);
}

.adminUserMain {
  align-items: center;
  gap: 14px;
  display: flex;
}

.adminUserMain > div {
  min-width: 0;
  margin-right: auto;
}

.adminUserMain h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 480;
}

.adminUserMain p, .adminUserMain small {
  color: #ffffff80;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 5px 0 0;
  font-size: 10px;
  display: block;
  overflow: hidden;
}

.adminUserMain > i[data-status="active"] {
  color: #8ef7a4;
  border-color: #6df58a40;
}

.adminUserMain > i[data-status="blocked"] {
  border-color: rgb(var(--color-accent-rgb) / .35);
  color: var(--color-accent);
}

.adminUserActions {
  border-top: 1px solid #ffffff1a;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 15px;
  margin-top: 16px;
  padding-top: 15px;
  display: flex;
}

.adminRoleForm {
  background: #ffffff09;
  border-radius: 19px;
  flex: 100%;
  grid-template-columns: 1fr auto;
  gap: 13px;
  width: 100%;
  padding: 14px;
  display: grid;
}

.adminRoleFormHead {
  grid-column: 1 / -1;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 1px 2px 0;
  display: flex;
}

.adminRoleFormHead > div {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.adminRoleFormHead strong {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 620;
}

.adminRoleFormHead span, .adminRoleFormHead > small {
  color: #ffffff59;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 400;
}

.adminRoleChoices {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 6px;
  display: grid;
}

.adminRoleChoices label {
  --role-accent: #8a8a8a;
  cursor: pointer;
  min-width: 0;
}

.adminRoleChoices input {
  opacity: 0;
  position: absolute;
}

.adminRoleChoices label > span {
  color: #ffffff73;
  background: #ffffff09;
  border-radius: 14px;
  grid-template-rows: auto auto;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-content: center;
  column-gap: 8px;
  min-height: 57px;
  padding: 10px;
  transition: background .15s, color .15s, transform .15s;
  display: grid;
}

.adminRoleChoices label:hover > span {
  background: #ffffff12;
  transform: translateY(-1px);
}

.adminRoleChoices label > span > i {
  background: #ffffff2e;
  border-radius: 50%;
  grid-row: 1 / 3;
  align-self: center;
  width: 9px;
  height: 9px;
}

.adminRoleChoices label > span > b {
  color: inherit;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 620;
  overflow: hidden;
}

.adminRoleChoices label > span > small {
  color: #ffffff47;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 7px;
  overflow: hidden;
}

.adminRoleChoices label > span > em {
  color: #ffffff3d;
  grid-row: 1 / 3;
  align-self: center;
  font-size: 9px;
  font-style: normal;
}

.adminRoleChoices input:checked + span {
  background: color-mix(in srgb,
    var(--role-accent) 18%,
    var(--surface-subcard));
  color: color-mix(in srgb, var(--role-accent) 88%, #fff);
}

.adminRoleChoices input:checked + span > i {
  background: var(--role-accent);
  box-shadow: 0 0 13px color-mix(in srgb, var(--role-accent) 58%, transparent);
}

.adminRoleChoices input:checked + span > small {
  color: color-mix(in srgb, var(--role-accent) 64%, #ffffff57);
}

.adminRoleChoices input:checked + span > em {
  color: var(--role-accent);
}

.adminRoleChoices input:focus-visible + span {
  box-shadow: 0 0 0 2px var(--role-accent);
}

.adminRoleChoices label[data-base="true"] {
  cursor: default;
}

.adminRoleForm .adminButton {
  align-self: stretch;
  min-height: 57px;
  margin: 0;
}

.adminSecurityPanel {
  background: radial-gradient(circle at 100% 0%,
      rgb(var(--color-accent-rgb) / .19),
      transparent 31%),
    var(--surface-card);
  scrollbar-color: #fff3 transparent;
  scrollbar-width: thin;
  border: 1px solid #ffffff24;
  border-radius: 25px;
  max-height: calc(100vh - 102px);
  padding: clamp(20px, 2.5vw, 34px);
  position: sticky;
  top: 12px;
  overflow-y: auto;
}

.adminSecurityPanel > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  display: flex;
}

.adminSecurityPanel > header p {
  color: var(--color-accent);
  letter-spacing: .1em;
  margin: 0;
  font-size: 8px;
}

.adminSecurityPanel > header h2 {
  overflow-wrap: anywhere;
  letter-spacing: -.015em;
  margin: 13px 0 0;
  font-size: clamp(38px, 4vw, 64px);
  font-weight: 360;
  line-height: .86;
}

.adminSecurityPanel > header div > span {
  color: #ffffff6e;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 13px;
  font-size: 9px;
  display: block;
  overflow: hidden;
}

.adminSecurityPanel > header > button {
  color: #fff;
  cursor: pointer;
  background: none;
  border: 1px solid #ffffff2b;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 20px;
  display: grid;
}

.adminSecurityLoading {
  color: #fff6;
  min-height: 220px;
  padding-top: 60px;
  font-size: 10px;
}

.adminSecurityStats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 26px;
  display: grid;
}

.adminSecurityStats article {
  background: #ffffff05;
  border: 1px solid #ffffff1c;
  border-radius: 16px;
  min-height: 112px;
  padding: 15px;
}

.adminSecurityStats article[data-safe="false"] {
  border-color: rgb(var(--color-accent-rgb) / .35);
  background: rgb(var(--color-accent-rgb) / .05);
}

.adminSecurityStats span, .adminSecurityStats small {
  color: #ffffff5e;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 7px;
  display: block;
}

.adminSecurityStats strong {
  letter-spacing: -.015em;
  margin-top: 24px;
  font-size: 27px;
  font-weight: 390;
  display: block;
}

.adminSecurityStats small {
  margin-top: 5px;
}

.adminLinkedIdentities {
  border: 1px solid #ffffff1c;
  border-radius: 17px;
  margin-top: 9px;
  padding: 17px;
}

.adminLinkedIdentities > div {
  color: #ffffff61;
  letter-spacing: .06em;
  text-transform: uppercase;
  justify-content: space-between;
  font-size: 8px;
  display: flex;
}

.adminLinkedIdentities > a {
  color: #fff;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  text-decoration: none;
  display: grid;
}

.adminLinkedIdentities > a > img, .adminLinkedIdentities > a > i {
  object-fit: cover;
  background: var(--surface-subcard);
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  font-style: normal;
  display: grid;
}

.adminLinkedIdentities > a div {
  min-width: 0;
}

.adminLinkedIdentities > a strong, .adminLinkedIdentities > a span {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.adminLinkedIdentities > a strong {
  font-size: 12px;
  font-weight: 480;
}

.adminLinkedIdentities > a span {
  color: #ffffff59;
  margin-top: 5px;
  font-size: 7px;
}

.adminLinkedIdentities > a > b {
  color: var(--color-accent);
  font-size: 10px;
}

.adminSessionToolbar {
  border-bottom: 1px solid #ffffff1a;
  justify-content: space-between;
  align-items: center;
  gap: 13px;
  margin-top: 25px;
  padding-bottom: 12px;
  display: flex;
}

.adminSessionToolbar > div {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.adminSessionToolbar button {
  color: #ffffff7a;
  cursor: pointer;
  font: inherit;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: none;
  border: 1px solid #ffffff1c;
  border-radius: 999px;
  padding: 7px 9px;
  font-size: 7px;
}

.adminSessionToolbar button[aria-pressed="true"] {
  border-color: rgb(var(--color-accent-rgb) / .5);
  background: rgb(var(--color-accent-rgb) / .12);
  color: var(--color-accent);
}

.adminSessionToolbar > button {
  border-color: rgb(var(--color-accent-rgb) / .32);
  color: var(--color-accent);
}

.adminSessionList {
  flex-direction: column;
  gap: 7px;
  margin-top: 13px;
  display: flex;
}

.adminSessionCard {
  opacity: .62;
  background: #ffffff05;
  border: 1px solid #ffffff1a;
  border-radius: 17px;
  padding: 17px;
}

.adminSessionCard[data-active="true"] {
  opacity: 1;
}

.adminSessionCard > header {
  color: #ffffff5e;
  letter-spacing: .07em;
  align-items: center;
  gap: 7px;
  font-size: 7px;
  display: flex;
}

.adminSessionCard > header > span {
  color: var(--color-accent);
}

.adminSessionCard > header > b {
  color: #080808;
  background: #fff;
  border-radius: 999px;
  padding: 4px 6px;
  font-size: 6px;
}

.adminSessionCard > header > i {
  color: #ffffff57;
  margin-left: auto;
  font-style: normal;
}

.adminSessionCard[data-active="true"] > header > i {
  color: #87ed9b;
}

.adminSessionCard h3 {
  letter-spacing: -.015em;
  margin: 18px 0 0;
  font-size: 21px;
  font-weight: 420;
}

.adminSessionCard > p {
  color: #ffffff6b;
  margin: 7px 0 0;
  font-size: 8px;
}

.adminSessionCard dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 16px 0 0;
  display: grid;
}

.adminSessionCard dl > div {
  border: 1px solid #ffffff14;
  border-radius: 10px;
  padding: 9px;
}

.adminSessionCard dt {
  color: #ffffff4d;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 6px;
}

.adminSessionCard dd {
  color: #ffffffab;
  margin: 6px 0 0;
  font-size: 8px;
}

.adminSessionScopes {
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 11px;
  display: flex;
}

.adminSessionScopes i {
  color: #fff6;
  border: 1px solid #ffffff17;
  border-radius: 999px;
  padding: 5px 6px;
  font-size: 6px;
  font-style: normal;
}

.adminSessionCard details {
  color: #ffffff57;
  margin-top: 11px;
  font-size: 7px;
}

.adminSessionCard details summary {
  cursor: pointer;
}

.adminSessionCard details p {
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.adminSessionCard > button {
  color: var(--color-accent);
  cursor: pointer;
  font: inherit;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: none;
  border: 0;
  margin-top: 14px;
  padding: 0;
  font-size: 7px;
}

.adminPrivacyFilters {
  background: #ffffff04;
  border: 1px solid #ffffff24;
  border-radius: 20px;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, .25fr) minmax(180px, .32fr) auto;
  gap: 0;
  margin-top: 42px;
  padding: 7px;
  display: grid;
}

.adminPrivacyFilters .adminField {
  margin: 0;
  padding: 9px 13px;
}

.adminPrivacyFilters .adminField + .adminField {
  border-left: 1px solid #ffffff1a;
}

.adminPrivacyFilters .adminButton {
  align-self: stretch;
  min-height: 49px;
}

.adminPrivacyQueue {
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  display: flex;
}

.adminPrivacyCard {
  background: var(--surface-card);
  border: 1px solid #ffffff21;
  border-radius: 23px;
  overflow: hidden;
}

.adminPrivacyCard[data-overdue="true"] {
  border-color: rgb(var(--color-accent-rgb) / .48);
}

.adminPrivacyCard[data-status="completed"], .adminPrivacyCard[data-status="rejected"] {
  opacity: .72;
}

.adminPrivacyCard > header {
  background: radial-gradient(circle at 100% 0%,
    rgb(var(--color-accent-rgb) / .09),
    transparent 32%);
  border-bottom: 1px solid #ffffff1a;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 22px 24px;
  display: flex;
}

.adminPrivacyCard > header > div:first-child {
  min-width: 0;
}

.adminPrivacyCard > header span {
  color: var(--color-accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 8px;
}

.adminPrivacyCard > header h3 {
  letter-spacing: -.015em;
  margin: 12px 0 0;
  font-size: 22px;
  font-weight: 450;
}

.adminPrivacyCard > header h3 small {
  color: #ffffff61;
  letter-spacing: 0;
  font-size: 10px;
  font-weight: 450;
}

.adminPrivacyCard > header a {
  color: #ffffff7a;
  text-overflow: ellipsis;
  margin-top: 7px;
  font-size: 9px;
  text-decoration: none;
  display: block;
  overflow: hidden;
}

.adminPrivacyCard > header > div:last-child {
  text-align: right;
  flex-direction: column;
  flex: none;
  align-items: flex-end;
  gap: 6px;
  display: flex;
}

.adminPrivacyCard > header b {
  color: #ffffffa8;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid #ffffff21;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 7px;
  font-weight: 600;
}

.adminPrivacyCard[data-status="received"] > header b, .adminPrivacyCard[data-overdue="true"] > header strong {
  color: var(--color-accent);
}

.adminPrivacyCard[data-status="in_review"] > header b {
  border-color: rgb(var(--color-accent-rgb) / .35);
  color: #ffae70;
}

.adminPrivacyCard[data-status="completed"] > header b {
  color: #8cec9f;
  border-color: #6bf08a40;
}

.adminPrivacyCard > header strong {
  font-size: 10px;
  font-weight: 520;
}

.adminPrivacyCard > header time {
  color: #ffffff57;
  font-size: 8px;
}

.adminPrivacyBody {
  grid-template-columns: minmax(260px, .72fr) minmax(420px, 1.28fr);
  display: grid;
}

.adminPrivacyBody > section {
  padding: 25px 24px;
}

.adminPrivacyBody > section > span {
  color: #ffffff5c;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 8px;
}

.adminPrivacyBody > section > p {
  overflow-wrap: anywhere;
  color: #ffffffb3;
  white-space: pre-wrap;
  margin: 18px 0 0;
  font-size: 11px;
  line-height: 1.55;
}

.adminPrivacyBody dl {
  gap: 7px;
  margin: 25px 0 0;
  display: grid;
}

.adminPrivacyBody dl > div {
  border-top: 1px solid #ffffff12;
  justify-content: space-between;
  gap: 15px;
  padding-top: 8px;
  display: flex;
}

.adminPrivacyBody dt {
  color: #ffffff4d;
  text-transform: uppercase;
  font-size: 7px;
}

.adminPrivacyBody dd {
  color: #ffffff85;
  text-align: right;
  text-overflow: ellipsis;
  margin: 0;
  font-size: 8px;
  overflow: hidden;
}

.adminPrivacyBody dd code {
  font: inherit;
}

.adminPrivacyBody > form {
  background: #ffffff03;
  border-left: 1px solid #ffffff1a;
  padding: 18px 24px 24px;
}

.adminPrivacyBody > form .adminField {
  margin-top: 9px;
}

.adminPrivacyBody > form .adminFieldRow .adminField {
  margin-top: 0;
}

.adminPrivacyBody > form textarea {
  resize: vertical;
  border: 1px solid #ffffff1a;
  border-radius: 13px;
  min-height: 86px;
  padding: 12px;
}

.adminPrivacyBody > form select {
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  min-height: 42px;
  padding: 0 11px;
}

.adminPrivacyBody > form .adminButton {
  margin-top: 13px;
}

.adminBanTarget {
  margin-bottom: 18px;
}

.adminBanTarget > span {
  color: #ffffff6e;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-size: 8px;
  font-weight: 600;
  display: block;
}

.adminBanTargetSearch {
  border: 1px solid #ffffff21;
  border-radius: 15px;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 6px;
  display: grid;
}

.adminBanTargetSearch input {
  color: #fff;
  min-width: 0;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  padding: 0 10px;
  font-size: 11px;
}

.adminBanTargetSearch button, .adminBanTargetSelected > button {
  color: #fff;
  cursor: pointer;
  font: inherit;
  background: #ffffff0d;
  border: 1px solid #ffffff24;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 8px;
}

.adminBanTargetSearch button:disabled {
  opacity: .45;
  cursor: wait;
}

.adminBanTargetResults {
  background: var(--surface-subcard);
  border: 1px solid #ffffff1c;
  border-radius: 15px;
  flex-direction: column;
  gap: 4px;
  max-height: 245px;
  margin-top: 6px;
  padding: 5px;
  display: flex;
  overflow-y: auto;
}

.adminBanTargetResults > button, .adminBanTargetSelected {
  color: #fff;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 11px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px;
  display: grid;
}

.adminBanTargetResults > button {
  cursor: pointer;
  font: inherit;
}

.adminBanTargetResults > button:hover {
  background: #ffffff0f;
}

.adminBanTargetResults > button > span {
  background: var(--surface-subcard-hover);
  width: 38px;
  height: 38px;
  color: var(--color-accent);
  border-radius: 50%;
  place-items: center;
  font-size: 11px;
  display: grid;
}

.adminBanTargetResults strong, .adminBanTargetResults small, .adminBanTargetSelected strong, .adminBanTargetSelected small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.adminBanTargetResults strong, .adminBanTargetSelected strong {
  font-size: 10px;
  font-weight: 500;
}

.adminBanTargetResults small, .adminBanTargetSelected small {
  color: #ffffff61;
  margin-top: 4px;
  font-size: 7px;
}

.adminBanTargetResults i {
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 7px;
  font-style: normal;
}

.adminBanTargetSelected {
  border: 1px solid rgb(var(--color-accent-rgb) / .34);
  background: rgb(var(--color-accent-rgb) / .07);
}

.adminBanTargetSelected .adminAvatar {
  width: 38px;
  height: 38px;
}

.adminBanFilters {
  border: 1px solid #ffffff1a;
  border-radius: 16px;
  grid-template-columns: minmax(190px, 1fr) minmax(125px, .55fr);
  gap: 8px;
  margin-top: 18px;
  padding: 12px;
  display: grid;
}

.adminBanFilters .adminField {
  margin: 0;
}

.adminBanFilters > .adminFieldRow {
  grid-column: 1 / -1;
}

.adminBanFilters > .adminButton {
  grid-column: 1 / -1;
  width: 100%;
}

.adminBanRecord[data-status="active"] > div > span {
  color: var(--color-accent);
}

.adminBanRecord[data-status="expired"], .adminBanRecord[data-status="revoked"] {
  opacity: .68;
}

.adminBanRecord details {
  color: #ffffff70;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  margin: 17px 0 0;
  padding: 12px;
  font-size: 8px;
}

.adminBanRecord details summary {
  cursor: pointer;
  text-transform: uppercase;
}

.adminBanRecord details p {
  white-space: pre-wrap;
  margin: 10px 0 0;
  line-height: 1.55;
}

.adminEditor, .adminRecords {
  background: var(--surface-card);
  border: 1px solid #ffffff24;
  border-radius: 28px;
  padding: clamp(24px, 3vw, 42px);
}

.adminEditor {
  position: sticky;
  top: 12px;
}

.adminEditorHead {
  margin-bottom: 34px;
}

.adminEditorHead h2, .adminRecordsHead h2 {
  font-size: clamp(42px, 4.5vw, 68px);
}

.adminField {
  background: #ffffff06;
  border: 1px solid #ffffff21;
  border-radius: 16px;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding: 16px;
  display: flex;
}

.adminField:focus-within {
  border-color: rgb(var(--color-accent-rgb) / .65);
}

.adminField textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.42;
}

.adminField select {
  appearance: auto;
}

.adminFieldRow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.adminFormHint {
  color: #ffffff6b;
  margin: 11px 3px 17px;
  font-size: 9px;
  line-height: 1.45;
  display: block;
}

.adminRuleBuilder {
  background: #ffffff05;
  border: 1px solid #ffffff21;
  border-radius: 22px;
  margin-top: 18px;
  padding: 10px;
}

.adminRuleBuilderHead {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 11px 10px 20px;
  display: flex;
}

.adminRuleBuilderHead div {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.adminRuleBuilderHead span {
  color: #ffffff5c;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 8px;
}

.adminRuleBuilderHead strong {
  font-size: 16px;
  font-weight: 450;
}

.adminRuleBuilderHead > button {
  color: #fff;
  cursor: pointer;
  min-height: 38px;
  font: inherit;
  text-transform: uppercase;
  background: none;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 9px;
  font-size: 9px;
  display: inline-flex;
}

.adminRuleBuilderHead > button b {
  background: var(--color-accent);
  border-radius: 50%;
  place-items: center;
  width: 23px;
  height: 23px;
  font-size: 15px;
  font-weight: 400;
  display: grid;
}

.adminRuleCards {
  flex-direction: column;
  gap: 7px;
  display: flex;
}

.adminRuleCard {
  background: var(--surface-card);
  border: 1px solid #ffffff1c;
  border-radius: 17px;
  padding: 14px;
}

.adminRuleCard > header {
  justify-content: space-between;
  align-items: center;
  padding: 0 2px 8px;
  display: flex;
}

.adminRuleCard > header > span {
  color: var(--color-accent);
  font-size: 9px;
  font-weight: 650;
}

.adminRuleCard > header div {
  gap: 4px;
  display: flex;
}

.adminRuleCard > header button {
  color: #ffffffa8;
  cursor: pointer;
  background: none;
  border: 1px solid #ffffff1f;
  border-radius: 50%;
  place-items: center;
  width: 29px;
  height: 29px;
  display: grid;
}

.adminRuleCard > header button:hover {
  color: #fff;
  border-color: #fff6;
}

.adminRuleCard > header button:last-child {
  color: var(--color-accent);
}

.adminRuleCard > header button:disabled {
  cursor: default;
  opacity: .18;
}

.adminRuleCard .adminField {
  padding: 13px;
}

.adminTextButton {
  color: #ffffff80;
  cursor: pointer;
  font: inherit;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: none;
  border: 0;
  margin: 14px 0 0;
  font-size: 9px;
}

.adminTextButton:hover {
  color: #fff;
}

.adminRecordsHead {
  margin-bottom: 27px;
}

.adminListFilters {
  border: 1px solid #ffffff1c;
  border-radius: 15px;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, .45fr) auto;
  align-items: end;
  gap: 7px;
  margin: -8px 0 20px;
  padding: 7px;
  display: grid;
}

.adminListFilters label {
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 48px;
  padding: 0 10px;
  display: flex;
}

.adminListFilters label + label {
  border-left: 1px solid #ffffff1a;
}

.adminListFilters span {
  color: #ffffff57;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 7px;
}

.adminListFilters input, .adminListFilters select {
  color: #fff;
  width: 100%;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  font-size: 10px;
}

.adminListFilters select {
  appearance: auto;
}

.adminListFilters small {
  color: #ffffff47;
  white-space: nowrap;
  padding: 0 9px 12px;
  font-size: 8px;
}

.adminRecords > div:last-child {
  flex-direction: column;
  gap: 7px;
  display: flex;
}

.adminCompactEmpty {
  color: #ffffff5c;
  text-align: center;
  border: 1px dashed #ffffff24;
  border-radius: 17px;
  padding: 44px 18px;
  font-size: 10px;
}

.adminRecord {
  background: var(--surface-card);
  border: 1px solid #ffffff1f;
  border-radius: 19px;
  padding: 22px;
}

.adminRecord > div, .adminRecord footer {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.adminRecord > div span, .adminRecord > div time, .adminRecord footer span, .adminRecord footer button {
  color: #ffffff73;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 8px;
}

.adminRecord h3 {
  letter-spacing: -.015em;
  margin: 30px 0 0;
  font-size: clamp(26px, 2.6vw, 42px);
  font-weight: 390;
  line-height: .95;
}

.adminRecord h3 small {
  color: #ffffff6b;
  letter-spacing: 0;
  margin-top: 7px;
  font-size: 10px;
  font-weight: 400;
  display: block;
}

.adminRecord > p {
  color: #ffffff8f;
  max-width: 640px;
  margin: 17px 0 0;
  font-size: 11px;
  line-height: 1.4;
}

.adminRecord footer {
  border-top: 1px solid #ffffff1a;
  margin-top: 28px;
  padding-top: 14px;
}

.adminRecord footer button {
  color: var(--color-accent);
  cursor: pointer;
  background: none;
  border: 0;
}

.adminRecord footer > div {
  align-items: center;
  gap: 11px;
  display: flex;
}

.adminCampaignRecord > details {
  border-top: 1px solid #ffffff17;
  margin-top: 18px;
}

.adminCampaignRecord > details summary {
  color: #ffffff6e;
  cursor: pointer;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 14px 0 0;
  font-size: 8px;
}

.adminCampaignRecord > details > div {
  color: #0a0a0a;
  background: #f2f0ea;
  border: 1px solid #ffffff1c;
  border-radius: 15px;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 14px;
  padding: 20px;
  display: flex;
}

.adminCampaignRecord > details small {
  color: var(--color-accent);
  letter-spacing: .08em;
  font-size: 7px;
}

.adminCampaignRecord > details strong {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 560;
}

.adminCampaignRecord > details p {
  color: #595750;
  white-space: pre-wrap;
  margin: 13px 0 0;
  font-size: 10px;
  line-height: 1.55;
}

.adminCampaignDelivery {
  background: #ffffff05;
  border: 1px solid #ffffff17;
  border-radius: 14px;
  margin-top: 17px;
  padding: 14px;
}

.adminCampaignDelivery[data-failed="true"] {
  border-color: rgb(var(--color-accent-rgb) / .3);
}

.adminCampaignDelivery > header {
  color: #fff6;
  letter-spacing: .07em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  font-size: 7px;
  display: flex;
}

.adminCampaignDelivery > header strong {
  color: #ffffffbd;
  font-size: 9px;
}

.adminCampaignProgress {
  background: #ffffff17;
  border-radius: 999px;
  height: 3px;
  margin-top: 11px;
  overflow: hidden;
}

.adminCampaignProgress i {
  border-radius: inherit;
  background: var(--color-accent);
  height: 100%;
  transition: width .3s;
  display: block;
}

.adminCampaignDelivery dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 13px 0 0;
  display: grid;
}

.adminCampaignDelivery dl > div {
  border: 1px solid #ffffff12;
  border-radius: 9px;
  padding: 8px;
}

.adminCampaignDelivery dt {
  color: #ffffff4d;
  text-transform: uppercase;
  font-size: 6px;
}

.adminCampaignDelivery dd {
  margin: 6px 0 0;
  font-size: 12px;
}

.adminCampaignDelivery dl > div:nth-child(3) dd {
  color: var(--color-accent);
}

.adminPayments {
  flex-direction: column;
  gap: 24px;
  display: flex;
}

.adminPaymentsNotice {
  color: #c8f88d;
  background: #9ef23412;
  border: 1px solid #9ef23459;
  padding: 14px 16px;
}

.adminPaymentsNotice[data-error="true"] {
  color: #ff9d94;
  background: #ff5b4d14;
  border-color: #ff5b4d6b;
}

.adminPaymentsGateways > header, .adminPaymentsOperations > header, .adminPaymentsRouteList > header {
  justify-content: space-between;
  align-items: end;
  margin-bottom: 12px;
  display: flex;
}

.adminPaymentsGateways > header span, .adminPaymentsOperations > header span {
  color: #fff6;
  font-size: 9px;
}

.adminPaymentsGateways > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.adminPaymentsGatewayForm {
  background: #ffffff05;
  border: 1px solid #ffffff14;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  display: grid;
}

.adminPaymentsGatewayForm label {
  gap: 5px;
  display: grid;
}

.adminPaymentsGatewayForm label span {
  color: #ffffff61;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 8px;
}

.adminPaymentsGatewayForm input, .adminPaymentsGatewayForm select {
  color: #f5f4f1;
  background: #151519;
  border: 1px solid #ffffff1a;
  min-width: 0;
  padding: 9px;
}

.adminPaymentsGatewayForm .adminButton {
  align-self: end;
  margin-top: 0;
}

.adminPaymentsGateways article {
  background: #ffffff06;
  border: 1px solid #ffffff17;
  flex-direction: column;
  min-height: 250px;
  padding: 18px;
  display: flex;
}

.adminPaymentsGateways article[data-enabled="true"] {
  border-color: #9ef23452;
}

.adminPaymentsGateways article header {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.adminPaymentsGateways article header span, .adminPaymentsOperations article span {
  color: var(--admin-accent);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 8px;
}

.adminPaymentsGateways article header small, .adminPaymentsOperations article small {
  color: #ffffff5c;
}

.adminPaymentsGateways dl {
  gap: 9px;
  margin: 20px 0;
  display: grid;
}

.adminPaymentsGateways dl div {
  gap: 3px;
  display: grid;
}

.adminPaymentsGateways dt {
  color: #ffffff52;
  text-transform: uppercase;
  font-size: 8px;
}

.adminPaymentsGateways dd {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-family: monospace;
  font-size: 9px;
  overflow: hidden;
}

.adminPaymentsGateways .adminButton {
  margin-top: auto;
}

.adminPaymentsRouting {
  grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr);
  gap: 16px;
  display: grid;
}

.adminPaymentsRouteList {
  border: 1px solid #ffffff14;
  padding: 20px;
}

.adminPaymentsRouteList > article, .adminPaymentsOperations article {
  border-bottom: 1px solid #ffffff12;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 12px 0;
  display: flex;
}

.adminPaymentsRouteList article > div, .adminPaymentsOperations article > div {
  flex-direction: column;
  flex: 1;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.adminPaymentsRouteList article span {
  color: #ffffff61;
  text-transform: uppercase;
  font-size: 8px;
}

.adminPaymentsRouteList article small {
  color: var(--admin-accent);
  font-size: 8px;
}

.adminPaymentsOperations > div {
  border: 1px solid #ffffff14;
  padding: 0 18px;
}

.adminPaymentsOperations article code {
  color: #ffffffb3;
  flex-direction: column;
  gap: 4px;
  max-width: 310px;
  font-size: 9px;
  display: flex;
}

.adminPaymentsEvents {
  border: 1px solid #ffffff14;
  padding: 16px;
}

.adminPaymentsEvents summary {
  cursor: pointer;
}

.adminPaymentsEvents article {
  border-bottom: 1px solid #ffffff0f;
  grid-template-columns: 180px 1fr auto;
  gap: 12px;
  padding: 10px 0;
  font-size: 9px;
  display: grid;
}

.adminPaymentsEvents code {
  text-overflow: ellipsis;
  overflow: hidden;
}

@media (max-width: 1100px) {
  .adminPaymentsGateways > div, .adminPaymentsGatewayForm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminPaymentsRouting {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .adminPaymentsGateways > div, .adminPaymentsGatewayForm {
    grid-template-columns: 1fr;
  }

  .adminPaymentsOperations article {
    flex-direction: column;
    align-items: flex-start;
  }

  .adminPaymentsEvents article {
    grid-template-columns: 1fr;
  }
}

.adminTopUp {
  border-bottom: 1px solid #ffffff1f;
  gap: 8px;
  margin-top: 42px;
  padding-bottom: 42px;
  display: grid;
}

.adminTopUpHead {
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 4px 4px 18px;
  display: flex;
}

.adminTopUpHead > div:first-child > p, .adminTopUpPanel > header span, .adminTopUpEditor > header span, .adminTopUpOperations > header > div > span {
  color: var(--color-accent);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0;
  font-size: 8px;
  font-weight: 650;
}

.adminTopUpHead h2 {
  letter-spacing: -.02em;
  margin: 13px 0 0;
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 350;
  line-height: .9;
}

.adminTopUpHead > div:first-child > span {
  color: #ffffff7a;
  max-width: 620px;
  margin-top: 16px;
  font-size: 11px;
  line-height: 1.5;
  display: block;
}

.adminTopUpHeadActions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  display: flex;
}

.adminTopUpGateway {
  color: #ffffff8c;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  min-height: 45px;
  padding: 0 16px;
  font-size: 9px;
  display: inline-flex;
}

.adminTopUpGateway:before {
  background: var(--color-accent);
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 5px rgb(var(--color-accent-rgb) / .1);
  content: "";
  border-radius: 50%;
}

.adminTopUpGateway[data-online="true"]:before {
  background: #9bf466;
  box-shadow: 0 0 0 5px #9bf4661a;
}

.adminTopUpNotice, .adminTopUpFeedback {
  border: 1px solid rgb(var(--color-accent-rgb) / .22);
  background: rgb(var(--color-accent-rgb) / .055);
  border-radius: 18px;
  align-items: center;
  gap: 18px;
  padding: 17px 20px;
  display: flex;
}

.adminTopUpNotice strong {
  color: var(--color-accent);
  flex: none;
  font-size: 11px;
  font-weight: 560;
}

.adminTopUpNotice span {
  color: #ffffff80;
  font-size: 10px;
  line-height: 1.5;
}

.adminTopUpFeedback {
  color: #b6ef99;
  background: #8def5b0e;
  border-color: #8def5b38;
  font-size: 10px;
  display: block;
}

.adminTopUpFeedback[data-error="true"] {
  border-color: rgb(var(--color-accent-rgb) / .28);
  background: rgb(var(--color-accent-rgb) / .07);
  color: #ff8c70;
}

.adminTopUpStats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
  display: grid;
}

.adminTopUpStats article {
  background: #ffffff06;
  border: 1px solid #ffffff1c;
  border-radius: 18px;
  flex-direction: column;
  min-height: 122px;
  padding: 17px;
  display: flex;
}

.adminTopUpStats article:first-child {
  background: linear-gradient(145deg, var(--color-accent), #a92b06);
}

.adminTopUpStats article[data-alert="true"] {
  border-color: rgb(var(--color-accent-rgb) / .42);
  background: rgb(var(--color-accent-rgb) / .075);
}

.adminTopUpStats span {
  color: #ffffff78;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 7px;
}

.adminTopUpStats strong {
  margin-top: auto;
  font-size: clamp(25px, 2.4vw, 38px);
  font-weight: 380;
  line-height: .9;
}

.adminTopUpStats small {
  color: #ffffff61;
  margin-top: 10px;
  font-size: 8px;
}

.adminTopUpGrid {
  grid-template-columns: minmax(0, 1fr) minmax(380px, .72fr);
  align-items: start;
  gap: 8px;
  margin-top: 8px;
  display: grid;
}

.adminTopUpPanel, .adminTopUpEditor, .adminTopUpOperations {
  background: var(--surface-card);
  border: 1px solid #ffffff1f;
  border-radius: 24px;
  padding: clamp(20px, 2.4vw, 32px);
}

.adminTopUpPanel > header, .adminTopUpEditor > header, .adminTopUpOperations > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.adminTopUpPanel h3, .adminTopUpEditor h3, .adminTopUpOperations h3 {
  margin: 10px 0 0;
  font-size: clamp(25px, 2.6vw, 40px);
  font-weight: 390;
  line-height: .95;
}

.adminTopUpPanel > header b {
  color: #ffffff3d;
  font-size: 32px;
  font-weight: 360;
}

.adminTopUpOffers {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 25px;
  display: grid;
}

.adminTopUpOffers > article {
  background: #ffffff06;
  border: 1px solid #ffffff1a;
  border-radius: 19px;
  flex-direction: column;
  min-width: 0;
  min-height: 214px;
  padding: 19px;
  display: flex;
}

.adminTopUpOffers > article[data-active="true"] {
  border-color: rgb(var(--color-accent-rgb) / .26);
  background: radial-gradient(circle at 95% 0%,
      rgb(var(--color-accent-rgb) / .14),
      transparent 46%),
    #ffffff06;
}

.adminTopUpOffers article > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  display: flex;
}

.adminTopUpOffers article > header > div {
  min-width: 0;
}

.adminTopUpOffers article > header span {
  color: #ffffff61;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 7px;
}

.adminTopUpOffers article[data-active="true"] > header span {
  color: #a8ef81;
}

.adminTopUpOffers h4 {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 11px 0 0;
  font-size: 18px;
  font-weight: 470;
  overflow: hidden;
}

.adminTopUpOffers h4 + small {
  color: #ffffff61;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 6px;
  font-size: 9px;
  display: block;
  overflow: hidden;
}

.adminTopUpOffers article > header > strong {
  color: var(--color-accent);
  text-align: right;
  font-size: 28px;
  font-weight: 380;
}

.adminTopUpOffers article > header > strong small {
  color: #ffffff59;
  letter-spacing: .08em;
  margin-top: 4px;
  font-size: 7px;
  display: block;
}

.adminTopUpOffers article > p {
  color: #ffffff75;
  margin: 18px 0 0;
  font-size: 10px;
  line-height: 1.5;
}

.adminTopUpOffers article > footer {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  display: flex;
}

.adminTopUpOffers article > footer span {
  color: #ffffff5e;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  overflow: hidden;
}

.adminTopUpOffers article > footer button {
  color: var(--color-accent);
  cursor: pointer;
  font: inherit;
  text-transform: uppercase;
  background: none;
  border: 0;
  font-size: 8px;
}

.adminTopUpEditor {
  position: sticky;
  top: 12px;
}

.adminTopUpEditor > header > button {
  color: #fff;
  cursor: pointer;
  background: none;
  border: 1px solid #ffffff21;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 22px;
}

.adminTopUpEditor > p {
  color: #ffffff6b;
  margin: 20px 0 22px;
  font-size: 10px;
  line-height: 1.55;
}

.adminTopUpEditor .adminField {
  margin-top: 8px;
}

.adminTopUpEditor .adminFieldRow {
  gap: 8px;
}

.adminTopUpPriceFields {
  grid-template-columns: .75fr 1.2fr .55fr;
  gap: 8px;
  display: grid;
}

.adminTopUpPriceFields .adminField small {
  color: #ffffff52;
  margin-top: 6px;
  font-size: 7px;
  display: block;
}

.adminTopUpSwitch {
  cursor: pointer;
  border: 1px solid #ffffff1c;
  border-radius: 16px;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 15px;
  display: flex;
}

.adminTopUpSwitch input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  margin: 1px 0 0;
}

.adminTopUpSwitch span {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.adminTopUpSwitch strong {
  font-size: 10px;
  font-weight: 550;
}

.adminTopUpSwitch small {
  color: #fff6;
  font-size: 8px;
  line-height: 1.45;
}

.adminTopUpEditorActions {
  justify-content: flex-end;
  gap: 7px;
  margin-top: 18px;
  display: flex;
}

.adminTopUpOperations {
  margin-top: 8px;
}

.adminTopUpOperations > header > div > p {
  color: #fff6;
  margin: 11px 0 0;
  font-size: 9px;
}

.adminTopUpOperations > header > label {
  color: #fff6;
  letter-spacing: .07em;
  text-transform: uppercase;
  flex-direction: column;
  gap: 7px;
  min-width: 210px;
  font-size: 7px;
  display: flex;
}

.adminTopUpOperations > header select {
  background: var(--surface-subcard);
  color: #fff;
  min-height: 43px;
  font: inherit;
  text-transform: none;
  border: 1px solid #ffffff24;
  border-radius: 13px;
  padding: 0 14px;
  font-size: 10px;
}

.adminTopUpOperationList {
  flex-direction: column;
  gap: 7px;
  margin-top: 24px;
  display: flex;
}

.adminTopUpOperationList > article {
  background: #ffffff05;
  border: 1px solid #ffffff1a;
  border-radius: 18px;
  grid-template-columns: minmax(220px, .7fr) minmax(420px, 1.3fr);
  gap: 18px;
  padding: 20px;
  display: grid;
}

.adminTopUpOperationList > article[data-status="manual_review"] {
  border-color: rgb(var(--color-accent-rgb) / .34);
  background: rgb(var(--color-accent-rgb) / .045);
}

.adminTopUpOperationMain > span {
  color: #aaa;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 7px;
}

.adminTopUpOperationList > article[data-status="paid"] .adminTopUpOperationMain > span {
  color: #a6ed7f;
}

.adminTopUpOperationList > article[data-status="manual_review"] .adminTopUpOperationMain > span {
  color: var(--color-accent);
}

.adminTopUpOperationMain h4 {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 480;
}

.adminTopUpOperationMain h4 small {
  color: #ffffff61;
  font-size: 10px;
  font-weight: 430;
}

.adminTopUpOperationMain p {
  color: #ffffff6e;
  margin: 7px 0 0;
  font-size: 9px;
}

.adminTopUpOperationList dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  display: grid;
}

.adminTopUpOperationList dl > div {
  border: 1px solid #ffffff12;
  border-radius: 11px;
  min-width: 0;
  padding: 10px;
}

.adminTopUpOperationList dt {
  color: #ffffff52;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 6px;
}

.adminTopUpOperationList dd {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 7px 0 0;
  font-size: 8px;
  overflow: hidden;
}

.adminTopUpFailure {
  background: rgb(var(--color-accent-rgb) / .08);
  border-radius: 12px;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  display: flex;
}

.adminTopUpFailure span {
  color: #ffffff61;
  text-transform: uppercase;
  font-size: 7px;
}

.adminTopUpFailure strong {
  color: #ff9b7d;
  font-size: 9px;
  font-weight: 540;
}

.adminTopUpOperationList article > footer {
  grid-column: 1 / -1;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 2px;
  display: flex;
}

.adminTopUpOperationList article > footer code {
  color: #ffffff42;
  text-overflow: ellipsis;
  font-size: 8px;
  overflow: hidden;
}

.adminTopUpOperationList article > footer .adminButton {
  flex: none;
}

.adminTopUpMore {
  margin: 20px auto 0;
  display: flex;
}

.adminTopUpEmpty {
  color: #ffffff73;
  text-align: center;
  border: 1px dashed #ffffff21;
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 120px;
  padding: 24px;
  display: flex;
}

.adminTopUpEmpty strong {
  color: #ffffffb8;
  font-size: 13px;
  font-weight: 460;
}

.adminTopUpEmpty span {
  max-width: 440px;
  font-size: 9px;
  line-height: 1.5;
}

.adminWalletStats {
  grid-template-columns: 1.35fr repeat(3, minmax(140px, .55fr));
  gap: 7px;
  margin-top: 42px;
  display: grid;
}

.adminWalletStats article {
  background: #ffffff06;
  border: 1px solid #ffffff21;
  border-radius: 20px;
  flex-direction: column;
  justify-content: space-between;
  min-height: 126px;
  padding: 20px;
  display: flex;
}

.adminWalletStats article:first-child {
  background: linear-gradient(135deg, var(--color-accent), #a81300);
}

.adminWalletStats span {
  color: #ffffff7a;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 8px;
}

.adminWalletStats strong {
  letter-spacing: -.015em;
  font-size: clamp(27px, 2.5vw, 40px);
  font-weight: 390;
}

.adminWalletLayout {
  grid-template-columns: minmax(520px, 1.25fr) minmax(340px, .75fr);
  align-items: start;
  gap: 8px;
  margin-top: 20px;
  display: grid;
}

.adminWalletList {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.adminWalletCard, .adminWalletHistory {
  background: radial-gradient(circle at 90% 0%,
      rgb(var(--color-accent-rgb) / .25),
      transparent 35%),
    var(--surface-card);
  border: 1px solid #ffffff24;
  border-radius: 26px;
  padding: clamp(22px, 2.5vw, 36px);
}

.adminWalletCard[data-status="frozen"] {
  background: var(--surface-subcard);
}

.adminWalletCard > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  display: flex;
}

.adminWalletCard > header > div {
  min-width: 0;
}

.adminWalletCard > header span, .adminWalletMeta {
  color: #ffffff6b;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 8px;
}

.adminWalletCard[data-status="active"] > header span {
  color: #a9ff72;
}

.adminWalletCard[data-status="frozen"] > header span {
  color: var(--color-accent);
}

.adminWalletCard h3 {
  letter-spacing: -.015em;
  margin: 15px 0 0;
  font-size: clamp(34px, 3.7vw, 60px);
  font-weight: 370;
  line-height: .88;
}

.adminWalletCard header p {
  color: #ffffff70;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 11px 0 0;
  font-size: 10px;
  overflow: hidden;
}

.adminWalletCard header > strong {
  color: var(--color-accent);
  letter-spacing: -.015em;
  text-align: right;
  font-size: clamp(42px, 4.5vw, 72px);
  font-weight: 350;
  line-height: .75;
}

.adminWalletCard header > strong small {
  color: #fff6;
  letter-spacing: .1em;
  margin-top: 12px;
  font-size: 8px;
  font-weight: 500;
  display: block;
}

.adminWalletMeta {
  border-top: 1px solid #ffffff1a;
  justify-content: space-between;
  gap: 12px;
  margin-top: 30px;
  padding-top: 15px;
  display: flex;
}

.adminWalletActions {
  gap: 7px;
  margin-top: 18px;
  display: flex;
}

.adminWalletAdjust {
  border-top: 1px solid #ffffff1a;
  grid-template-columns: minmax(160px, .45fr) minmax(240px, 1fr);
  gap: 7px;
  margin-top: 17px;
  padding-top: 17px;
  display: grid;
}

.adminWalletAdjust .adminField {
  margin: 0;
}

.adminWalletAdjust > div {
  grid-column: 1 / -1;
  gap: 7px;
  display: flex;
}

.adminWalletHistory {
  max-height: calc(100vh - 120px);
  position: sticky;
  top: 12px;
  overflow: auto;
}

.adminWalletHistory > .adminTextButton {
  margin-bottom: 20px;
}

.adminWalletHistory > div:last-child {
  flex-direction: column;
  gap: 7px;
  display: flex;
}

.adminWalletHistoryEmpty {
  color: #ffffff6b;
  font-size: 11px;
}

.adminAuditFilters {
  grid-template-columns: minmax(260px, 1fr) minmax(190px, .28fr) auto;
}

.adminAuditFilters .adminField {
  background: none;
  border: 0;
  border-left: 1px solid #ffffff1c;
  border-radius: 0;
  min-width: 190px;
  margin: 0;
  padding: 8px 13px;
}

.adminAuditList {
  flex-direction: column;
  margin-top: 24px;
  display: flex;
}

.adminAuditEvent {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 17px;
  display: grid;
}

.adminAuditRail {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.adminAuditRail span {
  border: 1px solid rgb(var(--color-accent-rgb) / .55);
  background: rgb(var(--color-accent-rgb) / .1);
  width: 34px;
  height: 34px;
  color: var(--color-accent);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  display: grid;
}

.adminAuditRail i {
  background: #ffffff1c;
  width: 1px;
  height: 100%;
  min-height: 34px;
}

.adminAuditEvent:last-child .adminAuditRail i {
  display: none;
}

.adminAuditContent {
  background: #ffffff05;
  border: 1px solid #ffffff1f;
  border-radius: 19px;
  margin-bottom: 8px;
  padding: 21px 23px;
}

.adminAuditContent header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  display: flex;
}

.adminAuditContent header p, .adminAuditContent header h3 {
  margin: 0;
}

.adminAuditContent header p {
  color: #ffffff8c;
  font-size: 10px;
}

.adminAuditContent header p small {
  color: #ffffff4d;
  margin-left: 7px;
}

.adminAuditContent header h3 {
  letter-spacing: -.015em;
  margin-top: 7px;
  font-size: clamp(19px, 2vw, 29px);
  font-weight: 410;
}

.adminAuditContent header time, .adminAuditSubject, .adminAuditContent details {
  color: #ffffff59;
  letter-spacing: .055em;
  text-transform: uppercase;
  font-size: 8px;
}

.adminAuditContent header time {
  flex: none;
}

.adminAuditSubject {
  gap: 9px;
  margin-top: 18px;
  display: flex;
}

.adminAuditSubject code {
  color: #ffffffa1;
  font: inherit;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
}

.adminAuditContent dl {
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  display: flex;
}

.adminAuditContent dl > div {
  border: 1px solid #ffffff1a;
  border-radius: 9px;
  gap: 7px;
  max-width: 100%;
  padding: 7px 9px;
  font-size: 8px;
  display: flex;
}

.adminAuditContent dt {
  color: #ffffff52;
}

.adminAuditContent dd {
  color: #ffffffad;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  overflow: hidden;
}

.adminAuditContent details {
  text-transform: none;
  margin-top: 15px;
}

.adminAuditContent summary {
  cursor: pointer;
}

.adminAuditContent details p {
  overflow-wrap: anywhere;
  color: #ffffff6b;
  line-height: 1.5;
}

.adminLoadMore {
  min-width: 180px;
  margin: 24px auto 0;
}

.adminEmptyState {
  text-align: center;
  border: 1px dashed #ffffff26;
  border-radius: 22px;
  padding: clamp(40px, 6vw, 90px) 20px;
}

.adminEmptyState > span {
  color: var(--color-accent);
  font-size: 10px;
}

.adminEmptyState h3 {
  margin: 12px 0 0;
  font-size: 30px;
  font-weight: 410;
}

.adminEmptyState p {
  color: #ffffff6b;
  margin: 10px 0 0;
  font-size: 11px;
}

.adminDialogBackdrop {
  z-index: 100;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #000000c7;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.adminDialog {
  background: radial-gradient(circle at 100% 0%,
      rgb(var(--color-accent-rgb) / .22),
      transparent 38%),
    var(--surface-card);
  border: 1px solid #ffffff2e;
  border-radius: 28px;
  width: min(560px, 100%);
  padding: clamp(26px, 5vw, 48px);
  box-shadow: 0 35px 100px #0000009e;
}

.adminDialog[data-tone="danger"] {
  border-color: rgb(var(--color-accent-rgb) / .36);
}

.adminDialogMark {
  align-items: center;
  gap: 12px;
  height: 64px;
  margin-bottom: 36px;
  display: flex;
}

.adminDialogMark span {
  border: 1px solid rgb(var(--color-accent-rgb) / .7);
  width: 64px;
  height: 64px;
  color: var(--color-accent);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 22px;
  display: grid;
}

.adminDialogMark i {
  background: linear-gradient(90deg,
    rgb(var(--color-accent-rgb) / .7),
    transparent);
  width: 100%;
  height: 1px;
}

.adminDialog > p {
  color: var(--color-accent);
  letter-spacing: .1em;
  margin: 0;
  font-size: 8px;
}

.adminDialog h2 {
  letter-spacing: -.015em;
  margin: 13px 0 0;
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 350;
  line-height: .9;
}

.adminDialogMessage {
  color: #ffffff8f;
  margin-top: 22px;
  font-size: 12px;
  line-height: 1.55;
}

.adminDialog .adminField {
  margin-top: 24px;
}

.adminDialogActions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 30px;
  display: flex;
}

@media (max-width: 1180px) {
  .adminMetricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminModule.split {
    grid-template-columns: 1fr;
  }

  .adminEditor {
    position: static;
  }

  .adminWalletStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminTopUpStats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .adminTopUpGrid {
    grid-template-columns: 1fr;
  }

  .adminTopUpEditor {
    position: static;
  }

  .adminTopUpOperationList > article {
    grid-template-columns: 1fr;
  }

  .adminTopUpOperationList dl, .adminTopUpFailure, .adminTopUpOperationList article > footer {
    grid-column: auto;
  }

  .adminWalletLayout {
    grid-template-columns: 1fr;
  }

  .adminWalletHistory {
    max-height: none;
    position: static;
  }

  .adminAccessMatrix > div, .adminUsersLayout[data-open="true"] {
    grid-template-columns: 1fr;
  }

  .adminSecurityPanel {
    max-height: none;
    position: static;
  }

  .adminPrivacyFilters {
    grid-template-columns: 1fr 1fr;
  }

  .adminPrivacyFilters .adminField + .adminField {
    border-left: 0;
  }

  .adminPrivacyFilters .adminField:nth-child(2n) {
    border-left: 1px solid #ffffff1a;
  }

  .adminPrivacyFilters .adminButton {
    grid-column: 1 / -1;
  }

  .adminPrivacyBody {
    grid-template-columns: 1fr;
  }

  .adminPrivacyBody > form {
    border-top: 1px solid #ffffff1a;
    border-left: 0;
  }
}

@media (max-width: 840px) {
  .adminTopbar {
    height: 68px;
    padding: 0 17px;
  }

  .adminTopStatus {
    display: none;
  }

  .adminShell {
    display: block;
  }

  .adminSidebar {
    border-bottom: 1px solid #ffffff21;
    border-right: 0;
    width: 100%;
    height: auto;
    padding: 12px;
    position: relative;
  }

  .adminIdentity {
    padding-bottom: 12px;
  }

  .adminSidebar nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid;
  }

  .adminSidebar nav button {
    grid-template-columns: 25px 1fr;
    min-height: 48px;
    padding: 0 10px;
  }

  .adminSidebar nav button b, .adminSidebarBottom {
    display: none;
  }

  .adminWorkspace {
    padding: 14px;
  }

  .adminWorkspaceHead {
    min-height: 145px;
  }

  .adminWorkspaceTools > span, .adminWorkspaceTools button b {
    display: none;
  }

  .adminWorkspaceHead h1 {
    font-size: clamp(58px, 14vw, 90px);
  }

  .adminTopUpHead {
    flex-direction: column;
    align-items: flex-start;
  }

  .adminTopUpHeadActions {
    justify-content: flex-start;
  }

  .adminTopUpOffers {
    grid-template-columns: 1fr;
  }

  .adminTopUpOperationList dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminAccessMatrix > header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .adminGate {
    min-height: calc(100vh - 68px);
    padding: 26px 18px 42px;
  }

  .adminGate h1 {
    font-size: clamp(64px, 22vw, 102px);
  }

  .adminGate > div:last-child {
    flex-direction: column;
    width: 100%;
  }

  .adminShell {
    min-height: calc(100vh - 68px);
  }

  .adminSidebar nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminWelcome {
    border-radius: 23px;
    min-height: 470px;
    padding: 30px 22px;
  }

  .adminWelcome h2 {
    font-size: 18vw;
  }

  .adminMetricGrid {
    grid-template-columns: 1fr;
  }

  .adminMetricGrid article {
    min-height: 240px;
  }

  .adminModule, .adminEditor, .adminRecords {
    border-radius: 22px;
    padding: 20px;
  }

  .adminModule.split {
    padding: 0;
  }

  .adminModuleHead {
    align-items: flex-start;
  }

  .adminModuleHead > strong {
    font-size: 40px;
  }

  .adminSearch, .adminPrivacyFilters {
    grid-template-columns: 1fr;
  }

  .adminPrivacyFilters .adminField:nth-child(2n) {
    border-left: 0;
  }

  .adminPrivacyFilters .adminField + .adminField {
    border-top: 1px solid #ffffff1a;
  }

  .adminPrivacyCard > header {
    flex-direction: column;
  }

  .adminPrivacyCard > header > div:last-child {
    text-align: left;
    align-items: flex-start;
  }

  .adminPrivacyBody > section, .adminPrivacyBody > form {
    padding: 20px;
  }

  .adminBanTargetSearch {
    grid-template-columns: 1fr;
  }

  .adminBanTargetResults > button, .adminBanTargetSelected {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .adminBanTargetResults i, .adminBanTargetSelected > button {
    grid-column: 2;
    justify-self: start;
  }

  .adminBanFilters {
    grid-template-columns: 1fr;
  }

  .adminBanFilters > .adminFieldRow, .adminBanFilters > .adminButton {
    grid-column: auto;
  }

  .adminUserMain {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .adminUserMain > i {
    margin-left: 64px;
  }

  .adminUserActions {
    flex-direction: column;
    align-items: stretch;
  }

  .adminRoleForm {
    grid-template-columns: 1fr;
  }

  .adminRoleForm .adminButton {
    width: 100%;
    margin: 0;
  }

  .adminFieldRow {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .adminEditorHead, .adminRecordsHead {
    align-items: flex-start;
  }

  .adminRecordsHead > span {
    font-size: 40px;
  }

  .adminWalletStats {
    grid-template-columns: 1fr;
  }

  .adminTopUp {
    margin-top: 28px;
  }

  .adminTopUpHeadActions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .adminTopUpGateway {
    justify-content: center;
  }

  .adminTopUpNotice {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }

  .adminTopUpStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminTopUpPanel, .adminTopUpEditor, .adminTopUpOperations {
    border-radius: 20px;
    padding: 18px;
  }

  .adminTopUpPriceFields {
    grid-template-columns: 1fr;
  }

  .adminTopUpEditorActions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .adminTopUpOperations > header {
    flex-direction: column;
    align-items: stretch;
  }

  .adminTopUpOperations > header > label {
    min-width: 0;
  }

  .adminTopUpOperationList > article {
    padding: 16px;
  }

  .adminTopUpOperationList dl {
    grid-template-columns: 1fr;
  }

  .adminTopUpOperationList article > footer {
    flex-direction: column;
    align-items: stretch;
  }

  .adminTopUpOperationList article > footer .adminButton {
    width: 100%;
  }

  .adminWalletCard > header {
    flex-direction: column;
  }

  .adminWalletCard header > strong {
    text-align: left;
  }

  .adminWalletMeta, .adminWalletActions {
    flex-direction: column;
  }

  .adminWalletAdjust {
    grid-template-columns: 1fr;
  }

  .adminWalletAdjust > div {
    flex-direction: column;
    grid-column: auto;
  }

  .adminAuditFilters {
    grid-template-columns: 1fr;
  }

  .adminAuditFilters .adminField {
    border-top: 1px solid #ffffff1c;
    border-left: 0;
  }

  .adminAuditEvent {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 10px;
  }

  .adminAuditRail span {
    width: 26px;
    height: 26px;
  }

  .adminAuditContent {
    padding: 18px;
  }

  .adminAuditContent header {
    flex-direction: column;
  }

  .adminDialogActions {
    flex-direction: column-reverse;
  }

  .adminDialogActions .adminButton {
    width: 100%;
  }

  .adminRuleBuilderHead {
    flex-direction: column;
    align-items: flex-start;
  }

  .adminRuleBuilderHead > button {
    justify-content: center;
    width: 100%;
  }

  .adminListFilters {
    grid-template-columns: 1fr;
  }

  .adminListFilters label + label {
    border-top: 1px solid #ffffff1a;
    border-left: 0;
  }

  .adminListFilters small {
    padding: 5px 10px 9px;
  }

  .adminRecord footer, .adminRecord footer > div {
    flex-direction: column;
    align-items: flex-start;
  }

  .adminCampaignDelivery dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminSecurityStats {
    grid-template-columns: 1fr;
  }

  .adminSecurityStats article {
    min-height: 92px;
  }

  .adminSecurityStats strong {
    margin-top: 16px;
  }

  .adminSessionToolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .adminSessionCard dl {
    grid-template-columns: 1fr;
  }
}

.adminRoblox {
  gap: 9px;
  padding: 9px;
  display: grid;
}

.adminRobloxHero {
  background: radial-gradient(circle at 78% 20%, #385bff85, #0000 33%), linear-gradient(125deg, #101019, #171036 58%, #321d7c);
  border-radius: 30px;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .72fr);
  align-items: end;
  gap: 9px;
  min-height: 320px;
  padding: clamp(30px, 4vw, 64px);
  display: grid;
}

.adminRobloxHero p, .adminRobloxSource > p, .adminRobloxEditor > header p {
  color: #9a88ff;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0;
  font-size: 8px;
  font-weight: 650;
}

.adminRobloxHero h2 {
  max-width: 850px;
  margin: 18px 0 0;
  font-size: clamp(52px, 5vw, 84px);
  font-weight: 350;
  line-height: .88;
}

.adminRobloxHero > div > span {
  color: #ffffff8f;
  max-width: 650px;
  margin-top: 24px;
  font-size: 11px;
  line-height: 1.55;
  display: block;
}

.adminRobloxHero form {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #00000052;
  border-radius: 17px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  padding: 7px;
  display: grid;
}

.adminRobloxHero form label {
  gap: 7px;
  padding: 8px 12px;
  display: grid;
}

.adminRobloxHero form label span, .adminRobloxEditor label > span, .adminRobloxMedia label > span {
  color: #fff6;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 7px;
}

.adminRobloxHero input, .adminRobloxEditor input, .adminRobloxEditor textarea, .adminRobloxEditor select {
  color: #fff;
  width: 100%;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  font-size: 11px;
}

.adminRobloxHero form button {
  color: #08080b;
  cursor: pointer;
  min-width: 160px;
  font: inherit;
  text-transform: uppercase;
  background: #fff;
  border: 0;
  border-radius: 12px;
  font-size: 8px;
  font-weight: 650;
}

.adminRobloxHero form button i {
  margin-left: 16px;
  font-size: 16px;
  font-style: normal;
}

.adminRobloxHero button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.adminRobloxPicker {
  background: var(--surface-card);
  border-radius: 22px;
  gap: 6px;
  padding: 8px;
  display: flex;
  overflow-x: auto;
}

.adminRobloxPicker button {
  background: var(--surface-subcard);
  color: #fff;
  cursor: pointer;
  text-align: left;
  border: 0;
  border-radius: 15px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  padding: 9px;
  display: grid;
}

.adminRobloxPicker button[data-active="true"] {
  background: linear-gradient(120deg, #302070, #182e78);
}

.adminRobloxPicker img, .adminRobloxPicker button > i {
  object-fit: cover;
  background: var(--surface-subcard-hover);
  border-radius: 11px;
  place-items: center;
  width: 48px;
  height: 48px;
  font-style: normal;
  display: grid;
}

.adminRobloxPicker span {
  min-width: 0;
}

.adminRobloxPicker strong, .adminRobloxPicker small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.adminRobloxPicker strong {
  font-size: 11px;
  font-weight: 520;
}

.adminRobloxPicker small {
  color: #fff6;
  text-transform: uppercase;
  margin-top: 6px;
  font-size: 7px;
}

.adminRobloxPicker b {
  color: #ffffff47;
  font-size: 7px;
  font-weight: 450;
}

.adminRobloxWorkspace {
  grid-template-columns: minmax(320px, .66fr) minmax(520px, 1.34fr);
  align-items: start;
  gap: 9px;
  display: grid;
}

.adminRobloxSource, .adminRobloxEditor, .adminRobloxEmpty {
  background: var(--surface-card);
  border-radius: 28px;
  padding: clamp(24px, 3vw, 42px);
}

.adminRobloxSource {
  position: sticky;
  top: 12px;
}

.adminRobloxPreview {
  aspect-ratio: 16 / 10;
  background: var(--surface-subcard);
  border-radius: 28px 28px 12px 12px;
  margin: calc(-1 * clamp(24px, 3vw, 42px)) calc(-1 * clamp(24px, 3vw, 42px)) 30px;
  position: relative;
  overflow: hidden;
}

.adminRobloxPreview img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.adminRobloxPreview:after {
  content: "";
  background: linear-gradient(transparent, var(--surface-card));
  position: absolute;
  inset: 45% 0 0;
}

.adminRobloxPreview > span {
  z-index: 1;
  color: #fff;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #000000ad;
  border-radius: 999px;
  padding: 7px 9px;
  font-size: 7px;
  position: absolute;
  top: 14px;
  right: 14px;
}

.adminRobloxSource h3 {
  margin: 16px 0 0;
  font-size: clamp(36px, 3.5vw, 58px);
  font-weight: 360;
  line-height: .93;
}

.adminRobloxSource > span {
  color: #ffffff7a;
  margin-top: 18px;
  font-size: 10px;
  line-height: 1.55;
  display: block;
}

.adminRobloxSource dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 28px 0 0;
  display: grid;
}

.adminRobloxSource dl > div {
  background: #ffffff09;
  border-radius: 12px;
  min-width: 0;
  padding: 13px;
}

.adminRobloxSource dt {
  color: #ffffff4d;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 6px;
}

.adminRobloxSource dd {
  color: #ffffffc2;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 9px 0 0;
  font-size: 9px;
  overflow: hidden;
}

.adminRobloxSync {
  gap: 7px;
  margin-top: 24px;
  padding-top: 22px;
  display: grid;
}

.adminRobloxSync span {
  color: #ffffff61;
  font-size: 8px;
}

.adminRobloxSync b {
  color: #ff7d70;
  font-size: 8px;
  font-weight: 450;
  line-height: 1.45;
}

.adminRobloxSync button {
  background: var(--surface-subcard-hover);
  color: #fff;
  cursor: pointer;
  min-height: 45px;
  font: inherit;
  text-transform: uppercase;
  border: 0;
  border-radius: 12px;
  margin-top: 8px;
  font-size: 8px;
}

.adminRobloxEditor > header {
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  display: flex;
}

.adminRobloxEditor > header h3 {
  margin: 15px 0 0;
  font-size: clamp(40px, 4vw, 66px);
  font-weight: 350;
  line-height: .9;
}

.adminRobloxEditor > header > span {
  color: #ffffff59;
  font-size: 8px;
}

.adminRobloxSettings {
  grid-template-columns: 1fr .5fr .72fr;
  gap: 6px;
  margin-top: 34px;
  display: grid;
}

.adminRobloxSettings > label, .adminRobloxLocale > label, .adminRobloxMedia article > label {
  background: #ffffff09;
  border-radius: 12px;
  gap: 8px;
  padding: 14px;
  display: grid;
}

.adminRobloxCheck {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.adminRobloxCheck input {
  accent-color: #6b4dff;
  width: 34px;
  height: 20px;
}

.adminRobloxLocale {
  border: 0;
  gap: 6px;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
}

.adminRobloxLocale legend {
  color: #947fff;
  letter-spacing: .1em;
  margin-bottom: 12px;
  font-size: 8px;
}

.adminRobloxLocale textarea {
  resize: vertical;
  line-height: 1.5;
}

.adminRobloxMedia {
  margin-top: 34px;
  padding-top: 30px;
}

.adminRobloxMedia > header {
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  display: flex;
}

.adminRobloxMedia > header span {
  color: #947fff;
  font-size: 7px;
}

.adminRobloxMedia > header h4 {
  margin: 8px 0 0;
  font-size: 34px;
  font-weight: 380;
}

.adminRobloxMedia > header small {
  color: #ffffff59;
  max-width: 300px;
  font-size: 8px;
  line-height: 1.45;
}

.adminRobloxMedia > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 20px;
  display: grid;
}

.adminRobloxMedia article {
  background: #ffffff06;
  border-radius: 16px;
  padding: 6px;
  overflow: hidden;
}

.adminRobloxMedia article[data-featured="true"] {
  background: linear-gradient(145deg, #533aff47, #ffffff08);
}

.adminRobloxMedia article > button {
  aspect-ratio: 16 / 9;
  background: var(--surface-subcard);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 11px;
  width: 100%;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
}

.adminRobloxMedia article > button img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.adminRobloxMedia article > button span, .adminRobloxMedia article > button b {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #000000b3;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 6px;
  position: absolute;
  bottom: 10px;
}

.adminRobloxMedia article > button span {
  left: 10px;
}

.adminRobloxMedia article > button b {
  color: #a797ff;
  font-weight: 500;
  right: 10px;
}

.adminRobloxMedia article > label {
  margin-top: 5px;
}

.adminRobloxEditor > footer {
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 28px;
  display: flex;
}

.adminRobloxEmpty {
  text-align: center;
  min-height: 360px;
}

.adminRobloxEmpty strong {
  color: #ffffff1f;
  font-size: 96px;
  font-weight: 340;
}

.adminRobloxEmpty h3 {
  margin: 12px 0 0;
  font-size: 42px;
  font-weight: 360;
}

.adminRobloxEmpty p {
  color: #ffffff73;
  max-width: 550px;
  margin: 18px auto 0;
  font-size: 10px;
  line-height: 1.55;
}

@media (max-width: 1050px) {
  .adminRobloxHero, .adminRobloxWorkspace {
    grid-template-columns: 1fr;
  }

  .adminRobloxSource {
    position: static;
  }
}

@media (max-width: 680px) {
  .adminRobloxHero form, .adminRobloxSettings, .adminRobloxMedia > div {
    grid-template-columns: 1fr;
  }

  .adminRobloxHero form button {
    min-height: 46px;
  }

  .adminRobloxWorkspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminRobloxSource dl {
    grid-template-columns: 1fr;
  }
}

.referralRegistration {
  background: #ffffff0b;
  border: 1px solid #ffffff21;
  border-radius: 14px;
  gap: 5px;
  padding: 15px 17px;
  display: grid;
}

.referralRegistration[data-valid="true"] {
  background: #a1ff3a12;
  border-color: #a1ff3a5c;
}

.referralRegistration > span, .referralRegistration > small {
  color: #ffffff85;
  letter-spacing: .06em;
  font-size: 9px;
  line-height: 1.55;
}

.referralRegistration > strong {
  color: #fff;
  font-size: 14px;
}

.referralCenter, .playtimeCenter {
  background: var(--surface-subcard);
  color: #f7f4ee;
  border-radius: 28px;
  overflow: hidden;
}

.referralCenter > header, .playtimeCenter > header {
  border-bottom: 1px solid #ffffff14;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  padding: clamp(30px, 4vw, 54px);
  display: flex;
}

.referralCenter > header {
  background: radial-gradient(circle at 82% 20%,
      #9fff2d2e,
      transparent 36%),
    linear-gradient(120deg, var(--surface-subcard), var(--surface-subcard));
}

.referralCenter > header > div, .playtimeCenter > header {
  max-width: 760px;
}

.referralCenter > header span, .playtimeCenter > header > span {
  color: #a7ff36;
  letter-spacing: .1em;
  font-size: 9px;
  font-weight: 760;
}

.referralCenter > header h2, .playtimeCenter > header h2 {
  letter-spacing: -.045em;
  margin: 11px 0 12px;
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 430;
  line-height: .92;
}

.referralCenter > header p, .playtimeCenter > header p {
  color: #ffffff94;
  max-width: 690px;
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
}

.referralCenter > header button {
  color: #0b0b0b;
  cursor: pointer;
  background: #a7ff36;
  border: 0;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  min-width: 190px;
  min-height: 52px;
  padding: 0 9px 0 17px;
  font-size: 10px;
  font-weight: 780;
  display: flex;
}

.referralCenter > header button:disabled {
  opacity: .45;
  cursor: default;
}

.referralCenter > header button i {
  background: var(--surface-card);
  color: #fff;
  border-radius: 9px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-style: normal;
  display: grid;
}

.referralCodeCard {
  color: #080808;
  background: #a7ff36;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 24px;
  padding: 28px clamp(30px, 4vw, 54px);
  display: grid;
}

.referralCodeCard span {
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
}

.referralCodeCard strong {
  letter-spacing: .09em;
  grid-area: 1 / 2 / 3;
  font-size: clamp(25px, 4vw, 48px);
  font-weight: 520;
}

.referralCodeCard code {
  opacity: .62;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
  font-size: 11px;
  overflow: hidden;
}

.referralStats, .playtimeTotals {
  background: #ffffff17;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  display: grid;
}

.referralStats article, .playtimeTotals article {
  background: var(--surface-subcard);
  flex-direction: column;
  justify-content: flex-end;
  min-height: 126px;
  padding: 26px clamp(20px, 3vw, 40px);
  display: flex;
}

.referralStats strong, .playtimeTotals strong {
  letter-spacing: -.04em;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 450;
}

.referralStats span, .playtimeTotals span {
  color: #ffffff75;
  text-transform: uppercase;
  margin-top: 5px;
  font-size: 8px;
}

.referralProgramNotice {
  color: #111;
  background: #f3a72a;
  margin: 0;
  padding: 18px clamp(30px, 4vw, 54px);
  font-size: 10px;
  font-weight: 680;
}

.referralInviteList, .playtimeServers {
  padding: 12px clamp(18px, 3vw, 38px) 30px;
  display: grid;
}

.referralInviteList > p, .playtimeServers > p {
  color: #ffffff7a;
  margin: 20px 0 0;
  font-size: 11px;
}

.referralInviteList article {
  border-bottom: 1px solid #ffffff14;
  grid-template-columns: minmax(150px, .75fr) minmax(180px, 1fr) minmax(150px, .55fr);
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  display: grid;
}

.referralInviteList article > div {
  gap: 3px;
  display: grid;
}

.referralInviteList article > div:last-child {
  text-align: right;
}

.referralInviteList article span {
  color: #ffffff70;
  text-transform: uppercase;
  font-size: 9px;
}

.referralProgress {
  background: #ffffff1a;
  border-radius: 99px;
  height: 8px;
  position: relative;
  overflow: visible;
}

.referralProgress > span {
  border-radius: inherit;
  background: #a7ff36;
  position: absolute;
  inset: 0 auto 0 0;
}

.referralProgress > i {
  color: #ffffff80;
  font-size: 8px;
  font-style: normal;
  position: absolute;
  bottom: 13px;
  right: 0;
}

.playtimeCenter > header {
  background: radial-gradient(circle at 92% 15%,
      rgb(var(--color-accent-rgb) / .2),
      transparent 36%),
    var(--surface-subcard);
  display: grid;
}

.playtimeCenter > header > span {
  color: var(--color-accent);
}

.playtimeServers article {
  border-bottom: 1px solid #ffffff14;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 19px 0;
  display: flex;
}

.playtimeServers article > div {
  gap: 4px;
  display: grid;
}

.playtimeServers article > div:last-child {
  text-align: right;
}

.playtimeServers article span, .playtimeServers article small {
  color: #ffffff75;
  text-transform: uppercase;
  font-size: 9px;
}

.playtimeServers article strong {
  font-size: 18px;
  font-weight: 540;
}

.invitePage {
  background: var(--surface-card);
  min-height: 100vh;
}

.inviteHero {
  color: #f7f4ee;
  place-items: center;
  min-height: min(900px, 100vh);
  padding: 140px 24px 90px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.inviteHero:before {
  aspect-ratio: 1;
  content: "";
  filter: blur(12px);
  background: radial-gradient(circle, #a4ff353d, #0000 68%);
  border-radius: 50%;
  width: min(80vw, 900px);
  position: absolute;
  transform: translate(36%, -30%);
}

.inviteHeroWord {
  color: #ffffff06;
  letter-spacing: -.08em;
  font-size: clamp(110px, 21vw, 340px);
  font-weight: 850;
  line-height: .8;
  position: absolute;
  bottom: -3vw;
  right: -2vw;
}

.inviteHeroContent {
  z-index: 1;
  width: min(1120px, 100%);
  position: relative;
}

.inviteHeroContent > span {
  color: #a7ff36;
  letter-spacing: .12em;
  font-size: 10px;
  font-weight: 780;
}

.inviteHeroContent > h1 {
  letter-spacing: -.065em;
  max-width: 900px;
  margin: 18px 0;
  font-size: clamp(58px, 9vw, 142px);
  font-weight: 420;
  line-height: .82;
}

.inviteHeroContent > p {
  color: #ffffff94;
  max-width: 670px;
  font-size: clamp(14px, 1.6vw, 20px);
  line-height: 1.55;
}

.inviteDetails {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: #ffffff09;
  border: 1px solid #ffffff1f;
  border-radius: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 50px;
  display: grid;
}

.inviteDetails article {
  border-right: 1px solid #ffffff1a;
  align-content: end;
  min-height: 150px;
  padding: 25px;
  display: grid;
}

.inviteDetails article:last-child {
  border: 0;
}

.inviteDetails span, .inviteDetails small {
  color: #ffffff6b;
  text-transform: uppercase;
  font-size: 9px;
}

.inviteDetails strong {
  letter-spacing: -.03em;
  margin: 8px 0 4px;
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 480;
}

.inviteAfk {
  margin-top: 17px !important;
  font-size: 10px !important;
}

.inviteActions {
  gap: 10px;
  margin-top: 28px;
  display: flex;
}

.inviteActions a {
  color: #fff;
  border: 1px solid #ffffff26;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  min-height: 55px;
  padding: 0 18px;
  font-size: 10px;
  font-weight: 750;
  display: flex;
}

.inviteActions a:first-child {
  color: #080808;
  background: #a7ff36;
  border-color: #a7ff36;
  min-width: 250px;
}

.inviteActions i {
  font-style: normal;
}

@media (max-width: 760px) {
  .referralCenter, .playtimeCenter {
    border-radius: 22px;
  }

  .referralCenter > header {
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 22px;
  }

  .referralCenter > header button {
    width: 100%;
  }

  .playtimeCenter > header {
    padding: 26px 22px;
  }

  .referralCodeCard {
    grid-template-columns: 1fr;
    padding: 23px 22px;
  }

  .referralCodeCard strong {
    grid-area: auto;
    margin: 6px 0;
    font-size: 27px;
  }

  .referralStats, .playtimeTotals {
    grid-template-columns: 1fr;
  }

  .referralStats article, .playtimeTotals article {
    min-height: 90px;
    padding: 18px 22px;
  }

  .referralInviteList article {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .referralInviteList article > div:last-child {
    text-align: left;
  }

  .playtimeServers article {
    flex-direction: column;
    align-items: flex-start;
  }

  .playtimeServers article > div:last-child {
    text-align: left;
  }

  .inviteHero {
    align-items: start;
    padding: 125px 18px 70px;
  }

  .inviteHeroContent > h1 {
    font-size: clamp(53px, 17vw, 82px);
  }

  .inviteDetails {
    grid-template-columns: 1fr;
    margin-top: 36px;
  }

  .inviteDetails article {
    border-bottom: 1px solid #ffffff1a;
    border-right: 0;
    min-height: 110px;
  }

  .inviteActions {
    flex-direction: column;
    align-items: stretch;
  }

  .inviteActions a:first-child {
    min-width: 0;
  }
}

.adminFaqLanguages {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.adminFaqLanguages fieldset {
  border: 1px solid #ffffff1c;
  border-radius: 16px;
  min-width: 0;
  margin: 0;
  padding: 17px;
}

.adminFaqLanguages legend {
  color: var(--color-accent);
  letter-spacing: .11em;
  padding: 0 8px;
  font-size: 8px;
}

.adminFaqRecord > small {
  color: #ffffff59;
  letter-spacing: .08em;
  margin: 13px 0 18px;
  font-size: 8px;
  display: block;
}

.adminFaqEnglish {
  background: #ffffff06;
  border: 1px solid #ffffff17;
  border-radius: 13px;
  margin-top: 20px;
  padding: 16px;
}

.adminFaqEnglish > span {
  color: var(--color-accent);
  margin-bottom: 8px;
  font-size: 8px;
  display: block;
}

.adminFaqEnglish strong {
  font-size: 12px;
  font-weight: 500;
}

.adminFaqEnglish p {
  margin-bottom: 0;
}

.adminRecord footer .adminDangerText {
  color: #ff7564;
}

.adminNewsUpload {
  color: #ffffff8c;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  gap: 9px;
  font-size: 9px;
  display: grid;
}

.adminNewsUpload > input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.adminNewsUploadPreview, .adminNewsUploadEmpty {
  background: #ffffff06;
  border: 1px dashed #ffffff38;
  border-radius: 17px;
  justify-content: center;
  align-items: center;
  min-height: 190px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.adminNewsUploadPreview img, .adminNewsRecordImage img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.adminNewsUploadPreview i {
  color: #050505;
  background: #fff;
  border-radius: 20px;
  padding: 8px 11px;
  font-size: 8px;
  font-style: normal;
  position: absolute;
  bottom: 12px;
  right: 12px;
}

.adminNewsUploadEmpty {
  flex-direction: column;
  gap: 8px;
}

.adminNewsUploadEmpty b {
  color: var(--color-accent);
  font-size: 38px;
  font-weight: 300;
}

.adminNewsUploadEmpty i {
  color: #fff;
  font-style: normal;
}

.adminNewsUploadEmpty small {
  color: #ffffff61;
  font-size: 8px;
}

.adminNewsRecordImage {
  border-radius: 13px 13px 5px 5px;
  height: 170px;
  margin: -17px -17px 18px;
  overflow: hidden;
}

.adminNewsRecord > small {
  color: var(--color-accent);
  letter-spacing: .08em;
  margin: 13px 0;
  font-size: 8px;
  display: block;
}

@media (max-width: 840px) {
  .adminFaqLanguages {
    grid-template-columns: 1fr;
  }
}

.contentSection, .philosophySection, .closingSection, .siteFooter, .innerHero, .innerLeadSection, .innerCardGrid, .innerServersGrid, .innerFaqSection, .innerCtaSection {
  background: var(--surface-body);
  border: 1px solid #ffffff21;
  border-radius: 46px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}

.contentSection {
  padding: clamp(92px, 10vw, 170px) 4.3vw;
}

.sectionEyebrow {
  color: #ffffff8f;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
  font-size: 10px;
  font-weight: 600;
}

.sectionIntroSplit {
  grid-template-columns: minmax(120px, .55fr) minmax(520px, 2fr) minmax(210px, .72fr);
  align-items: start;
  gap: 4vw;
  display: grid;
}

.sectionIntro h2, .centeredSectionIntro h2, .philosophyCopy h2, .closingSection h2, .innerLeadSection h2, .innerCtaSection h2 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(52px, 6.45vw, 108px);
  font-weight: 350;
  line-height: .88;
}

.sectionLead {
  color: #ffffff94;
  max-width: 340px;
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.28;
}

.serverIndexList {
  border-top: 1px solid #ffffff40;
  margin-top: clamp(80px, 9vw, 150px);
}

.serverIndexRow {
  border-bottom: 1px solid #ffffff40;
  grid-template-columns: 52px minmax(220px, 1.15fr) minmax(155px, .68fr) minmax(240px, 1.25fr) 105px 48px;
  align-items: center;
  gap: 2vw;
  min-height: 112px;
  transition: background-color .22s, padding .22s;
  display: grid;
}

.serverIndexRow:hover, .serverIndexRow:focus-visible {
  background: #ffffff0e;
  padding-left: 18px;
  padding-right: 18px;
}

.serverIndex, .serverGenre, .serverStatus {
  color: #ffffff8a;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 10px;
}

.serverName {
  letter-spacing: -.015em;
  font-size: clamp(25px, 2.2vw, 38px);
  font-weight: 400;
  line-height: .95;
}

.serverDescription {
  color: #ffffff8c;
  max-width: 410px;
  font-size: 11px;
  line-height: 1.22;
}

.serverStatus {
  color: var(--color-accent);
  text-align: right;
}

.serverArrow, .innerInfoArrow {
  background: var(--text-primary);
  width: 42px;
  height: 42px;
  color: var(--surface-body);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  display: inline-flex;
}

.serverShowcase {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: clamp(56px, 6vw, 100px);
  display: grid;
}

.serverCard {
  isolation: isolate;
  aspect-ratio: 3 / 4;
  background: var(--surface-card);
  border: 1px solid #ffffff30;
  border-radius: 24px;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.serverCard:nth-child(2n) {
  transform: translateY(42px);
}

.serverCardImage {
  z-index: -2;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.serverCard:hover .serverCardImage {
  transform: scale(1.055);
}

.serverCardDisabled {
  cursor: default;
}

.serverCardDisabled .serverCardImage {
  filter: saturate(.12) brightness(.42);
}

.serverCardDisabled .serverCardShade {
  background: linear-gradient(#0000009e, #0000007a 44%, #000000f5);
}

.serverCardDisabled:hover .serverCardImage {
  transform: none;
}

.serverCardDisabled .serverCardMeta > span:last-child {
  color: var(--color-accent);
  font-weight: 700;
}

.serverCardShade {
  z-index: -1;
  background: linear-gradient(#0000001f, #0000 44%, #000000e0);
  position: absolute;
  inset: 0;
}

.serverCardMeta, .serverCardTitle {
  z-index: 1;
  position: absolute;
  left: 24px;
  right: 24px;
}

.serverCardMeta {
  color: #ffffffb8;
  letter-spacing: .075em;
  text-transform: uppercase;
  justify-content: space-between;
  font-size: 9px;
  display: flex;
  top: 23px;
}

.serverCardTitle {
  bottom: 25px;
}

.serverCardTitle > span {
  color: var(--color-accent);
  font-size: 10px;
}

.serverCardTitle h3 {
  letter-spacing: -.015em;
  margin: 9px 0 0;
  font-size: clamp(25px, 2.15vw, 36px);
  font-weight: 420;
  line-height: .9;
}

.textArrowLink {
  text-transform: uppercase;
  align-items: center;
  gap: 14px;
  width: max-content;
  margin: 95px 0 0 auto;
  font-size: 12px;
  display: flex;
}

.textArrowLink span {
  background: var(--color-accent);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  display: inline-flex;
}

.ecosystemSection {
  color: #f5f3ee;
  background: var(--surface-card);
  border: 0;
}

.ecosystemSection .sectionEyebrow {
  color: #ffffff85;
}

.ecosystemIntro {
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, .58fr);
  align-items: end;
  gap: clamp(42px, 7vw, 130px);
  display: grid;
}

.ecosystemIntroMeta {
  grid-column: 1 / -1;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.ecosystemIntroMeta > span {
  color: var(--color-accent);
  letter-spacing: .09em;
  font-size: 10px;
  font-weight: 650;
}

.ecosystemIntro h2 {
  letter-spacing: -.005em;
  max-width: 1160px;
  margin: 0;
  font-size: clamp(54px, 5.7vw, 98px);
  font-weight: 350;
  line-height: .94;
}

.ecosystemIntro > p {
  color: #ffffff9e;
  max-width: 355px;
  margin: 0 0 5px;
  font-size: 13px;
  line-height: 1.45;
}

.ecosystemLayout {
  grid-template-columns: minmax(0, 1.25fr) minmax(390px, .75fr);
  gap: 10px;
  min-height: 760px;
  margin-top: clamp(70px, 7.5vw, 120px);
  display: grid;
}

.ecosystemFeature, .ecosystemInfrastructure, .ecosystemEvolution {
  isolation: isolate;
  border-radius: 28px;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
  position: relative;
  overflow: hidden;
}

.ecosystemFeature {
  background: var(--surface-subcard);
  min-height: 0;
  padding: 30px;
}

.ecosystemFeatureImage {
  z-index: -3;
  object-fit: cover;
  object-position: center;
}

.ecosystemFeatureShade {
  z-index: -2;
  background: linear-gradient(#0000000f 15%, #0003 46%, #000000eb 100%), linear-gradient(90deg, #0000006b, #0000 58%);
  position: absolute;
  inset: 0;
}

.ecosystemFeatureCopy {
  z-index: 1;
  max-width: 770px;
  position: relative;
}

.ecosystemFeatureCopy h3, .ecosystemInfrastructureCopy h3, .ecosystemRailCopy h3 {
  letter-spacing: -.01em;
  margin: 0;
  font-weight: 380;
}

.ecosystemCardTop {
  z-index: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  justify-content: space-between;
  font-size: 10px;
  display: flex;
  position: relative;
}

.ecosystemCardTop span:first-child {
  opacity: .55;
}

.ecosystemFeatureCopy h3 {
  max-width: 560px;
  font-size: clamp(38px, 3vw, 54px);
  line-height: .96;
}

.ecosystemFeatureCopy p, .ecosystemInfrastructureCopy p, .ecosystemRailCopy p {
  color: #ffffffb3;
  font-size: 12px;
  line-height: 1.45;
}

.ecosystemFeatureCopy p {
  max-width: 520px;
  margin: 17px 0 0;
}

.ecosystemRail {
  grid-template-rows: 1.08fr .92fr;
  gap: 10px;
  display: grid;
}

.ecosystemInfrastructure, .ecosystemEvolution {
  min-height: 0;
  padding: 30px;
}

.ecosystemInfrastructure {
  background: linear-gradient(145deg,
    var(--color-accent) 0%,
    #d42100 58%,
    #5f0900 100%);
  min-height: 760px;
  padding: 36px;
}

.ecosystemEvolution {
  color: #0a0a0a;
  background: #f0eee8;
}

.ecosystemRailCopy {
  margin-top: 45px;
}

.ecosystemInfrastructureCopy {
  max-width: 790px;
  margin-top: auto;
  padding: 80px 0 54px;
}

.ecosystemInfrastructureCopy > span {
  color: #fffc;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #26000033;
  border-radius: 9px;
  margin-bottom: 22px;
  padding: 9px 12px;
  font-size: 9px;
  font-weight: 650;
  display: inline-block;
}

.ecosystemInfrastructureCopy h3 {
  max-width: 780px;
  font-size: clamp(52px, 5.1vw, 88px);
  line-height: .92;
}

.ecosystemInfrastructureCopy p {
  max-width: 650px;
  margin: 24px 0 0;
  font-size: 13px;
}

.ecosystemRailCopy h3 {
  max-width: 470px;
  font-size: clamp(37px, 3.1vw, 53px);
  line-height: .96;
}

.ecosystemRailCopy p {
  max-width: 460px;
  margin: 17px 0 0;
}

.ecosystemEvolution .ecosystemRailCopy p {
  color: #0000009e;
}

.ecosystemSpecs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 30px;
  display: grid;
}

.ecosystemSpecs > div {
  background: #1e000038;
  border-radius: 14px;
  padding: 18px 16px;
}

.ecosystemSpecs strong, .ecosystemSpecs span {
  display: block;
}

.ecosystemSpecs strong {
  letter-spacing: 0;
  font-size: clamp(24px, 2.25vw, 39px);
  font-weight: 650;
}

.ecosystemSpecs span {
  color: #ffffff9e;
  text-transform: uppercase;
  margin-top: 10px;
  font-size: 8px;
  line-height: 1.25;
}

.ecosystemCycle {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.ecosystemCycle li {
  color: #000000ad;
  text-transform: uppercase;
  background: #0000000e;
  border-radius: 12px;
  flex-direction: column;
  gap: 7px;
  padding: 13px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.ecosystemCycle li span {
  color: var(--color-accent);
  font-size: 8px;
}

.philosophySection {
  isolation: isolate;
  min-height: 980px;
  padding: 7.5vw 4.3vw 4vw;
}

.philosophyVisual, .philosophyShade {
  position: absolute;
  inset: 0;
}

.philosophyVisual {
  z-index: -2;
}

.philosophyImage {
  object-fit: cover;
  object-position: center;
}

.philosophyShade {
  background: linear-gradient(90deg,
      #000000d1,
      #00000029 58%,
      #00000085),
    linear-gradient(180deg,
      #00000047,
      transparent 42%,
      var(--surface-card) 100%);
}

.philosophyCopy {
  z-index: 2;
  position: relative;
}

.philosophyCopy h2 {
  width: min(920px, 75vw);
  margin-top: 27px;
  font-size: clamp(64px, 7.8vw, 132px);
}

.philosophyDetails {
  grid-template-columns: minmax(260px, 430px) minmax(260px, 430px);
  gap: 9vw;
  width: max-content;
  max-width: 70vw;
  margin: 78px 0 0 auto;
  display: grid;
}

.philosophyDetails p, .philosophyDetails blockquote {
  margin: 0;
  font-size: 13px;
  line-height: 1.42;
}

.philosophyDetails p {
  color: #ffffffa8;
}

.philosophyDetails blockquote {
  color: #fff;
  letter-spacing: -.015em;
  font-size: 19px;
}

.philosophyBottom {
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 105px;
  display: flex;
}

.philosophyBottom ul {
  width: min(510px, 42vw);
  margin: 0;
  padding: 0;
  list-style: none;
}

.philosophyBottom li {
  border-top: 1px solid #ffffff52;
  gap: 28px;
  padding: 13px 0;
  font-size: 12px;
  display: flex;
}

.philosophyBottom li span {
  color: #ffffff73;
  font-size: 9px;
}

.philosophyBottom .buttonPrimary {
  width: 226px;
}

.philosophyWord {
  z-index: -1;
  color: #ffffff14;
  letter-spacing: -.015em;
  text-align: center;
  font-size: min(16vw, 280px);
  font-weight: 500;
  line-height: .74;
  position: absolute;
  bottom: -.06em;
  left: 2.4vw;
  right: 2.4vw;
}

.newsSection {
  background: var(--surface-card);
}

.newsGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: clamp(80px, 9vw, 145px);
  display: grid;
}

.newsCard {
  background: var(--surface-card);
  border: 1px solid #fff3;
  border-radius: 24px;
  flex-direction: column;
  justify-content: space-between;
  min-height: 510px;
  padding: 28px;
  transition: background-color .22s, color .22s, transform .22s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.newsCard:nth-child(2) {
  color: #fff;
  background: var(--surface-card);
}

.newsCard:nth-child(3) {
  background: radial-gradient(circle at 90% 6%,
    var(--color-accent),
    #b20d00 26%,
    #170000 65%);
}

.newsCard:hover {
  transform: translateY(-8px);
}

.newsCardTop {
  letter-spacing: .065em;
  text-transform: uppercase;
  opacity: .66;
  justify-content: space-between;
  font-size: 9px;
  display: flex;
}

.newsNumber {
  color: #ffffff12;
  letter-spacing: -.015em;
  font-size: 220px;
  font-weight: 600;
  line-height: .8;
  position: absolute;
  top: 27%;
  right: -.06em;
}

.newsCard:nth-child(2) .newsNumber {
  color: #ffffff12;
}

.newsCardMedia {
  position: absolute;
  inset: 0;
}

.newsCardMedia img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}

.newsCardMedia span {
  background: linear-gradient(#0003, #00000052 35%, #000000f7 92%);
  position: absolute;
  inset: 0;
}

.newsCard:hover .newsCardMedia img {
  transform: scale(1.045);
}

.newsCardTop {
  z-index: 2;
  position: relative;
}

.newsCardCopy {
  z-index: 1;
  position: relative;
}

.newsCardCopy h3 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(32px, 3.2vw, 52px);
  font-weight: 370;
  line-height: .94;
}

.newsCardCopy p {
  opacity: .62;
  max-width: 390px;
  margin: 21px 0 0;
  font-size: 12px;
  line-height: 1.3;
}

.newsRead {
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .68;
  border-top: 1px solid;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 16px;
  font-size: 10px;
  display: flex;
}

.newsRead i {
  font-style: normal;
}

.socialSection {
  isolation: isolate;
  background: var(--surface-card);
  min-height: auto;
  padding-top: clamp(76px, 7.5vw, 122px);
  padding-bottom: clamp(76px, 7.5vw, 122px);
  position: relative;
  overflow: hidden;
}

.socialGlow {
  z-index: -1;
  opacity: .42;
  background: radial-gradient(circle,
    rgb(var(--color-accent-rgb) / .86),
    #9b0f0038 38%,
    transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  border-radius: 50%;
  width: 920px;
  height: 920px;
  position: absolute;
  top: -420px;
  right: -300px;
}

.socialIntro {
  grid-template-columns: minmax(125px, .42fr) minmax(420px, 1.45fr) minmax(240px, .72fr);
  gap: clamp(28px, 4vw, 72px);
}

.socialIntro h2 {
  letter-spacing: -.015em;
  max-width: 720px;
  font-size: clamp(52px, 5.3vw, 88px);
  font-weight: 390;
  line-height: .96;
}

.socialGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(52px, 5.5vw, 88px);
  display: grid;
}

.socialCard {
  background: var(--surface-card);
  color: #fff;
  border: 1px solid #ffffff1f;
  border-radius: 24px;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(280px, 23vw, 350px);
  padding: clamp(22px, 2vw, 30px);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), border-color .28s, box-shadow .28s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 65px #0000002e;
}

.socialCard:after {
  display: none;
}

.socialCard:hover, .socialCard:focus-visible {
  z-index: 2;
  border-color: #ffffff47;
  outline: none;
  transform: translateY(-5px);
  box-shadow: 0 28px 75px #00000052;
}

.socialCard[data-social="01"] {
  background: radial-gradient(circle at 90% 0%,
      #ffb2479e,
      transparent 38%),
    linear-gradient(145deg, var(--color-accent) 0%, #dd2600 55%, #9a0900 100%);
}

.socialCard[data-social="02"] {
  color: #090909;
  background: #f1efe9;
  border-color: #00000014;
}

.socialCard[data-social="03"] {
  background: radial-gradient(circle at 100% 0%,
      #00d7ca57,
      transparent 42%),
    radial-gradient(circle at 0% 100%, #ff004a5c, transparent 46%),
    var(--surface-card);
}

.socialCardTop {
  z-index: 2;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: space-between;
  gap: 24px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
  position: relative;
}

.socialCardTop span:last-child {
  opacity: .65;
}

.socialMark {
  z-index: 0;
  color: #ffffff1c;
  letter-spacing: -.015em;
  font-size: clamp(78px, 7vw, 118px);
  font-weight: 720;
  line-height: .82;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), color .3s;
  position: absolute;
  top: 50px;
  right: 22px;
}

.socialCard[data-social="02"] .socialMark {
  color: #0001;
}

.socialCard:hover .socialMark, .socialCard:focus-visible .socialMark {
  color: #ffffff2b;
  transform: translateY(-3px)scale(1.04);
}

.socialCard[data-social="02"]:hover .socialMark, .socialCard[data-social="02"]:focus-visible .socialMark {
  color: #0000001c;
}

.socialCardBottom {
  z-index: 2;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  display: flex;
  position: relative;
}

.socialCardBottom h3 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(30px, 2.7vw, 44px);
  font-weight: 430;
  line-height: .96;
}

.socialCardBottom p {
  letter-spacing: .01em;
  opacity: .58;
  margin: 11px 0 0;
  font-size: 10px;
}

.socialArrow {
  color: #080808;
  background: #fff;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 16px;
  transition: transform .26s;
  display: grid;
}

.socialCard[data-social="02"] .socialArrow {
  background: var(--surface-card);
  color: #fff;
}

.socialCard:hover .socialArrow, .socialCard:focus-visible .socialArrow {
  transform: rotate(45deg);
}

.faqSection {
  background: var(--surface-card);
  min-height: 900px;
}

.faqHeading h2 {
  width: min(980px, 94%);
  margin-left: auto;
  margin-right: auto;
}

.faqHeading .sectionEyebrow {
  color: #ffffff8c;
}

.faqList {
  border-top: 1px solid #ffffff40;
  margin-top: clamp(75px, 8vw, 130px);
}

.faqEmptyState {
  color: #ffffff70;
  border-top: 1px solid #ffffff40;
  border-bottom: 1px solid #ffffff40;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-height: 150px;
  margin-top: clamp(75px, 8vw, 130px);
  display: grid;
}

.faqEmptyState span {
  font-size: 9px;
}

.faqEmptyState p {
  color: #ffffffad;
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 360;
  line-height: 1;
}

.faqItem {
  border-bottom: 1px solid #ffffff40;
}

.faqItem button {
  color: #fff;
  text-align: left;
  cursor: pointer;
  background: none;
  grid-template-columns: 70px 1fr 54px;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 105px;
  padding: 0;
  display: grid;
}

.faqIndex {
  color: #ffffff6e;
  font-size: 9px;
}

.faqQuestion {
  letter-spacing: -.015em;
  font-size: clamp(25px, 2.6vw, 43px);
  font-weight: 360;
  line-height: .98;
}

.faqToggle {
  color: #080808;
  background: #f4f2ed;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  font-size: 22px;
  transition: background-color .18s, transform .18s;
  display: inline-flex;
}

.faqItem[data-open="true"] .faqToggle {
  background: var(--color-accent);
  color: #fff;
  transform: rotate(180deg);
}

.faqAnswer {
  opacity: 0;
  grid-template-rows: 0fr;
  transition: grid-template-rows .26s, opacity .26s;
  display: grid;
}

.faqAnswer p {
  color: #fff9;
  width: min(620px, 80%);
  min-height: 0;
  margin: 0 74px 0 auto;
  font-size: 13px;
  line-height: 1.42;
  overflow: hidden;
}

.faqItem[data-open="true"] .faqAnswer {
  opacity: 1;
  grid-template-rows: 1fr;
  padding-bottom: 34px;
}

.closingSection {
  isolation: isolate;
  text-align: center;
  min-height: 720px;
  padding: 9vw 4.3vw 5vw;
}

.closingGlow {
  z-index: -1;
  background: radial-gradient(circle,
    var(--color-accent) 0,
    #e72400 24%,
    #5f0000 49%,
    transparent 70%);
  filter: blur(40px);
  border-radius: 50%;
  width: 105%;
  height: 120%;
  position: absolute;
  top: -45%;
  left: 50%;
  transform: translateX(-50%);
}

.closingSection h2 {
  width: min(1050px, 94%);
  margin: 30px auto 0;
  font-size: clamp(66px, 8vw, 137px);
}

.closingSection > p:not(.sectionEyebrow) {
  color: #ffffffab;
  margin: 32px 0 0;
  font-size: 13px;
}

.closingButton {
  z-index: 2;
  width: 230px;
  margin-top: 38px;
  position: relative;
}

.closingWord {
  z-index: -1;
  color: #ffffff12;
  letter-spacing: -.015em;
  font-size: min(30vw, 460px);
  font-weight: 600;
  line-height: .7;
  position: absolute;
  bottom: -.06em;
  left: 1vw;
  right: 1vw;
}

.siteFooter {
  min-height: 0;
  padding: 65px 4.3vw 56px;
}

.footerTopline {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.footerBrand {
  letter-spacing: -.015em;
  font-size: clamp(42px, 5vw, 80px);
  font-weight: 800;
  line-height: .8;
}

.footerTopline p {
  color: #ffffff8f;
  text-transform: uppercase;
  margin: 0;
  font-size: 12px;
}

.footerToplineDetails {
  align-items: flex-end;
  gap: clamp(28px, 4vw, 68px);
  display: flex;
}

.footerSupportContact {
  text-align: right;
  gap: 5px;
  display: grid;
}

.footerSupportContact span {
  color: #ffffff6e;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 600;
}

.footerSupportContact strong {
  color: #ffffffe6;
  letter-spacing: -.01em;
  font-size: 15px;
  font-weight: 600;
}

.footerSupportContact:hover strong {
  color: var(--color-accent);
}

.footerNav {
  border-top: 1px solid #ffffff42;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px 3vw;
  margin-top: 78px;
  padding-top: 28px;
  display: grid;
}

.footerNav a {
  align-items: baseline;
  gap: 16px;
  font-size: 17px;
  display: flex;
}

.footerNav a span {
  color: #ffffff6b;
  font-size: 8px;
}

.footerMeta {
  color: #ffffff6e;
  text-transform: uppercase;
  grid-template-columns: 1fr 2fr auto;
  gap: 5vw;
  margin-top: clamp(52px, 5vw, 76px);
  font-size: 9px;
  line-height: 1.35;
  display: grid;
}

.footerMeta p {
  margin: 0;
}

.footerMeta p:last-child {
  text-align: right;
}

.innerHero {
  isolation: isolate;
  height: calc(100svh - 16px);
  min-height: 720px;
}

.innerHeroGlow {
  z-index: -2;
  background: radial-gradient(circle,
    var(--color-accent) 0,
    #d71600 25%,
    #370000 50%,
    transparent 70%);
  filter: blur(45px);
  border-radius: 50%;
  width: 75%;
  height: 130%;
  position: absolute;
  top: -45%;
  right: -12%;
}

.innerHeroCopy {
  z-index: 5;
  width: min(760px, 58vw);
  position: absolute;
  top: 28%;
  left: 4.3vw;
}

.innerBreadcrumb {
  color: #ffffff75;
  letter-spacing: .07em;
  text-transform: uppercase;
  gap: 10px;
  margin-bottom: 55px;
  font-size: 9px;
  display: flex;
}

.innerBreadcrumb a:hover {
  color: #fff;
}

.pageShell .innerBreadcrumb + h1 {
  margin-top: 0;
}

.innerHeroCopy h1 {
  letter-spacing: -.015em;
  margin: 27px 0 0;
  font-size: clamp(70px, 8vw, 137px);
  font-weight: 360;
  line-height: .84;
}

.innerHeroDescription {
  color: #ffffffa3;
  width: min(475px, 86%);
  margin: 34px 0 0 6vw;
  font-size: 13px;
  line-height: 1.34;
}

.innerHeroArt {
  z-index: -1;
  width: 62%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.innerHeroArt:after {
  background: linear-gradient(90deg,
      var(--surface-card) 0%,
      #030303eb 17%,
      #0303032e 60%,
      #0303031a),
    linear-gradient(180deg,
      #03030333,
      transparent 60%,
      #030303bf);
  content: "";
  position: absolute;
  inset: 0;
}

.innerHeroImage {
  object-fit: cover;
}

.innerHeroCharacter .innerHeroImage {
  object-fit: contain;
  object-position: 70% 34%;
  transform: scale(.98);
}

.innerHeroIndex {
  z-index: 1;
  color: #ffffff1c;
  letter-spacing: -.015em;
  font-size: min(24vw, 390px);
  font-weight: 650;
  line-height: .75;
  position: absolute;
  bottom: -.12em;
  right: 3vw;
}

.innerLeadSection {
  min-height: 520px;
  color: inherit;
  background: #f1efea;
  grid-template-columns: minmax(130px, .5fr) minmax(500px, 2fr);
  align-items: start;
  gap: 6vw;
  padding: clamp(90px, 10vw, 160px) 4.3vw;
  display: grid;
}

.newsEmptyState {
  color: #ffffff73;
  border-top: 1px solid #fff3;
  border-bottom: 1px solid #fff3;
  grid-column: 1 / -1;
  align-items: center;
  gap: 30px;
  min-height: 260px;
  padding: 30px;
  display: flex;
}

.newsEmptyState p {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(28px, 4vw, 60px);
}

.newsArchiveGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: clamp(70px, 8vw, 130px) 4.3vw;
  display: grid;
}

.newsArchiveCard {
  background: var(--surface-card);
  border: 1px solid #ffffff29;
  border-radius: 28px;
  grid-template-rows: minmax(270px, 1fr) auto auto;
  min-height: 620px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.newsArchiveMedia {
  min-height: 300px;
  position: relative;
  overflow: hidden;
}

.newsArchiveMedia img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}

.newsArchiveMedia span {
  background: linear-gradient(180deg, transparent 55%, var(--surface-card));
  position: absolute;
  inset: 0;
}

.newsArchiveCard:hover .newsArchiveMedia img {
  transform: scale(1.04);
}

.newsArchiveMeta {
  color: #ffffff7a;
  letter-spacing: .08em;
  text-transform: uppercase;
  grid-template-columns: 50px 1fr auto;
  gap: 15px;
  padding: 24px 27px 0;
  font-size: 9px;
  display: grid;
}

.newsArchiveCopy {
  padding: 22px 72px 34px 27px;
  position: relative;
}

.newsArchiveCopy h2 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(35px, 4.2vw, 66px);
  font-weight: 360;
  line-height: .9;
}

.newsArchiveCopy p {
  color: #ffffff94;
  max-width: 560px;
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.35;
}

.newsArchiveCopy i {
  color: var(--color-accent);
  font-size: 24px;
  font-style: normal;
  position: absolute;
  bottom: 34px;
  right: 27px;
}

.newsArchiveEmpty {
  color: #ffffff73;
  border-top: 1px solid #fff3;
  border-bottom: 1px solid #fff3;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  margin: clamp(70px, 8vw, 130px) 4.3vw;
  padding: 60px 0;
  display: grid;
}

.newsArchiveEmpty p {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(30px, 4vw, 62px);
}

.newsPostHero, .newsPostBody {
  background: var(--surface-card);
  border: 1px solid #ffffff21;
  border-radius: 46px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}

.newsPostHero {
  min-height: 880px;
}

.newsPostHeroMedia {
  position: absolute;
  inset: 0;
}

.newsPostHeroMedia img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.newsPostHeroMedia span {
  background: linear-gradient(90deg, #000000f5, #00000061 64%, #0000008c), linear-gradient(0deg, #000000d1, #0000 55%);
  position: absolute;
  inset: 0;
}

.newsPostHeroCopy {
  z-index: 3;
  width: min(1050px, 86vw);
  position: absolute;
  bottom: 8vw;
  left: 4.3vw;
}

.newsPostHeroCopy h1 {
  letter-spacing: -.015em;
  max-width: 1000px;
  margin: 28px 0 0;
  font-size: clamp(70px, 9.5vw, 168px);
  font-weight: 330;
  line-height: .78;
}

.newsPostHeroCopy > p:last-child {
  color: #ffffffb3;
  max-width: 700px;
  margin: 38px 0 0;
  font-size: clamp(17px, 1.55vw, 26px);
  line-height: 1.25;
}

.newsPostBody {
  padding: clamp(80px, 10vw, 170px) max(4.3vw, 50vw - 490px);
}

.newsPostBody header {
  color: #ffffff73;
  letter-spacing: .1em;
  border-bottom: 1px solid #fff3;
  justify-content: space-between;
  padding-bottom: 24px;
  font-size: 9px;
  display: flex;
}

.newsPostMarkdown {
  margin-top: clamp(42px, 5vw, 76px);
}

.newsPostMarkdown .markdownContent {
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.72;
}

.newsPostMarkdown .markdownContent h1 {
  font-size: clamp(48px, 6vw, 88px);
}

.newsPostMarkdown .markdownContent h2 {
  margin-top: clamp(56px, 7vw, 90px);
  font-size: clamp(38px, 4.5vw, 65px);
}

.newsPostMarkdown .markdownContent h3 {
  margin-top: clamp(42px, 5vw, 64px);
  font-size: clamp(28px, 3.2vw, 44px);
}

.newsPostMarkdown .markdownContent img {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.newsPostBody > .button {
  margin-top: 70px;
}

.commentsSection {
  background: var(--surface-card);
  color: #fff;
  border: 1px solid #ffffff24;
  border-radius: clamp(26px, 3vw, 42px);
  width: min(1220px, 100% - clamp(16px, 4vw, 64px));
  margin: clamp(40px, 6vw, 90px) auto;
  padding: clamp(28px, 5vw, 68px);
  position: relative;
  overflow: hidden;
}

.commentsHeader {
  border-bottom: 1px solid #ffffff21;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: clamp(26px, 4vw, 52px);
  display: flex;
}

.commentsHeader > div > span {
  color: var(--color-accent);
  letter-spacing: .11em;
  font-size: 9px;
  font-weight: 650;
}

.commentsHeader h2 {
  letter-spacing: -.025em;
  margin: 14px 0 0;
  font-size: clamp(46px, 6vw, 88px);
  font-weight: 360;
  line-height: .88;
}

.commentsHeader > strong {
  color: #ffffffc7;
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  font-size: 14px;
  font-weight: 650;
  display: flex;
}

.commentsHeader > strong svg {
  width: 17px;
}

.commentsHeader > strong small {
  color: #fff6;
  font-size: 10px;
  font-weight: 550;
}

.commentComposer {
  background: var(--surface-subcard);
  border: 1px solid #ffffff26;
  border-radius: 24px;
  margin: clamp(28px, 4vw, 48px) 0 18px;
  padding: 18px;
  display: grid;
}

.commentComposer:focus-within {
  border-color: rgb(var(--color-accent-rgb) / .68);
}

.commentComposerIdentity {
  align-items: center;
  gap: 11px;
  padding-bottom: 12px;
  display: flex;
}

.commentComposerIdentity > div {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.commentComposerIdentity small {
  color: #fff9;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 650;
  overflow: hidden;
}

.commentComposerIdentity button {
  color: #ffffffa6;
  cursor: pointer;
  background: #ffffff14;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 22px;
  height: 22px;
  display: grid;
}

.commentComposerIdentity button svg {
  width: 12px;
}

.commentAvatar {
  background: var(--surface-subcard);
  color: #fff;
  border: 1px solid #ffffff24;
  border-radius: 50%;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  overflow: hidden;
}

.commentAvatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.commentComposer textarea, .commentEdit textarea, .commentReportDialog textarea {
  resize: vertical;
  color: #fff;
  width: 100%;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  line-height: 1.55;
}

.commentComposer textarea {
  min-height: 76px;
  padding: 6px 2px;
  font-size: 15px;
}

.commentComposer textarea::placeholder, .commentEdit textarea::placeholder, .commentReportDialog textarea::placeholder {
  color: #ffffff4f;
}

.commentComposer > footer {
  border-top: 1px solid #ffffff17;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 13px;
  display: flex;
}

.commentComposer > footer > span {
  opacity: 0;
  color: #ffffff5c;
  font-size: 9px;
}

.commentComposer > footer > span[data-visible="true"] {
  opacity: 1;
}

.commentComposer > footer > button, .commentReportSubmit {
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 18px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.commentComposer > footer > button:disabled, .commentReportSubmit:disabled {
  cursor: default;
  opacity: .45;
}

.commentComposer > footer svg, .commentReportSubmit svg {
  width: 15px;
}

.commentSignIn {
  background: var(--surface-subcard);
  border: 1px solid #ffffff21;
  border-radius: 22px;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: clamp(28px, 4vw, 48px) 0 18px;
  padding: 20px 22px;
  display: flex;
}

.commentSignIn > div {
  gap: 5px;
  display: grid;
}

.commentSignIn strong {
  font-size: 14px;
}

.commentSignIn > div span {
  color: #ffffff73;
  font-size: 10px;
}

.commentSignIn > a {
  color: var(--color-accent);
  align-items: center;
  gap: 22px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.commentList {
  display: grid;
}

.commentItem {
  border-bottom: 1px solid #ffffff1a;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 15px;
  padding: 23px 0;
  scroll-margin-top: 110px;
  display: grid;
}

.commentItem[data-reply="true"] {
  border-left: 1px solid #ffffff1f;
  margin-left: 53px;
  padding-left: 22px;
}

.commentContent {
  min-width: 0;
}

.commentContent > header {
  align-items: baseline;
  gap: 11px;
  min-height: 22px;
  display: flex;
}

.commentContent > header > a {
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
}

.commentContent > header > a span {
  color: #ffffff59;
  margin-left: 7px;
  font-size: 9px;
  font-weight: 500;
}

.commentContent > header time, .commentContent > header small {
  color: #ffffff52;
  white-space: nowrap;
  font-size: 8px;
}

.commentContent > p {
  color: #ffffffc2;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.58;
}

.commentContent > p[data-tombstone="true"] {
  color: #ffffff4f;
  font-style: italic;
}

.commentContent > footer {
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 13px;
  display: flex;
}

.commentContent > footer button {
  color: #ffffff61;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 9px;
  font-weight: 620;
  display: inline-flex;
}

.commentContent > footer button:hover {
  color: var(--color-accent);
}

.commentContent > footer svg {
  width: 12px;
  height: 12px;
}

.commentEdit {
  gap: 11px;
  margin-top: 10px;
  display: grid;
}

.commentEdit textarea {
  background: var(--surface-subcard);
  border: 1px solid #ffffff29;
  border-radius: 14px;
  min-height: 88px;
  padding: 13px;
  font-size: 13px;
}

.commentEdit > div {
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.commentEdit button {
  background: var(--surface-subcard);
  color: #fff;
  cursor: pointer;
  border: 1px solid #ffffff26;
  border-radius: 999px;
  min-height: 32px;
  padding: 0 14px;
  font-size: 9px;
  font-weight: 650;
}

.commentEdit button[type="submit"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.commentsEmpty, .commentsLoading, .commentsSystemState {
  color: #ffffff6e;
  text-align: left;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-height: 190px;
  display: flex;
}

.commentsEmpty > svg, .commentsSystemState > svg {
  color: #ffffff38;
  width: 28px;
  height: 28px;
}

.commentsEmpty > div {
  gap: 7px;
  display: grid;
}

.commentsEmpty strong {
  color: #ffffffc7;
  font-size: 15px;
}

.commentsEmpty p, .commentsSystemState p {
  max-width: 500px;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.commentsLoading {
  min-height: 150px;
  font-size: 10px;
}

.commentsLoading button {
  background: var(--surface-subcard);
  color: #fff;
  cursor: pointer;
  border: 1px solid #ffffff29;
  border-radius: 999px;
  padding: 9px 15px;
}

.commentsLoadMore {
  background: var(--surface-subcard);
  color: #ffffffbf;
  cursor: pointer;
  border: 1px solid #ffffff29;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin: 28px auto 0;
  padding: 0 24px;
  font-size: 10px;
  font-weight: 650;
  display: flex;
}

.commentSpinner {
  animation: .8s linear infinite commentSpin;
}

@keyframes commentSpin {
  to {
    transform: rotate(360deg);
  }
}

.commentReportBackdrop {
  z-index: 1000;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #000000b8;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.commentReportDialog {
  background: var(--surface-card);
  color: #fff;
  border: 1px solid #ffffff17;
  border-radius: 22px;
  width: min(500px, 100%);
  padding: 30px;
  position: relative;
}

.commentReportClose {
  background: var(--surface-subcard);
  color: #fff;
  cursor: pointer;
  border: 1px solid #ffffff24;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
  position: absolute;
  top: 20px;
  right: 20px;
}

.commentReportClose svg {
  width: 15px;
}

.commentReportDialog > span {
  color: var(--color-accent);
  letter-spacing: .12em;
  font-size: 8px;
  font-weight: 700;
}

.commentReportDialog h3 {
  margin: 17px 45px 12px 0;
  font-size: clamp(31px, 5vw, 48px);
  font-weight: 390;
  line-height: .95;
}

.commentReportDialog > p {
  color: #ffffff78;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.commentReportDialog fieldset {
  border: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 24px 0 14px;
  padding: 0;
  display: grid;
}

.commentReportDialog label {
  cursor: pointer;
  position: relative;
}

.commentReportDialog label input {
  opacity: 0;
  position: absolute;
}

.commentReportDialog label span {
  background: var(--surface-subcard);
  color: #ffffff9e;
  border: 1px solid #ffffff21;
  border-radius: 12px;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  font-size: 10px;
  display: flex;
}

.commentReportDialog label input:checked + span {
  border-color: rgb(var(--color-accent-rgb) / .72);
  color: #fff;
}

.commentReportDialog > textarea {
  background: var(--surface-subcard);
  border: 1px solid #ffffff24;
  border-radius: 14px;
  min-height: 100px;
  padding: 13px;
  font-size: 11px;
}

.commentReportSubmit {
  width: 100%;
  margin-top: 14px;
}

@media (max-width: 680px) {
  .commentsSection {
    border-radius: 28px;
    width: calc(100% - 12px);
    margin: 6px auto;
    padding: 24px 18px;
  }

  .commentsHeader {
    align-items: flex-start;
  }

  .commentsHeader > strong small {
    display: none;
  }

  .commentSignIn {
    flex-direction: column;
    align-items: flex-start;
  }

  .commentItem[data-reply="true"] {
    margin-left: 17px;
    padding-left: 14px;
  }

  .commentContent > header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px 9px;
  }

  .commentContent > header > a {
    flex-basis: 100%;
  }

  .commentComposer > footer > button b {
    display: none;
  }

  .commentComposer > footer > button {
    width: 40px;
    padding: 0;
  }

  .commentReportDialog {
    border-radius: 22px;
    padding: 25px 18px 18px;
  }

  .commentReportDialog fieldset {
    grid-template-columns: 1fr;
  }
}

.innerLeadSection .sectionEyebrow {
  color: #00000080;
}

.innerLeadSection h2 {
  max-width: 1040px;
  font-size: clamp(60px, 7vw, 120px);
}

.innerCardGrid, .innerServersGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 9px;
  display: grid;
}

.innerInfoCard {
  background: var(--surface-card);
  border: 1px solid #ffffff2b;
  border-radius: 37px;
  flex-direction: column;
  justify-content: space-between;
  min-height: 520px;
  padding: 35px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.innerInfoCard:nth-child(4n+1) {
  background: radial-gradient(circle at 8% 6%,
    var(--color-accent),
    #d82400 25%,
    #4a0000 62%,
    #0a0505 100%);
}

.innerInfoCard:nth-child(4n+2) {
  color: #080808;
  background: #f3f1ed;
}

.innerInfoCard:nth-child(4n+2) .innerInfoTop {
  color: #0000008c;
}

.innerInfoCard:nth-child(4n+2) .innerInfoCopy p {
  color: #0000009e;
}

.innerInfoTop {
  color: #ffffff94;
  letter-spacing: .07em;
  text-transform: uppercase;
  justify-content: space-between;
  font-size: 10px;
  display: flex;
}

.innerInfoCopy h2 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(54px, 6vw, 96px);
  font-weight: 350;
  line-height: .84;
}

.innerInfoCopy p {
  color: #ffffff9e;
  max-width: 460px;
  margin: 26px 0 0;
  font-size: 13px;
  line-height: 1.35;
}

.innerInfoArrow {
  opacity: 0;
  transition: opacity .2s, transform .2s;
  position: absolute;
  top: 58px;
  right: 35px;
  transform: translateY(16px);
}

.innerInfoCard:hover .innerInfoArrow {
  opacity: 1;
  transform: translateY(0);
}

.innerServersGrid {
  grid-auto-rows: 680px;
}

.innerServerCard {
  isolation: isolate;
  background: var(--surface-card);
  border-radius: 37px;
  position: relative;
  overflow: hidden;
}

.innerServerImage {
  z-index: -2;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.innerServerCard:first-child .innerServerImage {
  object-fit: contain;
  background: radial-gradient(circle at 50% 38%,
    var(--color-accent),
    #761000 40%,
    var(--surface-card) 74%);
  transform: scale(1.14);
}

.innerServerCard:hover .innerServerImage {
  transform: scale(1.055);
}

.innerServerCard:first-child:hover .innerServerImage {
  transform: scale(1.2);
}

.innerServerShade {
  z-index: -1;
  background: linear-gradient(#00000017, #0000 42%, #000000e6);
  position: absolute;
  inset: 0;
}

.innerServerTop, .innerServerCopy {
  position: absolute;
  left: 34px;
  right: 34px;
}

.innerServerTop {
  letter-spacing: .07em;
  text-transform: uppercase;
  justify-content: space-between;
  font-size: 10px;
  display: flex;
  top: 31px;
}

.innerServerTop span:last-child {
  color: var(--color-accent);
}

.innerServerCopy {
  bottom: 35px;
}

.innerServerCopy p {
  color: var(--color-accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-size: 10px;
}

.innerServerCopy h2 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(49px, 5.5vw, 91px);
  font-weight: 360;
  line-height: .85;
}

.innerServerCopy > span {
  color: #ffffffa6;
  max-width: 470px;
  margin-top: 25px;
  font-size: 12px;
  line-height: 1.3;
  display: block;
}

.innerFaqSection {
  padding: clamp(75px, 8vw, 130px) 4.3vw;
}

.innerFaqSection .faqList, .innerFaqSection .faqEmptyState {
  margin-top: 0;
}

.innerFaqPrinciples {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.innerFaqPrinciples .innerInfoCard {
  min-height: 430px;
}

.innerFaqPrinciples .innerInfoCopy h2 {
  font-size: clamp(45px, 4vw, 68px);
}

.innerCtaSection {
  background: radial-gradient(circle at 80% 5%,
    var(--color-accent),
    #c61700 24%,
    #2d0000 52%,
    var(--surface-card) 72%);
  justify-content: space-between;
  align-items: flex-end;
  min-height: 540px;
  padding: 8vw 4.3vw 4vw;
  display: flex;
}

.innerCtaSection h2 {
  max-width: 850px;
  margin-top: 25px;
  font-size: clamp(55px, 6.6vw, 112px);
}

.innerCtaActions {
  flex-shrink: 0;
  gap: 9px;
  display: flex;
}

.innerCtaActions .buttonPrimary {
  width: 210px;
}

@media (max-width: 1180px) {
  .sectionIntroSplit {
    grid-template-columns: 120px 1.7fr .65fr;
    gap: 3vw;
  }

  .serverIndexRow {
    grid-template-columns: 46px minmax(200px, 1.15fr) minmax(145px, .65fr) 96px 44px;
  }

  .serverDescription {
    display: none;
  }

  .serverCard {
    min-height: 0;
  }

  .ecosystemLayout {
    grid-template-columns: minmax(0, 1.12fr) minmax(350px, .88fr);
    min-height: 720px;
  }

  .ecosystemInfrastructure {
    min-height: 720px;
  }

  .ecosystemInfrastructureCopy h3 {
    font-size: clamp(48px, 5.4vw, 68px);
  }

  .philosophySection {
    min-height: 900px;
  }

  .innerHeroCopy {
    width: 64vw;
  }

  .innerHeroArt {
    width: 66%;
  }
}

.pixelBattleThemeSwitch {
  gap: 7px;
  display: grid;
}

.pixelBattleThemeSwitch > span {
  color: #ffffff7a;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 7px;
  font-weight: 700;
}

.pixelBattleThemeSwitch > div {
  background: var(--surface-subcard);
  border-radius: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  display: grid;
}

.pixelBattleThemeSwitch button {
  color: #ffffff85;
  cursor: pointer;
  min-height: 38px;
  font: inherit;
  background: none;
  border: 0;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  transition: background-color .15s, color .15s;
  display: flex;
}

.pixelBattleThemeSwitch button:hover {
  color: #fff;
  background: #ffffff12;
}

.pixelBattleThemeSwitch button[data-active="true"] {
  color: #fff;
  background: #30333a;
}

.pixelBattleThemeSwitch[data-theme="light"] button:first-child[data-active="true"] {
  color: #101216;
  background: #eeece7;
}

.pixelBattleThemeSwitch button i {
  border-radius: 5px;
  flex: none;
  width: 14px;
  height: 14px;
}

.pixelBattleThemeSwitch button i[data-theme="light"] {
  background: linear-gradient(135deg, #f3f1ec, #c7cbd1);
}

.pixelBattleThemeSwitch button i[data-theme="dark"] {
  background: linear-gradient(135deg, #2d3036, #0d0f12);
}

.pixelBattleThemeSwitch button b {
  font-size: 8px;
  font-weight: 700;
}

.pixelBattleViewport[data-board-theme="light"] {
  background: #d6d8dc;
}

.pixelBattleViewport[data-board-theme="dark"] {
  background: var(--surface-card);
}

@media (max-width: 760px) {
  .pixelBattleThemeSwitch {
    flex: none;
    order: 3;
    display: block;
  }

  .pixelBattleThemeSwitch > span {
    display: none;
  }

  .pixelBattleThemeSwitch > div {
    border-radius: 9px;
    gap: 3px;
    height: 42px;
    padding: 3px;
    display: flex;
  }

  .pixelBattleThemeSwitch button {
    border-radius: 7px;
    width: 38px;
    min-height: 36px;
    padding: 0;
  }

  .pixelBattleThemeSwitch button b {
    display: none;
  }

  .pixelBattleToolPrimary {
    order: 4;
  }

  .pixelBattleZoomControl {
    order: 5;
  }
}

.pixelBattleModeratorTools {
  background: var(--surface-subcard-hover);
  border-radius: 15px;
  gap: 10px;
  padding: 11px;
  display: grid;
  box-shadow: 0 16px 38px #0000003d;
}

.pixelBattleModeratorTools > header {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.pixelBattleModeratorTools > header > div {
  gap: 3px;
  display: grid;
}

.pixelBattleModeratorTools > header span, .pixelBattleModeratorSizes > span, .pixelBattleModeratorAnchor > span {
  color: #ffffff6b;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 7px;
  font-weight: 750;
}

.pixelBattleModeratorTools > header strong {
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}

.pixelBattleModeratorTools > header > b {
  background: var(--color-accent);
  color: #090a0c;
  letter-spacing: .055em;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 7px;
}

.pixelBattleModeratorToggle {
  background: var(--surface-subcard);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  min-height: 39px;
  padding: 0 11px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.pixelBattleModeratorToggle i {
  color: var(--color-accent);
  font-size: 16px;
  font-style: normal;
}

.pixelBattleModeratorGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.pixelBattleModeratorGrid button {
  background: var(--surface-subcard);
  color: #ffffffa6;
  cursor: pointer;
  text-align: left;
  border: 0;
  border-radius: 10px;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 9px;
  font-size: 8px;
  display: grid;
}

.pixelBattleModeratorGrid button i {
  background: var(--surface-subcard-hover);
  color: #fff;
  border-radius: 7px;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 14px;
  font-style: normal;
  display: grid;
}

.pixelBattleModeratorGrid button[data-active="true"] {
  color: #090a0c;
  background: #f1efe9;
  font-weight: 700;
}

.pixelBattleModeratorGrid button[data-active="true"] i {
  background: var(--color-accent);
  color: #090a0c;
}

.pixelBattleModeratorSizes {
  gap: 7px;
  display: grid;
}

.pixelBattleModeratorSizes > div {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.pixelBattleModeratorSizes button {
  background: var(--surface-subcard);
  color: #ffffff9e;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  min-height: 31px;
  font: 700 8px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pixelBattleModeratorSizes button[data-active="true"] {
  background: var(--color-accent);
  color: #090a0c;
}

.pixelBattleModeratorAnchor {
  background: var(--surface-subcard);
  border-radius: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 9px 10px;
  display: grid;
}

.pixelBattleModeratorAnchor > span {
  grid-column: 1 / -1;
}

.pixelBattleModeratorAnchor strong {
  color: #fff;
  font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pixelBattleModeratorAnchor button {
  color: var(--color-accent);
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 8px;
}

.pixelBattleModeratorTools > p {
  color: #ffffff61;
  margin: 0;
  font-size: 7.5px;
  line-height: 1.45;
}

.pixelBattleTemplateEditor {
  gap: 9px;
  display: grid;
}

.pixelBattleTemplateUpload {
  background: var(--surface-subcard);
  color: #fff;
  cursor: pointer;
  text-align: left;
  border: 0;
  border-radius: 11px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 10px;
  display: flex;
}

.pixelBattleTemplateUpload > i {
  background: var(--color-accent);
  color: #090a0c;
  border-radius: 9px;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 18px;
  font-style: normal;
  display: grid;
}

.pixelBattleTemplateUpload > span {
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  display: grid;
}

.pixelBattleTemplateUpload small, .pixelBattleTemplateEditor > header small {
  color: #fff6;
  font-size: 7px;
  font-weight: 500;
  line-height: 1.35;
}

.pixelBattleTemplateEditor > header {
  background: #30333b;
  border-radius: 10px;
  gap: 5px;
  padding: 9px 10px;
  display: grid;
}

.pixelBattleTemplateEditor > header > div {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.pixelBattleTemplateEditor > header strong {
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.pixelBattleTemplateEditor > header span {
  color: var(--color-accent);
  flex: none;
  font: 700 8px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pixelBattleTemplateNumbers, .pixelBattleTemplateCrop {
  gap: 7px;
  display: grid;
}

.pixelBattleTemplateNumbers > span, .pixelBattleTemplateCrop > span, .pixelBattleTemplateOpacity > span {
  color: #ffffff70;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 7px;
  font-weight: 750;
}

.pixelBattleTemplateNumbers > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.pixelBattleTemplateNumbers label {
  background: var(--surface-subcard);
  border-radius: 9px;
  gap: 4px;
  min-width: 0;
  padding: 7px 8px;
  display: grid;
}

.pixelBattleTemplateNumbers label span {
  color: #ffffff5c;
  font-size: 7px;
}

.pixelBattleTemplateNumbers input {
  color: #fff;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pixelBattleTemplateOpacity, .pixelBattleTemplateCrop label {
  grid-template-columns: 54px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 7px;
  display: grid;
}

.pixelBattleTemplateOpacity input, .pixelBattleTemplateCrop input {
  width: 100%;
  accent-color: var(--color-accent);
}

.pixelBattleTemplateOpacity output, .pixelBattleTemplateCrop output {
  color: #fff;
  text-align: right;
  font: 700 8px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pixelBattleTemplateCrop > div {
  background: var(--surface-subcard);
  border-radius: 10px;
  gap: 5px;
  padding: 9px;
  display: grid;
}

.pixelBattleTemplateCrop label > span {
  color: #ffffff8f;
  font-size: 7px;
}

.pixelBattleTemplateActions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.pixelBattleTemplateActions button {
  background: var(--surface-subcard);
  color: #ffffffa6;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  min-height: 34px;
  padding: 0 6px;
  font-size: 7px;
  font-weight: 650;
}

.pixelBattleTemplateActions button:hover {
  color: #fff;
  background: #30333b;
}

.pixelBattleTemplatePlace {
  background: var(--color-accent);
  color: #090a0c;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-size: 9px;
  font-weight: 800;
  display: flex;
}

.pixelBattleTemplatePlace i {
  font-size: 15px;
  font-style: normal;
}

.pixelBattleTemplatePlace:disabled {
  cursor: wait;
  opacity: .55;
}

.pixelBattleViewport[data-moderating="true"] canvas {
  cursor: crosshair;
}

.pixelBattleViewport[data-moderator-tool="image"] canvas {
  cursor: move;
}

.adminPixelModerationActions {
  justify-items: end;
  gap: 9px;
  display: grid;
}

.adminPixelModerationActions > span {
  color: #ffffff6b;
  font-size: 8px;
}

.adminPixelModerationActions > a {
  color: #090a0c;
  background: #f1efe9;
  border-radius: 11px;
  align-items: center;
  gap: 16px;
  min-height: 42px;
  padding: 0 15px;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.adminPixelModerationActions > a i {
  color: var(--color-accent);
  font-style: normal;
}

@media (max-width: 760px) {
  .pixelBattleModeratorTools {
    border-radius: 9px;
    flex: 0 0 178px;
    min-height: 42px;
    padding: 5px;
  }

  .pixelBattleModeratorTools > header, .pixelBattleModeratorTools[data-open="false"] > header {
    display: none;
  }

  .pixelBattleModeratorToggle {
    min-height: 32px;
    padding-inline: 9px;
  }

  .pixelBattleTools:has(.pixelBattleModeratorTools[data-open="true"]) {
    width: auto;
    height: min(520px, 100% - 96px);
    max-height: none;
    padding: 9px;
    display: grid;
    left: 34px;
    right: 10px;
    overflow: hidden auto;
  }

  .pixelBattleTools:has(.pixelBattleModeratorTools[data-open="true"]) .pixelBattleModeratorTools {
    min-height: 0;
    padding: 11px;
    display: grid;
  }

  .pixelBattleTools:has(.pixelBattleModeratorTools[data-open="true"]) .pixelBattleModeratorTools > header {
    display: flex;
  }

  .adminPixelModerationActions {
    justify-items: stretch;
  }
}

@media (max-width: 920px) {
  .contentSection, .philosophySection, .closingSection, .siteFooter, .innerHero, .innerLeadSection, .innerCardGrid, .innerServersGrid, .innerFaqSection, .innerCtaSection {
    border-radius: 34px;
    margin-top: 6px;
  }

  .contentSection {
    padding: 95px 28px;
  }

  .sectionIntroSplit {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .sectionIntro h2, .centeredSectionIntro h2, .philosophyCopy h2, .closingSection h2, .innerLeadSection h2, .innerCtaSection h2 {
    font-size: clamp(54px, 10vw, 90px);
  }

  .sectionLead {
    margin-top: 0;
  }

  .serverIndexList {
    margin-top: 72px;
  }

  .serverIndexRow {
    grid-template-columns: 42px 1fr auto 42px;
    gap: 14px;
    min-height: 96px;
  }

  .serverGenre, .serverDescription {
    display: none;
  }

  .serverName {
    font-size: clamp(25px, 4vw, 34px);
  }

  .serverShowcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 80px;
  }

  .serverCard {
    min-height: 0;
  }

  .serverCard:nth-child(2n) {
    transform: translateY(28px);
  }

  .ecosystemIntro {
    grid-template-columns: 1fr;
  }

  .ecosystemIntroMeta {
    flex-direction: row;
    min-height: 0;
  }

  .ecosystemIntro > p {
    max-width: 520px;
  }

  .ecosystemLayout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ecosystemFeature {
    min-height: 460px;
  }

  .ecosystemRail {
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }

  .ecosystemInfrastructure, .ecosystemEvolution {
    min-height: 420px;
  }

  .ecosystemInfrastructure {
    min-height: 620px;
  }

  .philosophySection {
    min-height: 930px;
    padding: 95px 28px 40px;
  }

  .philosophyCopy h2 {
    width: 100%;
  }

  .philosophyDetails {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: none;
    margin-top: 65px;
  }

  .philosophyBottom {
    margin-top: 85px;
  }

  .newsGrid {
    grid-template-columns: 1fr;
  }

  .socialGrid {
    grid-template-rows: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .socialCard[data-social="01"] {
    grid-area: auto / 1 / auto / -1;
    min-height: 300px;
  }

  .socialCard[data-social="02"], .socialCard[data-social="03"] {
    min-height: 300px;
  }

  .newsCard {
    min-height: 460px;
  }

  .faqSection {
    min-height: auto;
  }

  .faqItem button {
    grid-template-columns: 54px 1fr 46px;
  }

  .faqAnswer p {
    margin-right: 60px;
  }

  .closingSection {
    min-height: 680px;
    padding: 110px 28px 40px;
  }

  .footerNav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 25px;
  }

  .footerMeta {
    grid-template-columns: 1fr 1fr;
  }

  .footerMeta p:last-child {
    text-align: left;
    grid-column: 1 / -1;
  }

  .innerHero {
    height: max(760px, 100svh - 12px);
    min-height: 760px;
  }

  .innerHeroCopy {
    width: auto;
    inset: auto 28px 70px;
  }

  .innerBreadcrumb {
    margin-bottom: 32px;
  }

  .innerHeroCopy h1 {
    font-size: clamp(63px, 12vw, 105px);
  }

  .innerHeroDescription {
    width: min(520px, 90%);
    margin: 25px 0 0;
  }

  .innerHeroArt {
    width: 100%;
    top: 0;
    bottom: 30%;
  }

  .innerHeroArt:after {
    background: linear-gradient(180deg,
        #03030329,
        transparent 38%,
        var(--surface-card) 94%),
      linear-gradient(90deg,
        var(--surface-card) 0,
        transparent 22%,
        transparent 80%,
        var(--surface-card) 100%);
  }

  .innerHeroIndex {
    bottom: 31%;
    right: 18px;
  }

  .innerLeadSection {
    grid-template-columns: 1fr;
    min-height: 460px;
    padding: 92px 28px;
  }

  .innerCardGrid, .innerServersGrid {
    grid-template-columns: 1fr;
  }

  .innerInfoCard {
    min-height: 480px;
  }

  .innerServersGrid {
    grid-auto-rows: 640px;
  }

  .innerFaqPrinciples {
    grid-template-columns: 1fr;
  }

  .innerFaqSection {
    padding: 90px 28px;
  }

  .innerCtaSection {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    min-height: 610px;
    padding: 95px 28px 42px;
  }

  .innerCtaActions {
    margin-top: 55px;
  }
}

@media (max-width: 560px) {
  .contentSection, .philosophySection, .closingSection, .siteFooter, .innerHero, .innerLeadSection, .innerCardGrid, .innerServersGrid, .innerFaqSection, .innerCtaSection {
    border-radius: 28px;
  }

  .contentSection {
    padding: 78px 20px;
  }

  .sectionIntro h2, .centeredSectionIntro h2, .philosophyCopy h2, .closingSection h2, .innerLeadSection h2, .innerCtaSection h2 {
    font-size: clamp(46px, 13vw, 68px);
  }

  .serverIndexRow {
    grid-template-columns: 30px 1fr 38px;
    min-height: 88px;
  }

  .serverStatus {
    display: none;
  }

  .serverArrow {
    width: 38px;
    height: 38px;
  }

  .serverShowcase {
    grid-template-columns: 1fr;
  }

  .serverCard, .serverCard:nth-child(2n) {
    min-height: 0;
    transform: none;
  }

  .textArrowLink {
    margin-top: 45px;
  }

  .ecosystemIntro h2 {
    font-size: clamp(46px, 12vw, 64px);
  }

  .ecosystemLayout {
    margin-top: 52px;
  }

  .ecosystemFeature {
    min-height: 500px;
    padding: 24px;
  }

  .ecosystemFeatureCopy h3 {
    font-size: clamp(38px, 11vw, 52px);
  }

  .ecosystemRail {
    grid-template-columns: 1fr;
  }

  .ecosystemInfrastructure, .ecosystemEvolution {
    min-height: 390px;
    padding: 24px;
  }

  .ecosystemInfrastructure {
    min-height: 590px;
  }

  .ecosystemInfrastructureCopy {
    padding: 64px 0 40px;
  }

  .ecosystemInfrastructureCopy h3 {
    font-size: clamp(42px, 11vw, 58px);
  }

  .ecosystemSpecs, .ecosystemCycle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .philosophySection {
    min-height: 930px;
    padding: 78px 20px 32px;
  }

  .philosophyDetails {
    grid-template-columns: 1fr;
    gap: 30px;
    width: 100%;
    margin-top: 55px;
  }

  .philosophyBottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 35px;
    margin-top: 60px;
  }

  .philosophyBottom ul {
    width: 100%;
  }

  .philosophyBottom .buttonPrimary {
    width: 220px;
  }

  .philosophyWord {
    bottom: 0;
  }

  .newsCard {
    min-height: 430px;
    padding: 24px;
  }

  .socialSection {
    min-height: auto;
  }

  .socialGrid {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }

  .socialCard, .socialCard[data-social="01"], .socialCard[data-social="02"], .socialCard[data-social="03"] {
    border-radius: 20px;
    grid-column: auto;
    min-height: 250px;
    padding: 22px;
  }

  .socialCard[data-social="01"] {
    min-height: 270px;
  }

  .socialCardBottom h3, .socialCard[data-social="02"] .socialCardBottom h3, .socialCard[data-social="03"] .socialCardBottom h3 {
    letter-spacing: -.015em;
    font-size: clamp(30px, 9vw, 40px);
  }

  .socialArrow {
    width: 44px;
    height: 44px;
  }

  .faqItem button {
    grid-template-columns: 30px 1fr 42px;
    gap: 11px;
    min-height: 88px;
  }

  .faqQuestion {
    font-size: 23px;
  }

  .faqToggle {
    width: 40px;
    height: 40px;
  }

  .faqAnswer p {
    width: calc(100% - 41px);
    margin: 0 0 0 41px;
  }

  .closingSection {
    min-height: 640px;
    padding: 92px 20px 35px;
  }

  .footerTopline {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footerToplineDetails {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .footerSupportContact {
    text-align: left;
  }

  .siteFooter {
    min-height: 0;
    padding: 50px 20px 42px;
  }

  .footerNav {
    margin-top: 52px;
  }

  .footerNav a {
    font-size: 14px;
  }

  .footerMeta {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 58px;
  }

  .footerMeta p:last-child {
    grid-column: auto;
  }

  .innerHero {
    height: max(720px, 100svh - 12px);
    min-height: 720px;
  }

  .innerHeroCopy {
    bottom: 52px;
    left: 20px;
    right: 20px;
  }

  .innerHeroCopy h1 {
    font-size: clamp(55px, 15.5vw, 76px);
  }

  .innerHeroDescription {
    width: 100%;
    font-size: 12px;
  }

  .innerHeroArt {
    bottom: 39%;
  }

  .innerHeroIndex {
    bottom: 40%;
  }

  .innerLeadSection {
    min-height: 430px;
    padding: 78px 20px;
  }

  .innerInfoCard {
    border-radius: 23px;
    min-height: 430px;
    padding: 25px;
  }

  .innerInfoCopy h2 {
    font-size: clamp(48px, 14vw, 67px);
  }

  .innerServersGrid {
    grid-auto-rows: 570px;
  }

  .innerServerCard {
    border-radius: 23px;
  }

  .innerServerTop, .innerServerCopy {
    left: 24px;
    right: 24px;
  }

  .innerServerCopy h2 {
    font-size: clamp(44px, 12vw, 62px);
  }

  .innerFaqSection {
    padding: 78px 20px;
  }

  .innerCtaSection {
    min-height: 590px;
    padding: 78px 20px 32px;
  }

  .innerCtaActions {
    flex-wrap: wrap;
    width: 100%;
    margin-top: 42px;
  }
}

.innerServerCard:first-child .innerServerImage, .innerServerCard:first-child:hover .innerServerImage {
  object-fit: cover;
  background: none;
  transform: none;
}

.serverRulesCta {
  background: radial-gradient(circle at 92% -15%,
      var(--color-accent),
      #d82300 26%,
      transparent 58%),
    var(--surface-subcard);
  border: 1px solid #ffffff38;
  border-radius: 28px;
  grid-template-columns: minmax(260px, 1fr) minmax(240px, .7fr) 50px;
  align-items: center;
  gap: 4vw;
  min-height: 190px;
  margin-top: 70px;
  padding: 30px;
  transition: border-color .22s, transform .26s;
  display: grid;
  position: relative;
  overflow: hidden;
}

.serverRulesCta:hover {
  border-color: #ffffff85;
  transform: translateY(-4px);
}

.serverRulesCta > span {
  letter-spacing: -.015em;
  font-size: clamp(40px, 4.5vw, 72px);
  font-weight: 360;
  line-height: .88;
}

.serverRulesCta small {
  color: #ffffff8c;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 450;
}

.serverRulesCta i {
  font-size: 24px;
  font-style: normal;
  transition: transform .2s;
}

.serverRulesCta:hover i {
  transform: translate(5px, -5px);
}

.rulesHero {
  isolation: isolate;
  background: var(--surface-card);
  border: 0;
  border-radius: 0;
  height: 100svh;
  min-height: 720px;
  position: relative;
  overflow: hidden;
}

.rulesPage {
  background: var(--surface-body);
}

@supports (height: 100dvh) {
  .rulesHero {
    height: 100dvh;
  }
}

.rulesHeroMedia {
  z-index: -2;
  position: absolute;
  inset: 0;
}

.rulesHeroMedia img {
  object-fit: cover;
  object-position: center 54%;
  filter: saturate(.9) contrast(1.04);
  transform: scale(1.015);
}

.rulesHeroMedia > div {
  background: linear-gradient(90deg,
      #000c 0,
      #00000080 38%,
      #0000001a 76%),
    linear-gradient(0deg,
      var(--surface-body) 0,
      #000000bd 10%,
      #0000004d 27%,
      transparent 50%,
      #0000001f 100%);
  position: absolute;
  inset: 0;
}

.rulesHeroCopy {
  top: auto;
  bottom: calc(var(--platform-dock-space, 96px) + 40px);
  z-index: 3;
  width: min(720px, 58vw);
  position: absolute;
  left: clamp(28px, 5vw, 86px);
}

.rulesHeroCopy .innerBreadcrumb {
  margin-bottom: 24px;
}

.rulesHeroCopy h1 {
  letter-spacing: -.06em;
  text-wrap: balance;
  max-width: 760px;
  margin: 0;
  font-size: clamp(68px, 8vw, 132px);
  font-weight: 430;
  line-height: .86;
}

.rulesHeroCopy > p {
  color: #ffffffad;
  max-width: 560px;
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.rulesHeroServerPicker {
  align-items: center;
  gap: 14px;
  max-width: 100%;
  margin-top: 24px;
  display: flex;
}

.rulesHeroServerPicker > span {
  color: #ffffff75;
  font: 700 8px/1 var(--font-mono, monospace);
  letter-spacing: .09em;
  text-transform: uppercase;
  flex: none;
}

.rulesHeroServerPicker nav {
  scrollbar-width: none;
  gap: 6px;
  min-width: 0;
  display: flex;
  overflow-x: auto;
}

.rulesHeroServerPicker nav::-webkit-scrollbar {
  display: none;
}

.rulesHeroServerPicker nav > a {
  border: 1px solid var(--surface-light-outline);
  min-width: max-content;
  min-height: 48px;
  color: var(--text-primary);
  background: var(--surface-light);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  backdrop-filter: blur(24px) saturate(1.18);
  border-radius: 999px;
  grid-template-columns: 32px minmax(76px, auto) auto;
  align-items: center;
  gap: 9px;
  padding: 4px 12px 4px 5px;
  transition: border-color .16s, background-color .16s, transform .16s;
  display: grid;
}

.rulesHeroServerPicker nav > a:hover, .rulesHeroServerPicker nav > a:focus-visible {
  border-color: #ffffff47;
  transform: translateY(-2px);
}

.rulesHeroServerPicker nav > a[data-active="true"] {
  border-color: rgb(var(--color-accent-rgb) / .62);
  background: #ffffff1a;
}

.rulesHeroServerPicker small {
  width: 32px;
  height: 32px;
  color: var(--text-primary);
  background: rgb(var(--color-accent-rgb) / .82);
  font: 760 8px/1 var(--font-mono, monospace);
  border-radius: 999px;
  place-items: center;
  display: grid;
}

.rulesHeroServerPicker nav span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.rulesHeroServerPicker strong {
  font-size: 10px;
  line-height: 1;
}

.rulesHeroServerPicker em, .rulesHeroServerPicker i {
  color: #ffffff6b;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 7px;
  font-style: normal;
  line-height: 1;
}

.rulesHeroServerPicker i {
  color: #ffffff9e;
  margin-left: 5px;
}

.rulesHeroActions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  display: flex;
}

.rulesHeroActions > a {
  min-height: 50px;
  color: var(--text-primary);
  background: var(--color-accent);
  border-radius: 999px;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: 0 18px 0 21px;
  font-size: 11px;
  font-weight: 720;
  transition: background-color .16s, transform .16s;
  display: inline-flex;
}

.rulesHeroActions > a:hover, .rulesHeroActions > a:focus-visible {
  transform: translateY(-2px);
}

.rulesHeroActions svg {
  width: 16px;
  height: 16px;
}

.rulesHeroActions > a:focus-visible {
  outline: 1px solid rgb(var(--color-accent-rgb) / .9);
  outline-offset: 3px;
}

.rulesExplorer {
  background: radial-gradient(circle at 78% 0, rgb(var(--color-accent-rgb) / .07), transparent 34rem),
    var(--surface-body);
  width: 100%;
  color: var(--text-primary);
  margin: 0 auto;
  padding: clamp(52px, 7vw, 96px) 4.3vw clamp(96px, 10vw, 156px);
  position: relative;
}

.rulesExplorer > * {
  z-index: 1;
  width: min(1280px, 100%);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.rulesSearchPanel {
  background: var(--surface-light);
  color: var(--text-primary);
  border-radius: 20px;
  padding: 20px 22px;
}

.rulesSearchPanel label {
  display: block;
  position: relative;
}

.rulesSearchPanel label > span {
  color: #ffffff85;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-size: 9px;
  display: block;
}

.rulesSearchPanel input {
  color: #fff;
  width: 100%;
  font: inherit;
  letter-spacing: -.015em;
  background: none;
  border: 0;
  border-bottom: 1px solid #ffffff61;
  outline: 0;
  padding: 0 52px 12px 0;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 430;
  line-height: 1;
}

.rulesSearchPanel input::placeholder {
  color: #ffffff4f;
}

.rulesSearchPanel input:focus {
  border-color: var(--color-accent);
}

.rulesSearchPanel label > i {
  color: var(--color-accent);
  font-size: 24px;
  font-style: normal;
  position: absolute;
  bottom: 10px;
  right: 6px;
}

.rulesCategoryBar {
  z-index: 20;
  background: var(--surface-light);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  backdrop-filter: blur(28px) saturate(1.2);
  border-radius: 20px;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 28px;
  margin-top: 8px;
  padding: 13px;
  display: grid;
  position: sticky;
  top: 8px;
}

.rulesCategoryBar > p {
  color: #ffffff75;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 0 0 0 10px;
  font-size: 9px;
}

.rulesCategoryScroller {
  scrollbar-width: none;
  gap: 6px;
  display: flex;
  overflow-x: auto;
}

.rulesCategoryScroller::-webkit-scrollbar {
  display: none;
}

.rulesCategoryScroller button {
  color: #ffffff9e;
  cursor: pointer;
  min-height: 48px;
  font: inherit;
  background: none;
  border: 1px solid #0000;
  border-radius: 15px;
  flex: none;
  align-items: center;
  gap: 24px;
  padding: 0 17px;
  font-size: 10px;
  transition: background .18s, color .18s, border-color .18s;
  display: flex;
}

.rulesCategoryScroller button:hover, .rulesCategoryScroller button:focus-visible {
  background: #ffffff0d;
  border-color: #ffffff14;
}

.rulesCategoryScroller button i {
  color: #ffffff61;
  font-size: 9px;
  font-style: normal;
}

.rulesCategoryScroller button[aria-pressed="true"] {
  border-color: rgb(var(--color-accent-rgb) / .62);
  background: var(--color-accent);
  color: var(--text-primary);
}

.rulesCategoryScroller button[aria-pressed="true"] i {
  color: var(--text-primary);
}

.rulesResultsMeta {
  border-bottom: 1px solid #ffffff1f;
  justify-content: space-between;
  align-items: center;
  min-height: 76px;
  padding: 0 8px;
  display: flex;
}

.rulesResultsMeta p {
  color: #ffffff75;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0;
  font-size: 11px;
}

.rulesResultsMeta strong {
  color: var(--text-primary);
  letter-spacing: -.015em;
  font-size: 28px;
  font-weight: 400;
}

.rulesResultsMeta button {
  color: #ffffff9e;
  cursor: pointer;
  font: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid #ffffff52;
  padding: 0 0 6px;
  font-size: 10px;
}

.rulesResultList {
  background: var(--surface-light);
  border-radius: 22px;
  overflow: hidden;
}

.rulesResultCard {
  background: none;
  border: 0;
  border-bottom: 1px solid #ffffff17;
  border-radius: 0;
  padding: 28px 30px 30px;
  scroll-margin-top: 100px;
  transition: border-color .18s, background-color .18s;
  position: relative;
}

.rulesResultCard:last-child {
  border-bottom: 0;
}

.rulesResultCard:hover, .rulesResultCard:target {
  background: #ffffff0b;
}

.rulesResultCard > header {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  display: flex;
}

.rulesResultCard > header > span {
  color: var(--color-accent);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 650;
}

.rulesResultCard > h2 {
  max-width: 820px;
  color: var(--text-primary);
  letter-spacing: -.035em;
  text-wrap: balance;
  margin: 20px 0 0;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 430;
  line-height: .98;
}

.rulesResultCard > p {
  color: #ffffff8f;
  white-space: pre-line;
  max-width: 920px;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.rulesResultCard > header > a {
  color: #ffffff85;
  border: 1px solid #ffffff24;
  border-radius: 50%;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 12px;
  display: grid;
}

.rulesResultCard > header > a:hover, .rulesResultCard:target > header > a {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.rulesEmptyState {
  text-align: center;
  border-radius: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 430px;
  margin-top: 8px;
  padding: 32px;
  display: flex;
}

.rulesEmptyState > span {
  color: var(--color-accent);
  font-size: 11px;
}

.rulesEmptyState h2 {
  color: var(--text-primary);
  letter-spacing: -.015em;
  margin: 24px 0 0;
  font-size: clamp(50px, 7vw, 104px);
  font-weight: 430;
  line-height: .88;
}

.rulesEmptyState p {
  color: #ffffff85;
  max-width: 480px;
  margin: 25px 0 34px;
  font-size: 13px;
  line-height: 1.5;
}

.rulesEmptyState .button {
  border: 0;
}

@media (max-width: 920px) {
  .rulesHero {
    height: 100svh;
    min-height: 700px;
  }

  @supports (height: 100dvh) {
    .rulesHero {
      height: 100dvh;
    }
  }

  .rulesHeroMedia > div {
    background: linear-gradient(90deg,
        #000000c7,
        #00000047 72%,
        #0000001a),
      linear-gradient(0deg, var(--surface-body), #0000009e 10%, transparent 48%);
  }

  .rulesHeroCopy {
    top: auto;
    right: 28px;
    bottom: calc(var(--platform-dock-space, 82px) + 40px);
    width: auto;
    left: 28px;
  }

  .rulesHeroCopy h1 {
    font-size: clamp(62px, 12vw, 105px);
  }

  .rulesHeroCopy > p {
    margin-left: 0;
  }

  .rulesCategoryBar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .rulesCategoryBar > p {
    margin: 3px 0 0 5px;
  }
}

@media (max-width: 560px) {
  .serverRulesCta {
    border-radius: 22px;
    grid-template-columns: 1fr 38px;
    gap: 20px;
    min-height: 210px;
    margin-top: 48px;
    padding: 23px;
  }

  .serverRulesCta small {
    grid-column: 1;
  }

  .serverRulesCta i {
    grid-area: 1 / 2 / span 2;
  }

  .rulesHero {
    border-radius: 0;
    height: 100svh;
    min-height: 700px;
  }

  .rulesHeroMedia {
    bottom: 0;
  }

  .rulesHeroCopy {
    right: 20px;
    bottom: calc(var(--platform-dock-space, 76px) + 34px);
    left: 20px;
  }

  .rulesHeroCopy .innerBreadcrumb {
    margin-bottom: 26px;
  }

  .rulesHeroCopy h1 {
    font-size: clamp(50px, 14.5vw, 73px);
  }

  .rulesHeroCopy > p {
    margin-top: 23px;
    font-size: 12px;
  }

  .rulesHeroActions {
    margin-top: 22px;
  }

  .rulesHeroActions > a {
    gap: 18px;
    min-height: 46px;
  }

  .rulesExplorer {
    padding: 48px 20px 82px;
  }

  .rulesSearchPanel {
    border-radius: 18px;
    padding: 18px;
  }

  .rulesSearchPanel input {
    font-size: 24px;
  }

  .rulesCategoryBar {
    border-radius: 18px;
    padding: 9px;
    top: 5px;
  }

  .rulesCategoryScroller button {
    min-height: 43px;
    padding: 0 13px;
  }

  .rulesResultsMeta {
    min-height: 72px;
  }

  .rulesResultCard {
    padding: 22px 20px 24px;
  }

  .rulesResultCard > h2 {
    font-size: clamp(28px, 9vw, 40px);
  }

  .rulesResultCard > p {
    font-size: 12px;
  }
}

@media (max-width: 920px) {
  .newsArchiveGrid {
    grid-template-columns: 1fr;
  }

  .newsPostHero {
    border-radius: 34px;
    min-height: 760px;
  }

  .newsPostHeroCopy {
    width: auto;
    bottom: 70px;
    left: 28px;
    right: 28px;
  }

  .newsPostHeroCopy h1 {
    font-size: clamp(58px, 13vw, 108px);
  }

  .newsPostBody {
    border-radius: 34px;
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-width: 560px) {
  .newsArchiveGrid {
    padding-left: 14px;
    padding-right: 14px;
  }

  .newsArchiveCard {
    border-radius: 22px;
    min-height: 540px;
  }

  .newsArchiveMeta {
    grid-template-columns: 35px 1fr;
    padding: 20px 20px 0;
  }

  .newsArchiveMeta time {
    grid-column: 2;
  }

  .newsArchiveCopy {
    padding: 20px 56px 27px 20px;
  }

  .newsArchiveCopy i {
    bottom: 27px;
    right: 20px;
  }

  .newsPostHero {
    min-height: 700px;
  }

  .newsPostHeroCopy h1 {
    font-size: clamp(50px, 15vw, 76px);
  }

  .newsPostHeroCopy > p:last-child {
    margin-top: 25px;
    font-size: 15px;
  }

  .newsPostMarkdown {
    margin-top: 30px;
  }

  .newsPostMarkdown .markdownContent {
    font-size: 17px;
  }
}

.franchisePage > section, .franchisePage > footer {
  border: 1px solid #ffffff21;
  border-radius: 46px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}

.franchiseHero {
  isolation: isolate;
  background: var(--surface-card);
  height: calc(100svh - 16px);
  min-height: 760px;
}

.franchiseHeroMedia, .franchiseHeroMedia span {
  position: absolute;
  inset: 0;
}

.franchiseHeroMedia {
  z-index: -2;
}

.franchiseHeroMedia img {
  object-fit: cover;
  object-position: 55% 48%;
  transform: scale(1.02);
}

.franchiseHeroMedia span {
  background: linear-gradient(90deg, #030303fa 0%, #030303e6 28%, #03030378 56%, #0303032b 100%), linear-gradient(#0303031f 48%, #030303d6 100%);
}

.franchiseHeroCopy {
  z-index: 4;
  width: min(860px, 66vw);
  position: absolute;
  top: 22%;
  left: 4.3vw;
}

.franchiseHeroCopy .innerBreadcrumb {
  margin-bottom: 42px;
}

.franchiseHeroCopy h1 {
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 930px;
  margin: 25px 0 0;
  font-size: clamp(72px, 8.5vw, 146px);
  font-weight: 340;
  line-height: .82;
}

.franchiseHeroCopy > p:last-of-type {
  color: #ffffffb0;
  max-width: 560px;
  margin: 34px 0 0;
  font-size: clamp(14px, 1.2vw, 19px);
  line-height: 1.38;
}

.franchiseHeroActions {
  gap: 9px;
  margin-top: 38px;
  display: flex;
}

.franchiseHeroActions .buttonPrimary {
  width: 270px;
}

.franchiseHeroMeta {
  z-index: 4;
  border-top: 1px solid #ffffff47;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(660px, 48vw);
  display: grid;
  position: absolute;
  bottom: 35px;
  right: 4.3vw;
}

.franchiseHeroMeta > span {
  letter-spacing: .07em;
  text-transform: uppercase;
  border-left: 1px solid #ffffff26;
  align-items: flex-end;
  gap: 12px;
  min-height: 62px;
  padding: 15px 16px 0;
  font-size: 9px;
  display: flex;
}

.franchiseHeroMeta i {
  color: var(--color-accent);
  font-size: 8px;
  font-style: normal;
}

.franchiseThesis {
  color: #080808;
  background: #f1efea;
  grid-template-columns: minmax(180px, .44fr) minmax(520px, 1.56fr);
  align-items: start;
  gap: 6vw;
  min-height: 620px;
  padding: clamp(95px, 10vw, 160px) 4.3vw;
  display: grid;
}

.franchiseThesis .sectionEyebrow {
  color: #0000007a;
}

.franchiseThesisMark {
  color: var(--color-accent);
  letter-spacing: -.015em;
  margin-top: 90px;
  font-size: clamp(90px, 11vw, 178px);
  font-weight: 650;
  line-height: .65;
  display: block;
}

.franchiseThesis h2 {
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 1180px;
  margin: 0;
  font-size: clamp(62px, 7.2vw, 120px);
  font-weight: 350;
  line-height: .86;
}

.franchiseThesis > div:last-child > p {
  color: #00000096;
  max-width: 680px;
  margin: 54px 0 0 auto;
  font-size: clamp(17px, 1.55vw, 25px);
  line-height: 1.25;
}

.franchiseExchange {
  background: var(--surface-card);
  padding: clamp(95px, 10vw, 160px) 4.3vw;
}

.franchiseExchange > header {
  grid-template-columns: minmax(170px, .45fr) minmax(520px, 1.55fr);
  gap: 6vw;
  display: grid;
}

.franchiseExchange > header h2 {
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 1090px;
  margin: 0;
  font-size: clamp(58px, 7vw, 116px);
  font-weight: 350;
  line-height: .84;
}

.franchiseExchangeGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7vw;
  margin-top: clamp(90px, 10vw, 150px);
  display: grid;
}

.franchiseRole {
  border-top: 1px solid #ffffff4d;
  padding-top: 27px;
}

.franchiseRolePartner {
  border-top-color: var(--color-accent);
}

.franchiseRoleHead {
  color: #ffffff78;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  display: flex;
}

.franchiseRoleHead strong {
  color: var(--color-accent);
  letter-spacing: -.015em;
  font-size: 18px;
  font-weight: 800;
}

.franchiseRole > h3 {
  letter-spacing: -.015em;
  max-width: 650px;
  margin: 70px 0 0;
  font-size: clamp(46px, 4.7vw, 78px);
  font-weight: 360;
  line-height: .88;
}

.franchiseRole > p {
  color: #ffffff94;
  max-width: 570px;
  margin: 28px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.franchiseRole ol {
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
}

.franchiseRole li {
  border-top: 1px solid #ffffff24;
  grid-template-columns: 45px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0;
  display: grid;
}

.franchiseRole li > span {
  color: var(--color-accent);
  font-size: 9px;
}

.franchiseRole li strong {
  font-size: 18px;
  font-weight: 500;
  display: block;
}

.franchiseRole li p {
  color: #ffffff7d;
  max-width: 500px;
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.42;
}

.franchiseProcess {
  color: #080808;
  background: #f1efea;
  grid-template-columns: minmax(340px, .78fr) minmax(560px, 1.22fr);
  gap: 7vw;
  padding: clamp(95px, 10vw, 160px) 4.3vw;
  scroll-margin-top: 18px;
  display: grid;
}

.franchiseProcess .sectionEyebrow {
  color: #0000007a;
}

.franchiseProcess > header h2 {
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 680px;
  margin: 34px 0 0;
  font-size: clamp(53px, 5.6vw, 92px);
  font-weight: 350;
  line-height: .88;
}

.franchiseProcessList {
  border-top: 1px solid #00000047;
  margin: 0;
  padding: 0;
  list-style: none;
}

.franchiseProcessList li {
  border-bottom: 1px solid #0000002e;
  grid-template-columns: 48px 100px minmax(180px, .75fr) minmax(250px, 1fr);
  align-items: start;
  gap: 20px;
  padding: 30px 0 34px;
  display: grid;
}

.franchiseProcessList li > span, .franchiseProcessList li > small {
  color: #0000006e;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-top: 7px;
  font-size: 9px;
}

.franchiseProcessList li > span {
  color: var(--color-accent);
}

.franchiseProcessList h3 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(25px, 2vw, 34px);
  font-weight: 430;
  line-height: .98;
}

.franchiseProcessList p {
  color: #00000094;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.franchiseFit {
  background: var(--surface-card);
  grid-template-columns: minmax(0, 1.05fr) minmax(520px, .95fr);
  min-height: 900px;
  display: grid;
}

.franchiseFitMedia {
  min-height: 620px;
  position: relative;
  overflow: hidden;
}

.franchiseFitMedia img {
  object-fit: cover;
  object-position: 57% center;
}

.franchiseFitMedia span {
  background: linear-gradient(90deg,
    #05050514,
    #0505051f 62%,
    var(--surface-card) 100%);
  position: absolute;
  inset: 0;
}

.franchiseFitCopy {
  align-self: center;
  padding: 90px 4.3vw 90px 2vw;
}

.franchiseFitCopy > h2 {
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 730px;
  margin: 30px 0 0;
  font-size: clamp(54px, 5.8vw, 96px);
  font-weight: 350;
  line-height: .86;
}

.franchiseFitPositive, .franchiseFitNegative ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.franchiseFitPositive {
  border-top: 1px solid #ffffff2e;
  margin-top: 58px;
}

.franchiseFitPositive li {
  color: #ffffffbf;
  border-bottom: 1px solid #ffffff1f;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 18px 0;
  font-size: 12px;
  line-height: 1.35;
  display: grid;
}

.franchiseFitPositive i {
  color: var(--color-accent);
  font-size: 18px;
  font-style: normal;
  line-height: .8;
}

.franchiseFitNegative {
  border-top: 1px solid var(--color-accent);
  margin-top: 50px;
  padding-top: 28px;
}

.franchiseFitNegative h3 {
  letter-spacing: -.015em;
  max-width: 570px;
  margin: 0;
  font-size: clamp(25px, 2.5vw, 39px);
  font-weight: 400;
  line-height: 1;
}

.franchiseFitNegative ul {
  gap: 9px;
  margin-top: 24px;
  display: grid;
}

.franchiseFitNegative li {
  color: #ffffff6e;
  font-size: 10px;
  line-height: 1.4;
}

.franchiseFitNegative li:before {
  color: #ffffff4d;
  content: "—";
  margin-right: 11px;
}

.franchiseClosing {
  isolation: isolate;
  background: radial-gradient(circle at 50% 15%,
    var(--color-accent) 0%,
    #e52b00 24%,
    #7e0000 48%,
    #160000 74%,
    var(--surface-card) 100%);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 720px;
  padding: 100px 4.3vw 72px;
  display: flex;
}

.franchiseClosing h2 {
  letter-spacing: -.015em;
  text-wrap: balance;
  width: min(1120px, 94%);
  margin: 28px auto 0;
  font-size: clamp(68px, 8vw, 136px);
  font-weight: 350;
  line-height: .82;
}

.franchiseClosing > p:not(.sectionEyebrow) {
  color: #ffffffad;
  max-width: 620px;
  margin: 36px auto 0;
  font-size: 14px;
  line-height: 1.4;
}

.franchiseClosing > .button {
  z-index: 2;
  width: 280px;
  margin-top: 38px;
}

.franchiseClosing > small {
  color: #fff6;
  max-width: 920px;
  margin-top: 46px;
  font-size: 9px;
  line-height: 1.45;
}

.franchiseClosingWord {
  z-index: -1;
  color: #ffffff12;
  letter-spacing: -.015em;
  font-size: min(23vw, 360px);
  font-weight: 650;
  line-height: .7;
  position: absolute;
  bottom: -.08em;
  left: 1vw;
  right: 1vw;
}

@media (max-width: 1180px) {
  .franchiseHeroCopy {
    width: min(760px, 72vw);
  }

  .franchiseProcess {
    grid-template-columns: 1fr;
  }

  .franchiseProcess > header h2 {
    max-width: 850px;
  }

  .franchiseProcessList {
    margin-top: 80px;
  }

  .franchiseProcessList li {
    grid-template-columns: 48px 90px minmax(180px, .7fr) minmax(240px, 1fr);
  }

  .franchiseFit {
    grid-template-columns: minmax(0, .9fr) minmax(470px, 1.1fr);
  }
}

@media (max-width: 920px) {
  .franchisePage > section, .franchisePage > footer {
    border-radius: 34px;
    margin-top: 6px;
  }

  .franchiseHero {
    height: max(850px, 100svh - 12px);
    min-height: 850px;
  }

  .franchiseHeroMedia img {
    object-position: 60% 15%;
  }

  .franchiseHeroMedia span {
    background: linear-gradient(180deg,
        #03030314 0%,
        #0303032e 32%,
        #030303f5 70%,
        var(--surface-card) 100%),
      linear-gradient(90deg, #03030380, transparent 60%);
  }

  .franchiseHeroCopy {
    width: auto;
    inset: auto 28px 132px;
  }

  .franchiseHeroCopy .innerBreadcrumb {
    margin-bottom: 26px;
  }

  .franchiseHeroCopy h1 {
    max-width: 780px;
    font-size: clamp(62px, 12vw, 104px);
  }

  .franchiseHeroMeta {
    width: auto;
    bottom: 27px;
    left: 28px;
    right: 28px;
  }

  .franchiseThesis, .franchiseExchange > header {
    grid-template-columns: 1fr;
  }

  .franchiseThesis {
    min-height: 0;
    padding: 100px 28px;
  }

  .franchiseThesisMark {
    margin: 34px 0 70px;
  }

  .franchiseThesis > div:last-child > p {
    margin-left: 0;
  }

  .franchiseExchange {
    padding: 100px 28px;
  }

  .franchiseExchange > header h2 {
    margin-top: 30px;
  }

  .franchiseExchangeGrid {
    grid-template-columns: 1fr;
    gap: 90px;
  }

  .franchiseRole > h3 {
    max-width: 720px;
  }

  .franchiseProcess {
    padding: 100px 28px;
  }

  .franchiseProcessList li {
    grid-template-columns: 46px 90px 1fr;
  }

  .franchiseProcessList p {
    grid-column: 3;
  }

  .franchiseFit {
    grid-template-columns: 1fr;
  }

  .franchiseFitMedia {
    min-height: 540px;
  }

  .franchiseFitMedia span {
    background: linear-gradient(180deg,
      transparent 60%,
      var(--surface-card) 100%);
  }

  .franchiseFitCopy {
    padding: 80px 28px 100px;
  }

  .franchiseClosing {
    min-height: 680px;
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-width: 560px) {
  .franchisePage > section, .franchisePage > footer {
    border-radius: 28px;
  }

  .franchiseHero {
    height: max(820px, 100svh - 12px);
    min-height: 820px;
  }

  .franchiseHeroCopy {
    bottom: 144px;
    left: 20px;
    right: 20px;
  }

  .franchiseHeroCopy .innerBreadcrumb {
    margin-bottom: 20px;
  }

  .franchiseHeroCopy h1 {
    margin-top: 18px;
    font-size: clamp(50px, 14.5vw, 72px);
  }

  .franchiseHeroCopy > p:last-of-type {
    margin-top: 24px;
    font-size: 12px;
  }

  .franchiseHeroActions {
    grid-template-columns: 1fr 1fr;
    margin-top: 27px;
    display: grid;
  }

  .franchiseHeroActions .button, .franchiseHeroActions .buttonPrimary {
    width: 100%;
    min-width: 0;
    padding: 0 15px;
    font-size: 11px;
  }

  .franchiseHeroMeta {
    bottom: 21px;
    left: 20px;
    right: 20px;
  }

  .franchiseHeroMeta > span {
    gap: 5px;
    min-height: 52px;
    padding: 11px 6px 0;
    font-size: 7px;
  }

  .franchiseThesis, .franchiseExchange, .franchiseProcess, .franchiseFitCopy, .franchiseClosing {
    padding-left: 20px;
    padding-right: 20px;
  }

  .franchiseThesis {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .franchiseThesisMark {
    margin-bottom: 55px;
    font-size: 92px;
  }

  .franchiseThesis h2, .franchiseExchange > header h2, .franchiseProcess > header h2, .franchiseFitCopy > h2 {
    font-size: clamp(46px, 13vw, 67px);
  }

  .franchiseThesis > div:last-child > p {
    margin-top: 34px;
    font-size: 17px;
  }

  .franchiseExchange, .franchiseProcess {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .franchiseExchangeGrid {
    gap: 72px;
    margin-top: 70px;
  }

  .franchiseRole > h3 {
    margin-top: 50px;
    font-size: clamp(42px, 12vw, 60px);
  }

  .franchiseRole ol {
    margin-top: 50px;
  }

  .franchiseRole li {
    grid-template-columns: 35px 1fr;
    gap: 12px;
  }

  .franchiseProcessList {
    margin-top: 58px;
  }

  .franchiseProcessList li {
    grid-template-columns: 38px 1fr;
    gap: 10px 14px;
    padding: 25px 0 29px;
  }

  .franchiseProcessList li > small, .franchiseProcessList h3, .franchiseProcessList p {
    grid-column: 2;
  }

  .franchiseProcessList h3 {
    font-size: 28px;
  }

  .franchiseFitMedia {
    min-height: 400px;
  }

  .franchiseFitCopy {
    padding-top: 62px;
    padding-bottom: 82px;
  }

  .franchiseClosing {
    min-height: 650px;
    padding-top: 88px;
    padding-bottom: 60px;
  }

  .franchiseClosing h2 {
    width: 100%;
    font-size: clamp(51px, 14vw, 70px);
  }

  .franchiseClosing > .button {
    width: 100%;
  }

  .franchiseClosing > small {
    font-size: 8px;
  }
}

@media (max-width: 1280px) and (min-width: 921px) {
  .siteHeader {
    padding-left: 3vw;
    padding-right: 3vw;
  }

  .siteHeader .desktopNav {
    gap: clamp(12px, 1.45vw, 22px);
  }

  .siteHeader .desktopNav a {
    font-size: 9px;
  }

  .headerServersPanel {
    width: min(580px, 100vw - 42px);
  }

  .desktopNav .headerServerCard {
    min-height: 124px;
  }
}

.accountPortal {
  background: var(--surface-card);
  color: #f7f4ef;
  isolation: isolate;
  border: 1px solid #ffffff26;
  border-radius: 46px;
  min-height: calc(100svh - 16px);
  position: relative;
  overflow: hidden;
}

.accountPortal:after {
  z-index: 30;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  border: 1px solid #ffffff09;
  position: absolute;
  inset: 0;
}

.accountPortal .accountClient.isAuthenticated {
  background: var(--surface-card);
  color: #f6f3ef;
  min-height: calc(100svh - 16px);
  padding: clamp(138px, 10vw, 170px) 4.3vw clamp(88px, 8vw, 130px);
}

.accountPortal > .accountLoading {
  border: 0;
  border-radius: 0;
  min-height: calc(100svh - 16px);
  padding-top: 86px;
}

.accountSessionSkeleton {
  box-sizing: border-box;
  background: var(--surface-card);
  align-content: start;
  gap: 9px;
  min-height: calc(100svh - 16px);
  padding: clamp(138px, 10vw, 170px) 4.3vw clamp(88px, 8vw, 130px);
  display: grid;
}

.accountSessionSkeletonHeader {
  background: #ffffff09;
  border-radius: 22px;
  grid-template-columns: 66px minmax(180px, 1fr) 180px;
  align-items: center;
  gap: 18px;
  min-height: 112px;
  padding: 20px;
  display: grid;
}

.accountSessionSkeletonHeader > i {
  background: #ffffff14;
  border-radius: 50%;
  width: 66px;
  height: 66px;
}

.accountSessionSkeletonHeader > span {
  gap: 10px;
  display: grid;
}

.accountSessionSkeletonHeader b, .accountSessionSkeletonHeader small, .accountSessionSkeletonHeader em, .accountSessionSkeletonNav i, .accountSessionSkeletonBody i, .accountSessionSkeletonBody b {
  background: #ffffff13;
  border-radius: 999px;
  animation: 1.25s ease-in-out infinite alternate accountSessionPulse;
  display: block;
}

.accountSessionSkeletonHeader b {
  width: min(260px, 72%);
  height: 20px;
}

.accountSessionSkeletonHeader small {
  width: min(180px, 52%);
  height: 9px;
}

.accountSessionSkeletonHeader em {
  justify-self: end;
  width: 150px;
  height: 36px;
}

.accountSessionSkeletonNav {
  background: #ffffff06;
  border-radius: 18px;
  gap: 7px;
  padding: 8px;
  display: flex;
}

.accountSessionSkeletonNav i {
  width: 92px;
  height: 34px;
}

.accountSessionSkeletonBody {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.accountSessionSkeletonBody > span {
  background: #ffffff09;
  border-radius: 20px;
  align-content: end;
  gap: 12px;
  min-height: 146px;
  padding: 18px;
  display: grid;
}

.accountSessionSkeletonBody i {
  width: 44%;
  height: 8px;
}

.accountSessionSkeletonBody b {
  width: 68%;
  height: 24px;
}

@keyframes accountSessionPulse {
  to {
    opacity: .42;
  }
}

@media (max-width: 760px) {
  .accountSessionSkeleton {
    padding-left: 20px;
    padding-right: 20px;
  }

  .accountSessionSkeletonHeader {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .accountSessionSkeletonHeader > i {
    width: 52px;
    height: 52px;
  }

  .accountSessionSkeletonHeader em {
    display: none;
  }

  .accountSessionSkeletonNav {
    overflow: hidden;
  }

  .accountSessionSkeletonNav i {
    flex: 0 0 72px;
  }

  .accountSessionSkeletonBody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.authExperience {
  background: radial-gradient(circle at 83% 44%,
      rgb(var(--color-accent-rgb) / .23),
      transparent 25%),
    radial-gradient(circle at 50% 18%,
      #ffffff0e,
      transparent 30%),
    linear-gradient(148deg,
      var(--surface-card),
      var(--surface-card) 54%,
      #110503);
  isolation: isolate;
  min-height: max(880px, 100svh - 16px);
  padding: clamp(126px, 9vw, 154px) clamp(18px, 4.3vw, 72px) clamp(74px, 7vw, 110px);
  position: relative;
  overflow: hidden;
}

.authExperience:before {
  z-index: -1;
  content: "";
  background-image: linear-gradient(#ffffff06 1px, #0000 1px), linear-gradient(90deg, #ffffff06 1px, #0000 1px);
  background-size: 72px 72px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000, #0000 78%);
  mask-image: linear-gradient(#000, #0000 78%);
}

.authSceneGlow {
  z-index: -1;
  background: radial-gradient(circle,
    var(--color-accent) 0,
    #dc2300b8 24%,
    #74000042 48%,
    transparent 70%);
  filter: blur(5px);
  border-radius: 50%;
  width: 88vw;
  height: 88vw;
  position: absolute;
  bottom: -43vw;
  right: -24vw;
}

.authSceneCharacter {
  z-index: -1;
  opacity: .38;
  filter: saturate(.76) contrast(1.08);
  pointer-events: none;
  width: min(45vw, 760px);
  height: 86%;
  position: absolute;
  bottom: -5%;
  right: -2vw;
}

.authSceneCharacter img {
  object-fit: contain;
  object-position: center bottom;
  -webkit-mask-image: linear-gradient(#000 55%, #0000 100%);
  mask-image: linear-gradient(#000 55%, #0000 100%);
}

.authSceneIdentity {
  z-index: -2;
  color: #ffffff09;
  letter-spacing: -.015em;
  white-space: nowrap;
  pointer-events: none;
  font-size: clamp(140px, 20vw, 360px);
  font-weight: 620;
  line-height: .72;
  position: absolute;
  bottom: -.11em;
  right: -.04em;
}

.authCenter {
  z-index: 3;
  flex-direction: column;
  align-items: center;
  width: min(100%, 980px);
  margin: 0 auto;
  display: flex;
  position: relative;
}

.authCard {
  width: min(100%, 580px);
  box-shadow: 0 40px 120px #0000008a,
    0 0 80px rgb(var(--color-accent-rgb) / .07);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  background: linear-gradient(145deg, #ffffff0e, #0000 40%), #0a0a0ad6;
  border: 1px solid #ffffff29;
  border-radius: 32px;
  padding: clamp(22px, 3vw, 34px);
  transition: width .24s;
}

.authCard[data-mode="register"] {
  width: min(100%, 720px);
}

.authCardMeta {
  color: #ffffff5c;
  letter-spacing: .09em;
  text-transform: uppercase;
  justify-content: space-between;
  gap: 18px;
  font-size: 8px;
  display: flex;
}

.authPrimarySwitch {
  background: #ffffff0b;
  border: 1px solid #ffffff1c;
  border-radius: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 22px;
  padding: 5px;
  display: grid;
}

.authPrimarySwitch button {
  color: #ffffff7a;
  letter-spacing: .04em;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 11px;
  min-height: 45px;
  padding: 10px 16px;
  font-size: 10px;
  transition: background .18s, color .18s, box-shadow .18s;
}

.authPrimarySwitch button[data-active="true"] {
  color: #090909;
  background: #f4f1ec;
  box-shadow: 0 10px 32px #0000003d;
}

.authReturn, .authTextAction, .authUtilityRow button, .authModePrompt button {
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
}

.authReturn {
  color: #ffffff85;
  letter-spacing: .04em;
  align-items: center;
  gap: 9px;
  margin-top: 25px;
  padding: 0;
  font-size: 9px;
  display: inline-flex;
}

.authReturn span {
  border: 1px solid #ffffff29;
  border-radius: 50%;
  place-items: center;
  width: 27px;
  height: 27px;
  display: grid;
}

.authCardHeading {
  text-align: center;
  margin: clamp(32px, 5vw, 48px) 0 28px;
}

.authCardHeading > span {
  color: var(--color-accent);
  letter-spacing: .08em;
  font-size: 8px;
}

.authCardHeading h1 {
  color: #f8f5f0;
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 620px;
  margin: 12px auto 0;
  font-size: clamp(36px, 4.2vw, 58px);
  font-weight: 370;
  line-height: .94;
}

.authCardHeading p {
  color: #ffffff85;
  text-wrap: balance;
  max-width: 490px;
  margin: 16px auto 0;
  font-size: 11px;
  line-height: 1.55;
}

.authNotice.accountNotice {
  color: #dffcaa;
  background: #baff451f;
  border: 1px solid #baff4542;
  border-radius: 13px;
  width: 100%;
  margin: -4px 0 22px;
  padding: 13px 15px;
  font-size: 10px;
  line-height: 1.45;
}

.authNotice.accountNotice.isError {
  border-color: rgb(var(--color-accent-rgb) / .32);
  background: rgb(var(--color-accent-rgb) / .14);
  color: #ffc5b8;
}

.authForm, .authFormBody {
  flex-direction: column;
  display: flex;
}

.authForm {
  gap: 14px;
}

.authFieldGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.authField {
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  display: flex;
}

.authFieldControl {
  background: #ffffff0e;
  border: 1px solid #ffffff21;
  border-radius: 17px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 8px 11px 8px 12px;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
  display: grid;
  box-shadow: inset 0 1px #ffffff06;
}

.authFieldControl:hover {
  background: #ffffff13;
  border-color: #ffffff3d;
}

.authFieldControl:focus-within {
  border-color: rgb(var(--color-accent-rgb) / .9);
  box-shadow: 0 0 0 4px rgb(var(--color-accent-rgb) / .12),
    0 12px 34px #0000003d;
  background: #ffffff14;
  transform: translateY(-1px);
}

.authFieldLeading {
  width: 40px;
  height: 40px;
  color: var(--color-accent);
  letter-spacing: -.015em;
  background: #00000040;
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  place-items: center;
  font-size: 9px;
  font-weight: 640;
  display: grid;
}

.authField input {
  color: #fff;
  width: 100%;
  min-width: 0;
  font: inherit;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  background: none;
  border: 0;
  outline: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.25;
}

.authField input::placeholder {
  color: #ffffff6b;
  opacity: 1;
}

.authFieldControl[data-date-placeholder] {
  position: relative;
}

.authFieldControl[data-date-placeholder]:after {
  color: #ffffff6b;
  content: attr(data-date-placeholder);
  pointer-events: none;
  font-size: 15px;
  line-height: 1.25;
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

.authFieldControl[data-date-placeholder]:focus-within:after {
  opacity: 0;
}

.authFieldControl[data-date-placeholder]:has(input:valid):after {
  opacity: 0;
}

.authFieldControl[data-date-placeholder]:not(:focus-within) input:invalid::-webkit-datetime-edit {
  color: #0000;
}

.authField input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s ease-out;
}

.authField input:-webkit-autofill:hover {
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s ease-out;
}

.authField input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s ease-out;
}

.authField > small {
  color: #ffffff5c;
  padding: 0 5px;
  font-size: 8px;
  line-height: 1.45;
}

.authReveal {
  color: #ffffff70;
  letter-spacing: .05em;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  max-width: 82px;
  padding: 8px 6px;
  font-size: 7px;
  overflow: hidden;
}

.authReveal:hover, .authReveal:focus-visible {
  color: #fff;
  background: #ffffff12;
}

.authUtilityRow {
  justify-content: space-between;
  gap: 18px;
  padding: 0 4px;
  display: flex;
}

.authUtilityRow button, .authTextAction {
  color: #ffffff7a;
  text-underline-offset: 4px;
  font-size: 9px;
  -webkit-text-decoration: underline #ffffff2e;
  text-decoration: underline #ffffff2e;
}

.authUtilityRow button:hover, .authTextAction:hover, .authModePrompt button:hover {
  color: #fff;
}

.authSubmit {
  background: linear-gradient(110deg, var(--color-accent), var(--color-accent));
  min-height: 58px;
  box-shadow: 0 18px 48px rgb(var(--color-accent-rgb) / .22);
  color: #fff;
  letter-spacing: .03em;
  text-align: left;
  cursor: pointer;
  border: 0;
  border-radius: 17px;
  grid-template-columns: 1fr 42px;
  align-items: center;
  gap: 12px;
  margin-top: 5px;
  padding: 8px 8px 8px 20px;
  font-size: 10px;
  transition: transform .18s, box-shadow .18s, opacity .18s;
  display: grid;
}

.authSubmit span {
  color: #0b0b0b;
  background: #fff;
  border-radius: 12px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 16px;
  display: grid;
}

.authSubmit:hover:not(:disabled) {
  box-shadow: 0 22px 60px rgb(var(--color-accent-rgb) / .32);
  transform: translateY(-2px);
}

.authSubmit:disabled {
  cursor: wait;
  opacity: .52;
}

.authModePrompt {
  color: #fff6;
  text-align: center;
  margin: 2px 0 0;
  font-size: 9px;
}

.authModePrompt button {
  color: #fff;
  text-decoration: underline;
  -webkit-text-decoration-color: var(--color-accent);
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px;
  padding: 0;
}

.authTextAction {
  align-self: center;
  padding: 5px;
}

.authLegalBox {
  background: #ffffff09;
  border: 1px solid #ffffff1c;
  border-radius: 17px;
  padding: 16px;
}

.authLegalBox > div:first-child {
  border-bottom: 1px solid #ffffff17;
  justify-content: space-between;
  gap: 15px;
  padding-bottom: 13px;
  display: flex;
}

.authLegalBox > div:first-child strong, .authLegalBox > div:first-child span {
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 520;
}

.authLegalBox > div:first-child span {
  color: #ffffff57;
  font-weight: 400;
}

.authLegalBox .legalChecks {
  gap: 9px;
  margin: 14px 0 0;
}

.authLegalBox .legalCheck {
  grid-template-columns: 17px 1fr;
  gap: 9px;
}

.authLegalBox .legalCheck > span {
  background: #ffffff08;
  border-color: #ffffff47;
  width: 17px;
  height: 17px;
}

.authLegalBox .legalCheck input:checked + span {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.authLegalBox .legalCheck input:focus-visible + span {
  outline: 3px solid rgb(var(--color-accent-rgb) / .24);
  outline-offset: 2px;
}

.authLegalBox .legalCheck em {
  color: #ffffff85;
  font-size: 9px;
  line-height: 1.4;
}

.authLegalBox .legalCheck a {
  color: #ffffffd1;
}

.authAfterword {
  width: min(100%, 900px);
  margin-top: clamp(72px, 8vw, 112px);
}

.authAfterwordCopy {
  border-bottom: 1px solid #ffffff21;
  grid-template-columns: .55fr 1fr;
  align-items: end;
  gap: 24px 50px;
  padding-bottom: 32px;
  display: grid;
}

.authAfterwordCopy > span {
  color: var(--color-accent);
  letter-spacing: .1em;
  grid-column: 1 / -1;
  font-size: 8px;
}

.authAfterwordCopy h2 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(36px, 5vw, 66px);
  font-weight: 360;
  line-height: .9;
}

.authAfterwordCopy p {
  color: #ffffff80;
  max-width: 420px;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}

.authFeatureRail {
  border-bottom: 1px solid #ffffff21;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

.authFeatureRail article {
  min-width: 0;
  padding: 24px 20px 27px 0;
}

.authFeatureRail article + article {
  border-left: 1px solid #ffffff21;
  padding-left: 20px;
}

.authFeatureRail article > span {
  color: #ffffff4d;
  font-size: 8px;
}

.authFeatureRail strong {
  letter-spacing: -.015em;
  margin-top: 18px;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 390;
  display: block;
}

.authFeatureRail p {
  color: #fff6;
  text-transform: uppercase;
  margin: 5px 0 0;
  font-size: 8px;
}

.authSecurityLine {
  color: #ffffff57;
  letter-spacing: .06em;
  text-transform: uppercase;
  grid-template-columns: auto minmax(200px, 1fr) auto;
  align-items: center;
  gap: 30px;
  padding-top: 21px;
  font-size: 8px;
  display: grid;
}

.authSecurityLine p {
  letter-spacing: 0;
  text-transform: none;
  max-width: 460px;
  margin: 0 auto;
  font-size: 8px;
  line-height: 1.5;
}

@media (max-width: 920px) {
  .accountPortal {
    border-radius: 34px;
    min-height: calc(100svh - 12px);
  }

  .accountPortal .accountClient.isAuthenticated {
    padding: 112px 22px 82px;
  }

  .authExperience {
    min-height: calc(100svh - 12px);
    padding-top: 112px;
  }

  .authSceneCharacter {
    opacity: .24;
    width: 72vw;
    right: -18vw;
  }

  .authSceneIdentity {
    font-size: 27vw;
  }
}

@media (max-width: 640px) {
  .accountPortal {
    border-radius: 27px;
  }

  .authExperience {
    padding: 102px 12px 68px;
  }

  .authSceneCharacter {
    opacity: .16;
    width: 132vw;
    height: 74%;
    bottom: 7%;
    right: -54vw;
  }

  .authCard {
    border-radius: 24px;
    padding: 18px 14px 22px;
  }

  .authCardMeta {
    padding: 0 3px;
  }

  .authPrimarySwitch {
    margin-top: 18px;
  }

  .authCardHeading {
    margin: 30px 0 24px;
  }

  .authCardHeading h1 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .authCardHeading p {
    padding: 0 6px;
    font-size: 10px;
  }

  .authFieldGrid {
    grid-template-columns: 1fr;
  }

  .authFieldControl {
    border-radius: 15px;
    grid-template-columns: 37px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 64px;
  }

  .authFieldLeading {
    border-radius: 10px;
    width: 37px;
    height: 37px;
  }

  .authReveal {
    max-width: 66px;
  }

  .authUtilityRow {
    gap: 10px;
  }

  .authSubmit {
    border-radius: 15px;
    min-height: 56px;
  }

  .authLegalBox {
    padding: 14px 12px;
  }

  .authLegalBox > div:first-child {
    flex-direction: column;
    gap: 5px;
  }

  .authAfterword {
    margin-top: 74px;
    padding: 0 7px;
  }

  .authAfterwordCopy {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .authAfterwordCopy h2 {
    font-size: clamp(38px, 12vw, 54px);
  }

  .authFeatureRail {
    grid-template-columns: 1fr;
  }

  .authFeatureRail article {
    grid-template-columns: 35px 70px 1fr;
    align-items: center;
    gap: 12px;
    padding: 18px 0;
    display: grid;
  }

  .authFeatureRail article + article {
    border-top: 1px solid #ffffff1c;
    border-left: 0;
    padding-left: 0;
  }

  .authFeatureRail strong, .authFeatureRail p {
    margin: 0;
  }

  .authFeatureRail strong {
    font-size: 26px;
  }

  .authSecurityLine {
    grid-template-columns: 1fr auto;
    gap: 15px;
  }

  .authSecurityLine p {
    grid-area: 1 / 1 / auto / -1;
    margin: 0;
  }
}

@media (max-width: 760px) {
  .mobileMenuNav a.mobileAccountLink {
    border-top: 1px solid #ffffff21;
    align-items: center;
    margin-top: 8px;
    padding-top: 15px;
  }

  .mobileMenuNav a.mobileAccountLink > span:first-child {
    width: 24px;
  }

  .mobileMenuNav a .mobileAccountIdentity {
    align-items: center;
    gap: 13px;
    width: auto;
    display: flex;
  }

  .mobileMenuNav a .mobileAccountIdentity > .headerAccountAvatar {
    color: #fff;
    width: 42px;
    height: 42px;
    font-size: 14px;
  }

  .mobileMenuNav a .mobileAccountIdentity > span {
    flex-direction: column;
    gap: 3px;
    width: auto;
    display: flex;
  }
}

.toastViewport {
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 10000;
  pointer-events: none;
  gap: 10px;
  width: min(400px, 100vw - 32px);
  display: grid;
  position: fixed;
}

.maralysToast {
  --toast-accent: var(--color-accent);
  background: radial-gradient(circle at 8% 10%,
      color-mix(in srgb, var(--toast-accent) 22%, transparent),
      transparent 42%),
    #0a0a0af0;
  color: #fff;
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
  pointer-events: auto;
  border: 1px solid #ffffff2e;
  border-radius: 18px;
  grid-template-columns: 46px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 17px 15px 18px 17px;
  animation: .38s cubic-bezier(.2, .85, .2, 1) both maralysToastIn;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 70px #0000007a, inset 0 1px #ffffff0a;
}

.maralysToast[data-tone="error"] {
  --toast-accent: #ff3f2f;
}

.maralysToast[data-tone="info"] {
  --toast-accent: #d7d3cc;
}

.maralysToastMark {
  border: 1px solid color-mix(in srgb, var(--toast-accent) 72%, white 8%);
  background: color-mix(in srgb, var(--toast-accent) 15%, transparent);
  width: 44px;
  height: 44px;
  color: var(--toast-accent);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.maralysToastMark span {
  font-size: 18px;
  font-weight: 650;
  line-height: 1;
}

.maralysToastCopy {
  min-width: 0;
}

.maralysToastCopy > span {
  color: var(--toast-accent);
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 7px;
  font-size: 9px;
  font-weight: 700;
  display: block;
}

.maralysToastCopy p {
  color: #ffffffe6;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.maralysToastCopy > button {
  border: 1px solid color-mix(in srgb, var(--toast-accent) 42%, transparent);
  background: color-mix(in srgb, var(--toast-accent) 11%, transparent);
  color: #ffffffd1;
  min-height: 28px;
  font: inherit;
  cursor: pointer;
  border-radius: 9px;
  margin-top: 10px;
  padding: 0 11px;
  font-size: 9px;
  font-weight: 700;
}

.maralysToastCopy > button:hover, .maralysToastCopy > button:focus-visible {
  border-color: color-mix(in srgb, var(--toast-accent) 68%, transparent);
  background: color-mix(in srgb, var(--toast-accent) 18%, transparent);
  color: #fff;
  outline: 0;
}

.maralysToast > button {
  color: #ffffff9e;
  width: 28px;
  height: 28px;
  font: inherit;
  cursor: pointer;
  background: #ffffff12;
  border: 0;
  border-radius: 50%;
  align-self: start;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  transition: color .18s, background .18s, transform .18s;
}

.maralysToast > button:hover, .maralysToast > button:focus-visible {
  color: #fff;
  background: #ffffff24;
  outline: none;
  transform: rotate(6deg);
}

.maralysToastProgress {
  background: var(--toast-accent);
  transform-origin: 0;
  height: 2px;
  animation: maralysToastLife var(--toast-duration) linear forwards;
  border-radius: 99px;
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
}

@keyframes maralysToastIn {
  from {
    opacity: 0;
    transform: translate3d(34px, 10px, 0)scale(.97);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0)scale(1);
  }
}

@keyframes maralysToastLife {
  from {
    opacity: .8;
    transform: scaleX(1);
  }

  to {
    opacity: .35;
    transform: scaleX(0);
  }
}

@media (max-width: 640px) {
  .toastViewport {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
  }

  .maralysToast {
    border-radius: 16px;
    grid-template-columns: 40px minmax(0, 1fr) 28px;
    gap: 12px;
    min-height: 84px;
    padding: 14px 13px 16px 14px;
  }

  .maralysToastMark {
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .maralysToast, .maralysToastProgress {
    animation: none;
  }
}

:where(section[class], article[class], aside[class], form[class], fieldset[class], footer.siteFooter, [class*="Card"], [class*="card"], [class*="Panel"], [class*="panel"], [class*="Frame"], [class*="frame"], [class*="Avatar"], [class*="avatar"], [class*="Cover"], [class*="cover"], [class*="Preview"], [class*="preview"], [class*="Dialog"], [class*="dialog"], [class*="Module"], [class*="module"], [class*="Record"], [class*="record"], [class*="Surface"], [class*="surface"], [class*="Shell"], [class*="shell"], [class*="Tile"], [class*="tile"], [class*="Box"], [class*="box"], .publicProfileVisibility, .publicProfileSettingsNotice, .profileSocialEditor label, .adminListFilters, .adminArticleFilters, .adminPrivacyFilters, .adminBanFilters, .adminAuditFilters, .adminBanTargetSearch, .adminBanTargetResults, .adminCampaignDelivery, .adminLinkedIdentities a, .adminNewsUpload, .maralysToastMark) {
  border: 0 !important;
}

:where([class*="Card"], [class*="card"], [class*="Panel"], [class*="panel"], [class*="Frame"], [class*="frame"], [class*="Avatar"], [class*="avatar"], [class*="Cover"], [class*="cover"], [class*="Preview"], [class*="preview"], [class*="Dialog"], [class*="dialog"]):before, :where([class*="Card"], [class*="card"], [class*="Panel"], [class*="panel"], [class*="Frame"], [class*="frame"], [class*="Avatar"], [class*="avatar"], [class*="Cover"], [class*="cover"], [class*="Preview"], [class*="preview"], [class*="Dialog"], [class*="dialog"]):after {
  border-color: #0000 !important;
}

.maralysToast {
  box-shadow: 0 22px 70px #0000007a;
}

.accountPortal .accountClient.isAuthenticated {
  padding: 116px clamp(20px, 3.2vw, 58px) 96px;
}

.dashboardGrid {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  max-width: 1440px;
}

.accountIdentity {
  background: radial-gradient(circle at 100% 0,
      rgb(var(--color-accent-rgb) / .42),
      transparent 36%),
    linear-gradient(155deg, #17100d, var(--surface-card) 64%);
  border-radius: 28px;
  min-height: 540px;
  padding: 28px;
  top: 112px;
}

.accountIdentity:after {
  display: none;
}

.accountIdentityTop {
  letter-spacing: .08em;
  justify-content: flex-start;
  font-size: 7px;
}

.accountAvatar {
  width: 96px;
  height: 96px;
  box-shadow: none;
  margin-top: 44px;
}

.accountAvatar i {
  font-size: 42px;
}

.accountIdentity p {
  margin: 22px 0 7px;
  font-size: 9px;
}

.accountIdentity h2 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(32px, 2.8vw, 44px);
  line-height: .96;
}

.accountIdentityEmail {
  overflow-wrap: anywhere;
  margin-top: 11px;
  font-size: 10px !important;
}

.accountIdentityStatus {
  margin-top: 18px;
}

.accountAdminLink, .accountArticlesLink {
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: none;
  border-radius: 0;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 46px;
  padding: 0;
  font-size: 9px;
  display: flex;
}

.accountAdminLink {
  margin-top: auto;
}

.accountArticlesLink {
  margin-top: 8px;
}

.accountArticlesLink span, .accountAdminLink span {
  color: #ffffffb8;
  font-size: inherit;
}

.accountArticlesLink strong, .accountAdminLink strong {
  color: var(--color-accent);
  font-size: 15px;
  font-weight: 450;
}

.accountIdentity button {
  color: #ffffff9e;
  background: none;
  border: 0;
  border-radius: 0;
  align-items: center;
  min-height: 42px;
  margin-top: 8px;
  padding: 0;
}

.idOverview {
  background: radial-gradient(circle at 91% 14%,
      rgb(var(--color-accent-rgb) / .76),
      #91150075 28%,
      transparent 58%),
    linear-gradient(145deg, #120805, var(--surface-card) 62%);
  border-radius: 28px;
  min-height: 420px;
  padding: 34px 40px;
}

.idOverviewCopy {
  max-width: 700px;
}

.idOverviewCopy h2 {
  letter-spacing: -.015em;
  max-width: 680px;
  margin-top: 42px;
  font-size: clamp(48px, 5vw, 76px);
  line-height: .86;
}

.idOverviewCopy p {
  max-width: 410px;
  margin: 16px 0 0;
  font-size: 11px;
}

.idOverviewStats {
  border: 0;
  gap: clamp(18px, 3vw, 48px);
  max-width: 830px;
  margin-top: 32px;
}

.idOverviewStats article, .idOverviewStats article + article {
  background: none;
  border: 0;
  border-radius: 0;
  justify-content: flex-end;
  min-height: 56px;
  padding: 0;
}

.idOverviewStats i {
  bottom: 7px;
  right: 0;
}

.idOverviewWord {
  color: #ffffff06;
  font-size: clamp(160px, 17vw, 250px);
  bottom: -.13em;
  right: -.02em;
}

.publicProfileSettings {
  background: linear-gradient(150deg,
    var(--surface-subcard),
    var(--surface-card) 72%);
  border-radius: 28px;
  margin-top: 20px;
  padding: clamp(30px, 3.2vw, 42px);
}

.publicProfileSettings:after {
  opacity: .1;
  top: -220px;
  right: -210px;
}

.publicProfileSettings > header {
  gap: 26px;
  margin-bottom: 28px;
}

.publicProfileSettings > header > div {
  max-width: 650px;
}

.publicProfileSettings > header h2 {
  margin: 9px 0 12px;
  font-size: clamp(38px, 3.5vw, 54px);
  line-height: .94;
}

.publicProfileSettings > header > a {
  background: none;
  border: 0;
  border-radius: 0;
  gap: 18px;
  padding: 8px 0;
}

.publicProfileVisibility {
  background: none;
  border-radius: 0;
  margin-bottom: 20px;
  padding: 12px 0;
}

.profileImageEditorGrid {
  grid-template-columns: minmax(310px, .85fr) minmax(430px, 1.15fr);
  gap: 10px;
  margin-bottom: 20px;
}

.profileImageEditor {
  background: var(--surface-card);
  border-radius: 18px;
  gap: 15px;
  min-height: 142px;
  padding: 14px;
}

.profileImagePreview {
  width: 96px;
}

.profileImageEditor[data-kind="cover"] .profileImagePreview {
  border-radius: 12px;
  width: min(18vw, 220px);
  min-width: 170px;
}

.profileImageEditor h3 {
  margin: 6px 0;
  font-size: 18px;
}

.profileImageEditor p {
  min-height: 0;
  font-size: 8px;
}

.profileImageEditor > div:nth-child(2) > div {
  margin-top: 12px;
}

.publicProfileFieldGrid {
  gap: 12px;
}

.publicProfileOptions {
  margin: 20px 0;
}

.profileSocialEditor {
  margin: 22px 0;
}

.profileSocialEditor > div {
  gap: 10px;
}

.profileSocialEditor label {
  background: #ffffff06;
  border-radius: 13px;
  min-height: 54px;
}

.maralysWallet {
  border-radius: 28px;
  margin-top: 20px;
}

.walletGlow {
  display: none;
}

.walletHeader {
  padding: 38px 40px 24px;
}

.walletHeader h2 {
  margin-top: 14px;
  font-size: clamp(46px, 4.8vw, 70px);
}

.walletBalance {
  padding: 0 40px 38px;
}

.walletBalance > strong {
  font-size: clamp(72px, 8vw, 120px);
}

.walletTransfer, .walletHistory {
  padding: 36px 40px;
}

.accountSections {
  gap: 12px;
  margin-top: 20px;
}

.accountCard {
  border-radius: 26px;
  min-height: 320px;
  padding: 34px;
}

.accountCardHeading {
  margin-bottom: 36px;
}

.accountCardHeading h2 {
  font-size: clamp(32px, 2.8vw, 44px);
}

.profileImageEditor label, .profileImageEditor button, .publicProfileSettings > header > a, .accountAdminLink, .accountArticlesLink, .accountIdentity button {
  box-shadow: none !important;
  border: 0 !important;
}

.profileImageEditor button {
  border-radius: 0;
  padding-left: 4px;
  padding-right: 4px;
}

.profileImageEditor label {
  border-radius: 10px;
}

.accountClient.isAuthenticated :where(button, a) {
  box-shadow: none !important;
  border: 0 !important;
}

.accountClient.isAuthenticated :where(button, a):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

@media (max-width: 1200px) {
  .dashboardGrid {
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 16px;
  }

  .profileImageEditorGrid {
    grid-template-columns: 1fr;
  }

  .profileImageEditor[data-kind="cover"] .profileImagePreview {
    width: min(31vw, 260px);
  }
}

@media (max-width: 920px) {
  .accountPortal .accountClient.isAuthenticated {
    padding: 104px 18px 72px;
  }

  .dashboardGrid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .accountIdentity {
    min-height: 480px;
    position: relative;
    top: 0;
  }

  .idOverview {
    min-height: 400px;
  }

  .publicProfileSettings, .maralysWallet, .accountSections {
    margin-top: 14px;
  }
}

@media (max-width: 640px) {
  .accountPortal .accountClient.isAuthenticated {
    padding: 92px 12px 48px;
  }

  .accountIdentity {
    border-radius: 22px;
    min-height: 430px;
    padding: 22px;
  }

  .accountAvatar {
    width: 82px;
    height: 82px;
    margin-top: 32px;
  }

  .accountAvatar i {
    font-size: 35px;
  }

  .accountIdentity h2 {
    font-size: 36px;
  }

  .idOverview {
    border-radius: 22px;
    min-height: 0;
    padding: 25px 22px;
  }

  .idOverviewCopy h2 {
    margin-top: 34px;
    font-size: clamp(48px, 14vw, 62px);
  }

  .idOverviewStats {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 26px;
  }

  .idOverviewStats article, .idOverviewStats article + article {
    min-height: 62px;
    padding: 11px 14px;
  }

  .idOverviewStats i {
    bottom: 27px;
    right: 14px;
  }

  .idOverviewWord {
    font-size: 200px;
  }

  .publicProfileSettings {
    border-radius: 22px;
    padding: 24px 20px;
  }

  .publicProfileSettings > header {
    flex-direction: column;
    align-items: stretch;
  }

  .publicProfileSettings > header h2 {
    font-size: 38px;
  }

  .publicProfileSettings > header > a {
    justify-content: space-between;
  }

  .profileImageEditor {
    grid-template-columns: 82px minmax(0, 1fr);
    min-height: 126px;
    padding: 12px;
  }

  .profileImagePreview {
    width: 82px;
  }

  .profileImageEditor[data-kind="cover"] {
    grid-template-columns: 1fr;
  }

  .profileImageEditor[data-kind="cover"] .profileImagePreview {
    width: 100%;
    min-width: 0;
  }

  .publicProfileFieldGrid, .profileSocialEditor > div {
    grid-template-columns: 1fr;
  }

  .publicProfileBioField {
    grid-column: auto;
  }

  .publicProfileOptions, .profileSocialEditor legend {
    flex-direction: column;
    align-items: flex-start;
  }

  .profileSocialEditor legend small {
    text-align: left;
  }

  .walletHeader, .walletBalance, .walletTransfer, .walletHistory {
    padding-left: 22px;
    padding-right: 22px;
  }

  .accountCard {
    border-radius: 22px;
    padding: 26px 22px;
  }

  .accountCardHeading {
    margin-bottom: 28px;
  }
}

.aboutPage {
  background: var(--surface-card);
}

.aboutHero {
  isolation: isolate;
  background: var(--surface-card);
  color: #fff;
  border-radius: 44px;
  height: calc(100svh - 16px);
  min-height: 760px;
  position: relative;
  overflow: hidden;
}

.aboutHeroMedia, .aboutHeroMedia > span {
  position: absolute;
  inset: 0;
}

.aboutHeroMedia {
  z-index: -1;
}

.aboutHeroMedia img {
  object-fit: cover;
  object-position: center 46%;
  filter: saturate(.76) contrast(1.06);
  transform: scale(1.015);
}

.aboutHeroMedia > span {
  background: linear-gradient(90deg, #020202fa 0%, #020202e6 36%, #0202027a 67%, #0202023d 100%), linear-gradient(#0202024d, #0000 48%, #020202d1);
}

.aboutHeroCopy {
  z-index: 3;
  width: min(980px, 70vw);
  position: absolute;
  bottom: clamp(66px, 8vh, 104px);
  left: 4.3vw;
}

.aboutHeroCopy .innerBreadcrumb {
  margin-bottom: 38px;
}

.aboutHeroCopy h1 {
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 980px;
  margin: 24px 0 0;
  font-size: clamp(68px, 7.8vw, 132px);
  font-weight: 350;
  line-height: .84;
}

.aboutHeroCopy > p:last-of-type {
  color: #ffffffc2;
  max-width: 620px;
  margin: 28px 0 0;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.55;
}

.aboutTextLink {
  background: var(--color-accent);
  color: #090909;
  text-transform: uppercase;
  border-radius: 12px;
  align-items: center;
  gap: 34px;
  min-height: 48px;
  margin-top: 34px;
  padding: 0 17px;
  font-size: 10px;
  font-weight: 650;
  display: inline-flex;
}

.aboutTextLink i {
  font-size: 15px;
  font-style: normal;
}

.aboutHeroDate {
  z-index: 3;
  justify-items: end;
  display: grid;
  position: absolute;
  bottom: clamp(68px, 8vh, 104px);
  right: 4.3vw;
}

.aboutHeroDate strong {
  letter-spacing: -.015em;
  font-size: clamp(43px, 4.4vw, 74px);
  font-weight: 350;
  line-height: .9;
}

.aboutHeroDate span, .aboutHeroDate small {
  color: #ffffffad;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 9px;
  font-size: 8px;
}

.aboutHeroDate small {
  color: var(--color-accent);
  margin-top: 4px;
}

.aboutIntro {
  color: #0a0a0a;
  background: #efede7;
  border-radius: 42px;
  grid-template-columns: minmax(120px, .45fr) minmax(520px, 1.55fr) minmax(250px, .72fr);
  gap: 5vw;
  margin-top: 8px;
  padding: clamp(100px, 10vw, 155px) 4.3vw 4.3vw;
  display: grid;
}

.aboutIntro > .sectionEyebrow {
  color: #0000007a;
}

.aboutIntro > h2 {
  letter-spacing: -.015em;
  max-width: 930px;
  margin: 0;
  font-size: clamp(56px, 6.6vw, 106px);
  font-weight: 360;
  line-height: .88;
}

.aboutIntroCopy {
  align-self: end;
}

.aboutIntroCopy > span, .aboutHardwareCopy > span {
  color: var(--color-accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 8px;
}

.aboutIntroCopy h3 {
  letter-spacing: -.015em;
  margin: 18px 0 14px;
  font-size: clamp(25px, 2.3vw, 38px);
  font-weight: 430;
  line-height: .98;
}

.aboutIntroCopy p, .aboutPrinciples header > p:last-child, .aboutPrinciples article p, .aboutHardwareCopy > p, .aboutClosing > p:last-of-type {
  color: #0000009c;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.aboutIntroMedia {
  background: var(--surface-subcard);
  border-radius: 27px;
  grid-column: 1 / -1;
  min-height: 540px;
  margin-top: clamp(52px, 6vw, 92px);
  position: relative;
  overflow: hidden;
}

.aboutIntroMedia img, .aboutHardwareMedia img, .aboutGallery figure > div img {
  object-fit: cover;
}

.aboutPrinciples {
  background: var(--surface-card);
  color: #fff;
  border-radius: 42px;
  margin-top: 8px;
  padding: clamp(100px, 10vw, 160px) 4.3vw;
}

.aboutPrinciples > header {
  grid-template-columns: minmax(120px, .45fr) minmax(520px, 1.55fr) minmax(250px, .72fr);
  align-items: end;
  gap: 5vw;
  display: grid;
}

.aboutPrinciples header h2 {
  letter-spacing: -.015em;
  margin: 0;
  font-size: clamp(56px, 6.4vw, 104px);
  font-weight: 350;
  line-height: .87;
}

.aboutPrinciples header > p:last-child {
  color: #ffffff94;
}

.aboutPrinciples > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(65px, 8vw, 120px);
  display: grid;
}

.aboutPrinciples article {
  background: var(--surface-subcard);
  border-radius: 28px;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
  padding: clamp(28px, 3.5vw, 50px);
  display: flex;
}

.aboutPrinciples article:last-child {
  background: linear-gradient(145deg, var(--color-accent), #b51b00 72%);
}

.aboutPrinciples article > span {
  color: #ffffff85;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: auto;
  font-size: 8px;
}

.aboutPrinciples article h3 {
  letter-spacing: -.015em;
  max-width: 650px;
  margin: 0;
  font-size: clamp(42px, 4.8vw, 75px);
  font-weight: 360;
  line-height: .9;
}

.aboutPrinciples article p {
  color: #ffffffa8;
  max-width: 560px;
  margin-top: 24px;
}

.aboutPrinciples article:last-child p {
  color: #ffffffd6;
}

.aboutHardware {
  color: #090909;
  background: #efede7;
  border-radius: 42px;
  grid-template-columns: minmax(0, .95fr) minmax(470px, 1.05fr);
  min-height: 720px;
  margin-top: 8px;
  display: grid;
  overflow: hidden;
}

.aboutHardwareMedia {
  background: var(--surface-subcard);
  min-height: 720px;
  position: relative;
}

.aboutHardwareCopy {
  flex-direction: column;
  justify-content: center;
  padding: clamp(52px, 6vw, 100px);
  display: flex;
}

.aboutHardwareCopy .sectionEyebrow {
  color: #0000007a;
  margin-bottom: 44px;
}

.aboutHardwareCopy h2 {
  letter-spacing: -.015em;
  margin: 18px 0 24px;
  font-size: clamp(50px, 5.4vw, 86px);
  font-weight: 360;
  line-height: .88;
}

.aboutHardwareCopy > p {
  max-width: 620px;
}

.aboutHardwareCopy dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 54px 0 0;
  display: grid;
}

.aboutHardwareCopy dl > div {
  background: #0000000e;
  border-radius: 18px;
  min-height: 110px;
  padding: 18px;
}

.aboutHardwareCopy dt {
  letter-spacing: -.015em;
  font-size: clamp(27px, 2.5vw, 40px);
  font-weight: 430;
}

.aboutHardwareCopy dd {
  color: #00000080;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 24px 0 0;
  font-size: 8px;
}

.aboutGallery {
  background: var(--surface-card);
  color: #fff;
  border-radius: 42px;
  margin-top: 8px;
  padding: clamp(100px, 10vw, 160px) 4.3vw;
}

.aboutGallery > header {
  grid-template-columns: minmax(150px, .5fr) minmax(520px, 1.5fr);
  gap: 5vw;
  display: grid;
}

.aboutGallery header h2 {
  letter-spacing: -.015em;
  max-width: 980px;
  margin: 0;
  font-size: clamp(56px, 6.2vw, 100px);
  font-weight: 350;
  line-height: .88;
}

.aboutGallery > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(60px, 7vw, 105px);
  display: grid;
}

.aboutGallery figure {
  background: var(--surface-subcard);
  border-radius: 26px;
  margin: 0;
  overflow: hidden;
}

.aboutGallery figure > div {
  min-height: 460px;
  position: relative;
  overflow: hidden;
}

.aboutGallery figcaption {
  grid-template-columns: 42px minmax(120px, .55fr) minmax(180px, 1fr);
  align-items: start;
  gap: 20px;
  padding: 25px 28px 28px;
  display: grid;
}

.aboutGallery figcaption span {
  color: var(--color-accent);
  font-size: 9px;
}

.aboutGallery figcaption strong {
  font-size: 16px;
  font-weight: 480;
}

.aboutGallery figcaption p {
  color: #ffffff8f;
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
}

.aboutClosing {
  background: radial-gradient(circle at 84% 10%,
      rgb(var(--color-accent-rgb) / .18),
      transparent 28%),
    var(--surface-card);
  color: #f6f4ef;
  border-radius: 42px;
  margin-top: 8px;
  padding: clamp(96px, 9vw, 150px) 4.3vw 4.3vw;
}

.aboutClosing .sectionEyebrow {
  color: #ffffff80;
}

.aboutClosingHeader {
  grid-template-columns: minmax(150px, .42fr) minmax(560px, 1.5fr) minmax(270px, .55fr);
  align-items: end;
  gap: clamp(30px, 5vw, 90px);
  display: grid;
}

.aboutClosingHeader h2 {
  letter-spacing: -.005em;
  max-width: 1020px;
  margin: 0;
  font-size: clamp(58px, 6vw, 102px);
  font-weight: 360;
  line-height: .91;
}

.aboutClosingHeader > p:last-child {
  color: #fff9;
  max-width: 390px;
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.5;
}

.aboutClosingChoices {
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
  gap: 10px;
  margin-top: clamp(70px, 7vw, 112px);
  display: grid;
}

.aboutClosingCard {
  isolation: isolate;
  color: #fff;
  background: var(--surface-subcard);
  border-radius: 28px;
  flex-direction: column;
  justify-content: space-between;
  min-height: 510px;
  padding: 30px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.aboutClosingCard > img {
  z-index: -3;
  object-fit: cover;
  object-position: center;
  transition: transform .45s;
}

.aboutClosingCard:hover > img {
  transform: scale(1.025);
}

.aboutClosingCardShade {
  z-index: -2;
  background: linear-gradient(#0000001f, #0000002e 38%, #000000e6 100%), linear-gradient(90deg, #00000073, #0000 65%);
  position: absolute;
  inset: 0;
}

.aboutClosingCardPartner {
  color: #090909;
  background: linear-gradient(145deg,
    var(--color-accent) 0%,
    #ee3100 58%,
    #a51400 100%);
}

.aboutClosingCardTop, .aboutClosingCardCopy {
  z-index: 1;
  display: flex;
  position: relative;
}

.aboutClosingCardTop {
  justify-content: space-between;
  align-items: center;
}

.aboutClosingCardTop small {
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 650;
}

.aboutClosingCardTop i {
  color: #080808;
  background: #f6f4ef;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  font-size: 20px;
  font-style: normal;
  display: inline-flex;
}

.aboutClosingCardPartner .aboutClosingCardTop i {
  color: #fff;
  background: var(--surface-card);
}

.aboutClosingCardCopy {
  flex-direction: column;
}

.aboutClosingCardCopy strong {
  letter-spacing: -.005em;
  max-width: 760px;
  font-size: clamp(46px, 4.7vw, 78px);
  font-weight: 380;
  line-height: .91;
}

.aboutClosingCardPartner .aboutClosingCardCopy strong {
  font-size: clamp(43px, 3.8vw, 64px);
}

.aboutClosingCardCopy > small {
  color: #ffffffad;
  max-width: 500px;
  margin-top: 22px;
  font-size: 12px;
  line-height: 1.45;
}

.aboutClosingCardPartner .aboutClosingCardCopy > small {
  color: #000000a8;
}

@media (max-width: 1080px) {
  .aboutHeroDate {
    display: none;
  }

  .aboutHeroCopy {
    width: min(900px, 86vw);
  }

  .aboutIntro, .aboutPrinciples > header {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .aboutIntroCopy, .aboutPrinciples header > p:last-child {
    grid-column: 2;
    max-width: 620px;
  }

  .aboutHardware {
    grid-template-columns: .82fr 1.18fr;
  }

  .aboutGallery figure > div {
    min-height: 360px;
  }

  .aboutGallery figcaption {
    grid-template-columns: 32px 1fr;
  }

  .aboutGallery figcaption p {
    grid-column: 2;
  }

  .aboutClosingHeader {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .aboutClosingHeader > p:last-child {
    grid-column: 2;
    max-width: 620px;
  }

  .aboutClosingChoices {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  }
}

@media (max-width: 760px) {
  .aboutHero, .aboutIntro, .aboutPrinciples, .aboutHardware, .aboutGallery, .aboutClosing {
    border-radius: 26px;
  }

  .aboutHero {
    height: max(760px, 100svh - 12px);
    min-height: 760px;
  }

  .aboutHeroMedia img {
    object-position: 62% center;
  }

  .aboutHeroMedia > span {
    background: linear-gradient(#0202027a, #0202029e 42%, #020202 88%);
  }

  .aboutHeroCopy {
    width: auto;
    bottom: 48px;
    left: 20px;
    right: 20px;
  }

  .aboutHeroCopy h1 {
    font-size: clamp(56px, 15vw, 78px);
  }

  .aboutHeroCopy > p:last-of-type {
    font-size: 12px;
  }

  .aboutIntro, .aboutPrinciples > header, .aboutGallery > header {
    grid-template-columns: 1fr;
  }

  .aboutIntro, .aboutPrinciples, .aboutGallery, .aboutClosing {
    padding: 82px 20px;
  }

  .aboutIntro > h2, .aboutPrinciples header h2, .aboutGallery header h2 {
    font-size: clamp(48px, 13vw, 68px);
  }

  .aboutIntroCopy, .aboutPrinciples header > p:last-child {
    grid-column: auto;
    margin-top: 18px;
  }

  .aboutIntroMedia {
    min-height: 330px;
    margin-top: 44px;
  }

  .aboutPrinciples > div, .aboutGallery > div {
    grid-template-columns: 1fr;
  }

  .aboutPrinciples article {
    min-height: 360px;
  }

  .aboutPrinciples article h3 {
    font-size: clamp(42px, 12vw, 60px);
  }

  .aboutHardware {
    grid-template-columns: 1fr;
  }

  .aboutHardwareMedia {
    min-height: 390px;
  }

  .aboutHardwareCopy {
    padding: 66px 20px 76px;
  }

  .aboutHardwareCopy h2 {
    font-size: clamp(46px, 13vw, 66px);
  }

  .aboutHardwareCopy dl {
    margin-top: 42px;
  }

  .aboutHardwareCopy dl > div {
    min-height: 94px;
    padding: 15px;
  }

  .aboutGallery figure > div {
    min-height: 280px;
  }

  .aboutGallery figcaption {
    padding: 20px;
  }

  .aboutClosing {
    padding: 82px 20px 20px;
  }

  .aboutClosingHeader {
    grid-template-columns: 1fr;
  }

  .aboutClosingHeader h2 {
    font-size: clamp(48px, 13vw, 68px);
  }

  .aboutClosingHeader > p:last-child {
    grid-column: auto;
  }

  .aboutClosingChoices {
    grid-template-columns: 1fr;
    margin-top: 54px;
  }

  .aboutClosingCard {
    min-height: 430px;
    padding: 24px;
  }

  .aboutClosingCardCopy strong, .aboutClosingCardPartner .aboutClosingCardCopy strong {
    font-size: clamp(42px, 11vw, 58px);
  }
}

.srOnly {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.faqPage {
  background: var(--surface-card);
  color: #f7f5f2;
}

.faqHero, .faqDirectory, .faqContact {
  border-radius: 46px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}

.faqHero {
  isolation: isolate;
  background: var(--surface-card);
  height: calc(100svh - 16px);
  min-height: 780px;
}

.faqHeroMedia, .faqHeroMedia > span {
  position: absolute;
  inset: 0;
}

.faqHeroMedia {
  z-index: -2;
}

.faqHeroMedia img {
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(.72) contrast(1.06) brightness(.88);
  transform: scale(1.015);
}

.faqHeroMedia > span {
  background: linear-gradient(90deg, #020202fa 0%, #020202e0 37%, #02020247 70%, #0202026b 100%), linear-gradient(#0202021f 48%, #020202f0 100%);
}

.faqHeroCopy {
  z-index: 4;
  width: min(1080px, 72vw);
  position: absolute;
  bottom: clamp(62px, 8vh, 108px);
  left: 4.3vw;
}

.faqHeroCopy .innerBreadcrumb {
  margin-bottom: 42px;
}

.faqHeroCopy h1 {
  letter-spacing: -.012em;
  text-wrap: balance;
  max-width: 1100px;
  margin: 0;
  font-size: clamp(72px, 8.4vw, 148px);
  font-weight: 340;
  line-height: .83;
}

.faqHeroCopy > p {
  color: #ffffffad;
  max-width: 630px;
  margin: 32px 0 0;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.55;
}

.faqHeroAction {
  background: var(--color-accent);
  color: #fff;
  letter-spacing: .045em;
  text-transform: uppercase;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  min-width: 230px;
  min-height: 54px;
  margin-top: 36px;
  padding: 0 18px;
  font-size: 10px;
  font-weight: 650;
  display: inline-flex;
}

.faqHeroAction i {
  font-size: 18px;
  font-style: normal;
}

.faqHeroFacts {
  z-index: 4;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  width: min(410px, 27vw);
  display: grid;
  position: absolute;
  bottom: 48px;
  right: 4.3vw;
}

.faqHeroFacts > div {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #050505b8;
  border-radius: 18px;
  align-content: space-between;
  min-height: 126px;
  padding: 19px;
  display: grid;
}

.faqHeroFacts strong {
  color: var(--color-accent);
  font-size: 48px;
  font-weight: 360;
  line-height: .85;
}

.faqHeroFacts span {
  color: #ffffff7a;
  letter-spacing: .055em;
  text-transform: uppercase;
  font-size: 8px;
  line-height: 1.45;
}

.faqDirectory {
  color: #070707;
  background: #efede8;
  padding: clamp(92px, 10vw, 165px) 4.3vw clamp(85px, 9vw, 145px);
}

.faqDirectoryHead {
  grid-template-columns: minmax(140px, .42fr) minmax(480px, 1.28fr) minmax(260px, .52fr);
  align-items: start;
  gap: 4vw;
  display: grid;
}

.faqDirectoryHead > p, .faqContact > div:first-child > p {
  color: var(--color-accent);
  letter-spacing: .075em;
  text-transform: uppercase;
  margin: 9px 0 0;
  font-size: 9px;
  font-weight: 650;
}

.faqDirectoryHead h2 {
  letter-spacing: -.012em;
  margin: 0;
  font-size: clamp(70px, 8vw, 138px);
  font-weight: 340;
  line-height: .84;
}

.faqDirectoryHead > span {
  color: #0009;
  max-width: 390px;
  font-size: 13px;
  line-height: 1.58;
}

.faqSearch {
  background: #fff;
  border-radius: 22px;
  align-items: center;
  gap: 22px;
  min-height: 86px;
  margin-top: clamp(60px, 6.5vw, 100px);
  padding: 0 25px;
  transition: box-shadow .18s, transform .18s;
  display: flex;
  position: relative;
  box-shadow: 0 24px 70px #2d251c12;
}

.faqSearch:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 28px 78px #2d251c1f;
}

.faqSearchIcon {
  border: 1.5px solid #111;
  border-radius: 50%;
  flex: none;
  width: 19px;
  height: 19px;
  position: relative;
}

.faqSearchIcon:after {
  background: var(--surface-subcard);
  content: "";
  transform-origin: 0;
  width: 7px;
  height: 1.5px;
  position: absolute;
  bottom: -3px;
  right: -5px;
  transform: rotate(48deg);
}

.faqSearch input {
  color: #090909;
  min-width: 0;
  font: inherit;
  letter-spacing: 0;
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  font-size: clamp(17px, 1.45vw, 23px);
}

.faqSearch input::placeholder {
  color: #00000057;
}

.faqSearch input::-webkit-search-cancel-button {
  display: none;
}

.faqSearch > button {
  color: #111;
  cursor: pointer;
  background: #ece9e3;
  border: 0;
  border-radius: 11px;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 21px;
  display: grid;
}

.faqCategoryRail {
  scrollbar-width: none;
  gap: 7px;
  margin-top: 12px;
  padding-bottom: 5px;
  display: flex;
  overflow-x: auto;
}

.faqCategoryRail::-webkit-scrollbar {
  display: none;
}

.faqCategoryRail button {
  color: #000000a3;
  min-width: max-content;
  min-height: 49px;
  font: inherit;
  letter-spacing: .035em;
  text-transform: uppercase;
  cursor: pointer;
  background: #0000000f;
  border: 0;
  border-radius: 13px;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  font-size: 9px;
  font-weight: 620;
  transition: background-color .18s, color .18s, transform .18s;
  display: flex;
}

.faqCategoryRail button:hover, .faqCategoryRail button:focus-visible {
  transform: translateY(-2px);
}

.faqCategoryRail button[data-active="true"] {
  background: var(--surface-card);
  color: #fff;
}

.faqCategoryRail small {
  color: var(--color-accent);
  font-size: 8px;
}

.faqWorkspace {
  grid-template-columns: minmax(220px, .35fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: clamp(52px, 5.5vw, 85px);
  display: grid;
}

.faqSummary {
  background: radial-gradient(circle at 78% 5%,
      rgb(var(--color-accent-rgb) / .55),
      transparent 35%),
    linear-gradient(145deg, #17110e, var(--surface-card) 70%);
  color: #fff;
  border-radius: 24px;
  flex-direction: column;
  align-self: start;
  min-height: 440px;
  padding: 28px;
  display: flex;
  position: sticky;
  top: 18px;
}

.faqSummary > p {
  color: #ffffff75;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 0;
  font-size: 8px;
}

.faqSummary > strong {
  color: var(--color-accent);
  margin-top: 32px;
  font-size: clamp(76px, 7vw, 118px);
  font-weight: 340;
  line-height: .78;
}

.faqSummary > span {
  color: #ffffffd1;
  margin-top: 15px;
  font-size: 11px;
}

.faqSummary dl {
  gap: 7px;
  margin: auto 0 26px;
  display: grid;
}

.faqSummary dl > div {
  background: #ffffff12;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  min-height: 46px;
  padding: 0 13px;
  display: flex;
}

.faqSummary dt {
  color: #ffffff75;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 8px;
}

.faqSummary dd {
  color: #fff;
  margin: 0;
  font-size: 13px;
}

.faqSummary > small {
  color: #ffffff6b;
  align-items: center;
  gap: 9px;
  font-size: 8px;
  line-height: 1.4;
  display: flex;
}

.faqSummary > small i {
  background: #a8ff35;
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 15px #a8ff359e;
}

.faqResults {
  align-content: start;
  gap: 8px;
  display: grid;
}

.faqDirectoryItem {
  background: #ffffffd1;
  border-radius: 24px;
  transition: background-color .22s, transform .22s;
  overflow: hidden;
}

.faqDirectoryItem:hover, .faqDirectoryItem[data-open="true"] {
  background: #fff;
}

.faqDirectoryItem > button {
  color: #090909;
  width: 100%;
  min-height: 134px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  grid-template-columns: 56px minmax(0, 1fr) 46px;
  align-items: center;
  gap: clamp(20px, 3vw, 50px);
  padding: 25px clamp(22px, 3vw, 44px);
  display: grid;
}

.faqDirectoryIndex {
  color: var(--color-accent);
  letter-spacing: .04em;
  align-self: start;
  padding-top: 7px;
  font-size: 9px;
}

.faqDirectoryQuestion {
  gap: 13px;
  display: grid;
}

.faqDirectoryQuestion small {
  color: #0000006b;
  letter-spacing: .065em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 620;
}

.faqDirectoryQuestion strong {
  letter-spacing: -.006em;
  max-width: 1050px;
  font-size: clamp(27px, 2.65vw, 46px);
  font-weight: 380;
  line-height: 1.02;
}

.faqDirectoryToggle {
  background: #eeebe5;
  border-radius: 13px;
  place-items: center;
  width: 42px;
  height: 42px;
  transition: background-color .22s, transform .22s;
  display: grid;
  position: relative;
}

.faqDirectoryToggle i {
  background: var(--surface-card);
  width: 14px;
  height: 1.5px;
  transition: transform .22s, background-color .22s;
  position: absolute;
}

.faqDirectoryToggle i:last-child {
  transform: rotate(90deg);
}

.faqDirectoryItem[data-open="true"] .faqDirectoryToggle {
  background: var(--color-accent);
  transform: rotate(180deg);
}

.faqDirectoryItem[data-open="true"] .faqDirectoryToggle i {
  background: #fff;
}

.faqDirectoryItem[data-open="true"] .faqDirectoryToggle i:last-child {
  transform: rotate(0);
}

.faqDirectoryAnswer {
  opacity: 0;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s cubic-bezier(.22, 1, .36, 1), opacity .22s;
  display: grid;
}

.faqDirectoryAnswer > div {
  grid-template-columns: 56px minmax(0, 760px);
  gap: clamp(20px, 3vw, 50px);
  min-height: 0;
  margin-left: clamp(22px, 3vw, 44px);
  display: grid;
  overflow: hidden;
}

.faqDirectoryAnswer span {
  color: var(--color-accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 620;
}

.faqDirectoryAnswer p {
  color: #000000a1;
  white-space: pre-line;
  margin: 0;
  font-size: clamp(14px, 1.12vw, 17px);
  line-height: 1.68;
}

.faqDirectoryItem[data-open="true"] .faqDirectoryAnswer {
  opacity: 1;
  grid-template-rows: 1fr;
  padding-bottom: 38px;
}

.faqDirectoryEmpty {
  background: #ffffffc7;
  border-radius: 24px;
  align-content: center;
  justify-items: start;
  min-height: 430px;
  padding: clamp(30px, 5vw, 75px);
  display: grid;
}

.faqDirectoryEmpty > span {
  color: var(--color-accent);
  font-size: 9px;
}

.faqDirectoryEmpty h3 {
  letter-spacing: -.01em;
  max-width: 700px;
  margin: 26px 0 0;
  font-size: clamp(45px, 5vw, 82px);
  font-weight: 350;
  line-height: .9;
}

.faqDirectoryEmpty p {
  color: #0000008f;
  max-width: 520px;
  margin: 25px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.faqDirectoryEmpty button {
  background: var(--surface-card);
  color: #fff;
  min-width: 190px;
  min-height: 51px;
  font: inherit;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  padding: 0 16px;
  font-size: 9px;
  display: flex;
}

.faqDirectoryEmpty button b {
  color: var(--color-accent);
  font-size: 17px;
  font-weight: 400;
}

.faqContact {
  background: radial-gradient(circle at 82% 22%,
      rgb(var(--color-accent-rgb) / .95),
      transparent 31%),
    linear-gradient(125deg, var(--surface-card) 0%, #1c0804 46%, #891a00 100%);
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  align-items: end;
  gap: 7vw;
  min-height: 560px;
  padding: clamp(70px, 8vw, 125px) 4.3vw;
  display: grid;
}

.faqContact h2 {
  letter-spacing: -.012em;
  text-wrap: balance;
  max-width: 1000px;
  margin: 30px 0 0;
  font-size: clamp(68px, 8vw, 136px);
  font-weight: 340;
  line-height: .84;
}

.faqContact > div:last-child > p {
  color: #ffffffab;
  max-width: 460px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.faqContact > div:last-child > div {
  gap: 8px;
  margin-top: 35px;
  display: grid;
}

.faqContact a {
  color: #090909;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #fff;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  min-height: 56px;
  padding: 0 18px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.faqContact a + a {
  color: #fff;
  background: #ffffff1a;
}

.faqContact a span {
  font-size: 17px;
  font-weight: 400;
}

@media (max-width: 1120px) {
  .faqDirectoryHead {
    grid-template-columns: 130px 1fr;
  }

  .faqDirectoryHead > span {
    grid-column: 2;
  }

  .faqHeroFacts {
    width: 350px;
  }

  .faqWorkspace {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .faqContact {
    grid-template-columns: 1fr;
  }

  .faqContact > div:last-child {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 40px;
    display: grid;
  }

  .faqContact > div:last-child > div {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .faqHero, .faqDirectory, .faqContact {
    border-radius: 26px;
  }

  .faqHero {
    height: max(760px, 100svh - 12px);
    min-height: 760px;
  }

  .faqHeroMedia img {
    object-position: 58% center;
  }

  .faqHeroMedia > span {
    background: linear-gradient(#02020257, #020202a3 42%, #020202 90%);
  }

  .faqHeroCopy {
    width: auto;
    bottom: 46px;
    left: 20px;
    right: 20px;
  }

  .faqHeroCopy h1 {
    font-size: clamp(52px, 14.5vw, 76px);
  }

  .faqHeroCopy > p {
    font-size: 12px;
  }

  .faqHeroFacts {
    display: none;
  }

  .faqDirectory {
    padding: 78px 20px;
  }

  .faqDirectoryHead {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .faqDirectoryHead > span {
    grid-column: auto;
  }

  .faqDirectoryHead h2 {
    font-size: clamp(53px, 14vw, 75px);
  }

  .faqSearch {
    border-radius: 18px;
    min-height: 70px;
    margin-top: 46px;
    padding: 0 18px;
  }

  .faqSearch input {
    font-size: 14px;
  }

  .faqCategoryRail {
    margin-right: -20px;
  }

  .faqWorkspace {
    grid-template-columns: 1fr;
    margin-top: 44px;
  }

  .faqSummary {
    grid-template-columns: 1fr 1fr;
    min-height: 205px;
    padding: 22px;
    display: grid;
    position: static;
  }

  .faqSummary > strong {
    margin-top: 20px;
  }

  .faqSummary > span {
    text-align: right;
    place-self: end;
    margin-bottom: 6px;
  }

  .faqSummary dl, .faqSummary > small {
    display: none;
  }

  .faqDirectoryItem {
    border-radius: 19px;
  }

  .faqDirectoryItem > button {
    grid-template-columns: 32px minmax(0, 1fr) 36px;
    gap: 12px;
    min-height: 120px;
    padding: 20px 16px;
  }

  .faqDirectoryQuestion strong {
    font-size: clamp(23px, 7vw, 32px);
  }

  .faqDirectoryToggle {
    border-radius: 11px;
    width: 35px;
    height: 35px;
  }

  .faqDirectoryAnswer > div {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    margin: 0 16px;
  }

  .faqDirectoryItem[data-open="true"] .faqDirectoryAnswer {
    padding-bottom: 28px;
  }

  .faqContact {
    grid-template-columns: 1fr;
    align-content: space-between;
    min-height: 650px;
    padding: 82px 20px 38px;
  }

  .faqContact h2 {
    font-size: clamp(52px, 14vw, 74px);
  }

  .faqContact > div:last-child {
    display: block;
  }

  .faqContact > div:last-child > div {
    margin-top: 30px;
  }
}

.knowledgeHero, .knowledgeLibrary, .knowledgeContribute {
  border-radius: 46px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}

.knowledgeHero {
  isolation: isolate;
  background: var(--surface-card);
  height: calc(100svh - 16px);
  min-height: 780px;
}

.knowledgeHero .siteHeader {
  z-index: 10;
}

.knowledgeHeroMedia, .knowledgeHeroMedia > span {
  position: absolute;
  inset: 0;
}

.knowledgeHeroMedia {
  z-index: -2;
}

.knowledgeHeroMedia img {
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(.76) contrast(1.08) brightness(.88);
  width: 100%;
  height: 100%;
  transform: scale(1.015);
}

.knowledgeHeroMedia > span {
  background: linear-gradient(90deg, #020202fa 0%, #020202e0 40%, #0202024d 73%, #0202026b 100%), linear-gradient(#0202021f 48%, #020202f0 100%);
}

.knowledgeHeroCopy {
  z-index: 4;
  width: min(1140px, 75vw);
  position: absolute;
  bottom: clamp(58px, 7.5vh, 100px);
  left: 4.3vw;
}

.knowledgeHeroCopy .innerBreadcrumb {
  margin-bottom: 38px;
}

.knowledgeHeroCopy > p {
  color: var(--color-accent);
  letter-spacing: .075em;
  text-transform: uppercase;
  margin: 0 0 25px;
  font-size: 9px;
  font-weight: 650;
}

.knowledgeHeroCopy h1 {
  letter-spacing: -.012em;
  text-wrap: balance;
  max-width: 1120px;
  margin: 0;
  font-size: clamp(70px, 8.2vw, 144px);
  font-weight: 340;
  line-height: .83;
}

.knowledgeHeroCopy > span {
  color: #ffffffad;
  max-width: 650px;
  margin-top: 31px;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.58;
  display: block;
}

.knowledgeHeroCopy > div:last-child {
  gap: 8px;
  margin-top: 34px;
  display: flex;
}

.knowledgeHeroCopy > div:last-child > a {
  background: var(--color-accent);
  color: #fff;
  letter-spacing: .045em;
  text-transform: uppercase;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  min-width: 220px;
  min-height: 54px;
  padding: 0 18px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.knowledgeHeroCopy > div:last-child > a + a {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #ffffff1f;
}

.knowledgeHeroCopy > div:last-child i {
  font-size: 18px;
  font-style: normal;
}

.knowledgeHeroCopy > div:last-child a span:last-child {
  font-size: 17px;
}

.knowledgeHeroFacts {
  z-index: 4;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  width: min(410px, 27vw);
  display: grid;
  position: absolute;
  bottom: 48px;
  right: 4.3vw;
}

.knowledgeHeroFacts > div {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #050505b8;
  border-radius: 18px;
  align-content: space-between;
  min-height: 126px;
  padding: 19px;
  display: grid;
}

.knowledgeHeroFacts strong {
  color: var(--color-accent);
  font-size: 48px;
  font-weight: 360;
  line-height: .85;
}

.knowledgeHeroFacts span {
  color: #ffffff7a;
  letter-spacing: .055em;
  text-transform: uppercase;
  font-size: 8px;
  line-height: 1.45;
}

.knowledgeLibrary {
  color: #070707;
  background: #efede8;
  padding: clamp(92px, 10vw, 165px) 4.3vw clamp(85px, 9vw, 145px);
}

.knowledgeLibraryHead {
  grid-template-columns: minmax(140px, .42fr) minmax(480px, 1.28fr) minmax(260px, .52fr);
  align-items: start;
  gap: 4vw;
  display: grid;
}

.knowledgeLibraryHead > p, .knowledgeContribute > div:first-child > p {
  color: var(--color-accent);
  letter-spacing: .075em;
  text-transform: uppercase;
  margin: 9px 0 0;
  font-size: 9px;
  font-weight: 650;
}

.knowledgeLibraryHead h2 {
  letter-spacing: -.012em;
  margin: 0;
  font-size: clamp(70px, 8vw, 138px);
  font-weight: 340;
  line-height: .84;
}

.knowledgeLibraryHead > span {
  color: #0009;
  max-width: 400px;
  font-size: 13px;
  line-height: 1.58;
}

.knowledgeSearch {
  background: #fff;
  border-radius: 22px;
  align-items: center;
  gap: 22px;
  min-height: 86px;
  margin-top: clamp(60px, 6.5vw, 100px);
  padding: 0 16px 0 25px;
  transition: box-shadow .18s, transform .18s;
  display: flex;
  box-shadow: 0 24px 70px #2d251c12;
}

.knowledgeSearch:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 28px 78px #2d251c1f;
}

.knowledgeSearchIcon {
  border: 1.5px solid #111;
  border-radius: 50%;
  flex: none;
  width: 19px;
  height: 19px;
  position: relative;
}

.knowledgeSearchIcon:after {
  background: var(--surface-subcard);
  content: "";
  transform-origin: 0;
  width: 7px;
  height: 1.5px;
  position: absolute;
  bottom: -3px;
  right: -5px;
  transform: rotate(48deg);
}

.knowledgeSearch input {
  color: #090909;
  min-width: 0;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  font-size: clamp(17px, 1.45vw, 23px);
}

.knowledgeSearch input::placeholder {
  color: #00000057;
}

.knowledgeSearch input::-webkit-search-cancel-button {
  display: none;
}

.knowledgeSearch button {
  background: var(--surface-card);
  color: #fff;
  min-width: 145px;
  min-height: 54px;
  font: inherit;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding: 0 17px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.knowledgeSearch button span {
  color: var(--color-accent);
  font-size: 17px;
}

.knowledgeTopics {
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) #0000001a;
  grid-auto-columns: minmax(220px, 1fr);
  grid-auto-flow: column;
  gap: 8px;
  margin-top: 12px;
  padding-bottom: 5px;
  display: grid;
  overflow-x: auto;
}

.knowledgeTopics > a {
  color: #090909;
  background: #0000000e;
  border-radius: 20px;
  align-content: space-between;
  min-height: 205px;
  padding: 19px;
  transition: background-color .18s, color .18s, transform .18s;
  display: grid;
  position: relative;
}

.knowledgeTopics > a:hover, .knowledgeTopics > a:focus-visible {
  transform: translateY(-3px);
}

.knowledgeTopics > a[data-active="true"] {
  background: var(--surface-card);
  color: #fff;
}

.knowledgeTopics > a > span {
  color: var(--color-accent);
  font-size: 8px;
}

.knowledgeTopics > a strong {
  align-self: end;
  margin-top: auto;
  font-size: clamp(25px, 2vw, 35px);
  font-weight: 400;
  line-height: .95;
}

.knowledgeTopics > a p {
  color: #0000007a;
  min-height: 3.8em;
  margin: 14px 38px 0 0;
  font-size: 9px;
  line-height: 1.42;
}

.knowledgeTopics > a[data-active="true"] p {
  color: #ffffff80;
}

.knowledgeTopics > a i {
  color: var(--color-accent);
  font-size: 18px;
  font-style: normal;
  position: absolute;
  bottom: 18px;
  right: 18px;
}

.knowledgeResultsHead {
  justify-content: space-between;
  align-items: end;
  gap: 35px;
  margin-top: clamp(80px, 9vw, 145px);
  margin-bottom: 46px;
  display: flex;
}

.knowledgeResultsHead > div > span {
  color: var(--color-accent);
  letter-spacing: .065em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 650;
}

.knowledgeResultsHead h2 {
  letter-spacing: -.01em;
  margin: 18px 0 0;
  font-size: clamp(46px, 5.2vw, 88px);
  font-weight: 350;
  line-height: .88;
}

.knowledgeResultsHead > strong {
  color: var(--color-accent);
  justify-items: end;
  font-size: clamp(56px, 6vw, 92px);
  font-weight: 340;
  line-height: .76;
  display: grid;
}

.knowledgeResultsHead > strong small {
  color: #00000070;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: 14px;
  font-size: 8px;
  font-weight: 600;
}

.knowledgeFeatured {
  background: var(--surface-card);
  color: #fff;
  border-radius: 32px;
  grid-template-columns: minmax(0, 1.18fr) minmax(430px, .82fr);
  min-height: 670px;
  display: grid;
  overflow: hidden;
}

.knowledgeFeaturedMedia {
  min-height: 670px;
  position: relative;
  overflow: hidden;
}

.knowledgeFeaturedMedia img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}

.knowledgeFeaturedMedia > span {
  background: linear-gradient(90deg, #0000 70%, #090909b8);
  position: absolute;
  inset: 0;
}

.knowledgeFeatured:hover .knowledgeFeaturedMedia img {
  transform: scale(1.035);
}

.knowledgeFeaturedCopy {
  flex-direction: column;
  min-width: 0;
  padding: clamp(34px, 4vw, 64px);
  display: flex;
}

.knowledgeFeaturedCopy > div:first-child {
  color: #fff6;
  letter-spacing: .06em;
  text-transform: uppercase;
  justify-content: space-between;
  gap: 20px;
  font-size: 8px;
  display: flex;
}

.knowledgeFeaturedCopy > div:first-child > span {
  color: var(--color-accent);
}

.knowledgeFeaturedCopy > p {
  color: var(--color-accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: clamp(65px, 7vw, 110px) 0 0;
  font-size: 9px;
  font-weight: 650;
}

.knowledgeFeaturedCopy h2 {
  letter-spacing: -.008em;
  margin: 20px 0 0;
  font-size: clamp(43px, 4.2vw, 72px);
  font-weight: 360;
  line-height: .9;
}

.knowledgeFeaturedCopy h2 a {
  color: inherit;
}

.knowledgeFeaturedCopy blockquote {
  color: #ffffff94;
  max-width: 650px;
  margin: 28px 0 0;
  font-size: 13px;
  font-style: normal;
  line-height: 1.6;
}

.knowledgeTags {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 26px;
  display: flex;
}

.knowledgeTags a {
  color: #ffffff8c;
  background: #ffffff13;
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 8px;
}

.knowledgeFeaturedCopy footer {
  justify-content: space-between;
  align-items: end;
  gap: 25px;
  margin-top: auto;
  padding-top: 35px;
  display: flex;
}

.knowledgeFeaturedCopy footer > a {
  color: #fff;
  gap: 5px;
  display: grid;
}

.knowledgeFeaturedCopy footer small {
  color: #ffffff61;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 7px;
}

.knowledgeFeaturedCopy footer strong {
  font-size: 12px;
  font-weight: 520;
}

.knowledgeFeaturedCopy footer > a > span, .knowledgeFeaturedCopy footer > div > span {
  color: #fff6;
  font-size: 8px;
}

.knowledgeFeaturedCopy footer > div {
  justify-items: end;
  gap: 12px;
  display: grid;
}

.knowledgeFeaturedCopy footer > div > a {
  background: var(--color-accent);
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  min-width: 145px;
  min-height: 48px;
  padding: 0 15px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.knowledgeFeaturedCopy footer b {
  font-size: 16px;
  font-weight: 400;
}

.knowledgeGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 10px;
  margin-top: 64px;
  display: grid;
}

.knowledgeCard {
  color: #090909;
  min-width: 0;
}

.knowledgeCardMedia {
  aspect-ratio: 4 / 3;
  background: #ddd9d1;
  border-radius: 23px;
  display: block;
  position: relative;
  overflow: hidden;
}

.knowledgeCardMedia img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .52s cubic-bezier(.22, 1, .36, 1);
}

.knowledgeCardMedia > span {
  background: linear-gradient(#0000 54%, #0006);
  position: absolute;
  inset: 0;
}

.knowledgeCard:hover .knowledgeCardMedia img {
  transform: scale(1.04);
}

.knowledgeCardMeta {
  color: #0000006b;
  letter-spacing: .05em;
  text-transform: uppercase;
  justify-content: space-between;
  gap: 16px;
  margin-top: 21px;
  font-size: 8px;
  display: flex;
}

.knowledgeCardMeta > span {
  color: var(--color-accent);
}

.knowledgeCard h2 {
  letter-spacing: -.006em;
  margin: 18px 0 0;
  font-size: clamp(30px, 2.7vw, 48px);
  font-weight: 380;
  line-height: .96;
}

.knowledgeCard h2 a {
  color: inherit;
}

.knowledgeCard > p {
  color: #0000008f;
  min-height: 5em;
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.6;
}

.knowledgeCard footer {
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 9px 20px;
  margin-top: 27px;
  display: grid;
}

.knowledgeCard footer > a:first-child, .knowledgeCard footer > span {
  color: #0000006b;
  font-size: 8px;
}

.knowledgeCard footer > a:last-child {
  color: var(--color-accent);
  letter-spacing: .04em;
  text-transform: uppercase;
  grid-area: 1 / 2 / span 2;
  font-size: 9px;
  font-weight: 650;
}

.knowledgeEmpty {
  background: #fff;
  border-radius: 30px;
  align-content: center;
  justify-items: start;
  min-height: 520px;
  padding: clamp(35px, 6vw, 90px);
  display: grid;
}

.knowledgeEmpty > span {
  color: var(--color-accent);
  font-size: 9px;
}

.knowledgeEmpty h2 {
  letter-spacing: -.01em;
  max-width: 760px;
  margin: 28px 0 0;
  font-size: clamp(48px, 6vw, 94px);
  font-weight: 350;
  line-height: .88;
}

.knowledgeEmpty > p {
  color: #0000008c;
  max-width: 530px;
  margin: 27px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.knowledgeEmpty > div {
  gap: 8px;
  margin-top: 34px;
  display: flex;
}

.knowledgeEmpty > div > a {
  background: var(--surface-card);
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-width: 185px;
  min-height: 52px;
  padding: 0 16px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.knowledgeEmpty > div > a + a {
  background: var(--color-accent);
}

.knowledgeEmpty > div span {
  font-size: 17px;
}

.knowledgeLibrary .articlePagination {
  color: #090909;
  max-width: none;
  margin: 70px 0 0;
}

.knowledgeLibrary .articlePagination a {
  color: #0000008f;
}

.knowledgeContribute {
  background: radial-gradient(circle at 82% 22%,
      rgb(var(--color-accent-rgb) / .95),
      transparent 31%),
    linear-gradient(125deg, var(--surface-card) 0%, #1c0804 46%, #891a00 100%);
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  align-items: end;
  gap: 7vw;
  min-height: 600px;
  padding: clamp(70px, 8vw, 125px) 4.3vw;
  display: grid;
}

.knowledgeContribute h2 {
  letter-spacing: -.012em;
  text-wrap: balance;
  max-width: 1100px;
  margin: 30px 0 0;
  font-size: clamp(66px, 7.8vw, 132px);
  font-weight: 340;
  line-height: .84;
}

.knowledgeContribute > div:last-child > p {
  color: #ffffffab;
  max-width: 470px;
  margin: 0;
  font-size: 13px;
  line-height: 1.62;
}

.knowledgeContribute > div:last-child > div {
  gap: 8px;
  margin-top: 35px;
  display: grid;
}

.knowledgeContribute > div:last-child a {
  color: #090909;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #fff;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  min-height: 56px;
  padding: 0 18px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.knowledgeContribute > div:last-child a + a {
  color: #fff;
  background: #ffffff1a;
}

.knowledgeContribute > div:last-child a span {
  font-size: 17px;
  font-weight: 400;
}

@media (max-width: 1120px) {
  .knowledgeLibraryHead {
    grid-template-columns: 130px 1fr;
  }

  .knowledgeLibraryHead > span {
    grid-column: 2;
  }

  .knowledgeHeroFacts {
    width: 350px;
  }

  .knowledgeFeatured {
    grid-template-columns: 1fr;
  }

  .knowledgeFeaturedMedia {
    min-height: 520px;
  }

  .knowledgeFeaturedMedia > span {
    background: linear-gradient(180deg, transparent 65%, var(--surface-card));
  }

  .knowledgeFeaturedCopy {
    min-height: 580px;
  }

  .knowledgeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knowledgeContribute {
    grid-template-columns: 1fr;
  }

  .knowledgeContribute > div:last-child {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 40px;
    display: grid;
  }

  .knowledgeContribute > div:last-child > div {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .knowledgeHero, .knowledgeLibrary, .knowledgeContribute {
    border-radius: 26px;
  }

  .knowledgeHero {
    height: max(790px, 100svh - 12px);
    min-height: 790px;
  }

  .knowledgeHeroMedia img {
    object-position: 58% center;
  }

  .knowledgeHeroMedia > span {
    background: linear-gradient(#02020257, #020202a3 42%, #020202 90%);
  }

  .knowledgeHeroCopy {
    width: auto;
    bottom: 46px;
    left: 20px;
    right: 20px;
  }

  .knowledgeHeroCopy > p {
    margin-bottom: 19px;
  }

  .knowledgeHeroCopy h1 {
    font-size: clamp(50px, 13.5vw, 72px);
  }

  .knowledgeHeroCopy > span {
    font-size: 12px;
  }

  .knowledgeHeroCopy > div:last-child {
    display: grid;
  }

  .knowledgeHeroFacts {
    display: none;
  }

  .knowledgeLibrary {
    padding: 78px 20px;
  }

  .knowledgeLibraryHead {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .knowledgeLibraryHead > span {
    grid-column: auto;
  }

  .knowledgeLibraryHead h2 {
    font-size: clamp(53px, 14vw, 75px);
  }

  .knowledgeSearch {
    border-radius: 18px;
    min-height: 70px;
    margin-top: 46px;
    padding: 0 9px 0 18px;
  }

  .knowledgeSearch input {
    font-size: 14px;
  }

  .knowledgeSearch button {
    justify-content: center;
    width: 52px;
    min-width: 52px;
    padding: 0;
    font-size: 0;
  }

  .knowledgeTopics {
    grid-auto-columns: 78vw;
    margin-right: -20px;
  }

  .knowledgeResultsHead {
    margin-top: 76px;
  }

  .knowledgeResultsHead h2 {
    font-size: clamp(42px, 11.5vw, 59px);
  }

  .knowledgeResultsHead > strong {
    font-size: 46px;
  }

  .knowledgeResultsHead > strong small {
    display: none;
  }

  .knowledgeFeatured {
    border-radius: 24px;
    min-height: 0;
  }

  .knowledgeFeaturedMedia {
    min-height: 360px;
  }

  .knowledgeFeaturedCopy {
    min-height: 620px;
    padding: 28px 20px;
  }

  .knowledgeFeaturedCopy > p {
    margin-top: 65px;
  }

  .knowledgeFeaturedCopy h2 {
    font-size: clamp(39px, 11vw, 54px);
  }

  .knowledgeFeaturedCopy footer {
    flex-direction: column;
    align-items: stretch;
  }

  .knowledgeFeaturedCopy footer > div {
    justify-items: stretch;
  }

  .knowledgeGrid {
    grid-template-columns: 1fr;
  }

  .knowledgeCard > p {
    min-height: 0;
  }

  .knowledgeEmpty {
    min-height: 540px;
    padding: 28px 20px;
  }

  .knowledgeEmpty h2 {
    font-size: clamp(46px, 13vw, 66px);
  }

  .knowledgeEmpty > div {
    flex-direction: column;
    width: 100%;
  }

  .knowledgeContribute {
    grid-template-columns: 1fr;
    align-content: space-between;
    min-height: 680px;
    padding: 82px 20px 38px;
  }

  .knowledgeContribute h2 {
    font-size: clamp(50px, 13.5vw, 72px);
  }

  .knowledgeContribute > div:last-child {
    display: block;
  }

  .knowledgeContribute > div:last-child > div {
    margin-top: 30px;
  }
}

.serversPage {
  background: var(--surface-card);
  color: #f7f5f2;
}

.serversHero, .serversLive, .serversRoadmap, .serversClosing {
  border-radius: 46px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}

.serversHero {
  isolation: isolate;
  background: var(--surface-card);
  height: calc(100svh - 16px);
  min-height: 780px;
}

.serversHero .siteHeader {
  z-index: 10;
}

.serversHeroMedia, .serversHeroMedia > span {
  position: absolute;
  inset: 0;
}

.serversHeroMedia {
  z-index: -2;
}

.serversHeroMedia img {
  object-fit: cover;
  object-position: center 50%;
  filter: saturate(.72) contrast(1.08) brightness(.88);
  transform: scale(1.015);
}

.serversHeroMedia > span {
  background: linear-gradient(90deg, #020202fa 0%, #020202de 39%, #02020240 74%, #02020266 100%), linear-gradient(#0202021a 46%, #020202f0 100%);
}

.serversHeroCopy {
  z-index: 4;
  width: min(1160px, 74vw);
  position: absolute;
  bottom: clamp(58px, 7.5vh, 100px);
  left: 4.3vw;
}

.serversHeroCopy .innerBreadcrumb {
  margin-bottom: 42px;
}

.serversHeroCopy h1 {
  letter-spacing: -.012em;
  text-wrap: balance;
  max-width: 1160px;
  margin: 0;
  font-size: clamp(70px, 8.2vw, 144px);
  font-weight: 340;
  line-height: .83;
}

.serversHeroCopy > p {
  color: #ffffffad;
  max-width: 680px;
  margin: 32px 0 0;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.56;
}

.serversHeroCopy > a {
  background: var(--color-accent);
  color: #fff;
  letter-spacing: .045em;
  text-transform: uppercase;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  width: 220px;
  min-height: 54px;
  margin-top: 35px;
  padding: 0 18px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.serversHeroCopy > a i {
  font-size: 18px;
  font-style: normal;
}

.serversHeroFacts {
  z-index: 4;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  width: min(520px, 34vw);
  display: grid;
  position: absolute;
  bottom: 48px;
  right: 4.3vw;
}

.serversHeroFacts > div {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #050505b8;
  border-radius: 18px;
  align-content: space-between;
  min-height: 126px;
  padding: 18px;
  display: grid;
}

.serversHeroFacts strong {
  color: var(--color-accent);
  font-size: 45px;
  font-weight: 360;
  line-height: .85;
}

.serversHeroFacts span {
  color: #ffffff7a;
  letter-spacing: .055em;
  text-transform: uppercase;
  font-size: 7px;
  line-height: 1.45;
}

.serversLive {
  color: #070707;
  background: #efede8;
  padding: clamp(92px, 10vw, 165px) 4.3vw clamp(85px, 9vw, 145px);
}

.serversLiveHead, .serversRoadmap > header {
  grid-template-columns: minmax(140px, .42fr) minmax(500px, 1.3fr) minmax(260px, .5fr);
  align-items: start;
  gap: 4vw;
  display: grid;
}

.serversLiveHead > p, .serversRoadmap > header > p, .serversClosing > div:first-child > p {
  color: var(--color-accent);
  letter-spacing: .075em;
  text-transform: uppercase;
  margin: 9px 0 0;
  font-size: 9px;
  font-weight: 650;
}

.serversLiveHead h2, .serversRoadmap > header h2 {
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(68px, 7.6vw, 132px);
  font-weight: 340;
  line-height: .84;
}

.serversLiveHead > span, .serversRoadmap > header > span {
  color: #0009;
  max-width: 400px;
  font-size: 13px;
  line-height: 1.58;
}

.serversDirectionFeature {
  background: var(--surface-card);
  color: #fff;
  border-radius: 32px;
  grid-template-columns: minmax(0, 1.18fr) minmax(430px, .82fr);
  min-height: 700px;
  margin-top: clamp(65px, 7vw, 110px);
  display: grid;
  overflow: hidden;
}

.serversDirectionMedia {
  min-height: 700px;
  position: relative;
  overflow: hidden;
}

.serversDirectionMedia img {
  object-fit: cover;
  object-position: center;
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}

.serversDirectionMedia > span {
  background: linear-gradient(90deg, #0000 68%, #090909bd);
  position: absolute;
  inset: 0;
}

.serversDirectionFeature:hover .serversDirectionMedia img {
  transform: scale(1.035);
}

.serversDirectionCopy {
  flex-direction: column;
  min-width: 0;
  padding: clamp(34px, 4vw, 64px);
  display: flex;
}

.serversDirectionCopy > div:first-child {
  color: var(--color-accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: start;
  gap: 24px;
  font-size: 8px;
  font-weight: 650;
  display: flex;
}

.serversDirectionCopy > div:first-child strong {
  color: #ffffff1f;
  font-size: 72px;
  font-weight: 340;
  line-height: .76;
}

.serversDirectionCopy > p {
  color: var(--color-accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: auto 0 0;
  font-size: 9px;
  font-weight: 650;
}

.serversDirectionCopy h2 {
  letter-spacing: -.008em;
  margin: 20px 0 0;
  font-size: clamp(48px, 4.7vw, 80px);
  font-weight: 360;
  line-height: .88;
}

.serversDirectionCopy blockquote {
  color: #ffffff94;
  max-width: 660px;
  margin: 29px 0 0;
  font-size: 13px;
  font-style: normal;
  line-height: 1.62;
}

.serversDirectionCopy > div:last-child {
  gap: 8px;
  margin-top: 38px;
  display: grid;
}

.serversDirectionCopy > div:last-child a, .serversLiveList footer a, .serversClosing > div:last-child a {
  background: var(--color-accent);
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 54px;
  padding: 0 17px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.serversDirectionCopy > div:last-child a + a, .serversLiveList footer a + a {
  background: #ffffff1a;
}

.serversDirectionCopy > div:last-child a span, .serversLiveList footer a span, .serversClosing a span {
  font-size: 17px;
  font-weight: 400;
}

.serversLiveList {
  margin-top: clamp(85px, 9vw, 145px);
}

.serversActiveDirections {
  margin-top: clamp(70px, 8vw, 120px);
}

.serversActiveDirections > header {
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 30px;
  display: flex;
}

.serversActiveDirections > header p {
  margin: 0;
  font-size: clamp(34px, 4vw, 68px);
  font-weight: 350;
  line-height: .94;
}

.serversActiveDirections > header span {
  color: var(--color-accent);
  font-size: clamp(48px, 5vw, 78px);
  font-weight: 340;
  line-height: .8;
}

.serversActiveDirections > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.serversActiveDirectionCard:only-child {
  grid-column: 1 / -1;
}

.serversActiveDirectionCard {
  isolation: isolate;
  color: #fff;
  border-radius: 28px;
  min-height: 580px;
  display: block;
  position: relative;
  overflow: hidden;
}

.serversActiveDirectionCard > img {
  z-index: -2;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}

.serversActiveDirectionCard > i {
  z-index: -1;
  background: linear-gradient(#0000002e, #0000001f 40%, #000000f0);
  position: absolute;
  inset: 0;
}

.serversActiveDirectionCard:hover > img, .serversActiveDirectionCard:focus-visible > img {
  transform: scale(1.04);
}

@media (max-width: 760px) {
  .serversActiveDirections > header {
    flex-direction: column;
    align-items: start;
    gap: 12px;
  }

  .serversActiveDirections > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .serversActiveDirectionCard {
    min-height: 500px;
  }
}

.serversLiveList > header {
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 42px;
  display: flex;
}

.serversLiveList > header p {
  letter-spacing: -.01em;
  margin: 0;
  font-size: clamp(48px, 5.5vw, 92px);
  font-weight: 350;
  line-height: .88;
}

.serversLiveList > header span {
  color: var(--color-accent);
  font-size: clamp(58px, 6vw, 96px);
  font-weight: 340;
  line-height: .78;
}

.serversLiveList > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.serversLiveList article {
  background: #fff;
  border-radius: 27px;
  flex-direction: column;
  min-width: 0;
  min-height: 720px;
  padding: 10px;
  display: flex;
}

.serversLiveCardMedia {
  aspect-ratio: 16 / 10;
  background: #dad6cf;
  border-radius: 20px;
  display: block;
  position: relative;
  overflow: hidden;
}

.serversLiveCardMedia img {
  object-fit: cover;
  transition: transform .56s cubic-bezier(.22, 1, .36, 1);
}

.serversLiveCardMedia > span {
  background: linear-gradient(#0000 55%, #00000073);
  position: absolute;
  inset: 0;
}

.serversLiveList article:hover .serversLiveCardMedia img {
  transform: scale(1.04);
}

.serversLiveCardTop {
  color: var(--color-accent);
  letter-spacing: .055em;
  text-transform: uppercase;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 17px 0;
  font-size: 8px;
  font-weight: 650;
  display: flex;
}

.serversLiveCardTop small {
  color: #0006;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 58%;
  font-size: 8px;
  overflow: hidden;
}

.serversLiveList h3 {
  letter-spacing: -.01em;
  margin: 48px 17px 0;
  font-size: clamp(56px, 6vw, 102px);
  font-weight: 350;
  line-height: .78;
}

.serversLiveList h3 a {
  color: #090909;
}

.serversLiveList article > p {
  color: #00000091;
  max-width: 650px;
  margin: 27px 17px 0;
  font-size: 12px;
  line-height: 1.62;
}

.serversLiveList footer {
  grid-template-columns: 1fr .55fr;
  gap: 7px;
  margin: auto 7px 7px;
  padding-top: 35px;
  display: grid;
}

.serversLiveList footer a + a {
  color: #090909;
  background: #eeeae3;
}

.serversRoadmap {
  background: var(--surface-card);
  padding: clamp(92px, 10vw, 165px) 4.3vw clamp(85px, 9vw, 145px);
}

.serversRoadmap > header > span {
  color: #ffffff8f;
}

.serversRoadmap > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: clamp(65px, 7vw, 110px);
  display: grid;
}

.serversRoadmapCard {
  isolation: isolate;
  color: #fff;
  border-radius: 28px;
  min-height: 650px;
  position: relative;
  overflow: hidden;
}

.serversRoadmapCard:nth-child(2) {
  min-height: 720px;
}

.serversRoadmapCard > img {
  z-index: -2;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.22, 1, .36, 1), filter .28s;
}

.serversRoadmapCard > i {
  z-index: -1;
  background: linear-gradient(#0000003d, #0000001f 36%, #000000f0);
  position: absolute;
  inset: 0;
}

.serversRoadmapCard:hover > img, .serversRoadmapCard:focus-visible > img {
  filter: saturate(1.08);
  transform: scale(1.045);
}

.serversRoadmapCardDisabled {
  cursor: default;
}

.serversRoadmapCardDisabled > img {
  filter: saturate(.12) brightness(.42);
}

.serversRoadmapCardDisabled:hover > img {
  filter: saturate(.12) brightness(.42);
  transform: none;
}

.serversRoadmapCardDisabled > i {
  background: linear-gradient(#0000009e, #00000085 36%, #000000f7);
}

.serversRoadmapTop {
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  top: 25px;
  left: 24px;
  right: 24px;
}

.serversRoadmapTop small, .serversRoadmapTop b, .serversRoadmapCopy > small, .serversRoadmapAction {
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 8px;
  font-style: normal;
}

.serversRoadmapTop b {
  color: #ffffffb3;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #050505ad;
  border-radius: 999px;
  padding: 7px 10px;
}

.serversRoadmapCopy {
  display: grid;
  position: absolute;
  bottom: 88px;
  left: 25px;
  right: 25px;
}

.serversRoadmapCopy > small {
  color: var(--color-accent);
}

.serversRoadmapCopy strong {
  letter-spacing: -.01em;
  margin-top: 15px;
  font-size: clamp(46px, 4.6vw, 78px);
  font-weight: 350;
  line-height: .82;
}

.serversRoadmapCopy p {
  color: #ffffff9e;
  max-width: 460px;
  margin: 23px 0 0;
  font-size: 11px;
  line-height: 1.55;
}

.serversRoadmapAction {
  color: #ffffffb8;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 25px;
  left: 25px;
  right: 25px;
}

.serversRoadmapAction b {
  color: var(--color-accent);
  font-size: 18px;
  font-weight: 400;
}

.serversClosing {
  background: radial-gradient(circle at 82% 22%,
      rgb(var(--color-accent-rgb) / .95),
      transparent 31%),
    linear-gradient(125deg, var(--surface-card) 0%, #1c0804 46%, #891a00 100%);
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  align-items: end;
  gap: 7vw;
  min-height: 600px;
  padding: clamp(70px, 8vw, 125px) 4.3vw;
  display: grid;
}

.serversClosing h2 {
  letter-spacing: -.012em;
  text-wrap: balance;
  max-width: 1100px;
  margin: 30px 0 0;
  font-size: clamp(66px, 7.8vw, 132px);
  font-weight: 340;
  line-height: .84;
}

.serversClosing > div:last-child > p {
  color: #ffffffab;
  max-width: 470px;
  margin: 0;
  font-size: 13px;
  line-height: 1.62;
}

.serversClosing > div:last-child > div {
  gap: 8px;
  margin-top: 35px;
  display: grid;
}

.serversClosing > div:last-child a {
  color: #090909;
  background: #fff;
}

.serversClosing > div:last-child a + a {
  color: #fff;
  background: #ffffff1a;
}

@media (max-width: 1120px) {
  .serversLiveHead, .serversRoadmap > header {
    grid-template-columns: 130px 1fr;
  }

  .serversLiveHead > span, .serversRoadmap > header > span {
    grid-column: 2;
  }

  .serversHeroFacts {
    width: 460px;
  }

  .serversDirectionFeature {
    grid-template-columns: 1fr;
  }

  .serversDirectionMedia {
    min-height: 540px;
  }

  .serversDirectionMedia > span {
    background: linear-gradient(180deg, transparent 66%, var(--surface-card));
  }

  .serversDirectionCopy {
    min-height: 560px;
  }

  .serversRoadmap > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .serversRoadmapCard:nth-child(2) {
    min-height: 650px;
  }

  .serversClosing {
    grid-template-columns: 1fr;
  }

  .serversClosing > div:last-child {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 40px;
    display: grid;
  }

  .serversClosing > div:last-child > div {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .serversHero, .serversLive, .serversRoadmap, .serversClosing {
    border-radius: 26px;
  }

  .serversHero {
    height: max(790px, 100svh - 12px);
    min-height: 790px;
  }

  .serversHeroMedia img {
    object-position: 58% center;
  }

  .serversHeroMedia > span {
    background: linear-gradient(#02020257, #020202a3 42%, #020202 90%);
  }

  .serversHeroCopy {
    width: auto;
    bottom: 46px;
    left: 20px;
    right: 20px;
  }

  .serversHeroCopy h1 {
    font-size: clamp(50px, 13.5vw, 72px);
  }

  .serversHeroCopy > p {
    font-size: 12px;
  }

  .serversHeroFacts {
    display: none;
  }

  .serversLive, .serversRoadmap {
    padding: 78px 20px;
  }

  .serversLiveHead, .serversRoadmap > header {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .serversLiveHead > span, .serversRoadmap > header > span {
    grid-column: auto;
  }

  .serversLiveHead h2, .serversRoadmap > header h2 {
    font-size: clamp(50px, 13.5vw, 72px);
  }

  .serversDirectionFeature {
    border-radius: 24px;
    min-height: 0;
    margin-top: 54px;
  }

  .serversDirectionMedia {
    min-height: 360px;
  }

  .serversDirectionCopy {
    min-height: 600px;
    padding: 28px 20px;
  }

  .serversDirectionCopy h2 {
    font-size: clamp(43px, 12vw, 59px);
  }

  .serversLiveList > header p {
    font-size: clamp(45px, 12vw, 62px);
  }

  .serversLiveList > header span {
    font-size: 48px;
  }

  .serversLiveList > div {
    grid-template-columns: 1fr;
  }

  .serversLiveList article {
    border-radius: 22px;
    min-height: 650px;
  }

  .serversLiveList h3 {
    font-size: clamp(52px, 15vw, 76px);
  }

  .serversLiveList footer, .serversRoadmap > div {
    grid-template-columns: 1fr;
  }

  .serversRoadmapCard, .serversRoadmapCard:nth-child(2) {
    min-height: 600px;
  }

  .serversRoadmapCopy strong {
    font-size: clamp(49px, 14vw, 70px);
  }

  .serversClosing {
    grid-template-columns: 1fr;
    align-content: space-between;
    min-height: 680px;
    padding: 82px 20px 38px;
  }

  .serversClosing h2 {
    font-size: clamp(50px, 13.5vw, 72px);
  }

  .serversClosing > div:last-child {
    display: block;
  }

  .serversClosing > div:last-child > div {
    margin-top: 30px;
  }
}

.astraServerPage .astraServerHero {
  border: 0;
  border-radius: 42px;
  min-height: 680px;
}

.astraServerPage .astraServerFaq {
  background: var(--surface-card);
  color: #f7f5f2;
}

@media (max-width: 920px) {
  .astraServerPage .astraServerHero {
    border-radius: 32px;
    height: max(820px, 100svh - 12px);
    min-height: 820px;
  }
}

@media (max-width: 560px) {
  .astraServerPage .astraServerHero {
    border-radius: 26px;
    height: max(860px, 100svh - 12px);
    min-height: 860px;
  }
}

.publicProfileSettings, .profileImageEditor, .profileImagePreview, .profileImageEditor[data-kind="cover"] .profileImagePreview {
  border: 0;
}

.publicProfileFieldGrid input, .publicProfileFieldGrid textarea, .publicProfileFieldGrid select {
  background: var(--surface-card);
  border: 0;
}

.publicProfileFieldGrid input:focus, .publicProfileFieldGrid textarea:focus, .publicProfileFieldGrid select:focus, .profileSocialActiveEditor input:focus {
  outline: 2px solid rgb(var(--color-accent-rgb) / .72);
  outline-offset: 2px;
}

.serverPlaytimeLeaderboard {
  background: radial-gradient(circle at 91% 5%,
      #ffeccd85,
      transparent 28%),
    var(--color-accent);
  color: #080808;
  padding: clamp(105px, 10vw, 180px) 4.3vw;
  overflow: hidden;
}

.serverPlaytimeHeading {
  grid-template-columns: minmax(130px, .48fr) minmax(520px, 1.8fr) minmax(250px, .72fr);
  align-items: start;
  gap: 5vw;
  display: grid;
}

.serverPlaytimeHeading .sectionEyebrow {
  color: #0000008a;
}

.serverPlaytimeHeading h2 {
  letter-spacing: -.008em;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(60px, 7.3vw, 134px);
  font-weight: 380;
  line-height: .87;
}

.serverPlaytimeHeading > p:last-child, .serverPlaytimeHeading > div > p {
  color: #000000ad;
  margin: 3px 0 28px;
  font-size: 14px;
  line-height: 1.52;
}

.serverPlaytimeHeading > div {
  align-content: start;
  display: grid;
}

.serverPlaytimeHeading > div > strong {
  font-size: clamp(58px, 5vw, 92px);
  font-weight: 430;
  line-height: .8;
}

.serverPlaytimeHeading > div > span, .serverPlaytimeHeading > div > small {
  color: #0000008c;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 9px;
}

.serverPlaytimeHeading > div > span {
  margin-top: 15px;
}

.serverPlaytimeHeading > div > small {
  margin-top: 28px;
}

.serverPlaytimeRanking {
  background: var(--surface-card);
  color: #f7f5f2;
  border-radius: 28px;
  margin: clamp(70px, 7vw, 118px) 0 0 calc(20% + 5vw);
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.serverPlaytimeRanking > li {
  isolation: isolate;
  grid-template-columns: 48px 58px minmax(170px, 1fr) minmax(150px, .55fr) minmax(160px, .65fr);
  align-items: center;
  gap: 18px;
  min-height: 116px;
  padding: 18px 24px;
  display: grid;
  position: relative;
  box-shadow: inset 0 -1px #ffffff1c;
}

.serverPlaytimeRanking > li:last-child {
  box-shadow: none;
}

.serverPlaytimeRanking > li:before {
  z-index: -2;
  background: linear-gradient(90deg,
    rgb(var(--color-accent-rgb) / .13),
    transparent 58%);
  content: "";
  opacity: 0;
  transition: opacity .18s;
  position: absolute;
  inset: 0;
}

.serverPlaytimeRanking > li:hover:before, .serverPlaytimeRanking > li:focus-within:before {
  opacity: 1;
}

.serverPlaytimeRanking > li > i {
  z-index: -1;
  width: var(--playtime-share);
  background: var(--color-accent);
  content: "";
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.serverPlaytimeRanking > li[data-rank="1"] {
  color: #090909;
  background: #f3f0e9;
  min-height: 148px;
}

.serverPlaytimeRanking > li[data-rank="1"]:before {
  background: radial-gradient(circle at 88% 25%,
    rgb(var(--color-accent-rgb) / .24),
    transparent 35%);
  opacity: 1;
}

.serverPlaytimeRanking > li[data-rank="1"] > i {
  height: 4px;
}

.serverPlaytimeRank {
  color: var(--color-accent);
  letter-spacing: .04em;
  font-size: 13px;
  font-weight: 700;
}

.serverPlaytimeRanking > li[data-rank="1"] .serverPlaytimeRank {
  font-size: 24px;
}

.serverPlaytimeAvatar {
  width: 54px;
  height: 54px;
  color: var(--color-accent);
  background-color: #ffffff17;
  background-position: center;
  background-size: cover;
  border-radius: 17px;
  place-items: center;
  font-size: 19px;
  font-weight: 650;
  display: grid;
  overflow: hidden;
}

.serverPlaytimeRanking > li[data-rank="1"] .serverPlaytimeAvatar {
  background-color: #00000014;
  width: 58px;
  height: 58px;
}

.serverPlaytimeRanking > li > a, .serverPlaytimeRanking > li > div {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.serverPlaytimeRanking > li > a:focus-visible {
  outline-offset: 5px;
  border-radius: 6px;
  outline: 2px solid;
}

.serverPlaytimeRanking > li > a > strong, .serverPlaytimeRanking > li > div > strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(20px, 2vw, 34px);
  font-weight: 430;
  line-height: .95;
  overflow: hidden;
}

.serverPlaytimeRanking > li > a > small, .serverPlaytimeRanking > li > div > small {
  color: #ffffff6b;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.serverPlaytimeRanking > li[data-rank="1"] > a > small, .serverPlaytimeRanking > li[data-rank="1"] > div > small {
  color: #00000075;
}

.serverPlaytimeValue, .serverPlaytimeBreakdown {
  gap: 5px;
  display: grid;
}

.serverPlaytimeValue strong {
  font-size: clamp(19px, 1.7vw, 29px);
  font-weight: 500;
  line-height: 1;
}

.serverPlaytimeValue small, .serverPlaytimeBreakdown small, .serverPlaytimeBreakdown em {
  color: #ffffff6b;
  letter-spacing: .045em;
  text-transform: uppercase;
  font-size: 8px;
  font-style: normal;
}

.serverPlaytimeBreakdown b {
  font-size: 12px;
  font-weight: 570;
}

.serverPlaytimeBreakdown em {
  color: var(--color-accent);
  margin-top: 4px;
  line-height: 1.3;
}

.serverPlaytimeRanking > li[data-rank="1"] .serverPlaytimeValue small, .serverPlaytimeRanking > li[data-rank="1"] .serverPlaytimeBreakdown small {
  color: #00000078;
}

.serverPlaytimeRanking > li[data-rank="1"] .serverPlaytimeBreakdown em {
  color: var(--color-accent);
}

.serverPlaytimeUnavailable {
  background: var(--surface-card);
  color: #f7f5f2;
  border-radius: 28px;
  grid-template-columns: minmax(110px, .35fr) 1fr;
  align-items: end;
  gap: 4vw;
  min-height: 260px;
  margin: clamp(70px, 7vw, 118px) 0 0 calc(20% + 5vw);
  padding: 30px;
  display: grid;
}

.serverPlaytimeUnavailable > span {
  color: var(--color-accent);
  font-size: clamp(58px, 7vw, 110px);
  line-height: .8;
}

.serverPlaytimeUnavailable > p {
  color: #ffffffa8;
  max-width: 630px;
  margin: 0;
  font-size: clamp(20px, 2.4vw, 38px);
  line-height: 1.04;
}

@media (max-width: 1180px) {
  .serverPlaytimeHeading {
    grid-template-columns: 150px minmax(460px, 1fr);
  }

  .serverPlaytimeHeading > div, .serverPlaytimeHeading > p:last-child {
    grid-column: 2;
    max-width: 680px;
  }

  .serverPlaytimeRanking > li {
    grid-template-columns: 42px 54px minmax(150px, 1fr) minmax(140px, .62fr);
  }

  .serverPlaytimeBreakdown {
    grid-area: 2 / 3 / auto / -1;
    align-items: baseline;
    gap: 10px;
    display: flex;
  }
}

@media (max-width: 920px) {
  .serverPlaytimeLeaderboard {
    padding: 100px 28px;
  }

  .serverPlaytimeHeading {
    grid-template-columns: 1fr;
  }

  .serverPlaytimeHeading > div, .serverPlaytimeHeading > p:last-child {
    grid-column: auto;
    max-width: 680px;
  }

  .serverPlaytimeHeading h2 {
    margin-top: 20px;
  }

  .serverPlaytimeHeading > div {
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 7px 18px;
    margin-top: 24px;
  }

  .serverPlaytimeHeading > div > p, .serverPlaytimeHeading > div > small {
    grid-column: 1 / -1;
  }

  .serverPlaytimeHeading > div > span {
    align-self: end;
    margin: 0 0 4px;
  }

  .serverPlaytimeRanking, .serverPlaytimeUnavailable {
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  .serverPlaytimeLeaderboard {
    padding: 82px 20px;
  }

  .serverPlaytimeHeading h2 {
    font-size: clamp(46px, 13.4vw, 66px);
  }

  .serverPlaytimeHeading > div > strong {
    font-size: 54px;
  }

  .serverPlaytimeRanking {
    border-radius: 20px;
    margin-top: 52px;
  }

  .serverPlaytimeRanking > li, .serverPlaytimeRanking > li[data-rank="1"] {
    grid-template-columns: 30px 48px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 19px 16px 22px;
  }

  .serverPlaytimeAvatar, .serverPlaytimeRanking > li[data-rank="1"] .serverPlaytimeAvatar {
    border-radius: 14px;
    width: 46px;
    height: 46px;
  }

  .serverPlaytimeRanking > li > a > strong, .serverPlaytimeRanking > li > div > strong {
    font-size: 20px;
  }

  .serverPlaytimeValue {
    grid-column: 2 / -1;
    margin-top: 7px;
  }

  .serverPlaytimeBreakdown {
    flex-wrap: wrap;
    grid-area: auto / 2 / auto / -1;
  }

  .serverPlaytimeUnavailable {
    border-radius: 20px;
    grid-template-columns: 1fr;
    min-height: 230px;
    margin-top: 52px;
    padding: 24px;
  }
}

.profileSocialEditor {
  background: var(--surface-card);
  border: 0;
  border-radius: 20px;
  margin: 24px 0 18px;
  padding: 24px;
}

.profileSocialEditor legend {
  margin-bottom: 18px;
}

.profileSocialNetworkPicker {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  display: grid !important;
}

.profileSocialNetworkPicker > button {
  background: var(--surface-subcard);
  color: #aaa;
  min-width: 0;
  min-height: 48px;
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 11px;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  display: flex;
  position: relative;
}

.profileSocialNetworkPicker > button:hover {
  background: var(--surface-subcard);
  color: #fff;
}

.profileSocialNetworkPicker > button[data-active="true"] {
  color: #080808;
  background: #f2efe9;
}

.profileSocialNetworkPicker > button > i {
  width: 28px;
  height: 28px;
  color: var(--color-accent);
  background: #ffffff12;
  border-radius: 8px;
  flex: none;
  place-items: center;
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
  display: grid;
}

.profileSocialNetworkPicker > button[data-active="true"] > i {
  background: var(--surface-subcard);
}

.profileSocialNetworkPicker > button > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.profileSocialNetworkPicker > button > b {
  color: #baff45;
  font-size: 8px;
  line-height: 1;
  position: absolute;
  top: 7px;
  right: 8px;
}

.profileSocialActiveEditor {
  background: var(--surface-subcard);
  border-radius: 14px;
  align-items: center;
  min-height: 66px;
  margin-top: 8px;
  padding: 8px;
  grid-template-columns: 42px 105px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  display: grid !important;
}

.profileSocialActiveEditor > i {
  background: var(--color-accent);
  color: #080808;
  border-radius: 10px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  display: grid;
}

.profileSocialActiveEditor > span {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.profileSocialActiveEditor strong {
  color: #fff;
  font-size: 11px;
  font-weight: 520;
}

.profileSocialActiveEditor small {
  color: #696969;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 7px;
}

.profileSocialActiveEditor input {
  background: var(--surface-card);
  color: #fff;
  width: 100%;
  min-width: 0;
  height: 46px;
  font: inherit;
  border: 0;
  border-radius: 10px;
  outline: 0;
  padding: 0 14px;
  font-size: 10px;
}

.profileSocialActiveEditor > button {
  background: var(--surface-subcard-hover);
  color: #aaa;
  min-height: 40px;
  font: inherit;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  padding: 0 11px;
  font-size: 8px;
}

.publicProfileSettings form > button {
  border-radius: 12px;
  width: auto;
  min-width: 230px;
  min-height: 50px;
  margin-left: auto;
}

.maralysWallet {
  background: var(--surface-subcard);
  border: 0;
  border-radius: 28px;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: 8px;
  padding: 8px;
  display: grid;
  overflow: visible;
}

.walletHeader {
  background: linear-gradient(145deg, #2b1109, var(--surface-card) 72%);
  border-radius: 21px;
  flex-direction: column;
  grid-area: 1 / 1;
  justify-content: space-between;
  min-height: 220px;
  padding: 28px;
  display: flex;
}

.walletHeader h2 {
  max-width: 330px;
  margin-top: 18px;
  font-size: clamp(40px, 3.8vw, 58px);
  line-height: .92;
}

.walletHeader > p {
  align-self: flex-start;
}

.walletBalance {
  color: #0a0a0a;
  background: #f2efe9;
  border-radius: 21px;
  grid-area: 2 / 1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: end;
  min-height: 235px;
  padding: 28px;
  display: grid;
}

.walletBalance > span, .walletBalance > small {
  color: #0000007a;
}

.walletBalance > strong {
  color: #0a0a0a;
  margin-top: 14px;
  font-size: clamp(58px, 6.4vw, 94px);
  line-height: .82;
}

.walletBalance > div {
  padding-bottom: 6px;
}

.walletBalance > div i {
  color: var(--color-accent);
  font-size: 10px;
  font-weight: 700;
}

.walletBalance > small {
  margin-top: 18px;
  line-height: 1.45;
}

.walletTopUpLink {
  color: #fff;
  background: var(--color-accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 12px;
  grid-column: 1 / -1;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  margin-top: 18px;
  padding: 0 15px;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.walletTopUpLink b {
  font-size: 15px;
  font-weight: 500;
}

.walletTopUpLink:hover, .walletTopUpLink:focus-visible {
  outline-offset: 2px;
  background: var(--color-accent);
  outline: 2px solid #0a0a0a;
}

.walletBody {
  border: 0;
  grid-area: 1 / 2 / span 2;
  grid-template-rows: auto minmax(240px, 1fr);
  grid-template-columns: 1fr;
  gap: 8px;
  display: grid;
}

.walletTransfer, .walletHistory {
  background: var(--surface-card);
  border: 0;
  border-radius: 21px;
  padding: 28px;
}

.walletTransfer {
  border: 0;
}

.walletSubheading {
  margin-bottom: 24px;
}

.walletSubheading h3 {
  margin-top: 8px;
  font-size: clamp(26px, 2.5vw, 38px);
}

.walletTransfer .accountField input {
  background: var(--surface-subcard);
  border: 0;
  border-radius: 11px;
}

.walletTransfer .accountField input:focus {
  outline: 2px solid rgb(var(--color-accent-rgb) / .72);
  outline-offset: 2px;
}

.walletSendButton {
  border-radius: 11px;
  min-height: 52px;
}

.walletHistoryList {
  max-height: 360px;
}

.walletHistoryList article {
  background: var(--surface-subcard);
  border: 0;
  border-radius: 12px;
  min-height: 72px;
  margin-bottom: 6px;
  padding: 11px 13px;
}

.walletHistoryList article > div:first-child i {
  background: var(--surface-subcard);
  border: 0;
}

@media (max-width: 1180px) {
  .maralysWallet {
    grid-template-columns: 1fr;
  }

  .walletHeader, .walletBalance, .walletBody {
    grid-area: auto / 1;
  }

  .walletHeader {
    min-height: 190px;
  }

  .walletBody {
    grid-template-rows: 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .profileSocialNetworkPicker {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .profileSocialActiveEditor {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
  }

  .profileSocialActiveEditor input {
    grid-column: 1 / -1;
  }

  .walletBody {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .profileSocialEditor {
    padding: 16px;
  }

  .profileSocialEditor legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .profileSocialEditor legend small {
    text-align: left;
  }

  .profileSocialNetworkPicker {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .profileSocialActiveEditor {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  .profileSocialActiveEditor > button {
    grid-column: 1 / -1;
  }

  .publicProfileSettings form > button {
    width: 100%;
  }

  .maralysWallet {
    border-radius: 22px;
    padding: 6px;
  }

  .walletHeader, .walletBalance, .walletTransfer, .walletHistory {
    border-radius: 17px;
    padding: 22px;
  }

  .walletBalance > strong {
    font-size: clamp(56px, 22vw, 82px);
  }

  .walletTransferGrid {
    grid-template-columns: 1fr;
  }

  .walletHistoryList article {
    flex-direction: column;
    align-items: flex-start;
  }

  .walletHistoryList article > div:last-child {
    text-align: left;
    align-items: flex-start;
  }
}

.accountNotifications {
  --notification-accent: var(--color-accent);
  background: var(--surface-subcard);
  color: #f5f2ec;
  border-radius: 28px;
  gap: 0;
  display: grid;
  overflow: hidden;
}

.notificationHeader {
  background: radial-gradient(circle at 86% 8%,
      rgb(var(--color-accent-rgb) / .62),
      transparent 34%),
    linear-gradient(125deg, #17100c 0%, var(--surface-card) 58%, #1c0903 100%);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 30px;
  min-height: 290px;
  padding: clamp(30px, 4vw, 54px);
  display: grid;
}

.notificationHeader > div > span {
  color: var(--color-accent);
  letter-spacing: .1em;
  font-size: 9px;
  font-weight: 760;
}

.notificationHeader h2 {
  letter-spacing: -.025em;
  max-width: 760px;
  margin: 48px 0 0;
  font-size: clamp(42px, 5.5vw, 82px);
  font-weight: 430;
  line-height: .9;
}

.notificationHeader p {
  color: #ffffff94;
  max-width: 530px;
  margin: 18px 0 0;
  font-size: 11px;
  line-height: 1.55;
}

.notificationHeader > strong {
  color: #fffffff2;
  letter-spacing: -.06em;
  align-self: start;
  font-size: clamp(54px, 7vw, 106px);
  font-weight: 440;
  line-height: .78;
}

.notificationToolbar {
  background: var(--surface-subcard);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  padding: 12px clamp(22px, 3.2vw, 42px);
  display: flex;
}

.notificationStatusTabs, .notificationToolbarActions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.notificationToolbar button, .notificationCategories button {
  color: #ffffff80;
  min-height: 38px;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 11px;
  padding: 0 14px;
  font-size: 9px;
  font-weight: 690;
}

.notificationToolbar button[data-active="true"], .notificationStatusTabs button[data-active="true"], .notificationCategories button[data-active="true"] {
  color: #0a0a0a;
  background: #f3f0ea;
}

.notificationToolbar button:disabled {
  opacity: .3;
  cursor: default;
}

.notificationStatusTabs button i, .notificationCategories button i {
  background: var(--color-accent);
  color: #fff;
  border-radius: 6px;
  place-items: center;
  min-width: 19px;
  height: 19px;
  margin-left: 7px;
  font-size: 8px;
  font-style: normal;
  display: inline-grid;
}

.notificationPreferences {
  color: #0b0b0b;
  background: #f0ede7;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 74px);
  padding: clamp(28px, 4vw, 48px);
  display: grid;
}

.notificationPreferences h3 {
  letter-spacing: -.025em;
  max-width: 380px;
  margin: 0;
  font-size: clamp(27px, 3.2vw, 48px);
  font-weight: 450;
  line-height: .96;
}

.notificationPreferences p {
  color: #00000080;
  max-width: 410px;
  margin: 16px 0 0;
  font-size: 10px;
  line-height: 1.5;
}

.notificationPreferences > div:last-child {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.notificationPreferences label {
  cursor: pointer;
  background: #0000000e;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 8px 10px 8px 12px;
  display: flex;
}

.notificationPreferences label > span {
  align-items: center;
  gap: 11px;
  font-size: 10px;
  font-weight: 650;
  display: flex;
}

.notificationPreferences label > span i {
  background: var(--surface-subcard);
  width: 34px;
  height: 34px;
  color: var(--color-accent);
  border-radius: 9px;
  place-items: center;
  font-size: 9px;
  font-style: normal;
  display: grid;
}

.notificationPreferences input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
}

.notificationPreferences label > b {
  background: #0000002e;
  border-radius: 999px;
  flex: none;
  width: 38px;
  height: 22px;
  transition: background .18s;
  position: relative;
}

.notificationPreferences label > b:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: transform .18s;
  position: absolute;
  top: 3px;
  left: 3px;
}

.notificationPreferences input:checked + b {
  background: var(--color-accent);
}

.notificationPreferences input:checked + b:after {
  transform: translateX(16px);
}

.notificationCategories {
  background: var(--surface-card);
  scrollbar-width: none;
  gap: 5px;
  padding: 13px clamp(22px, 3.2vw, 42px);
  display: flex;
  overflow-x: auto;
}

.notificationCategories::-webkit-scrollbar {
  display: none;
}

.notificationCategories button {
  background: var(--surface-subcard);
  flex: none;
}

.notificationFeed {
  background: var(--surface-card);
  max-height: 610px;
  padding: 0 clamp(22px, 3.2vw, 42px) 26px;
  display: grid;
  overflow-y: auto;
}

.notificationFeed[data-loading="true"] {
  min-height: 160px;
}

.notificationItem {
  --item-accent: #d8d5ce;
  opacity: .66;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  display: grid;
  box-shadow: inset 0 -1px #ffffff13;
}

.notificationItem[data-unread="true"] {
  opacity: 1;
}

.notificationItem[data-category="news"] {
  --item-accent: var(--color-accent);
}

.notificationItem[data-category="support"] {
  --item-accent: #63d8ff;
}

.notificationItem[data-category="pixel_battle"] {
  --item-accent: #ff4778;
}

.notificationItem[data-category="build"] {
  --item-accent: #a98cff;
}

.notificationItem[data-category="security"] {
  --item-accent: #baff49;
}

.notificationItem[data-category="wallet"] {
  --item-accent: #ffd04a;
}

.notificationItem[data-category="role"] {
  --item-accent: #45e4bd;
}

.notificationItem[data-category="achievement"] {
  --item-accent: #f0b45c;
}

.notificationMark {
  background: color-mix(in srgb,
    var(--item-accent) 16%,
    var(--surface-subcard));
  width: 48px;
  height: 48px;
  color: var(--item-accent);
  border-radius: 14px;
  place-items: center;
  display: grid;
}

.notificationMark span {
  letter-spacing: .04em;
  font-size: 10px;
  font-weight: 800;
}

.notificationCopy {
  min-width: 0;
}

.notificationCopy > span {
  color: var(--item-accent);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 750;
}

.notificationCopy h3 {
  letter-spacing: -.01em;
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 620;
  line-height: 1.15;
}

.notificationCopy p {
  color: #ffffff85;
  max-width: 720px;
  margin: 7px 0 0;
  font-size: 10px;
  line-height: 1.48;
}

.notificationCopy time {
  color: #ffffff47;
  margin-top: 8px;
  font-size: 8px;
  display: block;
}

.notificationActions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.notificationActions a {
  color: #0a0a0a;
  background: #f2efe9;
  border-radius: 12px;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  display: grid;
}

.notificationActions button {
  color: #ffffff57;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 10px;
  font-size: 8px;
}

.notificationEmpty {
  color: #ffffff57;
  justify-content: center;
  align-items: center;
  gap: 24px;
  min-height: 250px;
  display: flex;
}

.notificationEmpty > i {
  color: #ffffff14;
  letter-spacing: -.07em;
  font-size: 70px;
  font-style: normal;
  font-weight: 450;
}

.notificationEmpty h3 {
  color: #ffffffc2;
  margin: 0;
  font-size: 22px;
  font-weight: 520;
}

.notificationEmpty p {
  margin: 7px 0 0;
  font-size: 9px;
}

@media (max-width: 760px) {
  .accountNotifications {
    border-radius: 22px;
  }

  .notificationHeader {
    min-height: 260px;
    padding: 26px 22px;
  }

  .notificationHeader h2 {
    margin-top: 40px;
    font-size: clamp(40px, 12vw, 60px);
  }

  .notificationHeader > strong {
    font-size: 58px;
  }

  .notificationToolbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 18px;
  }

  .notificationToolbarActions {
    justify-content: space-between;
    width: 100%;
  }

  .notificationPreferences {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }

  .notificationPreferences > div:last-child {
    grid-template-columns: 1fr;
  }

  .notificationCategories {
    padding-left: 18px;
    padding-right: 18px;
  }

  .notificationFeed {
    max-height: 560px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .notificationItem {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 13px;
  }

  .notificationMark {
    border-radius: 12px;
    width: 42px;
    height: 42px;
  }

  .notificationActions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .notificationActions a {
    width: 36px;
    height: 36px;
  }
}

.accountPixelBattle {
  background: linear-gradient(115deg,
      rgb(var(--color-accent-rgb) / .94),
      #901100e0 46%,
      #111111fa 82%),
    var(--surface-subcard);
  color: #f7f4ee;
  border-radius: 28px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: clamp(28px, 4vw, 54px);
  display: grid;
  overflow: hidden;
}

.accountPixelBattle > header {
  grid-column: 1 / -1;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  display: flex;
}

.accountPixelBattle > header span {
  letter-spacing: .08em;
  font-size: 9px;
  font-weight: 750;
}

.accountPixelBattle > header h2 {
  letter-spacing: -.04em;
  max-width: 720px;
  margin: 12px 0 0;
  font-size: clamp(38px, 5vw, 78px);
  font-weight: 430;
  line-height: .9;
}

.accountPixelBattle > header a {
  color: #090909;
  background: #f4f1eb;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  min-width: 190px;
  min-height: 52px;
  padding: 0 9px 0 17px;
  font-size: 10px;
  font-weight: 750;
  display: flex;
}

.accountPixelBattle > header a i {
  background: var(--surface-card);
  color: #fff;
  border-radius: 9px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-style: normal;
  display: grid;
}

.accountPixelBattleStats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.accountPixelBattleStats article {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #0a0a0a80;
  border-radius: 16px;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 126px;
  padding: 20px;
  display: flex;
}

.accountPixelBattleStats strong {
  letter-spacing: -.035em;
  font-size: clamp(30px, 3.5vw, 54px);
  font-weight: 470;
}

.accountPixelBattleStats span {
  color: #ffffff8c;
  text-transform: uppercase;
  margin-top: 5px;
  font-size: 8px;
}

.accountPixelBattleRecent {
  grid-template-columns: repeat(3, 36px);
  align-content: end;
  gap: 6px;
  width: 126px;
  display: grid;
}

.accountPixelBattleRecent > span {
  border-radius: 8px;
  width: 36px;
  height: 36px;
  box-shadow: inset 0 0 0 1px #ffffff14;
}

.accountPixelBattleRecent > p {
  color: #ffffff8a;
  grid-column: 1 / -1;
  margin: 0;
  font-size: 9px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .accountPixelBattle {
    border-radius: 22px;
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .accountPixelBattle > header {
    flex-direction: column;
    align-items: flex-start;
  }

  .accountPixelBattle > header h2 {
    font-size: clamp(38px, 12vw, 62px);
  }

  .accountPixelBattle > header a {
    width: 100%;
  }

  .accountPixelBattleStats article {
    min-height: 96px;
    padding: 14px;
  }

  .accountPixelBattleRecent {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: auto;
  }

  .accountPixelBattleRecent > span {
    aspect-ratio: 1;
    width: 100%;
    height: auto;
  }
}

.desktopAppTitlebar {
  z-index: 10000;
  -webkit-app-region: drag;
  -webkit-user-select: none;
  user-select: none;
  background: #08090b;
  border-bottom: 1px solid #ffffff0e;
  justify-content: flex-end;
  align-items: center;
  height: 38px;
  display: flex;
  position: fixed;
  inset: 0 0 auto;
}

.desktopAppTitlebar[data-platform="darwin"] {
  padding: 0 12px 0 78px;
}

.desktopAppTitlebar[data-platform="win32"], .desktopAppTitlebar[data-platform="linux"] {
  padding: 0 142px 0 12px;
}

.desktopAppTitlebar > button {
  color: #ffffffb8;
  min-height: 27px;
  font: inherit;
  cursor: pointer;
  -webkit-app-region: no-drag;
  background: #ffffff0b;
  border: 1px solid #ffffff1c;
  border-radius: 9px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: 9px;
  display: inline-flex;
}

.desktopAppTitlebar > button:hover {
  color: #fff;
  background: #ffffff14;
  border-color: #fff3;
}

.desktopAuthGate {
  width: 100%;
  min-height: calc(100svh - var(--desktop-titlebar-height, 0px));
  background: radial-gradient(circle at 50% 115%, rgb(var(--color-accent-rgb) / .13), transparent 42%),
    var(--surface-body);
  color: #f7f4ef;
  position: relative;
  overflow: auto;
}

.desktopLegalGate {
  min-height: calc(100svh - var(--desktop-titlebar-height, 0px));
  background: var(--surface-body);
}

.desktopAuthGate > .accountClient {
  width: 100%;
  min-height: calc(100svh - var(--desktop-titlebar-height, 0px));
}

.desktopAuthGate .accountClient.isGuest .authExperience {
  min-height: calc(100svh - var(--desktop-titlebar-height, 0px));
  padding-top: max(82px, 7vh);
  padding-bottom: max(28px, 5vh);
}

.desktopAuthGateLoading {
  place-items: center;
  display: grid;
}

.desktopAuthGateLoading > div {
  color: #ffffff73;
  justify-items: center;
  gap: 9px;
  display: grid;
}

.desktopAuthGateLoading > div img {
  border-radius: 12px;
  margin-bottom: 8px;
}

.desktopAuthGateLoading > div strong {
  color: #fff;
  letter-spacing: .12em;
  font-size: 11px;
}

.desktopAuthGateLoading > div span {
  font-size: 9px;
}

.accountClient.isGuest .authExperience {
  background: var(--surface-body);
  place-items: center;
  min-height: calc(100svh - 16px);
  padding: 86px 18px 112px;
  display: grid;
}

.accountClient.isGuest .authExperience:before {
  content: none;
}

.accountClient.isGuest .authSceneGlow, .accountClient.isGuest .authSceneCharacter, .accountClient.isGuest .authSceneIdentity, .accountClient.isGuest .authAfterword {
  display: none;
}

.accountClient.isGuest .authCenter {
  width: min(100%, 500px);
}

.accountClient.isGuest .authCenter:has(.authCard[data-mode="register"]) {
  width: min(100%, 760px);
}

.accountClient.isGuest .authCard {
  background: var(--glass-card-surface);
  width: 100%;
  box-shadow: none;
  border: 1px solid #ffffff14;
  border-radius: 20px;
  padding: clamp(20px, 2.5vw, 26px);
}

.accountClient.isGuest .authCard[data-mode="register"] {
  width: 100%;
  padding: 18px 20px;
}

.accountClient.isGuest .authCard[data-mode="register"] .authPrimarySwitch {
  margin-top: 0;
}

.accountClient.isGuest .authCard[data-mode="register"] .authPrimarySwitch button {
  min-height: 36px;
}

.accountClient.isGuest .authCard[data-mode="register"] .authCardHeading {
  margin: 15px 0 12px;
}

.accountClient.isGuest .authCard[data-mode="register"] .authCardHeading h1 {
  font-size: clamp(30px, 4vw, 37px);
}

.accountClient.isGuest .authCard[data-mode="register"] .authCardHeading p {
  margin-top: 7px;
}

.accountClient.isGuest .authCard[data-mode="register"] .authForm {
  gap: 7px;
}

.accountClient.isGuest .authCard[data-mode="register"] .authFieldGrid {
  gap: 7px 9px;
}

.accountClient.isGuest .authCard[data-mode="register"] .authFieldControl {
  min-height: 48px;
}

.accountClient.isGuest .authCard[data-mode="register"] .authLegalBox {
  padding: 10px 12px;
}

.accountClient.isGuest .authCard[data-mode="register"] .authLegalBox .legalChecks {
  border: 0;
  gap: 5px;
  margin: 0;
  padding: 0;
  display: grid;
}

.accountClient.isGuest .authCard[data-mode="register"] .authSubmit {
  min-height: 44px;
}

.accountClient.isGuest .authPrimarySwitch {
  background: var(--glass-subcard-surface);
  border: 0;
  border-radius: 13px;
  margin-top: 0;
  padding: 4px;
}

.accountClient.isGuest .authPrimarySwitch button {
  color: #ffffff80;
  border-radius: 10px;
  min-height: 40px;
  font-weight: 600;
}

.accountClient.isGuest .authPrimarySwitch button:hover {
  color: #ffffffd1;
}

.accountClient.isGuest .authPrimarySwitch button[data-active="true"] {
  background: var(--surface-subcard-hover);
  box-shadow: none;
  color: #fff;
}

.accountClient.isGuest .authReturn {
  gap: 7px;
  margin-top: 0;
}

.accountClient.isGuest .authReturn svg {
  width: 13px;
  height: 13px;
}

.accountClient.isGuest .authCardHeading {
  text-align: left;
  margin: 24px 0 20px;
}

.accountClient.isGuest .authCardHeading h1 {
  letter-spacing: -.04em;
  margin: 0;
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 500;
  line-height: 1;
}

.accountClient.isGuest .authCardHeading p {
  color: #ffffff75;
  text-wrap: pretty;
  max-width: 520px;
  margin: 11px 0 0;
  font-size: 10px;
}

.accountClient.isGuest .authForm {
  gap: 10px;
}

.accountClient.isGuest .authFieldControl {
  background: var(--glass-subcard-surface);
  min-height: 54px;
  box-shadow: none;
  border-color: #0000;
  border-radius: 13px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 12px;
}

.accountClient.isGuest .authFieldControl:hover {
  background: color-mix(in srgb, var(--glass-subcard-surface), white 5%);
  border-color: #ffffff14;
}

.accountClient.isGuest .authFieldControl:focus-within {
  border-color: rgb(var(--color-accent-rgb) / .64);
  background: color-mix(in srgb, var(--glass-subcard-surface), white 7%);
  box-shadow: 0 0 0 3px rgb(var(--color-accent-rgb) / .1);
  transform: none;
}

.accountClient.isGuest .authReveal {
  color: #ffffff6b;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
}

.accountClient.isGuest .authReveal svg {
  width: 15px;
  height: 15px;
}

.accountClient.isGuest .authSubmit {
  background: var(--color-accent);
  min-height: 48px;
  box-shadow: none;
  text-align: center;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  font-weight: 700;
  display: flex;
}

.accountClient.isGuest .authSubmit:hover:not(:disabled) {
  box-shadow: none;
  background: #ff6840;
  transform: none;
}

.accountClient.isGuest .authLegalBox {
  background: var(--glass-subcard-surface);
  border-color: #0000;
  border-radius: 13px;
}

.accountClient.isGuest .referralRegistration, .accountClient.isGuest .authNotice.accountNotice {
  background: var(--glass-subcard-surface);
  border-color: #0000;
}

.accountClient.isGuest :is(button, a, input):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.accountClient.isAuthenticated {
  background: radial-gradient(circle at 75% 0%,
      rgb(var(--color-accent-rgb) / .08),
      transparent 32%),
    var(--surface-card);
  min-height: 100vh;
  padding: 116px clamp(18px, 3vw, 48px) 72px;
}

.dashboardGrid.accountDashboardV2 {
  gap: 10px;
  align-items: initial;
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 1380px);
  margin: 0 auto;
  display: grid;
}

.accountDashboardHeader {
  background: #0f0f0ff0;
  border: 1px solid #202020;
  border-radius: 24px;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  align-items: center;
  gap: clamp(22px, 4vw, 64px);
  min-height: 132px;
  padding: 24px 28px;
  display: grid;
  box-shadow: 0 24px 80px #0000003d;
}

.accountDashboardPerson {
  align-items: center;
  gap: 18px;
  min-width: 0;
  display: flex;
}

.accountDashboardPerson .accountAvatar {
  background-color: var(--surface-subcard);
  width: 76px;
  height: 76px;
  box-shadow: none;
  border: 1px solid #292929;
  border-radius: 20px;
  flex: 0 0 76px;
  margin: 0;
}

.accountDashboardPerson .accountAvatar:after {
  background: #baff4a;
  border: 4px solid #0f0f0f;
  width: 15px;
  height: 15px;
  bottom: -2px;
  right: -2px;
}

.accountDashboardPerson > div {
  min-width: 0;
}

.accountDashboardPerson > div > span {
  color: var(--color-accent);
  letter-spacing: .12em;
  font-size: 8px;
  font-weight: 760;
}

.accountDashboardPerson h1 {
  color: #f6f3ed;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 7px 0 4px;
  font-size: clamp(25px, 2.4vw, 38px);
  font-weight: 520;
  line-height: 1;
  overflow: hidden;
}

.accountDashboardPerson p {
  color: #717171;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0;
  font-size: 9px;
  display: flex;
  overflow: hidden;
}

.accountDashboardPerson p i {
  background: #444;
  border-radius: 50%;
  flex: 0 0 3px;
  width: 3px;
  height: 3px;
}

.accountDashboardState {
  align-items: center;
  gap: 8px;
  display: flex;
}

.accountDashboardState span {
  color: #999;
  text-transform: uppercase;
  border: 1px solid #242424;
  border-radius: 99px;
  align-items: center;
  gap: 8px;
  min-height: 35px;
  padding: 0 12px;
  font-size: 8px;
  font-weight: 650;
  display: flex;
}

.accountDashboardState i {
  background: #575757;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.accountDashboardState i[data-active="true"] {
  background: #baff4a;
  box-shadow: 0 0 14px #baff4a61;
}

.accountDashboardActions {
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  display: flex;
}

.accountDashboardActions a, .accountDashboardActions button {
  color: #8b8b8b;
  min-height: 38px;
  font: inherit;
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  font-size: 8px;
  font-weight: 650;
  display: flex;
}

.accountDashboardActions a:first-child {
  color: #0a0a0a;
  background: #f2efe9;
}

.accountDashboardActions a:first-child span, .accountDashboardActions button {
  color: var(--color-accent);
}

.accountDashboardActions a:hover, .accountDashboardActions button:hover {
  color: #fff;
}

.accountDashboardActions a:first-child:hover {
  color: #0a0a0a;
  background: #fff;
}

.accountDashboardNav {
  z-index: 20;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  scrollbar-width: none;
  background: #0a0a0ae0;
  border: 1px solid #1c1c1c;
  border-radius: 17px;
  gap: 4px;
  padding: 6px;
  display: flex;
  position: sticky;
  top: 10px;
  overflow-x: auto;
  box-shadow: 0 15px 50px #0000004d;
}

.accountDashboardNav::-webkit-scrollbar {
  display: none;
}

.accountDashboardNav button {
  color: #676767;
  min-width: max-content;
  min-height: 42px;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 11px;
  flex: 1 0 auto;
  padding: 0 18px;
  font-size: 9px;
  font-weight: 680;
  transition: background .16s, color .16s;
}

.accountDashboardNav button:hover {
  color: #d9d6d0;
}

.accountDashboardNav button[data-active="true"] {
  color: #090909;
  background: #f1eee8;
}

.accountDashboardV2 .accountDashboard {
  min-width: 0;
  margin: 0;
  display: block;
}

.accountOverview, .accountViewStack {
  gap: 10px;
  display: grid;
}

.accountOverviewIntro {
  background: radial-gradient(circle at 92% 12%,
      rgb(var(--color-accent-rgb) / .18),
      transparent 34%),
    #f0ede7;
  color: #0a0a0a;
  border-radius: 24px;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  min-height: 210px;
  padding: clamp(30px, 4.5vw, 62px);
  display: flex;
}

.accountOverviewIntro span {
  color: var(--color-accent);
  letter-spacing: .12em;
  font-size: 8px;
  font-weight: 760;
}

.accountOverviewIntro h2 {
  letter-spacing: -.05em;
  margin: 20px 0 0;
  font-size: clamp(40px, 5vw, 74px);
  font-weight: 460;
  line-height: .9;
}

.accountOverviewIntro p {
  color: #0000007a;
  text-align: right;
  max-width: 280px;
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
}

.accountOverviewMetrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.accountOverviewMetrics button {
  background: var(--surface-subcard);
  color: #f2efe9;
  min-width: 0;
  min-height: 156px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid #202020;
  border-radius: 19px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 21px;
  transition: border-color .16s, transform .16s, background .16s;
  display: flex;
}

.accountOverviewMetrics button:hover {
  background: var(--surface-subcard);
  border-color: #3b3b3b;
  transform: translateY(-2px);
}

.accountOverviewMetrics button:first-child {
  background: var(--color-accent);
  color: #090909;
  border-color: #0000;
}

.accountOverviewMetrics span {
  color: #727272;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 750;
}

.accountOverviewMetrics button:first-child span, .accountOverviewMetrics button:first-child small {
  color: #0000008a;
}

.accountOverviewMetrics strong {
  letter-spacing: -.04em;
  margin-top: auto;
  font-size: clamp(27px, 3vw, 44px);
  font-weight: 500;
  line-height: 1;
}

.accountOverviewMetrics small {
  color: #696969;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  margin-top: 9px;
  font-size: 8px;
  line-height: 1.4;
  display: block;
  overflow: hidden;
}

.accountNotifications[data-compact="true"] {
  background: var(--surface-subcard);
  border: 1px solid #1f1f1f;
  border-radius: 24px;
}

.accountNotifications[data-compact="true"] .notificationHeader {
  background: none;
  align-items: center;
  min-height: 0;
  padding: 24px 26px 18px;
}

.notificationHeaderEnd {
  align-items: center;
  gap: 12px;
  display: flex;
}

.notificationHeaderEnd > strong {
  color: #f1eee8;
  letter-spacing: -.055em;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 480;
  line-height: 1;
}

.notificationHeaderEnd > button {
  color: #aaa;
  min-height: 38px;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  font-size: 8px;
  font-weight: 650;
  display: flex;
}

.notificationHeaderEnd > button i {
  color: var(--color-accent);
  font-style: normal;
}

.accountNotifications[data-compact="true"] .notificationHeader h2 {
  margin: 7px 0 0;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1;
}

.accountNotifications[data-compact="true"] .notificationFeed {
  background: none;
  max-height: none;
  padding: 0 26px 10px;
}

.accountNotifications[data-compact="true"] .notificationItem {
  min-height: 76px;
  padding: 13px 0;
}

.accountNotifications[data-compact="true"] .notificationCopy h3 {
  font-size: 13px;
}

.accountNotifications[data-compact="true"] .notificationMark {
  border-radius: 11px;
  width: 40px;
  height: 40px;
}

.accountNotifications[data-compact="true"] .notificationItem {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 13px;
}

.accountNotifications[data-compact="true"] .notificationActions a {
  border-radius: 9px;
  width: 34px;
  height: 34px;
}

.accountDashboardV2 .publicProfileSettings, .accountDashboardV2 .referralCenter, .accountDashboardV2 .playtimeCenter, .accountDashboardV2 .accountPixelBattle, .accountDashboardV2 .maralysWallet, .accountDashboardV2 .accountCard, .accountDashboardV2 .accountNotifications:not([data-compact="true"]) {
  box-shadow: none;
  border: 1px solid #202020;
  border-radius: 24px;
}

.accountDashboardV2 .publicProfileSettings {
  background: var(--surface-subcard);
  padding: clamp(25px, 3.2vw, 42px);
}

.accountDashboardV2 .publicProfileSettings:after {
  opacity: .08;
}

.accountDashboardV2 .publicProfileSettings > header {
  align-items: center;
  margin-bottom: 26px;
}

.accountDashboardV2 .publicProfileSettings > header h2 {
  text-transform: none;
  margin: 8px 0 9px;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
}

.accountDashboardV2 .publicProfileSettings > header p {
  max-width: 480px;
}

.accountDashboardV2 .accountSections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  display: grid;
}

.accountDashboardV2 .accountCard {
  background: var(--surface-subcard);
  color: #f1eee8;
  min-height: 0;
  padding: clamp(24px, 3vw, 38px);
}

.accountDashboardV2 .accountCardHeading {
  margin-bottom: 24px;
}

.accountDashboardV2 .accountCardHeading span {
  color: var(--color-accent);
}

.accountDashboardV2 .accountCardHeading h2 {
  color: #f1eee8;
  letter-spacing: -.03em;
  text-transform: none;
  margin-top: 8px;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 500;
}

.accountDashboardV2 .accountCardWide {
  grid-column: 1 / -1;
}

.accountDashboardV2 .accountGameAccess {
  width: 100%;
}

.accountDashboardV2 .accountCard .accountField > span {
  color: #8a8a8a;
}

.accountDashboardV2 .accountCard .accountField input, .accountDashboardV2 .accountCard .accountField select {
  background: var(--surface-subcard);
  color: #f1eee8;
  border-color: #262626;
}

.accountDashboardV2 .accountCard .accountMuted, .accountDashboardV2 .accountCard .accountHint {
  color: #777;
}

.accountDashboardV2 .accountCard .accountForm h3 {
  color: #f1eee8;
}

.accountDashboardV2 .playtimeCenter, .accountDashboardV2 .referralCenter {
  background: var(--surface-subcard);
  overflow: hidden;
}

.accountDashboardV2 .playtimeCenter > header, .accountDashboardV2 .referralCenter > header {
  background: var(--surface-subcard);
  min-height: 0;
  padding: clamp(28px, 3.4vw, 44px);
}

.accountDashboardV2 .playtimeCenter > header h2, .accountDashboardV2 .referralCenter > header h2 {
  text-transform: none;
  margin: 9px 0;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
}

.accountDashboardV2 .playtimeTotals, .accountDashboardV2 .referralStats {
  gap: 1px;
}

.accountDashboardV2 .accountPixelBattle {
  background: linear-gradient(125deg,
    var(--color-accent),
    #701d0c 54%,
    var(--surface-subcard) 100%);
  padding: clamp(28px, 3.4vw, 44px);
}

.accountDashboardV2 .accountPixelBattle > header h2 {
  margin-top: 7px;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
}

.accountDashboardV2 .accountPixelBattleStats article {
  min-height: 105px;
}

.accountSecuritySummary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.accountSecuritySummary > div {
  background: var(--surface-subcard);
  border: 1px solid #202020;
  border-radius: 17px;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  min-height: 94px;
  padding: 20px;
  display: flex;
}

.accountSecuritySummary span {
  color: #666;
  text-transform: uppercase;
  font-size: 8px;
}

.accountSecuritySummary strong {
  color: #f0ede7;
  font-size: 22px;
  font-weight: 520;
}

.accountSecurityGrid .sessionList {
  max-height: 520px;
  padding-right: 4px;
  overflow-y: auto;
}

.accountSecurityGrid .sessionList article {
  background: var(--surface-subcard);
  border-radius: 13px;
}

.accountSecurityGrid .sessionList article span {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 560px;
  overflow: hidden;
}

.accountDashboardV2 :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (max-width: 1120px) {
  .accountDashboardHeader {
    grid-template-columns: minmax(260px, 1fr) auto;
  }

  .accountDashboardState {
    justify-content: flex-end;
  }

  .accountDashboardActions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .accountDashboardActions a, .accountDashboardActions button {
    background: var(--surface-subcard);
  }

  .accountOverviewMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .accountClient.isGuest .authExperience {
    padding: 82px 10px 104px;
  }

  .accountClient.isGuest .authExperience:has(.authCard[data-mode="register"]) {
    min-height: calc(100svh - 16px);
  }

  .accountClient.isGuest .authCard[data-mode="register"] {
    padding: 18px 15px 22px;
  }

  .accountClient.isGuest .authCard {
    border-radius: 19px;
    padding: 19px 15px 23px;
  }

  .accountClient.isGuest .authCardHeading {
    margin-top: 28px;
  }

  .accountClient.isGuest .authCardHeading h1 {
    font-size: clamp(32px, 10vw, 42px);
  }

  .accountClient.isGuest .authFieldControl {
    min-height: 58px;
  }

  .accountClient.isAuthenticated {
    padding: 88px 12px 48px;
  }

  .dashboardGrid.accountDashboardV2 {
    gap: 7px;
  }

  .accountDashboardHeader {
    border-radius: 20px;
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
    padding: 20px;
  }

  .accountDashboardPerson .accountAvatar {
    border-radius: 17px;
    flex-basis: 62px;
    width: 62px;
    height: 62px;
  }

  .accountDashboardPerson h1 {
    font-size: 27px;
  }

  .accountDashboardPerson p {
    max-width: calc(100vw - 120px);
  }

  .accountDashboardState {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .accountDashboardActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .accountDashboardActions a, .accountDashboardActions button {
    justify-content: center;
  }

  .accountDashboardNav {
    border-radius: 14px;
    top: 6px;
  }

  .accountDashboardNav button {
    min-height: 40px;
    padding: 0 15px;
  }

  .accountOverviewIntro {
    border-radius: 20px;
    flex-direction: column;
    align-items: flex-start;
    min-height: 190px;
    padding: 28px 23px;
  }

  .accountOverviewIntro h2 {
    margin-top: 16px;
    font-size: clamp(38px, 12vw, 57px);
  }

  .accountOverviewIntro p {
    text-align: left;
    max-width: none;
  }

  .accountOverviewMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .accountOverviewMetrics button {
    border-radius: 16px;
    min-height: 132px;
    padding: 17px;
  }

  .accountOverviewMetrics strong {
    font-size: clamp(25px, 8vw, 36px);
  }

  .accountNotifications[data-compact="true"] {
    border-radius: 20px;
  }

  .accountNotifications[data-compact="true"] .notificationHeader {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px 20px 12px;
  }

  .notificationHeaderEnd {
    justify-content: space-between;
  }

  .accountNotifications[data-compact="true"] .notificationFeed {
    padding: 0 20px 8px;
  }

  .accountNotifications[data-compact="true"] .notificationItem {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .accountNotifications[data-compact="true"] .notificationActions {
    grid-column: auto;
  }

  .accountDashboardV2 .accountSections {
    grid-template-columns: 1fr;
  }

  .accountDashboardV2 .accountCardWide {
    grid-column: auto;
  }

  .accountDashboardV2 .publicProfileSettings, .accountDashboardV2 .accountCard, .accountDashboardV2 .accountPixelBattle {
    border-radius: 20px;
  }

  .accountDashboardV2 .publicProfileSettings > header {
    flex-direction: column;
    align-items: flex-start;
  }

  .accountDashboardV2 .publicProfileSettings > header > a {
    justify-content: space-between;
    width: 100%;
  }

  .accountSecuritySummary {
    grid-template-columns: 1fr;
  }

  .accountSecuritySummary > div {
    min-height: 74px;
  }

  .accountDashboardV2 .notificationHeader:not(.accountNotifications[data-compact="true"] .notificationHeader) {
    min-height: 220px;
  }
}

@media (max-width: 440px) {
  .accountOverviewMetrics {
    grid-template-columns: 1fr;
  }

  .accountOverviewMetrics button {
    min-height: 118px;
  }

  .accountDashboardActions {
    grid-template-columns: 1fr 1fr;
  }

  .accountDashboardState span {
    padding: 0 10px;
  }

  .accountNotifications[data-compact="true"] .notificationItem {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .accountNotifications[data-compact="true"] .notificationActions {
    grid-column: 2;
  }
}

.adminPixelBattle {
  gap: 9px;
  display: grid;
}

.adminPixelHero, .adminPixelLive, .adminPixelEditor, .adminPixelModeration, .adminPixelReports {
  background: var(--surface-subcard);
  border-radius: 28px;
}

.adminPixelHero {
  background: radial-gradient(circle at 92% 8%,
      rgb(var(--color-accent-rgb) / .9),
      #7a0c0085 28%,
      transparent 56%),
    var(--surface-card);
  grid-template-columns: minmax(0, 1fr) minmax(330px, .52fr);
  align-items: end;
  gap: 40px;
  min-height: 380px;
  padding: clamp(34px, 5vw, 72px);
  display: grid;
}

.adminPixelHero p, .adminPixelLiveCopy > p, .adminPixelEditor > header p, .adminPixelModeration > header p, .adminPixelReports > header p {
  color: var(--color-accent);
  letter-spacing: .1em;
  margin: 0;
  font-size: 8px;
  font-weight: 750;
}

.adminPixelHero h2 {
  letter-spacing: -.035em;
  max-width: 800px;
  margin: 35px 0 18px;
  font-size: clamp(66px, 8vw, 128px);
  font-weight: 360;
  line-height: .78;
}

.adminPixelHero > div:first-child > span {
  color: #ffffff85;
  max-width: 520px;
  font-size: 12px;
  line-height: 1.5;
  display: block;
}

.adminPixelMetrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.adminPixelMetrics article {
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  background: #0505058a;
  border-radius: 15px;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 132px;
  padding: 18px;
  display: flex;
}

.adminPixelMetrics strong {
  font-size: clamp(26px, 3vw, 46px);
  font-weight: 420;
}

.adminPixelMetrics span {
  color: #ffffff73;
  text-transform: uppercase;
  margin-top: 7px;
  font-size: 7px;
}

.adminPixelSeasonPicker {
  background: var(--surface-subcard);
  border-radius: 21px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 5px;
  padding: 8px;
  display: grid;
}

.adminPixelSeasonPicker button {
  background: var(--surface-subcard);
  color: #ffffffb8;
  cursor: pointer;
  text-align: left;
  border-radius: 15px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 100px;
  padding: 17px;
  display: flex;
}

.adminPixelSeasonPicker button[data-active="true"] {
  color: #090909;
  background: #f3f0e9;
}

.adminPixelSeasonPicker span, .adminPixelSeasonPicker small {
  text-transform: uppercase;
  opacity: .5;
  font-size: 7px;
}

.adminPixelSeasonPicker strong {
  margin: 8px 0 5px;
  font-size: 18px;
  font-weight: 520;
}

.adminPixelSeasonPicker .adminPixelNewSeason {
  background: var(--color-accent);
  color: #080808;
}

.adminPixelLive {
  grid-template-columns: minmax(360px, .85fr) minmax(360px, 1.15fr);
  gap: 9px;
  padding: 9px;
  display: grid;
}

.adminPixelPreview {
  background: linear-gradient(90deg, #ffffff06 1px, transparent 1px),
    linear-gradient(#ffffff06 1px, transparent 1px),
    var(--surface-card);
  background-size: 10px 10px;
  border-radius: 22px;
  min-height: 420px;
  position: relative;
  overflow: hidden;
}

.adminPixelPreview img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.adminPixelPreview > span {
  color: #b8ff36;
  background: #080808c2;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 7px;
  font-weight: 750;
  position: absolute;
  top: 14px;
  left: 14px;
}

.adminPixelLiveCopy {
  background: linear-gradient(135deg, var(--surface-subcard), #120704);
  border-radius: 22px;
  flex-direction: column;
  padding: clamp(28px, 4vw, 58px);
  display: flex;
}

.adminPixelLiveCopy h3, .adminPixelEditor > header h3, .adminPixelModeration > header h3, .adminPixelReports > header h3 {
  letter-spacing: -.035em;
  margin: 14px 0 0;
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 360;
  line-height: .88;
}

.adminPixelLiveCopy dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: auto 0 24px;
  display: grid;
}

.adminPixelLiveCopy dl div {
  background: #ffffff0b;
  border-radius: 12px;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 72px;
  padding: 13px;
  display: flex;
}

.adminPixelLiveCopy dt {
  color: #ffffff59;
  text-transform: uppercase;
  font-size: 7px;
}

.adminPixelLiveCopy dd {
  margin: 7px 0 0;
  font-size: 15px;
}

.adminPixelLifecycle {
  gap: 8px;
  display: flex;
}

.adminPixelEditor, .adminPixelModeration, .adminPixelReports {
  padding: clamp(28px, 4vw, 54px);
}

.adminPixelEditor > header, .adminPixelModeration > header, .adminPixelReports > header {
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 40px;
  display: flex;
}

.adminPixelEditor > header > span, .adminPixelModeration > header > span {
  color: #ffffff61;
  text-transform: uppercase;
  font-size: 9px;
}

.adminPixelFields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.adminPixelFields label, .adminPixelLocales label, .adminPixelModerationGrid label {
  background: var(--surface-subcard);
  border-radius: 11px;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-height: 68px;
  padding: 10px 13px;
  display: flex;
}

.adminPixelFields label > span, .adminPixelLocales label > span, .adminPixelModerationGrid label > span {
  color: #ffffff59;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 7px;
}

.adminPixelFields input, .adminPixelLocales :is(input, textarea), .adminPixelModerationGrid input, .adminPixelReports :is(input, select) {
  box-sizing: border-box;
  color: #fff;
  width: 100%;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.adminPixelFields input[type="color"] {
  border-radius: 7px;
  height: 30px;
  padding: 0;
}

.adminPixelLocales {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 28px 0;
  display: grid;
}

.adminPixelLocales fieldset {
  background: var(--surface-card);
  border: 0;
  border-radius: 17px;
  gap: 6px;
  padding: 20px;
  display: grid;
}

.adminPixelLocales legend {
  color: var(--color-accent);
  padding: 0 0 12px;
  font-size: 8px;
  font-weight: 750;
}

.adminPixelLocales textarea {
  resize: vertical;
  line-height: 1.45;
}

.adminPixelModerationGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.adminPixelModerationGrid > form {
  background: var(--surface-card);
  border-radius: 18px;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 20px;
  display: flex;
}

.adminPixelModerationGrid h4, .adminPixelLocks h4 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 480;
}

.adminPixelModerationGrid p {
  color: #fff6;
  font-size: 9px;
  line-height: 1.45;
}

.adminPixelModerationGrid .adminButton {
  margin-top: auto;
}

.adminPixelCoordinates {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  display: grid;
}

.adminPixelLocks {
  margin-top: 28px;
}

.adminPixelLocks > p {
  color: #ffffff61;
  font-size: 10px;
}

.adminPixelLocks article {
  background: var(--surface-card);
  border-radius: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  margin-top: 5px;
  padding: 13px 16px;
  display: grid;
}

.adminPixelLocks article > div {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.adminPixelLocks strong {
  font-size: 11px;
}

.adminPixelLocks :is(span, small) {
  color: #ffffff61;
  font-size: 8px;
}

.adminPixelLocks button {
  background: var(--surface-subcard-hover);
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 8px;
}

.adminPixelReports > header > strong {
  color: #fff3;
  font-size: 70px;
  font-weight: 380;
}

.adminPixelReports > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.adminPixelReports article {
  background: var(--surface-card);
  border-radius: 17px;
  padding: 20px;
}

.adminPixelReports article[data-status="open"] {
  background: linear-gradient(135deg, #26130c, var(--surface-card) 70%);
}

.adminPixelReports article > header {
  color: #ffffff61;
  text-transform: uppercase;
  justify-content: space-between;
  font-size: 8px;
  display: flex;
}

.adminPixelReports article h4 {
  margin: 28px 0 8px;
  font-size: 24px;
  font-weight: 440;
}

.adminPixelReports article > p {
  color: #ffffff80;
  font-size: 10px;
}

.adminPixelReports article form {
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 5px;
  margin-top: 18px;
  display: grid;
}

.adminPixelReports article form :is(select, input) {
  background: var(--surface-subcard);
  border-radius: 9px;
  min-height: 42px;
  padding: 0 11px;
}

@media (max-width: 1120px) {
  .adminPixelHero, .adminPixelLive {
    grid-template-columns: 1fr;
  }

  .adminPixelFields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminPixelModerationGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .adminPixelHero, .adminPixelEditor, .adminPixelModeration, .adminPixelReports {
    border-radius: 21px;
    padding: 22px;
  }

  .adminPixelHero {
    min-height: 410px;
  }

  .adminPixelHero h2 {
    font-size: clamp(62px, 19vw, 98px);
  }

  .adminPixelLive {
    grid-template-columns: 1fr;
  }

  .adminPixelPreview {
    min-height: 310px;
  }

  .adminPixelLiveCopy {
    min-height: 350px;
    padding: 26px;
  }

  .adminPixelEditor > header, .adminPixelModeration > header, .adminPixelReports > header {
    flex-direction: column;
    align-items: flex-start;
  }

  .adminPixelFields, .adminPixelLocales, .adminPixelReports > div, .adminPixelReports article form {
    grid-template-columns: 1fr;
  }
}

.articleStudioPage {
  background: var(--surface-card);
}

.articleStudioPage .articleStudioTop {
  background: radial-gradient(circle at 78% 125%,
      rgb(var(--color-accent-rgb) / .48),
      transparent 38%),
    var(--surface-card);
  border: 0;
  border-radius: 0 0 34px 34px;
  min-height: 300px;
  margin: 0;
}

.articleStudioPage .articleStudioTop > div:last-child {
  bottom: 42px;
  left: 4.25vw;
  right: 4.25vw;
}

.articleStudioPage .articleStudioTop > div:last-child > span {
  color: var(--color-accent);
  letter-spacing: .1em;
  font-size: 8px;
  font-weight: 700;
}

.articleStudioPage .articleStudioTop h1 {
  letter-spacing: -.018em;
  max-width: none;
  margin-top: 14px;
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 380;
  line-height: .9;
}

.articleStudioPage .articleStudioWorkspace {
  padding: clamp(28px, 4vw, 64px) 4.25vw clamp(90px, 10vw, 150px);
}

.articleStudioPage .articleEditor {
  max-width: 1540px;
}

.articleStudioPage .articleEditorInfo, .articleStudioPage .articleEditorRejection {
  border: 0;
  border-radius: 13px;
  margin: 0 0 8px;
  padding: 15px 18px;
}

.articleComposeForm {
  background: var(--surface-card);
  border-radius: 30px;
  overflow: hidden;
}

.articleComposeBar {
  z-index: 8;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #121212f0;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 10px 12px 10px 24px;
  display: grid;
  position: sticky;
  top: 0;
}

.articleComposeBar > a {
  color: #ffffffa8;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
}

.articleComposeBar > span {
  color: #787878;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 8px;
}

.articleComposeBar > div {
  justify-content: flex-end;
  gap: 6px;
  display: flex;
}

.articleComposeBar button {
  background: var(--surface-subcard-hover);
  color: #f4f1eb;
  min-height: 48px;
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 0 18px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.articleComposeBar button:last-child {
  background: var(--color-accent);
  color: #080808;
  justify-content: space-between;
  min-width: 205px;
}

.articleComposeBar button i {
  font-style: normal;
}

.articleComposeBar button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.articleComposeLead {
  grid-template-columns: minmax(0, 1fr) minmax(260px, .32fr);
  gap: 26px 6vw;
  padding: clamp(45px, 6vw, 94px) clamp(24px, 5vw, 78px) clamp(42px, 5vw, 72px);
  display: grid;
}

.articleComposeCategory {
  background: var(--surface-subcard);
  border-radius: 10px;
  grid-column: 1 / -1;
  align-items: center;
  gap: 12px;
  width: fit-content;
  min-height: 40px;
  padding: 0 13px;
  display: flex;
}

.articleComposeCategory span {
  color: #6f6f6f;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 7px;
}

.articleComposeCategory select {
  color: #fff;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  font-size: 9px;
  font-weight: 600;
}

.articleComposeTitle, .articleComposeExcerpt {
  flex-direction: column;
  min-width: 0;
  display: flex;
  position: relative;
}

.articleComposeTitle > span, .articleComposeExcerpt > span {
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.articleComposeTitle textarea, .articleComposeExcerpt textarea {
  color: #f4f1eb;
  width: 100%;
  font: inherit;
  resize: none;
  background: none;
  border: 0;
  outline: 0;
}

.articleComposeTitle textarea {
  letter-spacing: -.025em;
  min-height: 2em;
  font-size: clamp(50px, 6.5vw, 108px);
  font-weight: 370;
  line-height: .87;
}

.articleComposeTitle textarea::placeholder {
  color: #333;
}

.articleComposeExcerpt {
  align-self: end;
  padding-bottom: 9px;
}

.articleComposeExcerpt textarea {
  color: #a29f99;
  font-size: 14px;
  line-height: 1.55;
}

.articleComposeExcerpt textarea::placeholder {
  color: #454545;
}

.articleComposeExcerpt small {
  color: #4f4f4f;
  text-align: right;
  margin-top: 9px;
  font-size: 8px;
}

.articleComposeBody {
  background: var(--surface-card);
  border-radius: 24px;
  min-width: 0;
  margin: 0 12px;
  overflow: hidden;
}

.articleComposeBody > header {
  background: var(--surface-subcard);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  padding: 8px 12px;
  display: flex;
}

.articleComposeBody > header > div {
  gap: 4px;
  display: flex;
}

.articleComposeBody > header button {
  color: #6f6f6f;
  min-height: 42px;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  padding: 0 17px;
  font-size: 9px;
  font-weight: 650;
}

.articleComposeBody > header button[aria-selected="true"] {
  color: #0b0b0b;
  background: #f1eee8;
}

.articleComposeBody > header > span {
  color: #5c5c5c;
  text-transform: uppercase;
  padding-right: 9px;
  font-size: 8px;
}

.articleComposeBody .markdownToolbar {
  gap: 4px;
  margin: 0;
  padding: 12px 14px 0;
}

.articleComposeBody .markdownToolbar button {
  background: var(--surface-subcard);
  color: #969696;
  border: 0;
  border-radius: 8px;
  min-width: 38px;
  height: 34px;
}

.articleComposeBody .markdownToolbar button:hover {
  background: var(--color-accent);
  color: #080808;
}

.articleComposeBody .markdownTextarea {
  background: var(--surface-card);
  color: #e8e5df;
  border: 0;
  border-radius: 0;
  min-height: 640px;
  padding: clamp(24px, 4vw, 58px);
  font: 14px / 1.78 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.articleComposeBody .markdownTextarea::placeholder {
  color: #3f3f3f;
}

.articleComposeBody .articlePreviewPaper {
  color: #0b0b0b;
  background: #f0eee8;
  border: 0;
  border-radius: 0;
  min-height: 690px;
  max-height: none;
  padding: clamp(30px, 5vw, 82px);
}

.articleComposeBody .articlePreviewPaper .markdownContent {
  color: #111;
  max-width: 860px;
  margin: 0 auto;
}

.articleComposeBody .articlePreviewPaper .markdownContent :is(h1, h2, h3, p, li, blockquote) {
  color: inherit;
}

.articlePreviewEmpty {
  color: #aaa69e;
  place-items: center;
  min-height: 520px;
  margin: 0;
  font-size: 14px;
  display: grid;
}

.articleComposeSettings {
  background: var(--surface-subcard);
  border-radius: 19px;
  margin: 12px;
}

.articleComposeSettings summary {
  color: #aaa;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  min-height: 68px;
  padding: 0 22px;
  font-size: 10px;
  font-weight: 600;
  list-style: none;
  display: flex;
}

.articleComposeSettings summary::-webkit-details-marker {
  display: none;
}

.articleComposeSettings summary i {
  background: var(--surface-subcard-hover);
  color: #fff;
  border-radius: 9px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 17px;
  font-style: normal;
  transition: transform .18s;
  display: grid;
}

.articleComposeSettings[open] summary i {
  transform: rotate(45deg);
}

.articleComposeSettings > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
  display: grid;
}

.articleComposeSettings .articleEditorField {
  background: var(--surface-card);
  border-radius: 12px;
  align-content: center;
  min-height: 82px;
  padding: 12px 14px;
}

.articleComposeSettings .articleEditorField.wide {
  grid-column: 1 / -1;
}

.articleComposeSettings .articleEditorField :is(input, textarea) {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.articleComposeSettings .articleEditorField textarea {
  min-height: 64px;
}

@media (max-width: 900px) {
  .articleComposeBar {
    grid-template-columns: 1fr auto;
  }

  .articleComposeBar > span {
    display: none;
  }

  .articleComposeLead {
    grid-template-columns: 1fr;
  }

  .articleComposeExcerpt {
    max-width: 650px;
  }
}

@media (max-width: 620px) {
  .articleStudioPage .articleStudioTop {
    border-radius: 0 0 24px 24px;
    min-height: 230px;
  }

  .articleStudioPage .articleStudioTop > div:last-child {
    bottom: 30px;
    left: 20px;
    right: 20px;
  }

  .articleStudioPage .articleStudioTop h1 {
    font-size: clamp(42px, 13vw, 62px);
  }

  .articleStudioPage .articleStudioWorkspace {
    padding: 16px 8px 90px;
  }

  .articleComposeForm {
    border-radius: 22px;
  }

  .articleComposeBar {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 16px;
    position: static;
  }

  .articleComposeBar > a {
    padding: 7px 2px;
  }

  .articleComposeBar > div {
    grid-template-columns: .75fr 1.25fr;
    display: grid;
  }

  .articleComposeBar button, .articleComposeBar button:last-child {
    min-width: 0;
    min-height: 50px;
    padding: 0 13px;
  }

  .articleComposeLead {
    gap: 25px;
    padding: 42px 20px 38px;
  }

  .articleComposeTitle textarea {
    font-size: clamp(46px, 14vw, 68px);
  }

  .articleComposeExcerpt textarea {
    font-size: 13px;
  }

  .articleComposeBody {
    border-radius: 18px;
    margin: 0 6px;
  }

  .articleComposeBody > header {
    padding: 7px;
  }

  .articleComposeBody .markdownToolbar {
    padding: 9px 9px 0;
  }

  .articleComposeBody .markdownToolbar button {
    flex: 1 0 38px;
    padding: 0 7px;
  }

  .articleComposeBody .markdownTextarea {
    min-height: 560px;
    padding: 22px 17px;
    font-size: 13px;
  }

  .articleComposeBody .articlePreviewPaper {
    min-height: 600px;
    padding: 35px 20px;
  }

  .articleComposeSettings {
    margin: 6px;
  }

  .articleComposeSettings > div {
    grid-template-columns: 1fr;
  }

  .articleComposeSettings .articleEditorField.wide {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .pageShell, .pageShell > section, .pageShell > article, .pageShell > footer, .pageShell :is(section, article, header, footer, nav, aside, form, fieldset, div) {
    min-width: 0;
  }

  .pageShell :is(h1, h2, h3, h4, p, blockquote, li, dd, dt, label, strong, span), .pageShell :is(img, video, iframe) {
    max-width: 100%;
  }

  .pageShell :is(input, textarea, select, button) {
    min-width: 0;
  }

  .playSteps > li, .playSteps > .playServerStep {
    grid-template-columns: 42px minmax(0, 1fr);
    width: 100%;
  }

  .playStepCopy, .playStepAction, .playServerOptions, .playServerOptions > button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .playServerOptions {
    grid-column: 1 / -1;
  }

  .minecraftFoundation, .minecraftFoundationBody, .minecraftSectionHeading, .serverOverviewSection, .serverOverviewCopy, .serverFeatureGrid, .serversRoadmap, .serversRoadmap > header {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .minecraftFoundation, .serverOverviewCopy, .serversRoadmap > header, .astraShowcaseCard1 figcaption, .astraShowcaseCard4 figcaption {
    grid-template-columns: minmax(0, 1fr);
  }

  .astraShowcaseCard1 figcaption > p, .astraShowcaseCard4 figcaption > p {
    grid-column: 1;
  }

  .minecraftFoundationBody > div, .serverFeatureGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminGate h1 {
    overflow-wrap: anywhere;
    width: min(100%, 920px);
  }
}

@media (max-width: 760px) {
  html, body {
    overscroll-behavior-x: none;
    max-width: 100%;
  }

  .pageShell {
    --page-shell-gutter: 6px;
    padding: 6px;
  }

  .pageShell > :is(.heroFrame, .robloxPortalHero, .robloxExperienceHero, .minecraftHero, .playHero, .accountHero, .legalHero, .gameHero, .serverDetailHero, .innerHero, .rulesHero, .franchiseHero, .aboutHero, .faqHero, .knowledgeHero, .serversHero, .publicProfileHero, .articleDetailHero, .newsPostHero) {
    border-radius: 26px;
    width: 100%;
  }

  .pageShell :is(h1, h2, h3, h4) {
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  .pageShell :is(p, blockquote, li, dd) {
    overflow-wrap: anywhere;
  }

  .pageShell :is(input, textarea, select) {
    width: 100%;
    max-width: 100%;
    font-size: max(16px, 1em);
  }

  .pageShell :is(button, a)[role="button"], .button {
    touch-action: manipulation;
  }

  .serversRoadmap > header {
    padding: 0;
  }

  .serversRoadmap > header > :is(p, h2, span) {
    width: 100%;
    min-width: 0;
  }

  .playSteps {
    width: 100%;
  }

  .playSteps > li, .playSteps > .playServerStep {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    padding: 25px 18px;
  }

  .playStepIndex {
    grid-row: 1;
  }

  .playStepAction, .playServerOptions {
    grid-column: 1 / -1;
  }

  .playStepAction {
    min-height: 52px;
    margin-top: 8px;
  }

  .playServerOptions {
    margin-top: 8px;
  }

  .playServerOptions > button {
    min-height: 225px;
  }

  .minecraftFoundation, .minecraftWorlds, .minecraftApproach, .minecraftStart, .minecraftAiSection, .serverOverviewSection, .serverRulesSection, .relatedServersSection, .connectionSection {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .minecraftSectionHeading, .minecraftFoundationBody, .serverOverviewCopy, .serverOverviewCopy > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .minecraftSectionHeading h2, .serverOverviewCopy h2 {
    overflow-wrap: break-word;
  }

  .faqCategoryRail, .rulesCategoryScroller, .knowledgeTopics {
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 2px 20px;
  }

  .faqCategoryRail > *, .rulesCategoryScroller > *, .knowledgeTopics > * {
    scroll-snap-align: start;
  }

  .faqCategoryRail, .rulesCategoryScroller {
    padding-right: 20px;
  }

  .knowledgeTopics {
    scrollbar-width: none;
    grid-auto-columns: min(78vw, 304px);
    padding-right: 20px;
  }

  .knowledgeTopics::-webkit-scrollbar {
    display: none;
  }

  .knowledgeTopics > a {
    min-height: 190px;
  }

  .pixelBattleWorkspaceNav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    display: grid;
    overflow: visible;
  }

  .pixelBattleWorkspaceNav button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 5px;
  }

  .pixelBattleWorkspaceNav button span {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
  }

  .pixelBattlePalette {
    scrollbar-width: none;
    width: 190px;
    max-width: 190px;
    overflow: auto hidden;
  }

  .pixelBattlePalette::-webkit-scrollbar {
    display: none;
  }

  .pixelBattleSwatches {
    width: max-content;
    max-width: none;
  }

  .pixelBattleTools > *, .pixelBattleColorControl, .pixelBattleToolPrimary, .pixelBattleZoomControl {
    min-width: 0;
  }

  .pixelBattlePanel :is(button, a, select) {
    min-height: 42px;
  }

  .adminGate {
    min-height: calc(100svh - 68px);
    padding: 34px 18px 42px;
  }

  .adminGate h1 {
    width: 100%;
    font-size: clamp(50px, 14vw, 74px);
    line-height: .86;
  }
}

@media (max-width: 420px) {
  .pixelBattleWorkspaceNav button {
    font-size: 7.5px;
  }

  .pixelBattleWorkspaceNav button b {
    display: none;
  }

  .pixelBattlePalette {
    width: 168px;
    max-width: 168px;
  }
}

.pixelBattleWorkspace, .pixelBattleTopbar {
  background: var(--surface-subcard);
}

.pixelBattleSignals > span, .pixelBattleWorkspaceNav button {
  background: var(--surface-subcard);
  color: #ffffffb8;
}

.pixelBattleWorkspaceNav button:hover:not([data-active="true"]) {
  background: var(--surface-subcard-hover);
}

.pixelBattleWorkspaceNav button[data-active="true"] {
  background: var(--color-accent);
  color: #090a0c;
}

.pixelBattleWorkspaceNav button[data-active="true"] b {
  color: #090a0c9e;
}

.pixelBattleStage {
  gap: 12px;
  padding-inline: 14px;
}

.pixelBattleViewport {
  background: var(--surface-card);
  box-shadow: 0 22px 70px #00000052;
}

.pixelBattleViewport[data-grid-mode="pixel"] canvas {
  cursor: crosshair;
}

.pixelBattleCanvasMode {
  z-index: 6;
  color: #ffffffc2;
  letter-spacing: .035em;
  pointer-events: none;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #14161beb;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 11px;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  position: absolute;
  top: 46px;
  left: 420px;
  transform: none;
}

.pixelBattleCanvasMode i {
  background: #a7afbc;
  border-radius: 2px;
  flex: none;
  width: 7px;
  height: 7px;
}

.pixelBattleCanvasMode strong {
  color: #ffffff61;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px;
  font-weight: 600;
}

.pixelBattleCanvasMode[data-mode="pixel"] {
  background: var(--color-accent);
  color: #090a0c;
}

.pixelBattleCanvasMode[data-mode="pixel"] i {
  background: var(--surface-card);
}

.pixelBattleCanvasMode[data-mode="pixel"] strong {
  color: #090a0c8f;
}

.pixelBattleTools {
  scrollbar-gutter: stable;
  background: #1b1d23fa;
  border-radius: 20px;
  gap: 15px;
  width: 336px;
  max-height: calc(100% - 116px);
  padding: 19px;
  top: 68px;
  left: 60px;
  box-shadow: 0 24px 72px #0000006b;
}

.pixelBattleToolsHeader strong {
  color: #fff;
  font-size: 19px;
}

.pixelBattleToolsHeader span, .pixelBattlePalette header, .pixelBattleCustomPalette header, .pixelBattleZoomControl > span {
  color: #ffffff7a;
}

.pixelBattleColorControl {
  grid-template-columns: 72px minmax(0, 1fr);
}

.pixelBattleColorPreview {
  border-radius: 14px;
  width: 72px;
  height: 62px;
}

.pixelBattleColorPreview i {
  filter: saturate(1.16) contrast(1.04);
}

.pixelBattleHexField, .pixelBattleToolPrimary button, .pixelBattleZoomControl :is(button, output), .pixelBattlePickerCurrent, .pixelBattleRgbFields label, .pixelBattlePickerHex {
  background: var(--surface-subcard);
}

.pixelBattleSwatches {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 7px;
}

.pixelBattleSwatches button, .pixelBattleCustomPalette > div > span > button:first-child {
  filter: saturate(1.12) contrast(1.04);
  opacity: 1;
  border-radius: 9px;
  transition: transform .13s, box-shadow .13s, filter .13s;
  transform: none;
}

.pixelBattleSwatches button:hover, .pixelBattleCustomPalette > div > span > button:first-child:hover {
  filter: saturate(1.22) brightness(1.12);
  transform: translateY(-2px);
}

.pixelBattleSwatches button[aria-pressed="true"], .pixelBattleCustomPalette > div > span > button:first-child[aria-pressed="true"] {
  transform: scale(.8);
  box-shadow: 0 0 0 2px #1b1d23, 0 0 0 4px #fff;
}

.pixelBattleCustomPalette > div {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 7px;
}

.pixelBattleToolPrimary button {
  min-height: 46px;
}

.pixelBattleToolPrimary button:hover, .pixelBattleToolPrimary button[data-active="true"] {
  background: var(--color-accent);
}

.pixelBattleSidebar {
  background: var(--surface-subcard);
  box-shadow: 0 22px 70px #00000047;
}

.pixelBattlePanel {
  padding: 26px 20px;
}

.pixelBattleRanking article, .pixelBattleStatGrid article {
  background: var(--surface-subcard-hover);
}

.pixelBattleCanvasMeta {
  left: 420px;
}

.pixelBattleViewControls button {
  background: #1b1d23f0;
}

.pixelBattleViewControls button:hover, .pixelBattleViewControls button[aria-pressed="true"] {
  background: var(--color-accent);
}

.pixelBattleActionBar {
  background: var(--surface-subcard);
}

@media (max-width: 1200px) and (min-width: 761px) {
  .pixelBattleTools {
    width: 306px;
    left: 48px;
  }

  .pixelBattleCanvasMeta, .pixelBattleCanvasMode {
    left: 374px;
  }
}

@media (max-width: 760px) {
  .pixelBattleStage {
    padding-inline: 6px;
  }

  .pixelBattleCanvasMode {
    min-height: 30px;
    padding-inline: 9px;
    font-size: 7px;
    top: 111px;
    left: 50%;
    transform: translateX(-50%);
  }

  .pixelBattleTools {
    background: #1b1d23fa;
    border-radius: 13px;
    gap: 7px;
    width: auto;
    height: 58px;
    max-height: none;
    padding: 7px;
    top: 46px;
    left: 34px;
    right: 10px;
  }

  .pixelBattleColorControl {
    grid-template-columns: 42px 83px;
  }

  .pixelBattleColorPreview {
    border-radius: 9px;
    width: 42px;
    height: 42px;
  }

  .pixelBattleSwatches, .pixelBattleCustomPalette > div {
    gap: 6px;
    display: flex;
  }

  .pixelBattleSwatches button, .pixelBattleCustomPalette > div > span {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
  }

  .pixelBattleSidebar {
    background: var(--surface-subcard);
  }

  .pixelBattleCanvasMeta {
    left: 34px;
  }
}

@media (max-width: 460px) {
  .pixelBattleCanvasMode strong {
    display: none;
  }

  .pixelBattleCanvasMode {
    top: 110px;
  }

  .pixelBattlePalette {
    width: 210px;
    max-width: 210px;
  }
}

:where(body *) {
  border-color: #0000 !important;
  outline: 0 !important;
}

:where(hr) {
  background: linear-gradient(90deg, #0000, #7f7f7f38, #0000);
  height: 1px;
  border: 0 !important;
}

:where(a, button, input, textarea, select, summary, [role="button"], [tabindex]):focus-visible {
  filter: brightness(1.14) saturate(1.04);
  outline: 0 !important;
}

.walletGlow, .idManifesto:after, .accountIdentity:after, .walletHeader > p i, .mfaStatusLine span[data-enabled="true"]:before, .adminAnalyticsHero > div:last-child i, .adminAnalyticsHero > div:last-child[data-active="true"] i, .idOnline i, .accountIdentityStatus i, .idOverviewStats i[data-active="true"], .adminRoleChoices input:focus-visible + span, .pixelBattleSwatches button[aria-pressed="true"], .pixelBattleCustomPalette > div > span > button:first-child[aria-pressed="true"] {
  box-shadow: none !important;
}

.authFieldControl:focus-within {
  box-shadow: 0 14px 38px #00000047 !important;
}

.adminPixelHero.adminPixelHeroCompact {
  background: linear-gradient(125deg,
    var(--surface-subcard),
    #1d0b05 72%,
    #3a1205);
  grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
  min-height: 210px;
  padding: clamp(28px, 3.4vw, 48px);
}

.adminPixelHeroCompact h2 {
  margin: 18px 0 10px;
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: .9;
}

.adminPixelHeroCompact .adminPixelMetrics article {
  min-height: 92px;
}

.adminPixelSeasonPicker {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  padding: 6px;
}

.adminPixelSeasonPicker button {
  min-height: 76px;
  padding: 13px 14px;
}

.adminPixelSeasonPicker strong {
  margin: 5px 0 3px;
  font-size: 15px;
}

.adminPixelCommandBar {
  background: var(--surface-subcard);
  border-radius: 18px;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 14px 18px;
  display: flex;
}

.adminPixelCommandBar > div:first-child {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
  display: grid;
}

.adminPixelCommandBar > div:first-child > span {
  background: var(--surface-subcard-hover);
  color: #b8ff36;
  text-transform: uppercase;
  border-radius: 8px;
  grid-row: 1 / span 2;
  padding: 7px 9px;
  font-size: 7px;
  font-weight: 750;
}

.adminPixelCommandBar > div:first-child > span[data-status="paused"] {
  color: #ffb13b;
}

.adminPixelCommandBar > div:first-child > span[data-status="finished"], .adminPixelCommandBar > div:first-child > span[data-status="archived"] {
  color: #ffffff75;
}

.adminPixelCommandBar strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 540;
  overflow: hidden;
}

.adminPixelCommandBar small {
  color: #ffffff6b;
  font-size: 8px;
}

.adminPixelSectionNav, .adminPixelLocaleSwitch {
  background: var(--surface-subcard);
  border-radius: 15px;
  gap: 5px;
  padding: 5px;
  display: flex;
}

.adminPixelSectionNav button, .adminPixelLocaleSwitch button {
  color: #ffffff85;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 11px;
  min-height: 42px;
  padding: 0 18px;
  font-size: 9px;
  font-weight: 650;
}

.adminPixelSectionNav button[data-active="true"], .adminPixelLocaleSwitch button[data-active="true"] {
  color: #090909;
  background: #f2efe9;
}

.adminPixelSectionNav b {
  background: var(--color-accent);
  color: #090909;
  border-radius: 7px;
  place-items: center;
  min-width: 19px;
  height: 19px;
  margin-left: 8px;
  font-size: 7px;
  display: inline-grid;
}

.adminPixelSetup {
  grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
  align-items: stretch;
  gap: 9px;
  display: grid;
}

.adminPixelSetup > .adminPixelPreview {
  aspect-ratio: 1;
  min-height: 0;
}

.adminPixelSetup > .adminPixelEditor {
  min-width: 0;
}

.adminPixelSetup .adminPixelEditor > header {
  margin-bottom: 24px;
}

.adminPixelSetup .adminPixelEditor > header h3 {
  font-size: clamp(34px, 4vw, 56px);
}

.adminPixelSetup .adminPixelFields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.adminPixelSetup .adminPixelFields label:first-child, .adminPixelSetup .adminPixelFields label:last-child {
  grid-column: span 2;
}

.adminPixelFields input[readonly] {
  cursor: not-allowed;
  opacity: .48;
}

.adminPixelCooldown {
  align-items: center;
  gap: 8px;
  display: flex;
}

.adminPixelCooldown em {
  color: #ffffff57;
  font-size: 8px;
  font-style: normal;
}

.adminPixelLocaleSwitch {
  width: max-content;
  margin: 20px 0 8px;
}

.adminPixelLocaleSwitch button {
  min-height: 36px;
}

.adminPixelSetup .adminPixelLocales {
  margin: 0 0 18px;
  display: block;
}

.adminPixelSetup .adminPixelLocales fieldset {
  background: var(--surface-card);
  padding: 14px;
}

.adminPixelSetup .adminPixelLocales fieldset[hidden] {
  display: none;
}

.adminPixelAdvanced {
  background: var(--surface-subcard);
  border-radius: 11px;
  margin-top: 6px;
}

.adminPixelAdvanced summary {
  color: #ffffff8a;
  cursor: pointer;
  padding: 14px;
  font-size: 9px;
}

.adminPixelAdvanced[open] summary {
  color: #fff;
}

.adminPixelAdvanced label {
  background: var(--surface-subcard);
  margin: 0 8px 8px;
}

.adminPixelSaveHint {
  color: #fff6;
  margin: 12px 0 0;
  font-size: 8px;
  line-height: 1.5;
}

@media (max-width: 1080px) {
  .adminPixelHero.adminPixelHeroCompact, .adminPixelSetup {
    grid-template-columns: 1fr;
  }

  .adminPixelSetup > .adminPixelPreview {
    aspect-ratio: auto;
    max-height: 420px;
  }
}

@media (max-width: 680px) {
  .adminPixelHero.adminPixelHeroCompact {
    min-height: 0;
    padding: 24px 18px;
  }

  .adminPixelHeroCompact .adminPixelMetrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .adminPixelHeroCompact .adminPixelMetrics article {
    min-height: 82px;
    padding: 11px;
  }

  .adminPixelCommandBar {
    flex-direction: column;
    align-items: stretch;
  }

  .adminPixelLifecycle .adminButton {
    flex: 1;
  }

  .adminPixelSectionNav {
    overflow-x: auto;
  }

  .adminPixelSectionNav button {
    flex: 1 0 auto;
  }

  .adminPixelSetup .adminPixelFields, .adminPixelSetup .adminPixelFields label:first-child, .adminPixelSetup .adminPixelFields label:last-child {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
}

.newsPostPage, .articlePage, .innerPage[data-section="news"] {
  overflow-x: clip;
}

.newsPostHero {
  height: auto;
  min-height: max(760px, 100svh - 16px);
  display: grid;
}

.newsPostHeroMedia img {
  filter: saturate(.82) contrast(1.04) brightness(.82);
}

.newsPostHeroMedia span {
  background: linear-gradient(90deg, #000000f7 0%, #000000b3 48%, #00000047 78%, #0000007a 100%), linear-gradient(0deg, #000000f0 0%, #00000029 64%);
}

.newsPostHeroCopy {
  align-self: end;
  width: min(1180px, 100% - 8.6vw);
  margin: 0 4.3vw;
  padding: clamp(170px, 20vh, 230px) 0 clamp(72px, 8vw, 138px);
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
}

.newsPostHeroCopy .innerBreadcrumb {
  margin-bottom: clamp(26px, 3.6vw, 48px);
}

.newsPostHeroCopy h1 {
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
  text-wrap: balance;
  max-width: 1120px;
  margin: 0;
  font-size: clamp(60px, 6.25vw, 116px);
  line-height: .87;
}

.newsPostHeroCopy[data-title-length="medium"] h1 {
  font-size: clamp(56px, 5.35vw, 100px);
}

.newsPostHeroCopy[data-title-length="long"] h1 {
  font-size: clamp(50px, 4.6vw, 84px);
  line-height: .9;
}

.newsPostHeroCopy > p:last-child {
  text-wrap: pretty;
  max-width: 760px;
  margin-top: clamp(28px, 3vw, 42px);
  font-size: clamp(16px, 1.25vw, 21px);
  line-height: 1.45;
}

.articleDetailHero {
  height: auto;
  min-height: max(760px, 100svh - 12px);
  display: grid;
}

.articleDetailIntro {
  align-self: end;
  width: min(1180px, 100% - 12vw);
  margin: 0 6vw;
  padding: clamp(150px, 18vh, 210px) 0 clamp(58px, 6vw, 100px);
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
}

.articleDetailIntro nav {
  margin-bottom: clamp(24px, 3.4vw, 44px);
}

.articleDetailIntro h1 {
  letter-spacing: -.022em;
  overflow-wrap: anywhere;
  text-wrap: balance;
  max-width: 1120px;
  font-size: clamp(58px, 6.2vw, 114px);
  line-height: .88;
}

.articleDetailIntro[data-title-length="medium"] h1 {
  font-size: clamp(53px, 5.25vw, 96px);
}

.articleDetailIntro[data-title-length="long"] h1 {
  font-size: clamp(48px, 4.5vw, 82px);
  line-height: .92;
}

.articleDetailIntro > span {
  text-wrap: pretty;
  max-width: 760px;
  line-height: 1.55;
}

.knowledgeFeaturedCopy h2, .knowledgeCard h2, .articleRelated h3 {
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.knowledgeFeaturedCopy h2 {
  font-size: clamp(38px, 3.35vw, 60px);
  line-height: .94;
}

.knowledgeCard h2 {
  font-size: clamp(29px, 2.35vw, 42px);
  line-height: 1;
}

.articleRelated h3 {
  font-size: clamp(25px, 2.2vw, 34px);
  line-height: 1.02;
}

.innerPage[data-section="news"] .innerHero {
  background: var(--surface-card);
  height: auto;
  min-height: max(760px, 100svh);
  overflow: hidden;
}

.innerPage[data-section="news"] .innerHeroGlow {
  opacity: .72;
  width: 68%;
  height: 126%;
  top: -34%;
  right: -8%;
}

.innerPage[data-section="news"] .innerHeroArt {
  width: 100%;
  inset: 0;
}

.innerPage[data-section="news"] .innerHeroImage {
  object-position: center 48%;
  filter: saturate(.78) contrast(1.08) brightness(.78);
  transform: scale(1.015);
}

.innerPage[data-section="news"] .innerHeroArt:after {
  background: linear-gradient(90deg, #030303fa 0%, #030303e6 26%, #0303037a 58%, #0303032e 82%, #03030357 100%), linear-gradient(#0303036b 0%, #0000 34%, #03030352 67%, #030303f5 100%);
}

.innerPage[data-section="news"] .innerHeroCopy {
  width: min(920px, 68vw);
  top: auto;
  bottom: clamp(154px, 18vh, 210px);
}

.innerPage[data-section="news"] .innerHeroCopy h1 {
  letter-spacing: -.035em;
  text-wrap: balance;
  max-width: 900px;
  font-size: clamp(72px, 7.6vw, 132px);
  line-height: .84;
}

.innerPage[data-section="news"] .innerHeroDescription {
  color: #ffffffb3;
  text-wrap: pretty;
  width: min(620px, 82%);
  margin: clamp(28px, 3vw, 42px) 0 0;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.5;
}

.innerPage[data-section="news"] .innerHeroIndex {
  display: none;
}

.newsHeroRail {
  z-index: 6;
  border-top: 1px solid #ffffff38;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: stretch;
  min-height: 82px;
  display: grid;
  position: absolute;
  bottom: 28px;
  left: 4.3vw;
  right: 4.3vw;
}

.newsHeroRail > a, .newsHeroRail > div {
  align-items: center;
  min-width: 0;
  padding: 20px 0 0;
  display: flex;
}

.newsHeroRail > a {
  color: #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
  gap: 14px;
  font-size: 11px;
  font-weight: 700;
}

.newsHeroRail > a i {
  color: #090909;
  background: var(--color-accent);
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 15px;
  font-style: normal;
  transition: transform .18s, background-color .18s;
  display: grid;
}

.newsHeroRail > a:hover i, .newsHeroRail > a:focus-visible i {
  background: var(--color-accent);
  transform: translateY(3px);
}

.newsHeroRail > a:focus-visible {
  outline-offset: 5px;
  outline: 2px solid #fffc;
}

.newsHeroRail > div {
  border-left: 1px solid #ffffff24;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 7px;
  width: clamp(180px, 16vw, 270px);
  margin-left: clamp(28px, 4vw, 72px);
  padding-left: clamp(22px, 2.5vw, 40px);
}

.newsHeroRail small {
  color: #fff6;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: 8px;
}

.newsHeroRail strong {
  color: #ffffffdb;
  font-size: 15px;
  font-weight: 520;
  line-height: 1;
}

.innerPage[data-section="news"] .innerLeadSection {
  background: radial-gradient(circle at 94% 8%,
      rgb(var(--color-accent-rgb) / .16),
      transparent 28%),
    #f1efea;
  color: #090909;
  grid-template-columns: minmax(120px, .36fr) minmax(0, 1.64fr);
  align-content: center;
  min-height: 440px;
  padding-top: clamp(76px, 8vw, 128px);
  padding-bottom: clamp(76px, 8vw, 128px);
}

.innerPage[data-section="news"] .innerLeadSection .sectionEyebrow {
  color: var(--color-accent);
}

.innerPage[data-section="news"] .innerLeadSection h2 {
  color: #090909;
  overflow-wrap: anywhere;
  text-wrap: balance;
  max-width: 1180px;
  font-size: clamp(54px, 6.6vw, 112px);
  line-height: .9;
}

.innerPage[data-section="news"] .newsArchiveGrid {
  background: var(--surface-card);
  gap: 9px;
  padding-top: clamp(52px, 6vw, 96px);
  padding-bottom: clamp(76px, 9vw, 145px);
}

.newsArchiveCard {
  min-width: 0;
  transition: background-color .18s, transform .22s;
}

.newsArchiveCard:hover, .newsArchiveCard:focus-visible {
  background: var(--surface-card);
  transform: translateY(-3px);
}

.newsArchiveCard[data-featured="true"] {
  grid-column: 1 / -1;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr);
  min-height: 640px;
}

.newsArchiveCard[data-featured="true"] .newsArchiveMedia {
  grid-row: 1 / span 2;
  min-height: 640px;
}

.newsArchiveCard[data-featured="true"] .newsArchiveMedia span {
  background: linear-gradient(90deg, #0000 58%, #080808b8), linear-gradient(0deg, #08080866, #0000 48%);
}

.newsArchiveCard[data-featured="true"] .newsArchiveMeta {
  align-self: start;
  padding-top: clamp(30px, 3vw, 48px);
  padding-left: clamp(28px, 3.5vw, 56px);
  padding-right: clamp(28px, 3.5vw, 56px);
}

.newsArchiveCard[data-featured="true"] .newsArchiveCopy {
  align-self: end;
  padding: 30px clamp(60px, 4.6vw, 88px) clamp(42px, 4vw, 68px) clamp(28px, 3.5vw, 56px);
}

.newsArchiveCopy h2 {
  overflow-wrap: anywhere;
  text-wrap: pretty;
  max-width: 17ch;
  font-size: clamp(34px, 3.15vw, 56px);
  line-height: .94;
}

.newsArchiveCard[data-featured="true"] .newsArchiveCopy h2 {
  max-width: 13ch;
  font-size: clamp(42px, 4.1vw, 72px);
  line-height: .9;
}

.newsArchiveCopy p {
  text-wrap: pretty;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 1120px) {
  .newsArchiveCard[data-featured="true"] {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .newsArchiveCard[data-featured="true"] .newsArchiveMedia {
    grid-row: auto;
    min-height: 470px;
  }

  .newsArchiveCard[data-featured="true"] .newsArchiveMedia span {
    background: linear-gradient(180deg, transparent 52%, var(--surface-card));
  }

  .newsArchiveCard[data-featured="true"] .newsArchiveCopy h2 {
    max-width: 17ch;
    font-size: clamp(40px, 6vw, 64px);
  }
}

@media (max-width: 920px) {
  .innerPage[data-section="news"] .innerHeroCopy {
    width: auto;
    bottom: 178px;
    left: 28px;
    right: 28px;
  }

  .innerPage[data-section="news"] .innerHeroCopy h1 {
    font-size: clamp(60px, 11vw, 96px);
  }

  .newsHeroRail {
    grid-template-columns: minmax(220px, 1fr) auto;
    bottom: 24px;
    left: 28px;
    right: 28px;
  }

  .newsHeroRail > div:first-of-type {
    display: none;
  }

  .innerPage[data-section="news"] .innerLeadSection {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .newsPostHeroCopy, .articleDetailIntro {
    width: auto;
    margin-left: 28px;
    margin-right: 28px;
  }

  .newsPostHeroCopy h1, .articleDetailIntro h1 {
    font-size: clamp(52px, 9.4vw, 84px);
  }

  .newsPostHeroCopy[data-title-length="medium"] h1, .articleDetailIntro[data-title-length="medium"] h1 {
    font-size: clamp(48px, 8.2vw, 72px);
  }

  .newsPostHeroCopy[data-title-length="long"] h1, .articleDetailIntro[data-title-length="long"] h1 {
    font-size: clamp(44px, 7.2vw, 64px);
  }
}

@media (max-width: 560px) {
  .innerPage[data-section="news"] .innerHero {
    height: auto;
    min-height: max(720px, 100svh);
  }

  .innerPage[data-section="news"] .innerHeroCopy {
    bottom: 166px;
    left: 20px;
    right: 20px;
  }

  .innerPage[data-section="news"] .innerHeroCopy h1 {
    font-size: clamp(50px, 13.5vw, 70px);
    line-height: .88;
  }

  .innerPage[data-section="news"] .innerHeroDescription {
    width: 100%;
    margin-top: 23px;
    font-size: 13px;
    line-height: 1.45;
  }

  .innerPage[data-section="news"] .innerHeroImage {
    object-position: 62% center;
  }

  .innerPage[data-section="news"] .innerHeroArt:after {
    background: linear-gradient(90deg, #030303f0, #03030357),
      linear-gradient(180deg,
        #03030359 0%,
        #03030314 25%,
        #030303f0 78%,
        var(--surface-card) 100%);
  }

  .newsHeroRail {
    grid-template-columns: 1fr auto;
    min-height: 92px;
    bottom: 20px;
    left: 20px;
    right: 20px;
  }

  .newsHeroRail > a, .newsHeroRail > div {
    padding-top: 16px;
  }

  .newsHeroRail > a {
    font-size: 9px;
  }

  .newsHeroRail > div {
    width: auto;
    min-width: 112px;
    margin-left: 14px;
    padding-left: 16px;
  }

  .newsHeroRail small {
    max-width: 100px;
    font-size: 7px;
  }

  .newsHeroRail strong {
    font-size: 12px;
  }

  .innerPage[data-section="news"] .innerLeadSection {
    padding: 72px 20px;
  }

  .innerPage[data-section="news"] .innerLeadSection h2 {
    font-size: clamp(43px, 12.5vw, 61px);
  }

  .newsPostHero, .articleDetailHero {
    min-height: max(700px, 100svh - 12px);
  }

  .newsPostHeroCopy, .articleDetailIntro {
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 138px;
    padding-bottom: 48px;
  }

  .newsPostHeroCopy .innerBreadcrumb, .articleDetailIntro nav {
    margin-bottom: 24px;
  }

  .newsPostHeroCopy h1, .articleDetailIntro h1 {
    font-size: clamp(46px, 13vw, 62px);
    line-height: .91;
  }

  .newsPostHeroCopy[data-title-length="medium"] h1, .articleDetailIntro[data-title-length="medium"] h1 {
    font-size: clamp(41px, 11.4vw, 54px);
  }

  .newsPostHeroCopy[data-title-length="long"] h1, .articleDetailIntro[data-title-length="long"] h1 {
    font-size: clamp(36px, 10vw, 47px);
    line-height: .96;
  }

  .newsPostHeroCopy > p:last-child {
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.5;
  }

  .articleDetailIntro > span {
    margin-top: 18px;
    font-size: 12px;
  }

  .articleDetailStats {
    gap: 18px;
    margin-top: 25px;
  }

  .newsArchiveCard[data-featured="true"] .newsArchiveMedia {
    min-height: 310px;
  }

  .newsArchiveCard[data-featured="true"] .newsArchiveMeta, .newsArchiveCard[data-featured="true"] .newsArchiveCopy {
    padding-left: 20px;
    padding-right: 20px;
  }

  .newsArchiveCard[data-featured="true"] .newsArchiveCopy h2, .newsArchiveCopy h2 {
    max-width: 18ch;
    font-size: clamp(35px, 10.5vw, 47px);
    line-height: .94;
  }

  .knowledgeFeaturedCopy h2 {
    font-size: clamp(35px, 9.8vw, 47px);
  }

  .knowledgeCard h2 {
    font-size: clamp(30px, 8.8vw, 40px);
  }
}

.siteHeader.siteHeaderIslands {
  z-index: 400;
  height: auto;
  padding: 18px clamp(22px, 2vw, 34px);
  transition: transform .22s;
  display: block;
  position: fixed;
  inset: 0 0 auto;
  transform: translateY(22px);
}

.siteHeader.siteHeaderIslands[data-scrolled="true"] {
  transform: translateY(0);
}

@media (max-width: 1220px) {
  .siteHeader.siteHeaderIslands {
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (max-width: 920px) {
  .siteHeader.siteHeaderIslands {
    grid-template-columns: 1fr auto;
    align-items: center;
    height: 72px;
    padding: 0 18px;
    display: grid;
    transform: translateY(12px);
  }

  .siteHeader.siteHeaderIslands[data-scrolled="true"] {
    transform: translateY(0);
  }
}

@media (max-width: 560px) {
  .siteHeader.siteHeaderIslands {
    height: 66px;
    padding: 0 12px;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .headerIsland, .headerMobileBrand, .siteHeaderIslands .localeLink, .siteHeaderIslands .menuButton {
    background: #080808f0;
  }

  .siteHeaderIslands .headerDropdownPanel {
    background: #080808fa;
  }

  .headerIsland:before {
    display: none;
  }
}

.ratingsPage {
  min-height: var(--platform-page-height);
  background: var(--surface-card);
  color: #f7f5f2;
  overflow: hidden;
}

.ratingsExperience {
  width: min(1560px, 100%);
  margin: 0 auto;
  padding: clamp(26px, 3vw, 52px) clamp(18px, 4vw, 64px) 86px;
}

.ratingsHero {
  background: radial-gradient(circle at 79% 18%,
      rgb(var(--color-accent-rgb) / .17),
      transparent 29%),
    radial-gradient(circle at 28% 118%,
      #ffffff12,
      transparent 43%),
    #0a0a0ddb;
  isolation: isolate;
  border: 1px solid #ffffff13;
  border-radius: 30px;
  grid-template-rows: 1fr auto;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .62fr);
  gap: 24px;
  min-height: 430px;
  padding: clamp(34px, 4vw, 68px);
  display: grid;
  position: relative;
  overflow: hidden;
}

.ratingsHero:before {
  z-index: -2;
  content: "";
  background-image: linear-gradient(#ffffff06 1px, #0000 1px), linear-gradient(90deg, #ffffff06 1px, #0000 1px);
  background-size: 54px 54px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, #000, #0000 78%);
  mask-image: linear-gradient(90deg, #000, #0000 78%);
}

.ratingsHeroGlow {
  z-index: -1;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ratingsHeroGlow i {
  border: 1px solid rgb(var(--color-accent-rgb) / .2);
  border-radius: 50%;
  position: absolute;
}

.ratingsHeroGlow i:first-child {
  width: 560px;
  height: 560px;
  top: -230px;
  right: -90px;
}

.ratingsHeroGlow i:last-child {
  width: 310px;
  height: 310px;
  top: -100px;
  right: 45px;
}

.ratingsHeroCopy {
  align-self: center;
  max-width: 850px;
}

.ratingsEyebrow {
  color: #ffffffa3;
  letter-spacing: .13em;
  text-transform: uppercase;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 780;
  display: flex;
}

.ratingsEyebrow svg {
  width: 17px;
  height: 17px;
  color: var(--color-accent);
  stroke-width: 1.8px;
}

.ratingsHeroCopy h1 {
  letter-spacing: -.065em;
  max-width: 800px;
  margin: 22px 0 18px;
  font-size: clamp(54px, 7vw, 116px);
  font-weight: 560;
  line-height: .88;
}

.ratingsHeroCopy > p {
  color: #ffffffa3;
  max-width: 680px;
  margin: 0;
  font-size: clamp(14px, 1.22vw, 18px);
  font-weight: 530;
  line-height: 1.5;
}

.ratingsHeroFacts {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  display: flex;
}

.ratingsHeroFacts span {
  color: #ffffffc2;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #19191d7a;
  border: 1px solid #ffffff14;
  border-radius: 13px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 13px;
  font-size: 10.5px;
  font-weight: 650;
  display: flex;
}

.ratingsHeroFacts svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
}

.ratingsSeasonCard {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: #1414189e;
  border: 1px solid #ffffff1a;
  border-radius: 22px;
  align-self: center;
  min-height: 230px;
  padding: 22px;
  display: grid;
}

.ratingsSeasonCard header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  display: flex;
}

.ratingsSeasonCard header span {
  color: #ffffff80;
  letter-spacing: .11em;
  text-transform: uppercase;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  font-weight: 800;
  display: flex;
}

.ratingsSeasonCard header span i {
  background: #65e879;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.ratingsSeasonCard header strong {
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 740;
}

.ratingsSeasonCard > div {
  align-self: center;
}

.ratingsSeasonCard > div small, .ratingsSeasonCard > div b {
  display: block;
}

.ratingsSeasonCard > div small {
  color: #ffffff61;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-size: 9px;
  font-weight: 700;
}

.ratingsSeasonCard > div b {
  letter-spacing: -.045em;
  font-size: clamp(25px, 2.4vw, 38px);
  font-weight: 620;
}

.ratingsSeasonCard footer {
  color: #ffffff73;
  border-top: 1px solid #ffffff14;
  align-items: center;
  gap: 9px;
  padding-top: 16px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.ratingsSeasonCard footer svg {
  width: 15px;
  height: 15px;
  color: var(--color-accent);
}

.ratingsPersonalCard {
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  background: #19191d8a;
  border: 1px solid #ffffff17;
  border-radius: 20px;
  grid-column: 1 / -1;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 12px 14px 12px 20px;
  display: flex;
}

.ratingsPersonalCard > svg {
  width: 25px;
  height: 25px;
  color: var(--color-accent);
}

.ratingsPersonalCard > span {
  gap: 4px;
  min-width: 120px;
  display: grid;
}

.ratingsPersonalCard small {
  color: #ffffff61;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 750;
}

.ratingsPersonalCard b {
  font-size: 19px;
  line-height: 1;
}

.ratingsPersonalCard button {
  border: 1px solid rgb(var(--color-accent-rgb) / .5);
  background: rgb(var(--color-accent-rgb) / .12);
  color: #fff;
  cursor: pointer;
  border-radius: 13px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 17px;
  font-size: 10px;
  font-weight: 720;
}

.ratingsPodiumSection, .ratingsBoardSection {
  margin-top: clamp(46px, 6vw, 88px);
}

.ratingsSectionHeader {
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 22px;
  display: flex;
}

.ratingsSectionHeader > div {
  align-items: baseline;
  gap: 14px;
  display: flex;
}

.ratingsSectionHeader > div > span {
  color: var(--color-accent);
  font-size: 9px;
  font-weight: 820;
}

.ratingsSectionHeader h2 {
  letter-spacing: -.04em;
  margin: 0;
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 610;
}

.ratingsSectionHeader > p {
  color: #fff6;
  margin: 0;
  font-size: 10px;
  font-weight: 650;
}

.ratingsPodium {
  background: #0a0a0d9e;
  border: 1px solid #ffffff13;
  border-radius: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  min-height: 330px;
  padding: 26px;
  display: grid;
}

.ratingsPodiumPlace {
  color: #fff;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #20202485;
  border: 1px solid #ffffff14;
  border-radius: 22px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 246px;
  padding: 28px 20px 24px;
  transition: border-color .16s, background-color .16s, transform .16s;
  display: flex;
  position: relative;
}

.ratingsPodiumPlace:hover, .ratingsPodiumPlace:focus-visible {
  border-color: rgb(var(--color-accent-rgb) / .45);
  background: #26262bad;
  transform: translateY(-4px);
}

.ratingsPodiumPlace[data-place="1"] {
  border-color: rgb(var(--color-accent-rgb) / .32);
  background: linear-gradient(180deg,
    rgb(var(--color-accent-rgb) / .11),
    #20202499);
  min-height: 290px;
}

.ratingsPodiumCrown {
  color: #ffffff7a;
  background: #ffffff0e;
  border-radius: 12px;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  display: grid;
}

.ratingsPodiumPlace[data-place="1"] .ratingsPodiumCrown {
  background: rgb(var(--color-accent-rgb) / .16);
  color: var(--color-accent);
}

.ratingsPodiumCrown svg {
  stroke-width: 1.7px;
  width: 20px;
  height: 20px;
}

.ratingParticipantMark {
  --participant-accent: var(--color-accent);
  background: linear-gradient(145deg, var(--participant-accent), #3b1914);
  color: #fff;
  background-position: center;
  background-size: cover;
  border: 1px solid #ffffff26;
  border-radius: 15px;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 14px;
  font-weight: 820;
  display: grid;
}

.ratingParticipantMark[data-size="large"] {
  border-radius: 24px;
  width: 78px;
  height: 78px;
  margin-bottom: 15px;
  font-size: 23px;
}

.ratingParticipantMark[data-frame="season-champion"] {
  border-color: var(--color-accent);
  outline: 3px solid rgb(var(--color-accent-rgb) / .15);
}

.ratingParticipantMark svg {
  width: 21px;
  height: 21px;
}

.ratingsPodiumPlace > strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 16px;
  overflow: hidden;
}

.ratingsPodiumPlace > small {
  color: #ffffff5c;
  margin-top: 5px;
  font-size: 9px;
  font-weight: 650;
}

.ratingsPodiumPlace > b {
  color: #ffffffd6;
  margin-top: 15px;
  font-size: 11px;
}

.ratingsPodiumPlace > i {
  color: #ffffff1f;
  font-size: 34px;
  font-style: normal;
  font-weight: 800;
  position: absolute;
  top: 15px;
  right: 17px;
}

.ratingsPodiumEmpty {
  color: #ffffff61;
  grid-column: 1 / -1;
  justify-content: center;
  align-items: center;
  gap: 20px;
  min-height: 276px;
  display: flex;
}

.ratingsPodiumEmpty > svg {
  width: 48px;
  height: 48px;
  color: rgb(var(--color-accent-rgb) / .7);
  stroke-width: 1.2px;
}

.ratingsPodiumEmpty > span {
  gap: 8px;
  max-width: 460px;
  display: grid;
}

.ratingsPodiumEmpty b {
  color: #ffffffd1;
  font-size: 18px;
}

.ratingsPodiumEmpty small {
  line-height: 1.5;
}

.ratingsBoardHeading {
  align-items: center;
}

.ratingsShareButton {
  color: #ffffffad;
  cursor: pointer;
  background: #20202480;
  border: 1px solid #ffffff17;
  border-radius: 13px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 9px;
  font-weight: 680;
  display: flex;
}

.ratingsShareButton svg {
  width: 15px;
  height: 15px;
  color: var(--color-accent);
}

.ratingsCategoryTabs {
  scrollbar-width: none;
  background: #0a0a0da8;
  border: 1px solid #ffffff13;
  border-radius: 19px;
  gap: 6px;
  padding: 5px;
  display: flex;
  overflow-x: auto;
}

.ratingsCategoryTabs::-webkit-scrollbar {
  display: none;
}

.ratingsCategoryTabs button {
  color: #ffffff75;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 14px;
  align-items: center;
  gap: 9px;
  min-width: max-content;
  min-height: 52px;
  padding: 0 18px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.ratingsCategoryTabs button:hover, .ratingsCategoryTabs button[data-active="true"] {
  color: #fff;
  background: #ffffff12;
}

.ratingsCategoryTabs button[data-active="true"] svg {
  color: var(--color-accent);
}

.ratingsCategoryTabs svg {
  stroke-width: 1.65px;
  width: 18px;
  height: 18px;
}

.ratingsFilters {
  grid-template-columns: minmax(210px, 1fr) repeat(3, minmax(145px, auto)) auto;
  gap: 8px;
  margin-top: 12px;
  display: grid;
}

.ratingsFilters > label {
  color: #ffffff6b;
  background: #2020246b;
  border: 1px solid #ffffff13;
  border-radius: 14px;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 13px;
  display: flex;
  position: relative;
}

.ratingsFilters > label > svg {
  stroke-width: 1.65px;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.ratingsFilters > label > svg:last-child {
  pointer-events: none;
  width: 13px;
  height: 13px;
  margin-left: auto;
}

.ratingsFilters input, .ratingsFilters select {
  appearance: none;
  color: #ffffffc7;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  font-size: 10px;
  font-weight: 650;
}

.ratingsFilters input::placeholder {
  color: #ffffff47;
}

.ratingsFilters select:disabled {
  cursor: not-allowed;
  opacity: .34;
}

.ratingsScopeSwitch {
  background: #0a0a0da3;
  border: 1px solid #ffffff13;
  border-radius: 15px;
  padding: 4px;
  display: flex;
}

.ratingsScopeSwitch button {
  color: #fff6;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 11px;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 12px;
  font-size: 9px;
  font-weight: 680;
  display: flex;
}

.ratingsScopeSwitch button[data-active="true"] {
  color: #fff;
  background: #ffffff14;
}

.ratingsScopeSwitch button:disabled {
  cursor: not-allowed;
  opacity: .28;
}

.ratingsScopeSwitch svg {
  width: 15px;
  height: 15px;
}

.ratingsNotice {
  border: 1px solid rgb(var(--color-accent-rgb) / .22);
  background: rgb(var(--color-accent-rgb) / .07);
  color: #ffffffad;
  border-radius: 12px;
  margin: 10px 0 0;
  padding: 10px 13px;
  font-size: 9.5px;
}

.ratingsTable {
  background: #0a0a0dad;
  border: 1px solid #ffffff13;
  border-radius: 22px;
  min-height: 300px;
  margin-top: 12px;
  position: relative;
  overflow: hidden;
}

.ratingsTableHeader, .ratingsTableRow {
  grid-template-columns: 80px minmax(230px, 1fr) 110px minmax(190px, .46fr);
  align-items: center;
  display: grid;
}

.ratingsTableHeader {
  color: #ffffff47;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid #ffffff13;
  min-height: 46px;
  padding: 0 20px;
  font-size: 7.5px;
  font-weight: 780;
}

.ratingsTableHeader span:last-child {
  text-align: right;
}

.ratingsTableRow {
  color: #fff;
  border-bottom: 1px solid #ffffff0e;
  min-height: 78px;
  padding: 0 20px;
  transition: background-color .14s;
}

.ratingsTableRow:last-of-type {
  border-bottom: 0;
}

.ratingsTableRow:hover, .ratingsTableRow:focus-visible {
  background: #ffffff09;
}

.ratingsTableRow[data-own="true"] {
  background: rgb(var(--color-accent-rgb) / .075);
}

.ratingsRank {
  align-items: center;
  gap: 7px;
  display: flex;
}

.ratingsRank b {
  color: #ffffff6b;
  font-size: 14px;
  font-weight: 740;
}

.ratingsRank svg {
  width: 15px;
  height: 15px;
  color: var(--color-accent);
}

.ratingsIdentity {
  align-items: center;
  gap: 13px;
  min-width: 0;
  display: flex;
}

.ratingsIdentity > span:last-child {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.ratingsIdentity strong, .ratingsIdentity small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ratingsIdentity strong {
  font-size: 12px;
  font-weight: 710;
}

.ratingsIdentity strong i {
  background: var(--color-accent);
  color: #111;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 6px;
  margin-left: 7px;
  padding: 3px 6px;
  font-size: 6.5px;
  font-style: normal;
  font-weight: 850;
}

.ratingsIdentity small {
  color: #ffffff5c;
  font-size: 8.5px;
  font-weight: 620;
}

.ratingsMovement {
  color: #ffffff52;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 740;
  display: flex;
}

.ratingsMovement svg {
  width: 14px;
  height: 14px;
}

.ratingsMovement[data-direction="up"] {
  color: #65e879;
}

.ratingsMovement[data-direction="down"] {
  color: #ff7c70;
}

.ratingsMovement > i {
  background: #fff3;
  width: 12px;
  height: 1px;
}

.ratingsValue {
  text-align: right;
  justify-items: end;
  gap: 5px;
  min-width: 0;
  display: grid;
}

.ratingsValue strong {
  font-size: 12px;
  font-weight: 730;
}

.ratingsValue small {
  color: #ffffff4d;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  font-size: 7.5px;
  overflow: hidden;
}

.ratingsTableEmpty {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 310px;
  padding: 40px;
  display: flex;
}

.ratingsTableEmpty > svg {
  width: 42px;
  height: 42px;
  color: rgb(var(--color-accent-rgb) / .7);
  stroke-width: 1.2px;
  margin-bottom: 14px;
}

.ratingsTableEmpty h3 {
  margin: 0;
  font-size: 19px;
}

.ratingsTableEmpty p {
  color: #fff6;
  max-width: 500px;
  margin: 10px 0 20px;
  font-size: 10px;
  line-height: 1.5;
}

.ratingsTableEmpty a {
  background: var(--color-accent);
  color: #111;
  border-radius: 12px;
  place-items: center;
  min-height: 42px;
  padding: 0 18px;
  font-size: 10px;
  font-weight: 760;
  display: grid;
}

.ratingsLoading {
  gap: 1px;
  display: grid;
}

.ratingsLoading i {
  background: linear-gradient(90deg, #ffffff05, #ffffff0e, #ffffff05) 0 0 / 200% 100%;
  height: 78px;
  animation: 1.2s linear infinite ratings-skeleton;
  display: block;
}

.ratingsLoadMore {
  color: #ffffffad;
  cursor: pointer;
  background: #20202480;
  border: 1px solid #ffffff17;
  border-radius: 13px;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  margin: 14px auto 0;
  padding: 0 18px;
  font-size: 9.5px;
  font-weight: 690;
  display: flex;
}

.ratingsLoadMore svg {
  width: 15px;
  height: 15px;
  color: var(--color-accent);
}

.ratingsPageLoading {
  padding: 30px;
}

.ratingsLoadingHero, .ratingsLoadingBoard {
  background: #0f0f14cc;
  border: 1px solid #ffffff12;
  border-radius: 28px;
  gap: 10px;
  padding: 30px;
  display: grid;
}

.ratingsLoadingHero {
  align-content: center;
  min-height: 430px;
}

.ratingsLoadingBoard {
  margin-top: 50px;
}

.ratingsLoadingHero i, .ratingsLoadingBoard i {
  background: #ffffff09;
  border-radius: 16px;
  height: 58px;
  display: block;
}

.ratingsLoadingHero i:first-child {
  width: 35%;
}

.ratingsLoadingHero i:nth-child(2) {
  width: 72%;
  height: 108px;
}

.ratingsLoadingHero i:last-child {
  width: 55%;
}

@keyframes ratings-skeleton {
  to {
    background-position: -200% 0;
  }
}

@media (max-width: 1260px) {
  .ratingsFilters {
    grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(130px, .5fr));
  }

  .ratingsScopeSwitch {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 900px) {
  .ratingsExperience {
    padding: 16px 14px 70px;
  }

  .ratingsHero {
    border-radius: 25px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 34px 26px;
  }

  .ratingsHeroCopy h1 {
    font-size: clamp(50px, 13vw, 78px);
  }

  .ratingsSeasonCard {
    min-height: 190px;
  }

  .ratingsPersonalCard {
    grid-column: 1;
  }

  .ratingsPodium {
    min-height: auto;
    padding: 12px;
  }

  .ratingsPodiumPlace, .ratingsPodiumPlace[data-place="1"] {
    min-height: 235px;
  }

  .ratingsFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ratingsSearch, .ratingsScopeSwitch {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .ratingsExperience {
    padding-left: 10px;
    padding-right: 10px;
  }

  .ratingsHero {
    border-radius: 22px;
    padding: 30px 20px;
  }

  .ratingsHeroCopy h1 {
    margin-top: 17px;
    font-size: clamp(47px, 16vw, 66px);
  }

  .ratingsHeroFacts {
    display: grid;
  }

  .ratingsPersonalCard {
    flex-wrap: wrap;
  }

  .ratingsPersonalCard > span {
    min-width: 100px;
  }

  .ratingsPersonalCard button {
    width: 100%;
    margin-left: 0;
  }

  .ratingsSectionHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .ratingsBoardHeading {
    align-items: stretch;
  }

  .ratingsShareButton {
    justify-content: center;
  }

  .ratingsPodium {
    scroll-snap-type: x mandatory;
    align-items: stretch;
    display: flex;
    overflow-x: auto;
  }

  .ratingsPodiumPlace, .ratingsPodiumPlace[data-place="1"] {
    scroll-snap-align: center;
    min-width: 78vw;
    min-height: 250px;
  }

  .ratingsPodiumPlace[data-place="1"] {
    order: -1;
  }

  .ratingsFilters {
    grid-template-columns: 1fr;
  }

  .ratingsFilters > *, .ratingsSearch, .ratingsScopeSwitch {
    grid-column: 1;
  }

  .ratingsScopeSwitch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: stretch;
    display: grid;
  }

  .ratingsScopeSwitch button {
    justify-content: center;
  }

  .ratingsTableHeader {
    display: none;
  }

  .ratingsTableRow {
    grid-template-columns: 43px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 92px;
    padding: 0 12px;
  }

  .ratingsMovement {
    display: none;
  }

  .ratingsValue {
    max-width: 105px;
  }

  .ratingsValue strong {
    font-size: 10px;
  }

  .ratingsValue small {
    display: none;
  }

  .ratingsIdentity {
    gap: 9px;
  }

  .ratingParticipantMark {
    border-radius: 13px;
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .ratingsIdentity strong {
    font-size: 10.5px;
  }

  .ratingsIdentity small {
    font-size: 7.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ratingsPodiumPlace, .ratingsLoading i {
    transition: none;
    animation: none;
  }
}

.siteSearchControl {
  min-width: 0;
  position: relative;
}

.siteSearchControl.isHeader {
  flex: auto;
  align-self: stretch;
  display: flex;
}

.headerBrandIsland:focus-within {
  z-index: 80;
}

.siteSearchControl .headerBrandSearch {
  width: 100%;
}

.siteSearchControl kbd, .searchWorkspaceBar kbd {
  color: #ffffff61;
  background: #ffffff09;
  border: 1px solid #ffffff1c;
  border-radius: 7px;
  flex: none;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  font-family: inherit;
  font-size: 8px;
  font-weight: 650;
  display: inline-flex;
}

.siteSearchClear {
  color: #ffffff73;
  cursor: pointer;
  background: none;
  border-radius: 50%;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
}

.siteSearchClear:hover, .siteSearchClear:focus-visible {
  color: #fff;
  background: #fff1;
}

.siteSearchClear svg, .siteSearchSpinner {
  width: 14px;
  height: 14px;
}

.siteSearchSpinner, .searchWorkspaceLoader, .searchLoadMore > svg {
  color: var(--color-accent);
  flex: none;
  animation: .8s linear infinite siteSearchSpin;
}

@keyframes siteSearchSpin {
  to {
    transform: rotate(360deg);
  }
}

.siteSearchPopover {
  z-index: 500;
  width: min(480px, 100vw - 44px);
  box-shadow: none;
  -webkit-backdrop-filter: blur(30px) saturate(1.2);
  backdrop-filter: blur(30px) saturate(1.2);
  background: #121212db;
  border: 1px solid #ffffff29;
  border-radius: 22px;
  padding: 7px;
  animation: .15s both siteSearchOpen;
  position: absolute;
  top: calc(100% + 10px);
  left: -7px;
  overflow: hidden;
}

@keyframes siteSearchOpen {
  from {
    opacity: 0;
    transform: translateY(-6px)scale(.99);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.siteSearchResults {
  gap: 2px;
  display: grid;
}

.siteSearchResult {
  color: #fffc;
  border-radius: 15px;
  grid-template-columns: 46px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 62px;
  padding: 6px 8px;
  transition: background-color .13s, color .13s;
  display: grid;
}

.siteSearchResult:hover, .siteSearchResult:focus-visible, .siteSearchResult[data-active="true"] {
  color: #fff;
  background: #ffffff13;
}

.siteSearchResultMedia {
  background: var(--surface-subcard-hover) center/cover no-repeat;
  color: #ffffffb8;
  border-radius: 12px;
  place-items: center;
  width: 46px;
  height: 46px;
  display: grid;
  overflow: hidden;
}

.siteSearchResultMedia svg {
  stroke-width: 1.6px;
  width: 18px;
  height: 18px;
}

.siteSearchResultCopy {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.siteSearchResultCopy small {
  color: var(--color-accent);
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 7px;
  font-weight: 760;
  overflow: hidden;
}

.siteSearchResultCopy strong {
  letter-spacing: -.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 680;
  overflow: hidden;
}

.siteSearchResultCopy p {
  color: #ffffff6b;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 8px;
  line-height: 1.3;
  overflow: hidden;
}

.siteSearchResult > svg, .siteSearchAll > svg {
  color: #ffffff4d;
  stroke-width: 1.7px;
  justify-self: center;
  width: 14px;
  height: 14px;
}

.siteSearchAll {
  color: #fff;
  cursor: pointer;
  text-align: left;
  background: #ffffff0e;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 48px;
  margin-top: 5px;
  padding: 0 14px;
  display: flex;
}

.siteSearchAll:hover, .siteSearchAll:focus-visible, .siteSearchAll[data-active="true"] {
  background: #ffffff1a;
}

.siteSearchAll > span {
  align-items: baseline;
  gap: 8px;
  font-size: 10px;
  font-weight: 680;
  display: flex;
}

.siteSearchAll small {
  color: #ffffff61;
  font-size: 8px;
  font-weight: 520;
}

.siteSearchHint, .siteSearchEmpty {
  color: #ffffff70;
  text-align: center;
  align-content: center;
  place-items: center;
  gap: 8px;
  min-height: 104px;
  padding: 16px;
  display: grid;
}

.siteSearchHint svg, .siteSearchEmpty svg {
  color: #ffffff47;
  stroke-width: 1.5px;
  width: 20px;
  height: 20px;
}

.siteSearchHint p, .siteSearchEmpty p {
  max-width: 290px;
  margin: 0;
  font-size: 9px;
  line-height: 1.45;
}

.siteSearchHint span {
  font-size: 8px;
}

.siteSearchEmpty strong {
  color: #ffffffc7;
  font-size: 11px;
}

.mobileSiteSearchForm {
  background: #ffffff0b;
  border: 1px solid #ffffff1f;
  border-radius: 15px;
  align-items: center;
  gap: 4px;
  min-height: 48px;
  margin: 0 14px 12px;
  padding: 0 8px;
  display: flex;
}

.mobileSiteSearchForm input {
  color: #fff;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  font-size: 12px;
}

.siteSearchControl.isMobile .siteSearchPopover {
  width: auto;
  top: 54px;
  left: 14px;
  right: 14px;
}

.siteSearchPage {
  background: var(--surface-card);
  color: #f5f3ef;
}

.searchWorkspace {
  background: var(--surface-card);
  border: 1px solid #ffffff1c;
  border-radius: 42px;
  min-height: 780px;
  padding: 154px clamp(22px, 6vw, 110px) 100px;
}

.searchWorkspaceHero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto 46px;
  display: grid;
}

.searchWorkspaceHero > div:first-child {
  max-width: 790px;
}

.searchWorkspaceHero p {
  color: var(--color-accent);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 16px;
  font-size: 10px;
  font-weight: 760;
}

.searchWorkspaceHero h1 {
  letter-spacing: -.075em;
  margin: 0;
  font-size: clamp(54px, 7.5vw, 112px);
  font-weight: 520;
  line-height: .84;
}

.searchWorkspaceHero > div:first-child > span {
  color: #ffffff7a;
  max-width: 650px;
  margin-top: 28px;
  font-size: 14px;
  line-height: 1.55;
  display: block;
}

.searchWorkspaceSignal {
  background: var(--surface-subcard);
  border: 1px solid #ffffff1c;
  border-radius: 28px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 132px;
  height: 56px;
  display: flex;
}

.searchWorkspaceSignal > span {
  background: var(--color-accent);
  opacity: .35;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.searchWorkspaceSignal > span:nth-child(2) {
  opacity: .65;
}

.searchWorkspaceSignal > span:nth-child(3) {
  opacity: 1;
}

.searchWorkspaceSignal svg {
  color: #ffffff8f;
  stroke-width: 1.5px;
  width: 17px;
  height: 17px;
  margin-left: 8px;
}

.searchWorkspaceBar {
  background: var(--surface-subcard);
  border: 1px solid #ffffff29;
  border-radius: 23px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  max-width: 1180px;
  min-height: 74px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
}

.searchWorkspaceBar > svg:first-child {
  color: #ffffff94;
  stroke-width: 1.5px;
  width: 24px;
  height: 24px;
}

.searchWorkspaceBar input {
  color: #fff;
  width: 100%;
  min-width: 0;
  font: inherit;
  letter-spacing: -.025em;
  background: none;
  border: 0;
  outline: 0;
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 560;
}

.searchWorkspaceBar input::placeholder {
  color: #ffffff47;
}

.searchWorkspaceBar input::-webkit-search-cancel-button {
  display: none;
}

.searchWorkspaceBar > button {
  color: #ffffff8c;
  cursor: pointer;
  background: #ffffff0f;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}

.searchWorkspaceBar > button:hover {
  color: #fff;
  background: #ffffff1a;
}

.searchWorkspaceBar > button svg {
  width: 17px;
  height: 17px;
}

.searchWorkspaceLoader {
  width: 20px;
  height: 20px;
}

.searchTypeRail {
  scrollbar-width: none;
  gap: 6px;
  max-width: 1180px;
  margin: 14px auto 0;
  padding-bottom: 4px;
  display: flex;
  overflow-x: auto;
}

.searchTypeRail::-webkit-scrollbar {
  display: none;
}

.searchTypeRail button {
  background: var(--surface-subcard);
  color: #ffffff80;
  cursor: pointer;
  border: 1px solid #ffffff1a;
  border-radius: 20px;
  flex: none;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 650;
  display: inline-flex;
}

.searchTypeRail button:hover, .searchTypeRail button[data-active="true"] {
  background: var(--surface-subcard);
  color: #fff;
  border-color: #fff3;
}

.searchTypeRail small {
  color: #ffffff7a;
  background: #fff1;
  border-radius: 10px;
  place-items: center;
  min-width: 19px;
  height: 19px;
  font-size: 8px;
  display: grid;
}

.searchTypeRail button[data-active="true"] small {
  background: var(--color-accent);
  color: #fff;
}

.searchResultsMeta {
  border-bottom: 1px solid #ffffff1a;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  max-width: 1180px;
  margin: 50px auto 18px;
  padding-bottom: 15px;
  display: flex;
}

.searchResultsMeta > span {
  color: #ffffff6b;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 650;
  overflow: hidden;
}

.searchResultsMeta > div {
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.searchResultsMeta strong {
  letter-spacing: -.06em;
  font-size: 30px;
  font-weight: 540;
}

.searchResultsMeta small {
  color: #fff6;
  font-size: 9px;
}

.searchResultsMeta em {
  color: var(--color-accent);
  margin-left: 8px;
  font-size: 8px;
  font-style: normal;
}

.searchResultList {
  gap: 6px;
  max-width: 1180px;
  margin: 0 auto;
  transition: opacity .12s;
  display: grid;
}

.searchResultList[data-loading="true"] {
  opacity: .55;
}

.searchResultCard {
  background: var(--surface-subcard);
  border: 1px solid #ffffff17;
  border-radius: 23px;
  grid-template-columns: 160px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 22px;
  min-width: 0;
  min-height: 138px;
  padding: 14px 16px 14px 14px;
  transition: border-color .15s, background-color .15s;
  display: grid;
}

.searchResultCard:hover {
  background: var(--surface-subcard);
  border-color: #ffffff2e;
}

.searchResultCardMedia {
  background: var(--surface-subcard-hover) center/cover no-repeat;
  color: #ffffff9e;
  border-radius: 15px;
  place-items: center;
  width: 160px;
  height: 108px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.searchResultCardMedia > svg {
  stroke-width: 1.4px;
  width: 28px;
  height: 28px;
}

.searchResultCardMedia > span {
  color: #ffffffb3;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #050505b8;
  border-radius: 7px;
  place-items: center;
  min-width: 27px;
  height: 20px;
  padding: 0 6px;
  font-size: 7px;
  display: grid;
  position: absolute;
  top: 9px;
  left: 9px;
}

.searchResultCardCopy {
  gap: 8px;
  min-width: 0;
  display: grid;
}

.searchResultCardCopy > div {
  align-items: center;
  gap: 8px;
  display: flex;
}

.searchResultCardCopy > div span {
  color: var(--color-accent);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 760;
}

.searchResultCardCopy > div em {
  color: #ffffff73;
  text-transform: uppercase;
  background: #ffffff0f;
  border-radius: 7px;
  padding: 4px 7px;
  font-size: 7px;
  font-style: normal;
}

.searchResultCardCopy h2 {
  letter-spacing: -.045em;
  margin: 0;
  font-size: clamp(20px, 2vw, 29px);
  font-weight: 600;
  line-height: 1.05;
}

.searchResultCardCopy h2 a:hover {
  color: var(--color-accent);
}

.searchResultCardCopy p {
  color: #ffffff75;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 700px;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}

.searchResultCardCopy mark {
  background: rgb(var(--color-accent-rgb) / .23);
  color: var(--color-accent);
  border-radius: 3px;
}

.searchResultCardCopy footer {
  gap: 5px;
  display: flex;
  overflow: hidden;
}

.searchResultCardCopy footer span {
  color: #ffffff4d;
  flex: none;
  font-size: 8px;
}

.searchResultCardAction {
  color: #ffffff9e;
  background: #ffffff12;
  border-radius: 50%;
  place-items: center;
  width: 46px;
  height: 46px;
  transition: background-color .15s, color .15s;
  display: grid;
}

.searchResultCardAction:hover {
  background: var(--color-accent);
  color: #fff;
}

.searchResultCardAction svg {
  width: 17px;
  height: 17px;
}

.searchWorkspaceEmpty, .searchDiscovery {
  background: var(--surface-subcard);
  border: 1px solid #ffffff17;
  border-radius: 25px;
  max-width: 1180px;
  min-height: 300px;
  margin: 0 auto;
}

.searchWorkspaceEmpty {
  text-align: center;
  align-content: center;
  place-items: center;
  gap: 12px;
  padding: 40px;
  display: grid;
}

.searchWorkspaceEmpty > svg {
  color: #ffffff40;
  stroke-width: 1.4px;
  width: 30px;
  height: 30px;
}

.searchWorkspaceEmpty h2 {
  letter-spacing: -.045em;
  margin: 0;
  font-size: 28px;
  font-weight: 560;
}

.searchWorkspaceEmpty p {
  color: #ffffff6b;
  max-width: 480px;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.searchWorkspaceEmpty > button {
  color: #080808;
  cursor: pointer;
  background: #f0ede8;
  border-radius: 18px;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 12px 16px;
  font-size: 10px;
  font-weight: 680;
  display: inline-flex;
}

.searchWorkspaceEmpty > button svg {
  width: 14px;
  height: 14px;
}

.searchDiscovery {
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  display: grid;
  overflow: hidden;
}

.searchDiscovery > div {
  border-right: 1px solid #ffffff14;
  flex-direction: column;
  justify-content: flex-end;
  padding: 42px;
  display: flex;
}

.searchDiscovery > div span {
  color: var(--color-accent);
  font-size: 9px;
}

.searchDiscovery > div h2 {
  letter-spacing: -.055em;
  margin: 15px 0 10px;
  font-size: 38px;
  font-weight: 560;
}

.searchDiscovery > div p {
  color: #ffffff6b;
  max-width: 320px;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}

.searchDiscovery nav {
  padding: 7px;
  display: grid;
}

.searchDiscovery nav button {
  color: #ffffffb8;
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 15px;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 55px;
  padding: 0 17px;
  display: grid;
}

.searchDiscovery nav button:hover {
  color: #fff;
  background: #fff1;
}

.searchDiscovery nav small {
  color: #ffffff40;
  font-size: 8px;
}

.searchDiscovery nav strong {
  font-size: 12px;
  font-weight: 620;
}

.searchDiscovery nav svg {
  color: #ffffff52;
  width: 15px;
  height: 15px;
}

.searchResultSkeleton {
  background: var(--surface-subcard);
  border: 1px solid #ffffff12;
  border-radius: 23px;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  min-height: 138px;
  padding: 14px;
  display: grid;
}

.searchResultSkeleton i {
  background: #ffffff0d;
  border-radius: 15px;
  width: 160px;
  height: 108px;
}

.searchResultSkeleton span {
  background: #ffffff0d;
  border-radius: 8px;
  max-width: 480px;
  height: 17px;
}

.searchResultSkeleton span:last-child {
  max-width: 650px;
  height: 10px;
}

.searchLoadMore {
  background: var(--surface-subcard);
  color: #fff;
  cursor: pointer;
  border: 1px solid #ffffff1f;
  border-radius: 26px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-width: 210px;
  min-height: 52px;
  margin: 24px auto 0;
  padding: 0 18px;
  display: flex;
}

.searchLoadMore:hover {
  background: var(--surface-subcard);
}

.searchLoadMore:disabled {
  cursor: wait;
  opacity: .6;
}

.searchLoadMore span {
  font-size: 10px;
  font-weight: 680;
}

.searchLoadMore small {
  color: #ffffff59;
  font-size: 8px;
}

.searchLoadMore > svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 920px) {
  .siteSearchPopover {
    width: min(460px, 100vw - 28px);
  }

  .searchWorkspace {
    border-radius: 30px;
    padding: 124px 20px 72px;
  }

  .searchWorkspaceHero {
    margin-bottom: 34px;
  }

  .searchWorkspaceSignal {
    display: none;
  }

  .searchWorkspaceHero h1 {
    font-size: clamp(54px, 13vw, 88px);
  }

  .searchResultCard {
    grid-template-columns: 120px minmax(0, 1fr) 42px;
    gap: 16px;
    min-height: 118px;
  }

  .searchResultCardMedia {
    width: 120px;
    height: 90px;
  }
}

@media (max-width: 680px) {
  .searchWorkspace {
    border-radius: 25px;
    min-height: 650px;
    padding: 108px 12px 60px;
  }

  .searchWorkspaceHero {
    margin-bottom: 26px;
    padding: 0 5px;
  }

  .searchWorkspaceHero h1 {
    font-size: 54px;
  }

  .searchWorkspaceHero > div:first-child > span {
    margin-top: 20px;
    font-size: 12px;
  }

  .searchWorkspaceBar {
    border-radius: 18px;
    gap: 10px;
    min-height: 60px;
    padding: 0 14px;
  }

  .searchWorkspaceBar > svg:first-child {
    width: 19px;
    height: 19px;
  }

  .searchWorkspaceBar input {
    font-size: 14px;
  }

  .searchWorkspaceBar kbd {
    display: none;
  }

  .searchResultsMeta {
    margin-top: 32px;
  }

  .searchResultCard {
    border-radius: 19px;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-height: 0;
    padding: 10px;
  }

  .searchResultCardMedia {
    border-radius: 13px;
    width: 76px;
    height: 76px;
  }

  .searchResultCardMedia > span {
    min-width: 23px;
    height: 17px;
    top: 6px;
    left: 6px;
  }

  .searchResultCardCopy {
    padding: 5px 3px 4px 0;
  }

  .searchResultCardCopy h2 {
    font-size: 18px;
  }

  .searchResultCardCopy p {
    -webkit-line-clamp: 2;
    font-size: 9px;
  }

  .searchResultCardCopy footer, .searchResultCardAction {
    display: none;
  }

  .searchDiscovery {
    grid-template-columns: 1fr;
  }

  .searchDiscovery > div {
    border-bottom: 1px solid #ffffff14;
    border-right: 0;
    min-height: 170px;
    padding: 26px;
  }

  .searchDiscovery > div h2 {
    font-size: 30px;
  }

  .searchResultSkeleton {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    min-height: 96px;
    padding: 10px;
  }

  .searchResultSkeleton i {
    width: 76px;
    height: 76px;
  }
}

.communicationPage {
  color: #f5f3ef;
  background: var(--surface-card);
  min-height: 100dvh;
  overflow: hidden;
}

.communicationFrame {
  z-index: 80;
  background: var(--surface-card);
  border: 1px solid #ffffff21;
  border-radius: 28px;
  grid-template-columns: 74px minmax(260px, 318px) minmax(420px, 1fr) minmax(230px, 288px);
  min-width: 0;
  display: grid;
  position: fixed;
  inset: 100px clamp(12px, 1.3vw, 22px) 16px;
  overflow: hidden;
}

.communicationFrame :is(button, input, textarea) {
  font: inherit;
}

.communicationFrame button {
  color: inherit;
}

.communicationFrame :is(a, button, input, textarea):focus-visible {
  outline: 1px solid rgb(var(--color-accent-rgb) / .9);
  outline-offset: 2px;
}

.communicationRail {
  background: var(--surface-card);
  border-right: 1px solid #ffffff14;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 12px 10px;
  display: flex;
}

.communicationRailHome, .communicationRailItem {
  background: var(--surface-subcard);
  color: #ffffff9e;
  cursor: pointer;
  border: 0;
  border-radius: 16px;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 46px;
  transition: border-radius .15s, color .15s, background-color .15s;
  display: grid;
  position: relative;
}

.communicationRailHome {
  color: #0a0a0b;
  background: #f4f1ed;
  margin-bottom: 7px;
  font-size: 17px;
  font-weight: 850;
}

.communicationRailItem svg {
  stroke-width: 1.7px;
  width: 19px;
  height: 19px;
}

.communicationRailItem > b {
  box-sizing: border-box;
  color: #fff;
  background: #df3f49;
  border: 2px solid #080809;
  border-radius: 9px;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 7px;
  font-style: normal;
  display: grid;
  position: absolute;
  bottom: -4px;
  right: -4px;
}

.communicationRailItem:hover, .communicationRailItem.isActive {
  background: var(--color-accent);
  color: #fff;
  border-radius: 13px;
}

.communicationRailItem i {
  background: #fff;
  border-radius: 0 4px 4px 0;
  width: 3px;
  height: 20px;
  position: absolute;
  left: -10px;
}

.communicationRailSpacer {
  flex: 1;
}

.communicationList {
  background: var(--surface-subcard);
  border-right: 1px solid #ffffff14;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  display: grid;
}

.communicationList > header, .communicationChatHeader, .communicationInfo > header {
  box-sizing: border-box;
  border-bottom: 1px solid #ffffff14;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px 16px;
  display: flex;
}

.communicationList > header div {
  min-width: 0;
}

.communicationList > header span {
  color: var(--color-accent);
  letter-spacing: .14em;
  margin-bottom: 4px;
  font-size: 8px;
  font-weight: 750;
  display: block;
}

.communicationList > header h1 {
  letter-spacing: -.035em;
  margin: 0;
  font-size: 20px;
  font-weight: 680;
}

.communicationList > header button, .communicationListHeaderActions button, .communicationChatHeader > button, .communicationChatHeader > a, .communicationInfo > header button {
  color: #ffffffb8;
  cursor: pointer;
  background: #ffffff0e;
  border: 0;
  border-radius: 11px;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.communicationList > header button svg, .communicationListHeaderActions button svg, .communicationChatHeader > :is(button, a) svg, .communicationInfo > header button svg {
  width: 17px;
  height: 17px;
}

.communicationListHeaderActions {
  flex: none;
  gap: 6px;
  display: flex;
}

.communicationListHeaderActions button {
  position: relative;
}

.communicationListHeaderActions button[data-active="true"] {
  color: #fff;
  background: #ffffff1c;
}

.communicationListHeaderActions button > b {
  box-sizing: border-box;
  border: 2px solid var(--surface-subcard);
  color: #fff;
  background: #df3f49;
  border-radius: 9px;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 7px;
  display: grid;
  position: absolute;
  top: -4px;
  right: -4px;
}

.communicationNewDialog {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  padding: 10px 12px 0;
  display: grid;
}

.communicationNewDialog label, .communicationSearch {
  background: var(--surface-subcard);
  color: #ffffff61;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 39px;
  padding: 0 11px;
  display: flex;
}

.communicationNewDialog label svg, .communicationSearch svg {
  flex: none;
  width: 15px;
  height: 15px;
}

.communicationNewDialog input, .communicationSearch input {
  color: #fff;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  font-size: 11px;
}

.communicationNewDialog button {
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 11px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
}

.communicationNewDialog button:disabled {
  cursor: default;
  opacity: .35;
}

.communicationSearch {
  margin: 10px 12px 8px;
}

.communicationListLabel {
  color: #ffffff61;
  letter-spacing: .1em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  padding: 7px 16px 6px;
  font-size: 9px;
  font-weight: 720;
  display: flex;
}

.communicationListLabel small {
  background: rgb(var(--color-accent-rgb) / .15);
  min-width: 18px;
  height: 18px;
  color: var(--color-accent);
  border-radius: 9px;
  place-items: center;
  display: grid;
}

.conversationListNav {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ffffff1f transparent;
  min-height: 0;
  padding: 0 7px 12px;
  overflow-y: auto;
}

.conversationListNav[data-virtual="true"] {
  padding-bottom: 0;
  overflow: hidden;
}

.communicationConversationVirtualList {
  scrollbar-width: thin;
  scrollbar-color: #ffffff1f transparent;
  height: 100%;
}

.communicationConversationMore {
  color: #ffffff6b;
  place-items: center;
  height: 44px;
  display: grid;
}

.communicationConversationMore svg {
  width: 17px;
  height: 17px;
}

.conversationListNav > a, .communicationConversationRow {
  color: #ffffffbd;
  border-radius: 14px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 62px;
  padding: 7px 9px;
  display: grid;
  position: relative;
}

.conversationListNav > a:hover, .conversationListNav > a[data-active="true"], .communicationConversationRow:hover, .communicationConversationRow[data-active="true"] {
  color: #fff;
  background: #ffffff0f;
}

.conversationListNav > a[data-active="true"]:before, .communicationConversationRow[data-active="true"]:before {
  background: var(--color-accent);
  content: "";
  border-radius: 0 4px 4px 0;
  width: 3px;
  height: 26px;
  position: absolute;
  left: -7px;
}

.conversationListNav > a > span:nth-child(2), .communicationConversationRow > span:nth-child(2) {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.conversationListNav > a strong, .communicationConversationRow strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 680;
  overflow: hidden;
}

.conversationListNav > a small, .communicationConversationRow small {
  color: #fff6;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.conversationListNav > a time, .communicationConversationRow time {
  color: #ffffff45;
  align-self: start;
  margin-top: 5px;
  font-size: 8px;
}

.conversationListNav > a b, .communicationConversationRow b {
  box-sizing: border-box;
  background: var(--color-accent);
  color: #fff;
  border-radius: 9px;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 8px;
  display: grid;
  position: absolute;
  bottom: 9px;
  right: 9px;
}

.communicationAvatar {
  color: #fff;
  background: #262628 center / cover no-repeat;
  border-radius: 50%;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 15px;
  font-weight: 720;
  display: grid;
}

.communicationListVoiceFooter {
  background: var(--surface-card);
  border-top: 1px solid #ffffff12;
  min-width: 0;
  padding: 7px;
  display: none;
}

.communicationListVoiceFooter[data-active="true"] {
  display: block;
}

.communicationListVoiceFooter > div {
  min-width: 0;
}

.communicationListEmpty {
  color: #ffffff47;
  text-align: center;
  justify-items: center;
  padding: 44px 22px;
  display: grid;
}

.communicationListEmpty svg {
  width: 24px;
  margin-bottom: 13px;
}

.communicationListEmpty strong {
  color: #ffffffb8;
  font-size: 12px;
}

.communicationListEmpty p {
  max-width: 190px;
  margin: 8px 0 0;
  font-size: 10px;
  line-height: 1.5;
}

.conversationSkeleton {
  background: #ffffff0a;
  border-radius: 13px;
  height: 54px;
  margin: 5px;
  animation: 1.2s ease-in-out infinite alternate communicationSkeleton;
  display: block;
}

@keyframes communicationSkeleton {
  to {
    opacity: .4;
  }
}

.communicationChat {
  background: var(--surface-card);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  position: relative;
}

.communicationChatHeader {
  background: #0d0d0ef0;
  grid-row: 1;
  justify-content: flex-start;
  min-height: 68px;
  padding-left: 18px;
  padding-right: 13px;
}

.communicationRequest, .communicationPending {
  grid-row: 2;
}

.communicationMessages {
  grid-row: 3;
}

.communicationTyping {
  grid-row: 4;
}

.communicationComposer {
  grid-row: 5;
}

.communicationChatHeader > a {
  display: none;
}

.communicationChatHeader .communicationAvatar {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.communicationChatHeader > div {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.communicationChatHeader strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.communicationChatHeader span {
  color: #ffffff63;
  font-size: 9px;
}

.communicationChatHeader > button {
  margin-left: auto;
}

.communicationRequest {
  background: rgb(var(--color-accent-rgb) / .08);
  border-bottom: 1px solid #ffffff14;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  display: grid;
}

.communicationRequest > svg {
  width: 19px;
  color: var(--color-accent);
}

.communicationRequest div {
  gap: 3px;
  display: grid;
}

.communicationRequest strong {
  font-size: 10px;
}

.communicationRequest p {
  color: #ffffff75;
  margin: 0;
  font-size: 9px;
}

.communicationRequest button {
  cursor: pointer;
  background: none;
  border: 1px solid #ffffff1a;
  border-radius: 9px;
  min-height: 31px;
  padding: 0 11px;
  font-size: 9px;
  font-weight: 680;
}

.communicationRequest button:last-child {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.communicationPending {
  color: var(--color-accent);
  background: rgb(var(--color-accent-rgb) / .055);
  border-bottom: 1px solid #ffffff12;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  display: flex;
}

.communicationPending svg {
  width: 17px;
}

.communicationPending span {
  gap: 2px;
  display: grid;
}

.communicationPending strong {
  font-size: 9px;
}

.communicationPending small {
  color: #fff6;
  font-size: 8px;
}

.communicationMessages {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ffffff1f transparent;
  min-height: 0;
  padding: 0;
  overflow-y: auto;
}

.communicationMessageListFooter {
  place-items: center;
  min-height: 20px;
  padding-bottom: 4px;
  display: grid;
}

.communicationConversationStart {
  padding: 42px 24px 28px;
}

.communicationConversationStart .communicationAvatar {
  width: 70px;
  height: 70px;
  margin-bottom: 16px;
  font-size: 25px;
}

.communicationConversationStart h2 {
  letter-spacing: -.04em;
  margin: 0;
  font-size: clamp(25px, 2.2vw, 36px);
}

.communicationConversationStart p {
  color: #fff6;
  margin: 7px 0 0;
  font-size: 10px;
}

.communicationMessage {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  min-width: 0;
  padding: 7px 24px;
  display: grid;
  position: relative;
}

.communicationUnreadDivider {
  height: 29px;
  color: var(--color-accent);
  letter-spacing: .045em;
  text-transform: uppercase;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  padding: 0 24px;
  font-size: 8px;
  font-weight: 760;
  display: flex;
  position: relative;
}

.communicationUnreadDivider:before {
  background: rgb(var(--color-accent-rgb) / .72);
  content: "";
  height: 1px;
  position: absolute;
  left: 24px;
  right: 24px;
}

.communicationUnreadDivider :is(span, b) {
  background: var(--surface-card);
  padding-left: 7px;
  position: relative;
}

.communicationUnreadDivider b {
  background: var(--color-accent);
  color: #fff;
  text-align: center;
  border-radius: 999px;
  min-width: 18px;
  padding: 2px 5px;
  font-size: 7px;
}

.communicationMessage:hover {
  background: #ffffff06;
}

.communicationMessage > .communicationAvatar {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.communicationMessageBody {
  min-width: 0;
}

.communicationMessageBody > header {
  align-items: baseline;
  gap: 8px;
  min-height: 19px;
  display: flex;
}

.communicationMessageBody > header strong {
  color: #fff;
  font-size: 11px;
  font-weight: 680;
}

.communicationMessage[data-own="true"] .communicationMessageBody > header strong {
  color: var(--color-accent);
}

.communicationMessageBody > header time, .communicationMessageBody > header small {
  color: #ffffff47;
  font-size: 8px;
}

.communicationBotBadge {
  background: var(--color-accent);
  color: #fff;
  letter-spacing: .05em;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 6px;
  font-weight: 800;
}

.communicationMessageBody > :is(p, ul, ol, blockquote, pre) {
  color: #ffffffc7;
  overflow-wrap: anywhere;
  max-width: 76ch;
  margin: 1px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.communicationMessageBody a {
  color: var(--color-accent);
  text-underline-offset: 2px;
  text-decoration: underline;
}

.communicationSpoiler {
  color: #0000;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  -webkit-user-select: none;
  user-select: none;
  background: #ffffff2e;
  border: 0;
  border-radius: 4px;
  padding: 1px 4px;
  transition: background .12s, color .12s;
  display: inline;
}

.communicationSpoiler:hover, .communicationSpoiler:focus-visible {
  background: #ffffff3d;
}

.communicationSpoiler:focus-visible {
  outline: 2px solid rgb(var(--color-accent-rgb) / .7);
  outline-offset: 2px;
}

.communicationSpoiler[data-revealed="true"] {
  color: inherit;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
  background: #ffffff14;
}

.communicationMessageBody code {
  background: #ffffff14;
  border-radius: 4px;
  padding: 2px 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
}

.communicationMessageBody pre {
  background: var(--surface-card);
  border-radius: 9px;
  padding: 10px;
  overflow: auto;
}

.communicationForwardedMessage {
  box-sizing: border-box;
  border: 1px solid #ffffff17;
  border-left: 3px solid rgb(var(--color-accent-rgb) / .72);
  background: #ffffff09;
  border-radius: 5px 13px 13px 5px;
  gap: 8px;
  width: min(560px, 92%);
  margin-top: 7px;
  padding: 10px 12px 11px;
  display: grid;
  position: relative;
}

.communicationForwardedMessage > header {
  color: #ffffff61;
  letter-spacing: .04em;
  text-transform: uppercase;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 8px;
  font-weight: 720;
  display: flex;
}

.communicationForwardedMessage > header > svg {
  width: 12px;
  height: 12px;
  color: var(--color-accent);
}

.communicationForwardedMessage > header > a {
  color: #ffffff7a;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  overflow: hidden;
}

.communicationForwardedMessage > header > a:hover {
  color: #fff;
}

.communicationForwardedMessage > header > a svg {
  flex: none;
  width: 10px;
  transform: rotate(135deg);
}

.communicationForwardedMessage > p {
  color: #fffc;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  margin: 0;
  font-size: 12px;
  line-height: 1.52;
}

.communicationForwardedMessage .communicationAttachmentStack {
  width: 100%;
  margin-top: 0;
}

.communicationInlineExpression {
  object-fit: contain;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  margin: -4px 2px;
  display: inline-block;
}

.communicationMessageSticker {
  object-fit: contain;
  object-position: left center;
  width: min(180px, 42vw);
  max-height: 180px;
  margin-top: 6px;
  display: block;
}

.communicationMessagePoll {
  background: #ffffff06;
  border: 1px solid #ffffff17;
  border-radius: 14px;
  gap: 10px;
  width: min(460px, 100%);
  margin-top: 7px;
  padding: 13px;
  display: grid;
}

.communicationMessagePoll > header {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  display: grid;
}

.communicationMessagePoll > header > svg {
  width: 16px;
  color: var(--color-accent);
}

.communicationMessagePoll > header > div {
  gap: 3px;
  display: grid;
}

.communicationMessagePoll > header strong {
  font-size: 11px;
}

.communicationMessagePoll > header small, .communicationMessagePoll > footer {
  color: #ffffff59;
  font-size: 8px;
}

.communicationMessagePoll > div {
  gap: 5px;
  display: grid;
}

.communicationMessagePoll > div > button {
  color: #ffffffc2;
  text-align: left;
  cursor: pointer;
  background: #ffffff06;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.communicationMessagePoll > div > button > i {
  background: rgb(var(--color-accent-rgb) / .11);
  pointer-events: none;
  position: absolute;
  inset: 0 auto 0 0;
}

.communicationMessagePoll > div > button[data-active="true"] {
  border-color: rgb(var(--color-accent-rgb) / .48);
}

.communicationMessagePoll > div > button > span, .communicationMessagePoll > div > button > b {
  z-index: 1;
  position: relative;
}

.communicationMessagePoll > div > button > span {
  font-size: 9px;
}

.communicationMessagePoll > div > button > b {
  color: #fff6;
  font-size: 8px;
}

.communicationMessagePoll > footer {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.communicationMessagePoll > footer button {
  color: var(--color-accent);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 8px;
  font-weight: 700;
}

.communicationDeletedMessage {
  font-style: italic;
  color: #ffffff52 !important;
}

.communicationReplyReference {
  color: #ffffff61;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 7px;
  max-width: min(520px, 90%);
  margin: 2px 0 4px;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.communicationReplyReference svg {
  flex: none;
  width: 13px;
}

.communicationReplyReference span {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.communicationReplyReference strong {
  color: #ffffffa3;
  margin-right: 6px;
}

.communicationReplyReference[data-deleted="true"] {
  cursor: default;
  opacity: .72;
}

.communicationMessageActions {
  background: var(--surface-subcard);
  border: 1px solid #ffffff1a;
  border-radius: 10px;
  padding: 3px;
  display: none;
  position: absolute;
  top: -18px;
  right: 18px;
}

.communicationMessage:hover .communicationMessageActions, .communicationMessage:focus-within .communicationMessageActions, .communicationMessages:focus-visible .communicationMessage[data-keyboard-active="true"] .communicationMessageActions {
  display: flex;
}

.communicationMessages:focus-visible .communicationMessage[data-keyboard-active="true"] {
  outline: 1px solid rgb(var(--color-accent-rgb) / .72);
  outline-offset: -1px;
  background: rgb(var(--color-accent-rgb) / .07);
  box-shadow: inset 3px 0 0 rgb(var(--color-accent-rgb) / .88);
}

.communicationMessageActions button {
  color: #ffffff8c;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  place-items: center;
  width: 28px;
  height: 27px;
  display: grid;
}

.communicationMessageActions button:hover {
  color: #fff;
  background: #ffffff12;
}

.communicationMessageActions svg {
  width: 13px;
  height: 13px;
}

.communicationTyping {
  color: #ffffff61;
  min-height: 18px;
  padding: 0 20px;
  font-size: 8px;
}

.communicationTyping[data-visible="true"] {
  color: #9bd7a0;
}

.communicationComposer {
  padding: 0 16px 14px;
}

.communicationComposer textarea {
  box-sizing: border-box;
  resize: none;
  color: #fff;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-height: 22px;
  max-height: 130px;
  font-size: 12px;
  line-height: 1.45;
}

.communicationComposer textarea::placeholder {
  color: #ffffff4d;
}

.communicationComposerContext {
  background: rgb(var(--color-accent-rgb) / .1);
  color: #ffffff85;
  border-radius: 10px 10px 0 0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 5px;
  padding: 8px 10px;
  font-size: 9px;
  display: flex;
}

.communicationComposerContext span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.communicationComposerContext strong {
  color: #fffc;
  font-weight: 580;
}

.communicationComposerContext button {
  cursor: pointer;
  background: none;
  border: 0;
  flex: none;
  place-items: center;
  display: grid;
}

.communicationComposerContext svg {
  width: 14px;
}

.communicationEmptyState, .communicationChatLoading {
  text-align: center;
  grid-row: 1 / -1;
  place-self: center;
  justify-items: center;
  max-width: 360px;
  padding: 30px;
  display: grid;
}

.communicationEmptyState > span {
  background: var(--surface-subcard);
  width: 64px;
  height: 64px;
  color: var(--color-accent);
  border-radius: 22px;
  place-items: center;
  display: grid;
}

.communicationEmptyState > span svg {
  width: 25px;
}

.communicationEmptyState h2 {
  letter-spacing: -.035em;
  margin: 20px 0 0;
  font-size: 22px;
}

.communicationEmptyState p {
  color: #fff6;
  margin: 9px 0 20px;
  font-size: 11px;
  line-height: 1.55;
}

.communicationEmptyState :is(button, a) {
  background: var(--surface-subcard);
  color: #fff;
  cursor: pointer;
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 10px;
  display: inline-flex;
}

.communicationEmptyState button svg {
  width: 14px;
}

.communicationChatLoading {
  gap: 6px;
  display: flex;
}

.communicationChatLoading i {
  background: var(--color-accent);
  border-radius: 50%;
  width: 7px;
  height: 7px;
  animation: .9s ease-in-out infinite alternate communicationDots;
}

.communicationChatLoading i:nth-child(2) {
  animation-delay: .15s;
}

.communicationChatLoading i:nth-child(3) {
  animation-delay: .3s;
}

@keyframes communicationDots {
  to {
    opacity: .2;
    transform: translateY(-5px);
  }
}

.communicationError {
  border: 1px solid rgb(var(--color-accent-rgb) / .32);
  color: #ffb098;
  cursor: pointer;
  background: #251410;
  border-radius: 11px;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  padding: 10px 12px;
  font-size: 9px;
  display: flex;
  position: absolute;
  bottom: 82px;
  right: 16px;
}

.communicationError svg {
  flex: none;
  width: 13px;
}

.communicationInfo {
  background: var(--surface-subcard);
  border-left: 1px solid #ffffff14;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.communicationInfo > header strong {
  font-size: 11px;
}

.communicationInfoProfile {
  text-align: center;
  justify-items: center;
  padding: 32px 18px 24px;
  display: grid;
}

.communicationInfoProfile .communicationAvatar {
  width: 82px;
  height: 82px;
  margin-bottom: 16px;
  font-size: 28px;
}

.communicationInfoProfile h2 {
  letter-spacing: -.03em;
  margin: 0;
  font-size: 19px;
}

.communicationInfoProfile > a {
  color: var(--color-accent);
  margin-top: 5px;
  font-size: 10px;
}

.communicationInfoProfile > span {
  color: #fff6;
  letter-spacing: .06em;
  text-transform: uppercase;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 8px;
  display: inline-flex;
}

.communicationInfoProfile > span i {
  background: #6ddd78;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.communicationInfo > section {
  border-top: 1px solid #ffffff12;
  padding: 16px;
}

.communicationInfo > section > span {
  color: #ffffff52;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 9px;
  font-size: 8px;
  font-weight: 700;
  display: block;
}

.communicationInfo > section button {
  color: #ffffff9e;
  cursor: pointer;
  background: #ffffff0a;
  border: 0;
  border-radius: 10px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  font-size: 9px;
  display: flex;
}

.communicationInfo > section button:hover {
  background: rgb(var(--color-accent-rgb) / .1);
  color: #ff8b70;
}

.communicationInfo > section button svg {
  width: 14px;
}

.communicationInfoEmpty {
  color: #ffffff3d;
  text-align: center;
  align-content: center;
  justify-items: center;
  padding: 24px;
  display: grid;
}

.communicationInfoEmpty svg {
  width: 26px;
}

.communicationInfoEmpty strong {
  color: #ffffff8c;
  letter-spacing: .13em;
  margin-top: 13px;
  font-size: 9px;
}

.communicationInfoEmpty p {
  max-width: 190px;
  font-size: 9px;
  line-height: 1.55;
}

.communicationFrame.communicationAuthGate {
  background: var(--surface-card);
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  display: grid;
}

.communicationAuthGate > div {
  text-align: center;
  justify-items: center;
  max-width: 520px;
  padding: 40px;
  display: grid;
}

.communicationAuthGate > div > svg {
  width: 34px;
  height: 34px;
  color: var(--color-accent);
  margin-bottom: 20px;
}

.communicationAuthGate span {
  color: var(--color-accent);
  letter-spacing: .15em;
  font-size: 9px;
  font-weight: 750;
}

.communicationAuthGate h1 {
  letter-spacing: -.05em;
  margin: 15px 0 0;
  font-size: clamp(30px, 4vw, 52px);
  line-height: .96;
}

.communicationAuthGate p {
  color: #ffffff73;
  margin: 16px 0 24px;
  font-size: 12px;
}

.communicationAuthGate a {
  background: var(--color-accent);
  color: #fff;
  border-radius: 14px;
  place-items: center;
  min-width: 120px;
  min-height: 44px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.publicProfileMessageButton {
  color: #fff;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: #0e0e0fb8;
  border: 1px solid #fff3;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  margin: 0 0 9px auto;
  padding: 0 19px;
  font-size: 11px;
  font-weight: 680;
  display: inline-flex;
}

.publicProfileMessageButton:hover {
  background: #1c1c1dd1;
  border-color: #ffffff61;
}

.publicProfileMessageButton svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1280px) {
  .communicationFrame {
    grid-template-columns: 68px minmax(250px, 300px) minmax(390px, 1fr);
  }

  .communicationInfo {
    z-index: 5;
    border-left-color: #ffffff21;
    width: min(288px, 82vw);
    transition: transform .18s;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    transform: translateX(102%);
    box-shadow: -20px 0 60px #00000059;
  }

  .communicationInfo[data-open="true"] {
    transform: translateX(0);
  }

  .communicationInfoEmpty {
    display: none;
  }
}

@media (max-width: 920px) {
  .communicationFrame {
    border-radius: 22px;
    grid-template-rows: minmax(0, 1fr) 58px;
    grid-template-columns: minmax(0, 1fr);
    inset: 88px 8px 8px;
  }

  .communicationRail {
    border-top: 1px solid #ffffff14;
    border-right: 0;
    flex-direction: row;
    grid-row: 2;
    padding: 6px 12px;
    display: flex;
  }

  .communicationRailHome {
    margin: 0 7px 0 0;
  }

  .communicationRailHome, .communicationRailItem {
    border-radius: 14px;
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .communicationRailItem i {
    border-radius: 4px 4px 0 0;
    width: 20px;
    height: 3px;
    top: auto;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
  }

  .communicationList {
    border-right: 0;
    grid-row: 1;
  }

  .communicationChat {
    grid-row: 1;
    display: none;
  }

  .communicationFrame[data-chat-open="true"] .communicationList {
    display: none;
  }

  .communicationFrame[data-chat-open="true"] .communicationChat, .communicationChatHeader > a {
    display: grid;
  }

  .communicationInfo {
    bottom: 58px;
  }

  .communicationRequest {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .communicationRequest button {
    grid-row: 2;
  }

  .communicationRequest button:nth-last-child(2) {
    grid-column: 1;
  }

  .communicationRequest button:last-child {
    grid-column: 2;
  }

  .publicProfileMessageButton {
    position: absolute;
    bottom: -64px;
    right: 0;
  }
}

@media (max-width: 560px) {
  .communicationFrame {
    border-radius: 18px;
    inset: 79px 5px 5px;
  }

  .communicationList > header, .communicationChatHeader {
    min-height: 60px;
  }

  .communicationMessage {
    padding-left: 14px;
    padding-right: 14px;
  }

  .communicationConversationStart {
    padding-left: 16px;
    padding-right: 16px;
  }

  .communicationComposer {
    padding-bottom: 9px;
    padding-left: 9px;
    padding-right: 9px;
  }

  .communicationMessageActions {
    right: 8px;
  }

  .publicProfileMessageButton {
    bottom: -66px;
    left: 0;
    right: auto;
  }
}

.communicationFrame {
  background: var(--surface-card);
  border-color: #ffffff1c;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: 68px minmax(280px, 310px) minmax(460px, 1fr) minmax(270px, 310px);
}

.communicationFrame svg {
  flex: none;
}

.communicationFrame[data-voice-open="true"] {
  grid-template-columns: 68px minmax(280px, 310px) minmax(460px, 1fr);
}

.communicationFrame[data-voice-open="true"] .communicationInfo {
  display: none;
}

.communicationGroupAvatar {
  background-color: var(--surface-subcard-hover);
  border-radius: 15px;
}

.communicationGroupAvatar svg {
  width: 19px;
  height: 19px;
}

.communicationInboxTabs {
  background: #ffffff0a;
  border-radius: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin: 11px 12px 0;
  padding: 3px;
  display: grid;
}

.communicationInboxTabs[data-mode="friends"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.communicationInboxTabs button {
  color: #ffffff6b;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  min-height: 30px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 650;
}

.communicationInboxTabs button b {
  background: rgb(var(--color-accent-rgb) / .18);
  min-width: 15px;
  height: 15px;
  color: var(--color-accent);
  border-radius: 8px;
  place-items: center;
  margin-left: 4px;
  padding: 0 4px;
  font-size: 7px;
  display: inline-grid;
}

.communicationInboxTabs button[aria-selected="true"] {
  color: #fff;
  background: #ffffff14;
}

.communicationFriendRequest {
  background: #ffffff09;
  border: 1px solid #ffffff12;
  border-radius: 12px;
  grid-template-columns: 14px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin: 9px 12px 0;
  padding: 0 5px 0 11px;
  display: grid;
}

.communicationFriendRequest > svg {
  color: #ffffff57;
  width: 14px;
}

.communicationFriendRequest input {
  color: #fff;
  background: none;
  border: 0;
  outline: 0;
  min-width: 0;
  font-size: 10px;
}

.communicationFriendRequest input::placeholder {
  color: #ffffff45;
}

.communicationFriendRequest button, .communicationFriendRow nav button {
  color: #ffffff94;
  cursor: pointer;
  background: #ffffff0e;
  border: 0;
  border-radius: 9px;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}

.communicationFriendRequest button:hover, .communicationFriendRow nav button:hover {
  color: #fff;
  background: #ffffff1a;
}

.communicationFriendRequest button:disabled, .communicationFriendRow nav button:disabled {
  cursor: wait;
  opacity: .45;
}

.communicationFriendRequest button svg, .communicationFriendRow nav button svg {
  width: 13px;
  height: 13px;
}

.communicationFriendRow {
  border-radius: 13px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 54px;
  padding: 5px 7px 5px 10px;
  display: grid;
}

.communicationFriendRow:hover {
  background: #ffffff0b;
}

.communicationFriendIdentity {
  min-width: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0;
  display: grid;
}

.communicationFriendIdentity:disabled {
  cursor: default;
}

.communicationFriendIdentity > span:first-child {
  position: relative;
}

.communicationFriendIdentity .communicationAvatar {
  border-radius: 12px;
  width: 36px;
  height: 36px;
}

.communicationFriendIdentity > span:first-child > i, .communicationFriendsHome > header > span i, .communicationPresenceCard > header > span i {
  box-sizing: border-box;
  border: 2px solid var(--surface-subcard);
  background: #ffffff4d;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  position: absolute;
  bottom: -1px;
  right: -1px;
}

.communicationFriendRow[data-status="online"] .communicationFriendIdentity > span:first-child > i, .communicationFriendsHome > header > span[data-status="online"] i, .communicationPresenceCard > header > span[data-status="online"] i {
  background: #68d878;
}

.communicationFriendRow[data-status="idle"] .communicationFriendIdentity > span:first-child > i, .communicationFriendsHome > header > span[data-status="idle"] i, .communicationPresenceCard > header > span[data-status="idle"] i {
  background: #e6ab45;
}

.communicationFriendRow[data-status="dnd"] .communicationFriendIdentity > span:first-child > i, .communicationFriendsHome > header > span[data-status="dnd"] i, .communicationPresenceCard > header > span[data-status="dnd"] i {
  background: #e2575f;
}

.communicationFriendIdentity > span:last-child {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.communicationFriendIdentity strong, .communicationFriendIdentity small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.communicationFriendIdentity strong {
  color: #ffffffd1;
  font-size: 11px;
  font-weight: 680;
}

.communicationFriendIdentity small {
  color: #ffffff57;
  font-size: 8px;
}

.communicationFriendRow nav {
  gap: 4px;
  display: flex;
}

.communicationFriendRow nav button.isAccept {
  color: #76dc83;
}

.communicationFriendRow nav button.isDanger:hover {
  color: #f0787f;
  background: #e2575f24;
}

.communicationFriendsHome {
  place-self: center;
  gap: 14px;
  width: min(680px, 100% - 48px);
  display: grid;
}

.communicationFriendsHome > header {
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  display: grid;
}

.communicationFriendsHome > header > span {
  color: #ffffffbd;
  background: #fff1;
  border-radius: 16px;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid;
  position: relative;
}

.communicationFriendsHome > header > span svg {
  width: 21px;
}

.communicationFriendsHome > header > span i {
  border-color: var(--surface-card);
  width: 11px;
  height: 11px;
  bottom: 1px;
  right: 1px;
}

.communicationFriendsHome > header small, .communicationPresenceCard small {
  color: #ffffff4d;
  letter-spacing: .08em;
  font-size: 8px;
}

.communicationFriendsHome > header h2 {
  color: #fff;
  letter-spacing: -.04em;
  margin: 2px 0 0;
  font-size: 24px;
}

.communicationFriendsHome > header p {
  color: #fff6;
  margin: 3px 0 0;
  font-size: 9px;
}

.communicationPresenceCard {
  background: #ffffff09;
  border: 1px solid #ffffff13;
  border-radius: 18px;
  padding: 16px;
}

.communicationPresenceCard > header {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  display: flex;
}

.communicationPresenceCard > header > div {
  gap: 3px;
  display: grid;
}

.communicationPresenceCard > header strong {
  font-size: 11px;
}

.communicationPresenceCard > header > span {
  color: #ffffff8f;
  background: #ffffff0b;
  border-radius: 13px;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 10px 0 24px;
  font-size: 8px;
  display: inline-flex;
  position: relative;
}

.communicationPresenceCard > header > span i {
  border: 0;
  width: 8px;
  height: 8px;
  inset: 50% auto auto 10px;
  transform: translateY(-50%);
}

.communicationPresenceCard > div {
  grid-template-columns: 112px 42px minmax(0, 1fr) auto;
  gap: 7px;
  display: grid;
}

.communicationPresenceCard :is(select, input) {
  box-sizing: border-box;
  color: #ffffffc2;
  background: #ffffff0b;
  border: 1px solid #ffffff0f;
  border-radius: 11px;
  outline: 0;
  min-width: 0;
  height: 38px;
  font-size: 9px;
}

.communicationPresenceCard select {
  padding: 0 9px;
}

.communicationPresenceCard input {
  padding: 0 11px;
}

.communicationPresenceCard input::placeholder {
  color: #ffffff40;
}

.communicationPresenceCard .communicationPresenceEmoji {
  text-align: center;
  padding: 0;
}

.communicationPresenceCard > div > button, .communicationFriendsHome > section > button {
  color: #0a0a0b;
  cursor: pointer;
  background: #f2efeb;
  border: 0;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.communicationPresenceCard > div > button:disabled {
  cursor: wait;
  opacity: .55;
}

.communicationPresenceCard button svg, .communicationFriendsHome > section svg {
  width: 14px;
}

.communicationFriendsHome > section {
  color: #ffffff80;
  background: #ffffff06;
  border: 1px solid #ffffff0e;
  border-radius: 16px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 12px 14px;
  display: grid;
}

.communicationFriendsHome > section strong {
  color: #ffffffc2;
  font-size: 10px;
}

.communicationFriendsHome > section p {
  margin: 3px 0 0;
  font-size: 8px;
}

.communicationFriendsHome > section > button {
  color: #ffffffb8;
  background: #ffffff12;
  min-height: 32px;
}

@media (max-width: 760px) {
  .communicationFriendsHome {
    width: calc(100% - 24px);
  }

  .communicationPresenceCard > div {
    grid-template-columns: 90px 40px minmax(0, 1fr);
  }

  .communicationPresenceCard > div > button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .communicationFriendsHome {
    align-self: start;
    margin-top: 24px;
  }

  .communicationFriendsHome > header h2 {
    font-size: 21px;
  }

  .communicationPresenceCard > header {
    flex-direction: column;
    align-items: flex-start;
  }

  .communicationFriendsHome > section {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .communicationFriendsHome > section > button {
    grid-column: 1 / -1;
  }
}

.communicationSearch kbd, .communicationUserSearch kbd {
  color: #ffffff3d;
  margin-left: auto;
  font-family: inherit;
  font-size: 8px;
}

.conversationListNav > a strong, .communicationConversationRow strong {
  font-size: 12px;
}

.conversationListNav > a small, .communicationConversationRow small {
  align-items: center;
  gap: 5px;
  font-size: 10px;
  display: flex;
}

.conversationListNav > a small svg, .communicationConversationRow small svg {
  width: 11px;
  height: 11px;
}

.conversationListNav > .communicationMentionRow {
  align-items: start;
  min-height: 76px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.communicationMentionRow[data-unread="true"] {
  background: rgb(var(--color-accent-rgb) / .045);
}

.communicationMentionRow[data-unread="true"]:after {
  background: var(--color-accent);
  content: "";
  border-radius: 4px;
  width: 3px;
  height: 18px;
  position: absolute;
  top: 14px;
  left: 2px;
}

.conversationListNav > .communicationMentionRow > span:nth-child(2) {
  gap: 4px;
}

.communicationMentionRow small {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 30px;
  line-height: 1.45;
  overflow: hidden;
  white-space: normal !important;
  display: -webkit-box !important;
}

.communicationMentionRow em {
  color: rgb(var(--color-accent-rgb) / .7);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-style: normal;
  font-weight: 620;
  overflow: hidden;
}

.communicationMentionRow[data-unread="true"] > span > strong {
  color: #fff;
}

.communicationMentionsMore {
  color: #ffffff85;
  cursor: pointer;
  background: #ffffff09;
  border: 1px solid #ffffff14;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin: 8px 6px 2px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.communicationMentionsMore:hover {
  color: #fff;
  background: #ffffff0e;
  border-color: #ffffff24;
}

.communicationMentionsMore:disabled {
  cursor: default;
  opacity: .55;
}

.communicationMentionsMore svg {
  width: 13px;
  height: 13px;
}

.communicationConversationPin {
  color: #ffffff4d;
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 12px;
  right: 30px;
}

.communicationListEmpty button {
  color: #ffffffbf;
  cursor: pointer;
  background: #ffffff0a;
  border: 1px solid #ffffff17;
  border-radius: 10px;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin-top: 17px;
  padding: 0 11px;
  font-size: 9px;
  display: inline-flex;
}

.communicationListEmpty button svg {
  width: 13px;
}

.communicationChatHeader {
  min-height: 66px;
}

.communicationChatHeader > div strong {
  font-size: 13px;
}

.communicationChatHeader > div span {
  font-size: 10px;
}

.communicationChatHeader > nav {
  gap: 3px;
  margin-left: auto;
  display: flex;
}

.communicationChatHeader > nav button {
  color: #ffffff7a;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
  position: relative;
}

.communicationChatHeader > nav button > b {
  box-sizing: border-box;
  border: 2px solid var(--surface-card);
  color: #fff;
  background: #df3f49;
  border-radius: 8px;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 7px;
  display: grid;
  position: absolute;
  top: -3px;
  right: -3px;
}

.communicationChatHeader > nav button:hover, .communicationChatHeader > nav button[data-active="true"] {
  color: #fff;
  background: #fff1;
}

.communicationChatHeader > nav svg {
  width: 16px;
  height: 16px;
}

.communicationLoadHistory {
  color: #ffffff7a;
  cursor: pointer;
  background: #ffffff09;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  margin: 10px auto 2px;
  padding: 0 12px;
  font-size: 9px;
  display: flex;
}

.communicationLoadHistory svg {
  width: 13px;
  height: 13px;
}

.communicationDateBreak {
  place-items: center;
  height: 36px;
  display: grid;
  position: relative;
}

.communicationDateBreak:before {
  content: "";
  background: #fff1;
  height: 1px;
  position: absolute;
  left: 20px;
  right: 20px;
}

.communicationDateBreak span {
  background: var(--surface-card);
  color: #ffffff47;
  letter-spacing: .04em;
  padding: 0 10px;
  font-size: 8px;
  font-weight: 650;
  position: relative;
}

.communicationMessage {
  padding-top: 5px;
  padding-bottom: 5px;
  scroll-margin: 90px;
}

.communicationMessage[data-mentioned="true"] {
  background: rgb(var(--color-accent-rgb) / .055);
  box-shadow: inset 2px 0 var(--color-accent);
}

.communicationMessage[data-deep-linked="true"] {
  background: rgb(var(--color-accent-rgb) / .08);
  animation: 1.8s ease-out communicationDeepLink;
}

@keyframes communicationDeepLink {
  0%, 35% {
    background: rgb(var(--color-accent-rgb) / .18);
  }

  100% {
    background: rgb(var(--color-accent-rgb) / .08);
  }
}

.communicationMessage[data-compact="true"] {
  padding-top: 2px;
  padding-bottom: 2px;
}

.communicationMessage[data-compact="true"] > .communicationAvatar, .communicationMessage[data-compact="true"] .communicationMessageBody > header {
  visibility: hidden;
  height: 0;
  min-height: 0;
}

.communicationMessage[data-compact="true"] > .communicationAvatar {
  pointer-events: none;
}

.communicationMessage[data-compact="true"]:before {
  color: #0000;
  content: attr(data-time);
  text-align: center;
  width: 36px;
  font-size: 8px;
  position: absolute;
  top: 5px;
  left: 24px;
}

.communicationMessage[data-compact="true"]:hover:before {
  color: #ffffff38;
}

.communicationMessageBody > header strong {
  font-size: 12px;
}

.communicationMessageBody > :is(p, ul, ol, blockquote, pre) {
  color: #ffffffd1;
  max-width: 74ch;
  font-size: 13px;
  line-height: 1.52;
}

.communicationMessageBody a[data-mention="true"] {
  background: rgb(var(--color-accent-rgb) / .16);
  color: var(--color-accent);
  border-radius: 4px;
  padding: 1px 3px;
  font-weight: 700;
  text-decoration: none;
  display: inline;
}

.communicationMessageBody a[data-mention="true"]:hover {
  background: rgb(var(--color-accent-rgb) / .25);
  color: #ffc0a8;
}

.communicationShell b[data-mention="true"] {
  color: #fff;
  background: #df3f49;
}

.communicationAttachmentStack {
  gap: 6px;
  width: min(560px, 92%);
  margin-top: 6px;
  display: grid;
}

.communicationAttachments {
  border-radius: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
  max-height: 460px;
  display: grid;
  overflow: hidden;
}

.communicationAttachments[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.communicationAttachments button {
  background: var(--surface-subcard);
  cursor: zoom-in;
  border: 0;
  min-width: 0;
  min-height: 110px;
  padding: 0;
  overflow: hidden;
}

.communicationAttachments[data-count="1"] button {
  max-height: 440px;
}

.communicationAttachments img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-height: 300px;
  display: block;
}

.communicationMediaAttachment {
  background: var(--surface-subcard);
  border: 1px solid #ffffff14;
  border-radius: 14px;
  display: grid;
  overflow: hidden;
}

.communicationMediaAttachment video {
  background: var(--surface-card);
  object-fit: contain;
  width: 100%;
  max-height: 340px;
  display: block;
}

.communicationMediaAttachment > span {
  color: #ffffff85;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 10px;
  font-size: 9px;
  overflow: hidden;
}

.communicationAudioAttachment {
  background: var(--surface-subcard);
  border: 1px solid #ffffff14;
  border-radius: 14px;
  grid-template-columns: 30px minmax(90px, 1fr) minmax(180px, 280px);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 10px;
  display: grid;
}

.communicationAudioAttachment > svg {
  width: 18px;
  color: var(--color-accent);
}

.communicationAudioAttachment > span, .communicationFileAttachment > span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.communicationAudioAttachment strong, .communicationFileAttachment strong {
  color: #ffffffd1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.communicationAudioAttachment small, .communicationFileAttachment small {
  color: #ffffff52;
  font-size: 8px;
}

.communicationAudioAttachment audio {
  width: 100%;
  height: 32px;
}

.communicationVoiceMessage {
  background: var(--surface-subcard);
  border: 1px solid #ffffff17;
  border-radius: 14px;
  grid-template-columns: 34px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  width: min(430px, 100%);
  min-height: 62px;
  padding: 9px 10px;
  display: grid;
}

.communicationVoiceMessage > button {
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.communicationVoiceMessage > button svg {
  width: 14px;
  height: 14px;
}

.communicationVoiceMessage > div {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.communicationVoiceMessage strong {
  color: #ffffffd1;
  font-size: 9px;
}

.communicationVoiceMessage label {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  display: grid;
}

.communicationVoiceMessage input[type="range"] {
  width: 100%;
  height: 3px;
  accent-color: var(--color-accent);
  cursor: pointer;
  margin: 0;
}

.communicationVoiceMessage small {
  color: #ffffff61;
  text-align: right;
  min-width: 58px;
  font-size: 8px;
}

.communicationVoiceMessage > .communicationVoiceMessageRate {
  color: #ffffffa6;
  background: #ffffff12;
  border-radius: 8px;
  width: 38px;
  height: 25px;
  font-size: 8px;
  font-weight: 700;
}

.communicationVoiceMessage > audio {
  display: none;
}

.communicationFileAttachment {
  background: var(--surface-subcard);
  min-height: 58px;
  color: inherit;
  border: 1px solid #ffffff14;
  border-radius: 14px;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  text-decoration: none;
  display: grid;
}

.communicationFileAttachment:hover {
  background: var(--surface-subcard);
  border-color: #ffffff29;
}

.communicationFileAttachment > i {
  background: rgb(var(--color-accent-rgb) / .11);
  width: 34px;
  height: 34px;
  color: var(--color-accent);
  border-radius: 10px;
  place-items: center;
  display: grid;
}

.communicationFileAttachment > i svg {
  width: 17px;
  height: 17px;
}

.communicationFileAttachment > svg {
  color: #ffffff57;
  width: 15px;
}

.communicationReactions {
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
  display: flex;
}

.communicationReactions button {
  color: #fff9;
  cursor: pointer;
  background: #ffffff09;
  border: 1px solid #ffffff14;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 36px;
  height: 27px;
  padding: 0 8px;
  font-size: 9px;
  display: inline-flex;
}

.communicationReactions button[data-active="true"] {
  border-color: rgb(var(--color-accent-rgb) / .42);
  background: rgb(var(--color-accent-rgb) / .12);
  color: var(--color-accent);
}

.communicationReactions button span {
  font-size: 13px;
}

.communicationReactions button span img {
  object-fit: contain;
  width: 16px;
  height: 16px;
}

.communicationReceipt {
  color: #ffffff40;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 8px;
  display: inline-flex;
}

.communicationReceipt svg {
  color: #6e9eff;
  width: 12px;
  height: 12px;
}

.communicationSendFailed {
  color: var(--color-accent);
  cursor: pointer;
  background: none;
  border: 0;
  margin-top: 5px;
  padding: 0;
  font-size: 9px;
  display: block;
}

.communicationMessageActions {
  z-index: 3;
}

.communicationReactionPicker, .communicationComposerEmojiPicker {
  z-index: 8;
  background: #18181af7;
  border: 1px solid #ffffff1c;
  border-radius: 13px;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  width: 205px;
  padding: 6px;
  display: grid;
  position: absolute;
}

.communicationReactionPicker {
  top: 37px;
  right: 0;
}

.communicationReactionPicker button, .communicationComposerEmojiPicker button {
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  place-items: center;
  width: 36px;
  height: 34px;
  font-size: 17px;
  display: grid;
}

.communicationReactionPicker button img, .communicationComposerEmojiPicker button img {
  object-fit: contain;
  width: 24px;
  height: 24px;
}

.communicationComposerEmojiPicker button.isSticker {
  grid-column: span 2;
  width: 74px;
  height: 74px;
}

.communicationComposerEmojiPicker button.isSticker img {
  width: 62px;
  height: 62px;
}

.communicationReactionPicker button:hover, .communicationComposerEmojiPicker button:hover {
  background: #ffffff13;
}

.communicationNewMessages, .communicationUnreadJump {
  z-index: 4;
  color: #111;
  cursor: pointer;
  background: #f2efeb;
  border: 1px solid #ffffff1c;
  border-radius: 11px;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  position: absolute;
  bottom: 83px;
  right: 50%;
  transform: translateX(50%);
}

.communicationUnreadJump {
  background: var(--color-accent);
  color: #fff;
  bottom: 121px;
}

.communicationNewMessages svg, .communicationUnreadJump svg {
  width: 13px;
}

.communicationComposer {
  padding: 0 16px 13px;
  position: relative;
}

.communicationComposer > .communicationComposerMain {
  background: var(--surface-subcard);
  border: 1px solid #ffffff1a;
  border-radius: 15px;
  grid-template-columns: 34px minmax(0, 1fr) 32px 32px 32px auto 36px;
  align-items: end;
  gap: 6px;
  min-height: 50px;
  padding: 7px;
  display: grid;
  position: relative;
}

.communicationMentionPicker {
  z-index: 14;
  background: #18181afa;
  border: 1px solid #ffffff1c;
  border-radius: 14px;
  gap: 2px;
  width: min(320px, 100vw - 32px);
  padding: 7px;
  display: grid;
  position: absolute;
  bottom: calc(100% + 7px);
  left: 0;
  box-shadow: 0 16px 40px #00000047;
}

.communicationMentionPicker > small {
  color: #ffffff4d;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 7px 7px;
  font-size: 8px;
  font-weight: 700;
}

.communicationMentionPicker > button {
  color: #fff;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 42px;
  padding: 5px 7px;
  display: grid;
}

.communicationMentionPicker > button:hover, .communicationMentionPicker > button[data-active="true"] {
  background: #ffffff12;
}

.communicationMentionPicker > button > .communicationAvatar, .communicationMentionPicker > button > span:first-child {
  background: rgb(var(--color-accent-rgb) / .12);
  width: 30px;
  height: 30px;
  color: var(--color-accent);
  border-radius: 9px;
  place-items: center;
  display: grid;
}

.communicationMentionPicker > button > span:first-child svg {
  width: 15px;
}

.communicationMentionPicker > button > span:last-child {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.communicationMentionPicker strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.communicationMentionPicker button small {
  color: #ffffff57;
  font-size: 8px;
}

.communicationComposerMain:focus-within {
  border-color: #ffffff30;
}

.communicationComposerMain textarea {
  align-self: center;
  padding: 7px 3px 5px;
  font-size: 13px;
}

.communicationComposerMain > span {
  color: #fff3;
  align-self: center;
  font-size: 8px;
}

.communicationComposer > .communicationComposerMain > .communicationAttachButton, .communicationComposer > .communicationComposerMain > .communicationPollButton, .communicationComposer > .communicationComposerMain > .communicationEmojiButton, .communicationComposer > .communicationComposerMain > .communicationVoiceMessageButton, .communicationComposer > .communicationComposerMain > .communicationSendButton {
  color: #ffffff75;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.communicationAttachButton:hover, .communicationPollButton:hover, .communicationEmojiButton:hover, .communicationVoiceMessageButton:hover {
  color: #fff;
  background: #ffffff0f;
}

.communicationAttachButton input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.communicationAttachButton svg, .communicationPollButton svg, .communicationEmojiButton svg, .communicationVoiceMessageButton svg, .communicationSendButton svg {
  width: 16px;
  height: 16px;
}

.communicationComposer > .communicationComposerMain > .communicationVoiceMessageButton:disabled {
  color: #ffffff2e;
  cursor: default;
}

.communicationComposer > .communicationComposerMain > .communicationSendButton {
  background: var(--color-accent);
  color: #fff;
}

.communicationComposer > .communicationComposerMain > .communicationSendButton:disabled {
  color: #fff3;
  cursor: default;
  background: #ffffff0f;
}

.communicationComposerEmojiPicker {
  max-height: min(390px, 62vh);
  bottom: 46px;
  right: 45px;
  overflow-y: auto;
}

.communicationPollComposer {
  background: var(--surface-subcard);
  border: 1px solid #ffffff17;
  border-bottom: 0;
  border-radius: 15px 15px 0 0;
  gap: 10px;
  padding: 12px;
  display: grid;
}

.communicationPollComposer > header {
  grid-template-columns: 24px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  display: grid;
}

.communicationPollComposer > header > svg {
  width: 16px;
  color: var(--color-accent);
}

.communicationPollComposer input, .communicationPollComposer select {
  color: #fff;
  background: #ffffff09;
  border: 1px solid #ffffff14;
  border-radius: 9px;
  outline: 0;
  min-width: 0;
  min-height: 34px;
  padding: 0 9px;
  font-size: 9px;
}

.communicationPollComposer button {
  color: #ffffff94;
  cursor: pointer;
  background: #ffffff0d;
  border: 0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  font-size: 8px;
  display: inline-flex;
}

.communicationPollComposer button svg {
  width: 12px;
}

.communicationPollComposer > div {
  gap: 5px;
  display: grid;
}

.communicationPollComposer > div > label {
  grid-template-columns: 22px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 7px;
  display: grid;
}

.communicationPollComposer > div > label > span {
  color: #ffffff3d;
  font-size: 7px;
}

.communicationPollComposer > div > button {
  justify-self: start;
  padding: 0 9px;
}

.communicationPollComposer > footer {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.communicationPollComposer > footer label {
  color: #ffffff7a;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  display: inline-flex;
}

.communicationPollComposer > footer select {
  min-height: 30px;
}

.communicationPollComposer + .communicationComposerMain, .communicationPendingAttachments + .communicationPollComposer {
  border-radius: 0;
}

.communicationPendingAttachments {
  background: var(--surface-subcard);
  scrollbar-color: #ffffff26 transparent;
  scrollbar-width: thin;
  border: 1px solid #ffffff17;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  gap: 8px;
  padding: 9px;
  display: flex;
  overflow-x: auto;
}

.communicationPendingAttachments > article {
  background: #ffffff0a;
  border: 1px solid #ffffff13;
  border-radius: 11px;
  flex: 0 0 228px;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  width: 228px;
  min-height: 72px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.communicationPendingAttachments > article[data-status="failed"] {
  background: #ff52520e;
  border-color: #ff626247;
}

.communicationPendingAttachments > article[data-audio="true"] {
  flex-basis: 310px;
  grid-template-columns: 46px minmax(0, 1fr);
  width: 310px;
}

.communicationPendingAttachments > article[data-audio="true"] .communicationPendingAttachmentPreview {
  width: 46px;
  min-height: 42px;
}

.communicationPendingAttachmentPreview {
  color: #ffffff6b;
  background: #ffffff09;
  place-items: center;
  width: 62px;
  height: 100%;
  min-height: 70px;
  display: grid;
  overflow: hidden;
}

.communicationPendingAttachmentPreview > svg {
  width: 21px;
  height: 21px;
}

.communicationPendingAttachmentPreview img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.communicationPendingAttachmentMeta {
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 10px 34px 10px 10px;
  display: grid;
}

.communicationPendingAttachmentMeta strong {
  color: #ffffffd1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.communicationPendingAttachmentMeta small {
  color: #ffffff61;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 8px;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
}

.communicationPendingAttachments > article[data-status="failed"] .communicationPendingAttachmentMeta small {
  color: #ff8f8fe6;
}

.communicationPendingAttachmentActions {
  gap: 3px;
  display: flex;
  position: absolute;
  top: 5px;
  right: 5px;
}

.communicationPendingAttachmentActions button {
  color: #ffffffb8;
  cursor: pointer;
  background: #0f0f12e6;
  border: 1px solid #ffffff14;
  border-radius: 7px;
  place-items: center;
  width: 22px;
  height: 22px;
  display: grid;
}

.communicationPendingAttachmentActions button:hover {
  color: #fff;
  border-color: #ffffff29;
}

.communicationPendingAttachmentActions button svg {
  width: 11px;
}

.communicationPendingAudioPreview {
  grid-column: 1 / -1;
  width: calc(100% - 18px);
  height: 30px;
  margin: 0 9px 8px;
}

.communicationPendingAttachmentProgress {
  background: #ffffff0f;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 62px;
  right: 0;
}

.communicationPendingAttachmentProgress:after {
  width: var(--attachment-progress, 0%);
  background: var(--color-accent);
  content: "";
  height: 100%;
  transition: width .12s linear;
  display: block;
}

.communicationPendingAttachments + .communicationComposerMain {
  border-radius: 0 0 15px 15px;
}

.communicationVoiceRecorder {
  background: var(--surface-subcard);
  border: 1px solid #ffffff1a;
  border-radius: 15px;
  grid-template-columns: 34px auto minmax(70px, 1fr) auto 36px;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 7px;
  display: grid;
}

.communicationPendingAttachments + .communicationVoiceRecorder {
  border-radius: 0 0 15px 15px;
}

.communicationVoiceRecorder > button {
  color: #ffffff9e;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.communicationVoiceRecorder > button svg {
  width: 14px;
}

.communicationVoiceRecorderCancel {
  background: #ffffff0e;
}

.communicationVoiceRecorderStop {
  background: var(--color-accent);
  color: #fff !important;
}

.communicationVoiceRecorderStop:disabled {
  opacity: .42;
  cursor: default !important;
}

.communicationVoiceRecorderStatus {
  align-items: center;
  gap: 7px;
  min-width: 92px;
  display: inline-flex;
}

.communicationVoiceRecorderStatus > i {
  background: #ff5b5b;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  animation: 1.2s ease-in-out infinite communicationVoiceRecordingPulse;
}

.communicationVoiceRecorderStatus > svg {
  width: 14px;
  color: var(--color-accent);
}

.communicationVoiceRecorderStatus strong {
  color: #ffffffd6;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 10px;
}

.communicationVoiceRecorderMeter {
  background: #ffffff12;
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
}

.communicationVoiceRecorderMeter > i {
  width: var(--voice-level, 4%);
  border-radius: inherit;
  background: var(--color-accent);
  height: 100%;
  transition: width 90ms linear;
  display: block;
}

.communicationVoiceRecorder > small {
  color: #ffffff47;
  white-space: nowrap;
  font-size: 8px;
}

@keyframes communicationVoiceRecordingPulse {
  50% {
    opacity: .35;
  }
}

.communicationComposerDropzone {
  z-index: 30;
  border: 1px dashed rgb(var(--color-accent-rgb) / .75);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
  pointer-events: none;
  background: #121215e6;
  border-radius: 16px;
  align-content: center;
  justify-items: center;
  gap: 4px;
  display: grid;
  position: absolute;
  inset: -5px 10px 7px;
}

.communicationComposerDropzone svg {
  width: 21px;
  color: var(--color-accent);
  margin-bottom: 3px;
}

.communicationComposerDropzone strong {
  font-size: 11px;
}

.communicationComposerDropzone small {
  color: #ffffff6e;
  font-size: 8px;
}

.isSpinning {
  animation: .8s linear infinite communicationSpin;
}

@keyframes communicationSpin {
  to {
    transform: rotate(360deg);
  }
}

.communicationInfo {
  position: relative;
}

.communicationInfoPlaceholder {
  color: #ffffff3b;
  text-align: center;
  align-content: center;
  justify-items: center;
  min-height: calc(100% - 68px);
  padding: 24px;
  display: grid;
}

.communicationInfoPlaceholder svg {
  width: 25px;
}

.communicationInfoPlaceholder strong {
  color: #ffffff8a;
  letter-spacing: .13em;
  margin-top: 12px;
  font-size: 9px;
}

.communicationInfoPlaceholder p {
  max-width: 210px;
  font-size: 10px;
  line-height: 1.55;
}

.communicationInfoProfile > span svg {
  width: 12px;
}

.communicationInfoProfile > span i {
  background: #ffffff40;
}

.communicationInfoProfile > span i[data-status="online"] {
  background: #68d878;
}

.communicationInfoProfile > span i[data-status="idle"] {
  background: #e6ab45;
}

.communicationInfoProfile > span i[data-status="dnd"] {
  background: #e2575f;
}

.communicationSettingsSection label {
  color: #ffffff9e;
  background: #ffffff0a;
  border-radius: 10px;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 10px;
  display: grid;
}

.communicationSettingsSection label svg {
  width: 14px;
}

.communicationSettingsSection label span {
  font-size: 9px;
}

.communicationSettingsSection select {
  color: #ffffff85;
  text-align: right;
  background: none;
  border: 0;
  outline: 0;
  max-width: 122px;
  font-size: 8px;
}

.communicationSideSearch {
  padding: 12px;
}

.communicationSideSearch > label {
  background: var(--surface-subcard);
  border: 1px solid #ffffff17;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 11px;
  display: flex;
}

.communicationSideSearch > label svg {
  color: #ffffff61;
  width: 15px;
}

.communicationSideSearch input {
  color: #fff;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  font-size: 11px;
}

.communicationSideSearch > .isSpinning, .communicationPins > .isSpinning {
  width: 18px;
  color: var(--color-accent);
  margin: 30px auto;
  display: block;
}

.communicationSideSearch > p, .communicationPins > p {
  color: #ffffff4d;
  text-align: center;
  justify-items: center;
  margin: 0;
  padding: 55px 16px;
  font-size: 10px;
  display: grid;
}

.communicationSideSearch > div {
  gap: 4px;
  margin-top: 10px;
  display: grid;
}

.communicationSideSearch > div > button {
  color: #ffffffb8;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 12px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 9px;
  display: grid;
}

.communicationSideSearch > div > button:hover {
  background: #ffffff0d;
}

.communicationSideSearch .communicationAvatar {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  font-size: 11px;
}

.communicationSideSearch > div > button > span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.communicationSideSearch strong {
  font-size: 10px;
}

.communicationSideSearch small {
  color: #fff6;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.communicationSideSearch time {
  color: #ffffff3d;
  font-size: 8px;
}

.communicationSearchMore {
  place-items: center;
  min-height: 34px;
  display: grid;
}

.communicationSearchMore .isSpinning {
  width: 16px;
  color: var(--color-accent);
}

.communicationPins {
  gap: 5px;
  padding: 12px;
  display: grid;
}

.communicationPins > p svg {
  width: 21px;
  margin-bottom: 10px;
}

.communicationPins > button {
  color: #ffffffad;
  text-align: left;
  cursor: pointer;
  background: #ffffff06;
  border: 1px solid #ffffff0f;
  border-radius: 12px;
  gap: 6px;
  padding: 12px;
  display: grid;
}

.communicationPins > button:hover {
  background: #ffffff0b;
  border-color: #ffffff1f;
}

.communicationPins > button span {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.4;
  overflow: hidden;
}

.communicationPins > button small {
  color: #ffffff45;
  font-size: 8px;
}

.communicationBookmarks {
  align-content: start;
  gap: 7px;
  padding: 12px;
  display: grid;
}

.communicationBookmarks > header {
  color: #ffffff57;
  letter-spacing: .07em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  padding: 2px 2px 7px;
  font-size: 8px;
  font-weight: 700;
  display: flex;
}

.communicationBookmarks > header small {
  color: #fff3;
  font-size: inherit;
}

.communicationBookmarks > .isSpinning {
  width: 18px;
  color: var(--color-accent);
  margin: 30px auto;
}

.communicationBookmarks > p {
  color: #ffffff59;
  text-align: center;
  justify-items: center;
  gap: 7px;
  margin: 0;
  padding: 52px 16px;
  display: grid;
}

.communicationBookmarks > p svg {
  width: 24px;
  margin-bottom: 5px;
}

.communicationBookmarks > p strong {
  color: #ffffff9e;
  font-size: 10px;
}

.communicationBookmarks > p span {
  max-width: 220px;
  font-size: 8px;
  line-height: 1.55;
}

.communicationBookmarks > article {
  background: #ffffff07;
  border: 1px solid #fff1;
  border-radius: 13px;
  transition: border-color .16s, background .16s;
  overflow: hidden;
}

.communicationBookmarks > article:hover {
  background: #ffffff0a;
  border-color: #ffffff1f;
}

.communicationBookmarks > article[data-reminder="due"] {
  border-color: rgb(var(--color-accent-rgb) / .38);
  background: rgb(var(--color-accent-rgb) / .07);
}

.communicationBookmarks > article[data-reminder="completed"] {
  opacity: .62;
}

.communicationBookmarkOpen {
  width: 100%;
  min-width: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 11px;
  display: grid;
}

.communicationBookmarkOpen .communicationAvatar {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  font-size: 10px;
}

.communicationBookmarkOpen > span {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.communicationBookmarkOpen strong {
  color: #ffffffc2;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.communicationBookmarkOpen small {
  color: #ffffff4f;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  overflow: hidden;
}

.communicationBookmarkOpen em {
  color: #ffffff8f;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-top: 4px;
  font-size: 9px;
  font-style: normal;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}

.communicationBookmarks > article > footer {
  border-top: 1px solid #ffffff0b;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  padding: 5px 7px 6px 11px;
  display: flex;
}

.communicationBookmarks > article > footer time {
  color: #ffffff45;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 8px;
  display: inline-flex;
  overflow: hidden;
}

.communicationBookmarks > article[data-reminder="due"] > footer time {
  color: var(--color-accent);
}

.communicationBookmarks > article > footer time svg {
  flex: none;
  width: 11px;
}

.communicationBookmarks > article > footer > div {
  gap: 2px;
  display: flex;
}

.communicationBookmarks > article > footer button {
  color: #ffffff57;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  place-items: center;
  width: 27px;
  height: 27px;
  padding: 0;
  display: grid;
}

.communicationBookmarks > article > footer button:hover {
  color: #ffffffd1;
  background: #fff1;
}

.communicationBookmarks > article > footer button:disabled {
  cursor: wait;
  opacity: .35;
}

.communicationBookmarks > article > footer button svg {
  width: 13px;
}

.communicationThreadsPanel {
  gap: 8px;
  padding: 12px;
  display: grid;
}

.communicationCreateThread {
  border: 1px solid rgb(var(--color-accent-rgb) / .28);
  background: rgb(var(--color-accent-rgb) / .1);
  min-height: 38px;
  color: var(--color-accent);
  cursor: pointer;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  font-weight: 680;
  display: inline-flex;
}

.communicationCreateThread:hover {
  border-color: rgb(var(--color-accent-rgb) / .46);
  background: rgb(var(--color-accent-rgb) / .16);
  color: #fff;
}

.communicationCreateThread svg {
  width: 14px;
}

.communicationThreadsPanel > .isSpinning {
  width: 18px;
  color: var(--color-accent);
  margin: 30px auto;
  display: block;
}

.communicationThreadsPanel > p {
  color: #ffffff4d;
  text-align: center;
  justify-items: center;
  gap: 9px;
  margin: 0;
  padding: 45px 12px;
  font-size: 9px;
  display: grid;
}

.communicationThreadsPanel > p svg {
  width: 21px;
}

.communicationThreadsPanel > div {
  gap: 4px;
  display: grid;
}

.communicationThreadsPanel article {
  background: #ffffff05;
  border: 1px solid #ffffff0f;
  border-radius: 11px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  display: grid;
}

.communicationThreadsPanel article[data-active="true"] {
  border-color: rgb(var(--color-accent-rgb) / .22);
  background: rgb(var(--color-accent-rgb) / .055);
}

.communicationThreadsPanel article > a {
  color: #ffffffa8;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 0 10px;
  display: grid;
}

.communicationThreadsPanel article > a > svg {
  color: #ffffff57;
  width: 14px;
}

.communicationThreadsPanel article > a span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.communicationThreadsPanel article > a strong, .communicationThreadsPanel article > a small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.communicationThreadsPanel article > a strong {
  font-size: 9px;
}

.communicationThreadsPanel article > a small {
  color: #ffffff47;
  font-size: 7px;
}

.communicationThreadsPanel article > a b {
  background: var(--color-accent);
  color: #fff;
  border-radius: 9px;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 7px;
  display: grid;
}

.communicationThreadsPanel article > button {
  color: #ffffff40;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  display: grid;
}

.communicationThreadsPanel article > button:hover {
  color: #fff;
  background: #ffffff0d;
}

.communicationThreadsPanel article > button svg {
  width: 13px;
}

.communicationForumIndex {
  scrollbar-width: thin;
  scrollbar-color: #ffffff1f transparent;
  min-height: 0;
  padding: 24px;
  overflow-y: auto;
}

.communicationForumIndex > header {
  background: var(--surface-subcard);
  border: 1px solid #ffffff14;
  border-radius: 20px;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 118px;
  padding: 22px;
  display: grid;
}

.communicationForumIndex > header > span {
  background: rgb(var(--color-accent-rgb) / .12);
  width: 52px;
  height: 52px;
  color: var(--color-accent);
  border-radius: 16px;
  place-items: center;
  display: grid;
}

.communicationForumIndex > header > span svg {
  width: 23px;
  height: 23px;
}

.communicationForumIndex > header > div {
  min-width: 0;
}

.communicationForumIndex > header small {
  color: var(--color-accent);
  letter-spacing: .11em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 750;
}

.communicationForumIndex > header h2 {
  letter-spacing: -.04em;
  margin: 7px 0 4px;
  font-size: clamp(22px, 3vw, 34px);
}

.communicationForumIndex > header p {
  color: #ffffff6b;
  max-width: 620px;
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
}

.communicationForumIndex > header button {
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.communicationForumIndex > header button:hover {
  background: var(--color-accent);
}

.communicationForumIndex > header button svg {
  width: 14px;
}

.communicationForumIndex > .isSpinning {
  width: 20px;
  color: var(--color-accent);
  margin: 50px auto;
  display: block;
}

.communicationForumGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  display: grid;
}

.communicationForumGrid > a {
  color: #ffffffc7;
  background: #ffffff06;
  border: 1px solid #ffffff12;
  border-radius: 16px;
  grid-template-columns: 38px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 86px;
  padding: 14px;
  display: grid;
}

.communicationForumGrid > a:hover {
  background: #ffffff0b;
  border-color: #ffffff24;
}

.communicationForumGrid > a > span {
  color: #ffffff70;
  background: #ffffff0d;
  border-radius: 12px;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}

.communicationForumGrid > a > span svg {
  width: 17px;
}

.communicationForumGrid > a > div {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.communicationForumGrid > a strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.communicationForumGrid > a small {
  color: #ffffff4d;
  font-size: 8px;
}

.communicationForumGrid > a > b {
  background: var(--color-accent);
  color: #fff;
  border-radius: 9px;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 7px;
  display: grid;
}

.communicationForumGrid > a > svg {
  color: #ffffff38;
  width: 13px;
  transform: rotate(-90deg);
}

.communicationForumEmpty {
  color: #ffffff4d;
  text-align: center;
  align-content: center;
  justify-items: center;
  min-height: 230px;
  display: grid;
}

.communicationForumEmpty svg {
  width: 25px;
  margin-bottom: 12px;
}

.communicationForumEmpty strong {
  color: #ffffffa6;
  font-size: 12px;
}

.communicationForumEmpty span {
  max-width: 300px;
  margin-top: 7px;
  font-size: 9px;
  line-height: 1.5;
}

@media (max-width: 1120px) {
  .communicationForumGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .communicationForumIndex {
    padding: 10px;
  }

  .communicationForumIndex > header {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 0;
    padding: 16px;
  }

  .communicationForumIndex > header > span {
    border-radius: 13px;
    width: 42px;
    height: 42px;
  }

  .communicationForumIndex > header button {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .communicationForumGrid > a {
    grid-template-columns: 34px minmax(0, 1fr) auto 12px;
    min-height: 76px;
    padding: 11px;
  }

  .communicationForumGrid > a > span {
    width: 34px;
    height: 34px;
  }
}

.communicationMembersSection > header {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  display: flex;
}

.communicationMembersSection > header > span {
  color: #ffffff57;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 700;
}

.communicationMembersSection > header > button {
  background: #ffffff0d;
  width: auto;
  min-height: 30px;
  padding: 0 8px;
}

.communicationRenameGroup {
  margin-bottom: 8px;
}

.communicationMembersSection > div {
  gap: 2px;
  display: grid;
}

.communicationMembersSection article {
  border-radius: 10px;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 5px;
  display: grid;
  position: relative;
}

.communicationMembersSection article:hover {
  background: #ffffff08;
}

.communicationMembersSection article .communicationAvatar {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  font-size: 11px;
}

.communicationMembersSection article > span {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.communicationMembersSection article strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.communicationMembersSection article small {
  color: #ffffff4f;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  overflow: hidden;
}

.communicationMembersSection article > svg {
  width: 13px;
  color: var(--color-accent);
}

.communicationMembersSection article > button {
  justify-content: center;
  width: 28px;
  min-height: 28px;
  padding: 0;
}

.communicationMembersSection article > div {
  z-index: 6;
  background: var(--surface-subcard);
  border: 1px solid #ffffff1a;
  border-radius: 11px;
  gap: 2px;
  width: 175px;
  padding: 5px;
  display: grid;
  position: absolute;
  top: 39px;
  right: 4px;
}

.communicationMembersSection article > div button {
  background: none;
  justify-content: flex-start;
  min-height: 32px;
  padding: 0 8px;
}

.communicationDangerAction {
  margin-top: 11px;
  color: #ff8d75 !important;
}

.communicationDialogBackdrop {
  z-index: 300;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #000000b8;
  place-items: center;
  padding: 18px;
  display: grid;
  position: fixed;
  inset: 0;
}

.communicationDialog {
  background: var(--surface-card);
  color: #f7f5f2;
  border: 1px solid #ffffff17;
  border-radius: 22px;
  width: min(420px, 100%);
  max-height: min(720px, 100dvh - 36px);
  overflow: hidden;
}

.communicationDialog[data-wide="true"] {
  width: min(560px, 100%);
}

.communicationDialog > header {
  border-bottom: 1px solid #ffffff14;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 70px;
  padding: 13px 16px 12px 20px;
  display: flex;
}

.communicationDialog > header span {
  color: var(--color-accent);
  letter-spacing: .14em;
  font-size: 8px;
  font-weight: 750;
}

.communicationDialog > header h2 {
  letter-spacing: -.03em;
  margin: 5px 0 0;
  font-size: 19px;
}

.communicationDialog > header > button {
  cursor: pointer;
  background: #ffffff0e;
  border: 0;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.communicationDialog > header > button svg {
  width: 15px;
}

.communicationReminderDialog {
  gap: 12px;
  padding: 16px 16px 0;
  display: grid;
}

.communicationReminderDialog > div:first-child {
  background: #ffffff07;
  border: 1px solid #fff1;
  border-radius: 13px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  display: grid;
}

.communicationReminderDialog > div:first-child > svg {
  width: 18px;
  color: var(--color-accent);
}

.communicationReminderDialog > div:first-child > span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.communicationReminderDialog > div:first-child small {
  color: #ffffff52;
  font-size: 8px;
}

.communicationReminderDialog > div:first-child strong {
  color: #ffffffc2;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.communicationReminderDialog > label {
  gap: 7px;
  display: grid;
}

.communicationReminderDialog > label > span {
  color: #ffffff61;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 700;
}

.communicationReminderDialog input {
  box-sizing: border-box;
  color: #f7f5f2;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  width: 100%;
  height: 43px;
  font: inherit;
  background: #ffffff0a;
  border: 1px solid #ffffff17;
  border-radius: 11px;
  outline: 0;
  padding: 0 12px;
  font-size: 10px;
}

.communicationReminderDialog input:focus {
  border-color: rgb(var(--color-accent-rgb) / .55);
}

.communicationReminderPresets {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.communicationReminderPresets button {
  color: #ffffff8f;
  cursor: pointer;
  background: #ffffff08;
  border: 1px solid #ffffff12;
  border-radius: 10px;
  min-height: 34px;
  font-size: 8px;
}

.communicationReminderPresets button:hover {
  color: #ffffffd1;
  border-color: #ffffff21;
}

.communicationReminderDialog > footer {
  border-top: 1px solid #ffffff12;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  min-height: 64px;
  margin: 2px -16px 0;
  padding: 11px 16px;
  display: flex;
}

.communicationReminderDialog > footer button {
  color: #ffffffad;
  cursor: pointer;
  background: #ffffff0b;
  border: 1px solid #ffffff14;
  border-radius: 11px;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  font-size: 9px;
  font-weight: 680;
  display: inline-flex;
}

.communicationReminderDialog > footer button[type="submit"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.communicationReminderDialog > footer button:disabled {
  cursor: wait;
  opacity: .45;
}

.communicationReminderDialog > footer svg {
  width: 13px;
}

.communicationPicker {
  grid-template-rows: auto auto auto auto minmax(120px, 1fr) auto;
  min-height: 360px;
  max-height: min(610px, 100dvh - 125px);
  display: grid;
}

.communicationForwardDialog {
  grid-template-rows: auto auto minmax(150px, 1fr) auto auto;
  min-height: 420px;
  max-height: min(680px, 100dvh - 125px);
  display: grid;
}

.communicationForwardPreview {
  background: #ffffff08;
  border: 1px solid #ffffff12;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 12px 14px 0;
  padding: 10px 12px;
  display: flex;
}

.communicationForwardPreview > svg {
  width: 16px;
  color: var(--color-accent);
  flex: none;
}

.communicationForwardPreview > span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.communicationForwardPreview small {
  color: #ffffff52;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 7px;
  font-weight: 700;
}

.communicationForwardPreview strong {
  color: #ffffffb8;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.communicationForwardSearch {
  background: var(--surface-subcard);
  color: #ffffff5c;
  border: 1px solid #ffffff17;
  border-radius: 12px;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  margin: 10px 14px 0;
  padding: 0 12px;
  display: flex;
}

.communicationForwardSearch svg {
  width: 14px;
}

.communicationForwardSearch input {
  color: #fff;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  font-size: 10px;
}

.communicationForwardSearch b {
  color: var(--color-accent);
  font-size: 8px;
}

.communicationForwardDestinations {
  min-height: 0;
  padding: 8px 10px;
  overflow-y: auto;
}

.communicationForwardDestinations > .isSpinning {
  width: 18px;
  color: var(--color-accent);
  margin: 35px auto;
  display: block;
}

.communicationForwardDestinations > p {
  color: #ffffff4d;
  text-align: center;
  margin: 0;
  padding: 40px 16px;
  font-size: 10px;
}

.communicationForwardDestinations > button {
  color: #ffffffc2;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 12px;
  grid-template-columns: 36px minmax(0, 1fr) 27px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 6px 8px;
  display: grid;
}

.communicationForwardDestinations > button:hover, .communicationForwardDestinations > button[data-selected="true"] {
  background: #ffffff0e;
}

.communicationForwardDestinations > button:disabled {
  opacity: .32;
  cursor: default;
}

.communicationForwardDestinations > button > span, .communicationForwardDestinations > button > i {
  background: #ffffff0d;
  border-radius: 11px;
  place-items: center;
  display: grid;
}

.communicationForwardDestinations > button > span {
  width: 36px;
  height: 36px;
}

.communicationForwardDestinations > button > i {
  width: 25px;
  height: 25px;
  color: var(--color-accent);
}

.communicationForwardDestinations svg {
  width: 14px;
}

.communicationForwardDestinations > button > div {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.communicationForwardDestinations strong, .communicationForwardDestinations small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.communicationForwardDestinations strong {
  font-size: 10px;
}

.communicationForwardDestinations small {
  color: #ffffff57;
  font-size: 8px;
}

.communicationForwardNote {
  gap: 6px;
  padding: 0 14px 12px;
  display: grid;
}

.communicationForwardNote > span {
  color: #ffffff57;
  font-size: 8px;
}

.communicationForwardNote textarea {
  box-sizing: border-box;
  resize: vertical;
  background: var(--surface-subcard);
  color: #fff;
  min-height: 58px;
  font: inherit;
  border: 1px solid #ffffff14;
  border-radius: 11px;
  outline: 0;
  padding: 10px 11px;
  font-size: 10px;
}

.communicationForwardDialog > footer {
  border-top: 1px solid #ffffff12;
  justify-content: flex-end;
  gap: 7px;
  padding: 12px 14px;
  display: flex;
}

.communicationForwardDialog > footer button {
  color: #ffffffab;
  cursor: pointer;
  background: #ffffff09;
  border: 1px solid #ffffff14;
  border-radius: 11px;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 9px;
  font-weight: 650;
  display: inline-flex;
}

.communicationForwardDialog > footer button:last-child {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.communicationForwardDialog > footer button:disabled {
  opacity: .32;
  cursor: default;
}

.communicationForwardDialog > footer svg {
  width: 13px;
}

.communicationPickerTabs {
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 12px 14px 0;
  display: grid;
}

.communicationPickerTabs button {
  color: #ffffff6b;
  cursor: pointer;
  background: #ffffff06;
  border: 1px solid #ffffff12;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  font-size: 10px;
  display: flex;
}

.communicationPickerTabs button[data-active="true"] {
  border-color: rgb(var(--color-accent-rgb) / .3);
  background: rgb(var(--color-accent-rgb) / .1);
  color: #fff;
}

.communicationPickerTabs svg {
  width: 15px;
}

.communicationGroupTitle, .communicationUserSearch, .communicationSimpleForm label {
  background: var(--surface-subcard);
  color: #ffffff5c;
  border: 1px solid #ffffff17;
  border-radius: 12px;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin: 10px 14px 0;
  padding: 0 12px;
  display: flex;
}

.communicationGroupTitle svg, .communicationUserSearch svg, .communicationSimpleForm label svg {
  width: 15px;
}

.communicationGroupTitle input, .communicationUserSearch input, .communicationSimpleForm input {
  color: #fff;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  font-size: 11px;
}

.communicationSelectedUsers {
  align-items: center;
  gap: 5px;
  padding: 10px 14px 0;
  display: flex;
  overflow-x: auto;
}

.communicationSelectedUsers > span {
  color: #ffffff4d;
  flex: none;
  font-size: 8px;
}

.communicationSelectedUsers button {
  color: #ffffffb3;
  cursor: pointer;
  background: #ffffff0a;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 7px 0 4px;
  font-size: 8px;
  display: inline-flex;
}

.communicationSelectedUsers .communicationAvatar {
  border-radius: 7px;
  flex-basis: 21px;
  width: 21px;
  height: 21px;
  font-size: 8px;
}

.communicationSelectedUsers button > svg {
  width: 10px;
}

.communicationUserResults {
  min-height: 0;
  padding: 8px 10px;
  overflow-y: auto;
}

.communicationUserResults > .isSpinning {
  width: 18px;
  color: var(--color-accent);
  margin: 35px auto;
  display: block;
}

.communicationUserResults > p {
  color: #ffffff47;
  text-align: center;
  margin: 0;
  padding: 40px 16px;
  font-size: 10px;
}

.communicationUserResults > button {
  color: #ffffffbf;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 12px;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 53px;
  padding: 6px 8px;
  display: grid;
}

.communicationUserResults > button:hover, .communicationUserResults > button[data-selected="true"] {
  background: #ffffff0d;
}

.communicationUserResults .communicationAvatar {
  flex-basis: 38px;
  width: 38px;
  height: 38px;
  font-size: 12px;
}

.communicationUserResults > button > span {
  gap: 3px;
  display: grid;
}

.communicationUserResults strong {
  font-size: 10px;
}

.communicationUserResults small {
  color: #ffffff57;
  font-size: 9px;
}

.communicationUserResults > button > svg {
  width: 15px;
  color: var(--color-accent);
}

.communicationPicker > footer, .communicationSimpleForm footer, .communicationConfirmDialog footer {
  border-top: 1px solid #ffffff12;
  justify-content: flex-end;
  gap: 7px;
  padding: 12px 14px;
  display: flex;
}

.communicationPicker > footer button, .communicationSimpleForm footer button, .communicationConfirmDialog footer button {
  color: #ffffffab;
  cursor: pointer;
  background: #ffffff09;
  border: 1px solid #ffffff14;
  border-radius: 11px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 9px;
  font-weight: 650;
}

.communicationPicker > footer button:last-child, .communicationSimpleForm footer button:last-child, .communicationConfirmDialog footer button:last-child {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.communicationPicker > footer button:disabled, .communicationSimpleForm footer button:disabled, .communicationConfirmDialog footer button:disabled {
  opacity: .3;
  cursor: default;
}

.communicationSimpleForm {
  padding-top: 4px;
}

.communicationSimpleForm label {
  margin-bottom: 14px;
}

.communicationConfirmDialog {
  text-align: center;
  justify-items: center;
  padding-top: 24px;
  display: grid;
}

.communicationConfirmDialog > svg {
  width: 28px;
  color: var(--color-accent);
}

.communicationConfirmDialog > p {
  color: #ffffff75;
  max-width: 300px;
  margin: 13px 24px 20px;
  font-size: 10px;
  line-height: 1.55;
}

.communicationConfirmDialog textarea {
  box-sizing: border-box;
  resize: vertical;
  background: var(--surface-subcard);
  color: #fff;
  border: 1px solid #ffffff17;
  border-radius: 12px;
  outline: 0;
  width: calc(100% - 36px);
  min-height: 100px;
  padding: 12px;
  font-size: 11px;
}

.communicationConfirmDialog footer {
  box-sizing: border-box;
  width: 100%;
  margin-top: 18px;
}

.communicationLightbox {
  z-index: 400;
  cursor: zoom-out;
  background: #000000e6;
  place-items: center;
  padding: 46px;
  display: grid;
  position: fixed;
  inset: 0;
}

.communicationLightbox > button {
  color: #fff;
  cursor: pointer;
  background: #141415cc;
  border: 1px solid #ffffff24;
  border-radius: 13px;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
  position: absolute;
  top: 18px;
  right: 18px;
}

.communicationLightbox > img {
  object-fit: contain;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 92px);
}

@media (max-width: 1280px) {
  .communicationFrame {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: 66px minmax(265px, 300px) minmax(420px, 1fr);
  }

  .communicationInfo {
    z-index: 5;
    background: var(--surface-subcard);
    width: min(310px, 88vw);
    box-shadow: none;
    transition: transform .18s;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    transform: translateX(102%);
  }

  .communicationInfo[data-open="true"] {
    transform: translateX(0);
  }
}

@media (max-width: 920px) {
  .communicationFrame {
    grid-template-columns: minmax(0, 1fr);
  }

  .communicationChatHeader > nav {
    gap: 0;
  }

  .communicationChatHeader > nav button {
    width: 32px;
  }

  .communicationInfo {
    width: min(330px, 94vw);
    bottom: 58px;
  }

  .communicationMessageActions {
    opacity: 0;
    pointer-events: none;
    display: flex;
    top: -24px;
    right: 8px;
  }

  .communicationMessage:focus-within .communicationMessageActions, .communicationMessages:focus-visible .communicationMessage[data-keyboard-active="true"] .communicationMessageActions {
    opacity: 1;
    pointer-events: auto;
  }

  .communicationAttachmentStack {
    width: min(520px, 96%);
  }
}

@media (max-width: 560px) {
  .communicationFrame {
    inset: 79px 4px 4px;
  }

  .communicationList > header, .communicationChatHeader {
    padding-left: 10px;
    padding-right: 10px;
  }

  .communicationChatHeader .communicationAvatar {
    display: none;
  }

  .communicationChatHeader > div strong {
    max-width: 120px;
  }

  .communicationChatHeader > nav {
    margin-left: auto;
  }

  .communicationChatHeader > nav button {
    width: 30px;
  }

  .communicationConversationStart {
    padding-top: 34px;
  }

  .communicationConversationStart .communicationAvatar {
    width: 58px;
    height: 58px;
  }

  .communicationMessage {
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 8px;
    padding-left: 9px;
    padding-right: 9px;
  }

  .communicationMessage[data-compact="true"]:before {
    width: 31px;
    left: 9px;
  }

  .communicationMessage > .communicationAvatar {
    flex-basis: 31px;
    width: 31px;
    height: 31px;
  }

  .communicationMessageBody > :is(p, ul, ol, blockquote, pre) {
    font-size: 12px;
  }

  .communicationAttachmentStack {
    width: 100%;
  }

  .communicationAttachments {
    max-height: 360px;
  }

  .communicationAudioAttachment {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .communicationAudioAttachment audio {
    grid-column: 1 / -1;
  }

  .communicationVoiceMessage {
    grid-template-columns: 32px minmax(0, 1fr) 34px;
    gap: 7px;
  }

  .communicationVoiceMessage > button {
    width: 32px;
    height: 32px;
  }

  .communicationVoiceMessage small {
    min-width: 51px;
  }

  .communicationComposer {
    padding-bottom: 7px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .communicationComposer > .communicationComposerMain {
    grid-template-columns: 32px minmax(0, 1fr) 29px 29px 34px;
    gap: 3px;
  }

  .communicationPollButton {
    display: none !important;
  }

  .communicationComposerMain > span {
    display: none;
  }

  .communicationEmojiButton {
    width: 29px;
  }

  .communicationPendingAttachments > article[data-audio="true"] {
    flex-basis: min(310px, 100vw - 40px);
    width: min(310px, 100vw - 40px);
  }

  .communicationVoiceRecorder {
    grid-template-columns: 32px auto minmax(42px, 1fr) 34px;
    gap: 6px;
  }

  .communicationVoiceRecorder > small {
    display: none;
  }

  .communicationVoiceRecorderStatus {
    min-width: 72px;
  }

  .communicationReactionPicker {
    right: -4px;
  }

  .communicationNewMessages {
    bottom: 77px;
  }

  .communicationUnreadJump {
    bottom: 115px;
  }

  .communicationDialogBackdrop {
    align-items: end;
    padding: 5px;
  }

  .communicationDialog {
    border-radius: 22px 22px 8px 8px;
    width: 100%;
    max-height: calc(100dvh - 10px);
  }

  .communicationPicker {
    max-height: calc(100dvh - 90px);
  }

  .communicationForwardDialog {
    min-height: min(560px, 100dvh - 90px);
    max-height: calc(100dvh - 90px);
  }

  .communicationForwardedMessage {
    width: 100%;
  }

  .communicationLightbox {
    padding: 50px 8px 20px;
  }
}

.communicationRailDivider {
  background: #ffffff1a;
  flex: 0 0 1px;
  width: 30px;
  height: 1px;
}

.communicationHubRail {
  scrollbar-width: none;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  display: flex;
  overflow-y: auto;
}

.communicationHubRail::-webkit-scrollbar {
  display: none;
}

.communicationHubRail > a {
  color: #fff;
  border-radius: 16px;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 46px;
  transition: border-radius .15s, background-color .15s;
  display: grid;
  position: relative;
}

.communicationHubRail > a:hover, .communicationHubRail > a[data-active="true"] {
  background: #ffffff17;
  border-radius: 13px;
}

.communicationHubRail > a[data-active="true"]:before {
  content: "";
  background: #fff;
  border-radius: 0 4px 4px 0;
  width: 3px;
  height: 24px;
  position: absolute;
  left: -10px;
}

.communicationHubRail > a > b {
  box-sizing: border-box;
  background: var(--color-accent);
  color: #fff;
  border: 2px solid #080809;
  border-radius: 9px;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 7px;
  display: grid;
  position: absolute;
  bottom: -2px;
  right: -2px;
}

.communicationHubAvatar {
  color: #ffffffe6;
  letter-spacing: -.03em;
  background: #252527 center / cover no-repeat;
  border-radius: 14px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.communicationHubAdd {
  color: #79dd85;
}

.communicationHubAdd:hover {
  color: #fff;
  background: #2e9c58;
}

.communicationHubDiscover {
  color: #ffffffa8;
}

.communicationHubDiscover:hover {
  background: #ffffff1f;
}

.communicationList[data-hub-view="true"] {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.communicationHubHeader h1 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.communicationHubMeta {
  color: #ffffff5c;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-bottom: 1px solid #ffffff12;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  padding: 0 13px;
  font-size: 8px;
  font-weight: 650;
  display: flex;
}

.communicationHubMeta button {
  color: #ffffff9e;
  cursor: pointer;
  background: #ffffff0b;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 8px;
  font-size: 8px;
  display: inline-flex;
}

.communicationHubMeta button:hover {
  color: #fff;
  background: #ffffff14;
}

.communicationHubMeta svg {
  width: 12px;
  height: 12px;
}

.communicationHubEvents {
  border-bottom: 1px solid #ffffff12;
  gap: 5px;
  padding: 8px 7px 7px;
  display: grid;
}

.communicationHubEvents > header {
  justify-content: space-between;
  align-items: center;
  min-height: 23px;
  padding: 0 6px;
  display: flex;
}

.communicationHubEvents > header span {
  color: #ffffff61;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  font-weight: 750;
  display: inline-flex;
}

.communicationHubEvents > header svg {
  width: 12px;
  height: 12px;
}

.communicationHubEvents > header button {
  color: #ffffff6b;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  place-items: center;
  width: 24px;
  height: 24px;
  display: grid;
}

.communicationHubEvents > header button:hover {
  color: #fff;
  background: #ffffff12;
}

.communicationHubEvents > p {
  color: #ffffff42;
  margin: 2px 6px 4px;
  font-size: 8px;
}

.communicationHubEvents > div {
  gap: 4px;
  display: grid;
}

.communicationHubEvents article {
  background: #ffffff06;
  border: 1px solid #fff1;
  border-radius: 11px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  display: grid;
}

.communicationHubEvents article[data-status="active"] {
  border-color: rgb(var(--color-accent-rgb) / .35);
}

.communicationHubEventMain {
  min-width: 0;
  min-height: 46px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 4px 5px 4px 7px;
  display: grid;
}

.communicationHubEventMain time {
  place-items: center;
  line-height: 1;
  display: grid;
}

.communicationHubEventMain time b {
  color: #ffffffd6;
  font-size: 12px;
}

.communicationHubEventMain time span {
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 6px;
  font-weight: 800;
}

.communicationHubEventMain > span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.communicationHubEventMain strong, .communicationHubEventMain small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.communicationHubEventMain strong {
  color: #ffffffd1;
  font-size: 9px;
}

.communicationHubEventMain small {
  color: #ffffff52;
  font-size: 7px;
}

.communicationHubEventMain > svg {
  color: #ffffff3b;
  width: 11px;
}

.communicationHubEventInterest {
  color: #ffffff61;
  cursor: pointer;
  background: #ffffff0b;
  border: 0;
  border-radius: 9px;
  grid-template-columns: 11px auto;
  place-items: center;
  gap: 1px;
  min-width: 34px;
  height: 32px;
  margin-right: 6px;
  display: grid;
}

.communicationHubEventInterest[data-active="true"] {
  background: rgb(var(--color-accent-rgb) / .16);
  color: var(--color-accent);
}

.communicationHubEventInterest svg {
  width: 10px;
}

.communicationHubEventInterest span {
  font-size: 7px;
  font-weight: 700;
}

.communicationChannelList {
  scrollbar-width: thin;
  scrollbar-color: #ffffff1f transparent;
  min-height: 0;
  padding: 9px 7px 18px;
  overflow-y: auto;
}

.communicationChannelList > section {
  margin-bottom: 12px;
}

.communicationChannelList > section > header {
  color: #ffffff52;
  letter-spacing: .1em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  min-height: 25px;
  padding: 0 8px;
  font-size: 8px;
  font-weight: 750;
  display: flex;
}

.communicationChannelList > section > header svg {
  width: 12px;
}

.communicationChannelList > section > div, .communicationChannelEntry {
  gap: 2px;
  display: grid;
}

.communicationChannelList a {
  color: #ffffff78;
  border-radius: 10px;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 590;
  display: grid;
}

.communicationChannelList a:hover, .communicationChannelList a[data-active="true"] {
  color: #fff;
  background: #ffffff0f;
}

.communicationChannelList a[data-active="true"] {
  box-shadow: inset 2px 0 var(--color-accent);
}

.communicationChannelList a > svg {
  width: 14px;
  height: 14px;
}

.communicationChannelList a > svg:last-of-type:not(:first-child) {
  color: #ffffff40;
  width: 11px;
}

.communicationChannelList a span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.communicationChannelList a b {
  background: var(--color-accent);
  color: #fff;
  border-radius: 9px;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 7px;
  display: grid;
}

.communicationChannelList a[draggable="true"] {
  cursor: grab;
}

.communicationThreadList {
  border-left: 1px solid #ffffff14;
  gap: 1px;
  margin: 1px 0 4px 17px;
  padding-left: 7px;
  display: grid;
}

.communicationThreadList a {
  color: #ffffff61;
  border-radius: 8px;
  grid-template-columns: 14px minmax(0, 1fr) auto auto;
  min-height: 31px;
  padding: 0 7px;
  font-size: 8px;
}

.communicationThreadList a > svg {
  width: 12px;
}

.communicationThreadList a[data-active="true"] {
  box-shadow: none;
  color: #fffc;
  background: #ffffff0b;
}

.communicationVoiceMemberList {
  gap: 1px;
  margin: 0 0 5px 22px;
  display: grid;
}

.communicationStageLabel {
  color: #ffffff45;
  letter-spacing: .07em;
  text-transform: uppercase;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 7px;
  font-size: 7px;
  font-weight: 750;
  display: flex;
}

.communicationStageLabel svg {
  width: 10px;
}

.communicationVoiceMember[data-stage-role="speaker"] > a {
  color: #ffffffc2;
}

.communicationVoiceMember[data-stage-role="audience"] > a {
  opacity: .66;
}

.communicationVoiceMember[data-requested="true"] > a {
  background: rgb(var(--color-accent-rgb) / .09);
}

.communicationVoiceMember > a > svg:last-child {
  color: var(--color-accent);
}

.communicationStageOfflineRequest {
  background: rgb(var(--color-accent-rgb) / .08);
  color: #ffffffa6;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  grid-template-columns: 12px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 7px;
  font-size: 8px;
  display: grid;
}

.communicationStageOfflineRequest span {
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.communicationStageOfflineRequest svg {
  width: 11px;
}

.communicationVoiceMember {
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  display: grid;
  position: relative;
}

.communicationVoiceMember[draggable="true"] {
  cursor: grab;
}

.communicationVoiceMember[draggable="true"]:active {
  cursor: grabbing;
}

.communicationChannelEntry[data-voice-drop="true"] > a {
  background: rgb(var(--color-accent-rgb) / .12);
  box-shadow: inset 0 0 0 1px rgb(var(--color-accent-rgb) / .38);
  color: #fff;
}

.communicationVoiceMemberList a {
  color: #ffffff75;
  border-radius: 8px;
  grid-template-columns: 21px minmax(0, 1fr) 13px;
  min-height: 31px;
  padding: 0 7px;
  font-size: 8px;
}

.communicationVoiceMemberList a:hover {
  color: #ffffffd1;
  background: #ffffff0b;
}

.communicationVoiceMemberList .communicationAvatar {
  border-radius: 8px;
  width: 21px;
  height: 21px;
  font-size: 7px;
}

.communicationVoiceMemberList a > svg {
  color: #ffffff5c;
  width: 11px;
}

.communicationVoiceMemberList a > i {
  background: #72d884;
  border-radius: 50%;
  justify-self: center;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 3px #72d88414;
}

.communicationVoiceMember > nav {
  z-index: 2;
  background: var(--surface-subcard);
  opacity: 0;
  pointer-events: none;
  border: 1px solid #ffffff14;
  border-radius: 7px;
  gap: 2px;
  padding: 2px;
  transition: opacity .12s, transform .12s;
  display: flex;
  position: absolute;
  top: 3px;
  right: 3px;
  transform: translateX(3px);
}

.communicationVoiceMember:hover > nav, .communicationVoiceMember:focus-within > nav, .communicationVoiceMember[data-requested="true"] > nav {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.communicationVoiceMember > nav button {
  color: #ffffff80;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  place-items: center;
  width: 23px;
  height: 23px;
  display: grid;
}

.communicationVoiceMember > nav button:hover {
  color: #fff;
  background: #ffffff14;
}

.communicationVoiceMember > nav button.isDanger {
  color: #ff8a78;
}

.communicationVoiceMember > nav svg {
  width: 11px;
  height: 11px;
}

.communicationVoiceLobby {
  text-align: center;
  grid-row: 2 / -1;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 32px;
  display: grid;
}

.communicationVoiceLobby > span {
  color: #72d884;
  background: #74e28714;
  border: 1px solid #74e28747;
  border-radius: 22px;
  place-items: center;
  width: 64px;
  height: 64px;
  display: grid;
}

.communicationVoiceLobby > span svg {
  width: 25px;
  height: 25px;
}

.communicationVoiceLobby strong {
  letter-spacing: -.03em;
  margin-top: 7px;
  font-size: 20px;
  font-weight: 670;
}

.communicationVoiceLobby p {
  color: #ffffff6b;
  max-width: 440px;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.communicationVoiceLobby small {
  max-width: 440px;
  color: var(--color-accent);
  font-size: 9px;
}

.communicationVoiceLobby button {
  color: #0b0b0c;
  cursor: pointer;
  background: #f1efeb;
  border: 1px solid #ffffff24;
  border-radius: 13px;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  margin-top: 9px;
  padding: 0 17px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.communicationVoiceLobby button:disabled {
  cursor: wait;
  opacity: .65;
}

.communicationVoiceLobby button svg {
  width: 15px;
}

.communicationVoiceRoom {
  background: #111214;
  grid-row: 2 / -1;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  padding: 14px;
  display: grid;
  position: relative;
}

.communicationVoiceRoom > header {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 46px;
  padding: 0 4px 14px;
  display: flex;
}

.communicationVoiceRoom > header > div, .communicationVoiceRoom > header > span {
  align-items: center;
  gap: 10px;
  display: flex;
}

.communicationVoiceRoom > header > div > svg {
  color: #72d884;
  width: 17px;
}

.communicationVoiceRoom > header > div > span {
  gap: 2px;
  display: grid;
}

.communicationVoiceRoom > header strong {
  font-size: 13px;
  font-weight: 680;
}

.communicationVoiceRoom > header small {
  color: #ffffff5e;
  font-size: 8px;
}

.communicationVoiceRoom > header > span {
  color: #ffffff6b;
  font-size: 10px;
}

.communicationVoiceRoom > header > span svg {
  width: 14px;
}

.communicationVoiceGrid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  place-content: center;
  gap: 8px;
  min-height: 0;
  display: grid;
  overflow-y: auto;
}

.communicationVoiceGrid[data-count="1"][data-screen="false"] {
  grid-template-columns: minmax(280px, min(100%, 760px));
}

.communicationVoiceGrid[data-count="2"][data-screen="false"], .communicationVoiceGrid[data-count="3"][data-screen="false"], .communicationVoiceGrid[data-count="4"][data-screen="false"] {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.communicationVoiceGrid[data-screen="true"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  align-content: start;
}

.communicationVoiceGrid[data-focused="true"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  grid-auto-rows: max-content;
  align-content: start;
}

.communicationVoiceGrid[data-focused="true"] > [data-focused="true"] {
  order: -1;
  grid-column: 1 / -1;
  min-height: min(62dvh, 640px);
  max-height: min(62dvh, 640px);
}

.communicationVoiceGrid[data-focused="true"] > .communicationVoiceScreenTile:not([data-focused="true"]) {
  grid-column: auto;
  min-height: 120px;
  max-height: 180px;
}

.communicationVoiceGrid[data-focused="true"] > .communicationVoiceParticipant:not([data-focused="true"]) {
  min-height: 120px;
  max-height: 180px;
}

.communicationVoiceParticipant {
  aspect-ratio: 16 / 9;
  background: var(--surface-subcard);
  border: 2px solid #0000;
  border-radius: 12px;
  min-height: 160px;
  max-height: min(54dvh, 520px);
  transition: border-color .12s;
  position: relative;
  overflow: hidden;
}

.communicationVoiceParticipant[data-speaking="true"] {
  border-color: #23a55a;
}

.communicationVoiceParticipant[data-speaking="true"] footer strong {
  background: #186938e6;
}

.communicationVoiceScreenTile {
  aspect-ratio: 16 / 9;
  background: #080809;
  border: 2px solid #0000;
  border-radius: 12px;
  grid-column: 1 / -1;
  place-items: center;
  width: 100%;
  min-height: 280px;
  max-height: min(62dvh, 720px);
  display: grid;
  position: relative;
  overflow: hidden;
}

.communicationVoiceScreenTile[data-speaking="true"] {
  border-color: #23a55a;
}

.communicationVoiceScreenTile video {
  object-fit: contain;
  background: #080809;
  width: 100%;
  height: 100%;
}

.communicationVoiceScreenTile > span {
  color: #ffffffdb;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #0c0c0dc2;
  border: 1px solid #ffffff2b;
  border-radius: 9px;
  align-items: center;
  gap: 7px;
  min-height: 27px;
  padding: 0 9px;
  font-size: 7px;
  font-weight: 720;
  display: inline-flex;
  position: absolute;
  top: 10px;
  left: 10px;
}

.communicationVoiceScreenTile > span svg {
  color: #72d884;
  width: 11px;
  height: 11px;
}

.communicationVoiceScreenTile > button {
  color: #ffffffb8;
  cursor: pointer;
  opacity: 0;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #0c0c0dc7;
  border: 1px solid #ffffff21;
  border-radius: 9px;
  place-items: center;
  width: 30px;
  height: 30px;
  transition: opacity .12s, background .12s;
  display: grid;
  position: absolute;
  top: 10px;
  right: 10px;
}

.communicationVoiceScreenTile:hover > button, .communicationVoiceScreenTile:focus-within > button, .communicationVoiceScreenTile > button[data-active="true"] {
  opacity: 1;
}

.communicationVoiceScreenTile > button:hover, .communicationVoiceScreenTile > button[data-active="true"] {
  color: #fff;
  background: #ffffff1f;
}

.communicationVoiceScreenTile > button svg {
  width: 13px;
  height: 13px;
}

.communicationVoiceVideo {
  background: var(--surface-card);
  place-items: center;
  width: 100%;
  height: 100%;
  display: grid;
  position: relative;
  overflow: hidden;
}

.communicationVoiceVideo video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.communicationVoiceVideo > span {
  color: #fff;
  background: #29292b center / cover no-repeat;
  border-radius: 32%;
  place-items: center;
  width: clamp(72px, 9vw, 108px);
  height: clamp(72px, 9vw, 108px);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 720;
  display: grid;
}

.communicationVoiceParticipant footer {
  pointer-events: none;
  align-items: center;
  gap: 7px;
  min-width: 0;
  display: flex;
  position: absolute;
  bottom: 9px;
  left: 9px;
  right: 9px;
}

.communicationVoiceParticipant footer strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #0a0a0bc2;
  border-radius: 7px;
  width: fit-content;
  max-width: calc(100% - 30px);
  padding: 6px 8px;
  font-size: 9px;
  font-weight: 650;
  overflow: hidden;
}

.communicationVoiceParticipant footer svg {
  box-sizing: content-box;
  color: #ffffff8c;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #0a0a0bc2;
  border-radius: 7px;
  width: 13px;
  padding: 6px;
}

.communicationVoiceParticipant footer svg.isSpeaking {
  color: #23a55a;
}

.communicationVoiceParticipant > nav {
  opacity: 0;
  gap: 5px;
  transition: opacity .12s;
  display: flex;
  position: absolute;
  top: 9px;
  right: 9px;
}

.communicationVoiceParticipant:hover > nav, .communicationVoiceParticipant:focus-within > nav {
  opacity: 1;
}

.communicationVoiceParticipant > nav button {
  color: #ffffff85;
  cursor: pointer;
  background: #ffffff09;
  border: 1px solid #ffffff14;
  border-radius: 8px;
  place-items: center;
  width: 27px;
  height: 27px;
  display: grid;
}

.communicationVoiceParticipant > nav button:hover, .communicationVoiceParticipant > nav button[data-active="true"] {
  color: #fff;
  background: #ffffff17;
  border-color: #ffffff29;
}

.communicationVoiceParticipant > nav button.isDanger {
  color: #ff8a78;
}

.communicationVoiceParticipant > nav button:disabled {
  cursor: wait;
  opacity: .36;
}

.communicationVoiceParticipant > nav svg {
  width: 12px;
  height: 12px;
}

.communicationVoiceRoom > footer {
  background: #0b0b0c;
  border-radius: 16px;
  justify-self: center;
  gap: 7px;
  width: fit-content;
  margin-top: 12px;
  padding: 6px;
  display: flex;
}

.communicationVoiceRoom > footer button {
  color: #ffffffb8;
  cursor: pointer;
  background: #242528;
  border: 0;
  border-radius: 12px;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
}

.communicationVoiceRoom > footer button:hover, .communicationVoiceRoom > footer button[data-active="true"] {
  background: var(--surface-subcard-hover);
  color: #fff;
  border-color: #ffffff29;
}

.communicationVoiceRoom > footer button:disabled {
  cursor: not-allowed;
  opacity: .28;
}

.communicationVoiceRoom > footer button.isDanger {
  color: #ff8a78;
}

.communicationVoiceRoom > footer button svg {
  width: 16px;
  height: 16px;
}

.communicationVoiceRoom > footer button span {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.communicationVoiceError {
  z-index: 5;
  color: #ffd39b;
  cursor: pointer;
  background: #29251f;
  border: 1px solid #ffb95c33;
  border-radius: 10px;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 9px 12px;
  font-size: 9px;
  position: absolute;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
}

.communicationVoiceAudioUnlock {
  z-index: 4;
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #1d1914f0;
  border: 1px solid #ffbb5a47;
  border-radius: 13px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 12px;
  display: flex;
  position: absolute;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
}

.communicationVoiceAudioUnlock > svg {
  color: #ffbd6b;
  width: 16px;
  height: 16px;
}

.communicationVoiceAudioUnlock > span {
  text-align: left;
  gap: 2px;
  display: grid;
}

.communicationVoiceAudioUnlock strong {
  font-size: 8px;
}

.communicationVoiceAudioUnlock small {
  color: #fff6;
  font-size: 7px;
}

.communicationVoiceAudio {
  display: none;
}

.communicationVoiceDock {
  box-sizing: border-box;
  background: #191a1d;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 7px 7px 7px 10px;
  display: flex;
}

.communicationVoiceDock > button {
  color: #fff;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  flex: 1;
  align-items: center;
  gap: 9px;
  min-width: 0;
  display: flex;
}

.communicationVoiceDock > button > svg {
  color: #72d884;
  flex: none;
  width: 15px;
}

.communicationVoiceDock > button > span {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.communicationVoiceDock > button strong, .communicationVoiceDock > button small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.communicationVoiceDock > button strong {
  font-size: 9px;
}

.communicationVoiceDock > button small {
  color: #ffffff61;
  font-size: 7px;
}

.communicationVoiceDock > nav {
  flex: none;
  gap: 3px;
  display: flex;
}

.communicationVoiceDock > nav button {
  color: #ffffffa6;
  cursor: pointer;
  background: #27282b;
  border: 0;
  border-radius: 9px;
  place-items: center;
  width: 31px;
  height: 31px;
  display: grid;
}

.communicationVoiceDock > nav button:hover, .communicationVoiceDock > nav button[data-active="true"] {
  color: #fff;
  background: #ffffff17;
}

.communicationVoiceDock > nav button.isDanger {
  color: #ff8a78;
}

.communicationVoiceDock > nav button.isWarning {
  color: #ffbd6b;
  border-color: #ffbb5a47;
}

.communicationVoiceDock > nav button:disabled {
  opacity: .3;
  cursor: default;
}

.communicationVoiceDock > nav svg {
  width: 14px;
  height: 14px;
}

.communicationScreenShareBackdrop {
  z-index: 1000;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #000000b8;
  place-items: center;
  padding: 18px;
  display: grid;
  position: fixed;
  inset: 0;
}

.communicationScreenShareDialog {
  color: #f5f3ef;
  background: #17181b;
  border: 1px solid #ffffff1f;
  border-radius: 18px;
  width: min(560px, 100%);
  overflow: hidden;
}

.communicationScreenShareDialog > header {
  border-bottom: 1px solid #ffffff14;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 0 18px;
  display: flex;
}

.communicationScreenShareDialog > header > div {
  align-items: center;
  gap: 11px;
  min-width: 0;
  display: flex;
}

.communicationScreenShareDialog > header > div > svg {
  color: #23a55a;
  width: 20px;
}

.communicationScreenShareDialog > header span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.communicationScreenShareDialog > header strong {
  font-size: 14px;
  font-weight: 680;
}

.communicationScreenShareDialog > header small {
  color: #ffffff61;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.communicationScreenShareDialog > header > button {
  color: #fff9;
  cursor: pointer;
  background: #242528;
  border: 0;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.communicationScreenShareDialog > header > button svg {
  width: 15px;
}

.communicationScreenShareOptions {
  gap: 18px;
  padding: 18px;
  display: grid;
}

.communicationScreenShareOptions fieldset {
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.communicationScreenShareOptions legend {
  color: #ffffff6b;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-size: 8px;
  font-weight: 680;
}

.communicationScreenShareOptions fieldset > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.communicationScreenShareOptions fieldset button {
  color: #ffffff9e;
  cursor: pointer;
  background: #202125;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 11px;
  font-size: 10px;
  display: flex;
}

.communicationScreenShareOptions fieldset button:hover {
  color: #fff;
  border-color: #ffffff2e;
}

.communicationScreenShareOptions fieldset button[data-active="true"] {
  color: #fff;
  background: #23a55a1c;
  border-color: #23a55a;
}

.communicationScreenShareOptions fieldset button svg {
  color: #43cc72;
  width: 13px;
}

.communicationScreenShareAudio {
  cursor: pointer;
  background: #202125;
  border: 1px solid #ffffff14;
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 54px;
  padding: 0 13px;
  display: flex;
}

.communicationScreenShareAudio > span {
  gap: 3px;
  display: grid;
}

.communicationScreenShareAudio strong {
  font-size: 10px;
}

.communicationScreenShareAudio small {
  color: #ffffff5c;
  font-size: 8px;
}

.communicationScreenShareAudio input {
  accent-color: #23a55a;
  width: 18px;
  height: 18px;
}

.communicationScreenShareDialog > footer {
  background: #111214;
  border-top: 1px solid #ffffff14;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 0 18px;
  display: flex;
}

.communicationScreenShareDialog > footer > span {
  color: #ffffff73;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  display: flex;
}

.communicationScreenShareDialog > footer > span svg {
  width: 14px;
}

.communicationScreenShareDialog > footer > button {
  color: #fff;
  cursor: pointer;
  background: #23a55a;
  border: 0;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 680;
  display: inline-flex;
}

.communicationScreenShareDialog > footer > button:disabled {
  cursor: wait;
  opacity: .58;
}

.communicationScreenShareDialog > footer > button svg {
  width: 15px;
}

.communicationVoiceDeviceDialog {
  width: min(500px, 100%);
}

.communicationVoiceDeviceOptions {
  gap: 12px;
  padding: 18px;
  display: grid;
}

.communicationVoiceDeviceOptions > label {
  gap: 7px;
  display: grid;
}

.communicationVoiceDeviceOptions > label > span {
  color: #ffffff73;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 680;
}

.communicationVoiceDeviceOptions select {
  color: #ffffffd6;
  cursor: pointer;
  width: 100%;
  min-height: 44px;
  font: inherit;
  background: #202125;
  border: 1px solid #ffffff17;
  border-radius: 11px;
  outline: 0;
  padding: 0 38px 0 12px;
  font-size: 10px;
}

.communicationVoiceDeviceOptions select:hover, .communicationVoiceDeviceOptions select:focus-visible {
  border-color: #fff3;
}

.communicationVoiceDeviceOptions select:disabled {
  cursor: wait;
  opacity: .55;
}

.communicationVoiceDeviceOptions > small {
  color: #ffffff5c;
  font-size: 8px;
  line-height: 1.45;
}

.communicationIncomingCall {
  z-index: 80;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: #18181af5;
  border: 1px solid #ffffff21;
  border-radius: 17px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-width: min(330px, 100% - 28px);
  padding: 10px;
  display: grid;
  position: absolute;
  top: 14px;
  right: 14px;
}

.communicationIncomingCall > span {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.communicationIncomingCall > span strong, .communicationIncomingCall > span small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.communicationIncomingCall > span strong {
  font-size: 10px;
}

.communicationIncomingCall > span small {
  color: #ffffff6b;
  font-size: 8px;
}

.communicationIncomingCall > button {
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.communicationIncomingCall > button.isDecline {
  background: #b83c32;
}

.communicationIncomingCall > button.isAccept {
  background: #33894d;
}

.communicationIncomingCall > button svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 680px) {
  .communicationVoiceRoom {
    padding: 12px;
  }

  .communicationVoiceGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .communicationVoiceRoom > footer {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .communicationVoiceRoom > footer button {
    flex: 0 0 42px;
  }

  .communicationVoiceScreenTile {
    min-height: 210px;
  }

  .communicationVoiceAudioUnlock {
    width: max-content;
    max-width: calc(100% - 24px);
    top: 68px;
  }

  .communicationScreenShareOptions fieldset > div {
    grid-template-columns: 1fr;
  }

  .communicationScreenShareDialog > footer {
    flex-direction: column;
    align-items: stretch;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .communicationScreenShareDialog > footer > button {
    justify-content: center;
  }
}

.communicationHubForm {
  gap: 9px;
  padding: 16px 16px 0;
  display: grid;
}

.communicationHubForm > label {
  background: var(--surface-subcard);
  color: #ffffff5c;
  border: 1px solid #ffffff17;
  border-radius: 12px;
  align-items: center;
  gap: 9px;
  min-height: 45px;
  padding: 0 12px;
  display: flex;
}

.communicationHubForm > label svg {
  width: 15px;
}

.communicationHubForm input {
  color: #fff;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  font-size: 11px;
}

.communicationHubForm > small {
  color: #ffffff4d;
  font-size: 8px;
}

.communicationHubForm > footer {
  border-top: 1px solid #ffffff12;
  justify-content: flex-end;
  gap: 7px;
  margin: 8px -16px 0;
  padding: 12px 14px;
  display: flex;
}

.communicationHubForm > footer button {
  color: #ffffffab;
  cursor: pointer;
  background: #ffffff09;
  border: 1px solid #ffffff14;
  border-radius: 11px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 9px;
  font-weight: 650;
}

.communicationHubForm > footer button:last-child {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.communicationHubForm > footer button:disabled {
  opacity: .3;
  cursor: default;
}

.communicationHubDiscovery {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: min(540px, 68dvh);
  display: grid;
}

.communicationHubDiscovery > header {
  border-bottom: 1px solid #ffffff12;
  padding: 15px 16px 12px;
}

.communicationHubDiscovery > header label {
  background: var(--surface-subcard);
  color: #fff6;
  border: 1px solid #ffffff17;
  border-radius: 13px;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 13px;
  display: flex;
}

.communicationHubDiscovery > header svg {
  width: 16px;
}

.communicationHubDiscovery > header input {
  color: #fff;
  width: 100%;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  font-size: 11px;
}

.communicationHubDiscovery > header p {
  color: #ffffff61;
  margin: 8px 2px 0;
  font-size: 9px;
}

.communicationHubDiscovery > section {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 12px 16px 16px;
  display: grid;
  overflow-y: auto;
}

.communicationHubDiscovery article {
  background: var(--surface-subcard);
  border: 1px solid #ffffff13;
  border-radius: 14px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 11px;
  display: grid;
}

.communicationHubDiscovery article > div {
  min-width: 0;
}

.communicationHubDiscovery article strong, .communicationHubDiscovery article span, .communicationHubDiscovery article p {
  display: block;
}

.communicationHubDiscovery article strong {
  color: #ffffffe6;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.communicationHubDiscovery article span {
  color: #ffffff6b;
  margin-top: 2px;
  font-size: 8px;
}

.communicationHubDiscovery article p {
  color: #ffffff80;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 6px 0 0;
  font-size: 9px;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
}

.communicationHubDiscovery article > button {
  color: #ffffffd1;
  cursor: pointer;
  background: #ffffff12;
  border: 1px solid #ffffff1c;
  border-radius: 10px;
  min-height: 34px;
  padding: 0 11px;
  font-size: 8px;
  font-weight: 700;
}

.communicationHubDiscovery article > button:hover {
  background: #ffffff1f;
  border-color: #fff3;
}

.communicationHubDiscovery article > button:disabled {
  opacity: .4;
  cursor: default;
}

.communicationHubDiscoverySkeleton {
  background: #ffffff0a;
  border-radius: 14px;
  min-height: 88px;
  animation: 1.2s ease-in-out infinite alternate communicationSkeleton;
  display: block;
}

.communicationHubDiscoveryEmpty {
  color: #ffffff57;
  grid-column: 1 / -1;
  align-content: center;
  place-items: center;
  gap: 8px;
  min-height: 210px;
  display: grid;
}

.communicationHubDiscoveryEmpty svg {
  width: 24px;
}

.communicationHubDiscoveryEmpty strong {
  font-size: 10px;
}

.communicationThreadForm {
  gap: 10px;
  padding: 15px 15px 0;
  display: grid;
}

.communicationThreadForm > div {
  background: #ffffff06;
  border: 1px solid #ffffff12;
  border-radius: 11px;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  display: grid;
}

.communicationThreadForm > div > svg {
  color: #ffffff57;
  width: 14px;
}

.communicationThreadForm > div span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.communicationThreadForm > div small {
  color: #ffffff4d;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 7px;
  font-weight: 700;
}

.communicationThreadForm > div strong {
  color: #ffffffa6;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.communicationThreadForm > label {
  background: var(--surface-subcard);
  color: #ffffff5c;
  border: 1px solid #ffffff17;
  border-radius: 12px;
  align-items: center;
  gap: 9px;
  min-height: 45px;
  padding: 0 12px;
  display: flex;
}

.communicationThreadForm > label svg {
  width: 15px;
}

.communicationThreadForm :is(input, textarea) {
  resize: none;
  color: #fff;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  font-size: 11px;
}

.communicationThreadForm > label.communicationThreadBody {
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
}

.communicationThreadForm > label.communicationThreadBody svg {
  margin-top: 1px;
}

.communicationThreadForm > label.communicationThreadBody textarea {
  min-height: 90px;
  line-height: 1.5;
}

.communicationThreadForm > footer {
  border-top: 1px solid #ffffff12;
  justify-content: flex-end;
  gap: 7px;
  margin: 4px -15px 0;
  padding: 12px 14px;
  display: flex;
}

.communicationThreadForm > footer button {
  color: #ffffffab;
  cursor: pointer;
  background: #ffffff09;
  border: 1px solid #ffffff14;
  border-radius: 11px;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 9px;
  font-weight: 650;
  display: inline-flex;
}

.communicationThreadForm > footer button:last-child {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.communicationThreadForm > footer button:disabled {
  opacity: .3;
  cursor: default;
}

.communicationThreadForm > footer svg {
  width: 13px;
}

.communicationHubEventForm {
  gap: 11px;
  padding: 16px 16px 0;
  display: grid;
}

.communicationHubEventForm > label, .communicationHubEventDates label {
  gap: 7px;
  display: grid;
}

.communicationHubEventForm label > span {
  color: #ffffff61;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 700;
}

.communicationHubEventForm :is(input, textarea, select) {
  color: #f7f5f2;
  width: 100%;
  min-height: 42px;
  font: inherit;
  background: #ffffff09;
  border: 1px solid #ffffff14;
  border-radius: 11px;
  outline: none;
  padding: 0 12px;
  font-size: 10px;
}

.communicationHubEventForm textarea {
  resize: vertical;
  min-height: 74px;
  padding-top: 10px;
}

.communicationHubEventForm :is(input, textarea, select):focus {
  border-color: rgb(var(--color-accent-rgb) / .55);
}

.communicationHubEventForm :is(input, textarea, select):disabled {
  opacity: .7;
}

.communicationHubEventDates {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.communicationHubEventLocationTabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.communicationHubEventLocationTabs button, .communicationHubEventRSVP {
  color: #ffffff85;
  cursor: pointer;
  background: #ffffff06;
  border: 1px solid #ffffff12;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.communicationHubEventLocationTabs button[data-active="true"], .communicationHubEventRSVP[data-active="true"] {
  border-color: rgb(var(--color-accent-rgb) / .42);
  background: rgb(var(--color-accent-rgb) / .11);
  color: #fff;
}

.communicationHubEventLocationTabs svg, .communicationHubEventRSVP svg {
  width: 13px;
}

.communicationHubEventRSVP b {
  margin-left: auto;
}

.communicationHubEventForm > footer {
  border-top: 1px solid #ffffff12;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  margin: 2px -16px 0;
  padding: 11px 16px;
  display: flex;
}

.communicationHubEventForm > footer > div {
  gap: 6px;
  display: flex;
}

.communicationHubEventForm > footer button {
  color: #ffffffb8;
  cursor: pointer;
  background: #ffffff0b;
  border: 1px solid #ffffff14;
  border-radius: 11px;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  font-size: 9px;
  font-weight: 650;
  display: inline-flex;
}

.communicationHubEventForm > footer button[type="submit"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.communicationHubEventForm > footer button.isDanger {
  color: #ff8974;
}

.communicationHubEventForm > footer button:disabled {
  opacity: .35;
  cursor: default;
}

.communicationHubEventForm > footer svg {
  width: 13px;
}

.communicationDialog:has(.communicationHubSettings) {
  width: min(900px, 100vw - 36px);
}

.communicationHubSettings {
  grid-template-columns: 175px minmax(0, 1fr);
  min-height: min(610px, 100dvh - 140px);
  display: grid;
}

.communicationHubSettings > nav {
  background: var(--surface-card);
  border-right: 1px solid #ffffff12;
  flex-direction: column;
  gap: 3px;
  padding: 12px 9px;
  display: flex;
}

.communicationHubSettings > nav button {
  color: #ffffff70;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 10px;
  font-size: 9px;
  display: flex;
}

.communicationHubSettings > nav button:hover, .communicationHubSettings > nav button[data-active="true"] {
  color: #fff;
  background: #fff1;
}

.communicationHubSettings > nav svg {
  width: 14px;
}

.communicationHubSettings > section {
  min-width: 0;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
}

.communicationHubOverviewPanel {
  gap: 18px;
  display: grid;
}

.communicationHubOverview {
  gap: 13px;
  max-width: 560px;
  display: grid;
}

.communicationHubOverview > label {
  gap: 7px;
  display: grid;
}

.communicationHubOverview > label > span {
  color: #fff6;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 700;
}

.communicationHubOverview :is(input, textarea, select), .communicationHubChannelsSettings > form :is(input, select), .communicationHubRolesSettings > form > input:not([type="color"]) {
  box-sizing: border-box;
  background: var(--surface-subcard);
  color: #fff;
  border: 1px solid #ffffff17;
  border-radius: 11px;
  outline: 0;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 11px;
  font-size: 10px;
}

.communicationHubOverview textarea {
  resize: vertical;
  min-height: 110px;
  padding-top: 11px;
}

.communicationHubOverview select, .communicationHubChannelsSettings select {
  appearance: none;
}

.communicationHubInvite {
  align-items: center;
  gap: 10px;
  display: flex;
}

.communicationHubInvite button, .communicationHubOverview > footer button, .communicationHubChannelsSettings > form button, .communicationHubRolesSettings > form > button {
  color: #ffffffb3;
  cursor: pointer;
  background: #ffffff0b;
  border: 1px solid #ffffff17;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  font-size: 9px;
  display: inline-flex;
}

.communicationHubInvite svg, .communicationHubOverview > footer svg, .communicationHubChannelsSettings > form button svg, .communicationHubRolesSettings > form > button svg {
  width: 14px;
}

.communicationHubInvite code {
  color: var(--color-accent);
  background: #ffffff0d;
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 9px;
}

.communicationHubOverview > footer {
  gap: 8px;
  margin-top: 6px;
  display: flex;
}

.communicationHubOverview > footer button:first-child {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.communicationHubOverview > footer button:last-child:not(:first-child) {
  color: #ff8d75;
}

.communicationHubInviteList {
  border-top: 1px solid #ffffff12;
  gap: 9px;
  padding-top: 16px;
  display: grid;
}

.communicationHubInviteList > header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.communicationHubInviteList > header strong {
  font-size: 10px;
}

.communicationHubInviteList > header span {
  color: #ffffff7a;
  background: #ffffff0d;
  border-radius: 8px;
  place-items: center;
  min-width: 25px;
  height: 25px;
  font-size: 8px;
  display: grid;
}

.communicationHubInviteList > div {
  gap: 6px;
  display: grid;
}

.communicationHubInviteList article {
  border: 1px solid #ffffff12;
  border-radius: 11px;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  display: grid;
}

.communicationHubInviteList article[data-inactive="true"] {
  opacity: .42;
}

.communicationHubInviteList article code {
  color: #ffffffb8;
  text-overflow: ellipsis;
  font-size: 9px;
  overflow: hidden;
}

.communicationHubInviteList article > span {
  color: #ffffff80;
  text-align: right;
  font-size: 8px;
  display: grid;
}

.communicationHubDangerZone {
  border-top: 1px solid #ffffff12;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 11px;
  padding-top: 16px;
  display: grid;
}

.communicationHubDangerZone > header {
  grid-column: 1 / -1;
  gap: 4px;
  display: grid;
}

.communicationHubDangerZone > header strong {
  color: #ff9a87;
  font-size: 10px;
}

.communicationHubDangerZone > header span, .communicationHubDangerZone > label > span {
  color: #ffffff61;
  font-size: 8px;
}

.communicationHubDangerZone > label {
  gap: 6px;
  min-width: 0;
  display: grid;
}

.communicationHubDangerZone input {
  background: var(--surface-subcard);
  color: #fff;
  border: 1px solid #ffffff17;
  border-radius: 10px;
  outline: 0;
  min-height: 38px;
  padding: 0 10px;
  font-size: 9px;
}

.communicationHubDangerZone > button {
  border: 1px solid rgb(var(--color-accent-rgb) / .24);
  background: rgb(var(--color-accent-rgb) / .08);
  color: #ff9a87;
  cursor: pointer;
  border-radius: 10px;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  font-size: 9px;
  display: inline-flex;
}

.communicationHubDangerZone > button:disabled {
  opacity: .3;
  cursor: default;
}

.communicationHubDangerZone > button svg {
  width: 13px;
}

.communicationHubInviteList article small {
  color: #ffffff47;
  font-size: 7px;
}

.communicationHubInviteList article button {
  min-height: 28px;
  color: var(--color-accent);
  cursor: pointer;
  background: none;
  border: 1px solid #ffffff14;
  border-radius: 8px;
  padding: 0 8px;
  font-size: 8px;
}

.communicationHubChannelsSettings, .communicationHubRolesSettings {
  gap: 14px;
  display: grid;
}

.communicationHubChannelsSettings > form {
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: 7px;
  display: grid;
}

.communicationHubChannelsSettings > div {
  gap: 8px;
  display: grid;
}

.communicationHubChannelsSettings article {
  background: #ffffff05;
  border: 1px solid #ffffff12;
  border-radius: 13px;
}

.communicationHubChannelsSettings article > header {
  border-bottom: 1px solid #ffffff0e;
  justify-content: space-between;
  align-items: center;
  min-height: 38px;
  padding: 0 10px 0 13px;
  display: flex;
}

.communicationHubChannelsSettings article > header strong {
  font-size: 9px;
}

.communicationHubChannelsSettings article button, .communicationHubRolesSettings article button {
  color: #ffffff57;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}

.communicationHubChannelsSettings article button:hover, .communicationHubRolesSettings article button:hover {
  background: rgb(var(--color-accent-rgb) / .1);
  color: #ff8d75;
}

.communicationHubChannelsSettings article button svg, .communicationHubRolesSettings article button svg {
  width: 13px;
}

.communicationHubChannelsSettings article > span {
  color: #ffffff7a;
  grid-template-columns: 15px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 8px 0 12px;
  display: grid;
}

.communicationHubChannelsSettings article > span svg {
  width: 13px;
}

.communicationHubChannelsSettings article > span b {
  color: #ffffffb8;
  font-size: 9px;
  font-weight: 600;
}

.communicationHubChannelsSettings article > span small {
  font-size: 8px;
}

.communicationHubChannelsSettings > form:nth-child(2) {
  grid-template-columns: minmax(110px, 1fr) minmax(92px, .55fr) minmax(105px, .65fr) auto auto;
}

.communicationHubPrivateToggle {
  background: var(--surface-subcard);
  color: #ffffff80;
  border: 1px solid #ffffff17;
  border-radius: 11px;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 10px;
  font-size: 8px;
  display: inline-flex;
}

.communicationHubPrivateToggle input {
  accent-color: var(--color-accent);
}

.communicationHubPrivateToggle svg {
  width: 12px;
}

.communicationHubChannelsSettings article.communicationHubChannelSetting {
  background: none;
  border: 0;
  border-bottom: 1px solid #ffffff0a;
  border-radius: 0;
}

.communicationHubChannelSetting:last-child {
  border-bottom: 0;
}

.communicationHubChannelsSettings article.communicationHubChannelSetting > header {
  color: #ffffff7a;
  border: 0;
  grid-template-columns: 15px minmax(0, 1fr) 15px 28px;
  gap: 8px;
  min-height: 38px;
  padding: 0 8px 0 12px;
  display: grid;
}

.communicationHubChannelSetting > header svg {
  width: 13px;
}

.communicationHubChannelSetting > header strong {
  color: #ffffffb8;
  font-size: 9px;
  font-weight: 600;
}

.communicationHubChannelSetting > form {
  grid-template-columns: minmax(90px, .65fr) minmax(140px, 1.3fr) 85px auto auto;
  align-items: end;
  gap: 7px;
  padding: 0 10px 9px 35px;
  display: grid;
}

.communicationHubChannelSetting > form > label:not(.communicationHubPrivateToggle) {
  gap: 4px;
  display: grid;
}

.communicationHubChannelSetting > form > label > span {
  color: #ffffff4d;
  text-transform: uppercase;
  font-size: 7px;
}

.communicationHubChannelSetting > form :is(input:not([type="checkbox"]), select) {
  box-sizing: border-box;
  background: var(--surface-subcard);
  color: #fff;
  border: 1px solid #ffffff14;
  border-radius: 9px;
  outline: 0;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 9px;
  font-size: 8px;
}

.communicationHubChannelSetting > form .communicationHubPrivateToggle {
  min-height: 34px;
  padding: 0 8px;
}

.communicationHubChannelSetting > form > button {
  color: #ffffffa6;
  border: 1px solid #ffffff14;
  align-items: center;
  gap: 5px;
  width: auto;
  min-height: 34px;
  padding: 0 9px;
  font-size: 8px;
  display: inline-flex;
}

.communicationHubChannelSetting > form > button:disabled {
  opacity: .28;
  cursor: default;
}

.communicationHubChannelAccess {
  gap: 8px;
  padding: 0 10px 10px 35px;
  display: grid;
}

.communicationHubChannelAccess > section {
  gap: 5px;
  display: grid;
}

.communicationHubChannelAccess > section > small {
  color: #ffffff4d;
  text-transform: uppercase;
  font-size: 7px;
}

.communicationHubChannelAccess > section > div {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.communicationHubChannelAccess button {
  color: #ffffff6b;
  border: 1px solid #ffffff12;
  align-items: center;
  gap: 5px;
  width: auto;
  min-height: 26px;
  padding: 0 7px;
  font-size: 8px;
  display: inline-flex;
}

.communicationHubChannelAccess button[data-active="true"] {
  border-color: rgb(var(--color-accent-rgb) / .32);
  background: rgb(var(--color-accent-rgb) / .1);
  color: #fff;
}

.communicationHubChannelAccess button i {
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.communicationHubChannelAccess .communicationAvatar {
  flex-basis: 16px;
  width: 16px;
  height: 16px;
  font-size: 6px;
}

.communicationHubRolesSettings > form {
  grid-template-columns: minmax(140px, 1fr) 42px auto;
  gap: 9px;
  display: grid;
}

.communicationHubRolesSettings > form > input[type="color"] {
  background: var(--surface-subcard);
  border: 1px solid #ffffff17;
  border-radius: 11px;
  width: 42px;
  min-height: 42px;
  padding: 4px;
}

.communicationHubRolesSettings > form > div {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.communicationHubRolesSettings label {
  color: #ffffff7a;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 8px;
  display: flex;
}

.communicationHubRolesSettings label input {
  accent-color: var(--color-accent);
}

.communicationHubRolesSettings > div {
  gap: 8px;
  display: grid;
}

.communicationHubRolesSettings article {
  background: #ffffff05;
  border: 1px solid #ffffff12;
  border-radius: 13px;
  padding: 11px;
}

.communicationHubRolesSettings article > header {
  grid-template-columns: 14px 9px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  display: grid;
}

.communicationHubRoleGrip {
  color: #ffffff47;
  cursor: grab;
  width: 13px !important;
}

.communicationHubRolesSettings article[draggable="true"]:active .communicationHubRoleGrip {
  cursor: grabbing;
  color: #ff8d75;
}

.communicationHubRolesSettings article > header i, .communicationHubMemberManager article > div :is(button, span) i {
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.communicationHubRolesSettings article > header strong {
  font-size: 10px;
}

.communicationHubRolesSettings article > header small {
  color: #ffffff47;
  font-size: 8px;
}

.communicationHubRolesSettings article > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
  display: grid;
}

.communicationHubRolesSettings article[data-managed="true"] {
  opacity: .72;
}

.communicationHubMemberManager {
  gap: 7px;
  display: grid;
}

.communicationHubMemberManager > article {
  border: 1px solid #fff1;
  border-radius: 13px;
  grid-template-columns: 38px minmax(120px, .8fr) minmax(160px, 1.4fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px;
  display: grid;
}

.communicationHubMemberManager .communicationAvatar {
  flex-basis: 38px;
  width: 38px;
  height: 38px;
}

.communicationHubMemberManager article > header {
  grid-template-columns: minmax(0, 1fr) 26px;
  gap: 3px 7px;
  min-width: 0;
  display: grid;
}

.communicationHubMemberManager article > header strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.communicationHubMemberManager article > header small {
  color: #ffffff4d;
  font-size: 8px;
}

.communicationHubMemberManager article > header :is(strong, small, em) {
  grid-column: 1;
}

.communicationHubPendingMember {
  color: #e8a85b;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
}

.communicationHubMemberManager article > header button {
  color: #ffffff6b;
  cursor: pointer;
  background: #ffffff09;
  border: 0;
  border-radius: 8px;
  grid-area: 1 / 2 / 4;
  place-items: center;
  width: 26px;
  height: 26px;
  display: grid;
}

.communicationHubMemberManager article > header button svg {
  width: 12px;
}

.communicationHubNickname {
  grid-column: 2 / -1;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.communicationHubNickname input {
  background: var(--surface-subcard);
  color: #fff;
  border: 1px solid #ffffff14;
  border-radius: 8px;
  outline: 0;
  flex: 1;
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  font-size: 8px;
}

.communicationHubNickname button {
  color: #ffffff8a;
  cursor: pointer;
  background: #ffffff0d;
  border: 0;
  border-radius: 8px;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.communicationHubNickname button svg {
  width: 12px;
}

.communicationHubMemberManager article > div {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.communicationHubMemberManager article > div :is(button, span) {
  color: #ffffff6b;
  background: #ffffff06;
  border: 1px solid #ffffff12;
  border-radius: 8px;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 0 7px;
  font-size: 8px;
  display: inline-flex;
}

.communicationHubMemberManager article > div button {
  cursor: pointer;
}

.communicationHubMemberManager article > div button[data-active="true"] {
  border-color: rgb(var(--color-accent-rgb) / .32);
  background: rgb(var(--color-accent-rgb) / .1);
  color: #fff;
}

.communicationHubMemberManager article > footer {
  gap: 4px;
  display: flex;
}

.communicationHubMemberManager article > footer button {
  color: #ffffff7a;
  cursor: pointer;
  background: #ffffff0a;
  border: 0;
  border-radius: 8px;
  min-height: 28px;
  padding: 0 7px;
  font-size: 8px;
}

.communicationHubMemberManager article > footer button svg {
  width: 10px;
}

.communicationHubMemberManager article > footer button.isOwnership[data-confirm="true"] {
  color: #ffaf79;
  background: #ff974e1f;
}

.communicationHubMemberManager article > footer button:last-child {
  color: #ff8d75;
}

.communicationHubOnboardingSettings {
  gap: 12px;
  padding: 16px;
  display: grid;
}

.communicationHubOnboardingSettings > header {
  background: var(--surface-subcard);
  border: 1px solid #ffffff13;
  border-radius: 14px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px;
  display: grid;
}

.communicationHubOnboardingSettings > header > span {
  color: #ffffffb8;
  background: #ffffff0f;
  border-radius: 11px;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}

.communicationHubOnboardingSettings > header svg {
  width: 17px;
}

.communicationHubOnboardingSettings > header strong, .communicationHubOnboardingSettings > header small {
  display: block;
}

.communicationHubOnboardingSettings > header strong {
  color: #ffffffe6;
  font-size: 11px;
}

.communicationHubOnboardingSettings > header small {
  color: #fff6;
  margin-top: 3px;
  font-size: 8px;
  line-height: 1.4;
}

.communicationHubOnboardingSettings > header > label {
  cursor: pointer;
  width: 38px;
  height: 22px;
  display: block;
  position: relative;
}

.communicationHubOnboardingSettings > header input {
  opacity: 0;
  position: absolute;
}

.communicationHubOnboardingSettings > header label i {
  background: #ffffff21;
  border-radius: 11px;
  width: 100%;
  height: 100%;
  display: block;
}

.communicationHubOnboardingSettings > header label i:after {
  content: "";
  background: #ffffffb3;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  margin: 3px;
  transition: transform .16s;
  display: block;
}

.communicationHubOnboardingSettings > header input:checked + i {
  background: #2f9e5b;
}

.communicationHubOnboardingSettings > header input:checked + i:after {
  background: #fff;
  transform: translateX(16px);
}

.communicationHubOnboardingSettings > label {
  gap: 7px;
  display: grid;
}

.communicationHubOnboardingSettings > label > span {
  color: #ffffff80;
  font-size: 8px;
  font-weight: 650;
}

.communicationHubOnboardingSettings textarea {
  box-sizing: border-box;
  resize: vertical;
  background: var(--surface-subcard);
  color: #ffffffdb;
  width: 100%;
  font: inherit;
  border: 1px solid #ffffff13;
  border-radius: 12px;
  outline: 0;
  padding: 11px 12px;
  font-size: 10px;
  line-height: 1.5;
}

.communicationHubOnboardingSettings textarea:focus {
  border-color: #ffffff2e;
}

.communicationHubOnboardingSettings > footer {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  display: flex;
}

.communicationHubOnboardingSettings > footer small {
  color: #ffffff59;
  font-size: 8px;
}

.communicationHubOnboardingSettings > footer button {
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 11px;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.communicationHubOnboardingSettings > footer button:disabled {
  opacity: .4;
  cursor: default;
}

.communicationHubOnboardingSettings > footer svg {
  width: 14px;
}

.communicationHubScreening {
  z-index: 12;
  background: #101114;
  place-items: center;
  padding: 24px;
  display: grid;
  position: absolute;
  inset: 64px 0 0;
  overflow-y: auto;
}

.communicationHubScreening > div {
  box-sizing: border-box;
  background: #18191d;
  border: 1px solid #ffffff16;
  border-radius: 18px;
  gap: 12px;
  width: min(520px, 100%);
  padding: 22px;
  display: grid;
}

.communicationHubScreening > div > span {
  color: #fffc;
  background: #fff1;
  border-radius: 13px;
  place-items: center;
  width: 44px;
  height: 44px;
  display: grid;
}

.communicationHubScreening > div > span svg {
  width: 20px;
}

.communicationHubScreening small {
  color: var(--color-accent);
  letter-spacing: .08em;
  font-size: 8px;
  font-weight: 750;
}

.communicationHubScreening h2 {
  color: #fff;
  letter-spacing: -.04em;
  margin: 0;
  font-size: clamp(20px, 2vw, 30px);
}

.communicationHubScreening p {
  color: #ffffff85;
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
}

.communicationHubScreening > div > div {
  gap: 7px;
  margin-top: 4px;
  display: grid;
}

.communicationHubScreening label {
  cursor: pointer;
  background: #ffffff06;
  border: 1px solid #ffffff12;
  border-radius: 12px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 11px;
  display: grid;
}

.communicationHubScreening label input {
  opacity: 0;
  position: absolute;
}

.communicationHubScreening label i {
  color: #0000;
  border: 1px solid #ffffff2e;
  border-radius: 6px;
  place-items: center;
  width: 18px;
  height: 18px;
  display: grid;
}

.communicationHubScreening label i svg {
  width: 12px;
}

.communicationHubScreening label input:checked + i {
  color: #fff;
  background: #2f9e5b;
  border-color: #2f9e5b;
}

.communicationHubScreening label span {
  color: #ffffffc2;
  font-size: 10px;
  line-height: 1.45;
}

.communicationHubScreening > div > button {
  color: #fff;
  cursor: pointer;
  background: #2f9e5b;
  border: 0;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 750;
  display: inline-flex;
}

.communicationHubScreening > div > button:disabled {
  opacity: .35;
  cursor: default;
}

.communicationHubScreening > div > button svg {
  width: 15px;
}

.communicationHubAutoMod {
  gap: 16px;
  display: grid;
}

.communicationHubAutoMod > form, .communicationHubAutoModEvents {
  background: #ffffff05;
  border: 1px solid #ffffff12;
  border-radius: 16px;
  overflow: hidden;
}

.communicationHubAutoMod > form > header {
  border-bottom: 1px solid #ffffff0f;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 13px 15px;
  display: grid;
}

.communicationHubAutoMod > form > header > span {
  background: rgb(var(--color-accent-rgb) / .1);
  width: 40px;
  height: 40px;
  color: var(--color-accent);
  border-radius: 12px;
  place-items: center;
  display: grid;
  position: relative;
}

.communicationHubAutoMod > form > header > span svg {
  width: 18px;
}

.communicationHubAutoMod > form > header > span i {
  background: #68d878;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  bottom: 3px;
  right: 3px;
}

.communicationHubAutoMod > form > header > div {
  gap: 4px;
  display: grid;
}

.communicationHubAutoMod > form > header strong {
  font-size: 12px;
}

.communicationHubAutoMod > form > header small, .communicationHubAutoModTerms small, .communicationHubAutoModRules small {
  color: #ffffff52;
  font-size: 8px;
  line-height: 1.45;
}

.communicationHubAutoModSwitch {
  color: #ffffff7a;
  cursor: pointer;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  display: flex;
}

.communicationHubAutoModSwitch input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.communicationHubAutoModSwitch > span {
  background: #ffffff1a;
  border-radius: 9px;
  width: 30px;
  height: 17px;
  transition: background-color .15s;
  position: relative;
}

.communicationHubAutoModSwitch > span:after {
  content: "";
  background: #ffffffb8;
  border-radius: 50%;
  width: 11px;
  height: 11px;
  transition: transform .15s;
  position: absolute;
  top: 3px;
  left: 3px;
}

.communicationHubAutoModSwitch input:checked + span {
  background: #2ca95a;
}

.communicationHubAutoModSwitch input:checked + span:after {
  transform: translateX(13px);
}

.communicationHubAutoModTerms {
  gap: 7px;
  padding: 14px 15px 0;
  display: grid;
}

.communicationHubAutoModTerms > span {
  color: #ffffffad;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 9px;
  font-weight: 650;
  display: flex;
}

.communicationHubAutoModTerms textarea {
  box-sizing: border-box;
  resize: vertical;
  background: var(--surface-subcard);
  color: #fffc;
  border: 1px solid #ffffff13;
  border-radius: 11px;
  outline: 0;
  min-height: 92px;
  padding: 10px 11px;
  font-size: 9px;
  line-height: 1.5;
}

.communicationHubAutoModRules {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 15px 15px;
  display: grid;
}

.communicationHubAutoModRules > label {
  background: #ffffff06;
  border: 1px solid #ffffff0e;
  border-radius: 11px;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 10px;
  display: grid;
}

.communicationHubAutoModRules > label > span {
  gap: 3px;
  display: grid;
}

.communicationHubAutoModRules strong {
  color: #ffffffa8;
  font-size: 8px;
}

.communicationHubAutoModRules input[type="number"] {
  box-sizing: border-box;
  background: var(--surface-card);
  color: #fff;
  text-align: center;
  border: 1px solid #ffffff12;
  border-radius: 8px;
  outline: 0;
  width: 58px;
  min-height: 30px;
  font-size: 8px;
}

.communicationHubAutoModRules input[type="checkbox"] {
  accent-color: #2ca95a;
  justify-self: end;
}

.communicationHubAutoMod > form > footer {
  background: #00000014;
  border-top: 1px solid #ffffff0f;
  justify-content: flex-end;
  padding: 11px 15px;
  display: flex;
}

.communicationHubAutoMod > form > footer button {
  color: #0a0a0b;
  cursor: pointer;
  background: #f2efeb;
  border: 0;
  border-radius: 10px;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.communicationHubAutoMod > form > footer button:disabled {
  cursor: wait;
  opacity: .5;
}

.communicationHubAutoMod > form > footer button svg {
  width: 13px;
}

.communicationHubAutoModEvents > header {
  border-bottom: 1px solid #ffffff0e;
  justify-content: space-between;
  align-items: center;
  min-height: 45px;
  padding: 0 13px;
  display: flex;
}

.communicationHubAutoModEvents > header strong {
  font-size: 9px;
}

.communicationHubAutoModEvents > header span {
  color: #ffffff57;
  font-size: 8px;
}

.communicationHubAutoModEvents > p {
  color: #ffffff4d;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 90px;
  margin: 0;
  font-size: 8px;
  display: flex;
}

.communicationHubAutoModEvents > p svg {
  width: 14px;
}

.communicationHubAutoModEvents > article {
  border-bottom: 1px solid #ffffff0b;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 11px;
  display: grid;
}

.communicationHubAutoModEvents > article:last-child {
  border-bottom: 0;
}

.communicationHubAutoModEvents .communicationAvatar {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
}

.communicationHubAutoModEvents article > div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.communicationHubAutoModEvents article strong {
  font-size: 8px;
}

.communicationHubAutoModEvents article span, .communicationHubAutoModEvents article time {
  color: #ffffff57;
  font-size: 7px;
}

.communicationHubAutoModEvents article p {
  color: #ffffff85;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 1px 0 0;
  font-size: 8px;
  overflow: hidden;
}

.communicationHubIntegrations {
  gap: 12px;
  display: grid;
}

.communicationHubIntegrations > form, .communicationIntegrationToken, .communicationIntegrationList {
  background: #ffffff05;
  border: 1px solid #ffffff12;
  border-radius: 15px;
}

.communicationHubIntegrations > form > header {
  border-bottom: 1px solid #ffffff0f;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.communicationHubIntegrations > form > header > span {
  background: rgb(var(--color-accent-rgb) / .1);
  width: 36px;
  height: 36px;
  color: var(--color-accent);
  border-radius: 11px;
  place-items: center;
  display: grid;
}

.communicationHubIntegrations > form > header svg {
  width: 16px;
}

.communicationHubIntegrations > form > header div {
  gap: 3px;
  display: grid;
}

.communicationHubIntegrations > form > header strong {
  font-size: 11px;
}

.communicationHubIntegrations > form > header small {
  color: #ffffff59;
  font-size: 8px;
}

.communicationHubIntegrations > form > div {
  grid-template-columns: minmax(0, 1.25fr) 110px 130px auto;
  gap: 7px;
  padding: 12px;
  display: grid;
}

.communicationHubIntegrations :is(input, select) {
  color: #fff;
  background: #ffffff09;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  outline: 0;
  min-width: 0;
  min-height: 39px;
  padding: 0 10px;
  font-size: 9px;
}

.communicationHubIntegrations button {
  color: #ffffffb8;
  cursor: pointer;
  background: #ffffff0b;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 11px;
  font-size: 8px;
  font-weight: 650;
  display: inline-flex;
}

.communicationHubIntegrations button:hover {
  color: #fff;
  background: #ffffff14;
}

.communicationHubIntegrations button:disabled {
  opacity: .35;
  cursor: default;
}

.communicationHubIntegrations button svg {
  width: 12px;
}

@media (max-width: 720px) {
  .communicationHubIntegrations > form > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .communicationHubIntegrations > form > div > input, .communicationHubIntegrations > form > div > button {
    grid-column: 1 / -1;
  }
}

.communicationIntegrationToken {
  border-color: rgb(var(--color-accent-rgb) / .32);
  background: rgb(var(--color-accent-rgb) / .06);
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  display: grid;
}

.communicationIntegrationToken > svg {
  width: 17px;
  color: var(--color-accent);
}

.communicationIntegrationToken > div {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.communicationIntegrationToken strong {
  font-size: 8px;
}

.communicationIntegrationToken code {
  color: #ffffffd1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  overflow: hidden;
}

.communicationIntegrationToken small {
  color: #ffffff52;
  font-size: 7px;
}

.communicationIntegrationList {
  display: grid;
  overflow: hidden;
}

.communicationIntegrationList > p {
  color: #ffffff4d;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 150px;
  font-size: 9px;
  display: flex;
}

.communicationIntegrationList article {
  border-bottom: 1px solid #ffffff0e;
  grid-template-columns: 34px minmax(0, 1fr) 34px 34px;
  align-items: center;
  gap: 9px;
  min-height: 57px;
  padding: 8px 10px;
  display: grid;
}

.communicationIntegrationList article:last-child {
  border-bottom: 0;
}

.communicationIntegrationList article > span {
  color: #ffffff85;
  background: #ffffff0b;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.communicationIntegrationList article > span svg {
  width: 14px;
}

.communicationIntegrationList article > div {
  gap: 3px;
  display: grid;
}

.communicationIntegrationList article strong {
  align-items: center;
  gap: 6px;
  font-size: 9px;
  display: flex;
}

.communicationIntegrationList article strong b {
  background: var(--color-accent);
  color: #fff;
  letter-spacing: .04em;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 5px;
}

.communicationIntegrationList article small {
  color: #ffffff52;
  font-size: 7px;
}

.communicationIntegrationList article > button {
  width: 34px;
  min-height: 34px;
  padding: 0;
}

.communicationIntegrationList article > button.isDanger {
  color: #ff8974;
}

.communicationHubExpressions {
  gap: 12px;
  display: grid;
}

.communicationHubExpressions > form, .communicationHubExpressions > section {
  background: #ffffff05;
  border: 1px solid #ffffff12;
  border-radius: 15px;
  overflow: hidden;
}

.communicationHubExpressions > form > header {
  border-bottom: 1px solid #ffffff0f;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.communicationHubExpressions > form > header > span {
  background: rgb(var(--color-accent-rgb) / .1);
  width: 36px;
  height: 36px;
  color: var(--color-accent);
  border-radius: 11px;
  place-items: center;
  display: grid;
}

.communicationHubExpressions > form > header svg {
  width: 16px;
}

.communicationHubExpressions > form > header div {
  gap: 3px;
  display: grid;
}

.communicationHubExpressions > form > header strong {
  font-size: 11px;
}

.communicationHubExpressions > form > header small {
  color: #ffffff59;
  font-size: 8px;
}

.communicationHubExpressions > form > div {
  grid-template-columns: minmax(0, .8fr) 100px minmax(0, 1.4fr) auto;
  gap: 7px;
  padding: 12px;
  display: grid;
}

.communicationHubExpressions :is(input, select) {
  color: #fff;
  background: #ffffff09;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  outline: 0;
  min-width: 0;
  min-height: 39px;
  padding: 0 10px;
  font-size: 9px;
}

.communicationHubExpressions button {
  color: #ffffffb8;
  cursor: pointer;
  background: #ffffff0b;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 11px;
  font-size: 8px;
  font-weight: 650;
  display: inline-flex;
}

.communicationHubExpressions button:disabled {
  opacity: .35;
  cursor: default;
}

.communicationHubExpressions button svg {
  width: 12px;
}

.communicationHubExpressions > section > p {
  color: #ffffff4d;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 150px;
  font-size: 9px;
  display: flex;
}

.communicationHubExpressions > section > article {
  border-bottom: 1px solid #ffffff0e;
  grid-template-columns: 40px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 8px 10px;
  display: grid;
}

.communicationHubExpressions > section > article:last-child {
  border-bottom: 0;
}

.communicationHubExpressions > section > article > img {
  object-fit: contain;
  width: 40px;
  height: 40px;
}

.communicationHubExpressions > section > article > div {
  gap: 3px;
  display: grid;
}

.communicationHubExpressions > section > article strong {
  font-size: 9px;
}

.communicationHubExpressions > section > article small {
  color: #ffffff57;
  font-size: 7px;
}

.communicationHubExpressions > section > article > button {
  color: #ff8974;
  width: 34px;
  min-height: 34px;
  padding: 0;
}

@media (max-width: 720px) {
  .communicationHubExpressions > form > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .communicationHubExpressions > form > div > input:last-of-type, .communicationHubExpressions > form > div > button {
    grid-column: 1 / -1;
  }
}

.communicationHubAudit {
  gap: 7px;
  display: grid;
}

.communicationHubAudit > p {
  color: #ffffff4d;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 260px;
  margin: 0;
  font-size: 9px;
  display: flex;
}

.communicationHubAudit > p svg {
  width: 15px;
}

.communicationHubAudit > article {
  border: 1px solid #fff1;
  border-radius: 12px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  display: grid;
}

.communicationHubAudit .communicationAvatar {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
}

.communicationHubAudit article > div {
  grid-template-columns: max-content minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px;
  min-width: 0;
  display: grid;
}

.communicationHubAudit article strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.communicationHubAudit article span {
  color: #ffffff85;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  overflow: hidden;
}

.communicationHubAudit article small {
  color: #ffffff47;
  font-size: 7px;
}

@media (max-width: 920px) {
  .communicationHubRail {
    flex-direction: row;
    max-width: min(45vw, 260px);
    overflow: auto hidden;
  }

  .communicationRailDivider {
    flex-basis: 1px;
    width: 1px;
    height: 30px;
  }

  .communicationHubRail > a[data-active="true"]:before {
    width: 20px;
    height: 3px;
    top: auto;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
  }

  .communicationDialog:has(.communicationHubSettings) {
    width: calc(100vw - 10px);
  }

  .communicationHubSettings {
    grid-template-columns: 138px minmax(0, 1fr);
  }

  .communicationHubRolesSettings > form > div, .communicationHubRolesSettings article > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .communicationHubMemberManager > article {
    grid-template-columns: 38px minmax(110px, 1fr);
  }

  .communicationHubMemberManager article > div, .communicationHubMemberManager article > footer {
    grid-column: 2;
  }
}

@media (max-width: 560px) {
  .communicationHubDiscovery {
    min-height: min(520px, 72dvh);
  }

  .communicationHubDiscovery > section {
    grid-template-columns: minmax(0, 1fr);
  }

  .communicationHubRail {
    max-width: 31vw;
  }

  .communicationHubSettings {
    display: block;
    overflow-y: auto;
  }

  .communicationHubSettings > nav {
    z-index: 2;
    border-bottom: 1px solid #ffffff12;
    border-right: 0;
    flex-direction: row;
    position: sticky;
    top: 0;
    overflow-x: auto;
  }

  .communicationHubSettings > nav button {
    flex: none;
  }

  .communicationHubSettings > section {
    padding: 12px;
    overflow: visible;
  }

  .communicationHubChannelsSettings > form, .communicationHubChannelsSettings > form:nth-child(2), .communicationHubRolesSettings > form {
    grid-template-columns: minmax(0, 1fr);
  }

  .communicationHubChannelSetting > form {
    grid-template-columns: minmax(0, 1fr) minmax(90px, .5fr);
    padding-left: 10px;
  }

  .communicationHubChannelSetting > form > label:nth-child(2) {
    grid-area: 2 / 1 / auto / -1;
  }

  .communicationHubChannelSetting > form > button {
    width: 100%;
  }

  .communicationHubChannelAccess {
    padding-left: 10px;
  }

  .communicationHubRolesSettings > form > input[type="color"] {
    width: 100%;
  }

  .communicationHubRolesSettings > form > div, .communicationHubRolesSettings article > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .communicationHubMemberManager article > div, .communicationHubMemberManager article > footer, .communicationHubNickname {
    grid-column: 1 / -1;
  }

  .communicationHubInviteList article {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .communicationHubInviteList article > span {
    text-align: left;
    grid-area: 2 / 1;
  }

  .communicationHubInviteList article > button, .communicationHubInviteList article > small {
    grid-area: 1 / 2 / 3;
  }

  .communicationHubDangerZone {
    grid-template-columns: minmax(0, 1fr);
  }

  .communicationHubDangerZone > button {
    justify-self: start;
  }

  .communicationHubAutoMod > form > header {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .communicationHubAutoModSwitch {
    grid-column: 1 / -1;
  }

  .communicationHubAutoModRules {
    grid-template-columns: minmax(0, 1fr);
  }

  .communicationHubAutoModEvents > article {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .communicationHubAutoModEvents article time {
    grid-column: 2;
  }

  .communicationHubAudit article > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

.clanCatalogPage, .clanPage {
  --clan-ink: #080808;
  --clan-panel: #101011;
  --clan-line: #ffffff1c;
  background: var(--clan-ink);
  color: #f5f3ee;
}

.clanCatalogHero {
  background: var(--surface-card);
  border-radius: 0 0 34px 34px;
  min-height: 720px;
  position: relative;
  overflow: hidden;
}

.clanCatalogHero > .siteHeader, .clanProfileHero > .siteHeader {
  z-index: 5;
}

.clanHeroTexture {
  opacity: .9;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.clanHeroTexture:before {
  background: var(--color-accent);
  content: "";
  position: absolute;
  inset: 0 48% 0 0;
}

.clanHeroTexture:after {
  content: "";
  background: #00000047;
  position: absolute;
  inset: 0;
}

.clanHeroTexture i {
  z-index: 1;
  border: 1px solid #ffffff26;
  display: block;
  position: absolute;
  transform: rotate(38deg);
}

.clanHeroTexture i:first-child {
  width: 520px;
  height: 980px;
  top: -210px;
  left: 35%;
}

.clanHeroTexture i:nth-child(2) {
  border-color: rgb(var(--color-accent-rgb) / .32);
  width: 700px;
  height: 1200px;
  top: -410px;
  left: 51%;
}

.clanHeroTexture i:nth-child(3) {
  border-color: #ffffff14;
  width: 780px;
  height: 780px;
  bottom: -480px;
  right: -180px;
}

.clanCatalogHeroCopy {
  z-index: 2;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: min(1120px, 100% - 96px);
  min-height: 610px;
  padding: 150px 0 70px 54px;
  display: flex;
  position: relative;
}

.clanCatalogHeroCopy > span {
  letter-spacing: .16em;
  font-size: 10px;
  font-weight: 780;
}

.clanCatalogHeroCopy h1 {
  letter-spacing: -.068em;
  max-width: 940px;
  margin: 20px 0 22px;
  font-size: clamp(54px, 7.4vw, 112px);
  line-height: .87;
}

.clanCatalogHeroCopy p {
  color: #ffffffb8;
  max-width: 530px;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.clanCatalogHeroCopy > a {
  color: #fff;
  border: 1px solid #ffffff4d;
  border-radius: 15px;
  align-items: center;
  gap: 38px;
  min-height: 50px;
  margin-top: 34px;
  padding: 0 18px;
  font-size: 11px;
  font-weight: 720;
  transition: background .18s, border-color .18s;
  display: flex;
}

.clanCatalogHeroCopy > a:hover {
  background: #ffffff17;
  border-color: #fff;
}

.clanCatalogHeroCopy > a svg {
  width: 16px;
}

.clanHeroPrinciples {
  z-index: 2;
  border-top: 1px solid #ffffff26;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 46px 30px;
  display: grid;
  position: relative;
}

.clanHeroPrinciples > span {
  align-items: center;
  gap: 15px;
  min-height: 78px;
  font-size: 11px;
  display: flex;
}

.clanHeroPrinciples > span + span {
  border-left: 1px solid #ffffff1c;
  padding-left: 24px;
}

.clanHeroPrinciples svg {
  width: 17px;
  color: var(--color-accent);
}

.clanHeroPrinciples b {
  font-weight: 650;
}

.clanDirectory {
  min-height: 700px;
  padding: 82px clamp(18px, 5vw, 76px) 120px;
}

.clanDirectoryToolbar {
  border-bottom: 1px solid var(--clan-line);
  grid-template-columns: minmax(210px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding-bottom: 24px;
  display: grid;
}

.clanDirectoryToolbar > label {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  border-radius: 15px;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 15px;
  display: flex;
}

.clanDirectoryToolbar > label:focus-within {
  border-color: rgb(var(--color-accent-rgb) / .64);
}

.clanDirectoryToolbar > label svg {
  color: #ffffff70;
  width: 16px;
}

.clanDirectoryToolbar input {
  color: #fff;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  font: 600 11px / 1 inherit;
}

.clanDirectoryToolbar input::placeholder {
  color: #ffffff59;
}

.clanDirectoryToolbar > div {
  gap: 4px;
  display: flex;
}

.clanDirectoryToolbar > div button {
  color: #ffffff73;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 12px;
  height: 42px;
  padding: 0 13px;
  font-size: 9px;
  font-weight: 700;
}

.clanDirectoryToolbar > div button:hover, .clanDirectoryToolbar > div button[data-active="true"] {
  background: var(--surface-subcard);
  color: #fff;
}

.clanPrimaryButton {
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 0 17px;
  font-size: 10px;
  font-weight: 750;
  display: flex;
}

.clanPrimaryButton:hover {
  background: var(--color-accent);
}

.clanPrimaryButton svg {
  width: 16px;
}

.clanInvitationStrip {
  border: 1px solid var(--clan-line);
  background: var(--surface-card);
  border-radius: 18px;
  grid-template-columns: 170px repeat(3, minmax(240px, 1fr));
  margin: 22px 0 10px;
  display: grid;
}

.clanInvitationStrip > header {
  border-right: 1px solid var(--clan-line);
  align-items: center;
  gap: 12px;
  padding: 18px;
  display: flex;
}

.clanInvitationStrip > header span {
  color: var(--color-accent);
  font-size: 22px;
  font-weight: 800;
}

.clanInvitationStrip > header strong {
  font-size: 10px;
}

.clanInvitationStrip article {
  grid-template-columns: 40px minmax(0, 1fr) 32px 32px;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  display: grid;
}

.clanInvitationStrip article + article {
  border-left: 1px solid var(--clan-line);
}

.clanMiniEmblem {
  background: var(--clan-color);
  border-radius: 12px;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 9px;
  font-weight: 850;
  display: grid;
}

.clanInvitationStrip p {
  min-width: 0;
  margin: 0;
}

.clanInvitationStrip p strong, .clanInvitationStrip p small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.clanInvitationStrip p strong {
  font-size: 10px;
}

.clanInvitationStrip p small {
  color: #fff6;
  margin-top: 4px;
  font-size: 8px;
}

.clanInvitationStrip article button {
  background: var(--surface-subcard);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.clanInvitationStrip article button:first-of-type {
  color: #62d58b;
}

.clanInvitationStrip article button svg {
  width: 13px;
}

.clanDirectoryGrid {
  border-top: 1px solid var(--clan-line);
  border-left: 1px solid var(--clan-line);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
  display: grid;
}

.clanDirectoryCard {
  border-right: 1px solid var(--clan-line);
  border-bottom: 1px solid var(--clan-line);
  background: var(--surface-card);
  color: #f5f3ee;
  grid-template-rows: auto 1fr auto auto;
  min-height: 390px;
  padding: 24px;
  transition: background .18s;
  display: grid;
  position: relative;
  overflow: hidden;
}

.clanDirectoryCard:hover {
  background: var(--surface-subcard);
}

.clanDirectoryCard:before {
  background: var(--clan-color);
  content: "";
  width: 72px;
  height: 4px;
  position: absolute;
  top: 0;
  right: 0;
}

.clanCardRank {
  color: #ffffff5c;
  letter-spacing: .1em;
  justify-content: space-between;
  align-items: center;
  font-size: 8px;
  display: flex;
}

.clanCardRank span {
  color: var(--clan-color);
  font-size: 12px;
  font-weight: 800;
}

.clanCardRank b {
  font-weight: 650;
}

.clanCardMark {
  width: 80px;
  height: 86px;
  color: var(--clan-color);
  place-items: center;
  display: grid;
  position: absolute;
  top: 66px;
  right: 25px;
}

.clanCardMark svg {
  stroke-width: .7px;
  opacity: .55;
  width: 74px;
  height: 74px;
  position: absolute;
}

.clanCardMark strong {
  z-index: 1;
  letter-spacing: .08em;
  font-size: 13px;
}

.clanCardCopy {
  align-self: end;
  padding: 110px 0 28px;
}

.clanCardCopy small {
  color: var(--clan-color);
  letter-spacing: .12em;
  font-size: 8px;
  font-weight: 800;
}

.clanCardCopy h2 {
  letter-spacing: -.045em;
  margin: 8px 0 7px;
  font-size: 30px;
  line-height: 1;
}

.clanCardCopy p {
  color: #ffffff73;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
  margin: 0;
  font-size: 10px;
  overflow: hidden;
}

.clanDirectoryCard dl {
  border-top: 1px solid var(--clan-line);
  grid-template-columns: 1fr 1fr;
  margin: 0;
  display: grid;
}

.clanDirectoryCard dl > div {
  gap: 6px;
  padding: 17px 0;
  display: grid;
}

.clanDirectoryCard dl > div + div {
  border-left: 1px solid var(--clan-line);
  padding-left: 18px;
}

.clanDirectoryCard dt {
  color: #ffffff4f;
  font-size: 8px;
}

.clanDirectoryCard dd {
  margin: 0;
  font-size: 16px;
  font-weight: 750;
}

.clanDirectoryCard dd span {
  color: #ffffff52;
  font-size: 9px;
}

.clanCardOpen {
  border-top: 1px solid var(--clan-line);
  justify-content: space-between;
  align-items: center;
  padding-top: 17px;
  font-size: 9px;
  font-weight: 750;
  display: flex;
}

.clanCardOpen svg {
  width: 14px;
  color: var(--clan-color);
}

.clanDirectoryEmpty {
  border-right: 1px solid var(--clan-line);
  border-bottom: 1px solid var(--clan-line);
  color: #ffffff61;
  grid-column: 1 / -1;
  align-content: center;
  place-items: center;
  gap: 13px;
  min-height: 340px;
  display: grid;
}

.clanDirectoryEmpty svg {
  width: 28px;
}

.clanDirectoryEmpty p {
  margin: 0;
  font-size: 11px;
}

.clanModalBackdrop {
  z-index: 500;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #000000c2;
  place-items: center;
  padding: 18px;
  display: grid;
  position: fixed;
  inset: 0;
}

.clanCreateModal {
  background: var(--surface-subcard);
  width: min(620px, 100%);
  box-shadow: none;
  border: 1px solid #ffffff2e;
  border-radius: 24px;
  overflow: hidden;
}

.clanCreateModal > header {
  border-bottom: 1px solid var(--clan-line);
  grid-template-columns: 1fr auto;
  padding: 24px 26px;
  display: grid;
}

.clanCreateModal > header span {
  color: var(--color-accent);
  letter-spacing: .14em;
  font-size: 8px;
  font-weight: 800;
}

.clanCreateModal > header button {
  background: var(--surface-subcard);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.clanCreateModal > header button svg {
  width: 14px;
}

.clanCreateModal h2 {
  letter-spacing: -.05em;
  grid-column: 1 / -1;
  margin: 14px 0 0;
  font-size: 34px;
}

.clanCreateFields {
  grid-template-columns: 1fr 150px;
  gap: 14px;
  padding: 26px;
  display: grid;
}

.clanCreateFields label {
  gap: 8px;
  display: grid;
}

.clanCreateFields label:nth-child(3), .clanCreateFields label:nth-child(4) {
  grid-column: 1 / -1;
}

.clanCreateFields label > span {
  color: #ffffff6e;
  font-size: 8px;
  font-weight: 700;
}

.clanCreateFields input {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  color: #fff;
  border-radius: 13px;
  outline: 0;
  width: 100%;
  height: 46px;
  padding: 0 13px;
  font: 600 11px / 1 inherit;
}

.clanCreateFields input:focus {
  border-color: rgb(var(--color-accent-rgb) / .6);
}

.clanCreateFields label > div {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  border-radius: 13px;
  align-items: center;
  display: flex;
}

.clanCreateFields label > div i {
  color: #ffffff4d;
  padding-left: 13px;
  font-size: 10px;
  font-style: normal;
}

.clanCreateFields label > div input {
  background: none;
  border: 0;
}

.clanFormNotice {
  color: var(--color-accent);
  margin: 0 26px;
  font-size: 9px;
}

.clanCreateModal > footer {
  border-top: 1px solid var(--clan-line);
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 26px;
  display: flex;
}

.clanCreateModal > footer button {
  border: 1px solid var(--clan-line);
  color: #fff;
  cursor: pointer;
  background: none;
  border-radius: 12px;
  align-items: center;
  gap: 22px;
  min-height: 42px;
  padding: 0 15px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
}

.clanCreateModal > footer button[type="submit"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.clanCreateModal > footer svg {
  width: 13px;
}

.clanProfileHero {
  --clan-color: var(--color-accent);
  background: var(--surface-card);
  border-radius: 0 0 34px 34px;
  min-height: 620px;
  position: relative;
  overflow: hidden;
}

.clanProfileHero:before {
  background: var(--clan-color);
  opacity: .86;
  content: "";
  width: 42%;
  height: 58%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.clanProfilePattern {
  opacity: .5;
  position: absolute;
  inset: 0;
}

.clanProfilePattern i {
  background: #ffffff29;
  width: 1px;
  height: 150%;
  display: block;
  position: absolute;
  transform: rotate(36deg);
}

.clanProfilePattern i:first-child {
  top: -20%;
  left: 47%;
}

.clanProfilePattern i:nth-child(2) {
  top: -20%;
  left: 59%;
}

.clanProfilePattern i:nth-child(3) {
  top: -20%;
  left: 71%;
}

.clanProfilePattern i:nth-child(4) {
  top: -20%;
  left: 83%;
}

.clanProfileIdentity {
  z-index: 2;
  grid-template-columns: 150px minmax(0, 780px);
  align-items: end;
  gap: 32px;
  min-height: 500px;
  padding: 170px clamp(30px, 6vw, 92px) 55px;
  display: grid;
  position: relative;
}

.clanProfileEmblem {
  width: 140px;
  height: 150px;
  color: var(--clan-color);
  place-items: center;
  display: grid;
  position: relative;
}

.clanProfileEmblem svg {
  stroke-width: .55px;
  width: 135px;
  height: 135px;
  position: absolute;
}

.clanProfileEmblem strong {
  letter-spacing: .08em;
  font-size: 19px;
}

.clanProfileIdentity > div:last-child > span {
  color: var(--clan-color);
  letter-spacing: .14em;
  font-size: 9px;
  font-weight: 800;
}

.clanProfileIdentity h1 {
  letter-spacing: -.07em;
  margin: 14px 0 10px;
  font-size: clamp(58px, 8vw, 118px);
  line-height: .82;
}

.clanProfileIdentity p {
  color: #ffffff8f;
  max-width: 620px;
  margin: 0;
  font-size: 14px;
}

.clanProfileFacts {
  z-index: 2;
  border-top: 1px solid #ffffff40;
  grid-template-columns: repeat(3, 1fr);
  width: min(420px, 36vw);
  display: grid;
  position: absolute;
  bottom: 62px;
  right: 48px;
}

.clanProfileFacts > span {
  grid-template-columns: 24px 1fr;
  align-content: center;
  gap: 3px 10px;
  min-height: 86px;
  display: grid;
}

.clanProfileFacts > span + span {
  border-left: 1px solid #fff3;
  padding-left: 18px;
}

.clanProfileFacts svg {
  grid-row: 1 / 3;
  width: 16px;
}

.clanProfileFacts small {
  letter-spacing: .12em;
  font-size: 7px;
}

.clanProfileFacts b {
  font-size: 15px;
}

.clanHeroProgress {
  z-index: 2;
  align-items: center;
  gap: 18px;
  display: flex;
  position: absolute;
  bottom: 24px;
  left: clamp(30px, 6vw, 92px);
  right: 48px;
}

.clanHeroProgress > i {
  background: #ffffff2e;
  flex: 1;
  height: 3px;
}

.clanHeroProgress > i b {
  background: #fff;
  height: 100%;
  display: block;
}

.clanHeroProgress span {
  font-size: 8px;
  font-weight: 700;
}

.clanWorkspace {
  --clan-color: var(--color-accent);
  background: var(--surface-card);
  padding: 42px clamp(18px, 5vw, 76px) 110px;
  position: relative;
}

.clanWorkspaceTabs {
  z-index: 20;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: #101011e6;
  border: 1px solid #ffffff1f;
  border-radius: 17px;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 30px;
  padding: 5px;
  display: flex;
  position: sticky;
  top: 82px;
}

.clanWorkspaceTabs button {
  color: #ffffff6b;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  font-size: 9px;
  font-weight: 720;
  display: flex;
}

.clanWorkspaceTabs button:hover, .clanWorkspaceTabs button[data-active="true"] {
  background: var(--surface-subcard-hover);
  color: #fff;
}

.clanWorkspaceTabs svg {
  width: 14px;
}

.clanWorkspaceNotice {
  border: 1px solid rgb(var(--color-accent-rgb) / .35);
  max-width: 740px;
  min-height: 42px;
  color: var(--color-accent);
  background: #1e1512;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 18px;
  padding: 0 14px;
  font-size: 9px;
  display: flex;
}

.clanWorkspaceNotice button {
  width: 28px;
  height: 28px;
  color: inherit;
  background: none;
  border: 0;
  place-items: center;
  display: grid;
}

.clanWorkspaceNotice svg {
  width: 12px;
}

.clanOverviewGrid {
  grid-template-columns: 1.2fr .9fr .7fr;
  gap: 10px;
  max-width: 1300px;
  margin: auto;
  display: grid;
}

.clanProgressPanel {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  border-radius: 22px;
  grid-column: span 2;
  grid-template-columns: 210px 1fr;
  min-height: 270px;
  display: grid;
}

.clanProgressPanel > header {
  border-right: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  align-content: center;
  justify-items: center;
  display: grid;
}

.clanProgressPanel > header span {
  letter-spacing: .15em;
  font-size: 8px;
  font-weight: 750;
}

.clanProgressPanel > header strong {
  color: var(--clan-color);
  letter-spacing: -.09em;
  font-size: 100px;
  line-height: .9;
}

.clanProgressPanel > div {
  align-content: center;
  padding: 34px;
  display: grid;
}

.clanProgressPanel p {
  justify-content: space-between;
  margin: 0;
  font-size: 10px;
  display: flex;
}

.clanProgressPanel p span {
  color: #ffffff61;
}

.clanProgressPanel > div > i {
  background: var(--surface-subcard-hover);
  height: 7px;
  margin: 16px 0 11px;
}

.clanProgressPanel > div > i b {
  background: var(--clan-color);
  height: 100%;
  display: block;
}

.clanProgressPanel small {
  color: #ffffff52;
  font-size: 8px;
}

.clanOverviewStats {
  gap: 7px;
  display: grid;
}

.clanOverviewStats article {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  border-radius: 16px;
  grid-template-columns: 1fr auto;
  align-content: center;
  min-height: 84px;
  padding: 14px 17px;
  display: grid;
}

.clanOverviewStats span {
  color: #fff6;
  font-size: 8px;
}

.clanOverviewStats strong {
  letter-spacing: -.04em;
  grid-area: 1 / 2 / 3;
  font-size: 26px;
}

.clanOverviewStats small {
  color: var(--clan-color);
  font-size: 7px;
}

.clanFounder {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  border-radius: 22px;
  grid-template-columns: 58px 1fr;
  align-content: center;
  gap: 5px 14px;
  min-height: 260px;
  padding: 25px;
  display: grid;
}

.clanFounder > span {
  color: var(--clan-color);
  letter-spacing: .12em;
  grid-column: 1 / -1;
  margin-bottom: 16px;
  font-size: 8px;
  font-weight: 800;
}

.clanMemberAvatar {
  background-color: var(--surface-subcard-hover);
  color: #fff;
  background-position: center;
  background-size: cover;
  border-radius: 15px;
  grid-row: span 2;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 15px;
  font-weight: 800;
  display: grid;
}

.clanFounder h3 {
  align-self: end;
  margin: 0;
  font-size: 15px;
}

.clanFounder p {
  color: #ffffff5e;
  align-self: start;
  margin: 0;
  font-size: 9px;
}

.clanFounder a {
  border-top: 1px solid var(--clan-line);
  grid-column: 1 / -1;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
}

.clanFounder a svg {
  width: 13px;
  color: var(--clan-color);
}

.clanRecent {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  border-radius: 22px;
  grid-column: span 2;
  min-height: 260px;
  padding: 24px;
}

.clanRecent > header, .clanBankHistory > header {
  align-items: center;
  gap: 10px;
  display: flex;
}

.clanRecent > header svg, .clanBankHistory > header svg {
  width: 15px;
  color: var(--clan-color);
}

.clanRecent h3, .clanBankHistory h3 {
  margin: 0;
  font-size: 14px;
}

.clanRecent > div {
  margin-top: 18px;
  display: grid;
}

.clanRecent > div p {
  border-top: 1px solid #ffffff12;
  grid-template-columns: 7px 130px 1fr auto;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 11px 0;
  font-size: 9px;
  display: grid;
}

.clanRecent > div p i {
  background: var(--clan-color);
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.clanRecent > div p span {
  color: #ffffff73;
}

.clanRecent > div p b {
  font-weight: 650;
}

.clanRecent time {
  color: #ffffff4d;
  font-size: 8px;
}

.clanMembersPanel, .clanGameProgress {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  border-radius: 24px;
  max-width: 1200px;
  margin: auto;
  overflow: hidden;
}

.clanMembersPanel > header {
  border-bottom: 1px solid var(--clan-line);
  justify-content: space-between;
  align-items: center;
  min-height: 112px;
  padding: 24px 28px;
  display: flex;
}

.clanMembersPanel > header span {
  color: var(--clan-color);
  font-size: 8px;
  font-weight: 800;
}

.clanMembersPanel h2 {
  margin: 7px 0 0;
  font-size: 30px;
}

.clanMembersPanel > header label {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  border-radius: 13px;
  align-items: center;
  gap: 10px;
  width: 250px;
  height: 42px;
  padding: 0 13px;
  display: flex;
}

.clanMembersPanel > header label svg {
  color: #ffffff59;
  width: 14px;
}

.clanMembersPanel > header input {
  color: #fff;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  font: 600 9px / 1 inherit;
}

.clanMemberList article {
  border-bottom: 1px solid #ffffff12;
  grid-template-columns: 48px minmax(150px, 1fr) 140px 120px 120px;
  align-items: center;
  gap: 15px;
  min-height: 82px;
  padding: 12px 28px;
  display: grid;
}

.clanMemberList article:last-child {
  border-bottom: 0;
}

.clanMemberList article > div:nth-child(2) strong {
  align-items: center;
  gap: 7px;
  font-size: 11px;
  display: flex;
}

.clanMemberList article > div:nth-child(2) strong svg {
  color: #f4b351;
  width: 12px;
}

.clanMemberList article > div:nth-child(2) small {
  color: #ffffff57;
  margin-top: 4px;
  font-size: 8px;
  display: block;
}

.clanMemberList article > span {
  font-size: 9px;
  font-weight: 700;
}

.clanMemberList article > p {
  text-align: right;
  margin: 0;
}

.clanMemberList article > p b, .clanMemberList article > p small {
  display: block;
}

.clanMemberList article > p b {
  font-size: 11px;
}

.clanMemberList article > p small {
  color: #ffffff4d;
  margin-top: 3px;
  font-size: 7px;
}

.clanMemberList select {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  color: #fff;
  border-radius: 11px;
  height: 36px;
  padding: 0 10px;
  font-size: 8px;
}

.clanMemberList article > a {
  border: 1px solid var(--clan-line);
  border-radius: 11px;
  justify-self: end;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.clanMemberList article > a svg {
  width: 12px;
}

.clanGameProgress > header {
  border-bottom: 1px solid var(--clan-line);
  align-items: center;
  gap: 18px;
  min-height: 130px;
  padding: 26px 30px;
  display: flex;
}

.clanGameProgress > header > svg {
  width: 34px;
  color: var(--clan-color);
}

.clanGameProgress > header span {
  color: var(--clan-color);
  font-size: 8px;
  font-weight: 750;
}

.clanGameProgress > header h2 {
  margin: 7px 0 0;
  font-size: 30px;
}

.clanGameProgress > section {
  grid-template-columns: 230px 1fr;
  display: grid;
}

.clanGameTitle {
  border-right: 1px solid var(--clan-line);
  align-content: start;
  gap: 8px;
  padding: 28px;
  display: grid;
}

.clanGameTitle strong {
  text-transform: uppercase;
  font-size: 19px;
}

.clanGameTitle span {
  color: #65d28d;
  font-size: 8px;
}

.clanGameProgress > section > div:last-child {
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.clanGameProgress > section article {
  border-bottom: 1px solid #ffffff12;
  border-right: 1px solid #ffffff12;
  align-content: center;
  gap: 8px;
  min-height: 100px;
  padding: 20px;
  display: grid;
}

.clanGameProgress > section article span {
  color: #fff6;
  font-size: 8px;
}

.clanGameProgress > section article strong {
  font-size: 17px;
}

.clanEmpty {
  color: #ffffff5c;
  margin: 22px 0;
  font-size: 9px;
}

.clanBankGrid {
  grid-template-columns: .8fr 1fr 1fr;
  gap: 9px;
  max-width: 1200px;
  margin: auto;
  display: grid;
}

.clanBankBalance, .clanBankForm, .clanBankHistory {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  border-radius: 20px;
}

.clanBankBalance {
  align-content: center;
  min-height: 260px;
  padding: 28px;
  display: grid;
}

.clanBankBalance span {
  color: var(--clan-color);
  letter-spacing: .12em;
  font-size: 8px;
  font-weight: 800;
}

.clanBankBalance strong {
  letter-spacing: -.06em;
  margin: 12px 0 5px;
  font-size: 48px;
}

.clanBankBalance small {
  color: #ffffff59;
  text-transform: uppercase;
  font-size: 8px;
}

.clanBankForm {
  align-content: start;
  gap: 12px;
  padding: 24px;
  display: grid;
}

.clanBankForm > header {
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  display: flex;
}

.clanBankForm > header svg {
  width: 16px;
  color: var(--clan-color);
}

.clanBankForm h3 {
  margin: 0;
  font-size: 16px;
}

.clanBankForm label {
  gap: 6px;
  display: grid;
}

.clanBankForm label span {
  color: #fff6;
  font-size: 8px;
}

.clanBankForm input {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  color: #fff;
  border-radius: 12px;
  outline: 0;
  height: 42px;
  padding: 0 12px;
  font: 600 9px / 1 inherit;
}

.clanBankForm input:focus {
  border-color: rgb(var(--color-accent-rgb) / .55);
}

.clanBankForm button, .clanManageGrid form > button {
  background: var(--clan-color);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  height: 42px;
  margin-top: 3px;
  padding: 0 13px;
  font-size: 9px;
  font-weight: 750;
  display: flex;
}

.clanBankForm button svg, .clanManageGrid form > button svg {
  width: 13px;
}

.clanBankHistory {
  grid-column: 1 / -1;
  padding: 24px;
}

.clanBankHistory > article {
  border-bottom: 1px solid #ffffff12;
  grid-template-columns: 30px 1fr auto 120px;
  align-items: center;
  gap: 13px;
  min-height: 64px;
  display: grid;
}

.clanBankHistory > article > i {
  color: #ff7676;
  background: #291516;
  border-radius: 9px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-style: normal;
  display: grid;
}

.clanBankHistory > article > i[data-positive="true"] {
  color: #63d68c;
  background: #10251a;
}

.clanBankHistory > article div strong, .clanBankHistory > article div small {
  display: block;
}

.clanBankHistory > article div strong {
  font-size: 9px;
}

.clanBankHistory > article div small {
  color: #ffffff59;
  margin-top: 4px;
  font-size: 8px;
}

.clanBankHistory > article > b {
  font-size: 10px;
}

.clanBankHistory time {
  color: #ffffff4d;
  text-align: right;
  font-size: 8px;
}

.clanManageGrid {
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  max-width: 1200px;
  margin: auto;
  display: grid;
}

.clanManageGrid > form, .clanApplications, .clanBans, .clanRoleOverview {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  border-radius: 20px;
  padding: 24px;
}

.clanManageGrid header {
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  display: flex;
}

.clanManageGrid header > svg {
  width: 18px;
  color: var(--clan-color);
}

.clanManageGrid header span {
  color: var(--clan-color);
  font-size: 8px;
  font-weight: 780;
}

.clanManageGrid header h3 {
  margin: 5px 0 0;
  font-size: 17px;
}

.clanManageGrid form label {
  gap: 6px;
  margin-top: 11px;
  display: grid;
}

.clanManageGrid form label > span {
  color: #fff6;
  font-size: 8px;
}

.clanManageGrid input, .clanManageGrid textarea {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  color: #fff;
  resize: vertical;
  border-radius: 12px;
  outline: 0;
  padding: 11px 12px;
  font: 600 9px / 1.5 inherit;
}

.clanApplications article {
  border-top: 1px solid #ffffff12;
  grid-template-columns: 48px 1fr 32px 32px;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  display: grid;
}

.clanApplications article strong, .clanApplications article small {
  display: block;
}

.clanApplications article strong {
  font-size: 10px;
}

.clanApplications article small {
  color: #ffffff59;
  margin-top: 3px;
  font-size: 8px;
}

.clanApplications article p {
  color: #ffffff8c;
  margin: 6px 0 0;
  font-size: 8px;
}

.clanApplications article button {
  background: var(--surface-subcard);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.clanApplications article button:first-of-type {
  color: #63d68c;
}

.clanApplications article button svg {
  width: 12px;
}

.clanBans article {
  border-top: 1px solid #ffffff12;
  grid-template-columns: 48px minmax(0, 1fr) auto 34px;
  align-items: center;
  gap: 10px;
  min-height: 65px;
  display: grid;
}

.clanBans article strong, .clanBans article small {
  display: block;
}

.clanBans article strong {
  font-size: 10px;
}

.clanBans article small, .clanBans article time {
  color: #ffffff59;
  font-size: 8px;
}

.clanBans article button {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  color: #78d99a;
  cursor: pointer;
  border-radius: 10px;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.clanBans article button svg {
  width: 12px;
}

.clanRoleOverview {
  grid-column: 1 / -1;
}

.clanRoleOverview > p {
  color: #fff6;
  font-size: 9px;
}

.clanRoleOverview > article {
  border-top: 1px solid #ffffff12;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  display: grid;
}

.clanRoleOverview > article i {
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.clanRoleOverview > article strong {
  font-size: 9px;
}

.clanRoleOverview > article span {
  color: #ffffff57;
  font-size: 8px;
}

.clanLeaveButton {
  color: #f0a1a1;
  cursor: pointer;
  background: #171314;
  border: 1px solid #ff78783d;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  font-size: 8px;
  font-weight: 750;
  display: flex;
}

.clanLeaveButton:hover {
  background: #211617;
  border-color: #ff787885;
}

.clanLeaveButton svg {
  width: 13px;
}

.clanMemberControls {
  grid-template-columns: minmax(92px, 1fr) 34px 34px;
  gap: 5px;
  display: grid;
}

.clanMemberControls select {
  min-width: 0;
}

.clanMemberControls button {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  color: #ffffff8c;
  cursor: pointer;
  border-radius: 11px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.clanMemberControls button:hover {
  color: #ff8d8d;
  border-color: #ff787873;
}

.clanMemberControls button svg {
  width: 12px;
}

.clanManagementCard {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  border-radius: 20px;
  grid-column: 1 / -1;
  padding: 24px;
}

.clanManagementCard header p {
  color: #ffffff61;
  margin: 5px 0 0;
  font-size: 8px;
}

.clanManagementFields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  display: grid;
}

.clanManagementFields label.isWide {
  grid-column: 1 / -1;
}

.clanManagementFields select {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  color: #fff;
  border-radius: 12px;
  outline: 0;
  height: 41px;
  padding: 0 11px;
  font-size: 9px;
}

.clanManagementFields input[type="color"] {
  cursor: pointer;
  width: 100%;
  height: 41px;
  padding: 5px;
}

.clanManagementCard > button, .clanManagementCard > footer button {
  background: var(--clan-color);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  margin-top: 16px;
  padding: 0 14px;
  font-size: 9px;
  font-weight: 760;
  display: flex;
}

.clanManagementCard button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.clanManagementCard button svg {
  width: 13px;
}

.clanRolePicker {
  gap: 5px;
  padding: 2px 0 12px;
  display: flex;
  overflow: auto;
}

.clanRolePicker button {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  color: #ffffff7a;
  cursor: pointer;
  border-radius: 12px;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  font-size: 8px;
  font-weight: 700;
  display: flex;
}

.clanRolePicker button[data-active="true"], .clanRolePicker button:hover {
  background: var(--surface-subcard);
  color: #fff;
  border-color: #ffffff47;
}

.clanRolePicker button i {
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.clanRolePicker button svg {
  width: 12px;
}

.clanPermissionGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 18px;
  display: grid;
}

.clanPermissionGrid label {
  margin: 0 !important;
}

.clanPermissionGrid input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
}

.clanPermissionGrid span {
  border: 1px solid var(--clan-line);
  cursor: pointer;
  border-radius: 11px;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 11px;
  font-weight: 650;
  display: flex;
  background: var(--surface-subcard) !important;
  color: #ffffff73 !important;
  font-size: 8px !important;
}

.clanPermissionGrid span svg {
  opacity: 0;
  width: 11px;
}

.clanPermissionGrid input:checked + span {
  border-color: rgb(var(--color-accent-rgb) / .46);
  color: #fff !important;
  background: #211713 !important;
}

.clanPermissionGrid input:checked + span svg {
  opacity: 1;
  color: var(--clan-color);
}

.clanPermissionGrid label[data-admin="true"] {
  grid-column: 1 / -1;
}

.clanRoleEditor > footer {
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  display: flex;
}

.clanRoleEditor > footer button {
  margin: 0;
}

.clanRoleEditor > footer .isDanger {
  color: #ff9292;
  background: #211415;
  border: 1px solid #ff686840;
}

.clanHubSync {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  display: grid;
}

.clanHubSync header {
  margin: 0;
}

.clanHubSync > strong {
  color: #f1b06e;
  letter-spacing: .11em;
  font-size: 8px;
}

.clanHubSync > strong[data-ready="true"] {
  color: #6ad694;
}

.clanHubSync > button {
  margin: 0;
}

.clanOwnershipAcknowledge {
  position: relative;
}

.clanOwnershipAcknowledge > input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
}

.clanOwnershipAcknowledge > span {
  border: 1px solid var(--clan-line);
  cursor: pointer;
  border-radius: 12px;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 12px;
  display: flex;
  background: var(--surface-subcard) !important;
  color: #ffffff7a !important;
}

.clanOwnershipAcknowledge svg {
  opacity: 0;
  width: 12px;
}

.clanOwnershipAcknowledge > input:checked + span {
  border-color: #ff70706b;
  color: #fff !important;
}

.clanOwnershipAcknowledge > input:checked + span svg {
  opacity: 1;
  color: #ff8d8d;
}

.clanOwnershipTransfer > button.isDanger {
  color: #fff;
  background: #7b2929;
}

.clanOwnershipTransfer > button.isDanger:hover:not(:disabled) {
  background: #913232;
}

.clanJoinPanel, .clanChatPanel {
  border: 1px solid rgb(var(--color-accent-rgb) / .28);
  background: #17120f;
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  max-width: 1200px;
  min-height: 110px;
  margin: 10px auto 0;
  padding: 22px 26px;
  display: flex;
}

.clanJoinPanel > div > span, .clanChatPanel span {
  color: var(--clan-color);
  font-size: 8px;
  font-weight: 800;
}

.clanJoinPanel h2 {
  margin: 7px 0 0;
  font-size: 23px;
}

.clanJoinPanel > a, .clanJoinPanel > button, .clanJoinPanel form button {
  background: var(--clan-color);
  color: #fff;
  border: 0;
  border-radius: 12px;
  align-items: center;
  gap: 22px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 9px;
  font-weight: 750;
  display: flex;
}

.clanJoinPanel form {
  gap: 8px;
  min-width: min(520px, 50%);
  display: flex;
}

.clanJoinPanel form input {
  border: 1px solid var(--clan-line);
  background: var(--surface-subcard);
  color: #fff;
  border-radius: 12px;
  outline: 0;
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 13px;
  font: 600 9px / 1 inherit;
}

.clanJoinPanel svg {
  width: 13px;
}

.clanChatPanel {
  justify-content: flex-start;
}

.clanChatPanel > svg {
  width: 25px;
  color: var(--clan-color);
}

.clanChatPanel > div {
  gap: 5px;
  display: grid;
}

.clanChatPanel strong {
  font-size: 15px;
}

.clanChatPanel > a {
  background: var(--clan-color);
  border-radius: 13px;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  display: grid;
}

.clanChatPanel > a svg {
  width: 15px;
}

.clanLoading {
  background: var(--surface-card);
  min-height: 100dvh;
}

.clanLoading > section {
  background: var(--surface-subcard);
  height: 620px;
}

.clanLoading > div {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 40px 5vw;
  display: grid;
}

.clanLoading i {
  background: var(--surface-subcard);
  border-radius: 20px;
  height: 260px;
  display: block;
}

@media (max-width: 1050px) {
  .clanDirectoryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clanInvitationStrip {
    grid-template-columns: 150px 1fr;
  }

  .clanInvitationStrip article:nth-of-type(n+3) {
    display: none;
  }

  .clanProfileFacts {
    width: 40vw;
  }

  .clanOverviewGrid {
    grid-template-columns: 1fr 1fr;
  }

  .clanProgressPanel {
    grid-column: 1 / -1;
  }

  .clanOverviewStats, .clanRecent {
    grid-column: span 1;
  }

  .clanBankGrid {
    grid-template-columns: 1fr 1fr;
  }

  .clanBankBalance {
    grid-column: 1 / -1;
    min-height: 170px;
  }

  .clanGameProgress > section > div:last-child {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .clanCatalogHero {
    border-radius: 0 0 25px 25px;
    min-height: 650px;
  }

  .clanHeroTexture:before {
    inset: 0 18% 0 0;
  }

  .clanCatalogHeroCopy {
    width: calc(100% - 28px);
    min-height: 530px;
    padding: 130px 0 42px 14px;
  }

  .clanCatalogHeroCopy h1 {
    font-size: clamp(48px, 15vw, 78px);
  }

  .clanCatalogHeroCopy p {
    max-width: 330px;
    font-size: 12px;
  }

  .clanHeroPrinciples {
    grid-template-columns: 1fr;
    margin: 0 14px 18px;
  }

  .clanHeroPrinciples > span {
    min-height: 42px;
  }

  .clanHeroPrinciples > span + span {
    border-top: 1px solid #ffffff1a;
    border-left: 0;
    padding-left: 0;
  }

  .clanDirectory {
    padding: 45px 12px 80px;
  }

  .clanDirectoryToolbar {
    grid-template-columns: 1fr auto;
  }

  .clanDirectoryToolbar > div {
    grid-column: 1 / -1;
    overflow: auto;
  }

  .clanDirectoryToolbar > div button {
    white-space: nowrap;
  }

  .clanPrimaryButton {
    grid-area: 1 / 2;
  }

  .clanDirectoryGrid {
    grid-template-columns: 1fr;
  }

  .clanDirectoryCard {
    min-height: 350px;
  }

  .clanInvitationStrip {
    grid-template-columns: 1fr;
  }

  .clanInvitationStrip > header {
    border-right: 0;
    border-bottom: 1px solid var(--clan-line);
  }

  .clanInvitationStrip article + article {
    display: none;
  }

  .clanCreateFields {
    grid-template-columns: 1fr;
  }

  .clanCreateFields label:nth-child(n) {
    grid-column: 1;
  }

  .clanCreateFields label > div {
    display: grid;
  }

  .clanCreateFields label > div i {
    padding-top: 10px;
  }

  .clanProfileHero {
    border-radius: 0 0 25px 25px;
    min-height: 620px;
  }

  .clanProfileHero:before {
    width: 30%;
    height: 42%;
  }

  .clanProfileIdentity {
    grid-template-columns: 78px 1fr;
    gap: 14px;
    min-height: 480px;
    padding: 155px 16px 90px;
  }

  .clanProfileEmblem {
    width: 76px;
    height: 86px;
  }

  .clanProfileEmblem svg {
    width: 75px;
    height: 75px;
  }

  .clanProfileEmblem strong {
    font-size: 11px;
  }

  .clanProfileIdentity h1 {
    font-size: clamp(48px, 14vw, 70px);
  }

  .clanProfileIdentity p {
    font-size: 11px;
  }

  .clanProfileFacts {
    width: auto;
    bottom: 51px;
    left: 16px;
    right: 16px;
  }

  .clanProfileFacts > span {
    min-height: 62px;
  }

  .clanProfileFacts svg {
    display: none;
  }

  .clanHeroProgress {
    bottom: 20px;
    left: 16px;
    right: 16px;
  }

  .clanWorkspace {
    padding: 24px 10px 70px;
  }

  .clanWorkspaceTabs {
    max-width: calc(100vw - 20px);
    margin-bottom: 20px;
    top: 72px;
    overflow: auto;
  }

  .clanWorkspaceTabs button {
    white-space: nowrap;
    padding: 0 12px;
  }

  .clanOverviewGrid {
    grid-template-columns: 1fr;
  }

  .clanProgressPanel {
    grid-template-columns: 110px 1fr;
    min-height: 220px;
  }

  .clanProgressPanel > header strong {
    font-size: 60px;
  }

  .clanProgressPanel > div {
    padding: 20px;
  }

  .clanOverviewStats, .clanRecent {
    grid-column: 1;
  }

  .clanMembersPanel > header {
    flex-direction: column;
    align-items: flex-start;
  }

  .clanMembersPanel > header label {
    width: 100%;
  }

  .clanMemberList article {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: 12px 15px;
  }

  .clanMemberList article > span {
    grid-column: 2;
  }

  .clanMemberList article > p {
    grid-area: 1 / 3 / 3;
  }

  .clanMemberList select, .clanMemberList article > a {
    grid-area: 3 / 3;
  }

  .clanGameProgress > section {
    grid-template-columns: 1fr;
  }

  .clanGameTitle {
    border-right: 0;
    border-bottom: 1px solid var(--clan-line);
  }

  .clanGameProgress > section > div:last-child {
    grid-template-columns: 1fr 1fr;
  }

  .clanBankGrid, .clanManageGrid {
    grid-template-columns: 1fr;
  }

  .clanBankBalance, .clanBankHistory, .clanRoleOverview {
    grid-column: 1;
  }

  .clanBankHistory > article {
    grid-template-columns: 30px 1fr auto;
  }

  .clanBankHistory time {
    display: none;
  }

  .clanJoinPanel {
    flex-direction: column;
    align-items: stretch;
  }

  .clanJoinPanel form {
    flex-direction: column;
    min-width: 0;
  }

  .clanChatPanel {
    min-height: 90px;
  }

  .clanLoading > div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .clanCatalogHeroCopy h1 {
    font-size: 46px;
  }

  .clanDirectoryToolbar {
    grid-template-columns: 1fr;
  }

  .clanPrimaryButton {
    grid-area: auto / 1;
  }

  .clanDirectoryToolbar > div {
    grid-row: 2;
  }

  .clanProfileIdentity {
    grid-template-columns: 1fr;
    align-content: end;
  }

  .clanProfileEmblem {
    display: none;
  }

  .clanProfileFacts > span + span {
    padding-left: 10px;
  }

  .clanGameProgress > section > div:last-child {
    grid-template-columns: 1fr;
  }

  .clanBankGrid {
    display: block;
  }

  .clanBankGrid > * + * {
    margin-top: 8px;
  }

  .clanWorkspaceTabs button span {
    display: none;
  }
}

@media (max-width: 720px) {
  .clanMemberControls {
    grid-area: 3 / 2 / auto / 4;
    grid-template-columns: minmax(0, 1fr) 34px 34px;
  }

  .clanMembersPanel > header .clanLeaveButton {
    justify-content: center;
    width: 100%;
  }

  .clanManagementFields, .clanPermissionGrid {
    grid-template-columns: 1fr;
  }

  .clanPermissionGrid label[data-admin="true"] {
    grid-column: 1;
  }

  .clanHubSync {
    grid-template-columns: 1fr auto;
  }

  .clanHubSync header {
    grid-column: 1 / -1;
  }

  .clanRoleEditor > footer {
    flex-direction: column;
    align-items: stretch;
  }

  .clanRoleEditor > footer > span {
    display: none;
  }

  .clanRoleEditor > footer button {
    width: 100%;
  }
}

body:has(.maralysAppHeader) {
  --platform-frame-inset: 0px;
  --platform-frame-radius: 0px;
  --platform-outline: #ffffff14;
  --platform-dock-space: 0px;
  --platform-page-height: 100svh;
  box-sizing: border-box;
  height: 100svh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
}

body:has(.maralysAppHeader) .platformPageFrame {
  width: 100%;
  height: var(--platform-page-height);
  background: var(--surface-card);
  min-height: 0;
  box-shadow: none;
  overscroll-behavior: contain;
  scroll-padding-bottom: var(--platform-dock-space);
  scrollbar-width: thin;
  scrollbar-color: #ffffff29 transparent;
  border-radius: 0;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden auto;
  border: 0 !important;
}

body:has(.maralysAppHeader) .platformPageFrame > .pageShell {
  --page-shell-gutter: 0px;
  width: 100%;
  height: auto;
  min-height: 100%;
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  display: flow-root;
  overflow: visible;
}

body:has(.maralysAppHeader) .platformPageFrame > .pageShell > section:first-of-type {
  border-radius: 0;
}

.serverExperiencePage {
  background: var(--surface-card);
  color: #f7f7f5;
}

.serverExperienceHero {
  isolation: isolate;
  height: var(--platform-page-height, calc(100svh - 8px));
  background: var(--surface-card);
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.serverExperienceHeroImage, .serverExperienceHeroShade {
  z-index: -2;
  position: absolute;
  inset: 0;
}

.serverExperienceHeroImage {
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(1.05);
  width: 100%;
  height: 100%;
}

.serverExperiencePage-extra .serverExperienceHeroImage {
  object-position: center 44%;
  filter: saturate(1.04) contrast(1.02);
}

.serverExperienceHeroShade {
  z-index: -1;
  background: linear-gradient(90deg, #000000ed 0%, #000000a3 39%, #00000024 72%), linear-gradient(0deg, #000000f5 0%, #0000003d 48%, #00000061 100%);
}

.serverExperienceBreadcrumb {
  z-index: 4;
  color: #ffffff73;
  letter-spacing: .055em;
  text-transform: uppercase;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 680;
  display: flex;
  position: absolute;
  top: 34px;
  left: 4.3vw;
}

.serverExperienceBreadcrumb a:hover, .serverExperienceBreadcrumb strong {
  color: #fff;
}

.serverExperienceCopy {
  z-index: 3;
  width: min(720px, 54vw);
  position: absolute;
  top: clamp(90px, 13vh, 132px);
  left: 4.3vw;
}

.serverExperienceCopy .sectionEyebrow {
  color: var(--color-accent);
}

.serverExperienceCopy h1 {
  letter-spacing: -.025em;
  margin: 17px 0 0;
  font-size: clamp(92px, 12vw, 205px);
  font-weight: 520;
  line-height: .72;
}

.serverExperienceCopy h2 {
  letter-spacing: -.025em;
  text-wrap: balance;
  max-width: 670px;
  margin: 34px 0 0;
  font-size: clamp(31px, 3.4vw, 61px);
  font-weight: 430;
  line-height: .94;
}

.serverExperienceCopy > p:not(.sectionEyebrow) {
  color: #ffffffbf;
  max-width: 600px;
  margin: 18px 0 0;
  font-size: 14px;
  font-weight: 540;
  line-height: 1.48;
}

.serverExperienceActions {
  gap: 9px;
  margin-top: 25px;
  display: flex;
}

.serverExperiencePrimary, .serverExperienceSecondary {
  border: 1px solid #ffffff1f;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  min-height: 54px;
  padding: 0 11px 0 20px;
  font-size: 11px;
  font-weight: 720;
  display: inline-flex;
}

.serverExperiencePrimary {
  border-color: rgb(var(--color-accent-rgb) / .62);
  background: var(--color-accent);
  color: #080808;
  min-width: 190px;
}

.serverExperienceSecondary {
  color: #fff;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: #0f0f14ad;
  min-width: 138px;
}

.serverExperiencePrimary svg, .serverExperienceSecondary svg {
  fill: currentColor;
  background: #0000002e;
  border-radius: 50%;
  width: 31px;
  height: 31px;
  padding: 8px;
}

.serverExperienceSecondary svg {
  fill: none;
  background: #ffffff14;
}

.serverExperienceLive {
  z-index: 3;
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  background: #0f0f14a8;
  border: 1px solid #ffffff1c;
  border-radius: 19px;
  width: min(410px, 32vw);
  position: absolute;
  top: clamp(102px, 14vh, 145px);
  right: 3.3vw;
  overflow: hidden;
}

.serverExperienceLive > header {
  border-bottom: 1px solid #ffffff14;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  padding: 0 15px;
  display: flex;
}

.serverExperienceLive > header span {
  letter-spacing: .045em;
  text-transform: uppercase;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 720;
  display: flex;
}

.serverExperienceLive > header span svg {
  color: #65e47a;
  width: 12px;
}

.serverExperienceLive[data-state="planned"] > header span svg {
  color: var(--color-accent);
}

.serverExperienceLive > header > svg {
  color: #ffffff52;
  width: 16px;
}

.serverExperienceLive > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

.serverExperienceLive > div > span {
  grid-template-columns: 22px 1fr;
  align-content: center;
  gap: 4px 7px;
  min-width: 0;
  min-height: 88px;
  padding: 13px;
  display: grid;
  position: relative;
}

.serverExperienceLive > div > span + span {
  border-left: 1px solid #ffffff14;
}

.serverExperienceLive > div svg {
  width: 15px;
  color: var(--color-accent);
  grid-row: 1 / span 2;
}

.serverExperienceLive small {
  color: #ffffff6b;
  text-transform: uppercase;
  font-size: 7px;
}

.serverExperienceLive strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  overflow: hidden;
}

.serverExperienceFeatureRail {
  z-index: 3;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  display: grid;
  position: absolute;
  bottom: 24px;
  left: 4.3vw;
  right: 3.3vw;
}

.serverExperienceFeatureRail article {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: #0f0f1494;
  border: 1px solid #ffffff1a;
  border-radius: 16px;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 72px;
  padding: 13px 17px;
  display: grid;
}

.serverExperienceFeatureRail span {
  color: var(--color-accent);
  font-size: 9px;
}

.serverExperienceFeatureRail strong {
  font-size: 12px;
  font-weight: 690;
}

.serverExperienceStory, .serverExperienceShowcase, .serverExperienceRules, .serverExperienceFaq, .serverExperienceNext {
  padding: clamp(90px, 9vw, 150px) 4.3vw;
}

.serverExperienceStory {
  color: #090909;
  background: #efede8;
}

.serverExperienceStory > header, .serverExperienceShowcase > header, .serverExperienceRules > header, .serverExperienceFaq > header {
  grid-template-columns: minmax(125px, .42fr) minmax(500px, 1.6fr) minmax(260px, .66fr);
  align-items: start;
  gap: 4vw;
  display: grid;
}

.serverExperienceStory h2, .serverExperienceShowcase h2, .serverExperienceRules h2, .serverExperienceFaq h2, .serverExperienceLaunch h2 {
  letter-spacing: -.025em;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(54px, 6.7vw, 116px);
  font-weight: 390;
  line-height: .87;
}

.serverExperienceStory > header > p:last-child, .serverExperienceShowcase > header > p:last-child {
  color: #0000009e;
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.serverExperienceStoryMedia {
  border-radius: 24px;
  height: min(670px, 52vw);
  margin-top: clamp(60px, 7vw, 110px);
  position: relative;
  overflow: hidden;
}

.serverExperienceStoryMedia img {
  object-fit: cover;
}

.serverExperienceStoryMedia:after {
  content: "";
  background: linear-gradient(0deg, #000000c2, #0000 58%);
  position: absolute;
  inset: 0;
}

.serverExperienceStoryMedia > span {
  z-index: 1;
  color: #fff;
  font-size: clamp(36px, 5vw, 88px);
  font-weight: 650;
  line-height: .79;
  position: absolute;
  bottom: 24px;
  left: 25px;
}

.serverExperiencePillars {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
  display: grid;
}

.serverExperiencePillars article {
  background: #fff;
  border-radius: 22px;
  flex-direction: column;
  min-height: 280px;
  padding: 24px;
  display: flex;
}

.serverExperiencePillars article:nth-child(2) {
  background: var(--color-accent);
}

.serverExperiencePillars span {
  color: #00000073;
  text-transform: uppercase;
  font-size: 9px;
}

.serverExperiencePillars strong {
  margin-top: auto;
  font-size: clamp(36px, 4vw, 70px);
  font-weight: 520;
  line-height: .83;
}

.serverExperiencePillars p {
  color: #0000009e;
  max-width: 370px;
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.48;
}

.serverExperienceShowcase {
  background: var(--surface-card);
}

.serverExperienceShowcase > header .sectionEyebrow, .serverExperienceRules > header .sectionEyebrow, .serverExperienceFaq > header .sectionEyebrow {
  color: #ffffff73;
}

.serverExperienceShowcase > header > p:last-child {
  color: #ffffff94;
}

.serverExperienceShowcaseGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px 12px;
  margin-top: clamp(60px, 7vw, 110px);
  display: grid;
}

.serverExperienceShowcaseGrid figure {
  min-width: 0;
  margin: 0;
}

.serverExperienceShowcaseGrid figure.isWide {
  grid-column: 1 / -1;
}

.serverExperienceShowcaseGrid img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px;
  width: 100%;
  display: block;
}

.serverExperienceShowcaseGrid figure:not(.isWide) img {
  aspect-ratio: 4 / 3;
}

.serverExperienceShowcaseGrid figcaption {
  padding: 18px 2px 0;
}

.serverExperienceShowcaseGrid figcaption span {
  color: #fff6;
  text-transform: uppercase;
  font-size: 9px;
}

.serverExperienceShowcaseGrid h3 {
  margin: 11px 0 0;
  font-size: clamp(28px, 3vw, 49px);
  font-weight: 420;
  line-height: .94;
}

.serverExperienceShowcaseGrid figcaption p {
  color: #ffffff91;
  max-width: 560px;
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.serverExperienceRules {
  background: var(--surface-subcard);
}

.serverExperienceRules > div {
  margin: clamp(55px, 6vw, 92px) 0 0 calc(18% + 4vw);
}

.serverExperienceRules article {
  border-top: 1px solid #ffffff1f;
  grid-template-columns: 45px minmax(200px, .8fr) minmax(320px, 1.2fr);
  gap: 3vw;
  padding: 27px 0;
  display: grid;
}

.serverExperienceRules article:last-child {
  border-bottom: 1px solid #ffffff1f;
}

.serverExperienceRules article > span {
  color: var(--color-accent);
  font-size: 10px;
}

.serverExperienceRules h3 {
  margin: 0;
  font-size: clamp(23px, 2.2vw, 38px);
  font-weight: 430;
  line-height: .96;
}

.serverExperienceRules article p {
  color: #ffffff94;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.serverExperienceRules > a {
  background: var(--color-accent);
  color: #090909;
  border-radius: 20px;
  grid-template-columns: 1fr auto 30px;
  align-items: center;
  gap: 22px;
  min-height: 125px;
  margin: 10px 0 0 calc(18% + 4vw);
  padding: 23px;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 440;
  display: grid;
}

.serverExperienceRules > a strong {
  font-size: 14px;
}

.serverExperienceRules > a svg {
  width: 22px;
}

.serverExperienceFaq {
  background: var(--surface-card);
}

.serverExperienceFaq > div {
  margin: clamp(55px, 6vw, 92px) 0 0 calc(18% + 4vw);
}

.serverExperienceFaq details {
  border-top: 1px solid #ffffff1f;
}

.serverExperienceFaq details:last-child {
  border-bottom: 1px solid #ffffff1f;
}

.serverExperienceFaq summary {
  cursor: pointer;
  grid-template-columns: 45px 1fr 24px;
  align-items: center;
  gap: 22px;
  padding: 28px 0;
  list-style: none;
  display: grid;
}

.serverExperienceFaq summary::-webkit-details-marker {
  display: none;
}

.serverExperienceFaq summary span {
  color: var(--color-accent);
  font-size: 10px;
}

.serverExperienceFaq summary strong {
  font-size: clamp(23px, 2.3vw, 40px);
  font-weight: 420;
}

.serverExperienceFaq summary i {
  font-size: 24px;
  font-style: normal;
  transition: transform .18s;
}

.serverExperienceFaq details[open] summary i {
  transform: rotate(45deg);
}

.serverExperienceFaq details p {
  color: #ffffff94;
  max-width: 720px;
  margin: -4px 35px 28px 67px;
  font-size: 14px;
  line-height: 1.55;
}

.serverExperienceLaunch {
  isolation: isolate;
  background: var(--surface-card);
  min-height: 760px;
  position: relative;
  overflow: hidden;
}

.serverExperienceLaunch > img, .serverExperienceLaunch > div:first-of-type {
  z-index: -2;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.serverExperienceLaunch > img {
  object-fit: cover;
}

.serverExperienceLaunch > div:first-of-type {
  z-index: -1;
  background: linear-gradient(90deg, #000000f2, #000000a3 47%, #0000001f), linear-gradient(0deg, #000000db, #0000 60%);
}

.serverExperienceLaunchCopy {
  max-width: 980px;
  position: absolute;
  bottom: 80px;
  left: 4.3vw;
  right: 4.3vw;
}

.serverExperienceLaunchCopy > p:not(.sectionEyebrow) {
  color: #ffffffad;
  max-width: 570px;
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.serverExperienceLaunchCopy > .serverExperiencePrimary {
  margin-top: 30px;
}

.serverExperienceLaunchCopy > .downloadOptions {
  margin-top: 28px;
}

.serverExperienceNext {
  background: var(--color-accent);
  color: #090909;
}

.serverExperienceNext > a {
  grid-template-columns: minmax(140px, .35fr) minmax(300px, 1fr) minmax(260px, .65fr) 32px;
  align-items: end;
  gap: 4vw;
  margin-top: 55px;
  display: grid;
}

.serverExperienceNext > a span, .serverExperienceNext > a small {
  color: #0000009e;
  font-size: 11px;
  line-height: 1.45;
}

.serverExperienceNext > a strong {
  font-size: clamp(68px, 9vw, 150px);
  font-weight: 540;
  line-height: .72;
}

.serverExperienceNext > a svg {
  width: 25px;
}

@media (max-width: 920px) {
  .serverExperienceHero {
    min-height: 820px;
    height: max(820px, var(--platform-page-height, 100svh));
  }

  .serverExperienceHeroShade {
    background: linear-gradient(0deg, #000000fa, #000000ad 52%, #00000024 88%), linear-gradient(#0000008c, #0000 30%);
  }

  .serverExperienceBreadcrumb {
    top: 24px;
    left: 28px;
  }

  .serverExperienceCopy {
    width: auto;
    top: 88px;
    left: 28px;
    right: 28px;
  }

  .serverExperienceCopy h1 {
    font-size: clamp(86px, 19vw, 145px);
  }

  .serverExperienceCopy h2 {
    font-size: clamp(32px, 6vw, 52px);
  }

  .serverExperienceLive {
    width: auto;
    inset: auto 28px 117px;
  }

  .serverExperienceFeatureRail {
    bottom: 20px;
    left: 28px;
    right: 28px;
  }

  .serverExperienceFeatureRail article {
    min-height: 72px;
  }

  .serverExperienceStory, .serverExperienceShowcase, .serverExperienceRules, .serverExperienceFaq, .serverExperienceNext {
    padding: 86px 28px;
  }

  .serverExperienceStory > header, .serverExperienceShowcase > header, .serverExperienceRules > header, .serverExperienceFaq > header {
    grid-template-columns: 1fr;
  }

  .serverExperienceStory > header > p:last-child, .serverExperienceShowcase > header > p:last-child {
    max-width: 680px;
  }

  .serverExperienceStoryMedia {
    height: 72vw;
  }

  .serverExperienceRules > div, .serverExperienceRules > a, .serverExperienceFaq > div {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .serverExperienceHero {
    height: 920px;
    min-height: 920px;
  }

  .serverExperienceBreadcrumb {
    white-space: nowrap;
    max-width: calc(100% - 36px);
    top: 18px;
    left: 18px;
    overflow: hidden;
  }

  .serverExperienceCopy {
    top: 66px;
    left: 18px;
    right: 18px;
  }

  .serverExperienceCopy h1 {
    margin-top: 15px;
    font-size: clamp(78px, 25vw, 112px);
  }

  .serverExperienceCopy h2 {
    margin-top: 25px;
    font-size: clamp(29px, 9vw, 41px);
  }

  .serverExperienceCopy > p:not(.sectionEyebrow) {
    font-size: 12.5px;
    line-height: 1.43;
  }

  .serverExperienceActions {
    gap: 7px;
  }

  .serverExperiencePrimary, .serverExperienceSecondary {
    border-radius: 14px;
    gap: 11px;
    min-width: 0;
    min-height: 50px;
    padding-left: 14px;
  }

  .serverExperiencePrimary svg, .serverExperienceSecondary svg {
    width: 29px;
    height: 29px;
  }

  .serverExperienceLive {
    bottom: 228px;
    left: 18px;
    right: 18px;
  }

  .serverExperienceLive > div > span {
    grid-template-columns: 1fr;
    gap: 3px;
    min-height: 76px;
  }

  .serverExperienceLive > div svg {
    display: none;
  }

  .serverExperienceLive strong {
    font-size: 13px;
  }

  .serverExperienceFeatureRail {
    grid-template-columns: 1fr;
    gap: 5px;
    bottom: 16px;
    left: 18px;
    right: 18px;
  }

  .serverExperienceFeatureRail article {
    border-radius: 14px;
    grid-template-columns: 25px 1fr;
    min-height: 58px;
    padding: 10px 13px;
  }

  .serverExperienceStory, .serverExperienceShowcase, .serverExperienceRules, .serverExperienceFaq, .serverExperienceNext {
    padding: 72px 18px;
  }

  .serverExperienceStory h2, .serverExperienceShowcase h2, .serverExperienceRules h2, .serverExperienceFaq h2, .serverExperienceLaunch h2 {
    font-size: clamp(43px, 13vw, 62px);
  }

  .serverExperienceStoryMedia {
    border-radius: 17px;
    height: 112vw;
    margin-top: 48px;
  }

  .serverExperienceStoryMedia > span {
    font-size: 35px;
    bottom: 17px;
    left: 17px;
  }

  .serverExperiencePillars {
    grid-template-columns: 1fr;
  }

  .serverExperiencePillars article {
    border-radius: 18px;
    min-height: 230px;
    padding: 20px;
  }

  .serverExperienceShowcaseGrid {
    margin-top: 48px;
    display: block;
  }

  .serverExperienceShowcaseGrid figure + figure {
    margin-top: 48px;
  }

  .serverExperienceShowcaseGrid img, .serverExperienceShowcaseGrid figure:not(.isWide) img {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }

  .serverExperienceRules article {
    grid-template-columns: 30px 1fr;
    gap: 14px;
  }

  .serverExperienceRules article p {
    grid-column: 2;
  }

  .serverExperienceRules > a {
    grid-template-columns: 1fr 24px;
    min-height: 105px;
    padding: 18px;
    font-size: 28px;
  }

  .serverExperienceRules > a strong {
    grid-column: 1;
  }

  .serverExperienceRules > a svg {
    grid-area: 1 / 2 / span 2;
  }

  .serverExperienceFaq summary {
    grid-template-columns: 30px 1fr 20px;
    gap: 12px;
  }

  .serverExperienceFaq details p {
    margin: -2px 20px 25px 42px;
    font-size: 13px;
  }

  .serverExperienceLaunch {
    min-height: 720px;
  }

  .serverExperienceLaunchCopy {
    bottom: 48px;
    left: 18px;
    right: 18px;
  }

  .serverExperienceNext > a {
    grid-template-columns: 1fr 25px;
    margin-top: 40px;
  }

  .serverExperienceNext > a span, .serverExperienceNext > a strong, .serverExperienceNext > a small {
    grid-column: 1;
  }

  .serverExperienceNext > a svg {
    grid-area: 1 / 2 / span 3;
  }
}

body:has(.maralysAppHeader) .platformPageFrame > .communicationPage {
  height: 100%;
  min-height: 100%;
}

body:has(.maralysAppHeader) .pageShell > .heroFrame {
  height: var(--platform-page-height);
  min-height: 0;
}

@media (min-width: 921px) {
  body:has(.maralysAppHeader) .pageShell > .heroStatusDeck {
    margin-top: calc(-191px - var(--platform-dock-space));
    margin-bottom: calc(24px + var(--platform-dock-space));
  }

  :is(body:has(.maralysAppHeader) .homePage .heroCopy, body:has(.maralysAppHeader) .homePage .heroRightStack) {
    top: calc(var(--platform-topbar-space) + 14px);
  }

  body:has(.maralysAppHeader) .heroCopy {
    top: clamp(24px, 3.8%, 38px);
  }

  body:has(.maralysAppHeader) .heroRightStack {
    top: 12px;
  }

  body:has(.maralysAppHeader) .heroWord {
    bottom: 3.4%;
  }

  body:has(.maralysAppHeader) .scrollHint {
    bottom: 2.4%;
  }
}

@media (min-width: 921px) and (min-height: 800px) {
  body:has(.maralysAppHeader) .heroCopy {
    top: clamp(40px, 5vh, 54px);
  }

  body:has(.maralysAppHeader) .heroRightStack {
    top: clamp(28px, 3.5vh, 38px);
  }
}

@media (min-width: 921px) and (max-height: 799px) {
  body:has(.maralysAppHeader) .heroCopy {
    top: 16px;
  }

  body:has(.maralysAppHeader) .heroRightStack {
    gap: 4px;
  }

  .heroDescription {
    margin-top: 12px;
    font-size: 12.5px;
    line-height: 1.36;
  }

  .heroPlatformGrid {
    margin-top: 8px;
  }

  .heroPlatformGrid article {
    min-height: 50px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .heroActions {
    margin-top: 6px;
  }

  .heroPlatformCta {
    min-height: 54px;
  }

  body:has(.maralysAppHeader) .homePage > .heroFrame {
    height: max(760px, var(--platform-page-height));
    min-height: 760px;
  }

  body:has(.maralysAppHeader) .homePage > .heroStatusDeck {
    margin: 12px 5.2vw calc(24px + var(--platform-dock-space));
  }
}

@media (min-width: 921px) and (min-height: 900px) {
  body:has(.maralysAppHeader) .heroRightStack {
    gap: 14px;
  }

  .featureBody {
    grid-template-rows: 208px minmax(135px, 1fr);
    min-height: 343px;
  }

  .featureImage {
    min-height: 208px;
  }
}

@media (max-width: 920px) {
  body:has(.maralysAppHeader) .pageShell > .heroFrame {
    height: max(760px, var(--platform-page-height));
    min-height: 760px;
  }
}

@media (max-width: 560px) {
  body:has(.maralysAppHeader) .pageShell > .heroFrame {
    height: max(720px, var(--platform-page-height));
    min-height: 720px;
  }
}

body:has(.platformTopbar) {
  --platform-topbar-space: 80px;
}

.platformTopbar {
  top: calc(var(--desktop-titlebar-height, 0px) + 16px);
  z-index: 410;
  pointer-events: none;
  grid-template-columns: auto minmax(280px, 520px) auto;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  display: grid;
  position: fixed;
  left: 20px;
  right: 20px;
}

.platformTopbar > * {
  pointer-events: auto;
}

.platformTopbarSearch, .platformTopbarBalance, .platformTopbarProfile, .platformTopbarSignIn {
  border: 1px solid var(--surface-light-outline);
  box-shadow: none;
}

.platformTopbarBrand, .platformTopbarIcon {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: none;
  border: 0;
}

.platformTopbarBrand {
  height: 50px;
  color: var(--text-primary);
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 5px 12px 5px 2px;
  display: flex;
}

.platformTopbarBrand img {
  object-fit: contain;
  filter: grayscale() brightness(4);
  width: 36px;
  height: 36px;
}

.platformTopbarBrand > span {
  align-items: baseline;
  gap: 8px;
  margin-left: 0;
  display: flex;
}

.platformTopbarBrand strong {
  letter-spacing: .1em;
  font-size: 15px;
  line-height: 1;
}

.platformTopbarBrand small {
  color: var(--color-accent);
  font: 700 8px/1 var(--font-mono, monospace);
}

.platformTopbarSearch {
  border-radius: 999px;
  justify-self: center;
  width: min(38vw, 520px);
  height: 50px;
  padding: 6px 10px;
}

.platformTopbarSearch .siteSearchControl, .platformTopbarSearch .headerBrandSearch {
  height: 100%;
}

.platformTopbarSearch .siteSearchPopover {
  width: 100%;
  top: calc(100% + 13px);
  left: 0;
}

.platformTopbarSystem {
  justify-self: end;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.platformTopbarIcon {
  width: 48px;
  height: 48px;
  color: color-mix(in srgb, var(--text-primary) 58%, transparent);
  border-radius: 999px;
  place-items: center;
  display: grid;
  position: relative;
}

.platformTopbarBalance:hover, .platformTopbarBalance:focus-visible, .platformTopbarProfile:hover, .platformTopbarProfile:focus-visible {
  background: var(--surface-light);
  color: var(--text-primary);
}

.platformTopbarIcon:hover, .platformTopbarIcon:focus-visible {
  color: var(--text-primary);
  background: none;
}

.platformTopbarIcon svg {
  stroke-width: 1.65px;
  width: 19px;
  height: 19px;
}

.platformTopbarNotifications[data-unread="true"] {
  color: var(--color-accent);
}

.platformTopbarNotifications b {
  border: 2px solid var(--surface-card);
  background: var(--color-accent);
  min-width: 17px;
  height: 17px;
  color: var(--text-primary);
  border-radius: 999px;
  place-items: center;
  padding: 0 4px;
  font-size: 7px;
  display: grid;
  position: absolute;
  top: 5px;
  right: 4px;
}

.platformTopbarBalance {
  min-width: 100px;
  height: 48px;
  color: color-mix(in srgb, var(--text-primary) 72%, transparent);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  display: flex;
}

.platformTopbarBalance > svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  stroke-width: 1.7px;
}

.platformTopbarBalance > span, .platformTopbarProfileName {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.platformTopbarBalance strong {
  font-size: 11px;
  line-height: 1;
}

.platformTopbarBalance small, .platformTopbarProfileName small {
  color: color-mix(in srgb, var(--text-primary) 34%, transparent);
  letter-spacing: .08em;
  font-size: 7px;
  line-height: 1;
}

.platformTopbarProfile {
  max-width: 210px;
  height: 50px;
  color: color-mix(in srgb, var(--text-primary) 78%, transparent);
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  padding: 5px 6px 5px 13px;
  display: flex;
}

.platformTopbarProfileName {
  max-width: 108px;
}

.platformTopbarProfileName strong, .platformTopbarProfileName small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.platformTopbarProfileName strong {
  font-size: 10px;
}

.platformTopbarAvatar {
  border: 1px solid rgb(var(--color-accent-rgb) / .5);
  background: linear-gradient(145deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 40%, var(--surface-card)));
  width: 38px;
  height: 38px;
  color: var(--text-primary);
  background-position: center;
  background-size: cover;
  border-radius: 999px;
  flex: 0 0 38px;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  overflow: hidden;
}

.platformTopbarAvatar svg {
  width: 17px;
  height: 17px;
}

.platformTopbarSignIn {
  height: 48px;
  color: var(--text-primary);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.platformTopbarSignIn svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
}

.communicationFrame {
  inset: calc(var(--desktop-titlebar-height, 0px) + var(--platform-topbar-space)) 0 var(--platform-dock-space);
  border: 0;
  border-radius: 0;
}

@media (max-width: 1120px) {
  .platformTopbar {
    grid-template-columns: auto minmax(220px, 1fr) auto;
    gap: 8px;
    left: 12px;
    right: 12px;
  }

  .platformTopbarSearch {
    width: min(42vw, 440px);
  }

  .platformTopbarProfileName {
    display: none;
  }

  .platformTopbarProfile {
    width: 50px;
    padding: 5px;
  }
}

@media (max-width: 760px) {
  .platformTopbar {
    top: calc(var(--desktop-titlebar-height, 0px) + 8px);
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    left: 8px;
    right: 8px;
  }

  .platformTopbarBrand {
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 5px;
  }

  .platformTopbarBrand > span {
    display: none;
  }

  .platformTopbarBrand img {
    width: 36px;
    height: 36px;
  }

  .platformTopbarSearch {
    width: 100%;
    height: 48px;
    padding: 5px 7px;
  }

  .platformTopbarIcon {
    width: 44px;
    height: 46px;
  }

  .platformTopbarDownload {
    display: none;
  }

  .platformTopbarBalance {
    min-width: 76px;
    height: 46px;
    padding: 0 9px;
  }

  .platformTopbarBalance small {
    display: none;
  }

  .platformTopbarProfile {
    width: 46px;
    height: 48px;
  }

  .platformTopbarAvatar {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  .platformTopbarSignIn {
    height: 46px;
    padding: 0 11px;
  }

  body:has(.maralysAppHeader) {
    --platform-frame-inset: 0px;
    --platform-frame-radius: 0px;
    --platform-dock-space: 0px;
  }

  .communicationFrame {
    top: calc(var(--desktop-titlebar-height, 0px) + var(--platform-topbar-space));
    bottom: var(--platform-dock-space);
  }
}

@media (max-width: 520px) {
  body:has(.maralysAppHeader) {
    --platform-dock-space: 0px;
  }

  .communicationFrame {
    bottom: var(--platform-dock-space);
  }
}

@media (max-width: 430px) {
  .platformTopbar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .platformTopbarBrand {
    width: 44px;
    height: 44px;
  }

  .platformTopbarBrand img {
    width: 33px;
    height: 33px;
  }

  .platformTopbarSearch {
    height: 44px;
  }

  .platformTopbarSystem {
    gap: 4px;
  }

  .platformTopbarIcon {
    width: 40px;
    height: 44px;
  }

  .platformTopbarBalance {
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 44px;
    padding: 0;
  }

  .platformTopbarBalance > span {
    display: none;
  }

  .platformTopbarProfile {
    width: 44px;
    height: 44px;
  }

  .platformTopbarAvatar {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .platformTopbarSignIn span {
    display: none;
  }

  .platformTopbarSignIn {
    justify-content: center;
    width: 42px;
    height: 44px;
    padding: 0;
  }
}

.gameStorefrontPage {
  --game-store-surface: #121213;
  --game-store-surface-raised: #181819;
  --game-store-line: #ffffff24;
  --game-store-muted: #ffffff8f;
  background: var(--surface-card);
  color: #f6f4f0;
}

.gameStorefrontShell {
  width: min(1510px, 100%);
  margin: 0 auto;
  padding: clamp(30px, 4vw, 66px) clamp(18px, 4vw, 64px) clamp(90px, 10vw, 150px);
}

.gameStorefrontBreadcrumb {
  color: #ffffff57;
  letter-spacing: .1em;
  text-transform: uppercase;
  align-items: center;
  gap: 9px;
  font-size: 8px;
  font-weight: 720;
  display: flex;
}

.gameStorefrontBreadcrumb a {
  color: #ffffff80;
}

.gameStorefrontBreadcrumb a:hover {
  color: #fff;
}

.gameStorefrontBreadcrumb strong {
  color: var(--color-accent);
  font-weight: 750;
}

.gameStorefrontHeading {
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  min-height: 190px;
  padding: 42px 0 32px;
  display: flex;
}

.gameStorefrontHeading p, .gameStorefrontSectionHeading p, .gameStorefrontOverview > header > p, .gameStorefrontAchievements > div p {
  color: var(--color-accent);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
  font-size: 8px;
  font-weight: 780;
}

.gameStorefrontHeading h1 {
  letter-spacing: -.075em;
  margin: 13px 0 0;
  font-size: clamp(62px, 7.4vw, 118px);
  font-weight: 430;
  line-height: .82;
}

.gameStorefrontHeadingMeta {
  flex: 0 530px;
  justify-items: end;
  gap: 15px;
  display: grid;
}

.gameStorefrontHeadingMeta > span {
  color: #ffffffa3;
  letter-spacing: .09em;
  text-transform: uppercase;
  align-items: center;
  gap: 9px;
  font-size: 8px;
  font-weight: 760;
  display: inline-flex;
}

.gameStorefrontHeadingMeta > span i {
  background: #a8ff38;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.gameStorefrontHeadingMeta > span[data-status="planned"] i {
  background: var(--color-accent);
}

.gameStorefrontHeadingMeta > div {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  display: flex;
}

.gameStorefrontHeadingMeta b {
  border: 1px solid var(--game-store-line);
  color: #ffffffad;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 8px;
  font-weight: 650;
}

.gameStorefrontTabs {
  z-index: 45;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  scrollbar-width: none;
  background: #121213d6;
  border: 1px solid #ffffff2e;
  border-radius: 18px;
  gap: 3px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 20px;
  padding: 5px;
  display: flex;
  position: sticky;
  top: 12px;
  overflow-x: auto;
}

.gameStorefrontTabs::-webkit-scrollbar {
  display: none;
}

.gameStorefrontTabs a {
  color: #fff9;
  white-space: nowrap;
  border-radius: 13px;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 0 16px;
  font-size: 9px;
  font-weight: 720;
  transition: background-color .18s, color .18s;
  display: flex;
}

.gameStorefrontTabs a:hover, .gameStorefrontTabs a:focus-visible {
  color: #fff;
  background: #ffffff14;
}

.gameStorefrontTabs span {
  min-width: 18px;
  height: 18px;
  color: var(--color-accent);
  background: #ffffff14;
  border-radius: 7px;
  place-items: center;
  font-size: 7px;
  display: grid;
}

.gameStorefrontProduct {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  align-items: start;
  gap: clamp(22px, 3vw, 48px);
  display: grid;
}

.gameStoreGallery {
  min-width: 0;
}

.gameStoreGalleryStage {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--game-store-line);
  background: var(--surface-subcard);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
}

.gameStoreGalleryImage {
  object-fit: cover;
  opacity: 0;
  transition: opacity .32s, transform .8s cubic-bezier(.22, 1, .36, 1);
  transform: scale(1.018);
}

.gameStoreGalleryImage[data-active="true"] {
  opacity: 1;
  transform: scale(1);
}

.gameStoreGalleryShade {
  pointer-events: none;
  background: linear-gradient(#0000 58%, #000000ad);
  position: absolute;
  inset: 0;
}

.gameStoreGalleryCaption {
  color: #ffffffc7;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 8px;
  font-weight: 720;
  display: flex;
  position: absolute;
  bottom: 18px;
  left: 20px;
  right: 20px;
}

.gameStoreGalleryCaption b {
  color: #fff;
  font-weight: 760;
}

.gameStoreGalleryControls {
  gap: 5px;
  display: flex;
  position: absolute;
  top: 18px;
  right: 18px;
}

.gameStoreGalleryControls button {
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #0a0a0ab3;
  border: 1px solid #ffffff47;
  border-radius: 13px;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
}

.gameStoreGalleryControls button:hover, .gameStoreGalleryControls button:focus-visible {
  background: #222222d1;
  border-color: #ffffffa6;
}

.gameStoreGalleryControls svg {
  width: 16px;
  height: 16px;
}

.gameStoreGalleryRail {
  grid-template-columns: repeat(6, minmax(90px, 1fr));
  gap: 6px;
  margin-top: 7px;
  display: grid;
}

.gameStoreGalleryRail button {
  aspect-ratio: 16 / 9;
  background: var(--surface-subcard);
  cursor: pointer;
  opacity: .48;
  border: 1px solid #0000;
  border-radius: 13px;
  padding: 0;
  transition: border-color .18s, opacity .18s;
  position: relative;
  overflow: hidden;
}

.gameStoreGalleryRail button:hover, .gameStoreGalleryRail button:focus-visible, .gameStoreGalleryRail button[data-active="true"] {
  opacity: 1;
  border-color: #ffffff9e;
}

.gameStoreGalleryRail img {
  object-fit: cover;
}

.gameStoreGalleryRail span {
  color: #fff;
  font-size: 7px;
  font-weight: 760;
  position: absolute;
  bottom: 6px;
  right: 7px;
}

.gameStorefrontBuyCard {
  border: 1px solid var(--game-store-line);
  background: var(--game-store-surface);
  border-radius: 26px;
  padding: 26px;
  position: sticky;
  top: 82px;
}

.gameStorefrontMonogram {
  background: var(--color-accent);
  color: #0b0b0b;
  letter-spacing: -.05em;
  border-radius: 20px;
  place-items: center;
  width: 64px;
  height: 64px;
  font-size: 18px;
  font-weight: 850;
  display: grid;
}

.gameStorefrontBuyCard > p {
  letter-spacing: -.045em;
  margin: 26px 0 0;
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 610;
  line-height: 1.02;
}

.gameStorefrontBuyCard > span {
  color: var(--game-store-muted);
  margin-top: 17px;
  font-size: 11px;
  line-height: 1.58;
  display: block;
}

.gameStorefrontPrimaryActions {
  gap: 7px;
  margin-top: 26px;
  display: grid;
}

.gameStorefrontPrimaryActions a {
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: #0b0b0b;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  font-size: 9px;
  font-weight: 800;
  display: flex;
}

.gameStorefrontPrimaryActions a + a {
  border-color: var(--game-store-line);
  background: var(--surface-subcard);
  color: #fff;
  justify-content: flex-start;
}

.gameStorefrontPrimaryActions a + a svg:last-child {
  margin-left: auto;
}

.gameStorefrontPrimaryActions svg {
  width: 15px;
  height: 15px;
}

.gameStorefrontPrimaryActions a:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.gameStorefrontPrimaryActions a + a:hover {
  background: var(--surface-subcard);
  border-color: #ffffff57;
}

.gameStorefrontFacts {
  margin: 25px 0 0;
}

.gameStorefrontFacts > div {
  border-top: 1px solid #ffffff17;
  grid-template-columns: minmax(110px, .78fr) minmax(0, 1.22fr);
  gap: 14px;
  padding: 12px 0;
  font-size: 8px;
  line-height: 1.45;
  display: grid;
}

.gameStorefrontFacts dt {
  color: #ffffff5e;
}

.gameStorefrontFacts dd {
  color: #ffffffd1;
  text-align: right;
  margin: 0;
}

.gameStorefrontOverview, .gameStorefrontServers, .gameStorefrontMods, .gameStorefrontAchievements {
  margin-top: clamp(90px, 10vw, 150px);
  scroll-margin-top: 84px;
}

.gameStorefrontOverview > header {
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr);
  align-items: end;
  gap: 7vw;
  display: grid;
}

.gameStorefrontOverview > header > p {
  grid-column: 1 / -1;
}

.gameStorefrontOverview > header h2, .gameStorefrontSectionHeading h2, .gameStorefrontAchievements h2 {
  letter-spacing: -.06em;
  text-wrap: balance;
  margin: 18px 0 0;
  font-size: clamp(46px, 5.3vw, 82px);
  font-weight: 480;
  line-height: .92;
}

.gameStorefrontOverview > header > span, .gameStorefrontSectionHeading > span {
  max-width: 560px;
  color: var(--game-store-muted);
  font-size: 12px;
  line-height: 1.68;
}

.gameStorefrontFeatureBand {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 55px;
  display: grid;
}

.gameStorefrontFeatureBand article {
  border: 1px solid var(--game-store-line);
  background: var(--game-store-surface);
  border-radius: 20px;
  grid-template-columns: 32px 1fr;
  align-content: center;
  gap: 8px 13px;
  min-height: 150px;
  padding: 22px;
  display: grid;
}

.gameStorefrontFeatureBand svg {
  width: 21px;
  height: 21px;
  color: var(--color-accent);
  stroke-width: 1.6px;
  grid-row: 1 / 3;
}

.gameStorefrontFeatureBand small {
  color: #ffffff5c;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 7px;
  font-weight: 740;
}

.gameStorefrontFeatureBand strong {
  max-width: 310px;
  font-size: 11px;
  font-weight: 640;
  line-height: 1.45;
}

.gameStorefrontPrinciples {
  border-top: 1px solid var(--game-store-line);
  margin-top: 28px;
  display: grid;
}

.gameStorefrontPrinciples article {
  border-bottom: 1px solid var(--game-store-line);
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 25px;
  padding: 28px 0;
  display: grid;
}

.gameStorefrontPrinciples article > span {
  color: var(--color-accent);
  font-size: 9px;
  font-weight: 780;
}

.gameStorefrontPrinciples h3 {
  letter-spacing: -.04em;
  margin: 0;
  font-size: clamp(22px, 2.3vw, 36px);
  font-weight: 580;
}

.gameStorefrontPrinciples p {
  max-width: 720px;
  color: var(--game-store-muted);
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.58;
}

.gameStorefrontSectionHeading {
  border-bottom: 1px solid var(--game-store-line);
  justify-content: space-between;
  align-items: flex-end;
  gap: 50px;
  padding-bottom: 28px;
  display: flex;
}

.gameStorefrontServerGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 28px;
  display: grid;
}

.gameStorefrontServerCard {
  border: 1px solid var(--game-store-line);
  background: var(--game-store-surface);
  border-radius: 28px;
  flex-direction: column;
  min-width: 0;
  min-height: 650px;
  padding: 8px;
  display: flex;
  overflow: hidden;
}

.gameStorefrontServerMedia {
  background: var(--surface-subcard);
  border-radius: 21px;
  min-height: 330px;
  display: block;
  position: relative;
  overflow: hidden;
}

.gameStorefrontServerMedia img {
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.gameStorefrontServerCard:hover .gameStorefrontServerMedia img {
  transform: scale(1.035);
}

.gameStorefrontServerMedia > span {
  color: #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #0a0a0aad;
  border: 1px solid #ffffff3d;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  font-size: 7px;
  font-weight: 760;
  display: flex;
  position: absolute;
  top: 14px;
  left: 14px;
}

.gameStorefrontServerMedia > span i {
  background: #a8ff38;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.gameStorefrontServerCard[data-status="planned"] .gameStorefrontServerMedia > span i {
  background: var(--color-accent);
}

.gameStorefrontServerCopy {
  padding: 26px 20px 20px;
}

.gameStorefrontServerCopy small {
  color: var(--color-accent);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 7px;
  font-weight: 740;
}

.gameStorefrontServerCopy h3 {
  letter-spacing: -.065em;
  margin: 13px 0 0;
  font-size: clamp(42px, 4.5vw, 70px);
  font-weight: 510;
  line-height: .85;
}

.gameStorefrontServerCopy p {
  max-width: 610px;
  color: var(--game-store-muted);
  margin: 22px 0 0;
  font-size: 11px;
  line-height: 1.55;
}

.gameStorefrontServerCopy > div {
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 22px;
  display: flex;
}

.gameStorefrontServerCopy > div span {
  color: #ffffff8c;
  border: 1px solid #ffffff1a;
  border-radius: 999px;
  padding: 7px 9px;
  font-size: 7px;
}

.gameStorefrontServerCard footer {
  grid-template-columns: 1fr .72fr;
  gap: 6px;
  margin-top: auto;
  display: grid;
}

.gameStorefrontServerCard footer a {
  background: var(--surface-subcard);
  color: #fff;
  border: 1px solid #ffffff29;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 16px;
  font-size: 8px;
  font-weight: 760;
  display: flex;
}

.gameStorefrontServerCard footer a:first-child {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #090909;
}

.gameStorefrontServerCard footer a:hover {
  background: var(--surface-subcard-hover);
  border-color: #ffffff73;
}

.gameStorefrontServerCard footer a:first-child:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.gameStorefrontServerCard footer svg {
  width: 14px;
  height: 14px;
}

.gameStorefrontModGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 28px;
  display: grid;
}

.gameStorefrontModCard {
  border: 1px solid var(--game-store-line);
  background: var(--game-store-surface);
  color: #fff;
  border-radius: 24px;
  flex-direction: column;
  min-width: 0;
  min-height: 440px;
  padding: 8px 8px 20px;
  display: flex;
}

.gameStorefrontModMedia {
  aspect-ratio: 16 / 9;
  background: var(--surface-subcard);
  border-radius: 18px;
  display: block;
  position: relative;
  overflow: hidden;
}

.gameStorefrontModMedia img {
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.gameStorefrontModCard:hover .gameStorefrontModMedia img {
  transform: scale(1.04);
}

.gameStorefrontModCard > small {
  color: var(--color-accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
  gap: 8px;
  margin: 19px 12px 0;
  font-size: 7px;
  font-weight: 750;
  display: flex;
}

.gameStorefrontModCard > small svg {
  width: 12px;
  height: 12px;
}

.gameStorefrontModCard h3 {
  letter-spacing: -.05em;
  margin: 12px 12px 0;
  font-size: clamp(25px, 2.4vw, 38px);
  font-weight: 590;
}

.gameStorefrontModCard > p {
  color: var(--game-store-muted);
  margin: 12px 12px 0;
  font-size: 10px;
  line-height: 1.5;
}

.gameStorefrontModCard > div {
  flex-wrap: wrap;
  gap: 5px;
  margin: 18px 12px 0;
  display: flex;
}

.gameStorefrontModCard > div span {
  color: #ffffff80;
  background: #ffffff0f;
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 7px;
}

.gameStorefrontModCard > b {
  border-top: 1px solid #ffffff1a;
  justify-content: space-between;
  align-items: center;
  margin: auto 12px 0;
  padding-top: 20px;
  font-size: 8px;
  display: flex;
}

.gameStorefrontModCard > b svg {
  width: 14px;
  height: 14px;
  color: var(--color-accent);
}

.gameStorefrontAchievements {
  border: 1px solid var(--game-store-line);
  background: var(--surface-subcard);
  border-radius: 30px;
  align-content: center;
  min-height: 380px;
  padding: clamp(32px, 5vw, 74px);
  display: grid;
  position: relative;
  overflow: hidden;
}

.gameStorefrontAchievements:after {
  color: #ffffff0a;
  content: "50";
  pointer-events: none;
  font-size: clamp(180px, 25vw, 380px);
  font-weight: 850;
  line-height: .7;
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
}

.gameStorefrontAchievements > div {
  align-items: center;
  gap: 11px;
  display: flex;
}

.gameStorefrontAchievements > div svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
}

.gameStorefrontAchievements h2 {
  z-index: 1;
  max-width: 850px;
  position: relative;
}

.gameStorefrontAchievements > p {
  z-index: 1;
  max-width: 520px;
  color: var(--game-store-muted);
  margin: 22px 0 0;
  font-size: 12px;
  line-height: 1.55;
  position: relative;
}

.gameStorefrontAchievements > a {
  z-index: 1;
  background: var(--color-accent);
  color: #090909;
  border-radius: 14px;
  align-items: center;
  gap: 28px;
  width: fit-content;
  min-height: 48px;
  margin-top: 30px;
  padding: 0 16px;
  font-size: 8px;
  font-weight: 800;
  display: flex;
  position: relative;
}

.gameStorefrontAchievements > a:hover {
  background: var(--color-accent);
}

.gameStorefrontAchievements > a svg {
  width: 14px;
  height: 14px;
}

.gameStorefrontShell > .minecraftAiSection {
  border: 1px solid var(--game-store-line);
  border-radius: 30px;
  margin-top: clamp(90px, 10vw, 150px);
  overflow: hidden;
}

.gameStorefrontAllGames {
  border: 1px solid var(--game-store-line);
  color: #ffffffad;
  border-radius: 14px;
  align-items: center;
  gap: 12px;
  width: fit-content;
  min-height: 46px;
  margin: 38px 0 0 auto;
  padding: 0 15px;
  font-size: 8px;
  font-weight: 740;
  display: flex;
}

.gameStorefrontAllGames:hover {
  color: #fff;
  border-color: #ffffff61;
}

.gameStorefrontAllGames svg {
  width: 13px;
  height: 13px;
}

.gameStorefrontAllGames svg:last-child {
  color: var(--color-accent);
}

.gameStorefrontPublications {
  scroll-margin-top: 84px;
}

.gameStorefrontPublications .scopedContentSection {
  border-top: 1px solid var(--game-store-line);
  background: var(--surface-card);
}

@media (max-width: 1080px) {
  .gameStorefrontProduct {
    grid-template-columns: minmax(0, 1fr) 330px;
  }

  .gameStoreGalleryRail {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
  }

  .gameStorefrontModGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .gameStorefrontHeading {
    flex-direction: column;
    align-items: flex-start;
    min-height: 160px;
  }

  .gameStorefrontHeadingMeta {
    flex: none;
    justify-items: start;
  }

  .gameStorefrontHeadingMeta > div {
    justify-content: flex-start;
  }

  .gameStorefrontProduct {
    grid-template-columns: 1fr;
  }

  .gameStorefrontBuyCard {
    position: static;
  }

  .gameStorefrontOverview > header {
    grid-template-columns: 1fr;
  }

  .gameStorefrontOverview > header > p {
    grid-column: auto;
  }

  .gameStorefrontFeatureBand {
    grid-template-columns: 1fr;
  }

  .gameStorefrontFeatureBand article {
    min-height: 110px;
  }

  .gameStorefrontSectionHeading {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .gameStorefrontServerGrid {
    grid-template-columns: 1fr;
  }

  .gameStorefrontServerCard {
    min-height: 600px;
  }
}

@media (max-width: 580px) {
  .gameStorefrontShell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .gameStorefrontBreadcrumb {
    padding: 0 5px;
  }

  .gameStorefrontHeading {
    padding: 34px 5px 25px;
  }

  .gameStorefrontHeading h1 {
    font-size: clamp(52px, 20vw, 78px);
  }

  .gameStorefrontHeadingMeta b {
    padding: 7px 9px;
  }

  .gameStorefrontTabs {
    border-radius: 16px;
    justify-content: flex-start;
    width: 100%;
  }

  .gameStorefrontTabs a {
    min-height: 40px;
    padding: 0 13px;
  }

  .gameStoreGalleryStage {
    aspect-ratio: auto;
    border-radius: 21px;
    min-height: 310px;
  }

  .gameStoreGalleryRail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gameStoreGalleryControls {
    top: 12px;
    right: 12px;
  }

  .gameStoreGalleryControls button {
    width: 36px;
    height: 36px;
  }

  .gameStorefrontBuyCard {
    border-radius: 22px;
    padding: 21px;
  }

  .gameStorefrontOverview, .gameStorefrontServers, .gameStorefrontMods, .gameStorefrontAchievements {
    margin-top: 82px;
  }

  .gameStorefrontOverview > header h2, .gameStorefrontSectionHeading h2, .gameStorefrontAchievements h2 {
    font-size: clamp(42px, 13vw, 62px);
  }

  .gameStorefrontPrinciples article {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
  }

  .gameStorefrontServerCard {
    border-radius: 22px;
    min-height: 570px;
  }

  .gameStorefrontServerMedia {
    border-radius: 17px;
    min-height: 270px;
  }

  .gameStorefrontServerCard footer, .gameStorefrontModGrid {
    grid-template-columns: 1fr;
  }

  .gameStorefrontModCard {
    min-height: 420px;
  }

  .gameStorefrontAchievements {
    border-radius: 23px;
    min-height: 420px;
    padding: 30px 22px;
  }

  .gameStorefrontAchievements:after {
    font-size: 190px;
    right: -5%;
  }

  .gameStorefrontShell > .minecraftAiSection {
    border-radius: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gameStoreGalleryImage, .gameStorefrontServerMedia img, .gameStorefrontModMedia img, .gameStorefrontTabs a {
    transition: none;
  }
}

.appContextMenuLayer {
  z-index: 12000;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.appContextMenu {
  color: #f7f7f7;
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  backdrop-filter: blur(24px) saturate(125%);
  pointer-events: auto;
  background: #18181af0;
  border: 1px solid #ffffff24;
  border-radius: 15px;
  width: min(286px, 100vw - 20px);
  max-height: min(620px, 100dvh - 20px);
  padding: 7px;
  animation: .12s ease-out both app-context-menu-in;
  position: fixed;
  overflow: visible auto;
  box-shadow: 0 12px 34px #00000047;
}

.appContextMenuHeader {
  align-items: center;
  gap: 7px;
  padding: 8px 10px 10px;
  display: flex;
}

.appContextMenuHeader > div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.appContextMenuBack {
  color: #ffffffad;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  flex: 0 0 27px;
  place-items: center;
  width: 27px;
  height: 27px;
  padding: 0;
  display: grid;
}

.appContextMenuBack:hover, .appContextMenuBack:focus-visible {
  color: #fff;
  background: #ffffff16;
  outline: none;
}

.appContextMenuBack svg {
  width: 16px;
  height: 16px;
}

.appContextMenuHeader span, .appContextMenuSection > small {
  color: #ffffff78;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.appContextMenuHeader strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.25;
  overflow: hidden;
}

.appContextMenuSection {
  gap: 2px;
  display: grid;
}

.appContextMenuSection > small {
  padding: 7px 10px 5px;
}

.appContextMenuSeparator {
  background: #ffffff17;
  height: 1px;
  margin: 6px 4px;
  display: block;
}

.appContextMenuSection > button, .appContextMenuSection > a, .appContextMenuItemWrap > button {
  color: #ffffffe0;
  width: 100%;
  min-height: 38px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  padding: 6px 9px;
  text-decoration: none;
  display: grid;
}

.appContextMenuSection > button:hover, .appContextMenuSection > button:focus-visible, .appContextMenuSection > a:hover, .appContextMenuSection > a:focus-visible, .appContextMenuItemWrap > button:hover, .appContextMenuItemWrap > button:focus-visible, .appContextMenuItemWrap > button[data-expanded="true"] {
  color: #fff;
  background: #ffffff16;
  outline: none;
}

.appContextMenuSection [data-tone="accent"] {
  color: #ff7a45;
}

.appContextMenuSection [data-tone="danger"] {
  color: #ff7770;
}

.appContextMenuSection [data-tone="danger"]:hover, .appContextMenuSection [data-tone="danger"]:focus-visible {
  color: #fff;
  background: #e63e37d1;
}

.appContextMenuSection [aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
}

.appContextMenuIcon {
  place-items: center;
  width: 20px;
  height: 20px;
  display: grid;
}

.appContextMenuIcon svg, .appContextMenuSection > button > svg, .appContextMenuSection > a > svg, .appContextMenuItemWrap > button > svg {
  stroke-width: 1.9px;
  width: 16px;
  height: 16px;
}

.appContextMenuCopy {
  min-width: 0;
  padding-right: 8px;
  display: grid;
}

.appContextMenuCopy b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  overflow: hidden;
}

.appContextMenuCopy em {
  color: #ffffff73;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  font-size: 10px;
  font-style: normal;
  line-height: 1.25;
  overflow: hidden;
}

.appContextMenu kbd {
  color: #ffffff6b;
  text-align: center;
  background: #ffffff0f;
  border: 1px solid #ffffff14;
  border-radius: 5px;
  min-width: 26px;
  padding: 3px 5px;
  font: 600 9px / 1 system-ui, sans-serif;
}

.appContextMenuItemWrap {
  position: relative;
}

@keyframes app-context-menu-in {
  from {
    opacity: 0;
    transform: translateY(-3px)scale(.985);
  }
}

@media (max-width: 720px) {
  .appContextMenu {
    width: min(320px, 100vw - 16px);
  }

  .appContextMenuSection > button, .appContextMenuSection > a, .appContextMenuItemWrap > button {
    min-height: 44px;
  }
}

.communicationLinkEmbeds {
  gap: 8px;
  width: min(520px, 100%);
  margin-top: 8px;
  display: grid;
}

.communicationLinkEmbed {
  border: 1px solid #ffffff13;
  border-left: 3px solid var(--accent, #ff5a1f);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #202024d1;
  border-radius: 9px;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 210px);
  min-height: 108px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.communicationLinkEmbed[data-pending="true"] {
  min-height: 112px;
  display: block;
}

.communicationLinkEmbedCopy {
  min-width: 0;
  padding: 14px 14px 13px;
}

.communicationLinkEmbedSite {
  color: #ffffff8a;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  display: inline-flex;
}

.communicationLinkEmbedSite svg {
  flex: none;
  width: 12px;
  height: 12px;
}

.communicationLinkEmbedTitle {
  color: #fffffff5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 720;
  line-height: 1.25;
  text-decoration: none;
  display: -webkit-box;
  overflow: hidden;
}

.communicationLinkEmbedTitle:hover, .communicationLinkEmbedSite:hover {
  text-decoration: underline;
}

.communicationLinkEmbedCopy > p {
  color: #ffffffa6;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 7px 0 0;
  font-size: 12px;
  font-weight: 480;
  line-height: 1.42;
  display: -webkit-box;
  overflow: hidden;
}

.communicationLinkEmbedImage {
  background: #ffffff06;
  min-height: 108px;
  overflow: hidden;
}

.communicationLinkEmbedImage img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.communicationLinkEmbedSuppress {
  z-index: 2;
  color: #ffffff94;
  opacity: 0;
  background: #09090cc7;
  border: 1px solid #ffffff14;
  border-radius: 6px;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  transition: opacity .12s, color .12s, background .12s;
  display: grid;
  position: absolute;
  top: 7px;
  right: 7px;
}

.communicationLinkEmbed:hover .communicationLinkEmbedSuppress, .communicationLinkEmbedSuppress:focus-visible {
  opacity: 1;
}

.communicationLinkEmbedSuppress:hover {
  color: #fff;
  background: #323237f5;
}

.communicationLinkEmbedSuppress svg {
  width: 14px;
  height: 14px;
}

.communicationLinkEmbedPending {
  gap: 10px;
  padding: 15px 16px;
  display: grid;
}

.communicationLinkEmbedPending > span {
  color: #ffffff6b;
  font-size: 11px;
  font-weight: 650;
}

.communicationLinkEmbedPending > i {
  background: linear-gradient(90deg, #ffffff0b, #ffffff1a, #ffffff0b) 0 0 / 220% 100%;
  border-radius: 3px;
  width: 78%;
  height: 10px;
  animation: 1.5s linear infinite communication-link-preview-loading;
  display: block;
}

.communicationLinkEmbedPending > i:nth-of-type(2) {
  width: 94%;
}

.communicationLinkEmbedPending > i:nth-of-type(3) {
  width: 58%;
}

@keyframes communication-link-preview-loading {
  to {
    background-position: -220% 0;
  }
}

@media (max-width: 640px) {
  .communicationLinkEmbeds {
    width: 100%;
  }

  .communicationLinkEmbed {
    grid-template-columns: minmax(0, 1fr);
  }

  .communicationLinkEmbedImage {
    grid-row: 1;
    min-height: 150px;
    max-height: 220px;
  }

  .communicationLinkEmbedSuppress {
    opacity: 1;
  }
}

body:has(.desktopAppTitlebar) {
  --desktop-titlebar-height: 38px;
  box-sizing: border-box;
  height: 100svh;
  min-height: 100svh;
  padding-top: var(--desktop-titlebar-height);
  overflow: hidden;
}

body:has(.desktopAppTitlebar):has(.maralysAppHeader) {
  --platform-page-height: calc(100svh - var(--desktop-titlebar-height));
  padding-top: var(--desktop-titlebar-height);
}

body:has(.desktopAppTitlebar) .platformPageFrame {
  height: calc(100svh - var(--desktop-titlebar-height));
  min-height: 0;
  overflow: hidden auto;
}

:is(body:has(.desktopAppTitlebar) .desktopAuthGate, body:has(.desktopAppTitlebar) .desktopLegalGate) {
  height: calc(100svh - var(--desktop-titlebar-height));
  min-height: 0;
  overflow: hidden auto;
}

.pageShell > footer.siteFooter {
  width: calc(100% + var(--page-shell-gutter, 0px) + var(--page-shell-gutter, 0px));
  margin: 0 calc(0px - var(--page-shell-gutter, 0px)) calc(0px - var(--page-shell-gutter, 0px));
  background: var(--surface-body);
  border: 0 !important;
  border-radius: 0 !important;
}

body:has(.maralysAppHeader) {
  --platform-topbar-space: 124px;
}

@media (max-width: 820px) {
  body:has(.maralysAppHeader) {
    --platform-topbar-space: 116px;
  }
}

/* [project]/frontend/main/app/[locale]/platform-page-frame.module.css [app-client] (css) */
.platform-page-frame-module__ZdKlmW__shell {
  z-index: 0;
  isolation: isolate;
  min-height: 100svh;
  position: relative;
}

.platform-page-frame-module__ZdKlmW__background {
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(circle at 72% 20%, #2b5ebd2e, #0000 34%), radial-gradient(circle at 18% 78%, #15326a29, #0000 38%), linear-gradient(135deg, #050914 0%, #080d19 48%, #03050b 100%);
  position: fixed;
  inset: 0;
}

.platform-page-frame-module__ZdKlmW__background:after {
  content: "";
  opacity: .12;
  background-image: linear-gradient(#ffffff05 1px, #0000 1px), linear-gradient(90deg, #ffffff05 1px, #0000 1px);
  background-size: 72px 72px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000, #0000 80%);
  mask-image: linear-gradient(#000, #0000 80%);
}

:is(.platform-page-frame-module__ZdKlmW__shell > .pageShell, .platform-page-frame-module__ZdKlmW__shell > .communicationPage) {
  z-index: 0;
  position: relative;
}

/*# sourceMappingURL=frontend_main_app_1vm8jll._.css.map*/