.synth-container{flex-grow:1;justify-content:center;align-items:center;display:flex}.synth-container+p{margin-top:20px}.synth h1,.synth h2,.synth h3,.synth h4,.synth h5,.synth h6,.synth label,.synth p{font-family:var(--font-synth);text-transform:lowercase;font-size:12px}.synth{--accent-color:#d9a443;--input-background-color:#f7f3a2;--outline-color:#000;--disabled-color:#525252;--synth-background-color:#f4f4d5;background-color:var(--synth-background-color);padding-bottom:20px}.synth .title{background-color:var(--accent-color);border-radius:29px 29px 0 0;padding:16px 20px}.synth .title .synth-title{font-size:16px}.synth .synth-padding{padding:20px}.synth .synth-modules-v1{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}@media (max-width:767px){.synth .synth-modules-v1{grid-template-areas:"oscillator1 oscillator2""oscillator3 volume""keyboard keyboard"}}@media (min-width:768px) and (max-width:1023px){.synth .synth-modules-v1{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"oscillator1 oscillator2 oscillator3 volume""keyboard keyboard keyboard keyboard"}}@media (min-width:1024px) and (max-width:1439px){.synth .synth-modules-v1{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"oscillator1 oscillator2 oscillator3 volume""keyboard keyboard keyboard keyboard"}}@media (min-width:1440px){.synth .synth-modules-v1{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"oscillator1 oscillator2 oscillator3 volume""keyboard keyboard keyboard keyboard"}}.synth{border:2px solid var(--accent-color);border-radius:32px;height:100%}.synth .module{border:1px solid var(--accent-color);border-radius:12px}.synth .module .header{background-color:var(--accent-color);border-radius:10px 10px 0 0;align-items:center;min-height:26px;padding:4px;display:flex}.synth .module .header h2{margin-bottom:0}.synth .module .header input:where([type=checkbox][role=switch]){appearance:none;font-size:inherit;box-sizing:content-box;vertical-align:text-bottom;width:2em;height:1em;color:inherit;border:1px solid;border-radius:1em;margin-left:auto;position:relative}.synth .module .header input:where([type=checkbox][role=switch]):checked{color:var(--disabled-color)}.synth .module .header input:where([type=checkbox][role=switch]):not(:checked):before{left:1em}.synth .module .header input:where([type=checkbox][role=switch]):before{content:"";box-sizing:border-box;background:currentColor;border:1px solid;border-radius:50%;width:.7em;height:.7em;margin:0 .15em;position:absolute;top:50%;left:0;transform:translateY(-50%)}.synth .module .header input:where([type=checkbox][role=switch]):focus{outline:2px solid var(--outline-color);border-color:var(--outline-color);box-shadow:0 0 0 2px var(--outline-color);border-radius:4px}.synth .module .header label:has(+input[type=checkbox]){clip:rect(0 0 0 0);clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.synth .module .controls{flex-direction:column;gap:12px;padding:8px;display:flex}.synth label{padding-bottom:4px;display:flex}.synth label .right{margin-left:auto}.synth .range-container input[type=range]{appearance:none;background:var(--input-background-color);border:1px solid #000;border-radius:4px;width:100%;height:16px;margin:0}.synth .range-container input[type=range]::-webkit-slider-thumb{appearance:none;opacity:1;background:#000;width:6px;height:16px}.synth .range-container input[type=range]:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-color);outline:none}.synth .select-container select{background-color:var(--input-background-color);border:0 solid #0000;border:var(--outline-color)solid 1px;cursor:pointer;width:100%;color:var(--outline-color);font-size:12px;line-height:1.5;font-family:var(--font-synth);text-transform:lowercase;appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000000' d='M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z'%3E%3C/path%3E%3C/svg%3E");background-position:right .7em top 50%;background-repeat:no-repeat,repeat;background-size:1em;border-radius:4px;padding:4px}.synth .select-container select:hover{border-color:var(--accent-color)}.synth .select-container select:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-color);outline:none}.synth .oscillator-1{grid-area:oscillator1}.synth .oscillator-2{grid-area:oscillator2}.synth .oscillator-3{grid-area:oscillator3}.synth .volume{grid-area:volume}.synth .keyboard{grid-area:keyboard;justify-content:center;display:flex}@media screen and (min-width:768px){.synth .keyboard div#keyboard{width:500px!important}}.synth .keyboard div#keyboard ul{display:initial}