body {
    margin: 0; /* убираем стандартные отступы браузера */
    /* 100% высоты окна браузера */
    /* вертикальное центрирование содержимого */
    background: #7bb8ff; /* светло-серый фон страницы */
}


/* --- Стили для текстовых полей --- */
textarea {
    resize: none; /* отключаем возможность менять размер мышкой */
}

/* --- Второе поле (результат) --- */
textarea[readonly] {
    background: #eaeaea; /* делаем сероватый фон, чтобы видно было, что редактировать нельзя */
}


/*   * {
    outline: 1px solid #0033ff;
}

/* На мобильных и/или в портретной ориентации делаем колонки в столбик */
@media (max-width: 820px), (orientation: portrait) {
    #io {
        flex-direction: column;
        height: auto !important; /* перекрываем inline-height родителя */
    }

    #io > div {
        width: 100% !important; /* обе колонки на всю ширину */
    }

    #io textarea {
        /* перекрываем inline height:85% и даём разумную высоту поля */
        height: clamp(160px, 32vh, 420px) !important;
    }

    #io button {
        width: 100%; /* удобнее тапать на телефоне */
    }
}