/**
 * Grafixyy Experience
 * Million vs Billion
 *
 * Art Direction:
 * Industrial Scale Lab
 *
 * Current visual model:
 * 1 Million
 * → original million shrinks
 * → becomes cell #1
 * → 1,000 million cells fill
 * → 1 Billion
 */


/* =========================================================
   TOKENS / ROOT
   ========================================================= */

.grafixyy-million-billion {
	--mb-black: #050704;
	--mb-panel: #0b0f0b;
	--mb-panel-2: #111710;

	--mb-line: rgba(224, 255, 60, 0.18);
	--mb-line-strong: rgba(224, 255, 60, 0.42);

	--mb-acid: #dfff3f;
	--mb-acid-bright: #edff7a;

	--mb-white: #f7f9ef;
	--mb-muted: #aeb6a4;
	--mb-ink: #080a06;

	position: relative;
	isolation: isolate;

	width: min(1120px, calc(100% - 32px));
	margin: 60px auto 90px;

	color: var(--mb-white);
	font-family: "Alexandria", Arial, Tahoma, sans-serif;
}

.grafixyy-million-billion,
.grafixyy-million-billion * {
	box-sizing: border-box;
}

.grafixyy-million-billion::before {
	content: "";

	position: absolute;
	z-index: -2;
	inset: -70px -6vw;

	pointer-events: none;

	background:
		radial-gradient(
			circle at 50% 8%,
			rgba(223, 255, 63, 0.08),
			transparent 34%
		);
}


/* =========================================================
   EXPERIENCE SHELL
   ========================================================= */

.grafixyy-million-billion__inner {
	position: relative;
	overflow: hidden;

	padding: clamp(28px, 4vw, 54px);

	border: 1px solid var(--mb-line);
	border-radius: 28px;

	background:
		linear-gradient(
			rgba(223, 255, 63, 0.035) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(223, 255, 63, 0.035) 1px,
			transparent 1px
		),
		linear-gradient(
			145deg,
			#0d120c 0%,
			var(--mb-black) 68%
		);

	background-size:
		36px 36px,
		36px 36px,
		auto;

	box-shadow:
		0 30px 100px rgba(0, 0, 0, 0.38),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.grafixyy-million-billion__inner::before {
	content: "SCALE LAB / 001";

	position: absolute;
	top: 18px;
	left: 22px;

	color: rgba(223, 255, 63, 0.58);

	font: 700 10px/1.4 monospace;
	letter-spacing: 0.16em;

	direction: ltr;
}


/* =========================================================
   HERO
   ========================================================= */

.grafixyy-million-billion__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	margin: 0 0 18px;
	padding: 8px 13px;

	border: 1px solid var(--mb-line-strong);
	border-radius: 999px;

	background: rgba(223, 255, 63, 0.07);

	color: var(--mb-acid);

	font-size: 13px;
	font-weight: 700;
}

.grafixyy-million-billion__eyebrow::before {
	content: "";

	flex: 0 0 auto;

	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: var(--mb-acid);

	box-shadow:
		0 0 14px var(--mb-acid);
}

.grafixyy-million-billion__title {
	max-width: 760px;

	margin: 0;

	color: var(--mb-white);

	font-size: clamp(34px, 4.4vw, 60px);
	font-weight: 850;
	line-height: 1.28;

	letter-spacing: -0.025em;

	text-wrap: balance;
}

.grafixyy-million-billion__intro {
	max-width: 690px;

	margin: 18px 0 0;

	color: var(--mb-muted);

	font-size: clamp(15px, 1.6vw, 18px);
	font-weight: 500;
	line-height: 1.9;
}


/* =========================================================
   GUESS CHALLENGE
   ========================================================= */

.grafixyy-million-billion__challenge {
	position: relative;

	margin-top: clamp(32px, 5vw, 52px);
	padding: clamp(20px, 3vw, 32px);

	border: 1px solid var(--mb-line);
	border-radius: 22px;

	background:
		linear-gradient(
			135deg,
			rgba(223, 255, 63, 0.055),
			rgba(255, 255, 255, 0.015)
		),
		var(--mb-panel);
}

.grafixyy-million-billion__challenge::before {
	content: "GUESS";

	position: absolute;
	top: -10px;
	right: 24px;

	padding: 3px 9px;

	background: var(--mb-acid);

	color: var(--mb-ink);

	font: 900 10px/1.4 monospace;
	letter-spacing: 0.12em;

	direction: ltr;
}

.grafixyy-million-billion__question {
	margin: 0;

	color: var(--mb-white);

	font-size: clamp(19px, 2.3vw, 26px);
	font-weight: 800;
	line-height: 1.6;
}

.grafixyy-million-billion__choices {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 12px;

	margin-top: 20px;

	direction: ltr;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.grafixyy-million-billion__choices button,
.grafixyy-million-billion__reveal,
.grafixyy-million-billion__billion-trigger {
	min-height: 54px;

	border-radius: 13px;

	font-family:
		"Alexandria",
		Arial,
		Tahoma,
		sans-serif;

	font-weight: 800;

	cursor: pointer;

	transition:
		transform 160ms ease,
		border-color 160ms ease,
		background 160ms ease,
		color 160ms ease,
		box-shadow 160ms ease;
}

.grafixyy-million-billion__choices button {
	border:
		1px solid rgba(255, 255, 255, 0.11);

	background: #111611;

	color: var(--mb-white);

	font-size: clamp(17px, 2vw, 22px);

	font-variant-numeric: tabular-nums;
}

.grafixyy-million-billion__choices button:hover {
	border-color: var(--mb-line-strong);

	background: #171e14;

	transform: translateY(-2px);
}

.grafixyy-million-billion__choices button[aria-pressed="true"] {
	border-color: var(--mb-acid);

	background: var(--mb-acid);

	color: var(--mb-ink);

	box-shadow:
		0 0 28px rgba(223, 255, 63, 0.18);
}

.grafixyy-million-billion__reveal,
.grafixyy-million-billion__billion-trigger {
	display: block;

	width: 100%;

	margin-top: 14px;

	border:
		1px solid var(--mb-acid) !important;

	background:
		var(--mb-acid) !important;

	color:
		var(--mb-ink) !important;

	-webkit-text-fill-color:
		var(--mb-ink);

	font-size: 16px;
	line-height: 1.5;

	text-shadow: none !important;

	box-shadow:
		0 10px 35px rgba(223, 255, 63, 0.10);
}

.grafixyy-million-billion__reveal:not(:disabled):hover,
.grafixyy-million-billion__billion-trigger:not(:disabled):hover {
	background:
		var(--mb-acid-bright) !important;

	color:
		var(--mb-ink) !important;

	-webkit-text-fill-color:
		var(--mb-ink);

	transform: translateY(-2px);

	box-shadow:
		0 14px 38px rgba(223, 255, 63, 0.16);
}

.grafixyy-million-billion__reveal:disabled {
	border-color:
		rgba(255, 255, 255, 0.08) !important;

	background:
		rgba(255, 255, 255, 0.055) !important;

	color:
		#71786d !important;

	-webkit-text-fill-color:
		#71786d;

	cursor: not-allowed;

	box-shadow: none;
}

.grafixyy-million-billion__billion-trigger:disabled {
	opacity: 0.86;

	cursor: default;
}

.grafixyy-million-billion button:focus-visible {
	outline:
		3px solid #ffffff;

	outline-offset: 4px;
}


/* =========================================================
   SCALE STAGE
   ========================================================= */

.grafixyy-million-billion__stage {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;
	min-width: 0;

	margin-top: 26px;
	padding: clamp(24px, 4vw, 46px);

	overflow: hidden;

	border:
		1px solid var(--mb-line-strong);

	border-radius: 22px;

	background:
		linear-gradient(
			rgba(223, 255, 63, 0.025) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(223, 255, 63, 0.025) 1px,
			transparent 1px
		),
		#070a07;

	background-size:
		24px 24px,
		24px 24px,
		auto;

	text-align: center;
}

.grafixyy-million-billion__stage[hidden],
.grafixyy-million-billion__final-reveal[hidden] {
	display: none !important;
}


/* =========================================================
   STAGE HEADER
   ========================================================= */

.grafixyy-million-billion__stage-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	width: 100%;

	margin-bottom: 12px;
}

.grafixyy-million-billion__stage-label,
.grafixyy-million-billion__stage-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 28px;

	padding: 5px 9px;

	border:
		1px solid var(--mb-line);

	background:
		rgba(3, 6, 3, 0.72);

	color:
		var(--mb-acid);

	font:
		800 10px/1.4 monospace;

	letter-spacing:
		0.08em;
}

.grafixyy-million-billion__stage-status {
	direction: ltr;

	white-space: nowrap;
}


/* =========================================================
   LIVE SCALE COUNTER
   ========================================================= */

.grafixyy-million-billion__counter-zone {
	position: relative;
	z-index: 15;

	width: 100%;

	margin: 6px auto 16px;
	padding: 13px 16px;

	overflow: hidden;

	border:
		1px solid rgba(223, 255, 63, 0.20);

	border-radius: 14px;

	background:
		rgba(4, 7, 4, 0.82);

	text-align: center;

	transition:
		border-color 250ms ease,
		background 250ms ease,
		box-shadow 250ms ease;
}

.grafixyy-million-billion__counter-kicker {
	margin: 0 0 3px;

	color:
		rgba(223, 255, 63, 0.65);

	font:
		800 9px/1.4 monospace;

	letter-spacing:
		0.15em;
}

.grafixyy-million-billion__counter {
	margin: 0;

	color:
		var(--mb-acid);

	font-family:
		"Alexandria",
		Arial,
		sans-serif;

	font-size:
		clamp(32px, 5.5vw, 64px);

	font-weight: 900;
	line-height: 1.12;

	letter-spacing:
		-0.045em;

	text-align: center;
	white-space: nowrap;

	direction: ltr;

	font-variant-numeric:
		tabular-nums;

	text-shadow:
		0 0 28px rgba(223, 255, 63, 0.15);
}

