Создание гладких и круглых кругов с помощью CSS ⇐ Html

[Anonymous]

Я застрял, пытаясь поиграть и улучшить свои навыки работы с CSS на веб-странице CSS Battle.
Вы можете увидеть задачу здесь: https://cssbattle.dev/play/yR1YMEZEO78DGeVBxnAQ (просто нажмите закройте появившийся раскрывающийся список, сказав: «Прошлые ежедневные цели», если он появится).
Ниже приведен код моей попытки и того, как далеко я продвинулся. Кажется, я не могу сгладить эту кривую на своих div. Удалите весь код в редакторе и замените его моим, чтобы увидеть мою попытку.

Код: Выделить всё

body {
display: flex;
background: #FFE4E0;
justify-content: center;
}

.outer-circel {
width: 300px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
background: #E05947;
border-radius: 100px 100px 0 0;
transform: rotate(180deg);
margin: 100 0 0 0;
position: relative
}

.inner-circel {
width: 190px;
aspect-ratio: 1;
background: #FFE4E0;
border-radius: 50%;
margin: 150 0 0 0;
position: relative
}

.line {
width: 50px;
height: 119px;
margin: 82 0 0 0;
background: green;
position: absolute
}

Чтобы увидеть проблему, код необходимо вставить точно так же, как сейчас.

Подробнее здесь: https://stackoverflow.com/questions/793 ... s-with-css