* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

#iframe {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100svh;
	border: none;
	/* pointer-events: none; */
	/* overflow: hidden; */
}


html,
textarea {
	/* font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Chatbot button */
#chatbot {
	position: relative;
	width: 64px;
	height: 64px;
	position: fixed;
	/* bottom: 32px; */
	bottom: 17%;
	/* right: 32px; */
	right: calc(3.5% - 32px + 20px);
	cursor: pointer;
	/* Prevent semi-transparent blue box on tap */
	-webkit-tap-highlight-color: transparent;
	transition: bottom 0.9s ease;
	animation: ani-chatbot-show 0.4s ease;
}
@keyframes ani-chatbot-show {
	0% {
		transform: scale(0.4, 0.6);
	}
	20% {
		transform: scale(0.6, 0.6);
	}
	40% {
		transform: scale(1.2, 0.8);
	}
	60% {
		transform: scale(0.9, 1.2);
	}
	80% {
		transform: scale(1.05, 0.95);
	}
	100% {
		transform: scale(1.0, 1.0);
	}
}
#chatbot.hidden {
	animation: ani-chatbot-hidden 0.3s ease forwards;
}
@keyframes ani-chatbot-hidden {
	100% {
		transform: scale(0.1, 0.1);
		opacity: 0;
	}
}

#chatbot.scroll_top_up {
	bottom: 17%;
	transition: bottom 0.9s ease
}

.robot-layer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(
		calc(-50% + var(--offset-x, 0px)),
		calc(-50% + var(--offset-y, 0px))
	) rotate(var(--rotate, 0deg));
	transition: transform 0.1s ease-out;
	will-change: transform;
	/* Hint to browser for optimization; note: pre-allocating too many resources may reduce performance */
}

/* Robot antenna hover: no spin, parallax handles positioning */

/* Greeting speech bubble */
.greeting-bubble {
	position: absolute;
	bottom: 0px;
	right: 72px;
	background: white;
	padding: 12px 18px;
	border-radius: 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	opacity: 0;
	transform: translateX(10px) scale(0.4, 0.6);
	transform-origin: right center;
	pointer-events: none;
	transition: all 0.3s ease;
	white-space: nowrap;
	font-size: 14px;
	color: #333;
	transition: all 0.2s ease;
}
/* Bubble right-side triangle */
.greeting-bubble::after {
	content: "";
	position: absolute;
	right: -8px;
	top: 65%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid white;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	transition: all 0.3s ease;
}
#chatbot:hover .greeting-bubble {
	opacity: 1;
	transform: translateX(0px) scale(1.0, 1.0);
	animation: ani-greeting-bubble 0.3s ease backwards;
}
@keyframes ani-greeting-bubble {
	0% {
		transform: translateX( 10px) scale(0.4, 0.6);
	}
	/* 20% {
		transform: translateX( 10px) scale(0.6, 0.6);
	} */
	40% {
		transform: translateX( -5px) scale(1.2, 0.8);
	}
	60% {
		transform: translateX(  4px) scale(0.9, 1.2);
	}
	80% {
		transform: translateX( -2px) scale(1.05, 0.95);
	}
	100% {
		transform: translateX(  0px) scale(1.0, 1.0);
	}
}

/* Chat window */
.chat-window {
	position: fixed;
	bottom: 32px;
	right: 32px;
	width: 380px;
	height: 550px;
	max-height: calc(100dvh - 32px * 2);
	/* background: white; */
	border-radius: 20px;
	box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateY(20px) scale(0.95);
	pointer-events: none;
	transition: all 0.3s ease;
	/* transition: 0s; */
	z-index: 1001;
	overflow: hidden;
	overscroll-behavior: contain;
}

/* Window active state */
.chat-window.active {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: all;
}

/* Window expanded state */
.chat-window.expanded {
	/* width: calc(380px + 32px); */
	width: 480px;
	height: 100dvh;
	max-height: 100dvh;
	right: 0;
	bottom: 0;
	border-radius: unset;
}