.grafixyy-million-billion__counter-label {
	margin: 5px 0 0;

	color:
		var(--mb-white);

	font-size: 12px;
	font-weight: 700;
}


/* =========================================================
   CAMERA / VIEWPORT
   ========================================================= */

.grafixyy-million-billion__viewport {
	position: relative;

	width: 100%;
	height:
		clamp(330px, 46vw, 470px);

	margin: 0 auto;

	overflow: hidden;

	border:
		1px solid rgba(223, 255, 63, 0.28);

	border-radius: 18px;

	background:
		radial-gradient(
			circle at 50% 45%,
			rgba(223, 255, 63, 0.07),
			transparent 40%
		),
		#030503;

	transition:
		border-color 250ms ease,
		box-shadow 250ms ease,
		background 250ms ease;
}

.grafixyy-million-billion__viewport::after {
	content: "CAM / SCALE";

	position: absolute;
	z-index: 30;

	left: 12px;
	bottom: 9px;

	color:
		rgba(223, 255, 63, 0.55);

	font:
		700 9px/1.4 monospace;

	letter-spacing:
		0.14em;

	direction: ltr;

	pointer-events: none;
}


/* =========================================================
   BILLION CANVAS
   1,000 visual cells rendered on one canvas.
   ========================================================= */

.grafixyy-million-billion__canvas {
	position: absolute;
	z-index: 4;
	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	opacity: 0;

	transition:
		opacity 350ms ease;
}


/* Reveal the billion field while the million shrinks. */

.grafixyy-million-billion__stage[data-scale-state="shrinking"]
.grafixyy-million-billion__canvas {
	opacity: 0.32;
}


/* Once million #1 becomes the first cell. */

.grafixyy-million-billion__stage[data-scale-state="origin-ready"]
.grafixyy-million-billion__canvas,

.grafixyy-million-billion__stage[data-scale-state="filling"]
.grafixyy-million-billion__canvas,

.grafixyy-million-billion__stage[data-scale-state="complete"]
.grafixyy-million-billion__canvas {
	opacity: 1;
}

/* =========================================================
   ORIGINAL MILLION BLOCK
   ========================================================= */

.grafixyy-million-billion__million-block {
	position: absolute;
	z-index: 10;

	top: 50%;
	left: 50%;

	width:
		min(84%, 640px);

	height: auto;

	padding:
		clamp(28px, 5vw, 48px)
		18px;

	border:
		2px solid var(--mb-acid);

	border-radius: 18px;

	background:
		linear-gradient(
			145deg,
			rgba(223, 255, 63, 0.19),
			rgba(223, 255, 63, 0.035)
		),
		#090d08;

	text-align: center;

	transform:
		translate(-50%, -50%)
		scale(1);

	transform-origin: center;

	opacity: 1;

	box-shadow:
		0 0 0 1px
			rgba(223, 255, 63, 0.10),
		0 0 65px
			rgba(223, 255, 63, 0.17);

	transition:
		top 1150ms
			cubic-bezier(
				0.2,
				0.8,
				0.2,
				1
			),
		left 1150ms
			cubic-bezier(
				0.2,
				0.8,
				0.2,
				1
			),
		width 1150ms
			cubic-bezier(
				0.2,
				0.8,
				0.2,
				1
			),
		height 1150ms
			cubic-bezier(
				0.2,
				0.8,
				0.2,
				1
			),
		padding 1150ms
			cubic-bezier(
				0.2,
				0.8,
				0.2,
				1
			),
		transform 1150ms
			cubic-bezier(
				0.2,
				0.8,
				0.2,
				1
			),
		box-shadow 400ms ease,
		opacity 180ms ease;
}

.grafixyy-million-billion__million-tag {
	display: inline-block;

	margin-bottom: 10px;
	padding: 5px 8px;

	background:
		var(--mb-acid);

	color:
		var(--mb-ink);

	font:
		900 9px/1.3 monospace;

	letter-spacing:
		0.08em;

	direction: ltr;

	transition:
		opacity 250ms ease;
}

.grafixyy-million-billion__million-number {
	display: block;

	width: 100%;
	max-width: 100%;

	margin:
		12px auto 4px;

	overflow: hidden;

	color:
		var(--mb-acid);

	font-family:
		"Alexandria",
		Arial,
		sans-serif;

	font-size:
		clamp(46px, 8vw, 94px);

	font-weight: 900;
	line-height: 1.08;

	letter-spacing:
		-0.045em;

	text-align: center;

	white-space: nowrap;

	direction: ltr;

	font-variant-numeric:
		tabular-nums;

	text-shadow:
		0 0 42px
			rgba(223, 255, 63, 0.13);

	transition:
		opacity 250ms ease;
}

.grafixyy-million-billion__million-caption {
	margin:
		8px 0 0;

	color:
		var(--mb-white);

	font-size: 15px;
	font-weight: 700;

	transition:
		opacity 250ms ease;
}

.grafixyy-million-billion__million-block[hidden] {
	display: none !important;
}


/* =========================================================
   MILLION → CELL #1
   ========================================================= */

.grafixyy-million-billion__stage[data-scale-state="shrinking"]
.grafixyy-million-billion__thousand-grid {
	opacity: 0.35;

	transform: scale(1);
}

.grafixyy-million-billion__stage[data-scale-state="shrinking"]
.grafixyy-million-billion__million-block {
	top: 18px;

	left:
		calc(100% - 18px);

	width: 20px;
	height: 14px;

	padding: 0;

	border-radius: 2px;

	transform:
		translate(-100%, 0)
		scale(0.72);

	box-shadow:
		0 0 0 3px
			rgba(223, 255, 63, 0.14),
		0 0 25px
			rgba(223, 255, 63, 0.80);
}

.grafixyy-million-billion__stage[data-scale-state="shrinking"]
.grafixyy-million-billion__million-tag,

.grafixyy-million-billion__stage[data-scale-state="shrinking"]
.grafixyy-million-billion__million-number,

.grafixyy-million-billion__stage[data-scale-state="shrinking"]
.grafixyy-million-billion__million-caption {
	opacity: 0;
}


/* =========================================================
   GRID VISIBLE STATES
   ========================================================= */

.grafixyy-million-billion__stage[data-scale-state="origin-ready"]
.grafixyy-million-billion__thousand-grid,

.grafixyy-million-billion__stage[data-scale-state="filling"]
.grafixyy-million-billion__thousand-grid,

.grafixyy-million-billion__stage[data-scale-state="complete"]
.grafixyy-million-billion__thousand-grid {
	opacity: 1;

	transform: scale(1);
}


/* =========================================================
   STAGE COPY
   ========================================================= */

.grafixyy-million-billion__stage-copy {
	width: 100%;

	margin-top: 22px;
}

.grafixyy-million-billion__stage-copy h2 {
	margin: 0;

	color:
		var(--mb-white);

	font-size:
		clamp(27px, 3.5vw, 40px);

	font-weight: 850;
	line-height: 1.35;
}

.grafixyy-million-billion__stage-copy p {
	margin:
		5px 0 0;

	color:
		var(--mb-muted);

	font-size:
		clamp(14px, 1.6vw, 17px);

	line-height: 1.7;
}

.grafixyy-million-billion__billion-trigger {
	max-width: 480px;

	margin:
		24px auto 0;
}


/* =========================================================
   FILLING STATE
   ========================================================= */

.grafixyy-million-billion__stage[data-scale-state="filling"]
.grafixyy-million-billion__viewport {
	box-shadow:
		inset 0 0 80px
			rgba(223, 255, 63, 0.035),
		0 0 35px
			rgba(223, 255, 63, 0.04);
}


/* =========================================================
   BILLION COMPLETE
   ========================================================= */

.grafixyy-million-billion__stage[data-scale-state="complete"]
.grafixyy-million-billion__viewport {
	border-color:
		rgba(223, 255, 63, 0.75);

	box-shadow:
		inset 0 0 90px
			rgba(223, 255, 63, 0.07),
		0 0 40px
			rgba(223, 255, 63, 0.10);
}

.grafixyy-million-billion__stage[data-scale-state="complete"]
.grafixyy-million-billion__counter-zone {
	border-color:
		rgba(223, 255, 63, 0.75);

	background:
		linear-gradient(
			135deg,
			rgba(223, 255, 63, 0.13),
			rgba(4, 7, 4, 0.92)
		);

	box-shadow:
		0 0 35px
			rgba(223, 255, 63, 0.08);
}

.grafixyy-million-billion__stage[data-scale-state="complete"]
.grafixyy-million-billion__counter {
	color: #ffffff;

	text-shadow:
		0 0 10px
			rgba(255, 255, 255, 0.16),
		0 0 35px
			rgba(223, 255, 63, 0.42);
}


/* Completion pulse */

@keyframes grafixyy-billion-complete-pulse {
	0% {
		box-shadow:
			inset 0 0 0
				rgba(223, 255, 63, 0),
			0 0 0
				rgba(223, 255, 63, 0);
	}

	45% {
		box-shadow:
			inset 0 0 90px
				rgba(223, 255, 63, 0.16),
			0 0 55px
				rgba(223, 255, 63, 0.28);
	}

	100% {
		box-shadow:
			inset 0 0 90px
				rgba(223, 255, 63, 0.07),
			0 0 40px
				rgba(223, 255, 63, 0.10);
	}
}

.grafixyy-million-billion__stage[data-scale-state="complete"]
.grafixyy-million-billion__viewport {
	animation:
		grafixyy-billion-complete-pulse
		850ms ease-out
		1;
}


/* =========================================================
   FINAL RESULT
   ========================================================= */

