.gh-motion-ripple-host {
	overflow: hidden;
	isolation: isolate;
}
.gh-motion-ripple-static { position: relative; }
.gh-motion-ripple {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
	background: color-mix(in srgb, var(--gh-accent-solid) 28%, transparent);
	transform: scale(0);
	animation: gh-ripple-out 600ms var(--gh-ease-out) forwards;
}
.gh-btn-primary .gh-motion-ripple,
.gh-sale-banner .gh-motion-ripple {
	background: color-mix(in srgb, var(--gh-accent-on-solid) 24%, transparent);
}
@keyframes gh-ripple-out {
	to { transform: scale(3); opacity: 0; }
}

.gh-pf-like-control {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 66px;
	height: 42px;
	margin: 0;
	padding-inline: 12px;
	border: 1px solid color-mix(in srgb, var(--gh-white) 55%, transparent);
	border-radius: var(--gh-r-full);
	background: color-mix(in srgb, var(--gh-bg-surface) 92%, transparent);
	color: var(--gh-text-primary);
	box-shadow: var(--gh-shadow-2);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	font: inherit;
	font-size: 12.5px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition:
		transform var(--gh-dur-bounce) var(--gh-ease-spring),
		background-color var(--gh-dur-base) var(--gh-ease-out),
		border-color var(--gh-dur-base) var(--gh-ease-out),
		color var(--gh-dur-base) var(--gh-ease-out);
}
.gh-pf-like-control.is-readonly { cursor: default; }
.gh-pf-like-control.is-on {
	border-color: var(--gh-accent-border);
	background: var(--gh-accent-surface);
	color: var(--gh-accent-text);
}
.gh-like-heart {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 19px;
	block-size: 19px;
	transition: transform var(--gh-dur-bounce) var(--gh-ease-spring);
}
.gh-like-heart svg { inline-size: 19px; block-size: 19px; stroke: currentColor; }
.gh-pf-like-control.is-on .gh-like-heart svg { fill: var(--gh-accent-solid); stroke: var(--gh-accent-solid); }
.gh-pf-like-control.is-pop .gh-like-heart { transform: scale(1.35); }
.gh-like-particle {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 25px;
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: var(--gh-accent-solid);
	pointer-events: none;
	transform: translate(-50%, -50%) scale(1);
	animation: gh-like-particle-fly 600ms var(--gh-ease-out) forwards;
}
@keyframes gh-like-particle-fly {
	to {
		transform: translate(calc(-50% + var(--gh-particle-x)), calc(-50% + var(--gh-particle-y))) scale(0);
		opacity: 0;
	}
}

.gh-chip-check span {
	transition:
		transform var(--gh-dur-bounce) var(--gh-ease-spring),
		background-color var(--gh-dur-base) var(--gh-ease-out),
		color var(--gh-dur-base) var(--gh-ease-out),
		border-color var(--gh-dur-base) var(--gh-ease-out);
}
.gh-chip-check input:checked + span {
	background: var(--gh-accent-solid);
	border-color: var(--gh-accent-solid);
	color: var(--gh-accent-on-solid);
}
.gh-chip-check span.is-pop { transform: scale(1.12); }

.gh-step-val {
	display: inline-block;
	min-width: 2ch;
	font-variant-numeric: tabular-nums;
	transition: transform var(--gh-dur-bounce) var(--gh-ease-spring);
}
.gh-step-val.is-bump { transform: scale(1.3); }
.gh-step-btn {
	transition:
		transform var(--gh-dur-fast) var(--gh-ease-out),
		background-color var(--gh-dur-base) var(--gh-ease-out),
		border-color var(--gh-dur-base) var(--gh-ease-out),
		color var(--gh-dur-base) var(--gh-ease-out);
}
.gh-step-btn:active { transform: scale(.9); }

.gh-snackbar {
	position: fixed;
	inset-inline-start: 50%;
	inset-block-end: max(24px, env(safe-area-inset-bottom));
	z-index: 1200;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	min-width: min(390px, calc(100vw - 32px));
	max-width: calc(100vw - 32px);
	overflow: hidden;
	padding: 13px 16px 16px;
	border: 1px solid color-mix(in srgb, var(--gh-white) 12%, transparent);
	border-radius: var(--gh-radius-control);
	background: var(--gh-stone-900);
	color: var(--gh-white);
	box-shadow: var(--gh-shadow-4);
	transform: translate(-50%, calc(100% + 40px));
	opacity: 0;
	transition:
		transform 400ms var(--gh-ease-spring),
		opacity var(--gh-dur-base) var(--gh-ease-out);
}
.gh-snackbar.is-show { transform: translate(-50%, 0); opacity: 1; }
.gh-snackbar-message { min-width: 0; font-size: 13.5px; font-weight: 700; }
.gh-snackbar-undo {
	padding: 5px 9px;
	border: 0;
	border-radius: var(--gh-radius-compact);
	background: transparent;
	color: var(--gh-accent-text);
	font: inherit;
	font-size: 13px;
	font-weight: 900;
	cursor: pointer;
}
.gh-snackbar-progress {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 3px;
	background: var(--gh-accent-solid);
	transform-origin: right center;
	animation: gh-snackbar-drain var(--gh-snackbar-duration, 3000ms) linear forwards;
}
.gh-snackbar.is-paused .gh-snackbar-progress { animation-play-state: paused; }
@keyframes gh-snackbar-drain {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

.gh-card,
.gh-card-course,
.gh-pf-card,
.gh-asset-card,
.gh-review-card,
.gh-cert-card,
.gh-community-card {
	transition:
		transform 500ms var(--gh-ease-spring),
		box-shadow 500ms var(--gh-ease-spring),
		border-color var(--gh-dur-base) var(--gh-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.gh-card:hover,
	.gh-card-course:hover,
	.gh-pf-card:hover,
	.gh-asset-card:hover,
	.gh-review-card:hover,
	.gh-cert-card:hover,
	.gh-community-card:hover {
		transform: translateY(var(--gh-motion-lift));
		box-shadow: var(--gh-shadow-3);
	}
}

@media (max-width: 640px) {
	.gh-snackbar { inset-block-end: max(86px, calc(env(safe-area-inset-bottom) + 72px)); }
}

@media (prefers-reduced-motion: reduce) {
	.gh-motion-ripple { display: none; }
	.gh-pf-like-control,
	.gh-like-heart,
	.gh-chip-check span,
	.gh-step-val,
	.gh-step-btn,
	.gh-snackbar,
	.gh-card,
	.gh-card-course,
	.gh-pf-card,
	.gh-asset-card,
	.gh-review-card,
	.gh-cert-card,
	.gh-community-card { transition-duration: 1ms !important; }
	.gh-like-particle { display: none; }
	.gh-snackbar-progress { animation: none; transform: scaleX(1); }
	.gh-card:hover,
	.gh-card-course:hover,
	.gh-pf-card:hover,
	.gh-asset-card:hover,
	.gh-review-card:hover,
	.gh-cert-card:hover,
	.gh-community-card:hover { transform: none; }
}