.mode-toggle{
margin:15px 0;
}

button{
padding:8px 14px;
margin:4px;
border:none;
border-radius:6px;
background:#ddd;
cursor:pointer;
}

button.active{
background:#3f509d;
color:white;
}

.diagram{
position:relative;
width:140px;
height:260px;
margin:40px auto;
}

/* glans */

.glans{
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:90px;
height:70px;
background:#e79d8f;
border-radius:45px 45px 35px 35px;
z-index:1;
}

/* shaft */

.shaft{
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:70px;
height:200px;
background:#f2c6a8;
border-radius:35px;
}

/* foreskin */

.foreskin{
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:0;
width:72px;
height:160px;
background:#f2c6a8;
border-radius:36px;
z-index:2;
transition:transform .6s ease;
}

.slider-container{
margin:30px 0;
}

.progress{
width:100%;
height:14px;
background:#ddd;
border-radius:6px;
margin-top:20px;
}

.progress-bar{
height:100%;
width:10%;
background:#3f509d;
border-radius:6px;
transition:width .4s;
}

.info{
margin-top:30px;
}

.stage{
font-weight:bold;
font-size:1.2rem;
}