.grafixyy-million-billion__final-reveal {
	width: 100%;

	margin-top: 26px;
	padding:
		clamp(26px, 4vw, 44px);

	border:
		1px solid var(--mb-acid);

	border-radius: 22px;

	background:
		radial-gradient(
			circle at 50% 0%,
			rgba(223, 255, 63, 0.12),
			transparent 42%
		),
		var(--mb-panel-2);

	text-align: center;

	box-shadow:
		0 0 0 1px
			rgba(223, 255, 63, 0.04),
		0 24px 70px
			rgba(0, 0, 0, 0.28);
}

.grafixyy-million-billion__reaction {
	margin:
		0 0 20px;

	color:
		var(--mb-acid);

	font-size:
		clamp(16px, 2vw, 20px);

	font-weight: 750;
	line-height: 1.7;
}

.grafixyy-million-billion__final-reveal > p:not(
	.grafixyy-million-billion__reaction
) {
	margin:
		14px 0;

	color:
		var(--mb-muted);

	font-size:
		clamp(15px, 2vw, 19px);

	line-height: 1.7;
}

.grafixyy-million-billion__final-reveal strong {
	display: block;

	margin:
		10px 0 20px;

	color:
		var(--mb-white);

	font-size:
		clamp(28px, 4vw, 50px);

	font-weight: 900;
	line-height: 1.35;
}

.grafixyy-million-billion__final-reveal p:last-child {
	direction: ltr;

	color:
		var(--mb-acid);

	font-family:
		monospace;

	font-weight: 800;

	font-variant-numeric:
		tabular-nums;
}


/* =========================================================
   MOBILE
   25 × 40 = 1,000
   ========================================================= */

@media (max-width: 700px) {
	.grafixyy-million-billion {
		width:
			calc(100% - 20px);

		margin:
			28px auto 60px;
	}

	.grafixyy-million-billion__inner {
		padding:
			42px 16px 22px;

		border-radius: 22px;
	}

	.grafixyy-million-billion__inner::before {
		top: 15px;
		left: 16px;

		font-size: 9px;
	}

	.grafixyy-million-billion__eyebrow {
		margin-bottom: 14px;

		font-size: 12px;
	}

	.grafixyy-million-billion__title {
		max-width: 100%;

		font-size:
			clamp(31px, 8.5vw, 40px);

		line-height: 1.4;

		letter-spacing:
			-0.015em;
	}

	.grafixyy-million-billion__intro {
		margin-top: 14px;

		font-size: 15px;
		line-height: 1.85;
	}

	.grafixyy-million-billion__challenge {
		margin-top: 30px;

		padding:
			24px 14px 16px;
	}

	.grafixyy-million-billion__question {
		font-size: 19px;
		line-height: 1.7;
	}

	.grafixyy-million-billion__choices {
		gap: 7px;

		margin-top: 17px;
	}

	.grafixyy-million-billion__choices button {
		min-width: 0;
		min-height: 54px;

		padding: 7px 4px;

		font-size: 17px;
	}

	.grafixyy-million-billion__reveal,
	.grafixyy-million-billion__billion-trigger {
		min-height: 56px;

		font-size: 15px;
	}

	.grafixyy-million-billion__stage {
		padding:
			22px 12px 26px;
	}

	.grafixyy-million-billion__stage-head {
		gap: 7px;
	}

	.grafixyy-million-billion__stage-label,
	.grafixyy-million-billion__stage-status {
		padding: 4px 6px;

		font-size: 8px;
	}

	.grafixyy-million-billion__counter-zone {
		margin-top: 4px;

		padding:
			12px 8px;
	}

	.grafixyy-million-billion__counter {
		font-size:
			clamp(29px, 9.2vw, 43px);

		letter-spacing:
			-0.055em;
	}

	.grafixyy-million-billion__viewport {
		height: 430px;
	}

	.grafixyy-million-billion__thousand-grid {
		inset: 12px;

		grid-template-columns:
			repeat(25, minmax(0, 1fr));

		grid-template-rows:
			repeat(40, minmax(0, 1fr));

		gap: 1.5px;
	}

	.grafixyy-million-billion__million-block {
		width: 88%;

		padding:
			30px 10px;
	}

	.grafixyy-million-billion__million-number {
		font-size:
			clamp(37px, 11.5vw, 55px);

		letter-spacing:
			-0.055em;
	}

	.grafixyy-million-billion__stage[data-scale-state="shrinking"]
	.grafixyy-million-billion__million-block {
		top: 13px;

		left:
			calc(100% - 13px);

		width: 13px;
		height: 9px;

		transform:
			translate(-100%, 0)
			scale(0.75);
	}

	.grafixyy-million-billion__stage-copy {
		margin-top: 18px;
	}

	.grafixyy-million-billion__stage-copy h2 {
		font-size: 27px;
	}

	.grafixyy-million-billion__final-reveal {
		padding:
			26px 16px;
	}

	.grafixyy-million-billion__final-reveal strong {
		font-size: 29px;
	}
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {
	.grafixyy-million-billion__title {
		font-size: 29px;
	}

	.grafixyy-million-billion__choices button {
		font-size: 15px;
	}

	.grafixyy-million-billion__counter {
		font-size: 28px;
	}

	.grafixyy-million-billion__viewport {
		height: 400px;
	}

	.grafixyy-million-billion__thousand-grid {
		inset: 10px;

		gap: 1px;
	}
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.grafixyy-million-billion *,
	.grafixyy-million-billion *::before,
	.grafixyy-million-billion *::after {
		scroll-behavior:
			auto !important;

		transition-duration:
			0.01ms !important;

		animation-duration:
			0.01ms !important;

		animation-iteration-count:
			1 !important;
	}
}

/* =========================================================
   FINAL WOW CANVAS VISIBILITY
   Keep Canvas visible through all final reveal states.
   ========================================================= */

.grafixyy-million-billion__stage[data-scale-state="wow-hold"]
.grafixyy-million-billion__canvas,

.grafixyy-million-billion__stage[data-scale-state="wow-origin"]
.grafixyy-million-billion__canvas,

.grafixyy-million-billion__stage[data-scale-state="wow-refill"]
.grafixyy-million-billion__canvas {
	opacity: 1;
}


/*
 * Darken the camera slightly while isolating
 * the original first million.
 */

.grafixyy-million-billion__stage[data-scale-state="wow-origin"]
.grafixyy-million-billion__viewport {
	background:
		radial-gradient(
			circle at 88% 8%,
			rgba(223, 255, 63, 0.08),
			transparent 24%
		),
		#020302;

	border-color:
		rgba(223, 255, 63, 0.34);
}


/*
 * Rebuilding phase:
 * give the whole camera a little more energy,
 * while the actual travelling wave remains Canvas-driven.
 */

.grafixyy-million-billion__stage[data-scale-state="wow-refill"]
.grafixyy-million-billion__viewport {
	border-color:
		rgba(223, 255, 63, 0.58);

	box-shadow:
		inset 0 0 70px
			rgba(223, 255, 63, 0.045),
		0 0 34px
			rgba(223, 255, 63, 0.07);
}

/* =========================================================
   BILLION UNLOCKED — FINAL PAYOFF
   ========================================================= */

/*
 * One controlled energy pulse behind the viewport.
 */

.grafixyy-million-billion__viewport::before {
	content: "";

	position: absolute;
	z-index: 2;

	top: 50%;
	left: 50%;

	width: 120px;
	height: 120px;

	border-radius: 50%;

	pointer-events: none;

	opacity: 0;

	transform:
		translate(-50%, -50%)
		scale(0.2);

	background:
		radial-gradient(
			circle,
			rgba(255, 255, 255, 0.52) 0%,
			rgba(223, 255, 63, 0.28) 22%,
			rgba(223, 255, 63, 0.08) 48%,
			transparent 72%
		);
}

@keyframes grafixyy-billion-energy-burst {
	0% {
		opacity: 0;

		transform:
			translate(-50%, -50%)
			scale(0.2);
	}

	16% {
		opacity: 1;
	}

	55% {
		opacity: 0.62;
	}

	100% {
		opacity: 0;

		transform:
			translate(-50%, -50%)
			scale(8);
	}
}

.grafixyy-million-billion__stage[data-scale-state="complete"]
.grafixyy-million-billion__viewport::before {
	animation:
		grafixyy-billion-energy-burst
		1050ms
		cubic-bezier(0.16, 1, 0.3, 1)
		1;
}


/* =========================================================
   COUNTER HIT
   ========================================================= */

@keyframes grafixyy-billion-counter-hit {
	0% {
		transform: scale(1);
		filter: brightness(1);
	}

	28% {
		transform: scale(1.075);
		filter: brightness(1.45);
	}

	58% {
		transform: scale(0.985);
	}

	100% {
		transform: scale(1);
		filter: brightness(1);
	}
}

.grafixyy-million-billion__stage[data-scale-state="complete"]
.grafixyy-million-billion__counter {
	color: #ffffff;

	animation:
		grafixyy-billion-counter-hit
		720ms
		cubic-bezier(0.2, 0.8, 0.2, 1)
		1;

	text-shadow:
		0 0 8px rgba(255, 255, 255, 0.35),
		0 0 20px rgba(223, 255, 63, 0.40),
		0 0 45px rgba(223, 255, 63, 0.28);
}


/*
 * Counter panel reacts once as well.
 */

@keyframes grafixyy-billion-counter-panel {
	0% {
		box-shadow:
			0 0 0 rgba(223, 255, 63, 0);
	}

	40% {
		box-shadow:
			0 0 55px rgba(223, 255, 63, 0.20);
	}

	100% {
		box-shadow:
			0 0 35px rgba(223, 255, 63, 0.08);
	}
}

.grafixyy-million-billion__stage[data-scale-state="complete"]
.grafixyy-million-billion__counter-zone {
	animation:
		grafixyy-billion-counter-panel
		900ms ease-out 1;
}


/* =========================================================
   BILLION UNLOCKED STAMP
   ========================================================= */

.grafixyy-million-billion__stage-status {
	transition:
		color 200ms ease,
		background 200ms ease,
		border-color 200ms ease,
		box-shadow 200ms ease,
		transform 200ms ease;
}

@keyframes grafixyy-billion-stamp {
	0% {
		opacity: 0;
		transform:
			scale(1.5)
			rotate(-4deg);
	}

	55% {
		opacity: 1;
		transform:
			scale(0.96)
			rotate(1deg);
	}

	100% {
		opacity: 1;
		transform:
			scale(1)
			rotate(0);
	}
}

.grafixyy-million-billion__stage[data-scale-state="complete"]
.grafixyy-million-billion__stage-status {
	border-color: var(--mb-acid);

	background: var(--mb-acid);

	color: var(--mb-ink);
		box-shadow:
		0 0 24px rgba(223, 255, 63, 0.24);

	animation:
		grafixyy-billion-stamp
		620ms
		cubic-bezier(0.16, 1, 0.3, 1)
		1;
}


/* =========================================================
   COMPLETE GRID FRAME
   ========================================================= */

@keyframes grafixyy-billion-frame-hit {
	0% {
		border-color:
			rgba(223, 255, 63, 0.55);
	}

	35% {
		border-color:
			rgba(255, 255, 255, 0.92);

		box-shadow:
			inset 0 0 100px
				rgba(223, 255, 63, 0.14),
			0 0 58px
				rgba(223, 255, 63, 0.22);
	}

	100% {
		border-color:
			rgba(223, 255, 63, 0.75);

		box-shadow:
			inset 0 0 90px
				rgba(223, 255, 63, 0.07),
			0 0 40px
				rgba(223, 255, 63, 0.10);
	}
}

.grafixyy-million-billion__stage[data-scale-state="complete"]
.grafixyy-million-billion__viewport {
	animation:
		grafixyy-billion-frame-hit
		1000ms ease-out 1;
}


/* =========================================================
   FINAL COPY
   ========================================================= */

.grafixyy-million-billion__stage[data-scale-state="complete"]
.grafixyy-million-billion__stage-copy h2 {
	color: var(--mb-acid);
}

.grafixyy-million-billion__stage[data-scale-state="complete"]
.grafixyy-million-billion__stage-copy h2::after {
	content: " ✦";

	color: #ffffff;
}


/* =========================================================
   MOBILE
   Keep payoff strong but controlled.
   ========================================================= */

@media (max-width: 700px) {
	.grafixyy-million-billion__stage[data-scale-state="complete"]
	.grafixyy-million-billion__stage-status {
		font-size: 8px;

		letter-spacing: 0.04em;
	}

	.grafixyy-million-billion__stage[data-scale-state="complete"]
	.grafixyy-million-billion__counter {
		font-size:
			clamp(29px, 9vw, 42px);
	}
}


/* =========================================================
   REDUCED MOTION
   Final information remains, spectacle disappears.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.grafixyy-million-billion__stage[data-scale-state="complete"]
	.grafixyy-million-billion__viewport::before,

	.grafixyy-million-billion__stage[data-scale-state="complete"]
	.grafixyy-million-billion__counter,

	.grafixyy-million-billion__stage[data-scale-state="complete"]
	.grafixyy-million-billion__counter-zone,

	.grafixyy-million-billion__stage[data-scale-state="complete"]
	.grafixyy-million-billion__stage-status,

	.grafixyy-million-billion__stage[data-scale-state="complete"]
	.grafixyy-million-billion__viewport {
		animation: none !important;
	}
}

/* =========================================================
   SCALE TEST / 002
   TIME SHOCK
   ========================================================= */

.grafixyy-million-billion__time {
	position: relative;
	width: 100%;
	margin-top: 32px;
	padding: clamp(24px, 4vw, 42px);
	overflow: hidden;

	border: 1px solid rgba(255, 174, 63, 0.24);
	border-radius: 22px;

	background:
		radial-gradient(
			circle at 85% 0%,
			rgba(255, 157, 46, 0.13),
			transparent 34%
		),
		linear-gradient(
			145deg,
			#121008 0%,
			#080906 65%,
			#050704 100%
		);

	box-shadow:
		0 25px 70px rgba(0, 0, 0, 0.20);
}

.grafixyy-million-billion__time[hidden],
.grafixyy-million-billion__time-result[hidden] {
	display: none !important;
}

.grafixyy-million-billion__time::before {
	content: "";

	position: absolute;
	inset: 0;

	pointer-events: none;

	opacity: 0.23;

	background:
		linear-gradient(
			rgba(255, 178, 71, 0.05) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255, 178, 71, 0.05) 1px,
			transparent 1px
		);

	background-size:
		42px 42px;
}