@media (max-width: 480px) {
	.chat-window,
	.chat-window.expanded {
		width: 100vw;
		/* Use --app-height (dynamically updated by visualViewport) for mobile height adjustment, fallback to 100svh */
		/* height: var(--app-height, 100svh); */
		/* max-height: var(--app-height, 100svh); */
		height: 100svh;
		max-height: 100svh;
		/* top: 0; */
		/* Using top: 0 causes incorrect window height when iOS keyboard opens */
		top: unset;
		top: unset !important;
		right: unset;
		left: unset;
		bottom: 0 !important;
		bottom: unset;
		border-radius: unset;
		/* transition: all 0s, opacity 0.3s, transform 0.3s; */
		transition: opacity 0.3s, transform 0.3s;
		/* transition: 0s; */

		/* width: auto; */
		/* height: auto; */
		inset: 0;
	}

	.chat-window.active {
		/* opacity: 0.9; */
	}

	.h-transition {
		transition: all 0.2s;
		opacity: 0.5 !important;
	}

	.message.ai .message-bubble {
		/* color: red !important; */
	}
}

/* Chat header bar */
.chat-header {
	background: linear-gradient(135deg, #2ebbee 0%, #0e75b4 100%);
	color: white;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	/* position: sticky; */
	/* top: 0; */
}

.chat-header h3 {
	/* position: absolute; */
	/* left: 50%; */
	/* transform: translateX(-50%); */
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

/* .header-left {
	display: flex;
	gap: 10px;
} */

.expand-button,
.close-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0);
	cursor: pointer;
	transition: all 0.2s ease;
}

.expand-button:hover,
.close-button:hover {
	background: rgba(255, 255, 255, 0.1);
}

.expand-button svg,
.close-button svg {
	width: 24px;
	height: 24px;
	fill: white;
}

@media (max-width: 480px) {
	.expand-button {
		visibility: hidden;
	}
}

/* Messages area */
.chat-messages {
	flex: 1;
	padding: 20px;
	overflow-y: auto;
	background: #f8f9fa;
	display: flex;
	flex-direction: column;
	gap: 15px;
	overscroll-behavior: contain;
	min-height: 0;
	/* Allow flex:1 to shrink to true content height, preventing input area overlap */
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
}

.chat-messages::-webkit-scrollbar {
	width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
	background: #ddd;
	border-radius: 3px;
}

/* Message */
.message {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	animation: ani-message-show 0.3s ease;
}

@keyframes ani-message-show {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Grouped consecutive messages */
.message.grouped {
	margin-top: -10px;
}

.message.grouped .ai-avatar {
	visibility: hidden;
}

.message.user {
	justify-content: flex-end;
}

.message.ai {
	justify-content: flex-start;
}

/* AI avatar */
.ai-avatar {
	width: 36px;
	min-width: 36px;
	height: 36px;
	/* 	border-radius: 50%; */
	/* 	background-image: url("ai-avatar.png"); */
	background-image: url("data:image/png;base64,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");
	/* Using Base64 PNG data */
	background-size: contain;
	/* Ensure image covers the full circle */
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Prevent image repetition */
}

@media (max-width: 480px) {
	.ai-avatar {
		display: none;
	}
}

/* Message bubble */
.message-bubble {
	max-width: 75%;
	padding: 12px 16px;
	word-wrap: break-word;
	/* white-space: pre-line; */
	line-height: 1.5;
	font-size: 14px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.expanded .message-bubble {
	max-width: 80%;
}

.message.user .message-bubble {
	border-radius: 16px 16px 4px 16px;
	/* 	background: linear-gradient(135deg, #2ebbee 0%, #0e75b4 100%); */
	background: #2ebbee;
	color: white;
}

.message.ai .message-bubble {
	background: white;
	color: #333;
}

@media (max-width: 480px) {
	.message-bubble {
		font-size: 16px;
		line-height: 1.75;
	}

	.message.ai .message-bubble {
		max-width: unset;
		padding: 0.25rem 0;
		background: unset;
		box-shadow: unset;
	}
}

/* First message in a group */
.message.ai:not(.grouped) .message-bubble {
	border-radius: 16px 16px 16px 4px;
}

/* Middle messages in a group */
.message.ai:not(.grouped)+.ai.grouped .message-bubble,
.message.ai.grouped+.ai.grouped .message-bubble {
	border-radius: 4px 16px 16px 4px;
}

/* Last message in a group */
.message.ai.grouped:not(:has(+ .ai.grouped)) .message-bubble {
	border-radius: 4px 16px 16px 16px;
}


.message-bubble p {
	margin-bottom: 0.5rem;
}

.message-bubble p:last-child {
	margin-bottom: 0;
}

/* Input area */
.chat-input-area {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	/* border-top: 1px solid #eee; */
	background: white;
	box-shadow: 0 0 12px rgb(226 233 240);
}

.chat-input-group {
	display: flex;
	flex: 1;
	align-items: flex-end;
	/* 	border: 1px solid #e0e0e0; */
	/* 	background: #f5f5f5; */
	/* 	border-radius: 12px; */
}

.chat-input {
	flex: 1;
	padding: 8px 16px;
	border: none;
	outline: none;
	background: none;
	/* Font size below 16px causes iOS to zoom in, pushing the send button off screen */
	font-size: 16px;
	min-height: 40px;
	max-height: 160px;
	line-height: 24px;
	resize: none;
	/* Prevent manual resizing by user */
	overflow: auto;
	transition: all 0.2s ease;
}

/* .chat-input:focus {
	border-color: #2ebbee;
} */

.send-button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	/* 	background: linear-gradient(135deg, #2ebbee 0%, #0e75b4 100%); */
	/* 	color: white; */
	/* 	color: linear-gradient(135deg, #2ebbee 0%, #0e75b4 100%); */
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	margin: 4px;
	background-color: #00000020;
	transition: all 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	/* Prevent semi-transparent blue box on tap */
}

.send-button.active {
	background-color: #2ebbee;
	cursor: pointer;
}

.send-button svg {
	width: 16px;
	height: 16px;
	fill: #fff;
}

/* Typing indicator animation */
.typing-indicator {
	display: flex;
	gap: 4px;
	padding: 12px 16px;
}

.typing-indicator span {
	width: 8px;
	height: 8px;
	background: #999;
	border-radius: 50%;
	animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
	animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes typing {

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

	30% {
		transform: translateY(-10px);
	}
}

/* Menu cards container */
.menu-cards-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	width: 100%;
}

.menu-cards-container {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	padding: 5px 44px;
	flex: 1;
	scrollbar-width: none;
}

.menu-cards-container::-webkit-scrollbar {
	display: none;
}

.card {
	min-width: 200px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	padding: 15px;
	flex-shrink: 0;
}

.card .title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-weight: 600;
	color: #333;
	font-size: 15px;
}

