.btn,.controls__btn--round,.controls__btn--square{-webkit-appearance:none;background-color:rgba(86,137,143,.75);background-image:radial-gradient(rgba(96,152,159,.5) 5%,rgba(86,137,143,0) 75%);border:none;box-shadow:inset 0 -1px 0 0 rgba(106,167,175,.75),1px 1px 0 0 #395b60,-1px 1px 0 0 #395b60,1px 2px 0 0 #436a70,-1px 2px 0 0 #436a70,0 3px 0 1px rgba(33,43,44,.35);flex:0 0 24px;height:24px;position:relative;width:24px}.btn:checked,.controls__btn--round:checked,.controls__btn--square:checked{background-image:radial-gradient(#90cdd5 20%,#59b4c0 120%);box-shadow:0 0 1px 0 #2a676f,0 1px 0 0 #2d4e53,0 0 6px 0 #59b4c0,0 0 12px 0 #3f9aa6,0 3px 12px 12px rgba(63,154,166,.18);top:2px}@media (max-width:320px){.btn:checked,.controls__btn--round:checked,.controls__btn--square:checked{top:1px}}.btn:hover,.controls__btn--round:hover,.controls__btn--square:hover{background:rgba(89,157,166,.75);background-image:radial-gradient(rgba(106,167,175,.5) 5%,rgba(80,141,149,0) 75%)}.btn:checked:hover,.controls__btn--round:checked:hover,.controls__btn--square:checked:hover{background-image:radial-gradient(#9fd8df 20%,#59b4c0 120%)}.controls__btn--round{border-radius:50%}.controls__btn--square{border-radius:2px}.piano__controls{background-color:#b6e6ec;background-image:linear-gradient(#364345,rgba(54,67,69,.9));border-radius:2px 1px 1px;box-shadow:inset 0 -3px 3px 0 rgba(43,57,59,.15),inset 0 -1px 0 0 rgba(43,57,59,.5),0 2px 0 -1px rgba(38,61,64,.5),0 4px 0 -2px rgba(38,106,115,.75),0 6px 6px 0 rgba(33,43,44,.35),0 -18px 12px -18px rgba(81,231,251,.5);color:#7ab0b8;display:flex;flex:1 1 100%;position:relative}@media (max-width:320px){.piano__controls{flex-direction:column}}.piano__controls__col{display:flex;flex:1 1 100%;flex-direction:column}.piano__controls__col:last-of-type{flex-direction:row}@media (max-width:320px){.piano__controls__col:nth-of-type(3n-1){order:1}}.controls__group,.controls__group--oscs,.controls__group--speaker{display:flex;flex-direction:column;flex:1 1 100%}@media (max-width:320px){.piano__controls__col:last-of-type .controls__group,.piano__controls__col:last-of-type .controls__group--oscs,.piano__controls__col:last-of-type .controls__group--speaker{flex-direction:row}}.controls__group--oscs{flex-direction:row}@media (max-width:320px){.controls__group--oscs{flex:1 2 50%;padding:12px 0 0}}.controls__group--speaker{flex-direction:row;flex:1 1 100%;padding-left:0;padding-right:6px}@media (max-width:750px){.controls__group--speaker{flex:0 1 50%}}@media (max-width:640px){.controls__group--speaker{display:none}}.controls__speaker{background-color:rgba(41,63,66,.25);background-image:linear-gradient(90deg,rgba(27,33,34,.25),rgba(27,33,34,.15) 5%,rgba(27,33,34,0) 20%,rgba(27,33,34,0) 80%,rgba(27,33,34,.15) 95%,rgba(27,33,34,.25)),radial-gradient(100% 5px at 50% 0,rgba(27,33,34,.25) 50%,rgba(27,33,34,0) 100%),radial-gradient(100% 5px at 50% 100%,rgba(27,33,34,.25) 50%,rgba(27,33,34,0) 100%);border-radius:5%/50%;box-shadow:inset 0 0 3px 0 rgba(128,240,255,.75),inset 0 0 1px 3px rgba(23,36,38,.5),inset 0 6px 3px 0 rgba(12,18,19,.15),inset 0 -6px 3px 0 rgba(12,18,19,.15);flex:0 1 100%;overflow:hidden;position:relative}.controls__speaker:before{background-image:linear-gradient(transparent 6px,rgba(47,58,60,.5) 0,transparent 50%,rgba(40,50,51,.05)),radial-gradient(transparent 50%,rgba(27,33,34,.25)),radial-gradient(circle at 50% 50%,transparent 25%,rgba(27,33,34,.25) 85%),radial-gradient(circle,transparent 65%,rgba(47,58,60,.5) 95%);bottom:0;content:"";height:100%;left:0;margin:auto;position:absolute;right:0;top:0;width:100%;z-index:1}.controls__speaker:after{background:radial-gradient(rgba(13,17,17,.5) 2px,rgba(47,58,60,.75) 0,rgba(40,50,51,.95) 4px,rgba(12,18,19,0) 0) -4px -4px,radial-gradient(rgba(13,17,17,.5) 2px,rgba(47,58,60,.65) 0,rgba(40,50,51,.95) 4px,rgba(12,18,19,0) 0) 4px 4px,radial-gradient(hsla(0,0%,40%,.25) 4px,hsla(0,0%,40%,0) 0) -4px -3px,radial-gradient(hsla(0,0%,40%,.25) 4px,hsla(0,0%,40%,0) 0) 4px 5px;background-size:16px 16px;border-radius:10%/50%;content:"";height:96%;left:2%;position:absolute;top:2%;width:96%}.ctrls__display{align-items:center;background-image:linear-gradient(170deg,rgba(191,223,227,.1) 41%,rgba(120,187,196,0) 0),linear-gradient(151deg,rgba(141,216,226,.1) 41%,rgba(141,216,226,0) 0),linear-gradient(rgba(155,205,212,.75) 20%,rgba(162,200,205,.65) 80%);box-shadow:inset 0 -1px 3px 0 rgba(131,238,252,.25),0 1px 0 0 rgba(159,216,223,.65),0 3px 6px 0 rgba(83,162,172,.5);color:rgba(169,208,214,.75);display:flex;flex:1 1 auto;justify-content:center;min-height:48px;width:100%}.ctrl__label--pitch-class{font-size:60px;font-weight:100;margin:12px 6px 0 0;text-transform:none}@media (max-width:320px){.ctrl__label--pitch-class{font-size:48px;margin:6px 6px 0 0}}.ctrl__label--octave{font-size:18px;margin-top:-18px}.piano__keys{background-color:rgba(77,189,203,.95);border-left:18px solid rgba(87,204,219,.95);border-right:18px solid rgba(87,204,219,.95);border-top:18px solid rgba(22,20,19,.25);box-shadow:inset 0 -1px 0 0 rgba(240,244,245,.25);display:flex;flex:0 0 225px;height:225px;justify-content:center;margin:6px 3px;padding-left:2px;position:relative;z-index:0}@media (max-width:750px){.piano__keys{flex:0 0 196.875px;height:196.875px}}.key{background-color:#e2dfdf;border-bottom:1px solid rgba(103,122,126,.75);border-radius:0;border-bottom-left-radius:2px 3px;border-bottom-right-radius:2px 3px;box-shadow:inset 0 -2px 0 0 rgba(58,109,120,.5),0 6px 3px -3px rgba(98,126,132,.25),0 0 0 .5px rgba(98,126,132,.5);flex:0 0 48px;margin:0 1px 6px -1px}@media (max-width:750px){.key{flex:0 0 42px}}.key.black{background-color:#2a2828;border-top:none;border-radius:0 0 4px 4px;box-shadow:inset 0 6px 0 3px hsla(0,2%,8%,.75),inset 6px 0 0 0 rgba(26,25,25,.5),inset -6px 0 0 0 rgba(26,25,25,.5),inset 0 -24px 0 -12px rgba(92,87,87,.3),inset 0 -30px 0 -12px rgba(92,87,87,.2),inset 0 -12px 0 6px #1a1919,0 6px 0 -2px rgba(84,80,79,.18);flex:0 0 33px;height:65%;margin:0 -18px 0 -15px;position:relative;z-index:1}@media (max-width:750px){.key.black{flex:0 0 28.875px;margin:0 -15.75px 0 -13.125px}}.key:hover{background-image:linear-gradient(hsla(0,0%,98%,.85) 230px,hsla(0,0%,98%,.35) 0)}.key:active{box-shadow:inset 0 5px 10px 0 rgba(0,0,0,.1),inset 0 -2px 2px -2px rgba(0,0,0,.1)}.key.black:hover{background-color:#201e1e;background-image:none;box-shadow:inset 0 6px 0 3px hsla(0,2%,8%,.65),inset 6px 0 0 0 rgba(26,25,25,.5),inset -6px 0 0 0 rgba(26,25,25,.5),inset 0 -24px 0 -12px rgba(92,87,87,.2),inset 0 -30px 0 -12px rgba(92,87,87,.1),inset 0 -12px 0 6px #1a1919,0 6px 0 -2px rgba(84,80,79,.18)}.key.black:active{border-color:#040f10;box-shadow:inset 0 5px 10px 0 rgba(0,0,0,.1),inset 0 -2px 2px -2px rgba(0,0,0,.1)}.controls__label,.controls__label--slider,.controls__label--stacked{align-items:center;display:flex;flex:1 0 25%;flex-direction:column;justify-content:center;letter-spacing:.5px;text-align:center;text-shadow:0 -1px 0 rgba(34,73,78,.3)}@media (max-width:750px){.controls__label,.controls__label--slider,.controls__label--stacked{font-size:9px}}@media (max-width:320px){.controls__label,.controls__label--slider,.controls__label--stacked{justify-content:space-between}}.controls__label--slider{margin:0 12px}.controls__label--stacked{align-items:center;flex-direction:row;justify-content:space-between;padding:0 12px}@media (max-width:750px){.controls__label--stacked{display:flex;flex:0 1 25%}}@media (max-width:480px){.controls__label--stacked{flex-direction:column;justify-content:center}}@media (max-width:320px){.controls__label--stacked{margin-top:6px;text-align:center}}.controls__label__text,.controls__label__text--checked,.controls__label__text--stacked,.controls__label__text--stacked--checked{position:relative}@media (max-width:320px){.controls__label--slider .controls__label__text,.controls__label--slider .controls__label__text--checked,.controls__label--slider .controls__label__text--stacked,.controls__label--slider .controls__label__text--stacked--checked{line-height:30px;margin:3px 0 -6px}}.controls__label__text--stacked,.controls__label__text--stacked--checked{white-space:nowrap}.controls__label__text--checked,.controls__label__text--stacked--checked{color:#9bcdd4;text-shadow:0 -1px 0 rgba(34,73,78,.3),0 0 6px #59b4c0,0 1px 12px rgba(63,154,166,.1)}.controls__slider{-webkit-appearance:none;background-color:rgba(42,58,60,.35);border-radius:3px;box-shadow:inset 0 3px 0 0 rgba(42,49,50,.35),0 3px 0 0 hsla(187,9%,60%,.1);margin:6px;padding:6px;width:100%}@media (max-width:320px){.controls__slider{margin:3px 0 0}}.controls__slider::-webkit-slider-runnable-track{-webkit-appearance:none;background-color:#2a3a3c;border-radius:1px;height:6px}@media (max-width:320px){.controls__slider::-webkit-slider-runnable-track{height:3px}}.controls__slider::-webkit-slider-thumb{-webkit-appearance:none;background-image:linear-gradient(90deg,#70a2a9 15%,#8fb7bc 0,#8fb7bc 85%,#70a2a9 0);border-radius:1px;box-shadow:0 1px 0 0 #1d2e30,3px 1px 0 1px rgba(29,46,48,.5);height:15px;margin:-4.5px 0 0;width:30px}@media (max-width:480px){.controls__slider::-webkit-slider-thumb{height:18px;margin:-7px 0 0;width:36px}}*{box-sizing:border-box;list-style:none;margin:0;padding:0;text-decoration:none;-moz-user-select:none;-webkit-user-select:none;user-select:none}:active,:focus{outline:none}.key:hover,button:hover,input:hover,label:hover{cursor:pointer}body,html{height:100%;width:100%}body{background-color:#dcd6d5;background-image:radial-gradient(ellipse farthest-corner at 50% 33%,#fff,#dcd6d5 50%);background-repeat:no-repeat;font:500 10px/18px Roboto,sans-serif}.piano__title,body{text-transform:uppercase}.piano__title{background:rgba(51,186,204,.9);color:#fff;display:inline-block;font-size:14px;left:0;letter-spacing:.05em;padding:6px 12px;position:fixed;top:0;z-index:9}@media (max-width:320px){.piano__title{display:none}}@media (max-height:480px){.piano__title{display:none}}.piano{background-color:#364345;border-bottom-left-radius:60px 9px;border-bottom-right-radius:60px 9px;border-top-left-radius:6px 3px;border-top-right-radius:6px 3px;display:flex;height:480px;margin:36px 24px;position:relative}@media (max-width:1080px){.piano{margin:36px 12px}}@media (max-width:750px){.piano{border-bottom-left-radius:30px 9px;border-bottom-right-radius:30px 9px;margin:36px 6px 12px;margin:0 6px}}@media (max-width:480px){.piano{border-bottom-left-radius:12px 9px;border-bottom-right-radius:12px 9px;margin:36px 3px 12px}}@media (max-width:320px){.piano{border-radius:0;height:520px;margin:0}}@media (max-height:480px){.piano{height:100%}}@media (max-height:480px) and (max-width:320px){.piano{border-radius:0;margin:0}}.piano:after{background-color:rgba(23,36,38,.35);border-bottom-left-radius:60px 9px;border-bottom-right-radius:60px 9px;bottom:0;content:"";height:9px;left:0;position:absolute;width:100%}@media (max-width:750px){.piano:after{border-bottom-left-radius:30px 9px;border-bottom-right-radius:30px 9px}}@media (max-width:480px){.piano:after{border-bottom-left-radius:12px 9px;border-bottom-right-radius:12px 9px}}@media (max-width:320px){.piano:after{border-radius:0;height:6px}}.piano__side--left,.piano__side--right{background-image:linear-gradient(hsla(0,0%,100%,0) 33%,rgba(76,100,103,.5));border-bottom-left-radius:60px 9px;border-bottom-right-radius:1px;border-top-left-radius:6px 3px;border-top-right-radius:6px 3px;flex:0 0 60px;position:relative;z-index:1}@media (max-width:750px){.piano__side--left,.piano__side--right{border-bottom-left-radius:30px 9px;flex:0 0 30px}}@media (max-width:480px){.piano__side--left,.piano__side--right{border-bottom-left-radius:12px 9px;flex:0 0 12px}}@media (max-width:320px){.piano__side--left,.piano__side--right{display:none}}@media (max-height:480px){.piano__side--left,.piano__side--right{height:100%}}.piano__side--right{border-bottom-left-radius:1px;border-bottom-right-radius:60px 9px}@media (max-width:750px){.piano__side--right{border-bottom-right-radius:30px 9px}}@media (max-width:480px){.piano__side--right{border-bottom-right-radius:12px 9px}}.piano__wrapper{background-color:rgba(173,219,87,.85);background-image:linear-gradient(hsla(0,0%,100%,0) 33%,hsla(0,0%,100%,.15));border-bottom-left-radius:3px 120px;border-bottom-right-radius:3px 120px;box-shadow:0 0 0 .5px rgba(62,110,116,.5),inset 0 -1px 0 .5px rgba(34,41,42,.5),inset 0 -6px 12px 12px rgba(31,134,147,.5),inset 0 -12px 0 6px rgba(33,43,44,.25);display:flex;flex:0 1 100%;flex-direction:column;justify-content:space-between;padding:12px 6px}@media (max-width:320px){.piano__wrapper{padding:6px 6px 12px}}@media (max-height:480px){.piano__wrapper{height:100vh;padding:6px 6px 12px}}
/*# sourceMappingURL=styles.css.map*/