.grafixyy-million-billion__time::after {
	content: "TIME CHAMBER";

	position: absolute;
	top: 16px;
	left: 18px;

	color: rgba(255, 177, 69, 0.50);

	font: 700 9px/1.4 monospace;
	letter-spacing: 0.16em;

	direction: ltr;
}

.grafixyy-million-billion__time-intro,
.grafixyy-million-billion__time-result {
	position: relative;
	z-index: 2;
}


/* =========================================================
   TIME INTRO
   ========================================================= */

.grafixyy-million-billion__time-kicker {
	display: inline-block;

	margin: 0 0 13px;
	padding: 5px 9px;

	border:
		1px solid rgba(255, 177, 69, 0.40);

	background:
		rgba(255, 156, 47, 0.07);

	color: #ffb145;

	font:
		800 10px/1.4 monospace;

	letter-spacing: 0.12em;

	direction: ltr;
}

.grafixyy-million-billion__time-intro h2 {
	max-width: 720px;

	margin: 0;

	color: var(--mb-white);

	font-size:
		clamp(28px, 4vw, 46px);

	font-weight: 850;
	line-height: 1.35;
}

.grafixyy-million-billion__time-intro > p:not(
	.grafixyy-million-billion__time-kicker
) {
	max-width: 680px;

	margin: 12px 0 0;

	color: var(--mb-muted);

	font-size: 16px;
	line-height: 1.9;
}


/* =========================================================
   TIME BUTTON
   ========================================================= */

.grafixyy-million-billion__time-trigger {
	display: block;

	width:
		min(100%, 460px);

	min-height: 55px;

	margin-top: 22px;
	padding: 10px 18px;

	border:
		1px solid #ffb145 !important;

	border-radius: 13px;

	background:
		#ffb145 !important;

	color:
		#120d05 !important;

	-webkit-text-fill-color:
		#120d05;

	font-family:
		"Alexandria",
		Arial,
		sans-serif;

	font-size: 16px;
	font-weight: 850;

	cursor: pointer;

	text-shadow: none !important;

	box-shadow:
		0 12px 35px rgba(255, 156, 47, 0.10);

	transition:
		transform 160ms ease,
		box-shadow 160ms ease,
		background 160ms ease;
}

.grafixyy-million-billion__time-trigger:not(:disabled):hover {
	transform:
		translateY(-2px);

	background:
		#ffc368 !important;

	box-shadow:
		0 15px 38px rgba(255, 156, 47, 0.17);
}

.grafixyy-million-billion__time-trigger:disabled {
	opacity: 0.68;

	cursor: default;
}

.grafixyy-million-billion__time-trigger:focus-visible {
	outline:
		3px solid #ffffff;

	outline-offset: 4px;
}


/* =========================================================
   RESULTS
   ========================================================= */

.grafixyy-million-billion__time-result {
	margin-top: 30px;
}

.grafixyy-million-billion__time-lanes {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 14px;
}


/* =========================================================
   TIME CARD
   ========================================================= */

.grafixyy-million-billion__time-lane {
	position: relative;

	min-width: 0;
	min-height: 270px;

	padding: 24px;

	overflow: hidden;

	border:
		1px solid rgba(255, 255, 255, 0.10);

	border-radius: 18px;

	background:
		rgba(3, 5, 3, 0.72);
}

.grafixyy-million-billion__time-lane::before {
	content: "";

	position: absolute;
	top: 0;
	right: 0;
	left: 0;

	height: 3px;
}

.grafixyy-million-billion__time-lane--million::before {
	background:
		var(--mb-acid);

	box-shadow:
		0 0 18px rgba(223, 255, 63, 0.32);
}

.grafixyy-million-billion__time-lane--billion::before {
	background:
		#ff9d2e;

	box-shadow:
		0 0 18px rgba(255, 157, 46, 0.32);
}


/* =========================================================
   RAW SECOND NUMBERS
   ========================================================= */

.grafixyy-million-billion__time-number {
	margin: 0;

	color:
		var(--mb-white);

	font-family:
		"Alexandria",
		Arial,
		sans-serif;

	font-size:
		clamp(25px, 3.2vw, 39px);

	font-weight: 900;
	line-height: 1.2;

	letter-spacing:
		-0.035em;

	direction: ltr;
	text-align: right;

	white-space: nowrap;

	font-variant-numeric:
		tabular-nums;
}

.grafixyy-million-billion__time-lane--million
.grafixyy-million-billion__time-number {
	color:
		var(--mb-acid);
}

.grafixyy-million-billion__time-lane--billion
.grafixyy-million-billion__time-number {
	color:
		#ffb145;
}

.grafixyy-million-billion__time-unit {
	margin:
		5px 0 22px;

	color:
		var(--mb-muted);

	font-size: 13px;
	font-weight: 700;
}


/* =========================================================
   TRACK
   Decorative timeline base only.
   It does NOT encode the million/billion ratio.
   ========================================================= */