.card-title-img {
	font-size: 20px;
}

.card-button {
	margin: 8px 0;
	padding: 8px 12px;
	background: #f0f0f0;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.card-button:hover {
	background: #e0e0e0;
}

.card-button a {
	text-decoration: none;
	color: #333;
	font-size: 14px;
}

.scroll-button {
	position: absolute;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #ddd;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.scroll-button.right-button {
	right: 0;
}

.scroll-button.visible {
	display: flex;
}

.scroll-button:hover {
	background: white;
}

.scroll-button svg {
	width: 16px;
	height: 16px;
	fill: #333;
}

/* AI reply visual effect */
.ai-fx,
.ai-fx:before,
.ai-fx:after,
.ai-fx span,
.ai-fx span:before,
.ai-fx span:after {
	position: absolute;
	inset: 0;
	border-radius: 20px;
	border-radius: var(--border-radius);
	pointer-events: none;
}

.chat-window.expanded .ai-fx,
.chat-window.expanded .ai-fx:before,
.chat-window.expanded .ai-fx:after {
	border-radius: unset;
}

@media (max-width: 480px) {
	.ai-fx,
	.ai-fx:before,
	.ai-fx:after {
		border-radius: unset;
	}
}

/* Surrounding glow effect */
.ai-fx:before,
.ai-fx:after {
	content: "";
	/* Solid thickness - ultimately controlled by animation */
	--mask-border-1: 5px;
	/* Total thickness - ultimately controlled by animation */
	--mask-border-2: 200px;
	mask-image:
		linear-gradient(to bottom,
			black var(--mask-border-1),
			transparent var(--mask-border-2),
			transparent 100%),
		linear-gradient(to top,
			black var(--mask-border-1),
			transparent var(--mask-border-2),
			transparent 100%),
		linear-gradient(to right,
			black var(--mask-border-1),
			transparent var(--mask-border-2),
			transparent 100%),
		linear-gradient(to left,
			black var(--mask-border-1),
			transparent var(--mask-border-2),
			transparent 100%);
	--fx-angle: 0deg;
	--fx-c1: hsl(0, 100%, 80%);
	--fx-c2: hsl(60, 100%, 50%);
	--fx-c3: hsl(170, 100%, 50%);
	--fx-c4: hsl(200, 100%, 50%);
	--fx-c5: hsl(260, 100%, 80%);
	--fx-color-1: transparent;
	--fx-color-2: transparent;
	--fx-color-3: transparent;
	--fx-color-4: transparent;
	--fx-color-5: transparent;
	--fx-color-6: transparent;
	/* 4-equal-section */
	/* background-image: conic-gradient(
		from var(--fx-angle, 0deg) at 50% 50%,
		var(--fx-color-1) 0%,
		var(--fx-color-2) 25%,
		var(--fx-color-3) 50%,
		var(--fx-color-4) 75%,
		var(--fx-color-5) 100%
	); */
	/* 5-equal-section */
	background-image: conic-gradient(
		from var(--fx-angle, 0deg) at 50% 50%,
		var(--fx-color-1) 0%,
		var(--fx-color-2) 20%,
		var(--fx-color-3) 40%,
		var(--fx-color-4) 60%,
		var(--fx-color-5) 80%,
		var(--fx-color-6) 100%
	);
	transition: opacity 0.3s ease;
}
/* Large glow */
.ai-fx:before {
	animation: ani-ai-fx-around-before 2.5s linear infinite alternate;
	opacity: 0.2;
}
/* Small glow */
.ai-fx:after {
	animation: ani-ai-fx-around-after 2.5s linear infinite alternate;
}
@property --fx-color-1 {
	syntax: "<color>";
	initial-value: transparent;
	inherits: false;
}
@property --fx-color-2 {
	syntax: "<color>";
	initial-value: transparent;
	inherits: false;
}
@property --fx-color-3 {
	syntax: "<color>";
	initial-value: transparent;
	inherits: false;
}
@property --fx-color-4 {
	syntax: "<color>";
	initial-value: transparent;
	inherits: false;
}
@property --fx-color-5 {
	syntax: "<color>";
	initial-value: transparent;
	inherits: false;
}
@property --fx-color-6 {
	syntax: "<color>";
	initial-value: transparent;
	inherits: false;
}
@property --mask-border-1 {
	syntax: "<length>";
	initial-value: 0px;
	inherits: false;
}
@property --mask-border-2 {
	syntax: "<length>";
	initial-value: 0px;
	inherits: false;
}
@keyframes ani-ai-fx-around-before {
	0% {
		--mask-border-1: 0px;
		--mask-border-2: 50px;
		--fx-color-1: var(--fx-c2);
		--fx-color-2: var(--fx-c3);
		--fx-color-3: var(--fx-c4);
		--fx-color-4: var(--fx-c5);
		--fx-color-5: var(--fx-c1);
		--fx-color-6: var(--fx-c2);
	}
	25% {
		--mask-border-1: 0px;
		--mask-border-2: 100px;
		--fx-color-1: var(--fx-c1);
		--fx-color-2: var(--fx-c2);
		--fx-color-3: var(--fx-c3);
		--fx-color-4: var(--fx-c4);
		--fx-color-5: var(--fx-c5);
		--fx-color-6: var(--fx-c1);
	}
	50% {
		--mask-border-1: 0px;
		--mask-border-2: 90px;
		--fx-color-1: var(--fx-c5);
		--fx-color-2: var(--fx-c1);
		--fx-color-3: var(--fx-c2);
		--fx-color-4: var(--fx-c3);
		--fx-color-5: var(--fx-c4);
		--fx-color-6: var(--fx-c5);
	}
	75% {
		--mask-border-1: 0px;
		--mask-border-2: 110px;
		--fx-color-1: var(--fx-c4);
		--fx-color-2: var(--fx-c5);
		--fx-color-3: var(--fx-c1);
		--fx-color-4: var(--fx-c2);
		--fx-color-5: var(--fx-c3);
		--fx-color-6: var(--fx-c4);
	}
	100% {
		--mask-border-1: 0px;
		--mask-border-2: 50px;
		--fx-color-1: var(--fx-c3);
		--fx-color-2: var(--fx-c4);
		--fx-color-3: var(--fx-c5);
		--fx-color-4: var(--fx-c1);
		--fx-color-5: var(--fx-c2);
		--fx-color-6: var(--fx-c3);
	}
}
@keyframes ani-ai-fx-around-after {
	0% {
		--mask-border-1: 5px;
		--mask-border-2: 14px;
		--fx-color-1: var(--fx-c2);
		--fx-color-2: var(--fx-c3);
		--fx-color-3: var(--fx-c4);
		--fx-color-4: var(--fx-c5);
		--fx-color-5: var(--fx-c1);
		--fx-color-6: var(--fx-c2);
	}
	10% {
		--mask-border-1: 4px;
		--mask-border-2: 23px;
	}
	25% {
		--mask-border-1: 6px;
		--mask-border-2: 21px;
		--fx-color-1: var(--fx-c1);
		--fx-color-2: var(--fx-c2);
		--fx-color-3: var(--fx-c3);
		--fx-color-4: var(--fx-c4);
		--fx-color-5: var(--fx-c5);
		--fx-color-6: var(--fx-c1);
	}
	50% {
		--mask-border-1: 3px;
		--mask-border-2: 16px;
		--fx-color-1: var(--fx-c5);
		--fx-color-2: var(--fx-c1);
		--fx-color-3: var(--fx-c2);
		--fx-color-4: var(--fx-c3);
		--fx-color-5: var(--fx-c4);
		--fx-color-6: var(--fx-c5);
	}
	75% {
		--mask-border-1: 8px;
		--mask-border-2: 21px;
		--fx-color-1: var(--fx-c4);
		--fx-color-2: var(--fx-c5);
		--fx-color-3: var(--fx-c1);
		--fx-color-4: var(--fx-c2);
		--fx-color-5: var(--fx-c3);
		--fx-color-6: var(--fx-c4);
	}
	90% {
		--mask-border-1: 4px;
		--mask-border-2: 13px;
	}
	100% {
		--mask-border-1: 3px;
		--mask-border-2: 19px;
		--fx-color-1: var(--fx-c3);
		--fx-color-2: var(--fx-c4);
		--fx-color-3: var(--fx-c5);
		--fx-color-4: var(--fx-c1);
		--fx-color-5: var(--fx-c2);
		--fx-color-6: var(--fx-c3);
	}
}


