:root { --community-banner-height: 62px; }

.community-promotion-banner {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10000;
  height: var(--community-banner-height);
  overflow: hidden;
  background: #1a1c1f;
}

body:has(.community-promotion-banner:not([hidden])) .site-shell { padding-top: var(--community-banner-height); }
body:has(.community-promotion-banner:not([hidden])) .site-nav { top: calc(24px + var(--community-banner-height)); }
html:has(.community-promotion-banner:not([hidden])) { scroll-padding-top: var(--community-banner-height); }
.community-promotion-banner[hidden], .community-promotion-overlay[hidden] { display: none; }

.community-promotion-banner-glow {
  position: absolute;
  left: calc(50% - 1138px);
  top: -1122px;
  width: 2398px;
  height: 2997px;
  max-width: none;
  filter: blur(41.87px);
  pointer-events: none;
}

.community-promotion-trigger {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 0 48px;
  border: 0;
  color: #f5f8ff;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.community-promotion-banner-content { display: flex; width: 745px; max-width: 100%; align-items: center; justify-content: space-between; gap: 24px; }
.community-promotion-banner-message { display: flex; min-width: 0; align-items: center; gap: 16px; }
.community-promotion-discord { position: relative; display: block; width: 52px; height: 52px; flex: 0 0 52px; }
.community-promotion-discord-icon { position: absolute; left: 2px; top: 10px; width: 38px; height: 38px; overflow: hidden; border-radius: 8px; background: white; }
.community-promotion-discord-icon > img { position: absolute; left: -2.5px; top: -3.5px; width: 44px; height: 44px; max-width: none; }
.community-promotion-sparkle { position: absolute; left: 38px; top: 1.08px; max-width: none; }
.community-promotion-banner-copy { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.community-promotion-banner-copy strong { overflow: hidden; font-size: 17px; font-weight: 700; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.community-promotion-banner-copy > span { overflow: hidden; color: #ffffff80; font-size: 14px; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
.community-promotion-banner-copy strong,
.community-promotion-details h2,
.community-promotion-details h3 { color: transparent; background: linear-gradient(90deg, #fff, #a889df); background-clip: text; }
.community-promotion-button-face { position: relative; display: grid; width: 104px; height: 32px; flex: 0 0 104px; place-items: center; padding: 0 12px; border-radius: 34px; color: #0e0e0e; }
.community-promotion-button-face > img { position: absolute; inset: 0; width: 104px; height: 32px; border-radius: inherit; }
.community-promotion-button-face > span { position: relative; max-width: 100%; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
.community-promotion-trigger:hover .community-promotion-button-face { filter: brightness(1.12); }
.community-promotion-dismiss { position: absolute; right: 16px; top: 8px; display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #ffffff73; cursor: pointer; }
.community-promotion-dismiss:hover { background: #ffffffa0; }
.community-promotion-trigger:focus-visible,
.community-promotion-dismiss:focus-visible,
.community-promotion-dialog-close:focus-visible { outline: 2px solid #a889df; outline-offset: -3px; }

.community-promotion-overlay { position: fixed; inset: 0; z-index: 10010; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px; overflow-y: auto; background: #0009; backdrop-filter: blur(5px); }
.community-promotion-dialog {
  position: relative;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  width: 785px;
  min-width: 0;
  max-width: 100%;
  min-height: 571px;
  max-height: calc(100dvh - 48px);
  overflow: auto;
  border-radius: 24px;
  color: #f5f8ff;
  background: #1a1c1f;
  box-shadow: inset 0 0 0 1px #ffffff1f;
}
.community-promotion-visual { position: relative; display: grid; min-height: 571px; padding: 60px 0; place-items: center; overflow: hidden; background: white; }
.community-promotion-dialog-background { position: absolute; left: -79.51px; top: -50.42px; width: 559.014px; height: 993.991px; max-width: none; transform: scaleX(-1); }
.community-promotion-dialog-glow { position: absolute; left: -123px; top: -14px; width: 643px; height: 804px; max-width: none; filter: blur(41.87px); }
.community-promotion-brand { position: absolute; left: 33px; top: 23px; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; line-height: 24px; }
.community-promotion-brand > img { flex: none; max-width: none; }
.community-promotion-qr-group { position: relative; display: flex; width: 269px; max-width: calc(100% - 48px); flex-direction: column; align-items: center; gap: 18px; transform: translateY(1.5px); }
.community-promotion-qr { display: block; width: 140px; height: 140px; flex: none; object-fit: contain; border-radius: 15px; background: white; }
.community-promotion-qr-group > p { margin: 0; color: #ffffff99; font-size: 16px; font-weight: 500; line-height: 22px; text-align: center; overflow-wrap: anywhere; }
.community-promotion-details { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 36px; padding: 72px 32px 72px 40px; }
.community-promotion-details h2 { margin: 0 0 12px; font-size: 30px; font-weight: 700; line-height: 39px; white-space: pre-line; overflow-wrap: anywhere; }
.community-promotion-details header > p { margin: 0; color: #ffffff80; font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }
.community-promotion-benefits { display: flex; margin: 0; padding: 0; flex-direction: column; gap: 38px; list-style: none; }
.community-promotion-benefits li { display: flex; align-items: flex-start; gap: 12px; }
.community-promotion-benefits li > img { flex: none; max-width: none; }
.community-promotion-benefits li > div { min-width: 0; }
.community-promotion-details h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; line-height: 16px; overflow-wrap: anywhere; }
.community-promotion-benefits p { margin: 0; color: #ffffff80; font-size: 13px; line-height: 13px; overflow-wrap: anywhere; }
.community-promotion-dialog-close { position: absolute; right: 20px; top: 20px; display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: #272a33; box-shadow: inset 0 0 0 .8px #ffffff26; cursor: pointer; }
.community-promotion-dialog-close:hover { background: #353947; }

@keyframes community-promotion-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes community-promotion-out { to { opacity: 0; transform: translateY(6px) scale(.985); } }
.community-promotion-dialog { animation: community-promotion-in 180ms cubic-bezier(.22, 1, .36, 1) both; }
.community-promotion-overlay.is-closing { pointer-events: none; }
.community-promotion-overlay.is-closing .community-promotion-dialog { animation: community-promotion-out 150ms ease both; }
@media (prefers-reduced-motion: reduce) { .community-promotion-dialog { animation-duration: .01ms !important; } }

@media (max-width: 720px) {
  :root { --community-banner-height: 88px; }
  .community-promotion-trigger { padding: 10px 36px 10px 12px; }
  .community-promotion-banner-content { gap: 12px; }
  .community-promotion-banner-message { gap: 8px; }
  .community-promotion-discord { width: 40px; flex-basis: 40px; }
  .community-promotion-discord-icon { left: .5px; }
  .community-promotion-sparkle { left: 32px; }
  .community-promotion-banner-copy { gap: 4px; }
  .community-promotion-banner-copy strong,
  .community-promotion-banner-copy > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
  .community-promotion-banner-copy strong { font-size: 13px; line-height: 16px; }
  .community-promotion-banner-copy > span { font-size: 11px; line-height: 14px; }
  .community-promotion-dismiss { top: 6px; right: 6px; width: 20px; height: 20px; }
  .community-promotion-overlay { padding: 16px; }
  .community-promotion-dialog { grid-template-columns: minmax(0, 1fr); min-height: 0; max-height: calc(100dvh - 32px); border-radius: 20px; }
  .community-promotion-visual { min-height: 320px; }
  .community-promotion-brand { left: 24px; top: 20px; }
  .community-promotion-details { padding: 28px 24px 32px; gap: 28px; }
  .community-promotion-details h2 { font-size: 26px; line-height: 34px; }
  .community-promotion-benefits { gap: 24px; }
}

@media (max-width: 680px) {
  body:has(.community-promotion-banner:not([hidden])) .site-nav { top: calc(12px + var(--community-banner-height)); }
}