.grafixyy-million-billion__time-track {
	position: relative;

	height: 48px;

	margin:
		4px 0 21px;

	overflow: hidden;

	border:
		1px solid rgba(255, 255, 255, 0.08);

	border-radius: 10px;

	background:
		repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.025) 0,
			rgba(255, 255, 255, 0.025) 1px,
			transparent 1px,
			transparent 32px
		),
		rgba(255, 255, 255, 0.025);
}

.grafixyy-million-billion__time-track::before {
	content: "";

	position: absolute;

	right: 12px;
	left: 12px;
	top: 50%;

	height: 2px;

	transform:
		translateY(-50%);

	background:
		rgba(255, 255, 255, 0.10);
}


/*
 * Marker only.
 * Width intentionally does NOT represent
 * the ratio between one million and one billion.
 */

.grafixyy-million-billion__time-track span {
	position: absolute;

	top: 50%;
	right: 13px;

	width: 12px;
	height: 12px;

	border-radius: 50%;

	transform:
		translateY(-50%);

	box-shadow:
		0 0 18px currentColor;
}

.grafixyy-million-billion__time-lane--million
.grafixyy-million-billion__time-track span {
	color: var(--mb-acid);

	background:
		var(--mb-acid);
}

.grafixyy-million-billion__time-lane--billion
.grafixyy-million-billion__time-track span {
	color: #ff9d2e;

	background:
		#ff9d2e;
}


/* =========================================================
   HUMAN TIME RESULT
   ========================================================= */

.grafixyy-million-billion__time-lane > strong {
	display: block;

	margin-top: auto;

	color:
		var(--mb-white);

	font-size:
		clamp(23px, 3vw, 34px);

	font-weight: 900;
	line-height: 1.4;
}

.grafixyy-million-billion__time-lane--million > strong {
	color:
		var(--mb-acid);
}

.grafixyy-million-billion__time-lane--billion > strong {
	color:
		#ffb145;
}

.grafixyy-million-billion__time-lane > p:last-child {
	margin:
		7px 0 0;

	color:
		var(--mb-muted);

	font-size: 14px;
	line-height: 1.6;
}


/* =========================================================
   PUNCHLINE
   ========================================================= */

.grafixyy-million-billion__time-punch {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 12px;

	margin-top: 16px;
}

.grafixyy-million-billion__time-punch p {
	margin: 0;
	padding: 18px;

	border:
		1px solid rgba(255, 255, 255, 0.09);

	border-radius: 15px;

	background:
		rgba(255, 255, 255, 0.035);

	color:
		var(--mb-muted);

	font-size: 15px;
	line-height: 1.7;
}

.grafixyy-million-billion__time-punch p:first-child {
	border-color:
		rgba(223, 255, 63, 0.18);
}

.grafixyy-million-billion__time-punch p:last-child {
	border-color:
		rgba(255, 157, 46, 0.20);
}

.grafixyy-million-billion__time-punch strong {
	display: block;

	margin-top: 3px;

	color:
		var(--mb-white);

	font-size:
		clamp(28px, 4vw, 45px);

	font-weight: 900;
	line-height: 1.25;
}

.grafixyy-million-billion__time-punch p:first-child strong {
	color:
		var(--mb-acid);
}

.grafixyy-million-billion__time-punch p:last-child strong {
	color:
		#ffb145;
}


/* =========================================================
   ENTRANCE
   ========================================================= */

@keyframes grafixyy-time-chamber-enter {
	from {
		opacity: 0;

		transform:
			translateY(18px);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}
}

.grafixyy-million-billion__time:not([hidden]) {
	animation:
		grafixyy-time-chamber-enter
		500ms ease-out both;
}


@keyframes grafixyy-time-result-enter {
	from {
		opacity: 0;

		transform:
			translateY(14px);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}
}

.grafixyy-million-billion__time-result:not([hidden]) {
	animation:
		grafixyy-time-result-enter
		450ms ease-out both;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
	.grafixyy-million-billion__time {
		margin-top: 24px;

		padding:
			38px 15px 24px;
	}

	.grafixyy-million-billion__time::after {
		top: 13px;
		left: 14px;

		font-size: 8px;
	}

	.grafixyy-million-billion__time-intro h2 {
		font-size: 29px;
	}

	.grafixyy-million-billion__time-intro > p:not(
		.grafixyy-million-billion__time-kicker
	) {
		font-size: 15px;
	}

	.grafixyy-million-billion__time-trigger {
		width: 100%;

		min-height: 56px;

		font-size: 15px;
	}

	.grafixyy-million-billion__time-lanes,
	.grafixyy-million-billion__time-punch {
		grid-template-columns:
			1fr;
	}

	.grafixyy-million-billion__time-lane {
		min-height: 240px;

		padding:
			20px 15px;
	}

	.grafixyy-million-billion__time-number {
		font-size:
			clamp(25px, 8vw, 36px);
	}

	.grafixyy-million-billion__time-lane > strong {
		font-size: 26px;
	}

	.grafixyy-million-billion__time-punch strong {
		font-size: 31px;
	}
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.grafixyy-million-billion__time:not([hidden]),
	.grafixyy-million-billion__time-result:not([hidden]) {
		animation: none !important;
	}
}

/* =========================================================
   TIME RACE — CLARITY & PAYOFF
   ========================================================= */

.grafixyy-million-billion__time-race-status {
	margin: 0 0 15px;
	padding: 11px 14px;

	border: 1px solid rgba(255, 177, 69, 0.18);
	border-radius: 11px;

	background: rgba(255, 177, 69, 0.045);

	color: var(--mb-white);

	font-size: 13px;
	font-weight: 700;
	line-height: 1.7;

	text-align: center;
}


/*
 * Explicitly tell the user that each lane has
 * its own compressed presentation scale.
 */

.grafixyy-million-billion__time-lanes::before {
	content: "كل مسار مضغوط بمقياسه الزمني — قارن النتيجة، لا طول الخط";

	grid-column: 1 / -1;

	display: block;

	margin-bottom: -2px;
	padding: 7px 10px;

	border-radius: 8px;

	background: rgba(255, 255, 255, 0.035);

	color: #92988c;

	font-size: 10px;
	font-weight: 650;
	line-height: 1.6;

	text-align: center;
}


/* Live clock */

.grafixyy-million-billion__time-live {
	margin-bottom: 12px;
	padding: 12px 13px;

	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;

	background: rgba(0, 0, 0, 0.23);
}

.grafixyy-million-billion__time-live-label {
	display: block;

	margin-bottom: 4px;

	color: var(--mb-muted);

	font-size: 10px;
	font-weight: 700;
}

.grafixyy-million-billion__time-live-value {
	display: block;

	color: var(--mb-white);

	font-size: clamp(21px, 2.5vw, 30px);
	font-weight: 900;
	line-height: 1.3;

	font-variant-numeric: tabular-nums;
}


/* Million clock identity */

.grafixyy-million-billion__time-lane--million
.grafixyy-million-billion__time-live-value {
	color: var(--mb-acid);
}


/* Billion clock identity */

.grafixyy-million-billion__time-lane--billion
.grafixyy-million-billion__time-live-value {
	color: #ffb145;
}


/* Moving markers */

.grafixyy-million-billion__time-track span {
	transition:
		box-shadow 180ms ease,
		transform 180ms ease;
}


/* Million finishes while billion continues */

@keyframes grafixyy-million-time-stop {
	0% {
		box-shadow:
			0 0 0 rgba(223, 255, 63, 0);
	}

	45% {
		box-shadow:
			0 0 0 5px rgba(223, 255, 63, 0.08),
			0 0 30px rgba(223, 255, 63, 0.13);
	}

	100% {
		box-shadow:
			0 0 0 2px rgba(223, 255, 63, 0.04);
	}
}

.grafixyy-million-billion__time-lane--million[data-race-state="finished"] {
	border-color:
		rgba(223, 255, 63, 0.45);

	animation:
		grafixyy-million-time-stop
		650ms ease-out 1;
}

.grafixyy-million-billion__time-lane--million[data-race-state="finished"]
.grafixyy-million-billion__time-live::after {
	content: "✓ وقف هنا";

	display: inline-block;

	margin-top: 7px;
	padding: 3px 7px;

	border-radius: 999px;

	background:
		rgba(223, 255, 63, 0.09);

	color:
		var(--mb-acid);

	font-size: 9px;
	font-weight: 800;
}


/* Billion is still moving */

.grafixyy-million-billion__time-lane--billion[data-race-state="running"]
.grafixyy-million-billion__time-live {
	border-color:
		rgba(255, 177, 69, 0.22);
}


/* Final billion hit */

@keyframes grafixyy-billion-time-arrival {
	0% {
		box-shadow:
			0 0 0 rgba(255, 157, 46, 0);
	}

	45% {
		box-shadow:
			0 0 0 5px rgba(255, 157, 46, 0.08),
			0 0 34px rgba(255, 157, 46, 0.15);
	}

	100% {
		box-shadow:
			0 0 0 2px rgba(255, 157, 46, 0.04);
	}
}

.grafixyy-million-billion__time-lane--billion[data-race-state="finished"] {
	border-color:
		rgba(255, 177, 69, 0.46);

	animation:
		grafixyy-billion-time-arrival
		720ms ease-out 1;
}

.grafixyy-million-billion__time-lane--billion[data-race-state="finished"]
.grafixyy-million-billion__time-live::after {
	content: "✓ وصل بعد أكثر من 31 سنة";

	display: inline-block;

	margin-top: 7px;
	padding: 3px 7px;

	border-radius: 999px;

	background:
		rgba(255, 157, 46, 0.09);

	color:
		#ffb145;

	font-size: 9px;
	font-weight: 800;
}


/* Final punch becomes stronger when race completes */

.grafixyy-million-billion[data-time-race="complete"]
.grafixyy-million-billion__time-punch {
	border-radius: 16px;

	box-shadow:
		0 18px 50px rgba(0, 0, 0, 0.16);
}


