/**
 * Grafixyy Experience: Solar System Scale
 * Visual World: Deep Space / Cosmic Navigation
 */


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

.grafixyy-solar-scale {
	--solar-bg: #02030a;
	--solar-bg-soft: #070a16;
	--solar-panel: rgba(8, 12, 27, 0.78);
	--solar-line: rgba(149, 174, 255, 0.16);

	--solar-white: #f7f8ff;
	--solar-muted: #9ca8c7;

	--solar-sun: #ffbd3f;
	--solar-sun-hot: #fff0a8;
	--solar-orange: #ff713d;

	--solar-earth: #4bdcff;
	--solar-space: #7c5cff;
	--solar-neptune: #5474ff;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 100vh;

	color: var(--solar-white);
	background:
		radial-gradient(
			circle at 50% 0%,
			rgba(54, 73, 163, 0.14),
			transparent 34rem
		),
		linear-gradient(
			180deg,
			#040611 0%,
			var(--solar-bg) 45%,
			#010207 100%
		);
}


/* Fine star field. */

.grafixyy-solar-scale::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset: 0;
	pointer-events: none;

	background-image:
		radial-gradient(
			circle,
			rgba(255, 255, 255, 0.82) 0 1px,
			transparent 1.25px
		),
		radial-gradient(
			circle,
			rgba(121, 157, 255, 0.62) 0 1px,
			transparent 1.3px
		);

	background-position:
		0 0,
		43px 67px;

	background-size:
		113px 113px,
		173px 173px;

	opacity: 0.25;
}


/* Large deep-space glow. */

.grafixyy-solar-scale::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 12rem;
	left: 50%;
	width: min(56rem, 100%);
	aspect-ratio: 1;
	border-radius: 50%;
	transform: translateX(-50%);
	pointer-events: none;

	background:
		radial-gradient(
			circle,
			rgba(72, 86, 255, 0.09),
			transparent 68%
		);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.grafixyy-solar-scale__inner {
	width: min(1120px, calc(100% - 32px));
	margin-inline: auto;
	padding: clamp(64px, 8vw, 110px) 0 110px;
}


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

.grafixyy-solar-scale__hero {
	max-width: 850px;
	margin-inline: auto;
	text-align: center;
}

.grafixyy-solar-scale__eyebrow,
.grafixyy-solar-scale__stage-label {
	margin: 0;

	color: #8fa6ff;

	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	line-height: 1.6;
}

.grafixyy-solar-scale__title {
	margin: 14px 0 0;

	color: var(--solar-white);

	font-size: clamp(3.2rem, 9vw, 7.4rem);
	font-weight: 900;
	line-height: 0.98;
	letter-spacing: -0.065em;

	text-shadow:
		0 0 44px rgba(96, 112, 255, 0.17);
}

.grafixyy-solar-scale__intro {
	max-width: 630px;
	margin: 25px auto 0;

	color: #c3cbe2;

	font-size: clamp(1.02rem, 2vw, 1.25rem);
	font-weight: 600;
	line-height: 1.9;
}


/* =========================================================
   SUN STAGE
   ========================================================= */

.grafixyy-solar-scale__sun-stage {
	position: relative;

	display: grid;
	grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1.1fr);
	align-items: center;
	gap: clamp(40px, 8vw, 100px);

	margin-top: clamp(70px, 10vw, 130px);
	padding: clamp(30px, 6vw, 70px);

	border: 1px solid rgba(255, 201, 83, 0.12);
	border-radius: 38px;

	background:
		linear-gradient(
			135deg,
			rgba(255, 178, 54, 0.035),
			rgba(8, 12, 28, 0.82) 50%
		);

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

.grafixyy-solar-scale__sun-stage::before {
	content: "OBJECT 001 // SUN";
	position: absolute;
	top: 20px;
	left: 24px;

	color: rgba(255, 216, 122, 0.42);

	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.14em;

	direction: ltr;
}


/* =========================================================
   SUN
   ========================================================= */

.grafixyy-solar-scale__sun {
	position: relative;
	justify-self: center;

	width: clamp(180px, 26vw, 290px);
	aspect-ratio: 1;
	border-radius: 50%;

	background:
		radial-gradient(
			circle at 34% 31%,
			#fff9c5 0%,
			#ffe26f 13%,
			#ffb631 39%,
			#ff7138 68%,
			#df3c25 100%
		);

	box-shadow:
		0 0 18px rgba(255, 225, 134, 0.72),
		0 0 55px rgba(255, 161, 45, 0.5),
		0 0 115px rgba(255, 91, 39, 0.22);

	animation:
		grafixyySolarSunBreathe 4.6s ease-in-out infinite;
}

.grafixyy-solar-scale__sun::before {
	content: "";
	position: absolute;
	inset: -8%;
	border-radius: inherit;

	border: 1px solid rgba(255, 207, 94, 0.18);

	box-shadow:
		0 0 60px rgba(255, 146, 45, 0.15);

	animation:
		grafixyySolarCorona 5.5s ease-in-out infinite;
}

.grafixyy-solar-scale__sun::after {
	content: "";
	position: absolute;
	inset: 8%;
	border-radius: inherit;

	background:
		radial-gradient(
			circle at 67% 65%,
			transparent 0 15%,
			rgba(255, 255, 255, 0.06) 16% 17%,
			transparent 18%
		);

	mix-blend-mode: screen;
	opacity: 0.8;
}


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

.grafixyy-solar-scale__sun-copy h2 {
	margin: 10px 0 16px;

	font-size: clamp(2rem, 4.5vw, 4.1rem);
	font-weight: 900;
	line-height: 1.12;
	letter-spacing: -0.045em;
}

.grafixyy-solar-scale__sun-copy > p:not(.grafixyy-solar-scale__stage-label) {
	margin: 10px 0 0;

	color: var(--solar-muted);

	font-size: clamp(1rem, 1.8vw, 1.12rem);
	font-weight: 600;
	line-height: 1.9;
}

.grafixyy-solar-scale__sun-copy strong {
	display: inline-block;
	margin-inline: 3px;

	color: var(--solar-sun-hot);
	font-size: 1.16em;
	font-weight: 900;
}


/* =========================================================
   EARTH CHALLENGE
   ========================================================= */

.grafixyy-solar-scale__earth-challenge {
	max-width: 850px;
	margin: clamp(80px, 11vw, 145px) auto 0;
	padding: clamp(28px, 5vw, 58px);

	text-align: center;

	border: 1px solid var(--solar-line);
	border-radius: 34px;

	background:
		radial-gradient(
			circle at 50% 0%,
			rgba(53, 205, 255, 0.07),
			transparent 47%
		),
		var(--solar-panel);

	box-shadow:
		0 26px 80px rgba(0, 0, 0, 0.28);
}

.grafixyy-solar-scale__earth-challenge h2 {
	max-width: 650px;
	margin: 11px auto 0;

	font-size: clamp(2rem, 4.5vw, 3.9rem);
	font-weight: 900;
	line-height: 1.18;
	letter-spacing: -0.04em;
}

.grafixyy-solar-scale__earth-challenge > p:not(.grafixyy-solar-scale__stage-label) {
	max-width: 580px;
	margin: 16px auto 0;

	color: var(--solar-muted);

	font-size: 1.03rem;
	font-weight: 600;
	line-height: 1.85;
}


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

.grafixyy-solar-scale__choices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;

	margin-top: 32px;
}

.grafixyy-solar-scale__choices button {
	min-height: 62px;
	padding: 13px 18px;

	border: 1px solid rgba(128, 155, 255, 0.19);
	border-radius: 18px;

	color: #e9edff;
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.055),
			rgba(255, 255, 255, 0.018)
		);

	font: inherit;
	font-size: 1rem;
	font-weight: 800;

	cursor: pointer;

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

.grafixyy-solar-scale__choices button:hover {
	transform: translateY(-2px);
	border-color: rgba(93, 211, 255, 0.6);

	background:
		linear-gradient(
			180deg,
			rgba(58, 205, 255, 0.13),
			rgba(77, 84, 255, 0.055)
		);

	box-shadow:
		0 10px 32px rgba(29, 113, 255, 0.09);
}

.grafixyy-solar-scale__choices button:focus-visible,
.grafixyy-solar-scale__earth-reveal:focus-visible,
.grafixyy-solar-scale__launch:focus-visible {
	outline: 3px solid #78e8ff;
	outline-offset: 4px;
}

.grafixyy-solar-scale__choices button[aria-pressed="true"] {
	color: #06101c;

	border-color: #69e8ff;

	background:
		linear-gradient(
			135deg,
			#8df2ff,
			#62bcff
		);

	box-shadow:
		0 0 0 3px rgba(82, 211, 255, 0.1),
		0 14px 40px rgba(48, 175, 255, 0.16);
}


/* =========================================================
   PRIMARY REVEAL BUTTON
   ========================================================= */

.grafixyy-solar-scale__earth-reveal,
.grafixyy-solar-scale__launch {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 60px;
	margin-top: 22px;
	padding: 14px 28px;

	border: 0;
	border-radius: 999px;

	color: #06070c;
	background:
		linear-gradient(
			135deg,
			#fff1a5,
			#ffbc42 48%,
			#ff7b3d
		);

	box-shadow:
		0 13px 40px rgba(255, 151, 44, 0.2);

	font: inherit;
	font-weight: 900;

	cursor: pointer;

	transition:
		transform 180ms ease,
		box-shadow 180ms ease,
		opacity 180ms ease;
}

.grafixyy-solar-scale__earth-reveal:hover:not(:disabled),
.grafixyy-solar-scale__launch:hover {
	transform: translateY(-2px) scale(1.015);

	box-shadow:
		0 16px 50px rgba(255, 151, 44, 0.29);
}

.grafixyy-solar-scale__earth-reveal:disabled {
	opacity: 0.34;
	cursor: not-allowed;
	box-shadow: none;
}


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

.grafixyy-solar-scale__earth-result {
	margin-top: 34px;
	padding: 27px 20px;

	border-top: 1px solid rgba(105, 224, 255, 0.13);
}

.grafixyy-solar-scale__earth-result p {
	margin: 6px 0;

	color: var(--solar-muted);

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

.grafixyy-solar-scale__earth-result strong {
	display: block;
	margin: 8px 0;

	color: var(--solar-earth);

	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 900;
	line-height: 1;

	text-shadow:
		0 0 32px rgba(75, 220, 255, 0.22);
}


/* =========================================================
   NEPTUNE TEASE
   ========================================================= */

.grafixyy-solar-scale__neptune-tease {
	max-width: 760px;
	margin: 90px auto 0;
	padding: clamp(38px, 6vw, 70px) 24px;

	text-align: center;

	border-top: 1px solid rgba(87, 112, 255, 0.15);
	border-bottom: 1px solid rgba(87, 112, 255, 0.15);
}

.grafixyy-solar-scale__neptune-tease h2 {
	margin: 12px 0 0;

	font-size: clamp(2.3rem, 5.5vw, 4.7rem);
	font-weight: 900;
	line-height: 1.12;
	letter-spacing: -0.045em;
}

.grafixyy-solar-scale__neptune-tease > p:not(.grafixyy-solar-scale__stage-label) {
	max-width: 560px;
	margin: 18px auto 0;

	color: var(--solar-muted);

	line-height: 1.85;
}


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

@keyframes grafixyySolarSunBreathe {
	0%,
	100% {
		transform: scale(1);
		filter: brightness(1);
	}

	50% {
		transform: scale(1.025);
		filter: brightness(1.07);
	}
}

@keyframes grafixyySolarCorona {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.58;
	}

	50% {
		transform: scale(1.07);
		opacity: 0.92;
	}
}


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

