/* inkscape-compatibility, explicitly apply font settings to .label */
svg, .label {
	font-family: "IBM Plex Arabic";
	font-size: 90px;
	font-weight: 400;
}
.unused {
	opacity: 0.6;
}
.label .layer-1 {
}
.modifier .label .layer-1 {
	font-size: 80%;
}
.label .layer-2, .label .layer-3, .label .layer-4 {
	font-size: 80%;
	font-weight: 100;
}
.label .controlchar {
	font-size: 40%;
	font-family: sans-serif;
}
.cap rect {
	fill: #eee8d5;
}
.highlight circle {
	fill: #dc322f; /* red */
	filter: blur(30px);
}
.cap-shadow rect.finger-little {
	fill: #dc322f; /* red */
}
.cap-shadow rect.finger-ring {
	fill: #268bd2; /* blue */
}
.cap-shadow rect.finger-middle {
	fill: #d33682; /* magenta */
}
.cap-shadow rect.finger-index {
	fill: #6c71c4; /* violet */
}
.cap-shadow rect.finger-thumb {
	fill: #2aa198; /* cyan */
}
.label {
	fill: #657b83;
}
.label.shadow {
	fill: #fdf6e3;
}
.controllabel {
	stroke: #657b83;
	fill: none;
}
.controllabel.shadow {
	stroke: #fdf6e3;
	fill: none;
}
.marker line {
	stroke: #fdf6e3;
}
.marker line.shadow {
	stroke: #93a1a1;
}