@media (max-width: 700px) {
	.grafixyy-million-billion__time-lanes::before {
		font-size: 9px;
	}

	.grafixyy-million-billion__time-race-status {
		font-size: 12px;
	}

	.grafixyy-million-billion__time-live-value {
		font-size: 23px;
	}
}


@media (prefers-reduced-motion: reduce) {
	.grafixyy-million-billion__time-lane--million[data-race-state="finished"],
	.grafixyy-million-billion__time-lane--billion[data-race-state="finished"] {
		animation: none !important;
	}
}

/* =========================================================
   SUPPORTING CONTENT / METHODOLOGY
   Quiet trust layer after the interactive experience.
   ========================================================= */

.grafixyy-million-billion__content {
	position: relative;
	width: 100%;
	margin-top: 32px;
	padding: clamp(24px, 4vw, 40px);

	border:
		1px solid rgba(255, 255, 255, 0.09);

	border-radius: 22px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.035),
			rgba(255, 255, 255, 0.012)
		),
		#080b08;
}

.grafixyy-million-billion__content[hidden] {
	display: none !important;
}


/* =========================================================
   CONTENT HEADER
   ========================================================= */

.grafixyy-million-billion__content-head {
	max-width: 760px;

	margin-bottom: 26px;
}

.grafixyy-million-billion__content-kicker {
	margin: 0 0 9px;

	color:
		var(--mb-acid);

	font-size: 12px;
	font-weight: 800;
}

.grafixyy-million-billion__content-head h2 {
	margin: 0;

	color:
		var(--mb-white);

	font-size:
		clamp(27px, 3.5vw, 42px);

	font-weight: 850;
	line-height: 1.4;
}

.grafixyy-million-billion__content-head > p:last-child {
	margin:
		12px 0 0;

	color:
		var(--mb-muted);

	font-size: 15px;
	line-height: 1.95;
}


/* =========================================================
   EXPLANATION GRID
   ========================================================= */

.grafixyy-million-billion__content-grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 14px;
}

.grafixyy-million-billion__content-card {
	position: relative;

	min-width: 0;

	padding: 22px;

	border:
		1px solid rgba(255, 255, 255, 0.075);

	border-radius: 17px;

	background:
		rgba(255, 255, 255, 0.022);
}

.grafixyy-million-billion__content-index {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width: 31px;
	height: 25px;

	margin-bottom: 14px;

	border:
		1px solid rgba(223, 255, 63, 0.20);

	border-radius: 7px;

	background:
		rgba(223, 255, 63, 0.055);

	color:
		var(--mb-acid);

	font:
		800 10px/1 monospace;
}

.grafixyy-million-billion__content-card h3 {
	margin:
		0 0 10px;

	color:
		var(--mb-white);

	font-size:
		clamp(18px, 2vw, 23px);

	font-weight: 800;
	line-height: 1.55;
}

.grafixyy-million-billion__content-card p {
	margin:
		9px 0 0;

	color:
		var(--mb-muted);

	font-size: 14px;
	line-height: 1.9;
}

.grafixyy-million-billion__content-card strong {
	color:
		var(--mb-white);

	font-weight: 800;
}


/* =========================================================
   FORMULAS
   ========================================================= */

.grafixyy-million-billion__content-formula {
	display: block;

	width: 100%;

	margin:
		15px 0 !important;

	padding:
		13px 10px;

	overflow-x: auto;

	border:
		1px solid rgba(223, 255, 63, 0.13);

	border-radius: 10px;

	background:
		rgba(0, 0, 0, 0.28);

	color:
		var(--mb-acid) !important;

	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Monaco,
		Consolas,
		monospace;

	font-size:
		clamp(11px, 1.3vw, 14px) !important;

	font-weight: 700;

	line-height: 1.7 !important;

	text-align: center;

	white-space: nowrap;

	font-variant-numeric:
		tabular-nums;
}


/* =========================================================
   METHODOLOGY
   ========================================================= */

.grafixyy-million-billion__methodology {
	margin-top: 16px;
}

.grafixyy-million-billion__methodology details {
	overflow: hidden;

	border:
		1px solid rgba(223, 255, 63, 0.14);

	border-radius: 15px;

	background:
		rgba(223, 255, 63, 0.025);
}

.grafixyy-million-billion__methodology summary {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 14px;

	padding:
		18px 20px;

	list-style: none;

	color:
		var(--mb-white);

	font-size: 17px;
	font-weight: 800;

	cursor: pointer;

	user-select: none;
}

.grafixyy-million-billion__methodology summary::-webkit-details-marker {
	display: none;
}

.grafixyy-million-billion__methodology summary::marker {
	display: none;
}

.grafixyy-million-billion__methodology summary:hover {
	background:
		rgba(223, 255, 63, 0.035);
}

.grafixyy-million-billion__methodology summary:focus-visible {
	outline:
		3px solid #ffffff;

	outline-offset:
		-3px;
}

.grafixyy-million-billion__methodology summary > span:last-child {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	width: 28px;
	height: 28px;

	border:
		1px solid rgba(223, 255, 63, 0.22);

	border-radius: 50%;

	color:
		var(--mb-acid);

	font-size: 18px;
	font-weight: 500;

	transition:
		transform 180ms ease;
}

.grafixyy-million-billion__methodology details[open]
summary > span:last-child {
	transform:
		rotate(45deg);
}

.grafixyy-million-billion__methodology-body {
	padding:
		0 20px 20px;

	border-top:
		1px solid rgba(255, 255, 255, 0.055);

	color:
		var(--mb-muted);
}

.grafixyy-million-billion__methodology-body p {
	margin:
		16px 0 0;

	font-size: 14px;
	line-height: 1.9;
}

.grafixyy-million-billion__methodology-body ul {
	margin:
		15px 0 0;

	padding-right: 21px;

	color:
		var(--mb-muted);
}

.grafixyy-million-billion__methodology-body li {
	margin:
		8px 0;

	padding-right: 4px;

	font-size: 14px;
	line-height: 1.8;
}

.grafixyy-million-billion__methodology-body li::marker {
	color:
		var(--mb-acid);
}


/* =========================================================
   ENTRANCE
   ========================================================= */

@keyframes grafixyy-supporting-content-enter {
	from {
		opacity: 0;

		transform:
			translateY(16px);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}
}

.grafixyy-million-billion__content:not([hidden]) {
	animation:
		grafixyy-supporting-content-enter
		480ms ease-out both;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
	.grafixyy-million-billion__content {
		margin-top: 24px;

		padding:
			23px 15px;
	}

	.grafixyy-million-billion__content-head h2 {
		font-size: 28px;
	}

	.grafixyy-million-billion__content-head > p:last-child {
		font-size: 14px;
	}

	.grafixyy-million-billion__content-grid {
		grid-template-columns:
			1fr;
	}

	.grafixyy-million-billion__content-card {
		padding:
			19px 15px;
	}

	.grafixyy-million-billion__content-card h3 {
		font-size: 19px;
	}

	.grafixyy-million-billion__content-formula {
		font-size:
			11px !important;
	}

	.grafixyy-million-billion__methodology summary {
		padding:
			16px 15px;

		font-size: 15px;
	}

	.grafixyy-million-billion__methodology-body {
		padding:
			0 15px 17px;
	}
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.grafixyy-million-billion__content:not([hidden]),

	.grafixyy-million-billion__methodology
	details[open]
	summary > span:last-child {
		animation: none !important;
		transition: none !important;
	}
}

.grafixyy-million-billion__continue-time {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;

	width: min(100%, 460px);
	min-height: 54px;
	margin-top: 18px;
	padding: 10px 18px;

	border: 1px solid var(--mb-acid) !important;
	border-radius: 13px;

	background: var(--mb-acid) !important;
	color: var(--mb-ink) !important;
	-webkit-text-fill-color: var(--mb-ink);

	font-family: "Alexandria", Arial, sans-serif;
	font-size: 15px;
	font-weight: 850;

	cursor: pointer;
	text-shadow: none !important;

	box-shadow:
		0 10px 30px rgba(223, 255, 63, 0.10);

	transition:
		transform 160ms ease,
		background 160ms ease,
		box-shadow 160ms ease;
}

.grafixyy-million-billion__continue-time:hover {
	background: var(--mb-acid-bright) !important;
	transform: translateY(-2px);
	box-shadow:
		0 14px 36px rgba(223, 255, 63, 0.17);
}

.grafixyy-million-billion__continue-time:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 4px;
}

@media (max-width: 700px) {
	.grafixyy-million-billion__continue-time {
		width: 100%;
		min-height: 56px;
	}
}

/* =========================================================
   SHARE THE SCALE
   ========================================================= */

.grafixyy-million-billion__share {
	position: relative;
	width: 100%;
	margin-top: 18px;
	padding: clamp(22px, 4vw, 38px);
	overflow: hidden;

	border: 1px solid rgba(223, 255, 63, 0.24);
	border-radius: 22px;

	background:
		radial-gradient(
			circle at 15% 10%,
			rgba(223, 255, 63, 0.10),
			transparent 30%
		),
		#080b07;
}

.grafixyy-million-billion__share[hidden],
.grafixyy-million-billion__continue[hidden] {
	display: none !important;
}

.grafixyy-million-billion__share-head {
	max-width: 700px;
	margin-bottom: 22px;
}

.grafixyy-million-billion__share-kicker {
	margin: 0 0 8px;

	color: var(--mb-acid);

	font: 800 10px/1.4 monospace;
	letter-spacing: 0.11em;

	direction: ltr;
}

.grafixyy-million-billion__share-head h2 {
	margin: 0;

	color: var(--mb-white);

	font-size: clamp(25px, 3.5vw, 38px);
	font-weight: 850;
	line-height: 1.4;
}

