:root {
	--bmm-gd-green: #356246;
	--bmm-gd-green-dark: #173d2b;
	--bmm-gd-green-soft: #e9f1eb;
	--bmm-gd-gold: #d5a72e;
	--bmm-gd-ink: #17211a;
	--bmm-gd-muted: #5f6d63;
	--bmm-gd-border: #dce4de;
	--bmm-gd-surface: #ffffff;
	--bmm-gd-page: #ffffff;
}

body.bmm-guest-destination-page {
	background: var(--bmm-gd-page);
}

/* The Family Tree plugin locks its app to the viewport. Guests see this
   scrollable landing page instead, so restore normal document scrolling. */
body.non-logged-in.bmm-guest-destination--family-tree {
	overflow-x: hidden;
	overflow-y: auto !important;
}

.bmm-guest-destination-page .site-content,
.bmm-guest-destination-page #content {
	padding-top: 0;
}

.bmm-gd,
.bmm-gd * {
	box-sizing: border-box;
}

.bmm-gd {
	color: var(--bmm-gd-ink);
	font-family: "Nunito Sans", "Open Sans", Arial, sans-serif;
	background: var(--bmm-gd-page);
	padding: clamp(24px, 4vw, 56px) 0 64px;
}

body.non-logged-in.bmm-guest-destination--family-tree .bmm-gd {
	padding-bottom: 80px;
}

.bmm-gd__shell {
	width: min(1200px, calc(100% - 32px));
	margin: 0 auto;
}

.bmm-gd-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
	min-height: 520px;
	overflow: hidden;
	border: 1px solid var(--bmm-gd-border);
	border-radius: 28px;
	background: linear-gradient(135deg, #ffffff 0%, #f3f7f3 52%, #e5eee7 100%);
	box-shadow: 0 24px 60px rgba(23, 61, 43, 0.12);
}