/* Rotating glow */
.ai-fx span:before,
.ai-fx span:after {
	content: "";
	z-index: 1;
	/* Conic gradient: transparent at edges, colored in the middle */
	background-image: conic-gradient(from var(--fx-angle) at 50% 50%,
			transparent 20%,
			var(--fx-color) 50%,
			transparent 80%);
	--mask-border: 100px;
	mask-image: 
		linear-gradient(to top,
			black 0%,
			rgba(0, 0, 0, 0.5) calc(var(--mask-border) - 70px),
			transparent var(--mask-border)
		),
		linear-gradient(to right,
			black 0%,
			rgba(0, 0, 0, 0.5) calc(var(--mask-border) - 70px),
			transparent var(--mask-border)
		),
		linear-gradient(to bottom,
			black 0%,
			rgba(0, 0, 0, 0.5) calc(var(--mask-border) - 70px),
			transparent var(--mask-border)
		),
		linear-gradient(to left,
			black 0%,
			rgba(0, 0, 0, 0.5) calc(var(--mask-border) - 70px),
			transparent var(--mask-border)
		);
	/* mix-blend-mode: color-dodge; */
	/* mix-blend-mode: lighten; */
	/* mix-blend-mode: soft-light; */
	mix-blend-mode: plus-lighter;
	opacity: 0.2;
}
.ai-fx span:before {
	--mask-border: 100px;
	--fx-color: #000;
	animation: ani-ai-fx-rotate-before 3s linear infinite;
}
.ai-fx span:after {
	--mask-border: 100px;
	--fx-color: #000;
	animation: ani-ai-fx-rotate-after 2s linear infinite;
}
@property --fx-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}
@property --fx-color {
	syntax: "<color>";
	initial-value: transparent;
	inherits: false;
}
@property --mask-border {
	syntax: "<length>";
	initial-value: 0px;
	inherits: false;
}
@keyframes ani-ai-fx-rotate-before {
	0% {
		--fx-angle: 0deg;
		--fx-color: #ff0;
	}
	50% {
		--fx-color: #0ff;
	}
	100% {
		--fx-angle: 360deg;
		--fx-color: #ff0;
	}
}
@keyframes ani-ai-fx-rotate-after {
	0% {
		--fx-angle: 0deg;
		--fx-color: #ff0;
	}
	50% {
		--fx-color: #0ff;
	}
	100% {
		--fx-angle: -360deg;
		--fx-color: #ff0;
	}
}

/* Debug indicator */
#chatHeightIndicator {
	position: fixed;
	left: 16px;
	top: 50%;
	z-index: 2000;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 6px 10px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	pointer-events: none;
	backdrop-filter: blur(4px);
	-webkit-font-smoothing: antialiased;
}