* {
    box-sizing: border-box;
    font-family: monospace;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: #f0f0f0;
    display: flex;
    flex-direction: column;
}

#form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

header {
    border-bottom: 1px solid black;
    padding: 1rem;
    background: #f8f8f8;
}

header h1 {
    margin: 0;
}

#main {
    display: flex;
    flex: 1;
}

footer {
    border-top: 1px solid black;
    padding: 1rem;
    background: #f8f8f8;
}

#output {
    border-right: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

#output-footer {
    border-top: 1px solid black;
    background: white;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 1rem;
}

#waveform {
    object-fit: contain;
    width: 100%;
    margin-bottom: 1rem;
    max-height: calc(100vh - 14rem);
    flex: 1;
    cursor: grab;
}

#waveform.grabbing {
    cursor: grabbing;
}

#panel {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#commands {
    border-bottom: 1px solid black;
    padding: 1rem;
    background: white;
    display: flex;
    align-items: center;
    gap: .4rem;
}

#sources {
    display: flex;
    flex: 1;
}

#image-source,
#audio-source {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

#image-source {
    border-right: 1px solid black;
}

#image-source canvas,
#audio-source canvas {
    max-width: calc(25vw - 2rem);
}

h2 {
    margin: 0;
}

label,
input {
    user-select: none;
}

@media (max-width: 1000px) {
    #main,
    #output-footer,
    #sources,
    #commands {
        flex-direction: column;
    }
    #image-source {
        border-right: none;
        border-bottom: 1px solid black;
    }
}