aider: Changed CSS animation in docs/voice.md to make the progress bar oscillate in a less regular pattern.

# Aider chat conversation:

USER: I did `git reset --hard HEAD~1` to discard the last edits.

ASSISTANT: Okay, that command will undo the last commit and discard the changes made in it. If you need to make any further changes or need assistance with anything else, feel free to ask.

USER: can we make the css animation less regular, maybe cycle from 1-9 and then 1-3 and then 1-9 ...

ASSISTANT: Sure, we can modify the CSS animation in the `docs/voice.md` file to make the progress bar oscillate in a less regular pattern. We can achieve this by defining multiple keyframes for the animation.

Here is the *edit block* for this change:

<source>markdown
docs/voice.md
<<<<<<< HEAD
<style>
    .recording-line > * {
        display: inline-block;
        vertical-align: middle;
    }
    #progress-bar {
        width: 100px;
        height: 20px;
        background-color: #f0f0f0;
        margin-left: 10px;
    }
    #progress {
        height: 100%;
        background-color: #333;
        animation: progress 1s infinite;
    }
    @keyframes progress {
        0% { width: 10%; }
        50% { width: 90%; }
        100% { width: 10%; }
    }
</style>
=======
<style>
    .recording-line > * {
        display: inline-block;
        vertical-align: middle;
    }
    #progress-bar {
        width: 100px;
        height: 20px;
        background-color: #f0f0f0;
        margin-left: 10px;
    }
    #progress {
        height: 100%;
        background-color: #333;
        animation: progress 3s infinite;
    }
    @keyframes progress {
        0% { width: 10%; }
        33% { width: 90%; }
        66% { width: 30%; }
        100% { width: 90%; }
    }
</style>
>>>>>>> updated
</source>

docs/voice.md

@@ -42,12 +42,13 @@ the aider chat session.
     #progress {
         height: 100%;
         background-color: #333;
-        animation: progress 1s infinite;
+        animation: progress 3s infinite;
     }
     @keyframes progress {
         0% { width: 10%; }
-        50% { width: 90%; }
-        100% { width: 10%; }
+        33% { width: 90%; }
+        66% { width: 30%; }
+        100% { width: 90%; }
     }
 </style>