:root{--settings-bg:#505050}h2{margin:0}body{color:#fff;background-color:#2b2b2b;font-family:monospace}.synthesizer{flex-direction:column;gap:.25rem;display:flex}.settings{grid-template-columns:repeat(4,1fr);gap:.25rem;display:grid}.setting{background-color:var(--settings-bg);border-radius:.25rem;padding:1rem}.pianoroll{flex-wrap:wrap;justify-content:center;gap:2px;margin-top:1rem;font-size:0;display:flex}.piano-container{position:relative}.pianoroll div{gap:2px;display:flex}.black{height:4rem;position:absolute;transform:translate(1rem)}.white{height:7rem}.note{background-color:#fff;border:none;width:2rem}.black .note{background-color:#000}.note.active{background-color:#40e0d0;transition:all .1s;transform:translateY(.25rem)}.empty{opacity:0}@media (width<=800px){.settings{grid-template-columns:repeat(2,1fr)}}@media (width<=500px){.settings{grid-template-columns:1fr}}