body {
font-family: Arial, sans-serif;
margin: 0;
background: #f5f5f5;
color: #222;
}

header {
background: #1f2937;
color: white;
padding: 24px;
text-align: center;
}

main {
max-width: 900px;
margin: 20px auto;
padding: 16px;
}

.lesson {
background: white;
padding: 20px;
border-radius: 12px;
}

#player {
width: 100%;
aspect-ratio: 16 / 9;
margin-bottom: 16px;
}

.controls button,
section button {
margin: 6px;
padding: 10px 14px;
cursor: pointer;
}

textarea {
width: 100%;
min-height: 80px;
margin-top: 8px;
}

.hidden {
display: none;
}

.question {
margin-bottom: 14px;
padding: 10px;
background: #f1f5f9;
border-radius: 8px;
}