.bmm-guest-destination--family-tree .bmm-gd-hero {
	background:
		radial-gradient(circle at 83% 18%, rgba(213, 167, 46, 0.16), transparent 24rem),
		linear-gradient(135deg, #ffffff 0%, #f7f5ed 52%, #edf2e9 100%);
}

.bmm-guest-destination--myplace .bmm-gd-hero {
	background:
		radial-gradient(circle at 86% 20%, rgba(20, 184, 166, 0.14), transparent 24rem),
		linear-gradient(135deg, #ffffff 0%, #eff8f6 52%, #e5f0e8 100%);
}

.bmm-guest-destination--our-members .bmm-gd-hero,
.bmm-guest-destination--useronline .bmm-gd-hero {
	background:
		radial-gradient(circle at 84% 20%, rgba(69, 201, 113, 0.15), transparent 24rem),
		linear-gradient(135deg, #ffffff 0%, #f1f8f3 52%, #e4efe7 100%);
}

.bmm-guest-destination--creators .bmm-gd-hero {
	background:
		radial-gradient(circle at 84% 20%, rgba(124, 82, 214, 0.14), transparent 24rem),
		linear-gradient(135deg, #ffffff 0%, #f5f1fb 52%, #e9efeb 100%);
}

.bmm-guest-destination--games .bmm-gd-hero {
	background:
		radial-gradient(circle at 84% 20%, rgba(61, 120, 219, 0.15), transparent 24rem),
		linear-gradient(135deg, #ffffff 0%, #eff5fb 52%, #e6efe8 100%);
}

.bmm-gd-hero::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: linear-gradient(90deg, var(--bmm-gd-green-dark), #4f8a63 62%, var(--bmm-gd-gold));
	content: "";
}

.bmm-gd-hero__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(38px, 5vw, 72px);
}

.bmm-gd__eyebrow {
	margin: 0 0 13px;
	color: var(--bmm-gd-green);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.bmm-gd-hero h1 {
	max-width: 680px;
	margin: 0;
	color: var(--bmm-gd-ink);
	font-size: clamp(42px, 5vw, 66px);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 0.98;
}

.bmm-gd-hero__lead {
	max-width: 620px;
	margin: 24px 0 0;
	color: var(--bmm-gd-muted);
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.6;
}

.bmm-gd-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.bmm-gd-button {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none !important;
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.bmm-gd-button:hover,
.bmm-gd-button:focus-visible {
	transform: translateY(-2px);
}

.bmm-gd-button:focus-visible,
.bmm-gd-text-link:focus-visible,
.bmm-gd-explore-card:focus-visible {
	outline: 3px solid rgba(53, 98, 70, 0.35);
	outline-offset: 3px;
}

.bmm-gd-button--primary {
	background: linear-gradient(180deg, #477a59, var(--bmm-gd-green-dark));
	box-shadow: 0 9px 22px rgba(23, 61, 43, 0.24);
	color: #ffffff !important;
}

.bmm-gd-button--secondary {
	border-color: #9fb1a4;
	background: rgba(255, 255, 255, 0.82);
	color: var(--bmm-gd-green-dark) !important;
}

.bmm-gd-button--text {
	padding-right: 10px;
	padding-left: 10px;
	background: transparent;
	color: var(--bmm-gd-green-dark) !important;
}

.bmm-gd-button--text span {
	font-size: 20px;
}

.bmm-gd-hero__note {
	margin: 18px 0 0;
	color: #66746a;
	font-size: 13px;
	line-height: 1.45;
}

.bmm-gd-hero__note span {
	color: var(--bmm-gd-green);
	font-weight: 900;
}

.bmm-gd-hero__visual {
	position: relative;
	display: grid;
	min-width: 0;
	min-height: 520px;
	overflow: hidden;
	place-items: center;
	padding: 34px 22px 18px 0;
	container-type: inline-size;
}

.bmm-gd-hero__glow {
	position: absolute;
	width: 88%;
	aspect-ratio: 1;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(72, 122, 90, 0.22), rgba(72, 122, 90, 0.02) 58%, transparent 72%);
}

.bmm-gd-hero__image {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 470px;
	object-fit: contain;
	object-position: center;
	filter: drop-shadow(0 22px 24px rgba(20, 48, 32, 0.13));
}

.bmm-gd-hero__image--dark {
	display: none;
}

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

.bmm-gd-benefit {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	min-height: 168px;
	padding: 26px;
	border: 1px solid var(--bmm-gd-border);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 10px 26px rgba(25, 55, 36, 0.06);
}

.bmm-gd-benefit__icon {
	display: grid;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	place-items: center;
	border-radius: 14px;
	background: var(--bmm-gd-green-soft);
	color: var(--bmm-gd-green);
}

.bmm-gd-benefit__icon svg {
	width: 25px;
	height: 25px;
}

.bmm-gd-benefit h2 {
	margin: 1px 0 8px;
	color: var(--bmm-gd-ink);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
}

.bmm-gd-benefit p {
	margin: 0;
	color: var(--bmm-gd-muted);
	font-size: 15px;
	line-height: 1.55;
}

.bmm-gd-contribute {
	position: relative;
	display: grid;
	grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(34px, 6vw, 84px);
	align-items: center;
	margin-top: clamp(62px, 8vw, 96px);
}

.bmm-gd-contribute::before {
	position: absolute;
	top: clamp(-48px, -5vw, -34px);
	left: 18%;
	width: 64%;
	height: 12px;
	background:
		radial-gradient(circle, var(--bmm-gd-green) 0 2px, transparent 2.5px) left center / 12px 12px no-repeat,
		radial-gradient(circle, var(--bmm-gd-gold) 0 2px, transparent 2.5px) right center / 12px 12px no-repeat,
		repeating-linear-gradient(90deg, transparent 0 7px, rgba(53, 98, 70, 0.28) 7px 11px, transparent 11px 17px) center / calc(100% - 24px) 1px no-repeat;
	content: "";
	pointer-events: none;
}

.bmm-gd-contribute__art {
	position: relative;
	min-height: 390px;
	overflow: hidden;
	border: 1px solid var(--bmm-gd-border);
	border-radius: 28px;
	background: linear-gradient(150deg, #e6efe8, #ffffff);
	box-shadow: 0 22px 46px rgba(23, 61, 43, 0.12);
	container-type: inline-size;
}

.bmm-gd-contribute__art::after {
	position: absolute;
	inset: auto 20px 20px auto;
	width: 110px;
	height: 110px;
	border: 1px solid rgba(53, 98, 70, 0.2);
	border-radius: 50%;
	box-shadow: 0 0 0 18px rgba(53, 98, 70, 0.06), 0 0 0 38px rgba(53, 98, 70, 0.035);
	content: "";
	pointer-events: none;
}

.bmm-gd-contribute__art > img {
	position: absolute;
	inset: 12px;
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	object-fit: contain;
	filter: drop-shadow(0 20px 20px rgba(23, 61, 43, 0.11));
}

.bmm-gd-contribute__copy {
	max-width: 620px;
}

.bmm-gd-contribute h2,
.bmm-gd-section-heading h2,
.bmm-gd-final-cta h2 {
	margin: 0;
	color: var(--bmm-gd-ink);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 750;
	letter-spacing: -0.035em;
	line-height: 1.08;
}

.bmm-gd-contribute__copy > p:not(.bmm-gd__eyebrow),
.bmm-gd-section-heading > p:not(.bmm-gd__eyebrow) {
	margin: 20px 0 0;
	color: var(--bmm-gd-muted);
	font-size: 17px;
	line-height: 1.7;
}

.bmm-gd-text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	color: var(--bmm-gd-green-dark) !important;
	font-size: 16px;
	font-weight: 850;
	text-decoration: none !important;
}

.bmm-gd-text-link span {
	font-size: 22px;
	transition: transform 150ms ease;
}

.bmm-gd-text-link:hover span {
	transform: translateX(4px);
}

.bmm-gd-preview,
.bmm-gd-explore {
	margin-top: clamp(70px, 9vw, 112px);
}

.bmm-gd-section-heading {
	max-width: 760px;
	margin: 0 auto 30px;
	text-align: center;
}

.bmm-gd-section-heading--compact {
	max-width: 680px;
}

.bmm-gd-preview__content {
	padding: 22px;
	border: 1px solid var(--bmm-gd-border);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.82);
	box-shadow: 0 18px 44px rgba(23, 61, 43, 0.08);
}

.bmm-gd-preview__content .kol-aft-wizard,
.bmm-gd-preview__content .bmm-game-library,
.bmm-gd-preview__content .bmm-game-library-wrap {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.bmm-gd-preview__content .bmm-gh-library {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.bmm-gd-preview__content .bmm-gh-game-card {
	width: auto;
	max-width: none;
}

.bmm-gd-explore__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(26px, 2.25vw, 36px);
}

.bmm-gd-explore-card {
	position: relative;
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr) 26px;
	min-height: 150px;
	overflow: hidden;
	align-items: center;
	border: 1px solid var(--bmm-gd-border);
	border-radius: 18px;
	background: var(--bmm-gd-surface);
	color: var(--bmm-gd-ink) !important;
	text-decoration: none !important;
	box-shadow: 0 10px 28px rgba(23, 61, 43, 0.07);
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.bmm-gd-explore-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px rgba(23, 61, 43, 0.13);
}

.bmm-gd-explore-card__image {
	display: block;
	height: 100%;
	min-height: 150px;
	background: linear-gradient(145deg, #eef4ef, #ffffff);
}

.bmm-gd-explore-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.bmm-gd-explore-card__copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 7px;
	padding: 20px 14px 20px 18px;
}

.bmm-gd-explore-card__copy strong {
	color: var(--bmm-gd-green);
	font-size: 11px;
	font-weight: 850;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.bmm-gd-explore-card__copy > span {
	font-size: 17px;
	font-weight: 780;
	line-height: 1.25;
}

.bmm-gd-explore-card__arrow {
	color: var(--bmm-gd-green);
	font-size: 22px;
}

.bmm-gd-final-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 34px;
	align-items: center;
	margin-top: clamp(70px, 9vw, 112px);
	padding: clamp(34px, 5vw, 58px);
	border-radius: 24px;
	background:
		radial-gradient(circle at 85% 20%, rgba(213, 167, 46, 0.22), transparent 17rem),
		linear-gradient(135deg, #123421, #28573b 62%, #356246);
	box-shadow: 0 24px 52px rgba(15, 48, 30, 0.22);
}

.bmm-gd-final-cta .bmm-gd__eyebrow,
.bmm-gd-final-cta h2 {
	color: #ffffff !important;
}

.bmm-gd-final-cta h2 {
	max-width: 700px;
	font-size: clamp(29px, 3.6vw, 44px);
}

.bmm-gd-final-cta .bmm-gd-actions {
	justify-content: flex-end;
	margin-top: 0;
}

.bmm-gd-button--light {
	background: #ffffff;
	color: var(--bmm-gd-green-dark) !important;
}

.bmm-gd-button--outline-light {
	border-color: rgba(255, 255, 255, 0.52);
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff !important;
}

html.dark-mode body.bmm-guest-destination-page,
html[data-bx-mode="dark"] body.bmm-guest-destination-page,
body.bmm-guest-destination-page:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) {
	--bmm-gd-ink: #eef4ef;
	--bmm-gd-muted: #b4c1b7;
	--bmm-gd-border: #334139;
	--bmm-gd-surface: #18221b;
	--bmm-gd-page: #101612;
	--bmm-gd-green-soft: #213329;
	background: var(--bmm-gd-page);
}

html.dark-mode body.bmm-guest-destination-page .bmm-gd,
html[data-bx-mode="dark"] body.bmm-guest-destination-page .bmm-gd,
body.bmm-guest-destination-page:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-gd {
	background: radial-gradient(circle at 8% 6%, rgba(81, 132, 96, 0.13), transparent 27rem), #101612;
}

html.dark-mode .bmm-gd-hero,
html[data-bx-mode="dark"] .bmm-gd-hero,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-gd-hero {
	background: linear-gradient(135deg, #18221b, #121a15 64%, #1d2b21);
}

html.dark-mode .bmm-gd-benefit,
html.dark-mode .bmm-gd-preview__content,
html[data-bx-mode="dark"] .bmm-gd-benefit,
html[data-bx-mode="dark"] .bmm-gd-preview__content,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) :is(.bmm-gd-benefit, .bmm-gd-preview__content) {
	background: rgba(24, 34, 27, 0.94);
}

html.dark-mode .bmm-gd-contribute__art,
html[data-bx-mode="dark"] .bmm-gd-contribute__art,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-gd-contribute__art {
	background: linear-gradient(150deg, #1d2d23, #121a15);
}

html.dark-mode .bmm-gd-hero__image--light,
html[data-bx-mode="dark"] .bmm-gd-hero__image--light,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-gd-hero__image--light {
	display: none;
}

html.dark-mode .bmm-gd-hero__image--dark,
html[data-bx-mode="dark"] .bmm-gd-hero__image--dark,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-gd-hero__image--dark {
	display: block;
}

html.dark-mode .bmm-gd-button--secondary,
html[data-bx-mode="dark"] .bmm-gd-button--secondary,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-gd-button--secondary {
	border-color: #526459;
	background: #1c2920;
	color: #eaf3ec !important;
}

html.dark-mode .bmm-gd-button--text,
html[data-bx-mode="dark"] .bmm-gd-button--text,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-gd-button--text {
	color: #a9d2b4 !important;
}

html.dark-mode .bmm-gd-text-link,
html[data-bx-mode="dark"] .bmm-gd-text-link,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-gd-text-link {
	color: #a9d2b4 !important;
}

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

	.bmm-gd-hero__copy {
		padding-bottom: 22px;
	}

	.bmm-gd-hero__visual {
		min-height: 360px;
		padding: 0 20px 20px;
	}

	.bmm-gd-hero__image {
		height: 360px;
	}

	.bmm-gd-benefits,
	.bmm-gd-explore__grid {
		grid-template-columns: 1fr;
	}

	.bmm-gd-benefit {
		min-height: 0;
	}

	.bmm-gd-contribute {
		grid-template-columns: 1fr;
	}

	.bmm-gd-contribute__art {
		min-height: 420px;
	}

	.bmm-gd-final-cta {
		grid-template-columns: 1fr;
	}

	.bmm-gd-final-cta .bmm-gd-actions {
		justify-content: flex-start;
	}
}

@media (max-width: 600px) {
	.bmm-gd {
		padding: 16px 0 42px;
	}

	.bmm-gd__shell {
		width: min(100% - 20px, 1200px);
	}

	.bmm-gd-hero {
		min-height: 0;
		border-radius: 20px;
	}

	.bmm-gd-hero__copy {
		padding: 34px 22px 12px;
	}

	.bmm-gd-hero h1 {
		font-size: clamp(36px, 12vw, 50px);
	}

	.bmm-gd-hero__lead {
		font-size: 16px;
	}

	.bmm-gd-actions {
		flex-direction: column;
	}

	.bmm-gd-button {
		width: 100%;
	}

	.bmm-gd-hero__visual {
		min-height: 280px;
	}

	.bmm-gd-hero__image {
		height: 280px;
	}

	.bmm-gd-benefits {
		gap: 12px;
		margin-top: 12px;
	}

	.bmm-gd-benefit {
		padding: 20px;
	}

	.bmm-gd-contribute__art {
		min-height: 300px;
		border-radius: 20px;
	}

	.bmm-gd-preview__content {
		padding: 10px;
		border-radius: 18px;
	}

	.bmm-gd-preview__content .bmm-gh-library {
		grid-template-columns: 1fr !important;
	}

	.bmm-gd-explore-card {
		grid-template-columns: 100px minmax(0, 1fr) 22px;
		min-height: 125px;
	}

	.bmm-gd-explore-card__image {
		min-height: 125px;
	}

	.bmm-gd-final-cta {
		padding: 30px 22px;
		border-radius: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bmm-gd-button,
	.bmm-gd-text-link span,
	.bmm-gd-explore-card {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Live public-member constellation
 * ---------------------------------------------------------------------- */

.bmm-member-constellation {
	--bmm-constellation-accent: #3f8b5b;
	--bmm-constellation-accent-bright: #87eaa5;
	--bmm-constellation-aurora: rgba(67, 161, 98, 0.2);
	--bmm-constellation-card: rgba(255, 255, 255, 0.94);
	--bmm-constellation-ink: #13251a;
	--bmm-constellation-muted: #68766c;
	--bmm-constellation-border: rgba(54, 103, 70, 0.18);
	position: relative;
	isolation: isolate;
	width: min(100%, 760px);
	margin: auto;
	color: var(--bmm-constellation-ink);
}

.bmm-member-constellation[data-bmm-constellation-context*="family-tree"] {
	--bmm-constellation-accent: #94701a;
	--bmm-constellation-accent-bright: #f3c85c;
	--bmm-constellation-aurora: rgba(213, 167, 46, 0.24);
}

.bmm-member-constellation[data-bmm-constellation-context*="myplace"] {
	--bmm-constellation-accent: #087f78;
	--bmm-constellation-accent-bright: #62e2d5;
	--bmm-constellation-aurora: rgba(20, 184, 166, 0.22);
}

.bmm-member-constellation[data-bmm-constellation-context*="creators"] {
	--bmm-constellation-accent: #6f4ad8;
	--bmm-constellation-accent-bright: #b79cff;
	--bmm-constellation-aurora: rgba(124, 82, 214, 0.22);
}

.bmm-member-constellation[data-bmm-constellation-context*="games"] {
	--bmm-constellation-accent: #3f6fcf;
	--bmm-constellation-accent-bright: #82d8ff;
	--bmm-constellation-aurora: rgba(61, 120, 219, 0.22);
}

.bmm-member-constellation[data-bmm-constellation-context*="useronline"] {
	--bmm-constellation-accent: #277c4d;
	--bmm-constellation-accent-bright: #77f39e;
	--bmm-constellation-aurora: rgba(69, 201, 113, 0.24);
}

.bmm-member-constellation__ambient {
	position: absolute;
	z-index: -1;
	inset: 8% 4%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 45%, var(--bmm-constellation-aurora), transparent 48%),
		repeating-radial-gradient(circle at 50% 50%, transparent 0 48px, rgba(58, 117, 76, 0.055) 49px 50px);
	filter: blur(1px);
	pointer-events: none;
}

.bmm-member-constellation__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 720 / 610;
}

.bmm-member-constellation__connectors {
	position: absolute;
	z-index: 0;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.bmm-member-constellation__connectors g {
	fill: none;
	stroke: var(--bmm-constellation-accent);
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-dasharray: 3 6;
	opacity: 0.58;
}

.bmm-member-constellation__connectors marker path {
	fill: var(--bmm-constellation-accent);
	stroke: none;
}

.bmm-member-constellation__cards {
	position: absolute;
	inset: 0;
}

.bmm-member-card {
	position: absolute;
	z-index: 2;
	width: 23%;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--bmm-constellation-border);
	border-radius: clamp(9px, 1.4vw, 15px);
	background: var(--bmm-constellation-card);
	box-shadow: 0 10px 26px rgba(14, 37, 22, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(16px) saturate(1.08);
	-webkit-backdrop-filter: blur(16px) saturate(1.08);
	transform: translateZ(0);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.bmm-member-card:hover,
.bmm-member-card:focus-within {
	z-index: 6;
	border-color: color-mix(in srgb, var(--bmm-constellation-accent) 58%, transparent);
	box-shadow: 0 16px 34px rgba(14, 37, 22, 0.2), 0 0 0 3px var(--bmm-constellation-aurora);
	transform: translateY(-4px);
}

.bmm-member-card--spot-0 {
	z-index: 4;
	top: 29%;
	left: 34.5%;
	width: 31%;
	box-shadow: 0 18px 42px rgba(14, 37, 22, 0.2), 0 0 34px var(--bmm-constellation-aurora);
}

.bmm-member-card--spot-1 { top: 0; left: 36.5%; width: 27%; }
.bmm-member-card--spot-2 { top: 8%; left: 2%; }
.bmm-member-card--spot-3 { top: 8%; right: 2%; }
.bmm-member-card--spot-4 { top: 37%; left: 0; }
.bmm-member-card--spot-5 { top: 37%; right: 0; }
.bmm-member-card--spot-6 { bottom: 0; left: 4%; }
.bmm-member-card--spot-7 { bottom: 0; left: 38.5%; }
.bmm-member-card--spot-8 { right: 4%; bottom: 0; }

.bmm-member-card__cover {
	position: relative;
	height: clamp(42px, 6.4vw, 80px);
	overflow: hidden;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--bmm-constellation-accent) 78%, #10261a), color-mix(in srgb, var(--bmm-constellation-accent-bright) 42%, #f4fff7));
}

.bmm-member-card.has-cover .bmm-member-card__cover {
	background-image:
		linear-gradient(180deg, rgba(7, 24, 13, 0.03), rgba(7, 24, 13, 0.2)),
		var(--bmm-member-cover);
	background-position: center;
	background-size: cover;
}

.bmm-member-card__cover::after {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.28) 48%, transparent 67%);
	content: "";
	opacity: 0.6;
	transform: translateX(-100%);
	transition: transform 600ms ease;
}

.bmm-member-card:hover .bmm-member-card__cover::after {
	transform: translateX(100%);
}

.bmm-member-card__avatar-link {
	position: absolute;
	z-index: 2;
	top: clamp(17px, 3vw, 38px);
	left: 50%;
	display: block;
	width: clamp(48px, 8.4vw, 92px);
	height: clamp(48px, 8.4vw, 92px);
	overflow: visible;
	border: clamp(2px, 0.35vw, 4px) solid rgba(255, 255, 255, 0.96);
	border-radius: 50%;
	background: #e8eee9;
	box-shadow: 0 7px 18px rgba(13, 35, 21, 0.22);
	transform: translateX(-50%);
}

.bmm-member-card--spot-0 .bmm-member-card__avatar-link {
	width: clamp(72px, 12.8vw, 138px);
	height: clamp(72px, 12.8vw, 138px);
}

.bmm-member-card__avatar {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.bmm-member-card__status {
	position: absolute;
	right: -2%;
	bottom: 5%;
	width: clamp(10px, 1.7vw, 18px);
	height: clamp(10px, 1.7vw, 18px);
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: #93a39a;
	box-shadow: 0 0 0 1px rgba(20, 60, 34, 0.1);
}

.bmm-member-card__status.is-online {
	background: #3b9a5e;
	box-shadow: 0 0 0 1px rgba(28, 116, 58, 0.18), 0 0 13px rgba(66, 214, 112, 0.58);
}

.bmm-member-card__body {
	display: grid;
	min-height: clamp(54px, 7.4vw, 88px);
	align-content: end;
	gap: clamp(4px, 0.65vw, 7px);
	padding: clamp(28px, 4.7vw, 56px) clamp(7px, 1.15vw, 13px) clamp(7px, 1.15vw, 13px);
}

.bmm-member-card--spot-0 .bmm-member-card__body {
	min-height: clamp(82px, 11vw, 132px);
	padding-top: clamp(49px, 7.7vw, 89px);
}

.bmm-member-card__name {
	display: block;
	overflow: hidden;
	color: var(--bmm-constellation-ink) !important;
	font-size: clamp(8px, 1.1vw, 13px);
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
	text-decoration: none !important;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bmm-member-card--spot-0 .bmm-member-card__name {
	font-size: clamp(11px, 1.5vw, 17px);
}

.bmm-member-card__friends {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: center;
	padding-right: 2px;
}

.bmm-member-card__friends > a {
	display: block;
	width: clamp(11px, 1.65vw, 18px);
	height: clamp(11px, 1.65vw, 18px);
	margin-left: -2px;
	overflow: hidden;
	border: 1px solid var(--bmm-constellation-card);
	border-radius: 50%;
	background: #dfe8e1;
}

.bmm-member-card__friends > a:first-of-type {
	margin-left: 3px;
}

.bmm-member-card__friends img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bmm-member-card__friends-icon {
	display: grid;
	width: clamp(15px, 2vw, 22px);
	height: clamp(15px, 2vw, 22px);
	flex: 0 0 auto;
	place-items: center;
	border-radius: 50%;
	background: var(--bmm-constellation-accent);
	color: #ffffff;
}

.bmm-member-card__friends-icon svg {
	width: 65%;
	height: 65%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bmm-member-card__profile-line {
	display: block;
	width: 42%;
	height: 5px;
	margin: 3px auto 1px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--bmm-constellation-border), var(--bmm-constellation-aurora));
}

.bmm-gd-hero__visual > .bmm-member-constellation {
	z-index: 2;
	width: min(92%, 650px);
}

.bmm-gd-contribute__art > .bmm-member-constellation {
	position: absolute;
	z-index: 1;
	inset: 24px 28px;
	width: auto;
}

/* Destination constellations live inside components that can be much smaller
 * than the browser. Size their cards from the component, never the viewport. */
:is(.bmm-gd-hero__visual, .bmm-gd-contribute__art) .bmm-member-card {
	border-radius: clamp(9px, 2.1cqw, 15px);
}

:is(.bmm-gd-hero__visual, .bmm-gd-contribute__art) .bmm-member-card__cover {
	height: clamp(30px, 8cqw, 58px);
}

:is(.bmm-gd-hero__visual, .bmm-gd-contribute__art) .bmm-member-card__avatar-link {
	top: clamp(13px, 3.7cqw, 26px);
	width: clamp(36px, 10.8cqw, 70px);
	height: clamp(36px, 10.8cqw, 70px);
	border-width: clamp(2px, 0.58cqw, 4px);
}

:is(.bmm-gd-hero__visual, .bmm-gd-contribute__art) .bmm-member-card--spot-0 .bmm-member-card__avatar-link {
	width: clamp(54px, 17cqw, 110px);
	height: clamp(54px, 17cqw, 110px);
}

:is(.bmm-gd-hero__visual, .bmm-gd-contribute__art) .bmm-member-card__status {
	width: clamp(8px, 2.3cqw, 15px);
	height: clamp(8px, 2.3cqw, 15px);
}

:is(.bmm-gd-hero__visual, .bmm-gd-contribute__art) .bmm-member-card__body {
	min-height: clamp(38px, 9.4cqw, 60px);
	gap: clamp(3px, 0.9cqw, 6px);
	padding: clamp(20px, 6.7cqw, 42px) clamp(6px, 1.8cqw, 12px) clamp(6px, 1.5cqw, 10px);
}

:is(.bmm-gd-hero__visual, .bmm-gd-contribute__art) .bmm-member-card--spot-0 .bmm-member-card__body {
	min-height: clamp(58px, 13.5cqw, 86px);
	padding-top: clamp(34px, 10.7cqw, 70px);
}

:is(.bmm-gd-hero__visual, .bmm-gd-contribute__art) .bmm-member-card__name {
	font-size: clamp(8px, 1.8cqw, 13px);
}

:is(.bmm-gd-hero__visual, .bmm-gd-contribute__art) .bmm-member-card--spot-0 .bmm-member-card__name {
	font-size: clamp(10px, 2.35cqw, 16px);
}

:is(.bmm-gd-hero__visual, .bmm-gd-contribute__art) .bmm-member-card__friends > a {
	width: clamp(10px, 2.3cqw, 15px);
	height: clamp(10px, 2.3cqw, 15px);
}

:is(.bmm-gd-hero__visual, .bmm-gd-contribute__art) .bmm-member-card__friends-icon {
	width: clamp(14px, 2.9cqw, 19px);
	height: clamp(14px, 2.9cqw, 19px);
}

/* Row gaps for the full nine-card hero. */
.bmm-gd-hero__visual .bmm-member-card--spot-0 { top: 33%; }
.bmm-gd-hero__visual .bmm-member-card--spot-4,
.bmm-gd-hero__visual .bmm-member-card--spot-5 { top: 41%; }
.bmm-gd-hero__visual .bmm-member-card--spot-6,
.bmm-gd-hero__visual .bmm-member-card--spot-7,
.bmm-gd-hero__visual .bmm-member-card--spot-8 { bottom: -5%; }

/* Seven cards need a symmetric compact map: one top, four side nodes, a
 * centerpiece, and one bottom card. This keeps every card in its own lane. */
.bmm-gd-contribute__art .bmm-member-constellation--compact .bmm-member-card {
	width: 21.5%;
}
.bmm-gd-contribute__art .bmm-member-constellation--compact .bmm-member-card--spot-0 {
	top: 35%;
	left: 35%;
	width: 30%;
}
.bmm-gd-contribute__art .bmm-member-constellation--compact .bmm-member-card--spot-1 { top: -2%; left: 38%; width: 24%; }
.bmm-gd-contribute__art .bmm-member-constellation--compact .bmm-member-card--spot-2 { top: 18%; left: 10%; }
.bmm-gd-contribute__art .bmm-member-constellation--compact .bmm-member-card--spot-3 { top: 18%; right: 10%; }
.bmm-gd-contribute__art .bmm-member-constellation--compact .bmm-member-card--spot-4 { top: 58%; left: 10%; }
.bmm-gd-contribute__art .bmm-member-constellation--compact .bmm-member-card--spot-5 { top: 58%; right: 10%; }
.bmm-gd-contribute__art .bmm-member-constellation--compact .bmm-member-card--spot-6 { right: auto; bottom: -8%; left: 38.25%; }
.bmm-gd-contribute__art .bmm-member-constellation--compact .bmm-member-card__friends > a:nth-of-type(n+4) { display: none; }
.bmm-gd-contribute__art .bmm-member-constellation--compact .bmm-member-constellation__connectors path:nth-child(4),
.bmm-gd-contribute__art .bmm-member-constellation--compact .bmm-member-constellation__connectors path:nth-child(5) { display: none; }

.bmm-member-constellation--compact .bmm-member-card--spot-7,
.bmm-member-constellation--compact .bmm-member-card--spot-8 {
	display: none;
}

.bmm-member-cluster {
	position: relative;
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	background:
		radial-gradient(circle at 50% 48%, rgba(68, 140, 88, 0.19), transparent 48%),
		linear-gradient(145deg, #edf5ef, #ffffff);
}

.bmm-member-cluster::before,
.bmm-member-cluster::after {
	position: absolute;
	width: 68%;
	height: 1px;
	background: repeating-linear-gradient(90deg, rgba(55, 117, 73, 0.38) 0 3px, transparent 3px 7px);
	content: "";
	transform: rotate(28deg);
}

.bmm-member-cluster::after {
	transform: rotate(-28deg);
}

.bmm-member-cluster__profile {
	position: absolute;
	z-index: 1;
	display: grid;
	width: 52px;
	height: 52px;
	place-items: center;
	overflow: hidden;
	border: 3px solid #ffffff;
	border-radius: 16px;
	background: linear-gradient(145deg, #b8dfc2, #eaf8ee);
	box-shadow: 0 7px 16px rgba(19, 54, 29, 0.17);
}

.bmm-member-cluster__profile:nth-child(1) { top: 13%; left: 12%; }
.bmm-member-cluster__profile:nth-child(2) { top: 12%; right: 12%; }
.bmm-member-cluster__profile:nth-child(3) { bottom: 10%; left: 19%; }
.bmm-member-cluster__profile:nth-child(4) { right: 19%; bottom: 10%; }

.bmm-member-cluster__profile img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 13px;
	object-fit: cover;
}

/* Keep the four destination previews distinct instead of merging into a
 * single collage. The fluid padding preserves the separation on small cards. */
.bmm-gd-explore-card__image .bmm-member-cluster {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: clamp(7px, 0.7vw, 10px);
	padding: clamp(10px, 1vw, 14px);
}

.bmm-gd-explore-card__image .bmm-member-cluster__profile,
.bmm-gd-explore-card__image .bmm-member-cluster__profile:nth-child(n) {
	position: relative;
	inset: auto;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	align-self: center;
	border-width: 2px;
	border-radius: clamp(10px, 1vw, 14px);
}

/* Authentication pages use the same real profiles at a compact scale. */
.kol-retro-login .retro-community-stack > .bmm-member-constellation--auth,
.kol-retro-auth-shell > .page-wrap .bmm-member-constellation--auth {
	width: min(100%, 400px);
	margin: 8px auto 2px;
}

.kol-retro-login .bmm-member-constellation--auth .bmm-member-card--spot-7,
.kol-retro-login .bmm-member-constellation--auth .bmm-member-card--spot-8 {
	display: none;
}

.kol-retro-login .bmm-member-constellation--auth .bmm-member-card__name {
	font-size: clamp(7px, 0.82vw, 10px);
}

.kol-retro-login .bmm-member-constellation--auth .bmm-member-card__cover {
	height: clamp(29px, 4.5vw, 48px);
}

.kol-retro-login .bmm-member-constellation--auth .bmm-member-card__avatar-link {
	top: clamp(14px, 2.2vw, 24px);
	width: clamp(34px, 5.6vw, 58px);
	height: clamp(34px, 5.6vw, 58px);
}

.kol-retro-login .bmm-member-constellation--auth .bmm-member-card--spot-0 .bmm-member-card__avatar-link {
	width: clamp(52px, 8vw, 84px);
	height: clamp(52px, 8vw, 84px);
}

.kol-retro-login .bmm-member-constellation--auth .bmm-member-card__body {
	min-height: clamp(42px, 6.2vw, 64px);
	padding-top: clamp(24px, 3.8vw, 40px);
}

.kol-retro-login .bmm-member-constellation--auth .bmm-member-card--spot-0 .bmm-member-card__body {
	min-height: clamp(62px, 8.6vw, 88px);
	padding-top: clamp(38px, 5.8vw, 62px);
}

.kol-retro-login .bmm-member-constellation--auth .bmm-member-card__friends > a:nth-of-type(n+4) {
	display: none;
}

.kol-retro-auth-shell .retro-auth-page-layout {
	grid-template-columns: minmax(300px, 0.92fr) minmax(320px, 1.08fr);
	align-items: center;
}

.kol-retro-auth-shell .retro-auth-page-layout > .bmm-member-constellation--auth {
	grid-column: 1;
	grid-row: 2;
}

.kol-retro-auth-shell .kol-retro-auth-content {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.kol-retro-auth-shell--register .retro-auth-page-layout {
	grid-template-columns: minmax(280px, 0.75fr) minmax(380px, 1.25fr);
}

.kol-retro-auth-shell--register .header-banner {
	grid-column: 1;
	grid-row: 1;
}

.kol-retro-auth-shell--register .retro-auth-page-layout > .bmm-member-constellation--auth {
	grid-column: 2;
	grid-row: 1;
	width: min(100%, 400px);
}

.kol-retro-auth-shell--register .kol-retro-auth-content {
	grid-column: 1 / -1;
	grid-row: 2;
}

.kol-home-login__media > .bmm-member-constellation--auth {
	width: min(88%, 620px);
	margin: auto;
}

/* Keep the homepage network inside its visual lane. The surrounding split
 * headline and hit counter are positioned independently, so the network must
 * not participate in normal flow or expand across their text area. */
.kol-home-login--facebook-split .kol-home-login__media > .bmm-member-constellation--auth {
	position: absolute;
	z-index: 1;
	top: clamp(62px, 8vh, 84px);
	right: clamp(18px, 2.6vw, 52px);
	left: auto;
	width: min(56%, 620px);
	margin: 0;
}

.kol-home-login--facebook-split .kol-home-login__platform-line,
.kol-home-login--facebook-split .kol-home-login__split-copy {
	z-index: 2;
}

/* Seven live homepage compositions. Every portrait, cover and friend chip is
 * sourced from a public BMMPlay profile; only the supporting shapes are art. */
.kol-home-login--facebook-split .kol-home-login__media > .bmm-home-member-visual {
	--bmm-home-green: #397b4e;
	--bmm-home-deep: #183523;
	--bmm-home-mint: #dff1e4;
	--bmm-home-card: rgba(255, 255, 255, 0.94);
	--bmm-home-line: rgba(57, 123, 78, 0.52);
	position: absolute;
	z-index: 1;
	top: clamp(62px, 8vh, 84px);
	right: clamp(18px, 2.6vw, 52px);
	width: min(56%, 620px);
	aspect-ratio: 620 / 560;
	isolation: isolate;
	pointer-events: none;
}

.bmm-home-member-visual *,
.bmm-home-member-visual *::before,
.bmm-home-member-visual *::after {
	box-sizing: border-box;
}

.bmm-home-member-visual__glow {
	position: absolute;
	inset: 8% 4%;
	z-index: -2;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(112, 184, 130, 0.22), rgba(112, 184, 130, 0.06) 44%, transparent 72%);
	filter: blur(7px);
}

.bmm-home-member-visual__lines {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: none;
	stroke: var(--bmm-home-line);
	stroke-width: 1.5;
	stroke-dasharray: 5 7;
	stroke-linecap: round;
}

.bmm-home-member {
	position: absolute;
	z-index: 2;
	display: flex;
	width: 24%;
	min-height: 24%;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	border: 1px solid rgba(45, 96, 60, 0.15);
	border-radius: 14px;
	background: var(--bmm-home-card);
	box-shadow: 0 13px 26px rgba(25, 55, 34, 0.13);
	pointer-events: auto;
}

.bmm-home-member__cover {
	width: 100%;
	height: 45px;
	background:
		linear-gradient(180deg, rgba(236, 242, 237, 0.15), rgba(83, 119, 92, 0.13)),
		var(--bmm-home-cover, linear-gradient(135deg, #eef3ef, #cfd8d1));
	background-position: center;
	background-size: cover;
}

.bmm-home-member__avatar-link {
	position: relative;
	display: block;
	width: clamp(42px, 6vw, 76px);
	height: clamp(42px, 6vw, 76px);
	margin-top: -24px;
	flex: 0 0 auto;
	border: 4px solid #fff;
	border-radius: 50%;
	background: #d8e5db;
	box-shadow: 0 5px 12px rgba(18, 47, 27, 0.2);
}

.bmm-home-member__avatar {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.bmm-home-member__status {
	position: absolute;
	right: -1px;
	bottom: 1px;
	width: 15px;
	height: 15px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #9aa9a0;
}

.bmm-home-member__status.is-online {
	background: #39a45e;
	box-shadow: 0 0 0 3px rgba(57, 164, 94, 0.13);
}

.bmm-home-member__name {
	display: block;
	width: calc(100% - 12px);
	margin: 4px auto 5px;
	overflow: hidden;
	color: var(--bmm-home-deep);
	font-size: clamp(8px, 0.9vw, 13px);
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bmm-home-member__friends {
	display: flex;
	min-height: 21px;
	align-items: center;
	justify-content: center;
	margin: 0 4px 7px;
}

.bmm-home-member__friends a {
	display: block;
	width: 18px;
	height: 18px;
	margin-left: -4px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #dbe7dd;
}

.bmm-home-member__friends img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.bmm-home-member__friends-mark {
	display: grid;
	width: 22px;
	height: 22px;
	margin-right: 5px;
	place-items: center;
	border-radius: 50%;
	background: var(--bmm-home-green);
}

.bmm-home-member__friends-mark svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: #fff;
	stroke-width: 1.7;
}

/* 1: generational tree with a small story album. */
.bmm-home-member-visual--family-tree .bmm-home-member {
	width: 17%;
	min-height: 15%;
	padding: 5px 3px 3px;
	overflow: visible;
	border-radius: 50% 50% 13px 13px;
}

.bmm-home-member-visual--family-tree .bmm-home-member__avatar-link {
	width: clamp(43px, 5vw, 64px);
	height: clamp(43px, 5vw, 64px);
	margin-top: 0;
}

.bmm-home-member-visual--family-tree .bmm-home-member__friends { display: none; }
.bmm-home-member-visual--family-tree .bmm-home-member--spot-0 { top: 0; left: 41.5%; }
.bmm-home-member-visual--family-tree .bmm-home-member--spot-1 { top: 26%; left: 9%; }
.bmm-home-member-visual--family-tree .bmm-home-member--spot-2 { top: 26%; left: 41.5%; }
.bmm-home-member-visual--family-tree .bmm-home-member--spot-3 { top: 26%; right: 9%; }
.bmm-home-member-visual--family-tree .bmm-home-member--spot-4 { top: 59%; left: 9%; }
.bmm-home-member-visual--family-tree .bmm-home-member--spot-5 { top: 59%; left: 41.5%; }
.bmm-home-member-visual--family-tree .bmm-home-member--spot-6 { top: 59%; right: 9%; }

.bmm-home-member-visual__tree-label {
	position: absolute;
	right: 32%;
	bottom: 1%;
	left: 32%;
	display: flex;
	min-height: 52px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid rgba(57, 123, 78, 0.18);
	border-radius: 11px;
	background: linear-gradient(135deg, #fff, #e9f3eb);
	box-shadow: 0 10px 20px rgba(24, 53, 35, 0.12);
	color: var(--bmm-home-deep);
	font-size: clamp(8px, 0.8vw, 12px);
	font-weight: 800;
}

.bmm-home-member-visual__tree-label span {
	width: 30px;
	height: 34px;
	border-radius: 4px 8px 8px 4px;
	background: linear-gradient(145deg, var(--bmm-home-green), #7dad88);
	box-shadow: inset 4px 0 rgba(255,255,255,.22);
}

/* 2: cover-rich Myplace profile constellation. */
.bmm-home-member-visual--myplace-friends .bmm-home-member {
	width: 21%;
	min-height: 0;
}
.bmm-home-member-visual--myplace-friends .bmm-home-member__cover { height: 40px; }
.bmm-home-member-visual--myplace-friends .bmm-home-member__avatar-link {
	width: clamp(52px, 5vw, 64px);
	height: clamp(52px, 5vw, 64px);
	margin-top: -22px;
}
.bmm-home-member-visual--myplace-friends .bmm-home-member__status {
	width: 13px;
	height: 13px;
}
.bmm-home-member-visual--myplace-friends .bmm-home-member__name { margin: 3px auto; }
.bmm-home-member-visual--myplace-friends .bmm-home-member__friends {
	min-height: 18px;
	margin: 0 4px 5px;
}
.bmm-home-member-visual--myplace-friends .bmm-home-member__friends a {
	width: 16px;
	height: 16px;
}
.bmm-home-member-visual--myplace-friends .bmm-home-member__friends-mark {
	width: 19px;
	height: 19px;
}
.bmm-home-member-visual--myplace-friends .bmm-home-member--spot-0 {
	top: 31.8%;
	left: 36%;
	width: 28%;
	min-height: 0;
}
.bmm-home-member-visual--myplace-friends .bmm-home-member--spot-0 .bmm-home-member__cover { height: 62px; }
.bmm-home-member-visual--myplace-friends .bmm-home-member--spot-0 .bmm-home-member__avatar-link {
	width: clamp(76px, 7vw, 90px);
	height: clamp(76px, 7vw, 90px);
	margin-top: -35px;
}
.bmm-home-member-visual--myplace-friends .bmm-home-member--spot-1 { top: 0; left: 39.5%; }
.bmm-home-member-visual--myplace-friends .bmm-home-member--spot-2 { top: 4%; left: 6%; }
.bmm-home-member-visual--myplace-friends .bmm-home-member--spot-3 { top: 4%; right: 6%; }
.bmm-home-member-visual--myplace-friends .bmm-home-member--spot-4 { top: 38%; left: 2%; }
.bmm-home-member-visual--myplace-friends .bmm-home-member--spot-5 { top: 38%; right: 2%; }
.bmm-home-member-visual--myplace-friends .bmm-home-member--spot-6 { bottom: 0; left: 6%; }
.bmm-home-member-visual--myplace-friends .bmm-home-member--spot-7 { bottom: 0; left: 39.5%; }
.bmm-home-member-visual--myplace-friends .bmm-home-member--spot-8 { right: 6%; bottom: 0; }

/* 3: a profile being assembled from creative tools. */
.bmm-home-member-visual--build-your-space::before {
	position: absolute;
	inset: 8% 14%;
	z-index: -1;
	border: 1px solid rgba(57, 123, 78, 0.2);
	border-radius: 28px;
	background: linear-gradient(150deg, rgba(255,255,255,.78), rgba(217,239,224,.38));
	content: "";
	transform: rotate(-4deg);
}

.bmm-home-member-visual--build-your-space .bmm-home-member--spot-0 { top: 23%; left: 33%; width: 34%; min-height: 36%; }
.bmm-home-member-visual--build-your-space .bmm-home-member--spot-0 .bmm-home-member__cover { height: 90px; }
.bmm-home-member-visual--build-your-space .bmm-home-member--spot-0 .bmm-home-member__avatar-link { width: clamp(76px, 9vw, 112px); height: clamp(76px, 9vw, 112px); margin-top: -52px; }
.bmm-home-member-visual--build-your-space .bmm-home-member:not(.bmm-home-member--spot-0) { width: 15%; min-height: 15%; padding-top: 5px; overflow: visible; border-radius: 16px; }
.bmm-home-member-visual--build-your-space .bmm-home-member:not(.bmm-home-member--spot-0) .bmm-home-member__avatar-link { width: clamp(40px, 4.6vw, 58px); height: clamp(40px, 4.6vw, 58px); margin-top: 0; }
.bmm-home-member-visual--build-your-space .bmm-home-member:not(.bmm-home-member--spot-0) .bmm-home-member__friends { display: none; }
.bmm-home-member-visual--build-your-space .bmm-home-member--spot-1 { top: 5%; left: 8%; }
.bmm-home-member-visual--build-your-space .bmm-home-member--spot-2 { top: 5%; right: 8%; }
.bmm-home-member-visual--build-your-space .bmm-home-member--spot-3 { bottom: 6%; left: 10%; }
.bmm-home-member-visual--build-your-space .bmm-home-member--spot-4 { right: 10%; bottom: 6%; }

.bmm-home-member-visual__build-grid {
	position: absolute;
	inset: 5% 3%;
}

.bmm-home-member-visual__build-grid span {
	position: absolute;
	display: grid;
	width: 25%;
	height: 18%;
	place-items: end center;
	padding-bottom: 5px;
	border: 1px dashed rgba(57, 123, 78, .3);
	border-radius: 14px;
	background: rgba(230, 243, 234, .55);
	color: #41684c;
	font-size: clamp(7px, .72vw, 11px);
	font-weight: 800;
}
.bmm-home-member-visual__build-grid span:nth-child(1) { top: 0; left: 0; }
.bmm-home-member-visual__build-grid span:nth-child(2) { top: 0; right: 0; }
.bmm-home-member-visual__build-grid span:nth-child(3) { bottom: 0; left: 0; }
.bmm-home-member-visual__build-grid span:nth-child(4) { right: 0; bottom: 0; }

.bmm-home-member-visual__tool-orbit {
	position: absolute;
	inset: 15% 25%;
	z-index: -1;
	border: 1px dashed var(--bmm-home-line);
	border-radius: 50%;
}
.bmm-home-member-visual__tool-orbit i { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--bmm-home-green); box-shadow:0 0 0 5px rgba(57,123,78,.12); }
.bmm-home-member-visual__tool-orbit i:nth-child(1) { top:8%; left:3%; }
.bmm-home-member-visual__tool-orbit i:nth-child(2) { top:48%; right:-2%; }
.bmm-home-member-visual__tool-orbit i:nth-child(3) { bottom:4%; left:14%; }

/* 4: conversation hub with shared-interest orbit. */
.bmm-home-member-visual--meet-your-people .bmm-home-member { width: 17%; min-height: 15%; padding: 5px 3px 3px; overflow: visible; border-radius: 50%; }
.bmm-home-member-visual--meet-your-people .bmm-home-member__avatar-link { width: clamp(50px, 5.6vw, 72px); height: clamp(50px, 5.6vw, 72px); margin-top: 0; }
.bmm-home-member-visual--meet-your-people .bmm-home-member__friends { display: none; }
.bmm-home-member-visual--meet-your-people .bmm-home-member--spot-0 { top: 35%; left: 38%; width: 24%; min-height: 23%; }
.bmm-home-member-visual--meet-your-people .bmm-home-member--spot-0 .bmm-home-member__avatar-link { width: clamp(78px, 8vw, 108px); height: clamp(78px, 8vw, 108px); }
.bmm-home-member-visual--meet-your-people .bmm-home-member--spot-1 { top: 3%; left: 42%; }
.bmm-home-member-visual--meet-your-people .bmm-home-member--spot-2 { top: 15%; left: 3%; }
.bmm-home-member-visual--meet-your-people .bmm-home-member--spot-3 { top: 15%; right: 3%; }
.bmm-home-member-visual--meet-your-people .bmm-home-member--spot-4 { top: 57%; left: 1%; }
.bmm-home-member-visual--meet-your-people .bmm-home-member--spot-5 { top: 57%; right: 1%; }
.bmm-home-member-visual--meet-your-people .bmm-home-member--spot-6 { bottom: 0; left: 42%; }

.bmm-home-member-visual__interest-badges span {
	position: absolute;
	z-index: 1;
	padding: 4px 9px;
	border-radius: 999px;
	background: #e9f4ec;
	box-shadow: 0 5px 12px rgba(24,53,35,.1);
	color: #3d6748;
	font-size: clamp(7px,.72vw,10px);
	font-weight: 800;
}
.bmm-home-member-visual__interest-badges span:nth-child(1) { top: 20%; left: 34%; }
.bmm-home-member-visual__interest-badges span:nth-child(2) { top: 20%; right: 34%; }
.bmm-home-member-visual__interest-badges span:nth-child(3) { bottom: 20%; left: 31%; }
.bmm-home-member-visual__interest-badges span:nth-child(4) { right: 30%; bottom: 20%; }

/* 5: a connected multimedia studio. */
.bmm-home-member-visual--make-something-original .bmm-home-member { width: 32%; min-height: 28%; }
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-0 { top: 3%; left: 3%; }
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-1 { top: 3%; right: 3%; }
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-2 { bottom: 3%; left: 3%; }
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-3 { right: 3%; bottom: 3%; }
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-4,
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-5 { top: 40%; width: 14%; min-height: 16%; padding-top: 4px; overflow: visible; border-radius: 50%; }
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-4 { left: 35%; }
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-5 { right: 35%; }
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-4 .bmm-home-member__cover,
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-5 .bmm-home-member__cover,
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-4 .bmm-home-member__friends,
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-5 .bmm-home-member__friends { display:none; }
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-4 .bmm-home-member__avatar-link,
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-5 .bmm-home-member__avatar-link { width:clamp(42px,4.5vw,58px);height:clamp(42px,4.5vw,58px);margin-top:0; }

.bmm-home-member-visual__maker-core {
	position: absolute;
	top: 39%;
	left: 38%;
	display: flex;
	width: 24%;
	height: 22%;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border-radius: 18px;
	background: linear-gradient(145deg, #214c30, #4b9660);
	box-shadow: 0 13px 28px rgba(23,52,33,.24);
}
.bmm-home-member-visual__maker-core span { display:grid; width:24px; height:24px; place-items:center; border-radius:8px; background:rgba(255,255,255,.16); color:#fff; font-size:12px; }
.bmm-home-member-visual__maker-labels span { position:absolute; z-index:3; padding:3px 7px; border-radius:999px; background:#fff; color:#315f3e; font-size:9px; font-weight:800; box-shadow:0 4px 10px rgba(20,45,29,.11); }
.bmm-home-member-visual__maker-labels span:nth-child(1) { top:2%; left:27%; }
.bmm-home-member-visual__maker-labels span:nth-child(2) { top:2%; right:27%; }
.bmm-home-member-visual__maker-labels span:nth-child(3) { bottom:2%; left:25%; }
.bmm-home-member-visual__maker-labels span:nth-child(4) { right:25%; bottom:2%; }

/* 6: shared-play hub surrounded by activity cards. */
.bmm-home-member-visual--play-your-way .bmm-home-member { width: 15%; min-height: 15%; padding: 4px 2px; overflow: visible; border-radius: 50%; }
.bmm-home-member-visual--play-your-way .bmm-home-member__avatar-link { width: clamp(46px,5vw,66px); height: clamp(46px,5vw,66px); margin-top:0; }
.bmm-home-member-visual--play-your-way .bmm-home-member__friends { display:none; }
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-0 { top:34%; left:31%; width:21%; }
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-1 { top:30%; right:28%; width:21%; }
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-2 { top:47%; left:40%; width:21%; }
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-3 { top:7%; left:10%; }
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-4 { top:7%; right:10%; }
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-5 { bottom:5%; left:10%; }
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-6 { right:10%; bottom:5%; }
.bmm-home-member-visual__party-ring { position:absolute; top:25%; left:24%; width:52%; height:47%; border:1px dashed var(--bmm-home-line); border-radius:50%; background:radial-gradient(circle,rgba(87,165,107,.18),transparent 68%); }
.bmm-home-member-visual__play-cards span { position:absolute; display:grid; width:24%; height:20%; place-items:center; border:1px solid rgba(57,123,78,.16); border-radius:16px; background:linear-gradient(145deg,#fff,#dfede2); box-shadow:0 12px 24px rgba(22,50,31,.11); color:#326440; font-size:clamp(8px,.9vw,13px); font-weight:900; letter-spacing:.08em; }
.bmm-home-member-visual__play-cards span:nth-child(1) { top:1%; left:0; transform:rotate(-5deg); }
.bmm-home-member-visual__play-cards span:nth-child(2) { top:1%; right:0; transform:rotate(5deg); font-size:22px; }
.bmm-home-member-visual__play-cards span:nth-child(3) { bottom:0; left:0; transform:rotate(4deg); }
.bmm-home-member-visual__play-cards span:nth-child(4) { right:0; bottom:0; transform:rotate(-4deg); font-size:20px; }

/* 7: live-presence radar, added as the distinct online design. */
.bmm-home-member-visual--who-is-online .bmm-home-member { width: 15%; min-height: 15%; padding:4px 2px; overflow:visible; border-radius:50%; }
.bmm-home-member-visual--who-is-online .bmm-home-member__avatar-link { width:clamp(48px,5.4vw,70px);height:clamp(48px,5.4vw,70px);margin-top:0; }
.bmm-home-member-visual--who-is-online .bmm-home-member__friends { display:none; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-0 { top:37%; left:42.5%; width:18%; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-1 { top:4%; left:41%; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-2 { top:18%; right:5%; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-3 { right:9%; bottom:12%; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-4 { bottom:1%; left:42%; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-5 { bottom:12%; left:8%; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-6 { top:18%; left:4%; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-7 { top:38%; right:-1%; }

.bmm-home-member-visual__radar { position:absolute; inset:7% 11%; overflow:hidden; border:1px solid rgba(57,123,78,.24); border-radius:50%; background:radial-gradient(circle,rgba(73,150,92,.14),rgba(73,150,92,.03) 57%,transparent 58%); box-shadow:inset 0 0 50px rgba(58,128,77,.11); }
.bmm-home-member-visual__radar span { position:absolute; border:1px dashed rgba(57,123,78,.29); border-radius:50%; }
.bmm-home-member-visual__radar span:nth-child(1) { inset:13%; }
.bmm-home-member-visual__radar span:nth-child(2) { inset:29%; }
.bmm-home-member-visual__radar span:nth-child(3) { inset:45%; }
.bmm-home-member-visual__radar::before,
.bmm-home-member-visual__radar::after { position:absolute; background:rgba(57,123,78,.22); content:""; }
.bmm-home-member-visual__radar::before { top:0; bottom:0; left:50%; width:1px; }
.bmm-home-member-visual__radar::after { top:50%; right:0; left:0; height:1px; }
.bmm-home-member-visual__radar i { position:absolute; inset:50% 50% 0 0; border-radius:100% 0 0 0; background:linear-gradient(38deg,transparent 48%,rgba(76,167,100,.25)); transform-origin:100% 100%; animation:bmm-home-radar 8s linear infinite; }
.bmm-home-member-visual__online-label { position:absolute; top:48%; left:39%; z-index:1; padding:5px 9px; border-radius:999px; background:#1e5430; color:#fff; font-size:clamp(7px,.75vw,11px); font-weight:900; letter-spacing:.12em; }

@keyframes bmm-home-radar { to { transform:rotate(360deg); } }

/* Geometry polish: portrait-only nodes use a true square footprint so their
 * background can never stretch into an oval when a member has a long name. */
:is(
	.bmm-home-member-visual--family-tree,
	.bmm-home-member-visual--meet-your-people,
	.bmm-home-member-visual--play-your-way,
	.bmm-home-member-visual--who-is-online
) .bmm-home-member,
.bmm-home-member-visual--build-your-space .bmm-home-member:not(.bmm-home-member--spot-0),
.bmm-home-member-visual--make-something-original :is(.bmm-home-member--spot-4, .bmm-home-member--spot-5) {
	min-height: 0;
	aspect-ratio: 1;
	justify-content: flex-start;
	overflow: visible;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
}

:is(
	.bmm-home-member-visual--family-tree,
	.bmm-home-member-visual--meet-your-people,
	.bmm-home-member-visual--play-your-way,
	.bmm-home-member-visual--who-is-online
) .bmm-home-member__avatar-link,
.bmm-home-member-visual--build-your-space .bmm-home-member:not(.bmm-home-member--spot-0) .bmm-home-member__avatar-link,
.bmm-home-member-visual--make-something-original :is(.bmm-home-member--spot-4, .bmm-home-member--spot-5) .bmm-home-member__avatar-link {
	width: 78%;
	height: auto;
	aspect-ratio: 1;
	margin: 0 auto;
}

:is(
	.bmm-home-member-visual--family-tree,
	.bmm-home-member-visual--meet-your-people,
	.bmm-home-member-visual--play-your-way,
	.bmm-home-member-visual--who-is-online
) .bmm-home-member__name,
.bmm-home-member-visual--build-your-space .bmm-home-member:not(.bmm-home-member--spot-0) .bmm-home-member__name {
	position: absolute;
	top: 76%;
	left: 50%;
	z-index: 3;
	width: max-content;
	max-width: 142%;
	margin: 0;
	padding: 3px 7px;
	border: 1px solid rgba(57, 123, 78, 0.13);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 5px 12px rgba(20, 48, 29, 0.12);
	font-size: clamp(8px, 0.78vw, 11px);
	line-height: 1;
	transform: translateX(-50%);
}

/* Keep the tree branches away from labels and give each generation air. */
.bmm-home-member-visual--family-tree .bmm-home-member--spot-0 { top: 1%; }
.bmm-home-member-visual--family-tree .bmm-home-member--spot-1,
.bmm-home-member-visual--family-tree .bmm-home-member--spot-2,
.bmm-home-member-visual--family-tree .bmm-home-member--spot-3 { top: 27%; }
.bmm-home-member-visual--family-tree .bmm-home-member--spot-4,
.bmm-home-member-visual--family-tree .bmm-home-member--spot-5,
.bmm-home-member-visual--family-tree .bmm-home-member--spot-6 { top: 60%; }
.bmm-home-member-visual--family-tree .bmm-home-member__name { top: 75%; }

/* Builder tool panels are icon-led; names sit in their own chips instead of
 * colliding with the tool labels underneath. */
.bmm-home-member-visual__build-grid span {
	place-items: end center;
	padding: 0 4px 8px;
	color: transparent;
	font-size: 0;
}

.bmm-home-member-visual__build-grid span::before {
	position: absolute;
	top: 11px;
	left: 12px;
	color: rgba(44, 106, 61, 0.23);
	font-size: clamp(18px, 2vw, 30px);
	font-weight: 800;
	line-height: 1;
}
.bmm-home-member-visual__build-grid span:nth-child(1)::before { content: "+"; }
.bmm-home-member-visual__build-grid span:nth-child(2)::before { content: "▧"; }
.bmm-home-member-visual__build-grid span:nth-child(3)::before { content: "♪"; }
.bmm-home-member-visual__build-grid span:nth-child(4)::before { content: "◎"; }
.bmm-home-member-visual--build-your-space .bmm-home-member:not(.bmm-home-member--spot-0) { width: 14%; padding: 0; }
.bmm-home-member-visual--build-your-space .bmm-home-member--spot-1 { top: 7%; left: 9%; }
.bmm-home-member-visual--build-your-space .bmm-home-member--spot-2 { top: 7%; right: 9%; }
.bmm-home-member-visual--build-your-space .bmm-home-member--spot-3 { bottom: 8%; left: 11%; }
.bmm-home-member-visual--build-your-space .bmm-home-member--spot-4 { right: 11%; bottom: 8%; }

/* Interest chips now occupy the open diagonal lanes instead of sharing the
 * same baseline as a person's name. */
.bmm-home-member-visual__interest-badges span:nth-child(1) { top: 26%; left: 31%; }
.bmm-home-member-visual__interest-badges span:nth-child(2) { top: 26%; right: 31%; }
.bmm-home-member-visual__interest-badges span:nth-child(3) { bottom: 24%; left: 29%; }
.bmm-home-member-visual__interest-badges span:nth-child(4) { right: 28%; bottom: 24%; }

/* The two extra creator portraits are clean round collaborators inside the
 * studio core; the four surrounding cards retain full names and friend rows. */
.bmm-home-member-visual--make-something-original :is(.bmm-home-member--spot-4, .bmm-home-member--spot-5) {
	width: 13%;
	padding: 0;
}
.bmm-home-member-visual--make-something-original :is(.bmm-home-member--spot-4, .bmm-home-member--spot-5) .bmm-home-member__avatar-link {
	width: 100%;
}
.bmm-home-member-visual--make-something-original :is(.bmm-home-member--spot-4, .bmm-home-member--spot-5) .bmm-home-member__name {
	display: none;
}
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-4 { top: 42%; left: 36%; }
.bmm-home-member-visual--make-something-original .bmm-home-member--spot-5 { top: 42%; right: 36%; }

/* Play: four activity tiles frame a centered three-person party. Portraits
 * no longer sit on top of the activity words or each other's name labels. */
.bmm-home-member-visual--play-your-way .bmm-home-member { padding: 0; }
.bmm-home-member-visual--play-your-way .bmm-home-member__avatar-link { width: 82%; }
.bmm-home-member-visual--play-your-way .bmm-home-member__name { top: 78%; }
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-0 { top: 31%; left: 29%; width: 16%; }
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-1 { top: 31%; right: 29%; width: 16%; }
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-2 { top: 50%; left: 42%; width: 16%; }
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-0 .bmm-home-member__name,
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-1 .bmm-home-member__name,
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-2 .bmm-home-member__name {
	max-width: 124%;
	font-size: clamp(7px, 0.7vw, 10px);
}
.bmm-home-member-visual--play-your-way :is(.bmm-home-member--spot-3, .bmm-home-member--spot-4, .bmm-home-member--spot-5, .bmm-home-member--spot-6) {
	width: 24%;
	height: 22%;
	aspect-ratio: auto;
}
.bmm-home-member-visual--play-your-way :is(.bmm-home-member--spot-3, .bmm-home-member--spot-4, .bmm-home-member--spot-5, .bmm-home-member--spot-6) .bmm-home-member__avatar-link {
	position: absolute;
	top: 22%;
	left: 50%;
	width: 43%;
	margin: 0;
	transform: translateX(-50%);
}
.bmm-home-member-visual--play-your-way :is(.bmm-home-member--spot-3, .bmm-home-member--spot-4, .bmm-home-member--spot-5, .bmm-home-member--spot-6) .bmm-home-member__name {
	top: auto;
	bottom: 7%;
	max-width: 86%;
	font-size: clamp(7px, 0.68vw, 10px);
}
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-3 { top: 3%; left: 0; }
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-4 { top: 3%; right: 0; }
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-5 { bottom: 3%; left: 0; }
.bmm-home-member-visual--play-your-way .bmm-home-member--spot-6 { right: 0; bottom: 3%; }
.bmm-home-member-visual__party-ring {
	top: 23%;
	left: 24%;
	width: 52%;
	height: 54%;
	box-shadow: inset 0 0 42px rgba(76, 157, 97, 0.08), 0 16px 36px rgba(41, 95, 56, 0.07);
}
.bmm-home-member-visual__party-ring::after {
	position: absolute;
	bottom: 7%;
	left: 50%;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.86);
	color: #356d44;
	content: "PLAY TOGETHER";
	font-size: clamp(6px, 0.57vw, 9px);
	font-weight: 900;
	letter-spacing: 0.08em;
	white-space: nowrap;
	transform: translateX(-50%);
}
.bmm-home-member-visual__play-cards span {
	width: 24%;
	height: 22%;
	align-items: start;
	justify-content: start;
	padding: 10px 12px;
	font-size: clamp(7px, 0.7vw, 10px);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.bmm-home-member-visual__play-cards span::before {
	display: grid;
	position: absolute;
	top: 8px;
	right: 9px;
	width: 22px;
	height: 22px;
	place-items: center;
	border-radius: 8px;
	background: rgba(57, 123, 78, 0.1);
	color: rgba(45, 105, 61, 0.67);
	font-size: 12px;
}
.bmm-home-member-visual__play-cards span:nth-child(1)::before { content: "◆"; }
.bmm-home-member-visual__play-cards span:nth-child(2)::before { content: "♪"; }
.bmm-home-member-visual__play-cards span:nth-child(3)::before { content: "▦"; }
.bmm-home-member-visual__play-cards span:nth-child(4)::before { content: "▶"; }
.bmm-home-member-visual__play-cards span:nth-child(1) { top: 3%; left: 0; }
.bmm-home-member-visual__play-cards span:nth-child(2) { top: 3%; right: 0; }
.bmm-home-member-visual__play-cards span:nth-child(3) { bottom: 3%; left: 0; }
.bmm-home-member-visual__play-cards span:nth-child(4) { right: 0; bottom: 3%; }
.bmm-home-member-visual__play-cards span:nth-child(1),
.bmm-home-member-visual__play-cards span:nth-child(2),
.bmm-home-member-visual__play-cards span:nth-child(3),
.bmm-home-member-visual__play-cards span:nth-child(4) {
	font-size: clamp(7px, 0.7vw, 10px);
}

/* Online radar labels are separated from the center portrait and each round
 * contact point has the exact same geometry. */
.bmm-home-member-visual--who-is-online .bmm-home-member { padding: 0; }
.bmm-home-member-visual--who-is-online .bmm-home-member__avatar-link { width: 82%; }
.bmm-home-member-visual--who-is-online .bmm-home-member__name { top: 79%; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-0 { top: 35%; left: 41%; width: 18%; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-1 { top: 4%; left: 42.5%; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-2 { top: 18%; right: 6%; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-3 { right: 10%; bottom: 12%; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-4 { bottom: 2%; left: 42.5%; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-5 { bottom: 12%; left: 9%; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-6 { top: 18%; left: 5%; }
.bmm-home-member-visual--who-is-online .bmm-home-member--spot-7 { top: 39%; right: 0; }
.bmm-home-member-visual__online-label { top: 59%; left: 50%; transform: translateX(-50%); }

/* The hit line used to be centered as one unbreakable sentence, which pushed
 * its first words outside narrower desktop media columns. Anchor it instead. */
.kol-home-login--facebook-split .kol-home-login__user-content-hits {
	left: clamp(18px, 3vw, 48px) !important;
	right: auto !important;
	width: calc(100% - clamp(36px, 6vw, 96px));
	max-width: none;
	flex-wrap: wrap;
	white-space: normal;
	text-align: left;
	transform: none !important;
}

@media (min-width: 981px) and (max-width: 1220px) {
	.kol-home-login--facebook-split .kol-home-login__media > .bmm-home-member-visual {
		right: 18px;
		width: 56%;
	}

	.bmm-home-member__friends a:nth-of-type(n+4) { display: none; }
	.bmm-home-member__friends-mark { width:18px; height:18px; }
	.bmm-home-member__friends-mark svg { width:11px; height:11px; }
}

@media (max-width: 980px) {
	.bmm-gd-hero__visual > .bmm-member-constellation {
		width: min(92%, 680px);
	}

	.bmm-gd-contribute__art > .bmm-member-constellation {
		inset: 10px 4%;
	}

	.kol-retro-auth-shell .retro-auth-page-layout {
		grid-template-columns: 1fr;
	}

	.kol-retro-auth-shell .retro-auth-page-layout > .bmm-member-constellation--auth,
	.kol-retro-auth-shell .kol-retro-auth-content,
	.kol-retro-auth-shell--register .header-banner,
	.kol-retro-auth-shell--register .retro-auth-page-layout > .bmm-member-constellation--auth,
	.kol-retro-auth-shell--register .kol-retro-auth-content {
		grid-column: 1;
		grid-row: auto;
	}

	/* The compact homepage header already contains the brand, search, tagline,
	 * and the sign-in form immediately below it. Keep that path unobstructed. */
	.kol-home-login--facebook-split .kol-home-login__media > .bmm-member-constellation--auth {
		display: none;
	}

	.kol-home-login--facebook-split .kol-home-login__media > .bmm-home-member-visual {
		display: none;
	}
}

@media (max-width: 600px) {
	.bmm-member-constellation__connectors {
		opacity: 0.52;
	}

	.bmm-member-card {
		width: 25%;
	}

	.bmm-member-card--spot-0 { left: 32%; width: 36%; }
	.bmm-member-card--spot-1 { left: 35%; width: 30%; }
	.bmm-member-card--spot-2 { left: 0; }
	.bmm-member-card--spot-3 { right: 0; }
	.bmm-member-card--spot-4 { left: 0; }
	.bmm-member-card--spot-5 { right: 0; }
	.bmm-member-card--spot-6 { left: 1%; }
	.bmm-member-card--spot-7 { left: 37.5%; }
	.bmm-member-card--spot-8 { right: 1%; }

	.bmm-member-card__body {
		padding-right: 4px;
		padding-left: 4px;
	}

	.bmm-member-card__friends > a:nth-of-type(n+4),
	.bmm-member-card__name {
		display: none;
	}

	.bmm-member-card--spot-0 .bmm-member-card__name {
		display: block;
	}

	.bmm-gd-contribute__art {
		min-height: 330px;
	}

	.bmm-member-cluster__profile {
		width: 42px;
		height: 42px;
		border-radius: 13px;
	}

	.kol-retro-login .retro-community-stack > .bmm-member-constellation--auth {
		display: none;
	}

	.kol-retro-auth-shell .retro-auth-page-layout > .bmm-member-constellation--auth {
		width: min(100%, 390px);
	}
}

html.dark-mode .bmm-member-constellation,
html[data-bx-mode="dark"] .bmm-member-constellation,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-member-constellation {
	--bmm-constellation-card: rgba(19, 29, 22, 0.94);
	--bmm-constellation-ink: #eff8f1;
	--bmm-constellation-muted: #afbeb3;
	--bmm-constellation-border: rgba(145, 188, 155, 0.23);
}

html.dark-mode .bmm-member-cluster,
html[data-bx-mode="dark"] .bmm-member-cluster,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-member-cluster {
	background:
		radial-gradient(circle at 50% 48%, rgba(94, 194, 121, 0.17), transparent 48%),
		linear-gradient(145deg, #18271c, #0f1711);
}

:is(html.dark-mode, html[data-bx-mode="dark"]) .kol-home-login--facebook-split .kol-home-login__media > .bmm-home-member-visual,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .kol-home-login--facebook-split .kol-home-login__media > .bmm-home-member-visual {
	--bmm-home-deep: #eff8f1;
	--bmm-home-mint: #243b2b;
	--bmm-home-card: rgba(18, 29, 21, 0.95);
	--bmm-home-line: rgba(119, 193, 139, 0.48);
}

:is(html.dark-mode, html[data-bx-mode="dark"]) .bmm-home-member__avatar-link,
:is(html.dark-mode, html[data-bx-mode="dark"]) .bmm-home-member__friends a,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-home-member__avatar-link,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-home-member__friends a {
	border-color: #18271c;
	background-color: #203326;
}

:is(html.dark-mode, html[data-bx-mode="dark"]) .bmm-home-member__status,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-home-member__status {
	border-color: #18271c;
}

:is(html.dark-mode, html[data-bx-mode="dark"]) .bmm-home-member__cover,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-home-member__cover {
	background:
		linear-gradient(180deg, rgba(12, 22, 15, 0.12), rgba(4, 12, 7, 0.56)),
		var(--bmm-home-cover, linear-gradient(135deg, #24382a, #152219));
	background-position: center;
	background-size: cover;
}

:is(html.dark-mode, html[data-bx-mode="dark"]) :is(
	.bmm-home-member-visual--myplace-friends,
	.bmm-home-member-visual--make-something-original
) .bmm-home-member,
:is(html.dark-mode, html[data-bx-mode="dark"]) .bmm-home-member-visual--build-your-space .bmm-home-member--spot-0,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) :is(
	.bmm-home-member-visual--myplace-friends,
	.bmm-home-member-visual--make-something-original
) .bmm-home-member,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-home-member-visual--build-your-space .bmm-home-member--spot-0 {
	border-color: rgba(139, 196, 153, 0.2);
	box-shadow: 0 13px 28px rgba(0, 0, 0, 0.34);
}

:is(html.dark-mode, html[data-bx-mode="dark"]) .bmm-home-member-visual--build-your-space::before,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-home-member-visual--build-your-space::before {
	border-color: rgba(122, 190, 140, 0.22);
	background: linear-gradient(150deg, rgba(31, 51, 37, 0.9), rgba(15, 27, 19, 0.76));
	box-shadow: inset 0 0 46px rgba(95, 176, 116, 0.06), 0 18px 34px rgba(0, 0, 0, 0.2);
}

:is(html.dark-mode, html[data-bx-mode="dark"]) .bmm-home-member-visual__build-grid span,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-home-member-visual__build-grid span {
	border-color: rgba(126, 193, 144, 0.25);
	background: rgba(30, 53, 37, 0.74);
}

:is(html.dark-mode, html[data-bx-mode="dark"]) .bmm-home-member-visual__build-grid span::before,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-home-member-visual__build-grid span::before {
	color: rgba(156, 218, 172, 0.42);
}

:is(html.dark-mode, html[data-bx-mode="dark"]) .kol-home-login--facebook-split .bmm-home-member-visual--build-your-space .bmm-home-member:not(.bmm-home-member--spot-0) .bmm-home-member__name,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .kol-home-login--facebook-split .bmm-home-member-visual--build-your-space .bmm-home-member:not(.bmm-home-member--spot-0) .bmm-home-member__name {
	border-color: rgba(137, 201, 154, 0.17);
	background: rgba(21, 37, 26, 0.96);
	color: #eff8f1;
}

:is(html.dark-mode, html[data-bx-mode="dark"]) .bmm-home-member-visual__tree-label,
:is(html.dark-mode, html[data-bx-mode="dark"]) .bmm-home-member-visual__play-cards span,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-home-member-visual__tree-label,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-home-member-visual__play-cards span {
	background: linear-gradient(145deg, #1b3021, #294b33);
	color: #eaf6ed;
}

:is(html.dark-mode, html[data-bx-mode="dark"]) .bmm-home-member-visual__interest-badges span,
:is(html.dark-mode, html[data-bx-mode="dark"]) .bmm-home-member-visual__maker-labels span,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-home-member-visual__interest-badges span,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-home-member-visual__maker-labels span {
	background: #213b29;
	color: #dff2e4;
}

:is(html.dark-mode, html[data-bx-mode="dark"]) :is(
	.bmm-home-member-visual--family-tree,
	.bmm-home-member-visual--meet-your-people,
	.bmm-home-member-visual--play-your-way,
	.bmm-home-member-visual--who-is-online,
	.bmm-home-member-visual--build-your-space
) .bmm-home-member__name,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) :is(
	.bmm-home-member-visual--family-tree,
	.bmm-home-member-visual--meet-your-people,
	.bmm-home-member-visual--play-your-way,
	.bmm-home-member-visual--who-is-online,
	.bmm-home-member-visual--build-your-space
) .bmm-home-member__name {
	border-color: rgba(137, 201, 154, 0.17);
	background: rgba(21, 37, 26, 0.96);
	color: #eff8f1;
}

:is(html.dark-mode, html[data-bx-mode="dark"]) .bmm-home-member-visual__party-ring::after,
body:is(.dark-mode, .bb-dark-mode, [data-theme="dark"]) .bmm-home-member-visual__party-ring::after {
	background: rgba(25, 45, 30, 0.94);
	color: #dff2e4;
}

@media (prefers-reduced-motion: reduce) {
	.bmm-member-card,
	.bmm-member-card__cover::after {
		transition: none;
	}

	.bmm-home-member-visual__radar i {
		animation: none;
	}
}