.transformation-section{

background:
linear-gradient(
180deg,
rgba(255,255,255,.01),
rgba(255,255,255,.03)
);

}

.transform-layout{

display:grid;

grid-template-columns:
1fr 1fr;

gap:60px;

margin-top:60px;

}

.transform-controls{

display:grid;

gap:30px;

}

.transform-controls label{

display:grid;

gap:10px;

font-size:18px;

}

.transform-controls input{

width:100%;

}

.transform-metrics{

display:grid;

gap:30px;

}

.metric{

display:grid;

gap:10px;

}

.bar{

height:22px;

border-radius:999px;

overflow:hidden;

background:
rgba(255,255,255,.08);

}

.fill{

height:100%;

transition:1s;

}

.danger{

background:
linear-gradient(
90deg,
#ff6f6f,
#ff9b6f
);

}

.success{

background:
linear-gradient(
90deg,
#d8b15a,
#f4dfab
);

}