/*
 * Grafixyy Experience UI
 * Version 1.2
 */


/* ==================================================
   Design Tokens
   ================================================== */

:root {
	--gfx-bg: #050816;
	--gfx-surface: #0b1222;
	--gfx-surface-2: #111a2d;
	--gfx-card: #182338;

	--gfx-text: #f8fafc;
	--gfx-text-soft: #dbe4f0;
	--gfx-muted: #a8b5c8;

	--gfx-border: rgba(148, 163, 184, 0.22);

	--gfx-purple: #8b5cf6;
	--gfx-violet: #a855f7;
	--gfx-cyan: #22d3ee;
	--gfx-pink: #f472b6;
	--gfx-green: #34d399;

	--gfx-radius-xl: 32px;
	--gfx-radius-lg: 22px;
	--gfx-radius-md: 14px;

	--gfx-shadow:
		0 30px 90px rgba(0, 0, 0, 0.42);
}


/* ==================================================
   Application
   ================================================== */

.grafixyy-app {
	position: relative;
	isolation: isolate;
	overflow: hidden;

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

	margin: 0 auto;
	padding: 1px;

	border: 1px solid var(--gfx-border);
	border-radius: var(--gfx-radius-xl);

	background:
		linear-gradient(
			135deg,
			rgba(139, 92, 246, 0.30),
			rgba(34, 211, 238, 0.10) 48%,
			rgba(244, 114, 182, 0.18)
		);

	box-shadow: var(--gfx-shadow);

	color: var(--gfx-text);
	direction: rtl;
}

.grafixyy-tool-shell {
	position: relative;
	z-index: 2;

	padding: clamp(34px, 5vw, 68px);

	border-radius:
		calc(var(--gfx-radius-xl) - 1px);

	background:
		radial-gradient(
			circle at 85% 0%,
			rgba(139, 92, 246, 0.16),
			transparent 38%
		),
		radial-gradient(
			circle at 10% 100%,
			rgba(34, 211, 238, 0.11),
			transparent 34%
		),
		var(--gfx-bg);
}


/* ==================================================
   Decorative light
   ================================================== */

.grafixyy-orb {
	position: absolute;
	z-index: 1;

	width: 300px;
	height: 300px;

	border-radius: 50%;

	filter: blur(85px);

	pointer-events: none;

	opacity: 0.30;
}

.grafixyy-orb-one {
	top: -140px;
	right: -80px;

	background: var(--gfx-purple);
}

.grafixyy-orb-two {
	bottom: -160px;
	left: -100px;

	background: var(--gfx-cyan);
}


/* ==================================================
   Badge
   ================================================== */

.grafixyy-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	margin-bottom: 24px;
	padding: 10px 15px;

	border:
		1px solid rgba(34, 211, 238, 0.25);

	border-radius: 999px;

	background:
		rgba(34, 211, 238, 0.08);

	color: #e0f8ff;

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

.grafixyy-eyebrow-dot {
	width: 9px;
	height: 9px;

	border-radius: 50%;

	background: var(--gfx-cyan);

	box-shadow:
		0 0 0 5px rgba(34, 211, 238, 0.11),
		0 0 20px rgba(34, 211, 238, 0.90);
}


/* ==================================================
   Heading
   ================================================== */

.grafixyy-tool-heading {
	max-width: 900px;

	margin-bottom: 38px;
}

.grafixyy-tool-heading h1 {
	margin: 0 0 16px;

	color: var(--gfx-text);

	font-size:
		clamp(40px, 5vw, 68px);

	font-weight: 900;

	line-height: 1.15;

	letter-spacing: -1px;
}

.grafixyy-tool-heading p {
	max-width: 760px;

	margin: 0;

	color: var(--gfx-text-soft);

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

	font-weight: 500;

	line-height: 1.9;
}


/* ==================================================
   Input Panel
   ================================================== */

.grafixyy-input-panel {
	padding:
		clamp(20px, 3vw, 30px);

	border:
		1px solid var(--gfx-border);

	border-radius:
		var(--gfx-radius-lg);

	background:
		rgba(11, 18, 34, 0.90);
}

.grafixyy-input-title {
	margin-bottom: 20px;

	color: #ffffff;

	font-size: 21px;
	font-weight: 900;
}


/* ==================================================
   Date Fields
   ================================================== */

.grafixyy-date-fields {
	display: grid;

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

	gap: 16px;
}

.grafixyy-field {
	min-width: 0;
}

