body{margin:0;min-height:100%;font-family:sans-serif;background-color:#eee}body button{padding:1% 2%;cursor:pointer;background-color:#fff;color:#000;border:1px solid #555555}body h1{padding:1vh 3vw}body #code-overlay{display:none;position:fixed;top:0;right:0;padding:10px;background-color:#fffd;border-bottom-left-radius:10px;max-width:50%;align-items:flex-start;box-shadow:0 0 10px -5px #000}body #code-overlay.showing-process-code #code-btns button#code-copy,body #code-overlay.showing-process-code #code-btns button#code-save{display:none}body #code-overlay #code-box{font-family:monospace;flex-grow:1}body #code-overlay #code-btns{margin-left:10px}body #code-overlay #code-btns button{cursor:pointer;font-weight:700;padding:5px 5px 3px}body #code-overlay #code-btns button:not(:last-child){margin-bottom:10px}body #code-overlay #code-btns button img{width:20px;height:20px}body #start-screen{height:50vh;width:100vw;display:flex;justify-content:center;align-items:center}body #start-screen>button{font-size:30px;padding:5px 20px;cursor:pointer}body #main-screen{display:none;flex-direction:column;width:100%;height:100vh}body #main-screen #progress-area{width:100%;height:5px}body #main-screen #progress-area #progress-bar{width:100%;height:100%;background-color:#555;transition:width .3s ease}body #main-screen #top-row{display:flex;flex-direction:row;align-items:center;justify-content:stretch;margin:10px}body #main-screen #top-row h1{flex-grow:1;font-size:32px;margin:8px 16px;padding:0}body #main-screen #top-row #evolve-btn,body #main-screen #top-row #save-btn{text-transform:uppercase;font-weight:700;font-size:24px;transition:color .3s;margin-left:5px}body #main-screen #top-row #evolve-btn.inactive,body #main-screen #top-row #save-btn.inactive{cursor:default;color:#aaa}body #main-screen #synth-row{flex-grow:1;display:flex;transition:opacity .3s}body #main-screen #synth-row .context-panel{flex-grow:1;display:flex;flex-direction:column;padding:0 5px;border-right:1px solid #aaaaaa}body #main-screen #synth-row .context-panel .indicators{margin:5px 0;border-bottom:5px solid rgba(255,255,255,0);transition:border-color .3s}body #main-screen #synth-row .context-panel .indicators:not(.midi-disabled){border-top:5px solid rgba(255,255,255,0);padding:1px 0}body #main-screen #synth-row .context-panel.favourite .indicators{border-bottom-color:#378d37}body #main-screen #synth-row .context-panel.favourite .control-box .favourite-select{background-color:#555;color:#fff}body #main-screen #synth-row .context-panel.midi-enabled .indicators{border-top-color:#f18d09}body #main-screen #synth-row .context-panel.midi-enabled .control-box .ctx-select{background-color:#555;color:#fff}body #main-screen #synth-row .context-panel:last-child{border-right:none}body #main-screen #synth-row .context-panel iframe{width:100%;border:0;flex-grow:1}body #main-screen #synth-row .context-panel .control-box{display:flex;flex-wrap:wrap;justify-content:center}body #main-screen #synth-row .context-panel .control-box button{margin:0 3px 6px;transition:color .3s,background-color .3s}body #main-screen #synth-row .context-panel .control-box button.inactive{color:#aaa;cursor:default}body #main-screen #synth-row .context-panel .mfcc-box{height:100px;flex-shrink:0;display:flex;align-items:flex-end}body #main-screen #synth-row .context-panel .mfcc-box .mfcc-bar{flex-grow:1;width:1px;background-color:#555}body #cover{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:10}