@media (max-width: 720px) {

	.grafixyy-solar-scale__inner {
		width: min(100% - 22px, 1120px);
		padding-top: 52px;
		padding-bottom: 82px;
	}

	.grafixyy-solar-scale__title {
		font-size: clamp(3.35rem, 17vw, 5.25rem);
		line-height: 1.06;
		padding-inline: 6px;
	}

	.grafixyy-solar-scale__intro {
		max-width: 34rem;
		padding-inline: 6px;
	}

	.grafixyy-solar-scale__sun-stage {
		grid-template-columns: 1fr;
		gap: 52px;

		margin-top: 70px;
		padding: 54px 20px 30px;

		text-align: center;
		border-radius: 28px;
	}

	.grafixyy-solar-scale__sun-stage::before {
		top: 17px;
		left: 50%;
		transform: translateX(-50%);

		width: max-content;
		max-width: calc(100% - 30px);
	}

	.grafixyy-solar-scale__sun {
		width: min(58vw, 230px);
	}

	.grafixyy-solar-scale__sun-copy h2 {
		font-size: clamp(2.35rem, 12vw, 3.5rem);
	}

	.grafixyy-solar-scale__earth-challenge {
		margin-top: 78px;
		padding: 34px 16px;
		border-radius: 27px;
	}

	.grafixyy-solar-scale__earth-challenge h2 {
		font-size: clamp(2rem, 9.5vw, 3rem);
		padding-inline: 4px;
	}

	.grafixyy-solar-scale__choices {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.grafixyy-solar-scale__choices button {
		min-height: 58px;
	}

	.grafixyy-solar-scale__earth-reveal,
	.grafixyy-solar-scale__launch {
		width: 100%;
		max-width: 360px;
	}

	.grafixyy-solar-scale__neptune-tease {
		margin-top: 70px;
		padding-inline: 10px;
	}

	.grafixyy-solar-scale__neptune-tease h2 {
		font-size: clamp(2.3rem, 11vw, 3.5rem);
		padding-inline: 4px;
	}
}


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

@media (max-width: 390px) {

	.grafixyy-solar-scale__inner {
		width: calc(100% - 18px);
	}

	.grafixyy-solar-scale__title {
		font-size: clamp(3rem, 16vw, 4rem);
	}

	.grafixyy-solar-scale__earth-challenge {
		padding-inline: 12px;
	}
}


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

@media (prefers-reduced-motion: reduce) {

	.grafixyy-solar-scale__sun,
	.grafixyy-solar-scale__sun::before {
		animation: none;
	}

	.grafixyy-solar-scale__choices button,
	.grafixyy-solar-scale__earth-reveal,
	.grafixyy-solar-scale__launch {
		transition: none;
	}
}

/* =========================================================
   COSMIC TYPE REFINEMENT
   ========================================================= */

.grafixyy-solar-scale__title {
	font-size: clamp(2.9rem, 6.2vw, 5.5rem);
	line-height: 1.12;

	padding:
		0.12em
		0.08em
		0.18em;

	color: #ffffff;

	background:
		linear-gradient(
			110deg,
			#ffffff 5%,
			#b7c5ff 32%,
			#866fff 60%,
			#52dcff 88%
		);

	-webkit-background-clip: text;
	background-clip: text;

	-webkit-text-fill-color: transparent;

	text-shadow: none;

	filter:
		drop-shadow(
			0 0 24px rgba(91, 111, 255, 0.16)
		);
}


.grafixyy-solar-scale__sun-copy h2 {
	color: #ffffff;

	background:
		linear-gradient(
			110deg,
			#ffffff,
			#ffe7a1 52%,
			#ff9a4e
		);

	-webkit-background-clip: text;
	background-clip: text;

	-webkit-text-fill-color: transparent;

	padding:
		0.08em
		0.05em
		0.15em;
}


.grafixyy-solar-scale__earth-challenge h2 {
	color: #ffffff;

	background:
		linear-gradient(
			110deg,
			#ffffff 5%,
			#b9eaff 46%,
			#718cff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	-webkit-text-fill-color: transparent;

	padding:
		0.08em
		0.05em
		0.16em;
}


.grafixyy-solar-scale__neptune-tease h2 {
	color: #ffffff;

	background:
		linear-gradient(
			110deg,
			#ffffff,
			#9dc5ff 44%,
			#626cff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	-webkit-text-fill-color: transparent;

	padding:
		0.08em
		0.05em
		0.16em;
}


@media (max-width: 720px) {

	.grafixyy-solar-scale__title {
		font-size: clamp(2.8rem, 13.5vw, 4.25rem);
		line-height: 1.14;

		padding:
			0.12em
			0.1em
			0.2em;
	}

	.grafixyy-solar-scale__sun-copy h2 {
		font-size: clamp(2.15rem, 10vw, 3.15rem);
	}

	.grafixyy-solar-scale__earth-challenge h2 {
		font-size: clamp(1.95rem, 8.7vw, 2.8rem);
	}
}


@media (max-width: 390px) {

	.grafixyy-solar-scale__title {
		font-size: clamp(2.6rem, 13vw, 3.5rem);
	}
}

/* =========================================================
   MOBILE FIRST-VIEW REFINEMENT
   ========================================================= */

@media (max-width: 720px) {

	.grafixyy-solar-scale__inner {
		padding-top: 36px;
	}

	.grafixyy-solar-scale__title {
		font-size: clamp(2.65rem, 11.5vw, 3.75rem);
		line-height: 1.17;
	}

	.grafixyy-solar-scale__intro {
		margin-top: 16px;

		font-size: 1rem;
		line-height: 1.75;
	}

	.grafixyy-solar-scale__sun-stage {
		gap: 30px;

		margin-top: 48px;
		padding-top: 48px;
	}

	.grafixyy-solar-scale__sun {
		width: min(46vw, 185px);
	}

	.grafixyy-solar-scale__sun-copy h2 {
		font-size: clamp(2rem, 9vw, 2.8rem);
	}
}


@media (max-width: 390px) {

	.grafixyy-solar-scale__title {
		font-size: clamp(2.45rem, 11vw, 3.15rem);
	}

	.grafixyy-solar-scale__sun {
		width: min(44vw, 170px);
	}
}
/* =========================================================
   EARTH REACTION
   ========================================================= */

.grafixyy-solar-scale__earth-result
.grafixyy-solar-scale__reaction {
	margin-bottom: 13px;

	color: #ffffff;

	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 900;
}

.grafixyy-solar-scale__earth-result b {
	color: #9beeff;
	font-weight: 900;
}

.grafixyy-solar-scale__result-arrow {
	display: block;
	margin: 16px 0 12px;

	color: #627dff;

	font-size: 1.7rem;
	font-weight: 900;

	animation:
		grafixyySolarArrowDrop 1.5s ease-in-out infinite;
}

@keyframes grafixyySolarArrowDrop {

	0%,
	100% {
		transform: translateY(0);
		opacity: 0.5;
	}

	50% {
		transform: translateY(6px);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {

	.grafixyy-solar-scale__result-arrow {
		animation: none;
	}
}

/* =========================================================
   CHAPTER 1 — VISUAL RESET / REFINEMENT
   New real-distance narrative
   ========================================================= */


/* Main title is now much longer than the old "فين نبتون؟". */

.grafixyy-solar-scale__title {
	max-width: 820px;
	margin-inline: auto;

	font-size: clamp(2.8rem, 5.2vw, 4.8rem);
	line-height: 1.16;
	letter-spacing: -0.045em;

	padding:
		0.12em
		0.08em
		0.2em;
}


/* =========================================================
   COMPRESSED SOLAR SYSTEM PREVIEW
   ========================================================= */

.grafixyy-solar-scale__system-preview {
	position: relative;
	max-width: 980px;

	margin:
		clamp(58px, 8vw, 100px)
		auto
		0;

	padding:
		clamp(30px, 5vw, 52px);

	overflow: hidden;

	border:
		1px solid
		rgba(116, 143, 255, 0.17);

	border-radius: 32px;

	background:
		radial-gradient(
			circle at 10% 50%,
			rgba(255, 177, 55, 0.08),
			transparent 28%
		),
		radial-gradient(
			circle at 88% 40%,
			rgba(70, 101, 255, 0.11),
			transparent 32%
		),
		rgba(5, 8, 20, 0.76);

	box-shadow:
		0 28px 90px rgba(0, 0, 0, 0.3);
}


.grafixyy-solar-scale__preview-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;

	margin-bottom: 28px;
}


.grafixyy-solar-scale__visual-warning {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 7px 12px;

	border:
		1px solid
		rgba(255, 194, 75, 0.2);

	border-radius: 999px;

	color: #ffdc83;
	background: rgba(255, 179, 45, 0.07);

	font-size: 0.76rem;
	font-weight: 800;
}


.grafixyy-solar-scale__preview-title {
	margin: 0;

	color: #ffffff;

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

	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.04em;

	background:
		linear-gradient(
			110deg,
			#ffffff,
			#cbd4ff 52%,
			#8194ff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	padding:
		0.07em
		0.04em
		0.15em;
}


/* =========================================================
   MINI SYSTEM
   This is deliberately compressed, not a scale diagram.
   ========================================================= */

.grafixyy-solar-scale__mini-system {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(9px, 1.6vw, 22px);

	min-height: 190px;
	margin-top: 25px;
	padding: 34px 24px;

	direction: ltr;

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

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


.grafixyy-solar-scale__mini-system::before {
	content: "";

	position: absolute;
	left: 4%;
	right: 4%;
	top: 50%;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			rgba(255, 188, 65, 0.32),
			rgba(125, 148, 255, 0.12),
			rgba(70, 103, 255, 0.26)
		);

	z-index: 0;
}


.grafixyy-solar-scale__mini-sun,
.grafixyy-solar-scale__mini-planet {
	position: relative;
	z-index: 1;

	display: block;
	flex: 0 0 auto;

	border-radius: 50%;
}


/* Sun */

.grafixyy-solar-scale__mini-sun {
	width: clamp(72px, 9vw, 112px);
	aspect-ratio: 1;

	background:
		radial-gradient(
			circle at 35% 32%,
			#fff6b0,
			#ffc43d 38%,
			#ff6838 100%
		);

	box-shadow:
		0 0 18px rgba(255, 211, 89, 0.68),
		0 0 46px rgba(255, 116, 46, 0.25);
}


/* Planets */

.grafixyy-solar-scale__mini-planet {
	width: 13px;
	height: 13px;

	background: #9099ac;

	box-shadow:
		0 0 13px currentColor;
}


.grafixyy-solar-scale__mini-planet--mercury {
	width: 8px;
	height: 8px;
	color: #a7a39c;
	background: #a7a39c;
}


.grafixyy-solar-scale__mini-planet--venus {
	width: 14px;
	height: 14px;
	color: #e7af65;
	background: #e7af65;
}


.grafixyy-solar-scale__mini-planet--earth {
	width: 15px;
	height: 15px;
	color: #54dcff;

	background:
		radial-gradient(
			circle at 35% 35%,
			#b7f6ff,
			#42bfe7 48%,
			#3268dc
		);

	box-shadow:
		0 0 18px rgba(73, 216, 255, 0.65);
}


.grafixyy-solar-scale__mini-planet--mars {
	width: 11px;
	height: 11px;
	color: #ee7258;
	background: #d95d47;
}


.grafixyy-solar-scale__mini-planet--jupiter {
	width: 34px;
	height: 34px;
	color: #deb58d;

	background:
		linear-gradient(
			180deg,
			#d6b28d 0 23%,
			#8e654e 24% 34%,
			#e2c39f 35% 57%,
			#a56f54 58% 68%,
			#d0a37d 69%
		);
}


.grafixyy-solar-scale__mini-planet--saturn {
	width: 28px;
	height: 28px;
	color: #e8d18b;

	background: #d8bd73;
}


.grafixyy-solar-scale__mini-planet--saturn::after {
	content: "";

	position: absolute;
	left: 50%;
	top: 50%;

	width: 44px;
	height: 14px;

	border:
		2px solid rgba(239, 215, 146, 0.72);

	border-radius: 50%;

	transform:
		translate(-50%, -50%)
		rotate(-16deg);
}


.grafixyy-solar-scale__mini-planet--uranus {
	width: 20px;
	height: 20px;
	color: #83e1e8;
	background: #7fd9e3;
}


.grafixyy-solar-scale__mini-planet--neptune {
	width: 19px;
	height: 19px;
	color: #647fff;

	background:
		radial-gradient(
			circle at 35% 30%,
			#8ca6ff,
			#4166ed 57%,
			#263caa
		);

	box-shadow:
		0 0 19px rgba(75, 103, 255, 0.72);
}


.grafixyy-solar-scale__preview-note {
	max-width: 680px;

	margin: 27px auto 0;

	color: #b8c3df;

	font-size: 1rem;
	font-weight: 650;
	line-height: 1.8;
	text-align: center;
}


/* =========================================================
   EARTH CHALLENGE — FIX TYPOGRAPHY
   ========================================================= */

.grafixyy-solar-scale__earth-challenge {
	margin-top:
		clamp(70px, 9vw, 115px);
}


.grafixyy-solar-scale__earth-challenge h2 {
	max-width: 650px;

	color: #ffffff;

	font-size:
		clamp(2.1rem, 4vw, 3.5rem);

	line-height: 1.2;

	padding:
		0.08em
		0.05em
		0.16em;
}


.grafixyy-solar-scale__earth-challenge
> p:not(.grafixyy-solar-scale__stage-label) {
	max-width: 620px;

	color: #b8c3df;

	font-size: 1rem;
	line-height: 1.8;
}


/* =========================================================
   NEXT CHAPTER PLACEHOLDER
   ========================================================= */

.grafixyy-solar-scale__earth-launch {
	max-width: 820px;

	margin: 72px auto 0;

	padding:
		clamp(36px, 6vw, 68px)
		clamp(20px, 5vw, 54px);

	text-align: center;

	border-top:
		1px solid rgba(91, 119, 255, 0.16);

	border-bottom:
		1px solid rgba(91, 119, 255, 0.16);
}


.grafixyy-solar-scale__earth-launch h2 {
	margin: 12px auto 0;

	max-width: 700px;

	color: #ffffff;

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

	font-weight: 900;
	line-height: 1.25;
	letter-spacing: -0.035em;

	background:
		linear-gradient(
			110deg,
			#ffffff,
			#99eaff 48%,
			#7c77ff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	padding-bottom: 0.12em;
}


.grafixyy-solar-scale__earth-launch > p {
	max-width: 550px;
	margin: 16px auto 0;

	color: #aebbd9;
	line-height: 1.8;
}


/* =========================================================
   MOBILE — NEW NARRATIVE
   ========================================================= */

@media (max-width: 720px) {

	.grafixyy-solar-scale__title {
		max-width: 390px;

		font-size:
			clamp(2.45rem, 10.7vw, 3.45rem);

		line-height: 1.2;

		padding-inline: 0.1em;
	}


	.grafixyy-solar-scale__system-preview {
		margin-top: 48px;
		padding: 25px 15px;
		border-radius: 25px;
	}


	.grafixyy-solar-scale__preview-head {
		flex-direction: column;
		justify-content: center;
		gap: 8px;

		margin-bottom: 19px;

		text-align: center;
	}


	.grafixyy-solar-scale__preview-title {
		font-size:
			clamp(1.9rem, 8.5vw, 2.7rem);

		text-align: center;
	}


	.grafixyy-solar-scale__mini-system {
		gap: 9px;

		min-height: 140px;

		margin-top: 14px;

		padding:
			28px
			5px;
	}


	.grafixyy-solar-scale__mini-sun {
		width: 56px;
	}


	.grafixyy-solar-scale__mini-planet--mercury {
		width: 5px;
		height: 5px;
	}

	.grafixyy-solar-scale__mini-planet--venus {
		width: 9px;
		height: 9px;
	}

	.grafixyy-solar-scale__mini-planet--earth {
		width: 10px;
		height: 10px;
	}

	.grafixyy-solar-scale__mini-planet--mars {
		width: 7px;
		height: 7px;
	}

	.grafixyy-solar-scale__mini-planet--jupiter {
		width: 23px;
		height: 23px;
	}

	.grafixyy-solar-scale__mini-planet--saturn {
		width: 19px;
		height: 19px;
	}

	.grafixyy-solar-scale__mini-planet--saturn::after {
		width: 30px;
		height: 10px;
	}

	.grafixyy-solar-scale__mini-planet--uranus {
		width: 13px;
		height: 13px;
	}

	.grafixyy-solar-scale__mini-planet--neptune {
		width: 13px;
		height: 13px;
	}


	.grafixyy-solar-scale__preview-note {
		font-size: 0.94rem;
		line-height: 1.75;
	}


	.grafixyy-solar-scale__earth-challenge h2 {
		font-size:
			clamp(1.9rem, 8.5vw, 2.7rem);

		line-height: 1.25;
	}


	.grafixyy-solar-scale__earth-launch h2 {
		font-size:
			clamp(1.85rem, 8vw, 2.6rem);
	}
}


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

@media (max-width: 390px) {

	.grafixyy-solar-scale__title {
		font-size:
			clamp(2.25rem, 10.5vw, 3rem);
	}


	.grafixyy-solar-scale__mini-system {
		gap: 6px;
	}


	.grafixyy-solar-scale__mini-sun {
		width: 47px;
	}
}

/* =========================================================
   COSMIC TYPOGRAPHY — SUNLIGHT PASS
   ========================================================= */


/* Main hero: smaller, two-line friendly, more Arabic breathing room. */

.grafixyy-solar-scale__title {
	max-width: 980px;

	font-size: clamp(2.65rem, 4.35vw, 4rem);
	line-height: 1.42;
	letter-spacing: -0.035em;

	padding:
		0.12em
		0.08em
		0.24em;

	background:
		linear-gradient(
			105deg,
			#fff3c4 0%,
			#ffbd4a 20%,
			#ff7c45 38%,
			#a17aff 63%,
			#4ddcff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	filter:
		drop-shadow(
			0 0 24px rgba(255, 153, 62, 0.09)
		)
		drop-shadow(
			0 0 28px rgba(93, 104, 255, 0.12)
		);
}


/* Compressed-system title:
   Sunlight enters the cosmic palette. */

.grafixyy-solar-scale__preview-title {
	background:
		linear-gradient(
			105deg,
			#fff7d6 0%,
			#ffc956 34%,
			#ff8c48 55%,
			#9782ff 78%,
			#62dcff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}


/* Earth question:
   warm Sun -> cool Earth. */

.grafixyy-solar-scale__earth-challenge h2 {
	background:
		linear-gradient(
			105deg,
			#ffe9a3 0%,
			#ffb948 26%,
			#ffffff 48%,
			#a9eaff 70%,
			#62a7ff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}


/* Distance reveal heading. */

.grafixyy-solar-scale__earth-launch h2 {
	background:
		linear-gradient(
			105deg,
			#ffcd65 0%,
			#fff4d0 28%,
			#91eaff 62%,
			#7774ff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}


/* =========================================================
   DESKTOP HERO WIDTH
   ========================================================= */

@media (min-width: 721px) {

	.grafixyy-solar-scale__hero {
		max-width: 1050px;
	}

	.grafixyy-solar-scale__title {
		font-size: clamp(2.75rem, 4vw, 3.8rem);

		/*
		 * Enough horizontal room for the Arabic title
		 * to settle naturally into two lines.
		 */
		max-width: 1000px;
	}
}


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

@media (max-width: 720px) {

	.grafixyy-solar-scale__title {
		max-width: 390px;

		font-size: clamp(2.15rem, 9.3vw, 3rem);
		line-height: 1.42;

		padding:
			0.1em
			0.08em
			0.22em;
	}

	.grafixyy-solar-scale__preview-title,
	.grafixyy-solar-scale__earth-challenge h2,
	.grafixyy-solar-scale__earth-launch h2 {
		line-height: 1.38;
	}
}


@media (max-width: 390px) {

	.grafixyy-solar-scale__title {
		font-size: clamp(2rem, 9vw, 2.7rem);
		line-height: 1.44;
	}
}
/* =========================================================
   IMPOSSIBLE RACE // EARTH
   ========================================================= */

.grafixyy-solar-scale__race {
	--race-sun: #ffc84e;
	--race-earth: #59dcff;
	--race-light: #fff3a2;

	position: relative;
	overflow: hidden;

	margin-top: 38px;
	padding: clamp(24px, 5vw, 48px);

	border: 1px solid rgba(112, 142, 255, 0.18);
	border-radius: 30px;

	background:
		radial-gradient(
			circle at 0% 45%,
			rgba(255, 171, 46, 0.13),
			transparent 28%
		),
		radial-gradient(
			circle at 100% 45%,
			rgba(65, 199, 255, 0.12),
			transparent 28%
		),
		#040711;

	box-shadow:
		0 30px 90px rgba(0, 0, 0, 0.35);
}

.grafixyy-solar-scale__race::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	background-image:
		radial-gradient(
			circle,
			rgba(255,255,255,.6) 0 1px,
			transparent 1.3px
		);

	background-size: 83px 83px;
	opacity: 0.1;
}

.grafixyy-solar-scale__race-intro {
	position: relative;
	z-index: 2;
	text-align: center;
}

.grafixyy-solar-scale__race-intro h3 {
	margin: 9px 0 0;

	font-size: clamp(2rem, 4vw, 3.4rem);
	font-weight: 900;
	line-height: 1.3;

	background:
		linear-gradient(
			105deg,
			#ffd568,
			#fff8d9 38%,
			#78e9ff 72%,
			#7777ff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.grafixyy-solar-scale__race-intro > p:not(.grafixyy-solar-scale__stage-label) {
	margin: 12px 0 0;
	color: #aebad8;
	font-weight: 650;
	line-height: 1.8;
}


/* =========================================================
   START / FINISH
   ========================================================= */

.grafixyy-solar-scale__race-track {
	position: relative;
	z-index: 2;

	margin-top: 38px;
	padding:
		64px
		70px
		24px;
}

.grafixyy-solar-scale__race-start,
.grafixyy-solar-scale__race-finish {
	position: absolute;
	top: 0;

	display: flex;
	align-items: center;
	gap: 8px;

	color: #aeb8d2;
	font-weight: 800;
	font-size: 0.76rem;
}

.grafixyy-solar-scale__race-start {
	left: 10px;
}

.grafixyy-solar-scale__race-finish {
	right: 10px;
}

.grafixyy-solar-scale__race-sun {
	width: 29px;
	height: 29px;
	border-radius: 50%;

	background:
		radial-gradient(
			circle at 35% 30%,
			#fff8bf,
			#ffc440 45%,
			#ff713b
		);

	box-shadow:
		0 0 20px rgba(255, 177, 53, 0.5);
}

.grafixyy-solar-scale__race-earth {
	width: 17px;
	height: 17px;
	border-radius: 50%;

	background:
		radial-gradient(
			circle at 35% 30%,
			#c9fbff,
			#4ad4f5 48%,
			#315bd1
		);

	box-shadow:
		0 0 18px rgba(75, 217, 255, 0.55);
}


/* =========================================================
   RACERS
   ========================================================= */

.grafixyy-solar-scale__racers {
	display: grid;
	gap: 18px;
}

.grafixyy-solar-scale__racer {
	position: relative;
	padding: 15px 0 17px;

	border-bottom:
		1px solid rgba(255,255,255,0.06);
}

.grafixyy-solar-scale__racer:last-child {
	border-bottom: 0;
}

.grafixyy-solar-scale__racer-head {
	display: flex;
	align-items: center;
	gap: 9px;

	margin-bottom: 10px;
}

.grafixyy-solar-scale__racer-head > span {
	font-size: 1.25rem;
}

.grafixyy-solar-scale__racer-head strong {
	color: #f8f9ff;
	font-size: 0.95rem;
}

.grafixyy-solar-scale__racer-head small {
	margin-inline-start: auto;
	color: #7f8ba9;
	font-weight: 700;
	direction: ltr;
}

.grafixyy-solar-scale__racer-lane {
	position: relative;
	height: 8px;
	overflow: visible;

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			rgba(255, 186, 55, 0.16),
			rgba(98, 117, 181, 0.12),
			rgba(58, 203, 255, 0.16)
		);
}

.grafixyy-solar-scale__racer-lane::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;

	height: 1px;

	transform: translateY(-50%);

	background:
		linear-gradient(
			90deg,
			rgba(255,198,79,.35),
			rgba(117,136,197,.14),
			rgba(76,218,255,.35)
		);
}

.grafixyy-solar-scale__racer-lane [data-racer-marker] {
	position: absolute;
	z-index: 3;
	left: 0;
	top: 50%;

	width: 14px;
	height: 14px;

	border: 2px solid #dfe5ff;
	border-radius: 50%;

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

	background: #737f9f;

	box-shadow:
		0 0 12px rgba(173,190,255,.26);

	transition:
		left 3.5s
		cubic-bezier(.2,.75,.2,1);
}


/*
 * IMPORTANT:
 *
 * These animation positions are NOT literal relative distances
 * travelled during 4.2 seconds.
 *
 * The visual deliberately communicates the enormous time-gap:
 * light finishes, conventional speeds visually barely leave origin.
 */

.grafixyy-solar-scale__race.is-running
[data-racer="walk"]
[data-racer-marker] {
	left: 0.7%;
}

.grafixyy-solar-scale__race.is-running
[data-racer="car"]
[data-racer-marker] {
	left: 1.5%;
}

.grafixyy-solar-scale__race.is-running
[data-racer="plane"]
[data-racer-marker] {
	left: 3.2%;
}

.grafixyy-solar-scale__race.is-running
[data-racer="light"]
[data-racer-marker] {
	left: 100%;

	width: 19px;
	height: 19px;

	border-color: #fffbe0;
	background: #fff3a3;

	box-shadow:
		0 0 10px #fff6be,
		0 0 28px rgba(255,226,95,.75);
}


/* Light leaves a flash across its lane. */

.grafixyy-solar-scale__racer--light
.grafixyy-solar-scale__racer-lane {
	overflow: hidden;
}

.grafixyy-solar-scale__racer--light
.grafixyy-solar-scale__racer-lane::after {
	content: "";
	position: absolute;
	inset: 0;

	transform: translateX(-105%);

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255,239,129,.25),
			rgba(255,255,228,.95),
			rgba(104,225,255,.28),
			transparent
		);

	opacity: 0;
}

.grafixyy-solar-scale__race.is-running
.grafixyy-solar-scale__racer--light
.grafixyy-solar-scale__racer-lane::after {
	animation:
		grafixyySolarLightStrike
		3.5s
		cubic-bezier(.2,.75,.2,1)
		forwards;
}


/* =========================================================
   VALUES
   ========================================================= */

.grafixyy-solar-scale__racer > p {
	margin: 10px 0 0;

	color: #8995b3;

	font-size: 0.9rem;
	line-height: 1.6;
}

.grafixyy-solar-scale__racer > p strong {
	color: #e6ebff;
	font-weight: 900;
}

.grafixyy-solar-scale__racer--light > p strong {
	color: var(--race-light);
}


/* =========================================================
   PUNCH
   ========================================================= */

.grafixyy-solar-scale__race-punch {
	position: relative;
	z-index: 2;

	margin-top: 30px;
	padding: 30px 20px 8px;

	text-align: center;

	border-top:
		1px solid rgba(111,144,255,.14);
}

.grafixyy-solar-scale__race-punch p {
	margin: 7px 0;

	color: #aeb8d3;
	font-size: 1rem;
}

.grafixyy-solar-scale__race-punch p strong {
	color: #ffffff;
}

.grafixyy-solar-scale__race-punch h3 {
	margin: 22px 0 0;

	font-size: clamp(2rem, 5vw, 4rem);
	font-weight: 900;
	line-height: 1.25;

	background:
		linear-gradient(
			105deg,
			#ffca57,
			#ffffff 45%,
			#55dcff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}


/* =========================================================
   LIGHT STRIKE
   ========================================================= */

@keyframes grafixyySolarLightStrike {

	0% {
		transform: translateX(-105%);
		opacity: 0;
	}

	8% {
		opacity: 1;
	}

	100% {
		transform: translateX(105%);
		opacity: 1;
	}
}


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

@media (max-width: 720px) {

	.grafixyy-solar-scale__race {
		margin-top: 28px;
		padding:
			26px
			14px;

		border-radius: 24px;
	}

	.grafixyy-solar-scale__race-intro h3 {
		font-size:
			clamp(1.9rem, 8.7vw, 2.7rem);
		line-height: 1.35;
	}

	.grafixyy-solar-scale__race-track {
		margin-top: 30px;

		padding:
			58px
			9px
			18px;
	}

	.grafixyy-solar-scale__race-start {
		left: 4px;
	}

	.grafixyy-solar-scale__race-finish {
		right: 4px;
	}

	.grafixyy-solar-scale__racer-head {
		gap: 7px;
	}

	.grafixyy-solar-scale__racer-head small {
		font-size: 0.68rem;
	}

	.grafixyy-solar-scale__race-punch {
		padding-inline: 5px;
	}

	.grafixyy-solar-scale__race-punch h3 {
		font-size:
			clamp(2rem, 9.5vw, 3rem);

		line-height: 1.35;
	}
}


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

@media (prefers-reduced-motion: reduce) {

	.grafixyy-solar-scale__racer-lane
	[data-racer-marker] {
		transition: none;
	}

	.grafixyy-solar-scale__race.is-instant
	.grafixyy-solar-scale__racer--light
	.grafixyy-solar-scale__racer-lane::after {
		animation: none;
	}
}

/* =========================================================
   IMPOSSIBLE RACE — RACER & TYPE REFINEMENT
   ========================================================= */


/* Keep name + speed together naturally in RTL. */

.grafixyy-solar-scale__racer-head {
	justify-content: flex-start;
	flex-wrap: wrap;
	column-gap: 8px;
	row-gap: 4px;
}

.grafixyy-solar-scale__racer-head small {
	margin-inline-start: 0;

	color: #9aa9ca;

	font-size: 0.82rem;
	font-weight: 800;
}


/* The racer itself now lives on the track. */

.grafixyy-solar-scale__racer-lane [data-racer-marker] {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 30px;
	height: 30px;

	border: 0;
	border-radius: 50%;

	color: #ffffff;
	background: transparent;

	font-size: 1.35rem;

	box-shadow: none;

	transition:
		left 3.5s
		cubic-bezier(.2,.75,.2,1);
}


/* Actual visual racer symbols. */

.grafixyy-solar-scale__racer[data-racer="walk"]
[data-racer-marker]::before {
	content: "🚶";
}

.grafixyy-solar-scale__racer[data-racer="car"]
[data-racer-marker]::before {
	content: "🚗";
}

.grafixyy-solar-scale__racer[data-racer="plane"]
[data-racer-marker]::before {
	content: "✈";
	color: #8ce8ff;
}

.grafixyy-solar-scale__racer[data-racer="light"]
[data-racer-marker]::before {
	content: "✦";
	color: #fff4a6;

	font-size: 1.5rem;

	text-shadow:
		0 0 8px #fff4a6,
		0 0 20px rgba(255, 220, 78, .8);
}


/* Remove the old marker visual styling for light. */

.grafixyy-solar-scale__race.is-running
[data-racer="light"]
[data-racer-marker] {
	width: 30px;
	height: 30px;

	border: 0;
	background: transparent;

	box-shadow: none;
}


/* Walking movement: tiny body bob while travelling. */

.grafixyy-solar-scale__race.is-running
.grafixyy-solar-scale__racer[data-racer="walk"]
[data-racer-marker]::before {
	animation:
		grafixyySolarWalkerStep
		420ms ease-in-out infinite;
}


/* Car vibration / drive. */

.grafixyy-solar-scale__race.is-running
.grafixyy-solar-scale__racer[data-racer="car"]
[data-racer-marker]::before {
	animation:
		grafixyySolarCarDrive
		230ms ease-in-out infinite alternate;
}


/* Plane gently tilts into flight. */

.grafixyy-solar-scale__race.is-running
.grafixyy-solar-scale__racer[data-racer="plane"]
[data-racer-marker]::before {
	display: block;

	animation:
		grafixyySolarPlaneFly
		800ms ease-in-out infinite alternate;
}


/* Light pulse. */

.grafixyy-solar-scale__race.is-running
.grafixyy-solar-scale__racer[data-racer="light"]
[data-racer-marker]::before {
	animation:
		grafixyySolarPhotonPulse
		350ms ease-in-out infinite alternate;
}


/* =========================================================
   FINAL EARTH PUNCH — SMALLER / CLEANER
   ========================================================= */

.grafixyy-solar-scale__race-punch h3 {
	max-width: 560px;

	margin:
		24px
		auto
		0;

	font-size:
		clamp(1.8rem, 3.6vw, 3rem);

	line-height: 1.48;
	letter-spacing: -0.025em;

	padding:
		0.08em
		0.08em
		0.2em;
}


/* =========================================================
   RACER MICRO MOTION
   ========================================================= */

@keyframes grafixyySolarWalkerStep {

	0%,
	100% {
		transform:
			translateY(0)
			rotate(-2deg);
	}

	50% {
		transform:
			translateY(-3px)
			rotate(3deg);
	}
}


@keyframes grafixyySolarCarDrive {

	from {
		transform:
			translateY(0)
			rotate(-1deg);
	}

	to {
		transform:
			translateY(-1px)
			rotate(1deg);
	}
}


@keyframes grafixyySolarPlaneFly {

	from {
		transform:
			translateY(2px)
			rotate(-5deg);
	}

	to {
		transform:
			translateY(-3px)
			rotate(1deg);
	}
}


@keyframes grafixyySolarPhotonPulse {

	from {
		transform: scale(.82);
		opacity: .75;
	}

	to {
		transform: scale(1.2);
		opacity: 1;
	}
}


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

@media (max-width: 720px) {

	.grafixyy-solar-scale__racer-head {
		font-size: 0.9rem;
	}

	.grafixyy-solar-scale__racer-head small {
		font-size: 0.72rem;
	}

	.grafixyy-solar-scale__race-punch h3 {
		max-width: 320px;

		font-size:
			clamp(1.7rem, 7.6vw, 2.35rem);

		line-height: 1.5;
	}
}


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

@media (prefers-reduced-motion: reduce) {

	.grafixyy-solar-scale__race
	[data-racer-marker]::before {
		animation: none !important;
	}
}

/* =========================================================
   RACE DIRECTION + RTL LABEL FIX
   ========================================================= */


/*
 * Race geography:
 * SUN = left
 * EARTH = right
 * Movement = left -> right
 */

.grafixyy-solar-scale__race-track {
	direction: ltr;
}


/*
 * Text inside racer headers remains Arabic RTL,
 * while the physical race itself stays LTR.
 */

.grafixyy-solar-scale__racer-head {
	direction: rtl;

	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: nowrap;

	gap: 8px;

	text-align: right;
}


/*
 * Keep the Arabic name + speed visually in one line.
 */

.grafixyy-solar-scale__racer-head strong {
	flex: 0 0 auto;
	white-space: nowrap;
}

.grafixyy-solar-scale__racer-head small {
	flex: 0 0 auto;

	margin: 0;

	white-space: nowrap;

	direction: rtl;
	unicode-bidi: isolate;

	color: #9aa9ca;
}


/*
 * Hide the duplicate label emoji.
 * The moving object itself remains on the track.
 */

.grafixyy-solar-scale__racer-head > span[aria-hidden="true"] {
	display: none;
}


/*
 * Make travelling symbols face toward Earth (right).
 *
 * Emoji rendering varies by OS, so this is temporary.
 * Final racers should use deterministic SVG/CSS artwork.
 */

.grafixyy-solar-scale__racer[data-racer="walk"]
[data-racer-marker]::before,
.grafixyy-solar-scale__racer[data-racer="car"]
[data-racer-marker]::before {
	display: block;

	transform: scaleX(-1);
}


/*
 * Walker needs both direction correction
 * and walking motion.
 */

.grafixyy-solar-scale__race.is-running
.grafixyy-solar-scale__racer[data-racer="walk"]
[data-racer-marker]::before {
	animation:
		grafixyySolarWalkerForward
		420ms
		ease-in-out
		infinite;
}


/*
 * Car: face Earth and vibrate slightly.
 */

.grafixyy-solar-scale__race.is-running
.grafixyy-solar-scale__racer[data-racer="car"]
[data-racer-marker]::before {
	animation:
		grafixyySolarCarForward
		230ms
		ease-in-out
		infinite alternate;
}


/*
 * Plane uses a deterministic text glyph and points right.
 */

.grafixyy-solar-scale__racer[data-racer="plane"]
[data-racer-marker]::before {
	content: "➜";

	color: #8ce8ff;

	font-size: 1.55rem;

	transform: none;
}


/* =========================================================
   FORWARD MICRO MOTION
   ========================================================= */

@keyframes grafixyySolarWalkerForward {

	0%,
	100% {
		transform:
			scaleX(-1)
			translateY(0)
			rotate(-2deg);
	}

	50% {
		transform:
			scaleX(-1)
			translateY(-3px)
			rotate(3deg);
	}
}


@keyframes grafixyySolarCarForward {

	from {
		transform:
			scaleX(-1)
			translateY(0);
	}

	to {
		transform:
			scaleX(-1)
			translateY(-2px);
	}
}


/* =========================================================
   MOBILE LABEL SAFETY
   ========================================================= */

@media (max-width: 720px) {

	.grafixyy-solar-scale__racer-head {
		gap: 6px;
	}

	.grafixyy-solar-scale__racer-head strong {
		font-size: 0.9rem;
	}

	.grafixyy-solar-scale__racer-head small {
		font-size: 0.72rem;
	}
}

/* =========================================================
   RACE POLISH V2
   Direction / aircraft / photon / reveal
   ========================================================= */


/* Keep the physical race consistently left -> right. */

.grafixyy-solar-scale__racer-lane {
	direction: ltr;
}


/* =========================================================
   PLANE
   ========================================================= */

.grafixyy-solar-scale__racer[data-racer="plane"]
[data-racer-marker]::before {
	content: "✈";

	display: block;

	color: #8cecff;

	font-size: 1.65rem;
	line-height: 1;

	/*
	 * Rotate the aircraft so its nose points
	 * toward Earth on the right.
	 */
	transform: rotate(90deg);

	text-shadow:
		0 0 12px rgba(90, 223, 255, .55);
}


.grafixyy-solar-scale__race.is-running
.grafixyy-solar-scale__racer[data-racer="plane"]
[data-racer-marker]::before {
	animation:
		grafixyySolarPlaneForward
		700ms
		ease-in-out
		infinite alternate;
}


@keyframes grafixyySolarPlaneForward {

	from {
		transform:
			rotate(90deg)
			translateX(-1px)
			translateY(2px);
	}

	to {
		transform:
			rotate(90deg)
			translateX(2px)
			translateY(-2px);
	}
}


/* =========================================================
   LIGHT
   A directional photon instead of an ambiguous dot.
   ========================================================= */

.grafixyy-solar-scale__racer[data-racer="light"]
[data-racer-marker] {
	overflow: visible;
}


.grafixyy-solar-scale__racer[data-racer="light"]
[data-racer-marker]::before {
	content: "";

	display: block;

	width: 18px;
	height: 18px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			#ffffff 0 16%,
			#fff6ae 17% 40%,
			#ffd84e 41% 58%,
			rgba(255, 210, 58, .15) 60% 100%
		);

	box-shadow:
		0 0 7px #ffffff,
		0 0 16px rgba(255, 236, 114, .95),
		0 0 30px rgba(255, 190, 43, .55);
}


.grafixyy-solar-scale__racer[data-racer="light"]
[data-racer-marker]::after {
	content: "";

	position: absolute;

	right: 12px;
	top: 50%;

	width: 58px;
	height: 5px;

	transform:
		translateY(-50%);

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(255, 195, 55, .15) 28%,
			rgba(255, 231, 112, .6) 70%,
			#fff9c8 100%
		);

	filter:
		drop-shadow(
			0 0 5px rgba(255, 225, 80, .55)
		);
}


/* Photon breathes while travelling. */

.grafixyy-solar-scale__race.is-running
.grafixyy-solar-scale__racer[data-racer="light"]
[data-racer-marker]::before {
	animation:
		grafixyySolarPhotonForward
		260ms
		ease-in-out
		infinite alternate;
}


@keyframes grafixyySolarPhotonForward {

	from {
		transform: scale(.82);
		filter: brightness(.95);
	}

	to {
		transform: scale(1.18);
		filter: brightness(1.35);
	}
}


/* =========================================================
   RESULT REVEAL
   Don't spoil the punch before the race starts.
   ========================================================= */

.grafixyy-solar-scale__racer > p {
	opacity: 0;
	transform: translateY(7px);

	transition:
		opacity 420ms ease,
		transform 420ms ease;
}


.grafixyy-solar-scale__race.is-finished
.grafixyy-solar-scale__racer > p {
	opacity: 1;
	transform: translateY(0);
}


/*
 * Reveal each result with a tiny rhythm.
 */

.grafixyy-solar-scale__race.is-finished
.grafixyy-solar-scale__racer:nth-child(1) > p {
	transition-delay: 80ms;
}

.grafixyy-solar-scale__race.is-finished
.grafixyy-solar-scale__racer:nth-child(2) > p {
	transition-delay: 170ms;
}

.grafixyy-solar-scale__race.is-finished
.grafixyy-solar-scale__racer:nth-child(3) > p {
	transition-delay: 260ms;
}

.grafixyy-solar-scale__race.is-finished
.grafixyy-solar-scale__racer:nth-child(4) > p {
	transition-delay: 350ms;
}


/* =========================================================
   RACER HEAD TYPOGRAPHY
   ========================================================= */

.grafixyy-solar-scale__racer-head {
	direction: rtl;
	justify-content: flex-start;
}


.grafixyy-solar-scale__racer-head strong,
.grafixyy-solar-scale__racer-head small {
	display: inline-block;
	white-space: nowrap;
}


.grafixyy-solar-scale__racer-head small {
	direction: ltr;
	unicode-bidi: isolate;

	margin: 0;

	color: #9aa8c8;
}


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

@media (prefers-reduced-motion: reduce) {

	.grafixyy-solar-scale__racer > p {
		transition: none;
	}

	.grafixyy-solar-scale__racer[data-racer="plane"]
	[data-racer-marker]::before,

	.grafixyy-solar-scale__racer[data-racer="light"]
	[data-racer-marker]::before {
		animation: none !important;
	}
}

/* =========================================================
   RACE DIRECTION — DETERMINISTIC FIX
   SUN (left) -> EARTH (right)
   ========================================================= */


/* ---------- PLANE: CSS aircraft pointing RIGHT ---------- */

.grafixyy-solar-scale__racer[data-racer="plane"]
[data-racer-marker]::before {
	content: "";

	position: absolute;
	left: 4px;
	top: 50%;

	width: 23px;
	height: 6px;

	transform:
		translateY(-50%);

	border-radius:
		70% 100% 100% 70%;

	background:
		linear-gradient(
			90deg,
			#63cfff,
			#e4fbff
		);

	box-shadow:
		0 0 10px rgba(87, 221, 255, .55);
}


/* Nose: unequivocally on the RIGHT. */

.grafixyy-solar-scale__racer[data-racer="plane"]
[data-racer-marker]::after {
	content: "";

	position: absolute;

	right: -2px;
	top: 50%;

	width: 0;
	height: 0;

	transform:
		translateY(-50%);

	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 11px solid #e8fcff;

	filter:
		drop-shadow(
			0 0 4px rgba(89, 222, 255, .6)
		);
}


/* Small flight movement without rotating the aircraft. */

.grafixyy-solar-scale__race.is-running
.grafixyy-solar-scale__racer[data-racer="plane"]
[data-racer-marker] {
	animation:
		grafixyySolarAircraftCruise
		520ms ease-in-out infinite alternate;
}


@keyframes grafixyySolarAircraftCruise {

	from {
		margin-top: 2px;
	}

	to {
		margin-top: -3px;
	}
}


/* Kill previous plane glyph animation. */

.grafixyy-solar-scale__race.is-running
.grafixyy-solar-scale__racer[data-racer="plane"]
[data-racer-marker]::before {
	animation: none;
}


/* ---------- LIGHT: HEAD RIGHT / TAIL LEFT ---------- */

.grafixyy-solar-scale__racer[data-racer="light"]
[data-racer-marker]::before {
	content: "";

	position: absolute;

	left: 50%;
	top: 50%;

	width: 17px;
	height: 17px;

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

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			#ffffff 0 18%,
			#fff8b4 20% 45%,
			#ffd747 48% 68%,
			rgba(255, 207, 51, .12) 70%
		);

	box-shadow:
		0 0 7px #ffffff,
		0 0 17px rgba(255, 235, 104, .95),
		0 0 31px rgba(255, 185, 35, .55);
}


/*
 * Tail extends to LEFT because the photon travels RIGHT.
 */

.grafixyy-solar-scale__racer[data-racer="light"]
[data-racer-marker]::after {
	content: "";

	position: absolute;

	right: 50%;
	top: 50%;

	width: 64px;
	height: 5px;

	transform:
		translateY(-50%);

	border-radius: 999px 0 0 999px;

	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(255, 183, 37, .15) 22%,
			rgba(255, 223, 79, .5) 62%,
			#fff9bf 100%
		);

	filter:
		drop-shadow(
			0 0 5px rgba(255, 220, 76, .6)
		);

	pointer-events: none;
}


/* Animate only glow intensity, never direction. */

.grafixyy-solar-scale__race.is-running
.grafixyy-solar-scale__racer[data-racer="light"]
[data-racer-marker]::before {
	animation:
		grafixyySolarPhotonGlow
		260ms ease-in-out infinite alternate;
}


@keyframes grafixyySolarPhotonGlow {

	from {
		filter: brightness(.9);
	}

	to {
		filter: brightness(1.45);
	}
}


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

@media (prefers-reduced-motion: reduce) {

	.grafixyy-solar-scale__race.is-running
	.grafixyy-solar-scale__racer[data-racer="plane"]
	[data-racer-marker],

	.grafixyy-solar-scale__race.is-running
	.grafixyy-solar-scale__racer[data-racer="light"]
	[data-racer-marker]::before {
		animation: none;
	}
}

/* =========================================================
   EARTH RACE PAYOFF
   Freeze -> shock -> Neptune warning
   ========================================================= */


/* ---------------------------------------------------------
   FREEZE MOMENT
   --------------------------------------------------------- */

.grafixyy-solar-scale__race-freeze {
	position: relative;
	z-index: 3;

	max-width: 620px;
	margin: 30px auto 0;
	padding: 27px 20px;

	text-align: center;

	border-top:
		1px solid rgba(255, 211, 84, 0.14);

	border-bottom:
		1px solid rgba(89, 217, 255, 0.12);

	background:
		radial-gradient(
			circle at 50% 50%,
			rgba(255, 207, 70, 0.055),
			transparent 66%
		);
}

.grafixyy-solar-scale__race-freeze p {
	margin: 0 0 5px;

	color: #8291b3;

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

.grafixyy-solar-scale__race-freeze strong {
	display: block;

	margin-inline: auto;
	padding:
		0.08em
		0.08em
		0.16em;

	color: #ffffff;

	font-size:
		clamp(1.55rem, 3.2vw, 2.65rem);

	font-weight: 900;
	line-height: 1.42;
	letter-spacing: -0.025em;

	background:
		linear-gradient(
			105deg,
			#ffd45d,
			#fff8dc 40%,
			#7ce8ff 77%,
			#8181ff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}


/* ---------------------------------------------------------
   AFTER THE RACE
   Give the racers a frozen / inspected feeling.
   --------------------------------------------------------- */

.grafixyy-solar-scale__race.is-finished
.grafixyy-solar-scale__racer-lane {
	box-shadow:
		inset 0 0 18px rgba(73, 116, 184, 0.035);
}

.grafixyy-solar-scale__race.is-finished
.grafixyy-solar-scale__racer[data-racer="walk"]
[data-racer-marker],

.grafixyy-solar-scale__race.is-finished
.grafixyy-solar-scale__racer[data-racer="car"]
[data-racer-marker],

.grafixyy-solar-scale__race.is-finished
.grafixyy-solar-scale__racer[data-racer="plane"]
[data-racer-marker] {
	filter:
		drop-shadow(
			0 0 8px rgba(255, 196, 74, 0.22)
		);
}


/* ---------------------------------------------------------
   PUNCH RESULTS
   --------------------------------------------------------- */

.grafixyy-solar-scale__race-punch {
	max-width: 650px;

	margin:
		28px
		auto
		0;

	padding:
		30px
		20px
		4px;
}

.grafixyy-solar-scale__race-punch > p {
	margin: 9px 0;

	color: #9daaC8;

	font-size:
		clamp(0.95rem, 1.8vw, 1.05rem);

	line-height: 1.75;
}

.grafixyy-solar-scale__race-punch > p strong {
	color: #f7f8ff;
}


/* Earth punch: strong but no giant overlapping typography. */

.grafixyy-solar-scale__race-punch > h3 {
	max-width: 480px;

	margin:
		30px
		auto
		0;

	padding:
		0.08em
		0.08em
		0.18em;

	font-size:
		clamp(1.8rem, 3.5vw, 2.85rem);

	line-height: 1.5;
	letter-spacing: -0.025em;

	background:
		linear-gradient(
			105deg,
			#ffd367 0%,
			#fff6d4 40%,
			#74e6ff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}


/* =========================================================
   NEPTUNE WARNING
   ========================================================= */

.grafixyy-solar-scale__neptune-ratio {
	position: relative;

	max-width: 580px;

	margin:
		34px
		auto
		0;

	padding:
		34px
		20px
		31px;

	overflow: hidden;

	text-align: center;

	border:
		1px solid rgba(82, 109, 255, 0.28);

	border-radius: 25px;

	background:
		radial-gradient(
			circle at 50% 85%,
			rgba(47, 83, 255, 0.18),
			transparent 54%
		),
		linear-gradient(
			180deg,
			rgba(24, 30, 67, 0.68),
			rgba(5, 8, 23, 0.82)
		);

	box-shadow:
		0 20px 65px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


/* Neptune-like distant glow. */

.grafixyy-solar-scale__neptune-ratio::before {
	content: "";

	position: absolute;

	left: 50%;
	bottom: -73px;

	width: 145px;
	height: 145px;

	transform:
		translateX(-50%);

	border-radius: 50%;

	background:
		radial-gradient(
			circle at 37% 30%,
			#91aeff,
			#4669ee 43%,
			#273ba3 73%,
			#17205c 100%
		);

	box-shadow:
		0 0 25px rgba(74, 104, 255, 0.4),
		0 0 70px rgba(47, 75, 255, 0.18);

	opacity: 0.72;
}


/* Scanner line. */

.grafixyy-solar-scale__neptune-ratio::after {
	content: "";

	position: absolute;

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

	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(100, 225, 255, 0.65),
			transparent
		);

	opacity: 0.38;

	animation:
		grafixyySolarNeptuneScan
		2.8s
		ease-in-out
		infinite;
}


.grafixyy-solar-scale__neptune-ratio > * {
	position: relative;
	z-index: 2;
}


.grafixyy-solar-scale__neptune-ratio > span {
	display: inline-flex;

	padding:
		6px
		10px;

	border:
		1px solid rgba(105, 128, 255, 0.22);

	border-radius: 999px;

	color: #91a8ff;
	background: rgba(68, 84, 194, 0.08);

	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.11em;
}


.grafixyy-solar-scale__neptune-ratio > p {
	margin:
		14px
		0
		0;

	color: #aab7d6;

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


.grafixyy-solar-scale__neptune-ratio > strong {
	display: block;

	margin:
		7px
		0
		6px;

	padding:
		0.04em
		0
		0.1em;

	color: #86a3ff;

	font-size:
		clamp(3.6rem, 9vw, 6.8rem);

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

	letter-spacing: -0.065em;

	text-shadow:
		0 0 20px rgba(84, 110, 255, 0.3),
		0 0 55px rgba(47, 87, 255, 0.15);
}


/* =========================================================
   SCAN
   ========================================================= */

@keyframes grafixyySolarNeptuneScan {

	0%,
	100% {
		transform:
			translateY(-24px)
			scaleX(.75);

		opacity: 0.16;
	}

	50% {
		transform:
			translateY(24px)
			scaleX(1);

		opacity: 0.65;
	}
}


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

@media (max-width: 720px) {

	.grafixyy-solar-scale__race-freeze {
		margin-top: 24px;
		padding:
			24px
			10px;
	}

	.grafixyy-solar-scale__race-freeze strong {
		max-width: 330px;

		font-size:
			clamp(1.5rem, 7vw, 2.1rem);

		line-height: 1.48;
	}


	.grafixyy-solar-scale__race-punch {
		padding-inline: 7px;
	}


	.grafixyy-solar-scale__race-punch > h3 {
		max-width: 310px;

		font-size:
			clamp(1.75rem, 7.5vw, 2.25rem);

		line-height: 1.52;
	}


	.grafixyy-solar-scale__neptune-ratio {
		margin-top: 28px;

		padding:
			29px
			12px
			28px;

		border-radius: 22px;
	}


	.grafixyy-solar-scale__neptune-ratio > strong {
		font-size:
			clamp(3.5rem, 18vw, 5rem);

		line-height: 1.05;
	}
}


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

@media (prefers-reduced-motion: reduce) {

	.grafixyy-solar-scale__neptune-ratio::after {
		animation: none;
	}
}

/* =========================================================
   RACE SPEED LABEL — ARABIC DIRECTION FIX
   ========================================================= */

.grafixyy-solar-scale__racer-head small {
	direction: rtl;
	unicode-bidi: isolate;
	text-align: right;
}

/* =========================================================
   DEEP SPACE RUN // NEPTUNE
   ========================================================= */

.grafixyy-solar-scale__neptune-journey {
	max-width: 980px;
	margin: 90px auto 0;
	padding: clamp(28px, 5vw, 54px);

	overflow: hidden;

	border: 1px solid rgba(75, 101, 255, 0.2);
	border-radius: 34px;

	background:
		radial-gradient(
			circle at 100% 70%,
			rgba(47, 72, 255, 0.13),
			transparent 33%
		),
		radial-gradient(
			circle at 0% 25%,
			rgba(255, 177, 50, 0.08),
			transparent 25%
		),
		linear-gradient(
			135deg,
			#060814,
			#02040c 58%,
			#05081a
		);

	box-shadow:
		0 35px 100px rgba(0, 0, 0, 0.36);
}


.grafixyy-solar-scale__neptune-journey-intro {
	max-width: 720px;
	margin-inline: auto;

	text-align: center;
}


.grafixyy-solar-scale__neptune-journey-intro h2 {
	margin: 10px auto 0;
	padding-bottom: 0.16em;

	font-size: clamp(2rem, 4vw, 3.4rem);
	font-weight: 900;
	line-height: 1.4;

	background:
		linear-gradient(
			105deg,
			#ffd164,
			#fff8db 32%,
			#82e5ff 64%,
			#6872ff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}


.grafixyy-solar-scale__neptune-journey-intro > p:not(.grafixyy-solar-scale__stage-label) {
	max-width: 610px;
	margin: 12px auto 0;

	color: #aeb9d7;
	line-height: 1.85;
}


/* =========================================================
   RUN CONTAINER
   ========================================================= */

.grafixyy-solar-scale__deep-run {
	position: relative;

	margin-top: 42px;
	padding:
		28px
		clamp(16px, 4vw, 34px)
		32px;

	border:
		1px solid rgba(112, 135, 226, 0.12);

	border-radius: 26px;

	background:
		rgba(2, 4, 13, 0.67);
}


.grafixyy-solar-scale__deep-run-head {
	display: grid;
	grid-template-columns:
		1fr
		auto
		1fr;

	align-items: center;
	gap: 12px;

	direction: ltr;
}


.grafixyy-solar-scale__deep-run-head span {
	color: #7885a8;

	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: 0.12em;
}


.grafixyy-solar-scale__deep-run-head span:last-child {
	text-align: right;
}


.grafixyy-solar-scale__deep-run-head strong {
	padding: 7px 12px;

	border:
		1px solid rgba(102, 133, 255, 0.19);

	border-radius: 10px;

	color: #dbe3ff;
	background: rgba(67, 89, 172, 0.08);

	font-size: clamp(0.95rem, 2vw, 1.15rem);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
}


/* =========================================================
   THE ACTUAL RELATIVE ORBIT TRACK
   Sun = 0%
   Earth ≈ 3.33%
   Jupiter ≈ 17.31%
   Saturn ≈ 31.87%
   Uranus ≈ 63.82%
   Neptune = 100%
   ========================================================= */

.grafixyy-solar-scale__deep-track {
	position: relative;

	height: 330px;
	margin-top: 35px;

	direction: ltr;
}


/* Main distance line. */

.grafixyy-solar-scale__deep-track::before {
	content: "";

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

	height: 2px;

	transform:
		translateY(-50%);

	background:
		linear-gradient(
			90deg,
			rgba(255, 190, 66, 0.4),
			rgba(106, 125, 187, 0.17) 20%,
			rgba(85, 104, 171, 0.19) 60%,
			rgba(70, 104, 255, 0.42)
		);
}


/* Progress travelled by light. */

.grafixyy-solar-scale__deep-progress {
	position: absolute;
	z-index: 2;

	left: 0;
	top: 50%;

	width: 0;
	height: 3px;

	transform:
		translateY(-50%);

	background:
		linear-gradient(
			90deg,
			#ffc64f,
			#fff7be 38%,
			#8feeff 70%,
			#7285ff
		);

	box-shadow:
		0 0 10px rgba(255, 232, 126, 0.4),
		0 0 20px rgba(95, 215, 255, 0.18);
}


/* =========================================================
   PHOTON
   ========================================================= */

.grafixyy-solar-scale__deep-photon {
	position: absolute;
	z-index: 7;

	left: 0;
	top: 50%;

	width: 17px;
	height: 17px;

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

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			#ffffff 0 19%,
			#fff6ac 21% 47%,
			#ffd84d 50% 68%,
			rgba(255, 210, 62, 0.12) 70%
		);

	box-shadow:
		0 0 7px #ffffff,
		0 0 17px rgba(255, 235, 105, 0.95),
		0 0 33px rgba(255, 187, 42, 0.52);
}


/* Light tail goes behind the photon = left. */

.grafixyy-solar-scale__deep-photon::after {
	content: "";

	position: absolute;

	right: 50%;
	top: 50%;

	width: 54px;
	height: 4px;

	transform:
		translateY(-50%);

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255, 204, 56, 0.18),
			#fff5ab
		);

	border-radius: 999px;
}


/* =========================================================
   PLANET STOPS
   ========================================================= */

.grafixyy-solar-scale__deep-stop {
	position: absolute;
	z-index: 4;

	top: 50%;

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

	width: 86px;

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

	color: #71809f;

	text-align: center;

	transition:
		color 250ms ease,
		filter 250ms ease,
		opacity 250ms ease;

	opacity: 0.46;
}


.grafixyy-solar-scale__deep-stop > span {
	display: block;

	width: 13px;
	height: 13px;

	margin-bottom: 10px;

	border:
		2px solid currentColor;

	border-radius: 50%;

	background: #050812;

	box-shadow:
		0 0 0 4px #040611;
}


.grafixyy-solar-scale__deep-stop strong {
	font-size: 0.78rem;
	font-weight: 900;

	white-space: nowrap;
}


.grafixyy-solar-scale__deep-stop small {
	margin-top: 4px;

	color: #63708d;

	font-size: 0.62rem;
	font-weight: 750;

	white-space: nowrap;
}


/*
 * Vertical staggering keeps nearby inner markers readable.
 */

.grafixyy-solar-scale__deep-stop--sun {
	left: 0%;
	top: 35%;

	color: #ffc550;
	opacity: 1;
}

.grafixyy-solar-scale__deep-stop--earth {
	left: 3.33%;
	top: 65%;
}

.grafixyy-solar-scale__deep-stop--jupiter {
	left: 17.31%;
	top: 36%;
}

.grafixyy-solar-scale__deep-stop--saturn {
	left: 31.87%;
	top: 65%;
}

.grafixyy-solar-scale__deep-stop--uranus {
	left: 63.82%;
	top: 36%;
}

.grafixyy-solar-scale__deep-stop--neptune {
	left: 100%;
	top: 65%;

	color: #6e86ff;
}


/* Make planet markers visually distinct. */

.grafixyy-solar-scale__deep-stop--sun > span {
	width: 25px;
	height: 25px;

	border: 0;

	background:
		radial-gradient(
			circle at 35% 30%,
			#fff8b8,
			#ffc440 44%,
			#ff7138
		);

	box-shadow:
		0 0 14px rgba(255, 199, 69, 0.72),
		0 0 30px rgba(255, 133, 39, 0.25);
}


.grafixyy-solar-scale__deep-stop--earth > span {
	background: #47cef4;
	border-color: #99efff;

	box-shadow:
		0 0 12px rgba(74, 217, 255, 0.62);
}


.grafixyy-solar-scale__deep-stop--jupiter > span {
	width: 22px;
	height: 22px;

	border-color: #d5b28f;

	background:
		linear-gradient(
			180deg,
			#d7b58f 0 28%,
			#8f654e 29% 40%,
			#ddbd99 41% 70%,
			#a56e52 71%
		);
}


.grafixyy-solar-scale__deep-stop--saturn > span {
	width: 18px;
	height: 18px;

	border-color: #ead28e;
	background: #d8bd73;
}


.grafixyy-solar-scale__deep-stop--uranus > span {
	width: 17px;
	height: 17px;

	border-color: #b8f1f4;
	background: #79d9df;
}


.grafixyy-solar-scale__deep-stop--neptune > span {
	width: 19px;
	height: 19px;

	border-color: #9eb1ff;

	background:
		radial-gradient(
			circle at 35% 30%,
			#90aaff,
			#4165e8 58%,
			#25389c
		);

	box-shadow:
		0 0 18px rgba(67, 96, 255, 0.5);
}


/* Passed by the photon. */

.grafixyy-solar-scale__deep-stop.is-passed {
	color: #eef4ff;
	opacity: 1;

	filter:
		drop-shadow(
			0 0 8px rgba(109, 211, 255, 0.2)
		);
}


.grafixyy-solar-scale__deep-stop.is-passed small {
	color: #9eaed0;
}


/* =========================================================
   LIVE STATUS / BUTTON
   ========================================================= */

.grafixyy-solar-scale__deep-status {
	min-height: 30px;
	margin-top: 8px;

	color: #a8b5d2;

	text-align: center;
	font-size: 0.95rem;
	font-weight: 750;
	line-height: 1.7;
}


.grafixyy-solar-scale__deep-launch {
	display: flex;
	margin:
		17px
		auto
		0;
}


/* =========================================================
   NEPTUNE REVEAL
   ========================================================= */

.grafixyy-solar-scale__neptune-reveal {
	position: relative;

	max-width: 760px;

	margin:
		48px
		auto
		0;

	padding:
		clamp(35px, 6vw, 64px)
		clamp(18px, 5vw, 46px);

	overflow: hidden;

	text-align: center;

	border:
		1px solid rgba(80, 111, 255, 0.25);

	border-radius: 30px;

	background:
		radial-gradient(
			circle at 50% 110%,
			rgba(49, 75, 255, 0.24),
			transparent 48%
		),
		#040714;
}


.grafixyy-solar-scale__neptune-reveal::before {
	content: "";

	position: absolute;

	left: 50%;
	bottom: -150px;

	width: 280px;
	height: 280px;

	transform:
		translateX(-50%);

	border-radius: 50%;

	background:
		radial-gradient(
			circle at 35% 30%,
			#91adff,
			#4568ed 40%,
			#273ba4 67%,
			#111b57
		);

	box-shadow:
		0 0 45px rgba(65, 93, 255, 0.38),
		0 0 100px rgba(43, 69, 255, 0.14);

	opacity: 0.62;
}


.grafixyy-solar-scale__neptune-reveal > * {
	position: relative;
	z-index: 2;
}


.grafixyy-solar-scale__neptune-reveal > h2 {
	margin: 11px 0 0;

	font-size:
		clamp(2rem, 4.5vw, 3.8rem);

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

	background:
		linear-gradient(
			105deg,
			#ffffff,
			#a8c0ff 45%,
			#6478ff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}


.grafixyy-solar-scale__neptune-reveal
> strong {
	display: block;

	margin:
		18px
		0
		10px;

	padding-bottom: 0.1em;

	color: #87a2ff;

	font-size:
		clamp(2.4rem, 7vw, 5.2rem);

	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.05em;

	text-shadow:
		0 0 25px rgba(73, 101, 255, 0.32);
}


.grafixyy-solar-scale__neptune-reveal
> p {
	margin: 0;

	color: #9eaccb;

	line-height: 1.75;
}


/* =========================================================
   LIGHT SHOCK
   ========================================================= */

.grafixyy-solar-scale__light-shock {
	max-width: 570px;

	margin:
		38px
		auto
		0;

	padding:
		28px
		18px;

	border-top:
		1px solid rgba(255, 226, 104, 0.13);

	border-bottom:
		1px solid rgba(99, 126, 255, 0.16);
}


.grafixyy-solar-scale__light-shock > span {
	display: block;

	color: #8d9abc;
	font-weight: 800;
}


.grafixyy-solar-scale__light-shock > strong {
	display: block;

	margin:
		8px
		0;

	padding-bottom: 0.1em;

	font-size:
		clamp(1.65rem, 3.8vw, 2.8rem);

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

	background:
		linear-gradient(
			105deg,
			#fff5a7,
			#ffffff 43%,
			#86e7ff 70%,
			#7780ff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}


.grafixyy-solar-scale__light-shock > p {
	margin: 0;

	color: #8e9bb9;
	line-height: 1.7;
}


/* =========================================================
   NOT THE END
   ========================================================= */

.grafixyy-solar-scale__not-the-end {
	max-width: 600px;

	margin:
		33px
		auto
		0;

	padding:
		27px
		18px;

	border:
		1px solid rgba(120, 137, 255, 0.12);

	border-radius: 19px;

	background: rgba(1, 3, 11, 0.48);
}


.grafixyy-solar-scale__not-the-end p {
	margin: 0;

	color: #7785a6;
	font-weight: 750;
}


.grafixyy-solar-scale__not-the-end strong {
	display: block;

	margin-top: 8px;

	color: #f4f6ff;

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

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


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

@media (max-width: 720px) {

	.grafixyy-solar-scale__neptune-journey {
		margin-top: 68px;

		padding:
			28px
			12px;

		border-radius: 25px;
	}


	.grafixyy-solar-scale__neptune-journey-intro h2 {
		font-size:
			clamp(1.9rem, 8.5vw, 2.65rem);

		line-height: 1.45;
	}


	.grafixyy-solar-scale__deep-run {
		margin-top: 31px;

		padding:
			23px
			8px
			27px;

		border-radius: 21px;
	}


	.grafixyy-solar-scale__deep-run-head {
		gap: 7px;
	}


	.grafixyy-solar-scale__deep-run-head span {
		font-size: 0.55rem;
		letter-spacing: 0.07em;
	}


	.grafixyy-solar-scale__deep-run-head strong {
		padding:
			6px
			8px;

		font-size: 0.83rem;
	}


	.grafixyy-solar-scale__deep-track {
		height: 390px;
		margin-top: 25px;
	}


	/*
	 * Labels are narrower on phones.
	 * Vertical staggering prevents overlap.
	 */

	.grafixyy-solar-scale__deep-stop {
		width: 66px;
	}


	.grafixyy-solar-scale__deep-stop strong {
		font-size: 0.67rem;
	}


	.grafixyy-solar-scale__deep-stop small {
		font-size: 0.52rem;
	}


	.grafixyy-solar-scale__deep-stop--sun {
		top: 30%;
	}

	.grafixyy-solar-scale__deep-stop--earth {
		top: 70%;
	}

	.grafixyy-solar-scale__deep-stop--jupiter {
		top: 31%;
	}

	.grafixyy-solar-scale__deep-stop--saturn {
		top: 70%;
	}

	.grafixyy-solar-scale__deep-stop--uranus {
		top: 31%;
	}

	.grafixyy-solar-scale__deep-stop--neptune {
		top: 70%;
	}


	.grafixyy-solar-scale__neptune-reveal {
		margin-top: 38px;

		padding:
			34px
			13px
			43px;

		border-radius: 24px;
	}


	.grafixyy-solar-scale__neptune-reveal
	> strong {
		font-size:
			clamp(2.25rem, 11vw, 3.5rem);

		line-height: 1.16;
	}


	.grafixyy-solar-scale__light-shock
	> strong {
		font-size:
			clamp(1.55rem, 7.2vw, 2.15rem);

		line-height: 1.5;
	}
}


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

@media (prefers-reduced-motion: reduce) {

	.grafixyy-solar-scale__deep-stop {
		transition: none;
	}
}

/* =========================================================
   DEEP RUN EDGE + DESKTOP REVEAL FIX
   ========================================================= */


/*
 * Edge planets sit at 0% and 100%.
 * Keep them fully inside the visual track.
 */

.grafixyy-solar-scale__deep-stop--sun {
	left: 0;

	transform:
		translate(0, -50%);
}

.grafixyy-solar-scale__deep-stop--neptune {
	left: 100%;

	transform:
		translate(-100%, -50%);
}


/*
 * Photon also finishes at 100%.
 * Keep its glowing head inside the track at completion.
 */

.grafixyy-solar-scale__deep-photon {
	max-width: 100%;
}

.grafixyy-solar-scale__deep-photon[style*="left: 100%"] {
	transform:
		translate(-100%, -50%);
}


/* =========================================================
   DESKTOP NEPTUNE NUMBER
   ========================================================= */

@media (min-width: 721px) {

	.grafixyy-solar-scale__neptune-reveal {
		max-width: 820px;
	}

	.grafixyy-solar-scale__neptune-reveal > h2 {
		font-size:
			clamp(2.1rem, 3.5vw, 3.15rem);

		line-height: 1.38;
	}

	.grafixyy-solar-scale__neptune-reveal > strong {
		max-width: 690px;

		margin:
			18px
			auto
			12px;

		font-size:
			clamp(2.2rem, 4.2vw, 3.7rem);

		line-height: 1.18;
		letter-spacing: -0.035em;

		white-space: nowrap;
	}
}


/* On narrower screens we intentionally allow wrapping. */

@media (max-width: 720px) {

	.grafixyy-solar-scale__neptune-reveal > strong {
		white-space: normal;
	}
}

/* =========================================================
   MOBILE DEEP-TRACK COLLISION FIX
   Preserve orbital positions, separate labels vertically.
   ========================================================= */

@media (max-width: 720px) {

	.grafixyy-solar-scale__deep-track {
		height: 470px;
	}

	/*
	 * Keep the actual horizontal orbital positions.
	 * Only move the labels vertically to avoid collisions.
	 */

	.grafixyy-solar-scale__deep-stop--sun {
		top: 20%;
	}

	.grafixyy-solar-scale__deep-stop--earth {
		top: 78%;
	}

	.grafixyy-solar-scale__deep-stop--jupiter {
		top: 37%;
	}

	.grafixyy-solar-scale__deep-stop--saturn {
		top: 68%;
	}

	.grafixyy-solar-scale__deep-stop--uranus {
		top: 30%;
	}

	.grafixyy-solar-scale__deep-stop--neptune {
		top: 78%;
	}


	/*
	 * Narrow the label footprint without shrinking
	 * the planet itself.
	 */

	.grafixyy-solar-scale__deep-stop {
		width: 56px;
	}


	.grafixyy-solar-scale__deep-stop strong {
		font-size: 0.62rem;
	}


	.grafixyy-solar-scale__deep-stop small {
		font-size: 0.48rem;
	}


	/*
	 * The Sun remains visually important,
	 * but no longer consumes neighboring label space.
	 */

	.grafixyy-solar-scale__deep-stop--sun > span {
		width: 21px;
		height: 21px;
	}


	/*
	 * Inner-system labels are especially crowded.
	 */

	.grafixyy-solar-scale__deep-stop--earth {
		width: 52px;
	}

	.grafixyy-solar-scale__deep-stop--jupiter {
		width: 60px;
	}
}

/* =========================================================
   NEPTUNE DISTANCE — CENTERED FINAL REVEAL
   ========================================================= */

.grafixyy-solar-scale__neptune-distance {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 100%;
	max-width: 680px;

	margin:
		20px
		auto
		14px;

	padding-inline: 12px;

	text-align: center;
}


.grafixyy-solar-scale__neptune-distance > strong {
	display: block;

	width: 100%;
	margin: 0;

	padding:
		0.08em
		0.08em
		0.16em;

	text-align: center;

	font-size:
		clamp(2.2rem, 4.4vw, 3.8rem);

	font-weight: 900;
	line-height: 1.35;
	letter-spacing: -0.03em;

	background:
		linear-gradient(
			105deg,
			#ffffff 0%,
			#b7c9ff 34%,
			#798eff 67%,
			#55d9ff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	filter:
		drop-shadow(
			0 0 22px rgba(73, 101, 255, 0.22)
		);
}


.grafixyy-solar-scale__neptune-distance > span {
	display: inline-flex;

	margin-top: 3px;
	padding:
		8px
		13px;

	border:
		1px solid rgba(111, 137, 255, 0.16);

	border-radius: 999px;

	color: #8f9fc3;
	background: rgba(48, 62, 121, 0.08);

	font-size:
		clamp(0.78rem, 1.5vw, 0.95rem);

	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;

	text-align: center;
}


/*
 * Override the old direct-child rule.
 * The large number now lives inside .neptune-distance.
 */

.grafixyy-solar-scale__neptune-reveal
> .grafixyy-solar-scale__neptune-distance {
	position: relative;
	z-index: 2;
}


@media (max-width: 720px) {

	.grafixyy-solar-scale__neptune-distance {
		max-width: 340px;

		margin-top: 17px;

		padding-inline: 5px;
	}


	.grafixyy-solar-scale__neptune-distance > strong {
		font-size:
			clamp(2rem, 9.5vw, 2.9rem);

		line-height: 1.43;
	}


	.grafixyy-solar-scale__neptune-distance > span {
		font-size: 0.76rem;
	}
}
/* =========================================================
   MISSION SLOT
   ========================================================= */

.grafixyy-solar-scale__mission-slot {
	max-width: 600px;

	margin: 38px auto 0;
	padding: 28px 20px;

	text-align: center;

	border-top:
		1px solid rgba(92, 120, 255, 0.15);

	border-bottom:
		1px solid rgba(92, 120, 255, 0.15);
}

.grafixyy-solar-scale__mission-kicker {
	margin: 0 0 10px;

	color: #8ea5ff;

	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: 0.12em;
}

.grafixyy-solar-scale__mission-slot > strong {
	display: block;

	color: #ffffff;

	font-size: clamp(1.35rem, 3vw, 2rem);
	font-weight: 900;
}

.grafixyy-solar-scale__mission-slot > p:not(.grafixyy-solar-scale__mission-kicker) {
	margin: 6px 0 0;

	color: #a5b1cf;
	line-height: 1.7;
}

.grafixyy-solar-scale__mission-slot > span {
	display: inline-block;

	margin-top: 15px;

	color: #7f8dac;

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


/* =========================================================
   BONUS GATE
   ========================================================= */

.grafixyy-solar-scale__bonus-gate {
	max-width: 670px;

	margin: 45px auto 0;
	padding: 35px 20px;

	text-align: center;

	border:
		1px solid rgba(255, 190, 67, 0.11);

	border-radius: 24px;

	background:
		radial-gradient(
			circle at 50% 0%,
			rgba(255, 182, 54, 0.055),
			transparent 48%
		);
}

.grafixyy-solar-scale__bonus-gate > p {
	max-width: 560px;

	margin: 8px auto 0;

	color: #a9b4d1;

	line-height: 1.8;
}

.grafixyy-solar-scale__bonus-gate > h3 {
	max-width: 570px;

	margin: 8px auto 0;

	padding:
		0.08em
		0.08em
		0.18em;

	font-size:
		clamp(1.8rem, 3.7vw, 2.9rem);

	font-weight: 900;
	line-height: 1.45;
	letter-spacing: -0.025em;

	background:
		linear-gradient(
			105deg,
			#ffd162,
			#fff7d7 37%,
			#91eaff 70%,
			#7981ff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}


/* =========================================================
   TRUTH REVEAL
   ========================================================= */

.grafixyy-solar-scale__truth-reveal {
	position: relative;

	max-width: 760px;

	margin: 38px auto 0;
	padding:
		38px
		clamp(15px, 4vw, 34px);

	overflow: hidden;

	text-align: center;

	border:
		1px solid rgba(104, 125, 255, 0.18);

	border-radius: 27px;

	background:
		radial-gradient(
			circle at 50% 50%,
			rgba(71, 93, 255, 0.07),
			transparent 55%
		),
		#02040c;
}

.grafixyy-solar-scale__truth-reveal > h3 {
	margin: 10px auto 0;

	color: #f6f7ff;

	font-size:
		clamp(1.7rem, 3.5vw, 2.7rem);

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


/* =========================================================
   SAME-SCALE STAGE
   ========================================================= */

.grafixyy-solar-scale__truth-stage {
	position: relative;

	height: 245px;

	margin: 31px auto 0;

	direction: ltr;

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

	border-bottom:
		1px solid rgba(255,255,255,0.04);

	background:
		linear-gradient(
			90deg,
			rgba(255, 178, 48, 0.035),
			transparent 22%,
			transparent 75%,
			rgba(66, 89, 255, 0.05)
		);
}


/* The orbital-distance baseline. */

.grafixyy-solar-scale__truth-line {
	position: absolute;

	left: 3%;
	right: 3%;
	top: 50%;

	height: 2px;

	transform:
		translateY(-50%);

	background:
		linear-gradient(
			90deg,
			rgba(255, 192, 68, 0.28),
			rgba(100, 120, 182, 0.15) 30%,
			rgba(76, 101, 205, 0.22),
			rgba(77, 102, 255, 0.35)
		);
}


/*
 * BEFORE the truth switch:
 * planets are deliberately enlarged so users can see them.
 */

.grafixyy-solar-scale__truth-object {
	position: absolute;
	z-index: 3;

	top: 50%;

	display: block;

	border-radius: 50%;

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

	transition:
		width 900ms cubic-bezier(.22,1,.36,1),
		height 900ms cubic-bezier(.22,1,.36,1),
		box-shadow 900ms ease,
		opacity 900ms ease;
}


/* Orbital positions remain proportional to Neptune. */

.grafixyy-solar-scale__truth-object--sun {
	left: 3%;

	width: 62px;
	height: 62px;

	background:
		radial-gradient(
			circle at 35% 30%,
			#fff7b3,
			#ffc43f 45%,
			#ff6d39
		);

	box-shadow:
		0 0 18px rgba(255, 199, 67, 0.6),
		0 0 45px rgba(255, 118, 45, 0.2);
}

.grafixyy-solar-scale__truth-object--earth {
	left: 6.23%;

	width: 17px;
	height: 17px;

	background: #4bd8ff;

	box-shadow:
		0 0 15px rgba(75,216,255,.6);
}

.grafixyy-solar-scale__truth-object--jupiter {
	left: 19.78%;

	width: 37px;
	height: 37px;

	background: #c99d77;
}

.grafixyy-solar-scale__truth-object--saturn {
	left: 33.9%;

	width: 32px;
	height: 32px;

	background: #d9bc73;
}

.grafixyy-solar-scale__truth-object--uranus {
	left: 64.9%;

	width: 23px;
	height: 23px;

	background: #79dce3;
}

.grafixyy-solar-scale__truth-object--neptune {
	left: 97%;

	width: 23px;
	height: 23px;

	background:
		radial-gradient(
			circle at 35% 30%,
			#8da7ff,
			#4165e9 60%,
			#253a9f
		);

	box-shadow:
		0 0 16px rgba(69,98,255,.55);
}


/*
 * Location indicators stay visible after physical-scale objects
 * become too small for ordinary screen pixels.
 */

.grafixyy-solar-scale__truth-object::after {
	content: "";

	position: absolute;

	left: 50%;
	top: calc(100% + 14px);

	width: 4px;
	height: 4px;

	transform:
		translateX(-50%);

	border-radius: 50%;

	background: #647293;

	box-shadow:
		0 0 0 3px rgba(79,94,133,.12);

	opacity: 0;

	transition:
		opacity 450ms ease 550ms;
}


/* =========================================================
   THE TRUTH SWITCH
   ========================================================= */

/*
 * With the Sun-to-Neptune distance fitted inside this stage,
 * actual body diameters are sub-pixel at ordinary screen widths.
 *
 * We intentionally collapse the visible enlarged bodies instead
 * of drawing fake "true-scale" circles.
 */

.grafixyy-solar-scale__truth-reveal.is-truth
.grafixyy-solar-scale__truth-object {
	width: 1px;
	height: 1px;

	box-shadow: none;

	opacity: 0.22;
}

.grafixyy-solar-scale__truth-reveal.is-truth
.grafixyy-solar-scale__truth-object::after {
	opacity: 1;
}


/* Sun is larger than the planets physically, but even it is
   sub-pixel at this fitted Sun-to-Neptune screen scale. */

.grafixyy-solar-scale__truth-reveal.is-truth
.grafixyy-solar-scale__truth-object--sun {
	width: 1px;
	height: 1px;
}


/* =========================================================
   TRUTH PUNCH
   ========================================================= */

.grafixyy-solar-scale__truth-punch {
	display: block;

	max-width: 580px;

	margin:
		30px
		auto
		0;

	padding:
		0.08em
		0.08em
		0.18em;

	font-size:
		clamp(1.8rem, 4vw, 3rem);

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

	background:
		linear-gradient(
			105deg,
			#ffce5d,
			#fff7d5 35%,
			#91e9ff 67%,
			#7980ff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.grafixyy-solar-scale__truth-reveal
> p:not(.grafixyy-solar-scale__stage-label) {
	max-width: 610px;

	margin: 13px auto 0;

	color: #9da9c7;

	line-height: 1.8;
}


/* =========================================================
   NOT THE END
   ========================================================= */

.grafixyy-solar-scale__truth-reveal
.grafixyy-solar-scale__not-the-end {
	margin-top: 38px;

	background:
		linear-gradient(
			180deg,
			rgba(30, 39, 84, 0.14),
			rgba(3, 5, 14, 0.55)
		);
}

.grafixyy-solar-scale__truth-reveal
.grafixyy-solar-scale__not-the-end > p:last-child {
	max-width: 510px;

	margin:
		12px
		auto
		0;

	color: #8f9bb9;
}


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

@media (max-width: 720px) {

	.grafixyy-solar-scale__bonus-gate {
		padding:
			30px
			12px;
	}

	.grafixyy-solar-scale__bonus-gate > h3 {
		max-width: 330px;

		font-size:
			clamp(1.7rem, 7.6vw, 2.25rem);

		line-height: 1.5;
	}


	.grafixyy-solar-scale__truth-reveal {
		padding:
			31px
			10px;

		border-radius: 22px;
	}


	.grafixyy-solar-scale__truth-reveal > h3 {
		font-size:
			clamp(1.55rem, 7vw, 2.05rem);
	}


	.grafixyy-solar-scale__truth-stage {
		height: 210px;
		margin-top: 25px;
	}


	.grafixyy-solar-scale__truth-object--sun {
		width: 43px;
		height: 43px;
	}

	.grafixyy-solar-scale__truth-object--earth {
		width: 11px;
		height: 11px;
	}

	.grafixyy-solar-scale__truth-object--jupiter {
		width: 27px;
		height: 27px;
	}

	.grafixyy-solar-scale__truth-object--saturn {
		width: 23px;
		height: 23px;
	}

	.grafixyy-solar-scale__truth-object--uranus,
	.grafixyy-solar-scale__truth-object--neptune {
		width: 16px;
		height: 16px;
	}


	.grafixyy-solar-scale__truth-punch {
		max-width: 330px;

		font-size:
			clamp(1.65rem, 7.5vw, 2.2rem);

		line-height: 1.55;
	}
}


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

@media (prefers-reduced-motion: reduce) {

	.grafixyy-solar-scale__truth-object,
	.grafixyy-solar-scale__truth-object::after {
		transition: none;
	}
}

/* =========================================================
   SCALE TRUTH — SLOW 3 SECOND COLLAPSE
   ========================================================= */

.grafixyy-solar-scale__truth-object {
	transition:
		width 3s cubic-bezier(.22, 1, .36, 1),
		height 3s cubic-bezier(.22, 1, .36, 1),
		box-shadow 3s ease,
		opacity 3s ease;
}

.grafixyy-solar-scale__truth-object::after {
	transition:
		opacity 700ms ease 2.2s;
}


@media (prefers-reduced-motion: reduce) {

	.grafixyy-solar-scale__truth-object,
	.grafixyy-solar-scale__truth-object::after {
		transition: none;
	}
}

/* =========================================================
   MISSION 003 // SHARE EXPERIENCE
   ========================================================= */

.grafixyy-solar-scale__share {
	max-width: 760px;
	margin: 46px auto 0;
	padding-top: 38px;

	border-top: 1px solid rgba(105, 128, 255, 0.15);
}

.grafixyy-solar-scale__share-head {
	max-width: 620px;
	margin-inline: auto;

	text-align: center;
}

.grafixyy-solar-scale__share-kicker {
	margin: 0;

	color: #8ca4ff;

	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.13em;
}

.grafixyy-solar-scale__share-head h2 {
	margin: 11px auto 0;
	padding-bottom: 0.15em;

	font-size: clamp(1.9rem, 3.8vw, 3rem);
	font-weight: 900;
	line-height: 1.45;
	letter-spacing: -0.025em;

	background:
		linear-gradient(
			105deg,
			#ffd167,
			#fff8db 35%,
			#86eaff 67%,
			#7b83ff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.grafixyy-solar-scale__share-head > p:not(.grafixyy-solar-scale__share-kicker) {
	margin: 8px auto 0;

	color: #9eabc8;
	line-height: 1.75;
}


/* =========================================================
   THE CARD
   ========================================================= */

.grafixyy-solar-scale__mission-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	width: min(100%, 650px);
	aspect-ratio: 4 / 5;

	margin: 30px auto 0;
	padding: clamp(22px, 4.5vw, 38px);

	color: #f6f8ff;

	border: 1px solid rgba(112, 136, 255, 0.24);
	border-radius: 30px;

	background:
		radial-gradient(
			circle at 8% 12%,
			rgba(255, 184, 56, 0.13),
			transparent 26%
		),
		radial-gradient(
			circle at 90% 80%,
			rgba(52, 79, 255, 0.24),
			transparent 38%
		),
		linear-gradient(
			145deg,
			#080b18 0%,
			#030510 53%,
			#080c25 100%
		);

	box-shadow:
		0 35px 100px rgba(0,0,0,.38),
		inset 0 1px 0 rgba(255,255,255,.035);
}


/* Technical edge lines. */

.grafixyy-solar-scale__mission-card::before {
	content: "";

	position: absolute;
	z-index: -1;
	inset: 13px;

	border:
		1px solid rgba(140, 156, 224, 0.075);

	border-radius: 21px;

	pointer-events: none;
}


/* Neptune glow. */

.grafixyy-solar-scale__mission-card::after {
	content: "";

	position: absolute;
	z-index: -2;

	right: -90px;
	bottom: -110px;

	width: 290px;
	height: 290px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle at 35% 30%,
			#91adff 0%,
			#476aee 34%,
			#293ca5 62%,
			#11194e 100%
		);

	box-shadow:
		0 0 55px rgba(65, 93, 255, .38),
		0 0 120px rgba(46, 73, 255, .15);

	opacity: .42;
}


/* =========================================================
   STAR FIELD
   ========================================================= */

.grafixyy-solar-scale__mission-card-stars {
	position: absolute;
	z-index: -3;
	inset: 0;

	pointer-events: none;

	background-image:
		radial-gradient(
			circle,
			rgba(255,255,255,.65) 0 1px,
			transparent 1.25px
		),
		radial-gradient(
			circle,
			rgba(113,145,255,.65) 0 1px,
			transparent 1.2px
		);

	background-size:
		79px 79px,
		127px 127px;

	background-position:
		12px 8px,
		41px 63px;

	opacity: .17;
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.grafixyy-solar-scale__mission-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;

	direction: ltr;
}

.grafixyy-solar-scale__mission-brand {
	display: flex;
	align-items: center;
	gap: 11px;

	text-align: left;
}

.grafixyy-solar-scale__mission-mark {
	display: grid;
	place-items: center;

	width: 39px;
	height: 39px;

	border-radius: 12px;

	color: #07101b;

	background:
		linear-gradient(
			135deg,
			#ffcb55,
			#72e3ff 56%,
			#7473ff
		);

	font-size: 1rem;
	font-weight: 950;

	box-shadow:
		0 0 25px rgba(82, 157, 255, .2);
}

.grafixyy-solar-scale__mission-brand strong {
	display: block;

	font-size: .78rem;
	font-weight: 950;
	letter-spacing: .12em;
}

.grafixyy-solar-scale__mission-brand small {
	display: block;

	margin-top: 2px;

	color: #7785aa;

	font-size: .5rem;
	font-weight: 800;
	letter-spacing: .08em;
}

.grafixyy-solar-scale__mission-id {
	text-align: right;
}

.grafixyy-solar-scale__mission-id span {
	display: block;

	color: #667493;

	font-size: .52rem;
	font-weight: 900;
	letter-spacing: .12em;
}

.grafixyy-solar-scale__mission-id strong {
	display: block;

	color: #9db0ff;

	font-size: 1.35rem;
	font-weight: 950;
	line-height: 1.1;
}


/* =========================================================
   TARGET LOCK
   ========================================================= */

.grafixyy-solar-scale__mission-lock {
	margin-top: clamp(24px, 4vw, 38px);

	text-align: center;
}

.grafixyy-solar-scale__mission-lock > span {
	display: inline-flex;

	padding: 5px 9px;

	border:
		1px solid rgba(103, 130, 255, .2);

	border-radius: 999px;

	color: #8fa6ff;
	background: rgba(64, 82, 177, .08);

	font-size: .55rem;
	font-weight: 900;
	letter-spacing: .13em;
}

.grafixyy-solar-scale__mission-lock h3 {
	margin: 9px 0 0;

	color: #eaf0ff;

	font-size:
		clamp(2rem, 5vw, 3.5rem);

	font-weight: 950;
	line-height: .94;
	letter-spacing: .02em;

	direction: ltr;

	text-shadow:
		0 0 30px rgba(81, 107, 255, .22);
}

.grafixyy-solar-scale__mission-lock p {
	margin: 9px 0 0;

	color: #8e9bb9;

	font-size: .78rem;
	font-weight: 700;
}


/* =========================================================
   MISSION ROUTE
   ========================================================= */

.grafixyy-solar-scale__mission-route {
	margin-top: clamp(25px, 4vw, 38px);
}

.grafixyy-solar-scale__mission-route-meta {
	display: flex;
	justify-content: space-between;

	direction: ltr;

	color: #64718e;

	font-size: .48rem;
	font-weight: 900;
	letter-spacing: .09em;
}

.grafixyy-solar-scale__mission-route-track {
	position: relative;

	height: 47px;
	margin-top: 5px;

	direction: ltr;
}

.grafixyy-solar-scale__mission-route-line {
	position: absolute;

	left: 0;
	right: 0;
	top: 50%;

	height: 2px;

	transform:
		translateY(-50%);

	background:
		linear-gradient(
			90deg,
			#ffc34d,
			#fff1a8 17%,
			#69defa 63%,
			#657cff
		);

	box-shadow:
		0 0 10px rgba(93, 199, 255, .2);
}

.grafixyy-solar-scale__mission-route-stop {
	position: absolute;
	top: 50%;

	width: 9px;
	height: 9px;

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

	border:
		2px solid #040711;

	border-radius: 50%;

	background: #8090ba;

	box-shadow:
		0 0 0 2px rgba(133,150,211,.14);
}

.grafixyy-solar-scale__mission-route-stop--sun {
	left: 0;

	width: 19px;
	height: 19px;

	transform:
		translate(0, -50%);

	border: 0;

	background:
		radial-gradient(
			circle at 35% 30%,
			#fff6ae,
			#ffc23f 45%,
			#ff6e39
		);

	box-shadow:
		0 0 15px rgba(255, 190, 57, .65);
}

.grafixyy-solar-scale__mission-route-stop--earth {
	left: 3.33%;
	background: #52d9ff;
}

.grafixyy-solar-scale__mission-route-stop--jupiter {
	left: 17.31%;

	width: 13px;
	height: 13px;

	background: #c69a78;
}

.grafixyy-solar-scale__mission-route-stop--saturn {
	left: 31.87%;
	background: #d8bd72;
}

.grafixyy-solar-scale__mission-route-stop--uranus {
	left: 63.82%;
	background: #73d8df;
}

.grafixyy-solar-scale__mission-route-stop--neptune {
	left: 100%;

	width: 15px;
	height: 15px;

	transform:
		translate(-100%, -50%);

	background: #5572ff;

	box-shadow:
		0 0 14px rgba(75, 103, 255, .7);
}


/* Route labels stay compact intentionally. */

.grafixyy-solar-scale__mission-route-labels {
	display: grid;
	grid-template-columns:
		repeat(5, 1fr);

	gap: 4px;

	margin-top: 1px;

	color: #8b98b6;

	font-size: .55rem;
	font-weight: 800;

	text-align: center;
}

.grafixyy-solar-scale__mission-route-labels span {
	display: block;
}

.grafixyy-solar-scale__mission-route-labels small {
	display: block;

	margin-top: 2px;

	color: #5f6d8c;

	font-size: .48rem;
	direction: ltr;
}


/* =========================================================
   4.5 BILLION
   ========================================================= */

.grafixyy-solar-scale__mission-distance {
	margin-top: clamp(20px, 3.2vw, 30px);

	text-align: center;
}

.grafixyy-solar-scale__mission-distance p {
	margin: 0;

	color: #667492;

	font-size: .52rem;
	font-weight: 900;
	letter-spacing: .13em;
}

.grafixyy-solar-scale__mission-distance strong {
	display: block;

	margin-top: 5px;

	color: #eef2ff;

	font-size:
		clamp(2rem, 5.4vw, 3.7rem);

	font-weight: 950;
	line-height: 1;
	letter-spacing: -.045em;

	font-variant-numeric: tabular-nums;

	text-shadow:
		0 0 30px rgba(77, 106, 255, .2);
}

.grafixyy-solar-scale__mission-distance span {
	display: block;

	margin-top: 6px;

	color: #8391b1;

	font-size: .7rem;
	font-weight: 750;
}


/* =========================================================
   LIGHT TRAVEL MODULE
   ========================================================= */

.grafixyy-solar-scale__mission-light {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 17px;

	max-width: 440px;

	margin:
		clamp(20px, 3vw, 28px)
		auto
		0;

	padding: 14px 17px;

	direction: ltr;

	border:
		1px solid rgba(255, 224, 101, .1);

	border-radius: 17px;

	background:
		linear-gradient(
			90deg,
			rgba(255, 196, 58, .045),
			rgba(62, 92, 188, .07)
		);
}

.grafixyy-solar-scale__mission-light-icon {
	position: relative;

	flex: 0 0 auto;

	width: 18px;
	height: 18px;

	border-radius: 50%;

	background: #fff3a0;

	box-shadow:
		0 0 8px #fff4ae,
		0 0 25px rgba(255, 214, 72, .65);
}

.grafixyy-solar-scale__mission-light-icon::after {
	content: "";

	position: absolute;

	right: 11px;
	top: 50%;

	width: 40px;
	height: 3px;

	transform:
		translateY(-50%);

	background:
		linear-gradient(
			90deg,
			transparent,
			#ffe76e
		);
}

.grafixyy-solar-scale__mission-light > div:last-child {
	text-align: left;
}

.grafixyy-solar-scale__mission-light span {
	display: block;

	color: #747f9e;

	font-size: .48rem;
	font-weight: 900;
	letter-spacing: .12em;
}

.grafixyy-solar-scale__mission-light strong {
	display: block;

	margin-top: 3px;

	color: #fff3a3;

	font-size: 1.35rem;
	font-weight: 950;
}

.grafixyy-solar-scale__mission-light p {
	margin: 2px 0 0;

	color: #8a96b4;

	font-size: .65rem;
}


/* =========================================================
   MISSION STAMP
   ========================================================= */

.grafixyy-solar-scale__mission-stamp {
	position: absolute;

	right: clamp(21px, 5vw, 39px);
	bottom: clamp(88px, 12vw, 125px);

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

	width: 104px;
	height: 104px;

	transform:
		rotate(-9deg);

	border:
		3px double rgba(104, 132, 255, .52);

	border-radius: 50%;

	color: rgba(128, 151, 255, .65);

	text-align: center;

	opacity: .58;
}

.grafixyy-solar-scale__mission-stamp span {
	font-size: .46rem;
	font-weight: 900;
	letter-spacing: .1em;
}

.grafixyy-solar-scale__mission-stamp strong {
	margin-top: 1px;

	font-size: .75rem;
	font-weight: 950;
	letter-spacing: .04em;
}

.grafixyy-solar-scale__mission-stamp small {
	margin-top: 2px;

	font-size: .4rem;
	font-weight: 800;
}


/* =========================================================
   PUNCH / FOOTER
   ========================================================= */

.grafixyy-solar-scale__mission-punch {
	position: absolute;

	left: clamp(22px, 5vw, 38px);
	right: clamp(22px, 5vw, 38px);
	bottom: clamp(54px, 8vw, 75px);

	padding-top: 13px;

	border-top:
		1px solid rgba(120,137,199,.09);
}

.grafixyy-solar-scale__mission-punch p {
	margin: 0;

	color: #697795;

	font-size: .58rem;
}

.grafixyy-solar-scale__mission-punch strong {
	display: block;

	max-width: 390px;

	margin-top: 3px;

	color: #cbd4ee;

	font-size: .77rem;
	font-weight: 850;
	line-height: 1.5;
}

.grafixyy-solar-scale__mission-card-bottom {
	position: absolute;

	left: clamp(22px, 5vw, 38px);
	right: clamp(22px, 5vw, 38px);
	bottom: 21px;

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

	direction: ltr;

	color: #55627e;

	font-size: .44rem;
	font-weight: 850;
	letter-spacing: .07em;
}

.grafixyy-solar-scale__mission-card-bottom strong {
	color: #8190b2;

	font-size: .56rem;
	letter-spacing: .03em;
}


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

.grafixyy-solar-scale__share-actions {
	display: grid;
	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 10px;

	max-width: 560px;
	margin: 20px auto 0;
}

.grafixyy-solar-scale__share-actions button,
.grafixyy-solar-scale__share-link-buttons button,
.grafixyy-solar-scale__share-link-buttons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 50px;
	padding: 11px 16px;

	border:
		1px solid rgba(111, 137, 255, .18);

	border-radius: 14px;

	color: #eaf0ff;
	background: rgba(18, 25, 53, .72);

	font: inherit;
	font-size: .86rem;
	font-weight: 850;

	text-decoration: none;
	cursor: pointer;

	transition:
		transform 180ms ease,
		border-color 180ms ease,
		background 180ms ease;
}

.grafixyy-solar-scale__share-actions button:first-child {
	color: #07101a;

	border: 0;

	background:
		linear-gradient(
			135deg,
			#ffd15e,
			#ff9a46
		);
}

.grafixyy-solar-scale__share-actions button:hover,
.grafixyy-solar-scale__share-link-buttons button:hover,
.grafixyy-solar-scale__share-link-buttons a:hover {
	transform:
		translateY(-2px);
}

.grafixyy-solar-scale__share-links {
	max-width: 560px;

	margin: 18px auto 0;

	text-align: center;
}

.grafixyy-solar-scale__share-links > p {
	margin: 0 0 9px;

	color: #73809e;

	font-size: .78rem;
}

.grafixyy-solar-scale__share-link-buttons {
	display: grid;
	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 8px;
}

.grafixyy-solar-scale__share-note {
	max-width: 540px;

	margin: 15px auto 0;

	color: #66738f;

	font-size: .72rem;
	line-height: 1.65;
	text-align: center;
}


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

@media (max-width: 720px) {

	.grafixyy-solar-scale__share {
		margin-top: 38px;
		padding-top: 30px;
	}

	.grafixyy-solar-scale__share-head h2 {
		font-size:
			clamp(1.75rem, 7.8vw, 2.25rem);
	}

	.grafixyy-solar-scale__mission-card {
		width: 100%;
		max-width: 390px;

		padding: 20px 17px;

		border-radius: 24px;
	}

	.grafixyy-solar-scale__mission-mark {
		width: 34px;
		height: 34px;

		border-radius: 10px;
	}

	.grafixyy-solar-scale__mission-brand small {
		display: none;
	}

	.grafixyy-solar-scale__mission-lock {
		margin-top: 21px;
	}

	.grafixyy-solar-scale__mission-lock h3 {
		font-size:
			clamp(1.75rem, 10vw, 2.6rem);
	}

	.grafixyy-solar-scale__mission-route {
		margin-top: 22px;
	}

	.grafixyy-solar-scale__mission-route-labels {
		font-size: .47rem;
	}

	.grafixyy-solar-scale__mission-route-labels small {
		font-size: .4rem;
	}

	.grafixyy-solar-scale__mission-distance strong {
		font-size:
			clamp(1.72rem, 8.6vw, 2.45rem);
	}

	.grafixyy-solar-scale__mission-light {
		max-width: 320px;

		padding:
			11px
			13px;
	}

	.grafixyy-solar-scale__mission-light strong {
		font-size: 1.08rem;
	}

	.grafixyy-solar-scale__mission-stamp {
		right: 18px;
		bottom: 82px;

		width: 78px;
		height: 78px;
	}

	.grafixyy-solar-scale__mission-stamp strong {
		font-size: .58rem;
	}

	.grafixyy-solar-scale__mission-stamp small {
		font-size: .32rem;
	}

	.grafixyy-solar-scale__mission-punch {
		left: 18px;
		right: 18px;
		bottom: 47px;
	}

	.grafixyy-solar-scale__mission-punch strong {
		max-width: 235px;

		font-size: .63rem;
	}

	.grafixyy-solar-scale__mission-card-bottom {
		left: 18px;
		right: 18px;
		bottom: 16px;
	}

	.grafixyy-solar-scale__share-actions {
		grid-template-columns: 1fr;
	}

	.grafixyy-solar-scale__share-link-buttons {
		grid-template-columns: 1fr;
	}
}


/* =========================================================
   VERY SMALL PHONE SAFETY
   ========================================================= */

@media (max-width: 390px) {

	.grafixyy-solar-scale__mission-card {
		padding-inline: 14px;
	}

	.grafixyy-solar-scale__mission-card-top {
		gap: 10px;
	}

	.grafixyy-solar-scale__mission-route-meta {
		font-size: .4rem;
	}

	.grafixyy-solar-scale__mission-stamp {
		opacity: .42;
	}
}


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

@media (prefers-reduced-motion: reduce) {

	.grafixyy-solar-scale__share-actions button,
	.grafixyy-solar-scale__share-link-buttons button,
	.grafixyy-solar-scale__share-link-buttons a {
		transition: none;
	}
}

/* =========================================================
   MISSION CARD V2
   LAYOUT REPAIR + STRONGER COSMIC COLOR
   ========================================================= */


/*
 * Do not force the live preview into a fixed 4:5 box.
 * The generated PNG later will have its own controlled 1080x1350 layout.
 */

.grafixyy-solar-scale__mission-card {
	aspect-ratio: auto;

	min-height: 820px;

	padding:
		32px
		32px
		30px;

	background:
		radial-gradient(
			circle at 5% 8%,
			rgba(255, 190, 56, .17),
			transparent 25%
		),
		radial-gradient(
			circle at 92% 72%,
			rgba(49, 79, 255, .32),
			transparent 37%
		),
		linear-gradient(
			145deg,
			#090b18 0%,
			#030510 48%,
			#070c29 100%
		);
}


/* =========================================================
   TARGET TITLE
   ========================================================= */

.grafixyy-solar-scale__mission-lock h3 {
	padding:
		0.05em
		0.04em
		0.13em;

	color: #ffffff;

	background:
		linear-gradient(
			110deg,
			#ffd05d 0%,
			#fff8d8 28%,
			#dce7ff 48%,
			#8ba9ff 70%,
			#5bdcff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	text-shadow: none;

	filter:
		drop-shadow(
			0 0 24px
			rgba(87, 111, 255, .18)
		);
}


/* =========================================================
   ROUTE
   ========================================================= */

.grafixyy-solar-scale__mission-route {
	margin-top: 33px;
}

.grafixyy-solar-scale__mission-route-labels {
	margin-top: 7px;
}


/* Keep RTL Arabic labels aligned with the visible route order. */

.grafixyy-solar-scale__mission-route-labels {
	direction: rtl;
}


/* =========================================================
   BIG NUMBER
   ========================================================= */

.grafixyy-solar-scale__mission-distance {
	position: relative;

	margin-top: 39px;
	padding:
		27px
		12px
		23px;

	border-top:
		1px solid rgba(115, 137, 215, .1);

	border-bottom:
		1px solid rgba(115, 137, 215, .1);

	background:
		radial-gradient(
			circle at 50% 50%,
			rgba(68, 93, 255, .08),
			transparent 66%
		);
}

.grafixyy-solar-scale__mission-distance strong {
	max-width: 100%;

	margin:
		9px
		auto
		0;

	color: #ffffff;

	font-size:
		clamp(2.1rem, 4.7vw, 3.25rem);

	line-height: 1.12;
	letter-spacing: -0.04em;

	white-space: nowrap;

	background:
		linear-gradient(
			105deg,
			#ffd15c 0%,
			#fff7d2 23%,
			#ffffff 42%,
			#9bb5ff 67%,
			#5edfff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	text-shadow: none;

	filter:
		drop-shadow(
			0 0 20px
			rgba(72, 102, 255, .18)
		);
}

.grafixyy-solar-scale__mission-distance span {
	color: #a9b4d0;
}


/* =========================================================
   LIGHT MODULE
   ========================================================= */

.grafixyy-solar-scale__mission-light {
	position: relative;

	margin-top: 27px;

	background:
		linear-gradient(
			100deg,
			rgba(255, 192, 52, .075),
			rgba(48, 70, 167, .11)
		);
}

.grafixyy-solar-scale__mission-light strong {
	background:
		linear-gradient(
			90deg,
			#fff2a1,
			#ffffff 48%,
			#8de8ff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}


/* =========================================================
   STAMP
   No longer floats over the content.
   ========================================================= */

.grafixyy-solar-scale__mission-stamp {
	position: relative;

	right: auto;
	bottom: auto;

	width: 100px;
	height: 100px;

	margin:
		28px
		0
		0
		auto;

	transform:
		rotate(-8deg);

	color: rgba(125, 151, 255, .72);

	opacity: .72;
}


/* =========================================================
   PUNCH
   No absolute overlap.
   ========================================================= */

.grafixyy-solar-scale__mission-punch {
	position: relative;

	left: auto;
	right: auto;
	bottom: auto;

	margin-top: 24px;
	padding:
		17px
		0
		0;

	text-align: right;
}

.grafixyy-solar-scale__mission-punch p {
	color: #7d8aa8;
}

.grafixyy-solar-scale__mission-punch strong {
	max-width: 440px;

	color: #dbe2f7;

	font-size: .83rem;
}


/* =========================================================
   CARD FOOTER
   No absolute overlap.
   ========================================================= */

.grafixyy-solar-scale__mission-card-bottom {
	position: relative;

	left: auto;
	right: auto;
	bottom: auto;

	margin-top: 25px;
	padding-top: 15px;

	border-top:
		1px solid rgba(124, 142, 208, .09);
}


/* =========================================================
   STRONGER DETAILS
   ========================================================= */

.grafixyy-solar-scale__mission-id strong {
	color: #9db4ff;

	text-shadow:
		0 0 18px
		rgba(75, 107, 255, .25);
}

.grafixyy-solar-scale__mission-lock > span {
	color: #a9b9ff;

	border-color:
		rgba(108, 137, 255, .31);

	background:
		linear-gradient(
			90deg,
			rgba(255, 191, 58, .045),
			rgba(68, 91, 213, .12)
		);
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 721px) {

	.grafixyy-solar-scale__mission-card {
		width: min(100%, 680px);

		min-height: 0;
	}

	.grafixyy-solar-scale__mission-lock h3 {
		font-size:
			clamp(2.6rem, 4.4vw, 3.75rem);

		line-height: 1;
	}

	.grafixyy-solar-scale__mission-distance strong {
		font-size:
			clamp(2.25rem, 3.7vw, 3.15rem);
	}
}


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

@media (max-width: 720px) {

	.grafixyy-solar-scale__mission-card {
		min-height: 0;

		padding:
			22px
			16px
			20px;
	}

	.grafixyy-solar-scale__mission-lock h3 {
		line-height: 1.02;
	}

	.grafixyy-solar-scale__mission-distance {
		margin-top: 28px;

		padding:
			22px
			4px
			19px;
	}

	.grafixyy-solar-scale__mission-distance strong {
		font-size:
			clamp(1.65rem, 7.7vw, 2.25rem);

		letter-spacing: -0.035em;
	}

	.grafixyy-solar-scale__mission-stamp {
		width: 82px;
		height: 82px;

		margin-top: 22px;
	}

	.grafixyy-solar-scale__mission-punch {
		margin-top: 17px;
	}

	.grafixyy-solar-scale__mission-card-bottom {
		margin-top: 20px;
	}
}


/* =========================================================
   MISSION CARD V3
   AD / SHARE CREATIVE
   LIVE RATIO = 4:5
   ========================================================= */

.grafixyy-solar-scale__mission-card--v3 {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	width: min(100%, 620px);
	aspect-ratio: 4 / 5;
	min-height: 0;

	margin: 30px auto 0;
	padding: clamp(21px, 4vw, 34px);

	border:
		1px solid rgba(115, 139, 255, .28);

	border-radius: 30px;

	background:
		radial-gradient(
			circle at 3% 5%,
			rgba(255, 180, 45, .2),
			transparent 25%
		),
		radial-gradient(
			circle at 97% 74%,
			rgba(43, 75, 255, .34),
			transparent 37%
		),
		linear-gradient(
			145deg,
			#090b18 0%,
			#030510 47%,
			#070c28 100%
		);

	box-shadow:
		0 35px 100px rgba(0, 0, 0, .4),
		inset 0 1px 0 rgba(255,255,255,.045);
}


/* Internal technical frame. */

.grafixyy-solar-scale__mission-card--v3::before {
	content: "";

	position: absolute;
	z-index: -1;

	inset: 12px;

	border:
		1px solid rgba(142, 157, 224, .075);

	border-radius: 21px;

	pointer-events: none;
}


/* Distant Neptune presence. */

.grafixyy-solar-scale__mission-card--v3::after {
	content: "";

	position: absolute;
	z-index: -2;

	right: -95px;
	bottom: -105px;

	width: 250px;
	height: 250px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle at 35% 30%,
			#9bb3ff,
			#4c70f0 35%,
			#2b40a9 62%,
			#11194e 100%
		);

	box-shadow:
		0 0 50px rgba(64, 92, 255, .36),
		0 0 100px rgba(45, 72, 255, .14);

	opacity: .44;
}


/* =========================================================
   TOP
   ========================================================= */

.grafixyy-solar-scale__ad-top {
	position: relative;
	z-index: 4;

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

	direction: ltr;
}

.grafixyy-solar-scale__ad-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.grafixyy-solar-scale__ad-brand strong {
	color: #f7f8ff;

	font-size: .76rem;
	font-weight: 950;
	letter-spacing: .1em;
}

.grafixyy-solar-scale__ad-mission {
	text-align: right;
}

.grafixyy-solar-scale__ad-mission span {
	display: block;

	color: #687797;

	font-size: .48rem;
	font-weight: 900;
	letter-spacing: .12em;
}

.grafixyy-solar-scale__ad-mission strong {
	display: block;

	margin-top: 1px;

	color: #9badff;

	font-size: 1.25rem;
	font-weight: 950;
	line-height: 1;
}


/* =========================================================
   HERO
   Arabic is the main advertising hook.
   ========================================================= */

.grafixyy-solar-scale__ad-hero {
	position: relative;
	z-index: 3;

	margin-top: clamp(24px, 4.2vw, 38px);

	text-align: center;
}

.grafixyy-solar-scale__ad-hero > p {
	margin: 0;

	color: #8296d9;

	font-size: .54rem;
	font-weight: 900;
	letter-spacing: .13em;
}

.grafixyy-solar-scale__ad-hero h3 {
	max-width: 520px;

	margin:
		8px
		auto
		0;

	padding:
		0.08em
		0.07em
		0.18em;

	font-size:
		clamp(2.5rem, 6.1vw, 4.35rem);

	font-weight: 950;
	line-height: 1.27;
	letter-spacing: -0.045em;

	background:
		linear-gradient(
			108deg,
			#ffe18a 0%,
			#ffb83f 16%,
			#ff7548 31%,
			#fff7e2 48%,
			#a68aff 69%,
			#50dcff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	filter:
		drop-shadow(
			0 0 20px rgba(255, 139, 64, .09)
		)
		drop-shadow(
			0 0 27px rgba(74, 109, 255, .16)
		);
}


/* =========================================================
   LIGHT TIME
   ========================================================= */

.grafixyy-solar-scale__ad-light-time {
	margin-top: 4px;
}

.grafixyy-solar-scale__ad-light-time span {
	display: block;

	color: #7785a6;

	font-size: .66rem;
	font-weight: 700;
}

.grafixyy-solar-scale__ad-light-time strong {
	display: block;

	margin-top: 3px;

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

	font-weight: 950;
	line-height: 1.1;
	letter-spacing: .035em;

	background:
		linear-gradient(
			90deg,
			#fff3a4,
			#ffffff 43%,
			#85e8ff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	filter:
		drop-shadow(
			0 0 15px rgba(255, 226, 78, .2)
		);
}

.grafixyy-solar-scale__ad-light-time small {
	display: block;

	margin-top: 4px;

	color: #9aa6c2;

	font-size: .65rem;
	font-weight: 700;
}


/* =========================================================
   ROUTE
   Actual horizontal positions follow orbital-scale ratios.
   ========================================================= */

.grafixyy-solar-scale__ad-route {
	position: relative;
	z-index: 3;

	margin-top: clamp(22px, 3.4vw, 29px);
}

.grafixyy-solar-scale__ad-route-head {
	display: flex;
	align-items: center;
	justify-content: space-between;

	direction: ltr;

	color: #61708e;

	font-size: .45rem;
	font-weight: 900;
	letter-spacing: .1em;
}

.grafixyy-solar-scale__ad-route-head strong {
	color: #7483a6;

	font-size: inherit;
}

.grafixyy-solar-scale__ad-route-track {
	position: relative;

	height: 102px;
	margin-top: 4px;

	direction: ltr;
}

.grafixyy-solar-scale__ad-route-line {
	position: absolute;

	left: 0;
	right: 0;
	top: 48px;

	height: 2px;

	background:
		linear-gradient(
			90deg,
			#ffc44d 0%,
			#fff0a5 15%,
			#75e7ed 61%,
			#637aff 100%
		);

	box-shadow:
		0 0 9px rgba(80, 188, 255, .22);
}


/* Every label belongs to its marker, not to an equal grid cell. */

.grafixyy-solar-scale__ad-stop {
	position: absolute;

	top: 48px;

	width: 62px;

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

	text-align: center;
}

.grafixyy-solar-scale__ad-stop > span {
	display: block;

	width: 9px;
	height: 9px;

	margin-inline: auto;

	border:
		2px solid #050714;

	border-radius: 50%;

	background: #8290ae;

	box-shadow:
		0 0 0 2px rgba(129, 146, 205, .13);
}

.grafixyy-solar-scale__ad-stop small {
	position: absolute;

	left: 50%;
	top: 17px;

	transform:
		translateX(-50%);

	color: #8794b1;

	font-size: .53rem;
	font-weight: 850;

	white-space: nowrap;

	direction: rtl;
}


/* Sun = 0 */

.grafixyy-solar-scale__ad-stop--sun {
	left: 0;

	width: 45px;

	transform:
		translate(0, -50%);
}

.grafixyy-solar-scale__ad-stop--sun > span {
	width: 17px;
	height: 17px;

	margin-left: 0;

	border: 0;

	background:
		radial-gradient(
			circle at 35% 30%,
			#fff6af,
			#ffc33f 45%,
			#ff7139
		);

	box-shadow:
		0 0 13px rgba(255, 192, 55, .68);
}

.grafixyy-solar-scale__ad-stop--sun small {
	left: 0;

	transform: none;

	color: #bc9e61;
}


/* Earth ≈ 1 / 30.07 */

.grafixyy-solar-scale__ad-stop--earth {
	left: 3.33%;

	top: 68px;
}

.grafixyy-solar-scale__ad-stop--earth > span {
	background: #51d9ff;

	box-shadow:
		0 0 10px rgba(75,216,255,.55);
}

.grafixyy-solar-scale__ad-stop--earth small {
	top: 15px;

	color: #8bcbe3;
}


/* Jupiter ≈ 5.204 / 30.07 */

.grafixyy-solar-scale__ad-stop--jupiter {
	left: 17.31%;

	top: 33px;
}

.grafixyy-solar-scale__ad-stop--jupiter > span {
	width: 14px;
	height: 14px;

	background: #c89c79;
}


/* Saturn ≈ 9.583 / 30.07 */

.grafixyy-solar-scale__ad-stop--saturn {
	left: 31.87%;

	top: 68px;
}

.grafixyy-solar-scale__ad-stop--saturn > span {
	width: 12px;
	height: 12px;

	background: #d8bd73;
}


/* Uranus ≈ 19.191 / 30.07 */

.grafixyy-solar-scale__ad-stop--uranus {
	left: 63.82%;

	top: 33px;
}

.grafixyy-solar-scale__ad-stop--uranus > span {
	width: 12px;
	height: 12px;

	background: #75dbe2;
}


/* Neptune = 100 */

.grafixyy-solar-scale__ad-stop--neptune {
	left: 100%;

	width: 50px;

	transform:
		translate(-100%, -50%);
}

.grafixyy-solar-scale__ad-stop--neptune > span {
	width: 15px;
	height: 15px;

	margin-right: 0;

	background: #5774ff;

	box-shadow:
		0 0 13px rgba(74, 102, 255, .7);
}

.grafixyy-solar-scale__ad-stop--neptune small {
	right: 0;
	left: auto;

	transform: none;

	color: #94a6ff;
}


/* =========================================================
   DISTANCE
   ========================================================= */

.grafixyy-solar-scale__ad-distance {
	position: relative;
	z-index: 3;

	margin-top: 2px;

	text-align: center;
}

.grafixyy-solar-scale__ad-distance > span {
	display: block;

	color: #667493;

	font-size: .46rem;
	font-weight: 900;
	letter-spacing: .12em;
}

.grafixyy-solar-scale__ad-distance > strong {
	display: block;

	max-width: 520px;

	margin:
		6px
		auto
		0;

	padding-bottom: .1em;

	font-size:
		clamp(1.65rem, 4.3vw, 2.85rem);

	font-weight: 950;
	line-height: 1.25;

	background:
		linear-gradient(
			105deg,
			#ffd15b,
			#fff7dc 38%,
			#95b1ff 67%,
			#5edfff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.grafixyy-solar-scale__ad-distance > small {
	display: block;

	margin-top: 1px;

	color: #727f9e;

	font-size: .58rem;
	font-weight: 750;
}


/* =========================================================
   PUNCH
   ========================================================= */

.grafixyy-solar-scale__ad-punch {
	position: relative;
	z-index: 3;

	max-width: 480px;

	margin:
		clamp(17px, 2.8vw, 24px)
		auto
		0;

	padding-top: 13px;

	border-top:
		1px solid rgba(111, 129, 194, .09);

	text-align: center;
}

.grafixyy-solar-scale__ad-punch p {
	margin: 0;

	color: #697795;

	font-size: .55rem;
}

.grafixyy-solar-scale__ad-punch strong {
	display: block;

	margin-top: 3px;

	color: #d6def4;

	font-size:
		clamp(.76rem, 1.6vw, .95rem);

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


/* =========================================================
   STAMP
   ========================================================= */

.grafixyy-solar-scale__ad-stamp {
	position: absolute;
	z-index: 2;

	right: clamp(18px, 4vw, 31px);
	bottom: clamp(42px, 7vw, 58px);

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

	width: 75px;
	height: 75px;

	transform:
		rotate(-9deg);

	border:
		2px double rgba(112, 138, 255, .44);

	border-radius: 50%;

	color: rgba(128, 151, 255, .58);

	text-align: center;

	opacity: .58;
}

.grafixyy-solar-scale__ad-stamp span {
	font-size: .36rem;
	font-weight: 900;
	letter-spacing: .08em;
}

.grafixyy-solar-scale__ad-stamp strong {
	font-size: .53rem;
	font-weight: 950;
}

.grafixyy-solar-scale__ad-stamp small {
	font-size: .34rem;
	font-weight: 800;
}


/* =========================================================
   BOTTOM CTA
   ========================================================= */

.grafixyy-solar-scale__ad-bottom {
	position: absolute;
	z-index: 3;

	left: clamp(21px, 4vw, 34px);
	right: clamp(21px, 4vw, 34px);
	bottom: 18px;

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

	padding-top: 10px;

	direction: rtl;

	border-top:
		1px solid rgba(125, 142, 200, .09);
}

.grafixyy-solar-scale__ad-bottom span {
	color: #7d89a7;

	font-size: .58rem;
	font-weight: 750;
}

.grafixyy-solar-scale__ad-bottom strong {
	color: #a1adca;

	font-size: .61rem;
	font-weight: 900;

	direction: ltr;
}


/* =========================================================
   DESKTOP — GUARANTEE 4:5
   ========================================================= */

@media (min-width: 721px) {

	.grafixyy-solar-scale__mission-card--v3 {
		width: min(100%, 620px);
		aspect-ratio: 4 / 5;

		min-height: 0;
	}

	.grafixyy-solar-scale__ad-hero h3 {
		font-size:
			clamp(2.65rem, 4.4vw, 3.85rem);
	}
}


/* =========================================================
   MOBILE — SAME CARD RATIO
   ========================================================= */

@media (max-width: 720px) {

	.grafixyy-solar-scale__mission-card--v3 {
		width: 100%;
		max-width: 390px;

		aspect-ratio: 4 / 5;
		min-height: 0;

		padding:
			19px
			15px;

		border-radius: 23px;
	}

	.grafixyy-solar-scale__ad-brand strong {
		font-size: .62rem;
	}

	.grafixyy-solar-scale__ad-mission strong {
		font-size: 1rem;
	}

	.grafixyy-solar-scale__ad-hero {
		margin-top: 17px;
	}

	.grafixyy-solar-scale__ad-hero h3 {
		font-size:
			clamp(2.05rem, 10.6vw, 2.85rem);

		line-height: 1.27;
	}

	.grafixyy-solar-scale__ad-light-time strong {
		font-size:
			clamp(1.25rem, 6.4vw, 1.65rem);
	}

	.grafixyy-solar-scale__ad-light-time small {
		font-size: .55rem;
	}

	.grafixyy-solar-scale__ad-route {
		margin-top: 16px;
	}

	.grafixyy-solar-scale__ad-route-track {
		height: 82px;
	}

	.grafixyy-solar-scale__ad-route-line {
		top: 40px;
	}

	.grafixyy-solar-scale__ad-stop {
		top: 40px;

		width: 48px;
	}

	.grafixyy-solar-scale__ad-stop small {
		font-size: .44rem;
	}

	.grafixyy-solar-scale__ad-stop--earth,
	.grafixyy-solar-scale__ad-stop--saturn {
		top: 58px;
	}

	.grafixyy-solar-scale__ad-stop--jupiter,
	.grafixyy-solar-scale__ad-stop--uranus {
		top: 26px;
	}

	.grafixyy-solar-scale__ad-distance > strong {
		font-size:
			clamp(1.45rem, 7.5vw, 2rem);

		line-height: 1.28;
	}

	.grafixyy-solar-scale__ad-punch {
		margin-top: 11px;
		padding-top: 8px;
	}

	.grafixyy-solar-scale__ad-punch strong {
		font-size: .67rem;
	}

	.grafixyy-solar-scale__ad-stamp {
		right: 14px;
		bottom: 42px;

		width: 59px;
		height: 59px;
	}

	.grafixyy-solar-scale__ad-bottom {
		left: 15px;
		right: 15px;
		bottom: 12px;
	}

	.grafixyy-solar-scale__ad-bottom span {
		font-size: .48rem;
	}

	.grafixyy-solar-scale__ad-bottom strong {
		font-size: .51rem;
	}
}


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

@media (max-width: 390px) {

	.grafixyy-solar-scale__ad-hero h3 {
		font-size:
			clamp(1.95rem, 10vw, 2.55rem);
	}

	.grafixyy-solar-scale__ad-route-head {
		font-size: .38rem;
	}

	.grafixyy-solar-scale__ad-distance > strong {
		font-size:
			clamp(1.35rem, 7.2vw, 1.8rem);
	}
}

/* =========================================================
   MISSION CARD V3.1
   FIT THE STORY INSIDE THE 4:5 FRAME
   ========================================================= */

.grafixyy-solar-scale__mission-card--v3 {
	display: flex;
	flex-direction: column;

	padding:
		25px
		27px
		20px;
}


/* Compact top identity. */

.grafixyy-solar-scale__ad-top {
	flex: 0 0 auto;
}


/* Give the hero strength without consuming half the card. */

.grafixyy-solar-scale__ad-hero {
	flex: 0 0 auto;

	margin-top: 18px;
}

.grafixyy-solar-scale__ad-hero > p {
	font-size: .48rem;
}

.grafixyy-solar-scale__ad-hero h3 {
	max-width: 500px;

	margin-top: 5px;

	font-size:
		clamp(2.25rem, 4.8vw, 3.35rem);

	line-height: 1.2;
}


/* Light time becomes compact. */

.grafixyy-solar-scale__ad-light-time {
	margin-top: 1px;
}

.grafixyy-solar-scale__ad-light-time span {
	font-size: .58rem;
}

.grafixyy-solar-scale__ad-light-time strong {
	font-size:
		clamp(1.3rem, 3vw, 1.9rem);
}

.grafixyy-solar-scale__ad-light-time small {
	margin-top: 2px;

	font-size: .56rem;
}


/* Route owns a guaranteed slice of the card. */

.grafixyy-solar-scale__ad-route {
	flex: 0 0 114px;

	margin-top: 14px;
}

.grafixyy-solar-scale__ad-route-track {
	height: 86px;
}

.grafixyy-solar-scale__ad-route-line {
	top: 40px;
}

.grafixyy-solar-scale__ad-stop {
	top: 40px;
}

.grafixyy-solar-scale__ad-stop--earth,
.grafixyy-solar-scale__ad-stop--saturn {
	top: 59px;
}

.grafixyy-solar-scale__ad-stop--jupiter,
.grafixyy-solar-scale__ad-stop--uranus {
	top: 26px;
}


/* The second key fact must always remain visible. */

.grafixyy-solar-scale__ad-distance {
	flex: 0 0 auto;

	margin-top: 2px;
}

.grafixyy-solar-scale__ad-distance > strong {
	margin-top: 3px;

	font-size:
		clamp(1.5rem, 3.5vw, 2.35rem);

	line-height: 1.25;
}

.grafixyy-solar-scale__ad-distance > small {
	font-size: .51rem;
}


/* Final punch is intentionally tiny: teaser, not another hero. */

.grafixyy-solar-scale__ad-punch {
	flex: 0 0 auto;

	margin-top: 10px;
	padding-top: 8px;
}

.grafixyy-solar-scale__ad-punch p {
	font-size: .47rem;
}

.grafixyy-solar-scale__ad-punch strong {
	font-size: .69rem;
}


/* Stamp becomes a corner artifact, not content obstruction. */

.grafixyy-solar-scale__ad-stamp {
	right: 18px;
	bottom: 38px;

	width: 55px;
	height: 55px;

	opacity: .35;
}

.grafixyy-solar-scale__ad-stamp span {
	font-size: .27rem;
}

.grafixyy-solar-scale__ad-stamp strong {
	font-size: .4rem;
}

.grafixyy-solar-scale__ad-stamp small {
	font-size: .25rem;
}


/* Footer stays pinned to the end of the creative. */

.grafixyy-solar-scale__ad-bottom {
	bottom: 13px;

	padding-top: 7px;
}


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

@media (max-width: 720px) {

	.grafixyy-solar-scale__mission-card--v3 {
		padding:
			17px
			14px
			15px;
	}

	.grafixyy-solar-scale__ad-hero {
		margin-top: 12px;
	}

	.grafixyy-solar-scale__ad-hero h3 {
		font-size:
			clamp(1.85rem, 9vw, 2.45rem);

		line-height: 1.19;
	}

	.grafixyy-solar-scale__ad-light-time strong {
		font-size:
			clamp(1.13rem, 5.8vw, 1.48rem);
	}

	.grafixyy-solar-scale__ad-route {
		flex-basis: 91px;

		margin-top: 9px;
	}

	.grafixyy-solar-scale__ad-route-track {
		height: 66px;
	}

	.grafixyy-solar-scale__ad-route-line {
		top: 32px;
	}

	.grafixyy-solar-scale__ad-stop {
		top: 32px;
	}

	.grafixyy-solar-scale__ad-stop--earth,
	.grafixyy-solar-scale__ad-stop--saturn {
		top: 48px;
	}

	.grafixyy-solar-scale__ad-stop--jupiter,
	.grafixyy-solar-scale__ad-stop--uranus {
		top: 20px;
	}

	.grafixyy-solar-scale__ad-stop small {
		font-size: .39rem;
	}

	.grafixyy-solar-scale__ad-distance > strong {
		font-size:
			clamp(1.25rem, 6.5vw, 1.7rem);
	}

	.grafixyy-solar-scale__ad-punch {
		margin-top: 7px;
	}

	.grafixyy-solar-scale__ad-punch strong {
		font-size: .57rem;
	}

	.grafixyy-solar-scale__ad-stamp {
		right: 12px;
		bottom: 34px;

		width: 43px;
		height: 43px;
	}

	.grafixyy-solar-scale__ad-bottom {
		bottom: 9px;
	}
}


/* =========================================================
   MISSION AD CARD — FINAL VISUAL FOUNDATION
   4:5 LIVE PREVIEW / 1080x1350 TARGET
   ========================================================= */

.grafixyy-solar-scale__mission-card--ad {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	display: block;

	width: min(100%, 620px);
	aspect-ratio: 4 / 5;
	min-height: 0;

	margin: 30px auto 0;
	padding: 28px 30px 22px;

	color: #f8f9ff;

	border: 1px solid rgba(113, 137, 255, .28);
	border-radius: 30px;

	background:
		radial-gradient(
			circle at 0% 4%,
			rgba(255, 182, 46, .20),
			transparent 24%
		),
		radial-gradient(
			circle at 98% 72%,
			rgba(47, 76, 255, .35),
			transparent 37%
		),
		linear-gradient(
			145deg,
			#0a0b18 0%,
			#03050f 48%,
			#070c28 100%
		);

	box-shadow:
		0 35px 100px rgba(0,0,0,.4),
		inset 0 1px 0 rgba(255,255,255,.04);
}

.grafixyy-solar-scale__mission-card--ad::before {
	content: "";

	position: absolute;
	z-index: -1;
	inset: 11px;

	border: 1px solid rgba(150, 164, 225, .07);
	border-radius: 21px;

	pointer-events: none;
}

.grafixyy-solar-scale__mission-card--ad::after {
	content: "";

	position: absolute;
	z-index: -2;

	right: -100px;
	bottom: -105px;

	width: 255px;
	height: 255px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle at 35% 30%,
			#9cb4ff,
			#4b70f0 35%,
			#293fa9 62%,
			#11194d
		);

	box-shadow:
		0 0 55px rgba(62,91,255,.38),
		0 0 110px rgba(43,71,255,.15);

	opacity: .44;
}


/* Stars */

.grafixyy-solar-scale__ad-stars {
	position: absolute;
	z-index: -3;
	inset: 0;

	background-image:
		radial-gradient(
			circle,
			rgba(255,255,255,.62) 0 1px,
			transparent 1.25px
		),
		radial-gradient(
			circle,
			rgba(111,145,255,.68) 0 1px,
			transparent 1.2px
		);

	background-size:
		83px 83px,
		131px 131px;

	background-position:
		13px 17px,
		51px 72px;

	opacity: .15;

	pointer-events: none;
}


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

.grafixyy-solar-scale__ad-header {
	position: relative;
	z-index: 5;

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

	direction: ltr;
}

.grafixyy-solar-scale__ad-logo {
	display: flex;
	align-items: center;
	gap: 10px;
}

.grafixyy-solar-scale__ad-logo > span {
	display: grid;
	place-items: center;

	width: 37px;
	height: 37px;

	border-radius: 11px;

	color: #06101a;

	background:
		linear-gradient(
			135deg,
			#ffd25d,
			#66e6ff 54%,
			#756fff
		);

	font-size: .95rem;
	font-weight: 950;

	box-shadow:
		0 0 21px rgba(75,151,255,.2);
}

.grafixyy-solar-scale__ad-logo strong {
	color: #f8f9ff;

	font-size: .74rem;
	font-weight: 950;
	letter-spacing: .1em;
}

.grafixyy-solar-scale__ad-id {
	text-align: right;
}

.grafixyy-solar-scale__ad-id small {
	display: block;

	color: #6e7c9d;

	font-size: .46rem;
	font-weight: 900;
	letter-spacing: .12em;
}

.grafixyy-solar-scale__ad-id strong {
	display: block;

	color: #9caeff;

	font-size: 1.18rem;
	font-weight: 950;
	line-height: 1;
}


/* =========================================================
   HERO — THE ADVERTISING HOOK
   ========================================================= */

.grafixyy-solar-scale__ad-main {
	position: relative;
	z-index: 4;

	margin-top: 23px;

	text-align: center;
}

.grafixyy-solar-scale__ad-target {
	display: inline-block;

	color: #879adb;

	font-size: .5rem;
	font-weight: 900;
	letter-spacing: .13em;
}

.grafixyy-solar-scale__ad-hook {
	margin: 7px auto 0;

	text-align: center;
}

.grafixyy-solar-scale__ad-hook > span {
	display: block;

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

	margin-inline: auto;

	padding:
		0.04em
		0.09em
		0.11em;

	font-size:
		clamp(2.25rem, 5.25vw, 3.65rem);

	font-weight: 950;
	line-height: 1.26;
	letter-spacing: -0.04em;

	background:
		linear-gradient(
			105deg,
			#ffe58e 0%,
			#ffba3f 17%,
			#ff7447 32%,
			#fff8e4 49%,
			#a88cff 70%,
			#50ddff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	filter:
		drop-shadow(
			0 0 18px rgba(255,132,64,.08)
		)
		drop-shadow(
			0 0 25px rgba(75,108,255,.15)
		);
}


/* =========================================================
   LIGHT TIME
   ========================================================= */

.grafixyy-solar-scale__ad-time {
	margin-top: 3px;

	text-align: center;
}

.grafixyy-solar-scale__ad-time > strong {
	display: block;

	font-size:
		clamp(1.35rem, 3.4vw, 2.05rem);

	font-weight: 950;
	line-height: 1.12;
	letter-spacing: .035em;

	background:
		linear-gradient(
			90deg,
			#fff2a0,
			#ffffff 43%,
			#87eaff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	filter:
		drop-shadow(
			0 0 13px rgba(255,225,76,.2)
		);
}

.grafixyy-solar-scale__ad-time > p {
	margin: 4px 0 0;

	color: #a0abc7;

	font-size: .62rem;
	font-weight: 700;
}


/* =========================================================
   ORBITAL MAP
   ========================================================= */

.grafixyy-solar-scale__ad-map {
	position: relative;
	z-index: 4;

	margin-top: 23px;
	padding-top: 5px;
}

.grafixyy-solar-scale__ad-map-track {
	position: relative;

	height: 116px;

	direction: ltr;
}

.grafixyy-solar-scale__ad-map-line {
	position: absolute;

	left: 0;
	right: 0;
	top: 54px;

	height: 2px;

	background:
		linear-gradient(
			90deg,
			#ffc54d 0%,
			#fff0a5 15%,
			#70e4ed 62%,
			#637aff 100%
		);

	box-shadow:
		0 0 10px rgba(88,195,255,.22);
}


/* Each name belongs to the actual orbital marker. */

.grafixyy-solar-scale__ad-planet {
	position: absolute;

	top: 54px;

	width: 70px;

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

	text-align: center;
}

.grafixyy-solar-scale__ad-planet > span {
	display: block;

	width: 10px;
	height: 10px;

	margin-inline: auto;

	border:
		2px solid #050713;

	border-radius: 50%;

	background: #8995b0;
}


/* Clear names: never generic faded gray. */

.grafixyy-solar-scale__ad-planet > strong {
	position: absolute;

	left: 50%;

	transform:
		translateX(-50%);

	font-size: .6rem;
	font-weight: 900;
	line-height: 1;

	white-space: nowrap;
}


/* SUN */

.grafixyy-solar-scale__ad-planet--sun {
	left: 0;

	width: 47px;

	transform:
		translate(0, -50%);
}

.grafixyy-solar-scale__ad-planet--sun > span {
	width: 20px;
	height: 20px;

	margin-left: 0;

	border: 0;

	background:
		radial-gradient(
			circle at 35% 30%,
			#fff8b6,
			#ffc440 45%,
			#ff7138
		);

	box-shadow:
		0 0 14px rgba(255,193,56,.72);
}

.grafixyy-solar-scale__ad-planet--sun > strong {
	left: 0;
	top: 24px;

	transform: none;

	color: #ffc957;
}


/* EARTH — actual orbital position ≈ 3.33% */

.grafixyy-solar-scale__ad-planet--earth {
	left: 3.33%;
	top: 78px;
}

.grafixyy-solar-scale__ad-planet--earth > span {
	background: #50d9ff;

	box-shadow:
		0 0 10px rgba(73,216,255,.6);
}

.grafixyy-solar-scale__ad-planet--earth > strong {
	top: 16px;

	color: #75dcfa;
}


/* JUPITER — ≈ 17.31% */

.grafixyy-solar-scale__ad-planet--jupiter {
	left: 17.31%;
	top: 34px;
}

.grafixyy-solar-scale__ad-planet--jupiter > span {
	width: 15px;
	height: 15px;

	background:
		linear-gradient(
			180deg,
			#ddb994,
			#a57355 48%,
			#d6a77e
		);
}

.grafixyy-solar-scale__ad-planet--jupiter > strong {
	bottom: 17px;

	color: #d9b28e;
}


/* SATURN — ≈ 31.87% */

.grafixyy-solar-scale__ad-planet--saturn {
	left: 31.87%;
	top: 78px;
}

.grafixyy-solar-scale__ad-planet--saturn > span {
	width: 13px;
	height: 13px;

	background: #d9bd73;
}

.grafixyy-solar-scale__ad-planet--saturn > strong {
	top: 17px;

	color: #e3c879;
}


/* URANUS — ≈ 63.82% */

.grafixyy-solar-scale__ad-planet--uranus {
	left: 63.82%;
	top: 34px;
}

.grafixyy-solar-scale__ad-planet--uranus > span {
	width: 13px;
	height: 13px;

	background: #79dce3;
}

.grafixyy-solar-scale__ad-planet--uranus > strong {
	bottom: 17px;

	color: #89e5ea;
}


/* NEPTUNE */

.grafixyy-solar-scale__ad-planet--neptune {
	left: 100%;

	width: 53px;

	transform:
		translate(-100%, -50%);
}

.grafixyy-solar-scale__ad-planet--neptune > span {
	width: 17px;
	height: 17px;

	margin-right: 0;

	background:
		radial-gradient(
			circle at 35% 30%,
			#9ab0ff,
			#4c6fec 55%,
			#293eaa
		);

	box-shadow:
		0 0 14px rgba(70,99,255,.7);
}

.grafixyy-solar-scale__ad-planet--neptune > strong {
	right: 0;
	left: auto;
	top: 21px;

	transform: none;

	color: #95a9ff;
}


/* =========================================================
   4.5 BILLION
   ========================================================= */

.grafixyy-solar-scale__ad-km {
	position: relative;
	z-index: 4;

	margin-top: 3px;

	text-align: center;
}

.grafixyy-solar-scale__ad-km > span {
	display: block;

	color: #667493;

	font-size: .44rem;
	font-weight: 900;
	letter-spacing: .12em;
}

.grafixyy-solar-scale__ad-km > strong {
	display: block;

	margin:
		4px
		auto
		0;

	padding-bottom: .1em;

	font-size:
		clamp(1.55rem, 3.8vw, 2.55rem);

	font-weight: 950;
	line-height: 1.28;

	background:
		linear-gradient(
			105deg,
			#ffd15b,
			#fff7d8 35%,
			#9ab3ff 68%,
			#5edfff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.grafixyy-solar-scale__ad-km > small {
	display: block;

	margin-top: 0;

	color: #74819e;

	font-size: .52rem;
	font-weight: 750;
}


/* =========================================================
   FINAL TEASE
   ========================================================= */

.grafixyy-solar-scale__ad-final {
	position: relative;
	z-index: 4;

	max-width: 440px;

	margin:
		14px
		auto
		0;

	padding-top: 10px;

	border-top:
		1px solid rgba(116,133,195,.09);

	text-align: center;
}

.grafixyy-solar-scale__ad-final strong {
	color: #d8e0f5;

	font-size:
		clamp(.72rem, 1.5vw, .88rem);

	font-weight: 850;
}


/* =========================================================
   SMALL MISSION BADGE
   ========================================================= */

.grafixyy-solar-scale__ad-badge {
	position: absolute;
	z-index: 2;

	right: 18px;
	bottom: 43px;

	display: grid;
	place-items: center;

	width: 54px;
	height: 54px;

	transform:
		rotate(-8deg);

	border:
		2px double rgba(113,138,255,.38);

	border-radius: 50%;

	color: rgba(132,153,255,.52);

	text-align: center;

	opacity: .48;
}

.grafixyy-solar-scale__ad-badge span {
	font-size: .25rem;
	font-weight: 900;
	letter-spacing: .07em;
}

.grafixyy-solar-scale__ad-badge strong {
	font-size: .36rem;
	font-weight: 950;
}


/* =========================================================
   FOOTER
   ========================================================= */

.grafixyy-solar-scale__ad-footer {
	position: absolute;
	z-index: 4;

	left: 28px;
	right: 28px;
	bottom: 14px;

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

	padding-top: 8px;

	border-top:
		1px solid rgba(126,143,202,.09);

	direction: rtl;
}

.grafixyy-solar-scale__ad-footer span {
	color: #8390ad;

	font-size: .56rem;
	font-weight: 750;
}

.grafixyy-solar-scale__ad-footer strong {
	color: #a2afcc;

	font-size: .58rem;
	font-weight: 900;

	direction: ltr;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 721px) {

	.grafixyy-solar-scale__mission-card--ad {
		width: min(100%, 620px);
		aspect-ratio: 4 / 5;

		min-height: 0;
	}

	.grafixyy-solar-scale__ad-hook > span {
		font-size:
			clamp(2.4rem, 4vw, 3.4rem);
	}
}


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

@media (max-width: 720px) {

	.grafixyy-solar-scale__mission-card--ad {
		width: 100%;
		max-width: 390px;

		aspect-ratio: 4 / 5;
		min-height: 0;

		padding:
			18px
			15px
			15px;

		border-radius: 23px;
	}


	.grafixyy-solar-scale__ad-logo > span {
		width: 32px;
		height: 32px;

		border-radius: 9px;

		font-size: .8rem;
	}

	.grafixyy-solar-scale__ad-logo strong {
		font-size: .6rem;
	}

	.grafixyy-solar-scale__ad-id strong {
		font-size: .95rem;
	}


	.grafixyy-solar-scale__ad-main {
		margin-top: 13px;
	}

	.grafixyy-solar-scale__ad-target {
		font-size: .4rem;
	}

	.grafixyy-solar-scale__ad-hook > span {
		font-size:
			clamp(1.85rem, 9vw, 2.45rem);

		line-height: 1.23;
	}


	.grafixyy-solar-scale__ad-time > strong {
		font-size:
			clamp(1.1rem, 5.7vw, 1.45rem);
	}

	.grafixyy-solar-scale__ad-time > p {
		font-size: .5rem;
	}


	.grafixyy-solar-scale__ad-map {
		margin-top: 12px;
	}

	.grafixyy-solar-scale__ad-map-track {
		height: 84px;
	}

	.grafixyy-solar-scale__ad-map-line {
		top: 39px;
	}


	.grafixyy-solar-scale__ad-planet {
		top: 39px;

		width: 48px;
	}

	.grafixyy-solar-scale__ad-planet > strong {
		font-size: .44rem;
	}


	.grafixyy-solar-scale__ad-planet--earth,
	.grafixyy-solar-scale__ad-planet--saturn {
		top: 57px;
	}

	.grafixyy-solar-scale__ad-planet--jupiter,
	.grafixyy-solar-scale__ad-planet--uranus {
		top: 24px;
	}

	.grafixyy-solar-scale__ad-planet--sun {
		width: 39px;
	}

	.grafixyy-solar-scale__ad-planet--neptune {
		width: 43px;
	}


	.grafixyy-solar-scale__ad-km {
		margin-top: 0;
	}

	.grafixyy-solar-scale__ad-km > strong {
		font-size:
			clamp(1.25rem, 6.4vw, 1.72rem);
	}

	.grafixyy-solar-scale__ad-km > small {
		font-size: .43rem;
	}


	.grafixyy-solar-scale__ad-final {
		margin-top: 8px;
		padding-top: 6px;
	}

	.grafixyy-solar-scale__ad-final strong {
		font-size: .59rem;
	}


	.grafixyy-solar-scale__ad-badge {
		right: 12px;
		bottom: 35px;

		width: 42px;
		height: 42px;
	}


	.grafixyy-solar-scale__ad-footer {
		left: 15px;
		right: 15px;
		bottom: 9px;

		padding-top: 5px;
	}

	.grafixyy-solar-scale__ad-footer span,
	.grafixyy-solar-scale__ad-footer strong {
		font-size: .46rem;
	}
}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 390px) {

	.grafixyy-solar-scale__ad-hook > span {
		font-size:
			clamp(1.72rem, 8.7vw, 2.22rem);
	}

	.grafixyy-solar-scale__ad-planet > strong {
		font-size: .4rem;
	}

	.grafixyy-solar-scale__ad-km > strong {
		font-size:
			clamp(1.18rem, 6.1vw, 1.58rem);
	}
}


/* =========================================================
   MISSION AD — FINAL HIERARCHY
   One hook. Two numbers. One route.
   ========================================================= */


/* Remove secondary advertising noise. */

.grafixyy-solar-scale__ad-km > span,
.grafixyy-solar-scale__ad-km > small,
.grafixyy-solar-scale__ad-final,
.grafixyy-solar-scale__ad-badge {
	display: none;
}


/* Footer becomes brand-only. */

.grafixyy-solar-scale__ad-footer > span {
	display: none;
}

.grafixyy-solar-scale__ad-footer {
	justify-content: center;

	left: 25px;
	right: 25px;
	bottom: 13px;
}

.grafixyy-solar-scale__ad-footer strong {
	color: #aab7d6;

	font-size: .62rem;
	font-weight: 900;
	letter-spacing: .025em;
}


/* Recover vertical room from the hero. */

.grafixyy-solar-scale__ad-main {
	margin-top: 17px;
}

.grafixyy-solar-scale__ad-hook {
	margin-top: 4px;
}

.grafixyy-solar-scale__ad-hook > span {
	font-size:
		clamp(2.15rem, 4.65vw, 3.25rem);

	line-height: 1.19;
}


/* Bring the map upward slightly. */

.grafixyy-solar-scale__ad-map {
	margin-top: 15px;
}

.grafixyy-solar-scale__ad-map-track {
	height: 105px;
}


/*
 * 4.5 billion is now a true second hero,
 * not content squeezed into the footer.
 */

.grafixyy-solar-scale__ad-km {
	margin-top: 5px;

	padding:
		17px
		10px
		18px;

	border-top:
		1px solid rgba(103, 127, 211, .1);

	border-bottom:
		1px solid rgba(103, 127, 211, .08);

	background:
		radial-gradient(
			circle at 50% 50%,
			rgba(67, 92, 255, .09),
			transparent 65%
		);
}

.grafixyy-solar-scale__ad-km > strong {
	margin: 0 auto;

	font-size:
		clamp(1.75rem, 4vw, 2.65rem);

	line-height: 1.28;

	white-space: nowrap;
}


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

@media (max-width: 720px) {

	.grafixyy-solar-scale__ad-main {
		margin-top: 11px;
	}

	.grafixyy-solar-scale__ad-hook > span {
		font-size:
			clamp(1.72rem, 8.6vw, 2.32rem);

		line-height: 1.2;
	}

	.grafixyy-solar-scale__ad-map {
		margin-top: 8px;
	}

	.grafixyy-solar-scale__ad-map-track {
		height: 79px;
	}

	.grafixyy-solar-scale__ad-km {
		margin-top: 1px;

		padding:
			11px
			3px
			12px;
	}

	.grafixyy-solar-scale__ad-km > strong {
		font-size:
			clamp(1.3rem, 6.4vw, 1.72rem);

		white-space: nowrap;
	}

	.grafixyy-solar-scale__ad-footer {
		bottom: 9px;
	}

	.grafixyy-solar-scale__ad-footer strong {
		font-size: .49rem;
	}
}

/* =========================================================
   MOBILE MISSION CARD — BOTTOM BREATHING SPACE
   ========================================================= */

@media (max-width: 720px) {

	/*
	 * Lift the brand footer away from the 4.5B reveal.
	 */

	.grafixyy-solar-scale__ad-footer {
		bottom: 7px;

		padding-top: 4px;
	}


	/*
	 * Pull the distance reveal slightly upward
	 * and make its lower footprint smaller.
	 */

	.grafixyy-solar-scale__ad-km {
		transform:
			translateY(-5px);

		padding-bottom: 8px;
	}


	.grafixyy-solar-scale__ad-km > strong {
		line-height: 1.18;
	}


	/*
	 * Reserve a clean visual gap before the brand.
	 */

	.grafixyy-solar-scale__mission-card--ad {
		padding-bottom: 30px;
	}
}


@media (max-width: 390px) {

	.grafixyy-solar-scale__ad-km {
		transform:
			translateY(-7px);
	}

	.grafixyy-solar-scale__ad-footer {
		bottom: 6px;
	}
}

/* =========================================================
   ONE-SOURCE MISSION CANVAS
   ========================================================= */

.grafixyy-solar-scale__canvas-card-wrap {
	width: min(100%, 620px);

	margin:
		30px
		auto
		0;

	overflow: hidden;

	border-radius: 30px;

	box-shadow:
		0 35px 100px rgba(0, 0, 0, .4);
}


.grafixyy-solar-scale__canvas-card {
	display: block;

	width: 100%;
	height: auto;

	aspect-ratio: 4 / 5;
}


@media (max-width: 720px) {

	.grafixyy-solar-scale__canvas-card-wrap {
		width: 100%;
		max-width: 390px;

		border-radius: 23px;
	}
}


/* =========================================================
   SHARE PREVIEW SOURCE POLICY
   Keep the approved HTML card visible.
   Canvas is generation-only and never displayed.
   ========================================================= */

.grafixyy-solar-scale__canvas-card-wrap {
	display: none !important;
}

.grafixyy-solar-scale__mission-card[hidden] {
	display: block !important;
}


/* =========================================================
   MISSION DEBRIEF // SUPPORTING CONTENT
   Methodology / Sources / Privacy
   ========================================================= */

.grafixyy-solar-scale__content {
	position: relative;

	max-width: 920px;
	margin: 82px auto 0;
	padding:
		clamp(34px, 6vw, 62px)
		clamp(18px, 5vw, 48px);

	overflow: hidden;

	border:
		1px solid rgba(105, 130, 255, 0.18);

	border-radius: 32px;

	background:
		radial-gradient(
			circle at 5% 0%,
			rgba(255, 184, 54, 0.08),
			transparent 30%
		),
		radial-gradient(
			circle at 95% 100%,
			rgba(69, 91, 255, 0.12),
			transparent 38%
		),
		linear-gradient(
			145deg,
			rgba(7, 10, 24, 0.94),
			rgba(2, 4, 13, 0.96)
		);

	box-shadow:
		0 30px 90px rgba(0, 0, 0, 0.3);
}


/* Small technical star field. */

.grafixyy-solar-scale__content::before {
	content: "";

	position: absolute;
	inset: 0;

	pointer-events: none;

	background-image:
		radial-gradient(
			circle,
			rgba(255, 255, 255, 0.5) 0 1px,
			transparent 1.2px
		),
		radial-gradient(
			circle,
			rgba(112, 145, 255, 0.55) 0 1px,
			transparent 1.2px
		);

	background-size:
		101px 101px,
		163px 163px;

	background-position:
		17px 21px,
		59px 78px;

	opacity: 0.08;
}


.grafixyy-solar-scale__content > * {
	position: relative;
	z-index: 1;
}


/* =========================================================
   DEBRIEF HEAD
   ========================================================= */

.grafixyy-solar-scale__content-head {
	max-width: 720px;
	margin-inline: auto;

	text-align: center;
}


.grafixyy-solar-scale__content-head h2 {
	max-width: 680px;

	margin:
		11px
		auto
		0;

	padding:
		0.08em
		0.08em
		0.18em;

	font-size:
		clamp(2rem, 4.2vw, 3.45rem);

	font-weight: 900;
	line-height: 1.4;
	letter-spacing: -0.03em;

	background:
		linear-gradient(
			105deg,
			#ffd167 0%,
			#fff5cf 31%,
			#ffffff 45%,
			#96b6ff 70%,
			#58dcff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	filter:
		drop-shadow(
			0 0 22px
			rgba(77, 102, 255, 0.12)
		);
}


.grafixyy-solar-scale__content-head > p:not(.grafixyy-solar-scale__stage-label) {
	max-width: 650px;

	margin:
		14px
		auto
		0;

	color: #aab6d3;

	font-size: 1rem;
	font-weight: 600;
	line-height: 1.9;
}


.grafixyy-solar-scale__content-head strong {
	color: #dce6ff;
	font-weight: 900;
}


/* =========================================================
   DATA CARDS
   ========================================================= */

.grafixyy-solar-scale__content-grid {
	display: grid;
	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 16px;

	margin-top: 38px;
}


.grafixyy-solar-scale__content-card {
	position: relative;

	padding:
		28px
		24px;

	overflow: hidden;

	border:
		1px solid rgba(106, 131, 225, 0.13);

	border-radius: 22px;

	background:
		linear-gradient(
			145deg,
			rgba(17, 22, 47, 0.58),
			rgba(4, 7, 19, 0.72)
		);
}


.grafixyy-solar-scale__content-card::before {
	content: "";

	position: absolute;

	top: 0;
	right: 0;

	width: 100px;
	height: 100px;

	background:
		radial-gradient(
			circle at 100% 0%,
			rgba(92, 113, 255, 0.09),
			transparent 70%
		);

	pointer-events: none;
}


.grafixyy-solar-scale__content-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 36px;
	min-height: 27px;

	padding:
		4px
		8px;

	border:
		1px solid rgba(116, 142, 255, 0.18);

	border-radius: 999px;

	color: #8fa7ff;
	background:
		rgba(59, 75, 166, 0.08);

	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.08em;

	direction: ltr;
}


.grafixyy-solar-scale__content-card h3 {
	margin:
		14px
		0
		0;

	color: #f7f8ff;

	font-size:
		clamp(1.2rem, 2.3vw, 1.55rem);

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


.grafixyy-solar-scale__content-card p {
	margin:
		12px
		0
		0;

	color: #9faccc;

	font-size: 0.94rem;
	line-height: 1.85;
}


.grafixyy-solar-scale__content-card p strong {
	color: #e6ecff;
	font-weight: 900;
}


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

.grafixyy-solar-scale__content-formula {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 62px;

	padding:
		13px
		12px !important;

	overflow-wrap: anywhere;

	border:
		1px solid rgba(87, 214, 255, 0.12);

	border-radius: 14px;

	color: #bcefff !important;

	background:
		linear-gradient(
			90deg,
			rgba(255, 192, 53, 0.045),
			rgba(67, 91, 211, 0.085)
		);

	font-size:
		clamp(0.78rem, 1.4vw, 0.92rem) !important;

	font-weight: 850;
	line-height: 1.6 !important;
	text-align: center;

	font-variant-numeric:
		tabular-nums;
}


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

.grafixyy-solar-scale__methodology {
	max-width: 780px;

	margin:
		32px
		auto
		0;
}


.grafixyy-solar-scale__methodology details {
	overflow: hidden;

	margin-top: 12px;

	border:
		1px solid rgba(104, 130, 225, 0.14);

	border-radius: 18px;

	background:
		rgba(4, 7, 19, 0.58);
}


.grafixyy-solar-scale__methodology summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	min-height: 62px;

	padding:
		15px
		18px;

	color: #e8edff;

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

	cursor: pointer;

	list-style: none;
}


.grafixyy-solar-scale__methodology summary::-webkit-details-marker {
	display: none;
}


.grafixyy-solar-scale__methodology summary > span:last-child {
	display: grid;
	place-items: center;

	flex: 0 0 auto;

	width: 30px;
	height: 30px;

	border:
		1px solid rgba(105, 137, 255, 0.2);

	border-radius: 50%;

	color: #8fa8ff;
	background:
		rgba(62, 81, 177, 0.08);

	font-size: 1.1rem;
	line-height: 1;

	transition:
		transform 220ms ease,
		color 220ms ease;
}


.grafixyy-solar-scale__methodology details[open]
summary > span:last-child {
	transform: rotate(45deg);
	color: #69e4ff;
}


.grafixyy-solar-scale__methodology-body {
	padding:
		4px
		18px
		20px;

	border-top:
		1px solid rgba(113, 132, 195, 0.08);
}


.grafixyy-solar-scale__methodology-body p,
.grafixyy-solar-scale__methodology-body li {
	color: #96a4c3;

	font-size: 0.91rem;
	line-height: 1.85;
}


.grafixyy-solar-scale__methodology-body p {
	margin:
		14px
		0
		0;
}


.grafixyy-solar-scale__methodology-body ul {
	margin:
		14px
		0
		0;

	padding-right: 20px;
}


.grafixyy-solar-scale__methodology-body li + li {
	margin-top: 12px;
}


.grafixyy-solar-scale__methodology-body strong {
	color: #e3e9ff;
	font-weight: 900;
}


/* Source links. */

.grafixyy-solar-scale__methodology-body a {
	display: inline;

	color: #74dcff;

	font-weight: 850;
	text-decoration:
		underline;

	text-decoration-color:
		rgba(116, 220, 255, 0.35);

	text-underline-offset: 3px;

	transition:
		color 180ms ease,
		text-decoration-color 180ms ease;
}


.grafixyy-solar-scale__methodology-body a:hover {
	color: #fff0a3;

	text-decoration-color:
		rgba(255, 224, 112, 0.65);
}


.grafixyy-solar-scale__methodology-body a:focus-visible {
	outline:
		3px solid #78e8ff;

	outline-offset: 4px;
	border-radius: 3px;
}


/* =========================================================
   SOURCE REVIEW
   ========================================================= */

.grafixyy-solar-scale__source-review {
	margin-top:
		18px !important;

	padding-top:
		14px;

	border-top:
		1px solid rgba(111, 132, 197, 0.08);

	color:
		#7887a8 !important;
}


/* =========================================================
   PRIVACY
   ========================================================= */

.grafixyy-solar-scale__privacy-note {
	display: grid;
	grid-template-columns:
		auto
		1fr;

	align-items: start;
	gap: 12px;

	margin-top: 18px;

	padding:
		18px;

	border:
		1px solid rgba(80, 211, 255, 0.11);

	border-radius: 17px;

	background:
		linear-gradient(
			100deg,
			rgba(255, 189, 57, 0.035),
			rgba(55, 81, 195, 0.075)
		);
}


.grafixyy-solar-scale__privacy-note > span {
	display: grid;
	place-items: center;

	width: 30px;
	height: 30px;

	border-radius: 50%;

	color: #fff1a2;
	background:
		rgba(255, 199, 68, 0.08);

	font-size: 0.85rem;
}


.grafixyy-solar-scale__privacy-note p {
	margin: 0;

	color: #94a3c2;

	font-size: 0.9rem;
	line-height: 1.8;
}


.grafixyy-solar-scale__privacy-note strong {
	color: #e9edff;
	font-weight: 900;
}


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

@media (max-width: 720px) {

	.grafixyy-solar-scale__content {
		margin-top: 64px;

		padding:
			31px
			12px;

		border-radius: 24px;
	}


	.grafixyy-solar-scale__content-head h2 {
		max-width: 340px;

		font-size:
			clamp(1.75rem, 7.7vw, 2.35rem);

		line-height: 1.5;
	}


	.grafixyy-solar-scale__content-head
	> p:not(.grafixyy-solar-scale__stage-label) {
		font-size: 0.94rem;
		line-height: 1.8;
	}


	.grafixyy-solar-scale__content-grid {
		grid-template-columns: 1fr;

		gap: 11px;

		margin-top: 28px;
	}


	.grafixyy-solar-scale__content-card {
		padding:
			23px
			16px;

		border-radius: 18px;
	}


	.grafixyy-solar-scale__content-card h3 {
		font-size: 1.18rem;
	}


	.grafixyy-solar-scale__content-card p {
		font-size: 0.9rem;
	}


	.grafixyy-solar-scale__content-formula {
		min-height: 56px;

		padding:
			11px
			7px !important;

		font-size:
			0.73rem !important;
	}


	.grafixyy-solar-scale__methodology {
		margin-top: 24px;
	}


	.grafixyy-solar-scale__methodology summary {
		min-height: 58px;

		padding:
			13px
			14px;

		font-size: 0.9rem;
	}


	.grafixyy-solar-scale__methodology-body {
		padding:
			3px
			14px
			17px;
	}


	.grafixyy-solar-scale__methodology-body p,
	.grafixyy-solar-scale__methodology-body li {
		font-size: 0.86rem;
	}


	.grafixyy-solar-scale__privacy-note {
		gap: 9px;

		padding:
			15px
			13px;
	}
}


/* =========================================================
   VERY SMALL PHONE SAFETY
   ========================================================= */

@media (max-width: 390px) {

	.grafixyy-solar-scale__content {
		padding-inline: 9px;
	}


	.grafixyy-solar-scale__content-head h2 {
		font-size:
			clamp(1.65rem, 7.4vw, 2.05rem);
	}


	.grafixyy-solar-scale__content-card {
		padding-inline: 13px;
	}


	.grafixyy-solar-scale__content-formula {
		font-size:
			0.68rem !important;
	}
}


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

@media (prefers-reduced-motion: reduce) {

	.grafixyy-solar-scale__methodology
	summary > span:last-child,

	.grafixyy-solar-scale__methodology-body a {
		transition: none;
	}
}

/* =========================================================
   DISCOVERY FINALE // NEXT SIGNAL
   ========================================================= */

.grafixyy-solar-scale__discovery {
	position: relative;

	max-width: 820px;
	margin: 72px auto 0;
	padding:
		clamp(38px, 6vw, 66px)
		clamp(18px, 5vw, 48px);

	overflow: hidden;

	text-align: center;

	border:
		1px solid rgba(102, 128, 255, 0.2);

	border-radius: 30px;

	background:
		radial-gradient(
			circle at 50% 0%,
			rgba(70, 95, 255, 0.13),
			transparent 45%
		),
		radial-gradient(
			circle at 12% 85%,
			rgba(255, 188, 57, 0.055),
			transparent 32%
		),
		linear-gradient(
			145deg,
			rgba(7, 10, 25, 0.95),
			rgba(2, 4, 13, 0.98)
		);

	box-shadow:
		0 30px 90px rgba(0, 0, 0, 0.32);
}


/* Quiet star/signal field. */

.grafixyy-solar-scale__discovery::before {
	content: "";

	position: absolute;
	inset: 0;

	pointer-events: none;

	background-image:
		radial-gradient(
			circle,
			rgba(255, 255, 255, 0.5) 0 1px,
			transparent 1.2px
		),
		radial-gradient(
			circle,
			rgba(111, 145, 255, 0.55) 0 1px,
			transparent 1.2px
		);

	background-size:
		89px 89px,
		149px 149px;

	background-position:
		11px 19px,
		53px 71px;

	opacity: 0.08;
}


.grafixyy-solar-scale__discovery > * {
	position: relative;
	z-index: 2;
}


/* =========================================================
   UNKNOWN SIGNAL
   ========================================================= */

.grafixyy-solar-scale__discovery-signal {
	position: relative;

	display: grid;
	place-items: center;

	width: 112px;
	height: 112px;

	margin:
		0
		auto
		28px;
}


.grafixyy-solar-scale__discovery-signal > span {
	position: absolute;

	inset: 50% auto auto 50%;

	border:
		1px solid rgba(105, 137, 255, 0.24);

	border-radius: 50%;

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


.grafixyy-solar-scale__discovery-signal > span:nth-child(1) {
	width: 52px;
	height: 52px;

	border-color:
		rgba(255, 206, 86, 0.25);

	animation:
		grafixyySolarSignalPulse
		2.7s ease-out infinite;
}


.grafixyy-solar-scale__discovery-signal > span:nth-child(2) {
	width: 78px;
	height: 78px;

	animation:
		grafixyySolarSignalPulse
		2.7s 0.45s ease-out infinite;
}


.grafixyy-solar-scale__discovery-signal > span:nth-child(3) {
	width: 104px;
	height: 104px;

	border-color:
		rgba(85, 220, 255, 0.14);

	animation:
		grafixyySolarSignalPulse
		2.7s 0.9s ease-out infinite;
}


.grafixyy-solar-scale__discovery-signal strong {
	position: relative;
	z-index: 3;

	display: grid;
	place-items: center;

	width: 45px;
	height: 45px;

	border:
		1px solid rgba(129, 151, 255, 0.3);

	border-radius: 50%;

	color: #fff0a1;

	background:
		radial-gradient(
			circle,
			rgba(74, 94, 207, 0.28),
			rgba(8, 11, 28, 0.94)
		);

	box-shadow:
		0 0 24px rgba(85, 112, 255, 0.19);

	font-size: 1.25rem;
	font-weight: 900;
}


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

.grafixyy-solar-scale__discovery-copy {
	max-width: 650px;
	margin-inline: auto;
}


.grafixyy-solar-scale__discovery-copy h2 {
	max-width: 610px;

	margin:
		11px
		auto
		0;

	padding:
		0.08em
		0.08em
		0.18em;

	font-size:
		clamp(2rem, 4.2vw, 3.35rem);

	font-weight: 900;
	line-height: 1.42;
	letter-spacing: -0.03em;

	background:
		linear-gradient(
			105deg,
			#ffd161 0%,
			#fff6d6 30%,
			#ffffff 45%,
			#a289ff 70%,
			#55dcff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	filter:
		drop-shadow(
			0 0 22px rgba(77, 103, 255, 0.14)
		);
}


.grafixyy-solar-scale__discovery-copy
> p:not(.grafixyy-solar-scale__stage-label) {
	max-width: 560px;

	margin:
		12px
		auto
		0;

	color: #9eabc8;

	font-size: 0.97rem;
	line-height: 1.85;
}


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

.grafixyy-solar-scale__discovery-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	gap: 10px;

	margin-top: 28px;
}


.grafixyy-solar-scale__discovery-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-height: 54px;

	padding:
		13px
		22px;

	border-radius: 999px;

	font-weight: 900;
	line-height: 1.3;
	text-decoration: none;

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


/* Smart Surprise. */

.grafixyy-solar-scale__discovery-random {
	border: 0;

	color: #071019;

	background:
		linear-gradient(
			135deg,
			#fff1a1 0%,
			#ffc34a 42%,
			#ff7a43 100%
		);

	box-shadow:
		0 14px 42px rgba(255, 157, 51, 0.2);
}


.grafixyy-solar-scale__discovery-random > span {
	font-size: 0.9rem;
}


.grafixyy-solar-scale__discovery-random:hover {
	transform:
		translateY(-2px)
		scale(1.015);

	box-shadow:
		0 17px 50px rgba(255, 157, 51, 0.28);
}


/* Explore. */

.grafixyy-solar-scale__discovery-explore {
	border:
		1px solid rgba(109, 137, 255, 0.22);

	color: #e8edff;

	background:
		linear-gradient(
			90deg,
			rgba(64, 84, 190, 0.11),
			rgba(45, 62, 139, 0.06)
		);
}


.grafixyy-solar-scale__discovery-explore:hover {
	transform: translateY(-2px);

	border-color:
		rgba(93, 213, 255, 0.42);

	background:
		linear-gradient(
			90deg,
			rgba(70, 93, 212, 0.17),
			rgba(51, 72, 163, 0.1)
		);
}


.grafixyy-solar-scale__discovery-actions a:focus-visible {
	outline:
		3px solid #78e8ff;

	outline-offset: 4px;
}


/* =========================================================
   FOOTNOTE
   ========================================================= */

.grafixyy-solar-scale__discovery-footnote {
	margin:
		23px
		0
		0;

	color: #596886;

	font-size: 0.61rem;
	font-weight: 900;
	letter-spacing: 0.13em;

	direction: ltr;
}


/* =========================================================
   SIGNAL MOTION
   ========================================================= */

@keyframes grafixyySolarSignalPulse {

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

		opacity: 0;
	}

	28% {
		opacity: 0.85;
	}

	100% {
		transform:
			translate(-50%, -50%)
			scale(1.12);

		opacity: 0;
	}
}


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

@media (max-width: 720px) {

	.grafixyy-solar-scale__discovery {
		margin-top: 58px;

		padding:
			34px
			13px;

		border-radius: 24px;
	}


	.grafixyy-solar-scale__discovery-signal {
		width: 94px;
		height: 94px;

		margin-bottom: 22px;
	}


	.grafixyy-solar-scale__discovery-signal
	> span:nth-child(1) {
		width: 45px;
		height: 45px;
	}


	.grafixyy-solar-scale__discovery-signal
	> span:nth-child(2) {
		width: 66px;
		height: 66px;
	}


	.grafixyy-solar-scale__discovery-signal
	> span:nth-child(3) {
		width: 88px;
		height: 88px;
	}


	.grafixyy-solar-scale__discovery-signal strong {
		width: 40px;
		height: 40px;

		font-size: 1.05rem;
	}


	.grafixyy-solar-scale__discovery-copy h2 {
		max-width: 335px;

		font-size:
			clamp(1.75rem, 7.7vw, 2.35rem);

		line-height: 1.5;
	}


	.grafixyy-solar-scale__discovery-copy
	> p:not(.grafixyy-solar-scale__stage-label) {
		font-size: 0.9rem;
	}


	.grafixyy-solar-scale__discovery-actions {
		display: grid;
		grid-template-columns: 1fr;

		max-width: 350px;

		margin:
			25px
			auto
			0;
	}


	.grafixyy-solar-scale__discovery-actions a {
		width: 100%;
		min-height: 53px;
	}
}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 390px) {

	.grafixyy-solar-scale__discovery {
		padding-inline: 10px;
	}


	.grafixyy-solar-scale__discovery-copy h2 {
		font-size:
			clamp(1.65rem, 7.3vw, 2.08rem);
	}
}


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

@media (prefers-reduced-motion: reduce) {

	.grafixyy-solar-scale__discovery-signal > span {
		animation: none;
		opacity: 0.42;
	}


	.grafixyy-solar-scale__discovery-actions a {
		transition: none;
	}
}

/* =========================================================
   SOLAR EXPERIENCE FRAME — FINAL LOCK PASS
   ========================================================= */

.grafixyy-solar-scale {
	border:
		1px solid rgba(112, 137, 255, 0.22);

	border-radius: 32px;

	background:
		radial-gradient(
			circle at 50% 0%,
			rgba(72, 91, 205, 0.20),
			transparent 38rem
		),
		linear-gradient(
			180deg,
			#070a18 0%,
			#030510 42%,
			#010207 100%
		);

	box-shadow:
		0 28px 90px rgba(0, 0, 0, 0.30),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


@media (max-width: 720px) {

	.grafixyy-solar-scale {
		border-radius: 24px;
	}

}

/* =========================================================
   MISSION DEBRIEF TOGGLE
   ========================================================= */

.grafixyy-solar-scale__content {
	padding: 0;
	scroll-margin-top: 110px;
}

.grafixyy-solar-scale__content-summary {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;
	gap: 16px;

	min-height: 92px;
	padding: 20px 24px;

	color: #ffffff;
	background:
		linear-gradient(
			105deg,
			rgba(255, 190, 65, 0.07),
			rgba(75, 98, 220, 0.11)
		);

	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	list-style: none;
}

.grafixyy-solar-scale__content-summary::-webkit-details-marker {
	display: none;
}

.grafixyy-solar-scale__content-summary::marker {
	content: "";
}

.grafixyy-solar-scale__content-summary-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;

	width: 46px;
	height: 46px;

	border: 1px solid rgba(255, 202, 79, 0.22);
	border-radius: 14px;

	color: #ffe28a;
	background: rgba(255, 193, 57, 0.06);

	font-size: 1.1rem;
}

.grafixyy-solar-scale__content-summary-copy {
	flex: 1;
	min-width: 0;
}

.grafixyy-solar-scale__content-summary-copy strong {
	display: block;

	color: #f7f8ff;

	font-size: clamp(1.05rem, 2vw, 1.3rem);
	font-weight: 900;
	line-height: 1.5;
}

.grafixyy-solar-scale__content-summary-copy small {
	display: block;

	margin-top: 4px;

	color: #8f9dbc;

	font-size: 0.8rem;
	font-weight: 650;
	line-height: 1.6;
}

.grafixyy-solar-scale__content-summary-arrow {
	flex: 0 0 auto;

	color: #69e4ff;

	font-size: 1.7rem;
	font-weight: 900;

	transition: transform 220ms ease;
}

.grafixyy-solar-scale__content[open]
.grafixyy-solar-scale__content-summary-arrow {
	transform: rotate(180deg);
}

.grafixyy-solar-scale__content-summary:focus-visible {
	outline: 3px solid #78e8ff;
	outline-offset: -3px;
}

.grafixyy-solar-scale__content-body {
	padding:
		clamp(34px, 6vw, 62px)
		clamp(18px, 5vw, 48px);
}


@media (max-width: 720px) {

	.grafixyy-solar-scale__content {
		padding: 0;
	}

	.grafixyy-solar-scale__content-summary {
		gap: 11px;

		min-height: 82px;
		padding: 16px 14px;
	}

	.grafixyy-solar-scale__content-summary-icon {
		width: 40px;
		height: 40px;

		border-radius: 12px;
	}

	.grafixyy-solar-scale__content-summary-copy strong {
		font-size: 0.98rem;
	}

	.grafixyy-solar-scale__content-summary-copy small {
		font-size: 0.7rem;
	}

	.grafixyy-solar-scale__content-body {
		padding:
			28px
			12px;
	}

}


@media (prefers-reduced-motion: reduce) {

	.grafixyy-solar-scale__content-summary-arrow {
		transition: none;
	}

}
/* =========================================================
   IMPOSSIBLE RACE — FINAL COMPACT PASS
   ========================================================= */

.grafixyy-solar-scale__race {
	padding:
		clamp(22px, 3.5vw, 36px);
}

.grafixyy-solar-scale__race-intro h3 {
	font-size:
		clamp(1.8rem, 3vw, 2.65rem);
	line-height: 1.35;
}

.grafixyy-solar-scale__race-intro
> p:not(.grafixyy-solar-scale__stage-label) {
	max-width: 620px;
	margin:
		9px
		auto
		0;
}

.grafixyy-solar-scale__race-track {
	margin-top: 24px;
	padding:
		52px
		48px
		10px;
}

.grafixyy-solar-scale__racers {
	gap: 8px;
}

.grafixyy-solar-scale__racer {
	padding:
		10px
		0
		12px;
}

.grafixyy-solar-scale__racer-head {
	margin-bottom: 7px;
}

.grafixyy-solar-scale__racer > p {
	margin-top: 7px;
}

.grafixyy-solar-scale__race-freeze {
	margin-top: 18px;
	padding:
		20px
		16px;
}

.grafixyy-solar-scale__race-freeze strong {
	font-size:
		clamp(1.3rem, 2.4vw, 1.9rem);
	line-height: 1.5;
}

.grafixyy-solar-scale__race-punch {
	margin-top: 17px;
	padding:
		18px
		14px
		2px;
}

.grafixyy-solar-scale__race-punch > h3 {
	margin-top: 0;

	font-size:
		clamp(1.55rem, 2.7vw, 2.2rem);
}

.grafixyy-solar-scale__neptune-ratio {
	margin-top: 21px;
	padding:
		25px
		16px
		23px;
}

.grafixyy-solar-scale__neptune-ratio > strong {
	font-size:
		clamp(3rem, 6vw, 5rem);
}


@media (max-width: 720px) {

	.grafixyy-solar-scale__race {
		padding:
			23px
			12px;
	}

	.grafixyy-solar-scale__race-intro h3 {
		font-size:
			clamp(1.65rem, 7.5vw, 2.25rem);
	}

	.grafixyy-solar-scale__race-track {
		margin-top: 22px;

		padding:
			52px
			7px
			8px;
	}

	.grafixyy-solar-scale__racers {
		gap: 7px;
	}

	.grafixyy-solar-scale__racer {
		padding:
			10px
			0
			11px;
	}

	.grafixyy-solar-scale__race-freeze {
		margin-top: 16px;

		padding:
			19px
			8px;
	}

	.grafixyy-solar-scale__race-freeze strong {
		max-width: 330px;

		font-size:
			clamp(1.25rem, 6vw, 1.7rem);
	}

	.grafixyy-solar-scale__race-punch {
		margin-top: 14px;

		padding:
			16px
			5px
			2px;
	}

	.grafixyy-solar-scale__race-punch > h3 {
		font-size:
			clamp(1.5rem, 7vw, 2rem);
	}

	.grafixyy-solar-scale__neptune-ratio {
		margin-top: 18px;

		padding:
			23px
			10px
			22px;
	}

	.grafixyy-solar-scale__neptune-ratio > strong {
		font-size:
			clamp(3rem, 15vw, 4.3rem);
	}

}