.tt-easter-egg {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	overflow: hidden;
	pointer-events: none;
}

.tt-easter-egg__stage {
	position: absolute;
	inset: 0;
}

.tt-easter-egg__portrait {
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(72px, 10vw, 128px);
	aspect-ratio: 1;
	border: 3px solid rgba(255, 255, 255, 0.86);
	border-radius: 999px;
	box-shadow: 0 18px 45px rgba(26, 37, 47, 0.22);
	object-fit: cover;
	pointer-events: none;
	user-select: none;
	will-change: transform;
}

.tt-easter-egg__close {
	position: fixed;
	top: max(16px, env(safe-area-inset-top));
	right: max(16px, env(safe-area-inset-right));
	z-index: 1;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(234, 236, 238, 0.9);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 12px 30px rgba(26, 37, 47, 0.16);
	color: #1a252f;
	cursor: pointer;
	font: 600 26px/1 var(--tt-font-family, sans-serif);
	pointer-events: auto;
	transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.tt-easter-egg__close:hover {
	background: #fff;
	border-color: #d6dbe1;
	transform: translateY(-1px);
}

.tt-easter-egg__close:focus-visible {
	outline: 3px solid rgba(81, 83, 232, 0.35);
	outline-offset: 3px;
}

@media (max-width: 599px) {
	.tt-easter-egg__portrait {
		width: clamp(64px, 21vw, 92px);
		border-width: 2px;
	}

	.tt-easter-egg__close {
		width: 36px;
		height: 36px;
		font-size: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tt-easter-egg__close {
		transition: none;
	}
}