style.css

        #editor {
            position: absolute;
            top: 76px;
            right: 0px;
            bottom: 60%;
            left: 0;
            border: 1px solid black;
        }

        #midi {
            position: absolute;
            top: 48px;
            left: 50%;
            right: 0;
        }


        #outputWrapper {
            overflow: auto;
            position: absolute;
            top: 40%;
            left: 0px;
            right: 0px;
            bottom: 0px;
            padding-top: 16px;
        }

        #output {
            overflow: visible;
            width: fit-content;
            height: fit-content;
        }

        button {
            font-size: 18px;
            border: 0px solid black;
            border-radius: 7px;
            margin: 2px;
            padding: 4px;
            height: 32px;
            background: none;
        }

        #help {
            font-size: 18px;
            background-color: none;
            border-radius: 7px;
            padding: 4px;
            text-decoration: none;
            right: 0px;
            top: 4px;
            position: absolute;
        }

        button:hover,
        #help:hover {
            background: rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }

        button:active {
            scale: 0.95;
        }



        .right {
            right: 0px;
            top: 0px;
            position: absolute;
        }

        #inputOctave {
            width: 24px;
            height: 32px;
            border: none;
        }



        #buttonInsert {}

        #toolbarInsert {
            display: inline-block;
        }

        #recordMidi {
            display: none;
        }

        #recordMidi:checked+label {
            border-radius: 8px;
            padding: 4px;
            background-color: pink;
            animation: recordMidi 1s alternate infinite;
        }

        @keyframes recordMidi {
            from {
                border: 4px solid white;
            }

            to {
                border: 4px solid pink;
            }
        }

        #recordMidi:not(:checked)+label {
            border-radius: 8px;
            padding: 4px;
            color: gray;
            text-decoration: line-through;
        }

        #recordMidi:not(:checked)+label:hover {
            border-radius: 8px;
            padding: 4px;
            color: blue;
        }




        #audio {
            position: absolute;
            left: 0px;
            right: 0px;
            filter: invert(1) brightness(1.2);
            border-top: 4px solid gray;
        }



        #toolbar {
            background: #efefff;
        }

        .toolbarPart {
            display: inline-block;
            padding: 2px;
            margin: 3px;
            border-right: 1px lightgray solid;
            padding-right: 8px;
        }


        body {
            margin: 0px;
            user-select: none;
            /* Standard syntax */
        }