.grafixyy-field label {
	display: block;

	margin-bottom: 9px;

	color: #edf3fa;

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


/*
 * Native select.
 *
 * Keep all states dark so Windows/Chrome cannot
 * create white text on a white focused control.
 */

.grafixyy-select {
	display: block;

	width: 100%;
	min-height: 60px;

	margin: 0;

	padding:
		10px
		14px;

	border:
		1px solid rgba(148, 163, 184, 0.30);

	border-radius:
		var(--gfx-radius-md);

	outline: none;

	background-color: var(--gfx-surface-2);
	color: #ffffff;

	font-family: inherit;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.4;

	cursor: pointer;

	color-scheme: dark;

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

.grafixyy-select:hover {
	border-color:
		rgba(34, 211, 238, 0.48);

	background-color: #15223a;

	color: #ffffff;
}

.grafixyy-select:focus,
.grafixyy-select:focus-visible,
.grafixyy-select:active {
	border-color: var(--gfx-cyan);

	outline: none;

	background-color: var(--gfx-surface-2);

	color: #ffffff;

	box-shadow:
		0 0 0 4px rgba(34, 211, 238, 0.11),
		0 0 26px rgba(34, 211, 238, 0.10);
}

.grafixyy-select option {
	background-color: #111a2d;

	color: #ffffff;

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

.grafixyy-select option:checked {
	background-color: #263d67;

	color: #ffffff;
}

.grafixyy-select option:disabled {
	color: #9aa9bd;
}


/* ==================================================
   Actions
   ================================================== */

.grafixyy-actions {
	display: flex;
	flex-wrap: wrap;

	gap: 12px;

	margin-top: 22px;
}

.grafixyy-button {
	min-height: 58px;

	padding:
		11px
		26px;

	border: 0;

	border-radius:
		var(--gfx-radius-md);

	font-family: inherit;

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

	cursor: pointer;

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

.grafixyy-button:hover {
	transform: translateY(-2px);
}

.grafixyy-button:active {
	transform: translateY(0);
}

.grafixyy-button:focus-visible {
	outline:
		3px solid var(--gfx-cyan);

	outline-offset: 3px;
}

.grafixyy-button-primary {
	display: inline-flex;

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

	gap: 11px;

	min-width: 190px;

	background:
		linear-gradient(
			135deg,
			var(--gfx-purple),
			var(--gfx-violet)
		);

	color: #ffffff;

	box-shadow:
		0 12px 35px
		rgba(139, 92, 246, 0.30);
}

.grafixyy-button-primary:hover {
	box-shadow:
		0 17px 46px
		rgba(139, 92, 246, 0.40);
}

.grafixyy-button-secondary {
	min-width: 100px;

	border:
		1px solid var(--gfx-border);

	background-color:
		rgba(255, 255, 255, 0.06);

	color: #e2e8f0;
}

.grafixyy-button-secondary:hover {
	background-color:
		rgba(255, 255, 255, 0.11);
}

.grafixyy-button-arrow {
	font-size: 20px;
}


/* ==================================================
   Error
   ================================================== */

.grafixyy-error {
	min-height: 26px;

	margin-top: 14px;

	color: #ffb4c1;

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


/* ==================================================
   Results
   ================================================== */

.grafixyy-result-zone {
	margin-top: 38px;

	animation:
		grafixyyReveal
		500ms ease both;
}


/* ==================================================
   Live Result
   ================================================== */

.grafixyy-live-result {
	position: relative;

	overflow: hidden;

	padding:
		clamp(32px, 5vw, 56px);

	border:
		1px solid rgba(139, 92, 246, 0.30);

	border-radius:
		var(--gfx-radius-lg);

	background:
		linear-gradient(
			135deg,
			rgba(139, 92, 246, 0.14),
			rgba(34, 211, 238, 0.06)
		);

	text-align: center;
}

.grafixyy-live-label {
	display: flex;

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

	gap: 11px;

	margin-bottom: 20px;

	color: #e1e8f2;

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

.grafixyy-live-dot {
	width: 10px;
	height: 10px;

	border-radius: 50%;

	background:
		var(--gfx-green);

	box-shadow:
		0 0 0 6px rgba(52, 211, 153, 0.09),
		0 0 22px rgba(52, 211, 153, 0.75);

	animation:
		grafixyyPulse
		1s ease-in-out infinite;
}

.grafixyy-hero-number {
	display: block;

	margin: 0 auto;

	background:
		linear-gradient(
			90deg,
			#c4b5fd,
			#67e8f9,
			#f9a8d4
		);

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

	color: transparent;

	font-size:
		clamp(50px, 8vw, 100px);

	font-weight: 900;

	line-height: 1.08;

	font-variant-numeric:
		tabular-nums;

	overflow-wrap: anywhere;
}

.grafixyy-hero-unit {
	margin-top: 10px;

	color: #ffffff;

	font-size: 27px;
	font-weight: 900;
}

.grafixyy-live-result p {
	margin:
		12px
		0
		0;

	color: var(--gfx-muted);

	font-size: 17px;
}


/* ==================================================
   Statistics
   ================================================== */

.grafixyy-stat-grid {
	display: grid;

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

	gap: 15px;

	margin-top: 15px;
}

.grafixyy-result-card {
	position: relative;

	overflow: hidden;

	padding:
		28px
		16px;

	border:
		1px solid var(--gfx-border);

	border-radius: 19px;

	background:
		var(--gfx-card);

	text-align: center;

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

.grafixyy-result-card:hover {
	transform:
		translateY(-4px);

	border-color:
		rgba(139, 92, 246, 0.40);

	background-color:
		#1d2a43;
}

.grafixyy-card-label {
	display: block;

	margin-bottom: 12px;

	color: #b8c4d5;

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

.grafixyy-result-card strong {
	display: block;

	margin-bottom: 8px;

	color: #e8e2ff;

	font-size:
		clamp(28px, 3vw, 40px);

	font-weight: 900;

	line-height: 1.15;

	font-variant-numeric:
		tabular-nums;

	overflow-wrap: anywhere;
}

.grafixyy-card-unit {
	color: #f1f5f9;

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


/* ==================================================
   Animations
   ================================================== */

@keyframes grafixyyReveal {

	from {
		opacity: 0;

		transform:
			translateY(16px);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}
}

@keyframes grafixyyPulse {

	0%,
	100% {
		transform: scale(1);

		opacity: 1;
	}

	50% {
		transform: scale(1.35);

		opacity: 0.65;
	}
}


/* ==================================================
   Tablet
   ================================================== */

@media (max-width: 900px) {

	.grafixyy-stat-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}
}


/* ==================================================
   Mobile
   ================================================== */

@media (max-width: 600px) {

	.grafixyy-app {
		border-radius: 24px;
	}

	.grafixyy-tool-shell {
		padding:
			28px
			18px;

		border-radius: 23px;
	}

	.grafixyy-eyebrow {
		font-size: 15px;
	}

	.grafixyy-tool-heading {
		margin-bottom: 30px;
	}

	.grafixyy-tool-heading h1 {
		font-size: 39px;

		line-height: 1.2;
	}

	.grafixyy-tool-heading p {
		font-size: 18px;

		line-height: 1.85;
	}

	.grafixyy-input-panel {
		padding: 18px;
	}

	.grafixyy-input-title {
		font-size: 20px;
	}

	.grafixyy-date-fields {
		grid-template-columns: 1fr;

		gap: 15px;
	}

	.grafixyy-field label {
		font-size: 17px;
	}

	.grafixyy-select {
		min-height: 62px;

		padding:
			10px
			14px;

		background-color:
			var(--gfx-surface-2);

		color: #ffffff;

		font-size: 19px;
	}

	.grafixyy-select:focus,
	.grafixyy-select:focus-visible,
	.grafixyy-select:active {
		background-color:
			var(--gfx-surface-2);

		color: #ffffff;
	}

	.grafixyy-actions {
		display: grid;

		grid-template-columns: 1fr;
	}

	.grafixyy-button {
		width: 100%;
		min-height: 60px;

		font-size: 18px;
	}

	.grafixyy-live-result {
		padding:
			34px
			14px;
	}

	.grafixyy-live-label {
		font-size: 17px;
	}

	.grafixyy-hero-number {
		font-size:
			clamp(40px, 12vw, 62px);

		line-height: 1.12;
	}

	.grafixyy-hero-unit {
		font-size: 24px;
	}

	.grafixyy-live-result p {
		font-size: 16px;
	}

	.grafixyy-stat-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 11px;
	}

	.grafixyy-result-card {
		padding:
			23px
			10px;
	}

	.grafixyy-card-label {
		font-size: 14px;
	}

	.grafixyy-result-card strong {
		font-size:
			clamp(25px, 7vw, 34px);
	}

	.grafixyy-card-unit {
		font-size: 15px;
	}
}


/* ==================================================
   Very Small Phones
   ================================================== */

@media (max-width: 380px) {

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

	.grafixyy-tool-heading h1 {
		font-size: 34px;
	}
}


/* ==================================================
   Reduced Motion
   ================================================== */

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

	.grafixyy-result-zone,
	.grafixyy-live-dot {
		animation: none;
	}

	.grafixyy-button,
	.grafixyy-result-card,
	.grafixyy-select {
		transition: none;
	}
}


/* ==================================================
   Exact Age
   ================================================== */

.grafixyy-exact-age {
	margin-top: 15px;

	padding:
		clamp(24px, 4vw, 36px);

	border:
		1px solid rgba(34, 211, 238, 0.22);

	border-radius:
		var(--gfx-radius-lg);

	background:
		linear-gradient(
			135deg,
			rgba(34, 211, 238, 0.08),
			rgba(139, 92, 246, 0.08)
		);

	text-align: center;
}

.grafixyy-exact-age-label {
	margin-bottom: 22px;

	color: var(--gfx-text-soft);

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

.grafixyy-exact-age-values {
	display: grid;

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

	gap: 12px;
}

.grafixyy-exact-age-part {
	padding:
		20px
		12px;

	border:
		1px solid rgba(148, 163, 184, 0.16);

	border-radius:
		var(--gfx-radius-md);

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

.grafixyy-exact-age-part strong {
	display: block;

	margin-bottom: 7px;

	background:
		linear-gradient(
			90deg,
			#c4b5fd,
			#67e8f9
		);

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

	color: transparent;

	font-size:
		clamp(32px, 4vw, 48px);

	font-weight: 900;

	line-height: 1.1;

	font-variant-numeric:
		tabular-nums;
}

.grafixyy-exact-age-part span {
	color: #f1f5f9;

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


@media (max-width: 600px) {

	.grafixyy-exact-age {
		padding:
			24px
			12px;
	}

	.grafixyy-exact-age-label {
		font-size: 17px;
	}

	.grafixyy-exact-age-values {
		gap: 8px;
	}

	.grafixyy-exact-age-part {
		padding:
			18px
			7px;
	}

	.grafixyy-exact-age-part strong {
		font-size:
			clamp(28px, 9vw, 38px);
	}

	.grafixyy-exact-age-part span {
		font-size: 15px;
	}
}


/* ==================================================
   Birth Story + Delight Layer
   ================================================== */

.grafixyy-story-card {
	position: relative;

	display: grid;

	grid-template-columns:
		110px minmax(0, 1fr);

	align-items: center;

	gap: 24px;

	overflow: hidden;

	margin-top: 15px;

	padding:
		26px
		30px;

	border:
		1px solid rgba(244, 114, 182, 0.25);

	border-radius:
		var(--gfx-radius-lg);

	background:
		radial-gradient(
			circle at 8% 20%,
			rgba(244, 114, 182, 0.16),
			transparent 32%
		),
		linear-gradient(
			135deg,
			rgba(139, 92, 246, 0.13),
			rgba(34, 211, 238, 0.06)
		);
}

.grafixyy-story-copy {
	min-width: 0;
}

.grafixyy-story-kicker {
	display: block;

	margin-bottom: 7px;

	color: #f9a8d4;

	font-size: 15px;
	font-weight: 900;
}

.grafixyy-story-title {
	color: var(--gfx-text);

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

	font-weight: 900;

	line-height: 1.45;
}

.grafixyy-story-title strong {
	color: #67e8f9;

	font-size: 1.12em;
}

.grafixyy-story-copy p {
	margin:
		8px 0 0;

	color: var(--gfx-muted);

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

	line-height: 1.8;
}


/* Character */

.grafixyy-whistler {
	display: flex;

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

	min-width: 0;
}

.grafixyy-whistler-face {
	position: relative;

	width: 82px;
	height: 82px;

	border:
		2px solid rgba(255, 255, 255, 0.24);

	border-radius:
		30px 35px 28px 38px;

	background:
		linear-gradient(
			145deg,
			#8b5cf6,
			#6d28d9
		);

	box-shadow:
		0 14px 35px rgba(139, 92, 246, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.26);

	transform: rotate(-5deg);
}

.grafixyy-whistler-eye {
	position: absolute;

	top: 27px;

	width: 7px;
	height: 9px;

	border-radius: 50%;

	background: #ffffff;
}

.grafixyy-whistler-eye-one {
	right: 22px;
}

.grafixyy-whistler-eye-two {
	right: 44px;
}

.grafixyy-whistler-mouth {
	position: absolute;

	top: 48px;
	right: 29px;

	width: 21px;
	height: 10px;

	border:
		3px solid #ffffff;

	border-top: 0;

	border-radius:
		0 0 20px 20px;
}

.grafixyy-whistle-one,
.grafixyy-whistle-two {
	position: absolute;

	color: var(--gfx-cyan);

	font-weight: 900;

	pointer-events: none;
}

.grafixyy-whistle-one {
	top: 5px;
	left: -20px;

	font-size: 26px;

	transform: rotate(-16deg);
}

.grafixyy-whistle-two {
	top: -15px;
	left: 3px;

	font-size: 20px;
}


/* Result celebration */

.grafixyy-story-card.is-celebrating
	.grafixyy-whistler-face {
	animation:
		grafixyyCharacterPop
		700ms
		cubic-bezier(0.2, 1.6, 0.4, 1)
		both;
}

.grafixyy-story-card.is-celebrating
	.grafixyy-whistle-one {
	animation:
		grafixyyWhistlePop
		750ms ease
		2 alternate;
}

.grafixyy-story-card.is-celebrating
	.grafixyy-whistle-two {
	animation:
		grafixyySparkPop
		650ms ease
		2 alternate;
}


/* Confetti */

.grafixyy-celebration {
	position: absolute;

	z-index: 20;

	inset: 0;

	overflow: hidden;

	border-radius:
		var(--gfx-radius-xl);

	pointer-events: none;
}

.grafixyy-confetti-piece {
	position: absolute;

	top: -25px;

	display: block;

	border-radius: 3px;

	opacity: 0;

	will-change:
		transform,
		opacity;

	animation-name:
		grafixyyConfettiFall;

	animation-timing-function:
		cubic-bezier(0.2, 0.7, 0.25, 1);

	animation-fill-mode:
		forwards;
}


/* Delight animations */

@keyframes grafixyyCharacterPop {

	0% {
		transform:
			rotate(-5deg)
			scale(0.72);
	}

	45% {
		transform:
			rotate(8deg)
			scale(1.16);
	}

	70% {
		transform:
			rotate(-8deg)
			scale(0.96);
	}

	100% {
		transform:
			rotate(-5deg)
			scale(1);
	}
}

@keyframes grafixyyWhistlePop {

	from {
		opacity: 0.4;

		transform:
			translate(8px, 6px)
			rotate(-16deg)
			scale(0.7);
	}

	to {
		opacity: 1;

		transform:
			translate(-7px, -8px)
			rotate(-5deg)
			scale(1.2);
	}
}

@keyframes grafixyySparkPop {

	from {
		opacity: 0.3;

		transform:
			scale(0.6)
			rotate(0);
	}

	to {
		opacity: 1;

		transform:
			scale(1.35)
			rotate(90deg);
	}
}

@keyframes grafixyyConfettiFall {

	0% {
		opacity: 0;

		transform:
			translate3d(
				0,
				-20px,
				0
			)
			rotate(0deg);
	}

	10% {
		opacity: 1;
	}

	85% {
		opacity: 1;
	}

	100% {
		opacity: 0;

		transform:
			translate3d(
				var(--gfx-confetti-drift),
				760px,
				0
			)
			rotate(
				var(--gfx-confetti-rotation)
			);
	}
}


/* Mobile Story */

@media (max-width: 600px) {

	.grafixyy-story-card {
		grid-template-columns: 1fr;

		gap: 14px;

		padding:
			25px
			18px;

		text-align: center;
	}

	.grafixyy-whistler-face {
		width: 74px;
		height: 74px;
	}

	.grafixyy-whistler-eye {
		top: 24px;
	}

	.grafixyy-whistler-eye-one {
		right: 19px;
	}

	.grafixyy-whistler-eye-two {
		right: 40px;
	}

	.grafixyy-whistler-mouth {
		top: 44px;
		right: 26px;
	}

	.grafixyy-story-title {
		font-size: 25px;
	}

	.grafixyy-story-copy p {
		font-size: 15px;
	}
}


/* Delight Reduced Motion */

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

	.grafixyy-story-card.is-celebrating
		.grafixyy-whistler-face,

	.grafixyy-story-card.is-celebrating
		.grafixyy-whistle-one,

	.grafixyy-story-card.is-celebrating
		.grafixyy-whistle-two,

	.grafixyy-confetti-piece {
		animation: none;
	}
}


/* ==================================================
   Surprise Engine V1
   ================================================== */

.grafixyy-surprise-card {
	position: relative;

	display: grid;

	grid-template-columns:
		120px minmax(0, 1fr);

	align-items: center;

	gap: 26px;

	overflow: hidden;

	margin-top: 15px;

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

	border:
		1px solid rgba(251, 191, 36, 0.38);

	border-radius:
		var(--gfx-radius-lg);

	background:
		radial-gradient(
			circle at 8% 30%,
			rgba(251, 191, 36, 0.18),
			transparent 30%
		),
		radial-gradient(
			circle at 90% 10%,
			rgba(244, 114, 182, 0.16),
			transparent 35%
		),
		linear-gradient(
			135deg,
			rgba(139, 92, 246, 0.16),
			rgba(11, 18, 34, 0.96)
		);

	box-shadow:
		0 20px 55px rgba(0, 0, 0, 0.22),
		0 0 40px rgba(251, 191, 36, 0.06);

	animation:
		grafixyySurpriseReveal
		700ms
		cubic-bezier(0.2, 1.4, 0.4, 1)
		both;
}

.grafixyy-surprise-card::before {
	content: "";

	position: absolute;

	top: -70px;
	left: -70px;

	width: 180px;
	height: 180px;

	border-radius: 50%;

	background:
		rgba(251, 191, 36, 0.12);

	filter: blur(18px);

	pointer-events: none;
}

.grafixyy-surprise-icon {
	position: relative;
	z-index: 1;

	display: flex;

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

	width: 100px;
	height: 100px;

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

	border-radius: 32px;

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

	font-size: 53px;

	box-shadow:
		inset 0 1px 0
		rgba(255, 255, 255, 0.12);

	animation:
		grafixyySurpriseIcon
		900ms
		cubic-bezier(0.2, 1.5, 0.4, 1)
		both;
}

.grafixyy-surprise-content {
	position: relative;
	z-index: 1;

	min-width: 0;
}

.grafixyy-surprise-badge {
	display: inline-flex;

	margin-bottom: 9px;

	padding:
		7px
		11px;

	border:
		1px solid rgba(251, 191, 36, 0.28);

	border-radius: 999px;

	background:
		rgba(251, 191, 36, 0.10);

	color: #fde68a;

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

.grafixyy-surprise-card h2 {
	margin:
		0 0 12px;

	color: #ffffff;

	font-size:
		clamp(24px, 3vw, 36px);

	font-weight: 900;

	line-height: 1.35;
}

.grafixyy-surprise-number-row {
	display: flex;

	align-items: baseline;

	flex-wrap: wrap;

	gap: 9px;

	margin-bottom: 11px;
}

.grafixyy-surprise-number-row strong {
	background:
		linear-gradient(
			90deg,
			#fde68a,
			#67e8f9,
			#f9a8d4
		);

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

	color: transparent;

	font-size:
		clamp(30px, 5vw, 54px);

	font-weight: 900;

	line-height: 1;

	font-variant-numeric:
		tabular-nums;
}

.grafixyy-surprise-number-row span {
	color: #ffffff;

	font-size: 18px;
	font-weight: 900;
}

.grafixyy-surprise-card p {
	max-width: 720px;

	margin: 0;

	color: var(--gfx-text-soft);

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

	line-height: 1.8;
}

.grafixyy-confetti-piece.is-star {
	display: flex;

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

	background: transparent !important;

	font-size: 18px;
	font-weight: 900;
}


/* Surprise animations */

@keyframes grafixyySurpriseReveal {

	0% {
		opacity: 0;

		transform:
			translateY(20px)
			scale(0.95);
	}

	60% {
		opacity: 1;

		transform:
			translateY(-4px)
			scale(1.01);
	}

	100% {
		opacity: 1;

		transform:
			translateY(0)
			scale(1);
	}
}

@keyframes grafixyySurpriseIcon {

	0% {
		transform:
			rotate(-16deg)
			scale(0.45);
	}

	55% {
		transform:
			rotate(11deg)
			scale(1.18);
	}

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


@media (max-width: 600px) {

	.grafixyy-surprise-card {
		grid-template-columns: 1fr;

		gap: 16px;

		padding:
			28px
			18px;

		text-align: center;
	}

	.grafixyy-surprise-icon {
		width: 82px;
		height: 82px;

		margin: 0 auto;

		border-radius: 27px;

		font-size: 43px;
	}

	.grafixyy-surprise-number-row {
		justify-content: center;
	}

	.grafixyy-surprise-card p {
		font-size: 15px;
	}
}


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

	.grafixyy-surprise-card,
	.grafixyy-surprise-icon {
		animation: none;
	}
}


/* ==================================================
   Next Birthday
   ================================================== */

.grafixyy-birthday-card {
	position: relative;

	display: grid;

	grid-template-columns:
		150px minmax(0, 1fr);

	align-items: center;

	gap: 30px;

	overflow: hidden;

	margin-top: 15px;

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

	border:
		1px solid rgba(34, 211, 238, 0.25);

	border-radius:
		var(--gfx-radius-lg);

	background:
		radial-gradient(
			circle at 8% 20%,
			rgba(34, 211, 238, 0.13),
			transparent 34%
		),
		radial-gradient(
			circle at 95% 90%,
			rgba(139, 92, 246, 0.15),
			transparent 36%
		),
		rgba(11, 18, 34, 0.94);

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

.grafixyy-birthday-visual {
	display: flex;

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

	min-height: 130px;
}


/* CSS Cake */

.grafixyy-birthday-cake {
	position: relative;

	width: 110px;
	height: 125px;
}

.grafixyy-cake-bottom {
	position: absolute;

	right: 5px;
	bottom: 5px;

	width: 100px;
	height: 60px;

	border-radius:
		14px 14px 22px 22px;

	background:
		linear-gradient(
			135deg,
			#8b5cf6,
			#6d28d9
		);

	box-shadow:
		0 16px 35px
		rgba(139, 92, 246, 0.28);
}

.grafixyy-cake-top {
	position: absolute;

	z-index: 2;

	right: 5px;
	bottom: 51px;

	width: 100px;
	height: 26px;

	border-radius: 50%;

	background:
		linear-gradient(
			90deg,
			#f9a8d4,
			#f472b6
		);
}

.grafixyy-candle {
	position: absolute;

	z-index: 3;

	right: 48px;
	bottom: 75px;

	width: 13px;
	height: 33px;

	border-radius: 5px;

	background:
		repeating-linear-gradient(
			45deg,
			#ffffff 0 5px,
			#22d3ee 5px 10px
		);
}

.grafixyy-candle-flame {
	position: absolute;

	z-index: 4;

	right: 47px;
	bottom: 112px;

	width: 15px;
	height: 21px;

	border-radius:
		70% 30% 70% 30%;

	background:
		linear-gradient(
			180deg,
			#fff7ae,
			#fbbf24 55%,
			#f97316
		);

	box-shadow:
		0 0 20px
		rgba(251, 191, 36, 0.85);

	transform:
		rotate(45deg);
}

.grafixyy-birthday-content {
	min-width: 0;
}

.grafixyy-birthday-kicker {
	display: block;

	margin-bottom: 6px;

	color: var(--gfx-cyan);

	font-size: 15px;
	font-weight: 900;
}

.grafixyy-birthday-card h2 {
	margin:
		0 0 8px;

	color: #ffffff;

	font-size:
		clamp(25px, 3vw, 36px);

	font-weight: 900;

	line-height: 1.35;
}

.grafixyy-birthday-date {
	color: var(--gfx-text-soft);

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

.grafixyy-birthday-count {
	display: flex;

	align-items: baseline;

	flex-wrap: wrap;

	gap: 10px;

	margin-top: 16px;
}

.grafixyy-birthday-count strong {
	background:
		linear-gradient(
			90deg,
			#67e8f9,
			#c4b5fd,
			#f9a8d4
		);

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

	color: transparent;

	font-size:
		clamp(42px, 6vw, 68px);

	font-weight: 900;

	line-height: 1;

	font-variant-numeric:
		tabular-nums;
}

.grafixyy-birthday-count span {
	color: #ffffff;

	font-size: 17px;
	font-weight: 900;
}

.grafixyy-birthday-content p {
	margin:
		12px 0 0;

	color: var(--gfx-muted);

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

	line-height: 1.8;
}


/* Birthday Mode */

.grafixyy-birthday-card.is-birthday-today {
	border-color:
		rgba(251, 191, 36, 0.65);

	background:
		radial-gradient(
			circle at 10% 20%,
			rgba(251, 191, 36, 0.20),
			transparent 34%
		),
		radial-gradient(
			circle at 90% 80%,
			rgba(244, 114, 182, 0.21),
			transparent 40%
		),
		linear-gradient(
			135deg,
			rgba(139, 92, 246, 0.24),
			rgba(11, 18, 34, 0.98)
		);

	box-shadow:
		0 0 50px
		rgba(251, 191, 36, 0.10);
}

.grafixyy-birthday-card.is-birthday-today
	.grafixyy-birthday-kicker {
	color: #fde68a;
}

.grafixyy-birthday-card.is-birthday-today
	.grafixyy-birthday-count strong {
	-webkit-background-clip: initial;
	background-clip: initial;

	background: none;

	color: inherit;

	font-size: 58px;
}

.grafixyy-birthday-card.is-partying
	.grafixyy-birthday-cake {
	animation:
		grafixyyCakeParty
		650ms
		cubic-bezier(0.2, 1.5, 0.4, 1)
		2 alternate;
}

.grafixyy-birthday-card.is-partying
	.grafixyy-candle-flame {
	animation:
		grafixyyFlameParty
		280ms ease-in-out
		infinite alternate;
}


@keyframes grafixyyCakeParty {

	from {
		transform:
			rotate(-6deg)
			scale(0.9);
	}

	to {
		transform:
			rotate(6deg)
			scale(1.08);
	}
}

@keyframes grafixyyFlameParty {

	from {
		transform:
			rotate(38deg)
			scale(0.88);
	}

	to {
		transform:
			rotate(52deg)
			scale(1.15);
	}
}


@media (max-width: 600px) {

	.grafixyy-birthday-card {
		grid-template-columns: 1fr;

		gap: 10px;

		padding:
			27px
			18px;

		text-align: center;
	}

	.grafixyy-birthday-visual {
		min-height: 115px;
	}

	.grafixyy-birthday-count {
		justify-content: center;
	}

	.grafixyy-birthday-date {
		font-size: 16px;
	}

	.grafixyy-birthday-content p {
		font-size: 15px;
	}
}


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

	.grafixyy-birthday-card,
	.grafixyy-birthday-card.is-partying
		.grafixyy-birthday-cake,
	.grafixyy-birthday-card.is-partying
		.grafixyy-candle-flame {
		animation: none;
		transition: none;
	}
}
/* ==================================================
   Birthday Year Journey
   ================================================== */

.grafixyy-year-journey {
	position: relative;
	overflow: hidden;

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

	border: 1px solid rgba(139, 92, 246, 0.30);
	border-radius: var(--gfx-radius-lg);

	background:
		radial-gradient(
			circle at 90% 0%,
			rgba(139, 92, 246, 0.18),
			transparent 36%
		),
		radial-gradient(
			circle at 8% 100%,
			rgba(34, 211, 238, 0.12),
			transparent 36%
		),
		rgba(11, 18, 34, 0.94);
}

.grafixyy-year-journey-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 24px;

	margin-bottom: 36px;
}

.grafixyy-year-journey-kicker {
	display: block;

	margin-bottom: 7px;

	color: var(--gfx-cyan);

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

/*
 * Explicit white title.
 */
.grafixyy-year-journey h2,
#grafixyy-year-journey-title {
	margin: 0;

	color: #ffffff;

	font-size: clamp(25px, 3vw, 36px);
	font-weight: 900;
	line-height: 1.35;
}

.grafixyy-year-journey-percent {
	flex: 0 0 auto;

	min-width: 120px;

	text-align: center;
}

.grafixyy-year-journey-percent strong {
	display: block;

	background:
		linear-gradient(
			90deg,
			#67e8f9,
			#c4b5fd,
			#f9a8d4
		);

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

	color: transparent;

	font-size: clamp(36px, 5vw, 54px);
	font-weight: 900;
	line-height: 1;

	font-variant-numeric: tabular-nums;
}

.grafixyy-year-journey-percent span {
	display: block;

	margin-top: 8px;

	color: var(--gfx-text-soft);

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


/* Track */

.grafixyy-year-track-wrap {
	position: relative;
}

.grafixyy-year-track {
	position: relative;

	height: 16px;

	margin:
		34px
		22px
		22px;

	border: 1px solid rgba(148, 163, 184, 0.20);
	border-radius: 999px;

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

	box-shadow:
		inset 0 2px 9px rgba(0, 0, 0, 0.30);
}

.grafixyy-year-track::before,
.grafixyy-year-track::after {
	content: "";

	position: absolute;
	z-index: 2;

	top: 50%;

	width: 11px;
	height: 11px;

	border-radius: 50%;

	background: #ffffff;

	box-shadow:
		0 0 0 5px rgba(255, 255, 255, 0.07);
}

.grafixyy-year-track::before {
	right: -5px;

	transform: translateY(-50%);
}

.grafixyy-year-track::after {
	left: -5px;

	transform: translateY(-50%);
}


/* Filled journey */

.grafixyy-year-track-fill {
	position: absolute;

	top: -1px;
	right: -1px;

	width: 0%;
	height: calc(100% + 2px);

	border-radius: inherit;

	background:
		linear-gradient(
			90deg,
			var(--gfx-purple),
			var(--gfx-cyan),
			var(--gfx-pink)
		);

	box-shadow:
		0 0 22px rgba(34, 211, 238, 0.34);

	transition:
		width
		1000ms
		cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* Rocket / You */

.grafixyy-year-you {
	position: absolute;
	z-index: 5;

	top: 50%;
	right: 0%;

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

	width: 48px;
	height: 48px;

	border: 2px solid rgba(255, 255, 255, 0.38);
	border-radius: 50%;

	background:
		linear-gradient(
			135deg,
			#8b5cf6,
			#4f46e5
		);

	box-shadow:
		0 0 0 7px rgba(139, 92, 246, 0.10),
		0 0 32px rgba(34, 211, 238, 0.38);

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

	transition:
		right
		1000ms
		cubic-bezier(0.2, 0.8, 0.2, 1);
}

.grafixyy-year-you::after {
	content: "";

	position: absolute;

	right: 39px;

	width: 25px;
	height: 5px;

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			rgba(34, 211, 238, 0),
			#22d3ee
		);

	filter: blur(1px);

	opacity: 0.85;
}

.grafixyy-year-you span {
	display: block;

	font-size: 23px;

	transform: rotate(-45deg);
}


/* Birthday labels */

.grafixyy-year-track-labels {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 20px;
}

.grafixyy-year-track-labels > div {
	display: grid;

	grid-template-columns:
		auto 1fr;

	column-gap: 8px;

	align-items: center;

	max-width: 45%;
}

.grafixyy-year-track-labels > div:last-child {
	text-align: left;
}

.grafixyy-year-track-labels > div > span {
	grid-row: 1 / span 2;

	font-size: 21px;
}

.grafixyy-year-track-labels strong {
	color: #ffffff;

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

.grafixyy-year-track-labels small {
	margin-top: 3px;

	color: var(--gfx-muted);

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

.grafixyy-year-journey-message {
	margin:
		25px
		0
		0;

	color: var(--gfx-text-soft);

	font-size: 15px;
	font-weight: 700;
	line-height: 1.8;

	text-align: center;
}


/* Active rocket */

.grafixyy-year-journey.is-ready
	.grafixyy-year-you {
	animation:
		grafixyyRocketFloat
		2.2s ease-in-out
		infinite;
}

@keyframes grafixyyRocketFloat {

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

	50% {
		transform:
			translate(50%, -50%)
			translateY(-5px);
	}
}


/* Birthday state */

.grafixyy-year-journey.is-birthday {
	border-color:
		rgba(251, 191, 36, 0.55);

	box-shadow:
		0 0 42px
		rgba(251, 191, 36, 0.07);
}

.grafixyy-year-journey.is-birthday
	.grafixyy-year-you {
	background:
		linear-gradient(
			135deg,
			#f59e0b,
			#f472b6
		);

	box-shadow:
		0 0 0 8px rgba(251, 191, 36, 0.10),
		0 0 38px rgba(251, 191, 36, 0.40);
}


/* Mobile */

@media (max-width: 600px) {

	.grafixyy-year-journey {
		padding:
			26px
			17px;
	}

	.grafixyy-year-journey-head {
		display: block;

		margin-bottom: 34px;

		text-align: center;
	}

	.grafixyy-year-journey-percent {
		margin-top: 19px;
	}

	.grafixyy-year-track {
		margin:
			34px
			20px
			24px;
	}

	.grafixyy-year-you {
		width: 42px;
		height: 42px;
	}

	.grafixyy-year-you span {
		font-size: 20px;
	}

	.grafixyy-year-you::after {
		right: 34px;

		width: 20px;
	}

	.grafixyy-year-track-labels {
		gap: 10px;
	}

	.grafixyy-year-track-labels > div {
		display: block;

		width: 48%;
		max-width: 48%;
	}

	.grafixyy-year-track-labels > div > span,
	.grafixyy-year-track-labels strong,
	.grafixyy-year-track-labels small {
		display: block;
	}

	.grafixyy-year-track-labels > div > span {
		margin-bottom: 4px;
	}

	.grafixyy-year-track-labels strong {
		font-size: 13px;
	}

	.grafixyy-year-track-labels small {
		margin-top: 4px;

		font-size: 11px;
	}
}


/* Reduced Motion */

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

	.grafixyy-year-track-fill,
	.grafixyy-year-you {
		transition: none;
	}

	.grafixyy-year-journey.is-ready
		.grafixyy-year-you {
		animation: none;
	}
}
/* ==================================================
   Methodology
   ================================================== */

.grafixyy-methodology {
	margin-top: 15px;

	border:
		1px solid rgba(148, 163, 184, 0.22);

	border-radius:
		var(--gfx-radius-lg);

	background:
		rgba(11, 18, 34, 0.92);

	overflow: hidden;

	color: var(--gfx-text);
}

.grafixyy-methodology summary {
	display: flex;

	align-items: center;

	gap: 16px;

	min-height: 86px;

	padding:
		20px
		24px;

	background:
		linear-gradient(
			135deg,
			rgba(139, 92, 246, 0.10),
			rgba(34, 211, 238, 0.05)
		);

	color: #ffffff;

	cursor: pointer;

	user-select: none;

	list-style: none;

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

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

.grafixyy-methodology summary::marker {
	display: none;
	content: "";
}

.grafixyy-methodology summary:hover {
	background:
		linear-gradient(
			135deg,
			rgba(139, 92, 246, 0.17),
			rgba(34, 211, 238, 0.09)
		);
}

.grafixyy-methodology summary:focus-visible {
	outline:
		3px solid var(--gfx-cyan);

	outline-offset: -3px;
}

.grafixyy-methodology-icon {
	display: flex;

	flex: 0 0 auto;

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

	width: 48px;
	height: 48px;

	border:
		1px solid rgba(139, 92, 246, 0.28);

	border-radius: 15px;

	background:
		rgba(139, 92, 246, 0.12);

	font-size: 24px;
}

.grafixyy-methodology-summary-copy {
	display: block;

	flex: 1 1 auto;

	min-width: 0;
}

.grafixyy-methodology-summary-copy strong {
	display: block;

	color: #ffffff;

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

	font-weight: 900;

	line-height: 1.4;
}

.grafixyy-methodology-summary-copy small {
	display: block;

	margin-top: 5px;

	color: var(--gfx-muted);

	font-size: 13px;
	font-weight: 600;

	line-height: 1.6;
}

.grafixyy-methodology-arrow {
	flex: 0 0 auto;

	color: var(--gfx-cyan);

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

	line-height: 1;

	transition:
		transform 220ms ease;
}

.grafixyy-methodology[open]
	.grafixyy-methodology-arrow {
	transform: rotate(180deg);
}


/* Open content */

.grafixyy-methodology-body {
	padding:
		30px
		24px
		26px;

	border-top:
		1px solid rgba(148, 163, 184, 0.16);
}

.grafixyy-methodology-intro {
	margin-bottom: 22px;

	padding:
		20px;

	border:
		1px solid rgba(34, 211, 238, 0.18);

	border-radius:
		var(--gfx-radius-md);

	background:
		linear-gradient(
			135deg,
			rgba(34, 211, 238, 0.07),
			rgba(139, 92, 246, 0.06)
		);
}

.grafixyy-methodology-intro strong {
	display: block;

	margin-bottom: 7px;

	color: #ffffff;

	font-size: 18px;
	font-weight: 900;
}

.grafixyy-methodology-intro p {
	margin: 0;

	color: var(--gfx-text-soft);

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

	line-height: 1.9;
}


/* Method cards */

.grafixyy-methodology-grid {
	display: grid;

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

	gap: 12px;
}

.grafixyy-methodology-item {
	display: grid;

	grid-template-columns:
		42px minmax(0, 1fr);

	gap: 13px;

	align-items: flex-start;

	margin: 0;

	padding:
		19px;

	border:
		1px solid rgba(148, 163, 184, 0.16);

	border-radius:
		var(--gfx-radius-md);

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

.grafixyy-methodology-item > span {
	display: flex;

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

	width: 42px;
	height: 42px;

	border-radius: 13px;

	background:
		rgba(139, 92, 246, 0.10);

	font-size: 21px;
}

.grafixyy-methodology-item h3 {
	margin:
		0 0 7px;

	color: #ffffff !important;

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

	line-height: 1.5;
}

.grafixyy-methodology-item p {
	margin: 0;

	color: var(--gfx-muted);

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

	line-height: 1.9;
}


/* Final note */

.grafixyy-methodology-note {
	display: flex;

	align-items: flex-start;

	gap: 12px;

	margin-top: 14px;

	padding:
		17px
		18px;

	border:
		1px solid rgba(251, 191, 36, 0.18);

	border-radius:
		var(--gfx-radius-md);

	background:
		rgba(251, 191, 36, 0.055);
}

.grafixyy-methodology-note > span {
	flex: 0 0 auto;

	font-size: 20px;
}

.grafixyy-methodology-note p {
	margin: 0;

	color: var(--gfx-text-soft);

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

	line-height: 1.8;
}


/* Mobile */

@media (max-width: 600px) {

	.grafixyy-methodology summary {
		gap: 12px;

		min-height: 80px;

		padding:
			17px
			15px;
	}

	.grafixyy-methodology-icon {
		width: 42px;
		height: 42px;

		border-radius: 13px;

		font-size: 21px;
	}

	.grafixyy-methodology-summary-copy small {
		font-size: 12px;
	}

	.grafixyy-methodology-arrow {
		font-size: 24px;
	}

	.grafixyy-methodology-body {
		padding:
			20px
			14px
			16px;
	}

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

	.grafixyy-methodology-item {
		padding: 16px;
	}

	.grafixyy-methodology-intro {
		padding: 17px;
	}
}


/* Reduced Motion */

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

	.grafixyy-methodology summary,
	.grafixyy-methodology-arrow {
		transition: none;
	}
}

/* ==================================================
   Share Result
   ================================================== */

.grafixyy-share {
	position: relative;

	overflow: hidden;

	margin-top: 15px;

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

	border:
		1px solid rgba(244, 114, 182, 0.30);

	border-radius:
		var(--gfx-radius-lg);

	background:
		radial-gradient(
			circle at 92% 5%,
			rgba(244, 114, 182, 0.15),
			transparent 32%
		),
		radial-gradient(
			circle at 4% 100%,
			rgba(34, 211, 238, 0.12),
			transparent 34%
		),
		linear-gradient(
			135deg,
			rgba(139, 92, 246, 0.10),
			rgba(11, 18, 34, 0.96)
		);

	color: #ffffff;
}

.grafixyy-share-glow {
	position: absolute;

	top: -120px;
	left: -100px;

	width: 260px;
	height: 260px;

	border-radius: 50%;

	background:
		rgba(139, 92, 246, 0.16);

	filter: blur(55px);

	pointer-events: none;
}


/* Header */

.grafixyy-share-head {
	position: relative;
	z-index: 1;

	display: grid;

	grid-template-columns:
		92px minmax(0, 1fr);

	align-items: center;

	gap: 22px;

	margin-bottom: 26px;
}

.grafixyy-share-heading {
	min-width: 0;
}

.grafixyy-share-kicker {
	display: block;

	margin-bottom: 6px;

	color: #f9a8d4;

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

.grafixyy-share h2,
#grafixyy-share-title {
	margin:
		0 0 8px;

	color: #ffffff !important;

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

	font-weight: 900;

	line-height: 1.35;
}

.grafixyy-share-heading p {
	margin: 0;

	color: var(--gfx-text-soft);

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

	line-height: 1.8;
}


/* Share character */

.grafixyy-share-character {
	display: flex;

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

.grafixyy-share-character-face {
	position: relative;

	width: 76px;
	height: 76px;

	border:
		2px solid rgba(255, 255, 255, 0.24);

	border-radius:
		28px 34px 26px 37px;

	background:
		linear-gradient(
			145deg,
			#22d3ee,
			#6366f1
		);

	box-shadow:
		0 14px 38px
		rgba(34, 211, 238, 0.18);

	transform:
		rotate(5deg);
}

.grafixyy-share-eye {
	position: absolute;

	top: 25px;

	width: 7px;
	height: 9px;

	border-radius: 50%;

	background: #ffffff;
}

.grafixyy-share-eye-one {
	right: 20px;
}

.grafixyy-share-eye-two {
	right: 42px;
}

.grafixyy-share-mouth {
	position: absolute;

	top: 46px;
	right: 29px;

	width: 17px;
	height: 9px;

	border:
		3px solid #ffffff;

	border-top: 0;

	border-radius:
		0 0 20px 20px;
}

.grafixyy-share-spark {
	position: absolute;

	color: #fde68a;

	font-weight: 900;
}

.grafixyy-share-spark-one {
	top: -15px;
	left: 4px;

	font-size: 22px;
}

.grafixyy-share-spark-two {
	top: 1px;
	left: -20px;

	font-size: 25px;
}


/* Result preview */

.grafixyy-share-preview {
	position: relative;
	z-index: 1;

	padding:
		28px
		22px;

	border:
		1px solid rgba(139, 92, 246, 0.27);

	border-radius:
		20px;

	background:
		linear-gradient(
			135deg,
			rgba(139, 92, 246, 0.14),
			rgba(34, 211, 238, 0.06)
		);

	text-align: center;
}

.grafixyy-share-preview-badge {
	display: inline-flex;

	margin-bottom: 15px;

	padding:
		7px
		11px;

	border:
		1px solid rgba(52, 211, 153, 0.25);

	border-radius: 999px;

	background:
		rgba(52, 211, 153, 0.08);

	color: #a7f3d0;

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

.grafixyy-share-preview-intro {
	margin:
		0 0 5px;

	color: var(--gfx-text-soft);

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

.grafixyy-share-preview-number {
	display: block;

	margin: 7px 0;

	background:
		linear-gradient(
			90deg,
			#c4b5fd,
			#67e8f9,
			#f9a8d4
		);

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

	color: transparent;

	font-size:
		clamp(38px, 6vw, 70px);

	font-weight: 900;

	line-height: 1.08;

	font-variant-numeric:
		tabular-nums;

	overflow-wrap: anywhere;
}

.grafixyy-share-preview-unit {
	color: #ffffff;

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

.grafixyy-share-preview-hook {
	margin:
		14px 0 0;

	color: var(--gfx-text-soft);

	font-size: 15px;
	font-weight: 600;
}

.grafixyy-share-preview-brand {
	margin-top: 18px;

	color: #ffffff;

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

	letter-spacing: 0.2px;
}

.grafixyy-share-preview-brand span {
	margin-right: 5px;

	color: var(--gfx-cyan);
}


/* Main share button */

.grafixyy-share-actions {
	position: relative;
	z-index: 1;

	margin-top: 18px;
}

.grafixyy-share-main-button {
	display: flex;

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

	gap: 10px;

	width: 100%;
	min-height: 62px;

	padding:
		12px
		22px;

	border: 0;

	border-radius:
		var(--gfx-radius-md);

	background:
		linear-gradient(
			135deg,
			var(--gfx-purple),
			#7c3aed 50%,
			var(--gfx-pink)
		);

	color: #ffffff;

	font-family: inherit;

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

	cursor: pointer;

	box-shadow:
		0 15px 38px
		rgba(139, 92, 246, 0.27);

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

.grafixyy-share-main-button:hover {
	transform:
		translateY(-2px);

	box-shadow:
		0 19px 45px
		rgba(139, 92, 246, 0.36);
}

.grafixyy-share-main-button:active {
	transform: translateY(0);
}

.grafixyy-share-main-button:focus-visible {
	outline:
		3px solid var(--gfx-cyan);

	outline-offset: 3px;
}


/* Platform buttons */

.grafixyy-share-platforms {
	display: grid;

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

	gap: 9px;

	margin-top: 10px;
}

.grafixyy-share-platform {
	display: flex;

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

	gap: 7px;

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

	margin: 0;

	padding:
		9px
		10px;

	border:
		1px solid rgba(148, 163, 184, 0.20);

	border-radius: 12px;

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

	color: #ffffff !important;

	font-family: inherit;

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

	line-height: 1.2;

	text-decoration: none !important;

	cursor: pointer;

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

.grafixyy-share-platform:hover {
	transform:
		translateY(-2px);

	border-color:
		rgba(255, 255, 255, 0.34);

	color: #ffffff !important;
}

.grafixyy-share-platform:focus-visible {
	outline:
		3px solid var(--gfx-cyan);

	outline-offset: 2px;
}

.grafixyy-share-platform > span:first-child {
	display: flex;

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

	font-size: 17px;
	font-weight: 900;
}

.grafixyy-share-whatsapp:hover {
	background:
		rgba(37, 211, 102, 0.14);

	border-color:
		rgba(37, 211, 102, 0.36);
}

.grafixyy-share-telegram:hover {
	background:
		rgba(34, 158, 217, 0.14);

	border-color:
		rgba(34, 158, 217, 0.38);
}

.grafixyy-share-facebook:hover {
	background:
		rgba(24, 119, 242, 0.15);

	border-color:
		rgba(24, 119, 242, 0.40);
}

.grafixyy-share-x:hover {
	background:
		rgba(255, 255, 255, 0.11);

	border-color:
		rgba(255, 255, 255, 0.35);
}

.grafixyy-share-copy:hover {
	background:
		rgba(139, 92, 246, 0.14);

	border-color:
		rgba(139, 92, 246, 0.38);
}


/* Feedback + privacy */

.grafixyy-share-status {
	min-height: 24px;

	margin:
		12px 0 0;

	color: #a7f3d0;

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

	text-align: center;
}

.grafixyy-share-privacy {
	position: relative;
	z-index: 1;

	display: flex;

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

	gap: 7px;

	margin:
		5px 0 0;

	color: var(--gfx-muted);

	font-size: 13px;
	font-weight: 600;

	text-align: center;
}


/* Tablet */

@media (max-width: 900px) {

	.grafixyy-share-platforms {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}
}


/* Mobile */

@media (max-width: 600px) {

	.grafixyy-share {
		padding:
			27px
			16px;
	}

	.grafixyy-share-head {
		grid-template-columns: 1fr;

		gap: 14px;

		text-align: center;
	}

	.grafixyy-share-character-face {
		width: 70px;
		height: 70px;
	}

	.grafixyy-share-preview {
		padding:
			25px
			12px;
	}

	.grafixyy-share-platforms {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.grafixyy-share-platform {
		min-height: 52px;

		font-size: 13px;
	}

	.grafixyy-share-copy {
		grid-column:
			1 / -1;
	}

	.grafixyy-share-privacy {
		align-items: flex-start;

		line-height: 1.6;
	}
}


/* Very small phones */

@media (max-width: 380px) {

	.grafixyy-share-platforms {
		grid-template-columns: 1fr;
	}

	.grafixyy-share-copy {
		grid-column: auto;
	}
}


/* Reduced Motion */

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

	.grafixyy-share-main-button,
	.grafixyy-share-platform {
		transition: none;
	}
}

/* ==================================================
   Share Card Button
   ================================================== */

.grafixyy-share-card-button {
	display: grid;

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

	align-items: center;

	gap: 13px;

	width: 100%;
	min-height: 70px;

	margin-top: 10px;

	padding:
		11px
		18px;

	border:
		1px solid rgba(34, 211, 238, 0.28);

	border-radius:
		var(--gfx-radius-md);

	background:
		linear-gradient(
			135deg,
			rgba(34, 211, 238, 0.10),
			rgba(139, 92, 246, 0.11)
		);

	color: #ffffff;

	font-family: inherit;

	text-align: right;

	cursor: pointer;

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

.grafixyy-share-card-button:hover {
	transform:
		translateY(-2px);

	border-color:
		rgba(34, 211, 238, 0.48);

	background:
		linear-gradient(
			135deg,
			rgba(34, 211, 238, 0.15),
			rgba(139, 92, 246, 0.16)
		);

	box-shadow:
		0 13px 32px
		rgba(34, 211, 238, 0.08);
}

.grafixyy-share-card-button:focus-visible {
	outline:
		3px solid var(--gfx-cyan);

	outline-offset: 3px;
}

.grafixyy-share-card-button-icon {
	font-size: 28px;
}

.grafixyy-share-card-button-copy {
	display: block;

	min-width: 0;
}

.grafixyy-share-card-button-copy strong {
	display: block;

	color: #ffffff;

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

.grafixyy-share-card-button-copy small {
	display: block;

	margin-top: 3px;

	color: var(--gfx-muted);

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

.grafixyy-share-card-button-arrow {
	color: var(--gfx-cyan);

	font-size: 21px;
	font-weight: 900;
}


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

	.grafixyy-share-card-button {
		transition: none;
	}
}

.grafixyy-share-card-button {
	margin-top: 0;
}

.grafixyy-share-main-button {
	margin-top: 10px;
}

.grafixyy-share-direct-label {
	margin:
		18px
		0
		9px;

	color: var(--gfx-text-soft);

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

	text-align: center;
}

/* ==================================================
   Discovery CTA
   ================================================== */

.grafixyy-discovery {
	position: relative;

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

	align-items: center;

	margin-top: 15px;
	padding: clamp(28px, 4vw, 42px);

	border:
		1px solid rgba(139, 92, 246, 0.30);

	border-radius:
		var(--gfx-radius-lg);

	background:
		radial-gradient(
			circle at 95% 10%,
			rgba(139, 92, 246, 0.18),
			transparent 34%
		),
		radial-gradient(
			circle at 5% 100%,
			rgba(244, 114, 182, 0.11),
			transparent 36%
		),
		rgba(11, 18, 34, 0.94);

	overflow: hidden;
}


/* Mystery object */

.grafixyy-discovery-dice {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 78px;
	height: 78px;

	border:
		2px solid rgba(255, 255, 255, 0.20);

	border-radius:
		26px 31px 24px 34px;

	background:
		linear-gradient(
			145deg,
			#8b5cf6,
			#ec4899
		);

	box-shadow:
		0 14px 40px
		rgba(139, 92, 246, 0.25);

	transform: rotate(-7deg);
}

.grafixyy-discovery-dice span {
	color: #ffffff;

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

	transform: rotate(7deg);
}


/* Copy */

.grafixyy-discovery-copy {
	min-width: 0;
}

.grafixyy-discovery-kicker {
	display: block;

	margin-bottom: 6px;

	color: #f9a8d4;

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

.grafixyy-discovery h2,
#grafixyy-discovery-title {
	margin:
		0 0 8px;

	color: #ffffff !important;

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

	font-weight: 900;

	line-height: 1.35;
}

.grafixyy-discovery-copy p {
	margin: 0;

	color: var(--gfx-text-soft);

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

	line-height: 1.8;
}


/* Actions */

.grafixyy-discovery-actions {
	grid-column:
		1 / -1;

	display: grid;

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

	gap: 10px;

	margin-top: 4px;
}

.grafixyy-discovery-button {
	display: flex;

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

	gap: 9px;

	min-height: 58px;

	margin: 0;

	padding:
		11px
		18px;

	border-radius:
		var(--gfx-radius-md);

	font-family: inherit;

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

	line-height: 1.2;

	text-decoration: none !important;

	cursor: pointer;

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

.grafixyy-discovery-button:hover {
	transform:
		translateY(-2px);

	text-decoration: none !important;
}

.grafixyy-discovery-button:focus-visible {
	outline:
		3px solid var(--gfx-cyan);

	outline-offset: 3px;
}

.grafixyy-discovery-retry {
	border:
		1px solid rgba(34, 211, 238, 0.26);

	background:
		rgba(34, 211, 238, 0.07);

	color: #e6fbff;
}

.grafixyy-discovery-retry:hover {
	border-color:
		rgba(34, 211, 238, 0.48);

	background:
		rgba(34, 211, 238, 0.12);

	color: #ffffff;
}

.grafixyy-discovery-surprise {
	border:
		1px solid rgba(244, 114, 182, 0.28);

	background:
		linear-gradient(
			135deg,
			#8b5cf6,
			#d946ef
		);

	color: #ffffff !important;

	box-shadow:
		0 13px 34px
		rgba(139, 92, 246, 0.22);
}

.grafixyy-discovery-surprise:hover {
	color: #ffffff !important;

	box-shadow:
		0 17px 42px
		rgba(139, 92, 246, 0.31);
}


/* Future note */

.grafixyy-discovery-note {
	grid-column:
		1 / -1;

	margin:
		3px 0 0;

	color: var(--gfx-muted);

	font-size: 13px;
	font-weight: 600;

	line-height: 1.7;

	text-align: center;
}


/* Mobile */

@media (max-width: 600px) {

	.grafixyy-discovery {
		grid-template-columns: 1fr;

		gap: 14px;

		padding:
			27px
			17px;

		text-align: center;
	}

	.grafixyy-discovery-dice {
		width: 70px;
		height: 70px;

		margin: 0 auto;
	}

	.grafixyy-discovery-actions {
		grid-column: auto;

		grid-template-columns: 1fr;
	}

	.grafixyy-discovery-note {
		grid-column: auto;
	}
}


/* Reduced Motion */

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

	.grafixyy-discovery-button {
		transition: none;
	}
}

/* ==================================================
   Supporting / SEO Content
   ================================================== */

.grafixyy-supporting-content {
	position: relative;

	margin-top: 44px;
	padding-top: 38px;

	border-top:
		1px solid rgba(148, 163, 184, 0.16);

	color: var(--gfx-text);
}

.grafixyy-supporting-header {
	max-width: 850px;

	margin:
		0 auto 28px;

	text-align: center;
}

.grafixyy-supporting-kicker {
	display: block;

	margin-bottom: 8px;

	color: var(--gfx-cyan);

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

.grafixyy-supporting-header h2,
#grafixyy-supporting-title {
	margin:
		0 0 12px;

	color: #ffffff !important;

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

	font-weight: 900;

	line-height: 1.35;
}

.grafixyy-supporting-header p {
	max-width: 760px;

	margin: 0 auto;

	color: var(--gfx-text-soft);

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

	line-height: 1.95;
}


/* Main content cards */

.grafixyy-supporting-grid {
	display: grid;

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

	gap: 14px;
}

.grafixyy-supporting-card {
	position: relative;

	margin: 0;
	padding: 24px;

	border:
		1px solid rgba(148, 163, 184, 0.17);

	border-radius:
		var(--gfx-radius-lg);

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.04),
			rgba(139, 92, 246, 0.035)
		);

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

.grafixyy-supporting-card:hover {
	transform:
		translateY(-3px);

	border-color:
		rgba(34, 211, 238, 0.28);

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.055),
			rgba(34, 211, 238, 0.045)
		);
}

.grafixyy-supporting-icon {
	display: flex;

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

	width: 46px;
	height: 46px;

	margin-bottom: 16px;

	border:
		1px solid rgba(139, 92, 246, 0.23);

	border-radius: 14px;

	background:
		rgba(139, 92, 246, 0.09);

	font-size: 22px;
}

.grafixyy-supporting-card h3 {
	margin:
		0 0 9px;

	color: #ffffff !important;

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

	line-height: 1.5;
}

.grafixyy-supporting-card p {
	margin: 0;

	color: var(--gfx-muted);

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

	line-height: 1.95;
}


/* Leap-day note */

.grafixyy-supporting-note {
	display: grid;

	grid-template-columns:
		68px minmax(0, 1fr);

	align-items: center;

	gap: 19px;

	margin-top: 14px;
	padding: 23px;

	border:
		1px solid rgba(244, 114, 182, 0.21);

	border-radius:
		var(--gfx-radius-lg);

	background:
		linear-gradient(
			135deg,
			rgba(244, 114, 182, 0.07),
			rgba(139, 92, 246, 0.055)
		);
}

.grafixyy-supporting-note-mark {
	display: flex;

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

	width: 64px;
	height: 64px;

	border:
		1px solid rgba(244, 114, 182, 0.28);

	border-radius: 20px;

	background:
		rgba(244, 114, 182, 0.10);

	color: #f9a8d4;

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

	font-variant-numeric:
		tabular-nums;
}

.grafixyy-supporting-note h3 {
	margin:
		0 0 7px;

	color: #ffffff !important;

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

.grafixyy-supporting-note p {
	margin: 0;

	color: var(--gfx-muted);

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

	line-height: 1.9;
}


/* FAQ */

.grafixyy-faq {
	margin-top: 32px;
}

.grafixyy-faq-heading {
	display: flex;

	align-items: center;

	gap: 12px;

	margin-bottom: 14px;
}

.grafixyy-faq-heading > span {
	display: flex;

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

	width: 44px;
	height: 44px;

	border:
		1px solid rgba(34, 211, 238, 0.22);

	border-radius: 14px;

	background:
		rgba(34, 211, 238, 0.08);

	color: var(--gfx-cyan);

	font-size: 24px;
	font-weight: 900;
}

.grafixyy-faq-heading h2 {
	margin: 0;

	color: #ffffff !important;

	font-size:
		clamp(24px, 3vw, 31px);

	font-weight: 900;
}

.grafixyy-faq details {
	overflow: hidden;

	margin-top: 9px;

	border:
		1px solid rgba(148, 163, 184, 0.16);

	border-radius:
		var(--gfx-radius-md);

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

.grafixyy-faq summary {
	position: relative;

	display: block;

	padding:
		18px
		54px
		18px
		18px;

	color: #ffffff;

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

	line-height: 1.7;

	cursor: pointer;

	user-select: none;

	list-style: none;

	transition:
		background-color 160ms ease,
		color 160ms ease;
}

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

.grafixyy-faq summary::marker {
	content: "";
}

.grafixyy-faq summary::before {
	content: "+";

	position: absolute;

	top: 50%;
	right: 18px;

	display: flex;

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

	width: 25px;
	height: 25px;

	border-radius: 8px;

	background:
		rgba(34, 211, 238, 0.08);

	color: var(--gfx-cyan);

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

	transform:
		translateY(-50%);

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

.grafixyy-faq details[open]
	summary::before {
	content: "−";

	background:
		rgba(139, 92, 246, 0.13);
}

.grafixyy-faq summary:hover {
	background:
		rgba(255, 255, 255, 0.04);
}

.grafixyy-faq summary:focus-visible {
	outline:
		3px solid var(--gfx-cyan);

	outline-offset: -3px;
}

.grafixyy-faq details p {
	margin: 0;

	padding:
		0
		18px
		19px;

	color: var(--gfx-muted);

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

	line-height: 1.95;
}


/* Mobile */

@media (max-width: 600px) {

	.grafixyy-supporting-content {
		margin-top: 34px;
		padding-top: 30px;
	}

	.grafixyy-supporting-header {
		margin-bottom: 22px;
	}

	.grafixyy-supporting-header p {
		font-size: 16px;
	}

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

	.grafixyy-supporting-card {
		padding: 20px;
	}

	.grafixyy-supporting-note {
		grid-template-columns: 1fr;

		gap: 13px;

		padding: 20px;

		text-align: center;
	}

	.grafixyy-supporting-note-mark {
		margin: 0 auto;
	}

	.grafixyy-faq {
		margin-top: 28px;
	}

	.grafixyy-faq summary {
		padding:
			17px
			51px
			17px
			15px;

		font-size: 14px;
	}

	.grafixyy-faq details p {
		padding:
			0
			15px
			17px;
	}
}


/* Reduced Motion */

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

	.grafixyy-supporting-card,
	.grafixyy-faq summary,
	.grafixyy-faq summary::before {
		transition: none;
	}
}

/* ==================================================
   Supporting Content Toggle
   ================================================== */

.grafixyy-supporting-summary {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.grafixyy-supporting-summary * {
	cursor: pointer;
}

.grafixyy-supporting-summary::selection,
.grafixyy-supporting-summary *::selection {
	background: transparent;
}

.grafixyy-supporting-content {
	scroll-margin-top: 110px;
}