body { font-family: Arial, sans-serif; margin: 0; background: #f7f7f7; }
header { background: #2c3e50; color: white; padding: 1em; text-align: center; }
nav { display: flex; flex-wrap: wrap; gap: 0.5em; padding: 1em; background: #ecf0f1; justify-content: center; }
nav button { background: #3498db; color: white; border: none; padding: 0.5em 1em; border-radius: 0.3em; cursor: pointer; }
nav button.active { background: #2980b9; }
main { padding: 1em; }
section { display: none; }
section.active { display: block; }
ul { list-style: none; padding: 0; }
li { background: white; margin: 0.5em 0; padding: 0.8em; border-radius: 0.3em; display: flex; justify-content: space-between; align-items: center; }
audio { margin-left: 1em; }