.grafixyy-million-billion__share-head > p:last-child {
	margin: 9px 0 0;

	color: var(--mb-muted);

	font-size: 14px;
	line-height: 1.8;
}


/* =========================================================
   LIVE CARD PREVIEW
   ========================================================= */

.grafixyy-million-billion__share-preview {
	position: relative;
	max-width: 650px;
	min-height: 560px;
	margin: 0 auto;
	padding: clamp(24px, 5vw, 46px);

	overflow: hidden;

	border: 1px solid rgba(223, 255, 63, 0.35);
	border-radius: 24px;

	background:
		linear-gradient(
			rgba(223, 255, 63, 0.035) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(223, 255, 63, 0.035) 1px,
			transparent 1px
		),
		radial-gradient(
			circle at 50% 35%,
			rgba(223, 255, 63, 0.09),
			transparent 38%
		),
		#050804;

	background-size:
		28px 28px,
		28px 28px,
		auto,
		auto;

	box-shadow:
		0 25px 70px rgba(0, 0, 0, 0.28);

	text-align: center;
}

.grafixyy-million-billion__share-preview::before {
	content: "";

	position: absolute;
	top: -90px;
	left: -90px;

	width: 220px;
	height: 220px;

	border-radius: 50%;

	background:
		rgba(223, 255, 63, 0.08);

	filter: blur(25px);

	pointer-events: none;
}

.grafixyy-million-billion__share-preview-top {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	color: var(--mb-muted);

	font: 800 10px/1.4 monospace;
	letter-spacing: 0.12em;

	direction: ltr;
}

.grafixyy-million-billion__share-preview-top span:first-child {
	color: var(--mb-white);
	font-size: 13px;
}

.grafixyy-million-billion__share-preview-label {
	position: relative;
	z-index: 2;

	margin: 54px 0 5px;

	color: var(--mb-muted);

	font-size: 16px;
	font-weight: 700;
}

.grafixyy-million-billion__share-preview-guess {
	position: relative;
	z-index: 2;

	margin: 0;

	color: var(--mb-acid);

	font-size: clamp(68px, 12vw, 120px);
	font-weight: 900;
	line-height: 1;

	letter-spacing: -0.055em;

	font-variant-numeric: tabular-nums;
}

.grafixyy-million-billion__share-preview-small {
	position: relative;
	z-index: 2;

	margin: 5px 0 25px;

	color: var(--mb-white);

	font-size: 20px;
	font-weight: 800;
}


/*
 * Mini grid is conceptual decoration here.
 * The generated PNG will use deterministic SVG geometry.
 */

.grafixyy-million-billion__share-mini-grid {
	position: relative;
	z-index: 2;

	width: min(100%, 440px);
	height: 100px;

	margin: 0 auto 27px;

	border: 1px solid rgba(223, 255, 63, 0.20);
	border-radius: 12px;

	background:
		linear-gradient(
			rgba(223, 255, 63, 0.14) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(223, 255, 63, 0.14) 1px,
			transparent 1px
		);

	background-size:
		10px 10px;

	overflow: hidden;
}

.grafixyy-million-billion__share-mini-grid span {
	position: absolute;

	top: 7px;
	right: 7px;

	width: 12px;
	height: 12px;

	border-radius: 2px;

	background: #ffffff;

	box-shadow:
		0 0 0 2px var(--mb-acid),
		0 0 20px rgba(223, 255, 63, 0.85);
}

.grafixyy-million-billion__share-preview-truth {
	position: relative;
	z-index: 2;

	margin: 0 0 4px;

	color: var(--mb-muted);

	font-size: 14px;
	font-weight: 700;
}

.grafixyy-million-billion__share-preview > strong {
	position: relative;
	z-index: 2;

	display: block;

	color: var(--mb-white);

	font-size: clamp(28px, 5vw, 48px);
	font-weight: 900;
	line-height: 1.35;
}

.grafixyy-million-billion__share-preview-cta {
	position: relative;
	z-index: 2;

	margin: 30px 0 7px;

	color: var(--mb-acid);

	font-size: 19px;
	font-weight: 850;
}

.grafixyy-million-billion__share-domain {
	position: relative;
	z-index: 2;

	color: var(--mb-muted);

	font-family: Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;

	direction: ltr;
}


/* =========================================================
   SHARE ACTIONS
   ========================================================= */

.grafixyy-million-billion__share-actions {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 10px;

	max-width: 650px;

	margin: 14px auto 0;
}

.grafixyy-million-billion__share-actions button {
	min-height: 52px;

	padding: 9px 12px;

	border-radius: 12px;

	font-family:
		"Alexandria",
		Arial,
		sans-serif;

	font-size: 14px;
	font-weight: 800;

	cursor: pointer;
}

.grafixyy-million-billion__share-download {
	border: 1px solid var(--mb-acid) !important;

	background: var(--mb-acid) !important;

	color: var(--mb-ink) !important;

	-webkit-text-fill-color:
		var(--mb-ink);
}

.grafixyy-million-billion__share-native {
	border:
		1px solid rgba(223, 255, 63, 0.28) !important;

	background:
		rgba(223, 255, 63, 0.06) !important;

	color:
		var(--mb-white) !important;

	-webkit-text-fill-color:
		var(--mb-white);
}


/* =========================================================
   DIRECT SHARE LINKS
   ========================================================= */

.grafixyy-million-billion__share-links {
	max-width: 650px;

	margin: 18px auto 0;

	padding-top: 17px;

	border-top:
		1px solid rgba(255, 255, 255, 0.07);
}

.grafixyy-million-billion__share-links > p {
	margin: 0 0 10px;

	color: var(--mb-muted);

	font-size: 12px;
	font-weight: 700;

	text-align: center;
}

.grafixyy-million-billion__share-link-buttons {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 8px;
}

.grafixyy-million-billion__share-link-buttons a,
.grafixyy-million-billion__share-link-buttons button {
	display: flex;

	align-items: center;
	justify-content: center;

	min-height: 44px;

	padding: 8px 7px;

	border:
		1px solid rgba(255, 255, 255, 0.09);

	border-radius: 10px;

	background:
		rgba(255, 255, 255, 0.035);

	color:
		var(--mb-white);

	-webkit-text-fill-color:
		var(--mb-white);

	font-family:
		"Alexandria",
		Arial,
		sans-serif;

	font-size: 12px;
	font-weight: 750;

	text-decoration: none;

	cursor: pointer;
}

.grafixyy-million-billion__share-note {
	max-width: 650px;

	margin: 14px auto 0;

	color: #7f8679;

	font-size: 11px;
	line-height: 1.7;

	text-align: center;
}


/* =========================================================
   CONTINUE AFTER SHARE
   ========================================================= */

.grafixyy-million-billion__continue {
	display: flex;
	justify-content: center;

	width: 100%;

	margin-top: 14px;
}


/* =========================================================
   SHARE ENTRANCE
   ========================================================= */

@keyframes grafixyy-share-scale-enter {
	from {
		opacity: 0;

		transform:
			translateY(14px);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}
}

.grafixyy-million-billion__share:not([hidden]) {
	animation:
		grafixyy-share-scale-enter
		450ms ease-out both;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
	.grafixyy-million-billion__share {
		padding:
			22px 13px;
	}

	.grafixyy-million-billion__share-preview {
		min-height: 520px;

		padding:
			24px 15px;

		border-radius: 18px;
	}

	.grafixyy-million-billion__share-preview-label {
		margin-top: 42px;

		font-size: 14px;
	}

	.grafixyy-million-billion__share-preview-guess {
		font-size:
			clamp(65px, 21vw, 92px);
	}

	.grafixyy-million-billion__share-preview-small {
		font-size: 17px;
	}

	.grafixyy-million-billion__share-preview > strong {
		font-size: 29px;
	}

	.grafixyy-million-billion__share-preview-cta {
		font-size: 17px;
	}

	.grafixyy-million-billion__share-actions {
		grid-template-columns: 1fr;
	}

	.grafixyy-million-billion__share-link-buttons {
		grid-template-columns: 1fr;
	}

	.grafixyy-million-billion__share-link-buttons a,
	.grafixyy-million-billion__share-link-buttons button {
		min-height: 48px;
	}
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.grafixyy-million-billion__share:not([hidden]) {
		animation: none !important;
	}
}

/* =========================================================
   DISCOVERY
   End-of-experience portal
   ========================================================= */

.grafixyy-million-billion__discovery {
	position: relative;

	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 20px;

	width: 100%;

	margin-top: 22px;
	padding: clamp(23px, 4vw, 36px);

	overflow: hidden;

	border:
		1px solid rgba(223, 255, 63, 0.24);

	border-radius: 22px;

	background:
		radial-gradient(
			circle at 10% 15%,
			rgba(223, 255, 63, 0.12),
			transparent 28%
		),
		linear-gradient(
			135deg,
			#11170d 0%,
			#070a06 68%
		);
}

.grafixyy-million-billion__discovery[hidden] {
	display: none !important;
}

.grafixyy-million-billion__discovery::before {
	content: "NEXT UNKNOWN";

	position: absolute;
	top: 15px;
	left: 18px;

	color:
		rgba(223, 255, 63, 0.40);

	font:
		700 9px/1.4 monospace;

	letter-spacing:
		0.15em;

	direction: ltr;
}


/* =========================================================
   MYSTERY MARK
   ========================================================= */

.grafixyy-million-billion__discovery-mark {
	position: relative;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 76px;
	height: 76px;

	margin-top: 9px;

	border:
		1px solid rgba(223, 255, 63, 0.45);

	border-radius: 18px;

	background:
		linear-gradient(
			145deg,
			var(--mb-acid),
			#a9c713
		);

	color:
		var(--mb-ink);

	font-size: 38px;
	font-weight: 900;

	transform:
		rotate(-5deg);

	box-shadow:
		0 15px 35px rgba(223, 255, 63, 0.10);
}

