.gk-mascot {
	--gk-size: 150px;
	--gk-edge: min(var(--gk-right, 14px), 28vw);
	--gk-rise: min(var(--gk-bottom, 112px), 48vh);
	--gk-art-width: min(var(--gk-size), 37vw, max(42px, (100vh - var(--gk-rise) - 94px) * .85));
	position: fixed;
	z-index: 10;
	right: 0;
	bottom: max(var(--gk-rise), env(safe-area-inset-bottom, 0px));
	padding: 88px max(var(--gk-edge), env(safe-area-inset-right, 0px)) 0 0;
	box-sizing: content-box;
	overflow: hidden;
	pointer-events: none;
	direction: ltr;
}

.gk-mascot.gk-size-small {
	--gk-size: 118px;
}

.gk-mascot.gk-size-large {
	--gk-size: 182px;
}

.gk-stage {
	position: relative;
	width: var(--gk-art-width);
	opacity: 0;
	transform: translateX(calc(var(--gk-size) + max(var(--gk-edge), env(safe-area-inset-right, 0px)) + 20px));
	transition: transform 340ms cubic-bezier(.6, .03, .4, 1), opacity 230ms ease;
}

.gk-stage[data-gk-state="shown"],
.gk-stage[data-gk-state="victory"],
.gk-stage[data-gk-state="farewell"] {
	opacity: 1;
	transform: translateX(0);
}

.gk-mascot[hidden],
.gk-bubble[hidden] {
	display: none !important;
}

.gk-art > svg,
.gk-art > img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	max-width: 100%;
}

.gk-stage[data-gk-state="shown"][data-gk-mood="0"] .gk-tailor {
	animation: gk-peek 460ms ease-out both;
}

/* The curtain scales around its roller. The cord and grip share the same travel. */
.gk-curtain-fabric {
	transform-origin: 0 47px;
	transform: scaleY(calc(.24 + var(--gk-pull, 0) * .76));
}

.gk-curtain-hem {
	transform: translateY(calc((var(--gk-pull, 0) - 1) * 54px));
}

.gk-cord {
	transform-origin: 178px 49px;
	transform: scaleY(calc(1 + var(--gk-pull, 0) * .47));
}

.gk-cord-handle,
.gk-grip {
	transform: translateY(calc(var(--gk-pull, 0) * 29px));
}

.gk-pull-sleeve {
	transform-origin: 129px 133px;
	transform: skewY(calc(var(--gk-pull, 0) * 36deg));
}

.gk-curtain-fabric,
.gk-curtain-hem,
.gk-cord,
.gk-cord-handle,
.gk-grip,
.gk-pull-sleeve {
	transition: transform 95ms ease-out;
}

.gk-hit {
	pointer-events: none;
}

.gk-stage[data-gk-state="shown"] .gk-hit {
	pointer-events: all;
	cursor: pointer;
}

.gk-bubble {
	position: absolute;
	inset: auto 0 calc(100% + 6px);
	box-sizing: border-box;
	max-height: 78px;
	padding: 7px 6px;
	border: 1px solid #68445a;
	border-radius: 12px;
	background: #fff6e9;
	color: #35223a;
	box-shadow: 0 2px 5px #35223a29;
	font: 600 12px/1.25 system-ui, sans-serif;
	text-align: center;
	overflow: hidden;
	overflow-wrap: anywhere;
	user-select: none;
}

.gk-mouth:not(.gk-mouth-smile),
.gk-tears,
.gk-sparkles {
	opacity: 0;
}

.gk-brow-left,
.gk-brow-right,
.gk-arm-wave,
.gk-arm-pull,
.gk-eyes,
.gk-head {
	transition: transform 150ms ease;
}

.gk-brow-left {
	transform-origin: 59px 64px;
}

.gk-brow-right {
	transform-origin: 104px 62px;
}

.gk-arm-wave {
	transform-origin: 52px 139px;
}

.gk-arm-pull {
	transform-origin: 119px 134px;
}

.gk-eyes {
	transform-origin: 86px 80px;
}

.gk-head {
	transform-origin: 85px 112px;
}

.gk-stage:not([data-gk-mood="0"]) .gk-mouth-smile {
	opacity: 0;
}

.gk-stage[data-gk-mood="1"] .gk-mouth-grumble,
.gk-stage[data-gk-mood="2"] .gk-mouth-frown,
.gk-stage[data-gk-mood="3"] .gk-mouth-cry,
.gk-stage[data-gk-mood="3"] .gk-tears,
.gk-stage[data-gk-state="victory"] .gk-sparkles {
	opacity: 1;
}

.gk-stage[data-gk-mood="1"] .gk-brow-left,
.gk-stage[data-gk-mood="2"] .gk-brow-left {
	transform: translateY(2px) rotate(32deg);
}

.gk-stage[data-gk-mood="2"] .gk-brow-right {
	transform: translateY(4px) rotate(-30deg);
}

.gk-stage[data-gk-mood="2"] .gk-eyes {
	transform: scaleY(.72);
}

.gk-stage[data-gk-mood="3"] .gk-brow-left {
	transform: rotate(-24deg);
}

.gk-stage[data-gk-mood="3"] .gk-brow-right {
	transform: rotate(25deg);
}

.gk-stage[data-gk-mood="3"] .gk-eyes {
	transform: scaleY(.64);
}

.gk-stage[data-gk-mood="3"] .gk-shoulders {
	animation: gk-sob 230ms ease-in-out 12 alternate;
}

.gk-stage[data-gk-mood="3"] .gk-tear-left,
.gk-stage[data-gk-mood="3"] .gk-tear-right {
	animation: gk-tear 620ms ease-in 5 both;
}

.gk-stage[data-gk-mood="3"] .gk-tear-right {
	animation-delay: 180ms;
}

.gk-stage[data-gk-state="farewell"] .gk-arm-wave {
	transform: rotate(122deg);
	animation: gk-wave 320ms ease-in-out both;
}

.gk-stage[data-gk-state="victory"] .gk-arm-wave {
	transform: rotate(150deg);
}

.gk-stage[data-gk-state="victory"] .gk-arm-pull {
	transform: rotate(-54deg);
}

.gk-stage[data-gk-state="victory"] .gk-tailor {
	animation: gk-hop 640ms ease both;
}

@keyframes gk-peek {
	0% { transform: translateX(9px) rotate(3deg); }
	65% { transform: translateX(-3px) rotate(-2deg); }
	100% { transform: none; }
}

@keyframes gk-wave {
	0% { transform: rotate(69deg); }
	35% { transform: rotate(135deg); }
	65% { transform: rotate(106deg); }
	100% { transform: rotate(130deg); }
}

@keyframes gk-sob {
	from { transform: translate(-1px, 1px); }
	to { transform: translate(1px, -1px); }
}

@keyframes gk-tear {
	0% { opacity: 0; transform: translateY(0); }
	24% { opacity: 1; }
	100% { opacity: 0; transform: translateY(25px); }
}

@keyframes gk-hop {
	0%, 100% { transform: translateY(0); }
	45% { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
	.gk-mascot,
	.gk-mascot *,
	.gk-mascot *::before,
	.gk-mascot *::after {
		transition: none !important;
		animation: none !important;
	}
}