:root{--sequencer-button-size:50px;--fg-primary:white;--bg:#121212;--visualizer-fg:var(--fg-primary);--sequencer-active-bg:#74c767}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;color:var(--fg-primary);background-color:var(--bg);flex-direction:column;display:flex}main{flex-direction:column;flex:1;display:flex}button{cursor:pointer}.recorder{justify-content:center;align-items:center;gap:40px;width:100%;padding:4px 20px;display:flex;box-shadow:0 1px 2px #00000050}#toggle-pause,#end-recording{background:0 0;border:none;font-size:30px}#toggle-pause{color:red;width:0%}#end-recording{color:var(--fg-primary)}.mid-container{flex:1;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr;width:100%;height:100%;display:grid}#visualizer-container{background-color:#292e3a;border-radius:10px;grid-area:1/1/auto/-1;justify-self:center;width:80vw;height:10vh}.sequencer{grid-row:2;align-self:end;min-width:0;max-width:100%;overflow-x:auto}#step-indicator,.sequencer-row{flex-flow:row;gap:4px;margin-bottom:10px;display:flex}.step,.sequencer-button{flex-shrink:0}.step{width:var(--sequencer-button-size);height:calc(var(--sequencer-button-size) / 2);background-color:gray;border-radius:20px;height:10px;transition:all .15s}.step.activated{background-color:green;transform:scale(1.1)}.sequencer-row{margin-bottom:5px}.sequencer-button{height:calc(var(--sequencer-button-size) / 2);width:var(--sequencer-button-size);background-color:#292e3a;border:none;border-radius:5px;transition:all .2s}.sequencer-button.active{background-color:var(--sequencer-active-bg)}.sequencer-button:hover{transform:scale(1.1)}.instruments{-webkit-user-select:none;user-select:none;flex-direction:column;width:100%;margin-top:auto;display:flex}.piano-roll{--key-width:100%;--key-height:80px;border-left:5px solid #2e2e2e;border-right:5px solid #242424;border-radius:4px}#piano-settings,#piano-settings select{font-family:Courier New,Courier,monospace}#piano-settings{color:#242424;background-color:#606060;flex-direction:row;gap:20px;padding:4px 0;font-weight:600;display:flex}#piano-settings select{color:#fff;background-color:#313131;border:none;border-radius:4px;padding:8px}.synth-setting{flex-direction:column;justify-content:flex-end;align-items:center;display:flex}#pan-slider{width:50%;height:50%}#pan-slider::-webkit-slider-runnable-track{background-color:#313131;border-radius:10px}#keys{display:flex}.key-container{width:100%;position:relative}.key-container *{height:var(--key-height);width:var(--key-width);border:none;border-right:1px solid #535353;border-radius:0}.key{transition:all .1s}.key:focus{transform:rotateX(10deg)}.key:not(.black){background:linear-gradient(90deg,#d4d4d4,#fff 10% 90%,#d4d4d4)}.black{color:#fff;z-index:1;background:linear-gradient(90deg,#000,#1c1c1c 30% 70%,#000);width:50%;height:40%;font-size:10%;position:absolute;left:75%}@media (width<=850px){#keys>:nth-child(n+15){display:none}}@media (width<=450px){#keys>:nth-child(n+8){display:none}}