:not(:root):-webkit-full-screen::backdrop{background-color:#1e2327}:not(:root):-ms-fullscreen::backdrop{background-color:#1e2327}:not(:root):fullscreen::-webkit-backdrop{background-color:#1e2327}:not(:root):fullscreen::backdrop{background-color:#1e2327}.page{min-height:100vh;padding:0;margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#1e2327;overflow-x:hidden}input[type=range]{-webkit-appearance:none;width:170px;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:15px;width:15px;border-radius:50%;background-color:#e91e63;cursor:pointer;border:none;margin-top:-5px}input[type=range]::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background-color:#e91e63;cursor:pointer;border:none}input[type=range]:focus{outline:none}input[type=range]:hover::-webkit-slider-runnable-track{background-color:#e91e63}input[type=range]::-webkit-slider-runnable-track{width:170px;height:5px;cursor:pointer;background:#bb3462;border-radius:2.5px;-webkit-transition:background-color .3s linear;transition:background-color .3s linear}input[type=range]::-moz-range-track{width:170px;height:5px;cursor:pointer;background-color:#bb3462;border-radius:2.5px}::-webkit-scrollbar-button{background-image:url();background-repeat:no-repeat;width:6px;height:0}::-webkit-scrollbar-track{background-color:#454c53;border-radius:3px}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#1e2327}::-webkit-scrollbar-thumb:hover{background-color:#bb3462}::-webkit-resizer{background-image:url();background-repeat:no-repeat;width:6px;height:0}::-webkit-scrollbar{width:6px}.header{box-sizing:border-box;text-align:center;width:100%;border-bottom:1px solid;border-image-slice:1;border-image-source:linear-gradient(270deg,#1e2327,#676c71,#1e2327)}.header__title{margin:0 auto;font-family:Open Sans,Arial,Helvetica,sans-serif;line-height:60px;font-weight:300;color:#e3e3e3}.content{box-sizing:border-box;min-height:calc(100vh - 110px);padding:60px 10px 0;display:flex;flex-direction:column;width:100%;margin:0 auto}.button-container{display:flex;justify-content:space-between;width:300px;height:40px;margin:0 auto 80px}.button{display:block;width:100px;height:40px;padding:0 10px;background-color:#454c53;border:0;font-family:Open Sans,Arial,Helvetica,sans-serif;font-size:14px;font-weight:300;text-transform:uppercase;color:#fff;outline:0;cursor:pointer;transition:.3s}.button_type_letters{border-radius:0 20px 20px 0}.button_type_notes{border-radius:20px 0 0 20px}.button:hover{background-color:#515961}.button_active{background-color:#bb3462}.button_active:hover{background-color:#e91e63}.button_type_toggle-recorder{width:80px;height:30px;margin:0 auto 10px;color:#676c71;background-color:transparent}.button_type_toggle-recorder:hover{color:#e91e63;background-color:transparent}.controls{display:flex;margin:0 auto 20px;max-width:200px;background-color:#393e44;border-radius:20px}.cntrls-button{display:block;width:40px;height:40px;background-color:transparent;background-repeat:no-repeat;background-position:50%;background-size:20px;border:0;outline:none;opacity:.8;transition:.3s}.cntrls-button_type_reset{border-radius:50% 0 0 50%;background-image:url(9fb991fbbb36d94ca7ae.svg);background-size:18px}.cntrls-button_type_play{background-image:url(ba13d163c1c78ac92823.svg);background-size:35px}.cntrls-button_type_stop{background-image:url(3daf0623f45b2fe37541.svg);background-size:40px}.cntrls-button_type_backspace{border-radius:0 50% 50% 0;background-image:url(1e37b24397bad105a26c.svg)}.cntrls-button_type_record{background-image:url(57d051ea4d4e861b27f9.svg);background-size:36px;background-position:1px 1px}.controls__checkbox_rec:checked+.cntrls-button_type_record{background-size:44px;background-position:-3px -3px;border-radius:50%;background-color:#e91e63}.cntrls-button:hover{cursor:pointer;background-color:#bb3462}.controls__checkbox{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.piano{width:100%;height:270px;max-width:1560px;margin:0 auto 80px}.piano,.piano__octave{display:flex}.piano__keys{position:relative;display:flex;justify-content:space-between}.piano__key{box-sizing:border-box;display:block;position:relative;width:30px;height:270px;background-color:hsla(0,0%,100%,.85);border:1px solid #1e2327;outline:none;border-radius:0 0 8px 8px;transform-origin:center top;transition:.3s;cursor:pointer;box-shadow:inset 0 -5px 2px 2px hsla(0,0%,43.9%,.7)}.piano__key:hover{background-color:#fff}.piano__keys-sharp{position:absolute;left:18px;right:18px;top:0;display:flex;justify-content:space-between;pointer-events:none}.piano__key_sharp{width:24px;height:185px;background:linear-gradient(0deg,#676c71,#1e2327);border:0;border-radius:0 0 6px 6px;top:0;z-index:3;pointer-events:auto;transform-origin:center top;box-shadow:inset 0 -8px 2px 5px rgba(0,0,0,.7)}.piano__key_active{transform:scaleY(.96)}.piano__key_sharp:hover{background:linear-gradient(0deg,#676c71,#343438)}.piano__note{position:absolute;bottom:-45px;left:0;width:28px;height:40px;font-family:Open Sans,Arial,Helvetica,sans-serif;font-size:16px;line-height:40px;text-align:center;color:#676c71;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;transition:all .3s linear}.piano__key:hover .piano__note{color:#d7dfe6}.piano__note_sharp{top:-45px}.piano__key:hover .piano__note_active,.piano__note_active{color:#e91e63}.recorder-section{pointer-events:all;opacity:1;visibility:visible;transition:.3s}.recorder-section_hidden{pointer-events:none;opacity:0;visibility:hidden;height:0}.recorder-section__label{display:block;width:114px;height:18px;margin:0 auto 10px;font-family:Open Sans,Arial,Helvetica,sans-serif;font-size:14px;text-transform:uppercase;color:#676c71}.recorder-section__range{display:block;width:170px;height:18px;margin:0 auto 10px}.notes-recorder{max-width:1560px;width:100%;margin:0 auto;max-height:89px;overflow-y:auto}.notes-recorder__notes{font-family:Open Sans,Arial,Helvetica,sans-serif;font-size:18px;line-height:22px;color:#676c71}.fullscreen{position:fixed;top:120px;right:40px;width:40px;height:40px;background-color:#454c53;border:0;outline:0;background-size:36px;background-repeat:no-repeat;background-position:50%;opacity:.7;transition:.3s;cursor:pointer;background-image:url(d9b4a51541ceae983b42.svg)}.fullscreen:hover{opacity:1}:-webkit-full-screen .fullscreen{background-image:url(d85fd1331f82fc2446e3.svg)}.footer{border-top:1px solid;border-image-slice:1;border-image-source:linear-gradient(270deg,#1e2327,#676c71,#1e2327)}.footer__container{box-sizing:border-box;padding:0 15px;display:flex;justify-content:center;align-items:center;width:100%;max-width:1140px;margin:0 auto;opacity:.5}.footer__copyright{color:#cbd5de;line-height:45px;font-size:16px;margin-right:6px}.footer__copyright,.footer__link{font-family:Open Sans,Arial,Helvetica,sans-serif}.footer__link{position:relative;display:block;text-decoration:none;background-repeat:no-repeat;background-position:0;background-size:contain}.footer__link:hover{outline:0;color:#e91e63;text-decoration:underline}.footer__link:focus{outline:0}.footer__link_type_github{box-sizing:border-box;height:45px;padding-left:30px;color:#cbd5de;line-height:45px;font-size:16px;background-image:url(eefdd968efb0b7dec5cf.svg);background-size:25px;transition:.3s}