body { 
    font-family: Arial, sans-serif; 
    text-align: center;
    padding: 10px;
}

.grid { 
    display: grid; 
    gap: 10px; 
    justify-content: center; 
    max-width: 90vw; 
    margin: auto;
}

.task { 
    display: flex; 
    align-items: center; 
    gap: 5px; 
    font-size: 1.2em;
}

input { 
    width: 3em; 
    text-align: center;
    font-size: 1em;
    padding: 5px;
}

button {
    font-size: 1.2em;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background: #007BFF;
    color: white;
}

.task-type {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 1.1em;
}

/***
.controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}
**/

button:hover {
    background: #0056b3;
}

.correct { background-color: lightgreen; }
.incorrect { background-color: lightcoral; }

.score-panel {
    font-size: 1.2em;
    margin: 10px 0;
}

/* Responsive design */
@media (max-width: 600px) {
    .task { font-size: 1em; }
    input { width: 2.5em; font-size: 1em; }
    button { font-size: 1em; padding: 8px 15px; }
}