.webmz-ahs {
	--webmz-ahs-stage-size: min(520px, 92vw);
	--webmz-ahs-orbit-radius: min(210px, 38vw);
	--webmz-ahs-center-width: 52%;
	--webmz-ahs-icon-size: clamp(44px, 11vw, 58px);
	--webmz-ahs-orbit-duration: 24s;
	--webmz-ahs-ring-color: rgba(96, 165, 250, 0.45);
	--webmz-ahs-ring-width: 2px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding-block: clamp(16px, 4vw, 32px);
}

.webmz-ahs__stage {
	position: relative;
	width: var(--webmz-ahs-stage-size);
	height: var(--webmz-ahs-stage-size);
	max-width: 100%;
	margin-inline: auto;
}

.webmz-ahs__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--webmz-ahs-orbit-radius) * 2);
	height: calc(var(--webmz-ahs-orbit-radius) * 2);
	border: var(--webmz-ahs-ring-width) dashed var(--webmz-ahs-ring-color);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 1;
}

.webmz-ahs__orbit {
	position: absolute;
	inset: 0;
	z-index: 3;
	animation: webmz-ahs-orbit-spin var(--webmz-ahs-orbit-duration) linear infinite;
	transform-origin: center center;
	will-change: transform;
}

.webmz-ahs__orbit:has(.webmz-ahs__icon:hover),
.webmz-ahs__orbit:has(.webmz-ahs__icon:focus-visible),
.webmz-ahs__orbit.is-paused {
	animation-play-state: paused;
}

.webmz-ahs__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--webmz-ahs-icon-size);
	height: var(--webmz-ahs-icon-size);
	margin-top: calc(var(--webmz-ahs-icon-size) / -2);
	margin-left: calc(var(--webmz-ahs-icon-size) / -2);
	color: inherit;
	text-decoration: none;
	transform: rotate(var(--webmz-ahs-angle)) translateY(calc(-1 * var(--webmz-ahs-orbit-radius))) rotate(calc(-1 * var(--webmz-ahs-angle)));
	transform-origin: center center;
}

.webmz-ahs__icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
	filter: grayscale(1);
	opacity: 0.82;
	transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.webmz-ahs-icons--color .webmz-ahs__icon-box {
	filter: grayscale(0);
	opacity: 1;
}

.webmz-ahs__icon:hover .webmz-ahs__icon-box,
.webmz-ahs__icon:focus-visible .webmz-ahs__icon-box {
	filter: grayscale(0);
	opacity: 1;
	transform: scale(1.08);
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}

.webmz-ahs__icon-box svg,
.webmz-ahs__icon-box i {
	display: block;
	width: 52%;
	height: 52%;
	font-size: clamp(18px, 4vw, 24px);
	line-height: 1;
}

.webmz-ahs__icon-image {
	display: block;
	width: 58%;
	height: 58%;
	object-fit: contain;
}

.webmz-ahs__center {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: var(--webmz-ahs-center-width);
	max-width: calc(100% - var(--webmz-ahs-icon-size));
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.webmz-ahs__tilt {
	pointer-events: auto;
	transform-style: preserve-3d;
}

.webmz-ahs__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

@keyframes webmz-ahs-orbit-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 767px) {
	.webmz-ahs {
		--webmz-ahs-stage-size: min(100%, 92vw);
		--webmz-ahs-orbit-radius: min(150px, 34vw);
		--webmz-ahs-center-width: 58%;
	}
}

@media (max-width: 479px) {
	.webmz-ahs {
		--webmz-ahs-orbit-radius: min(128px, 31vw);
		--webmz-ahs-icon-size: clamp(40px, 12vw, 48px);
		--webmz-ahs-center-width: 62%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.webmz-ahs__orbit {
		animation: none;
	}

	.webmz-ahs__icon-box {
		filter: grayscale(0);
		opacity: 1;
		transition: none;
	}
}