#tutorial-modal {
    max-width: 600px; /* Adjusted max width */
    width: 90%; /* Keep width */
    background: var(--gradient-dark); /* Use theme variable */
    color: var(--clay-text-primary); /* Use theme variable */
    padding: 1.5rem; /* Adjusted padding */
    border-radius: 0.75rem; /* Adjusted rounding */
    box-shadow: var(--clay-shadow-heavy); /* Use theme variable */
    border: 1px solid var(--clay-border-light); /* Use theme variable */
}

#tutorial-title {
    font-size: 1.25rem; /* Adjusted size */
    font-weight: 600; /* Adjusted weight */
    margin-bottom: 1rem; /* Keep spacing */
    color: var(--clay-secondary); /* Use theme variable */
    border-bottom: 1px solid var(--clay-border); /* Use theme variable */
    padding-bottom: 0.5rem; /* Keep padding */
    text-transform: uppercase; /* Add uppercase */
    letter-spacing: 0.05em; /* Add letter spacing */
}

#tutorial-content {
    max-height: 400px; /* Adjusted max height */
    overflow-y: auto; /* Keep layout */
    background-color: var(--clay-darker); /* Use theme variable */
    line-height: 1.6; /* Keep layout */
    padding: 1rem; /* Add padding */
    border-radius: 0.5rem; /* Add rounding */
    border: 1px solid var(--clay-border); /* Add border */
    font-size: 0.9rem; /* Adjust font size */
    color: var(--clay-text-secondary); /* Use theme variable */
}

#tutorial-content ul { /* Style lists */
    padding-left: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    list-style: disc;
}
#tutorial-content li {
    margin-bottom: 0.4rem;
}
#tutorial-content strong {
    color: var(--clay-text-primary); /* Make strong text brighter */
}

/* Ensure paragraph text color is applied correctly. */
#tutorial-content p {
    color: var(--clay-text-secondary); /* Use theme variable */
    margin-bottom: 0.75rem; /* Add spacing between paragraphs */
}
#tutorial-content p:last-child {
    margin-bottom: 0; /* Remove margin from last paragraph */
}

#tutorial-ok-btn {
    /* Styles handled by theme (using success color) */
    background-color: var(--clay-success);
    color: white;
    border-color: #388E3C;
    width: 100%; /* Keep layout */
    margin-top: 1.5rem; /* Keep spacing */
    border: none; /* Keep layout */
    cursor: pointer; /* Keep interaction */
    font-size: 1rem; /* Adjusted size */
    box-shadow: var(--clay-shadow); /* Add shadow */
    padding: 0.75rem; /* Adjust padding */
}

#tutorial-ok-btn:hover {
    background-color: #388E3C; /* Darker green on hover */
}