.grafixyy-million-billion__discovery-mark::after {
	content: "";

	position: absolute;

	width: 9px;
	height: 9px;

	top: 9px;
	right: 9px;

	border-radius: 50%;

	background: #ffffff;

	box-shadow:
		0 0 13px #ffffff;
}


/* =========================================================
   COPY
   ========================================================= */

.grafixyy-million-billion__discovery-copy {
	min-width: 0;

	padding-top: 8px;
}

.grafixyy-million-billion__discovery-copy > p {
	margin: 0 0 5px;

	color:
		var(--mb-acid);

	font-size: 12px;
	font-weight: 800;
}

.grafixyy-million-billion__discovery-copy h2 {
	margin: 0;

	color:
		var(--mb-white);

	font-size:
		clamp(25px, 3.4vw, 39px);

	font-weight: 850;
	line-height: 1.4;
}

.grafixyy-million-billion__discovery-copy > span {
	display: block;

	max-width: 650px;

	margin-top: 7px;

	color:
		var(--mb-muted);

	font-size: 14px;
	line-height: 1.8;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.grafixyy-million-billion__discovery-actions {
	grid-column: 1 / -1;

	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 10px;

	margin-top: 5px;
}

.grafixyy-million-billion__discovery-actions a {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 8px;

	min-height: 54px;

	padding: 9px 14px;

	border-radius: 13px;

	font-family:
		"Alexandria",
		Arial,
		sans-serif;

	font-size: 14px;
	font-weight: 850;

	text-decoration: none;

	transition:
		transform 160ms ease,
		background 160ms ease,
		border-color 160ms ease,
		box-shadow 160ms ease;
}

.grafixyy-million-billion__discovery-random {
	border:
		1px solid var(--mb-acid);

	background:
		var(--mb-acid);

	color:
		var(--mb-ink) !important;

	box-shadow:
		0 10px 30px rgba(223, 255, 63, 0.10);
}

.grafixyy-million-billion__discovery-random:hover {
	background:
		var(--mb-acid-bright);

	transform:
		translateY(-2px);

	box-shadow:
		0 14px 35px rgba(223, 255, 63, 0.16);
}

.grafixyy-million-billion__discovery-explore {
	border:
		1px solid rgba(223, 255, 63, 0.22);

	background:
		rgba(223, 255, 63, 0.045);

	color:
		var(--mb-white) !important;
}

.grafixyy-million-billion__discovery-explore:hover {
	border-color:
		rgba(223, 255, 63, 0.48);

	background:
		rgba(223, 255, 63, 0.08);

	transform:
		translateY(-2px);
}

.grafixyy-million-billion__discovery-actions a:focus-visible {
	outline:
		3px solid #ffffff;

	outline-offset: 4px;
}


/* =========================================================
   ENTRANCE
   ========================================================= */

@keyframes grafixyy-million-discovery-enter {
	from {
		opacity: 0;

		transform:
			translateY(14px);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}
}

.grafixyy-million-billion__discovery:not([hidden]) {
	animation:
		grafixyy-million-discovery-enter
		450ms ease-out both;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
	.grafixyy-million-billion__discovery {
		grid-template-columns:
			1fr;

		gap: 13px;

		padding:
			38px 15px 20px;
	}

	.grafixyy-million-billion__discovery-mark {
		width: 62px;
		height: 62px;

		margin: 0;

		font-size: 31px;
	}

	.grafixyy-million-billion__discovery-copy {
		padding-top: 0;
	}

	.grafixyy-million-billion__discovery-copy h2 {
		font-size: 27px;
	}

	.grafixyy-million-billion__discovery-actions {
		grid-column: auto;

		grid-template-columns:
			1fr;
	}

	.grafixyy-million-billion__discovery-actions a {
		min-height: 55px;
	}
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.grafixyy-million-billion__discovery:not([hidden]) {
		animation: none !important;
	}

	.grafixyy-million-billion__discovery-actions a {
		transition: none !important;
	}
}
/* =========================================================
   MOBILE HORIZONTAL OVERFLOW FIX
   Decorative Experience glow must never widen the page.
   ========================================================= */

@media (max-width: 700px) {

	.grafixyy-million-billion {
		max-width:
			calc(100% - 20px);

		overflow-x: hidden;

		overflow-x: clip;
	}


	/*
	 * Keep the atmospheric glow,
	 * but contain its horizontal reach on mobile.
	 */

	.grafixyy-million-billion::before {
		left: -10px;
		right: -10px;
	}

}

/* =========================================================
   TIME COMPARISON — FINAL SIMPLE PAYOFF
   ========================================================= */

/* Old race explanation is no longer part of the experience. */

.grafixyy-million-billion__time-lanes::before {
	content: none !important;
	display: none !important;
}


/* Two clean facts. */

.grafixyy-million-billion__time-lanes {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 14px;

	margin-top: 24px;
}


.grafixyy-million-billion__time-lane {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-height: 250px;

	padding:
		28px
		20px;

	text-align: center;
}


.grafixyy-million-billion__time-number {
	margin: 0;

	font-size:
		clamp(1.65rem, 3vw, 2.6rem);

	font-weight: 900;
	line-height: 1.1;

	font-variant-numeric:
		tabular-nums;
}


.grafixyy-million-billion__time-unit {
	margin:
		7px
		0
		20px;

	font-size: 0.9rem;
	font-weight: 750;
}


/* The result is the hero. */

.grafixyy-million-billion__time-lane > strong {
	display: block;

	margin: 0;

	font-size:
		clamp(2rem, 4vw, 3.4rem);

	font-weight: 900;
	line-height: 1.2;
}


.grafixyy-million-billion__time-lane--million > strong {
	color: var(--mb-acid);
}


.grafixyy-million-billion__time-lane--billion > strong {
	color: #ffb145;
}


.grafixyy-million-billion__time-lane > p:last-child {
	margin:
		10px
		0
		0;

	color: var(--mb-muted);

	font-size: 0.92rem;
	font-weight: 700;
}


/* One payoff, not two separate mini-cards. */

.grafixyy-million-billion__time-punch {
	display: block;

	margin-top: 16px;
	padding:
		24px
		20px;

	border:
		1px solid rgba(223, 255, 63, 0.16);

	border-radius: 16px;

	background:
		linear-gradient(
			105deg,
			rgba(223, 255, 63, 0.055),
			rgba(255, 177, 69, 0.055)
		);

	text-align: center;
}


.grafixyy-million-billion__time-punch p {
	margin: 0;
}


.grafixyy-million-billion__time-punch p + p {
	margin-top: 5px;
}


.grafixyy-million-billion__time-punch p:first-child strong {
	color: var(--mb-acid);

	font-size:
		clamp(1.35rem, 2.8vw, 2rem);

	font-weight: 900;
}


.grafixyy-million-billion__time-punch p:last-child {
	color: #f4f5ea;

	font-size:
		clamp(1rem, 2vw, 1.3rem);

	font-weight: 800;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

	.grafixyy-million-billion__time-lanes {
		grid-template-columns: 1fr;

		gap: 10px;

		margin-top: 20px;
	}


	.grafixyy-million-billion__time-lane {
		min-height: 190px;

		padding:
			24px
			14px;
	}


	.grafixyy-million-billion__time-number {
		font-size:
			clamp(1.55rem, 8vw, 2.15rem);
	}


	.grafixyy-million-billion__time-unit {
		margin-bottom: 15px;
	}


	.grafixyy-million-billion__time-lane > strong {
		font-size:
			clamp(2rem, 10vw, 2.8rem);
	}


	.grafixyy-million-billion__time-punch {
		padding:
			20px
			13px;
	}

}

/* =========================================================
   TIME PAYOFF — DESKTOP NUMBER SAFETY
   ========================================================= */

.grafixyy-million-billion__time-number {
	width: 100%;
	max-width: 100%;

	font-size:
		clamp(1.45rem, 2.6vw, 2.3rem);

	white-space: nowrap;
	overflow: hidden;

	text-overflow: clip;
}

.grafixyy-million-billion__time-punch p {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.grafixyy-million-billion__time-punch p strong {
	display: inline;

	margin-inline-end: 6px;
}


@media (max-width: 700px) {

	.grafixyy-million-billion__time-number {
		font-size:
			clamp(1.45rem, 7.3vw, 2rem);
	}

}

/* =========================================================
   TIME CARDS — FINAL SIZE + CENTERING
   ========================================================= */

.grafixyy-million-billion__time-lane {
	box-sizing: border-box;

	text-align: center !important;
}

.grafixyy-million-billion__time-number,
.grafixyy-million-billion__time-unit,
.grafixyy-million-billion__time-lane > strong,
.grafixyy-million-billion__time-lane > p {
	width: 100%;

	margin-left: auto;
	margin-right: auto;

	text-align: center !important;
}


/* Desktop */

@media (min-width: 701px) {

	.grafixyy-million-billion__time-number {
		font-size: 1.65rem !important;

		letter-spacing: -0.025em;
	}

	.grafixyy-million-billion__time-lane > strong {
		font-size:
			clamp(1.65rem, 2.6vw, 2.25rem) !important;

		line-height: 1.3;
	}

}


/* Mobile */

@media (max-width: 700px) {

	.grafixyy-million-billion__time-lane {
		align-items: center !important;
		justify-content: center !important;

		text-align: center !important;
	}

	.grafixyy-million-billion__time-number {
		display: block;

		font-size:
			clamp(1.55rem, 7vw, 1.95rem) !important;

		text-align: center !important;
	}

	.grafixyy-million-billion__time-unit {
		text-align: center !important;
	}

	.grafixyy-million-billion__time-lane > strong {
		font-size:
			clamp(1.8rem, 9vw, 2.4rem) !important;

		text-align: center !important;
	}

}