.community-promo {
  position:fixed;inset:var(--bb-content-top) var(--bb-right-inset) var(--bb-bottom-inset) var(--bb-left-inset);
  width:min(440px,calc(100% - 12px),max(280px,calc(100dvh - var(--bb-content-top) - var(--bb-bottom-inset) - 24px)));
  max-width:calc(100% - 12px);max-height:calc(100dvh - var(--bb-content-top) - var(--bb-bottom-inset) - 24px);
  margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;outline:none;
  border:0;border-radius:0;background:transparent;color:var(--text);box-shadow:none;
}
.community-promo::backdrop{background:#07070cc9;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.community-promo-card{position:relative;width:100%;aspect-ratio:1}
.community-promo-artwork{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
.community-promo-card>button{position:absolute;left:11.64%;width:76.8%;min-height:44px;margin:0;padding:0;border:0;border-radius:12px;background:transparent;box-shadow:none;cursor:pointer}
/* Keep the two touch areas separate even when the image is scaled down. */
.community-promo-join{bottom:16.3%;height:9.8%}
.community-promo-later{top:84.9%;height:9.6%}
.community-promo-card>button:focus-visible{outline:2px solid #dac7ff;outline-offset:2px}
.community-promo-card>button:active{background:#ffffff14}
.community-promo-join[aria-busy="true"]{background:#20103366;cursor:wait}
.community-promo-join[aria-busy="true"]::after{content:"";position:absolute;right:7%;top:calc(50% - 9px);width:18px;height:18px;border:2px solid #fff7;border-top-color:#fff;border-radius:50%;animation:community-promo-wait .8s linear infinite}
.community-promo-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.community-promo-open{overflow:hidden}
@keyframes community-promo-wait{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.community-promo-join[aria-busy="true"]::after{animation:none}}