.settingslayout { display: grid; grid-template-columns: 2fr 3fr;
    width: 100%; gap: 1em; }
.settingslayout .l { font-size: 1.25em; text-align: right; margin: .75em .3125em; }
.settingslayout .r { display: flex; align-items: flex-start; }
.settingslayout .r.shortcuts { display: block; }
.settingslayout input[type='radio'] { display: none; }
.settingslayout input[type='radio']+label { background: linear-gradient(#bec0c5, #8f8faa);
    color:#fff; font-family: inherit; font-size: 1.5em; text-align: center;
    min-width: 6em; display: inline-block; 
    border-radius: .4em; padding: .25em; margin: .25em; cursor: pointer; }
.settingslayout input[type='radio']:checked+label { background: #383b55; color: #999999; }
.settingslayout input[type='radio'][name='audioLevel']+label { min-width: 3em; }

.settingslayout div:has(>input[type='checkbox']) { display: flex; align-items: center; }
.settingslayout input[type='checkbox'] {background-color: #EBEBD9;
    width: 2.5em; height: 2.5em; appearance: none; position: relative;
	border: .125em #c2c2c2 solid; border-radius: .25em; }
.settingslayout input[type='checkbox']:checked::before { content: '';
	width: 0.4em; height: 0.8em; border: solid #339900; border-width: 0 .2em .2em 0;
	display: block; position: absolute; z-index: 1; 
	right: calc(50% - .4em); top: calc(50% - .6em);
	transform: rotate(45deg); transform-origin: center center;
}
.settingslayout input[type='checkbox']+label { font-size: 1.5em; }