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

html,
body {
	height: 100%;
	overflow: hidden;
}

body {
	font-family: "Libre Franklin", sans-serif;
	background: #fff;
	padding: 32px;
	color: #000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

main {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.rainbow {
	position: absolute;
	inset: -25%;
	overflow: hidden;
	background: linear-gradient(145deg, #ffe8f8 0%, #f0e4ff 38%, #e4f6ff 72%, #fff0fa 100%);
	animation: rainbow-shift 32s ease-in-out infinite, unicorn-shimmer 18s ease-in-out infinite alternate;
	z-index: 0;
}

.blob {
	position: absolute;
	filter: blur(52px) saturate(2.25);
	opacity: 1;
	will-change: transform, border-radius;
}

.blob-1 {
	width: 62%;
	height: 38%;
	top: -8%;
	left: -8%;
	border-radius: 72% 28% 58% 42% / 38% 64% 36% 62%;
	background: radial-gradient(ellipse 85% 60% at 40% 45%, #ff5edb 0%, #ff9ae8 38%, rgba(255, 94, 219, 0.4) 58%, transparent 68%);
	animation: drift-1 24s ease-in-out infinite;
}

.blob-2 {
	width: 48%;
	height: 58%;
	top: 18%;
	right: -12%;
	border-radius: 34% 66% 72% 28% / 62% 34% 66% 38%;
	background: radial-gradient(ellipse 70% 90% at 55% 35%, #c77dff 0%, #e879f9 40%, rgba(199, 125, 255, 0.4) 58%, transparent 68%);
	animation: drift-2 26s ease-in-out infinite;
}

.blob-3 {
	width: 58%;
	height: 44%;
	bottom: -12%;
	left: 10%;
	border-radius: 58% 42% 34% 66% / 48% 58% 42% 52%;
	background: radial-gradient(ellipse 90% 55% at 30% 60%, #5efcff 0%, #a5f3fc 42%, rgba(94, 252, 255, 0.38) 58%, transparent 68%);
	animation: drift-3 28s ease-in-out infinite;
}

.blob-4 {
	width: 52%;
	height: 36%;
	top: 32%;
	left: 26%;
	border-radius: 44% 56% 68% 32% / 72% 28% 52% 48%;
	background: radial-gradient(ellipse 60% 80% at 65% 50%, #9d8cff 0%, #c4b5fd 40%, rgba(157, 140, 255, 0.38) 58%, transparent 68%);
	animation: drift-4 30s ease-in-out infinite;
}

.blob-5 {
	width: 46%;
	height: 54%;
	bottom: 2%;
	right: 6%;
	border-radius: 66% 34% 48% 52% / 36% 68% 32% 64%;
	background: radial-gradient(ellipse 75% 70% at 45% 55%, #ff85e3 0%, #f0abfc 38%, rgba(255, 133, 227, 0.42) 56%, transparent 68%);
	animation: drift-5 32s ease-in-out infinite;
}

@keyframes rainbow-shift {
	0%, 100% { transform: scale(1) rotate(0deg); }
	50% { transform: scale(1.08) rotate(3deg); }
}

@keyframes unicorn-shimmer {
	0% { filter: hue-rotate(0deg) brightness(1); }
	100% { filter: hue-rotate(18deg) brightness(1.06); }
}

@keyframes drift-1 {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg) skew(0deg, 0deg) scale(1);
		border-radius: 72% 28% 58% 42% / 38% 64% 36% 62%;
	}
	33% {
		transform: translate(14%, 10%) rotate(18deg) skew(4deg, -3deg) scale(1.1);
		border-radius: 48% 52% 68% 32% / 58% 42% 64% 36%;
	}
	66% {
		transform: translate(-8%, 16%) rotate(-12deg) skew(-3deg, 5deg) scale(0.92);
		border-radius: 62% 38% 44% 56% / 32% 68% 48% 52%;
	}
}

@keyframes drift-2 {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg) skew(0deg, 0deg) scale(1);
		border-radius: 34% 66% 72% 28% / 62% 34% 66% 38%;
	}
	33% {
		transform: translate(-16%, 12%) rotate(-22deg) skew(-5deg, 2deg) scale(1.12);
		border-radius: 58% 42% 36% 64% / 44% 56% 38% 62%;
	}
	66% {
		transform: translate(10%, -10%) rotate(14deg) skew(3deg, -4deg) scale(0.9);
		border-radius: 42% 58% 64% 36% / 68% 32% 54% 46%;
	}
}

@keyframes drift-3 {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg) skew(0deg, 0deg) scale(1);
		border-radius: 58% 42% 34% 66% / 48% 58% 42% 52%;
	}
	33% {
		transform: translate(12%, -14%) rotate(16deg) skew(2deg, 6deg) scale(0.94);
		border-radius: 38% 62% 56% 44% / 62% 38% 58% 42%;
	}
	66% {
		transform: translate(-12%, 8%) rotate(-18deg) skew(-4deg, -2deg) scale(1.08);
		border-radius: 64% 36% 48% 52% / 34% 66% 44% 56%;
	}
}

@keyframes drift-4 {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg) skew(0deg, 0deg) scale(1);
		border-radius: 44% 56% 68% 32% / 72% 28% 52% 48%;
	}
	33% {
		transform: translate(-10%, -12%) rotate(-15deg) skew(5deg, 3deg) scale(1.06);
		border-radius: 56% 44% 32% 68% / 46% 54% 68% 32%;
	}
	66% {
		transform: translate(16%, 10%) rotate(20deg) skew(-2deg, -5deg) scale(0.96);
		border-radius: 32% 68% 54% 46% / 58% 42% 36% 64%;
	}
}

@keyframes drift-5 {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg) skew(0deg, 0deg) scale(1);
		border-radius: 66% 34% 48% 52% / 36% 68% 32% 64%;
	}
	33% {
		transform: translate(-14%, 8%) rotate(24deg) skew(-3deg, 4deg) scale(1.1);
		border-radius: 42% 58% 62% 38% / 52% 48% 66% 34%;
	}
	66% {
		transform: translate(8%, -16%) rotate(-16deg) skew(4deg, -3deg) scale(0.88);
		border-radius: 54% 46% 38% 62% / 64% 36% 58% 42%;
	}
}

.unicorn-wrap {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 100vw;
	transform: translate(-50%, calc(-50% - 32px));
	z-index: 1;
	pointer-events: auto;
	overflow: visible;
	touch-action: none;
}

.unicorn {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	border: none;
	overflow: visible;
	pointer-events: auto;
	cursor: crosshair;
	touch-action: none;
	opacity: 0.95;
	filter: drop-shadow(0 0 32px rgba(255, 255, 255, 0.4));
}

.unicorn path,
.unicorn .st0,
.unicorn #Vector {
	fill: #fff;
	stroke: none;
}

.quote {
	position: absolute;
	left: 17px;
	bottom: 24px;
	width: 50%;
	border: none;
	display: flex;
	flex-direction: column;
	z-index: 2;
}

.quote-body {
	display: flex;
	align-items: flex-start;
	width: 100%;
}

.quote-mark {
	flex-shrink: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	white-space: nowrap;
}

.quote-text {
	flex: 1;
	min-width: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	word-break: break-word;
	text-wrap: pretty;
}

.quote-by {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	padding-left: 7px;
}

@media (max-width: 768px) {
	body {
		padding: 16px;
	}

	.quote {
		top: auto;
		bottom: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rainbow,
	.blob {
		animation: none;
	}

	.rainbow {
		filter: none;
	}
}