@charset "utf-8";
@import url("/css/keyboard/hands.css");
@import url("/css/keyboard/win/init.css");
@import url("/css/keyboard/mac/init.css");

/*---------------------------------*
 * c-keyboard
 *---------------------------------*/
.c-keyboard {
	z-index:10;
	width:652px;
	height:225px;
	background-image:url("/img/keyboard/keyboard_bg.webp");
	background-repeat: no-repeat;
	background-size:contain;
	position:relative;
	min-width:652px;
}
.c-keyboard[data-kbos="win"][data-kblayout="jis"] .c-keyboard-btn {
	background-image:url("/img/keyboard/win/jis/jis.webp");
}
.c-keyboard[data-kbos="win"][data-kblayout="us"] .c-keyboard-btn {
	background-image:url("/img/keyboard/win/us/us.webp");
}
.c-keyboard[data-kbos="win"][data-kblayout="uk"] .c-keyboard-btn {
	background-image:url("/img/keyboard/win/uk/uk.webp");
}
.c-keyboard[data-kbos="mac"][data-kblayout="jis"] .c-keyboard-btn {
	background-image:url("/img/keyboard/mac/jis/jis.webp");
}
.c-keyboard[data-kbos="mac"][data-kblayout="us"] .c-keyboard-btn {
	background-image:url("/img/keyboard/mac/us/us.webp");
}
.c-keyboard[data-kbos="mac"][data-kblayout="uk"] .c-keyboard-btn {
	background-image:url("/img/keyboard/mac/uk/uk.webp");
}
.c-keyboard-btn {
	display: block;
	width: 40.8px;
	height: 40.8px;
	margin-left:2px;
}
/*---------------------------------*
 * kb-loader
 *---------------------------------*/
.kb-loader_wrapper {
	width:100%;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.kb-loader {
	text-align:center;
	width: 50px;
	padding: 8px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #00b5c9;
	--kb-loader: 
		conic-gradient(#0000 10%,#000),
		linear-gradient(#000 0 0) content-box;
	-webkit-mask: var(--kb-loader);
			mask: var(--kb-loader);
	-webkit-mask-composite: source-out;
			mask-composite: subtract;
	animation: kb-loader 0.4s infinite linear;
}
@keyframes kb-loader {
	to{
		transform: rotate(1turn)
	}
}