fix.css

.main-flex {
    display: flex;
}

.edit-area {
    padding: 1rem; 
    flex: 1 1 auto; 
    display: flex; 
    flex-direction: column; 
    align-items: stretch;
}

#edit-input {
    white-space: nowrap;
    overflow: auto;
}

#outputs {
    margin: 1em;
    padding: 1em;
    min-width: 5em; 
    padding: 1rem;
    overflow-x: visible; 
    flex: 0 0 auto; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 1.5rem; 

    background: var(--bg2-color);
    border: 0px solid transparent;
    border-radius: 0.5em;
}


@media (orientation: portrait) {
    .main-flex { flex-direction: column; }
    .main-flex .edit-area { height: 70vh; }
}

#create, #reset {
    font: inherit;
    padding: 0.5em;
    appearance: none;
    border: 0px solid transparent;
    border-radius: 999999px;
    cursor: pointer;
}

#reset {
    background: var(--button-color);
    color: var(--text-color);
}
#reset:hover { background: var(--button-hover) } 

#create {
    background: var(--primary-color);
    color: var(--primary-contrast-color);
}
#create:hover { filter: brightness(115%); }

.text-area {
    flex: 1 1 auto; 
    border: 0px solid transparent;
    border-radius: 0.5em;
    overflow: hidden;

    display: flex;
}

.text-area > * {
    flex: 1 1 auto;
    padding: 0.5rem;

    appearance: none; 
    resize: none; 
    border: none;
    outline: none; 

    overflow: scroll; 

    font-family: monospace; 
    background: var(--bg2-color); 
    color: var(--text-color);
}

#collapse-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

#collapse-button > * {
    display: inline;
    padding: 0.5em;

    border: 0px solid transparent;
    border-radius: 999999px;
    background: var(--button-color);

    cursor: pointer;
}

#collapse-button > *:hover { background: var(--button-hover) } 
#collapse-button > * > * {
    display: block;
    fill: none;
    stroke: var(--hint-color);
    height: 1em; /*sadly, we cant use lh instaed of em. now this button is smaller than others (but at least it is square) */
    width: 1em;
    stroke-width: 0.2;
    stroke-linecap: round;
    transform: rotate(180deg);
    transition: transform 250ms;
}

#collapse-button[data-collapsed=true] > * > * {
    transform: rotate(0);
}

#collapse-content {
    margin-top: 1em;
}

.outputs-name {
    font-size: 1.25em;
    text-align: center;
}

.hint-text {
    font-size: 1.3em;
    max-width: max(60vw, 120vh);
}
@keyframes opac01 {
    from { opacity: 0 } to { opacity: 1 }
}
#status {
    animation: opac01;
    animation-duration: 300ms;
}