@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Math&display=swap");

.no-ai {
	--_grad-start: var(--grad-start, #ccc);
	--_grad-end: var(--grad-end, #666);
	--_text-shad: var(--text-shad, #333);
	--_text: var(--text, #fff);

	color-scheme: only light;

	position: relative;
	background-image: linear-gradient(-10deg, var(--_grad-start), var(--_grad-end));
	font-size: 12px;
	display: inline-block;
	padding: 4px 8px;
	color: var(--_text);
	text-shadow: 0 1px var(--_text-shad);
	border-radius: 4px;
	text-transform: uppercase;
	font-family:
		system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
		"Helvetica Neue", sans-serif;
	overflow: hidden;
}
.no-ai::after {
	content: "\1f6c7  #noai";
	white-space: nowrap;
}
.no-ai::before {
	content: "";
	background-image: linear-gradient(-10deg, transparent, #fff8);
	width: calc(100% - 4px);
	height: 11px;
	display: block;
	position: absolute;
	top: 8%;
	left: 2px;
	border-radius: 2px 2px 0 0;
}
.no-ai:is([title], [aria-label]):hover::before {
	rotate: -6deg;
	width: 104%;
	left: -2px;
	background-color: #fffa;
	animation: noai-sheen 400ms ease-out forwards;
}

@keyframes noai-sheen {
	0% {
		translate: 0 33px;
	}
	100% {
		translate: 0 -21px;
	}
}

.no-ai.human-created {
	--grad-start: #c00;
	--grad-end: #600;
	--text-shad: #300;
	--text: #f99;
}
.no-ai.human-created::after {
	content: "\1f7c9  created by human \1f7c9";
}

.no-ai.human-coded {
	--grad-start: #0c0;
	--grad-end: #060;
	--text-shad: #030;
	--text: #9f9;
}
.no-ai.human-coded::after {
	content: "\1f7c9  coded by human \1f7c9";
}

.no-ai.human-written {
	--grad-start: #db0;
	--grad-end: #750;
	--text-shad: #430;
	--text: #fe9;
}
.no-ai.human-written::after {
	content: "\1f7c9  written by human \1f7c9";
}

.no-ai.human-made {
	--grad-start: #0bd;
	--grad-end: #057;
	--text-shad: #034;
	--text: #9ef;
}
.no-ai.human-made::after {
	content: "\1f7c9  made by human \1f7c9";
}

.no-ai.human-crafted {
	--grad-start: #b0d;
	--grad-end: #507;
	--text-shad: #304;
	--text: #e9f;
}
.no-ai.human-crafted::after {
	content: "\1f7c9  crafted by human \1f7c9";
}

@media screen and (width < 480px) {
	.no-ai {
		font-family: "Noto Sans Math", sans-serif;
		font-weight: 400;
		font-style: normal;
	}
}