body{margin:0;padding:0 0 20px;box-sizing:border-box;font-family:lato}#aqwertyon,body,html{height:100%;min-height:500px}#container{display:flex;height:calc(100% - 70px);max-height:700px;position:relative}@media (min-width:1040px){#container{margin:0 auto;max-width:1000px}}@media (max-width:1040px){#container{margin:0 20px}}header{height:45px;border-bottom:1px solid #eae1e2;margin-bottom:20px}header h1{margin:0;position:absolute}header h1 img{height:45px}.preset-picker{width:60%;margin:0 auto;text-align:center}.preset-picker .tray-container{left:0;top:46px}.preset-panel{width:100%;height:100%;position:absolute;top:0;z-index:100;background:#fff;pointer-events:auto;transition:top .6s;overflow-y:scroll}.preset-panel.hidden{top:calc(-100% - 46px)}.preset-panel .app-sequence-title{font-size:20px;font-weight:700;margin:10px 0;text-align:center}.preset-panel ul{width:90%;margin:0 auto;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center}.preset-panel li{width:176px;margin:2px}.app-preset-link{font-size:14px;display:block;padding:8px}.app-preset-link:hover{background:#eae1e2}.app-preset-image{width:160px;height:160px;border-radius:80px;text-align:center;overflow:hidden;position:relative}.app-preset-image img{height:100%;position:absolute;left:50%;top:50%;transform:translateY(-50%) translateX(-50%)}.app-preset-title{text-align:center;font-weight:700;margin:4px 0;font-size:14px}.app-preset-prompt{margin:0}.current-preset{position:relative;padding:5px 0 5px 45px;display:inline-flex;align-items:center;height:35px}.current-preset.hidden{display:none}.current-preset .app-preset-image{width:35px;height:35px;border-radius:20px;position:absolute;left:0}.current-preset .app-preset-title{text-align:left;font-size:15px;font-weight:400}.open-preset-panel{height:35px;padding:5px 30px 5px 15px;margin-left:20px;background-color:#fff;background-image:url(/aqwertyon/theory/aqw-arrows-open.c2856f33.png);background-repeat:no-repeat;background-position-x:right;background-position-y:center;border:1px solid #eae1e2;font-size:13px;border-radius:20px}.open-preset-panel:focus{outline:none}.open-preset-panel.close{background-image:url(/aqwertyon/theory/aqw-arrows-close.f06283ca.png);background-color:#eae1e2}nav.controls{margin-right:10px;justify-content:flex-end}.controls{width:94px;display:flex;flex-direction:column}#app-controls{flex-grow:1}#logo{text-align:center;padding:10px 0;font-size:14px}#logo img{width:70px;height:70px}button.round{width:45px;height:45px;border:none;border-radius:50px;margin-bottom:5px}.audio-param{background:#eae1e2;position:relative;display:flex;padding:15px 5px 5px;margin-bottom:1px}.control-tray:last-child .audio-param{margin-bottom:0}.control-tray:focus{outline:none}.control-tray:focus .audio-param{background:#918483;color:#fff}.audio-param label{font-size:8px;text-transform:uppercase;position:absolute;top:5px;left:10px}.audio-param button{background:none;border:none}.audio-param .button-content{background:#fff;color:#000}.audio-param button:focus{outline:none}.main-button{padding:5px;width:74px;height:74px;text-align:center}.main-button .button-content{width:100%;height:100%;border-radius:39.5px}.button-history{margin:0;padding:0 0 0 4px;border-left:1px solid #fff;list-style:none}.button-history button{width:28px;height:28px;display:block;padding:0}.button-history button .button-content{width:24px;height:24px;border:2px solid #eae1e2;border-radius:14px;white-space:nowrap}.button-history li button .button-content.disabled{background:#eeeeef}.audio-param.selected .button-history button .button-content{border-color:#918483}.button-history button:hover{width:auto;position:relative;z-index:10}.button-history button:hover .button-content{width:auto;min-width:24px}.button-history button .button-content .full{display:none}.button-history button:hover .button-content .full{display:inline}.tray-container{left:95px;right:0;top:0;pointer-events:none;overflow:hidden}.tray,.tray-container{position:absolute;bottom:0}.tray{background:#918483;color:#fff;max-width:100%;max-height:100%;display:none;transition:left .4s;pointer-events:auto}.control-tray:focus .tray{display:block;z-index:5}#main{flex:1;display:flex;flex-direction:column}#main>section:not(:last-child){margin-bottom:10px}.sound-picker .main-button .button-content{display:flex;font-size:15px;justify-content:center;align-items:center;text-transform:capitalize}.sound-picker .button-history .button-content{font-size:15px;line-height:22px;text-transform:capitalize}.sound-picker .button-history button:hover .button-content:not(.disabled){padding:0 8px}.sound-picker .tray{overflow-y:scroll}.sound-picker .tray ul{margin:0;padding:0;list-style:none}.sound-picker .tray li{padding:10px 30px;text-transform:capitalize;position:relative;cursor:default;color:hsla(0,0%,100%,.6)}.sound-picker .tray li.loaded{color:#fff}.sound-picker .tray li .spinner{margin:0;width:24px;height:24px;position:absolute;left:3px;top:8px}.sound-picker .tray li .spinner path{stroke:#918483;fill:#eae1e2}.sound-picker .tray li:hover .spinner path{stroke:#5151af;fill:#9797eb}.sound-picker .tray li.pending .spinner path{stroke:#9797eb;fill:#d2d1fd}.sound-picker .tray li:not(:last-child){border-bottom:1px solid #fff}.sound-picker .tray li.selected,.sound-picker .tray li:hover{background:#5151af}.sound-picker .tray li.pending{background:#9797eb}.note-picker{display:flex}.half-tone-row{position:absolute;width:100%;height:50%;pointer-events:none}.note-picker .empty{visibility:hidden}.root-picker .main-button .button-content{display:flex;font-size:32px;justify-content:center;align-items:center}.root-picker .button-history .button-content{font-size:13px;line-height:22px}.root-picker .tray{box-sizing:border-box;width:100%;height:250px;padding:20px}.root-picker .note-picker{height:210px;align-items:center}.root-picker .mused-button-grid{margin:0 4px}.root-picker .mused-button-grid .mused-button{align-items:flex-end;padding:10px 0}.root-picker .full-tone-row{margin:0 -2px}.root-picker .full-tone-row .mused-button{flex:1;background:#eeebeb;color:#cfc5c5;margin:0 2px}.root-picker .full-tone-row .mused-button.disabled{background:#ddd;color:#ddd}.root-picker .half-tone-row .mused-button{flex:0.6666;background:#cfc5c5;color:#eeebeb}.root-picker .half-tone-row .mused-button:not(.empty){pointer-events:auto}.root-picker .half-tone-row .mused-button.empty{visibility:hidden}.root-picker .half-tone-row .mused-button.disabled{background:#ccc;color:#ccc}.root-picker .mused-button.selected{background:#5151af;color:#fff}.root-picker .octave-button{width:40px;height:100%;background:#eae1e2;color:#000;font-size:18px;cursor:default;display:flex;justify-content:center;align-items:center}.root-picker .octave-button.down{border-top-left-radius:10px;border-bottom-left-radius:10px}.root-picker .octave-button.up{border-top-right-radius:10px;border-bottom-right-radius:10px}.root-picker .octave-button:disabled{visibility:hidden}.root-picker .accidental-toggle{margin-right:20px;width:50px;height:100%;display:flex;flex-direction:column;font-size:25px}.root-picker .accidental-toggle div{background:#eae1e2;color:#000;flex:1;margin-bottom:4px;display:flex;justify-content:center;align-items:center;cursor:default}.root-picker .accidental-toggle div.selected{background:#5151af;color:#fff}.root-picker .accidental-toggle div:first-child{border-top-left-radius:10px;border-top-right-radius:10px}.root-picker .accidental-toggle div:last-child{border-bottom-left-radius:10px;border-bottom-right-radius:10px;margin-bottom:0}.scale-picker .main-button{padding-top:0;flex:none;position:relative}.scale-picker .main-button .button-content{display:flex;font-size:15px;justify-content:center;align-items:center;width:59px;height:59px;margin:0 auto 25px}.scale-picker .main-button .button-content div{position:absolute;bottom:-4px;height:24px;width:84px;font-size:12px;line-height:12px;display:flex;justify-content:center;align-items:center}.scale-picker:focus .audio-param .main-button .button-content div{color:#fff}.scale-picker .main-button .button-content svg{width:100%;height:100%}.scale-picker .button-history .button-content{font-size:15px;line-height:22px;text-transform:capitalize}.scale-picker .button-history button:hover .button-content:not(.disabled){padding-right:10px}.scale-picker .button-history .button-content svg{width:24px;height:24px;margin-right:5px;vertical-align:top}.scale-wheel .pitch-slice path{fill:#eeeeef;stroke:#fff;stroke-width:3}.scale-wheel .degree-label,.scale-wheel .note-label{text-align:center}.scale-wheel .note-label{font-size:12px;line-height:20px}.scale-wheel .degree-label{font-size:8px;line-height:20px}.scale-wheel .degree-wedge.skip{display:none}.scale-legend .scale-wheel .pitch-slice.perfect path,.scale-wheel .pitch-slice.perfect path{fill:#a732b2}.scale-legend .scale-wheel .pitch-slice.diminished path,.scale-legend .scale-wheel .pitch-slice.minor path,.scale-wheel .pitch-slice.diminished path,.scale-wheel .pitch-slice.minor path{fill:#3b9afc}.scale-legend .scale-wheel .pitch-slice.augmented path,.scale-legend .scale-wheel .pitch-slice.major path,.scale-wheel .pitch-slice.augmented path,.scale-wheel .pitch-slice.major path{fill:#78cf27}.scale-wheel .pitch-slice.active .pitch-shape{fill:#e06839}.scale-wheel .active-pitches path{stroke:#ff850d;stroke-width:5}.scale-wheel .active-pitches .polygon{fill:rgba(255,133,13,.5)}.scale-wheel .pitch-slice.active,.scale-wheel .pitch-slice.augmented,.scale-wheel .pitch-slice.diminished,.scale-wheel .pitch-slice.major,.scale-wheel .pitch-slice.minor,.scale-wheel .pitch-slice.perfect{color:#fff}.scale-wheel-container{display:flex;flex-direction:column;flex:1;align-items:center}.scale-wheel-container .button-row button{border:none;padding:4px 12px;font-size:14px;background:#eae1e2}.scale-wheel-container .button-row button.active{background:#a732b2;color:#fff}.scale-wheel-container .button-row button:focus{outline:none}.scale-wheel-container .button-row button:first-child{margin-right:1px;border-top-left-radius:12px;border-bottom-left-radius:12px}.scale-wheel-container .button-row button:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}.scale-picker-container{display:flex}.scale-picker .tray{padding:5px}.scale-legend .scale-wheel{margin:15px 10px 5px;width:200px;height:200px}.scale-legend div div{margin:10px;padding:5px;font-weight:700;font-size:16px;color:#fff}.scale-legend .scale-wheel .pitch-slice path{fill:none;stroke-width:1}.scale-wheel.scale-icon .pitch-slice path{stroke-width:2}.scale-legend div.perfect{background:#a732b2}.scale-legend div.minor{background:#3b9afc}.scale-legend div.major{background:#78cf27}.scale-picker .tray ul{margin:0;padding:0;list-style:none}.scale-group-list{display:flex}.scale-group-list h3{font-weight:400;margin:15px 10px}.scale-button{padding:5px;margin:5px;display:flex;cursor:default}.scale-button.selected,.scale-button:hover{background:#5151af}.scale-button svg{display:block;width:55px;max-height:55px;margin:0 5px 0 0}.scale-button .scale-name{display:flex;flex:1;align-items:center;font-size:14px}.audio-param.volume-control{padding:20px 10px 10px}#volume-input{-webkit-appearance:none;width:100%;margin:8px 0}#volume-input:focus{outline:none}#volume-input::-webkit-slider-runnable-track{width:100%;height:4px;background:#fff}#volume-input::-webkit-slider-thumb{border:2px solid #eae1e2;height:20px;width:20px;border-radius:10px;background:#fff;cursor:pointer;-webkit-appearance:none;margin-top:-8px}#volume-input:focus::-webkit-slider-thumb{background:#fff}#volume-input::-moz-range-track{width:100%;height:4px;cursor:pointer;background:#fff}#volume-input::-moz-range-thumb{border:2px solid #eae1e2;height:20px;width:20px;border-radius:10px;background:#fff;cursor:pointer}#volume-input::-ms-track{width:100%;height:4px;cursor:pointer;background:transparent;border-color:transparent;color:transparent}#volume-input::-ms-fill-lower{background:#bfbfbf;border:0 solid #000;border-radius:0}#volume-input::-ms-fill-upper{background:#fff;border:0 solid #000;border-radius:0}#volume-input::-ms-thumb{border:2px solid #eae1e2;height:20px;width:20px;border-radius:10px;background:#fff;cursor:pointer;height:4px}#volume-input:focus::-ms-fill-lower,#volume-input:focus::-ms-fill-upper{background:#fff}.video,.visualization{flex:1;display:flex}.video{flex-direction:column}.video iframe{width:100%;height:100%;flex:1;border:none}input[type=text]{border:1px solid #eae1e2;color:rgba(0,0,0,.75);margin:0 0 10px;padding:5px;height:35px;font-size:16px;box-sizing:border-box}.visualization .scale-wheel{height:auto;width:auto;flex:1}.visualization .staff-container{flex:0.75}.visualization .staff-container svg{width:auto;height:100%}.transport{height:45px;background:#eee}.keyboard{display:flex;flex:1;margin:-2px 0}.keyboard .mused-button-grid{outline:0}.keyboard .mused-button-grid .mused-button-overlay{background-color:rgba(0,0,0,.4);font-size:40px}.keyboard .mused-button-row{margin:0 -2px;justify-content:space-between}.keyboard .mused-button-row:first-child{margin-right:90px}.keyboard .mused-button-row:nth-child(2){margin-left:40px}.keyboard .mused-button-row:nth-child(3){margin-left:70px;margin-right:90px}.keyboard .mused-button-row:nth-child(5){margin-left:200px;margin-right:200px}.keyboard .mused-button{height:50px;border-radius:25px;cursor:default;flex-direction:column;margin:2px}.keyboard .mused-button.note-button{transition:background-color .08s;width:50px;background:#eae1e2;flex:none!important}.mused-button.note-button div{pointer-events:none}.mused-button .note-name{font-size:20px;font-weight:700;height:22px}.mused-button .key-name{font-size:12px;color:#fff;text-transform:uppercase}.keyboard .mused-button.transpose-button{width:100px;background:#eeeeef;font-size:30px;flex:none!important}.keyboard .mused-button.disabled{background-color:#eeeeef}.keyboard .mused-button.triggered{background-color:#5151af;color:#fff}.keyboard .mused-button.triggered .key-name{color:hsla(0,0%,100%,.2)}.mused-button-grid{position:relative;display:flex;flex-direction:column;width:100%;height:100%}.mused-button-grid .mused-button-row{display:flex;flex:1}.mused-button-grid .mused-button-overlay{position:absolute;width:100%;height:100%;display:flex;background:rgba(0,0,0,.5);color:#fff;align-items:center;justify-content:center;cursor:default}.mused-button-grid .mused-button-overlay.hidden{display:none}.mused-button-grid .mused-button{display:flex;align-items:center;justify-content:center;cursor:default}.spinner{margin:200px auto;animation:spin 3s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}