.wk-keyboard {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 8px;
	width: min(100%, 720px);
	margin: 0 auto;
	padding: 14px;
	border-radius: 8px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
		rgba(2, 6, 23, 0.52);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 20px 48px rgba(2, 6, 23, 0.28);
}

.wk-keyboard-row {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.wk-key {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 42px;
	border-radius: 8px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(226, 232, 240, 0.92)),
		var(--wk-key-bg);
	color: #111827;
	box-shadow: 0 4px 0 rgba(15, 23, 42, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.86);
	font-weight: 900;
	text-transform: uppercase;
	transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.wk-key--home::after {
	content: "";
	position: absolute;
	bottom: 6px;
	width: 18px;
	height: 3px;
	border-radius: 999px;
	background: var(--wk-key-home);
}

.wk-key--active {
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--wk-key-active), #fff 28%), var(--wk-key-active));
	box-shadow: 0 0 28px color-mix(in srgb, var(--wk-key-active), transparent 22%), 0 4px 0 rgba(15, 23, 42, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.58);
	animation: wk-key-pulse 1.2s ease-in-out infinite;
}

.wk-key--space {
	width: min(360px, 72%);
	text-transform: none;
}

@media (max-width: 620px) {
	.wk-keyboard {
		gap: 6px;
		padding: 10px;
	}

	.wk-keyboard-row {
		gap: 5px;
	}

	.wk-key {
		width: 28px;
		height: 34px;
		font-size: 12px;
	}
}