*{box-sizing:border-box;margin:0}:root{font-size:calc(max(min(12px,2.5dvmin),8px))}#interaction{text-align:center;background-color:#fff;justify-content:center;align-items:center;width:100dvw;height:100dvh;font-size:4rem;display:flex;position:fixed;top:0;left:0}body{-webkit-user-select:none;user-select:none;width:100dvw;height:100dvh;font-size:1.5rem;overflow:hidden}.screen{background-color:#fff;flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100dvw;height:100dvh;padding:10rem 2rem 2rem;display:flex;position:fixed;top:0;left:0;overflow:hidden}.screen.hidden{display:none}.group{flex-direction:column;gap:1rem;display:flex}button,select{width:100%}button.icon{width:6rem;height:6rem}#toggle-options{position:fixed;top:1rem;right:1rem}#knob-group{grid-template:auto auto auto/auto auto auto;place-content:center;place-items:center;gap:1rem;margin:1rem;display:grid}#playback-group{flex-direction:row;margin-top:auto;margin-bottom:auto}#scaleselect-group{flex-direction:row}#keyselect{width:20%}.knob{--value:0;width:8rem;height:8rem;rotate:calc(360deg * (var(--value) * .8 + .1));background-color:#eee;border:1px solid #000;border-radius:100%}.knob:after{content:" ";background-color:gray;border-radius:100%;width:1.75rem;height:1.75rem;display:block;position:relative;top:calc(100% - 2rem);left:calc(50% - 1rem)}#soundselect-group,#input-group{width:100%}#input-group{height:50%}#keyboard{background-color:#000;flex-direction:column;gap:1px;width:100%;height:100%;padding:1px;display:flex}.octave{flex-direction:row;flex:1 0 0;gap:1px;width:100%;display:flex}.o1{color:#f78544}.o2{color:#b6fc34}.o3{color:#50f0c8}.o4{color:#e94de9}.key{background-color:currentColor;flex:1 0 0}@media screen and (aspect-ratio>=1){#main{flex-direction:row}#soundselect-group,#input-group{height:100%}}